/* ============================================================
   SCALE.MN v3 — "MIDNIGHT LEDGER TERMINAL"
   The house tpl design system (Midnight Ledger: champagne gold
   on midnight navy, Fraunces italic display, Manrope body,
   IBM Plex Mono instrument, hairline grid) fused with the
   award motion layer: Three.js terrain, GSAP choreography,
   custom cursor, magnetic buttons, HUD frame, exhibit tabs.
   ============================================================ */

:root {
  /* midnight ramp (Midnight Ledger tokens) */
  --void: #070A14;
  --ink: #0A0F1F;
  --band: #0D1428;
  --line: rgba(180, 196, 230, 0.12);
  --line-2: rgba(180, 196, 230, 0.24);

  /* champagne signal */
  --champ: #E7C08A;
  --champ-bright: #F6DCAE;
  --champ-deep: #C99A55;
  --champ-dim: rgba(231, 192, 138, 0.55);
  --champ-glow: rgba(231, 192, 138, 0.10);

  /* bone text ramp */
  --t0: #E8E5DD;
  --t1: #B9C1D9;
  --t2: #9AA6C0;
  --t3: #8593B0;

  --f-display: "Fraunces", "Literata", Georgia, serif;
  --f-body: "Manrope", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --maxw: 1240px;
  --edge: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--void);
  color: var(--t0);
  color-scheme: dark;
  font-family: var(--f-body);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  font-variant-numeric: tabular-nums;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--champ-deep); color: #070A14; }
:focus-visible { outline: 2px solid var(--champ); outline-offset: 3px; }

em { font-style: italic; color: var(--champ-bright); }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--edge); }

/* ---------- film grain + vignette (fixed, non-scrolling) ---------- */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 80; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  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'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 79; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 10%, transparent 55%, rgba(3, 4, 10, 0.55) 100%);
}

/* ---------- custom cursor ---------- */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  a, button { cursor: none; }
}
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none;
  border-radius: 50%; transform: translate(-50%, -50%);
}
.cursor-dot { width: 6px; height: 6px; background: var(--champ-bright); }
.cursor-ring {
  width: 34px; height: 34px; border: 1px solid rgba(231, 192, 138, 0.5);
  transition: width 380ms var(--ease), height 380ms var(--ease),
              border-color 380ms var(--ease), background 380ms var(--ease);
}
.cursor-ring.is-hover {
  width: 62px; height: 62px;
  border-color: rgba(246, 220, 174, 0.9);
  background: var(--champ-glow);
}
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ---------- HUD frame (fixed corner marks) ---------- */
.hud { position: fixed; inset: 18px; z-index: 78; pointer-events: none; }
.hud i {
  position: absolute; width: 14px; height: 14px;
  border: 1px solid rgba(231, 192, 138, 0.35); opacity: 0.8;
}
.hud i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hud i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.hud i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.hud i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
@media (max-width: 900px) { .hud { display: none; } }

/* ---------- floating pill nav ---------- */
.nav {
  position: fixed; top: 22px; left: 0; right: 0; z-index: 100;
  pointer-events: none;
}
.nav-inner {
  pointer-events: auto;
  width: max-content; max-width: calc(100vw - 32px);
  margin-inline: auto;
  display: flex; align-items: center; gap: 26px;
  padding: 10px 12px 10px 24px;
  border-radius: 999px;
  background: rgba(10, 15, 31, 0.66);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.8),
              inset 0 1px 0 rgba(246, 220, 174, 0.07);
  transition: transform 600ms var(--ease), box-shadow 600ms var(--ease);
}
.nav.is-scrolled .nav-inner { box-shadow: 0 26px 70px -18px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(246,220,174,0.07); }
.nav-logo {
  font-family: var(--f-display); font-weight: 500;
  font-size: 18px; letter-spacing: -0.01em; color: var(--t0);
}
.nav-logo span { color: var(--champ); font-style: italic; }
.nav-links { display: flex; gap: 22px; align-items: center; }
.nav-links a {
  font-size: 13.5px; color: var(--t1); letter-spacing: 0.01em;
  transition: color 300ms var(--ease);
  position: relative;
}
.nav-links a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1px; background: var(--champ);
  transform: scaleX(0); transform-origin: right;
  transition: transform 420ms var(--ease);
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a.active::after { transform: scaleX(1); transform-origin: left; }
.nav-links a:hover, .nav-links a.active { color: var(--t0); }
/* ---------- nav switches: theme + language segmented controls ----------
   Rebuilt from scratch as editorial segmented pills (the winning pattern
   from a 4-direction design study). Each control is a hairline capsule with
   two glyph cells and a champagne highlight PILL that slides under the active
   cell on a real spring; the active glyph flips to dark ink once the pill
   lands beneath it. All geometry is computed from --cell/--pad so it is
   self-correcting, and a per-toggle --tx keeps theme + language state fully
   independent (theme state can never move the language pill, or vice-versa). */
