/* r77 design tokens: the source of truth is DESIGN.md. This :root is the ONLY place a raw colour value may appear in
   src/*.css (build guard "r77 tokens"). Core palette: 12 tokens. Fixed component colours: 5 (approved values, not
   general tokens). Everything else is derived from the core by the formula in its comment; the build recomputes each
   derived value with color-mix(in srgb) maths and fails if one drifts. Derived values are written as hex, not as
   color-mix(), so browsers without color-mix() still get every colour. */
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/ahn-roman.d6a9e4502a.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/ahn-italic.d2011c7803.woff2) format("woff2")}
/* Phase 2 sample: the heading face (DESIGN.md section 2). Static 700, Latin subset, hinted; swap on a metric-matched fallback. */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/ish-head.247d776c52.woff2) format("woff2")}
@font-face{font-family:"Head Fallback";font-weight:700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold");size-adjust:100.5%;ascent-override:96.5%;descent-override:24.9%;line-gap-override:0%}
/* Metric-matched fallback (size-adjust against Arial / Liberation Sans) so the swap does not move the layout (CLS). */
@font-face{font-family:"AHN Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Helvetica");size-adjust:99.7%;ascent-override:98.7%;descent-override:31.7%;line-gap-override:0%}
:root{
/* core 12 */
--cyber:#0057b8;--money:#0e7a5a;--ai:#8a2d70;
--navy:#001c3b;--ink:#1f2a33;--muted:#55626d;--line:#cfd4da;--line-strong:#6b7882;--bg:#e4e7eb;--paper:#ffffff;
--critical:#b3261e;--warn:#7a5a1e;
/* fixed component colours: badge pill mid-tones (r19, Scott and Rachel) and scholarship flag bars (r73, Scott) */
--cyber-mid:#006fea;--money-mid:#0f8361;--ai-mid:#a93789;--flag-fam:#46398f;--flag-acct:#008a96;
/* derived: name = color-mix(in srgb, A p%, B) */
--cyber-soft:#e8f0f9;/* cyber 9% paper */
--money-soft:#ecf4f2;/* money 8% paper */
--ai-soft:#f3eaf1;/* ai 10% paper */
--neutral-soft:#ebeced;/* ink 9% paper */
--neutral:#2c3842;/* ink 75% muted */
--money-on-grey:#107256;/* money 90% ink */
--money-dark:#0a5c44;/* money 75% #000 */
--navy-hover:#002b5a;/* navy 75% cyber */
--critical-soft:#f8ebeb;/* critical 9% paper */
--warn-soft:#f6f3ef;/* warn 7% paper */
--navy-wash:#edf2f8;/* navy hue 211, 45% sat, 95% light: the page surface below the white head (Phase 2 full) */
--wash-dot:rgb(0 28 59/.07);/* navy 7%: home dot grid */--on-navy-line:rgb(255 255 255/.32);/* paper 32% on navy: rules on the navy band */
--on-color:var(--paper);--ai-on-grey:var(--ai);
/* shadows and overlay: ink and navy at fixed alpha */
--shadow-1:0 6px 20px rgb(31 42 51/.08);--shadow-2:0 10px 24px rgb(31 42 51/.12),0 2px 6px rgb(31 42 51/.06);
--shadow-3:0 14px 44px rgb(0 28 59/.35);--overlay:rgb(0 28 59/.6);
/* type */
--sans:"Atkinson Hyperlegible Next","AHN Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--head:"Instrument Sans","Head Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--head-track:-.01em;
/* motion (Phase 2, DESIGN.md section 5b): only transform and opacity, only under prefers-reduced-motion: no-preference */
--dur-1:150ms;--dur-2:250ms;--dur-3:400ms;--ease:cubic-bezier(.2,0,0,1);--lift:-3px;--rise:var(--sp-3);
/* Phase 2 sample C (DESIGN.md sections 2, 3, 5 and 5b): display scale, wide frame, section rhythm, layered card depth */
--fs-display:clamp(2.25rem,1.35rem + 3.6vw,4rem);--fs-sec:clamp(1.5rem,1.15rem + 1.4vw,2.125rem);--display-track:-.022em;--sec-track:-.015em;
--sp-10:4rem;--sp-11:6rem;--max-wide:72rem;--measure:42rem;
--shadow-card:0 1px 2px rgb(31 42 51/.06),0 6px 16px rgb(31 42 51/.06);--shadow-lift:0 2px 4px rgb(31 42 51/.06),0 18px 36px rgb(31 42 51/.12);
--stagger:70ms;
/* Phase 2 sample D (DESIGN.md section 13): hero scale, deck, sticky glass header (paper at 88%), anchor offset */
--fs-hero:clamp(2.75rem,1.5rem + 4.6vw,5rem);--hero-track:-.03em;--fs-deck:clamp(1.1875rem,1.05rem + .5vw,1.4375rem);
--glass:rgb(255 255 255/.88);--head-offset:5.5rem;
--fs-xs:.8125rem;--fs-sm:.9375rem;--fs-ui:1rem;--fs-md:1.0625rem;--fs-lg:1.1875rem;--fs-xl:1.4375rem;--fs-2xl:2rem;--fs-2xl-sm:1.625rem;
/* space (4px base) */
--sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.25rem;--sp-6:1.5rem;--sp-7:2rem;--sp-8:2.5rem;--sp-9:3rem;
/* radius */
--r-sm:4px;--r-md:8px;--r-lg:12px;--r-pill:999px;
/* layout */
--max:46rem;
--accent:var(--neutral);--accent-ink:var(--on-color);--soft:var(--neutral-soft);--brand1:var(--navy);--brand2:var(--money)}
body.theme-cyber{--accent:var(--cyber);--soft:var(--cyber-soft);--brand1:var(--cyber);--brand2:var(--ink)}
body.theme-ai{--accent:var(--ai);--link:var(--ai-on-grey);--soft:var(--ai-soft);--brand1:var(--ink);--brand2:var(--ai)}
body.theme-money{--accent:var(--money);--link:var(--money-on-grey);--soft:var(--money-soft);--brand1:var(--ink);--brand2:var(--money)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{--link:var(--accent);margin:0;background:var(--navy-wash);color:var(--ink);font:var(--fs-md)/1.65 var(--sans)}
/* r30/v1.0.7 (Scott via Timothy, "Yes, match the headings and deploy"): body text uses the heading sans stack (--sans); form controls inherit it. */
input,button,select,textarea{font:inherit}
a{color:var(--link);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--paper);padding:var(--sp-2) var(--sp-4);z-index:9}
header.site{border-bottom:1px solid var(--line);background:var(--paper)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--sp-5)}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-6);padding-top:var(--sp-4);padding-bottom:var(--sp-4)}
.brand{font:600 var(--fs-lg)/1.2 var(--sans);color:var(--ink);text-decoration:none;letter-spacing:.01em}
.brand .b1{color:var(--brand1)}.brand .b2{color:var(--brand2)}
.brand img{display:block;height:32px;width:auto}
nav ul{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);list-style:none;margin:0;padding:0;font:500 var(--fs-sm)/1.4 var(--sans)}
nav a{color:var(--muted);text-decoration:none}nav a:hover,nav a[aria-current]{color:var(--ink);text-decoration:underline}
main{padding:var(--sp-8) 0 var(--sp-9)}
h1,h2,h3{font-family:var(--head);font-weight:700;letter-spacing:var(--head-track);line-height:1.25;color:var(--ink)}
h1{font-size:var(--fs-2xl);margin:0 0 var(--sp-4)}h2{font-size:var(--fs-xl);margin:var(--sp-8) 0 var(--sp-3)}h3{font-size:var(--fs-lg);margin:var(--sp-6) 0 var(--sp-2)}
.lede{font-size:var(--fs-lg);color:var(--muted)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6);margin:var(--sp-5) 0}
.note{background:var(--soft);border-left:4px solid var(--accent);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-4);margin:var(--sp-5) 0}
/* alert pages: the shared "How to protect yourself" box, in the section colour */
.protect{border-left-width:6px}.protect h2{margin:0 0 .35rem;font-size:var(--fs-lg);color:var(--accent)}.protect ul{margin:.2rem 0 0}.protect li+li{margin-top:.3rem}
.example{border:1px dashed var(--warn);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);margin:var(--sp-5) 0;background:var(--warn-soft)}
.label{display:inline-block;font:600 var(--fs-xs)/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--warn);margin-bottom:var(--sp-2)}
/* v1.0.19.44 Heads up banner (DESIGN.md section 7): amber, never red. For vendor research with no Critical rating. A solid 1px --warn border (6.35:1 on paper), --warn-soft fill, the words "Heads up:" in --warn (5.74:1) and the source in --ink (13.21:1). Words, not colour alone. No side stripe: that stays the Critical alert's own signal. */
.headsup{width:fit-content;max-width:var(--measure);margin:0 0 var(--sp-3);padding:var(--sp-2) var(--sp-4);border:1px solid var(--warn);border-radius:var(--r-md);background:var(--warn-soft);color:var(--ink);font:400 var(--fs-sm)/1.45 var(--sans)}
.headsup-label{color:var(--warn);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.grid .card{margin:0}
.grid h3{margin-top:0}
.signup{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-3) 0}
.signup input{flex:1 1 14rem;padding:var(--sp-3) var(--sp-3);border:1px solid var(--line);border-radius:var(--r-md);font:inherit;background:var(--paper)}
button,.btn{display:inline-block;padding:var(--sp-3) var(--sp-4);border:0;border-radius:var(--r-md);background:var(--accent);color:var(--accent-ink);font:600 var(--fs-ui)/1.2 var(--sans);text-decoration:none;cursor:pointer}
button[disabled]{opacity:.6;cursor:not-allowed}
.small{font-size:var(--fs-sm);color:var(--muted)}
table{width:100%;border-collapse:collapse;margin:var(--sp-4) 0;font-size:var(--fs-sm)}
th,td{text-align:left;padding:var(--sp-2) var(--sp-2);border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.table-scroll{overflow-x:auto}
/* r18 FAFSA state table: a focusable, labelled scroll region; on narrow screens the table keeps readable
   columns and scrolls sideways inside the region instead of crushing the text. */
.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}
.table-wide{border:1px solid var(--line);border-radius:var(--r-md);margin:var(--sp-4) 0}
.table-wide table{margin:0}
.table-wide:focus-visible{outline:3px solid var(--cyber);outline-offset:2px}
.state-aid th[scope=row]{color:var(--ink);font-weight:700}
@media (max-width:47.99rem){.state-aid{min-width:44rem}}
footer.site{border-top:1px solid var(--line);background:var(--paper);padding:var(--sp-6) 0 var(--sp-7);font-size:var(--fs-sm);color:var(--muted)}
footer.site ul{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);list-style:none;padding:0;margin:var(--sp-2) 0}
footer.site a{color:var(--muted)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (max-width:47.99rem){h1{font-size:var(--fs-2xl-sm)}body{font-size:var(--fs-ui)}}
.mt0{margin-top:0}.m0{margin:0}.full{flex-basis:100%}
.doors{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));margin:var(--sp-7) 0}
.doors-pair{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}@media (max-width:47.99rem){.doors-pair{grid-template-columns:1fr}}
.door{display:flex;flex-direction:column;gap:.4rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-6);color:var(--ink);text-decoration:none;transition:border-color .15s}
.door-kicker{font:600 var(--fs-xs)/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.door-title{font:700 var(--fs-xl)/1.2 var(--head);letter-spacing:var(--head-track)}
.door-text{color:var(--muted)}
.door-go{margin-top:auto;padding-top:var(--sp-2);font:600 var(--fs-sm)/1.3 var(--sans);color:var(--accent);text-decoration:underline;text-underline-offset:.18em}
/* Signature section (r18): white card, three-door accent bar and chips. Contrast on white: ink 14.6:1, kicker
   #3b4a56 9.1:1, Cyber #0057B8 6.9:1; white on chips/button: Cyber 6.9:1, Finance #0E7A5A 5.3:1, AI #8A2D70 7.8:1. */
.signature{position:relative;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-7) var(--sp-7) var(--sp-7);margin:var(--sp-7) 0;overflow:hidden;box-shadow:var(--shadow-1)}
.signature::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--cyber) 0 33.333%,var(--money) 33.333% 66.666%,var(--ai) 66.666% 100%)}
.signature h2{color:var(--ink);font-size:var(--fs-xl);line-height:1.25;margin-bottom:var(--sp-2)}
.signature .sig-kicker{color:var(--neutral);margin:0 0 var(--sp-2)}
.sig-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 var(--sp-4)}
.sig-chip{display:inline-block;padding:.28rem var(--sp-2);border-radius:var(--r-pill);color:var(--on-color);font:600 var(--fs-xs)/1 var(--sans);letter-spacing:.04em}
.sig-chip-cyber{background:var(--cyber)}.sig-chip-money{background:var(--money)}.sig-chip-ai{background:var(--ai)}
.sig-links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-5);margin:var(--sp-5) 0 0}
.signature .sig-btn{background:var(--cyber);color:var(--on-color)}
.signature .sig-btn:hover{background:var(--navy)}
.sig-link{color:var(--cyber);font:600 var(--fs-ui)/1.2 var(--sans);text-decoration:underline;text-underline-offset:3px}
.sig-link:hover{text-decoration-thickness:2px}
.signature a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media (max-width:47.99rem){.signature{padding:var(--sp-6) var(--sp-5) var(--sp-6)}.signature h2{font-size:var(--fs-lg)}}
.tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tag{display:inline-block;font:600 var(--fs-xs)/1 var(--sans);padding:.35rem var(--sp-2);border-radius:var(--r-pill);background:var(--soft);color:var(--accent)}
.label.soon{color:var(--muted)}
.tag-cyber{background:var(--cyber-soft);color:var(--cyber)}.tag-money{background:var(--money-soft);color:var(--money)}.tag-ai{background:var(--ai-soft);color:var(--ai)}
/* AI hub topic list: calm, unlinked "coming soon" items */
.topics{padding-left:var(--sp-5)}.topics li{margin:.3rem 0}
.topic-soon{color:var(--ink)}
.soon-label{display:inline-block;margin-left:.35rem;padding:0 .45rem;border:1px solid var(--line);border-radius:var(--r-pill);font:500 var(--fs-xs)/1.5 var(--sans);color:var(--muted);white-space:nowrap;vertical-align:.08em}
.status{display:inline-block;font:600 var(--fs-sm)/1.2 var(--sans);padding:.3rem var(--sp-2);border-radius:var(--r-sm);background:var(--soft);color:var(--accent);white-space:nowrap}
/* hub door icons (decorative tiles) */
.door-icon{display:block;width:44px;height:44px;margin-bottom:.35rem}
.hub-head{display:flex;align-items:center;gap:var(--sp-4);margin:0 0 var(--sp-4)}.hub-head h1{margin:0}
.hub-icon{flex:none;width:48px;height:48px}
/* breadcrumbs (shared helper in build.py) */
.crumbs{margin:0 0 var(--sp-4);font:400 var(--fs-sm)/1.45 var(--sans)}
.crumbs ol{list-style:none;margin:0;padding:0}
.crumbs li{display:inline;overflow-wrap:anywhere}
.crumbs li+li::before{content:"\203A";content:"\203A"/"";padding:0 .45rem;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration-thickness:1px}
.crumbs a[aria-current]{color:var(--ink);text-decoration:none}
/* v1.0.19: Teach it this week pages now carry the 4-level Teacher Talk trail, which wraps at phone widths; give those links the
   same 24px targets as /teachers/ (teachers.css) so wrapped rows do not crowd (axe target-size). Scoped so no other trail changes. */
