/* Faber: "the human who makes." Identity is a maker's mark, a stamped
   vermilion square, carried by accent + oversized numerals + rhythm so
   it survives without the wordmark. Paper ground, ink text, hairlines,
   mono metadata, square corners. Brief: Faber redesign, phase 1.
   Legacy token names (--bg/--text/--line/--accent...) are aliased to the
   Faber tokens so component code did not need renaming. */

:root{
  /* Faber tokens */
  --paper:#FAF9F6;
  --ink:#17171A;
  --ink-2:#55555E;
  --ink-3:#6B6B73;          /* meta / mono badges, ~5:1 on paper, AA */
  --hairline:#E7E5E0;
  --accent:#DC3A1E;         /* stamp vermilion: marks, fills, focus, borders */
  --accent-ink:#FAF9F6;     /* text on accent */
  --accent-soft:#FBEAE6;    /* soft vermilion tint */
  --accent-text:#C4331A;    /* AA-safe vermilion for text on paper (>=4.5:1) */
  --err:#9A3B2E;            /* secondary; wrong-answer + destructive reset */
  --err-soft:#F6E7E2;

  /* aliases so existing components keep working */
  --bg:var(--paper);
  --surface:#FFFFFF;
  --text:var(--ink);
  --text-soft:var(--ink-2);
  --text-faint:var(--ink-3);
  --line:var(--hairline);

  --code-bg:#1C1C21;
  --code-text:#E6E6EA;
  --code-btn:#33333B;

  --sans:'Geist',system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;
  --brand-font:'Bricolage Grotesque','Geist',system-ui,sans-serif;

  /* type scale (desktop) */
  --fs-display:96px;
  --fs-numeral:72px;
  --fs-h2:28px;
  --fs-body:17px;
  --fs-meta:12px;

  /* spacing */
  --space-section:120px;
  --space-footer:96px;

  /* square corners everywhere */
  --r:0;

  /* motion */
  --dur-micro:150ms;
  --dur-base:250ms;
  --dur-enter:400ms;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease:var(--ease-out);
  --shadow:0 1px 2px rgba(20,20,23,.05);
}
@media(max-width:640px){
  :root{--fs-display:56px;--fs-numeral:44px;--fs-h2:22px;--space-section:72px;--space-footer:64px}
}

/* dark twin */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#141316;--ink:#F3F1EC;--ink-2:#ABA9A2;--ink-3:#9E9B93;--hairline:#2A2926;
    --accent:#EF5232;--accent-ink:#141316;--accent-soft:#2A1712;--accent-text:#EF5232;--err:#E88A78;--err-soft:#2E1A15;
    --surface:#1B1A1D;--code-bg:#0F0E11;--code-text:#D9D9DF;--code-btn:#2C2B2E;
    --shadow:0 1px 2px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --paper:#141316;--ink:#F3F1EC;--ink-2:#ABA9A2;--ink-3:#9E9B93;--hairline:#2A2926;
  --accent:#EF5232;--accent-ink:#141316;--accent-soft:#2A1712;--accent-text:#EF5232;--err:#E88A78;--err-soft:#2E1A15;
  --surface:#1B1A1D;--code-bg:#0F0E11;--code-text:#D9D9DF;--code-btn:#2C2B2E;
  --shadow:0 1px 2px rgba(0,0,0,.3);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* paper as a material, not a flat slab: a faint warm crown behind the
   reading column (fixed to the viewport, sits under all content) */
/* paper as a material: a warm crown behind the reading column plus a soft
   depth wash at the foot, fixed to the viewport, under all content */
