@charset "UTF-8";
/* ==========================================================================
   Knowledge InSight
   --------------------------------------------------------------------------
   The palette is sampled from images/knowledge-insight-background.jpg: the
   chrome takes the blues of the painted planks, the reading surfaces take the
   warm paper of the book pages, and the item-type accents take the orange and
   yellow book spines plus the plum of the wordmark.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Blues, sampled from the plank background */
  --blue-900: #163a5e;
  --blue-800: #1d4c79;
  --blue-700: #275f92;   /* deep plank  */
  --blue-600: #2f75b3;   /* mid plank — primary */
  --blue-500: #3d86c6;
  --blue-400: #5997d2;   /* lit plank   */
  --blue-300: #93bce5;
  --blue-200: #c6dbf1;
  --blue-100: #e4eefa;
  --blue-50:  #f2f7fd;

  /* Slates, sampled from the shadowed wood */
  --slate-900: #1f2837;
  --slate-800: #2b3749;
  --slate-700: #3b4a62;
  --slate-600: #4e6584;
  --slate-500: #6b809c;
  --slate-400: #93a5bb;
  --slate-300: #bcc9d8;
  --slate-200: #dde4ed;
  --slate-100: #eef2f7;

  /* Paper, sampled from the book pages. The page itself is white; the paper
     tones are now a secondary surface for navigation and quiet bands. */
  --paper:   #faf7f1;
  --paper-2: #f3eee4;
  --paper-3: #e9e1d2;
  --white:   #ffffff;

  /* Accents, sampled from the book spines and the wordmark */
  --amber:      #e2ae41;
  --amber-ink:  #8c6410;
  --rust:       #994310;
  --rust-ink:   #8a3c0e;
  --plum:       #8b2060;
  --plum-ink:   #7a1c55;
  --green-ink:  #1f6b4a;
  --green-bg:   #eef7f2;
  /* Teal bridges the blue and the warm paper; used for the vetted seal. */
  --teal:       #1d6b70;
  --teal-bg:    #e9f4f4;

  /* Semantic */
  --bg: var(--white);
  --surface: var(--white);
  --surface-alt: var(--paper);      /* outline, bands, quiet panels */
  --surface-sunk: var(--paper-2);
  --line-warm: var(--paper-3);
  --text: var(--slate-900);
  --text-soft: var(--slate-700);
  --muted: var(--slate-600);
  --line: var(--slate-200);
  --line-strong: var(--slate-300);
  --brand: var(--blue-600);
  --brand-dark: var(--blue-700);
  --brand-deep: var(--blue-900);
  --focus: var(--blue-500);

  /* Type */
  --font-sans: "Source Sans 3", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --fs-base: 1.0625rem;
  --lh-prose: 1.68;
  --measure: 68ch;

  /* Space */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.75rem; --sp-7: 2.25rem; --sp-8: 3rem;

  /* Shape */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(31, 40, 55, .06), 0 1px 3px rgba(31, 40, 55, .05);
  --shadow-2: 0 2px 6px rgba(31, 40, 55, .07), 0 8px 24px rgba(31, 40, 55, .07);
  --shadow-3: 0 12px 40px rgba(22, 58, 94, .18);

  /* Layout */
  --wrap: 1140px;
  --outline-w: 294px;
  --rail-w: 252px;
  --masthead-h: 60px;
  --learnbar-h: 52px;

  /* Item-type accents */
  --k-reading: var(--blue-700);
  --k-reading-bg: var(--blue-50);
  --k-dialogue: var(--plum);
  --k-dialogue-bg: #fbf0f6;
  --k-journal: var(--amber-ink);
  --k-journal-bg: #fdf6e6;
  --k-quiz: var(--rust);
  --k-quiz-bg: #fdf0e8;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.22; color: var(--brand-deep); margin: 0 0 var(--sp-3); letter-spacing: -.005em; }
h1 { font-size: clamp(1.85rem, 1.3rem + 2.1vw, 2.7rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); }
h3 { font-size: 1.18rem; }
h4 { font-size: 1.04rem; }
p  { margin: 0 0 var(--sp-4); }

a { color: var(--brand-dark); text-decoration-color: var(--blue-300); text-underline-offset: 3px; }
a:hover { color: var(--blue-600); text-decoration-color: currentColor; }

img, picture, svg, video { max-width: 100%; }
img { height: auto; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }
ul, ol { padding-left: 1.3em; }
code, pre { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }
code { font-size: .88em; background: var(--slate-100); padding: .12em .38em; border-radius: var(--r-sm); }
pre { overflow-x: auto; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.17em; }

.u-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--sp-3); top: -3rem; z-index: 200;
  background: var(--brand-deep); color: #fff; padding: .6rem 1rem;
  border-radius: var(--r-sm); text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: var(--sp-3); color: #fff; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap.narrow { max-width: 760px; }
.muted { color: var(--muted); font-size: .92rem; }
.eyebrow {
  font-size: .76rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--blue-600); margin: 0 0 var(--sp-2);
}
.lede { font-size: 1.12rem; line-height: 1.6; color: var(--text-soft); max-width: 62ch; }

