/* ==========================================================================
   MQAM Institut — global styles
   ========================================================================== */

:root {
  --yellow: #F8B430;          /* logo yellow */
  --yellow-bright: #FFD27A;   /* hover / active on dark */
  --orange: #F9A032;          /* Professor Bea backdrop */
  --brown: #4A2713;           /* logo brown */
  --ink: #140C07;             /* near-black, warm */
  --brown-ink: #2B1A10;       /* body text on light */
  --cream: #FBF5EA;
  --deep: #24130A;             /* tile sections' backdrop */
  --tile-pad: clamp(12px, 1.4vw, 24px);
  --tile-gap: clamp(10px, 1vw, 16px);
  --tile-radius: clamp(18px, 1.6vw, 28px);
  --muted: #7A6656;
  --muted-light: #B8A898;

  --nav-h: 56px;
  --gutter: clamp(20px, 4vw, 48px);

  /* apple.com motion curves */
  --ease-nav: cubic-bezier(.4, 0, .6, 1);
  --ease-curtain: cubic-bezier(.52, .16, .24, 1);
  --ease-reveal: cubic-bezier(.16, 1, .3, 1);

  --font: "Barlow", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

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

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

/* Full-page snapping (home page). Each .panel is one "page" filling the
   screen below the top bar, so the bar never covers any picture. */
html:has(body.snap-page) {
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--nav-h);
}
body.snap-page { padding-top: var(--nav-h); }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--brown-ink);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
figure { margin: 0; }

/* ==========================================================================
   Top navigation — modelled on apple.com's global nav.
   One background layer (.nav-bg) grows to fit whichever menu is open, the
   links inside fade in one after another, and the page behind blurs.
   ========================================================================== */

/* The bar takes on the page beneath it (site.js sets data-tone from the
   section in view). "deep" is the logo brown with yellow type, used over the
   photographs and whenever a menu is open; "warm" turns the bar into the
   welcome page's own orange with brown type, so bar and page read as one. */
.site-nav {
  --nav-bg: rgba(70, 37, 18, .97);
  --nav-sheen: linear-gradient(to bottom, rgba(255, 220, 160, .06), rgba(0, 0, 0, .08));
  --nav-shadow: 0 6px 24px rgba(20, 12, 7, .18);
  --nav-fg: var(--yellow);
  --nav-fg-dim: rgba(248, 180, 48, .82);
  --nav-fg-hover: var(--yellow-bright);
  --nav-track: rgba(248, 180, 48, .14);
  --nav-fill: linear-gradient(to right, rgba(248, 180, 48, .55), var(--yellow) 80%, #FFD27A);
  --nav-glow: 0 0 10px rgba(248, 180, 48, .55);
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  color: var(--nav-fg);
}
.site-nav[data-tone="warm"]:not(.is-open):not(.menu-open) {
  --nav-bg: rgba(244, 155, 40, .97);
  --nav-sheen: none;
  --nav-shadow: none;
  --nav-fg: var(--brown);
  --nav-fg-dim: rgba(74, 39, 19, .78);
  --nav-fg-hover: #2A1408;
  --nav-track: rgba(74, 39, 19, .1);
  --nav-fill: linear-gradient(to right, rgba(74, 39, 19, .35), var(--brown));
  --nav-glow: none;
}
.site-nav.is-open { --nav-bg: rgba(62, 33, 16, .98); }

.nav-bg {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  /* slightly translucent so pages blur through it while scrolling */
  background-color: var(--nav-bg);
  background-image: var(--nav-sheen);
  box-shadow: var(--nav-shadow);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: height .56s var(--ease-curtain), background-color .8s var(--ease-curtain), box-shadow .8s var(--ease-curtain);
}

/* Scroll progress: a gold line along the foot of the bar that fills as you
   move down the page (site.js sets --progress from 0 to 1) */
.nav-progress {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--nav-h) - 2px);
  height: 2px;
  background: var(--nav-track);
  pointer-events: none;
  transition: opacity .32s var(--ease-nav);
}
.nav-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nav-fill);
  box-shadow: var(--nav-glow);
  transform-origin: left center;
  transform: scaleX(var(--progress, 0));
  transition: transform .5s var(--ease-reveal);
}
.site-nav.is-open .nav-progress,
.site-nav.menu-open .nav-progress { opacity: 0; }

.site-nav__bar {
  position: relative;
  height: var(--nav-h);
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-inline-end: clamp(8px, 1.5vw, 28px);
  text-decoration: none;
  color: var(--nav-fg);
  flex-shrink: 0;
  transform-origin: left center;
  transition: opacity .24s var(--ease-nav), transform .6s var(--ease-curtain), color .8s var(--ease-curtain);
}
.brand:hover { opacity: .85; }
/* Full size on the welcome page; settles a little smaller once you scroll */
.site-nav.is-condensed .brand { transform: scale(.9); }
/* the "m" is drawn in the current text colour so it follows the tone */
.brand-mark {
  width: 38px;
  aspect-ratio: 160 / 119;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: transform .6s var(--ease-curtain);
}
.brand:hover .brand-mark { transform: translateY(-1px) rotate(-4deg); }
.brand span {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.005em;
  line-height: 1;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  /* tight at the narrowest desktop width, opening up quickly as there is room */
  gap: clamp(10px, calc((100vw - 1340px) * .05 + 10px), 22px);
}
.nav-item { position: static; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--nav-h);
  padding: 0;
  border: 0;
  background: none;
  font: 600 15px/1 var(--font);
  letter-spacing: .01em;
  color: var(--nav-fg-dim);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color .6s var(--ease-curtain);
}
@media (min-width: 1341px) and (max-width: 1480px) {
  .nav-link { font-size: 14px; }
}
.nav-link:hover,
.nav-link:focus-visible,
.nav-item.is-open > .nav-link { color: var(--nav-fg-hover); transition-duration: .24s; }
.nav-link .chev {
  width: 9px;
  height: 9px;
  opacity: .55;
  transition: transform .32s var(--ease-nav);
}
.nav-item.is-open > .nav-link .chev { transform: rotate(180deg); }

/* Institution logos (AUC, GUC, DEO) in place of their names */
.nav-logo {
  display: inline-block;
  height: var(--h);
  aspect-ratio: var(--r);
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color .32s var(--ease-nav);
}
.nav-link .nav-logo { margin-inline-end: 2px; }
.nav-logo--lg { height: calc(var(--h) * 1.6); }

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

/* Menu content sits on top of .nav-bg; only its links animate */
.flyout {
  position: absolute;
  top: var(--nav-h);
  left: 0;
  right: 0;
  visibility: hidden;
  pointer-events: none;
}
.nav-item.is-open > .flyout {
  visibility: visible;
  pointer-events: auto;
}
.flyout__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px var(--gutter) 64px;
}
.flyout__label {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(248, 180, 48, .6);
}
.flyout ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.flyout a {
  display: inline-block;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--yellow);
  text-decoration: none;
  transition: color .24s var(--ease-nav);
}
.flyout a:hover,
.flyout a:focus-visible { color: var(--yellow-bright); }

/* Staggered entrance: closing is quick and all at once, opening cascades */
.flyout__label,
.flyout li {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .1s linear, transform .1s linear;
}
.nav-item.is-open > .flyout .flyout__label,
.nav-item.is-open > .flyout li {
  opacity: 1;
  transform: none;
  transition: opacity .32s var(--ease-nav), transform .32s var(--ease-nav);
  transition-delay: calc(.1s + var(--i, 0) * 25ms);
}

/* Page behind an open menu blurs and dims */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(10, 6, 3, .35);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .56s var(--ease-curtain), visibility 0s linear .56s;
}
.nav-scrim.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity .56s var(--ease-curtain);
}

