/* =====================================================================
   Ali Jalali — portfolio  V5
   Heavy, full-weight, architectural. Accent: #9B0000.
   ===================================================================== */

/* ── Self-hosted Roboto (woff2) — no render-blocking Google Fonts ──── */
@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 300;
  font-display: swap; src: url("assets/fonts/roboto-300.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto"; font-style: italic; font-weight: 300;
  font-display: swap; src: url("assets/fonts/roboto-300-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("assets/fonts/roboto-400.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto"; font-style: italic; font-weight: 400;
  font-display: swap; src: url("assets/fonts/roboto-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("assets/fonts/roboto-500.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("assets/fonts/roboto-700.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 900;
  font-display: swap; src: url("assets/fonts/roboto-900.woff2") format("woff2");
}

:root {
  /* ── Palette ─────────────────────────────────────────────────────── */
  --bg:          #0C0C0C;
  --bg-elev:     #161616;
  --ink:         #EDEAE0;
  --ink-dim:     rgba(237, 234, 224, 0.58);
  --ink-faint:   rgba(237, 234, 224, 0.32);
  --hair:        rgba(237, 234, 224, 0.1);
  /* Monochrome accent — the off-white ink itself, so the UI stays tonal */
  --accent:      var(--ink);
  --accent-mid:  var(--ink-dim);
  --accent-glow: rgba(237, 234, 224, 0.12);

  /* ── Type ────────────────────────────────────────────────────────── */
  --font-display: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body:    "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-fa:      "Noto Naskh Arabic", "Roboto", sans-serif;

  /* ── Rhythm ──────────────────────────────────────────────────────── */
  --pad-x:   clamp(1.5rem, 6vw, 8rem);
  --pad-y:   clamp(1.5rem, 5vh, 4rem);
  --measure: 60ch;

  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --t:      0.65s;

  /* ── Type Scale (fluid: clamp(mobile, vw, desktop)) ─────────────── */
  --text-2xs:  clamp(0.62rem,  0.72vw,  0.72rem);
  --text-xs:   clamp(0.7rem,   0.88vw,  0.84rem);
  --text-sm:   clamp(0.86rem,  1.05vw,  1rem);
  --text-base: clamp(1.05rem,  1.3vw,   1.25rem);
  --text-md:   clamp(1.15rem,  2vw,     1.7rem);
  --text-lg:   clamp(1.55rem,  3.1vw,   2.7rem);
  --text-xl:   clamp(2.1rem,   4.2vw,   3.6rem);
  --text-2xl:  clamp(2.5rem,   5.8vw,   4.8rem);
  --text-3xl:  clamp(3rem,     7.2vw,   6.2rem);
  --text-4xl:  clamp(3.4rem,   10.5vw,  9rem);

  /* ── Weights — V5: heavy by default ─────────────────────────────── */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  /* ── Line Heights ────────────────────────────────────────────────── */
  --lh-tight:   1.0;
  --lh-snug:    1.08;
  --lh-normal:  1.28;
  --lh-relaxed: 1.65;
  --lh-loose:   1.82;
  --lh-poetry:  2.2;

  /* ── Letter Spacing ──────────────────────────────────────────────── */
  --ls-tighter: -0.04em;
  --ls-tight:   -0.03em;
  --ls-snug:    -0.018em;
  --ls-normal:   0.01em;
  --ls-wide:     0.1em;
  --ls-wider:    0.18em;
  --ls-widest:   0.24em;
}

/* ─────────────────────────── Reset ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  line-height: 1.65;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overscroll-behavior: none;
}

h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a  { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
::selection { background: var(--accent); color: var(--ink); }

/* =====================================================================
   Frames
   ===================================================================== */
.frame {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: safe center;
  justify-content: center;
  padding: clamp(4.5rem, 9vh, 7rem) var(--pad-x);
  overflow: hidden;
}

.frame-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.align-left { text-align: left; }

/* =====================================================================
   Deck mode (JS on)
   ===================================================================== */
.js, .js body { height: 100%; }
.js body { overflow: hidden; }

.js .deck {
  position: fixed;
  inset: 0;
  z-index: 1;
  perspective: 1600px;
}

.js .frame {
  position: absolute;
  inset: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--t) var(--ease),
    transform var(--t) var(--ease),
    filter var(--t) var(--ease),
    visibility 0s linear var(--t);
}
.js .frame.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
  transition:
    opacity var(--t) var(--ease),
    transform var(--t) var(--ease),
    filter var(--t) var(--ease),
    visibility 0s;
}
.js .frame:focus { outline: none; }

/* Transition flavors */
.js .deck[data-transition="blur"] .frame            { transform: scale(1.04); filter: blur(14px); }
.js .deck[data-transition="blur"] .frame.is-active  { transform: scale(1);    filter: blur(0px); }

.js .deck[data-transition="fade"] .frame            { transform: none; filter: none; }
.js .deck[data-transition="fade"] .frame.is-active  { transform: none; filter: none; }

.js .deck[data-transition="3d"] .frame             { transform: translateZ(-280px) rotateX(7deg); transform-origin: center 78%; }
.js .deck[data-transition="3d"] .frame.is-active   { transform: translateZ(0) rotateX(0deg); }

/* ─────────────────────────── Media ───────────────────────────────── */
.media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: var(--bg);
}
.media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 8, 8, 0.32) 0%,
    rgba(8, 8, 8, 0.1)  32%,
    rgba(8, 8, 8, 0.52) 72%,
    rgba(8, 8, 8, 0.9)  100%
  );
}

.media-img,
.media-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.media-img { opacity: 0; transition: opacity 1.1s var(--ease); }
.media-img.is-loaded { opacity: 1; }
.media-img.is-broken { display: none; }

.media--hero .media-img,
.media--hero .media-video {
  filter: grayscale(100%) contrast(1.12);
  transform: scaleX(-1);
}
.media--hero::after {
  background: rgba(12, 12, 12, 0.52);
}

/* =====================================================================
   Typography  — V5: heavy, architectural
   ===================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
h1 { font-size: var(--text-4xl); letter-spacing: var(--ls-tighter); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); letter-spacing: var(--ls-snug); }
h4 { font-size: var(--text-xl);  letter-spacing: var(--ls-snug); }
h5 { font-size: var(--text-lg);  font-weight: var(--fw-bold); letter-spacing: var(--ls-normal); }
h6 { font-size: var(--text-base); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; }

/* ── Display / impact statements ──────────────────────────────────── */
.statement {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}
.frame--statement .frame-inner { text-align: center; }

/* Uppercase impact frames */
#thesis .statement,
#dastgahs-statement .statement,
#momken-statement .statement,
#story-3 .tb-text,
#story-6 .seq-big { text-transform: uppercase; letter-spacing: var(--ls-wide); }

/* Dastgahs / MOMKEN bold statement */
#dastgahs-statement .statement,
#momken-statement .statement,
#story-6 .seq-big {
  font-weight: var(--fw-black);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  max-width: 20ch;
  margin-inline: auto;
  text-align: center;
}

#story-3 .tb-text {
  font-weight: var(--fw-black);
  font-size: var(--text-xl);
  line-height: var(--lh-normal);
  max-width: 30ch;
  margin: 0 auto;
  text-align: center;
}

/* Thesis — max impact */
#thesis .frame-inner {
  max-width: 70vw;
  margin-inline: auto;
}
#thesis .statement--type {
  font-weight: var(--fw-black);
  font-size: clamp(1.4rem, 3.4vw, 3.8rem);
  line-height: 1.15;
  width: 100%;
  max-width: none;
  text-align: center;
  margin-inline: auto;
  letter-spacing: var(--ls-wide);
}

