/* main.css — whenwillhazeend.com, light mode.
 *
 * The world: a printed scientific field report. Warm paper, near-black ink,
 * Newsreader for display, Public Sans for interface, IBM Plex Mono only for
 * data and measurements. Hairline rules instead of cards; colour reserved for
 * what the data is saying (ENSO phase, fuel pool, drought, rain).
 *
 * Tokens live in tokens.css (shared with the simulator page). The ALPHV
 * elements at the bottom of this file deliberately step outside the atlas
 * world: they follow ALPHV's own brand rules and nothing else.
 */

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--paper);
  /* a whisper of paper tooth; static, no motion */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
  overflow-x: clip;
}

img, svg, canvas { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; text-wrap: balance; }
dl, dd { margin: 0; }
figure { margin: 0; }
table { border-collapse: collapse; }

a {
  color: var(--ember-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color var(--t-fast) var(--ease-out);
}
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--ember-2);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1rem; min-height: var(--tap);
  display: inline-flex; align-items: center;
  border-radius: var(--radius-sm); text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: .5rem; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- masthead */

.masthead {
  position: relative;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}
.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: var(--tap);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  white-space: nowrap;
}
.brand__mark { width: 22px; height: 22px; fill: var(--sun-haze); flex: none; }
.brand__mark rect { fill: var(--land-near); }
.brand__tld { color: var(--ink-3); font-weight: 400; }

.nav { display: flex; gap: 0; margin-left: auto; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: .6rem;
  color: var(--ink-2);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); background: var(--paper-2); }

.status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  color: var(--ink-3);
  white-space: nowrap;
}
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); flex: none; }
.status__dot[data-status="ok"] { background: var(--good); }
.status__dot[data-status="error"] { background: var(--bad); }
.status__dot[data-status="mock"] { background: var(--iod-positive); }
/* The only pulse on the page, and only while a request is actually in flight. */
.status[data-busy="true"] .status__dot { animation: inflight 1.1s ease-in-out infinite; }
@keyframes inflight { 50% { opacity: .3; } }

.mock-strip {
  margin: 0;
  padding: .55rem var(--gutter);
  background: #7A4708;
  color: #FFFFFF;
  font-size: var(--fs-small);
  font-weight: 600;
  text-align: center;
}

@media (min-width: 900px) {
  .masthead { position: sticky; top: 0; }
}
@media (max-width: 1239px) {
  .status__text { display: none; }
  .status { min-height: var(--tap); padding-inline: .2rem; }
}
@media (max-width: 899px) {
  .masthead__inner { flex-wrap: wrap; gap: 0 .75rem; }
  .alphv-chip { margin-left: auto; }
  .nav {
    order: 3;
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: calc(var(--gutter) - .6rem);
    overflow-x: auto;
    scrollbar-width: none;
    border-top: 1px solid var(--line);
  }
  .nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 480px) {
  .brand { font-size: 1rem; gap: .4rem; }
  .brand__mark { width: 18px; height: 18px; }
}

/* ------------------------------------------------------------------ hero */

.hero { position: relative; }

.plate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: clamp(560px, 84vh, 880px);
  background: linear-gradient(to bottom, var(--sky-clear), var(--sky-clear-low));
  border-bottom: 1px solid var(--ink);
}
.plate__veil {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: -2;
  pointer-events: none;
}
/* The 3D scene: fades in over the veil only once its promise resolves. */
.plate__scene {
  position: absolute; inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1400ms var(--ease-out);
}
.plate__scene.is-live { opacity: 1; }
.plate__scene > * { width: 100%; height: 100%; }
/* the scene is non-interactive, but its attribution must stay reachable */
.plate__scene .maplibregl-ctrl { pointer-events: auto; }
.plate__scene .maplibregl-ctrl-attrib-button { width: var(--tap); height: var(--tap); background-repeat: no-repeat; background-position: center; }

.plate__inner {
  position: relative;
  flex: 1;
  padding-top: clamp(1.25rem, 5vw, 4rem);
}
/* The answer lives on paper, so its contrast never depends on the sky. */
.plate__panel {
  max-width: 42rem;
  padding: clamp(1.25rem, 3.2vw, 2.25rem) clamp(1.25rem, 3.2vw, 2.5rem) clamp(1.5rem, 3.2vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--ink);
}
.plate__land { height: clamp(150px, 20vw, 220px); flex: none; }

.hero__q {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -.018em;
  color: var(--ink);
}
.answer-block { margin-top: clamp(.25rem, 1.5vw, 1rem); }
.answer {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 .3em;
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink);
  line-height: .92;
}
.answer__approx { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); color: var(--ink-2); }
.answer__num {
  font-size: clamp(6rem, 3.5rem + 11vw, 11.5rem);
  letter-spacing: -.04em;
  font-variant-numeric: lining-nums tabular-nums;
}
.answer__unit { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); font-style: italic; color: var(--ink-2); }
.answer__unit--text { font-style: normal; font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem); }

