/* Preserved from Croton News base.html at 15e5d4e. */

:root {
  --serif-display: 'Playfair Display', Georgia, serif;
  --serif-body: 'Source Serif 4', Georgia, serif;
  --sans: 'DM Sans', -apple-system, sans-serif;

  --ink: #1a1a1a;
  --ink-secondary: #454545;
  --ink-muted: #6b6b6b;
  --ink-faint: #6e6e6e;
  --paper: #faf8f5;
  --paper-warm: #f4f1ec;
  --paper-card: #ffffff;
  --rule: #d4cfc7;
  --rule-bold: #1a1a1a;
  --accent: #8b2500;
  --accent-hover: #a93000;
  --blue-civic: #1e3a5f;
  --blue-link: #2c5282;
  --green-nature: #2d6a4f;
  --gold-highlight: #f7e8c8;

  /* Tinted chips. Background, rule and text move together, so a
     badge never ends up as dark text on a dark wash. */
  --chart-grid: #ece7de;
  --tint-warn-bg: #fff8e1;
  --tint-warn-rule: #e8d9b5;
  --tint-warn-ink: #6d4c00;
  --tint-alert-bg: #fdf0e6;
  --tint-alert-rule: #f5cdae;
  --tint-alert-ink: #9a3412;
  --accent-ring: rgba(139,37,0,.18);
  --tint-code-bg: #eef1f5;
  --tint-code-ink: #1e3a5f;
  --tint-note-bg: #f8f6f2;
  --tint-note-rule: #e3ddd3;
  --tint-note-ink: #5a5347;
  --shadow: 0 1px 4px rgba(0,0,0,0.06);
  --shadow-hover: 0 3px 12px rgba(0,0,0,0.1);
  --radius: 2px;
  --max-w: 1120px;
  color-scheme: light;
}
/* Wide desktops were leaving ~425px of dead margin on each side at 1920px:
   --max-w was a flat 1120px, so the grid never used the room it had. Every
   full-width band (masthead, weather bar, nav, page grid) reads this token,
   so widening it here keeps them aligned. min-width only — phones and
   tablets keep the 1120px measure and the reading column is capped
   separately by .article-wrap. */
@media (min-width: 1400px) { :root { --max-w: 1240px; } }
@media (min-width: 1700px) { :root { --max-w: 1360px; } }
/* ═══ DARK MODE ═══
   The palette is the only thing that changes: every rule below already reads
   from these tokens, so one override flips the whole site. Two triggers, and
   the duplication is deliberate — an explicit choice must beat the OS in BOTH
   directions, and the media-query copy is what readers with JS disabled get,
   since nothing stamps data-theme for them. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --ink: #e9e5e0;
  --ink-secondary: #c2bcb4;
  --ink-muted: #9a948c;
  --ink-faint: #8b857d;
  --paper: #14161a;
  --paper-warm: #191c21;
  --paper-card: #1c1f25;
  --rule: #30353c;
  --rule-bold: #5c636d;
  --accent: #ff8a5c;
  --accent-hover: #ffa580;
  --blue-civic: #a8c4e8;
  --blue-link: #8ab4f8;
  --green-nature: #5fbf87;
  --gold-highlight: #4a3d1c;
  --chart-grid: #262b31;
  --tint-warn-bg: #3a3117;
  --tint-warn-rule: #8a6d1f;
  --tint-warn-ink: #f2d68f;
  --tint-alert-bg: #3b2419;
  --tint-alert-rule: #8f4a2a;
  --tint-alert-ink: #ffb494;
  --accent-ring: rgba(255,138,92,.32);
  --tint-code-bg: #1e2a3b;
  --tint-code-ink: #a8c4e8;
  --tint-note-bg: #212429;
  --tint-note-rule: #343941;
  --tint-note-ink: #c2bcb4;
  --shadow: 0 1px 4px rgba(0,0,0,0.5);
  --shadow-hover: 0 3px 14px rgba(0,0,0,0.62);
}
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e9e5e0;
  --ink-secondary: #c2bcb4;
  --ink-muted: #9a948c;
  --ink-faint: #8b857d;
  --paper: #14161a;
  --paper-warm: #191c21;
  --paper-card: #1c1f25;
  --rule: #30353c;
  --rule-bold: #5c636d;
  --accent: #ff8a5c;
  --accent-hover: #ffa580;
  --blue-civic: #a8c4e8;
  --blue-link: #8ab4f8;
  --green-nature: #5fbf87;
  --gold-highlight: #4a3d1c;
  --chart-grid: #262b31;
  --tint-warn-bg: #3a3117;
  --tint-warn-rule: #8a6d1f;
  --tint-warn-ink: #f2d68f;
  --tint-alert-bg: #3b2419;
  --tint-alert-rule: #8f4a2a;
  --tint-alert-ink: #ffb494;
  --accent-ring: rgba(255,138,92,.32);
  --tint-code-bg: #1e2a3b;
  --tint-code-ink: #a8c4e8;
  --tint-note-bg: #212429;
  --tint-note-rule: #343941;
  --tint-note-ink: #c2bcb4;
  --shadow: 0 1px 4px rgba(0,0,0,0.5);
  --shadow-hover: 0 3px 14px rgba(0,0,0,0.62);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--blue-link); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Links inside running prose carry a quiet underline, not colour alone
   (2026-07-29). WCAG 1.4.1 asks that a link be distinguishable by more than
   hue — which also matters for the ~8% of men with red-green deficiency, for
   whom the #8b2500 accent sits close to body ink. Underline is skipped in
   nav, cards and chrome, where position already signals interactivity. */
