/* ============================================================
   COURSE SITE — Geelen & Company editorial design
   Ported from geelenandcompany-com/project/hub.css (tokens + component
   vocabulary), extended with course-specific prose / flashcard / player.
   ============================================================ */
:root{
  --ink:#14202E;
  --ink-2:#2A3A50;
  --ink-mute:#7C8AA0;
  --paper:#FBFAF7;
  --paper-2:#F1EEE6;
  --paper-3:#E5E0D2;
  --blue:#0E5B95;
  --blue-deep:#0A4170;
  --steel:#6395BA;
  --pale:#B6C9DC;
  --bright:#76B9EE;
  --rule:rgba(20,32,46,.12);
  --display:"PT Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --italic:"PT Serif",Georgia,serif;
  --body:"PT Serif",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(24px,4vw,64px);
  --max:1320px;
  --reading:760px;
  --masthead-h:64px;   /* sticky masthead height; the read-along player pins just below it (T-136).
                          Overridden in the ≤600px @media because the masthead wraps to two rows. */
  /* Responsive breakpoint scale (T-136) — single reference for the @media set below.
     Keep new rules on one of these widths rather than inventing new ones:
       980px : desktop → tablet  (catalog grid 3→2 col)
       760px : tablet  → small   (footer, reading column)
       600px : small   → phone   (masthead wraps; cards→1col; hero meta→1col)
       560px : phone             (lesson-nav stacks) */
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ background:var(--paper); }
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--blue); color:var(--paper); }
img{ max-width:100%; display:block; }

/* ============================================================
   MASTHEAD
   ============================================================ */
.hub-masthead{
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.hub-masthead-inner{
  max-width:var(--max); margin:0 auto;
  padding:18px var(--gutter);
  display:flex; align-items:center; gap:32px;
}
.hub-wordmark{
  font-family:var(--display); font-weight:700;
  font-size:18px; letter-spacing:-.01em; color:var(--ink);
}
.hub-wordmark .hub-amp{
  font-family:var(--italic); font-style:italic; font-weight:400;
  color:var(--blue); padding:0 .08em;
}
.hub-nav{
  margin-left:auto;
  display:flex; gap:30px; align-items:center;
  font-family:var(--display); font-weight:400;
  font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-2);
}
.hub-nav a{
  padding-bottom:4px;
  border-bottom:1px solid transparent;
  transition:border-color .15s, color .15s;
}
.hub-nav a:hover{ color:var(--blue); border-bottom-color:var(--blue); }
.hub-nav a.is-active{ color:var(--blue); border-bottom-color:var(--blue); }

/* language switch in the nav */
.lang-switch{ display:flex; gap:10px; align-items:center; }
.lang-switch a{
  font-size:12px; letter-spacing:.12em; color:var(--ink-mute);
  border-bottom:1px solid transparent; padding-bottom:2px;
}
.lang-switch a.is-active{ color:var(--blue); border-bottom-color:var(--blue); }
.lang-switch .sep{ color:var(--rule); }

/* T-144: language switch collapsed into ONE dropdown (native <details>).
   Replaces the 7 inline links that ate a full row on phones. Summary shows the
   current language code; the list shows endonyms (natural-cased, not uppercased). */
.lang-menu{ position:relative; display:inline-flex; align-items:center; }
.lang-menu > summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; letter-spacing:.12em; color:var(--ink-mute);
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:color .15s, border-color .15s;
}
.lang-menu > summary::-webkit-details-marker{ display:none; }   /* hide default ▶ */
.lang-menu > summary::marker{ content:""; }
.lang-menu > summary:hover{ color:var(--blue); border-bottom-color:var(--blue); }
.lang-menu .lang-cur{ font-weight:700; }
.lang-menu .lang-caret{ font-size:9px; transition:transform .15s; }
.lang-menu[open] > summary .lang-caret{ transform:rotate(180deg); }
.lang-menu-list{
  position:absolute; top:calc(100% + 8px); right:0; z-index:200;
  display:flex; flex-direction:column; min-width:152px;
  background:var(--paper); border:1px solid var(--rule);
  box-shadow:0 8px 28px rgba(0,0,0,.14); padding:6px;
}
.lang-menu-list .lang-opt{
  display:block; padding:9px 12px;
  text-transform:none; letter-spacing:0; border-bottom:0;
  font-family:var(--display); font-size:14px; color:var(--ink-2);
  transition:background .12s, color .12s;
}
.lang-menu-list .lang-opt:hover{
  background:color-mix(in oklab, var(--blue) 12%, transparent); color:var(--blue);
}
.lang-menu-list .lang-opt.is-active{ color:var(--blue); font-weight:700; }
.lang-menu--solo .lang-cur{ color:var(--ink-mute); letter-spacing:.12em; }

