/* Open Sports Alliance public site. Brand kit 4 Nov 2026. Dark only, green as signal. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url('../fonts/Archivo.woff2') format('woff2')}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/SplineSansMono.woff2') format('woff2')}
:root{
  --bg:#0A0B0C;--card:#141618;--card-2:#1C1F21;--line:#26292B;
  --ink:#F4F4F1;--ink-2:#C7CBC6;--muted:#8D948F;
  --sig:#2C8A67;--sig-text:#5CC09A;
  --font:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,'SF Mono',monospace;
  --wrap:1180px;--gutter:24px;
  --glide:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg);overflow-x:hidden;overflow-x:clip}
/* smooth scroll (Lenis) owns the glide when it runs; native smooth scrolling would fight it */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sig);outline-offset:3px;border-radius:8px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 16px}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.025em;line-height:1.02}
h1{font-size:clamp(44px,7.4vw,96px);font-stretch:90%}
h2{font-size:clamp(30px,4.2vw,52px);font-stretch:92%;max-width:18ch}
h3{font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
p{margin:0}
.sub{color:var(--ink-2);max-width:56ch;margin-top:16px}
.mute{color:var(--muted)}
section{position:relative;padding:112px 0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--ink);font-weight:600;font-size:15px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,transform .2s}
.btn:hover{background:var(--card);border-color:#33373A}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.primary:hover{background:#fff;border-color:#fff}
.btn:active{transform:translateY(1px)}

/* scroll rail */
.rail{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;pointer-events:none}
.rail i{display:block;height:100%;width:100%;background:var(--sig);transform-origin:0 50%;transform:scaleX(var(--sp,0));will-change:transform}

/* nav: the bar never changes height (that would re-lay out the page each frame); it fades in and the logo eases down */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;perspective:600px}
.nav>.wrap{display:flex;align-items:center;gap:24px;height:68px}
.nav::before{content:"";position:absolute;inset:0;background:var(--bg);border-bottom:1px solid var(--line);opacity:0;transition:opacity .4s var(--glide)}
.nav.solid::before{opacity:1}
.logo{position:relative;display:flex;align-items:center;gap:14px;padding:8px 0;flex:none}
/* the name sits beside the mark, with clear space wider than the logo's dot */
/* set like the lockup: wide capitals, open tracking, silver (Archivo's own expanded width, so still the brand font) */
.logo-name{font-size:12.5px;font-weight:500;font-stretch:125%;text-transform:uppercase;letter-spacing:.24em;color:var(--ink-2);white-space:nowrap;padding-left:14px;border-left:1px solid var(--line);line-height:20px}
/* phones: the bar must fit the narrowest screen (logo + name + menu), or the browser widens and zooms the whole page */
@media (max-width:860px){
  .nav>.wrap{gap:12px}
  .logo{flex:0 1 auto;min-width:0;gap:10px}
  .nav .logo img{height:24px}
  .logo-name{font-size:clamp(7.5px,2.3vw,11px);letter-spacing:.14em;padding-left:10px;overflow:hidden;text-overflow:clip}
  .cta{flex:none}
}
.logo img{height:30px;width:auto;transform-origin:0 50%;transition:transform .5s var(--glide)}
.nav.solid .logo img{transform:scale(.9)}
.nav nav{position:relative;margin-left:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.nav ul a{display:flex;align-items:center;min-height:48px;padding:0 14px;font-size:15px;font-weight:500;color:var(--ink-2);perspective:300px}
.nav ul a span{position:relative;display:block;transform-style:preserve-3d;transform-origin:50% 0;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.nav ul a span::after{content:attr(data-t);position:absolute;left:0;top:100%;color:var(--ink);transform-origin:50% 0;transform:rotateX(-90deg)}
.nav ul a:hover span,.nav ul a:focus-visible span{transform:translate3d(0,0,-12px) rotateX(90deg)}
.nav ul a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--sig)}
.cta{position:relative;display:flex;gap:8px;align-items:center}
.menu{display:none;width:48px;height:48px;border-radius:12px;border:1px solid var(--line);background:var(--card);cursor:pointer;align-items:center;justify-content:center}

/* hero */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:120px 0 96px;overflow:hidden}
.stage{position:absolute;inset:0;z-index:0}
.stage canvas{display:block;width:100%;height:100%}
.court-fallback{position:absolute;right:-4%;top:18%;width:min(78vw,900px);opacity:.9}
.stage.gl .court-fallback{display:none}
.hero-copy{position:relative;z-index:1;width:100%;transform:translate3d(0,calc(var(--hp,0) * -80px),0);opacity:calc(1 - var(--hp,0) * 1.2);will-change:transform,opacity}
.hero h1{max-width:12ch}
.lede{color:var(--ink-2);font-size:clamp(17px,1.5vw,20px);max-width:46ch;margin-top:24px}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.launch-tag{display:inline-flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-2);margin-bottom:24px;min-height:32px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.launch-tag b{font-weight:500;color:var(--ink)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--sig);flex:none}
.scroll-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* 3D reveal */
.rv{opacity:0;transform:perspective(900px) translate3d(0,48px,-60px) rotateX(14deg);transform-origin:50% 100%;transition:opacity 1s var(--glide),transform 1.3s var(--glide)}
.rv.in{opacity:1;transform:none}

