@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;600;700&display=swap');

/* The hidden attribute must win over any display rule below (e.g. the audio button). */
[hidden] { display: none !important; }

:root {
  --char: #343a40;
  --char-2: #23272b;
  --ink: #1f2328;
  --muted: #5b636d;
  --rule: #dfe2e6;
  --bg: #f4f5f7;
  --card: #fff;
  --alert: #cc6d00;
  --green: #c8d6bb;
  --green-ink: #4d6b34;
  --purple: #dfcde2;
  --purple-ink: #6a4a86;
  --btn: #6a4a86;
  --btn-hover: #553a6d;
  --ok: #2f6b2a;
  --err: #b3261e;
  --content-max: 1360px;
  --crumb-bg: #65696f;
  /* Display face for lesson/level numbers and tile lettering. The old site's kit
     (lithos-pro) now loads live from Typekit on staging/localhost; Archivo Black
     is the fallback while that request is in flight or unavailable. The old
     site's VLGR text is Title Case, not uppercase - the all-caps look there
     comes from Lithos itself being a near-unicase glyphic font, which Archivo
     Black can't fully reproduce, so text case is left alone. */
  --font-display: 'lithos-pro', 'Archivo Black', Arial, sans-serif;
  /* Nav/breadcrumb/sidebar face, standing in for the old site's myriad-pro-condensed
     Typekit face, with a condensed Google font as fallback. */
  --font-nav: 'myriad-pro-condensed', 'Roboto Condensed', 'PT Sans Narrow', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--purple-ink); }
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; }
button { font-family: inherit; }

/* Header / footer. Genuinely full-bleed: the outer element has no max-width AND no
   centered wrap, just a flush 16px inset on each side (matching the old theme's
   default Bootstrap gutter at 1280, not a wide centered container). */
header.bar { background: var(--char); }
header.bar .bar-inner { display: flex; align-items: center; gap: 28px; min-height: 72px; padding: 0 16px; }
header.bar a.brand { display: block; flex-shrink: 0; }
header.bar img { width: 190px; }

/* Top nav: Level dropdown + Support sit left next to the logo, Order is pinned to the far
   right, matching the old site's layout. */
