/* THE FED · Emergency Session. Concrete ground, ledger ruling, vault ink, one stamp-red accent.
   Colours come from tokens.css (generated from brand/tokens.json). Mobile first: 16px gutter, 64px on desktop.
   Square corners, 2px ink borders, no shadows except the memo sheet. */

@font-face { font-family: 'Big Shoulders Display'; src: url('/brand/fonts/BigShouldersDisplay-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Big Shoulders Display'; src: url('/brand/fonts/BigShouldersDisplay-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Libre Franklin'; src: url('/brand/fonts/LibreFranklin-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Libre Franklin'; src: url('/brand/fonts/LibreFranklin-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Libre Franklin'; src: url('/brand/fonts/LibreFranklin-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url('/brand/fonts/CourierPrime-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url('/brand/fonts/CourierPrime-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --surface: var(--concrete, #D5D6CF);
  --raised: var(--concrete-raised, #E6E7E1);
  --ink: var(--vault, #15171B);
  --ink-muted: var(--vault-muted, #484B50);
  --accent: var(--stamp, #C8231A);
  --accent-text: var(--stamp-deep, #A11A12);
  --on-accent: #FFFFFF;
  --support: var(--ledger, #2D5C46);
  --hair: var(--line, #A7A9A1);
  --line-strong: #6E716B;
  --memo-lift: 0 2px 0 #A7A9A1, 0 18px 40px rgba(21, 23, 27, .18);
  --f-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --f-body: 'Libre Franklin', system-ui, sans-serif;
  --f-mono: 'Courier Prime', 'Courier New', monospace;
  --gutter: 16px;
  --max: 1440px;
  --ruling: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(21, 23, 27, .09) 31px, rgba(21, 23, 27, .09) 32px);
}
@media (min-width: 720px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background-color: var(--surface);
  background-image: var(--ruling);
  color: var(--ink);
  font: 400 16px/1.56 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.band-ink :focus-visible { outline-color: var(--surface); }
strong { font-weight: 600; }
code, .addr, .data { font-family: var(--f-mono); }
hr { border: 0; margin: 0; }
[hidden] { display: none !important; }

.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: 8px; top: -60px; background: var(--ink); color: var(--surface); padding: 8px 12px; z-index: 10; font: 700 14px/1 var(--f-mono); letter-spacing: .1em; }
.skip-link:focus { top: 8px; }

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

/* ---------- type ---------- */
.display-xl, .display-l, .display-m, .display-s, .rb-rate, .ca-drop, .counter-value, .done-title, .step-no {
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase; letter-spacing: .005em;
}
.display-xl { font-size: clamp(44px, 11.6vw, 104px); line-height: .9; }
.display-xl, .display-l, .display-m, .display-s { overflow-wrap: normal; word-break: normal; hyphens: none; }
/* Headlines size to their column, so the longest word ("CONGRATULATIONS.") never breaks or overflows. */
.fit { container-type: inline-size; }
@supports (font-size: 1cqi) {
  .fit .display-xl { font-size: clamp(40px, 13.2cqi, 104px); }
  .fit .display-l { font-size: clamp(36px, 12cqi, 84px); }
}
.display-l { font-size: clamp(40px, 9vw, 84px); line-height: .9; }
.display-m { font-size: clamp(32px, 6vw, 48px); line-height: .92; }
.display-s { font-size: clamp(24px, 4.6vw, 30px); line-height: .95; }
.lead { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.55; }
.small { font-size: 14px; line-height: 1.5; }
.label, .eyebrow { font: 700 12px/1.5 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
@media (min-width: 720px) { .label, .eyebrow { font-size: 14px; } }
.eyebrow { color: var(--ink-muted); margin-bottom: 14px; }
.placeholder { font-family: var(--f-mono); font-weight: 700; letter-spacing: .04em; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 800 15px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  padding: 12px 18px; border: 2px solid transparent; border-radius: 0; cursor: pointer; text-align: center;
}
.btn-stamp { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-stamp:hover { background: var(--accent-text); border-color: var(--accent-text); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--surface); }
.btn-ink { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.btn-ink:hover { background: var(--surface); color: var(--ink); }
.btn-lg { font-size: 16px; padding: 15px 22px; }
.btn-sm { font-size: 13px; padding: 9px 12px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .6; cursor: progress; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 479px) { .cta-row .btn { flex: 1 1 100%; } }

/* ---------- header ---------- */
.site-header { padding-top: 14px; }
.header-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand cta" "nav nav";
  align-items: center; column-gap: 12px; row-gap: 10px; padding-bottom: 12px;
}
.brand { grid-area: brand; display: block; width: clamp(128px, 38vw, 196px); }
.brand img { width: 100%; }
.header-cta { grid-area: cta; font-size: 13px; padding: 10px 12px; }
.site-nav { grid-area: nav; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 700 12px/1.6 var(--f-mono); letter-spacing: .12em; }
.site-nav a { text-decoration: none; padding: 4px 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.site-nav .sep { color: var(--ink-muted); }
.rule-strong { height: 2px; background: var(--ink); }
@media (min-width: 900px) {
  .site-header { padding-top: 24px; }
  .header-row { grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav cta"; padding-bottom: 20px; column-gap: 32px; }
  .site-nav { justify-content: center; font-size: 14px; gap: 8px 14px; }
  .header-cta { font-size: 15px; padding: 12px 18px; }
}

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 26px; padding-bottom: 44px; }
.hero-stamp { width: clamp(214px, 58vw, 380px); margin: 14px 0 0 -6px; }
/* the stamp-slam starts at 2.2x: clip it so phones never get a transient sideways scroll */
.hero { overflow-x: clip; }
@supports not (overflow: clip) { .hero { overflow-x: hidden; } }
.hero-lead { margin-top: 18px; max-width: 36em; }
@media (min-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr) 480px; gap: 56px; padding-top: 52px; padding-bottom: 72px; align-items: start; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-stamp { animation: stamp-slam .5s cubic-bezier(.5, 0, .75, 0) .35s both; transform-origin: 40% 50%; }
  @keyframes stamp-slam {
    0% { opacity: 0; transform: scale(2.2); }
    36% { opacity: 1; transform: scale(1); }
    52% { transform: translate(3px, -2px); }
    68% { transform: translate(-2px, 1px); }
    84% { transform: translate(1px, 0); }
    100% { opacity: 1; transform: none; }
  }
}

/* ---------- rate board (SAMPLE) ---------- */
.rate-board { background: var(--raised); border: 2px solid var(--ink); padding: 16px; align-self: start; }
.rb-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--ink-muted); }
.rb-head .label { font-size: 11px; }
.rb-long { display: none; }
@media (min-width: 480px) { .rb-long { display: inline; } }
.chip-sample { font: 700 12px/1 var(--f-mono); letter-spacing: .14em; color: var(--ink); border: 2px dashed var(--line-strong); padding: 5px 8px; flex: none; }
.rb-main { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.rb-dial { width: clamp(84px, 24vw, 140px); flex: none; }
.rb-k { font-size: 12px; }
.rb-rate { font-size: clamp(56px, 16vw, 92px); line-height: .9; color: var(--accent); }
.rb-move { font-size: 13px; margin-top: 2px; }
.rb-move span { white-space: nowrap; }
.rb-rows { margin-top: 12px; font: 400 15px/1.4 var(--f-mono); }
.rb-rows div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--hair); padding: 9px 0; }
.rb-rows dd { font-weight: 700; }
.rb-rows .neg { color: var(--accent-text); }
.rb-scenario { margin-top: 10px; background: var(--ink); color: var(--surface); padding: 10px 12px; font: 700 13px/1.4 var(--f-mono); letter-spacing: .06em; }
.rb-note { margin-top: 10px; color: var(--ink-muted); }
@media (min-width: 720px) { .rate-board { padding: 24px 26px; } .rb-head .label { font-size: 13px; } .rb-move { font-size: 15px; } .rb-scenario { font-size: 14px; } }

/* ---------- bands ---------- */
.band { border-top: 2px solid var(--ink); }
.band-raised { background-color: var(--raised); background-image: var(--ruling); }
.band-ink { background: var(--ink); color: var(--surface); }
.band-ink .eyebrow { color: var(--night-muted, #A3A69F); }
.section { padding-top: 48px; padding-bottom: 56px; }
@media (min-width: 1100px) { .section { padding-top: 80px; padding-bottom: 88px; } }

/* ---------- $FED / CA ---------- */
.band-token { border-bottom: 2px solid var(--ink); }
.token-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 40px; padding-bottom: 44px; }
.token-head .body { margin-top: 14px; max-width: 34em; }
@media (min-width: 1100px) { .token-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; padding-top: 64px; padding-bottom: 64px; } }
.ca-box { border: 2px solid var(--ink); background: var(--raised); padding: 18px 16px; min-width: 0; }
.ca-label { color: var(--ink-muted); }
.ca-drop { font-size: clamp(36px, 10vw, 64px); line-height: .92; margin-top: 8px; color: var(--accent); }
.ca-code { display: block; margin-top: 10px; padding: 12px; background: var(--surface); border: 2px solid var(--ink); font: 700 15px/1.45 var(--f-mono); word-break: break-all; user-select: all; }
.ca-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ca-note { margin-top: 12px; color: var(--ink-muted); }
.addr-inline { word-break: break-all; font-weight: 700; }
@media (min-width: 720px) { .ca-box { padding: 24px 26px; } .ca-code { font-size: 17px; } }

/* ---------- stimulus memo ---------- */
.stimulus-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 1100px) { .stimulus-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; align-items: start; } }
.memo {
  background: var(--raised); box-shadow: var(--memo-lift); padding: 22px 18px 26px;
  transform: rotate(-1.2deg); margin: 6px 4px 0;
}
@media (min-width: 720px) { .memo { padding: 34px 38px 38px; } }
.memo-head { color: var(--ink-muted); font-size: 11px; border-bottom: 1px solid var(--hair); padding-bottom: 10px; }
@media (min-width: 720px) { .memo-head { font-size: 13px; } }
.memo-to { margin: 12px 0 18px; font: 400 16px/1.6 var(--f-mono); }
.memo-to div { display: flex; gap: 10px; }
.memo-to dt { width: 4.5em; flex: none; color: var(--ink-muted); }
.memo .display-l { margin-bottom: 10px; }
.memo p + p { margin-top: 12px; }
.memo .lead { font-family: var(--f-mono); font-weight: 700; }
.memo-sign { border-top: 1px solid var(--hair); padding-top: 12px; }
.counter { border: 2px solid var(--ink); padding: 18px 16px; }
.counter-value { font-size: clamp(26px, 7vw, 40px); line-height: 1; margin: 8px 0 8px; }
.counter-value .placeholder { font-family: var(--f-display); font-weight: 900; letter-spacing: .01em; }
.counter .small { color: var(--ink-muted); }
.facts { margin-top: 20px; }
.facts div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; border-top: 1px solid var(--hair); padding: 10px 0; }
.facts div:last-child { border-bottom: 1px solid var(--hair); }
.facts dt { font: 700 12px/1.6 var(--f-mono); letter-spacing: .12em; color: var(--ink-muted); }
.facts dd { font-size: 15px; }

/* ---------- how it works ---------- */
.steps { margin-top: 28px; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-content: start; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.step-no { font-size: 36px; line-height: .9; color: var(--ink-muted); }
.steps p { margin-top: 6px; max-width: 40em; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 0; gap: 20px; }
  .steps li { grid-template-columns: 1fr; border-top: 2px solid var(--ink); border-bottom: 0; padding-top: 16px; }
  .step-no { font-size: 48px; }
}

/* ---------- season 0 + charter form ---------- */
.s0-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 1100px) { .s0-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; } }
.status { margin-top: 22px; }
.status div { display: grid; grid-template-columns: 1fr; gap: 2px; border-top: 1px solid var(--hair); padding: 12px 0; }
.status dt { font: 700 12px/1.6 var(--f-mono); letter-spacing: .12em; color: var(--ink-muted); }
@media (min-width: 560px) { .status div { grid-template-columns: 11em minmax(0, 1fr); gap: 16px; } }
.status-count { border-bottom: 2px solid var(--ink); }
.status-count dt { color: var(--ink); }
.count { font: 900 40px/1 var(--f-display); }
.charter-panel { background: var(--raised); border: 2px solid var(--ink); padding: 20px 16px; scroll-margin-top: 12px; min-width: 0; }
@media (min-width: 720px) { .charter-panel { padding: 28px 30px; } }
.charter-panel > .small { margin-top: 8px; color: var(--ink-muted); }
.charter-form { margin-top: 18px; display: grid; gap: 16px; }
.field label { display: flex; justify-content: space-between; gap: 8px; font: 700 13px/1.4 var(--f-mono); letter-spacing: .12em; }
.req { color: var(--accent-text); }
.opt { color: var(--ink-muted); }
.field input {
  display: block; width: 100%; margin-top: 6px; padding: 12px; border: 2px solid var(--ink); border-radius: 0;
  background: var(--surface); color: var(--ink); font: 400 16px/1.3 var(--f-mono); -webkit-appearance: none; appearance: none;
}
.field input::placeholder { color: var(--ink-muted); opacity: 1; }
.field input:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.field input[aria-invalid="true"] { border-color: var(--accent-text); box-shadow: inset 4px 0 0 var(--accent-text); }
.hint { font-size: 13px; line-height: 1.45; color: var(--ink-muted); margin-top: 6px; }
.err { font: 700 13px/1.45 var(--f-mono); color: var(--accent-text); margin-top: 4px; }
.err:empty { display: none; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-status { font: 700 14px/1.45 var(--f-mono); }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--accent-text); border-left: 4px solid var(--accent-text); padding-left: 10px; }
.charter-done { margin-top: 18px; border-top: 2px solid var(--ink); padding-top: 18px; display: grid; gap: 12px; justify-items: start; }
.done-title { font-size: clamp(30px, 7vw, 44px); line-height: .95; color: var(--accent); }

/* ---------- rules ---------- */
.rules { margin-top: 28px; display: grid; gap: 0; border-top: 2px solid var(--surface); counter-reset: rule; }
.rules li { padding: 16px 0 18px 44px; border-bottom: 1px solid var(--night-line, #3B3E43); position: relative; counter-increment: rule; }
.rules li::before { content: counter(rule, decimal-leading-zero); position: absolute; left: 0; top: 17px; font: 700 14px/1 var(--f-mono); color: var(--night-muted, #A3A69F); letter-spacing: .1em; }
.rules p { margin-top: 6px; color: var(--night-ink, #E7E7E1); max-width: 44em; }
.rules a { color: var(--night-ink, #E7E7E1); }
.band-ink .placeholder { color: var(--night-ink, #E7E7E1); }
@media (min-width: 900px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }

/* ---------- footer ---------- */
.site-footer { border-top: 2px solid var(--ink); margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 36px; padding-bottom: 36px; }
.footer-brand img { width: 150px; }
.footer-brand .small { margin-top: 12px; max-width: 30em; }
.footer-links ul { margin-top: 10px; display: grid; gap: 8px; font: 700 13px/1.5 var(--f-mono); letter-spacing: .1em; }
.footer-legal .small { margin-top: 10px; color: var(--ink-muted); max-width: 46em; }
.footer-links .label, .footer-legal .label { color: var(--ink-muted); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.1fr .7fr 1.6fr; gap: 48px; padding-top: 48px; padding-bottom: 48px; } }
.legal-bar { background: var(--ink); color: var(--surface); }
.legal-bar p { font: 700 11px/1.6 var(--f-mono); letter-spacing: .12em; padding: 12px 0; }
@media (min-width: 720px) { .legal-bar p { font-size: 12px; } }

/* ---------- FAQ ---------- */
.faq { padding-top: 32px; padding-bottom: 56px; }
.faq .lead { margin-top: 16px; }
.qa-list { margin-top: 32px; border-top: 2px solid var(--ink); max-width: 880px; }
.qa { padding: 20px 0 22px; border-bottom: 1px solid var(--hair); scroll-margin-top: 12px; }
.qa p { margin-top: 10px; max-width: 44em; }
.faq-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
@media (max-width: 479px) { .faq-cta .btn { flex: 1 1 100%; } }
@media (min-width: 1100px) { .faq { padding-top: 56px; padding-bottom: 88px; } }

/* ---------- 404 + charter result pages ---------- */
.notfound, .result { padding-top: 36px; padding-bottom: 64px; }
.notfound .display-xl { max-width: 12em; }
.nf-stamp { width: clamp(200px, 55vw, 360px); margin: 18px 0 0 -6px; }
.notfound .lead, .result .lead { margin-top: 18px; max-width: 36em; }
.result .display-l { max-width: 14em; }
.result-ok .display-l { color: var(--accent); }
.result-cta { margin-top: 26px; }
@media (min-width: 1100px) { .notfound, .result { padding-top: 64px; padding-bottom: 104px; } }