.crumbs ol:has(a[href="/teachers/family/"]) a{display:inline-block;min-height:24px;line-height:24px}
/* accent cards (home doors, hub cards, lesson cards, info cards) */
:where(.xcard){--ca:var(--accent)}.xcard.acc-cyber{--ca:var(--cyber)}.xcard.acc-money{--ca:var(--money)}.xcard.acc-ai{--ca:var(--ai)}
.xgrid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin:var(--sp-4) 0 var(--sp-6)}.xgrid-1{grid-template-columns:1fr}
.xgrid-2{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.xgrid-row{gap:var(--sp-3);grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width:47.99rem){.xgrid-row{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:24.3125rem){.xgrid-row{grid-template-columns:1fr}}
.xcard{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.4rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-6) var(--sp-5);color:var(--ink);text-decoration:none}
.xcard::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--ca);transform-origin:top}
.xcard-kicker,.door-kicker{font:600 var(--fs-xs)/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ca)}
.xcard-kicker.soon{color:var(--muted)}
.xcard-title{margin:0;font:700 var(--fs-lg)/1.3 var(--head);letter-spacing:var(--head-track);color:var(--ink)}
.door .xcard-title{font-size:var(--fs-xl)}
.xcard-text{color:var(--muted)}
.xcard-date{font:500 var(--fs-sm)/1.3 var(--sans);color:var(--muted)}
.xcard-compact{gap:.3rem;padding:var(--sp-4) var(--sp-4) var(--sp-4);font-size:var(--fs-sm);line-height:1.4}.xcard-compact .xcard-title{font-size:var(--fs-ui)}
.xcard[id]{scroll-margin-top:var(--sp-5)}.xcard:target{outline:3px solid var(--ca);outline-offset:3px}
.xcard-go,.door-go{margin-top:auto;padding-top:var(--sp-2);font:600 var(--fs-sm)/1.3 var(--sans);color:var(--ca);text-decoration:underline;text-underline-offset:.18em}
.xcard-soon{cursor:default}
.xcard:hover,a.xcard:focus-visible,.xcard:focus-within{box-shadow:var(--shadow-2);border-color:var(--ca)}
.xcard:hover .xcard-title,a.xcard:focus-visible .xcard-title,.xcard:focus-within .xcard-title{color:var(--ca)}
a.xcard:focus-visible{outline:3px solid var(--ca);outline-offset:3px}
/* motion lives in the Phase 2 block at the end of this file, under prefers-reduced-motion: no-preference */
/* hub group subheads (AI hub groups; shared hub template) */
.hub-sub{margin:var(--sp-6) 0 .1rem;font:600 var(--fs-sm)/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hub-sub+.xgrid{margin-top:var(--sp-2)}
/* tag-split top border on article and lesson cards: hard stops, order Cyber, Finance, AI */
.xcard.tags-cyber::before{background:var(--cyber)}
.xcard.tags-finance::before{background:var(--money)}
.xcard.tags-ai::before{background:var(--ai)}
/* r55.2 (Scott, Oct 27): a card stripe shows exactly its topic colors, in the order blue, green, plum, in equal segments
   (as in v1.0.18.1). Three-color thirds as a brand line belong to the logo, share images, posters, thumbnails and .signature only.
   Untagged cards (Teacher Talk classroom cards) use their desk color through --ca (acc-cyber / acc-money / acc-ai). */
.xcard.tags-cyber-finance::before{background:linear-gradient(90deg,var(--cyber) 0 50%,var(--money) 50% 100%)}
.xcard.tags-cyber-ai::before{background:linear-gradient(90deg,var(--cyber) 0 50%,var(--ai) 50% 100%)}
.xcard.tags-finance-ai::before{background:linear-gradient(90deg,var(--money) 0 50%,var(--ai) 50% 100%)}
.xcard.tags-cyber-finance-ai::before{background:linear-gradient(90deg,var(--cyber) 0 33.333%,var(--money) 33.333% 66.667%,var(--ai) 66.667% 100%)}
/* Kitchen Table Talk: the shared jump link under an article's intro, and its in-page target */
.ktt-jump{background:var(--soft);border-left:4px solid var(--accent);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin:var(--sp-4) 0 var(--sp-6);font-weight:600}
.ktt-jump a{color:var(--link)}
.ktt{border-radius:var(--r-md);padding:.1rem var(--sp-3);margin:0 calc(-1 * var(--sp-3));scroll-margin-top:var(--sp-5)}
.ktt:target,.ktt:focus{outline:3px solid var(--accent);outline-offset:2px;background:var(--soft)}
.note .ktt:target,.note .ktt:focus{background:var(--paper)}
/* Timely aside (dated, removable: ELECTION_TIMELY in build.py) */
.timely{background:var(--paper);border:1px dashed var(--accent);border-left:4px solid var(--accent)}
/* scholarships (r17): month jump bar and compact listing cards */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.month-jump{margin:var(--sp-3) 0 var(--sp-5)}.month-jump ul{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:0;padding:0}
.month-jump a,.month-jump .mj-off{display:inline-block;min-width:3.1rem;padding:.4rem var(--sp-3);border:1px solid var(--line);border-radius:var(--r-pill);font:600 var(--fs-sm)/1.25 var(--sans);text-align:center}
.month-jump a{background:var(--paper);color:var(--link);text-decoration:none}.month-jump a:hover{border-color:var(--money);text-decoration:underline}
.month-jump a:focus-visible{outline:3px solid var(--money);outline-offset:2px}
.month-jump .mj-off{background:transparent;border-style:dashed;color:var(--muted);font-weight:500}
.schol-month{scroll-margin-top:var(--sp-4);margin:var(--sp-7) 0 0}.schol-month+.small{margin:.3rem 0 0}
.schol-grid{margin-top:var(--sp-2)}
.schol .xcard-title a{color:inherit;text-underline-offset:.15em}
.schol-f{margin:0;display:grid;gap:.35rem}.schol-f div{margin:0}
.schol-f dt{font:600 var(--fs-xs)/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.schol-f dd{margin:0;overflow-wrap:anywhere}
/* about: Scott's bio photo, a rounded-square thumbnail beside the bio; centred above it on narrow screens */
.bio-photo{float:right;width:10rem;height:auto;margin:.3rem 0 var(--sp-4) var(--sp-6);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--paper)}
@media (max-width:47.99rem){.bio-photo{float:none;display:block;width:8rem;margin:var(--sp-2) auto var(--sp-4)}}
/* about: door subheads (Cybersecurity, Personal Finance, Artificial Intelligence) in the door accent colours.
   Text on the grey page: Cyber #0057B8 5.54:1, AI #8A2D70 6.29:1; Finance text uses --money-on-grey #0A7454 (4.65:1)
   because #0E7A5A is 4.29:1 on #e4e7eb, under AA for this size. The exact door colour is the left rule on all three. */
/* r18: each door is one group (.door-group): the door-colour rule runs down the whole group, the subhead sits
   just inside it and EVERY paragraph under that subhead is indented a step further (1.1rem; 0.85rem on narrow
   screens) so it reads as that heading's description. The group ends at the next heading. Class-based only (CSP). */
.door-group{margin:var(--sp-5) 0 var(--sp-6);border-left:4px solid}
.door-group-cyber{border-color:var(--cyber)}.door-group-money{border-color:var(--money)}.door-group-ai{border-color:var(--ai)}
.door-group>p{padding-left:var(--sp-4)}.door-group>p:last-child{margin-bottom:0}
.door-h{font-family:var(--sans);font-size:var(--fs-ui);line-height:1.3;margin:0 0 .35rem;padding-left:var(--sp-2)}
.door-h-cyber{color:var(--cyber)}
.door-h-money{color:var(--money-on-grey)}
.door-h-ai{color:var(--ai)}
@media (max-width:47.99rem){.door-group>p{padding-left:var(--sp-3)}.door-h{padding-left:var(--sp-2)}}
/* about: the bio's section heads are h2 (under the h1) at the old h3 size, so the page looks the same */
.bio-h{font-size:var(--fs-lg);margin:var(--sp-6) 0 var(--sp-2)}
/* r18 scholarships: the Washington-only section and its "not posted yet" sub-group */
.schol-wa{margin-top:var(--sp-7);padding-top:var(--sp-1);border-top:3px solid var(--money)}
.schol-sub{font-size:var(--fs-md);margin:var(--sp-5) 0 var(--sp-2)}
/* r18: long bare source URLs (FAFSA sources 6-24) must wrap on phones instead of widening the page */
.sources li{overflow-wrap:anywhere}
/* r18 badge icons (DRAFT MOCKUP behind BADGE_ICONS): 1em glyph, 0.3em gap, currentColor so it takes the pill's text colour (negative top margin keeps the 1em glyph out of the line-box height, so the pill height is unchanged; no visual shift) */
.badge-ico{display:inline-block;width:1em;height:1em;margin-right:.3em;margin-top:-.25em;vertical-align:-.125em;fill:currentColor;flex:none}
/* r26 video embed (click-to-load facade; see build.py video_embed) */
.video{margin:var(--sp-3) 0 var(--sp-5)}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;background:var(--navy);border-radius:var(--r-md);overflow:hidden}
.video-short .video-frame{aspect-ratio:9/16;max-width:min(20rem,75vw)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video figcaption{margin-top:.4rem}
/* r28 (Scott via Timothy, Oct 23, 2026): vertical Shorts sit on the right with the text wrapping on the left (40rem/640px and up);
   on phones they are centred, full width up to 22.5rem. Same spot in the source (right under the h1). Landscape videos keep the full-width block.
   The rule before Sources clears it (r31: boxes beside it now wrap; see below). Scoped with ~ so pages without a Short are unchanged. */
.video-short{max-width:22.5rem;margin:var(--sp-3) auto var(--sp-5)}
.video-short .video-frame{max-width:none}
/* r60.1 Coming label above a Short that is not out yet (series pages; build.py video_embed, src/videos/coming.js) */
.video-coming{display:inline-block;margin:0 0 .45rem;padding:.05rem var(--sp-3);border-radius:var(--r-pill);background:var(--ink);color:var(--on-color);font:600 var(--fs-sm)/1.6 var(--sans)}
@media (min-width:48rem){
.video-short{float:right;width:19rem;margin:0;padding:.4rem 0 var(--sp-4) var(--sp-6);background:var(--navy-wash)}
.video-short~blockquote,.video-short~pre{display:flow-root}
.video-short~hr{clear:both}
/* r77 video standard (DESIGN.md): a landscape video after a Short always starts below it, never under the float */
.video-short~.video:not(.video-short){clear:both}
/* r60 (LinkedIn hub, one Short per section): a section heading that carries its own Short starts below the Short before it,
   so two floats never stack side by side and squeeze the text when a section is shorter than its video. Only matches an h2
   directly followed by a Short, so single-video pages are unchanged. */
h2:has(+ .video-short){clear:both}
/* r60.1 (Scott via Timothy, Oct 29, 2026: "what if we alternate left and right side with the videos?"): on a series page every
   second Short floats left, gutter on its right. Lists beside it keep their markers clear of the video. */
.video-short.video-left{float:left;padding:.4rem var(--sp-6) var(--sp-4) 0}
.video-short.video-left~ul,.video-short.video-left~ol{display:flow-root}
.video-short.video-left~.note{clear:left}
/* r31 / v1.0.8 (Scott, Oct 23, 2026: 'Deploy option A, text wraps under the video'; the standard for every video page): the teach box and the jump link no longer become their own block formatting context, so their text
   wraps around the Short like a normal float (beside it, then full width once past it). Their tinted background would otherwise run
   behind the video, so the float carries a page-coloured gutter (padding, not margin, on a --bg background): the box reads as
   notched around the video instead of the video sitting on top of it. Text-to-video spacing stays 1.5rem; blockquote/pre keep the column. */
}
/* r60.1: on a series page the text beside a Short would drop under about 21rem between 40rem and 46rem, so there the
   Shorts stack centred as on phones and float from 46rem up */
/* r60.3 (Scott via Timothy, Oct 29, 2026, 11:25 AM PT: "a colored green line or green, blue, plum line under each video
   title"; 11:26 AM PT: "justified acrros the screen"): each series section heading (an h2 directly followed by a series Short)
   gets the brand stripe across the full text column, 4px, three equal thirds in the locked order blue, green, plum (as
   .signature). It is a background on the h2's padding, so there is no extra element (nothing for assistive tech) and no
   layout shift. The h2 clears the floats above it (r60), so its box is always the full column. Single-video pages are unchanged. */
/* v1.0.19.15 (Scott via Timothy, Oct 31, 2026, 9:24 AM PT: "Yes, Ross can add the three-color stripe under the title on every
   article."): the same stripe, same rule, under the h1 of every published article (/cyber/, /finance/, /ai/, /alerts/; build.py
   marks it with .title-stripe), between the title and the Checked line. A background on the h1's own padding: decorative, no
   element for assistive tech, no layout shift; the h1 comes before any floated Short, so its box is always the full column. */
h1.title-stripe,h2:has(+ .video-series){padding-bottom:var(--sp-2);background:linear-gradient(90deg,var(--cyber) 0 33.333%,var(--money) 33.333% 66.666%,var(--ai) 66.666% 100%) left bottom/100% 4px no-repeat}
/* r28.1 /videos/ cards: the self-hosted poster beside the title and text */
.xcard-video{flex-direction:row;align-items:flex-start;gap:var(--sp-4)}
.xcard-body{display:flex;flex-direction:column;gap:.4rem;flex:1;min-width:0;align-self:stretch}
.xcard-poster{flex:none;width:7.5rem}
.xcard-poster img{display:block;width:100%;height:auto;border-radius:var(--r-md);background:var(--navy)}
/* r71: printable checklist items show an empty box (the PDF is the print copy) */
.checks{list-style:none;padding-left:0}
.checks li{position:relative;padding-left:1.75em}
.checks li::before{content:"";position:absolute;left:0;top:.2em;width:1em;height:1em;border:2px solid currentColor;border-radius:var(--r-sm)}

/* ---- Phase 2 sample (Scott, Nov 9, 2026; DESIGN.md sections 4, 5b and 7) ---- */
/* Stripes: headers and featured cards only ("Use stripes less: headers and featured cards only"). Ordinary cards lose the
   top stripe; the home doors (featured) and Critical alert cards keep it. The Critical red left stripe stays everywhere. */
.xcard:not(.door):not(.xcard-critical):not(.xcard-feature)::before{content:none}
/* the header brand line: three equal thirds, 3px, over the header's bottom border (absolute, so no layout shift) */
header.site{position:relative}
header.site::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--cyber) 0 33.333%,var(--money) 33.333% 66.667%,var(--ai) 66.667% 100%);transform-origin:left}
/* Scholarship flags: the colour bar keeps its place on the left, and its words sit beside it at the top of the card. */
.schol-flag{display:inline-flex;align-self:flex-start;align-items:center;gap:.4rem;margin:.1rem 0 0;padding:.15rem var(--sp-2) .15rem .3rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);font:600 var(--fs-xs)/1.4 var(--sans)}
.schol-flag::before{content:"";flex:none;width:4px;align-self:stretch;min-height:1.1em;border-radius:2px;forced-color-adjust:none}
.schol-flag-fam::before{background:var(--flag-fam)}.schol-flag-acct::before{background:var(--flag-acct)}
@media (forced-colors:active){.schol-flag-fam::before{background:CanvasText}.schol-flag-acct::before{background:GrayText}}
@media (prefers-reduced-motion:no-preference){
.xcard{transition:transform var(--dur-2) var(--ease)}
.xcard::before{transition:transform var(--dur-2) var(--ease)}
a.xcard:hover,a.xcard:focus-visible{transform:translateY(var(--lift))}
a.xcard:hover::before,a.xcard:focus-visible::before{transform:scaleY(1.6)}
header.site::after{animation:cs-sweep var(--dur-3) var(--ease) both}
@keyframes cs-sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* sections rise into view as they scroll in: CSS scroll-driven, no JS. Where view() is unsupported nothing is hidden.
   Critical cards and banners are excluded: severity never fades, moves or pulses. */
@supports (animation-timeline:view()){
main :is(.xgrid>.xcard:not(.xcard-critical),.doors>.door,.signature,.signup,.schol-legend){animation:cs-up linear backwards;animation-timeline:view();animation-range:entry 0% entry 35%}
@keyframes cs-rise{from{opacity:0;transform:translateY(var(--rise))}to{opacity:1;transform:none}}
}
}

