/* ============================================================
   THC CITY GUIDES — FINAL
   Base direction: A "Wayfinding / Transit System".
   Folded in from B: publication masthead metadata, captioned
   figures, leader-dot index, survey/methodology note, colophon
   footer, and mono provenance lines on legal data.
   The product is ROUTING, so the interface uses civic wayfinding
   logic: one line colour per tier, station dots, sign panels,
   directional arrows, squared geometry, no shadows.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
/* LOGO SCALE — the wordmark is the brand anchor, so it is sized as a
   primary element, not a favicon. Footer runs larger still: it is the
   closing signature of the document. */
.brand__logo{display:block;width:auto;height:54px;max-width:100%}
.colophon .brand__logo{height:76px}
@media (max-width:720px){.brand__logo{height:46px}.colophon .brand__logo{height:60px}}
@media (max-width:400px){.brand__logo{height:40px}.colophon .brand__logo{height:52px}}
:root{
  /* BRAND — sampled from the thccityguides.com logo, not approximated.
     --deep is the pin/skyline/wordmark green; --leaf is the "thc" / ".com" green. */
  --deep:       #002B1D;   /* brand deep green — every inverted surface */
  --deep-2:     #063827;   /* raised panel inside a deep-green surface */
  --leaf:       #63922B;   /* brand accent green */

  /* Ground + ink */
  --paper:      #EDEFEC;   /* pale cool neutral ground */
  --paper-2:    #F7F8F6;   /* raised sign panel */
  --ink:        #0F1A15;   /* primary ink — near-black carrying the brand's green bias */
  --ink-2:      #41504A;   /* secondary ink  (7.0:1 on --paper) */
  --ink-3:      #667370;   /* tertiary / meta (4.6:1 on --paper) */
  --rule:       #C7CDC8;   /* hairline rules */
  --rule-hard:  #0F1A15;

  /* WAYFINDING LINE COLOURS — one per routing tier.
     Every appearance of a tier anywhere on the page uses its line colour. */
  --line-state:        #C2261B;  /* STATE  — red line     7.0:1 on paper */
  --line-city:         #10499E;  /* CITY   — blue line    8.9:1 on paper */
  --line-neighborhood: #8A4B00;  /* NEIGHBORHOOD — amber line 7.2:1 on paper */
  --line-product:      #0A6B41;  /* PRODUCT — green line  6.3:1 on paper */

  /* Signage tints (backs of badges, never text-bearing at low contrast) */
  --tint-state:        #F7DEDB;
  --tint-city:         #DCE5F5;
  --tint-neighborhood: #F5E5CE;
  --tint-product:      #D6EBE0;

  /* Inverted-panel line colours (lifted for AA on near-black) */
  --dk-state:#E0574B; --dk-city:#5B93E8; --dk-hood:#E1A44F; --dk-prod:#42C08C;
  --dk-meta:#8C9699; --dk-body:#B7C0C2; --dk-rule:#333B3E;

  /* Spatial system — 4/8 base */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* Type scale — 1.25 minor third off 16px */
  --t-xs:12px; --t-sm:14px; --t-base:16px; --t-lg:20px;
  --t-xl:25px; --t-2xl:31px; --t-3xl:39px; --t-4xl:49px;
  --t-5xl:61px; --t-6xl:78px;

  --gutter:32px;
  --max:1240px;

  --ease: cubic-bezier(.2,.7,.3,1);
  --dur: 200ms;
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; overflow-x:hidden }
/* NOTE: background + colour are deliberately NOT set on bare `body`.
   Only the homepage is rebuilt in this design system so far. Every other page
   type (router state/city/hood, single posts, archives, Elementor pages) is
   still DARK-themed and ships its own CSS. A light ground on bare `body` would
   either invert those pages or, at equal specificity, silently beat their own
   `body` rule depending on wp_head print order — the blog design override runs
   at priority 1, enqueued stylesheets print at 8, so this stylesheet would win
   and render near-black text on a near-black ground.
   The light ground is therefore scoped to .home below. */
body{
  margin:0;
  font-family:"Barlow",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--t-base);
  line-height:1.55;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* Theme-owned surface: the homepage. Scoped at (0,1,1) so it cannot be
   overridden by, and cannot override, the legacy dark page styles. */
body.home{
  background-color:var(--paper);
  color:var(--ink);
}

/* EVERY other page type on this site is still dark (#020907) and got its text
   colour from Kadence's `body, input, select… { color: var(--global-palette4) }`.
   That rule dies with Kadence, and archives in particular have no replacement —
   text would fall back to the browser default black on a near-black ground.
   Verified dark sitewide: router pages, single posts, archives, and the
   Elementor pages (/contact/, /advertising/, /methodology/).
   (0,1,1) — beats bare `body` rules, loses to the plugins' own scoped rules. */
body:not(.home){
  color:#E6EAE7;
}

img,svg{display:block;max-width:100%}
a{color:inherit}
figure{margin:0}

/* ---------- 2. SHARED PRIMITIVES ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* Display type: heavy neo-grotesque, tight, squared. */
h1,h2,h3,.display{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:800;
  letter-spacing:-0.022em;
  line-height:1.02;
  margin:0;
  text-wrap:balance;
}
h2{font-size:var(--t-3xl)}
h3{font-size:var(--t-lg);letter-spacing:-0.01em;line-height:1.15}
p{margin:0}

