:root{
  /* Sampled from the District reference: black, bone, concrete, antique gold. */
  --bg:#040404; --bone:#EFEAE4; --stone:#C9C2BA;
  --line:rgba(255,255,255,.08); --line-d:rgba(22,20,17,.12);
  --gold:#D2AE7B; --gold-dp:#A8895C; --gold-lt:#E6C89A;
  /* gold on a light surface has to go much deeper to stay readable */
  --gold-ink:#6F5636;
  --w:#fff; --w2:#8C8C8C; --w3:#626262;
  --ink:#0B0B0B; --ink2:#5E5E5E;
  --f:'Outfit',system-ui,sans-serif; --s:'Instrument Serif',Georgia,serif;
  --frost:linear-gradient(158deg,rgba(255,255,255,.095),rgba(255,255,255,.035));
  --frost-sh:inset 0 1px 0 rgba(255,255,255,.28), 0 20px 48px rgba(0,0,0,.66);
  --frost-sh-hi:inset 0 1px 0 rgba(255,255,255,.4), 0 26px 62px rgba(0,0,0,.85);
  --frost-l:linear-gradient(158deg,rgba(255,255,255,.82),rgba(255,255,255,.46));
  --frost-l-sh:inset 0 1px 0 rgba(255,255,255,.96), 0 16px 42px rgba(0,0,0,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--w);font-family:var(--f);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1240px;margin:0 auto;padding:0 36px;position:relative}
a{color:inherit;text-decoration:none}
.h1{margin:0}
.h1 .l1{display:block;font-family:var(--f);font-weight:700;
 font-size:clamp(36px,5.6vw,72px);line-height:1.02;letter-spacing:-.03em}
.h1 .l2{display:block;color:var(--gold);font-family:var(--s);font-style:italic;font-weight:400;
 font-size:clamp(42px,6.6vw,86px);line-height:.98;letter-spacing:-.012em;margin-top:2px}
.h2{font-weight:700;font-size:clamp(28px,4.2vw,52px);line-height:1.02;letter-spacing:-.032em}
.lt{color:var(--gold);font-family:var(--s);font-style:italic;font-weight:400;
 font-size:1.1em;letter-spacing:-.012em}
