/* =========================================================================
   cinecouncil.ai — DHARMKATHA production ledger
   Everything cold and documentary; one object in the frame is on fire.
   ========================================================================= */

:root {
  /* Ground */
  --ink:        #070908;
  --ink-2:      #0b0f0d;
  --ink-3:      #050706;

  /* Type */
  --bone:       #e8dcc4;
  --bone-dim:   #a2967f;
  --data:       #948970;
  --data-faint: #6f6858;

  /* The single heat source */
  --ember:      #ff7a18;
  --ember-hi:   #ffd9a0;
  --ember-deep: #cf3208;

  /* The bloom's cold tail */
  --green:      #1f7d61;
  --blue:       #0f3557;

  /* Rules */
  --line:       rgba(232, 220, 196, 0.13);
  --line-soft:  rgba(232, 220, 196, 0.07);
  --line-hard:  rgba(232, 220, 196, 0.26);

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* One tracking scale, used everywhere. The wide-tracked caps are the
     whole voice of the reference — they have to be consistent. */
  --track-xl: 0.34em;
  --track-lg: 0.26em;
  --track-md: 0.18em;
  --track-sm: 0.12em;

  --gut: clamp(1.5rem, 5vw, 6rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--ember); color: var(--ink); }

:focus-visible {
  outline: 1px solid var(--ember);
  outline-offset: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 0.75rem 1.25rem; background: var(--ink-2); color: var(--bone);
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: var(--track-md);
  text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* Small separator dot used between metadata items. */
.tick {
  display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: var(--data-faint); vertical-align: middle;
  margin: 0 0.85em; flex: none;
}


/* =========================================================================
   THE FIELD — fixed backdrop
   ========================================================================= */

.field {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}

/* Two grids at different scales, both barely there. The fine one gives the
   page its graph-paper substrate; the coarse one gives it structure. */
.field__grid {
  position: absolute; inset: -1px;
  background-image:
    linear-gradient(to right,  var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to right,  rgba(232,220,196,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(232,220,196,0.035) 1px, transparent 1px);
  background-size:
    clamp(180px, 25vw, 320px) clamp(180px, 25vw, 320px),
    clamp(180px, 25vw, 320px) clamp(180px, 25vw, 320px),
    calc(clamp(180px, 25vw, 320px) / 5) calc(clamp(180px, 25vw, 320px) / 5),
    calc(clamp(180px, 25vw, 320px) / 5) calc(clamp(180px, 25vw, 320px) / 5);
  opacity: 0.85;
}

/* ---- The bloom -------------------------------------------------------
   A limb of something enormous, lit from one point: hot at the edge,
   cooling through green into deep blue as it spreads. Layers are screened
   together so they add light rather than paint over one another. */

/* Sized and placed so the hot core sits off-canvas to the upper left and only
   the falloff crosses the frame. The reference keeps roughly four fifths of
   the poster near-black — the bloom has to be an event at the edge of the
   page, never a wash across it, or the hairline type stops being readable. */
.bloom {
  position: absolute;
  top: -38vh; left: -26vw;
  width: min(112vw, 1250px); aspect-ratio: 1;
  opacity: 0.88;
  will-change: transform;
}
.bloom > span {
  position: absolute; inset: 0;
  border-radius: 50%;
  mix-blend-mode: screen;
}

.bloom__blue {
  background: radial-gradient(circle at 58% 46%,
    rgba(15, 53, 87, 0.55) 0%,
    rgba(12, 42, 70, 0.26) 30%,
    rgba(8, 24, 42, 0.08) 50%,
    transparent 66%);
  filter: blur(60px);
  transform: translate(6%, 6%) scale(1.06);
}

.bloom__green {
  background: radial-gradient(circle at 46% 40%,
    rgba(31, 125, 97, 0.44) 0%,
    rgba(24, 92, 74, 0.18) 32%,
    transparent 58%);
  filter: blur(70px);
  transform: translate(-2%, 2%) scale(0.92);
}

.bloom__ember {
  background: radial-gradient(circle at 33% 30%,
    rgba(255, 217, 160, 0.62) 0%,
    rgba(255, 122, 24, 0.44) 11%,
    rgba(207, 50, 8, 0.20) 25%,
    rgba(120, 26, 6, 0.06) 42%,
    transparent 58%);
  filter: blur(55px);
  transform: scale(0.8) translate(-6%, -8%);
}

/* The lit edge. A ring, masked to an arc so it reads as a limb rather than
   a halo — the dark side of the sphere is simply the page. */
.bloom__limb {
  background: radial-gradient(circle at 50% 50%,
    transparent 55%,
    rgba(255, 190, 120, 0.30) 58.5%,
    rgba(255, 122, 24, 0.55) 60%,
    rgba(207, 50, 8, 0.18) 63%,
    transparent 70%);
  filter: blur(14px);
  /* Both ends of the arc fade out. A hard 0deg start reads as a cut edge
     rather than as a terminator. */
  -webkit-mask-image: conic-gradient(from 158deg, transparent 0deg, #000 26deg, #000 104deg, transparent 168deg, transparent 360deg);
          mask-image: conic-gradient(from 158deg, transparent 0deg, #000 26deg, #000 104deg, transparent 168deg, transparent 360deg);
  transform: scale(0.86) translate(-4%, -6%);
}

/* The hot spot, with the four-point streak of a real lens.
   The two linear-gradient streaks are full-bleed within this box, so without
   a radial mask the element's own square edge shows up as a hard diagonal
   seam once the whole bloom is blurred and screened. The mask fades the box
   out well before its corners. */
.bloom__flare {
  top: 22%; left: 20%;
  width: 26%; height: 26%; inset: auto;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,247,230,0.95) 0%, rgba(255,196,110,0.55) 14%, transparent 46%),
    linear-gradient(90deg, transparent 8%, rgba(255,200,130,0.26) 50%, transparent 92%),
    linear-gradient(0deg,  transparent 26%, rgba(255,200,130,0.16) 50%, transparent 74%);
  filter: blur(6px);
  border-radius: 0;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,0.6) 42%, transparent 68%);
          mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,0.6) 42%, transparent 68%);
  animation: breathe 9s var(--ease) infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.72; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