/* Utility/data face — labels, codes, numerals, captions, provenance */
.mono{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--t-xs);
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:500;
}

/* Provenance line — appears under every legality/limits claim.
   Deliberately generic: we never invent a specific citation. */
.source{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;letter-spacing:0.05em;line-height:1.5;
  color:var(--ink-3);text-transform:none;
  display:flex;gap:8px;align-items:flex-start;
}
.source::before{
  content:"";flex:0 0 10px;height:10px;margin-top:4px;
  border:2px solid currentColor;border-radius:50%;
}

/* Figure caption — the reference-work device, in mono, never serif. */
.figcap{
  margin-top:var(--s4);border-top:1px solid var(--rule);padding-top:var(--s3);
  display:flex;gap:var(--s5);align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
}
.figcap__t{max-width:74ch;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px;line-height:1.6;letter-spacing:0.02em;color:var(--ink-2)}
.figcap__t b{font-weight:600;text-transform:uppercase;letter-spacing:0.1em}
.figcap__n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;font-weight:600;color:var(--ink-3);white-space:nowrap}

/* Sign panel header: the recurring structural device.
   A black rule, a route code, a title and a directional arrow. */
.sign{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);
  border-top:3px solid var(--rule-hard);
  padding-top:var(--s3);
  margin-bottom:var(--s6);
}
.sign__code{color:var(--ink-3)}
.sign__title{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.sign__arrow{font-family:"Barlow";font-weight:700;font-size:var(--t-lg);color:var(--ink-3)}

/* Tier badge — squared, colour-coded, appears wherever a tier appears */
.tier{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 8px 2px;border:1.5px solid currentColor;
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;line-height:1.4;
  border-radius:2px;
}
.tier::before{content:"";width:8px;height:8px;background:currentColor;border-radius:50%}
.t-state{color:var(--line-state);background:var(--tint-state)}
.t-city{color:var(--line-city);background:var(--tint-city)}
.t-hood{color:var(--line-neighborhood);background:var(--tint-neighborhood)}
.t-prod{color:var(--line-product);background:var(--tint-product)}

/* Buttons — squared, engineered, no soft shadows */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:var(--t-sm);
  letter-spacing:0.04em;text-transform:uppercase;
  padding:15px 22px;border-radius:2px;border:2px solid var(--ink);
  text-decoration:none;cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn--primary{background:var(--deep);color:var(--paper-2)}
.btn--primary:hover{background:var(--line-city);border-color:var(--line-city)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--deep);color:var(--paper-2)}
.btn:active{transform:translateY(1px)}
.btn__arrow{font-size:var(--t-base);line-height:1}