/* alliance row */
.row3d{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;perspective:1200px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;min-height:200px;display:flex;flex-direction:column;gap:12px;transition:opacity 1s var(--glide),transform 1.3s var(--glide),border-color .2s}
.tile.settled{transition:border-color .2s}
.tile .k{font-size:12px;color:var(--muted)}
.tile h3{margin-top:auto}
.tile p{color:var(--ink-2);font-size:15px}
.tile:nth-child(1){transition-delay:0s}.tile:nth-child(2){transition-delay:.06s}.tile:nth-child(3){transition-delay:.12s}.tile:nth-child(4){transition-delay:.18s}.tile:nth-child(5){transition-delay:.24s}
.tile.rv{transform:perspective(900px) rotateY(-28deg) translate3d(40px,30px,-80px)}
.tile.rv.in{transform:perspective(900px) rotateY(calc(var(--tx,0) * 6deg)) rotateX(calc(var(--ty,0) * -4deg))}
.tile:hover{border-color:#3A3E40}
.alliance h2{position:relative;padding-bottom:24px}
.alliance h2::after{content:"";position:absolute;left:0;bottom:0;width:48px;height:2px;background:var(--sig)}

/* report deck */
.deck{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;perspective:1400px;perspective-origin:50% 30%}
.rcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:16px;transform-style:preserve-3d;
  --i:0;--f:var(--deckp,1);
  transform:translate3d(calc((1 - var(--f)) * (1.5 - var(--i)) * 100%),calc((1 - var(--f)) * 40px),calc((1 - var(--f)) * var(--i) * -60px)) rotateY(calc((1 - var(--f)) * -24deg)) rotateX(calc((1 - var(--f)) * 10deg));
  transition:border-color .2s,background .2s;will-change:transform}
