/* ============================================================
   Eternal Graphers v4 — homepage narrative
   Acts: film plays → freezes → becomes a print → rests by the
   camera → film emerges → the reel of trust → a frame expands
   into the portfolio → cinema → contact sheet → negatives →
   ledger → the next conversation.
   ============================================================ */

/* ---------- Act I: the journey (pinned, desktop only) ---------- */
.jn { position: relative; height: 200vh; background: var(--film); }
.jn__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }

.jn__print {
  position: absolute; inset: 0;
  will-change: transform;
  transform-origin: 50% 50%;
}
.jn__mat {
  position: absolute; inset: 0;
  border: 0 solid var(--warm-white);
  box-shadow: none;
  pointer-events: none;
  z-index: 3;
}
.jn__media { position: absolute; inset: 0; overflow: hidden; }
/* REPLACE: swap .jn__pan for
   <video muted autoplay loop playsinline poster="...">
   when the licensed hero film exists. home.js will then drive
   video.playbackRate instead of the pan transform. */
.jn__pan {
  position: absolute; inset: -14%;
  background:
    url("assets/photos/hero-first.jpg?v=4") center / cover no-repeat,
    linear-gradient(158deg, #8A5C4E 0%, #5D3E3C 48%, #2E2426 100%);
  will-change: transform;
}
/* The hero film sits ON TOP of .jn__pan and only fades in once it can
   actually play — so a missing/slow/blocked video degrades to the still. */
/* NOTE: `inset` alone does NOT stretch a replaced element (video/img) — it keeps
   its intrinsic size and leaves gaps at the edges. width/height must be explicit. */
.jn__vid {
  position: absolute; left: -14%; top: -14%;
  width: 128%; height: 128%;
  max-width: none;            /* base.css sets `video { max-width:100% }`, which
                                 silently clamps the 128% bleed back to 100% */
  object-fit: cover; object-position: center;
  opacity: 0; transition: opacity 0.9s ease;
  will-change: transform; pointer-events: none;
}
.jn__vid.is-on { opacity: 1; }
/* once the film is running, the fallback still is retired completely */
.jn__media.has-vid .jn__pan,
.jn-static__bg.has-vid .jn__pan { opacity: 0; }
/* mobile / reduced-motion hero: same film, lighter encode, no scroll pinning */
.jn__vid--static,
.jn__vid--print {
  left: 0; top: 0; width: 100%; height: 100%;
}
/* the film literally plays inside the print resting on the camera (mobile).
   On desktop this print is the hidden landing target, so it stays image-only. */
.jn__vid--print { transition: opacity 1.1s ease; }
.jn__figures {
  position: absolute; left: 50%; bottom: 18%;
  width: 42%; height: 46%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 42% 100%, rgba(32, 22, 20, 0.75) 0%, transparent 58%),
              radial-gradient(ellipse at 60% 100%, rgba(32, 22, 20, 0.65) 0%, transparent 52%);
  filter: blur(2px);
}
.jn__grade { position: absolute; inset: 0; background: #C9B08B; opacity: 0; mix-blend-mode: color; }
.jn__grain { position: absolute; inset: 0; background-image: var(--grain); opacity: 0.2; }
.jn__vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 46%, transparent 58%, rgba(12, 10, 8, 0.42) 100%); }

.jn__caption {
  position: absolute; z-index: 4;
  left: 50%; bottom: 7vh; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(252, 251, 245, 0.7);
  opacity: 0;
}

.jn__hero {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--warm-white);
  padding: 0 24px;
}
.jn__hero h1 { max-width: 15ch; text-wrap: balance; }
.jn__hero h1 em, .jn-static__title em { color: var(--sage); }
.jn__hero p {
  margin: 26px auto 0; max-width: 44ch;
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6;
  color: rgba(252, 251, 245, 0.78);
}
.jn__hero .btn { margin-top: 40px; }

