/* =============================================================================
   Oxford English Global — Design System
   Editorial / academic warmth. Hand-built, intentionally not template-generic.
   Layers: tokens → base → typography → layout → components → utilities.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
  /* Palette — warm paper + Oxford ink. Muted, scholarly, low-saturation. */
  --paper:        #faf7f0;   /* page background, warm off-white */
  --paper-2:      #f3eee3;   /* raised surfaces / cards */
  --paper-edge:   #e7dfce;   /* hairline borders on paper */
  --ink:          #211f1b;   /* primary text, near-black warm */
  --ink-soft:     #4a463d;   /* secondary text */
  --ink-faint:    #756f60;   /* captions, meta */
  --oxford:       #14233f;   /* deep academic navy — primary brand */
  --oxford-2:     #24426f;   /* lighter navy for hover */
  --ember:        #b4502a;   /* terracotta accent — links, marks */
  --ember-soft:   #d9a98f;
  --gold:         #9a7b32;   /* muted gold — eyebrows, rules */
  --good:         #3f6b4d;

  /* Typography */
  --font-display: "Fraunces", "Hoefler Text", Georgia, "Times New Roman", serif;
  --font-body:    "Source Serif 4", Georgia, Cambria, "Times New Roman", serif;
  --font-sans:    ui-sans-serif, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale (clamp: min, vw, max) — major-third-ish */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.92rem);
  --step-0:  clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem);
  --step-1:  clamp(1.22rem, 1.13rem + 0.45vw, 1.5rem);
  --step-2:  clamp(1.46rem, 1.30rem + 0.80vw, 2.0rem);
  --step-3:  clamp(1.75rem, 1.48rem + 1.35vw, 2.7rem);
  --step-4:  clamp(2.10rem, 1.65rem + 2.25vw, 3.6rem);
  --step-5:  clamp(2.52rem, 1.80rem + 3.6vw, 4.8rem);

  /* Spacing scale */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4.5rem;
  --sp-9: 7rem;

  /* Structure */
  --measure: 68ch;            /* ideal reading width */
  --wrap: 74rem;              /* max site width */
  --wrap-narrow: 44rem;      /* article column */
  --radius: 4px;             /* restrained, editorial — not bubbly */
  --radius-lg: 8px;
  --rule: 1px solid var(--paper-edge);
  --shadow-1: 0 1px 2px rgba(20,35,63,.05), 0 6px 20px -12px rgba(20,35,63,.25);
  --shadow-2: 0 2px 6px rgba(20,35,63,.08), 0 24px 48px -24px rgba(20,35,63,.30);

  --ease: cubic-bezier(.2,.6,.2,1);
}

/* ----------------------------------------------------------------------------
   2. Base / reset
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Subtle warm paper grain via layered gradients — pure CSS, zero requests. */
  background-color: var(--paper);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(154,123,50,.05), transparent 60%),
    radial-gradient(120% 90% at 0% 100%, rgba(20,35,63,.04), transparent 55%),
    var(--paper);
  background-attachment: fixed;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;  /* oldstyle figures = editorial feel */
  overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--paper-2); }   /* avoids layout flash before load */
a { color: var(--oxford); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--ember); color: var(--paper); }
hr { border: 0; border-top: var(--rule); margin: var(--sp-6) 0; }

/* ----------------------------------------------------------------------------
   3. Typography
   ------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 540;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--oxford);
  text-wrap: balance;       /* tidy headline ragging */
}
h1 { font-size: var(--step-4); font-weight: 600; }
h2 { font-size: var(--step-3); margin-top: var(--sp-7); }
h3 { font-size: var(--step-2); margin-top: var(--sp-6); }
h4 { font-size: var(--step-1); margin-top: var(--sp-5); }
p  { max-width: var(--measure); }
p + p { margin-top: var(--sp-4); }

/* Eyebrow / kicker — small-caps label above headings. A signature detail. */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.eyebrow::before {
  content: "";
  width: 1.6rem; height: 2px;
  background: var(--gold);
  display: inline-block;
}

