/* ============================================================================
   Evidence Based Education Solutions
   Design system for an editorial "academic almanac": bone paper, navy ink, brass.
   ========================================================================= */

:root {
  /* Ink & paper */
  --ink: #141A2E;
  --ink-2: #1B2440;
  --ink-3: #2A3557;
  --body: #3E4762;
  --muted: #5A6178;
  --faint: #5F6780;

  --paper: #FAF7F2;
  --paper-2: #F3EDE3;
  --paper-3: #EBE3D6;
  --white: #FFFFFF;
  /* Card ground: warm, so panels read as paper rather than as cut-out white. */
  --card: #FDFBF7;

  /* Accents */
  --brass: #B8863B;
  --brass-2: #7F5720;
  --brass-3: #6E4A17;
  --brass-soft: #F4E8D2;
  --brass-line: #E0CBA4;

  --teal: #2F6F76;
  --teal-soft: #DCEAEB;
  --oxblood: #8C3A3A;
  --oxblood-2: #6F2C2C;
  /* The action colour: gold, with navy sitting on it. */
  --gold: #C9A45C;
  --gold-2: #E2C07A;
  --gold-3: #8A6B2E;
  --oxblood-soft: #F4E2E0;
  --sage: #4E6A5A;
  --sage-soft: #E2EAE3;

  --rule: #DED5C7;
  --rule-2: #C9BEAB;
  --rule-dark: rgba(250, 247, 242, 0.18);

  /* Shape & depth */
  --r-xs: 4px;
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --shadow-xs: 0 1px 2px rgba(20, 26, 46, 0.06);
  --shadow: 0 8px 26px rgba(20, 26, 46, 0.08), 0 2px 6px rgba(20, 26, 46, 0.04);
  --shadow-lg: 0 30px 70px rgba(20, 26, 46, 0.16), 0 8px 20px rgba(20, 26, 46, 0.07);

  /* Rhythm */
  --gutter: clamp(20px, 5vw, 56px);
  --measure: 1420px;
  --nav-h: 74px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: 'Karla', 'Segoe UI', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.68;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* Paper grain: fixed, non-interactive */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.36'/%3E%3C/svg%3E");
}

/* ── LT Beverage ──────────────────────────────────────────────────────────
   A script face by LyonsType, under the SIL Open Font License (the licence
   travels with the file in assets/fonts/LTBeverage-OFL.txt). Self-hosted, so
   it costs no third-party request and no visitor IP leaves the site for it.
   Used only for the emphasised phrases, never for body text: its lowercase
   x-height is 329/1000 against a cap height of 700, which reads beautifully
   at display size and poorly at any size a paragraph would use. */
@font-face {
  font-family: 'LT Beverage';
  src: url('fonts/LTBeverage.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ─────────────────────────── TYPOGRAPHY ─────────────────────────── */

.display, h1, h2, h3, h4 {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 600;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 5vw, 3.85rem); font-weight: 600; letter-spacing: -0.028em; line-height: 1.04; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.85rem); }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.22; }
h4 { font-size: 1.06rem; line-height: 1.3; }

em.wonk {
  font-family: 'LT Beverage', 'Fraunces', 'Iowan Old Style', Georgia, serif;
  /* The face is already a slanted script, so a synthesised italic on top of
     it would double the slant. */
  font-style: normal;
  font-weight: 400;
  /* Sized against its own x-height, not its em: at 1em the lowercase would
     sit far below the surrounding serif. Falls back harmlessly if the font
     does not load, because Fraunces is only 8% larger than intended. */
  font-size: 1.42em;
  line-height: 0.82;
  letter-spacing: 0;
  color: var(--gold-3);
}
/* On a dark ground the same accent lifts rather than darkens. */
.phero em.wonk,
.band-ink em.wonk,
.route em.wonk,
.footer em.wonk { color: var(--gold); }

.label {
  font-family: 'Karla', sans-serif;
  font-size: 0.688rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-2);
  display: inline-flex;
  align-items: center;
  gap: 0.66em;
}
.label::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--brass-line);
  flex: none;
}
.label.plain::before { display: none; }
/* An unsized inline SVG defaults to 300px wide and blows out the row. */
.label svg { width: 1.05em; height: 1.05em; flex: none; }
.label.on-dark { color: var(--brass-line); }
.label.on-dark::before { background: rgba(224, 203, 164, 0.5); }

.lede {
  font-size: clamp(1.05rem, 1.55vw, 1.24rem);
  line-height: 1.62;
  color: var(--ink-3);
  max-width: 62ch;
  text-wrap: pretty;
}
.prose p + p { margin-top: 1.05em; }
.prose { max-width: 68ch; text-wrap: pretty; }

/* The "read more" link under a short introduction: the same brass inline link
   as the one under each portrait in the Tallinn section. */
.org-more { margin-top: clamp(20px, 2.4vw, 28px); }
.org-more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.938rem;
  font-weight: 700;
  color: var(--brass-3);
  text-decoration: none;
}
.org-more svg { width: 16px; height: 16px; transition: transform 0.35s ease; }
.org-more a:hover svg { transform: translateX(5px); }

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ─────────────────────────── LAYOUT ─────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-wide { max-width: 1420px; }

section { position: relative; }
.band { padding-block: clamp(56px, 8vw, 108px); }
.band-tight { padding-block: clamp(40px, 5vw, 68px); }
.band-paper2 { background: var(--paper-2); }
.band-ink {
  background:
    radial-gradient(115% 90% at 88% 8%, rgba(184, 134, 59, 0.22), transparent 62%),
    radial-gradient(90% 80% at 4% 92%, rgba(47, 111, 118, 0.28), transparent 60%),
    var(--ink);
  color: rgba(250, 247, 242, 0.78);
}
.band-ink h1, .band-ink h2, .band-ink h3, .band-ink h4 { color: var(--paper); }
.band-ink .lede { color: rgba(250, 247, 242, 0.82); }

.rule-top { border-top: 1px solid var(--rule); }

.section-head { max-width: 760px; margin-bottom: clamp(30px, 4vw, 52px); }
.section-head .label { margin-bottom: 16px; }
/* h1 as well as h2: /about opens with a section-head that carries the page's
   h1, and without this it sat flush against its own lede. */
.section-head h1, .section-head h2 { margin-bottom: 0.5em; }
/* An h1 in a section-head is titling a section, not a hero, so it steps down
   off the global hero scale to sit level with the h2s on every other band. */
.section-head h1 { font-size: clamp(1.85rem, 3.6vw, 2.85rem); letter-spacing: -0.015em; line-height: 1.1; }
.section-head .lede { margin: 0; }

/* Hairline decorative rule with a brass tick */
.tick-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block: clamp(28px, 4vw, 44px);
}
.tick-rule::before, .tick-rule::after {
  content: "";
  height: 1px;
  background: var(--rule);
  flex: 1;
}
.tick-rule span {
  width: 7px; height: 7px;
  border: 1px solid var(--brass);
  transform: rotate(45deg);
  flex: none;
}

/* ─────────────────────────── NAV ─────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(250, 247, 242, 0.9);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.nav-in {
  max-width: 1420px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 22px;
}

/* The initials, a hairline, and the full name in small caps beneath. Two
   elements, one typographic idea — the serif states the name, the sans spells
   it out. Nothing is boxed, so the mark sits on the paper rather than on top
   of it. */
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  text-decoration: none;
  flex: none;
  margin-right: auto;
}
.brand-mark {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-variation-settings: 'SOFT' 20, 'WONK' 0;
  font-weight: 700;
  font-size: 1.62rem;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #AE7E35;
  /* The rule runs the width of the initials only, so it reads as an underline
     of the mark and not as a divider across the whole lockup. */
  border-bottom: 1px solid rgba(184, 135, 60, 0.45);
  padding-bottom: 7px;
}
/* The expansion of the initials, set in the nav's own face so it recedes. */
.brand-caps {
  margin-top: 8px;
  font-family: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.594rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  line-height: 1.5;
  color: #7A6A4E;
  white-space: nowrap;
}
/* On navy the same lockup only needs lighter ink. */
.footer .brand-mark { color: var(--gold); border-bottom-color: rgba(201, 164, 92, 0.38); }
.footer .brand-caps { color: rgba(240, 229, 211, 0.74); }
.nav-only-mobile { display: none; }

.nav-links { display: flex; align-items: center; gap: clamp(8px, 1.4vw, 22px); }
.nav-list { display: flex; align-items: center; gap: 3px; list-style: none; margin: 0; padding: 0; }

/* Regions came back into the bar as one item with a panel under it. */
.nav-has-menu { position: relative; }
.nav-regions {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.nav-regions:hover { color: var(--ink); background: var(--paper-2); }
.nav-regions svg { width: 14px; height: 14px; transition: transform 0.3s ease; }
.nav-regions[aria-expanded='true'] { color: var(--gold-3); }
.nav-regions[aria-expanded='true'] svg { transform: rotate(180deg); }
.nav-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(520px, calc(100vw - 2 * var(--gutter)));
  padding: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: 0 30px 60px -30px rgba(20, 27, 43, 0.35);
  animation: nav-drop 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  z-index: 5;
}
/* Closed is the CSS default, opened by a class, so the panel is not held
   shut by an attribute that only script can remove. */
.nav-menu { display: none; }
.nav-menu.is-open { display: grid; }
@keyframes nav-drop { from { opacity: 0; transform: translateY(-6px); } }
.nav-mi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.nav-mi:hover { background: rgba(138, 107, 46, 0.07); }
/* The bar's links never wrap; inside the panel they must. The selector has to
   out-specify `.nav-links a`, which sets nowrap for the bar itself. */
.nav-links .nav-mi,
.nav-links .nav-mi-s { white-space: normal; }
.nav-mi-t {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-size: 1.062rem;
  font-weight: 600;
  color: var(--ink);
}
.nav-mi-t i { width: 8px; height: 8px; border-radius: 50%; background: var(--rc, var(--brass)); flex: none; }
.nav-mi-s { font-size: 0.781rem; line-height: 1.45; color: var(--muted); }

/* The call, back in the bar: gold, with navy on it. */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding: 11px 19px;
  border-radius: 999px;
  background: var(--gold);
  color: #0D1422;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.nav-links .nav-cta { color: #0D1422; }
.nav-cta:hover { background: var(--gold-2); transform: translateY(-1px); }
.nav-cta svg { width: 15px; height: 15px; }
.nav-links a {
  display: block;
  padding: 9px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
  border-radius: var(--r-sm);
  position: relative;
  transition: color 0.18s ease, background-color 0.18s ease;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); background: var(--paper-2); }
.nav-links a[aria-current="page"] { color: var(--brass-3); }
.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 3px;
  height: 2px;
  background: var(--brass);
  border-radius: 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 21px;
  border-radius: 100px;
  font-size: 0.906rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.005em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s ease,
    background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; flex: none; }

/* One flat colour, no gradient, no glow, no icon. The words are the button:
   gold, with navy text on it. */
.btn-primary {
  background: var(--gold);
  color: #0D1422;
}
.btn-primary:hover { background: var(--gold-2); }

.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--ink-2); }

.btn-ghost {
  border-color: var(--rule-2);
  color: var(--ink);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--brass); color: var(--brass-3); background: rgba(244, 232, 210, 0.5); }

.btn-on-dark {
  border-color: rgba(250, 247, 242, 0.3);
  color: var(--paper);
}
.btn-on-dark:hover { border-color: var(--brass-line); background: rgba(250, 247, 242, 0.08); }

.btn-lg { padding: 16px 27px; font-size: 0.969rem; }
.btn-sm { padding: 10px 16px; font-size: 0.844rem; }

.nav-burger {
  display: none;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-sm);
  color: var(--ink);
  flex: none;
}
.nav-burger svg { width: 20px; height: 20px; }

@media (max-width: 1400px) {
  .nav-links a { padding: 9px 9px; font-size: 0.844rem; }
}
/* Three links and a wordmark: they stay inline much further down than the
   old nav did, now that the CTA no longer sits beside them. */
@media (max-width: 1120px) {
  .nav-burger { display: inline-flex; }
  .nav-only-mobile { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-has-menu { position: static; }
  .nav-regions { width: 100%; justify-content: space-between; padding: 15px 4px; font-size: 1.03rem; border-bottom: 1px solid var(--rule); border-radius: 0; }
  .nav-menu {
    position: static;
    width: auto;
    grid-template-columns: 1fr;
    border: 0;
    box-shadow: none;
    background: none;
    padding: 6px 0 10px;
    animation: none;
  }
  .nav-cta { margin-top: 16px; justify-content: center; }
  .nav-links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 10px var(--gutter) 22px;
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav-links a {
    padding: 15px 4px;
    font-size: 1.03rem;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
  }
  .nav-links a[aria-current="page"]::after { left: 4px; right: auto; width: 22px; bottom: 8px; }
  .nav-list li:last-child a { border-bottom: none; }
  /* The region items inside the panel keep their own card styling. */
  .nav-menu .nav-mi { padding: 11px 10px; border-bottom: 0; font-size: inherit; }
  .nav-cta { border-bottom: 0; }
}
/* Small phones: the wordmark shrinks by type size rather than by a fixed box,
   which a four-letter mark would simply overflow. */
@media (max-width: 430px) {
  .brand-mark { font-size: 1.42rem; padding-bottom: 6px; }
  .brand-caps { margin-top: 7px; font-size: 0.531rem; letter-spacing: 0.15em; }
}
@media (max-width: 370px) {
  .brand-mark { font-size: 1.3rem; letter-spacing: 0.08em; }
  .brand-caps { font-size: 0.484rem; letter-spacing: 0.13em; }
}

/* ─────────────────────────── HERO (home) ─────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 92% 0%, rgba(184, 134, 59, 0.14), transparent 60%),
    /* Anchored off the bottom edge: at 0% 100% the wash was strongest exactly
       where the section clips, which drew a hard line across the page. */
    radial-gradient(58% 46% at -6% 58%, rgba(47, 111, 118, 0.10), transparent 66%),
    var(--paper);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
  padding-block: clamp(48px, 7vw, 96px);
}
.hero-copy > * + * { margin-top: 22px; }
.hero h1 { margin-top: 18px; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  align-items: center;
  margin-top: 30px;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.hero-meta div {
  font-size: 0.812rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-meta svg { width: 15px; height: 15px; color: var(--brass); flex: none; }

/* Offset framed photo */
.frame {
  position: relative;
  isolation: isolate;
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r);
  position: relative;
  z-index: 1;
}
.frame::before {
  content: "";
  position: absolute;
  inset: 15px -15px -15px 15px;
  border: 1px solid var(--brass-line);
  border-radius: var(--r);
  z-index: 0;
}
.frame-tall { aspect-ratio: 4 / 5; }
.frame-wide { aspect-ratio: 16 / 10; }
.frame figcaption {
  margin-top: 26px;
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--faint);
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .frame-tall { aspect-ratio: 16 / 11; }
  .frame::before { inset: 11px -11px -11px 11px; }
}