/* Thesis reveal-from-center */
.thesis-reveal {
  display: inline-block;
  white-space: nowrap;
  clip-path: inset(0 50% 0 50%);
  opacity: 0;
}
.js .frame#thesis.is-active .thesis-reveal {
  animation: thesis-reveal-in 1s var(--ease) forwards;
}
.js .frame#thesis.is-active .thesis-reveal--delay {
  animation-delay: 0.22s;
}
@keyframes thesis-reveal-in {
  to { clip-path: inset(0 0% 0 0%); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .thesis-reveal { clip-path: none !important; opacity: 1 !important; animation: none !important; }
}

/* Thesis — rule-of-thirds grid that draws in behind the text (ease-out) */
.thesis-grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tg-line { position: absolute; background: rgba(237, 234, 224, 0.16); }
.tg-v1, .tg-v2 { top: 0; bottom: 0; width: 1px; }
.tg-h1, .tg-h2 { left: 0; right: 0; height: 1px; }
.tg-v1 { left: 33.333%; }
.tg-v2 { left: 66.666%; }
.tg-h1 { top: 33.333%; }
.tg-h2 { top: 66.666%; }
/* Deck mode: lines start collapsed, then grow in when the frame activates */
.js :is(#thesis, #story-4) .tg-v1, .js :is(#thesis, #story-4) .tg-v2 {
  transform: scaleY(0); transform-origin: top center;
  transition: transform 1.2s var(--ease);
}
.js :is(#thesis, #story-4) .tg-h1, .js :is(#thesis, #story-4) .tg-h2 {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.2s var(--ease);
}
.js :is(#thesis, #story-4).is-active .tg-v1 { transform: scaleY(1); transition-delay: 0.15s; }
.js :is(#thesis, #story-4).is-active .tg-v2 { transform: scaleY(1); transition-delay: 0.28s; }
.js :is(#thesis, #story-4).is-active .tg-h1 { transform: scaleX(1); transition-delay: 0.42s; }
.js :is(#thesis, #story-4).is-active .tg-h2 { transform: scaleX(1); transition-delay: 0.55s; }
@media (prefers-reduced-motion: reduce) {
  .js :is(#thesis, #story-4) .tg-line { transform: none !important; transition: none !important; }
}
@media (max-width: 768px) {
  .js :is(#thesis, #story-4) .tg-line { transform: none !important; transition: none !important; }
}

/* story-4 — golden spiral (Fibonacci) composition that draws in behind the text */
.golden-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.golden-grid svg { width: 100%; height: 100%; }
.gg-rect {
  fill: none; stroke: rgba(237, 234, 224, 0.16); stroke-width: 1.5;
  vector-effect: non-scaling-stroke; opacity: 0;
}
.gg-spiral {
  fill: none; stroke: rgba(237, 234, 224, 0.16); stroke-width: 1.5;
  vector-effect: non-scaling-stroke; stroke-linecap: round;
}
/* Deck mode: draw in when the frame activates */
.js #story-4 .gg-rect { transition: opacity 1s var(--ease); }
.js #story-4 .gg-spiral {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 2s var(--ease);
}
.js #story-4.is-active .gg-rect { opacity: 1; }
.js #story-4.is-active .gg-rect:nth-of-type(1) { transition-delay: 0.05s; }
.js #story-4.is-active .gg-rect:nth-of-type(2) { transition-delay: 0.15s; }
.js #story-4.is-active .gg-rect:nth-of-type(3) { transition-delay: 0.25s; }
.js #story-4.is-active .gg-rect:nth-of-type(4) { transition-delay: 0.35s; }
.js #story-4.is-active .gg-rect:nth-of-type(5) { transition-delay: 0.45s; }
.js #story-4.is-active .gg-rect:nth-of-type(6) { transition-delay: 0.55s; }
.js #story-4.is-active .gg-rect:nth-of-type(7) { transition-delay: 0.65s; }
.js #story-4.is-active .gg-spiral { stroke-dashoffset: 0; transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  .js #story-4 .gg-rect { opacity: 1 !important; transition: none !important; }
  .js #story-4 .gg-spiral { stroke-dashoffset: 0 !important; transition: none !important; }
}
@media (max-width: 768px) {
  .js #story-4 .gg-rect { opacity: 1 !important; transition: none !important; }
  .js #story-4 .gg-spiral { stroke-dashoffset: 0 !important; transition: none !important; }
}

/* Statement scale modifiers */
.statement--sm {
  font-size: var(--text-lg);
  line-height: var(--lh-normal);
  max-width: 30ch;
  font-style: normal;
  font-weight: var(--fw-black);
}
.statement--coda {
  margin-top: 1.4em;
  color: var(--ink-dim);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
}
.statement em { font-style: italic; }

/* ── Project / section headings ─────────────────────────────────── */
.project-title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

/* ── Subtitle ────────────────────────────────────────────────────── */
.subtitle {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--ink-faint);
  font-size: var(--text-xs);
  line-height: var(--lh-loose);
  margin-top: 0.35rem;
}

/* ── Meta label ──────────────────────────────────────────────────── */
.meta {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  font-size: var(--text-xs);
  line-height: var(--lh-loose);
  color: var(--ink-dim);
  margin-top: 1rem;
}

/* ── Body prose ──────────────────────────────────────────────────── */
.body {
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-normal);
  color: var(--ink);
  max-width: var(--measure);
  margin-top: 1.4rem;
}
.split .body { margin-top: 0; }
.body--center { margin-inline: auto; max-width: 48ch; }

/* ── Recognition / award ─────────────────────────────────────────── */
.recognition {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--ink-dim);
  margin-top: 1.5rem;
  max-width: var(--measure);
}
.recognition::before { content: "— "; }

/* ── Credit line ─────────────────────────────────────────────────── */
.credit-line {
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-normal);
  color: var(--ink-faint);
  max-width: 64ch;
  margin-top: 1.6rem;
}
.credit-line--center { margin-inline: auto; text-align: center; margin-top: 2rem; }

.todo { color: var(--ink-faint); font-style: italic; }

/* ── Persian glyphs ──────────────────────────────────────────────── */
.title-fa {
  font-family: var(--font-fa);
  font-weight: var(--fw-regular);
  font-size: 0.42em;
  color: var(--ink-dim);
  margin-left: 0.5em;
  vertical-align: 0.18em;
}
.title-fa-inline { font-family: var(--font-fa); }

.frame--read .read-col { max-width: 66ch; }
.frame--read .body + .body { margin-top: 1.15rem; }

/* =====================================================================
   Split project frames
   ===================================================================== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  grid-template-areas:
    "head   ."
    "meta   ."
    "body   media"
    "credit media";
  column-gap: clamp(1.6rem, 4vw, 4rem);
  row-gap: clamp(0.6rem, 1.6vh, 1.1rem);
  align-items: start;
  max-width: 1200px;
  text-align: left;
}
.split__head   { grid-area: head;   min-width: 0; }
.split__meta   { grid-area: meta;   min-width: 0; margin-top: 0; }
.split__body   { grid-area: body;   min-width: 0; }
.split__media  { grid-area: media;  align-self: start; min-width: 0; width: 100%; }
.split__credit { grid-area: credit; min-width: 0; margin-top: 1.6rem; }
.split__body .body:first-child { margin-top: 0; }

/* Hostages + COMEBACK — pull video up to align with meta text */
#work .split,
#comeback .split {
  grid-template-areas:
    "head   ."
    "meta   media"
    "body   media"
    "credit media";
}

/* Dastgahs — subtitle gets its own row so the video can top-align with it */
#dastgahs .split {
  grid-template-areas:
    "head     ."
    "subtitle media"
    "meta     media"
    "body     media"
    "credit   media";
}
#dastgahs .split__subtitle { grid-area: subtitle; min-width: 0; margin-top: 0; }

/* Mobile: single column, Title → Video → Body → Meta → Credit */
@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "media"
      "body"
      "meta"
      "credit";
    max-width: 640px;
  }
  .split__media  { margin-top: 0.9rem; }
  .split__body   { margin-top: 0.4rem; }
  .split__meta   { margin-top: 0.9rem; }
  .split__credit { margin-top: 0.6rem; }
  /* Work / Comeback mobile: revert the desktop 2-col areas back to single column */
  #work .split,
  #comeback .split {
    grid-template-areas:
      "head"
      "media"
      "body"
      "meta"
      "credit";
  }
  /* Dastgahs mobile: Title → Subtitle → Video → Body → Meta → Credit */
  #dastgahs .split {
    grid-template-areas:
      "head"
      "subtitle"
      "media"
      "body"
      "meta"
      "credit";
  }
  #dastgahs .split__subtitle { margin-top: 0.2rem; }
}
@media (max-width: 768px) {
  #work { padding-block: clamp(2.5rem, 7vh, 4rem); }
  #work .split__credit { display: none; }
  #dastgahs .credit-line { display: none; }
  /* Two-line titles (e.g. "The Dastgahs of / Persian Music") keep their lines
     on one row each (nowrap), so shrink them to fit narrow screens */
  .project-title--twoln { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
}

.project-title--caps { text-transform: uppercase; }
.project-title--twoln span { display: inline; white-space: nowrap; }

/* COMEBACK body layout */
#comeback .split__body {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
#comeback .awards { margin-top: auto; }

/* Awards */
.awards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 1.2vw, 0.9rem);
  margin-top: clamp(1.2rem, 2.6vh, 1.8rem);
  max-width: 380px;
}
.img-holder--logo { aspect-ratio: 1 / 1; }
.img-holder--logo .img-holder__hint { font-size: 0.5rem; }

/* Field Work video grid */
.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.5rem, 1.2vw, 0.9rem);
  max-width: 680px;
}
.video-grid--3col {
  grid-template-columns: repeat(3, 1fr);
  max-width: 900px;
}

/* Video carousel */
.video-carousel { position: relative; }
.carousel-pages-wrap { position: relative; min-height: 387px; }
.carousel-page { display: none; }
.video-carousel[data-page="0"] .carousel-page[data-pg="0"],
.video-carousel[data-page="1"] .carousel-page[data-pg="1"],
.video-carousel[data-page="2"] .carousel-page[data-pg="2"] { display: block; }
.carousel-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
}
@media (max-width: 760px) {
  .carousel-nav { margin-top: 0.75rem; }
}
@media (max-width: 768px) {
  .carousel-nav { display: none; }
}
.carousel-btn {
  background: none;
  border: 1px solid rgba(237, 234, 224, 0.22);
  color: var(--ink);
  height: 2rem;
  padding: 0 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.carousel-btn:hover { border-color: var(--accent); background: var(--accent); color: var(--bg); }
.carousel-btn:disabled { opacity: 0.2; cursor: default; pointer-events: none; }
.carousel-dots { display: flex; gap: 0.4rem; }
.carousel-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(237, 234, 224, 0.22);
  transition: background 0.25s;
  cursor: pointer;
}
.carousel-dot.is-active { background: var(--accent); }

/* MOMKEN split teaser */
.frame--momken-teaser { padding-block: 0; }
.momken-split {
  position: absolute; inset: 0;
  display: flex;
  background: var(--bg); /* solid base so nothing bleeds through during deck transitions */
}
.mks-right { background: var(--bg); } /* dark under the video until its first frame paints */

.mks-left {
  width: 40%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(3rem, 5vw, 5.5rem);
  overflow: hidden;
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1);
  z-index: 2;
  margin-right: -1px; /* close subpixel seam with right panel */
}
.mks-left.is-playing {
  opacity: 0;
  pointer-events: none;
}
.mks-inner {
  min-width: 300px;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
}
/* Zone 1 — identity: logo + role label tight together */
.mks-identity { display: flex; flex-direction: column; gap: 0.8rem; flex-shrink: 0; }
.mks-logo {
  display: block;
  width: clamp(120px, 14vw, 190px);
  height: auto;
  opacity: 0;
  animation: mks-rise 0.9s 0.1s cubic-bezier(0.22,1,0.36,1) forwards;
}
.mks-spacer-a { display: none; }
.mks-meta {
  font-family: var(--font-display);
  font-size: clamp(0.55rem, 0.65vw, 0.66rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  opacity: 0;
  animation: mks-rise 0.9s 0.25s cubic-bezier(0.22,1,0.36,1) forwards;
}
.mks-spacer-b { display: none; }
/* mks-top groups identity + body as one unit; floats to vertical center */
.mks-top {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vh, 4rem);
  margin-top: clamp(6rem, 22vh, 16rem);
  margin-bottom: auto;
}

