/* GrowthSkool BD. Order: tokens, fonts, base, shell, components, home, inner pages, motion, responsive. */

/* ---------- tokens ---------- */
:root{--ink-900:#0b271f;--ink-800:#0f3328;--ink-700:#143e31;--ink-line:#2a5a48;--on-dark:#f2f7df;--on-dark-muted:#a8c3ad;--green:#194e3f;--lime:#c5f25c;--lime-ink:#0f2e24;--cream:#f3f6e4;--cream-2:#e7eecd;--paper:#fbfcf2;--line:#d3deb8;--text:#173a2d;--muted:#5d7464;--mark:#d0f078;
--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.22,1.18,.36,1);--pad:62px;--inset:24px;
--f-body:'Hind Siliguri','Nirmala UI','Noto Sans Bengali','Segoe UI',sans-serif;--f-head:'Anek Bangla','Hind Siliguri','Nirmala UI','Noto Sans Bengali',sans-serif;--f-lat:Montserrat,'Anek Bangla','Segoe UI','Nirmala UI',sans-serif;
interpolate-size:allow-keywords}

/* ---------- fonts (self-hosted; _headers allows same-origin fonts only) ---------- */
@font-face{font-family:'Anek Bangla';font-weight:600;font-stretch:100%;font-display:swap;src:url(/assets/fonts/anek-bangla-600-bengali.woff2) format('woff2');unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1,U+11DF0-11DF1}
@font-face{font-family:'Anek Bangla';font-weight:600;font-stretch:100%;font-display:swap;src:url(/assets/fonts/anek-bangla-600-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:'Hind Siliguri';font-weight:400;font-display:swap;src:url(/assets/fonts/hind-siliguri-400-bengali.woff2) format('woff2');unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1,U+11DF0-11DF1}
@font-face{font-family:'Hind Siliguri';font-weight:400;font-display:swap;src:url(/assets/fonts/hind-siliguri-400-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:'Hind Siliguri';font-weight:600;font-display:swap;src:url(/assets/fonts/hind-siliguri-600-bengali.woff2) format('woff2');unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1,U+11DF0-11DF1}
@font-face{font-family:'Hind Siliguri';font-weight:600;font-display:swap;src:url(/assets/fonts/hind-siliguri-600-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:Montserrat;font-weight:300 800;font-display:swap;src:url(/assets/fonts/montserrat-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}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--ink-900);color:var(--text);font:16px/1.7 var(--f-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button,summary{cursor:pointer}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.body :focus-visible,dialog :focus-visible{outline-color:#2f8a5f}
.skip-link{position:absolute;top:-80px;left:12px;background:var(--paper);color:var(--text);padding:10px 14px;border-radius:8px;z-index:99}
.skip-link:focus{top:8px}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--pad)}
h1,h2{font-family:var(--f-head);font-weight:600}
h2{font-size:clamp(30px,3.7vw,46px);line-height:1.32;letter-spacing:-.4px;margin-top:16px}
/* One emphasised word per heading: a marker on light, lime with an underline on dark. */
h1 em,h2 em{--hl-c:var(--mark);--hl-y:80%;--hl-h:34%;font-style:normal;padding:0 .12em;margin:0 -.12em;border-radius:4px;background:linear-gradient(var(--hl-c),var(--hl-c)) no-repeat 0 var(--hl-y)/var(--hl-w,100%) var(--hl-h)}
.zone em,.band em{--hl-c:var(--lime);--hl-y:90%;--hl-h:4px;color:var(--lime)}

/* ---------- shell: nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--ink-900);color:var(--on-dark);transition:background .35s,box-shadow .35s}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px;transition:height .35s var(--ease)}
.nav.scrolled{background:#0b271fd9;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 30px -18px #000}
.nav.scrolled .nav-in{height:58px}
.nav::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--lime);transform:scaleX(var(--p,0));transform-origin:left}
.brand{display:flex;align-items:center;gap:10px;font:700 24px/1 var(--f-lat);letter-spacing:-.8px}
.wordmark span{font-weight:300}
.brand sup{font:700 8px var(--f-lat);letter-spacing:1px;align-self:flex-start;margin:6px 0 0 -6px}
.brand-icon{width:36px;height:36px;flex:none;display:block}
#menu{display:flex;gap:32px;font-size:15px}
#menu a{color:#b9d3b4;position:relative;padding:6px 0;transition:color .25s}
#menu a:hover{color:var(--on-dark)}
#menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
#menu a:hover::after{transform:scaleX(1)}
.nav-end{display:flex;align-items:center;gap:10px}
.cta-btn{white-space:nowrap;border:0;background:var(--lime);color:var(--lime-ink);font:600 14px var(--f-lat);padding:10px 18px;border-radius:8px;transition:transform .25s,box-shadow .25s}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px -8px var(--lime)}
.menu-btn{display:none;place-items:center;width:40px;height:40px;padding:0;border:1.5px solid var(--ink-line);border-radius:9px;background:none}
.menu-btn i,.menu-btn i::after{display:block;width:16px;height:2px;background:var(--on-dark);transition:transform .25s,box-shadow .25s,opacity .25s}
.menu-btn i{box-shadow:0 5px 0 var(--on-dark),0 -5px 0 var(--on-dark)}
.menu-btn i::after{content:"";opacity:0}
.nav.open .menu-btn i{box-shadow:none;transform:rotate(45deg)}
.nav.open .menu-btn i::after{opacity:1;transform:rotate(90deg)}

/* ---------- shell: dark zone, light body, band, footer ---------- */
.zone{position:relative;overflow:hidden;background:var(--ink-800);color:var(--on-dark);padding-bottom:44px}
.zone::before,.band::before{content:"";position:absolute;inset:-20% -10% 0;pointer-events:none;background:radial-gradient(42% 44% at 50% 30%,#1d5c46,transparent 72%),radial-gradient(30% 36% at 4% 78%,#16483a,transparent 72%),radial-gradient(30% 36% at 98% 60%,#16483a,transparent 72%);animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(3%,-4%) scale(1.08)}}
.zone>*,.band>*{position:relative}
.body{position:relative;z-index:2;background:var(--cream);border-radius:44px;margin-top:-44px}
.sec{padding-block:92px}
.sec.alt{padding-block:0}
.sec.alt>.wrap{width:calc(100% - 2*var(--inset));max-width:calc(1280px - 2*var(--inset));padding:84px calc(var(--pad) - var(--inset));background:var(--cream-2);border-radius:36px}
.body>.sec.alt:last-child{padding-bottom:var(--inset)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:38px}
.side{color:var(--muted);font-size:15px;padding-bottom:10px}
.band{position:relative;overflow:hidden;background:var(--ink-900);color:var(--on-dark);text-align:center;padding-block:104px}
.band::before{background:radial-gradient(40% 60% at 50% 40%,#1d5c46,transparent 72%)}
.band h2{font-size:clamp(32px,4.2vw,52px);margin-top:0}
.band .btns{margin-top:30px}
.deco{position:absolute!important;top:-30px;--cw:116px}
.deco.l{left:calc(var(--pad) + 28px);transform:rotate(-12deg)}
.deco.r{right:calc(var(--pad) + 28px);transform:rotate(10deg)}
footer{background:var(--ink-900);color:var(--on-dark-muted);border-top:1px solid var(--ink-line);font-size:13.5px}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding-block:56px 38px}
footer .brand{font-size:21px;color:var(--on-dark)}
.foot-brand p{margin:14px 0 18px;font-size:14.5px}
.foot-title{font:600 12px var(--f-lat);letter-spacing:1.3px;text-transform:uppercase;color:var(--on-dark);margin-bottom:12px}
.foot nav a{display:block;padding:5px 0;font-size:14.5px;overflow-wrap:anywhere;transition:color .2s}
.foot nav a:hover{color:var(--lime)}
.social{display:flex;gap:10px}
.social a{width:40px;height:40px;border-radius:50%;border:1px solid var(--ink-line);display:grid;place-items:center;color:var(--on-dark);transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.social a:hover{background:var(--lime);border-color:var(--lime);color:var(--lime-ink);transform:translateY(-3px)}
.social svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 20px;padding-block:18px;border-top:1px solid var(--ink-line);font-size:13px}
.prose{max-width:760px}
.prose h2{font-size:26px;margin:38px 0 10px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--muted);font-size:16.5px;line-height:1.9;margin-bottom:10px}
.prose ul{margin:0 0 10px;padding-left:22px}
.prose a{color:var(--text);font-weight:600;border-bottom:2px solid var(--lime)}
.prose .notice{margin-top:34px}

/* ---------- components ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font:600 12.5px var(--f-body);letter-spacing:1px;padding:6px 15px;border-radius:99px;border:1px solid var(--line);background:var(--paper);color:var(--muted)}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:#2f8a5f}
.zone .eyebrow{border-color:var(--ink-line);background:var(--ink-700);color:var(--on-dark-muted)}
.zone .eyebrow i{background:var(--lime);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--lime)}70%,100%{box-shadow:0 0 0 8px transparent}}
.btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn,.primary,.text-link{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 22px;border-radius:10px;font-weight:600;font-size:16px;transition:transform .25s,box-shadow .25s}
.btn:hover,.primary:hover,.text-link:hover{transform:translateY(-3px)}
.btn.p{background:var(--lime);color:var(--lime-ink);box-shadow:0 10px 22px -12px var(--lime)}
.btn.s{border:1.5px solid var(--ink-line);background:var(--ink-700)}
.primary{background:var(--green);color:var(--on-dark);box-shadow:0 12px 22px -14px var(--green)}
.zone .primary{background:var(--lime);color:var(--lime-ink)}
.text-link{border:1.5px solid var(--line);background:var(--paper);margin-left:10px}
.btn svg,.go svg,.col strong svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.btn:hover svg{transform:translate(3px,-3px)}
.tags{display:flex;flex-wrap:wrap;gap:9px}
.tags span{font-size:13px;border:1px solid color-mix(in srgb,currentColor 28%,transparent);border-radius:99px;padding:6px 13px}
.pill{display:inline-block;font:600 11px var(--f-lat);letter-spacing:1.3px;background:var(--lime);color:var(--lime-ink);border-radius:99px;padding:6px 13px}
.notice{padding:14px 16px;background:var(--cream-2);border-radius:12px;font-size:14.5px}

/* Book cover, drawn in CSS. Everything scales from --cw. */
.cover{--k:calc(var(--cw)/116);width:var(--cw);height:calc(var(--cw)*1.293);border-radius:calc(10*var(--k));background:var(--cb);color:var(--ci);padding:calc(11*var(--k)) calc(10*var(--k)) calc(10*var(--k)) calc(16*var(--k));position:relative;overflow:hidden;display:flex;flex-direction:column;text-align:left;font-family:var(--f-lat);border:1px solid #ffffff24;box-shadow:0 calc(16*var(--k)) calc(26*var(--k)) calc(-16*var(--k)) rgba(8,28,20,.6),0 2px 5px rgba(8,28,20,.12);transition:transform .4s var(--ease),box-shadow .4s}
.cover::before{content:"";position:absolute;inset:0 auto 0 0;width:calc(7*var(--k));background:linear-gradient(90deg,rgba(0,0,0,.24),rgba(0,0,0,.05) 70%,rgba(255,255,255,.2))}
.cover::after{content:"";position:absolute;right:calc(-26*var(--k));top:calc(22*var(--k));width:calc(92*var(--k));height:calc(92*var(--k));border-radius:50%;background:currentColor;opacity:.07}
.c-top{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:calc(6.5*var(--k));line-height:1;letter-spacing:.18em;opacity:.78}
.c-top::after{content:"↗";font-size:calc(10*var(--k));letter-spacing:0}
.c-code{font-weight:800;font-size:calc(30*var(--k));line-height:1;letter-spacing:-.03em;margin-top:auto}
.c-code.mid{font-size:calc(23*var(--k))}
.c-code.long{font-size:calc(16.5*var(--k));letter-spacing:-.02em}
.c-sub{font-weight:500;font-size:calc(8*var(--k));line-height:1.3;opacity:.72;margin-top:calc(5*var(--k));letter-spacing:.04em}
.c-kind{font-weight:600;font-size:calc(8.5*var(--k));line-height:1.3;margin-top:calc(9*var(--k));padding-top:calc(7*var(--k));border-top:1px solid color-mix(in srgb,currentColor 32%,transparent)}
.t0{--cb:#2e8061;--ci:#eef3d8}.t1{--cb:#c4ee62;--ci:#1b2a12}.t2{--cb:#ecefd4;--ci:#2c4a35}.t3{--cb:#f1dfc3;--ci:#684820}
.t4{--cb:#d9e7f1;--ci:#2c4c6b}.t5{--cb:#e5dff2;--ci:#4b416e}.t6{--cb:#1b2016;--ci:#c5ef74}.t7{--cb:#f6d8ca;--ci:#793a27}
.float{animation:bob var(--dur,6s) ease-in-out var(--fd,0s) infinite}
@keyframes bob{50%{transform:translateY(-9px)}}
.paused .float{animation-play-state:paused}

/* ---------- home: hero (compact layout first; the arc is added at 1140px) ---------- */
.hero{container-type:inline-size;max-width:1280px;margin-inline:auto;padding:44px var(--pad) 8px;text-align:center}
.copy{max-width:640px;margin-inline:auto;position:relative;z-index:2}
.hero h1{font-size:clamp(38px,7.4vw,60px);line-height:1.28;letter-spacing:-.5px;margin-top:16px}
.hero-tag{margin-top:14px;font:600 clamp(17px,2.6vw,21px)/1.5 var(--f-head);color:var(--lime)}
.slot a{display:block;border-radius:10px}
.lead{max-width:440px;margin:14px auto 0;font-size:16.5px;line-height:1.7;color:var(--on-dark-muted)}
.hero .btns{margin-top:22px}
.note{max-width:420px;margin:14px auto 0;font-size:13.5px;line-height:1.6;color:var(--on-dark-muted)}
.arc{display:flex;justify-content:center;gap:14px;margin:38px auto 30px;--cw:clamp(84px,12.6vw,116px)}
.slot{display:none}
.slot.m{display:block;margin-top:calc(var(--o)*40px)}
.slot .cover:hover{transform:translateY(-12px) rotate(-2.5deg) scale(1.06);box-shadow:0 30px 34px -18px rgba(0,0,0,.7)}
.ticker{height:54px;background:var(--lime);color:var(--lime-ink);overflow:hidden;display:flex;align-items:center}
.track{display:flex;white-space:nowrap;font-size:15px;animation:tick 34s linear infinite}
.track span{display:inline-flex;align-items:center;gap:22px;padding-right:22px}
.track span::after{content:"✦";font-size:12px}
.ticker:hover .track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-block:44px 40px}
.stat{background:var(--ink-700);border:1px solid var(--ink-line);border-radius:14px;padding:20px 12px 18px;text-align:center;transition:transform .3s var(--ease),border-color .3s}
.stat:hover{transform:translateY(-5px);border-color:var(--lime)}
.stat b{display:block;font:600 44px/1.1 var(--f-head);letter-spacing:-1px}
.stat span{font-size:14.5px;color:var(--on-dark-muted)}

/* ---------- home: sections ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid3>div{display:flex}
.dept{position:relative;flex:1;display:flex;flex-direction:column;min-height:258px;padding:24px;border-radius:22px;background:var(--paper);border:1px solid var(--line);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.dept::before{content:"";position:absolute;inset:0;background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),#c5f25c70,transparent 65%);opacity:0;transition:opacity .35s}
.dept:hover{transform:translateY(-8px);box-shadow:0 26px 40px -28px #0b271f99;border-color:var(--lime)}
.dept:hover::before{opacity:1}
.dept>*{position:relative}
.dept-top,.dept-foot{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ico{flex:none;width:46px;height:46px;border-radius:13px;background:var(--chip);color:var(--accent);display:grid;place-items:center;transition:transform .4s var(--ease)}
.ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dept:hover .ico{transform:rotate(-8deg) scale(1.1)}
.uni-cover{flex:none;--cw:58px}
.uni-cover .cover{box-shadow:0 8px 14px -8px rgba(8,28,20,.5)}
.tag{font:600 10px var(--f-lat);letter-spacing:1.3px;color:var(--muted)}
.dept h3{font:600 23px/1.3 var(--f-lat);letter-spacing:-.4px;margin:22px 0 8px}
.dept p{flex:1;font-size:15px;line-height:1.7;color:var(--muted);margin-bottom:20px}
.status{font-size:12.5px;padding:5px 12px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.go{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .3s,transform .4s var(--ease),color .3s,border-color .3s}
.go svg{width:15px;height:15px}
.dept:hover .go{background:var(--lime);border-color:var(--lime);color:var(--lime-ink);transform:rotate(45deg)}
.dept.feat{background:var(--green);color:#f1f6dd;border-color:var(--green)}
.dept.feat p,.dept.feat .tag{color:#bcd3b6}
.dept.feat .ico{background:var(--lime);color:var(--lime-ink)}
.dept.feat .status{background:var(--lime);color:var(--lime-ink);border-color:var(--lime);font-weight:600}
.dept.feat .go{border-color:currentColor}
.dept.feat::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,#ffffff2e,transparent);transform:skewX(-18deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,55%{left:-60%}100%{left:130%}}

.why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.why>div{display:flex}
.point{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:24px;transition:transform .4s var(--ease),border-color .4s}
.point:hover{transform:translateY(-6px);border-color:var(--lime)}
.point span{font:700 13px var(--f-lat);color:var(--accent);background:var(--chip);border-radius:99px;padding:5px 11px}
.point h3{font:600 20px/1.4 var(--f-head);margin:18px 0 8px}
.point p{font-size:15px;line-height:1.75;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.para{color:var(--muted);font-size:17px;line-height:1.85;margin:20px 0 22px}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:28px 30px;box-shadow:0 30px 50px -40px #0b271f88}
.panel-top{display:flex;justify-content:space-between;font:600 11px var(--f-lat);letter-spacing:1.3px;color:var(--muted);margin-bottom:18px}
.row{display:grid;grid-template-columns:190px 1fr;gap:16px;align-items:center;padding:11px 0;font-size:14.5px}
.bar{height:12px;border-radius:99px;background:var(--cream-2);overflow:hidden}
.bar i{display:block;height:100%;width:var(--wd);border-radius:99px;background:linear-gradient(90deg,#2f8a5f,var(--lime));transform-origin:left}
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px;padding-top:18px;border-top:1px dashed var(--line);font-size:13px;color:var(--muted)}
.flow span{padding:6px 12px;border-radius:99px;background:var(--chip);color:var(--accent);font-weight:600}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cols>div{display:flex}
.col{position:relative;flex:1;display:block;border-radius:28px;padding:36px;min-height:330px;overflow:hidden;background:var(--paper);border:1px solid var(--line);transition:transform .4s var(--ease),box-shadow .4s}
.col:hover{transform:translateY(-8px);box-shadow:0 30px 44px -30px #0b271faa}
.col.bank{background:var(--green);color:#f1f6dd;border-color:var(--green)}
.col-title{font:700 36px/1.2 var(--f-lat);letter-spacing:-1px;margin:14px 0 10px}
.col p{max-width:270px;font-size:16px;line-height:1.75;margin-bottom:18px;color:var(--muted)}
.col.bank p,.col.bank .tag{color:#bcd3b6}
.col .tags{max-width:270px}
.col strong{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-size:16px;font-weight:600}
.col:hover strong svg{transform:translate(4px,-4px)}
.fan{position:absolute;right:62px;top:122px;width:116px;height:150px;--cw:116px}
.fan .cover{position:absolute;inset:0;transition:transform .9s var(--spring)}
.fan .cover:nth-child(1){transform:rotate(-13deg) translate(-46px,12px)}
.fan .cover:nth-child(2){transform:rotate(11deg) translate(50px,18px)}
.fan .cover:nth-child(3){transform:translateY(-8px)}
.col:hover .fan .cover:nth-child(1){transform:rotate(-18deg) translate(-66px,6px)}
.col:hover .fan .cover:nth-child(2){transform:rotate(16deg) translate(64px,12px)}
.col:hover .fan .cover:nth-child(3){transform:translateY(-20px) scale(1.05)}

.path{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.line{position:absolute;left:27px;right:calc((100% - 68px)/3 - 28px);top:27px;height:2px;background:var(--line)}
.line i{display:block;height:100%;background:var(--green);transform-origin:left}
.num{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font:700 16px var(--f-lat);background:var(--green);color:#f1f6dd}
.step h3{font:600 23px/1.4 var(--f-lat);margin:22px 0 6px}
.step p{font-size:15.5px;color:var(--muted);max-width:300px}

.split2{display:grid;grid-template-columns:1fr 1.6fr;gap:60px}
.about p{font-size:17px;line-height:1.85;color:var(--muted);margin-bottom:16px}
.about a,.book-info p a{color:var(--text);font-weight:600;border-bottom:2px solid var(--lime)}
.about h2{margin-top:0}
.about+.about{padding-top:0}
.about .eyebrow+h2{margin-top:16px}
details{border-bottom:1px solid var(--line)}
summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-size:18px;font-weight:600;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font:400 20px/1 var(--f-lat);transition:transform .4s var(--ease),background .3s,border-color .3s}
details[open] summary::after{transform:rotate(135deg);background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
details p{margin-bottom:22px;font-size:15.5px;line-height:1.85;color:var(--muted);max-width:620px}
details::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
details[open]::details-content{block-size:auto}

/* ---------- inner pages ---------- */
.page-head{padding-block:30px 62px}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--on-dark-muted);margin-bottom:26px}
.breadcrumbs a:hover{color:var(--lime)}
.page-head h1{font-size:clamp(34px,4.6vw,58px);line-height:1.3;letter-spacing:-.5px;margin-top:16px}
.page-head>p{max-width:660px;margin-top:16px;font-size:18px;line-height:1.8;color:var(--on-dark-muted)}
.page-head.center{text-align:center;padding-block:110px 130px}
.page-head.center>p{margin-inline:auto}
.page-head.center .primary{margin-top:28px}
.page-head .deco{top:70px}

.tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.tabs a{padding:10px 20px;border-radius:99px;border:1px solid var(--line);background:var(--paper);font-size:15px;font-weight:600;transition:border-color .25s,background .25s,color .25s}
.tabs a:hover{border-color:var(--green)}
.tabs [aria-current=page]{background:var(--green);border-color:var(--green);color:var(--on-dark)}
.layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:34px;align-items:start}
.filters{position:sticky;top:84px}
.filters h3{font:600 12px var(--f-lat);letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
#categories{display:flex;flex-direction:column;gap:4px}
#categories button{display:flex;justify-content:space-between;align-items:center;gap:8px;border:0;background:none;border-radius:10px;padding:10px 12px;font-size:14.5px;text-align:left;color:var(--muted);transition:background .2s,color .2s}
#categories button:hover{background:var(--cream-2)}
#categories button.selected{background:var(--green);color:var(--on-dark);font-weight:600}
#categories span{font:600 11px var(--f-lat);opacity:.8;white-space:nowrap}
.aside-note{border-top:1px solid var(--line);margin:22px 12px 0;padding-top:20px;font-size:13.5px}
.aside-note p{color:var(--muted);font-size:13px;line-height:1.8;margin:6px 0}
.aside-note a{font-weight:600;border-bottom:2px solid var(--lime)}
.search-row{display:flex;gap:12px}
.search{flex:1;min-width:0;display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:5px 14px;transition:border-color .2s,box-shadow .2s}
.search:focus-within{border-color:var(--green);box-shadow:0 0 0 4px #194e3f1f}
.search span{font-size:24px;line-height:1;color:var(--muted)}
.search input{flex:1;min-width:0;border:0;background:none;padding:8px 0;font-size:15px;outline:none}
select{border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:10px 12px;font-size:13.5px;color:var(--muted)}
.type-filter{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted);margin-top:14px}
.results{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;color:var(--muted);margin-block:14px}
#cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 40px -28px #0b271f99;border-color:#b9cf8f}
.card-shot{display:grid;place-items:center;height:196px;background:var(--cream-2);--cw:104px}
.card-shot .cover{transform:rotate(-5deg);transition:transform .5s var(--spring)}
.card:hover .card-shot .cover{transform:translateY(-6px) scale(1.05)}
.card-body{flex:1;display:flex;flex-direction:column;padding:18px 20px}
.kicker{font:600 11px var(--f-lat);letter-spacing:1.1px;text-transform:uppercase;color:var(--muted)}
.card h3{flex:1;font:600 17px/1.45 var(--f-lat);margin:6px 0 10px}
.meta{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--muted)}
.card-action{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:14px;padding-top:12px;font-size:12.5px;color:var(--muted)}
.card-action a{color:var(--text);font-weight:600;border-bottom:2px solid var(--lime)}
#empty{border:1px dashed var(--line);background:var(--paper);border-radius:22px;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:30px}
#empty[hidden]{display:none}
#empty p{max-width:420px;color:var(--muted);font-size:14.5px}
#empty button{border:0;background:var(--green);color:var(--on-dark);border-radius:10px;padding:10px 18px;font-weight:600}
.book-directory h2{font-size:28px;margin-bottom:22px}
.book-directory ul{columns:2;column-gap:36px;margin:0;padding-left:20px;font-size:14.5px;color:var(--muted)}
.book-directory li{margin-bottom:12px;break-inside:avoid}
.book-directory a:hover{color:var(--text);text-decoration:underline;text-underline-offset:4px}

.book{display:grid;grid-template-columns:330px minmax(0,1fr);gap:56px;align-items:start}
.book-shot{display:grid;place-items:center;background:var(--cream-2);border-radius:28px;padding-block:54px;--cw:190px}
.book-info h2,.coming-panel h2{font-size:30px;margin:0 0 14px}
.book-info p,.book-info li,.coming-panel>p{color:var(--muted);font-size:16px;line-height:1.85;margin-bottom:12px}
.book-info ul{margin:0 0 12px;padding-left:20px}
.book-info .primary{margin:12px 0 18px}
.coming-panel{background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:44px}
.coming-panel h2{margin-top:20px}
.coming-panel>p{max-width:650px}
.planned-topics{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 34px}
.planned-topics span{padding:12px 18px;border:1px solid var(--line);background:var(--cream);border-radius:12px;font-size:15px;font-weight:600}

dialog{border:1px solid var(--line);border-radius:22px;padding:38px;width:min(540px,calc(100% - 32px));max-height:85vh;background:var(--paper);color:var(--text);transition:opacity .3s,transform .3s var(--ease),overlay .3s allow-discrete,display .3s allow-discrete}
dialog[open]{opacity:1;transform:none}
@starting-style{dialog[open]{opacity:0;transform:translateY(16px) scale(.97)}}
dialog::backdrop{background:#0b271fcc;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#close{position:absolute;right:12px;top:8px;border:0;background:none;font-size:26px;line-height:1}
dialog h2{font-size:26px;line-height:1.3;margin:12px 0 10px;padding-right:10px}
dialog h3{font-size:17px;margin:14px 0 6px}
dialog p,dialog li{font-size:15px;color:var(--muted);margin-bottom:10px}
.detail-footnote{font-size:12px!important}

/* ---------- motion: every hidden start state is scoped under html.anim, which motion.js sets ---------- */
.rv{transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--base,0s) + var(--i,0)*90ms)}
.anim .rv{opacity:0;transform:translateY(30px)}
.anim .in .rv,.anim .rv.in{opacity:1;transform:none}
.w{transition:opacity .8s,transform .8s var(--ease),filter .8s;transition-delay:calc(var(--base,.1s) + var(--i)*90ms)}
.anim .w{display:inline-block;opacity:0;transform:translateY(30px) rotate(3deg);filter:blur(10px)}
.anim .in .w{opacity:1;transform:none;filter:none}
.anim h1 em,.anim h2 em{--hl-w:0%;transition:background-size .7s cubic-bezier(.6,0,.2,1) .6s}
.anim .in em{--hl-w:100%}
.anim [data-rv]:not(.in) .slot{opacity:0}
.anim .in .slot{animation:deal-s .9s var(--spring) var(--d) backwards}
@keyframes deal-s{from{opacity:0;transform:translateY(46px) rotate(var(--r)) scale(.7)}}
@keyframes deal{from{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.45)}}
.bar i,.line i{transition:transform 1.2s var(--ease);transition-delay:calc(.35s + var(--i,0)*130ms)}
.anim .bar i,.anim .line i{transform:scaleX(0)}
.anim .in .bar i,.anim .in .line i{transform:none}
.line i{transition-duration:1.6s;transition-timing-function:cubic-bezier(.6,0,.2,1)}
.num{transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .4s;transition-delay:calc(.3s + var(--i)*.5s)}
.anim .num{transform:scale(.3);opacity:0}
.anim .in .num{transform:none;opacity:1}
.anim [data-rv]:not(.in) .fan .cover{transform:none}
.fan .cover{transition-delay:calc(.3s + var(--i,0)*.1s)}
.col:hover .fan .cover{transition-delay:0s}
.anim .card{animation:rise .6s var(--ease) calc(var(--i,0)*60ms) backwards}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}

/* ---------- responsive ---------- */
@media(min-width:1140px){
 /* Arc layout: the hero is a size container and every length is a multiple of --u, so it scales as one piece. */
 .hero{padding:0}
 .hero-stage{--u:calc(100cqw/1280);position:relative;height:calc(826*var(--u))}
 .copy{position:absolute;top:calc(52*var(--u));left:0;right:0;width:calc(640*var(--u));max-width:none}
 .hero h1{font-size:calc(64*var(--u));margin-top:calc(18*var(--u))}
 .hero .lead{max-width:calc(400*var(--u));font-size:calc(16.5*var(--u));margin-top:calc(14*var(--u))}
 .hero .btns{margin-top:calc(22*var(--u))}
 .hero .btn{height:calc(50*var(--u));font-size:calc(16*var(--u));padding-inline:calc(22*var(--u))}
 .hero .note{font-size:calc(13.5*var(--u));max-width:calc(420*var(--u));margin-top:calc(14*var(--u))}
 .hero-tag{font-size:calc(21*var(--u));margin-top:calc(14*var(--u))}
 .arc{display:block;position:absolute;left:calc(62*var(--u));top:calc(96*var(--u));width:calc(1156*var(--u));height:calc(730*var(--u));margin:0;--cw:calc(116*var(--u));z-index:1}
 .slot,.slot.m{display:block;position:absolute;margin:0;left:calc(var(--c)*130*var(--u));top:calc(var(--y)*var(--u));--dx:calc((520 - var(--c)*130)*var(--u));--dy:calc((514 - var(--y))*var(--u))}
 .anim .in .slot{animation-name:deal;animation-duration:1s}
}
@media(min-width:1140px) and (hover:hover) and (pointer:fine){
 .arc .float{translate:calc(var(--px,0)*var(--depth)*1px) calc(var(--py,0)*var(--depth)*1px - var(--sy,0)*var(--depth)*.006px);transition:translate .5s var(--ease)}
}
@media(max-width:1000px){
 :root{--pad:32px;--inset:14px}
 .grid3,#cards,.why{grid-template-columns:repeat(2,minmax(0,1fr))}
 .two,.split2{grid-template-columns:1fr;gap:34px}
 .cols{grid-template-columns:1fr}
 .deco{display:none}
 .foot{grid-template-columns:1fr 1fr;gap:34px}
 .foot-brand{grid-column:1/-1}
 .layout{grid-template-columns:190px minmax(0,1fr);gap:24px}
 .book{grid-template-columns:260px minmax(0,1fr);gap:34px}
 .book-shot{--cw:150px}
 .sec{padding-block:72px}
 .sec.alt>.wrap{padding-block:64px}
}
@media(max-width:759px){
 /* Without JS the links simply wrap under the bar; with JS they sit in a panel behind the menu button. */
 .nav-in{flex-wrap:wrap;height:auto;min-height:60px;padding-block:10px}
 #menu{order:3;width:100%;flex-wrap:wrap;gap:4px 22px}
 .js .nav-in,.js .nav.scrolled .nav-in{flex-wrap:nowrap;height:60px;padding-block:0}
 .js .menu-btn{display:grid}
 .js #menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:6px var(--pad) 16px;background:var(--ink-900);border-top:1px solid var(--ink-line);box-shadow:0 24px 30px -20px #000;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .3s var(--ease),visibility .3s}
 .js .nav.open #menu{visibility:visible;opacity:1;transform:none}
 .js #menu a{padding:13px 0;border-bottom:1px solid var(--ink-line);font-size:16px}
 .js #menu a::after{display:none}
 .brand{font-size:21px}
 .brand-icon{width:32px;height:32px}
 .cta-btn{font-size:13px;padding:9px 13px}
}
@media(max-width:700px){
 :root{--pad:20px;--inset:10px}
 html{scroll-padding-top:72px}
 .body{border-radius:30px;margin-top:-30px}
 .zone{padding-bottom:30px}
 .sec{padding-block:56px}
 .sec.alt>.wrap{padding-block:48px;border-radius:26px}
 .head{display:block;margin-bottom:28px}
 .side{display:block;padding:10px 0 0}
 .hero{padding-top:34px}
 .lead{font-size:15.5px}
 .btn,.primary,.text-link{height:46px;padding:0 17px;font-size:15px}
 .arc{display:grid;grid-template-columns:repeat(3,var(--cw));gap:12px;--cw:min(27vw,112px);margin-top:30px}
 .slot.m{margin-top:calc(var(--g)*28px)}
 .ticker{height:46px}.track{font-size:14px}
 .stats{grid-template-columns:repeat(2,1fr);gap:12px;padding-block:28px 34px}
 .stat b{font-size:36px}.stat span{font-size:13.5px}
 .grid3,.why{grid-template-columns:1fr}
 .dept{min-height:0}
 .row{grid-template-columns:1fr;gap:6px}
 .col{padding:26px;min-height:0;padding-bottom:210px}
 .col-title{font-size:30px}
 .col p,.col .tags{max-width:none}
 .fan{right:auto;left:50%;top:auto;bottom:30px;margin-left:-58px}
 .path{grid-template-columns:1fr;gap:26px}
 .line{display:none}
 .band{padding-block:72px}
 .foot{padding-block:44px 30px}
 .page-head{padding-block:22px 44px}
 .page-head.center{padding-block:70px 90px}
 .page-head>p{font-size:16.5px}
 .layout{display:block}
 .filters{position:static}
 .filters h3,.aside-note{display:none}
 #categories{flex-direction:row;overflow-x:auto;gap:6px;margin-bottom:18px;padding-bottom:6px}
 #categories button{white-space:nowrap;background:var(--cream-2);gap:10px}
 .search-row{flex-wrap:wrap}
 .search{flex-basis:100%}
 #cards{gap:12px}
 .card-shot{height:170px;--cw:88px}
 .card-body{padding:14px}
 .card h3{font-size:15px}
 .book{grid-template-columns:1fr;gap:26px}
 .book-shot{padding-block:36px}
 .book-directory ul{columns:1}
 .coming-panel{padding:26px}
 .text-link{margin:10px 0 0}
 dialog{padding:28px 22px}
 /* Phones get lighter motion: no blur on heading words, and the background glow stays still. */
 .anim .w{filter:none}
 .zone::before,.band::before{animation:none}
}
@media(max-width:390px){#cards{grid-template-columns:1fr}}
/* landmark photos: hero slideshow, photo covers, university card banners */
.zone.has-show::before{display:none}
.bgshow{position:absolute!important;inset:0;overflow:hidden}
.bgshow i{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;animation:bgs 48s linear infinite}
.bgshow i span{position:absolute;right:22px;bottom:16px;font:700 11px var(--f-lat);letter-spacing:.16em;color:#ffffffb0}
.bgshow::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 42%,#0b271fe6,#0b271fb8 60%,#0b271f8c),linear-gradient(#0b271f99,#0b271f40 30%,#0b271f66 75%,#0f3328)}
@keyframes bgs{0%{opacity:0;transform:scale(1.02)}2.25%{opacity:1}12.50%{opacity:1}14.75%{opacity:0;transform:scale(1.12)}100%{opacity:0}}
/* phones get one still photo: eight large files are too much for mobile data */
@media(max-width:700px){.bgshow i{animation:none}.bgshow i:first-child{opacity:1}.bgshow i+i{display:none}}
.cover.ph{padding-top:calc(60*var(--k))}
.cover.ph .c-img{position:absolute;inset:0 0 auto 0;height:calc(72*var(--k));background-size:cover;background-position:center}
.c-img.mos,.dept-ph.mos{display:grid;gap:1px;background:var(--cb,#0b271f)}
.c-img.mos{grid-template-columns:1fr 1fr}
.c-img.mos.n3 b:first-child{grid-column:span 2}
.mos b{background-size:cover;background-position:center}
.cover.ph .c-img::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,var(--cb))}
.cover.ph::after{display:none}
.cover.ph .c-top{position:absolute;left:calc(16*var(--k));right:calc(10*var(--k));top:calc(9*var(--k));color:#fff;opacity:.95;text-shadow:0 1px 3px #0009;z-index:1}
.cover.ph .c-code,.cover.ph .c-sub,.cover.ph .c-kind{position:relative;z-index:1}
.cover.ph .c-code{font-size:calc(26*var(--k))}
.cover.ph .c-code.mid{font-size:calc(21*var(--k))}
.cover.ph .c-code.long{font-size:calc(15.5*var(--k))}
.dept.has-ph{padding-top:150px}
.dept-ph{position:absolute!important;inset:0 0 auto 0;height:132px;background-size:cover;background-position:center;transition:transform .8s var(--ease)}
.dept-ph.mos{grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;background:var(--paper)}
.dept-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(#0b271f14 40%,#0b271f73)}
.dept.has-ph:hover .dept-ph{transform:scale(1.06)}
.dept.has-ph .uni-cover{margin-top:-58px;--cw:64px}
.dept.has-ph h3{margin-top:14px}
.why.pitch{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.why.pitch{grid-template-columns:1fr}}
.band-sub{margin-top:14px;font:600 clamp(17px,2.2vw,21px)/1.5 var(--f-head);color:var(--lime)}
.band h2{font-size:clamp(28px,3.6vw,44px)}
/* account menu in the header */
/* the FAQ styles every <details>/<summary> (bottom rule, padding, a round + sign); none of that belongs here */
.acct{position:relative;border:0}
.acct summary{width:42px;height:42px;padding:0;gap:0;justify-content:center;align-content:center;border-radius:50%;display:grid;place-items:center;cursor:pointer;list-style:none;background:var(--lime);color:var(--lime-ink);transition:transform .25s,box-shadow .25s}
.acct summary::after{content:none}
.acct summary:hover,.acct[open] summary{transform:translateY(-1px);box-shadow:0 0 0 4px #c5f25c40}
.acct svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.acct-menu{position:absolute;right:0;top:calc(100% + 12px);z-index:60;width:min(248px,84vw);background:var(--paper);color:var(--text);border:1px solid var(--line);border-radius:16px;padding:6px;box-shadow:0 22px 38px -18px #0b271fcc}
.acct-who{padding:10px 12px 11px;border-bottom:1px solid var(--line);margin-bottom:6px;display:grid;gap:1px}
.acct-who b{font:600 15.5px/1.4 var(--f-head)}
.acct-who span{font-size:12.5px;line-height:1.5;color:var(--muted);word-break:break-all}
.acct-menu a,.acct-menu button{display:flex;align-items:center;gap:11px;width:100%;height:42px;padding:0 12px;border-radius:10px;border:0;background:transparent;font:600 14.5px/1 var(--f-body);color:var(--text);text-align:left}
.acct-menu svg{width:18px;height:18px;color:var(--muted)}
.acct-menu a:hover,.acct-menu button:hover{background:var(--cream-2)}
.acct-menu form{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.acct-menu button,.acct-menu button svg{color:#a3271c}
/* theme: --accent is brand green used as text, --chip the pale pill behind it. Night swaps the light surfaces only;
   the hero, bands and footer are dark already. */
:root{--accent:var(--green);--chip:#e1ebc3}
html[data-theme=dark]{color-scheme:dark;--cream:#0e1512;--cream-2:#17211b;--paper:#141d18;--line:#2a3a31;--text:#e6eedc;--muted:#9fb3a3;--mark:#44611f;--green:#1f6a52;--accent:#c5f25c;--chip:#22332a}
html[data-theme=dark] body{background:var(--cream)}
.theme-btn{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--ink-line);background:none;color:var(--on-dark);transition:transform .3s,border-color .3s}
.theme-btn:hover{transform:rotate(18deg);border-color:var(--lime)}
.theme-btn svg{grid-area:1/1;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .moon,html[data-theme=dark] .theme-btn .sun{display:none}
html[data-theme=dark] .theme-btn .moon{display:block}
/* signed in: the account menu replaces the hamburger */
.in .menu-btn{display:none!important}
/* very narrow phones */
@media(max-width:400px){.nav-in{gap:8px}.nav-end{gap:6px}.brand{font-size:18px;gap:7px;letter-spacing:-.6px}.brand-icon{width:28px;height:28px}.brand sup{display:none}.theme-btn,.menu-btn,.acct summary{width:36px;height:36px}.cta-btn{font-size:12.5px;padding:8px 11px}}
@media(max-width:330px){.brand{font-size:16px}.wordmark span{display:none}}
.card-action .own{color:var(--accent);font-weight:600}
/* shop: price on cards, buy row on a book page, floating basket */
.card-body .meta{margin-bottom:14px}.card-action{margin-top:auto}
.card-buy{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.card-buy>*{min-height:42px;border-radius:11px;font:600 14px var(--f-body);display:grid;place-items:center;text-align:center;cursor:pointer}
.card-go{background:var(--green);color:#f1f6dd}
.card-add{border:1.5px solid var(--accent);background:none;color:var(--accent)}
.signed footer nav,.signed .band,.signed .foot-bottom span+span{display:none}
.signed .foot{display:flex;justify-content:center;text-align:center}.signed .foot-brand{display:flex;flex-direction:column;align-items:center}.signed .social,.signed .foot-bottom{justify-content:center}
.price-tag{font:700 15px var(--f-lat);color:var(--accent)}
.buy-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 14px}
.btn-add{min-height:48px;padding:0 18px;border-radius:12px;border:1.5px solid var(--accent);background:none;color:var(--accent);font:600 15px var(--f-body)}
.basket{position:fixed;z-index:45;left:50%;bottom:16px;transform:translateX(-50%);max-width:92vw;white-space:nowrap;padding:13px 20px;border-radius:99px;background:var(--lime);color:var(--lime-ink);font:600 15px var(--f-body);box-shadow:0 14px 28px -12px #0b271fcc}
.buy-top{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;margin-top:20px}
.buy-top:empty{display:none}
.buy-price{font:700 26px var(--f-lat);color:var(--lime);margin-right:4px}
.buy-top .btn-add{border-color:var(--ink-line);color:var(--on-dark)}
.buy-own{font:600 14px var(--f-body);color:var(--on-dark-muted)}
/* packs */
.pack-hint{flex-basis:100%;font:500 14px/1.6 var(--f-body);color:var(--on-dark);text-decoration:underline;text-underline-offset:3px}
.buy-row+.pack-hint{display:block;color:var(--accent);margin:-4px 0 14px}
.packs-h{font-size:26px;margin:34px 0 8px}.packs-h:first-child{margin-top:0}
.packs-tier,.packs-wait{color:var(--muted);margin-bottom:14px;line-height:1.7}
.pack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.pack-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:6px}
.pack-card.big{border-color:var(--accent);background:var(--chip)}
.pack-card h3{font:600 20px/1.35 var(--f-head)}
.pack-n,.pack-own{font-size:14px;color:var(--muted)}
.pack-price b{font:700 26px var(--f-lat)}.pack-price s{color:var(--muted)}.pack-price i{font:600 13px var(--f-body);font-style:normal;color:var(--accent)}
.pack-card details{border:0;font-size:14px;margin:2px 0 8px}
.pack-card summary{padding:6px 0;font-size:14px;font-weight:600;justify-content:flex-start;gap:8px;color:var(--accent)}
.pack-card summary::after{content:"+";width:auto;height:auto;border:0;font-size:16px;background:none!important;color:inherit!important;transform:none!important}
.pack-card ul{padding-left:18px;color:var(--muted);line-height:1.7}
.pack-card .buy-row{margin:auto 0 0}
.btn.s.pk{border-color:var(--lime);color:var(--lime)}
.pack-row{margin-bottom:18px}
.tabs .tab-lib{margin-left:auto;background:var(--green);border-color:var(--green);color:#f1f6dd}
.tabs .tab-pack{background:var(--chip);border-color:var(--accent);color:var(--accent)}
#side-packs{display:grid;gap:6px;margin-top:22px}
#side-packs a{display:flex;justify-content:space-between;gap:8px;padding:9px 12px;border-radius:12px;background:var(--chip);font-size:14px;font-weight:600}
#side-packs span{color:var(--accent)}
@media(max-width:700px){#side-packs{display:none}}
.pack-push{font-weight:600;margin-bottom:10px}
.pack-card.aim{outline:3px solid var(--accent)}
.pack-row-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.pack-row-h b{font:600 18px var(--f-head)}
.pack-row-h a{font:600 13.5px var(--f-body);color:var(--accent);white-space:nowrap}
.pack-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
.pack-mini{flex:0 0 210px;scroll-snap-align:start;display:flex;flex-direction:column;gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px}
.pack-mini.big{background:var(--chip);border-color:var(--accent)}
.pack-mini b{font:600 15.5px/1.35 var(--f-head)}
.pack-mini small{font-size:12.5px;color:var(--muted)}
.pack-mini span{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px}
.pack-mini em{font:700 19px var(--f-lat);font-style:normal;margin-right:auto}
.pack-mini a,.pack-mini button{min-height:36px;padding:0 12px;border-radius:10px;font:600 13px var(--f-body);display:inline-flex;align-items:center}
.pack-mini a{background:var(--green);color:#f1f6dd}
.pack-mini button{border:1px solid var(--accent);background:none;color:var(--accent)}
.pack-mini i{font:600 13px var(--f-body);font-style:normal;color:var(--accent)}
.basket-n{min-width:20px;height:20px;padding:0 6px;border-radius:99px;display:inline-grid;place-items:center;background:var(--lime);color:var(--lime-ink);font:700 11.5px var(--f-lat);margin-left:auto}