body{background:radial-gradient(120% 72% at 50% -4%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%), radial-gradient(140% 60% at 50% 108%, color-mix(in srgb, var(--ink) 4%, transparent), transparent 60%), var(--paper);background-attachment:fixed;color:var(--ink-2);font-family:var(--sans);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
/* grain over the whole page: fixed, pointer-events-none, so it never
   touches layout or interaction. The tactile life of real paper. */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");background-size:260px 260px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body::after{opacity:.05}}
:root[data-theme="dark"] body::after{opacity:.05}
a{color:var(--accent-text);text-underline-offset:3px}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
.mono{font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.06em;color:var(--ink-3)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion: no-preference){
  .view{animation:enter var(--dur-enter) var(--ease)}
  @keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* scroll reveals: sections breathe in as they enter, once. Content is
   fully visible by default; the pre-state applies ONLY when JS has set
   #app.reveal-ready and motion is allowed, so no-JS and reduced-motion
   both ship the content visible. Movement is commanded by the user's
   scroll, never ambient. */
@media (prefers-reduced-motion: no-preference){
  #app.reveal-ready .reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur-enter) var(--ease),transform var(--dur-enter) var(--ease)}
  #app.reveal-ready .reveal.in{opacity:1;transform:none}
}

/* ---------- shared column (reading measure ~62-68ch) ---------- */
.col{max-width:660px;margin:0 auto;padding:0 24px}

/* ---------- primary CTA: ink, square, depth not colour ---------- */
.btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);border:0;border-radius:0;font-family:var(--sans);font-size:15px;font-weight:560;padding:14px 26px;cursor:pointer;text-decoration:none;transition:transform var(--dur-micro) var(--ease),box-shadow var(--dur-micro) var(--ease)}
@media (hover:hover) and (pointer:fine){.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px -8px rgba(23,23,26,.45)}}
.btn-primary:active{transform:translateY(0) scale(0.98);box-shadow:none}

/* ================= HOME ================= */
.hero{padding:96px 0 64px}
.hero h1.wordmark{font-family:var(--brand-font);font-size:var(--fs-display);font-weight:700;letter-spacing:-.03em;line-height:.92;margin-bottom:22px;white-space:nowrap;user-select:none}
/* maker's mark as the wordmark accent */
.hero h1.wordmark::after{content:"";display:inline-block;width:.16em;height:.16em;background:var(--accent);margin-left:.12em;vertical-align:.08em;transition:transform 140ms var(--ease-out)}
.wordmark .wl{display:inline-block}

/* the stamp: once per session the letters settle and the mark presses in
   last, the same motion that certifies a finished lesson */
