/* =====================================================================
   SITE v6 — "Gay's desk" layer · 2026-10-10
   Loaded AFTER styles.css on every page. Re-voices the whole site:
   warm, personal, a little wry — never institutional.
   Palette: white page · deep library teal ink · door-light marigold ·
   legal-pad canary + margin red (used sparingly: notes + Exhibit A).
   Type: Bricolage Grotesque (headlines, loaded in v7-brand.css) · Atkinson Hyperlegible (reading; designed
   for low-vision readers) · Caveat (Gay's handwritten margin notes ONLY).
   ===================================================================== */

@font-face{font-family:"Atkinson";src:url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url("../fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Atkinson";src:url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Caveat";src:url("../fonts/caveat-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --ink:#241A3A;          /* deep library teal — body text, 13:1 on white */
  --ink-soft:#4A3F5C;     /* secondary text, 7:1 */
  --teal-v6:#B5402A;      /* links + primary buttons, 5.9:1 with white */
  --marigold:#F0A929;     /* sparkle gold */
  --pad:#FFF3B0;          /* legal-pad canary */
  --pad-rule:rgba(11,110,119,.16);
  --margin-red:#C8402F;   /* legal-pad margin line, 5.1:1 on canary */
  --wash:#F4F1F8;         /* quiet teal wash for alternate bands */
  /* re-point the v5 tokens so every existing page follows */
  --navy:var(--ink); --navy-soft:#3A2D57; --navy-deep:#1A1229;
  --teal:var(--teal-v6); --teal-dark:#963521;
  --paper:var(--wash); --cream:#FFFFFF; --white:#FFFFFF;
  --sage:#ECE7F3;
  --gold:#9A4A00; --gold-deep:#7E3D00; --gold-soft:#FFE7C2;
  --line:rgba(10,52,60,.18); --line-soft:rgba(10,52,60,.09);
  --shadow:none; --shadow-lift:0 2px 0 rgba(10,52,60,.10);
  --radius:14px; --radius-lg:18px;
}

html{font-size:18px}
html.text-lg{font-size:21px}
html.text-xl{font-size:24px}
body{font-family:"Atkinson",-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.6}
h1,h2,h3,h4,.brand-name{font-family:"Bricolage","Atkinson",-apple-system,"Segoe UI",sans-serif;color:var(--ink);letter-spacing:-.012em}
h1{font-weight:800;line-height:1.05}
h2{font-weight:700;line-height:1.12}
h3{font-weight:700}
a{color:var(--teal-v6);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--marigold);outline-offset:3px;border-radius:6px}

/* Labels above headings: quiet, sentence case — never shouting caps */
.eyebrow,.pathway-kicker,.a11y-label{text-transform:none;letter-spacing:0}
.eyebrow{font-weight:700;font-size:.95rem;color:var(--teal-v6)}

/* Reading-comfort bar stays, softened */
.a11y-bar{background:var(--wash);border-bottom:0}

/* Header: white, with the door-light underline */
.site-header{background:#fff;border-bottom:4px solid var(--marigold);box-shadow:none}
.brand-name{font-weight:700;color:var(--ink)}
.brand-alt{color:var(--teal-v6)}
.brand-sub{font-family:"Atkinson",sans-serif;text-transform:none;letter-spacing:0;font-size:.72rem;color:var(--ink-soft)}
.site-nav a{font-weight:700;color:var(--ink)}
.site-nav a[aria-current="page"]{background:var(--ink);color:#fff}

/* Buttons: solid, generous, unmistakable */
.btn{border-radius:12px;font-weight:700;padding:.85em 1.35em;font-size:1rem;box-shadow:none}
.btn-gold{background:var(--marigold);color:var(--ink);border:2px solid var(--marigold)}
.btn-gold:hover{background:#FFC24D;color:var(--ink)}
.btn-primary{background:var(--teal-v6);border-color:var(--teal-v6);color:#fff}
.btn-outline,.btn-outline-navy{background:#fff;color:var(--ink);border:2px solid var(--ink)}

/* Cards: paper, not plastic — a hairline and a solid edge instead of soft grey shadows */
.lesson-card,.pathway-card,.card,.resource-card{box-shadow:none;border:1.5px solid var(--line);border-radius:14px;background:#fff}
.lesson-card:hover,.pathway-card:hover{border-color:var(--ink);transform:none;box-shadow:4px 4px 0 var(--marigold)}
.lesson-num{background:var(--ink);color:#fff;font-family:"Bricolage","Atkinson",-apple-system,"Segoe UI",sans-serif}
.chip{border-radius:8px}

/* Sections: alternate white and a quiet teal wash */
.section-sage,.section-paper{background:var(--wash)}

/* Gay's handwritten margin note — the one flourish. Use at most 2–3 per page. */
.margin-note{font-family:"Caveat",cursive;font-weight:700;color:var(--margin-red);font-size:1.55rem;line-height:1.15}

/* Pause sign moments keep their meaning */
.safety-note,.notice-pause{border-radius:12px}

/* Footer: deep teal, warm */
.site-footer{background:var(--navy-deep);color:#E6F1F1}
.site-footer a{color:#FFE2A6}
.site-footer h2,.site-footer h3,.site-footer h4,.site-footer .brand-name,.site-footer strong{color:#fff}
.site-footer .brand-alt{color:#FF9C85}
.site-footer p,.site-footer small,.site-footer .small{color:#CFE3E3}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.site-footer .footer-brand-name{color:#fff;font-family:"Bricolage","Atkinson",-apple-system,"Segoe UI",sans-serif;font-weight:700}
.site-footer p[style*="var(--gold)"]{color:#FFD27A!important}

/* premiere panel (episode pages awaiting the new HD video) */
.cs-box{background:var(--ink);color:#E6F1F1;border-radius:16px;padding:2rem 1.8rem;border-bottom:6px solid var(--marigold)}
.cs-k{font-weight:700;color:#FF9C85;margin:0 0 .3rem}
.cs-d{font-family:"Bricolage","Atkinson",-apple-system,"Segoe UI",sans-serif;font-weight:700;font-size:1.7rem;color:#fff;margin:0 0 .8rem;line-height:1.15}
/* "try it" box (replaces cartoon videos) */
.try-box{background:var(--pad);border-left:6px solid var(--margin-red);border-radius:0 12px 12px 0;padding:1.2rem 1.4rem;margin:0 0 2rem}
.try-k{font-weight:700;color:var(--margin-red);margin:0 0 .3rem}