.rcard:nth-child(1){--i:0}.rcard:nth-child(2){--i:1}.rcard:nth-child(3){--i:2}.rcard:nth-child(4){--i:3}
.rcard:hover,.rcard:focus-visible{background:var(--card-2);border-color:#3A3E40}
.rcard .cat{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.rcard h3{font-size:19px;min-height:2.4em}
.chart{width:100%;height:auto;display:block;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px}
.chart .ax path,.chart .ax rect{stroke:#3A3E40;stroke-width:1;fill:none}
.chart .ax .net{stroke:var(--muted)}
.chart .lbl text{font-family:var(--mono);font-size:10px;fill:var(--muted)}
.chart .lbl.l text{fill:var(--ink-2);font-family:var(--font);font-size:11px}
.chart .band{fill:var(--card-2);stroke:#3A3E40}
.chart .sig{stroke:var(--sig);stroke-width:1.5;fill:none}
.chart .bar{fill:#3A3E40}
.chart .sigfill{fill:var(--sig)}
.chart .stems path{stroke:#3A3E40;stroke-width:1}
.chart .pts circle{fill:var(--ink-2)}
.chart .pts .sigdot{fill:var(--sig)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:12px;padding:4px 8px;border-radius:8px;background:var(--card-2);border:1px solid var(--line);color:var(--ink-2)}
.next{font-size:14px;color:var(--ink-2);margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.next b{display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.hint{margin-top:24px;font-size:13px}

/* open / developers */
.open-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.tenets{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.tenets li{padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.file{margin:0;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;transform:perspective(1100px) rotateY(calc(-14deg + var(--tx,0) * 8deg)) rotateX(calc(6deg + var(--ty,0) * -6deg));transition:transform .25s ease-out}
.file.rv{opacity:0}
.file.rv.in{opacity:1;transform:perspective(1100px) rotateY(calc(-14deg + var(--tx,0) * 8deg)) rotateX(calc(6deg + var(--ty,0) * -6deg))}
.file figcaption{font-size:12px;color:var(--muted);padding:12px 16px;border-bottom:1px solid var(--line);background:var(--card-2)}
.file pre{margin:0;padding:20px 16px;font-size:13px;line-height:1.65;color:var(--ink-2);overflow-x:auto}
.file k{color:var(--ink)} .file s{text-decoration:none;color:var(--muted)} .file g{color:var(--sig-text)}

/* join */
.join-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start}
.form{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:32px;display:grid;gap:16px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:8px}
.field label{font-size:13px;color:var(--muted);font-weight:500}
.field input,.field select{min-height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);width:100%;font-size:16px;appearance:none;-webkit-appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238D948F' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.field input:focus,.field select:focus{outline:2px solid var(--sig);outline-offset:1px}
.actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:8px}
.fine{font-size:13px}
.ok{display:none;color:var(--ink-2)}
.ok b{color:var(--sig-text);font-weight:500}
.form.sent .row,.form.sent>.field,.form.sent .actions{display:none}
.form.sent .ok{display:block}

/* launch */
.launch{text-align:center;padding:128px 0;border-top:1px solid var(--line);overflow:hidden}
.launch .eyebrow{margin-bottom:24px}
.date{font-family:var(--font);font-size:clamp(44px,9vw,120px);font-weight:800;letter-spacing:-.04em;line-height:1;display:inline-block;transform:perspective(900px) rotateX(calc(var(--lp,0) * 40deg)) translateZ(calc(var(--lp,0) * -120px));transform-origin:50% 100%;will-change:transform}
.date i{font-style:normal;color:var(--kimera-text)}
.launch .sub{margin:24px auto 0}

/* contact */
.contact{border-top:1px solid var(--line);background:var(--bg)}
.contact-grid{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center}
.reach{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--line);max-width:520px}
.reach li{display:flex;align-items:center;gap:24px;min-height:56px;border-bottom:1px solid var(--line)}
.reach .k{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);width:96px;flex:none}
.reach a{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.reach a:hover{box-shadow:inset 0 -2px 0 var(--sig)}
.qr{display:grid;justify-items:center;gap:12px;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:16px;transition:border-color .2s}
.qr:hover{border-color:#3A3E40}
.qr img{width:168px;height:168px}
.qr span{font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.ask{margin-top:32px;display:grid;gap:12px;max-width:520px}
.ask-row{display:flex;gap:12px}
.ask input,.ask textarea{min-height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);width:100%;font:inherit;font-size:16px;color:inherit}
.ask textarea{padding:12px 14px;min-height:72px;resize:vertical}
.ask input::placeholder,.ask textarea::placeholder{color:var(--muted)}
.ask input:focus,.ask textarea:focus{outline:2px solid var(--sig);outline-offset:1px}
.ask .btn{flex:none}
.ask.sent .ask-row,.ask.sent textarea,.ask.sent .cf-turnstile{display:none}
.ask.sent .ok{display:block}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:480px){.ask-row{flex-direction:column}}
.privacy{padding:48px 0;border-top:1px solid var(--line);background:var(--bg)}
.privacy .sub{font-size:14px;max-width:80ch;margin-top:0}
.field textarea{min-height:96px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);width:100%;font:inherit;font-size:16px;color:inherit;resize:vertical}
.field textarea:focus{outline:2px solid var(--sig);outline-offset:1px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.fine a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.form.sent .cf-turnstile{display:none}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;gap:32px}.qr{justify-self:start}}

/* footer */
.footer{border-top:1px solid var(--line);padding:48px 0}
.footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer img{height:56px;width:auto;margin:12px}
.footer p{font-size:13px}

/* responsive */
@media (max-width:1080px){
  .row3d{grid-template-columns:repeat(3,1fr)}
  .deck{grid-template-columns:repeat(2,1fr)}
  .rcard{transform:translate3d(0,calc((1 - var(--f)) * (40px + var(--i) * 30px)),calc((1 - var(--f)) * -80px)) rotateX(calc((1 - var(--f)) * 18deg))}
}
@media (max-width:860px){
  :root{--gutter:16px}
  section{padding:80px 0}
  .nav nav{position:absolute;top:100%;left:0;right:0;margin:0;background:var(--bg);border-bottom:1px solid var(--line);transform-origin:50% 0;transform:perspective(600px) rotateX(-80deg);opacity:0;visibility:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s,visibility 0s .35s}
  .nav.open nav{transform:none;opacity:1;visibility:visible;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s}
  .nav.open::before{opacity:1}
  .nav ul{flex-direction:column;padding:8px 16px 16px}
  .nav ul a{font-size:17px;padding:0 4px;border-bottom:1px solid var(--line)}
  .menu{display:inline-flex}
  .cta{margin-left:auto}
  .cta .btn{display:none}
  .open-grid,.join-grid{grid-template-columns:1fr;gap:40px}
  .form .row{grid-template-columns:1fr}
  .form{padding:20px}
  .court-fallback{right:-30%;top:12%;width:150vw}
  .hero{align-items:flex-end}
}
@media (max-width:640px){
  .row3d{grid-template-columns:1fr 1fr}
  .row3d .tile:last-child{grid-column:1 / -1}
  .tile{min-height:160px;padding:16px}
  .deck{grid-template-columns:1fr}
  .file pre{font-size:11.5px}
  .file{transform:perspective(1100px) rotateX(8deg)}
  .file.rv.in{transform:perspective(1100px) rotateX(calc(6deg + var(--ty,0) * -4deg))}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .rv,.tile.rv,.tile.rv.in,.file,.file.rv.in,.rcard,.date,.hero-copy{opacity:1!important;transform:none!important}
  .rail{display:none}
}

/* WebGL scene sits fixed behind the page; content stacks above it */
.scene{position:fixed;inset:0;z-index:0;pointer-events:none;will-change:opacity;contain:strict}
.scene canvas{display:block;width:100%!important;height:100%!important}
main,.footer{position:relative;z-index:1}
.footer,.launch{background:var(--bg)}
.hero-copy h1,.hero-copy .lede{text-shadow:0 0 24px #0A0B0C}