/* design / theme switch — mirrors the language switch */
.theme-switch{
  display:inline-flex; gap:7px; align-items:center;
  background:none; border:0; cursor:pointer; padding:2px 0;
  font-family:var(--display); font-weight:700;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); border-bottom:1px solid transparent;
  transition:color .15s, border-color .15s;
}
.theme-switch:hover{ color:var(--blue); border-bottom-color:var(--blue); }
.theme-glyph{ font-size:15px; line-height:1; color:var(--blue); letter-spacing:0; }

/* Responsive masthead (T-136): on phones the wordmark + uppercase nav + language
   and theme switches overrun a single row, so let the row wrap — wordmark on line 1,
   nav (lang + theme switch) flowing onto line 2 — and tighten the gaps/letter-spacing.
   Stays in-vocabulary: no hamburger, no drawer, no new motion. Because this makes the
   masthead two rows tall, --masthead-h is bumped so the sticky read-along player still
   pins clear of the content. */
@media (max-width:600px){
  .hub-masthead-inner{ flex-wrap:wrap; gap:8px 16px; padding:12px var(--gutter); }
  /* T-144: nav is now just [lang ▾] + [theme] — a compact right-aligned cluster,
     not a full-width wrapping row. Pin it to the right so the theme toggle sits in
     the SAME spot on every page/breakpoint. */
  .hub-nav{ margin-left:auto; width:auto; gap:18px; flex-wrap:nowrap; font-size:12px; letter-spacing:.12em; }
  .lang-switch{ flex-wrap:wrap; gap:8px; }   /* legacy inline switch (unused since T-144); harmless */
  /* Icon-only theme toggle on phones: drop the text label, keep a ≥40px tap target. */
  .theme-switch .theme-label{ display:none; }
  .theme-switch{ padding:6px; min-width:40px; min-height:40px; justify-content:center; }
  .theme-glyph{ font-size:18px; }
  /* Bigger tap target for the language dropdown summary on phones. */
  .lang-menu > summary{ padding:6px 2px; }
  .lang-menu-list .lang-opt{ padding:11px 14px; font-size:15px; }
  /* T-144: the catalog's single-item "Library" breadcrumb only wastes a row on
     phones (deeper course/lesson breadcrumbs carry real navigation, so keep those). */
  .hub-breadcrumb--root{ display:none; }
  /* Phone reading space (T-138): the wrapped masthead is ~118px tall; keeping it
     sticky AND the audio player sticky ate ~24% of a phone screen while reading.
     Un-stick the masthead so it scrolls away — only the compact read-along player
     stays pinned (its top:0 override lives just after the player's base rule below,
     so source order lets it win). */
  .hub-masthead{ position:static; }
}

/* ============================================================
   BREADCRUMB (under masthead — Library › Course › Lesson)
   Themed via vars, so it tracks both Collective and G&Co themes.
   ============================================================ */
.hub-breadcrumb{
  border-bottom:1px solid var(--rule);
  background:color-mix(in oklab, var(--paper) 96%, transparent);
}
.hub-breadcrumb-inner{
  max-width:var(--max); margin:0 auto;
  padding:11px var(--gutter);
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-family:var(--display); font-size:12px; letter-spacing:.05em;
  color:var(--ink-mute);
}
.hub-breadcrumb .crumb{
  color:var(--ink-2); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:1px;
  transition:color .15s, border-color .15s;
}
.hub-breadcrumb a.crumb:hover{ color:var(--blue); border-bottom-color:var(--blue); }
.hub-breadcrumb .crumb.is-current{ color:var(--ink-mute); }
.hub-breadcrumb .crumb-sep{ color:var(--rule); user-select:none; }

/* ============================================================
   HERO (course landing)
   ============================================================ */
