/* =============================================================
 * DFT Notes — site.css
 * Implements the design.md spec — light (pastel poppy green) +
 * dark (warm dark) + coral accent + slab-serif display +
 * humanist sans body.
 *
 *   1. Design tokens (CSS custom properties) — light by default,
 *      dark overrides via [data-theme="dark"] on <html>.
 *   2. Base / reset
 *   3. Typography
 *   4. Layout primitives (skip link, container, main)
 *   5. Top navigation + mobile menu
 *   6. Buttons
 *   7. Cards
 *   8. Hero band
 *   9. Code (inline + block)
 *  10. Tables / lists / blockquotes
 *  11. Marginalia (figure captions, side notes)
 *  12. Hidden answers (details / summary)
 *  13. Mermaid diagrams
 *  14. Footer
 *  15. Responsive (mobile-first, then tablet + desktop)
 *  16. Accessibility + motion
 * =========================================================== */


/* === 1. Design tokens ====================================== */

/* The LIGHT theme lives on :root.  The DARK theme is applied
   via [data-theme="dark"] on <html> (set by a tiny inline
   script in <head> before the CSS loads, to avoid a flash of
   the wrong theme on first paint). */
:root {
  /* Brand & accent (coral is the same in both themes) */
  --color-primary:           #cc785c;
  --color-primary-active:    #a9583e;
  --color-primary-disabled:  #d6dcc8;
  --color-accent-teal:       #5db8a6;
  --color-accent-amber:      #e8a55a;

  /* Surface — LIGHT: pastel poppy green */
  --color-canvas:            #eef0e6;
  --color-surface-soft:      #e3e6d8;
  --color-surface-card:      #d6dcc8;
  --color-surface-cream-strong: #c8d0b8;
  --color-surface-dark:           #1a1814;   /* same in both themes */
  --color-surface-dark-elevated:  #252220;
  --color-surface-dark-soft:      #211f1b;
  --color-hairline:          #cdd3bd;
  --color-hairline-soft:     #d8ddc8;

  /* Text — LIGHT: warm dark green-gray */
  --color-ink:               #1c1f17;
  --color-body-strong:       #2a2d23;
  --color-body:              #3a4031;
  --color-muted:             #6b7060;
  --color-muted-soft:        #8a8e7c;
  --color-on-primary:        #ffffff;
  --color-on-dark:           #f0ebde;          /* same in both themes */
  --color-on-dark-soft:      #a09d96;

  /* Semantic */
  --color-success:           #5b8f4a;
  --color-warning:           #b87a00;
  --color-error:             #a8453b;
  --color-code-highlight:    #f3a26a;          /* used for the language tag in code-window */
  --color-link:              #2a6a4a;          /* inline text link in light theme */

  /* Typography */
  --font-display: "EB Garamond", "Tiempos Headline", "Copernicus",
                  Garamond, "Times New Roman", Times, serif;
  --font-body:    "Inter", "StyreneB", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular,
                  Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Type scale (clamped for fluid responsive sizing) */
  --fs-display-xl:   clamp(2.5rem, 1.5rem + 4vw, 4rem);    /* 40–64 */
  --fs-display-lg:   clamp(2rem,   1.3rem + 3vw, 3rem);     /* 32–48 */
  --fs-display-md:   clamp(1.5rem, 1.1rem + 2vw, 2.25rem);  /* 24–36 */
  --fs-display-sm:   clamp(1.25rem, 1rem + 1.2vw, 1.75rem); /* 20–28 */
  --fs-title-lg:     1.375rem;   /* 22 */
  --fs-title-md:     1.125rem;   /* 18 */
  --fs-title-sm:     1rem;       /* 16 */
  --fs-body-md:      1rem;       /* 16 */
  --fs-body-sm:      0.875rem;   /* 14 */
  --fs-caption:      0.8125rem;  /* 13 */
  --fs-caption-up:   0.75rem;    /* 12 */
  --fs-code:         0.875rem;   /* 14 */
  --fs-button:       0.875rem;   /* 14 */
  --fs-nav-link:     0.875rem;   /* 14 */

  /* Spacing */
  --space-xxs:  4px;
  --space-xs:   8px;
  --space-sm:   12px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-xxl:  48px;
  --space-section: 96px;

  /* Border radius */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* Reading column (progressive: mobile → wide) */
  --reading-col-mobile:   100%;
  --reading-col-tablet:   760px;
  --reading-col-desktop:  960px;
  --reading-col-wide:     1100px;

  /* Layout */
  --container-max:  1200px;
  --container-pad:  clamp(1rem, 4vw, 2.5rem);
  --topnav-h:       64px;

  /* Motion */
  --t-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-normal: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:   380ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layering */
  --z-nav:    50;
  --z-menu:   60;
  --z-modal:  100;
}

/* The DARK theme.  Inherits everything from :root and only
   overrides the surface + text tokens that change.  Coral
   stays. */
