/* ============================================================
   /learn — visual language taken from the running app, not invented.
   Derived from content/learn/_mockups/learn-index.html, which was in
   turn matched to src/palette.css and src/canvas/HelpModal.css:
     · white panels on a gridded cream canvas
     · 1.5px borders rgba(37,33,28,.11), radii 8-10px
     · micro-labels: Nunito 800/900 uppercase, .07-.11em tracking
     · panel titles in orange; green = active/selected
     · content cards carry a coloured LEFT RAIL by lesson type
     · buttons are fully-rounded pills

   Deliberate deviations from the app, both for reading rather than
   operating: lesson titles are sentence case (they run 8-10 words), and
   body text is larger than the app's dense UI labels.

   NOTE: 'Nunito' is requested here and in 31 app CSS declarations, but
   the repo ships no @font-face and no font file — every user without it
   installed locally sees the system fallback. Self-hosting a woff2 fixes
   it app-wide and satisfies the CSP's font-src 'self'.
   ============================================================ */

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

:root {
  --canvas:     #f4f1e8;
  --panel:      #ffffff;
  --tile:       #ede9dc;
  --ink:        #25211c;
  --ink-2:      #5a5248;
  --muted:      #8c847a;
  --accent:     #e85d26;
  --accent-ink: #c0490f;
  --accent-wash:#fdeee7;
  --blue:       #3b7dd8;
  --green:      #3da05a;
  --line:       rgba(37, 33, 28, 0.11);
  --line-firm:  rgba(37, 33, 28, 0.22);
  --grid-min:   rgba(37, 33, 28, 0.045);
  --grid-maj:   rgba(37, 33, 28, 0.085);
  --lift:       0 8px 28px rgba(37,33,28,0.14), 0 2px 6px rgba(37,33,28,0.08);
  --lift-sm:    0 2px 6px rgba(37,33,28,0.08);

  --font: 'Nunito', 'Nunito Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --ease: cubic-bezier(0.32, 0, 0.2, 1);

  --step--1: clamp(.82rem, .8rem + .1vw, .88rem);
  --step-0:  clamp(1rem, .97rem + .14vw, 1.06rem);
  --step-1:  clamp(1.15rem, 1.08rem + .35vw, 1.35rem);
  --step-2:  clamp(1.4rem, 1.26rem + .7vw, 1.85rem);
  --step-3:  clamp(2rem, 1.6rem + 1.9vw, 3.25rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #17130f; --panel: #221d18; --tile: #2b251f;
    --ink: #f3eee3; --ink-2: #c6bdaf; --muted: #9d9385;
    --accent: #f2703a; --accent-ink: #ffa477; --accent-wash: #3a2318;
    --blue: #6ba3ef; --green: #5cbd78;
    --line: rgba(243,238,227,0.14); --line-firm: rgba(243,238,227,0.28);
    --grid-min: rgba(243,238,227,0.045); --grid-maj: rgba(243,238,227,0.08);
    --lift: 0 8px 28px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.35);
    --lift-sm: 0 2px 6px rgba(0,0,0,0.35);
  }
}
:root[data-theme="dark"] {
  --canvas: #17130f; --panel: #221d18; --tile: #2b251f;
  --ink: #f3eee3; --ink-2: #c6bdaf; --muted: #9d9385;
  --accent: #f2703a; --accent-ink: #ffa477; --accent-wash: #3a2318;
  --blue: #6ba3ef; --green: #5cbd78;
  --line: rgba(243,238,227,0.14); --line-firm: rgba(243,238,227,0.28);
  --grid-min: rgba(243,238,227,0.045); --grid-maj: rgba(243,238,227,0.08);
  --lift: 0 8px 28px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.35);
  --lift-sm: 0 2px 6px rgba(0,0,0,0.35);
}

body {
  background-color: var(--canvas);
  background-image:
    linear-gradient(var(--grid-maj) 1.2px, transparent 1.2px),
    linear-gradient(90deg, var(--grid-maj) 1.2px, transparent 1.2px),
    linear-gradient(var(--grid-min) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-min) 1px, transparent 1px);
  background-size: 140px 140px, 140px 140px, 28px 28px, 28px 28px;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.sheet { max-width: 1120px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); }
