@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');

/* 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;
  /* Display face for lesson/level numbers, standing in for the old site's paid
     Adobe fonts (Gill Sans Nova for Growing Your Vocabulary, Lithos Pro for
     Vocabulary from Latin and Greek Roots). One free family, used at weight 900
     everywhere. 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 reproduce, so text case is left alone. */
  --font-display: 'Archivo Black', Arial, 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: 1140px; margin: 0 auto; padding: 0 24px; }
button { font-family: inherit; }

/* Header / footer */
header.bar { background: var(--char); }
header.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
header.bar a.brand { display: block; }
header.bar img { width: 190px; }
header.bar .by { color: #c9ced4; font-size: 14px; text-align: right; }
header.bar .by a { color: #fff; text-decoration: none; font-weight: 600; }

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

/* Breadcrumbs */
.breadcrumbs { font-size: 14px; color: var(--muted); padding: 16px 0 0; }
.breadcrumbs .wrap { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.breadcrumbs a { color: var(--purple-ink); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs .sep { color: var(--rule); margin: 0 2px; }
.breadcrumbs .current { color: var(--ink); font-weight: 600; }

/* Layout: sidebar + main */
.layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; padding-top: 24px; padding-bottom: 64px; }
main.content { min-width: 0; }

nav.sidebar { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 12px; align-self: start; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
nav.sidebar h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 4px 8px 8px; }
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: 600; list-style: none; display: flex; align-items: center; justify-content: space-between; border-radius: 4px; }
nav.sidebar summary::-webkit-details-marker { display: none; }
nav.sidebar summary::after { content: '▸'; color: var(--muted); font-size: 12px; transition: transform .15s; }
nav.sidebar details[open] > summary::after { transform: rotate(90deg); }
nav.sidebar summary:hover { background: var(--bg); }
nav.sidebar .level-block { padding-left: 10px; }
nav.sidebar .level-link { display: block; padding: 6px 8px; border-radius: 4px; text-decoration: none; color: var(--ink); font-size: 14px; }
nav.sidebar .lesson-list { padding-left: 14px; }
nav.sidebar .lesson-link { display: block; padding: 4px 8px; border-radius: 4px; text-decoration: none; color: var(--muted); font-size: 13.5px; }
nav.sidebar a:hover { background: var(--bg); 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: 600; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--rule); margin-bottom: 6px; }

.sidebar-toggle { display: none; }

/* Level-intro card: sits under the sidebar nav, carries the old site's
   per-level title/subtitle/copy card. */
.level-intro { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 16px; margin-top: 16px; }
.level-intro .intro-title { font: 700 18px/1.2 Georgia, "Times New Roman", serif; margin: 0 0 2px; }
.level-intro .intro-subtitle { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 10px; }
.level-intro .intro-copy { font-size: 14px; color: var(--ink); margin: 0; }

/* Getting Started card (home page sidebar) */
.getting-started { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; margin-top: 16px; }
.getting-started img { display: block; width: 100%; }
.getting-started .gs-body { padding: 16px; }
.getting-started .intro-title { font: 700 18px/1.2 Georgia, "Times New Roman", serif; margin: 0 0 2px; }
.getting-started .intro-subtitle { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 10px; }
.getting-started .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 instead of a side-by-side card pair. */
.home-bands { display: grid; gap: 18px; margin-bottom: 28px; }
.home-band { display: flex; flex-direction: column; align-items: center; gap: 14px; text-decoration: none; color: inherit; padding: 36px 24px; border-radius: 6px; 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: min(420px, 80%); }
.home-band .band-book { width: min(460px, 90%); }
.home-band .band-btn { display: inline-block; padding: 12px 26px; border: 2px solid #fff; border-radius: 6px; color: #fff; font-weight: 700; letter-spacing: .02em; }
.home-band:hover .band-btn { background: rgba(255,255,255,.15); }

.copy .pledge { border-left: 4px solid var(--purple-ink); background: #fff; padding: 14px 18px; margin: 20px 0; font-weight: 600; }

/* Signup */
.signup { background: var(--card); border: 1px solid var(--rule); border-top: 5px solid var(--purple-ink); padding: 26px; box-shadow: 0 10px 30px rgba(20,24,28,.07); margin: 24px 0; }
.signup h2 { font: 700 20px/1.25 Georgia, "Times New Roman", serif; margin: 0 0 8px; }
.signup p.lead { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.signup label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.signup input[type=email], .signup select { width: 100%; font: 16px inherit; padding: 12px 13px; border: 1px solid #b8bec6; border-radius: 4px; background: #fff; color: var(--ink); margin-bottom: 14px; }
.signup button { width: 100%; font: 700 16px/1 inherit; padding: 14px 18px; border: 0; border-radius: 4px; background: var(--btn); color: #fff; cursor: pointer; }
.signup button:hover { background: var(--btn-hover); }
.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. */
.series-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 20px 0; }
.series-tile { display: flex; align-items: center; justify-content: center; min-height: 300px; border-radius: 6px; 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; }

/* Level page: big colored lesson tiles in the series' palette, one per real
   lesson (no placeholder for a lesson that doesn't exist). */
.level-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 20px 0; }
.level-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 190px; border-radius: 6px; text-decoration: none; color: #fff; transition: opacity .15s ease-in-out; }
.level-tile:hover { opacity: .75; }
.level-tile .tile-label { font: 700 24px/1 var(--font-display); }
.level-tile .tile-number { font: 900 68px/1 var(--font-display); }

/* Mode buttons (level page): colored the same way as lesson tiles
   (learn/flashcards/match/spell cycle through the level's palette, same as
   the old CSS's per-mode overrides). The old site never had a level-wide
   practice option, so there's no old page to match here; these stay as a
   compact button row. */
.mode-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 20px 0; }
.mode-links a { display: flex; align-items: center; justify-content: center; padding: 18px; border-radius: 6px; color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; transition: opacity .15s ease-in-out; }
.mode-links 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,
   laid out 3-across with Spell wrapping alone onto its own row. */
.mode-tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0; }
.mode-tile { display: flex; align-items: center; justify-content: center; min-height: 220px; border-radius: 6px; text-decoration: none; color: #fff; text-align: center; padding: 12px; transition: opacity .15s ease-in-out; }
.mode-tile:hover { opacity: .75; }
.mode-tile .tile-label { font: 900 42px/1.15 var(--font-display); }
@media (max-width: 640px) {
  .mode-tile-grid { grid-template-columns: repeat(2, 1fr); }
  .mode-tile .tile-label { font-size: 30px; }
}

/* Word list (lesson page) */
.word-list { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 10px; }
.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: repeat(4, 1fr); gap: 10px; padding: 0 20px 20px; }
.match-card { background: var(--quiz-card); border: 1px solid var(--quiz-border); border-radius: 10px; padding: 14px 10px; text-align: center; cursor: pointer; font-size: 14px; min-height: 80px; display: flex; align-items: center; justify-content: center; white-space: pre-line; 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; }
  nav.sidebar { position: static; max-height: none; display: none; }
  nav.sidebar.open { display: block; }
  .sidebar-toggle { display: inline-block; margin: 16px 0 0; padding: 10px 16px; border-radius: 6px; border: 1px solid var(--rule); background: #fff; cursor: pointer; font-weight: 600; }
}
@media (max-width: 900px) {
  .match-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  header.bar img { width: 150px; }
  header.bar .by { font-size: 12px; }
  .signup { padding: 20px 16px; }
  .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 { grid-template-columns: repeat(2, 1fr); }
}