@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url(vendor/fonts/fraunces-variable-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url(vendor/fonts/fraunces-variable-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(vendor/fonts/fraunces-variable-roman-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(vendor/fonts/fraunces-variable-roman-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(vendor/fonts/ibm-plex-mono-300-roman-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(vendor/fonts/ibm-plex-mono-300-roman-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/ibm-plex-mono-400-roman-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/ibm-plex-mono-400-roman-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(vendor/fonts/ibm-plex-mono-500-roman-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(vendor/fonts/ibm-plex-mono-500-roman-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/fonts/ibm-plex-mono-600-roman-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/fonts/ibm-plex-mono-600-roman-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ───────────────────────────────────────────────────────────────
   OpiEye — Editorial Documentary Pilot (v2)
   Dark, reverent, serif-led. The map is the subject; chrome quiets.
   Fraunces (display + body) + IBM Plex Mono (data readouts).
   ─────────────────────────────────────────────────────────────── */

:root {
  /* Canvas — deeper than v1, almost ink */
  --ink-0: #09080c;
  --ink-1: #14121a;
  --ink-2: #1d1a26;
  --ink-3: #2a2732;

  /* Paper — warm candle-white, not cold grey */
  --paper:       #efe6d6;
  --paper-dim:   #a89a85;
  --paper-muted: #746650;

  /* Blood — severity only. Never decorative. */
  --blood:       #c23a3a;
  --blood-bright:#e4484a;
  --blood-dim:   #6b1f1f;

  /* Ember — warm amber, for quiet accents (timeline progress, rules) */
  --ember:       #c4a07a;
  --ember-dim:   #7f654a;

  /* Back-compat with v1 JS that reads these names */
  --bg: var(--ink-0);
  --panel: var(--ink-1);
  --border: var(--ink-3);
  --text: var(--paper);
  --text-dim: var(--paper-dim);
  --accent: var(--blood-bright);

  /* Type */
  --display: "Fraunces", ui-serif, "Georgia", serif;
  --body:    "Fraunces", ui-serif, "Georgia", serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale */
  --rule: 1px;
  --gutter: 1rem;
  --gutter-lg: 2rem;
  --gutter-xl: 3.5rem;

  /* Chrome heights */
  --masthead-h: 48px;
  --overture-h: 120px;
  --footerbar-h: 78px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink-0);
  color: var(--paper);
  font-family: var(--body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  font-feature-settings: "liga" 1, "kern" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Map page only: lock viewport so the map fills the screen. Every
   other page (body.page-type) scrolls normally. */
body:not(.page-type) {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* A subtle filmic grain so the dark doesn't look flat. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
  border-radius: 1px;
}

.skip-link { position: absolute; left: -1000px; top: 0; }
.skip-link:focus {
  left: 16px; top: 8px; z-index: 10000;
  background: var(--paper); color: var(--ink-0);
  padding: 6px 12px; border-radius: 2px;
  font: 500 13px/1 var(--mono);
}

/* ───────────────────────── Loading ─────────────────────── */

#loading {
  position: fixed; inset: 0;
  background: var(--ink-0);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 10000;
  transition: opacity 0.6s ease;
}
#loading > div, #loading > img {
  font-family: var(--display) !important;
  color: var(--paper) !important;
  font-weight: 400 !important;
}
#loading > div:first-of-type {
  font-family: var(--display) !important;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  font-size: 36px !important;
}
#loading .loading-text {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--paper-muted);
  margin-top: var(--gutter);
}
.spinner {
  width: 28px; height: 28px;
  border: 1.5px solid var(--ink-3);
  border-top-color: var(--ember);
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─────────────────── Masthead ─────────────────── */

#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--masthead-h);
  z-index: 100;
  display: flex; align-items: center;
  padding: 0 var(--gutter-lg);
  background: var(--ink-0);
  border-bottom: var(--rule) solid var(--ink-3);
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--paper);
  text-decoration: none;
  flex-shrink: 0;
}
.logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
.logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(196,160,122,0.25));
}
.logo-text {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--paper);
  line-height: 1;
}
.subtitle { display: none; }
.header-controls { display: none; }

#menu-btn {
  margin-left: var(--gutter);
  background: transparent;
  border: none;
  color: var(--paper-dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 8px;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: color 0.2s;
  flex-shrink: 0;
}
#menu-btn:hover { color: var(--paper); }
#menu-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.4; fill: none; }

.masthead-crisis {
  font-family: var(--display);
  font-style: italic;
  font-size: 13px;
  color: var(--paper-dim);
  margin-left: auto;        /* push this + the menu to the right */
  padding-right: var(--gutter-lg);
  white-space: nowrap;
}
.masthead-crisis a {
  color: var(--blood-bright);
  border-bottom: 1px solid var(--blood-dim);
  padding-bottom: 1px;
}
.masthead-crisis a:hover { border-color: var(--blood-bright); }
.masthead-crisis .narcan-short { display: none; }

/* ─────────────────── Overture ─────────────────── */

/* Overture — two columns, two rows. Every element has one cell; no
   element spans across rows or columns. The warning caption is NOT
   inside the overture DOM, but it is positioned (via #estimate-warning
   rules below) to sit in the equivalent of grid-column 2, grid-row 1 —
   the top-right cell of the overture, above the standfirst. This
   makes overlap with the standfirst structurally impossible because
   they live in different rows. */
#overture {
  position: fixed;
  top: var(--masthead-h);
  left: 0; right: 0;
  /* min-height (not fixed height) so the band always contains its own
     wrapped content instead of letting it spill onto the metric chooser
     below. v2-init.js keeps --overture-h in sync with the real rendered
     height so the chooser's top offset tracks it at every viewport. */
  min-height: var(--overture-h);
  z-index: 90;
  padding: 14px var(--gutter-lg) 0;
  background: linear-gradient(to bottom, var(--ink-0) 0%, var(--ink-0) 88%, rgba(9,8,12,0) 100%);
  pointer-events: none;
  display: grid;
  /* Col 1 sizes to its content (H1 / dateline) instead of filling the
     remaining space. Combined with the 6rem column-gap, this places the
     standfirst exactly one inch right of the H1's text edge instead of
     stranding it at the far right of the page. */
  grid-template-columns: max-content minmax(0, 1fr);
  /* Row 1 is locked to 60px so the dateline + warning slot has a stable
     height regardless of which metric is selected. Without this, a metric
     whose warning copy is long expands row 1 and pushes the H1 (row 2)
     down — the "Map of Loss text moves when you change tabs" bug. */
  grid-template-rows: 60px 1fr;
  column-gap: 6rem;
  row-gap: 0;
  align-items: start;
}
#overture .dateline {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--paper-muted);
  margin-bottom: 6px;
}
#overture .dateline em {
  font-style: normal;
  color: var(--blood-bright);
  margin: 0 0.6em;
}
#overture h1 {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1;
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--paper);
  /* Raise the H1 by ~1/4 inch so it sits closer to the dateline.
     Standfirst gets the same lift so the editorial unit moves together. */
  margin: -24px 0 0;
  align-self: start;
}
#overture h1 em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--blood-bright);
  font-weight: 300;
}
#overture .standfirst {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: var(--paper-dim);
  max-width: 100%;
  /* Sit at row 2 top with positive margin for breathing room from the
     warning above. The H1 stays raised; the standfirst stays low so it
     doesn't collide with the warning's source caveat in col 2 — the
     two share a column, and the warning can run up to ~58px tall on
     metrics with long source caveats (e.g. trends, rx_rate). */
  margin: 16px 0 0;
  padding-left: var(--gutter);
  border-left: 1px solid var(--ink-3);
  align-self: start;
}