/* ─────────────────────────── PAGE HERO (regional) ─────────────────────────── */

.phero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: rgba(250, 247, 242, 0.8);
}
/* The region's own colour, washed across the dark ground. */
.phero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(74% 120% at 82% 34%, var(--rc-glow, transparent) 0%, transparent 66%);
}
.phero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(46px, 6.4vw, 92px);
}
.phero-in { max-width: 680px; }

/* The same map as the home cards, read on a dark ground. */
.phero-map .rc-map { padding: 0; }
.phero-map svg { width: 100%; height: auto; display: block; }
.phero .rm-ctx path { fill: rgba(250, 247, 242, 0.05); stroke: rgba(250, 247, 242, 0.1); }
.phero .rm-fill path { fill: var(--rc-on-dark, #6C7A9E); stroke: rgba(250, 247, 242, 0.45); }
.phero .rm-label { fill: var(--paper); }
.phero .rm-sea { fill: rgba(250, 247, 242, 0.3); }
.phero .rm-dot { fill: var(--paper); }
.phero .rm-lead { stroke: rgba(250, 247, 242, 0.45); }

/* The member countries, stated plainly under the intro. */
.phero-countries {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}
.phero-countries li {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(250, 247, 242, 0.22);
  background: rgba(250, 247, 242, 0.06);
  font-size: 0.812rem;
  font-weight: 700;
  color: rgba(250, 247, 242, 0.88);
}

@media (max-width: 900px) {
  .phero-grid { grid-template-columns: 1fr; gap: 30px; }
  .phero-map { max-width: 520px; }
}
.phero h1 { color: var(--paper); margin-block: 18px 20px; }
.phero .lede { color: rgba(250, 247, 242, 0.84); }
.phero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px; }

.crumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.52);
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--brass-line); }
.crumbs svg { width: 12px; height: 12px; opacity: 0.6; }

/* ─────────────────────────── REGION CARDS (home) ─────────────────────────── */
/* Each card carries its own map of the region, framed and labelled by
   generate.mjs from the countries listed in data.mjs. */

.regions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
}
.region-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  align-items: stretch;
  min-height: 292px;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.region-card::before {
  content: ;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(72% 116% at 0% 42%, var(--rc-tint) 0%, transparent 64%);
}
.region-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--rule-2); }