/* ---- Phase 2 sample C (Scott, Nov 9, 2026, 2:41 PM PT: "i'm hopinf for a bit more though... the site still feels basic,
   it is clean which i like"). Bolder, still clean: an editorial hero, tinted section bands, numbered kickers, one line-icon
   set, deeper cards, a stronger header and footer. DESIGN.md "Phase 2 sample C". Tokens only; no new colours. ---- */
/* wide frame: header and footer everywhere; home and the three hubs use it for content too (reading text keeps --measure) */
header.site .wrap,footer.site .wrap{max-width:var(--max-wide)}
body.theme-home main .wrap,main:has(.hub-hero) .wrap{max-width:var(--max-wide)}
body.theme-home main{padding:0}
:is(body.theme-home,main:has(.hub-hero)) :is(.lede,.wrap>p,.band>p:not(.kicker),.signature>p,.card>p){max-width:var(--measure)}
/* header: taller bar, nav as quiet pills, the current page as a solid ink pill (contrast 14.61:1) */
.bar{padding-top:var(--sp-5);padding-bottom:var(--sp-5)}
header.site nav ul{gap:var(--sp-1)}
header.site nav a{display:inline-block;padding:.375rem .75rem;border-radius:var(--r-pill);color:var(--neutral);line-height:1.3}
header.site nav a:hover{background:var(--neutral-soft);color:var(--ink);text-decoration:none}
header.site nav a[aria-current]{background:var(--ink);color:var(--on-color);text-decoration:none}
@media (max-width:47.99rem){.bar{padding-top:var(--sp-4);padding-bottom:var(--sp-4)}header.site nav a{padding:.3rem .6rem}}
/* bands: full-bleed tinted sections painted with box-shadow and clipped sideways (no extra markup, no scroll overflow) */
.band{--band:var(--navy-wash);position:relative;padding:var(--sp-10) 0;background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax)}
.band-paper{--band:var(--paper)}
.band>.card,.band>.signature,.band>.tt-home,.band>.doors{margin-bottom:0}
@media (min-width:48rem){.band{padding:var(--sp-11) 0}}
/* kicker: a small numbered label over a section heading (GOV.UK "heading with caption") */
.kicker{display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-3);font:600 var(--fs-xs)/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--neutral)}
.kicker-n{font:700 var(--fs-xs)/1 var(--head);letter-spacing:.04em;padding:.3rem .45rem;border:1px solid var(--line-strong);border-radius:var(--r-sm);color:var(--ink)}
.sec-h,body.theme-home .band h2{font-size:var(--fs-sec);letter-spacing:var(--sec-track);line-height:1.15;margin:0 0 var(--sp-6);max-width:28ch}
/* hero: display type with a confident jump from the body size, tight tracking, one primary action */
.hero{margin-top:0}
body.theme-home .hero{padding-top:var(--sp-8);padding-bottom:var(--sp-9)}
h1.display{font-size:var(--fs-display);letter-spacing:var(--display-track);line-height:1.04;max-width:18ch;margin:0 0 var(--sp-5)}
.hero .lede{font-size:var(--fs-lg);line-height:1.55;color:var(--muted);margin:0 0 var(--sp-6)}
.hero-kicker{color:var(--accent)}
body.theme-home .hero-kicker{color:var(--neutral)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5);margin:0}
.btn-primary{padding:var(--sp-4) var(--sp-6);border-radius:var(--r-md);background:var(--navy);color:var(--on-color);font:600 var(--fs-ui)/1.2 var(--sans);box-shadow:var(--shadow-card)}
.btn-primary:hover{background:var(--navy-hover)}
.btn-primary:focus-visible{outline:3px solid var(--cyber);outline-offset:3px}
@media (min-width:48rem){body.theme-home .hero{padding-top:var(--sp-11);padding-bottom:var(--sp-11)}}
/* hub hero: same face, smaller; crumbs stay on the page grey above it */
.hub-hero{padding:var(--sp-8) 0 var(--sp-8);margin:0 0 var(--sp-4)}
.hub-hero .hub-head{margin:0 0 var(--sp-4)}
.hub-hero h1.display{font-size:clamp(2rem,1.3rem + 2.8vw,3.25rem);max-width:22ch;margin:0}
.hub-hero .lede{margin:0 0 var(--sp-2)}
.hub-hero .kicker .ico-tile{width:40px;height:40px}
/* one line-icon set: a tinted tile with the topic glyph in the topic colour */
.ico{display:block;width:24px;height:24px;flex:none}
.ico-tile{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:var(--r-md);background:var(--paper);border:1px solid var(--line);color:var(--accent)}
.ico-tile.ico-cyber{color:var(--cyber)}.ico-tile.ico-money{color:var(--money)}.ico-tile.ico-ai{color:var(--ai)}
.kicker .ico-tile{width:36px;height:36px}.kicker .ico-tile .ico{width:20px;height:20px}
.door .ico-tile{margin-bottom:var(--sp-3)}
.sig-chip{display:inline-flex;align-items:center;gap:.35rem}.sig-chip .ico{width:14px;height:14px;stroke-width:2.25}
/* cards: hairline border plus a layered resting shadow; a bigger title; the action reads as a meta row with an arrow */
.xcard{box-shadow:var(--shadow-card);gap:var(--sp-2)}
.xcard:hover,a.xcard:focus-visible,.xcard:focus-within{box-shadow:var(--shadow-lift)}
.xcard-title{font-size:var(--fs-xl);line-height:1.2;letter-spacing:var(--sec-track)}
.xcard-compact .xcard-title{font-size:var(--fs-md);line-height:1.3}
.xcard-go,.door-go{display:flex;align-items:center;gap:.4rem;padding-top:var(--sp-3);margin-top:auto}
:is(.xcard-go,.door-go)::after{content:"\2192";content:"\2192"/"";text-decoration:none;display:inline-block}
.xcard-soon{box-shadow:none;background:var(--neutral-soft)}
.door{padding:var(--sp-7) var(--sp-6) var(--sp-6)}
.door .xcard-title{font-size:var(--fs-sec);letter-spacing:var(--sec-track);line-height:1.1}
body.theme-home .doors{margin:0;gap:var(--sp-5)}
@media (min-width:48rem){body.theme-home .doors{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* hubs: numbered section heads, two-column article lists on wide screens */
main:has(.hub-hero) .wrap{counter-reset:sec}
main:has(.hub-hero) .wrap>h2{counter-increment:sec;font-size:var(--fs-sec);letter-spacing:var(--sec-track);line-height:1.15;margin:var(--sp-10) 0 var(--sp-4);padding-top:var(--sp-5);border-top:1px solid var(--line)}
main:has(.hub-hero) .wrap>h2::before{content:counter(sec,decimal-leading-zero)/"";display:block;width:max-content;margin:0 0 var(--sp-3);padding:.3rem .45rem;border:1px solid var(--line-strong);border-radius:var(--r-sm);font:700 var(--fs-xs)/1 var(--head);letter-spacing:.04em;color:var(--ink)}
@media (min-width:64rem){main:has(.hub-hero) .xgrid-1{grid-template-columns:repeat(2,minmax(0,1fr))}main:has(.hub-hero) .xgrid:not(.xgrid-1){grid-template-columns:repeat(3,minmax(0,1fr))}}
main:has(.hub-hero) .xgrid{gap:var(--sp-5)}
/* signature panel and sign-up card read as feature surfaces on their bands */
.band .signature{padding:var(--sp-8);box-shadow:var(--shadow-card)}
.band .card{padding:var(--sp-7) var(--sp-7);box-shadow:var(--shadow-card)}
@media (max-width:47.99rem){.band .signature,.band .card{padding:var(--sp-6) var(--sp-5)}}
.band-last>.small{margin:var(--sp-6) 0 0}
/* Critical stays unmistakable: a red hairline all round plus the 8px red stripe and the label; it never lifts or moves */
/* (the Critical card rules live in alert-critical.css, linked only where a Critical card or banner shows) */
/* footer: a navy band with the brand line on top; paper text (17.08:1) */
footer.site{position:relative;background:var(--navy);color:var(--on-color);border-top:0;padding:var(--sp-9) 0 var(--sp-8)}
footer.site::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--cyber) 0 33.333%,var(--money) 33.333% 66.667%,var(--ai) 66.667% 100%)}
footer.site a,footer.site .follow-label{color:var(--on-color)}
footer.site .wrap>p:first-child{font:700 var(--fs-lg)/1.35 var(--head);letter-spacing:var(--head-track);max-width:34rem;margin:0 0 var(--sp-5)}
footer.site .wrap>ul:not(.social){gap:var(--sp-2) var(--sp-5);margin:0 0 var(--sp-6);padding:0 0 var(--sp-5);border-bottom:1px solid var(--line-strong)}
footer.site :focus-visible{outline-color:var(--paper)}
footer.site ul.social a{border-color:var(--paper)}
@media (prefers-reduced-motion:no-preference){
/* staggered load-in for the hero; the h1 and lede only rise (no fade) so the largest paint is never held back */
:is(.hero-copy)>*{animation:cs-up var(--dur-3) var(--ease) both}
.hero-copy>:is(.hero-kicker,.hero-actions,.tags){animation-name:cs-rise}
.hero-copy>:nth-child(2){animation-delay:var(--stagger)}.hero-copy>:nth-child(3){animation-delay:calc(var(--stagger) * 2)}.hero-copy>:nth-child(4){animation-delay:calc(var(--stagger) * 3)}
@keyframes cs-up{from{transform:translateY(var(--rise))}to{transform:none}}
/* doors and hub cards enter one after another as they scroll in */
@supports (animation-timeline:view()){
main .doors>.door:nth-child(2),.xgrid>.xcard:not(.xcard-critical):nth-child(3n+2){animation-range:entry 8% entry 43%}
main .doors>.door:nth-child(3),.xgrid>.xcard:not(.xcard-critical):nth-child(3n){animation-range:entry 16% entry 51%}
}
.xcard :is(.xcard-go,.door-go)::after{transition:transform var(--dur-2) var(--ease)}
a.xcard:hover :is(.xcard-go,.door-go)::after,a.xcard:focus-visible :is(.xcard-go,.door-go)::after{transform:translateX(.25rem)}
.btn-primary{transition:transform var(--dur-1) var(--ease)}
.btn-primary:hover{transform:translateY(-1px)}
/* Critical: no lift, no arrow nudge, no scroll-in */
a.xcard.xcard-critical:hover,a.xcard.xcard-critical:focus-visible{transform:none}
a.xcard.xcard-critical:hover .xcard-go::after,a.xcard.xcard-critical:focus-visible .xcard-go::after{transform:none}
}