/* Mobile: menu toggle and "back" button */
.menu-toggle,
.nav-back {
  display: none;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  color: var(--nav-fg);
  cursor: pointer;
  position: relative;
  transition: color .6s var(--ease-curtain);
}
.menu-toggle { margin-inline-end: -10px; }
.menu-toggle span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 1.2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .32s var(--ease-nav), top .32s var(--ease-nav);
}
.menu-toggle span:nth-child(1) { top: 16px; }
.menu-toggle span:nth-child(2) { top: 23px; }
.site-nav.menu-open .menu-toggle span:nth-child(1) { top: 19.5px; transform: rotate(45deg); }
.site-nav.menu-open .menu-toggle span:nth-child(2) { top: 19.5px; transform: rotate(-45deg); }

@media (max-width: 1340px) {
  .menu-toggle { display: block; }

  .site-nav.menu-open .nav-bg { height: 100vh; height: 100dvh; background: linear-gradient(to bottom, rgb(84, 45, 22), rgb(58, 31, 15)); }

  .nav-back {
    position: absolute;
    left: calc(var(--gutter) - 10px);
    top: calc(50% - 20px);
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateX(8px);
    transition: opacity .24s var(--ease-nav), transform .24s var(--ease-nav), visibility 0s linear .24s;
  }
  .site-nav.sub-open .nav-back {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .32s var(--ease-nav) .12s, transform .32s var(--ease-nav) .12s;
  }
  .site-nav.sub-open .brand { opacity: 0; pointer-events: none; }

  .nav-list {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    height: calc(100dvh - var(--nav-h));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px calc(var(--gutter) + 8px) 48px;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear .56s;
  }
  .site-nav.menu-open .nav-list {
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }
  .site-nav.sub-open .nav-list { overflow-y: hidden; }

  .nav-link {
    width: 100%;
    height: 48px;
    justify-content: space-between;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--yellow);
    /* cascade in when the menu opens, slide out left when a submenu opens */
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .16s linear, transform .16s linear;
  }
  .site-nav.menu-open .nav-link {
    opacity: 1;
    transform: none;
    transition: opacity .4s var(--ease-nav), transform .4s var(--ease-nav), color .32s;
    transition-delay: calc(.16s + var(--i, 0) * 30ms);
  }
  .site-nav.sub-open .nav-link {
    opacity: 0;
    transform: translateX(-32px);
    pointer-events: none;
    transition: opacity .24s var(--ease-nav), transform .32s var(--ease-nav);
    transition-delay: 0s;
  }
  .nav-link .chev { width: 13px; height: 13px; transform: rotate(-90deg); }
  .nav-link .nav-logo { height: calc(var(--h) * 1.7); }
  .nav-item.is-open > .nav-link .chev { transform: rotate(-90deg); }

  /* Submenu: replaces the list, sliding in from the right */
  .flyout {
    top: 0;
    bottom: 0;
    position: absolute;
  }
  .flyout__inner { padding: 16px calc(var(--gutter) + 8px) 48px; }
  .flyout { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .flyout__label { margin-bottom: 18px; font-size: 14px; }
  .flyout ul { gap: 6px; }
  .flyout a { font-size: 28px; padding: 4px 0; }
  .flyout__label,
  .flyout li { transform: translateX(32px); }
  .nav-item.is-open > .flyout .flyout__label,
  .nav-item.is-open > .flyout li { transition-delay: calc(.14s + var(--i, 0) * 30ms); }

  .nav-scrim { display: none; }
}

/* ==========================================================================
   Full-screen panels — every picture fills the screen, edge to edge
   ========================================================================== */

.panel {
  position: relative;
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  overflow: hidden;
  isolation: isolate;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: var(--ink);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Full-bleed picture. --fx is the horizontal focus point, used when the
   screen is narrower than the photo so the important part stays in view. */
.panel__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.panel__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fx, 50%) 50%;
}
/* Behind the headline: the foot of the picture is softly frosted (blur that
   fades in towards the bottom) and deepened with a warm dark gradient, so the
   text reads cleanly while the photo still shows through. */
.panel__bg::before,
.panel__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.panel__bg::before {
  top: 48%;
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 45%, transparent 100%);
}
.panel__bg::after {
  background:
    linear-gradient(to top,
      rgba(12, 7, 4, .9) 0%,
      rgba(12, 7, 4, .74) 20%,
      rgba(12, 7, 4, .42) 38%,
      rgba(12, 7, 4, .12) 52%,
      rgba(12, 7, 4, 0) 62%);
}

.panel__content {
  position: relative;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(44px, 8vh, 88px);
  text-align: center;
}

/* Typography */
.headline {
  margin: 0;
  font-size: clamp(28px, 3.3vw, 48px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.012em;
  text-wrap: balance;
}
/* Brand colours: logo yellow over the photos, logo brown on the welcome page */
.panel .headline {
  color: var(--yellow);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.005em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 4px 28px rgba(0, 0, 0, .45);
}
.headline--sm { font-size: clamp(26px, 2.2vw, 34px); line-height: 1.12; }
.headline--xl { font-size: clamp(44px, 6vw, 80px); line-height: 1.04; }

/* ==========================================================================
   1. Welcome — Professor Bea stands on the bottom edge of the screen,
   his orange backdrop melting into the page colour
   ========================================================================== */

.panel--welcome {
  justify-content: flex-start;
  color: var(--brown);
  background: linear-gradient(to bottom, #F49B28 0%, #F9A032 50%, #FCAA3A 100%);
}
.panel--welcome .panel__content--top {
  padding: clamp(28px, 6vh, 64px) var(--gutter) 0;
  max-width: 1280px;
  z-index: 1;
}
.panel--welcome .headline {
  color: var(--brown);
  font-weight: 500;
  text-shadow: none;
  font-size: clamp(28px, 3.4vw, 50px);
  line-height: 1.12;
}
.panel--welcome .headline strong { font-weight: 700; }

/* Fills the space under the headline, standing on the bottom edge */
.welcome__figure {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: clamp(12px, 3vh, 32px);
  display: flex;
  justify-content: center;
  z-index: 0;
}
/* Professor Bea is built from three layers: his body, and each wing on its
   own so the wings can beat. The wings sit exactly where they are in the
   original picture, hinged at his shoulders. */
.bea {
  position: relative;
  z-index: 1;
  height: 100%;
  aspect-ratio: 1086 / 1448;
}
/* His shadow stays on the floor: it sits in a box the same size as his
   picture, so it lines up under his shoes, but it does not fly with him */
.bea-ground {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  aspect-ratio: 1086 / 1448;
  translate: -50% 0;
  z-index: 0;
  pointer-events: none;
}
.bea-shadow {
  position: absolute;
  inset: 0;
  transform-origin: 42% 93%;
  /* a soft contact shadow under each shoe, inside a wide, faint pool */
  background:
    /* tight, dark contact right along each sole (measured from his picture),
       tucked a hair under the shoe so there is no gap of floor between */
    radial-gradient(6.2% .75% at 30.1% 93.45%, rgba(70, 30, 4, .78), rgba(70, 30, 4, 0)),
    radial-gradient(10.6% .8% at 52.9% 92.45%, rgba(70, 30, 4, .78), rgba(70, 30, 4, 0)),
    /* softer falloff around each foot */
    radial-gradient(9% 1.5% at 30.1% 93.6%, rgba(92, 42, 6, .38), rgba(92, 42, 6, 0)),
    radial-gradient(14% 1.6% at 52.8% 92.6%, rgba(92, 42, 6, .38), rgba(92, 42, 6, 0)),
    /* and a wide, faint pool under him */
    radial-gradient(30% 2.6% at 42% 93.3%, rgba(110, 52, 8, .24), rgba(110, 52, 8, 0));
}
/* the body sits in front, so the wings beat from behind his shoulders */
.bea__body {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  /* cut out along his own outline, so no background edge ever shows */
  -webkit-mask: url(../img/welcome-mask.png?v=6) center / 100% 100% no-repeat;
  mask: url(../img/welcome-mask.png?v=6) center / 100% 100% no-repeat;
}
.bea__wing {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
  will-change: transform;
}
.bea__wing--left {
  left: 5.525%;
  top: 25.552%;
  width: 25.783%;
  transform-origin: 93% 51%;
}
.bea__wing--right {
  left: 47.422%;
  top: 27.624%;
  width: 16.114%;
  transform-origin: 17% 83%;
}

/* ==========================================================================
   3. Three headlines sharing one full-screen page — three full-height
   pictures side by side, no gaps, no frames
   ========================================================================== */

/* Apple-style tile grid: one large tile beside two stacked ones, each
   with its headline at the top and the whole picture (never cropped) set
   flush into the foot of the tile. The right column is sized from the
   screen height so its two pictures always fit in full. */
.panel--trio {
  --pad: var(--tile-pad);
  --gap: var(--tile-gap);
  --head: clamp(96px, 13vh, 132px);
  --row: calc((100svh - var(--nav-h) - 2 * var(--pad) - var(--gap)) / 2);
  justify-content: stretch;
  background: var(--deep);
}
.trio {
  height: 100%;
  padding: var(--pad);
  display: grid;
  grid-template-columns: 1fr min(calc((var(--row) - var(--head)) * 16 / 9), 42%);
  grid-template-rows: 1fr 1fr;
  gap: var(--gap);
}
.card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: var(--tile-radius);
  background: var(--brown);
}
/* the lead tile carries the brand yellow */
.card--lead { background: var(--yellow); }
.card--lead { grid-row: 1 / 3; }
.card__media {
  margin: auto 0 0;
  aspect-ratio: 16 / 9;
  flex: none;
  overflow: hidden;
}
.card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-reveal);
}
.panel--trio .card .headline {
  margin: 0;
  padding: clamp(18px, 3vh, 34px) clamp(20px, 2.4vw, 44px) clamp(14px, 2vh, 24px);
  max-width: none;
  color: var(--yellow);
  font-weight: 600;
  font-size: clamp(19px, 1.55vw, 27px);
  line-height: 1.15;
  letter-spacing: -.012em;
  text-align: center;
  text-shadow: none;
  text-wrap: balance;
}
.panel--trio .card--lead .headline {
  color: var(--brown);
  padding-top: clamp(36px, 7vh, 72px);
  font-size: clamp(28px, 2.8vw, 48px);
  line-height: 1.08;
  letter-spacing: -.02em;
}
@media (hover: hover) {
  .card:hover .card__media img { transform: scale(1.025); }
}

.tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.tile .panel__content {
  padding-left: clamp(20px, 2.4vw, 40px);
  padding-right: clamp(20px, 2.4vw, 40px);
}
.tile .headline { max-width: 400px; margin: 0 auto; }

/* ==========================================================================
   Four headlines sharing one full-screen page — a 2 × 2 grid of pictures.
   Each quarter is close to the photos' own shape, so very little is cropped.
   ========================================================================== */

/* Same tile language as Section 4: four rounded pictures on the brand's
   deep brown, with even gutters, each picture whole-bleed in its tile and
   its headline set cleanly at the foot. */
.panel--quad {
  display: block;
  background: var(--deep);
}
.quad {
  height: 100%;
  padding: var(--tile-pad);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--tile-gap);
}
.quad .tile {
  border-radius: var(--tile-radius);
  background: var(--brown);
}
.quad .panel__bg::before { display: none; }
.quad .panel__bg::after {
  background: linear-gradient(to top,
    rgba(20, 12, 7, .92) 0%,
    rgba(20, 12, 7, .74) 22%,
    rgba(20, 12, 7, .32) 42%,
    rgba(20, 12, 7, 0) 60%);
}
.quad .panel__bg img { transition: transform 1.6s var(--ease-reveal); }
.quad .tile .panel__content {
  padding: 0 clamp(20px, 2.6vw, 48px) clamp(20px, 3.4vh, 40px);
}
.quad .tile .headline {
  width: min(100%, 44ch);
  max-width: none;
  font-weight: 600;
  font-size: clamp(18px, 1.5vw, 26px);
  line-height: 1.18;
  letter-spacing: -.01em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
  text-wrap: balance;
}
@media (hover: hover) {
  .quad .tile:hover .panel__bg img { transform: scale(1.03); }
}
/* Phones: each picture becomes its own full screen */
@media (max-width: 900px) {
  .panel--trio {
    height: auto;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }
  .trio { grid-template-columns: 1fr; grid-template-rows: none; }
  .card--lead { grid-row: auto; }
  .panel--trio .card .headline,
  .panel--trio .card--lead .headline { padding: 36px 24px 20px; font-size: clamp(24px, 6.4vw, 30px); }
  .panel--quad {
    height: auto;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }
  .quad { grid-template-columns: 1fr; grid-template-rows: none; }
  .quad .tile { aspect-ratio: 4 / 5; }
  .quad .tile .headline { font-size: clamp(22px, 6vw, 28px); }
}

/* ==========================================================================
   About page — everything on one full screen: the introduction and
   Professor Bea on the left, four brand-coloured cards on the right
   ========================================================================== */

