:root{
  --bg:#F6F8FB; --surface:#FFFFFF; --ink:#0E1B33; --muted:#4A5670; --line:#DCE3EF;
  --accent:#0B2A5B; --on-accent:#FFFFFF;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A1226; --surface:#111C38; --ink:#E8EDF8; --muted:#9FADCB; --line:#223056;
    --accent:#7C93FF; --on-accent:#0A1226; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A1226; --surface:#111C38; --ink:#E8EDF8; --muted:#9FADCB; --line:#223056;
  --accent:#7C93FF; --on-accent:#0A1226; color-scheme:dark;
}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 64px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1.0625rem;line-height:1.65}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:10}
h1,h2,h3{font-family:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;line-height:1.1;margin:0;letter-spacing:-0.02em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:14px;height:64px}
.brand{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;text-decoration:none;font-size:1.15rem;letter-spacing:-0.01em}
.menu-btn{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 11px;background:var(--surface);border:1px solid var(--line);border-radius:10px;cursor:pointer}
.menu-btn span{display:block;height:2px;background:var(--ink);border-radius:2px}
.drawer{position:fixed;top:calc(env(safe-area-inset-top,0px) + 64px);left:0;bottom:0;width:min(300px,84vw);background:var(--surface);border-right:1px solid var(--line);transform:translateX(-100%);visibility:hidden;transition:transform .25s ease,visibility 0s .25s;z-index:30;overflow-y:auto}
.drawer.open{transform:none;visibility:visible;transition:transform .25s ease}
.drawer a{display:block;padding:18px 24px;text-decoration:none;color:var(--ink);font-weight:600;font-size:1.05rem;border-bottom:1px solid var(--line)}
.drawer a:hover{background:var(--bg)}
.drawer a[aria-current="page"]{background:var(--accent);color:var(--on-accent)}
.scrim{position:fixed;inset:calc(env(safe-area-inset-top,0px) + 64px) 0 0 0;background:rgba(5,10,28,.45);z-index:25}
.scrim[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.drawer,.drawer.open{transition:none}}





