@import url("/fonts/site-fonts.css?v=32c9817c");

:root{
  --void:#04060C;
  --deep:#080D18;
  --panel:#0C1322;
  --line:rgba(234,238,247,.12);
  --line-2:rgba(234,238,247,.26);
  --txt:#EAEEF7;
  --dim:#8A97B0;
  --volt:#2E7BFF;
  --volt-soft:rgba(46,123,255,.16);
  --gold:#FEAE09;

  --display:"Archivo",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --wrap:1320px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--void);color:var(--txt);
  font-family:var(--display);font-weight:400;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,canvas,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.1rem}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:.94;letter-spacing:-.035em;text-wrap:balance}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
::selection{background:var(--volt);color:#fff}

.wrap{width:min(var(--wrap),calc(100% - 3rem));margin-inline:auto}
.mono{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.volt{color:var(--volt)}
.gold{color:var(--gold)}

/* smooth-scroll shell */
#scroll-root{will-change:transform}

/* ---------------- nav ---------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;gap:2rem;height:74px;
  padding-inline:clamp(1.2rem,3vw,2.4rem);
  background:linear-gradient(to bottom,rgba(4,6,12,.92),rgba(4,6,12,0));
  transition:background .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{background:rgba(4,6,12,.9);backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.2rem;letter-spacing:-.03em}
.brand svg{width:26px;height:26px}
.brand i{font-style:normal;color:var(--volt)}
.nav-links{display:flex;gap:1.7rem;margin-left:auto}
.nav-links a{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  position:relative;padding-block:.4rem;transition:color .25s
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--volt);
  transition:right .4s var(--ease)
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--txt)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0}
.nav-cta{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--volt);color:#fff;padding:.62rem 1.15rem;border-radius:2px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(46,123,255,.4)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line-2);color:var(--txt);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:.45rem .8rem}

/* ---------------- hero ---------------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
#bh{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero.no-gl #bh{
  background:
    radial-gradient(58% 44% at 50% 46%, rgba(254,174,9,.30), transparent 62%),
    radial-gradient(30% 24% at 50% 46%, rgba(255,120,20,.55), transparent 70%),
    radial-gradient(11% 9%  at 50% 46%, #000 62%, transparent 66%),
    radial-gradient(120% 100% at 50% 50%, #0A1024, #04060C 70%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,var(--void) 2%,rgba(4,6,12,.55) 26%,transparent 58%);
}
.hero-in{position:relative;z-index:2;width:100%;padding-bottom:clamp(3rem,7vh,6rem)}
.hero h1{font-size:clamp(3.2rem,10.5vw,11rem);letter-spacing:-.05em}
.hero h1 span{display:block}
.hero-sub{
  max-width:52ch;color:var(--dim);font-size:clamp(1rem,1.35vw,1.16rem);margin:1.8rem 0 2.2rem
}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.scroll-cue{
  position:absolute;bottom:1.6rem;right:clamp(1.2rem,3vw,2.4rem);z-index:2;
  display:flex;align-items:center;gap:.7rem
}
.scroll-cue i{display:block;width:1px;height:44px;background:linear-gradient(var(--volt),transparent);
  animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.15);transform-origin:top;opacity:0}
  40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);transform-origin:bottom;opacity:0}}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding:1rem 1.7rem;border:1px solid var(--line-2);border-radius:2px;
  transition:.35s var(--ease);position:relative;overflow:hidden
}
.btn span{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;background:var(--volt);
  transform:translateY(101%);transition:transform .45s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn:hover{border-color:var(--volt);color:#fff}
.btn-fill{background:var(--volt);border-color:var(--volt);color:#fff}
.btn-fill::before{background:#fff}
.btn-fill:hover{color:var(--void)}

/* ---------------- sections ---------------- */
.sec{padding:clamp(5rem,11vh,9rem) 0;position:relative}
.sec-label{display:flex;align-items:center;gap:.9rem;margin-bottom:2.2rem}
.sec-label::after{content:"";flex:1;height:1px;background:var(--line)}
.big{font-size:clamp(2.4rem,6.4vw,5.4rem)}
.mid{font-size:clamp(1.9rem,4vw,3.2rem)}
.lede{color:var(--dim);font-size:clamp(1rem,1.3vw,1.14rem);max-width:60ch}

/* split layout */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* ---------------- image panels with parallax ---------------- */
.plate{position:relative;overflow:hidden;border-radius:3px;background:var(--panel)}
.plate img{width:100%;height:100%;object-fit:cover;will-change:transform;transform:scale(1.18)}
.plate.tall{aspect-ratio:4/5}
.plate.wide{aspect-ratio:16/9}
.plate figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1rem 1.2rem;
  background:linear-gradient(to top,rgba(4,6,12,.94),transparent);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--dim);text-transform:uppercase
}
.full-plate{position:relative;height:min(86svh,760px);overflow:hidden}
.full-plate img{width:100%;height:120%;object-fit:cover;will-change:transform}
.full-plate .overlay{
  position:absolute;inset:0;display:flex;align-items:center;
  background:linear-gradient(to right,rgba(4,6,12,.92) 8%,rgba(4,6,12,.45) 55%,transparent)
}
.full-plate h2{max-width:15ch}
.full-plate p{max-width:44ch;color:var(--dim);margin-top:1.2rem}