/* Prose: long-form article styling */
.prose { font-size: var(--step-0); }
.prose > * + * { margin-top: var(--sp-5); }
.prose p, .prose li { max-width: var(--measure); }
.prose h2, .prose h3 { max-width: var(--measure); }
.prose a {
  color: var(--ember);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ember-soft);
  transition: text-decoration-color .2s var(--ease);
}
.prose a:hover { text-decoration-color: var(--ember); }
.prose ul, .prose ol { padding-left: 1.4em; max-width: var(--measure); }
.prose li + li { margin-top: var(--sp-2); }
.prose strong { font-weight: 650; color: var(--ink); }
.prose blockquote {
  border-left: 3px solid var(--gold);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--ink-soft);
}
.prose code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.88em;
  background: var(--paper-2);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
/* Drop cap on first paragraph — quintessential editorial touch */
.prose.dropcap > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 600;
  float: left;
  font-size: 3.6em;
  line-height: 0.78;
  padding: 0.06em 0.12em 0 0;
  color: var(--ember);
}
/* Pull quote */
.pullquote {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.25;
  color: var(--oxford);
  border-top: 2px solid var(--paper-edge);
  border-bottom: 2px solid var(--paper-edge);
  padding: var(--sp-5) 0;
  margin: var(--sp-6) 0;
  text-align: center;
  max-width: 100%;
}

/* ----------------------------------------------------------------------------
   4. Layout primitives
   ------------------------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-7); }
.stack > * + * { margin-top: var(--sp-5); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
/* Fixed 4-up (e.g. homepage articles). Uses explicit tracks so a single card
   stays card-sized instead of stretching across the whole row. */
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 36rem) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
/* Fixed 3-up (blog index). Single card stays thin instead of stretching. */
.grid-3fix { grid-template-columns: 1fr; }
@media (min-width: 34rem) { .grid-3fix { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .grid-3fix { grid-template-columns: repeat(3, 1fr); } }
.skip-link {
  position: absolute; left: var(--sp-3); top: -3rem;
  background: var(--oxford); color: var(--paper);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius); z-index: 200;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--sp-3); }

/* ----------------------------------------------------------------------------
   5. Components
   ------------------------------------------------------------------------- */

/* --- Site header / nav --- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: var(--rule);
}
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); padding-block: var(--sp-3);
}
.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand__logo { height: 44px; width: auto; object-fit: contain; flex: none; background: transparent; }
.brand__mark {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); color: var(--oxford); letter-spacing: -.02em;
  line-height: 1;
}
.brand__mark b { color: var(--ember); font-weight: 600; }
.nav { display: flex; align-items: center; gap: var(--sp-5); }
.nav__list { display: flex; gap: var(--sp-5); list-style: none; padding: 0; }
.nav__link {
  font-family: var(--font-sans); font-size: var(--step--1); font-weight: 500;
  letter-spacing: .01em; color: var(--ink-soft); position: relative; padding-block: .4rem;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--ember); transition: width .22s var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--oxford); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; }

/* Language switcher */
.langswitch { position: relative; font-family: var(--font-sans); font-size: var(--step--1); }
.langswitch__btn {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  background: var(--paper-2); border: var(--rule); border-radius: 999px;
  padding: .35rem .8rem; color: var(--ink-soft); font-weight: 600;
}
.langswitch__btn:hover { border-color: var(--gold); color: var(--oxford); }
.langswitch__menu {
  position: absolute; right: 0; top: calc(100% + .5rem); min-width: 11rem;
  background: var(--paper); border: var(--rule); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1); padding: var(--sp-2); list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.langswitch[data-open="true"] .langswitch__menu { opacity: 1; visibility: visible; transform: none; }
.langswitch__menu a {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: .5rem .65rem; border-radius: var(--radius); color: var(--ink-soft);
}
.langswitch__menu a:hover { background: var(--paper-2); color: var(--oxford); }
.langswitch__menu a[aria-current="true"] { color: var(--ember); font-weight: 600; }

