/* =============================================================
   INUYASHA — scroll-controlled cinematic hero
   Palette + ornament language taken from must-use.png /
   must-use-assets.png: deep warm charcoal, rose sakura accents,
   ink-brush ornament, warm amber backlight.
   ============================================================= */

:root {
  /* JS keeps --vh in sync with the real viewport height (resize only,
     never on scroll) so iOS URL-bar movement can't jitter the pin. */
  --vh: 100vh;

  /* Total virtual scroll distance of the pinned timeline.
     0–35% rotation · 35–40% awakening · 40–100% video scrub.
     5.6 × viewport → video sequence gets 0.60 × 5.6 = 336vh. */
  --scroll-len: calc(var(--vh) * 5.6);

  /* Character box. The silhouette fills 98.5% of the PNG height, so a
     78% box puts him at ~77% of viewport height (spec: 70–85%). */
  --fig-h: min(calc(var(--vh) * 0.78), 140vw);

  --ink: #0c0908;
  --charcoal: #15100e;
  --rose: #e79aa8;
  --rose-dim: #c2586c;
  --rose-pale: #f4cdd4;
  --amber: #ffb27a;
  --ivory: #ece2d8;

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cjk: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Songti SC", serif;

  /* Driven from JS each frame. */
  --env-opacity: 1;
  --ignite: 0;

  /* Cursor. --cur-w is the square canvas of the idle/hover masters; the
     blade itself covers 67.8% of it, so 184px reads as a ~125px cursor.
     The click master is 3:2 and draws its blade at 0.677x — measured off the
     blade's red rim, not guessed — hence the odd factor. It keeps the blade
     the same size through all three states so the press doesn't pop.
     (That master also draws the blade slightly wider and shorter than the
     default, so no single scale matches both axes; 0.677 is the geometric
     mean, leaving ±6% that the press recoil hides.) */
  --cur-w: clamp(124px, 10.5vw, 184px);
  --cur-click-w: calc(var(--cur-w) * 1.31298);
  --cur-click-h: calc(var(--cur-click-w) * 0.666667);
}

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