.answer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 2rem;
  margin-top: clamp(1rem, 2.4vw, 1.5rem);
  padding-top: .9rem;
  border-top: 1px solid var(--line-2);
}
.answer__meta dt { font-size: var(--fs-small); color: var(--ink-3); }
.answer__meta dd {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.answer__reason {
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  line-height: 1.42;
  color: var(--ink-2);
}

.hero__loading { margin-top: 1.25rem; }
.panel-error--plate { margin-top: 1.25rem; }

.hero__under { padding-top: .9rem; padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.plate__caption {
  margin: 0 0 1.75rem;
  max-width: 54rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-3);
}
.plate__caption b { color: var(--ink-2); font-weight: 600; }

.readout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 860px) {
  .readout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; }
}
.readout__h {
  display: block;
  margin-bottom: .75rem;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-2);
}
.readout__h em { font-family: var(--font-display); font-size: 1.08em; font-weight: 500; }

.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line-2);
}
.countdown__cell { display: flex; flex-direction: column; padding: .6rem 0 .55rem; min-width: 0; }
.countdown__cell + .countdown__cell { padding-left: .8rem; border-left: 1px solid var(--line); }
.countdown__cell b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.countdown__cell span { font-size: var(--fs-min); color: var(--ink-3); }
.readout__flags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }

.survival__plot svg { width: 100%; height: auto; overflow: visible; }
.survival__plot text { font-family: var(--font-mono); font-size: 12px; fill: var(--ink-3); }
.survival__plot .s-strong { fill: var(--ink-2); font-weight: 500; }

@media (max-width: 640px) {
  .plate { min-height: 0; }
  .plate__land { height: 200px; }
  .plate__inner { padding-inline: .75rem; padding-top: .75rem; }
  .plate__panel { padding: 1.1rem 1.1rem 1.25rem; }
  .answer__meta { gap: .7rem 1.5rem; }
}

/* the local reality, first: this week's reading where the reader lives */
.local {
  margin: 0 0 1.1rem;
  padding: 0 0 .9rem;
  border-bottom: 1px solid var(--line-2);
}
.local__loading { display: flex; align-items: center; gap: .55rem; font-size: var(--fs-small); color: var(--ink-3); }
.local__text {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
}
.local__label {
  display: inline-block;
  margin-right: .35rem;
  padding: .05rem .45rem;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-small);
  font-weight: 600;
  vertical-align: .1em;
}
.local__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: .45rem 0 0; font-size: var(--fs-small); color: var(--ink-3); }
.local__more { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; color: var(--ember-2); }
.answer__scope {
  margin: .9rem 0 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.answer__scope strong { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------- this week (M5) */

.section--now { padding-top: clamp(2.5rem, 6vw, 4rem); }
.now-window { font-size: var(--fs-small); color: var(--ink-3); margin-bottom: 1rem; }
.now-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
  gap: 1.25rem;
}
.now-card {
  padding: 1.1rem 1.2rem 1rem;
  background: var(--paper-hi);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  min-width: 0;
}
.now-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; }
.now-card__place { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; line-height: 1.2; }
.now-card__index { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .3rem; font-size: var(--fs-small); color: var(--ink-2); }
.now-card__peak { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; margin: .8rem 0 .2rem; }
.now-card__peak b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.now-card__peak span { font-size: .875rem; color: var(--ink-2); }
.now-card__band { font-weight: 600; }
.now-card__band--high { color: var(--bad); }
.now-card__note { margin: .5rem 0 0; font-size: var(--fs-small); color: var(--ink-3); }
.now-card--none { border-color: var(--ink); }
.now-card__none { margin: .8rem 0 1rem; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.now-card__none b { font-weight: 600; }
.now-card__portal { width: 100%; justify-content: space-between; text-align: left; }
.now-card__context { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.now-card__context-h { margin: 0 0 .35rem; font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
.now-card__context ul { margin: 0; padding-left: 1.1rem; font-size: .9375rem; color: var(--ink-2); }
.now-card__context li + li { margin-top: .4rem; }
.now-card__context b { color: var(--ink); font-weight: 600; }
.tag--none { border-color: var(--ink); color: var(--ink); background: var(--paper-2); }
.readout__wx { margin: .6rem 0 0; font-size: var(--fs-small); color: var(--ink-3); max-width: 34rem; }
.now-sources__list--notices { font-size: var(--fs-small); color: var(--ink-3); overflow-wrap: anywhere; }
.now-sources__list + .now-sources__h { margin-top: 1rem; }
.chart-holder--now { height: 230px; margin-top: .6rem; }
.now-card .legend { margin: .6rem 0 0; }

.fires-week { margin-top: clamp(2rem, 5vw, 3rem); }
.fires-week__counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  margin: .9rem 0 1rem;
  border-top: 2px solid var(--ink);
}
.fires-week__counts > div { padding: .65rem 1rem .7rem 0; border-bottom: 1px solid var(--line); }
.fires-week__counts dt { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-small); color: var(--ink-3); }
.fires-week__counts dt i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.fires-week__counts dd { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.15; font-variant-numeric: lining-nums tabular-nums; }
.fires-week__counts dd small { display: block; font-family: var(--font-ui); font-size: var(--fs-min); color: var(--ink-3); }
.chart-holder--fires { height: 200px; }

.now-sources { margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1rem; border-top: 1px solid var(--line); max-width: 52rem; }
.now-sources__h { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); margin-bottom: .4rem; }
.now-sources__list { margin: 0; padding-left: 1.1rem; font-size: .875rem; color: var(--ink-2); }
.now-sources__list li + li { margin-top: .35rem; }
.now-sources__list a { color: var(--ink-2); }