.jn__cue {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 5;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase;
  color: rgba(252, 251, 245, 0.55);
}
.jn__cue::after {
  content: ""; display: block; width: 1px; height: 34px;
  background: rgba(252, 251, 245, 0.5); margin: 12px auto 0;
  animation: cue 2s ease-in-out infinite; transform-origin: top;
}
@keyframes cue { 0%, 100% { transform: scaleY(0.3); opacity: 0.35; } 55% { transform: scaleY(1); opacity: 1; } }

.jn__veil { position: absolute; inset: 0; z-index: 2; background: var(--ivory); opacity: 0; }

/* the studio scene lives INSIDE the pinned stage on desktop:
   the camera fades in beneath the shrinking print so the photo
   lands on it in one continuous motion — nothing vanishes,
   nothing above is left empty (home.js clones it from .studio). */
.jn__scene {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center;
  opacity: 0;
  pointer-events: none;
}
.jn__scene > .wrap { width: 100%; }
.jn__print { z-index: 4; }
/* the flow studio hides ONLY while the in-stage scene is actually
   animating (body.jn-live is set by home.js from a running frame) —
   if the script fails or motion is off, the camera stays in the page */
@media (min-width: 961px) {
  body.jn-live .studio { display: none; }
}

/* ---------- Act II: the studio (camera, normal flow) ---------- */
.studio { background: var(--ivory); position: relative; padding: clamp(80px, 9vw, 130px) 0 0; }
.studio__grid {
  display: grid;
  grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr);
  gap: clamp(30px, 5vw, 90px);
  align-items: start;
}
.studio__cam { position: relative; }
.studio__cam svg { width: min(92%, 620px); height: auto; margin: 0 auto; display: block; will-change: transform; }
.studio__desk-print {
  position: absolute; top: -7%; right: 2%;
  width: clamp(130px, 15vw, 210px);
  transform: rotate(2.4deg);
}
.studio__desk-print .ph { aspect-ratio: 3 / 2; }
.studio__copy { padding-top: clamp(10px, 3vw, 60px); max-width: 54ch; }
.studio__copy h2 { max-width: 17ch; }
.studio__copy p { margin-top: 22px; color: var(--soft); }
.studio__copy p:first-of-type { margin-top: 30px; }

/* the film leader that emerges from the camera
   (lives inside .studio__cam so it stays under the film slot) */
.studio__leader {
  width: min(206px, 52vw);
  margin: -46px auto 0;
  height: 150px;
  position: relative;
  transform-origin: top;
  will-change: transform;
}
.studio__leader .lead {
  position: absolute; inset: 0;
  background: var(--film);
  --holes: var(--ivory);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}