.hub-hero{
  max-width:var(--max); margin:0 auto;
  padding:64px var(--gutter) 56px;
}
.hub-eyebrow{
  font-family:var(--display); font-weight:700;
  font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--blue);
  display:flex; align-items:center; gap:14px;
  margin-bottom:28px;
}
.hub-eyebrow::before{ content:""; width:42px; height:1px; background:var(--blue); }
.hub-hero-mark{
  font-family:var(--display); font-weight:400;
  font-size:clamp(48px,8vw,120px);
  letter-spacing:-.025em; line-height:.95;
  margin:0 0 28px; color:var(--ink);
}
.hub-hero-mark em{
  font-family:var(--italic); font-style:italic; color:var(--blue);
}
.hub-thesis{
  font-family:var(--italic); font-style:italic; font-weight:400;
  font-size:clamp(20px,2.4vw,28px);
  line-height:1.4; color:var(--ink-2);
  max-width:620px; margin:0 0 40px;
}
.hub-thesis em{ color:var(--blue); font-weight:700; }
.hub-hero-meta dl{
  display:grid; grid-template-columns:repeat(3,auto); gap:40px;
  border-top:1px solid var(--rule); padding-top:20px;
  margin:0; width:max-content; max-width:100%;
  font-family:var(--mono); font-size:11px; color:var(--ink-mute);
}
.hub-hero-meta dt{
  font-family:var(--display); font-weight:700;
  font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; margin-bottom:6px;
}
.hub-hero-meta dd{ margin:0; color:var(--ink-2); font-size:13px; }
@media (max-width:600px){
  .hub-hero-meta dl{ grid-template-columns:1fr; gap:20px; }
  /* T-144: reclaim phone space before the course starts. The hero title duplicates
     the masthead wordmark (catalog: .hub-hero-title = "Claude Collective"; course:
     .hub-hero-mark = the course name already shown in the masthead), so hide it on
     phones and tighten the hero padding — the kicker/eyebrow + lede stay as context
     and the first card rises up. */
  .hub-hero{ padding:24px var(--gutter) 22px; }
  .hub-hero-title, .hub-hero-mark{ display:none; }
  .hub-eyebrow{ margin-bottom:14px; }
  .hub-thesis{ margin-bottom:24px; }
}

/* ============================================================
   SECTION HEAD + LESSON CARD GRID
   ============================================================ */
.hub-initiatives{ padding:48px 0 96px; border-top:1px solid var(--rule); }
.hub-section-head{
  max-width:var(--max); margin:0 auto;
  padding:0 var(--gutter); margin-bottom:40px;
}
.hub-kicker{
  font-family:var(--display); font-weight:700;
  font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--blue);
  display:flex; align-items:center; gap:14px; margin-bottom:20px;
}
.hub-kicker .num{ font-variant-numeric:tabular-nums; color:var(--ink-mute); }
.hub-kicker .num::after{ content:" — "; color:var(--ink-mute); }
.hub-title{
  font-family:var(--italic); font-style:italic; font-weight:700;
  font-size:clamp(32px,4vw,56px);
  line-height:1.02; letter-spacing:-.01em;
  margin:0 0 .3em; color:var(--ink);
  text-wrap:balance; max-width:20ch;
}
.hub-title em{ color:var(--blue); }
.hub-lede{
  font-family:var(--body); font-size:18px; line-height:1.6;
  max-width:60ch; color:var(--ink-2); margin:0;
}

.hub-cards{
  max-width:var(--max); margin:0 auto;
  padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.hub-cards > .hub-card:first-child{ grid-column:span 2; grid-row:span 2; }

.hub-card{
  background:var(--paper-2);
  border:1px solid var(--rule);
  padding:32px;
  display:flex; flex-direction:column; gap:18px;
  text-decoration:none; color:inherit;
  transition:background .2s, border-color .2s, transform .2s;
  position:relative; min-height:240px;
}
.hub-card:hover{
  background:var(--paper); border-color:var(--blue);
  transform:translateY(-2px);
}
.hub-card-meta{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--display); font-weight:700;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
}
.hub-card-num{ color:var(--blue); }
.hub-card-tag{ color:var(--ink-mute); }
.hub-card-name{
  font-family:var(--italic); font-style:italic; font-weight:700;
  font-size:clamp(24px,2.6vw,36px); line-height:1.05;
  color:var(--ink); letter-spacing:-.01em;
}
.hub-cards > .hub-card:first-child .hub-card-name{
  font-size:clamp(32px,4vw,52px); color:var(--blue);
}
.hub-card-tagline{
  font-family:var(--body); font-size:15px; line-height:1.55;
  color:var(--ink-2); margin:0; flex-grow:1;
}
.hub-card-tagline em{ color:var(--blue); font-style:italic; font-weight:700; }
.hub-card-stat{
  display:flex; flex-wrap:wrap; gap:18px;
  padding-top:16px; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:11px; color:var(--ink-mute);
}
.hub-card-stat em{ color:var(--blue); font-style:normal; font-weight:700; font-family:var(--display); }
.hub-card-cta{
  font-family:var(--display); font-weight:700;
  font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--blue); margin-top:auto;
}
@media (max-width:980px){
  .hub-cards{ grid-template-columns:repeat(2,1fr); }
  .hub-cards > .hub-card:first-child{ grid-column:span 2; grid-row:span 1; }
}
@media (max-width:600px){
  .hub-cards{ grid-template-columns:1fr; }
  .hub-cards > .hub-card:first-child{ grid-column:span 1; }
  /* T-142: phone readability for catalog/landing text — the T-139 19px work only
     touched lesson .prose; these landing-page classes read too small on a phone
     (base: hero-lede 16, tagline 15, meta 10, cta 11, stat 11). Placed after the
     base rules above (source-order) so equal-specificity overrides win. */
  .hub-hero-lede{ font-size:18px; line-height:1.55; }
  .hub-card-tagline{ font-size:16px; line-height:1.55; }
  .hub-card-meta{ font-size:12px; }
  .hub-card-cta{ font-size:13px; }
  .hub-card-stat{ font-size:12px; }
}