/* Zone 2 — statement */
.mks-body {
  font-size: clamp(1.15rem, 2vw, 2rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  max-width: 22ch;
  opacity: 0;
  animation: mks-rise 0.9s 0.4s cubic-bezier(0.22,1,0.36,1) forwards;
}
.mks-push { display: none; }
.mks-enter {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(0.6rem, 0.8vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid rgba(237,234,224,0.18);
  padding-bottom: 4px;
  text-decoration: none;
  width: fit-content;
  transition: color 0.3s, border-color 0.3s;
  margin-bottom: auto;
  opacity: 0;
  animation: mks-rise 0.9s 0.65s cubic-bezier(0.22,1,0.36,1) forwards;
}
.mks-enter:hover { color: var(--ink); border-color: rgba(237,234,224,0.55); }

.mks-right {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.mks-right.is-playing {
  position: fixed;
  inset: 0;
  z-index: 50;
  animation: mks-expand 1.1s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes mks-expand {
  from { clip-path: inset(2% 4% 2% 41%); }
  to   { clip-path: inset(0% 0% 0% 0%); }
}
/* Video itself blooms slightly as gate opens */
.mks-right.is-playing .mks-video {
  animation: mks-video-bloom 1.3s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes mks-video-bloom {
  from { transform: translateX(-50%) scale(1.04); }
  to   { transform: translateX(-50%) scale(1); }
}
.mks-video {
  position: absolute;
  width: 177.78vh;
  height: 100%;
  min-width: 100%;
  top: 0; left: 50%;
  transform: translateX(-50%);
  object-fit: cover;
}
.mks-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--bg) 0%, rgba(12,12,12,0.65) 18%, rgba(12,12,12,0.25) 55%, rgba(12,12,12,0.08) 100%);
  z-index: 2;
  pointer-events: none;
  transition: opacity 1s cubic-bezier(0.22,1,0.36,1);
}
.mks-gradient.is-playing { opacity: 0.12; }
.mks-overlay {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1);
  opacity: 0;
  animation: mks-rise 1.1s 0.8s cubic-bezier(0.22,1,0.36,1) forwards;
}
.mks-overlay.is-playing { opacity: 0 !important; pointer-events: none; animation: none; }
.mks-play {
  width: clamp(60px, 5vw, 80px);
  height: clamp(60px, 5vw, 80px);
  border-radius: 50%;
  border: 1.5px solid rgba(237,234,224,0.5);
  background: rgba(12,12,12,0.35);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s, transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.mks-play:hover { border-color: rgba(237,234,224,0.95); background: rgba(237,234,224,0.1); transform: scale(1.1); }
.mks-play svg { width: clamp(20px, 2vw, 28px); height: clamp(20px, 2vw, 28px); fill: var(--ink); margin-left: 4px; }

@keyframes mks-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 768px) {
  .momken-split { position: relative; inset: auto; flex-direction: column; }
  .mks-left { width: 100%; height: auto; padding: clamp(2.2rem, 8vw, 3.2rem); text-align: center; }
  /* desktop centering margins don't apply in the stacked phone layout */
  .mks-top { margin-top: 0; margin-bottom: 0; gap: clamp(1.2rem, 4vh, 2rem); }
  /* no entrance animation on phone — content is simply present */
  .mks-logo, .mks-meta, .mks-body, .mks-overlay { animation: none; opacity: 1; transform: none; }
  .mks-logo { margin-top: 0; margin-left: auto; margin-right: auto; }
  .mks-spacer-a { flex-basis: clamp(1.4rem, 4vh, 2.2rem); }
  .mks-spacer-b { flex-basis: clamp(1.2rem, 3vh, 2rem); }
  .mks-body { font-size: clamp(1.15rem, 5.5vw, 1.6rem); max-width: none; margin-left: auto; margin-right: auto; }
  .mks-push, .mks-enter { display: none; }
  .mks-right { flex: 0 0 56vh; width: 100%; height: 56vh; transition: none; }
  .mks-video { width: 100%; height: 100%; min-width: 0; left: 0; transform: none; object-fit: cover; }
  .mks-meta { white-space: normal; }
  /* phone: play inline — no fullscreen expand, gate wipe, or panel slide */
  .mks-left { transition: none; }
  .mks-left.is-playing { width: 100%; opacity: 1; transform: none; pointer-events: auto; }
  .mks-right.is-playing { position: relative; inset: auto; z-index: auto; animation: none; clip-path: none; }
  .mks-right.is-playing .mks-video { animation: none; transform: none; }
  /* the left-to-right dark gradient is desktop-only; its fade-out reads as a slide on phone */
  .mks-gradient { display: none; }
}

/* =====================================================================
   Video holder — lazy YouTube facade
   ===================================================================== */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-elev);
  border: 1px solid var(--hair);
  overflow: hidden;
  cursor: pointer;
}
.video-embed__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-embed__poster.is-broken { display: none; }
.video-embed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(8, 8, 8, 0.3);
  transition: background 0.3s var(--ease);
}
.video-embed.is-playing { cursor: default; }
.video-embed.is-playing::before { display: none; }

/* Play button — clean centred disc. Hidden by default, revealed on real hover;
   always shown on touch (where there is no hover). */
.video-embed__btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.55);
  border: 1px solid rgba(237, 234, 224, 0.65);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s;
}
/* Hover effects only on devices that truly hover — never on touch taps */
@media (hover: hover) {
  .video-embed:hover::before { background: rgba(8, 8, 8, 0.1); }
  .video-embed:hover .video-embed__btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    background: rgba(10, 10, 10, 0.72);
    border-color: var(--ink);
  }
}
/* Touch: button is always visible in its clean "on" state */
@media (hover: none) {
  .video-embed__btn { opacity: 1; }
}
.video-embed__icon { width: 15px; height: 15px; fill: currentColor; margin-left: 2px; }
.video-embed.is-playing .video-embed__btn { display: none; }
.video-embed.is-empty { cursor: default; }
.video-embed.is-empty .video-embed__btn { opacity: 0.4; }
.video-embed__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }

/* =====================================================================
   Field Work — client tabs
   ===================================================================== */
.frame--fieldwork .frame-inner { max-width: 820px; }
.frame--fieldwork .body { max-width: 60ch; }

.tabs { width: 100%; margin-top: clamp(1.3rem, 3vh, 2rem); }
.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem clamp(1rem, 2.4vw, 1.8rem);
  border-bottom: 1px solid var(--hair);
  padding-bottom: 0.85rem;
  margin-bottom: 1.1rem;
}
.tabs__tab {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  color: var(--ink-dim);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  padding: 0.25rem 0;
  cursor: pointer;
  position: relative;
  transition: color 0.3s var(--ease);
}
.tabs__tab:hover { color: var(--ink); }
.tabs__tab.is-active { color: var(--ink); }
.tabs__tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-0.85rem - 1px);
  height: 2px;
  background: var(--accent);
}
.tabs__panel { display: none; max-width: 720px; min-height: 431px; }
@media (max-width: 760px) {
  .tabs__panel { min-height: 0; }
  .carousel-pages-wrap { min-height: 0; }
  .frame--fieldwork { padding-block: clamp(3rem, 7vh, 4.5rem) clamp(4rem, 9vh, 6rem); }
  .frame--fieldwork .body { font-size: var(--text-sm); margin-top: 0.6rem; }
  .frame--fieldwork .meta { margin-top: 0.4rem; }
  .frame--fieldwork .tabs { margin-top: 0.8rem; }
}

/* Phone: single full-width column of clips, generous spacing + bigger tabs */
@media (max-width: 600px) {
  .video-grid,
  .video-grid--3col {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    max-width: 100%;
  }
  .tabs__panel { max-width: 100%; }
  .tabs__list {
    flex-wrap: nowrap;
    gap: 1.4rem;
    padding-bottom: 0.95rem;
    margin-bottom: 1.4rem;
  }
  .tabs__tab {
    font-size: var(--text-xs);
    padding: 0.45rem 0;
    letter-spacing: var(--ls-wide);
    white-space: nowrap;
  }
  .tabs__tab.is-active::after { bottom: calc(-0.95rem - 1px); }
  /* On phones the play button always shows in its "on" state, centred */
  .frame--fieldwork .video-embed__btn {
    top: 50%; left: 50%;
    bottom: auto; right: auto;
    transform: translate(-50%, -50%);
    width: 52px; height: 52px;
  }
  .frame--fieldwork .video-embed__icon { width: 18px; height: 18px; }
}
.tabs__panel.is-active { display: block; }

.tabs__indicator { display: none; }

/* Field Work: vertical side-nav tabs with a traveling indicator (desktop) */
@media (min-width: 761px) {
  .frame--fieldwork .frame-inner {
    max-width: 100%;
    width: 100%;
    padding-inline: clamp(3rem, 8vw, 9rem);
  }
  .frame--fieldwork .project-title { max-width: 100%; }

  .frame--fieldwork .tabs {
    margin-top: clamp(1.8rem, 4vh, 3rem);
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
  }
  .frame--fieldwork .tabs__list {
    position: relative;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    border-bottom: none;
    border-right: 1px solid var(--hair);
    padding: 0;
    margin: 0;
    width: 100%;
  }
  .frame--fieldwork .tabs__tab {
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-align: left;
    white-space: nowrap;
    padding: 1.05rem 1.2rem 1.05rem 0;
    color: rgba(237, 234, 224, 0.22);
    border-bottom: 1px solid rgba(237, 234, 224, 0.07);
  }
  .frame--fieldwork .tabs__tab:last-of-type { border-bottom: none; }
  .frame--fieldwork .tabs__tab:hover { color: var(--ink-dim); }
  .frame--fieldwork .tabs__tab.is-active { color: var(--ink); }
  .frame--fieldwork .tabs__tab.is-active::after { display: none; }

  .frame--fieldwork .tabs__indicator {
    display: block;
    position: absolute;
    top: 0;
    right: -1px;
    width: 2px;
    height: var(--ind-h, 0px);
    background: var(--accent);
    transform: translateY(var(--ind-y, 0px));
    transition: transform 0.4s var(--ease), height 0.4s var(--ease);
    pointer-events: none;
  }

  /* Lock the panel area to a fixed height so switching tabs never shifts it */
  .frame--fieldwork .tabs__panels { min-width: 0; }
  .frame--fieldwork .tabs__panel { max-width: 100%; min-height: 0; }
  .frame--fieldwork .tabs__panel.is-active { min-height: var(--panels-h, 431px); }
  .frame--fieldwork .video-grid { max-width: 100%; }
}

/* MOMKEN logo */
.project-title--logo { line-height: 0; }
.momken-logo {
  display: block;
  width: auto;
  height: clamp(56px, 9vw, 110px);
  max-width: 100%;
  object-fit: contain;
}

/* BTS image holders */
.frame--origin .frame-inner { max-width: 760px; }
.bts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.6rem, 1.4vw, 1rem);
  margin: clamp(1.6rem, 3.6vh, 2.6rem) auto 0;
  max-width: 620px;
  width: 100%;
}
.img-holder {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--bg-elev);
  border: 1px solid var(--hair);
  overflow: hidden;
}
.img-holder__hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.img-holder__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-holder__img.is-broken { display: none; }

/* =====================================================================
   Hero (Frame 01)
   ===================================================================== */
