/* 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).
   Direction and samples: docs/DESIGN_BRIEF.md. 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(2.5rem, 1.2rem + 3.6vw, 4.75rem);
  --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, .nav-sub-btn { 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, .nav-sub-btn:hover, .nav-sub-btn[aria-expanded="true"] { color: var(--ink); }
.nav-list > li > a[aria-current="page"] { color: var(--ink); }
/* the gold underline overlaps the header's bottom line by 1px, so it sits on it at any zoom */
.nav-list > li > a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--gold); }
.nav-sub-btn .ico { width: 14px; height: 14px; transition: rotate var(--dur); }
.nav-sub-btn[aria-expanded="true"] .ico { rotate: 180deg; }
.has-sub { position: relative; }
.nav-sub { position: absolute; top: calc(100% + 1px); left: 0; min-width: 220px; padding: 8px; border-radius: var(--radius-item); background: var(--paper-warm); box-shadow: var(--edge), var(--shadow-lg);
  visibility: hidden; opacity: 0; translate: 0 6px; transition: opacity var(--dur), translate var(--dur), visibility var(--dur); }
.nav-sub-btn[aria-expanded="true"] + .nav-sub { visibility: visible; opacity: 1; translate: 0; }
@media (hover: hover) { .has-sub:hover .nav-sub { visibility: visible; opacity: 1; translate: 0; } }
.nav-sub a { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 6px; color: var(--ink-soft); font-size: 0.9375rem; text-decoration: none; }
.nav-sub a:hover { background: color-mix(in oklch, var(--ink) 7%, transparent); color: var(--ink); }

.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: accordion rows (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-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); }
.mm-row .ico { width: 18px; height: 18px; color: var(--ink-muted); transition: rotate var(--dur); }
.mm-row[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.mm-row[aria-expanded="true"] .ico { rotate: 180deg; color: currentColor; }
.mm-sub { background: color-mix(in srgb, var(--ink) 4%, var(--paper)); }
.mm-sub a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 var(--pad) 0 calc(var(--pad) + 20px); border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: 1rem; text-decoration: none; }
.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-mono); 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 the school's mockup and the old cinema.usc.edu (Rafi, 16 Oct 2026; the centred, fast-turning wheel was hypnotic):
   black on the left with the title and the courses, the photo wheel off to the right and cut by the edges, each course's ring on an arc
   around the wheel. All sizes are in --u so the rings stay on the arc at every width ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-height: calc(100svh - var(--header-h)); background: var(--ink-fill); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain); }
.hero-copy { display: grid; justify-items: start; gap: clamp(10px, 1.6vh, 18px); padding-top: clamp(28px, 6vh, 64px); }
.hero-title { max-width: 13em; font: 500 clamp(2.25rem, 0.4rem + 9vw, 4rem)/1.04 var(--font-heading); letter-spacing: 0.06em; text-transform: uppercase; text-wrap: balance; }
.hero-title em { font-style: normal; color: var(--highlight); white-space: nowrap; }
.hero-lede { max-width: 32em; color: var(--ink-soft); font-size: clamp(1.0625rem, 0.9rem + 0.5vw, 1.375rem); line-height: 1.5; text-wrap: balance; }
/* wheel radius --r, ring arc --rc and row height --h in --u; the wheel's centre sits --cx across */
.hero-stage { --u: min(1vw, (100svh - var(--header-h)) * 0.02); --r: 40; --rc: 50; --h: 4; --cx: 80%; position: relative; display: grid; align-content: center; padding-block: 12px; }
.wheel { position: absolute; z-index: -2; 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 > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.wheel-accent { opacity: 0.6; }
.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) + 11px); padding-left: var(--pad); }
/* 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(--rc) - sqrt(var(--rc) * var(--rc) - pow((var(--i) - (var(--n) - 1) / 2) * var(--h), 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); }
.hero-courses a::after { content: ""; flex: none; width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 50%; transition: background-color 300ms var(--ease-out), border-color 300ms var(--ease-out); }
.hero-courses a:is(:hover, :focus-visible) { color: var(--ink); }
.hero-courses a:is(:hover, :focus-visible)::after { border-color: var(--c); background: var(--c); }
@media (min-width: 900px) {
  .hero-title { font-size: clamp(2.5rem, 1rem + 3vw, 4rem); }
  .hero-lede { max-width: min(32em, 40vw); }
}
/* phones and tablets: a slice of the wheel at the right edge, cut at the top and bottom of the course list */
@media (max-width: 899px) { .hero-stage { --u: 1vw; --r: 75; --rc: 83; --h: 12; --cx: calc(100% + 28vw); overflow: hidden; } }
@media (prefers-reduced-motion: no-preference) {
  .wheel { animation: wheel-turn 240s linear infinite; } /* one turn in four minutes: it drifts, it does not spin */
  .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 > *, .hero-courses li { animation: hero-rise 0.3s var(--ease-out) 0.75s both; }
  .hero-copy > :nth-child(2) { animation-delay: 0.9s; }
  .hero-courses li { animation-name: hero-fade; animation-delay: calc(0.9s + var(--i) * 0.08s); }
}
@keyframes wheel-turn { to { rotate: 1turn; } }
@keyframes wheel-in { from { scale: 0; } }
@keyframes hero-rise { from { opacity: 0; translate: 0 50px; } }
@keyframes hero-fade { from { opacity: 0; } }

/* ---------- Bands and section heads ---------- */
.band { padding-block: var(--band-pad); scroll-snap-align: center; scroll-margin-block: calc(-1 * var(--band-pad)); }
/* Rafi: 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); }
#about, .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: 500 var(--title-size)/0.92 var(--font-heading); letter-spacing: -0.025em; text-transform: uppercase; }
.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%; } }

/* ---------- Courses (Rafi, 16 Oct 2026): two landscape cards per row like the faculty cards, the course photo on one half and the number and name on the other; each wipes in its own colour ---------- */
.courses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.courses > li { display: grid; }
/* 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: "num go" auto "name name" 1fr / minmax(0, 1fr) auto; padding: 10px 10px 12px clamp(12px, 3cqw, 24px); }
.course .c-num { grid-area: num; margin: 0; }
.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-num { display: grid; align-content: start; justify-items: start; gap: 9px; width: 48px; min-height: 48px; margin-right: clamp(0px, 3vw, 40px); color: inherit; font: 500 1.375rem/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.05em; }
.c-num::after { content: ""; width: 24px; height: 3px; background: var(--c); transition: background-color 300ms; }
.c-name { font: 500 clamp(1.5rem, 0.6rem + 2.6vw, 3.25rem)/1 var(--font-heading); letter-spacing: -0.02em; text-transform: uppercase; 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-num::after { background: currentColor; }
.course:is(:hover, :focus-visible) .c-arrow { rotate: 0deg; }
@media (max-width: 639px) {
  .courses { grid-template-columns: minmax(0, 1fr); }
  .c-num { width: 36px; min-height: 36px; gap: 7px; font-size: 1.125rem; }
  .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-feature { aspect-ratio: 21 / 9; }
.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 { --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: repeat(2, minmax(0, 1fr)); 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; font-size: clamp(2.5rem, 3.8vw, 4rem); }
.about-body { max-width: 62ch; color: var(--ink-soft); text-align: justify; }
.about-text .about-body { width: 100%; max-width: none; text-align: start; font-size: 1rem; line-height: 1.6; }
.about-text .about-body:first-of-type { color: var(--ink); font-size: clamp(1.125rem, 1rem + 0.25vw, 1.3125rem); line-height: 1.5; } /* the first paragraph as a standfirst */
.about-text .btn { margin-top: 8px; }
@media (max-width: 899px) {
  #about { grid-template-columns: minmax(0, 1fr); }
  .about-photo { height: clamp(220px, 50vw, 400px); }
  .about-text { padding: 32px var(--pad) 40px; }
}

/* ---------- Faculty (Rafi'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); } /* Rafi: 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; } /* Rafi: 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: 500 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); }
/* black and white portraits that turn to colour (Clipzo's portrait strip), on the alumni strip */
.reel-frame .ph > img { filter: grayscale(1); transition: filter 900ms var(--ease-film), scale 1200ms var(--ease-film); }
.reel-frame:hover .ph > img { filter: none; scale: 1.04; }
@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; } }

/* ---------- News & Media, Showcase: one large still with its title over it, then a row of stills ---------- */
.news { display: grid; gap: 28px; }
/* the other stories sit beside the lead as rows, so the whole block fits one screen */
.news .tiles { grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); }
.news .tile { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: clamp(16px, 1.5vw, 24px); }
.news .tile .ph { grid-area: 1 / 1 / -1 / 2; }
.news .tile .meta { grid-area: 2 / 2; margin-top: 0; }
.news .tile-title { grid-area: 3 / 2; margin-top: 8px; }
@media (min-width: 900px) {
  .news { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--grid-gap); }
  .news .ph-feature { aspect-ratio: auto; height: 100%; min-height: 420px; }
}
.feature { position: relative; isolation: isolate; display: block; overflow: hidden; border-radius: var(--radius-media); color: #F2F0EA; text-decoration: none; }
.feature-over { position: absolute; inset: auto 0 0; display: grid; justify-items: start; gap: 14px; padding: 18% clamp(20px, 3vw, 56px) clamp(22px, 3vw, 52px); background: linear-gradient(rgb(11 11 12 / 0), rgb(11 11 12 / 0.9)); }
.feature .meta { color: var(--gold); }
.feature-title { max-width: 20ch; font: 500 clamp(1.5rem, 0.8rem + 1.9vw, 3rem)/1.04 var(--font-heading); letter-spacing: -0.02em; text-wrap: balance; }
.feature-text { max-width: 56ch; color: rgb(242 240 234 / 0.82); }
.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: 500 clamp(1.1875rem, 1rem + 0.5vw, 1.5rem)/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-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.meta > span::before { content: "·"; margin-right: 10px; }
:is(.feature, .tile) .ph > img { transition: scale 1400ms var(--ease-film); }
:is(.feature, a.tile):is(:hover, :focus-visible) .ph > img { scale: 1.05; }
:is(.feature, a.tile):hover :is(.feature-title, .tile-title) { text-decoration: underline 1px; text-underline-offset: 6px; }
@media (max-width: 899px) { .tiles:not(.news .tiles) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .tiles { grid-template-columns: minmax(0, 1fr); } .ph-feature { aspect-ratio: 4 / 3; } .feature-over { padding-top: 24%; } }

/* News cards (Rafi'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: 500 clamp(1.125rem, 1rem + 0.4vw, 1.375rem)/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: 1rem; } .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 ----------
   Each frame plus its gap is a multiple of the 28px hole pitch, so the loop never jumps. */
.reel { --step: 228px; --gap: 24px; overflow: hidden; background: var(--paper);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, 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='%23F2F2F0'/%3E%3C/svg%3E");
  display: flex; width: max-content; padding-block: 42px 36px;
  background: var(--holes) 0 16px / 28px 10px repeat-x, var(--holes) 0 calc(100% - 16px) / 28px 10px repeat-x, var(--grain);
  animation: reel calc(var(--n, 5) * 9s) linear infinite; }
@keyframes reel { to { translate: -50% 0; } }
.reel:is(:hover, :focus-within, .is-paused) .reel-track { animation-play-state: paused; }
.reel-list { display: flex; }
.reel-frame { flex: none; width: calc(var(--step) - var(--gap)); margin-right: var(--gap); }
.reel-no { display: block; margin-bottom: 10px; color: var(--gold); font: 500 0.6875rem/1 var(--font-mono); letter-spacing: 0.14em; }
.reel-frame .ph { border-radius: 2px; }
.reel-name { margin-top: 16px; color: var(--ink); font: 500 var(--step-1)/1.2 var(--font-heading); }
.reel .cmark { margin-top: 6px; }
.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-mono); 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: 176px; } .reel-track { padding-block: 40px 34px; } }

