/* ========================================================================
       GH-600 PREP — design tokens (per DESIGN.md, roadmap.sh + Anthropic mix)
       Hero = dark navy, BOLD. Body = light cream, calm.
       ======================================================================== */
    :root {
      /* Fonts — all sans */
      --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --font-body:    "Literata", Georgia, "Times New Roman", serif;
      --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

      /* Type scale */
      --fs-hero:    clamp(2.75rem, 6.5vw, 5.5rem);
      --fs-h1:      clamp(2rem, 3.8vw, 3rem);
      --fs-h2:      clamp(1.5rem, 2.4vw, 2rem);
      --fs-h3:      1.25rem;
      --fs-body:    1.0625rem;
      --fs-small:   0.9375rem;
      --fs-caption: 0.8125rem;
      --fs-xs:      0.75rem;     /* dense mono chrome (counts, meta) */
      --fs-2xs:     0.6875rem;   /* micro mono labels (rail numbers, badges) */
      /* Responsive type (phone overrides, ≤640px) */
      --fs-hero-sm: clamp(2.5rem, 13vw, 3.25rem);
      --fs-h2-sm:   1.15rem;

      /* Line height */
      --lh-display: 1.02;   /* hero / large display */
      --lh-heading: 1.25;   /* section + phase titles */
      --lh-snug:    1.5;    /* compact UI text / tight lists */
      --lh-body:    1.55;   /* paragraphs */
      --lh-relaxed: 1.6;

      /* Letter spacing (tracking) */
      --tracking-tight:  -0.015em;  /* hero display */
      --tracking-snug:   -0.005em;  /* headings */
      --tracking-normal: 0;
      --tracking-label:  0.02em;    /* small-caps UI labels */
      --tracking-wide:   0.04em;    /* mono labels / eyebrows */

      /* TOKEN POLICY (#35/#40): every type/color value is EITHER a token OR a
         sanctioned exception — `scripts/check-tokens.py` enforces this in CI.
         Tokens cover the recurring scale (incl. the low end: --fs-xs/--fs-2xs,
         --lh-snug, --tracking-label). Sanctioned raw (NOT a gap): em-relative
         sizes (context-scaled), section clamp()s, font-size:0 (icon hide), and
         one-off micro display letter-spacing tweaks. Spacing px is ratcheted —
         the gate baselines today's values and fails only on NEW off-scale px. */

      /* ── COLOR STRATEGY (2 + 1) ───────────────────────────────────────────
         Neutral cream ramp = surfaces/text, carries no meaning (~90%).
         --accent (plum) = THE one color: every interactive/branded thing AND
         the "done" state + domain markers + callout accents (identifies a
         common pattern, ~10%). --highlight (amber) = the ONE highlight, used
         rarely for attention (in-progress + warnings). Nothing else chromatic. */

      /* THE highlight — one warm hue, used rarely (attention only) */
      --highlight:      #b07d1e;
      --highlight-soft: rgba(176, 125, 30, 0.12);

      /* Light cream — lightened (less heavy than before) */
      --bg:          #f8f4ea;
      --bg-alt:      #efe9da;
      --surface:     #fffdf7;
      --surface-2:   #efe8d6;
      --text:        #443d2e;   /* warm ink, ~10.5:1 — matches dark heading, not harsh near-max */
      --text-body:   #574f3d;   /* body ~7.9:1 — comfortable AAA, matches dark body */
      --text-muted:  #837a64;
      --text-faint:  #a59c84;
      --border:      #e2dbc6;
      --border-soft: rgba(43, 37, 25, 0.06);
      --border-strong: #ccc4a8;

      /* Hero shares the light palette (used by old class names) */
      --d-bg:        var(--bg);
      --d-surface:   var(--surface);
      --d-surface-2: var(--surface-2);
      --d-text:      var(--text);
      --d-body:      var(--text-body);
      --d-muted:     var(--text-muted);
      --d-border:    var(--border);

      /* Accent — THE one color (links, buttons, focus, done, domain markers, callouts) */
      --accent:        #5b4a8a;        /* muted plum-indigo, harmonized with cream */
      --accent-hover:  #483972;
      --accent-soft:   rgba(91, 74, 138, 0.10);
      --accent-on-dark: #5b4a8a;
      /* Brand wordmark: "agentic" = --text, "lately" = --brand-blue, coral rule */
      --brand-blue:    #5b7aa8;        /* steel blue (the agenticlately wordmark) */
      --coral:         #c2685a;        /* coral rule under the wordmark */

      /* Status = accent / neutral / highlight only (no 4-hue rainbow) */
      --tag-new:        var(--highlight);  --tag-new-bg:      var(--highlight-soft);
      --tag-progress:   var(--highlight);  --tag-progress-bg: var(--highlight-soft);
      --tag-done:       var(--accent);     --tag-done-bg:     var(--accent-soft);
      --tag-soon:       var(--text-muted); --tag-soon-bg:     var(--surface-2);
      --tag-text:       #fff;              /* text on a filled status tag */

      /* Code block — a dark surface in BOTH themes (deliberate, not theme-bound) */
      --code-bg: #1a1610;
      --code-fg: #f0ede0;

      /* Domain markers collapsed to the one accent (no 6-hue rainbow) */
      --dom-1: var(--accent); --dom-2: var(--accent); --dom-3: var(--accent);
      --dom-4: var(--accent); --dom-5: var(--accent); --dom-6: var(--accent);

      /* Radii */
      --r-sm: 4px;
      --r-md: 6px;
      --r-lg: 10px;
      --r-xl: 16px;

      /* Spacing */
      --s-xs: 4px;
      --s-sm: 8px;
      --s-md: 16px;
      --s-lg: 24px;
      --s-xl: 32px;
      --s-2xl: 48px;
      --s-3xl: 64px;
      --s-4xl: 96px;
      --s-5xl: 128px;

      /* Motion */
      --ease:      cubic-bezier(0.2, 0, 0, 1);
      --ease-out:  cubic-bezier(0.4, 0, 0.2, 1);
      --dur-fast:  180ms;
      --dur-base:  240ms;
      --dur-slow:  500ms;

      /* Layout */
      --container:   1480px;
      --page-max:    1760px;   /* site-wide outer frame: header, landing, lessons, footer all share it */
      --gutter:      clamp(1.5rem, 4vw, 4rem);
      --prose-width: 65ch;
    }

    /* ========================================================================
       DARK THEME (issue #1) — warm charcoal surfaces (per DESIGN.md) + a
       lightened plum accent so it matches the live brand, not a flat invert.
       Applied two ways: explicitly when the user picks Dark, and automatically
       under Auto when the OS prefers dark. Light is the base (:root above).
       ======================================================================== */
    :root { color-scheme: light; }

    /* shared dark palette — keep these two blocks in sync */
    [data-theme="dark"] {
      color-scheme: dark;
      --bg:          #262626;   /* lighter neutral charcoal (off-gray, not near-black) */
      --bg-alt:      #2b2b2b;
      --surface:     #2f2f2f;
      --surface-2:   #383838;
      --text:        #dadada;   /* off-white headings (~10:1, not pure white — avoids halation) */
      --text-body:   #c2c2c2;   /* body ~8:1 — comfortable AAA for long reading */
      --text-muted:  #9a9a9a;   /* secondary ~4.6:1 (AA) */
      --text-faint:  #707070;
      --border:      #3c3c3c;
      --border-soft: rgba(255, 255, 255, 0.07);
      --border-strong: #4d4d4d;

      --accent:        #a594cf;   /* lightened plum — readable on charcoal */
      --accent-hover:  #bcaede;
      --accent-soft:   rgba(165, 148, 207, 0.14);
      --accent-on-dark: #a594cf;
      --brand-blue:    #8aa6cf;   /* steel blue, lightened for dark bg */
      --coral:         #d2897b;   /* coral rule, lightened for dark bg */

      /* 2+1: one highlight + status collapsed to accent/neutral/highlight */
      --highlight:      #d9a652;
      --highlight-soft: rgba(217, 166, 82, 0.16);
      --tag-new:        var(--highlight);  --tag-new-bg:      var(--highlight-soft);
      --tag-progress:   var(--highlight);  --tag-progress-bg: var(--highlight-soft);
      --tag-done:       var(--accent);     --tag-done-bg:     var(--accent-soft);
      --tag-soon:       var(--text-muted); --tag-soon-bg:     var(--surface-2);

      --dom-1: var(--accent); --dom-2: var(--accent); --dom-3: var(--accent);
      --dom-4: var(--accent); --dom-5: var(--accent); --dom-6: var(--accent);
    }
    @media (prefers-color-scheme: dark) {
      :root[data-theme="auto"] {
        color-scheme: dark;
        --bg:          #262626;   /* lighter neutral charcoal */
        --bg-alt:      #2b2b2b;
        --surface:     #2f2f2f;
        --surface-2:   #383838;
        --text:        #dadada;   /* off-white headings (~10:1) */
        --text-body:   #c2c2c2;   /* body ~8:1 — comfortable AAA */
        --text-muted:  #9a9a9a;
        --text-faint:  #707070;
        --border:      #3c3c3c;
        --border-soft: rgba(255, 255, 255, 0.07);
        --border-strong: #4d4d4d;

        --accent:        #a594cf;
        --accent-hover:  #bcaede;
        --accent-soft:   rgba(165, 148, 207, 0.14);
        --accent-on-dark: #a594cf;
        --brand-blue:    #8aa6cf;
        --coral:         #d2897b;

        --highlight:      #d9a652;
        --highlight-soft: rgba(217, 166, 82, 0.16);
        --tag-new:        var(--highlight);  --tag-new-bg:      var(--highlight-soft);
        --tag-progress:   var(--highlight);  --tag-progress-bg: var(--highlight-soft);
        --tag-done:       var(--accent);     --tag-done-bg:     var(--accent-soft);
        --tag-soon:       var(--text-muted); --tag-soon-bg:     var(--surface-2);

        --dom-1: var(--accent); --dom-2: var(--accent); --dom-3: var(--accent);
        --dom-4: var(--accent); --dom-5: var(--accent); --dom-6: var(--accent);
      }
    }

    *, *::before, *::after { box-sizing: border-box; }
    /* Gentle fluid root: 16px → 17px across the viewport so all rem-based type/space
       breathes a little on big screens. Bounded well under WCAG's 2.5× so 200% zoom
       stays fully effective (the more type tracks the viewport, the less it tracks zoom). */
    html {
      font-size: clamp(1rem, 0.975rem + 0.15vw, 1.0625rem);
      -webkit-text-size-adjust: 100%;
      scroll-behavior: smooth;
      background-color: var(--bg);
    }
    body {
      margin: 0;
      font-family: var(--font-body);
      font-size: var(--fs-body);
      line-height: 1.65;
      color: var(--text-body);
      background: transparent;
      font-feature-settings: "kern", "liga", "ss01";
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* Typography discipline */
    h1, h2, h3, .display { text-wrap: balance; }
    p, li                { text-wrap: pretty; }
    .prose p, .prose li  { max-width: var(--prose-width); }
    p { widows: 2; orphans: 2; margin: 0 0 var(--s-md); }
    .nobreak { white-space: nowrap; }

    h1, h2, h3 {
      font-family: var(--font-display);
      color: var(--text);
      line-height: 1.12;
      letter-spacing: -0.022em;
      margin: 0;
      font-weight: 700;
    }
    h1 { font-size: var(--fs-h1); }
    h2 { font-size: var(--fs-h2); font-weight: 700; }
    h3 { font-size: var(--fs-h3); font-weight: 600; }

    a {
      color: var(--accent);
      text-decoration: none;
    }
    a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
    a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

    code, kbd, samp {
      font-family: var(--font-mono);
      font-size: 0.92em;
      background: var(--surface-2);
      padding: 1.5px 6px;
      border-radius: var(--r-sm);
      border: 1px solid var(--border-soft);
    }
    pre {
      font-family: var(--font-mono);
      font-size: var(--fs-small);
      line-height: var(--lh-body);
      background: var(--code-bg);
      color: var(--code-fg);
      border-radius: var(--r-md);
      padding: var(--s-md);
      overflow-x: auto;
      border: 1px solid var(--border);
    }
    pre code { background: none; padding: 0; border: 0; color: inherit; }

    /* Layout helpers */
    .container {
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 var(--gutter);
    }

    .skip {
      position: absolute; left: -9999px; top: 0;
      background: var(--accent); color: white;
      padding: 8px 16px; border-radius: 0 0 var(--r-md) 0;
      font-family: var(--font-display); font-size: var(--fs-small);
      z-index: 100;
    }
    .skip:focus { left: 0; }

    /* ============ HEADER (dark) ============ */
    .site-header {
      color: var(--text-body);
      border-bottom: 1px solid var(--border);
      padding: var(--s-md) 0;
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(10px);
      background: rgba(243, 238, 223, 0.86);
    }
    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--s-lg);
    }
    .brand {
      font-family: var(--font-display);
      font-size: var(--fs-body);
      color: var(--d-text);
      text-decoration: none;
      font-weight: 700;
      letter-spacing: -0.012em;
      display: inline-flex;
      align-items: baseline;
      gap: 10px;
    }
    .brand:hover { text-decoration: none; color: var(--accent-on-dark); }
    .brand .sep { color: var(--d-muted); font-weight: 400; }
    .brand .dim {
      color: var(--d-muted);
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      font-weight: 400;
      letter-spacing: var(--tracking-label);
    }
    @media (max-width: 640px) { .brand .dim, .brand .sep { display: none; } }

    .nav-links {
      display: flex; gap: var(--s-lg);
      font-family: var(--font-display);
      font-size: var(--fs-small);
      font-weight: 500;
    }
    .nav-links a {
      color: var(--d-body);
      text-decoration: none;
    }
    .nav-links a:hover { color: var(--d-text); text-decoration: none; }
    @media (max-width: 640px) { .nav-links { display: none; } }

    /* dark header surface — the light value above is a hardcoded rgba, not a token */
    [data-theme="dark"] .site-header { background: rgba(20, 20, 15, 0.86); }
    @media (prefers-color-scheme: dark) {
      :root[data-theme="auto"] .site-header { background: rgba(20, 20, 15, 0.86); }
    }

    /* ============ THEME TOGGLE (issue #1) ============ */
    .nav .brand { margin-right: auto; }   /* push links + toggle to the right */
    .theme-toggle {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      padding: 3px;
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      background: var(--surface-2);
    }
    .theme-toggle button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 26px;
      padding: 0;
      border: 0;
      border-radius: var(--r-sm);
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 14px;
      line-height: 1;
      transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
    }
    .theme-toggle button:hover { color: var(--text); }
    .theme-toggle button[aria-pressed="true"] {
      background: var(--surface);
      color: var(--accent);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
    }
    .theme-toggle button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

    /* ============ HERO ============ */
    .hero {
      background: transparent;
      color: var(--text-body);
      padding: var(--s-4xl) 0 var(--s-3xl);
      position: relative;
      overflow: hidden;
    }
    .hero-inner {
      max-width: 820px;
      margin: 0 auto;
      text-align: center;
    }
    .hero .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: var(--s-sm);
      font-family: var(--font-mono);
      font-size: var(--fs-caption);
      color: var(--text-muted);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: var(--s-xl);
      padding: 6px 14px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--surface);
    }
    .hero .eyebrow .dot-live {
      width: 6px; height: 6px;
      background: var(--tag-done);
      border-radius: 50%;
      animation: pulse 2s var(--ease) infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%      { opacity: 0.5; transform: scale(0.85); }
    }

    .hero h1.display {
      font-family: var(--font-display);
      font-size: clamp(3rem, 7vw, 5.5rem);
      font-weight: 800;
      letter-spacing: -0.035em;
      color: var(--text);
      line-height: 0.98;
      margin: 0 0 var(--s-md);
    }
    .hero h1.display .accent-word {
      color: var(--accent);
    }
    .hero h1.display .sub {
      display: block;
      font-size: 0.42em;
      font-weight: 600;
      color: var(--text-body);
      letter-spacing: -0.012em;
      margin-top: var(--s-md);
      line-height: 1.15;
    }

    .hero-lead {
      font-family: var(--font-body);
      font-size: var(--fs-body);
      line-height: var(--lh-relaxed);
      color: var(--text-body);
      max-width: 52ch;
      margin: var(--s-lg) auto var(--s-xl);
    }

    .hero-actions {
      display: inline-flex; flex-wrap: wrap; gap: var(--s-md);
      justify-content: center;
    }

    .btn {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: var(--fs-small);
      padding: 11px 20px;
      border-radius: var(--r-md);
      border: 1px solid transparent;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: var(--s-sm);
      transition: background var(--dur-fast) var(--ease),
                  border-color var(--dur-fast) var(--ease),
                  transform var(--dur-fast) var(--ease),
                  color var(--dur-fast) var(--ease);
      cursor: pointer;
      line-height: 1.2;
    }
    .btn-primary { background: var(--accent); color: white; }
    .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); text-decoration: none; color: white; }
    .btn-ghost-dark { background: transparent; color: var(--text); border-color: var(--border-strong); }
    .btn-ghost-dark:hover { background: var(--surface); border-color: var(--text-muted); color: var(--text); text-decoration: none; transform: translateY(-1px); }
    .btn-ghost-light { background: transparent; color: var(--text); border-color: var(--border-strong); }
    .btn-ghost-light:hover { background: var(--surface-2); color: var(--text); text-decoration: none; transform: translateY(-1px); }

    /* Tag chips — roadmap.sh style */
    .tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: var(--font-mono);
      font-size: var(--fs-2xs);
      font-weight: 500;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      padding: 3px 9px;
      border-radius: var(--r-sm);
      line-height: 1.4;
    }
    .tag-new      { background: var(--tag-new-bg);      color: var(--tag-new); }
    .tag-progress { background: var(--tag-progress-bg); color: var(--tag-progress); }
    .tag-done     { background: var(--tag-done-bg);     color: var(--tag-done); }
    .tag-soon     { background: var(--tag-soon-bg);     color: var(--tag-soon); }

    /* Hero stats row (small, below CTA) */
    .hero-stats {
      margin-top: var(--s-2xl);
      display: inline-flex;
      gap: var(--s-2xl);
      flex-wrap: wrap;
      justify-content: center;
    }
    .hero-stats .hstat {
      font-family: var(--font-mono);
      font-size: var(--fs-caption);
      color: var(--text-muted);
      letter-spacing: var(--tracking-label);
    }
    .hero-stats .hstat strong {
      color: var(--text);
      font-family: var(--font-display);
      font-size: var(--fs-body);
      font-weight: 700;
      letter-spacing: -0.01em;
      margin-right: 8px;
    }

    /* ============ SECTIONS (light) ============ */
    section { padding: var(--s-4xl) 0; background: transparent; }
    section.alt { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

    .section-head { margin-bottom: var(--s-2xl); max-width: 60ch; }
    .section-head .eyebrow {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: var(--fs-caption);
      color: var(--accent);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: var(--s-md);
      font-weight: 500;
    }
    .section-head h2 {
      font-size: clamp(1.875rem, 3.4vw, 2.625rem);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.024em;
      margin-bottom: var(--s-md);
      color: var(--text);
    }
    .section-head p {
      font-size: var(--fs-body);
      color: var(--text-body);
      line-height: var(--lh-relaxed);
      margin: 0;
      max-width: 60ch;
    }

    /* ============ JOURNEY (grouped tiles, Anthropic-style) ============ */
    .journey-group { margin-bottom: var(--s-2xl); }
    .journey-group:last-child { margin-bottom: 0; }

    .journey-step {
      display: flex;
      align-items: center;
      gap: var(--s-md);
      margin-bottom: var(--s-md);
    }
    .journey-step .step-num {
      font-family: var(--font-mono);
      font-size: var(--fs-caption);
      color: var(--text-muted);
      background: var(--surface-2);
      padding: 4px 10px;
      border-radius: var(--r-sm);
      letter-spacing: var(--tracking-label);
      font-weight: 500;
    }
    .journey-step h3 {
      font-size: 1.1875rem;
      font-weight: 700;
      letter-spacing: -0.014em;
      color: var(--text);
      margin: 0;
    }

    .journey-tiles {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s-md);
    }
    @media (max-width: 900px) { .journey-tiles { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) { .journey-tiles { grid-template-columns: 1fr; } }

    .tile {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: var(--s-lg);
      display: flex;
      flex-direction: column;
      gap: var(--s-sm);
      transition: border-color var(--dur-fast) var(--ease),
                  transform var(--dur-fast) var(--ease),
                  box-shadow var(--dur-fast) var(--ease);
      text-decoration: none;
      color: inherit;
      position: relative;
    }
    .tile:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0,0,0,0.04);
      border-color: var(--accent);
      text-decoration: none;
      color: inherit;
    }
    .tile-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: var(--s-sm);
      margin-bottom: 4px;
    }
    .tile-eyebrow {
      font-family: var(--font-mono);
      font-size: var(--fs-2xs);
      color: var(--text-muted);
      letter-spacing: var(--tracking-wide);
      text-transform: lowercase;
    }
    .tile h4 {
      font-family: var(--font-display);
      font-size: 1.1875rem;
      font-weight: 700;
      letter-spacing: -0.014em;
      color: var(--text);
      margin: 4px 0 6px;
      line-height: 1.2;
    }
    .tile p {
      font-size: var(--fs-small);
      color: var(--text-body);
      line-height: var(--lh-body);
      margin: 0;
      flex: 1;
    }
    .tile .tile-foot {
      margin-top: var(--s-md);
      padding-top: var(--s-sm);
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--s-sm);
    }
    .tile .weight {
      font-family: var(--font-mono);
      font-size: var(--fs-caption);
      color: var(--accent);
      font-weight: 500;
    }
    .tile .arrow {
      font-family: var(--font-mono);
      color: var(--text-muted);
      font-size: 1.125rem;
      transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
    }
    .tile:hover .arrow { transform: translateX(3px); color: var(--accent); }

    /* Domain hue accents on left edge of tiles */
    .tile.d1 { border-left: 3px solid var(--dom-1); }
    .tile.d2 { border-left: 3px solid var(--dom-2); }
    .tile.d3 { border-left: 3px solid var(--dom-3); }
    .tile.d4 { border-left: 3px solid var(--dom-4); }
    .tile.d5 { border-left: 3px solid var(--dom-5); }
    .tile.d6 { border-left: 3px solid var(--dom-6); }

    /* ============ SAMPLE LESSON (chat-trace styled, light) ============ */
    .trace {
      display: grid;
      gap: var(--s-sm);
      max-width: 720px;
    }
    .trace-prompt {
      font-family: var(--font-mono);
      font-size: var(--fs-small);
      color: var(--text-muted);
      border-left: 2px solid var(--border-strong);
      padding: var(--s-sm) 0 var(--s-sm) var(--s-md);
      line-height: var(--lh-body);
    }
    .trace-prompt::before {
      content: "Q ";
      color: var(--accent);
      font-weight: 600;
    }
    .trace-reply {
      font-family: var(--font-body);
      background: var(--surface);
      border: 1px solid var(--border);
      border-left: 3px solid var(--accent);
      border-radius: var(--r-lg);
      padding: var(--s-md) var(--s-lg);
      font-size: var(--fs-body);
      line-height: var(--lh-relaxed);
      color: var(--text-body);
    }
    .trace-reply p:last-child { margin-bottom: 0; }
    .trace-reply strong { color: var(--text); }
    .trace-reply em { color: var(--text); font-style: normal; font-weight: 600; }
    .trace-reply .source-note {
      font-family: var(--font-mono);
      font-size: var(--fs-caption);
      color: var(--text-muted);
      margin-top: var(--s-sm);
      padding-top: var(--s-sm);
      border-top: 1px dashed var(--border);
    }

    /* ============ PROGRESS STATS (light) ============ */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      overflow: hidden;
    }
    @media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 540px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }

    .stat {
      padding: var(--s-lg);
      border-right: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .stat:last-child, .stat:nth-child(6n) { border-right: none; }
    @media (max-width: 900px) {
      .stat:nth-child(3n) { border-right: none; }
      .stat { border-right: 1px solid var(--border); }
    }
    .stat-label {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      color: var(--text-muted);
      text-transform: lowercase;
      letter-spacing: var(--tracking-wide);
    }
    .stat-value {
      font-family: var(--font-display);
      font-size: 1.875rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.05;
      margin-top: 6px;
      letter-spacing: -0.024em;
    }
    .stat-value .mark {
      color: var(--text-muted);
      font-family: var(--font-mono);
      font-size: 0.55em;
      margin-left: 4px;
      font-weight: 500;
    }

    /* ============ FOOTER (light) ============ */
    .site-footer {
      padding: var(--s-3xl) 0 var(--s-2xl);
      background: var(--bg-alt);
      border-top: 1px solid var(--border);
      color: var(--text-muted);
      font-size: var(--fs-small);
    }
    /* RAM pattern (repeat-auto-minmax): browser picks the column count from the
       available width — no breakpoints needed. Collapses to 1 column on phones
       on its own when each column can't keep its 200px minimum. */
    .footer-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
      gap: var(--s-2xl);
    }

    .footer-grid h4 {
      font-family: var(--font-display);
      font-size: var(--fs-small);
      font-weight: 700;
      color: var(--text);
      margin: 0 0 var(--s-sm);
      letter-spacing: -0.012em;
    }
    .footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
    .footer-grid a {
      color: var(--text-body);
      text-decoration: none;
      font-family: var(--font-body);
      font-size: var(--fs-small);
    }
    .footer-grid a:hover { color: var(--accent); text-decoration: underline; }
    .footer-grid p {
      color: var(--text-muted);
      font-size: var(--fs-small);
      line-height: var(--lh-body);
      margin: 0;
      max-width: 36ch;
    }
    .footer-bottom {
      margin-top: var(--s-2xl);
      padding-top: var(--s-md);
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: var(--s-md);
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-faint);
      letter-spacing: var(--tracking-label);
    }

    /* ============ MOTION ============ */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity var(--dur-slow) var(--ease),
                  transform var(--dur-slow) var(--ease);
    }
    .reveal.in {
      opacity: 1;
      transform: translateY(0);
    }

    .hero .stagger { opacity: 0; transform: translateY(8px); animation: rise var(--dur-slow) var(--ease) forwards; }
    .hero .stagger:nth-child(1) { animation-delay:    0ms; }
    .hero .stagger:nth-child(2) { animation-delay:   80ms; }
    .hero .stagger:nth-child(3) { animation-delay:  160ms; }
    .hero .stagger:nth-child(4) { animation-delay:  240ms; }
    .hero .stagger:nth-child(5) { animation-delay:  320ms; }
    @keyframes rise {
      to { opacity: 1; transform: translateY(0); }
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; }
      .hero .stagger { opacity: 1; transform: none; animation: none; }
      .tile:hover, .btn:hover { transform: none; }
      .hero .eyebrow .dot-live { animation: none; }
      html { scroll-behavior: auto; }
    }