main p a:not([class]), main li a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
main p a:not([class]):hover, main li a:not([class]):hover {
  text-decoration-color: currentColor;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
mark { background: var(--gold-highlight); padding: 0 3px; border-radius: 1px; }
/* ═══ QUOTE CITATIONS — site-wide standard (owner, 2026-07-27: the
   fowl-ban editorial's pill is the house pattern; it replaced the older
   "[source] [M:SS]" bracket pair). A quote carries the moment it was
   said: the timestamp opens the transcript there, ▶ opens the video. ═══ */
.quote-links { display:inline-flex; align-items:stretch; gap:0; margin:0 3px 0 5px;
  vertical-align:middle; font-size:12px; line-height:1; font-family:var(--sans,sans-serif);
  font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap;
  background:color-mix(in srgb, var(--accent) 7%, var(--paper));
  border:1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius:10px; box-shadow:0 1px 2px rgb(0 0 0 / 5%); }
.quote-links a { display:inline-flex; align-items:center; justify-content:center;
  min-height:34px; min-width:34px; box-sizing:border-box; padding:0 9px;
  text-decoration:none; color:var(--accent,#8b2500); border-radius:9px 0 0 9px;
  transition:background-color .15s, color .15s, box-shadow .15s; }
.quote-links a:hover { background:var(--accent); color:var(--paper); text-decoration:none; }
.quote-links a:focus-visible { outline:2px solid var(--accent); outline-offset:3px;
  position:relative; z-index:1; }
.quote-links a:active { box-shadow:inset 0 1px 3px rgb(0 0 0 / 20%); }
.quote-links .ql-v { font-size:15px; min-width:38px; padding:0 10px;
  border-left:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius:0 9px 9px 0; }
@media (pointer:coarse) { .quote-links a { min-height:44px; } .quote-links .ql-v { min-width:44px; } }
@media (prefers-reduced-motion:reduce) { .quote-links a { transition:none; } }
::selection { background: var(--gold-highlight); }
/* weather panel: the day card whose hourly is shown in the top strip */
#wx-forecast .wx-day-on { border-color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px var(--accent); background: var(--gold-highlight); }
/* the condition emoji sits in a small white chip so it reads clearly
   against the warm header band (owner, 2026-07-27) */
#wx-strip .wx-ico { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; background: var(--paper-card); border: 1px solid var(--rule);
  border-radius: 8px; box-shadow: var(--shadow); font-size: 18px;
  vertical-align: middle; margin-right: 2px; }

/* Theme switch. Sits in the masthead corner rather than the nav bar: the nav
   is a horizontal scroller on phones and anything parked in it gets swiped
   past. Both glyphs ship in the markup and CSS picks one, so the icon is
   correct on first paint instead of waiting for script. */
.theme-toggle {
  position: absolute; top: 15px; right: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  color: var(--ink-secondary);
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: color .18s ease, border-color .18s ease,
              background .18s ease, box-shadow .18s ease;
}
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
}
.theme-toggle:active { transform: translateY(1px); }
.theme-toggle:focus-visible {
  outline: 2px solid var(--blue-link); outline-offset: 3px;
}
/* Dark needs more help: a card-coloured chip on near-black paper is only a
   few points of luminance apart, so the control was disappearing. Give it a
   lifted surface, a brighter rim and full-strength ink. */
