:root{
  --teal:#00a499; --teal-dk:#00746c; --amber:#faa434; --magenta:#ce0058; --purple:#702082;
  --bg:#f6f5f2; --surface:#ffffff; --surface-2:#f0eee8; --border:#e2ddd2;
  --ink:#221f1a; --ink-dim:#6b6558; --ink-faint:#948d7c;
  --ring: color-mix(in srgb, var(--teal) 40%, transparent);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15181a; --surface:#1d2124; --surface-2:#23282b; --border:#33393d;
    --ink:#eceae4; --ink-dim:#a8a296; --ink-faint:#78716477;
  }
}
:root[data-theme="dark"]{
  --bg:#15181a; --surface:#1d2124; --surface-2:#23282b; --border:#33393d;
  --ink:#eceae4; --ink-dim:#a8a296; --ink-faint:#78716477;
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  padding-inline:16px; padding-block:20px;
}
h1,h2,h3,h4,h5{font-family:"Montserrat","IBM Plex Sans",sans-serif; text-wrap:balance; margin:0;}
a{color:var(--teal-dk);}
.wrap{max-width:960px; margin:0 auto;}

/* ---- Top nav (shared across every page) ---- */
header.sitehead{display:flex; flex-direction:column; gap:10px; margin-bottom:18px;}
.brandrow{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:space-between;}
.brandname{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; border-radius:10px; transition:opacity .12s;}
.brandname:hover{opacity:.82;}
.brandname:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}
.brandname .mark{width:36px; height:36px; flex:none; display:block; object-fit:contain;}
.brandname .nm{font-family:"Montserrat",sans-serif; font-weight:800; font-size:17px; letter-spacing:-.01em;}
.brandname .nm small{display:block; font-family:"IBM Plex Sans",sans-serif; font-weight:500; font-size:11px; color:var(--ink-dim); letter-spacing:.02em;}
.rainbow{display:flex; gap:5px; margin:2px 0 4px;}
.rainbow span{flex:1 1 0; height:5px; border-radius:99px; display:block;}
.rainbow span:nth-child(1){background:var(--teal);}
.rainbow span:nth-child(2){background:var(--amber);}
.rainbow span:nth-child(3){background:var(--magenta);}
.rainbow span:nth-child(4){background:var(--purple);}
nav.sitenav{display:flex; flex-wrap:wrap; gap:6px;}
nav.sitenav a{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:12.5px; text-decoration:none;
  color:var(--ink-dim); background:var(--surface-2); border:1.5px solid var(--border); border-radius:999px;
  padding:7px 13px; white-space:nowrap; transition:background .12s,color .12s,border-color .12s;
}
nav.sitenav a:hover{border-color:var(--teal); color:var(--teal-dk);}
nav.sitenav a[aria-current="page"]{background:color-mix(in srgb, var(--teal) 16%, var(--surface)); color:var(--ink); border-color:var(--teal);}

/* ---- Hero / page intro ---- */
.hero{margin:6px 0 22px;}
.eyebrow{font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-dim); font-weight:700;}
.hero h1{font-size:clamp(24px,5vw,34px); font-weight:800; letter-spacing:-.01em; margin-top:6px;}
.hero .sub{color:var(--ink-dim); font-size:15px; max-width:68ch; margin-top:8px; line-height:1.55;}

/* ---- Cards ---- */
.cardgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; margin:18px 0;}
.card{
  display:block; text-decoration:none; color:inherit; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:18px; transition:border-color .12s, transform .12s;
}
.card:hover{border-color:var(--teal); transform:translateY(-2px);}
.card .cicon{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center; margin-bottom:12px;
  background:color-mix(in srgb, var(--teal) 16%, var(--surface)); color:var(--teal-dk); font-weight:800;
  font-family:"Montserrat",sans-serif; font-size:16px;
}
.card h3{font-size:15.5px; font-weight:700; margin-bottom:5px;}
.card p{font-size:13px; color:var(--ink-dim); line-height:1.5; margin:0;}

/* ---- Section blocks ---- */
section.block{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px; margin-bottom:16px;}
section.block h2{font-size:19px; font-weight:800; margin-bottom:10px;}
section.block h2 .emoji{margin-right:6px;}
section.block h3{font-size:14.5px; font-weight:700; margin:16px 0 6px;}
section.block h3:first-of-type{margin-top:4px;}
section.block p{font-size:14px; line-height:1.6; color:var(--ink); margin:0 0 10px;}
section.block p.dim{color:var(--ink-dim);}
section.block ul, section.block ol{margin:0 0 10px; padding-left:22px; font-size:14px; line-height:1.6;}
section.block li{margin-bottom:4px;}
section.block .note{
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:10px 14px;
  font-size:13px; color:var(--ink-dim); margin:10px 0;
}

/* ---- Subject grid (Subject Revision hub) ---- */
.subjgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; margin:16px 0 6px;}
.subjchip{
  display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink);
  background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:10px 12px;
  font-size:13.5px; font-weight:600; transition:border-color .12s, background .12s;
}
.subjchip:hover{border-color:var(--teal); background:color-mix(in srgb, var(--teal) 8%, var(--surface));}
.subjchip .sic{
  width:26px; height:26px; border-radius:8px; flex:none; display:grid; place-items:center;
  background:color-mix(in srgb, var(--yc,var(--teal)) 18%, var(--surface)); color:var(--yc,var(--teal-dk));
  font-family:"Montserrat",sans-serif; font-weight:800; font-size:11px;
}

/* ---- Aiming Higher tier cards (subject pages) ---- */
.tier{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px; margin-bottom:16px;}
.tier .tierlabel{
  display:inline-block; font-family:"Montserrat",sans-serif; font-size:12.5px; font-weight:700; color:#fff;
  background:var(--yc,var(--magenta)); padding:4px 12px; border-radius:999px; margin-bottom:14px;
}
.tier h4{font-size:14.5px; font-weight:700; margin:16px 0 6px; color:var(--ink);}
.tier h4:first-of-type{margin-top:0;}
.tier p{font-size:13.5px; line-height:1.6; color:var(--ink-dim); margin:0 0 8px;}
.tier ul{margin:0 0 10px; padding-left:20px; font-size:13.5px; line-height:1.55; color:var(--ink-dim);}
.tier li{margin-bottom:4px;}
.tier li::marker{color:var(--yc,var(--teal));}
.tier li b, .tier li strong{color:var(--ink); font-weight:700;}

/* ---- App/resource chips (Revision Apps etc) ---- */
.reslist{display:flex; flex-direction:column; gap:10px; margin:12px 0;}
.resitem{
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:12px 14px;
}
.resitem .rt{font-weight:700; font-size:13.5px; margin-bottom:3px;}
.resitem .rt a{color:var(--teal-dk); text-decoration:none;}
.resitem .rt a:hover{text-decoration:underline;}
.resitem .rd{font-size:12.5px; color:var(--ink-dim); line-height:1.5;}

/* ---- Breadcrumb back-link ---- */
.backlink{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:var(--ink-dim); text-decoration:none; margin-bottom:10px;}
.backlink:hover{color:var(--teal-dk);}

footer.note{
  margin-top:26px; padding-top:14px; border-top:1px solid var(--border);
  font-size:12px; color:var(--ink-faint); text-align:center;
}

@media (max-width:480px){
  nav.sitenav{gap:5px;}
  nav.sitenav a{padding:6px 10px; font-size:11.5px;}
}