/* metric-matched stand-ins while the web fonts load, so text doesn't reflow when they arrive */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Liberation Sans'), local('Helvetica'); size-adjust: 106.51%; ascent-override: 91.07%; descent-override: 22.53%; line-gap-override: 0%; }
@font-face { font-family: 'Bricolage Fallback'; src: local('Arial'), local('Liberation Sans'), local('Helvetica'); size-adjust: 94.38%; ascent-override: 98.54%; descent-override: 28.61%; line-gap-override: 0%; }
@font-face { font-family: 'JetBrains Mono Fallback'; src: local('Courier New'), local('Liberation Mono'), local('Menlo'); size-adjust: 99.98%; ascent-override: 102.02%; descent-override: 30%; line-gap-override: 0%; }

:root {
  /* icon scale: one standard minimum everywhere, bigger steps for controls and the top bar */
  --ic-min: 16px; --ic-md: 18px; --ic-lg: 20px; --ic-bar: 20px; --bar-btn: 38px;
  --bg: #050506;
  --bg-2: #070708;
  --card: rgba(12, 12, 15, 0.58);
  --card-solid: rgba(10, 10, 13, 0.82);
  --glass: rgba(14, 14, 18, 0.55);
  --glass-weak: rgba(20, 20, 24, 0.35);
  --glass-edge: rgba(255, 255, 255, 0.07);
  --surface-2: rgba(255, 255, 255, 0.02);
  --hover: rgba(255, 255, 255, 0.035);
  --tile: linear-gradient(160deg, #1c1c20, #0b0b0d);
  --ink-rgb: 236, 235, 230;
  --bg-rgb: 5, 5, 6;
  --text-2: #c9c7c0;
  --text-3: #a3a19a;
  --future-text: #e4dcff;
  --future-text-2: #c9c4dc;
  --blur: blur(18px) saturate(150%);
  --line: rgba(236, 235, 230, 0.14);
  --line-2: rgba(236, 235, 230, 0.32);
  --text: #ecebe6;
  --muted: #8f8d87;
  --dim: #5e5d59;
  --maya: #ff6a3d;
  --fact: #ecebe6;
  --estimate: #d8b46a;
  --projection: #7aa7ff;
  --scenario: #b896ff;
  --glow: 255, 170, 110;
  --sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --display: 'Bricolage Grotesque', 'Bricolage Fallback', 'Inter', system-ui, sans-serif;
  --future: #b9a6ff;
  --mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  background-image: linear-gradient(rgba(var(--ink-rgb), 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ink-rgb), 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  background-attachment: fixed;
  color: var(--text);
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 1s;
}
a { color: inherit; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; }

#world {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; display: block;
  transition: opacity 0.8s var(--ease), filter 0.8s var(--ease);
}
body.past-story #world { opacity: 0.14; }
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(ellipse 75% 70% at 55% 50%, transparent 60%, rgba(var(--bg-rgb), 0.85) 100%),
    linear-gradient(to bottom, rgba(var(--bg-rgb), 0.7), transparent 16%, transparent 82%, rgba(var(--bg-rgb), 0.8));
}
main { position: relative; z-index: 3; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; gap: 28px;
  padding: 18px 28px;
  font-size: 13px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; letter-spacing: -0.01em; }
.brand-mark {
  width: 14px; height: 14px; border-radius: 3px; transform: rotate(45deg) scaleY(0.8);
  border: 1.5px solid var(--maya); box-shadow: 0 0 12px rgba(255, 106, 61, 0.5);
}
.nav nav { display: flex; gap: 22px; margin-left: auto; }
.nav nav a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.nav nav a:hover { color: var(--text); }
/* drag to orbit the city */
.hero, .chapter { cursor: grab; touch-action: pan-y; }
.hero-inner p, .hero-inner h1, .card { cursor: auto; }
body.orbiting, body.orbiting * { cursor: grabbing !important; user-select: none; }
.legend .orbit-hint { font: 10.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.xray-btn {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font: 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; min-height: var(--bar-btn);
  color: var(--muted); background: var(--glass-weak); border: 1px solid var(--line); border-radius: 2px; padding: 5px 13px;
  transition: color 0.2s, border-color 0.2s;
}
.xray-btn:hover { color: var(--text); }
.xray-btn[aria-pressed="true"] { color: var(--maya); border-color: var(--maya); }
.xray-btn[aria-pressed="true"] i::after { opacity: 1; }
.today { font: 12px var(--mono); color: var(--muted); padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--glass-weak); }

/* ---------- hero ---------- */
.hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: 0 28px 13vh; position: relative; }
.hero-inner { max-width: 640px; }
.eyebrow { display: flex; align-items: center; gap: 10px; font: 12px var(--mono); color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 22px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--maya); box-shadow: 0 0 0 0 rgba(255,106,61,0.6); animation: ping 2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(255,106,61,0); } 100% { box-shadow: 0 0 0 0 rgba(255,106,61,0); } }
h1 {
  font-size: clamp(40px, 5.4vw, 76px); line-height: 1; letter-spacing: -0.04em; font-weight: 500; margin: 0 0 26px;
  text-wrap: balance;
}
h1, h2 { font-family: var(--display); }
h1 em, h2 em { font-family: var(--display); font-style: normal; color: var(--text-3); letter-spacing: inherit; }
h1 { font-variation-settings: 'opsz' 96; letter-spacing: -0.022em; font-weight: 300; }
h2 { letter-spacing: -0.02em; }
h2 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 500; margin: 0 0 18px; }
.lede { color: var(--muted); font-size: 17px; max-width: 540px; margin: 0 0 28px; }
.lede.small { font-size: 14px; }
.maya { color: var(--maya); font-weight: 500; }
.legend { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12px; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 8px; }
.lg { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.maya-dot { background: var(--maya); box-shadow: 0 0 10px var(--maya); }
.crowd { background: #a9a69f; }
.hollow { border: 1.2px solid #8a8780; }
.machine { background: #9fb4c4; border-radius: 2px; }
.scroll-cue {
  position: absolute; right: 28px; bottom: 13vh; display: flex; align-items: center; gap: 12px;
  font: 12px var(--mono); color: var(--muted); text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em;
}
.scroll-cue span { width: 1px; height: 46px; background: linear-gradient(var(--maya), transparent); animation: cue 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- maya tag (follows her in the city) ---------- */
.maya-tag {
  position: fixed; left: 0; top: 0; z-index: 2; pointer-events: none;
  display: flex; align-items: center; gap: 7px;
  padding: 4px 9px 4px 8px;
  background: var(--bg); border: 1px solid rgba(255, 106, 61, 0.7);
  font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: 0.04em; border-radius: 2px; white-space: nowrap; will-change: transform;
  transform: translate(-50%, -100%); opacity: 0; transition: opacity 0.4s;
  backdrop-filter: blur(6px);
}
.maya-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--maya); }
.maya-tag .age { color: var(--muted); font-family: var(--mono); font-size: 10px; }
.maya-tag::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 1px; height: 8px; background: rgba(255, 106, 61, 0.5); }
body.past-story .maya-tag { opacity: 0 !important; }

/* ---------- HUD ---------- */
.hud {
  position: fixed; right: 28px; top: 84px; z-index: 5; width: 250px;
  opacity: 0; transform: translateY(-8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}
body.in-story .hud { opacity: 1; transform: none; pointer-events: auto; }
.hud-year { font: 500 64px/1 var(--mono); letter-spacing: -0.05em; text-align: right; font-variant-numeric: tabular-nums; position: relative; }
.hud-rewind { position: absolute; right: 2px; top: -16px; font: 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--maya); opacity: 0; transition: opacity 0.3s; }
.hud.rewinding .hud-rewind { opacity: 1; }
.hud-who {
  margin-top: 14px; display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 3px; background: var(--card);
}
.swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--maya); box-shadow: 0 0 10px var(--maya); margin-top: 5px; flex: none; }
.hud-name { font-weight: 500; }
.hud-role { color: var(--muted); font-size: 13px; line-height: 1.4; }
.scenario[hidden] { display: none !important; }
.scenario { margin-top: 10px; display: grid; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 3px; background: var(--card); }
.scenario button {
  all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 2px; font-size: 13px; color: var(--muted); transition: background 0.2s, color 0.2s;
}
.scenario button:hover { color: var(--text); background: rgba(var(--ink-rgb),0.04); }
.scenario button[aria-pressed='true'] { color: var(--text); background: rgba(var(--ink-rgb),0.07); }
.scenario button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); opacity: 0.5; }
.scenario button[aria-pressed='true'] i { opacity: 1; box-shadow: 0 0 10px var(--c); }
.scenario button:focus-visible { outline: 1px solid var(--line-2); }

/* ---------- timeline rail ---------- */
.rail {
  position: fixed; left: 28px; top: 50%; transform: translateY(-50%); z-index: 5;
  display: flex; flex-direction: column; gap: 0;
  opacity: 0; transition: opacity 0.5s; pointer-events: none;
}
body.in-story .rail { opacity: 1; pointer-events: auto; }
.rail::before { content: ''; position: absolute; left: 3px; top: 8px; bottom: 8px; width: 1px; background: var(--line-2); }
.rail .fill { position: absolute; left: 3px; top: 8px; width: 1px; background: var(--maya); height: 0; transition: height 0.15s linear; }
.rail a {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 0;
  font: 11px var(--mono); color: var(--dim); text-decoration: none; transition: color 0.3s;
}
.rail a::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-2); transition: all 0.3s; z-index: 1; }
.rail a.passed::before { background: var(--maya); border-color: var(--maya); }
.rail a.active { color: var(--text); }
.rail a.active::before { box-shadow: 0 0 0 4px rgba(255,106,61,0.18); }
.rail a .lbl { opacity: 0; transform: translateX(-4px); transition: all 0.3s; color: var(--muted); font-family: var(--sans); }
.rail a:hover .lbl, .rail a.active .lbl { opacity: 1; transform: none; }
.rail a.today-mark { color: var(--maya); }