.topnav { display: flex; align-items: center; gap: 22px; flex: 1; font-family: var(--font-nav); }
.topnav .nav-link { color: #c9ced4; text-decoration: none; font-weight: 600; font-size: 20px; }
.topnav .nav-link:hover { color: #fff; }

.nav-dropdown { position: relative; }
.nav-dropdown-toggle { background: none; border: 0; color: #c9ced4; font: inherit; font-weight: 600; font-size: 20px; cursor: pointer; padding: 8px 2px; display: flex; align-items: center; gap: 4px; }
.nav-dropdown-toggle .caret { width: 13px; height: 13px; flex-shrink: 0; }
.nav-dropdown-toggle:hover, .nav-dropdown.open .nav-dropdown-toggle { color: #fff; }
.nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; border-radius: 8px; box-shadow: 0 14px 34px rgba(0,0,0,.2); padding: 8px; min-width: 230px; z-index: 40; font-family: var(--font-nav); }
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 8px 8px 4px; }
.nav-dropdown-menu h3 a { color: inherit; text-decoration: none; }
.nav-dropdown-menu a.level-item { display: block; padding: 7px 8px; border-radius: 4px; color: var(--ink); text-decoration: none; font-size: 16px; }
.nav-dropdown-menu a.level-item:hover { background: var(--bg); }
.nav-dropdown-menu hr { border: 0; border-top: 1px solid var(--rule); margin: 6px 4px; }

.nav-order { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid #6c757d; border-radius: 6px; color: #e9ecef; text-decoration: none; font-size: 18px; font-weight: 600; white-space: nowrap; font-family: var(--font-nav); }
.nav-order:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-order svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-order em { font-style: italic; }

.nav-toggle { display: none; margin-left: auto; background: none; border: 0; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 6px 8px; }

footer { background: var(--char-2); color: #aeb4bb; font-size: 14px; }
footer .footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding: 24px 16px; }
footer a { color: #fff; }

/* Breadcrumbs: full-width gray band under the header, matching the old site's distinct
   breadcrumb strip (its own color, not the page background). */
.breadcrumbs { background: var(--crumb-bg); font-size: 16px; color: #e4e6e9; padding: 14px 0; font-family: var(--font-nav); }
.breadcrumbs .crumb-inner { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 0 16px; }
.breadcrumbs a { color: #fff; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs .sep { color: rgba(255,255,255,.45); margin: 0 2px; }
.breadcrumbs .current { color: #fff; font-weight: 600; }

/* Layout: sidebar + main, genuinely full-bleed (no outer max-width, no wrap class). The
   sidebar is a plain flush column (item 2, round 2): no card, no border, no radius, no
   margin, running the full height of the row on its own light background. The content
   column starts exactly at the sidebar's right edge, with no gutter. */
.layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0; align-items: stretch; }
main.content { min-width: 0; padding: 20px 0 64px 0; }
main.content .content-head:first-child { padding-top: 0; }
/* Home opens straight into the book bands, flush under the breadcrumb like the level tiles. */
main.content:has(> .home-bands:first-child) { padding-top: 0; }

/* Tile grids (level-grid, mode-tile-grid, series-grid, home-bands) get no horizontal inset
   at all, so they run flush from the sidebar's right edge to the true right edge of the
   viewport. The slim content-head row and the word list share one left/right inset instead
   (item 4, round 2: heading, tiles and word list all line up on one left edge, no separate
   900px offset box). Home page copy/signup keep their own reading-width cap, unchanged. */
.content-head,
main.content .word-list {
  padding-left: 20px;
  padding-right: 20px;
}
main.content h1.page-title,
main.content p.page-lead {
  max-width: 900px;
  margin-left: 24px;
  margin-right: 24px;
}

.layout > div:first-child { background: #f8f9fa; padding: 0; }

nav.sidebar { background: transparent; border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 16px 12px; align-self: start; font-family: var(--font-nav); }
nav.sidebar details { border-bottom: 1px solid var(--rule); }
nav.sidebar details:last-child { border-bottom: none; }
nav.sidebar summary { cursor: pointer; padding: 8px; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; border-radius: 4px; font-size: 18px; color: #6c757d; }
nav.sidebar summary::-webkit-details-marker { display: none; }
nav.sidebar summary::after { content: '▸'; color: #6c757d; font-size: 12px; transition: transform .15s; }
nav.sidebar details[open] > summary::after { transform: rotate(90deg); }
nav.sidebar summary:hover { background: rgba(0,0,0,.04); }
nav.sidebar .level-block { padding-left: 10px; }
/* Levels are their own <details>/<summary> nested inside the series one, so they get the same
   caret/hover treatment as the series summary above; this override just drops the border and
   bold weight the outer rule sets so a level reads a step lighter than its series. */
nav.sidebar .level-details { border-bottom: none; }
nav.sidebar .level-details > summary { font-weight: 400; padding: 6px 8px; }
nav.sidebar .level-details > summary.current { background: var(--purple); color: var(--purple-ink); font-weight: 700; }
nav.sidebar .lesson-list { padding-left: 14px; }
nav.sidebar .lesson-link { display: block; padding: 4px 8px; border-radius: 4px; text-decoration: none; color: #6c757d; font-size: 16px; }
nav.sidebar a:hover { background: rgba(0,0,0,.04); color: var(--purple-ink); }
nav.sidebar a.current { background: var(--purple); color: var(--purple-ink); font-weight: 700; }
nav.sidebar .home-link { display: block; padding: 8px; font-weight: 700; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--rule); margin-bottom: 6px; font-size: 18px; }

.sidebar-toggle { display: none; }

/* Sidebar intro card: the same Prestwick House photo on every page (fixing the old site's
   broken "Card image cap" on level pages), with page-specific text underneath - Getting
   Started copy on home/series pages, the current level's own info everywhere else. */
.intro-card { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; margin-top: 16px; }
.intro-card img { display: block; width: 100%; }
.intro-card .ic-body { padding: 16px; }
.intro-card .intro-title { font: 700 18px/1.2 Georgia, "Times New Roman", serif; margin: 0 0 2px; }
.intro-card .intro-subtitle { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 10px; }
.intro-card .intro-copy { font-size: 14px; color: var(--ink); margin: 0; }

/* Home page: stacked full-width series bands, matching the old site's two book-band
   buttons. These run truly edge to edge (no radius, no gap between them, no outer inset)
   since they're the single most recognizable piece of the old site's framework. Sized to
   land close to the old site's measured ~400px band height at 1280 (logo ~500px wide,
   book row ~170px tall, a small bordered button, same padding/gaps as before). */
.home-bands { display: grid; gap: 0; margin-bottom: 0; }
.home-band { display: flex; flex-direction: column; align-items: center; gap: 16px; text-decoration: none; color: inherit; padding: 36px 24px; border-radius: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transition: opacity .15s ease-in-out; }
.home-band:hover { opacity: .75; }
.home-band.gyv { background-color: var(--green); background-image: url('/img/green.jpg'); }
.home-band.vlgr { background-color: var(--purple); background-image: url('/img/purple.jpg'); }
.home-band .band-logo { width: clamp(280px, 42vw, 520px); }
.home-band .band-book { height: clamp(90px, 15vw, 170px); width: auto; max-width: 92%; }
.home-band .band-btn { display: inline-block; padding: 10px 22px; border: 1px solid #fff; border-radius: 4px; color: #fff; font: 600 18px/1 var(--font-nav); }
.home-band:hover .band-btn { background: rgba(255,255,255,.15); }

/* Home intro section: eyebrow + headline + paragraph + inline signup, styled after
   placeholder.html's type treatment (same fonts, eyebrow style, sizes, colors), compact and
   left-aligned with the content column's own 20px inset. placeholder.html itself is untouched. */
.home-intro { max-width: 720px; padding: 32px 20px 56px; }
.home-intro .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--alert); margin: 0 0 12px; }
.home-intro h1 { font: 700 clamp(28px, 3.4vw, 40px)/1.15 Georgia, "Times New Roman", serif; margin: 0 0 18px; letter-spacing: -.01em; }
.home-intro > p { margin: 0 0 30px; }

.home-signup h2 { font: 700 20px/1.25 Georgia, "Times New Roman", serif; margin: 0 0 8px; }
.home-signup p.lead { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.home-signup .signup-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.home-signup .field { display: flex; flex-direction: column; gap: 6px; }
.home-signup .field.grow { flex: 1 1 220px; min-width: 220px; }
.home-signup label { font-size: 14px; font-weight: 600; }
.home-signup input[type=email], .home-signup select { font: 16px inherit; padding: 12px 13px; border: 1px solid #b8bec6; border-radius: 4px; background: #fff; color: var(--ink); }
.home-signup select { min-width: 140px; }
.home-signup button { font: 700 16px/1 inherit; padding: 14px 24px; border: 0; border-radius: 4px; background: var(--btn); color: #fff; cursor: pointer; white-space: nowrap; }
.home-signup button:hover { background: var(--btn-hover); }
.home-signup button:disabled { opacity: .6; cursor: default; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
#signup-msg { font-size: 14px; margin: 12px 0 0; min-height: 1.4em; }
#signup-msg.ok { color: var(--ok); font-weight: 600; }
#signup-msg.err { color: var(--err); }

/* Series page: one tinted photo tile per level, with a circular level badge
   on top (yellow badge + colored border per level for GYV, plain dark gray
   for VLGR), matching the old site's per-level book tiles. Zero gap/radius so
   they abut each other and the true viewport edges, like the rest of the tiles. */
.series-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: 0; }
.series-tile { display: flex; align-items: center; justify-content: center; min-height: 300px; border-radius: 0; background-size: cover; background-position: center; background-blend-mode: multiply; text-decoration: none; transition: opacity .15s ease-in-out; }
.series-tile:hover { opacity: .75; }
.level-badge { width: 150px; height: 150px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.level-badge .badge-level { font: 700 15px/1 var(--font-display); }
.level-badge .badge-number { font: 900 34px/1 var(--font-display); }
.series-tile.gyv .level-badge { background: #fec70b; color: #000; }
.series-tile.vlgr .level-badge { background: #4e4d50; color: #fff; }
@media (min-width: 641px) {
  .series-grid { grid-template-columns: repeat(3, 1fr); }
  .series-tile { min-height: clamp(220px, 29vw, 300px); }
}

/* Slim content-head row (level + lesson pages, round 2 item 4): the heading text and,
   on the level page, the whole-level mode pills, on one compact line right under the
   breadcrumb, sharing the same left edge as the tiles and word list below it. */
.content-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; padding-top: 16px; padding-bottom: 16px; }
.content-head .head-title { font: 700 clamp(20px, 2.4vw, 26px)/1.25 Georgia, "Times New Roman", serif; margin: 0; }
.content-head .head-meta { color: var(--muted); font-size: 15px; }
.content-head .head-meta::before { content: '\00b7'; margin-right: 8px; color: var(--muted); }

/* Level page: big colored lesson tiles in the series' palette, one per real lesson (no
   placeholder for a lesson that doesn't exist). Zero gap/radius, 2 columns by default
   (phones included, so they don't scroll forever), 3 at >=992px, old-style aspect ratio. */
.level-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: 0; }
@media (min-width: 992px) {
  .level-grid { grid-template-columns: repeat(3, 1fr); }
}
.level-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 1.08 / 1; border-radius: 0; text-decoration: none; color: #fff; transition: opacity .15s ease-in-out; }
.level-tile:hover { opacity: .75; }
/* Old site set both lines at weight 900, sized to fill the tile; clamp keeps that ratio
   from phones (2 columns) up to wide screens. */
.level-tile .tile-label { font: 900 clamp(22px, 3.4vw, 46px)/1 var(--font-display); }
.level-tile .tile-number { font: 900 clamp(48px, 7.5vw, 104px)/1 var(--font-display); }

/* Whole-level mode pills (level page): small inline pills in the content-head row, colored
   the same way as the lesson tiles (learn/flashcards/match/spell cycle through the level's
   palette). The old site never had a level-wide practice option, so there's no old page to
   match here. */
.mode-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.mode-pills a { display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 700; font-size: 13px; transition: opacity .15s ease-in-out; }
.mode-pills a:hover { opacity: .75; }

/* Mode tiles (lesson page): the old site rendered Learn/Flashcards/Match/Spell as four big
   colored tiles, same visual weight as the lesson-tile grid, full bleed with zero gap/radius.
   All four sit on one row from 768px up (no orphan tile on its own row); 2x2 below that. */
.mode-tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; }
@media (min-width: 768px) {
  .mode-tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.mode-tile { display: flex; align-items: center; justify-content: center; min-height: 230px; border-radius: 0; text-decoration: none; color: #fff; text-align: center; padding: 12px; transition: opacity .15s ease-in-out; }
.mode-tile:hover { opacity: .75; }
/* Sized to the tile, not the viewport, so "Flashcards" (the longest label) always fits
   its column: about 12% of the tile width, capped at the old site's 42px. */
.mode-tile { container-type: inline-size; }
.mode-tile .tile-label { font: 900 clamp(18px, 12cqi, 42px)/1.15 var(--font-display); }

/* Word list (lesson page): fills the content column at the same left/right inset as the
   content-head row above it, not a separately-margined reading-width box. Two columns at
   wide widths. */
.word-list { list-style: none; margin: 0; padding-top: 20px; padding-bottom: 20px; display: grid; gap: 10px; }
@media (min-width: 768px) {
  .word-list { grid-template-columns: repeat(2, 1fr); }
}
.word-list li { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 14px 16px; }
.word-list .w { font-weight: 700; font-size: 16px; }
.word-list .d { color: var(--muted); margin-top: 4px; white-space: pre-line; }

h1.page-title { font: 700 clamp(24px, 3vw, 34px)/1.2 Georgia, "Times New Roman", serif; margin: 8px 0 4px; }
p.page-lead { color: var(--muted); margin: 0 0 8px; }

/* Practice shell (flashcards/learn/match/spell): a clean modern study-app look, scoped to
   this shell only so the rest of the site keeps its old-site look. Own palette and font. */
.practice-shell {
  --quiz-bg: #f6f7fb;
  --quiz-card: #fff;
  --quiz-text: #2e3856;
  --quiz-accent: #4255ff;
  --quiz-accent-hover: #2f42e0;
  --quiz-correct: #18ae79;
  --quiz-correct-bg: #e6f7f0;
  --quiz-incorrect: #ff725b;
  --quiz-incorrect-bg: #ffe8e4;
  --quiz-border: #d9dde8;
  --quiz-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  max-width: 780px; margin: 0 auto; padding: 20px 0 60px;
  background: var(--quiz-bg); color: var(--quiz-text); font-family: var(--quiz-font);
  border-radius: 10px;
}
.practice-shell.mode-match { max-width: 1080px; }
.practice-shell button { font-family: inherit; }
.practice-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 20px 20px 0; flex-wrap: wrap; }
.practice-header h1 { font-size: 22px; font-weight: 800; margin: 0; }
.practice-progress { font-size: 14px; color: #6b7290; }
.progress-bar { height: 6px; background: var(--quiz-border); border-radius: 4px; overflow: hidden; margin: 8px 20px 20px; }
.progress-bar > div { height: 100%; background: var(--quiz-accent); width: 0%; transition: width .2s; }
.back-link { display: inline-block; margin: 0 0 12px 20px; font-size: 14px; text-decoration: none; color: var(--quiz-accent); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.practice-shell button:focus-visible,
.practice-shell a:focus-visible,
.practice-shell input:focus-visible {
  outline: 3px solid var(--quiz-accent); outline-offset: 2px;
}

/* Shared components: buttons, round icon buttons, end-of-round results panel */
.quiz-btn { padding: 12px 22px; border-radius: 8px; border: 1px solid var(--quiz-border); background: #fff; color: var(--quiz-text); cursor: pointer; font-weight: 700; font-size: 15px; font-family: var(--quiz-font); }
.quiz-btn:hover { background: var(--quiz-bg); }
.quiz-btn.primary { background: var(--quiz-accent); color: #fff; border-color: var(--quiz-accent); }
.quiz-btn.primary:hover { background: var(--quiz-accent-hover); }
.quiz-btn:disabled { opacity: .5; cursor: default; }

.quiz-icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--quiz-border); background: #fff; color: var(--quiz-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.quiz-icon-btn svg { width: 20px; height: 20px; }
.quiz-icon-btn:hover:not(:disabled) { background: var(--quiz-bg); border-color: var(--quiz-accent); color: var(--quiz-accent); }
.quiz-icon-btn:disabled { opacity: .35; cursor: default; }

.results-panel { text-align: center; padding: 50px 24px; }
.results-icon { width: 56px; height: 56px; margin: 0 auto 14px; color: var(--quiz-accent); }
.results-icon svg { width: 100%; height: 100%; }
.results-score { font-size: 22px; font-weight: 800; margin-bottom: 22px; }

/* Flashcards */
.fc-stage { padding: 8px 20px 20px; }
.fc-card-wrap { position: relative; margin-bottom: 18px; }
.fc-card { display: block; width: 100%; aspect-ratio: 16 / 9; perspective: 1400px; cursor: pointer; background: none; border: 0; padding: 0; }
.fc-card-inner { position: relative; width: 100%; height: 100%; transition: transform .5s cubic-bezier(.4,.2,.2,1); transform-style: preserve-3d; }
.fc-card.flipped .fc-card-inner { transform: rotateY(180deg); }
.fc-face { position: absolute; inset: 0; backface-visibility: hidden; background: var(--quiz-card); border-radius: 16px; display: flex; align-items: center; justify-content: center; padding: 32px; text-align: center; box-shadow: 0 10px 30px rgba(46,56,86,.12); }
.fc-face-back { transform: rotateY(180deg); }
.fc-term { font: 700 32px/1.3 var(--quiz-font); }
.fc-definition { font-size: 19px; line-height: 1.5; color: var(--quiz-text); white-space: pre-line; }
.fc-audio { position: absolute; top: 14px; right: 14px; }
.fc-hint { text-align: center; color: #8b90a8; font-size: 13px; margin: 0 0 18px; }
.fc-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 14px; }
.fc-counter { font-size: 15px; font-weight: 600; color: #6b7290; min-width: 56px; text-align: center; }
.fc-actions { display: flex; justify-content: center; gap: 12px; }

/* Learn */
.learn-segments { display: flex; gap: 4px; padding: 0 20px; margin-bottom: 18px; }
.learn-segment { flex: 1; height: 6px; border-radius: 4px; background: var(--quiz-border); }
.learn-segment.active { background: var(--quiz-accent); }
.learn-segment.correct { background: var(--quiz-correct); }
.learn-segment.incorrect { background: var(--quiz-incorrect); }
.learn-question { background: var(--quiz-card); border-radius: 14px; padding: 26px; margin: 0 20px 18px; text-align: center; position: relative; box-shadow: 0 4px 14px rgba(46,56,86,.06); }
.learn-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8b90a8; margin-bottom: 10px; }
.learn-definition-text { font-size: 20px; line-height: 1.5; white-space: pre-line; }
.learn-question .fc-audio { top: 12px; right: 12px; }
.learn-prompt { text-align: center; color: #6b7290; font-size: 14px; margin: 0 20px 14px; }
.learn-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 20px; }
.learn-option { text-align: left; padding: 16px 18px; border-radius: 10px; border: 2px solid var(--quiz-border); background: var(--quiz-card); cursor: pointer; font-size: 16px; display: flex; align-items: center; gap: 12px; font-family: var(--quiz-font); }
.learn-option .num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--quiz-bg); color: #6b7290; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.learn-option .opt-text { flex: 1; }
.learn-option .opt-mark { width: 20px; height: 20px; flex-shrink: 0; }
.learn-option:hover:not(:disabled) { border-color: var(--quiz-accent); }
.learn-option.correct { border-color: var(--quiz-correct); background: var(--quiz-correct-bg); color: var(--quiz-correct); }
.learn-option.correct .opt-mark { color: var(--quiz-correct); }
.learn-option.incorrect { border-color: var(--quiz-incorrect); background: var(--quiz-incorrect-bg); color: var(--quiz-incorrect); }
.learn-option.incorrect .opt-mark { color: var(--quiz-incorrect); }
.learn-option:disabled { cursor: default; }
.learn-continue { display: block; margin: 20px auto 0; }

/* Match */
.match-start { text-align: center; padding: 60px 24px; }
.match-start-text { color: #6b7290; margin-bottom: 22px; font-size: 16px; }
.match-start-btn { padding: 16px 40px; font-size: 17px; }
.match-status { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #6b7290; margin: 0 20px 12px; font-weight: 600; }
.match-timer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--quiz-text); }
.match-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 16px; padding: 0 20px 20px; }
.match-column { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.match-column-label { margin: 0; color: #6b7290; font: 700 13px var(--quiz-font); text-transform: uppercase; letter-spacing: .05em; }
.match-card { width: 100%; background: var(--quiz-card); border: 1px solid var(--quiz-border); border-radius: 10px; padding: 12px; text-align: left; cursor: pointer; font-size: 14px; min-height: 56px; display: flex; align-items: center; white-space: pre-line; overflow-wrap: anywhere; font-family: var(--quiz-font); transition: opacity .25s, transform .25s; }
.match-card:hover:not(:disabled) { border-color: var(--quiz-accent); }
.match-card.selected { border-color: var(--quiz-accent); box-shadow: 0 0 0 2px rgba(66,85,255,.25); }
.match-card.matched { border-color: var(--quiz-correct); background: var(--quiz-correct-bg); }
.match-card.vanish { opacity: 0; transform: scale(.85); pointer-events: none; }
.match-card.wrong { border-color: var(--quiz-incorrect); background: var(--quiz-incorrect-bg); animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* Spell */
.spell-card { background: var(--quiz-card); border-radius: 14px; padding: 30px; margin: 0 20px; text-align: center; box-shadow: 0 4px 14px rgba(46,56,86,.06); }
.spell-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8b90a8; margin-bottom: 10px; }
.spell-card .definition { font-size: 20px; line-height: 1.5; margin-bottom: 22px; white-space: pre-line; }
.spell-audio-row { display: flex; justify-content: center; gap: 10px; margin-bottom: 22px; }
.spell-input-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.spell-input { font-size: 18px; padding: 13px 16px; border: 2px solid var(--quiz-border); border-radius: 8px; width: 280px; max-width: 100%; text-align: center; font-family: var(--quiz-font); color: var(--quiz-text); }
.spell-input:focus { border-color: var(--quiz-accent); outline: none; }
.spell-input.correct { border-color: var(--quiz-correct); background: var(--quiz-correct-bg); }
.spell-input.incorrect { border-color: var(--quiz-incorrect); background: var(--quiz-incorrect-bg); }
.spell-feedback { margin-top: 20px; font-size: 16px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.spell-feedback .opt-mark { width: 18px; height: 18px; vertical-align: -3px; }
.spell-feedback.correct { color: var(--quiz-correct); font-weight: 700; }
.spell-wrong-answer { color: var(--quiz-incorrect); }
.spell-wrong-answer s { opacity: .7; }
.spell-correct-answer { color: var(--quiz-text); }
.spell-continue-row { margin-top: 20px; }

.hidden { display: none !important; }
.loading, .empty-state { text-align: center; color: var(--muted); padding: 40px 0; }

/* 404 */
.notfound { text-align: center; padding: 60px 24px; }
.notfound h1 { font: 700 clamp(28px, 4vw, 44px)/1.2 Georgia, serif; margin: 0 0 12px; }
.notfound a.home-btn { display: inline-block; margin-top: 18px; padding: 12px 22px; background: var(--btn); color: #fff; text-decoration: none; border-radius: 6px; font-weight: 700; }
.notfound a.home-btn:hover { background: var(--btn-hover); }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .layout:has(.home-bands) > div:first-child { display: none; }
  nav.sidebar { position: static; max-height: none; display: none; }
  nav.sidebar.open { display: block; }
  .sidebar-toggle { display: inline-block; margin: 16px 0 0 16px; padding: 10px 16px; border-radius: 6px; border: 1px solid var(--rule); background: #fff; cursor: pointer; font-weight: 600; }

  /* Top nav collapses behind a hamburger at the same breakpoint as the sidebar. */
  header.bar .bar-inner { position: relative; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .topnav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--char-2); flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 20px 18px; box-shadow: 0 16px 30px rgba(0,0,0,.25); z-index: 30; }
  .topnav.open { display: flex; }
  .nav-dropdown-menu { position: static; box-shadow: none; background: transparent; padding: 4px 0 4px 10px; }
  .nav-dropdown-menu h3 { color: #9aa0a8; }
  .nav-dropdown-menu a.level-item { color: #e9ecef; }
  .nav-dropdown-menu a.level-item:hover { background: rgba(255,255,255,.08); }
  .nav-dropdown-menu hr { border-top-color: rgba(255,255,255,.15); }
  .nav-order { margin: 10px 0 0; justify-content: center; }
}
@media (max-width: 900px) {
}
@media (min-width: 641px) and (max-width: 860px) {
  .home-bands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-band { justify-content: center; gap: 12px; padding: 26px 14px; }
  .home-band .band-logo { width: min(100%, 360px); }
  .home-band .band-book { width: min(100%, 360px); height: auto; }
  .home-band .band-btn { padding: 10px 12px; font-size: 16px; text-align: center; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  header.bar img { width: 150px; }
  main.content h1.page-title, main.content p.page-lead { margin-left: 16px; margin-right: 16px; }
  .content-head, main.content .word-list { padding-left: 16px; padding-right: 16px; }
  .home-band { padding: 28px 16px; }
  .home-intro { padding: 24px 16px 40px; }
  .practice-header, .fc-stage, .learn-segments, .learn-options { padding-left: 16px; padding-right: 16px; }
  .progress-bar, .learn-question, .learn-prompt, .match-status, .spell-card { margin-left: 16px; margin-right: 16px; }
  .match-grid { padding-left: 16px; padding-right: 16px; }
  .back-link { margin-left: 16px; }
  .fc-term { font-size: 26px; }
  .fc-definition { font-size: 17px; }
  .learn-options { grid-template-columns: 1fr; }
  .match-grid { gap: 10px; }
  .match-card { padding: 10px; font-size: 13px; }
}