.studio__leader .sprocket-v { --holes: var(--ivory); }
.studio__leader .edge-code {
  position: absolute; left: 50%; top: 38%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ---------- Act III: the reel of trust ---------- */
.reel { background: #F1E7CE; padding-bottom: clamp(40px, 6vw, 80px); }
/* The lead is the blank film leader above the first frame. Kept short so the
   heading sits close to the photograph instead of floating above a black gap. */
.stop__seg--lead { padding: 0; min-height: clamp(48px, 5vw, 74px); }
.stop .stop__copy h2 { font-size: clamp(28px, 3.2vw, 42px); max-width: 14ch; }

/* the film sweeps from the camera's slot (left column) onto the
   story reel at page centre — like film curling to the take-up spool */
.reel__throat {
  height: clamp(74px, 9vw, 128px);
  background: var(--film);
  clip-path: polygon(
    calc(50% - 407px) 0, calc(50% - 143px) 0,
    calc(50% + 240px) 100%, calc(50% - 240px) 100%);
}
@media (max-width: 960px) {
  .reel__throat {
    height: clamp(90px, 12vw, 140px);
    clip-path: polygon(
      calc(50% - 104px) 0, calc(50% + 104px) 0,
      calc(50% + min(240px, 46vw)) 100%, calc(50% - min(240px, 46vw)) 100%);
  }
}

.stop {
  display: grid;
  grid-template-columns: 1fr min(480px, 88vw) 1fr;
  align-items: center;
}
.stop__seg {
  grid-column: 2;
  position: relative;
  background: var(--film);
  --holes: var(--ivory);
  padding: clamp(34px, 4vw, 60px) 34px;
}
.stop__seg .ph { aspect-ratio: 3 / 2; }
.stop__seg .seg__row {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px;
}
.stop__copy { padding: 0 clamp(26px, 4.5vw, 70px); max-width: 44ch; }
.stop__copy--l { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; }
.stop__copy--r { grid-column: 3; grid-row: 1; }
.stop__copy--l .kicker { margin-left: auto; }
/* 14ch forced "Captured, edited, delivered - in-house." onto three lines;
   this gives the longer headings two. */
.stop__copy h3 { font-size: clamp(24px, 2.6vw, 34px); max-width: 21ch; }
.stop__copy--l h3 { margin-left: auto; }
.stop__copy p { margin-top: 16px; color: var(--soft); font-size: 16.5px; }
/* Same serif as the body copy in the other frames - this list previously ran
   in mono caps and read as a different voice from everything around it. */
.stop__copy .trad {
  display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 16px;
  font-family: var(--serif); font-size: 16.5px; letter-spacing: 0;
  text-transform: none; color: var(--soft);
}
/* one item left in the row, so centre it rather than pinning it left */
.stop__seg .seg__row--credit { justify-content: center; }
.stop__copy--l .trad { justify-content: flex-end; }

/* trailing leader before the pause */
.reel__tail {
  display: grid; grid-template-columns: 1fr min(480px, 88vw) 1fr;
}
.reel__tail i {
  grid-column: 2;
  height: clamp(90px, 12vw, 150px);
  background: var(--film);
  clip-path: polygon(0 0, 100% 0, 100% 30%, 50% 62%, 0 30%);
}

@media (max-width: 960px) {
  .stop { grid-template-columns: 1fr; }
  .stop__seg { grid-column: 1; width: min(480px, 92vw); margin: 0 auto; }
  .stop__copy, .stop__copy--l, .stop__copy--r {
    grid-column: 1; grid-row: auto; justify-self: start; text-align: left;
    padding: 26px clamp(22px, 6vw, 44px) 56px; max-width: 60ch;
  }
  .stop__copy--l .kicker, .stop__copy--l h3 { margin-left: 0; }
  /* `max-width: 14ch` capped these headings at 187px inside a 330px column,
     so short lines wrapped to three. Let them use the width they have. */
  .stop__copy h3 { max-width: none; }
  .stop .stop__copy h2 { max-width: none; }
  /* the traditions row, now serif: slightly tighter than desktop so the
     communities still sit two or three to a line rather than one each */
  .stop__copy .trad { font-size: 15px; gap: 4px 16px; }
  .stop__copy--l .trad { justify-content: flex-start; }
  .reel__tail { grid-template-columns: 1fr; }
  .reel__tail i { grid-column: 1; width: min(480px, 92vw); margin: 0 auto; }
}

/* ---------- Act IV: returning families (the film pauses) ---------- */
.gen { background: var(--sage); }
.gen__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
.gen__media .ph { aspect-ratio: 4 / 5; max-height: 78vh; }
.gen__copy h2 { max-width: 19ch; font-size: clamp(27px, 3.1vw, 42px); }
.gen__copy > p { margin-top: 24px; color: var(--forest); opacity: 0.85; max-width: 46ch; }
.gen__copy .tlink { margin-top: 34px; color: var(--forest); }
.gen__copy .tlink:hover { color: var(--ink); }
.gen__note { margin-top: 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage-deep); }
@media (max-width: 860px) { .gen__grid { grid-template-columns: 1fr; } .gen__media .ph { aspect-ratio: 4 / 3; } }

/* ---------- Act V: a frame expands into the portfolio ---------- */
.xp { position: relative; height: 260vh; background: var(--ivory); }
.xp__stage {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.xp__frame {
  position: relative;
  width: 100vw; height: 100vh;
  background: var(--film);
  --holes: var(--ivory);
  transform: scale(0.3);
  will-change: transform;
  display: flex; align-items: center; justify-content: center;
}
.xp__frame .ph { position: absolute; inset: clamp(18px, 4vw, 56px); }
.xp__frame .sprocket-v { transition: opacity 0.3s linear; }
.xp__title {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--warm-white);
  opacity: 0; transform: translateY(14px);
  pointer-events: none;
}
.xp__title .kicker { color: rgba(252, 251, 245, 0.65); }
.xp__title h2 { font-size: clamp(36px, 5vw, 64px); text-shadow: 0 2px 30px rgba(12, 10, 8, 0.35); }

/* ---------- Act VI: portfolio (horizontal strip, og-site style) ---------- */
.pf { background: #E6ECEE; }
.pf__cover { display: none; position: relative; }
.pf__cover .ph { aspect-ratio: 16 / 9; }
.pf__item { position: relative; display: block; }
.pf__item .ph { aspect-ratio: 3 / 2; transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease; transform-origin: center; filter: saturate(0.92); }
.pf__item:hover .ph { transform: scale(1.015); filter: saturate(1); }
.pf__item figcaption { display: flex; justify-content: space-between; gap: 14px; margin-top: 12px; }
.pf__item .t { font-family: var(--serif); font-size: 18px; }
.pf__item .m { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); white-space: nowrap; padding-top: 6px; }
.pf__more { text-align: center; margin-top: clamp(40px, 5vw, 64px); }

/* ---------- Act VII: the cinema room ---------- */
.cin { background: linear-gradient(var(--forest), var(--film) 86%); color: var(--warm-white); }
.cin .kicker { color: rgba(252, 251, 245, 0.55); }
.cin__feat { position: relative; display: block; margin-top: clamp(36px, 4vw, 56px); }
.cin__feat .ph { aspect-ratio: 16 / 9; }
.cin__feat::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12, 10, 8, 0.55) 0%, transparent 38%);
  pointer-events: none;
}
.cin__play {
  position: absolute; z-index: 3; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(72px, 7vw, 104px); height: clamp(72px, 7vw, 104px);
  border: 1px solid rgba(252, 251, 245, 0.75);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s;
}
.cin__play::before {
  content: ""; display: block;
  border-left: 14px solid var(--warm-white);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.cin__feat:hover .cin__play { transform: translate(-50%, -50%) scale(1.08); background: rgba(22, 21, 15, 0.35); }
.cin__meta {
  position: absolute; z-index: 3; left: clamp(20px, 3vw, 44px); bottom: clamp(18px, 2.6vw, 38px);
  right: clamp(20px, 3vw, 44px);
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px; flex-wrap: wrap;
}
.cin__meta .t { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 34px); }
.cin__meta .d { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(252, 251, 245, 0.7); }
.cin__row { margin-top: clamp(20px, 2.6vw, 34px); }
.cin__cell { position: relative; display: block; }
.cin__cell .ph { aspect-ratio: 16 / 9; filter: brightness(0.82) saturate(0.9); transition: filter 0.5s ease; }
.cin__cell:hover .ph { filter: brightness(1) saturate(1); }
.cin__cell figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; }
.cin__cell .t { font-family: var(--serif); font-size: 16.5px; }
.cin__cell .d { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(252, 251, 245, 0.55); padding-top: 5px; white-space: nowrap; }

