/* Forecast Euro — European highway signage design system
 *
 * Same bones as weather.city and Forecast Eagle so the network reads as one thing:
 * warm paper ground, Overpass (the open metric-compatible cut of FHWA Highway
 * Gothic), and the same card/rule/shield components. What changes is the identity
 * colour, and the change is not arbitrary.
 *
 * The headline is **Rest Area Blue** — the MUTCD motorist-services blue that Forecast
 * Eagle uses only as a secondary. Promoting it here is what separates the two sites at
 * a glance, and it happens to be right for the subject: across most of Europe the
 * motorway sign *is* blue (autoroute, Autobahn, autopista, autostrada in all but Italy
 * and Croatia), where the American convention is green.
 *
 * Forecast Euro's own mark is the **E-road shield** — the pan-European route network,
 * green with white numerals, the one piece of road signage every country on the
 * continent shares. So the motif and the European identity are a single mark rather
 * than two competing ones, exactly as the Interstate shield works for Eagle. It is
 * also why green survives in this palette as an accent rather than being dropped: it
 * is doing a specific job.
 *
 * "Plenty of room for more flourish inside" — the accents below (E-road green, the
 * signage amber of European hazard boards, the deep navy of overhead gantries) are
 * there to be used in the explorer chrome, not saved for later.
 */