a { color: inherit; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.label { font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.label-accent { color: var(--accent); font-weight: 900; font-size: 12px; letter-spacing: .07em; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- top bar ---------- */
.topbar { background: var(--panel); border-bottom: 1.5px solid var(--line); box-shadow: var(--lift-sm); position: sticky; top: 0; z-index: 20; }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .7rem 0; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .85rem; text-decoration: none; }
.wordmark { font-weight: 900; font-size: 1.05rem; letter-spacing: -.02em; text-transform: uppercase; }
.brand-divider { width: 1.5px; height: 22px; background: var(--line-firm); }
.nav { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.nav a { text-decoration: none; font-weight: 800; font-size: .9rem; color: var(--ink-2); transition: color .12s var(--ease); }
.nav a:hover { color: var(--accent); }

/* ---------- pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: inherit; font-weight: 800; font-size: .85rem;
  text-decoration: none; padding: .48rem 1rem;
  border-radius: 999px; border: 1.5px solid var(--accent);
  color: var(--accent-ink); background: var(--panel);
  transition: background .12s var(--ease), color .12s var(--ease);
}
.pill:hover { background: var(--accent-wash); }
.pill-solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.pill-solid:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.pill-blue { border-color: var(--blue); color: var(--blue); }
.pill-green { border-color: var(--green); color: var(--green); }
.pill-quiet { border-color: var(--line-firm); color: var(--ink-2); }
.pill-quiet:hover { background: var(--tile); }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.25rem, 4vw, 3rem); }
@media (max-width: 880px) { .hero { grid-template-columns: 1fr; } }
.eyebrow { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; }
.eyebrow::after { content: ""; flex: 1; height: 1.5px; background: var(--line); }
h1 { font-size: var(--step-3); line-height: 1.02; font-weight: 900; letter-spacing: -.035em; text-wrap: balance; margin-bottom: 1.1rem; }
h1 .cut { position: relative; white-space: nowrap; }
h1 .cut::after {
  content: ""; position: absolute; left: -.06em; right: -.06em; top: 53%;
  height: 3px; background: var(--accent); transform-origin: left center;
  animation: sweep .9s var(--ease) .45s both;
}
@keyframes sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { h1 .cut::after { animation: none; } }
.lede { font-size: var(--step-1); color: var(--ink-2); max-width: 42ch; margin-bottom: 1.7rem; }
.hero-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.hero-note { font-size: var(--step--1); color: var(--muted); max-width: 21ch; line-height: 1.45; }

.diagram { background: var(--panel); border: 1.5px solid var(--line); border-radius: 10px; padding: 1.1rem 1.1rem .9rem; box-shadow: var(--lift); color: var(--ink); }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram-cap { display: flex; justify-content: space-between; gap: 1rem; margin-top: .8rem; padding-top: .7rem; border-top: 1.5px solid var(--line); }

/* ---------- sections ---------- */
.section { padding: clamp(2rem, 4.5vw, 3.25rem) 0; border-top: 1.5px solid var(--line); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.section-head h2 { font-size: var(--step-2); font-weight: 900; letter-spacing: -.03em; line-height: 1.15; }
.section-note { font-size: var(--step--1); color: var(--muted); max-width: 42ch; }

.segmented { display: inline-flex; align-items: center; gap: 3px; background: var(--tile); border: 1.5px solid var(--line); border-radius: 8px; padding: 3px; }
.seg { display: inline-flex; align-items: center; gap: .4rem; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: .34rem .68rem; border-radius: 6px; }
.swatch { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); flex: none; }
.swatch.tool { background: var(--blue); }
.swatch.build { background: var(--green); }

/* ---------- featured lesson ---------- */
.featured {
  display: grid; grid-template-columns: 92px 1fr; gap: clamp(1.1rem, 3vw, 2rem); align-items: start;
  background: var(--panel); border: 1.5px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 10px; padding: clamp(1.3rem, 3vw, 1.9rem); box-shadow: var(--lift);
  text-decoration: none; transition: background .12s var(--ease);
}
.featured:hover { background: var(--accent-wash); }
@media (max-width: 700px) { .featured { grid-template-columns: 1fr; } }
.sheet-no { font-size: 2.9rem; font-weight: 900; line-height: .85; color: var(--accent); letter-spacing: -.06em; }
.sheet-no .label { display: block; margin-top: .55rem; }
.featured h3 { font-size: var(--step-2); font-weight: 900; line-height: 1.14; letter-spacing: -.03em; margin-bottom: .6rem; text-wrap: balance; }
.featured p { color: var(--ink-2); max-width: 60ch; margin-bottom: 1.05rem; font-size: .98rem; }
.meta-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }

/* ---------- jump nav + lesson groups ---------- */
/* Plain anchors. No filtering, no JS — the page is long, and the only job
   here is getting a reader to the room they care about. */
.jump { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1.75rem; }
.jump .pill { font-size: .8rem; padding: .38rem .8rem; }
.jump-n { color: var(--muted); font-weight: 900; font-size: .75rem; }

.group + .group { margin-top: 1.9rem; }
.group-head {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  padding-bottom: .55rem; margin-bottom: .85rem;
  border-bottom: 1.5px solid var(--line);
  /* Offsets the sticky topbar so an anchored group lands below it. */
  scroll-margin-top: 5rem;
}
.group { scroll-margin-top: 5rem; }
.group-head h3 { font-size: var(--step-1); font-weight: 900; letter-spacing: -.028em; }
/* Count sits with the title rather than pushed to the far edge, where it read
   as an orphan on wide screens. */
.group-n {
  background: var(--tile); border: 1.5px solid var(--line); border-radius: 999px;
  padding: .1rem .5rem; color: var(--ink-2); font-size: 10px;
}
.group-blurb { font-size: var(--step--1); color: var(--muted); }

/* ---------- lesson set ---------- */
.set { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 10px; }
.card {
  background: var(--panel); border: 1.5px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .45rem;
  min-height: 158px; text-decoration: none; box-shadow: var(--lift-sm); transition: background .12s var(--ease);
}
.card:hover { background: var(--tile); }
.card.tool { border-left-color: var(--blue); }
.card.build { border-left-color: var(--green); }
/* Planned-but-unwritten lessons: present enough to show the shape of the
   series, plainly not clickable. Dashed rail + muted title is the whole
   signal; no hover state, because there is nothing to press. */
.card.soon { box-shadow: none; border-left-style: dashed; background: transparent; }
.card.soon:hover { background: transparent; }
.card.soon h3 { color: var(--ink-2); }
.card.soon .soon-tag { margin-top: auto; color: var(--accent); font-weight: 900; }
.card.soon p { margin-top: .1rem; }

.card-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.card-no { font-size: 1rem; font-weight: 900; color: var(--muted); }
.card h3 { font-size: 1rem; font-weight: 800; line-height: 1.3; letter-spacing: -.015em; text-wrap: balance; }
.card p { font-size: var(--step--1); color: var(--muted); line-height: 1.5; margin-top: auto; }

/* ---------- grown-up doors ---------- */
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(254px, 1fr)); gap: 10px; }
.door {
  background: var(--panel); border: 1.5px solid var(--line); border-left: 3px solid var(--blue);
  border-radius: 8px; padding: 1.3rem; display: flex; flex-direction: column; gap: .6rem;
  box-shadow: var(--lift-sm); transition: background .12s var(--ease);
}
.door.b { border-left-color: var(--accent); }
.door.c { border-left-color: var(--green); }
.door:hover { background: var(--tile); }
.door h3 { font-size: 1.12rem; font-weight: 900; letter-spacing: -.025em; }
.door p { font-size: var(--step--1); color: var(--ink-2); line-height: 1.55; }
.door .pill { margin-top: auto; align-self: flex-start; }

