/* Magic Lanthon School: page layout. Colours and type come from tokens.css; parts from components.css.
   Dark and light bands in turn, full width; each course brings its own colour (--c, from the admin).
   Neighbouring bands never share a ground. */

:root {
  color-scheme: light; /* bands set their own scheme with data-theme */
  --grid-gap: clamp(16px, 1.2vw + 8px, 28px); /* one gutter for every grid */
  --band-pad: clamp(56px, 3vw + 32px, 96px);
  --title-size: clamp(1.875rem, 1.45rem + 1.8vw, 3rem); /* section titles, 30-48px: one size for every band */
  --subtitle-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); /* course names, the lead film: 24-40px */
  --card-title-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); /* card titles: 18-24px */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-film: cubic-bezier(0.16, 1, 0.3, 1); /* long, soft landing */
  --grain: url("/assets/img/grain.svg"); /* fine film grain on the dark bands */
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-snap-type: y proximity; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/var(--leading-body) var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
[data-theme="dark"] { background-color: var(--paper); color: var(--ink); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; overflow-wrap: break-word; hyphens: manual; }
ul, ol { list-style: none; margin: 0; padding: 0; }
.wrap { width: min(100% - 2 * var(--pad), var(--container)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-item); background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* Line icons and drawings (one stroke family) */
.ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
symbol * { vector-effect: non-scaling-stroke; }
symbol .fill { fill: currentColor; stroke: none; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--rule); background: var(--paper); }
.header-row { display: flex; align-items: center; gap: 20px; height: var(--header-h); }
.brand { flex: none; display: block; }
.brand img { height: 46px; width: auto; }
.nav { margin-inline: auto; }
.nav-list { display: flex; align-items: center; }
.nav-list > li > a { position: relative; display: inline-flex; align-items: center; gap: 4px; height: var(--header-h); padding: 0 12px; border: 0; background: none; color: var(--ink-soft); font: 500 0.9375rem/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: color var(--dur-fast); }
.nav-list > li > a:hover { color: var(--ink); }
/* Programs dropdown (CAP, 5 Nov 2026): the school's two columns, the six then the five, as in the footer */
.nav-drop { position: relative; }
.nav-drop > a::before { content: ''; order: 1; width: 6px; height: 6px; margin-left: 2px; border-right: 1.5px solid; border-bottom: 1.5px solid; rotate: 45deg; translate: 0 -2px; }
.nav-sub { position: absolute; top: 100%; left: 0; display: grid; grid-template-rows: repeat(6, auto); grid-auto-flow: column; column-gap: 8px; width: max-content; padding: 10px; border: 1px solid var(--rule); border-top: 0; border-radius: 0 0 var(--radius-media) var(--radius-media); background: var(--paper); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transition: opacity var(--dur-fast), visibility var(--dur-fast); }
.nav-drop:hover .nav-sub, .nav-drop:focus-within .nav-sub { opacity: 1; visibility: visible; }
.nav-sub a { display: block; padding: 10px 12px; border-radius: 6px; color: var(--ink-soft); font: 500 0.9375rem/1.2 var(--font-body); text-decoration: none; white-space: nowrap; transition: color var(--dur-fast), background var(--dur-fast); }
.nav-sub a:hover, .nav-sub a:focus-visible { background: var(--rule); color: var(--ink); }
.nav-list > li > a[aria-current="page"] { color: var(--ink); }
/* the current page sits in gold viewfinder corners, like the line button (CAP, 17 Oct 2026: not an underline); drawn by the corners rule below */
.nav-list > li > a[aria-current="page"]::after { --k: var(--gold); --l: 7px; --t: 1.5px; --inset: 22px 2px; }

.header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-soft); font: 400 1.5rem/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast); }
.icon-btn:hover { background: color-mix(in oklch, var(--ink) 9%, transparent); color: var(--ink); }
.icon-btn .ico { width: 20px; height: 20px; }
.menu-btn { display: none; }
.burger, .burger::before, .burger::after { display: block; width: 20px; height: 1.6px; border-radius: 2px; background: currentColor; transition: rotate var(--dur), translate var(--dur), opacity var(--dur); }
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { translate: 0 -6px; }
.burger::after { translate: 0 6px; }
.menu-btn[aria-expanded="true"] .burger { background: transparent; }
.menu-btn[aria-expanded="true"] .burger::before { translate: 0; rotate: 45deg; }
.menu-btn[aria-expanded="true"] .burger::after { translate: 0; rotate: -45deg; }

/* Phone menu: one row per link (the client's SRFTI reference), right-aligned panel */
.mmenu { position: fixed; top: calc(var(--header-h) + 1px); right: 0; width: min(100%, 420px); max-height: calc(100dvh - var(--header-h) - 1px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); box-shadow: inset 1px 0 0 var(--rule), var(--shadow-lg); animation: arrive var(--dur) var(--ease-arrive); }
.mmenu-list > li { border-bottom: 1px solid var(--rule); }
.mm-drop { display: grid; grid-template-columns: minmax(0, 1fr) 54px; }
.mm-toggle { display: grid; place-items: center; min-height: 54px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.mm-toggle::before { content: ''; width: 8px; height: 8px; border-right: 1.5px solid; border-bottom: 1.5px solid; rotate: 45deg; translate: 0 -2px; transition: rotate var(--dur-fast); }
.mm-toggle[aria-expanded="true"]::before { rotate: 225deg; translate: 0 2px; }
.mm-sub { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, auto)); grid-template-rows: repeat(6, auto); grid-auto-flow: column; column-gap: 16px; justify-content: start; padding: 0 var(--pad) 12px; }
.mm-sub[hidden] { display: none; }
.mm-sub a { display: flex; align-items: center; min-height: 44px; color: var(--ink-soft); font: 500 0.9375rem/1.25 var(--font-body); text-decoration: none; }
.mm-row { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; padding: 0 var(--pad); border: 0; background: none; color: var(--ink); font: 500 1.0625rem/1.2 var(--font-body); text-align: left; text-decoration: none; cursor: pointer; }
.mm-row[aria-current="page"] { color: var(--accent-strong); }
.mmenu-foot { display: grid; justify-items: start; gap: 18px; padding: 24px var(--pad) 28px; }
.mm-mail { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 0.9375rem; text-decoration: none; overflow-wrap: anywhere; }
.mm-mail .ico { color: var(--accent-strong); }