[data-theme="dark"] {
  --color-canvas:            #1a1814;
  --color-surface-soft:      #252220;
  --color-surface-card:      #2e2a24;
  --color-surface-cream-strong: #38332a;
  --color-hairline:          #3a342a;
  --color-hairline-soft:     #2e2a24;

  --color-ink:               #f0ebde;
  --color-body-strong:       #ddd6c4;
  --color-body:              #c4bca8;
  --color-muted:             #9a9282;
  --color-muted-soft:        #76705f;

  --color-link:              #8fbf9b;

  --color-success:           #6fae5c;
  --color-warning:           #d4a55a;
  --color-error:             #c75f55;
}


/* === 2. Base / reset ======================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topnav-h) + var(--space-md));
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: 1.55;
  font-weight: 400;
  color: var(--color-body);
  background-color: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--t-fast) ease;
}
a:hover,
a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

::selection {
  background: var(--color-primary);
  color: var(--color-on-primary);
}


/* === 3. Typography ========================================= */

/* Headlines — slab-serif display at weight 400 with NEGATIVE
   letter-spacing.  This is the brand's voice.  The h1 sits in
   .hero-band__title so the h1 here is the document default. */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-display-lg); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-display-md); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-display-sm); }
h4 { font-size: var(--fs-title-lg);  font-family: var(--font-body); font-weight: 500; letter-spacing: 0; }
h5 { font-size: var(--fs-title-md);  font-family: var(--font-body); font-weight: 500; letter-spacing: 0; }
h6 { font-size: var(--fs-title-sm);  font-family: var(--font-body); font-weight: 500; letter-spacing: 0; }

p {
  margin: 0 0 var(--space-md);
  text-wrap: pretty;
}

strong, b {
  font-weight: 500;
  color: var(--color-ink);
}

em, i {
  font-style: italic;
}

small {
  font-size: var(--fs-body-sm);
  color: var(--color-muted);
}

hr {
  border: 0;
  height: 1px;
  background-color: var(--color-hairline);
  margin: var(--space-xxl) 0;
}


/* === 4. Layout primitives ================================== */

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-md);
  z-index: var(--z-modal);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-ink);
  color: var(--color-on-dark);
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: var(--fs-body-sm);
  transition: top var(--t-fast) ease;
}
.skip-link:focus {
  top: var(--space-md);
}

.site-main {
  min-height: calc(100vh - var(--topnav-h));
  /* The cream canvas is the default body.  Pages can override
     with .layout--<name> { background: ... } if they need a
     different starting surface. */
  background-color: var(--color-canvas);
}

/* Constrained reading column for content pages (chapters, 404, the
   chapter index, etc.).  Used via _layouts/page.html which wraps
   the markdown body in <div class="page-content">.  Full-bleed
   sections (hero, callouts) should NOT use this layout — they
   have their own .container / .hero-band__inner wrappers.

   The column grows progressively with the viewport:
     < 768px          → 100% (with side padding)
     768 – 1024px     → 760px  (mobile-friendly reading)
     1024 – 1440px    → 960px  (slightly wider, fits figures)
     ≥ 1440px         → 1100px (wide-screen reading, fits code+text) */
.page-content {
  max-width: var(--reading-col-mobile);
  margin: 0 auto;
  padding: var(--space-xxl) var(--container-pad) var(--space-section);
}
@media (min-width: 768px) {
  .page-content { max-width: var(--reading-col-tablet); }
}
@media (min-width: 1024px) {
  .page-content { max-width: var(--reading-col-desktop); }
}
@media (min-width: 1440px) {
  .page-content { max-width: var(--reading-col-wide); }
}
.page-content > *:last-child {
  margin-bottom: 0;
}

/* === 11. Marginalia (right-rail figure captions, side notes) === */

/* A right-rail block used inside the wider reading column.  Renders
   as a small caption or callout on the right of the main text on
   wide screens, and as a normal in-flow block on narrow screens. */
.marginalia {
  background-color: var(--color-surface-soft);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
  font-size: var(--fs-body-sm);
  color: var(--color-body);
}
@media (min-width: 1440px) {
  .marginalia {
    /* Wide-screen layout: float right, take ~280px, leave
       the main text wrapping around it.  Disabled at narrower
       widths because the column is too tight. */
    float: right;
    clear: right;
    width: 280px;
    margin: var(--space-md) -320px var(--space-md) var(--space-lg);
    shape-outside: margin-box;
  }
}

/* A figure that wants to be wider than the reading column.  Used
   for full-bleed plots inside a chapter. */
.figure-wide {
  margin: var(--space-xl) calc(var(--container-pad) * -1);
  max-width: calc(100% + var(--container-pad) * 2);
}
@media (min-width: 1024px) {
  .figure-wide {
    margin-left: -64px;
    margin-right: -64px;
    max-width: calc(100% + 128px);
  }
}
.figure-wide img,
.figure-wide svg,
.figure-wide .code-window-card {
  width: 100%;
  display: block;
  border-radius: var(--radius-lg);
}

/* === 12. Hidden answers (details / summary) === */

/* <details class="problem"> and <details class="answer"> are
   the two flavours the chapter template uses.  The summary
   reveals on click, with a soft animation.  The contents are
   styled like a blockquote (callout). */
details.problem,
details.answer {
  background-color: var(--color-surface-soft);
  border: 1px solid var(--color-hairline);
  border-left-width: 3px;
  border-left-color: var(--color-primary);
  border-radius: var(--radius-md);
  margin: var(--space-md) 0;
  padding: 0;
  overflow: hidden;
  transition: background-color var(--t-fast) ease;
}
details.answer {
  border-left-color: var(--color-accent-teal);
  background-color: color-mix(in srgb, var(--color-accent-teal) 6%, var(--color-surface-soft));
}
details.problem > summary,
details.answer > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-md) var(--space-lg);
  font-weight: 500;
  font-size: var(--fs-body-md);
  color: var(--color-ink);
  position: relative;
  user-select: none;
}
details.problem > summary::-webkit-details-marker,
details.answer > summary::-webkit-details-marker { display: none; }
details.problem > summary::before,
details.answer > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: var(--space-sm);
  color: var(--color-primary);
  transition: transform var(--t-fast) ease;
}
details.answer > summary::before { color: var(--color-accent-teal); }
details[open].problem > summary::before,
details[open].answer > summary::before {
  transform: rotate(90deg);
}
details.problem > summary > :first-child,
details.answer > summary > :first-child {
  display: inline;
  margin: 0;
}
details.problem > :not(summary),
details.answer > :not(summary) {
  padding: 0 var(--space-lg) var(--space-lg);
  border-top: 1px dashed var(--color-hairline);
  margin-top: 0;
  padding-top: var(--space-md);
}
details.problem > :not(summary) > :first-child,
details.answer > :not(summary) > :first-child { margin-top: 0; }
details.problem > :not(summary) > :last-child,
details.answer > :not(summary) > :last-child { margin-bottom: 0; }

/* === 13. Mermaid diagrams === */

.mermaid {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  background-color: var(--color-surface-soft);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  text-align: center;
}
.mermaid svg {
  max-width: 100%;
  height: auto;
  /* The default Mermaid text is small; bump it slightly. */
  font-family: var(--font-body) !important;
  font-size: 14px !important;
}
/* The chapters-map page can opt into a wider diagram. */
.mermaid--wide {
  margin-left: calc(var(--container-pad) * -1);
  margin-right: calc(var(--container-pad) * -1);
}

/* Figure wrapper: holds the rendered <svg> and the "Download PNG"
   button.  Built by assets/js/mermaid-init.js right after the
   async render completes. */
.dft-mermaid-figure {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: var(--space-xl) 0;
  position: relative;
}
.dft-mermaid-figure > .mermaid,
.dft-mermaid-figure > pre.mermaid {
  margin: 0;
}
.dft-mermaid-figure > pre.mermaid {
  background-color: var(--color-surface-soft);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  overflow-x: auto;
  text-align: center;
}
.dft-mermaid-download {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: calc(-1 * var(--space-md));
  margin-bottom: var(--space-md);
  margin-right: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm);
  font: 500 12px/1 var(--font-ui);
  color: var(--color-muted-ink);
  background: transparent;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.dft-mermaid-download:hover,
.dft-mermaid-download:focus-visible {
  color: var(--color-ink);
  border-color: var(--color-accent);
  background-color: var(--color-surface-soft);
  outline: none;
}
.dft-mermaid-download svg {
  flex-shrink: 0;
}
.dft-mermaid-download.is-success {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background-color: var(--color-surface-soft);
}
.dft-mermaid-download.is-error {
  color: #b54a3a;
  border-color: #b54a3a;
}
/* While the page is still loading, before Mermaid kicks in, the
   raw <pre> should look like a code block, not a flex row. */
pre.dft-mermaid-pre {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-muted-ink);
  background-color: var(--color-surface-soft);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin: var(--space-lg) 0;
  overflow-x: auto;
}
pre.dft-mermaid-pre code.language-mermaid {
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
}

/* === 14. Manim animations (embedded <video> blocks) =============== */

.dft-animation {
  margin: 1.5rem 0 2rem;
  padding: 0.75rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
}

.dft-animation video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  background: #000;
}

.dft-animation figcaption {
  margin-top: 0.6rem;
  font-size: 0.88rem;
  color: var(--color-ink-muted);
  line-height: 1.5;
  text-align: center;
}

.dft-animation figcaption a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.container--wide {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}


/* === 5. Top navigation + mobile menu ====================== */

