/* ============================================================
   RunRace USA — Start-Line Atlas brand system

   Paper, ink, course red and split gold are the shared identity across every
   directory, guide, race page and map. Component sheets may add local roles,
   but these are the only site-wide color decisions.
   ============================================================ */
:root {
  color-scheme: light dark;
  --display-font: "Instrument Serif", Georgia, "Times New Roman", serif;
  --page:           #f5f1e9;
  --surface:        #fffdfa;
  --ink:            #14232c;
  --ink-2:          #47565d;
  --muted:          #706b59;
  --grid:           #ddd8cf;
  --baseline:       #928a80;
  --border:         rgba(20, 35, 44, 0.14);
  --series:         #b64936;   /* course red: actions, routes, selection */
  --series-soft:    rgba(182, 73, 54, 0.12);
  --on-series:      #fffaf4;
  --gold:           #d49b4b;   /* discovery, highlights, density */
  --gold-ink:       #815c25;
  --on-gold:        #241c07;
  --pill-bg:        #14232c;
  --pill-fg:        #fffaf0;
  --status-error:   #9f332d;
  --map-water:       #dbe4ea;
  --map-land:        #ede8dc;
  --map-land-1:      #eadfd4;
  --map-land-2:      #e7c3b3;
  --map-land-3:      #d98e78;
  --map-land-4:      #b64936;
  --map-border:      #777166;
  --map-panel:       rgba(255, 253, 250, 0.95);
  --map-cluster-ink: #14232c;
  /* year heatmap — the course-red family, low → high */
  --cell-0:         #eee9df;
  --cell-1:         #f0d7ce;
  --cell-2:         #e5b2a2;
  --cell-3:         #d98670;
  --cell-4:         #b64936;
  --cell-5:         #7e3026;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page:         #101a20;
    --surface:      #17242b;
    --ink:          #f4f0e7;
    --ink-2:        #c8c8bd;
    --muted:        #92968e;
    --grid:         #2b373c;
    --baseline:     #68767d;
    --border:       rgba(244, 240, 231, 0.14);
    --series:       #ef896e;
    --series-soft:  rgba(239, 137, 110, 0.16);
    --on-series:    #15232a;
    --gold:         #dfb269;
    --gold-ink:     #edc783;
    --on-gold:      #241c07;
    --pill-bg:      #f4f0e7;
    --pill-fg:      #15232a;
    --status-error: #ff9a87;
    --map-water:       #10161b;
    --map-land:        #33302a;
    --map-land-1:      #433832;
    --map-land-2:      #67453a;
    --map-land-3:      #a05e4d;
    --map-land-4:      #ef896e;
    --map-border:      #8f897f;
    --map-panel:       rgba(23, 36, 43, 0.96);
    --map-cluster-ink: #14232c;
    --cell-0:       #243138;
    --cell-1:       #4a3534;
    --cell-2:       #70433d;
    --cell-3:       #a45b4d;
    --cell-4:       #ef896e;
    --cell-5:       #ffc0ad;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}

a { color: var(--series); text-decoration: none; }
a:hover { text-decoration: underline; }

/* editorial display type, sitewide — Instrument Serif ships only a 400 weight */
h1, h2 { font-family: var(--display-font); font-weight: 400; letter-spacing: -0.02em; }
h1, h2, h3 { line-height: 1.2; }

/* small icon chips beside card headings */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--series-soft);
  color: var(--series);
  margin-right: 9px;
  flex: none;
}
.icon svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.resume-card h3, .now-block h3, .uses-item h3 {
  display: flex;
  align-items: center;
}

/* eyebrow labels above section headings */
.eyebrow {
  display: block;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--series);
  margin-bottom: 10px;
}