/* Hamburger (mobile) */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .4rem; position: relative; z-index: 200; }
.nav-toggle svg { width: 26px; height: 26px; stroke: var(--oxford); }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* Drawer backdrop (hidden on desktop) */
.nav__backdrop { display: none; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-sans); font-weight: 600; font-size: var(--step--1);
  letter-spacing: .01em; padding: .8rem 1.4rem; border-radius: var(--radius);
  border: 1.5px solid transparent; cursor: pointer; transition: all .2s var(--ease);
}
.btn--primary { background: var(--oxford); color: var(--paper); }
.btn--primary:hover { background: var(--oxford-2); transform: translateY(-1px); box-shadow: var(--shadow-1); }
.btn--ghost { background: transparent; color: var(--oxford); border-color: var(--paper-edge); }
.btn--ghost:hover { border-color: var(--oxford); background: var(--paper-2); }
.btn--ember { background: var(--ember); color: var(--paper); }
.btn--ember:hover { background: #9d4322; transform: translateY(-1px); box-shadow: var(--shadow-1); }

/* --- Forms (contact etc.) --- */
form label { display: flex; flex-direction: column; gap: .4rem; }
form label.stack > * + * { margin-top: 0; }          /* let the flex gap control spacing, not .stack */
form label > span { font-family: var(--font-sans); font-size: var(--step--1); color: var(--ink-faint); font-weight: 500; }
form input, form textarea, form select {
  width: 100%; box-sizing: border-box; font: inherit; color: var(--ink);
  padding: .7rem .8rem; border: var(--rule); border-radius: var(--radius); background: var(--paper);
}
form input:focus, form textarea:focus, form select:focus { border-color: var(--gold); }
form textarea { resize: vertical; min-height: 8rem; }

/* --- Hero --- */
.hero { padding-block: var(--sp-9) var(--sp-8); position: relative; }
.hero__inner { display: grid; gap: var(--sp-7); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 56rem) {
  .hero__inner { grid-template-columns: 1.15fr .85fr; gap: var(--sp-8); }
}
.hero h1 { font-size: var(--step-5); }
.hero__lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 40ch; margin-top: var(--sp-4); }
.hero__actions { margin-top: var(--sp-6); }
.hero__media {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-2); aspect-ratio: 4 / 5; background: var(--paper-2);
}
.hero__media::after { /* warm wash so stock photos feel on-brand */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, transparent 40%, rgba(20,35,63,.18));
}

/* Trust strip (E-E-A-T signals up top) */
.trustbar { border-block: var(--rule); background: var(--paper-2); }
.trustbar__row { display: flex; flex-wrap: wrap; gap: var(--sp-6); justify-content: center; padding-block: var(--sp-4); }
.trustbar__item { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-sans); font-size: var(--step--1); color: var(--ink-soft); font-weight: 500; }
.trustbar__item b { font-family: var(--font-display); font-size: var(--step-1); color: var(--oxford); font-weight: 600; }

/* --- Cards --- */
.card {
  background: var(--paper); border: var(--rule); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); border-color: var(--paper-edge); }
.card__media { aspect-ratio: 16 / 10; background: var(--paper-2); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.card__title { font-size: var(--step-1); margin: 0; }
.card__title a { color: var(--oxford); }
.card__title a:hover { color: var(--ember); }
.card__meta { font-family: var(--font-sans); font-size: var(--step--1); color: var(--ink-faint); display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.tag {
  font-family: var(--font-sans); font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--paper));
  padding: .2rem .55rem; border-radius: 999px; align-self: flex-start;
}

/* --- Feature blocks --- */
.feature { display: flex; flex-direction: column; gap: var(--sp-3); }
.feature__icon {
  width: 3rem; height: 3rem; border-radius: var(--radius); display: grid; place-items: center;
  background: color-mix(in srgb, var(--oxford) 8%, var(--paper)); color: var(--oxford);
}
.feature__icon svg { width: 1.5rem; height: 1.5rem; }

/* ----------------------------------------------------------------------------
   6. Article scaffolding (blog post)
   ------------------------------------------------------------------------- */
.article-head { padding-block: var(--sp-7) var(--sp-5); }
.article-head h1 { font-size: var(--step-4); max-width: 22ch; }
.article-head__lede { font-size: var(--step-1); color: var(--ink-soft); margin-top: var(--sp-4); max-width: 50ch; }

/* Breadcrumbs */
.breadcrumb { font-family: var(--font-sans); font-size: var(--step--1); color: var(--ink-faint); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; align-items: center; }
.breadcrumb li { display: inline-flex; align-items: center; gap: .4rem; }
.breadcrumb li:not(:last-child)::after { content: "/"; color: var(--paper-edge); }
.breadcrumb a { color: var(--ink-faint); }
.breadcrumb a:hover { color: var(--ember); }
.breadcrumb [aria-current="page"] { color: var(--ink-soft); }

/* Byline + author */
.byline { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-sans); font-size: var(--step--1); color: var(--ink-soft); flex-wrap: wrap; }
.byline__avatar { width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--paper-edge); }
.byline__updated { color: var(--ink-faint); }
.byline a { color: var(--oxford); font-weight: 600; }

/* Author box (E-E-A-T) */
.authorbox {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5);
  background: var(--paper-2); border: var(--rule); border-radius: var(--radius-lg);
  padding: var(--sp-6); margin-top: var(--sp-7);
}
.authorbox__avatar { width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; }
.authorbox__name { font-family: var(--font-display); font-size: var(--step-1); color: var(--oxford); }
.authorbox__role { font-family: var(--font-sans); font-size: var(--step--1); color: var(--gold); font-weight: 600; letter-spacing: .04em; margin-top: .15rem; }
.authorbox__creds { font-family: var(--font-sans); font-size: var(--step--1); color: var(--ink-faint); margin-top: .35rem; }
.authorbox__bio { margin-top: var(--sp-3); color: var(--ink-soft); }
@media (max-width: 34rem) { .authorbox { grid-template-columns: 1fr; } }

/* Key-takeaways callout */
.callout {
  background: color-mix(in srgb, var(--oxford) 5%, var(--paper));
  border: var(--rule); border-left: 3px solid var(--oxford);
  border-radius: var(--radius-lg); padding: var(--sp-5) var(--sp-6); margin: var(--sp-6) 0;
}
.callout__title { font-family: var(--font-sans); font-weight: 700; font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--oxford); margin-bottom: var(--sp-3); }
.callout ul { margin: 0; padding-left: 1.2em; }

/* Original-data / case-study block (Experience signal) */
.evidence {
  background: var(--paper); border: 1px dashed var(--gold);
  border-radius: var(--radius-lg); padding: var(--sp-5) var(--sp-6); margin: var(--sp-6) 0;
}
.evidence .eyebrow { color: var(--good); }
.evidence .eyebrow::before { background: var(--good); }

/* Table of contents */
.toc { font-family: var(--font-sans); font-size: var(--step--1); border: var(--rule); border-radius: var(--radius-lg); padding: var(--sp-5); background: var(--paper); }
.toc strong { display: block; margin-bottom: var(--sp-3); color: var(--oxford); letter-spacing: .04em; text-transform: uppercase; font-size: .72rem; }
.toc ol { list-style: none; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; padding: .25rem 0; }
.toc li::before { content: counter(toc, decimal-leading-zero) "  "; color: var(--gold); font-variant-numeric: tabular-nums; }
.toc a { color: var(--ink-soft); }
.toc a:hover { color: var(--ember); }

