/* Golden State Weather — California signage design system
 *
 * Same bones as the rest of the Forecast Network (Forecast Eagle, Forecast Euro,
 * Forecast Canada, Forecast Waves): warm paper ground, Overpass, the same
 * util-bar / sign / rule / card / timeline components, so a reader who knows one
 * site can already use this one. What changes is the identity — and on this site,
 * two things that no sibling needs: a freemium lock, and a lot of geography.
 *
 * ── The colour ──────────────────────────────────────────────────────────────
 * The headline is **California Poppy** (#b4530f). The network's road colours are
 * all spoken for — Eagle's guide green, Euro's motorist blue, Canada's maple red,
 * Waves' deep-water teal — and orange was the one warm hue nobody had taken.
 * It also happens to be correct rather than merely available: the California
 * poppy is the state flower, and poppy-and-gold is the pairing California names
 * itself with. Held at #b4530f rather than a brighter orange because it has to
 * carry white body text — at that value it clears 5:1, comfortably past AA.
 *
 * The support colours are the state's own geography rather than a generic ramp:
 *   --gold     #f2b705  Golden State gold. The mark, the Pro lock, the accents.
 *   --pacific  #0b5273  the ocean, and every water/marine feature.
 *   --sierra   #2f6b45  the mountains, the snowpack, the forest.
 *   --desert   #9a6118  the Mojave and the Colorado Desert.
 * They are used *semantically*, not decoratively: a card about the coast is
 * pacific, a card about the crest is sierra. A reader learns the mapping in
 * about four seconds and it then does real work on a page with 18 regions on it.
 *
 * ── The mark ────────────────────────────────────────────────────────────────
 * The state outline, drawn in California Albers (EPSG:3310) — see
 * tools/build_outline.py for why the projection is not negotiable.
 */

:root {
  --paper: #e8e3d8;
  --card: #ffffff;
  --ink: #161616;
  --ink2: #4a463e;

  /* California Poppy — the headline. Nothing else competes with it. */
  --sign: #b4530f;
  --sign-dk: #8a3f0b;
  --sign-tx: #ffffff;
  --sign-sub: #f6d9a8;

  /* Golden State gold — the mark, the Pro lock, the emphasis. */
  --gold: #f2b705;
  --gold-dk: #a87d05;
  --gold-sub: #fdf0c9;

  /* The geography colours. Semantic, not decorative. */
  --pacific: #0b5273;
  --pacific-sub: #cfe2ee;
  --sierra: #2f6b45;
  --sierra-sub: #d3e6da;
  --desert: #9a6118;
  --desert-sub: #f0e0c6;
  --valley: #7a6a12;

  --line: #cbc6bb;
  --line2: #e5e1d8;
  --mut: #8a867c;
  --alert: #c0331a;

  /* Dark inset used for map and imagery panels */
  --figure: #0d1117;
  --figure-line: #26313f;

  --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; }
[hidden] { display: none !important; }

/* ── 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: 15px; flex-wrap: wrap; align-items: center; }
.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); }
.util a.pro-link { color: var(--gold); }
/* Group divider in the utility bar. Twelve destinations read as one wall of
   capitals without it; four clusters of two-to-three are scannable. Drawn
   rather than typed, for the same reason as `.sep` — see the note there. */
.util .navsep {
  display: inline-block; width: 1px; height: 11px; background: currentColor;
  opacity: .3; margin: 0 3px; vertical-align: -1px;
}
@media (max-width: 700px) { .util .navsep { display: none; } }

/* ── 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: 18px; flex-wrap: wrap; }
.signhead .statemark { width: 64px; height: 64px; flex: none; display: block; color: var(--gold); }
.signhead .statemark svg { width: 100%; height: 100%; 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(--gold); }
.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. Here it is a California
   state-route spade in spirit: label over figure over datum. */