@media (prefers-reduced-motion: no-preference){
  .wordmark.intro .wl{animation:wl-in 360ms var(--ease-out) backwards;animation-delay:calc(var(--i)*45ms)}
  .wordmark.intro::after{animation:mark-stamp 460ms var(--ease-out) 340ms backwards}
  @keyframes wl-in{from{opacity:0;transform:translateY(.14em)}to{opacity:1;transform:none}}
  @keyframes mark-stamp{0%{opacity:0;transform:scale(2) rotate(-4deg)}55%{opacity:1;transform:scale(.88) rotate(1.5deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
}
/* hover: testing the stamp with a finger */
@media (hover:hover) and (pointer:fine){
  .wordmark:hover::after,.slogan p:hover::after{transform:scale(.86)}
}
/* click: the press itself (paired with the felt thump in sound.js) */
@media (prefers-reduced-motion: no-preference){
  .wordmark.stamp-now::after,.slogan p.stamp-now::after{animation:mark-press 300ms var(--ease-out)}
  @keyframes mark-press{0%{transform:scale(1)}45%{transform:scale(.78) rotate(1.5deg)}100%{transform:scale(1) rotate(0)}}
}
.hero .lead{color:var(--ink-2);max-width:60ch;margin-bottom:32px;font-size:19px;line-height:1.55}
.hero .meta{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:40px;font-size:14.5px;color:var(--ink-2)}
.hero .meta b{color:var(--ink);font-weight:560}
@media(max-width:640px){.hero{padding:56px 0 48px}}

/* ---------- course path ---------- */
.path{padding-bottom:48px}
/* always-visible progression summary */
.psummary{display:flex;align-items:center;gap:14px;margin-bottom:4px;font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.04em;color:var(--ink-3)}
.psummary .ppct{color:var(--accent-text);font-weight:500}
.psummary .pbar{flex:1;height:2px;background:var(--hairline)}
.psummary .pbar i{display:block;height:100%;background:var(--accent);transition:width var(--dur-enter) var(--ease)}
.pmodule{padding-top:var(--space-section)}
.pmodule:first-child{padding-top:24px}
.pmodule-head{margin-bottom:24px}
/* oversized ghosted numeral carries module identity, not hue */
.pnum{font-family:var(--brand-font);font-weight:600;font-size:var(--fs-numeral);line-height:.9;color:color-mix(in srgb, var(--ink) 16%, transparent);margin-bottom:4px;transition:transform var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}
/* the module numeral lifts on hover, the Start-button gesture adapted to
   ghost type: deepen (its material) instead of shadow, motion guarded */
@media (hover:hover) and (pointer:fine){
  .pmodule-head:hover .pnum{color:color-mix(in srgb, var(--ink) 30%, transparent)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion: no-preference){
  .pmodule-head:hover .pnum{transform:translateY(-3px)}
}
.pmodule-head h2{font-family:var(--brand-font);font-size:var(--fs-h2);font-weight:600;letter-spacing:-.01em;line-height:1.05}
.pmodule-head .ptag{color:var(--ink-3);font-size:14px;margin-top:4px}
.pmodule-head .pintro{color:var(--ink-2);font-size:15.5px;margin-top:14px;max-width:60ch}
.plist{list-style:none;position:relative;margin:12px 0 8px}
/* rail fills accent from the top as the module's lessons complete
   (goal-gradient: proximity to the module's end is felt) */
.plist::before{content:"";position:absolute;left:9px;top:16px;bottom:16px;width:1.5px;background:linear-gradient(var(--accent) 0 var(--fill,0%), var(--hairline) var(--fill,0%));transition:background var(--dur-enter) var(--ease)}
.pl{position:relative;display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:16px;padding:12px 0;text-decoration:none;color:var(--ink)}
/* hover tint breathes past the row; never covers text or nodes */
.pl::before{content:"";position:absolute;inset:0 -14px;background:transparent;transition:background-color 150ms ease;z-index:0}
.pl>*{position:relative;z-index:1}
@media (hover:hover) and (pointer:fine){.pl:hover::before{background:var(--surface)}}
/* progress node = maker's mark. ahead: hollow square. done: filled stamp. */
.pl .node{position:relative;z-index:1;width:18px;height:18px;background:var(--paper);border:1.5px solid var(--hairline);transition:background var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)}
.pl .pl-title{font-size:15.5px;font-weight:480;line-height:1.4;color:var(--ink)}
.pl .pl-min{font-family:var(--mono);font-size:12px;color:var(--ink-3);white-space:nowrap}
.pl.done .node{background:var(--accent);border-color:var(--accent)}
.pl.done .pl-title{color:var(--ink-2)}
.pl.next .node{border-color:var(--accent);border-width:2px}
.pl.next .node::after{content:"";position:absolute;inset:4px;background:var(--accent)}
.pl.next .pl-title{font-weight:560}

@media (prefers-reduced-motion: no-preference){
  /* home load: summary + modules stagger in 40ms apart, once */
  .path > *{opacity:0;animation:rise var(--dur-enter) var(--ease) both}
  .path > *:nth-child(2){animation-delay:40ms}
  .path > *:nth-child(3){animation-delay:80ms}
  .path > *:nth-child(4){animation-delay:120ms}
  /* freshly completed node: the mark presses in and settles */
  .pl.just-done .node{animation:npop 520ms var(--ease) both}
  /* current lesson's node pulses a soft accent ring */
  .pl.next .node{animation:pulse 2s var(--ease) infinite}
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  @keyframes npop{0%{transform:scale(1.15) rotate(-2deg)}60%{transform:scale(0.96) rotate(1deg)}100%{transform:scale(1) rotate(0)}}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 42%,transparent)}55%{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 0%,transparent)}}
}

/* ---------- after the course: a project index, its own quiet section.
   Detached from the path (hairline + section air) so it reads as
   "what comes next", not as navigation. One column, uniform rows,
   hierarchy from type and hairlines only. ---------- */