/* ============================================================
   Lesson page specifics
   ============================================================ */
/* Lesson pages share the SAME --page-max frame + --gutter as the landing page
   and the header, so the brand position and the left/right side padding are
   identical on every page. Inside that frame the content fills the middle
   column (no centring voids), with the two fixed nav rails on either side. */
.lesson-shell {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  /* row-gap:0 is deliberate — see .lesson-side note below. column-gap only. */
  column-gap: var(--s-3xl);
  row-gap: 0;
  align-items: start;
}
/* 3-column doc-site layout: left lesson nav | content | right TOC (issue #3).
   The shell shares --page-max with the header/landing so the left rail sits
   directly under the brand and the right rail under the nav. The rails hug the
   page gutters; the middle flexes with the viewport (GitHub Docs / Stripe
   pattern). The article inside the middle is capped at a readable measure and
   centred, so the width is filled without stretching prose into a long line. */
.lesson-shell.has-leftnav {
  /* Fluid rails: scale 200→256px with the viewport instead of snapping, and a
     fluid column gap, so laptop↔desktop adapts continuously (not at one breakpoint).
     The MIDDLE column is capped at the content measure (not 1fr) and the whole
     3-column group is centred — so leftover width goes to the OUTER margins, and
     the rails hug the content instead of being flung to the page edges (which
     used to leave big empty voids on both sides of the prose). */
  grid-template-columns:
    clamp(200px, 18vw, 256px)
    minmax(0, 1fr)
    clamp(200px, 18vw, 256px);
  column-gap: clamp(var(--s-lg), 3vw, var(--s-2xl));
}