@media (max-width: 1179px) {
  .nav { display: none; }
  .menu-btn { display: inline-grid; }
  .header-actions { margin-left: auto; }
}
@media (max-width: 639px) { .brand img { height: 40px; } .header-row { gap: 12px; } .header-actions { gap: 4px; } }
@media (max-width: 379px) { .header-enroll { display: none; } }

/* A course's colour dot (menus, alumni) */
.dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }

/* A course named on a person, film or alumni: its dot and its name in small mono capitals */
.cmark { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--ink-muted); font: 500 0.75rem/1.4 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }

/* Socials (footer and phone menu) */
.socials { display: flex; flex-wrap: wrap; gap: 8px; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--rule-heavy); color: var(--ink-soft); transition: color var(--dur-fast), box-shadow var(--dur-fast); }
.socials a:hover { color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent-strong); }
.socials svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* ---------- Hero, after cinema.usc.edu (CAP, 17 Oct 2026; the fast-turning wheel was hypnotic). It plays by itself (CAP: the courses
   must not wait for a click): first the title centred over the dimmed photo wheel, then at 3s the wheel slides right and the courses come in,
   each course's ring on an arc around the wheel, and stay. After that the wheel drifts slowly round and stops under the mouse (CAP): it follows a drag and rolls
   to the other side (site.js), and the title stays, top left (CAP: it was gone after 3s). These rules are the
   courses screen; the animations below play the title first. The copy and the stage share one grid cell. All sizes are in --u so the rings stay on the arc ---------- */
/* wheel radius --r, ring arc --rc and row height --h in --u; the wheel's centre sits --cx across, the list centred on it (CAP, 17 Oct 2026:
   the names in the middle, so the arc bends the same above and below). CAP: the arc must read as the wheel's own, so the rows spread along it;
   17 Oct 2026: a wider gap to the wheel (6u, as on phones), then tighter rows */
/* --dy (in u) moves the list down so the title and list sit centred together (CAP, 17 Oct 2026): half the title's two lines and its 24px gap.
   shortcut: the title is about 2.8u per line at every laptop size, so 3.7u is within 3px; work it out in site.js if the title's size rule changes */
/* A dark cinema (CAP, 17 Oct 2026: a filmy feel; then one solid colour, no gradient, and a smaller reel): the theme's flat black, as the header, white
   and sand type, a yellow "Audio-Visual" (CAP, 17 Oct 2026: pure white and pure yellow, not cream and gold; red would meet the wheel's red slice), and a film reel (--reel wide) in the free bottom corner, on the side away from the wheel, turning in step with it (motion below) */
.hero { --u: min(1vw, (100svh - var(--header-h)) * 0.02); --r: 40; --rc: 46; --h: 3.6; --dy: 3.7; --cx: 80%; --cx-q: 80cqw; --reel: clamp(160px, 16vw, 300px); --ink: #FFF; --ink-soft: #D8CBB3; --highlight: #FFD400;
  position: relative; isolation: isolate; overflow: hidden; display: grid; min-height: calc(100svh - var(--header-h)); }
.hero > * { grid-area: 1 / 1; }
.hero::before { content: ""; position: absolute; left: calc(var(--reel) * -0.2); bottom: calc(var(--reel) * -0.2); z-index: -3; width: var(--reel); height: var(--reel);
  background: url("/assets/img/reel.svg") center / contain no-repeat; } /* under the wheel; its hub 0.3 reel in from the side and the bottom */
/* the title just above the list, its right edge on the rings' curve (CAP, 17 Oct 2026: back as it was, not alone at the top left; 4px: half a
   square); hero-first holds the first screen's centred look */
