:root{--blue-dark:#102a56;--blue:#2457d6;--blue-medium:#5476e7;--blue-light:#eaf0ff;--gold:#f4b942;--gold-dark:#d99419;--gold-light:#fff4d2;--white:#fff;--page-bg:#f4f7fc;--text-dark:#182033;--text-muted:#70798c;--border:#e6eaf2;--shadow-small:0 8px 22px #18274b12;--shadow:0 16px 42px #18274b1c;--content-gutter:clamp(12px, 3vw, 32px);--content-width:880px;--app-sidebar-width:220px;--nav-safe-bottom:max(14px, env(safe-area-inset-bottom))}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;min-width:280px}body{min-height:100svh;padding:0 0 calc(110px + env(safe-area-inset-bottom));background:radial-gradient(circle at 95% 12%, #2457d617, transparent 340px), var(--page-bg);color:var(--text-dark);letter-spacing:.005em;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6;animation:.35s both pageEnter;overflow-x:hidden}@keyframes pageEnter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}img,svg,video,canvas{max-width:100%;display:block}button,a,input,textarea,select{font:inherit;-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}input,textarea,select,button{max-width:100%}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline-offset:3px;outline:3px solid #2457d64d}.header{min-height:250px;padding:58px var(--content-gutter) 92px;color:var(--white);text-align:center;background:radial-gradient(circle at 15% 20%, #ffffff24 0 82px, transparent 83px), linear-gradient(135deg, #173a82 0%, var(--blue) 52%, #6f83ee 100%);justify-content:center;display:flex;position:relative;overflow:hidden}.header:before{content:"";pointer-events:none;border:36px solid #ffffff12;border-radius:50%;width:245px;height:245px;position:absolute;top:-105px;right:-90px}.header:after{content:"";pointer-events:none;background:#f4b94238;border-radius:50%;width:275px;height:275px;position:absolute;bottom:-190px;left:-120px}.header-content{z-index:1;text-align:center;width:min(100%,1050px);margin:0 auto;position:relative}.header h1{letter-spacing:-.045em;text-wrap:balance;max-width:820px;margin:0 auto;font-size:clamp(2.15rem,7vw,4.7rem);font-weight:900;line-height:1}.header-label,.header-subtitle{z-index:1;color:var(--gold-light);letter-spacing:1.8px;text-transform:uppercase;margin:0 auto 10px;font-size:.78rem;font-weight:900;position:relative}.header-description{color:#ffffffd6;text-wrap:pretty;max-width:620px;margin:20px auto 0;font-size:clamp(.94rem,1.5vw,1.05rem);line-height:1.7}.main-content{z-index:2;min-width:0;width:min(calc(100% - (var(--content-gutter) * 2)), var(--content-width));margin-inline:auto;position:relative}.navbar{z-index:1000;left:50%;bottom:var(--nav-safe-bottom);-webkit-backdrop-filter:blur(15px);background:#fffffff2;border:1px solid #e1e6f0e6;border-radius:22px;width:min(100% - 26px,650px);padding:10px;position:fixed;transform:translate(-50%);box-shadow:0 15px 40px #111f3f2e}.nav-links{justify-content:space-around;align-items:center;gap:4px;display:flex}.nav-links a{color:#778095;letter-spacing:.3px;text-align:center;text-transform:uppercase;border-radius:14px;flex:1 1 0;justify-content:center;align-items:center;min-width:0;min-height:44px;padding:12px 7px;font-size:.68rem;font-weight:800;text-decoration:none;transition:color .2s,background .2s,box-shadow .2s,transform .2s;display:flex;position:relative}.nav-links a:hover{color:var(--blue);background:var(--blue-light);transform:translateY(-2px)}.nav-links a:active{transform:scale(.96)}.nav-links a[aria-current=page],.nav-links a.active{color:var(--white);background:linear-gradient(145deg, var(--blue-dark), var(--blue));box-shadow:0 7px 16px #2457d640}@media (width>=701px) and (width<=1100px){.header{min-height:290px;padding:58px var(--content-gutter) 96px}}@media (width<=760px){.navbar{width:min(100% - 20px,650px)}}@media (width<=520px){:root{--content-gutter:12px}body{padding-bottom:calc(94px + env(safe-area-inset-bottom))}.header{min-height:265px;padding:max(46px, calc(34px + env(safe-area-inset-top))) 18px 86px}.header h1{letter-spacing:-.035em}.main-content{width:calc(100% - 20px)}.navbar{bottom:max(8px, env(safe-area-inset-bottom));border-radius:18px;width:calc(100% - 16px);padding:7px}.nav-links a{letter-spacing:.15px;border-radius:12px;min-height:46px;padding:9px 4px;font-size:clamp(.52rem,2.25vw,.62rem)}}@media (width<=380px){.header h1{font-size:clamp(2rem,13vw,2.65rem)}}@media (width>=1000px){:root{--app-sidebar-width:220px;--content-width:960px}body{padding-left:var(--app-sidebar-width);padding-bottom:56px}.header{min-height:330px;padding:72px clamp(42px,6vw,88px) 112px}.header h1{font-size:clamp(3.35rem,5vw,5.15rem)}.main-content{width:min(calc(100% - 64px), var(--content-width))}.navbar{width:var(--app-sidebar-width);height:100svh;padding:max(26px, env(safe-area-inset-top)) 18px max(26px, env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(18px);background:#fffffff7;border:0;border-right:1px solid #e1e6f0f2;border-radius:0;top:0;bottom:0;left:0;transform:none;box-shadow:10px 0 35px #111f3f14}.navbar:before{content:"KEY CLUB\a STUDENT HUB";white-space:pre;color:var(--blue-dark);letter-spacing:2px;font-size:.78rem;font-weight:900;line-height:1.75;position:absolute;top:48px;left:28px}.navbar:after{content:"";background:var(--border);width:76px;height:1px;position:absolute;top:81px;left:28px}.nav-links{flex-direction:column;justify-content:center;align-items:stretch;gap:10px;height:100%}.nav-links a{letter-spacing:.65px;text-align:left;border-radius:15px;justify-content:flex-start;width:100%;min-height:52px;padding:15px 17px;font-size:.73rem}.nav-links a:before{content:"";background:currentColor;border-radius:999px;width:3px;height:0;margin-right:9px;transition:height .2s}.nav-links a:hover{transform:translate(4px)}.nav-links a:hover:before,.nav-links a.active:before,.nav-links a[aria-current=page]:before{height:26px}}@media (width>=1000px) and (width<=1280px){:root{--app-sidebar-width:196px;--content-width:860px}.header{min-height:300px;padding:58px 42px 100px}.header h1{font-size:clamp(3rem,5vw,4.25rem)}.main-content{width:min(calc(100% - 48px), var(--content-width))}.navbar{padding-inline:14px}.navbar:before,.navbar:after{left:24px}.nav-links a{padding-inline:14px;font-size:.68rem}}@media (width>=1440px){:root{--app-sidebar-width:238px;--content-width:1020px}.main-content{width:min(calc(100% - 80px), var(--content-width))}}@media (width>=1000px) and (height<=680px){.navbar{padding-top:14px;padding-bottom:14px}.navbar:before,.navbar:after{display:none}.nav-links{gap:6px}.nav-links a{min-height:45px;padding-top:11px;padding-bottom:11px}.header{min-height:265px;padding-top:48px;padding-bottom:88px}}@media (height<=560px) and (orientation:landscape) and (width<=999px){body{padding-bottom:calc(82px + env(safe-area-inset-bottom))}.header{min-height:220px;padding-top:38px;padding-bottom:72px}.navbar{bottom:6px}}@media (hover:hover) and (pointer:fine){.nav-links a:hover{will-change:transform}}@media (hover:none){.nav-links a:hover{transform:none}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (forced-colors:active){.navbar{border:1px solid canvastext}}@media (width>=1000px){body{padding-left:var(--app-sidebar-width);padding-bottom:56px}#nav-bar.navbar{z-index:1000;width:var(--app-sidebar-width);height:100svh;padding:max(26px, env(safe-area-inset-top)) 18px max(26px, env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(18px);background:#fffffff5;border:0;border-right:1px solid #e1e6f0f2;border-radius:0;margin:0;position:fixed;inset:0 auto 0 0;transform:none;box-shadow:10px 0 35px #111f3f14}#nav-bar-nav-links.nav-links{flex-direction:column;justify-content:center;align-items:stretch;gap:10px;width:100%;height:100%;display:flex}#nav-bar-nav-links.nav-links a{letter-spacing:.65px;text-align:left;border-radius:15px;flex:none;justify-content:flex-start;align-items:center;width:100%;min-width:0;min-height:52px;padding:15px 17px;font-size:.73rem;display:flex}#nav-bar-nav-links.nav-links a:hover{transform:translate(4px)}}
