/* ===========================================================================
   Stoneland USA — styles.css
   Palette is drawn from the brand mark (#c84f1a) and from quarried stone.
   Colour beyond that should come from the footage and the slabs themselves.
   =========================================================================== */

:root {
  /* ── Ground ── */
  --ink:          #0a0a0b;
  --ink-soft:     #121214;
  --ink-raise:    #17171a;
  --ink-line:     #26262a;

  /* ── Light ── */
  --ivory:        #f5f2ec;
  --bone:         #e2dbce;
  --stone:        #9c968b;
  --stone-dim:    #6b665e;

  /* ── Brand ── */
  --terra:        #c84f1a;
  --terra-lift:   #dd6a34;
  --champagne:    #c7b49a;

  /* ── Type ── */
  --serif: "Instrument Serif", Didot, "Bodoni 72", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Inter", "Segoe UI", Roboto, sans-serif;

  /* ── Rhythm ── */
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --band:   clamp(6rem, 14vh, 12rem);

  /* ── Motion: slow, heavy, controlled ── */
  --ease: cubic-bezier(0.22, 0.61, 0.30, 1);
  --slow: 1.1s;
  --med:  0.62s;

  --nav-h: 5.25rem;
}

html { background: var(--ink); }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ivory);
  background: var(--ink);
  letter-spacing: 0.005em;
}

body.is-booting { overflow: hidden; }
body.is-locked  { overflow: hidden; }

/* ── Shared type ───────────────────────────────────────────────────────── */

.eyebrow, .section__eyebrow, .cue--eyebrow {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--stone);
}

.section__title {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 6.4vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.017em;
  color: var(--ivory);
}
.section__title em { font-style: italic; color: var(--bone); }

.section__lede {
  max-width: 42ch;
  font-size: clamp(1rem, 1.15vw, 1.1875rem);
  line-height: 1.65;
  color: var(--stone);
}

.skip {
  position: fixed;
  top: 0; left: 50%;
  z-index: 400;
  transform: translate(-50%, -120%);
  padding: 0.85rem 1.5rem;
  background: var(--ivory);
  color: var(--ink);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.skip:focus { transform: translate(-50%, 0); }

.sentinel { display: block; height: 1px; }

/* ═══════════════════════════  BOOT  ═══════════════════════════════════ */

.boot {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  background: var(--ink);
  transition: opacity var(--slow) var(--ease), visibility var(--slow);
}
.boot.is-done { opacity: 0; visibility: hidden; }

.boot__inner { width: min(30rem, 74vw); text-align: center; }

.boot__mark {
  width: 100%;
  height: auto;
  opacity: 0;
  animation: bootIn 1.6s var(--ease) 0.15s forwards;
}

.boot__line {
  height: 1px;
  margin: 2.75rem 0 1.25rem;
  background: var(--ink-line);
  overflow: hidden;
}
.boot__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--terra);
  transition: width 0.45s var(--ease);
}

.boot__note {
  font-size: 0.6875rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--stone-dim);
  opacity: 0;
  animation: bootIn 1.6s var(--ease) 0.5s forwards;
}

@keyframes bootIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ═══════════════════════════  NAV  ════════════════════════════════════ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--gutter);
  padding-inline: var(--gutter);
  color: var(--ivory);
  transition: background var(--med) var(--ease),
              border-color var(--med) var(--ease),
              transform var(--med) var(--ease);
  border-bottom: 1px solid transparent;
}

/* Persistent, readable state once the film is behind us */
/* No backdrop-filter. Blurring live content behind a fixed bar forces a
   re-blur of that region on every scrolled frame, which was the single
   most expensive thing on the page. A near-opaque ground reads the same
   against this palette and costs nothing. */
.nav.is-grounded {
  background: rgb(10 10 11 / 0.94);
  border-bottom-color: var(--ink-line);
}
.nav.is-hidden { transform: translateY(-100%); }

.nav__brand { flex: 0 0 auto; }
.nav__brand img {
  width: clamp(8.5rem, 13vw, 11.5rem);
  height: auto;
}

