/* Tokens. Steel ink on white paper, a blue night-sky ramp for "busier",
   and lantern gold for night markets (always drawn with a steel ring). */
:root {
  color-scheme: light;
  --paper: #ffffff;
  --wash: #f4f6f8;
  --ink: #1e2a36;
  --ink-2: #4a5563;
  --muted: #7b8594;
  --rule: #e3e6ea;
  --axis: #c5cbd3;
  --series: #2a78d6;
  --series-deep: #184f95;
  --lantern: #e09a00;
  --lantern-glow: #ffd36b;
  --nodata: #eef0f3;
  --good: #1b7f4e;
  --budget-low: #2a9d5c;
  --budget-mid: #e3a21a;
  --budget-high: #d0342c;
  --bad: #b3261e;
  --ramp-1: #cde2fb;
  --ramp-2: #9ec5f4;
  --ramp-3: #6da7ec;
  --ramp-4: #3987e5;
  --ramp-5: #256abf;
  --ramp-6: #184f95;
  --ramp-7: #0d366b;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--series); outline-offset: 2px; }

/* masthead: the headline is set condensed and heavy, like bridge and transit signage */
.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px 40px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px 28px 0;
}
h1 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 800;
  font-stretch: 72%;
  line-height: 0.98;
  letter-spacing: -0.01em;
  max-width: 26ch;
  text-wrap: balance;
}
.byline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--ink);
}
.byline .mark { width: 30px; height: 30px; flex: none; }
.byline .team { color: var(--ink-2); }
.dek {
  margin: 10px 0 16px;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 15.5px;
}
.tabs {
  display: flex;
  gap: 22px;
  padding-bottom: 18px;
  overflow-x: auto;
}
.tabs button {
  border: 0;
  background: none;
  padding: 6px 0;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--lantern); }
.tabs button:hover { color: var(--ink); }

main {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 28px 8px;
  border-top: 1px solid var(--rule);
}

/* filters: one row, above everything they scope */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  padding: 14px 0;
}
.segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.segmented button {
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.segmented button:hover { border-color: var(--axis); color: var(--ink); }
.segmented button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filter-label { font-size: 13.5px; color: var(--ink-2); }
.bus-context { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.bus-context[hidden] { display: none; }
.lede { margin: 6px 0 14px; font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 62ch; }
.lede b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.select, .toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.select select { border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); padding: 4px 8px; }
.toggle input { accent-color: var(--ink); width: 15px; height: 15px; }

/* layout: map 2/3, reading panel 1/3 */
.explore-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: 28px;
  align-items: start;
}
.map-col { position: sticky; top: 12px; }
.map-frame { position: relative; border-radius: 6px; overflow: hidden; background: var(--wash); }
#map { height: clamp(400px, calc(100vh - 372px), 720px); background: var(--wash); }