.needs{border-top:1px solid var(--hairline);margin-top:16px;padding:64px 0 40px}
.needs .nlabel{font-family:var(--brand-font);font-weight:600;font-size:var(--fs-h2);letter-spacing:-.01em;line-height:1.1;color:var(--ink);text-wrap:balance}
.needs .nintro{margin:14px 0 28px;font-size:15.5px;color:var(--ink-2);max-width:58ch;line-height:1.6}
.needs-list{display:block;max-width:560px}
.need{position:relative;display:flex;align-items:center;gap:12px;min-height:50px;padding:14px 0;border-bottom:1px solid var(--hairline);color:var(--ink);text-decoration:none;font-size:16px;line-height:1.45}
.need::before{content:"";position:absolute;inset:0 -14px;background:transparent;transition:background-color 150ms ease;z-index:-1}
.need .need-text{flex:1}
.need .go{color:var(--ink-3);font-size:14px;opacity:0;transform:translateX(-4px);transition:opacity 150ms ease,transform 150ms var(--ease-out),color 150ms ease}
@media (hover:hover) and (pointer:fine){
  .need:hover::before{background:var(--surface)}
  .need:hover .go{opacity:1;transform:translateX(0);color:var(--accent-text)}
}
.need:active .need-text{opacity:.7}
@media(max-width:640px){
  .needs{padding:48px 0 32px}
  .need .go{opacity:1;transform:none}
}

/* ---------- slogan: one quiet typographic statement. Sized as a held
   breath, not a shout; the mark is the full stop and the interactive
   signature (hover presses it, click stamps with the thump) ---------- */
.slogan{border-top:1px solid var(--hairline);margin-top:16px;padding:56px 0 96px}
.slogan p{font-family:var(--brand-font);font-weight:600;font-size:clamp(21px,3.2vw,28px);letter-spacing:-.015em;line-height:1.15;color:var(--ink);text-wrap:balance;user-select:none}
/* the maker's mark closes the sentence, echoing the wordmark */
.slogan p::after{content:"";display:inline-block;width:.2em;height:.2em;background:var(--accent);margin-left:.15em;transition:transform 140ms var(--ease-out)}

/* ---------- graduation + footer ---------- */
.grad{border-top:1px solid var(--hairline);padding:var(--space-footer) 0 calc(var(--space-footer) + 16px)}
.grad h2{font-family:var(--brand-font);font-size:clamp(30px,5vw,44px);font-weight:700;letter-spacing:-.02em;line-height:1;margin-bottom:22px}
.grad p{color:var(--ink-2);max-width:60ch;margin:16px 0;font-size:16px}
.grad p b{color:var(--ink)}
.reset-btn{margin-top:44px;background:none;border:1px solid color-mix(in srgb, var(--err) 45%, var(--hairline));border-radius:0;padding:9px 18px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--err);cursor:pointer;transition:color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease),background var(--dur-micro) var(--ease),transform var(--dur-micro) var(--ease)}
@media (hover:hover) and (pointer:fine){.reset-btn:hover{border-color:var(--err);background:var(--err-soft)}}
.reset-btn:active{transform:scale(0.97)}
footer{padding:36px 0 72px;color:var(--ink-3);font-size:13.5px}

/* ---------- overflow menu (holds Reset) ---------- */
.more-wrap{position:relative}
.more-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;background:none;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--hairline));border-radius:0;padding:6px 12px;font-family:var(--mono);font-size:13px;line-height:1;color:var(--accent-text);cursor:pointer;transition:border-color var(--dur-micro) var(--ease)}
@media (hover:hover) and (pointer:fine){.more-btn:hover{border-color:var(--accent)}}
.more-menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--hairline);box-shadow:0 10px 28px -14px rgba(23,23,26,.3);padding:6px;z-index:20;min-width:160px}
.more-menu .reset-btn{margin:0;width:100%}