/* ---------- story chapters ---------- */
.story { position: relative; }
.chapter { min-height: 135vh; display: flex; align-items: center; padding: 0 28px 0 150px; }
.chapter:last-child { min-height: 150vh; }
.card {
  width: min(430px, 100%);
  padding: 28px 28px 24px; border-radius: 4px; position: relative;
  background: var(--card); border: 1px solid var(--line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0.25; transform: translateY(24px) scale(0.985);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.chapter.visible .card { opacity: 1; transform: none; }
.kicker { display: flex; justify-content: space-between; font: 12px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 14px; }
.kicker b { color: var(--maya); font-weight: 500; }
.card h3 { font-size: 27px; line-height: 1.12; letter-spacing: -0.02em; font-weight: 500; margin: 0 0 14px; text-wrap: balance; }
.story-text { color: var(--text-2); margin: 0 0 20px; }
.story-text::before { content: 'Story'; display: inline-block; margin-right: 8px; font: 10px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--maya); border: 1px solid rgba(255,106,61,0.35); padding: 1px 6px; border-radius: 4px; vertical-align: 2px; }
.evidence { display: grid; gap: 1px; background: var(--line); border-radius: 2px; overflow: hidden; border: 1px solid var(--line); }
.ev { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 14px; background: var(--surface-2); }
.ev-stat { font: 500 22px/1.1 var(--mono); letter-spacing: -0.03em; }
.ev-stat .badge { margin-top: 8px; }
.ev p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.ev .src { color: var(--muted); text-decoration: none; font: 11px var(--mono); white-space: nowrap; border-bottom: 1px solid var(--line-2); }
.ev .src:hover { color: var(--text); }
.badge { display: inline-block; font: 500 9.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.07em; padding: 4px 6px; border-radius: 4px; }
.badge.fact { color: var(--bg); background: var(--fact); }
.badge.estimate { color: var(--estimate); border: 1px solid var(--estimate); }
.badge.projection { color: var(--projection); border: 1px dashed var(--projection); }
.badge.scenario { display: inline-flex; margin: 0; padding: 4px 6px; background: none; color: var(--scenario); border: 1px dotted var(--scenario); }
.ev.scenario-ev .ev-stat { color: var(--scenario); font-size: 17px; }
.card .scenario { margin: 0 0 18px; grid-template-columns: repeat(3, 1fr); }
.card .scenario button { justify-content: center; padding: 8px 6px; font-size: 12px; text-align: center; }
.card .scenario button i { display: none; }
.card .scenario button[aria-pressed='true'] { box-shadow: inset 0 -2px 0 var(--c); }
.scenario-blurb { font-size: 13px; color: var(--muted); margin: -8px 0 18px; min-height: 20px; }

/* ---------- panels after the story ---------- */
.panel { padding: 140px 28px 60px; max-width: 1180px; margin: 0 auto; }
.panel-head { max-width: 720px; margin-bottom: 40px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs button {
  all: unset; cursor: pointer; font: 11.5px var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 7px 12px; border-radius: 2px; border: 1px solid var(--line);
  transition: all 0.2s;
}
.tabs button:hover { color: var(--text); border-color: var(--line-2); }
.tabs button[aria-selected='true'] { color: var(--bg); background: var(--text); border-color: var(--text); }
.tabs button:focus-visible { outline: 2px solid var(--maya); outline-offset: 2px; }
.feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.item { background: var(--bg-2); padding: 20px; display: flex; flex-direction: column; gap: 10px; min-height: 170px; transition: background 0.2s; animation: rise 0.6s var(--ease) both; }
.item:hover { background: var(--hover); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.item-meta { display: flex; justify-content: space-between; gap: 10px; font: 11px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.item a.title { text-decoration: none; font-size: 15.5px; line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; }
.item a.title:hover { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.item-foot { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { font-size: 11.5px; color: var(--muted); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; text-decoration: none; transition: all 0.2s; }
a.chip:hover { color: var(--maya); border-color: rgba(255,106,61,0.5); }
.chip.cat { color: var(--text-2); }
.skeleton { background: linear-gradient(90deg, #08080a, #111114, #08080a); background-size: 200% 100%; animation: sk 1.4s infinite; }
@keyframes sk { to { background-position: -200% 0; } }
.feed-note { grid-column: 1 / -1; padding: 16px 20px; background: var(--bg-2); color: var(--muted); font-size: 13px; }

.kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 40px; font-size: 13.5px; color: var(--text-2); }
.kind { --k: var(--fact); padding: 8px 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(var(--bg-rgb), 0.35); }
.kind.k-estimate { --k: var(--estimate); } .kind.k-projection { --k: var(--projection); } .kind.k-scenario { --k: var(--scenario); }
.kind figure { margin: 0 0 10px; }
.kind .badge { margin-left: 6px; }
.kind p { margin: 8px 6px 0; line-height: 1.45; }
.source-list { list-style: none; padding: 0; margin: 0; counter-reset: s; columns: 2 380px; column-gap: 40px; }
.source-list li { break-inside: avoid; counter-increment: s; display: grid; grid-template-columns: 34px 1fr; padding: 12px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.source-list li::before { content: counter(s, decimal-leading-zero); font: 11px var(--mono); color: var(--dim); padding-top: 3px; }
.source-list a { text-decoration: none; }
.source-list a:hover { color: var(--maya); }
.source-list span { display: block; color: var(--muted); font-size: 12.5px; }
.source-list li:target { background: rgba(255,106,61,0.06); }

/* the drawings beside the panel headings, and the street above the footer */
.panel-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 28px 48px; align-items: center; margin-bottom: 40px; }
.panel-top .panel-head { margin-bottom: 0; }
.panel-illo, .kind figure { padding: 8px 6px 0; border-radius: 10px; background-image: linear-gradient(rgba(var(--ink-rgb), 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ink-rgb), 0.03) 1px, transparent 1px); background-size: 18px 18px; }
.panel-illo { margin: 0; border: 1px solid var(--line); background-color: rgba(var(--bg-rgb), 0.35); }
@media (max-width: 900px) { .panel-top { grid-template-columns: minmax(0, 1fr); } .panel-illo { max-width: 560px; } }
.foot-illo { max-width: 1180px; margin: 60px auto 0; padding: 0 28px; }
.foot-illo .illo { height: 120px; overflow: hidden; }
@media (max-width: 600px) { .foot-illo { padding: 0 16px; } }
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding: 40px 28px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12px; max-width: 1180px; margin: 0 auto; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  :root { --ic-bar: 22px; --bar-btn: 42px; }
  .nav { padding: 12px 16px; gap: 10px; background: linear-gradient(var(--bg) 70%, rgba(var(--bg-rgb),0)); }
  .nav nav { display: none; }
  .xray-btn { margin-left: auto; }
  .brand, .xray-btn, .today { white-space: nowrap; }
  .hero { padding: 0 16px 16vh; }
  .scroll-cue { display: none; }
  .hud { right: 16px; top: 74px; width: auto; }
  .hud-year { font-size: 40px; }
  .hud-who { display: none; }
  .hud .scenario { display: none !important; }
  .rail { display: none; }
  .chapter { padding: 64vh 16px 12vh; align-items: flex-start; min-height: 0; }
  .chapter:last-child { min-height: 0; padding-bottom: 40vh; }
  .card { background: var(--card-solid); }
  .xray-btn { min-height: var(--bar-btn); padding: 0 13px; }
  .card { padding: 22px 18px 18px; }
  .card h3 { font-size: 23px; }
  .ev { grid-template-columns: 76px 1fr; gap: 10px; padding: 12px; }
  .ev-stat { font-size: 18px; }
  .panel { padding: 100px 16px 40px; }
  .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kind p { font-size: 13px; }
  .footer { flex-direction: column; padding: 30px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
.scenario .short { display: none; }
.card .scenario .full { display: none; }
.card .scenario .short { display: inline; }
.hero h1, .hero .lede { text-shadow: 0 2px 24px rgba(var(--bg-rgb), 0.9); }

/* blueprint corner marks on cards and panels */
.card::before, .card::after { content: ''; position: absolute; width: 10px; height: 10px; border-color: var(--line-2); border-style: solid; pointer-events: none; }
.card::before { top: -5px; left: -5px; border-width: 1px 0 0 1px; }
.card::after { bottom: -5px; right: -5px; border-width: 0 1px 1px 0; }
.chapter.visible .card::before, .chapter.visible .card::after { border-color: rgba(var(--ink-rgb), 0.6); }
.card h3 { font-weight: 400; }
h1, h2 { font-weight: 300; }
.ev-stat { font-weight: 400; }
.today, .chip { border-radius: 2px; }
.brand-mark { box-shadow: none; }
.maya-dot, .swatch { box-shadow: none; }
.crowd { background: transparent; border: 1px solid #b9b7b0; }
.hollow { border: 1px dashed #77756f; }
.machine { background: transparent; border: 1px solid var(--text); border-radius: 0; }

/* ---------- two scales: home + city ---------- */
.scales { display: grid; gap: 10px; margin: 0 0 18px; }
.scales > div { display: grid; grid-template-columns: 86px 1fr; gap: 12px; align-items: start; }
.scales p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.scale-tag { font: 10px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--maya); border-top: 1px solid rgba(255,106,61,0.5); padding-top: 4px; }
.scale-tag.city { color: var(--text); border-color: var(--line-2); }

/* ---------- city stats in the HUD ---------- */
.hud-city { margin-top: 10px; padding: 10px 14px 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--card); }
.hud-city-head { display: flex; justify-content: space-between; font: 10px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 6px; }
.hud-city-head span { color: var(--dim); }
.hud-stat { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 12px; color: var(--muted); padding: 4px 0; }
.hud-stat b { font: 500 12px var(--mono); color: var(--text); }
.hud-stat i { grid-column: 1 / -1; height: 1px; background: var(--line); position: relative; }
.hud-stat em { position: absolute; left: 0; top: -0.5px; height: 2px; background: var(--text); width: 0; transition: width 0.4s var(--ease); }

/* ---------- room panel ---------- */
.room {
  position: fixed; right: 28px; bottom: 24px; z-index: 5; margin: 0; width: 330px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--glass);
  opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); pointer-events: none;
}
body.in-story .room { opacity: 1; transform: none; }
.room::before { content: ''; position: absolute; top: -5px; left: -5px; width: 10px; height: 10px; border: solid rgba(255,106,61,0.7); border-width: 1px 0 0 1px; }
.room figcaption { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); font: 10.5px var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text); }
.room-ic { display: inline-flex; color: var(--maya); }
.room-year { margin-left: auto; color: var(--muted); }
#room-canvas { display: block; width: 100%; height: 230px; }
@media (max-height: 820px) and (min-width: 901px) { #room-canvas { height: 190px; } .room { width: 290px; } .hud-city { display: none; } }
@media (max-width: 900px) {
  .room { right: auto; left: 16px; top: 74px; bottom: auto; width: 170px; z-index: 2; }
  .hud { z-index: 2; }
  .room figcaption { padding: 5px 8px; font-size: 9px; }
  .room-year { display: none; }
  #room-canvas { height: 120px; }
  .hud-city { display: none; }
  .scales > div { grid-template-columns: 1fr; gap: 4px; }
  .scale-tag { justify-self: start; }
}

@media (max-width: 480px) { .today { display: none; } }
@media (max-width: 900px) { .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; } .tabs button { flex: none; } }

/* ---------- icons (SF Symbols-style line glyphs) ---------- */
.ic { width: 1.15em; height: 1.15em; min-width: var(--ic-min); min-height: var(--ic-min); flex: none; vertical-align: -0.2em; }
.nav nav a, .xray-btn, .today, .eyebrow, .hud-stat > span, .hud-city-head b, .scale-tag, .badge, .chip, .tabs button, .orbit-hint { display: inline-flex; align-items: center; gap: 6px; }
.nav nav a .ic { width: var(--ic-md); height: var(--ic-md); opacity: 0.8; }
.xray-btn .ic { width: var(--ic-bar); height: var(--ic-bar); }
.today .ic { width: var(--ic-min); height: var(--ic-min); }
.hud-city-head b { font-weight: 400; color: var(--muted); }
.hud-stat > span .ic, .hud-city-head .ic { width: var(--ic-min); height: var(--ic-min); opacity: 0.75; }
.scale-tag .ic { width: var(--ic-min); height: var(--ic-min); }
.badge .ic { width: var(--ic-min); height: var(--ic-min); margin-left: -1px; }
.ev-stat .badge { gap: 4px; }
.chip .ic { width: var(--ic-min); height: var(--ic-min); }
.tabs button .ic { width: var(--ic-min); height: var(--ic-min); opacity: 0.8; }
.room-ic .ic { width: var(--ic-min); height: var(--ic-min); }
.source-list li { grid-template-columns: 30px 18px 1fr; column-gap: 10px; }
.src-ic { width: 16px; height: 16px; color: var(--dim); margin-top: 3px; }
.eyebrow .ic { width: var(--ic-min); height: var(--ic-min); }

/* chapter app icon: an iOS-style squircle tile */
.kicker { align-items: center; gap: 10px; }
.kicker > span:nth-child(2) { margin-right: auto; }
.kicker .app {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none;
  color: var(--text); border: 1px solid var(--line-2);
  background: var(--tile);
  box-shadow: inset 0 1px 0 rgba(var(--ink-rgb),0.08), 0 4px 12px rgba(0,0,0,0.5);
}
.kicker .app .ic { width: var(--ic-md); height: var(--ic-md); }
.chapter.visible .kicker .app { color: var(--maya); border-color: rgba(255,106,61,0.45); }

/* ---------- a note from a hundred years ahead ---------- */
.future {
  margin: 18px 0 0; padding: 16px 16px 14px; position: relative;
  border: 1px solid rgba(185,166,255,0.35); border-radius: 14px;
  background: linear-gradient(180deg, rgba(185,166,255,0.09), rgba(185,166,255,0.025));
}
.future-head { display: flex; align-items: center; gap: 8px; font: 10.5px var(--mono); text-transform: uppercase; letter-spacing: 0.07em; color: var(--future); margin-bottom: 10px; }
.future-head .ic { width: var(--ic-min); height: var(--ic-min); }
.future-head em { margin-left: auto; font: inherit; font-style: normal; color: rgba(185,166,255,0.6); text-transform: none; letter-spacing: 0.02em; }
.future-note { margin: 0 0 12px; font-family: var(--display); font-weight: 300; font-size: 17px; line-height: 1.38; letter-spacing: -0.01em; color: var(--future-text); }
.future-note::before { content: '“'; } .future-note::after { content: '”'; }
.future-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.future-list li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--future-text-2); }
.future-list .ic { width: var(--ic-md); height: var(--ic-md); margin-top: 1px; }
.future-list .do .ic { color: #8fe3b0; }
.future-list .dont .ic { color: #ff8f7a; }
@media (max-width: 900px) {
  .future { padding: 14px 13px 12px; }
  .future-note { font-size: 16px; }
  .future-head em { display: none; }
  .nav nav a .ic { display: none; }
}
@media (max-width: 480px) { .today { display: none; } }

/* ---------- light mode: ink on paper ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f1ea; --bg-2: #ebe8e0; --bg-rgb: 243, 241, 234; --ink-rgb: 26, 28, 36;
  --card: rgba(255, 255, 255, 0.55); --card-solid: rgba(255, 255, 255, 0.82);
  --glass: rgba(255, 255, 255, 0.6); --glass-weak: rgba(255, 255, 255, 0.45); --glass-edge: rgba(255, 255, 255, 0.9);
  --surface-2: rgba(26, 28, 36, 0.025); --hover: rgba(26, 28, 36, 0.04);
  --tile: linear-gradient(160deg, #ffffff, #ece9e2);
  --line: rgba(26, 28, 36, 0.14); --line-2: rgba(26, 28, 36, 0.32);
  --text: #15161b; --text-2: #3a3c44; --text-3: #6a6c73; --muted: #6c6a64; --dim: #9b9990;
  --fact: #15161b; --estimate: #9a7419; --projection: #2b5fd6; --scenario: #7247dc;
  --future: #6a50dc; --future-text: #2b2163; --future-text-2: #4a4568;
}
:root { color-scheme: dark; }
:root[data-theme="light"] .future { border-color: rgba(106, 80, 220, 0.3); background: linear-gradient(180deg, rgba(106, 80, 220, 0.08), rgba(106, 80, 220, 0.02)); }
:root[data-theme="light"] .future-head em { color: rgba(106, 80, 220, 0.6); }
:root[data-theme="light"] .future-list .do .ic { color: #1f9a57; }
:root[data-theme="light"] .future-list .dont .ic { color: #d6452a; }
:root[data-theme="light"] .skeleton { background: linear-gradient(90deg, #ebe8e0, #f7f5f0, #ebe8e0); background-size: 200% 100%; }
:root[data-theme="light"] .kicker .app { box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(26, 28, 36, 0.12); }
body, .card, .hud-city, .room, .controls, .nav { transition: background-color 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease); }

/* ---------- glass ---------- */
.card, .hud-city, .hud-who, .room, .controls, .explore-bar, .today, .xray-btn, .icon-btn, .tabs button, .item {
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.card { background: var(--card); box-shadow: inset 0 1px 0 var(--glass-edge), 0 30px 60px -30px rgba(0, 0, 0, 0.45); border-radius: 18px; }
.card::before, .card::after { display: none; }
.ev, .evidence { border-radius: 12px; }
.evidence { overflow: hidden; }
.hud-city, .hud-who { background: var(--glass); box-shadow: inset 0 1px 0 var(--glass-edge); border-radius: 14px; }
.room { box-shadow: inset 0 1px 0 var(--glass-edge), 0 20px 50px -20px rgba(0, 0, 0, 0.5); overflow: hidden; }
.room::before { display: none; }
.today, .xray-btn { border-radius: 999px; background: var(--glass-weak); }
.item { background: var(--card); }
body.scrolled .nav { background: rgba(var(--bg-rgb), 0.55); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom: 1px solid var(--line); }

.icon-btn {
  width: var(--bar-btn); height: var(--bar-btn); border-radius: 999px; display: grid; place-items: center; cursor: pointer;
  color: var(--muted); background: var(--glass-weak); border: 1px solid var(--line); transition: color 0.2s, transform 0.3s var(--ease);
}
.icon-btn:hover { color: var(--text); }
.icon-btn:active { transform: scale(0.92); }
.icon-btn .ic { width: var(--ic-bar); height: var(--ic-bar); }

/* ---------- map controls ---------- */
.controls {
  position: fixed; z-index: 6; bottom: 24px; left: 58%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; padding: 5px;
  border-radius: 999px; background: var(--glass); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 18px 40px -18px rgba(0, 0, 0, 0.6);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
body.past-story .controls { opacity: 0; pointer-events: none; transform: translate(-50%, 12px); }
.controls button {
  height: 36px; min-width: 36px; padding: 0 9px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  color: var(--muted); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 500 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.2s, background 0.2s, transform 0.2s var(--ease);
}
.controls button:hover { color: var(--text); background: var(--hover); }
.controls button:active { transform: scale(0.9); }
.controls .ic { width: var(--ic-md); height: var(--ic-md); }
.controls .sep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; }
.controls .explore { color: var(--text); background: rgba(var(--ink-rgb), 0.07); padding: 0 13px; }
.controls .explore[aria-pressed="true"] { color: #fff; background: var(--maya); }
.compass { position: relative; width: 36px; }
.compass b { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); font: 600 7px var(--mono); color: var(--maya); }
.compass span { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: border-color 0.3s; }
.compass i { width: 2px; height: 14px; background: linear-gradient(var(--maya) 50%, var(--muted) 50%); border-radius: 2px; }
.controls.moved .compass span { border-color: var(--maya); }

/* ---------- explore mode ---------- */
html.lock, html.lock body { overflow: hidden; overscroll-behavior: none; }
body.exploring { touch-action: none; }
body.exploring main, body.exploring .rail, body.exploring #maya-tag { opacity: 0; pointer-events: none; }
body.exploring main { transition: opacity 0.5s var(--ease); }
body.exploring #world { opacity: 1 !important; }
body.exploring .vignette { opacity: 0.4; }
.explore-bar {
  position: fixed; z-index: 7; top: 78px; left: 50%; transform: translate(-50%, -12px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 14px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line); font-size: 12.5px; color: var(--text-2);
  box-shadow: inset 0 1px 0 var(--glass-edge); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); white-space: nowrap;
}
.explore-bar > span { display: inline-flex; align-items: center; gap: 8px; }
.explore-bar .ic { width: var(--ic-min); height: var(--ic-min); }
.explore-bar button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 0; cursor: pointer; background: var(--maya); color: #fff; font: 600 12px var(--sans); }
body.exploring .explore-bar { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
body.exploring .controls { opacity: 1 !important; pointer-events: auto !important; transform: translateX(-50%) !important; }

@media (max-width: 900px) {
  .controls { left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); padding: 4px; }
  .controls button { height: 38px; min-width: 38px; }
  .controls .explore span, .controls .explore { font-size: 10.5px; }
  .explore-bar { top: auto; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 58px); max-width: calc(100vw - 32px); }
  .explore-bar > span { font-size: 11.5px; white-space: normal; }
  .card { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
.explore-bar em { font-style: normal; font-family: var(--sans); }
.explore-bar .narrow { display: none; }
@media (hover: none), (max-width: 900px) { .explore-bar .wide { display: none; } .explore-bar .narrow { display: inline; } .explore-bar > span { white-space: nowrap; } }

/* ---------- topic tabs inside the note from the future ---------- */
.future-tabs { display: flex; gap: 4px; margin: 0 0 12px; padding: 3px; border-radius: 12px; background: rgba(var(--ink-rgb), 0.04); border: 1px solid rgba(185, 166, 255, 0.18); overflow-x: auto; scrollbar-width: none; }
.future-tabs::-webkit-scrollbar { display: none; }
.future-tabs button {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 30px; padding: 0 8px;
  border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; font: 500 11px var(--sans);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.future-tabs button span { display: none; }
.future-tabs button[aria-selected="true"] { background: var(--glass); color: var(--future); box-shadow: inset 0 1px 0 var(--glass-edge), 0 2px 8px rgba(0, 0, 0, 0.25); }
.future-tabs button[aria-selected="true"] span { display: inline; }
.future-tabs .ic { width: var(--ic-min); height: var(--ic-min); }
.future-pane { animation: pane-in 0.35s var(--ease); }
@keyframes pane-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.future-tip { display: grid; grid-template-columns: 20px 1fr; gap: 8px; margin: 0 0 8px; font-size: 14px; line-height: 1.45; color: var(--future-text); }
.future-tip b { font-weight: 500; }
.future-tip .ic { width: var(--ic-md); height: var(--ic-md); color: var(--future); margin-top: 1px; }
.future-why { margin: 0 0 0 28px; font-size: 13px; line-height: 1.5; color: var(--future-text-2); }
.future-why span { font: 10px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--future); margin-right: 4px; }
.future-more {
  margin-top: 14px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; text-decoration: none;
  font-size: 13px; color: var(--future-text); background: rgba(185, 166, 255, 0.08); border: 1px solid rgba(185, 166, 255, 0.22);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.future-more:hover { background: rgba(185, 166, 255, 0.16); transform: translateY(-1px); }
.future-more .ic { width: var(--ic-min); height: var(--ic-min); color: var(--future); }
.future-more .turn { margin-left: auto; transform: rotate(45deg); }
:root[data-theme="light"] .future-tabs { border-color: rgba(106, 80, 220, 0.16); }
:root[data-theme="light"] .future-more { background: rgba(106, 80, 220, 0.06); border-color: rgba(106, 80, 220, 0.2); }
@media (max-width: 900px) {
  .nav nav { display: flex; margin-left: auto; gap: 0; }
  .nav nav a:not(.nav-letters) { display: none; }
  .nav-letters { font-size: 0; line-height: 0; width: var(--bar-btn); height: var(--bar-btn); border-radius: 999px; display: flex !important; align-items: center; justify-content: center; gap: 0 !important; padding: 0; border: 1px solid var(--line); background: var(--glass-weak); }
  .nav nav a.nav-letters .ic { display: block; width: var(--ic-bar); height: var(--ic-bar); opacity: 1; color: var(--future); }
  .nav .xray-btn { margin-left: 0; }
}

/* ---------- the room, opened large ---------- */
body.in-story .room { pointer-events: auto; cursor: zoom-in; }
.room-btn { margin-left: 2px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--text); cursor: pointer; }
.room-btn .ic { width: var(--ic-min); height: var(--ic-min); }
.room-btn:hover { border-color: var(--maya); color: var(--maya); }
.room-items { display: none; }
.room-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(var(--bg-rgb), 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease); }
body.room-open .room-scrim { opacity: 1; pointer-events: auto; }
body.room-open .room {
  position: fixed; left: 50%; top: 50%; right: auto; bottom: auto; z-index: 41;
  width: min(calc(100vw - 32px), 920px); opacity: 1; transform: translate(-50%, -50%); cursor: default; pointer-events: auto;
  background: var(--card-solid);
}
body.room-open #room-canvas { height: min(64vh, 580px); }
body.room-open .room figcaption { padding: 12px 14px; font-size: 11px; }
body.room-open .room-year { display: inline; }
body.room-open .room-btn { width: 30px; height: 30px; border-radius: 9px; }
body.room-open .room-btn .ic { width: var(--ic-min); height: var(--ic-min); }
body.room-open .room-items { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 12px 14px 14px; list-style: none; border-top: 1px solid var(--line); }
.room-items li { font: 10.5px var(--mono); text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); }
.room-items li::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: var(--maya); vertical-align: 1px; }
@media (max-width: 900px) {
  .room-btn { width: 24px; height: 24px; border-radius: 7px; }
  .room-btn .ic { width: var(--ic-min); height: var(--ic-min); }
  body.room-open #room-canvas { height: min(58vh, 460px); }
}

/* ---------- now: live clock button in the top bar ---------- */
.now-btn {
  display: inline-flex; align-items: center; height: var(--bar-btn); padding: 0 12px 0 9px; gap: 0; cursor: pointer;
  font: 12px var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; background: var(--glass-weak);
  transition: color 0.25s, border-color 0.25s, background-color 0.25s, transform 0.3s var(--ease);
}
.now-btn:hover { color: var(--text); }
.now-btn:active { transform: scale(0.95); }
.now-ic { width: var(--ic-bar); height: var(--ic-bar); flex: none; overflow: visible; }
.now-ic line { transform-box: view-box; transform-origin: 12px 12px; transition: transform 0.35s cubic-bezier(.3,1.6,.5,1); }
.now-ic .now-h { stroke-width: 2; }
.now-ic .now-s { stroke: var(--maya); stroke-width: 1; opacity: 0; transition: transform 0.35s cubic-bezier(.3,1.6,.5,1), opacity 0.3s; }
.now-ic .now-ticks { opacity: 0.45; }
.now-ic .now-dot { fill: currentColor; stroke: none; }
.now-ic .now-ring { transform-box: view-box; transform-origin: 12px 12px; }
.now-date { margin-left: 7px; white-space: nowrap; }
.now-time { display: grid; grid-template-columns: 0fr; transition: grid-template-columns 0.5s var(--ease), margin 0.5s var(--ease); }
.now-time > span { overflow: hidden; min-width: 0; }
.now-time time { display: block; white-space: nowrap; padding-left: 8px; font-variant-numeric: tabular-nums; color: var(--text); }
.now-btn[aria-pressed="true"] { color: var(--maya); border-color: rgba(255, 106, 61, 0.45); background: rgba(255, 106, 61, 0.08); }
.now-btn[aria-pressed="true"] .now-time { grid-template-columns: 1fr; }
.now-btn[aria-pressed="true"] .now-s { opacity: 1; }
.now-btn[aria-pressed="true"] .now-date { display: none; }
.now-btn[aria-pressed="true"] .now-ring { animation: now-pulse 2s var(--ease) infinite; }
@keyframes now-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (max-width: 900px) {
  .now-btn { padding: 0 9px; }
  .now-date { display: none; }
  .now-time time { padding-left: 6px; }
}
@media (prefers-reduced-motion: reduce) { .now-btn[aria-pressed="true"] .now-ring { animation: none; } }
@media (max-width: 480px) {
  .nav { gap: 8px; }
  .nav .xray-btn { font-size: 0; letter-spacing: 0; width: var(--bar-btn); height: var(--bar-btn); padding: 0; justify-content: center; gap: 0; }
  .nav .xray-btn .ic { width: var(--ic-bar); height: var(--ic-bar); }
  .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 480px) {
  .brand { transition: font-size 0.4s var(--ease), gap 0.4s var(--ease); white-space: nowrap; }
  .nav:has(.now-btn[aria-pressed="true"]) .brand { font-size: 0; gap: 0; }
}

/* ---------- the advice icon: a note from the future, always twinkling ---------- */
.ic-advice { overflow: visible; }
.ic-advice .adv-star, .ic-advice .adv-spark { fill: currentColor; stroke-width: 0.8; transform-box: fill-box; transform-origin: center; }
.ic-advice .adv-star { animation: adv-twinkle 2.6s cubic-bezier(.45,0,.2,1) infinite; }
.ic-advice .adv-spark { animation: adv-spark 2.6s cubic-bezier(.45,0,.2,1) infinite; }
.ic-advice .adv-bubble { transform-box: fill-box; transform-origin: 20% 100%; animation: adv-bob 2.6s ease-in-out infinite; }
@keyframes adv-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 45% { transform: scale(0.55) rotate(90deg); } 60% { transform: scale(1.15) rotate(90deg); } }
@keyframes adv-spark { 0%, 30%, 100% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.3); opacity: 1; } 75% { transform: scale(0.8); opacity: 0.8; } }
@keyframes adv-bob { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg) translateY(-0.6px); } }
@media (prefers-reduced-motion: reduce) { .ic-advice * { animation: none !important; } }
.controls .room-act { display: none; color: var(--maya); }
body.in-story .controls .room-act { display: inline-flex; }

