/* apexpredictive.com — the entire design system.
   ---------------------------------------------------------------------------
   The premise draws the palette. Before convergence, the future is many and
   dim: cool gray-blue traces on a near-black indigo night. At convergence
   there is exactly one warm thing in the world — the published prediction.
   So GOLD IS EARNED: it appears where consensus has formed (the converged
   line, the published board, a judged HIT) and nowhere else. Chrome never
   gets it. If you are about to paint something gold, ask what converged.

   Dark is the default — the engine deliberates at night. The light theme is
   Monday morning: a broadsheet — warm paper, hard ink, the same gold now
   printed as foil rather than glow.

   Type is half the identity: Fraunces speaks (an oracle needs a serif),
   Inter explains, JetBrains Mono keeps score. Numbers are always mono.

   Contrast: every value used for readable text was measured against the
   ground it is actually painted on. The ratios are noted beside the tokens.
   Do not introduce a color here without measuring it. */

/* ── Tokens ───────────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  /* Grounds — the night. */
  --ground:        #0A0A12;   /* deep indigo black                            */
  --ground-2:      #10101C;   /* recessed panels                              */
  --panel:         #14141F;
  --ink:           #EDE9E0;   /* warm white, 15.6:1 on --ground               */
  --ink-muted:     #9C97A8;   /* 6.9:1 on --ground                            */
  --rule:          #201F2E;
  --rule-strong:   #3B3852;

  /* Fixed grounds. These do not flip with the theme — the deliberation room
     has no morning. Only the surface ground changes between dark and light. */
  --night:         #0D0C16;   /* board and engine bands                       */
  --void:          #060609;   /* the footer and the deepest bands             */

  /* Text painted on a fixed ground. */
  --on-void:       #EAE6DD;   /* 15.4:1 on --night                            */
  --on-void-muted: #9A95A6;   /* 6.9:1 on --night                             */
  --rule-void:     #1C1B29;
  --panel-void:    #131220;

  /* The gold — consensus only. */
  --gold:          #E7B94D;   /* 10.2:1 on --ground; large or bold text       */
  --gold-ink:      var(--gold);  /* the light theme swaps in a printable cut  */
  --gold-soft:     rgba(231, 185, 77, 0.14);

  /* The judged-miss red. Used only on a MISS chip, because honesty needs a
     color too. 5.1:1 on --night for bold small text. */
  --miss:          #E08573;

  --accent:        var(--gold);
  --accent-ink:    var(--gold-ink);

  /* Type. Three families, three roles: Fraunces carries display, Inter
     carries body, JetBrains Mono carries every figure, label and score. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-display: clamp(2.7rem, 1.1rem + 6.0vw, 5.75rem);
  --t-h1:      clamp(2.1rem, 1.2rem + 3.6vw, 3.7rem);
  --t-h2:      clamp(1.65rem, 1.15rem + 2.1vw, 2.55rem);
  --t-h3:      clamp(1.12rem, 1rem + 0.6vw, 1.4rem);
  --t-lead:    clamp(1.075rem, 1rem + 0.55vw, 1.3rem);
  --t-body:    1.0625rem;
  --t-small:   0.875rem;
  --t-label:   0.6875rem;

  /* Space — a 4px base on a roughly modular ramp. */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  --measure: 62ch;
  --shell: 76rem;
  --radius: 3px;
  --radius-lg: 6px;

  --band-y: clamp(4.5rem, 9vw, 8.5rem);
}

[data-theme="light"] {
  color-scheme: light;
  /* Monday morning: the broadsheet. */
  --ground:      #F7F3EA;
  --ground-2:    #EFE9DC;
  --panel:       #FFFDF8;
  --ink:         #16130E;   /* 15.3:1 on --ground */
  --ink-muted:   #5D5748;   /* 6.0:1 on --ground  */
  --rule:        #DCD4C4;
  --rule-strong: #B3A98F;
  /* Gold glows on the night; on paper it prints. */
  --gold-ink:    #8A6410;   /* 4.8:1 on --ground, 5.2:1 on --panel */
  --accent-ink:  #8A6410;
  --gold-soft:   rgba(138, 100, 16, 0.12);
  --miss:        #A4432F;   /* 6.2:1 on --ground */
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --ground:      #F7F3EA;
    --ground-2:    #EFE9DC;
    --panel:       #FFFDF8;
    --ink:         #16130E;
    --ink-muted:   #5D5748;
    --rule:        #DCD4C4;
    --rule-strong: #B3A98F;
    --gold-ink:    #8A6410;
    --accent-ink:  #8A6410;
    --gold-soft:   rgba(138, 100, 16, 0.12);
    --miss:        #A4432F;
  }
}

/* ── Reset and base ───────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.68;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 560;
  font-variation-settings: "opsz" 108;
  line-height: 1.05;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--s-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.skip-link {
  position: absolute; left: var(--s-4); top: -4rem; z-index: 100;
  background: var(--ink); color: var(--ground);
  padding: var(--s-3) var(--s-5); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: var(--t-small);
  text-decoration: none; transition: top 140ms ease;
}
.skip-link:focus { top: var(--s-4); }

/* ── Layout primitives ────────────────────────────────────────────────────── */

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

@media (min-width: 60rem) {
  .shell { width: min(100% - 5rem, var(--shell)); }
}

.band {
  padding-block: var(--band-y);
  position: relative;
}

/* A night band paints a fixed deep ground in BOTH themes and switches its
   own text colors with it. */
.band--night {
  background: var(--night);
  color: var(--on-void);
  --ink: var(--on-void);
  --ink-muted: var(--on-void-muted);
  --rule: var(--rule-void);
  --rule-strong: #34324A;
  --panel: var(--panel-void);
  --ground-2: #11101C;
  --accent-ink: var(--gold);
  --gold-ink: var(--gold);
}
.band--void {
  background: var(--void);
  color: var(--on-void);
  --ink: var(--on-void);
  --ink-muted: var(--on-void-muted);
  --rule: #16151F;
  --rule-strong: #2A2839;
  --panel: #0C0B13;
  --ground-2: #0A0910;
  --accent-ink: var(--gold);
  --gold-ink: var(--gold);
}
.band--recessed { background: var(--ground-2); }

/* ── The verdict rule ─────────────────────────────────────────────────────
   Every section is headed like a line in a settlement sheet: a hairline,
   interrupted by the section's name on the left and a fact on the right —
   a publish time, a judgment day, a count. The stamp carries information,
   never 01 / 02 / 03. */

.verdict {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}

.verdict__label,
.verdict__stamp {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  flex: none;
}

.verdict__stamp {
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}

.verdict__line {
  flex: 1 1 auto;
  height: 1px;
  min-width: var(--s-5);
  background: var(--rule);
}

/* A label on its own, where a full verdict rule would be too much furniture. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--s-4);
}

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

.muted { color: var(--ink-muted); }

/* ── Masthead ─────────────────────────────────────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 180ms ease;
}
.masthead[data-scrolled="true"] { border-bottom-color: var(--rule); }

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 4.25rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.wordmark svg { width: 1.35rem; height: 1.35rem; flex: none; color: var(--accent-ink); }

.nav { display: none; }

@media (min-width: 56rem) {
  .nav {
    display: flex;
    align-items: center;
    gap: var(--s-5);
  }
}

.nav a {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-muted);
  padding-block: var(--s-2);
  border-bottom: 1px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent-ink);
}

.masthead__actions { display: flex; align-items: center; gap: var(--s-3); }

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: border-color 140ms ease, background 140ms ease;
}
.icon-button:hover { border-color: var(--rule-strong); background: var(--ground-2); }
.icon-button svg { width: 1rem; height: 1rem; }

/* The theme control shows the icon for what a click would DO, so the first
   click always visibly changes something. Dark is the default here, so the
   sun shows unless the visitor has chosen (or prefers) light. */
.icon-button .icon-moon { display: none; }
[data-theme="light"] .icon-button .icon-moon { display: block; }
[data-theme="light"] .icon-button .icon-sun  { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .icon-button .icon-moon { display: block; }
  :root:not([data-theme="dark"]) .icon-button .icon-sun  { display: none; }
}

#nav-toggle { display: inline-grid; }
@media (min-width: 56rem) { #nav-toggle { display: none; } }

.drawer {
  border-top: 1px solid var(--rule);
  background: var(--ground);
}
/* The drawer stays in normal flow and is closed by the `hidden` attribute,
   which nav JS sets on load. An absolutely-positioned panel that defaults to
   open would sit on top of the hero for every visitor with JavaScript off. */
.drawer[hidden] { display: none; }
.drawer ul { list-style: none; margin: 0; padding: var(--s-4) 0 var(--s-5); }
.drawer a {
  display: block;
  padding: var(--s-3) 0;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--rule);
}
.drawer a[aria-current="page"] { color: var(--accent-ink); }
@media (min-width: 56rem) { .drawer { display: none; } }

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.8125rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--ground);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms ease, opacity 140ms ease;
}
.btn:hover { opacity: 0.88; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.5; cursor: progress; }