.hero-copy { display: grid; align-self: center; justify-items: end; align-content: center; padding-inline: var(--pad) calc(100% - var(--cx) + var(--rc) * var(--u) - 4px); text-align: end; translate: 0 calc(-50% + var(--dy) * var(--u) - var(--n) * max(44px, var(--h) * var(--u)) / 2 - 24px); }
/* two lines, three on phones (CAP, 17 Oct 2026): the second, "Audio-Visual Language", is 10.55 times the size wide, so the size is capped to fit */
.hero-title { --big: min(clamp(2.25rem, 0.4rem + 9vw, 4rem), (100vw - 2 * var(--pad)) / 11); font: 600 clamp(1.25rem, min(8vw, 3.6svh), 2.25rem)/1 var(--font-heading); letter-spacing: -0.015em; white-space: nowrap; }
.hero-title em { font-style: normal; color: var(--highlight); white-space: nowrap; }
.hero-copy .w { display: inline-block; } /* site.js moves each word onto the arc (CAP: the title follows the curve like the names) */
.hero-stage { position: relative; container-type: inline-size; display: grid; align-content: center; padding-block: 12px; }
.wheel, .wheel-swap { position: absolute; left: calc(var(--cx) - var(--r) * var(--u)); top: calc(50% - var(--r) * var(--u)); width: calc(2 * var(--r) * var(--u)); aspect-ratio: 1; }
.wheel { z-index: -2; rotate: -90deg; }
/* the wheel itself sits under the copy, so a see-through round button over it takes the drag, click or tap (site.js); pan-y keeps page scrolling */
.wheel-swap { display: none; padding: 0; border: 0; border-radius: 50%; background: none; cursor: grab; touch-action: pan-y; }
.js .wheel-swap { display: block; }
.wheel > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.wheel-accent { opacity: 0.6; }
/* a course picked in the list (site.js): its slice of photos stays, the rest fade (CAP, 17 Oct 2026) */
.wheel image { transition: opacity 0.5s var(--ease-out); }
.wheel image.is-dim { opacity: 0.18; }
.wheel::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ink-fill); opacity: 0; transition: opacity 0.5s var(--ease-out); }
.wheel.is-picking::before { opacity: 1; } /* a dark ground under the photos, or the colour wash shows bright through the faded ones */
.wheel-wash { border-radius: 50%; mix-blend-mode: color; opacity: 0.85; mask: radial-gradient(closest-side, transparent 5%, #000 5%); } /* the hub stays black */
.hero-courses { display: grid; grid-auto-rows: max(44px, var(--h) * var(--u)); justify-items: end; width: calc(var(--cx) - var(--rc) * var(--u) + 4px); padding-left: var(--pad); translate: 0 calc(var(--dy) * var(--u)); }
/* each row moves right by how far the arc bends in at its height (rc minus the square root of rc squared minus its height squared) */
.hero-courses li { display: flex; align-items: center; translate: calc(var(--s, 1) * (var(--rc) - sqrt(var(--rc) * var(--rc) - pow((var(--i) - (var(--n) - 1) / 2) * var(--h) + var(--dy), 2))) * var(--u)) 0; }
.hero-courses a { display: flex; align-items: center; gap: 16px; min-height: 44px; color: var(--ink-soft); font: 400 clamp(1.0625rem, 0.8rem + 0.6vw, 1.375rem)/1.25 var(--font-body); text-align: end; text-decoration: none; transition: color 300ms var(--ease-out); }
/* The column is the room at the arc's middle; lower rows have more, so a long name stays on one line where it fits */
@media (min-width: 375px) and (max-width: 639px) { .hero-courses { grid-template-columns: minmax(0, 1fr); } .hero-courses a { white-space: nowrap; } }
.hero-courses a::after { content: ""; flex: none; width: 8px; height: 8px; background: currentColor; transition: background-color 300ms var(--ease-out); } /* CAP, 17 Oct 2026: a small square, not a ring */
.hero-courses :is(a:hover, a:focus-visible, a.is-on) { color: var(--ink); }
.hero-courses :is(a:hover, a:focus-visible, a.is-on)::after { background: var(--c); }
/* swapped (CAP: move the wheel left and right): the wheel on the left, the list on the right on a mirrored arc with its squares first.
   While a hand drags it, the wheel and the fading names follow at once */
.hero.is-flipped { --cx: 20%; --cx-q: 20cqw; --s: -1; }
.hero.is-flipped::before { left: auto; right: calc(var(--reel) * -0.2); }
.is-flipped .hero-copy { justify-items: start; padding-inline: calc(var(--cx) + var(--rc) * var(--u) - 4px) var(--pad); text-align: start; }
.is-flipped .hero-courses { justify-items: start; width: auto; margin-left: calc(var(--cx) + var(--rc) * var(--u) - 4px); padding: 0 var(--pad) 0 0; }
.is-flipped .hero-courses a { flex-direction: row-reverse; text-align: start; }
.is-dragging :is(.wheel, .hero-copy, .hero-courses) { transition: none; }
.is-dragging .wheel-swap { cursor: grabbing; }
@media (min-width: 900px) { .hero-title { --big: clamp(2.5rem, 1rem + 3vw, 4rem); font-size: min(max(2.25rem, 3.4 * var(--u)), (80vw - var(--rc) * var(--u) + 4px - var(--pad)) / 11); } } /* above the list: as wide as the list's column */
/* phones and tablets: a slice of the wheel at the right edge, or the left edge when swapped; the title across the top, on the far side */
@media (max-width: 899px) {
  .hero { --u: 1vw; --r: 75; --rc: 81; --h: 11.5; --dy: 14.5; --cx: calc(100% + 28vw); --cx-q: calc(100cqw + 28vw); } /* half of three title lines and the gap, within 4px from 320 to 430 wide */
  .hero-stage { overflow: hidden; }
  .hero.is-flipped { --cx: -28vw; --cx-q: -28vw; }
  .hero { --room: calc(((100svh - var(--header-h)) / 2 - var(--dy) * var(--u) - var(--n) * max(44px, var(--h) * var(--u)) / 2 - 20px) / 0.8);
    --reel: clamp(0px, (var(--room) - 110px) * 50, min(var(--room), 40vw, 200px)); } /* the reel fits the room under the list, 20px clear; under 110px it would be a speck, so none */
  .hero-title br { display: none; } .hero-title em { display: block; } /* three lines on phones (CAP, 17 Oct 2026): narrow enough to sit above the list on the curve, as on a laptop */
}
@media (min-width: 600px) and (max-width: 899px) { .hero { --h: 7; --dy: 8.5; } } /* tablets: rows near 54px, not 88 */
/* with reduced motion: the first screen, then one instant switch at 3s to the courses, which stay; a swap is instant too.
   The wheel's intro fills backwards only, so it never holds left and the swap can slide it */
.hero-copy { animation: hero-first 3s; }
.hero-title { animation: hero-big 3s; }
.wheel { animation: wheel-start 0s 3s backwards; }
.hero-courses li, .wheel-swap { animation: hero-fade 0s 3s both; }
@media (prefers-reduced-motion: no-preference) {
  .wheel { animation: wheel-start 1s var(--ease-out) 3s backwards, wheel-drift 240s linear infinite; transition: rotate 0.9s cubic-bezier(0.65, 0, 0.35, 1), left 0.9s cubic-bezier(0.65, 0, 0.35, 1), translate 0.9s cubic-bezier(0.65, 0, 0.35, 1); } /* a swap rolls it across */
  /* and it drifts round by itself, one turn in four minutes (CAP, 17 Oct 2026: slowly, not hypnotic), all of it one way so each course's
     slice stays together; it holds while turned to a course (site.js counts the drift), dragged or focused, and while a mouse is on it */
  .wheel.is-picking, .is-dragging .wheel, .hero:has(.wheel-swap:focus-visible) .wheel { animation-play-state: running, paused; }
  @media (hover: hover) { .hero:has(.wheel-swap:hover) .wheel { animation-play-state: running, paused; } }
  /* the film reel turns in step with the wheel (CAP, 17 Oct 2026: the same phase): same start, speed and way round, and it holds whenever the wheel holds */
  .hero::before { animation: wheel-drift 240s linear infinite; }
  .hero.is-dragging::before, .hero:has(.wheel.is-picking, .wheel-swap:focus-visible)::before { animation-play-state: paused; }
  @media (hover: hover) { .hero:has(.wheel-swap:hover)::before { animation-play-state: paused; } }
  .hero-copy, .hero-courses { transition: opacity 0.3s var(--ease-out); } /* back in after a short drag */
  .wheel > svg { animation: wheel-in 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; } /* USC's Power2.easeIn */
  .wheel > svg:nth-child(2) { animation-delay: 0.15s; }
  .wheel > svg:nth-child(3) { animation-delay: 0.3s; }
  .wheel > svg:nth-child(4) { animation-delay: 0.45s; }
  .hero-copy > * { animation: hero-rise 0.3s var(--ease-out) 0.75s both, hero-big 3.4s; }
  .hero-copy { animation: hero-swap 0.9s var(--ease-out) 3s backwards, hero-first 3.4s; } /* out in the middle, back in above the list */
  .hero-courses li { animation: hero-fade 0.3s var(--ease-out) calc(3.5s + var(--i) * 0.08s) both; }
}
@keyframes wheel-start { from { translate: calc(50cqw - var(--cx-q)) 0; opacity: 0.4; } } /* centred, dimmed so the title reads; translate, not left, so it is not a layout shift (CLS) */
@keyframes wheel-in { from { scale: 0; } }
@keyframes wheel-drift { to { transform: rotate(360deg); } }
@keyframes hero-rise { from { opacity: 0; translate: 0 50px; } }
@keyframes hero-first { from, to { align-self: stretch; justify-items: center; padding-inline: var(--pad); text-align: center; translate: none; } } /* centred over the whole hero */
@keyframes hero-big { from, to { font-size: var(--big); } }
@keyframes hero-swap { 44%, 55% { opacity: 0; } }
@keyframes hero-fade { from { opacity: 0; visibility: hidden; } } /* hidden, so Tab cannot reach a course before it shows */

/* ---------- Bands and section heads ---------- */
.band { padding-block: var(--band-pad); scroll-snap-align: center; scroll-margin-block: calc(-1 * var(--band-pad)); }
/* CAP: a pull that settles each band in the middle of the screen. The snap box is the band minus its padding so it fits the screen:
   a box taller than the screen never snaps. Not mandatory: that trapped the wheel at the hero and on /courses (16 Oct 2026).
   The page head and footer are snap points so a band near the top or end of a short page cannot hold the reader away from them */
.page-head { scroll-snap-align: start; }
.site-footer { scroll-snap-align: end; }
.band-tint { background: var(--paper-tint); }
.band-paper { background: var(--paper); }
.band-white { background: var(--paper-warm); }
.page-head, .site-footer { background-image: var(--grain); }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 32px; margin-bottom: clamp(28px, 2vw + 12px, 48px); }
.sec-title { font: 600 var(--title-size)/1 var(--font-heading); letter-spacing: -0.025em; }
.sec-title a { display: inline-flex; align-items: center; gap: 0.25em; color: inherit; text-decoration: none; transition: color var(--dur); }
.sec-title .ico { width: 0.6em; height: 0.6em; rotate: -45deg; opacity: 0; translate: -0.2em 0; transition: opacity var(--dur), translate var(--dur); }
.sec-title a:is(:hover, :focus-visible) { color: var(--accent-strong); }
.sec-title a:is(:hover, :focus-visible) .ico { opacity: 1; translate: 0 0; }
@media (hover: none) { .sec-title .ico { opacity: 1; translate: 0 0; } } /* no hover on a phone: the arrow says the title is a link */
.sec-link { margin-left: auto; margin-bottom: 0.4em; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; font-size: 0.9375rem; text-decoration: none; white-space: nowrap; }
.link-arrow .ico { transition: translate var(--dur); }
.link-arrow:hover .ico { translate: 3px 0; }
.link-arrow:hover { text-decoration: underline 1px var(--accent-strong); text-underline-offset: 5px; }
@media (max-width: 639px) { .sec-link { margin-left: 0; flex-basis: 100%; } }

/* ---------- Programs (CAP, 16 Oct 2026): two landscape cards per row like the faculty cards, the drawing on one half and the colour mark and name on the other; each wipes in its own colour. An odd last card sits centred ---------- */
.courses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.courses > li { display: grid; }
.courses-more { display: flex; justify-content: center; margin-top: 40px; }
@media (min-width: 640px) { .courses > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--grid-gap) / 2); } }
/* text on the wipe: white on dark course colours, black on light ones (OKLCH lightness 0.6 is the turn) */
:is(.course, .course-item) { --on-c: oklch(from var(--c) clamp(0, (0.6 - l) * 1000, 1) 0 0); }
.course { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 6px; border-radius: calc(var(--radius-media) + 6px); overflow: hidden; background: var(--paper); color: var(--ink); text-decoration: none; container-type: inline-size; transition: color 300ms; }
.course .ph { aspect-ratio: 3 / 2; border-radius: var(--radius-media); }
.course .ph-tag { display: none; }
.course-side { display: grid; grid-template: "bar go" auto "name name" 1fr / minmax(0, 1fr) auto; padding: 10px 10px 12px clamp(12px, 3cqw, 24px); }
.course .c-bar { grid-area: bar; align-self: center; }
.course .c-arrow { grid-area: go; }
/* sized to the card (cqw) so the longest name, CINEMATOGRAPHY, stays on one line in half a card */
.course .c-name { grid-area: name; align-self: end; font-size: clamp(0.9375rem, 4.2cqw, 1.75rem); }
.course::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c); clip-path: inset(0 100% 0 0); transition: clip-path 600ms var(--ease-out); }
.c-bar { display: block; width: 24px; height: 3px; background: var(--c); transition: background-color 300ms; }
.c-name { font: 600 clamp(1.5rem, 0.6rem + 2.6vw, 3.25rem)/1 var(--font-heading); letter-spacing: -0.02em; transition: translate 600ms var(--ease-out); }
.c-arrow { width: 30px; height: 30px; rotate: -45deg; transition: rotate 450ms var(--ease-out); }
.course:is(:hover, :focus-visible) { color: var(--on-c); }
.course:is(:hover, :focus-visible)::before { clip-path: inset(0); }
.course:is(:hover, :focus-visible) .c-bar { background: currentColor; }
.course:is(:hover, :focus-visible) .c-arrow { rotate: 0deg; }
@media (max-width: 639px) {
  .courses { grid-template-columns: minmax(0, 1fr); }
  .c-arrow { width: 22px; height: 22px; }
}
@media (max-width: 379px) {
  .course { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

/* Placeholders: a dark panel, a drawing, a clear label (until the school sends photos) */
.ph { --ph-bg: var(--ink-fill); position: relative; display: grid; place-items: center; overflow: hidden; background: var(--ph-bg); color: color-mix(in oklch, var(--brand) 80%, transparent); }
[data-theme="dark"] .ph { --ph-bg: color-mix(in srgb, var(--ink) 8%, var(--paper)); }
.ph > svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; }
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-tag { position: absolute; left: 10px; top: 10px; padding: 3px 8px; border-radius: 4px; background: rgb(11 11 12 / 0.72); color: var(--on-fill); font-size: 0.75rem; font-weight: 500; line-height: 1.4; }
.ph-portrait { aspect-ratio: 4 / 5; }
.ph-tile { aspect-ratio: 3 / 2; border-radius: var(--radius-media); }
.ph-course-art { background: var(--course-art-bg, transparent); }
.ph-course-art > img { object-fit: contain; }

/* Viewfinder corners (Clipzo sample): on the hero, photo frames and the line button */
.frame { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-media); }
.frame img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; } /* any upload keeps the band shape */
.frame-scope { --inset: clamp(10px, 1.4vw, 18px); position: relative; }
.frame-scope > .ph-tag { left: calc(var(--inset) + 10px); top: calc(var(--inset) + 8px); }
:is(.frame-scope, .hero)::after, .btn-line::before, .nav-list [aria-current="page"]::after { --k: var(--on-fill); --l: clamp(14px, 2vw, 24px); --t: 2px;
  content: ""; position: absolute; inset: var(--inset); pointer-events: none;
  background: linear-gradient(var(--k), var(--k)) left top / var(--l) var(--t), linear-gradient(var(--k), var(--k)) left top / var(--t) var(--l),
    linear-gradient(var(--k), var(--k)) right top / var(--l) var(--t), linear-gradient(var(--k), var(--k)) right top / var(--t) var(--l),
    linear-gradient(var(--k), var(--k)) left bottom / var(--l) var(--t), linear-gradient(var(--k), var(--k)) left bottom / var(--t) var(--l),
    linear-gradient(var(--k), var(--k)) right bottom / var(--l) var(--t), linear-gradient(var(--k), var(--k)) right bottom / var(--t) var(--l);
  background-repeat: no-repeat; }