/* ---------------- header ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header nav {
  max-width: 880px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display-font);
  font-weight: 400;
  font-size: 24px;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
}
.wordmark::before {
  content: "";
  width: 28px;
  height: 28px;
  flex: none;
  background: url("/icon.svg") center / contain no-repeat;
}
.wordmark:hover {
  color: var(--series);
  text-decoration: none;
}
.brand-lockup {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.brand-country {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.43em;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav-links { display: flex; gap: 20px; flex-wrap: wrap; justify-content: flex-end; }
.nav-links a { color: var(--ink-2); font-size: 15px; }
.nav-links a:hover { color: var(--ink); text-decoration: none; }

/* The header had no mobile rule, so it just wrapped. At five nav items that
   became three stacked rows on a phone, with "RunRace USA" itself breaking in
   half, and the whole thing is sticky so it ate the top of every screen.
   Below 720px the wordmark gets its own row and the links become a single
   horizontally scrollable strip, which stays two rows no matter how many
   sections get added later. */
@media (max-width: 720px) {
  .site-header nav {
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    padding: 11px 16px 9px;
  }
  .wordmark { font-size: 21px; }
  .wordmark::before { width: 24px; height: 24px; }
  .nav-links {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 18px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Bleed to the screen edges so the strip reads as scrollable and the last
       link is not clipped mid-word against the padding. */
    margin: 0 -16px;
    padding: 0 16px 2px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; font-size: 14.5px; }
}

/* ---------------- hero ---------------- */
.hero { padding: 14vh 0 10vh; position: relative; min-height: 72vh; display: flex; flex-direction: column; justify-content: center; }
.hero > * { position: relative; }
.hero h1 {
  font-size: clamp(44px, 7vw, 68px);
  margin: 0 0 14px;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.lede {
  font-size: 20px;
  color: var(--ink-2);
  max-width: 560px;
  margin: 0;
}

.social-links { display: flex; gap: 18px; margin-top: 24px; }
.social-links a { color: var(--muted); display: inline-flex; }
.social-links a:hover { color: var(--ink); }
.social-links svg { width: 22px; height: 22px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }

/* ---------------- sections ---------------- */
section { padding: 48px 0; scroll-margin-top: 60px; }
section h2 { font-size: clamp(30px, 4vw, 40px); margin: 0 0 6px; letter-spacing: -0.015em; line-height: 1.1; }
.section-note { color: var(--muted); margin: 0 0 28px; font-size: 15px; }

/* ---------------- uses page ---------------- */
.hero-small { padding: 64px 0 8px; }
.uses-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.uses-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
}
.uses-item h3 { margin: 0 0 8px; font-size: 16px; }
.uses-item p { margin: 0; font-size: 15px; color: var(--ink-2); }

/* ---------------- now ---------------- */
.now-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.now-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.now-block:hover,
.resume-card:hover,
.uses-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(11, 11, 11, 0.08);
}
.now-block h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.now-block p { margin: 0; font-size: 15px; color: var(--ink-2); }
.now-block strong { color: var(--ink); font-weight: 600; }

/* ---------------- life resume ---------------- */
.resume-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.resume-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
}
.resume-card h3 {
  margin: 0 0 10px;
  font-size: 16px;
}
.resume-card ul { margin: 0; padding-left: 18px; }
.resume-card li { margin: 6px 0; font-size: 15px; color: var(--ink-2); }
.resume-card li strong { color: var(--ink); font-weight: 600; }
.resume-card li.todo {
  color: var(--muted);
  list-style: none;
  margin-left: -18px;
  border: 1px dashed var(--baseline);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13.5px;
}

