/* ==========================================================================
   Nino34 — Mission Control × NOAA skin
   Deep ocean navy + warm amber. Dense live-ops dashboard.
   All --custom-property names are contractual (charts reference them).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Backgrounds — deep navy stack */
  --bg:        #070d18;
  --surface:   #0d1828;
  --surface-2: #111f33;

  /* Foreground */
  --text:   #dde4f0;
  --muted:  #6b7d96;

  /* Borders & structure */
  --border: #1c2d47;

  /* Accents */
  --accent:      #e8734a;   /* El Nino warm / current-event line */
  --accent-cool: #5b9bd5;   /* La Nina cool / analog lines       */
  --accent-ink:  #1a0e08;   /* text ON solid --accent fill        */
  --accent-text: #e8734a;   /* accent-colored TEXT on dark bg     */

  /* Semantic alert strip */
  --warn-bg:     #251a07;
  --warn-border: #8a6318;
  --warn-text:   #f2c94c;

  /* Interactive */
  --link:  #6fa8dc;
  --focus: #ffd166;

  /* Shape */
  --radius: 6px;
  --maxw:   1120px;

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Glow helpers (used sparingly for live indicators) */
  --glow-green:  rgba(52, 211, 153, 0.22);
  --glow-accent: rgba(232, 115, 74, 0.18);
}

/* Light-mode overrides — same property names, brighter values */
@media (prefers-color-scheme: light) {
  :root {
    --bg:        #f0f3f9;
    --surface:   #ffffff;
    --surface-2: #e8edf7;
    --text:      #0f1c30;
    --muted:     #52657e;
    --border:    #ccd4e6;
    --accent-text: #b84020; /* darkened for AA on white */
    --warn-bg:     #fdf4dc;
    --warn-border: #c99020;
    --warn-text:   #6b4600;
    --link:        #1e55c0;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--link);
  text-decoration: none;
}
a:hover { text-decoration: underline; text-underline-offset: 3px; }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* --------------------------------------------------------------------------
   Site header — sticky instrument-panel bar
   -------------------------------------------------------------------------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  /* thin top accent line — mission-control "stripe" */
  box-shadow: 0 -3px 0 0 var(--accent) inset, 0 1px 0 0 var(--border);
}

.head-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 0;
}

/* Brand — "ElNino" in text-color, "24" in accent amber */
.brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}
.brand span[aria-hidden] {
  font-size: 1.05em;
  /* hide the emoji on very small screens, keep the text wordmark */
}
.brand b {
  color: var(--accent);
  font-style: normal;
  letter-spacing: -0.03em;
}

/* Nav */
.nav-links {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  font-family: var(--font-mono);
  margin-left: auto;
  letter-spacing: 0.02em;
}
.nav-links a {
  color: var(--muted);
  text-decoration: none;
  padding: 4px 9px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.nav-links a:hover {
  color: var(--text);
  background: var(--surface-2);
  text-decoration: none;
}
.nav-links a[aria-current="page"] {
  color: var(--accent);
  background: rgba(232, 115, 74, 0.1);
}

/* Live badge */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: #34d399;
  background: rgba(52, 211, 153, 0.07);
  flex-shrink: 0;
}
.live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 3px var(--glow-green);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--glow-green); }
  50%       { box-shadow: 0 0 0 5px transparent; }
}

/* Mobile nav */
@media (max-width: 640px) {
  .nav-links {
    display: none;
  }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--surface);
    padding: 10px 24px;
    border-bottom: 1px solid var(--border);
    z-index: 50;
  }
}

/* --------------------------------------------------------------------------
   Staleness strip — warning bar, never hidden when stale
   -------------------------------------------------------------------------- */
.staleness-strip {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-text);
  border-radius: var(--radius);
  padding: 9px 14px;
  font-size: 0.82rem;
  font-family: var(--font-mono);
  margin: 14px 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.staleness-strip[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Status banner — mission-critical hero block
   -------------------------------------------------------------------------- */
.status-banner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin: 18px 0;
  position: relative;
  overflow: hidden;
}

/* subtle scanline texture */
.status-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,0.012) 3px,
    rgba(255,255,255,0.012) 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* Hero variant — full-bleed SST anomaly map behind the status banner.
   The artwork is a <picture> (AVIF/WebP with a PNG fallback), not a CSS
   background-image, so the browser can pick the cheapest format it supports
   and the intrinsic width/height reserve layout space. */
.status-banner__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.status-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}