/* Inline directional link, used for the methodology link */
.arrowlink{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:var(--t-sm);
  letter-spacing:0.03em;color:var(--line-city);
  border-bottom:2px solid var(--line-city);padding-bottom:2px;
  transition:gap var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.arrowlink:hover{gap:14px;color:var(--ink);border-bottom-color:var(--ink)}

/* Focus — visible everywhere, uses the CITY line so it reads as a route marker */
:focus-visible{
  outline:3px solid var(--line-city);
  outline-offset:3px;
}

/* ---------- 3. NAV ---------- */
.topbar{
  background:var(--deep);color:var(--paper-2);
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:0.08em;
  text-transform:uppercase;padding:7px 0;
}
.topbar .wrap{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.topbar span{color:#A9B2B4}
.topbar b{color:#fff;font-weight:500}

.nav{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:2px solid var(--rule-hard);
}
/* Gap tightened from s6 to s5 to buy back the horizontal room the larger
   logo lockup takes, so the nav still holds ONE line at 1440. */
.nav__inner{display:flex;align-items:center;gap:var(--s5);padding:var(--s4) 0;justify-content:space-between}
/* Logo lockup stacks: the wordmark already says the name, so the routing
   tagline sits beneath it rather than competing for horizontal room in the nav. */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-decoration:none;flex:0 0 auto}
.brand__mark{width:40px;height:40px;flex:0 0 40px}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:"Archivo";font-weight:800;font-size:19px;letter-spacing:-0.02em}
.brand__name em{font-style:normal;color:var(--ink-3);font-weight:600}
.brand__tag{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:0.16em;color:var(--ink-3);text-transform:uppercase;margin:0;white-space:nowrap}
/* The footer no longer repeats the nav tagline — .fx__brandline carries the
   positioning into the close instead. */

/* The rail wrapper exists so the mobile scroll affordance (fade + hint)
   can be positioned against a NON-scrolling parent. */
.rail{position:relative;min-width:0}
.rail__hint{display:none}
.nav__links{display:flex;align-items:center;gap:var(--s5);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav__links a{
  text-decoration:none;font-size:var(--t-sm);font-weight:600;letter-spacing:0.01em;
  padding:6px 0;border-bottom:2px solid transparent;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.nav__links a:hover{border-bottom-color:var(--line-city);color:var(--line-city)}
.nav__cta{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  border:2px solid var(--ink);border-radius:2px;padding:9px 14px;
  font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;letter-spacing:0.02em;white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.nav__cta:hover{background:var(--ink);color:var(--paper-2)}
/* Narrow-desktop guard: between the departures-rail breakpoint (1080) and a
   full-width container there is a band where the bigger lockup + eight links
   + the phone CTA get tight. Tightening the link gap here keeps the nav on
   ONE line all the way down to the rail. */
@media (min-width:1081px) and (max-width:1200px){
  .nav__links{gap:var(--s4)}
  .nav__inner{gap:var(--s4)}
}

/* ---------- 4. MASTHEAD METADATA ---------- */
/* Publication meta line: this is a maintained reference work, not a blog post.
   Rendered in the mono/label voice of the wayfinding system, never a serif. */
.masthead{
  border-bottom:1px solid var(--rule);
}
.masthead .wrap{
  display:flex;align-items:center;gap:var(--s3) var(--s4);flex-wrap:wrap;
  padding-top:var(--s4);padding-bottom:var(--s4);
}
.masthead .mono{color:var(--ink-2);white-space:nowrap}
.masthead .em-rule{flex:1 1 40px;height:1px;background:var(--rule);min-width:24px}
.masthead .rev{
  color:var(--line-product);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
.masthead .rev::before{content:"";width:8px;height:8px;background:currentColor;border-radius:50%}

/* ---------- 5. HERO ---------- */
.hero{position:relative;overflow:hidden;border-bottom:2px solid var(--rule-hard)}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--s8);align-items:center;
  padding:var(--s8) 0 var(--s8);
}
.hero__eyebrow{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5);flex-wrap:wrap}
.hero__eyebrow .mono{color:var(--ink-3)}
h1{
  font-size:clamp(38px,5.4vw,var(--t-6xl));
  letter-spacing:-0.035em;
  line-height:0.98;
  max-width:15ch;
}
h1 .hl{
  box-shadow:inset 0 -0.14em 0 var(--tint-product);
  padding-bottom:2px;
}
.hero__sub{
  margin-top:var(--s5);font-size:var(--t-lg);line-height:1.5;color:var(--ink-2);
  max-width:56ch;
}
.hero__actions{display:flex;gap:var(--s3);margin-top:var(--s6);flex-wrap:wrap}

/* Trust strip reads as a signage rail: dots between items, hard rules top/bottom */
.trust{
  margin-top:var(--s7);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:var(--s3) 0;
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;
  margin-bottom:0;padding-left:0;
}
.trust li{list-style:none;display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:var(--t-sm);font-weight:500}
.trust li::before{content:"";width:7px;height:7px;background:var(--ink);border-radius:50%;flex:0 0 7px}

/* Hero diagram panel: a live miniature of the route the site walks you down */
.hero__panel{
  background:var(--paper-2);
  border:2px solid var(--rule-hard);
  border-radius:2px;
  padding:var(--s5);
}
.hero__panel-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;border-bottom:1px solid var(--rule);padding-bottom:var(--s3);margin-bottom:var(--s4)}
.hero__panel-head .mono{color:var(--ink-3)}
.youarehere{
  display:inline-flex;align-items:center;gap:6px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--line-city);
}
.youarehere .pulse{width:9px;height:9px;border-radius:50%;background:var(--line-city);position:relative}
.youarehere .pulse::after{
  content:"";position:absolute;inset:-5px;border:1.5px solid var(--line-city);border-radius:50%;
  animation:ping 2.4s var(--ease) infinite;
}
@keyframes ping{0%{transform:scale(.6);opacity:.9}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}

.stoplist{list-style:none;margin:0;padding:0}
.stop{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:11px 0;position:relative}
.stop + .stop::before{
  content:"";position:absolute;left:10px;top:-14px;height:14px;width:4px;background:var(--c);
}
.stop__dot{
  width:22px;height:22px;border-radius:50%;border:4px solid var(--c);background:var(--paper-2);
}
.stop__label{font-family:"Archivo";font-weight:700;font-size:var(--t-base);letter-spacing:-0.01em}
.stop__meta{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);letter-spacing:0.06em;text-transform:uppercase}
.stop--terminus .stop__dot{background:var(--c);box-shadow:0 0 0 3px var(--paper-2), 0 0 0 5px var(--c)}
.hero__panel .source{margin-top:var(--s4);border-top:1px solid var(--rule);padding-top:var(--s3)}

/* ---------- 6. COVERAGE STATS ---------- */
.coverage{padding:var(--s9) 0;border-bottom:2px solid var(--rule-hard)}
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:3px solid var(--rule-hard);
}
.stat{padding:var(--s5) var(--s5) var(--s5) 0;border-right:1px solid var(--rule);min-width:0}
.stat:last-child{border-right:0}
.stat__num{
  font-family:"Archivo";font-weight:800;font-size:var(--t-4xl);letter-spacing:-0.035em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat__label{margin-top:var(--s2);color:var(--ink-2);font-weight:600;font-size:var(--t-sm)}
.stat--state .stat__num{color:var(--line-state)}
.stat--city .stat__num{color:var(--line-city)}
.stat--hood .stat__num{color:var(--line-neighborhood)}
.stat--prod .stat__num{color:var(--line-product)}

.coverage__foot{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s8);
  margin-top:var(--s7);align-items:start;
}