/* Grain. Ties the flat gradients together and kills banding on the bloom,
   which is otherwise very visible on an 8-bit display. */
.field__grain {
  position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.16;
  animation: drift 700ms steps(1) infinite;
}
@keyframes drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

/* Two jobs: pull the corners down, and lay a scrim across the middle of the
   page so the bloom can never rise behind body copy. Without the second
   layer the hairline mono at 0.6rem drops below readable contrast. */
.field__vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 62% 50%, rgba(7,9,8,0.72) 0%, rgba(7,9,8,0.34) 45%, transparent 70%),
    radial-gradient(ellipse at 50% 40%, transparent 24%, rgba(3,5,4,0.6) 72%, rgba(3,5,4,0.94) 100%);
}


/* =========================================================================
   SHARED TYPE
   ========================================================================= */

main { position: relative; z-index: 1; }

.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: var(--track-lg);
  text-transform: uppercase;
  color: var(--ember);
  margin: 0 0 1.6rem;
}

.head { padding: 0 var(--gut); margin-bottom: clamp(3rem, 8vw, 6rem); }
.head--center { text-align: center; }
.head--center .eyebrow { margin-left: auto; margin-right: auto; }

.head__title {
  margin: 0;
  font-size: clamp(1.6rem, 4.5vw, 3rem);
  font-weight: 200;
  letter-spacing: var(--track-lg);
  text-transform: uppercase;
  line-height: 1.2;
}

.head__note {
  margin: 1.5rem 0 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: var(--track-sm);
  text-transform: uppercase;
  color: var(--data);
}


/* =========================================================================
   I — THE SLATE
   ========================================================================= */

.slate {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(5rem, 12vh, 9rem) var(--gut);
}