.legend {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 500;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 6px;
  padding: 9px 11px;
  font-size: 12px;
  color: var(--ink-2);
  max-width: calc(100% - 24px);
  box-shadow: 0 0 0 1px var(--rule);
}
.legend-title { font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.legend-scale { display: flex; gap: 2px; }
.legend-scale span { width: 30px; height: 10px; border-radius: 2px; }
.legend-labels { display: flex; justify-content: space-between; margin-top: 3px; font-variant-numeric: tabular-nums; }
.legend-extra { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 7px; }
.legend-extra i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.swatch-line { width: 18px !important; height: 4px !important; border-radius: 2px !important; background: var(--ink); opacity: 0.6; vertical-align: 2px !important; }
.swatch-bus { width: 8px !important; height: 8px !important; background: var(--paper); box-shadow: 0 0 0 1.5px var(--ink); }
.swatch-nodata { border-radius: 2px !important; background: repeating-linear-gradient(45deg, var(--nodata) 0 3px, var(--axis) 3px 4px); }

/* the string of lights: the one bold element on the page */
.timeline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  padding: 4px 2px 0;
}
.play {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--ink);
  fill: var(--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.lights { position: relative; height: 70px; }
#lights { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#lights .wire { fill: none; stroke: var(--ink-2); stroke-width: 1.2; }
#lights .drop { stroke: var(--ink-2); stroke-width: 1; }
#lights .bulb { fill: var(--paper); stroke: var(--axis); stroke-width: 1.2; }
#lights .bulb.lit { fill: var(--lantern); stroke: var(--ink); }
#lights .halo { fill: var(--lantern-glow); opacity: 0.55; }
#lights .cursor { fill: none; stroke: var(--ink); stroke-width: 2; }
#lights .year { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
#month {
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  width: 100%;
  height: 44px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.lights:has(#month:focus-visible) { outline: 2px solid var(--series); outline-offset: 4px; border-radius: 4px; }
#month-label {
  font-weight: 800;
  font-stretch: 80%;
  font-size: 22px;
  line-height: 1;
  min-width: 92px;
  text-align: right;
}

/* reading panel: sections separated by rules, not boxed cards */
.panel { min-width: 0; }
.block { padding: 18px 0; border-top: 1px solid var(--rule); }
.block:first-child { border-top: 0; padding-top: 4px; }
.block h3 { margin: 0; font-size: 15px; font-weight: 700; }
.selection h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  font-stretch: 75%;
  line-height: 1.05;
}
.sel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sub { margin: 3px 0 10px; font-size: 13px; color: var(--ink-2); max-width: 60ch; }
.note { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.bulb-key {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lantern);
  box-shadow: 0 0 0 1px var(--ink);
  margin: 0 1px 0 2px;
  vertical-align: 0;
}
.link { border: 0; background: none; padding: 0; color: var(--series-deep); font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; margin: 0; }
.stats div { min-width: 0; }
.stats dt { font-size: 12.5px; color: var(--ink-2); }
.stats dd { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.2; }
.stats .foot { display: block; font-size: 12px; font-weight: 400; color: var(--muted); line-height: 1.35; }

.chart { min-height: 150px; }
.chart svg { display: block; max-width: 100%; height: auto; overflow: visible; }

.table-view { margin-top: 4px; font-size: 12.5px; }
.table-view summary { cursor: pointer; color: var(--ink-2); }
.table-view > div { max-height: 220px; overflow-y: auto; margin-top: 6px; }
.table-view table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table-view th, .table-view td { text-align: right; padding: 3px 4px; border-bottom: 1px solid var(--rule); }
.table-view th { font-weight: 600; color: var(--ink-2); }
.table-view th:first-child, .table-view td:first-child { text-align: left; }