.frame--hero { align-items: flex-end; justify-content: flex-start; }

/* Flip the media so face sits on the right */
.media--hero .media-img,
.media--hero .media-video { object-position: left center; }

/* Hero content block — statement + name, left half, slightly below center */
.hero-content {
  position: absolute;
  left: var(--pad-x);
  top: 55%;
  transform: translateY(-50%);
  width: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 3vh, 2.4rem);
}
.hero-statement-text {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.8rem, 3.8vw, 4.2rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink);
  -webkit-text-stroke: 1.5px var(--ink);
}

/* Lower third — sits below the statement */
.hero-lower-third {
  display: flex;
  align-items: stretch;
  gap: 0.9rem;
}
.hlt-bar {
  width: 2px;
  background: var(--ink);
  flex-shrink: 0;
  opacity: 0.7;
}
.hlt-text { display: flex; flex-direction: column; justify-content: center; gap: 0.3rem; }
.hlt-name {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1rem, 1.4vw, 1.5rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}
.hlt-role {
  font-size: clamp(0.6rem, 0.85vw, 0.78rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(237, 234, 224, 0.55);
  line-height: 1;
}

/* Mobile */
@media (max-width: 768px) {
  .hero-content {
    width: calc(100% - 2 * var(--pad-x));
    top: auto;
    bottom: clamp(4rem, 10vh, 6rem);
    transform: none;
    gap: clamp(1rem, 2.5vh, 1.6rem);
  }
  .hero-statement-text { font-size: clamp(1.5rem, 6.5vw, 2.4rem); line-height: 1.24; letter-spacing: 0.045em; }
  .hlt-name { font-size: clamp(0.9rem, 3.5vw, 1.1rem); }
  .hlt-role { font-size: clamp(0.55rem, 2.2vw, 0.7rem); }
}

/* =====================================================================
   Links
   ===================================================================== */
.enter-link {
  display: inline-block;
  margin-top: 2rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  font-size: var(--text-sm);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--hair);
  transition: border-color 0.35s, color 0.35s, letter-spacing 0.35s;
}
.enter-link span { display: inline-block; transition: transform 0.35s var(--ease); }
.enter-link:hover { border-color: var(--accent); color: var(--ink); }
.enter-link:hover span { transform: translateY(3px); }

/* =====================================================================
   Logos
   ===================================================================== */
.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.1rem, 3vw, 2.6rem);
  margin-top: 2.2rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--hair);
}
.logos li {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(0.95rem, 1.6vw, 1.3rem);
  color: var(--ink-dim);
  letter-spacing: 0.02em;
  transition: color 0.3s;
}
.logos li:hover { color: var(--ink); }

/* =====================================================================
   Episode gallery
   ===================================================================== */
.frame--gallery .frame-inner { max-width: 1200px; }
.gallery-head { margin-bottom: clamp(1.5rem, 4vh, 2.6rem); }
.gallery-title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}
.gallery-head .meta { margin-top: 0.9rem; }

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
}
.grid-link { display: block; }
.grid-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-elev);
}

/* Play icon on episode thumbnails — same clean disc as the video buttons */
.grid-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(12, 12, 12, 0.55);
  border: 1px solid rgba(237, 234, 224, 0.65);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s;
}
.grid-play svg { width: 15px; height: 15px; fill: var(--ink); margin-left: 2px; }

@media (hover: hover) {
  .grid-link:hover .grid-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    background: rgba(12, 12, 12, 0.72);
    border-color: var(--ink);
  }
  .grid-link:hover .grid-img { opacity: 1; }
}
@media (hover: none) {
  .grid-play { opacity: 1; }
}

.grid-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s var(--ease);
}
.grid-img.is-loaded { opacity: 0.88; }
.grid-img.is-broken { display: none; }

.grid-caption {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 0.7rem;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  color: var(--ink-dim);
  transition: color 0.3s;
}
.grid-link:hover .grid-caption { color: var(--ink); }
.grid-num {
  font-variant-numeric: tabular-nums;
  font-size: 0.75em;
  font-weight: var(--fw-bold);
  color: var(--accent);
  letter-spacing: var(--ls-wide);
}

/* =====================================================================
   Contact
   ===================================================================== */
.frame--contact .frame-inner { text-align: center; }
.contact-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.8rem);
  margin-top: 2.6rem;
}
.contact-links a {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--hair);
  transition: border-color 0.35s, color 0.35s;
}
.contact-links a:hover { border-color: var(--accent); color: var(--ink); }

.clients-marquee {
  margin-top: clamp(3rem, 6vh, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
}
.clients-label {
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.clients-wrap {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 8%, black 22%, black 78%, rgba(0,0,0,0.6) 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 8%, black 22%, black 78%, rgba(0,0,0,0.6) 92%, transparent 100%);
}
.clients-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: clients-scroll 36s linear infinite;
}
.clients-wrap:hover .clients-track { animation-play-state: paused; }
@keyframes clients-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.clients-item {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
  padding: 0 2rem;
}
.clients-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--hair);
  flex-shrink: 0;
  vertical-align: middle;
}

/* =====================================================================
   Fixed UI — wordmark, socials, dot-nav
   ===================================================================== */
/* =====================================================================
   Preloader
   ===================================================================== */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.7s ease;
}
#preloader.is-done { opacity: 0; pointer-events: none; }
.preloader-text {
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(0.7rem, 1.4vw, 0.95rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

/* =====================================================================
   Fixed UI — wordmark, socials, dot-nav
   ===================================================================== */
.wordmark {
  position: fixed;
  top: clamp(1.1rem, 3vh, 2rem);
  left: var(--pad-x);
  z-index: 50;
  display: block;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  pointer-events: none;
}
.wordmark img {
  display: block;
  height: clamp(11px, 1.5vh, 14px);
  width: auto;
}
.wordmark.is-shown { opacity: 1; transform: none; pointer-events: auto; }

.socials {
  position: fixed;
  left: var(--pad-x);
  bottom: clamp(1.3rem, 4vh, 2.2rem);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.15rem;
}
.socials a {
  display: block;
  opacity: 0.45;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.socials a:hover { opacity: 1; transform: translateY(-2px); }
.socials img {
  display: block;
  width: 17px;
  height: 17px;
  filter: brightness(0) invert(1);
}

/* Section dot-nav */
.dotnav {
  position: fixed;
  top: 50%;
  right: clamp(1.3rem, 2.6vw, 2.4rem);
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.95rem;
  color: var(--ink);
  --gap: 26px;
}

.snav-label {
  writing-mode: vertical-rl;
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  white-space: nowrap;
  text-shadow: 0 0 16px rgba(0, 0, 0, 0.95);
}

.snav-rail {
  position: relative;
  width: 16px;
  height: calc(var(--gap) * 5);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 13px, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 13px, #000 82%, transparent 100%);
}

.snav-track {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--gap) - 6px);
  transform: translate(-50%, calc(16px - var(--active, 0) * var(--gap)));
  transition: transform 0.55s var(--ease);
}

.snav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.28;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), background 0.4s var(--ease);
}
.snav-dot:hover { opacity: 0.6; }
.snav-dot.is-active {
  opacity: 1;
  transform: scale(2.2);
  background: var(--accent);
  color: var(--accent);
}

/* =====================================================================
   Entrance reveals — V5: big, dramatic, staggered
   ===================================================================== */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.js .frame.is-active [data-reveal] {
  opacity: 1;
  transform: none;
  transition-delay: 0.15s;
}
.js .frame.is-active [data-reveal]:nth-child(2) { transition-delay: 0.25s; }
.js .frame.is-active [data-reveal]:nth-child(3) { transition-delay: 0.35s; }
.js .frame.is-active [data-reveal]:nth-child(4) { transition-delay: 0.45s; }
.js .frame.is-active [data-reveal]:nth-child(5) { transition-delay: 0.55s; }
.js .frame.is-active [data-reveal]:nth-child(6) { transition-delay: 0.65s; }

/* =====================================================================
   Burger menu + full-screen mobile nav (hidden on desktop)
   ===================================================================== */
.nav-burger { display: none; }
.mobilenav { display: none; }

/* =====================================================================
   Responsive — mobile drops into natural vertical scroll
   ===================================================================== */
@media (max-width: 768px) {
  /* Break out of the fixed full-screen deck into a normal scrolling page */
  html.js, html.js body { height: auto; overflow: visible; }
  .js .deck { position: static; inset: auto; perspective: none; }
  .js .frame {
    position: relative;
    inset: auto;
    min-height: auto;            /* size to content — no more full-screen gaps */
    overflow: visible;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  /* JS marks off-screen frames inert in deck mode — neutralise that here */
  .js .frame[inert] { opacity: 1 !important; visibility: visible !important; }
  /* Entrance reveals: drive by scroll (in-view) instead of frame activation */
  .js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  .js [data-reveal].in-view { opacity: 1; transform: none; }

  /* Consistent vertical rhythm between stacked sections */
  .frame { padding-block: clamp(3.5rem, 9vh, 5rem); }

  /* Sections that should still command the full screen */
  .js .frame--hero { min-height: 100svh; padding-block: 0 clamp(3rem, 8svh, 5rem); align-items: flex-end; }
  /* Statements size to content but get extra breathing room top & bottom */
  .js .frame--statement { min-height: auto; padding-block: clamp(4.5rem, 13vh, 7.5rem); }
  /* Background-image statements need height for the photo to read */
  .js .frame--bg-img,
  .js .frame--finale-bg { min-height: 78svh; }

  .media-img, .media-video { object-position: 25% center; }
  /* Hero is mirrored (scaleX(-1)); on portrait phones shift the crop so the
     face stays in frame instead of the back of the head */
  .media--hero .media-img,
  .media--hero .media-video { object-position: 18% center; }

  .dotnav { display: none; }
  /* Fixed corner socials are redundant on phones — they live in the menu now */
  .socials { display: none; }

  .grid { grid-template-columns: repeat(2, 1fr); }
  .recognition { padding-left: 0.8rem; }

  /* Burger button — fixed top-right, no chrome, just the lines */
  .nav-burger {
    display: flex;
    position: fixed;
    top: 1.1rem;
    right: 1.1rem;
    z-index: 60;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    width: 44px;
    height: 44px;
    padding: 0 9px;
    background: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
  }
  .nav-burger__bar {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--ink);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
    transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
  }
  /* Two lines → X */
  .nav-burger.is-open .nav-burger__bar:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
  .nav-burger.is-open .nav-burger__bar:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

  /* Full-screen nav overlay */
  .mobilenav {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: var(--bg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
  }
  .mobilenav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.4s var(--ease), visibility 0s;
  }
  .mobilenav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: clamp(1.1rem, 3.5vh, 2rem);
  }
  .mobilenav__list a {
    display: inline-block;
    font-family: inherit;
    font-size: clamp(2rem, 9vw, 3rem);
    font-weight: var(--fw-bold);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    opacity: 0.45;
    transition: opacity 0.3s var(--ease), letter-spacing 0.3s var(--ease);
  }
  .mobilenav__list a:hover,
  .mobilenav__list a:active,
  .mobilenav__list a.is-current { opacity: 1; letter-spacing: 0.06em; }

  /* Social icons — centred along the bottom of the overlay */
  .mobilenav__socials {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(2.2rem, 7vh, 3.4rem);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.8rem;
  }
  .mobilenav__socials a {
    display: inline-flex;
    opacity: 0.65;
    transition: opacity 0.25s var(--ease);
  }
  .mobilenav__socials a:hover { opacity: 1; }
  .mobilenav__socials img {
    width: 24px;
    height: 24px;
    display: block;
    /* icons ship dark — force them to the off-white ink on the dark overlay */
    filter: brightness(0) invert(1);
  }

  /* Lock body scroll while the overlay is open */
  html.nav-open, html.nav-open body { overflow: hidden; }

  /* About: it's a scroll-driven internal scroller on desktop — flatten it here */
  .frame--about { padding: clamp(4.5rem, 11vh, 7rem) var(--pad-x); }
  .about-scroller { display: none; }
  .about-stage { position: relative; top: auto; height: auto; min-height: 0; overflow: visible; padding: 0; }
  .about-imgs { display: none; }
  .about-text { max-width: 100%; }
  .about-text .w { opacity: 1 !important; }

}