.nav__links {
  margin-left: auto;
  display: flex;
  gap: clamp(1.5rem, 2.6vw, 2.75rem);
}
.nav__links a {
  position: relative;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  padding-block: 0.5rem;
  transition: color var(--med) var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0.15rem;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--med) var(--ease);
}
.nav__links a:hover { color: var(--ivory); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__cta {
  flex: 0 0 auto;
  padding: 0.75rem 1.4rem;
  border: 1px solid rgb(226 219 206 / 0.4);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory);
  transition: background var(--med) var(--ease), color var(--med) var(--ease),
              border-color var(--med) var(--ease);
}
.nav__cta:hover {
  background: var(--terra);
  border-color: var(--terra);
  color: var(--ivory);
}

.nav__toggle { display: none; }

/* ── Mobile panel ── */
.menu {
  position: fixed;
  inset: 0;
  z-index: 290;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: var(--nav-h) var(--gutter) var(--gutter);
  background: var(--ink);
  opacity: 0;
  transition: opacity var(--med) var(--ease);
}
.menu.is-open { opacity: 1; }

.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55em 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 9vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ivory);
  border-bottom: 1px solid var(--ink-line);
  opacity: 0;
  transform: translateY(14px);
}
.menu.is-open .menu__links a {
  animation: bootIn 0.7s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 70ms + 90ms);
}
.menu__links em {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  color: var(--terra);
}

.menu__cta {
  align-self: start;
  padding: 1rem 1.75rem;
  background: var(--terra);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ═══════════════════════════  THE FILM  ═══════════════════════════════ */

.chapter {
  position: relative;
  height: calc(var(--scrub, 3) * 100svh);
}

.stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--ink);
}

.stage__media { position: absolute; inset: 0; }

.stage__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Source sequences are 960x960; centre-weight the crop so the subject holds */
  object-position: center;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
  will-change: opacity;
}
.stage__video.is-ready { opacity: 1; }

/* Grade: vignette + floor lift + grain. Keeps the upscaled square source
   feeling like film rather than a stretched clip. */
.stage__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(135% 100% at 50% 45%, transparent 58%, rgb(6 6 7 / 0.42) 100%),
    linear-gradient(to bottom, rgb(6 6 7 / 0.46) 0%, transparent 20%, transparent 66%, rgb(6 6 7 / 0.66) 100%);
}
.stage__grade--light {
  background:
    radial-gradient(140% 105% at 50% 45%, transparent 66%, rgb(6 6 7 / 0.3) 100%),
    linear-gradient(to bottom, rgb(6 6 7 / 0.38) 0%, transparent 18%, transparent 70%, rgb(6 6 7 / 0.52) 100%);
}
.stage__grade::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.stage__missing {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.75rem;
  padding: var(--gutter);
  text-align: center;
  background:
    radial-gradient(90% 70% at 50% 40%, #1d1c1a 0%, var(--ink) 78%);
}
.stage__missing-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--bone);
}
.stage__missing-body {
  max-width: 34rem;
  font-size: 0.875rem;
  color: var(--stone-dim);
}
.stage__missing-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125em;
  color: var(--champagne);
}

/* ── Typography over footage ── */
.stage__type {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1.5rem;
  padding: var(--nav-h) var(--gutter) var(--band);
  pointer-events: none;
}
.stage__type--corner {
  align-content: end;
  padding-bottom: clamp(3.5rem, 10vh, 7rem);
}

.cue {
  opacity: var(--o, 0);
  transform: translate3d(0, var(--dy, 1.1rem), 0);
}

.cue--display {
  font-family: var(--serif);
  font-size: clamp(3rem, 11.5vw, 11rem);
  line-height: 0.9;
  letter-spacing: var(--ls, -0.012em);
  color: var(--ivory);
  text-shadow: 0 0.06em 0.6em rgb(6 6 7 / 0.4);
  text-wrap: balance;
}
.cue--display span { display: block; }
.cue--sm { font-size: clamp(2.25rem, 7vw, 6rem); }

