/* ==========================================================================
   JM · Cinematic story — v3.3.0
   Pinned 3D story. Follows the page theme (light first). Scrims are built from
   --story-veil so copy stays legible over the scene in either theme.
   ========================================================================== */

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Fixed toolbar floats over the full-bleed story */
.toolbar { position: fixed; left: 0; right: 0; top: 0; }
main > .section, main > .marquee { scroll-margin-top: calc(var(--nav-height) + 8px); }

.story {
  --story-veil: 247, 243, 234;     /* paper-50 as rgb */
  --story-cut: 244, 240, 230;      /* the board's paper */
  --story-cut-dot: 22, 21, 15;
  position: relative;
  background: var(--color-bg);
  color: var(--color-text);
}

.story__stage {
  position: relative; width: 100%;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: var(--color-bg);
}
.story__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 900ms var(--ease-standard);
}
html.is-ready .story__canvas { opacity: 1; }

.story__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--story-veil), 0.95) 0%, rgba(var(--story-veil), 0.86) 30%, rgba(var(--story-veil), 0.4) 46%, rgba(var(--story-veil), 0) 60%),
    linear-gradient(0deg, rgba(var(--story-veil), 0.7) 0%, rgba(var(--story-veil), 0) 30%);
}
.story__grain {
  position: absolute; inset: -50%; pointer-events: none; opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 900ms steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* the dip into the canvas world: FigJam paper with dots */
.story__cut {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background-color: rgb(var(--story-cut));
  background-image: radial-gradient(rgba(var(--story-cut-dot), 0.22) 1.3px, transparent 1.5px);
  background-size: 24px 24px;
}

/* ---------- Chapters ----------
   v2.2 rhythm: one 32px step (sp-6) between blocks, 12–16px inside a block.
   Type is smaller and a notch heavier so the scene has room to breathe. */
.story__chapters { position: absolute; inset: 0; pointer-events: none; }
.chapter {
  position: absolute;
  left: max(var(--gutter), calc((100vw - var(--container)) / 2));
  bottom: clamp(88px, 13vh, 150px);
  width: min(500px, calc(100vw - 2 * var(--gutter) - 72px));
  pointer-events: auto;
  display: flex; flex-direction: column; align-items: flex-start;
}
.chapter > * { margin: 0; }
.chapter__eyebrow {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--sp-4) !important;
}
.chapter__eyebrow .num {
  color: var(--ink-900); background: var(--sticky-yellow); border: 1px solid var(--ink-900);
  padding: 2px 7px; border-radius: var(--radius-1); box-shadow: 1.5px 1.5px 0 var(--ink-900);
}
.chapter:nth-child(3n+1) .chapter__eyebrow .num { background: var(--sticky-lilac); }
.chapter:nth-child(3n+2) .chapter__eyebrow .num { background: var(--sticky-mint); }
.chapter__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.9rem, 2.9vw, 2.6rem); line-height: 1.12; letter-spacing: -0.012em;
  margin-bottom: var(--sp-3) !important;
}
.chapter__title em {
  font-style: italic;
  background: linear-gradient(transparent 62%, var(--color-accent) 62%, var(--color-accent) 90%, transparent 90%);
  padding: 0 0.06em;
}
.chapter__text { font-size: var(--fs-16); line-height: 1.65; color: var(--color-text-muted); max-width: 44ch; }
.chapter__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5) !important; }
.chapter__list li {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-text); background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); padding: 4px 10px;
}

/* hero + finale: centred in the stage, 32px between every block, generous top and bottom */
.chapter--hero, .chapter--final {
  top: 0; bottom: 0; justify-content: center; gap: var(--sp-6);
  padding: calc(var(--nav-height) + var(--sp-8)) 0 var(--sp-8);
}
.chapter--hero .chapter__title, .chapter--final .chapter__title { margin-bottom: 0 !important; }
.chapter--hero { width: min(620px, calc(100vw - 2 * var(--gutter))); }
/* two balanced lines: "Interfaces you don't / have to think about." */
.chapter--hero .chapter__title { font-size: clamp(2.3rem, 3.9vw, 3.5rem); line-height: 1.08; letter-spacing: -0.018em; max-width: 12em; text-wrap: balance; }
.chapter--hero .chapter__text { font-size: 1.0625rem; line-height: 1.6; max-width: 40ch; }
.chapter--hero .chapter__meta { gap: var(--sp-3); }
.chapter__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.chapter__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.chapter__meta .mono { font-size: 11px; color: var(--color-text-subtle); letter-spacing: 0.06em; }
.chapter--final { width: min(500px, calc(100vw - 2 * var(--gutter))); }
.chapter--final .chapter__title { font-size: clamp(1.9rem, 2.9vw, 2.6rem); line-height: 1.12; }

.scroll-hint {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-hand); font-weight: 400; font-size: 1.05rem; color: var(--color-text-muted);
}
.scroll-hint i { position: relative; width: 2px; height: 36px; background: var(--color-border); overflow: hidden; border-radius: 2px; }
.scroll-hint i::after {
  content: ""; position: absolute; left: 0; top: -40%; width: 2px; height: 40%; background: var(--color-accent-text);
  animation: hint 1.8s var(--ease-standard) infinite;
}
@keyframes hint { to { top: 110%; } }