.lesson-shell > .lesson-header,
.lesson-shell > .lesson-body,
.lesson-shell > .lesson-complete,
.lesson-shell > .quiz,
.lesson-shell > .lesson-nav,
.lesson-shell > .lesson-nav-foot,
.lesson-shell > .lesson-foot {
  grid-column: 1;
  min-width: 0;
}
/* With the left rail present, content moves to the middle column, capped at a
   readable measure and centred so the fluid column fills tidily. */
.lesson-shell.has-leftnav > .lesson-header,
.lesson-shell.has-leftnav > .lesson-body,
.lesson-shell.has-leftnav > .lesson-complete,
.lesson-shell.has-leftnav > .quiz,
.lesson-shell.has-leftnav > .lesson-nav,
.lesson-shell.has-leftnav > .lesson-nav-foot,
.lesson-shell.has-leftnav > .lesson-foot {
  grid-column: 2;
  width: 100%;
  max-width: none;   /* content fills the 1fr middle column — max space, no voids */
}

/* Container-query context: lesson content components (callouts, card grids, the
   syntax teaser) can size to THEIR column via cqi / @container, not the viewport —
   so they adapt the same whether the column is 700px or 860px. Baseline 2023. */
.lesson-body { container-type: inline-size; container-name: lesson; }

/* Left rail — in-phase lesson list. Mirrors .lesson-side sticky behavior. */
.lesson-leftnav {
  grid-column: 1;
  grid-row: 1 / span 9999;
  position: sticky;
  top: 88px;
  align-self: start;
  padding: var(--s-lg) 0 var(--s-md);
  min-width: 0;
}