html {
  background: var(--ink);
  /* Native scrolling only — the timeline reads scroll position, it
     never hijacks it. Smooth-scroll would fight the scrubber. */
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

img, video, canvas, svg { display: block; max-width: 100%; }

/* =============================================================
   HERO — the pinned timeline
   ============================================================= */

.hero {
  position: relative;
  height: calc(var(--vh) + var(--scroll-len));
}

.hero__track {
  position: sticky;
  top: 0;
  height: var(--vh);
  overflow: hidden;
  background: var(--ink);
  /* Own compositing context so the pinned scene never repaints the page. */
  isolation: isolate;
  contain: layout paint;
}

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

/* Shared geometry: the exact 1024×1536 frame of the source PNGs,
   centred and lifted slightly so his feet clear the lower chrome. */
.figures,
.floor,
.mist {
  position: absolute;
  left: 50%;
  top: calc(50% - var(--vh) * 0.015);
  height: var(--fig-h);
  aspect-ratio: 1024 / 1536;
  transform: translate(-50%, -50%);
}

/* =============================================================
   ENVIRONMENT — restrained, always behind him
   ============================================================= */

.env {
  position: absolute;
  inset: 0;
  opacity: var(--env-opacity);
  will-change: opacity;
}
.env > * { position: absolute; inset: 0; }

/* deep warm charcoal, not a flat black page */
.env__base {
  background:
    radial-gradient(120% 88% at 50% 118%, #241713 0%, rgba(36,23,19,0) 62%),
    radial-gradient(94% 70% at 50% 8%, #1d1512 0%, rgba(29,21,18,0) 66%),
    linear-gradient(180deg, #100c0b 0%, var(--charcoal) 46%, #0b0807 100%);
}

/* faint warm backlight rising from behind him */
.env__backlight {
  background:
    radial-gradient(58% 46% at 50% 30%, rgba(255,170,112,0.085) 0%, rgba(255,170,112,0) 70%),
    radial-gradient(72% 40% at 50% 96%, rgba(196,80,98,0.075) 0%, rgba(196,80,98,0) 72%);
  mix-blend-mode: screen;
}

/* almost-invisible radial light directly behind the silhouette */
.env__halo {
  background: radial-gradient(30% 42% at 50% 48%, rgba(255,206,170,0.13) 0%, rgba(255,168,140,0.05) 42%, rgba(255,150,130,0) 74%);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

/* delicate atmospheric haze — two very slow, very soft drifts */
.env__haze {
  filter: blur(46px);
  opacity: .5;
  mix-blend-mode: screen;
  will-change: transform;
}
.env__haze--a {
  background: radial-gradient(46% 26% at 34% 74%, rgba(214,166,178,0.16) 0%, rgba(214,166,178,0) 70%);
  animation: haze-a 47s ease-in-out infinite alternate;
}
.env__haze--b {
  background: radial-gradient(52% 22% at 68% 84%, rgba(180,132,150,0.13) 0%, rgba(180,132,150,0) 72%);
  animation: haze-b 63s ease-in-out infinite alternate;
}
@keyframes haze-a {
  from { transform: translate3d(-2.5%, 1.2%, 0) scale(1.04); }
  to   { transform: translate3d(3%, -1.6%, 0) scale(1.12); }
}
@keyframes haze-b {
  from { transform: translate3d(2%, -1%, 0) scale(1.1); }
  to   { transform: translate3d(-3%, 1.4%, 0) scale(1.02); }
}

.env__petals {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  opacity: .9;
}

.env__vignette {
  background:
    radial-gradient(122% 86% at 50% 44%, rgba(0,0,0,0) 44%, rgba(0,0,0,0.46) 82%, rgba(0,0,0,0.74) 100%);
}

/* =============================================================
   FLOOR SHADOW — his feet stay planted
   ============================================================= */

.floor {
  pointer-events: none;
  opacity: var(--env-opacity);
}
.floor__core {
  position: absolute;
  /* the registered body axis + ground line of front.png */
  left: 50.156%;
  top: 99.6%;
  width: 44%;
  height: 5.4%;
  transform: translate(-50%, -50%) scaleX(var(--floor-sx, 1));
  transform-origin: 50% 50%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.42) 46%, rgba(0,0,0,0) 78%);
  filter: blur(7px);
  will-change: transform, opacity;
}

/* Ground haze. Invisible when he is squared to a cardinal angle, so the
   four resolved views stay razor sharp; it only drifts across his feet
   during a swap, where the two stances are furthest apart. */
.mist {
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}
.mist__band {
  position: absolute;
  left: 50.156%;
  top: 97.4%;
  width: 82%;
  height: 15%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(54% 50% at 50% 50%,
    rgba(30, 21, 19, 0.96) 0%,
    rgba(46, 30, 31, 0.60) 44%,
    rgba(58, 38, 40, 0) 78%);
  filter: blur(13px);
}

/* =============================================================
   THE FOUR ANGLES
   ============================================================= */

.figures {
  perspective: 1900px;
  /* vanishing point at his chest, on the registered body axis */
  perspective-origin: 50.156% 44%;
  /* Deliberately flat, NOT preserve-3d: the two layers are counter-rotated
     planes that intersect along his spine, and a 3D context would split
     them at that intersection and leave a hard seam down his body. Flat
     keeps the perspective while compositing them in paint order. */
  transform-style: flat;
  pointer-events: none;
}

.figure {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* pivot on the registered body axis + ground line, so rotateY turns
     around his spine and any scale grows from his feet */
  transform-origin: 50.156% 99.414%;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.figure__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* --- per-frame registration ------------------------------------
   Measured from the alpha channel of each PNG:
     torso centroid (body axis) · ground line · silhouette height
   Each image is scaled to a common character height and nudged so the
   body axis and ground line land exactly where front.png puts them.
   Applied to the <img> so the animated transform on .figure stays
   independent of it.
   ---------------------------------------------------------------- */
#imgFront { transform-origin: 50.15625% 99.41406%; transform: translate(0%, 0%) scale(1); }
#imgRight { transform-origin: 49.58008% 99.21875%; transform: translate(0.57617%, 0.19531%) scale(0.99802); }
#imgBack  { transform-origin: 50.15625% 99.21875%; transform: translate(0%, 0.19531%) scale(0.99868); }
#imgLeft  { transform-origin: 51.36719% 99.86979%; transform: translate(-1.21094%, -0.45573%) scale(0.98631); }

/* =============================================================
   VIDEO — behind the figure, so front.png dissolves off it
   ============================================================= */

.video-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: transform, opacity;
  transform: translateZ(0);
}
.video-layer__el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  background: transparent;
}

/* the instant he ignites — a warm bloom, never a flash to black */
.ignition {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--ignite);
  mix-blend-mode: screen;
  background:
    radial-gradient(34% 44% at 50% 47%, rgba(255,214,176,0.55) 0%, rgba(255,150,110,0.20) 44%, rgba(255,120,100,0) 76%),
    radial-gradient(80% 60% at 50% 60%, rgba(210,110,120,0.16) 0%, rgba(210,110,120,0) 70%);
  will-change: opacity;
}

/* =============================================================
   CHROME — kanji mark, scroll instruction, opening veil
   ============================================================= */

.mark {
  position: absolute;
  top: clamp(20px, 4.2vh, 44px);
  left: clamp(20px, 3.4vw, 54px);
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  will-change: opacity;
}
.mark__kanji {
  font-family: var(--cjk);
  font-size: clamp(15px, 1.35vw, 20px);
  letter-spacing: .34em;
  color: var(--rose);
  opacity: .82;
}
.mark__rule {
  width: clamp(18px, 2.6vw, 40px);
  height: 1px;
  background: linear-gradient(90deg, rgba(231,154,168,.6), rgba(231,154,168,0));
}
.mark__latin {
  font-family: var(--serif);
  font-size: clamp(9px, .78vw, 11px);
  letter-spacing: .46em;
  text-transform: uppercase;
  color: rgba(236,226,216,.5);
}

.hint {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 3.4vh, 40px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  pointer-events: none;
  text-align: center;
  will-change: opacity, transform;
}
.hint__arcs {
  width: clamp(92px, 9vw, 128px);
  color: var(--rose);
  opacity: .5;
}
.hint__arcs svg { width: 100%; height: auto; }
.hint__label {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(10px, .82vw, 12px);
  letter-spacing: .52em;
  text-indent: .52em;
  text-transform: uppercase;
  color: rgba(240,214,206,.78);
}
.hint__thread {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hint__bloom {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--rose-pale);
  box-shadow: 0 0 9px rgba(231,154,168,.85);
  opacity: .9;
}
.hint__line {
  width: 1px;
  height: clamp(16px, 2.6vh, 26px);
  background: linear-gradient(180deg, rgba(231,154,168,.7), rgba(231,154,168,0));
}
.hint__chev {
  width: 15px;
  color: rgba(231,154,168,.62);
  animation: chev 2.6s ease-in-out infinite;
}
@keyframes chev {
  0%, 100% { transform: translateY(-2px); opacity: .4; }
  50%      { transform: translateY(2px);  opacity: .9; }
}

/* the ceremonial opening — scene resolves out of the dark */
.veil {
  position: absolute;
  inset: 0;
  background: var(--ink);
  pointer-events: none;
  opacity: 1;
  transition: opacity 1100ms cubic-bezier(.22,.61,.36,1);
}
.is-ready .veil { opacity: 0; }

.stage { opacity: 0; transition: opacity 900ms cubic-bezier(.22,.61,.36,1) 120ms; }
.is-ready .stage { opacity: 1; }

.mark, .hint { opacity: 0; transition: opacity 1000ms ease 520ms; }
.is-ready .mark { opacity: 1; }
.is-ready .hint { opacity: 1; }
/* once the timeline is driving them, JS owns opacity outright */
.is-live .mark, .is-live .hint, .is-live .veil { transition: none; }

/* =============================================================
   EPILOGUE — released from the pin
   ============================================================= */

.epilogue {
  position: relative;
  min-height: 78vh;
  display: grid;
  place-items: center;
  padding: clamp(70px, 14vh, 150px) 24px clamp(80px, 16vh, 170px);
  background:
    radial-gradient(84% 56% at 50% 0%, rgba(196,88,108,0.11) 0%, rgba(196,88,108,0) 66%),
    linear-gradient(180deg, #0b0807 0%, #120d0c 52%, #0a0706 100%);
}
.epilogue__inner {
  max-width: 620px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.brush { width: min(420px, 76vw); opacity: .72; }
.epilogue__kanji {
  margin: 0;
  font-family: var(--cjk);
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 62px);
  letter-spacing: .2em;
  text-indent: .2em;
  color: var(--rose-pale);
  text-shadow: 0 0 34px rgba(231,154,168,.28);
}
.epilogue__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: .62em;
  text-indent: .62em;
  text-transform: uppercase;
  color: rgba(236,226,216,.6);
}
.epilogue__copy {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.75;
  color: rgba(236,226,216,.56);
}

.cta {
  position: relative;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 30px;
  text-decoration: none;
  color: var(--rose-pale);
  border: 1px solid rgba(231,154,168,.34);
  background: linear-gradient(180deg, rgba(160,44,60,.30), rgba(96,22,32,.22));
  box-shadow: inset 0 0 26px rgba(231,154,168,.09), 0 12px 34px rgba(0,0,0,.42);
  transition: border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.22,.61,.36,1), background .4s ease;
}
.cta__label {
  font-family: var(--serif);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
}
.cta__sakura { width: 16px; height: 16px; color: rgba(231,154,168,.85); }
.cta:hover, .cta:focus-visible {
  border-color: rgba(244,205,212,.7);
  background: linear-gradient(180deg, rgba(178,52,70,.42), rgba(110,26,38,.3));
  box-shadow: inset 0 0 30px rgba(231,154,168,.16), 0 16px 42px rgba(0,0,0,.5);
  transform: translateY(-1px);
}
.cta:focus-visible { outline: 2px solid rgba(244,205,212,.75); outline-offset: 4px; }