:root[data-theme="dark"] .theme-toggle,
:root[data-theme="dark"] .theme-toggle:link {
  color: var(--ink);
  background: rgba(255,255,255,.07);
  border-color: #474e58;
}
:root[data-theme="dark"] .theme-toggle:hover {
  color: var(--accent);
  background: rgba(255,255,255,.12);
  border-color: var(--accent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle {
    color: var(--ink);
    background: rgba(255,255,255,.07);
    border-color: #474e58;
  }
  :root:not([data-theme="light"]) .theme-toggle:hover {
    color: var(--accent);
    background: rgba(255,255,255,.12);
    border-color: var(--accent);
  }
}
/* Which glyph shows is decided in CSS, not script, so it is right on the
   first paint rather than a frame later. */
.theme-toggle .ico-light { display: none; }
:root[data-theme="dark"] .theme-toggle .ico-light { display: block; }
:root[data-theme="dark"] .theme-toggle .ico-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .ico-light { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .ico-dark { display: none; }
}
@media (max-width: 600px) {
  .theme-toggle { top: 9px; right: 10px; width: 34px; height: 34px; }
  .theme-toggle svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
  .theme-toggle:active { transform: none; }
}

/* ═══ MASTHEAD ═══ */
.masthead {
  position: relative;
  background: var(--paper);
  border-bottom: 3px double var(--rule-bold);
  text-align: center;
  padding: 20px 24px 16px;
}
.masthead-title {
  font-family: var(--serif-display);
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.masthead-title a { color: inherit; text-decoration: none; }
.masthead-tagline {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-secondary);
  margin-top: 6px;
}
.masthead-sub {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 4px;
}
.mast-date-short { display: none; }
@media (max-width: 480px) {
  .mast-date-long { display: none; }
  .mast-date-short { display: inline; }
}
.masthead-rule {
  width: 60px; height: 1px; background: var(--rule);
  margin: 8px auto 0;
}
.masthead-credo {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 8px;
}
.masthead-credo a { color: inherit; }
.masthead-credo a:hover { color: var(--accent); text-decoration: none; }
.masthead-credo .credo-dot { margin: 0 10px; color: var(--ink-faint); }

/* ═══ NAV ═══ */
.nav-bar {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 100;
}
/* right-edge fade: the nav scrolls horizontally on phones with the
   scrollbar hidden — without this there is no affordance that more
   items (incl. the Send a Tip CTA) sit offscreen */
.nav-bar::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 24px;
  background: linear-gradient(to left, var(--paper), transparent);
  pointer-events: none;
}
@media (min-width: 801px) { .nav-bar::after { display: none; } }
.nav-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: center; gap: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.nav-link {
  font-family: var(--sans);
  font-size: 13px; font-weight: 600;
  color: var(--ink-secondary);
  padding: 12px 18px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.nav-link:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--rule); }
.nav-link.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ═══ MAIN LAYOUT ═══ */
.page { max-width: var(--max-w); margin: 0 auto; padding: 40px 24px; }
.layout-cols { display: grid; grid-template-columns: 1fr 320px; gap: 40px; }
.layout-cols > * { min-width: 0; }

/* ═══ SECTION HEADERS ═══ */
.section-rule {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}
.section-rule::before, .section-rule::after {
  content: ''; flex: 1; height: 1px; background: var(--rule);
}
.section-label {
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.section-head {
  border-bottom: 2px solid var(--rule-bold);
  padding-bottom: 8px; margin-bottom: 20px;
  display: flex; align-items: baseline; justify-content: space-between;
}
.section-title {
  font-family: var(--serif-display);
  font-size: 20px; font-weight: 700; color: var(--ink);
}
.section-more { font-size: 12px; font-weight: 600; color: var(--accent); }

/* ═══ LEAD STORY ═══ */
.lead {
  padding-bottom: 28px; margin-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}
.lead-badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius);
  color: white; margin-bottom: 12px;
}
.lead h2 {
  font-family: var(--serif-display);
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 900; line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.lead h2 a { color: var(--ink); }
.lead h2 a:hover { color: var(--accent); text-decoration: none; }
/* The pair cards sit in ~330px columns but .lead h2 sizes off the VIEWPORT
   (3.5vw), so at desktop widths they rendered at the full 36px — a six-word
   headline took eight lines and pushed the excerpt off the fold. Size them
   for the column they actually occupy. Desktop only; the pair collapses to
   one column below 640px, where the existing rules already apply. */
@media (min-width: 641px) {
  .featured-pair .lead h2 { font-size: clamp(20px, 1.7vw, 26px); }
  .featured-pair .lead-excerpt { font-size: 16px; line-height: 1.6; }
}
.lead-excerpt {
  font-family: var(--serif-body);
  font-size: 18px; line-height: 1.7;
  color: var(--ink-secondary);
}
.lead-meta {
  font-family: var(--sans);
  font-size: 12px; color: var(--ink-muted); margin-top: 10px;
}

/* ═══ ARTICLE CARDS ═══ */
.story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }

.story {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.story:last-child { border-bottom: none; }
.story-badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--radius);
  color: white; margin-bottom: 8px;
}
.story h3 {
  font-family: var(--serif-display);
  font-size: 18px; font-weight: 700;
  line-height: 1.3; margin-bottom: 8px;
}
.story h3 a { color: var(--ink); }
.story h3 a:hover { color: var(--accent); text-decoration: none; }
.story-text {
  font-family: var(--serif-body);
  font-size: 14px; line-height: 1.65;
  color: var(--ink-secondary);
}
.story-meta {
  font-family: var(--sans);
  font-size: 11px; color: var(--ink-muted); margin-top: 8px;
}

/* ═══ SIDEBAR ═══ */
.sidebar-box {
  border: 1px solid var(--rule);
  padding: 16px; margin-bottom: 20px;
  background: var(--paper-card);
}
.sidebar-box h4 {
  font-family: var(--serif-display);
  font-size: 15px; font-weight: 700;
  padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.sb-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0; border-bottom: 1px dotted var(--rule);
  font-size: 13px;
}
.sb-row a { display: inline-block; padding: 2px 0; }
.sb-row:last-child { border-bottom: none; }
.sb-row a { color: var(--ink); font-weight: 500; }
.sb-row a:hover { color: var(--accent); }
.sb-count {
  font-size: 11px; color: var(--ink-faint);
  background: var(--paper-warm); padding: 1px 7px; border-radius: 8px;
}