/* ---------------- stat tiles ---------------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
}
.stat-tile .label { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.stat-tile .value { font-size: 30px; font-weight: 600; letter-spacing: -0.01em; }
.stat-tile .value small { font-size: 15px; font-weight: 500; color: var(--ink-2); }

/* ---------------- chart cards ---------------- */
.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px 14px;
  margin-bottom: 20px;
}
.chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.chart-title { font-size: 15px; font-weight: 600; }
.range-buttons { display: flex; gap: 4px; }
.range-buttons button {
  font: inherit;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.range-buttons button:hover { background: var(--series-soft); }
.range-buttons button.active {
  background: var(--series-soft);
  color: var(--ink);
  border-color: var(--border);
  font-weight: 600;
}
.chart-holder svg { width: 100%; height: auto; display: block; }

/* bar chart internals (SVG classes) */
.bar { fill: var(--series); }
.hit { fill: transparent; }
.bar.hover { fill: color-mix(in srgb, var(--series) 82%, var(--ink)); }
.gridline { stroke: var(--grid); stroke-width: 1; }
.axis-baseline { stroke: var(--baseline); stroke-width: 1; }
.tick-label, .axis-label { fill: var(--muted); font-size: 11px; font-family: inherit; font-variant-numeric: tabular-nums; }
.cap-label { fill: var(--ink-2); font-size: 11px; font-family: inherit; font-variant-numeric: tabular-nums; }

/* line chart internals (SVG classes) */
.line-path { fill: none; stroke: var(--series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.line-area { fill: var(--series); opacity: 0.1; }
.end-dot { fill: var(--series); }
.end-dot-ring { fill: var(--surface); }
.end-label { fill: var(--ink); font-size: 12px; font-weight: 600; font-family: inherit; }
.crosshair { stroke: var(--baseline); stroke-width: 1; }

/* ---------------- heatmap ---------------- */
.heatmap-scroll { overflow-x: auto; padding-bottom: 4px; }
/* scale to the card width; min-width keeps cells readable on phones (scrolls there) */
.heatmap-scroll svg { display: block; width: 100%; min-width: 640px; height: auto; }
.hm-cell.b0 { fill: var(--cell-0); }
.hm-cell.b1 { fill: var(--cell-1); }
.hm-cell.b2 { fill: var(--cell-2); }
.hm-cell.b3 { fill: var(--cell-3); }
.hm-cell.b4 { fill: var(--cell-4); }
.hm-cell.b5 { fill: var(--cell-5); }
.hm-label { fill: var(--muted); font-size: 10px; font-family: inherit; }
.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
.heatmap-legend .swatch {
  width: 11px; height: 11px; border-radius: 2px; display: inline-block;
}
.swatch.b0 { background: var(--cell-0); }
.swatch.b1 { background: var(--cell-1); }
.swatch.b2 { background: var(--cell-2); }
.swatch.b3 { background: var(--cell-3); }
.swatch.b4 { background: var(--cell-4); }
.swatch.b5 { background: var(--cell-5); }

/* ---------------- racing: states map + PBs ---------------- */
h2.subsection { margin-top: 48px; font-size: 28px; }
#states-map { padding: 4px 0; }
#states-map svg { width: 100%; height: auto; display: block; }
#states-map g.state path,
#states-map circle.dc { fill: var(--cell-0); transition: fill 0.1s ease; }
#states-map g.state path.ran { fill: var(--series); }
#states-map g.state path:hover { fill: color-mix(in srgb, var(--cell-0) 80%, var(--ink)); }
#states-map g.state path.ran:hover { fill: color-mix(in srgb, var(--series) 82%, var(--ink)); }
#states-map g.borders path { stroke: var(--surface); stroke-width: 1; fill: none; pointer-events: none; }
#states-map .separator1 { stroke: var(--baseline); stroke-width: 1; fill: none; }
#states-map circle.dccircle { display: none; }

/* ---------------- world map (About section) ---------------- */
.world-card { margin-top: 20px; }
#world-map { padding: 4px 0; }
#world-map svg { width: 100%; height: auto; display: block; }
#world-map path { fill: var(--cell-0); stroke: var(--surface); stroke-width: 0.5; transition: fill 0.1s ease; }
#world-map .visited path,
#world-map path.visited { fill: var(--series); }
#world-map .country:hover path,
#world-map path.country:hover { fill: color-mix(in srgb, var(--cell-0) 80%, var(--ink)); }
#world-map .country.visited:hover path,
#world-map path.country.visited:hover { fill: color-mix(in srgb, var(--series) 82%, var(--ink)); }

.pb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.pb-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.pb-dist { font-size: 12.5px; color: var(--muted); }
.pb-time { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 2px 0; }
.pb-race { font-size: 12px; color: var(--ink-2); }

.race-note { color: var(--muted); font-size: 12.5px; }
.race-pb {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--series);
  border: 1px solid var(--series);
  border-radius: 5px;
  padding: 0 5px;
  margin-left: 6px;
  vertical-align: 1px;
}

/* ---------------- data table ---------------- */
.data-table { margin-top: 4px; }
.data-table summary {
  cursor: pointer;
  color: var(--ink-2);
  font-size: 14px;
}
.data-table table {
  margin-top: 12px;
  border-collapse: collapse;
  min-width: 260px;
}
.data-table th, .data-table td {
  text-align: left;
  padding: 5px 18px 5px 0;
  border-bottom: 1px solid var(--grid);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.data-table th { color: var(--muted); font-weight: 500; }

/* ---------------- tooltip ---------------- */
.tooltip {
  position: fixed;
  pointer-events: none;
  background: var(--ink);
  color: var(--page);
  font-size: 12.5px;
  line-height: 1.35;
  padding: 6px 10px;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.08s ease;
  z-index: 50;
  white-space: nowrap;
}
.tooltip.show { opacity: 1; }
.tooltip .tt-value { font-weight: 600; }

/* ---------------- newsletter ---------------- */
.newsletter-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--series) 6%, var(--surface)), var(--surface) 55%);
  border: 1px solid var(--border);
  border-top: 3px solid var(--series);
  border-radius: 16px;
  padding: 36px 32px;
  text-align: center;
}
.newsletter-card h2 { margin-top: 0; }
.newsletter-card .icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  margin: 0 auto 14px;
  display: flex;
}
.newsletter-card .icon svg { width: 22px; height: 22px; }
.newsletter-card p { color: var(--ink-2); max-width: 460px; margin: 8px auto 20px; }
.newsletter-form {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.newsletter-form input[type="email"] {
  font: inherit;
  font-size: 15px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--baseline);
  background: var(--page);
  color: var(--ink);
  width: min(320px, 100%);
}
.newsletter-form input[type="email"]:focus {
  outline: 2px solid var(--series);
  outline-offset: 1px;
  border-color: transparent;
}
.newsletter-form button {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 10px;
  border: none;
  background: var(--series);
  color: var(--on-series, #fff);
  cursor: pointer;
}
.newsletter-form button:hover { filter: brightness(1.08); }
.newsletter-form button:disabled { opacity: 0.6; cursor: default; }
.newsletter-status { min-height: 1.4em; margin: 14px 0 0; font-size: 15px; color: var(--ink); font-weight: 500; }
.newsletter-status.error { color: var(--muted); font-weight: 400; }

/* ---------------- footer ---------------- */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 48px;
  padding: 28px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

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

/* ============================================================
   IMMERSIVE WORLDS
   Each homepage section declares data-world; scrolling into it
   crossfades the fixed backdrop and re-themes every token, so
   panels, charts, and text all step into the new world together.
   ============================================================ */

/* the page paints on the fixed backdrop, not the body */
body[data-world] { background: var(--page); }

/* backdrop sits at z 0 with the content lifted above it — negative
   z-index behind <body> is unreliable under some compositors */
#world-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--page); }
body[data-world] main,
body[data-world] .site-header,
body[data-world] .site-footer,
body[data-world] .tooltip { position: relative; z-index: 1; }
body[data-world] .site-header { position: sticky; }
body[data-world] .tooltip { position: fixed; z-index: 50; }
.wbg {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}
body[data-world="dawn"]  .wbg-dawn,
body[data-world="paper"] .wbg-paper,
body[data-world="trail"] .wbg-trail,
body[data-world="board"] .wbg-board,
body[data-world="night"] .wbg-night,
body[data-world="atlas"] .wbg-atlas { opacity: 1; }

/* ---- atmospheres ---- */
.wbg-dawn {
  background:
    radial-gradient(900px 620px at 78% -8%, rgba(223, 173, 108, 0.42), transparent 64%),
    radial-gradient(700px 500px at 12% 108%, rgba(207, 196, 174, 0.35), transparent 60%),
    linear-gradient(180deg, #f3ddba 0%, #f7efe2 46%, #f7efe2 100%);
}
.wbg-paper { background: #f9f9f7; }
.wbg-trail {
  background: linear-gradient(180deg, #dcebe9 0%, #edf3e8 42%, #f2f4ec 100%);
}
.wbg-trail::after {
  /* far + near ridgelines along the bottom */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 34vh;
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 200" preserveAspectRatio="none"><path d="M0 200 L0 120 L140 70 L300 130 L470 60 L640 140 L820 80 L1000 150 L1200 90 L1200 200 Z" fill="%23a9bfa4" opacity="0.5"/></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 200" preserveAspectRatio="none"><path d="M0 200 L0 160 L180 110 L360 165 L560 100 L760 170 L960 120 L1200 165 L1200 200 Z" fill="%23879d84" opacity="0.55"/></svg>');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.wbg-board {
  background:
    radial-gradient(1000px 700px at 50% -20%, rgba(57, 135, 229, 0.10), transparent 60%),
    linear-gradient(180deg, #14161b 0%, #191c22 100%);
}
.wbg-board::after {
  /* an oversized board fading in from the corner */
  content: "";
  position: absolute; right: -8%; bottom: -12%; width: 60%; height: 70%;
  background:
    repeating-linear-gradient(0deg, transparent 0 88px, rgba(255,255,255,0.045) 88px 176px),
    repeating-linear-gradient(90deg, transparent 0 88px, rgba(255,255,255,0.045) 88px 176px);
  mask-image: radial-gradient(closest-side at 70% 70%, #000, transparent);
  -webkit-mask-image: radial-gradient(closest-side at 70% 70%, #000, transparent);
  transform: rotate(-4deg);
}
.wbg-night {
  background:
    radial-gradient(760px 520px at 82% 6%, rgba(158, 197, 244, 0.12), transparent 60%),
    linear-gradient(180deg, #060a1c 0%, #0b1128 55%, #131a36 100%);
}
.wbg-night .stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1px 1px at 34% 8%,  rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 57% 30%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1px 1px at 73% 12%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 26%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1px 1px at 23% 44%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 44% 55%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 66% 47%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(1.3px 1.3px at 81% 58%, rgba(255,255,255,0.75), transparent 60%),
    radial-gradient(1px 1px at 8% 66%,  rgba(255,255,255,0.5), transparent 60%);
  background-repeat: repeat;
  background-size: 900px 700px;
  transform: translateY(calc(var(--scrolly, 0) * -0.04px));
}
.wbg-night .stars.s2 {
  background-size: 1400px 1100px;
  opacity: 0.7;
  animation: twinkle 5.5s ease-in-out infinite alternate;
  transform: translateY(calc(var(--scrolly, 0) * -0.09px));
}
@keyframes twinkle { from { opacity: 0.35; } to { opacity: 0.85; } }
.wbg-atlas {
  background:
    radial-gradient(820px 560px at 20% 0%, rgba(212, 155, 75, 0.10), transparent 60%),
    linear-gradient(180deg, #0b1d28 0%, #103041 60%, #123646 100%);
}
.wbg-atlas::after {
  /* faint meridian rings, like an old chart */
  content: "";
  position: absolute; inset: 0;
  background: repeating-radial-gradient(circle at 85% 115%, transparent 0 118px, rgba(255,255,255,0.05) 118px 120px);
}

/* ---- per-world tokens (light worlds reuse the validated light set,
       dark worlds the validated dark set; only surfaces are tinted) ----
   Worlds own their palette outright: the OS light/dark preference is
   overridden here so a world looks the same for every visitor. */
body[data-world="dawn"], body[data-world="paper"], body[data-world="trail"] {
  --ink: #14232c; --ink-2: #47565d; --muted: #706b59;
  --series: #b64936; --series-soft: rgba(182, 73, 54, 0.12);
  --cell-1: #f0d7ce; --cell-2: #e5b2a2; --cell-3: #d98670;
  --cell-4: #b64936; --cell-5: #7e3026;
}
body[data-world="paper"] {
  --page: #f9f9f7; --surface: #fcfcfb;
  --grid: #e1e0d9; --baseline: #c3c2b7; --cell-0: #f0efec;
  --border: rgba(11, 11, 11, 0.10);
}
body[data-world="dawn"] {
  --page: #f7efe2; --surface: #fdf9f1;
  --grid: #e9dfc9; --baseline: #d2c5a9; --cell-0: #f0e7d4;
  --border: rgba(60, 44, 16, 0.12);
}
body[data-world="trail"] {
  --page: #eef3ec; --surface: #fafcf7;
  --grid: #dde5d6; --baseline: #bfcab6; --cell-0: #e7ede1;
  --border: rgba(25, 43, 22, 0.12);
}
body[data-world="board"], body[data-world="night"], body[data-world="atlas"] {
  --ink: #f4f0e7; --ink-2: #c8c8bd; --muted: #92968e;
  --series: #ef896e; --series-soft: rgba(239, 137, 110, 0.16);
  --border: rgba(244, 240, 231, 0.14);
  --cell-1: #4a3534; --cell-2: #70433d; --cell-3: #a45b4d;
  --cell-4: #ef896e; --cell-5: #ffc0ad;
}
body[data-world="board"] {
  --page: #16181d; --surface: #1e2127;
  --grid: #2b2e35; --baseline: #3d414a; --cell-0: #272a31;
}
body[data-world="night"] {
  --page: #0b1128; --surface: #151c3d;
  --grid: #242c55; --baseline: #364173; --cell-0: #1c2448;
}
body[data-world="atlas"] {
  --page: #0f2937; --surface: #163a4b;
  --grid: #21495c; --baseline: #2f607a; --cell-0: #1c4356;
}

/* dark worlds: keep the newsletter/dark-ink pieces readable */
body[data-world="board"] .tooltip,
body[data-world="night"] .tooltip,
body[data-world="atlas"] .tooltip { background: #f4f5f8; color: #10131f; }

/* ---- entering a world: tall intro that lands like a title card ---- */
.world-intro {
  min-height: 44vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6vh 0 4vh;
}
.world-intro h2 { font-size: clamp(38px, 6vw, 58px); }
.world-intro .section-note { font-size: 17px; max-width: 520px; }

/* smooth color hand-off for everything that wears tokens */
body, .site-header, .stat-tile, .chart-card, .resume-card, .now-block,
.uses-item, .newsletter-card, .pb-item, .site-footer {
  transition: background-color 0.9s ease, border-color 0.9s ease, color 0.9s ease;
}

/* ---- scroll reveals ---- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .wbg { transition: none; }
  .wbg-night .stars.s2 { animation: none; }
  .wbg-night .stars, .wbg-night .stars.s2 { transform: none; }
  body, .site-header, .stat-tile, .chart-card, .resume-card, .now-block,
  .uses-item, .newsletter-card, .pb-item, .site-footer { transition: none; }
}

/* Footer section links. These exist so every page links to the guides and
   seasonal pages: without inbound links Google leaves them uncrawled. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  max-width: 780px;
  margin: 0 auto 14px;
  font-size: 13px;
  line-height: 1.7;
}
.footer-links a { white-space: nowrap; }