.theme-toggle, .lang-toggle {
  --cell: 30px;                 /* width of one segment                */
  --pad: 3px;                   /* inner gutter of the machined channel */
  --tx: 0px;                    /* active-cell offset (0 | --cell)      */
  --tt-active-ink: #070A14;     /* glyph ink ON the pill (dark theme:   */
                                /* dark ink on the light champagne pill) */
  /* a real spring: overshoots past 1 then settles — the linear() technique
     that makes the pill feel physical rather than eased. */
  --spring: linear(
    0, 0.0211 3.3%, 0.0838 6.7%, 0.1836 10.1%, 0.3151 13.6%, 0.4722 17.3%,
    0.7532 23.4%, 0.9319 27.6%, 1.0186 30.2%, 1.0651 32.8%, 1.0783 37.6%,
    1.0651 40.6%, 1.0186 47.2%, 0.9884 54.9%, 0.9938 62.1%, 1.0019 73.6%, 1
  );
  position: relative; display: inline-flex; flex: none;
  width: calc(var(--cell) * 2 + var(--pad) * 2); height: 30px;
  padding: var(--pad); border-radius: 10px; cursor: pointer;
  border: 1px solid var(--champ-dim);
  background: rgba(231, 192, 138, 0.05);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.30), inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  transition: border-color 260ms var(--ease), box-shadow 200ms var(--ease), transform 120ms var(--ease);
}
[data-theme="light"] .theme-toggle, [data-theme="light"] .lang-toggle {
  /* light mode remaps the champagne signal to bronze, so the pill turns
     bronze on cream — the active glyph flips to cream to stay legible on it. */
  --tt-active-ink: #FBF7EF;
  border-color: rgba(122, 82, 22, 0.30);
  background: rgba(122, 82, 22, 0.05);
  box-shadow: inset 0 1px 2px rgba(122, 82, 22, 0.16);
}
.theme-toggle:hover, .lang-toggle:hover {
  border-color: var(--champ);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.30), 0 0 0 3px var(--champ-glow);
}
[data-theme="light"] .theme-toggle:hover, [data-theme="light"] .lang-toggle:hover {
  border-color: var(--champ-deep);
  box-shadow: inset 0 1px 2px rgba(122, 82, 22, 0.16), 0 0 0 3px var(--champ-glow);
}
/* hover affordance — the inactive glyph lifts toward legible (previewing the
   other option), and the pill gains a touch more bloom so the control feels
   responsive. Active glyph keeps its on-pill ink (set by more specific rules). */
.theme-toggle:hover .tt-ico, .lang-toggle:hover .tt-ico { color: var(--t1); }
.theme-toggle:hover .tt-thumb, .lang-toggle:hover .tt-thumb {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.30),
              0 3px 11px rgba(231, 192, 138, 0.36),
              inset 0 1px 0 rgba(255, 255, 255, 0.60);
}
[data-theme="light"] .theme-toggle:hover .tt-thumb, [data-theme="light"] .lang-toggle:hover .tt-thumb {
  box-shadow: 0 1px 1px rgba(74, 44, 6, 0.30),
              0 3px 11px rgba(201, 154, 85, 0.50),
              inset 0 1px 0 rgba(255, 238, 210, 0.60),
              inset 0 -2px 3px rgba(60, 36, 6, 0.32);
}
.theme-toggle:focus-visible, .lang-toggle:focus-visible {
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.30), 0 0 0 2px var(--void), 0 0 0 4px var(--champ);
}
[data-theme="light"] .theme-toggle:focus-visible, [data-theme="light"] .lang-toggle:focus-visible {
  box-shadow: inset 0 1px 2px rgba(122, 82, 22, 0.16), 0 0 0 2px #F5F1E8, 0 0 0 4px var(--champ-deep);
}
/* 44px tap target without changing the visual footprint */
.theme-toggle::before, .lang-toggle::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); height: 44px;
}
/* the sliding champagne pill (sits behind the glyph cells) */
.tt-thumb {
  position: absolute; z-index: 0; top: var(--pad); bottom: var(--pad); left: var(--pad);
  width: var(--cell); height: auto; border-radius: 7px;
  background: linear-gradient(180deg, var(--champ-bright), var(--champ) 55%, var(--champ-deep));
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.30),
              0 2px 8px rgba(231, 192, 138, 0.26),
              inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transform: translateX(var(--tx));
  transition: transform 520ms var(--spring), box-shadow 240ms ease;
  will-change: transform;
}
/* polished-metal sheen: a contained rim-light on the top edge only, so it
   reads as gloss without washing out the centred glyph's contrast. */
