/* ============================================================================
   PROSE — the reading layer.

   One stylesheet for every page whose job is to be READ rather than operated:
   the legal pages today, generated articles next. It exists because the 17 SEO
   articles each carry a 290-609 line <style> block of their own, so the reading
   design drifts between them and a brand change has to be swept 17 times.

   It owns typography, measure and rhythm only. Page-specific furniture (an
   article hero, a stat callout) layers on top and never re-states these.
   Colour comes from base.css tokens exclusively — nothing here is a literal.
   ============================================================================ */

/* base.css is a TOKEN file — it styles no html or body element anywhere, so every page on
   this site paints its own ground in its own <style> block. A page that carries no inline
   style has nothing painting it, and renders as near-white text on the browser's white
   default. These four declarations are that paint, and they belong here rather than in each
   prose page, which is the entire point of having this stylesheet. */
/* Every hand-written page on this site opens its inline <style> with this reset; base.css does
   not carry it. Without it the drawer's `max-height:0` still leaves its 32px of padding on
   screen as a sliver under the nav, because max-height bounds the CONTENT box only. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Fifth thing carried by every page's inline block rather than by base.css. Without it the
   browser default underlines every link the chrome injects — the whole footer, and the nav. */
a { color: inherit; text-decoration: none; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  /* PROPORTIONAL figures in running text, deliberately.

     Tabular figures exist so digits line up in a COLUMN. In a sentence they give every digit
     -- and, in this face, the punctuation around it -- a fixed advance, so "once, in 1998."
     sets with a full digit-width gap before the comma and before the full stop. On a reading
     page that is the difference between typeset and generated: the headline read
     "Drought : Is This" with a space in front of the colon.

     Tabular is switched back on below, only where things actually stack. */
  font-variant-numeric: proportional-nums;
}

/* Where digits DO align, and so want a fixed advance: the big stat figure, any table of
   numbers, and the date/read-time line that sits in a consistent position on every article. */
.art-stat-val,
.prose-table,
.prose-dates,
.prose code,
.prose pre { font-variant-numeric: tabular-nums; }

/* The synced nav CSS only SHOWS the hamburger below 600px; the display:none default that
   keeps it off a desktop lives in each page's own rules, so a generated page needs it here
   or the bar renders a stray dash beside the Sign in pill at every width. */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px; height: 40px;
  margin-left: auto;
  cursor: pointer;
  background: none; border: none;
  gap: 5px;
  position: relative;
  z-index: 101;
}
.nav-hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
nav.menu-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.menu-open .nav-hamburger span:nth-child(2) { opacity: 0; }
nav.menu-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-hamburger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .nav-hamburger span { transition: none; } }

/* ── mobile nav drawer ──────────────────────────────────────────────────────
   The synced nav CSS styles the bar and the links inside the drawer, but not the
   drawer itself — every hand-written page carries those rules locally. A generated
   page has nowhere to carry them, so they live here. Behaviour matches the homepage
   exactly: hidden by max-height, revealed by .open, driven by assets/js/drawer.js. */
.nav-drawer {
  position: fixed;
  top: 68px; left: 0; right: 0;
  z-index: 99;
  background: var(--surface);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--border);
  padding: 12px 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .38s cubic-bezier(.22,1,.36,1), opacity .28s ease;
}
.nav-drawer.open {
  max-height: calc(100vh - 68px);
  overflow-y: auto;
  opacity: 1;
  pointer-events: auto;
}
.nav-drawer a {
  font-size: 15px; font-weight: 500; letter-spacing: .06em;
  color: var(--text-muted);
  padding: 10px 0;
  width: 100%; text-align: center;
  transition: color .2s;
}
.nav-drawer a:hover { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .nav-drawer { transition: none; } }

.prose-page {
  /* ONE width for the whole article: headline, body, hero, stat, quote.

     It was two -- an 880px column with 704px paragraphs inside it -- and a 25% difference
     reads as a mistake rather than as a device. It is one: a headline that overhangs its own
     body copy by four words a line has no reason to.

     In REM, not CH. A ch resolves against the font-size of the element USING the token, not
     the one declaring it, so the same value gave .prose (17px) 915px and the hero <figure>
     (16px) 861px -- two widths out of one number.

     50rem at 19px is about 84 characters. Longer than the classical 45-75, which assumes
     tighter leading than the 1.72 set below; at this size and this line-height it reads as
     generous rather than as a slog, and it is the width the page was asking for. */
  --measure: 50rem;
  /* --page-pad is declared per page rather than in base.css, so this does not borrow it. */
  padding: calc(var(--nav-h, 64px) + 56px) clamp(20px, 4vw, 32px) 96px;
}