/* ─────────────────── Map ─────────────────── */

#map {
  position: fixed;
  top: calc(var(--masthead-h) + var(--overture-h));
  left: 0; right: 0;
  bottom: var(--footerbar-h);
  z-index: 1;
  background: var(--ink-0);
}
.leaflet-container { background: var(--ink-0); font-family: var(--mono); }
.leaflet-control-attribution {
  background: rgba(9,8,12,0.82) !important;
  color: var(--paper-muted) !important;
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.05em;
  padding: 3px 7px !important;
}
.leaflet-control-attribution a { color: var(--ember-dim) !important; }
.leaflet-control-zoom { display: none !important; }

/* ─────────────── Metric chooser ─────────────── */

#metric-chooser {
  position: fixed;
  top: calc(var(--masthead-h) + var(--overture-h) + 16px);
  left: var(--gutter-lg);
  z-index: 50;
  display: flex;
  gap: 0;
  border-bottom: var(--rule) solid var(--ink-3);
  padding-bottom: 6px;
  max-width: calc(100vw - 2 * var(--gutter-lg));
  overflow-x: auto;
  scrollbar-width: none;
}
#metric-chooser::-webkit-scrollbar { display: none; }
#metric-chooser button {
  background: transparent;
  border: none;
  color: var(--paper-muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  position: relative;
  transition: color 0.25s;
  white-space: nowrap;
}
#metric-chooser button::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: -7px;
  height: 2px;
  background: transparent;
  transition: background 0.3s;
}
#metric-chooser button[aria-pressed="true"] { color: var(--paper); }
#metric-chooser button[aria-pressed="true"]::after { background: var(--blood-bright); }
#metric-chooser button:hover:not([aria-pressed="true"]) { color: var(--paper-dim); }
#metric-select { position: absolute; left: -9999px; }

/* ─────────────── County search ─────────────── */

/* Lives inside the masthead (#header) — never covers the map. Desktop:
   right-aligned pill between the logo and the crisis chip. Phones: a
   full-width second header row (see the wrap rules in the 720px query). */
#county-search {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(18, 16, 14, 0.88);
  border: 1px solid var(--ink-3);
  border-radius: 8px;
  color: var(--text-dim);
  transition: border-color 0.2s;
}
/* The search already claims the flexible space, so the crisis chip that
   follows it needs only a fixed gap, not its own auto margin. Scoped to
   the sibling combinator so pages without a search keep the chip
   right-aligned via .masthead-crisis's own margin-left: auto. */
#county-search ~ .masthead-crisis { margin-left: var(--gutter); }
#county-search:focus-within { border-color: var(--ember-dim); color: var(--ember); }
#county-search svg { width: 15px; height: 15px; flex: none; }
#county-search input {
  background: none;
  border: none;
  outline: none;
  color: var(--paper);
  font-family: var(--mono);
  /* 12px mono keeps the full "Find your county or ZIP" placeholder
     visible; at 13px it clipped inside narrow inputs. */
  font-size: 12px;
  width: 200px;
}
#county-search input::placeholder { color: var(--text-dim); }
#county-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: rgba(18, 16, 14, 0.96);
  border: 1px solid var(--ink-3);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
}
#county-search-results[hidden] { display: none; }
#county-search-results .search-result {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: none;
  border: none;
  color: var(--paper);
  font-size: 13px;
  cursor: pointer;
}
#county-search-results .search-result .search-state { color: var(--text-dim); font-size: 11.5px; margin-left: 6px; }
#county-search-results .search-result:hover,
#county-search-results .search-result[aria-selected="true"] {
  background: rgba(196, 160, 122, 0.12);
}
#county-search-results .search-empty { padding: 8px 12px; color: var(--text-dim); font-size: 12px; }

/* ─────────────── First-visit hint ─────────────── */

#first-visit-hint {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--footerbar-h) + 14px);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 480px);
  padding: 9px 12px 9px 16px;
  background: rgba(18, 16, 14, 0.92);
  border: 1px solid var(--ember-dim);
  border-radius: 8px;
  color: var(--paper);
  font-size: 13.5px;
  line-height: 1.4;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  transition: opacity 0.4s;
  /* Click-transparent so the hint never blocks what sits under it (on
     phones it overlays the Light a Candle button); only the × keeps
     pointer events. Map clicks pass through and dismiss it via onAct. */
  pointer-events: none;
}
#first-visit-hint button { pointer-events: auto; }
#first-visit-hint[hidden] { display: none; }
#first-visit-hint strong { color: var(--blood-bright); }
#first-visit-hint.hint-out { opacity: 0; }
#first-visit-hint button {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  flex: none;
}
#first-visit-hint button:hover { color: var(--paper); }