/* ---------- book strip ---------- */
.book {
  display: grid; grid-template-columns: 1fr auto; gap: clamp(1.1rem, 3vw, 2rem); align-items: center;
  background: var(--panel); border: 1.5px solid var(--line); border-left: 3px solid var(--green);
  border-radius: 8px; padding: clamp(1.3rem, 3vw, 1.7rem); box-shadow: var(--lift-sm);
}
@media (max-width: 760px) { .book { grid-template-columns: 1fr; justify-items: start; } }
.book h3 { font-size: var(--step-1); font-weight: 900; letter-spacing: -.03em; margin-bottom: .3rem; }
.book p { color: var(--ink-2); font-size: var(--step--1); max-width: 54ch; }

/* ---------- lesson page ---------- */
.post { padding: clamp(2rem, 5vw, 3.5rem) 0 0; }
.post-head { max-width: 62ch; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.post-head h1 { font-size: clamp(1.8rem, 1.4rem + 1.7vw, 2.75rem); }
.post-head .eyebrow { margin-bottom: 1rem; }
.post-head .eyebrow .label:not(.label-accent) { flex: none; order: 2; }
.post-head .eyebrow::after { order: 3; }

/* Article body. One column, measure-limited; the app's panel language
   returns for anything that is a block rather than prose. */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  font-size: var(--step-2); font-weight: 900; letter-spacing: -.03em; line-height: 1.18;
  margin-top: 2.4em; margin-bottom: .1em; text-wrap: balance;
}
.prose h2 + * { margin-top: .8em; }
.prose h3 { font-size: var(--step-1); font-weight: 900; letter-spacing: -.02em; margin-top: 1.9em; }
.prose h4 { font-size: 1rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 1.8em; }
.prose p { color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 800; }
.prose a { color: var(--accent-ink); font-weight: 700; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.prose ul, .prose ol { padding-left: 1.3em; color: var(--ink-2); }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--accent); font-weight: 800; }
.prose hr { border: 0; border-top: 1.5px solid var(--line); margin: 2.6em 0; }
.prose blockquote {
  background: var(--panel); border: 1.5px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 1.1rem 1.25rem; box-shadow: var(--lift-sm); color: var(--ink-2);
}
.prose blockquote > * + * { margin-top: .7em; }
.prose figure { background: var(--panel); border: 1.5px solid var(--line); border-radius: 10px; padding: 1rem; box-shadow: var(--lift-sm); }
.prose figcaption { margin-top: .7rem; padding-top: .6rem; border-top: 1.5px solid var(--line); font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.prose img { display: block; border-radius: 6px; height: auto; }
.prose code { font-size: .9em; background: var(--tile); border: 1px solid var(--line); border-radius: 4px; padding: .1em .35em; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.prose th, .prose td { text-align: left; padding: .55rem .7rem; border-bottom: 1.5px solid var(--line); }
.prose th { font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

.post .book { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.post-nav { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; }

/* ---------- footer ---------- */
.footer {
  border-top: 1.5px solid var(--line); margin-top: clamp(2rem, 4vw, 3rem); padding: 1.5rem 0 2.75rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap;
}
.footer-links { display: flex; gap: .5rem; flex-wrap: wrap; }