/* ============================================================
   LESSON PAGE
   ============================================================ */
.lesson-main{
  max-width:var(--max); margin:0 auto;
  padding:48px var(--gutter) 80px;
}
.lesson-head{ margin-bottom:40px; }
.lesson-back{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  color:var(--ink-mute); text-transform:uppercase;
  display:inline-block; margin-bottom:24px;
  border-bottom:1px solid transparent; padding-bottom:2px;
}
.lesson-back:hover{ color:var(--blue); border-bottom-color:var(--blue); }
.lesson-title{
  font-family:var(--italic); font-style:italic; font-weight:700;
  font-size:clamp(32px,4.4vw,60px); line-height:1.03;
  letter-spacing:-.01em; color:var(--ink);
  margin:0; text-wrap:balance; max-width:22ch;
}

/* section bands within a lesson */
.lesson-section{
  border-top:1px solid var(--rule);
  padding:44px 0;
}
.lesson-section-head{
  display:flex; align-items:baseline; gap:14px;
  font-family:var(--display); font-weight:700;
  font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--blue);
  margin-bottom:28px;
}
.lesson-section-head .count{
  font-family:var(--mono); color:var(--ink-mute); letter-spacing:.08em;
}

/* prev/next lesson navigation (bottom of lesson) — prev left, next right;
   color-mix uses var(--blue) so the hover tint adapts per theme. */
.lesson-nav{
  display:flex; justify-content:space-between; gap:18px;
  border-top:1px solid var(--rule); padding:36px 0 8px;
}
.lesson-nav-link{
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  max-width:46%; padding:16px 20px;
  border:1px solid var(--rule); border-radius:2px; text-decoration:none;
  transition:border-color .15s, background .15s;
}
.lesson-nav-link:hover{
  border-color:var(--blue);
  background:color-mix(in oklab, var(--blue) 6%, transparent);
}
.lesson-nav-next{ align-items:flex-end; text-align:right; }
.lesson-nav-dir{
  font-family:var(--display); font-weight:700; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--blue);
}
.lesson-nav-name{
  font-family:var(--display); font-size:15px; color:var(--ink); line-height:1.25;
}
.lesson-nav-spacer{ flex:0 0 1px; }
@media (max-width:560px){
  .lesson-nav{ flex-direction:column; }
  .lesson-nav-link{ max-width:none; }
  .lesson-nav-next{ align-items:flex-start; text-align:left; }
}

/* ── prose (study notes md → html) ── */
.prose{ max-width:var(--reading); }
.prose h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(26px,3vw,34px); line-height:1.12;
  color:var(--ink); letter-spacing:-.01em;
  margin:0 0 .6em;
}
.prose h2{
  font-family:var(--display); font-weight:700;
  font-size:20px; line-height:1.2; color:var(--blue-deep);
  letter-spacing:.01em; margin:1.8em 0 .5em;
}
.prose h3{
  font-family:var(--display); font-weight:700;
  font-size:16px; color:var(--ink-2);
  margin:1.4em 0 .4em;
}
.prose p{
  font-family:var(--body); font-size:17px; line-height:1.7;
  color:var(--ink-2); margin:0 0 1em;
}
.prose ul,.prose ol{ margin:0 0 1.2em; padding-left:1.3em; }
.prose li{
  font-family:var(--body); font-size:17px; line-height:1.65;
  color:var(--ink-2); margin-bottom:.45em;
}
.prose strong{ color:var(--ink); font-weight:700; }
.prose em{ color:var(--blue); font-style:italic; }
.prose code{
  font-family:var(--mono); font-size:.86em;
  background:var(--paper-2); padding:.1em .4em;
  border:1px solid var(--rule); border-radius:3px;
}
.prose a{ color:var(--blue); border-bottom:1px solid var(--steel); }
.prose a:hover{ border-bottom-color:var(--blue); }
.prose hr{ border:0; border-top:1px solid var(--rule); margin:2em 0; }
/* Overflow safety (T-136): long code lines and wide tables must scroll WITHIN the
   reading column instead of widening the whole page on small screens. `pre` is a
   block-code container (inline `.prose code` keeps its own style above); the table
   uses the display:block + width:max-content trick so it scrolls with no HTML change. */