@media (max-width: 420px) {
  .grid { grid-template-columns: 1fr; }
}

@media (max-height: 620px) {
  .frame { min-height: auto; padding-block: 5.5rem; }
}

/* =====================================================================
   Reduced motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .media-img { transition: none; }
  .js .frame { transition: visibility 0s !important; }
  .js .deck .frame,
  .js .deck .frame.is-active { transform: none !important; filter: none !important; }
}

/* =====================================================================
   Per-frame zoom entrance (Dastgahs statement)
   ===================================================================== */
.js .deck[data-transition] .frame--zoom            { transform: scale(0.78); filter: blur(6px); }
.js .deck[data-transition] .frame--zoom.is-active  { transform: scale(1);    filter: blur(0); }

/* =====================================================================
   MOMKEN origin
   ===================================================================== */
.frame--origin { display: flex; align-items: center; justify-content: center; padding-block: clamp(2.5rem, 4vh, 5rem); }
.frame--origin .frame-inner {
  max-width: 780px;
  width: 100%;
  padding-inline: clamp(1.5rem, 5vw, 3rem);
}

.origin-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  text-align: center;
}

.origin-header {
  text-align: center;
  margin-bottom: clamp(1rem, 2.5vh, 2rem);
}
.statement--oneline {
  font-size: var(--text-xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  white-space: normal;
  max-width: none;
  text-align: center;
}
.origin-header .body {
  margin-top: 0.8rem;
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--ink-dim);
  max-width: 42ch;
  margin-inline: auto;
}

.origin-poem {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  box-shadow: none;
  padding: clamp(0.8rem, 2vh, 1.8rem) 0;
  width: 100%;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.hafez {
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: "Noto Naskh Arabic", "Vazirmatn", serif;
  font-weight: 400;
  color: var(--ink-dim);
  width: 100%;
}
.hafez-line {
  font-size: clamp(1.05rem, 2vw, 1.65rem);
  line-height: 1.85;
  margin: 0;
}
.hafez-line--key {
  color: var(--ink);
  font-weight: var(--fw-bold);
  font-size: clamp(1.2rem, 2.5vw, 1.9rem);
}
.hafez-dots {
  font-size: 1rem;
  letter-spacing: 0.4em;
  color: var(--ink-faint);
  margin: 0.5em 0;
  line-height: 1;
}

.origin-translation {
  margin-top: clamp(0.8rem, 1.8vh, 1.5rem);
  background: none;
  box-shadow: none;
  padding: 0;
  width: 100%;
}
.hafez-en { margin: 0; padding: 0; text-align: center; }
.hafez-en-line {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-style: italic;
  font-size: var(--text-xs);
  line-height: var(--lh-loose);
  color: var(--ink-faint);
  margin: 0;
}
.hafez-en-line--key {
  color: var(--ink-dim);
  font-weight: var(--fw-regular);
  font-style: normal;
  font-size: var(--text-sm);
}
.hafez-en-dots {
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  color: var(--ink-faint);
  margin: 0.3em 0;
  line-height: 1;
}

@media (max-width: 760px) {
  .statement--oneline { font-size: var(--text-lg); }
  .hafez-line { font-size: clamp(1rem, 4vw, 1.4rem); }
  .hafez-line--key { font-size: clamp(1.1rem, 5vw, 1.6rem); }
}

/* ── MOMKEN origin — depth-scroll (title recedes, poem lines fly toward camera) ── */
.frame--origin { padding: 0; }
.origin-depth { position: absolute; inset: 0; overflow: hidden; }
.od-center {
  position: absolute; left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  width: min(90vw, 780px); text-align: center;
  z-index: 5; will-change: transform, filter, opacity;
  transition: transform 0.6s var(--ease), filter 0.6s var(--ease), opacity 0.6s var(--ease);
}
.od-intro {
  margin-top: 1.1rem; max-width: 46ch; margin-inline: auto;
}
.od-intro .oc { opacity: 0.16; transition: opacity 0.25s var(--ease); }
.od-poem { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.od-line {
  position: absolute; transform: translate(-50%, -50%);
  width: min(86vw, 720px); text-align: center;
  will-change: transform, filter, opacity;
  transition: transform 0.6s var(--ease), filter 0.6s var(--ease), opacity 0.6s var(--ease);
}
.od-fa {
  font-family: var(--font-fa); direction: rtl;
  font-size: clamp(1.4rem, 3vw, 2.4rem); line-height: 1.7; color: var(--ink);
  margin: 0;
}
.od-en {
  margin: 0.5rem 0 0; font-family: var(--font-body);
  font-weight: var(--fw-light); font-style: italic;
  font-size: clamp(0.8rem, 1.2vw, 1rem); line-height: 1.5; color: var(--ink-faint);
}
.od-line--key .od-fa { font-weight: var(--fw-bold); }
.od-line .hl { color: var(--ink); font-weight: var(--fw-bold); font-style: normal; }

/* Mobile: the depth scroll has no deck driver — fall back to a clean static stack
   (title, intro, then each Hafez line with its translation). */
@media (max-width: 768px) {
  .frame--origin { display: flex; align-items: center; justify-content: center; }
  .origin-depth {
    position: static; inset: auto; overflow: visible;
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(1.4rem, 4vh, 2.2rem); width: 100%;
  }
  .od-center {
    position: static; transform: none; filter: none; opacity: 1;
    width: 100%;
  }
  .od-intro .oc { opacity: 1; }
  .od-poem {
    position: static; inset: auto; pointer-events: auto;
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(1.2rem, 3.5vh, 1.8rem); width: 100%;
  }
  .od-line {
    position: static; transform: none; filter: none; opacity: 1;
    left: auto !important; top: auto !important; width: 90vw;
  }
  .od-fa { font-size: clamp(1.15rem, 5vw, 1.7rem); }
}

/* =====================================================================
   Scroll-revealed frames — tall, internally scrolled
   ===================================================================== */
.js .frame--scroll {
  display: block;
  padding: 0;
  align-items: initial;
  justify-content: initial;
  will-change: auto;
}
.js .deck[data-transition] .frame--scroll,
.js .deck[data-transition] .frame--scroll.is-active {
  transform: none !important;
  filter: none !important;
}
.js [data-step] {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
.js [data-step].in-view { opacity: 1; transform: none; }

/* MOMKEN story sequence */
.frame--seq .seq-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(1.2rem, 3.2vh, 2.2rem);
  max-width: 900px;
  width: 100%;
}

.js .frame--seq-split,
.js .frame--top-bottom,
.js .frame--souls { overflow: hidden; }

/* Split step — text + image */
.frame--seq-split {
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.seq-split-text {
  flex: 0 0 44%;
  display: flex;
  align-items: center;
  padding: clamp(2rem, 5vh, 4rem) var(--pad-x);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  text-transform: uppercase;
}
.seq-split-img {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.seq-split-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Top text + bottom image */
.frame--top-bottom {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tb-text {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.4rem, 3vh, 2.4rem) var(--pad-x);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-xl);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-tight);
  text-align: center;
  max-width: none;
  color: var(--ink);
}
.tb-img {
  flex: 0 0 50%;
  min-height: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.tb-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
#story-5a .tb-img img { object-position: left top; }
#momken-story .seq-split-img img { object-position: center center; }
.souls-col[data-soul="3"] img { object-position: center center; }
.souls-col[data-soul="0"] img { object-position: center 20%; }
.souls-col[data-soul="4"] img { object-position: center 20%; }

.tb-text--big {
  font-size: clamp(1.4rem, 2.8vw, 2.4rem);
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
  text-align: center;
  width: 100%;
  max-width: none;
}
.tb-text--big span { white-space: nowrap; text-align: center; }

/* story-3 — ghost BORN + sentence */
.story3-text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.story3-ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(5rem, 16vw, 14rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.06);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.story3-body {
  position: relative;
  z-index: 1;
  font-size: clamp(1.6rem, 3.2vw, 3rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
}
#story-3 .teaser-video { margin-top: clamp(2.5rem, 7vh, 5rem); }

.frame--seq-split-rev { flex-direction: row; }

@media (max-width: 760px) {
  .frame--seq-split { flex-direction: column; }
  .frame--seq-split-rev { flex-direction: column-reverse; }
  .seq-split-text { flex: 0 0 50%; font-size: clamp(1.6rem, 6vw, 2.4rem); display: flex; align-items: center; justify-content: center; text-align: center; }
  .seq-split-img { flex: 0 0 50%; width: 100%; min-height: 0; position: relative; }
}

/* MOMKEN story — offset diptych */
.frame--offset-story { display: block; padding: 0; }
.os-img { position: absolute; overflow: hidden; }
.os-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.os-img--a { top: 8%; right: 6%; width: 42vw; height: 54vh; z-index: 1; }
.os-img--b { bottom: 8%; left: 6%; width: 38vw; height: 50vh; z-index: 2; }
.os-cap { position: absolute; z-index: 3; font-weight: 700; line-height: 1.4;
  font-size: clamp(2rem, 4.2vw, 3.75rem); text-align: left;
  text-transform: uppercase; letter-spacing: 0.01em; }
.os-lc { text-transform: lowercase; font-style: italic; font-weight: 400; }
/* caption A starts at image B's left edge; caption B starts at image A's left edge */
.os-cap--a { top: 12%; left: 6%; max-width: 34ch; }
.os-cap--b { bottom: 14%; left: calc(94% - 42vw); max-width: 22ch; }

/* Sync sweep: images clip-reveal with a slow zoom, captions rise in sync */
.js #momken-story .os-img img { transform: scale(1.12); transition: transform 1.6s var(--ease); }
.js #momken-story.is-active .os-img img { transform: scale(1); }
.js #momken-story .os-img--a { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease); }
.js #momken-story .os-img--b { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease) 0.25s; }
.js #momken-story.is-active .os-img--a,
.js #momken-story.is-active .os-img--b { clip-path: inset(0 0 0 0); }
.js #momken-story .os-cap { opacity: 0; transform: translateY(40px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js #momken-story.is-active .os-cap--a { opacity: 1; transform: none; transition-delay: 0.45s; }
.js #momken-story.is-active .os-cap--b { opacity: 1; transform: none; transition-delay: 0.7s; }

@media (max-width: 760px) {
  .frame--offset-story { display: flex; flex-direction: column; }
  .os-img { position: relative; width: 100%; height: auto; inset: auto;
    box-shadow: none; }
  .os-img--a, .os-img--b { width: 100%; height: 38vh; }
  .os-img img { height: 100%; }
  .os-cap { position: relative; inset: auto; max-width: none; text-align: center;
    font-size: clamp(1.5rem, 5.5vw, 2.2rem); padding: 1.2rem 6vw; }
  .os-cap--a, .os-cap--b { text-align: center; }
}

.seq-text {
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-snug);
  max-width: 26ch;
  color: var(--ink);
}
.seq-big {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  max-width: 18ch;
  margin: 0 auto;
  text-align: center;
}
.seq-big--two { max-width: none; width: 100%; }
.seq-big--two span { white-space: nowrap; }

.seq-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
}
.seq-sub {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--accent);
  margin-top: 0.6rem;
}

/* Full-bleed background image pattern */
.frame--bg-img { position: relative; }
.frame-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  will-change: transform;
  transform-origin: center center;
}
.frame-bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 1;
}
.frame--bg-img .frame-inner { position: relative; z-index: 3; }