/* ---------------- lesson list ---------------- */
.lessons{border-top:1px solid var(--line)}
.lesson{
  display:grid;grid-template-columns:5rem 1fr auto;gap:1.6rem;align-items:baseline;
  padding:1.5rem 0;border-bottom:1px solid var(--line);
  transition:padding .4s var(--ease),background .4s var(--ease)
}
.lesson:hover{padding-inline:1.2rem;background:linear-gradient(90deg,var(--volt-soft),transparent)}
.lesson .k{font-family:var(--mono);font-size:.8rem;color:var(--volt)}
.lesson h3{font-size:clamp(1.15rem,2vw,1.6rem);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.lesson p{margin:.45rem 0 0;color:var(--dim);font-size:.92rem;max-width:66ch}
.lesson .wk{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;color:var(--dim);text-transform:uppercase;white-space:nowrap}
@media (max-width:700px){.lesson{grid-template-columns:3rem 1fr}.lesson .wk{display:none}}

/* ---------------- team ---------------- */
.crew{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line)}
.crew article{background:var(--void);padding:2rem 1.7rem 2.2rem;transition:background .4s var(--ease)}
.crew article:hover{background:var(--panel)}
.crew .mono{margin-bottom:1.4rem}
.crew h3{font-size:1.42rem;font-weight:600;letter-spacing:-.025em;margin-bottom:.35rem}
.crew .role{font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--volt);margin-bottom:.9rem}
.crew p{color:var(--dim);font-size:.9rem;margin:0}

/* ---------------- faq ---------------- */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.4rem 3rem 1.4rem 0;position:relative;
  font-size:clamp(1.05rem,1.9vw,1.4rem);font-weight:600;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.4rem;top:50%;width:13px;height:13px;
  border-right:1px solid var(--volt);border-bottom:1px solid var(--volt);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{color:var(--dim);max-width:70ch;margin:0 0 1.4rem;font-size:.98rem}

/* ---------------- fact burst ---------------- */
.fact{
  position:fixed;z-index:180;max-width:330px;pointer-events:none;
  border-left:2px solid var(--gold);padding:.85rem 1rem;
  background:rgba(8,13,24,.93);backdrop-filter:blur(10px);
  opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)
}
.fact.on{opacity:1;transform:translateY(0)}
.fact .mono{margin-bottom:.4rem;color:var(--gold)}
.fact p{margin:0;font-size:.88rem;line-height:1.48}
.fact p b{font-weight:600;color:var(--gold)}

/* ---------------- footer ---------------- */
footer{border-top:1px solid var(--line);padding:4rem 0 2.4rem;background:var(--deep)}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:2.6rem}
footer h4{font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin:0 0 1rem;font-weight:400}
footer a{display:block;color:var(--dim);margin-bottom:.5rem;font-size:.92rem;transition:color .25s}
footer a:hover{color:var(--txt)}
.foot-bar{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;margin-top:3rem;
  padding-top:1.4rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
@media (max-width:860px){.foot{grid-template-columns:1fr 1fr}}

/* ---------------- reveal ---------------- */
.js .rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv-l{opacity:0;transform:translateX(-28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv-l.in{opacity:1;transform:none}

/* mask-reveal for big headings */
.js .mask{display:block;overflow:hidden}
.js .mask > *{display:block;transform:translateY(105%);transition:transform 1.05s var(--ease)}
.js .mask.in > *{transform:none}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .nav-links{display:none}
  .nav-links.open{
    display:flex;flex-direction:column;gap:0;position:fixed;inset:74px 0 auto 0;
    background:rgba(4,6,12,.98);border-bottom:1px solid var(--line);padding:.6rem 1.4rem 1.4rem
  }
  .nav-links.open a{padding:.9rem 0;border-bottom:1px solid var(--line);font-size:.78rem}
  .burger{display:block}
  .nav-cta{margin-left:.7rem}
  .fact{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js .rv,.js .rv-l{opacity:1;transform:none}
  .js .mask > *{transform:none}
  .plate img{transform:none}
}

/* ---------------- supporters band ---------------- */
.supporters{background:#F4EFE6;color:#0B1F3A;padding:2.6rem 0}
.supporters .mono{color:#5A6880;margin-bottom:1.4rem}
.sup-row{display:flex;align-items:center;gap:clamp(1.4rem,4vw,3.4rem);flex-wrap:wrap}
.sup-row img{height:76px;width:auto}
.sup-iau img{height:52px}
.sup-text{display:flex;flex-direction:column;gap:.2rem;max-width:38ch}
.sup-text strong{font-weight:600;font-size:1.02rem;letter-spacing:-.01em}
.sup-text span{color:#5A6880;font-size:.9rem}
@media (max-width:700px){.sup-row img{height:58px}.sup-iau img{height:42px}}

/* first section on interior pages clears the fixed nav */
.sec-top{padding-top:clamp(8rem,16vh,12rem)}

.foot-blurb{color:var(--dim);font-size:.92rem;max-width:34ch;margin:1rem 0 0}

/* mentors */
.sec-tight{padding-block:clamp(3.4rem,7vh,5.4rem)}
.crew-mentor{grid-template-columns:minmax(0,1fr)}
.crew-mentor article{max-width:62ch}
.crew h3 .post{
  display:inline-block;font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold);vertical-align:middle;margin-left:.5rem;font-weight:400
}