/* ---------- line-art plates for the letters ---------- */
.illo { display: block; width: 100%; height: auto; color: rgba(var(--ink-rgb), 0.78); overflow: visible; }
.illo .g { stroke-width: 0.7; opacity: 0.45; }
.illo .w { stroke-width: 0.5; opacity: 0.16; }
.illo .soft { stroke-width: 0.8; opacity: 0.4; }
.illo .thick { stroke-width: 3.2; }
.illo .limb { stroke: var(--maya); stroke-width: 2.4; }
.illo .c { stroke: var(--maya); }
.illo .cf { stroke: var(--maya); fill: rgba(255, 106, 61, 0.16); }
.illo .fillc, .illo .lamp, .illo .dot { fill: var(--maya); stroke: none; }
.illo .node { fill: var(--bg); }
.illo .leaf { stroke: #5fd3a0; opacity: 0.8; }
.illo .spark { stroke: #ffc46b; stroke-width: 1; }
.illo .lead { stroke: var(--maya); stroke-width: 0.8; opacity: 0.85; }
.illo .flow { stroke: var(--maya); stroke-width: 1.4; stroke-dasharray: 3 5; animation: illo-flow 1s linear infinite; }
.illo .t { font: 500 7.4px var(--mono); letter-spacing: 0.08em; fill: currentColor; stroke: none; }
.illo .t.co { fill: rgba(var(--ink-rgb), 0.92); }
.illo .t.tiny, .illo .t.dimt { fill: rgba(var(--ink-rgb), 0.5); font-size: 6.6px; }
.illo .t.big { font: 400 26px var(--display, inherit); letter-spacing: -0.02em; fill: rgba(var(--ink-rgb), 0.85); }
.illo .t.onc { fill: #fff; font-size: 6.6px; }

/* drawn in, line by line, once on screen */
.illo [style*="--i"] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.illo text, .illo .fillc, .illo .lamp, .illo .dot, .illo .cf { opacity: 0; }
.illo.on [style*="--i"] { animation: illo-draw 1.1s cubic-bezier(.5, 0, .2, 1) forwards; animation-delay: calc(var(--i) * 1.5s); }
.illo.on .cf { animation: illo-draw 1.1s cubic-bezier(.5, 0, .2, 1) forwards, illo-fade 0.6s ease forwards; animation-delay: calc(var(--i) * 1.5s), calc(var(--i) * 1.5s + 0.5s); }
.illo.on text, .illo.on .fillc, .illo.on .lamp, .illo.on .dot { animation: illo-fade 0.6s ease forwards 1.4s; }
@keyframes illo-draw { 0% { stroke-dasharray: 1; stroke-dashoffset: 1; } 99.9% { stroke-dasharray: 1; stroke-dashoffset: 0; } 100% { stroke-dasharray: none; stroke-dashoffset: 0; } }
@keyframes illo-fade { to { opacity: 1; } }
@keyframes illo-flow { to { stroke-dashoffset: -16; } }

/* and then kept alive */
.illo g[class*="a-"] { transform-box: fill-box; transform-origin: center; }
.illo g[style*="transform-origin"] { transform-box: view-box; }
.illo .a-blink { animation: illo-blink 1.4s steps(2, jump-none) infinite; }
.illo .a-blink.slow { animation-duration: 3.2s; }
.illo .a-blink.fast { animation-duration: 0.35s; }
.illo .a-spin { animation: illo-spin 3s linear infinite; }
.illo .a-hand { transform-box: view-box; animation: illo-spin 12s linear infinite; }
.illo .a-swing { animation: illo-swing 2.6s ease-in-out infinite alternate; }
.illo .a-sway { animation: illo-sway 3.4s ease-in-out infinite alternate; }
.illo .a-move { animation: illo-move 7s linear infinite; }
.illo .a-roam { animation: illo-roam 7s ease-in-out infinite alternate; }
.illo .a-steam { animation: illo-steam 2.8s ease-out infinite; }
.illo .a-tip { transform-origin: 100% 100%; animation: illo-tip 6s cubic-bezier(.5, 0, .3, 1) infinite; }
.illo .a-grow { transform-origin: 0 50%; animation: illo-grow 3.2s cubic-bezier(.4, 0, .2, 1) infinite alternate; }
.illo .a-appear { animation: illo-appear 6s ease infinite both; }
.illo .a-leave { animation: illo-leave 9s ease infinite; }
.illo .a-rise { transform-origin: 50% 100%; animation: illo-rise 4s cubic-bezier(.3, .7, .2, 1) infinite; }
.illo .a-bob { animation: illo-bob 3s ease-in-out infinite alternate; }
.illo .a-pulse { animation: illo-pulse 2.6s ease-out infinite; }
.illo .a-pulse.late { animation-delay: 1.3s; }
.illo .a-pulse.sun { animation: illo-sun 4s ease-in-out infinite alternate; }
.illo .a-orbit { animation: illo-spin 6s linear infinite; }
@keyframes illo-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }
@keyframes illo-spin { to { transform: rotate(360deg); } }
@keyframes illo-swing { from { transform: rotate(-9deg); } to { transform: rotate(7deg); } }
@keyframes illo-sway { from { transform: rotate(-2deg); } to { transform: rotate(2.5deg); } }
@keyframes illo-move { to { transform: translateX(210px); } }
@keyframes illo-roam { from { transform: translateX(-40px); } to { transform: translateX(70px); } }
@keyframes illo-steam { 0% { transform: translateY(2px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-9px); opacity: 0; } }
@keyframes illo-tip { 0%, 30% { transform: rotate(0); } 46% { transform: rotate(84deg); } 50% { transform: rotate(78deg); } 54%, 82% { transform: rotate(81deg); } 96%, 100% { transform: rotate(0); } }
@keyframes illo-grow { from { transform: scaleX(0.25); } to { transform: scaleX(1); } }
@keyframes illo-appear { 0%, 6% { opacity: 0; transform: translateY(4px); } 14%, 84% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes illo-leave { 0%, 35% { opacity: 1; } 45%, 80% { opacity: 0.1; } 90%, 100% { opacity: 1; } }
@keyframes illo-rise { 0% { transform: scaleY(0.3); } 40%, 100% { transform: scaleY(1); } }
@keyframes illo-bob { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes illo-pulse { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes illo-sun { from { transform: scale(0.94); opacity: 0.6; } to { transform: scale(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .illo *, .illo.on * { animation: none !important; stroke-dasharray: none !important; opacity: 1 !important; }
  .illo .flow { stroke-dasharray: 3 5 !important; }
  .illo .dash { stroke-dasharray: 4 4 !important; }
  .illo .dots { stroke-dasharray: 0.1 4.5 !important; }
  .illo .band { opacity: 0.3 !important; }
}

/* where the plates sit */
.future-illo { margin: 4px -4px 14px; padding: 10px 8px 2px; border-radius: 12px; border: 1px solid rgba(185, 166, 255, 0.16); background: rgba(var(--bg-rgb), 0.35); background-image: linear-gradient(rgba(var(--ink-rgb), 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ink-rgb), 0.03) 1px, transparent 1px); background-size: 18px 18px; }
@media (max-width: 600px) {
  .illo .t { font-size: 10.5px; letter-spacing: 0.04em; }
  .illo .t.tiny, .illo .t.dimt, .illo .t.onc { font-size: 8.5px; }
}
/* top bar buttons never squash; the brand gives way first */
.nav .icon-btn, .nav .xray-btn, .nav .now-btn, .nav .nav-letters { flex: none; }
/* narrow phones: the name stacks into a two-line lockup instead of being cut off */
@media (max-width: 400px) {
  .nav .brand { white-space: normal; font-size: 14px; line-height: 1.08; max-width: 104px; overflow: visible; }
  .nav { gap: 8px; }
}
/* plates off screen keep still, so they cost nothing */
.illo:not(.vis) g[class*="a-"], .illo:not(.vis) .flow { animation-play-state: paused; }

/* colours and moves for the panel drawings */
.illo .k1 { stroke: var(--fact); } .illo .k2 { stroke: var(--estimate); } .illo .k3 { stroke: var(--projection); } .illo .k4 { stroke: var(--scenario); }
.kind .illo .k1, .kind .illo .k2, .kind .illo .k3, .kind .illo .k4 { stroke: var(--k); }
.illo .fillk3 { fill: var(--projection); stroke: none; opacity: 0; }
.illo.on .fillk3 { animation: illo-fade 0.6s ease forwards 1.4s; }
.illo .fan { fill: var(--projection); fill-opacity: 0.08; stroke: none; }
.kind .illo .fan { fill: var(--k); }
.illo .dash { stroke-dasharray: 4 4; }
.illo .dots { stroke-dasharray: 0.1 4.5; stroke-width: 1.8; }
.illo .thickish { stroke-width: 2; }
.illo .band { stroke-width: 7; opacity: 0.3; }
.illo .nd.dash, .illo .nd.dots, .illo .fan { opacity: 0; }
.illo.on .nd.dash, .illo.on .nd.dots, .illo.on .fan { animation: illo-fade 0.8s ease forwards 1.2s; }
.illo .st { transition: color 0.35s; }
.illo[data-cat="employment"] .st-employment, .illo[data-cat="economics"] .st-economics, .illo[data-cat="politics"] .st-politics,
.illo[data-cat="technology"] .st-technology, .illo[data-cat="society"] .st-society, .illo[data-cat="research"] .st-research { color: var(--maya); }
.illo .a-drop { animation: illo-drop 3.6s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes illo-drop { 0% { transform: translateY(-14px); opacity: 0; } 15% { opacity: 1; } 55% { transform: translateY(0); opacity: 1; } 75%, 100% { transform: translateY(26px); opacity: 0; } }
.illo .a-feed { animation: illo-feed 6s ease infinite both; }
.illo .a-stamp { animation: illo-stamp 5s cubic-bezier(.3, 0, .2, 1) infinite; }
.illo .a-needle { animation: illo-needle 3.4s ease-in-out infinite alternate; }
.illo .a-probe { animation: illo-probe 3.2s ease-in infinite; }
.illo .a-probe2 { animation: illo-probe2 3.2s ease-in infinite; }
.illo .a-fan { animation: illo-fan 3.6s ease-in-out infinite alternate; }
.illo .a-twinkle { animation: illo-twinkle 2.4s ease-in-out infinite; }
.illo .a-walk { animation: illo-walk 36s linear infinite; }
.illo .a-walk2 { animation: illo-walk2 4.5s ease-in-out infinite; }
.illo .a-step { animation: illo-step 0.45s ease-in-out infinite alternate; }
@keyframes illo-feed { 0% { opacity: 0; transform: translateY(-5px); } 8%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(3px); } }
@keyframes illo-stamp { 0%, 8% { opacity: 0; transform: scale(1.35); } 18% { opacity: 1; transform: scale(0.94); } 24%, 86% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(1); } }
@keyframes illo-needle { from { transform: rotate(-16deg); } to { transform: rotate(14deg); } }
@keyframes illo-probe { 0% { transform: none; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(120px, -48px); opacity: 0; } }
@keyframes illo-probe2 { 0% { transform: none; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(94px, -30px); opacity: 0; } }
@keyframes illo-fan { from { transform: scaleY(0.8); } to { transform: scaleY(1.08); } }
@keyframes illo-twinkle { 0%, 100% { transform: scale(0.5) rotate(0); opacity: 0.4; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
@keyframes illo-walk { 0% { transform: translateX(-160px); } 49.9% { transform: translateX(160px); } 50% { transform: translateX(160px) scaleX(-1); } 99.9% { transform: translateX(-160px) scaleX(-1); } 100% { transform: translateX(-160px); } }
@keyframes illo-walk2 { 0% { transform: none; opacity: 0; } 12%, 80% { opacity: 1; } 90% { transform: translate(72px, -36px); opacity: 1; } 100% { transform: translate(72px, -36px); opacity: 0; } }
@keyframes illo-step { from { transform: translateY(0); } to { transform: translateY(-3px); } }

/* ---------- time scrubber (room opened large, explore mode) ---------- */
.scrub {
  position: fixed; z-index: 45; left: 50%; bottom: 24px; width: min(780px, calc(100vw - 32px));
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "play read track" "scen scen scen"; align-items: center; gap: 6px 16px;
  padding: 10px 18px 8px 10px; border-radius: 24px; background: var(--glass); border: 1px solid var(--line);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 18px 40px -18px rgba(0, 0, 0, 0.6);
  opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), bottom 0.35s var(--ease);
}
body.scrubbing .scrub { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
body.exploring .scrub { bottom: 84px; }
.scrub-play {
  grid-area: play; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--maya); color: #fff; transition: transform 0.2s var(--ease), background 0.2s;
}
.scrub-play:active { transform: scale(0.92); }
.scrub-play .ic { width: var(--ic-lg); height: var(--ic-lg); }
.scrub-play .ic-play { margin-left: 2px; fill: currentColor; }
.scrub.playing .scrub-play { background: rgba(var(--ink-rgb), 0.1); color: var(--text); }
.scrub-read { grid-area: read; display: flex; flex-direction: column; min-width: 104px; line-height: 1.15; }
.scrub-read b { font: 500 24px/1 var(--mono); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--text); }
.scrub-read span { font: 10.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.scrub-track { grid-area: track; position: relative; padding-bottom: 20px; }
.scrub-track input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 26px; margin: 0; background: transparent; cursor: pointer; touch-action: none; position: relative; z-index: 1; }
.scrub-track input::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--maya) calc(var(--p, 0) * 100%), var(--line-2) 0); }
.scrub-track input::-moz-range-track { height: 2px; border-radius: 2px; background: var(--line-2); }
.scrub-track input::-moz-range-progress { height: 2px; background: var(--maya); }
.scrub-track input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--maya); box-shadow: 0 0 0 5px rgba(255, 106, 61, 0.16); }
.scrub-track input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--maya); box-shadow: 0 0 0 5px rgba(255, 106, 61, 0.16); }
.scrub-track input:focus-visible { outline: none; }
.scrub-track input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(255, 106, 61, 0.4); }
.scrub-ticks { position: absolute; left: 10px; right: 10px; top: 0; bottom: 0; pointer-events: none; }
.scrub-ticks button {
  position: absolute; top: 20px; transform: translateX(-50%); pointer-events: auto; cursor: pointer;
  padding: 2px 3px; border: 0; background: none; font: 10px var(--mono); letter-spacing: 0.02em; color: var(--muted); transition: color 0.2s;
}
.scrub-ticks button::before { content: ''; position: absolute; left: 50%; top: -9px; width: 1px; height: 6px; background: var(--line-2); }
.scrub-ticks button:hover, .scrub-ticks button.on { color: var(--text); }
.scrub-ticks button.on::before { background: var(--maya); }
.scrub .scrub-scen { grid-area: scen; display: none; margin: 2px 0 2px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scrub.fut .scrub-scen { display: grid; }
.scrub-scen button { justify-content: center; padding: 6px; font-size: 12px; }
/* the room steps up a little to make way */
body.room-open.scrubbing .room { top: calc(50% - 50px); }
body.room-open.scrubbing #room-canvas { height: min(54vh, 520px); }
@media (max-width: 900px) {
  .scrub { bottom: max(12px, env(safe-area-inset-bottom)); grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "play read" "track track" "scen scen"; gap: 4px 12px; padding: 10px 14px 6px 10px; border-radius: 20px; }
  body.exploring .scrub { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 56px); }
  body.exploring .explore-bar { top: 74px; bottom: auto; }
  .scrub-read { flex-direction: row; align-items: baseline; gap: 10px; }
  .scrub-read span { max-width: none; }
  .scrub-ticks button { font-size: 9.5px; padding: 2px 1px; }
  .scrub .scenario .full { display: none; }
  .scrub .scenario .short { display: inline; }
  body.room-open.scrubbing .room { top: calc(50% - 72px); }
  body.room-open.scrubbing #room-canvas { height: min(40vh, 340px); }
}
@media (max-width: 900px) {
  /* city only means city only: the room and year card step aside while exploring on phones */
  body.exploring .room, body.exploring .hud { opacity: 0 !important; pointer-events: none !important; }
}
@media (max-width: 480px) {
  .explore-bar > span { white-space: normal !important; line-height: 1.3; }
  .explore-bar { border-radius: 18px; width: calc(100vw - 32px); justify-content: space-between; }
  .explore-bar button { flex: none; }
}
/* thirteen moments on a phone-width track: short years */
.scrub-ticks .ys { display: none; }
@media (max-width: 600px) { .scrub-ticks .yl { display: none; } .scrub-ticks .ys { display: inline; } }