/* ─────────────── Footer bar ─────────────── */

#footerbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--footerbar-h);
  z-index: 90;
  background: var(--ink-0);
  border-top: var(--rule) solid var(--ink-3);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: var(--gutter-lg);
  row-gap: 4px;
  padding: 10px var(--gutter-lg) 12px;
  align-items: center;
}

.transport {
  display: flex; align-items: center; gap: 14px;
  grid-row: 1 / 3;
  padding-right: var(--gutter-lg);
  border-right: var(--rule) solid var(--ink-3);
  min-height: 56px;
}
#play-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--blood-dim);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.3s;
  padding: 0;
  overflow: hidden;
}
#play-btn svg { width: 19px; height: 19px; display: block; }
#play-btn:hover { border-color: var(--blood); color: var(--blood-bright); background: rgba(228,72,74,0.08); }
#play-btn.playing {
  /* While playing: pause bars shown, soft accent glow breathes. */
  border-color: var(--blood);
  color: var(--blood-bright);
  animation: play-glow 2.4s ease-in-out infinite;
}
@keyframes play-glow {
  0%, 100% { box-shadow: 0 0 6px 0 rgba(228,72,74,0.30), inset 0 0 5px rgba(228,72,74,0.10); }
  50% { box-shadow: 0 0 12px 2px rgba(228,72,74,0.50), inset 0 0 8px rgba(228,72,74,0.18); }
}
@media (prefers-reduced-motion: reduce) {
  #play-btn.playing {
    animation: none;
    box-shadow: 0 0 8px 1px rgba(228,72,74,0.40);
  }
}

/* Speed selector is hidden for now — playback defaults to 3x.
   The <select> is kept in the DOM because the main app reads/writes
   its .style.display to show/hide with static metrics. */
#speed-select { display: none !important; }

/* Timeline ruler */
#timeline {
  grid-column: 2; grid-row: 1;
  position: relative;
  height: 28px;
  padding: 0 2px;
}
#timeline-rail {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: var(--ink-3);
}
#timeline-progress {
  position: absolute;
  top: 50%; left: 0;
  height: 1px;
  background: var(--ember);
  width: 0;
  transition: width 0.18s linear;
}
#timeline-thumb {
  position: absolute;
  top: 50%;
  width: 10px; height: 10px;
  background: var(--blood-bright);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(228,72,74,0.15), 0 0 20px rgba(228,72,74,0.3);
  left: 0;
  transition: left 0.18s linear;
  pointer-events: none;
}
#timeline-ticks {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
}
#timeline-ticks .tick {
  position: absolute;
  top: 50%;
  width: 1px;
  height: 7px;
  background: var(--ink-3);
  transform: translate(-0.5px, -7px);
}
#timeline-ticks .tick.major {
  height: 11px;
  background: var(--paper-muted);
  transform: translate(-0.5px, -9px);
}
#timeline-ticks .tick-label {
  position: absolute;
  top: calc(50% + 10px);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--paper-muted);
  transform: translateX(-50%);
  white-space: nowrap;
}

#period-readout {
  grid-column: 3; grid-row: 1 / 3;
  padding-left: var(--gutter-lg);
  border-left: var(--rule) solid var(--ink-3);
  min-height: 56px;
  display: flex; flex-direction: column; justify-content: center;
  text-align: right;
  min-width: 150px;
}
#period-readout .readout-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--paper-muted);
  margin-bottom: 2px;
}
#period-readout .readout-value {
  font-family: var(--display);
  font-variation-settings: "opsz" 144;
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  color: var(--paper);
  letter-spacing: -0.01em;
}

#stats-bar {
  grid-column: 2; grid-row: 2;
  display: flex;
  gap: var(--gutter-lg);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--paper-dim);
  letter-spacing: 0.06em;
  overflow: hidden;
  white-space: nowrap;
}
#stats-bar .stat-item { display: inline-flex; gap: 8px; align-items: baseline; }
#stats-bar .stat-label {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-muted);
}
#stats-bar .stat-value { color: var(--paper); font-weight: 500; }
/* App emits both .positive/.negative and .up/.down flavors depending
   on context (stat-bar YoY vs county-panel annual-change). Support both. */
#stats-bar .stat-change.positive,
#stats-bar .stat-change.up { color: var(--blood-bright); }
#stats-bar .stat-change.negative,
#stats-bar .stat-change.down { color: var(--ember); }
#quarter-select { position: absolute; left: -9999px; }

#memorial-btn-float {
  position: fixed;
  right: var(--gutter-lg);
  bottom: calc(var(--footerbar-h) + var(--gutter));
  z-index: 60;
  background: transparent;
  border: 1px solid var(--ember-dim);
  color: var(--ember);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 10px 16px;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
#memorial-btn-float:hover {
  border-color: var(--ember);
  color: var(--paper);
  background: rgba(196,160,122,0.06);
}
#memorial-btn { display: none; }

/* ─────────────── Legend ─────────────── */

#legend {
  position: fixed;
  left: var(--gutter-lg);
  bottom: calc(var(--footerbar-h) + var(--gutter));
  z-index: 50;
  background: rgba(9,8,12,0.82);
  border: 1px solid var(--ink-3);
  padding: 12px 14px 10px;
  min-width: 170px;
  backdrop-filter: blur(6px);
}
#legend h4 {
  margin: 0 0 10px 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--paper-muted);
  font-weight: 500;
}
.legend-row {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--paper-dim);
  margin-bottom: 4px;
  letter-spacing: 0.03em;
}
.legend-swatch { width: 14px; height: 8px; flex-shrink: 0; }
#legend-intl-note {
  margin-top: 8px !important;
  color: var(--paper-muted) !important;
  font-family: var(--mono);
  font-size: 9px !important;
  letter-spacing: 0.1em;
}

/* ─────────────── Menu dropdown ─────────────── */