/* Cinematic slow zoom on background image when frame activates */
@keyframes bg-slow-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
.js #dastgahs-statement.is-active .frame-bg-img {
  animation: bg-slow-zoom 14s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Cinematic grain overlay */
@keyframes grain-drift {
  0%         { background-position:   0%   0%; }
  10%        { background-position: -5%  -10%; }
  20%        { background-position: -15%   5%; }
  30%        { background-position:  7%  -25%; }
  40%        { background-position:  20%  10%; }
  50%        { background-position:  -5%  15%; }
  60%        { background-position:  15%   0%; }
  70%        { background-position:   0%  10%; }
  80%        { background-position:   3%  35%; }
  90%,100%   { background-position: -10%  10%; }
}
#dastgahs-statement::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  animation: grain-drift 0.5s steps(1) infinite;
}
/* Text and nav sit above grain */
#dastgahs-statement .frame-next { z-index: 4; }

/* Lock text to center — survives cascade resets */
#dastgahs-statement .frame-inner { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .js #dastgahs-statement.is-active .frame-bg-img { animation: none; }
  #dastgahs-statement::after { animation: none; }
}

/* story-finale */
.frame--finale-bg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Clip the zooming image so it can't create a scrollbar (overrides .js .frame's overflow-y:auto) */
.js .frame--finale-bg { overflow: hidden; }
.finale-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transform-origin: center;
  will-change: transform;
}
/* Slow Ken Burns zoom while this frame is on screen */
.frame--finale-bg.is-active .finale-bg-img {
  animation: finale-zoom 20s ease-out forwards;
}
@keyframes finale-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.16); }
}
@media (prefers-reduced-motion: reduce) {
  .frame--finale-bg.is-active .finale-bg-img { animation: none; }
}
.finale-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}
.frame--finale-bg .frame-inner { position: relative; z-index: 2; }

.seq-finale {
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-snug);
  max-width: 28ch;
  margin: 0 auto;
  text-align: center;
}
.img-holder--portrait {
  aspect-ratio: 2 / 3;
  width: min(52vw, 360px);
  max-height: 64vh;
}
.seq-media { width: min(88vw, 720px); }

/* =====================================================================
   Soul strip
   ===================================================================== */
.frame--souls { padding: 0; }
.souls-cols {
  display: flex;
  width: 100%;
  height: 100%;
}
@media (max-width: 760px) {
  .souls-cols { flex-direction: column; }
  .souls-col { transform: translateY(40px); }
  .souls-col.is-shown { transform: none; }
}
.souls-col {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  overflow: hidden;
}
.souls-col.is-shown { opacity: 1; transform: none; }
.souls-col img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.souls-col::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 12, 0.42);
  z-index: 1;
}
.souls-word {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  font-size: var(--text-md);
  letter-spacing: var(--ls-wide);
  color: var(--ink);
  text-align: center;
  padding: 0 0.5rem;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.75);
}

/* Center reveal (ITS EFFORT) → finale.
   The center column's own image is hidden on desktop; the reveal layer below
   provides its visual so un-clipping is a seamless center reveal. */
.souls-col--center img,
.souls-col--center .souls-word { display: none; }
.souls-reveal {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0;
  clip-path: inset(0 40% 0 40%);     /* show only the center column's band */
  transition: opacity 0.9s var(--ease),
              clip-path 1.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  will-change: clip-path, opacity;
}
.souls-reveal.is-shown { opacity: 1; }
.souls-reveal.is-open  { clip-path: inset(0 0 0 0); }
.souls-reveal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.souls-reveal::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(12, 12, 12, 0.42);
  transition: background 1s var(--ease);
}
.souls-reveal.is-open::after { background: rgba(0, 0, 0, 0.5); }
.souls-reveal-word {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  font-size: var(--text-md);
  letter-spacing: var(--ls-wide);
  color: var(--ink);
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.75);
  transition: opacity 0.5s var(--ease);
}
.souls-reveal.is-open .souls-reveal-word { opacity: 0; }

.souls-finale-text {
  position: absolute; inset: 0;
  z-index: 6;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(2rem, 8vw, 8rem);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.souls-finale-text.is-shown { opacity: 1; }
/* Three-phase finale: "MOMKEN seeks/creates" stays, the tail crossfades */
.finale-seq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  width: min(90vw, 26ch);   /* definite width so the top line and tails both center on screen */
  text-align: center;
  font-weight: var(--fw-bold);
  font-size: clamp(2rem, 4.8vw, 4rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.75);
  color: var(--ink);
  transition: transform 0.6s var(--ease);
}
/* Final phase: the top line has faded, lift the lone phrase to true vertical center */
.finale-seq.is-final { transform: translateY(-0.82em); }
.fs-top {
  display: inline-flex; align-items: baseline; white-space: nowrap;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.fs-top.is-faded { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.fs-momken { font-weight: var(--fw-black); margin-right: 0.3em; }
.fs-verb { position: relative; display: inline-block; font-weight: var(--fw-bold); }
.fs-verb .fs-w { position: absolute; left: 0; top: 0; white-space: nowrap; }
.fs-verb .fs-w.is-on { position: relative; }   /* active verb flows, sizing the slot so the line centers on its real text */
.fs-tails { position: relative; width: 100%; min-height: 2.7em; }
.fs-tail { position: absolute; left: 0; right: 0; top: 0; text-align: center; white-space: nowrap; }
.fs-tail[data-t="2"] { white-space: normal; }
.fs-w {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.fs-w.is-on { opacity: 1; transform: none; }

/* Mobile: souls stack vertically (no step interaction). Show the center image
   inline as one of the five, then a full-screen ITS EFFORT block with the text. */
/* Mobile: keep the desktop overlay layout (row of columns + center reveal) and
   auto-play the sequence when scrolled into view. */
@media (max-width: 768px) {
  .js .frame--souls { min-height: 100svh; height: 100svh; }
  .souls-cols { flex-direction: row; height: 100svh; }
}

/* =====================================================================
   The Filmmaker — scroll-fill manifesto + drifting vertical photos
   The frame scrolls internally; the deck advances at the top/bottom edge.
   ===================================================================== */
.frame--about { padding: 0; }
.js .frame--about { overflow: hidden auto; }
.about-stage {
  position: sticky;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--pad-y) var(--pad-x);
}
.about-scroller { height: 280%; }     /* gives the frame its internal scroll length */

/* Drifting photo layer removed — keep the manifesto clean, text-fill only.
   The .about-scroller still provides the internal scroll length for the text. */
.about-imgs { display: none; }
.about-img {
  position: absolute;
  top: 0;
  object-fit: cover;
  opacity: 0;
  filter: grayscale(1) contrast(1.02) brightness(1.12);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  will-change: opacity, transform;
}
.about-text {
  position: relative;
  z-index: 2;
  max-width: 80vw;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.7rem, 3.6vw, 3.1rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  text-align: center;
}
.about-text .w { color: var(--ink); opacity: 0.16; transition: opacity 0.12s linear; }
@media (prefers-reduced-motion: reduce) {
  .about-text .w { opacity: 1; }
  .about-img { transition: none; }
}

/* =====================================================================
   Two-line statement
   ===================================================================== */
.statement--two {
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  font-weight: var(--fw-black);
  line-height: 1.2;
  max-width: none;
  text-align: center;
  margin-inline: auto;
  letter-spacing: var(--ls-tight);
}
.statement--two span { white-space: nowrap; }

#dastgahs-statement .statement--two br,
#momken-statement   .statement--two br,
#story-3 .tb-text br,
#story-5a .tb-text br, #story-5b .tb-text br, #story-5c .tb-text br, #story-5d .tb-text br,
#story-6 .seq-big br { display: none; }

/* =====================================================================
   story-5 — stepped sequence: text + bottom image that slides to reveal the
   next, then the last image expands to fullscreen for the soul line.
   ===================================================================== */
.frame--s5seq { padding: 0; overflow: hidden; }
.s5-stage { position: absolute; inset: 0; }
.s5-step { position: absolute; inset: 0; }
/* Step stacking: lower index sits on top, so sliding its image down reveals the next */
.s5-step[data-i="0"] { z-index: 14; }
.s5-step[data-i="1"] { z-index: 13; }
.s5-step[data-i="2"] { z-index: 12; }
.s5-step[data-i="3"] { z-index: 11; }

.s5-step-text {
  position: absolute; left: 0; right: 0; top: 0; height: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 3; opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}
.s5-step-text.is-shown { opacity: 1; }
.s5-step-text .s5-ghost {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: clamp(5rem, 16vw, 14rem); font-weight: 900; line-height: 1;
  letter-spacing: -0.04em; text-transform: uppercase;
  color: rgba(237, 234, 224, 0.07); white-space: nowrap; pointer-events: none; user-select: none;
}
.s5-step-text .s5-body {
  position: relative; z-index: 1; max-width: 38ch; text-align: center;
  font-weight: 700; font-size: clamp(1.5rem, 2.8vw, 2.6rem);
  line-height: 1.3; letter-spacing: 0.01em; color: var(--ink);
  text-transform: uppercase;
  text-wrap: balance;
}

.s5-step-img {
  position: absolute; left: 0; right: 0; top: 50%; bottom: 0;
  overflow: hidden; z-index: 1;
  transition: top 1.5s var(--ease);
}
.s5-step-img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.5s var(--ease);
}
.s5-step-img.is-past img { transform: translateY(120%); }
.s5-step-img::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.5));
  transition: opacity 0.6s var(--ease);
}
.s5-step-img.is-past::after { opacity: 0; }
/* Final beat: the last image (waheed) rises up from the bottom half to fill the
   whole frame, then the soul line fades in over it — no duplicate image. */