.top-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background-color: var(--color-canvas);
  border-bottom: 1px solid var(--color-hairline-soft);
  height: var(--topnav-h);
  /* Slight backdrop tint so content scrolling beneath is
     readable without being heavy. */
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  background-color: rgba(250, 249, 245, 0.85);
}

.top-nav__inner {
  height: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.top-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.top-nav__brand:hover,
.top-nav__brand:focus-visible {
  text-decoration: none;
  color: var(--color-primary);
}

.top-nav__wordmark {
  white-space: nowrap;
}

.top-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-left: var(--space-md);
  flex: 1;
}

.top-nav__link {
  font-family: var(--font-body);
  font-size: var(--fs-nav-link);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-ink);
  padding: var(--space-xs) 0;
  position: relative;
  white-space: nowrap;
}
.top-nav__link:hover,
.top-nav__link:focus-visible {
  color: var(--color-primary);
  text-decoration: none;
}
.top-nav__link--text {
  color: var(--color-muted);
}

.top-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-left: auto;
}

.top-nav__external {
  display: inline-block;
  font-size: 0.75em;
  margin-left: 2px;
  vertical-align: 0.1em;
}

.top-nav__cta {
  /* button--primary is loaded; we just want to hide on the
     smallest screens. */
  display: inline-flex;
}

.top-nav__hamburger {
  display: none;       /* shown on mobile via media query */
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border-radius: var(--radius-md);
  color: var(--color-ink);
  transition: background-color var(--t-fast) ease;
}
.top-nav__hamburger:hover,
.top-nav__hamburger:focus-visible {
  background-color: var(--color-surface-card);
}
.hamburger-bar {
  display: block;
  width: 20px;
  height: 1.8px;
  background-color: currentColor;
  border-radius: 1px;
  transition: transform var(--t-fast) ease, opacity var(--t-fast) ease;
}

/* Open state — animated X. */
.top-nav__hamburger[aria-expanded="true"] .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.top-nav__hamburger[aria-expanded="true"] .hamburger-bar:nth-child(2) {
  opacity: 0;
}
.top-nav__hamburger[aria-expanded="true"] .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Theme switcher — a small icon button next to the GitHub link.
   Shows a sun when the active theme is dark (click → go to light),
   a moon when the active theme is light (click → go to dark).
   The icon swap is pure CSS based on [data-theme] on <html>. */
.theme-switcher {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  border-radius: var(--radius-md);
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}
.theme-switcher:hover,
.theme-switcher:focus-visible {
  background-color: var(--color-surface-soft);
  color: var(--color-primary);
}
.theme-switcher__icon {
  display: none;
}
.theme-switcher__icon--sun  { color: var(--color-accent-amber); }
.theme-switcher__icon--moon { color: var(--color-primary); }
:root .theme-switcher__icon--sun  { display: none; }
:root .theme-switcher__icon--moon { display: inline-block; }
[data-theme="dark"] .theme-switcher__icon--sun  { display: inline-block; }
[data-theme="dark"] .theme-switcher__icon--moon { display: none; }

/* The top nav gets a subtle background tint that works on both
   themes: in light it's a barely-there translucent canvas, in
   dark it's a barely-there translucent dark. */
[data-theme="dark"] .top-nav {
  background-color: rgba(26, 24, 20, 0.85);
}

/* --- Mobile drawer (right-side slide-in) + backdrop --- */

/* Backdrop: full-viewport dim layer behind the drawer.
   Hidden by default; shown via [data-mobile-open] on <html>
   (set by nav.js).  The fade-in is opacity-only so it's
   smooth on every browser. */
.mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background-color: rgba(20, 18, 14, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--t-normal) ease;
  /* Below the drawer when both are present. */
  pointer-events: none;
}
.mobile-backdrop[hidden] {
  display: none;
}
.mobile-backdrop--visible {
  opacity: 1;
  pointer-events: auto;
}

/* The drawer is a right-side <aside>.  Hidden by default;
   when [data-mobile-open] is set on <html>, the .mobile-drawer
   inside the matching [data-mobile-menu] gets .mobile-drawer--open
   and slides in. */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  /* Drawer width: max 320px, 86% of viewport, min 280px. */
  width: min(320px, 86vw);
  min-width: 280px;
  z-index: calc(var(--z-menu) + 1);
  background-color: var(--color-canvas);
  border-left: 1px solid var(--color-hairline-soft);
  box-shadow: -8px 0 24px rgba(20, 18, 14, 0.12);
  display: flex;
  flex-direction: column;
  /* Drawer is always off-screen to the right; the open class
     brings it back.  The transition runs on the transform
     so it's smooth and GPU-accelerated. */
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0.32, 1);
  /* Respect safe areas on notched phones. */
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  /* Hidden attribute wins until the open class is added. */
}
.mobile-drawer[hidden] {
  display: none;
}
.mobile-drawer--open {
  transform: translateX(0);
}