.eyebrow{font-size:12.5px;font-weight:400;color:var(--gold);opacity:1}
.lede{font-size:13px;line-height:1.75;color:var(--w2);max-width:42ch}
.btn,.btns{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:400;
padding:12px 20px;border-radius:7px;transition:.25s;border:1px solid rgba(255,255,255,.22)}
.btn:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.btns{background:var(--gold);border-color:var(--gold);color:#12100B;
box-shadow:0 0 0 1px rgba(210,174,123,.4), 0 0 34px rgba(210,174,123,.42), 0 0 78px rgba(210,174,123,.22)}
.btns:hover{background:#fff;color:#000;border-color:#fff;box-shadow:0 0 30px rgba(255,255,255,.34)}
.a{color:var(--gold)}.btns .a{color:#12100B}.btns:hover .a{color:var(--bg)}

nav{position:sticky;top:0;z-index:90;background:rgba(12,11,10,.62);
backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
border-bottom:1px solid var(--line)}
.navin{display:flex;align-items:center;height:76px;gap:40px}
.logo{font-size:16px;font-weight:700;letter-spacing:-.03em;line-height:1.05}
.logo b{display:block;font-weight:300;font-size:10.5px;color:var(--w2)}
/* nine items now, so the gaps tighten before anything wraps */
.nlinks{display:flex;gap:22px;margin-left:auto;white-space:nowrap}
.nlinks a{font-size:13px;color:var(--w2);transition:.2s}.nlinks a:hover{color:var(--w)}
@media(max-width:1240px){.nlinks{gap:17px}.nlinks a{font-size:12.5px}}
@media(max-width:1100px){.nlinks{gap:13px}.nlinks a{font-size:12px}}
@media(max-width:1000px){.nlinks{display:none}}

/* ── VIDEO HERO ── */
.hero{position:relative;min-height:min(82vh,780px);display:flex;align-items:flex-end;overflow:hidden;background:#0C0B0A}
/* home hero only — the interior page clips are graded separately
   and are deliberately left alone */
.hero video,.hero .still{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;z-index:1;
/* +25% brighter, measured across four frames of the actual clip.
   A plain brightness(1.25) hits the same number but blows 20% of
   the picture to pure white; easing contrast back keeps the
   highlights and puts the lift into the midtones instead. */
filter:brightness(1.45) contrast(.94)}
.hero .still{display:none}
/* scrim: heavy left, so the headline always sits on darkness
   regardless of what the footage is doing at that moment */
/* The scrim was doing far more of the darkening than the video filter —
   96% opaque black at the left and still 60% at the middle, so brightening
   the footage underneath barely showed. Opened up from the midpoint
   rightwards, where there is no text to protect. The left stays heavy:
   white headline contrast measured at 5.5:1 or better right across the
   text zone. */
.hero .scrim{position:absolute;inset:0;z-index:4;pointer-events:none;
background:
 linear-gradient(94deg,rgba(11,10,9,.94) 0%,rgba(11,10,9,.8) 26%,rgba(11,10,9,.38) 50%,rgba(11,10,9,.1) 72%,rgba(11,10,9,0) 100%),
 linear-gradient(0deg,rgba(11,10,9,.86) 0%,rgba(11,10,9,.2) 36%,transparent 60%)}
/* a whisper of violet so the footage sits in the same colour world as the page */
.hero .tintv{position:absolute;inset:0;z-index:5;pointer-events:none;
background:radial-gradient(78% 90% at 82% 40%,rgba(255,255,255,.05),transparent 62%);mix-blend-mode:screen}
.hin{position:relative;z-index:8;padding:0 0 66px;max-width:820px}
.hin .h1{margin:16px 0 22px}
.hacts{display:flex;gap:11px;flex-wrap:wrap;margin-top:28px}
.vmeta{position:absolute;right:36px;bottom:88px;z-index:8;font-size:10.5px;color:rgba(255,255,255,.5);
display:flex;align-items:center;gap:9px}
.vmeta .d{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
@media(max-width:820px){
  .hero video{display:none}
  .hero .still{display:block}
  .vmeta{display:none}
  .hero{min-height:74vh}
}
@media(prefers-reduced-motion:reduce){.hero video{display:none}.hero .still{display:block}}

section{padding:60px 0}
.bone{background:var(--bone);color:var(--ink)}
.bone .fpi{border-top-color:rgba(111,86,54,.45)}
.bone .fpi h3{color:var(--ink)}
.bone .fpi p{color:var(--ink2)}
.bone .fpi .hl{color:var(--gold-ink);font-weight:500}
.bone .lede,.bone .fine{color:var(--ink2)}
.bone .h2{color:var(--ink)}.bone .h2 .lt,.bone .lt{color:var(--gold-ink)}
.bone .eyebrow{color:var(--gold-ink);opacity:1}
.qgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
@media(max-width:880px){.qgrid{grid-template-columns:1fr;gap:34px}}
.note .body{font-size:15px;line-height:1.7;color:var(--ink2);max-width:46ch}
.note .body p+p{margin-top:16px}
.sig{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-d)}
.sig .nm{font-family:var(--s);font-style:italic;font-size:25px;color:var(--ink);line-height:1}
.sig .rl{font-size:11.5px;color:var(--ink2);line-height:1.5;margin-top:6px}

.slot{position:relative;overflow:hidden;background:#191612}
.slot .tone{position:absolute;inset:0;background:linear-gradient(157deg,#52493E 2%,#15120E 78%)}
.slot .spec{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;
justify-content:center;align-items:center;gap:7px;text-align:center;padding:22px;
border:1.5px dashed rgba(231,189,138,.7);background:rgba(12,11,10,.6)}
.slot .spec .r{font-size:10.5px;letter-spacing:.16em;color:var(--gold);text-transform:uppercase}
.slot .spec .d{font-size:12.5px;color:#EDE8E3;max-width:34ch;line-height:1.55;font-weight:300}

/* ── SLOT 02 — layered photograph, lit from the top-left ──
   The photo hangs past the end of the bone section and over the
   black below it, so the two sections are bridged rather than stacked. */
.photowrap{position:relative;z-index:6;margin-bottom:-120px}
@media(max-width:880px){.photowrap{margin-bottom:-70px}}

/* The image runs off the right edge of the page. Nothing frames it,
   nothing contains it — that's what stops it reading as an upload. */
.photowrap{margin-right:-36px}
@media(min-width:1240px){.photowrap{margin-right:calc((1240px - 100vw)/2 - 36px)}}

/* black accent lines, offset top-left */
.photowrap::before{content:"";position:absolute;left:-30px;top:-30px;
width:56%;height:44%;z-index:4;pointer-events:none;border-radius:2px 0 0 0;
border-top:3px solid rgba(11,10,9,.8);border-left:3px solid rgba(11,10,9,.8)}
.photowrap::after{content:"";position:absolute;left:-30px;bottom:34%;
width:22%;height:14%;z-index:4;pointer-events:none;
border-bottom:3px solid rgba(11,10,9,.42);border-left:3px solid rgba(11,10,9,.42)}
@media(max-width:880px){.photowrap::before,.photowrap::after{display:none}}

.photo{position:relative;z-index:3;margin:0}
.photo .shade{display:none}
/* no border, no radius, no card — just the photograph */
.photo img{display:block;position:relative;z-index:2;
width:100%;height:auto;aspect-ratio:4/4.3;object-fit:cover;object-position:50% 46%}
/* soft edges top and bottom so it melts into the bone above and black below */
.photo::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
background:
 linear-gradient(180deg,rgba(239,239,239,.5) 0%,transparent 12%),
 linear-gradient(0deg,rgba(0,0,0,.75) 0%,transparent 26%),
 linear-gradient(133deg,rgba(255,255,255,.08) 0%,transparent 30%)}
.photo figcaption{position:absolute;left:22px;bottom:18px;z-index:4;
font-size:10.5px;color:rgba(255,255,255,.8);letter-spacing:.01em}

/* bone section that hands off to black */
.bone.fade{background:linear-gradient(180deg,
 var(--bone) 0%, var(--bone) 58%, #9A9A9A 78%, #343434 90%, #000000 100%);
 overflow:visible;padding-bottom:28px}
.bone.fade .rowi{border-bottom-color:rgba(22,20,17,.12)}
/* was 150px to clear the photo that used to hang below its section;
   the photo is a contained band now, so that gap is just a hole */
.after-photo{padding-top:72px}
@media(max-width:880px){.after-photo{padding-top:52px}}

.stats{border-top:1px solid rgba(210,174,123,.16)}
.st{border-bottom:1px solid rgba(210,174,123,.16);padding:22px 0;display:flex;align-items:baseline;gap:22px}
.st .n{font-size:clamp(38px,5.8vw,70px);font-weight:700;letter-spacing:-.048em;line-height:.92;min-width:2.6ch}
.st .t{font-size:clamp(18px,2.3vw,30px);font-weight:200;letter-spacing:-.02em}
.st .c{font-size:12px;color:#E6C89A;margin-left:auto;text-align:right;max-width:30ch;line-height:1.6}
.st.acc .n{color:#FFFFFF}
.st:nth-child(2){padding-left:5%}.st:nth-child(3){padding-left:10%}.st:nth-child(4){padding-left:15%}
@media(max-width:720px){.st{flex-wrap:wrap;gap:10px;padding-left:0!important}
.st .c{margin-left:0;text-align:left;flex-basis:100%}}

/* five core styles — 5 across on desktop, 2 up on tablet, 1 on phone */
.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
@media(max-width:1100px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}

.card{display:block;border-radius:14px;overflow:hidden;position:relative;
background:var(--frost);backdrop-filter:blur(20px) saturate(165%);-webkit-backdrop-filter:blur(20px) saturate(165%);
border:1px solid rgba(255,255,255,.145);
box-shadow:0 0 0 1px rgba(210,174,123,.1), 0 14px 34px rgba(210,174,123,.16), 0 20px 48px rgba(0,0,0,.62);
transition:transform .38s cubic-bezier(.2,.7,.3,1),box-shadow .38s,border-color .38s}
.card:hover{transform:translateY(-7px);border-color:rgba(210,174,123,.42);
box-shadow:0 0 0 1px rgba(210,174,123,.3), 0 20px 52px rgba(210,174,123,.3), 0 28px 66px rgba(0,0,0,.8)}
.card .bd{padding:15px 16px 18px;position:relative;z-index:3}
.card h3{font-size:17px;font-weight:500;letter-spacing:-.022em}
.card p{font-size:11.5px;color:var(--w2);margin-top:4px}

/* ── hover-to-play ──
   poster is an <img>; the <video> sits on top at opacity 0 with
   preload="none" so NOTHING downloads until the pointer arrives. */
.reel{position:relative;aspect-ratio:4/5;overflow:hidden;background:#191612}
.reel img,.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reel video{opacity:0;z-index:2;transition:opacity .45s ease}
.reel img{z-index:1;transform:scale(1);transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.card:hover .reel video{opacity:1}
.card:hover .reel img{transform:scale(1.05)}
.reel::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
background:linear-gradient(0deg,rgba(12,11,10,.5),transparent 44%)}
.reel .tag{position:absolute;left:12px;bottom:11px;z-index:4;font-size:10px;
color:rgba(255,255,255,.72);letter-spacing:.02em;opacity:0;transform:translateY(5px);
transition:opacity .35s ease,transform .35s ease}
.card:hover .reel .tag{opacity:1;transform:none}

/* touch devices: no hover exists, so never load or show the video */
@media (hover:none),(pointer:coarse){
  .reel video{display:none}
  .reel .tag{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .reel video{display:none}
  .card:hover .reel img{transform:none}
}

.camps{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:800px){.camps{grid-template-columns:1fr}}
.camp{border-radius:14px;padding:30px 28px 32px;background:var(--frost-l);
backdrop-filter:blur(20px) saturate(165%);-webkit-backdrop-filter:blur(20px) saturate(165%);
border:1px solid rgba(255,255,255,.9);box-shadow:var(--frost-l-sh);
transition:transform .38s cubic-bezier(.2,.7,.3,1),box-shadow .38s}
.camp:hover{transform:translateY(-5px);box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 24px 56px rgba(0,0,0,.22)}
.camp .k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.camp h3{font-size:26px;font-weight:700;letter-spacing:-.03em;margin:9px 0 14px;color:var(--ink)}
.camp .rowi{display:grid;grid-template-columns:74px 1fr;gap:12px;padding:9px 0;font-size:12.5px;border-bottom:1px solid var(--line-d)}
.camp .rowi:last-of-type{border-bottom:0}
.camp .rowi .kk{color:var(--ink2)}.camp .rowi .vv{color:var(--ink)}

.closing{position:relative;overflow:hidden;padding:76px 0;text-align:center}
.closing .lit{position:absolute;inset:0;background:radial-gradient(56% 72% at 50% 106%,rgba(255,255,255,.07),transparent 62%)}
.closing .in{position:relative;z-index:3}
.closing p{font-size:13px;color:var(--w2);margin:14px auto 24px;max-width:42ch;line-height:1.7}
footer{border-top:1px solid var(--line);padding:46px 0 38px}
.fgr{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:34px}
.fgr h4{font-size:11px;font-weight:400;color:var(--w3);margin-bottom:13px}
.fgr p{font-size:13px;line-height:2;color:var(--w2)}

/* film grain — the single texture that ties the whole page together */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.055;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
/* class stills stay pure monochrome until you hover — then the clip plays */
.reel img{filter:grayscale(1) contrast(1.06)}
.card:hover .reel img{filter:grayscale(1) contrast(1.12)}

/* ══════════ ROUTER ══════════ */
.page{display:none}
.page.on{display:block;animation:fade .45s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.nlinks a.here{color:#fff}
.nlinks a.here::after{content:"";display:block;height:1px;background:var(--gold);margin-top:4px}
a.logo{text-decoration:none}

/* ── interior page header ── */
.phead{position:relative;overflow:hidden;padding:88px 0 68px;min-height:430px;
display:flex;align-items:flex-end;isolation:isolate;border-bottom:1px solid var(--line)}
/* fallback wash — also what shows if the graphic layer never renders */
.phead .plit{position:absolute;inset:0;z-index:0;background:
 radial-gradient(60% 100% at 84% 40%,rgba(210,174,123,.2),transparent 62%),
 linear-gradient(100deg,#000 46%,#16120C 76%,#000 98%)}
.phead .wrap{position:relative;z-index:5}

/* ══ HERO GRAPHICS ════════════════════════════════════════════
   Four systems, assigned by what a page is about rather than
   rotated for variety. Every one is gradients, SVG or type —
   there is no image file behind any of it, so nothing to shoot,
   nothing to compress and nothing to slow the page down.

     a  stage light   → Performances, Teams
     b  long exposure → Classes, Master Classes
     c  the word      → Tuition, Dates, Register
     d  glass         → Campuses, Faculty
   ═══════════════════════════════════════════════════════════ */
.gfx{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}

/* ── a · stage light ── */
.gfx-a .shaft{position:absolute;top:-40%;height:190%;
background:linear-gradient(180deg,rgba(210,174,123,.42),rgba(210,174,123,.11) 46%,transparent 78%);
filter:blur(28px);mix-blend-mode:screen;transform-origin:50% 0%;
animation:gsway 14s ease-in-out infinite alternate}
.gfx-a .shaft.s2{animation-duration:19s;animation-delay:-4s;
background:linear-gradient(180deg,rgba(230,200,154,.34),rgba(230,200,154,.07) 50%,transparent 80%)}
.gfx-a .shaft.s3{animation-duration:23s;animation-delay:-9s;
background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.03) 44%,transparent 74%)}
@keyframes gsway{from{transform:rotate(var(--r0,-12deg))}to{transform:rotate(var(--r1,6deg))}}
.gfx-a .pool{position:absolute;left:50%;bottom:-16%;width:120%;height:46%;
transform:translateX(-50%);border-radius:50%;filter:blur(52px);
background:radial-gradient(closest-side,rgba(210,174,123,.3),transparent 72%)}
.gfx-a .haze{position:absolute;inset:0;
background:radial-gradient(72% 96% at 78% 42%,rgba(210,174,123,.16),transparent 62%)}

/* ── b · long exposure ── */
.gfx-b svg{position:absolute;inset:0;width:100%;height:100%}
.gfx-b .tr{fill:none;stroke-linecap:round;stroke-width:1.6;
stroke-dasharray:2400;stroke-dashoffset:2400;
animation:gdraw 3.4s cubic-bezier(.22,.7,.28,1) forwards}
.gfx-b .glow{stroke-width:9;filter:blur(13px);opacity:.5}
@keyframes gdraw{to{stroke-dashoffset:0}}
.gfx-b .drift{animation:gdrift 26s ease-in-out infinite alternate;transform-origin:60% 50%}
@keyframes gdrift{from{transform:translate3d(0,0,0) scale(1)}
to{transform:translate3d(-2.2%,1.4%,0) scale(1.05)}}
.gfx-b .vig{position:absolute;inset:0;
background:radial-gradient(64% 90% at 74% 46%,rgba(210,174,123,.14),transparent 66%),
linear-gradient(92deg,#000 12%,rgba(0,0,0,.62) 44%,transparent 76%)}

/* ── c · the word ── */
.gfx-c .word{position:absolute;font-family:var(--f);font-weight:700;letter-spacing:-.055em;
line-height:.78;white-space:nowrap;color:transparent;
-webkit-text-stroke:1px rgba(255,255,255,.115);
font-size:clamp(150px,27vw,340px);right:-4%;bottom:-16%;user-select:none}
.gfx-c .word.two{-webkit-text-stroke:1px rgba(210,174,123,.3);right:-2.4%;bottom:-14.4%}
.gfx-c .rule{position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.07)}
.gfx-c .glowbed{position:absolute;inset:0;
background:radial-gradient(58% 82% at 76% 62%,rgba(210,174,123,.2),transparent 64%)}

/* ── d · glass ── */
.gfx-d .bedlight{position:absolute;inset:0;background:
 radial-gradient(46% 70% at 24% 26%,rgba(210,174,123,.42),transparent 62%),
 radial-gradient(52% 76% at 82% 68%,rgba(230,200,154,.26),transparent 64%),
 linear-gradient(104deg,#0A0908 26%,#221B13 58%,#0A0908 92%)}
.gfx-d .pane{position:absolute;border-radius:3px;background:rgba(255,255,255,.045);
-webkit-backdrop-filter:blur(17px) saturate(150%);backdrop-filter:blur(17px) saturate(150%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.09),
0 30px 70px rgba(0,0,0,.42);
animation:gfloat 20s ease-in-out infinite alternate}
.gfx-d .pane.edge{box-shadow:inset 0 1px 0 rgba(230,200,154,.6),
inset 0 0 0 1px rgba(210,174,123,.26), 0 30px 70px rgba(0,0,0,.42)}
@keyframes gfloat{from{transform:translate3d(0,0,0) rotate(var(--rot,0deg))}
to{transform:translate3d(0,-16px,0) rotate(calc(var(--rot,0deg) + 1.1deg))}}

/* nothing here is load bearing, so it all stops on request */
@media(prefers-reduced-motion:reduce){
  .gfx-a .shaft,.gfx-b .tr,.gfx-b .drift,.gfx-d .pane{animation:none}
  .gfx-b .tr{stroke-dashoffset:0}
}
@media(max-width:720px){
  .phead{min-height:340px;padding:74px 0 52px}
  /* size and offset are set inline per page, which beats a stylesheet
     rule even inside a media query — so nothing is overridden here */
}
.phead .h1{margin:12px 0 0}
.phead .lede{margin-top:18px}
.phead .hacts{display:flex;gap:11px;flex-wrap:wrap;margin-top:24px}

/* ── style rows ── */
.style{display:grid;grid-template-columns:.82fr 1.18fr;gap:44px;align-items:center;
padding:38px 0;border-bottom:1px solid rgba(210,174,123,.14)}
.style:last-of-type{border-bottom:0}
.style.rev .sv{order:2}
.style.rev .sc{order:1}
@media(max-width:860px){.style{grid-template-columns:1fr;gap:22px;padding:28px 0}
 .style.rev .sv,.style.rev .sc{order:initial}}

.sv{position:relative;aspect-ratio:4/5;border-radius:13px;overflow:hidden;background:#0B0B0B;
box-shadow:0 0 0 1px rgba(210,174,123,.12), 0 16px 40px rgba(210,174,123,.16), 0 20px 48px rgba(0,0,0,.62);
transition:box-shadow .4s}
.sv img,.sv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sv img{z-index:1;filter:grayscale(1) contrast(1.06);transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.sv video{z-index:2;opacity:0;transition:opacity .45s ease}
.sv::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 46%)}
.style:hover .sv video{opacity:1}
.style:hover .sv img{transform:scale(1.04)}
.style:hover .sv{box-shadow:0 0 0 1px rgba(210,174,123,.3), 0 22px 54px rgba(210,174,123,.3), 0 28px 66px rgba(0,0,0,.8)}
@media (hover:none),(pointer:coarse){.sv video{display:none}}

.sc .sn{font-size:10.5px;color:var(--gold);letter-spacing:.02em}
.sc .h2{margin:10px 0 14px;font-size:clamp(26px,3.6vw,44px)}
.sc .body{font-size:13.5px;line-height:1.75;color:var(--w2);max-width:52ch}
.sc .body+.body{margin-top:12px}
.sm{display:flex;flex-wrap:wrap;gap:0 34px;margin-top:22px;padding-top:16px;
border-top:1px solid rgba(210,174,123,.16)}
.sm div{padding:7px 0}
.sm .k{display:block;font-size:10.5px;color:var(--w3)}
.sm .v{display:block;font-size:12.5px;color:#E6C89A;margin-top:3px}

/* ── also offered ── */
.also{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.al{border-radius:13px;padding:26px 24px 28px;background:var(--frost-l);
backdrop-filter:blur(20px) saturate(165%);-webkit-backdrop-filter:blur(20px) saturate(165%);
border:1px solid rgba(255,255,255,.9);box-shadow:var(--frost-l-sh);transition:transform .38s,box-shadow .38s}
.al:hover{transform:translateY(-5px);box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 24px 56px rgba(168,137,92,.26)}
.al h3{font-size:21px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.al p{font-size:12.5px;line-height:1.7;color:var(--ink2);margin-top:9px}
.am{display:flex;flex-wrap:wrap;gap:0 16px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line-d)}
.am span{font-size:11px;color:#A8895C;padding:4px 0}


/* ══════════ CLASSES PAGE ══════════ */
.divs{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:18px;
padding:4px 0 6px}
.dv{border-radius:13px;padding:26px 24px 28px;
background:linear-gradient(158deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
border:1px solid rgba(210,174,123,.2);
box-shadow:inset 0 1px 0 rgba(255,255,255,.16),
 0 0 0 1px rgba(210,174,123,.08), 0 16px 38px rgba(210,174,123,.2), 0 20px 48px rgba(0,0,0,.55);
transition:transform .38s cubic-bezier(.2,.7,.3,1),box-shadow .38s,border-color .38s}
.dv:hover{transform:translateY(-6px);border-color:rgba(210,174,123,.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,.2),
 0 0 0 1px rgba(210,174,123,.3), 0 22px 52px rgba(210,174,123,.34), 0 28px 64px rgba(0,0,0,.75)}
.dn{display:block;font-size:19px;font-weight:700;letter-spacing:-.028em;color:#fff}
.da{display:block;font-size:11px;color:var(--gold);margin-top:4px}
.dv p{font-size:12px;line-height:1.6;color:var(--w2);margin-top:10px}

.filt{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;padding:16px 0 18px;
border-top:1px solid rgba(210,174,123,.16);border-bottom:1px solid rgba(210,174,123,.16)}
.fg{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fl{font-size:10.5px;color:var(--w3);margin-right:3px}
.chip{font-family:var(--f);font-size:11.5px;font-weight:300;color:var(--w2);cursor:pointer;
padding:6px 11px;border-radius:6px;border:1px solid var(--line);background:transparent;transition:.2s}
.chip:hover{border-color:rgba(255,255,255,.3);color:#fff}
.chip.on{background:var(--gold);border-color:var(--gold);color:#12100B}
.cnt{margin-left:auto;font-size:11px;color:var(--w3)}

.grp{padding:22px 0 4px}
.grp .gh{display:flex;align-items:baseline;gap:12px;padding-bottom:9px}
.grp .gt{font-size:13px;font-weight:500;color:#fff;letter-spacing:-.01em}
.grp .gc{font-size:10.5px;color:var(--gold)}
.cls{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);transition:.22s}
.cls:hover{padding-left:9px;background:rgba(210,174,123,.05)}
.cls .cn{font-size:13.5px;font-weight:300;color:#F3F0ED;letter-spacing:-.005em}
.cls .cl{font-size:10.5px;color:var(--w3)}
.cls .cc{font-size:10.5px;color:#E6C89A;min-width:96px;text-align:right}
.pia{color:var(--gold);font-style:normal;font-weight:400}
.empty{padding:40px 0;color:var(--w3);font-size:12.5px}
@media(max-width:620px){.cls{grid-template-columns:1fr auto}.cls .cl{display:none}}

.gen{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.gx{padding-top:14px;border-top:2px solid rgba(22,20,17,.7)}
.gx h3{font-size:16px;font-weight:700;letter-spacing:-.024em;color:var(--ink)}
.gx p{font-size:12px;line-height:1.65;color:var(--ink2);margin-top:7px}

.more{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.mo{display:block;border-radius:13px;padding:24px 22px 26px;background:var(--frost);
backdrop-filter:blur(20px) saturate(165%);-webkit-backdrop-filter:blur(20px) saturate(165%);
border:1px solid rgba(255,255,255,.145);
box-shadow:0 0 0 1px rgba(210,174,123,.1), 0 14px 34px rgba(210,174,123,.16), 0 20px 48px rgba(0,0,0,.62);
transition:transform .38s cubic-bezier(.2,.7,.3,1),box-shadow .38s,border-color .38s}
.mo:hover{transform:translateY(-6px);border-color:rgba(210,174,123,.42);
box-shadow:0 0 0 1px rgba(210,174,123,.3), 0 20px 52px rgba(210,174,123,.3), 0 28px 66px rgba(0,0,0,.8)}
.mn{font-size:10.5px;color:var(--gold)}
.mo h3{font-size:19px;font-weight:700;letter-spacing:-.028em;margin:9px 0 9px;color:#fff}
.mo p{font-size:12.5px;line-height:1.7;color:var(--w2)}
.mg{display:inline-block;margin-top:14px;font-size:11.5px;color:var(--gold)}


.prompt{padding:44px 0 40px;display:flex;flex-direction:column;gap:9px}
.pq{font-family:var(--s);font-style:italic;font-size:clamp(24px,3.4vw,38px);color:#fff;letter-spacing:-.01em}
.pp{font-size:12.5px;color:var(--w2);max-width:52ch;line-height:1.7}
.grp .gn{margin-left:auto;font-size:10.5px;color:var(--w3)}
.mx{font-size:9.5px;font-weight:400;font-style:normal;color:var(--gold);
border:1px solid rgba(210,174,123,.4);border-radius:4px;padding:1px 5px;margin-left:5px;vertical-align:1px}

.cls{grid-template-columns:88px 1fr 92px 116px}
.cls .ct{font-size:12.5px;color:#fff;font-weight:400}
.cls .cs{font-size:10.5px;color:var(--w3);text-align:right}
.nw{font-size:9.5px;font-weight:400;font-style:normal;color:var(--bone);
border:1px solid rgba(239,234,228,.38);border-radius:4px;padding:1px 5px;margin-left:5px;vertical-align:1px}
.gp{font-size:9.5px;font-weight:400;font-style:normal;color:var(--w2);
border:1px solid var(--line);border-radius:4px;padding:1px 5px;margin-left:5px;vertical-align:1px}
@media(max-width:760px){.cls{grid-template-columns:74px 1fr}.cls .cs,.cls .cc{display:none}}

/* ══════════ TEAMS ══════════ */
.progs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.pg{position:relative;border-radius:14px;padding:30px 28px 32px;
background:linear-gradient(158deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
backdrop-filter:blur(18px) saturate(155%);-webkit-backdrop-filter:blur(18px) saturate(155%);
border:1px solid rgba(210,174,123,.2);
box-shadow:inset 0 1px 0 rgba(255,255,255,.16),
 0 0 0 1px rgba(210,174,123,.08), 0 16px 38px rgba(210,174,123,.18), 0 20px 48px rgba(0,0,0,.55);
transition:transform .38s cubic-bezier(.2,.7,.3,1),box-shadow .38s,border-color .38s}
.pg:hover{transform:translateY(-6px);border-color:rgba(210,174,123,.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,.2),
 0 0 0 1px rgba(210,174,123,.3), 0 22px 52px rgba(210,174,123,.32), 0 28px 64px rgba(0,0,0,.75)}
.pgi{font-size:10.5px;color:var(--gold)}
.pg .h2{font-size:clamp(24px,3vw,34px);margin:10px 0 14px}
.pg .body{font-size:13px;line-height:1.72;color:var(--w2)}
.pg .body+.body{margin-top:10px}
.pgm{margin-top:20px;padding-top:14px;border-top:1px solid rgba(210,174,123,.16)}
.pgm div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:6px 0;font-size:12px}
.pgm .k{color:var(--w3)}
.pgm .v{color:#E6C89A}
.pgt{display:inline-block;margin-top:16px;font-size:10px;color:var(--w2);
border:1px solid var(--line);border-radius:4px;padding:3px 8px}
.pgt.on{color:var(--gold);border-color:rgba(210,174,123,.45)}

.apex{position:relative;overflow:hidden;padding:78px 0 84px;
border-top:1px solid rgba(210,174,123,.16);border-bottom:1px solid rgba(210,174,123,.16)}
.alit{position:absolute;inset:0;background:
 radial-gradient(58% 96% at 82% 44%,rgba(210,174,123,.24),transparent 62%),
 linear-gradient(100deg,#000 44%,#18130D 76%,#000 98%)}
.agrid{position:relative;z-index:3;display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center}
@media(max-width:900px){.agrid{grid-template-columns:1fr;gap:30px}}
.adates{margin-top:20px;border-top:1px solid rgba(210,174,123,.18)}
.ad{display:grid;grid-template-columns:1fr auto;gap:16px;padding:11px 0;
border-bottom:1px solid rgba(255,255,255,.05);font-size:13px}
.ad .k{color:var(--w2)}
.ad .v{color:#fff;font-weight:400}
.ashot{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#100E0B}
.atone{position:absolute;inset:0;background:linear-gradient(157deg,#402F1B,#100D09 74%)}
.aspec{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:center;
align-items:center;gap:7px;text-align:center;padding:24px;
border:1.5px dashed rgba(210,174,123,.6);background:rgba(0,0,0,.5)}
.aspec .r{font-size:10.5px;letter-spacing:.16em;color:var(--gold);text-transform:uppercase}
.aspec .d{font-size:12.5px;color:#EDE8E3;max-width:30ch;line-height:1.55}

/* Apex runs June — flip this class on the page wrapper when it reopens */
body.apex-live .apex-shut{display:none}
body:not(.apex-live) .apex-open{display:none}

/* homepage press list — sits on the bone section */
.press{margin-top:20px;border-top:1px solid var(--line-d)}
.pr{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
padding:12px 0;border-bottom:1px solid var(--line-d);transition:padding-left .25s ease}
.pr:hover{padding-left:8px}
.pn{font-family:var(--s);font-style:italic;font-size:21px;color:var(--ink);line-height:1.2}
.pl{font-size:11px;color:#A8895C;white-space:nowrap}

/* ══════════ TUITION ══════════ */
.tuit{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
@media(max-width:1180px){.tuit{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
@media(max-width:620px){.tuit{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tt{padding:20px 14px 18px}
.tp{font-size:clamp(24px,2.4vw,30px)}
.tt{position:relative;border-radius:12px;padding:22px 18px 20px;
background:linear-gradient(158deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
border:1px solid rgba(210,174,123,.16);
box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 12px 30px rgba(210,174,123,.14), 0 16px 40px rgba(0,0,0,.5);
transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s}
.tt:hover{transform:translateY(-5px);border-color:rgba(210,174,123,.45);
box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 18px 44px rgba(210,174,123,.3), 0 24px 56px rgba(0,0,0,.72)}
.tt.on{border-color:rgba(210,174,123,.45);background:linear-gradient(158deg,rgba(210,174,123,.1),rgba(255,255,255,.02))}
.tb{position:absolute;top:-9px;left:16px;background:var(--gold);color:#12100B;
font-size:9.5px;padding:3px 8px;border-radius:4px}
.th{display:block;font-size:11px;color:var(--w3)}
.tp{display:block;font-size:31px;font-weight:700;letter-spacing:-.045em;line-height:1;margin-top:9px}
.tt.on .tp{color:var(--gold)}
.ts{display:block;font-size:11px;color:#E6C89A;margin-top:7px}

.sib{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px}
.sb{border-radius:13px;padding:24px 22px 26px;background:var(--frost-l);
backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
border:1px solid rgba(255,255,255,.9);box-shadow:var(--frost-l-sh);
transition:transform .35s,box-shadow .35s}
.sb:hover{transform:translateY(-5px);box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 22px 52px rgba(168,137,92,.24)}
.sn{display:block;font-size:34px;font-weight:700;letter-spacing:-.04em;line-height:1;color:#A8895C}
.sl{display:block;font-size:11.5px;color:var(--ink2);margin-top:6px}
.sb p{font-size:12.5px;line-height:1.65;color:var(--ink2);margin-top:12px}

.addon{border-top:1px solid rgba(210,174,123,.16)}
.ao{display:grid;grid-template-columns:170px 1fr auto;gap:18px;align-items:baseline;
padding:14px 0;border-bottom:1px solid rgba(255,255,255,.05);transition:.22s}
.ao:hover{padding-left:9px;background:rgba(210,174,123,.05)}
.ao.off{opacity:.5}
.an{font-size:14.5px;font-weight:400;color:#fff;letter-spacing:-.01em}
.ad{font-size:11.5px;color:var(--w3);line-height:1.5}
.ap{font-size:15px;font-weight:500;color:#E6C89A;white-space:nowrap}
@media(max-width:700px){.ao{grid-template-columns:1fr auto}.ad{grid-column:1/-1}}

.fp{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.fpi{padding-top:14px;border-top:2px solid rgba(210,174,123,.3)}
.fpi h3{font-size:15px;font-weight:500;color:#fff;letter-spacing:-.015em}
.fpi p{font-size:12.5px;line-height:1.7;color:var(--w2);margin-top:8px}
.fpi .hl{color:#E6C89A;font-weight:400}

/* ══════════ FACULTY ══════════ */
.fac-filt{margin-bottom:26px}


/* bio overlay */
.fmodal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:28px}
.fmodal[hidden]{display:none}
.fmbg{position:absolute;inset:0;background:rgba(0,0,0,.86);backdrop-filter:blur(10px)}
.fmin{position:relative;z-index:2;max-width:1000px;width:100%;max-height:86vh;overflow:auto;
display:grid;grid-template-columns:.85fr 1.15fr;gap:34px;padding:30px;
background:linear-gradient(158deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);
border:1px solid rgba(255,255,255,.14);border-radius:16px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 30px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(210,174,123,.18)}
@media(max-width:820px){.fmin{grid-template-columns:1fr;gap:20px;padding:22px}}
.fmphoto{border-radius:11px;overflow:hidden;align-self:start}
.fmphoto img{width:100%;display:block;filter:grayscale(1) contrast(1.06)}
.fmtext{font-size:13.5px;line-height:1.8;color:var(--w2)}
.fmtext p+p{margin-top:13px}
.fmx{position:absolute;top:14px;right:16px;z-index:5;background:none;border:0;cursor:pointer;
color:var(--w2);font-size:16px;padding:6px;line-height:1}
.fmx:hover{color:#fff}
.fempty{padding:40px 0;color:var(--w3);font-size:12.5px}

/* ══════════ FACULTY — graded grid ══════════
   Every portrait runs through the same grade so 23 different photographs
   read as one set. Hover lifts the grade on that card only. */
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:2px;
background:rgba(210,174,123,.16);border:1px solid rgba(210,174,123,.16)}
.gcard{position:relative;display:block;background:#000;cursor:pointer;border:0;padding:0;overflow:hidden}
.gcard img{width:100%;aspect-ratio:600/732;object-fit:cover;display:block;
filter:grayscale(1) contrast(1.14) brightness(.86);
transition:filter .55s ease, transform 1.1s cubic-bezier(.2,.7,.3,1)}
.gcard:hover img{filter:grayscale(1) contrast(1.02) brightness(1);transform:scale(1.05)}
.gcard::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.9;
transition:opacity .5s ease;
background:linear-gradient(0deg,rgba(0,0,0,.9),transparent 46%),
 radial-gradient(70% 60% at 50% 30%,rgba(210,174,123,.16),transparent 70%)}
.gcard:hover::after{opacity:.62}
.gcn{position:absolute;left:16px;right:16px;bottom:14px;z-index:3;text-align:left}
.gcf{display:block;font-family:var(--f);font-size:14px;font-weight:500;color:#fff;letter-spacing:-.012em}
.gcl{display:block;font-family:var(--s);font-style:italic;font-size:17px;color:var(--gold);line-height:1.15}
@media(max-width:520px){.ggrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ══════════ CAMPUSES ══════════ */
.camp-sec{position:relative;padding:64px 0 70px;border-bottom:1px solid rgba(210,174,123,.16)}
.camp-sec.alt{background:
 radial-gradient(52% 90% at 88% 40%,rgba(210,174,123,.13),transparent 62%),
 linear-gradient(100deg,#000 46%,#120E0A 78%,#000 98%)}
.camp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;margin-bottom:30px}

.cstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;
background:rgba(210,174,123,.16);border:1px solid rgba(210,174,123,.16);margin-bottom:26px}
@media(max-width:680px){.cstats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cs{background:#000;padding:22px 20px 20px}
.csn{display:block;font-family:var(--f);font-weight:700;font-size:clamp(28px,3.4vw,40px);
letter-spacing:-.045em;line-height:1;color:#fff}
.csl{display:block;font-size:11px;color:#E6C89A;margin-top:7px}

.cgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:start;margin-bottom:30px}
@media(max-width:880px){.cgrid{grid-template-columns:1fr;gap:22px}}
.cvid{position:relative;aspect-ratio:4/5;border-radius:13px;overflow:hidden;background:#100D0A;
box-shadow:0 0 0 1px rgba(210,174,123,.16), 0 20px 48px rgba(210,174,123,.2), 0 24px 56px rgba(0,0,0,.7)}
.cvid img{width:100%;height:100%;object-fit:cover;display:block}
.cvtone{position:absolute;inset:0;background:linear-gradient(157deg,#402F1B,#0B0907 74%)}
.cvspec{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;
align-items:center;gap:7px;text-align:center;padding:24px;
border:1.5px dashed rgba(210,174,123,.6);background:rgba(0,0,0,.5)}
.cvspec .r{font-size:10.5px;letter-spacing:.16em;color:var(--gold);text-transform:uppercase}
.cvspec .d{font-size:12.5px;color:#EDE8E3;max-width:28ch;line-height:1.55}
.cvcap{position:absolute;left:16px;bottom:14px;z-index:3;font-size:10.5px;color:rgba(255,255,255,.78)}

.cfeat{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.cf{padding-top:14px;border-top:2px solid rgba(210,174,123,.3)}
.cf h3{font-size:15px;font-weight:500;color:#fff;letter-spacing:-.015em}
.cf p{font-size:12.5px;line-height:1.7;color:var(--w2);margin-top:8px}

.cinfo{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 32px;
border-top:1px solid rgba(210,174,123,.16)}
.ci{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:12px 0;
border-bottom:1px solid rgba(255,255,255,.05);font-size:12.5px}
.ci .k{color:var(--w3)}
.ci .v{color:#F3F0ED}

.both{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.bo{padding-top:14px;border-top:2px solid rgba(22,20,17,.7)}
.bo h3{font-size:16px;font-weight:700;letter-spacing:-.024em;color:var(--ink)}
.bo p{font-size:12.5px;line-height:1.68;color:var(--ink2);margin-top:8px}

/* click to play video — YouTube only loads once someone presses play */
/* Restrained on purpose. A glowing coloured disc over a video is
   the single most template-looking thing on any website — the
   still and a hairline ring do the job. */
.cvid.tour{cursor:pointer;aspect-ratio:16/9}
.cvid.tour img{width:100%;height:100%;object-fit:cover;
filter:grayscale(.9) contrast(1.04) brightness(.94);
transition:filter .6s ease,transform 1.2s cubic-bezier(.2,.7,.3,1)}
.cvid.tour:hover img{filter:grayscale(0) contrast(1.02) brightness(1);transform:scale(1.025)}
.cvid.tour::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(0deg,rgba(0,0,0,.62),rgba(0,0,0,.05) 46%,transparent 70%);
transition:opacity .5s ease}
.cvid.tour:hover::after{opacity:.72}
.cvplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;
width:58px;height:58px;border-radius:50%;cursor:pointer;
background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.7);
-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
display:flex;align-items:center;justify-content:center;
transition:background .35s ease,border-color .35s ease,transform .35s ease}
.cvid.tour:hover .cvplay{background:rgba(255,255,255,.96);border-color:#fff;
transform:translate(-50%,-50%) scale(1.04)}
.cvtri{width:0;height:0;margin-left:4px;border-left:15px solid #fff;
border-top:9px solid transparent;border-bottom:9px solid transparent;transition:border-color .35s ease}
.cvid.tour:hover .cvtri{border-left-color:#0B0B0B}
.cvid.tour iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:6}
/* quiet notice, local preview only */
.cvnote{position:absolute;left:0;right:0;bottom:0;z-index:7;padding:13px 18px;
background:rgba(0,0,0,.86);font-size:11px;line-height:1.55;color:var(--w2)}
.cvnote a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(210,174,123,.4)}
@media(max-width:880px){.cvid.tour{aspect-ratio:16/9}.cvplay{width:50px;height:50px}}

.clounge{position:relative;margin:0 0 30px;border-radius:13px;overflow:hidden;
box-shadow:0 0 0 1px rgba(210,174,123,.14), 0 20px 48px rgba(210,174,123,.18), 0 24px 56px rgba(0,0,0,.68)}
.clounge img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:50% 42%;display:block}
.clounge::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(0deg,rgba(0,0,0,.7),transparent 46%)}
.clounge figcaption{position:absolute;left:20px;bottom:15px;z-index:3;
font-size:10.5px;color:rgba(255,255,255,.8)}

/* ══ IMPORTANT DATES ══════════════════════════════════════════ */

/* the next-thing-up panel. Reads itself off the data, so it is
   never stale and nobody has to remember to update it. */
.dtnext{position:relative;overflow:hidden;border-radius:14px;padding:34px 34px 30px;
background:linear-gradient(104deg,#17130E 0%,#221B13 54%,#100D0A 100%);
box-shadow:0 0 0 1px rgba(210,174,123,.2), 0 22px 60px rgba(210,174,123,.14)}
.dtnext::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(52% 90% at 88% 24%,rgba(210,174,123,.24),transparent 66%)}
.dtnext .in{position:relative;z-index:2;display:flex;flex-wrap:wrap;
align-items:flex-end;justify-content:space-between;gap:24px}
.dtnl{font-size:11px;color:var(--gold);letter-spacing:.01em}
.dtnn{font-family:var(--f);font-weight:700;letter-spacing:-.035em;
font-size:clamp(28px,4vw,46px);line-height:1;margin:12px 0 0;color:#fff}
.dtnd{font-family:var(--s);font-style:italic;font-size:clamp(19px,2.4vw,27px);
color:#DCD8D3;margin-top:7px;letter-spacing:-.01em}
.dtcount{text-align:right;flex-shrink:0}
.dtcn{font-family:var(--f);font-weight:700;font-size:clamp(38px,5.4vw,62px);
line-height:.9;letter-spacing:-.05em;color:var(--gold)}
.dtcl{font-size:11px;color:var(--w2);margin-top:7px}
@media(max-width:620px){.dtcount{text-align:left}}

/* ── three groups: performances, deadlines, closures ──
   Different kinds of date, different weight. A recital at
   Meydenbauer and a Friday off are not the same thing. */
.dtgrp{padding:0 0 52px}
.dtgh{margin-bottom:22px}

/* performances — the dates people arrange a life around */
.pf{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
background:rgba(255,255,255,.09);border-radius:14px;overflow:hidden}
.pfc{position:relative;overflow:hidden;background:#0D0C0B;padding:28px 26px 22px;
display:flex;flex-direction:column;transition:background .4s ease}
.pfc::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
background:radial-gradient(70% 80% at 70% 100%,rgba(210,174,123,.22),transparent 68%);
transition:opacity .5s ease}
.pfc:hover{background:#14110E}
.pfc:hover::after{opacity:1}
.pfc .rel{position:relative;z-index:2;display:flex;flex-direction:column;height:100%}
.pfd{font-size:11px;color:var(--gold)}
.pfn{font-family:var(--s);font-style:italic;font-size:clamp(24px,2.9vw,32px);
line-height:1.04;letter-spacing:-.014em;margin:13px 0 0}
.pfv{font-size:11.5px;color:var(--w2);margin-top:10px}

/* deadlines and closures — reference data, so it goes dense */
.clg{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));
gap:1px;background:rgba(255,255,255,.08);border-radius:13px;overflow:hidden}
.clc{position:relative;background:#0A0A0B;padding:19px 20px 15px;
display:flex;flex-direction:column;transition:background .3s ease}
.clc:hover{background:#141311}
.cld{font-size:14px;font-weight:400;letter-spacing:-.015em;color:#fff}
.cln{font-size:11.5px;color:var(--w2);margin-top:5px}
.clc.dl .cld{color:var(--gold)}
.clc.dl{background:#100D0A}
.clc.dl:hover{background:#17130E}

/* add to calendar — always visible, because hover doesn't exist on a phone */
.ics{margin-top:auto;padding-top:13px;align-self:flex-start;
font-family:var(--f);font-size:10.5px;font-weight:300;color:var(--w3);
background:none;border:0;cursor:pointer;transition:color .25s ease}
.ics:hover{color:var(--gold)}
.ics span{margin-right:5px}
.pfc .ics{font-size:11px;padding-top:20px}
.icsall{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:400;
padding:12px 20px;border-radius:7px;border:1px solid rgba(255,255,255,.22);
background:none;color:#fff;font-family:var(--f);cursor:pointer;
transition:border-color .25s ease,background .25s ease}
.icsall:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.04)}

/* shown only when a group has nothing in it yet */
.dtempty{border:1px dashed rgba(210,174,123,.3);border-radius:13px;
padding:26px 24px;background:rgba(210,174,123,.04)}
.dtempty p{font-size:12.5px;line-height:1.7;color:var(--w2);max-width:60ch}

/* ══ REGISTER ═════════════════════════════════════════════════ */

/* the free trial. The best thing on this page and currently the
   most buried, so it gets the one lit panel. */
.rtrial{position:relative;overflow:hidden;border-radius:14px;padding:40px 38px 34px;
background:linear-gradient(104deg,#17130E 0%,#221B13 56%,#100D0A 100%);
box-shadow:0 0 0 1px rgba(210,174,123,.2), 0 24px 66px rgba(210,174,123,.15)}
.rtrial::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(50% 88% at 86% 20%,rgba(210,174,123,.24),transparent 66%)}
.rtrial .in{position:relative;z-index:2}
.rtg{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
@media(max-width:860px){.rtg{grid-template-columns:1fr;gap:30px}}
.rtbig{font-family:var(--f);font-weight:700;font-size:clamp(30px,4.4vw,54px);
line-height:.99;letter-spacing:-.038em}
.rtbig .lt{display:block}
.rtp{font-size:12.5px;line-height:1.75;color:#DCD8D3;margin-top:18px;max-width:46ch}
.rtbook{border-left:1px solid rgba(255,255,255,.14);padding-left:26px}
@media(max-width:860px){.rtbook{border-left:0;padding-left:0;
border-top:1px solid rgba(255,255,255,.14);padding-top:26px}}
.rtbook h4{font-size:11px;font-weight:400;color:var(--gold);letter-spacing:.01em}
.rtml{display:block;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.09);
text-decoration:none;transition:padding-left .3s ease}
.rtml:hover{padding-left:9px}
.rtml b{display:block;font-size:14px;font-weight:400;color:#fff;letter-spacing:-.018em}
.rtml span{display:block;font-size:11px;color:var(--w2);margin-top:4px}
.rtml:hover b{color:var(--gold)}
.rtnote{font-size:11px;line-height:1.65;color:var(--w3);margin-top:16px}

/* the four steps */
.rsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;
background:rgba(255,255,255,.08);border-radius:13px;overflow:hidden}
.rst{background:#0A0A0B;padding:26px 24px 24px;transition:background .3s ease}
.rst:hover{background:#101014}
.rstn{font-family:var(--f);font-weight:700;font-size:12px;color:var(--gold);
letter-spacing:.04em}
.rst h3{font-size:17px;font-weight:700;letter-spacing:-.026em;color:#fff;margin-top:14px}
.rst p{font-size:12px;line-height:1.7;color:var(--w2);margin-top:9px}

/* two-up explainer */
.rtwo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;
background:rgba(255,255,255,.08);border-radius:13px;overflow:hidden}
.rtw{background:#0A0A0B;padding:30px 28px}
.rtw h3{font-size:19px;font-weight:700;letter-spacing:-.028em;color:#fff}
.rtw p{font-size:12.5px;line-height:1.75;color:var(--w2);margin-top:11px}
.rtw .lv{margin-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.rtw .lv div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
border-bottom:1px solid rgba(255,255,255,.06);font-size:12.5px}
.rtw .lv b{font-weight:400;color:#fff}
.rtw .lv span{color:var(--w2);text-align:right}

/* FAQ — everything the PDF says, where Google can read it */
.faq{border-top:1px solid rgba(255,255,255,.09)}
.fqi{border-bottom:1px solid rgba(255,255,255,.09)}
.fqq{width:100%;background:none;border:0;cursor:pointer;text-align:left;
display:flex;align-items:baseline;justify-content:space-between;gap:22px;
padding:20px 0;font-family:var(--f);transition:padding-left .3s ease}
.fqq:hover{padding-left:11px}
.fqq span{font-size:clamp(15px,1.9vw,18px);font-weight:400;letter-spacing:-.022em;color:#fff}
.fqq i{flex-shrink:0;width:11px;height:11px;position:relative;margin-top:5px}
.fqq i::before,.fqq i::after{content:"";position:absolute;background:var(--gold);
transition:transform .35s ease,opacity .35s ease}
.fqq i::before{left:0;top:5px;width:11px;height:1px}
.fqq i::after{left:5px;top:0;width:1px;height:11px}
.fqi.on .fqq i::after{transform:rotate(90deg);opacity:0}
.fqa{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.7,.3,1)}
.fqi.on .fqa{max-height:340px}
.fqa p{font-size:12.5px;line-height:1.8;color:var(--w2);max-width:68ch;padding:0 0 22px}
.fqa a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(210,174,123,.4)}

/* ══ PERFORMANCES ═════════════════════════════════════════════
   The two shows are genuinely different events. The current site
   describes them in two similar paragraphs, which is why nobody
   can tell them apart. Side by side, the difference is the point. */
.shows{display:grid;grid-template-columns:1fr 1fr;gap:1px;
background:rgba(255,255,255,.09);border-radius:14px;overflow:hidden}
@media(max-width:840px){.shows{grid-template-columns:1fr}}
.show{position:relative;overflow:hidden;background:#0A0A0B;padding:0;
display:flex;flex-direction:column}
/* the footage leads. Square edges here — the card already has the
   rounded corner, and a second radius inside it reads as a widget. */
.shvid{border-radius:0;flex-shrink:0;z-index:2}
.shvid .cvcap{left:20px;bottom:12px}
.show > .rel{padding:30px 30px 28px}
.show::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
background:radial-gradient(66% 70% at 72% 100%,rgba(210,174,123,.18),transparent 68%);
transition:opacity .55s ease}
.show:hover::after{opacity:1}
.show .rel{position:relative;z-index:2;display:flex;flex-direction:column;flex:1}
.shk{font-size:11px;color:var(--gold)}
.shn{font-family:var(--f);font-weight:700;font-size:clamp(26px,3.4vw,40px);
line-height:.99;letter-spacing:-.038em;margin:13px 0 0}
.shn .lt{display:block;font-size:.72em}
.shw{font-size:12px;color:var(--w2);margin-top:12px}
.shp{font-size:12.5px;line-height:1.78;color:#DCD8D3;margin-top:18px}
.shspec{margin-top:24px;border-top:1px solid rgba(255,255,255,.09)}
.shspec div{display:grid;grid-template-columns:112px 1fr;gap:16px;padding:11px 0;
border-bottom:1px solid rgba(255,255,255,.06);font-size:12px;line-height:1.55}
.shspec b{font-weight:300;color:var(--w3)}
.shspec span{color:#F3F0ED}
.shhl{color:var(--gold)}
.show .foot{margin-top:auto;padding-top:22px}

/* the opt out rule, given its own weight because it trips people up */
.optout{position:relative;overflow:hidden;border-radius:14px;padding:34px 32px;
background:linear-gradient(104deg,#17130E 0%,#221B13 56%,#100D0A 100%);
box-shadow:0 0 0 1px rgba(210,174,123,.18)}
.optout .in{position:relative;z-index:2;display:grid;
grid-template-columns:.9fr 1.1fr;gap:38px;align-items:center}
@media(max-width:800px){.optout .in{grid-template-columns:1fr;gap:22px}}
.optout h3{font-family:var(--f);font-weight:700;font-size:clamp(24px,3.2vw,38px);
line-height:1;letter-spacing:-.036em}
.optout h3 .lt{display:block}
.optout p{font-size:12.5px;line-height:1.78;color:#DCD8D3}
.optout p + p{margin-top:13px}

/* ══ MASTER CLASSES ═══════════════════════════════════════════
   Two different jobs. What's coming up needs to sell a ticket;
   who has already taught here is credibility, and credibility
   works better as readable names than as a wall of flyer art. */

/* ── upcoming: the flyer does the talking ── */
.mcup{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;
background:rgba(255,255,255,.09);border-radius:14px;overflow:hidden}
.mcu{position:relative;background:#0A0A0B;display:grid;grid-template-columns:150px 1fr}
@media(max-width:520px){.mcu{grid-template-columns:1fr}}
.mcu .fly{position:relative;overflow:hidden;background:#000}
.mcu .fly img{width:100%;height:100%;min-height:180px;object-fit:cover;display:block;
transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.mcu:hover .fly img{transform:scale(1.05)}
.mcu .body{padding:26px 24px 22px;display:flex;flex-direction:column}
.mcu .when{font-size:11px;color:var(--gold)}
.mcu b{display:block;font-family:var(--f);font-weight:700;letter-spacing:-.03em;
font-size:clamp(21px,2.5vw,27px);line-height:1.04;margin-top:11px;color:#fff}
.mcu .cred{font-family:var(--s);font-style:italic;font-size:15px;color:#DCD8D3;margin-top:9px}
.mcu .meta{font-size:11.5px;color:var(--w2);margin-top:10px}
.mcu .foot{margin-top:auto;padding-top:18px}

/* ── headliners + the rest ──
   Nineteen flyers, nineteen different designs — neon green, teal,
   purple, mono. Grading them all to grayscale is what turns a
   jumble into a set; colour returns one tile at a time on hover. */
.hl{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;
background:rgba(255,255,255,.09);border-radius:14px;overflow:hidden}
.hlc{position:relative;background:#0A0A0B;overflow:hidden;display:flex;flex-direction:column}
.hlc img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 34%;display:block;
filter:grayscale(1) contrast(1.14) brightness(.82);
transition:filter .6s ease,transform 1.2s cubic-bezier(.2,.7,.3,1)}
.hlc:hover img{filter:grayscale(0) contrast(1.02) brightness(1);transform:scale(1.05)}
.hlb{padding:24px 24px 26px}
.hlb .yr{font-size:10.5px;color:var(--gold)}
.hlb b{display:block;font-weight:700;font-size:clamp(21px,2.5vw,27px);
letter-spacing:-.032em;line-height:1.04;margin-top:10px;color:#fff}
.hlb .cr{font-family:var(--s);font-style:italic;font-size:14.5px;line-height:1.5;
color:#DCD8D3;margin-top:11px}

.rest{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:1px;
background:rgba(255,255,255,.08);border-radius:14px;overflow:hidden;margin-top:22px}
.rc{position:relative;background:#0A0A0B;overflow:hidden}
.rc img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
filter:grayscale(1) contrast(1.16) brightness(.74);
transition:filter .5s ease,transform 1.1s cubic-bezier(.2,.7,.3,1)}
.rc:hover img{filter:grayscale(0) contrast(1.02) brightness(.96);transform:scale(1.05)}
.rc figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 13px 11px;
background:linear-gradient(0deg,rgba(0,0,0,.93),rgba(0,0,0,.5) 54%,transparent)}
.rc b{display:block;font-size:12px;font-weight:400;letter-spacing:-.018em;
color:#fff;line-height:1.25}
.rc span{display:block;font-size:9.5px;color:var(--gold);margin-top:4px}
/* the credit is there for Google whether or not it is on screen */
.rc .rcr{display:block;font-size:10px;line-height:1.45;color:rgba(255,255,255,.74);
margin-top:6px;max-height:0;opacity:0;overflow:hidden;
transition:max-height .45s ease,opacity .4s ease}
.rc:hover .rcr{max-height:90px;opacity:1}

/* the two policy blocks, on bone */
.dtpol{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:22px}
.dtp{padding-top:14px;border-top:2px solid rgba(22,20,17,.7)}
.dtp h3{font-size:16px;font-weight:700;letter-spacing:-.024em;color:var(--ink)}
.dtp p{font-size:12.5px;line-height:1.68;color:var(--ink2);margin-top:8px}

/* which school districts each campus watches */
.dtsch{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;
background:rgba(255,255,255,.08);border-radius:13px;overflow:hidden}
.dts{background:#0C0C0D;padding:28px 26px}
.dts h3{font-size:15px;font-weight:700;letter-spacing:-.02em;color:#fff}
.dts ul{list-style:none;margin:16px 0 0}
.dts li{font-size:12.5px;color:#E5E1DE;padding:9px 0;
border-bottom:1px solid rgba(255,255,255,.06)}
.dts li:last-child{border-bottom:0}

/* ══════════ HERO VIDEO ═══════════════════════════════════════
   A dancer layered into the interior page headers, behind the
   word graphic and behind the copy. Size and position are set
   explicitly rather than with object-fit, so neither drifts when
   a header changes height or the copy changes length.
   The clip is a dancer on black and the header is near-black, so
   the rectangle is dissolved by fading the video's own edges to
   transparent with a mask. This used to use mix-blend-mode:screen
   — see the note on the rule itself for why it doesn't any more.

   The grade is the gold equivalent of the violet original. It is
   not a hue guess: run through the CSS filter matrices, skin
   midtones land at hue 34 with saturation .37 — the same
   saturation the violet chain produced, on the brand gold hue.
   grayscale(.76) rather than 1 is deliberate; it leaves enough
   original colour that skin still reads as skin.
   ═══════════════════════════════════════════════════════════ */
/* NO mix-blend-mode any more.
   Screen blend is elegant when it works and renders as *nothing* when
   it doesn't — no error, no clue. It depends on stacking context,
   isolation and paint order all lining up, and it has now failed twice
   here for reasons I could not reproduce.

   A feathered mask does the same job by different means: the clip is a
   dancer on black, the header is near-black, so fading the video's own
   edges to transparent dissolves the rectangle. If the mask is ever
   unsupported you get a soft-edged video instead of a hard box — a
   worse result, never an invisible one. */
/* The vertical seam.
   The clip's left edge is off past the copy and its top and bottom are
   clipped by the header, so the only boundary that can show is the RIGHT
   one, landing mid-header around 1180px. Chrome composites the screen
   blend so cleanly that black contributes exactly nothing and the edge is
   invisible. Safari hands the video to the GPU as its own layer, and that
   path leaves a few levels of lift — enough to draw a faint vertical line
   where the rectangle stops. It does not appear in a screenshot, because
   screenshots come from the software path.

   So rather than rely on the blend being mathematically perfect, the
   video's own edges are faded out. Where there is no hard edge there is
   nothing to catch the light. */
.phead .hv{position:absolute;bottom:-7%;height:112%;width:auto;
opacity:.58;mix-blend-mode:screen;pointer-events:none;
--edge:linear-gradient(90deg,transparent 0%,#000 9%,#000 74%,transparent 99%);
-webkit-mask-image:var(--edge);mask-image:var(--edge);
filter:grayscale(.76) contrast(1.16) brightness(.88)
       sepia(.8) hue-rotate(-5deg) saturate(1.4)}

/* per page: X always, height only where the framing differs */
.page[data-page="register"] .phead .hv{left:640px}
.page[data-page="classes"]  .phead .hv{left:634px}
.page[data-page="teams"]    .phead .hv{left:658px}
.page[data-page="faculty"]  .phead .hv{left:680px;height:95%}
/* Ballet solo. She is framed further right than the others and reaches
   the right edge of frame at full extension, so her fade is tighter on
   that side — 93% instead of 74% — or it would eat her arm. */
.page[data-page="performances"] .phead .hv{left:700px;height:118%;
  --edge:linear-gradient(90deg,transparent 0%,#000 18%,#000 96%,transparent 100%)}

/* horizontal scrim — guarantees the headline sits on darkness.
   Tinted warm now; the violet original used rgba(10,6,14). */
.phead .hscrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:
 linear-gradient(100deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.9) 22%,rgba(14,10,6,.5) 42%,
  rgba(14,10,6,.16) 66%,rgba(14,10,6,.34) 100%)}
/* bottom fade — hands the header off to the page */
.phead .hfade{position:absolute;inset:0;z-index:2;pointer-events:none;background:
 linear-gradient(0deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.12) 54%,transparent 78%)}

/* left-justified copy. .wrap has margin:0 auto and is a flex item,
   so auto margins centre it — padding-left alone does nothing. */
.phead .wrap{max-width:none;margin-left:0;margin-right:auto;
padding-left:clamp(28px,4.6vw,74px);padding-right:36px}
.phead .lede{max-width:36ch}

/* decoration only — drop it where it cannot help */
/* Too narrow to hold her — drop it. Reduced motion is handled in JS
   instead: she stays, resting on her final frame, because what that
   setting asks us to remove is the movement, not the picture. */
@media(max-width:820px){.phead .hv{display:none}}

/* one page per document now — nothing to hide */
.page{display:block !important}

/* ── home: press + lounge photo, now the last content section ──
   The photo used to hang 120px below its section to overlap the one
   after it. At the foot of the page that would collide with the
   closing call to action, so the overlap is removed here only. */
.presszone .photowrap{margin-bottom:0}
.presszone .photowrap::after{display:none}


/* ── founder interviews ── */
.fvgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.fvc{position:relative;display:block;width:100%;text-align:left;padding:0;border:1px solid var(--line);
border-radius:12px;overflow:hidden;background:#131110;cursor:pointer;color:inherit;font:inherit;
transition:border-color .25s,transform .25s}
.fvc:hover{border-color:var(--gold-dp);transform:translateY(-2px)}
.fvc:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.fvs{position:relative;aspect-ratio:16/9;background:#191612;overflow:hidden}
.fvs img{width:100%;height:100%;object-fit:cover;display:block;opacity:.86;transition:opacity .25s}
.fvc:hover .fvs img{opacity:1}
.fvp{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.fvp i{width:58px;height:58px;border-radius:50%;background:rgba(10,9,8,.62);
border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(3px);display:grid;place-items:center;
transition:background .25s,border-color .25s}
.fvc:hover .fvp i{background:var(--gold);border-color:var(--gold)}
.fvp i:after{content:"";margin-left:3px;border-style:solid;border-width:9px 0 9px 15px;
border-color:transparent transparent transparent #fff}
.fvc:hover .fvp i:after{border-left-color:#12100B}
.fvm{padding:15px 16px 17px}
.fvt{display:block;font-weight:600;font-size:15.5px;letter-spacing:-.01em;margin-bottom:4px}
.fvr{display:block;font-size:12.5px;color:var(--w2)}
.fvd{display:block;font-size:12px;color:var(--w3);margin-top:8px}
.fvc iframe{width:100%;aspect-ratio:16/9;display:block;border:0}
@media(max-width:900px){.fvgrid{grid-template-columns:1fr;gap:14px}}


/* ══ mobile navigation ═══════════════════════════════════════
   Below 1000px the link row was hidden with nothing to replace
   it, which left phones able to reach one page. The button and
   panel below are that replacement. The panel is built from the
   same links as the desktop row, so the two cannot drift apart.
   ═══════════════════════════════════════════════════════════ */
.navtog{display:none;position:relative;width:44px;height:44px;padding:0;border:0;
background:transparent;cursor:pointer;z-index:120}
.navtog span{position:absolute;left:11px;width:22px;height:1.5px;background:var(--w);
transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .2s}
.navtog span:nth-child(1){top:16px}
.navtog span:nth-child(2){top:21.5px}
.navtog span:nth-child(3){top:27px}
.navtog[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.navtog[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtog[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.navpanel{position:fixed;inset:0;z-index:110;background:rgba(6,6,6,.97);
backdrop-filter:blur(14px);display:flex;flex-direction:column;justify-content:center;
padding:88px 32px 40px;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s}
.navpanel.on{opacity:1;visibility:visible}
.navpanel a{display:block;padding:13px 0;font-size:clamp(21px,6vw,30px);font-weight:300;
letter-spacing:-.02em;color:var(--w);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.07);
opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.3,1)}
.navpanel.on a{opacity:1;transform:none}
.navpanel a.cur{color:var(--gold)}
.navpanel .npreg{margin-top:22px;border:0;background:var(--gold);color:#12100B;
font-weight:600;font-size:16px;text-align:center;border-radius:9px;padding:15px}
@media(max-width:1000px){
  .navtog{display:block}
}
@media(min-width:1001px){
  .navpanel{display:none}
}

/* ── phones need their margins back ── */
@media(max-width:560px){
  .wrap{padding:0 18px}
}

/* ── filter chips have to be tappable, not just legible ── */
@media (hover:none),(pointer:coarse){
  .chip{padding:12px 15px;font-size:12.5px;min-height:44px;display:inline-flex;
  align-items:center}
}

/* ── footer link columns ── */
.fgr a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.18)}
.fgr a:hover{border-bottom-color:var(--gold);color:var(--gold)}
.fpages{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.fpages a{border-bottom:0}


/* ══ parent resources ══ */
.resgrp{margin-bottom:38px}
.reshd{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--gold);
font-weight:600;margin-bottom:14px}
.reslist{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:12px}
.rescard{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);
border-radius:11px;background:rgba(255,255,255,.015);text-decoration:none;color:inherit;
transition:border-color .25s,background .25s,transform .25s}
.rescard:hover{border-color:var(--gold-dp);background:rgba(210,174,123,.05);transform:translateY(-2px)}
.rescard:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.restype{flex:0 0 auto;font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--gold);
border:1px solid rgba(210,174,123,.35);border-radius:5px;padding:5px 8px}
.resmain{flex:1 1 auto;min-width:0}
.resn{display:block;font-size:15px;font-weight:500;letter-spacing:-.01em;margin-bottom:3px}
.resd{display:block;font-size:12.5px;line-height:1.5;color:var(--w2)}
.resgo{flex:0 0 auto;font-size:17px;color:var(--w3);transition:color .25s,transform .25s}
.rescard:hover .resgo{color:var(--gold);transform:translateY(2px)}
@media(max-width:560px){.reslist{grid-template-columns:1fr}}


/* ══ resources password gate ══ */
.resgate{max-width:430px;margin:8px auto 40px;padding:34px 30px 30px;text-align:center;
border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.rglock{font-size:20px;color:var(--gold);margin-bottom:14px;letter-spacing:.3em}
.resgate h2{font-size:21px;font-weight:600;letter-spacing:-.02em;margin-bottom:9px}
.resgate p{font-size:13.5px;color:var(--w2);line-height:1.55;margin-bottom:18px}
.rghint{display:block;margin-top:5px;color:var(--w3);font-size:12.5px}
.rgrow{display:flex;gap:9px}
.rgrow input{flex:1;min-width:0;font:inherit;font-size:15px;background:var(--bg);color:var(--w);
border:1px solid var(--line);border-radius:9px;padding:13px 15px}
.rgrow input:focus{outline:0;border-color:var(--gold-dp)}
.rgrow .btns{flex:0 0 auto;padding:13px 22px;cursor:pointer}
.rgerr{margin:14px 0 0!important;color:var(--warn);font-size:12.5px}
@keyframes rgshake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.resgate.shake{animation:rgshake .5s}
@media(max-width:460px){.rgrow{flex-direction:column}.rgrow .btns{width:100%}}


/* ══════════════════════════════════════════════════════════════
   MOBILE, PROPERLY

   Everything below overrides earlier rules that treated a phone as
   a degraded desktop. Three things were wrong.

   1. Every clip was switched off below 820px. The site's whole
      character is movement, and phones were getting a brochure.
      They are back on, using encodes about a quarter the weight.

   2. Headlines shrank with the viewport but body copy did not —
      it sat at 11.5-13.5px on every screen. On desktop that reads
      as elegant contrast; on a phone the headline lost half its
      size while the paragraph kept all of its own, so the
      hierarchy flattened and the small text became hard to read.

   3. The hero had no room to breathe.
   ══════════════════════════════════════════════════════════════ */

@media(max-width:820px){
  /* ── the clips come back ── */
  .hero video{display:block}
  .hero .still{display:none}
  .phead .hv{display:block;left:auto;right:-14%;width:auto;height:104%;opacity:.5}

  /* ── the hero gets its presence back ── */
  .hero{min-height:min(90vh,760px)}
  .phead{min-height:clamp(400px,58vh,520px);padding:96px 0 56px}
}

@media (hover:none),(pointer:coarse){
  .reel video{display:block}
  .sv video{display:block}
}

/* ── reading sizes: type a phone can actually read ── */
@media(max-width:820px){
  .lede{font-size:16.5px;line-height:1.62}
  .closing p,.fgr p,.pg .body,.sc .body,.note .body{font-size:15.5px;line-height:1.62}
  .card p,.gx h3+p,.dv p,.ad,.cls .cn,.grp .gt{font-size:14.5px;line-height:1.55}
  .fpi p,.rst p,.rtw p,.dtp p,.dts p,.mo p,.al p{font-size:15px;line-height:1.6}
  .resd{font-size:14px}
  .fine{font-size:13.5px;line-height:1.55}
  p{line-height:1.6}

  /* headlines keep their weight against it */
  .h1 .l1{font-size:clamp(40px,10.5vw,72px)}
  .h1 .l2{font-size:clamp(46px,12.5vw,86px)}
  .h2{font-size:clamp(31px,7.6vw,52px)}
  .sc .h2{font-size:clamp(28px,6.8vw,44px)}
  .shn,.pfn,.csn,.dtnn{font-size:clamp(27px,6.4vw,46px)}

  /* labels stay small but legible */
  .eyebrow{font-size:12px;letter-spacing:.14em}
  .card h3{font-size:18.5px}
  .dn{font-size:20px}
}

@media(max-width:420px){
  .h1 .l1{font-size:clamp(36px,10vw,72px)}
  .h1 .l2{font-size:clamp(41px,11.6vw,86px)}
}


/* ── nothing below the hero may outshout it ──────────────────
   These were all fixed or high-floor sizes, so on a phone a
   statistic rendered at 38px while the hero headline had shrunk
   to 36px. The page led with its footnotes. ──────────────── */
@media(max-width:820px){
  .st .n{font-size:clamp(30px,7vw,70px)}
  .dtcn{font-size:clamp(30px,7vw,62px)}
  .sn{font-size:29px}
  .rtbig{font-size:clamp(26px,6vw,54px)}
  .camp h3{font-size:22px}
  .sig .nm{font-size:21px}
  .tp{font-size:clamp(22px,5vw,30px)}
  /* the oversized background word simply will not fit a phone */
  .gfx-c .word{font-size:clamp(78px,22vw,340px)}
}


/* ── the dead band under the nav ─────────────────────────────
   .page carries 60px of top padding, written for a desktop nav
   that floats over the hero. On a phone the nav is sticky and
   already occupies its own 77px, so that padding rendered as a
   band of black between the bar and the video. ─────────────── */
@media(max-width:820px){
  .page{padding-top:0}
  .hero{min-height:min(86vh,720px)}
}


/* ══════════════════════════════════════════════════════════════
   A READING FLOOR FOR PHONES

   Measured on a 375px screen, the site was rendering body copy at
   12.5px, sub-headings at 11px, captions at 10.5px and tags at
   10px. On a desktop those sit inside a wide, airy layout and read
   as restraint. On a phone they collapse into one grey texture:
   nothing leads, everything is fine print, and the eye has no
   route through the page.

   Apple's own guidance puts body text around 17px and treats 11pt
   as the floor for anything a person has to read. Nothing below is
   larger than it needs to be — it is the same design, sized for
   the distance a phone is actually held at.
   ══════════════════════════════════════════════════════════════ */

@media(max-width:820px){
  /* body copy */
  p,li,dd,dt{font-size:15px;line-height:1.62}
  .fine,.fine *{font-size:13.5px;line-height:1.55}

  /* sub-headings that were smaller than the text beneath them */
  h4,.fgr h4{font-size:15.5px;letter-spacing:-.01em}
  h3{font-size:18px}

  /* key/value rows on the campus and team cards */
  .k,.kk{font-size:12px;letter-spacing:.1em}
  .v,.vv{font-size:14.5px;line-height:1.5}

  /* captions, badges and small print */
  figcaption,.cvcap,.tag{font-size:12.5px}
  .csl,.cnt,.shk,.shw,.shp,.shhl,.c,.fvr,.cln,.yr,.sl,.da,.mg,.mn,
  .pfd,.dtnl,.dtcl,.rtp,.rghint,.pgt,.cld{font-size:14px;line-height:1.5}

  /* labels stay label-sized, but not smaller than this */
  .eyebrow{font-size:12.5px;letter-spacing:.13em}

  /* inline emphasis should never shrink below its paragraph */
  p b,p span,p em,p strong,.shw b,.shp b{font-size:inherit}
}

/* the very narrowest phones give back a little */
@media(max-width:380px){
  p,li{font-size:14.5px}
  .v,.vv{font-size:14px}
}


/* ══════════════════════════════════════════════════════════════
   THE FLOOR, ENFORCED

   The block above lost to selectors like ".card p" and ".tuit .tp",
   which carry more specificity than a bare element. Ordering does
   not help — specificity always wins. This layer is deliberately
   marked important because it is the last word on the smallest
   screens: no text on a phone should be smaller than these values,
   whatever any earlier rule says.
   ══════════════════════════════════════════════════════════════ */

@media(max-width:820px){
  p,li{font-size:15px!important;line-height:1.6!important}
  p b,p span,p em,p strong,p a,li b,li span{font-size:inherit!important}
  h4{font-size:15.5px!important}
  h3{font-size:18px!important}
  .fine,.fine b,.fine span{font-size:13.5px!important;line-height:1.5!important}
  figcaption,.tag,.cvcap{font-size:12.5px!important}
  .k,.kk{font-size:12px!important}
  .v,.vv{font-size:14.5px!important}
  .c,.pp,.csl,.cnt,.shk,.shw,.shp,.shhl,.fvr,.cln,.yr,.sl,.da,
  .mg,.mn,.pfd,.dtnl,.dtcl,.rtp,.pgt,.cld,.ad,.resd{font-size:14px!important}
  .eyebrow{font-size:12.5px!important}
  /* links inside running text follow the text */
  p a,.fgr a,.closing a{font-size:inherit!important}
}
@media(max-width:380px){
  p,li{font-size:14.5px!important}
}


/* ══════════════════════════════════════════════════════════════
   DEPTH ON A SMALL SCREEN

   The desktop page is a composition: five cards across, columns of
   different weights, things sitting beside each other. Collapsed to
   one column it became five identical 339x506 blocks in a row —
   the same shape, the same size, ten screens of it. Nothing leads,
   so it reads as flat however good each piece is.

   The fix is not smaller pictures, it is unequal ones. One card
   runs full width and sets the section; the rest pair off beneath
   it. That single change restores a hierarchy to look at and takes
   roughly 1,500px out of the page.
   ══════════════════════════════════════════════════════════════ */

@media(max-width:820px){

  /* ── programs: one featured, the rest two-up ── */
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cards .card:first-child{grid-column:1 / -1}
  .cards .card:first-child .reel{aspect-ratio:16/10}
  .cards .card .reel{aspect-ratio:3/4}
  .cards .card:first-child h3{font-size:22px}
  .card h3{font-size:16px!important}
  .card .bd{padding:11px 2px 4px}
  .card .bd p{font-size:12.5px!important;line-height:1.4;color:var(--w2)}

  /* the tag was floating in the middle of a tall card; pin it */
  .reel .tag{bottom:9px;left:9px;right:auto;padding:4px 9px}

  /* ── cards should sit on the page, not be cut from it ── */
  .card{border-radius:12px;overflow:hidden;background:#141210;
        box-shadow:0 1px 0 rgba(255,255,255,.05), 0 12px 26px -18px rgba(0,0,0,.9)}
  .reel{border-radius:0}

  /* ── other stacked grids pair off too ── */
  .fgr{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .divs,.gen,.also,.rest,.clg,.sib{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .divs .dv,.gen .gx{padding:14px 13px}
  .clg .clc{padding:13px 11px}

  /* ── less air between sections, more inside them ── */
  .page > section{padding-top:44px!important;padding-bottom:44px!important}
  .page > section.closing{padding-top:58px!important;padding-bottom:58px!important}
}

/* two columns get tight below this, so the widest pairs go back to one */
@media(max-width:360px){
  .divs,.gen,.also,.clg,.sib{grid-template-columns:1fr}
}


/* ══════════════════════════════════════════════════════════════
   SMALLER, SO YOU CAN SEE MORE

   Counter-intuitive but true: the taller the hero, the less of the
   video you see. object-fit:cover scales the clip until it fills
   the box, so a 16:9 frame in a tall portrait window gets its
   sides cut off. At full screen height only about 30% of the frame
   width survived — which is why it read as an abstract smear
   rather than a room full of dancers.

   Halving the hero roughly doubles how much of each frame is
   visible, and gives the page somewhere to go.
   ══════════════════════════════════════════════════════════════ */

@media(max-width:820px){
  .hero{min-height:min(54vh,430px)}
  .hero .wrap{padding-bottom:22px}
  .hero .lede{font-size:14.5px!important;line-height:1.5;max-width:34ch}
  .hero .hacts{margin-top:16px;gap:8px}
  .hero .btns,.hero .btn{padding:11px 15px;font-size:13px}

  /* page heads follow the same logic */
  .phead{min-height:clamp(300px,40vh,380px)!important;padding:78px 0 34px!important}

  /* ── the genre cards come down too ── */
  .cards .card:first-child .reel{aspect-ratio:16/9}
  .cards .card .reel{aspect-ratio:1/1}
  .cards .card:first-child h3{font-size:19px!important}
  .card .bd{padding:9px 2px 2px}
}

@media(max-width:380px){
  .hero{min-height:min(52vh,400px)}
}


/* ══════════════════════════════════════════════════════════════
   LINE BREAKS

   Twenty-one headings across the site were dropping their last
   word or two onto a line of their own — "Find your fit." ending
   with a line 11% full. On a wide screen these fit; squeezed to a
   phone they break wherever the width runs out, and a stranded
   word reads as a mistake.

   text-wrap:balance asks the browser to even the lines out
   instead, so a two-line heading splits near the middle. It costs
   nothing where it is unsupported — the text simply wraps as it
   does today.

   pretty does the milder version for body copy: it will not leave
   a single word alone on the last line.
   ══════════════════════════════════════════════════════════════ */

h1,h2,h3,h4,.h1,.h2,.l1,.l2,.lt,.shn,.dtnn,.csn,.pfn,.dn,.an,
.resn,.fvt,.card h3,.gx h3,.fpi h3,.rst h3,.rtw h3,.mo h3,.al h3,
.camp h3,.eyebrow,.reshd{text-wrap:balance}

p,.lede,.resd,.ad,.cln,.fine{text-wrap:pretty}

/* a few headings read better with their own break kept intact */
@media(max-width:820px){
  .h1 .l1,.h1 .l2{display:block}
  /* never strand a short word after a long one in a button */
  .btns,.btn{text-wrap:nowrap}
}


/* ══════════════════════════════════════════════════════════════
   THE HERO OVERLAY, TURNED THE RIGHT WAY UP

   The scrim is two gradients: one running left-to-right at 94deg,
   heavy on the left, and a gentler one from the bottom. That is
   correct for the desktop layout, where the headline sits against
   the left edge.

   On a phone the headline sits along the bottom instead, so the
   darkening was on the wrong axis: the left edge was weighted for
   no reason, which is what reads as "off centre", and the bottom
   never got dark enough to hold the text — you could see the lit
   footage running underneath it.

   Below 820px it becomes a straight vertical wash: a little at the
   top so the nav stays legible, clear through the middle so the
   footage is actually visible, and solid where the words are.
   ══════════════════════════════════════════════════════════════ */

@media(max-width:820px){
  .hero .scrim{background:linear-gradient(180deg,
    rgba(11,10,9,.62) 0%,
    rgba(11,10,9,.16) 24%,
    rgba(11,10,9,.30) 52%,
    rgba(11,10,9,.80) 78%,
    rgba(11,10,9,.96) 93%,
    rgba(11,10,9,1) 100%)}
  /* a screen-blend highlight aimed at the right of a wide frame only
     lifts the bottom corner on a narrow one, fighting the scrim */
  .hero .tintv{display:none}
  .hin{padding-bottom:0}

  /* two-part headings break at the phrase, never mid-sentence */
  .h2 .lt,.h1 .lt{display:block}

  /* ── founder cards: let the artwork sit inside its frame ── */
  .fvc{padding:9px;background:#141210}
  .fvs{border-radius:8px}
  .fvm{padding:13px 7px 5px}
  .fvp i{width:52px;height:52px}
}


/* ══════════════════════════════════════════════════════════════
   WHY THE GENRE CLIPS LOOKED DEAD ON A PHONE

   .reel video sits at opacity:0 and is faded up by .card:hover.
   A phone has no hover, so switching display back on was not
   enough — the clip was playing correctly, underneath a still, at
   zero opacity. Invisible, not stopped.

   On touch the clip is simply visible. Its own poster frame covers
   the moment before playback, so nothing flashes.
   ══════════════════════════════════════════════════════════════ */

@media (hover:none),(pointer:coarse){
  .reel video{opacity:1;z-index:2}
  .reel img{opacity:0;transition:opacity .5s ease}
  .sv video{opacity:1}
  /* until a clip is actually rolling, keep the still underneath */
  .reel video[data-idle] ~ img{opacity:1}
}


/* ══════════════════════════════════════════════════════════════
   HOMEPAGE, ROUND THREE
   ══════════════════════════════════════════════════════════════ */

@media(max-width:820px){

  /* ── 1. a real margin. 18px was technically not touching the
         edge, but at 15px type it reads as though it is. ── */
  .wrap{padding:0 22px}
  .photowrap{width:100%;max-width:100%}

  /* ── 2. the hero: headline on the footage, everything else
         below it on black.

         The video is a band across the top rather than the whole
         hero. The headline is pushed down so it lands inside the
         lower part of that band, clear of the edge, and the lede
         and buttons fall past it onto the page. ── */
  .hero{min-height:0!important;display:block;padding:0 0 34px;background:var(--bg)}
  .hero video,.hero .still{position:absolute;top:0;left:0;width:100%;
    height:352px;object-fit:cover;object-position:50% 42%}
  .hero .scrim{position:absolute;top:0;left:0;right:auto;bottom:auto;
    width:100%;height:352px;
    background:linear-gradient(180deg,
      rgba(11,10,9,.58) 0%,
      rgba(11,10,9,.06) 26%,
      rgba(11,10,9,.30) 54%,
      rgba(11,10,9,.86) 84%,
      var(--bg) 100%)}
  .hin{padding:196px 0 0;max-width:none}
  .hin .h1{margin:10px 0 0}
  .hero .lede{margin-top:20px}
  .hero .hacts{margin-top:18px}

  /* ── 3. genre clips: keep the dancers' heads in frame.
         The source is 4:5 portrait, so any wide crop takes the
         middle and loses the top. 4:3 for the feature costs far
         less than 16:9 did, and both are biased upwards. ── */
  .cards .card:first-child .reel{aspect-ratio:4/3}
  .cards .card .reel{aspect-ratio:1/1}
  .reel video,.reel img{object-position:50% 16%}
  .cards .card:first-child .reel video,
  .cards .card:first-child .reel img{object-position:50% 12%}

  /* ── 4. founder interviews: one lead, two beneath ── */
  .fvgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .fvgrid .fvc:first-child{grid-column:1 / -1}
  .fvgrid .fvc:first-child .fvs{aspect-ratio:16/9}
  .fvgrid .fvc .fvs{aspect-ratio:4/3}
  .fvgrid .fvc:first-child .fvt{font-size:16.5px}
  .fvt{font-size:13.5px!important;line-height:1.3}
  .fvr{font-size:12px!important}
  .fvd{font-size:11.5px!important;margin-top:5px}
  .fvgrid .fvc:not(:first-child) .fvp i{width:42px;height:42px}
  .fvgrid .fvc:not(:first-child) .fvp i:after{border-width:7px 0 7px 12px}
}


/* ── the hero text lost its side margin ─────────────────────────
   .hin is the same element as .wrap on that block, so setting the
   padding shorthand to "196px 0 0" wiped out the 22px the wrap was
   providing. Restated in full. ──────────────────────────────── */
@media(max-width:820px){
  .hin{padding:196px 22px 0!important}
}


/* ══════════════════════════════════════════════════════════════
   THE OTHER TEN PAGES, GIVEN THE SAME TREATMENT

   Everything settled on the homepage, applied to the page heads:

     · the clip is a band across the top, not a panel pinned to the
       right at half opacity — on a narrow screen that read as a
       smear down one edge
     · the scrim runs top-to-bottom, because the headline sits at
       the bottom here too
     · the headline lands low inside the footage, clear of the edge
     · the lede and buttons fall below onto black
     · 22px of margin, the same as everywhere else
   ══════════════════════════════════════════════════════════════ */

@media(max-width:820px){
  .phead{min-height:0!important;display:block;padding:0 0 32px!important;
         background:var(--bg);position:relative;overflow:hidden}

  .phead .hv{position:absolute!important;top:0;left:0!important;right:auto!important;
    width:100%!important;height:296px!important;object-fit:cover;
    object-position:50% 20%;opacity:1!important;display:block!important;z-index:1}

  .phead .hscrim{position:absolute;top:0;left:0;right:auto;bottom:auto;
    width:100%;height:296px;z-index:2;
    background:linear-gradient(180deg,
      rgba(11,10,9,.58) 0%,
      rgba(11,10,9,.08) 27%,
      rgba(11,10,9,.34) 56%,
      rgba(11,10,9,.88) 85%,
      var(--bg) 100%)}

  /* these were built for the wide composition and only add haze here */
  .phead .hfade,.phead .plit{display:none}
  .phead .gfx{opacity:.22}

  .phead .wrap{position:relative;z-index:6;padding:152px 22px 0!important;max-width:none}
  .phead .h1{margin:10px 0 0}
  .phead .lede{margin-top:18px}
  .phead .hacts{margin-top:16px;gap:8px}
  .phead .hacts .btns,.phead .hacts .btn,.phead .icsall{padding:11px 15px;font-size:13px}

  /* pages whose head has no clip keep the same rhythm */
  .phead:not(:has(.hv)) .wrap{padding-top:34px!important}
}


/* ══════════════════════════════════════════════════════════════
   THE REMAINING GRIDS

   Same reasoning as the homepage. Anything that is a label and a
   short value pairs off — two of those side by side is denser and
   easier to scan than the same content stacked, and it gives the
   page a rhythm instead of a column.

   Cards carrying a real paragraph stay full width. Two columns of
   prose at 155px is a newspaper, not a phone. Those get tighter
   padding instead, and the same raised treatment so they read as
   objects sitting on the page.
   ══════════════════════════════════════════════════════════════ */

@media(max-width:820px){
  /* short, scannable — pair them */
  .cinfo,.cfeat,.both,.more,.fmin,.progs,.rsteps,.mcup,.hl,.dtsch{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .cinfo > *,.cfeat > *,.both > *,.more > *,.fmin > *,.rsteps > *{padding:13px 12px}

  /* prose stays full width, but closer in */
  .fp,.dtpol{grid-template-columns:1fr!important;gap:10px}
  .fpi,.dtpol > *{padding:15px 16px}

  /* everything in these grids reads as a card */
  .fpi,.dtpol > *,.cinfo > *,.cfeat > *,.both > *,.more > *,.fmin > *,
  .rsteps > *,.progs > *,.mcup > *,.hl > *{
    border-radius:11px;background:rgba(255,255,255,.022);
    border:1px solid var(--line)}
  .bone .fpi,.bone .dtpol > *,.bone .cinfo > *,.bone .cfeat > *{
    background:rgba(22,20,17,.05);border-color:var(--line-d)}

  /* any picture in those grids keeps heads in shot */
  .progs img,.progs video,.mcup img,.hl img,.cfeat img{object-position:50% 18%}
}

/* two columns of anything get cramped down here */
@media(max-width:360px){
  .cinfo,.cfeat,.both,.more,.fmin,.progs,.rsteps,.mcup,.hl,.dtsch{
    grid-template-columns:1fr!important}
}


/* ══ classes page ══════════════════════════════════════════════ */
.filthint{font-size:14px;line-height:1.55;color:var(--w2);margin:10px 0 0;max-width:56ch}
.pdfrow{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.pdfrow .btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center}

@media(max-width:820px){
  /* the giant word behind the page title was too faint to read as a word */
  .phead .gfx{opacity:.4}

  /* schedule PDFs sit side by side */
  .pdfrow .btn{padding:11px 8px;font-size:12.5px}
  .pdfrow .btn .a{display:none}

  /* four divisions across, not four stacked */
  .divs{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px}
  .divs .dv{padding:11px 7px;text-align:center}
  .dn{font-size:13.5px!important;line-height:1.2}
  .da{font-size:11px!important;display:block;margin-top:3px}
  .divs .dv p{display:none}

  /* beyond-the-weekly-class: three across */
  .more{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px}
  .more > *{padding:11px 8px}
  .more h3{font-size:13.5px!important;line-height:1.25}
  .more p{font-size:11.5px!important;line-height:1.4}

  /* filter chips small enough to sit on one line per group */
  .filt .chip{padding:8px 10px!important;font-size:11.5px!important;min-height:0!important;
              letter-spacing:.01em}
  .filt .fg{gap:5px}
  .filthint{font-size:13.5px}

  /* trial buttons matched in size, side by side */
  .hacts .btns{flex:1 1 0;min-width:0;justify-content:center;text-align:center;
               padding:12px 8px;font-size:12.5px}
  .hacts .btns .a{display:none}
}
@media(max-width:400px){
  .divs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .more{grid-template-columns:1fr!important}
}


/* ── the trial buttons ──────────────────────────────────────────
   Matching their widths was only half the job: an earlier rule set
   text-wrap:nowrap on every button, so "Book a free trial ·
   Sammamish" ran straight out of its box rather than wrapping
   inside it. These two are allowed to take a second line. ────── */
@media(max-width:820px){
  .hacts .btns,.hacts .btn{
    white-space:normal!important;text-wrap:balance;
    line-height:1.25;padding:11px 10px;font-size:12.5px;
    display:flex;align-items:center;justify-content:center;text-align:center;
    min-height:46px}

  /* ── cards in a row should end in a row ──────────────────────
     Each card is as tall as the tallest, but their contents were
     top-aligned, so the three links finished at three different
     heights. Pushing the link down with auto margin lands them on
     the same line. ─────────────────────────────────────────── */
  .more .mo,.divs .dv,.cfeat > *,.both > *,.fmin > *,.progs > *{
    display:flex;flex-direction:column}
  .more .mo .mg,.progs > * .mg{margin-top:auto;padding-top:9px}
  .more .mo p{flex:1 1 auto}
  .more .mo .mn{order:-1}
}


/* ══════════════════════════════════════════════════════════════
   PROSE AND CARD TEXT ARE NOT THE SAME THING

   The reading floor set every paragraph to 15px, which was right
   for running prose — a lede, a fine-print explanation, anything
   you actually read a few sentences of.

   It was wrong inside cards. A card holds one or two lines that
   are scanned, not read, and at 15px with 1.6 line-height they
   swell and space out until they look like an entirely different
   design from the cards beside them. That is why the nine-genre
   section looked heavier than everything around it: its own 12px
   was being overridden, while the cards next to it carried
   explicit sizes that escaped the floor.

   Card text is set back to a scanning size here, in one place, so
   this cannot drift section by section.
   ══════════════════════════════════════════════════════════════ */

@media(max-width:820px){
  .gx p,.dv p,.mo p,.gcx p,.cf p,.bo p,.al p,.mcu p,.hlb p,
  .rst p,.rtw p,.dts p,.dtp p,.fpi p,.cfeat p,.both p,.fmin p,
  .progs p,.cinfo p,.rsteps p{
    font-size:12.5px!important;line-height:1.5!important}

  .gx h3,.gcx h3,.cf h3,.bo h3{font-size:14.5px!important;line-height:1.25}
  .gx{padding:12px 12px 13px}
  .gen{gap:8px}
}


/* ── the tile is a card, not a button ──────────────────────────
   Wrapping the whole tile in an anchor meant a tap anywhere —
   on the heading, on the paragraph, on empty space — navigated.
   The tile is now a plain block and only the line at its foot is
   a link, which is the only part that looks like one.

   That link also has to stay on one line: "Upcoming dates ↘" was
   long enough to push its arrow onto a second line, so the three
   tiles ended at different heights however well they were
   otherwise aligned. ─────────────────────────────────────────── */
.mo{cursor:default}
a.mg{display:inline-block;text-decoration:none;color:var(--gold);cursor:pointer}
a.mg:hover{color:var(--gold-lt)}

@media(max-width:820px){
  .more .mo .mg{font-size:11.5px!important;white-space:nowrap;letter-spacing:-.005em}
  .more .mo{padding:12px 10px 13px}
  .more .mo h3{font-size:13px!important;line-height:1.2}
  .more .mo .mn{font-size:10.5px!important;letter-spacing:.07em}
  .more .mo p{font-size:11.5px!important;line-height:1.45}
}

@media(max-width:820px){
  /* "Upcoming dates" is the longest of the three and sets the size */
  .more .mo{padding:12px 8px 12px}
  .more .mo .mg{font-size:10.5px!important}
  .more .mo .mg .a{margin-left:3px}
}


/* ══════════════════════════════════════════════════════════════
   FOUR CORRECTIONS
   ══════════════════════════════════════════════════════════════ */

@media(max-width:820px){

  /* ── 1. the footer went up with the reading floor and should
         not have. It is reference material — addresses, phone
         numbers, a list of pages — read once and then scanned. ── */
  .fgr h4{font-size:11.5px!important;letter-spacing:.06em;text-transform:uppercase;
          color:var(--w3);margin-bottom:9px}
  .fgr p,.fgr a{font-size:13px!important;line-height:1.85!important}
  .fpages a{font-size:13px!important}
  footer{padding-top:38px;padding-bottom:34px}

  /* ── 2. only the eyebrow and the headline belong on the footage.
         The lede was starting at about 331px against a band that
         ends at 352, so it sat half on the video and half off —
         which is exactly the sort of near-miss that reads as
         sloppy. The headline is pushed down to finish at the foot
         of the clip and everything after it clears the edge. ── */
  .hin{padding-top:222px!important}
  .hero .lede{margin-top:26px}
  .hero .scrim{background:linear-gradient(180deg,
    rgba(11,10,9,.58) 0%,
    rgba(11,10,9,.10) 22%,
    rgba(11,10,9,.38) 46%,
    rgba(11,10,9,.86) 74%,
    rgba(11,10,9,.97) 92%,
    var(--bg) 100%)}

  /* ── 3. the Teams clip is the narrowest on the site at 414x720,
         so a full-width band crops to 45% of its height and the
         dancer fills the frame. A shorter band gives it far less
         weight on the page. ── */
  .page[data-page="teams"] .phead .hv{height:214px!important;object-position:50% 12%}
  .page[data-page="teams"] .phead .hscrim{height:214px}
  .page[data-page="teams"] .phead .wrap{padding-top:96px!important}

  /* ── 4. the team programmes carry a paragraph each — too much
         to read two abreast. ── */
  .progs{grid-template-columns:1fr!important;gap:10px}
  .progs > *{padding:15px 16px}
}


/* ══════════════════════════════════════════════════════════════
   FIVE FIXES, THREE OF THEM MINE
   ══════════════════════════════════════════════════════════════ */

@media(max-width:820px){

  /* ── 1. the bio panel. My "pair off the grids" rule listed
         .fmin without my realising it is the faculty modal, not a
         card grid — so the photo took one column and a 2,000-word
         biography was poured down the other. It is a single
         column: portrait first, then the words. ── */
  .fmin{grid-template-columns:1fr!important;gap:16px!important;padding:20px!important;
        display:block!important}
  .fmphoto{width:100%;max-width:200px;margin:0 auto 4px}
  .fmphoto img{width:100%;height:auto;border-radius:10px;display:block}
  .fmbody{width:100%}
  .fmtext{font-size:14px!important;line-height:1.72!important}
  .fmin .h2{font-size:23px!important}
  .fmin > *{padding:0!important;border:0!important;background:none!important}

  /* ── 2. faculty filters on one line ── */
  .instr .chip,.ffilt .chip,.filt .chip{padding:7px 9px!important;font-size:10.5px!important}
  .ffilt,.instr .filt{gap:4px}

  /* ── 3. price beside the name, not stranded below it.
         The row is a two-column grid, but the description carries
         grid-column:1/-1 and sits between the name and the price
         in the source — so it claimed row two and pushed the price
         down to row three on its own. Both are now placed
         explicitly. ── */
  .ao{grid-template-columns:1fr auto!important;column-gap:12px;row-gap:4px}
  .ao .an{grid-row:1;grid-column:1;align-self:baseline}
  .ao .ap{grid-row:1;grid-column:2;align-self:baseline;font-size:14px!important}
  .ao .ad{grid-row:2;grid-column:1/-1;font-size:12px!important;line-height:1.45}

  /* ── 4. the footer list, two columns instead of a long ladder ── */
  .fpages{display:grid!important;grid-template-columns:1fr 1fr;gap:6px 14px}
  .fgr{gap:22px 14px}
}

/* ── 5. the highlighted sentence was light gold on a light panel.
       There are two .hl rules — a dark one written for pale
       backgrounds and a light one for dark ones — and the light
       one came last, so it won everywhere. The fine print sits on
       bone, which is why parts of that sentence looked washed out
       or clipped. ── */
.bone .hl,.bone b.hl{color:var(--gold-ink)!important}


/* ══════════════════════════════════════════════════════════════
   .hl IS TWO DIFFERENT THINGS

   One is a photo grid: display:grid, a hairline background showing
   through 1px gaps, rounded corners, overflow hidden.

   The other is <b class="hl"> — the highlighted sentence inside
   the tuition fine print.

   The <b> was inheriting all of it. Each line became a grid item,
   the grid's background painted a grey panel behind them, and
   overflow:hidden clipped the first letter of every line. That is
   the box in the screenshot, and why "Bank" read as "3ank".

   The inline use is restored to being inline.
   ══════════════════════════════════════════════════════════════ */

b.hl,strong.hl,em.hl,span.hl{
  display:inline!important;
  grid-template-columns:none!important;
  background:none!important;
  border-radius:0!important;
  overflow:visible!important;
  gap:0!important;
  padding:0!important;
  border:0!important}

/* ── the footer, smaller again ── */
@media(max-width:820px){
  .fgr h4{font-size:10px!important;letter-spacing:.08em;margin-bottom:7px}
  .fgr p,.fgr a,.fpages a{font-size:11.5px!important;line-height:1.75!important}
  .fgr{gap:18px 12px}
  footer{padding-top:30px;padding-bottom:28px}
  .fpages{gap:4px 12px}
}

/* ── the Ball title reads as one thing, in one colour ── */
.shnw .lt{color:inherit}


/* ══════════════════════════════════════════════════════════════
   MASTER CLASSES

   The guest-artist cards are meant to be near-black tiles with
   white type on them. My card treatment listed ".hl > *", which is
   exactly those tiles, and repainted them at 2% white — so on the
   bone section they turned pale and the white names went with
   them. Their own colours are put back.
   ══════════════════════════════════════════════════════════════ */

.hl > .hlc{background:#0A0A0B!important;border:0!important;border-radius:0!important}
.hlc .hlb b{color:#fff}
.hlc .hlb .yr{color:var(--gold)}
.hlc .hlb .cr{color:rgba(255,255,255,.72)}
.rest .rc figcaption,.rest .rc .rcn{color:#fff}

/* the four facts at the top of the page say what they are */
.cll{font-size:10px;letter-spacing:.12em;text-transform:uppercase;
     color:var(--gold);font-weight:600;margin-bottom:7px}

@media(max-width:820px){
  .clg{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .clg .clc{padding:13px 12px;text-align:left}
  .cll{font-size:9.5px;margin-bottom:5px}
  .cld{font-size:17px!important;font-weight:600;line-height:1.1;color:#fff}
  .cln{font-size:11.5px!important;line-height:1.4;margin-top:5px}
  .hlc .hlb{padding:15px 15px 17px}
  .hlc .hlb b{font-size:17px!important;line-height:1.2;display:block}
  .hlc .hlb .cr{font-size:12.5px!important;line-height:1.5;margin-top:6px}
  .hlc .hlb .yr{font-size:10.5px!important;letter-spacing:.09em}
}


/* ══════════════════════════════════════════════════════════════
   CAMPUS INFO ROWS ARE NOT CARDS

   Each row is a fixed 92px label beside its value. At full width
   that leaves the value about 227px, which is comfortable. My
   pair-them-off rule squeezed two rows into the space of one, so
   the value got roughly 56px: addresses broke after two words,
   the Black Diamond email ran out of its box and across the
   label beside it.

   These go back to full width. Some things are already the right
   shape and pairing them makes them worse.
   ══════════════════════════════════════════════════════════════ */

@media(max-width:820px){
  .cinfo{grid-template-columns:1fr!important;gap:0!important}
  .cinfo > *{padding:11px 0!important;border:0!important;background:none!important;
             border-radius:0!important;border-bottom:1px solid var(--line)!important}
  .ci{grid-template-columns:88px 1fr!important;gap:10px!important;align-items:start}
  .ci .k{font-size:11px!important;letter-spacing:.09em;padding-top:2px}
  .ci .v{font-size:14px!important;line-height:1.45!important;overflow-wrap:anywhere}

  /* ── the three shared standards read as one point each ── */
  .both{grid-template-columns:1fr!important;gap:9px}
  .both > *{padding:15px 16px}
  .both h3{font-size:16px!important}
  .both p{font-size:13px!important;line-height:1.55}

  /* ── the highlighted guest artists, one above the other ── */
  .hl{grid-template-columns:1fr!important}
  .hl .hlc img{aspect-ratio:16/10;object-position:50% 22%}
}


/* ══════════════════════════════════════════════════════════════
   THE NEW HEAD CLIPS ARE 16:9, SO THE BAND IS TOO

   Every earlier clip was portrait — 414 to 970 pixels wide against
   720 tall — which is why a full-width band had to crop them, and
   why Teams only ever showed a third of its frame.

   These five are 16:9. Matching the band to that shape means the
   whole frame is visible: nothing cropped, no object-position
   guesswork about where the dancer stands. The band is shorter as
   a result, which also answers the note about the Teams head being
   too big.

   Faculty and Register still carry portrait clips, so they keep
   the fixed height that suits them.
   ══════════════════════════════════════════════════════════════ */

@media(max-width:820px){
  .page[data-page="classes"] .phead .hv,
  .page[data-page="teams"] .phead .hv,
  .page[data-page="performances"] .phead .hv,
  .page[data-page="campuses"] .phead .hv,
  .page[data-page="dates"] .phead .hv,
  .page[data-page="register"] .phead .hv{
    height:auto!important;aspect-ratio:16/9;object-fit:cover;object-position:50% 50%}

  .page[data-page="classes"] .phead .hscrim,
  .page[data-page="teams"] .phead .hscrim,
  .page[data-page="performances"] .phead .hscrim,
  .page[data-page="campuses"] .phead .hscrim,
  .page[data-page="dates"] .phead .hscrim,
  .page[data-page="register"] .phead .hscrim{
    height:auto;aspect-ratio:16/9}

  .page[data-page="classes"] .phead .wrap,
  .page[data-page="teams"] .phead .wrap,
  .page[data-page="performances"] .phead .wrap,
  .page[data-page="campuses"] .phead .wrap,
  .page[data-page="dates"] .phead .wrap,
  .page[data-page="register"] .phead .wrap{padding-top:104px!important}

  /* the Teams override from when its clip was portrait no longer applies */
  .page[data-page="teams"] .phead .hv{height:auto!important}
  .page[data-page="teams"] .phead .hscrim{height:auto}
}


/* ══════════════════════════════════════════════════════════════
   TWO HERO CORRECTIONS

   1. The eyebrow line is gold. Against a flat dark panel that
      reads well, but every page head now has moving footage
      behind it, and gold on a lit frame is the first thing to
      disappear. A light grey holds against whatever the video is
      doing at that moment.

   2. The Dates clip has its dancer at 52-89% across the frame —
      hard right. On desktop the video block already sits to the
      right of the headline, so she ended up crowding the far
      edge. Mirroring the footage moves her to 11-48%, which puts
      her on the other side of her own frame and back into the
      composition. Nothing else about the clip changes.
   ══════════════════════════════════════════════════════════════ */

@media(max-width:820px){
  .phead .eyebrow{color:rgba(255,255,255,.78)!important;
                  text-shadow:0 1px 12px rgba(0,0,0,.55)}
}




/* ══════════════════════════════════════════════════════════════
   ANCHOR THE DATES CLIP TO THE RIGHT EDGE, NOT THE LEFT

   Every page-head clip is positioned with a fixed offset from the
   left — left:640px and similar. On a 1440px screen that lands the
   Dates dancer at roughly x 1076-1386, which is where she should
   be. On a 1280px laptop it puts her at exactly the same place,
   except the screen now ends at 1280, so half of her is gone. At
   1100px she is almost entirely off the page.

   Anchoring to the right instead keeps her a constant distance
   from the right edge whatever the window is doing, which is what
   "far right, clear of the text" actually requires:

     1440px  ->  subject at 1038-1348
     1280px  ->  subject at  878-1188
     1100px  ->  subject at  698-1008

   The headline never reaches past about 800px at those widths, so
   they no longer meet. The left edge of the clip is faded further
   in as well, so nothing hard-edged approaches the copy.
   ══════════════════════════════════════════════════════════════ */




/* ══════════════════════════════════════════════════════════════
   EVERY PAGE-HEAD CLIP ANCHORED TO THE RIGHT

   All seven were positioned with a fixed offset from the left, so
   the dancer stayed put while the window shrank and eventually
   walked off the right-hand edge. Anchoring to the right holds her
   a constant distance from that edge instead.

   The offset differs per clip because the subject sits in a
   different part of each frame — Classes is 33% across, Campuses
   is 72%. Each value is set so the dancer clears the headline on a
   1280px laptop, measured rather than guessed.

   The left edge of every clip is faded further in as well, so no
   hard rectangle edge approaches the copy.
   ══════════════════════════════════════════════════════════════ */

@media(min-width:821px){
  /* head-classes: subject sits 33-69% across a 856px block */
  .page[data-page="classes"] .phead .hv{left:auto!important;right:-40px}
  /* head-teams: subject sits 46-77% across a 856px block */
  .page[data-page="teams"] .phead .hv{left:auto!important;right:20px}
  /* head-performances: subject sits 60-100% across a 902px block */
  .page[data-page="performances"] .phead .hv{left:auto!important;right:120px}
  /* head-facility: subject sits 72-94% across a 856px block */
  .page[data-page="campuses"] .phead .hv{left:auto!important;right:180px}
  /* head-dates: subject sits 57-91% across a 838px block */
  .page[data-page="dates"] .phead .hv{left:auto!important;right:130px}
  /* head-faculty: subject sits 53-91% across a 550px block */
  .page[data-page="faculty"] .phead .hv{left:auto!important;right:180px}
  /* head-register: subject sits 42-78% across a 494px block */
  /* new 16:9 clip — dancer sits 42-97% across an 856px block */
  .page[data-page="register"] .phead .hv{left:auto!important;right:-10px}


}


/* ══════════════════════════════════════════════════════════════
   THE HARD EDGE, BACK AND GONE AGAIN

   The clip is a rectangle of footage on a near-black page, and the
   only thing dissolving it is a mask that fades its edges out. The
   original gradient faded both sides — transparent at 0% and at
   99%.

   Deepening the left fade, I wrote "#000 100%" and left the right
   edge fully opaque. That was invisible while the clips ran off
   the side of the screen. Right-anchoring them brought that edge
   back inside the window, which is the line you are seeing.

   It does not show in a screen capture because the step is a
   couple of luminance levels against near-black — below what an
   8-bit PNG preserves after the compositor rounds it, but well
   within what an eye picks up on a large panel.

   Both sides fade again. Where the browser supports compositing
   two masks, the top and bottom fade too, so the rectangle has no
   hard edge at all.
   ══════════════════════════════════════════════════════════════ */

@media(min-width:821px){
  .phead .hv{
    --edge:linear-gradient(90deg,transparent 0%,#000 26%,#000 76%,transparent 100%);
    -webkit-mask-image:var(--edge);
    mask-image:var(--edge)}
}

@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in){
  @media(min-width:821px){
    .phead .hv{
      --edgev:linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
      -webkit-mask-image:var(--edge),var(--edgev);
      -webkit-mask-composite:source-in;
      mask-image:var(--edge),var(--edgev);
      mask-composite:intersect}
  }
}


/* the Camp Apex key art fills its square, replacing the placeholder box */
.aimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}