/* --------------------------------------------------------------------------
   3. Masthead and footer
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: var(--brand-deep);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.08), var(--shadow-1);
}
.masthead-inner {
  width: min(100% - 2rem, 1320px); margin-inline: auto;
  min-height: var(--masthead-h);
  display: flex; align-items: center; gap: var(--sp-4);
}
.brand { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; padding: .5rem 0; }
.brand-mark { width: 30px; height: 30px; flex: none; color: var(--blue-300); }
.brand-words { display: flex; flex-direction: column; line-height: 1.02; font-weight: 300; font-size: 1.02rem; letter-spacing: .02em; }
.brand-words span:last-child { font-weight: 600; }
.brand:hover { color: #fff; }

.site-nav { margin-left: auto; display: flex; gap: var(--sp-2); }
.site-nav a {
  color: var(--blue-100); text-decoration: none; font-weight: 500;
  padding: .45rem .8rem; border-radius: var(--r-pill); font-size: .95rem;
}
.site-nav a:hover { background: rgba(255,255,255,.12); color: #fff; }

.nav-toggle {
  display: none; margin-left: auto;
  background: transparent; border: 1px solid rgba(255,255,255,.3); color: #fff;
  border-radius: var(--r-sm); padding: .4rem .55rem; cursor: pointer;
}

.site-foot { background: var(--brand-deep); color: var(--blue-100); margin-top: var(--sp-6); padding: var(--sp-6) 0 var(--sp-5); }
.site-foot-inner { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.foot-brand { font-family: var(--font-serif); font-size: 1.25rem; color: #fff; margin: 0 0 .2rem; }
.foot-tag { margin: 0 0 var(--sp-4); color: var(--blue-200); }
.foot-nav { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.foot-nav a { color: #fff; text-decoration: none; font-size: .95rem; border-bottom: 1px solid rgba(255,255,255,.3); }
.foot-fine { font-size: .85rem; color: var(--blue-300); margin: 0; }
.foot-legal { margin-top: var(--sp-2); }
.foot-legal a { color: #fff; }

/* --------------------------------------------------------------------------
   4. Buttons, chips, bars
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font: inherit; font-size: .95rem; font-weight: 600;
  padding: .58rem 1.05rem; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--brand-dark);
  text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .08s;
}
.btn:hover { background: var(--blue-50); border-color: var(--blue-300); color: var(--brand-dark); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-1); }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-lg { font-size: 1.02rem; padding: .74rem 1.35rem; }
.btn-quiet { border-color: transparent; background: transparent; color: var(--muted); font-weight: 500; }
.btn-quiet:hover { background: var(--slate-100); color: var(--brand-dark); }
.btn-onhero { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.45); color: #fff; backdrop-filter: blur(3px); }
.btn-onhero:hover { background: rgba(255,255,255,.26); border-color: #fff; color: #fff; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-4) 0 0; }

.tag {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: .16rem .5rem; border-radius: var(--r-pill);
}
.tag-optional { background: var(--slate-100); color: var(--muted); }

.bar { display: block; height: 6px; border-radius: var(--r-pill); background: var(--slate-200); overflow: hidden; }
.bar > span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--blue-500), var(--blue-400)); transition: width .35s ease; }
.bar-label { font-size: .82rem; color: var(--muted); margin: .4rem 0 0; }

/* Progress dot: a ring that fills as the lesson is completed. */
.pdot {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 2px solid var(--line-strong); background: transparent;
  position: relative; transition: border-color .2s, background .2s;
}
.pdot[data-state="some"] { border-color: var(--blue-400); background: conic-gradient(var(--blue-400) var(--pct, 0%), transparent 0); }
.pdot[data-state="done"] { border-color: var(--green-ink); background: var(--green-ink); }
.pdot[data-state="done"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(42deg) translate(-1px, -1px);
}

/* --------------------------------------------------------------------------
   5. Splash
   -------------------------------------------------------------------------- */

.hero { position: relative; isolation: isolate; color: #fff; display: grid; }
.hero-img { position: absolute; inset: 0; z-index: -2; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(22,58,94,.94) 0%, rgba(22,58,94,.82) 38%, rgba(31,70,112,.5) 68%, rgba(47,117,179,.3) 100%);
}
.hero-inner {
  width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4.75rem) 0 clamp(2.5rem, 5vw, 4.25rem);
  max-width: min(100% - 2.5rem, 760px); margin-left: max(1.25rem, (100vw - var(--wrap)) / 2);
}
.hero-eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-200); margin: 0 0 var(--sp-3); }
.hero h1 { color: #fff; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); margin-bottom: var(--sp-4); text-wrap: balance; }
.hero-lede { font-size: clamp(1.02rem, .97rem + .35vw, 1.2rem); color: #e9f1fa; line-height: 1.62; max-width: 56ch; margin: 0; }

.band { background: var(--surface-alt); border-block: 1px solid var(--line-warm); }
.section { padding: clamp(1.6rem, 3vw, 2.4rem) 0; }
.section-head { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem); margin-bottom: var(--sp-2); }
.section-lede { color: var(--muted); max-width: 60ch; margin-bottom: var(--sp-4); }

.splash-cards, .course-cards, .lesson-cards, .module-blocks, .principles, .rhythm { list-style: none; padding: 0; margin: 0; }
.splash-cards { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.splash-card a {
  display: grid; gap: .45rem; height: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-5); text-decoration: none; color: inherit;
  box-shadow: var(--shadow-1); transition: box-shadow .18s, border-color .18s, transform .18s;
  border-top: 4px solid var(--brand);
}
.splash-card a:hover { box-shadow: var(--shadow-2); border-color: var(--blue-300); transform: translateY(-2px); }
.sc-eyebrow { font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-600); }
.sc-title { font-family: var(--font-serif); font-size: 1.42rem; font-weight: 600; color: var(--brand-deep); line-height: 1.22; }
.sc-sub { color: var(--muted); font-style: italic; }
.sc-meta, .cc-meta { display: flex; flex-wrap: wrap; gap: .8rem; font-size: .85rem; color: var(--muted); margin-top: .5rem; }
.sc-meta span, .cc-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.sc-meta span + span::before, .cc-meta span + span::before { content: "·"; margin-right: .5rem; color: var(--slate-300); }
.sc-go { margin-top: .7rem; font-weight: 600; color: var(--brand); display: inline-flex; align-items: center; gap: .4rem; }

.principles { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.principles h3 { color: var(--brand-dark); margin-bottom: .35rem; }
.principles h3::before { content: ""; display: block; width: 32px; height: 3px; background: var(--amber); border-radius: 2px; margin-bottom: .7rem; }
.principles p { color: var(--text-soft); font-size: .96rem; margin: 0; }

/* --------------------------------------------------------------------------
   6. Program page
   -------------------------------------------------------------------------- */

.prog-hero { background: linear-gradient(145deg, var(--brand-deep), var(--blue-700) 62%, var(--blue-600)); color: #fff; }
.prog-hero-inner { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; padding: var(--sp-5) 0 var(--sp-6); }
.prog-hero h1 { color: #fff; margin-bottom: .4rem; text-wrap: balance; }
.prog-hero .eyebrow { color: var(--blue-200); }
.prog-sub { font-family: var(--font-serif); font-size: 1.25rem; font-style: italic; color: var(--blue-100); margin: 0 0 var(--sp-4); }
.prog-stats { display: flex; flex-wrap: wrap; gap: .9rem; margin: 0; font-size: .92rem; color: var(--blue-100); }
.prog-stats span { background: rgba(255,255,255,.12); padding: .3rem .8rem; border-radius: var(--r-pill); }
.prog-body { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.prog-about { max-width: var(--measure); }
.outcomes { margin: 0; padding-left: 0; list-style: none; display: grid; gap: .7rem; max-width: 70ch; }
.outcomes li { position: relative; padding-left: 1.9rem; color: var(--text-soft); }
.outcomes li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 10px; height: 6px; border: solid var(--blue-500); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg);
}

.rhythm { display: grid; gap: .1rem; max-width: 760px; counter-reset: step; }
.rhythm li { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.rhythm li:last-child { border-bottom: 0; }
.rh-ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: var(--r-md); }
.rh-ico .ico { width: 20px; height: 20px; }
.rh-body { display: grid; gap: .15rem; }
.rh-body strong { color: var(--brand-deep); font-size: 1.02rem; }
.rh-body span { color: var(--muted); font-size: .94rem; }

.kind-reading   { background: var(--k-reading-bg);  color: var(--k-reading); }
.kind-dialogue  { background: var(--k-dialogue-bg); color: var(--k-dialogue); }
.kind-journal   { background: var(--k-journal-bg);  color: var(--k-journal); }
.kind-assignment{ background: var(--k-journal-bg);  color: var(--k-journal); }
.kind-activity  { background: var(--k-journal-bg);  color: var(--k-journal); }
.kind-problem-set { background: var(--k-journal-bg); color: var(--k-journal); }
.kind-knowledge-check { background: var(--k-quiz-bg); color: var(--k-quiz); }
.kind-graded-quiz     { background: var(--k-quiz-bg); color: var(--k-quiz); }

.course-cards { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.course-card a {
  display: grid; gap: .4rem; height: 100%; background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--blue-400);
  border-radius: var(--r-md); padding: var(--sp-5); text-decoration: none; color: inherit;
  box-shadow: var(--shadow-1); transition: box-shadow .18s, transform .18s, border-left-color .18s;
}
.course-card a:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); border-left-color: var(--brand); }
.cc-num { font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blue-600); }
.cc-title { font-family: var(--font-serif); font-size: 1.22rem; font-weight: 600; color: var(--brand-deep); line-height: 1.25; }
.cc-desc { color: var(--text-soft); font-size: .93rem; line-height: 1.52; }
.cc-bar { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; }
.cc-bar .bar { flex: 1; }
.cc-pct { font-size: .78rem; font-weight: 600; color: var(--muted); min-width: 3ch; text-align: right; }