.status-banner--hero {
  border-left-width: 0;
  border-color: var(--border);
  padding: 0;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
}

/* Dark overlay so text stays legible over the image */
.status-banner--hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(7, 13, 24, 0.90) 0%,
    rgba(7, 13, 24, 0.72) 55%,
    rgba(7, 13, 24, 0.30) 100%
  );
  pointer-events: none;
  z-index: 1; /* above .status-banner__media (0), below .status-banner__content (2) */
  border-radius: var(--radius);
}

/* Left accent stripe on hero, on top of the image overlay. It rides on ::after
   rather than the section itself: the artwork is now a positioned <picture>
   child, and an inset box-shadow on the section would paint underneath it. */
.status-banner--hero::after {
  box-shadow: inset 4px 0 0 var(--accent);
}

.status-banner__content {
  position: relative;
  z-index: 2;
  padding: 26px 28px;
  width: 100%;
  max-width: 75ch;
}

/* On hero, push scanline above overlay */
.status-banner--hero::before { z-index: 3; }

@media (max-width: 640px) {
  .status-banner--hero {
    min-height: 180px;
  }
  .status-banner__content {
    padding: 20px 18px;
  }
}

.status-banner .eyebrow {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 7px;
}

.status-banner h1 {
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  line-height: 1.2;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 3px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 0.78rem;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.trend-arrow {
  font-family: var(--font-mono);
  opacity: 0.75;
  font-size: 0.8em;
  margin-left: 4px;
}

.status-banner p {
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 72ch;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Main layout grid
   -------------------------------------------------------------------------- */
#main { padding-top: 4px; padding-bottom: 48px; }
#main > .wrap { padding-top: 6px; }

.grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin: 16px 0;
  align-items: start;
}

/* --------------------------------------------------------------------------
   Cards — instrument-panel modules
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}

/* section/aside cards that sit outside the grid */
section.card, aside.card, form.card {
  margin: 14px 0;
}

.card h2, .card h3 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

/* Card label — monospace eyebrow, like a sensor channel ID */
.card-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  display: block;
}

/* Large scalar value inside a card (e.g. ONI +1.20°C)
   The engine emits: style="font-size:1.8rem;font-weight:700"
   We honour the weight but override family and size for consistency. */
.card p[style*="font-size"],
.card span[style*="font-size"] {
  font-family: var(--font-mono) !important;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 6px 0 4px;
  display: block;
}

/* --------------------------------------------------------------------------
   Data-as-of timestamp — every value must carry its provenance
   -------------------------------------------------------------------------- */
.data-as-of {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.5;
}
.data-as-of .stale {
  color: var(--warn-text);
  font-weight: 600;
}
.data-as-of a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Charts — instrument panel treatment
   Inline SVGs use currentColor for text/strokes so token changes propagate.
   -------------------------------------------------------------------------- */
.chart-block {
  margin: 12px 0;
}

.chart {
  width: 100%;
  height: auto;
  color: var(--text);
  display: block;
}

/* Gauge */
.chart-gauge-value {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-mono);
  fill: var(--text);
}

/* Bar chart text elements */
.chart-bar-label {
  font-size: 10px;
  font-family: var(--font-mono);
  fill: var(--muted);
}
.chart-bar-value {
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 700;
  fill: var(--text);
}

/* Chart legend */
.chart-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.chart-legend span { display: flex; align-items: center; gap: 5px; }

/* Accessible table fallback — behind <details> */
details.chart-fallback {
  margin-top: 12px;
}
details.chart-fallback summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}
details.chart-fallback summary::before {
  content: '▶';
  font-size: 0.6em;
  transition: transform 0.2s;
}
details.chart-fallback[open] summary::before {
  transform: rotate(90deg);
}

