:root { --ink:#101820; --hub:#1d4860; --campus:#db6728; --housing:#669765; --paper:#f7f6f2; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; font-size:16px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
main { min-height:calc(100vh - 58px); display:grid; grid-template-rows:auto 1fr; animation:page-in .8s cubic-bezier(.22,1,.36,1) both; }
header { min-height:185px; padding:30px clamp(24px,5vw,78px); display:flex; align-items:center; justify-content:space-between; gap:50px; border-bottom:1px solid rgba(16,24,32,.15); }
.hub-logo { width:clamp(125px,15vw,205px); height:auto; animation:logo-in .9s .08s cubic-bezier(.22,1,.36,1) both; }
.intro { display:grid; grid-template-columns:repeat(2,minmax(220px,320px)); gap:34px; animation:copy-in .8s .16s cubic-bezier(.22,1,.36,1) both; }
.intro p { margin:0; line-height:1.45; color:#4b555c; }
.intro strong { color:var(--ink); }
.choices { display:flex; min-height:560px; overflow:hidden; }
.choice { position:relative; flex:1 1 50%; min-width:0; padding:clamp(34px,5vw,78px); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; color:var(--ink); text-decoration:none; isolation:isolate; transition:flex-grow .7s cubic-bezier(.22,1,.36,1),filter .45s ease; }
.choice::before { content:""; position:absolute; z-index:-1; width:85%; aspect-ratio:1; right:-35%; bottom:-72%; border:1px solid currentColor; border-radius:48% 52% 44% 56%; opacity:.16; box-shadow:0 0 0 28px transparent,0 0 0 29px currentColor,0 0 0 58px transparent,0 0 0 59px currentColor; transform:rotate(18deg); transition:transform 1s cubic-bezier(.22,1,.36,1),opacity .45s ease; }
.choice::after { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(120deg,rgba(255,255,255,.22),transparent 42%); opacity:0; transform:translateX(-22%); transition:opacity .45s ease,transform .8s cubic-bezier(.22,1,.36,1); }
.choice:hover,.choice:focus-visible { flex-grow:1.16; filter:saturate(1.08) brightness(.985); }
.choice:hover::before,.choice:focus-visible::before { opacity:.25; transform:translate(-5%,-6%) rotate(4deg) scale(1.08); }
.choice:hover::after,.choice:focus-visible::after { opacity:1; transform:translateX(0); }
.choice:focus-visible { outline:4px solid var(--ink); outline-offset:-8px; }
.campus { background:#f3c5aa; }
.housing { background:#c7d9c3; border-left:1px solid rgba(16,24,32,.16); }
.choice-index { align-self:flex-end; font-size:14px; font-weight:700; letter-spacing:.15em; transition:transform .55s cubic-bezier(.22,1,.36,1); }
.choice img { position:relative; width:min(410px,78%); max-height:250px; object-fit:contain; object-position:left center; transform-origin:left center; transition:transform .7s cubic-bezier(.22,1,.36,1); }
.choice-copy { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:680px; transition:transform .65s cubic-bezier(.22,1,.36,1); }
.choice-copy p { margin:0; line-height:1.45; }
.choice-copy p[lang="en"] { color:rgba(16,24,32,.68); }
.explore { position:absolute; right:clamp(30px,4vw,65px); bottom:clamp(28px,4vw,60px); display:flex; align-items:center; gap:13px; opacity:0; transform:translate(-14px,14px); transition:opacity .35s ease,transform .6s cubic-bezier(.22,1,.36,1); }
.explore span { font-size:12px; line-height:1.22; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.explore em { font-style:normal; opacity:.64; }
.explore b { font-size:38px; font-weight:400; transition:transform .5s cubic-bezier(.22,1,.36,1); }
.choice:hover .choice-index,.choice:focus-visible .choice-index { transform:translateY(-7px); }
.choice:hover img,.choice:focus-visible img { transform:translateX(12px) scale(1.035); }
.choice:hover .choice-copy,.choice:focus-visible .choice-copy { transform:translateY(-8px); }
.choice:hover .explore,.choice:focus-visible .explore { opacity:1; transform:translate(0,0); }
.choice:hover .explore b,.choice:focus-visible .explore b { transform:translate(4px,-4px); }
footer { min-height:58px; padding:12px clamp(24px,5vw,78px); display:flex; justify-content:space-between; align-items:center; gap:20px; background:var(--hub); color:white; font-size:14px; }
footer a { color:white; }
@keyframes page-in { from { opacity:0; } to { opacity:1; } }
@keyframes logo-in { from { opacity:0; transform:translateY(14px) rotate(-2deg); } to { opacity:1; transform:none; } }
@keyframes copy-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media (max-width:820px) { header { align-items:flex-start; flex-direction:column; gap:24px; } .intro { width:100%; } .choices { display:block; } .choice { min-height:500px; } .housing { border-left:0; border-top:1px solid rgba(16,24,32,.16); } .choice:active img { transform:translateX(8px) scale(1.025); } .explore { opacity:1; transform:none; } }
@media (max-width:560px) { .intro, .choice-copy { grid-template-columns:1fr; gap:12px; } .choice img { width:92%; } footer { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }