/* Lumen Ridge Lakehouse: field-notebook layout; ink on paper, copper accent, one reading column */
:root {
  --paper: #F7F5F0; --card: #FFFFFF; --ink: #1D2430; --muted: #5C6573; --rule: #D9D4C7;
  --copper: #B4532A; --copper-soft: #F6E5DA; --teal: #1F6F6A; --teal-soft: #DDEFEC; --slate: #3F4E66; --slate-soft: #E3E8F1;
  --bad: #A8322D; --bad-soft: #F7E0DE;
  --display: "Fraunces", Georgia, serif; --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --mono: "IBM Plex Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) { :root {
  --paper: #14171C; --card: #1C2128; --ink: #E7E3DA; --muted: #A2A9B4; --rule: #333A44;
  --copper: #E08A5F; --copper-soft: #3A2419; --teal: #5CC2B8; --teal-soft: #15302D; --slate: #9DB0D0; --slate-soft: #1E2738;
  --bad: #F08A84; --bad-soft: #3A1E1C; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.65 var(--body); }
a { color: var(--copper); }
.wrap { max-width: 980px; margin: 0 auto; padding: 32px max(18px, env(safe-area-inset-left)) 72px max(18px, env(safe-area-inset-right)); }
nav.top { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline; border-bottom: 1px solid var(--rule); padding-bottom: 12px; margin-bottom: 36px; font-size: 15px; }
nav.top .brand { font: 600 19px var(--display); color: var(--ink); text-decoration: none; margin-right: auto; }
nav.top a { text-decoration: none; }
h1 { font: 600 clamp(34px, 6vw, 56px)/1.08 var(--display); margin: 0 0 14px; text-wrap: balance; letter-spacing: -0.01em; }
h2 { font: 600 30px/1.2 var(--display); margin: 56px 0 12px; text-wrap: balance; }
h3 { font: 600 19px/1.3 var(--body); margin: 28px 0 8px; }
p, li { max-width: 68ch; }
.kicker { font: 600 12.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--copper); }
.lede { font-size: 20px; color: var(--muted); max-width: 60ch; }
.figure { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 18px; margin: 22px 0; overflow-x: auto; }
.figure figcaption { font-size: 14px; color: var(--muted); margin-top: 10px; }
.figure svg text { font-family: var(--body); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 26px 0; }
.fact { background: var(--card); border-top: 3px solid var(--copper); padding: 14px 16px; }
.fact b { display: block; font: 600 28px var(--display); }
.fact span { font-size: 14px; color: var(--muted); }
table { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
td.n { text-align: right; font-family: var(--mono); font-size: 14px; white-space: nowrap; }
.toc { columns: 2 260px; padding-left: 20px; }
.toc li { margin-bottom: 6px; }
.callout { border-left: 4px solid var(--teal); background: var(--teal-soft); padding: 12px 16px; margin: 18px 0; border-radius: 0 6px 6px 0; }
.callout.warn { border-color: var(--bad); background: var(--bad-soft); }
code { font: 14px var(--mono); background: var(--slate-soft); padding: 1px 5px; border-radius: 3px; }
footer { margin-top: 64px; border-top: 1px solid var(--rule); padding-top: 14px; font-size: 14px; color: var(--muted); }
.chapter-num { font: 600 13px var(--mono); color: var(--copper); letter-spacing: .1em; }