.tt-thumb::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.50) 0%,
    rgba(255, 255, 255, 0.10) 12%,
    rgba(255, 255, 255, 0) 30%);
}
[data-theme="light"] .tt-thumb {
  /* richer bronze jewel — more warmth + a dome (bright top, deep base) while
     the glyph zone stays dark enough for the cream ink to clear AA. */
  background: linear-gradient(180deg, #96652A 0%, #895820 55%, #6E4415 100%);
  box-shadow: 0 1px 1px rgba(74, 44, 6, 0.30),
              0 3px 9px rgba(201, 154, 85, 0.42),
              inset 0 1px 0 rgba(255, 238, 210, 0.55),
              inset 0 -2px 3px rgba(60, 36, 6, 0.32);
}
[data-theme="light"] .tt-thumb::after {
  background: linear-gradient(180deg,
    rgba(255, 244, 224, 0.42) 0%,
    rgba(255, 244, 224, 0.08) 12%,
    rgba(255, 244, 224, 0) 30%);
}
/* the two glyph cells */
.theme-toggle .tt-ico, .lang-toggle .tt-ico {
  position: relative; z-index: 1; width: var(--cell); height: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--t2); line-height: 1;
  transition: color 280ms ease;
}
.theme-toggle .tt-ico svg { width: 14.5px; height: 14.5px; display: block; }
.lang-toggle .tt-ico {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
}
/* tactile press — the whole control sinks into its channel */
.theme-toggle:active, .lang-toggle:active {
  transform: scale(0.96);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.40);
}
[data-theme="light"] .theme-toggle:active, [data-theme="light"] .lang-toggle:active {
  box-shadow: inset 0 1px 3px rgba(122, 82, 22, 0.26);
}
/* language: EN active by default (root tree); MN pages carry html[lang="mn"].
   The active-ink delay lets the pill arrive before the glyph darkens. */
.lang-toggle .lt-en { color: var(--tt-active-ink); transition-delay: 40ms; }
html[lang="mn"] .lang-toggle .lt-en { color: var(--t2); transition-delay: 0ms; }
html[lang="mn"] .lang-toggle .lt-mn { color: var(--tt-active-ink); transition-delay: 40ms; }
html[lang="mn"] .lang-toggle { --tx: var(--cell); }
/* respect reduced-motion: the pill snaps, no spring */
@media (prefers-reduced-motion: reduce) {
  .tt-thumb { transition: transform 1ms linear; }
}
.nav-cta {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--champ); color: #070A14 !important;
  padding: 8px 8px 8px 18px; border-radius: 999px;
  font-weight: 700; font-size: 13.5px;
  transition: background 300ms var(--ease), scale 200ms var(--ease);
}
.nav-cta:active { scale: 0.97; }
.nav-cta::after {
  content: "↗"; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px;
  background: rgba(7, 10, 20, 0.18); font-size: 12px;
  transition: transform 300ms var(--ease);
}
.nav-cta:hover { background: var(--champ-bright); }
.nav-cta:hover::after { transform: translate(1px, -1px); }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: clip;
  padding: clamp(160px, 24vh, 240px) 0 clamp(90px, 12vh, 150px);
  min-height: 92vh;
  display: flex; align-items: center;
}
#hero-canvas {
  position: absolute; inset: 0; z-index: 0;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 72% 18%, rgba(201, 154, 85, 0.13), transparent 65%),
    linear-gradient(180deg, rgba(7, 10, 20, 0.25) 0%, rgba(7, 10, 20, 0.0) 35%, rgba(7, 10, 20, 0.85) 92%, var(--void) 100%);
}
.hero .wrap { position: relative; z-index: 2; }
.eyebrow {
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--champ); display: flex; align-items: center; gap: 12px;
  margin-bottom: 26px;
}
.eyebrow::before { content: "———"; color: var(--champ-deep); letter-spacing: -2px; }
.hero h1 {
  font-family: var(--f-display);
  font-size: clamp(46px, 7vw, 92px);
  line-height: 1.02; letter-spacing: -0.02em; font-weight: 380;
  font-variation-settings: "opsz" 144;
  max-width: 980px; text-wrap: balance;
}
.hero h1 em { font-weight: 340; } /* italic + champ-bright inherited from the base em rule */
.hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hero h1 .line > span { display: inline-block; }
p.lede {
  margin-top: 34px; font-size: clamp(17px, 1.9vw, 20px);
  color: var(--t1); max-width: 640px; line-height: 1.75; text-wrap: pretty;
}
.hero-ctas { margin-top: 46px; display: flex; gap: 16px; flex-wrap: wrap; }
.btn-row { margin-top: 30px; display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- buttons: island pills with nested icon ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: 15px;
  padding: 10px 10px 10px 26px; border-radius: 999px;
  transition: background 350ms var(--ease), border-color 350ms var(--ease),
              color 350ms var(--ease), scale 200ms var(--ease);
  will-change: transform;
}
.btn:active { scale: 0.97; } /* `scale` composes with the magnetic inline transform instead of being overwritten by it */
.btn .ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px; font-size: 13px;
  transition: transform 350ms var(--ease);
}
.btn:hover .ic { transform: translate(2px, -2px) scale(1.06); }
.btn-primary { background: var(--champ); color: #070A14; }
.btn-primary .ic { background: rgba(7, 10, 20, 0.15); }
.btn-primary:hover { background: var(--champ-bright); }
.btn-ghost { border: 1px solid var(--line-2); color: var(--t0); padding-left: 24px; }
.btn-ghost .ic { background: rgba(180, 196, 230, 0.10); }
.btn-ghost:hover { border-color: var(--champ-dim); color: var(--champ); }

/* ---------- hero telemetry strip ---------- */
.hero-strip {
  margin-top: clamp(60px, 9vh, 96px); padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3);
}
.hero-strip b { color: var(--t0); font-weight: 500; }
.hero-strip > div { display: flex; align-items: baseline; gap: 8px; }
.hero-strip > div::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--champ); align-self: center; flex: none;
  box-shadow: 0 0 8px var(--champ-dim);
}