.frame-scope::after { filter: drop-shadow(0 0 1px rgb(0 0 0 / 0.45)); }

/* ---------- About: full-width split with naturally equal-height image and copy panels ---------- */
#about { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); align-items: stretch; padding-block: 0; }
.about-photo { position: relative; width: 100%; min-width: 0; border-radius: 0; }
.about-photo img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; }
.about-text { display: grid; align-content: center; justify-items: start; gap: 18px; width: 100%; min-width: 0; padding: clamp(32px, 3.5vw, 64px); }
.about-text:only-child { grid-column: 1 / -1; }
.about-text .sec-title { margin-bottom: 8px; }
.about-body { max-width: 62ch; color: var(--ink-soft); text-align: justify; }
.about-text .about-body { width: 100%; max-width: none; text-align: start; }
.about-text .btn { margin-top: 8px; }
@media (max-width: 899px) {
  #about { grid-template-columns: minmax(0, 1fr); }
  .about-photo { height: clamp(180px, 40vw, 320px); }
  .about-text { padding: 32px var(--pad) 40px; }
}

/* ---------- Faculty (CAP's team sample 3, reworked 16 Oct 2026): white cards, the whole square portrait, the name under it ---------- */
#faculty { --band-pad: clamp(40px, 2vw + 16px, 56px); } /* CAP: less air above and below this band */
.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
.people > li { display: grid; } /* cards in a row share one height when a course line wraps */
.person { position: relative; display: grid; align-content: start; padding: 6px; border-radius: calc(var(--radius-media) + 6px); background: var(--paper-warm); color: var(--ink); text-decoration: none; container-type: inline-size; }
.person .ph { aspect-ratio: 1; border-radius: var(--radius-media); }
.person .ph-tag { display: none; } /* CAP: no tags on the faculty photos */
.person .ph > img { object-position: 50% 30%; transition: scale 1200ms var(--ease-film); }
.person:is(:hover, :focus-visible) .ph > img { scale: 1.04; }
.person-label { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 10px 4px 4px 6px; }
/* the panel sits on the label's top edge and grows up over the photo: 100cqw is the photo's height, since the photo is square and as wide as the card's inside */
.person-more { position: absolute; inset: auto 0 100%; height: 0; overflow: hidden; border-radius: var(--radius-media) var(--radius-media) 0 0; background: var(--paper-warm); transition: height 650ms var(--ease-film); }
/* never a scroll box: Chrome makes scroll boxes Tab stops, and focus would drop to the page when the card closes; a too long description fades at the foot */
.person-more p { height: 100cqw; padding: 12px 6px 0; overflow: hidden; color: var(--ink-soft); font: 400 0.875rem/1.5 var(--font-body); opacity: 0; transition: opacity 250ms var(--ease-film); mask-image: linear-gradient(#000 calc(100% - 1.5em), transparent); }
.person:is(:hover, :focus-visible, .is-open) .person-more { height: 100cqw; }
.person:is(:hover, :focus-visible, .is-open) .person-more p { opacity: 1; transition-delay: 250ms; }
.person-name { grid-column: 1; font: 600 1.0625rem/1.25 var(--font-heading); }
.person .cmark { grid-column: 1; margin-top: 2px; color: var(--ink-muted); font: 400 0.8125rem/1.35 var(--font-body); letter-spacing: 0; text-transform: none; }
.person-go { grid-area: 1 / 2 / 3 / 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-media); background: var(--ink); color: var(--paper-warm); transition: background-color var(--dur), color var(--dur); }
.person-go .ico { rotate: -45deg; }
.person:is(:hover, :focus-visible) .person-go { background: var(--gold); color: var(--ink-fill); }
@media (max-width: 1023px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .person { padding: 4px; border-radius: calc(var(--radius-media) + 4px); } .person-label { padding: 7px 4px 3px; } .person-more p { padding: 8px 4px 0; font-size: 0.75rem; line-height: 1.45; } .person-name { font-size: 0.9375rem; } .person .cmark { font-size: 0.75rem; } .person-go { display: none; } }

/* ---------- Facilities: a row of stills ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 3vw, 56px) var(--grid-gap); }
.tile { display: grid; align-content: start; color: var(--ink); text-decoration: none; }
.tile .meta { margin-top: 18px; color: var(--ink-muted); }
.tile-title { margin-top: 8px; font: 600 var(--card-title-size)/1.2 var(--font-heading); text-wrap: pretty; }
.tile .ph + .tile-title { margin-top: 18px; }
.tile-text { margin-top: 8px; color: var(--ink-soft); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 500 0.75rem/1.4 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.meta > span::before { content: "·"; margin-right: 10px; }
.tile .ph > img { transition: scale 1400ms var(--ease-film); }
a.tile:is(:hover, :focus-visible) .ph > img { scale: 1.05; }
a.tile:hover .tile-title { text-decoration: underline 1px; text-underline-offset: 6px; }
@media (max-width: 899px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .tiles { grid-template-columns: minmax(0, 1fr); } }

/* News cards (CAP's Nexus sample, 16 Oct 2026): a soft grey card with the photo set inside it, dark on hover */
.stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.story { --pad: 6px; display: flex; flex-direction: column; height: 100%; padding: var(--pad); border-radius: calc(var(--radius-media) + var(--pad)); background: var(--paper); color: var(--ink); text-decoration: none; transition: background-color 500ms var(--ease-film), color 500ms var(--ease-film); }
.story-pic { position: relative; }
.story-kind { position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--gold); color: var(--ink-fill); font: 500 0.75rem/1.3 var(--font-body); }
.story .ph-tag { top: auto; bottom: 10px; }
.story-copy { padding: clamp(14px, 1.2vw, 20px) clamp(10px, 1vw, 16px) clamp(12px, 1vw, 16px); }
.story .meta { color: var(--ink-muted); }
.story-title { margin-top: 8px; font: 600 var(--card-title-size)/1.22 var(--font-heading); text-wrap: pretty; }
.story-text { display: -webkit-box; margin-top: 8px; overflow: hidden; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.story .ph > img { transition: scale 1400ms var(--ease-film); }
.story:is(:hover, :focus-visible) { background: var(--ink); color: var(--paper-warm); }
.story:is(:hover, :focus-visible) :is(.meta, .story-text) { color: color-mix(in oklch, var(--paper-warm) 74%, transparent); }
.story:is(:hover, :focus-visible) .ph > img { scale: 1.05; }
/* phones and tablets: each card is a row, photo left and text right, so three stories fit one screen */
@media (max-width: 899px) {
  .stories { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .story { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); align-items: center; }
  .story-copy { padding: 6px 8px 6px clamp(12px, 3vw, 20px); }
}
@media (max-width: 559px) { .story-text { display: none; } .story-copy .meta + .story-title { margin-top: 4px; } .story-title { font-size: 1.0625rem; } .story-kind { left: 6px; top: 6px; padding: 2px 8px; font-size: 0.6875rem; } .story .ph-tag { left: 6px; bottom: 6px; padding: 2px 6px; font-size: 0.6875rem; } }

/* ---------- Alumni: a 35mm strip across the full width that runs on its own ----------
   Eight sprocket holes per frame keep the perforations aligned at the loop boundary. */
.reel { --step: 260px; --gap: 12px; overflow: hidden; background: var(--paper);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.reel-track { --holes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='10'%3E%3Crect x='7' width='14' height='10' rx='2.5' fill='%23918D83'/%3E%3C/svg%3E");
  display: flex; width: max-content; padding-block: 42px 36px;
  background: var(--holes) 0 16px / calc(var(--step) / 8) 10px repeat-x, var(--holes) 0 calc(100% - 16px) / calc(var(--step) / 8) 10px repeat-x, var(--grain);
  animation: reel calc(var(--n, 5) * 9s) linear infinite; }
@keyframes reel { to { translate: calc(-1 * var(--step) * var(--n, 5)) 0; } }
.reel:is(:hover, :focus-within, .is-paused) .reel-track { animation-play-state: paused; }
.reel-list { display: flex; flex: none; }
.reel-frame { flex: none; width: calc(var(--step) - var(--gap)); margin-right: var(--gap); }
.reel-frame.person { background: #1A1A1C; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.reel-frame .person-name { color: var(--ink); }
.reel-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.reel-toggle { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--ink-soft); font: 500 0.75rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.js .reel-toggle { display: inline-flex; }
.reel-toggle:hover { color: var(--ink); }
.reel-ico { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.reel.is-paused + .reel-foot .reel-ico { width: 0; border-inline: 10px solid currentColor 0; border-block: 6px solid transparent; border-right: 0; }
@media (max-width: 639px) { .reel { --step: 188px; --gap: 10px; } .reel-track { padding-block: 40px 34px; } }

/* ---------- Footer ---------- */
.site-footer { overflow: clip; }
.enroll-banner { padding-block: clamp(40px, 4.5vw, 72px); background: #18343A; color: var(--ink); border-top: 1px solid rgb(255 255 255 / 0.1); scroll-snap-align: center; }
.closing { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(200px, 1fr); align-items: center; gap: clamp(32px, 4vw, 64px); }
.closing-copy { display: grid; justify-items: start; gap: 20px; }
.closing-art { display: grid; place-items: center; min-height: 260px; }
.closing .closing-actions { margin-top: 8px; }
/* The projector lights up, its lamp flickering, when the band comes in, and runs faster with a brighter beam while a hand is over the band or a
   button in it has focus (CAP, 17 Oct 2026: more interactive). The SVG includes the whole light cone, so its fading end is never clipped by the column. */
.projector { width: 100%; max-width: 560px; overflow: visible; }
.pj-beam { opacity: 0.8; transition: opacity 400ms var(--ease-out); }
.closing:is(:hover, :focus-within) .pj-beam { opacity: 1; }
.pj-reel, .pj-spin { transform-box: fill-box; transform-origin: center; animation: projector-reel-turn 18s linear infinite; }
.pj-reel-b { animation-duration: 14s; }
.pj-spin { animation-duration: 2.5s; animation-play-state: paused; } /* on top of the slow turn, so a hover speeds it up without a jump */
.closing:is(:hover, :focus-within) .pj-spin { animation-play-state: running; }
@media (prefers-reduced-motion: no-preference) { .is-in :is(.pj-beam, .pj-glow) { animation: projector-on 0.9s 0.5s backwards; } }
@keyframes projector-reel-turn { to { rotate: 360deg; } }
@keyframes projector-on { from { opacity: 0; } 20% { opacity: 0.9; } 30% { opacity: 0.1; } 45% { opacity: 1; } 60% { opacity: 0.35; } }
@media (max-width: 899px) { .closing { grid-template-columns: minmax(0, 1fr); } .closing-art { display: none; } }
.closing-title { max-width: 20ch; font: 600 var(--title-size)/1.04 var(--font-heading); letter-spacing: -0.025em; }
.closing-lede { max-width: 48ch; color: var(--ink-soft); font-size: clamp(1rem, 0.9rem + 0.3vw, 1.1875rem); line-height: 1.5; }
.closing-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 2fr) minmax(0, 0.7fr); gap: 40px var(--grid-gap); padding-block: 56px 48px; }
.footer-brand .brand { display: inline-block; margin-bottom: 22px; transition: opacity var(--dur); }
.footer-brand .brand:is(:hover, :focus-visible) { opacity: 0.7; }
.footer-brand img { display: block; width: auto; height: 52px; }
.footer-head a { color: inherit; text-decoration: none; }
.footer-programs ul { display: grid; grid-template-columns: minmax(0, auto) minmax(0, auto); grid-template-rows: repeat(6, auto); grid-auto-flow: column; column-gap: clamp(16px, 2vw, 32px); justify-content: start; } /* the school's two columns: the six, then the five */
.footer-line { display: flex; align-items: flex-start; gap: 10px; max-width: 34ch; margin-top: 10px; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.5; }
.footer-line .ico { margin-top: 2px; color: var(--accent-strong); }
.footer-map { display: block; width: 100%; max-width: 270px; height: 120px; margin-top: 14px; border: 0; border-radius: calc(var(--radius-media) + 6px); filter: invert(0.9) hue-rotate(180deg); } /* a dark map for the dark footer; the hue turn keeps the pin red */
.footer-line a { text-decoration: none; overflow-wrap: anywhere; }
.footer-line a:hover, .footer-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.footer-head { margin-bottom: 14px; color: var(--ink); font: 600 1rem/1.3 var(--font-body); }
.footer-col li a { display: inline-block; padding-block: 10px; color: var(--ink-soft); font-size: 0.9375rem; text-decoration: none; }
.footer-col .socials a { display: grid; padding: 0; }
.footer-base { padding-block: 20px 28px; border-top: 1px solid var(--rule); color: var(--ink-muted); font-size: 0.875rem; text-align: center; }
@media (max-width: 899px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand, .footer-programs { grid-column: 1 / -1; } .footer-programs { order: 1; } }

/* ---------- Buttons: monochrome pill with a swapping arrow chip (Windora), corner-bracket line button (Clipzo) ---------- */
.btn { height: 52px; padding: 0 26px; font: 600 0.9375rem/1 var(--font-body); letter-spacing: 0.01em; transition: background-color 300ms var(--ease-out), color 300ms, scale 150ms; }
.btn:active:not(:disabled) { scale: 0.98; }
.btn-primary { gap: 16px; padding: 0 6px 0 24px; }
/* monochrome at rest (ivory on dark bands, black on light), the logo's gold on hover */
.btn.btn-primary:hover:not(:disabled, [aria-busy="true"]) { background: var(--gold); color: #0B0B0C; }
.btn-primary:hover .btn-chip { background: #0B0B0C; color: var(--gold); }
.btn-chip { display: grid; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: var(--on-accent); color: var(--accent); transition: background-color 300ms var(--ease-out), color 300ms; }
.btn-chip .ico { grid-area: 1 / 1; place-self: center; width: 18px; height: 18px; rotate: -45deg; transition: translate 450ms var(--ease-out); }
.btn-chip .ico + .ico { translate: -160% 160%; }
.btn-primary:is(:hover, :focus-visible) .btn-chip .ico:first-child { translate: 160% -160%; }
.btn-primary:is(:hover, :focus-visible) .btn-chip .ico + .ico { translate: 0; }
/* CAP, 17 Oct 2026: smaller in the header; the pill is 36px, its tap area stays 44px tall */
.header-enroll { position: relative; height: 36px; padding: 0 4px 0 16px; gap: 10px; font-size: 0.875rem; }
.header-enroll::after { content: ""; position: absolute; inset: -4px 0; }
.header-enroll .btn-chip { width: 28px; height: 28px; }
.header-enroll .btn-chip .ico { width: 14px; height: 14px; }
.btn-line { --_bg: transparent; --inset: 0px; position: relative; border-radius: 0; box-shadow: none; }
.btn-line::before { --k: currentColor; --l: 11px; --t: 1.5px; transition: inset 450ms var(--ease-out); }
.btn-line:is(:hover, :focus-visible)::before { --inset: 5px; }

/* ---------- Inner pages: one dark head, then light bands ---------- */
/* The same head on every page (CAP, 17 Oct 2026): the title and its line on the left, the page's 3:2 picture in the right quarter,
   the empty first and last rows centring the text against it. Kept short (CAP: too much space above and below): the picture is about the text's
   height, no longer a square that held the band open. Under 900px the title runs full width and the picture sits beside the line */
.page-head { --ts: clamp(3rem, 1rem + 6vw, 7rem); padding-block: clamp(32px, 2vw + 24px, 64px); }
.page-head .wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". pic" "title pic" "intro pic" ". pic"; column-gap: clamp(32px, 5vw, 96px); }
.ph-head { grid-area: pic; align-self: center; aspect-ratio: 3 / 2; border-radius: var(--radius-media); }
.page-title { grid-area: title; font: 600 var(--ts)/1 var(--font-heading); letter-spacing: -0.03em; }
.page-intro { grid-area: intro; max-width: calc(var(--ts) * 6.88); margin-top: clamp(20px, 2vw, 32px); color: var(--ink-soft); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.45; text-wrap: pretty; min-height: 2lh; } /* two lines held, so a one-line intro keeps the head the others' height (CAP, 17 Oct 2026: About Us was taller); every page's line wraps at one width, the widest title's (CAP: one text box for all)
   shortcut: 6.88 title-ems is "MLS Showcase", the widest menu label today; re-measure if the labels change (a hidden sizer of all seven titles would track them) */
@media (max-width: 899px) { .page-head .wrap { grid-template-columns: minmax(0, 1fr) clamp(88px, 24vw, 180px); grid-template-rows: auto auto; grid-template-areas: "title title" "intro pic"; gap: 20px 16px; align-items: center; } .page-intro { min-height: 0; margin-top: 0; } }
/* A program's, story's or film's own page: a smaller title (headlines are long), its picture large on a phone; a drawing keeps its square */
.page-head-own { --ts: clamp(2.25rem, 1rem + 4vw, 5rem); }
.page-head-own .page-intro { max-width: none; }
.page-head-program .ph-head { aspect-ratio: 1; }
@media (max-width: 899px) {
  .page-head-own .wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "title" "intro" "pic"; }
  .page-head-program .ph-head { justify-self: start; width: min(100%, 320px); }
}
.course-list { border-top: 1px solid var(--rule-heavy); }
.course-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px clamp(20px, 2vw, 32px); align-items: start; padding-block: clamp(24px, 2.4vw, 36px); border-bottom: 1px solid var(--rule-heavy); scroll-margin-top: calc(var(--header-h) + 16px); }
.course-item .c-bar { margin-top: 0.75em; }
.course-name a { color: inherit; text-decoration: none; transition: color var(--dur); }
.course-name a:hover { color: var(--accent-strong); }
.course-item .link-arrow { grid-column: 2; justify-self: start; }
.course-item:not(:has(.ph)) .course-copy { grid-column: 2 / -1; }
.course-name { font: 600 var(--subtitle-size)/1 var(--font-heading); letter-spacing: -0.02em; }
.course-sum { max-width: 62ch; margin-top: 16px; color: var(--ink-soft); text-align: justify; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(36px, 3vw, 56px) var(--grid-gap); }
.step { padding-top: 24px; border-top: 1px solid var(--rule-heavy); }
.step-no { display: block; color: var(--accent-strong); font: 500 clamp(2.5rem, 1.5rem + 3vw, 4.5rem)/1 var(--font-heading); }
.step-title { margin-top: 20px; font: 600 var(--card-title-size)/1.2 var(--font-heading); }
.step-text { max-width: 40ch; margin-top: 8px; color: var(--ink-soft); }
.enroll-contact { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px clamp(32px, 6vw, 120px); align-items: start; }
.enroll-contact .closing-actions { margin-top: 32px; }
.enroll-contact .footer-line { margin-top: 24px; }
.enroll-courses { border-top: 1px solid var(--rule-heavy); }
.enroll-courses a { display: flex; align-items: center; gap: 14px; min-height: 64px; border-bottom: 1px solid var(--rule-heavy); color: var(--ink); font: 500 var(--step-2)/1.2 var(--font-heading); text-decoration: none; }
.enroll-courses .ico { margin-left: auto; rotate: -45deg; transition: rotate var(--dur) var(--ease-out); }
.enroll-courses a:hover .ico { rotate: 0deg; }
/* About page (CAP, 17 Oct 2026): text left at a reading width, the photo right, cut square (about the text's height on a laptop); stacked on phones */
.about-page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 3vw + 16px, 64px) clamp(32px, 6vw, 120px); align-items: start; }
.about-copy { display: grid; gap: 20px; }
.about-page .about-body { text-align: start; }
@media (min-width: 900px) { /* the photo takes its height from the text beside it (a floor keeps it a picture if the text is short) */
  .about-page { align-items: stretch; }
  .about-page .frame { min-height: 280px; }
  .about-page .frame img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}