/* The accent button is the one place chrome borrows the gold — it is the
   button that subscribes you to the published prediction, which is exactly
   what the gold stands for. Near-black text holds 8.9:1 on the gold. */
.btn--accent { background: var(--gold); color: #14100A; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--ghost:hover { border-color: var(--ink); opacity: 1; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-ink);
  border-bottom: 1px solid transparent;
  transition: border-color 140ms ease;
}
.link-arrow::after { content: "→"; transition: transform 160ms ease; }
.link-arrow:hover { border-bottom-color: currentColor; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  background: var(--night);
  color: var(--on-void);
  --ink: var(--on-void);
  --ink-muted: var(--on-void-muted);
  --rule: var(--rule-void);
  --accent-ink: var(--gold);
  --gold-ink: var(--gold);
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* The convergence canvas sits between the photograph and the type. It is
   painted by site.js only when present and motion is allowed. */
.hero__field { position: absolute; inset: 0; z-index: -1; }
.hero__field canvas { width: 100%; height: 100%; }

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(6, 6, 10, 0.88) 0%,
      rgba(6, 6, 10, 0.66) 34%,
      rgba(6, 6, 10, 0.46) 62%,
      rgba(6, 6, 10, 0.80) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(6rem, 15vh, 11rem) clamp(4.5rem, 10vh, 8rem);
  min-height: min(86vh, 46rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero h1 {
  font-size: var(--t-display);
  max-width: 15ch;
  margin-bottom: var(--s-5);
}

.hero .lead { color: var(--on-void); max-width: 46ch; }

.hero__foot {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-void);
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 48rem) {
  .hero__foot { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
}

.hero__fact dt {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-void-muted);
  margin-bottom: var(--s-2);
}
.hero__fact dd {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 520;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--on-void);
}

/* A shorter hero for interior pages. */
.hero--page .hero__inner { min-height: min(64vh, 34rem); }
.hero--page h1 { font-size: var(--t-h1); max-width: 18ch; }

/* ── The Board ────────────────────────────────────────────────────────────
   The product, drawn as a settlement sheet. Rank and consensus in mono,
   statements in body type, judgment as a chip. Gold appears on the sheet
   only where the engine's bar was cleared or a judged HIT stands. */

.board {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.board__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--rule);
}

.board__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
}

.board__stamp {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.board__stamp strong { color: var(--accent-ink); font-weight: 600; }

.board__list { list-style: none; margin: 0; padding: 0; counter-reset: board; }

.board-row {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto auto;
  gap: var(--s-4) var(--s-5);
  align-items: center;
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--rule);
}
.board-row:first-child { border-top: 0; }

.board-row__rank {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.board-row__q {
  margin: 0;
  font-size: var(--t-small);
  font-weight: 520;
  line-height: 1.5;
  max-width: 58ch;
}
.board-row__meta {
  margin: 0.2rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

.board-row__consensus {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 9rem;
}
.conf {
  position: relative;
  width: 5.5rem;
  height: 3px;
  background: var(--rule);
  border-radius: 2px;
  overflow: hidden;
  flex: none;
}
.conf::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--v, 0%);
  background: var(--gold);
  border-radius: 2px;
}
[data-theme="light"] .conf::after { background: var(--gold-ink); }
.board-row__n {
  font-family: var(--font-mono);
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chip {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  color: var(--ink-muted);
  white-space: nowrap;
  justify-self: end;
}
.chip--hit  { background: var(--gold); border-color: var(--gold); color: #14100A; }
.chip--miss { border-color: var(--miss); color: var(--miss); }
.chip--push { border-style: dashed; }

.board__foot {
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

@media (max-width: 46rem) {
  .board-row {
    grid-template-columns: 2.2rem minmax(0, 1fr);
  }
  .board-row__consensus { grid-column: 2; min-width: 0; }
  .chip { grid-column: 2; justify-self: start; }
}

/* ── Council blocks (split content + media) ──────────────────────────────── */

.council {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 62rem) {
  .council { grid-template-columns: 1fr 1.15fr; gap: var(--s-8); }
  .council--flip .council__media { order: -1; }
}

.council__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.council__mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--s-2);
  line-height: 1.05;
}

.council__full {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: var(--s-5);
}

/* ── Prose and content blocks ─────────────────────────────────────────────── */

.stack > * + * { margin-top: var(--s-5); }
.stack-lg > * + * { margin-top: var(--s-7); }

.split {
  display: grid;
  gap: var(--s-6);
}
@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--s-8); }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
}
.card h3 { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.card p { font-size: var(--t-small); line-height: 1.65; color: var(--ink-muted); }

.card__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--s-3);
}