.prose pre{
  font-family:var(--mono); font-size:.84em; line-height:1.5;
  background:var(--paper-2); color:var(--ink);
  border:1px solid var(--rule); border-radius:3px;
  padding:14px 16px; margin:1.4em 0;
  overflow-x:auto; max-width:100%;
}
.prose pre code{ background:none; border:0; padding:0; border-radius:0; font-size:1em; }
.prose table{
  display:block; width:max-content; max-width:100%; overflow-x:auto;
  border-collapse:collapse; margin:1.4em 0;
  font-family:var(--body); font-size:15px;
}
.prose th,.prose td{ border:1px solid var(--rule); padding:8px 12px; text-align:left; vertical-align:top; }
.prose thead th{ background:var(--paper-2); font-family:var(--display); font-weight:700; }

/* ── read-along (karaoke) ── */
/* The player bar is a DIRECT child of the tall .lesson-main so position:sticky
   keeps it pinned (just below the sticky masthead) for the WHOLE notes scroll —
   a sticky element can't escape its containing block, so it must be parented by
   the full-height column, not a short section. */
.lesson-audio-label{ margin-top:8px; margin-bottom:12px; }
.lesson-main > .lesson-player{
  position:sticky; top:var(--masthead-h); z-index:30;
  max-width:none; margin:0 0 8px;
  padding:12px 0 14px;
  background:color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--rule);
}
.lesson-main > .lesson-player audio{ width:100%; max-width:var(--reading); display:block; }
/* T-138: on phones the masthead is un-stuck (scrolls away), so the player pins to
   the very top. This override MUST follow the base rule above — equal specificity,
   source order decides, and the masthead-section @media block is earlier in the file. */
@media (max-width:600px){
  .lesson-main > .lesson-player{ top:0; padding:14px 0 16px; }
  /* T-139: enlarge the native read-along audio control for touch (field feedback:
     "player too small to operate"). Raising element `height` is a no-op (Chromium centres
     fixed-size buttons in a taller bar), so `transform:scale(1.15)` is the lever that actually
     enlarges the play/scrubber tap targets. scale() grows the *rendered* box, not the layout
     box, by width*0.075 per side — proportional to viewport, so a plain scale overflows the
     24px gutter once vw>368px. Pre-shrinking the layout width by the scale factor makes the
     scaled result fill exactly the content column (minus 4px) at ANY width — overflow-proof. */
  .lesson-main > .lesson-player audio{ width:calc((100% - 4px) / 1.15); transform:scale(1.15); transform-origin:center center; }
  /* T-139: larger body study-notes text on phones (field feedback: "text too small").
     Placed AFTER the .prose base rules (line ~376) so equal-specificity source order
     lets these win. Headings bumped in step so the type hierarchy holds above 19px. */
  .prose p{ font-size:19px; line-height:1.6; }
  .prose li{ font-size:19px; line-height:1.6; }
  .prose h2{ font-size:22px; }
  .prose h3{ font-size:18px; }
}
.lesson-main > .player-note{ margin:0 0 8px; }
/* Each notes sentence / heading is a read-along target. Highlight is a soft wash
   of the theme accent (color-mix → adapts to the Collective terracotta for free);
   box-shadow extends the wash without reflowing text. Click a line to seek there. */
.prose .ra-sent{
  cursor:pointer;
  border-radius:4px;
  transition:background-color .3s ease, box-shadow .3s ease, color .3s ease;
}
.prose .ra-sent.is-reading{
  background:color-mix(in oklab, var(--blue) 16%, transparent);
  box-shadow:0 0 0 .18em color-mix(in oklab, var(--blue) 16%, transparent);
  color:var(--ink);
}
.prose .ra-head{ cursor:pointer; scroll-margin-top:30vh; }
/* A spoken section heading wears a small accent tick so its callout reads as a
   header, matching the audio. */
.prose .ra-head::before{
  content:"\25B8"; color:var(--steel);
  margin-right:.5em; font-size:.8em; vertical-align:.06em;
}
.prose .ra-head.is-reading{ color:var(--blue); }
.prose .ra-head.is-reading::before{ color:var(--blue); }