.markets { list-style: none; margin: 0; padding: 0; }
.markets li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--rule);
  cursor: pointer;
}
.markets li:first-child { border-top: 0; }
.markets li:hover .m-name, .markets li:focus-visible .m-name { text-decoration: underline; text-underline-offset: 3px; }
.markets .m-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1px var(--axis); }
.markets li.active .m-dot { background: var(--lantern); box-shadow: 0 0 0 1px var(--ink); }
.markets .m-name { font-weight: 600; font-size: 14px; }
.markets .m-meta { font-size: 12.5px; color: var(--ink-2); }
.markets .m-count { font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* map marks */
.leaflet-container { font-family: var(--font); }
.leaflet-tooltip { font-size: 12.5px; border-radius: 6px; border: 0; box-shadow: 0 0 0 1px var(--rule), 0 4px 14px rgba(30, 42, 54, 0.12); padding: 6px 9px; }
.tip-value { font-weight: 700; font-size: 15px; color: var(--ink); }
.tip-label { color: var(--ink-2); }
.market-on { animation: glow 1.8s ease-out infinite; }
@keyframes glow {
  0% { stroke-width: 1.5; stroke-opacity: 1; }
  70% { stroke-width: 12; stroke-opacity: 0; }
  100% { stroke-width: 1.5; stroke-opacity: 0; }
}

/* recommendation: a short policy brief, one reading column with a wide map */
.brief { padding: 28px 0 40px; }
.brief-col { max-width: 680px; margin: 0 auto; }
.brief-col > p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.6; color: var(--ink); }
.brief .kicker { color: var(--lantern); }
.brief-head { margin: 4px 0 12px; font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; font-stretch: 72%; line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; }
.brief-dek { font-size: 19px !important; line-height: 1.5 !important; color: var(--ink-2) !important; padding-bottom: 18px; border-bottom: 1px solid var(--rule); margin-bottom: 22px !important; }
.brief-h { margin: 30px 0 8px; font-size: 20px; font-weight: 800; font-stretch: 85%; line-height: 1.15; text-wrap: balance; }
.brief-fig { margin: 16px 0 8px; }
.brief-fig figcaption { font-size: 13px; color: var(--ink-2); margin-bottom: 8px; max-width: 60ch; }
.brief-fig figcaption b { color: var(--ink); }
.brief-wide { max-width: 1040px; margin: 18px auto 8px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
#rec-map { height: 440px; background: var(--wash); }
.rec-key { margin: 0 0 6px; }
.schedule.rec-schedule li { grid-template-columns: 22px minmax(0, 1fr) auto; cursor: default; }
.schedule.rec-schedule li:hover { background: none; }
.brief-actions { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: 16px; line-height: 1.55; }
.brief-actions b, .brief-risks b { color: var(--ink); }
.brief-h .step { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 13px; font-stretch: 100%; vertical-align: 2px; }
.brief-eq { margin: 6px 0 16px; padding: 10px 14px; background: var(--wash); border-radius: 6px; overflow-x: auto; color: var(--ink); }
.brief-eq .katex-display { margin: 0; }
#rec-frontier { position: relative; }
#rec-frontier g[aria-label="tip"] text > tspan:first-child { font-weight: 700; fill: var(--ink); } /* hover headline: budget, visitors, lift */
.budget-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 2px 0 6px; font-size: 12.5px; color: var(--ink-2); }
.budget-legend .bl-title { font-weight: 700; color: var(--ink); }
.budget-legend i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }
.budget-legend i.rec { height: 6px; vertical-align: 2px; }
.smiley { position: absolute; top: 50px; right: 18px; line-height: 0; cursor: help; border-radius: 50%; }
.smiley svg { transition: transform 0.2s ease; }
.smiley:hover svg, .smiley:focus-visible svg { transform: rotate(-12deg) scale(1.15); }
.smiley-tip {
  position: absolute; top: 32px; right: 0; width: max-content; max-width: min(240px, 70vw); padding: 9px 11px; border-radius: 6px;
  background: var(--ink); color: var(--paper); font-size: 12.5px; line-height: 1.45; text-align: left;
  opacity: 0; visibility: hidden; transition: opacity 0.15s ease; z-index: 5; pointer-events: none;
}
.smiley:hover .smiley-tip, .smiley:focus-visible .smiley-tip { opacity: 1; visibility: visible; }
.brief-rules { font-size: 14px !important; color: var(--ink-2) !important; }
.brief-risks { margin: 0 0 16px; padding-left: 18px; display: grid; gap: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* work-in-progress tabs */
.wip { padding: 56px 16px 80px; max-width: 640px; }
.wip h2 { font-size: 30px; font-weight: 800; font-stretch: 75%; line-height: 1.05; margin: 14px 0 8px; }
.wip p { color: var(--ink-2); margin: 0; max-width: 56ch; }
.wip-art { display: block; width: min(340px, 88vw); height: auto; }

/* optimization lab: the controls read as one sentence */
.sentence { flex-direction: column; align-items: flex-start; gap: 8px; }
.rec-toggle {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 2px;
  border: 1px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink);
  padding: 6px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.rec-toggle:hover { background: var(--wash); }
.rec-toggle .rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1.5px var(--ink); }
.rec-toggle[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.rec-toggle[aria-pressed="true"] .rec-dot { background: var(--lantern); box-shadow: 0 0 0 1.5px var(--paper); }
.sentence-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.sentence .filter-label { color: var(--ink); font-size: 14.5px; }
#lab-map { height: clamp(400px, calc(100vh - 380px), 720px); background: var(--wash); }
.lab-timeline .season-tag { font-size: 12.5px; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
#lab-lights { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#lab-lights .wire { fill: none; stroke: var(--ink-2); stroke-width: 1.2; }
#lab-lights .drop { stroke: var(--ink-2); stroke-width: 1; }
#lab-lights .bulb { fill: var(--paper); stroke: var(--axis); stroke-width: 1.2; }
#lab-lights .bulb.lit { fill: var(--lantern); stroke: var(--ink); }
#lab-lights .halo { fill: var(--lantern-glow); opacity: 0.7; }
#lab-lights .year { font-size: 11px; fill: var(--muted); }
#lab-date { font-weight: 800; font-stretch: 80%; font-size: 18px; line-height: 1.1; min-width: 92px; max-width: 220px; text-align: right; }

#lab-stats { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.kicker { margin: 0 0 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.big-number { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-variant-numeric: tabular-nums; }
.selection h2.big-number { font-size: 44px; }
.big-number small { font-size: 17px; font-weight: 600; font-stretch: 90%; color: var(--ink-2); }

.pin {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--lantern); box-shadow: 0 0 0 2px var(--ink), 0 2px 6px rgba(30, 42, 54, 0.3);
  display: grid; place-items: center; position: relative;
  font: 800 13px/1 var(--font); color: var(--ink); cursor: pointer;
  transition: transform 0.15s ease;
}
.pin em { position: absolute; left: 22px; top: -8px; font: 700 11px/1 var(--font); font-style: normal; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 3px 5px; }
.pin.on, .pin.hover { transform: scale(1.25); box-shadow: 0 0 0 2px var(--ink), 0 0 0 7px rgba(255, 211, 107, 0.7); }
.swatch-pin { background: var(--lantern); box-shadow: 0 0 0 1.5px var(--ink); }
/* past hosts picked again: a blue ring on the pin and a tag in the schedule */
.pin.was { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4.5px var(--paper), 0 0 0 7px var(--series); }
.pin.was.on, .pin.was.hover { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4.5px var(--paper), 0 0 0 7px var(--series), 0 0 0 12px rgba(255, 211, 107, 0.7); }
.legend-extra i.swatch-pin.was { margin: 0 9px 0 4px; }
.swatch-pin.was, .key-was, .s-pin.was { box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 3px var(--paper), 0 0 0 4.5px var(--series); }
.key-was { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--lantern); margin: 0 4px 0 6px; vertical-align: 0; }
.was-tag { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--series); color: var(--series-deep); font-size: 11px; font-weight: 700; line-height: 1.5; vertical-align: 1px; white-space: nowrap; }
.swatch-ring { background: none; border: 1.5px dashed var(--ink); width: 12px !important; height: 12px !important; }