/* FAQ (accordion via <details>) */
.faq { margin-top: var(--sp-6); }
.faq__item { border-bottom: var(--rule); }
.faq__item summary {
  cursor: pointer; list-style: none; padding: var(--sp-5) 0;
  font-family: var(--font-display); font-size: var(--step-1); color: var(--oxford);
  display: flex; justify-content: space-between; gap: var(--sp-4); align-items: center;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-family: var(--font-sans); font-size: 1.5rem; color: var(--ember); transition: transform .2s var(--ease); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { padding-bottom: var(--sp-5); color: var(--ink-soft); }

/* Internal-links / related */
.related { margin-top: var(--sp-7); }
.related__grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.related__item { border: var(--rule); border-radius: var(--radius-lg); padding: var(--sp-5); background: var(--paper); transition: border-color .2s var(--ease); }
.related__item:hover { border-color: var(--gold); }
.related__item .tag { margin-bottom: var(--sp-3); }
.related__item a { color: var(--oxford); font-family: var(--font-display); font-size: var(--step-1); }
.related__item a:hover { color: var(--ember); }

/* Milestones / achievements timeline */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline__item { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--sp-5); padding: var(--sp-5) 0; border-top: var(--rule); align-items: start; }
.timeline__item:last-child { border-bottom: var(--rule); }
.timeline__year { font-family: var(--font-display); font-size: var(--step-2); color: var(--gold); font-weight: 600; font-variant-numeric: lining-nums; }
.timeline__body strong { display: block; color: var(--oxford); font-family: var(--font-display); font-size: var(--step-1); margin-bottom: .2rem; }
.timeline__body p { margin: 0; max-width: 52ch; }
@media (max-width: 34rem) { .timeline__item { grid-template-columns: 1fr; gap: var(--sp-2); } }

/* Study-abroad matcher */
.sa { margin-top: var(--sp-6); }

/* Featured top universities strip */
.sa-featured { margin-top: var(--sp-7); }
.sa-featured__grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); margin-top: var(--sp-4); }
@media (min-width: 38rem) { .sa-featured__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 58rem) { .sa-featured__grid { grid-template-columns: repeat(5, 1fr); } }
.sa-featured__item { display: flex; align-items: center; gap: var(--sp-3); text-align: left; background: var(--paper); border: var(--rule); border-radius: var(--radius-lg); padding: var(--sp-3); cursor: pointer; font: inherit; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.sa-featured__item:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.sa-featured__item .sa-card__logo { width: 38px; height: 38px; }
.sa-featured__name { font-family: var(--font-sans); font-size: var(--step--1); font-weight: 600; color: var(--oxford); line-height: 1.15; }
.sa-form { background: var(--paper-2); border: var(--rule); border-radius: var(--radius-lg); padding: var(--sp-6); display: grid; gap: var(--sp-5); }
.sa-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.sa-fieldset { border: var(--rule); border-radius: var(--radius); padding: var(--sp-5); margin: 0; }
.sa-fieldset legend { font-family: var(--font-sans); font-size: var(--step--1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); padding: 0 .5rem; }
.sa-check { flex-direction: row !important; align-items: center; gap: .55rem; }
.sa-check input { width: auto; }
.sa-check span { color: var(--ink-soft) !important; }

.sa-cards { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; margin-top: var(--sp-3); }
@media (min-width: 40rem) { .sa-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .sa-cards { grid-template-columns: repeat(3, 1fr); } }

.sa-card { border: var(--rule); border-radius: var(--radius-lg); padding: var(--sp-5); background: var(--paper); cursor: pointer; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); display: flex; flex-direction: column; gap: var(--sp-3); }
.sa-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.sa-card__head { display: flex; align-items: center; gap: var(--sp-3); }
.sa-card__logo { width: 46px; height: 46px; flex: none; border-radius: var(--radius); background: var(--paper-2); border: var(--rule); display: grid; place-items: center; overflow: hidden; }
.sa-card__logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.sa-card__initials { font-family: var(--font-display); font-weight: 600; color: var(--oxford); place-items: center; }
.sa-card__name { font-size: var(--step-0); margin: 0; line-height: 1.2; color: var(--oxford); }
.sa-card__loc { font-family: var(--font-sans); font-size: var(--step--1); color: var(--ink-faint); margin: .1rem 0 0; }
.sa-card__chance { margin-left: auto; text-align: center; font-family: var(--font-sans); line-height: 1; }
.sa-card__chance b { display: block; font-size: var(--step-2); font-family: var(--font-display); }
.sa-card__chance span { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.sa-card__chance.is-high b { color: var(--good); }
.sa-card__chance.is-mid b { color: var(--gold); }
.sa-card__chance.is-low b { color: var(--ember); }
.sa-card__improve { font-family: var(--font-sans); font-size: var(--step--1); color: var(--ink-soft); margin: 0; }
.sa-pill { display: inline-block; font-family: var(--font-sans); font-size: .72rem; font-weight: 600; background: color-mix(in srgb, var(--ember) 12%, var(--paper)); color: var(--ember); padding: .12rem .5rem; border-radius: 999px; margin: .1rem .1rem 0 0; }
.sa-card__meta { font-family: var(--font-sans); font-size: var(--step--1); color: var(--ink-faint); display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: auto; align-items: center; }
.sa-card__more { margin-left: auto; color: var(--ember); font-weight: 600; }

/* eyebrow used as result section header with a coloured tick before it */
.sa-results .eyebrow span { width: 1.6rem; height: 2px; display: inline-block; }

/* Detail modal */
.sa-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--sp-5); }
.sa-modal[hidden] { display: none; }
.sa-modal__backdrop { position: absolute; inset: 0; border: 0; cursor: pointer; background: rgba(20,35,63,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sa-modal__panel { position: relative; z-index: 1; background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); max-width: 40rem; width: 100%; max-height: 88vh; overflow-y: auto; padding: var(--sp-7); }
.sa-modal__x { position: absolute; top: var(--sp-4); right: var(--sp-4); background: none; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--ink-faint); }
.sa-modal__x:hover { color: var(--ember); }
.sa-modal__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); padding-right: var(--sp-6); }
.sa-modal__head .sa-card__logo { width: 56px; height: 56px; }
.sa-modal__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--sp-4); margin: var(--sp-5) 0; }
.sa-modal__stats div { background: var(--paper-2); border-radius: var(--radius); padding: var(--sp-4); font-family: var(--font-sans); }
.sa-modal__stats span { display: block; font-size: var(--step--1); color: var(--ink-faint); }
.sa-modal__stats strong { font-family: var(--font-display); font-size: var(--step-1); color: var(--oxford); }