/* Honour reduced-motion: no smooth auto-scroll, no highlight transition. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .prose .ra-sent{ transition:none; }
}

/* ── flashcard deck ── */
.deck{ max-width:var(--reading); }
.deck-stage{ position:relative; perspective:1600px; }
.flashcard{
  position:relative; width:100%; min-height:220px;
  cursor:pointer; user-select:none;
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.flashcard.is-flipped{ transform:rotateY(180deg); }
.flashcard-face{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:40px; border:1px solid var(--rule);
  background:var(--paper-2);
}
.flashcard-face .face-label{
  font-family:var(--display); font-weight:700;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  margin-bottom:16px;
}
.flashcard-front .face-label{ color:var(--blue); }
.flashcard-back{
  transform:rotateY(180deg);
  background:var(--ink); border-color:var(--ink);
}
.flashcard-back .face-label{ color:var(--bright); }
.flashcard-face .face-text{
  font-family:var(--italic); font-style:italic;
  font-size:clamp(18px,2vw,24px); line-height:1.4;
  color:var(--ink);
}
.flashcard-back .face-text{ color:var(--paper); font-style:normal; font-family:var(--body); }
.flashcard-hint{
  margin-top:auto; padding-top:18px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--ink-mute);
}
.flashcard-back .flashcard-hint{ color:rgba(255,255,255,.55); }

.deck-controls{
  display:flex; align-items:center; gap:20px; margin-top:24px;
}
.deck-btn{
  font-family:var(--display); font-weight:700;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper); background:var(--blue);
  border:1px solid var(--blue); padding:12px 20px;
  cursor:pointer; transition:background .15s;
}
.deck-btn:hover{ background:var(--blue-deep); border-color:var(--blue-deep); }
.deck-btn:disabled{ background:var(--pale); border-color:var(--pale); color:var(--paper); cursor:default; }
.deck-progress{
  font-family:var(--mono); font-size:12px; color:var(--ink-mute);
  letter-spacing:.06em;
}
.deck-progress em{ color:var(--blue); font-style:normal; font-weight:700; }
.deck-anki{
  margin-left:auto;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:var(--ink-2); border-bottom:1px solid var(--steel); padding-bottom:2px;
}
.deck-anki:hover{ color:var(--blue); border-bottom-color:var(--blue); }

/* ── MCQ knowledge-check ──
   Built entirely on the design tokens so it flips with the theme; the only
   bespoke colours are the correct/incorrect semantics (--ok / --bad), defined
   here and re-tuned for the dark Collective theme near the bottom of the file. */
.quiz{
  max-width:var(--reading);
  --ok:#1C7A4E; --bad:#B23A3A;
}
.quiz-progress{
  font-family:var(--mono); font-size:12px; color:var(--ink-mute);
  letter-spacing:.06em; margin-bottom:14px;
}
.quiz-progress em{ color:var(--blue); font-style:normal; font-weight:700; }
.quiz-stem{
  font-family:var(--display); font-weight:700; font-size:20px;
  line-height:1.35; color:var(--ink); margin-bottom:20px; letter-spacing:-.01em;
}
.quiz-options{ display:flex; flex-direction:column; gap:10px; }
.quiz-option{
  display:block; width:100%; text-align:left;
  font-family:var(--body); font-size:15px; line-height:1.4; color:var(--ink-2);
  background:var(--paper-2); border:1px solid var(--rule);
  padding:13px 16px; cursor:pointer; transition:background .12s, border-color .12s;
}
.quiz-option:hover:not(:disabled){
  background:color-mix(in oklab, var(--blue) 8%, var(--paper-2));
  border-color:var(--blue);
}
.quiz-option:disabled{ cursor:default; }
.quiz-option.is-correct{
  background:color-mix(in oklab, var(--ok) 16%, var(--paper));
  border-color:var(--ok); color:var(--ink);
}
.quiz-option.is-incorrect{
  background:color-mix(in oklab, var(--bad) 14%, var(--paper));
  border-color:var(--bad); color:var(--ink);
}
.quiz-feedback{
  font-family:var(--body); font-size:14px; line-height:1.5;
  color:var(--ink-2); margin-top:16px; min-height:1.5em;
}
.quiz-feedback.is-correct{ color:var(--ok); }
.quiz-feedback.is-incorrect{ color:var(--ink-2); }
.quiz-controls{
  display:flex; align-items:center; gap:20px; margin-top:24px;
}
.quiz-btn{
  font-family:var(--display); font-weight:700;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper); background:var(--blue);
  border:1px solid var(--blue); padding:12px 20px;
  cursor:pointer; transition:background .15s;
}
.quiz-btn:hover:not(:disabled){ background:var(--blue-deep); border-color:var(--blue-deep); }
.quiz-btn:disabled{ background:var(--pale); border-color:var(--pale); color:var(--paper); cursor:default; }
.quiz-score{
  font-family:var(--mono); font-size:12px; color:var(--ink-mute);
  letter-spacing:.06em; margin-left:auto;
}
.quiz-score em{ color:var(--blue); font-style:normal; font-weight:700; }