/* ------------------------------------------------------ the other ending */

.ending {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 3rem;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid var(--line-2);
}
@media (min-width: 860px) {
  .ending { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}
.ending__h {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
  line-height: 1.12;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}
.ending__answer { display: flex; flex-direction: column; gap: .25rem; margin: 0; font-family: var(--font-display); }
.ending__lead { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); color: var(--ink-2); }
.ending__year {
  font-weight: 400;
  font-size: clamp(4rem, 2.4rem + 7vw, 7.5rem);
  line-height: .95;
  letter-spacing: -.03em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}
.ending__year--text { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); line-height: 1.1; letter-spacing: -.01em; }
.ending__approx { color: var(--ink-3); font-size: .5em; vertical-align: .4em; margin-right: .12em; }
.ending__meta { display: flex; flex-wrap: wrap; gap: .9rem 2.25rem; margin: 1.25rem 0 1rem; }
.ending__meta dt, .result__meta dt { font-size: var(--fs-small); color: var(--ink-3); }
.ending__meta dd, .result__meta dd {
  font-family: var(--font-mono); font-weight: 500; font-size: .9375rem; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ending__note { max-width: 44rem; color: var(--ink-2); }
.ending__second { margin: .9rem 0 0; font-size: 1rem; color: var(--ink-2); }
.ending__second b { font-family: var(--font-mono); font-weight: 500; color: var(--ink); }
.ending__second + .ending__note { margin-top: .9rem; }

/* ------------------------------------------------------------ the toll */

.toll {
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--line-2);
}
.toll__text {
  max-width: 50rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
  line-height: 1.45;
  color: var(--ink);
}
.toll__text b { font-weight: 600; font-variant-numeric: lining-nums; }
.toll__ranges { display: grid; gap: 2.25rem; margin-top: 2rem; }
@media (min-width: 860px) {
  .toll__ranges.has-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
}

/* A range of published estimates: a strip with each study marked on it. */
.spread { min-width: 0; }
.spread__title { font-size: .9375rem; font-weight: 600; color: var(--ink); margin-bottom: .2rem; }
.spread__range { font-family: var(--font-mono); font-size: .9375rem; color: var(--ink-2); margin-bottom: .9rem; }
.spread__range b { color: var(--ink); font-weight: 500; }
.spread__fold { font-family: var(--font-ui); color: var(--ember-2); font-weight: 600; }
.spread__axis { position: relative; height: 30px; margin-inline: 10px; border-bottom: 1px solid var(--ink-3); }
.spread__band {
  position: absolute; top: 11px; height: 8px;
  background: var(--haze-tint);
  border: 1px solid var(--haze);
}
.spread__tick {
  position: absolute; top: 4px; width: 2px; height: 22px; margin-left: -1px;
  background: var(--ink);
}
.spread__tick--scalar { background: var(--ember-2); top: 0; height: 30px; }
.spread__scale { display: flex; justify-content: space-between; margin: .2rem 10px 0; font-family: var(--font-mono); font-size: var(--fs-min); color: var(--ink-3); }
.spread__key { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .45rem; margin: .5rem 0 0; font-size: var(--fs-min); color: var(--ink-3); }
.spread__swatch { display: inline-block; width: 2px; height: 12px; background: var(--ink); }
.spread__swatch--scalar { background: var(--ember-2); margin-left: .35rem; }
.spread__list { list-style: none; margin: .8rem 0 0; padding: 0; }
.spread__list li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: .1rem 1rem;
  align-items: baseline;
  padding: .4rem 0;
  border-top: 1px solid var(--line);
  font-size: .875rem;
}
.spread__val { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.spread__src { color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.spread__src a { color: var(--ink-2); }
.spread__region { color: var(--ink-3); }
.spread__note { margin-top: .75rem; font-size: var(--fs-small); color: var(--ink-3); max-width: 40rem; }

/* -------------------------------------------------------------- sections */

.section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section__head {
  max-width: 50rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  padding-top: 1.1rem;
  border-top: 2px solid var(--ink);
}
.section__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -.015em;
}
.section__lede {
  margin-top: .9rem;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 42rem;
}

/* ------------------------------------------------------- shared controls */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--tap);
  padding: .55rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.btn:disabled { cursor: progress; opacity: .7; }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover:not(:disabled) { background: var(--ink-2); }