/* A sequence block. Used only where the content genuinely IS ordered — the
   week's cycle, where each step is triggered by the one before it. */
.sequence { list-style: none; margin: 0; padding: 0; }
.sequence > li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--s-5);
  padding-block: var(--s-5);
  border-top: 1px solid var(--rule);
}
.sequence > li:last-child { border-bottom: 1px solid var(--rule); }
.sequence__t {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  padding-top: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.sequence h3 { font-size: var(--t-h3); margin-bottom: var(--s-2); }
.sequence p { font-size: var(--t-small); color: var(--ink-muted); margin: 0; }
@media (max-width: 40rem) {
  .sequence > li { grid-template-columns: 1fr; gap: var(--s-2); }
}

/* Specification list. Deliberately plain: a buyer reading this is checking
   facts, not being sold to. */
.specs { margin: 0; }
.specs > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-1);
  padding-block: var(--s-4);
  border-top: 1px solid var(--rule);
}
.specs > div:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 44rem) {
  .specs > div { grid-template-columns: 16rem 1fr; gap: var(--s-5); align-items: baseline; }
}
.specs dt {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.specs dd { margin: 0; font-size: var(--t-small); line-height: 1.6; }

.callout {
  border-left: 2px solid var(--accent-ink);
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  margin-block: var(--s-6);
}
.callout p {
  font-family: var(--font-display);
  font-weight: 520;
  font-size: var(--t-lead);
  line-height: 1.45;
}

.figure { margin: 0; }
.figure img { width: 100%; border-radius: var(--radius-lg); }
.figure figcaption {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--ink-muted);
  margin-top: var(--s-3);
  max-width: var(--measure);
}

.wide-figure img { aspect-ratio: 16 / 9; object-fit: cover; }

/* ── Forms ────────────────────────────────────────────────────────────────── */

.form { max-width: 34rem; }
.form__row { margin-bottom: var(--s-4); }

.form label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s-2);
}

.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.5;
}
.form textarea { min-height: 8rem; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: var(--ink-muted); opacity: 0.75; }
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible { border-color: var(--accent-ink); }

/* Honeypot. A real visitor never sees it; a bot fills everything it finds. */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.form__status {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  margin-top: var(--s-4);
  min-height: 1.4em;
}
.form__status[data-state="err"] { color: var(--miss); }
.form__status[data-state="ok"]  { color: var(--accent-ink); }

.form__fine {
  font-size: var(--t-small);
  color: var(--ink-muted);
  margin-top: var(--s-4);
  max-width: 48ch;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.footer {
  background: var(--void);
  color: var(--on-void);
  --ink: var(--on-void);
  --ink-muted: var(--on-void-muted);
  --rule: #16151F;
  --accent-ink: var(--gold);
  padding-block: var(--s-8) var(--s-6);
}

.footer__grid {
  display: grid;
  gap: var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 48rem) {
  .footer__grid { grid-template-columns: 1.4fr repeat(2, 1fr); gap: var(--s-7); }
}

.footer h2 {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-void-muted);
  margin-bottom: var(--s-4);
}

.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li + li { margin-top: var(--s-3); }
.footer a { color: var(--on-void); text-decoration: none; font-size: var(--t-small); }
.footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

.footer__legal {
  padding-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--on-void-muted);
}
.footer__legal p { max-width: 68ch; margin: 0; }

.footer__note {
  margin-top: var(--s-5);
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--on-void-muted);
  max-width: 76ch;
}

/* ── Reveal ────────────────────────────────────────────────────────────────
   MUST fail toward visible. Content is hidden only when JS has run (`.js`),
   only when motion is allowed, and site.js additionally reveals everything
   unconditionally on a timer in case the observer never fires. A blank page
   below the fold is a far worse defect than an un-animated one. */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }
  .js .reveal.is-in { opacity: 1; transform: none; }
}