.s5-stage.is-expanded .s5-step[data-i="3"] .s5-step-img { top: 0; }
.s5-soul {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(2rem, 6vw, 6rem); text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
.s5-soul::before {
  content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5);
  opacity: 0; transition: opacity 0.9s var(--ease);
}
.s5-stage.is-expanded .s5-soul { opacity: 1; }
.s5-stage.is-expanded .s5-soul::before { opacity: 1; }
.s5-soul .seq-big {
  position: relative; z-index: 1;
  font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 3rem); line-height: 1.35;
  letter-spacing: 0.01em; text-transform: uppercase;
  opacity: 0; transition: opacity 0.9s var(--ease) 0.5s;
}
.s5-stage.is-expanded .s5-soul .seq-big { opacity: 1; }
.s5-soul .s6-light { display: block; font-weight: 700; }
.s5-soul .s6-bold { font-weight: var(--fw-black); }

/* Mobile: deck is off, so the stepped sequence auto-plays when scrolled into view.
   Same absolute layout as desktop, pinned to one viewport. */
@media (max-width: 768px) {
  .js .frame--s5seq { min-height: 100svh; overflow: hidden; }
  .s5-step-text .s5-ghost { font-size: clamp(3.5rem, 22vw, 8rem); }
}

/* story-5 — ghost word + sentence */
.story-5-text {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: none;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: clamp(1rem, 3vh, 2rem) var(--pad-x);
}
.s5-ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(5rem, 16vw, 14rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.06);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.s5-body {
  position: relative;
  z-index: 1;
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-align: center;
  max-width: 30ch;
  color: var(--ink);
}

/* Unified narrative frame style */
#momken-statement   .statement--two,
#story-3 .tb-text,
#story-6 .seq-big {
  font-size: var(--text-lg);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-transform: none;
  max-width: 30ch;
  width: 100%;
  text-align: center;
  margin-inline: auto;
}

/* Dastgahs statement — MOMKEN story typography */
#dastgahs-statement .statement--two {
  font-size: clamp(1.6rem, 3.2vw, 3rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  max-width: 22ch;
  text-align: center;
  margin-inline: auto;
}

#dastgahs-statement .statement--two > span,
#momken-statement   .statement--two > span,
#story-6 .seq-big > span { white-space: nowrap; display: block; text-align: center; }
@media (max-width: 560px) { .statement--two span { white-space: normal; } }
@media (max-width: 768px) {
  #dastgahs-statement .statement--two > span,
  #momken-statement   .statement--two > span,
  #story-6 .seq-big > span { white-space: normal; }
  #dastgahs-statement .statement--two {
    font-size: clamp(1.5rem, 6.5vw, 2.4rem);
    max-width: 90vw;
  }
}

/* story-6 — bold/light text mix over photo */
.story-6-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12em;
  max-width: 28ch;
}
.s6-light {
  display: block;
  font-size: clamp(1.8rem, 3.8vw, 3.2rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  white-space: normal;
  text-align: center;
}
.s6-bold {
  display: inline;
  font-size: inherit;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: none;
}

/* =====================================================================
   Channel button
   ===================================================================== */
.gallery-cta { margin-top: clamp(1.6rem, 4vh, 2.6rem); }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border: 2px solid var(--hair);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--ink);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.btn:hover { border-color: var(--accent); background: var(--accent); color: var(--bg); }
.btn__icon { transition: transform 0.3s var(--ease); }
.btn:hover .btn__icon { transform: translate(2px, -2px); }

/* =====================================================================
   Next-project pill — accent-fill sweep (L→R film wipe)
   ===================================================================== */
.frame-next {
  position: absolute;
  right: var(--pad-x);
  bottom: clamp(1.3rem, 4vh, 2.2rem);
  z-index: 3;
}
.btn--sweep {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: var(--hair);
  color: var(--ink-dim);
}
.btn--sweep::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease);
  z-index: -1;
}
.btn--sweep .btn__label,
.btn--sweep .btn__icon { transition: color 0.45s var(--ease), transform 0.3s var(--ease); }
.btn--sweep:hover { background: transparent; border-color: var(--accent); color: var(--bg); }
.btn--sweep:hover::before { transform: scaleX(1); }
.btn--sweep:hover .btn__icon { transform: translateX(3px); }
.btn-next__kicker {
  display: block;
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.45rem;
  text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .btn--sweep::before { transition: none; }
}

/* Mobile is locked — keep deck-only affordance off phones */
@media (max-width: 768px) {
  .frame-next { display: none; }
}

/* =====================================================================
   Reduced motion for scroll / focus animations
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js [data-step], .souls-col {
    opacity: 1 !important; filter: none !important; transition: none !important;
  }
  .js .deck[data-transition] .frame--zoom,
  .js .deck[data-transition] .frame--zoom.is-active { transform: none !important; filter: none !important; }
}

/* =====================================================================
   Statement — stack modifier
   ===================================================================== */
.statement--stack {
  line-height: 1.02;
  letter-spacing: var(--ls-tight);
  max-width: none;
}

/* =====================================================================
   Mobile natural-scroll — image story frames (placed last to win the cascade
   over the base flex rules and the max-width:760 overrides further up).
   On desktop these are flex panels whose image fills 50% of a full-height
   frame; with content-height mobile frames that basis collapsed to 0, so the
   photos vanished. Here we give each image wrapper an explicit height.
   ===================================================================== */
@media (max-width: 768px) {
  /* Thesis statement reveal is gated on .is-active (deck-only) — show it here */
  .js .frame#thesis .thesis-reveal {
    clip-path: none !important;
    opacity: 1 !important;
    animation: none !important;
  }
  /* Thesis: scale down and allow wrapping on narrow screens */
  #thesis .statement--type { font-size: clamp(1.75rem, 8.5vw, 2.8rem); }
  #thesis .thesis-reveal { white-space: normal; }

  /* ── Mobile video carousel ── */
  .tabs__panel .video-grid {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    width: 100%;
  }
  .tabs__panel .video-grid::-webkit-scrollbar { display: none; }
  .tabs__panel .video-grid .video-embed {
    flex: 0 0 100%;
    scroll-snap-align: start;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
  }
  /* Dots container injected by JS */
  .video-grid-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 0.9rem;
  }
  .video-grid-dots__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(237,234,224,0.22);
    transition: background 0.25s, transform 0.25s;
    cursor: pointer;
    border: none;
    padding: 0;
  }
  .video-grid-dots__dot.is-active {
    background: var(--ink);
    transform: scale(1.25);
  }

  .js .frame--seq-split,
  .js .frame--top-bottom,
  .js .frame--souls { overflow: visible; }

  /* Text + image split (momken-story, story-2) — text overlaid on the photo */
  .frame--seq-split,
  .frame--seq-split-rev {
    display: block;
    position: relative;
    padding: 0;
    height: 62vh;
    margin-block: clamp(2.5rem, 7vh, 4rem);
  }
  .seq-split-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  .seq-split-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(12, 12, 12, 0.5);
    z-index: 1;
  }
  .seq-split-text {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--pad-x);
    font-size: clamp(1.5rem, 5.6vw, 2.1rem);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.85);
  }

  /* Text-over-image (story-5a…d) — stacked text then photo */
  .frame--top-bottom {
    display: flex;
    flex-direction: column;
    padding: clamp(3rem, 8vh, 4.5rem) 0;
    gap: clamp(1.4rem, 4vh, 2.2rem);
  }
  .tb-text { flex: none; padding: 0 var(--pad-x); }
  .tb-img {
    flex: none;
    width: 100%;
    height: 54vh;
    min-height: 0;
    position: relative;
  }

  /* Soul strip — show all columns; slightly shorter photo panels */
  .frame--souls { padding: 0; }
  .souls-cols { height: auto; }
  .souls-col {
    flex: none;
    opacity: 1 !important;
    transform: none !important;
    height: 38vh;
    min-height: 0;
  }

  /* The Filmmaker — cleaner, smaller, justified paragraph on phones */
  .about-text {
    max-width: 100%;
    font-size: clamp(1rem, 4.3vw, 1.25rem);
    font-weight: 400;
    line-height: 1.66;
    letter-spacing: 0;
    text-align: justify;
    text-shadow: none;
  }
}

/* =====================================================================
   Field Work — Viewfinder coverflow carousel (.vf)
   Scoped to #fieldwork; uses absolute positioning within the frame.
   ===================================================================== */
.vf-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.frame--fieldwork { padding: 0; }
.vf { position: absolute; inset: 0; user-select: none; -webkit-user-select: none; }