/* ---------- sections + exhibit tabs ---------- */
body { counter-reset: exhibit; }
section {
  padding: clamp(90px, 14vh, 170px) 0;
  border-top: 1px solid var(--line);
  position: relative;
  counter-increment: none;
}
section:not(.cta-band):not(.manifesto) { counter-increment: exhibit; }
section::before {
  content: "EXHIBIT " counter(exhibit, decimal-leading-zero);
  position: absolute; top: 0; right: var(--edge); transform: translateY(-50%);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em;
  color: var(--champ-deep); border: 1px solid var(--line);
  background: var(--void); padding: 5px 12px;
  z-index: 2; /* above the hero's readability gradient (root-context z1) */
}
section.cta-band::before, section.manifesto::before { display: none; } /* editorial pull-quote + close carry no exhibit badge */
.sec-head { max-width: 780px; margin-bottom: clamp(48px, 7vh, 80px); }
.sec-head h2 {
  font-family: var(--f-display);
  font-size: clamp(32px, 4.4vw, 56px);
  letter-spacing: -0.015em; line-height: 1.08; font-weight: 380;
  font-variation-settings: "opsz" 100; text-wrap: balance;
}
.sec-head p { margin-top: 20px; color: var(--t1); font-size: 17.5px; max-width: 660px; text-wrap: pretty; }

/* ---------- hairline grid (Midnight Ledger signature) ---------- */
.grid-2, .grid-3, .steps {
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px; overflow: clip;
}
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3, .steps { grid-template-columns: repeat(3, 1fr); }
.card {
  position: relative;
  background: linear-gradient(180deg, var(--ink) 0%, var(--band) 100%);
  padding: 34px 30px 36px;
  transition: background 500ms var(--ease);
}
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* cursor-following spotlight (motion.js drives --mx/--my); JS-less fallback = top glow */
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), var(--champ-glow), transparent 68%);
  opacity: 0; transition: opacity 500ms var(--ease);
}
.card:hover::after { opacity: 1; }
.card > * { position: relative; z-index: 1; }
.card h3 {
  font-family: var(--f-body); font-size: 18px;
  letter-spacing: -0.01em; margin-bottom: 12px; font-weight: 700;
  color: var(--t0); /* was #fff — the lone cold white; now on the warm bone ramp */
}
.card p { color: var(--t1); font-size: 15px; line-height: 1.7; text-wrap: pretty; }
.card .tag {
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--champ); display: block; margin-bottom: 16px;
}
.card .more {
  margin-top: 20px; display: inline-block;
  font-size: 14px; font-weight: 700; color: var(--champ);
  transition: color 300ms var(--ease);
}
a.card:hover .more, .more:hover { color: var(--champ-bright); }

/* lane cards */
.lane h3 { font-family: var(--f-display); font-weight: 420; font-size: clamp(22px, 2.2vw, 27px); }
.lane ul { margin-top: 20px; padding: 0; list-style: none; }
.lane li {
  padding: 12px 0 12px 28px; position: relative;
  color: var(--t1); font-size: 15px;
  border-top: 1px solid var(--line);
}
.lane li::before {
  content: "→"; position: absolute; left: 0;
  color: var(--champ-deep); font-family: var(--f-mono);
}

