/* ============================================================
   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); }
.stop__seg--lead { padding: 0; min-height: clamp(150px, 19vw, 240px); }
.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(130px, 17vw, 230px);
  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; }
.stop__copy h3 { font-size: clamp(24px, 2.6vw, 34px); max-width: 14ch; }
.stop__copy--l h3 { margin-left: auto; }
.stop__copy p { margin-top: 16px; color: var(--soft); font-size: 16.5px; }
.stop__copy .trad {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--soft);
}
.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: smaller mono so the five communities sit on one line
     and the long trailing phrase takes the second - two rows, not three */
  .stop__copy .trad { font-size: 9.5px; letter-spacing: 0.1em; gap: 6px 14px; }
  .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; }

/* ---------- Act VIII: Instagram grid (og-site style) ---------- */
.sheet { background: #E4EADD; }
.ig-grid { display: grid; grid-template-columns: repeat(6, 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); }
@media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 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; }
}