/* Hollins High School -- concept redesign
   Display: Newsreader (variable serif). Text: Public Sans (variable).
   Both self hosted, latin subset, one file each. */

@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/newsreader.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/publicsans.woff2) format("woff2")}

:root{
  --blue:#05509E;
  --blue-d:#04407D;
  --blue-dd:#062F58;
  --blue-l:#EAF2FA;
  --blue-ll:#F4F8FC;
  --gold:#C9A227;
  --ink:#0F1418;
  --body:#454C55;
  --grey:#6B727C;
  --rule:#E4E7EC;
  --rule-d:#CFD4DB;
  --tint:#F7F7F5;
  --band:#F2F5F9;
  --paper:#FCFBF9;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

  /* accents sampled from the school's own program crests */
  --aea:#E8622A;      /* Academy of Entertainment Arts */
  --cul:#4B3B7C;      /* Academy of Culinary Arts */
  --cam:#1E3A8A;      /* Cambridge */
  --ath:#05509E;      /* Royals athletics */

  --r-xs:3px; --r-sm:4px; --r:6px; --r-lg:8px; --r-xl:10px;
  --sh-1:0 1px 2px rgba(15,20,24,.05), 0 2px 6px rgba(15,20,24,.06);
  --sh-2:0 2px 4px rgba(15,20,24,.04), 0 10px 24px -6px rgba(15,20,24,.13);
  --sh-3:0 6px 12px -4px rgba(15,20,24,.08), 0 24px 48px -12px rgba(15,20,24,.20);
  --sh-blue:0 10px 22px -8px rgba(5,80,158,.42), 0 24px 52px -16px rgba(5,80,158,.30);

  --sp:clamp(50px,6.5vw,92px);
  --gut:clamp(20px,4vw,52px);
  --max:1240px;
  --ease:cubic-bezier(.22,.72,.2,1);
}
body{position:relative}
body::before{
  content:"";position:absolute;inset:0;z-index:400;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--sans);font-size:16.5px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:600;letter-spacing:-.014em;margin:0;line-height:1.14}
p{margin:0}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block;height:auto}
button{font:inherit;color:inherit;background:none;border:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:10px 16px;z-index:300}
.skip:focus{left:0}

.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
.ic-solid{fill:currentColor;stroke:none}
.ic.ic-ph{fill:currentColor;stroke:none}
.ic-sm{width:16px;height:16px}
.ic-lg{width:28px;height:28px;stroke-width:1.5}

.eyebrow{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:8px;
}
.eyebrow.mute{color:var(--grey)}
.num{font-variant-numeric:tabular-nums}

/* ---------- waves as masks on the band itself ----------
   The band's own background, pattern included, is clipped into the wave shape,
   so a pattern runs right to the curve instead of stopping at a strip edge.
   The band also overlaps its neighbour by the wave height, so whatever sits
   behind shows through the transparent part. */
:root{--wh:clamp(78px,9.5vw,158px)}
.wave-top,.wave-bot,.wave-both{position:relative;z-index:2}
.wave-top{margin-top:calc(var(--wh) * -1);padding-top:calc(var(--sp) + var(--wh))}
.wave-bot{margin-bottom:calc(var(--wh) * -1);padding-bottom:calc(var(--sp) + var(--wh))}
.wave-both{margin-top:calc(var(--wh) * -1);margin-bottom:calc(var(--wh) * -1);
  padding-top:calc(var(--sp) + var(--wh));padding-bottom:calc(var(--sp) + var(--wh))}