.prose-head {
  max-width: var(--measure);
  margin: 0 auto 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--border);
}

.prose-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.prose-head h1 {
  font-size: clamp(33px, 4.9vw, 48px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text);
  text-wrap: balance;
  margin: 0 0 16px;
}

.prose-lede {
  font-size: 19px;
  line-height: 1.56;
  color: var(--text-muted);
  margin: 0;
}

/* Updated / effective dates. On a legal page this is not decoration — it is the
   thing a reader checks first, so it gets the mono face and its own row. */
.prose-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-faint);
}
.prose-dates b { color: var(--text-muted); font-weight: 500; }

.prose {
  max-width: var(--measure);
  margin: 0 auto;
  /* 18px. It was 17, went to 19 to get off "reads like a blog", and came back a step because
     19 was doing more than the page needed -- large enough to feel set, not so large that the
     column has to be re-cut around it. Leading tightens very slightly with the size. */
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--text-muted);
}

.prose > * + * { margin-top: 18px; }

/* No separate line width any more -- everything uses the column. See --measure. */

.prose h2 {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
  text-wrap: balance;
  margin-top: 52px;
  /* scroll-margin so an anchored link does not land the heading under the nav. */
  scroll-margin-top: calc(var(--nav-h, 64px) + 24px);
}
.prose h3 {
  font-size: 18.5px;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--text);
  margin-top: 32px;
  scroll-margin-top: calc(var(--nav-h, 64px) + 24px);
}
.prose h2 + p, .prose h3 + p { margin-top: 10px; }

.prose strong { color: var(--text); font-weight: 600; }

.prose a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  transition: border-color .18s ease;
}
.prose a:hover { border-bottom-color: var(--accent); }

.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 9px; }
.prose li::marker { color: var(--text-faint); }

.prose code {
  font-family: var(--mono);
  font-size: .88em;
  padding: 1px 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--text);
}

.prose blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 2px 0 2px 20px;
  border-left: 2px solid var(--accent);
  color: var(--text);
}

/* A wide table on a phone must scroll inside its own box — the page body never
   scrolls sideways. Standing rule in this project, and the reason /model broke. */
.prose-table {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.prose-table table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 15px; }
.prose-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 11px 15px;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.prose-table td {
  padding: 11px 15px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text-muted);
}
.prose-table tr:last-child td { border-bottom: 0; }
.prose-table td:first-child { color: var(--text); font-weight: 500; }

/* A short table of contents. Legal pages are navigated, not read start to end. */
.prose-toc {
  max-width: var(--measure);
  margin: 0 auto 46px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.prose-toc h2 {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.prose-toc ol {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 28px;
  font-size: 14.5px;
}
.prose-toc li { margin-bottom: 7px; break-inside: avoid; }
.prose-toc a { color: var(--text-muted); text-decoration: none; }
.prose-toc a:hover { color: var(--accent); }

/* A callout for the one paragraph on the page a reader must not miss — the betting
   disclaimer, the refund window. Used sparingly or it stops working.

   Deliberately NOT an accent rail down the left edge. That device is the single most
   recognisable tell of generated design, and it also says nothing: the bar is the same
   whatever the box contains. This lifts the surface instead and puts a 1px highlight along
   the top edge, which is how every other raised object on this site is built, and lets the
   bold opening sentence carry the emphasis. */
.prose-note {
  padding: 22px 24px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 4%, transparent), transparent 58%),
    var(--surface-raised, var(--surface));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent) inset,
              0 18px 34px -28px rgba(0,0,0,.8);
  color: var(--text);
  font-size: 16px;
}
.prose-note > * + * { margin-top: 12px; }

@media (max-width: 640px) {
  .prose-page { padding-top: calc(var(--nav-h, 64px) + 34px); }
  .prose { font-size: 16.5px; line-height: 1.66; }
  .prose-toc ol { columns: 1; }
}