/* Drawer header: brand on the left, close button on the right. */
.mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-hairline-soft);
  flex-shrink: 0;
}
.mobile-drawer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  min-height: 44px;
}
.mobile-drawer__brand:hover,
.mobile-drawer__brand:focus-visible {
  color: var(--color-primary);
  text-decoration: none;
}
.mobile-drawer__wordmark {
  white-space: nowrap;
}
.mobile-drawer__close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}
.mobile-drawer__close:hover,
.mobile-drawer__close:focus-visible {
  background-color: var(--color-surface-card);
  color: var(--color-primary);
}

/* Drawer inner: the scrollable area between header and footer. */
.mobile-drawer__inner {
  flex: 1;
  overflow-y: auto;
  /* Momentum scroll on iOS. */
  -webkit-overflow-scrolling: touch;
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  overscroll-behavior: contain;
}

/* Theme row inside the drawer.  Since the top-nav theme
   switcher is hidden on mobile, the drawer's row is the
   only place to flip light/dark. */
.mobile-drawer__theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-hairline-soft);
  margin-bottom: var(--space-md);
}
.mobile-drawer__theme-label {
  font-family: var(--font-body);
  font-size: var(--fs-caption-up);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Theme switcher — drawer variant.  Renders the icon +
   a text label that mirrors the active theme. */
.theme-switcher--drawer {
  width: auto;
  height: 44px;
  padding: 0 var(--space-md);
  gap: var(--space-xs);
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-soft);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  transition: background-color var(--t-fast) ease,
              border-color var(--t-fast) ease,
              color var(--t-fast) ease,
              transform var(--t-fast) ease;
}
.theme-switcher--drawer:hover,
.theme-switcher--drawer:focus-visible {
  background-color: var(--color-surface-card);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.theme-switcher--drawer:active {
  transform: scale(0.97);
}
.theme-switcher__label {
  min-width: 2.5em;
  text-align: left;
}

/* Primary nav inside the drawer. */
.mobile-drawer__nav {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-xs);
}
.mobile-drawer__link {
  font-family: var(--font-display);
  font-size: var(--fs-title-md);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  padding: var(--space-sm) 0;
  /* 44px minimum tap target via min-height + flex centering. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid var(--color-hairline-soft);
  text-decoration: none;
  transition: color var(--t-fast) ease, padding-left var(--t-fast) ease;
}
.mobile-drawer__link:hover,
.mobile-drawer__link:focus-visible {
  color: var(--color-primary);
  text-decoration: none;
  padding-left: var(--space-xs);
}
.mobile-drawer__link:active {
  background-color: var(--color-surface-soft);
}
.mobile-drawer__link--external {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--color-muted);
}

/* Quick-jump: <details> with a chapter grid. */
.mobile-drawer__quickjump {
  margin-top: var(--space-lg);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-soft);
  overflow: hidden;
}
.mobile-drawer__quickjump-summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  transition: background-color var(--t-fast) ease;
}
.mobile-drawer__quickjump-summary::-webkit-details-marker {
  display: none;
}
.mobile-drawer__quickjump-summary:hover,
.mobile-drawer__quickjump-summary:focus-visible {
  background-color: var(--color-surface-card);
}
.mobile-drawer__quickjump-summary svg {
  transition: transform var(--t-fast) ease;
}
.mobile-drawer__quickjump[open] .mobile-drawer__quickjump-summary svg {
  transform: rotate(180deg);
}
.mobile-drawer__quickjump-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background-color: var(--color-hairline-soft);
  padding: 1px;
}
.mobile-drawer__chapter {
  background-color: var(--color-canvas);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--color-ink);
  text-decoration: none;
  /* Tap target: at least 44px tall via min-height + line-height. */
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}
.mobile-drawer__chapter:hover,
.mobile-drawer__chapter:focus-visible {
  background-color: var(--color-surface-soft);
  color: var(--color-primary);
  text-decoration: none;
}
.mobile-drawer__chapter:active {
  background-color: var(--color-surface-card);
}

/* Divider between nav and footer/external links. */
.mobile-drawer__divider {
  height: 1px;
  background-color: var(--color-hairline-soft);
  margin: var(--space-md) 0;
}

/* Footer: CTA "Read the notes" pinned to bottom. */
.mobile-drawer__footer {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  border-top: 1px solid var(--color-hairline-soft);
  background-color: var(--color-canvas);
  flex-shrink: 0;
}

/* Body scroll lock while the drawer is open.
   We lock <html> (not body) so the lock works on iOS too.
   When there's enough horizontal room, we shift the page
   slightly so the drawer doesn't fully obscure the content
   — gives the user context. */
[data-mobile-open] {
  overflow: hidden;
  touch-action: none;
}

/* Reduced motion: skip the slide animation, instant open. */
@media (prefers-reduced-motion: reduce) {
  .mobile-drawer {
    transition: none;
  }
  .mobile-backdrop {
    transition: none;
  }
}