/* --------------------------------------------------------------------------
   7. Learning layout: one sticky bar, one column
   -------------------------------------------------------------------------- */

/* On learning pages the masthead scrolls away so only one thing is pinned.
   The bar below carries everything a reader needs while moving. */
.page-lesson .masthead,
.page-module .masthead,
.page-course .masthead { position: static; }

.learnbar {
  position: sticky; top: 0; z-index: 55;
  /* Containing block for the dropdown sheets on narrow screens. */
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 10px rgba(31, 40, 55, .05);
}
/* The program name rides at the top of the sticky block, in the masthead's
   blue, so the reader always knows which program they are inside even once
   the masthead itself has scrolled away. */
.lb-program { background: var(--brand-deep); border-top: 1px solid rgba(255, 255, 255, .13); }
.lb-program-inner {
  width: min(100% - 2rem, 1180px); margin-inline: auto;
  display: flex; align-items: center; gap: .5rem;
  min-height: 34px; padding: .3rem 0;
  color: #fff; text-decoration: none;
  font-size: .86rem; font-weight: 600; letter-spacing: .01em;
}
.lb-program-inner:hover { color: var(--blue-200); }
.lb-program-inner > span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-program-mark { width: 18px; height: 18px; flex: none; color: var(--blue-300); }

.learnbar-inner {
  width: min(100% - 2rem, 1180px); margin-inline: auto;
  display: grid; gap: .3rem; padding: .45rem 0 .55rem;
  /* Grid items must stretch, not size to their content: with justify-items:
     start the breadcrumb takes its max-content width and overflows the track,
     and nothing inside it ever gets the chance to shrink. Both rows are
     left-aligned by their own flex layout anyway. */
  justify-items: stretch;
}
.learnbar-inner > * { min-width: 0; }
/* 7a. Breadcrumb with pickers ---------------------------------------------- */

.lb-crumbs { min-width: 0; flex: 1; }
.lb-crumbs ol { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: .1rem; margin: 0; padding: 0; }
.lb-crumb + .lb-crumb::before { content: "/"; color: var(--slate-300); margin: 0 .15rem 0 .1rem; }
.lb-crumb { display: flex; align-items: center; }
.lb-pick { position: relative; }
.lb-pick-btn {
  display: inline-flex; align-items: center; gap: .2rem;
  font: inherit; font-size: .84rem; font-weight: 600; color: var(--brand-dark);
  background: none; border: 1px solid transparent; border-radius: var(--r-sm);
  padding: .25rem .4rem .25rem .5rem; cursor: pointer; white-space: nowrap;
}
.lb-pick-btn:hover { background: var(--blue-50); border-color: var(--blue-200); }
.lb-pick.is-open > .lb-pick-btn { background: var(--blue-100); border-color: var(--blue-300); }
.lb-caret { width: 14px; height: 14px; color: var(--slate-400); transition: transform .15s; }
.lb-pick.is-open .lb-caret { transform: rotate(180deg); }

.lb-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 70;
  min-width: 280px; max-width: min(92vw, 460px);
  max-height: min(60vh, 420px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-3); padding: .3rem;
}
.lb-menu[hidden] { display: none; }
.lb-menu ul { list-style: none; margin: 0; padding: 0; }
.lb-menu a {
  display: flex; align-items: baseline; gap: .55rem;
  padding: .4rem .5rem; border-radius: var(--r-sm);
  text-decoration: none; color: var(--text-soft); font-size: .88rem; line-height: 1.35;
}
.lb-menu a:hover { background: var(--blue-50); color: var(--brand-dark); }
.lb-menu a.is-current { background: var(--blue-100); color: var(--brand-deep); font-weight: 600; }
.lbm-num {
  flex: none; min-width: 2.2rem; text-align: center;
  font-size: .72rem; font-weight: 700; color: var(--brand);
  background: var(--blue-50); border: 1px solid var(--blue-100);
  border-radius: var(--r-sm); padding: .08rem .25rem; font-variant-numeric: tabular-nums;
}
.lbm-text { flex: 1; min-width: 0; }
.lbm-meta { flex: none; font-size: .74rem; color: var(--slate-400); font-variant-numeric: tabular-nums; }
.lbm-group {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding: .55rem .5rem .25rem; border-top: 1px solid var(--line);
  margin-top: .2rem;
}
.lbm-group:first-child { border-top: 0; margin-top: 0; padding-top: .3rem; }
.lb-menu--items .lbm-ico { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: var(--r-sm); }
.lb-menu--items .lbm-ico .ico { width: 12px; height: 12px; }

/* 7b. Right-hand status ---------------------------------------------------- */

/* 7c. Lesson and item stepping --------------------------------------------- */

.lb-map {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .82rem; font-weight: 600; text-decoration: none; color: var(--brand-dark);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  padding: .2rem .6rem .2rem .5rem;
}
.lb-map:hover { background: var(--blue-50); border-color: var(--blue-300); }
.lb-map .ico { width: 14px; height: 14px; }
.lb-mapcrumb + .lb-crumb::before { content: none; }
.lb-crumbs ol > .lb-crumb:first-child::before { content: none; }

/* Item stepping rides at the end of the breadcrumb, separated by a rule
   rather than by being pushed to the far edge. */
.lb-items {
  display: inline-flex; align-items: center; gap: .25rem;
  margin-left: .45rem; padding-left: .6rem; border-left: 1px solid var(--line);
}
.lb-items::before { content: none !important; }