.btn--ghost { background: var(--paper-hi); color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover:not(:disabled) { background: var(--paper-2); border-color: var(--ink-4); }
.btn--icon {
  width: var(--tap); height: var(--tap); padding: 0; flex: none;
  background: var(--paper-hi); border-color: var(--line-2); color: var(--ink);
}
.btn--icon:hover:not(:disabled) { background: var(--paper-2); }
.btn--icon svg { width: 16px; height: 16px; }
.btn--icon:disabled { opacity: .4; cursor: default; }
.btn__icon { width: 14px; height: 14px; flex: none; }
.btn--play[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.control { display: grid; gap: .1rem; }
.control + .control { margin-top: 1rem; }
.control__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ink);
}
.control__value {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .9375rem;
  color: var(--ember-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.control__sub { font-size: var(--fs-small); color: var(--ink-3); line-height: 1.5; }

/* Range inputs: the whole 44px row is the hit area; the visible track is 4px. */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: var(--tap);
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
  --fill: 0%;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--ink) var(--fill), var(--line-2) var(--fill));
}
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line-2); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--ink); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--paper-hi);
  border: 2px solid var(--ink);
  box-shadow: 0 1px 2px rgba(60, 45, 30, .18);
  transition: transform var(--t-fast) var(--ease-out);
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--paper-hi);
  border: 2px solid var(--ink);
  box-shadow: 0 1px 2px rgba(60, 45, 30, .18);
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ember-2); outline-offset: 3px; }
input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--ember-2); outline-offset: 3px; }
input[type="range"]:disabled { cursor: default; opacity: .5; }

.select {
  width: 100%;
  min-height: var(--tap);
  margin-top: .35rem;
  padding: .5rem 2.5rem .5rem .8rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--paper-hi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%231C1815' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .8rem center / 14px;
  -webkit-appearance: none;
  appearance: none;
  font-size: 1rem;
  cursor: pointer;
}
.select:hover { border-color: var(--ink-4); }

.fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.fieldset + .fieldset { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.fieldset legend {
  padding: 0;
  margin-bottom: .6rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--ink);
}

/* Switch: the whole label is the 44px target. */
.switch {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-height: var(--tap);
  cursor: pointer;
  font-weight: 600;
  font-size: .9375rem;
}
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track {
  position: relative;
  width: 40px; height: 24px; flex: none;
  border-radius: 12px;
  background: var(--paper-3);
  border: 1px solid var(--ink-4);
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.switch__track::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper-hi);
  border: 1px solid var(--ink-4);
  transition: transform var(--t-mid) var(--ease-out);
}
.switch input:checked + .switch__track { background: var(--ink); border-color: var(--ink); }
.switch input:checked + .switch__track::after { transform: translateX(16px); border-color: var(--ink); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--ember-2); outline-offset: 3px; }

/* ------------------------------------------------------------------ tags */