.cue--lede {
  max-width: 30ch;
  font-size: clamp(0.9375rem, 1.1vw, 1.125rem);
  line-height: 1.6;
  color: var(--bone);
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(1.75rem, 4vh, 3rem);
  transform: translateX(-50%);
  font-size: 0.625rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--stone);
  opacity: var(--o, 0);
  pointer-events: none;
}
.scroll-hint::after {
  content: "";
  display: block;
  width: 1px;
  height: 2.25rem;
  margin: 0.85rem auto 0;
  background: linear-gradient(var(--stone), transparent);
  animation: hintDrop 2.6s var(--ease) infinite;
  transform-origin: top;
}
@keyframes hintDrop {
  0%, 100% { transform: scaleY(0.3); opacity: 0.3; }
  45%      { transform: scaleY(1);   opacity: 1; }
}

/* Dark-frame seam: the traveller passes INTO the stone here */
.seam {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--o, 0);
  pointer-events: none;
}

/* ── Resolve ── */
.resolve {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--band) var(--gutter);
  background:
    radial-gradient(80% 60% at 50% 50%, #141313 0%, var(--ink) 72%);
}
.resolve__inner { text-align: center; max-width: 62rem; }

.resolve__mark {
  width: min(30rem, 68vw);
  height: auto;
  margin: 0 auto clamp(2.5rem, 6vh, 4.5rem);
}

.resolve__tag {
  font-family: var(--serif);
  font-size: clamp(2.75rem, 10vw, 9rem);
  line-height: 0.92;
  letter-spacing: -0.018em;
  color: var(--ivory);
}
.resolve__tag span { display: block; }
.resolve__tag span:last-child { color: var(--terra); font-style: italic; }

/* ═══════════════════════════  SECTIONS  ═══════════════════════════════ */

.section {
  position: relative;
  padding: var(--band) var(--gutter);
  border-top: 1px solid var(--ink-line);
  background: var(--ink);
}

.section__head { max-width: 68rem; display: grid; gap: 1.25rem; }
.section__head .section__title { margin-top: 0.35rem; }

/* Scroll-reveal for functional content */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 1.75rem, 0);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ── Collection index ── */
.index {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 6vw, 6rem);
  margin-top: clamp(3rem, 9vh, 6rem);
  align-items: start;
}

.index__list { border-top: 1px solid var(--ink-line); }

.index__row {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.5rem);
  width: 100%;
  padding: clamp(1.1rem, 2.6vh, 1.9rem) 0;
  border-bottom: 1px solid var(--ink-line);
  text-align: left;
  color: var(--stone);
  transition: color var(--med) var(--ease), padding-left var(--med) var(--ease);
}
.index__row:hover, .index__row:focus-visible, .index__row.is-active {
  color: var(--ivory);
  padding-left: clamp(0.5rem, 1.6vw, 1.5rem);
}

.index__num {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  color: var(--terra);
}

.index__name {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 4.4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: inherit;
}

.index__note {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone-dim);
}

.index__preview {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  display: grid;
  gap: 1rem;
}
.index__preview-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
}
.index__preview-frame canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity var(--slow) var(--ease), transform 2.4s var(--ease);
}
.index__preview-frame canvas.is-in { opacity: 1; transform: scale(1); }

.index__preview-meta {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone-dim);
  min-height: 1.2em;
}

/* ── Stone wall ── */
.wall { padding-inline: 0; }
.section__head--wall { padding-inline: var(--gutter); }