/* =============================================================
   CURSOR — states and geometry; behaviour lives in cursor.js
   ============================================================= */

/* The native arrow only goes away once the custom one is actually running,
   so a failed script leaves a usable page rather than an invisible pointer. */
@media (hover: hover) and (pointer: fine) {
  .has-custom-cursor, .has-custom-cursor * { cursor: none; }
}

/* Zero-sized wrapper: its origin is the blade tip. JS translates it to the
   pointer, so scaling pulses around the point instead of sliding it off. */
.cursor {
  position: fixed;
  left: 0; top: 0;
  width: 0; height: 0;
  z-index: 9999;
  pointer-events: none;
  transform-origin: 0 0;
  opacity: 0;
  transition: opacity .18s ease;
  will-change: transform;
}
.cursor.is-visible { opacity: 1; }

.cursor__art {
  position: absolute;
  /* the global `img { max-width: 100% }` would resolve against the
     zero-width wrapper and collapse these to nothing */
  max-width: none;
  opacity: 0;
  transition: opacity .22s ease;
  user-select: none;
  -webkit-user-drag: none;
}

/* Idle and hover share one canvas and one hotspot, so the swap cannot drift. */
.cursor__art--idle,
.cursor__art--hover {
  width: var(--cur-w);
  height: var(--cur-w);
  left: calc(var(--cur-w) * -0.230903);
  top:  calc(var(--cur-w) * -0.223958);
}