/* Right rail.
   The sidebar spans every content row so it does NOT inflate row 1 (which would
   push the body ~240px down — the header/body gap bug, issue #5). A finite line
   like `-1` collapses on an implicit-row grid, and `span 99` with a row-gap
   multiplies into thousands of phantom px. The robust combo: row-gap:0 on the
   shell + a large span here (empty implicit rows are 0px when row-gap is 0). */
.lesson-side {
  grid-column: 2;
  grid-row: 1 / span 9999;
  position: sticky;
  top: 88px;
  align-self: start;
  padding: var(--s-lg) 0 var(--s-md);
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  gap: var(--s-lg);
}
/* With the left rail present, the TOC/progress rail moves to column 3. */
.lesson-shell.has-leftnav > .lesson-side { grid-column: 3; }

/* ── Tablet + phone (< 1200px): collapse to a single content column. The right
   TOC drops; the left lesson list becomes a tappable "dropdown" card at the top
   (it is already a <details>, so JS just leaves it closed below this width).
   Content + dropdown share one centred measure so they align. ── */
@media (max-width: 1199px) {
  .lesson-shell,
  .lesson-shell.has-leftnav {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: var(--s-lg);
  }
  /* right TOC + progress rail drops on small screens */
  .lesson-side,
  .lesson-shell.has-leftnav > .lesson-side { display: none; }

  /* left rail → full-width dropdown card above the content */
  .lesson-leftnav {
    grid-column: 1;
    grid-row: auto;
    position: static;
    order: -1;
    width: 100%;
    max-width: 820px;
    margin-inline: auto;
    padding: 0;
  }
  .lesson-leftnav .side-phase {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    padding: 0 var(--s-md);
  }
  .lesson-leftnav .side-phase-summary {
    margin-bottom: 0;
    min-height: 44px;            /* comfortable tap target */
  }
  .lesson-leftnav .side-phase[open] .side-phase-summary {
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--s-sm);
  }
  .lesson-leftnav .side-phase[open] .phase-nav-list { padding-bottom: var(--s-sm); }

  .lesson-shell > .lesson-header,
  .lesson-shell > .lesson-body,
  .lesson-shell > .lesson-complete,
  .lesson-shell > .quiz,
  .lesson-shell > .lesson-nav,
  .lesson-shell > .lesson-nav-foot,
  .lesson-shell > .lesson-foot,
  .lesson-shell.has-leftnav > .lesson-header,
  .lesson-shell.has-leftnav > .lesson-body,
  .lesson-shell.has-leftnav > .lesson-complete,
  .lesson-shell.has-leftnav > .quiz,
  .lesson-shell.has-leftnav > .lesson-nav,
  .lesson-shell.has-leftnav > .lesson-nav-foot,
  .lesson-shell.has-leftnav > .lesson-foot {
    grid-column: 1;
    max-width: 820px;
    margin-inline: auto;
  }
}
.lesson-side .side-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: var(--s-sm);
}
.lesson-side .side-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.lesson-side .side-back:hover { color: var(--accent); text-decoration: none; }
.lesson-side .side-back .arrow { font-family: var(--font-mono); color: var(--text-muted); }
.lesson-side .side-back:hover .arrow { color: var(--accent); }
.lesson-side .side-context {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 4px;
  letter-spacing: var(--tracking-label);
}

