@font-face { font-family: "Cinzel"; font-weight: 600; font-display: swap; src: url("/fonts/cinzel-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  --navy: #101827;
  --navy-2: #172338;
  --gold: #d9a441;
  --gold-ink: #8a6210;
  --bg: #f7f8fa;
  --surface: #ffffff;
  --band: #eef1f5;
  --ink: #101827;
  --muted: #566479;
  --line: #dfe3ea;
  --on-dark: #f1f4f8;
  --on-dark-muted: #b4bfce;
}

@media (prefers-color-scheme: dark) {
  :root {
    --gold-ink: #e6b95e;
    --bg: #0b111c;
    --surface: #131c2c;
    --band: #101827;
    --ink: #eef1f6;
    --muted: #a6b2c3;
    --line: #26324a;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.65 "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
}

h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(72rem, 100% - 2rem); margin-inline: auto; }
@media (min-width: 40rem) { .wrap { width: min(72rem, 100% - 4rem); } }

.skip { position: absolute; left: -999px; top: 0.5rem; z-index: 2; padding: 0.5rem 1rem; background: var(--gold); color: var(--navy); }
.skip:focus { left: 0.5rem; }

/* Hero */
.hero-band { background: radial-gradient(60rem 30rem at 85% -10%, #223352 0%, transparent 70%), var(--navy); color: var(--on-dark); }
.topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding-block: 1.25rem; }
.brand { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; font: 600 1.125rem "Cinzel", serif; letter-spacing: 0.14em; }
.brand svg { width: 1.875rem; height: 1.875rem; }
nav { display: flex; align-items: center; gap: 0.25rem 1.25rem; flex-wrap: wrap; }
.nav-link { color: var(--on-dark-muted); text-decoration: none; font-size: 0.9375rem; }
.nav-link:hover { color: var(--on-dark); }

.hero { padding-block: clamp(3rem, 9vw, 6.5rem) clamp(3.5rem, 9vw, 7rem); }
.status { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--on-dark-muted); font-size: 0.9375rem; }
.status span { width: 0.5rem; height: 0.5rem; background: var(--gold); transform: rotate(45deg); }
h1 { max-width: 19ch; margin-top: 1.25rem; font: 600 clamp(2.25rem, 6.2vw, 4.25rem)/1.12 "Cinzel", serif; letter-spacing: 0.005em; text-wrap: balance; }
.lead { max-width: 38rem; margin-top: 1.5rem; color: var(--on-dark-muted); font-size: clamp(1.0625rem, 2vw, 1.25rem); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.5rem 1.25rem; border-radius: 0.375rem; border: 1px solid transparent; font-weight: 600; font-size: 0.9375rem; text-decoration: none; transition: background-color 0.15s, border-color 0.15s; }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: #e6b95e; }
.btn-ghost { border-color: #3a4a66; color: var(--on-dark); }
.btn-ghost:hover { border-color: var(--gold); }

/* A wall of merlons, echoing the sidebar of the app. */
.battlement { height: 1rem; background: repeating-linear-gradient(90deg, var(--bg) 0 1.75rem, transparent 1.75rem 3.5rem); }

/* Sections */
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
h2 { font: 600 clamp(1.625rem, 3.6vw, 2.375rem)/1.2 "Cinzel", serif; text-wrap: balance; }
h2.eyebrow { font: 600 0.8125rem "IBM Plex Sans", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink); }
h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.section-lead { max-width: 40rem; margin-top: 0.75rem; color: var(--muted); }

.pillars { display: grid; gap: 2rem 3rem; margin-top: 1.75rem; }
.pillars article { border-top: 2px solid var(--gold); padding-top: 1rem; }
.pillars p { margin-top: 0.5rem; color: var(--muted); }
@media (min-width: 52rem) { .pillars { grid-template-columns: repeat(3, 1fr); } }

.band { background: var(--band); }

.flow { display: grid; gap: 0.75rem; margin-top: 2rem; counter-reset: step; }
.flow li { position: relative; display: grid; gap: 0.25rem; padding: 1.125rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: 0.5rem; }
.flow strong { font-size: 1.0625rem; }
.flow span { color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.flow li:last-child { border-color: var(--gold); }
@media (min-width: 52rem) {
  .flow { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  .flow li:not(:last-child)::after { content: ""; position: absolute; top: 1.625rem; right: -1.25rem; width: 1rem; height: 2px; background: var(--gold); }
}

.branches { display: grid; gap: 1.25rem 3rem; margin-top: 2.5rem; }
.branches dt { font-weight: 600; }
.branches dd { color: var(--muted); font-size: 0.9375rem; }
@media (min-width: 52rem) { .branches { grid-template-columns: repeat(3, 1fr); } }

.split { display: grid; gap: 2.5rem; align-items: start; }
.split p { margin-top: 0.875rem; color: var(--muted); }
.split aside { padding: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 0.5rem; }
.split aside p.note { font-size: 0.9375rem; }
.nope { display: grid; gap: 0.5rem; margin-top: 0.875rem; }
.nope li { position: relative; padding-left: 1.5rem; font-size: 0.9688rem; }
.nope li::before { content: "×"; position: absolute; left: 0; font-weight: 600; color: var(--gold-ink); }
@media (min-width: 52rem) { .split { grid-template-columns: 3fr 2fr; gap: 4rem; } }

.roadmap { display: grid; margin-top: 2rem; }
.roadmap li { display: grid; gap: 0.25rem 1.5rem; padding-block: 1.125rem; border-top: 1px solid var(--line); }
.roadmap p { color: var(--muted); font-size: 0.9688rem; }
.tag { align-self: start; width: fit-content; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.roadmap .done .tag { color: var(--gold-ink); }
.roadmap .next .tag { color: var(--ink); }
@media (min-width: 40rem) { .roadmap li { grid-template-columns: 7rem 1fr; } .tag { padding-top: 0.125rem; } }

.footer { padding-block: 2rem; background: var(--navy); color: var(--on-dark-muted); }
.legal { font-size: 0.875rem; }
.legal + .legal { margin-top: 0.5rem; }

.notfound { min-height: 100svh; display: grid; place-items: center; background: var(--navy); color: var(--on-dark); text-align: center; }
.notfound h1 { max-width: none; margin-bottom: 1.5rem; font-size: clamp(1.75rem, 5vw, 2.75rem); }