/* ═══ ARTICLE DETAIL ═══ */
.article-wrap { max-width: 620px; margin: 0 auto; }
.article-head { margin-bottom: 44px; text-align: center; }
.article-head .lead-badge { margin-bottom: 16px; }
.article-head h1 {
  font-family: var(--serif-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 900; line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.article-head .deck {
  font-family: var(--serif-body);
  font-size: 18px; font-style: italic;
  color: var(--ink-secondary);
  line-height: 1.55; max-width: 580px; margin: 0 auto;
}
.article-head-meta {
  font-family: var(--sans);
  font-size: 12px; color: var(--ink-muted); margin-top: 24px;
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
}
.article-body {
  font-family: var(--serif-body);
  font-size: 18px; line-height: 1.85;
  color: var(--ink);
}
/* Standalone editorials (/cameras, /parking, /plate-readers, /parody…) put
   their h1 INSIDE .article-body, where it used to inherit the body's 1.85
   line-height — a wrapped title rendered with paragraph-sized gaps between
   its lines. Give it the same display treatment as .article-head h1. */
.article-body h1 {
  font-family: var(--serif-display);
  font-size: clamp(26px, 3.6vw, 36px);
  font-weight: 900; line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.article-body p { margin-bottom: 1.3em; text-indent: 0; }
.article-body p + p { text-indent: 1.5em; }
.article-photo { margin: 20px 0; text-align: center; }
.article-photo img { max-width: 100%; height: auto; border-radius: 6px; }
.article-photo figcaption { font-size: 13px; color: var(--ink-faint); margin-top: 6px; font-style: italic; }
.article-body p:first-child::first-letter {
  font-family: var(--serif-display);
  font-size: 3.2em; float: left;
  line-height: 0.8; padding-right: 8px; padding-top: 4px;
  color: var(--accent); font-weight: 900;
}
/* Article subheadings */
.article-body h3 {
  font-family: var(--serif-display);
  font-size: 19px; font-weight: 800;
  color: var(--ink); margin: 2.6em 0 0.7em;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--rule);
  letter-spacing: -0.01em;
}
.article-body h3 + p { text-indent: 0; }
/* Blockquotes / pull quotes */
.article-body blockquote {
  margin: 1.6em 0; padding: 16px 24px;
  border-left: 3px solid var(--accent);
  background: var(--paper-warm);
  font-style: italic; font-size: 17px;
  line-height: 1.7; color: var(--ink);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.article-body blockquote p { text-indent: 0 !important; margin-bottom: 0.5em; }
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body blockquote cite,
.article-body blockquote .quote-attr {
  display: block; margin-top: 8px;
  font-style: normal; font-size: 13px;
  font-weight: 600; color: var(--ink-secondary);
  font-family: var(--sans);
}
/* Inline styles */
/* Article Markdown tables: preserve the article column on small screens. */
.article-body .article-table-scroll { max-width: 100%; overflow-x: auto; margin: 1.4em 0; -webkit-overflow-scrolling: touch; }
.article-body .article-table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.article-body .article-data-table { width: 100%; min-width: 0; border-collapse: collapse; font-family: var(--sans); font-size: 14px; line-height: 1.5; }
.article-body .article-data-table th, .article-body .article-data-table td { padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.article-body .article-data-table th { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--rule); }
.article-body .article-data-table .align-left { text-align: left; }
.article-body .article-data-table .align-center { text-align: center; }
.article-body .article-data-table .align-right { text-align: right; font-variant-numeric: tabular-nums; }
.article-body .article-data-table td.align-right { white-space: nowrap; }

.article-body strong { font-weight: 700; color: var(--ink); }
.article-body em { font-style: italic; }
.article-body hr {
  border: none; border-top: 1px solid var(--rule);
  margin: 2em 0;
}
/* ── Timeline component ── */
.timeline {
  position: relative;
  margin: 2em 0;
  padding: 0 0 0 28px;
}
.timeline::before {
  content: '';
  position: absolute; left: 8px; top: 4px; bottom: 4px;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent), var(--rule));
}
.timeline-item {
  position: relative;
  margin-bottom: 20px;
  padding-left: 20px;
}
.timeline-item::before {
  content: '';
  position: absolute; left: -24px; top: 6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--accent);
}
.timeline-item.timeline-key::before {
  background: var(--accent);
  width: 12px; height: 12px;
  left: -25px; top: 5px;
}
.timeline-date {
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}
.timeline-text {
  font-family: var(--serif-body);
  font-size: 15px; line-height: 1.55;
  color: var(--ink);
}
.timeline-text strong { font-weight: 700; }
.timeline-note {
  font-family: var(--sans);
  font-size: 12px; color: var(--ink-muted);
  margin-top: 2px;
}