.lb-step {
  display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--brand-dark); cursor: pointer; text-decoration: none;
}
.lb-step .ico { width: 16px; height: 16px; }
.lb-step:hover { background: var(--blue-50); border-color: var(--blue-400); }
.lb-step:disabled { opacity: .32; pointer-events: none; }
.lb-itempick { position: relative; }
.lbp-narrow { display: none; }
.lb-itempick .lb-pick-btn { font-variant-numeric: tabular-nums; }
.lb-itempick .lb-menu { min-width: 320px; }

/* Course progress, left-aligned under the breadcrumb. */
.lb-progress { display: flex; align-items: center; gap: .55rem; }
.lb-progress .bar { width: clamp(120px, 26vw, 220px); height: 5px; }
.lb-pct { font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-pct [data-progress-text-for] { font-weight: 700; color: var(--brand-dark); }

/* 7d. The column ----------------------------------------------------------- */

.learn { width: min(100% - 2rem, 1180px); margin-inline: auto; }
.learn-main { padding: var(--sp-5) 0 var(--sp-6); min-width: 0; }

/* 7e. Lesson contents disclosure ------------------------------------------- */

.lesson-contents {
  margin-top: var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-alt);
}
.lesson-contents > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .8rem; font-size: .86rem; font-weight: 600; color: var(--brand-dark);
}
.lesson-contents > summary::-webkit-details-marker { display: none; }
.lesson-contents > summary:hover { background: var(--white); border-radius: var(--r-md); }
.lc-count { margin-left: auto; font-weight: 500; color: var(--muted); font-size: .8rem; }
.lc-caret { color: var(--slate-400); transition: transform .15s; }
.lesson-contents[open] .lc-caret { transform: rotate(180deg); }
.lc-list { list-style: none; margin: 0; padding: .2rem .4rem .45rem; border-top: 1px solid var(--line-warm); }
.lc-row a {
  display: flex; align-items: center; gap: .55rem;
  padding: .35rem .45rem; border-radius: var(--r-sm);
  text-decoration: none; color: var(--text-soft);
}
.lc-row a:hover { background: var(--white); }
.lc-ico { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--r-sm); }
.lc-ico .ico { width: 13px; height: 13px; }
.lc-reading .lc-ico { background: var(--k-reading-bg); color: var(--k-reading); }
.lc-dialogue .lc-ico { background: var(--k-dialogue-bg); color: var(--k-dialogue); }
.lc-journal .lc-ico, .lc-assignment .lc-ico, .lc-activity .lc-ico, .lc-problem-set .lc-ico { background: var(--k-journal-bg); color: var(--k-journal); }
.lc-knowledge-check .lc-ico, .lc-graded-quiz .lc-ico { background: var(--k-quiz-bg); color: var(--k-quiz); }
.lc-text { flex: 1; min-width: 0; display: grid; gap: .05rem; }
.lc-kind { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-500); }
.lc-name { font-size: .86rem; line-height: 1.3; }
.lc-min { flex: none; font-size: .74rem; color: var(--slate-400); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   8. Lesson content
   -------------------------------------------------------------------------- */

.crumbs { margin: 0 0 var(--sp-4); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; font-size: .82rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: .3rem; color: var(--slate-300); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }

.lesson-head, .course-head, .page-head { max-width: var(--measure); margin-bottom: var(--sp-5); }
.page-head { padding-top: var(--sp-5); }
.lesson-head h1 { text-wrap: balance; }
.lesson-meta { font-size: .86rem; color: var(--muted); margin: var(--sp-4) 0 0; }
.lesson-progress { margin-top: var(--sp-3); max-width: 340px; }

.objectives { background: var(--blue-50); border: 1px solid var(--blue-100); border-left: 3px solid var(--blue-400); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0 0; }
.objectives-head { font-family: var(--font-sans); font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blue-700); margin: 0 0 var(--sp-2); }
.objectives ul { margin: 0; padding-left: 1.15rem; }
.objectives li { margin-bottom: .35rem; color: var(--text-soft); font-size: .95rem; }
.objectives li:last-child { margin-bottom: 0; }

.items { display: grid; gap: var(--sp-5); }
/* A grid item defaults to min-width:auto, so its min-content width wins over
   the track. One table with nowrap headers then widens every item and the
   whole page scrolls sideways. min-width:0 lets .table-wrap do its job. */
.item { min-width: 0; scroll-margin-top: calc(var(--masthead-h) + var(--learnbar-h) + 16px); }
.item > * { min-width: 0; }
.prose { min-width: 0; }
.table-wrap { min-width: 0; }
.item-head { position: relative; max-width: var(--measure); padding-bottom: var(--sp-3); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.item-kind { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .5rem; }
.kind-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .22rem .6rem; border-radius: var(--r-pill);
}
.kind-chip .ico { width: 14px; height: 14px; }
.item-time { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.item-time .ico { width: 13px; height: 13px; }
.item-title { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem); margin: 0; text-wrap: balance; }
.item-done {
  display: inline-flex; align-items: center; gap: .35rem;
  font: inherit; font-size: .78rem; font-weight: 600;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--muted);
  border-radius: var(--r-pill); padding: .3rem .7rem; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.item-done .ico { width: 15px; height: 15px; }
.item-done:hover { border-color: var(--blue-300); color: var(--brand-dark); background: var(--blue-50); }
.item-done[aria-pressed="true"] { background: var(--green-ink); border-color: var(--green-ink); color: #fff; }
/* Status echo for scanning back through a lesson; the control itself is at the foot. */
.done-chip {
  display: none; align-items: center; gap: .25rem;
  font-size: .74rem; font-weight: 600; color: var(--green-ink); background: var(--green-bg);
  padding: .2rem .55rem; border-radius: var(--r-pill);
}
.done-chip .ico { width: 13px; height: 13px; }
.item.is-done .done-chip { display: inline-flex; }
.item--reading .kind-chip { background: var(--k-reading-bg); color: var(--k-reading); }
.item--dialogue .kind-chip { background: var(--k-dialogue-bg); color: var(--k-dialogue); }
.item--journal .kind-chip, .item--assignment .kind-chip, .item--activity .kind-chip, .item--problem-set .kind-chip { background: var(--k-journal-bg); color: var(--k-journal); }
.item--knowledge-check .kind-chip, .item--graded-quiz .kind-chip { background: var(--k-quiz-bg); color: var(--k-quiz); }

.item.is-optional .item-head { border-bottom-style: dashed; }

/* Interactive items sit in a card, so the reading flow visibly stops. */
.item--dialogue, .item--journal, .item--assignment, .item--activity, .item--problem-set,
.item--knowledge-check, .item--graded-quiz {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-5) var(--sp-5); box-shadow: var(--shadow-1);
}
.item--dialogue { border-top: 3px solid var(--k-dialogue); }
.item--journal, .item--assignment, .item--activity, .item--problem-set { border-top: 3px solid var(--amber); }
.item--knowledge-check, .item--graded-quiz { border-top: 3px solid var(--k-quiz); }

