/* Tactical HQ landing: "whiteout". Snow ground, ink type, one cobalt accent.
   Content is fully visible with no JS; the .js class (set by main.js) enables pinned scenes. */
:root {
  --snow: #f3f7fa;
  --paper: #fbfdfe;
  --line: #cdd8e3;
  --ink: #0b1220;
  --ink-2: #27344a;
  --muted: #56667c;
  --blue: #1a35e8;
  --blue-1: #7488ff;
  --blue-2: #546dff;
  --blue-3: #3652f0;
  --ok: #0b8f6a;
  --ok-text: #07704f;
  --warn: #e0a100;
  --crit: #d23b25;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;

  /* Theme slots: components read these, so an .ink section re-themes them wholesale. */
  --bg: transparent;
  --fg: var(--ink);
  --fg-2: var(--muted);
  --rule: var(--line);
  --card: var(--paper);
  --accent: var(--blue);
  --accent-soft: #dfe5ff;
  color-scheme: light;
}
.ink {
  --bg: var(--ink);
  --fg: #eef3f9;
  --fg-2: #9fb0c6;
  --rule: #26324a;
  --card: #111b2f;
  --accent: #9fb0ff;
  --accent-soft: #1b2850;
}

* { box-sizing: border-box; }
html { background: var(--snow); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font: 400 clamp(1rem, 0.35vw + 0.92rem, 1.15rem) / 1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.no-gl body { background: radial-gradient(120% 90% at 20% 0%, #fff, var(--snow) 55%, #e4ecf4); }
.gl body { background: transparent; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
a { color: inherit; }
img { display: block; max-width: 100%; }

#fog { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }

/* ---------- chrome ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 30; height: 56px;
  display: none; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 48px);
  color: #fff; mix-blend-mode: difference; pointer-events: none;
  font: 500 0.72rem / 1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.js .bar { display: flex; }
.bar b { font-weight: 500; }
.bar .tick { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- type ---------- */
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.eyebrow {
  margin: 0 0 1rem; color: var(--accent);
  font: 500 0.74rem / 1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.eyebrow i { font-style: normal; color: var(--fg-2); }
h1, h2, h3 { margin: 0; font-weight: 400; }
h2 {
  font: 350 clamp(2rem, min(5vw, 8.2vh), 4.1rem) / 1.03 var(--serif);
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.025em; color: var(--fg); max-width: 16ch;
}
h2 em, .display em { font-style: italic; color: var(--accent); }
.lede { margin: 1.1rem 0 0; max-width: 46ch; color: var(--fg-2); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tag {
  display: inline-block; padding: 0.22rem 0.5rem; border: 1px solid var(--rule); border-radius: 3px;
  font: 500 0.66rem / 1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2);
}
.sr { position: absolute; left: -9999px; }
.note { margin: 1rem 0 0; font: 400 0.72rem / 1.4 var(--mono); color: var(--fg-2); letter-spacing: 0.04em; }

/* ---------- scenes (no-JS = plain flow) ---------- */
.scene { position: relative; background: var(--bg); color: var(--fg); border-top: 1px solid var(--rule); }
.scene:first-of-type { border-top: 0; }
.stage { display: flex; align-items: center; padding: clamp(72px, 12vh, 120px) 0; }
.js .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; padding: 64px 0 24px; align-items: center; align-items: safe center; }
.js .flow .stage, .flow.js .stage { position: static; height: auto; overflow: visible; padding: clamp(72px, 12vh, 120px) 0; }
.head { margin-bottom: clamp(0.9rem, 3.5vh, 2.5rem); }
@media (max-height: 820px) { .scene:not(.hero) .lede { display: none; } }

/* ---------- hero ---------- */
.hero .stage { align-items: center; }
.display {
  margin: 0; font: 300 clamp(2.9rem, 15vw, 8.8rem) / 0.94 var(--serif);
  font-variation-settings: "opsz" 144; letter-spacing: -0.04em; color: var(--ink);
}
.display { transform-origin: 0 50%; }
.display .line { display: block; }
.display .ch { display: inline-block; white-space: pre; will-change: transform, opacity, filter; }
.hero .lede { max-width: 40ch; font-size: clamp(1.02rem, 1.1vw + 0.8rem, 1.35rem); color: var(--ink-2); }
.hint {
  position: absolute; left: clamp(16px, 4vw, 48px); bottom: 28px; display: flex; align-items: center; gap: 0.8rem;
  font: 500 0.7rem / 1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.hint::after { content: ""; width: 56px; height: 1px; background: currentColor; transform-origin: 0 50%; animation: hint 2.4s ease-in-out infinite; }
@keyframes hint { 0%, 100% { transform: scaleX(0.25); } 50% { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) { .hint::after { animation: none; } }
@media (max-width: 700px) { .bar span:nth-child(2) { display: none; } }