/* ===== AOE Centre — shared stylesheet ===== */
:root{
  --taupe:#9B9283;
  --taupe-dark:#7C7466;
  --taupe-light:#C6BBA7;
  --gold:#DFCD83;
  --gold-deep:#A08C42;
  --ink:#2B2721;
  --cream:#F5F2EA;
  --panel:#FFFDF7;
  --rule:#E2DBCB;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:"Karla","Segoe UI",Roboto,system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Marcellus","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;font-weight:400;line-height:1.18;margin:0;letter-spacing:.01em}
p{margin:0}
img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}
.narrow{max-width:800px}
.script{font-family:"Petit Formal Script","Segoe Script","Brush Script MT",cursive}
.eyebrow{font-family:"IBM Plex Mono","Consolas","DejaVu Sans Mono",monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}

/* ---- header ---- */
.top{background:var(--taupe);color:var(--cream)}
.masthead{position:sticky;top:0;z-index:60;background:var(--taupe);border-bottom:1px solid rgba(245,242,234,.18)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.logo{height:46px;width:auto}
.masthead nav{display:flex;gap:26px;font-size:15px;align-items:center;flex-wrap:wrap}
.masthead nav a{color:rgba(245,242,234,.82);text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent}
.masthead nav a:hover{color:#fff;border-bottom-color:var(--gold)}
.nav-hide{display:none}
@media(min-width:820px){.nav-hide{display:inline}}

/* ---- hero ---- */
.hero{padding:84px 0 96px;position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:2}
.hero .eyebrow{color:var(--gold)}
.hero h1{font-size:clamp(38px,6.4vw,68px);color:var(--cream);max-width:17ch;margin:20px 0 0}
.hero h1 span{color:var(--gold)}
.hero .lede{margin-top:24px;max-width:56ch;color:rgba(245,242,234,.88);font-size:18px}
.hero .tagline{margin-top:34px;font-size:26px;color:var(--gold)}
.hero-sub{padding:64px 0 72px}
.hero-sub h1{font-size:clamp(34px,5.2vw,56px)}
.watermark{position:absolute;right:-70px;bottom:-90px;width:min(46vw,440px);opacity:.13;z-index:1;pointer-events:none}

/* ---- buttons ---- */
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.btn{
  display:inline-block;padding:14px 26px;text-decoration:none;font-weight:700;font-size:15px;
  letter-spacing:.02em;border-radius:1px;border:1px solid var(--gold);cursor:pointer;
  font-family:"Karla",sans-serif;transition:transform .18s ease,background .18s ease,color .18s ease;
}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--cream);border-color:var(--cream);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--gold)}
.btn-ghost:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn-dark:hover{background:var(--gold-deep);border-color:var(--gold-deep);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--cream);transform:translateY(-2px)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* ---- sections ---- */
.section{padding:88px 0}
.section-tight{padding:60px 0}
.section h2{font-size:clamp(28px,4vw,40px);margin-top:12px}
.section h3{font-size:22px;margin-top:38px}
.section p + p{margin-top:16px}
.section-intro{margin-top:16px;max-width:60ch;color:#5D564B}
.band-cream{background:var(--cream)}
.band-panel{background:var(--panel);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.band-taupe{background:var(--taupe);color:var(--cream)}
.band-taupe h2,.band-taupe h3{color:var(--cream)}
.band-taupe .eyebrow{color:var(--gold)}
.band-taupe .section-intro{color:rgba(245,242,234,.85)}
.prose{max-width:70ch;margin-top:18px;color:#4A443B}
.prose p + p{margin-top:16px}

.eyes{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.eyes svg{flex:0 0 auto}
.eyes i{flex:1;height:1px;background:var(--rule);display:block}
.band-taupe .eyes i{background:rgba(245,242,234,.28)}

/* ---- lists ---- */
.ticks{list-style:none;padding:0;margin:20px 0 0;max-width:70ch}
.ticks li{position:relative;padding:11px 0 11px 30px;border-bottom:1px solid var(--rule)}
.ticks li:before{
  content:"";position:absolute;left:2px;top:20px;width:9px;height:9px;
  border-radius:50%;border:1.5px solid var(--gold-deep);
}
.band-taupe .ticks li{border-bottom-color:rgba(245,242,234,.25)}
.band-taupe .ticks li:before{border-color:var(--gold)}
.ticks li b{font-weight:700}

/* ---- subject ledger (home) ---- */
.group{margin-top:52px}
.group-head{display:flex;align-items:baseline;gap:16px;padding-bottom:12px;border-bottom:2px solid var(--taupe)}
.group-head h3{font-size:21px;margin-top:0}
.group-head .meta{margin-left:auto;font-family:"IBM Plex Mono","Consolas","DejaVu Sans Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe-dark)}
.rows{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
@media(max-width:720px){.rows{grid-template-columns:1fr}}
.row{
  display:flex;align-items:baseline;gap:18px;text-decoration:none;color:inherit;
  padding:20px 12px 20px 4px;border-bottom:1px solid var(--rule);
  transition:background .18s ease,padding-left .18s ease;
}
.row:hover{background:var(--panel);padding-left:14px}
.row .id{font-family:"IBM Plex Mono","Consolas","DejaVu Sans Mono",monospace;font-size:13px;font-weight:500;color:var(--gold-deep);letter-spacing:.06em;min-width:92px}
.row .name{font-family:"Marcellus",serif;font-size:19px;flex:1}
.row .arrow{color:var(--gold-deep);opacity:0;transition:opacity .18s ease,transform .18s ease;transform:translateX(-4px)}
.row:hover .arrow{opacity:1;transform:none}

/* ---- comparison table ---- */
.compare{width:100%;border-collapse:collapse;margin-top:28px;font-size:16px}
.compare th,.compare td{text-align:left;padding:16px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.compare thead th{font-family:"Marcellus",serif;font-size:18px;border-bottom:2px solid var(--taupe)}
.compare tbody th{font-family:"IBM Plex Mono","Consolas","DejaVu Sans Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe-dark);font-weight:400;width:22%}
.compare td{color:#4A443B}
.table-scroll{overflow-x:auto}
@media(max-width:640px){.compare{font-size:15px}.compare th,.compare td{padding:12px 10px}}

/* ---- noticeboard ---- */
.updates{list-style:none;padding:0;margin:44px 0 0;display:grid;gap:20px}
.update{background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--gold);padding:26px 28px;display:grid;grid-template-columns:130px 1fr;gap:24px}
.update time{font-family:"IBM Plex Mono","Consolas","DejaVu Sans Mono",monospace;font-size:13px;color:var(--taupe-dark);padding-top:5px}
.tag{display:inline-block;font-family:"IBM Plex Mono","Consolas","DejaVu Sans Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:4px 10px;border:1px solid var(--rule);margin-bottom:10px;color:var(--ink)}
.tag-promo{background:var(--gold);border-color:var(--gold)}
.update h3{font-size:20px;margin:0 0 8px}
.update p{color:#5D564B;font-size:16px}
.update a{color:var(--gold-deep);font-weight:700}
@media(max-width:620px){.update{grid-template-columns:1fr;gap:10px}}

/* ---- English advisor ---- */
.advisor{
  margin-top:40px;background:var(--panel);border:1px solid var(--rule);
  border-top:3px solid var(--gold);padding:34px 34px 38px;max-width:820px;
}
.adv-meter{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.adv-bar{flex:1;height:3px;background:var(--rule);position:relative}
.adv-bar span{position:absolute;inset:0 auto 0 0;background:var(--gold-deep);width:0;transition:width .35s ease}
.adv-count{font-family:"IBM Plex Mono","Consolas","DejaVu Sans Mono",monospace;font-size:11px;letter-spacing:.14em;color:var(--taupe-dark);white-space:nowrap}
.adv-q{font-family:"Marcellus",serif;font-size:23px;line-height:1.3}
.adv-hint{margin-top:8px;font-size:14px;color:var(--taupe-dark)}
.adv-options{display:grid;gap:10px;margin-top:24px}
.adv-opt{
  text-align:left;background:var(--cream);border:1px solid var(--rule);border-radius:1px;
  padding:15px 18px;font-family:"Karla",sans-serif;font-size:16px;color:var(--ink);cursor:pointer;
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.adv-opt:hover{border-color:var(--gold-deep);background:#fff;transform:translateX(3px)}
.adv-nav{margin-top:22px;display:flex;gap:16px;align-items:center}
.adv-back{background:none;border:none;font-family:"Karla",sans-serif;font-size:14px;color:var(--taupe-dark);cursor:pointer;text-decoration:underline;padding:0}
.adv-back[hidden]{display:none}
.adv-result h3{font-family:"Marcellus",serif;font-size:28px;margin:0}
.adv-verdict{
  display:inline-block;font-family:"IBM Plex Mono","Consolas","DejaVu Sans Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;background:var(--gold);padding:5px 12px;margin-bottom:14px;
}
.est-line{margin:6px 0 2px;font-size:16px;color:var(--ink)}
.est-line b{color:var(--gold-deep)}
.ex-extra{margin-top:6px;color:var(--taupe-dark)}
.ex-code{margin-top:10px;font-size:15px}
.ex-code b{font-family:"IBM Plex Mono","Consolas","DejaVu Sans Mono",monospace;background:var(--paper-2,#eef4f8);
  border:1px solid var(--rule);border-radius:5px;padding:2px 8px;color:var(--gold-deep)}
.adv-note{margin-top:24px;padding-top:18px;border-top:1px solid var(--rule);font-size:14px;color:var(--taupe-dark)}

/* ---- form ---- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
label{font-family:"IBM Plex Mono","Consolas","DejaVu Sans Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
input,select,textarea{
  font-family:"Karla",sans-serif;font-size:16px;color:var(--ink);background:var(--panel);
  border:1px solid rgba(245,242,234,.35);border-radius:1px;padding:13px 14px;width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(223,205,131,.3)}
textarea{min-height:140px;resize:vertical}
.hp{position:absolute;left:-9999px}
.form-status{margin-top:18px;font-size:15px;min-height:24px;color:var(--cream)}
.form-status.ok{color:var(--gold)}
.form-status.err{color:#FFD9D2}
.footnote{margin-top:26px;font-size:14px;color:rgba(245,242,234,.72);max-width:56ch}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

/* ---- contact + footer ---- */
.contact-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px;margin-top:56px;padding-top:36px;border-top:1px solid rgba(245,242,234,.25)}
.contact-list a{color:var(--gold);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(223,205,131,.5)}
footer{background:var(--ink);color:rgba(245,242,234,.7);padding:34px 0;font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
footer .script{color:var(--gold);font-size:17px}
footer a{color:rgba(245,242,234,.7)}

/* ---- breadcrumb + related ---- */
.crumb{font-family:"IBM Plex Mono","Consolas","DejaVu Sans Mono",monospace;font-size:12px;letter-spacing:.1em;color:rgba(245,242,234,.7)}
.crumb a{color:var(--gold);text-decoration:none}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:30px}
.related a{
  display:block;text-decoration:none;color:inherit;background:var(--panel);
  border:1px solid var(--rule);padding:20px 22px;transition:border-color .18s ease,transform .18s ease;
}
.related a:hover{border-color:var(--gold-deep);transform:translateY(-3px)}
.related .id{font-family:"IBM Plex Mono","Consolas","DejaVu Sans Mono",monospace;font-size:12px;color:var(--gold-deep);letter-spacing:.08em}
.related .name{font-family:"Marcellus",serif;font-size:19px;margin-top:6px;display:block}

/* ---- motion ---- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none}
  *{animation:none!important}
  html{scroll-behavior:auto}
}

/* ---- placement test additions ---- */
.adv-start h3{font-family:"Marcellus",serif;font-size:26px;margin:0 0 14px}
.adv-start .prose{margin-top:0}
.adv-specs{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:9px}
.adv-specs li{position:relative;padding:8px 0 8px 28px;font-size:16px;color:#4A443B}
.adv-specs li:before{content:"";position:absolute;left:3px;top:17px;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--gold-deep)}
.adv-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.adv-part{font-family:"IBM Plex Mono","Consolas","DejaVu Sans Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.adv-timer{font-family:"IBM Plex Mono","Consolas","DejaVu Sans Mono",monospace;font-size:11px;letter-spacing:.12em;color:var(--taupe-dark)}
.passage{
  background:var(--cream);border:1px solid var(--rule);border-left:3px solid var(--taupe);
  padding:20px 22px;margin:18px 0 6px;font-size:16px;line-height:1.75;color:#3F3A32;
}
.passage p + p{margin-top:12px}
.passage .passage-tag{
  display:block;font-family:"IBM Plex Mono","Consolas","DejaVu Sans Mono",monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--taupe-dark);margin-bottom:10px;
}
.scores{display:grid;gap:16px;margin:26px 0 8px}
.score-row{display:grid;grid-template-columns:132px 1fr 54px;gap:14px;align-items:center}
.score-row .lbl{font-family:"IBM Plex Mono","Consolas","DejaVu Sans Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe-dark)}
.score-track{height:8px;background:var(--rule);position:relative}
.score-track span{position:absolute;inset:0 auto 0 0;background:var(--gold-deep);width:0;transition:width .8s ease}
.score-row .val{font-family:"IBM Plex Mono","Consolas","DejaVu Sans Mono",monospace;font-size:14px;text-align:right}
.band-badge{
  display:inline-block;font-family:"Marcellus",serif;font-size:15px;letter-spacing:.06em;
  background:var(--ink);color:var(--cream);padding:7px 16px;margin-bottom:14px;
}
.gap-note{
  margin-top:22px;padding:18px 20px;background:var(--cream);
  border:1px solid var(--rule);border-left:3px solid var(--gold);font-size:16px;color:#4A443B;
}
@media(max-width:560px){
  .score-row{grid-template-columns:104px 1fr 48px;gap:10px}
  .advisor{padding:26px 20px 30px}
}

/* ---- lead-capture form on the test page ---- */
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.lead-grid .field.full{grid-column:1/-1}
.lead-grid label{color:var(--gold-deep)}
.lead-grid input,.lead-grid select{background:#fff;border:1px solid var(--rule)}
.lead-note{margin-top:20px;font-size:14px;color:var(--taupe-dark);max-width:60ch}
.lead-err{margin-top:14px;color:var(--mark,#B0442F);font-size:15px;min-height:22px}
@media(max-width:640px){.lead-grid{grid-template-columns:1fr}}

/* ---- test teaser card on the homepage ---- */
.teaser{
  margin-top:38px;display:grid;grid-template-columns:1.4fr 1fr;gap:0;
  border:1px solid var(--rule);background:var(--panel);
}
.teaser-body{padding:38px 40px}
.teaser-body h3{font-family:"Marcellus",serif;font-size:27px;margin:0 0 14px}
.teaser-body p{color:#4A443B}
.teaser-body p + p{margin-top:12px}
.teaser-side{
  background:var(--taupe);color:var(--cream);padding:38px 34px;
  display:flex;flex-direction:column;justify-content:center;gap:16px;
}
.teaser-side .stat{display:flex;align-items:baseline;gap:12px}
.teaser-side .num{font-family:"Marcellus",serif;font-size:32px;color:var(--gold);min-width:44px}
.teaser-side .cap{font-size:14px;line-height:1.4;color:rgba(245,242,234,.85)}
@media(max-width:760px){
  .teaser{grid-template-columns:1fr}
  .teaser-body{padding:30px 26px}
  .teaser-side{padding:26px}
}

/* ---- sent-confirmation strip ---- */
.sent-strip{
  margin-top:22px;padding:14px 18px;background:var(--cream);
  border:1px solid var(--rule);border-left:3px solid var(--gold-deep);
  font-size:15px;color:#4A443B;
}

/* ---- noticeboard tag styles (set per category in admin.php) ---- */
.tag-highlight{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.tag-solid{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.tag-outline{background:transparent;border-color:var(--taupe);color:var(--taupe-dark)}

/* ---- language toggle + first-visit chooser ---- */
#aoe-lang{display:inline-flex;border:1px solid rgba(245,242,234,.4);border-radius:2px;overflow:hidden;margin-left:4px}
#aoe-lang button{
  background:transparent;border:0;color:rgba(245,242,234,.8);cursor:pointer;
  font-family:"Karla",sans-serif;font-size:13px;padding:5px 10px;line-height:1.4;
}
#aoe-lang button.on{background:var(--gold);color:var(--ink);font-weight:700}
#aoe-lang button:hover:not(.on){color:#fff}
.admin-body #aoe-lang{border-color:rgba(245,242,234,.4)}

.lang-veil{
  position:fixed;inset:0;z-index:900;background:rgba(43,39,33,.82);
  display:flex;align-items:center;justify-content:center;padding:22px;
  animation:veilIn .3s ease;
}
.lang-veil.gone{opacity:0;transition:opacity .25s ease}
@keyframes veilIn{from{opacity:0}to{opacity:1}}
.lang-box{
  background:var(--panel);border-top:3px solid var(--gold);max-width:460px;width:100%;
  padding:38px 34px 30px;text-align:center;
}
.lang-brand{font-family:"Marcellus",serif;font-size:15px;letter-spacing:.34em;color:var(--gold-deep);margin:0 0 18px}
.lang-box h2{font-family:"Marcellus",serif;font-size:24px;font-weight:400;line-height:1.35;margin:0 0 24px}
.lang-box h2 span{color:var(--taupe-dark);font-size:21px}
.lang-pick{display:grid;gap:12px}
.lang-pick button{
  background:var(--cream);border:1px solid var(--rule);padding:16px 18px;cursor:pointer;
  font-family:"Karla",sans-serif;text-align:left;transition:border-color .15s ease,transform .15s ease;
}
.lang-pick button:hover{border-color:var(--gold-deep);transform:translateY(-2px)}
.lang-pick b{display:block;font-size:18px;color:var(--ink)}
.lang-pick small{display:block;font-size:13px;color:var(--taupe-dark);margin-top:3px}
.lang-note{margin-top:22px;font-size:12px;line-height:1.6;color:var(--taupe-dark)}
@media(max-width:420px){.lang-box{padding:30px 22px 24px}}

/* ---- phone field with country code ---- */
.telrow{display:flex;gap:0}
.telrow select{
  flex:0 0 auto;width:auto;min-width:104px;border-right:0;border-radius:2px 0 0 2px;
  font-family:"IBM Plex Mono",monospace;font-size:15px;
}
.telrow input{flex:1 1 auto;border-radius:0 2px 2px 0}

/* ---- portal section detail ---- */
.crumbline{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;color:var(--taupe-dark);margin-bottom:10px}
.crumbline a{color:var(--gold-deep);text-decoration:none}
.mini-head{font-family:"Marcellus",serif;font-size:18px;margin:30px 0 12px}
.introbox{background:var(--cream);border-left:3px solid var(--gold-deep);padding:18px 20px;font-size:15px;line-height:1.7}
.howto{margin:0;padding-left:20px}
.howto li{margin-bottom:12px;font-size:15px;line-height:1.65}
.soonbox{background:var(--cream);border:1px dashed var(--rule);padding:20px 22px;font-size:15px;line-height:1.7}
.soonbox p + p{margin-top:12px}

/* ---- notice on pages not yet translated ---- */
#aoe-partial{
  background:var(--gold);color:var(--ink);text-align:center;
  padding:9px 16px;font-size:13px;line-height:1.5;
}
#aoe-partial a{color:var(--ink);font-weight:700;margin-left:8px}
#aoe-partial span{opacity:.7}

/* ---- practice questions ---- */
.qcard{background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--rule);
       padding:24px 26px;margin-bottom:16px;transition:border-left-color .2s ease}
.qcard.answered{border-left-color:var(--gold)}
.qcard.result.right{border-left-color:#3F7A56}
.qcard.result.wrong{border-left-color:#B0442F}
.qnum{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
      text-transform:uppercase;color:var(--taupe-dark);margin:0 0 10px}
.qtext{font-family:"Marcellus",serif;font-size:19px;line-height:1.45;margin:0 0 18px}
.qopts{display:grid;gap:9px}
.qopt{display:flex;gap:12px;align-items:flex-start;background:var(--cream);
      border:1px solid var(--rule);padding:13px 16px;cursor:pointer;
      transition:border-color .15s ease,background .15s ease}
.qopt:hover{border-color:var(--gold-deep);background:#fff}
.qopt input{width:auto;margin:3px 0 0;flex:0 0 auto}
.qopt .letter{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--gold-deep);flex:0 0 auto}
.qopt .text{flex:1 1 auto;font-size:15px;line-height:1.55}
.qopt.static{cursor:default}
.qopt.static:hover{border-color:var(--rule);background:var(--cream)}
.qopt.ans{background:#F2F7F3;border-color:#3F7A56}
.qopt.yours{background:#FDF3F1;border-color:#B0442F}
.qopt .mark{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;
            text-transform:uppercase;color:var(--taupe-dark);flex:0 0 auto;padding-top:2px}
.why{margin-top:14px;padding:13px 16px;background:var(--cream);border-left:3px solid var(--gold-deep);
     font-size:14px;line-height:1.65;color:#4A443B}
.setgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:16px}
.setcard{background:#fff;border:1px solid var(--rule);padding:20px 22px}
.setcard h4{font-family:"Marcellus",serif;font-size:17px;margin:0 0 6px}
.setcard p{font-size:14px;color:var(--taupe-dark);margin:0 0 14px;line-height:1.6}
.setcard .meta{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;
               color:var(--gold-deep);margin-bottom:10px}
.setcard .best{font-size:13px;color:var(--taupe-dark);margin-top:10px}

/* ---- grouped subject categories in the portal ---- */
.catgroup{background:var(--panel);border:1px solid var(--rule);margin-bottom:14px}
.catgroup summary{
  cursor:pointer;padding:18px 24px;display:flex;justify-content:space-between;
  align-items:baseline;gap:14px;list-style:none;
}
.catgroup summary::-webkit-details-marker{display:none}
.catgroup summary::before{
  content:"+";font-family:"IBM Plex Mono",monospace;color:var(--gold-deep);
  margin-right:12px;font-size:17px;
}
.catgroup[open] summary::before{content:"–"}
.catgroup summary:hover{background:var(--cream)}
.catname{font-family:"Marcellus",serif;font-size:20px;flex:1 1 auto}
.catmeta{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;
         text-transform:uppercase;color:var(--taupe-dark);white-space:nowrap}
.catgroup .grid{padding:0 24px 24px}

/* ---- live practice game ---- */
.rules{margin:14px 0 22px;padding-left:20px}
.rules li{margin-bottom:8px;font-size:15px;color:#4A443B}
.btn.big{font-size:17px;padding:15px 40px}

.hud{display:flex;justify-content:space-between;align-items:center;gap:14px;
     font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.1em;
     text-transform:uppercase;color:var(--taupe-dark);margin-bottom:10px}
.hud-score{color:var(--gold-deep);font-weight:500}
.hud-streak{background:var(--gold);color:var(--ink);padding:3px 10px;border-radius:2px;letter-spacing:.06em}



.qstage{margin-bottom:22px}
.qtext.big{font-family:"Marcellus",serif;font-size:26px;line-height:1.4;
           background:var(--panel);border:1px solid var(--rule);padding:32px 30px;margin:0 0 20px}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ansbtn{display:flex;align-items:flex-start;gap:14px;text-align:left;cursor:pointer;
        border:1px solid var(--rule);background:var(--panel);padding:20px 22px;
        font-family:"Karla",sans-serif;font-size:16px;line-height:1.5;color:var(--ink);
        transition:transform .12s ease,border-color .12s ease,background .12s ease}
.ansbtn:hover:not(:disabled){transform:translateY(-3px);border-color:var(--gold-deep);background:#fff}
.ansbtn .k{font-family:"IBM Plex Mono",monospace;font-size:13px;width:26px;height:26px;
           border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;
           flex:0 0 auto;color:var(--gold-deep)}
.ansbtn .t{flex:1 1 auto}
.ansbtn.c0{border-left:4px solid #B0442F}
.ansbtn.c1{border-left:4px solid #2F6FB0}
.ansbtn.c2{border-left:4px solid #C9922F}
.ansbtn.c3{border-left:4px solid #3F7A56}
.ansbtn:disabled{cursor:default}
.ansbtn.correct{background:#F2F7F3;border-color:#3F7A56;transform:none}
.ansbtn.wrong{background:#FDF3F1;border-color:#B0442F;transform:none}
.ansbtn.dim{opacity:.42;transform:none}

.feedback{background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--gold-deep);
          padding:24px 26px;animation:fbIn .25s ease}
@keyframes fbIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fb-head{font-family:"Marcellus",serif;font-size:22px;margin:0 0 8px}
.fb-head.good{color:#3F7A56}
.fb-head.bad{color:#B0442F}
.fb-why{font-size:15px;line-height:1.7;color:#4A443B;margin:0 0 18px}

.scorecard .bigstats{display:flex;gap:34px;margin:22px 0;flex-wrap:wrap}
.scorecard .bigstats .n{font-family:"Marcellus",serif;font-size:34px;color:var(--gold-deep);display:block;line-height:1}
.scorecard .bigstats .l{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.13em;
                        text-transform:uppercase;color:var(--taupe-dark)}
@media(max-width:640px){
  .qgrid{grid-template-columns:1fr}
  .qtext.big{font-size:21px;padding:24px 22px}
}

/* ---- duplicate checker + teacher portal ---- */
.droparea{border:2px dashed var(--rule);background:var(--cream);padding:34px 24px;text-align:center;
          transition:border-color .15s ease,background .15s ease}
.droparea.over{border-color:var(--gold-deep);background:#fff}
.droparea p{margin:0}
.linky{color:var(--gold-deep);cursor:pointer;text-decoration:underline}
.verdict.ok{border-left:3px solid #3F7A56}
.verdict.warn{border-left:3px solid #C9922F}
.verdict.bad{border-left:3px solid #B0442F}
.tmode{margin-bottom:38px}
.tmode-head{display:flex;gap:20px;align-items:flex-start;margin-bottom:18px}
.tnum{font-family:"Marcellus",serif;font-size:36px;color:var(--gold);line-height:1;flex:0 0 auto}
.tmode-head h2{font-family:"Marcellus",serif;font-size:24px;margin:0 0 6px}
.setcard.planned{opacity:.9;border-style:dashed}
.setcard.planned .pill{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:10px;
      letter-spacing:.13em;text-transform:uppercase;padding:3px 9px;border:1px solid var(--rule);
      color:var(--taupe-dark)}

/* ================= interactive quiz ================= */
.quiz-body{background:var(--ink);color:var(--cream);margin:0;min-height:100vh}
.quizbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
         padding:14px 22px;background:rgba(245,242,234,.06)}
.qexit{color:rgba(245,242,234,.75);text-decoration:none;font-size:14px}
.qexit:hover{color:var(--gold)}
.qdots{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.qdots i{width:9px;height:9px;border-radius:50%;background:rgba(245,242,234,.22);display:block}
.qdots i.now{background:var(--gold);transform:scale(1.35)}
.qdots i.ok{background:#5FA97C}
.qdots i.no{background:#C4553D}
.qscore{text-align:right;min-width:92px}
.qscore .pts{font-family:"Marcellus",serif;font-size:26px;color:var(--gold);display:block;
             transition:transform .25s ease}
.qscore .pts.pop{transform:scale(1.35)}
.qscore .cmb{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;
             color:rgba(245,242,234,.65)}

.quizmain{padding:38px 22px 70px}
.quizwrap{max-width:940px;margin:0 auto}
.qcount{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.16em;
        color:rgba(245,242,234,.55);text-align:center;margin:0 0 18px}
.qbig{font-family:"Marcellus",serif;font-weight:400;font-size:30px;line-height:1.35;
      text-align:center;margin:0 auto 34px;max-width:760px;color:var(--cream)}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qbtn{display:flex;gap:14px;align-items:flex-start;text-align:left;cursor:pointer;
      border:1px solid rgba(245,242,234,.2);background:rgba(245,242,234,.07);
      color:var(--cream);padding:20px 22px;font-family:"Karla",sans-serif;font-size:16px;
      line-height:1.5;transition:transform .12s ease,background .12s ease,border-color .12s ease}
.qbtn:hover:not(:disabled){background:rgba(245,242,234,.14);border-color:var(--gold);transform:translateY(-2px)}
.qbtn .k{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--gold);flex:0 0 auto;padding-top:2px}
.qbtn .t{flex:1 1 auto}
.qbtn:disabled{cursor:default}
.qbtn.right{background:rgba(95,169,124,.24);border-color:#5FA97C}
.qbtn.wrongpick{background:rgba(196,85,61,.24);border-color:#C4553D}
.qbtn.fade{opacity:.4}
.qhint{text-align:center;margin-top:22px;font-size:13px;color:rgba(245,242,234,.45)}
.fbcard{max-width:620px;margin:20px auto;text-align:center;
        background:rgba(245,242,234,.07);border:1px solid rgba(245,242,234,.16);padding:34px 30px}
.fbmark{font-family:"Marcellus",serif;font-size:28px;margin:0 0 14px}
.fbmark.right{color:#7FC79A}
.fbmark.wrong{color:#E08A72}
.fbwhy{font-size:15px;line-height:1.7;color:rgba(245,242,234,.85);margin:0 0 24px}
.endtop{text-align:center;padding:20px 0 34px}
.endpct{font-family:"Marcellus",serif;font-size:64px;color:var(--gold);margin:0;line-height:1}
.endsub{font-size:15px;color:rgba(245,242,234,.7);margin:6px 0 0}
.endstats{display:flex;gap:38px;justify-content:center;margin:26px 0}
.endstats b{font-family:"Marcellus",serif;font-size:28px;color:var(--cream);display:block}
.endstats span{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
               text-transform:uppercase;color:rgba(245,242,234,.55)}
.endverdict{max-width:560px;margin:0 auto 26px;font-size:15px;line-height:1.7;color:rgba(245,242,234,.85)}
.quiz-body .section-head{color:var(--cream);text-align:center}
.quiz-body .qcard{background:rgba(245,242,234,.06);border-color:rgba(245,242,234,.14)}
.quiz-body .qtext{color:var(--cream)}
.quiz-body .qopt{background:rgba(245,242,234,.05);border-color:rgba(245,242,234,.14);color:var(--cream)}
.quiz-body .qopt.ans{background:rgba(95,169,124,.2);border-color:#5FA97C}
.quiz-body .qopt.yours{background:rgba(196,85,61,.2);border-color:#C4553D}
.quiz-body .why{background:rgba(245,242,234,.06);color:rgba(245,242,234,.85);border-left-color:var(--gold)}
.quiz-body .qnum,.quiz-body .qopt .mark{color:rgba(245,242,234,.55)}
.quiz-body .btn.ghost{color:var(--cream);border-color:rgba(245,242,234,.4)}
.quiz-body .btn.ghost:hover{background:var(--cream);color:var(--ink)}
@media(max-width:700px){
  .qgrid{grid-template-columns:1fr}
  .qbig{font-size:23px}
  .endpct{font-size:50px}
}

/* ---- grouped subject list ---- */
.catgroup{background:var(--panel);border:1px solid var(--rule);margin-bottom:14px}
.catgroup summary{padding:18px 22px;cursor:pointer;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
               list-style:none;transition:background .15s ease}
.catgroup summary::-webkit-details-marker{display:none}
.catgroup summary:hover{background:var(--cream)}
.catgroup summary::before{content:"+";font-family:"IBM Plex Mono",monospace;color:var(--gold-deep);
                       font-size:18px;line-height:1;width:14px}
.catgroup[open] summary::before{content:"–"}
.catgroup .catname{font-family:"Marcellus",serif;font-size:19px}
.catgroup .catnote{font-size:13px;color:var(--taupe-dark);flex:1 1 auto}
.catgroup .catmeta{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;
               text-transform:uppercase;color:var(--gold-deep)}
.catgroup .grid{padding:0 22px 22px}

/* ---- homepage platform section ---- */
.platform{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:38px}
.plat{background:rgba(245,242,234,.07);border:1px solid rgba(245,242,234,.18);padding:34px 32px}
.plat-tag{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.18em;
          text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.plat h3{font-family:"Marcellus",serif;font-size:24px;font-weight:400;margin:0 0 14px;color:var(--cream)}
.plat p{color:rgba(245,242,234,.85);font-size:15px;line-height:1.75;margin:0 0 18px}
.plat-list{list-style:none;padding:0;margin:0 0 24px}
.plat-list li{position:relative;padding-left:20px;margin-bottom:9px;font-size:14px;
              line-height:1.6;color:rgba(245,242,234,.78)}
.plat-list li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
                      background:var(--gold);border-radius:50%}
@media(max-width:820px){.platform{grid-template-columns:1fr}.plat{padding:28px 24px}}

/* ---- teacher portal branches ---- */
.branch{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:14px}
.branchcard{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--rule);
            border-top:3px solid var(--gold-deep);padding:26px 28px;transition:transform .15s ease,box-shadow .15s ease}
.branchcard:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(43,39,33,.1)}
.branchcard .bicon{display:block;margin-bottom:14px}
.branchcard h3{font-family:"Marcellus",serif;font-size:21px;margin:0 0 8px;color:var(--ink)}
.branchcard p{font-size:14.5px;color:var(--taupe-dark);line-height:1.65;margin:0 0 12px}
.branchcard .bcount{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;
                    text-transform:uppercase;color:var(--gold-deep)}
@media(max-width:760px){.branch{grid-template-columns:1fr}}

/* ---- smartboard game ---- */
.board-body{background:var(--ink);color:var(--cream);margin:0;min-height:100vh}
.boardbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
          padding:12px 20px;background:rgba(245,242,234,.06)}
.bleft{display:flex;align-items:center;gap:16px}
.btitle{font-family:"Marcellus",serif;font-size:17px;color:var(--gold)}
.teams{display:flex;gap:12px;flex-wrap:wrap}
.team{display:flex;align-items:center;gap:10px;border:1px solid rgba(245,242,234,.22);padding:6px 12px}
.team .tname{background:transparent;border:0;color:var(--cream);font-family:"Karla",sans-serif;
             font-size:14px;width:88px;padding:2px}
.team .tname:focus{outline:1px solid var(--gold)}
.team .tscore{font-family:"Marcellus",serif;font-size:24px;color:var(--gold)}
.team.t0{border-left:3px solid #DFCD83}
.team.t1{border-left:3px solid #7FC79A}
.team.t2{border-left:3px solid #E08A72}
.team.t3{border-left:3px solid #8FB8D8}
.tinybtn{background:transparent;border:1px solid rgba(245,242,234,.3);color:var(--cream);
         padding:6px 12px;font-size:13px;cursor:pointer;font-family:"Karla",sans-serif}
.tinybtn:hover{border-color:var(--gold);color:var(--gold)}
.boardmain{padding:26px 20px 40px}
.grid5{display:grid;gap:12px;max-width:1400px;margin:0 auto}
.tile{background:rgba(245,242,234,.09);border:1px solid rgba(245,242,234,.2);color:var(--gold);
      font-family:"Marcellus",serif;font-size:min(6vw,42px);padding:min(5vh,42px) 8px;cursor:pointer;
      transition:transform .12s ease,background .12s ease}
.tile:hover:not(:disabled){background:var(--gold);color:var(--ink);transform:scale(1.04)}
.tile.done{background:transparent;border-style:dashed;color:rgba(245,242,234,.22);cursor:default}
.tile.empty{visibility:hidden}
.qveil{position:fixed;inset:0;background:var(--ink);z-index:50;overflow-y:auto;padding:30px 24px}
.qstage{max-width:1150px;margin:0 auto;text-align:center}
.qval{font-family:"IBM Plex Mono",monospace;font-size:14px;letter-spacing:.2em;text-transform:uppercase;
      color:var(--gold);margin:0 0 18px}
.qhuge{font-family:"Marcellus",serif;font-weight:400;font-size:min(5.2vw,44px);line-height:1.32;
       margin:0 auto 30px;max-width:15ch;max-width:26ch;color:var(--cream)}
.qgrid.big{grid-template-columns:1fr 1fr;gap:14px;text-align:left}
.qgrid.big .qbtn{font-size:min(2.4vw,21px);padding:22px 24px;cursor:default}
.whybox{max-width:820px;margin:22px auto 0;background:rgba(245,242,234,.07);border-left:3px solid var(--gold);
        padding:16px 20px;font-size:16px;line-height:1.7;color:rgba(245,242,234,.88);text-align:left}
.boardctl{margin-top:28px;display:flex;flex-direction:column;align-items:center;gap:16px}
.award{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.awlabel{font-size:15px;color:rgba(245,242,234,.75)}
.awlabel b{color:var(--gold)}
#awbtns{display:flex;gap:10px;flex-wrap:wrap}
.awbtn{font-family:"Karla",sans-serif;font-size:16px;padding:12px 22px;cursor:pointer;
       border:1px solid var(--gold);background:var(--gold);color:var(--ink);font-weight:700}
.awbtn.t1{background:#7FC79A;border-color:#7FC79A}
.awbtn.t2{background:#E08A72;border-color:#E08A72}
.awbtn.t3{background:#8FB8D8;border-color:#8FB8D8}
.awbtn.none{background:transparent;color:rgba(245,242,234,.7);border-color:rgba(245,242,234,.3)}
.board-body .qbtn.right{background:rgba(95,169,124,.3);border-color:#5FA97C}
@media(max-width:760px){.qgrid.big{grid-template-columns:1fr}.qhuge{font-size:26px}}

/* ---- three routes on the homepage ---- */
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.route{background:#fff;border:1px solid var(--rule);border-top:3px solid var(--rule);
       padding:30px 28px;display:flex;flex-direction:column}
.route.feature{border-top-color:var(--gold-deep);box-shadow:0 6px 26px rgba(43,39,33,.07)}
.route-tag{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.18em;
           text-transform:uppercase;color:var(--gold-deep);margin:0 0 12px}
.route h3{font-family:"Marcellus",serif;font-size:22px;font-weight:400;margin:0 0 12px;line-height:1.3}
.route p{font-size:14.5px;line-height:1.7;color:#4A443B;margin:0 0 20px;flex:1 1 auto}
.route .actions{margin-top:0;gap:10px}
.route .btn{font-size:14px;padding:10px 18px}
@media(max-width:900px){.routes{grid-template-columns:1fr}}

/* ---- portal link in the header ---- */
.nav-portal{border:1px solid rgba(245,242,234,.45);padding:5px 13px;border-radius:2px;line-height:1.4}
.nav-portal:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}

.plat-foot{text-align:center;margin-top:30px;font-size:14.5px;color:rgba(245,242,234,.8)}
.plat-foot a{color:var(--gold);font-weight:700}

/* ---- platform cards: equal treatment, buttons anchored to the bottom ---- */
.plat{display:flex;flex-direction:column}
.plat .actions{margin-top:auto;padding-top:8px;display:flex;flex-direction:column;align-items:stretch;gap:10px}
.plat .actions .btn{text-align:center;white-space:normal}

/* ---- passages in the quiz ---- */
.passtext{white-space:pre-line;line-height:1.85;font-size:16.5px;text-align:left}



.quiz-body .passbox{max-width:760px;margin:0 auto 26px;background:rgba(245,242,234,.06);
                    border:1px solid rgba(245,242,234,.16);text-align:left}
.quiz-body .passbox summary{cursor:pointer;padding:12px 18px;font-family:"IBM Plex Mono",monospace;
                            font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.quiz-body .passbox .passtext{padding:0 20px 18px;color:rgba(245,242,234,.9);max-height:40vh;overflow-y:auto}
.quiz-body .passbox.review{max-width:none;margin-bottom:22px}

/* ---- passage on the smartboard ---- */
.passveil .passsheet{max-width:900px;margin:0 auto;text-align:left;
                     font-size:clamp(17px,1.9vw,22px);line-height:1.9;color:var(--cream)}

/* ---- teacher material is view-only ---- */
@media print{
  .board-body .boardbar,.board-body .boardmain,
  body.teacher-area .top,body.teacher-area main,body.teacher-area footer{display:none!important}
  .board-body::after,body.teacher-area::after{
    content:"AOE Centre teaching material is available online only.";
    display:block;padding:60px 40px;font-family:"Karla",sans-serif;font-size:16px}
}

/* ---- practice cycle ---- */
.cyclebox{background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--gold-deep);
          padding:20px 22px;margin-bottom:20px}
.cyctop{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.cyclabel{font-family:"Marcellus",serif;font-size:19px;margin:0}
.cycsub{font-size:13.5px;color:var(--taupe-dark);margin:4px 0 0}
.cycbar{height:6px;background:var(--rule);margin:16px 0 12px}
.cycbar span{display:block;height:100%;background:var(--gold-deep);transition:width .4s ease}
.cycnote{font-size:13px;color:var(--taupe-dark);margin:0;line-height:1.6}
.setcard.donecycle{opacity:.72}
.donetag{display:inline-block;margin-left:8px;font-family:"IBM Plex Mono",monospace;font-size:9px;
         letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);
         border:1px solid var(--gold-deep);padding:2px 6px}
.cycleline{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;
           text-transform:uppercase;color:var(--gold);margin:0 0 18px}

/* ---- reading layout: passage stays on screen, questions scroll under it ---- */
.passpanel{max-width:860px;margin:0 auto 34px;background:rgba(245,242,234,.06);
           border:1px solid rgba(245,242,234,.16);border-left:3px solid var(--gold);
           padding:26px 30px}
.passlabel{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.18em;
           text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.passpanel .passtext{color:rgba(245,242,234,.94);font-size:17px;line-height:1.9;
                     white-space:pre-line;text-align:left}
.passhint{margin:18px 0 0;font-size:13px;color:rgba(245,242,234,.5)}
body.has-passage .quizmain{padding-top:30px}
body.has-passage .qbig{font-size:26px}
body.has-passage #stage{max-width:860px;margin:0 auto;scroll-margin-top:16px}
body.has-passage #feedback{max-width:860px;margin:0 auto}
#stage{scroll-margin-top:80px}
#feedback{scroll-margin-top:80px}
@media(min-width:1100px){
  body.has-passage .passpanel{max-width:1000px}
  body.has-passage #stage,body.has-passage #feedback{max-width:1000px}
}

/* ============================================================
   HOMEPAGE — direction 1b, "standing directory"
   Added 2026-08-12. Everything here is scoped to body.home, so
   the other twelve public pages are untouched by this block.
   The rail is a permanent left column on desktop and an inline
   dark panel under the hero on phones, exactly as drawn at
   1280px and 390px in the mockup.
   ============================================================ */
:root{
  --taupe-deep:#8E8677;   /* hero band in 1b — a shade under --taupe */
  --ink-soft:#332F28;     /* rail row fill */
  --rail-w:286px;
  --rail-min:62px;
}

body.home{background:var(--cream)}

/* ---- the grid. Areas, not source order, so the phone gets
        hero -> directory -> content while the desktop gets the
        rail down the left of all three. ---- */
.shell{
  display:grid;
  grid-template-columns:var(--rail-w) minmax(0,1fr);
  grid-template-areas:"rail hero" "rail main" "rail foot";
  align-items:start;
  transition:grid-template-columns .18s ease;
}
.shell.rail-shut{grid-template-columns:var(--rail-min) minmax(0,1fr)}
.shell > .hero{grid-area:hero}
.shell > .rail{grid-area:rail}
.shell > main{grid-area:main}
.shell > footer{grid-area:foot}

/* ---- hero ---- */
body.home .hero{
  background:var(--taupe-deep);color:var(--cream);
  padding:64px 52px 58px;position:relative;overflow:hidden;
}
body.home .hero .watermark{
  position:absolute;right:-30px;top:-40px;width:300px;
  opacity:.16;mix-blend-mode:luminosity;pointer-events:none;
}
body.home .hero-in{position:relative;z-index:2}
body.home .hero .eyebrow{color:var(--gold)}
body.home .hero h1{
  font-size:clamp(31px,3.9vw,52px);line-height:1.12;
  margin:18px 0 0;max-width:17ch;color:var(--cream);
}
body.home .hero h1 span{color:var(--gold)}
body.home .hero .lede{
  margin:20px 0 0;max-width:52ch;font-size:17px;line-height:1.7;
  color:rgba(245,242,234,.9);
}

/* ---- the rail ---- */
.rail{
  background:var(--ink);color:var(--cream);
  align-self:stretch;          /* the dark column runs the full page height */
}
/* the panel inside it is what sticks, so the rail never leaves a cream gap
   under itself on a long page */
.rail-full,.shell.rail-shut .rail-collapsed{
  position:sticky;top:0;max-height:100vh;overflow-y:auto;overscroll-behavior:contain;
}
.rail-collapsed{display:none}
.shell.rail-shut .rail-collapsed{
  display:flex;flex-direction:column;align-items:center;gap:22px;
  padding:22px 0 26px;height:100%;
}
.shell.rail-shut .rail-full{display:none}
.rail-open{
  width:38px;height:38px;background:var(--gold);color:var(--ink);
  border:0;cursor:pointer;font-family:"IBM Plex Mono",monospace;
  font-size:17px;line-height:1;
}
.rail-open:hover{background:var(--cream)}
.rail-vert{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-deep);writing-mode:vertical-rl;
}
.rail-mark{width:34px;margin-top:auto;opacity:.5}

.rail-full{display:flex;flex-direction:column;gap:26px;padding:26px 22px 30px;min-height:100%}
.rail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.rail-name{display:block;font-family:"Marcellus",serif;font-size:19px;letter-spacing:.3em;color:var(--cream);text-decoration:none}
.rail-tag{display:block;font-size:15px;color:var(--gold);margin-top:4px}
.rail-close{
  width:30px;height:30px;flex:0 0 30px;background:transparent;
  border:1px solid rgba(245,242,234,.3);color:var(--cream);cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:14px;line-height:1;
}
.rail-close:hover{border-color:var(--gold);color:var(--gold)}
.rail-label{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);margin:0 0 10px;
}
.rail-stack{display:grid;gap:1px;background:rgba(245,242,234,.14)}
.rail-cta,.rail-row{
  display:flex;justify-content:space-between;gap:10px;
  padding:11px 14px;font-size:14.5px;text-decoration:none;
}
.rail-cta{background:var(--gold);color:var(--ink);font-weight:700}
.rail-cta:hover{background:var(--cream);color:var(--ink)}
.rail-row{background:var(--ink-soft);color:var(--cream)}
.rail-row span{color:var(--gold-deep)}
.rail-row:hover{background:#3d3931;color:var(--cream)}

.rail-group{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--ink-soft);border:1px solid rgba(245,242,234,.3);
  border-left:3px solid var(--gold);padding:11px 14px;margin:0;cursor:pointer;
  text-align:left;font:inherit;font-size:14.5px;color:var(--cream);
}
.rail-group .sign{font-family:"IBM Plex Mono",monospace;font-size:15px;color:var(--gold);line-height:1}
.rail-sub{
  display:flex;flex-direction:column;gap:2px;
  border:1px solid rgba(245,242,234,.16);border-top:0;
  border-left:3px solid rgba(223,205,131,.45);padding:2px 12px 4px;
}
.rail-fam{border-bottom:1px solid rgba(245,242,234,.12)}
.rail-fam:last-child{border-bottom:0}
.rail-fambtn{
  width:100%;display:flex;align-items:baseline;gap:10px;background:transparent;
  border:0;padding:9px 0;cursor:pointer;text-align:left;font:inherit;color:var(--cream);
}
.rail-fambtn .fam-name{font-family:"Marcellus",serif;font-size:15.5px;flex:1}
.rail-fambtn .fam-count{
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(245,242,234,.45);
}
.rail-fambtn .sign{font-family:"IBM Plex Mono",monospace;font-size:14px;color:var(--gold-deep);line-height:1}
.rail-items{padding-bottom:8px}
.rail-items a{
  display:flex;gap:10px;padding:7px 0 7px 12px;font-size:13.5px;
  text-decoration:none;color:rgba(245,242,234,.86);
  border-bottom:1px solid rgba(245,242,234,.1);
}
.rail-items a:last-child{border-bottom:0}
.rail-items a:hover{color:var(--gold)}
.rail-items .code{
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--gold);min-width:58px;
}
.rail-special,.rail-quiet{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 14px;font-size:14.5px;text-decoration:none;color:var(--cream);
  border:1px solid rgba(245,242,234,.3);
}
.rail-special{border-left:3px solid var(--gold)}
.rail-special span{color:var(--gold)}
.rail-quiet{border-color:rgba(245,242,234,.18);color:rgba(245,242,234,.85);margin-top:8px}
.rail-quiet span{color:var(--gold-deep)}
.rail-special:hover,.rail-quiet:hover{border-color:var(--gold);color:var(--gold)}
.rail-portals{display:grid;gap:8px}
.rail-portals a{
  display:flex;justify-content:space-between;gap:10px;
  border:1px solid rgba(245,242,234,.3);padding:10px 13px;font-size:14px;
  text-decoration:none;color:var(--cream);
}
.rail-portals a span{color:var(--gold)}
.rail-portals a:hover{border-color:var(--gold);color:var(--gold)}
.rail-foot{margin-top:auto;font-size:12.5px;line-height:1.7;color:rgba(245,242,234,.6)}
.rail-foot a{color:rgba(245,242,234,.75);text-decoration:none}
.rail-foot a:hover{color:var(--gold)}

/* ---- main column ---- */
body.home main{background:var(--cream)}
.mcol{padding:44px 52px 54px}
.ways{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:18px}
.way{
  background:var(--panel);border:1px solid var(--rule);border-top:3px solid var(--taupe-deep);
  padding:24px 22px;text-decoration:none;color:inherit;display:block;
  transition:transform .16s ease,border-color .16s ease;
}
.way:hover{transform:translateY(-3px);border-color:var(--gold-deep)}
.way-gold{border-top-color:var(--gold-deep)}
.way-kicker{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--taupe-dark);margin:0 0 8px;
}
.way-gold .way-kicker{color:var(--gold-deep)}
.way h3{font-family:"Marcellus",serif;font-weight:400;font-size:20px;margin:0 0 8px;color:var(--ink)}
.way-body{margin:0;font-size:14px;line-height:1.65;color:#4A443B}

.ptest{display:grid;grid-template-columns:1.5fr 1fr;border:1px solid var(--rule);margin-top:34px}
.ptest-say{background:var(--panel);padding:32px 34px}
.ptest-say h3{font-family:"Marcellus",serif;font-weight:400;font-size:26px;margin:12px 0;color:var(--ink)}
.ptest-say p{margin:0;font-size:15px;line-height:1.7;color:#4A443B}
.ptest-say .actions{margin-top:22px}
.ptest-nums{
  background:var(--taupe-deep);color:var(--cream);padding:32px 28px;
  display:flex;flex-direction:column;justify-content:center;gap:16px;
}
.ptest-nums > div{display:flex;align-items:baseline;gap:12px;font-size:13.5px;line-height:1.45;color:rgba(245,242,234,.86)}
.ptest-nums .num{font-family:"Marcellus",serif;font-size:31px;color:var(--gold);min-width:42px}
.board-head{margin-top:44px}
body.home .updates{margin-top:14px}

/* ---- the enquiry block keeps its own band, just narrower gutters ---- */
body.home .section{padding:64px 0}
body.home .section .wrap{padding:0 52px;max-width:none}
body.home footer .wrap{padding:0 52px;max-width:none}

/* ---- mobile top bar and sticky action bar: desktop hides both ---- */
.mbar,.mobar{display:none}

/* ============================================================
   PHONE — 390px reference. The rail stops being a rail and
   becomes the dark directory panel between hero and content.
   ============================================================ */
@media(max-width:900px){
  .shell{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"hero" "rail" "main" "foot";
  }
  .shell.rail-shut{grid-template-columns:minmax(0,1fr)}

  .mbar{
    display:flex;align-items:center;justify-content:space-between;
    background:var(--ink);color:var(--cream);padding:16px 18px;
    position:sticky;top:0;z-index:60;
  }
  .mbar-name{font-family:"Marcellus",serif;font-size:15px;letter-spacing:.28em;color:var(--cream);text-decoration:none}
  .mbar-menu{
    background:transparent;border:0;cursor:pointer;
    font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;color:var(--gold);
  }

  body.home .hero{padding:30px 18px 34px}
  body.home .hero .watermark{right:-40px;top:-30px;width:180px}
  body.home .hero .eyebrow{display:none}
  body.home .hero h1{font-size:clamp(26px,7.6vw,31px);max-width:none}
  body.home .hero .lede{font-size:15px;margin-top:14px}

  .rail{position:static;height:auto;overflow:visible}
  .rail-collapsed{display:none !important}
  .rail-full{display:flex !important;padding:20px 18px 24px;gap:20px;min-height:0}
  .rail-head,.rail-foot{display:none}
  .shell.rail-hidden .rail{display:none}

  .mcol{padding:24px 18px 30px}
  .ways{grid-template-columns:1fr;gap:12px;margin-top:14px}
  .way{padding:18px 20px}
  .ptest{grid-template-columns:1fr;margin-top:26px}
  .ptest-say{padding:24px 20px}
  .ptest-nums{padding:24px 20px}
  body.home .section{padding:40px 0}
  body.home .section .wrap,body.home footer .wrap{padding:0 18px}

  .mobar{
    position:sticky;bottom:0;z-index:60;
    background:var(--ink);padding:10px 12px;display:flex;gap:8px;
  }
  .mobar a{
    flex:1;text-align:center;padding:11px 0;font-weight:700;font-size:13.5px;
    color:var(--cream);text-decoration:none;border:1px solid rgba(245,242,234,.4);
  }
  .mobar-gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}
}

@media(min-width:901px){
  .shell > footer{background:var(--cream)}
}

/* 0905k — one masthead on every public page: Home · Subjects · Prices ·
   Try free · Guides · Portal. "Try free" is the gold word in the row. */
.masthead nav a.nav-try{color:var(--gold);font-weight:700}
.masthead nav a.nav-try:hover{color:#fff}
@media(max-width:480px){.masthead nav a.nav-try{display:none}}

/* 0905k — the online practice strip on a subject page */
.practice-strip{padding:34px 0}
.pstrip{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-left:3px solid var(--gold-deep);padding:6px 0 6px 22px}
.pstrip h2{font-family:"Marcellus",serif;font-weight:400;font-size:24px}
.pstrip p{max-width:56ch;line-height:1.6}
.pstrip-acts{display:flex;gap:10px;flex-wrap:wrap}
.pstrip-acts .btn{margin:0}
@media(max-width:640px){.pstrip{padding-left:16px}}