/* University profile page (Wikipedia-style: content + infobox) */
.uni { display: grid; gap: var(--sp-7); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 56rem) { .uni { grid-template-columns: minmax(0, 1.8fr) minmax(16rem, 1fr); } }
.uni__main > * + * { margin-top: var(--sp-4); }
.uni__main h2 { margin-top: var(--sp-7); }
.uni__main ul { padding-left: 1.3em; }
.uni__main li + li { margin-top: var(--sp-2); }
.uni__box { border: var(--rule); border-radius: var(--radius-lg); background: var(--paper-2); padding: var(--sp-5); }
@media (min-width: 56rem) { .uni__box { position: sticky; top: 5.5rem; } }
.uni__logo { display: grid; place-items: center; padding: var(--sp-3) 0 var(--sp-5); }
.uni__logo .sa-card__logo { width: 96px; height: 96px; background: var(--paper); }
.uni__facts { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: var(--step--1); }
.uni__facts th, .uni__facts td { text-align: left; padding: .55rem 0; border-top: var(--rule); vertical-align: top; }
.uni__facts th { color: var(--ink-faint); font-weight: 600; width: 42%; }
.uni__facts td { color: var(--oxford); font-weight: 500; }
.sa-stub-list { columns: 2; column-gap: var(--sp-6); font-family: var(--font-sans); font-size: var(--step--1); padding-left: 1.1em; }
@media (max-width: 34rem) { .sa-stub-list { columns: 1; } }
.sa-stub-list li { break-inside: avoid; margin: .2rem 0; }
.sa-card__body { display: flex; flex-direction: column; gap: .2rem; }

/* Generic key/value blocks for country frameworks */
.fw-block + .fw-block { margin-top: var(--sp-5); }
.kv { display: grid; grid-template-columns: minmax(7rem, 13rem) 1fr; gap: .4rem var(--sp-5); margin: var(--sp-3) 0; align-items: start; }
.kv dt { font-family: var(--font-sans); font-size: var(--step--1); font-weight: 700; color: var(--ink-faint); }
.kv dd { margin: 0; max-width: var(--measure); }
.kv dd > p { margin: 0; }
.kv dd ul, .kv dd .kv { margin: .25rem 0; }
.kv .kv { grid-template-columns: 1fr; gap: .15rem; }
@media (max-width: 36rem) { .kv { grid-template-columns: 1fr; gap: .15rem; } .kv dt { margin-top: .5rem; } }