.lesson-side .toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  border-left: 1px solid var(--border);
}
.lesson-side .toc-list a {
  display: block;
  padding: 4px var(--s-md);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-muted);
  text-decoration: none;
  line-height: 1.4;
  border-left: 2px solid transparent;
  margin-left: -1px;
}
.lesson-side .toc-list a:hover { color: var(--text); text-decoration: none; }
.lesson-side .toc-list a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 500;
}

/* In-phase lesson nav — jump between sibling lessons without a roadmap roundtrip (issue #3).
   Lives in the dedicated .lesson-leftnav rail. */
.lesson-leftnav .side-phase { margin: 0; }
.lesson-leftnav .side-phase-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-sm);
  cursor: pointer;
  list-style: none;            /* hide native marker (most browsers) */
  margin-bottom: var(--s-sm);
  padding: 4px 0;
  user-select: none;
  /* label typography (matches .side-label) */
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.lesson-leftnav .side-phase-summary > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.lesson-leftnav .side-phase-summary::-webkit-details-marker { display: none; }
.lesson-leftnav .side-phase-summary::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg);    /* chevron down = expanded */
  transition: transform 0.18s ease;
  flex: none;
}
.lesson-leftnav .side-phase:not([open]) .side-phase-summary::after { transform: rotate(-45deg); }
.lesson-leftnav .side-phase-summary:hover { color: var(--text); }
.lesson-leftnav .side-phase-summary:hover::after { border-color: var(--text); }
.lesson-leftnav .side-phase-count {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0;
  color: var(--text-faint);
  font-weight: 500;
  flex: none;
}

.lesson-leftnav .phase-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2px;
  border-left: 1px solid var(--border);
}
.lesson-leftnav .phase-nav-link {
  display: flex;
  align-items: baseline;
  gap: var(--s-sm);
  padding: 5px var(--s-md);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -1px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.lesson-leftnav .phase-nav-link .pn-num {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-faint);
  flex: none;
  min-width: 2.1em;
}
.lesson-leftnav .phase-nav-link:hover {
  color: var(--text);
  background: var(--surface);
  text-decoration: none;
}
.lesson-leftnav .phase-nav-link:hover .pn-num { color: var(--text-muted); }
.lesson-leftnav .phase-nav-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.lesson-leftnav .phase-nav-link.is-current {
  color: var(--accent);
  border-left-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}
.lesson-leftnav .phase-nav-link.is-current .pn-num { color: var(--accent); }

/* ── Rail-collapse "reading mode" (issue #47) ─────────────────────────────
   The toggle shrinks the whole left rail to a thin numbers-only strip so the
   reader can focus on the content. Desktop only — under 1200px the rail is a
   dropdown, so both the toggle and the railed layout are disabled there. */
.leftnav-rail-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;            /* fill the rail so the arrow matches the lesson buttons below */
  height: 28px;
  margin: 0 0 var(--s-sm);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.leftnav-rail-toggle:hover { color: var(--text); border-color: var(--text-faint); }
.leftnav-rail-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.leftnav-rail-toggle .rail-ico {
  width: 7px;
  height: 7px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);       /* points left = collapse */
  transition: transform 0.18s ease;
}
.leftnav-rail-toggle[aria-pressed="true"] .rail-ico { transform: rotate(-135deg); } /* points right = expand */
/* under 1200px the rail is a dropdown, not a column — the rail toggle is moot */
@media (max-width: 1199px) { .leftnav-rail-toggle { display: none; } }

@media (min-width: 1200px) {
  /* no vertical collapse on desktop — the list is permanently open, so the
     summary is a plain heading (no pointer, no chevron). */
  .lesson-leftnav .side-phase-summary { cursor: default; }
  .lesson-leftnav .side-phase-summary::after { display: none; }

  /* Wrap the whole rail in a surface card so it reads as elevated above the
     page background instead of floating loose. */
  .lesson-leftnav {
    padding: var(--s-md);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
  }

  /* thin strip: first grid track collapses to a numbers-wide rail.
     Widened slightly to keep breathing room now that the rail has padding. */
  .lesson-shell.has-leftnav.nav-railed {
    grid-template-columns: 64px minmax(0, 1fr) clamp(200px, 18vw, 256px);
  }
  /* hide the phase label/chevron + lesson titles; show only the numbers */
  .nav-railed .lesson-leftnav .side-phase-summary { display: none; }
  .nav-railed .lesson-leftnav .pn-title { display: none; }
  .nav-railed .lesson-leftnav .phase-nav-list { border-left: 0; gap: 4px; }
  .nav-railed .lesson-leftnav .phase-nav-link {
    justify-content: center;
    padding: 7px 0;
    margin-left: 0;
    border-left: 0;
    border-radius: var(--r-sm);
  }
  .nav-railed .lesson-leftnav .phase-nav-link .pn-num {
    min-width: 0;
    font-size: var(--fs-xs);
  }
  .nav-railed .lesson-leftnav .phase-nav-link.is-current { border-left: 0; }
}

.lesson-side .side-progress {
  padding: var(--s-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: grid;
  gap: 6px;
}
.lesson-side .progress-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
}
.lesson-side .progress-row .label { color: var(--text-muted); }
.lesson-side .progress-row .value { color: var(--text); font-weight: 600; }
.lesson-header {
  padding: var(--s-2xl) 0 var(--s-lg);
  border-bottom: 1px solid var(--border);
  /* margin-bottom intentionally absent — .lesson-shell grid-gap (--s-3xl) handles separation */
}
.lesson-crumbs {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--s-md);
}
.lesson-crumbs a { color: var(--text-muted); }
.lesson-crumbs a:hover { color: var(--accent); }
.lesson-crumbs .sep { margin: 0 8px; color: var(--text-faint); }
.lesson-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.08;
  color: var(--text);
  margin: 0 0 var(--s-md);
}
.lesson-lead {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  margin: 0 0 var(--s-md);
}
.lesson-meta {
  display: inline-flex; gap: var(--s-lg); flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  letter-spacing: var(--tracking-label);
}
.lesson-meta strong { color: var(--text); font-family: var(--font-display); font-size: var(--fs-small); margin-right: 6px; font-weight: 700; }

/* ── Reader text-size control (injected by app.js) ────────────────────────────
   Sits in line with the breadcrumb/roadmap row, pushed to the right edge of the
   content column — i.e. just before the right TOC rail. A−/A+ scale .lesson-body
   via --reader-scale; the percent readout doubles as a reset. Per-device pref. */
.lesson-crumbs.has-reader-size {
  display: flex;
  align-items: center;
  gap: var(--s-md);
}
.lesson-crumbs.has-reader-size .reader-size { margin-left: auto; }
/* Fallback title-row layout (only used if the crumbs are absent). */
.lesson-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-lg);
  flex-wrap: wrap;
}
.lesson-title-row .lesson-title { margin-bottom: 0; flex: 1 1 auto; }
.reader-size {
  flex: none;
  display: inline-flex;
  align-items: stretch;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  overflow: hidden;            /* clip segment hovers to the rounded corners */
  font-family: var(--font-mono);
}
.reader-size button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.reader-size button + button { border-left: 1px solid var(--border); }  /* segmented dividers */
.reader-size button:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.reader-size button:active:not(:disabled) { background: var(--border); }
.reader-size button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.reader-size button:disabled { opacity: 0.35; cursor: default; }
/* The classic reading-control idiom: a small A and a large A. */
.reader-size .rs-dec { font-size: 10px; }
.reader-size .rs-inc { font-size: 14px; }
.reader-size .rs-readout {
  font-size: 10px;
  min-width: 32px;
  letter-spacing: 0;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;   /* readout width doesn't jump as % changes */
}
.reader-size .rs-readout:hover:not(:disabled) { color: var(--text-muted); }

.lesson-body {
  /* Base 1.2375rem (1.125rem + 10%), scaled live by the reader text-size control. */
  font-size: calc(1.2375rem * var(--reader-scale, 1));
  line-height: 1.72;
  color: var(--text-body);
  /* header→body breathing room — the shell now has row-gap:0, so this margin
     carries the gap instead of the grid (issue #5). ~48px under the header. */
  margin-top: var(--s-2xl);
}
/* On mobile the shell uses row-gap again (single column), so drop the margin to
   avoid stacking it on top of the gap. */
@media (max-width: 960px) {
  .lesson-body { margin-top: 0; }
}
.lesson-body p, .lesson-body li { max-width: 78ch; }
.lesson-body h2 { font-size: 1.625rem; margin-top: var(--s-2xl); margin-bottom: var(--s-md); color: var(--text); letter-spacing: -0.02em; }
.lesson-body h3 { font-size: var(--fs-h3); margin-top: var(--s-xl); margin-bottom: var(--s-sm); color: var(--text); }
.lesson-body strong { color: var(--text); }
.lesson-body em { font-style: italic; color: var(--text); }
.lesson-body ul, .lesson-body ol { padding-left: var(--s-lg); }
.lesson-body li { margin-bottom: var(--s-sm); }
.lesson-body blockquote {
  border-left: 3px solid var(--accent);
  background: var(--surface);
  padding: var(--s-md) var(--s-lg);
  margin: var(--s-lg) 0;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--text-body);
}
.lesson-body .source-cite {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin-top: var(--s-sm);
  padding-top: var(--s-sm);
  border-top: 1px dashed var(--border);
}
.lesson-body code {
  font-size: 0.92em;
}

/* Callouts (idea, warning, definition) */
.callout {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-md) var(--s-lg);
  margin: var(--s-lg) 0;
  background: var(--surface);
}
.callout-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  margin-bottom: var(--s-sm);
}
.callout.idea       { border-left: 3px solid var(--accent); }
.callout.idea       .callout-label { background: var(--accent-soft); color: var(--accent); }
.callout.definition { border-left: 3px solid var(--accent); }
.callout.definition .callout-label { background: var(--accent-soft); color: var(--accent); }
.callout.warning    { border-left: 3px solid var(--highlight); }
.callout.warning    .callout-label { background: var(--highlight-soft); color: var(--highlight); }
.callout.story      { border-left: 3px solid var(--accent); }
.callout.story      .callout-label { background: var(--accent-soft); color: var(--accent); }
.callout.exam       { border-left: 3px solid var(--tag-new); }
.callout.exam       .callout-label { background: var(--tag-new-bg); color: var(--tag-new); }
.callout.exam .exam-level { font-weight: 700; }

/* Quiz component */
.quiz {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-xl);
  margin: var(--s-2xl) 0;
}
.quiz-header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-md); margin-bottom: var(--s-lg); flex-wrap: wrap; }
.quiz-title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--text);
  margin: 0;
}
.quiz-progress {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  letter-spacing: var(--tracking-label);
}
.qa-question { margin: 0 0 var(--s-lg); }
.qa-question + .qa-question {
  padding-top: var(--s-lg);
  border-top: 1px solid var(--border);
}
.qa-num {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--accent);
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
}
.qa-stem {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text);
  margin: 6px 0 var(--s-md);
  line-height: var(--lh-snug);
}
.qa-options { display: grid; gap: var(--s-sm); margin: 0 0 var(--s-md); }
.qa-option {
  display: flex;
  align-items: flex-start;
  gap: var(--s-md);
  padding: var(--s-md);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: var(--lh-snug);
  color: var(--text-body);
  text-align: left;
  width: 100%;
}
.qa-option:hover:not([disabled]) { border-color: var(--accent); background: var(--accent-soft); }
.qa-option[disabled] { cursor: default; }
.qa-option .qa-letter {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.qa-option.correct {
  border-color: var(--tag-done);
  background: var(--tag-done-bg);
}
.qa-option.correct .qa-letter { background: var(--tag-done); color: white; }
.qa-option.wrong {
  border-color: var(--tag-progress);
  background: var(--tag-progress-bg);
}
.qa-option.wrong .qa-letter { background: var(--tag-progress); color: white; }
.qa-explain {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--text-body);
  padding: var(--s-md);
  background: var(--bg-alt);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  margin-top: var(--s-sm);
  line-height: var(--lh-body);
}
.qa-explain strong { color: var(--text); font-weight: 600; }

/* Short-answer textarea */
.qa-text {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: var(--s-md);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  resize: vertical;
  min-height: 90px;
  line-height: var(--lh-snug);
}
.qa-text:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }

/* Result block (copy-pasteable) */
.quiz-result {
  margin-top: var(--s-lg);
  padding: var(--s-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: var(--lh-body);
  color: var(--text-body);
  white-space: pre-wrap;
  display: none;
}
.quiz-result.show { display: block; }
.quiz-actions {
  display: flex; gap: var(--s-md); flex-wrap: wrap;
  margin-top: var(--s-lg);
}

/* Lesson nav (compact) */
.lesson-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-md);
  margin: var(--s-2xl) 0;
  padding-top: var(--s-lg);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.lesson-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: transparent;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.lesson-nav a:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; color: var(--text); }
.lesson-nav .ln-arrow { font-family: var(--font-mono); color: var(--text-muted); font-size: 1rem; }
.lesson-nav a:hover .ln-arrow { color: var(--accent); }
.lesson-nav .ln-meta { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); letter-spacing: var(--tracking-label); }

/* Progress badge on lesson header */
.lesson-status {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  background: var(--tag-soon-bg);
  color: var(--tag-soon);
}
.lesson-status[data-status="reading"] { background: var(--tag-new-bg);      color: var(--tag-new); }
.lesson-status[data-status="quiz"]    { background: var(--tag-progress-bg); color: var(--tag-progress); }
.lesson-status[data-status="passed"]  { background: var(--tag-done-bg);     color: var(--tag-done); }

/* =================================================================
   StretchText — depth toggle (basic / medium / deep)
   Reader picks depth; paragraphs swap density without navigation.
   ================================================================= */
.depth-toggle {
  display: inline-flex;
  gap: 0;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  margin: 0 0 var(--s-md);
}
.depth-toggle button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 500;
  font-size: var(--fs-small);
  transition: background 0.15s, color 0.15s;
}
.depth-toggle button:hover { color: var(--text); }
.depth-toggle button[aria-pressed="true"] {
  background: var(--text);
  color: var(--bg);
}

/* By default all depth blocks hidden until JS picks one. JS adds [data-depth] on <body>. */
[data-depth="basic"] .depth-medium,
[data-depth="basic"] .depth-deep      { display: none; }
[data-depth="medium"] .depth-deep     { display: none; }
/* deep shows all */

.depth-block {
  position: relative;
  padding: var(--s-md) var(--s-lg);
  border-left: 3px solid var(--border);
  background: var(--surface);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: var(--s-md) 0;
}
.depth-block.depth-medium { border-left-color: var(--tag-progress); }
.depth-block.depth-deep   { border-left-color: var(--accent); }
.depth-block::before {
  content: attr(data-label);
  position: absolute;
  top: -10px;
  left: var(--s-md);
  background: var(--bg);
  padding: 0 8px;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* =================================================================
   Practical redirect — external hands-on with mark-done
   ================================================================= */
.practical-redirect {
  display: grid;
  gap: var(--s-md);
  padding: var(--s-lg);
  margin: var(--s-lg) 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--tag-new);
  border-radius: var(--r-md);
}
.practical-redirect h3 {
  margin: 0;
  font-size: var(--fs-h3);
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  gap: 8px;
}
.practical-redirect h3::before {
  content: "🛠️";
  font-size: 1.1em;
}
.practical-redirect .pr-pitch {
  margin: 0;
  color: var(--text-body);
  font-size: var(--fs-body);
}
.practical-redirect .pr-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--text);
  color: var(--bg);
  text-decoration: none;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: var(--fs-small);
  width: max-content;
  transition: background 0.15s;
}
.practical-redirect .pr-link:hover { background: var(--accent); }
.practical-redirect .pr-link::after { content: "↗"; font-weight: 400; }
.practical-redirect .pr-steps {
  margin: 0;
  padding-left: var(--s-lg);
  color: var(--text-body);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}