/* The burst master has its own canvas ratio and art scale, so its own hotspot. */
.cursor__art--click {
  width: var(--cur-click-w);
  height: var(--cur-click-h);
  left: calc(var(--cur-click-w) * -0.177734);
  top:  calc(var(--cur-click-h) * -0.192383);
}

.cursor__art--idle { opacity: 1; }
.cursor.is-hover .cursor__art--idle { opacity: 0; }
.cursor.is-hover .cursor__art--hover { opacity: 1; }
.cursor.is-down .cursor__art--idle,
.cursor.is-down .cursor__art--hover { opacity: 0; }
/* the press should land, not fade in */
.cursor.is-down .cursor__art--click { opacity: 1; transition-duration: .07s; }

/* =============================================================
   ADAPTATIONS
   ============================================================= */

/* Coarse pointers / phones: shorter timeline, calmer atmosphere. */
@media (max-width: 720px), (pointer: coarse) and (max-width: 900px) {
  :root {
    --scroll-len: calc(var(--vh) * 4.4);
    --fig-h: min(calc(var(--vh) * 0.72), 148vw);
  }
  .env__haze { filter: blur(30px); opacity: .38; }
  .hint__arcs { width: 88px; }
}

/* Short landscape windows: keep him inside the frame. */
@media (max-height: 560px) {
  :root { --fig-h: min(calc(var(--vh) * 0.82), 130vw); }
  .hint__arcs, .hint__thread { display: none; }
}

