:root{
--ink:#1B1E4B; --paper:#F1F0FB; --highlighter:#FFD84D; --coral:#FF6B63;
--mint:#2FBF8F; --slate:#686C92; --card:#FFFFFF; --border:#DFDDF2; --radius:14px;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Inter',sans-serif;background:var(--paper);color:var(--ink);}
h1,h2,h3{font-family:'Fraunces',serif;margin:0;}
button{font-family:inherit;cursor:pointer;border:none;transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, opacity .15s ease;}
a{color:inherit;text-decoration:none;transition:color .15s ease;}
/* ---------- TOP NAV ---------- */
.topbar{background:linear-gradient(90deg,#1E2257 0%,#2C2A73 100%);padding:16px 40px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;position:sticky;top:0;z-index:30;box-shadow:0 6px 24px rgba(27,30,75,.18);}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{width:32px;height:32px;border-radius:9px;background:var(--highlighter);display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:700;color:var(--ink);}
.brand-name{font-family:'Fraunces',serif;font-weight:600;font-size:18px;color:#fff;}
.top-nav{display:flex;gap:6px;position:relative;background:rgba(255,255,255,0.14);padding:5px;border-radius:11px;}
.nav-pill{position:absolute;top:5px;height:calc(100% - 10px);background:rgba(245,217,73,0.15);border-radius:8px;transition:left .24s cubic-bezier(0.4,0,0.2,1), width .24s cubic-bezier(0.4,0,0.2,1);z-index:0;}
.top-nav button{position:relative;z-index:1;padding:9px 16px;border-radius:8px;color:#C9CAE0;font-size:14px;font-weight:600;background:none;transition:color .2s ease;}
.top-nav button.active{color:var(--highlighter);}
.top-nav button:hover:not(.active){background:rgba(255,255,255,0.06);}
.main{max-width:1100px;margin:0 auto;padding:36px 40px 80px;}
/* crossfade is the default transition for every page */
.view{display:none;opacity:0;transition:opacity .35s ease;}
.view.active{display:block;}
.view.active.show{opacity:1;}
/* Contact and Unit pages keep a slide+scale transition instead of a pure crossfade —
note Topic is deliberately NOT included here, so opening a topic still crossfades */
#view-contact, #view-unit{transform:translateY(5px) scale(0.994);transition:opacity .4s cubic-bezier(0.16, 1, 0.3, 1), transform .4s cubic-bezier(0.16, 1, 0.3, 1);}
#view-contact.active.show, #view-unit.active.show{transform:translateY(0) scale(1);}
.page-head{margin-bottom:26px;}
.page-head h1{font-size:28px;}
.page-head p{color:var(--slate);margin-top:4px;font-size:14px;}
.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--slate);font-size:13px;font-weight:600;margin-bottom:18px;background:none;padding:0;}
.back-link:hover{color:var(--ink);}
/* ---------- directory cards (subjects / units) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;}
.dir-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px;cursor:pointer;transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;}
.dir-card:hover{border-color:var(--highlighter);transform:translateY(-3px);box-shadow:0 10px 22px rgba(25,27,58,0.07);}
.dir-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:700;font-size:20px;color:var(--ink);margin-bottom:14px;}
.dir-name{font-weight:600;font-size:17px;margin-bottom:4px;}
.dir-meta{color:var(--slate);font-size:13px;margin-bottom:16px;}
.card-btn{font-size:12px;font-weight:600;color:var(--ink);background:var(--paper);padding:7px 12px;border-radius:7px;border:1px solid var(--border);}
.card-btn:hover{background:var(--highlighter);}
.dir-card{display:flex;flex-direction:column;min-height:180px;}
.dir-card .card-btn{margin-top:auto;align-self:flex-start;}
.subject-header{display:flex;align-items:center;gap:16px;margin-bottom:26px;}
/* ---------- topic list ---------- */
.search-row{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;}
.search-row input{flex:1;min-width:180px;padding:11px 14px;border:1.5px solid var(--border);border-radius:9px;font-size:14px;}
.note-row{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;border:1px solid var(--border);border-radius:11px;margin-bottom:10px;background:#fff;cursor:pointer;transition:border-color .15s ease, transform .15s ease;}
.note-row:hover{transform:translateX(3px);}
.note-row:hover{border-color:var(--highlighter);}
.note-title{font-weight:600;font-size:15px;}
.note-tag{font-size:13px;color:var(--slate);margin-top:2px;}
.tag-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;}
.chevron{color:var(--slate);font-size:14px;}
/* ---------- reader ---------- */
.reader-body{max-width:100%;font-size:17px;line-height:1.8;color:var(--ink);background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:30px 34px;margin-bottom:26px;}
.reader-body h1{font-family:'Fraunces',serif;font-size:26px;margin:0 0 14px;}
.reader-body h2{font-family:'Fraunces',serif;font-size:21px;margin:22px 0 12px;}
.reader-body h3{font-family:'Fraunces',serif;font-size:18px;margin:18px 0 10px;}
.reader-body img{max-width:100%;border-radius:10px;display:block;margin:10px auto;}
.reader-body strong{font-weight:700;}
.reader-body .katex{font-size:1.05em;}
/* line-highlight classes — apply to a whole ,
, or heading to highlight
the entire line, not just selected text. Pick whichever color fits. */
.line-highlight{background:#f7f1ca;padding:4px 10px;border-radius:6px;}
.line-highlight-green{background:#b7e3ce;padding:4px 10px;border-radius:6px;}
.line-highlight-light-green{background:#e0f7ec;padding:4px 10px;border-radius:6px;}
.line-highlight-coral{background:#FFD9D0;padding:4px 10px;border-radius:6px;}
.line-highlight-pink{background:#ffbced;padding:4px 10px;border-radius:6px;}
.line-highlight-light-pink{background:#ffeafe;padding:4px 10px;border-radius:6px;}
.line-highlight-blue{background:#bbd2ed;padding:4px 10px;border-radius:6px;}
.line-highlight-light-blue{background:#dceeff;padding:4px 10px;border-radius:6px;}
.line-highlight-grey{background:#dedede;padding:4px 10px;border-radius:6px;}
.line-highlight-light-grey{background:#f1f1f1;padding:4px 10px;border-radius:6px;}
.reader-body p{margin:0 0 16px;}
.source-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:5px 10px;border-radius:20px;margin-bottom:14px;background:#EAFBF3;color:var(--mint);}
/* ---------- resources page ---------- */
.resource-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px;}
.resource-card h3{font-size:15px;margin-bottom:6px;}
.resource-card p{font-size:13px;color:var(--slate);line-height:1.5;margin:0 0 14px;}
.resource-link{font-size:12px;font-weight:600;color:var(--coral);}
.resource-link:hover{text-decoration:underline;}
/* ---------- contact page ---------- */
.contact-card{max-width:520px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:30px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:12px;font-weight:600;color:var(--slate);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em;}
.field input, .field textarea{width:100%;padding:11px 13px;border:1.5px solid var(--border);border-radius:9px;font-size:14px;font-family:'Inter',sans-serif;background:#FBFAFF;}
.field textarea{min-height:120px;resize:vertical;}
.field input:focus, .field textarea:focus{outline:2px solid var(--highlighter);border-color:transparent;}
.btn-dark{background:var(--ink);color:#fff;padding:12px 22px;border-radius:9px;font-weight:600;font-size:14px;}
.empty-state{text-align:center;padding:60px 20px;color:var(--slate);}
.empty-state .em-icon{font-size:32px;margin-bottom:10px;}
.toast{position:fixed;bottom:26px;right:26px;background:var(--ink);color:#fff;padding:13px 20px;border-radius:10px;font-size:13px;font-weight:600;box-shadow:0 10px 24px rgba(0,0,0,0.2);opacity:0;transform:translateY(8px);transition:all .25s;pointer-events:none;z-index:50;}
.toast.show{opacity:1;transform:translateY(0);}
.footer-credit{text-align:center;font-size:14px;color:var(--slate);padding:30px 0 10px;}
.footer-credit a{color:var(--coral);font-weight:600;}
/* ---------- blog ---------- */
.blog-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;}
.blog-card-img{width:100%;height:160px;object-fit:cover;display:block;background:var(--paper);}
.blog-card-body{padding:22px;}
.blog-card:hover{border-color:var(--highlighter);transform:translateY(-3px);box-shadow:0 10px 22px rgba(25,27,58,0.07);}
.blog-date{font-size:11px;font-weight:700;color:var(--coral);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;}
.blog-card h3{font-size:17px;margin-bottom:8px;}
.blog-excerpt{font-size:13px;color:var(--slate);line-height:1.6;margin:0;}
.blog-post-hero{width:100%;max-width:680px;max-height:340px;object-fit:cover;border-radius:var(--radius);display:none;margin:0 auto 24px;}
.blog-post-body{max-width:680px;font-size:16px;line-height:1.8;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:30px 34px;margin:0 auto;}
.blog-post-body p{margin:0 0 16px;}
.blog-post-body img{max-width:100%;border-radius:10px;display:block;margin:10px auto;}
/* ---------- email signup ---------- */
.signup-card{background:var(--ink);border-radius:var(--radius);padding:26px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.signup-card h3{color:#fff;font-size:17px;margin-bottom:4px;}
.signup-card p{color:#B9BADA;font-size:13px;margin:0;}
.signup-form{display:flex;gap:10px;flex-wrap:wrap;}
.signup-form input{padding:11px 14px;border-radius:9px;border:2px solid #D5D2E8;background:var(--paper);color:var(--ink);font-size:14px;min-width:220px;}
.signup-form input:focus{outline:2px solid var(--highlighter);}
.signup-btn{background:var(--highlighter);color:var(--ink);padding:11px 20px;border-radius:9px;font-weight:700;font-size:13px;white-space:nowrap;}
/* ---------- first-visit modal ---------- */
.modal-overlay{display:flex;position:fixed;inset:0;background:rgba(25,27,58,0.55);z-index:100;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease, visibility .3s ease;}
.modal-overlay.show{opacity:1;visibility:visible;pointer-events:auto;}
.modal-card{background:#fff;border-radius:18px;padding:32px;width:420px;max-width:90vw;box-shadow:0 30px 60px rgba(0,0,0,0.3);text-align:center;}
.modal-card .brand-mark{margin:0 auto 16px;}
.modal-card h3{font-size:20px;margin-bottom:8px;}
.modal-card p{font-size:13px;color:var(--slate);line-height:1.5;margin:0 0 20px;}
.modal-card .signup-form{justify-content:center;}
.modal-card input{flex:1;min-width:0;}
.modal-skip{background:none;color:var(--slate);font-size:12px;font-weight:600;margin-top:14px;text-decoration:underline;}
/* icon + text callout rows, e.g. mnemonics, tips, warnings */
.info-row{display:flex;align-items:center;gap:12px;background:var(--paper);border-radius:10px;padding:14px 16px;margin:14px 0;}
.info-row svg{flex-shrink:0;color:var(--ink);}
.info-row span{font-family:'Fraunces',serif;}
/* tables inside topic content */
.reader-body table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px;}
.reader-body th{background:var(--paper);text-align:left;padding:10px 14px;font-weight:600;border-bottom:2px solid var(--border);}
.reader-body td{padding:10px 14px;border-bottom:1px solid var(--border);}
.reader-body tr:last-child td{border-bottom:none;}
/* scales the whole site down slightly by default, so it feels less cramped */
body{zoom:0.9;}
/* nested sub-bullets — hollow circle style, for indented examples/sub-points */
.reader-body ul ul{list-style-type:circle;margin-top:4px;}
.info-row {
display: flex;
align-items: flex-start; /* Aligns items to the top line */
/* align-items: baseline; optional: aligns icon baseline with font baseline */
}
.info-row svg {
margin-top: 2px; /* Fine-tune vertical position relative to text height */
}
/* independent dot color, separate from subject/card colors — change this anytime */
:root{ --topic-dot-color: #FF6F59; }
/* print-only container, used by the PDF download buttons */
.print-only{display:none;}
@media print{
body{zoom:1 !important;}
body > *:not(.print-only){display:none !important;}
.print-only{display:block !important; padding:20px;}
.print-only h1{font-size:22px;margin-bottom:10px;}
.print-only h2{font-size:18px;margin-top:20px;}
.print-only h3{font-size:15px;margin-top:14px;}
.print-only{position:relative;}
.print-only::before{
content:"Recall MYP \00b7 TheIBGuide";
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%) rotate(-30deg);
font-family:'Fraunces',serif;
font-size:52px;
font-weight:700;
color:rgba(25,27,58,0.08);
white-space:nowrap;
pointer-events:none;
z-index:1;
}
}
/* PDF download buttons — distinct fill color, not blending into the card background */
.pdf-download-btn{background:var(--coral);color:#fff;font-weight:600;font-size:13px;padding:9px 16px;border-radius:8px;flex-shrink:0;}
.pdf-download-btn:hover{opacity:0.9;}
/* pushes the subject-page PDF button to the right side of the header row */
#view-subject .subject-header{display:flex;align-items:center;justify-content:space-between;}
/* fix: keep icon+title together on the left, only push the PDF button right */
#view-subject .subject-header{display:flex;align-items:center;justify-content:flex-start;}
#view-subject .subject-header .pdf-download-btn{margin-left:auto;}
/* download buttons: yellow instead of coral */
.pdf-download-btn{background:var(--highlighter);color:var(--ink);}
/* reset subject header back to its original tight spacing */
#view-subject .subject-header{gap:16px !important;margin-bottom:26px !important;}
#view-subject .subject-header .dir-icon{margin-bottom:0 !important;}
#view-subject .subject-header h1{margin:0 !important;}
#view-subject .subject-header p{margin:2px 0 0 !important;}
/* center the unit page title/subtitle/download button, like the topic page */
#view-unit .page-head{text-align:center;}
#view-unit .page-head .pdf-download-btn{margin-top:12px;}
.image-source {
font-size: 0.8em;
color: #888;
margin-top: -8px;
margin-bottom: 12px; text-align: center;
}
/* ---------- auth ---------- */
body.auth-loading .topbar, body.auth-loading .main,
body.logged-out .topbar, body.logged-out .main{display:none;}
.auth-gate{display:none;position:fixed;inset:0;background:var(--paper);z-index:200;align-items:center;justify-content:center;padding:20px;}
body.auth-loading .auth-gate, body.logged-out .auth-gate{display:flex;}
body.auth-loading .auth-card{visibility:hidden;}
.auth-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:32px;width:400px;max-width:100%;text-align:center;box-shadow:0 20px 50px rgba(25,27,58,.12);}
.auth-card .brand-mark{margin:0 auto 12px;width:40px;height:40px;font-size:18px;}
.auth-card h2{font-size:22px;margin-bottom:4px;}
.auth-card>p{color:var(--slate);font-size:13px;margin:0 0 18px;}
.auth-card .field{text-align:left;}
.auth-tabs{display:flex;gap:6px;background:var(--paper);padding:4px;border-radius:10px;margin-bottom:18px;}
.auth-tabs button{flex:1;padding:9px;border-radius:7px;background:none;font-weight:600;font-size:13px;color:var(--slate);}
.auth-tabs button.active{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08);}
.auth-submit{width:100%;}
.auth-google{width:100%;margin-top:10px;padding:11px;border:1.5px solid var(--border);background:#fff;border-radius:9px;font-weight:600;font-size:14px;color:var(--ink);}
.auth-google:hover{background:var(--paper);}
.auth-msg{font-size:13px;margin:14px 0 0;min-height:18px;color:var(--coral);}
.auth-msg.ok{color:var(--mint);}
.logout-btn{background:rgba(255,255,255,.14);color:#C9CAE0;padding:9px 14px;border-radius:9px;font-size:13px;font-weight:600;}
.logout-btn:hover{color:var(--highlighter);}
.reader-body p:empty{display:none;}
/* Biology Unit 6 highlight colours (were missing) */
.line-highlight-orange{background:#ffd9b0;padding:4px 10px;border-radius:6px;}
.line-highlight-light-orange{background:#ffecd6;padding:4px 10px;border-radius:6px;}
/* ---------- sign-in screen gradient (sign-in only) ---------- */
.auth-gate{overflow:hidden;}
.auth-gate::before{
content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
background:
radial-gradient(40% 40% at 15% 20%, rgba(245,217,73,.45) 0%, transparent 70%),
radial-gradient(38% 38% at 85% 15%, rgba(255,111,89,.32) 0%, transparent 70%),
radial-gradient(45% 45% at 80% 85%, rgba(63,190,135,.30) 0%, transparent 70%),
radial-gradient(42% 42% at 10% 90%, rgba(120,110,230,.32) 0%, transparent 70%),
var(--paper);
filter:blur(30px);
animation:bgDrift 22s ease-in-out infinite alternate;
}
.auth-card{position:relative;z-index:1;}
@keyframes bgDrift{
0% {transform:translate3d(0,0,0) scale(1);}
50% {transform:translate3d(-3%,2%,0) scale(1.06);}
100%{transform:translate3d(3%,-2%,0) scale(1.03);}
}
@media (prefers-reduced-motion:reduce){ .auth-gate::before{animation:none;} }
/* keep nav centred on small screens too */
@media (max-width:760px){
.topbar{grid-template-columns:1fr auto;gap:10px 8px;padding:12px 16px;}
.top-nav{grid-column:1 / -1;grid-row:2;justify-self:center;max-width:100%;overflow-x:auto;}
}
/* ---------- site background: soft mesh gradient ---------- */
body{background:var(--paper);}
body::before{
content:"";position:fixed;inset:-15%;z-index:-1;pointer-events:none;
background:
radial-gradient(38% 36% at 12% 12%, rgba(255,216,77,.34) 0%, transparent 70%),
radial-gradient(36% 34% at 90% 10%, rgba(255,107,99,.22) 0%, transparent 70%),
radial-gradient(40% 38% at 88% 90%, rgba(47,191,143,.22) 0%, transparent 70%),
radial-gradient(40% 38% at 8% 88%, rgba(124,108,236,.26) 0%, transparent 70%),
var(--paper);
filter:blur(36px);
animation:siteDrift 26s ease-in-out infinite alternate;
}
@keyframes siteDrift{
0% {transform:translate3d(0,0,0) scale(1);}
100%{transform:translate3d(2.5%,-2%,0) scale(1.05);}
}
@media (prefers-reduced-motion:reduce){ body::before{animation:none;} }
/* sign-in screen paints its own gradient on top */
.auth-gate{background:var(--paper);}
/* ---------- account page ---------- */
.top-actions{justify-self:end;display:flex;align-items:center;gap:8px;}
.account-btn{background:rgba(255,255,255,.14);color:#fff;padding:9px 14px;border-radius:9px;font-size:13px;font-weight:600;}
.account-btn:hover{background:rgba(255,255,255,.24);}
.acc-card{max-width:520px;margin:0 auto 20px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px 28px;}
.acc-card h3{font-size:18px;margin-bottom:16px;}
.acc-card p{color:var(--slate);font-size:13px;line-height:1.6;margin:0 0 16px;}
.acc-static{padding:11px 13px;background:var(--paper);border-radius:9px;font-size:14px;word-break:break-all;}
.acc-danger{border-color:#FFD0CC;}
.danger-btn{background:var(--coral);color:#fff;padding:12px 22px;border-radius:9px;font-weight:600;font-size:14px;}
.danger-btn:hover{opacity:.9;}
.acc-msg{max-width:520px;margin:0 auto;text-align:center;font-size:13px;min-height:20px;color:var(--coral);}
.acc-msg.ok{color:var(--mint);}
@media (max-width:760px){ .account-btn{padding:9px 10px;} }
@media (max-width:760px){ .top-nav button{padding:9px 10px;font-size:13px;} }
/* ---------- button hover / click colours ---------- */
.btn-dark,.danger-btn,.signup-btn,.auth-google,.account-btn,.logout-btn,.card-btn{transition:background-color .18s ease,color .18s ease,transform .12s ease,box-shadow .18s ease,opacity .18s ease;}
.btn-dark:hover{background:#3A3FA0;box-shadow:0 6px 16px rgba(58,63,160,.28);transform:translateY(-1px);}
.btn-dark:active{background:var(--highlighter);color:var(--ink);transform:translateY(0) scale(.98);box-shadow:none;}
.danger-btn:hover{background:#E8453D;box-shadow:0 6px 16px rgba(255,107,99,.35);transform:translateY(-1px);}
.danger-btn:active{background:#B3261E;transform:scale(.98);}
.signup-btn:hover{background:#FFE680;transform:translateY(-1px);}
.signup-btn:active{background:var(--mint);color:#fff;transform:scale(.98);}
.auth-google:active{background:var(--highlighter);transform:scale(.99);}
.account-btn:active,.logout-btn:active{background:var(--highlighter);color:var(--ink);transform:scale(.97);}
.btn-dark.done,.btn-dark.done:hover,.btn-dark.done:active{background:var(--mint);color:#fff;box-shadow:none;}
button:disabled{opacity:.6;cursor:not-allowed;}
/* ---------- sign-in / sign-out transitions ---------- */
body.signing-out .topbar, body.signing-out .main{opacity:0;transform:translateY(8px);transition:opacity .38s ease, transform .38s ease;pointer-events:none;}
@keyframes gateIn{from{opacity:0;}to{opacity:1;}}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:none;}}
body.logged-out .auth-gate{animation:gateIn .55s ease both;}
body.logged-out .auth-card{animation:cardIn .6s cubic-bezier(.16,1,.3,1) .1s both;}
@keyframes appIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
body:not(.logged-out):not(.auth-loading) .topbar, body:not(.logged-out):not(.auth-loading) .main{animation:appIn .5s ease backwards;}
/* ---------- our team page ---------- */
.team-section{margin-bottom:40px;}
.team-section>h2{font-size:21px;text-align:center;margin-bottom:20px;}
/* founder banner */
.founder-banner{display:flex;align-items:center;gap:32px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:30px 34px;position:relative;transition:border-color .15s ease, box-shadow .15s ease;}
.founder-banner:hover{border-color:var(--highlighter);box-shadow:0 10px 22px rgba(27,30,75,.08);}
.founder-banner .team-avatar{width:150px;height:150px;font-size:48px;margin:0;flex-shrink:0;}
.founder-body{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;min-width:0;}
.founder-body .team-name{font-family:'Fraunces',serif;font-size:24px;}
.founder-body .team-role{margin:4px 0 12px;}
.founder-msg{font-size:15px;line-height:1.7;color:var(--ink);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.founder-banner.open .founder-msg{display:block;-webkit-line-clamp:unset;}
.read-more{align-self:flex-end;margin-top:12px;background:none;color:var(--coral);font-weight:700;font-size:13px;padding:4px 0;}
.read-more:hover{text-decoration:underline;}
/* cards */
.team-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;}
.team-grid .team-card{flex:0 0 calc((100% - 40px)/3);min-width:0;}
.team-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px 20px 24px;text-align:center;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;}
.team-card:hover{transform:translateY(-3px);border-color:var(--highlighter);box-shadow:0 10px 22px rgba(27,30,75,.08);}
.team-avatar{position:relative;overflow:hidden;width:96px;height:96px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:700;font-size:32px;color:var(--ink);}
.team-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0;border-radius:0;}
.team-name{font-weight:600;font-size:16px;}
.team-role{font-size:12px;font-weight:700;color:var(--coral);text-transform:uppercase;letter-spacing:.05em;margin:5px 0 0;}
/* heads of subject: emoji badge sits on the top edge of the card */
.team-card.head{padding-top:44px;margin-top:22px;}
.subject-badge{position:absolute;top:-22px;left:50%;transform:translateX(-50%);width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 4px 12px rgba(27,30,75,.12);}
@media (max-width:860px){ .team-grid .team-card{flex-basis:calc((100% - 20px)/2);} }
@media (max-width:600px){
.team-grid .team-card{flex-basis:100%;}
.founder-banner{flex-direction:column;text-align:center;padding:26px 20px;}
}
/* ---------- verify-email screen ---------- */
#verifyBox h3{font-size:20px;margin-bottom:8px;}
#verifyBox p{color:var(--slate);font-size:13px;line-height:1.6;margin:0 0 12px;}
#verifyBox .verify-tip{font-size:12px;}
.verify-icon{width:56px;height:56px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 12px;}
/* ---------- subscribe form (first/last name, email, grade, school, country) ---------- */
.signup-card{flex-direction:column;align-items:stretch;}
.sub-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:560px;}
.sub-form .full{grid-column:1 / -1;}
.sub-form input,.sub-form select{width:100%;min-width:0;padding:12px 14px;border-radius:9px;border:2px solid #D5D2E8;background:var(--paper);color:var(--ink);font-size:14px;font-family:'Inter',sans-serif;}
.sub-form select{appearance:none;-webkit-appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231B1E4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;}
.sub-form input:focus,.sub-form select:focus{outline:2px solid var(--highlighter);}
.sub-form .signup-btn{padding:13px 20px;}
.modal-card .modal-cta{width:100%;padding:13px 22px;}
.modal-card{max-height:92vh;overflow-y:auto;}
@media (max-width:760px){
.sub-form input,.sub-form select{font-size:16px;}
}
/* Resources page: link to the Contact-page signup */
.subscribe-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;text-align:center;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;font-size:14px;color:var(--slate);}
.subscribe-note a{color:var(--coral);font-weight:700;text-decoration:underline;}
.subscribe-note a:hover{opacity:.85;}
/* hidden once the person has subscribed */
body.is-subscribed .js-subscribe-promo{display:none !important;}
/* hamburger button: phones only */
.menu-btn{display:none;}
/* ---------- resources as articles (smaller images than the blog) ---------- */
.res-card .blog-card-img{height:120px;}
.res-hero{max-width:420px;max-height:220px;}
a.btn-dark{display:inline-block;text-decoration:none;}
.blog-post-body h3{font-family:'Fraunces',serif;font-size:18px;margin:18px 0 8px;}
/* =====================================================================
PHONE LAYOUT (<= 760px)
One consistent system: 16px side gutters, 12-14px gaps, 14px radius,
16px inputs (stops iOS zoom-on-focus), horizontally scrolling nav.
===================================================================== */
@media (max-width:760px){
html{-webkit-text-size-adjust:100%;}
body{zoom:1;overflow-x:hidden;}
/* ---- top bar: brand + hamburger; menu drops down underneath ---- */
.topbar{grid-template-columns:1fr auto;gap:0 8px;padding:10px 16px;padding-top:max(10px, env(safe-area-inset-top));align-items:center;}
.brand-mark{width:30px;height:30px;}
.brand-name{font-size:17px;}
.menu-btn{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.14);padding:0;}
.menu-btn:hover{background:rgba(255,255,255,.24);}
.menu-btn span{display:block;width:20px;height:2px;border-radius:2px;background:#fff;transition:transform .25s ease, opacity .2s ease;}
body.menu-open .menu-btn{background:var(--highlighter);}
body.menu-open .menu-btn span{background:var(--ink);}
body.menu-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.menu-open .menu-btn span:nth-child(2){opacity:0;}
body.menu-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.top-nav,.top-actions{display:none;grid-column:1 / -1;justify-self:stretch;width:100%;}
body.menu-open .top-nav{display:flex;flex-direction:column;grid-row:2;gap:4px;padding:6px;margin-top:12px;animation:menuIn .22s ease both;}
body.menu-open .top-actions{display:flex;grid-row:3;gap:8px;margin-top:10px;animation:menuIn .22s ease .04s both;}
.nav-pill{display:none;}
.top-nav button{width:100%;text-align:left;white-space:nowrap;padding:13px 14px;font-size:15px;}
.top-nav button.active{background:rgba(255,216,77,.16);}
.account-btn,.logout-btn{flex:1;padding:12px 14px;font-size:14px;text-align:center;}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
/* ---- page frame ---- */
.main{padding:22px 16px 56px;padding-bottom:max(56px, env(safe-area-inset-bottom));}
.page-head{margin-bottom:20px;}
.page-head h1{font-size:25px;line-height:1.2;}
.page-head p{font-size:13.5px;}
.back-link{margin-bottom:14px;padding:6px 0;font-size:14px;}
#view-contact,#view-unit{transform:none;}
/* ---- cards & grids ---- */
.grid{gap:12px;}
#subjectDirGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
#unitCardGrid,#blogGrid,#resourcesGrid{grid-template-columns:1fr;}
.dir-card{padding:16px;min-height:0;}
.dir-icon{width:44px;height:44px;border-radius:12px;font-size:18px;margin-bottom:10px;}
.dir-name{font-size:15px;line-height:1.3;}
.dir-meta{font-size:12px;margin-bottom:12px;}
.card-btn{padding:8px 14px;font-size:12.5px;}
/* unit cards read better as a horizontal row on a phone */
#unitCardGrid .dir-card{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:center;}
#unitCardGrid .dir-icon{grid-row:1 / span 3;margin:0;}
#unitCardGrid .card-btn{justify-self:start;margin-top:4px;}
.subject-header{flex-wrap:wrap;gap:12px 14px !important;margin-bottom:18px !important;}
.subject-header h1{font-size:23px;}
#view-subject .subject-header .pdf-download-btn{margin-left:0;width:100%;padding:12px 16px;}
#view-unit .page-head .pdf-download-btn,#unitPdfBtn{width:100%;padding:12px 16px;}
.search-row{margin-bottom:16px;}
.search-row input{min-width:0;}
/* ---- topic list rows ---- */
.note-row{padding:14px 16px;margin-bottom:8px;gap:10px;}
.note-title{font-size:14.5px;line-height:1.35;}
.note-tag{font-size:12px;}
/* ---- reader ---- */
.reader-body{padding:18px 16px;font-size:16px;line-height:1.7;margin-bottom:20px;}
.reader-body h1{font-size:22px;}
.reader-body h2{font-size:18px;margin:20px 0 10px;}
.reader-body h3{font-size:16.5px;}
.line-highlight,.line-highlight-green,.line-highlight-light-green,.line-highlight-coral,.line-highlight-pink,
.line-highlight-light-pink,.line-highlight-blue,.line-highlight-light-blue,.line-highlight-grey,
.line-highlight-light-grey,.line-highlight-orange,.line-highlight-light-orange{padding:4px 8px;}
.reader-body ul,.reader-body ol{padding-left:22px;}
/* wide tables scroll sideways inside the card instead of squashing */
.reader-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:13.5px;}
.reader-body th,.reader-body td{padding:8px 10px;min-width:96px;vertical-align:top;}
.info-row{padding:12px 13px;gap:10px;font-size:15px;}
.info-row ul{padding-left:18px;margin:6px 0 0;}
.reader-body img{margin:12px auto;}
.image-source{font-size:0.75em;padding:0 4px;}
/* ---- blog / resources articles ---- */
.blog-card-img{height:150px;}
.res-card .blog-card-img{height:120px;}
.blog-card-body{padding:18px;}
.blog-post-hero{max-height:220px;}
.res-hero{max-width:100%;max-height:180px;}
.blog-post-body{padding:20px 16px;font-size:15.5px;line-height:1.75;}
/* ---- forms ---- */
.field input,.field textarea,.search-row input,.signup-form input{font-size:16px;}
.contact-card{padding:22px 18px;max-width:100%;}
.btn-dark,.danger-btn{padding:13px 22px;}
.contact-card .btn-dark{width:100%;}
.signup-card{flex-direction:column;align-items:stretch;padding:22px 18px;gap:14px;}
.signup-form{flex-direction:column;gap:8px;width:100%;}
.signup-form input{min-width:0;width:100%;}
.signup-btn{width:100%;padding:13px 20px;}
/* ---- account ---- */
.acc-card{padding:20px 18px;}
.acc-card .btn-dark,.acc-card .danger-btn{width:100%;}
.acc-card .modal-skip{display:block;margin:12px auto 0;}
/* ---- team ---- */
.team-section{margin-bottom:30px;}
.team-section>h2{font-size:19px;margin-bottom:16px;}
.founder-banner{flex-direction:column;text-align:center;padding:24px 18px;gap:16px;}
.founder-banner .team-avatar{width:110px;height:110px;font-size:38px;}
.founder-msg{font-size:14.5px;}
.read-more{align-self:center;}
.team-grid{gap:12px;}
.team-grid .team-card{flex:0 0 calc((100% - 12px)/2);padding:20px 12px 18px;}
.team-card.head{padding-top:38px;}
.team-avatar{width:76px;height:76px;font-size:26px;}
.team-name{font-size:14.5px;}
.team-role{font-size:10.5px;}
/* ---- sign-in / verify ---- */
.auth-gate{padding:16px;align-items:center;overflow-y:auto;}
.auth-card{padding:26px 20px;width:100%;max-width:400px;margin:auto;}
.auth-card h2{font-size:23px;}
.auth-card>p{font-size:13.5px;}
.auth-tabs button{padding:11px;font-size:14px;}
.auth-submit,.auth-google{padding:13px;font-size:15px;}
.modal-skip{padding:8px;font-size:13px;}
/* ---- modal & toast ---- */
.modal-card{padding:26px 20px;width:calc(100vw - 32px);}
.modal-card .signup-form{flex-direction:column;}
.toast{left:16px;right:16px;bottom:max(16px, env(safe-area-inset-bottom));text-align:center;}
.footer-credit{font-size:13px;padding:24px 0 6px;}
}
/* very narrow phones */
@media (max-width:380px){
#subjectDirGrid{grid-template-columns:1fr;}
.team-grid .team-card{flex-basis:100%;}
.brand-name{font-size:16px;}
}
/* touch devices: no hover "nudge", keep taps crisp */
@media (hover:none){
.note-row:hover,.dir-card:hover,.blog-card:hover,.team-card:hover{transform:none;box-shadow:none;}
button,.dir-card,.note-row,.blog-card{-webkit-tap-highlight-color:transparent;}
.note-row:active,.dir-card:active,.blog-card:active{border-color:var(--highlighter);transform:scale(.99);}
}