/* ============================================================================
   Annexity — annexity.com

   The palette is not a choice made here. BRAND.md fixes it: four blues and
   white, no fifth colour, differences carried by value rather than hue. The
   only exception is the built / not-built status on the coverage ledger, which
   mirrors the one exception the app itself makes for right and wrong answers.

   Poppins labels, Karla reads — the same pairing the app registers at launch,
   so the site and the product are recognisably one thing.
   ========================================================================= */

:root {
  --navy:       #11235A;
  --medium:     #375A9C;
  --cornflower: #6189D8;
  --light:      #69A0E2;

  /* White is the brand's ground — BRAND.md names #FFFFFF and the app's lesson
     page holds it too. The app's *home* screen is the exception, not the rule:
     it is a screen made of white cards, so it needed a tinted ground for them to
     lift off. This site separates with rules and borders instead, so it does not.
     (Kenneth, 2026-09-06: "the website should have a white background not a blue".) */
  --snow:       #FFFFFF;   /* page ground */
  --mist:       #E6EFFA;   /* chip fills and table header bands */
  --sunk:       #F5F8FC;   /* form fields — barely tinted, so an input reads as one */
  --paper:      #FFFFFF;
  --ink:        #0E1726;
  --subtle:     #5A6D8B;   /* the neutral is the ramp desaturated, never a grey */
  --rule:       rgba(17, 35, 90, .11);
  --rule-firm:  rgba(17, 35, 90, .20);

  --built:      #2E7861;
  --gap:        #B04F4A;

  --measure:    34rem;     /* ~66 characters of Karla at body size */
}

@media (prefers-color-scheme: dark) {
  :root {
    --navy:       #8BA3DA;
    --medium:     #7192D3;
    --cornflower: #7A99DD;
    --light:      #83A5E2;
    --snow:       #0D1116;
    --mist:       #1A2333;
    --sunk:       #10161F;
    --paper:      #151A21;
    --ink:        #E9EEF6;
    --subtle:     #9AAABF;
    --rule:       rgba(139, 163, 218, .16);
    --rule-firm:  rgba(139, 163, 218, .30);
    --built:      #6FBFA0;
    --gap:        #DE8C86;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--snow);
  color: var(--ink);
  font-family: Karla, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* The four facets of the mark, laid flat. The only ornament on the site. */
.facets { display: flex; height: 4px; }
.facets i { flex: 1; }
.facets i:nth-child(1) { background: var(--light); }
.facets i:nth-child(2) { background: var(--cornflower); }
.facets i:nth-child(3) { background: var(--medium); }
.facets i:nth-child(4) { background: var(--navy); }

.wrap { width: min(72rem, 100% - 2.75rem); margin-inline: auto; }
.measure { max-width: var(--measure); }

/* ---- Header --------------------------------------------------------------

   Segmented by audience, with the two actions kept to the right. A student and
   a programme director want different things from this site, and neither should
   have to read past the other's pages to find them.
   ------------------------------------------------------------------------ */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--snow);
  position: sticky; top: 0; z-index: 40;
}
.masthead > .wrap {
  display: flex; align-items: center; gap: 2.25rem;
  min-height: 5rem;
}

.wordmark { display: flex; align-items: center; gap: .65rem; text-decoration: none; flex: none; }
.wordmark svg { width: 30px; height: auto; display: block; }
.wordmark span {
  font-family: Poppins, sans-serif; font-weight: 700; font-size: 1.42rem;
  letter-spacing: -.022em; color: var(--navy);
}

.nav { display: flex; align-items: center; gap: .35rem; }

.nav-link {
  font-family: Poppins, sans-serif; font-size: 1.02rem; font-weight: 500;
  color: var(--ink); text-decoration: none;
  background: none; border: 0; cursor: pointer;
  padding: .55rem .7rem; border-radius: 9px;
  display: inline-flex; align-items: center; gap: .38rem;
  line-height: 1.2;
}
.nav-link:hover { color: var(--navy); background: var(--mist); }
.nav-link[aria-current="page"] { color: var(--navy); font-weight: 600; }
.chev { width: 10px; height: 6px; flex: none; opacity: .7; transition: transform .15s ease; }
.nav-group.is-open .chev { transform: rotate(180deg); }

.nav-group { position: relative; }
.nav-menu {
  position: absolute; top: calc(100% + .45rem); left: 0;
  min-width: 21rem;
  background: var(--paper);
  border: 1px solid var(--rule-firm);
  border-radius: 13px;
  padding: .5rem;
  box-shadow: 0 14px 34px rgba(17, 35, 90, .13);
}
.nav-menu[hidden] { display: none; }
.nav-menu ul { list-style: none; margin: 0; padding: 0; }
.nav-menu a {
  display: block; text-decoration: none; padding: .6rem .75rem; border-radius: 9px;
}
.nav-menu a:hover { background: var(--mist); }
.mi-title {
  display: block; font-family: Poppins, sans-serif; font-weight: 600;
  font-size: .97rem; color: var(--navy);
}
.mi-note { display: block; font-size: .87rem; color: var(--subtle); line-height: 1.4; }

.actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; flex: none; }
.btn-sm { padding: .5rem 1rem; font-size: .94rem; border-radius: 9px; }

/* Narrow screens: one button, one panel. */
.menu-toggle {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--rule-firm); border-radius: 9px;
  padding: .55rem .65rem; cursor: pointer;
}
.bars { display: block; width: 18px; }
.bars i { display: block; height: 2px; background: var(--navy); border-radius: 2px; }
.bars i + i { margin-top: 4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.nav-panel { border-top: 1px solid var(--rule); background: var(--paper); padding: 1.1rem 0 1.5rem; }
.nav-panel[hidden] { display: none; }
.nav-panel .wrap { display: grid; gap: .2rem; }
.nav-panel a {
  font-family: Poppins, sans-serif; font-size: 1rem; font-weight: 500;
  color: var(--ink); text-decoration: none; padding: .55rem .2rem;
  border-bottom: 1px solid var(--rule);
}
.nav-panel a:hover { color: var(--navy); }
.panel-head {
  font-family: Poppins, sans-serif; font-size: .82rem; font-weight: 600;
  color: var(--subtle); margin: 1rem 0 .1rem;
}
.panel-actions { display: flex; gap: .6rem; margin-top: 1.25rem; }
.panel-actions .btn { flex: 1; text-align: center; }

@media (max-width: 68rem) {
  .nav, .actions { display: none; }
  .menu-toggle { display: block; }
  .masthead > .wrap { min-height: 4.5rem; gap: 1rem; }
}

/* ---- Type ---------------------------------------------------------------- */

h1, h2, h3 { font-family: Poppins, sans-serif; text-wrap: balance; margin: 0; }

h1 {
  font-weight: 700;
  font-size: clamp(2.15rem, 5.2vw, 3.4rem);
  line-height: 1.06; letter-spacing: -.025em;
  color: var(--navy);
}
h2 {
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.18; letter-spacing: -.018em;
  color: var(--navy);
}
h3 {
  font-weight: 600; font-size: 1.12rem; line-height: 1.35;
  letter-spacing: -.008em; color: var(--ink);
}

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.lede { font-size: 1.22rem; line-height: 1.55; color: var(--subtle); }
.note { font-size: .95rem; color: var(--subtle); }

a { color: var(--medium); text-underline-offset: .18em; text-decoration-color: var(--light); }
a:hover { color: var(--navy); }
:focus-visible { outline: 2px solid var(--medium); outline-offset: 3px; border-radius: 3px; }

strong { font-weight: 700; color: var(--ink); }

/* ---- Sections ------------------------------------------------------------ */

section { padding: clamp(3rem, 6vw, 4.75rem) 0; border-top: 1px solid var(--rule); }
section.flush { border-top: none; }
.section-head { margin-bottom: 2rem; }
.section-head p { margin-top: .75rem; color: var(--subtle); max-width: var(--measure); }

/* ---- Hero ---------------------------------------------------------------- */

.hero { padding: clamp(3.25rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); border-top: none; }
.hero-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 62rem) { .hero-grid { grid-template-columns: 1.05fr .95fr; } }
.hero h1 { margin-bottom: 1.15rem; }
.hero .lede { max-width: 30rem; }