/* Executive summary */
.exec-box {
  background: var(--paper-warm);
  border-left: 3px solid var(--accent);
  padding: 20px 24px; margin: 28px 0;
  font-family: var(--sans);
}
.exec-box h3 {
  font-family: var(--serif-display);
  font-size: 16px; font-weight: 700;
  margin-bottom: 12px; color: var(--accent);
}
.exec-box li {
  font-size: 14px; line-height: 1.55; margin-bottom: 5px;
  margin-left: 16px;
}
.exec-box strong { color: var(--ink); }

/* Index tags */
.index-box {
  border: 1px solid var(--rule); padding: 20px;
  margin: 28px 0; font-family: var(--sans);
}
.index-box h3 {
  font-family: var(--serif-display);
  font-size: 16px; font-weight: 700;
  margin-bottom: 14px;
}
.idx-section { margin-bottom: 10px; }
.idx-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 4px;
}
.idx-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.idx-tag {
  font-size: 12px; padding: 3px 9px;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: 2px; color: var(--ink-secondary);
}

/* Related */
.related-row {
  display: flex; gap: 14px; padding: 12px 0;
  border-bottom: 1px dotted var(--rule);
  align-items: flex-start;
}
.related-date {
  min-width: 52px; text-align: center;
  font-family: var(--sans); font-size: 11px;
  color: var(--accent); font-weight: 700;
}
.related-title { font-size: 14px; font-weight: 500; }
.related-title a { color: var(--ink); }
.related-title a:hover { color: var(--accent); }

/* ═══ MEETINGS LIST ═══ */
.meeting-row {
  display: flex; gap: 18px; padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  align-items: flex-start;
}
.meeting-date-block {
  min-width: 56px; text-align: center;
  background: var(--paper-card); border: 1px solid var(--rule);
  padding: 6px 8px;
}
.meeting-date-block .m { font-size: 10px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; }
.meeting-date-block .d { font-family: var(--serif-display); font-size: 24px; font-weight: 900; color: var(--ink); line-height: 1.1; }
.meeting-info { flex: 1; }
.meeting-info h3 { font-family: var(--serif-display); font-size: 16px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; }
.meeting-info h3 a { color: var(--ink); }
.meeting-info h3 a:hover { color: var(--accent); text-decoration: none; }
.meeting-info p { font-size: 13px; color: var(--ink-secondary); }

/* ═══ DOCUMENTS SEARCH ═══ */
.search-form {
  display: flex; gap: 8px; max-width: 600px; margin-bottom: 24px;
}
.search-form input {
  flex: 1; padding: 10px 16px;
  border: 1px solid var(--rule); background: var(--paper-card);
  font-family: var(--sans); font-size: 16px; /* <16px triggers iOS zoom-on-focus */
  border-radius: var(--radius);
}
.search-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--ink); }
.search-form button {
  padding: 10px 24px; background: var(--ink); color: var(--paper);
  border: none; font-family: var(--sans); font-size: 14px;
  font-weight: 600; cursor: pointer; border-radius: var(--radius);
}
.search-form button:hover { background: var(--accent); }

.doc-result {
  padding: 16px 0; border-bottom: 1px solid var(--rule);
}
.doc-result-meta { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.doc-result-snippet { font-size: 14px; line-height: 1.6; color: var(--ink-secondary); }

/* ═══ FOOTER ═══ */
.site-footer {
  max-width: var(--max-w); margin: 0 auto;
  padding: 32px 24px 56px;
  border-top: 3px double var(--rule-bold);
  text-align: center;
}
.footer-brand {
  font-family: var(--serif-display);
  font-size: 18px; font-weight: 700;
  color: var(--ink-muted); margin-bottom: 6px;
}
/* footer links get real touch targets — many were <20px tall (audit item 32) */
.footer-links { font-size: 13px; color: var(--ink-faint); }
.footer-links a { color: var(--ink-muted); display: inline-block; padding: 8px 6px; }

/* ═══ SISTER SITES ═══ */
.sister-sites{margin-top:16px;padding-top:12px;border-top:1px solid var(--rule,#ddd);font-size:11px;color:var(--ink-faint,#999)}.sister-sites span{margin-right:6px}.sister-sites a{color:var(--ink-muted,#777);text-decoration:none;margin:0 4px}.sister-sites a:hover{text-decoration:underline}
/* ═══ SHARE BUTTONS ═══ */
.share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--paper-warm); border: 1px solid var(--rule);
  color: var(--ink-secondary); transition: all 0.15s;
  text-decoration: none;
}
.share-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); text-decoration: none; }
button.share-btn { width: auto; border-radius: var(--radius); padding: 0 14px; }

/* ═══ COMMENTS ═══ */
/* Board-forward confirmation — shown after a reader asks us to send their
   comment to the Village Board. Deliberately prominent: they are asking us to
   put their words in front of elected officials. */
#comments .fwd-confirm { border: 1px solid var(--rule); border-left: 3px solid var(--green-nature, #2d6a4f);
  background: var(--paper-warm); border-radius: 4px; padding: 14px 18px; margin: 0 0 18px; }
#comments .fwd-head { font-family: var(--sans); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--green-nature, #2d6a4f);
  margin: 0 0 6px; }