.goal-bars { display: grid; gap: 6px; }
.goal-bar {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 52px; align-items: center; gap: 2px 10px;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); padding: 7px 10px; text-align: left; cursor: pointer;
}
.goal-bar:hover { border-color: var(--axis); }
.goal-bar.on { border-color: var(--ink); }
.gb-name { font-size: 13.5px; font-weight: 600; }
.gb-track { height: 10px; background: var(--wash); border-radius: 2px; overflow: hidden; }
.gb-track i { display: block; height: 100%; background: var(--ramp-3); }
.goal-bar.on .gb-track i { background: var(--ramp-6); }
.gb-val { font-size: 13.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.gb-foot { grid-column: 2 / -1; font-size: 12px; color: var(--muted); }

.schedule { list-style: none; margin: 0; padding: 0; }
.schedule li {
  display: grid; grid-template-columns: 48px 22px minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
  padding: 8px 4px; border-top: 1px solid var(--rule); cursor: pointer; border-radius: 4px;
}
.schedule li:first-child { border-top: 0; }
.schedule li:hover, .schedule li.on { background: var(--wash); }
.s-date { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.s-pin { width: 20px; height: 20px; border-radius: 50%; background: var(--lantern); box-shadow: 0 0 0 1.5px var(--ink); display: grid; place-items: center; font-size: 11px; font-weight: 800; align-self: center; }
.s-name { font-weight: 600; font-size: 14px; min-width: 0; }
.s-val { font-weight: 700; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.s-meta { display: block; font-size: 12px; font-weight: 400; color: var(--ink-2); }

.steps { margin: 8px 0 12px; padding-left: 20px; display: grid; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.steps b { color: var(--ink); }
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13.5px; }
.rules li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; }
.r-mark { font-weight: 800; color: var(--good); }
.rules li.bad .r-mark { color: var(--bad); }

/* festive strings of lights: bulbs sway from the wire, lit ones twinkle */
#lights .hang, #lab-lights .hang { animation: sway 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
#lights .bulb.lit, #lab-lights .bulb.lit { animation: twinkle 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
#lights .halo, #lab-lights .halo { animation: glowpulse 1.6s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-11deg); } 50% { transform: rotate(11deg); } }
@keyframes twinkle {
  0%, 100% { fill-opacity: 1; filter: drop-shadow(0 0 2px var(--lantern-glow)); }
  50% { fill-opacity: 0.65; filter: drop-shadow(0 0 0 transparent); }
}
@keyframes glowpulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.75; } }