.rc-baltic-states   { --rc-on-dark: #3E8B92; --rc-glow: rgba(47, 111, 118, 0.42); }
.rc-central-europe  { --rc-on-dark: #A85252; --rc-glow: rgba(140, 58, 58, 0.40); }
.rc-western-europe  { --rc-on-dark: #5C6C9C; --rc-glow: rgba(42, 53, 87, 0.55); }
.rc-northern-europe { --rc-on-dark: #5E8770; --rc-glow: rgba(78, 106, 90, 0.42); }
.rc-baltic-states,   .fp-r-baltic-states   { --rc: var(--teal);    --rc-tint: rgba(47, 111, 118, 0.11); }
.rc-central-europe,  .fp-r-central-europe  { --rc: var(--oxblood); --rc-tint: rgba(140, 58, 58, 0.10); }
.rc-western-europe,  .fp-r-western-europe  { --rc: var(--ink-3);   --rc-tint: rgba(42, 53, 87, 0.09); }
.rc-northern-europe, .fp-r-northern-europe { --rc: var(--sage);    --rc-tint: rgba(78, 106, 90, 0.11); }

.rc-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: clamp(22px, 2.3vw, 30px);
  min-width: 0;
}
.region-card h3 { color: var(--ink); margin-bottom: 9px; }
.region-card .rc-count {
  font-size: 0.688rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brass-2);
  margin-bottom: 13px;
}
.region-card p {
  font-size: 0.938rem;
  line-height: 1.6;
  color: var(--body);
  max-width: 34ch;
  text-wrap: pretty;
}
.region-card .rc-go {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.844rem;
  font-weight: 700;
  color: var(--ink);
}
.region-card .rc-go svg { width: 16px; height: 16px; flex: none; transition: transform 0.25s ease; }
.region-card:hover .rc-go { color: var(--brass-3); }
.region-card:hover .rc-go svg { transform: translateX(5px); }

/* ---- the map half ---- */
.rc-map { position: relative; z-index: 1; min-width: 0; align-self: stretch; }
.rc-map svg { width: 100%; height: 100%; display: block; }

.rm-ctx path {
  fill: none;
  stroke: var(--rule-2);
  stroke-width: 1.1;
  stroke-linejoin: round;
  opacity: 0.6;
}
.rm-fill path {
  fill: var(--rc);
  fill-opacity: 0.5;
  stroke: var(--card);
  stroke-width: 1.5;
  stroke-linejoin: round;
  transition: fill-opacity 0.35s ease;
}
.region-card:hover .rm-fill path { fill-opacity: 0.78; }
.rm-dot { fill: var(--rc); }
.rm-lead { stroke: var(--rc); stroke-width: 1.1; opacity: 0.45; }
.rm-label {
  fill: var(--ink-3);
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.rm-sea {
  fill: var(--faint);
  font-family: 'Karla', sans-serif;
  font-weight: 600;
  letter-spacing: 0.17em;
  opacity: 0.65;
}

@media (max-width: 1240px) {
  /* Two cards per row squeezes each map under ~300px, where the country
     labels drop below 8px. One per row keeps them readable. Capping the map
     track stops a full-width card blowing the labels up to 20px instead. */
  .regions { grid-template-columns: 1fr; }
  .region-card { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
}
@media (max-width: 680px) {
  .region-card { grid-template-columns: 1fr; min-height: 0; }
  .rc-copy { padding-bottom: 6px; }
  .rc-map { height: 210px; }
  .region-card p { max-width: none; }
}

/* ─────────────────────────── HOMEPAGE UNIVERSITY STRIP ─────────────────────────── */
/* Ported from the design: tall tiles carrying the same drawn skyline as the
   university cards, with the caption dropped into a gradient at the foot.
   Alternate tiles sit a little lower so the row reads as a strip rather than
   a table. */

.ustrip {
  display: flex;
  gap: clamp(14px, 1.6vw, 24px);
  align-items: flex-start;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
  /* Room for the lifted tiles and the hover rise, which would otherwise be
     clipped by the scroll container. */
  padding-top: 10px;
  margin-top: -10px;
  scrollbar-width: thin;
}
.ust,
.ust-all {
  flex: 1 1 0;
  min-width: 186px;
  max-width: 260px;
  aspect-ratio: 230 / 440;
  border-radius: 20px;
  box-sizing: border-box;
  scroll-snap-align: start;
  text-decoration: none;
  color: var(--ink);
}
.ust {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(20, 27, 43, 0.1);
  box-shadow: 0 30px 50px -36px rgba(20, 27, 43, 0.35);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s ease;
}
.ust:hover { transform: translateY(-8px); box-shadow: 0 40px 60px -34px rgba(20, 27, 43, 0.5); }
.ust:focus-visible { outline: 2px solid var(--brass-2); outline-offset: 4px; }
.ust.is-lifted, .ust-all { margin-top: clamp(16px, 2.6vw, 40px); }

/* The card artwork, bottom-anchored so the sky fills the tall tile above it. */
.ust .uc-sky { position: absolute; inset: 0; }
.ust .uc-sky svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ust .uc-sky svg { transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ust:hover .uc-sky svg { transform: scale(1.04); }
.ust .uc-sun { width: 40px; height: 40px; right: 28px; top: 48px; }
.ust .uc-cloud { width: 56px; left: 22px; top: 90px; }

.ust-country {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--rc, rgba(20, 27, 43, 0.6));
  color: #F3EFE6;
  font-size: 0.594rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ust-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 60px 20px 20px;
  background: linear-gradient(180deg, rgba(20, 27, 43, 0) 0%, rgba(20, 27, 43, 0.92) 55%);
  color: #F3EFE6;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ust-c { font-size: 0.656rem; letter-spacing: 0.18em; text-transform: uppercase; color: #C9A45C; }
.ust-n {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-size: 1.188rem;
  font-weight: 600;
  line-height: 1.15;
}
.ust-go {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.75rem;
  color: rgba(243, 239, 230, 0.7);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ust-go svg { width: 13px; height: 13px; flex: none; }
.ust:hover .ust-go, .ust:focus-visible .ust-go { opacity: 1; transform: none; }

/* The closing tile: no skyline, no photograph, just the count. */
.ust-all {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 24px;
  border: 1.5px dashed rgba(138, 107, 46, 0.45);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.ust-all:hover { background: rgba(138, 107, 46, 0.06); border-color: rgba(138, 107, 46, 0.7); }
.ust-big {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-size: clamp(2.6rem, 4.4vw, 4rem);
  font-weight: 600;
  line-height: 1;
  color: var(--brass-2);
}
.ust-t { font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif; font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.ust-s { font-size: 0.812rem; line-height: 1.5; color: var(--body); }
.ust-all .ust-go { position: static; opacity: 1; transform: none; color: var(--brass-3); font-weight: 700; margin-top: 4px; }

@media (max-width: 860px) {
  .ustrip { gap: 14px; }
  .ust, .ust-all { min-width: 172px; }
  .ust.is-lifted, .ust-all { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ust, .ust .uc-sky svg, .ust-go { transition: none; }
  .ust:hover { transform: none; }
  .ust-go { opacity: 1; transform: none; }
}

/* ─────────────────────────── THE RANKINGS CHART ─────────────────────────── */
/* Ported from the design: one lane per university on a shared #1–#1000 scale.
   A published band is drawn as a wide bar and a published position as a narrow
   one, so the chart carries the same precision the ranking does. */

.rk-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.75rem; color: var(--muted); }
.rk-legend span { display: inline-flex; align-items: center; }
.rk-legend i {
  display: inline-block;
  width: 22px;
  height: 8px;
  border-radius: 4px;
  background: var(--ink);
  margin-right: 8px;
}
.rk-legend i.g { background: var(--brass-2); height: 5px; }

.rk-chart { display: flex; flex-direction: column; }
.rk-axis,
.rk-row {
  display: grid;
  grid-template-columns: minmax(180px, 250px) minmax(0, 1fr) 118px;
  gap: clamp(18px, 2.2vw, 32px);
}
.rk-axis { align-items: end; padding-top: 26px; padding-bottom: 12px; }
.rk-hdr {
  font-size: 0.688rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}
.rk-scale { position: relative; height: 26px; }
.rk-t {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  font-size: 0.688rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rk-t::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 6px;
  margin-top: 4px;
  background: var(--rule-2);
}
.rk-better {
  position: absolute;
  left: 0;
  top: -22px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.688rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-2);
}
.rk-better svg { width: 14px; height: 14px; transform: rotate(180deg); }

.rk-rows { list-style: none; margin: 0; padding: 0; }
.rk-row {
  align-items: center;
  padding-block: 20px;
  border-top: 1px solid var(--rule);
  transition: background-color 0.3s ease;
}
.rk-rows li:last-child { border-bottom: 1px solid var(--rule); }
.rk-row:hover { background: rgba(138, 107, 46, 0.04); }
.rk-uni { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rk-n {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}
.rk-c { font-size: 0.688rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.rk-lane { position: relative; height: 48px; }
.rk-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 10% 100%;
}
.rk-bar {
  position: absolute;
  border-radius: 9px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
}
.rk-bar.is-qs { top: 8px; height: 18px; }
.rk-bar.is-the { top: 30px; height: 8px; border-radius: 4px; background: var(--brass-2); }
.rk-row.in .rk-bar { animation: rk-grow 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.rk-row.in .rk-bar.is-the { animation-delay: 0.25s; }
@keyframes rk-grow { to { transform: scaleX(1); } }

.rk-lbl {
  position: absolute;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  margin-left: 8px;
}
.rk-lbl.is-near { margin-left: 0; margin-right: 8px; }
.rk-lbl.is-qs {
  top: 6px;
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-size: 0.938rem;
  font-weight: 600;
  color: var(--ink);
}
.rk-lbl.is-the { top: 29px; font-size: 0.75rem; font-weight: 700; color: var(--brass-2); }
.rk-lbl small {
  font-family: 'Karla', sans-serif;
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 6px;
}
.rk-lbl.is-the small { display: none; }

.rk-note { font-size: 0.812rem; line-height: 1.5; color: var(--body); }
.rk-note a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
  margin-right: 10px;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}
.rk-note a:hover { color: var(--ink); border-bottom-color: var(--brass); }

.rk-foot {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 22px;
  font-size: 0.812rem;
  color: var(--muted);
}
.rk-foot svg { width: 15px; height: 15px; color: var(--brass-2); flex: none; margin-top: 2px; }

@media (max-width: 900px) {
  .rk-axis { display: none; }
  .rk-row { grid-template-columns: 1fr; gap: 12px; padding-block: 22px; }
  .rk-lane { height: 44px; }
  .rk-note { display: flex; flex-wrap: wrap; gap: 6px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rk-row.in .rk-bar { animation: none; }
  .rk-bar { transform: scaleX(1); }
}
.no-js .rk-bar { transform: scaleX(1); }

/* ─────────────────────────── THE NUMBERS LEDGER ─────────────────────────── */
/* Ported from the design: rows rather than tiles, each with its own small
   visual drawn from the figure it sits beside. */

.ledger-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(24px, 3vw, 48px);
  margin-bottom: clamp(26px, 3vw, 44px);
}
.ledger-head h1,
.ledger-head h2 { margin-top: 18px; }
/* A head with no standfirst beside it takes the full width. */
.ledger-head.is-solo { grid-template-columns: minmax(0, 1fr); }
.ledger-head p {
  margin: 0 0 8px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--body);
}

.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-2);
}
/* Two halves: the figure and its visual on one side, what it means on the
   other. Neither side trails off into empty page. */
.led-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(22px, 3vw, 52px);
  align-items: center;
  padding-block: clamp(20px, 2.2vw, 28px);
  border-bottom: 1px solid var(--rule);
  transition: background-color 0.3s ease;
}
.led-row:hover { background: rgba(138, 107, 46, 0.04); }
/* A rule that draws down the side of the row being read. */
.led-row::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gold-3);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.led-row:hover::before { transform: scaleY(1); }

.led-side {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
  align-items: center;
  min-width: 0;
}
.led-viz { width: 76px; height: 56px; display: flex; align-items: center; }

.led-num {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  line-height: 1;
  color: var(--ink);
  min-width: 0;
}
.led-num b {
  font-size: clamp(1.85rem, 3vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* A figure that is a phrase rather than a number needs room to wrap. */
.led-num b.is-word { font-size: clamp(1.4rem, 2vw, 1.875rem); white-space: normal; }
.led-num small {
  font-size: clamp(0.938rem, 1.5vw, 1.375rem);
  color: var(--gold-3);
  font-weight: 500;
  margin-left: 2px;
}
.led-u {
  display: block;
  margin-top: 9px;
  font-family: 'Karla', sans-serif;
  font-size: 0.719rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.45;
}

.led-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.led-l {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.led-s { font-size: 0.906rem; line-height: 1.6; color: var(--body); }

/* The source, set as small as it can go and still be read. */
.led-src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 4px;
  font-size: 0.688rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.led-src svg { width: 11px; height: 11px; color: var(--gold-3); flex: none; }
.led-src:hover { color: var(--ink); border-bottom-color: var(--brass-line); }

/* ---- the visuals ---- */
.lv-dots { display: grid; grid-template-columns: repeat(10, 6px); gap: 3px; }
.lv-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0;
  transform: scale(0);
}
.led-row.in .lv-dots i { animation: lv-dot 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.lv-dots i.g { background: var(--brass-2); }
@keyframes lv-dot { to { opacity: 1; transform: scale(1); } }

.lv-track { position: relative; width: 76px; height: 5px; border-radius: 3px; background: var(--rule); }
.lv-seg {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  background: var(--brass-2);
  transform: scaleX(0);
  transform-origin: left;
}
.led-row.in .lv-seg { animation: lv-grow 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both; }
@keyframes lv-grow { to { transform: scaleX(1); } }
.lv-tick {
  position: absolute;
  top: 12px;
  font-family: 'Karla', sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4E5674;
}
.lv-tick-r { right: 0; }

.lv-ring { width: 54px; height: 54px; transform: rotate(-90deg); }
.lv-bg { fill: none; stroke: var(--rule); stroke-width: 7; }
.lv-fg { fill: none; stroke: var(--brass-2); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100; }
.led-row.in .lv-fg { animation: lv-ring 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both; }
@keyframes lv-ring { from { stroke-dashoffset: 100; } to { stroke-dashoffset: var(--off, 0); } }

.lv-shield { width: 46px; height: 46px; animation: lv-beat 3s ease-in-out infinite; }
.lv-shield path { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lv-shield .g { stroke: var(--brass-2); }
@keyframes lv-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.lv-ico {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brass-soft);
  border: 1px solid var(--brass-line);
  color: var(--brass-3);
}
.lv-ico svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .led-row { grid-template-columns: 1fr; row-gap: 16px; align-items: start; }
  .led-side { grid-template-columns: 62px minmax(0, 1fr); gap: 16px; }
  .led-viz { width: 62px; height: 48px; }
  .lv-track { width: 62px; }
  .lv-dots { grid-template-columns: repeat(8, 6px); }
  .lv-ring { width: 46px; height: 46px; }
  .lv-shield, .lv-ico { width: 40px; height: 40px; }
}
@media (max-width: 620px) {
  .ledger-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ledger-head p { margin-bottom: 0; }
  .led-row::before { left: -12px; }
}
@media (prefers-reduced-motion: reduce) {
  .lv-shield { animation: none; }
  .led-row.in .lv-dots i,
  .led-row.in .lv-seg,
  .led-row.in .lv-fg { animation: none; }
  .lv-dots i { opacity: 1; transform: none; }
  .lv-seg { transform: scaleX(1); }
  .lv-fg { stroke-dashoffset: var(--off, 0); }
}
/* Without scripting nothing adds .in, so the visuals rest in their finished
   state rather than staying invisible. */
.no-js .lv-dots i { opacity: 1; transform: none; }
.no-js .lv-seg { transform: scaleX(1); }

/* ─────────────────────────── TUITION TABLE ─────────────────────────── */

/* No card. A white panel floated above the paper and read as a different
   surface from everything around it; the table now sits on the page itself and
   is held together by its rules, aligned to the heading above it. */
.table-shell { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
/* The caption repeated the heading word for word. It stays for anyone reading
   with a screen reader, where a table needs naming, and leaves the page. */
.tbl caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.tbl th, .tbl td {
  text-align: left;
  padding: 16px 28px 16px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.969rem;
  vertical-align: baseline;
}
.tbl th:last-child, .tbl td:last-child { padding-right: 0; }
.tbl thead th {
  font-family: 'Karla', sans-serif;
  font-size: 0.719rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  padding-block: 0 12px;
  border-bottom: 1px solid var(--rule-2);
}
.tbl tbody th {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.03rem;
  color: var(--ink);
  white-space: nowrap;
}
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: rgba(255, 255, 255, 0.45); }
.tbl .amount {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
}
.tbl .note { color: var(--muted); font-size: 0.906rem; }

@media (max-width: 620px) {
  .tbl thead { display: none; }
  .tbl tbody tr { display: block; border-bottom: 1px solid var(--rule); padding-block: 6px; }
  .tbl tbody tr:last-child { border-bottom: none; }
  .tbl tbody th, .tbl tbody td { display: block; border-bottom: none; padding-block: 4px; }
  .tbl tbody th { padding-top: 14px; }
  .tbl tbody td:last-child { padding-bottom: 14px; }
  .tbl td[data-lbl]::before {
    content: attr(data-lbl);
    display: block;
    font-size: 0.656rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 2px;
  }
}

/* ──────────────────────── UNIVERSITY CARD GRID ──────────────────────── */

/* One grid shared by the region pages and the finder, so a card looks and
   behaves the same wherever it appears. min() keeps the track from demanding
   more width than the screen has. */
.uc-grid,
.fp-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: clamp(26px, 3vw, 40px) clamp(20px, 3.4vw, 48px);
}
.uc-grid { margin-top: clamp(24px, 2.8vw, 34px); }

/* The line above a grid: what it is, how much of the whole set it shows, and
   that the cards turn. */
.uc-hint {
  display: flex;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.688rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.uc-hint-k { color: var(--ink-3); }
.uc-hint b {
  font-weight: 700;
  color: var(--brass-3);
  background: var(--brass-soft);
  border: 1px solid var(--brass-line);
  border-radius: 999px;
  padding: 3px 10px;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}
.uc-hint:empty { display: none; }
.fp-hint { margin-top: clamp(28px, 3.2vw, 40px); }
.uc-hint-turn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
  font-size: 0.781rem;
}
.uc-hint-turn svg { width: 14px; height: 14px; flex: none; color: var(--brass); }
@media (max-width: 620px) {
  .uc-hint-turn { margin-left: 0; }
}

/* Other universities mini-list */
.others {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(22px, 2.6vw, 34px) clamp(26px, 3vw, 46px);
}
/* Three to a row, so five entries read as three and two rather than four and
   a stray one. Two across on a tablet, one on a phone. */
.others-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .others-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .others-3 { grid-template-columns: 1fr; } }
/* Not a card. A white panel on this paper read as a different surface, the
   same way the tuition table did; what these entries need is separation from
   each other, which a single rule gives without introducing a box. */
.other {
  border-left: 2px solid var(--brass-line);
  padding: 1px 0 3px 20px;
  transition: border-left-color 0.22s ease;
}
.other:hover { border-left-color: var(--brass); }
.other h4 { margin-bottom: 6px; font-size: 1rem; }
.other .other-loc {
  font-size: 0.719rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
}
.other p { font-size: 0.906rem; line-height: 1.6; color: var(--muted); }

/* ─────────────────────────── PHOTO STRIP ─────────────────────────── */

.strip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(18px, 2.2vw, 28px);
}
.strip-head h3 {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.strip-head span {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The gallery, ported from the design: photographs as postcards. Each card is
   tilted a little and sits at its own height; pointing at one straightens it
   and lifts it above its neighbours. */
.strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 2vw, 28px);
  padding-top: 14px;
}
.post {
  --r: 0deg;
  --drop: 0px;
  position: relative;
  flex: 1 1 200px;
  max-width: 290px;
  margin: 0;
  margin-top: var(--drop);
  display: flex;
  flex-direction: column;
  padding: 12px 12px 14px;
  box-sizing: border-box;
  background: #FBFAF6;
  border-radius: 6px;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.8) inset, 0 30px 50px -28px rgba(20, 27, 43, 0.45),
    0 8px 18px -10px rgba(20, 27, 43, 0.25);
  transform: rotate(var(--r));
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.6s ease;
  z-index: 1;
}
.post:hover {
  transform: rotate(0deg) translateY(-14px) scale(1.04);
  box-shadow: 0 50px 70px -30px rgba(20, 27, 43, 0.55);
  z-index: 3;
}
/* The reveal sets its own transform, so the tilt has to ride along with it. */
.post.rv { transform: translateY(16px) rotate(var(--r)); }
.post.rv.in { transform: rotate(var(--r)); }
.post.rv.in:hover { transform: rotate(0deg) translateY(-14px) scale(1.04); }

.post-photo {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 3px;
  background: var(--paper-3);
}
.post-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.post:hover .post-photo img { transform: scale(1.06); }
.post figcaption {
  padding-top: 13px;
  font-size: 0.656rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.45;
  color: rgba(20, 27, 43, 0.58);
}

@media (max-width: 780px) {
  .post { flex-basis: 44%; margin-top: 0; }
  .post, .post.rv.in { transform: rotate(calc(var(--r) * 0.5)); }
}
@media (prefers-reduced-motion: reduce) {
  .post, .post-photo img { transition: none; }
  .post:hover { transform: rotate(var(--r)); }
}


/* ─────────────────────────── THE WHOLE ROUTE ─────────────────────────── */
/* Ported from the design: a dashed flight path over five islands. Two fixes
   on the way in: the islands sit on an opaque ground so the path no longer
   runs through the middle of each icon, and the plane is driven along the
   real SVG path by script rather than pinned to a fixed-width CSS path. */

.route {
  position: relative;
  overflow: hidden;
  background: #0D1422;
  color: #F3EFE6;
  padding-block: clamp(56px, 7vw, 96px);
  isolation: isolate;
}
.rt-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.rt-contours { position: absolute; inset: 0; width: 100%; height: 100%; animation: rt-drift 26s ease-in-out infinite; }
.rt-contours path { fill: none; stroke: rgba(243, 239, 230, 0.07); stroke-width: 1; }
@keyframes rt-drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-40px, 22px); }
}
.rt-star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #F3EFE6;
  animation: rt-twinkle 3.6s ease-in-out infinite;
}
@keyframes rt-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.8); }
  50% { opacity: 0.9; transform: scale(1.2); }
}
.route .wrap { position: relative; z-index: 1; }
.route h2 { color: #F3EFE6; margin-block: 18px 16px; }
.route .lede { color: rgba(243, 239, 230, 0.8); }
.route em.wonk { color: #C9A45C; }

/* One column now: the boarding-pass panel that used to sit beside the
   standfirst is gone, so the copy simply sets its own measure. */
.rt-head { max-width: 62ch; }



/* ---- the scene ---- */
/* The map is a box of the path's own proportions; every island is placed as a
   percentage of it, so the two can never drift apart at any width. */
.rt-scene { margin-top: clamp(40px, 5vw, 70px); }
.rt-map { position: relative; aspect-ratio: 1248 / 260; }
.rt-path,
.rt-track {
  fill: none;
  stroke: rgba(243, 239, 230, 0.26);
  stroke-width: 1.5;
  stroke-dasharray: 6 9;
  stroke-linecap: round;
  animation: rt-flow 1.1s linear infinite;
  vector-effect: non-scaling-stroke;
}
@keyframes rt-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -30; } }
.rt-prog {
  fill: none;
  stroke: #C9A45C;
  stroke-width: 2.5;
  /* The gap is longer than the path so the pattern's next dash can never
     begin inside it: at an exact 100/100 the round cap of that next dash
     rendered as a stray gold mark at the far end of an empty line. */
  stroke-dasharray: 100 200;
  stroke-dashoffset: 100;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgba(201, 164, 92, 0.7));
  transition: none;
}
/* No script, no interaction: the route reads as one complete line. */
.no-js .rt-prog { stroke-dashoffset: 0; transition: none; }

