/* Learn board reference layer: compact editorial app surfaces, not a marketing page. */
:root {
  --board-cream: #fff4dc;
  --board-paper: #fffbf0;
  --board-green: #0b3d2e;
  --board-marigold: #f6a91b;
  --board-tomato: #c8361f;
  --board-ink: #14110f;
  --board-muted: #625548;
  --board-radius: 16px;
}

body { background: var(--board-cream); color: var(--board-ink); }
#main { max-width: 1180px; margin: 0 auto; }

.learn-home, .courses-page, .utility-page, .course-page, .reader-page { padding: 24px 16px 72px; }
.learn-welcome, .courses-intro, .utility-head { max-width: 760px; margin: 8px auto 22px; }
.learn-welcome { background: var(--board-green); color: var(--board-cream); border: 3px solid var(--board-ink); border-radius: var(--board-radius); padding: 26px 22px 24px; box-shadow: 6px 6px 0 var(--board-ink); }
.learn-welcome .eyebrow, .courses-intro .eyebrow, .utility-head .eyebrow { color: var(--board-marigold); }
.learn-welcome h1, .courses-intro h1, .utility-head h1 { font-size: clamp(34px, 8vw, 68px); line-height: .96; letter-spacing: -.045em; margin: 10px 0 12px; }
.learn-welcome h1 { color: var(--board-cream); }
.learn-welcome p, .courses-intro p, .utility-head p { font-size: 16px; line-height: 1.55; max-width: 58ch; color: inherit; opacity: .92; }

.learn-start-card, .learn-game, .course-next, .data-tools { border: 3px solid var(--board-ink); border-radius: var(--board-radius); box-shadow: 5px 5px 0 var(--board-ink); }
.learn-start-card { background: var(--board-marigold); padding: 20px; display: flex; align-items: end; justify-content: space-between; gap: 16px; max-width: 760px; margin: 0 auto 18px; }
.start-card-copy h2 { font-size: clamp(24px, 5vw, 34px); line-height: 1.05; margin: 6px 0; }
.start-card-copy p { font-size: 14px; line-height: 1.45; }
.learn-start-card .button-primary { background: var(--board-ink); color: var(--board-cream); border-color: var(--board-ink); box-shadow: 3px 3px 0 var(--board-tomato); }

.learn-game { background: var(--board-paper); padding: 16px; max-width: 760px; margin: 0 auto 28px; gap: 12px; }
.game-challenge { background: var(--board-green); color: var(--board-cream); border: 3px solid var(--board-ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--board-ink); padding: 14px; }
.game-challenge strong { font-family: var(--kb-display); font-size: 20px; line-height: 1.1; display: block; margin: 5px 0; }
.game-challenge > span:last-child { opacity: .88; }
.game-bar { background: #e8d8b8; border: 2px solid var(--board-ink); height: 12px; border-radius: 99px; overflow: hidden; }
.game-bar span { display: block; height: 100%; background: var(--board-tomato); }

.course-strip-head { max-width: 760px; margin: 0 auto 10px; display:flex; justify-content:space-between; align-items:baseline; }
.course-strip-head h2, .courses-list h2 { font-size: 24px; letter-spacing: -.03em; }
.course-chip, .module-row, .lesson-row, .result-row, .term-card, .side-card, .read-card { background: var(--board-paper); border: 3px solid var(--board-ink); box-shadow: 4px 4px 0 var(--board-ink); border-radius: 12px; }
.course-chip, .module-row, .lesson-row, .result-row { transition: transform .16s ease, box-shadow .16s ease; }
.course-chip:hover, .module-row:hover, .lesson-row:hover, .result-row:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--board-ink); }
.course-chip { min-height: 76px; }
.course-chip strong, .lesson-row h3, .module-copy h3, .result-row h3, .term-card h3 { font-family: var(--kb-display); letter-spacing: -.02em; }
.learn-glossary-link { display: block; max-width: 760px; margin: 20px auto; padding: 15px; background: var(--board-paper); border: 2px solid var(--board-ink); border-radius: 10px; }

