/* Folio, the site's look (Kai's pick, 2026-11-07): the PDF textbook's ink navy on paper, Source
   Serif 4 for reading and headings, Source Sans 3 for the interface, hairline rules, no shadows.
   Light and dark. No capitals for styling: no uppercase and no small caps, anywhere. */
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-latin-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
:root {
  --font-body: "Source Serif 4", Georgia, serif; --font-heading: "Source Serif 4", Georgia, serif;
  --font-ui: "Source Sans 3", system-ui, sans-serif; --font-num: "Source Sans 3", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --fs-body: 18px; --lh-body: 1.7; --radius: 4px; --radius-sm: 3px; --radius-lg: 6px; --btn-radius: 3px;
  --heading-weight: 600; --heading-tracking: -0.005em;
  --bg: #FBFAF7; --bg-2: #F4F6F9; --surface: #FFFFFF; --surface-2: #F4F6F9; --text: #1A2230; --muted: #5B6573;
  --border: #E2E5EA; --border-strong: #B8C2CF; --accent: #1F3A5F; --accent-strong: #1F3A5F; --on-accent: #FFFFFF;
  --accent-soft: #E7EDF5; --accent-2: #4F6F2B; --good: #3F6A22; --good-soft: #EAF0E1; --bad: #9B2C2C; --bad-soft: #F7E6E6;
  --free: #4F6F2B; --free-soft: #EAF0E1; --link: #24508A; --star: #1F3A5F; --star-off: #C9D0DA;
  --shadow: none; --shadow-lg: none; --toolkit-bg: #F4F6F9; --toolkit-border: #B8C2CF;
}
:root[data-theme="dark"] {
  --bg: #0F1622; --bg-2: #0B111B; --surface: #131C29; --surface-2: #172234; --text: #E9E4D8; --muted: #A7AFBC;
  --border: #243145; --border-strong: #3A4B64; --accent: #9DBCE3; --accent-strong: #B8CFEC; --on-accent: #0F1622;
  --accent-soft: rgba(157, 188, 227, 0.12); --accent-2: #A9C47F; --good: #A9C47F; --good-soft: rgba(169, 196, 127, 0.14);
  --bad: #F09A9A; --bad-soft: rgba(240, 154, 154, 0.12); --free: #A9C47F; --free-soft: rgba(169, 196, 127, 0.14);
  --link: #A9C6EA; --star: #B8CFEC; --star-off: #3A4B64; --toolkit-bg: #131C29; --toolkit-border: #3A4B64;
}
.eyebrow { color: var(--muted); font-weight: 600; }
.toolkit-title { font-family: var(--font-heading); font-style: italic; font-weight: 600; font-size: 1.12rem; color: var(--accent-strong); }
.page-title, .problem-title, .hero-title, .part-title { font-weight: 600; }
.hero-title .hl { font-style: italic; color: var(--accent-strong); }
.problem-head { border-bottom: 1px solid var(--border-strong); padding-bottom: 16px; }
.problem-num { font-size: 0.95rem; font-weight: 600; color: var(--accent-strong); }
.statement { font-size: 1em; }
details.solution > summary { font-family: var(--font-heading); font-size: 1.05rem; }
details.solution > summary::before { font-family: var(--font-ui); color: var(--accent-strong); }
.variation { border-left: 2px solid var(--accent-2); }
.variation-num { font-size: 0.95rem; }
.btn { font-weight: 600; }
.badge { border-radius: 3px; font-size: 0.8rem; padding: 3px 8px; }
.hero { border-bottom: 1px solid var(--border-strong); }
.hero-card { box-shadow: none; border-color: var(--border-strong); }
.feature-icon { background: none; border: 1px solid var(--accent); color: var(--accent-strong); border-radius: 50%; font-family: var(--font-heading); }
.part { border-top: 1px solid var(--border-strong); }
.plan-featured { border-width: 1.5px; }
.bank-table th { background: transparent; }
.legal-layout { padding-bottom: 64px; }
.legal-layout .prose p { margin-bottom: 1em; }