/* ── audio player ── */
.player{ max-width:var(--reading); }
.player audio{ width:100%; }
.player-note{
  font-family:var(--mono); font-size:12px; color:var(--ink-mute);
  letter-spacing:.04em; margin-top:14px;
}
.player-missing{
  font-family:var(--body); font-style:italic; color:var(--ink-mute);
}

/* ============================================================
   FOOTER
   ============================================================ */
.hub-foot{ border-top:1px solid var(--rule); }
.hub-foot-inner{
  max-width:var(--max); margin:0 auto;
  padding:56px var(--gutter) 36px;
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px;
}
.hub-foot-cell h6{
  font-family:var(--display); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-mute);
  margin:0 0 14px; font-weight:700;
}
.hub-foot-cell ul{ list-style:none; margin:0; padding:0; }
.hub-foot-cell ul li{ margin-bottom:8px; color:var(--ink-2); font-size:13px; }
.hub-foot-cell ul li a:hover{ color:var(--blue); }
.hub-foot-wm p{
  font-family:var(--italic); font-style:italic;
  font-size:16px; line-height:1.45; color:var(--ink-2); max-width:380px;
}
.hub-foot-mark{
  font-family:var(--display); font-weight:700;
  font-size:18px; color:var(--ink); margin-bottom:10px; display:block;
}
.hub-foot-mark .hub-amp{
  font-family:var(--italic); font-style:italic; font-weight:400;
  color:var(--blue); padding:0 .08em;
}
.hub-foot-band{
  position:relative;
  background:var(--blue); color:var(--paper);
  padding:18px var(--gutter);
  font-family:var(--display); font-weight:700;
  text-transform:uppercase; letter-spacing:.22em;
  font-size:12px; text-align:center;
}
/* Credit pinned to the right corner of the band. Uses var(--paper) — the same
   token the slogan uses — so it stays readable on the band's var(--blue)
   background in BOTH themes (light-on-blue G&Co, dark-on-terracotta Collective),
   including across a live theme switch. */
.hub-foot-credit{
  position:absolute; right:var(--gutter); top:50%; transform:translateY(-50%);
  text-transform:none; letter-spacing:.02em; font-weight:400;
  font-size:12px; color:var(--paper);
}
.hub-foot-credit a{ color:var(--paper); font-weight:600; text-decoration:underline; }
.hub-foot-credit a:hover{ opacity:.78; }
@media (max-width:760px){
  .hub-foot-credit{
    position:static; transform:none; display:block;
    margin-top:12px; text-align:center;
  }
}
@media (max-width:760px){
  .hub-foot-inner{ grid-template-columns:1fr 1fr; }
  .hub-foot-wm{ grid-column:1/-1; }
}

/* ============================================================
   THEME: claude-collective  (data-theme="collective")
   Dark IBM Plex Mono surface. Same layout/components — only the
   token VALUES change, so the whole site reskins from here.
   Source of truth: CC-designs/colors_and_type.css.
   ============================================================ */
html[data-theme="collective"]{
  /* base */
  --ink:#E6E8EB;                       /* primary text (was dark) */
  --ink-2:rgba(230,232,235,.72);       /* secondary text */
  --ink-mute:rgba(230,232,235,.42);    /* muted text */
  --paper:#0E1116;                     /* canvas */
  --paper-2:#161A20;                   /* card / panel surface */
  --paper-3:#1E242D;                   /* lifted surface */
  /* accent: terracotta replaces the Geelen blue everywhere */
  --blue:#D97757;
  --blue-deep:#C25E3F;
  --steel:rgba(217,119,87,.70);
  --pale:rgba(230,232,235,.22);
  --bright:#E89B7F;
  --rule:rgba(230,232,235,.12);        /* hairline borders */
  /* type: mono everywhere — flips all display/serif/italic text at once */
  --display:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --italic:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --body:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}

/* The Geelen system leans on serif italics for emphasis; IBM Plex Mono has no
   loaded italic, so synthesized slant looks wrong. Render those upright in
   collective (the mono voice carries the emphasis instead). */
html[data-theme="collective"] .hub-hero-mark em,
html[data-theme="collective"] .hub-thesis,
html[data-theme="collective"] .hub-title,
html[data-theme="collective"] .hub-card-name,
html[data-theme="collective"] .lesson-title,
html[data-theme="collective"] .flashcard-face .face-text,
html[data-theme="collective"] .hub-foot-wm p,
html[data-theme="collective"] .prose em{
  font-style:normal;
}

