/* verumdare.com — the entire design system.
   ---------------------------------------------------------------------------
   The name is bastard Latin — verum dare, to give the truth — and the design
   takes the brief literally: a mirror held up to the record. The site is DARK
   BY DEFAULT because the product's native habitat is an operations floor at
   night: black glass, one lit aisle, instruments that report without
   decoration. The light theme is the other place the product lives — a
   printed dossier: warm paper, hard ink, nothing glossy.

   One accent. The teal of light down fiber (--glass) is the only saturated
   color in the system, and it is reserved for what the platform itself says:
   query results, record stamps, live edges in the graph. Chrome never gets
   it; evidence does.

   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 ops floor. Dark is the default state of this brand. */
  --ground:        #060B10;   /* black glass                                  */
  --ground-2:      #0A121A;   /* recessed panels                              */
  --panel:         #0D1721;
  --ink:           #E7EDF2;   /* 16.4:1 on --ground                           */
  --ink-muted:     #91A3B1;   /* 7.4:1 on --ground                            */
  --rule:          #182634;
  --rule-strong:   #2C455C;

  /* Fixed grounds. These do not flip with the theme — the vault has no
     windows. Only the surface ground above changes between dark and light. */
  --vault:         #081119;   /* deep sections: the graph, the record         */
  --core:          #04070C;   /* the footer and the deepest bands             */

  /* Text painted on a fixed ground. */
  --on-core:       #E3ECF2;   /* 15.1:1 on --vault                            */
  --on-core-muted: #8CA0AF;   /* 6.9:1 on --vault                             */
  --rule-core:     #16283A;
  --panel-core:    #0B1926;

  /* The accent — light down fiber. */
  --glass:         #3FE0CE;   /* 11.9:1 on --ground, 11.1:1 on --vault        */
  --glass-ink:     var(--glass);  /* on light grounds this becomes a deep cut */
  --glass-dim:     #1E8578;   /* large type & decorative on dark only         */

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

  /* Type. Two families, three roles: Space Grotesk carries display and body;
     IBM Plex Mono carries every label, stamp, timestamp and figure. */
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-display: clamp(2.6rem, 1.1rem + 5.8vw, 5.5rem);
  --t-h1:      clamp(2.05rem, 1.2rem + 3.4vw, 3.6rem);
  --t-h2:      clamp(1.6rem, 1.15rem + 2.0vw, 2.5rem);
  --t-h3:      clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
  --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;
  /* The dossier: warm paper and hard ink. */
  --ground:      #F2EFE9;
  --ground-2:    #E9E4DA;
  --panel:       #FBF9F5;
  --ink:         #131C24;   /* 14.6:1 on --ground */
  --ink-muted:   #52616C;   /* 5.6:1 on --ground  */
  --rule:        #D6CFC2;
  --rule-strong: #AFA697;
  /* On paper the fiber teal would glow; the ink cut carries it instead. */
  --glass-ink:   #0B6E63;   /* 5.6:1 on --ground, 6.1:1 on --panel */
  --accent-ink:  #0B6E63;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --ground:      #F2EFE9;
    --ground-2:    #E9E4DA;
    --panel:       #FBF9F5;
    --ink:         #131C24;
    --ink-muted:   #52616C;
    --rule:        #D6CFC2;
    --rule-strong: #AFA697;
    --glass-ink:   #0B6E63;
    --accent-ink:  #0B6E63;
  }
}

/* ── 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: 640;
  line-height: 1.06;
  letter-spacing: -0.025em;
  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);
  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 vault band paints a fixed deep ground in BOTH themes and switches its
   own text colors with it. */
.band--vault {
  background: var(--vault);
  color: var(--on-core);
  --ink: var(--on-core);
  --ink-muted: var(--on-core-muted);
  --rule: var(--rule-core);
  --rule-strong: #2E4B63;
  --panel: var(--panel-core);
  --ground-2: #0A1520;
  --accent-ink: var(--accent);
}
.band--core {
  background: var(--core);
  color: var(--on-core);
  --ink: var(--on-core);
  --ink-muted: var(--on-core-muted);
  --rule: #121E2A;
  --rule-strong: #223649;
  --panel: #070E16;
  --ground-2: #060B12;
  --accent-ink: var(--accent);
}
.band--recessed { background: var(--ground-2); }

/* ── The ledger rule ──────────────────────────────────────────────────────
   Every section is headed the way a registry entry is headed: a hairline,
   interrupted by the collection name on the left and a record stamp on the
   right. The stamp carries real information — an entity class, a temporal
   marker — never 01 / 02 / 03. */

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

.ledger__label,
.ledger__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;
}

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

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

/* A label on its own, where a full ledger 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: 640;
  font-size: 0.9375rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.wordmark svg { width: 1.3rem; height: 1.3rem; 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);
}

.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 always sits near-black text on the teal, which holds
   9.8:1 whatever ground the button lands on. */