.regmarks { position: absolute; inset: clamp(1rem, 3vw, 2.5rem); pointer-events: none; }
.regmark {
  position: absolute; width: 14px; height: 14px;
  border: 1px solid var(--line-hard);
}
.regmark--tl { top: 0; left: 0;  border-right: 0; border-bottom: 0; }
.regmark--tr { top: 0; right: 0; border-left: 0;  border-bottom: 0; }
.regmark--bl { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.regmark--br { bottom: 0; right: 0; border-left: 0;  border-top: 0; }

.slate__doc {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 clamp(3rem, 9vh, 6rem);
  font-family: var(--mono);
  font-size: clamp(0.58rem, 1.4vw, 0.7rem);
  font-weight: 300;
  letter-spacing: var(--track-md);
  text-transform: uppercase;
  color: var(--data);
}

/* DHARMKATHA is 10 glyphs; at 0.34em tracking the word measures ~10.3em, so
   the size has to be driven off the viewport or it breaks mid-word. Locked to
   nowrap and sized to land at ~86vw — the name splitting across two lines
   destroys the whole cold-open. The cap is 7.1rem rather than 5.2rem because
   the word used to render ~3.4em wider than it measures (see .is-split below);
   the larger cap holds the desktop size the page was built around. */
.slate__title {
  margin: 0;
  font-size: clamp(1rem, 8.4vw, 7.1rem);
  font-weight: 200;
  line-height: 1.05;
  letter-spacing: var(--track-xl);
  text-transform: uppercase;
  white-space: nowrap;
  /* Wide tracking adds a trailing space on the last glyph; pull it back so
     the word stays optically centred. */
  text-indent: var(--track-xl);
  color: var(--bone);
}

/* text-indent inherits, and each .ch main.js creates is an inline-block — a
   block container — so the indent above was applied to every glyph in turn
   rather than once to the line. That added 10 x 0.34em, rendering the word
   ~14.1em instead of ~10.3em: it overflowed the viewport at every width below
   ~1200px and sat 4px right of centre. Cancel it in the split case; the
   unsplit (reduced-motion) title still needs it for the trailing space. */
.slate__title.is-split { text-indent: 0; }

/* Per-letter entrance, built by main.js. */
.slate__title .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  animation: chIn 1.1s var(--ease) forwards;
  animation-delay: calc(var(--i) * 55ms + 200ms);
}
@keyframes chIn { to { opacity: 1; transform: none; } }

.slate__sub {
  margin: clamp(2rem, 5vh, 3rem) 0 0;
  font-size: clamp(0.85rem, 2vw, 1.05rem);
  font-weight: 200;
  letter-spacing: var(--track-lg);
  text-transform: uppercase;
  color: var(--bone-dim);
  opacity: 0;
  animation: fadeUp 1.4s var(--ease) 1.5s forwards;
}

.slate__note {
  margin: clamp(1rem, 3vh, 1.5rem) 0 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 300;
  letter-spacing: var(--track-md);
  text-transform: uppercase;
  color: var(--data-faint);
  opacity: 0;
  animation: fadeUp 1.4s var(--ease) 1.9s forwards;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(0.8rem); }
  to   { opacity: 1; transform: none; }
}

.cue {
  position: absolute; bottom: clamp(2rem, 6vh, 4rem); left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 64px;
  display: grid; place-items: center;
  opacity: 0;
  animation: fadeUp 1.4s var(--ease) 2.4s forwards;
}
.cue__line { display: block; width: 1px; height: 56px; background: var(--line-hard); position: relative; overflow: hidden; }
.cue__line::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent, var(--ember), transparent);
  animation: cueRun 2.6s var(--ease) infinite;
}
@keyframes cueRun {
  0%   { transform: translateY(-100%); }
  70%, 100% { transform: translateY(100%); }
}


/* =========================================================================
   II — THE LEDGER
   ========================================================================= */

.ledger { padding: clamp(6rem, 18vh, 12rem) 0 clamp(4rem, 10vh, 8rem); }

.ledger__frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(140px, 16vw, 200px);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  padding: 0 var(--gut);
  max-width: 1500px; margin: 0 auto;
}

.ledger__cols { min-width: 0; }

.block { margin-bottom: clamp(2.75rem, 7vh, 4.5rem); }
.block:last-of-type { margin-bottom: 0; }

.block__label {
  display: flex; align-items: baseline; gap: 1rem;
  margin: 0 0 1.5rem; padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: var(--track-md);
  text-transform: uppercase;
  color: var(--bone-dim);
}
.block__num { color: var(--data-faint); }
.block--zero .block__label { color: var(--ember); }
.block--zero .block__num { color: var(--ember-deep); }

.rows { list-style: none; margin: 0; padding: 0; }

