/* valentino guides · homepage + class welcome pages (editorial revision, October 7 2026)
   Warm white paper, charcoal ink and buttons, restrained oxblood accents, Source Serif 4 headings and Source Sans 3 text
   (self-hosted, SIL Open Font License 1.1, see fonts/OFL-*.txt), illustrated class covers.
   Tokens are shared with template/guide-template.html; change both together. */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/source-serif-4-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/source-serif-4-greek.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/source-sans-3-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:200 900;font-display:swap;src:url(/fonts/source-sans-3-latin-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/source-sans-3-greek.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}

:root{--paper:#F8F5EF;--surface:#FFFDF9;--surface2:#F2EEE6;--tint:#F1E8E4;--line:#E3DCD1;--line2:#C7BDAE;--ink:#1E1C1A;--ink2:#4A4440;--ink3:#645D55;--accent:#7B2430;--on-accent:#FFFFFF;--btn:#26231F;--on-btn:#FBF8F2;--hi:#7B2430;--amber:#9C3B45;--good:#2F6A47;--bad:#A4342C;
  --c-apush:#9A4A33;--c-psych:#5C5689;--c-phys:#2E6378;--c-pre:#1F5A55;--c-sem:#46604F;--c-biz:#7E5A22;--c-mor:#7A4A5E;--c-lang:#4A5874;--c-span:#8E3F3A;
  --t-apush:#F1E3D6;--t-psych:#E8E5F1;--t-phys:#E0EBEE;--t-pre:#E2EDE4;--t-sem:#E4EADD;--t-biz:#F1E7D2;--t-mor:#F0E3E7;--t-lang:#E4E8EF;--t-span:#F3E3DF;
  --glow:#EFE3D680;--sh1:0 1px 2px #1e1c1a0a,0 6px 18px #1e1c1a0c;--sh2:0 2px 4px #1e1c1a0d,0 16px 36px #1e1c1a17}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#171615;--surface:#1F1D1B;--surface2:#262321;--tint:#2D2422;--line:#36312D;--line2:#4D4640;--ink:#F4EFE7;--ink2:#C9C0B4;--ink3:#A79E92;--accent:#E0959C;--on-accent:#1E1416;--btn:#EEE8DE;--on-btn:#1E1C1A;--hi:#E7A3A9;--amber:#C9707A;--good:#8FC9A0;--bad:#F0988F;
  --c-apush:#E9A07F;--c-psych:#BDB6EA;--c-phys:#8BC4D6;--c-pre:#8FD0BF;--c-sem:#A9C8B2;--c-biz:#E2C17A;--c-mor:#E6AEC3;--c-lang:#AEBBD8;--c-span:#E09490;
  --t-apush:#2A211C;--t-psych:#22212C;--t-phys:#1B252A;--t-pre:#18261F;--t-sem:#1D241E;--t-biz:#29241A;--t-mor:#28202A;--t-lang:#1E222B;--t-span:#2B1F1E;
  --glow:#2A201E00;--sh1:0 1px 2px #0007,0 8px 22px #0005;--sh2:0 2px 4px #0007,0 16px 36px #0006}}
:root[data-theme="dark"]{--paper:#171615;--surface:#1F1D1B;--surface2:#262321;--tint:#2D2422;--line:#36312D;--line2:#4D4640;--ink:#F4EFE7;--ink2:#C9C0B4;--ink3:#A79E92;--accent:#E0959C;--on-accent:#1E1416;--btn:#EEE8DE;--on-btn:#1E1C1A;--hi:#E7A3A9;--amber:#C9707A;--good:#8FC9A0;--bad:#F0988F;
  --c-apush:#E9A07F;--c-psych:#BDB6EA;--c-phys:#8BC4D6;--c-pre:#8FD0BF;--c-sem:#A9C8B2;--c-biz:#E2C17A;--c-mor:#E6AEC3;--c-lang:#AEBBD8;--c-span:#E09490;
  --t-apush:#2A211C;--t-psych:#22212C;--t-phys:#1B252A;--t-pre:#18261F;--t-sem:#1D241E;--t-biz:#29241A;--t-mor:#28202A;--t-lang:#1E222B;--t-span:#2B1F1E;
  --glow:#2A201E00;--sh1:0 1px 2px #0007,0 8px 22px #0005;--sh2:0 2px 4px #0007,0 16px 36px #0006}

:root{--sans:"Source Sans 3",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",sans-serif;--display:"Source Serif 4",Georgia,"Times New Roman",serif;
  --t12:12px;--t13:13px;--t15:15px;--t16:16px;--t20:20px;--t26:26px;
  --r-card:16px;--r-btn:11px;--r-chip:9px;
  --spring:cubic-bezier(.32,.72,0,1);--ease:cubic-bezier(.22,.61,.36,1);
  --gut:clamp(16px,3.4vw,36px);--maxw:1240px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(ellipse at 88% 0%,var(--glow),transparent 46%) no-repeat,var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--t16);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;min-height:100vh;padding-bottom:calc(88px + env(safe-area-inset-bottom))}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
[hidden]{display:none !important}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.skipl{position:fixed;left:12px;top:-72px;z-index:200;padding:9px 13px;border-radius:var(--r-btn);background:var(--btn);color:var(--on-btn);font-weight:600;font-size:var(--t13);transition:top .2s var(--spring)}
.skipl:focus{top:12px;outline:none}

/* ═══ bar ═══ */
.bar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);padding:max(10px,env(safe-area-inset-top)) 0 10px;transition:box-shadow .3s var(--ease)}
.bar.stuck{box-shadow:0 1px 0 0 var(--line)}
.bar .wrap{display:flex;align-items:center;gap:10px}
.brand{display:flex;align-items:center;gap:10px;min-width:0;margin-right:auto}
.brand svg{width:34px;height:34px;flex:none;display:block}
.brand b{font-family:var(--display);font-size:20px;font-weight:620;letter-spacing:-.01em;line-height:1;white-space:nowrap}
.brand small{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--ink3);margin-top:3px}
.seg{position:relative;display:flex;border:1px solid var(--line);border-radius:10px;padding:2px;isolation:isolate;flex:none;background:var(--surface)}
.seg button{position:relative;z-index:2;padding:5px 10px;border-radius:8px;font-size:var(--t12);font-weight:600;color:var(--ink3);text-transform:lowercase;transition:color .2s var(--ease)}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{color:var(--on-btn)}
.seg .thumb{position:absolute;z-index:1;top:2px;bottom:2px;left:2px;width:0;border-radius:8px;background:var(--btn);transition:left .36s var(--spring),width .36s var(--spring)}
.sbtn{display:flex;align-items:center;gap:7px;flex:none;height:34px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink2);font-size:var(--t13);font-weight:600}
@media (hover:hover){.sbtn:hover{color:var(--ink);border-color:var(--line2)}}
.kbd{font-size:11px;font-weight:600;color:var(--ink3)}
@media (max-width:559px){.kbd,.sbtn span{display:none}.brand small{display:none}}
@media (max-width:480px){.sbtn{display:none}.brand b{font-size:17px}}
@media (max-width:379px){.brand b{font-size:17px}.seg button{padding:5px 7px}}