/* 8a. Prose ---------------------------------------------------------------- */

.prose {
  font-family: var(--font-serif); font-size: 1.09rem; line-height: var(--lh-prose);
  color: var(--text); max-width: var(--measure);
  /* Some references use a bare URL as the link text. An unbreakable 300px
     string would otherwise set the minimum width of the whole column. */
  overflow-wrap: break-word;
}
.prose a, .prose code { overflow-wrap: anywhere; }
.prose > * { max-width: var(--measure); }
.prose h3, .prose h4, .prose h5 { font-family: var(--font-sans); color: var(--brand-dark); margin: var(--sp-5) 0 var(--sp-2); letter-spacing: 0; }
.prose h3 { font-size: 1.14rem; font-weight: 700; }
.prose h4 { font-size: 1rem; font-weight: 700; color: var(--slate-700); }
.prose h3:first-child, .prose h4:first-child { margin-top: 0; }
.prose p { margin: 0 0 var(--sp-4); }
.prose ul, .prose ol { margin: 0 0 var(--sp-4); padding-left: 1.35em; }
.prose li { margin-bottom: .45rem; }
.prose li > ul, .prose li > ol { margin-top: .45rem; }
.prose strong { color: var(--brand-deep); font-weight: 650; }
.prose a { color: var(--brand-dark); }
.prose blockquote {
  margin: var(--sp-4) 0; padding: var(--sp-4) var(--sp-5);
  background: var(--paper-2); border-left: 3px solid var(--amber);
  border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 1.04rem; color: var(--text-soft);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { margin: var(--sp-5) 0; }
.prose pre { background: var(--slate-900); color: #e8eef6; padding: var(--sp-4); border-radius: var(--r-md); font-size: .85rem; line-height: 1.5; }
.prose pre code { background: none; color: inherit; padding: 0; }

.table-wrap { overflow-x: auto; margin: 0 0 var(--sp-5); max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.prose .table-wrap { max-width: none; }
table { border-collapse: collapse; width: 100%; font-family: var(--font-sans); font-size: .92rem; }
thead th { background: var(--blue-50); color: var(--brand-deep); text-align: left; font-weight: 700; font-size: .8rem; letter-spacing: .03em; text-transform: uppercase; padding: .6rem .75rem; border-bottom: 2px solid var(--blue-200); white-space: nowrap; }
tbody td { padding: .6rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-soft); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--surface-alt); }

/* Math, typeset by KaTeX through math.js. A wide display equation scrolls in
   its own box rather than widening the page on a phone. Until it is typeset,
   or with JavaScript off, the TeX source shows in monospace. */
.math-display { display: block; overflow-x: auto; overflow-y: hidden; margin: 0 0 var(--sp-5); }
/* KaTeX's hidden MathML copy is absolutely positioned. Anchoring it to its own
   formula keeps it inside any scroll box the formula sits in; otherwise math in
   a wide table's scrolled-off columns widens the whole page on a phone. */
.math { position: relative; }
.math-display .katex-display { margin: 0; padding: var(--sp-2) 0; }
/* Problem sets: each worked solution is folded under its own problem, so a
   learner can check one answer without seeing the others. */
.problem { margin: 0 0 var(--sp-5); }
.solution { margin: var(--sp-3) 0 0; }
.solution > summary {
  list-style: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2);
}
.solution > summary::-webkit-details-marker { display: none; }
.solution-cue { font-family: var(--font-sans); font-size: .9rem; color: var(--muted); }
.solution-toggle {
  display: inline-flex; align-items: center;
  font-family: var(--font-sans); font-size: .9rem; font-weight: 600;
  padding: .45rem .95rem; border-radius: var(--r-pill);
  border: 1px solid var(--blue-300); background: var(--surface); color: var(--brand-dark);
  transition: background .15s;
}
.solution > summary:hover .solution-toggle { background: var(--blue-50); }
.solution-hide, .solution[open] .solution-show, .solution[open] .solution-cue { display: none; }
.solution[open] .solution-hide { display: inline; }
.solution-body {
  margin-top: var(--sp-3); padding: var(--sp-4);
  background: var(--surface-alt); border-left: 3px solid var(--amber);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.solution-body > :last-child { margin-bottom: 0; }
.math:not([data-typeset]) { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; }

/* 8b. Dialogue ------------------------------------------------------------- */

.dialogue { margin-top: var(--sp-5); }
.dialogue-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.dialogue .btn-primary { background: var(--k-dialogue); border-color: var(--k-dialogue); }
.dialogue .btn-primary:hover { background: var(--plum-ink); border-color: var(--plum-ink); }
.dialogue-note { font-size: .88rem; color: var(--muted); margin: var(--sp-3) 0 0; max-width: 62ch; }
.dialogue-note.is-ok { color: var(--green-ink); font-weight: 600; }
.dialogue-note.is-warn { color: var(--rust-ink); font-weight: 600; }
.prompt-reveal { margin-top: var(--sp-4); border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.prompt-reveal > summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--brand-dark); }
.prompt-reveal > summary .muted { font-weight: 400; }
.prompt-reveal pre {
  margin-top: var(--sp-3); white-space: pre-wrap; word-break: break-word;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-4); font-size: .82rem; line-height: 1.55; color: var(--text-soft);
  max-height: 420px; overflow-y: auto;
}

/* 8c. Writing items -------------------------------------------------------- */

.writing-actions { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.writing-note { width: 100%; margin: 0; }

/* 8d. Quiz ----------------------------------------------------------------- */

.quiz { margin-top: var(--sp-4); }
.quiz-meta { font-size: .86rem; color: var(--muted); margin: 0 0 var(--sp-4); }
.quiz-launch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.quiz .btn-primary { background: var(--k-quiz); border-color: var(--k-quiz); }
.quiz .btn-primary:hover { background: var(--rust-ink); border-color: var(--rust-ink); }
.quiz-best { font-size: .86rem; font-weight: 600; color: var(--muted); }
.quiz-mount { margin-top: var(--sp-5); }

.q { border-top: 1px solid var(--line); padding-top: var(--sp-5); margin-top: var(--sp-5); }
.q:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.q-num { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--k-quiz); margin: 0 0 .4rem; }
.q-stem { font-family: var(--font-serif); font-size: 1.06rem; line-height: 1.55; color: var(--text); margin-bottom: var(--sp-4); }
.q-stem p:last-child { margin-bottom: 0; }
.q-hint { font-size: .82rem; color: var(--muted); margin: -.6rem 0 var(--sp-3); }