.panel--about {
  justify-content: center;
  color: var(--brown);
  background: linear-gradient(to bottom, #EC982E 0%, #F7A234 55%, #FCAA38 100%);
  /* body size follows the screen's width and height so it always fits */
  --about-fs: clamp(12.5px, min(1.02vw, 1.68vh), 17px);
}
.about {
  height: 100%;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(14px, 2.2vh, 28px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, .74fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(10px, 1.6vh, 18px) clamp(12px, 1.2vw, 20px);
}
.about p { margin: 0 0 .55em; }
.about p:last-child { margin-bottom: 0; }

.about__col {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vh, 18px);
}
.about__col .about-card { flex: 1 1 auto; }
.about__intro {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: clamp(6px, 1.4vh, 16px) clamp(4px, 1vw, 16px) 0 0;
  font-size: var(--about-fs);
  line-height: 1.5;
}
.about-kicker {
  margin: 0 0 clamp(6px, 1.2vh, 14px);
  font-size: calc(var(--about-fs) * 1.08);
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(74, 39, 19, .78);
}
.about-title {
  margin: 0;
  font-size: calc(var(--about-fs) * 2.75);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.about-lead {
  margin: clamp(8px, 1.6vh, 18px) 0 clamp(8px, 1.4vh, 14px) !important;
  font-size: calc(var(--about-fs) * 1.22);
  font-weight: 600;
  line-height: 1.25;
}
.about__intro p:not(.about-lead) { color: rgba(74, 39, 19, .9); }
/* Professor Bea fills what is left of the column, standing on the bottom
   edge; the picture's own orange melts into the page */
.about__figure {
  flex: 1;
  min-height: 0;
  margin: clamp(4px, 1vh, 12px) 0 calc(-1 * clamp(14px, 2.2vh, 28px));
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.about__figure img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  -webkit-mask: url(../img/about-mask.png?v=2) center / 100% 100% no-repeat;
  mask: url(../img/about-mask.png?v=2) center / 100% 100% no-repeat;
}

.about-card {
  min-height: 0;
  overflow: hidden;
  padding: clamp(14px, 2.3vh, 28px) clamp(18px, 1.8vw, 32px);
  border-radius: var(--tile-radius);
  font-size: var(--about-fs);
  line-height: 1.42;
  display: flex;
  flex-direction: column;
}
.about-card h2 {
  margin: 0 0 clamp(8px, 1.4vh, 16px);
  font-size: calc(var(--about-fs) * 1.6);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.about-card strong { font-weight: 600; }
/* every card is the same soft brown wash over the page's own orange */
.about-card {
  background: rgba(74, 39, 19, .1);
  box-shadow: inset 0 0 0 1px rgba(74, 39, 19, .12);
  color: rgba(74, 39, 19, .9);
}
.about-card h2,
.about-card strong { color: var(--brown); }
.about-card__sign { margin-top: auto !important; padding-top: .4em; font-size: 1.12em; }
.about-card__ctas {
  margin-top: clamp(10px, 1.6vh, 18px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.about-card__ctas .btn { height: 38px; padding: 0 18px; font-size: 15px; }
/* the booking button leads: solid brown, a touch larger and bolder, with
   a soft lift and an arrow that nudges forward on hover */
.about-card__ctas .btn.btn--primary {
  height: 42px;
  padding: 0 20px 0 22px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 6px 18px -8px rgba(74, 39, 19, .7);
}
.btn--primary::after {
  content: "→";
  margin-inline-start: 8px;
  transition: transform .3s var(--ease-reveal);
}
.btn--primary:hover::after { transform: translateX(3px); }
.about-card__ctas { align-items: center; }
.btn.btn--outline {
  background: transparent;
  color: var(--brown);
  box-shadow: inset 0 0 0 1.5px var(--brown);
}
.btn.btn--outline:hover { background: rgba(74, 39, 19, .08); }

@media (max-width: 1100px), (max-height: 680px) {
  html:has(body.about-page) { scroll-snap-type: none; }
  .about-page .panel {
    height: auto;
    min-height: calc(100svh - var(--nav-h));
  }
  .panel--about { --about-fs: 17px; }
  .about {
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    padding-top: clamp(32px, 6vh, 64px);
    padding-bottom: clamp(20px, 4vh, 40px);
  }
  .about__intro { grid-column: 1 / -1; padding-right: 0; }
  .about__figure { height: min(70vw, 460px); flex: none; margin-bottom: 0; }
  .about-card { overflow: visible; }
}
@media (max-width: 700px) {
  .about { grid-template-columns: 1fr; }
  .panel--about { --about-fs: 16.5px; }
}

/* ==========================================================================
   Service pages (AUC, GUC, …) — one full screen on the brand's deep brown:
   the school's logo and the subject at the top, then a tile per service,
   each with its picture shown whole
   ========================================================================== */

.panel--service {
  justify-content: center;
  color: rgba(251, 245, 234, .74);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(248, 180, 48, .07), transparent 70%),
    var(--deep);
}
.service {
  height: 100%;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: var(--tile-pad);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3.4vh, 40px);
}
.service__head {
  flex: none;
  text-align: center;
  padding: clamp(16px, 4vh, 48px) var(--gutter) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.service__logo {
  display: block;
  height: clamp(15px, 2vh, 20px);
  aspect-ratio: 480 / 101;
  background-color: rgba(248, 180, 48, .85);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.service__title {
  margin: clamp(10px, 1.8vh, 18px) 0 0;
  color: var(--yellow);
  font-size: clamp(38px, min(4.6vw, 7.4vh), 76px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.025em;
}
.service__lead {
  margin: clamp(10px, 1.8vh, 18px) 0 0;
  max-width: 34em;
  font-size: clamp(17px, min(1.4vw, 2.3vh), 22px);
  font-weight: 400;
  line-height: 1.4;
  color: rgba(251, 245, 234, .66);
  text-wrap: balance;
}
/* the two tiles never grow taller than the screen allows, so the
   pictures always show in full */
.service__grid {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: calc((100svh - var(--nav-h) - 470px) * 16 / 9 * 2);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tile-gap);
}
/* Apple-style tiles: headline, one line and a pill button centred at the
   top, the picture set flush into the foot. One tile in brand yellow, the
   other in brand brown, as Apple alternates light and dark. No frames:
   the tiles run edge to edge and meet without gaps or rounded corners. */
.service:has(.service__grid) { padding: 0; max-width: none; }
.service__grid { gap: 0; align-self: stretch; }
.service .card {
  background: var(--brown);
  border-radius: 0;
  box-shadow: none;
}
.service__grid { max-width: none; }
/* the picture fills the rest of its tile, edge to edge, trimmed only
   slightly when the screen's shape asks for it */
.service .card__media {
  border-top: 0;
  flex: 1 1 0;
  min-height: 0;
  aspect-ratio: auto;
  margin: 0;
}
.service .card__media img { object-position: 50% 45%; }
.service .card--yellow { background: var(--yellow); color: rgba(74, 39, 19, .82); }
.service__text {
  padding: clamp(20px, 3vh, 40px) clamp(22px, 3vw, 56px) clamp(14px, 2.2vh, 26px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.service__text h2 {
  margin: 0;
  color: var(--yellow);
  font-size: clamp(28px, min(2.7vw, 4.6vh), 48px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
}
.service .card--yellow h2 { color: var(--brown); }
.service__text p {
  margin: clamp(6px, 1vh, 10px) 0 0;
  max-width: 30em;
  font-size: clamp(16px, min(1.25vw, 2.1vh), 21px);
  line-height: 1.38;
  text-wrap: balance;
}
.service .service__ctas { margin-top: clamp(14px, 2.2vh, 22px); }
/* Apple's pill: compact, rounded, quietly bold */
.pill {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--brown);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: background .25s var(--ease-nav), transform .25s var(--ease-nav);
}
.pill:hover { background: var(--yellow-bright); }
.pill:active { transform: scale(.97); }
.card--yellow .pill { background: var(--brown); color: var(--yellow); }
.card--yellow .pill:hover { background: #5C3219; }
/* the row of pill buttons */
.service__ctas {
  margin-top: clamp(8px, 2vh, 20px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Coming-soon page: Professor Bea's own orange; the words at the top, and
   at the foot of the screen the back of his laptop with just the top of
   his head and his antennae showing over it — busy working on the page */
.panel--peek {
  justify-content: stretch;
  color: rgba(74, 39, 19, .8);
  background: linear-gradient(to bottom, #EC982E 0%, #F6A033 38%, #FBA735 64%, #FBA735 100%);
}
.peek {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.peek__text {
  padding-top: clamp(40px, 10vh, 110px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.panel--peek .service__logo { background-color: var(--brown); }
.panel--peek .service__title { color: var(--brown); }
.panel--peek .service__lead { color: rgba(74, 39, 19, .74); }
.panel--peek .service__ctas { margin-top: clamp(20px, 3.4vh, 32px); }
.panel--peek .pill { background: var(--brown); color: var(--yellow); }
.panel--peek .pill:hover { background: #5C3219; }
.pill.pill--line {
  background: transparent;
  color: var(--brown);
  box-shadow: inset 0 0 0 1.5px var(--brown);
}
.panel--peek .pill.pill--line:hover { background: rgba(74, 39, 19, .08); }

.peek__desk {
  --w: min(600px, 60vw, 46vh);
  position: absolute;
  left: 50%;
  bottom: clamp(26px, 6vh, 64px);
  width: var(--w);
  translate: -50% 0;
}
/* the desk: a soft surface the laptop stands on */
.peek::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(26px, 6vh, 64px);
  background: linear-gradient(to bottom, #D9862A, #C9771F);
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, .35);
  pointer-events: none;
}
/* the top of his head and his antennae: the top 16% of his picture,
   eyes hidden below the lid; its orange feathered into the page */
.peek__bea {
  position: relative;
  width: 124%;
  margin: 0 -12% calc(var(--w) * -.1);
  aspect-ratio: 1086 / 300;
  overflow: hidden;
}
.peek__bea img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask: url(../img/welcome-mask.png?v=6) center / 100% 100% no-repeat;
  mask: url(../img/welcome-mask.png?v=6) center / 100% 100% no-repeat;
  translate: 13% 3%;
  animation: peek-in 1.6s var(--ease-reveal) .3s both, peek-work 4s ease-in-out 1.9s infinite alternate;
}
@keyframes peek-in {
  from { transform: translateY(40%); }
  to   { transform: translateY(0); }
}
@keyframes peek-work {
  0%, 35% { transform: translateY(0) rotate(0deg); }
  65%     { transform: translateY(3%) rotate(-1.5deg); }
  100%    { transform: translateY(1%) rotate(1deg); }
}
/* the laptop, seen from behind: the lid's back, the hinge, and the base
   resting on the desk */
.peek__laptop { position: relative; z-index: 1; }
.peek__lid {
  aspect-ratio: 1.58;
  transform-origin: 50% 100%;
  transform: perspective(900px) rotateX(14deg);
  border-radius: clamp(10px, 1.6vw, 20px) clamp(10px, 1.6vw, 20px) 3px 3px;
  background:
    linear-gradient(118deg, rgba(255, 224, 170, .07) 0%, rgba(255, 224, 170, 0) 45%),
    linear-gradient(to bottom, #4E2A15 0%, #4A2713 40%, #3A1E0D 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 170, .2),
    0 -4px 22px -8px rgba(255, 240, 210, .35);
}
.peek__hinge {
  width: 84%;
  height: clamp(5px, .9vh, 8px);
  margin: 0 auto;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(to bottom, #2C1709, #3E200F);
}
.peek__laptop::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -18%;
  height: 26%;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 238, 205, .35), transparent 70%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.peek__base {
  width: 112%;
  margin-left: -6%;
  height: clamp(9px, 1.7vh, 15px);
  border-radius: 2px 2px 10px 10px / 2px 2px 100% 100%;
  background: linear-gradient(to bottom, #6A3A1E 0%, #4A2713 55%, #331A0B 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 170, .3),
    0 10px 18px -6px rgba(51, 26, 11, .55);
}
@media (prefers-reduced-motion: reduce) {
  .peek__bea img { animation: none; }
}
@media (max-width: 900px), (max-height: 600px) {
  .peek { min-height: calc(100svh - var(--nav-h)); }
  .peek__text { padding: 16vh var(--gutter) 0; }
  .peek__desk { --w: min(420px, 76vw); }
}

@media (max-width: 900px), (max-height: 600px) {
  html:has(body.service-page) { scroll-snap-type: none; }
  .service-page .panel { height: auto; min-height: calc(100svh - var(--nav-h)); }
  .service { height: auto; padding-bottom: clamp(24px, 6vh, 48px); }
  .service__grid { grid-template-columns: 1fr; max-width: none; }
  .service .card__media { flex: none; aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   GUC curriculum pages — every semester of the major, with its courses
   ========================================================================== */

.curriculum-page { background: var(--deep); }
.curriculum {
  max-width: 1240px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + clamp(40px, 8vh, 88px)) var(--gutter) clamp(64px, 12vh, 120px);
  color: rgba(251, 245, 234, .8);
}
.curriculum__head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.service__logo--guc { aspect-ratio: 480 / 161; height: clamp(22px, 3vh, 30px); }
/* quick links to each semester */
.curriculum__jump {
  position: sticky;
  top: calc(var(--nav-h) + 12px);
  z-index: 5;
  margin: clamp(32px, 6vh, 56px) auto clamp(28px, 5vh, 48px);
  width: max-content;
  max-width: 100%;
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(58, 34, 18, .82);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .6);
  overflow-x: auto;
  scrollbar-width: none;
}
.curriculum__jump::-webkit-scrollbar { display: none; }
.curriculum__jump-label {
  flex: none;
  align-self: center;
  padding-inline: 14px 10px;
  color: rgba(251, 245, 234, .6);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
}
.curriculum__jump a {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  color: rgba(248, 180, 48, .85);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .24s var(--ease-nav), color .24s var(--ease-nav);
}
.curriculum__jump a:hover { background: rgba(248, 180, 48, .14); color: var(--yellow-bright); }

/* the instruction above the courses */
.curriculum--deo .curriculum__hint { margin-top: clamp(28px, 5vh, 48px); }
.curriculum__hint {
  scroll-margin-top: calc(var(--nav-h) + 80px);
  margin: 0 auto clamp(18px, 3vh, 28px);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(251, 245, 234, .72);
  font-size: 17px;
  line-height: 1.4;
  text-align: start;
}
.curriculum__hint strong { color: var(--yellow); font-weight: 600; }
.curriculum__hint-tick {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%234A2713' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    var(--yellow);
}
.curriculum__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.sem {
  scroll-margin-top: calc(var(--nav-h) + 76px);
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: var(--tile-radius);
  background: linear-gradient(to bottom, #3A2212, #2E1A0D);
  transition: box-shadow .5s var(--ease-nav);
}
.sem:target { box-shadow: inset 0 0 0 1.5px rgba(248, 180, 48, .7); }
.sem__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.sem__head h2 {
  margin: 0;
  color: var(--yellow);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: -.015em;
}
.sem__note,
.sem__sub {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: rgba(248, 180, 48, .6);
}
.sem__sub { margin: 18px 0 8px; }
.sem__list { list-style: none; margin: 0; padding: 0; }
.sem__list li { border-top: 1px solid rgba(248, 180, 48, .1); }
/* each course is a button: tap to choose it, tap again to let it go */
.course {
  width: 100%;
  display: grid;
  grid-template-columns: 5.6em 1fr 22px;
  align-items: start;
  gap: 12px;
  margin: 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
  text-align: start;
  cursor: pointer;
  transition: background .2s var(--ease-nav);
}
.course--static { cursor: default; }
/* listed, but not offered yet: readable, quieter, and not tappable */
.course--soon { grid-template-columns: 5.6em 1fr; cursor: default; }
.course--soon .course__name { color: rgba(251, 245, 234, .55); }
.course--soon .course__code { color: rgba(248, 180, 48, .35); }
.course--soon:has(.course__soon) { grid-template-columns: 5.6em 1fr auto; }
.course__soon {
  align-self: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(248, 180, 48, .12);
  color: var(--yellow);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
}
.sem__soon {
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(248, 180, 48, .12);
  color: var(--yellow);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
}
.curriculum__hint-clock {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='6.2' fill='none' stroke='%234A2713' stroke-width='1.8'/%3E%3Cpath d='M10 6.6V10l2.3 1.6' fill='none' stroke='%234A2713' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    var(--yellow);
}
.course--plain { grid-template-columns: 1fr 22px; }
.service__logo--deo { aspect-ratio: 480 / 127; height: clamp(20px, 2.8vh, 28px); }
/* DEO: three groups of subjects, the first one spanning the full width */
.curriculum--deo .curriculum__grid { margin-top: clamp(8px, 2vh, 16px); }
.curriculum--deo .sem:first-child { grid-column: 1 / -1; }
.curriculum--deo .sem:first-child .sem__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
}
@media (max-width: 760px) {
  .curriculum--deo .sem:first-child .sem__list { grid-template-columns: 1fr; }
}
.course:not(.course--static):hover { background: rgba(248, 180, 48, .07); }
.course:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }
.course__code {
  color: rgba(248, 180, 48, .55);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  padding-top: 2px;
  white-space: nowrap;
}
.course__name { color: rgba(251, 245, 234, .88); }
.course__tick {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(248, 180, 48, .35);
  transition: background .2s var(--ease-nav), box-shadow .2s var(--ease-nav);
}
.course[aria-pressed="true"] { background: rgba(248, 180, 48, .12); }
.course[aria-pressed="true"] .course__name { color: var(--yellow); }
.course[aria-pressed="true"] .course__tick {
  box-shadow: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%234A2713' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    var(--yellow);
}

/* AUC tiles: the pill chooses the service, and shows a tick once chosen */
.pill--choose { border: 0; font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; gap: 8px; }
.pill--choose .pill__on { display: none; }
.pill--choose[aria-pressed="true"] .pill__off { display: none; }
.pill--choose[aria-pressed="true"] .pill__on { display: inline; }
.pill--choose[aria-pressed="true"]::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8.5' fill='none' stroke='%23F8B430' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.card:not(.card--yellow) .pill--choose[aria-pressed="true"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8.5' fill='none' stroke='%234A2713' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* on the yellow tile a chosen pill turns yellow-on-brown outline; on the
   brown tile it turns brown-on-yellow outline, so the change is obvious */
.card--yellow .pill--choose[aria-pressed="true"] { background: #2E1A0D; color: var(--yellow); }
.card:not(.card--yellow) .pill--choose[aria-pressed="true"] { background: var(--yellow-bright); color: var(--brown); }
.service__head .curriculum__hint { margin: clamp(10px, 1.8vh, 18px) auto 0; font-size: clamp(15px, min(1.2vw, 2vh), 17px); }
.service__head .curriculum__hint-tick { width: 22px; height: 22px; }

/* the bar that appears once something is chosen */
.picker {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px;
  padding-inline-start: 22px;
  border-radius: 999px;
  background: rgba(74, 39, 19, .9);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(248, 180, 48, .14);
  translate: -50% calc(100% + 40px);
  opacity: 0;
  pointer-events: none;
  transition: translate .5s var(--ease-reveal), opacity .3s var(--ease-nav);
}
.picker.is-visible { translate: -50% 0; opacity: 1; pointer-events: auto; }
.picker__count {
  margin: 0;
  color: rgba(251, 245, 234, .88);
  font-size: 15px;
  white-space: nowrap;
}
.picker__n { color: var(--yellow); font-weight: 600; }
.picker__clear {
  border: 0;
  background: none;
  padding: 6px 4px;
  color: rgba(248, 180, 48, .75);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.picker__clear:hover { color: var(--yellow-bright); }
.picker__book { white-space: nowrap; }

/* Book page: the courses someone chose */
.course-summary {
  margin: 28px auto 0;
  max-width: 520px;
  text-align: start;
}
.course-summary[hidden] { display: none; }
.course-summary h2 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}
.course-summary ul { list-style: none; margin: 0; padding: 0; }
.course-summary li {
  padding: 10px 0;
  border-top: 1px solid rgba(74, 39, 19, .12);
  color: var(--brown);
  font-size: 17px;
}

@media (max-width: 760px) {
  .curriculum__grid { grid-template-columns: 1fr; }
  .curriculum__hint { font-size: 15px; align-items: flex-start; white-space: normal; }
  .course { grid-template-columns: 5.2em 1fr 22px; padding: 9px 6px; }
  .course--plain { grid-template-columns: 1fr 22px; }
  .course--soon { grid-template-columns: 5.2em 1fr; }
  .course--soon:has(.course__soon) { grid-template-columns: 5.2em 1fr auto; }
  .picker { width: calc(100% - 24px); justify-content: space-between; padding-inline-start: 18px; gap: 8px; }
  .picker__count, .picker__clear { font-size: 14px; }
  .picker .picker__book { height: 36px; padding: 0 14px; font-size: 15px; }
  .curriculum__jump { width: 100%; justify-content: space-between; gap: 2px; padding: 4px; }
  .curriculum__jump a { min-width: 24px; padding: 0 3px; font-size: 14px; }
  .curriculum__jump-label { padding-inline: 8px 4px; font-size: 12px; }
}

/* ==========================================================================
   Placeholder sub-pages
   ========================================================================== */

.page-hero {
  min-height: 100svh;
  padding: calc(var(--nav-h) + 12vh) var(--gutter) 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--cream);
}
.eyebrow {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
}
.subhead {
  margin: 16px 0 0;
  max-width: 640px;
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--muted);
}
.ctas {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
}
.btn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--brown);
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  transition: background .24s var(--ease-nav);
}
.btn:hover { background: #5c3219; }
.link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  color: var(--brown);
}
.link::after { content: "›"; font-size: 1.2em; line-height: 1; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Scroll motion — apple.com style
   Headlines fade up once when their page arrives. Pictures are tied to the
   scroll position (site.js sets --p from 1 = a screen below, 0 = in place,
   -1 = a screen past): they ease from a slight zoom into place as the page
   rises, then drift slower than the page and dim as it leaves.
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s var(--ease-reveal), transform 1.2s var(--ease-reveal);
}
.js .reveal--delay { transition-delay: .12s; }
.js .reveal--delay-2 { transition-delay: .24s; }
.js .reveal--delay-3 { transition-delay: .36s; }
.js .reveal.is-inview { opacity: 1; transform: none; }

.js .scroll-fx {
  --p: 0;
  --enter: max(var(--p), 0);             /* 1 → 0 while arriving */
  --leave: max(calc(var(--p) * -1), 0);  /* 0 → 1 while leaving  */
  transform:
    translate3d(0, calc(var(--leave) * 40vh - var(--enter) * 5vh), 0)
    scale(calc(1 + var(--enter) * .12));
  opacity: calc(1 - var(--leave) * .7);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
/* First page: Professor Bea glides in from the upper left when the site
   opens, wings beating, and settles where he stands; then the welcome
   message appears word by word, as if he is saying it. As the page scrolls
   away he lifts off and glides out to the upper right (and back in if you
   scroll back up). The flight path is sampled finely from smooth curves,
   so speed, height and lean all change continuously, and the wing beat
   fades in and out rather than starting or stopping dead. */
@property --amp  { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --beat { syntax: "<number>"; inherits: false; initial-value: 0; }

.js .welcome__figure.scroll-fx {
  --leave-tilt: min(calc(var(--leave) * 5), 1);
  transform:
    translate3d(calc(var(--leave) * 115vw),
                calc(var(--leave) * -22vh + sin(calc(var(--leave) * 3 * 180deg)) * -2vh), 0)
    rotate(calc(var(--leave-tilt) * 8deg));
  opacity: 1;
  transform-origin: 50% 60%;
}
.js .bea {
  --fly: 2.2s;
  animation: bea-fly-in var(--fly) linear .25s both;
}
/* the shadow gathers on the floor as he comes down, and fades as he lifts off */
.js .bea-shadow { animation: shadow-in 2.2s cubic-bezier(.3, .6, .3, 1) .25s both; }
@keyframes shadow-in {
  0%, 45% { opacity: 0; transform: scale(.35); }
  100%    { opacity: 1; transform: none; }
}
.js .welcome__figure.scroll-fx .bea-ground { opacity: max(0, calc(1 - var(--leave) * 6)); }
@keyframes bea-fly-in {
    0.0% { translate: calc((-50vw - 75%) * 1.0000) -24.000vh; rotate: 10.000deg; --amp: 1.000; }
    2.5% { translate: calc((-50vw - 75%) * 0.9269) -24.248vh; rotate: 9.506deg; --amp: 1.000; }
    5.0% { translate: calc((-50vw - 75%) * 0.8574) -24.359vh; rotate: 9.025deg; --amp: 1.000; }
    7.5% { translate: calc((-50vw - 75%) * 0.7915) -24.332vh; rotate: 8.556deg; --amp: 1.000; }
   10.0% { translate: calc((-50vw - 75%) * 0.7290) -24.167vh; rotate: 8.100deg; --amp: 1.000; }
   12.5% { translate: calc((-50vw - 75%) * 0.6699) -23.866vh; rotate: 7.656deg; --amp: 1.000; }
   15.0% { translate: calc((-50vw - 75%) * 0.6141) -23.434vh; rotate: 7.225deg; --amp: 1.000; }
   17.5% { translate: calc((-50vw - 75%) * 0.5615) -22.879vh; rotate: 6.806deg; --amp: 1.000; }
   20.0% { translate: calc((-50vw - 75%) * 0.5120) -22.210vh; rotate: 6.400deg; --amp: 1.000; }
   22.5% { translate: calc((-50vw - 75%) * 0.4655) -21.439vh; rotate: 6.006deg; --amp: 1.000; }
   25.0% { translate: calc((-50vw - 75%) * 0.4219) -20.579vh; rotate: 5.625deg; --amp: 1.000; }
   27.5% { translate: calc((-50vw - 75%) * 0.3811) -19.644vh; rotate: 5.256deg; --amp: 1.000; }
   30.0% { translate: calc((-50vw - 75%) * 0.3430) -18.648vh; rotate: 4.900deg; --amp: 1.000; }
   32.5% { translate: calc((-50vw - 75%) * 0.3075) -17.605vh; rotate: 4.556deg; --amp: 1.000; }
   35.0% { translate: calc((-50vw - 75%) * 0.2746) -16.530vh; rotate: 4.225deg; --amp: 1.000; }
   37.5% { translate: calc((-50vw - 75%) * 0.2441) -15.435vh; rotate: 3.906deg; --amp: 1.000; }
   40.0% { translate: calc((-50vw - 75%) * 0.2160) -14.335vh; rotate: 3.600deg; --amp: 1.000; }
   42.5% { translate: calc((-50vw - 75%) * 0.1901) -13.238vh; rotate: 3.306deg; --amp: 1.000; }
   45.0% { translate: calc((-50vw - 75%) * 0.1664) -12.156vh; rotate: 3.025deg; --amp: 1.000; }
   47.5% { translate: calc((-50vw - 75%) * 0.1447) -11.096vh; rotate: 2.756deg; --amp: 1.000; }
   50.0% { translate: calc((-50vw - 75%) * 0.1250) -10.066vh; rotate: 2.500deg; --amp: 1.000; }
   52.5% { translate: calc((-50vw - 75%) * 0.1072) -9.069vh; rotate: 2.256deg; --amp: 1.000; }
   55.0% { translate: calc((-50vw - 75%) * 0.0911) -8.111vh; rotate: 2.025deg; --amp: 1.000; }
   57.5% { translate: calc((-50vw - 75%) * 0.0768) -7.195vh; rotate: 1.806deg; --amp: 1.000; }
   60.0% { translate: calc((-50vw - 75%) * 0.0640) -6.322vh; rotate: 1.600deg; --amp: 1.000; }
   62.5% { translate: calc((-50vw - 75%) * 0.0527) -5.494vh; rotate: 1.318deg; --amp: 1.000; }
   65.0% { translate: calc((-50vw - 75%) * 0.0429) -4.712vh; rotate: 0.734deg; --amp: 1.000; }
   67.5% { translate: calc((-50vw - 75%) * 0.0343) -3.979vh; rotate: 0.240deg; --amp: 1.000; }
   70.0% { translate: calc((-50vw - 75%) * 0.0270) -3.296vh; rotate: -0.154deg; --amp: 1.000; }
   72.5% { translate: calc((-50vw - 75%) * 0.0208) -2.665vh; rotate: -0.444deg; --amp: 1.000; }
   75.0% { translate: calc((-50vw - 75%) * 0.0156) -2.089vh; rotate: -0.633deg; --amp: 1.000; }
   77.5% { translate: calc((-50vw - 75%) * 0.0114) -1.572vh; rotate: -0.727deg; --amp: 1.000; }
   80.0% { translate: calc((-50vw - 75%) * 0.0080) -1.118vh; rotate: -0.740deg; --amp: 1.000; }
   82.5% { translate: calc((-50vw - 75%) * 0.0054) -0.734vh; rotate: -0.687deg; --amp: 0.957; }
   85.0% { translate: calc((-50vw - 75%) * 0.0034) -0.425vh; rotate: -0.587deg; --amp: 0.844; }
   87.5% { translate: calc((-50vw - 75%) * 0.0020) -0.199vh; rotate: -0.458deg; --amp: 0.684; }
   90.0% { translate: calc((-50vw - 75%) * 0.0010) -0.062vh; rotate: -0.321deg; --amp: 0.500; }
   92.5% { translate: calc((-50vw - 75%) * 0.0004) -0.021vh; rotate: -0.193deg; --amp: 0.316; }
   95.0% { translate: calc((-50vw - 75%) * 0.0001) -0.012vh; rotate: -0.090deg; --amp: 0.156; }
   97.5% { translate: 0 -0.004vh; rotate: -0.023deg; --amp: 0.043; }
  100.0% { translate: 0 0.000vh; rotate: 0.000deg; --amp: 0.000; }
}

/* The wings: --beat swings 0 ↔ 1 many times a second, --amp sets how far */
.bea__wing {
  --amp: inherit;
  transform:
    rotate(calc(var(--beat) * var(--amp) * var(--sweep)))
    scale(calc(1 - var(--beat) * var(--amp) * .14), calc(1 - var(--beat) * var(--amp) * .08));
}
.bea__wing--left  { --sweep: 34deg; }
.bea__wing--right { --sweep: -34deg; }
.js .bea__wing { animation: wing-beat .055s ease-in-out .25s 40 alternate both; }
.js .welcome__figure.is-flying .bea__wing {
  --amp: 1;
  animation: wing-beat .055s ease-in-out infinite alternate;
}
@keyframes wing-beat {
  from { --beat: 0; }
  to   { --beat: 1; }
}

/* The welcome message, spoken word by word once he has landed */
.js [data-speech] .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.32em);
  filter: blur(6px);
  animation: word-in .8s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(2.4s + var(--i) * 115ms);
}
@keyframes word-in {
  to { opacity: 1; transform: none; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .scroll-fx { transform: none; opacity: 1; }
  .js .bea, .js .bea__wing, .js .welcome__figure.is-flying .bea__wing, .js .bea-shadow { animation: none; }
  .js [data-speech] .word { animation: none; opacity: 1; transform: none; filter: none; }
  .js .welcome__figure.scroll-fx { transform: none; }
  .nav-bg, .nav-link, .flyout li, .flyout__label, .nav-scrim,
  .brand, .brand-mark, .nav-progress::after, .quad .panel__bg img, .card__media img { transition-duration: 0s !important; }
}

/* Short landscape screens: relax snapping so nothing gets trapped */
@media (max-height: 520px) {
  html:has(body.snap-page) { scroll-snap-type: y proximity; }
}

/* ==========================================================================
   Languages — German and Egyptian Arabic (set by site.js on <html>)
   ========================================================================== */

/* the language picker in the top bar: a globe and the current language */
.nav-link .globe { width: 15px; height: 15px; flex: none; }
.nav-lang-wrap { display: inline-flex; align-items: center; gap: 5px; }
.nav-lang { font-size: 13px; letter-spacing: .02em; }
.nav-lang-full { display: none; }
/* the language list opens under the globe, at the far end of the bar */
@media (min-width: 1341px) {
  .flyout--end .flyout__inner { max-width: none; text-align: end; }
  .flyout--end ul { justify-items: end; }
  /* every other menu opens right under its own name (site.js places it),
     so the pointer goes straight down instead of across the bar */
  .flyout:not(.flyout--end) .flyout__inner { max-width: none; width: max-content; margin: 0; padding-inline: 0; }
}
.flyout a[aria-current="true"] { color: var(--yellow-bright); }
.flyout a[aria-current="true"]::after { content: " ✓"; font-size: .7em; }
.flyout a[lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--font); }

/* Arabic: its own typeface, no letter-spacing (it would break the joins),
   a little more line height, and arrows that point the reading way */
:root[lang="ar"] { --font: "IBM Plex Sans Arabic", "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif; }
:root[lang="ar"] body *,
:root[lang="ar"] body *::before,
:root[lang="ar"] body *::after { letter-spacing: 0 !important; }
:root[lang="ar"] .headline,
:root[lang="ar"] .about-title,
:root[lang="ar"] .service__title { line-height: 1.3; }
:root[lang="ar"] .btn--primary::after { content: "←"; }
:root[lang="ar"] .btn--primary:hover::after { transform: translateX(-3px); }
:root[lang="ar"] .course__alt { display: none; }
/* Arabic names shown beside Arabic-taught DEO subjects in English and German */
.course__alt {
  display: block;
  margin-top: 2px;
  font-family: "IBM Plex Sans Arabic", var(--font);
  font-size: 13px;
  color: rgba(248, 180, 48, .6);
  text-align: start;
}

/* phone menu: the language row reads "globe + Language", and in Arabic the
   back arrow sits on the right and every arrow points the reading way */
@media (max-width: 1340px) {
  .nav-lang { display: none; }
  .nav-lang-full { display: inline; }
  .nav-link .globe { width: 26px; height: 26px; }
  .nav-lang-wrap { gap: 12px; }
  :root[dir="rtl"] .nav-link .chev,
  :root[dir="rtl"] .nav-item.is-open > .nav-link .chev { transform: rotate(90deg); }
  :root[dir="rtl"] .nav-back { left: auto; right: calc(var(--gutter) - 10px); }
  :root[dir="rtl"] .nav-back svg { transform: scaleX(-1); }
}

/* ==========================================================================
   Scroll prompt — on the home page's first screen
   ========================================================================== */

.scroll-cue {
  position: absolute;
  z-index: 3;
  bottom: clamp(20px, 4vh, 40px);
  inset-inline-end: var(--gutter);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border: 0;
  background: none;
  color: var(--brown);
  font: 500 14px/1.2 var(--font);
  letter-spacing: .02em;
  cursor: pointer;
  /* appears once the welcome has been said */
  animation: cue-in .9s var(--ease-reveal) 5s both;
  transition: opacity .5s var(--ease-nav), transform .5s var(--ease-nav);
}
.scroll-cue__arrow {
  width: 22px;
  height: 22px;
  padding: 8px;
  box-sizing: content-box;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(74, 39, 19, .55);
  animation: cue-bob 1.8s ease-in-out 5.9s infinite;
}
.scroll-cue:hover .scroll-cue__arrow { background: rgba(74, 39, 19, .08); }
.scroll-cue.is-gone { opacity: 0; transform: translateY(10px); pointer-events: none; }
@keyframes cue-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
  .scroll-cue__arrow { animation: none; }
}

/* Arabic: the school named in words where its mark would be */
.service__school {
  display: block;
  font-size: clamp(16px, 2vh, 20px);
  font-weight: 600;
  color: inherit;
  opacity: .85;
}
.panel--service .service__school,
.curriculum .service__school { color: var(--yellow); }
.panel--peek .service__school { color: var(--brown); }


/* ==========================================================================
   Other Organizations, 3D Printing & Prototyping, Photography Studio —
   the same two layouts as the school pages: a list of topics to tick on
   deep brown, or full-screen Apple-style tiles that alternate yellow and
   brown, each with a quiet line icon, a line of text and a Choose pill
   ========================================================================== */

/* the menu the page belongs to, where a school's logo would be */
.service__eyebrow {
  margin: 0;
  color: rgba(248, 180, 48, .78);
  font-size: clamp(14px, min(1.1vw, 1.9vh), 17px);
  font-weight: 600;
  letter-spacing: .01em;
}
.curriculum--service .curriculum__head { margin-bottom: clamp(30px, 5.5vh, 52px); }
.curriculum__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.curriculum__grid--3,
.curriculum__grid--4 { align-items: start; }
@media (max-width: 1060px) {
  .curriculum__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* which class: one of a row of numbers, like the semester bar */
.grades {
  width: max-content;
  max-width: 100%;
  margin: 0 auto clamp(20px, 3.4vh, 30px);
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  background: rgba(58, 34, 18, .82);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .6);
}
.grades__label {
  padding-inline: 14px 10px;
  color: rgba(251, 245, 234, .6);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
}
.grades__btn {
  min-width: 38px;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(248, 180, 48, .85);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .24s var(--ease-nav), color .24s var(--ease-nav);
}
.grades__btn:hover { background: rgba(248, 180, 48, .14); color: var(--yellow-bright); }
.grades__btn[aria-checked="true"] { background: var(--yellow); color: var(--brown); }
.grades__btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* tiles: as many columns as there are choices, edge to edge */
.service__grid--tiles { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.service__grid--2 { --n: 2; }
.service__grid--3 { --n: 3; }
.service__grid--4 { --n: 4; }
/* service-page tiles: content centred (the home page's photo tiles share
   the .tile name, so everything here stays inside .service) */
.service .tile {
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 5vh, 64px) clamp(22px, 2.6vw, 52px);
  text-align: center;
  color: rgba(251, 245, 234, .72);
}
.service .card--yellow.tile { color: rgba(74, 39, 19, .8); }
.tile__icon {
  flex: none;
  width: clamp(40px, 5.6vh, 58px);
  height: clamp(40px, 5.6vh, 58px);
  margin-bottom: clamp(16px, 2.8vh, 28px);
  color: var(--yellow);
}
.card--yellow .tile__icon { color: var(--brown); }
.service .tile h2 {
  margin: 0;
  color: var(--yellow);
  font-size: clamp(26px, min(2.3vw, 4.2vh), 42px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.service .card--yellow.tile h2 { color: var(--brown); }
.service .tile p {
  margin: clamp(8px, 1.3vh, 14px) 0 0;
  max-width: 21em;
  font-size: clamp(16px, min(1.2vw, 2.1vh), 20px);
  line-height: 1.4;
  text-wrap: balance;
}
.tile .service__ctas { margin-top: clamp(18px, 3.2vh, 32px); }
/* Tiles side by side share their rows, so icons, titles and buttons line up
   even when one description runs a line longer; the group stays centred */
@media (min-width: 901px) and (min-height: 601px) {
  .service__grid--tiles:has(> .tile > .tile__icon) {
    grid-template-rows: repeat(var(--rows, 1), 1fr auto auto auto auto 1fr);
  }
  .service__grid--tiles > .tile:has(> .tile__icon) {
    grid-row: span 6;
    display: grid;
    grid-template-rows: subgrid;
    justify-items: center;
    align-content: stretch;
    row-gap: 0;
  }
  .service__grid--tiles > .tile > .tile__icon { grid-row: 2; }
  .service__grid--tiles > .tile > h2 { grid-row: 3; }
  .service__grid--tiles > .tile > p { grid-row: 4; }
  .service__grid--tiles > .tile > .service__ctas { grid-row: 5; align-self: start; }
}
@media (max-width: 1100px) {
  .service__grid--4 { --n: 2; --rows: 2; }
}

/* 3D printing: the file drop, a calm well inside the yellow tile */
.drop {
  position: relative;
  width: min(100%, 520px);
  flex: 1;
  max-height: 460px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vh, 44px);
  border-radius: 28px;
  background: rgba(74, 39, 19, .07);
  cursor: pointer;
  transition: background .3s var(--ease-nav), transform .3s var(--ease-nav);
}
.drop:hover { background: rgba(74, 39, 19, .1); }
.drop.is-over { background: rgba(74, 39, 19, .14); transform: scale(1.01); }
.drop:focus-within { outline: 2px solid var(--brown); outline-offset: 4px; }
.drop__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.drop__empty,
.drop__full {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.drop__full { display: none; }
.drop.is-full .drop__empty { display: none; }
.drop.is-full .drop__full { display: flex; }
.drop__title,
.drop__name {
  color: var(--brown);
  font-size: clamp(24px, min(2.1vw, 3.8vh), 36px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.drop__name { font-size: clamp(20px, min(1.7vw, 3vh), 28px); overflow-wrap: anywhere; }
.drop__or { font-size: 15px; opacity: .7; }
.drop__types,
.drop__size { font-size: 14px; opacity: .72; }
.drop__types { margin-top: 6px; }
.drop__ready {
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--brown);
  color: var(--yellow);
  font-size: 13px;
  font-weight: 600;
}
.drop__again {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* …and how it works, in four short steps */
.steps {
  list-style: none;
  margin: clamp(20px, 3.4vh, 34px) 0 0;
  padding: 0;
  max-width: 25em;
  margin-inline: auto;
  display: grid;
  gap: clamp(16px, 2.8vh, 26px);
  text-align: center;
  font-size: clamp(16px, min(1.25vw, 2.1vh), 20px);
  line-height: 1.4;
}
.steps li {
  display: grid;
  justify-items: center;
  gap: 8px;
}
.steps__n {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--brown);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}
.steps li > span:last-child { text-wrap: balance; }
.steps__help {
  margin: clamp(22px, 3.8vh, 38px) 0 0;
  font-size: 15px;
}
.steps__help a {
  color: var(--yellow);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.steps__help a:hover { color: var(--yellow-bright); }

@media (max-width: 900px), (max-height: 600px) {
  .service__grid--tiles { --n: 1; }
  .service .tile { padding: clamp(44px, 9vw, 64px) var(--gutter); }
  .drop { min-height: 300px; }
}
@media (max-width: 760px) {
  .curriculum__grid--3 { grid-template-columns: 1fr; }
}

/* Section 2 reads as four set lines; the first, longest one stays on one
   line by scaling the type with the screen (phones wrap naturally) */
@media (min-width: 901px) {
  #academic-input .panel__content { max-width: none; }
  #academic-input .headline { font-size: min(48px, calc((100vw - 2 * var(--gutter)) / 36.5)); }
}

/* words joined by a hyphen never break at it (site.js wraps them) */
.nobr { white-space: nowrap; }