:root{--sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--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 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:.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:var(--sans);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}
.doors-pair{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}@media (max-width:34rem){.doors-pair{grid-template-columns:1fr}}
.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}
/* 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: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)}
/* 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: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}
/* r26 video embed (click-to-load facade; see build.py video_embed) */
.video{margin:.75rem 0 1.25rem}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;background:#001C3B;border-radius:.5rem;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:.75rem auto 1.25rem}
.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 .65rem;border-radius:999px;background:var(--ink);color:#fff;font:600 .85rem/1.6 var(--sans)}
@media (min-width:40rem){
.video-short{float:right;width:19rem;margin:0;padding:.4rem 0 1rem 1.5rem;background:var(--bg)}
.video-short~blockquote,.video-short~pre{display:flow-root}
.video-short~hr{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 1.5rem 1rem 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 */
@media (min-width:40rem) and (max-width:45.99rem){
.video-short.video-series{float:none;width:auto;margin:.75rem auto 1.25rem;padding:0;background:none}
}
/* 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:.55rem;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:1rem}
.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:.5rem;background:#001C3B}
/* 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:3px}

/* 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}}