.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; align-items: center; }
.btn {
  font-family: Poppins, sans-serif; font-weight: 600; font-size: .98rem;
  text-decoration: none; border-radius: 10px;
  padding: .72rem 1.35rem; display: inline-block; border: 1.5px solid transparent;
}
.btn-primary { background: var(--medium); color: #fff; }
.btn-primary:hover { background: var(--navy); color: #fff; }
.btn-quiet { border-color: var(--rule-firm); color: var(--navy); }
.btn-quiet:hover { border-color: var(--medium); color: var(--navy); }

/* ---- The ledger: the site's signature element ---------------------------- */

.ledger {
  background: var(--paper);
  border: 1px solid var(--rule-firm);
  border-radius: 14px;
  overflow: hidden;
}
.ledger-head {
  padding: .95rem 1.15rem;
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.ledger-head h3 { font-size: 1rem; }
.ledger-head .note { font-size: .82rem; }
/* The status column is the point of this table — on a narrow screen it was the
   first thing to fall off the right edge. Scroll the table, never clip it. */
.ledger-scroll { overflow-x: auto; }
.ledger table { width: 100%; border-collapse: collapse; min-width: 27rem; }
.ledger th, .ledger td {
  text-align: left; padding: .68rem 1.15rem; font-size: .93rem; white-space: nowrap;
  border-bottom: 1px solid var(--rule);
}
.ledger th {
  font-family: Poppins, sans-serif; font-weight: 500; font-size: .78rem;
  color: var(--subtle); letter-spacing: .01em;
}
.ledger td.num, .ledger th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ledger tr:last-child td { border-bottom: none; }
.ledger td.rot { font-weight: 500; }

.status { font-family: Poppins, sans-serif; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.status.is-built { color: var(--built); }
.status.is-gap { color: var(--gap); }

/* ---- Claims: a rule-separated list, not a row of identical cards --------- */

/* Capped so the dividing rules end where the text does. Left to run the full
   width of the page they float on past the last word by a third of the screen. */
.claims { display: grid; gap: 0; margin-top: .5rem; max-width: 56rem; }
.claim { padding: 1.6rem 0; border-top: 1px solid var(--rule); display: grid; gap: .6rem; }
.claim:first-child { border-top: none; padding-top: 0; }
@media (min-width: 52rem) {
  .claim { grid-template-columns: 15rem 1fr; gap: 2.5rem; align-items: start; }
}
.claim h3 { color: var(--navy); }
.claim p { color: var(--subtle); max-width: var(--measure); }
.claim .fact {
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: 1.9rem; line-height: 1; color: var(--navy);
  letter-spacing: -.02em; display: block; margin-bottom: .3rem;
}
.claim .fact + .fact-label { font-size: .9rem; color: var(--subtle); }

/* ---- Stat strip ---------------------------------------------------------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 1px;
         background: var(--rule); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.stats div { background: var(--paper); padding: 1.1rem 1.2rem; }
.stats b {
  font-family: Poppins, sans-serif; font-weight: 700; font-size: 1.5rem;
  color: var(--navy); display: block; letter-spacing: -.02em;
}
.stats span { font-size: .87rem; color: var(--subtle); }

/* ---- Prose blocks -------------------------------------------------------- */

.prose { max-width: var(--measure); }
.prose h2 { margin: 2.5rem 0 .9rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.9rem 0 .5rem; }
.prose ul { margin: 0 0 1.1rem; padding: 0; list-style: none; }
.prose ul li { padding-left: 1.15rem; position: relative; margin-bottom: .6rem; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--cornflower);
}

/* An aside that states a limit. Used for the honesty sections, which are the
   part of this site a competitor would not print. */
.plainly {
  border-left: 3px solid var(--cornflower);
  padding: .1rem 0 .1rem 1.15rem;
  margin: 1.6rem 0;
  max-width: var(--measure);
}
.plainly h3 { margin-bottom: .45rem; }
.plainly p { color: var(--subtle); }

/* ---- Split (two-up content) ---------------------------------------------- */

.split { display: grid; gap: 2rem; }
@media (min-width: 52rem) { .split { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.split > div > h3 { margin-bottom: .5rem; }
.split p { color: var(--subtle); }

/* ---- Panel (quiet inset) ------------------------------------------------- */

.panel {
  background: var(--paper); border: 1px solid var(--rule-firm);
  border-radius: 14px; padding: 1.6rem 1.75rem;
}

/* ---- Footer -------------------------------------------------------------- */

footer.site {
  border-top: 1px solid var(--rule);
  padding: 3rem 0 4rem;
  font-size: .93rem; color: var(--subtle);
  background: var(--snow);
}
.foot-grid { display: grid; gap: 2rem; margin-bottom: 2.25rem; }
@media (min-width: 44rem) { .foot-grid { grid-template-columns: repeat(4, 1fr); } }
.foot-grid h4 {
  font-family: Poppins, sans-serif; font-size: .82rem; font-weight: 600;
  color: var(--navy); margin: 0 0 .7rem;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.foot-grid a { color: var(--subtle); text-decoration: none; }
.foot-grid a:hover { color: var(--navy); text-decoration: underline; }
.legal-line { border-top: 1px solid var(--rule); padding-top: 1.5rem; max-width: 48rem; }
.legal-line p { margin-bottom: .5rem; font-size: .87rem; }

/* ---- Tables in content (blueprint) --------------------------------------- */

.scroller { overflow-x: auto; border: 1px solid var(--rule-firm); border-radius: 12px; margin: 0 0 1.5rem; }
table.bp { width: 100%; border-collapse: collapse; background: var(--paper); font-size: .92rem; }
table.bp th, table.bp td { text-align: left; padding: .6rem .95rem; border-bottom: 1px solid var(--rule); }
table.bp th {
  font-family: Poppins, sans-serif; font-weight: 500; font-size: .78rem; color: var(--subtle);
  background: var(--mist); position: sticky; top: 0;
}
table.bp td:not(:first-child), table.bp th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
table.bp tr:last-child td { border-bottom: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================================
   Carried pages

   The legal, trademark, blueprint, coverage, programs and ambassador pages keep
   the markup they had on the Season One site — legal text is not paraphrased and
   the blueprint's numbers are generated, so in both cases that HTML is the source
   of truth. This maps their class vocabulary onto the system above so they read
   as part of the same site rather than as imports.
   ========================================================================= */

/* Centred, not flush left. These pages are a single column of reading inside a
   72rem wrap, and left-aligning that column strands a third of a wide screen. */
.page { padding: clamp(3rem, 6vw, 4.5rem) 0; max-width: var(--measure); margin-inline: auto; }
.page.page-wide { max-width: 60rem; }
.page > h1 { margin-bottom: 1.1rem; }
.page h2 { margin: 2.5rem 0 .9rem; }
.page h3 { margin: 1.8rem 0 .5rem; }
.page-lede { font-size: 1.22rem; line-height: 1.55; color: var(--subtle); max-width: var(--measure); }
.page-body { margin-top: 2rem; }
.page-body p, .page-body li { max-width: var(--measure); }
.one-col > * { max-width: var(--measure); }

/* An uppercase eyebrow is a tell; these read as small sentence-case labels. */
.eyebrow {
  font-family: Poppins, sans-serif; font-weight: 600; font-size: .88rem;
  text-transform: none; letter-spacing: 0; color: var(--medium);
  margin: 0 0 .6rem;
}

.app-line { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.app-line li, .app-line span {
  font-family: Poppins, sans-serif; font-size: .82rem; font-weight: 500;
  background: var(--mist); color: var(--navy);
  padding: .35rem .75rem; border-radius: 8px;
}

.legal-updated { font-size: .9rem; color: var(--subtle); }
.legal-toc {
  background: var(--paper); border: 1px solid var(--rule-firm);
  border-radius: 12px; padding: 1.25rem 1.5rem; margin: 1.75rem 0;
}
.legal-toc h2 { font-size: 1rem; margin: 0 0 .7rem; }
.legal-toc ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; font-size: .95rem; }
.legal-body h2 { font-size: 1.28rem; }
.legal-body ul, .page-body ul { padding-left: 1.15rem; }
.legal-body li, .page-body li { margin-bottom: .5rem; }

/* Programs page: the four things a program gets. Rules, not shadowed cards. */
.pillar { padding: 1.5rem 0; border-top: 1px solid var(--rule); max-width: var(--measure); }
.pillar:first-of-type { border-top: none; }
.pillar-head { font-family: Poppins, sans-serif; font-weight: 600; font-size: 1.12rem; color: var(--navy); margin: 0 0 .45rem; }
.pillar p { color: var(--subtle); margin: 0; }

/* Forms — the programme enquiry and ambassador sign-ups. */
.form-card {
  background: var(--paper); border: 1px solid var(--rule-firm);
  border-radius: 14px; padding: 1.75rem; max-width: var(--measure);
}
.field { display: grid; gap: .35rem; margin-bottom: 1rem; }
.field label { font-family: Poppins, sans-serif; font-size: .88rem; font-weight: 500; color: var(--navy); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .98rem; color: var(--ink);
  background: var(--sunk); border: 1px solid var(--rule-firm);
  border-radius: 9px; padding: .6rem .75rem; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--medium); outline-offset: 1px; border-color: var(--medium);
}
.field-row { display: grid; gap: 1rem; }
@media (min-width: 34rem) { .field-row { grid-template-columns: 1fr 1fr; } }
.field.full { grid-column: 1 / -1; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: var(--subtle); margin-bottom: 1rem; }
.check input { margin-top: .3rem; flex: none; }
button, .form-card button {
  font-family: Poppins, sans-serif; font-weight: 600; font-size: .98rem;
  background: var(--medium); color: #fff; border: none;
  border-radius: 10px; padding: .72rem 1.35rem; cursor: pointer;
}
button:hover { background: var(--navy); }

/* Blueprint tables, generated from the app. */
.bp-scroll { overflow-x: auto; border: 1px solid var(--rule-firm); border-radius: 12px; margin: 0 0 1.75rem; }
.bp-rot { font-family: Poppins, sans-serif; font-weight: 600; color: var(--navy); margin: 2.25rem 0 .4rem; }
.bp-sum { color: var(--subtle); font-size: .95rem; margin: 0 0 .9rem; }
.bp-n, .bp-w, .bp-d, .bp-dn { text-align: right; font-variant-numeric: tabular-nums; }
.bp-depth { color: var(--built); font-weight: 600; }