@media (prefers-reduced-motion: reduce) {
  #lights .hang, #lab-lights .hang, #lights .bulb.lit, #lab-lights .bulb.lit, #lights .halo, #lab-lights .halo { animation: none; }
  .pin { transition: none; }
  .market-on { animation: none; }
}

.colophon { max-width: 1600px; margin: 0 auto; padding: 18px 28px 32px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--rule); }
.colophon p { margin: 4px 0; max-width: 110ch; }
/* presenter shortcut to the self-playing optimization demo */
.colophon { position: relative; }
.demo-link {
  position: absolute; right: 28px; bottom: 26px; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--axis); background: var(--paper);
  color: var(--ink-2); font-size: 13px; font-weight: 600; text-decoration: none; transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.demo-link:hover, .demo-link:focus-visible { color: var(--ink); border-color: var(--ink); box-shadow: 0 0 10px 2px rgba(255, 211, 107, 0.6); }
.demo-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lantern); box-shadow: 0 0 0 1.5px var(--ink); }

@media (max-width: 1000px) {
  .masthead { grid-template-columns: minmax(0, 1fr); }
  .tabs { padding-bottom: 10px; }
  .explore-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .map-col { position: static; }
  #map, #lab-map { height: 56vh; min-height: 340px; }
  .brief-wide { grid-template-columns: minmax(0, 1fr); }
  #rec-map { height: 380px; }
}
@media (max-width: 560px) {
  .masthead { padding: 20px 16px 0; }
  main { padding: 0 16px 8px; }
  .colophon { padding: 16px 16px 28px; }
  .demo-link { position: static; margin-top: 10px; }
  .timeline { grid-template-columns: auto minmax(0, 1fr); }
  #month-label { grid-column: 1 / -1; grid-row: 1; text-align: left; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-timeline { grid-template-columns: minmax(0, 1fr); }
  .lab-timeline .season-tag { display: none; }
  #lab-date { text-align: left; max-width: none; }
  .selection h2.big-number { font-size: 36px; }
  .legend-scale span { width: 20px; }
}