/* ---- the stops ---- */
.rt-stops { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.rt-stop { position: absolute; top: 0; bottom: 0; }
.rt-hit {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.rt-island {
  position: absolute;
  left: 50%;
  width: clamp(64px, 8.4vw, 120px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* Opaque ground, so the flight path stops at the island's edge instead of
     crossing the icon, the one real bug in the mockup. */
  background: linear-gradient(rgba(243, 239, 230, 0.05), rgba(243, 239, 230, 0.05)), #0D1422;
  border: 1.5px solid rgba(243, 239, 230, 0.18);
  transition: background-color 0.7s ease, border-color 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.7s ease, opacity 0.7s ease;
  opacity: 0.42;
}
.rt-island::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  border: 1.5px solid #C9A45C;
  opacity: 0;
}
.rt-island svg { width: 62%; height: 62%; display: block; overflow: visible; }
.rt-stop.is-done .rt-island { opacity: 1; border-color: rgba(201, 164, 92, 0.7); background: linear-gradient(rgba(201, 164, 92, 0.08), rgba(201, 164, 92, 0.08)), #0D1422; }
.rt-stop.is-active .rt-island {
  opacity: 1;
  background: linear-gradient(rgba(201, 164, 92, 0.16), rgba(201, 164, 92, 0.16)), #0D1422;
  border-color: #E2C07A;
  box-shadow: 0 0 40px rgba(201, 164, 92, 0.45), inset 0 0 24px rgba(201, 164, 92, 0.15);
  transform: translate(-50%, -50%) scale(1.1);
}
.rt-stop.is-active .rt-island::before { animation: rt-ping 1.7s ease-out infinite; }
.rt-hit:hover .rt-island, .rt-hit:focus-visible .rt-island { opacity: 1; }
.rt-hit:focus-visible .rt-island { outline: 2px solid #C9A45C; outline-offset: 6px; }
@keyframes rt-ping {
  from { transform: scale(1); opacity: 0.6; }
  to { transform: scale(1.9); opacity: 0; }
}
/* No script: every island is legible rather than dimmed. */
.no-js .rt-island { opacity: 1; }

.rt-line { fill: none; stroke: #F3EFE6; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rt-gold { fill: none; stroke: #C9A45C; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rt-goldfill { fill: #C9A45C; }
.rt-ivory { fill: #F3EFE6; }
.rt-stop.is-active .rt-needle { transform-origin: 37px 37px; animation: rt-spin 4s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.rt-stop.is-active .rt-pans { transform-origin: 37px 26px; animation: rt-swing 3s ease-in-out infinite; }
.rt-stop.is-active .rt-flag { transform-origin: 40px 14px; animation: rt-wave 1.6s ease-in-out infinite; }
@keyframes rt-spin { to { transform: rotate(360deg); } }
@keyframes rt-swing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes rt-wave { 0%, 100% { transform: skewX(0deg); } 50% { transform: skewX(-8deg); } }

/* Each card hangs below its own column, all of them level. */
.rt-card {
  position: absolute;
  top: calc(100% + 26px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  padding: 0 8px;
  opacity: 0.5;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rt-stop.is-done .rt-card { opacity: 0.75; }
.rt-stop.is-active .rt-card { opacity: 1; transform: translateY(-6px); }
.rt-hit:hover .rt-card, .rt-hit:focus-visible .rt-card { opacity: 1; }
.no-js .rt-card { opacity: 1; }
.rt-ttl {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-size: clamp(1.125rem, 1.7vw, 1.562rem);
  font-weight: 500;
  color: #F3EFE6;
  letter-spacing: -0.01em;
}
.rt-desc { font-size: 0.875rem; line-height: 1.6; color: rgba(243, 239, 230, 0.72); text-wrap: pretty; }

/* Room under the map for the cards, which hang out of flow. */
.rt-scene { padding-bottom: clamp(130px, 11.5vw, 165px); }

/* ---- narrow: the route becomes a list ---- */
@media (max-width: 900px) {
  .rt-path { display: none; }
  .rt-scene { padding-bottom: 0; }
  .rt-map { aspect-ratio: auto; }
  .rt-stops { display: flex; flex-direction: column; gap: 22px; position: static; }
  .rt-stop { position: static; width: auto !important; left: auto !important; }
  .rt-hit { display: flex; align-items: center; gap: 18px; width: 100%; height: auto; text-align: left; }
  .rt-island { position: static; transform: none; width: 74px; flex: none; opacity: 1; top: auto !important; }
  .rt-stop.is-active .rt-island { transform: none; }
  .rt-card { position: static; text-align: left; padding: 0; opacity: 1; }
  .rt-stop.is-active .rt-card { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rt-contours, .rt-star, .rt-track,
  .rt-stop.is-active .rt-island::before,
  .rt-stop.is-active .rt-needle,
  .rt-stop.is-active .rt-pans,
  .rt-stop.is-active .rt-flag { animation: none; }
  .rt-prog, .rt-card, .rt-island { transition: none; }
}

/* ─────────────────────────── WHY US ─────────────────────────── */

/* Three proofs, ported from the design. Each stage is the same height as its
   neighbours so the three headings line up, and every loop runs on one 8s
   cycle: build, hold, fade, restart. */
.proofs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  gap: clamp(26px, 3.4vw, 48px);
}
/* The three stages, the three headings and the three paragraphs each share a
   row, so a heading that needs two lines moves all three paragraphs down
   together rather than only its own. */
.proof {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  gap: 22px;
  align-content: start;
}
/* Without subgrid the column still stacks, it just aligns per card. */
@supports not (grid-template-rows: subgrid) {
  .proof { display: flex; flex-direction: column; }
}
.proof h3 { align-self: start; }
.pr-stage {
  position: relative;
  height: 250px;
  box-sizing: border-box;
  padding: 26px;
  border-radius: 20px;
  background: #FBFAF6;
  border: 1px solid rgba(20, 27, 43, 0.1);
  box-shadow: 0 24px 50px -30px rgba(20, 27, 43, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pr-kicker {
  position: absolute;
  top: 16px;
  left: 20px;
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8A6B2E;
}
.proof h3 {
  margin: 0;
  font-size: 1.562rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.proof p { margin: 0; font-size: 0.938rem; line-height: 1.65; color: rgba(20, 27, 43, 0.72); text-wrap: pretty; }

/* ---- 1: a sourced figure ---- */
.pr-fact {
  position: relative;
  margin-top: 14px;
  padding: 18px 20px;
  border: 1px solid rgba(20, 27, 43, 0.12);
  border-radius: 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pr-fact-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(20, 27, 43, 0.55);
}
.pr-fact-row { display: flex; justify-content: space-between; gap: 30px; }
.pr-redact {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(20, 27, 43, 0.1) 25%, rgba(20, 27, 43, 0.2) 50%, rgba(20, 27, 43, 0.1) 75%);
  background-size: 200% 100%;
  animation: pr-shimmer 2.4s linear infinite;
}
.pr-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.688rem;
  border: 1px solid rgba(138, 107, 46, 0.3);
  color: #6E5322;
  background: rgba(138, 107, 46, 0.06);
  animation: pr-chip-in 8s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
}
.pr-chip svg { width: 12px; height: 12px; flex: none; }
.pr-chip.is-2 { animation-delay: 0.35s; }
.pr-tick {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: #E2C07A;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(20, 27, 43, 0.25);
  animation: pr-tick-in 8s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
}
.pr-tick svg { width: 15px; height: 15px; }
.pr-not { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: 0.75rem; color: rgba(20, 27, 43, 0.6); }
.pr-x { position: relative; }
.pr-x::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 55%;
  height: 1.5px;
  background: #8A6B2E;
  transform-origin: left;
  animation: pr-strike 8s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
}
.pr-x.is-2::after { animation-delay: 0.3s; }

/* ---- 2: the overlap ---- */
.pr-venn { width: 100%; height: 200px; }
.pr-venn .lbl { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; fill: rgba(20, 27, 43, 0.6); }
.pr-venn .ring {
  fill: none;
  stroke: rgba(20, 27, 43, 0.22);
  stroke-width: 1.5;
  stroke-dasharray: 100;
  animation: pr-ring 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pr-venn .ring.r2 { animation-delay: 0.3s; }
.pr-venn .lens { fill: #8A6B2E; animation: pr-lens 8s ease-in-out infinite; }
.pr-venn .dot { fill: rgba(20, 27, 43, 0.22); animation: pr-dot 8s cubic-bezier(0.2, 0.7, 0.2, 1) infinite; transform-box: fill-box; transform-origin: center; }
.pr-venn .hit { fill: #8A6B2E; animation: pr-hit 8s cubic-bezier(0.2, 0.7, 0.2, 1) infinite; transform-box: fill-box; transform-origin: center; }
.pr-venn .tag {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  fill: var(--ink);
  animation: pr-tag 8s ease infinite;
}
.pr-venn .tagline { fill: none; stroke: var(--ink); stroke-width: 1; animation: pr-tag 8s ease infinite; }

/* ---- 3: past the offer letter ---- */
.pr-after { width: 100%; height: 200px; }
.pr-after .base { fill: none; stroke: rgba(20, 27, 43, 0.18); stroke-width: 1.5; }
.pr-after .go {
  fill: none;
  stroke: #8A6B2E;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  animation: pr-go 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pr-after .stopmark { fill: none; stroke: rgba(20, 27, 43, 0.4); stroke-width: 1.2; stroke-dasharray: 4 4; }
.pr-after .lbl { font-size: 11px; fill: rgba(20, 27, 43, 0.6); }
.pr-after .sml { font-size: 10px; fill: rgba(20, 27, 43, 0.55); letter-spacing: 0.1em; text-transform: uppercase; }
.pr-after .ico { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pr-after .node { transform-box: fill-box; transform-origin: center; }
.pr-after .n1 { animation: pr-n1 8s cubic-bezier(0.2, 0.7, 0.2, 1) infinite; }
.pr-after .n2 { animation: pr-n2 8s cubic-bezier(0.2, 0.7, 0.2, 1) infinite; }
.pr-after .n3 { animation: pr-n3 8s cubic-bezier(0.2, 0.7, 0.2, 1) infinite; }
.pr-after .stay {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  fill: #8A6B2E;
  animation: pr-stay 8s ease infinite;
}
.pr-after .envelope { animation: pr-env 8s cubic-bezier(0.2, 0.7, 0.2, 1) infinite; }

@keyframes pr-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes pr-chip-in { 0%,14% { opacity: 0; transform: translateY(-12px); } 22%,88% { opacity: 1; transform: none; } 96%,100% { opacity: 0; transform: none; } }
@keyframes pr-tick-in { 0%,30% { opacity: 0; transform: scale(0); } 36% { opacity: 1; transform: scale(1.2); } 40%,88% { opacity: 1; transform: scale(1); } 96%,100% { opacity: 0; transform: scale(1); } }
@keyframes pr-strike { 0%,42% { transform: scaleX(0); } 52%,88% { transform: scaleX(1); } 96%,100% { transform: scaleX(0); } }
@keyframes pr-ring { 0% { stroke-dashoffset: 100; opacity: 1; } 25%,88% { stroke-dashoffset: 0; opacity: 1; } 96%,100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes pr-lens { 0%,28% { opacity: 0; } 40% { opacity: .55; } 50% { opacity: .3; } 60% { opacity: .55; } 70% { opacity: .3; } 80%,88% { opacity: .55; } 96%,100% { opacity: 0; } }
@keyframes pr-dot { 0%,20% { opacity: 0; transform: scale(0); } 27%,88% { opacity: 1; transform: scale(1); } 96%,100% { opacity: 0; } }
@keyframes pr-hit { 0%,34% { opacity: 0; transform: scale(0); } 40% { opacity: 1; transform: scale(1.5); } 44%,88% { opacity: 1; transform: scale(1); } 96%,100% { opacity: 0; } }
@keyframes pr-tag { 0%,48% { opacity: 0; } 56%,88% { opacity: 1; } 96%,100% { opacity: 0; } }
@keyframes pr-go { 0%,18% { stroke-dashoffset: 100; opacity: 1; } 50%,88% { stroke-dashoffset: 0; opacity: 1; } 96%,100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes pr-n1 { 0%,26% { opacity: 0; transform: scale(0); } 32%,88% { opacity: 1; transform: scale(1); } 96%,100% { opacity: 0; } }
@keyframes pr-n2 { 0%,36% { opacity: 0; transform: scale(0); } 42%,88% { opacity: 1; transform: scale(1); } 96%,100% { opacity: 0; } }
@keyframes pr-n3 { 0%,46% { opacity: 0; transform: scale(0); } 52%,88% { opacity: 1; transform: scale(1); } 96%,100% { opacity: 0; } }
@keyframes pr-stay { 0%,54% { opacity: 0; transform: translateX(-6px); } 62%,88% { opacity: 1; transform: none; } 96%,100% { opacity: 0; } }
@keyframes pr-env { 0% { opacity: 0; transform: translateY(-10px); } 8%,88% { opacity: 1; transform: none; } 96%,100% { opacity: 0; } }

/* Off entirely when motion is unwelcome: the finished state is what stays. */
@media (prefers-reduced-motion: reduce) {
  .pr-redact,
  .pr-chip,
  .pr-tick,
  .pr-x::after,
  .pr-venn .ring,
  .pr-venn .lens,
  .pr-venn .dot,
  .pr-venn .hit,
  .pr-venn .tag,
  .pr-venn .tagline,
  .pr-after .go,
  .pr-after .node,
  .pr-after .stay,
  .pr-after .envelope {
    animation: none;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }
  .pr-venn .lens { opacity: 0.5; }
  .pr-x::after { transform: scaleX(1); }
}

@media (max-width: 980px) {
  .proofs { grid-template-columns: 1fr; grid-template-rows: none; gap: 34px; }
  .proof { grid-row: auto; grid-template-rows: auto auto auto; }
  .pr-stage { height: 230px; }
  .proof h3 { font-size: 1.375rem; }
}

/* ─────────────────────────── BASED IN TALLINN ─────────────────────────── */

.tallinn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}
.tl-copy h2 { margin-block: 16px 18px; }

/* The live line: the real hour in Tallinn, written by the viewer's browser. */
.tl-live {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--card);
  font-size: 0.875rem;
  color: var(--ink);
}
.tl-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #2F8F5B; flex: none; }
.tl-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: tl-ring 1.8s ease-out infinite;
}
.tl-live.is-off .tl-dot { background: var(--brass-2); }
@keyframes tl-ring { from { transform: scale(1); opacity: 0.6; } to { transform: scale(3); opacity: 0; } }
.tl-clock {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.tl-person {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.tl-person img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  object-position: top center;
  border-radius: 22px;
  border: 1px solid rgba(20, 27, 43, 0.1);
  flex: none;
  background: var(--paper-2);
}
.tl-person b {
  display: block;
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--ink);
}
.tl-person + .tl-person { margin-top: 20px; padding-top: 20px; }
.tl-person span { display: block; font-size: 0.875rem; color: var(--muted); margin: 4px 0 10px; }
.tl-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.938rem;
  font-weight: 700;
  color: var(--brass-3);
  text-decoration: none;
}
.tl-link svg { width: 16px; height: 16px; transition: transform 0.35s ease; }
.tl-link:hover svg { transform: translateX(5px); }

/* ---- the scene ---- */
.tl-scene {
  position: relative;
  aspect-ratio: 640 / 460;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 70px -40px rgba(20, 27, 43, 0.45);
  isolation: isolate;
}
/* Everything except the place pin and the day/night switch, so those two stay
   crisp while the artwork behind them is free to fade out. */
.tl-art { position: absolute; inset: 0; }

/* The scene is meant to sit on the page rather than in a card on top of it, so
   its edges dissolve instead of being cut off by a border. Two gradients are
   intersected: one fades the left and right edges, the other the top and
   bottom, which leaves the middle untouched and only softens the boundary.

   Guarded, because without masking the alternative is a hard rectangle with no
   border at all, which looks worse than the card it replaced. Where masking is
   unavailable, the rounded card simply stays. */
@supports ((mask-composite: intersect) or (-webkit-mask-composite: source-in)) {
  .tl-scene {
    border-radius: 0;
    box-shadow: none;
    /* Clipping stays on: the ferry animates past the right-hand edge, and
       without it the page gained 25px of sideways scroll at 320px. The mask
       fades the art out well before this boundary, so it is never visible. */
  }
  .tl-art {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 11%, #000 86%, transparent 100%);
    mask-image:
      linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 11%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
}
.tl-sky { position: absolute; inset: 0; transition: background 1.5s ease; }
[data-phase='day']   .tl-sky { background: linear-gradient(180deg, #DBE6F0 0%, #F3EDE1 70%, #EFE6D2 100%); }
[data-phase='dawn']  .tl-sky { background: linear-gradient(180deg, #3A3A5C 0%, #B97A6A 55%, #EFC48A 100%); }
[data-phase='dusk']  .tl-sky { background: linear-gradient(180deg, #2C2B4A 0%, #A2607A 50%, #E8A76D 100%); }
[data-phase='night'] .tl-sky { background: linear-gradient(180deg, #0B1020 0%, #16203A 60%, #23304F 100%); }

.tl-stars { position: absolute; inset: 0; transition: opacity 1s ease; }
.tl-stars i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  animation: tl-twinkle 3s ease-in-out infinite;
}
[data-phase='day'] .tl-stars, [data-phase='dawn'] .tl-stars, [data-phase='dusk'] .tl-stars { opacity: 0; }
@keyframes tl-twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }

.tl-sun {
  position: absolute;
  left: 55%;
  top: 14%;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF3C4 0%, #F2C766 45%, rgba(242, 199, 102, 0) 72%);
  box-shadow: 0 0 60px 20px rgba(242, 199, 102, 0.35);
  transition: left 2s ease, top 2s ease, opacity 1s ease;
}
[data-phase='dawn'] .tl-sun { left: 16%; top: 42%; }
[data-phase='dusk'] .tl-sun { left: 84%; top: 42%; }
[data-phase='night'] .tl-sun { opacity: 0; }
.tl-moon {
  position: absolute;
  left: 73%;
  top: 15%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #F3EFE6;
  box-shadow: 0 0 40px 10px rgba(243, 239, 230, 0.25);
  transition: opacity 1s ease;
}
.tl-moon::after {
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #16203A;
  left: 12px;
  top: -4px;
}
[data-phase='day'] .tl-moon, [data-phase='dawn'] .tl-moon, [data-phase='dusk'] .tl-moon { opacity: 0; }

.tl-cloud {
  position: absolute;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  animation: tl-cloud linear infinite;
}
.tl-cloud::before {
  content: '';
  position: absolute;
  left: 22%;
  top: -10px;
  width: 40%;
  height: 22px;
  border-radius: 999px;
  background: inherit;
}
[data-phase='night'] .tl-cloud { background: rgba(255, 255, 255, 0.08); }
[data-phase='dusk'] .tl-cloud, [data-phase='dawn'] .tl-cloud { background: rgba(255, 230, 200, 0.35); }
@keyframes tl-cloud { from { transform: translateX(-160px); } to { transform: translateX(760px); } }

.tl-gull { position: absolute; animation: tl-gull 7s ease-in-out infinite alternate; }
.tl-gull svg { width: 24px; height: 8px; display: block; }
.tl-gull path { fill: none; stroke: rgba(20, 27, 43, 0.6); stroke-width: 1.6; stroke-linecap: round; }
[data-phase='night'] .tl-gull { opacity: 0; }
@keyframes tl-gull {
  0% { transform: translate(0, 0); }
  50% { transform: translate(60px, -14px); }
  100% { transform: translate(120px, 4px); }
}

/* The three drawn layers of the old town. */
.tl-layer { position: absolute; left: 0; bottom: 0; width: 100%; height: 70%; display: block; }
.tl-far  { fill: #CBBFA6; transition: fill 1.5s ease; }
.tl-mid  { fill: #B6A887; transition: fill 1.5s ease; }
.tl-near { fill: #8F815F; transition: fill 1.5s ease; }
[data-phase='night'] .tl-far { fill: #2B3350; }
[data-phase='night'] .tl-mid { fill: #1C2540; }
[data-phase='night'] .tl-near { fill: #111A2F; }
[data-phase='dusk'] .tl-far { fill: #6C5A6E; }
[data-phase='dusk'] .tl-mid { fill: #4C3F58; }
[data-phase='dusk'] .tl-near { fill: #2D2740; }
[data-phase='dawn'] .tl-far { fill: #7A6478; }
[data-phase='dawn'] .tl-mid { fill: #5A4A5C; }
[data-phase='dawn'] .tl-near { fill: #3A3145; }
.tl-win { fill: #F2C766; opacity: 0; transition: opacity 1.2s ease; }
[data-phase='night'] .tl-win,
[data-phase='dusk'] .tl-win,
[data-phase='dawn'] .tl-win { opacity: 0.9; animation: tl-winlit 4s ease-in-out infinite; }
@keyframes tl-winlit { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.45; } }
.tl-flag { fill: #8A6B2E; transform-origin: 286px 60px; animation: tl-flag 1.6s ease-in-out infinite; }
[data-phase='night'] .tl-flag { fill: #C9A45C; }
@keyframes tl-flag { 0%, 100% { transform: skewX(0); } 50% { transform: skewX(-10deg); } }

.tl-sea { position: absolute; left: 0; bottom: 0; width: 100%; height: 15%; overflow: hidden; }
.tl-sea svg { position: absolute; left: 0; bottom: 0; width: 125%; height: 100%; animation: tl-waves 6s linear infinite; }
.tl-sea svg:last-child { animation-duration: 9s; animation-direction: reverse; }
.tl-w1 { fill: #9FB8C6; transition: fill 1.5s ease; }
.tl-w2 { fill: #7F9FB3; transition: fill 1.5s ease; }
[data-phase='night'] .tl-w1 { fill: #1B2A45; }
[data-phase='night'] .tl-w2 { fill: #121E36; }
[data-phase='dusk'] .tl-w1 { fill: #6D6788; }
[data-phase='dusk'] .tl-w2 { fill: #4E4A6E; }
[data-phase='dawn'] .tl-w1 { fill: #7A6F8A; }
[data-phase='dawn'] .tl-w2 { fill: #5B5170; }
@keyframes tl-waves { from { transform: translateX(0); } to { transform: translateX(-80px); } }

.tl-ferry { position: absolute; bottom: 9.5%; left: 0; animation: tl-ferry 38s linear infinite; }
.tl-ferry svg { display: block; width: 120px; height: 40px; animation: tl-bobble 3s ease-in-out infinite; }
@keyframes tl-ferry { from { transform: translateX(-140px); } to { transform: translateX(760px); } }
@keyframes tl-bobble { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(3px) rotate(1deg); } }



/* With the card gone this is the only control left on the artwork, so it is
   quieter: it reads as a small switch on the page rather than a button on a
   panel, and it sits in from the edge where the art is still fully opaque. */
.tl-toggle {
  position: absolute;
  left: 9%;
  top: 12%;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(20, 27, 43, 0.16);
  border-radius: 999px;
  background: rgba(20, 27, 43, 0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  font: inherit;
}
.tl-toggle:focus-visible { outline: 2px solid #C9A45C; outline-offset: 3px; }
.tl-toggle span {
  width: 34px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: rgba(243, 239, 230, 0.6);
  transition: background-color 0.4s ease, color 0.4s ease;
}
.tl-toggle span svg { width: 16px; height: 16px; }
.tl-toggle .is-on { background: #F3EFE6; color: var(--ink); }
/* Without scripting the sky cannot be switched, so the control is not offered. */
.no-js .tl-toggle { display: none; }

@media (max-width: 900px) {
  .tallinn { grid-template-columns: 1fr; }
  .tl-scene { order: -1; }
}
@media (max-width: 520px) {
  .tl-person { gap: 16px; }
  .tl-person + .tl-person { margin-top: 16px; padding-top: 16px; }
  .tl-person img { width: 74px; height: 74px; border-radius: 18px; }
  .tl-person b { font-size: 1.25rem; }
  .tl-toggle { left: auto; right: 14px; }
}

/* The city keeps its hour but stops moving. */
@media (prefers-reduced-motion: reduce) {
  .tl-cloud, .tl-gull, .tl-ferry, .tl-ferry svg, .tl-sea svg,
  .tl-flag, .tl-stars i, .tl-dot::after, .tl-win { animation: none; }
}

/* ─────────────────────────── PROFILE ─────────────────────────── */

/* ── About us: two people, side by side ───────────────────────────────── */
/* Ported from the design. Each column is a subgrid, so the portraits, the
   bios, the chips and the background lists sit on the same four rows: the
   two sides stay level however long either one runs, and nothing has to be
   truncated to make it fit. */

.two-up {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* One row per block, then one row per credential, so both columns hang off
     the same horizontal lines all the way down. The counts come in as
     --rows/--brows/--crows from the generator. */
  grid-template-rows: repeat(var(--rows, 4), auto);
  column-gap: clamp(36px, 5vw, 72px);
  row-gap: 0;
}
/* The rule between them, drawn down the middle of the gap. */
.two-up::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule);
}
.person {
  display: grid;
  grid-row: span var(--rows, 4);
  grid-template-rows: subgrid;
  /* Rows carry no gap now that the credentials are rows of their own; the
     space between the blocks is set as margin on each block instead. */
  row-gap: 0;
  align-content: start;
  min-width: 0;
}
.pp-bio,
.pp-ask,
.pp-back { margin-top: clamp(18px, 2.2vw, 26px); }
/* Without subgrid each column still stacks; it simply aligns on its own. */
@supports not (grid-template-rows: subgrid) {
  .person { display: flex; flex-direction: column; }
  .pp-back { display: block; }
  .creds { display: block; }
}

.pp-top {
  display: grid;
  grid-template-columns: clamp(140px, 15vw, 200px) minmax(0, 1fr);
  gap: clamp(18px, 2.2vw, 26px);
  align-items: start;
}
.pp-photo {
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  background: var(--paper-3);
  box-shadow: var(--shadow);
}
.pp-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.person:hover .pp-photo img { transform: scale(1.04); }

.pp-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pp-eyebrow {
  font-size: 0.688rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-3);
}
.pp-name {
  margin: 2px 0 0;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--ink);
}
/* Role on one line, location on the next, for both: a longer title then
   cannot push one column's heading out of step with the other's. */
.pp-role {
  margin-top: 2px;
  font-size: 0.688rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
.pp-where {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.688rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-3);
}
.pp-where svg { width: 12px; height: 12px; flex: none; }
.pp-facts {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
/* The three lead facts are credentials, so they are set like credentials: a
   brass rule down the side — the same one the secondary options use — and the
   named thing in the serif, larger than the line that explains it. */
.pf {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-left: 2px solid var(--brass-line);
  padding: 1px 0 2px 16px;
}
.pf-k {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--brass-3);
}
/* The mockup clamped this to two lines, which cut the sentence off mid-word.
   It wraps instead; the shared rows keep the columns level anyway. */
/* Two lines' worth, whether or not the sentence fills them: the three facts
   then stand at the same height in both columns instead of one side finishing
   a line or two above the other. */
.pf-v {
  font-size: 0.781rem;
  line-height: 1.5;
  color: var(--body);
  min-height: calc(0.781rem * 1.5 * 2);
}

.pp-bio { margin: 0; font-size: 0.938rem; line-height: 1.7; color: var(--body); }

/* Pinned to the top of its subgrid row: when one column's chips wrap onto a
   second line they set the row height, and a centred single line in the other
   column would sit visibly lower than its neighbour. */
/* The label sits above rather than in front of the chips: sharing the line
   meant one column's chips wrapped onto a second row while the other's did
   not, and the two profiles then stopped matching. */
.pp-ask { align-self: start; }
.pp-ak {
  display: block;
  font-size: 0.688rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.pp-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pp-chip {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--brass-line);
  background: var(--card);
  color: var(--brass-3);
  font-size: 0.75rem;
}

/* Spans the heading row plus one row per credential, and hands those rows
   straight through to the list, so row three on the left is row three on the
   right no matter how either one wraps. */
.pp-back {
  align-self: start;
  display: grid;
  grid-row: span var(--brows, 1);
  grid-template-rows: subgrid;
  row-gap: 0;
}
.pp-back h3 { font-size: 1.062rem; margin-bottom: 12px; }

.pp-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: clamp(38px, 5vw, 56px);
}
.pp-cta span { font-size: 0.875rem; color: var(--muted); }

/* The two columns stack early. Below roughly this width the text column beside
   each portrait is narrow enough that a credential heading wraps on one side
   and not the other, and no amount of shared grid lines makes that look
   deliberate. One column under the other is simply better there. */
@media (max-width: 1120px) {
  .two-up { grid-template-columns: 1fr; grid-template-rows: none; row-gap: clamp(40px, 6vw, 64px); }
  .two-up::before { display: none; }
  .person { grid-row: auto; display: flex; flex-direction: column; }
  /* Stacked, there is no second column to line up with, so the shared grid
     lines come off and each list sizes to its own content. */
  .pp-back { grid-row: auto; display: block; }
  .creds { grid-row: auto; display: block; }
  .person + .person { padding-top: clamp(40px, 6vw, 64px); border-top: 1px solid var(--rule); }
}
@media (max-width: 520px) {
  .pp-top { grid-template-columns: 1fr; }
  .pp-photo { max-width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-photo img { transition: none; }
  .person:hover .pp-photo img { transform: none; }
}

/* Experience strip */
.xp {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
  margin-top: clamp(26px, 3vw, 36px);
}
.xp-item {
  background: var(--white);
  padding: 21px 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.xp-item svg { width: 19px; height: 19px; color: var(--brass); }
.xp-k {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.44rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
}
.xp-v {
  font-size: 0.844rem;
  color: var(--body);
  line-height: 1.45;
}
/* The 404 page's list of places to go next. It used to borrow .creds, which
   is now a two-line credential row and no longer has a slot for an icon. */
.jumps { list-style: none; display: grid; gap: 11px; margin-top: 28px; }
.jumps li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 0.969rem;
  color: var(--ink-3);
}
.jumps svg { width: 18px; height: 18px; flex: none; color: var(--gold-3); margin-top: 3px; }

/* A credential list, not a checklist. Rows sit on hairlines and each one is
   marked by a small brass lozenge drawn in CSS, so the eye runs down the
   titles and the qualifying line stays out of the way underneath. */
.creds {
  list-style: none;
  display: grid;
  grid-row: span var(--crows, 1);
  grid-template-rows: subgrid;
  row-gap: 0;
  border-top: 1px solid var(--rule);
}
.creds li {
  position: relative;
  padding: 13px 0 13px 22px;
  border-bottom: 1px solid var(--rule);
}
.creds li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 19px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--gold-3);
  transform: rotate(45deg);
}
.cr-k {
  display: block;
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-size: 0.969rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.cr-v {
  display: block;
  margin-top: 3px;
  font-size: 0.812rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ─────────────────────────── FORM ─────────────────────────── */

.consult {
  display: grid;
  grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(30px, 5vw, 66px);
  align-items: start;
}
.consult-aside .label { margin-bottom: 16px; }
.consult-aside h2 { margin-bottom: 18px; }
/* The aside is narrower now, so "15-minute" would otherwise break at its
   hyphen and split the italic across two lines. */
.consult-aside h2 em { white-space: nowrap; }

.form-card {
  background: #FBFAF6;
  border: 1px solid var(--rule);
  border-radius: 24px;
  padding: clamp(24px, 3.4vw, 42px);
  box-shadow: 0 30px 60px -40px rgba(20, 27, 43, 0.35);
}

/* Two pill sets: one answer for where you are, any number for where you are
   looking. Real radios and checkboxes underneath, so the form works without
   scripting and reads correctly to a screen reader. */
.pillset { border: 0; margin: 0 0 24px; padding: 0; }
.pillset legend {
  padding: 0;
  margin-bottom: 12px;
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-size: 1.188rem;
  font-weight: 600;
  color: var(--ink);
}
.pillset legend i {
  font-family: 'Karla', sans-serif;
  font-style: italic;
  font-size: 0.812rem;
  font-weight: 400;
  color: var(--faint);
  margin-left: 6px;
}
.pills { display: flex; flex-wrap: wrap; gap: 9px; }
.pill { position: relative; }
.pill input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.pill span {
  display: block;
  padding: 9px 17px;
  border-radius: 999px;
  border: 1px solid var(--rule-2);
  background: var(--white);
  font-size: 0.875rem;
  color: var(--ink-3);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.pill:hover span { border-color: var(--brass); }
.pill input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-weight: 700;
}
.pill input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.field label .opt { color: var(--faint); font-weight: 600; text-transform: none; letter-spacing: 0; }
/* A field label can carry a hint; the design sets it in italics beside the
   label rather than under the input. */
.field label i {
  font-style: italic;
  font-weight: 400;
  font-size: 0.812rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--faint);
  margin-left: 8px;
}
.field label .req { color: var(--oxblood); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
  appearance: none;
}
.field textarea { min-height: 122px; resize: vertical; line-height: 1.55; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C7590' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 17px;
  padding-right: 40px;
  cursor: pointer;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(184, 134, 59, 0.16);
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field.invalid input, .field.invalid select, .field.invalid textarea {
  border-color: var(--oxblood);
  background: #FDF7F6;
}
.field .err {
  font-size: 0.812rem;
  font-weight: 600;
  color: var(--oxblood);
  display: none;
  align-items: center;
  gap: 6px;
}
.field.invalid .err { display: flex; }
.field .err svg { width: 14px; height: 14px; flex: none; }

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-foot {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}
.form-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.812rem;
  color: var(--muted);
  max-width: 38ch;
}
.form-note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--faint); }
.form-status {
  margin-top: 18px;
  padding: 15px 18px;
  border-radius: var(--r-sm);
  font-size: 0.938rem;
  font-weight: 600;
  display: none;
  gap: 11px;
  align-items: flex-start;
}
.form-status svg { width: 19px; height: 19px; flex: none; margin-top: 2px; }
.form-status.ok { display: flex; background: var(--sage-soft); border: 1px solid #BFD3C5; color: #2E4A38; }
.form-status.bad { display: flex; background: var(--oxblood-soft); border: 1px solid #E6C3BF; color: #7A2E2E; }

.btn[aria-busy="true"] { opacity: 0.72; pointer-events: none; }
.spin {
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #FFF;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
}
.btn[aria-busy="true"] .spin { display: block; }
.btn[aria-busy="true"] .btn-ico { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) { .consult { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

/* ─────────────────────────── CALLOUT / VERIFY NOTE ─────────────────────────── */



/* A standing note rather than a notice: the PhD point is context for the
   figures around it, not a warning, so it is set as quiet type with a small
   mark instead of a tinted panel. The bottom margin is what keeps it off the
   count line below, which carries no top margin of its own. */
.pnote {
  display: grid;
  grid-template-columns: 17px 1fr;
  gap: 13px;
  align-items: start;
  margin: clamp(26px, 3vw, 34px) 0 clamp(30px, 3.4vw, 40px);
  max-width: 82ch;
  font-size: 0.906rem;
  line-height: 1.68;
  color: var(--muted);
}
.pnote svg { width: 16px; height: 16px; margin-top: 5px; color: var(--brass-2); flex: none; }
/* Two notes can follow each other under a table; without this their margins
   collapse into one and the pair reads as a single block of grey. */
.pnote + .pnote { margin-top: calc(clamp(26px, 3vw, 34px) * -0.35); }
.pnote strong { color: var(--ink); font-weight: 600; }
.band-ink .pnote, .route .pnote { color: rgba(243, 239, 230, 0.72); }
.band-ink .pnote strong, .route .pnote strong { color: #F3EFE6; }
.band-ink .pnote svg, .route .pnote svg { color: var(--gold); }

/* ─────────────────────────── SERVICES ─────────────────────────── */

/* For text that only a screen reader needs, where an icon carries the meaning
   visually. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- how it works: three steps ---- */
/* A numbered column rather than three panels side by side. The middle step
   carries five times the content of the others, so equal columns would leave
   two of them mostly empty and the rows would never line up. Down the page
   each step starts where the last one ended, and the paid hour is the one
   that is allowed to be long. */
.flow { list-style: none; display: grid; gap: 0; counter-reset: none; }
.flow-step {
  display: grid;
  grid-template-columns: clamp(42px, 5vw, 58px) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 30px);
  padding-block: clamp(26px, 3vw, 36px);
  border-top: 1px solid var(--rule);
  align-items: start;
}
.flow-step:first-child { border-top: 0; padding-top: 0; }

.flow-n {
  display: grid;
  place-items: center;
  width: clamp(36px, 4vw, 44px);
  height: clamp(36px, 4vw, 44px);
  border-radius: 50%;
  border: 1px solid var(--brass-line);
  font-family: 'Karla', sans-serif;
  font-size: 0.906rem;
  font-weight: 700;
  color: var(--brass-3);
}
.flow-step.is-key .flow-n {
  background: var(--brass);
  border-color: var(--brass);
  color: #0D1422;
}

.flow-meta {
  display: block;
  font-family: 'Karla', sans-serif;
  font-size: 0.688rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.flow-step.is-key .flow-meta { color: var(--brass-2); }
.flow-body h3 {
  margin-block: 9px 10px;
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
}
.flow-step.is-key .flow-body h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.flow-body > p { font-size: 0.969rem; line-height: 1.7; color: var(--body); max-width: 68ch; }
.flow-step.is-key .flow-body > p { font-size: 1.03rem; }

.flow-list {
  list-style: none;
  display: grid;
  gap: 11px;
  margin-top: clamp(18px, 2vw, 24px);
}
.flow-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.969rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.flow-list svg { width: 15px; height: 15px; margin-top: 5px; color: var(--brass-2); }
.flow-after {
  margin-top: clamp(16px, 1.8vw, 20px);
  font-size: 0.906rem;
  color: var(--brass-3);
  max-width: 62ch;
}

@media (max-width: 560px) {
  .flow-step { grid-template-columns: 1fr; gap: 14px; }
}

/* ---- the comparison ---- */
.pk-tbl { table-layout: fixed; }
.pk-tbl th[scope='col'] { vertical-align: bottom; }
.pk-tbl thead th b {
  display: block;
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}
.pk-tbl thead th span {
  display: block;
  margin-top: 3px;
  font-size: 0.688rem;
  letter-spacing: 0.12em;
  color: var(--faint);
}
.pk-tbl tbody th { white-space: normal; font-size: 0.969rem; }
/* A quarter each. The package cells now carry sentences rather than single
   words, so they need the width more than the row labels do. */
.pk-tbl td { width: 25%; }
.pk-yes svg { width: 17px; height: 17px; color: var(--brass-2); }
.pk-no { color: var(--faint); }
.pk-txt { font-size: 0.906rem; color: var(--body); }

/* ---- the price row ---- */
.pk-price-row th { font-family: 'Karla', sans-serif; font-weight: 700; }
.pk-price-row td { vertical-align: top; }
.pk-cell { display: grid; gap: 7px; }
.pk-locked { font-size: 0.906rem; color: var(--faint); font-style: italic; }
.pk-fig {
  display: grid;
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
}
/* The discount and add-on universities sit under the package rows, priced the
   same way but set smaller so the package price stays the headline. */
.pk-add-row th { font-weight: 600; }
.pk-add-row .pk-fig { font-size: 1rem; }
/* ---- the degree-level tab strip ---- */
/* The strip is drawn only once the script has taken the panels over, so a page
   without scripting shows all three tables stacked rather than a row of dead
   buttons above one. */
.pk-tablist { display: none; }
.pk-levels.is-tabbed .pk-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--rule);
}
.pk-levels.is-tabbed .pk-level-head h3 { display: none; }
/* One panel at a time needs far less air under the strip than three stacked
   tables needed between them. */
.pk-levels.is-tabbed { gap: clamp(22px, 2.4vw, 30px); }
.pk-tab {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 10px 20px;
  font-family: 'Karla', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.969rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--faint);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.pk-tab:hover { color: var(--ink); }
.pk-tab.is-on { color: var(--ink); border-bottom-color: var(--brass); }
.pk-tab:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
@media (max-width: 560px) {
  .pk-tab { flex: 1 1 auto; padding: 10px 12px; font-size: 0.906rem; text-align: center; }
}

/* ---- one table per degree level ---- */
/* Three tables stacked rather than one table with rows that only apply to some
   readers. Each is titled, so you read the one you need and skip the others. */
.pk-levels { display: grid; gap: clamp(38px, 5vw, 62px); }
.pk-level-head { margin-bottom: clamp(16px, 2vw, 22px); }
.pk-level-head h3 {
  margin: 0;
  font-size: clamp(1.28rem, 2vw, 1.62rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pk-level-head p {
  margin: 6px 0 0;
  font-size: 0.938rem;
  color: var(--muted);
  max-width: 58ch;
}
.pk-code { display: grid; gap: 8px; max-width: 420px; margin-top: clamp(26px, 3vw, 34px); }
.pk-code label {
  font-size: 0.719rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.pk-code-in { display: flex; gap: 8px; }
.pk-code input {
  font: inherit;
  font-size: 0.938rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 13px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
}
.pk-code input:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.pk-code .btn { padding-block: 10px; flex: none; }
.pk-msg { font-size: 0.844rem; color: var(--brass-3); min-height: 1.2em; }
.pk-msg.is-bad { color: #8C3A2B; }
.pk-price-out {
  margin-top: clamp(22px, 2.6vw, 30px);
  font-size: 0.906rem;
  color: var(--muted);
  max-width: 72ch;
}
.pk-price-out[hidden] { display: none; }

/* ---- the comparison, on a phone ---- */
/* The shared .tbl rule stacks every row into a list below 620px. The package
   tables are read across, package against package, so they stay tables here:
   tighter cells and smaller type, with long words allowed to hyphenate. */
@media (max-width: 620px) {
  .pk-tbl thead { display: table-header-group; }
  .pk-tbl tbody tr { display: table-row; padding-block: 0; border-bottom: 0; }
  .pk-tbl th, .pk-tbl td,
  .pk-tbl tbody th, .pk-tbl tbody td {
    display: table-cell;
    padding: 10px 6px 10px 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
    hyphens: auto;
    overflow-wrap: break-word;
  }
  .pk-tbl th:last-child, .pk-tbl td:last-child { padding-right: 0; }
  .pk-tbl thead th { padding-block: 0 10px; border-bottom-color: var(--rule-2); }
  .pk-tbl thead th:first-child { width: 25%; }
  .pk-tbl td { width: 25%; }
  .pk-tbl td[data-lbl]::before { content: none; }
  .pk-tbl thead th b { font-size: 0.906rem; }
  .pk-tbl thead th span { font-size: 0.625rem; letter-spacing: 0.02em; line-height: 1.35; text-transform: none; }
  .pk-tbl tbody th { font-size: 0.75rem; line-height: 1.35; }
  .pk-txt, .pk-locked { display: block; font-size: 0.688rem; line-height: 1.4; }
  .pk-yes svg { width: 15px; height: 15px; }
  .pk-fig { font-size: 1rem; }
  .pk-add-row .pk-fig { font-size: 0.875rem; }
}

/* ---- scholarship support ---- */
.sch-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  align-items: start;
}
.sch-card {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--card);
}
.sch-card.is-key { border-color: var(--brass-line); }
.sch-card h3 { margin: 0; font-size: clamp(1.25rem, 1.9vw, 1.5rem); }
.sch-card > p { font-size: 0.969rem; line-height: 1.7; color: var(--body); max-width: 62ch; }
.sch-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.sch-meta li {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--brass-soft);
  font-family: 'Karla', sans-serif;
  font-size: 0.719rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-3);
}
.sch-list-k {
  margin-top: 4px;
  font-family: 'Karla', sans-serif;
  font-size: 0.688rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.sch-list { margin-top: 0; }
@media (max-width: 860px) {
  .sch-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .pk-call { grid-template-columns: 1fr; }
}

/* ─────────────────────────── FOOTER ─────────────────────────── */

.footer {
  position: relative;
  overflow: hidden;
  background: #0D1422;
  color: rgba(243, 239, 230, 0.7);
  padding-block: clamp(48px, 6vw, 80px) 150px;
  font-size: 0.938rem;
  isolation: isolate;
}
.footer .wrap { position: relative; z-index: 1; }

/* Tallinn across the foot of the page, with the sea in front of it. */
.ft-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ft-star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #F3EFE6;
  animation: ft-twinkle 3.6s ease-in-out infinite;
}
@keyframes ft-twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.9; } }
.ft-city { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(110px, 13vw, 200px); display: block; }
.ft-far { fill: #16203A; }
.ft-near { fill: #111A30; }
.ft-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 36px; overflow: hidden; }
.ft-sea svg { position: absolute; left: 0; bottom: 0; width: 125%; height: 36px; animation: ft-waves 8s linear infinite; }
.ft-sea svg:last-child { animation-duration: 12s; animation-direction: reverse; }
.ft-w1 { fill: #121C33; }
.ft-w2 { fill: #0E162A; }
@keyframes ft-waves { from { transform: translateX(0); } to { transform: translateX(-80px); } }

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3.4vw, 56px);
  padding-bottom: 38px;
  border-bottom: 1px solid rgba(243, 239, 230, 0.12);
}
@media (max-width: 980px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer { padding-bottom: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-star, .ft-sea svg { animation: none; }
}

/* ---- the header without scripting ----------------------------------------
   The burger and the regions panel both need script, so with none the bar
   simply lays itself out flat: every link visible, wrapping onto a second row
   if it must, and the regions as plain links rather than a panel. */
.no-js .nav-in { flex-wrap: wrap; row-gap: 6px; padding-block: 10px; }
.no-js .nav-burger { display: none; }
.no-js .nav-links {
  position: static;
  flex-wrap: wrap;
  opacity: 1;
  visibility: visible;
  transform: none;
  max-height: none;
  overflow: visible;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.no-js .nav-list { flex-direction: row; flex-wrap: wrap; }
.no-js .nav-regions { display: none; }
.no-js .nav-menu {
  position: static;
  display: flex;
  flex-wrap: wrap;
  width: auto;
  padding: 0;
  gap: 0;
  background: none;
  border: 0;
  box-shadow: none;
  animation: none;
}
.no-js .nav-mi { padding: 9px 12px; border-bottom: 0; }
.no-js .nav-mi-t { font-family: 'Karla', sans-serif; font-size: 0.875rem; font-weight: 600; color: var(--ink-3); }
.no-js .nav-mi-s { display: none; }
.no-js .nav-cta { margin-top: 0; }
.no-js .nav-links a { border-bottom: 0; }
.footer .brand { margin-right: 0; margin-bottom: 18px; }
.footer p { max-width: 42ch; }
.footer h4 {
  color: var(--gold);
  font-family: 'Karla', sans-serif;
  font-size: 0.719rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--brass-line);
}
.footer ul { list-style: none; display: grid; gap: 10px; }
.footer a { text-decoration: none; transition: color 0.16s ease; }
.footer a:hover { color: #F3EFE6; }
.footer ul a { color: rgba(243, 239, 230, 0.75); }
.footer-mail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  color: var(--paper);
  font-weight: 700;
  text-decoration: none;
}
.footer-mail svg { width: 16px; height: 16px; color: var(--gold); }
.footer-base {
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.781rem;
  line-height: 1.5;
  color: rgba(243, 239, 230, 0.5);
}

/* ─────────────────────────── THE TRUST PAGES ─────────────────────────── */

.crumbs-light { color: var(--muted); }
.crumbs-light a { color: var(--gold-3); }
.crumbs-light a:hover { color: var(--ink); }
.lg-date {
  margin-top: 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
}
.lg-body { margin-top: clamp(30px, 4vw, 48px); display: grid; gap: clamp(28px, 3.4vw, 42px); }
.lg-sec h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.lg-n {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--brass-3);
  background: var(--brass-soft);
  border: 1px solid var(--brass-line);
  border-radius: 999px;
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  flex: none;
  align-self: center;
}
.lg-sec p { font-size: 1rem; line-height: 1.7; color: var(--body); max-width: 68ch; }
.lg-sec p + p { margin-top: 0.9em; }
.lg-sec b { color: var(--ink); }
.lg-sec a { color: var(--gold-3); font-weight: 700; }
.lg-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; max-width: 68ch; }
.lg-list li {
  position: relative;
  padding-left: 22px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--body);
}
.lg-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass-line);
}
.lg-sec .table-shell { margin-top: 18px; }
.lg-foot {
  margin-top: clamp(30px, 4vw, 44px);
  padding: 22px 24px;
  border: 1px dashed var(--rule-2);
  border-radius: var(--r);
  font-size: 0.969rem;
  line-height: 1.65;
  color: var(--body);
}
.lg-foot a { color: var(--gold-3); font-weight: 700; }
.lg-back { margin-top: 30px; }
.lg-back a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  color: var(--gold-3);
  text-decoration: none;
}
.lg-back svg { width: 16px; height: 16px; transition: transform 0.22s ease; }
.lg-back a:hover svg { transform: translateX(4px); }
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}

/* ─────────────────────────── CREDITS PAGE ─────────────────────────── */

.credits-list { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.credits-list li {
  padding-block: 15px;
  border-bottom: 1px solid var(--rule);
  display: grid;
  /* Every row has to use the same tracks. The third column used to be `auto`,
     so a row reading "CC BY-SA 3.0 · source" sized its own column wider than a
     row reading just "source", and the photographer column started at a
     different place on every line. It is a fixed width now, wide enough for
     the longest licence string, and the rows line up. */
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 186px;
  gap: 10px 22px;
  align-items: baseline;
  font-size: 0.938rem;
}
.credits-list b { color: var(--ink); font-weight: 700; }
.credits-list .lic { color: var(--muted); font-size: 0.844rem; white-space: nowrap; text-align: right; }
.credits-list a { color: var(--teal); font-weight: 700; text-decoration: none; }
.credits-list a:hover { color: var(--brass-3); }
/* The licence column cannot wrap, so three tracks stop fitting well before a
   phone: below this the row stacks instead of overflowing. */
@media (max-width: 900px) {
  .credits-list li { grid-template-columns: 1fr; gap: 4px; }
  .credits-list .lic { text-align: left; }
}

/* ─────────────────────────── REVEAL ANIMATION ─────────────────────────── */

.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--d, 0ms);
}
.rv.in { opacity: 1; transform: none; }
.no-js .rv, .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .region-card img, .strip img { transition: none !important; }
  .btn:hover { transform: none; }
  .spin { animation: none; }
}

/* Focus visibility */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 11px 18px;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 0.906rem;
  text-decoration: none;
  transition: top 0.18s ease;
}
.skip:focus { top: 12px; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────── EUROPE MAP (home hero) ─────────────────────────── */
/* Four regions on one map: the fastest way to show that the offer is wider than
   the reader assumes. Each region is a link through to its page. */
.hero-map { position: relative; }
.hero-map svg { width: 100%; height: auto; display: block; }

.eu-ctx path {
  fill: var(--paper-2);
  stroke: var(--rule-2);
  stroke-width: 1;
  stroke-linejoin: round;
}

.eu-r { cursor: pointer; }
.eu-fill path {
  stroke: var(--paper);
  stroke-width: 1.7;
  stroke-linejoin: round;
  fill-opacity: 0.58;
  transition: fill-opacity 0.3s ease;
}
.eu-baltic-states   .eu-fill path { fill: var(--teal); }
.eu-baltic-states   .eu-dot, .eu-baltic-states   .eu-label { fill: var(--teal); }
.eu-baltic-states   .eu-lead { stroke: var(--teal); }
.eu-central-europe  .eu-fill path { fill: var(--oxblood); }
.eu-central-europe  .eu-dot, .eu-central-europe  .eu-label { fill: var(--oxblood); }
.eu-central-europe  .eu-lead { stroke: var(--oxblood); }
.eu-western-europe  .eu-fill path { fill: var(--ink-3); }
.eu-western-europe  .eu-dot, .eu-western-europe  .eu-label { fill: var(--ink-3); }
.eu-western-europe  .eu-lead { stroke: var(--ink-3); }
.eu-northern-europe .eu-fill path { fill: var(--sage); }
.eu-northern-europe .eu-dot, .eu-northern-europe .eu-label { fill: var(--sage); }
.eu-northern-europe .eu-lead { stroke: var(--sage); }

.eu-lead { stroke-width: 1.3; opacity: 0.55; }
.eu-dot { r: 7; }
.eu-label {
  font-family: 'Karla', sans-serif;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* Hovering one region quietens the other three. */
.hero-map:hover .eu-r:not(:hover) .eu-fill path { fill-opacity: 0.22; }
.hero-map:hover .eu-r:not(:hover) .eu-label,
.hero-map:hover .eu-r:not(:hover) .eu-lead { opacity: 0.35; }
.eu-r:hover .eu-fill path { fill-opacity: 0.85; }
.eu-r:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; border-radius: 4px; }

/* Regions arrive one at a time, north to south, then settle. */
.eu-ctx { animation: eu-ctx-in 0.8s ease backwards; animation-delay: 120ms; }
.eu-r   { animation: eu-in 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
          animation-delay: calc(320ms + var(--i) * 150ms); transform-origin: center; }
.eu-lead, .eu-dot, .eu-label {
  animation: eu-mark-in 0.5s ease backwards;
  animation-delay: calc(820ms + var(--i) * 150ms);
}
@keyframes eu-ctx-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes eu-in     { from { opacity: 0; transform: translateY(12px) scale(0.985); } }
@keyframes eu-mark-in{ from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .eu-ctx, .eu-r, .eu-lead, .eu-dot, .eu-label { animation: none; }
}
@media (max-width: 900px) {
  /* The headline leads and the map follows it. The other way round, the page
     opened on an unexplained picture of Europe and the reader had to scroll
     past it to find out what the site was. Smaller, too: below the copy it is
     illustrating a point that has already been made, not carrying it. */
  .hero-map { width: 100%; max-width: 440px; margin-inline: auto; }
}
@media (max-width: 560px) {
  .hero-map { max-width: 330px; }
  .eu-key { margin-top: 12px; gap: 6px 14px; }
  .eu-k { font-size: 0.719rem; }
}
/* A colour key, used instead of leader labels where they will not fit. */
.eu-key { list-style: none; display: none; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; justify-content: center; }
.eu-k {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--ink-3); text-decoration: none;
}
.eu-k span { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.eu-baltic-states.eu-k span   { background: var(--teal); }
.eu-central-europe.eu-k span  { background: var(--oxblood); }
.eu-western-europe.eu-k span  { background: var(--ink-3); }
.eu-northern-europe.eu-k span { background: var(--sage); }
.eu-k:hover { color: var(--brass-3); }

@media (max-width: 1239px) {
  /* Narrower than this the map renders under ~500px, where the leader labels
     fall below 10px and stop being readable. The key takes over, and the map
     reclaims the side padding the labels were reserving. */
  .eu-label, .eu-lead, .eu-dot { display: none; }
  .eu-key { display: flex; }
  .hero-map { overflow: hidden; }
  .hero-map svg { margin-inline: -10.4%; width: 120.8%; }
}

/* ─────────────────────────── FIND A PROGRAMME ─────────────────────────── */
/* The filter is written as a sentence. Each highlighted token opens its own
   options underneath, so the grammar carries the meaning that a column of
   legends used to, and the choice reads back as something a person would say. */

.fs-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 60px);
  align-items: end;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.fs-head h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); }

.fs-head p { font-size: 0.938rem; line-height: 1.65; color: var(--body); max-width: 52ch; }

.fs {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: clamp(22px, 3vw, 40px);
}

.fs-sentence {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-variation-settings: 'SOFT' 20, 'WONK' 0;
  font-size: clamp(1.18rem, 2.1vw, 1.75rem);
  font-weight: 600;
  line-height: 1.75;
  color: var(--ink);
  letter-spacing: -0.012em;
}

.fs-token {
  font: inherit;
  font-style: italic;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
  padding: 0.08em 0.5em 0.12em;
  margin: 0 0.06em;
  border: 1px solid var(--brass-line);
  border-radius: 0.42em;
  background: var(--brass-soft);
  color: var(--brass-3);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.fs-token:hover { border-color: var(--brass); }
.fs-token[aria-expanded='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fs-token.is-set { border-color: var(--brass); }
.fs-caret { width: 0.62em; height: 0.62em; transform: rotate(90deg); transition: transform 0.2s ease; }
.fs-token[aria-expanded='true'] .fs-caret { transform: rotate(-90deg); }
.fs-token:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* ---- the options panel ---- */
.fs-panel {
  margin-top: clamp(18px, 2vw, 26px);
  padding: clamp(14px, 1.7vw, 20px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
}
.fs-panel[hidden] { display: none; }
.fs-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 13px;
  font-size: 0.656rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brass-2);
}
.fs-hint { color: var(--faint); letter-spacing: 0.09em; }

/* The doctoral note, in place of the budget clause once a PhD is chosen. */
.fs-phd {
  display: flex;
  gap: 12px;
  align-items: start;
  margin-top: clamp(18px, 2vw, 26px);
  padding: 16px 18px;
  border: 1px solid var(--brass-line);
  background: var(--brass-soft);
  border-radius: var(--r-sm);
  font-size: 0.906rem;
  line-height: 1.6;
  color: var(--brass-3);
}
.fs-phd[hidden] { display: none; }
.fs-phd svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }
#fsPay[hidden] { display: none; }

.fs-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-opt {
  font: inherit;
  font-family: 'Karla', sans-serif;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 10px 15px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-sm);
  background: var(--card);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}
.fs-opts-tight .fs-opt { padding: 8px 14px; font-size: 0.812rem; border-radius: 999px; }
.fs-opt i {
  font-style: normal;
  font-size: 0.688rem;
  font-weight: 600;
  color: var(--muted);
}
.fs-opt:hover { border-color: var(--brass); background: var(--brass-soft); }
.fs-opt[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fs-opt[aria-pressed='true'] i { color: var(--brass-line); }
.fs-opt:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* Countries sit under their region, tinted with the colour the rest of the
   site uses for it. */
.fs-region {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 8px 14px;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.fs-opt-region { flex-direction: row; align-items: center; gap: 8px; white-space: nowrap; }
.fs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rc); flex: none; }
.fs-region .fs-opt[aria-pressed='true'] { background: var(--rc); border-color: var(--rc); color: var(--paper); }
.fs-region .fs-opt[aria-pressed='true'] .fs-dot { background: rgba(250, 247, 242, 0.85); }

/* ---- the bar ---- */
.fs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(18px, 2.2vw, 26px);
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--rule);
}
.fs-count { font-size: 0.938rem; color: var(--body); }
.fs-count b {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--ink);
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}
.fs-go {
  font: inherit;
  font-family: 'Karla', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.fs-go:hover { background: var(--ink-3); transform: translateY(-1px); }
.fs-go[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.fs-go svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.fs-go:hover svg { transform: translateX(4px); }

@media (max-width: 860px) {
  .fs-head { grid-template-columns: 1fr; align-items: start; gap: 16px; }
  .fs-region { grid-template-columns: 1fr; align-items: start; }
  .fs-bar { flex-direction: column; align-items: stretch; }
  .fs-go { justify-content: center; }
}

/* ---- results ---- */
.fp-results { margin-top: clamp(24px, 2.8vw, 34px); }
.fp-results[hidden] { display: none; }

/* ---- the university card ----------------------------------------------
   Ported from the design mockup: a tall card with a drawn skyline on top,
   turning on its Y axis to a dark detail face. Two faces stacked in one grid
   cell, so the card is as tall as the taller of them and neither needs a
   fixed height; each face hides its own back. */
.uc { perspective: 1600px; }
.uc[hidden] { display: none; }
/* Cards in a row share a height, so a two-line descriptor on one does not
   leave its neighbours short. */
.uc-inner {
  display: grid;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.uc:hover .uc-inner { transform: rotateY(-4deg); }
.uc.is-flipped .uc-inner { transform: rotateY(180deg); }
.uc.is-flipped:hover .uc-inner { transform: rotateY(184deg); }

.uc-face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 24px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.uc-front {
  background: #FBFAF6;
  border: 1px solid rgba(20, 27, 43, 0.1);
  box-shadow: 0 30px 60px -36px rgba(20, 27, 43, 0.35);
}
.uc-back {
  position: relative;
  transform: rotateY(180deg);
  background: var(--ink);
  border: 1px solid var(--ink);
  color: #F3EFE6;
  padding: 28px 28px 24px;
  gap: 14px;
  box-shadow: 0 30px 60px -36px rgba(20, 27, 43, 0.6);
}

/* ---- front: the drawn skyline ---- */
.uc-art {
  position: relative;
  aspect-ratio: 384 / 220;
  min-height: 190px;
  flex: none;
  overflow: hidden;
}
.uc-sky { position: absolute; inset: 0; display: block; overflow: hidden; }
/* Six skies, assigned per city in tools/city-art.mjs. */
.uc-t1 { background: linear-gradient(180deg, #E9DCC0 0%, #F6EFE0 100%); }
.uc-t2 { background: linear-gradient(180deg, #E3D6C8 0%, #F6EFE3 100%); }
.uc-t3 { background: linear-gradient(180deg, #D9DFD9 0%, #F3F0E6 100%); }
.uc-t4 { background: linear-gradient(180deg, #D8DDE8 0%, #F2F0E8 100%); }
.uc-t5 { background: linear-gradient(180deg, #E6D9D2 0%, #F5EFE6 100%); }
.uc-t6 { background: linear-gradient(180deg, #DFE3D6 0%, #F4F1E6 100%); }
.uc-sky svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: block; }
.sk-far { fill: rgba(20, 27, 43, 0.16); }
.sk-mid { fill: rgba(20, 27, 43, 0.42); }
.sk-near { fill: #141b2b; }
.sk-water { fill: rgba(20, 27, 43, 0.08); }

.uc-sun {
  position: absolute;
  right: 54px;
  top: 30px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #E2C07A;
  opacity: 0.9;
  animation: uc-sun 5s ease-in-out infinite;
}
.uc-cloud {
  position: absolute;
  left: 40px;
  top: 50px;
  width: 64px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  animation: uc-drift 14s linear infinite alternate;
}
.uc-cloud::before {
  content: '';
  position: absolute;
  left: 25%;
  top: -7px;
  width: 40%;
  height: 14px;
  border-radius: 999px;
  background: inherit;
}
@keyframes uc-drift { from { transform: translateX(0); } to { transform: translateX(-30px); } }
@keyframes uc-sun { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes uc-hint { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(180deg); } }
@keyframes uc-twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* The region's colour rides on the country tag, the one place the card
   states which of the four groups it belongs to. */
.uc-flag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--rc, rgba(20, 27, 43, 0.65));
  color: #F3EFE6;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ---- front: the text ---- */
.uc-body { padding: 20px 26px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.uc-front h3 {
  font-size: 1.562rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.uc-where {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.844rem;
  color: rgba(20, 27, 43, 0.6);
  margin: 0;
}
.uc-where svg { width: 14px; height: 14px; color: var(--rc, var(--brass)); flex: none; }
.uc-levels { display: flex; flex-wrap: wrap; gap: 6px; }
.uc-pill {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(138, 107, 46, 0.1);
  color: #6E5322;
  font-size: 0.75rem;
  font-weight: 700;
}
/* An absence is stated, not left to be inferred from what is missing. */
.uc-pill.is-off {
  background: none;
  border: 1px dashed rgba(20, 27, 43, 0.35);
  color: #5A6178;
  font-weight: 600;
}
.uc-fee { display: flex; align-items: baseline; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.uc-fee b {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-variation-settings: 'SOFT' 20, 'WONK' 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.uc-fee span { font-size: 0.75rem; color: rgba(20, 27, 43, 0.55); }
/* A doctorate is not priced, so the fee line is followed by what a PhD place
   actually is rather than by a number that would not apply to it. */
.uc-phd {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  font-size: 0.75rem;
  color: rgba(20, 27, 43, 0.55);
}
.uc-phd b { font-size: 0.781rem; font-weight: 700; color: #6E5322; }
.uc-phd svg { width: 13px; height: 13px; flex: none; color: var(--rc, var(--brass)); align-self: center; }

/* Filtered to doctorates, a card carries no fee at all: the published ranges
   are bachelor's and master's ranges, so the doctoral line takes the fee's
   place on the front and the fee fact leaves the back. */
.fp-phd .uc-fee,
.fp-phd .uc-fact-fee { display: none; }
.fp-phd .uc-phd { margin-top: auto; }
.fp-phd .uc-phd svg { display: none; }
.fp-phd .uc-phd b {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-variation-settings: 'SOFT' 20, 'WONK' 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
}

/* ---- the turn control, on both faces ---- */
.uc-turn {
  font: inherit;
  font-family: 'Karla', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid rgba(20, 27, 43, 0.08);
  background: transparent;
  font-size: 0.688rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8A6B2E;
  cursor: pointer;
  transition: color 0.2s ease;
}
/* The control sits inside the padded body, so it keeps the body's inset. */
.uc-front .uc-turn { margin-top: 4px; }
.uc-turn svg { width: 14px; height: 14px; flex: none; animation: uc-hint 3s ease-in-out infinite; }
.uc-turn:hover { color: #6E5322; }
.uc-turn:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 4px; }
.uc-turn-back {
  padding: 14px 0 0;
  border-top-color: rgba(243, 239, 230, 0.12);
  color: #E2C07A;
}
.uc-turn-back svg { animation: none; transform: rotate(180deg); }
.uc-turn-back:hover { color: #F3EFE6; }

/* ---- back ---- */
/* Three stars, placed as in the mockup, so the dark face reads as a night
   sky rather than a black panel. */
.uc-star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #F3EFE6;
  animation: uc-twinkle 3s ease-in-out infinite;
}
.uc-eyebrow {
  font-size: 0.688rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #C9A45C;
}
.uc-back h3 {
  color: #F3EFE6;
  font-size: 1.438rem;
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
}
.uc-blurb { font-size: 0.844rem; line-height: 1.6; color: rgba(243, 239, 230, 0.8); margin: 0; }
.uc-facts { display: grid; gap: 14px; margin: 0; }
.uc-facts div { display: flex; gap: 14px; font-size: 0.812rem; line-height: 1.55; }
.uc-facts dt {
  width: 62px;
  flex: none;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(243, 239, 230, 0.5);
  padding-top: 3px;
}
.uc-facts dd { margin: 0; color: rgba(243, 239, 230, 0.9); }
.uc-facts dd b { color: #F3EFE6; }
.uc-facts dd span { color: rgba(243, 239, 230, 0.55); }
.uc-note { font-size: 0.781rem; font-style: italic; color: rgba(243, 239, 230, 0.6); margin: 0; }
.uc-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(243, 239, 230, 0.12); }
.uc-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.812rem;
  font-weight: 700;
  color: #E2C07A;
  text-decoration: none;
}
.uc-links a:hover { color: #F3EFE6; }
.uc-links svg { width: 13px; height: 13px; flex: none; }

/* A card with links on its back and a turn on its front still has to work
   with the animation switched off. */
@media (prefers-reduced-motion: reduce) {
  .uc-inner { transition: none; }
  .uc:hover .uc-inner { transform: none; }
  .uc.is-flipped .uc-inner,
  .uc.is-flipped:hover .uc-inner { transform: rotateY(180deg); }
  .uc-sun, .uc-cloud, .uc-star, .uc-turn svg { animation: none; }
}

@media (max-width: 480px) {
  .uc-body { padding: 18px 20px 20px; }
  .uc-back { padding: 22px 20px 20px; }
  .uc-front h3 { font-size: 1.375rem; }
}


.fp-empty {
  margin-top: 26px;
  padding: 26px;
  border: 1px dashed var(--rule-2);
  border-radius: var(--r);
  font-size: 0.969rem;
  color: var(--body);
  text-align: center;
}
.fp-empty a { color: var(--brass-3); font-weight: 700; }

@media (max-width: 720px) {
  .uc-grid,
  .fp-results { grid-template-columns: 1fr; }
  .fp-bar { align-items: flex-start; flex-direction: column; }
}

/* Clear sits beside the main action, and only once something has been chosen. */
.fs-acts { display: flex; align-items: center; gap: 18px; }
.fs-clear {
  font: inherit;
  font-family: 'Karla', sans-serif;
  font-size: 0.812rem;
  font-weight: 700;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule-2);
  padding: 0 0 2px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.fs-clear:hover { color: var(--brass-3); border-color: var(--brass); }
.fs-clear:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.fs-clear[hidden] { display: none; }
@media (max-width: 860px) {
  .fs-acts { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .fs-clear { align-self: center; }
}

/* The closing tile: what the list does not cover, said where a reader has just
   finished looking through what it does. Replaces a banner above the results
   that stated the same thing before anyone had a reason to care. */
/* The closing tile is not a result, so it does not imitate one: no skyline,
   no fee, just a centred invitation sitting in the same footprint. */
.fp-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  min-width: 0;
  min-height: 100%;
  padding: 40px 32px;
  background: transparent;
  border: 1.5px dashed rgba(138, 107, 46, 0.45);
  border-radius: 24px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.fp-more:hover { background: rgba(138, 107, 46, 0.05); border-color: rgba(138, 107, 46, 0.7); }
.fp-more[hidden] { display: none; }
.fp-more-mark {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brass-soft);
  border: 1px solid var(--brass-line);
  color: var(--brass-3);
  margin-bottom: 2px;
}
.fp-more-mark svg { width: 21px; height: 21px; }
.fp-more h3 { font-size: 1.625rem; line-height: 1.15; color: var(--ink); }
.fp-more p { font-size: 0.906rem; line-height: 1.6; color: rgba(20, 27, 43, 0.7); max-width: 34ch; }
.fp-more-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 0.938rem;
  font-weight: 700;
  color: #8A6B2E;
  text-decoration: none;
}
.fp-more-go svg { width: 15px; height: 15px; transition: transform 0.22s ease; }
.fp-more-go:hover svg { transform: translateX(4px); }