.practical-redirect .pr-steps li { margin-bottom: 4px; }
.practical-redirect .pr-done {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--s-md);
  background: var(--bg-alt);
  border-radius: var(--r-sm);
  cursor: pointer;
  user-select: none;
  font-size: var(--fs-small);
  color: var(--text);
}
.practical-redirect .pr-done input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--tag-done);
}
.practical-redirect .pr-done.is-done {
  background: var(--tag-done-bg);
  color: var(--tag-done);
  font-weight: 600;
}

/* =================================================================
   Roadmap home — clickable domain node-map
   ================================================================= */
.roadmap {
  display: grid;
  gap: var(--s-3xl);            /* more breathing room between phases */
  padding: var(--s-xl) 0;
}
/* Crease divider after each phase except the last */
.roadmap-phase + .roadmap-phase {
  padding-top: var(--s-3xl);
  border-top: 1px dashed var(--border-strong);
  position: relative;
}
.roadmap-phase + .roadmap-phase::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
}
.roadmap-phase {
  display: grid;
  gap: var(--s-md);
}
.roadmap-phase-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-md);
  padding-bottom: var(--s-sm);
  border-bottom: 1px solid var(--border);
}
.roadmap-phase-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  letter-spacing: var(--tracking-snug);
  line-height: var(--lh-heading);
}
.roadmap-phase-head .roadmap-progress {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  font-weight: 600;
}
.roadmap-nodes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-md);
}
.roadmap-node {
  display: grid;
  gap: 8px;
  padding: var(--s-md) var(--s-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--text);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  position: relative;
}
.roadmap-node:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(43, 37, 25, 0.08);
}
.roadmap-node .node-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-caption);
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.roadmap-node .node-title {
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1.3;
  color: var(--text);
}
.roadmap-node .node-sub {
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: 1.4;
}
.roadmap-node[data-status="done"]      { border-color: var(--tag-done); background: var(--tag-done-bg); }
.roadmap-node[data-status="progress"]  { border-color: var(--tag-progress); }
.roadmap-node[data-status="todo"]      { border-color: var(--tag-progress); }
.roadmap-node[data-status="weak"]      { border-color: var(--tag-new); }
.roadmap-node[data-status="locked"]    { opacity: 0.55; pointer-events: none; }
.roadmap-node .node-status {
  font-size: var(--fs-caption);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-muted);
}
.roadmap-node[data-status="done"]     .node-status { background: var(--tag-done);     color: var(--tag-text); }
.roadmap-node[data-status="progress"] .node-status { background: var(--tag-progress); color: var(--tag-text); }
.roadmap-node[data-status="todo"]     .node-status { background: var(--tag-progress); color: var(--tag-text); }
.roadmap-node[data-status="weak"]     .node-status { background: var(--tag-new);      color: var(--tag-text); }
.roadmap-countdown {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text);
}
.roadmap-countdown strong { color: var(--accent); font-weight: 700; }

/* Roadmap collapse/expand */
.roadmap-phase-head {
  position: relative;
}
.phase-toggle {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  margin-left: 8px;
}
.phase-toggle:hover { background: var(--accent-soft); }
.roadmap-phase[data-collapsed="false"] .phase-toggle::before { content: "−"; }
.roadmap-phase[data-collapsed="true"]  .phase-toggle::before { content: "+"; }
.phase-toggle { font-size: 0; } /* hide raw textContent */
.phase-toggle::before {
  font-size: 1.15rem;
  font-family: var(--font-mono);
  color: var(--text);
  font-weight: 700;
}
.roadmap-phase[data-collapsed="true"] .roadmap-nodes,
.roadmap-phase[data-collapsed="true"] .phase-sub {
  display: none;
}

/* Bulk toggle button */
.roadmap-bulk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  margin-bottom: var(--s-md);
}
.roadmap-bulk:hover { background: var(--accent-soft); color: var(--text); }

/* =================================================================
   Missing utility classes used by the new roadmap index.html
   ================================================================= */
.wrap {
  max-width: var(--page-max);   /* full-width frame; the landing now matches this (1760) */
  margin: 0 auto;
  padding: 0 var(--gutter);   /* same gutter as the lesson shell → header brand aligns with the left rail */
}
/* .nav + .brand styles preserved from original site-header block above — do not re-declare here */

/* ---- Page atmosphere ----
   Gradient glow field removed (user decision 2026-06-03): kept the approved
   cream + plum theme, dropped the radial-gradient glow + drift animation.
   html owns the base color (--bg); sections sit directly on it. */

.hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  margin: var(--s-lg, 24px) 0 var(--s-md, 16px);
  font-weight: 700;
}
.hero-title .accent { color: var(--accent); }
.hero-sub {
  font-size: var(--fs-h3);
  color: var(--text-body);
  max-width: 60ch;
  margin: 0 0 var(--s-xl, 32px);
  line-height: var(--lh-snug);
}
.hero-meta {
  display: flex;
  gap: var(--s-md, 16px);
  flex-wrap: wrap;
  margin-bottom: var(--s-2xl, 48px);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--fs-caption);
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.eyebrow .pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
}

.phase-sub {
  color: var(--text-muted);
  font-size: var(--fs-small);
  max-width: 65ch;
  margin: -8px 0 var(--s-md, 16px);
}
/* Exam weight — important, so highlighted (accent) and pushed to the right edge.
   The count stays left, just after the title; the weight anchors the right. */
.phase-weight {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}
/* Phases with no exam weight (0, G, H): push the collapse toggle to the right. */
.roadmap-phase-head:not(:has(.phase-weight)) .phase-toggle { margin-left: auto; }

.sources, .about {
  padding: var(--s-2xl, 48px) 0;
  border-top: 1px solid var(--border);
}
.sources h2, .about h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  margin: 0 0 var(--s-md, 16px);
  letter-spacing: var(--tracking-snug);
}
.src-list {
  list-style: none;
  padding: 0;
  margin: var(--s-lg, 24px) 0 0;
  display: grid;
  gap: 10px;
}
.src-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.src-list a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--fs-small);
}
.src-list a:hover { color: var(--accent); }
.src-tier {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--accent);
  font-weight: 600;
  padding: 2px 8px;
  background: var(--accent-soft);
  border-radius: var(--r-sm);
}

.footer-meta { color: var(--text-faint); font-family: var(--font-mono); font-size: var(--fs-caption); }

/* =================================================================
   Cross-cutting mobile tap-target + overflow-wrap fixes (from 2026-05-28 audit)
   Applied at ≤640px only — desktop keeps tight defaults.
   ================================================================= */
@media (max-width: 640px) {
  .phase-toggle { min-width: 44px; min-height: 44px; }
  .roadmap-bulk { min-height: 44px; padding: 10px 14px; }
  .lesson-side .side-back {
    display: inline-flex;
    align-items: center;
    padding: 10px 0;
    min-height: 44px;
  }
  .lesson-side .toc-list a {
    display: block;
    padding: 10px 12px;
    min-height: 44px;
  }
  .lesson-crumbs a {
    display: inline-block;
    padding: 6px 0;
    line-height: var(--lh-relaxed);
  }
}

/* =================================================================
   Mobile hero + roadmap rhythm (issue #2 — 2026-05-30)
   Desktop tokens are tuned for wide screens; on phones the 96/64px
   hero padding, 20px sub, 24px phase titles, and 128px inter-phase
   gap stack into dead space + 5-line title wraps. Compress here.
   ≤640px only — desktop is unaffected.
   ================================================================= */