.menu-dropdown {
  position: fixed;
  top: var(--masthead-h);
  right: 0;
  width: 320px;
  max-width: 90vw;
  background: var(--ink-1);
  border-left: 1px solid var(--ink-3);
  border-bottom: 1px solid var(--ink-3);
  box-shadow: -20px 20px 40px rgba(0,0,0,0.4);
  z-index: 500;
  display: none;
  padding: 10px 0;
}
.menu-dropdown.open { display: block; }
.menu-item {
  display: block;
  padding: 12px 22px;
  font-family: var(--display);
  font-size: 16px;
  color: var(--paper);
  border-bottom: 1px solid var(--ink-2);
  transition: background 0.15s;
}
.menu-item:last-child { border-bottom: none; }
.menu-item:hover { background: var(--ink-2); color: var(--paper); }
#menu-watchlist { color: var(--ember) !important; font-style: italic; }

/* ─────────────── Side panels ─────────────── */

.side-panel {
  position: fixed;
  top: 0;
  right: -480px;
  width: 480px;
  max-width: 92vw;
  height: 100vh;
  background: var(--ink-1);
  border-left: 1px solid var(--ink-3);
  z-index: 600;
  display: flex;
  flex-direction: column;
  transition: right 0.35s cubic-bezier(0.22, 0.9, 0.28, 1);
  overflow: hidden;
}
.side-panel.open { right: 0; }
.panel-header {
  padding: 26px var(--gutter-lg) 20px;
  border-bottom: 1px solid var(--ink-3);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--gutter);
}
.panel-header h3 {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 20;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.panel-close {
  background: transparent;
  border: none;
  color: var(--paper-muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.2s;
}
.panel-close:hover { color: var(--paper); }
.panel-body {
  padding: 20px var(--gutter-lg);
  overflow-y: auto;
  flex: 1;
}
#zip-panel-body h4 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--paper-muted);
  margin: 20px 0 8px;
  font-weight: 500;
}
#zip-panel-body .big-number,
#zip-panel-body strong {
  font-family: var(--display);
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  color: var(--paper);
}

/* Stat boxes (Deaths / Emergencies / Per 100K) in the county panel */
.zip-stat-box {
  display: inline-block;
  margin: 0 28px 18px 0;
  vertical-align: top;
}
.zip-stat-box .label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--paper-muted);
  margin-bottom: 4px;
}
.zip-stat-box .value {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  color: var(--paper);
  letter-spacing: -0.01em;
}

/* Year-over-year change callout */
.annual-change {
  font-family: var(--display);
  font-style: italic;
  font-size: 13px;
  color: var(--paper-dim);
  margin: 0 0 16px;
}
.annual-change .stat-change {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border: 1px solid var(--ink-3);
  margin-right: 6px;
}
.annual-change .stat-change.positive,
.annual-change .stat-change.up { color: var(--blood-bright); border-color: var(--blood-dim); }
.annual-change .stat-change.negative,
.annual-change .stat-change.down { color: var(--ember); border-color: var(--ember-dim); }

/* Risk badge (top of county panel) */
.risk-badge {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  padding: 4px 12px !important;
  border-radius: 0 !important;
}

/* Quarterly trend bars — the county panel renders one <div class="bar-group">
   per quarter (107 of them). Without any base styling the main app's
   inline height:Npx produces zero-width bars and the <div class="bar-label">
   text wraps, stacking "99 Q1 99 Q2 ..." vertically at the top of the panel.
   These rules render the chart as a compact horizontal strip with the
   per-quarter labels collapsed (they're redundant with the bar's title
   tooltip). */
.bar-group {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  vertical-align: bottom;
  height: 82px;
  width: 4px;
  margin-right: 1px;
}
.bar {
  width: 3px;
  min-height: 1px;
  background: var(--ember);
  opacity: 0.72;
  transition: opacity 0.2s, background 0.2s;
}
.bar-group:hover .bar { opacity: 1; background: var(--blood-bright); }
.bar-label { display: none; }

/* Wrapper that the main app emits around the bar-groups doesn't have a
   class of its own; target by descendant relationship. */
#zip-panel-body .bar-group:first-of-type {
  margin-left: 0;
}

/* ---- County-panel classes ported from v1 into the v2 idiom ----------
   These rules shipped in v1's index.html <style> but were omitted when
   v2-style.css was first written. Without them the annual comparison
   collapses ("2024192") and the rep-letter / action box / share bar
   render as unstyled flow. Rebuilt here in the editorial-documentary
   idiom: hairline rules, mono labels, display-serif numerals. */

.zip-stats { margin: 14px 0 4px; }

/* Year-over-year block under the stat boxes */
.annual-comparison {
  margin: 18px 0 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-3);
}
.annual-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--ink-2);
}
.annual-row:last-of-type { border-bottom: none; }
.annual-row .year {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-muted);
}
.annual-row .count {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: var(--paper);
  letter-spacing: -0.01em;
}

/* Quarterly trend-chart wrapper. Individual bars are already styled
   above (.bar-group, .bar); this gives the strip horizontal room and
   a hairline separator above the heading. */
.trend-chart {
  margin: 20px 0 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-3);
}
.trend-chart .bars {
  display: block;
  line-height: 0;
  padding: 4px 0 2px;
  white-space: nowrap;
  overflow-x: auto;
}

/* ─────────────── County panel: arc + response scorecard ─────────────── */

.no-quarter-note {
  margin: 14px 0;
  padding: 10px 12px;
  border: 1px solid var(--ink-3);
  border-left: 2px solid var(--ember-dim);
  font-size: 12.5px;
  color: var(--paper-dim);
  line-height: 1.5;
}
.arc-block {
  margin: 18px 0 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-3);
}
.arc-chart {
  display: block;
  width: 100%;
  height: 64px;
  margin-top: 6px;
  background: var(--ink-1);
}
.arc-years {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--paper-muted);
  margin-top: 3px;
}
.arc-note {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--paper-dim);
}
.scorecard {
  margin: 18px 0 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-3);
}
.score-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--ink-2);
  font-size: 12.5px;
  line-height: 1.45;
}
.score-row:last-of-type { border-bottom: none; }
.score-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-muted);
  flex: none;
  padding-top: 2px;
}
.score-val { text-align: right; color: var(--paper); }
.score-val.score-good { color: #8fd694; }
.score-val.score-mid { color: #e0c080; }
.score-val.score-bad { color: #ff8891; }
.policy-chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--ink-3);
  margin: 2px 0 2px 4px;
  white-space: nowrap;
}
.policy-chip.chip-yes { color: #8fd694; border-color: rgba(143, 214, 148, 0.4); }
.policy-chip.chip-no { color: #ff8891; border-color: rgba(255, 136, 145, 0.4); }
.score-explain {
  padding: 4px 0 7px;
  border-bottom: 1px solid var(--ink-2);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
}
.score-explain a { color: #6abfdf; }
.score-rateline {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--paper-dim);
}
.score-rateline strong { color: var(--paper); }
.score-vintage {
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--text-dim);
  line-height: 1.4;
}
.data-footer {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--ink-3);
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-dim);
}

/* "What You Can Do Right Now" action list */
.action-box {
  margin: 20px 0 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-3);
}
.action-box h4 { color: var(--ember) !important; }
.action-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0 12px;
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--paper);
}
.action-item:last-child { margin-bottom: 0; }
.action-icon {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ember);
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  padding-top: 2px;
}
.action-item a {
  color: var(--ember);
  text-decoration: none;
  border-bottom: 1px solid var(--ember-dim);
}
.action-item a:hover {
  color: var(--paper);
  border-bottom-color: var(--paper-dim);
}
.action-item .action-detail {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--paper-muted);
  margin-top: 3px;
  letter-spacing: 0.02em;
}

/* Representative-message box */
.rep-message-box {
  margin: 20px 0 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-3);
}
.rep-message-box h4 { color: var(--blood-bright) !important; }
.rep-message-text {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--paper-dim);
  background: var(--ink-0);
  border: 1px solid var(--ink-3);
  padding: 14px;
  margin-bottom: 12px;
  white-space: pre-wrap;
  max-height: 220px;
  overflow-y: auto;
}

/* Share buttons — the JS emits inline display:flex; we only add the
   hairline separator above to match the other sections. */
.share-section {
  margin-top: 22px !important;
  padding-top: 16px;
  border-top: 1px solid var(--ink-3);
}

.form-group { margin-bottom: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-muted);
  margin-bottom: 6px;
  font-weight: 500;
}
.form-group input,
.form-group textarea,
.form-group select,
input[type=text], input[type=password], input[type=number], input[type=email], textarea, select {
  width: 100%;
  background: var(--ink-0);
  border: 1px solid var(--ink-3);
  color: var(--paper);
  font-family: var(--body);
  font-size: 15px;
  padding: 10px 12px;
  border-radius: 0;
  transition: border-color 0.2s;
}
.form-group textarea { min-height: 100px; resize: vertical; }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--ember);
  outline: none;
}
.form-note {
  font-family: var(--display);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--paper-muted);
  margin: 6px 0 0;
}

.btn {
  background: transparent;
  border: 1px solid var(--ink-3);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 12px 20px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.btn:hover { border-color: var(--paper); }
.btn-accent {
  background: var(--blood);
  border-color: var(--blood);
  color: var(--paper);
}
.btn-accent:hover {
  background: var(--blood-bright);
  border-color: var(--blood-bright);
}

.memorial-intro {
  font-family: var(--display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--paper-dim);
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ink-3);
}
.memorial-form { margin-bottom: 24px; }
.memorial-entries h4 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--paper-muted);
  margin: 20px 0 12px;
  font-weight: 500;
}
.memorial-entry { padding: 14px 0; border-bottom: 1px solid var(--ink-2); }
.memorial-entry .name {
  font-family: var(--display);
  font-size: 18px;
  color: var(--paper);
  font-weight: 400;
}
.memorial-entry .years,
.memorial-entry .location {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--paper-muted);
  letter-spacing: 0.05em;
}
.memorial-entry .story {
  font-family: var(--display);
  font-style: italic;
  font-size: 13.5px;
  color: var(--paper-dim);
  margin-top: 6px;
  line-height: 1.5;
}
/* Photos in the Light-a-Candle panel list. Same treatment as the
   memorial wall's .memorial-card-photo so both surfaces read alike;
   without this rule the <img> rendered at its natural pixel size. */
.memorial-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  max-height: 260px;
  object-fit: cover;
  margin-top: 10px;
  background: var(--ink-1);
  filter: grayscale(10%) contrast(1.05);
}

.photo-upload-area { position: relative; }
.photo-upload-btn {
  width: 100%;
  background: transparent;
  border: 1px dashed var(--ink-3);
  color: var(--paper-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 20px 12px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.photo-upload-btn:hover { border-color: var(--ember); color: var(--paper); }
.photo-preview {
  display: none;
  max-width: 100%; max-height: 200px;
  margin-top: 10px;
  border: 1px solid var(--ink-3);
}
#mem-photo { position: absolute; left: -9999px; }

/* ─────────────── Animation year overlay ─────────────── */

#animation-progress { display: none; }
#animation-progress-bar { display: none; }

#animation-year-overlay {
  position: fixed;
  right: var(--gutter-lg);
  /* +16px: the top-right corner is clear now that the county search
     lives in the masthead; a larger offset pushed the year number into
     the legend on phones. */
  top: calc(var(--masthead-h) + var(--overture-h) + 16px);
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-weight: 300;
  /* Half the old clamp(80px,10vw,160px) — an accent, not a billboard. */
  font-size: clamp(44px, 5vw, 84px);
  line-height: 0.9;
  color: var(--paper);
  letter-spacing: -0.04em;
  pointer-events: none;
  z-index: 40;
  display: none;
  opacity: 0.85;
  text-shadow: 0 0 40px rgba(9,8,12,0.9);
}
#animation-year-overlay.visible { display: block; }

#data-notice { display: none; }

/* Source/methodology caption.
   Lives INSIDE the #overture grid (moved there by v2-init.js) so it
   owns one cell — grid-column 2, grid-row 1 at desktop — and inherits
   the right-column width automatically. When the grid collapses to a
   single column at narrow viewports, the warning takes its own row and
   flows with the other children. No fixed positioning, no per-breakpoint
   width overrides, no z-index overlay. Structurally overlap-proof
   because every element owns its cell. */
#estimate-warning {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  position: static;
  top: auto;
  right: auto;
  left: auto;
  transform: none;
  width: auto;
  max-width: 100%;
  background: transparent;
  backdrop-filter: none;
  border: none;
  border-left: 1px solid var(--ember-dim);
  color: var(--paper-muted);
  font-family: var(--mono);
  font-style: normal;
  font-weight: 400;
  font-size: 9.5px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-transform: none;
  padding: 2px 0 2px 14px;
  border-radius: 0;
  z-index: auto;
  text-align: left;
  /* Cap vertical size so a long caption scrolls internally rather than
     pushing row 2 (H1 / standfirst) down the page. */
  max-height: 58px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ember-dim) transparent;
  pointer-events: auto;
}
#estimate-warning::-webkit-scrollbar { width: 3px; }
#estimate-warning::-webkit-scrollbar-thumb { background: var(--ember-dim); }