/* ---------- tap a place: a glass note pinned above the roof ---------- */
.tip {
  position: fixed; left: 0; top: 0; z-index: 30; width: min(290px, calc(100vw - 32px)); padding: 13px 16px 12px;
  border-radius: 14px; background: var(--glass); border: 1px solid var(--line); color: var(--text);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 24px 50px -20px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  animation: tip-in 0.35s var(--ease);
}
.tip[hidden] { display: none; }
@keyframes tip-in { from { opacity: 0; } }
.tip-year { font: 11px var(--mono); color: var(--maya); letter-spacing: 0.06em; text-transform: uppercase; }
.tip b { display: block; margin: 3px 30px 6px 0; font: 600 16px var(--sans); letter-spacing: -0.01em; }
.tip p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.tip small { display: block; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font: 10.5px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.tip-x { position: absolute; top: 7px; right: 7px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.tip-x:hover { color: var(--text); background: var(--glass-weak); }
.tip-x .ic { width: var(--ic-min); height: var(--ic-min); }
body.pickable { cursor: pointer; }
/* the room, opened large: tap an object for its note */
.room-note {
  position: absolute; left: 0; top: 0; z-index: 2; width: min(270px, calc(100% - 20px)); padding: 11px 14px 12px;
  border-radius: 12px; background: var(--card-solid); border: 1px solid rgba(255, 106, 61, 0.45);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6); animation: tip-in 0.3s var(--ease);
}
.room-note[hidden] { display: none; }
.room-note b { display: block; margin-right: 30px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--maya); }
.room-note p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.room-items button { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.room-items li:has(button):hover { border-color: rgba(255, 106, 61, 0.6); }
.room-items li.hint { border: 0; padding-left: 2px; color: var(--muted); text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 12px; }
.room-items li.hint::before { display: none; }

/* ---------- advice: do / don't with icons, skills, signs, this week (homepage cards + Letters page) ---------- */
.av-cols { display: grid; gap: 12px; }
.av-cols h5, .av-extras h5 { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--future); }
.av-cols h5 .ic, .av-extras h5 .ic { width: var(--ic-min); height: var(--ic-min); flex: none; }
.av-do h5 { color: #8fe3b0; } .av-dont h5 { color: #ff8f7a; }
.av-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.av-list li { display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: start; font-size: 13px; line-height: 1.45; color: var(--av-text, var(--future-text-2)); }
.av-tile { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; border: 1px solid rgba(185, 166, 255, 0.28); background: rgba(185, 166, 255, 0.07); color: var(--future); box-shadow: inset 0 1px 0 var(--glass-edge); }
.av-tile .ic { width: var(--ic-min); height: var(--ic-min); }
.av-do .av-tile { color: #8fe3b0; border-color: rgba(143, 227, 176, 0.3); background: rgba(143, 227, 176, 0.06); }
.av-dont .av-tile { color: #ff8f7a; border-color: rgba(255, 143, 122, 0.3); background: rgba(255, 143, 122, 0.06); }
:root[data-theme="light"] .av-do h5, :root[data-theme="light"] .av-do .av-tile { color: #1f9a57; }
:root[data-theme="light"] .av-dont h5, :root[data-theme="light"] .av-dont .av-tile { color: #d6452a; }
.av-extras { display: grid; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(185, 166, 255, 0.25); }
.av-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.av-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 8px; border-radius: 999px; font-size: 12.5px; color: var(--future-text); border: 1px solid rgba(185, 166, 255, 0.3); background: rgba(185, 166, 255, 0.07); }
.av-chip .ic { width: var(--ic-md); height: var(--ic-md); color: var(--future); }
.av-week { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 12px; background: rgba(185, 166, 255, 0.07); border: 1px solid rgba(185, 166, 255, 0.24); }
.av-week p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--future-text); }
.av-week h5 { margin-bottom: 4px; }
.av-week-svg { width: 112px; height: auto; color: var(--future); overflow: visible; }
.av-week-svg text { font: 7px var(--mono); fill: currentColor; stroke: none; text-anchor: middle; opacity: 0.6; }
.av-week-svg rect, .av-week-svg .tick { stroke-dasharray: 100; stroke-dashoffset: 100; }
.av-week-svg .now { stroke-width: 1; opacity: 0; transform-origin: 12px 18px; }
.draw ellipse { stroke-dasharray: 100; stroke-dashoffset: 100; }
.av-radar .sweep { transform-origin: 12px 12px; animation: av-sweep 3.2s linear infinite; }
.av-radar .blip { animation: av-blip 3.2s linear infinite; }
@keyframes av-sweep { to { transform: rotate(360deg); } }
@keyframes av-blip { 0%, 8% { opacity: 0; } 12% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes av-draw { to { stroke-dashoffset: 0; } }
@keyframes av-ping { 0% { opacity: 0.7; transform: scale(0.75); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes av-in { from { opacity: 0; transform: translateY(4px); } }
/* everything draws in once the card (or letter) comes into view */
.chapter .av-chip .draw * { stroke-dasharray: 100; stroke-dashoffset: 100; }
.chapter.visible .av-chip .draw *, .lt-entry.in .av-chip .draw * { animation: av-draw 1.3s var(--ease) forwards; animation-delay: var(--d, 0s); }
.chapter.visible .av-week-svg rect, .lt-entry.in .av-week-svg rect { animation: av-draw 0.9s var(--ease) forwards; animation-delay: calc(var(--k) * 0.09s); }
.chapter.visible .av-week-svg .tick, .lt-entry.in .av-week-svg .tick { animation: av-draw 0.6s var(--ease) 0.9s forwards; }
.chapter.visible .av-week-svg .now, .lt-entry.in .av-week-svg .now { animation: av-ping 2.4s ease-out 1.4s infinite; }
.chapter.visible .av-list li, .lt-entry.in .av-list li { animation: av-in 0.5s var(--ease) both; animation-delay: calc(var(--k) * 0.06s); }
@media (prefers-reduced-motion: reduce) {
  .av-radar .sweep, .av-radar .blip, .av-week-svg .now { animation: none !important; }
  .av-week-svg rect, .av-week-svg .tick, .av-chip .draw * { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* ---------- next 12 months: a deck of tear-off forecast cards ---------- */
.live-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.months { --mc: var(--projection); overflow: hidden; }
.m-head { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px 56px; align-items: center; margin-bottom: 30px; }
.m-head .panel-head { margin-bottom: 0; }
.m-dial-box { width: 260px; aspect-ratio: 1; justify-self: end; }
.m-dial { width: 100%; height: 100%; color: rgba(var(--ink-rgb), 0.75); overflow: visible; }
.m-dial .dial-ticks { stroke-width: 0.8; opacity: 0.35; }
.m-dial .dial-ring { stroke-width: 0.8; stroke-dasharray: 2 4; opacity: 0.4; }
.m-dial .dial-sweep { transform-origin: 120px 120px; animation: m-turn 40s linear infinite; }
.m-dial .dial-sweep circle { fill: var(--mc); stroke: none; }
.m-dial .seg { cursor: pointer; }
.m-dial .seg-hit { stroke: transparent; stroke-width: 26; }
.m-dial .seg-arc { stroke: var(--line-2); stroke-width: 3; transition: stroke 0.3s, stroke-width 0.3s; }
.m-dial .seg:hover .seg-arc { stroke: rgba(var(--ink-rgb), 0.55); }
.m-dial .seg.on .seg-arc { stroke: var(--mc); stroke-width: 6; }
.m-dial text { font: 500 8.5px var(--mono); letter-spacing: 0.06em; fill: var(--muted); stroke: none; text-anchor: middle; }
.m-dial .seg.on text { fill: var(--mc); }
.m-dial .dial-hand { transform-origin: 120px 120px; transition: transform 0.7s var(--ease); }
.m-dial .dial-hand path { stroke: var(--mc); stroke-width: 1.6; }
.m-dial .dial-hand circle { fill: var(--mc); stroke: none; }
.m-dial .dial-m { font: 500 17px var(--display); letter-spacing: -0.02em; fill: var(--text); }
.m-dial .dial-y { font-size: 10px; fill: var(--muted); }
.m-dial .dial-p { font-size: 8px; fill: var(--mc); }
.m-dial:not(.vis) * { animation-play-state: paused !important; }
@keyframes m-turn { to { transform: rotate(360deg); } }

.m-deck-wrap { position: relative; margin: 0 -28px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.m-deck { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 28px; padding: 8px 28px 22px; scrollbar-width: none; overscroll-behavior-x: contain; outline: none; }
.m-deck::-webkit-scrollbar { display: none; }
.m-deck::after { content: ''; flex: 0 0 12px; }
.m-deck:focus-visible { box-shadow: inset 0 0 0 1px var(--mc); border-radius: 24px; }

.mcard { flex: 0 0 344px; scroll-snap-align: start; position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; border-radius: 24px; background: var(--card-solid); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--glass-edge), 0 26px 50px -30px rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); opacity: 0.55; transform: translateY(6px) scale(0.985); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), border-color 0.3s; }
.mcard.on { opacity: 1; transform: none; }
.mcard::before { content: ''; position: absolute; inset: 0 24px auto; height: 2px; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, transparent, var(--mc), transparent); opacity: 0.8; }
.mcard:hover { border-color: rgba(var(--ink-rgb), 0.24); }
.mcard.past { filter: grayscale(0.8); }
.mcard.past .mc-when { color: var(--dim); border-color: var(--line); }

.mc-top { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding-bottom: 14px; position: relative; }
/* tear-off perforation with two notches */
.mc-top::after { content: ''; position: absolute; left: -18px; right: -18px; bottom: 0; border-bottom: 1.5px dashed var(--line-2); }
.mc-top::before { content: ''; position: absolute; left: -26px; right: -26px; bottom: -8px; height: 16px; background: radial-gradient(circle at 8px 8px, var(--bg) 7px, transparent 7.5px) left / 16px 16px no-repeat, radial-gradient(circle at 8px 8px, var(--bg) 7px, transparent 7.5px) right / 16px 16px no-repeat; z-index: 1; }
.mc-cal { width: 56px; border-radius: 13px; overflow: hidden; display: grid; text-align: center; background: var(--tile); box-shadow: inset 0 0 0 1px var(--line), 0 6px 14px -8px rgba(0, 0, 0, 0.5); position: relative; }
.mc-cal::before, .mc-cal::after { content: ''; position: absolute; top: 4px; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); }
.mc-cal::before { left: 13px; } .mc-cal::after { right: 13px; }
.mc-y { font: 600 9.5px/1 var(--mono); letter-spacing: 0.08em; color: #fff; background: var(--mc); padding: 11px 0 4px; }
.mc-m { font: 600 21px/1 var(--display); letter-spacing: -0.02em; padding: 7px 0 9px; text-transform: uppercase; }
.mc-meta { display: grid; gap: 5px; min-width: 0; }
.mc-n { font: 10.5px var(--mono); color: var(--dim); letter-spacing: 0.08em; }
.mc-cat { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--sans); color: var(--text-2); }
.mc-cat .ic { width: var(--ic-md); height: var(--ic-md); color: var(--mc); }
.mc-when { font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--mc); border: 1px solid color-mix(in srgb, var(--mc) 45%, transparent); border-radius: 999px; padding: 5px 8px; white-space: nowrap; align-self: start; }
.mcard.nowm .mc-when { color: #fff; background: var(--mc); }

.mc-art { margin: 4px 0 0; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); padding: 8px 6px 4px; background-color: rgba(var(--bg-rgb), 0.35); background-image: linear-gradient(rgba(var(--ink-rgb), 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ink-rgb), 0.035) 1px, transparent 1px); background-size: 15px 15px; }
.mc-date { display: flex; align-items: center; gap: 7px; margin: 0; font: 11.5px var(--mono); color: var(--text-2); }
.mc-date .ic { width: var(--ic-min); height: var(--ic-min); color: var(--mc); flex: none; }
.mc-date span { flex: 1; min-width: 0; }
.mc-date b { font: 500 9px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); border-radius: 4px; padding: 3px 5px; }
.mcard h3 { margin: 0; font: 500 21px/1.18 var(--display); letter-spacing: -0.02em; }
.mc-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.mc-call { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.mc-gauge { width: 84px; flex: none; color: var(--line-2); }
.mc-gauge .g-track { stroke-width: 6; opacity: 0.6; }
.mc-gauge .g-val { stroke: var(--mc); stroke-width: 6; stroke-dasharray: 0 100; transition: stroke-dasharray 1.2s var(--ease) 0.3s; }
.mcard.on .mc-gauge .g-val { stroke-dasharray: var(--p) 100; }
.mc-gauge .g-ticks { stroke-width: 1.2; }
.mc-gauge .g-needle { transform-origin: 50px 50px; transform: rotate(-90deg); transition: transform 1.2s var(--ease) 0.3s; }
.mcard.on .mc-gauge .g-needle { transform: rotate(var(--deg)); }
.mc-gauge .g-needle path { stroke: var(--text); stroke-width: 1.8; }
.mc-gauge .g-needle circle { fill: var(--text); stroke: none; }
.mc-call > div { display: grid; line-height: 1.15; }
.mc-lbl { font: 10px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.mc-call b { font: 500 26px/1.1 var(--mono); letter-spacing: -0.03em; }
.mc-like { font-size: 12.5px; color: var(--mc); }
.mc-basis { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding-top: 12px; border-top: 1px dashed var(--line-2); margin-top: auto; }
.mc-stat { display: grid; gap: 7px; align-content: start; justify-items: start; font: 500 18px/1.05 var(--mono); letter-spacing: -0.03em; }
.mc-basis p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.mc-basis .src { color: var(--muted); text-decoration: none; font: 11px var(--mono); white-space: nowrap; border-bottom: 1px solid var(--line-2); }
.mc-basis .src:hover { color: var(--text); }

.m-nav { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.m-nav > button { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); color: var(--text); cursor: pointer; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); transition: border-color 0.2s, background 0.2s; }
.m-nav > button:hover { border-color: var(--line-2); background: var(--hover); }
.m-nav > button .ic { width: var(--ic-lg); height: var(--ic-lg); }
.m-strip { flex: 1; display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.m-strip button { display: grid; justify-items: center; gap: 6px; padding: 6px 0; background: none; border: 0; color: var(--dim); font: 500 10.5px var(--mono); cursor: pointer; }
.m-strip i { width: 100%; height: 3px; border-radius: 3px; background: var(--line); transition: background 0.3s; }
.m-strip button:hover { color: var(--text-2); }
.m-strip button.on { color: var(--mc); }
.m-strip button.on i { background: var(--mc); }

/* line drawings */
.mart { display: block; width: 100%; height: auto; color: rgba(var(--ink-rgb), 0.8); overflow: visible; }
.mart .ac { stroke: var(--mc); } .mart .c { stroke: var(--maya); }
.mart .soft { opacity: 0.45; } .mart .g { opacity: 0.3; } .mart .w { opacity: 0.14; } .mart .thick { stroke-width: 2.6; }
.mart .dotc { fill: currentColor; stroke: none; } .mart .dotc.c { fill: var(--maya); } .mart .ac-fill { fill: var(--mc); }
.mart .mt { font: 500 8px var(--mono); letter-spacing: 0.08em; fill: currentColor; stroke: none; opacity: 0; }
.mart .mt.mid { text-anchor: middle; } .mart .mt.tiny { font-size: 7px; fill-opacity: 0.6; } .mart .mt.ac { fill: var(--mc); }
.mart .mt.big { font: 500 18px var(--display); letter-spacing: -0.01em; } .mart .mt.co { fill: var(--maya); fill-opacity: 1; }
.mart .d { stroke-dasharray: 100; stroke-dashoffset: 100; }
.mart .f, .mart .fanf, .mart .dotc, .mart .led, .mart .caret, .mart .mo-ping, .mart .mo-ping2 { opacity: 0; }
.mcard.on .mart .d { animation: m-draw 1.3s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 0.14s + 0.1s); }
.mcard.on .mart .mt, .mcard.on .mart .f, .mcard.on .mart .dotc { animation: m-fade 0.6s ease forwards 0.9s; }
.mart .soft.f { --o: 0.45; }
@keyframes m-draw { to { stroke-dashoffset: 0; } }
@keyframes m-fade { to { opacity: var(--o, 1); } }
.mart [class*="mo-"], .mart .led { transform-box: fill-box; transform-origin: center; }
.mart g[style*="transform-origin"] { transform-box: view-box; }
.mart .flow { stroke: var(--mc); stroke-dasharray: 3 6; }
.mart .lane { stroke-dasharray: 9 9; opacity: 0.6; }
.mart .dash { stroke-dasharray: 4 5; }
.mart .gap { stroke-dasharray: 3 5; }
.mcard.on .mart .flow { animation: m-fade 0.6s ease forwards 0.9s, m-flow 0.9s linear infinite; }
.mcard.on .mart .flow.rev { animation-direction: normal, reverse; }
.mcard.on .mart .lane { animation: m-fade 0.6s ease forwards 0.9s, m-lane 0.7s linear infinite; }
.mcard.on .mart .gap { animation: m-fade 0.6s ease forwards 0.9s, m-blink 1.6s ease-in-out infinite 1.5s; }
@keyframes m-flow { to { stroke-dashoffset: -18; } }
@keyframes m-lane { to { stroke-dashoffset: -18; } }
@keyframes m-blink { 50% { opacity: 0.15; } }
.mcard.on .mo-drop { animation: m-drop 2.8s cubic-bezier(.55, 0, .45, 1) infinite 1.4s; }
@keyframes m-drop { 0% { transform: translateY(-40px); opacity: 0; } 15% { opacity: 1; } 75%, 100% { transform: translateY(56px); opacity: 1; } }
.mcard.on .mo-pulse { animation: m-fade 0.6s ease forwards 0.9s, m-pulse 1.6s ease-in-out infinite 1.5s; }
@keyframes m-pulse { 50% { transform: scale(1.8); } }
.mart .mo-ping { fill: none; stroke: var(--mc); }
.mcard.on .mo-ping, .mcard.on .mo-ping2 { animation: m-ping 1.8s ease-out infinite 1.4s; }
.mart .mo-ping2 { fill: none; stroke: var(--mc); }
@keyframes m-ping { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(2.8); opacity: 0; } }
.mcard.on .mo-drive { animation: m-drive 7s linear infinite; }
.mart .mo-drive { transform-box: view-box; transform: translateX(110px); }
@keyframes m-drive { from { transform: translateX(-70px); } to { transform: translateX(320px); } }
.mcard.on .mo-pin { animation: m-bob 1.8s ease-in-out infinite alternate; animation-delay: var(--t); }
@keyframes m-bob { to { transform: translateY(-4px); } }
.mart .mo-tick { stroke-dasharray: 100; stroke-dashoffset: 100; stroke-width: 1.8; }
.mcard.on .mo-tick { animation: m-tick 3.6s ease infinite; animation-delay: calc(var(--t) + 1.2s); }
@keyframes m-tick { 0% { stroke-dashoffset: 100; opacity: 1; } 18%, 82% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.mcard.on .mo-stamp { animation: m-stamp 3.6s var(--ease) infinite 1.6s; }
@keyframes m-stamp { 0% { transform: translate(6px, -16px) scale(1.2) rotate(-10deg); opacity: 0; } 25% { opacity: 0.8; transform: translate(6px, -16px) scale(1.2) rotate(-10deg); } 36% { transform: rotate(-8deg); opacity: 1; } 85% { transform: rotate(-8deg); opacity: 1; } 100% { transform: rotate(-8deg); opacity: 0; } }
.mart .mo-rise { transform-origin: center bottom; transform: scaleY(0); }
.mcard.on .mo-rise { animation: m-rise 1s var(--ease) forwards; animation-delay: calc(var(--i) * 0.16s + 0.2s); }
@keyframes m-rise { to { transform: scaleY(1); } }
.mart .led { fill: var(--mc); stroke: none; }
.mcard.on .mart .led { animation: m-led 1.5s steps(2, jump-none) infinite; animation-delay: calc(var(--t) + 1.2s); }
@keyframes m-led { 0% { opacity: 0.15; } 100% { opacity: 1; } }
.mcard.on .mo-heat { animation: m-heat 2.4s ease-in-out infinite 1.4s; }
@keyframes m-heat { 0% { transform: translateY(4px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-6px); opacity: 0; } }
.mcard.on .mo-x { animation: m-x 3.2s ease infinite; animation-delay: calc(var(--t) + 1.2s); }
.mart .mo-x { opacity: 0; }
@keyframes m-x { 0%, 20% { opacity: 0; } 35%, 85% { opacity: 1; } 100% { opacity: 0; } }
.mart .mo-spin { opacity: 0; --o: 0.55; }
.mcard.on .mo-spin { animation: m-fade 0.6s ease forwards 0.9s, m-spin 6s linear infinite; }
@keyframes m-spin { 0% { transform: scaleX(1); } 25% { transform: scaleX(0.02); } 50% { transform: scaleX(-1); } 75% { transform: scaleX(0.02); } 100% { transform: scaleX(1); } }
.mcard.on .mo-toss { animation: m-toss 2.6s cubic-bezier(.4, 0, .4, 1) infinite 1.4s; }
@keyframes m-toss { 0%, 100% { transform: translateY(14px) rotate(0); } 50% { transform: translateY(-14px) rotate(-18deg); } }
.mcard.on .mo-roll { animation: m-roll 1.2s linear infinite; }
@keyframes m-roll { to { transform: rotate(360deg); } }
.mcard.on .mo-belt { animation: m-belt 3s linear infinite; }
@keyframes m-belt { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(64px); opacity: 0; } }
.mcard.on .mo-belt2 { animation: m-belt2 2.4s linear infinite; }
@keyframes m-belt2 { 0% { transform: translateX(-44px); } 100% { transform: translateX(0); } }
.mcard.on .mo-bob { animation: m-bob2 0.9s ease-in-out infinite alternate; }
@keyframes m-bob2 { to { transform: translateY(-1.5px); } }
.mcard.on .mo-legl { animation: m-leg 0.9s ease-in-out infinite alternate; }
.mcard.on .mo-legr { animation: m-leg 0.9s ease-in-out infinite alternate-reverse; }
@keyframes m-leg { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.mcard.on .mart .d.mo-tw { animation: m-draw 1.3s var(--ease) forwards, m-tw 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.14s + 0.1s), calc(var(--t) + 2s); }
@keyframes m-tw { 50% { transform: scale(0.6) rotate(36deg); opacity: 0.5; } }
.mcard.on .mo-swing { animation: m-swing 2.2s ease-in-out infinite alternate 1.4s; }
@keyframes m-swing { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
.mcard.on .mo-sh { animation: m-sh 3.2s ease-in-out infinite alternate 1s; }
.mcard.on .mo-el { animation: m-el 3.2s ease-in-out infinite alternate 1s; }
@keyframes m-sh { from { transform: rotate(-10deg); } to { transform: rotate(16deg); } }
@keyframes m-el { from { transform: rotate(12deg); } to { transform: rotate(-22deg); } }
.mart .caret { fill: var(--mc); stroke: none; }
.mcard.on .mart .caret { animation: m-led 1s steps(2, jump-none) infinite 1.2s; }
.mart .fanf { fill: var(--mc); stroke: none; }
.mcard.on .mart .fanf { --o: 0.14; animation: m-fade 1s ease forwards 1s; }
.mcard:not(.vis) .mart *, .mcard:not(.vis) .mart { animation-play-state: paused !important; }

:root[data-theme="light"] .mcard { box-shadow: inset 0 1px 0 var(--glass-edge), 0 20px 40px -26px rgba(26, 28, 36, 0.3); }
:root[data-theme="light"] .mc-cal::before, :root[data-theme="light"] .mc-cal::after { background: rgba(255, 255, 255, 0.95); }

@media (max-width: 900px) {
  .m-head { grid-template-columns: minmax(0, 1fr); }
  .m-dial-box { width: min(240px, 64vw); justify-self: center; }
  .m-deck-wrap { margin: 0 -16px; }
  .m-deck { padding: 8px 16px 20px; scroll-padding-left: 16px; }
}
@media (max-width: 600px) {
  .m-deck { gap: 12px; }
  .m-deck-wrap { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); }
  .m-dial-box { width: min(200px, 54vw); }
  .mc-basis { grid-template-columns: 94px 1fr; }
  .mcard { flex-basis: min(86vw, 344px); padding: 14px 16px 16px; }
  .mc-top::after { left: -16px; right: -16px; }
  .mc-top::before { left: -24px; right: -24px; }
  .mcard h3 { font-size: 19.5px; }
  .m-strip button span { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mart .d, .mart .mo-tick { stroke-dasharray: none; stroke-dashoffset: 0; }
  .mart .mt, .mart .f, .mart .dotc, .mart .led, .mart .caret, .mart .mo-x { opacity: 1; }
  .mart .mo-rise { transform: none; }
  .mart *, .m-dial * { animation: none !important; }
  .mcard { opacity: 1; transform: none; }
}

/* ---------- in the UK: small coloured tiles per year ---------- */
.uk { margin: 16px 0 0; }
.uk-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font: 11px var(--mono); text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.uk-head b { font-weight: 500; color: var(--text-2); }
.uk-head > span { margin-left: auto; }
.uk-flag { width: 24px; height: 15px; flex: none; color: var(--text-2); }
.uk-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.uk-tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.uk-tile { position: relative; display: grid; gap: 5px; align-content: start; padding: 10px 11px 11px; border-radius: 14px; background: color-mix(in srgb, var(--tc) 15%, var(--card-solid)); border: 1px solid color-mix(in srgb, var(--tc) 34%, transparent); }
.uk-top { display: flex; align-items: center; gap: 7px; }
.uk-ic { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--tc); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 3px 8px -4px var(--tc); }
.uk-ic .ic { width: var(--ic-min); height: var(--ic-min); stroke-width: 1.8; }
.uk-lbl { font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: 0.07em; color: color-mix(in srgb, var(--tc) 72%, var(--text)); }
.uk-kind { margin-left: auto; display: grid; color: var(--muted); }
.uk-kind .ic { width: var(--ic-min); height: var(--ic-min); }
.uk-stat { font: 500 17px/1.1 var(--mono); letter-spacing: -0.02em; }
.uk-tile p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.uk-tile .src { color: var(--muted); text-decoration: none; font: 11px var(--mono); white-space: nowrap; border-bottom: 1px solid var(--line-2); }
.uk-tile.uk-scenario { border-style: dashed; }
.uk-tile.uk-scenario .uk-stat { justify-self: start; font: 500 9.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--scenario); border: 1px dotted var(--scenario); border-radius: 4px; padding: 4px 6px; }
.chapter .uk-tile { opacity: 0; transform: translateY(6px) scale(0.98); }
.chapter.visible .uk-tile { animation: uk-in 0.55s var(--ease) forwards; animation-delay: calc(var(--k) * 90ms + 250ms); }
.chapter.visible .uk-ic .ic { animation: uk-pop 0.6s var(--ease) both; animation-delay: calc(var(--k) * 90ms + 450ms); }
@keyframes uk-in { to { opacity: 1; transform: none; } }
@keyframes uk-pop { from { transform: scale(0.4) rotate(-20deg); opacity: 0; } }
:root[data-theme="light"] .uk-tile { background: color-mix(in srgb, var(--tc) 11%, #fff); border-color: color-mix(in srgb, var(--tc) 30%, transparent); }
:root[data-theme="light"] .uk-lbl { color: color-mix(in srgb, var(--tc) 75%, #000); }
@media (prefers-reduced-motion: reduce) { .chapter .uk-tile { opacity: 1; transform: none; animation: none !important; } }

/* ---------- motion details: theme ripple, tap ripples, reveals ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-group(theme-rings), ::view-transition-new(theme-rings), ::view-transition-old(theme-rings) { animation: none; }
html.vt *, html.vt *::before, html.vt *::after { transition: none !important; }
.theme-rings { position: fixed; inset: 0; z-index: 100; pointer-events: none; view-transition-name: theme-rings; contain: strict; }
.theme-rings i {
  position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; border-radius: 50%;
  border: 1.5px solid var(--maya); transform: translate(-50%, -50%); opacity: 0;
}
.theme-rings.go i { animation: theme-ring 0.82s cubic-bezier(.6,0,.2,1) forwards; }
.theme-rings.go i:nth-child(2) { border: 1px solid rgba(255, 106, 61, 0.55); animation-delay: 0.08s; }
.theme-rings.go i:nth-child(3) { border: 1px dashed rgba(255, 106, 61, 0.4); animation-delay: 0.16s; animation-duration: 0.95s; }
@keyframes theme-ring { 0% { width: 0; height: 0; opacity: 1; } 75% { opacity: 0.85; } 100% { width: var(--d); height: var(--d); opacity: 0; } }
#theme.flip .ic { animation: theme-flip 0.7s cubic-bezier(.3,1.5,.5,1); }
@keyframes theme-flip { from { transform: rotate(-120deg) scale(0.3); opacity: 0; } to { transform: none; opacity: 1; } }
.icon-btn .ic { transition: transform 0.35s cubic-bezier(.3,1.6,.5,1); }
.icon-btn:hover .ic { transform: rotate(-14deg) scale(1.08); }

.tap { position: fixed; z-index: 90; pointer-events: none; overflow: hidden; }
.tap i { position: absolute; border-radius: 50%; background: rgba(var(--ink-rgb), 0.16); transform: translate(-50%, -50%) scale(0); animation: tap 0.65s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes tap { 60% { opacity: 1; } to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

.rv > * { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--rv, 0s); }
.rv.in > * { opacity: 1; transform: none; }

/* links and chips: an underline that draws itself, arrows that nudge */
.nav nav a { position: relative; }
.nav nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--maya); transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--ease); }
.nav nav a:hover::after, .nav nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 900px) { .nav nav a::after { display: none; } }
.footer a { color: var(--muted); text-decoration: none; background: linear-gradient(var(--maya), var(--maya)) 0 100% / 0 1px no-repeat; transition: background-size 0.4s var(--ease), color 0.2s; }
.footer a:hover { color: var(--text); background-size: 100% 1px; }
.chip:active, .tabs button:active, .scenario button:active { transform: scale(0.95); }
.ev { transition: background-color 0.25s; }
.ev:hover { background: var(--hover); }
.ev-stat .badge .ic { transition: transform 0.4s cubic-bezier(.3,1.6,.5,1); }
.ev:hover .ev-stat .badge .ic { transform: rotate(-12deg) scale(1.15); }
.chapter .ev { opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), background-color 0.25s; }
.chapter.visible .ev { opacity: 1; transform: none; }
.chapter.visible .ev:nth-child(2) { transition-delay: 0.12s, 0.12s, 0s; }
.chapter.visible .ev:nth-child(3) { transition-delay: 0.24s, 0.24s, 0s; }
.chapter.visible .ev:nth-child(4) { transition-delay: 0.36s, 0.36s, 0s; }
.item { transition: background 0.2s, transform 0.3s var(--ease); }
.item:hover { transform: translateY(-2px); }
.source-list li { transition: transform 0.25s var(--ease); }
.source-list li:hover { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .rv > *, .chapter .ev { opacity: 1 !important; transform: none !important; transition: none !important; }
  #theme.flip .ic, .tap i, .theme-rings i { animation: none !important; }
  .item:hover, .source-list li:hover, .icon-btn:hover .ic { transform: none; }
}