/* ---------- ledger table ---------- */
.table-wrap {
  overflow-x: auto; border: 1px solid var(--line); border-radius: 8px;
  background: var(--ink);
}
table.map { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
table.map th, table.map td { text-align: left; padding: 18px 24px; vertical-align: top; }
table.map th {
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--champ-deep); background: var(--band);
  border-bottom: 1px solid var(--line-2);
}
table.map td { border-bottom: 1px solid var(--line); color: var(--t1); }
table.map tr:last-child td { border-bottom: none; }
table.map td:first-child { color: var(--t0); font-weight: 600; }
table.map tbody tr { transition: background 300ms var(--ease); }
table.map tbody tr:hover { background: var(--champ-glow); }
/* light theme: --champ-glow is near-invisible on cream — match the card-spotlight fix */
[data-theme="light"] table.map tbody tr:hover { background: rgba(143, 100, 40, 0.10); }

/* ---------- steps ---------- */
.steps { counter-reset: step; }
.step { counter-increment: step; }
.step h3::before {
  content: "0" counter(step);
  font-family: var(--f-mono); font-size: 12px;
  color: var(--champ); letter-spacing: 0.16em;
  display: block; margin-bottom: 16px; font-weight: 400;
}

/* ---------- case studies ---------- */
.case {
  display: grid; grid-template-columns: 230px 1fr; gap: 48px;
  padding: clamp(40px, 6vh, 64px) 0; border-top: 1px solid var(--line);
  position: relative;
}
.case:first-of-type { border-top: none; padding-top: 0; }
.case-meta { font-family: var(--f-mono); font-size: 12px; color: var(--t3); letter-spacing: 0.05em; }
.case-meta b {
  display: block; color: var(--champ); margin-bottom: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; font-size: 10.5px;
}
.case h3 { font-family: var(--f-display); font-size: clamp(23px, 2.4vw, 29px); letter-spacing: -0.01em; margin-bottom: 14px; font-weight: 420; }
.case h3 span { font-style: italic; color: var(--champ-bright); font-weight: 380; }
.case p { color: var(--t1); font-size: 16px; max-width: 660px; text-wrap: pretty; }
.case .facts { margin-top: 22px; display: flex; gap: 32px; flex-wrap: wrap; }
.case .facts div { font-family: var(--f-mono); font-size: 12px; color: var(--t3); }
.case .facts div b { display: block; font-size: 14.5px; color: var(--t0); font-weight: 500; margin-bottom: 2px; }

/* ---------- honesty note (evidence aside) ---------- */
.note {
  border: 1px solid var(--champ-dim); border-left: 2px solid var(--champ);
  border-radius: 8px; padding: 22px 28px;
  color: var(--t1); background: var(--ink);
  font-family: var(--f-display); font-style: italic; font-weight: 380;
  font-size: 16.5px; line-height: 1.75;
}

/* ---------- CTA band (the close) ---------- */
.cta-band { text-align: center; padding: clamp(110px, 18vh, 190px) 0; overflow: clip; position: relative; }
.cta-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 55% at 50% 100%, rgba(201, 154, 85, 0.13), transparent 70%);
}
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band h2 {
  font-family: var(--f-display);
  font-size: clamp(34px, 5vw, 62px); letter-spacing: -0.015em;
  font-weight: 380; line-height: 1.08;
  font-variation-settings: "opsz" 144;
  max-width: 840px; margin-inline: auto; text-wrap: balance;
}
.cta-band p { margin-top: 20px; color: var(--t1); font-size: 17.5px; max-width: 560px; margin-inline: auto; text-wrap: pretty; }
.cta-band .btn { margin-top: 40px; }
.cta-band .mail {
  display: block; margin-top: 22px;
  font-family: var(--f-mono); font-size: 12.5px; color: var(--t3); letter-spacing: 0.04em;
}
.cta-band .mail a { color: var(--champ); }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); padding: 52px 0 64px; }
.foot {
  display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  font-size: 14px; color: var(--t3);
}
.foot .cols { display: flex; gap: 40px; flex-wrap: wrap; }
.foot a { transition: color 300ms var(--ease); }
.foot a:hover { color: var(--champ); }
.foot .mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; }

/* ============================================================
   LIGHT MODE — "Instrument Light" (the house's daylight sibling)
   Warm gallery paper, deep-navy ink, burnished-gold accents.
   Default theme; toggle sits beside the language switch.
   ============================================================ */