.row {
  display: flex; align-items: baseline; gap: 0.9rem;
  padding: clamp(0.55rem, 1.4vh, 0.85rem) 0;
  opacity: 0;
  transform: translateY(0.9rem);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.row.is-in { opacity: 1; transform: none; }

.row__key {
  font-family: var(--mono);
  font-size: clamp(0.7rem, 1.6vw, 0.82rem);
  font-weight: 300;
  letter-spacing: var(--track-sm);
  text-transform: uppercase;
  color: var(--data);
  white-space: nowrap;
}

/* Dotted leader, drawn rather than typed so it never wraps or mis-aligns. */
.row__rule {
  flex: 1 1 auto;
  height: 1px;
  min-width: 1.5rem;
  transform: translateY(-0.28em);
  background-image: radial-gradient(circle, var(--line-hard) 0.5px, transparent 0.5px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  opacity: 0.7;
}

.row__val {
  font-family: var(--mono);
  font-size: clamp(0.82rem, 2vw, 1.05rem);
  font-weight: 300;
  letter-spacing: var(--track-sm);
  text-transform: uppercase;
  color: var(--bone);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The one worded value in the ledger. Sized up so the eye stops on it, but
   kept bone rather than ember: the accent colour belongs exclusively to the
   zeros, and spending it here would flatten the section-03 payoff. */
.row__val--claim {
  font-size: clamp(0.92rem, 2.4vw, 1.25rem);
  letter-spacing: var(--track-md);
  color: var(--bone);
}

/* The zeros. Bigger, warmer, and they arrive slower — this is the beat the
   whole page is built to deliver, so it gets its own timing curve. */
.row--zero { transition-duration: 1.5s; }
.row--zero .row__key { color: var(--bone-dim); }
.row--zero .row__val {
  font-size: clamp(1rem, 2.8vw, 1.5rem);
  font-weight: 400;
  color: var(--ember-hi);
  text-shadow: 0 0 28px rgba(255, 122, 24, 0.4);
}

/* ---- Marginalia ---- */
.margin {
  position: sticky; top: clamp(2rem, 12vh, 8rem);
  display: flex; flex-direction: column; gap: 1.75rem;
  padding-left: clamp(1rem, 2vw, 1.75rem);
  border-left: 1px solid var(--line);
}
.margin__key {
  margin: 0 0 0.4rem;
  font-family: var(--mono); font-size: 0.58rem; font-weight: 400;
  letter-spacing: var(--track-md); text-transform: uppercase;
  color: var(--ember);
}
.margin__val {
  margin: 0;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 300;
  letter-spacing: var(--track-sm); text-transform: uppercase;
  line-height: 1.8; color: var(--data);
}
.margin__glyphs { display: flex; gap: 0.5rem; }
.glyph {
  width: 18px; height: 18px;
  border: 1px solid var(--line-hard);
  position: relative;
}
.glyph::after {
  content: ''; position: absolute; inset: 5px;
  border: 1px solid var(--line-hard);
}
.glyph:nth-child(2)::after { border-radius: 50%; }
.glyph:nth-child(3)::after { inset: 7px; background: var(--ember); border: 0; }

/* ---- The redaction ---- */
.method {
  display: flex; align-items: center; gap: 0.9rem;
  max-width: 1500px;
  margin: clamp(3rem, 9vh, 6rem) auto 0;
  padding: clamp(1.5rem, 4vh, 2.5rem) var(--gut) 0;
  border-top: 1px solid var(--line);
  opacity: 0; transform: translateY(0.9rem);
  transition: opacity 1.2s var(--ease) 0.2s, transform 1.2s var(--ease) 0.2s;
}
.method.is-in { opacity: 1; transform: none; }
.method__key {
  font-family: var(--mono); font-size: clamp(0.7rem, 1.6vw, 0.82rem);
  font-weight: 400; letter-spacing: var(--track-md);
  text-transform: uppercase; color: var(--ember);
  white-space: nowrap;
}
.method__rule {
  flex: 1 1 auto; height: 1px; min-width: 1.5rem;
  background-image: radial-gradient(circle, var(--line-hard) 0.5px, transparent 0.5px);
  background-size: 6px 1px; background-repeat: repeat-x; opacity: 0.7;
}
/* Solid, empty, and genuinely empty in the DOM. Anyone who opens dev tools
   looking for the hidden string finds a span with nothing in it. */
.method__bar {
  display: block;
  width: clamp(110px, 22vw, 260px);
  height: clamp(14px, 2.4vw, 20px);
  background: var(--bone);
  flex: none;
}


/* =========================================================================
   III — THE ARTIFACT
   ========================================================================= */

.artifact { padding: clamp(6rem, 18vh, 12rem) 0 clamp(5rem, 12vh, 9rem); }

.reel { margin: 0 auto; padding: 0 var(--gut); max-width: 1500px; }

.reel__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink-3);
  border: 1px solid var(--line);
  overflow: hidden;
}
/* The heat leaks out from under the frame — the only element on the page
   allowed to glow. */
.reel__stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 120px rgba(0,0,0,0.6);
}
.reel__stage.is-playing {
  box-shadow: 0 0 90px -20px rgba(255, 122, 24, 0.28);
  transition: box-shadow 1.2s var(--ease);
}