/* ═══ section heads ═══ */
.sh{display:flex;align-items:center;gap:10px;margin:28px 0 12px}
.sh h3{margin:0;font-size:var(--t13);font-weight:750;letter-spacing:.02em;color:var(--ink);text-transform:lowercase;white-space:nowrap}
.sh::after{content:"";flex:1;height:1px;background:var(--line);order:2}
.shx{order:3;font-size:var(--t12);color:var(--ink3);text-transform:lowercase;font-variant-numeric:tabular-nums;white-space:nowrap}
.sh .rx{order:4}

/* ═══ intro ═══ */
main{padding-top:18px}
.intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;align-items:center;margin-bottom:6px}
.intro h2{margin:0;font-family:var(--display);font-size:clamp(34px,4.6vw,58px);font-weight:620;letter-spacing:-.02em;line-height:1.05}
.intro h2 em{font-style:normal;color:var(--hi)}
.intro h2 label{cursor:text}
.intro .lede{margin:12px 0 0;font-size:var(--t16);line-height:1.55;color:var(--ink2);max-width:46ch}
.find{display:flex;align-items:center;gap:10px;margin-top:18px;min-height:54px;padding:0 6px 0 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:var(--ink3);box-shadow:var(--sh1);transition:border-color .2s var(--ease)}
.find:focus-within{border-color:var(--accent)}
.find svg{flex:none}
.find input{flex:1;min-width:0;border:0;background:none;outline:none;font-family:var(--sans);font-size:17px;padding:14px 0;color:var(--ink)}
.find input::placeholder{color:var(--ink3)}
.find .kbd{margin-left:auto;padding-right:8px}
.find .clr{display:none;width:40px;height:40px;border-radius:9px;align-items:center;justify-content:center;color:var(--ink3)}
.find.has .clr{display:flex}
.find.has .kbd{display:none}
#find::-webkit-search-cancel-button,#find::-webkit-search-decoration{-webkit-appearance:none;display:none}
.hint{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:12px 2px 0;font-size:var(--t12);color:var(--ink3);text-transform:lowercase}
.eg{font:inherit;font-size:var(--t12);font-weight:600;color:var(--ink2);padding:5px 11px;border:1px solid var(--line);border-radius:var(--r-chip);background:var(--surface);text-transform:lowercase}
@media (hover:hover){.eg:hover{border-color:var(--line2);color:var(--ink)}}
.browse{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:var(--t13);font-weight:700;color:var(--accent)}
.browse:hover{text-decoration:underline;text-underline-offset:4px}
.home-art{position:relative;height:270px}
.note{position:absolute;width:62%;max-width:300px;overflow:hidden;border:6px solid var(--surface);border-radius:16px;box-shadow:0 16px 36px #0e1b3d23,0 2px 5px #0e1b3d1a}
.note .cover{border-radius:0;aspect-ratio:1.6}
.note .cover-code{display:none}
.note.b{left:4%;top:8px;transform:rotate(-11deg)}
.note.f{right:2%;top:70px;transform:rotate(8deg)}
@media (max-width:860px){.intro{grid-template-columns:1fr}.home-art{display:none}}
body.searching .intro{margin-bottom:0}
body.searching #upnext,body.searching #recent,body.searching #classes,body.searching .compat,body.searching .browse,body.searching footer{display:none}

/* ═══ search results ═══ */
#inline{display:none;max-width:760px}
body.searching #inline{display:block}
.topm{display:flex;flex-direction:column;gap:6px;position:relative;padding:16px 16px 14px 20px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line);overflow:hidden;box-shadow:var(--sh1)}
.topm::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--k,var(--accent))}
.eyebrow{display:block;font-size:var(--t12);font-weight:700;letter-spacing:.02em}
.topm .tt{font-family:var(--display);font-size:24px;font-weight:620;letter-spacing:-.012em;line-height:1.12;text-wrap:balance}
.topm.sel,.unit.sel{border-color:var(--accent)}
.tles{display:flex;align-items:baseline;gap:8px;font-size:var(--t15);font-weight:600;color:var(--ink)}
.tles .tln{flex:none;font-size:var(--t12);font-weight:700;letter-spacing:.04em;color:var(--accent);text-transform:uppercase}
.go{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;align-self:flex-start;padding:10px 16px;border-radius:var(--r-btn);background:var(--btn);color:var(--on-btn);font-size:var(--t15);font-weight:650;text-transform:lowercase}
.nores p{margin:0 0 10px;font-size:var(--t15);color:var(--ink2);text-transform:lowercase}
.nores .sl{display:block;font-size:var(--t12);color:var(--ink3);margin-bottom:6px;text-transform:lowercase}
.sugs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.reqg{font:inherit;font-size:var(--t13);font-weight:600;color:var(--accent);text-transform:lowercase;text-decoration:underline;text-underline-offset:3px}