/* ---------- Rail + progress ---------- */
.story__rail {
  position: absolute; right: max(var(--gutter), calc((100vw - var(--container)) / 2 - 40px));
  top: 50%; transform: translateY(-50%); z-index: 2;
}
.story__rail ol { display: flex; flex-direction: column; gap: 14px; }
.story__rail a {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; text-decoration: none;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-subtle); min-height: 24px;
}
.story__rail a span { opacity: 0; transform: translateX(6px); transition: all var(--dur-2) var(--ease-standard); }
.story__rail a::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--color-border-strong); background: var(--color-bg-elevated);
  transition: all var(--dur-2) var(--ease-standard);
}
.story__rail a:hover span, .story__rail a:focus-visible span, .story__rail a[aria-current="step"] span { opacity: 1; transform: none; }
.story__rail a[aria-current="step"] { color: var(--color-text); }
.story__rail a[aria-current="step"]::after { background: var(--sticky-lilac); box-shadow: 1.5px 1.5px 0 var(--ink-900); }

.story__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--color-border-subtle); z-index: 2; }
.story__progress span { display: block; height: 100%; background: var(--color-accent-text); transform-origin: left; transform: scaleX(0); }

/* ---------- Mode: cinematic ---------- */
html.is-cinematic .chapter:not(.chapter--hero) { opacity: 0; visibility: hidden; }

/* ---------- Mode: static & no-JS ---------- */
html.no-js .story__stage,
html.is-static .story__stage { height: auto; overflow: visible; background: var(--color-bg); }
html.no-js .story__canvas, html.is-static .story__canvas,
html.no-js .story__cut, html.is-static .story__cut,
html.no-js .story__grain, html.is-static .story__grain,
html.no-js .story__scrim, html.is-static .story__scrim,
html.no-js .story__rail, html.is-static .story__rail,
html.no-js .story__progress, html.is-static .story__progress { display: none; }
html.no-js .story__chapters, html.is-static .story__chapters { position: static; }
html.no-js .chapter, html.is-static .chapter {
  position: relative; left: auto; bottom: auto; top: auto; transform: none;
  width: 100%; min-height: 86vh; min-height: 86svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--nav-height) + var(--sp-8)) max(var(--gutter), calc((100vw - var(--container)) / 2)) var(--sp-8);
  background:
    linear-gradient(90deg, rgba(var(--story-veil), 0.92) 0%, rgba(var(--story-veil), 0.6) 45%, rgba(var(--story-veil), 0.05) 100%),
    var(--shot, radial-gradient(80% 70% at 70% 40%, rgba(201, 184, 255, 0.45), transparent 70%)) center / cover no-repeat,
    var(--color-bg);
  border-bottom: var(--bw-thick) solid var(--color-border-strong);
  scroll-margin-top: 0;
}
html.no-js .chapter > *, html.is-static .chapter > * { max-width: 620px; }
html.no-js .chapter--hero, html.is-static .chapter--hero { min-height: 100vh; min-height: 100svh; justify-content: center; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .story__rail { display: none; }
  .story__scrim {
    background: linear-gradient(0deg, rgba(var(--story-veil), 0.95) 0%, rgba(var(--story-veil), 0.7) 42%, rgba(var(--story-veil), 0) 68%);
  }
  .chapter { width: calc(100vw - 2 * var(--gutter)); bottom: 72px; }
  .chapter__text { font-size: var(--fs-16); }
  .chapter--hero, .chapter--final { top: auto; bottom: 40px; padding: 0; gap: var(--sp-5); }
  .chapter__list li { font-size: 10px; padding: 4px 8px; }
  .chapter__meta .mono { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .story__grain, .scroll-hint i::after { animation: none; }
}

.toolbar .status-pill { white-space: nowrap; }
@media (max-width: 1180px) { .toolbar .status-pill { display: none; } }

/* ---------- HUD: where am I, and a way out (v3.3) ---------- */
.story__hud {
  position: absolute; z-index: 3;
  right: max(var(--gutter), calc((100vw - var(--container)) / 2)); bottom: 24px;
  display: flex; align-items: center; gap: var(--sp-4);
  transition: opacity var(--dur-3) var(--ease-standard), visibility var(--dur-3);
}
/* hidden on the hero (View work is right there) and the finale (the work is next) */
.story__hud.is-hidden { opacity: 0; visibility: hidden; }
.story__count {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-subtle); white-space: nowrap;
}
.story__count b { font-weight: 400; color: var(--color-text); }
.story__count b ~ span { margin-left: 8px; }
/* desktop: the rail already shows the chapter, so the HUD is only the way out */
@media (min-width: 821px) { .story__count { display: none; } }
.story__skip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  color: var(--color-text); background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); box-shadow: var(--shadow-hard);
  transition: transform var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.story__skip:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--color-border-strong); }
.story__skip:focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; }
html.no-js .story__hud, html.is-static .story__hud { display: none; }
@media (max-width: 820px) {
  .story__hud { top: calc(var(--nav-height) + 12px); bottom: auto; left: var(--gutter); right: var(--gutter); justify-content: space-between; }
  .story__count { background: rgba(var(--story-veil), 0.85); padding: 6px 10px; border-radius: var(--radius-full); }
  .story__count:empty { visibility: hidden; }
}