.lede{margin:14px 0 0;max-width:54ch;color:var(--muted);font-size:1.2rem}
.events h3 a{text-decoration:none}
.events h3 a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.btn.solid{background:var(--accent);color:var(--on-accent)}
.btn.solid:hover{filter:brightness(1.1)}
.page-cta{margin-top:28px}
.events ul.projects{border-top:0;display:grid;gap:20px}
.events li.proj{display:block;padding:0;border:0}
.proj details{border-radius:16px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.proj summary{list-style:none;cursor:pointer;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;min-height:220px;padding:24px;color:#fff;background-image:linear-gradient(180deg,rgba(5,10,28,.1),rgba(5,10,28,.78)),var(--img);background-size:cover;background-position:center}
.proj summary::-webkit-details-marker{display:none}
.proj summary h3{color:#fff;font-size:1.6rem;margin:0 0 4px}
.proj summary p{color:rgba(255,255,255,.88);max-width:46ch}
.proj .chev{flex:none;width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.8);display:grid;place-items:center;transition:transform .25s}
.proj details[open] .chev{transform:rotate(180deg)}
.proj .panel{padding:24px}
.proj .panel h4{font-family:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;font-size:1rem;margin:0 0 8px;color:var(--muted)}
.proj .now p{padding:12px 0;border-top:1px solid var(--line);color:var(--ink)}
.sponsors{padding-bottom:72px}
.sponsors .lede{margin-bottom:36px}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;width:max-content;gap:20px;animation:scroll 40s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.sponsor{flex:none;display:flex;align-items:center;justify-content:center;width:200px;height:96px;padding:16px 24px;background:#fff;border:1px solid var(--line);border-radius:12px}
.sponsor img{max-width:100%;max-height:100%;object-fit:contain}
@keyframes scroll{to{transform:translateX(calc(-50% - 10px))}}
@media (prefers-reduced-motion:reduce){.track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}.marquee{-webkit-mask-image:none;mask-image:none}.track [aria-hidden="true"]{display:none}}

.hero{position:relative;min-height:min(78vh,680px);display:flex;align-items:flex-end;color:#fff;
  background-image:linear-gradient(180deg,rgba(5,10,28,.15) 0%,rgba(5,10,28,.7) 100%),var(--banner-image);
  background-size:cover;background-position:center}
.hero .wrap{padding-top:96px;padding-bottom:72px}
.hero h1{font-size:clamp(2.6rem,7.5vw,5.4rem);font-weight:700;max-width:12ch}
.hero p{max-width:46ch;font-size:1.2rem;margin:20px 0 32px;color:rgba(255,255,255,.88)}
.btns{display:flex;gap:14px;flex-wrap:wrap}
.brand img{display:block;height:28px;width:auto}
:root[data-theme="dark"] .brand img{filter:brightness(0) invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand img{filter:brightness(0) invert(1)}}
.banner{padding-bottom:90px;background:linear-gradient(180deg,#01244c 0,#01244c calc(100% - 130px),var(--bg) 100%)}
.banner img{display:block;margin:0 auto;width:auto;height:auto;max-width:min(100%,1100px);max-height:76vh;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(to bottom,#000 0,#000 90%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(to bottom,#000 0,#000 90%,transparent 100%);mask-composite:intersect}
.intro{padding:0 0 8px}
.intro h1{font-size:clamp(1.9rem,4.6vw,3.1rem);max-width:22ch}
.intro .btns{margin-top:28px}
.btn.outline{border-color:var(--ink);color:var(--ink)}
.btn.outline:hover{background:var(--line)}

.btn{display:inline-block;padding:13px 26px;border-radius:999px;font-weight:600;text-decoration:none;border:2px solid transparent}
.btn.primary{background:#fff;color:#0E1B33}
.btn.ghost{border-color:rgba(255,255,255,.7);color:#fff}
.btn.primary:hover{background:#e7ecff}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
@media (prefers-reduced-motion:no-preference){
  .hero .wrap{animation:rise .9s ease-out both}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}

section{padding:88px 0}
.about{display:grid;grid-template-columns:1fr 1.4fr;gap:48px}
.about h2,.heading{font-size:clamp(1.9rem,4vw,2.7rem)}
.about p{margin:0;font-size:1.2rem;max-width:60ch;color:var(--muted)}
@media (max-width:760px){.about{grid-template-columns:1fr;gap:20px}section{padding:64px 0}}

.do{background:var(--surface);border-block:1px solid var(--line)}
.do .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:44px}
.do h3{font-size:1.35rem;padding-top:18px;border-top:3px solid var(--accent);margin-bottom:10px}
.do p{margin:0;color:var(--muted)}
@media (max-width:760px){.do .cols{grid-template-columns:1fr;gap:32px}}

.events ul{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--line)}
.events li{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}
.events .when{font-weight:600;color:var(--accent)}
.events h3{font-size:1.25rem;margin-bottom:4px}
.events p{margin:0;color:var(--muted)}
@media (max-width:640px){.events li{grid-template-columns:1fr;gap:6px}}

.cta{background:var(--accent);color:var(--on-accent);text-align:left}
.cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.cta h2{font-size:clamp(1.9rem,4vw,2.7rem);max-width:16ch}
.cta p{margin:12px 0 0;max-width:44ch;opacity:.9}
.cta .btn{background:var(--on-accent);color:var(--accent)}

footer{padding:36px 0;color:var(--muted);font-size:.95rem}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* Responsive refinements: phones, tablets, laptops, large screens */
html{-webkit-text-size-adjust:100%}
body{font-size:clamp(1rem,.96rem + .2vw,1.125rem)}
h1,h2,h3{text-wrap:balance}
.lede,.about p{text-wrap:pretty}
.wrap{max-width:1200px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
section{padding:clamp(56px,8vw,96px) 0}
.btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;text-align:center}
.banner img{max-height:76vh;max-height:76svh}
@media (hover:none){.marquee:hover .track{animation-play-state:running}}
@media (max-width:640px){
  .wrap{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
  .btns{flex-direction:column;align-items:stretch}
  .btns .btn,.cta .btn,.page-cta .btn{width:100%}
  .proj summary{min-height:190px;padding:20px}
  .proj summary h3{font-size:1.4rem}
  .proj .panel{padding:20px}
  .sponsor{width:150px;height:76px;padding:12px 16px}
}
@media (min-width:1024px){
  .brand img{height:34px}
  .events li{grid-template-columns:260px 1fr}
}
@media (min-width:900px){
  .events ul.projects{grid-template-columns:repeat(3,1fr);align-items:start}
  .proj summary{min-height:300px}
}
@media (min-width:1600px){
  html{font-size:112.5%}
  .wrap{max-width:1280px}
}

/* Desktop: page links across the top instead of the slide-out menu */
@media (min-width:1100px){
  .menu-btn,.scrim{display:none!important}
  .drawer{position:static;display:flex;align-items:center;gap:4px;width:auto;margin-left:auto;background:transparent;border:0;overflow:visible;z-index:auto;transform:none;visibility:visible;transition:none}
  .drawer a{padding:8px 12px;border-bottom:0;border-radius:999px;font-size:.95rem;color:var(--muted)}
  .drawer a:hover{background:var(--surface);color:var(--ink)}
  .drawer a[aria-current="page"]{background:transparent;color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:8px}
  .drawer a[data-view="how-to-join"],.drawer a[data-view="how-to-join"]:hover,.drawer a[data-view="how-to-join"][aria-current="page"]{background:var(--accent);color:var(--on-accent);text-decoration:none;margin-left:8px;padding:8px 18px}
}

/* Hero: on desktop the text sits beside the banner; wider layout on very large screens */
.intro-in{max-width:1200px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
@media (max-width:640px){.intro-in{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}}
@media (min-width:1000px){
  .hero2{background:linear-gradient(180deg,#01244c 0,#01244c calc(100% - 130px),var(--bg) 100%);padding-bottom:90px}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:center;gap:32px;max-width:1200px;margin:0 auto;padding:0 max(24px,env(safe-area-inset-left,0px))}
  .hero2 .banner{order:2;background:none;padding:0}
  .hero2 .banner img{max-width:100%;max-height:70vh;max-height:70svh}
  .hero2 .intro{order:1;padding:0;color:#fff}
  .hero2 .intro-in{padding:0;max-width:none}
  .hero2 .intro h1{color:#fff;max-width:none;font-size:clamp(2rem,3.3vw,3.4rem)}
  .hero2 .btn.solid{background:#fff;color:#0B2A5B}
  .hero2 .btn.outline{border-color:rgba(255,255,255,.7);color:#fff}
  .hero2 .btn.outline:hover{background:rgba(255,255,255,.12)}
}
@media (min-width:1600px){.wrap,.hero-grid{max-width:1360px}}
@media (min-width:2000px){html{font-size:125%}.wrap,.hero-grid{max-width:1700px}}
.banner picture{display:block}
.prose{margin-top:28px}
.prose p{margin:0 0 18px;max-width:62ch;font-size:1.2rem;color:var(--muted)}
@media (min-width:1100px) and (max-width:1250px){.drawer a{padding:8px 9px;font-size:.92rem}}