#comments .fwd-sub { font-size: 14px; color: var(--ink-secondary); margin: 0 0 10px; }
#comments .fwd-body { margin: 0 0 10px; padding: 8px 14px; background: var(--paper-card);
  border-left: 2px solid var(--rule); font-size: 15px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; }
#comments .fwd-body #fwd-name { display: block; font-weight: 700; font-size: 13px;
  margin-bottom: 4px; color: var(--ink); }
#comments .fwd-note { font-size: 13.5px; color: var(--ink-secondary); margin: 0; line-height: 1.55; }

.comment {
  display: grid; grid-template-columns: 36px 1fr; gap: 12px;
  padding: 18px 0; border-bottom: 1px solid var(--rule);
  transition: background 0.5s;
}
#comments-list > .comment:last-child { border-bottom: none; }
.comment-mono {
  width: 36px; height: 36px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-warm); border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--serif-display); font-size: 14px; font-weight: 700;
  color: var(--accent); letter-spacing: 0.02em; user-select: none;
}
.comment-main { min-width: 0; }
.comment-header {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px;
  flex-wrap: wrap;
}
.comment-name {
  font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--ink);
}
.comment-date {
  font-family: var(--sans); font-size: 11px; color: var(--ink-faint);
}
.comment-fwd {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--green-nature); border: 1px solid rgba(45,106,79,0.4);
  padding: 2px 8px; border-radius: 9px; white-space: nowrap;
}
.comment-body {
  font-family: var(--serif-body); font-size: 15px; line-height: 1.65;
  color: var(--ink-secondary); white-space: pre-wrap;
  overflow-wrap: break-word;
}
.comment-actions { margin-top: 4px; }
.comment-reply-btn {
  background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-muted); padding: 6px 0; min-height: 24px;
}
.comment-reply-btn:hover { color: var(--accent); }
.comment-replies {
  margin-top: 8px; border-left: 2px solid var(--rule); padding-left: 16px;
}
.comment-replies .comment {
  grid-template-columns: 28px 1fr; padding: 12px 0;
  border-bottom: none;
}
.comment-replies .comment-mono { width: 28px; height: 28px; font-size: 12px; }
.comment-replies .comment-body { font-size: 14px; }
.comments-meta {
  display: flex; align-items: center; gap: 14px;
}
.comments-meta .comment-count-label {
  font-family: var(--sans); font-size: 12px; color: var(--ink-muted);
  white-space: nowrap;
}
.comment-follow-btn {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-secondary); background: var(--paper-card);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 7px 12px; cursor: pointer; white-space: nowrap;
}
.comment-follow-btn:hover { color: var(--accent); border-color: var(--accent); }
.comment-follow-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px; margin-top: 12px;
  background: var(--paper-warm); border: 1px solid var(--rule);
  border-radius: var(--radius);
}
/* display:flex would defeat the hidden attribute's UA display:none */
.comment-follow-row[hidden] { display: none; }
/* the article drop-cap (.article-body p:first-child::first-letter) must not
   leak into the discussion block when it renders inside an article body */
#comments p::first-letter {
  font-family: inherit; font-size: inherit; float: none;
  line-height: inherit; padding: 0; color: inherit; font-weight: inherit;
}
.comment-follow-row input[type=email] { flex: 1 1 220px; }
.comment-follow-note {
  flex-basis: 100%; font-family: var(--sans); font-size: 11px;
  color: var(--ink-faint); line-height: 1.5;
}
.comments-empty {
  font-family: var(--serif-body); font-style: italic;
  color: var(--ink-muted); padding: 16px 0;
}
.comment-form-card {
  margin-top: 24px; padding: 20px;
  background: var(--paper-warm); border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.comment-form-legend {
  font-family: var(--serif-display); font-size: 16px; font-weight: 700;
  color: var(--ink); margin: 0 0 14px;
}
.comment-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px;
}
.comment-field label {
  display: block; font-family: var(--sans); font-size: 12px; font-weight: 600;
  color: var(--ink-secondary); margin-bottom: 6px;
}
.comment-field .comment-sublabel {
  display: block; font-family: var(--sans); font-size: 10px; font-weight: 400;
  color: var(--ink-faint); margin-top: 4px;
}
.comment-form-card input[type=text],
.comment-form-card input[type=email],
.comment-form-card textarea,
.comment-follow-row input[type=email] {
  width: 100%; padding: 10px 14px; border: 1px solid var(--rule);
  font-family: var(--sans); font-size: 14px; background: var(--paper-card);
  border-radius: var(--radius); color: var(--ink);
}
.comment-form-card input:focus,
.comment-form-card textarea:focus,
.comment-follow-row input:focus { border-color: var(--ink); outline: none; }
.comment-form-card textarea { resize: vertical; }
.comment-textarea-wrap { position: relative; }
.comment-charcount {
  position: absolute; right: 10px; bottom: 8px;
  font-family: var(--sans); font-size: 11px; color: var(--ink-faint);
  pointer-events: none; background: var(--paper-card); padding: 0 4px;
}
.comment-charcount.near-limit { color: var(--accent); }
.comment-checks { margin: 12px 0 4px; }
.comment-check {
  display: flex; align-items: flex-start; gap: 8px;
  font-family: var(--sans); font-size: 13px; color: var(--ink-secondary);
  padding: 4px 0; cursor: pointer;
}
.comment-check input[type=checkbox] {
  accent-color: var(--accent); margin-top: 2px; flex: none;
  width: 15px; height: 15px;
}
.comment-check .comment-sublabel {
  display: block; font-size: 11px; color: var(--ink-faint); margin-top: 2px;
}
.comment-check input:disabled + span { opacity: 0.45; }
.comment-form-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 10px; flex-wrap: wrap;
}
.comment-form-footer .comment-policy {
  font-family: var(--sans); font-size: 11px; color: var(--ink-faint);
}
.comment-submit {
  padding: 10px 28px; background: var(--ink); color: var(--paper);
  border: none; font-family: var(--sans); font-size: 14px; font-weight: 600;
  cursor: pointer; border-radius: var(--radius);
}
.comment-submit:hover { background: var(--accent-hover); }
.comment-submit:disabled { opacity: 0.6; cursor: default; }
.comment-form-error {
  display: none; color: #dc2626; font-family: var(--sans);
  font-size: 13px; margin-top: 8px;
}
.comment-form-notice {
  display: none; color: var(--green-nature); font-family: var(--sans);
  font-size: 13px; margin-top: 8px;
}
.comment-cancel-reply {
  background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 12px; color: var(--ink-muted);
  text-decoration: underline; padding: 6px 0; min-height: 24px;
}
.comment-replying-to {
  display: none; font-family: var(--sans); font-size: 12px;
  color: var(--ink-secondary); margin-bottom: 10px;
}
@media (max-width: 640px) {
  .comment { grid-template-columns: 30px 1fr; }
  .comment-mono { width: 30px; height: 30px; font-size: 12px; }
  .comment-form-grid { grid-template-columns: 1fr; }
  .comment-replies { padding-left: 10px; }
}