[data-theme="light"] {
  --void: #F5F1E8;
  --ink: #FBF8F1;
  --band: #F0EADB;
  --line: rgba(24, 34, 68, 0.13);
  --line-2: rgba(24, 34, 68, 0.26);

  --champ: #8F6428;
  --champ-bright: #9C5510;
  --champ-deep: #7A5216; /* was #A87833 (3.2:1) — darkened to pass AA on cream */
  --champ-dim: rgba(143, 100, 40, 0.55);
  --champ-glow: rgba(169, 135, 66, 0.12);

  --t0: #131A30;
  --t1: #3A4360;
  --t2: #545E7C;
  --t3: #566080; /* was #6B7590 (4.07:1) — darkened to pass AA 4.5:1 on cream */
}
[data-theme="light"] body { color-scheme: light; }
[data-theme="light"] body::before { opacity: 0.035; mix-blend-mode: multiply; }
[data-theme="light"] body::after {
  background: radial-gradient(ellipse 120% 90% at 50% 10%, transparent 55%, rgba(190, 176, 145, 0.28) 100%);
}
[data-theme="light"] ::selection { background: #16213D; color: #F6DCAE; }
[data-theme="light"] .cursor-dot { background: #8F6428; }
[data-theme="light"] .cursor-ring { border-color: rgba(143, 100, 40, 0.5); }
[data-theme="light"] .cursor-ring.is-hover { border-color: rgba(122, 82, 22, 0.9); background: rgba(169, 135, 66, 0.10); }
[data-theme="light"] .hud i { border-color: rgba(143, 100, 40, 0.45); }
[data-theme="light"] .nav-inner {
  background: rgba(251, 248, 241, 0.72);
  box-shadow: 0 20px 60px -24px rgba(24, 34, 68, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
[data-theme="light"] .nav.is-scrolled .nav-inner {
  box-shadow: 0 26px 70px -22px rgba(24, 34, 68, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
[data-theme="light"] .nav-cta,
[data-theme="light"] .btn-primary { background: #16213D; color: #F6DCAE; }
[data-theme="light"] .nav-cta { color: #F6DCAE !important; }
[data-theme="light"] .nav-cta::after,
[data-theme="light"] .btn-primary .ic { background: rgba(246, 220, 174, 0.16); }
[data-theme="light"] .nav-cta:hover,
[data-theme="light"] .btn-primary:hover { background: #0F1D3E; }
[data-theme="light"] .btn-ghost .ic { background: rgba(24, 34, 68, 0.07); }
[data-theme="light"] .hero::before {
  background:
    radial-gradient(ellipse 55% 45% at 72% 18%, rgba(169, 135, 66, 0.14), transparent 65%),
    linear-gradient(180deg, rgba(245, 241, 232, 0.35) 0%, rgba(245, 241, 232, 0.0) 35%, rgba(245, 241, 232, 0.9) 92%, var(--void) 100%);
}
[data-theme="light"] .card { background: linear-gradient(180deg, var(--ink) 0%, var(--band) 100%); }
[data-theme="light"] .card h3 { color: #10152A; }
[data-theme="light"] .card .tag, [data-theme="light"] .card .more { color: #7A5216; }

/* ---------- official logo, theme-aware ---------- */
.logo-img { display: block; width: auto; }
.nav-logo { display: inline-flex; align-items: center; }
.logo-on-light { display: none; }
[data-theme="light"] .logo-on-dark { display: none; }
[data-theme="light"] .logo-on-light { display: block; }

/* ---------- theme switch state (geometry via --tx; scoped to
   .theme-toggle so it never moves the language pill). ---------- */
[data-theme="dark"] .theme-toggle { --tx: var(--cell); }
[data-theme="light"] .theme-toggle .tt-sun { color: var(--tt-active-ink); transition-delay: 40ms; }
[data-theme="dark"] .theme-toggle .tt-moon { color: var(--tt-active-ink); transition-delay: 40ms; }

/* ---------- reveal states (GSAP takes over; CSS fallback) ---------- */
.rv { opacity: 0; transform: translateY(46px); }
.no-js .rv, .no-motion .rv { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .grid-2, .grid-3, .steps { grid-template-columns: 1fr; }
  .case { grid-template-columns: 1fr; gap: 18px; }
  .nav { top: 12px; }
  .nav-inner { gap: 14px; padding: 8px 10px 8px 18px; }
  .nav-links { gap: 14px; }
  .hero { min-height: auto; padding-top: 140px; }
  section::before { right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; }
  .cursor-dot, .cursor-ring { display: none; }
  body, a, button { cursor: auto; }
}

/* ============================================================
   MONGOLIAN TYPE TUNING — Cyrillic runs wider and taller than
   Fraunces Latin; Literata carries the Cyrillic glyphs (incl. the
   cyrillic-ext Ө/Ү faces Playfair Display lacked on Google Fonts).
   When the document is in Mongolian, ease the display metrics
   so headlines sit as confidently as the English ones.
   ============================================================ */
html[lang="mn"] .hero h1 {
  font-size: clamp(38px, 6vw, 76px);
  line-height: 1.1; letter-spacing: -0.01em;
  font-weight: 480;
}
html[lang="mn"] .sec-head h2,
html[lang="mn"] .cta-band h2 {
  line-height: 1.16; letter-spacing: -0.005em; font-weight: 480;
}
html[lang="mn"] .case h3 { line-height: 1.25; font-weight: 480; }
html[lang="mn"] .case h3 span { font-style: normal; font-weight: 480; }
html[lang="mn"] .card h3 { letter-spacing: 0; }
html[lang="mn"] em, html[lang="mn"] .hero h1 em { font-weight: 480; }
html[lang="mn"] .note { line-height: 1.85; }

/* ============================================================
   PORTED FROM v4 "COMMAND CONSOLE" (2026-07-06):
   marquee capability ticker + scrubbed manifesto statement.
   Restyled in Midnight Ledger tokens — theme-aware via vars.
   ============================================================ */

/* ---------- marquee: looping capability ticker ---------- */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  overflow: hidden;
  white-space: nowrap;
  background: var(--ink);
}
.marquee-track { display: inline-flex; will-change: transform; }
.marquee-track span {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t3);
  display: inline-flex;
  align-items: center;
  padding-right: 64px;
}
.marquee-track span::after {
  content: "◆";
  font-size: 7px;
  color: var(--champ);
  opacity: 0.75;
  margin-left: 64px;
}

/* ---------- manifesto: word-scrub statement ---------- */
.manifesto { padding: clamp(110px, 14vw, 200px) 0; }
.manifesto .eyebrow { margin-bottom: 28px; }
.manifesto p {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--t0);
  max-width: 24em;
  text-wrap: balance;
}
.manifesto .w { opacity: 0.13; }
.no-motion .manifesto .w { opacity: 1; }

/* ---------- ported from v4: nav hides on scroll down, returns on scroll up ---------- */
.nav { transition: transform 600ms var(--ease); }
.nav.nav-hidden { transform: translateY(-130%); }

/* ============================================================
   AUDIT FIXES (2026-07-06): a11y, mobile nav, subpage heroes.
   ============================================================ */

/* skip link — visible only on keyboard focus */
.skip-link {
  position: fixed; top: -60px; left: 50%; transform: translateX(-50%);
  z-index: 300; padding: 10px 22px; border-radius: 999px;
  background: var(--champ); color: #070A14; font-weight: 700; font-size: 14px;
  transition: top 300ms var(--ease);
}
.skip-link:focus-visible { top: 14px; }
#main:focus { outline: none; }

/* subpage heroes: no terrain canvas -> compact command header, not 92vh of empty navy */
.hero:not(:has(#hero-canvas)) {
  min-height: 0;
  padding: clamp(140px, 18vh, 190px) 0 clamp(56px, 8vh, 90px);
}
.hero:not(:has(#hero-canvas)) .hero-strip { margin-top: clamp(40px, 5vh, 60px); }

/* light theme: make the card cursor-spotlight actually visible */
[data-theme="light"] .card::after {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(143, 100, 40, 0.16), transparent 68%);
}

/* hidden nav must not trap keyboard focus off-screen */
.nav.nav-hidden { visibility: hidden; transition: transform 600ms var(--ease), visibility 0s 600ms; }
.nav { transition: transform 600ms var(--ease), visibility 0s; }

/* ---------- mobile navigation (hamburger + glass overlay) ---------- */
.menu-toggle {
  display: none;
  position: relative; width: 44px; height: 44px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: none; flex: none;
}
.menu-toggle i {
  position: absolute; left: 11px; right: 11px; height: 1.5px;
  background: var(--t0); border-radius: 2px;
  transition: transform 420ms var(--ease), top 420ms var(--ease);
}
.menu-toggle i:nth-child(1) { top: 17px; }
.menu-toggle i:nth-child(2) { top: 25px; }
.menu-toggle[aria-expanded="true"] i:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] i:nth-child(2) { top: 21px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 0 28px;
  background: rgba(7, 10, 20, 0.82);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  opacity: 0; visibility: hidden;
  transition: opacity 450ms var(--ease), visibility 0s 450ms;
}
.mobile-menu.open { opacity: 1; visibility: visible; transition: opacity 450ms var(--ease), visibility 0s; }
.mobile-menu a {
  font-family: var(--f-display); font-size: clamp(30px, 8vw, 44px);
  color: var(--t0); padding: 10px 0;
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(24px);
  transition: opacity 550ms var(--ease), transform 550ms var(--ease), color 300ms var(--ease);
}
.mobile-menu.open a { opacity: 1; transform: none; }
.mobile-menu.open a:nth-child(1) { transition-delay: 60ms; }
.mobile-menu.open a:nth-child(2) { transition-delay: 120ms; }
.mobile-menu.open a:nth-child(3) { transition-delay: 180ms; }
.mobile-menu.open a:nth-child(4) { transition-delay: 240ms; }
.mobile-menu.open a:nth-child(5) { transition-delay: 300ms; }
.mobile-menu.open a:nth-child(n+6) { transition-delay: 300ms; } /* 6th+ link keeps the cascade, not a 0ms snap */
.mobile-menu a:hover { color: var(--champ); }
.mobile-menu .mm-cta { color: var(--champ); border-bottom: 0; }
[data-theme="light"] .mobile-menu { background: rgba(245, 241, 232, 0.86); }
body.menu-open { overflow: hidden; }

@media (max-width: 900px) {
  .menu-toggle { display: block; }
  /* keep toggles visible; page links live in the overlay */
  .nav-links > a:not(.nav-cta) { display: none; }
  .nav-links { gap: 10px; }
  .nav-inner { padding: 8px 8px 8px 16px; gap: 12px; }
  .nav-cta { padding: 7px 7px 7px 13px; font-size: 12.5px; }
}
@media (min-width: 901px) {
  .mobile-menu { display: none; }
}

@media (max-width: 480px) {
  .nav-inner { gap: 9px; padding: 7px 8px 7px 13px; }
  .nav-logo img { height: 38px; }
  .nav-cta { display: none; } /* CTA remains reachable in the overlay menu */
  .theme-toggle, .lang-toggle { --cell: 27px; }
}

/* ============================================================
   HERO A "POLISHED" (homepage) + footer coordinate ticks
   2026-07-06: live UB clock in the eyebrow, a scroll cue, and a
   deeper theme-aware readability scrim; the coordinate ticks moved
   out of the hero and into the footer.
   ============================================================ */
.hero-home .eyebrow { max-width: 980px; width: 100%; }
.hero-home .eyebrow .ey-clock {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  color: var(--t3); font-size: 11px; letter-spacing: 0.16em;
}
.hero-home .eyebrow .ey-clock b { color: var(--t1); font-weight: 500; font-variant-numeric: tabular-nums; }
.hero-home .live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--champ);
  box-shadow: 0 0 9px var(--champ); flex: none; animation: heroLive 2.4s var(--ease) infinite;
}
@keyframes heroLive { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.32; transform: scale(0.62); } }

.hero-home::before {
  background:
    radial-gradient(ellipse 55% 45% at 74% 16%, rgba(201,154,85,0.15), transparent 64%),
    linear-gradient(100deg, rgba(7,10,20,0.42) 0%, rgba(7,10,20,0.12) 44%, rgba(7,10,20,0) 70%),
    linear-gradient(180deg, rgba(7,10,20,0.28) 0%, rgba(7,10,20,0) 32%, rgba(7,10,20,0.88) 90%, var(--void) 100%);
}
[data-theme="light"] .hero-home::before {
  background:
    radial-gradient(ellipse 55% 45% at 74% 16%, rgba(169,135,66,0.14), transparent 64%),
    linear-gradient(100deg, rgba(245,241,232,0.55) 0%, rgba(245,241,232,0.15) 44%, rgba(245,241,232,0) 70%),
    linear-gradient(180deg, rgba(245,241,232,0.30) 0%, rgba(245,241,232,0) 32%, rgba(245,241,232,0.9) 90%, var(--void) 100%);
}

.hero-home .scrollcue {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.3em;
  color: var(--t3); text-transform: uppercase;
}
.hero-home .scrollcue .bar { width: 1px; height: 42px; background: rgba(180,196,230,0.16); position: relative; overflow: hidden; }
[data-theme="light"] .hero-home .scrollcue .bar { background: rgba(24,34,68,0.16); }
.hero-home .scrollcue .bar::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 46%;
  background: linear-gradient(var(--champ), transparent); animation: heroScroll 1.9s var(--ease) infinite;
}
@keyframes heroScroll { 0% { top: -50%; } 100% { top: 150%; } }
@media (max-width: 900px) { .hero-home .scrollcue { display: none; } }

/* coordinate ticks now live in the footer */
.foot-coords { color: var(--champ-deep); }

/* work.html honesty-note gap: fluid, not a hardcoded 56px */
.case-note { margin-top: clamp(40px, 6vh, 64px); }

@media (prefers-reduced-motion: reduce) {
  .hero-home .live-dot, .hero-home .scrollcue .bar::after { animation: none; }
}