/* Industrial Welders — Axis 2 (Institutional-navy: education-authority).
   Round-1 design candidate, lane B. Navy soaks header/footer/hero/proof
   bands site-wide (AWS.org / Milwaukee Tool full-surface commitment), body
   copy runs on warm paper, credential marks are square/ruled, never pills.
   Hand-rolled, no build step — crawlability requires zero JS-required
   content. */

:root {
  --navy: #16294D;
  --navy-deep: #0E1A32;
  --navy-mid: #1F3660;
  --paper: #FBFAF7;
  --tint: #EEF1F6;
  --white: #FFFFFF;
  --ink: #182130;
  --muted: #57606F;
  --slate: #8A93A3;
  --line: #DBE0E8;
  --line-on-navy: rgba(255,255,255,0.16);
  --gold: #D98A2B;
  --gold-dark: #B06B1B;
  --cream: #F4EFE4;

  --font-display: "Roboto Flex", "Inter", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 16px;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 1.5rem; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: #fff; padding: 0.75rem 1rem;
  z-index: 200;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

a { color: var(--navy-mid); text-decoration-color: var(--slate); overflow-wrap: anywhere; }
a:hover { color: var(--gold-dark); }

main { min-height: 60vh; }

/* Long unbroken strings (source URLs, program names, mono-formatted
   values) must never blow out the viewport — final sweep, T-0312
   2026-08-05: mobile overflow on program pages whose source_url link ran
   past 390px with nothing to wrap on. overflow-wrap: anywhere is a no-op
   until content actually would overflow, so this is a pure safety net. */
.fact-list span, .meta, td, .card, .row-item { overflow-wrap: anywhere; }

img { max-width: 100%; display: block; }

/* ---------- Type ladder ---------- */

.eyebrow {
  font-family: var(--font-body);
  font-variant-caps: all-small-caps;
  font-weight: 600;
  letter-spacing: 0.09em;
  font-size: 1rem;
  color: var(--gold);
  margin: 0 0 0.6rem;
  display: block;
}
.eyebrow.on-paper { color: var(--navy); }
.eyebrow.on-tint { color: var(--navy-mid); }

.h-hero {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 85%;
  font-variation-settings: "wght" 900, "wdth" 85, "opsz" 144;
  font-size: clamp(2.3rem, 4.6vw, 3.9rem);
  line-height: 1.03;
  letter-spacing: -0.012em;
  margin: 0 0 0.9rem;
  color: #fff;
}
.h-hero.on-paper { color: var(--navy-deep); }

.h-section {
  font-family: var(--font-display);
  font-weight: 850;
  font-stretch: 92%;
  font-variation-settings: "wght" 850, "wdth" 92, "opsz" 60;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.1;
  letter-spacing: -0.008em;
  margin: 0 0 1rem;
  color: var(--navy-deep);
}
.h-section.on-navy { color: #fff; }

.h-row {
  font-family: var(--font-display);
  font-weight: 780;
  font-stretch: 100%;
  font-variation-settings: "wght" 780, "wdth" 100, "opsz" 20;
  font-size: 1.15rem;
  margin: 0 0 0.3rem;
  color: var(--navy-deep);
}
.h-row a { color: var(--navy-deep); text-decoration: none; }
.h-row a:hover { color: var(--gold-dark); }

.lede {
  font-size: 1.12rem;
  color: var(--muted);
  max-width: 62ch;
}
.lede.on-navy { color: #C9D2E3; }

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

/* ---------- Header (multi-tier, full navy) ---------- */

.utility-bar { background: var(--navy-deep); color: #A9B4C9; font-size: 0.82rem; }
.utility-bar .wrap { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 1.5rem; flex-wrap: wrap; gap: 0.5rem; }
.utility-bar .u-fact { font-family: var(--font-mono); letter-spacing: 0.01em; }
.utility-bar .u-fact strong { color: #E4C08A; font-weight: 600; }
.utility-bar .u-links a { color: #A9B4C9; text-decoration: none; margin-left: 1.1rem; }
.utility-bar .u-links a:hover { color: #fff; }

.site-header { background: var(--navy); border-bottom: 3px solid var(--gold); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 1.05rem 1.5rem; flex-wrap: wrap; gap: 0.9rem; }
.brand {
  color: #fff; text-decoration: none; font-size: 1.28rem;
  font-family: var(--font-display); font-weight: 800; font-stretch: 88%;
  font-variation-settings: "wght" 800, "wdth" 88;
  letter-spacing: -0.005em;
}
.brand span { color: var(--gold); }
.site-header nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; }
.site-header nav a {
  color: #D6DCE8; text-decoration: none; margin-left: 0.35rem; padding: 0.4rem 0.7rem;
  font-variant-caps: all-small-caps; font-weight: 600; letter-spacing: 0.06em; font-size: 1rem;
  border-bottom: 2px solid transparent;
}
.site-header nav a:hover { color: #fff; border-bottom-color: var(--gold); }

/* ---------- Section rhythm (engineered heterogeneity: vary padding + surface deliberately) ---------- */

section { }
.pad-s  { padding: 1.6rem 0; }
.pad-m  { padding: 2.6rem 0; }
.pad-l  { padding: 4rem 0; }
.pad-xl { padding: 5.75rem 0; }

.surface-paper { background: var(--paper); }
.surface-tint  { background: var(--tint); }
.surface-white { background: var(--white); }
.surface-navy  { background: var(--navy); color: #E7EAF2; }
.surface-navy a { color: #D6DCE8; }
.surface-navy .lede, .surface-navy p { color: #C4CCDE; }

.rule-top    { border-top: 1px solid var(--line); }
.rule-bottom { border-bottom: 1px solid var(--line); }

/* ---------- Photo hero (homepage / national hub) ---------- */

.hero-photo {
  position: relative;
  background: var(--navy-deep);
  overflow: hidden;
  min-height: 30rem;
  display: flex;
  align-items: flex-end;
}
.hero-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center 35%;
  filter: saturate(0.94) contrast(1.03);
}
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,26,50,0.20) 0%, rgba(14,26,50,0.55) 55%, rgba(14,26,50,0.94) 100%);
}
.hero-photo .hero-inner { position: relative; z-index: 2; padding: 3.75rem 0 3rem; width: 100%; text-align: center; }
.hero-photo .hero-inner > *, .hero-photo .hero-inner .h-hero { margin-left: auto; margin-right: auto; }
.hero-photo .hero-inner .lede { max-width: 52rem; }
.hero-photo .search-card { max-width: 46rem; text-align: left; }
.hero-photo.compact { min-height: 20rem; }
.hero-photo .credit {
  position: absolute; right: 0; bottom: 0; z-index: 2; font-family: var(--font-mono); font-size: 0.72rem;
  color: rgba(255,255,255,0.55); padding: 0 1.5rem 0.9rem; text-align: right;
}

/* Per-role grading variants (round2 V1): compact photo heroes read distinctly by page role
   rather than reusing the homepage's exact grade. Archival = state pages (historic source
   photography, pushed toward its own black-and-white character). Local = metro pages
   (contemporary source photography, slightly brighter and more saturated). */
.hero-photo.tone-archival img { filter: saturate(0.7) contrast(1.1) brightness(0.98); }
.hero-photo.tone-archival::after { background: linear-gradient(180deg, rgba(14,26,50,0.30) 0%, rgba(14,26,50,0.62) 50%, rgba(14,26,50,0.95) 100%); }
.hero-photo.tone-local img { filter: saturate(1.05) contrast(1.05) brightness(1.02); }
.hero-photo.tone-local::after { background: linear-gradient(180deg, rgba(14,26,50,0.16) 0%, rgba(14,26,50,0.5) 55%, rgba(14,26,50,0.92) 100%); }

/* ---------- Solid navy band hero (hub/list/detail pages, no photo) ---------- */

.hero-band { background: var(--navy); padding: 3rem 0 2.5rem; position: relative; }
.hero-band::before { content: ""; position: absolute; left:0; right:0; bottom:0; height: 3px; background: var(--gold); opacity: 0.55; }
.hero-compact { background: var(--navy); padding: 1.75rem 0; }
.hero-compact .h-section { margin-bottom: 0.35rem; }

/* ---------- Working search (dominant, floated light card over the photo hero) ---------- */

.search-card {
  position: relative; z-index: 2; background: var(--paper); border: 1px solid var(--line);
  border-top: 4px solid var(--gold); padding: 1.5rem 1.6rem; margin-top: 1.75rem;
  max-width: 640px; box-shadow: 0 18px 40px rgba(14,26,50,0.35);
}
.search-card h2 { margin: 0 0 0.9rem; font-size: 1rem; font-variant-caps: all-small-caps; letter-spacing: 0.05em; color: var(--navy); font-weight: 700; }
form.zip-search { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: flex-end; margin: 0.5rem 0; }
form.zip-search + form.zip-search { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
form.zip-search label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--muted); }
form.zip-search input[type="text"] {
  padding: 0.75rem 0.75rem; border: 1.5px solid var(--line); border-radius: 2px; font-size: 1rem; width: 10rem;
  min-height: 44px; font-family: var(--font-mono); background: #fff;
}
form.zip-search input[type="text"]:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--navy); }
form.zip-search button {
  padding: 0.75rem 1.25rem; border: 2px solid var(--gold); border-radius: 2px; background: var(--gold);
  color: var(--navy-deep); font-weight: 700; font-family: var(--font-body); cursor: pointer; font-size: 0.95rem;
  min-height: 44px;
}
form.zip-search button:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.search-card .meta { font-size: 0.82rem; color: var(--muted); margin: 0.6rem 0 0; }

/* ---------- Intake forms (/corrections, /claim — T-0312 contact lane) ---------- */

.form-card {
  background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--gold);
  padding: 1.5rem 1.6rem; margin: 1.5rem 0; max-width: 640px;
}
.form-card .field { margin-bottom: 1.1rem; }
.form-card label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--muted); }
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="url"],
.form-card input[type="tel"],
.form-card input[type="file"],
.form-card textarea {
  width: 100%; box-sizing: border-box; padding: 0.75rem; border: 1.5px solid var(--line);
  border-radius: 2px; font-size: 1rem; min-height: 44px; font-family: var(--font-body); background: #fff;
}
.form-card textarea { min-height: 6.5rem; resize: vertical; }
.form-card input:focus, .form-card textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--navy); }
.form-card .field-check { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 1.1rem; }
.form-card .field-check input[type="checkbox"] { width: 1.2rem; height: 1.2rem; min-height: 0; flex-shrink: 0; margin-top: 0.2rem; }
.form-card .field-check label { font-weight: 400; color: var(--ink); margin-bottom: 0; font-size: 0.92rem; }
.form-card .meta { font-size: 0.82rem; color: var(--muted); margin: 0.35rem 0 0; }
.form-card button[type="submit"] { min-height: 44px; }
/* Honeypot: visually hidden off-screen (not display:none — some spam bots
   specifically skip display:none fields) and excluded from tab order. */