/* ---------- the mass-replacement clock (home hero and Resources) ---------- */
.tclock { position: relative; display: inline-block; max-width: 100%; }
.tc-btn {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px 6px 8px; border-radius: 999px;
  border: 1px solid rgba(255, 106, 61, 0.4); background: var(--glass-weak); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  font: 11px var(--mono); color: var(--text-2); letter-spacing: 0.02em; transition: border-color 0.25s, background 0.25s;
}
.tc-btn:hover, .tclock.open .tc-btn { border-color: var(--maya); background: rgba(255, 106, 61, 0.08); }
.tc-btn:focus-visible { outline: 2px solid var(--maya); outline-offset: 2px; }
.tc-glass { width: 18px; height: 18px; color: var(--maya); flex: none; }
.tc-turn { transform-origin: 12px 12px; animation: tc-turn 60s linear infinite; }
@keyframes tc-turn { 0%, 97% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
.tc-top { animation: tc-top 60s linear infinite; transform-origin: 12px 10.4px; }
.tc-bot { animation: tc-bot 60s linear infinite; transform-origin: 12px 19.2px; }
@keyframes tc-top { from { transform: scale(1); } 97%, to { transform: scale(0.15); } }
@keyframes tc-bot { from { transform: scale(0.2); } 97%, to { transform: scale(1); } }
.tc-fall { animation: tc-fall 0.8s linear infinite; }
@keyframes tc-fall { to { stroke-dashoffset: -3; } }
.tc-lbl { text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-size: 10.5px; }
.tc-count { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tc-count b { font-weight: 500; color: var(--maya); }
.tc-btn .badge { padding: 3px 5px; font-size: 9px; }
.tc-pop {
  position: absolute; z-index: 30; left: 0; top: calc(100% + 8px); width: min(380px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--glass-edge), 0 24px 50px -20px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); font-size: 13px; line-height: 1.55; color: var(--text-2);
  animation: pane-in 0.3s var(--ease);
}
.tc-pop p { margin: 0 0 8px; }
.tc-pop p:last-child { margin: 0; }
.tc-when b { color: var(--maya); font-weight: 500; }
.tc-refs { font: 11px/1.6 var(--mono); color: var(--muted); }
.tc-refs .src { color: var(--text-2); text-decoration: none; border-bottom: 1px solid var(--line-2); margin-right: 6px; }

@media (prefers-reduced-motion: reduce) { .tc-turn, .tc-top, .tc-bot, .tc-fall { animation: none !important; } }

/* ---------- Resources link, today's digest, footnote card ---------- */
.hero-clock { margin: -10px 0 26px; }
.res-cta {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 18px; text-decoration: none; color: var(--text);
  border: 1px solid var(--line); background: var(--card); box-shadow: inset 0 1px 0 var(--glass-edge); transition: border-color 0.25s, transform 0.3s var(--ease);
}
.res-cta:hover { border-color: var(--maya); transform: translateY(-2px); }
.res-cta-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none; color: var(--maya); border: 1px solid rgba(255, 106, 61, 0.35); background: rgba(255, 106, 61, 0.07); }
.res-cta-ic .ic { width: 22px; height: 22px; }
.res-cta-text { display: grid; gap: 4px; min-width: 0; }
.res-cta-text b { font-weight: 500; font-size: 16px; letter-spacing: -0.01em; }
.res-cta-text span { color: var(--muted); font-size: 13px; }
.res-cta-go { margin-left: auto; width: 20px; height: 20px; color: var(--muted); transition: transform 0.3s var(--ease), color 0.2s; }
.res-cta:hover .res-cta-go { transform: translateX(4px); color: var(--maya); }