/* Tighten radii to the Collective's sharp-corner language. */
html[data-theme="collective"] .prose code,
html[data-theme="collective"] .deck-btn{ border-radius:2px; }

/* Flashcard back: token flip would make it a light box on a dark page; keep it a
   dark panel with a terracotta label instead (legible answer face). */
html[data-theme="collective"] .flashcard-back{
  background:var(--paper-3); border-color:var(--blue);
}
html[data-theme="collective"] .flashcard-back .face-text{ color:var(--ink); }
html[data-theme="collective"] .flashcard-back .face-label{ color:var(--blue); }
html[data-theme="collective"] .flashcard-back .flashcard-hint{ color:var(--ink-mute); }

/* Deck button + foot-band invert to terracotta with dark text — keep text dark
   so it reads on the accent fill. */
html[data-theme="collective"] .deck-btn,
html[data-theme="collective"] .quiz-btn,
html[data-theme="collective"] .hub-foot-band{ color:var(--paper); }

/* Quiz on dark: sharpen the option radius and brighten the correct/incorrect
   semantics so they stay legible against the dark paper. */
html[data-theme="collective"] .quiz-option,
html[data-theme="collective"] .quiz-btn{ border-radius:2px; }
html[data-theme="collective"] .quiz{ --ok:#46C98A; --bad:#FF8C7A; }
html[data-theme="collective"] .quiz-option.is-correct,
html[data-theme="collective"] .quiz-option.is-incorrect{ color:var(--ink); }

/* The terracotta `//` wordmark accent — give the hero eyebrow + masthead a hint
   of the brand's slash motif via the existing accent token (already remapped). */
html[data-theme="collective"] ::selection{ background:var(--blue); color:var(--paper); }

/* ── T-140: client-side password gate (casual whole-site lock) ──────────────
   A speed-bump, not real security — content is still in the DOM. The `pw-locked`
   class is added to <html> by course.js (synchronously, to beat first paint) and
   removed on unlock. Uses theme tokens so the card matches light/dark for free. */
html.pw-locked, html.pw-locked body{ overflow:hidden; }
html.pw-locked body > *:not(.pw-gate){ filter:blur(10px); pointer-events:none; user-select:none; }
.pw-gate{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:color-mix(in oklab, var(--paper, #FBFAF7) 76%, transparent);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.pw-gate-card{
  width:min(360px, 92vw);
  background:var(--paper, #fff); border:1px solid var(--rule, #e3e0d8);
  border-radius:10px; padding:26px 24px 22px;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
  font-family:var(--body, system-ui, sans-serif); text-align:left;
}
.pw-gate-title{ font-family:var(--display, inherit); font-weight:700; font-size:18px; margin:0 0 6px; color:var(--ink, #1a1a1a); }
.pw-gate-sub{ font-size:13px; line-height:1.5; color:var(--ink-2, #555); margin:0 0 16px; }
.pw-gate-form{ display:flex; gap:8px; }
.pw-gate-input{
  flex:1; min-width:0; font-size:16px; /* 16px avoids iOS focus-zoom */
  padding:10px 12px; border:1px solid var(--rule, #ccc); border-radius:6px;
  background:var(--paper-2, #faf9f5); color:var(--ink, #111); font-family:inherit;
}
.pw-gate-input:focus{ outline:2px solid var(--blue, #2a5db0); outline-offset:1px; }
.pw-gate-btn{
  font-size:14px; font-weight:700; padding:10px 16px; border:0; border-radius:6px;
  cursor:pointer; background:var(--blue, #2a5db0); color:var(--paper, #fff); font-family:inherit;
}
.pw-gate-btn:active{ transform:translateY(1px); }
.pw-gate-err{ min-height:15px; font-size:12.5px; color:#c0392b; margin:10px 2px 0; }
@media (max-width:600px){ .pw-gate-card{ padding:22px 18px 18px; } }

/* ── T-142: phone readability for the interactive learning components ──────────
   The quiz + flashcard component base rules (~L508-611) come AFTER the lesson
   @media block (~L434), so their mobile size bump needs its own block here, at
   end-of-file, to win on source order. Tap boxes were already fine (40-54px);
   this only enlarges the small TEXT (options 15, buttons/hints 11) to match the
   16-19px readability standard set for lessons (T-139) and catalog (T-142). */
@media (max-width:600px){
  .quiz-option{ font-size:16px; }
  .quiz-feedback{ font-size:15px; }
  .quiz-btn{ font-size:13px; }
  .deck-btn{ font-size:13px; }
  .flashcard-hint{ font-size:12px; }
}