@media (max-width: 899px) { .about-page { grid-template-columns: minmax(0, 1fr); } .about-page .frame img { aspect-ratio: 16 / 9; } }
/* A program's, story's or film's own page */
.post { display: grid; justify-items: start; gap: 20px; }
.post .about-body { text-align: start; }
.post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 12px; }
/* A program's own page: description and facts, then the bands below */
.program-intro { display: grid; gap: 40px clamp(32px, 5vw, 80px); align-items: start; }
.program-copy .about-body { margin-top: 20px; text-align: start; }
.program-copy .sec-title + .about-body { margin-top: clamp(24px, 3vw, 40px); }
.program-card { padding: clamp(20px, 2vw, 28px); border: 1px solid var(--rule); border-top: 3px solid var(--c); border-radius: var(--radius-media); background: var(--paper); }
.program-card dl > div { display: flex; justify-content: space-between; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--rule); }
.program-card dt { color: var(--ink-soft); }
.program-card dd { color: var(--ink); font-weight: 500; text-align: end; }
.program-card .post-actions { margin-top: 24px; }
.program-band .sec-title { margin-bottom: clamp(24px, 3vw, 40px); }
.program-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--grid-gap); }
.program-topics li { padding: 20px; border: 1px solid var(--rule); border-radius: var(--radius-media); background: var(--paper); }
.program-topics h3 { font: 600 var(--card-title-size)/1.2 var(--font-heading); }
.program-topics p { margin-top: 8px; color: var(--ink-soft); }
.program-others a { font-size: 1.0625rem; min-height: 56px; }
.program-all { margin-top: 24px; }
@media (min-width: 900px) { .program-intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .program-others { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gap); } }
.placeholder { color: var(--ink-muted); }
@media (max-width: 899px) { .enroll-contact { grid-template-columns: minmax(0, 1fr); } }
.course-item .ph { grid-column: 1 / -1; }
@media (min-width: 900px) { .course-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); } .course-item { grid-template-rows: 1fr auto auto; } }

/* ---------- Search ---------- */
.search { width: min(36rem, calc(100% - 32px)); margin-top: 12vh; padding: 0; overflow: hidden; }
.search-form { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-bottom: 1px solid var(--rule); }
.search-form:focus-within { box-shadow: inset 0 -2px 0 var(--accent-strong); }
.search-form > .ico { width: 20px; height: 20px; color: var(--ink-muted); }
.search-input { flex: 1; min-width: 0; height: 48px; border: 0; background: none; color: var(--ink); font: 400 1.0625rem var(--font-body); outline: none; }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.search-results { max-height: min(52vh, 440px); overflow-y: auto; padding: 8px; }
.search-results a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.search-results a:hover, .search-results a:focus-visible { background: color-mix(in oklch, var(--ink) 6%, transparent); }
.search-results span { color: var(--ink-muted); font-size: 0.8125rem; }
.search-empty { padding: 20px 20px 24px; color: var(--ink-muted); }

/* ---------- One reveal rule: once, on first view ---------- */
.js [data-reveal] { transition: opacity 1000ms var(--ease-film), translate 1000ms var(--ease-film); }
.js [data-reveal]:not(.is-in) { opacity: 0; translate: 0 28px; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal]:not(.is-in) { translate: none; }
  .js [data-reveal] { transition-duration: 300ms; }
  .mmenu { animation: none; transition: none; }
  .btn-chip .ico, .btn-line::before, .course, .course::before, .c-name, .c-arrow, .ph > img, .story, .person-more, .person-more p { transition: none; }
  .rec::before, .pj-reel, .pj-spin, .pj-beam { animation: none; }
  /* the alumni strip stands still: one copy, frames wrapped */
  .reel { mask-image: none; }
  .reel-track { width: auto; animation: none; }
  .reel-list { flex: 1; min-width: 0; flex-wrap: wrap; justify-content: center; row-gap: 48px; }
  .reel-list[aria-hidden] { display: none; }
  .js .reel-toggle { display: none; }
}