:root{--bg:#e4e7eb;--paper:#ffffff;--ink:#1f2a33;--muted:#55626d;--line:#cfd4da;--warn:#7a5a1e;--max:46rem;
--cyber:#0057B8;--cyber-soft:#e8f0fa;--navy:#001C3B;--cyber-on-dark:#62B5F7;--money-on-dark:#5CCB9F;--money:#0E7A5A;--money-on-grey:#0A7454;--money-soft:#eaf6f0;--neutral:#3b4a56;
/* AI door: Rachel's plum (brand/scott-v2/ai-door option A), picked by Scott. */
--ai:#8A2D70;--ai-on-grey:#8A2D70;--ai-soft:#F6E7F1;--ai-on-dark:#E9A3D3;
--neutral-soft:#e9ebee;--band:#1f2a33;
--accent:var(--neutral);--accent-ink:#ffffff;--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(--bg);color:var(--ink);font:1.0625rem/1.65 Georgia,"Iowan Old Style","Times New Roman",serif}
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:.5rem 1rem;z-index:9}
header.site{border-bottom:1px solid var(--line);background:var(--paper)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;padding-top:1rem;padding-bottom:1rem}
.brand{font:600 1.25rem/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;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:.25rem 1.1rem;list-style:none;margin:0;padding:0;font:500 .95rem/1.4 system-ui,-apple-system,"Segoe UI",sans-serif}
nav a{color:var(--muted);text-decoration:none}nav a:hover,nav a[aria-current]{color:var(--ink);text-decoration:underline}
main{padding:2.5rem 0 3rem}
h1,h2,h3{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.25;color:var(--ink)}
h1{font-size:2rem;margin:0 0 1rem}h2{font-size:1.35rem;margin:2.25rem 0 .75rem}h3{font-size:1.1rem;margin:1.5rem 0 .5rem}
.lede{font-size:1.2rem;color:var(--muted)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:1.25rem 1.4rem;margin:1.25rem 0}
.note{background:var(--soft);border-left:4px solid var(--accent);border-radius:8px;padding:.9rem 1.1rem;margin:1.25rem 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:1.1rem;color:var(--accent)}.protect ul{margin:.2rem 0 0}.protect li+li{margin-top:.3rem}
.example{border:1px dashed var(--warn);border-radius:12px;padding:1rem 1.25rem;margin:1.25rem 0;background:#fbf7ee}
.label{display:inline-block;font:600 .75rem/1 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--warn);margin-bottom:.5rem}
.grid{display:grid;gap:1rem;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:.5rem;margin:.75rem 0}
.signup input{flex:1 1 14rem;padding:.7rem .8rem;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
button,.btn{display:inline-block;padding:.7rem 1.1rem;border:0;border-radius:8px;background:var(--accent);color:var(--accent-ink);font:600 1rem/1.2 system-ui,sans-serif;text-decoration:none;cursor:pointer}
button[disabled]{opacity:.6;cursor:not-allowed}
.small{font-size:.9rem;color:var(--muted)}
table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.97rem}
th,td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:system-ui,sans-serif;font-size:.9rem;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:8px;margin:1rem 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:720px){.state-aid{min-width:44rem}}
footer.site{border-top:1px solid var(--line);background:var(--paper);padding:1.5rem 0 2rem;font-size:.92rem;color:var(--muted)}
footer.site ul{display:flex;flex-wrap:wrap;gap:.25rem 1rem;list-style:none;padding:0;margin:.5rem 0}
footer.site a{color:var(--muted)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (max-width:30rem){h1{font-size:1.65rem}body{font-size:1rem}}
.mt0{margin-top:0}.m0{margin:0}.full{flex-basis:100%}
.doors{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));margin:1.75rem 0}
.door{display:flex;flex-direction:column;gap:.4rem;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.5rem;color:var(--ink);text-decoration:none;transition:border-color .15s}
.door-kicker{font:600 .78rem/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.door-title{font:700 1.5rem/1.2 system-ui,-apple-system,"Segoe UI",sans-serif}
.door-text{color:var(--muted)}
.door-go{margin-top:auto;padding-top:.5rem;font:600 .98rem/1.3 system-ui,sans-serif;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:14px;padding:2.1rem 1.9rem 1.8rem;margin:1.75rem 0;overflow:hidden;box-shadow:0 6px 20px rgba(31,42,51,.08)}
.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:1.45rem;line-height:1.25;margin-bottom:.6rem}
.signature .sig-kicker{color:var(--neutral);margin:0 0 .55rem}
.sig-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .9rem}
.sig-chip{display:inline-block;padding:.28rem .6rem;border-radius:999px;color:#fff;font:600 .75rem/1 system-ui,sans-serif;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:.5rem 1.25rem;margin:1.2rem 0 0}
.signature .sig-btn{background:var(--cyber);color:#fff}
.signature .sig-btn:hover{background:var(--navy)}
.sig-link{color:var(--cyber);font:600 1rem/1.2 system-ui,sans-serif;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:34rem){.signature{padding:1.7rem 1.2rem 1.4rem}.signature h2{font-size:1.25rem}}
.tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tag{display:inline-block;font:600 .78rem/1 system-ui,sans-serif;padding:.35rem .6rem;border-radius:999px;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:1.2rem}.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:999px;font:500 .74rem/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--muted);white-space:nowrap;vertical-align:.08em}
.status{display:inline-block;font:600 .82rem/1.2 system-ui,sans-serif;padding:.3rem .55rem;border-radius:6px;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:.9rem;margin:0 0 1rem}.hub-head h1{margin:0}
.hub-icon{flex:none;width:48px;height:48px}
/* breadcrumbs (shared helper in build.py) */
.crumbs{margin:0 0 1rem;font:500 .9rem/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
.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}
/* 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:1rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin:1rem 0 1.5rem}.xgrid-1{grid-template-columns:1fr}
.xgrid-2{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.xgrid-row{gap:.75rem;grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width:52rem){.xgrid-row{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:22rem){.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:14px;padding:1.45rem 1.4rem 1.25rem;color:var(--ink);text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.xcard::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--ca);transition:height .18s ease}
.xcard-kicker,.door-kicker{font:600 .78rem/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ca)}
.xcard-kicker.soon{color:var(--muted)}
.xcard-title{margin:0;font:700 1.12rem/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);transition:color .18s ease}
.door .xcard-title{font-size:1.5rem}
.xcard-text{color:var(--muted)}
.xcard-date{font:500 .9rem/1.3 system-ui,sans-serif;color:var(--muted)}
.xcard-compact{gap:.3rem;padding:1.05rem 1rem .9rem;font-size:.95rem;line-height:1.4}.xcard-compact .xcard-title{font-size:1rem}
.xcard[id]{scroll-margin-top:1.25rem}.xcard:target{outline:3px solid var(--ca);outline-offset:3px}
.xcard-go,.door-go{margin-top:auto;padding-top:.5rem;font:600 .98rem/1.3 system-ui,sans-serif;color:var(--ca);text-decoration:underline;text-underline-offset:.18em}
.xcard-soon{cursor:default}
.xcard:hover,a.xcard:focus-visible,.xcard:focus-within{transform:translateY(-3px);box-shadow:0 10px 24px rgba(31,42,51,.12),0 2px 6px rgba(31,42,51,.06);border-color:var(--ca)}
.xcard:hover::before,a.xcard:focus-visible::before,.xcard:focus-within::before{height:8px}
.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}
@media (prefers-reduced-motion:reduce){.xcard,.xcard::before,.xcard-title{transition:none}.xcard:hover,a.xcard:focus-visible,.xcard:focus-within{transform:none}}
/* hub group subheads (AI hub groups; shared hub template) */
.hub-sub{margin:1.6rem 0 .1rem;font:600 .82rem/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hub-sub+.xgrid{margin-top:.6rem}
/* 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)}
.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:8px;padding:.65rem 1rem;margin:1.1rem 0 1.4rem;font-weight:600}
.ktt-jump a{color:var(--link)}
.ktt{border-radius:8px;padding:.1rem .75rem;margin:0 -.75rem;scroll-margin-top:1.25rem}
.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:.75rem 0 1.25rem}.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 .7rem;border:1px solid var(--line);border-radius:999px;font:600 .92rem/1.25 system-ui,-apple-system,"Segoe UI",sans-serif;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:1rem;margin:1.75rem 0 0}.schol-month+.small{margin:.3rem 0 0}
.schol-grid{margin-top:.6rem}
.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 .74rem/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;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 1rem 1.5rem;border-radius:18px;border:1px solid var(--line);background:var(--paper)}
@media (max-width:34rem){.bio-photo{float:none;display:block;width:8rem;margin:.5rem auto 1rem}}
/* 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:1.25rem 0 1.5rem;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:1.1rem}.door-group>p:last-child{margin-bottom:0}
.door-h{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1rem;line-height:1.3;margin:0 0 .35rem;padding-left:.6rem}
.door-h-cyber{color:var(--cyber)}
.door-h-money{color:var(--money-on-grey)}
.door-h-ai{color:var(--ai)}
@media (max-width:34rem){.door-group>p{padding-left:.85rem}.door-h{padding-left:.5rem}}
/* 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:1.1rem;margin:1.5rem 0 .5rem}
/* r18 scholarships: the Washington-only section and its "not posted yet" sub-group */
.schol-wa{margin-top:2rem;padding-top:.25rem;border-top:3px solid var(--money)}
.schol-sub{font-size:1.05rem;margin:1.25rem 0 .5rem}
/* 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}

/* 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. */
:root{--cyber-mid:#006FEA;--money-mid:#0F8361;--ai-mid:#A93789}
.tag.tag-mid.tag-cyber{background:var(--cyber-mid);color:#fff}.tag.tag-mid.tag-money{background:var(--money-mid);color:#fff}.tag.tag-mid.tag-ai{background:var(--ai-mid);color:#fff}
/* r23 social links (draft only in markup) */
.follow-label{margin:.75rem 0 .25rem;font-weight:600;color:var(--navy)}
ul.social,footer.site ul.social{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:.25rem 0 .75rem}
ul.social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--navy,#001C3B);background:#fff;border:1px solid var(--line)}
ul.social a:hover,ul.social a:focus-visible{color:#fff;background:var(--cyber,#0057B8);border-color:var(--cyber,#0057B8)}
ul.social .soc-ico{width:20px;height:20px}
@media (max-width:420px){ul.social,footer.site ul.social{gap:.375rem}ul.social a{width:40px;height:40px}}