.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; }
.mm.gold { background: var(--gold); border-color: var(--gold); color: #3a2a00; }
.mm.gold:hover { background: #fff; color: var(--sign); }

/* ── section rule header ──────────────────────────────── */
section { padding: 26px 0 4px; }
.rule { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.rule .ln {
  height: 3px; flex: 1; min-width: 30px;
  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;
}
.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; position: relative;
  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 .k { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--sign-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; }

/* The geography colours, applied to a card head. Semantic: a coastal region is
   pacific, a mountain region sierra, a desert region desert. */
.chead.pacific { background: var(--pacific); }  .chead.pacific .k { color: var(--pacific-sub); }
.chead.sierra  { background: var(--sierra); }   .chead.sierra .k  { color: var(--sierra-sub); }
.chead.desert  { background: var(--desert); }   .chead.desert .k  { color: var(--desert-sub); }
.chead.valley  { background: var(--valley); }   .chead.valley .k  { color: #f2edcf; }
.chead.gold    { background: var(--gold-dk); }  .chead.gold .k    { color: var(--gold-sub); }

.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 16px; box-shadow: 0 6px 22px rgba(0, 0, 0, .08);
}
.panel h3 { margin: 0 0 6px; font-size: 15px; font-weight: 900; }
.panel p { margin: 0; color: var(--ink2); font-size: 13.5px; font-weight: 600; line-height: 1.55; }

/* ── the "why" strip — a row of joined explainer cells ── */
.why {
  display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; box-shadow: 0 6px 22px rgba(0, 0, 0, .08);
}
.why > div { padding: 15px 16px; border-left: 1px solid var(--line2); }
.why > div:first-child { border-left: 0; }
.why h3 {
  margin: 0 0 5px; font-size: 14px; font-weight: 900; color: var(--sign);
  text-transform: uppercase; letter-spacing: .06em;
}
.why p { margin: 0; color: var(--ink2); font-size: 13px; font-weight: 600; line-height: 1.5; }

/* ── stat tiles ───────────────────────────────────────────
   Used wherever a page states a number that is the whole point of a paragraph —
   Bishop's 5.1 inches, Death Valley's 134°F. The value is set in the mono face at
   tabular figures so a column of them lines up on the decimal. */
.stats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--sign);
  border-radius: 6px; padding: 11px 13px; box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}
.stat .sv {
  font: 900 25px/1 var(--mono-font); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; display: block;
}
.stat .su { font-size: 12px; font-weight: 800; color: var(--mut); margin-left: 3px; }
.stat .sl {
  display: block; margin-top: 5px; font-size: 10px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--mut);
}
.stat .sn { display: block; margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--ink2); line-height: 1.4; }
.stat.pacific { border-left-color: var(--pacific); } .stat.pacific .sv { color: var(--pacific); }
.stat.sierra  { border-left-color: var(--sierra); }  .stat.sierra .sv  { color: var(--sierra); }
.stat.desert  { border-left-color: var(--desert); }  .stat.desert .sv  { color: var(--desert); }
.stat.alert   { border-left-color: var(--alert); }   .stat.alert .sv   { color: var(--alert); }

/* ── contact strip — a compact labelled list ──────────── */
.cont-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }
.cont {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--sign);
  border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
  transition: border-left-color .12s ease, transform .12s ease;
}
a.cont:hover { text-decoration: none; border-left-color: var(--gold); transform: translateY(-1px); }
.cont .cn { font-weight: 900; font-size: 15px; letter-spacing: -.01em; }
.cont .cb { font-size: 12.5px; font-weight: 600; color: var(--ink2); line-height: 1.4; }
.cont .cm { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--mut); margin-top: 2px; }

/* ── tables ───────────────────────────────────────────────
   Climate tables are wide by nature — twelve months plus an annual column — so
   the wrapper scrolls rather than letting the page do it. */
.twrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--card);
         box-shadow: 0 6px 22px rgba(0, 0, 0, .08); }
table.data { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.data th, table.data td { padding: 7px 10px; text-align: right; white-space: nowrap; }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data thead th {
  background: var(--sign); color: #fff; font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; position: sticky; top: 0;
}
table.data tbody tr { border-top: 1px solid var(--line2); }
table.data tbody tr:nth-child(even) { background: #faf8f4; }
table.data tbody tr:hover { background: var(--gold-sub); }
table.data td.num { font-family: var(--mono-font); font-variant-numeric: tabular-nums; font-weight: 700; }
table.data td.name { font-weight: 800; }
table.data caption { caption-side: bottom; padding: 9px 10px; font-size: 11px; font-weight: 600;
                     color: var(--mut); text-align: left; }

/* ── 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(--sign); color: #fff; border-color: var(--sign-dk); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-go { background: var(--sign); color: #fff; border-color: var(--sign-dk); font-weight: 900; letter-spacing: .06em; }
.btn-go:hover { background: var(--sign-dk); color: #fff; }
.btn-gold { background: var(--gold); color: #3a2a00; border-color: var(--gold-dk); font-weight: 900; letter-spacing: .05em; }
.btn-gold:hover { background: #ffc820; color: #3a2a00; }

select, input[type="text"], input[type="search"], input[type="email"] {
  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, a:focus-visible { outline: 2px solid var(--pacific); outline-offset: 1px; }
label { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }

/* Segmented control — one choice of a few. */
.seg { display: flex; flex-wrap: wrap; }
.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 9px; 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); }