.today-digest { margin: 14px 0 0; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255, 106, 61, 0.28); background: linear-gradient(180deg, rgba(255, 106, 61, 0.06), transparent); }
.td-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 8px; }
.td-head b { display: inline-flex; align-items: center; gap: 6px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--maya); }
.td-head b .ic { width: 16px; height: 16px; }
.td-head span { font: 11px var(--mono); color: var(--muted); }
.today-digest ol { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.45; }
.today-digest li a { color: var(--text); text-decoration: none; }
.today-digest li a:hover { color: var(--maya); }
.today-digest li span { display: block; font: 11px var(--mono); color: var(--muted); }
.td-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font: 11px var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-2); text-decoration: none; }
.td-more .ic { width: 16px; height: 16px; }
.td-more:hover { color: var(--maya); }
.td-draw { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 12px; padding: 8px 12px 8px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass-weak); color: var(--text); text-decoration: none; transition: border-color 0.2s, transform 0.3s var(--ease); }
.td-draw:hover { border-color: var(--maya); transform: translateY(-2px); }
.td-draw-thumb { display: block; aspect-ratio: 8 / 5; border-radius: 8px; overflow: hidden; color: var(--text-2); background: rgba(var(--bg-rgb), 0.5); }
.td-draw-thumb svg { display: block; width: 100%; height: 100%; }
.td-draw-t { display: grid; gap: 2px; min-width: 0; }
.td-draw-t b { display: inline-flex; align-items: center; gap: 6px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--maya); }
.td-draw-t b .ic { width: 16px; height: 16px; }
.td-draw-t > span { font-size: 13px; color: var(--text-2); line-height: 1.4; }
.td-draw-go { width: 16px; height: 16px; color: var(--muted); }