/* ---- Phase 2 sample D (Scott, Nov 9, 2026, 3:10 PM PT: "I like the layout of c, but the additional colors on the main page
   background, not a fan. let's push it a bit farther"). C's layout, no topic-colour backgrounds: white or the neutral surface
   only, sections split by whitespace, thin rules and type. Topic colour lives in icons, eyebrows, featured stripes and the
   header line. DESIGN.md section 13. ---- */
/* surfaces: home, hubs and scholarships sit on white; neutral stays for "coming soon", closed and quiet surfaces */
/* section dividers: a full-bleed 1px rule above every section after the hero, then the numbered kicker */
/* full-bleed hairline between sections: a border-image outset (paint only, so no scroll overflow and no pseudo bar) */
.band+.band,.band-rule{border-top:1px solid var(--line);border-image:linear-gradient(90deg,var(--line),var(--line)) 1/1px 0 0/0 100vmax}
.band>.signature{margin-top:0}
body:is(.theme-home,:has(.hub-hero)) .band:not(.hero){padding:var(--sp-9) 0}
@media (min-width:48rem){body:is(.theme-home,:has(.hub-hero)) .band:not(.hero){padding:var(--sp-10) 0}}
.kicker-n{border-color:var(--ink);background:var(--ink);color:var(--on-color)}
.kicker{color:var(--ink)}
/* hero: a bigger, tighter display line, a deck one step down, a crisp action with an arrow */
h1.display,main .wrap:has(#schol-list) .hero-copy>h1{font-size:var(--fs-hero);letter-spacing:var(--hero-track);line-height:1}
body.theme-home h1.display{max-width:8.9em}
.hero .lede{font-size:var(--fs-deck);line-height:1.45;color:var(--neutral);max-width:36rem}
.hero-kicker{color:var(--ink)}
.btn-primary{display:inline-flex;align-items:center;gap:var(--sp-3);min-height:3rem;padding:0 var(--sp-6);border-radius:var(--r-sm);box-shadow:none;letter-spacing:.01em}
.btn-primary::after{content:"\2193";content:"\2193"/"";display:inline-block}
@media (min-width:64rem){
:is(body.theme-home .hero,.hub-hero){display:grid;grid-template-columns:minmax(0,1fr) 25rem;gap:var(--sp-9);align-items:end}
.hub-hero{grid-template-columns:minmax(0,1fr) 23rem}
main .hub-hero.schol-hero{align-items:start}main .schol-hero .hero-copy>.tags{margin-top:0}main .schol-hero>.facts{align-self:start;margin-top:0}
}
/* lead story: the one featured card, with our own title-card poster */
.xcard-lead{align-self:end;margin:var(--sp-7) 0 0;padding:var(--sp-5);gap:var(--sp-5);border-color:var(--line-strong)}
.xcard-lead .xcard-poster{width:7.5rem}
@media (min-width:64rem){.xcard-lead{margin:0}.xcard-lead .xcard-poster{width:9rem}}
.xcard-lead .xcard-title{font-size:var(--fs-lg);line-height:1.3}
.xcard-lead .xcard-text{font-size:var(--fs-sm);line-height:1.5}
.xcard-lead .xcard-poster img{border-radius:var(--r-sm)}
/* hubs: the hero now carries the lead, so the copy column fills out and the right side is never empty */
.hub-hero{padding:var(--sp-8) 0 var(--sp-9);margin:0}
.hub-hero .hub-head{margin:0 0 var(--sp-4)}
.hub-hero h1.display{font-size:clamp(2.375rem,1.4rem + 3.6vw,4rem);max-width:16ch}
main:has(.hub-hero) .wrap>h2{border-top-color:var(--ink);border-top-width:2px;padding-top:var(--sp-5)}
main:has(.hub-hero) .wrap>h2::before{background:var(--ink);border-color:var(--ink);color:var(--on-color)}
/* cards: crisp 1px border at rest (no shadow on white), an ink-led hover with lift and the topic border, arrow links */
.xcard{box-shadow:none;border-color:var(--line)}
.xcard:hover,a.xcard:focus-visible,.xcard:focus-within{box-shadow:var(--shadow-lift)}
.xcard-soon{background:var(--neutral-soft);border-color:var(--neutral-soft)}
.xcard-go,.door-go{font-weight:700;letter-spacing:.01em}
/* icons: one outline style; tiles are paper with a hairline, the glyph carries the topic colour */
.badge-ico{fill:none;stroke:currentColor;stroke-width:2.25;width:1.05em;height:1.05em}
.door .ico-tile{width:48px;height:48px}
/* signature panel and sign-up: white panels on white, told apart by a 1px rule and the featured brand stripe */
.band .signature{box-shadow:none;border-color:var(--line-strong)}
.band .card{box-shadow:none;background:var(--paper);border-color:var(--line-strong)}
.tt-home .door{background:var(--paper)}
/* header: sharper, with an ink underline for the current page; sticky with a glass blur from 48rem when supported */
header.site nav a{border-radius:0;padding:.5rem .5rem;position:relative;color:var(--neutral)}
header.site nav a:hover{background:none;color:var(--ink)}
header.site nav a[aria-current]{background:none;color:var(--ink)}
header.site nav a::after{content:"";position:absolute;left:.5rem;right:.5rem;bottom:.25rem;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left}
header.site nav a:hover::after,header.site nav a[aria-current]::after{transform:scaleX(1)}
@media (min-width:48rem){
html{scroll-padding-top:var(--head-offset)}
header.site{position:sticky;top:0;z-index:20}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){header.site{background:var(--glass);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px)}}
}
/* footer: navy, four columns on wide screens (statement, Learn, About, Follow), the legal line under a rule */
.foot-grid{display:grid;gap:var(--sp-7) var(--sp-8);grid-template-columns:1fr}
@media (min-width:48rem){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){.foot-grid{grid-template-columns:2fr 1fr 1fr 1.5fr}}
footer.site .foot-brand p{font:700 var(--fs-xl)/1.3 var(--head);letter-spacing:var(--sec-track);margin:0;max-width:24rem}
.foot-h,footer.site .follow-label{margin:0 0 var(--sp-3);font:600 var(--fs-xs)/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--on-color)}
footer.site .foot-col ul:not(.social){display:grid;gap:var(--sp-2);margin:0;padding:0;border:0}
footer.site .foot-col a{text-decoration:none}footer.site .foot-col a:hover{text-decoration:underline}
footer.site .foot-col ul:not(.social) a{display:inline-block;min-height:24px;line-height:24px}
.foot-legal{margin:var(--sp-8) 0 0;padding-top:var(--sp-5);border-top:1px solid var(--line-strong)}
/* scholarships: a proper hero (copy plus an at-a-glance panel), month heads on rules, no tinted bands */
main .wrap:has(#schol-list)>.schol-hero{max-width:none}
.schol-hero .hero-copy>h1{max-width:16ch;margin:var(--sp-3) 0 var(--sp-4)}
.facts{align-self:end;border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:var(--sp-6);background:var(--paper);margin-top:var(--sp-6)}
@media (min-width:64rem){.facts{margin-top:0}}
.facts dl{margin:0;display:grid;gap:var(--sp-4)}
.facts dl>div{padding-top:var(--sp-3);border-top:1px solid var(--line)}
.facts dt{font:600 var(--fs-xs)/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .2rem}
.facts dd{margin:0;color:var(--ink);line-height:1.4}
.facts-n{font:700 var(--fs-2xl)/1 var(--head);letter-spacing:var(--hero-track);margin-right:.25rem;vertical-align:-.1em}
.facts-go{margin:var(--sp-5) 0 0;font-weight:700}
@media (prefers-reduced-motion:no-preference){
/* hero stagger, a step longer; the lead card or facts panel arrives last */
.hero>.xcard-lead,.hero>.facts{animation:cs-up var(--dur-3) var(--ease) backwards;animation-delay:calc(var(--stagger) * 4)}
.hero-copy>*{animation-duration:500ms}
header.site nav a::after{transition:transform var(--dur-2) var(--ease)}
.btn-primary::after{transition:transform var(--dur-2) var(--ease)}
.btn-primary:hover::after{transform:translateY(3px)}
a.door:hover .ico-tile,a.door:focus-visible .ico-tile{transform:translateY(-2px) rotate(-4deg)}
.door .ico-tile{transition:transform var(--dur-2) var(--ease)}
.xcard-lead .xcard-poster img{transition:transform var(--dur-3) var(--ease)}
a.xcard-lead:hover .xcard-poster img,a.xcard-lead:focus-visible .xcard-poster img{transform:scale(1.03)}
/* Critical stays still, including the poster */
a.xcard-lead.xcard-critical:hover .xcard-poster img,a.xcard-lead.xcard-critical:focus-visible .xcard-poster img{transform:none}
}

/* ---- Phase 2 sample E (Scott, Nov 9, 2026, 4:03 to 4:05 PM PT: "so the white up top and the grey down below"; C's hero
   "A LOT"; keep the feature card, the 01 to 04 labels, D's motion and the hover colour change). DESIGN.md section 14.
   No new tokens: white is --paper, the grey is the production page surface --bg. ---- */
/* surfaces: the hero band is white full-bleed (C's .band-paper); everything below sits on the page grey */
/* home hero: C's layout, kicker removed (the h1 is now the house line), the three stepped topic tiles on the right */
body.theme-home h1.display{font-size:var(--fs-display);letter-spacing:var(--display-track);line-height:1.04;max-width:13em}
body.theme-home .hero .lede{font-size:var(--fs-lg);line-height:1.55;color:var(--muted);max-width:38rem;margin:0 0 var(--sp-6)}
@media (min-width:64rem){
}
/* the featured story: first block on the grey (home), in the hub hero (topic hubs), under the intro (Teacher Talk) */
.lead-solo>.xcard-lead{margin:0;max-width:44rem}
.lead-solo{margin:var(--sp-6) 0 var(--sp-7)}
/* buttons: one hover and focus colour shift, matching for keyboard users */
.btn:not(.btn-primary):not([disabled]):hover,.btn:not(.btn-primary):focus-visible,.signature .sig-btn:focus-visible{background:var(--navy);color:var(--on-color)}
.btn-primary:focus-visible{background:var(--navy-hover)}
/* phones: the header nav stays on one row and scrolls sideways instead of wrapping to two */
@media (max-width:47.99rem){
header.site nav{flex:1 1 100%;min-width:0;max-width:100%}
header.site nav ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:0;margin-left:calc(var(--sp-2) * -1);padding-bottom:2px}
header.site nav ul::-webkit-scrollbar{display:none}
header.site nav li{flex:none}
header.site nav a{padding:.45rem .5rem;white-space:nowrap}
}
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){main .lead-solo>.xcard-lead{animation:cs-up linear backwards;animation-timeline:view();animation-range:entry 0% entry 35%}}
.btn-primary:focus-visible{transform:translateY(-1px)}
.btn-primary:focus-visible::after{transform:translateY(3px)}
}