/* ── badges ───────────────────────────────────────────── */
.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(--alert); color: #fff; }
.badge-soon { background: #efece5; color: var(--mut); border: 1px solid var(--line); }
.badge-free { background: var(--sierra); color: #fff; }
.badge-pro { background: var(--gold); color: #3a2a00; }

/* Separator dot — drawn, not typed.
 *
 * U+00B7 MIDDLE DOT is a **zero-advance glyph** in this build of Overpass:
 * `measureText('·')` returns 0, so the character renders directly on top of
 * whatever follows it and "WEATHER · Climate" comes out as "WEATHER ·Climate".
 * The glyph is present, so `document.fonts.check()` says yes and nothing looks
 * wrong until you read it at 3× zoom. Overpass Mono is unaffected — a monospace
 * face forces the advance — which is why the util bar was always fine and body
 * text was not.
 *
 * Drawing the dot in CSS sidesteps the font entirely and gives symmetric
 * margins that a glyph's own side bearings never guaranteed anyway. Use this
 * instead of a literal `·` anywhere outside `.mono`. */
.sep {
  display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; vertical-align: middle; margin: 0 .5em;
  opacity: .55; font-style: normal;
}

.dim { color: var(--ink2); }
.faint { color: var(--mut); }
.lede { font-size: 14.5px; font-weight: 600; color: var(--ink2); line-height: 1.6; }

/* ── the Pro lock ─────────────────────────────────────────
   Freemium done without lying to the reader. Three rules, and they are the whole
   design:

   1. A locked feature is always *visible* — labelled, described, and where it is
      a chart or a table, blurred rather than removed. A reader can see exactly
      what they would be paying for. Hiding it entirely and showing an upsell
      wall is how a site trains people to assume there is nothing behind it.
   2. Nothing free ever becomes locked. Everything the free tier shows today, it
      shows tomorrow. The Pro tier adds; it does not take away.
   3. The lock is cosmetic and the site says so. Gating in a static page is a
      courtesy fence, not a security boundary — the real check belongs on the
      server, and until that exists `pro.js` is honest about being client-side.
      See the header comment there. */
.locked { position: relative; }
.locked > .locked-body {
  filter: blur(5px) saturate(.55); opacity: .55; pointer-events: none;
  user-select: none; transition: filter .2s ease;
}
.locked > .lockplate {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 9px; text-align: center;
  padding: 18px; z-index: 3;
  background: linear-gradient(180deg, rgba(232,227,216,.35), rgba(232,227,216,.86));
  border-radius: inherit;
}
.lockplate .lk {
  display: inline-flex; align-items: center; gap: 6px; background: var(--gold);
  color: #3a2a00; border-radius: 3px; padding: 4px 10px;
  font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
}
.lockplate .lt { font-size: 14px; font-weight: 900; color: var(--ink); max-width: 40ch; }
.lockplate .ld { font-size: 12.5px; font-weight: 600; color: var(--ink2); max-width: 46ch; line-height: 1.45; }
.lockplate a.btn-gold { text-decoration: none; }

/* Inline lock chip, for a row in a list where blurring the whole panel is wrong. */
.pro-chip {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  background: var(--gold-sub); color: var(--gold-dk); border: 1px solid var(--gold);
  border-radius: 3px; padding: 1px 6px; font-size: 9.5px; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase;
}

/* When pro.js unlocks it sets [data-pro-state="on"] on <html> and this undoes all
   of it. The attribute is deliberately not `data-pro` — see the note in pro.js. */
:root[data-pro-state="on"] .locked > .locked-body { filter: none; opacity: 1; pointer-events: auto; user-select: auto; }
:root[data-pro-state="on"] .locked > .lockplate { display: none; }
:root[data-pro-state="on"] .pro-chip { background: var(--sierra-sub); color: var(--sierra); border-color: var(--sierra); }
:root[data-pro-state="on"] .pro-chip::after { content: " ✓"; }

/* ── pricing ──────────────────────────────────────────── */
.tiers { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.tier { background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
        box-shadow: 0 6px 22px rgba(0, 0, 0, .08); }
.tier.feature { border: 2px solid var(--gold); box-shadow: 0 10px 30px rgba(0, 0, 0, .14); }
.tier .thead { padding: 14px 16px; background: var(--sierra); color: #fff; }
.tier.feature .thead { background: var(--gold-dk); }
.tier .thead .tn { font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.tier .thead .tp { font: 900 32px/1.1 var(--font); letter-spacing: -.02em; margin-top: 4px; }
.tier .thead .tp small { font-size: 13px; font-weight: 700; opacity: .8; letter-spacing: 0; }
.tier .thead .tw { font-size: 12.5px; font-weight: 600; margin-top: 6px; opacity: .9; line-height: 1.45; }
.tier ul { list-style: none; margin: 0; padding: 12px 16px 16px; }
.tier li { font-size: 13px; font-weight: 600; color: var(--ink2); line-height: 1.45;
           padding: 6px 0 6px 22px; position: relative; border-top: 1px solid var(--line2); }
.tier li:first-child { border-top: 0; }
.tier li::before { content: "✓"; position: absolute; left: 2px; top: 6px; color: var(--sierra); font-weight: 900; }
.tier li.no { color: var(--mut); }
.tier li.no::before { content: "—"; color: var(--line); }
.tier .tfoot { padding: 0 16px 16px; }
.tier .tfoot .btn { width: 100%; padding: 10px; font-size: 13px; }

/* ── the map figure ───────────────────────────────────────
   A dark inset, because a map of California is mostly land and the paper ground
   would fight the fills. Same treatment the network uses for model imagery. */
.figure {
  background: var(--figure); border: 1px solid var(--figure-line); border-radius: 8px;
  overflow: hidden; box-shadow: 0 6px 22px rgba(0, 0, 0, .18); position: relative;
}
.figure svg { display: block; width: 100%; height: auto; }
.figure .fcap {
  padding: 8px 13px; border-top: 1px solid var(--figure-line); color: #9fb0c4;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.figure .fcap b { color: #dbe6f0; }

/* Region shapes inside the map figure */
/* Stroke widths are in projected metres, not pixels — the viewBox is in Albers
   metres, so 1,500 here is 1.5 km of map and scales with the figure. */
.camap .land { fill: #223047; stroke: #4a5f80; stroke-width: 1500; }
/* Region viewports carry a faint stroke rather than none. Invisible until
   hover made them undiscoverable — and the overlapping grid of eighteen frames
   is itself part of the story the map is telling, so it should be legible at
   rest and merely quiet. */
.camap .rgn { fill: transparent; stroke: rgba(242, 183, 5, .17); stroke-width: 900;
              cursor: pointer; transition: fill .12s, stroke .12s; }
.camap .rgn:hover { fill: rgba(242, 183, 5, .16); }
/* The active frame reads by its stroke, not by a wash: a heavy fill hid the
   coastline inside it, which is the one thing the reader came to look at. */
.camap .rgn.on { fill: rgba(242, 183, 5, .1); stroke: var(--gold); stroke-width: 2600; }
.camap .city { fill: var(--gold); }
.camap .citylabel { fill: #cfd9e4; font: 700 9px var(--font); }

/* ── seasons strip ────────────────────────────────────── */
.seasons { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.season { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 12px 13px;
          border-top: 4px solid var(--line); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.season.winter { border-top-color: var(--pacific); }
.season.spring { border-top-color: var(--sierra); }
.season.summer { border-top-color: var(--gold-dk); }
.season.autumn { border-top-color: var(--sign); }
.season h4 { margin: 0 0 5px; font-size: 11px; font-weight: 900; letter-spacing: .1em;
             text-transform: uppercase; color: var(--mut); }
.season p { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink2); line-height: 1.5; }


/* ── the newsroom ─────────────────────────────────────────
   A headline slot, a chronological river beneath it, and the article page they
   both lead to. The kind chip (explainer / outlook / notice) is not decoration:
   this desk publishes analysis and not event reports, and labelling every piece
   with which one it is keeps that promise visible on the page rather than only
   in the build script. See the header of tools/build_news.py. */

.lede-story {
  display: grid; gap: 0; grid-template-columns: minmax(0, 1fr);
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  border-top: 5px solid var(--sign);
}
.lede-story .ls-body { padding: 20px 22px 22px; }
.lede-story .ls-kicker {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 9px;
}
.lede-story h2 {
  margin: 0 0 9px; font-size: clamp(22px, 3.6vw, 33px); font-weight: 900;
  line-height: 1.12; letter-spacing: -.022em; color: var(--ink);
}
.lede-story h2 a { color: inherit; }
.lede-story .ls-dek {
  margin: 0 0 14px; font-size: clamp(14px, 1.7vw, 16.5px); font-weight: 600;
  color: var(--ink2); line-height: 1.5; max-width: 62ch;
}
.lede-story .ls-more { font-size: 13px; font-weight: 900; color: var(--sign); letter-spacing: .02em; }

.kind {
  display: inline-block; padding: 2px 8px; border-radius: 3px;
  font: 900 9.5px var(--mono-font); letter-spacing: .1em; text-transform: uppercase;
}
.kind-explainer { background: var(--pacific-sub); color: var(--pacific); }
.kind-outlook   { background: var(--gold-sub); color: var(--gold-dk); }
.kind-notice    { background: var(--sierra-sub); color: var(--sierra); }
.byline { font: 700 11px var(--mono-font); color: var(--mut); letter-spacing: .05em; }

/* The river — chronological, newest first. Dates carry a rule so the eye can
   find the sequence without reading every headline. */
.river { border-top: 1px solid var(--line); }
.river .story {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 18px;
  padding: 15px 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
@media (max-width: 620px) { .river .story { grid-template-columns: minmax(0, 1fr); } }
.river .st-date {
  font: 700 10.5px var(--mono-font); color: var(--mut); letter-spacing: .05em;
  text-transform: uppercase; padding-top: 4px; white-space: nowrap;
}
.river .st-main h3 { margin: 0 0 5px; font-size: 17.5px; font-weight: 900; line-height: 1.25; letter-spacing: -.012em; }
.river .st-main h3 a:hover { color: var(--sign); text-decoration: none; }
.river .st-dek { margin: 0 0 7px; font-size: 13.5px; font-weight: 600; color: var(--ink2); line-height: 1.5; max-width: 68ch; }
.river .st-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.river .st-sec { font: 700 10px var(--mono-font); letter-spacing: .07em; color: var(--sign); text-transform: uppercase; }

/* ── the article page ─────────────────────────────────── */
.article { max-width: 68ch; }
.article h1 {
  font-size: clamp(26px, 4.4vw, 40px); font-weight: 900; line-height: 1.1;
  letter-spacing: -.024em; margin: 0 0 12px;
}
.article .art-dek {
  font-size: clamp(15px, 2vw, 18px); font-weight: 600; color: var(--ink2);
  line-height: 1.5; margin: 0 0 16px;
}
.article .art-meta {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.article p { font-size: 16px; font-weight: 500; line-height: 1.68; color: #23211d; margin: 0 0 17px; }
.article h2 {
  font-size: 19px; font-weight: 900; letter-spacing: -.012em; color: var(--sign);
  margin: 28px 0 11px;
}
.article .art-note {
  background: #fff8f0; border-left: 4px solid var(--sign); border-radius: 0 6px 6px 0;
  padding: 13px 16px; margin: 0 0 17px;
}
.article .art-note p { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink2); line-height: 1.55; }
.article .art-related { margin-top: 30px; padding-top: 16px; border-top: 3px solid var(--sign); }
.article .art-related h3 {
  margin: 0 0 10px; font-size: 12px; font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mut);
}
.article .art-related a {
  display: inline-block; margin: 0 7px 7px 0; padding: 6px 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: 20px; font-size: 12.5px; font-weight: 800;
  color: var(--sign);
}
.article .art-related a:hover { background: var(--sign); color: #fff; border-color: var(--sign); text-decoration: none; }

/* ── footer ───────────────────────────────────────────── */
.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: #ded8cc;
}
.site-footer a { color: var(--pacific); font-weight: 800; }
.site-footer .fnet { margin-top: 10px; font-size: 11.5px; color: var(--mut); }

.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; }
}