/* ═══ unit rows (search, recent, class pages) ═══ */
.group{border-radius:var(--r-card);overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh1)}
.unit{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;text-align:left;transition:background .16s var(--ease)}
.unit + .unit{border-top:1px solid var(--line)}
@media (hover:hover){.unit:hover{background:var(--surface2)}.unit:hover .chev{transform:translateX(2px)}}
.unum{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:var(--t13);font-weight:750;font-variant-numeric:tabular-nums;color:var(--k,var(--accent));background:color-mix(in srgb,var(--k,var(--accent)) 13%,var(--surface))}
.ug{flex:none;display:grid;place-items:center}
.glyph{display:block;flex:none}
.unit .rt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.ut{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.lt{font-size:var(--t16);font-weight:650;letter-spacing:-.01em;line-height:1.3}
.ld{font-size:var(--t12);color:var(--ink3);text-transform:lowercase}
/* the first lessons of a guide, under its row on the class page (from site-topics.js) */
.ltp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;overflow-wrap:anywhere;font-size:var(--t13);line-height:1.4;color:var(--ink2)}
@media (max-width:559px){.ltp{-webkit-line-clamp:2}}
/* studied toggle: the last chip on a class-page row; kept in this browser only */
button.kind{font:inherit;font-size:var(--t12);font-weight:600;cursor:pointer;-webkit-appearance:none;appearance:none}
.kind.stud{color:var(--ink2);transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .3s var(--spring)}
.kind.stud .bxc{opacity:0}
.kind.stud.on{background:color-mix(in srgb,var(--good) 12%,var(--surface));border-color:color-mix(in srgb,var(--good) 55%,transparent);color:var(--good);font-weight:700}
.kind.stud.on svg{color:var(--good)}
.kind.stud.on .bxr{fill:var(--good);stroke:var(--good)}
.kind.stud.on .bxc{opacity:1;stroke:var(--surface)}
.kind.stud:active{transform:scale(.95)}
@media (hover:hover){.kind.stud:not(.on):hover{border-color:var(--line2);color:var(--ink)}}
.kind.shc{color:var(--ink2)}
.kind.shc svg{width:12px;height:12px}
@media (hover:hover){.kind.shc:hover{border-color:var(--line2);color:var(--ink)}}
.unit.done .unum{color:var(--good);background:color-mix(in srgb,var(--good) 13%,transparent)}
.cdone{font-size:var(--t12);font-weight:650;color:var(--good)}
.cdone[hidden]{display:none}
.new{font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--hi);text-transform:lowercase}
.kinds{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.kind{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:5px 10px;font-size:var(--t12);font-weight:600;border-radius:var(--r-chip);border:1px solid var(--line);color:var(--ink2);background:var(--surface)}
.kgrp{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.kgl{display:inline-flex;align-items:center;gap:5px;font-size:var(--t12);font-weight:650;color:var(--ink2)}
.kgl svg{flex:none;color:var(--ink3)}
.kgrp .kind{min-width:32px;justify-content:center;padding:5px 9px}
.kind.main{border-color:var(--accent);color:var(--accent)}
/* printable practice tests, quizzes and exams: bold, so they read as the thing to do next (oct 13 2026: readers skipped them) */
.kind.prac,.kgrp.prac .kind,.kgrp.prac .kgl{font-weight:750;color:var(--ink)}
.kind.prac,.kgrp.prac .kind{border-color:var(--line2)}
.kind.prac svg,.kgrp.prac .kgl svg{color:var(--accent)}
.kind svg{flex:none;color:var(--ink3)}
@media (hover:hover){.kind:hover{border-color:var(--line2);color:var(--ink)}.kind.main:hover{background:var(--btn);color:var(--on-btn)}.kind.main:hover svg{color:var(--on-accent)}}
.shr{flex:none;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--ink3);border:1px solid transparent}
@media (hover:hover){.shr:hover{border-color:var(--line);color:var(--ink)}}
.chev{flex:none;color:var(--ink3);transition:transform .24s var(--spring)}
.rx{margin-left:auto;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--ink3)}
@media (hover:hover){.rx:hover{color:var(--ink);background:var(--surface)}}
#recentlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
#recentlist .unit + .unit{border-top:0}
#recentlist .unit{border-top:1px solid var(--line)}
@media (min-width:700px){#recentlist .unit{border-top:0;border-left:1px solid var(--line)}#recentlist .unit:first-child{border-left:0}}

/* ═══ up next ═══ */
.feat{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.hero{display:flex;flex-direction:column;border-radius:var(--r-card);padding:15px 16px 16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh1);position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.hero::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--k,var(--accent))}
@media (hover:hover){.hero:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:var(--line2)}}
.hrow{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.hmeta{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
/* countdown ring on up-next cards: days left out of two weeks */
.ring{position:relative;flex:none;width:44px;height:44px;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3}
.ring .rt{stroke:var(--line)}
.ring .ra{stroke:var(--k,var(--accent));stroke-linecap:round;animation:rdraw 1s var(--spring) .2s both}
.ring b{position:relative;font-family:var(--display);font-size:18px;font-weight:620;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.ring .glyph{position:relative}
@keyframes rdraw{from{stroke-dasharray:0 200}}
.hk{font-size:var(--t12);font-weight:700;color:var(--k,var(--ink))}
.hc{font-size:var(--t12);color:var(--ink2);text-transform:lowercase;font-variant-numeric:tabular-nums}
.chip{flex:none;font-size:var(--t12);font-weight:650;padding:3px 9px;border-radius:var(--r-chip);white-space:nowrap;font-variant-numeric:tabular-nums;border:1px solid var(--line)}
.chip.due{color:var(--k,var(--hi));border-color:color-mix(in srgb,var(--k,var(--hi)) 55%,transparent)}
.htitle{display:block;font-family:var(--display);font-size:var(--t20);font-weight:620;letter-spacing:-.01em;line-height:1.15;text-wrap:balance}
.hnote{display:block;font-size:var(--t13);line-height:1.45;color:var(--ink2);margin-top:6px;flex:1}
.hero .go{margin-top:12px}
@media (max-width:760px){.feat{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 calc(var(--gut)*-1);padding:2px var(--gut) 8px;scrollbar-width:none}.feat::-webkit-scrollbar{display:none}.feat .hero{flex:0 0 min(84%,330px);scroll-snap-align:start}.hero{padding:13px 14px 14px}.htitle{font-size:18px}}
@media (max-width:760px){.cside .hero{margin-bottom:10px}}

/* ═══ class catalog ═══ */
.catalog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:1100px){.catalog{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.ccard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:19px;overflow:hidden;padding:7px 7px 14px;box-shadow:var(--sh1);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
@media (hover:hover){.ccard:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:var(--line2)}.ccard:hover .cover svg{transform:scale(1.04)}}
.cover{position:relative;overflow:hidden;border-radius:13px;aspect-ratio:1.62;background:#36584b}
.cover > svg{position:absolute;inset:0;width:100%;height:100%;display:block;transition:transform .4s var(--ease)}
.cover svg text{font-family:var(--sans)}
.cover-code{position:absolute;z-index:1;top:12px;left:14px;font-size:10.5px;font-weight:700;letter-spacing:.11em;color:#ffffffe6}
.cover-arrow{position:absolute;z-index:1;right:10px;bottom:10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#ffffff1f;border:1px solid #ffffff4d}
.cbody{display:flex;flex-direction:column;gap:3px;padding:12px 9px 0}
.ctitle{font-family:var(--display);font-size:19px;font-weight:620;letter-spacing:-.01em;line-height:1.2}
.cmeta{font-size:var(--t12);color:var(--ink3)}
.cnext{display:inline-flex;align-self:flex-start;margin-top:5px;font-size:var(--t12);font-weight:650;padding:3px 8px;border-radius:var(--r-chip);color:var(--hi);background:color-mix(in srgb,var(--hi) 10%,transparent)}
.ccard.empty .cmeta{font-style:italic}
/* warn: a class-level notice (UC Scout AP Spanish is not a Bishop Gorman course) */
.cwarn{display:block;margin-top:8px;padding:7px 10px;border-radius:var(--r-chip);border:1px solid color-mix(in srgb,var(--amber) 60%,var(--line));border-left:4px solid var(--amber);background:color-mix(in srgb,var(--amber) 12%,var(--surface));color:var(--ink);font-size:var(--t12);font-weight:650;line-height:1.4;text-wrap:pretty}
.chero .cwarn.hw{margin:14px 0 0;max-width:52ch;padding:10px 13px;font-size:var(--t15);border-left-width:5px}
.uwarn{display:block;margin-top:3px;font-size:var(--t12);font-weight:650;line-height:1.35;color:var(--hi)}
@media (max-width:760px){.ccard{padding:5px 5px 12px;border-radius:15px}.cover{border-radius:10px;aspect-ratio:1.4}.ctitle{font-size:15.5px}.cbody{padding:10px 6px 0}.cover-code{font-size:9px;left:10px;top:9px}.cover-arrow{width:24px;height:24px;right:7px;bottom:7px}}
.rise{opacity:0;transform:translateY(8px);animation:rise .5s var(--spring) forwards;animation-delay:calc(var(--i,0)*40ms)}
@keyframes rise{to{opacity:1;transform:none}}

/* ═══ class welcome page ═══ */
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:var(--t13);color:var(--ink3);margin:2px 0 14px}
.crumb a{font-weight:650;color:var(--ink2)}
.crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.chero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border-radius:24px;overflow:hidden;background:var(--t,var(--surface2));border:1px solid var(--line);box-shadow:var(--sh2);min-height:300px}
.chero[data-c="apush"]{--t:var(--t-apush)} .chero[data-c="psych"]{--t:var(--t-psych)} .chero[data-c="phys"]{--t:var(--t-phys)} .chero[data-c="pre"]{--t:var(--t-pre)}
.chero[data-c="bus"]{--t:var(--t-biz)} .chero[data-c="mor"]{--t:var(--t-mor)} .chero[data-c="lang"]{--t:var(--t-lang)} .chero[data-c="sem"]{--t:var(--t-sem)} .chero[data-c="span"]{--t:var(--t-span)}
.ccopy{padding:30px 34px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.chero h1{margin:6px 0 0;font-family:var(--display);font-size:clamp(32px,4vw,50px);font-weight:620;letter-spacing:-.018em;line-height:1.06;text-wrap:balance}
.facts{display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 0 0;padding:0;list-style:none;font-size:var(--t13);font-weight:600;color:var(--ink2)}
.facts li{display:flex;align-items:center;gap:7px}
.facts li::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--k)}
.cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.cta:empty{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:11px 18px;border-radius:var(--r-btn);background:var(--btn);color:var(--on-btn);font-size:var(--t15);font-weight:650;box-shadow:0 3px 8px #0e1b3d1c;text-transform:lowercase}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:none}
@media (hover:hover){.btn:hover{filter:brightness(1.07)}}
.chero .cover{border-radius:0;aspect-ratio:auto;min-height:100%}
.chero .cover-code{top:20px;left:22px}
.cgrid2{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:0 28px;align-items:start;margin-top:8px}
.cside .hero{margin-bottom:12px}
.cside .hero .go{align-self:stretch}
.emptyc{margin-top:22px;padding:24px 26px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh1);max-width:760px}
.emptyc h2{margin:0;font-family:var(--display);font-size:24px;font-weight:620;letter-spacing:-.012em}
.emptyc p{margin:8px 0 0;font-size:var(--t15);line-height:1.55;color:var(--ink2);max-width:60ch}
.lost{margin:30px 0;font-size:var(--t16)}
.lost a{color:var(--accent);font-weight:650;text-decoration:underline}
@media (max-width:900px){.cgrid2{grid-template-columns:1fr}.cside{margin-top:6px}}
@media (max-width:760px){.chero{grid-template-columns:1fr;border-radius:20px;min-height:0}.chero .cover{order:-1;aspect-ratio:2.1;min-height:0}.ccopy{padding:20px 20px 22px}.chero h1{font-size:32px}.btn{width:100%}}

/* ═══ compat note + footer ═══ */
.compat{display:none;border-radius:var(--r-card);margin-top:24px;background:var(--surface);border:1px solid var(--line)}
@media (max-width:760px),(hover:none){.compat{display:block}}
.compat summary{display:flex;align-items:center;gap:9px;padding:13px 14px;cursor:pointer;list-style:none;font-size:var(--t15);font-weight:600;text-transform:lowercase}
.compat summary::-webkit-details-marker{display:none}
.compat .ci{flex:none;color:var(--ink3)}
.compat summary .tw{margin-left:auto;color:var(--ink3);transition:transform .3s var(--spring)}
.compat[open] summary .tw{transform:rotate(90deg)}
.cbody2{padding:0 14px 14px;font-size:var(--t13);line-height:1.6;color:var(--ink2);text-transform:lowercase}
.cbody2 p{margin:0 0 10px} .cbody2 p:last-child{margin:0}
.cbody2 b{font-weight:650;color:var(--ink)}
.cbody2 kbd{font-size:var(--t12);font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:1px 5px;text-transform:none}
.cbody2 .tip{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
footer{margin-top:34px;padding:18px 0 6px;border-top:1px solid var(--line);font-size:var(--t12);line-height:1.6;color:var(--ink3);text-transform:lowercase}
footer a{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.upd{display:block;margin-top:6px}

/* ═══ toast ═══ */
#toast{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translate(-50%,12px);z-index:80;padding:8px 13px;border-radius:var(--r-btn);background:var(--ink);color:var(--paper);font-size:var(--t13);font-weight:600;text-transform:lowercase;opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .3s var(--spring)}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ═══ feedback + request a guide ═══ */
#fb{position:fixed;right:max(14px,env(safe-area-inset-right));z-index:30;bottom:max(14px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:flex-end;gap:10px}
#fbpill{display:flex;align-items:center;gap:7px;padding:9px 13px;border-radius:12px;font-size:var(--t13);font-weight:600;color:var(--ink2);background:var(--surface);border:1px solid var(--line);text-transform:lowercase;box-shadow:var(--sh2);transition:color .18s var(--ease),border-color .18s var(--ease),opacity .25s var(--ease)}
#fbpill svg{flex:none;color:var(--ink3)}
@media (hover:hover){#fbpill:hover{color:var(--ink);border-color:var(--line2)}}
#fb.on #fbpill{opacity:0;pointer-events:none}
#fbcard{display:none;outline:none;width:min(320px,calc(100vw - 28px));max-height:calc(100vh - 28px - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;border-radius:var(--r-card);padding:13px;background:var(--surface);border:1px solid var(--line2);box-shadow:var(--sh2)}
#fb.on #fbcard{display:block;animation:pop .28s var(--spring)}
@keyframes pop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.fbh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.fbh b{font-family:var(--display);font-size:var(--t20);font-weight:620;letter-spacing:-.01em;text-transform:lowercase}
.fbseg button{padding:4px 10px}
#fb.sent .fbseg{display:none}
#rqform{display:none}
#fb.rq #fbform{display:none}
#fb.rq:not(.sent) #rqform{display:block}
.rqnote{margin:0 0 10px;padding:8px 10px;border-radius:8px;background:var(--surface2);border:1px solid var(--line);font-size:var(--t12);line-height:1.45;color:var(--ink2)}
.rqnote b{font-weight:650;color:var(--ink)}
.rqf{display:grid;gap:6px;margin-bottom:9px}
.rqf input,.rqf select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);color:var(--ink);font-family:var(--sans);font-size:var(--t15);line-height:1.3;outline:none;appearance:none;-webkit-appearance:none}
.rqf input:focus,.rqf select:focus{border-color:var(--accent)}
.rqf input::placeholder{color:var(--ink3)}
.rqf select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:26px}
.rqf select.ph{color:var(--ink3)}
.rq2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.rqh{font-size:11px;font-weight:650;letter-spacing:.04em;text-transform:lowercase;color:var(--ink3);margin:2px 0 5px}
.rqodds{font-size:var(--t12);line-height:1.4;color:var(--ink2);margin:-3px 0 9px;min-height:1.4em}
.rqodds.no{color:var(--hi)}
.rqfiles{margin:0 0 10px;padding:9px 10px;border:1px dashed var(--line2);border-radius:8px;font-size:var(--t12);line-height:1.45;color:var(--ink2)}
.rqfiles b{display:block;font-weight:650;color:var(--ink);margin-bottom:2px}
.fbf a{color:var(--accent);font-weight:650}
#rqsend,#fbsend{flex:none;padding:8px 13px;border-radius:var(--r-btn);color:var(--on-btn);font-size:var(--t13);font-weight:650;text-transform:lowercase;background:var(--btn)}
#rqsend:disabled,#fbsend:disabled{opacity:.4;cursor:default}
.pick:disabled{opacity:.4;cursor:default}
#rqdone{display:none;padding:4px 0 2px}
#rqdone p{margin:0 0 10px;font-size:var(--t13);line-height:1.45;color:var(--ink2)}
#rqdone p b{font-weight:650;color:var(--ink)}
.rqup{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:10px 12px;border-radius:var(--r-btn);background:var(--btn);color:var(--on-btn);font-size:var(--t13);font-weight:650;text-transform:lowercase}
#rqdone small{display:block;margin-top:8px;font-size:11px;line-height:1.35;color:var(--ink3);text-transform:lowercase;text-align:center}
#fb.sent.rq #fbdone{display:none}
#fb.sent.rq #rqdone{display:block}
.fbx{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);color:var(--ink3);display:flex;align-items:center;justify-content:center}
.stars{display:flex;gap:3px;margin:0 0 10px -2px}
.stars button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:var(--ink3)}
.stars button.lit{color:var(--hi)}
.stars button.lit svg{fill:currentColor}
.picks{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.pick{font-size:var(--t12);font-weight:600;padding:6px 10px;border-radius:var(--r-chip);border:1px solid var(--line);color:var(--ink2);text-transform:lowercase}
.pick[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
#fbnote{display:none;width:100%;margin:0 0 9px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;resize:none;background:var(--surface2);color:var(--ink);font-family:var(--sans);font-size:var(--t15);line-height:1.4;outline:none}
#fbnote::placeholder{color:var(--ink3)}
#fbnote.show{display:block}
.fbf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fbf small{font-size:11px;color:var(--ink3);text-transform:lowercase;line-height:1.35}
#fbdone{display:none;text-align:center;padding:8px 0 4px;font-size:var(--t20);font-weight:760;letter-spacing:-.025em;text-transform:lowercase}
#fbdone span{display:block;font-size:var(--t12);font-weight:500;color:var(--ink3);margin-top:2px;text-wrap:balance}
#fb.sent .fbh{justify-content:flex-end}
#fb.sent #fbform{display:none}
#fb.sent #fbdone{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* status line: sending / sent are announced only (the done panel shows the words); a failure is shown in place */
.fbstat{margin:9px 0 0;font-size:var(--t12);line-height:1.45;color:var(--ink2)}
.fbstat:empty{display:none}
.fbstat.err{color:var(--bad);font-weight:600}
.fbstat.quiet{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#fbcard [role="tab"]:focus-visible,.stars button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* comfortable tap targets on phones and touch screens (44px, Apple's minimum) */
@media (max-width:719px),(pointer:coarse){
  .seg button{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
  .fbseg button{padding:0 12px}
  .fbx{width:44px;height:44px}
  .stars{gap:4px}
  .stars button{width:44px;height:44px}
}
/* narrowest phones: the 44px theme switch needs the room, so the wordmark text steps aside (the link keeps its label) */
@media (max-width:359px){.brand > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;animation:none}
  .ring .ra{animation:none}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}