/* ==========================================================================
   Balerion — Base: reset, type primitives, shared components
   ========================================================================== */

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

html { background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Film grain — the only texture in the system. Keeps flat dark surfaces alive. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .035;
  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='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

/* [hidden] must beat component display rules (.lead is display:grid, cards are
   display:flex) — otherwise filtering sets the attribute and nothing hides. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--orange); color: #000; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--orange); color: #000; padding: 12px 18px; font-weight: 700;
}
.skip-link:focus { left: 16px; top: 10px; }

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Type primitives ────────────────────────────────────── */
.mono {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mono--ember { color: var(--orange); }
.mono--dim   { color: var(--ink-3); }   /* was --line-2: 1.84:1, under AA */

.display {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' var(--display-wdth), 'wght' var(--display-wght);
  line-height: .88;
  letter-spacing: -.022em;
  text-transform: uppercase;
}
h1.display { font-size: var(--t-h1); }
h2.display { font-size: var(--t-h2); }
h3.display {
  font-size: var(--t-h3);
  font-variation-settings: 'wdth' 104, 'wght' 700;
  line-height: 1.02;
  letter-spacing: -.015em;
}

.lede { font-size: var(--t-lede); color: var(--ink-2); line-height: 1.55; max-width: 56ch; }

/* ── Section head ───────────────────────────────────────── */
.sec { padding-block: var(--sec-y); border-bottom: 1px solid var(--line); position: relative; }
.sec--flush { padding-block: 0; }

.sechead { margin-bottom: clamp(34px, 4.5vw, 62px); }
/* --line-2 is a border colour and put this label at 1.92:1 on the dark ground,
   well under AA. It is not decoration - it carries the section number and name
   the whole page navigates by - so it moves to the quietest ink that still
   passes: 4.95:1 on the dark ground, 5.02:1 on paper. */
.sechead__idx { font-family: var(--f-mono); font-size: var(--t-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.sechead h2 { margin-top: 12px; }
.sechead .lede { margin-top: 16px; }
.sechead--split { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px; flex-wrap: wrap; }
.sechead--split .lede { margin-top: 0; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  font-family: var(--f-body); font-weight: 700; font-size: 13.5px;
  padding: 14px 26px; display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid transparent; position: relative; overflow: hidden;
  border-radius: var(--r-pill);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn__arrow { width: 15px; height: 15px; flex-shrink: 0; transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary { background: var(--orange); color: var(--btn-fg); }
.btn--primary:hover { background: var(--red); color: var(--btn-fg-hover); }

.btn--ghost { border-color: var(--line-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--orange); color: var(--orange); }

.btn--text {
  border-radius: 0;
  padding: 0; font-size: 13.5px; font-weight: 600; display: inline-flex;
  align-items: center; gap: 8px; overflow: visible;
}
.btn--text::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px;
  background: var(--orange); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.btn--text:hover::after { transform: scaleX(1); transform-origin: left; }

/* ── Chip ───────────────────────────────────────────────── */
.chip {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; border: 1px solid var(--line-2); color: var(--ink-2);
  padding: 6px 11px; display: inline-block; border-radius: var(--r-pill);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip--ember { border-color: var(--orange); color: var(--orange); }

/* ── Cookie consent ─────────────────────────────────────── */
/* Sits above the page rather than over it: no overlay, no focus trap, nothing
   blocked. The visitor can ignore it and read the site, which is the point -
   a banner that holds the page hostage is what makes people click Accept
   without reading. Shipped hidden and revealed by JS, because the page comes
   out of a full-page cache and cannot know what this visitor already chose. */
.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: rgba(10, 8, 5, .94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 16px var(--gut);
  transform: translateY(100%);
  transition: transform .45s var(--ease);
}
.cookie.is-open { transform: none; }
@media (prefers-reduced-motion: reduce) { .cookie { transition: none; } }
.cookie__inner {
  max-width: var(--wrap); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px 24px; flex-wrap: wrap;
}
.cookie__copy { font-size: 13.5px; color: var(--ink); max-width: 68ch; }
.cookie__copy a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.cookie__row { display: flex; gap: 10px; flex-shrink: 0; }
.cookie .btn { padding: 11px 22px; }

/* The footer list is links; this one has to be a button because it opens
   something rather than going somewhere. It should not look different for it. */
.footer__linkish {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; text-align: left;
}

/* ── Motion guards ──────────────────────────────────────── */
/* Elements the JS will animate start hidden ONLY when JS is present and motion
   is allowed — so content never disappears if the script fails or is blocked. */
html.js-anim [data-anim] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html.js-anim [data-anim] { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}