/* ═══ NAV SCROLL POLISH ═══ */
.nav-inner { scrollbar-width: none; -ms-overflow-style: none; }
.nav-inner::-webkit-scrollbar { display: none; }


/* ═══ COMING UP CAROUSEL ═══ */
.coming-up {
  margin: 20px 0 28px;
  background: linear-gradient(135deg, #f8fdf8 0%, #f0f9f0 100%);
  border: 1px solid #c8e6c9;
  border-radius: 8px;
  overflow: hidden;
}
.coming-up-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 0;
}
.coming-up-label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.coming-up-badge {
  font-size: 11px;
  padding: 3px 9px;
  background: var(--green-nature);
  color: var(--paper-card);
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.coming-up-hint {
  font-size: 11px;
  color: var(--ink-muted);
}
.coming-up-all {
  font-size: 11px;
  font-weight: 600;
  color: #2d6a4f;
}
.coming-up-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px 16px 14px;
  gap: 12px;
  max-width: 100%;
}
.coming-up-scroll::-webkit-scrollbar { display: none; }
.coming-up-card {
  flex: 0 0 92%;
  scroll-snap-align: start;
  display: block;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--green-nature);
  border-radius: 0 0 6px 6px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
}
.coming-up-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.coming-up-date {
  font-size: 14px;
  font-weight: 700;
  color: #2d6a4f;
}
.coming-up-committee {
  font-size: 10px;
  padding: 2px 8px;
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  white-space: nowrap;
}
.coming-up-title {
  font-family: var(--serif-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 6px;
}
.coming-up-summary {
  font-size: 13px;
  color: var(--ink-secondary);
  line-height: 1.4;
  margin-bottom: 8px;
}
.coming-up-cta {
  font-size: 12px;
  color: #2d6a4f;
  font-weight: 600;
}
.coming-up-cta-muted {
  color: var(--ink-muted);
  font-weight: 500;
}
.coming-up-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0 0 12px;
}
.coming-up-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--green-nature) 35%, var(--paper));
}
.coming-up-dot.active {
  background: var(--green-nature);
}