.q-options { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.q-option { display: block; }
.q-option label {
  display: flex; gap: .7rem; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: .7rem .9rem; background: var(--surface); transition: border-color .15s, background .15s;
}
.q-option label:hover { border-color: var(--blue-400); background: var(--blue-50); }
.q-option input { margin: .25rem 0 0; flex: none; accent-color: var(--brand); width: 1.05rem; height: 1.05rem; }
.q-option-text { flex: 1; }
.q-option.is-correct label { border-color: var(--green-ink); background: #eef7f2; }
.q-option.is-wrong label { border-color: var(--rust); background: #fdf1ea; }
.q-option.is-missed label { border-color: var(--amber); background: #fdf8ec; border-style: dashed; }
.q-fb { font-size: .9rem; line-height: 1.5; margin: .45rem 0 0; padding-left: 1.75rem; color: var(--text-soft); }
.q-fb.ok { color: var(--green-ink); }
.q-fb.no { color: var(--rust-ink); }

.q-text-input, .q-blank select {
  font: inherit; font-size: 1rem; padding: .5rem .7rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text);
  max-width: 100%;
}
.q-text-input { width: min(100%, 24rem); }
.q-text-input:focus, .q-blank select:focus { border-color: var(--brand); }
.q-blank { display: inline-block; margin: 0 .15rem; }
.q-blank select { font-size: .95rem; padding: .25rem .4rem; }
.q-blank.is-correct select { border-color: var(--green-ink); background: #eef7f2; }
.q-blank.is-wrong select { border-color: var(--rust); background: #fdf1ea; }

.quiz-controls { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.quiz-result {
  margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md);
  background: var(--blue-50); border: 1px solid var(--blue-200);
}
.quiz-result.is-pass { background: #eef7f2; border-color: #bfe0ce; }
.quiz-result.is-fail { background: #fdf1ea; border-color: #f0cdb6; }
.quiz-score { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; color: var(--brand-deep); margin: 0 0 .3rem; }
.quiz-result p:last-child { margin-bottom: 0; }
.quiz-form-note { font-size: .82rem; color: var(--muted); margin: 0 0 var(--sp-4); }

/* --------------------------------------------------------------------------
   9. Course / module / map
   -------------------------------------------------------------------------- */

.course-desc { max-width: var(--measure); }
.audience p { max-width: var(--measure); color: var(--text-soft); }

.module-blocks { display: grid; gap: var(--sp-4); }
.module-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.module-block > details > summary {
  list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem;
  padding: var(--sp-4) var(--sp-5); background: var(--blue-50); border-bottom: 1px solid var(--line);
}
.module-block > details > summary::-webkit-details-marker { display: none; }
.module-block > details:not([open]) > summary { border-bottom-color: transparent; }
.mb-num { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.mb-title { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; color: var(--brand-deep); }
.mb-meta { font-size: .84rem; color: var(--muted); }
.mb-caret { margin-left: auto; color: var(--muted); transition: transform .18s; }
.module-block > details[open] .mb-caret { transform: rotate(180deg); }
.mb-desc { margin: var(--sp-4) var(--sp-5) var(--sp-3); color: var(--text-soft); max-width: var(--measure); font-size: .96rem; }
.mb-link { margin: 0 var(--sp-5) var(--sp-4); font-size: .9rem; }
.mb-link a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; text-decoration: none; }
.mb-link a:hover { text-decoration: underline; }
.module-lessons { list-style: none; margin: 0; padding: 0 var(--sp-3) var(--sp-3); }
.module-lessons a { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: var(--r-sm); text-decoration: none; color: var(--text); border: 1px solid transparent; }
.module-lessons a:hover { background: var(--blue-50); border-color: var(--blue-200); }
.ml-num { font-variant-numeric: tabular-nums; font-size: .78rem; font-weight: 700; color: var(--brand); background: var(--blue-50); border-radius: var(--r-sm); padding: .15rem .4rem; min-width: 2.4rem; text-align: center; }
.ml-title { flex: 1; min-width: 0; font-size: .96rem; }
.ml-time { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.lesson-cards { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.lesson-card a { display: grid; gap: .35rem; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5); text-decoration: none; color: inherit; box-shadow: var(--shadow-1); transition: box-shadow .18s, transform .18s; }
.lesson-card a:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.lc-num { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.lc-title { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600; color: var(--brand-deep); line-height: 1.3; }
.lc-desc { font-size: .9rem; color: var(--text-soft); line-height: 1.5; }
.lc-foot { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.lc-time { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; color: var(--muted); margin-left: auto; }
.minichip { display: inline-flex; align-items: center; gap: .18rem; font-size: .74rem; font-weight: 600; color: var(--muted); }
.minichip-ico { display: inline-flex; color: var(--slate-400); }
.minichip .ico { width: 13px; height: 13px; }

.project-card { display: flex; gap: var(--sp-4); align-items: center; background: linear-gradient(135deg, #fdf8ec, var(--surface) 55%); border: 1px solid var(--amber); border-radius: var(--r-lg); padding: var(--sp-5); text-decoration: none; color: inherit; box-shadow: var(--shadow-1); }
.project-card:hover { box-shadow: var(--shadow-2); }
.pc-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--r-md); background: var(--amber); color: #fff; }
.pc-ico .ico { width: 22px; height: 22px; }
.pc-body { display: grid; gap: .2rem; flex: 1; }
.pc-title { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; color: var(--brand-deep); }
.pc-desc { font-size: .92rem; color: var(--text-soft); }
.pc-meta { font-size: .8rem; color: var(--muted); }
.pc-go { color: var(--brand); }

.further .prose { font-size: 1rem; }

/* The map reads as an indented outline: one narrow column, lesson rows leading
   the eye across to duration and progress. */
.mapping { width: min(100% - 2.5rem, 880px); margin-inline: auto; padding-bottom: var(--sp-6); }

.mo-course { margin-bottom: var(--sp-6); }
.mo-course-head { border-bottom: 2px solid var(--blue-200); padding-bottom: var(--sp-2); margin-bottom: var(--sp-4); }
.mo-course-head h2 { margin: 0 0 .25rem; }
.mo-course-head a { text-decoration: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; }
.mo-ckicker { font-family: var(--font-sans); font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--brand); }
.mo-cmeta { font-size: .84rem; color: var(--muted); margin: 0 0 .5rem; }
.mo-cbar { display: flex; align-items: center; gap: .6rem; }
.mo-cbar .bar { flex: 1; max-width: 320px; }
.mo-cpct { font-size: .76rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }

.mo-modules { list-style: none; margin: 0; padding: 0; }
.mo-module { margin-bottom: var(--sp-4); }
.mo-module-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
  font-family: var(--font-sans); font-size: .95rem; margin: 0 0 .35rem;
}
.mo-module-head a { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; text-decoration: none; }
.mo-mnum {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: #fff; background: var(--brand); border-radius: var(--r-sm); padding: .14rem .45rem;
}
.mo-mnum .ico { width: 12px; height: 12px; }
.mo-mtitle { font-weight: 600; color: var(--brand-deep); }
.mo-module-head a:hover .mo-mtitle { text-decoration: underline; }
.mo-mmeta { margin-left: auto; font-size: .76rem; color: var(--slate-400); }

.mo-lessons { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--blue-100); }
.mo-lesson a {
  display: flex; align-items: baseline; gap: .55rem;
  padding: .34rem .5rem; border-radius: var(--r-sm);
  text-decoration: none; color: var(--text-soft); font-size: .92rem;
}
.mo-lesson a:hover { background: var(--blue-50); color: var(--brand-dark); }
.mo-num { flex: none; min-width: 2.2rem; font-size: .76rem; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.mo-title { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 9rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A leader rule, like a table of contents. */
.mo-dots { flex: 1; min-width: 1.5rem; border-bottom: 1px dotted var(--line-strong); transform: translateY(-.25em); }
.mo-time { flex: none; font-size: .78rem; color: var(--slate-400); font-variant-numeric: tabular-nums; }
.mo-lesson .pdot { flex: none; align-self: center; }
.mo-project .mo-mnum { background: var(--amber-ink); }
.mo-project .mo-lessons { border-left-color: #f0e2bf; }


/* --------------------------------------------------------------------------
   10. Pager
   -------------------------------------------------------------------------- */

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.pager-link { display: flex; align-items: center; gap: .7rem; padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; color: inherit; transition: border-color .18s, box-shadow .18s; }
.pager-link:hover { border-color: var(--blue-400); box-shadow: var(--shadow-1); }
.pager-next { justify-content: flex-end; text-align: right; }
.pager-text { display: grid; gap: .15rem; min-width: 0; }
.pager-dir { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brand); }
.pager-title { font-family: var(--font-serif); font-size: 1.02rem; color: var(--brand-deep); line-height: 1.3; }
.pager-link .ico { width: 20px; height: 20px; color: var(--brand); flex: none; }

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */

/* The bar sheds its labels before it sheds its controls. */
@media (max-width: 860px) {
  .lb-map span { display: none; }
  .lb-map { padding: .2rem .45rem; }

  /* The breadcrumb collapses rather than wrapping onto three lines. The
     lesson picker already lists every lesson in the course grouped by module,
     so hiding the course and module pickers loses no destination, and the Map
     link covers moving between courses. */
  .lb-pick--course, .lb-pick--module { display: none; }
  .lb-pick--lesson + .lb-items { margin-left: .35rem; padding-left: .5rem; }
  .lb-crumbs ol { flex-wrap: nowrap; }
  .lb-crumb { min-width: 0; }
  /* Long labels such as "Course Project" must be able to ellipsis. A flex
     item will not shrink past its min-content width unless told to. */
  .lb-crumbs, .lb-crumbs ol, .lb-pick-btn { min-width: 0; }
  /* The stepper keeps its natural size; the lesson label takes whatever is
     left and truncates, rather than being capped at a guessed fraction. */
  /* "Item 3 of 9" becomes "3/9", and the steppers lose a few pixels, which
     is the difference between the row fitting and the next arrow falling off
     the edge on a 360px phone. */
  .lbp-wide { display: none; }
  .lbp-narrow { display: inline; }
  .lb-items { flex: none; gap: .15rem; margin-left: .3rem; padding-left: .45rem; }
  .lb-step { width: 26px; height: 26px; }
  .lb-itempick .lb-pick-btn { padding: .25rem .25rem .25rem .4rem; }
  .lb-mapcrumb { flex: none; }
  .lb-crumb + .lb-crumb::before { margin: 0 .1rem; }
  .lb-pick--lesson { flex: 1 1 auto; min-width: 2.5rem; }
  .lb-pick--lesson .lb-pick-btn { width: 100%; justify-content: flex-start; }
  .lb-pick-label {
    min-width: 0; flex: 0 1 auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Menus become a sheet spanning the bar instead of hanging off a button,
     which is what was pushing the document wider than the viewport. The
     positioning context is the bar itself, so .lb-pick must not be one. */
  .lb-pick, .lb-itempick { position: static; }
  .lb-itempick .lb-menu { min-width: 0; }
  .lb-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    min-width: 0; max-width: none; width: auto;
    max-height: 62vh;
    border-left: 0; border-right: 0;
    border-radius: 0 0 var(--r-md) var(--r-md);
    box-shadow: 0 14px 28px rgba(22, 58, 94, .22);
  }
  .lb-menu ul { padding-bottom: .2rem; }
  .lb-menu a { padding: .55rem .6rem; }
  .lbm-text { white-space: normal; }

  /* Map rows become a small grid: the number and the duration hold their
     columns while the title wraps inside its own, instead of flex-wrapping
     each piece onto a line of its own. */
  .mo-lesson a {
    display: grid; grid-template-columns: 2.3rem minmax(0, 1fr) auto auto;
    column-gap: .5rem; align-items: baseline;
  }
  .mo-title { max-width: none; white-space: normal; overflow: visible; }
  .mo-dots { display: none; }
  .mo-time { margin-left: 0; }
  .mo-module-head a { flex: 1 1 100%; }
  .mo-mmeta { margin-left: 0; }
}

@media (max-width: 760px) {
  :root { --fs-base: 1rem; --measure: 100%; }
  .masthead-inner { flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; width: 100%; flex-direction: column; padding-bottom: var(--sp-3); margin-left: 0; }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: .6rem .5rem; }

  .learn { width: min(100% - 1.6rem, 100%); }
  .learn-main { padding-top: var(--sp-4); }
  .item--dialogue, .item--journal, .item--assignment, .item--activity, .item--problem-set,
  .item--knowledge-check, .item--graded-quiz { padding: var(--sp-4); border-radius: var(--r-md); }
  .item-head { padding-bottom: var(--sp-3); }
  .prose { font-size: 1.04rem; }
  .pager { grid-template-columns: 1fr; }
  .pager-next { justify-content: flex-start; text-align: left; flex-direction: row-reverse; }
  .dialogue-actions .btn, .quiz-launch .btn, .writing-actions .btn { flex: 1 1 auto; justify-content: center; }
  .prose .table-wrap { font-size: .86rem; }
}

/* Generic "more coming" cards, so the grid shows its eventual shape without
   promising a particular program. Flat and unclickable by design. */
.splash-card--soon {
  display: grid; gap: .45rem; align-content: center; justify-items: center;
  text-align: center; padding: var(--sp-5);
  background: var(--surface-alt); border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg); color: var(--muted); min-height: 190px;
}
.sc-soon-mark { color: var(--blue-300); }
.sc-soon-mark .ico { width: 26px; height: 26px; }
.sc-soon-title { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600; color: var(--slate-600); }
.sc-soon-sub { font-size: .88rem; line-height: 1.5; max-width: 30ch; }

/* Per-item report link: present on all 366 items, so it has to be quiet
   enough to ignore and findable when wanted. */
/* Item foot: the done control and report link close the item. On plain
   readings its rule is also the break between items; cards already have an
   edge, so they skip it. Wraps to two lines when the row will not fit. */
.item-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-2) var(--sp-4); max-width: var(--measure);
  margin-top: var(--sp-5); padding-bottom: var(--sp-5);
  border-bottom: 2px solid var(--line-strong);
}
.item--dialogue .item-foot, .item--journal .item-foot, .item--assignment .item-foot,
.item--activity .item-foot, .item--problem-set .item-foot, .item--knowledge-check .item-foot, .item--graded-quiz .item-foot {
  padding-bottom: 0; border-bottom: 0;
}
.item-report-link {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; color: var(--slate-500); text-decoration: none;
}
.item-report-link .ico { width: 13px; height: 13px; }
.item-report-link:hover { color: var(--rust-ink); text-decoration: underline; }

/* --------------------------------------------------------------------------
   11b. Vetting seal and status
   -------------------------------------------------------------------------- */

/* The seal states, in public, whether a program has finished expert review.
   It is a link, not an ornament: it goes to the page that explains itself. */
.seal {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .4rem .8rem .4rem .5rem; border-radius: var(--r-pill);
  border: 1px solid currentColor; background: var(--surface);
  text-decoration: none; line-height: 1.1; white-space: nowrap;
}
a.seal:hover { box-shadow: var(--shadow-1); }
.seal-ring { display: grid; place-items: center; width: 1.9em; height: 1.9em; flex: none; }
.seal-ico { width: 100%; height: 100%; }
.seal-words { display: flex; flex-direction: column; gap: .1em; min-width: 0; }
.seal-kicker { font-size: .58em; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; opacity: .75; }
.seal-label { font-size: .82em; font-weight: 700; letter-spacing: .01em; }

.seal--vetted { color: var(--teal); background: var(--teal-bg); }
.seal--in-progress { color: var(--amber-ink); background: #fdf6e6; }

.seal--sm { font-size: .82rem; padding: .28rem .6rem .28rem .35rem; }
.seal--md { font-size: .95rem; }
.seal--lg { font-size: 1.1rem; padding: .55rem 1rem .55rem .6rem; }
.seal--xl { font-size: 1.3rem; padding: .7rem 1.2rem .7rem .7rem; }

/* On the program hero the seal sits on dark blue. */
.prog-hero .seal { background: rgba(255,255,255,.95); border-color: transparent; }

.prog-hero-top { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-start; justify-content: space-between; }
.prog-hero-words { flex: 1 1 24rem; min-width: 0; }

.status-head { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: center; }
.status-head > div { flex: 1 1 20rem; min-width: 0; }

/* A quiet reminder on every course and lesson page, with the page's report
   button just below it rather than inside. */
.vet-block { max-width: var(--measure); margin: 0 0 var(--sp-5); }
.vet-report { margin: var(--sp-3) 0 0; }
.vet-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: var(--surface-alt); border: 1px solid var(--line-warm);
  border-left: 3px solid var(--amber); border-radius: var(--r-md);
}
.vet-strip p { margin: 0; font-size: .88rem; color: var(--text-soft); flex: 1 1 18rem; }

.vetting { border-top: 1px solid var(--line); }
.vet-head { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; margin-bottom: var(--sp-4); }
.vet-head > div { flex: 1 1 22rem; min-width: 0; }
.vet-head .section-head { margin-bottom: .3rem; }
.vet-points { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: .75rem; max-width: var(--measure); }
.vet-points li { position: relative; padding-left: 1.6rem; color: var(--text-soft); font-size: .96rem; line-height: 1.55; }
.vet-points li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--amber);
}
.vet-points strong { color: var(--brand-deep); }
.vet-pending {
  font-size: .9rem; color: var(--muted); background: var(--surface-alt);
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); max-width: var(--measure);
}

.seal-key { list-style: none; margin: var(--sp-4) 0; padding: 0; display: grid; gap: var(--sp-4); }
.seal-key li { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-start; }
.seal-key p { margin: 0; flex: 1 1 18rem; color: var(--text-soft); font-size: .95rem; }

/* --------------------------------------------------------------------------
   11c. About page pieces
   -------------------------------------------------------------------------- */

.hero--about .hero-inner { padding-block: clamp(2rem, 4vw, 3.25rem); }
.sub-head { font-family: var(--font-sans); font-size: 1.02rem; font-weight: 700; color: var(--brand-dark); margin: var(--sp-6) 0 var(--sp-3); }
.aside-note {
  font-size: .95rem; color: var(--muted); font-style: italic;
  border-left: 3px solid var(--blue-200); padding-left: var(--sp-4); margin-top: var(--sp-5);
  max-width: var(--measure);
}
.measure { max-width: var(--measure); }

.bio { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: flex-start; }
.bio-photo {
  width: 160px; height: 160px; flex: none; border-radius: var(--r-lg);
  object-fit: cover; border: 1px solid var(--line-warm); box-shadow: var(--shadow-1);
}
.bio-body { flex: 1 1 18rem; min-width: 0; }
.bio-name { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; color: var(--brand-deep); margin: 0 0 .4rem; }
.bio-body p { color: var(--text-soft); }


/* --------------------------------------------------------------------------
   11d. Guided Conversation assistants
   -------------------------------------------------------------------------- */

.dialogue-lead { font-size: .92rem; font-weight: 600; color: var(--text-soft); margin: 0 0 var(--sp-3); }
.dialogue-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.dialogue-secondary { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-3); }
.btn-small { font-size: .85rem; padding: .4rem .8rem; }

/* There is no desktop app on a phone, so do not offer one. */
@media (max-width: 700px), (pointer: coarse) {
  [data-provider="claude-app"] { display: none; }
}

/* Each assistant keeps its own tint so the row reads as a choice rather than
   a primary action with two afterthoughts. */
.btn-assistant { border-width: 1.5px; font-weight: 650; }
.btn-claude { color: #b4541f; border-color: #e3b394; background: #fdf4ee; }
.btn-claude:hover { background: #fbe9dd; border-color: #d08a5c; color: #8f3f14; }
.btn-chatgpt { color: #0b6b58; border-color: #9ccfc1; background: #eef8f5; }
.btn-chatgpt:hover { background: #ddf0ea; border-color: #63b49c; color: #084f41; }

/* --------------------------------------------------------------------------
   12. Print — for the journal and project prompts
   -------------------------------------------------------------------------- */

@media print {
  .masthead, .learnbar, .pager, .site-foot, .skip-link, .lesson-contents,
  .vet-block, .item-foot, .done-chip, .dialogue-actions, .dialogue-secondary,
  .writing-actions, .quiz { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .learn { display: block; width: auto; }
  .learn-main { padding: 0; }
  .prose, .prose > * { max-width: none; }
  .item { break-inside: avoid-page; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; word-break: break-all; }
  .item--journal, .item--assignment, .item--activity, .item--problem-set { border: 0; box-shadow: none; padding: 0; }
  body.printing-one .item { display: none; }
  body.printing-one .item.print-target { display: block; }
}