.btn--accent { background: var(--accent); color: #04110F; }

.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(--vault);
  color: var(--on-core);
  --ink: var(--on-core);
  --ink-muted: var(--on-core-muted);
  --rule: var(--rule-core);
  --accent-ink: var(--accent);
  overflow: hidden;
  isolation: isolate;
}

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

/* The scrim keeps the type readable where it sits and lets the aisle light
   through below it. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(4, 8, 12, 0.90) 0%,
      rgba(4, 8, 12, 0.70) 34%,
      rgba(4, 8, 12, 0.48) 62%,
      rgba(4, 8, 12, 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: 16ch;
  margin-bottom: var(--s-5);
}

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

.hero__foot {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-core);
  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-core-muted);
  margin-bottom: var(--s-2);
}
.hero__fact dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--on-core);
}

/* 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: 20ch; }

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

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

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

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

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

/* ── The console ──────────────────────────────────────────────────────────
   The product speaks in queries and answers, so the site shows queries and
   answers. A console block is a panel of mono text: the prompt line carries
   the accent, returns are ink, provenance is muted. Nothing in a console is
   an invented statistic — the examples are questions, not measurements. */

.console {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-6);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.75;
  overflow-x: auto;
}

.console__q {
  color: var(--accent-ink);
  white-space: pre-wrap;
  margin: 0;
  max-width: none;
}
.console__q::before { content: "› "; opacity: 0.7; }

.console__a {
  color: var(--ink);
  white-space: pre-wrap;
  margin: 0 0 var(--s-4);
  max-width: none;
}

.console__meta {
  color: var(--ink-muted);
  white-space: pre-wrap;
  margin: 0 0 var(--s-4);
  max-width: none;
  font-size: 0.75rem;
}

/* ── The record timeline ─────────────────────────────────────────────────
   The versioned-entity story, drawn as what it is: a sequence of states of
   the same fact, each carrying the moment it became true. */

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 0.32rem;
  top: 0.5rem;
  bottom: 0.6rem;
  width: 1px;
  background: var(--rule-strong);
}
.timeline > li {
  position: relative;
  padding: 0 0 var(--s-5) var(--s-6);
}
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42rem;
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  background: var(--ground);
  border: 1px solid var(--rule-strong);
}
.timeline > li[data-now]::before {
  background: var(--accent);
  border-color: var(--accent);
}

.timeline__at {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-1);
}
.timeline__fact { font-size: var(--t-small); color: var(--ink); margin: 0; }
.timeline__fact .muted { display: block; font-size: 0.8125rem; }

/* ── The netfield (graph page) ────────────────────────────────────────────
   The graph page runs a full-viewport canvas of the network behind the whole
   page. The canvas is fixed and painted by site.js; every content band on
   that page becomes a translucent veil so the fabric stays visible end to
   end. With JavaScript off (or reduced motion) the canvas is simply absent
   and the page reads on the vault ground — nothing depends on it. */

.netfield {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--core);
}
.netfield canvas { width: 100%; height: 100%; }

.page-graph {
  background: var(--core);
  color: var(--on-core);
  --ink: var(--on-core);
  --ink-muted: var(--on-core-muted);
  --rule: #16232F;
  --rule-strong: #2A4053;
  --panel: rgba(8, 17, 25, 0.82);
  --ground-2: rgba(8, 17, 25, 0.62);
  --accent-ink: var(--accent);
}

.page-graph .band { background: transparent; }
.page-graph .band--veil {
  background: linear-gradient(180deg,
    rgba(4, 7, 12, 0.30) 0%,
    rgba(4, 7, 12, 0.66) 22%,
    rgba(4, 7, 12, 0.66) 78%,
    rgba(4, 7, 12, 0.30) 100%);
}
.page-graph .masthead { background: rgba(4, 7, 12, 0.72); }
.page-graph .card { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* The graph hero holds nothing but type over the moving fabric. */
.graph-hero {
  min-height: min(88vh, 48rem);
  display: flex;
  align-items: flex-end;
  position: relative;
}
.graph-hero .shell { padding-block: clamp(6rem, 16vh, 11rem) clamp(4rem, 9vh, 7rem); }
.graph-hero h1 { font-size: var(--t-display); max-width: 15ch; 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
   collection pipeline, where each stage feeds the one after 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);
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  margin-block: var(--s-6);
}
.callout p { font-size: var(--t-lead); line-height: 1.5; }

.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); }

/* 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: #E88B6B; }
.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(--core);
  color: var(--on-core);
  --ink: var(--on-core);
  --ink-muted: var(--on-core-muted);
  --rule: #121E2A;
  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-core-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-core); 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-core-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-core-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; }
}