/* The whole piece is direct manipulation, so scrubbing stays.
   What goes: ambient motion, drift, blur, the bloom's punch. */
@media (prefers-reduced-motion: reduce) {
  :root { --scroll-len: calc(var(--vh) * 4.2); }
  .env__haze { animation: none; opacity: .3; }
  .hint__chev { animation: none; }
  .env__petals { display: none; }
  .veil, .stage, .mark, .hint { transition-duration: 1ms; }
  .cta { transition: none; }
  /* The cursor is direct manipulation, so it stays — cursor.js drops the
     follow lag and the scale spring; only the state crossfade is shortened. */
  .cursor__art { transition-duration: 90ms; }
}


/* =============================================================
   FUSED LAYER — the valley he turns in, and the page below it
   -------------------------------------------------------------
   Palette below was SAMPLED from assets/hero-wide.webp by
   tools/make-hero.mjs, not chosen:
     --ink2 #fbe4cb (brightest 0.2%) · --accent2 #ed8e78 and
     --accent2-d #c06c58 (top decile by CHROMA in a luminance band)
     --rim #6a658b (the cold note; used ONLY as a creature rim,
     never in the UI, so the creatures do not read as lens flare)
   ============================================================= */

:root {
  --ink2: #fbe4cb;
  --ink2-66: rgba(251, 228, 203, 0.66);
  --ink2-42: rgba(251, 228, 203, 0.42);
  --ink2-24: rgba(251, 228, 203, 0.24);
  --line: rgba(251, 228, 203, 0.10);
  --line-2: rgba(251, 228, 203, 0.06);
  --accent2: #ed8e78;
  --accent2-d: #c06c58;
  --glow2: rgba(237, 142, 120, 0.30);
  --rim: #6a658b;
  --pad: clamp(22px, 5vw, 64px);
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
  --hud: 0;
  --mono2: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- the world, inside the existing env layer ---------- */
.env__scene,
.plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  max-width: none;
}
.env__scene { opacity: .82; }

.depth { position: absolute; inset: 0; }
.rays { position: absolute; inset: 0; overflow: hidden; }

/* one shaft: the ink at very low alpha, feathered to nothing at both edges
   and masked vertically so it fades in about a quarter of the way down.
   js/depth.js sets left/width/rotation/period. */
.ray {
  position: absolute;
  top: -12%;
  height: 124%;
  transform-origin: 50% 0%;
  background: linear-gradient(90deg,
    rgba(251,228,203,0) 0%, rgba(251,228,203,.085) 42%,
    rgba(251,228,203,.085) 58%, rgba(251,228,203,0) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 26%, rgba(0,0,0,1) 74%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 26%, rgba(0,0,0,1) 74%, rgba(0,0,0,0) 100%);
  will-change: opacity, transform;
}

/* Each is placed so it ACTUALLY CROSSES an occluder — a creature that never
   passes behind anything never shows the depth. Periods coprime (37/43/53s),
   travel 46-64px. The pointer dodge is written to the canvas INSIDE these,
   never here: a CSS animation owns the whole transform while it runs. */