.reel__video { width: 100%; height: 100%; object-fit: contain; background: var(--ink-3); }

/* ---- Ignition ---- */
.ignite {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.9rem;
  background: rgba(5, 7, 6, 0.45);
  transition: background 0.6s var(--ease), opacity 0.5s var(--ease);
}
.ignite:hover, .ignite:focus-visible { background: rgba(5, 7, 6, 0.25); }
.ignite[hidden] { display: none; }

.ignite__ring {
  position: absolute;
  width: clamp(76px, 12vw, 112px); aspect-ratio: 1;
  border: 1px solid var(--line-hard);
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% - 1.6rem));
  transition: transform 0.7s var(--ease), border-color 0.5s var(--ease);
}
.ignite:hover .ignite__ring { border-color: var(--ember); transform: translate(-50%, calc(-50% - 1.6rem)) scale(1.1); }

.ignite__tri {
  width: 0; height: 0; margin-bottom: 2.6rem;
  border-left: 13px solid var(--bone);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  transform: translateX(3px);
  transition: border-left-color 0.5s var(--ease);
}
.ignite:hover .ignite__tri { border-left-color: var(--ember); }

.ignite__label {
  font-family: var(--mono); font-size: clamp(0.66rem, 1.5vw, 0.78rem);
  font-weight: 400; letter-spacing: var(--track-lg); text-transform: uppercase;
  color: var(--bone);
}
.ignite__meta {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 300;
  letter-spacing: var(--track-md); text-transform: uppercase; color: var(--data);
}