.wall__viewport {
  position: relative;
  height: clamp(28rem, 78vh, 54rem);
  margin-top: clamp(2.5rem, 7vh, 4.5rem);
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 50%, #0f0f10 0%, var(--ink) 80%);
  border-block: 1px solid var(--ink-line);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.wall__viewport.is-dragging { cursor: grabbing; }

.wall__field {
  position: absolute;
  top: 0; left: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.wall__tile {
  position: absolute;
  overflow: hidden;
  background: var(--ink-soft);
  border: 1px solid rgb(226 219 206 / 0.08);
  transition: border-color var(--med) var(--ease), transform var(--med) var(--ease);
}
.wall__tile canvas { width: 100%; height: 100%; display: block; }
.wall__tile:hover { border-color: rgb(200 79 26 / 0.6); }
.wall__tile:focus-visible { border-color: var(--terra); }

.wall__tile-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.1rem 1rem 0.85rem;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  background: linear-gradient(transparent, rgb(6 6 7 / 0.88));
  opacity: 0;
  transition: opacity var(--med) var(--ease);
}
.wall__tile:hover .wall__tile-label,
.wall__tile:focus-visible .wall__tile-label { opacity: 1; }

.wall__hint {
  position: absolute;
  left: 50%; bottom: 1.75rem;
  transform: translateX(-50%);
  padding: 0.6rem 1.25rem;
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--stone);
  background: rgb(10 10 11 / 0.85);
  pointer-events: none;
  transition: opacity var(--med) var(--ease);
}
.wall__hint.is-gone { opacity: 0; }

/* ── About ── */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.about__title { max-width: 16ch; }
.about__body { display: grid; gap: 1.5rem; max-width: 44ch; padding-top: 0.75rem; }
.about__body p { color: var(--stone); font-size: clamp(1rem, 1.15vw, 1.1875rem); }

.link-arrow {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivory);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--terra);
  transition: gap var(--med) var(--ease);
}
.link-arrow::after { content: "\2192"; }
.link-arrow:hover { gap: 1.2rem; }

/* ── Visit ── */
.visit {
  background:
    linear-gradient(to bottom, var(--ink) 0%, #121110 55%, var(--ink) 100%);
}
.visit__inner { display: grid; gap: 1.75rem; max-width: 72rem; }
.visit__title { max-width: 14ch; }
.visit__lede { margin-bottom: 0.75rem; }

.visit__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.btn {
  display: inline-flex;
  align-items: center;
  padding: 1.05rem 1.9rem;
  border: 1px solid rgb(226 219 206 / 0.28);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory);
  transition: background var(--med) var(--ease), border-color var(--med) var(--ease),
              color var(--med) var(--ease);
}
.btn:hover { border-color: var(--bone); background: rgb(226 219 206 / 0.07); }
.btn--solid { background: var(--terra); border-color: var(--terra); }
.btn--solid:hover { background: var(--terra-lift); border-color: var(--terra-lift); }

/* ── Contact ── */
.contact__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 6vh, 4rem);
  max-width: 78rem;
}
.contact__list dt {
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 0.6rem;
}
.contact__list dd {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--bone);
}
.contact__list dd.is-placeholder {
  color: var(--stone-dim);
  font-style: italic;
}
.contact__list dd.is-placeholder::before {
  content: "Placeholder — ";
  font-style: normal;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--stone-dim);
}

/* ── Footer ── */
.foot {
  display: grid;
  gap: 1.5rem;
  justify-items: center;
  padding: var(--band) var(--gutter) clamp(2.5rem, 6vh, 4rem);
  text-align: center;
  border-top: 1px solid var(--ink-line);
}
.foot__mark { width: min(18rem, 56vw); height: auto; opacity: 0.9; }
.foot__tag {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.4vw, 1.875rem);
  color: var(--bone);
}
.foot__legal { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--stone-dim); }

/* ═══════════════════════════  SLAB VIEWER  ════════════════════════════ */

.viewer[open] {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(26rem, 34vw);
  background: var(--ink);
}

.viewer__stage {
  position: relative;
  overflow: hidden;
  background: radial-gradient(80% 70% at 50% 50%, #131314 0%, #0a0a0b 85%);
  cursor: grab;
  touch-action: none;
}
.viewer__stage.is-dragging { cursor: grabbing; }

.viewer__pan {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate3d(-50%, -50%, 0) scale(1);
  transform-origin: center;
  will-change: transform;
}
.viewer__pan canvas {
  display: block;
  max-height: 82svh;
  width: auto;
  box-shadow: 0 2rem 5rem rgb(0 0 0 / 0.6);
}

.viewer__zoom {
  position: absolute;
  left: 50%; bottom: 1.5rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem;
  background: rgb(10 10 11 / 0.9);
  border: 1px solid var(--ink-line);
}
.viewer__zoom button {
  width: 2.25rem; height: 2.25rem;
  font-size: 1.05rem;
  color: var(--bone);
  transition: background var(--med) var(--ease);
}
.viewer__zoom button:hover { background: rgb(226 219 206 / 0.1); }
.viewer__zoom span {
  min-width: 3.25rem;
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--stone);
}