/* Shared bracket geometry — bracket is 58vw wide, 16/9 ratio, vertically centered */
/* bracket half-height = 58vw * 9/16 / 2 = 16.3125vw */

/* Tabs — flush above bracket top edge */
.vf-tabs-bar {
  position: absolute;
  bottom: calc(50% + 16.3125vw + 0.8rem);
  top: auto; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: center; padding-top: 0;
}
.vf-tabs-list { position: relative; display: flex; gap: clamp(1.6rem, 4vw, 3rem); }
.vf-tabs-btn {
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 1.4vw, 0.82rem);
  font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(237,234,224,0.55);
  background: none; border: none; cursor: pointer;
  padding: 0 0 0.6rem 0; transition: color 0.3s var(--ease); white-space: nowrap;
}
.vf-tabs-btn:hover, .vf-tabs-btn.is-active { color: var(--ink); }
.vf-tabs-indicator {
  position: absolute; bottom: 0; left: 0; height: 2px; background: var(--accent);
  transition: transform 0.4s var(--ease), width 0.4s var(--ease); transform-origin: left center;
}

/* Title — below bracket bottom edge, left-aligned to bracket left edge */
.vf-title {
  position: absolute;
  top: calc(50% + 16.3125vw + 1.5rem);
  left: calc(50% - 29vw);
  right: auto;
  max-width: 30vw;
  text-align: left; font-family: var(--font-display);
  font-size: clamp(0.72rem, 1.3vw, 0.86rem); font-weight: 700;
  letter-spacing: 0.16em; color: rgba(237,234,224,0.78);
  text-transform: uppercase; pointer-events: none; z-index: 15;
  display: flex; flex-direction: column; gap: 0.3em; align-items: flex-start;
  overflow: hidden;
}
.vf-title-credits {
  font-size: 0.78em; font-weight: 400; letter-spacing: 0.1em;
  color: rgba(237,234,224,0.45); text-transform: uppercase;
}

/* Stage + carousel */
.vf-stage {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  cursor: grab;
}
.vf-stage.is-dragging { cursor: grabbing; }
.vf-track { position: relative; width: 58vw; aspect-ratio: 16/9; }
.vf-item {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  will-change: transform, opacity, filter; pointer-events: none;
  transition: transform 0.95s cubic-bezier(0.19, 1, 0.22, 1),
              opacity 0.7s cubic-bezier(0.19, 1, 0.22, 1),
              filter 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}
.vf-inner { position: absolute; inset: 0; overflow: hidden; background: #111; }
.vf-inner img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
.vf-inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }

/* Play button */
.vf-play {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.18); transition: background 0.25s;
}
.vf-play svg {
  width: 52px; height: 52px; fill: rgba(237,234,224,0);
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.6)); transform: scale(0.88);
  transition: fill 0.25s, transform 0.25s;
}
.vf-stage:not(.is-dragging) .vf-item.is-active .vf-play:hover svg {
  fill: rgba(237,234,224,0.9); transform: scale(1);
}
.vf-play:hover { background: rgba(0,0,0,0.05); }
.vf-play.is-playing { display: none; }

/* Play mode */
.vf-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.92);
  opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease); z-index: 40;
}
#fieldwork.is-play-mode .vf-backdrop { opacity: 1; pointer-events: auto; }
.vf-item.playing-active { z-index: 50 !important; opacity: 1 !important; filter: none !important; }
.vf-exit {
  position: absolute; top: 1.5rem; right: 2rem; z-index: 60;
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
  background: none; border: none; cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), color 0.2s;
}
.vf-exit:hover { color: #fff; }
#fieldwork.is-play-mode .vf-exit { opacity: 1; pointer-events: auto; transform: translateY(0); }
#fieldwork.is-play-mode .vf-stage { cursor: default; }

/* Center crosshair marker */
.vf-marker {
  position: absolute; top: 50%; left: 50%; z-index: 13; color: var(--ink);
  pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.3s var(--ease), transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
  filter: drop-shadow(0 0 8px rgba(0,0,0,0.7));
}
.vf-marker svg { width: 40px; height: 40px; display: block; }
.vf-marker.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Fixed brackets */
.vf-brackets {
  position: absolute; top: 50%; left: 50%; width: 58vw; aspect-ratio: 16/9;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 10;
}
/* Rule-of-thirds lines inside bracket
   bracket = 58vw wide, 32.625vw tall
   1/3 vertical offset = 19.333vw, 1/3 horizontal offset = 10.875vw */
.vf-brackets::before,
.vf-brackets::after {
  content: "";
  position: absolute;
  background: rgba(237,234,224,0.07);
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.vf-brackets::before {
  top: 0; bottom: 0; width: 1px;
  left: 33.333%;
  box-shadow: 19.333vw 0 0 rgba(237,234,224,0.07);
}
.vf-brackets::after {
  left: 0; right: 0; height: 1px;
  top: 33.333%;
  box-shadow: 0 10.875vw 0 rgba(237,234,224,0.07);
}
.vf-brk {
  position: absolute; width: 30px; height: 30px;
  border-color: rgba(237,234,224,0.8); border-style: solid;
  transition: top 0.8s cubic-bezier(0.19,1,0.22,1), left 0.8s cubic-bezier(0.19,1,0.22,1),
              right 0.8s cubic-bezier(0.19,1,0.22,1), bottom 0.8s cubic-bezier(0.19,1,0.22,1),
              width 0.8s cubic-bezier(0.19,1,0.22,1), height 0.8s cubic-bezier(0.19,1,0.22,1);
}
.vf-brk-tl { top: -14px; left: -14px; border-width: 3px 0 0 3px; }
.vf-brk-tr { top: -14px; right: -14px; border-width: 3px 3px 0 0; }
.vf-brk-bl { bottom: -14px; left: -14px; border-width: 0 0 3px 3px; }
.vf-brk-br { bottom: -14px; right: -14px; border-width: 0 3px 3px 0; }
.vf-brackets.is-open .vf-brk { width: 40px; height: 40px; }
.vf-brackets.is-open .vf-brk-tl { top: -32px; left: -32px; }
.vf-brackets.is-open .vf-brk-tr { top: -32px; right: -32px; }
.vf-brackets.is-open .vf-brk-bl { bottom: -32px; left: -32px; }
.vf-brackets.is-open .vf-brk-br { bottom: -32px; right: -32px; }

/* Film counter — below bracket bottom edge, right-aligned to bracket right edge */
.vf-counter-wrap {
  position: absolute;
  top: calc(50% + 16.3125vw + 1.3rem);
  bottom: auto;
  left: auto;
  right: calc(50% - 29vw);
  display: flex; justify-content: flex-end; pointer-events: none; z-index: 20;
}
.vf-counter-win {
  position: relative; width: min(220px, 50vw); height: 2.2rem; overflow: hidden;
  display: flex; align-items: center; pointer-events: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.vf-counter-strip {
  display: flex; align-items: center; position: absolute; left: 50%;
  transition: transform 0.95s cubic-bezier(0.19, 1, 0.22, 1); will-change: transform;
}
.vf-counter-item {
  display: flex; align-items: center; font-family: var(--font-mono, "Courier New", monospace);
  font-size: 0.82rem; letter-spacing: 0.02em; color: rgba(237,234,224,0.5);
  white-space: nowrap; width: 52px; justify-content: center; cursor: pointer;
  transition: color 0.4s var(--ease); pointer-events: auto;
}
.vf-counter-item:hover, .vf-counter-item.is-current { color: var(--ink); }
.vf-counter-num { display: inline-block; min-width: 1.7em; text-align: center; }
.vf-counter-dots {
  display: inline-block; opacity: 0.4; font-size: 0.62em; letter-spacing: -0.04em;
  padding: 0 0.45em; transform: translateY(-1px);
}
.vf-counter-icon {
  position: absolute; left: 50%; top: -0.55rem; transform: translateX(-50%);
  pointer-events: none; z-index: 2; display: flex; align-items: flex-start; justify-content: center; width: 72px;
}
.vf-counter-icon svg { width: 16px; height: 18px; fill: var(--ink); filter: drop-shadow(0 0 6px rgba(237,234,224,0.35)); }

/* Mobile: the deck collapses frames to content height, but .vf is absolute —
   give the Field Work frame a full-viewport height so the carousel has a stage. */
@media (max-width: 768px) {
  .js .frame--fieldwork { min-height: 72svh; overflow: hidden; }
  .vf-track { width: 86vw; }
  .vf-brackets { width: 86vw; }
  /* Mobile bracket = 86vw wide, height = 86vw*9/16 = 48.375vw, half = 24.1875vw */
  .vf-tabs-bar { bottom: calc(50% + 24.1875vw + 0.8rem); }
  .vf-title {
    top: calc(50% + 24.1875vw + 0.5rem);
    left: calc(50% - 43vw);
    font-size: 0.68rem;
  }
  .vf-counter-wrap {
    top: calc(50% + 24.1875vw + 0.4rem);
    right: calc(50% - 43vw);
  }
  .vf-tabs-list { gap: 1.1rem; }
  .vf-tabs-btn { font-size: 0.64rem; letter-spacing: 0.12em; }
}

/* =====================================================================
   Mobile simplification & overflow fixes
   ===================================================================== */
@media (max-width: 768px) {
  /* Stop the WORK viewfinder's off-stage neighbours/counter from causing
     horizontal page overflow (which pushed the burger menu off-screen). */
  .js .frame--fieldwork { overflow: hidden; }
  .vf { overflow: hidden; }
  html, body { overflow-x: hidden; }

  /* Trim the MOMKEN narrative on phones: hide from "It started without a plan"
     through the souls sequence; keep the teaser, origin, episodes, etc. */
  #momken-story,
  #story-2,
  #story-3,
  #story-4,
  #story-5,
  #story-souls { display: none !important; }

  /* story-5 on phones: skip the stepped sequence and show just the final beat —
     the "THAT'S THE WHOLE POINT" image expanding with the soul line over it. */
  #story-5 .s5-step { display: none; }
  #story-5 .s5-soul {
    transform: scale(1.12);
    opacity: 0;
    background-image: url("assets/img/waheed.jpg");
    transition: transform 1.4s var(--ease), opacity 1s var(--ease);
  }
  #story-5 .s5-soul.is-revealed { transform: scale(1); opacity: 1; }
  #story-5 .s5-soul .seq-big { transition: opacity 0.9s var(--ease) 0.4s; }
  #story-5 .s5-soul.is-revealed .seq-big { opacity: 1; }
}