/* === 6. Buttons ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--fs-button);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 12px 20px;
  min-height: 40px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-fast) ease,
              border-color var(--t-fast) ease,
              color var(--t-fast) ease,
              transform var(--t-fast) ease;
}
.btn:hover,
.btn:focus-visible {
  text-decoration: none;
}
.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--color-primary-active);
  border-color: var(--color-primary-active);
  color: var(--color-on-primary);
}

.btn--secondary {
  background-color: var(--color-canvas);
  color: var(--color-ink);
  border-color: var(--color-hairline);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  background-color: var(--color-surface-soft);
  border-color: var(--color-muted-soft);
  color: var(--color-ink);
}

.btn--secondary-on-dark {
  background-color: var(--color-surface-dark-elevated);
  color: var(--color-on-dark);
  border-color: var(--color-surface-dark-elevated);
}
.btn--secondary-on-dark:hover,
.btn--secondary-on-dark:focus-visible {
  background-color: var(--color-on-dark);
  color: var(--color-ink);
}

.btn--text-link {
  background-color: transparent;
  color: var(--color-ink);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  min-height: auto;
}
.btn--text-link:hover,
.btn--text-link:focus-visible {
  color: var(--color-primary);
}

.btn--sm {
  min-height: 36px;
  padding: 8px 16px;
  font-size: 0.8125rem;
}

.btn--block {
  width: 100%;
}


/* === 7. Cards ============================================== */

.feature-card {
  background-color: var(--color-surface-card);
  color: var(--color-ink);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background-color: var(--color-canvas);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}
.feature-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  color: var(--color-ink);
}
.feature-card__body {
  font-size: var(--fs-body-md);
  color: var(--color-body);
  margin: 0;
  line-height: 1.55;
}
.feature-card__link {
  margin-top: auto;
  padding-top: var(--space-sm);
  font-weight: 500;
  font-size: var(--fs-body-sm);
}

/* Dark mockup card */
.product-mockup-card-dark {
  background-color: var(--color-surface-dark);
  color: var(--color-on-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
.product-mockup-card-dark__label {
  font-family: var(--font-caption, var(--font-body));
  font-size: var(--fs-caption-up);
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-on-dark-soft);
  margin: 0 0 var(--space-sm);
}
.product-mockup-card-dark__title {
  font-family: var(--font-display);
  font-size: var(--fs-title-md);
  font-weight: 400;
  color: var(--color-on-dark);
  margin: 0 0 var(--space-sm);
}
.product-mockup-card-dark__body {
  color: var(--color-on-dark-soft);
  font-size: var(--fs-body-sm);
  margin: 0;
  line-height: 1.55;
}

/* Code window card (the "show actual product chrome" hero) */
.code-window-card {
  background-color: var(--color-surface-dark);
  color: var(--color-on-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: 0 4px 24px rgba(20, 20, 19, 0.12);
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  line-height: 1.6;
  overflow: hidden;
}
.code-window-card__titlebar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-surface-dark-elevated);
  margin-bottom: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--color-on-dark-soft);
  letter-spacing: 0.5px;
}
.code-window-card__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-surface-dark-elevated);
}
.code-window-card__dot--red    { background-color: #ff5f57; }
.code-window-card__dot--yellow { background-color: #febc2e; }
.code-window-card__dot--green  { background-color: #28c840; }
.code-window-card__filename {
  margin-left: var(--space-sm);
  color: var(--color-on-dark-soft);
}
.code-window-card__body {
  background-color: var(--color-surface-dark-soft);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: 0;
  color: var(--color-on-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
  tab-size: 4;
}
.code-window-card__body code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}

/* Callout cards (coral) */
.callout-card-coral {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-xxl);
  text-align: center;
}
.callout-card-coral__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-caption-up);
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-on-primary);
  opacity: 0.8;
  margin: 0 0 var(--space-md);
}
.callout-card-coral__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--color-on-primary);
  margin: 0 0 var(--space-md);
  text-wrap: balance;
}
.callout-card-coral__body {
  color: var(--color-on-primary);
  opacity: 0.92;
  font-size: var(--fs-body-md);
  max-width: 56ch;
  margin: 0 auto var(--space-xl);
}
.callout-card-coral__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* Inverted button on coral — uses canvas background */
.btn--on-coral {
  background-color: var(--color-canvas);
  color: var(--color-ink);
  border-color: var(--color-canvas);
}
.btn--on-coral:hover,
.btn--on-coral:focus-visible {
  background-color: var(--color-on-primary);
  color: var(--color-primary);
  border-color: var(--color-on-primary);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 500;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
}
.badge--pill {
  background-color: var(--color-surface-card);
  color: var(--color-ink);
}
.badge--coral {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--fs-caption-up);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.badge--outline {
  background-color: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
}