.drifter { position: absolute; will-change: transform; }
.drifter--a { left: 22%; top: 24%; animation: drift-a 37s ease-in-out infinite; }
.drifter--b { left: 71%; top: 15%; animation: drift-b 43s ease-in-out infinite; }
.drifter--c { left: 12%; top: 54%; animation: drift-c 53s ease-in-out infinite; }
@keyframes drift-a { 0%{transform:translate3d(0,0,0)} 33%{transform:translate3d(38px,-22px,0)} 66%{transform:translate3d(-18px,26px,0)} 100%{transform:translate3d(0,0,0)} }
@keyframes drift-b { 0%{transform:translate3d(0,0,0)} 40%{transform:translate3d(-30px,24px,0)} 72%{transform:translate3d(22px,34px,0)} 100%{transform:translate3d(0,0,0)} }
@keyframes drift-c { 0%{transform:translate3d(0,0,0)} 45%{transform:translate3d(26px,-30px,0)} 78%{transform:translate3d(-24px,-12px,0)} 100%{transform:translate3d(0,0,0)} }

.fog { position: absolute; inset: 0; width: 100%; height: 100%; }

/* the occluders, drawn back over the rays, the creatures and the fog */
.plate {
  -webkit-mask-image: url(assets/hero-mask.png);
          mask-image: url(assets/hero-mask.png);
  -webkit-mask-size: 100% 100%;  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* ---------- chrome that appears once the turn is over ---------- */
.nav {
  position: fixed; z-index: 60; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: calc(var(--sa-t) + 14px) calc(var(--sa-r) + var(--pad)) 14px calc(var(--sa-l) + var(--pad));
  opacity: var(--hud); pointer-events: none;
  background: linear-gradient(180deg, rgba(12,9,8,.82) 0%, rgba(12,9,8,0) 100%);
}
.nav.is-on { pointer-events: auto; }
.nav__brand { font-family: var(--cjk); font-size: 20px; letter-spacing: .1em; color: var(--ink2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav__links a { color: var(--ink2-66); text-decoration: none; font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px; border: 1px solid var(--accent2-d);
  border-radius: 999px; color: var(--ink2); text-decoration: none;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  background: linear-gradient(180deg, rgba(237,142,120,.14) 0%, rgba(237,142,120,.04) 100%);
}
.btn--sm { font-size: 12px; padding: 0 16px; }
.btn--lg { min-height: 60px; padding: 0 40px; font-size: 14px; margin-top: 26px; }

/* A :hover that can never be left reads as stuck after a tap. */
@media (hover: hover) and (pointer: fine) {
  .nav__links a { transition: color .18s ease; }
  .nav__links a:hover { color: var(--ink2); }
  .btn { transition: box-shadow .28s ease, border-color .28s ease; }
  .btn:hover { border-color: var(--accent2); box-shadow: 0 0 26px 0 var(--glow2); }
}
.btn:active { transform: translateY(1px); }

/* ---------- the page ---------- */
.content {
  position: relative; z-index: 50; background: var(--ink);
  padding: 0 calc(var(--sa-r) + var(--pad)) 0 calc(var(--sa-l) + var(--pad));
}
.sec { max-width: 74ch; margin: 0 auto; padding: clamp(72px, 12vh, 148px) 0; border-top: 1px solid var(--line-2); }
.sec:first-child { border-top: 0; }
.sec--end { text-align: center; }

/* Section reveals: no blur. A 20px rise with 6px of blur over a second is
   mush. A rise, a hair of scale, and a curve that settles. */
.reveal { opacity: 0; transform: translateY(20px) scale(.994); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .62s ease, transform .86s cubic-bezier(.16,.84,.28,1); }

.eyebrow { font-family: var(--mono2); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent2); margin: 0 0 22px; }
.h1 { font-size: clamp(30px, 5vw, 54px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 26px; font-weight: 600; color: var(--ink2); }
.h2 { font-size: clamp(24px, 3.6vw, 38px); line-height: 1.16; letter-spacing: -.015em; margin: 0 0 22px; font-weight: 600; color: var(--ink2); }
.lede { font-size: clamp(16px, 1.35vw, 19px); color: var(--ink2-66); margin: 0 0 30px; }
.body { color: var(--ink2-66); margin: 0 0 20px; }
.content code { font-family: var(--mono2); font-size: .88em; color: var(--accent2); background: rgba(237,142,120,.07); border-radius: 3px; padding: .1em .36em; }

.stats { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stats li { border-top: 1px solid var(--line); padding-top: 16px; }
.stats b { display: block; font-family: var(--mono2); font-size: clamp(26px, 3.4vw, 38px); font-weight: 500; color: var(--ink2); letter-spacing: -.02em; margin-bottom: 8px; }
.stats span { font-size: 13px; color: var(--ink2-42); }

.grid { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); background: var(--line-2); border: 1px solid var(--line-2); }
.grid article { background: var(--charcoal); padding: 26px 24px; }
.grid h3 { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--ink2); }
.grid p { margin: 0; font-size: 13.5px; color: var(--ink2-42); line-height: 1.58; }

.limits { list-style: none; margin: 0; padding: 0; }
.limits li { border-top: 1px solid var(--line-2); padding: 18px 0; color: var(--ink2-66); font-size: 14.5px; }
.limits__precise { color: var(--ink2); }
.limits__flag { display: block; font-family: var(--mono2); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent2); margin-bottom: 8px; }

.faq { margin-top: 34px; }
.faq details { border-top: 1px solid var(--line-2); }
.faq summary { cursor: pointer; list-style: none; padding: 17px 0; min-height: 44px; display: flex; align-items: center; font-size: 14.5px; color: var(--ink2); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--accent2); font-family: var(--mono2); }
.faq details[open] summary::after { content: "\2013"; }
.faq p { margin: 0 0 20px; color: var(--ink2-42); font-size: 14px; }