/* SURVEY NOTE — the honesty argument for the 50-states / 4-cities gap.
   A standing block with a hard left rule in the CITY line colour, because
   city hubs are the thing being surveyed. */
.survey{border-left:4px solid var(--line-city);padding-left:var(--s5)}
.survey__lede{
  font-family:"Archivo";font-weight:700;font-size:var(--t-xl);letter-spacing:-0.02em;
  line-height:1.15;max-width:22ch;
}
.survey p{margin-top:var(--s4);color:var(--ink-2);max-width:48ch;line-height:1.6}
.survey .arrowlink{margin-top:var(--s5)}

/* LIVE-NOW PANEL with leader-dot index */
.livenow{border:2px solid var(--rule-hard);border-radius:2px;background:var(--paper-2)}
.livenow__head{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap;
  background:var(--ink);color:var(--paper-2);padding:10px var(--s4);
}
.livenow__head .mono{color:#fff}
.livenow__body{padding:var(--s5) var(--s4) var(--s4)}
.index{list-style:none;margin:0;padding:0}
.index li{
  display:flex;align-items:baseline;gap:10px;
  padding:11px 0;border-bottom:1px solid var(--rule);min-width:0;
}
.index li:last-child{border-bottom:0}
/* City-blue station marker keeps the tier colour on the index */
.index .mk{flex:0 0 9px;width:9px;height:9px;background:var(--line-city);align-self:center}
.index a{
  text-decoration:none;font-weight:600;font-size:var(--t-base);white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.index a:hover{color:var(--line-city);border-bottom-color:var(--line-city)}
.index .dots{
  flex:1 1 12px;min-width:12px;
  border-bottom:2px dotted var(--rule);transform:translateY(-5px);
}
.index .val{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap;flex:0 0 auto;
}
.index .val b{color:var(--line-city);font-weight:600}
.livenow__note{
  margin-top:var(--s4);border-top:1px solid var(--rule);padding-top:var(--s3);
  font-size:var(--t-sm);color:var(--ink-2);line-height:1.55;
}

/* ---------- 7. ROUTING MODEL — the hero moment ---------- */
.routing{background:var(--deep);color:var(--paper-2);padding:var(--s9) 0 var(--s8);position:relative;overflow:hidden}
.routing .sign{border-top-color:var(--dk-rule)}
.routing .sign__code,.routing .sign__arrow{color:var(--dk-meta)}
.routing h2{font-size:clamp(30px,4.2vw,var(--t-4xl));max-width:20ch}
.routing__lede{color:var(--dk-body);font-size:var(--t-lg);max-width:60ch;margin-top:var(--s4);line-height:1.5}
.routing .figcap{border-top-color:var(--dk-rule)}
.routing .figcap__t{color:var(--dk-body)}
.routing .figcap__n{color:var(--dk-meta)}
.routing .source{color:var(--dk-meta)}

.diagram{margin-top:var(--s8);position:relative}
.diagram svg{width:100%;height:auto;display:block}

/* Station cards sit under the diagram, colour-locked to their line */
.stations{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-top:var(--s7);
}
.station{
  border-top:6px solid var(--c);
  background:var(--deep-2);
  padding:var(--s5) var(--s4) var(--s5);
  border-radius:0 0 2px 2px;
  position:relative;display:flex;flex-direction:column;
}
.station__idx{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:0.12em;color:var(--c);font-weight:600;text-transform:uppercase}
.station h3{margin-top:var(--s3);color:#fff;font-size:var(--t-xl)}
.station p{margin-top:var(--s3);color:#AFB8BA;font-size:var(--t-sm);line-height:1.55}
.station .source{margin-top:var(--s3)}
.station__ex{
  margin-top:auto;padding-top:var(--s4);
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:0.04em;color:var(--c);
}
.station__ex span{display:block;border-top:1px solid var(--dk-rule);padding-top:var(--s3)}
.usewhen{
  margin-top:var(--s7);display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--dk-rule);
}
.usewhen div{padding:var(--s5) var(--s5) 0 0;border-right:1px solid var(--dk-rule);min-width:0}
.usewhen div:last-child{border-right:0;padding-right:0}
.usewhen .mono{color:var(--c)}
.usewhen p{margin-top:var(--s3);font-size:var(--t-lg);line-height:1.35;font-family:"Archivo";font-weight:600;letter-spacing:-0.015em;color:#fff}

/* ---------- 8. GUIDES ---------- */
.guides{padding:var(--s9) 0;border-bottom:2px solid var(--rule-hard)}
.guidegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-left:1px solid var(--rule);border-top:1px solid var(--rule)}
.guide{
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:var(--s5);text-decoration:none;display:flex;flex-direction:column;background:transparent;
  transition:background var(--dur) var(--ease);
  position:relative;min-width:0;
}
.guide::after{
  content:"";position:absolute;left:0;top:0;width:4px;height:0;background:var(--c);
  transition:height 260ms var(--ease);
}
.guide:hover{background:var(--paper-2)}
.guide:hover::after{height:100%}
.guide__top{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-bottom:var(--s5);flex-wrap:wrap}
.guide__scope{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3)}
.guide h3{font-size:var(--t-xl);max-width:16ch}
.guide p{margin-top:var(--s3);color:var(--ink-2);font-size:var(--t-sm);line-height:1.55;max-width:38ch}
.guide .source{margin-top:var(--s4)}
.guide__go{margin-top:auto;padding-top:var(--s5);display:flex;align-items:center;gap:8px;font-weight:700;font-size:var(--t-sm);color:var(--c)}

/* ---------- 9. PRODUCT CATEGORIES ---------- */
.products{padding:var(--s9) 0;border-bottom:2px solid var(--rule-hard);background:var(--paper-2)}
.prodgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s3)}
.prod{
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--s7);
  border:2px solid var(--ink);border-radius:2px;padding:var(--s4);
  text-decoration:none;min-height:132px;min-width:0;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.prod__code{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:0.1em;color:var(--line-product)}