/* === 8. Hero band ========================================== */

.hero-band {
  background-color: var(--color-canvas);
  color: var(--color-ink);
  padding-top: clamp(3rem, 5vw + 2rem, 6rem);
  padding-bottom: clamp(3rem, 5vw + 2rem, 6rem);
}

.hero-band__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}

.hero-band__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-caption-up);
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-md);
}

.hero-band__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  margin: 0 0 var(--space-lg);
  text-wrap: balance;
}
.hero-band__title em {
  font-style: italic;
  color: var(--color-primary);
}

.hero-band__subtitle {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--color-body);
  max-width: 56ch;
  margin: 0 0 var(--space-xl);
}

.hero-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.hero-band__visual {
  display: flex;
  justify-content: center;
}


/* === 9. Code (inline + block) ============================= */

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background-color: var(--color-surface-soft);
  color: var(--color-body-strong);
  padding: 0.12em 0.36em;
  border-radius: var(--radius-xs);
  /* Prevent awkward line wrapping inside long inline identifiers. */
  word-break: break-word;
}

/* Code blocks — fences in markdown. */
pre {
  background-color: var(--color-surface-dark);
  color: var(--color-on-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  line-height: 1.6;
  margin: 0 0 var(--space-lg);
  tab-size: 4;
  -webkit-overflow-scrolling: touch;
}
pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  border-radius: 0;
}