.tag {
  display: inline-flex;
  align-items: center;
  padding: .15rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--paper-hi);
  color: var(--ink-2);
  font-size: var(--fs-min);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.tag--ok { border-color: #9CC7B2; color: #17603F; background: #EAF4EE; }
.tag--warn { border-color: #DDB98A; color: #6B3E07; background: #FBF1E2; }
.tag--est { border-color: #C9B79C; color: #5A4630; background: var(--haze-tint); }
.tag--synth { border-color: var(--ember-2); color: #FFFFFF; background: var(--ember-2); }
.tag--modelled { border-color: #9CC0CC; color: #18566B; background: #E6F0F2; }

/* ------------------------------------------------- loading & error states */

.skeleton {
  border-radius: 4px;
  background-color: var(--paper-3);
  background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer { from { background-position: 140% 0; } to { background-position: -40% 0; } }
.skeleton--hero { height: clamp(6rem, 18vw, 10rem); width: min(24rem, 80%); margin: 1rem 0; }
.skeleton--line { height: 1rem; margin: .6rem 0; }
.skeleton--sub { height: 4.5rem; width: min(22rem, 70%); margin-top: .8rem; }
.skeleton--block { height: 220px; width: 100%; }
.skeleton--map { height: clamp(360px, 52vw, 560px); }

.loading-note {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: .8rem;
  font-size: var(--fs-small);
  color: var(--ink-3);
}

/* In-flight indicator, used only beside a pending request. */
.busy {
  display: inline-block;
  width: 18px; height: 6px; flex: none;
  background:
    radial-gradient(circle 3px, var(--ink-3) 98%, transparent) 0 50% / 6px 6px no-repeat,
    radial-gradient(circle 3px, var(--ink-3) 98%, transparent) 50% 50% / 6px 6px no-repeat,
    radial-gradient(circle 3px, var(--ink-3) 98%, transparent) 100% 50% / 6px 6px no-repeat;
  animation: busy 1s steps(3) infinite;
}
@keyframes busy {
  0% { clip-path: inset(0 66% 0 0); }
  100% { clip-path: inset(0 -1% 0 0); }
}

.panel-error {
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--bad);
  background: #FBEDEA;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink);
}
.panel-error__title { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: .35rem; }
.panel-error__msg { color: var(--ink-2); font-size: .9375rem; }
.panel-error__hint { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; color: var(--ink-2); font-size: .9375rem; }
.panel-error--inline { padding: .7rem .9rem; }
.panel-error--inline .panel-error__msg { font-size: .875rem; }

[data-busy="true"] > [data-state="ok"] { opacity: .55; transition: opacity var(--t-mid) var(--ease-out); }

/* ------------------------------------------------------------------ odds */

.odds-disclaimer {
  margin-top: 1.1rem;
  padding: .7rem .9rem;
  border: 1px solid var(--ink);
  background: var(--paper-hi);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ink);
  max-width: 42rem;
}
.odds-disclaimer span { font-family: var(--font-mono); font-weight: 500; }
.odds-source { font-size: var(--fs-small); color: var(--ink-3); max-width: 50rem; margin-bottom: 1.25rem; }
.odds-source b { color: var(--ink-2); }

.odds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}
.market {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: 1.15rem 1.2rem 1.1rem;
  background: var(--paper-hi);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  min-width: 0;
  scroll-margin-top: 6rem;
}
.market:target { border-color: var(--ink); }
.market__q {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
}
.market__head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.market__yes {
  font-family: var(--font-mono);
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.market__yes small { font-family: var(--font-ui); font-size: var(--fs-small); letter-spacing: 0; color: var(--ink-3); margin-left: .35rem; font-weight: 500; }
.market__bar {
  display: flex;
  height: 30px;
  border: 1px solid var(--ink);
  overflow: hidden;
}
.market__bar span {
  display: flex;
  align-items: center;
  padding-inline: .5rem;
  font-size: var(--fs-min);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
  transition: flex-basis var(--t-slow) var(--ease-out);
}
.market__bar .is-yes { background: var(--cool); color: #FFFFFF; }
.market__bar .is-no { background: var(--ember-tint); color: var(--ember-2); justify-content: flex-end; }
.market__legend { display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--ink-2); margin-top: -.45rem; }
.market__legend b { font-family: var(--font-mono); font-weight: 500; }
.market__resolve {
  padding: .65rem .75rem;
  background: var(--paper-2);
  border-left: 2px solid var(--ink-4);
  font-size: var(--fs-small);
  color: var(--ink-2);
  line-height: 1.5;
}
.market__resolve h4 { font-size: var(--fs-small); font-weight: 600; color: var(--ink); margin-bottom: .15rem; }
.market__resolve p { margin: 0 0 .35rem; }
.market__resolve p:last-child { margin: 0; }
.market__actions { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.market__copied { font-size: var(--fs-small); color: var(--good); }

.odds-lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 960px) {
  .odds-lower { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; }
}
.dist { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.dist li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) 3.5rem;
  align-items: center;
  gap: .75rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .875rem;
}
.dist__label { color: var(--ink-2); white-space: nowrap; }
.dist__bar { height: 12px; background: var(--paper-3); }
.dist__bar i { display: block; height: 100%; background: var(--haze); transition: width var(--t-slow) var(--ease-out); }
.dist li.is-mode .dist__bar i { background: var(--ink); }
.dist li.is-mode .dist__label { color: var(--ink); font-weight: 600; }
.dist__p { text-align: right; font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.odds-empty {
  padding: 1.25rem;
  border: 1px dashed var(--line-2);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: .9375rem;
}
.chart-holder--odds { height: 280px; }

/* ------------------------------------------------------------------- map */

.map-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 1000px) {
  .map-grid { grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; }
}
.map-main { min-width: 0; }
.map-frame { position: relative; border: 1px solid var(--ink); background: var(--map-land); }
#map { height: clamp(360px, 52vw, 560px); width: 100%; }
.map-frame__note {
  position: absolute; left: .5rem; top: .5rem; margin: 0;
  max-width: calc(100% - 4rem);
  padding: .3rem .55rem;
  background: var(--paper-hi);
  border: 1px solid var(--line-2);
  font-size: var(--fs-min);
  color: var(--ink-2);
}

/* MapLibre, re-dressed for paper */
.maplibregl-map { font-family: var(--font-ui); }
.maplibregl-ctrl-group {
  background: var(--paper-hi) !important;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
.map-frame .maplibregl-ctrl-group button { width: var(--tap); height: var(--tap); }
.map-frame .maplibregl-ctrl-group button .maplibregl-ctrl-icon { background-size: 30px; }
.maplibregl-ctrl-attrib {
  background: rgba(255, 255, 255, .9) !important;
  font-size: var(--fs-min);
  color: var(--ink-2);
}
.maplibregl-ctrl-attrib a { color: var(--ink-2); }
.map-frame .maplibregl-ctrl-attrib-button { background-repeat: no-repeat; background-position: center; }
.maplibregl-cooperative-gesture-screen { background: rgba(28, 24, 21, .72); font-family: var(--font-ui); font-size: 1rem; }
.maplibregl-popup-content {
  padding: .75rem .9rem .8rem;
  border-radius: var(--radius-sm);
  background: var(--paper-hi);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-1);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--ink);
}
.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--paper-hi); }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--paper-hi); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--paper-hi); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--paper-hi); }
.maplibregl-popup-close-button {
  width: 32px; height: 32px; font-size: 1.25rem; color: var(--ink-2);
  border-radius: 0 var(--radius-sm) 0 var(--radius-sm);
}
.maplibregl-popup-close-button:hover { background: var(--paper-2); }
.map-pop h4 { font-family: var(--font-display); font-size: 1.1rem; margin: 0 1.75rem .35rem 0; }
.map-pop dl { display: grid; grid-template-columns: auto auto; gap: .1rem 1rem; }
.map-pop dt { color: var(--ink-3); }
.map-pop dd { text-align: right; font-family: var(--font-mono); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.map-pop__note { margin-top: .4rem; font-size: var(--fs-min); color: var(--ink-3); }

/* the year control: the map's primary control */
.year-control { margin-top: 1.25rem; }
.year-control__head { display: flex; align-items: baseline; gap: .9rem; font-weight: 600; font-size: .9375rem; }
.year-control__year {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.year-control__busy { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-small); font-weight: 400; color: var(--ink-3); }
.year-control__row { display: flex; align-items: flex-end; gap: .5rem; margin-top: .4rem; }
.year-control__row .btn--icon { margin-bottom: 20px; }
.year-rail { position: relative; flex: 1; min-width: 0; }
.year-rail__bars { position: relative; height: 40px; margin-inline: 11px; }
.year-rail__bars i {
  position: absolute;
  bottom: 0;
  width: 4px;
  margin-left: -2px;
  min-height: 2px;
  border-radius: 1px 1px 0 0;
  opacity: .5;
  transition: opacity var(--t-fast) var(--ease-out);
}
.year-rail__bars i.is-current { opacity: 1; width: 6px; margin-left: -3px; }
.year-rail input[type="range"] { margin-top: -16px; }
.year-rail__ends {
  display: flex; justify-content: space-between;
  margin-top: -12px;
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  color: var(--ink-3);
}
.year-control__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .75rem; }
.year-control__key { font-size: var(--fs-small); color: var(--ink-3); }

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.legend-group { min-width: 12rem; }
.legend-group h4 { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); margin-bottom: .45rem; }
.legend-row { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.7; }
.legend-row .mono { font-size: var(--fs-min); color: var(--ink-3); }
.legend-ramp { flex: 1; height: 10px; min-width: 6rem; border: 1px solid var(--line-2); }
.legend-swatch { width: 12px; height: 12px; flex: none; border-radius: 2px; }
.legend-swatch--round { border-radius: 50%; }
.legend-swatch--line { height: 3px; border-radius: 0; width: 16px; }

