/* PrivateOps — shared tokens + base. Greyscale, black to white, plus one gold for highlights only (brand kit v2). */
:root {
  --void: #070707;      /* page field */
  --carbon: #0e0e0e;    /* sunken panels */
  --ink: #151515;       /* raised panels */
  --graphite: #1d1d1d;  /* hover / pressed surfaces */
  --rule: #2b2b2b;      /* hairlines on dark */
  --steel: #3d3d3d;     /* strong lines, bar fills */
  --ash: #6b6b6b;       /* graphics + disabled only, never body text */
  --smoke: #8f8f8f;     /* secondary text on dark */
  --fog: #b4b4b4;       /* body text on dark */
  --mist: #d6d6d6;      /* hairlines on light */
  --paper: #ededed;     /* light section field */
  --chalk: #f7f7f7;     /* primary text on dark, light panels */
  --white: #ffffff;
  --gold: #c9a227;      /* highlights only: the slot, where you are, the one number. Never body text, buttons or the mark */
  --gold-deep: #8a6a10; /* gold on light grounds: lines and squares only (4.3:1 on Paper, too low for small text) */

  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --gutter: clamp(20px, 5vw, 72px);
  --max: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--void);
  color: var(--fog);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--white); color: var(--void); }

/* film grain, very low: gives black some tooth */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  opacity: .05; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* focus: one rule everywhere */
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.on-light :focus-visible { outline-color: var(--void); }

/* ---------- type ---------- */
.display { font: 400 clamp(3.4rem, 10.5vw, 9.5rem)/.9 var(--serif); letter-spacing: -.025em; color: var(--white); margin: 0; }
h2.title { font: 400 clamp(2.2rem, 5vw, 4rem)/1 var(--serif); letter-spacing: -.02em; color: var(--white); margin: 0; }
.label { font: 500 .75rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--smoke); }
.lede { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.5; color: var(--fog); max-width: 38ch; }
.num { font-variant-numeric: tabular-nums; }

/* the slot: the mark's cut, reused as a period / divider / bullet */
.slot { display: inline-block; width: .16em; height: .16em; background: var(--gold); margin-left: .04em; }
.on-light .slot { background: var(--gold-deep); }
.gold { color: var(--gold); }

/* redaction bar */
.redact {
  position: relative; display: inline-block; padding-inline: .12em; color: transparent;
  background: var(--white); border-radius: 0; user-select: none; transition: background .25s, color .25s;
}
.reveal-names .redact { background: transparent; color: inherit; user-select: auto; box-shadow: inset 0 -2px 0 var(--steel); }

/* ---------- buttons ---------- */
.btn {
  appearance: none; border: 1px solid var(--white); background: var(--white); color: var(--void);
  font: 600 .9375rem/1 var(--sans); letter-spacing: .01em; padding: 15px 22px; min-height: 48px;
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none;
  border-radius: 0; transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.btn:hover { background: var(--void); color: var(--white); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--white); border-color: var(--ash); }
.btn.ghost:hover { border-color: var(--white); background: var(--graphite); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--graphite); color: var(--ash); border-color: var(--rule); cursor: not-allowed; transform: none; }
.btn .arrow { width: 14px; height: 1px; background: currentColor; position: relative; transition: width .2s; }
.btn .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); }
.btn:hover .arrow { width: 22px; }
.on-light .btn { background: var(--void); color: var(--white); border-color: var(--void); }
.on-light .btn:hover { background: transparent; color: var(--void); }

/* ---------- motion ---------- */
.js .rise { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.js .rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .rise { opacity: 1; transform: none; }
}