/* Rouge syntax classes — tuned for the cream/dark surfaces. */
.highlight        { background: var(--color-surface-dark); color: var(--color-on-dark); border-radius: var(--radius-lg); }
.highlight pre    { background: transparent; margin: 0; padding: var(--space-lg); }
.highlight .c,    /* Comment */
.highlight .c1,
.highlight .cm    { color: var(--color-on-dark-soft); font-style: italic; }
.highlight .k,    /* Keyword */
.highlight .kc,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr    { color: #e8a55a; }
.highlight .s,    /* String */
.highlight .s1,
.highlight .s2,
.highlight .sb,
.highlight .sc    { color: #8fc89a; }
.highlight .nb,   /* Built-in */
.highlight .nf    { color: #b6c4ff; }
.highlight .mi,   /* Number */
.highlight .mf,
.highlight .mh,
.highlight .mo    { color: #f0b070; }
.highlight .n,    /* Name */
.highlight .nc,
.highlight .nd    { color: #f0d8a8; }
.highlight .o,    /* Operator */
.highlight .ow    { color: #d8d4c8; }
.highlight .err   { color: #ff8b7a; }


/* === 10. Tables / lists / blockquotes ===================== */

/* Tables */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0 0 var(--space-xl);
  font-size: var(--fs-body-md);
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
thead {
  background-color: var(--color-surface-soft);
}
th, td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-hairline);
  /* Don't let long math wrap awkwardly. */
  white-space: nowrap;
}
th {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-muted-soft);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background-color: var(--color-surface-soft); }

/* Lists */
ul, ol {
  margin: 0 0 var(--space-lg);
  padding-left: 1.5em;
}
li {
  margin-bottom: var(--space-xs);
  line-height: 1.55;
}
li > ul, li > ol {
  margin-top: var(--space-xs);
  margin-bottom: 0;
}

/* Blockquotes — callout-style via left border. */
blockquote {
  margin: 0 0 var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-left: 3px solid var(--color-primary);
  background-color: var(--color-surface-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-body);
  font-style: normal;
}
blockquote p:last-child { margin-bottom: 0; }
blockquote strong:first-child {
  display: inline-block;
  margin-right: var(--space-xs);
  color: var(--color-ink);
  font-weight: 500;
  text-transform: none;
}

/* Display math: mjx-container has display="true" attribute.
   Give it vertical rhythm (margin) for visual separation. */
mjx-container[display="true"] {
  margin: var(--space-lg) 0 !important;
}

/* Inline math: mjx-container has NO display attribute (or it's
   not "true"). Override the generic img/svg/video rule which
   sets display:block (making the SVG take the full line width
   and pushing the text after the math onto a new line). */
mjx-container:not([display="true"]) {
  margin: 0 !important;
}

mjx-container:not([display="true"]) > svg {
  display: inline-block !important;
  vertical-align: middle;
}


/* === 11. Footer ============================================ */

.site-footer {
  background-color: var(--color-surface-dark);
  color: var(--color-on-dark-soft);
  padding: var(--space-xxl) 0;
  font-size: var(--fs-body-sm);
  line-height: 1.55;
}
.site-footer a {
  color: var(--color-on-dark-soft);
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--color-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  color: var(--color-on-dark);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: var(--space-xl);
}
.site-footer__wordmark {
  white-space: nowrap;
}
.site-footer__tagline {
  flex-basis: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 400;
  color: var(--color-on-dark-soft);
  margin: var(--space-xs) 0 0;
  letter-spacing: 0;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.site-footer__heading {
  font-family: var(--font-body);
  font-size: var(--fs-caption-up);
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-on-dark-soft);
  margin: 0 0 var(--space-md);
}
.site-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.site-footer__list li {
  margin: 0;
}
.site-footer__legal {
  border-top: 1px solid var(--color-surface-dark-elevated);
  padding-top: var(--space-lg);
  font-size: var(--fs-caption);
  color: var(--color-on-dark-soft);
  opacity: 0.8;
}
.site-footer__legal p {
  margin: 0;
  max-width: 60ch;
}


/* === 12. Responsive ======================================== */

/* Mobile defaults are in the base rules above.  This block only
   *adds* layout that doesn't make sense at small sizes — most
   styles are mobile-first. */

/* Tablet: 768px and up — switch the nav to horizontal, hero to
   6-6 grid. */
@media (min-width: 768px) {
  .top-nav__menu { gap: var(--space-xl); }
  .hero-band__inner {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-xxl);
  }
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

 /* Below 768px: hide the horizontal nav and CTA, show hamburger.
    The top-nav stays a single row so the wordmark + theme toggle +
    hamburger fit comfortably on a 320px-wide screen. */
/* Desktop: allow long math/code/mermaid to scroll horizontally
   within their container instead of overflowing the page.
   This prevents the 1000+ character equations from causing
   horizontal page scrolling on any screen size. */
.page-content pre,
.page-content code,
.page-content .mermaid,
.page-content mjx-container[display="true"] {
  max-width: 100%;
  overflow-x: auto;
}
.page-content mjx-container[display="true"] svg {
  max-width: 100%;
}
/* Prevent the site from being wider than the viewport (caused by
   long equations, code blocks, or tables on any screen size). */
body { overflow-x: hidden; }
 @media (max-width: 767.98px) {
    .top-nav {
     height: 56px;
   }
   .top-nav__inner {
     gap: var(--space-sm);
     padding: 0 var(--space-md);
   }
   .top-nav__menu { display: none; }
   .top-nav__link--text { display: none; }
   .top-nav__cta { display: none; }
   .top-nav__hamburger { display: inline-flex; }
   .top-nav__brand {
     font-size: 1.0625rem;
   }
   .theme-switcher {
     width: 36px;
     height: 36px;
   }
   /* Mobile: allow long math/code/mermaid to scroll horizontally
      within their container instead of overflowing the page.
      This prevents the 1000+ character equations from causing
      horizontal page scrolling on small screens. */
   pre, code, .mermaid, mjx-container {
     max-width: 100%;
     overflow-x: auto;
   }
   mjx-container[display="true"] svg {
     max-width: 100%;
   }
   /* Prevent the site from being wider than the viewport on
      small screens (caused by long equations, code blocks, or
      wide tables). */
   body {
     overflow-x: hidden;
   }
   main, article, section {
     max-width: 100vw;
     overflow-x: hidden;
   }
 }

/* Desktop: 1024px and up — full nav, full grids, 3-up features. */
@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Wide: > 1440px — extra outer padding, content stays capped. */
@media (min-width: 1440px) {
  :root {
    --container-pad: 3rem;
  }
}

/* Reusable feature grid (used on the homepage for the 3-up band). */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* Section wrapper — a vertical band. */
.section {
  padding: clamp(3rem, 4vw + 2rem, 6rem) 0;
}
.section--canvas        { background-color: var(--color-canvas); }
.section--soft          { background-color: var(--color-surface-soft); }
.section--card          { background-color: var(--color-surface-card); }
.section--dark          {
  background-color: var(--color-surface-dark);
  color: var(--color-on-dark);
}
.section--dark a       { color: var(--color-on-dark); }
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6      { color: var(--color-on-dark); }

.section__heading {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--space-md);
  text-wrap: balance;
}
.section__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-caption-up);
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-sm);
}
.section__lede {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--color-body);
  max-width: 60ch;
  margin: 0 0 var(--space-xl);
}
.section--dark .section__lede { color: var(--color-on-dark-soft); }
.section--dark .section__eyebrow { color: var(--color-accent-amber); }


/* === 13. Accessibility + motion ============================ */

/* Page-load fade-in.  The <main> element fades and rises slightly
   on initial paint.  Disabled for users with reduced-motion. */
.site-main {
  animation: page-fade-in 280ms cubic-bezier(0.32, 0.72, 0.32, 1) both;
}
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Visible focus ring for keyboard users. */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.btn:focus-visible,
.top-nav__link:focus-visible,
.top-nav__brand:focus-visible,
.top-nav__hamburger:focus-visible,
.mobile-drawer__link:focus-visible,
.mobile-drawer__brand:focus-visible,
.mobile-drawer__close:focus-visible,
.mobile-drawer__chapter:focus-visible {
  outline-offset: 4px;
}

/* Honor reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}