.map-side { min-width: 0; }
.year-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); border-top: 2px solid var(--ink); }
.year-summary dt, .year-summary dd { padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .875rem; }
.year-summary dt { color: var(--ink-3); padding-right: 1rem; }
.year-summary dd {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  min-width: 0;
  overflow-wrap: anywhere;
}
.year-summary dd small { display: block; font-family: var(--font-ui); font-weight: 400; color: var(--ink-3); font-size: var(--fs-min); }

.plume { margin-top: 1.5rem; }
.plume__sub { font-size: var(--fs-small); color: var(--ink-3); margin-top: .1rem; }
.plume__controls { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.plume__controls .control + .control { margin-top: .5rem; }

.data-table { width: 100%; font-size: .875rem; }
.data-table th {
  text-align: left;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-2);
  padding: .45rem .5rem .45rem 0;
  border-bottom: 1px solid var(--ink);
}
.data-table td { padding: .45rem .5rem .45rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.data-table th.num { text-align: right; }
.data-table th:last-child, .data-table td:last-child { padding-right: 0; }
.receptor-table { margin-top: .9rem; }
.aqi-pill { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-min); color: var(--ink-2); }
.aqi-pill::before { content: ""; width: 10px; height: 10px; border-radius: 2px; flex: none; background: var(--aqi, var(--ink-4)); }

.map-cta { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--ink-2); }

/* --------------------------------------------------------------- history */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  border-top: 2px solid var(--ink);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.stat { padding: .8rem 1rem .9rem 0; border-bottom: 1px solid var(--line); }
.stat dt { font-size: var(--fs-small); color: var(--ink-3); }
.stat dd {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.15;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}
.stat dd small { margin-left: .3rem; font-family: var(--font-ui); font-size: var(--fs-small); color: var(--ink-3); }

.figure + .figure { margin-top: clamp(2.5rem, 6vw, 4rem); }
.figure__cap { max-width: 46rem; margin-bottom: .9rem; }
.figure__title { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.2; }
.figure__sub { margin-top: .35rem; font-size: .9375rem; color: var(--ink-3); }

.legend { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-bottom: .75rem; }

.chart-holder { position: relative; width: 100%; }
.chart-holder--tall { height: clamp(280px, 38vw, 400px); }
.chart-holder--gantt { height: 560px; }
.chart-holder--traj { height: 190px; margin: 1rem 0; }

/* ------------------------------------------------------------ playground */

.play-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 960px) {
  .play-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; }
}
.play-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.play-results { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }

.result { padding: 1.25rem 1.35rem 1.4rem; background: var(--paper-2); border-radius: var(--radius); min-width: 0; }
.result__title { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: .4rem; }
.result__big {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.result__big--text { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.2; letter-spacing: 0; }
.result__unit { margin-left: .35rem; font-size: .4em; font-style: italic; color: var(--ink-2); letter-spacing: 0; }
.result__meta { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; margin-top: .9rem; }
.result__delta { margin-top: .8rem; font-size: .9375rem; color: var(--ink-2); }
.result__delta .up, .result__delta .down { font-family: var(--font-mono); font-weight: 500; }
.result__delta .up { color: var(--ember-2); }
.result__delta .down { color: #18566B; }
.result__foot { margin-top: .9rem; font-size: var(--fs-small); color: var(--ink-2); }
.result .data-table th { border-bottom-color: var(--ink-3); }
.result .data-table td { border-bottom-color: var(--line-2); }
.result .data-table .is-unreached { color: var(--ink-2); font-family: var(--font-ui); }

/* --------------------------------------------------------------- drivers */

.drivers-scope { font-size: var(--fs-small); color: var(--ink-3); margin-bottom: 1rem; }
.drivers { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.driver {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .4rem 1.5rem;
  padding: 1rem 0 1.1rem;
  border-bottom: 1px solid var(--line);
}
.driver__head { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.driver__name { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; }
.driver__dir { font-size: var(--fs-small); font-weight: 600; }
.driver--prolongs .driver__dir { color: var(--ember-2); }
.driver--shortens .driver__dir { color: #18566B; }
.driver__value {
  text-align: right;
  font-family: var(--font-mono);
  font-size: .875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.driver__value small { display: block; font-family: var(--font-ui); font-weight: 400; font-size: var(--fs-min); color: var(--ink-3); }
.driver__bar { grid-column: 1 / -1; height: 10px; background: var(--paper-3); overflow: hidden; }
.driver__fill { display: block; height: 100%; width: 0; transition: width var(--t-slow) var(--ease-out); }
.driver--prolongs .driver__fill { background: var(--ember); }
.driver--shortens .driver__fill { background: var(--cool); }
.driver__explain { grid-column: 1 / -1; max-width: 46rem; font-size: .9375rem; color: var(--ink-2); margin: 0; }
@media (min-width: 860px) {
  .driver { grid-template-columns: 14rem minmax(0, 1fr) 9rem; align-items: start; }
  .driver__bar { grid-column: 2; grid-row: 1; align-self: center; }
  .driver__value { grid-column: 3; grid-row: 1; }
  .driver__explain { grid-column: 2 / 4; }
}

/* --------------------------------------------------------------- methods */

.section--methods { background: var(--paper-2); border-top: 1px solid var(--line-2); }
.methods-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem 3.5rem; }
@media (min-width: 900px) {
  .methods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .methods-block--wide { grid-column: 1 / -1; }
}
.methods-block { min-width: 0; color: var(--ink-2); }
.methods-block p { max-width: 40rem; }
.methods-h { font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); margin: 0 0 .5rem; }
.methods-block p + .methods-h { margin-top: 1.6rem; }
.methods-note { font-size: .875rem; color: var(--ink-3); max-width: 52rem; }

.caveat-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.75rem 2.5rem;
}
.caveat-group h4 {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  padding-bottom: .4rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--ink-4);
  overflow-wrap: anywhere;
}
.caveat-list { margin: 0; padding-left: 1.1rem; font-size: .875rem; color: var(--ink-2); }
.caveat-list li + li { margin-top: .5rem; }

.prov-synth {
  margin: 1rem 0;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--ember-2);
  background: var(--ember-tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.prov-synth__head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .35rem; color: var(--ink); }
.prov-synth__body { font-size: .9375rem; color: var(--ink); max-width: 52rem; }
.prov-counts { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 1.25rem 0 .75rem; }
.prov-counts__total { font-size: var(--fs-small); color: var(--ink-2); font-weight: 600; margin-right: .2rem; }
.prov-table td { font-size: .875rem; color: var(--ink-2); border-bottom-color: var(--line-2); }
.prov-table td b { color: var(--ink); font-weight: 600; }
.prov-table__cov { display: block; font-family: var(--font-mono); font-size: var(--fs-min); color: var(--ink-3); margin-top: .1rem; }
.prov-table__notes { margin: .35rem 0 0; font-size: var(--fs-small); color: var(--ink-3); }
.prov-table a { color: var(--ink-2); overflow-wrap: anywhere; }
.prov-row--synth td:first-child { box-shadow: inset 3px 0 0 var(--ember-2); padding-left: .7rem; }
@media (max-width: 700px) {
  .prov-table thead { display: none; }
  .prov-table, .prov-table tbody, .prov-table tr, .prov-table td { display: block; width: 100%; }
  .prov-table tr { padding: .6rem 0; border-bottom: 1px solid var(--line-2); }
  .prov-table td { border: 0; padding: .15rem 0; }
  .prov-row--synth td:first-child { box-shadow: none; padding-left: 0; }
  .prov-row--synth { box-shadow: inset 3px 0 0 var(--ember-2); padding-left: .7rem !important; }
}

/* ---------------------------------------------------------------- footer */

.footer { font-size: .875rem; color: var(--ink-3); }
.footer__site { padding-block: 2rem 2.25rem; border-top: 1px solid var(--line-2); }
.footer__site p { max-width: 46rem; }
.footer__mock { margin-top: 1rem; padding: .75rem 1rem; border-left: 3px solid #7A4708; background: #FBF1E2; color: var(--ink); }
.footer code { font-family: var(--font-mono); font-size: .9em; }

/* =========================================================================
 * ALPHV elements. Inside these ONLY, ALPHV's brand overrides the site's:
 * #0100FE / black / white, zero radius, no shadows, flat fills, borders that
 * separate, Archivo Expanded Medium uppercase headlines, Inter body. The
 * full-colour lockup always sits on #FFFFFF.
 * ========================================================================= */

.alphv, .alphv-chip {
  --alphv-blue: #0100FE;
  font-family: "Inter", system-ui, sans-serif;
  color: #000000;
  background: #FFFFFF;
}
.alphv *, .alphv-chip * { border-radius: 0; box-shadow: none; }
.alphv a:focus-visible, .alphv-chip:focus-visible { outline: 2px solid #0100FE; outline-offset: 2px; border-radius: 0; }

.alphv-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: var(--tap);
  padding: 0 .65rem;
  border: 1px solid #000000;
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}
.alphv-chip__label { font-size: var(--fs-min); font-weight: 500; color: #000000; }
.alphv-chip img { width: 72px; height: 18px; }
@media (max-width: 480px) {
  .alphv-chip { padding: 0 .5rem; }
  .alphv-chip img { width: 64px; height: 16px; }
  .alphv-chip__label { display: none; }
}

.alphv__h {
  font-family: "Archivo", "Inter", sans-serif;
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.12;
  color: #000000;
  text-wrap: balance;
}
.alphv__btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: .6rem 1.25rem;
  background: var(--alphv-blue);
  color: #FFFFFF;
  border: 1px solid var(--alphv-blue);
  font-weight: 500;
  font-size: .9375rem;
  text-decoration: none;
  transition: background-color var(--t-fast) linear, color var(--t-fast) linear;
}
.alphv__btn:hover { background: #FFFFFF; color: var(--alphv-blue); }

.alphv-cta { border-top: 1px solid #000000; border-bottom: 1px solid #000000; }
.alphv-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  padding-block: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 860px) {
  .alphv-cta__inner { grid-template-columns: 12rem minmax(0, 1fr); gap: 3rem; }
  .alphv-cta__brand { border-right: 1px solid #000000; }
}
.alphv-cta__brand img { width: 120px; height: 30px; }
.alphv-cta__body { max-width: 46rem; }
.alphv-cta .alphv__h { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.85rem); margin-bottom: .9rem; }
.alphv-cta p { font-size: 1rem; line-height: 1.6; color: #000000; margin-bottom: 1.25rem; }

.alphv-band { border-top: 1px solid #000000; border-bottom: 1px solid #000000; }
.alphv-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  padding-block: 1rem;
}
.alphv-band__logo { display: inline-flex; align-items: center; min-height: var(--tap); }
.alphv-band__logo img { width: 96px; height: 24px; }
.alphv-band__text { flex: 1 1 20rem; margin: 0; font-size: .875rem; color: #000000; }
.alphv-band__link {
  display: inline-flex; align-items: center; min-height: var(--tap);
  color: var(--alphv-blue); font-weight: 500; font-size: .875rem;
  text-decoration-color: currentColor;
}

/* ------------------------------------------- touch: every target is 44px */

@media (pointer: coarse) {
  .map-frame .maplibregl-popup-close-button { width: var(--tap); height: var(--tap); }
  .map-frame .maplibregl-ctrl-attrib-button { width: var(--tap); height: var(--tap); }
  .prov-table a, .spread__src a, .map-cta a, .methods-block a, .maplibregl-ctrl-attrib a, .now-sources__list a, .panel-error__hint a {
    /* a 44px hit area that does not push the lines of text apart */
    display: inline-block;
    min-height: var(--tap);
    padding-block: .65rem;
    margin-block: -.65rem;
  }
}

/* ------------------------------------------------- reduced motion, on purpose
 * Ambient loops stop: the haze drift (fire.js), the skeleton shimmer, the
 * in-flight pulse, the 3D orbit (embed.js renders a still). State-change
 * feedback stays, shortened: bars still grow, switches still slide, the 3D
 * still cross-fades in — each in about a tenth of a second.                 */
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background-image: none; }
  .busy { animation: none; clip-path: none; }
  .status[data-busy="true"] .status__dot { animation: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink-4); }
  .driver__fill, .dist__bar i, .market__bar span { transition-duration: var(--t-reduced); }
  .switch__track::after, .switch__track, .btn, a, .alphv__btn, .year-rail__bars i { transition-duration: var(--t-reduced); }
  .plate__scene { transition-duration: 200ms; }
  input[type="range"]::-webkit-slider-thumb { transition: none; }
  [data-busy="true"] > [data-state="ok"] { transition-duration: var(--t-reduced); }
}