/* ---- HUD ---- */
.hud {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; align-items: center; gap: clamp(0.5rem, 1.5vw, 1rem);
  padding: clamp(0.75rem, 2vw, 1.15rem) clamp(0.85rem, 2.5vw, 1.5rem);
  background: linear-gradient(to top, rgba(4,6,5,0.92), rgba(4,6,5,0.55) 55%, transparent);
  opacity: 0; transform: translateY(0.5rem);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.hud[hidden] { display: none; }
.reel__stage.is-idle .hud { opacity: 0; transform: translateY(0.5rem); pointer-events: none; }
.reel__stage:hover .hud,
.reel__stage.is-awake .hud,
.hud:focus-within { opacity: 1; transform: none; pointer-events: auto; }

.hud__btn {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  opacity: 0.75; transition: opacity 0.3s var(--ease);
}
.hud__btn:hover { opacity: 1; }

.hud__icon { display: block; position: relative; }
.hud__icon--play {
  width: 0; height: 0;
  border-left: 10px solid var(--bone);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  transform: translateX(2px);
}
.hud__icon--pause { width: 10px; height: 12px; border-left: 3px solid var(--bone); border-right: 3px solid var(--bone); }
.hud__icon--sound, .hud__icon--muted { width: 14px; height: 12px; }
.hud__icon--sound::before, .hud__icon--muted::before {
  content: ''; position: absolute; left: 0; top: 3px;
  width: 5px; height: 6px; background: var(--bone);
  box-shadow: 3px -3px 0 -1px var(--bone), 3px 3px 0 -1px var(--bone);
}
.hud__icon--sound::after {
  content: ''; position: absolute; left: 8px; top: 1px;
  width: 6px; height: 10px;
  border-right: 1.5px solid var(--bone); border-top: 1.5px solid var(--bone); border-bottom: 1.5px solid var(--bone);
  border-radius: 0 50% 50% 0;
}
.hud__icon--muted::after {
  content: ''; position: absolute; left: 8px; top: 5px;
  width: 8px; height: 1.5px; background: var(--ember);
}
.hud__icon--full {
  width: 13px; height: 13px;
  border: 1.5px solid var(--bone);
  clip-path: polygon(0 0, 42% 0, 42% 100%, 0 100%, 0 0, 100% 0, 100% 42%, 0 42%,
                     0 100%, 100% 100%, 100% 58%, 0 58%);
}
.hud__icon--exit { width: 13px; height: 13px; border: 1.5px solid var(--bone); }

.hud__tc {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 300;
  letter-spacing: var(--track-sm); color: var(--bone-dim);
  font-variant-numeric: tabular-nums; flex: none;
}
.hud__tc--end { color: var(--data); }

/* The scrub bar is another ledger rule — same hairline, same idiom. */
.hud__track {
  position: relative; flex: 1 1 auto;
  height: 22px; display: flex; align-items: center;
  cursor: pointer; touch-action: none;
}
.hud__track::before {
  content: ''; position: absolute; left: 0; right: 0; height: 1px;
  background: var(--line-hard);
}
.hud__buffer, .hud__played {
  position: absolute; left: 0; height: 1px; width: 0;
  transform-origin: left;
}
.hud__buffer { background: rgba(232,220,196,0.28); }
.hud__played { background: var(--ember); box-shadow: 0 0 10px rgba(255,122,24,0.7); }
.hud__head {
  position: absolute; left: 0; width: 1px; height: 11px;
  background: var(--ember-hi);
  box-shadow: 0 0 8px rgba(255,217,160,0.9);
  transition: height 0.25s var(--ease);
}
.hud__track:hover .hud__head { height: 17px; }

.reel__spinner { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; }
.reel__spinner[hidden] { display: none; }
.reel__spinner span {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line-hard); border-top-color: var(--ember);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.reel__error {
  position: absolute; inset: auto 0 0; z-index: 5; margin: 0;
  padding: 1rem; text-align: center;
  background: rgba(5,7,6,0.9);
  font-family: var(--mono); font-size: 0.66rem; font-weight: 300;
  letter-spacing: var(--track-sm); text-transform: uppercase; color: var(--ember);
}
.reel__error[hidden] { display: none; }

.reel__cap {
  display: flex; align-items: center; flex-wrap: wrap;
  margin-top: 1.1rem;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 300;
  letter-spacing: var(--track-md); text-transform: uppercase; color: var(--data);
}


/* =========================================================================
   IV — THE ARITHMETIC
   ========================================================================= */

.arith { padding: clamp(4rem, 10vh, 8rem) var(--gut); max-width: 1100px; margin: 0 auto; }

.arith__line {
  margin: 0;
  min-height: 62svh;
  display: flex; align-items: center;
  font-size: clamp(1.35rem, 5vw, 3.4rem);
  font-weight: 200;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--bone-dim);
  opacity: 0; transform: translateY(1.4rem);
  transition: opacity 1.3s var(--ease), transform 1.3s var(--ease), color 1.3s var(--ease);
}
.arith__line.is-in { opacity: 1; transform: none; }
.arith__line--last.is-in { color: var(--bone); }

.arith__coda {
  margin: 0 0 clamp(1rem, 3vh, 2rem);
  font-family: var(--mono);
  font-size: clamp(0.72rem, 1.8vw, 0.9rem);
  font-weight: 400; letter-spacing: var(--track-lg); text-transform: uppercase;
  color: var(--ember);
  opacity: 0; transform: translateY(1rem);
  transition: opacity 1.3s var(--ease) 0.3s, transform 1.3s var(--ease) 0.3s;
}
.arith__coda.is-in { opacity: 1; transform: none; }


/* =========================================================================
   V — THE COMMISSION
   ========================================================================= */

.commission { padding: clamp(5rem, 14vh, 9rem) 0 clamp(3rem, 8vh, 5rem); }

/* Same frame geometry as the ledger — the offer has to read as another page
   of the same document, not as a pricing panel bolted onto the end. */