/* ---------- completion peak + share ---------- */
.grad.complete{text-align:center}
.grad .stamp{width:60px;height:60px;background:var(--accent);margin:0 auto 26px}
.grad.complete .grad-line{font-size:21px;color:var(--ink);max-width:26ch;margin:0 auto 20px;line-height:1.35}
.grad.complete p{margin-left:auto;margin-right:auto}
@media (prefers-reduced-motion: no-preference){
  .grad .stamp{animation:stamp-press 600ms var(--ease) both}
  @keyframes stamp-press{0%{transform:scale(1.6) rotate(-3deg);opacity:0}55%{transform:scale(0.92) rotate(1deg);opacity:1}100%{transform:scale(1) rotate(0)}}
}
.share{margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:18px}
.share-card{width:100%;max-width:360px;height:auto;border:1px solid var(--hairline);box-shadow:var(--shadow)}
.share-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center}
.share-name{background:var(--surface);border:1px solid var(--hairline);border-radius:0;padding:12px 14px;font:inherit;font-size:15px;color:var(--ink);min-width:180px}
.share-name::placeholder{color:var(--ink-3)}

/* first-run orientation: one liberated line at the head of the path,
   attached to the thing it explains. No box; type and space only. */
.howto{margin:0 0 26px;font-size:15.5px;color:var(--ink-2);line-height:1.6;max-width:62ch}
.howto b{color:var(--ink);font-weight:600}

/* quiet per-lesson un-mark */
.unmark{display:inline-block;margin-top:20px;background:none;border:0;padding:6px 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-3);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.unmark:hover{color:var(--ink)}}

/* ---------- header controls (language, sound, theme) ---------- */
.sound-toggle,.lang-toggle{display:inline-flex;align-items:center;min-height:40px;background:none;border:1px solid color-mix(in srgb, var(--accent) 40%, var(--hairline));border-radius:0;padding:6px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--accent-text);cursor:pointer;transition:color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease),transform var(--dur-micro) var(--ease)}
@media (hover:hover) and (pointer:fine){.sound-toggle:hover,.lang-toggle:hover{border-color:var(--accent)}}
.sound-toggle:active,.lang-toggle:active{transform:scale(0.97)}
.theme-switch{position:relative;width:52px;height:32px;padding:0;border:1px solid color-mix(in srgb, var(--accent) 40%, var(--hairline));background:var(--surface);cursor:pointer;flex-shrink:0;transition:border-color var(--dur-micro) var(--ease),transform var(--dur-micro) var(--ease)}
.theme-switch .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;background:var(--ink);transition:transform 200ms var(--ease)}
.theme-switch.on .knob{transform:translateX(20px)}
@media (hover:hover) and (pointer:fine){.theme-switch:hover{border-color:var(--accent)}}
.theme-switch:active{transform:scale(0.97)}
.hero .controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end;margin-bottom:28px}

/* ================= LESSON ================= */
.bar{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--hairline)}
.bar .col{display:flex;align-items:center;justify-content:space-between;height:56px}
.bar .back{color:var(--ink-2);text-decoration:none;font-size:14px;font-weight:500;padding:6px 0}
@media (hover:hover) and (pointer:fine){.bar .back:hover{color:var(--ink)}}
.progress{display:flex;gap:2px;height:3px}
.progress .seg{flex:1;background:var(--hairline);transition:background-color var(--dur-base) var(--ease)}
.progress .seg.done{background:var(--accent)}