.src-tip {
  position: fixed; z-index: 60; padding: 12px 14px; border-radius: 14px; display: grid; gap: 6px;
  background: var(--card); border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 var(--glass-edge), 0 24px 50px -20px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); animation: pane-in 0.25s var(--ease);
}
.src-tip .st-n { font: 11px var(--mono); color: var(--muted); }
.src-tip b { font-weight: 500; font-size: 14px; line-height: 1.35; }
.st-go { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.st-go a { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); font: 11px var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-2); text-decoration: none; transition: border-color 0.2s, color 0.2s; }
.st-go a .ic { width: 16px; height: 16px; }
.st-go a:hover { border-color: var(--maya); color: var(--text); }
.st-out { transform: rotate(45deg); }
@media (max-width: 900px) {
  .nav-res { font-size: 0; line-height: 0; width: var(--bar-btn); height: var(--bar-btn); border-radius: 999px; display: flex !important; align-items: center; justify-content: center; gap: 0 !important; padding: 0; border: 1px solid var(--line); background: var(--glass-weak); }
  .nav nav a.nav-res .ic { display: block; width: var(--ic-bar); height: var(--ic-bar); opacity: 1; color: var(--maya); }
  .nav nav { gap: 6px; }
}
.nav .nav-res { flex: none; }