.prod__name{font-family:"Archivo";font-weight:700;font-size:var(--t-lg);letter-spacing:-0.02em;line-height:1.05}
.prod:hover{background:var(--line-product);color:#fff;border-color:var(--line-product)}
.prod:hover .prod__code{color:#CFEADD}

/* ---------- 10. FEATURED PLACEMENTS ---------- */
.featured{padding:var(--s9) 0;border-bottom:2px solid var(--rule-hard)}
.partners{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.partner{
  border:2px solid var(--rule-hard);border-radius:2px;background:var(--paper-2);
  display:flex;flex-direction:column;min-width:0;
}
.partner__flag{
  background:var(--tint-neighborhood);color:var(--line-neighborhood);
  border-bottom:2px solid var(--rule-hard);
  padding:8px var(--s4);display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;
}
.partner__body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4);flex:1}
.partner__logo{
  height:64px;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,#E4E7E3 0 8px,#EDEFEC 8px 16px);
}
.partner__logo span{
  font-family:"Archivo";font-weight:800;font-size:var(--t-lg);letter-spacing:-0.02em;
  background:var(--paper-2);padding:6px 12px;border:1px solid var(--rule);text-align:center;
}
.partner p{color:var(--ink-2);font-size:var(--t-sm)}
.partner__meta{margin-top:auto;display:flex;flex-wrap:wrap;gap:var(--s2)}
.pill{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;
  border:1px solid var(--rule);padding:4px 8px;color:var(--ink-2);
}
.placementcta{
  border:2px solid var(--rule-hard);border-radius:2px;background:var(--ink);color:var(--paper-2);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4);min-width:0;
}
.placementcta h3{color:#fff;font-size:var(--t-xl)}
.placementcta p{color:var(--dk-body);font-size:var(--t-sm)}
.placementcta .btn{border-color:#fff;color:var(--ink);background:#fff;margin-top:auto;align-self:flex-start}
.placementcta .btn:hover{background:var(--line-neighborhood);border-color:var(--line-neighborhood);color:#fff}
.disclosure{
  margin-top:var(--s5);border-top:1px solid var(--rule);padding-top:var(--s3);
  color:var(--ink-2);font-size:var(--t-sm);display:flex;gap:var(--s3);align-items:flex-start;flex-wrap:wrap;
}
.disclosure .mono{color:var(--ink-3);white-space:nowrap;padding-top:2px}

/* ---------- 11. LEAD CAPTURE ---------- */
.lead{padding:var(--s9) 0;border-bottom:2px solid var(--rule-hard)}
.lead__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s8)}
.lead h2{font-size:var(--t-3xl);max-width:14ch}
.lead__sub{margin-top:var(--s4);color:var(--ink-2);font-size:var(--t-lg);max-width:40ch}
.lead__note{
  margin-top:var(--s5);border-left:4px solid var(--line-neighborhood);
  padding:var(--s3) 0 var(--s3) var(--s4);color:var(--ink-2);font-size:var(--t-sm);max-width:44ch;
}
form{border:2px solid var(--rule-hard);border-radius:2px;background:var(--paper-2);padding:var(--s6);min-width:0}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field--full{grid-column:1/-1}
label{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
label .req{color:var(--line-state)}
input[type=text],input[type=email],input[type=tel]{
  font-family:"Barlow";font-size:var(--t-base);color:var(--ink);
  background:var(--paper);border:2px solid var(--rule);border-radius:2px;
  padding:12px 14px;width:100%;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
input::placeholder{color:#767F82}
input:hover{border-color:var(--ink-3)}
input:focus{border-color:var(--line-city);background:#fff;outline:none;box-shadow:inset 0 0 0 1px var(--line-city)}
input:focus-visible{outline:3px solid var(--line-city);outline-offset:2px}

fieldset{border:0;padding:0;margin:var(--s6) 0 0;min-width:0}
legend{padding:0;margin-bottom:var(--s3);font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{
  display:inline-block;cursor:pointer;
  border:1.5px solid var(--rule);border-radius:2px;background:var(--paper);
  padding:10px 14px;font-size:var(--t-sm);font-weight:600;color:var(--ink-2);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.chip span:hover{border-color:var(--ink);color:var(--ink)}
.chip input:checked + span{background:var(--line-product);border-color:var(--line-product);color:#fff}
.chip input:focus-visible + span{outline:3px solid var(--line-city);outline-offset:2px}

.age{
  margin-top:var(--s6);display:flex;gap:var(--s3);align-items:flex-start;
  border:2px solid var(--ink);border-radius:2px;padding:var(--s4);background:var(--paper);
}
.age input{width:22px;height:22px;flex:0 0 22px;accent-color:var(--line-state);margin:1px 0 0}
.age label{font-family:"Barlow";font-size:var(--t-base);letter-spacing:0;text-transform:none;font-weight:600;color:var(--ink);cursor:pointer}
.submitrow{margin-top:var(--s5);display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.submitrow .mono{color:var(--ink-3)}

/* ---------- 12. EDITORIAL MASTHEAD FOOTER ----------
   The footer CLOSES the document, it does not repeat the ask: the lead
   form directly above is the page's CTA, so nothing down here competes
   with it. Order of business: brand, utility, contact, proof, standards,
   signature.
   Balance rule: the brand rail and the tallest link column are sized to
   finish at the same baseline. Contact is therefore its OWN full-width
   band — stacking it under the brand would run that column hundreds of
   px past the links and hollow out the right side of the footer. */
.colophon{
  background:var(--deep);color:var(--dk-body);
  /* 1px of brand accent stitches the footer to the section above so the
     two read as one system rather than two documents. */
  border-top:1px solid var(--leaf);
  padding:var(--s8) 0 0;
  position:relative;
}
.colophon .sign{border-top-color:var(--dk-rule);margin-bottom:var(--s6)}
.colophon .sign__code,.colophon .sign__arrow{color:var(--dk-meta)}
.colophon h2{color:#fff;font-size:var(--t-2xl)}
.colophon h3{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--dk-meta);margin:0 0 var(--s4);
  padding-bottom:var(--s2);border-bottom:1px solid var(--dk-rule);
}

/* Link treatment — the underline WIPES IN FROM THE LEFT by animating
   background-size on a 1px gradient. Zero layout cost, no reflow, and it
   never shifts the baseline the way a border-bottom toggle does.
   NOTE ON SPECIFICITY: this selector computes at (0,1,1). Any exception
   below (.fx__phone, .fx__totop) is scoped WITH .colophon so it lands at
   (0,2,0) and actually outranks it. A bare single-class rule would lose. */
.colophon a:where(.fx__link){
  color:#E3E7E5;text-decoration:none;font-size:var(--t-sm);font-weight:500;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;
  transition:background-size var(--dur) var(--ease),color var(--dur) var(--ease);
}
.colophon a:where(.fx__link):hover,
.colophon a:where(.fx__link):focus-visible{color:#fff;background-size:100% 1px}
.colophon a:focus-visible{outline:2px solid var(--dk-prod);outline-offset:3px;border-radius:2px}

/* --- 12a. BRAND RAIL + LINK COLUMNS --- */
.fx__rail{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.15fr) minmax(0,0.8fr);
  gap:var(--s7);align-items:start;padding-bottom:var(--s7);
}
.fx__brandmark{display:block;width:max-content;max-width:100%}
.fx__brandline{
  font-family:"Archivo",Helvetica,Arial,sans-serif;font-weight:800;
  font-size:var(--t-lg);line-height:1.15;letter-spacing:-0.022em;
  color:#fff;margin:var(--s5) 0 var(--s3);max-width:24ch;text-wrap:balance;
}
.fx__blurb{font-size:var(--t-sm);line-height:1.65;color:var(--dk-body);max-width:33ch}
.fx__cols{list-style:none;margin:0;padding:0;display:grid;gap:12px var(--s5)}
/* An 8-item column splits into two sub-columns so it cannot tower over
   the 5-item one next to it. */
.fx__cols--split{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(4,auto)}

/* --- 12b. CONTACT BAR (own full-width band) --- */
.fx__contact{border-top:1px solid var(--dk-rule);border-bottom:1px solid var(--dk-rule)}
.fx__contact .wrap{
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,auto) minmax(0,1fr);
  gap:var(--s5) var(--s7);align-items:end;padding-top:var(--s5);padding-bottom:var(--s5);
}
.fx__dl{margin:0}
.fx__dl dt{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--dk-meta);margin:0 0 6px;
}
.fx__dl dd{margin:0}
.colophon .fx__phone,.fx__addr{
  font-family:"Archivo",Helvetica,Arial,sans-serif;font-weight:800;
  font-size:var(--t-xl);letter-spacing:-0.022em;line-height:1.15;color:#fff;
}
.colophon .fx__phone{
  text-decoration:none;display:inline-block;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 2px;
  transition:background-size var(--dur) var(--ease);
}
.colophon .fx__phone:hover,.colophon .fx__phone:focus-visible{background-size:100% 2px}
.footer__legend{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);margin:0;justify-self:end}
.legendkey{display:flex;align-items:center;gap:8px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--dk-body)}
.legendkey i{width:18px;height:5px;background:var(--c);display:block}

/* --- 12c. PROOF ROW --- */
/* Every fact here is already stated on this page. Nothing is invented. */
.fx__proof{
  display:flex;flex-wrap:wrap;align-items:center;
  padding:var(--s5) 0;border-bottom:1px solid var(--dk-rule);
}
.fx__fact{
  display:flex;align-items:center;gap:9px;padding:2px var(--s5);
  border-right:1px solid var(--dk-rule);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:500;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--dk-body);
}
.fx__fact:first-child{padding-left:0}
.fx__fact:last-child{border-right:0;padding-right:0}
.fx__fact i{width:9px;height:9px;flex:0 0 9px;background:var(--c);display:block}
.fx__fact b{color:#fff;font-weight:600}

/* --- 12d. EDITORIAL STANDARDS --- */
/* Compliance copy, presented as a numbered standards set on the record
   rather than as fine print. All four are load-bearing — never trimmed. */
.fx__standards{padding:var(--s7) 0}
.standards{
  list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s7);
}
.standards li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);align-items:start}
.standards .n{
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:0.12em;
  color:var(--dk-meta);border:1px solid var(--dk-rule);padding:3px 7px;border-radius:2px;white-space:nowrap;
}
.standards p{font-size:var(--t-sm);line-height:1.65;max-width:52ch;color:var(--dk-body)}
.standards b{color:#fff;font-weight:600}

/* --- 12e. WATERMARK + LEGAL --- */
.fx__base{position:relative;overflow:hidden;border-top:1px solid var(--dk-rule);padding-top:var(--s6)}
.fx__base .wrap{position:relative}
/* Sized so the GLYPH RUN lands at ~0.89-0.92 of the container at every
   width. Measuring the DIV would lie — a block always reports ~1.0 of its
   parent. Deliberately a touch conservative: clipped on both sides reads
   as a bug, not as art. */
.fx__watermark{
  position:absolute;left:var(--gutter);bottom:-0.20em;
  font-family:"Archivo",Helvetica,Arial,sans-serif;font-weight:800;
  /* Sized so the GLYPH RUN spans ~0.91 of the container at every width — measured
     via Range.selectNodeContents, never off the block (a block always reports ~1.0).
     The old clamp max of 138px was binding at 1440 and held the run at 0.825; the
     ceiling is now high enough that the vw term governs across real viewports. */
  font-size:clamp(34px,10.56vw,240px);line-height:.78;letter-spacing:-0.032em;
  white-space:nowrap;color:#fff;opacity:.055;
  pointer-events:none;user-select:none;-webkit-user-select:none;
}
.fx__legal{
  position:relative;z-index:1;
  display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap;
  padding:var(--s7) 0 var(--s7);
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--dk-meta);
}
/* Anchored to .fx__base .wrap (a centred, gutter-padded box) rather than to
   .colophon — pinning it to the footer itself would put it on top of the
   sign row's right-hand label at the top of the footer. Targets #top, which
   is the id on <main> in this document. */
.colophon .fx__totop{
  position:absolute;top:0;right:var(--gutter);z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--dk-rule);border-radius:2px;padding:9px 13px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--dk-meta);text-decoration:none;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.colophon .fx__totop:hover,.colophon .fx__totop:focus-visible{border-color:var(--leaf);color:#fff}

/* ---------- 13. REVEALS ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity 500ms var(--ease),transform 500ms var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.routeline{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1100ms var(--ease)}
.diagram.is-in .routeline{stroke-dashoffset:0}
.diagram .stationdot{opacity:0;transition:opacity 380ms var(--ease)}
.diagram.is-in .stationdot{opacity:1}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
  .routeline{stroke-dashoffset:0}
  .diagram .stationdot{opacity:1}
}

/* ---------- 14. RESPONSIVE ----------
   Mobile is composed, not reflowed: the route diagram becomes a VERTICAL
   strip-map (how a real transit panel works on a narrow sign), stats become
   a 2x2 board, products a 2-up ticket sheet, and the nav becomes a
   horizontally scrollable departures rail with a visible fade edge. */
.diagram__tall{display:none}
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:var(--s7);padding:var(--s7) 0}
  .guidegrid{grid-template-columns:repeat(2,1fr)}
  .prodgrid{grid-template-columns:repeat(4,1fr)}
  .partners{grid-template-columns:1fr 1fr}
  .placementcta{grid-column:1/-1}
  .lead__grid{grid-template-columns:1fr;gap:var(--s7)}
  .coverage__foot{grid-template-columns:1fr;gap:var(--s7)}
  /* Brand rail takes the full row; the two link columns pair beneath it,
     which keeps their baselines level with each other. */
  .fx__rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s7)}
  .fx__brand{grid-column:1/-1}
  .fx__blurb{max-width:52ch}
  .fx__contact .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__legend{grid-column:1/-1;justify-self:start}
  .stations{grid-template-columns:1fr 1fr}

  /* Departures rail. The links stay visible and scroll sideways rather than
     hiding behind a hamburger — routing links ARE the product. */
  .nav__inner{flex-wrap:wrap;gap:var(--s3) var(--s5)}
  .rail{order:3;flex:1 1 100%;border-top:1px solid var(--rule);padding-top:8px}
  .rail__hint{
    display:flex;align-items:center;gap:6px;
    font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;
    letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);
    padding-bottom:6px;
  }
  .rail__hint::after{content:"→"}
  .rail nav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
  .rail nav::-webkit-scrollbar{display:none}
  /* Fade edge sits on the NON-scrolling wrapper so it stays pinned right. */
  .rail::after{
    content:"";position:absolute;right:0;bottom:4px;width:44px;height:34px;
    background:linear-gradient(to right,rgba(237,239,236,0),var(--paper) 72%);
    pointer-events:none;
  }
  .nav__links{flex-wrap:nowrap;gap:var(--s4);padding-right:44px}
  .nav__links a{white-space:nowrap;font-size:13px}
}
@media (max-width:720px){
  :root{--gutter:20px}
  .topbar .wrap{justify-content:center;text-align:center;font-size:10px;gap:var(--s2)}
  h2{font-size:var(--t-2xl)}
  .masthead .wrap{gap:var(--s2) var(--s3)}
  .masthead .em-rule{display:none}
  .masthead .mono{white-space:normal}
  .sign{flex-direction:column;align-items:flex-start;gap:var(--s2);margin-bottom:var(--s5)}
  .hero__sub{font-size:var(--t-base)}
  .hero__actions .btn{flex:1 1 100%;justify-content:space-between}
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:var(--s4) var(--s4) var(--s4) 0;border-bottom:1px solid var(--rule)}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(n+3){border-bottom:0}
  .stat__num{font-size:var(--t-3xl)}
  .routing,.coverage,.guides,.products,.featured,.lead{padding-top:var(--s8);padding-bottom:var(--s8)}
  .stations{grid-template-columns:1fr;gap:var(--s3)}
  .usewhen{grid-template-columns:1fr}
  .usewhen div{padding:var(--s4) 0;border-right:0;border-bottom:1px solid var(--dk-rule)}
  .usewhen div:last-child{border-bottom:0}
  .guidegrid{grid-template-columns:1fr}
  .prodgrid{grid-template-columns:1fr 1fr}
  .prod{min-height:104px;gap:var(--s5)}
  .partners{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr}
  form{padding:var(--s5)}
  /* FOOTER, MOBILE — composed, not just collapsed. The link columns keep
     their two-up split (a phone is a good place for a dense index), the
     contact bar stays its own band, and the proof facts become a stacked
     rule-separated ledger instead of an unreadable inline run. */
  .fx__rail{grid-template-columns:1fr;gap:var(--s6)}
  .fx__blurb,.fx__brandline{max-width:34ch}
  .fx__contact .wrap{grid-template-columns:1fr;gap:var(--s5)}
  .footer__legend{justify-self:start}
  .colophon .fx__phone,.fx__addr{font-size:var(--t-lg)}
  .fx__cols{gap:0 var(--s5)}
  /* ≥36px tap targets on every footer link. */
  .colophon a:where(.fx__link){display:block;padding:8px 0}
  .fx__proof{padding:var(--s4) 0}
  .fx__fact{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--dk-rule);padding:10px 0}
  .fx__fact:last-child{border-bottom:0;padding-bottom:0}
  .standards{grid-template-columns:1fr;gap:var(--s4)}
  .standards p{max-width:none}
  .fx__standards{padding:var(--s6) 0}
  .colophon .fx__totop{position:static;align-self:flex-start;order:-1;min-height:36px}
  .fx__legal{gap:var(--s3);padding:var(--s5) 0 var(--s7)}
  .survey{padding-left:var(--s4)}
  .survey__lede{font-size:var(--t-lg);max-width:26ch}
  .diagram__wide{display:none}
  .diagram__tall{display:block}
  .figcap{gap:var(--s3)}
  /* Leader dots stay, but the value drops to its own line so long labels
     never force a horizontal scroll. */
  .index li{flex-wrap:wrap}
  .index .val{flex-basis:100%;padding-left:19px}
  .index .dots{flex:1 1 20px}
}

