/* UX2 A2/A3 — the Lessons hub and subject page. Mobile-first at 390px. Colour is never the only cue: every chip carries text; every state has a text label. Every interactive target is at least 44px tall and wide. Themes: the platform sets data-theme on / (cream default, pink, blue, dark); tokens are redefined per theme below. */ :root{--navy:#161D3D;--navy-lt:#232C55;--mint:#B9E6CD;--mint-deep:#2F6B4D;--amber:#E08A2E;--amber-lt:#F2A24A; --cream:#F6F1E4;--cream-dk:#EDE5D2;--card:#FFFDF6;--ink:#1B2140;--mut:#454C6B;--line:#161D3D22; --t-build:#8A4C0B;--t-grow:#2F6B4D;--t-launch:#6E5A0C; --b-build:#F5DDBF;--b-grow:#D5EEDD;--b-launch:#F3E8B8; --font:Poppins,"Segoe UI",system-ui,sans-serif;--max:1180px;--tap:44px} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}} html,body{background:var(--cream)} body{color:var(--ink);font-family:var(--font);min-height:100vh;line-height:1.45} ::selection{background:var(--amber-lt);color:var(--navy)} .skip{position:absolute;left:-999px;top:8px;background:var(--amber-lt);color:var(--navy);padding:.7rem 1rem;border-radius:8px;font-weight:700;z-index:99;min-height:var(--tap)} .skip:focus{left:8px} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:6px} a{color:var(--navy)}[data-theme="dark"] a{color:#E8E2D4} .wrap{max-width:var(--max);margin:0 auto;padding:0 1rem} h1{font-size:clamp(1.7rem,6vw,2.6rem);line-height:1.15;color:var(--navy);font-weight:800;letter-spacing:.01em} [data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3{color:#E8E2D4} h2{font-size:1.15rem;color:var(--navy);font-weight:800;letter-spacing:.04em;text-transform:uppercase} .mono{width:44px;height:44px;flex:none} /* ---------- navy header: main's treatment, ported verbatim from the old hub's inline styles. The header markup is byte-identical to main (the shared contract gate pins it); the publisher replaces

on the served site, but the source hub still has to lay it out. ---------- */ .header{position:sticky;top:0;background:#161D3Df2;backdrop-filter:blur(8px);border-bottom:1px solid #B9E6CD2e;z-index:20} .brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:#E8E2D4} .brand strong{letter-spacing:.05em} .brand small{display:block;color:var(--mint);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase} /* High lumen — projector / IWB: the token rule lives in each page's