#emergency-banner { display: none !important; }

/* ─────────────── Watch list + Auth ─────────────── */

#watchlist-panel {
  font-family: var(--body) !important;
  background: var(--ink-1) !important;
  border-color: var(--ink-3) !important;
  color: var(--paper) !important;
}
#watchlist-panel h3 {
  font-family: var(--display) !important;
  font-variation-settings: "opsz" 144;
  font-size: 22px !important;
  color: var(--ember) !important;
  font-weight: 400 !important;
}
#watchlist-panel p {
  font-family: var(--display) !important;
  font-style: italic;
  color: var(--paper-dim) !important;
  font-size: 13px !important;
}
#watchlist-content { font-family: var(--mono) !important; font-size: 12px !important; }

#auth-panel {
  position: fixed;
  top: var(--masthead-h); right: -400px;
  width: 400px; max-width: 92vw;
  background: var(--ink-1);
  border-left: 1px solid var(--ink-3);
  height: calc(100vh - var(--masthead-h));
  z-index: 550;
  padding: var(--gutter-lg);
  overflow-y: auto;
  transition: right 0.35s cubic-bezier(0.22, 0.9, 0.28, 1);
  display: none;
}
#auth-panel.open { right: 0; display: block; }
.auth-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--ink-3); margin-bottom: 20px; }
.auth-tab {
  background: transparent; border: none;
  color: var(--paper-muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.auth-tab.active { color: var(--paper); border-bottom-color: var(--blood-bright); }

/* ─────────────── Toasts ─────────────── */

#toast-container {
  position: fixed;
  top: calc(var(--masthead-h) + 16px);
  right: var(--gutter-lg);
  z-index: 9000;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--ink-1);
  border: 1px solid var(--ink-3);
  border-left: 3px solid var(--ember);
  color: var(--paper);
  font-family: var(--display);
  font-size: 14px;
  padding: 12px 18px;
  max-width: 340px;
  animation: toastIn 0.35s cubic-bezier(0.22, 0.9, 0.28, 1);
  pointer-events: auto;
}
.toast.error { border-left-color: var(--blood-bright); }
.toast.success { border-left-color: var(--ember); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─────────────── Leaflet tooltip ─────────────── */

.leaflet-tooltip {
  background: rgba(9,8,12,0.94) !important;
  color: var(--paper) !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.03em !important;
  border: 1px solid var(--ink-3) !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
  padding: 10px 12px !important;
}
.leaflet-tooltip::before { display: none !important; }
.leaflet-tooltip strong { font-family: var(--display); font-weight: 500; color: var(--paper); letter-spacing: 0; }

/* ─────────────── Candle markers ─────────────── */

.candle-icon {
  filter: drop-shadow(0 0 8px rgba(196,160,122,0.6));
  animation: flicker 2.4s ease-in-out infinite alternate;
}
@keyframes flicker {
  0%   { opacity: 0.72; transform: scale(1); }
  50%  { opacity: 1;    transform: scale(1.02); }
  100% { opacity: 0.82; transform: scale(0.99); }
}

/* ─────────────── Opening reveal ─────────────── */

#header, #overture, #footerbar, #legend, #metric-chooser, #memorial-btn-float {
  animation: riseIn 0.9s cubic-bezier(0.22, 0.9, 0.28, 1) both;
}
#overture { animation-delay: 0.12s; }
#metric-chooser { animation-delay: 0.32s; }
#footerbar { animation-delay: 0.18s; }
#legend { animation-delay: 0.4s; }
#memorial-btn-float { animation-delay: 0.5s; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────────── Narrow desktop / tablet ───────────────
   The desktop overture lays out as a 2-col grid with a fixed 440px
   right column for the standfirst + warning. Below ~1000px that
   440px doesn't fit, and the grid engine squeezes the left column
   below readability. Collapse the grid to a single column: each
   child — dateline, warning, H1, standfirst — takes its own row.
   The warning row collapses when the main app hasn't populated it. */

/* Tablet / narrow-laptop: keep the 2-column grid so the standfirst sits
   beside the H1, but shrink the right column so it fits when the viewport
   gets tight. Below 600px (true phone) we collapse to a single column. */
@media (max-width: 1000px) {
  #overture {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    column-gap: var(--gutter);
    padding: 12px var(--gutter-lg) 0;
  }
  #overture .standfirst { font-size: 12px; line-height: 1.45; }
  #estimate-warning { font-size: 9px; }
}

@media (max-width: 600px) {
  :root { --overture-h: 152px; }
  #overture {
    grid-template-columns: 1fr;
    /* The source-caveat warning is force-hidden below 720px (deferred to
       the methodology page), so its row collapses to nothing here instead
       of reserving 48px of dead space that pushed the map down and left
       the band feeling half-empty. dateline / H1 / standfirst only. */
    grid-template-rows: auto 0 auto auto;
    height: auto;
    min-height: var(--overture-h);
    padding: 12px var(--gutter-lg) 14px;
    column-gap: 0;
  }
  #overture .dateline { grid-column: 1; grid-row: 1; margin-bottom: 4px; }
  #estimate-warning {
    grid-column: 1; grid-row: 2;
    max-height: 48px;
    margin: 4px 0 6px;
    font-size: 9px;
  }
  /* Reserve the row even when there's no warning content, so the H1 row
     doesn't shift up between metrics. visibility:hidden keeps the layout
     box; display:none would collapse the grid row. */
  #estimate-warning:empty { visibility: hidden; }
  #overture h1 {
    grid-column: 1; grid-row: 3;
    font-size: clamp(30px, 5.6vw, 48px);
    margin-top: 4px;
  }
  #overture .standfirst {
    grid-column: 1; grid-row: 4;
    padding-left: 0;
    padding-top: 10px;
    margin-top: 10px;
    border-left: none;
    border-top: 1px solid var(--ink-3);
    max-width: 100%;
  }
}

