/*
 * The global chrome: header variants, footer variants, drawer, announcement bar and the
 * floating cluster.
 *
 * Logical properties throughout — `margin-inline-start`, never `margin-left` — so the whole
 * thing mirrors in RTL without a second stylesheet. Every value is a token; the `var()`
 * fallbacks are what keep the chrome usable with the plugin deactivated.
 */

.edulume-skip-link {
  position: absolute;
  inset-block-start: var(--edulume-space-2, 0.5rem);
  inset-inline-start: var(--edulume-space-2, 0.5rem);
  z-index: 100;
}

.edulume-skip-link:focus {
  clip: auto;
  clip-path: none;
  block-size: auto;
  inline-size: auto;
  padding: var(--edulume-space-3, 0.75rem);
  background-color: var(--edulume-surface, #fbfbfc);
  color: var(--edulume-ink, #16181d);
}

.edulume-container {
  max-inline-size: var(--edulume-content-width, 75rem);
  margin-inline: auto;
  padding-inline: var(--edulume-space-4, 1rem);
}

.edulume-section {
  padding-block: var(--edulume-section-spacing, 4rem);
}

/* Announcement bar ------------------------------------------------------- */

.edulume-announcement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--edulume-space-3, 0.75rem);
  padding-block: var(--edulume-space-2, 0.5rem);
  padding-inline: var(--edulume-space-4, 1rem);
  background-color: var(--edulume-accent, #123a6b);
  color: var(--edulume-on-accent, #ffffff);
  font-size: var(--edulume-font-size-n1, 0.875rem);
}

.edulume-announcement__message {
  margin: 0;
}

.edulume-announcement__link {
  color: inherit;
  text-underline-offset: 0.2em;
}

.edulume-announcement__dismiss {
  margin-inline-start: auto;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  /* 44px: the touch-target floor, not a decorative size. */
  min-inline-size: 44px;
  min-block-size: 44px;
}

/* Utility bar ------------------------------------------------------------ */

.edulume-utility {
  display: flex;
  flex-wrap: wrap;
  gap: var(--edulume-space-4, 1rem);
  padding-block: var(--edulume-space-2, 0.5rem);
  padding-inline: var(--edulume-space-4, 1rem);
  background-color: var(--edulume-surface-subtle, #f1f2f4);
  color: var(--edulume-ink-muted, #4a4f58);
  font-size: var(--edulume-font-size-n1, 0.875rem);
}

.edulume-utility__menu {
  display: flex;
  gap: var(--edulume-space-3, 0.75rem);
  margin: 0;
  margin-inline-start: auto;
  padding: 0;
  list-style: none;
}

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

.edulume-header {
  background-color: var(--edulume-surface, #fbfbfc);
  border-block-end: 1px solid var(--edulume-border, #e3e5e9);
}

.edulume-has-sticky-header .edulume-header[data-sticky='true'] {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
}

.edulume-header__inner {
  display: flex;
  align-items: center;
  gap: var(--edulume-space-4, 1rem);
  max-inline-size: var(--edulume-content-width, 75rem);
  margin-inline: auto;
  padding-block: var(--edulume-space-3, 0.75rem);
  padding-inline: var(--edulume-space-4, 1rem);
}

.edulume-header__nav {
  margin-inline-start: auto;
}

.edulume-header__actions {
  display: flex;
  align-items: center;
  gap: var(--edulume-space-2, 0.5rem);
}

.edulume-header__inner--centred,
.edulume-header__inner--stacked {
  flex-wrap: wrap;
  justify-content: center;
}

.edulume-header__brand--centred {
  margin-inline: auto;
}

.edulume-header__nav--centred,
.edulume-header__nav--full {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  margin-inline-start: 0;
}

.edulume-header__nav--start {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

/*
 * The transparent variant draws over the hero. It only applies where a hero actually follows —
 * the body class is added server-side — so it can never leave light text on a light page.
 */
.edulume-has-hero .edulume-header--transparent-hero {
  position: absolute;
  inset-inline: 0;
  background-color: transparent;
  border-block-end: 0;
  color: var(--edulume-hero-ink, #ffffff);
}

.edulume-nav__list {
  display: flex;
  gap: var(--edulume-space-4, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.edulume-nav__list a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: inherit;
  text-decoration: none;
}

.edulume-nav__list a:hover,
.edulume-nav__list a:focus-visible {
  text-decoration: underline;
}

/* The mega menu is a panel, not a dropdown: it spans the container and lays out in columns. */
.edulume-nav--mega .sub-menu {
  display: none;
  position: absolute;
  inset-inline: 0;
  padding: var(--edulume-space-6, 2rem);
  background-color: var(--edulume-surface, #ffffff);
  border-block-end: 1px solid var(--edulume-border, #e3e5e9);
  columns: 3;
}

.edulume-nav--mega li:hover > .sub-menu,
.edulume-nav--mega li:focus-within > .sub-menu {
  display: block;
}

/* Drawer ----------------------------------------------------------------- */

.edulume-drawer-toggle {
  display: none;
  min-inline-size: 44px;
  min-block-size: 44px;
  border: 0;
  background: none;
  cursor: pointer;
}

.edulume-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(22rem, 90vw);
  z-index: 40;
  padding: var(--edulume-space-6, 2rem);
  background-color: var(--edulume-surface, #ffffff);
  overflow-y: auto;
}

.edulume-drawer[hidden] {
  display: none;
}

.edulume-drawer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.edulume-drawer__list a {
  display: block;
  padding-block: var(--edulume-space-3, 0.75rem);
  color: inherit;
}

@media (max-width: 60rem) {
  .edulume-drawer-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .edulume-header__nav {
    display: none;
  }
}

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

.edulume-footer {
  margin-block-start: var(--edulume-section-spacing, 4rem);
  padding-block: var(--edulume-space-8, 3rem);
  background-color: var(--edulume-surface-subtle, #f1f2f4);
  color: var(--edulume-ink, #16181d);
}

.edulume-footer__inner {
  display: grid;
  gap: var(--edulume-space-6, 2rem);
  max-inline-size: var(--edulume-content-width, 75rem);
  margin-inline: auto;
  padding-inline: var(--edulume-space-4, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.edulume-footer__inner--centred {
  text-align: center;
  grid-template-columns: 1fr;
}

.edulume-footer__baseline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--edulume-space-4, 1rem);
  max-inline-size: var(--edulume-content-width, 75rem);
  margin-inline: auto;
  margin-block-start: var(--edulume-space-6, 2rem);
  padding-inline: var(--edulume-space-4, 1rem);
  padding-block-start: var(--edulume-space-4, 1rem);
  border-block-start: 1px solid var(--edulume-border, #e3e5e9);
  font-size: var(--edulume-font-size-n1, 0.875rem);
}

.edulume-footer__menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--edulume-space-4, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.edulume-footer__credit {
  margin: 0;
  margin-inline-start: auto;
}

/*
 * Core block styles inside our chrome.
 *
 * A widget area holds core blocks — headings, lists, archive links — and those carry
 * WordPress's own colours, which have no idea this theme has a dark mode. On a dark footer
 * they stay dark-on-dark: the axe sweep caught exactly this, passing every template in light
 * mode and failing all ten in dark.
 *
 * Inheriting our ink token is what fixes it for every core block at once, including ones this
 * theme has never heard of. Links stay distinguishable by underline rather than by colour,
 * which is the more accessible signal anyway.
 */
.edulume-footer :is(a, .wp-block-heading, .edulume-widget__title, .edulume-footer__heading),
.edulume-utility :is(a, .wp-block-heading) {
  color: inherit;
}

.edulume-footer a,
.edulume-utility a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Floating cluster ------------------------------------------------------- */

.edulume-fab {
  position: fixed;
  inset-block-end: var(--edulume-space-4, 1rem);
  inset-inline-end: var(--edulume-space-4, 1rem);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: var(--edulume-space-2, 0.5rem);
}

.edulume-fab__action {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Both axes at the touch-target floor. */
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--edulume-radius-full, 999px);
  background-color: var(--edulume-accent, #123a6b);
  color: var(--edulume-on-accent, #ffffff);
  box-shadow: var(--edulume-shadow-2, 0 2px 8px rgb(0 0 0 / 20%));
}

.edulume-fab__action--back-to-top {
  background-color: var(--edulume-surface, #ffffff);
  color: var(--edulume-ink, #16181d);
}

/* Preloader -------------------------------------------------------------- */

.edulume-preloader {
  position: fixed;
  inset: 0;
  z-index: 90;
  background-color: var(--edulume-surface, #fbfbfc);
}

.edulume-preloader[data-done] {
  display: none;
}

/* Utility templates ------------------------------------------------------ */

.edulume-grid {
  display: grid;
  gap: var(--edulume-space-6, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.edulume-card {
  display: flex;
  flex-direction: column;
  background-color: var(--edulume-surface, #ffffff);
  border: 1px solid var(--edulume-border, #e3e5e9);
  border-radius: var(--edulume-radius-2, 0.5rem);
  overflow: hidden;
}

.edulume-card__image {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.edulume-card__body {
  padding: var(--edulume-space-4, 1rem);
}

.edulume-maintenance__inner {
  max-inline-size: 34rem;
  margin-inline: auto;
  padding-block: var(--edulume-space-8, 3rem);
  padding-inline: var(--edulume-space-4, 1rem);
  text-align: center;
}

/*
 * Reduced motion wins over everything the configurator can store, so it is declared last and
 * has nothing above it to lose to.
 */
@media (prefers-reduced-motion: reduce) {
  .edulume-drawer,
  .edulume-preloader,
  .edulume-fab__action {
    transition: none !important;
    animation: none !important;
  }
}

/* Colour mode switch ----------------------------------------------------- */

/*
 * The light/dark toggle: one 36px circle showing the mode you will switch to.
 *
 * Both icons are in the markup and only one is visible; swapping `src` or re-rendering an icon
 * on click costs a frame and, on a slow connection, shows nothing at all in the gap. The
 * padding is what carries the hit area past the 44px touch floor without making the visible
 * control any bigger.
 */
.edulume-mode-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  padding: 4px;
  border: var(--edulume-border-width, 1px) solid var(--edulume-border, #d7dae0);
  border-radius: var(--edulume-radius-full, 999px);
  background-color: transparent;
  color: var(--edulume-ink-muted, #5b616e);
  cursor: pointer;
  transition:
    background-color var(--edulume-duration-fast, 160ms) var(--edulume-easing, ease),
    color var(--edulume-duration-fast, 160ms) var(--edulume-easing, ease);
}

.edulume-mode-toggle:hover {
  background-color: var(--edulume-surface-subtle, #f4f5f7);
  color: var(--edulume-accent-text, #365e92);
}

.edulume-mode-toggle:focus-visible {
  outline: 3px solid var(--edulume-focus-ring, #365e92);
  outline-offset: 2px;
}

/*
 * The hit area, extended past the visible circle rather than by growing it.
 *
 * A pseudo-element rather than a `min-block-size`, because the button is a grid container
 * centring its icons and a minimum size would move them off centre.
 */
@media (pointer: coarse) {
  .edulume-mode-toggle::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
  }
}

.edulume-mode-toggle__icon {
  grid-area: 1 / 1;
  display: inline-flex;
  inline-size: 18px;
  block-size: 18px;
  transition:
    opacity 180ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.edulume-mode-toggle__icon svg {
  inline-size: 100%;
  block-size: 100%;
}

/*
 * Light mode is showing, so the button offers dark: the moon is visible and the sun is
 * rotated out. Keyed off `[data-theme]` on the root, which the no-flash script sets before
 * first paint, so the correct icon is the one that renders — there is no swap to watch.
 */
.edulume-mode-toggle__icon--sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}

[data-theme='dark'] .edulume-mode-toggle__icon--sun {
  opacity: 1;
  transform: none;
}

[data-theme='dark'] .edulume-mode-toggle__icon--moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}

@media (prefers-reduced-motion: reduce) {
  .edulume-mode-toggle,
  .edulume-mode-toggle__icon {
    transition: none;
  }
}

/* Logo wall ---------------------------------------------------------------- */

/*
 * Partner and accreditation marks.
 *
 * The mark size is a token rather than a fixed value because it is the thing most likely to
 * need adjusting per site: a wall of wordmarks wants more width than a wall of monograms.
 */
.edulume-logo-wall {
  --edulume-logo-mark-size: 7.5rem;

  display: grid;
  gap: var(--edulume-space-4, 1rem);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.edulume-logo-wall__item {
  display: flex;
  align-items: center;
  gap: var(--edulume-space-4, 1rem);
  padding: var(--edulume-space-4, 1rem);
  border: var(--edulume-border-width, 1px) solid var(--edulume-border, #d7dae0);
  border-radius: var(--edulume-radius, 0.75rem);
  background-color: var(--edulume-surface, #fbfbfc);
  /* `transform` and `opacity` only: both are composited, so a hover cannot cause a reflow. */
  transition:
    transform var(--edulume-duration-base, 240ms) var(--edulume-easing, ease),
    box-shadow var(--edulume-duration-base, 240ms) var(--edulume-easing, ease),
    border-color var(--edulume-duration-base, 240ms) var(--edulume-easing, ease);
}

.edulume-logo-wall__mark {
  flex: 0 0 auto;
  inline-size: var(--edulume-logo-mark-size);
  block-size: auto;
  /*
   * Greyscale at rest, colour on hover. A wall of competing brand colours pulls the eye away
   * from the page's own accent; desaturating settles it without hiding anything.
   */
  filter: grayscale(1);
  opacity: 0.72;
  transition:
    filter var(--edulume-duration-base, 240ms) var(--edulume-easing, ease),
    opacity var(--edulume-duration-base, 240ms) var(--edulume-easing, ease),
    transform var(--edulume-duration-base, 240ms) var(--edulume-easing, ease);
}

.edulume-logo-wall__name {
  font-size: var(--edulume-font-size-n1, 0.875rem);
  color: var(--edulume-ink-muted, #5b616e);
}

/* Hover and keyboard focus behave identically — a keyboard user gets the same affordance. */
.edulume-logo-wall__item:hover,
.edulume-logo-wall__item:focus-within {
  transform: translateY(-4px);
  border-color: var(--edulume-accent, #365e92);
  box-shadow: var(--edulume-shadow-2, 0 2px 8px rgb(0 0 0 / 20%));
}

.edulume-logo-wall__item:hover .edulume-logo-wall__mark,
.edulume-logo-wall__item:focus-within .edulume-logo-wall__mark {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.06);
}

.edulume-logo-wall__item:hover .edulume-logo-wall__name,
.edulume-logo-wall__item:focus-within .edulume-logo-wall__name {
  color: var(--edulume-ink, #16181d);
}

/*
 * Names off: the mark carries the whole tile, so it gets the full width and the row gets
 * tighter. Set from the admin, applied as an attribute rather than a second stylesheet.
 */
.edulume-logo-wall[data-show-names='false'] {
  --edulume-logo-mark-size: 11rem;

  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.edulume-logo-wall[data-show-names='false'] .edulume-logo-wall__item {
  justify-content: center;
}

.edulume-logo-wall[data-show-names='false'] .edulume-logo-wall__name {
  /*
   * Hidden visually, kept for assistive technology. `display: none` would leave a screen-reader
   * user with a wall of images whose only description is a filename.
   */
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .edulume-logo-wall__item,
  .edulume-logo-wall__mark {
    transition: none;
  }

  .edulume-logo-wall__item:hover,
  .edulume-logo-wall__item:focus-within {
    transform: none;
  }

  .edulume-logo-wall__item:hover .edulume-logo-wall__mark,
  .edulume-logo-wall__item:focus-within .edulume-logo-wall__mark {
    transform: none;
  }
}

/* Card actions ------------------------------------------------------------ */

.edulume-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--edulume-space-2, 0.5rem);
  margin-block-start: var(--edulume-space-3, 0.75rem);
}

.edulume-card__action {
  min-block-size: 44px;
  padding-inline: var(--edulume-space-3, 0.75rem);
  border: var(--edulume-border-width, 1px) solid var(--edulume-border, #d7dae0);
  border-radius: var(--edulume-radius-full, 999px);
  background-color: transparent;
  color: var(--edulume-ink-muted, #5b616e);
  font: inherit;
  font-size: var(--edulume-font-size-n1, 0.875rem);
  cursor: pointer;
  transition:
    background-color var(--edulume-duration-fast, 160ms) var(--edulume-easing, ease),
    color var(--edulume-duration-fast, 160ms) var(--edulume-easing, ease);
}

.edulume-card__action:hover {
  border-color: var(--edulume-accent, #365e92);
  color: var(--edulume-ink, #16181d);
}

/* Pressed is the saved state, and it is announced as well as coloured. */
.edulume-card__action[aria-pressed='true'] {
  background-color: var(--edulume-accent, #365e92);
  border-color: var(--edulume-accent, #365e92);
  color: var(--edulume-on-accent, #ffffff);
}

/*
 * The comparison limit. The script disables the remaining buttons at four rather than letting
 * a fifth click do nothing silently, and this is what makes that visible.
 */
.edulume-card__action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Home sections ----------------------------------------------------------- */

.edulume-home-section__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--edulume-space-3, 0.75rem);
  margin-block-end: var(--edulume-space-6, 2rem);
}

.edulume-home-section__more {
  font-size: var(--edulume-font-size-n1, 0.875rem);
}

.edulume-hero__actions,
.edulume-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--edulume-space-3, 0.75rem);
}

.edulume-cta {
  flex-direction: column;
  align-items: flex-start;
}

.edulume-button--quiet {
  background-color: transparent;
  border: var(--edulume-border-width, 1px) solid var(--edulume-border, #d7dae0);
  color: var(--edulume-ink, #16181d);
}

/* Quotes ------------------------------------------------------------------ */

.edulume-quote {
  margin: 0;
  padding: var(--edulume-space-6, 2rem);
  border: var(--edulume-border-width, 1px) solid var(--edulume-border, #d7dae0);
  border-radius: var(--edulume-radius, 0.75rem);
  background-color: var(--edulume-surface-subtle, #f4f5f7);
}

.edulume-quote__body {
  margin: 0 0 var(--edulume-space-3, 0.75rem);
  font-family: var(--edulume-font-quote, inherit);
}

.edulume-quote__name {
  font-style: normal;
  font-weight: 600;
}

.edulume-quote__detail {
  display: block;
  color: var(--edulume-ink-muted, #5b616e);
  font-size: var(--edulume-font-size-n1, 0.875rem);
}

/* FAQ --------------------------------------------------------------------- */

.edulume-faq-item {
  border-block-end: var(--edulume-border-width, 1px) solid var(--edulume-border, #d7dae0);
}

.edulume-faq-item__question {
  /* A real target, and a pointer, because a summary is a control. */
  min-block-size: 44px;
  display: flex;
  align-items: center;
  padding-block: var(--edulume-space-3, 0.75rem);
  cursor: pointer;
  font-weight: 600;
}

.edulume-faq-item__answer {
  padding-block-end: var(--edulume-space-4, 1rem);
  color: var(--edulume-ink-muted, #5b616e);
}

/* Forms ------------------------------------------------------------------- */

.edulume-form {
  display: grid;
  gap: var(--edulume-space-3, 0.75rem);
  max-inline-size: 32rem;
  padding: var(--edulume-space-6, 2rem);
  border: var(--edulume-border-width, 1px) solid var(--edulume-border, #d7dae0);
  border-radius: var(--edulume-radius, 0.75rem);
  background-color: var(--edulume-surface, #fbfbfc);
}

.edulume-form__field {
  display: grid;
  gap: var(--edulume-space-2, 0.5rem);
  margin: 0;
}

.edulume-form__label {
  font-size: var(--edulume-font-size-n1, 0.875rem);
  font-weight: 600;
}

.edulume-form__input {
  min-block-size: 44px;
  padding: var(--edulume-space-2, 0.5rem) var(--edulume-space-3, 0.75rem);
  border: var(--edulume-border-width, 1px) solid var(--edulume-border, #d7dae0);
  border-radius: var(--edulume-radius-2, 0.5rem);
  background-color: var(--edulume-surface, #fbfbfc);
  color: var(--edulume-ink, #16181d);
  font: inherit;
}

.edulume-form__input[aria-invalid='true'] {
  border-color: var(--edulume-accent, #365e92);
  border-width: 2px;
}

/*
 * The error is styled as text, not as colour alone. Colour is the one channel a
 * colour-blind visitor may not have, and an error message that only differs by hue is an
 * error message they cannot find.
 */
.edulume-form__error:not(:empty) {
  padding-block-start: var(--edulume-space-2, 0.5rem);
  color: var(--edulume-accent-text, #365e92);
  font-size: var(--edulume-font-size-n1, 0.875rem);
  font-weight: 600;
}

.edulume-form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--edulume-space-2, 0.5rem);
}

/* Off-screen rather than `display: none`: a bot reading the markup still finds it. */
.edulume-form__honeypot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.edulume-form__status:not(:empty) {
  margin: 0;
  padding: var(--edulume-space-3, 0.75rem);
  border-radius: var(--edulume-radius-2, 0.5rem);
  background-color: var(--edulume-surface-subtle, #f4f5f7);
}

/* Eligibility and calculator ---------------------------------------------- */

.edulume-eligibility-grid {
  display: grid;
  gap: var(--edulume-space-6, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.edulume-eligibility,
.edulume-calculator {
  display: grid;
  gap: var(--edulume-space-3, 0.75rem);
  align-content: start;
  padding: var(--edulume-space-6, 2rem);
  border: var(--edulume-border-width, 1px) solid var(--edulume-border, #d7dae0);
  border-radius: var(--edulume-radius, 0.75rem);
  background-color: var(--edulume-surface-subtle, #f4f5f7);
}

.edulume-eligibility__verdict:not(:empty) {
  padding: var(--edulume-space-3, 0.75rem);
  border-inline-start: 4px solid var(--edulume-accent, #365e92);
  border-radius: var(--edulume-radius-2, 0.5rem);
  background-color: var(--edulume-surface, #fbfbfc);
  font-weight: 600;
}

.edulume-eligibility__advice {
  margin: 0;
  color: var(--edulume-ink-muted, #5b616e);
  font-size: var(--edulume-font-size-n1, 0.875rem);
}

.edulume-calculator__total {
  margin: 0;
  font-size: var(--edulume-font-size-4, 2rem);
  font-weight: 700;
}

.edulume-calculator__row {
  display: flex;
  justify-content: space-between;
  gap: var(--edulume-space-3, 0.75rem);
  padding-block: var(--edulume-space-2, 0.5rem);
  border-block-end: var(--edulume-border-width, 1px) solid var(--edulume-border, #d7dae0);
  font-size: var(--edulume-font-size-n1, 0.875rem);
}

.edulume-calculator__note {
  margin: 0;
  color: var(--edulume-ink-muted, #5b616e);
  font-size: var(--edulume-font-size-n1, 0.875rem);
}

.edulume-chip {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: var(--edulume-space-3, 0.75rem);
  border: var(--edulume-border-width, 1px) solid var(--edulume-border, #d7dae0);
  border-radius: var(--edulume-radius-full, 999px);
}

/* Compare tray ------------------------------------------------------------ */

.edulume-compare-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--edulume-space-3, 0.75rem);
  margin-block-end: var(--edulume-space-4, 1rem);
}

.edulume-compare-bar__count {
  margin: 0;
  color: var(--edulume-ink-muted, #5b616e);
  font-size: var(--edulume-font-size-n1, 0.875rem);
}

/* Carousel ---------------------------------------------------------------- */

.edulume-carousel__track {
  display: flex;
  gap: var(--edulume-space-4, 1rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Momentum stays with the browser; the buttons only call scrollBy. */
  scroll-behavior: smooth;
}

.edulume-carousel__track > * {
  flex: 0 0 min(22rem, 80%);
  scroll-snap-align: start;
}

.edulume-carousel__controls {
  display: flex;
  gap: var(--edulume-space-2, 0.5rem);
  margin-block-start: var(--edulume-space-3, 0.75rem);
}

.edulume-carousel__button {
  inline-size: 44px;
  block-size: 44px;
  border: var(--edulume-border-width, 1px) solid var(--edulume-border, #d7dae0);
  border-radius: var(--edulume-radius-full, 999px);
  background-color: var(--edulume-surface, #fbfbfc);
  cursor: pointer;
}

.edulume-carousel__button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.edulume-carousel__button::before {
  content: '';
  display: block;
  inline-size: 0.6rem;
  block-size: 0.6rem;
  margin-inline: auto;
  border-block-start: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  transform: rotate(45deg);
}

.edulume-carousel__button--previous::before {
  transform: rotate(-135deg);
}

/* Motion ------------------------------------------------------------------ */

/*
 * The reveal only hides anything once the script has said it is driving. Without that guard a
 * blocked or failed module would leave the page permanently blank — which is the failure mode
 * that makes scroll animation a liability rather than a flourish.
 */
[data-edulume-motion-active='true'] [data-edulume-motion] {
  opacity: 0;
  transform: translateY(0.75rem);
  transition:
    opacity var(--edulume-duration-base, 240ms) var(--edulume-easing, ease),
    transform var(--edulume-duration-base, 240ms) var(--edulume-easing, ease);
}

[data-edulume-motion-active='true'] [data-edulume-motion].is-in-view {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-edulume-motion-active='true'] [data-edulume-motion] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Tabs, counters and before/after ----------------------------------------- */

.edulume-block--tabs [role='tablist'] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--edulume-space-2, 0.5rem);
}

.edulume-block--tabs [role='tab'] {
  min-block-size: 44px;
  padding-inline: var(--edulume-space-3, 0.75rem);
  border: var(--edulume-border-width, 1px) solid var(--edulume-border, #d7dae0);
  border-radius: var(--edulume-radius-full, 999px);
  background-color: transparent;
  font: inherit;
  cursor: pointer;
}

.edulume-block--tabs [role='tab'][aria-selected='true'] {
  background-color: var(--edulume-accent, #365e92);
  border-color: var(--edulume-accent, #365e92);
  color: var(--edulume-on-accent, #ffffff);
}

[data-edulume-before-after] {
  /*
   * Declared here, not only set from script, so the divider has a defined resting position
   * before `interactions.js` runs — and so the token audit can see that something owns it.
   */
  --edulume-reveal: 50%;

  position: relative;
  overflow: hidden;
}

[data-edulume-before-after] > :nth-child(2) {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--edulume-reveal, 50%)) 0 0);
}

.edulume-video__frame {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* ========================================================================
 * Small screens
 *
 * The theme had exactly one breakpoint before this — the drawer at 60rem — and everything
 * else was sized for a desktop and left to fend for itself on a phone. That shows up as three
 * things on a 360px screen: sections with more air than content, headings that eat the fold,
 * and grids whose minimum column is wider than the viewport.
 *
 * The rules below scale the configured values rather than replacing them. `calc()` against the
 * same token means a site that has chosen generous spacing still reads as generous on a phone,
 * proportionally — replacing the token with a fixed number would throw that choice away and
 * make every site identical on mobile.
 * ===================================================================== */

@media (max-width: 48rem) {
  /*
   * Vertical rhythm at 55%. Six rem above and below every section is confident on a desktop and
   * absurd on a phone, where it means a full thumb-swipe of nothing between one idea and the
   * next.
   */
  .edulume-section {
    padding-block: calc(var(--edulume-section-spacing, 6rem) * 0.55);
  }

  .edulume-container {
    padding-inline: calc(var(--edulume-gutter, 1.5rem) * 0.8);
  }

  /*
   * One column, deliberately. `auto-fill` with a 16rem minimum already collapses to one column
   * here, but it leaves the track sized at 16rem — wider than a 360px viewport once padding is
   * counted — and the row overflows horizontally. Stating one column removes the arithmetic.
   */
  .edulume-grid,
  .edulume-logo-wall,
  .edulume-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--edulume-space-4, 1rem);
  }

  .edulume-card__body {
    padding: var(--edulume-space-4, 1rem);
  }

  /* Header: the brand and the drawer toggle, nothing else competing for the row. */
  .edulume-header__inner {
    gap: var(--edulume-space-3, 0.75rem);
    padding-block: var(--edulume-space-3, 0.75rem);
  }

  .edulume-header__actions {
    gap: var(--edulume-space-2, 0.5rem);
  }

  /*
   * The utility bar is the first thing to go. It carries secondary links that are all reachable
   * from the drawer, and on a phone it costs a whole row above the content people came for.
   */
  .edulume-utility {
    display: none;
  }

  /* The announcement stacks rather than truncating: a message worth showing is worth reading. */
  .edulume-announcement {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--edulume-space-2, 0.5rem);
    text-align: start;
  }

  .edulume-announcement__dismiss {
    margin-inline-start: auto;
  }

  /*
   * The floating cluster sits above the thumb, not under it. Bottom-right at the very edge is
   * where a phone's own gesture bar lives, and a button there is one a person misses twice
   * before hitting it.
   */
  .edulume-fab {
    inset-block-end: calc(var(--edulume-space-4, 1rem) + env(safe-area-inset-bottom, 0px));
    inset-inline-end: var(--edulume-space-3, 0.75rem);
    flex-direction: row;
  }

  .edulume-footer__baseline {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--edulume-space-3, 0.75rem);
  }

  /* `margin-inline-start: auto` on a column pushes it nowhere useful; it just reads as a gap. */
  .edulume-footer__credit {
    margin-inline-start: 0;
  }

  .edulume-footer__menu {
    gap: var(--edulume-space-3, 0.75rem);
  }

  /*
   * The drawer takes the full width on a phone. `min(22rem, 90vw)` leaves a 10% strip of the
   * page behind it, which invites a tap that dismisses the menu by accident.
   */
  .edulume-drawer {
    inline-size: 100vw;
    padding: var(--edulume-space-6, 2rem) var(--edulume-space-4, 1rem);
  }

  .edulume-drawer__list a {
    /* A comfortable target in a list people scroll with a thumb. */
    padding-block: var(--edulume-space-4, 1rem);
  }
}

/*
 * Very small screens. Not a separate design — the same one, with the last of the horizontal
 * padding taken out so content is not squeezed into a column narrower than it needs.
 */
@media (max-width: 26rem) {
  .edulume-container {
    padding-inline: calc(var(--edulume-gutter, 1.5rem) * 0.65);
  }

  .edulume-logo-wall__item {
    gap: var(--edulume-space-3, 0.75rem);
    padding: var(--edulume-space-3, 0.75rem);
  }
}

/*
 * Nothing may scroll the page sideways.
 *
 * A single wide element — a table, a long unbroken URL in a footer credit, a pre block — makes
 * the whole document pannable, and every vertical scroll then drifts off-axis. This is the one
 * rule that most reliably separates a site that feels built for a phone from one that does not.
 */
html,
body {
  overflow-x: clip;
}

:where(img, video, iframe, table, pre) {
  max-inline-size: 100%;
}

/* Wide content scrolls inside itself rather than taking the page with it. */
.edulume-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/*
 * Touch targets.
 *
 * Pointer-based media queries rather than width: a small laptop with a trackpad does not need
 * 44px list rows, and a large tablet does. Asking about the input device answers the question
 * that actually matters.
 */
@media (pointer: coarse) {
  :where(
    .edulume-nav__list a,
    .edulume-footer__menu a,
    .edulume-drawer__list a,
    .edulume-card__title a
  ) {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/*
 * The home page's sections.
 *
 * Everything here is one of two shapes — a responsive grid of cards, or a two-column split that
 * becomes one column on a phone — so the file stays readable as sections are added. Widths come
 * from `clamp()` against the container rather than from breakpoints wherever the content allows
 * it: a card that sizes itself needs no media query, and a media query is a decision that has to
 * be revisited every time the design changes.
 */

.edulume-home-section__intro {
  max-inline-size: 48ch;
  margin-block: 0 var(--edulume-space-6, 2rem);
  color: var(--edulume-ink-muted, #4a4f58);
}

/*
 * The hero's tint, painted rather than fetched.
 *
 * A gradient is composited from values already in the stylesheet: no request, nothing to wait
 * for, and — the reason it is a gradient at all — not a kind of thing largest-contentful-paint
 * considers. A decorative image here stayed the LCP element however it was loaded, and cost the
 * front page 600ms more than every other template on the site.
 */
.edulume-home-hero {
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(
    160deg,
    var(--edulume-surface-subtle, #f1f2f4),
    var(--edulume-surface, #fbfbfc) 60%
  );
}

.edulume-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  /* The owner's image is set on the element; only its framing lives here. */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.16;
}

.edulume-hero__search {
  display: flex;
  flex-wrap: wrap;
  gap: var(--edulume-space-2, 0.5rem);
  margin-block: var(--edulume-space-6, 2rem) var(--edulume-space-4, 1rem);
  max-inline-size: 36rem;
}

.edulume-hero__search-input {
  flex: 1 1 14rem;
  min-inline-size: 0;
  padding: var(--edulume-space-3, 0.75rem);
  border: var(--edulume-border-width, 1px) solid var(--edulume-border, #d8dade);
  border-radius: var(--edulume-radius, 6px);
  background-color: var(--edulume-surface, #fbfbfc);
  color: var(--edulume-ink, #16181d);
}

.edulume-hero__badges,
.edulume-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--edulume-space-3, 0.75rem);
  margin-block: var(--edulume-space-4, 1rem) 0;
  padding: 0;
  list-style: none;
}

.edulume-hero__badges li {
  padding-block: var(--edulume-space-2, 0.5rem);
  padding-inline: var(--edulume-space-3, 0.75rem);
  border-radius: var(--edulume-radius-full, 999px);
  background-color: var(--edulume-surface-subtle, #f1f2f4);
  color: var(--edulume-ink-muted, #4a4f58);
  font-size: var(--edulume-font-size-n1, 0.875rem);
}

.edulume-hero__chip {
  display: flex;
  flex-direction: column;
  padding-block: var(--edulume-space-2, 0.5rem);
  padding-inline: var(--edulume-space-4, 1rem);
  border-inline-start: 3px solid var(--edulume-accent, #123a6b);
  background-color: var(--edulume-surface-subtle, #f1f2f4);
  border-radius: var(--edulume-radius, 6px);
}

.edulume-hero__chip-value {
  font-size: var(--edulume-font-size-3, 1.5rem);
  font-family: var(--edulume-font-heading, inherit);
}

.edulume-hero__chip-label {
  color: var(--edulume-ink-muted, #4a4f58);
  font-size: var(--edulume-font-size-n1, 0.875rem);
}

/* The counters. */
.edulume-stats {
  display: grid;
  gap: var(--edulume-space-6, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.edulume-stat__value {
  margin-block: 0 var(--edulume-space-2, 0.5rem);
  font-family: var(--edulume-font-heading, inherit);
  font-size: var(--edulume-font-size-4, 2rem);
  color: var(--edulume-accent-text, #123a6b);
}

.edulume-stat__label {
  margin: 0;
  color: var(--edulume-ink-muted, #4a4f58);
}

/*
 * One grid rule for every card section.
 *
 * `minmax(min(100%, …), 1fr)` rather than a bare `minmax()`: the bare form overflows its
 * container the moment the viewport is narrower than the track minimum, which is exactly what
 * produces sideways scrolling at 320px.
 */
.edulume-service-grid,
.edulume-destination-grid,
.edulume-crest-grid,
.edulume-funding,
.edulume-people,
.edulume-events,
.edulume-intakes,
.edulume-posts {
  display: grid;
  gap: var(--edulume-space-4, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.edulume-service-grid,
.edulume-funding,
.edulume-posts,
.edulume-events,
.edulume-intakes {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.edulume-destination-grid,
.edulume-people {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.edulume-crest-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}

.edulume-service-card,
.edulume-destination-card,
.edulume-crest-card,
.edulume-funding-card,
.edulume-person,
.edulume-event-card,
.edulume-intake,
.edulume-post-card,
.edulume-step {
  display: flex;
  flex-direction: column;
  gap: var(--edulume-space-2, 0.5rem);
  padding: var(--edulume-space-4, 1rem);
  border: var(--edulume-border-width, 1px) solid var(--edulume-border, #d8dade);
  border-radius: var(--edulume-radius-2, 10px);
  background-color: var(--edulume-surface, #fbfbfc);
}

.edulume-service-card h3,
.edulume-destination-card__name,
.edulume-funding-card__name,
.edulume-person__name,
.edulume-event-card__title,
.edulume-post-card__title,
.edulume-step__title {
  margin: 0;
  font-size: var(--edulume-font-size-2, 1.25rem);
}

.edulume-service-card__blurb,
.edulume-destination-card__hook,
.edulume-funding-card__eligibility,
.edulume-post-card__excerpt,
.edulume-step__blurb,
.edulume-pillar__blurb {
  margin: 0;
  color: var(--edulume-ink-muted, #4a4f58);
}

.edulume-destination-card__meta,
.edulume-funding-card__meta,
.edulume-post-card__meta,
.edulume-crest-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--edulume-space-3, 0.75rem);
  margin: 0;
  color: var(--edulume-ink-muted, #4a4f58);
  font-size: var(--edulume-font-size-n1, 0.875rem);
}

/*
 * Media boxes reserve their space with `aspect-ratio` before the image arrives, so nothing on
 * the page moves as images decode.
 */
.edulume-destination-card__media,
.edulume-post-card__media,
.edulume-event-card__media,
.edulume-person__portrait {
  display: block;
  overflow: hidden;
  border-radius: var(--edulume-radius, 6px);
  background-color: var(--edulume-surface-subtle, #f1f2f4);
}

.edulume-destination-card__media,
.edulume-post-card__media,
.edulume-event-card__media {
  aspect-ratio: 16 / 10;
}

.edulume-person__portrait {
  aspect-ratio: 4 / 5;
}

.edulume-destination-card__media img,
.edulume-post-card__media img,
.edulume-event-card__media img,
.edulume-person__portrait img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Faces sit in the top third of a portrait; centring the crop cuts them at the chin. */
  object-position: top;
}

/* A crest tile is a fixed box so mismatched artwork shapes cannot break the grid. */
.edulume-crest-card {
  align-items: center;
  text-align: center;
}

.edulume-crest-card__tile {
  display: grid;
  place-items: center;
  inline-size: 96px;
  block-size: 96px;
  padding: var(--edulume-space-2, 0.5rem);
  border-radius: var(--edulume-radius, 6px);
  background-color: var(--edulume-surface-subtle, #f1f2f4);
}

.edulume-crest-card__tile img {
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
}

.edulume-crest-card__name {
  margin: 0;
  font-weight: 600;
}

.edulume-crest-card__rank {
  color: var(--edulume-accent-text, #123a6b);
}

/* Why us: pillars beside one supporting image. */
.edulume-highlights {
  display: grid;
  gap: var(--edulume-space-6, 2rem);
  grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
  .edulume-highlights {
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
  }
}

.edulume-highlights__list {
  display: grid;
  gap: var(--edulume-space-4, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.edulume-pillar__title {
  margin-block: 0 var(--edulume-space-2, 0.5rem);
  font-size: var(--edulume-font-size-2, 1.25rem);
}

.edulume-highlights__aside img {
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--edulume-radius-2, 10px);
}

.edulume-highlights__callout {
  display: flex;
  flex-direction: column;
  margin-block: var(--edulume-space-4, 1rem) 0;
  padding: var(--edulume-space-4, 1rem);
  border-radius: var(--edulume-radius-2, 10px);
  background-color: var(--edulume-accent, #123a6b);
  color: var(--edulume-on-accent, #ffffff);
}

.edulume-highlights__callout-value {
  font-family: var(--edulume-font-heading, inherit);
  font-size: var(--edulume-font-size-4, 2rem);
}

/* The numbered steps. */
.edulume-steps {
  display: grid;
  gap: var(--edulume-space-4, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: edulume-step;
}

.edulume-step__number {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--edulume-radius-full, 999px);
  background-color: var(--edulume-accent, #123a6b);
  color: var(--edulume-on-accent, #ffffff);
  font-family: var(--edulume-font-heading, inherit);
}

/* Intakes and events lead with a date, so that is what gets the emphasis. */
.edulume-intake__when,
.edulume-event-card__date {
  display: flex;
  align-items: baseline;
  gap: var(--edulume-space-2, 0.5rem);
  margin: 0;
}

.edulume-intake__month,
.edulume-event-card__day {
  font-family: var(--edulume-font-heading, inherit);
  font-size: var(--edulume-font-size-3, 1.5rem);
  color: var(--edulume-accent-text, #123a6b);
}

.edulume-intake__deadline {
  margin: 0;
  font-weight: 600;
}

.edulume-intake__countries,
.edulume-event-card__venue,
.edulume-person__role,
.edulume-person__languages,
.edulume-post-card__category {
  margin: 0;
  color: var(--edulume-ink-muted, #4a4f58);
}

.edulume-funding-card__amount {
  margin: 0;
  font-family: var(--edulume-font-heading, inherit);
  font-size: var(--edulume-font-size-2, 1.25rem);
  color: var(--edulume-accent-text, #123a6b);
}

.edulume-person {
  align-items: center;
  text-align: center;
}

.edulume-person__portrait {
  inline-size: 100%;
  max-inline-size: 12rem;
}

.edulume-person__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--edulume-space-3, 0.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--edulume-font-size-n1, 0.875rem);
}

.edulume-quote__portrait {
  display: block;
  inline-size: 3rem;
  block-size: 3rem;
  overflow: hidden;
  border-radius: var(--edulume-radius-full, 999px);
  background-color: var(--edulume-surface-subtle, #f1f2f4);
}

.edulume-quote__portrait img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* The destination page ------------------------------------------------------ */

.edulume-destination__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--edulume-space-6, 2rem);
  margin-block: var(--edulume-space-4, 1rem) 0;
  padding: 0;
  list-style: none;
}

.edulume-destination__stat {
  display: flex;
  flex-direction: column;
}

.edulume-destination__stat-value {
  font-family: var(--edulume-font-heading, inherit);
  font-size: var(--edulume-font-size-3, 1.5rem);
  color: var(--edulume-accent-text, #123a6b);
}

.edulume-destination__stat-label {
  color: var(--edulume-ink-muted, #4a4f58);
  font-size: var(--edulume-font-size-n1, 0.875rem);
}

.edulume-destination__intro {
  max-inline-size: 60ch;
  margin-block-end: var(--edulume-space-6, 2rem);
}

/*
 * One column on a phone, two from 64rem up.
 *
 * The aside is first in source order so the intake video sits above the university list on a
 * phone, where a video buried under sixty cards is a video nobody reaches. `order` moves it to
 * the right on wide screens — one copy of the markup, not two with one hidden, because two
 * copies means two players in the DOM and the iframe budget stops meaning anything.
 */
.edulume-destination__columns {
  display: grid;
  gap: var(--edulume-space-6, 2rem);
  grid-template-columns: 1fr;
}

@media (min-width: 64rem) {
  .edulume-destination__columns {
    grid-template-columns: 1fr 380px;
    align-items: start;
  }

  .edulume-destination__aside {
    order: 2;
    position: sticky;
    inset-block-start: calc(var(--edulume-space-8, 3rem) + var(--edulume-space-4, 1rem));
  }

  .edulume-destination__main {
    order: 1;
  }
}

.edulume-destination__video-title {
  margin-block: 0 var(--edulume-space-3, 0.75rem);
  font-size: var(--edulume-font-size-2, 1.25rem);
}

.edulume-university-filter {
  display: grid;
  gap: var(--edulume-space-3, 0.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin-block-end: var(--edulume-space-4, 1rem);
}

.edulume-university-grid__count {
  margin-block: 0 var(--edulume-space-4, 1rem);
  color: var(--edulume-ink-muted, #4a4f58);
}

.edulume-university-grid {
  display: grid;
  gap: var(--edulume-space-4, 1rem);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .edulume-university-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 80rem) {
  .edulume-university-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.edulume-university {
  display: flex;
  flex-direction: column;
  gap: var(--edulume-space-2, 0.5rem);
  padding: var(--edulume-space-4, 1rem);
  border: var(--edulume-border-width, 1px) solid var(--edulume-border, #d8dade);
  border-radius: var(--edulume-radius-2, 10px);
  background-color: var(--edulume-surface, #fbfbfc);
}

/*
 * A fixed logo box. Institutional marks are every shape there is — wide wordmarks, tall crests,
 * square badges — and a grid that lets them size themselves has one row three times the height
 * of its neighbours.
 */
.edulume-university__logo {
  display: grid;
  place-items: center;
  inline-size: 96px;
  block-size: 96px;
  padding: var(--edulume-space-2, 0.5rem);
  border-radius: var(--edulume-radius, 6px);
  background-color: var(--edulume-surface-subtle, #f1f2f4);
}

.edulume-university__logo img {
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
}

.edulume-university__monogram {
  font-family: var(--edulume-font-heading, inherit);
  font-size: var(--edulume-font-size-4, 2rem);
  color: var(--edulume-accent-text, #123a6b);
}

.edulume-university__name {
  margin: 0;
  font-size: var(--edulume-font-size-2, 1.25rem);
}

.edulume-university__city,
.edulume-university__ranking,
.edulume-university__tuition {
  margin: 0;
  color: var(--edulume-ink-muted, #4a4f58);
}

.edulume-university__intakes,
.edulume-university__courses {
  display: flex;
  flex-wrap: wrap;
  gap: var(--edulume-space-2, 0.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.edulume-university__intakes li,
.edulume-university__courses li {
  padding-block: 2px;
  padding-inline: var(--edulume-space-2, 0.5rem);
  border-radius: var(--edulume-radius-full, 999px);
  background-color: var(--edulume-surface-subtle, #f1f2f4);
  font-size: var(--edulume-font-size-n1, 0.875rem);
}

/* A row hidden by the filter is hidden, not merely transparent. */
.edulume-university[hidden] {
  display: none;
}

/* The founders page --------------------------------------------------------- */

.edulume-founders__lead {
  max-inline-size: 52ch;
  font-size: var(--edulume-font-size-2, 1.25rem);
  color: var(--edulume-ink-muted, #4a4f58);
}

.edulume-founder {
  display: grid;
  gap: var(--edulume-space-6, 2rem);
  grid-template-columns: 1fr;
  margin-block-end: var(--edulume-space-8, 3rem);
}

@media (min-width: 60rem) {
  .edulume-founder {
    grid-template-columns: 360px 1fr;
    align-items: start;
  }

  /*
   * Alternating sides, from :nth-child rather than a hardcoded pair — the page has to survive
   * one founder, three, or five without the layout breaking.
   */
  .edulume-founder:nth-child(even) .edulume-founder__portrait {
    order: 2;
  }
}

.edulume-founder__portrait {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--edulume-radius-2, 10px);
  background-color: var(--edulume-surface-subtle, #f1f2f4);
}

.edulume-founder__portrait img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Faces sit in the top third of a portrait; a centred crop cuts them at the chin. */
  object-position: top;
}

.edulume-founder__initials {
  font-family: var(--edulume-font-heading, inherit);
  font-size: var(--edulume-font-size-5, 3rem);
  color: var(--edulume-accent-text, #123a6b);
}

.edulume-founder__name {
  margin: 0;
}

.edulume-founder__designation {
  margin-block: var(--edulume-space-2, 0.5rem) 0;
  color: var(--edulume-accent-text, #123a6b);
}

.edulume-founder__tagline {
  margin-block: var(--edulume-space-2, 0.5rem) 0;
  font-family: var(--edulume-font-quote, inherit);
  font-size: var(--edulume-font-size-2, 1.25rem);
}

.edulume-founder__facts {
  display: grid;
  gap: var(--edulume-space-2, 0.5rem) var(--edulume-space-4, 1rem);
  grid-template-columns: auto 1fr;
  margin-block: var(--edulume-space-4, 1rem);
}

.edulume-founder__facts dt {
  font-weight: 600;
}

.edulume-founder__facts dd {
  margin: 0;
  color: var(--edulume-ink-muted, #4a4f58);
}

.edulume-founder__heading {
  margin-block: var(--edulume-space-6, 2rem) var(--edulume-space-3, 0.75rem);
  font-size: var(--edulume-font-size-2, 1.25rem);
}

/*
 * The education and experience tracks.
 *
 * A plain list below 48rem and a spined timeline above it. A centre-spined timeline on a phone
 * is two columns of four characters each — unreadable, and the reason so many "responsive"
 * timelines are simply broken at 375px.
 */
.edulume-track {
  margin: 0;
  padding: 0;
  list-style: none;
}

.edulume-track__item {
  padding-block-end: var(--edulume-space-4, 1rem);
}

.edulume-track__when {
  margin: 0;
  color: var(--edulume-accent-text, #123a6b);
  font-size: var(--edulume-font-size-n1, 0.875rem);
}

.edulume-track__what {
  margin: 0;
  font-weight: 600;
}

.edulume-track__where {
  margin: 0;
  color: var(--edulume-ink-muted, #4a4f58);
}

@media (min-width: 48rem) {
  .edulume-track {
    padding-inline-start: var(--edulume-space-6, 2rem);
    border-inline-start: 2px solid var(--edulume-border, #d8dade);
  }

  .edulume-track__item {
    position: relative;
  }

  .edulume-track__item::before {
    content: '';
    position: absolute;
    inset-inline-start: calc(var(--edulume-space-6, 2rem) * -1 - 5px);
    inset-block-start: 6px;
    inline-size: 8px;
    block-size: 8px;
    border-radius: var(--edulume-radius-full, 999px);
    background-color: var(--edulume-accent, #123a6b);
  }
}

.edulume-founders__vision p {
  max-inline-size: 62ch;
}

.edulume-founders__goals-year {
  color: var(--edulume-ink-muted, #4a4f58);
}

/* Milestones: the same scrolling track the video rail uses. */
.edulume-timeline {
  padding-block-end: var(--edulume-space-3, 0.75rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
}

/* The list inside the scroller — separate elements, so role="region" on the scroller does not
   replace this element's implicit list role and orphan every item in it. */
.edulume-timeline__list {
  display: flex;
  gap: var(--edulume-space-4, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.edulume-timeline:focus-visible {
  outline: 3px solid var(--edulume-focus-ring, #365e92);
  outline-offset: 4px;
}

.edulume-timeline__item {
  flex: 0 0 clamp(200px, 60vw, 260px);
  scroll-snap-align: start;
  padding: var(--edulume-space-4, 1rem);
  border-block-start: 3px solid var(--edulume-accent, #123a6b);
  background-color: var(--edulume-surface-subtle, #f1f2f4);
  border-radius: 0 0 var(--edulume-radius-2, 10px) var(--edulume-radius-2, 10px);
}

.edulume-timeline__year {
  margin: 0;
  font-family: var(--edulume-font-heading, inherit);
  font-size: var(--edulume-font-size-3, 1.5rem);
}

.edulume-timeline__event {
  margin: 0;
  color: var(--edulume-ink-muted, #4a4f58);
}

.edulume-founder__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--edulume-space-3, 0.75rem);
  margin-block: var(--edulume-space-4, 1rem) 0;
  padding: 0;
  list-style: none;
}

/*
 * Printing the founders page.
 *
 * This is the page that gets sent to a partner university as a credentials document, so it is
 * worth the twenty lines: no navigation, no call to action, one column, black on white, and
 * every timeline expanded rather than scrolled — a horizontal scroller prints as its first card
 * and nothing else.
 */
@media print {
  .edulume-header,
  .edulume-footer,
  .edulume-announcement,
  .edulume-fab,
  .edulume-mode-toggle,
  .edulume-founders__cta {
    display: none;
  }

  .edulume-founders {
    color: #000000;
    background: #ffffff;
  }

  .edulume-founder,
  .edulume-founders__columns {
    grid-template-columns: 1fr;
    break-inside: avoid;
  }

  .edulume-timeline {
    overflow: visible;
  }

  .edulume-timeline__list {
    display: block;
  }

  .edulume-timeline__item {
    inline-size: auto;
    break-inside: avoid;
  }

  .edulume-track {
    border: 0;
    padding-inline-start: 0;
  }
}

/*
 * A note only a signed-in editor sees.
 *
 * Used where a section has nothing to render and the person who can fix that is the only one
 * who needs telling. Styled as an obvious annotation rather than as content, so nobody mistakes
 * it for something a visitor is meant to read.
 */
.edulume-editor-hint {
  padding: var(--edulume-space-4, 1rem);
  border: 1px dashed var(--edulume-border, #d8dade);
  border-radius: var(--edulume-radius-2, 10px);
  background-color: var(--edulume-surface-subtle, #f1f2f4);
  color: var(--edulume-ink-muted, #4a4f58);
}