:root {
  --blue:#071d3a;
  --blue2:#12335d;
  --ink:#071d3a;
  --muted:#44536a;
  --soft:#f4ecd8;
  --soft2:#dbe1ff;
  --line:#aab5c8;
  --white:#fffef9;
  --mitten-maize:#ffcb05;
  --mitten-navy:#071d3a;
  --mitten-ice:#dbe1ff;
}

body, body button, body input, body textarea, body select {
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
body { background:#fffef9; color:var(--mitten-navy); font-size:17px; }
body a:focus-visible, body button:focus-visible, body textarea:focus-visible, body summary:focus-visible {
  outline:3px solid var(--mitten-maize);
  outline-offset:3px;
  box-shadow:0 0 0 2px var(--mitten-navy);
}
body .wrap { max-width:1280px; }
body .topbar { min-height:72px; padding-inline:max(28px,calc((100vw - 1376px)/2)); background:var(--mitten-navy); border-bottom:1px solid rgba(255,255,255,.22); }
body .brand { font-size:17px; }
body .brandmark { background:var(--mitten-maize); color:var(--mitten-navy); font-family:"IBM Plex Mono",monospace; font-weight:700; }
body .topbar nav button { min-height:48px; padding:11px 13px; color:var(--mitten-ice); font-size:15px; font-weight:600; }
body .topbar nav button:hover { background:rgba(255,203,5,.12); color:#fffef9; }
body .topbar .button { background:var(--mitten-maize); border-color:var(--mitten-maize); color:var(--mitten-navy); }
body .topbar nav button.primary { background:var(--mitten-maize); border-color:var(--mitten-maize); color:var(--mitten-navy); }
body .topbar nav button.primary:hover { background:#ffe06a; border-color:#ffe06a; color:var(--mitten-navy); }
body .topbar nav button.navContinue { background:var(--mitten-maize)!important; border-color:var(--mitten-maize); color:var(--mitten-navy)!important; }
body .topbar nav button.navContinue:hover { background:#ffe06a!important; border-color:#ffe06a; color:var(--mitten-navy)!important; }

body .eyebrow { color:var(--mitten-navy); font:700 13px/1.4 "Instrument Sans",sans-serif; letter-spacing:.075em; }
body .heroHome { padding:78px 0; background:#fffef9; }
body .heroHome .heroGrid { gap:64px; grid-template-columns:1.15fr .85fr; }
body .heroHome h1 { max-width:760px; margin:14px 0 24px; font-family:"Instrument Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:clamp(52px,5.4vw,76px); font-weight:650; line-height:.99; letter-spacing:-.055em; }
body .heroHome .lead { max-width:760px; color:#44536a; font-size:20px; line-height:1.65; }
body .heroSide { padding:28px; background:var(--mitten-navy); color:#fffef9; border-left:6px solid var(--mitten-maize); box-shadow:12px 12px 0 var(--mitten-ice); }
body .heroSide h3 { font-size:21px; font-weight:650; }
body .heroHow li { color:var(--mitten-ice); font-size:16px; line-height:1.55; }

body .button, body .ghost {
  min-height:50px;
  padding:13px 18px;
  border-radius:0;
  font-size:16px;
  font-weight:700;
  line-height:1.25;
}
body .button { background:var(--mitten-maize); border-color:var(--mitten-maize); color:var(--mitten-navy); box-shadow:4px 4px 0 var(--mitten-ice); }
body .button:hover { background:var(--mitten-navy); border-color:var(--mitten-navy); color:#fffef9; }
body .button.secondary { background:var(--mitten-navy); border-color:var(--mitten-navy); color:#fffef9; }
body .ghost { background:#fffef9; border-color:var(--mitten-navy); color:var(--mitten-navy); }
body .ghost:hover { background:var(--mitten-ice); }
body .statChips span { min-height:42px; display:inline-flex; align-items:center; background:#fffef9; border-color:#aab5c8; color:#44536a; font-size:14px; }

body .section h1, body .section h2, body .lessonHeader h1, body .lessonTitle h2, body .panel h3, body .promptCard h2 {
  font-family:"Instrument Sans",sans-serif;
  color:var(--mitten-navy);
}
body .section h2 { font-weight:650; letter-spacing:-.045em; }
body .literacyBand { background:var(--mitten-navy); color:#fffef9; }
body .literacyBand .eyebrow { color:var(--mitten-maize); }
body .literacyBand h2, body .literacyBand .lead { color:#fffef9; }
body .literacyBand .ghost { color:var(--mitten-maize); border-color:var(--mitten-maize); background:transparent; }
body .literacyBand .ghost:hover { color:var(--mitten-navy); background:var(--mitten-maize); }
body .literacyCard {
  color:var(--mitten-navy);
  border:2px solid var(--mitten-navy);
  background:#fffef9;
  box-shadow:5px 5px 0 rgba(255,203,5,.82);
}
body .literacyCard:visited { color:var(--mitten-navy); }
body .literacyCard:hover,
body .literacyCard:focus-visible {
  color:var(--mitten-navy);
  border-color:var(--mitten-navy);
  background:var(--mitten-ice);
  box-shadow:7px 7px 0 var(--mitten-maize);
  transform:translateY(-2px);
}
body .literacyCard strong {
  color:var(--mitten-navy);
  font-size:18px;
  font-weight:700;
  line-height:1.3;
}
body .literacyCard p {
  color:#34445b;
  font-size:15.5px;
  line-height:1.55;
}
body .literacyCard .answerPill {
  background:var(--mitten-navy);
  color:#fffef9;
  border:1px solid var(--mitten-navy);
  font-size:12px;
  line-height:1.4;
}
body .moduleCard { border-color:#aab5c8; }
body .moduleCard:hover, body .navList button.active, body .screenNav button.active { background:var(--mitten-ice); border-color:var(--mitten-navy); }
body .moduleNumber, body summary, body .screenMeter span { color:var(--mitten-navy); }
body .progressPanel, body .lessonCard, body .richLessonContent, body .callout, body .worked { border-left-color:var(--mitten-maize); }
body .bar span { background:var(--mitten-maize); }
body .lessonCard p, body .lessonCard li, body .richLessonContent p { font-size:18px; line-height:1.7; }

@media (max-width:1120px) {
  body .heroHome { background:#fffef9; }
  body .heroHome .heroGrid { grid-template-columns:1fr; }
}

@media (max-width:720px) {
  body .topbar { min-height:0; padding:14px 18px; gap:10px; }
  body .topbar nav { width:100%; gap:2px; }
  body .topbar nav button { min-height:44px; }
  body .courseLayout, body .courseNav, body .lessonShell { min-width:0; max-width:100%; }
  body .navList button { width:100%; min-width:0; grid-template-columns:32px minmax(0,1fr) 22px; }
  body .heroHome { padding:54px 0; }
  body .heroHome h1 { font-size:48px; line-height:1; }
  body .heroHome .lead { font-size:18px; line-height:1.62; }
  body .ctaRow { display:grid; grid-template-columns:1fr; }
  body .ctaRow .button, body .ctaRow .ghost { width:100%; justify-content:center; }
  body .heroSide { box-shadow:8px 8px 0 var(--mitten-ice); }
}