@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500;600&display=swap');
:root{color-scheme:dark;--ink:#101316;--paper:#f6f7f5;--accent:#f7d150;--slant:clamp(45px,6vw,110px);--ease:cubic-bezier(.22,.75,.25,1)}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--paper);font-family:Barlow,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.skip-link{position:absolute;top:-6rem;left:1rem;background:var(--accent);color:var(--ink);padding:1rem;z-index:20}
.skip-link:focus{top:1rem}
.masthead{position:absolute;top:30px;left:36px;z-index:10;pointer-events:none}
h1{margin:0;line-height:0}
.university-logo{display:block;width:380px;max-width:calc(100vw - 48px);height:auto;filter:drop-shadow(0 2px 12px #0005)}
.teams{display:flex;overflow:hidden;min-height:100svh}
.team{--photo-scale:1.04;position:relative;isolation:isolate;flex:1;min-width:0;min-height:max(680px,100svh);overflow:hidden;background:#273742;display:flex;justify-content:flex-end;flex-direction:column;transition:flex-grow .85s var(--ease),filter .65s ease;clip-path:polygon(var(--slant) 0,100% 0,calc(100% - var(--slant)) 100%,0 100%)}
.team+.team{margin-left:calc(-1 * var(--slant))}
.team:first-child{clip-path:polygon(0 0,100% 0,calc(100% - var(--slant)) 100%,0 100%)}
.team:last-child{clip-path:polygon(var(--slant) 0,100% 0,100% 100%,0 100%)}
.team-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;overflow:hidden;transform:translate3d(var(--photo-x,0px),var(--photo-y,0px),0) scale(var(--depth-scale,var(--photo-scale)));transition:transform 1.1s var(--ease)}
.motion-ready .team-photo{transition:none;will-change:transform}
.mach{--photo-scale:1.025}
.mach .team-photo{object-position:74% center}
.met .team-photo{object-position:50% center}
.mars .team-photo{object-position:51% center}
.team::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(4,10,15,.12),rgba(4,10,15,.02) 30%,rgba(4,10,15,.1) 55%,rgba(4,10,15,.86));transition:opacity .7s ease}
.team::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(ellipse at var(--shine-x,50%) var(--shine-y,40%),#fff1,transparent 65%);transition:opacity .7s ease}
.team:focus-visible{outline:3px solid var(--accent);outline-offset:-6px}
.panel-content{margin:0 var(--slant);padding:50px 0 64px;display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center;transition:transform .75s var(--ease)}
.mach .panel-content{margin-left:calc(var(--slant) * .57);margin-right:calc(var(--slant) * 1.43)}
.met .panel-content{margin-left:calc(var(--slant) * .65);margin-right:calc(var(--slant) * 1.35)}
h2{margin:0;line-height:0;width:100%;display:flex;justify-content:center;transform:translate3d(var(--logo-x,0px),var(--logo-y,0px),0)}
.team-logo{display:block;max-width:100%;width:320px;height:104px;object-fit:contain;filter:drop-shadow(0 4px 12px #0003)}
.discipline{white-space:nowrap;flex-shrink:0;transform:scale(var(--label-scale,1));transform-origin:center;font-size:.9375rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;text-shadow:0 1px 4px #000;line-height:1.5;transition:color .5s ease}
.met .discipline{font-size:.875rem;letter-spacing:.08em}
.hover-description{display:grid;grid-template-rows:0fr;opacity:0;width:min(27rem,calc((100vw - var(--slant) * 4) / 3));max-width:none;flex-shrink:0;margin-top:-28px;transform:translateY(12px);transition:grid-template-rows .55s var(--ease),opacity .4s ease,transform .6s var(--ease),margin-top .55s var(--ease)}
.hover-description p{min-height:0;overflow:hidden;margin:0;font-size:1rem;font-weight:500;line-height:1.55;color:#f1f3f5;text-wrap:pretty;text-shadow:0 1px 6px #0009}
.team:focus-visible .hover-description{grid-template-rows:1fr;opacity:1;margin-top:-10px;transform:none}
.team:focus-visible .panel-content{transform:translateY(-10px)}
@media(hover:hover) and (pointer:fine){
 .team:hover{--photo-scale:1.095}
 .mach:hover{--photo-scale:1.04}
 .team:hover::after,.team:focus-visible::after{opacity:1}
 .team:hover .panel-content{transform:translateY(-10px)}
 .team:hover .hover-description{grid-template-rows:1fr;opacity:1;margin-top:-10px;transform:none;transition-delay:0s,.08s,0s,0s}
 .teams:has(.team:hover) .team:not(:hover){filter:brightness(.82) saturate(.92)}
}
@media(hover:hover) and (pointer:fine) and (min-width:641px){
 .teams:has(.team:hover) .team:hover,.teams:has(.team:focus-visible) .team:focus-visible{flex-grow:1.4}
}
@media(max-width:900px) and (min-width:641px){
 :root{--slant:40px}
 .panel-content{gap:22px;padding-bottom:48px}
 .discipline{white-space:nowrap;flex-shrink:0;transform:scale(var(--label-scale,1));transform-origin:center;font-size:.875rem;letter-spacing:.07em}
 .masthead{left:24px;top:24px}
 .hover-description{margin-top:-22px}
}
@media(max-width:640px){
 .masthead{top:24px;left:24px}
 .university-logo{width:330px}
 .teams{display:block}
 .team{--photo-scale:1.16;min-height:max(580px,75svh);clip-path:none!important}
 .team+.team{margin-left:0;border-top:1px solid #ffffff40}
 .panel-content,.mach .panel-content,.met .panel-content{margin:0 36px;padding:80px 0 42px;gap:24px}
 .team-logo{width:290px;height:94px}
 .mach{--photo-scale:1.055}
 .mach .team-photo{object-position:78% center}
 .mars .team-photo{object-position:52% center}
 .hover-description{width:min(27rem,calc(100vw - 72px));margin-top:-24px}
}
@media(hover:none){.hover-description{grid-template-rows:1fr;opacity:1;margin-top:-8px;transform:none}}
@media(prefers-reduced-motion:no-preference){.teams{animation:reveal .9s ease both}@keyframes reveal{from{opacity:0}to{opacity:1}}}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{transition:none!important;animation:none!important}
 .team-photo{transform:none!important;will-change:auto!important}
 .team:hover .panel-content,.team:focus-visible .panel-content,h2{transform:none}
}