/* ---- Phase 2 sample E2 (Scott, Nov 9, 2026, 4:36 PM PT: "can we move the fetured artical up next to the header and somhow
   keep the three icons and have it still look appealing?"). DESIGN.md section 15. ---- */
/* home hero: copy left, the featured story right (tablet and up); the three topic icons become linked shortcuts under the button */
@media (min-width:48rem){
body.theme-home .hero{display:grid;grid-template-columns:minmax(0,1fr) 16rem;gap:var(--sp-7);align-items:center}
body.theme-home .hero>.xcard-lead{margin:0;align-self:center}
}
/* tablet: the card column is narrow, so the card shows its words without the poster */
@media (min-width:48rem) and (max-width:63.99rem){body.theme-home .hero>.xcard-lead .xcard-poster{display:none}}
@media (min-width:64rem){body.theme-home .hero{grid-template-columns:minmax(0,1fr) 25rem;gap:var(--sp-9)}}

/* ---- Phase 2 full (Scott, Nov 9, 2026, 5:19 PM PT: "yes, let's roll"; 5:20 PM PT: "the grey is just too blah... but
   mutlicolored was not good either"). DESIGN.md section 16. One new surface token, --navy-wash, replaces the grey below
   the white head on every page; one deep navy band on home. No site-wide Critical banner (v1.0.19.39). ---- */