.commission__frame {
  display: grid;
  /* Weighted towards the figure rather than split evenly: the terms are a
     four-row list and need little, and the number has to stay the largest
     thing in this section or the contrast with the zeros stops working. */
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
  padding: 0 var(--gut);
  max-width: 1500px; margin: 0 auto;
}

/* Revealed as one unit rather than row by row: the figure is a single
   statement, and staggering its parts would make it read as a list. */
.rate {
  min-width: 0;
  opacity: 0; transform: translateY(0.9rem);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.rate.is-in { opacity: 1; transform: none; }

.rate__key {
  margin: 0 0 clamp(1.1rem, 3vh, 1.6rem); padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.68rem; font-weight: 400;
  letter-spacing: var(--track-md); text-transform: uppercase;
  color: var(--ember);
}

/* The one large figure on a page where every other number is 00. Mono and
   tabular so it reads as a recorded amount rather than a price tag, and
   deliberately without the zeros' glow: cold money, hot absence. */
.rate__fig {
  margin: 0;
  display: flex; align-items: baseline; gap: 0.1em;
  font-family: var(--mono);
  font-size: clamp(2rem, 7.6vw, 4.4rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Above the frame's breakpoint the figure has half the page to sit in, not
   all of it. Sized off the viewport alone, eleven nowrap glyphs push past
   the hairline above them by ~20px between 861px and ~1150px. */
/* Only sized for the two-column layout, which starts at 1081px — see the
   stacking rule in RESPONSIVE. */
@media (min-width: 1081px) {
  .rate__fig { font-size: clamp(1.9rem, 5vw, 4.4rem); }
}
/* The rupee sign is a unit, not part of the amount — dimmed so the digits
   carry the weight, and outside the counter so it cannot flicker. */
.rate__cur { font-size: 0.6em; color: var(--data); }

.rate__unit {
  margin: 1rem 0 0;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 300;
  letter-spacing: var(--track-md); text-transform: uppercase;
  color: var(--data);
}

.rate__line {
  margin: clamp(1.5rem, 4vh, 2.25rem) 0 0;
  max-width: 34ch;
  font-size: clamp(0.9rem, 1.9vw, 1.05rem);
  font-weight: 200; line-height: 1.55;
  color: var(--bone-dim);
}

/* Reuses .block__label / .rows / .row wholesale — same hairlines, same
   dotted leaders as the ledger, no new idiom for the same kind of content. */
.terms {
  min-width: 0;
  padding-left: clamp(1rem, 2.5vw, 2.25rem);
  border-left: 1px solid var(--line);
}
.terms .row__val {
  font-size: clamp(0.72rem, 1.7vw, 0.86rem);
  letter-spacing: var(--track-sm);
  color: var(--bone-dim);
  white-space: normal;
  text-align: right;
}


/* =========================================================================
   THE DOOR
   ========================================================================= */

.door {
  padding: clamp(5rem, 14vh, 10rem) var(--gut);
  text-align: center;
  border-top: 1px solid var(--line);
  max-width: 1500px; margin: 0 auto;
}

/* Two doors, weighted identically. Giving the commission an ember fill at
   rest would read as a sales button and would spend the accent that the
   zeros own. */
.door__pair {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: clamp(0.85rem, 2vw, 1.5rem);
}

.door__cta {
  display: inline-flex; align-items: center; gap: 1.1rem;
  padding: 1.15rem 2.4rem;
  border: 1px solid var(--line-hard);
  font-family: var(--mono); font-size: clamp(0.7rem, 1.7vw, 0.82rem);
  font-weight: 400; letter-spacing: var(--track-lg); text-transform: uppercase;
  color: var(--bone);
  position: relative; overflow: hidden;
  transition: border-color 0.5s var(--ease), color 0.5s var(--ease);
}
/* Fill wipes in from the left on hover; the label inverts against it. */
.door__cta::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--ember);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.door__cta > * { position: relative; }
.door__cta:hover, .door__cta:focus-visible { border-color: var(--ember); color: var(--ink); }
.door__cta:hover::before, .door__cta:focus-visible::before { transform: scaleX(1); }
.door__cta { isolation: isolate; }

.door__arrow {
  width: 22px; height: 1px; background: currentColor; position: relative; flex: none;
  transition: width 0.5s var(--ease);
}
.door__arrow::after {
  content: ''; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.door__cta:hover .door__arrow { width: 32px; }

.door__note {
  margin: 1.75rem 0 0;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 300;
  letter-spacing: var(--track-sm); text-transform: uppercase; color: var(--data-faint);
}


/* =========================================================================
   FOOTER
   ========================================================================= */

.foot { position: relative; z-index: 1; padding: 0 0 clamp(2rem, 5vh, 3rem); }

/* Barcode strip, straight from the reference poster. */
.foot__bars {
  height: 26px; margin-bottom: clamp(2rem, 5vh, 3rem);
  background-image: repeating-linear-gradient(
    to right,
    var(--data-faint) 0 1px, transparent 1px 3px,
    var(--data-faint) 3px 5px, transparent 5px 6px,
    var(--data-faint) 6px 7px, transparent 7px 11px,
    var(--data-faint) 11px 14px, transparent 14px 15px,
    var(--data-faint) 15px 16px, transparent 16px 20px
  );
  opacity: 0.35;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}

.foot__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.25rem;
  padding: 0 var(--gut); max-width: 1500px; margin: 0 auto;
}
.foot__mark {
  margin: 0;
  font-family: var(--mono); font-size: clamp(0.72rem, 1.8vw, 0.86rem);
  font-weight: 400; letter-spacing: var(--track-md); color: var(--bone);
}
.foot__meta {
  display: flex; align-items: center; margin: 0;
  font-family: var(--mono); font-size: 0.6rem; font-weight: 300;
  letter-spacing: var(--track-sm); text-transform: uppercase; color: var(--data-faint);
}
.foot__link { border-bottom: 1px solid transparent; transition: color 0.4s var(--ease), border-color 0.4s var(--ease); }
.foot__link:hover { color: var(--bone-dim); border-bottom-color: var(--line-hard); }


/* =========================================================================
   RESPONSIVE
   ========================================================================= */

/* The commission stacks earlier than the ledger. Side by side below ~1080px
   the terms column is too narrow for values like "Original work, to brief":
   they wrap to two lines and leave the dotted leader as a four-dot stub. */
@media (max-width: 1080px) {
  .commission__frame { grid-template-columns: minmax(0, 1fr); }
  .terms {
    padding-left: 0; padding-top: clamp(1.75rem, 5vh, 2.5rem);
    border-left: 0; border-top: 1px solid var(--line);
  }
}

@media (max-width: 860px) {
  .ledger__frame { grid-template-columns: minmax(0, 1fr); }
  .margin {
    position: static;
    flex-direction: row; flex-wrap: wrap; gap: 1.5rem 2.5rem;
    padding: 1.75rem 0 0; padding-left: 0;
    border-left: 0; border-top: 1px solid var(--line);
  }
  .bloom { width: 145vw; top: -28vh; left: -55vw; opacity: 0.5; }
}

@media (max-width: 560px) {
  .slate__doc .tick { margin: 0 0.5em; }
  .hud { gap: 0.4rem; padding: 0.7rem 0.6rem; }
  .hud__tc { font-size: 0.58rem; }
  .hud__btn { width: 26px; height: 26px; }
  .row { gap: 0.6rem; }
  .arith__line { min-height: 48svh; }

  /* Side by side, the two doors wrap to a ragged pair of different widths.
     Stacked and stretched they stay a matched set. */
  .door__pair { flex-direction: column; align-items: stretch; }
  .door__cta { justify-content: space-between; padding: 1.05rem 1.5rem; }
}

/* Fullscreen: the HUD sits over the video with no letterbox chrome. */
.reel__stage:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; border: 0; }
.reel__stage:fullscreen .reel__video { object-fit: contain; }


/* =========================================================================
   REDUCED MOTION
   Kill the ambience entirely and show everything at rest. The page still
   reads — the ledger just arrives all at once.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .slate__title .ch,
  .slate__sub, .slate__note, .cue { opacity: 1; transform: none; }
  .row, .method, .arith__line, .arith__coda, .rate { opacity: 1; transform: none; }
  .field__grain { animation: none; }
  .bloom__flare { animation: none; opacity: 0.85; }
}