/* Masthead crisis-line: on small screens collapse the prose and keep
   just the tappable 988 chip — a phone visitor in crisis must reach
   988 in one tap, so it is never fully hidden. */
@media (max-width: 900px) {
  .masthead-crisis { font-size: 0; }
  .masthead-crisis em { display: none; }
  .masthead-crisis a {
    font-size: 13px;
    padding: 3px 10px;
    border: 1px solid var(--blood-dim);
    border-radius: 999px;
    color: var(--blood-bright);
  }
  /* The connecting prose is font-size 0 here, so give the two pills a
     real gap, and swap the long URL for the short label. */
  .masthead-crisis a + a { margin-left: 6px; }
  .masthead-crisis .narcan-full { display: none; }
  .masthead-crisis .narcan-short { display: inline; }
}

/* ─────────────── Small screens ─────────────── */

@media (max-width: 720px) {
  /* Phone masthead is an explicit two-row grid — every element has one
     cell, so nothing can clip or bleed below the header no matter how
     the content wraps. Row 1: logo | crisis chips | menu (icon only).
     Row 2: county search spanning the full width.
     44 + 40 + 2×4 padding = 92 = --masthead-h; elements anchored below
     the masthead all follow the variable. */
  :root { --masthead-h: 92px; --overture-h: 170px; --footerbar-h: 104px; }
  #header {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-rows: 44px 40px;
    align-items: center;
    column-gap: 8px;
    height: var(--masthead-h);
    padding: 4px var(--gutter);
  }
  .logo { grid-column: 1; grid-row: 1; gap: 8px; }
  .logo-icon { width: 26px; height: 26px; }
  .logo-text { font-size: 19px; }
  .masthead-crisis { grid-column: 3; grid-row: 1; margin-left: 0; padding-right: 0; }
  #menu-btn { grid-column: 4; grid-row: 1; margin-left: 0; padding-right: 0; }
  #menu-btn .menu-label { display: none; }
  #county-search { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  #county-search input { flex: 1; width: auto; }
  #overture { padding: 10px var(--gutter) 12px; }
  #overture h1 { font-size: clamp(28px, 8vw, 44px); margin-top: 4px; }
  #overture .standfirst { font-size: 12.5px; padding-top: 8px; margin-top: 6px; }
  /* Phones already cramped — defer the source-caveat to the methodology page. */
  #estimate-warning { display: none !important; }
  #header { padding: 0 var(--gutter); }
  #footerbar {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    padding: 8px var(--gutter) 10px;
    row-gap: 6px;
  }
  .transport { grid-row: 1; grid-column: 1; border-right: none; padding-right: 0; min-height: 0; padding-bottom: 6px; border-bottom: 1px solid var(--ink-3); }
  #timeline { grid-column: 1; grid-row: 2; }
  #period-readout { grid-column: 1; grid-row: 3; text-align: left; border-left: none; padding-left: 0; padding-top: 4px; border-top: 1px solid var(--ink-3); flex-direction: row; justify-content: space-between; align-items: baseline; }
  #stats-bar { display: none; }
  #legend {
    left: var(--gutter);
    bottom: calc(var(--footerbar-h) + 8px);
    padding: 8px 10px 6px;
    min-width: 0;
  }
  #legend h4 { margin-bottom: 6px; font-size: 8px; }
  .legend-row { font-size: 9px; gap: 7px; margin-bottom: 3px; }
  .legend-swatch { width: 11px; height: 6px; }
  #metric-chooser { left: var(--gutter); top: calc(var(--masthead-h) + var(--overture-h) + 8px); }
  #memorial-btn-float { right: var(--gutter); }
  /* Below the metric-chooser row, which occupies the top strip on phones. */
  #animation-year-overlay { top: calc(var(--masthead-h) + var(--overture-h) + 44px); }
  .side-panel { width: 100vw; }
}

/* Form + table treatments for small screens. Stacks two-column form rows
   to one column and lets long tables scroll horizontally instead of
   compressing into illegible narrow columns. */
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
  .page-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13px;
    white-space: nowrap;
  }
  .page-content td,
  .page-content th {
    padding: 8px 10px;
    font-size: 12.5px;
  }
}

/* ───────────────────────────────────────────────────────────────
   PAGE TYPE — about, memorial-wall, etc.
   Long-form pages share the same masthead but drop the overture.
   The body scrolls here (in contrast to the map page which locks
   the viewport). Generous measure, reverent typographic tone.
   ─────────────────────────────────────────────────────────────── */

body.page-type {
  min-height: 100vh;
}
body.page-type #header { position: static; }

.page-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 72px var(--gutter-lg) 96px;
}

.page-content h1 {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1;
  font-weight: 400;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0 0 28px;
}
.page-content h1::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: var(--blood-bright);
  margin: 22px 0 0;
}

.page-content h2 {
  font-family: var(--display);
  font-variation-settings: "opsz" 72;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin: 48px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--ink-3);
}

.page-content h3 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--paper-muted);
  margin: 32px 0 10px;
}

.page-content p,
.page-content li {
  font-family: var(--body);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--paper-dim);
  margin: 0 0 18px;
}
.page-content p strong,
.page-content li strong {
  font-weight: 600;
  color: var(--paper);
}
.page-content a {
  color: var(--paper);
  border-bottom: 1px solid var(--ember-dim);
  padding-bottom: 1px;
  transition: border-color 0.2s, color 0.2s;
}
.page-content a:hover {
  color: var(--ember);
  border-bottom-color: var(--ember);
}

.page-content ul,
.page-content ol {
  padding-left: 22px;
  margin: 0 0 24px;
}
.page-content ul li,
.page-content ol li {
  margin-bottom: 10px;
}
.page-content ul {
  list-style: none;
  padding-left: 0;
}
.page-content ul li {
  position: relative;
  padding-left: 26px;
}
.page-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 14px;
  height: 1px;
  background: var(--blood-bright);
  opacity: 0.7;
}