/* ═══ FOOTNOTES ═══ */
.fn-ref { line-height: 0; }
.fn-ref a {
  color: var(--accent);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.65em;
  font-weight: 700;
  vertical-align: super;
  padding: 0 1px;
}
.fn-ref a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}
.article-footnotes {
  margin-top: 2.5em;
  padding-top: 1.5em;
  border-top: 1px solid var(--rule);
  position: relative;
}
.article-footnotes::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 80px;
  height: 3px;
  background: var(--accent);
}
.fn-heading {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1em;
}
.fn-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fn-list li {
  font-family: var(--serif-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-secondary);
  padding: 6px 0 6px 28px;
  position: relative;
  border-bottom: 1px dotted var(--rule);
}
.fn-list li:last-child { border-bottom: none; }
.fn-list li::before {
  content: attr(value) '.';
  position: absolute;
  left: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  top: 7px;
}
.fn-list li:target {
  background: var(--gold-highlight);
  border-radius: 2px;
  transition: background 0.5s;
}
.fn-text { display: inline; }
.fn-backref {
  color: var(--ink-faint);
  font-size: 12px;
  text-decoration: none;
  margin-left: 6px;
}
.fn-backref:hover { color: var(--accent); }
.fn-doc-link { color: var(--accent); text-decoration: none; border-bottom: 1px dashed var(--accent); }
.fn-doc-link:hover { border-bottom-style: solid; }
.source-docs-list { margin-top: 12px; }
.source-docs-item-title { font-size: 13px; font-weight: 600; color: var(--ink-secondary); margin: 14px 0 4px; }
.source-docs-files { list-style: none; padding: 0; margin: 0 0 0 4px; }
.source-docs-files li { padding: 4px 0; font-size: 14px; }
.source-doc-link { color: var(--accent); text-decoration: none; }
.source-doc-link:hover { text-decoration: underline; }
.source-doc-meta { color: var(--ink-faint); font-size: 12px; margin-left: 8px; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
  .layout-cols { grid-template-columns: 1fr 260px; gap: 28px; }
  .story-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .page { padding: 24px 20px; }
}
@media (max-width: 800px) {
  .layout-cols { grid-template-columns: 1fr; }
  .article-footnotes { margin-top: 2em; }
  .fn-list li { font-size: 13px; padding-left: 24px; }
  .story-grid { grid-template-columns: 1fr; }
  .page { padding: 16px; }
  .masthead { padding: 14px 16px 10px; }
  .lead h2 { font-size: 24px; }
  .article-body { font-size: 16px; }
  .article-body p:first-child::first-letter { font-size: 2.4em; }
  .nav-inner { justify-content: flex-start; }
  .search-form { flex-direction: column; }
  .search-form > button { width: 100%; }
  .article-head h1 { font-size: 26px; }
  .article-head .deck { font-size: 16px; }
}
@media (max-width: 480px) {
  .masthead-title { font-size: 28px !important; }
  .masthead-tagline { font-size: 13px; }
  .masthead-sub { font-size: 10px; }
  .masthead-credo { font-size: 9px; letter-spacing: 0.14em; }
  .masthead-credo .credo-dot { margin: 0 7px; }
  .nav-link { padding: 12px 10px; font-size: 13px; }
  .page { padding: 12px 10px; }
  /* keep phone keyboards from zooming the viewport on focus */
  input[type=text], input[type=search], select { font-size: 16px; }
  .lead h2 { font-size: 20px; }
  .lead-excerpt { font-size: 15px; }
  .story h3 { font-size: 16px; }
  .article-body { font-size: 15px; line-height: 1.75; }
  .article-body blockquote { padding: 12px 16px; font-size: 15px; }
  .timeline { padding-left: 20px; }
  .meeting-row { gap: 12px; }
  .meeting-date-block { min-width: 48px; }
  .meeting-date-block .d { font-size: 20px; }
  .sidebar-box { padding: 12px; }
  .exec-box { padding: 14px 16px; }
  #wx-strip .wx-forecast { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  /* the strip is ONE line on portrait phones (owner, 2026-07-27):
     temp + condition + AQI + train pill all stay; river hidden, wind/AQI text and
     the long river/forecast labels drop (AQI color still shows severity) */
  #wx-strip > div:first-child { flex-wrap: nowrap; gap: 8px; padding: 8px 12px; font-size: 13px; overflow: hidden; }
  /* only the condition text shrinks (ellipsis) — temp, AQI, river and the
     arrow keep their full width so nothing gets clipped off the right.
     Sizes/contrast bumped 2026-07-27 (owner: visibility) — the first cut
     was 11px muted grey and unreadable in sunlight. */
  #wx-strip #wx-temp { font-size: 17px; flex-shrink: 0; }
  #wx-strip #wx-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; color: var(--ink); font-weight: 600; }
  #wx-strip .wx-ico { width: 26px; height: 26px; font-size: 16px; border-radius: 7px; }
  #wx-strip #wx-aqi { padding: 2px 8px; font-size: 11px; flex-shrink: 0; }
  #wx-strip #wx-river { display: none !important; }
  #wx-strip .wx-hint-sm { flex-shrink: 0; font-size: 14px; color: var(--ink-secondary); }
  #wx-strip .wx-wind-word, #wx-strip .wx-cond-word, #wx-strip .wx-aqi-cat, #wx-strip .wx-river-long, #wx-strip .wx-hint { display: none; }
  /* river hidden on mobile — train pill takes its spot */
  #wx-strip .wx-hint-sm { display: inline !important; }
}
@media (max-width: 480px) {
  #train-panel > div { padding: 10px 12px 12px !important; }
  #train-panel [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 10px !important; }
  #train-pill { padding: 3px 9px !important; gap: 5px !important; }
  #train-pill #tp-time { font-size: 12px !important; }
}


/* the four-line fixed banner buried content on phones (site review):
   short one-liner under 640px; dismissal already persists 30 days */
@media (max-width:640px){
  #ai-disclaimer{padding:5px 8px;font-size:11px;gap:6px}
  #ai-disclaimer .dsc-long{display:none}
  #ai-disclaimer .dsc-short{display:inline !important}
}