/* mid-width desktops: the page links shrink to icons so the bar fits on one line */
.nav nav a { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1360px) {
  .nav nav a.nav-draw, .nav nav a.nav-res, .nav nav a.nav-letters { font-size: 0; gap: 0; width: var(--bar-btn); height: var(--bar-btn); justify-content: center; padding: 0; border-radius: 999px; border: 1px solid var(--line); }
  .nav nav a.nav-draw .ic, .nav nav a.nav-res .ic, .nav nav a.nav-letters .ic { width: var(--ic-bar); height: var(--ic-bar); opacity: 1; }
  .nav nav a.nav-draw .ic, .nav nav a.nav-res .ic { color: var(--maya); }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .nav nav { gap: 14px; }
  .nav nav a { font-size: 0; gap: 0; }
  .nav nav a .ic { width: var(--ic-bar); height: var(--ic-bar); opacity: 1; }
}
@media (max-width: 560px) {
  .td-draw { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 12px 10px 8px; }
  .td-draw-thumb { grid-column: 1 / -1; }
  .td-draw-t { padding-left: 4px; }
}

/* small explainer drawings (js/minis.js): every number, home, street and topic drawn in line */
.illo.mini { color: rgba(var(--ink-rgb), 0.72); }
.illo.mini .t.tiny { font-size: 6.4px; }
.ev-stat .mini { width: 100%; max-width: 92px; margin-top: 10px; }
.uk-tile .mini { width: 100%; max-width: 150px; height: auto; margin: 2px 0 2px; }
.uk-tile .mini .c, .uk-tile .mini .lead, .uk-tile .mini .limb { stroke: var(--tc); }
.uk-tile .mini .cf { stroke: var(--tc); fill: color-mix(in srgb, var(--tc) 22%, transparent); }
.uk-tile .mini .dot, .uk-tile .mini .fillc, .uk-tile .mini .lamp { fill: var(--tc); }
.scales .mini { grid-column: 2; width: 100%; max-width: 280px; margin-top: 2px; opacity: 0.95; }
.future-pane .mini-topic { width: 100%; max-width: 230px; margin: 2px auto 10px; color: rgba(var(--ink-rgb), 0.7); }
.future-pane .mini-topic .c, .future-pane .mini-topic .cf { stroke: var(--future); }
.future-pane .mini-topic .dot, .future-pane .mini-topic .lamp { fill: var(--future); }
.tc-pop .mini-doubling { width: 100%; margin: 6px 0 2px; }
@media (max-width: 900px) {
  .scales .mini { grid-column: 1; max-width: 300px; }
  .ev-stat .mini { max-width: 76px; }
}

/* ---------- phone page menu (js/menu.js): action buttons stay in the bar, page links move here ---------- */
.menu-btn { display: none; flex: none; color: var(--text); }
.menu-btn .burger path { transform-box: view-box; transform-origin: 12px 12px; transition: transform 0.35s var(--ease), opacity 0.2s; }
.menu-btn.open { border-color: var(--maya); color: var(--maya); }
.menu-btn.open .b1 { transform: rotate(45deg) translateY(5px); }
.menu-btn.open .b2 { opacity: 0; transform: scaleX(0.2); }
.menu-btn.open .b3 { transform: rotate(-45deg) translateY(-5px); }
.menu-scrim { position: fixed; inset: 0; z-index: 9; background: rgba(var(--bg-rgb), 0.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.25s; }
.menu-scrim.in { opacity: 1; }
.menu { position: fixed; right: 12px; z-index: 59; width: min(340px, calc(100vw - 24px)); padding: 8px; border-radius: 20px; border: 1px solid var(--line); background: var(--card-solid); box-shadow: inset 0 1px 0 var(--glass-edge), 0 24px 60px -20px rgba(0, 0, 0, 0.55);
  transform-origin: calc(100% - 22px) -10px; transform: translateY(-8px) scale(0.96); opacity: 0; transition: opacity 0.22s, transform 0.32s var(--ease); }
.menu.in { opacity: 1; transform: none; }
.menu-list { display: grid; gap: 2px; }
.menu-list a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 54px; padding: 6px 10px 6px 6px; border-radius: 14px; color: var(--text); text-decoration: none;
  opacity: 0; transform: translateY(-4px); transition: background 0.2s, opacity 0.3s ease calc(var(--k) * 35ms + 60ms), transform 0.35s var(--ease) calc(var(--k) * 35ms + 60ms); }
.menu.in .menu-list a { opacity: 1; transform: none; }
.menu-list a:hover, .menu-list a:focus-visible { background: rgba(var(--ink-rgb), 0.06); }
.menu-list a[aria-current="page"] { background: rgba(255, 106, 61, 0.1); }
.menu-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--glass-weak); color: var(--text-2); }
.menu-ic .ic { width: var(--ic-lg); height: var(--ic-lg); }
.menu-list a[aria-current="page"] .menu-ic { color: var(--maya); border-color: rgba(255, 106, 61, 0.45); }
.menu-t { display: grid; gap: 1px; min-width: 0; }
.menu-t b { font-weight: 500; font-size: 15px; }
.menu-t span { font-size: 12.5px; color: var(--muted); }
.menu-go { width: var(--ic-min); height: var(--ic-min); color: var(--dim); }
@media (max-width: 900px) {
  .nav nav { display: none !important; }
  .menu-btn { display: grid; }
  .nav .brand { margin-right: auto; }
}
@media (min-width: 901px) { .menu, .menu-scrim { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .menu, .menu-scrim, .menu-list a, .menu-btn .burger path { transition: none; }
}

/* the credit line, on its own row under the footer */
.foot-credit { flex-basis: 100%; margin: 6px 0 0; padding-top: 18px; border-top: 1px dashed var(--line); text-align: center; font: 12px var(--mono); letter-spacing: 0.04em; color: var(--muted); }