.foot {
  position: relative; z-index: 50; background: var(--ink);
  border-top: 1px solid var(--line-2);
  padding: 42px calc(var(--sa-r) + var(--pad)) calc(var(--sa-b) + 42px) calc(var(--sa-l) + var(--pad));
  display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between;
}
.foot__links { display: flex; gap: 4px; }
.foot__links a { color: var(--ink2-66); text-decoration: none; font-size: 13px; padding: 0 10px; min-height: 44px; display: inline-flex; align-items: center; }
.foot__org { margin: 0; font-size: 12.5px; color: var(--ink2-24); }
.foot__org a { color: var(--ink2-42); }

/* the mask was not cut from the portrait crop, so the plate does not belong */
@media (orientation: portrait) and (max-width: 699px) {
  .plate { display: none; }
}

/* Drifting haze that chases a cursor is exactly what this setting asks us
   not to do. */
@media (prefers-reduced-motion: reduce) {
  .ray, .fog { display: none; }
  .drifter { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =============================================================
   HEBREW / RTL
   Copy-only change: <html dir="rtl">. Nothing here restyles a
   component — it only makes the existing ones read right-to-left,
   and gives the active nav item the crimson brush underline.
   ============================================================= */

.nav__brand { flex-direction: column; align-items: flex-start; line-height: 1.15; }
.nav__brand-he { font-size: 19px; letter-spacing: .02em; color: var(--ink2); }
.nav__brand-sub { font-size: 10px; letter-spacing: .18em; color: var(--ink2-42); }

.nav__links { flex-wrap: wrap; }
.nav__links a { padding: 0 10px; font-size: 12.5px; }

/* the active tab: a crimson brush stroke, not a solid rule */
.nav__links a.is-active { color: var(--ink2); position: relative; }
.nav__links a.is-active::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: 9px;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(194,88,108,0) 0%, var(--accent2) 22%,
    var(--accent2-d) 68%, rgba(194,88,108,0) 100%);
  border-radius: 2px;
}

/* the five ornate actions sit in a row and wrap on narrow screens */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }

/* Hebrew numerals and Latin track names inside RTL text keep their own
   direction, so they are not reordered by the bidi algorithm. */
.grid p, .limits li { unicode-bidi: plaintext; }

.sec { text-align: right; }
.sec--end { text-align: center; }
.limits li { border-top: 1px solid var(--line-2); }