.hp-field { position: absolute; left: -5000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Proof / trust band (ONE navy full-surface band, stat trio, mono figures) ---------- */

.proof-band { background: var(--navy); padding: 2.75rem 0; position: relative; }
.proof-band::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background: var(--gold); opacity:0.5; }
.proof-band .eyebrow { color: var(--gold); }
.stat-row { display: flex; gap: 0; margin-top: 0.5rem; flex-wrap: wrap; border-top: 1px solid var(--line-on-navy); }
.stat { flex: 1 1 200px; padding: 1.3rem 1.5rem 0.3rem 0; border-right: 1px solid var(--line-on-navy); }
.stat:last-child { border-right: none; }
.stat .n { font-family: var(--font-mono); font-size: 2.1rem; font-weight: 600; display: block; color: #fff; letter-spacing: -0.01em; }
.stat .l { color: #A9B4C9; font-size: 0.86rem; margin-top: 0.15rem; display: block; }

/* ---------- Buttons / CTAs (square-cornered, never default-blue, never pill) ---------- */

.btn { display: inline-block; padding: 0.7rem 1.3rem; font-weight: 700; text-decoration: none; border-radius: 2px; border: 2px solid transparent; font-size: 0.95rem; }
.btn-gold { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--navy-deep); }
.btn-outline-navy { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: #fff; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
.btn-outline-light:hover { border-color: #fff; }

/* ---------- Credential / trust marks: squared, ruled devices, never rounded pills ---------- */

.credential {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border: 1px solid var(--line); border-top: 2px solid var(--slate);
  background: var(--white); border-radius: 1px;
  padding: 0.18rem 0.55rem; font-size: 0.78rem; font-family: var(--font-mono);
  color: var(--muted); letter-spacing: 0.01em;
}
.credential.yes { border-top-color: var(--gold); color: var(--navy-deep); }
.credential.yes::before { content: "\2713"; color: var(--gold-dark); font-weight: 700; }
.credential.no { color: var(--slate); }
.credential.on-navy { background: transparent; border-color: rgba(255,255,255,0.4); color: #E4C08A; }
.credential.on-navy::before { color: var(--gold); }

/* legacy alias kept so any un-migrated .badge markup still reads square, not pill */
.badge { display: inline-block; background: var(--white); border: 1px solid var(--line); border-top: 2px solid var(--slate); border-radius: 1px; padding: 0.15rem 0.55rem; font-size: 0.78rem; font-family: var(--font-mono); color: var(--muted); }
.badge.yes { border-top-color: var(--gold); color: var(--navy-deep); background: var(--cream); }

/* ---------- Grids / chip lists ---------- */

.grid { display: grid; gap: 0.55rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.chip {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  border: 1px solid var(--line); border-left: 3px solid transparent; background: #fff;
  border-radius: 2px; padding: 0.65rem 0.85rem; text-decoration: none; color: var(--ink); font-size: 0.94rem;
}
.chip:hover { border-left-color: var(--gold); color: var(--navy-deep); }
.chip .count { color: var(--slate); font-size: 0.8rem; font-family: var(--font-mono); }

/* Mobile QA pass (T-0312, 2026-08-06): most .chip usage puts a short number
   in .count (state/metro list counts), which fits fine beside the label at
   any width. The homepage's certification-codex chips are the exception —
   .count carries a full credential name (e.g. "AWS Certified Welding
   Inspector") — and at phone widths the space-between flex squeezes that
   into a cramped, right-hugging ~50%-width column that wraps awkwardly.
   Letting the row wrap, with .count dropping to its own full-width line,
   fixes the long-text case and is a no-op for the short numeric case
   (which never wraps in the first place). */
@media (max-width: 480px) {
  .chip { flex-wrap: wrap; }
  .chip .count { flex-basis: 100%; text-align: left; }
}

/* ---------- Card grid (varied: not uniform rounded — square, ruled top accent) ---------- */

.card-grid { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.card {
  border: 1px solid var(--line); border-top: 3px solid var(--navy);
  border-radius: 0; padding: 1.2rem 1.3rem; background: #fff;
}
.card h3 { margin: 0 0 0.45rem; }
.card h3 a { text-decoration: none; }
.card .meta { color: var(--muted); font-size: 0.86rem; margin: 0.2rem 0; }
.card .badge, .card .credential { margin: 0.35rem 0.35rem 0 0; }

/* photo card variant used on metro/shop listing tiles */
.card-photo { border-top: none; padding: 0; overflow: hidden; }
.card-photo .thumb { aspect-ratio: 4 / 3; overflow: hidden; background: var(--tint); }
.card-photo .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-photo .thumb.wide { aspect-ratio: 16 / 9; }
.card-photo .thumb.tall { aspect-ratio: 3 / 4; }
.card-photo .body { padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-top: none; }

/* ---------- List rows (dense alternative to cards — hairline-ruled, not boxed) ---------- */

.row-list { border-top: 1px solid var(--line); margin: 1rem 0; }
.row-item { display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.row-item .row-main { flex: 1 1 260px; }
.row-item .row-side { text-align: right; font-family: var(--font-mono); font-size: 0.88rem; color: var(--muted); }

/* Basic (candidate/unverified) listing — deliberately plainer than a
   verified .row-item: no link (no entity page exists), muted color, no
   bold — the visual signal that this listing carries a lower trust bar. */
.row-item.plain { color: var(--muted); }
.row-item.plain .row-main { font-weight: 400; }
.row-item.plain .meta { width: 100%; margin: 0.15rem 0 0; font-size: 0.85rem; }

/* ---------- Data table ---------- */

table.data-table { width: 100%; border-collapse: collapse; margin: 0; font-size: 0.93rem; }
table.data-table th, table.data-table td { text-align: left; padding: 0.62rem 0.7rem; border-bottom: 1px solid var(--line); }
table.data-table thead th {
  background: var(--navy); color: #fff; font-variant-caps: all-small-caps; letter-spacing: 0.04em; font-weight: 600;
  border-bottom: none;
}
table.data-table tbody tr:hover { background: var(--tint); }
table.data-table td.num, table.data-table td.mono { font-family: var(--font-mono); }

/* Mobile collapse pattern: the app has no card-per-row alternative for
   dense multi-column data tables, so a scoped horizontal scroll (never a
   page-wide one) is the convention — the table stays fully tabular and
   readable, the scrollbar is contained to its own strip. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.2rem 0; border: 1px solid var(--line); position: relative; }
.table-scroll table.data-table { margin: 0; border: none; }
.table-scroll table.data-table th:first-child, .table-scroll table.data-table td:first-child { padding-left: 0.85rem; }

/* Mobile QA pass (T-0312, 2026-08-06): at phone widths these tables (5-6
   columns) only show ~1.5 columns before the horizontal-scroll boundary,
   with nothing on screen to say more data exists off to the right — a
   visitor on the state or ZIP-search program tables sees "Program / City"
   and nothing hints that Tuition, Phone, and AWS ATF are one swipe away.
   A right-edge fade plus an explicit swipe hint (text lives in the Blade
   partial, shown only below this breakpoint) fixes that without touching
   the scroll mechanism itself. */
.table-scroll-hint { display: none; }
@media (max-width: 640px) {
  .table-scroll-hint {
    display: block; font-size: 0.78rem; color: var(--muted); font-family: var(--font-mono);
    margin: 0.5rem 0 -0.3rem;
  }
  .table-scroll::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 22px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.92));
    pointer-events: none;
  }
}

/* ---------- Breadcrumbs ---------- */

.breadcrumbs { font-size: 0.84rem; color: var(--slate); margin: 1.1rem 0 0.75rem; font-family: var(--font-mono); }
.breadcrumbs a { color: var(--slate); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; color: var(--navy-mid); }
.hero-band .breadcrumbs, .hero-compact .breadcrumbs { color: #A9B4C9; }
.hero-band .breadcrumbs a, .hero-compact .breadcrumbs a { color: #A9B4C9; }

/* ---------- Fact list (entity detail pages) ---------- */

.fact-list { list-style: none; padding: 0; margin: 1.3rem 0; border-top: 1px solid var(--line); }
.fact-list li { display: flex; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.fact-list dt, .fact-list .k { font-weight: 600; min-width: 12rem; color: var(--muted); font-size: 0.92rem; }
.fact-list span:not(.k):not(.badge):not(.credential) { font-family: var(--font-mono); font-size: 0.94rem; }

details summary { cursor: pointer; font-weight: 600; color: var(--navy); padding: 0.5rem 0; font-family: var(--font-body); }

/* ---------- Pull-quote module (guide / article pages, one navy band mid-article) ---------- */

.pull-quote { background: var(--navy); color: #fff; padding: 2.75rem 0; margin: 2.5rem 0; position: relative; }
.pull-quote::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background: var(--gold); opacity:0.55; }
.pull-quote blockquote { margin: 0; font-family: var(--font-display); font-weight: 700; font-stretch: 92%; font-variation-settings: "wght" 700, "wdth" 92; font-size: clamp(1.2rem, 2.4vw, 1.7rem); line-height: 1.35; max-width: 46ch; }
.pull-quote cite { display: block; font-style: normal; font-family: var(--font-mono); font-size: 0.82rem; color: #A9B4C9; margin-top: 1rem; }

/* ---------- Inline article photo panel ---------- */

.figure-panel { margin: 2rem 0; }
.figure-panel img { width: 100%; height: auto; }
.figure-panel figcaption { font-family: var(--font-mono); font-size: 0.75rem; color: var(--slate); padding: 0.5rem 0; border-top: 1px solid var(--line); margin-top: 0; }
.figure-panel.float-right { float: right; width: 44%; margin-left: 2rem; }
.figure-panel.mono-tone img { filter: grayscale(0.55) contrast(1.05); }
.figure-panel.accent-frame { border-top: 3px solid var(--gold); padding-top: 0.9rem; }
.figure-panel.accent-frame img { filter: saturate(1.03) contrast(1.05); }

/* ---------- Charts (server-rendered inline SVG, no JS — T-0312 guide-beautify) ---------- */

.chart-panel {
  margin: 2.25rem 0; padding: 1.5rem 1.6rem 1.1rem; background: var(--white);
  border: 1px solid var(--line); border-top: 3px solid var(--navy);
  --chart-bar: var(--navy-mid);
  --chart-track: var(--tint);
  --chart-accent: var(--gold);
  --chart-axis: var(--slate);
  --chart-ink: var(--ink);
  --chart-muted: var(--muted);
}
.chart-head { display: block; margin: 0 0 1rem; }
.chart-title {
  font-family: var(--font-display); font-weight: 780; font-stretch: 96%;
  font-variation-settings: "wght" 780, "wdth" 96; font-size: 1.05rem; color: var(--navy-deep);
}
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-track { fill: var(--chart-track); }
.chart-col { fill: var(--chart-bar); }
.chart-axis { stroke: var(--chart-axis); stroke-width: 1; }
.chart-row-label { font-family: var(--font-body); font-size: 12.5px; fill: var(--chart-muted); }
.chart-value-label { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; fill: var(--chart-ink); }
.chart-source {
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--slate);
  padding-top: 0.7rem; margin-top: 0.9rem; border-top: 1px solid var(--line);
}
.chart-note { font-size: 0.82rem; color: var(--muted); margin: 0.6rem 0 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Tap-to-call phone links (T-0312 phone-formatting pass) ---------- */

.phone-link { color: inherit; text-decoration-color: var(--slate); }
.phone-link:hover { color: var(--gold-dark); }

/* ---------- Map placeholder (kept honest, not faked) ---------- */

.map-placeholder { border: 1px dashed var(--slate); background: var(--tint); padding: 2.5rem 1rem; text-align: center; color: var(--muted); margin: 1.2rem 0; font-family: var(--font-mono); font-size: 0.86rem; }

/* ---------- Leaflet map embed (T-0312 launch) ---------- */

.map-embed { border: 1px solid var(--line); background: var(--tint); margin: 1.2rem 0; z-index: 0; }
.map-embed.locator { height: 220px !important; max-width: 420px; }
.map-embed .leaflet-popup-content a { color: var(--navy-mid); }

/* ---------- Alerts ---------- */

.alert { padding: 0.85rem 1.1rem; margin: 1.1rem 0; border-left: 3px solid; }
.alert-error { background: #FBEDE9; border-color: #B54A34; color: #7a2b22; }
.alert-empty { background: var(--tint); border-color: var(--slate); color: var(--muted); }

.pagination-links { margin-top: 1.5rem; }

/* ---------- Footer (compact operating-company footer, T-0312 2026-08-05:
   Ryan — "that footer content is too large." One row (wordmark/one-liner +
   4 links that aren't already in the primary nav or utility bar), then one
   small-print line carrying the required GeoNames CC-BY + OSM credits and
   the no-cookies/privacy note. Deliberately smaller type scale than the
   rest of the page — this is fine print, not a fifth navigation surface. ---------- */

.site-footer { background: var(--navy-deep); color: #A9B4C9; margin-top: 0; border-top: 3px solid var(--gold); }
.footer-inner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 0.75rem 1.5rem; padding: 1.5rem 1.5rem 1rem;
}
.footer-about { display: flex; align-items: baseline; gap: 0.65rem; flex-wrap: wrap; }
.footer-about p { margin: 0; font-size: 0.78rem; color: #8592A8; line-height: 1.5; }
.footer-about .wordmark { color: #fff; font-family: var(--font-display); font-weight: 800; font-stretch: 88%; font-variation-settings: "wght" 800, "wdth" 88; font-size: 0.95rem; }
.footer-about .wordmark span { color: var(--gold); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; }
.footer-links a { color: #A9B4C9; text-decoration: none; font-size: 0.82rem; }
.footer-links a:hover { color: #fff; }
.footer-fine-print { padding: 0 1.5rem 1.5rem; border-top: 1px solid var(--line-on-navy); }
.footer-fine-print p { margin: 0.85rem 0 0; font-size: 0.72rem; color: #77839A; line-height: 1.6; }
.footer-fine-print a { color: #8FA0BE; text-decoration: none; }
.footer-fine-print a:hover { color: #fff; }

@media (max-width: 860px) {
  .stat-row { border-top: none; }
  .stat { border-right: none; border-top: 1px solid var(--line-on-navy); flex-basis: 100%; padding: 1rem 0 0.3rem; }
  .figure-panel.float-right { float: none; width: 100%; margin-left: 0; }
}

@media (max-width: 600px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .header-inner { padding: 0.85rem 1.1rem; }
  /* Touch targets, not mouse targets, below this breakpoint: nav links grow
     to a >=44px tap height instead of shrinking (the desktop rule's tighter
     padding assumes cursor precision a thumb doesn't have). */
  .site-header nav a { margin-left: 0; padding: 0.65rem 0.7rem; min-height: 44px; display: inline-flex; align-items: center; }
  .hero-photo { min-height: 24rem; }
  .fact-list li { flex-direction: column; gap: 0.15rem; }
  .fact-list dt, .fact-list .k { min-width: 0; }
  .utility-bar .wrap { flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.5rem 1.1rem; }
  .utility-bar .u-fact { font-size: 0.72rem; line-height: 1.4; }
  .utility-bar .u-links { font-size: 0.72rem; display: flex; }
  .utility-bar .u-links a { margin-left: 0; margin-right: 1.1rem; padding: 0.85rem 0; display: inline-flex; align-items: center; }
  .stat-row { border-top: none; }
  .stat { border-right: none; border-top: 1px solid var(--line-on-navy); flex-basis: 100%; padding: 1rem 0 0.3rem; }
  table.data-table { font-size: 0.86rem; }
  table.data-table th, table.data-table td { padding: 0.55rem 0.6rem; white-space: nowrap; }
}

/* Guide index thumbnails (T-0312) */
.card-photo { padding: 0; overflow: hidden; }
.card-photo .card-thumb { display: block; }
.card-photo .card-thumb img { width: 100%; height: 150px; object-fit: cover; display: block; filter: saturate(0.92); }
.card-photo .h-row { padding: 0.85rem 1.1rem 1rem; margin: 0; }


/* Mobile utility bar: one clean row (T-0312 iPhone pass) */
.u-fact-short { display: none; }
@media (max-width: 640px) {
  .u-fact-full { display: none; }
  .u-fact-short { display: inline; white-space: nowrap; }
  .utility-bar .wrap { flex-direction: row; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.3rem 1.1rem; }
  .utility-bar .u-links a { padding: 0.55rem 0; margin-right: 0; }
  /* Hero: keep the display type off the screen edges */
  .hero-photo .hero-inner { padding-left: 1.1rem; padding-right: 1.1rem; }
  .h-hero { font-size: clamp(1.9rem, 8.2vw, 2.6rem); overflow-wrap: break-word; }

  /* Mobile QA pass (T-0312, 2026-08-06): .credit is absolutely positioned
     at the hero's bottom edge so it can float over the photo on desktop
     without pushing layout around. At mobile widths a 2-3 line lede (every
     state hub, several metro hubs) runs long enough to sit exactly where
     the credit line floats, so the two render on top of each other —
     confirmed on every /states/{state} page. Below this breakpoint, drop
     the credit out of absolute flow and stack it under the hero content
     instead; the hero's height simply grows to fit rather than risk any
     lede-length collision. */
  .hero-photo { flex-direction: column; align-items: stretch; }
  .hero-photo .credit {
    position: static; width: 100%; box-sizing: border-box;
    padding: 0.4rem 1.1rem 0.9rem; text-align: center;
  }
}