:root {
  --paper: #e6e2da;
  --card: #ffffff;
  --ink: #161616;
  --ink2: #4a463e;
  /* Rest Area Blue is the headline; the Eagle green is gone from this site entirely. */
  --sign: #0a5ca8;
  --sign-dk: #073f75;
  --sign-tx: #ffffff;
  --sign-sub: #cfe2f6;
  /* Saffron, from the flag. Used for the mark and for the one accent on a page —
     sparingly, because a page of orange headings reads as a warning banner. */
  --saffron: #ff6f1f;
  --saffron-dk: #d9550c;
  /* Kept under their old names: the shared components in assets/ still reference
     them, and renaming a token across nine files to change two swatches is not worth
     the churn. Both now point at the saffron. */
  --eroad: #ff6f1f;
  --eroad-dk: #d9550c;
  --blue: #0a5ca8;
  --navy: #103e7e;
  --blue-sub: #cfe2f6;
  --line: #c9c5bc;
  --line2: #e4e1d9;
  --mut: #8a867c;
  --shield-red: #c0331a;
  --amber: #f2ac14;

  /* Dark inset used for model/satellite imagery panels */
  --figure: #0a0e14;
  --figure-line: #223142;

  --font: 'Overpass', Helvetica, Arial, sans-serif;
  --mono-font: 'Overpass Mono', ui-monospace, monospace;
  --maxw: 1080px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

.mono { font-family: var(--mono-font); font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }
.wrap-wide { max-width: 1560px; margin: 0 auto; padding: 0 18px; }

/* ── thin utility bar ─────────────────────────────────── */
.util {
  background: var(--ink); color: #cfccc4; border-bottom: 3px solid var(--sign);
  position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 8px rgba(0, 0, 0, .22);
}
.util .bar {
  max-width: 1560px; margin: 0 auto; padding: 0 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 34px; flex-wrap: wrap;
}
.util .mono { font-size: 11px; letter-spacing: .06em; }
.util .lnks { display: flex; gap: 16px; flex-wrap: wrap; }
.util a { color: #e9e7e0; font-weight: 700; font-size: 11px; letter-spacing: .06em; }
.util a:hover { color: var(--sign-sub); text-decoration: none; }
.util a[aria-current="page"] { color: var(--sign-sub); }

/* ── the forecast on a place page ──────────────────────── */
/* Three blocks in one column: what it is doing now, the run as a picture, the run as a
   table. The picture is for the shape of the week and the table is for the number you
   came for, and a reader uses one or the other rather than both. */
.cp { margin-top: 6px; }
.cp-wait, .cp-fail { padding: 18px 0; font-size: 14px; font-weight: 600; opacity: .72; }

.cp-now-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 26px;
  padding: 14px 0 16px; border-bottom: 2px solid var(--line);
}
.cp-cell .k {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  opacity: .6; margin-bottom: 2px;
}
.cp-cell .v { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.cp-cell .v small { font-size: 14px; font-weight: 700; opacity: .6; }
.cp-run {
  margin-left: auto; font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; opacity: .55;
}

/* The chart is drawn at a fixed viewBox and stretched, so it keeps its proportions on a
   phone and its labels stay upright. `preserveAspectRatio: none` is why the type in it
   is set in the surrounding CSS rather than scaled with the drawing. */
.cp-chart { width: 100%; height: 230px; display: block; margin: 16px 0 4px; overflow: visible; }
.cp-grid { stroke: var(--line2); stroke-width: 1; }
.cp-day { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.cp-line { fill: none; stroke: #d24a17; stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cp-bar { fill: #3d8fd4; opacity: .78; }
.cp-now { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.cp-ylab, .cp-dlab, .cp-rlab {
  font-size: 11px; font-weight: 700; fill: var(--ink); opacity: .62;
}
.cp-ylab { text-anchor: end; }
.cp-rlab { fill: #3d8fd4; opacity: .85; }

.cp-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.cp-table th {
  text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; opacity: .6; padding: 6px 8px; border-bottom: 2px solid var(--line);
}
.cp-table td { padding: 7px 8px; border-bottom: 1px solid var(--line2); }
.cp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.cp-table tbody tr:hover { background: rgba(10, 92, 168, .05); }
.cp-d { white-space: nowrap; }
.cp-hi { font-weight: 800; color: #c2410c; }
.cp-lo { color: #1d4ed8; }
.cp-g { font-size: 11.5px; opacity: .6; }
/* Marked only where humidity is doing real work — three degrees or more
   above the air temperature. On a dry May day in Rajasthan the heat index
   is below the temperature and saying so in red would be alarmism. */
.cp-feels { font-weight: 800; color: #b91c1c; }
.cp-foot { font-size: 12px; opacity: .68; margin-top: 12px; max-width: 66ch; }

@media (max-width: 620px) {
  .cp-now-row { gap: 16px; }
  .cp-cell .v { font-size: 24px; }
  .cp-run { margin-left: 0; width: 100%; }
}

/* ── the place search, in the masthead ─────────────────── */
/* Sized to the bar rather than to the page: the masthead is 34px of dark rule on every
   page of the site, and a search box that changes its height changes the site's one
   constant. The results hang below it as an overlay so nothing under them reflows. */
.sitesearch { position: relative; display: flex; align-items: center; }
.sitesearch input {
  font: 600 11px/1 var(--sans, system-ui, sans-serif); letter-spacing: .04em;
  color: #f2f0ea; background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 4px;
  padding: 5px 8px; width: 168px; min-height: 22px;
  transition: width .16s ease, background .16s ease;
}
.sitesearch input::placeholder { color: #a8a49a; }
.sitesearch input:focus {
  outline: none; width: 250px;
  background: rgba(255, 255, 255, .16); border-color: var(--sign-sub);
}
.sitesearch input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }

.qres {
  position: absolute; top: calc(100% + 5px); right: 0; z-index: 200;
  min-width: 280px; max-width: 380px;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line, #d8d4cc); border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22); overflow: hidden;
}
.qhit {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 11px; border-bottom: 1px solid var(--line2, #eceae4);
  color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none;
}
.qhit:last-child { border-bottom: 0; }
.qhit.on, .qhit:hover { background: var(--sign, #0a5ca8); color: #fff; text-decoration: none; }
.qhit .qn b { color: var(--sign, #0a5ca8); }
.qhit.on .qn b, .qhit:hover .qn b { color: #fff; }
/* The state or the kind, on the right: the disambiguator, not the answer. Five slugs
   are both a state and a subdivision of the same name, so "Bihar" legitimately returns
   two rows and this column is the only thing that tells them apart. */
.qhit .qs { font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
            text-transform: uppercase; opacity: .62; white-space: nowrap; }
.qnone { padding: 8px 11px; font-size: 12px; font-weight: 600; opacity: .7; }

@media (max-width: 720px) {
  .sitesearch input { width: 120px; }
  .sitesearch input:focus { width: 170px; }
}

/* ── guide sign panel ─────────────────────────────────── */
.sign {
  background: var(--sign); border-radius: 10px; color: var(--sign-tx);
  padding: 26px 24px 24px; position: relative;
  box-shadow: inset 0 0 0 4px var(--sign), inset 0 0 0 6px rgba(255, 255, 255, .9),
              0 10px 30px rgba(0, 0, 0, .16);
}
.sign a { color: #fff; }
.signhead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.signhead img { width: 62px; height: 62px; flex: none; display: block; }
.word {
  font-weight: 900; font-size: clamp(28px, 5.4vw, 50px); line-height: .92;
  letter-spacing: -.02em; margin: 0;
}
.word .yl { color: var(--sign-sub); }
.tag {
  margin: 8px 0 0; font-weight: 700; font-size: clamp(13px, 2.2vw, 16px);
  color: var(--sign-sub); letter-spacing: .01em;
}

/* Route shield marker, as used on real guide signs */
.shield {
  border: 2.5px solid #fff; border-radius: 6px; padding: 5px 10px 6px;
  text-align: center; line-height: 1; flex: none; display: inline-block;
}
.shield .a { font-size: 8px; font-weight: 700; letter-spacing: .16em; color: var(--sign-sub); }
.shield .b { font-size: 20px; font-weight: 900; letter-spacing: .04em; display: block; }
.shield .c { font-size: 8px; font-weight: 700; letter-spacing: .12em; color: var(--sign-sub); }

/* Exit-style chips */
.exits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; align-items: center; }
.exits .lbl { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--sign-sub); }
.mm {
  background: rgba(255, 255, 255, .1); border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: 5px; padding: 6px 12px; font-family: inherit; font-weight: 700;
  font-size: 12px; letter-spacing: .03em; cursor: pointer; color: #fff;
}
.mm:hover { background: #fff; color: var(--sign); text-decoration: none; }

/* ── section rule header ──────────────────────────────── */
section { padding: 26px 0 4px; }
.rule { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.rule .ln {
  height: 3px; flex: 1;
  background: repeating-linear-gradient(90deg, var(--sign) 0 18px, transparent 18px 34px);
}
.rule h2 {
  margin: 0; color: var(--sign); font-size: 15px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .12em; white-space: nowrap;
}
.rule .sub { color: var(--mut); font-size: 11px; font-weight: 700; letter-spacing: .06em; }

/* ── cards ────────────────────────────────────────────── */
.card-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 0; overflow: hidden; display: block; color: inherit;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .08); transition: transform .14s, box-shadow .14s;
}
a.card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .13); text-decoration: none; }
.card .chead {
  background: var(--sign); color: #fff; padding: 9px 14px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.card .chead.blue { background: var(--blue); }
.card .chead .k { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--sign-sub); }
.card .chead.blue .k { color: var(--blue-sub); }
.card .cbody { padding: 14px; }
.card h3 { margin: 0 0 5px; font-size: 17px; font-weight: 900; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--ink2); font-size: 13.5px; font-weight: 600; line-height: 1.5; }

.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 16px; box-shadow: 0 6px 22px rgba(0, 0, 0, .08);
}

/* ── controls ─────────────────────────────────────────── */
.btn {
  cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink2);
  border-radius: 3px; font-family: var(--font); font-weight: 700; font-size: 11.5px;
  letter-spacing: .02em; padding: 7px 12px; line-height: 1.3;
}
.btn:hover { border-color: var(--sign); color: var(--ink); }
.btn.on, .btn[aria-pressed="true"] { background: var(--blue); color: #fff; border-color: #08488a; }
.btn:disabled { opacity: .5; cursor: default; }

/* Two questions, two signs. A field button lit blue and a place button lit green is
   the site's own signage distinction — the same one the guide sign and the exit sign
   make — and it survives the move to the shared explorer chrome, which knows only that
   both are `.btn.on`. Field and place are the two controls a reader uses constantly and
   the two it is most annoying to confuse, so they are told apart by colour and not only
   by position. */
.field-btn.on { background: var(--sign); color: #fff; border-color: var(--sign-dk); }
.sector-btn.on, .region-btn.on { background: var(--eroad); color: #fff; border-color: var(--eroad-dk); }
.btn-go { background: var(--blue); color: #fff; border-color: #08488a; font-weight: 900; letter-spacing: .06em; }
.btn-go:hover { background: #0b6bc4; color: #fff; }

select, input[type="text"], input[type="search"] {
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  border-radius: 3px; padding: 6px 9px; font-family: var(--font);
  font-weight: 700; font-size: 12px;
}
select:focus, input:focus, .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

label { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }

/* ── timeline ─────────────────────────────────────────────
   Transport, scrubber and a UTC tick strip, in one card under the map. Shared by
   every model viewer (see assets/maptimeline.js), because a forecast loop is a
   forecast loop whether the frames are RRFS quarter-hours or NDFD forecast days.

   The range is index-based, so every frame gets equal width and the thumb always
   lands on one, and ticks are drawn on frames rather than at arbitrary clock times.
   Labels therefore thin out across a run exactly where its cadence coarsens. */
.timeline {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 14px 9px; box-shadow: 0 6px 22px rgba(0, 0, 0, .08);
}
.tl-side { display: flex; flex-direction: column; gap: 5px; }
.tl-lab { font-size: 9px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mut); }
.tl-transport { display: flex; align-items: center; gap: 5px; }
.tl-track { flex: 1 1 340px; min-width: 240px; display: flex; flex-direction: column; }
.tl-track input[type="range"] { width: 100%; margin: 0; accent-color: var(--sign); }
/* Inset by half a thumb so the first and last ticks sit under the thumb's travel,
   not under the ends of the groove the thumb never reaches. */
.tl-ticks { position: relative; height: 23px; margin: 3px 9px 0; pointer-events: none; }
.tl-ticks .tk { position: absolute; top: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; }
.tl-ticks .tk.at-start { transform: translateX(-2px); align-items: flex-start; }
.tl-ticks .tk.at-end { transform: translateX(calc(-100% + 2px)); align-items: flex-end; }
.tl-ticks .tk i { width: 1px; height: 5px; background: var(--line); display: block; }
.tl-ticks .tk span { font: 700 8.5px var(--mono-font); color: var(--mut);
  white-space: nowrap; line-height: 1; margin-top: 3px; letter-spacing: .02em; }
/* The tick that opens each forecast day carries the date and the signage green;
   the hours within that day are hairlines. */
.tl-ticks .tk.day i { height: 9px; width: 2px; background: var(--sign); }
.tl-ticks .tk.day span { color: var(--ink2); font-weight: 800; }
/* Buffer fill. Sits between the scrubber and the tick strip, so the thing that says
   "the loop is ready" is directly under the thing you drag. It fades out once full
   rather than staying as chrome nobody needs. */
.tl-buffer { height: 2px; margin: 2px 9px 0; border-radius: 2px; background: var(--line2);
  overflow: hidden; transition: opacity .4s ease .3s; }
.tl-buffer::before { content: ""; display: block; height: 100%; width: var(--pct, 0%);
  background: var(--sign); transition: width .15s linear; }
.tl-buffer.is-full { opacity: 0; }
.tl-ends { display: flex; justify-content: space-between; gap: 10px;
  font: 700 9.5px var(--mono-font); color: var(--mut); letter-spacing: .02em; }
.tl-count { font: 900 13px var(--mono-font); color: var(--ink); }
.tl-hint { margin-top: 7px; font-size: 11px; font-weight: 700; color: var(--mut); }

/* ── buffer policy chrome ──────────────────────────────────
   New with the converged maptimeline.js. The buffer bar's dashed tail is the part of
   the run deliberately not fetched (see Timeline.buffer); LOAD ALL beside the frame
   counter fetches it, and says what that costs. The button is created by the module,
   so there is no markup for it here — only these rules. */
.tl-buffer { position: relative; }
.tl-buffer.is-held::after {
  content: ""; position: absolute; right: 0; top: 0; height: 100%; width: var(--held, 0%);
  background: repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 6px);
}
.tl-load { font-size: 10px; padding: 4px 8px; margin-top: 4px; letter-spacing: .06em;
           font-family: var(--mono-font); white-space: nowrap; }
.tl-load:hover { border-color: var(--sign); color: var(--sign); }


/* Segmented control — the speed menu, and anything else that is one choice of a few */
.seg { display: flex; }
.seg button { font: 700 11px var(--mono-font); background: var(--card); color: var(--ink2);
  border: 1px solid var(--line); border-left-width: 0; padding: 5px 8px; cursor: pointer; }
.seg button:first-child { border-left-width: 1px; border-radius: 4px 0 0 4px; }
.seg button:last-child { border-radius: 0 4px 4px 0; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--sign); color: #fff; border-color: var(--sign); }
.seg button:disabled { cursor: not-allowed; }
/* A segment the active model or cycle cannot drive at all. Greyed as a block rather
   than hidden: a control that quietly vanishes reads as a bug, one that is greyed out
   reads as an answer, and a control strip that changes length as you switch models is
   disorienting. */
.seg.unavailable { opacity: .35; }
.seg.unavailable button { cursor: not-allowed; text-decoration: line-through;
  text-decoration-thickness: 1px; }

/* ── misc ─────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 3px;
  font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.badge-live { background: var(--sign); color: #fff; }
.badge-new { background: var(--shield-red); color: #fff; }
.badge-soon { background: #efece5; color: var(--mut); border: 1px solid var(--line); }
/* Experimental: the signage amber of a European hazard board, which is exactly the
   register wanted — this is not "coming soon" (that is `badge-soon`, and it is grey
   because nothing is being claimed yet) and not "live" either. Dark ink on amber
   rather than white, because amber is a light ground and the pair has to stay
   legible next to a page title. */
.badge-exp { background: var(--amber); color: #3a2a00; }

/* An experimental model's chip — the Mercator viewer's Model picker and the polar
 * explorer's, which use `.field-btn` and `.sector-btn` respectively, so this keys off
 * the `.btn` both share. It lives here rather than in explorer.css because polar.html
 * loads only this stylesheet, and a marking that appears on one page and not the other
 * is worse than none: a reader would reasonably conclude the unmarked one is vetted.
 *
 * A dotted underline rather than a colour or a badge: the chips sit in a row where
 * colour already means "this is the one you are looking at", and a badge would make the
 * row reflow. Dotted is the long-standing typographic convention for "there is a caveat
 * here", and it survives the `.on` state — which matters, because the warning is most
 * needed on the model actually being drawn, not least. */
.btn.experimental, .lseg.experimental {
  text-decoration: underline dotted currentColor 1.5px; text-underline-offset: 3px;
}

.dim { color: var(--ink2); }
.faint { color: var(--mut); }

.site-footer {
  border-top: 3px solid var(--sign); margin-top: 44px; padding: 18px 0 34px;
  color: var(--ink2); font-size: 12px; font-weight: 600; background: #ddd8ce;
}
.site-footer a { color: var(--navy); font-weight: 800; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--sign); color: #fff;
  padding: 9px 14px; z-index: 200; font-weight: 800;
}
.skip:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── wind overlay and its options ─────────────────────────────
   The overlay is its own canvas above the map, because a streamline animation
   composites frame to frame and must not be cleared by MapLibre's own redraw. */
#wind-overlay { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

/* The `hidden` attribute is a promise the HTML makes, and a layout rule as ordinary as
   `.toolbar .group > div { display: flex }` outranks it on specificity and quietly
   breaks it. Restore it once, globally, rather than per component. */
[hidden] { display: none !important; }

/* Sub-controls of the wind mode segment, styled as subordinate to it: indented under a
   rule, smaller labels, and absent outright when the mode has nothing for them. */
.wind-opts { display: flex; flex-direction: column; gap: 5px; margin-top: 6px;
             padding-left: 9px; border-left: 2px solid var(--line2, var(--line)); }
.wind-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wind-opt label { font-size: 9px; letter-spacing: .09em; }
.wind-opt select { padding: 3px 5px; font-size: 11px; font-weight: 700; min-width: 92px; }


/* ==========================================================================
   Static pages — the front page, the regions, the states and the places.
   The two viewers are laid out by explorer.css and legacy.css; everything the
   page generator emits is styled here.
   ========================================================================== */

.page { max-width: var(--maxw); margin: 0 auto; padding: 22px 18px 60px; }

.page section { margin: 34px 0; }
.page h2 {
  font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink2); border-bottom: 2px solid var(--line);
  padding-bottom: 6px; margin: 0 0 14px;
}
.page h3 { font-size: 17px; margin: 0 0 4px; }
.page h3 a { color: var(--navy); text-decoration: none; }
.page h3 a:hover { text-decoration: underline; }

/* --- The masthead block ------------------------------------------------- */
.hero { padding: 26px 0 18px; border-bottom: 3px solid var(--sign); }
.hero.small { padding: 16px 0 14px; border-bottom-width: 2px; }
.hero h1 { font-size: 34px; line-height: 1.1; margin: 8px 0 6px; letter-spacing: -.01em; }
.hero.small h1 { font-size: 26px; }
.lede { font-size: 17px; line-height: 1.5; color: var(--ink2); max-width: 62ch; margin: 0 0 10px; }
.meta { font-size: 13px; color: var(--mut); margin: 0 0 10px; font-variant-numeric: tabular-nums; }
.cta { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.btn.big { font-weight: 700; background: var(--sign); color: var(--sign-tx); border-color: var(--sign-dk); }
.btn.big:hover { background: var(--sign-dk); }

/* --- Chip lists: states, subdivisions, regions ---------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips.wide { gap: 6px 6px; }
.chip {
  display: inline-block; padding: 5px 10px; font-size: 13px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 3px; color: var(--navy); text-decoration: none;
  white-space: nowrap;
}
.chip:hover { border-color: var(--sign); background: var(--blue-sub); }

/* --- A region on the front page ------------------------------------------ */
.region-card {
  background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--saffron);
  border-radius: 4px; padding: 14px 16px; margin: 0 0 12px;
}
.region-card p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--ink2); max-width: 74ch; }

/* --- The place table ------------------------------------------------------
   Population and elevation are figures to compare down a column, so they are
   tabular and right-aligned. "On the list as" is why the place is here at all,
   and it is deliberately quiet: it explains the row rather than ranking it. */
table.places { width: 100%; border-collapse: collapse; font-size: 14px; }
table.places th {
  text-align: left; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--mut); border-bottom: 2px solid var(--line); padding: 6px 8px;
}
table.places td { padding: 6px 8px; border-bottom: 1px solid var(--line2); }
table.places tr:hover td { background: var(--card); }
table.places td.num, table.places th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.places td.why { color: var(--mut); font-size: 12px; }
table.places a { color: var(--navy); text-decoration: none; }
table.places a:hover { text-decoration: underline; }

/* --- Breadcrumbs and footer ---------------------------------------------- */
.crumbs { font-size: 13px; color: var(--mut); margin: 0 0 4px; }
.crumbs a { color: var(--navy); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.foot {
  max-width: var(--maxw); margin: 0 auto; padding: 18px;
  border-top: 1px solid var(--line); font-size: 12px; color: var(--mut);
}
.foot a { color: var(--navy); }

@media (max-width: 640px) {
  .hero h1 { font-size: 27px; }
  table.places td.why, table.places th:last-child { display: none; }
}