/* ----------------------------------------------------------------------------
   7. Footer
   ------------------------------------------------------------------------- */
.site-footer { background: var(--oxford); color: color-mix(in srgb, var(--paper) 78%, var(--oxford)); margin-top: var(--sp-9); }
.site-footer a { color: color-mix(in srgb, var(--paper) 80%, var(--oxford)); }
.site-footer a:hover { color: var(--paper); }
.site-footer__top { display: grid; gap: var(--sp-7); grid-template-columns: 1.4fr repeat(3, 1fr); padding-block: var(--sp-8); }
@media (max-width: 52rem) { .site-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 30rem) { .site-footer__top { grid-template-columns: 1fr; } }
.site-footer__brand .brand__mark { color: var(--paper); }
.site-footer h4 { color: var(--paper); font-size: var(--step--1); font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-bottom: var(--sp-4); }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: var(--sp-3); font-family: var(--font-sans); font-size: var(--step--1); }
.footer-contact { display: grid; gap: .35rem; font-style: normal; font-family: var(--font-sans); font-size: var(--step--1); margin-top: var(--sp-2); color: color-mix(in srgb, var(--paper) 70%, var(--oxford)); }
.footer-contact a { display: inline-block; }
.footer-contact__office { line-height: 1.45; }
.footer-contact__office b { color: var(--paper); font-weight: 600; }

.social { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.social__link {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 12%, transparent);
  color: color-mix(in srgb, var(--paper) 85%, var(--oxford));
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.social__link:hover { background: var(--ember); color: var(--paper); transform: translateY(-2px); }
.social__link svg { width: 1.15rem; height: 1.15rem; }

.site-footer__bottom { border-top: 1px solid color-mix(in srgb, var(--paper) 15%, var(--oxford)); padding-block: var(--sp-5); display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; font-family: var(--font-sans); font-size: var(--step--1); color: color-mix(in srgb, var(--paper) 60%, var(--oxford)); }

/* ----------------------------------------------------------------------------
   8. Utilities
   ------------------------------------------------------------------------- */
.center { text-align: center; }
.muted { color: var(--ink-faint); }
.lead { font-size: var(--step-1); color: var(--ink-soft); }
.mt-0 { margin-top: 0; } .mt-6 { margin-top: var(--sp-6); } .mt-7 { margin-top: var(--sp-7); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mx-auto { margin-inline: auto; }
.maxw-prose { max-width: var(--measure); }

/* Mobile nav — slide-in drawer with backdrop */
@media (max-width: 48rem) {
  .nav-toggle { display: inline-flex; }

  /* backdrop-filter on the header would make it the containing block for the
     fixed drawer (clipping it to the header). Drop it on mobile so the drawer
     and backdrop size to the full viewport. */
  .site-header { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }

  .nav__backdrop {
    display: block; position: fixed; inset: 0; border: 0; padding: 0; cursor: pointer;
    background: rgba(20, 35, 63, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s; z-index: 140;
  }
  .nav[data-open="true"] .nav__backdrop { opacity: 1; visibility: visible; }

  .nav__list {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: min(82vw, 20rem);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-left: var(--rule);
    padding: calc(var(--sp-8) + 0.75rem) var(--sp-6) var(--sp-7);
    box-shadow: var(--shadow-2);
    transform: translateX(100%); transition: transform .28s var(--ease);
    z-index: 150; overflow-y: auto; overscroll-behavior: contain;
  }
  .nav[data-open="true"] .nav__list { transform: none; }

  .nav__list li { border-bottom: var(--rule); }
  .nav__link { display: block; width: 100%; font-size: var(--step-1); padding: var(--sp-4) 0; color: var(--oxford); }
  .nav__link::after { display: none; }   /* the underline-grow animation is desktop-only */
}