/* site.css — shared styling for the content pages (About, etc.). Self-contained
   so a page is one request and never depends on the app shell. The palette is a
   mirror of the design tokens in forecast.php (kept in sync by hand; the app
   shell inlines its own copy so it works offline in the field). */
:root {
  --bg:#0a0d13; --panel:#141a27; --inset:#0d1320;
  --line:#263149; --line-bright:#3a4866;
  --ink:#e2e7f2; --dim:#7c87a0;
  --beacon:#ffb454;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.65 var(--sans);
  background-image:
    radial-gradient(1px 1px at 20% 30%, #ffffff14 50%, transparent 50%),
    radial-gradient(1px 1px at 70% 60%, #ffffff10 50%, transparent 50%),
    radial-gradient(1px 1px at 45% 85%, #ffffff0d 50%, transparent 50%);
  background-attachment: fixed;
}

/* header — matches the app shell's eyebrow/title treatment */
header {
  padding: 22px 28px 18px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.logo { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 10px; display: block; object-fit: contain; }
.eyebrow { font: 600 10px/1 var(--mono); letter-spacing: 2.5px; text-transform: uppercase; color: var(--beacon); }
header h1 { margin: 2px 0 0; font-size: 23px; font-weight: 650; letter-spacing: -0.4px; color: var(--ink); }
header nav { margin-left: auto; display: flex; gap: 18px; align-items: baseline; }
header nav a { font: 600 12px var(--sans); color: var(--dim); text-decoration: none; }
header nav a:hover, header nav a[aria-current="page"] { color: var(--beacon); }

/* prose container */
main.prose { max-width: 70ch; margin: 0 auto; padding: 32px 28px 64px; }
main.prose h2 { font-size: 17px; font-weight: 650; letter-spacing: -0.2px; margin: 34px 0 10px; color: var(--ink); }
main.prose h2:first-child { margin-top: 6px; }
main.prose p { margin: 0 0 14px; color: #cdd5e6; }
main.prose a { color: var(--beacon); text-decoration: none; border-bottom: 1px solid #ffb45455; }
main.prose a:hover { border-bottom-color: var(--beacon); }
main.prose ul { margin: 0 0 14px; padding-left: 20px; color: #cdd5e6; }
main.prose li { margin: 0 0 7px; }
main.prose code { font: 13px var(--mono); background: var(--inset); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
main.prose .lede { font-size: 16px; color: var(--ink); }
main.prose .muted { color: var(--dim); font-size: 13px; }
main.prose sup a { border: 0; font-size: 11px; padding: 0 1px; }
main.prose ol.refs { list-style: decimal; padding-left: 22px; font-size: 13px; color: var(--dim); margin-top: 4px; }
main.prose ol.refs li { margin: 0 0 9px; }
main.prose ol.refs a { color: var(--dim); border-bottom-color: #ffb45433; }
main.prose ol.refs a:hover { color: var(--beacon); }
main.prose ol.refs li:target { color: var(--ink); }

footer {
  border-top: 1px solid var(--line); padding: 18px 28px; color: var(--dim);
  font: 12px/1.6 var(--sans); display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline;
}
footer a { color: var(--dim); text-decoration: none; }
footer a:hover { color: var(--beacon); }
footer .spacer { margin-left: auto; }