/* Fade/hint suppression once the rail is fully scrolled or not scrollable. */
.rail--done::after{opacity:0}
.rail--done .rail__hint{opacity:.35}
.rail::after{transition:opacity var(--dur) var(--ease)}
/* ============================================================
   ROUTER-RENDERED PAGES (state / city / neighborhood)
   ------------------------------------------------------------
   ~6,300 URLs are rendered by plugins/thcc-core-router, not by a
   template in this theme. They are DARK-themed and supply their own
   dark ground (body.thcc-core-active background + an html,body
   !important rule), but they never set a body TEXT colour — Kadence
   was supplying that via --global-palette4.

   With Kadence gone, those pages would inherit this theme's --ink
   (#0F1A15) and render near-black text on a near-black background:
   invisible content on the entire programmatic surface.

   Specificity here is (0,1,1) so it beats the base body rule (0,0,1).
   Scoped to the router's own body class, so nothing else is touched.
   ============================================================ */
body.thcc-core-active{
  color:#E6EAE7;
}
body.thcc-core-active h1,
body.thcc-core-active h2,
body.thcc-core-active h3{
  color:#F4F7F5;
}
/* The router's panels assume a dark ground; keep muted text legible on it. */
body.thcc-core-active small,
body.thcc-core-active .thcc-eyebrow{
  color:#A9B6AE;
}