.lesson-head{padding:52px 0 8px}
.crumb{font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.lesson-head h1{font-size:clamp(27px,4.4vw,34px);font-weight:640;letter-spacing:-.018em;line-height:1.15;color:var(--ink)}
.lmeta{display:block;margin-top:12px}

.lesson-body{padding:8px 0 8px;color:var(--ink-2)}
.lesson-body p{margin:16px 0;max-width:66ch}
.lesson-body ul,.lesson-body ol{margin:14px 0 16px 22px;max-width:64ch}
.lesson-body li{margin:8px 0}
.lesson-body b{font-weight:600;color:var(--ink)}
.inline-code{font-family:var(--mono);font-size:14px;background:var(--surface);border:1px solid var(--hairline);border-radius:0;padding:1px 6px;white-space:nowrap;color:var(--ink)}

/* practice block */
.practice{background:var(--surface);border:1px solid var(--hairline);border-radius:0;padding:20px 22px;margin:26px 0;box-shadow:var(--shadow)}
.practice .plabel,.why .plabel,.wrong .plabel{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.practice p{margin:10px 0}
.prompt{position:relative;background:var(--code-bg);color:var(--code-text);font-family:var(--mono);font-size:13px;line-height:1.6;border-radius:0;padding:18px 20px;margin:14px 0 4px;white-space:pre-wrap}
.copy{display:block;margin:14px 0 2px auto;min-height:36px;background:var(--code-btn);color:var(--code-text);border:0;border-radius:0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:8px 14px;cursor:pointer;transition:opacity var(--dur-micro) var(--ease),transform var(--dur-micro) var(--ease)}
@media (hover:hover) and (pointer:fine){.copy:hover{opacity:.85}}
.copy:active{transform:scale(0.96)}

.note{background:var(--accent-soft);border:1px solid transparent;border-radius:0;padding:14px 18px;margin:20px 0;font-size:15px;color:var(--ink-2)}
.note b{color:var(--ink)}

/* why-this-works: the mental model behind the lesson's advice */
.why{background:var(--paper);border:1px solid var(--hairline);border-radius:0;padding:18px 22px;margin:26px 0}
.why .plabel{color:var(--ink-3)}
.why p{margin:10px 0 2px;font-size:15px;max-width:62ch}

/* if-it-went-wrong: recovery is the curriculum, not the edge case */
.wrong{background:var(--surface);border:1px solid color-mix(in srgb, var(--err) 30%, var(--hairline));border-radius:0;padding:18px 22px;margin:26px 0;box-shadow:var(--shadow)}
.wrong .plabel{color:var(--err)}
.wrong p{margin:10px 0 2px;font-size:15px;max-width:62ch}

.donewhen{font-size:14.5px;color:var(--ink-2);border-top:1px dashed var(--hairline);margin-top:26px;padding-top:16px;max-width:66ch}
.donewhen b{color:var(--ink)}

/* mark done: ink CTA */
.markdone{display:inline-flex;align-items:center;gap:10px;margin-top:24px;background:var(--ink);color:var(--paper);border:0;border-radius:0;font-family:var(--sans);font-size:15px;font-weight:560;padding:13px 22px;cursor:pointer;transition:transform var(--dur-micro) var(--ease),box-shadow var(--dur-micro) var(--ease)}
@media (hover:hover) and (pointer:fine){.markdone:hover{transform:translateY(-1px);box-shadow:0 6px 18px -8px rgba(23,23,26,.45)}}
.markdone:active{transform:translateY(0) scale(0.98);box-shadow:none}
.markdone.on{background:var(--accent);color:var(--accent-ink)}

/* quiz */
.quiz{background:var(--surface);border:1px solid var(--hairline);border-radius:0;box-shadow:var(--shadow);padding:22px;margin-top:32px}
.quiz-title{font-size:17px;font-weight:620;letter-spacing:-.01em;color:var(--ink)}
.quiz-sub{font-size:14px;color:var(--ink-3);margin-top:4px}
.qq{padding:18px 0 4px;margin-top:14px;border-top:1px solid var(--hairline)}
.qq-text{font-weight:530;font-size:15.5px;margin-bottom:12px;color:var(--ink)}
.qq-opts{display:grid;gap:8px}
.qopt{position:relative;text-align:left;background:var(--paper);border:1px solid var(--hairline);border-radius:0;padding:11px 40px 11px 14px;font:inherit;font-size:14.5px;line-height:1.45;color:var(--ink);cursor:pointer;transition:border-color var(--dur-micro) var(--ease),background var(--dur-micro) var(--ease),transform var(--dur-micro) var(--ease)}
@media (hover:hover) and (pointer:fine){.qopt:not(:disabled):hover{border-color:var(--ink-3)}}
.qopt:not(:disabled):active{transform:scale(0.99)}
.qopt:disabled{cursor:default}
.qopt.ok{border-color:var(--accent);background:var(--accent-soft)}
.qopt.no{border-color:var(--err);background:var(--err-soft);opacity:.9}
.qopt.dim{opacity:.5}
/* correct: the maker's mark stamps at the row end */
.qopt.ok::after{content:"";position:absolute;right:13px;top:50%;width:10px;height:10px;background:var(--accent);transform:translateY(-50%)}
@media (prefers-reduced-motion: no-preference){
  .qopt.ok{animation:qpick 260ms var(--ease)}
  .qopt.no{animation:qshake 300ms var(--ease-out)}
  .qopt.ok::after{animation:qstamp 300ms var(--ease) 60ms both}
  @keyframes qpick{0%{transform:scale(0.98)}60%{transform:scale(1.02)}100%{transform:scale(1)}}
  @keyframes qshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
  @keyframes qstamp{from{transform:translateY(-50%) scale(0)}to{transform:translateY(-50%) scale(1)}}
}
.qq-why{font-size:13.5px;color:var(--ink-2);margin:10px 0 8px}
.quiz-status{margin-top:18px;font-size:14px;color:var(--ink-2)}
.quiz.passed .quiz-status{color:var(--accent-text);font-weight:560}
.qcheck{display:inline-block;font-weight:700}
.module-banner{margin-top:14px;padding:16px 20px;border-radius:0;background:var(--accent-soft);color:var(--accent-text);font-family:var(--brand-font);font-weight:700;font-size:18px;letter-spacing:-.01em}
/* identity line: names who the learner just became, quieter than the banner */
.module-banner .mid{display:block;margin-top:6px;font-family:var(--sans);font-weight:400;font-size:14.5px;letter-spacing:0;color:var(--ink-2)}
.module-banner .reflect{margin-top:3px;color:var(--ink-3)}
@media (prefers-reduced-motion: no-preference){
  .qcheck{animation:qpop 420ms var(--ease)}
  .module-banner{animation:rise 360ms var(--ease)}
  @keyframes qpop{0%{transform:scale(0.4);opacity:0}60%{transform:scale(1.25)}100%{transform:scale(1);opacity:1}}
}

/* ---------- module-2 threshold doorway ---------- */
.threshold{padding:64px 0 96px;max-width:600px}
.threshold .pnum{margin-bottom:10px}
.t2-title{font-family:var(--brand-font);font-size:clamp(40px,7vw,72px);font-weight:700;letter-spacing:-.03em;line-height:.95;color:var(--ink);margin-bottom:20px}
.t2-lead{font-size:20px;color:var(--ink-2);max-width:34ch;line-height:1.45;margin-bottom:26px}
.t2-note{font-size:15px;color:var(--ink-2);border-top:1px solid var(--hairline);padding-top:22px;max-width:58ch;margin-bottom:30px}
.t2-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.t2-back{color:var(--ink-3);font-size:14px;text-decoration:none}
@media (hover:hover) and (pointer:fine){.t2-back:hover{color:var(--ink)}}

/* ---------- cost page (#/cost) ---------- */
.costview{padding:64px 0 96px;max-width:600px}
.costview .t2-title{font-size:clamp(34px,6vw,56px)}
.costview h2{font-family:var(--brand-font);font-size:21px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin-top:36px}
.costview p{margin:12px 0;max-width:60ch;font-size:15.5px;color:var(--ink-2)}
.costview .donate{border-top:1px solid var(--hairline);margin-top:36px;padding-top:22px;font-size:14.5px;color:var(--ink-3)}

/* ---------- mobile type pass: nothing important under 15px on phones,
   reading sizes step up one notch ---------- */
@media(max-width:640px){
  .pl .pl-title{font-size:16px}
  .need{font-size:16px}
  .pmodule-head .pintro{font-size:16px}
  .howto{font-size:16px}
  .hero .meta{font-size:15px}
  .note,.why p,.wrong p,.practice p{font-size:15.5px}
  .qopt{font-size:15px}
  .qq-text{font-size:16px}
  .donewhen{font-size:15px}
  .grad p,.costview p{font-size:16px}
  .t2-note{font-size:15.5px}
}

/* lesson footer nav */
.lnav{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--hairline);margin-top:40px;padding:24px 0 72px}
.lnav a{text-decoration:none;font-size:15px}
.lnav .prev{color:var(--ink-2);font-weight:480}
@media (hover:hover) and (pointer:fine){.lnav .prev:hover{color:var(--ink)}}
.lnav .nextl{color:var(--accent-text);font-weight:560}
@media (hover:hover) and (pointer:fine){.lnav .nextl:hover{color:color-mix(in srgb, var(--accent) 80%, var(--ink))}}