.course-hero { background: var(--board-green); color: var(--board-cream); border: 3px solid var(--board-ink); border-radius: var(--board-radius); box-shadow: 6px 6px 0 var(--board-ink); padding: 24px 16px; }
.course-hero .eyebrow { color: var(--board-marigold); }
.course-hero h1 { font-size: clamp(36px, 8vw, 72px); line-height: .96; letter-spacing: -.045em; }
.course-hero p { font-size: 16px; line-height: 1.6; max-width: 62ch; }
.outcome-pill { background: var(--board-marigold); color: var(--board-ink); border: 2px solid var(--board-ink); box-shadow: 2px 2px 0 var(--board-ink); font-weight: 750; }
.reader-body { background: var(--board-paper); border: 3px solid var(--board-ink); border-radius: var(--board-radius); box-shadow: 5px 5px 0 var(--board-ink); padding: clamp(20px, 5vw, 42px); }
.reader-title { font-size: clamp(34px, 8vw, 66px); line-height: .98; letter-spacing: -.05em; }
.reader-deck { font-size: clamp(18px, 3vw, 23px); line-height: 1.45; color: var(--board-muted); }
.reader-content { max-width: 68ch; }
.reader-content h2 { font-size: 26px; margin-top: 34px; }
.reader-content p, .reader-content li { font-size: 17px; line-height: 1.72; }
.story-block, .worked-example, .exercise-box, .takeaway-box { border: 3px solid var(--board-ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--board-ink); padding: 16px; margin: 22px 0; }
.story-block { background: #dce9cf; }
.worked-example { background: #f7e6bf; }
.exercise-box { background: #e2e1f4; }
.takeaway-box { background: var(--board-marigold); }
.story-label { color: var(--board-tomato); font-weight: 800; }
.quiz-section { background: var(--board-green); color: var(--board-cream); border: 3px solid var(--board-ink); border-radius: var(--board-radius); box-shadow: 6px 6px 0 var(--board-ink); padding: 20px; margin-top: 30px; }
.quiz-section .eyebrow { color: var(--board-marigold); }
.quiz-option { background: var(--board-paper); color: var(--board-ink); border: 2px solid var(--board-ink); border-radius: 10px; min-height: 48px; }
.quiz-option.selected { box-shadow: 3px 3px 0 var(--board-marigold); }

.button, .tool-button { border: 2px solid var(--board-ink); box-shadow: 3px 3px 0 var(--board-ink); border-radius: 10px; min-height: 44px; }
.button:active, .tool-button:active { transform: translateY(3px); box-shadow: 0 0 0 var(--board-ink); }
.eyebrow, .reader-meta, .result-module, .story-label, .term-pron { font-family: var(--kb-mono); letter-spacing: .09em; font-size: 11px; }

@media (max-width: 560px) {
  .learn-home, .courses-page, .utility-page, .course-page, .reader-page { padding: 14px 12px 84px; }
  .learn-welcome { padding: 22px 16px; }
  .learn-start-card { display: block; padding: 16px; }
  .learn-start-card .button { width: 100%; justify-content: center; margin-top: 12px; }
  .reader-body { padding: 20px 16px; }
  .reader-content p, .reader-content li { font-size: 17px; line-height: 1.75; }
  .reader-title { font-size: clamp(34px, 10vw, 48px); }
  .course-hero { padding: 20px 14px; }
  .quiz-section { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .course-chip, .module-row, .lesson-row, .result-row { transition: none; }
}

/* Wrap-friendly type and theme-aware paper; progress and content stay readable. */
.learn-welcome h1,.course-hero h1,.reader-title{line-height:1.08;letter-spacing:-.035em}.learn-welcome h1 em{font-style:normal;color:#f6a91b}.reader-meta,.result-module,.term-pron{font-family:var(--kb-body);font-size:12px;letter-spacing:normal;line-height:1.5}html[data-theme=dark]{--board-cream:#112b22;--board-paper:#16372c;--board-ink:#fff4dc;--board-muted:#d2d5c4}html[data-theme=dark] .learn-start-card,html[data-theme=dark] .exercise-box,html[data-theme=dark] .takeaway-box{color:#14110f;border-color:#14110f}html[data-theme=dark] .learn-start-card .eyebrow{color:#493714}html[data-theme=dark] .learn-start-card .button-primary{background:#14110f;color:#fff4dc}html[data-theme=dark] .course-hero,html[data-theme=dark] .learn-welcome,html[data-theme=dark] .quiz-section,html[data-theme=dark] .game-challenge{background:#0b3d2e;color:#fff4dc}html[data-theme=dark] .learn-welcome h1,html[data-theme=dark] .course-hero h1{color:#fff4dc}.courses-intro .eyebrow,.utility-head .eyebrow{color:var(--board-muted)}

/* Explicit ink on fixed light panels, and cream copy on green reading sections. */
.course-hero p,.quiz-section .quiz-intro,.quiz-section .quiz-q{color:#fff4dc}.quiz-section .quiz-explain{color:#d5e6d5}.quiz-section .quiz-explain.good{color:#b1e4c4}.quiz-section .quiz-explain.try-again{color:#ffd0bd}html[data-theme=dark] .reader-content .story-block{background:#214b3b;color:#fff4dc}html[data-theme=dark] .story-block .story-label{color:#f6a91b}html[data-theme=dark] .worked-example{background:#3f3524;color:#fff4dc}html[data-theme=dark] .worked-example p{color:#fff4dc}html[data-theme=dark] .worked-example .story-label{color:#f6a91b}html[data-theme=dark] .outcome-pill{background:#f6a91b;color:#14110f;border-color:#14110f;box-shadow:2px 2px 0 #14110f}html[data-theme=dark] .outcome-pill:before{color:#0b3d2e}html[data-theme=dark] .exercise-box,html[data-theme=dark] .takeaway-box{box-shadow:4px 4px 0 #14110f}html[data-theme=dark] .exercise-box p,html[data-theme=dark] .exercise-box .story-label,html[data-theme=dark] .takeaway-box span,html[data-theme=dark] .takeaway-box strong{color:#14110f}html[data-theme=dark] .quiz-option.correct,html[data-theme=dark] .quiz-option.incorrect{color:#14110f}