.viewer__panel {
  position: relative;
  overflow-y: auto;
  padding: clamp(2rem, 4vw, 3.25rem);
  border-left: 1px solid var(--ink-line);
  background: var(--ink-soft);
}

.viewer__close {
  position: absolute;
  top: 1rem; right: 1.25rem;
  width: 2.75rem; height: 2.75rem;
  font-size: 1.5rem;
  color: var(--stone);
  transition: color var(--med) var(--ease);
}
.viewer__close:hover { color: var(--ivory); }

.viewer__eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--terra);
}
.viewer__name {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0.5rem 0 1rem;
}
.viewer__demo {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  margin-bottom: 1.5rem;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--champagne);
  border: 1px dashed rgb(199 180 154 / 0.4);
}

.viewer__spec {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem 1.5rem;
  padding: 1.5rem 0;
  border-block: 1px solid var(--ink-line);
  font-size: 0.875rem;
}
.viewer__spec dt {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone-dim);
  padding-top: 0.2em;
}
.viewer__spec dd { color: var(--bone); }
.viewer__spec dd.is-placeholder { color: var(--stone-dim); font-style: italic; }

.viewer__actions { display: grid; gap: 0.6rem; margin: 1.75rem 0; }
.viewer__actions .btn { justify-content: center; }

.viewer__alt-label {
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--stone-dim);
  margin-bottom: 0.85rem;
}
.viewer__alts { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.viewer__alts button {
  width: 4.25rem;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--ink-line);
  transition: border-color var(--med) var(--ease);
}
.viewer__alts button:hover { border-color: var(--terra); }
.viewer__alts canvas { width: 100%; height: 100%; }

/* ═══════════════════════  REAL PHOTOGRAPHY  ═══════════════════════════
   Slabs render from the manifest when photography exists, and fall back to
   the procedural canvas when it does not. Both fill their frame identically,
   so swapping one for the other changes nothing about the layout. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.index__preview-frame img,
.index__preview-frame canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.index__preview-frame img {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity var(--slow) var(--ease), transform 2.4s var(--ease);
}
.index__preview-frame img.is-in { opacity: 1; transform: scale(1); }

.wall__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.viewer__pan img {
  display: block;
  max-height: 82svh;
  max-width: 88vw;
  width: auto;
  box-shadow: 0 2rem 5rem rgb(0 0 0 / 0.6);
}
@media (max-width: 60rem) {
  .viewer__pan img { max-height: 46svh; max-width: 92vw; }
}
@media (max-width: 44rem) {
  .viewer__pan img { max-height: 44svh; }
}

.viewer__alts img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ═══════════════════  NAV LEGIBILITY OVER FOOTAGE  ════════════════════
   The quarry opens on bright limestone, and terracotta artwork disappears
   into it. Over the film the mark is carried in ivory against a soft scrim;
   the brand colour returns at full strength on the dark grounds below, where
   it belongs. */

.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgb(6 6 7 / 0.62), rgb(6 6 7 / 0));
  height: 190%;
  pointer-events: none;
  transition: opacity var(--med) var(--ease);
}
.nav.is-grounded::before { opacity: 0; }

.nav__brand img {
  filter: brightness(0) invert(1);
  opacity: 0.94;
  transition: opacity var(--med) var(--ease);
}
.nav__brand:hover img { opacity: 1; }

/* Type over footage needs a touch more weight than type over ink */
.stage__type .cue--eyebrow { color: var(--bone); }

/* Each contact label belongs to its value. Grid children flow independently,
   so the pair is wrapped rather than relying on source order. */
.contact__pair { break-inside: avoid; }
.contact__pair dt { margin-bottom: 0.6rem; }
.contact__pair dd + dt { margin-top: 1.5rem; }