.wave-top{
  -webkit-mask-image:var(--wtop),linear-gradient(#000,#000);
  mask-image:var(--wtop),linear-gradient(#000,#000);
  -webkit-mask-size:100% var(--wh),100% calc(100% - var(--wh) + 1px);
  mask-size:100% var(--wh),100% calc(100% - var(--wh) + 1px);
  -webkit-mask-position:top left,bottom left;mask-position:top left,bottom left;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.wave-bot{
  -webkit-mask-image:linear-gradient(#000,#000),var(--wbot);
  mask-image:linear-gradient(#000,#000),var(--wbot);
  -webkit-mask-size:100% calc(100% - var(--wh) + 1px),100% var(--wh);
  mask-size:100% calc(100% - var(--wh) + 1px),100% var(--wh);
  -webkit-mask-position:top left,bottom left;mask-position:top left,bottom left;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
/* A wave band overlaps its neighbours by the wave height, so those neighbours
   must reserve that much clearance or their content lands inside the curve. */
.wave-both{
  -webkit-mask-image:var(--wtop),linear-gradient(#000,#000),var(--wbot);
  mask-image:var(--wtop),linear-gradient(#000,#000),var(--wbot);
  -webkit-mask-size:100% var(--wh),100% calc(100% - (var(--wh) * 2) + 2px),100% var(--wh);
  mask-size:100% var(--wh),100% calc(100% - (var(--wh) * 2) + 2px),100% var(--wh);
  -webkit-mask-position:top left,left center,bottom left;
  mask-position:top left,left center,bottom left;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}


.wv1{--wtop:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20120'%20preserveAspectRatio='none'><path%20d='M-4%2C23.0%20C192.6%2C23.0%20339.4%2C97.0%20536.0%2C97.0%20C707.1%2C97.0%20834.9%2C23.0%201006.0%2C23.0%20C1165.4%2C23.0%201284.6%2C97.0%201444.0%2C97.0%20L1444%2C124%20L-4%2C124%20Z'%20fill='%23000'/></svg>");--wbot:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20120'%20preserveAspectRatio='none'><path%20d='M-4%2C23.0%20C192.6%2C23.0%20339.4%2C97.0%20536.0%2C97.0%20C707.1%2C97.0%20834.9%2C23.0%201006.0%2C23.0%20C1165.4%2C23.0%201284.6%2C97.0%201444.0%2C97.0%20L1444%2C-4%20L-4%2C-4%20Z'%20fill='%23000'/></svg>")}
.wv2{--wtop:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20120'%20preserveAspectRatio='none'><path%20d='M-4%2C97.0%20C152.5%2C97.0%20269.5%2C23.0%20426.0%2C23.0%20C609.8%2C23.0%20747.2%2C97.0%20931.0%2C97.0%20C1117.7%2C97.0%201257.3%2C23.0%201444.0%2C23.0%20L1444%2C124%20L-4%2C124%20Z'%20fill='%23000'/></svg>");--wbot:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20120'%20preserveAspectRatio='none'><path%20d='M-4%2C97.0%20C152.5%2C97.0%20269.5%2C23.0%20426.0%2C23.0%20C609.8%2C23.0%20747.2%2C97.0%20931.0%2C97.0%20C1117.7%2C97.0%201257.3%2C23.0%201444.0%2C23.0%20L1444%2C-4%20L-4%2C-4%20Z'%20fill='%23000'/></svg>")}
.wv3{--wtop:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20120'%20preserveAspectRatio='none'><path%20d='M-4%2C29.0%20C141.6%2C29.0%20250.4%2C91.0%20396.0%2C91.0%20C527.0%2C91.0%20625.0%2C29.0%20756.0%2C29.0%20C891.4%2C29.0%20992.6%2C91.0%201128.0%2C91.0%20C1243.0%2C91.0%201329.0%2C29.0%201444.0%2C29.0%20L1444%2C124%20L-4%2C124%20Z'%20fill='%23000'/></svg>");--wbot:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20120'%20preserveAspectRatio='none'><path%20d='M-4%2C29.0%20C141.6%2C29.0%20250.4%2C91.0%20396.0%2C91.0%20C527.0%2C91.0%20625.0%2C29.0%20756.0%2C29.0%20C891.4%2C29.0%20992.6%2C91.0%201128.0%2C91.0%20C1243.0%2C91.0%201329.0%2C29.0%201444.0%2C29.0%20L1444%2C-4%20L-4%2C-4%20Z'%20fill='%23000'/></svg>")}

/* ---------- background patterns ---------- */
.pat-dots{
  background-image:radial-gradient(rgba(5,80,158,.16) 1.4px,transparent 1.5px);
  background-size:18px 18px;
}
.pat-dots-light{
  background-image:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.5px);
  background-size:20px 20px;
}
.pat-grid{
  background-image:linear-gradient(rgba(5,80,158,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(5,80,158,.07) 1px,transparent 1px);
  background-size:34px 34px;
}
.pat-diag{
  background-image:repeating-linear-gradient(-45deg,rgba(5,80,158,.05) 0 1px,transparent 1px 9px);
}

/* ---------- utility bar ---------- */
.util{background:var(--blue-dd);color:#fff;font-size:12.5px}
.util .wrap{display:flex;align-items:center;gap:20px;height:40px;overflow-x:auto;scrollbar-width:none}
.util .wrap::-webkit-scrollbar{display:none}
.util a{color:#fff;opacity:.8;white-space:nowrap;display:flex;align-items:center;gap:6px;transition:opacity .2s}
.util a:hover{opacity:1;text-decoration:none}
.util .lead{opacity:.5;white-space:nowrap;letter-spacing:.05em}
.util .sep{margin-left:auto}

/* ---------- masthead ---------- */
.masthead{background:var(--paper)}
.masthead .wrap{display:flex;align-items:center;gap:20px;padding-top:18px;padding-bottom:18px}
.brand{display:flex;align-items:center;gap:15px;color:inherit}
.brand:hover{text-decoration:none}
.brand img{width:58px;height:auto;flex:none;transition:transform .5s var(--ease)}
.brand:hover img{transform:scale(1.05) rotate(-3deg)}
.brand .wm{display:block}
.brand .wm .h{
  font-family:var(--serif);font-size:clamp(23px,2.5vw,32px);font-weight:600;
  letter-spacing:-.02em;line-height:1;color:var(--ink);display:block;
}
.brand .wm p{margin-top:5px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);font-weight:600}
.mast-tools{margin-left:auto;display:flex;align-items:center;gap:10px}

.searchbox{position:relative;margin-left:auto;margin-right:6px}
.searchbox .field{
  display:flex;align-items:center;gap:8px;border:1px solid var(--rule-d);
  padding:0 14px;background:var(--tint);border-radius:var(--r);transition:border-color .2s,background .2s,box-shadow .2s;
}
.searchbox .field:focus-within{border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(5,80,158,.10)}
.searchbox .field .ic{color:var(--grey)}
.searchbox input{font:inherit;font-size:14.5px;border:0;outline:none;padding:10px 0;width:180px;background:none;color:var(--ink)}
.results{
  position:absolute;top:calc(100% + 8px);left:0;width:360px;max-width:80vw;background:#fff;
  border:1px solid var(--rule);border-radius:var(--r-sm);z-index:250;
  max-height:352px;overflow-y:auto;display:none;box-shadow:var(--sh-3);padding:6px;
}
.results.open{display:block}
.results a{display:block;padding:10px 12px;color:var(--ink);font-size:14.5px;line-height:1.35;border-radius:var(--r-xs)}
.results a:hover,.results a.cursor{background:var(--blue);color:#fff;text-decoration:none}
.results a:hover em,.results a.cursor em{color:#B9D3EC}
.results em{display:block;font-style:normal;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey);margin-bottom:2px;font-weight:700}
.results .none{padding:14px;font-size:14.5px;color:var(--grey)}

.btn{
  display:inline-flex;align-items:center;gap:9px;background:var(--blue);color:#fff;
  font-size:14.5px;font-weight:600;padding:13px 24px;border:1px solid var(--blue);
  cursor:pointer;border-radius:0;
  transition:background .2s,border-color .2s,color .2s;
}
.btn:hover{background:var(--blue-d);border-color:var(--blue-d);color:#fff;text-decoration:none}
.btn .ic{transition:transform .3s var(--ease)}
.btn:hover .ic{transform:translateX(4px)}
.btn.ghost{background:#fff;color:var(--blue);box-shadow:var(--sh-1)}
.btn.ghost:hover{background:var(--blue-l);color:var(--blue-d);border-color:var(--blue)}
.btn.onblue{background:#fff;color:var(--blue);border-color:#fff}
.btn.onblue:hover{background:var(--blue-l);color:var(--blue-d);border-color:var(--blue-l)}

.burger{display:none;width:44px;height:44px;border:1px solid var(--rule-d);border-radius:var(--r);cursor:pointer;align-items:center;justify-content:center;background:#fff}

/* ---------- primary nav ---------- */
nav.primary{background:var(--blue);position:sticky;top:0;z-index:200;box-shadow:0 2px 10px rgba(5,80,158,.22)}
.navlist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.navlist > li{position:relative}
.navlist > li > a,.navlist > li > button{
  display:flex;align-items:center;gap:6px;padding:14px 15px;color:#fff;
  font-size:14.5px;font-weight:500;cursor:pointer;position:relative;
}
.navlist > li:first-child > a{padding-left:0}
.navlist > li > a::after,.navlist > li > button::after{
  content:"";position:absolute;left:15px;right:15px;bottom:6px;height:2px;background:#fff;border-radius:2px;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .28s var(--ease);
}
.navlist > li:first-child > a::after{left:0}
.navlist > li > a:hover,.navlist > li > button:hover{text-decoration:none;background:rgba(255,255,255,.10)}
.navlist > li > a:hover::after,.navlist > li > button:hover::after,
.navlist > li.here > a::after,.navlist > li.here > button::after,
.navlist > li.open > button::after{transform:scaleX(1)}
.navlist .caret{transition:transform .25s var(--ease)}
.navlist > li.open .caret{transform:rotate(180deg)}

.drop{
  position:absolute;top:calc(100% + 8px);left:0;min-width:294px;background:#fff;
  border:1px solid var(--rule);border-radius:var(--r-sm);padding:8px;z-index:210;box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.drop::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px}
.navlist > li.open .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:flex;align-items:center;gap:11px;padding:10px 12px;color:var(--ink);font-size:14.5px;border-radius:var(--r-xs)}
.drop a:hover{background:var(--blue-l);color:var(--blue-d);text-decoration:none}
.drop a .ic{color:var(--blue)}

/* mobile nav */
.mobnav{display:none;background:#fff;border-bottom:1px solid var(--rule);box-shadow:var(--sh-2)}
.mobnav.open{display:block}
.mobnav ul{list-style:none;margin:0;padding:0}
.mobnav > .wrap > ul > li{border-top:1px solid var(--rule)}
.mobnav > .wrap > ul > li:first-child{border-top:0}
.mobnav .top{display:flex;justify-content:space-between;align-items:center;width:100%;padding:15px 0;
  font-size:17px;font-weight:600;color:var(--ink);cursor:pointer;font-family:var(--serif)}
.mobnav .top:hover{color:var(--blue);text-decoration:none}
.mobnav .sub{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.mobnav li.open .sub{max-height:700px}
.mobnav li.open .top .caret{transform:rotate(180deg)}
.mobnav .sub a{display:flex;align-items:center;gap:10px;padding:10px 0 10px 15px;font-size:15px;color:var(--grey);border-left:2px solid var(--rule)}
.mobnav .sub a:hover{color:var(--blue);border-left-color:var(--blue);text-decoration:none}

/* ---------- hero slideshow ---------- */
.hero{position:relative;background:var(--ink)}
.hero .stagearea{position:relative;overflow:hidden;height:clamp(430px,58vw,660px)}
/* the slides ride a horizontal track: the header scrolls sideways rather than
   slowly zooming */
.hero .track{display:flex;height:100%;width:100%;transition:transform .95s var(--ease)}
.hero .slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden}
.hero .slide img{width:100%;height:100%;object-fit:cover}
.hero .stagearea::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(95deg,rgba(6,17,30,.90) 0%,rgba(6,17,30,.78) 30%,rgba(6,17,30,.46) 56%,rgba(6,17,30,.14) 80%,rgba(6,17,30,.04) 100%);
}
.hero .inner{position:absolute;inset:0;display:flex;align-items:center;z-index:3}
.hero .copy{max-width:660px;color:#fff}
.hero .copy .eyebrow{color:#9CC6EE}
.hero h1{
  font-size:clamp(34px,5.1vw,66px);line-height:1.04;letter-spacing:-.022em;
  margin-top:16px;color:#fff;font-weight:600;text-wrap:balance;
}
.hero .lede{margin-top:18px;font-size:clamp(15.5px,1.35vw,18.5px);color:#DCE6F1;max-width:50ch}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* dots sit right, clear of the left aligned copy and above the quick cards */
.hero .dots{position:absolute;left:0;right:0;bottom:clamp(92px,9vw,128px);z-index:4}
.hero .dots .wrap{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.hero .dot{width:34px;height:4px;border-radius:2px;background:rgba(255,255,255,.34);cursor:pointer;padding:0;transition:background .3s,width .3s var(--ease)}
.hero .dot[aria-selected="true"]{background:#fff;width:52px}
.hero .cap{margin-left:14px;font-size:12px;color:rgba(255,255,255,.78);letter-spacing:.04em}

/* page header for sub pages */
.phead{--sp:0px;background:var(--blue-ll)}
.phead .wrap{padding:clamp(28px,3.6vw,54px) var(--gut) clamp(24px,3vw,44px)}
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--grey);margin-bottom:14px}
.crumb a{color:var(--grey)}
.crumb a:hover{color:var(--blue)}
.crumb .ic{width:14px;height:14px;opacity:.6}
.phead h1{font-size:clamp(32px,4.4vw,54px);letter-spacing:-.02em}
.phead .lede{margin-top:14px;max-width:62ch;font-size:17.5px;color:var(--body)}

/* ---------- quick actions ---------- */
.quick{position:relative;z-index:5;margin-top:0;border-bottom:1px solid var(--rule);background:#fff}
.quick .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:0}
.quick a{
  background:#fff;display:flex;align-items:center;gap:14px;padding:22px 24px;color:var(--ink);
  font-size:15px;font-weight:600;border-left:1px solid var(--rule);
  transition:background .2s,color .2s;
}
.quick a:first-child{border-left:0}
.quick a .badge{color:var(--blue);display:grid;place-items:center;transition:color .25s,transform .3s var(--ease)}
.quick a:hover{text-decoration:none;background:var(--blue);color:#fff}
.quick a:hover .badge{color:#fff;transform:translateY(-2px)}

/* ---------- sections ---------- */
section{padding:var(--sp) 0}
section.tinted{background-color:var(--band)}
/* solid fills, so an SVG curve divider can match the band exactly */
section.blue-soft{background:var(--blue-l)}
section.pad-sm{padding:clamp(38px,4.6vw,64px) 0}
.sechead{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:34px}
.sechead h2{font-size:clamp(27px,3.3vw,44px);letter-spacing:-.02em;margin-top:12px;text-wrap:balance}
.sechead .more{margin-left:auto;font-size:14.5px;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.sechead .more .ic{transition:transform .3s var(--ease)}
.sechead .more:hover .ic{transform:translateX(4px)}
.lead-p{font-size:clamp(16.5px,1.4vw,19px);max-width:64ch;color:var(--body)}
.center{text-align:center}
.center .sechead{flex-direction:column;align-items:center;text-align:center}
.center .eyebrow{justify-content:center}
.center .lead-p{margin-left:auto;margin-right:auto}

/* ---------- at a glance + cube ---------- */
.glance{display:grid;grid-template-columns:1fr auto;gap:clamp(30px,5vw,74px);align-items:center}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px}
.fig{
  background:#fff;padding:24px 22px;border-radius:var(--r);border:1px solid var(--rule);
  box-shadow:var(--sh-1);transition:transform .25s var(--ease),box-shadow .25s;
}
.fig:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.fig .n{display:block;font-family:var(--serif);font-size:clamp(38px,4.4vw,54px);font-weight:600;
  line-height:1;letter-spacing:-.028em;color:var(--blue);font-variant-numeric:tabular-nums}
.fig .k{display:block;margin-top:9px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:700}
.fig .s{display:block;margin-top:4px;font-size:13px;color:var(--grey)}

.cube-wrap{position:relative;display:grid;place-items:center}
.cube-wrap::before{
  content:"";position:absolute;width:106%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(5,80,158,.16) 0%,rgba(5,80,158,.06) 42%,rgba(5,80,158,0) 68%);
}
.cube-stage{--cs:clamp(132px,14vw,180px);position:relative;
  width:calc(var(--cs)*1.95);height:calc(var(--cs)*2.2);
  display:grid;place-items:center;perspective:1000px;perspective-origin:50% 44%}
.cube-spin{transform-style:preserve-3d;animation:tumble 18s linear infinite}
@keyframes tumble{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
/* rotateX(-35.264deg) is atan(1/sqrt2): it stands the body diagonal upright,
   so the cube balances on one vertex */
.cube{width:var(--cs);height:var(--cs);position:relative;transform-style:preserve-3d;
  transform:rotateX(-35.264deg) rotateZ(45deg)}
.cf{position:absolute;inset:0;backface-visibility:hidden;display:grid;place-items:center;
  border-radius:0;overflow:hidden;text-align:center;padding:12%}
.cf.w{background:#FCFCFA;border:1px solid rgba(5,80,158,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.cf.b{background:var(--blue);border:1px solid rgba(255,255,255,.30)}
/* Standing the cube on a vertex rotates each face in its own plane by a
   different amount, so each face needs its own counter-rotation. These are the
   angles that put the figures upright at the moment that face turns to camera. */
.cf .fc{display:block;line-height:1;transform:rotate(-45deg)}
.f2 .fc,.f3 .fc{transform:rotate(45deg)}
.f6 .fc{transform:rotate(-135deg)}
.cf .cn{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(26px,2.7vw,35px);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.cf .ck{display:block;margin-top:6px;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.cf.w .cn{color:var(--blue)} .cf.w .ck{color:var(--grey)}
.cf.b .cn{color:#fff} .cf.b .ck{color:#9CC6EE}
.f1{transform:translateZ(calc(var(--cs)/2))}
.f2{transform:rotateY(90deg) translateZ(calc(var(--cs)/2))}
.f3{transform:rotateY(180deg) translateZ(calc(var(--cs)/2))}
.f4{transform:rotateY(-90deg) translateZ(calc(var(--cs)/2))}
.f5{transform:rotateX(90deg) translateZ(calc(var(--cs)/2))}
.f6{transform:rotateX(-90deg) translateZ(calc(var(--cs)/2))}
.cube-shadow{
  position:absolute;bottom:6%;left:50%;transform:translateX(-50%);
  width:52%;height:16px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(15,20,24,.26),rgba(15,20,24,0) 70%);
  animation:breathe 18s ease-in-out infinite;
}
@keyframes breathe{0%,100%{width:52%;opacity:.9}50%{width:44%;opacity:.7}}

/* ---------- welcome ---------- */
.welcome{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:center}
.quotecard{
  background:#fff;border-radius:var(--r-lg);padding:clamp(28px,3.4vw,46px);
  box-shadow:var(--sh-2);border:1px solid var(--rule);position:relative;
}
.quotecard .mark{font-family:var(--serif);font-size:88px;line-height:.6;color:var(--blue-l);display:block}
.quotecard blockquote{margin:0;font-family:var(--serif);font-size:clamp(21px,2.3vw,30px);
  line-height:1.28;color:var(--ink);font-weight:500;letter-spacing:-.014em}
.quotecard cite{display:block;margin-top:20px;font-style:normal;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey);font-weight:700}

/* ---------- feature tiles ---------- */
/* 300px floor gives three even columns at full width, so six tiles read 3 + 3 */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;text-align:left}
.tile{
  background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:26px 24px;
  box-shadow:var(--sh-1);color:inherit;display:block;
  transition:transform .25s var(--ease),box-shadow .25s,border-color .2s;
}
.tile:hover{text-decoration:none;transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--blue)}
.tile .badge{width:46px;height:46px;border-radius:var(--r-sm);background:var(--blue-l);color:var(--blue);
  display:grid;place-items:center;transition:background .25s,color .25s}
.tile:hover .badge{background:var(--blue);color:#fff}
.tile h3{font-size:19.5px;margin-top:18px;letter-spacing:-.012em}
.tile p{margin-top:8px;font-size:14.5px;color:var(--grey);line-height:1.6}

/* ---------- news ---------- */
.newsgrid{display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(26px,4vw,54px)}
.lead-story{display:block;color:inherit;background:#fff;border:1px solid var(--rule);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);
  transition:transform .28s var(--ease),box-shadow .28s}
.lead-story:hover{text-decoration:none;transform:translateY(-4px);box-shadow:var(--sh-3)}
.lead-story .shot{display:block;overflow:hidden;aspect-ratio:16/9;background:var(--tint)}
.lead-story .shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.lead-story:hover .shot img{transform:scale(1.05)}
.lead-story .txt{display:block;padding:26px 28px 30px}
.lead-story h3{font-size:clamp(21px,2.1vw,28px);margin-top:12px;letter-spacing:-.016em;line-height:1.2}
.lead-story:hover h3{color:var(--blue)}
.lead-story p{margin-top:11px;font-size:15px;color:var(--grey)}
.lead-story .go{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--blue)}
.lead-story:hover .go .ic{transform:translateX(4px)}
.lead-story .go .ic{transition:transform .3s var(--ease)}
.stories{display:flex;flex-direction:column;gap:14px}
.story{display:block;padding:20px 22px;color:inherit;background:#fff;border:1px solid var(--rule);
  border-radius:var(--r);box-shadow:var(--sh-1);transition:transform .25s var(--ease),box-shadow .25s,border-color .2s}
.story:hover{text-decoration:none;transform:translateX(5px);box-shadow:var(--sh-2);border-color:var(--blue)}
.story h3{font-size:18px;line-height:1.28;letter-spacing:-.012em;margin-top:7px}
.story:hover h3{color:var(--blue)}
.story p{margin-top:7px;font-size:14.5px;color:var(--grey)}

/* ---------- video ---------- */
.vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:clamp(20px,2.6vw,30px)}
.vid{display:block;width:100%;text-align:left;cursor:pointer;color:inherit}
.vid .frame{position:relative;display:block;overflow:hidden;background:var(--ink);aspect-ratio:16/9;
  border-radius:var(--r);box-shadow:var(--sh-2);transition:transform .28s var(--ease),box-shadow .28s}
.vid:hover .frame{transform:translateY(-4px);box-shadow:var(--sh-3)}
.vid .frame img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),opacity .3s}
.vid:hover .frame img{transform:scale(1.06);opacity:.82}
.vid .play{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;
  background:var(--blue);border-radius:50%;display:grid;place-items:center;box-shadow:var(--sh-blue);
  transition:transform .35s var(--ease),background .25s}
.vid:hover .play{transform:scale(1.1);background:var(--blue-d)}
.vid .play .ic{color:#fff;width:22px;height:22px;margin-left:3px}
.vid h3{margin-top:16px;font-size:18px;font-weight:600;letter-spacing:-.012em;line-height:1.3}
.vid:hover h3{color:var(--blue)}
.vid .meta{margin-top:6px;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey);font-weight:700}
.vid iframe{width:100%;aspect-ratio:16/9;border:0;display:block;border-radius:var(--r);box-shadow:var(--sh-2)}

/* ---------- four programs: one house ---------- */
.house{margin-top:8px;background:var(--ink);color:#fff}
.house-film{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.cell{--accent:var(--gold);position:relative;display:block;min-height:clamp(340px,40vw,460px);
  color:#fff;overflow:hidden;text-decoration:none}
.cell + .cell{box-shadow:inset 1px 0 0 rgba(255,255,255,.16)}
.cell-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease),opacity .35s}
.cell[href="athletics.html"] .cell-photo{object-position:center 40%}
.cell-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,16,24,.04) 20%,rgba(8,16,24,.55) 58%,rgba(8,16,24,.92) 100%)}
.cell-body{position:absolute;left:0;right:0;bottom:0;padding:22px 20px 26px;
  display:flex;flex-direction:column;align-items:flex-start}
.cell-crest{width:72px;height:auto;margin-bottom:14px;background:none;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.45))}
.cell em{font-style:normal;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--gold)}
.cell b{display:block;margin-top:8px;font-family:var(--serif);font-size:clamp(18px,1.6vw,24px);
  font-weight:600;letter-spacing:-.016em;line-height:1.15;color:#fff}
.cell-body > span{display:block;margin-top:7px;font-size:13.5px;line-height:1.4;color:#C9D3DC}
.cell:hover,.cell:focus-visible{text-decoration:none}
.cell:hover .cell-photo{transform:scale(1.05)}
.house-also{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:16px 20px;background:#0C1520;border-top:1px solid rgba(255,255,255,.1)}
.house-also p{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#8FBBE6}
.house-also div{display:flex;flex-wrap:wrap;gap:8px 18px}
.house-also a{color:#E8EEF3;font-size:14px;font-weight:600}
.house-also a:hover{color:var(--gold);text-decoration:none}
@media (max-width:800px){
  .house-film{grid-template-columns:1fr 1fr}
  .cell{min-height:280px}
  .cell:nth-child(n+3){box-shadow:inset 1px 0 0 rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.16)}
}
@media (max-width:520px){
  .house-film{grid-template-columns:1fr}
  .cell + .cell{box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
}

.pill{display:inline-block;font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue);background:var(--blue-l);padding:5px 10px;font-weight:700}

/* ---------- also offered strip (inner pages) ---------- */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;margin-top:26px}
.strip a{background:#fff;display:flex;align-items:center;gap:13px;padding:20px 22px;color:var(--ink);
  font-size:15px;font-weight:600;transition:background .2s,color .2s}
.strip a .ic{color:var(--blue);transition:color .2s}
.strip a:hover{background:var(--blue);color:#fff;text-decoration:none}
.strip a:hover .ic{color:#fff}

/* ---------- by the numbers band ---------- */
.numbers{--sp:0px;background-color:var(--blue-dd);color:#fff;position:relative;overflow:hidden;
  user-select:none;-webkit-user-select:none}
.numbers .wrap{position:relative;padding:clamp(46px,5.6vw,84px) var(--gut)}
.numbers .inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,4vw,64px);align-items:start}
.numbers h2{color:#fff;font-size:clamp(27px,3.2vw,42px);letter-spacing:-.02em;margin-top:12px}
.numbers .eyebrow{color:#8FBBE6}
.numbers .lead-p{color:#C3D5E6;margin-top:16px}
.numbers .readout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:26px;row-gap:16px;margin-top:28px;background:transparent;max-width:36rem}
.numbers .r{display:block;padding:6px 8px 6px 0;background:transparent;color:inherit;
  text-decoration:none;min-width:0;position:relative}
.numbers .r:hover{background:transparent;text-decoration:none}
.numbers .r:hover .n{color:var(--gold)}
.numbers .r .n{display:block;font-family:var(--serif);font-size:clamp(22px,2.2vw,32px);font-weight:600;
  line-height:1.1;letter-spacing:-.028em;color:#fff;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:visible}
.numbers .r .k{display:block;margin-top:6px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8FBBE6;font-weight:700}
.numbers .r:not(:nth-child(3n))::after{content:"";position:absolute;right:-13px;top:18%;bottom:18%;
  width:1px;background:rgba(255,255,255,.22);pointer-events:none}
.arms{width:clamp(168px,20vw,220px);text-align:center;padding-top:6px}
.arms-school{width:100%;height:auto;margin:0 auto;mix-blend-mode:screen;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.28))}
.arms-k{margin-top:14px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:#8FBBE6}
.arms-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.arms-row a{display:grid;place-items:center;padding:2px;
  transition:transform .2s var(--ease),opacity .2s;opacity:.88}
.arms-row a:hover{transform:translateY(-2px);opacity:1}
.arms-row img{width:100%;height:auto;display:block;mix-blend-mode:screen}
@media (max-width:800px){
  .numbers .inner{grid-template-columns:1fr}
  .arms{width:min(220px,56vw);margin:8px auto 0}
  .numbers .readout{max-width:none}
}
@media (max-width:560px){
  /* two up. The three-column divider rule leaves a ragged pattern once the grid
     reflows, so at this width the figures are separated by space alone. */
  .numbers .readout{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:22px}
  .numbers .r::after{display:none}
}

/* ---------- live ticker ---------- */
.ticker{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:#fff}
.ticker .wrap{display:flex;align-items:center;gap:0;height:54px;overflow-x:auto;scrollbar-width:none}
.ticker .wrap::-webkit-scrollbar{display:none}
.ticker .it{display:flex;align-items:center;gap:9px;padding:0 18px;white-space:nowrap;
  border-right:1px solid var(--rule);font-size:13.5px;color:var(--ink)}
.ticker .it:first-child{padding-left:0}
.ticker .it:last-child{border-right:0}
.ticker .lbl{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--blue)}
.ticker .lbl.live{color:#C8102E;display:flex;align-items:center;gap:7px}
.ticker .dot{width:7px;height:7px;border-radius:50%;background:#C8102E}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.ticker a{color:var(--ink);font-weight:600}
.ticker a:hover{color:var(--blue)}
.ticker .cd{font-variant-numeric:tabular-nums;font-weight:700;color:var(--blue)}

/* ---------- newsroom: wide and horizontal, not a column stack ---------- */
.room{user-select:none;-webkit-user-select:none;-ms-user-select:none}
.room-lead{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(26px,3.6vw,58px);
  align-items:center;color:inherit;padding-bottom:clamp(30px,4vw,52px);border-bottom:2px solid var(--ink)}
.room-lead:hover{text-decoration:none}
.room-lead .shot{display:block;overflow:hidden;background:var(--tint);aspect-ratio:16/9}
.room-lead .shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.room-lead:hover .shot img{transform:scale(1.03)}
.room-lead h2{font-size:clamp(28px,3.4vw,46px);line-height:1.12;letter-spacing:-.022em;margin-top:14px;text-wrap:balance}
.room-lead:hover h2{color:var(--blue)}
.room-lead p{margin-top:16px;font-size:17px;color:var(--body);line-height:1.6;max-width:46ch}
.room-lead .go{margin-top:20px;display:inline-flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:700;color:var(--blue);letter-spacing:.02em}
.room-lead:hover .go .ic{transform:translateX(4px)}
.room-lead .go .ic{transition:transform .3s var(--ease)}

.room-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:0;margin-top:clamp(26px,3.2vw,44px)}
.room-item{display:block;color:inherit;padding:0 clamp(20px,2.4vw,36px);
  border-left:1px solid var(--rule);transition:background .2s}
.room-item:first-child{border-left:0;padding-left:0}
.room-item:hover{text-decoration:none}
.room-item h3{font-size:19px;margin-top:12px;line-height:1.32;letter-spacing:-.014em}
.room-item:hover h3{color:var(--blue)}
.room-item p{margin-top:9px;font-size:14.5px;color:var(--grey);line-height:1.6}

.kicker{display:flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--blue)}
.kicker .tag{background:var(--blue);color:#fff;padding:4px 9px}
.kicker time{color:var(--grey);font-weight:600;letter-spacing:.06em}

/* ---------- sign off block ---------- */
.signoff{margin-top:30px;border-top:2px solid var(--ink);background:none;
  padding:24px 0 0;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:end}
.signoff .line{border-bottom:1.5px solid var(--ink);height:44px;min-width:min(340px,100%)}
.signoff .cap{margin-top:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--grey)}
.signoff .meta{font-size:13px;color:var(--grey);text-align:right;line-height:1.7}

/* ---------- news hub ---------- */
.nhub{display:grid;grid-template-columns:1.62fr 1fr;gap:clamp(26px,3.4vw,48px);align-items:start}
.nmain{display:grid;gap:22px}
.nlead{display:block;color:inherit;background:#fff;border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-1);transition:transform .26s var(--ease),box-shadow .26s,border-color .2s}
.nlead:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--blue)}
.nlead .shot{display:block;overflow:hidden;aspect-ratio:16/9;background:var(--tint);position:relative}
.nlead .shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.nlead:hover .shot img{transform:scale(1.04)}
.nlead .txt{display:block;padding:22px 24px 26px}
.nlead h3{font-size:clamp(23px,2.3vw,32px);margin-top:10px;letter-spacing:-.018em;line-height:1.16}
.nlead:hover h3{color:var(--blue)}
.nlead p{margin-top:10px;font-size:15.5px;color:var(--grey)}

.kicker{display:flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--blue)}
.kicker .tag{background:var(--blue);color:#fff;padding:4px 9px;border-radius:var(--r-xs)}
.kicker .tag.sport{background:var(--aea)}
.kicker .tag.watch{background:var(--cul)}
.kicker time{color:var(--grey);font-weight:600;letter-spacing:.06em}

.npair{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ncard{display:block;color:inherit;background:#fff;border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-1);transition:transform .24s var(--ease),box-shadow .24s,border-color .2s}
.ncard:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--blue)}
.ncard .shot{display:block;overflow:hidden;aspect-ratio:16/9;background:var(--tint)}
.ncard .shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.ncard:hover .shot img{transform:scale(1.05)}
.ncard .txt{display:block;padding:16px 18px 20px}
.ncard h3{font-size:17px;margin-top:9px;letter-spacing:-.012em;line-height:1.28}
.ncard:hover h3{color:var(--blue)}
.ncard p{margin-top:7px;font-size:14px;color:var(--grey)}

.nrail{display:grid;gap:20px;position:sticky;top:76px}
.rail{background:#fff;border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden}
.rail > h3{font-family:var(--sans);font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  color:#fff;background:var(--ink);padding:14px 20px;display:flex;align-items:center;gap:9px}
.rail > h3.blue{background:var(--blue)}
.rail ol{list-style:none;margin:0;padding:0;counter-reset:n}
.rail ol li{border-bottom:1px solid var(--rule)}
.rail ol li:last-child{border-bottom:0}
.rail ol a{display:grid;grid-template-columns:26px 1fr;gap:13px;padding:17px 20px;color:var(--ink);
  font-size:15px;line-height:1.45;font-weight:600;transition:background .2s}
.rail ol a::before{counter-increment:n;content:counter(n);font-family:var(--serif);font-size:19px;
  color:var(--blue);opacity:.5;line-height:1.1}
.rail ol a:hover{background:var(--blue-l);text-decoration:none;color:var(--blue-d)}
.rail .watchrow{display:flex;gap:12px;padding:12px 18px;border-bottom:1px solid var(--rule);
  align-items:center;color:inherit;width:100%;text-align:left;cursor:pointer;transition:background .2s}
.rail .watchrow:last-child{border-bottom:0}
.rail .watchrow:hover{background:var(--blue-l);text-decoration:none}
.rail .watchrow .th{width:82px;height:48px;flex:none;border-radius:var(--r-xs);overflow:hidden;position:relative;background:var(--ink)}
.rail .watchrow .th img{width:100%;height:100%;object-fit:cover}
.rail .watchrow .th .pl{position:absolute;inset:0;display:grid;place-items:center;background:rgba(6,17,30,.35)}
.rail .watchrow .th .pl .ic{width:16px;height:16px;color:#fff}
.rail .watchrow b{font-size:13.5px;font-weight:600;line-height:1.3;color:var(--ink)}
.rail .fixture{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--rule);color:inherit}
.rail .fixture:last-child{border-bottom:0}
.rail .fixture .ha{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:3px 7px;border-radius:var(--r-xs);flex:none}
.rail .fixture .ha.h{background:var(--blue-l);color:var(--blue)}
.rail .fixture .ha.a{background:var(--tint);color:var(--grey);border:1px solid var(--rule)}
.rail .fixture b{font-size:14px;font-weight:600;color:var(--ink);flex:1}
.rail .fixture small{font-size:12.5px;color:var(--grey);font-variant-numeric:tabular-nums;white-space:nowrap}
.rail .foot{padding:12px 18px;border-top:1px solid var(--rule);background:var(--tint)}
.rail .foot a{font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:7px}

/* ---------- roster ---------- */
.roster{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.roster th{font-family:var(--sans);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey);
  font-weight:700;text-align:left;padding:0 12px 10px 0;border-bottom:2px solid var(--ink);white-space:nowrap}
.roster td{padding:11px 12px 11px 0;border-bottom:1px solid var(--rule);vertical-align:middle}
.roster tr:last-child td{border-bottom:0}
.roster .jn{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--blue);
  font-variant-numeric:tabular-nums;width:52px}
.roster .jn.none{color:var(--rule-d)}
.roster .nm{font-weight:600;color:var(--ink)}
.roster .ps{font-size:12px;letter-spacing:.06em;font-weight:700;color:var(--blue);white-space:nowrap}
.roster .mu{color:var(--grey);font-variant-numeric:tabular-nums;white-space:nowrap}
.roster .cl{color:var(--grey);font-variant-numeric:tabular-nums}
/* collapsed: clipped after the last numbered player, with a fade into the button */
.rosterwrap{overflow-x:auto;margin-top:20px;position:relative}
.rosterwrap.collapsed{overflow-x:auto;overflow-y:hidden}
.rosterwrap.collapsed::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(241,246,252,0),rgba(241,246,252,.86) 58%,var(--band) 100%);
}
.rostermore{display:flex;justify-content:center;margin-top:18px}
.rostermore button{
  display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--blue);
  border:1px solid var(--rule-d);border-radius:var(--r);padding:11px 22px;
  font-size:14px;font-weight:700;cursor:pointer;box-shadow:var(--sh-1);
  transition:border-color .2s,background .2s,color .2s,transform .2s var(--ease);
}
.rostermore button:hover{border-color:var(--blue);background:var(--blue-l);transform:translateY(-2px)}
.rostermore button .ic{transition:transform .3s var(--ease)}
.rostermore button[aria-expanded="true"] .ic{transform:rotate(180deg)}
.roster .jn.none{color:var(--rule-d);font-size:15px}

/* ---------- football ---------- */
.fb{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(28px,4vw,60px);align-items:start}
.nextgame{
  background-color:var(--blue-dd);color:#fff;padding:30px 32px 32px;position:relative;overflow:hidden;
  background-image:radial-gradient(rgba(255,255,255,.14) 1.4px,transparent 1.5px);background-size:20px 20px;
}
.nextgame .eyebrow{color:#8FBBE6}
.nextgame .vs{margin-top:16px;font-family:var(--serif);font-size:clamp(26px,3vw,38px);
  font-weight:600;letter-spacing:-.02em;line-height:1.08;color:#fff}
.nextgame .when{margin-top:14px;font-size:16px;color:#C3D5E6;display:flex;flex-wrap:wrap;gap:8px 18px}
.nextgame .when span{display:flex;align-items:center;gap:8px}
/* one countdown style, used on the dark football card and in the light news rail */
.cd{display:flex;gap:8px;flex-wrap:wrap}
.cd div{background:var(--blue-l);border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:9px 12px;text-align:center;min-width:60px}
.cd b{display:block;font-family:var(--serif);font-size:21px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--blue);line-height:1}
.cd small{display:block;margin-top:4px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);font-weight:700}
.nextgame .cd{margin-top:22px;gap:10px}
.nextgame .cd div{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18);padding:12px 16px;min-width:70px}
.nextgame .cd b{font-size:25px;color:#fff}
.nextgame .cd small{color:#8FBBE6}
.badge-line{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.badge-line span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  border:1px solid rgba(255,255,255,.28);color:#DCE8F4;padding:5px 10px;border-radius:var(--r-xs)}

.sched{width:100%;border-collapse:collapse;font-size:15px}
.sched th{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);font-weight:700;text-align:left;padding:0 14px 10px 0;border-bottom:2px solid var(--ink)}
.sched td{padding:13px 14px 13px 0;border-bottom:1px solid var(--rule);vertical-align:middle}
.sched tr:last-child td{border-bottom:0}
.sched .dt{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--grey);font-size:14px}
.sched .opp{font-weight:600;color:var(--ink)}
.sched .ha{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding:4px 9px;border-radius:var(--r-xs);display:inline-block}
.sched .ha.h{background:var(--blue-l);color:var(--blue)}
.sched .ha.a{background:var(--tint);color:var(--grey);border:1px solid var(--rule)}
.sched tr.next td{background:color-mix(in srgb,var(--blue) 6%,#fff)}
.sched .tm{white-space:nowrap;color:var(--grey);font-size:14px;font-variant-numeric:tabular-nums}

/* ---------- student life, vertical ---------- */
.vlist{border-top:1px solid var(--rule)}
.vrow{display:grid;grid-template-columns:132px 1fr auto;gap:clamp(18px,2.6vw,34px);align-items:center;
  padding:22px 0;border-bottom:1px solid var(--rule);color:inherit;
  transition:background .22s,padding-left .26s var(--ease)}
.vrow:hover{text-decoration:none;background:var(--tint);padding-left:12px}
.vrow .thumb{width:132px;height:88px;overflow:hidden;border-radius:var(--r-sm);background:var(--tint);
  border:1px solid var(--rule)}
.vrow .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.vrow:hover .thumb img{transform:scale(1.06)}
.vrow .thumb.crest{display:grid;place-items:center;padding:10px;background:#fff}
/* a fixed max-height, because height:100% on a centred grid item resolves
   against an indefinite height and falls back to the natural aspect */
.vrow .thumb.crest img{object-fit:contain;max-height:64px;max-width:100%;width:auto;height:auto}
.vrow h3{font-size:20px;letter-spacing:-.014em}
.vrow:hover h3{color:var(--blue)}
.vrow p{margin-top:6px;font-size:14.5px;color:var(--grey);max-width:62ch}
.vrow .count{font-family:var(--serif);font-size:34px;font-weight:600;color:var(--blue);
  font-variant-numeric:tabular-nums;line-height:1;text-align:right}
.vrow .count small{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);font-weight:700;margin-top:6px}

/* ---------- split feature (photo + text) ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,68px);align-items:center}
.feature .shot{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3)}
.feature .shot img{width:100%;aspect-ratio:4/3;object-fit:cover}
.feature.flip .shot{order:2}

/* ---------- lists ---------- */
.split{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,5vw,68px)}
.split.even{grid-template-columns:1fr 1fr}
.links{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.links a{display:flex;align-items:center;gap:13px;padding:16px 0;color:var(--ink);font-size:15.5px;
  border-bottom:1px solid var(--rule);transition:padding-left .25s var(--ease),color .2s}
.links a:hover{color:var(--blue);text-decoration:none;padding-left:8px}
.links a .ic{color:var(--blue)}
.links a .arw{margin-left:auto;opacity:.4;transition:opacity .25s,transform .3s var(--ease)}
.links a:hover .arw{opacity:1;transform:translateX(4px)}

.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}
.chip{border:1px solid var(--rule);padding:9px 16px;font-size:14px;color:var(--ink);background:#fff;
  transition:border-color .2s,color .2s}
.chip:hover{border-color:var(--blue);color:var(--blue)}

.prose h2{font-size:clamp(23px,2.4vw,32px);margin-top:46px;letter-spacing:-.016em}
.prose h3{font-size:20.5px;margin-top:32px;letter-spacing:-.012em}
.prose p{margin-top:14px;max-width:70ch}
.prose ul{margin:14px 0 0;padding-left:22px;max-width:70ch}
.prose li{margin-top:8px}
.prose > *:first-child{margin-top:0}

.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:16px;margin-top:24px}
.person{background:#fff;padding:24px;border-radius:var(--r);border:1px solid var(--rule);box-shadow:var(--sh-1);
  transition:transform .25s var(--ease),box-shadow .25s}
.person:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.person .r{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);font-weight:700}
.person h3{font-size:20px;margin-top:9px;letter-spacing:-.014em}
.person p{margin-top:8px;font-size:14px;color:var(--grey);line-height:1.6}

.tablewrap{overflow-x:auto;margin-top:24px;border-top:2px solid var(--ink);background:none}
table{border-collapse:collapse;width:100%;font-size:15px}
.tablewrap table{min-width:460px}
th,td{text-align:left;padding:15px 20px;border-bottom:1px solid var(--rule)}
th{font-family:var(--sans);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);background:var(--tint);font-weight:700}
tr:last-child td,tr:last-child th{border-bottom:0}

.note{border-left:3px solid var(--blue);background:none;padding:4px 0 4px 20px;margin-top:28px;
  font-size:15px;color:var(--ink);display:flex;gap:12px;align-items:flex-start}
.note .ic{color:var(--blue);margin-top:3px}

/* ---------- cta band ---------- */
.cta{--sp:0px;background-color:var(--blue);color:#fff;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;top:-40%;right:-10%;width:52%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.10),rgba(255,255,255,0) 70%)}
.cta .wrap{position:relative;padding:clamp(44px,5.5vw,78px) var(--gut);display:grid;
  grid-template-columns:1.4fr auto;gap:32px;align-items:center}
.cta h2{color:#fff;font-size:clamp(26px,3.1vw,40px);letter-spacing:-.02em}
.cta p{margin-top:12px;color:#CFE0F1;max-width:52ch;font-size:17px}
.cta .actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- contact strip ---------- */
.contact{background:var(--paper);border-top:1px solid var(--rule)}
.contact .wrap{padding:0 var(--gut)}
.contact .strip2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0}
.contact .box{
  padding:clamp(30px,3.4vw,46px) clamp(20px,2.2vw,34px);
  border-left:1px solid var(--rule);transition:background .25s;
}
.contact .box:first-child{border-left:0;padding-left:0}
.contact .box:hover{background:#fff}
.contact .badge{color:var(--blue);display:block;width:24px;height:24px}
.contact h2{margin-top:14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);font-family:var(--sans);font-weight:700}
.contact .v{margin-top:9px;font-size:16.5px;line-height:1.6;color:var(--ink);font-style:normal}
.contact a{color:var(--ink);border-bottom:1px solid var(--rule-d);transition:border-color .2s,color .2s}
.contact a:hover{color:var(--blue);border-bottom-color:var(--blue);text-decoration:none}

footer{background:var(--ink);color:#98A0A9;font-size:13.5px}
footer .top{display:flex;gap:26px;flex-wrap:wrap;align-items:center;padding:36px 0}
footer .top a{color:#fff;opacity:.85;display:flex;align-items:center;gap:7px}
footer .top a:hover{opacity:1;text-decoration:none}
footer .brandline{font-family:var(--serif);font-size:21px;color:#fff;font-weight:600;letter-spacing:-.012em}
footer .sep{margin-left:auto}
footer .fine{border-top:1px solid #232830;padding:22px 0 36px;color:#7B838D;font-size:12.5px;line-height:1.7;max-width:90ch}
footer .fine a{color:#B4BAC2}

.totop{position:fixed;right:22px;bottom:22px;width:48px;height:48px;z-index:190;background:var(--blue);
  border-radius:var(--r);cursor:pointer;display:grid;place-items:center;box-shadow:var(--sh-blue);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .3s,transform .3s var(--ease),background .2s}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--blue-d);transform:translateY(-3px)}
.totop .ic{color:#fff}

.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:260;pointer-events:none}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),#4E9BE0);transform:scaleX(0);transform-origin:0 50%}

/* Reveals settle rather than slide: a shorter travel on a decelerating curve reads
   as the element arriving, where a long linear-ish slide reads as the page loading
   badly. Opacity leads the transform slightly so nothing appears mid-flight. */
.js .rv{opacity:0;transform:translateY(14px)}
.js .rv-l{opacity:0;transform:translateX(-18px)}
.js .rv-b{opacity:0;transform:scale(.965) translateY(10px)}
.js .rv.in,.js .rv-l.in,.js .rv-b.in{
  opacity:1;transform:none;
  transition:opacity .42s cubic-bezier(.2,.7,.3,1),
             transform .68s cubic-bezier(.16,.84,.24,1);
}

/* fixture rows and roster rows pick up a light hover so the tables feel handled */
.sched tbody tr,.roster tbody tr{transition:background .18s}
.sched tbody tr:hover,.roster tbody tr:hover{background:rgba(5,80,158,.045)}

/* every interactive surface eases on the same curve; the site had a mix of
   durations that made unrelated things feel like different products */
.btn,.more,.chip,.tsw-btn,.schedmore button,.rostermore button,.unis li,.pcard{
  transition-timing-function:cubic-bezier(.2,.7,.3,1);
}

@media (max-width:1040px){
  .glance{grid-template-columns:1fr;justify-items:center}
  .newsgrid,.welcome,.feature{grid-template-columns:1fr}
  .feature.flip .shot{order:0}
  .cta .wrap{grid-template-columns:1fr}
}
@media (max-width:900px){
  .burger{display:flex}
  nav.primary .navlist{display:none}
  .split,.split.even{grid-template-columns:1fr;gap:40px}
  /* Below this width the copy is taller than the image, so it stacks under the
     photo instead of being absolutely positioned over it. Overlaying here made
     the headline overflow upward across the masthead. */
  .hero{background:var(--ink)}
  .hero .stagearea{height:clamp(230px,48vw,340px)}
  .hero .stagearea::after{background:linear-gradient(180deg,rgba(6,17,30,.10),rgba(6,17,30,.50))}
  .hero .inner{position:static;display:block;padding:30px 0 6px}
  .hero .copy{max-width:none}
  .hero .dots{position:static;padding:18px 0 30px}
  .hero .dots .wrap{justify-content:flex-start}
  .quick{margin-top:22px}
}
@media (max-width:600px){
  .masthead .wrap{flex-wrap:wrap;gap:14px}
  .brand img{width:48px}
  .searchbox{order:3;width:100%;margin:0}
  .searchbox input{width:100%}
  .results{width:100%;max-width:none}
  .mast-tools{margin-left:auto}
  .hidesm{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .js .rv,.js .rv-l,.js .rv-b{opacity:1;transform:none}
  .cube-spin{transform:rotateY(-26deg)}
  .hero .slide.on img{animation:none}
}

/* ---------- wave clearance ----------
   A wave band overlaps its neighbours by the wave height, so the neighbours
   must reserve that much room or their text lands inside the curve. Declared
   last, and at section specificity, to outrank the section padding shorthands. */
section.pad-wave-top,
.wave-bot + section,
.wave-both + section,
.phead + section{padding-top:calc(var(--sp) + var(--wh))}
section.pad-wave-bot{padding-bottom:calc(var(--sp) + var(--wh))}
section.pad-wave-top.pad-wave-bot{
  padding-top:calc(var(--sp) + var(--wh));
  padding-bottom:calc(var(--sp) + var(--wh));
}

/* the five behind Preston stay sealed until the roster is signed */

/* awaiting the athletic director's pen */
.signoff .line{border-bottom-style:dashed}

/* ---------- Six to watch: six equal vertical plates ---------- */
.six{
  /* the clips are composited on pure white, so the stock is white end to end and a
     playing plate is the same sheet as a resting one */
  --pr-field:#FFFFFF;
  --pr-field-rgb:255,255,255;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;align-items:stretch;margin-top:22px;
  width:calc(100% + var(--gut) * 2);margin-left:calc(var(--gut) * -1);
}
.pcard{min-width:0;background:transparent;position:relative;box-shadow:none}
.pcard-stage{
  position:relative;display:grid;place-items:center;
  aspect-ratio:1/2;overflow:hidden;background:var(--pr-field);
}
.pcard-mark{
  font-family:var(--serif);font-size:clamp(52px,6.4vw,88px);font-weight:600;
  color:var(--blue);opacity:.14;line-height:.8;letter-spacing:-.04em;
  user-select:none;
}
.pcard-medal{
  position:absolute;top:8px;right:8px;z-index:6;
  width:26px;height:26px;display:grid;place-items:center;
  border-radius:50%;background:var(--gold);color:#fff;
}
.pcard-medal .ic{width:11px;height:11px;stroke-width:2}
/* the phosphor sport glyphs carry far more detail than the line set, so they need the room */
.pcard-medal .ic-ph{width:15px;height:15px}
/* the medal now carries the program, not a rank: one colour per team */
.pcard[data-sport="football"] .pcard-medal{background:var(--blue)}
.pcard[data-sport="basketball"] .pcard-medal{background:var(--gold);color:var(--ink)}
.pcard[data-sport="girls-basketball"] .pcard-medal{background:var(--cul)}
.pcard[data-sport="flag"] .pcard-medal{background:var(--aea)}
.pcard[data-sport="volleyball"] .pcard-medal{background:var(--blue-d)}

.pr-clip,.pr-stand{position:absolute;inset:0;width:100%;height:100%}
.pr-clip{z-index:2;opacity:1;object-fit:contain;object-position:center;
  transform:scale(1.62);transform-origin:50% 46%}
.pr-stand{z-index:3;opacity:0;object-fit:contain;object-position:center bottom;
  transform-origin:50% 100%;transform:scale(.93)}
.pcard.is-still .pr-clip{opacity:0}
.pcard.is-still .pr-stand{opacity:1;transform:scale(.97);
  transition:opacity .5s var(--ease),transform .65s var(--ease)}
.pr-ink{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:var(--pr-field);opacity:0;
  transition:opacity var(--ink-ms,280ms) cubic-bezier(.45,.08,.18,1)}
.pcard.is-out .pr-ink{opacity:1}
.pcard.is-still:not(.is-out) .pr-ink{opacity:0;
  transition-duration:calc(var(--ink-ms,280ms) * 1.7);transition-timing-function:var(--ease)}
.pr-flash{position:absolute;z-index:1;pointer-events:none;
  left:50%;top:40%;width:78%;aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.4);
  background:radial-gradient(circle,rgba(201,162,39,.3) 0%,rgba(5,80,158,.06) 42%,transparent 68%);
  opacity:0}
.pcard-stage.boom .pr-flash{animation:catchflash 460ms cubic-bezier(.16,.8,.2,1) forwards}
@keyframes catchflash{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.22)}
}

/* Preston's Madden kick meter: wider, thicker and lit, so it reads at card size */
.qte{position:absolute;left:9%;right:9%;top:42px;z-index:7;opacity:0;
  transition:opacity .2s}
.qte.is-run,.qte.is-hit{opacity:1}
.qte-bar{position:relative;display:block;height:9px;border-radius:999px;
  background:#12330f;border:1px solid rgba(6,24,7,.6);overflow:visible;
  box-shadow:0 1px 5px rgba(6,24,7,.4)}
.qte-fill{position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,#2c8f2e,#8dff86 50%,#2c8f2e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.qte-zone{
  position:absolute;left:56%;top:-5px;width:11px;height:19px;
  background:#F2FF4D;transform:translateX(-50%);
  filter:drop-shadow(0 0 5px rgba(242,255,77,.9));
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.qte-pin{
  position:absolute;top:-5px;left:8%;width:3px;height:19px;
  background:#fff;border-radius:2px;box-shadow:0 0 6px rgba(255,255,255,.95);
}
.qte.is-run .qte-pin{animation:qteslide .94s cubic-bezier(.18,.82,.2,1) forwards}
@keyframes qteslide{to{left:56%}}
.qte.is-hit .qte-pin{left:56%;animation:none}
.qte.is-hit .qte-fill{filter:brightness(1.3) saturate(1.15)}
.qte.is-hit .qte-bar{box-shadow:0 0 12px rgba(141,255,134,.85),0 1px 5px rgba(6,24,7,.4)}
.pcard.is-still .qte{opacity:0}

/* the name line captions the plate now: it sits under the stage on the page's own
   ground, so it stays legible whatever the figure is doing inside the frame */
.pcard-plate{
  display:flex;align-items:center;gap:9px;
  margin:8px 0 0;padding:11px 12px 12px;
  /* its own sheet, gapped off the plate above so the two read as picture and label
     rather than one box. It is a <footer>, so it opts out of the page footer's ground. */
  background:var(--pr-field);color:inherit;border-radius:2px;
}
.pcard-num{
  font-family:var(--serif);font-size:clamp(24px,2.2vw,32px);font-weight:600;
  color:var(--gold);line-height:.85;letter-spacing:-.04em;flex:none;
}
.pcard-who{min-width:0}
.pcard-who b{
  display:block;font-family:var(--sans);font-size:clamp(12px,1.15vw,15px);
  font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--blue);line-height:1.15;
}
.pcard-who i{
  display:block;margin-top:3px;font-style:normal;font-family:var(--sans);
  font-size:clamp(9px,.78vw,10.5px);letter-spacing:.05em;text-transform:uppercase;
  font-weight:700;color:var(--grey);line-height:1.3;
}

@media (max-width:1040px){
  .six{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin-left:0}
}
@media (max-width:640px){
  .six{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .pr-flash,.qte,.k2{display:none}
  .pr-ink{display:none}
  .pr-clip{opacity:0;transform:none}
  .pr-stand{opacity:1;transform:none}
  .pcard-cue{display:none}
}

/* the medal is the only program marker on the card; the name is for screen readers */
.pcard{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.pcard:hover{transform:translateY(-4px)}

/* the replay affordance: only shows on a card that has something to replay */
.pcard-cue{
  position:absolute;left:8px;top:9px;z-index:6;
  font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  color:var(--blue);background:rgba(234,242,250,.9);border:1px solid rgba(5,80,158,.18);
  padding:3px 6px;border-radius:var(--r-xs);line-height:1;
  opacity:0;transform:translateY(-3px);transition:opacity .22s,transform .22s var(--ease);
}
.pcard:hover .pcard-cue{opacity:1;transform:none}
.pcard.is-playing .pcard-cue{opacity:0}

/* Malik's plate runs the torn-paper dunk, then settles on the knee-up still.
   The clip was encoded over the card's own field colour, but h264 4:2:0 hands
   #F2EFE6 back as #F1EDE5, so this card shifts its field token to the decoded
   value and the letterbox seam either side of the clip disappears. */
.pcard.is-hoop .pr-clip{transform:none;transform-origin:50% 50%}
/* sized so his cut-out lands at the same on-card height as Preston's */
.pcard.is-hoop .pr-stand{transform:scale(.76)}
.pcard.is-hoop.is-still .pr-stand{transform:scale(.79)}
.pcard.is-hoop .pcard-stage.boom .pr-flash{
  top:30%;animation:catchflash 620ms cubic-bezier(.16,.8,.2,1) forwards;
}

/* ---------- 2K shot meter: the arc fills upward, then the release badge ----------
   Colours sampled off the reference frame: arc and frame #04F910, label #2BEE19,
   slab a four-stop gunmetal. The slab and its frame are skewed together and only the
   glyphs are counter-skewed, so the plates lean but the word stays upright. */
.k2{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;transition:opacity .2s}
.k2.is-run,.k2.is-hit,.k2.is-linger{opacity:1}
/* the label outlives the play: the arc drops with the clip, "Excellent" holds on */
.k2.is-linger .k2-arc{opacity:0;transition:opacity .3s var(--ease)}
.k2.is-out{opacity:0;transition:opacity .55s var(--ease)}
.k2-arc{position:absolute;left:6%;top:27%;width:24%;height:38%;overflow:visible}
.k2-arc path{fill:none;stroke-linecap:round;stroke-width:7.5}
.k2-track{stroke:rgba(9,28,10,.3)}
.k2-fill{
  stroke:#A6E9AC;stroke-dasharray:100;stroke-dashoffset:100;
  filter:drop-shadow(0 0 3px rgba(4,249,16,.5));
}
.k2.is-run .k2-fill{animation:k2rise var(--k2-rise,870ms) cubic-bezier(.4,.02,.5,1) forwards}
@keyframes k2rise{to{stroke-dashoffset:0}}
.k2.is-hit .k2-fill{
  stroke:#04F910;stroke-dashoffset:0;animation:none;
  filter:drop-shadow(0 0 5px rgba(4,249,16,.95)) drop-shadow(0 0 14px rgba(4,249,16,.55));
}

.k2-badge{
  position:absolute;left:50%;top:4.5%;opacity:0;
  transform:translate(-50%,0) scale(.6);
}
.k2.is-hit .k2-badge{animation:k2pop .44s var(--ease) forwards}
@keyframes k2pop{
  0%{opacity:0;transform:translate(-50%,4px) scale(.6)}
  55%{opacity:1;transform:translate(-50%,0) scale(1.09)}
  100%{opacity:1;transform:translate(-50%,0) scale(1)}
}
.k2-slab{
  display:block;padding:2px;border-radius:3px;background:#04F910;transform:skewX(-8deg);
  box-shadow:0 0 6px rgba(4,249,16,.95),0 0 17px rgba(4,249,16,.55),0 0 34px rgba(4,249,16,.28);
}
.k2-slab i{
  display:block;padding:3px 11px 4px;border-radius:2px;font-style:normal;
  background:linear-gradient(180deg,#191919 0%,#454546 32%,#232323 64%,#080808 100%);
}
.k2-slab b{
  display:inline-block;transform:skewX(8deg);
  font-family:var(--sans);font-size:clamp(9px,1.05vw,13px);font-weight:800;
  letter-spacing:.005em;line-height:1.15;color:#2BEE19;
  text-shadow:0 0 7px rgba(4,249,16,.8);
}

/* teams with nothing filed yet get a hatched plate, not a fake player */

.pcard-mark--icon{
  width:44%;height:auto;aspect-ratio:1;fill:var(--blue);stroke:none;opacity:.13;
}
/* nothing filed means nothing to sell: these sit back a step from the named three */
.pcard.is-pending{--pr-field:#EDEBE4;--pr-field-rgb:237,235,228;opacity:.72;filter:saturate(.35)}

.pcard.is-pending .pcard-medal{background:var(--rule-d);color:#fff}
.pcard.is-pending .pcard-who b{color:var(--grey);font-weight:700}
.pcard.is-pending .pcard-who i{color:var(--grey);opacity:.85}
.pcard.is-pending:hover{transform:none;opacity:.85}
.pcard.is-pending:hover .pcard-mark--icon{opacity:.2}
.pcard-mark--icon{transition:opacity .3s var(--ease)}

/* ---------- roster deck: one program at a time ---------- */
.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rosterhead{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 20px;margin:clamp(30px,3.6vw,44px) 0 0;
}
.rosterhead .eyebrow{margin:0}
.teamswap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tsw-btn{
  display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--blue);
  border:1px solid var(--rule-d);border-radius:var(--r);padding:9px 16px;
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.02em;
  cursor:pointer;box-shadow:var(--sh-1);
  transition:border-color .2s,background .2s,color .2s,transform .2s var(--ease);
}
.tsw-btn:hover{border-color:var(--blue);background:var(--blue-l);transform:translateY(-2px)}
.tsw-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tsw-btn .ic{transition:transform .3s var(--ease)}
.tsw-btn.next:hover .ic{transform:translateX(4px)}
.tsw-arrow{padding:9px 11px}
.tsw-arrow.prev .ic{transform:rotate(180deg)}
.tsw-arrow.prev:hover .ic{transform:rotate(180deg) translateX(4px)}
.tsw-count{
  font-size:12px;font-weight:800;color:var(--grey);letter-spacing:.12em;
  font-variant-numeric:tabular-nums;padding:0 4px;
}
.tsw-dots{display:flex;align-items:center;gap:7px;margin-left:6px}
.tsw-dots button{
  width:9px;height:9px;padding:0;border-radius:50%;border:1px solid var(--rule-d);
  background:#fff;cursor:pointer;
  transition:background .22s,border-color .22s,transform .22s var(--ease);
}
.tsw-dots button:hover{border-color:var(--blue)}
.tsw-dots button[aria-current="true"]{background:var(--blue);border-color:var(--blue);transform:scale(1.25)}

.rosterdeck{position:relative}
.rosterteam[hidden]{display:none}
.rosterteam.is-swap{animation:rosterin .44s var(--ease) both}
@keyframes rosterin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rosterteam-head{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px;
  margin-top:16px;padding-bottom:12px;border-bottom:1px solid var(--rule);
}
.rosterteam-head h3{font-size:clamp(20px,2.1vw,28px)}
.rosterteam-head p{
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--grey);
}
.rosterteam .rosterwrap{margin-top:14px}

.rosterblank{
  margin-top:18px;padding:clamp(34px,5vw,60px) 24px;text-align:center;
  display:grid;place-items:center;gap:13px;
  border:1px dashed var(--rule-d);border-radius:var(--r);
  background:linear-gradient(180deg,#fff,var(--blue-ll));
}
.rosterblank .glyph{width:52px;height:52px;fill:var(--blue);stroke:none;opacity:.16}
.rosterblank b{
  font-family:var(--sans);font-size:clamp(14px,1.6vw,19px);font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue);line-height:1.3;
}
.rosterblank p{font-size:14.5px;color:var(--grey);max-width:52ch}
.rosterblank a{
  display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;margin-top:2px;
}
.rosterblank a .ic{width:14px;height:14px}
.rostersrc{margin-top:16px;font-size:13px;color:var(--grey)}

@media (max-width:640px){
  .rosterhead{align-items:flex-start;flex-direction:column}
  .teamswap{width:100%}
  .tsw-btn.next{flex:1;justify-content:center}
}

.chip{display:inline-flex;align-items:center;gap:8px;cursor:default}
a.chip{cursor:pointer;color:var(--ink)}
a.chip:hover{text-decoration:none;border-color:var(--blue);color:var(--blue)}
.chip .ic{width:16px;height:16px;flex:none}

.studios{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;margin-top:24px}
.studio{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  padding:22px 12px 16px;background:#fff;border:1px solid var(--rule);
  color:var(--ink);text-decoration:none;min-height:128px;
  transition:border-color .2s,transform .2s var(--ease),color .2s;
}
.studio:hover,.studio:focus-visible{text-decoration:none;border-color:var(--aea);color:var(--aea);
  transform:translateY(-2px)}
.studio .ic{width:28px;height:28px;color:var(--aea)}
.studio b{font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;line-height:1.3}

.sportchips .chip .ic{color:var(--blue)}


/* ---------- site footer ---------- */
footer{background:#081018;color:#8B949E;font-size:14px}
footer .wrap{padding:0 var(--gut)}
footer .ft{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px);
  padding:clamp(40px,5vw,72px) 0 36px;border-bottom:1px solid #1A2430}
footer .ft-mark{display:flex;align-items:center;gap:14px;color:#fff;text-decoration:none;margin-bottom:18px}
footer .ft-mark:hover{text-decoration:none}
footer .ft-mark img{width:48px;height:auto;flex:none}
footer .ft-mark b{display:block;font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:-.014em}
footer .ft-mark em{display:block;font-style:normal;margin-top:3px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#8FBBE6;font-weight:700}
footer address{font-style:normal;line-height:1.6;color:#C3CDD6}
footer .ft-brand p{margin-top:10px}
footer .ft-brand a{color:#fff}
footer .ft-col{display:flex;flex-direction:column;gap:10px}
footer .ft-col h2{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;font-weight:700;margin:0 0 4px}
footer .ft-col a{color:#C3CDD6}
footer .ft-col a:hover{color:#fff;text-decoration:none}
footer .ft-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 0 28px;font-size:12.5px;color:#6B7480}
@media (max-width:800px){
  footer .ft{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  footer .ft{grid-template-columns:1fr}
}

/* ---------- mobile corrections ---------- */
/* the football block is a two-up on desktop; below 900 it has to stack or the
   schedule pushes the page sideways */
@media (max-width:900px){
  .fb{grid-template-columns:1fr;gap:clamp(26px,5vw,38px)}
}
@media (max-width:560px){
  .sched{font-size:13.5px}
  .sched th{padding-right:8px}
  .sched td{padding:11px 8px 11px 0}
  .sched .dt,.sched .tm{font-size:12.5px}
  .sched .ha{padding:3px 7px;font-size:9.5px;letter-spacing:.08em}
  .nextgame{padding:24px 20px 26px}
  .nextgame .cd div{min-width:0;flex:1 1 64px;padding:10px 8px}
}
/* the utility strip scrolls sideways, but with the scrollbar hidden there was nothing
   to say so, and `.sep`'s auto margin pushed Contact clean off a phone screen */
@media (max-width:760px){
  .util{position:relative}
  .util .wrap{gap:14px;padding-right:26px}
  .util .sep{margin-left:0}
  .util::after{
    content:"";position:absolute;top:0;right:0;width:34px;height:100%;pointer-events:none;
    background:linear-gradient(90deg,rgba(6,47,88,0),var(--blue-dd) 82%);
  }
}

/* ---------- Y2K wordmark behind the signature programs ----------
   Chetkiy (OMG SSG STD, free for commercial use), subset to the six letters in
   ROYALS. The face hangs starbursts off every glyph, so the letters need real air
   between them or the sparkles collide and the word stops reading. Each letter
   carries its own tilt; the whole thing sits under the section and takes no pointer. */
@font-face{
  font-family:"Chetkiy";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/chetkiy.fc6b3bf8.woff2) format("woff2");
}
.has-y2k{position:relative;overflow:hidden}
/* anchored to the heading row, so it stays centred on the headline whatever the
   section's wave padding resolves to */
.has-y2k .sechead{position:relative}
.has-y2k .sechead > div,.has-y2k .sechead > .more{position:relative;z-index:1}
.y2k{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:0;pointer-events:none;user-select:none;white-space:nowrap;
  display:flex;align-items:center;gap:clamp(6px,2.2vw,48px);
  font-family:"Chetkiy",var(--serif);font-size:clamp(120px,22vw,360px);
  line-height:1;
}
.y2k span{display:block;color:var(--blue);opacity:.13}
/* the tilt sequence, nothing regular about it, that is the point */
.y2k span:nth-child(1){transform:rotate(-9deg)  translateY(3%)}
.y2k span:nth-child(2){transform:rotate(6deg)   translateY(-5%);opacity:.10}
.y2k span:nth-child(3){transform:rotate(-4deg)  translateY(6%)}
.y2k span:nth-child(4){transform:rotate(12deg)  translateY(-2%);opacity:.11}
.y2k span:nth-child(5){transform:rotate(-8deg)  translateY(5%)}
.y2k span:nth-child(6){transform:rotate(5deg)   translateY(-4%);opacity:.10}
@media (max-width:760px){
  .y2k{font-size:clamp(96px,30vw,190px);gap:clamp(2px,1.4vw,12px)}
}
/* grid and flex items default to min-width:auto, which stops an overflow-x child
   from ever shrinking, the contact page's address table was holding the column
   open at its 460px floor and pushing the phone layout sideways */
.split > *,.prose{min-width:0}
.tablewrap{max-width:100%}

/* ---------- hot pink: student life gets its own temperature ----------
   The site runs royal blue end to end, which is right for the institution but
   flattens the one section that is meant to feel like the students rather than
   the school. Pink is scoped to this block only, accents, hover state, counters
   and the backdrop word, so it reads as a deliberate change of register. */
:root{--pink:#E0007A;--pink-d:#B00060;--pink-l:#FDEBF4}
.tone-pink .eyebrow{color:var(--pink)}
.tone-pink .eyebrow .ic{color:var(--pink)}
.tone-pink .more{color:var(--pink-d)}
.tone-pink .vlist{border-top-color:var(--pink)}
.tone-pink .vrow:hover{background:var(--pink-l)}
.tone-pink .vrow:hover h3{color:var(--pink-d)}
.tone-pink .vrow .count{color:var(--pink)}
.tone-pink .vrow .thumb{border-color:var(--pink-l)}
.tone-pink .y2k span{color:var(--pink);opacity:.13}
/* no photo grid here to hide the lower half of the word, so it sits higher and
   smaller and stops short of the first row */
.tone-pink .y2k{font-size:clamp(92px,15.5vw,250px);top:40%}
@media (max-width:760px){
  .tone-pink .y2k{font-size:clamp(76px,24vw,150px);top:42%}
}

/* ---------- WCAG 1.4.1: colour is not the only cue ----------
   A link sitting inside running text has to be distinguishable from the text
   around it by something other than its colour, so body copy underlines. Nav,
   cards, chips and buttons are not text blocks and keep their clean treatment. */
.prose a:not(.btn):not(.more):not(.chip),
.tablewrap a,
.lede a,
.rostersrc a,
.rosterblank a:not(.btn):not(.more),
.fine a,
.note a{
  text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;
}
.prose a:not(.btn):not(.more):not(.chip):hover,
.tablewrap a:hover,
.lede a:hover,
.rostersrc a:hover{text-decoration-thickness:2px}

/* ---------- phone corrections, round two ---------- */

/* Also offered: four programmes on one line. Below 760 the label stacks above the
   row, the row stops wrapping, and the type scales with the viewport so all four
   names still fit at 320px rather than breaking to a second line. */
@media (max-width:760px){
  .house-also{flex-direction:column;align-items:flex-start;gap:9px;padding:14px 16px}
  .house-also div{
    flex-wrap:nowrap;width:100%;gap:0;justify-content:space-between;
    align-items:baseline;
  }
  .house-also a{
    font-size:clamp(8.6px,2.72vw,13px);white-space:nowrap;letter-spacing:-.01em;
  }
  .house-also a + a::before{
    content:"·";display:inline-block;padding:0 clamp(3px,1.15vw,9px);
    color:rgba(232,238,243,.42);font-weight:400;
  }
}
@media (max-width:380px){
  .house-also{padding:12px 12px}
}

/* News: the lead story is a two-up on desktop and has to stack on a phone, or the
   headline is squeezed into a 150px column and wraps to seven lines. */
@media (max-width:760px){
  .room-lead{grid-template-columns:1fr;gap:16px;align-items:start;padding-bottom:26px}
  .room-lead .shot{order:-1}
  .room-lead h2{font-size:clamp(24px,6.6vw,34px);margin-top:12px;line-height:1.15}
  .room-lead p{font-size:15.5px;margin-top:12px;max-width:none}
  .room-lead .go{margin-top:16px}
  .room-row{grid-template-columns:1fr;gap:0;margin-top:26px}
  .room-item{padding:22px 0 0;border-left:0;border-top:1px solid var(--rule);margin-top:22px}
  .room-item:first-child{border-top:0;margin-top:0;padding-top:0}
  /* the source name was stacking three words deep beside its tag */
  .kicker{flex-wrap:wrap;gap:6px 10px;line-height:1.4}
}

/* the ticker scrolls sideways; say so rather than clipping the countdown mid-word */
@media (max-width:760px){
  .ticker{position:relative}
  .ticker .wrap{padding-right:28px}
  .ticker::after{
    content:"";position:absolute;top:0;right:0;width:36px;height:100%;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0),#fff 78%);
  }
}

/* the fixture list runs to ten rows; on a phone it shows the next few and fades
   into a reveal, the same treatment the roster uses */
.schedwrap{position:relative}
.schedwrap.collapsed{overflow:hidden}
.schedwrap.collapsed::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:96px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(242,245,249,0),rgba(242,245,249,.88) 58%,var(--band) 100%);
}
.schedmore{display:flex;justify-content:center;margin-top:14px}
.schedmore button{
  display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--blue);
  border:1px solid var(--rule-d);border-radius:var(--r);padding:10px 20px;
  font-size:13.5px;font-weight:700;cursor:pointer;box-shadow:var(--sh-1);
  transition:border-color .2s,background .2s,transform .2s var(--ease);
}
.schedmore button:hover{border-color:var(--blue);background:var(--blue-l);transform:translateY(-2px)}
.schedmore button .ic{transition:transform .3s var(--ease)}
.schedmore button[aria-expanded="true"] .ic{transform:rotate(180deg)}

/* ---------- the word behind the player ----------
   Each plate carries a short name set in Chetkiy, ghosted behind the figure. The
   words are deliberately short so they fill a narrow column at real size, and every
   one gets its own tilt, drop and weight so the row never reads as a repeated
   template. Numbers stay in the serif; this face is for names only. */
.pcard-word{
  position:absolute;left:50%;top:var(--w-top,46%);z-index:0;pointer-events:none;user-select:none;
  font-family:"Chetkiy",var(--serif);line-height:1;white-space:nowrap;letter-spacing:.02em;
  font-size:calc(clamp(34px,4.2vw,58px) * var(--w-size,1));
  color:var(--w-ink,var(--blue));opacity:var(--w-fade,.42);
  transform:translate(-50%,-50%) rotate(var(--w-rot,0deg));
}
.pcard[data-sport="basketball"]{--w-ink:#B08618}
.pcard[data-sport="girls-basketball"]{--w-ink:var(--cul)}
.pcard[data-sport="flag"]{--w-ink:var(--aea)}
.pcard[data-sport="volleyball"]{--w-ink:var(--blue-d)}
.pcard.is-pending{--w-fade:.3}

/* SOON is the mark on an unfiled plate, so the sport glyph steps out of its way */
.pcard.is-pending .pcard-mark--icon{display:none}

/* phones: two up, and shorter, so six plates stop owning the scroll */
@media (max-width:640px){
  .pcard-stage{aspect-ratio:1/1.58}
  .pcard-word{font-size:clamp(30px,9.4vw,48px)}
  .pcard:nth-child(2) .pcard-word{font-size:clamp(27px,8.6vw,44px)}
}

/* the caption is outside the stage now, so nothing inside it can be clipped by the
   figure and the detail line has room to sit on two lines when the column is narrow */
.pcard-who i{white-space:normal}
.pcard-num{align-self:center}

/* ---------- next game: a fixture card, not a line of text ----------
   The Royals crest sits behind it as a watermark. The opponent's own mark is
   deliberately absent: it is their trademark and we hold no licence for it, so the
   matchup is carried typographically instead. */
.nextgame{
  background-image:
    radial-gradient(rgba(255,255,255,.14) 1.4px,transparent 1.5px),
    url("img/logo-athletics.webp");
  background-size:20px 20px, auto 148%;
  background-position:0 0, right -22% center;
  background-repeat:repeat, no-repeat;
}
.nextgame::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,var(--blue-dd) 34%,rgba(6,47,88,.72) 68%,rgba(6,47,88,.42));
}
.nextgame > *{position:relative;z-index:1}
.matchup{margin-top:18px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 11px}
.mu-us,.mu-them{
  font-family:var(--serif);font-weight:600;letter-spacing:-.022em;line-height:1.04;color:#fff;
}
.mu-us{font-size:clamp(20px,2.3vw,30px);opacity:.82;white-space:nowrap}
.mu-them{font-size:clamp(20px,2.3vw,30px);white-space:nowrap}
.mu-v{
  font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);
}

/* The also-offered strip carried real programmes at footnote size, so it gets weight
   -- but only from tablet up. Below that the four names have to share one line, and
   an unscoped size here overrode the phone clamp and pushed JROTC off the screen. */
@media (min-width:761px){
  .house-also{padding:20px 24px}
  .house-also p{font-size:11px;letter-spacing:.18em}
  .house-also a{font-size:16px;font-weight:700}
}
/* a 16:9 crop is a letterbox on a portrait screen; give the lead image real height
   so it carries the story rather than sitting as a strip above it */
@media (max-width:760px){
  .room-lead .shot{aspect-ratio:4/3}
  .room-item .shot,.ncard .shot,.nlead .shot{aspect-ratio:4/3}
}

/* ===========================================================================
   Six to watch, rebuilt: white paper plates taped to the page.
   The stock is pure white with a woven fibre laid over it, the plate is held by
   two strips of tape, and an unfiled plate is greyed with bites torn out of its
   edge. Every plate is the same height whatever its caption says, so a name that
   runs to two lines cannot push its neighbour out of line.
   ======================================================================== */
.six{align-items:start}
.pcard{
  /* white stock with a fibre weave: two fine diagonal threads plus a woven noise */
  --paper-white:#FFFFFF;
  background:
    repeating-linear-gradient(64deg, rgba(9,30,58,.030) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-26deg, rgba(9,30,58,.022) 0 1px, transparent 1px 5px),
    var(--paper-white);
  padding:9px 9px 0;
  box-shadow:0 1px 1px rgba(9,30,58,.10), 0 14px 26px -18px rgba(9,30,58,.42);
  transform:rotate(var(--tilt,0deg));
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.pcard:hover{transform:rotate(var(--tilt,0deg)) translateY(-5px);
  box-shadow:0 2px 3px rgba(9,30,58,.12), 0 22px 38px -20px rgba(9,30,58,.5)}

/* tape: one strip over each top corner, cut at opposing angles */
.pcard::before,.pcard::after{
  content:"";position:absolute;z-index:8;top:-9px;width:54px;height:19px;
  background:linear-gradient(180deg,rgba(238,232,214,.86),rgba(226,218,196,.78));
  box-shadow:0 1px 2px rgba(9,30,58,.14);
  -webkit-backdrop-filter:saturate(.7);backdrop-filter:saturate(.7);
}
.pcard::before{left:-11px;transform:rotate(-38deg)}
.pcard::after{right:-11px;transform:rotate(38deg)}

.pcard-stage{background:var(--pr-field);border-radius:0}
/* the fibre reads through the stage as well as the margin around it */
.pcard-stage{background-image:
  repeating-linear-gradient(64deg, rgba(9,30,58,.028) 0 1px, transparent 1px 4px),
  repeating-linear-gradient(-26deg, rgba(9,30,58,.02) 0 1px, transparent 1px 5px)}

/* an unfiled plate: greyed, and bitten out of the paper rather than cut square */
.pcard.is-pending{
  --pr-field:#EDECE8;--pr-field-rgb:237,236,232;opacity:1;filter:none;
  background:
    repeating-linear-gradient(64deg, rgba(9,30,58,.03) 0 1px, transparent 1px 4px),
    #F4F3F0;
  box-shadow:0 1px 1px rgba(9,30,58,.06), 0 10px 20px -16px rgba(9,30,58,.3);
  clip-path:polygon(
    0 0, 26% 1.1%, 52% 0, 74% 1.4%, 100% 0,
    99% 22%, 100% 41%, 98.6% 63%, 100% 82%, 99% 100%,
    76% 98.8%, 51% 100%, 28% 98.6%, 0 100%,
    1.2% 78%, 0 57%, 1.4% 36%, 0 18%
  );
}
.pcard.is-pending:hover{transform:rotate(var(--tilt,0deg))}
.pcard.is-pending::before,.pcard.is-pending::after{opacity:.55}
.pcard.is-pending .pcard-who b{color:#78808A}
.pcard.is-pending .pcard-who i{color:#98A0A9}
.pcard.is-pending .pcard-word{opacity:.26}

/* the plates hang at slightly different angles, as taped paper does */
.six .pcard:nth-child(1){--tilt:-.7deg}
.six .pcard:nth-child(2){--tilt:.5deg}
.six .pcard:nth-child(3){--tilt:-.4deg}
.six .pcard:nth-child(4){--tilt:.8deg}
.six .pcard:nth-child(5){--tilt:-.6deg}
.six .pcard:nth-child(6){--tilt:.45deg}

/* one caption height for the row: the detail line gets two lines' worth whether it
   uses them or not, so no plate sits lower than its neighbour */
.pcard-plate{
  background:transparent;margin:0;padding:10px 4px 12px;align-items:flex-start;
}
.pcard-who{flex:1}
.pcard-who i{min-height:2.6em;display:flex;align-items:flex-start}

/* Student life rows are thumb | text | count on desktop. At phone width that left the
   description about 150px to live in, so it wrapped to ten lines. A full-bleed image
   fixed the width but cost more height than it saved, so instead the thumb shrinks and
   the count sheds its box: the text gets roughly 210px rather than 150. */
@media (max-width:640px){
  .vrow{grid-template-columns:76px 1fr auto;gap:0 12px;padding:18px 0;align-items:start}
  .vrow .thumb{width:76px;height:76px}
  .vrow .thumb.crest{padding:7px}
  .vrow .thumb.crest img{max-height:44px}
  .vrow h3{font-size:17.5px;line-height:1.3}
  .vrow p{font-size:14px;margin-top:5px;max-width:none}
  .vrow .count{font-size:24px;line-height:1;padding-top:2px}
  .vrow .count small,.vrow .count span{font-size:8.5px;letter-spacing:.1em}
  .vrow:hover{padding-left:0}
}

/* ---------- 404 ----------
   The number is the artwork: ROYALS-sized Chetkiy digits bleeding off both edges of
   the content column, with the content sitting over them. Search first, because
   somebody who mistyped a URL knows what they were after; routes second. */
.nf{position:relative;overflow:hidden;padding:clamp(46px,7vw,104px) 0 clamp(56px,8vw,120px)}
.nf .wrap{position:relative}
.nf-num{
  position:absolute;left:50%;top:clamp(-18px,-1vw,0px);transform:translateX(-50%);
  z-index:0;pointer-events:none;user-select:none;white-space:nowrap;
  display:flex;gap:clamp(4px,1.6vw,34px);
  font-family:"Chetkiy",var(--serif);font-size:clamp(150px,29vw,420px);line-height:.86;
}
.nf-num span{display:block;color:var(--blue)}
.nf-num span:nth-child(1){opacity:.13;transform:rotate(-8deg)}
.nf-num span:nth-child(2){opacity:.16;transform:rotate(5deg) translateY(2%)}
.nf-num span:nth-child(3){opacity:.13;transform:rotate(-4deg) translateY(-1%)}
.nf-body{position:relative;z-index:1;max-width:64ch}
.nf-body h1{font-size:clamp(34px,5.4vw,64px);margin-top:12px;letter-spacing:-.024em}
.nf-body .lede{margin-top:16px;max-width:52ch}

.nf-search{
  position:relative;display:flex;align-items:center;gap:10px;margin-top:30px;
  background:#fff;border:1px solid var(--rule-d);border-radius:var(--r);
  padding:8px 8px 8px 16px;box-shadow:var(--sh-1);max-width:540px;
}
.nf-search:focus-within{border-color:var(--blue);box-shadow:var(--sh-2)}
.nf-search > .ic{color:var(--grey);flex:none}
.nf-search input{
  flex:1;min-width:0;border:0;background:none;font-family:var(--sans);font-size:16px;
  color:var(--ink);padding:10px 0;
}
.nf-search input:focus{outline:none}
.nf-search .btn{flex:none;padding:11px 18px;font-size:14px}
.nf-results{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;display:none;
  background:#fff;border:1px solid var(--rule);border-radius:var(--r);
  box-shadow:var(--sh-2);overflow:hidden;max-height:320px;overflow-y:auto;
}
.nf-results.open{display:block}
.nf-results a{
  display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline;
  padding:12px 16px;border-bottom:1px solid var(--rule);color:var(--ink);
}
.nf-results a:last-child{border-bottom:0}
.nf-results a:hover,.nf-results a.cursor{background:var(--blue-l);text-decoration:none}
.nf-results em{
  font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--blue);padding:3px 7px;border-radius:var(--r-xs);
}
.nf-results b{font-weight:600;font-size:15px}
.nf-results .none{padding:14px 16px;font-size:14.5px;color:var(--grey)}

.nf-routes{
  list-style:none;margin:34px 0 0;padding:0;display:grid;gap:0;
  border-top:2px solid var(--ink);
}
.nf-routes li{border-bottom:1px solid var(--rule)}
.nf-routes a{
  display:grid;grid-template-columns:20px 1fr;gap:4px 14px;align-items:center;
  padding:16px 4px;color:var(--ink);transition:background .18s,padding-left .24s var(--ease);
}
.nf-routes a:hover{background:var(--blue-l);padding-left:12px;text-decoration:none}
.nf-routes .ic{color:var(--blue);grid-row:span 2;align-self:center}
.nf-routes b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.nf-routes i{font-style:normal;font-size:13.5px;color:var(--grey);grid-column:2}
.nf-help{margin-top:26px;font-size:14px;color:var(--grey)}
.nf-help a{text-decoration:underline;text-underline-offset:.18em}

@media (max-width:640px){
  .nf-search{flex-wrap:wrap;padding:10px}
  .nf-search input{order:1;flex:1 1 100%;padding:6px 4px}
  .nf-search > .ic{order:0}
  .nf-search .btn{order:2;width:100%;justify-content:center;margin-top:4px}
}