/* surfaces: --navy-wash replaces --bg (the old grey) on the body, the bands and the Short's wrap mask (rules above) */
/* home: a faint navy dot grid behind the lower sections (CSS only; the white hero and the navy band cover it) */
body.theme-home{background-image:radial-gradient(var(--wash-dot) 1px,transparent 1.5px);background-size:22px 22px}
body.theme-home .band:not(.band-paper):not(.band-navy){--band:transparent}
:where(.band:not(.band-paper)) :is(.card,.signature){box-shadow:var(--shadow-card)}
/* the one deep navy band: Stay current, white text (17.08:1), white form */
.band-navy{--band:var(--navy);color:var(--on-color)}
.band+.band-navy,.band-navy+.band{border-top:0;border-image:none}
.band-navy :is(h2,.kicker,p,label,.small,a){color:var(--on-color)}
.band-navy .kicker-n{background:var(--paper);border-color:var(--paper);color:var(--navy)}
.band-navy :focus-visible{outline:3px solid var(--paper);outline-offset:3px}
.nl-band{max-width:44rem}
.nl-band .signup{margin:var(--sp-5) 0 var(--sp-4)}
.band-navy .signup input{border-color:var(--paper)}
.band-navy .signup button{background:var(--paper);color:var(--navy)}
.band-navy .signup+.small{padding-top:var(--sp-4);border-top:1px solid var(--on-navy-line)}
/* home hero without the topic shortcuts: copy left, featured story right, centred on each other */
body.theme-home .hero-actions{margin:0}
/* white head on pages without a hero: breadcrumb, h1 and the Checked line on white, the body on the page surface */
.page-head{background:var(--paper);box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax);margin:calc(var(--sp-8) * -1) 0 var(--sp-7);padding:var(--sp-8) 0 var(--sp-6);border-bottom:1px solid var(--line);border-image:linear-gradient(90deg,var(--line),var(--line)) 0 0 1/0 0 1px/0 100vmax}
.page-head>:last-child{margin-bottom:0}
.page-head h1{font-size:clamp(2rem,1.4rem + 2.4vw,2.75rem);letter-spacing:var(--sec-track);line-height:1.12}
.page-head .crumbs{margin-top:0}
/* outline icons in the old filled-tile slots (teacher doors, desk heads) */
.ico-tile.door-icon{display:flex;width:48px;height:48px;margin-bottom:var(--sp-3)}
.hub-head .ico-tile{width:48px;height:48px}
/* print (lessons first): no menus, banners, pagers or videos; black on white; sections kept together */
@media print{
header.site,footer.site,.skip,.crumbs,.tc-pager,.video,.signup,.tt-crosslink{display:none}
body{background:var(--paper);color:var(--ink);font-size:11.5pt;line-height:1.5}
.page-head{box-shadow:none;margin:0 0 12pt;padding:0;border:0;background:none}
main{padding:0}main .wrap{max-width:none;padding:0}
h1,h2,h3{color:var(--ink);break-after:avoid}
li,tr,.tc-facts,figure{break-inside:avoid}
a{color:var(--ink)}
.tc-facts,.xcard,.card,.note{box-shadow:none;border-color:var(--line-strong)}
h1.title-stripe{background:none}
}
/* hubs: the breadcrumb joins the white head, so the white runs unbroken from the header to the end of the hero */
main:has(>.wrap>.hub-hero){padding-top:0}
main:has(>.wrap>.hub-hero) .wrap>.crumbs{margin:0;padding:var(--sp-6) 0 0;background:var(--paper);box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax)}