/* ---------- Footer ---------- */
.site-footer { padding-top: var(--band-pad); overflow: clip; }
.closing { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy pj" "actions pj"; align-items: end; gap: 32px clamp(32px, 5vw, 96px); padding-bottom: var(--band-pad); border-bottom: 1px solid var(--rule); }
.closing-copy { grid-area: copy; }
/* the projector: line drawing, reels turning slowly, its beam (drawn past the drawing's left edge) lighting the title */
.projector { grid-area: pj; align-self: center; width: clamp(150px, 15vw, 260px); overflow: visible; fill: none; stroke: color-mix(in oklch, var(--ink) 55%, transparent); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.projector * { vector-effect: non-scaling-stroke; }
.pj-beam { stroke: none; animation: flicker 6s ease-in-out infinite; }
.pj-lens { stroke: var(--gold); }
.pj-reel { transform-box: fill-box; transform-origin: center; animation: spin 18s linear infinite; }
.pj-reel-b { animation-duration: 13s; }
@keyframes spin { to { rotate: 360deg; } }
@keyframes flicker { 50% { opacity: 0.78; } }
@media (max-width: 639px) { .closing { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pj" "copy" "actions"; } .projector { width: 120px; justify-self: end; } }
.closing-title { max-width: 16ch; font: 500 clamp(2.25rem, 1.2rem + 3.4vw, 5rem)/0.92 var(--font-heading); letter-spacing: -0.025em; text-transform: uppercase; }
.closing-lede { margin-top: 20px; color: var(--ink-soft); font-size: 1.1875rem; }
.closing-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 12px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px var(--grid-gap); padding-block: 56px 48px; }
.footer-brand img { width: auto; height: 52px; margin-bottom: 22px; }
.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-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: 500 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; }
@media (max-width: 899px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 639px) { .footer-col:last-child { grid-column: 1 / -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; }
.header-enroll { height: 44px; padding-left: 18px; gap: 12px; }
.header-enroll .btn-chip { width: 32px; height: 32px; }
.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 ---------- */
.page-head { padding-block: clamp(48px, 4vw + 16px, 104px) clamp(40px, 3vw + 12px, 72px); }
.page-title { font: 500 clamp(2.75rem, 1rem + 6vw, 7rem)/0.88 var(--font-heading); letter-spacing: -0.03em; text-transform: uppercase; text-wrap: balance; }
.page-intro { max-width: 36ch; margin-top: clamp(20px, 2vw, 32px); color: var(--ink-soft); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.45; }
.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-num { margin: 0; }
.course-item:not(:has(.ph)) .course-copy { grid-column: 2 / -1; }
.course-name { font: 500 clamp(1.75rem, 1rem + 2.2vw, 3rem)/0.95 var(--font-heading); letter-spacing: -0.02em; text-transform: uppercase; }
.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: 500 var(--step-2)/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 { display: grid; gap: 20px; }
.about-page .about-body { width: 100%; max-width: none; text-align: start; }
.about-page + .frame { margin-top: clamp(32px, 3vw + 16px, 64px); }
.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); } }

/* ---------- 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, .nav-sub { 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-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-wrap: wrap; justify-content: center; row-gap: 48px; }
  .reel-list[aria-hidden] { display: none; }
  .js .reel-toggle { display: none; }
}