@media (max-width: 640px) {
  /* Hero: tighten vertical rhythm so title → sub → chip read as one block */
  .hero { padding: var(--s-2xl) 0 var(--s-lg); }
  .hero-title {
    font-size: var(--fs-hero-sm);
    margin: var(--s-sm) 0 var(--s-md);
    text-wrap: balance;
  }
  /* keep the two title words from ever splitting awkwardly */
  .hero-title .accent { white-space: nowrap; }
  .hero-sub {
    font-size: var(--fs-body);   /* 20px → 17px: better line flow, fewer orphan breaks */
    line-height: var(--lh-body);
    margin-bottom: var(--s-lg);
    text-wrap: pretty;
  }
  .hero-meta { margin-bottom: var(--s-lg); }

  /* Roadmap: halve the inter-phase gap (was 64 gap + 64 pad = 128px) */
  .roadmap { gap: var(--s-xl); padding: var(--s-md) 0; }
  .roadmap-phase + .roadmap-phase { padding-top: var(--s-xl); }

  /* Phase titles: shrink + balance so long names wrap cleanly, no `·` orphan */
  .roadmap-phase-head h2 {
    font-size: var(--fs-h2-sm);
    line-height: var(--lh-heading);
    text-wrap: balance;
    overflow-wrap: break-word;
  }
  /* let the right cluster (weight + count + toggle) wrap under the title if tight */
  .roadmap-phase-head { gap: var(--s-sm); flex-wrap: wrap; }

  /* Bump the header theme-toggle to a real tap target (was ~26px) */
  .theme-toggle button { min-width: 40px; min-height: 40px; }
}

/* Defensive overflow-wrap — any unbroken token (URL, long inline code, hash)
   wraps instead of pushing layout wider. Applies at all widths. */
.ext-link,
.lesson-body p code,
.lesson-body li code,
.def-list code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =================================================================
   Lesson-page extras (def-list, code-block, cite, chip, lesson-eyebrow, lesson-foot-back/meta)
   ================================================================= */
.lesson-eyebrow {
  display: flex;
  gap: 8px;
  margin-bottom: var(--s-sm, 12px);
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  font-size: var(--fs-caption);
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
}
.chip-tag {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-soft);
  font-weight: 600;
}
.def-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 8px;
}
.def-list li {
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  color: var(--text-body);
  line-height: var(--lh-body);
}
.def-list li strong { color: var(--text); }
.code-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  overflow-x: auto;
  margin: var(--s-md, 16px) 0;
}
.code-block code {
  background: transparent;
  padding: 0;
  color: var(--text);
}

/* Tables inside lesson body — added for Phase 0 lessons 0.7/0.10/0.11/0.12 */
.lesson-body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-md, 16px) 0;
  font-size: var(--fs-small);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.lesson-body th,
.lesson-body td {
  text-align: left;
  padding: var(--s-sm) var(--s-md);
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
  line-height: var(--lh-snug);
}
/* Zebra + first-column emphasis as a SYSTEM default, so every lesson table
   matches without per-cell inline styles (was hand-rolled in 0.1 / 0.2). */
.lesson-body tbody tr:nth-child(even) { background: var(--surface-2); }
.lesson-body tbody td:first-child { font-weight: 600; color: var(--text); }
.lesson-body thead th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-strong);
}
.lesson-body tbody tr:last-child td { border-bottom: none; }
.lesson-body td code { font-size: 0.9em; }
/* Responsive: let wide tables scroll rather than overflow the page on mobile */
@media (max-width: 560px) {
  .lesson-body table { display: block; overflow-x: auto; white-space: normal; }
}

/* Spacing utilities — replace inline style="margin:…" with token-based classes.
   Every value comes from the --s-* scale; no raw px/rem in markup. */
.u-mt-sm { margin-top: var(--s-sm); }
.u-mt-md { margin-top: var(--s-md); }
.u-mt-lg { margin-top: var(--s-lg); }
.u-mb-md { margin-bottom: var(--s-md); }
.u-mb-0  { margin-bottom: 0; }
.u-m-0   { margin: 0; }
.u-tight { margin: var(--s-sm) 0 0; }
.eol-sentinel { height: 1px; }   /* invisible scroll sentinel (end-of-lesson) */

/* Lesson footer source line — was a long inline style on every lesson. */
.lesson-foot {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin: 0 0 var(--s-2xl);
  padding-bottom: var(--s-xl);
}

.lesson-foot-back {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 500;
}
.lesson-foot-back:hover { color: var(--text); }
.lesson-foot-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
/* Lesson completion box — user self-marks done; reflects on home roadmap */
.lesson-complete {
  margin: var(--s-2xl) 0 var(--s-lg);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: var(--s-lg);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.lesson-complete.is-done { border-color: var(--tag-done); background: var(--tag-done-bg); }
.lesson-complete .lc-check {
  display: flex; align-items: center; gap: var(--s-sm); cursor: pointer;
  font-family: var(--font-display); font-size: var(--fs-body); color: var(--text);
}
.lesson-complete .lc-check input {
  width: 22px; height: 22px; flex: 0 0 auto; cursor: pointer; accent-color: var(--tag-done);
}
.lesson-complete .lc-note { margin: var(--s-sm) 0 0 calc(22px + var(--s-sm)); font-size: var(--fs-caption); color: var(--text-muted); }
.lesson-complete.is-done .lc-note::before { content: "✓ "; color: var(--tag-done); font-weight: 700; }

.cite {
  margin-top: var(--s-xl, 32px);
  padding-top: var(--s-md, 16px);
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.cite a { color: var(--text-body); }
.cite a:hover { color: var(--accent); }

/* Inline external links — use in lesson body where URL itself is the artifact.
   Must shrink + wrap inside narrow mobile containers; should never overflow. */
.ext-link {
  display: inline;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-sm);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  word-break: break-all;       /* break long URLs at any char on narrow screens */
  overflow-wrap: anywhere;
  max-width: 100%;
  line-height: var(--lh-relaxed);
}
.ext-link:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent);
}
.ext-link::after {
  content: " ↗";
  color: var(--text-faint);
  font-family: var(--font-body);
  white-space: nowrap;
}

/* Lesson footer navigation — prev / next (mobile-first 2-column).
   Roadmap link lives in sidebar + breadcrumbs; not duplicated here. */
.lesson-nav-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
  margin: var(--s-xl) 0 var(--s-lg);
  padding: var(--s-md) 0;
  border-top: 1px solid var(--border);
}
.lesson-nav-foot a,
.lesson-nav-foot .nav-disabled {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  font-family: var(--font-body);
  min-height: 44px;       /* mobile tap target */
  justify-content: center;
  align-items: center;
  text-align: center;
}
.lesson-nav-foot a:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.lesson-nav-foot .nav-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.2;
}
.lesson-nav-foot .nav-title {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text);
  line-height: var(--lh-heading);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lesson-nav-foot .nav-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Tablet + up — full layout with bigger middle button + full titles */
@media (min-width: 768px) {
  .lesson-nav-foot {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-md);
    margin: var(--s-2xl) 0 var(--s-xl);
  }
  .lesson-nav-foot a,
  .lesson-nav-foot .nav-disabled {
    padding: var(--s-md) var(--s-lg);
    min-height: 0;
  }
  .lesson-nav-foot .nav-prev    { text-align: left;  align-items: flex-start; }
  .lesson-nav-foot .nav-next    { text-align: right; align-items: flex-end; }
  .lesson-nav-foot .nav-label { font-size: var(--fs-caption); }
  .lesson-nav-foot .nav-title {
    font-size: var(--fs-small);
    -webkit-line-clamp: unset;
    overflow: visible;
  }
}

/* Native expandable "want more detail?" block — replaces depth-block in basic lessons. */
.more {
  margin: var(--s-md) 0;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 0;
}
.more > summary {
  cursor: pointer;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-body);
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before {
  content: "+";
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 700;
  font-size: 1.1em;
  width: 14px;
  display: inline-block;
}
.more[open] > summary::before { content: "−"; }
.more > summary:hover { color: var(--text); }
.more[open] > summary {
  border-bottom: 1px solid var(--border-soft);
}
.more > *:not(summary) {
  padding: 12px 16px;
  margin: 0;
}
.more > p { color: var(--text-body); }
.more > p + p { padding-top: 0; }

/* Sections inside a lesson body must NOT pick up the global home-page section padding.
   Global rule: section { padding: var(--s-4xl) 0 } applies to home page only. */
.lesson-body section,
.lesson-body section.lesson-section {
  padding: 0;
  background: transparent;
}
/* First h2 in lesson body shouldn't double-stack with header's margin-bottom */
.lesson-body > section:first-child > h2:first-child,
.lesson-body > h2:first-child {
  margin-top: 0;
}

/* Unofficial/disclaimer notice (added 2026-06-03) */
.about .disclaimer {
  margin-top: var(--s-lg);
  padding: var(--s-md);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}
.lesson-disclaimer, .quiz-disclaimer {
  max-width: 720px;
  margin: var(--s-md) auto 0;
  padding: 0 var(--s-md);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  text-align: center;
}