.chart-data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  margin-top: 10px;
}
.chart-data-table caption {
  text-align: left;
  color: var(--muted);
  font-size: 0.72rem;
  margin-bottom: 6px;
  caption-side: top;
}
.chart-data-table th {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.chart-data-table td {
  padding: 5px 10px;
  border-bottom: 1px solid rgba(28, 45, 71, 0.5);
  color: var(--text);
}
.chart-data-table tr:last-child td {
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   Region cards
   -------------------------------------------------------------------------- */
.region-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s;
}
.region-card:hover {
  border-color: var(--accent);
  text-decoration: none;
}
.region-card .tendency { font-weight: 600; }

.confidence-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid var(--border);
  color: var(--muted);
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Update countdown / next-update card
   -------------------------------------------------------------------------- */
.card time {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Ad slots
   -------------------------------------------------------------------------- */
.ad-slot {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.75rem;
  margin: 18px 0;
  overflow: hidden;
  background: var(--surface);
  position: relative;
}
.ad-slot[data-empty] { display: none; }
.ad-slot-label {
  position: absolute;
  top: 4px; right: 6px;
  font-size: 0.6rem;
  font-family: var(--font-mono);
  opacity: 0.45;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   Affiliate block / FTC disclosure
   -------------------------------------------------------------------------- */
.affiliate-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 18px 0;
}
.affiliate-card {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 12px;
}
.ftc-disclosure {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Email capture form
   -------------------------------------------------------------------------- */
form.card#email-capture {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
form.card#email-capture h3 {
  font-size: 0.95rem;
  margin-bottom: 0;
}
form.card#email-capture p {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.55;
}
form.card#email-capture input[type="email"] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 13px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  width: 100%;
  transition: border-color 0.15s;
}
form.card#email-capture input[type="email"]::placeholder {
  color: var(--muted);
  opacity: 0.6;
}
form.card#email-capture input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
}
form.card#email-capture button[type="submit"] {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: var(--radius);
  padding: 9px 18px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  align-self: flex-start;
  transition: opacity 0.15s;
}
form.card#email-capture button[type="submit"]:hover { opacity: 0.88; }
form.card#email-capture button[type="submit"]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 13px 0;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 1.1em;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.2s;
}
details.faq-item[open] summary::after {
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Data tables (full-page tables, not chart fallbacks)
   -------------------------------------------------------------------------- */
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
table.data-table th {
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-weight: 600;
}
table.data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(28, 45, 71, 0.5);
}
table.data-table tr[data-phase="El Nino"] td:first-child {
  border-left: 3px solid var(--accent);
}
table.data-table tr[data-phase="La Nina"] td:first-child {
  border-left: 3px solid var(--accent-cool);
}
table.data-table tr:hover td {
  background: var(--surface-2);
}

/* --------------------------------------------------------------------------
   Crosslink box — sibling site promo
   -------------------------------------------------------------------------- */
.crosslink-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-cool);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 16px 0;
  font-size: 0.88rem;
  line-height: 1.6;
}
.crosslink-box strong { color: var(--text); font-weight: 700; }

/* --------------------------------------------------------------------------
   Sources / aside card
   -------------------------------------------------------------------------- */
aside.card h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 12px;
}
aside.card ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
aside.card ul li a {
  font-size: 0.85rem;
  color: var(--link);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
aside.card ul li a::before {
  content: '↗';
  font-family: var(--font-mono);
  font-size: 0.75em;
  color: var(--muted);
  flex-shrink: 0;
}
aside.card ul li a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Prose (long-form pages)
   -------------------------------------------------------------------------- */
.prose h2 { margin-top: 2em; font-size: 1.2rem; letter-spacing: -0.01em; }
.prose p { max-width: 68ch; margin-top: 0.9em; line-height: 1.7; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-foot {
  border-top: 1px solid var(--border);
  background: var(--surface);
  margin-top: 48px;
  padding: 32px 0 28px;
  color: var(--muted);
  font-size: 0.82rem;
}

.foot-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 24px;
}

.foot-grid h4 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.foot-grid a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  padding: 3px 0;
  font-size: 0.82rem;
  transition: color 0.12s;
}
.foot-grid a:hover { color: var(--text); text-decoration: none; }

.disclaimer {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 8px;
  line-height: 1.7;
}
.disclaimer strong { color: var(--text); font-weight: 600; }
.disclaimer a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.disclaimer a:hover { color: var(--link); }

/* --------------------------------------------------------------------------
   "What changed this month" card — section.card
   -------------------------------------------------------------------------- */
section.card h2 {
  font-size: 0.88rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin-bottom: 10px;
}
section.card p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text);
}
section.card p + p { margin-top: 8px; }
section.card a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   SST anomaly map card
   -------------------------------------------------------------------------- */
.card p a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Utility — muted sub-text inside cards
   -------------------------------------------------------------------------- */
.card > p:not(.card-label):not(.data-as-of) {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Button — used by the unsubscribe confirmation page the Worker renders
   (worker.js). The stylesheet previously defined no button rule of any kind,
   so that page shipped UA-default chrome: a 2px-outset 100x19px control at
   13.3px, against a site whose every other surface is token-driven.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  padding: 12px 20px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { filter: brightness(1.08); }