/* r19 badge pills, MID-TONE (DRAFT only). build.py appends this file to styles.css only when BADGE_ICONS is on, so
   the production CSS stays byte-identical. Scott chose a mid-tone pill between the tinted tag and the solid door
   colour: white label, white currentColor icon. Same hue as each door, saturation kept, lightness raised until white
   is about 4.7:1 (AA is 4.5:1 for badge-size text). Rachel: adjust the three values here, in one place.
   r19.1: Rachel confirmed Cyber and Finance; she set AI to #A93789 (hue 317).
   Cyber #006FEA 4.71:1 (solid #0057B8 6.87:1), Finance #0F8361 4.73:1 (solid #0E7A5A 5.32:1),
   AI #A93789 5.84:1 (solid #8A2D70 7.81:1). Colours only, so the pill height is unchanged.
   Scope: only .tag pills carrying tag-mid (added by build.py to tag pills only). The homepage signature chips
   (.sig-chip, solid door colour, Scott r19) never get the class, so they cannot pick up the mid-tone. */
/* r77: the three values now live in the styles.css :root (fixed component colours). */
.tag.tag-mid.tag-cyber{background:var(--cyber-mid);color:var(--on-color)}.tag.tag-mid.tag-money{background:var(--money-mid);color:var(--on-color)}.tag.tag-mid.tag-ai{background:var(--ai-mid);color:var(--on-color)}
/* r23 social links (draft only in markup) */
.follow-label{margin:var(--sp-3) 0 var(--sp-1);font-weight:600;color:var(--navy)}
ul.social,footer.site ul.social{display:flex;flex-wrap:wrap;gap:var(--sp-2);list-style:none;padding:0;margin:var(--sp-1) 0 var(--sp-3)}
ul.social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--navy);background:var(--paper);border:1px solid var(--line)}
ul.social a:hover,ul.social a:focus-visible{color:var(--on-color);background:var(--cyber);border-color:var(--cyber)}
ul.social .soc-ico{width:20px;height:20px}
@media (max-width:24.3125rem){ul.social,footer.site ul.social{gap:.375rem}ul.social a{width:40px;height:40px}}