.page-content .lede {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.45;
  color: var(--paper);
  margin: 0 0 36px;
}

/* Footer — sparse, centered, italic */
.site-footer {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px var(--gutter-lg) 60px;
  border-top: 1px solid var(--ink-3);
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  color: var(--paper-muted);
}
.site-footer p {
  font-size: 13px;
  margin: 0 0 6px;
  line-height: 1.55;
}
.site-footer p:last-child {
  font-size: 11px;
  color: var(--paper-muted);
  opacity: 0.7;
  font-style: normal;
  font-family: var(--mono);
  letter-spacing: 0.08em;
  margin-top: 12px;
}
.site-footer a {
  color: var(--paper-dim);
  border-bottom: 1px solid transparent;
}
.site-footer a:hover {
  color: var(--paper);
  border-bottom-color: var(--ember);
}

/* ───────────────────────────────────────────────────────────────
   MEMORIAL WALL — the candle grid
   ─────────────────────────────────────────────────────────────── */

.wall-controls {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin: 28px 0 0;
  padding: 20px 0;
  border-top: 1px solid var(--ink-3);
  border-bottom: 1px solid var(--ink-3);
}
.wall-search,
.wall-sort {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-3);
  padding: 8px 2px;
  color: var(--paper);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 400;
  border-radius: 0;
  transition: border-color 0.2s;
}
.wall-search:focus,
.wall-sort:focus {
  outline: none;
  border-bottom-color: var(--ember);
}
.wall-search {
  flex: 1;
  min-width: 200px;
}
.wall-sort {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-dim);
  cursor: pointer;
}

.wall-count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-muted);
  margin: 24px 0 0;
}

.memorial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 36px;
}

.memorial-card {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  position: relative;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--ink-3);
  transition: border-color 0.2s;
}
.memorial-card:hover { border-bottom-color: var(--ember-dim); }

.memorial-card-photo {
  width: 100%;
  aspect-ratio: 1;
  max-height: 280px;
  object-fit: cover;
  border-radius: 0;
  margin-bottom: 14px;
  background: var(--ink-1);
  filter: grayscale(10%) contrast(1.05);
}
.memorial-card-placeholder {
  width: 100%;
  aspect-ratio: 1;
  max-height: 280px;
  background: linear-gradient(180deg, var(--ink-1), var(--ink-2));
  border-radius: 0;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: var(--ember);
  filter: drop-shadow(0 0 12px rgba(196,160,122,0.4));
}
.memorial-card-name {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-size: 22px;
  font-weight: 400;
  color: var(--paper);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.memorial-card-dates {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--paper-muted);
  margin-top: 8px;
  text-transform: uppercase;
}
.memorial-card-location {
  font-family: var(--display);
  font-style: italic;
  font-size: 13px;
  color: var(--ember);
  margin-top: 4px;
}
.memorial-card-story {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: var(--paper-dim);
  margin-top: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.memorial-card-story.expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
}
.memorial-card-readmore {
  background: none;
  border: none;
  color: var(--ember);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 0 0;
  margin-top: 4px;
}
.memorial-card-readmore:hover { color: var(--paper); }

.memorial-card-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ink-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--paper-muted);
}
.like-btn,
.comment-toggle {
  background: none;
  border: none;
  color: var(--paper-muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.2s;
}
.like-btn { display: inline-flex; align-items: center; gap: 4px; }
.like-btn:hover, .comment-toggle:hover { color: var(--ember); }
.like-btn.liked { color: var(--blood-bright); }

.comment-section { display: none; margin-top: 12px; }
.comment-section.open { display: block; }
.comment-list {
  font-family: var(--display);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
}
.comment-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--ink-2);
  color: var(--paper-dim);
}
.comment-author {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember);
}
.comment-text { font-style: italic; }
.comment-form-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.comment-input, .comment-name-input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-3);
  color: var(--paper);
  font-family: var(--body);
  font-size: 14px;
  padding: 6px 2px;
  border-radius: 0;
}
.comment-name-input { flex: 0 0 120px; }
.comment-input:focus, .comment-name-input:focus {
  outline: none;
  border-bottom-color: var(--ember);
}
.comment-submit {
  background: transparent;
  border: 1px solid var(--ember-dim);
  color: var(--ember);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 14px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.comment-submit:hover { color: var(--paper); border-color: var(--paper); }

.wall-empty,
.wall-loading {
  text-align: center;
  padding: 80px 20px;
  color: var(--paper-dim);
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
}
.wall-empty p:first-child { font-size: 42px !important; color: var(--ember); font-style: normal; margin-bottom: 20px; }
.wall-cta {
  display: inline-block;
  margin-top: 22px;
  padding: 12px 22px;
  border: 1px solid var(--ember-dim);
  color: var(--ember);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: color 0.2s, border-color 0.2s;
}
.wall-cta:hover {
  color: var(--paper);
  border-color: var(--paper);
}
.wall-error {
  text-align: center;
  padding: 40px 20px;
  color: var(--blood-bright);
  border: 1px solid var(--blood-dim);
  font-family: var(--display);
  font-style: italic;
  margin-top: 24px;
}

@media (max-width: 1024px) {
  .memorial-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 600px) {
  .memorial-grid { grid-template-columns: 1fr; }
  .wall-controls { flex-direction: column; align-items: stretch; }
  .wall-search, .wall-sort { width: 100%; }
  .page-content { padding: 48px var(--gutter) 60px; }
  .page-content h1 { font-size: clamp(34px, 11vw, 58px); }
}

/* Emphasis / disclaimer callout blocks (privacy + terms pages). */
.callout {
  border: 1px solid var(--ink-3);
  border-left: 3px solid var(--ember);
  background: var(--ink-1);
  border-radius: 4px;
  padding: 16px 22px;
  margin: 24px 0;
}
.callout-warning {
  border-left-color: var(--blood-bright);
  background: rgba(194, 58, 58, 0.08);
}
.callout h2, .callout h3 { color: var(--paper); }
.callout p { margin: 10px 0; }
.callout strong { color: var(--paper); }