/* DESKTOP ONLY - the phone layout below 961px is deliberately untouched.
   ---------------------------------------------------------------------
   Portfolio, films and the Instagram grid each open as a full screen: the
   heading sits at the top and the media below it FILLS the rest of the
   viewport. Anything after the media (the button, the row of clips) falls
   below the fold on purpose, so scrolling reveals it.

   --fill is what the heading block and the section padding cost; the media
   takes the remaining height. Measured against the real rendered heading
   rather than guessed - adjust here if the heading ever changes size. */
@media (min-width: 961px) {
  .cin { --fill: 202px; }
  .pf.sec { --fill: 176px; }   /* the gallery also carries a caption under each frame */

  /* ---- photo gallery: frames run top to bottom, button below the fold ---- */
  .pf.sec { padding-top: clamp(30px, 3vw, 44px); padding-bottom: clamp(40px, 4vw, 60px); }
  #pfstrip { height: calc(100vh - var(--fill)); min-height: 340px; align-items: stretch; }
  #pfstrip > * { flex: 0 0 min(36vw, 520px); }
  .pf__item { height: 100%; }
  .pf__item figure { height: 100%; display: flex; flex-direction: column; margin: 0; }
  .pf__item .ph { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
  .pf__item figcaption { margin-top: 10px; flex: 0 0 auto; }
  .pf__more { margin-top: clamp(30px, 3vw, 44px); }

  /* ---- films: one film fills the screen, the rest scroll in beneath ---- */
  .cin { padding-top: clamp(30px, 3vw, 44px); padding-bottom: clamp(40px, 4vw, 60px); }
  .cin__feat { margin-top: 0; max-width: none; }
  .cin__feat .ph { aspect-ratio: auto; height: calc(100vh - var(--fill)); min-height: 340px; }
  .cin__row { margin-top: clamp(16px, 1.8vw, 26px); }
  .cin__row > * { flex: 0 0 min(24vw, 300px); }
  .cin__cell .ph { aspect-ratio: 16 / 9; }   /* true ratio - never letterboxed */
  .cin__cell figcaption { margin-top: 8px; }

  /* ---- instagram: both rows inside one screen, scroll for the rest ----
     The grid takes the height left under the heading; each row is half of
     that, and the columns are set to the same figure so the tiles stay
     square. However many columns that yields is however many show - the
     remaining tiles scroll in sideways. */
  .sheet.sec { --fill: 202px; padding-top: clamp(30px, 3vw, 44px); padding-bottom: clamp(40px, 4vw, 60px); }
  .sheet .ig-grid {
    height: calc(100vh - var(--fill));
    min-height: 300px;
    grid-auto-columns: calc((100vh - var(--fill) - 12px) / 2);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-top: clamp(18px, 2vw, 28px);
  }
  .sheet .ig-grid::-webkit-scrollbar { display: none; }
  .sheet .ig-grid a { scroll-snap-align: start; }
  .sheet .ig-grid .ph { aspect-ratio: auto; height: 100%; }
}

/* Short laptops (1366x768 and similar): the headings cost proportionally more
   of the screen, so trim them there only - taller displays keep the big type. */
@media (min-width: 961px) and (max-height: 820px) {
  .cin, .sheet.sec { --fill: 183px; }
  .pf.sec { --fill: 157px; }
  .pf .hstrip-head h2, .cin .hstrip-head h2, .sheet .hstrip-head h2 { font-size: clamp(24px, 2.6vw, 34px); }
}

/* ---------- Act VIII: Instagram grid (og-site style) ---------- */
.sheet { background: #E4EADD; }
.ig-grid {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: clamp(30px, 4vw, 48px);
}
.ig-grid a { display: block; overflow: hidden; }
.ig-grid .ph { aspect-ratio: 1 / 1; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.ig-grid a:hover .ph { transform: scale(1.05); }
/* two rows that scroll sideways once five columns no longer fit */
@media (max-width: 900px) {
  .ig-grid {
    grid-auto-columns: 40vw;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .ig-grid::-webkit-scrollbar { display: none; }
  .ig-grid a { scroll-snap-align: start; }
}

/* ---------- Act IX: voices on negatives ---------- */
.neg { background: #F0E4DA; }
.neg__strip {
  position: relative;
  background: var(--film);
  --holes: var(--warm-white);
  margin-top: clamp(30px, 4vw, 48px);
  padding: 34px 0;
}
.neg__track {
  display: flex; gap: clamp(14px, 1.6vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 0 clamp(18px, 4vw, 60px);
}
.neg__track::-webkit-scrollbar { display: none; }
.neg__frame {
  flex: 0 0 min(460px, 82vw);
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding: clamp(26px, 3vw, 38px);
  background: var(--ivory);
  color: var(--ink);
  border-radius: 3px;
  align-content: center;
}
.neg__frame blockquote { font-family: var(--serif); font-size: clamp(17px, 1.5vw, 20px); font-style: italic; line-height: 1.5; }
.neg__frame cite {
  display: block; font-style: normal; margin-top: 16px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--soft); line-height: 2;
}
/* Google review chip - a light card on the black film strip, above the quotes */
.grev {
  display: flex; align-items: center; gap: 14px; width: fit-content;
  margin: 0 auto clamp(26px, 3vw, 36px);
  padding: 11px 16px 11px 13px;
  background: var(--warm-white);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42);
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.grev:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }
.grev__g { flex: 0 0 auto; width: 26px; height: 26px; display: block; }
.grev__body { display: flex; flex-direction: column; gap: 4px; }
.grev__top { display: flex; align-items: baseline; gap: 9px; }
.grev__score {
  font-family: var(--serif); font-size: 23px; line-height: 1;
  color: var(--ink); font-weight: 500; letter-spacing: 0.01em;
  font-variant-numeric: lining-nums;
}
.grev__stars {
  color: #FBBC05; font-size: 14px; line-height: 1; letter-spacing: 0.14em;
}
.grev__label {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--faint);
}
.grev__go {
  margin-left: 4px; color: var(--faint); font-size: 15px; line-height: 1;
  transition: transform 0.35s ease, color 0.35s ease;
}
.grev:hover .grev__go { transform: translateX(3px); color: var(--ink); }
.neg__hint { margin-top: 16px; text-align: right; }
@media (max-width: 640px) { .neg__frame { grid-template-columns: 1fr; } }

/* ---------- Act X: ledger + the next conversation ---------- */
.faqh { background: var(--warm-white); }
.faqh__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
.faqh__side { position: sticky; top: 110px; }
.faqh__side .tlink { margin-top: 28px; }
@media (max-width: 860px) { .faqh__grid { grid-template-columns: 1fr; } .faqh__side { position: static; } }

.close { background: var(--sage); }
.close__note { text-align: center; font-size: 15px; color: var(--soft); max-width: 60ch; margin: clamp(28px, 4vw, 40px) auto 0; }

/* ---------- static fallback (mobile + reduced motion) ---------- */
.jn-static { display: none; position: relative; color: var(--warm-white); }
.jn-static__bg { position: absolute; inset: 0; overflow: hidden; }
.jn-static__bg .jn__pan { position: absolute; inset: 0; }
.jn-static__in {
  position: relative; z-index: 2;
  min-height: 94vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 110px 24px 70px;
}
.jn-static__title {
  font-size: clamp(42px, 6.2vw, 82px);
  max-width: 13ch;
  margin: 0 auto;
}
.jn-static__in p { margin: 20px auto 0; max-width: 40ch; color: rgba(252, 251, 245, 0.78); font-size: 16px; }
.jn-static__in .btn { margin-top: 30px; will-change: transform; }
.jn-static__bg .jn__pan { will-change: transform; }
.jn-static__cue {
  margin-top: 40px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase;
  color: rgba(252, 251, 245, 0.6);
}
.jn-static__cue::after {
  content: ""; display: block; width: 1px; height: 30px; margin: 8px auto 0;
  background: rgba(252, 251, 245, 0.5);
  animation: cue 2s ease-in-out infinite; transform-origin: top;
}

@media (max-width: 960px) {
  .jn, .xp { display: none; }
  .jn-static { display: block; }
  .pf__cover { display: block; }
  /* the studio (camera + copy) now follows the hero directly on mobile —
     stack it so nothing is cramped */
  .studio { padding-top: clamp(56px, 12vw, 90px); }
  .studio__grid { grid-template-columns: 1fr; gap: clamp(20px, 6vw, 40px); }
  .studio__copy { text-align: center; padding-top: 0; max-width: none; }
  .studio__copy h2 { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .jn, .xp { display: none; }
  .jn-static { display: block; }
  .pf__cover { display: block; }
  .jn__cue::after, .jn-static__cue::after { animation: none; }
  .studio__leader { height: auto; }
}