/* vas.sh preview v3 · base: tokens, type, nav, hero, ticker, talks */
:root{
  /* light only. graphite does the work, lime is the highlighter */
  --porcelain:#F5F5F2;--white:#FFFFFF;--mist:#ECECE6;--rule:#DEDED6;--rule-2:#C9C9C0;
  --ink:#151613;--ink-2:#2B2C28;--slate:#62645D;--slate-2:#8B8D85;
  --lime:#C4F23A;--lime-hi:#D9FF5C;--lime-deep:#93C30C;--lime-wash:#F1FAD6;
  --f-sans:"Mona Sans",-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --f-hand:"Caveat","Bradley Hand","Segoe Print",cursive;
  --ease:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--porcelain);color:var(--ink);font:400 1.0625rem/1.65 var(--f-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-underline-offset:3px;text-decoration-color:var(--lime-deep)}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.wrap{max-width:78rem;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.pad{padding-block:clamp(5rem,10vw,8.5rem)}
.bg-mist{background:var(--mist)}

h1,h2,h3,h4{margin:0;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(2.9rem,6.5vw,6.1rem);line-height:.95;font-weight:780;font-stretch:112%;letter-spacing:-.045em}
h2{font-size:clamp(2.2rem,4.9vw,4.1rem);line-height:.98;font-weight:760;font-stretch:114%;letter-spacing:-.035em}
h3{font-size:1.28rem;line-height:1.2;font-weight:650;font-stretch:106%;letter-spacing:-.015em}
p{margin:0 0 1rem;max-width:62ch}
.lede{font-size:clamp(1.15rem,1.55vw,1.36rem);line-height:1.5;color:var(--slate);max-width:44ch}
.eyebrow{display:flex;align-items:center;gap:.6rem;font:500 .72rem/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin:0 0 1.2rem}
.eyebrow::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1.5px var(--ink)}
.muted{color:var(--slate)}
.hand{font-family:var(--f-hand);font-weight:600;font-size:1.5rem;line-height:1.1;color:var(--ink-2)}

/* lime highlighter that sweeps in behind a phrase */
.hl{background:linear-gradient(transparent 58%,var(--lime) 58% 93%,transparent 93%) no-repeat 0 0/100% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.js .hl{background-size:0% 100%;transition:background-size 1.4s var(--ease) var(--hd,.9s)}
.js .on .hl,.js .hl.on{background-size:100% 100%}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.3rem;border-radius:999px;font:600 .95rem/1 var(--f-sans);text-decoration:none;border:1px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;overflow:hidden;transition:transform .45s var(--ease),background .3s,color .3s,border-color .3s}
.btn:hover{background:var(--ink);color:#fff}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.btn.lime{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.btn.lime:hover{background:var(--ink);border-color:var(--ink);color:var(--lime)}
.btn.sm{padding:.62rem 1rem;font-size:.84rem}
.btn.primary::after,.btn.lime::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-130%);animation:shine 5s var(--ease) infinite;pointer-events:none}
@keyframes shine{0%,62%{transform:translateX(-130%)}88%,100%{transform:translateX(130%)}}

/* pills */
.pill{display:inline-flex;align-items:center;gap:.4rem;flex:none;font:500 .6rem/1 var(--f-mono);letter-spacing:.11em;text-transform:uppercase;padding:.42rem .62rem;border-radius:999px;border:1px solid var(--rule-2);color:var(--slate);white-space:nowrap}
.pill.live{background:var(--ink);border-color:var(--ink);color:#fff}
.pill.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);animation:blink 1.6s infinite}
.pill.up{border-color:var(--ink);color:var(--ink)}
.pill.build{border-color:var(--ink);color:var(--ink)}
.pill.build::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid currentColor;border-top-color:transparent;animation:spin 1s linear infinite}
.pill.award{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.pill.paused{border-style:dashed}
.pill.retired{text-decoration:line-through}
@keyframes blink{50%{opacity:.25}}
@keyframes spin{to{transform:rotate(360deg)}}

/* liquid glass */
.glass{background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.58));-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 20px 44px -24px rgba(21,22,19,.28)}

/* reveal, word split, hand-drawn strokes */
.js [data-reveal]{transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);transition-delay:var(--d,0ms)}
.js [data-reveal].pre{opacity:0;transform:translateY(30px) scale(.985);filter:blur(8px)}
.w{display:inline-block;transition:transform 1.1s var(--ease),opacity 1.1s var(--ease),filter 1.1s var(--ease);transition-delay:calc(var(--i,0)*55ms + var(--d,0ms))}
.js .split.pre .w{transform:translateY(.55em) rotate(2deg);opacity:0;filter:blur(6px)}
.js .draw path{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);transition:stroke-dashoffset 1.5s var(--ease) var(--d,300ms)}
.js .draw.on path{stroke-dashoffset:0}
svg.draw path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* review tag: not part of the site */
.review-tag{position:fixed;z-index:70;left:12px;bottom:12px;font:500 .64rem/1 var(--f-mono);letter-spacing:.05em;padding:.55rem .75rem;border-radius:999px;border:1px dashed var(--slate-2);background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--slate);text-decoration:none}
.review-tag:hover{color:var(--ink);border-color:var(--ink)}

/* nav */
.nav{position:fixed;z-index:60;top:calc(env(safe-area-inset-top,0px) + 12px);left:50%;transform:translateX(-50%);width:min(calc(100% - 24px),58rem);display:flex;align-items:center;gap:1rem;padding:.42rem .42rem .42rem 1.15rem;border-radius:999px;font-size:.86rem;animation:navIn 1.1s var(--ease) both .2s}
@keyframes navIn{from{opacity:0;translate:0 -16px}}
.brand{display:flex;align-items:center;font-weight:760;font-stretch:115%;letter-spacing:-.03em;text-decoration:none;font-size:1.05rem;white-space:nowrap}
.dot{display:inline-block;width:.36em;height:.36em;border-radius:50%;background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--ink);margin:0 .08em;transform:translateY(.14em);animation:dotPulse 2.6s ease-out infinite}
@keyframes dotPulse{0%{box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 0 rgba(196,242,58,.9)}70%{box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 .5em rgba(196,242,58,0)}100%{box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 0 rgba(196,242,58,0)}}
.nav-links{display:flex;gap:.1rem;margin:0 auto}
.nav-links a{position:relative;text-decoration:none;padding:.45rem .78rem;border-radius:999px;color:var(--slate);transition:color .3s,background .3s}
.nav-links a:hover{color:var(--ink);background:rgba(21,22,19,.05)}
.nav-links a.on{color:var(--ink)}
.nav-links a.on::after{content:"";position:absolute;left:50%;bottom:2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1px var(--ink)}
@media (max-width:820px){.nav-links{display:none}.nav{justify-content:space-between}}

/* hero */
.hero{position:relative;padding-top:clamp(7.5rem,13vw,9.5rem);padding-bottom:clamp(2rem,4vw,3rem);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:clamp(1rem,3vw,3rem);align-items:center}
.hero .lede{margin-top:1.7rem}
.cta{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:2rem}
.next-live{display:inline-flex;align-items:center;gap:.65rem;margin-top:1.5rem;padding:.55rem .9rem .55rem .7rem;border-radius:999px;background:var(--white);border:1px solid var(--rule);font:500 .74rem/1.2 var(--f-mono);text-decoration:none;color:var(--slate);transition:border-color .3s,transform .45s var(--ease)}
.next-live:hover{border-color:var(--ink);transform:translateY(-2px)}
.next-live i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1.5px var(--ink);animation:blink 1.6s infinite}
.next-live span{color:var(--ink)}
.next-live b{font-weight:500;font-variant-numeric:tabular-nums}
.next-live.now span{font-weight:600}
.vial-stage{position:relative;height:min(78vh,690px);min-height:520px}
.vial-stage canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:pan-y}
.vial-stage canvas:active{cursor:grabbing}
.vial-stage::before{content:"";position:absolute;left:18%;top:46%;width:64%;height:56%;background:radial-gradient(closest-side,rgba(196,242,58,.42),rgba(196,242,58,0));pointer-events:none;animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{opacity:.6;transform:scale(1.07)}}
.vial-note{position:absolute;left:2%;bottom:13%;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;pointer-events:none;opacity:0;transition:opacity 1s var(--ease) .3s}
.vial-note .hand{font-size:1.55rem;transform:rotate(-4deg)}
.vial-note svg{width:70px;height:46px;margin-left:8.5rem;margin-top:-.2rem;color:var(--ink-2);overflow:visible}
.ready .vial-note{opacity:1}
.spun .vial-note{opacity:0}
.fallback{display:none}
.no3d canvas{display:none}
.no3d .fallback{display:grid;place-items:center;position:absolute;inset:0;color:var(--slate);font:500 .8rem/1.4 var(--f-mono);text-align:center}
@media (max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr)}.vial-stage{height:500px;min-height:0;margin-top:-1rem}}

/* proof */
.proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(1.6rem,3vw,2.6rem);border-top:1px solid var(--rule)}
.proof>div{padding:1.3rem 1rem 0 0;display:flex;flex-direction:column;gap:.4rem;min-width:0}
.proof>div+div{padding-left:1.2rem;border-left:1px solid var(--rule)}
.proof strong{font-size:clamp(1.8rem,3.2vw,2.8rem);line-height:1;font-weight:760;font-stretch:118%;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.proof strong small{font-size:.5em;margin-left:.08em}
.proof>div>span{font-size:.86rem;color:var(--slate);line-height:1.4}
@media (max-width:760px){.proof{grid-template-columns:repeat(2,minmax(0,1fr))}.proof>div:nth-child(3){padding-left:0;border-left:0}.proof>div:nth-child(n+3){padding-top:1.4rem}}

/* ticker */
.ticker{overflow:hidden;white-space:nowrap;border-block:1px solid var(--rule);background:var(--white)}
.ticker-track{display:inline-flex;animation:tick 60s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{display:inline-flex;align-items:center;gap:.7rem;padding:1.05rem 0 1.05rem 1.8rem;font:500 .78rem/1 var(--f-mono);color:var(--slate)}
.ticker span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1px var(--ink);margin-left:1.1rem}
.ticker b{font-weight:500;color:var(--ink);text-transform:uppercase;letter-spacing:.1em}
@keyframes tick{to{transform:translateX(-50%)}}

/* section heads */
.sh{margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.sh .lede{margin-top:1.2rem}
.sh-row{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}

/* talks */
.talk-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:16px}
.tcard{position:relative;isolation:isolate;border-radius:28px;padding:clamp(1.4rem,2.6vw,2rem);background:var(--white);border:1px solid var(--rule);overflow:hidden;display:flex;flex-direction:column;gap:1rem;transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.tcard:hover{transform:translateY(-4px);box-shadow:0 34px 60px -34px rgba(21,22,19,.35)}
.tc-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.tc-k{font:500 .66rem/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin:0}
.tue h3{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:740;font-stretch:112%;letter-spacing:-.03em}
.tc-time{display:flex;align-items:flex-end;gap:.9rem;margin:.2rem 0 0}
.tc-time b{font-size:clamp(4.4rem,8.6vw,7.2rem);line-height:.78;font-weight:800;font-stretch:125%;letter-spacing:-.06em}
.tc-time span{font:500 .78rem/1.4 var(--f-mono);color:var(--slate);padding-bottom:.3rem}
.count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.count div{border-radius:16px;background:var(--porcelain);border:1px solid var(--rule);padding:.75rem .4rem .62rem;text-align:center;overflow:hidden}
.count b{display:block;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1;font-weight:720;font-stretch:115%;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.count b.flip{animation:flip .55s var(--ease)}
@keyframes flip{from{transform:translateY(-40%);opacity:0;filter:blur(3px)}}
.count span{display:block;margin-top:.35rem;font:500 .58rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.tue .small{margin:0;font-size:.9rem;color:var(--slate)}
.tc-btns{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:auto}
.onair{position:absolute;z-index:-1;right:-70px;top:-70px;width:240px;height:240px;pointer-events:none}
.onair i{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--lime-deep);opacity:0;animation:ripple 3.6s ease-out infinite}
.onair i:nth-child(2){animation-delay:1.2s}.onair i:nth-child(3){animation-delay:2.4s}
@keyframes ripple{0%{transform:scale(.25);opacity:.9}100%{transform:scale(1.1);opacity:0}}
.tue.is-live{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.qs{padding:0;gap:0;min-height:32rem;justify-content:flex-end;background:#dcdcd8}
.qs-photo{position:relative;flex:1 1 auto;min-height:17rem;overflow:hidden}
.qs-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%;animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.04)}}
.qs-body{margin:0;padding:1.2rem 1.4rem 1.35rem;border-radius:0;display:flex;flex-direction:column;gap:.5rem}
.qs-body.glass{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;border-top:1px solid var(--rule);box-shadow:none;position:relative}
.qs-body h3{font-size:1.3rem;font-weight:700;font-stretch:110%;letter-spacing:-.02em}
.qs-body p{margin:0;font-size:.88rem;color:var(--slate);line-height:1.45}
a.qs{text-decoration:none;color:inherit;cursor:pointer}
a.qs:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(21,22,19,.45)}
a.qs:hover .qs-photo img{animation-play-state:paused}
.qs-stub{position:relative;display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.55rem;padding-top:.85rem;border-top:1.5px dashed var(--rule-2);font:500 .64rem/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.qs-stub::before,.qs-stub::after{content:"";position:absolute;top:-9px;width:16px;height:16px;border-radius:50%;background:#dcdcd8}
.qs-stub::before{left:calc(-1.4rem - 8px)}.qs-stub::after{right:calc(-1.4rem - 8px)}
.qs-stub b{font-weight:600;color:var(--ink);white-space:nowrap;padding:.45rem .7rem;border-radius:999px;background:var(--lime);transition:transform .35s var(--ease)}
a.qs:hover .qs-stub b{transform:translateX(3px)}
.ws h3{font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1;font-weight:760;font-stretch:114%;letter-spacing:-.035em}
.ws p{margin:0;color:var(--slate)}
.ws p.strong{color:var(--ink);font-weight:600}
.loop{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;font:500 .68rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.loop .st{padding:.55rem .8rem;border-radius:999px;border:1px solid var(--rule-2);animation:stepOn 3.6s infinite;animation-delay:var(--sd,0s)}
.loop .ln{width:22px;height:1px;background:var(--rule-2);position:relative;overflow:hidden}
.loop .ln::after{content:"";position:absolute;inset:0;background:var(--ink);transform:translateX(-100%);animation:lnRun 1.2s linear infinite}
@keyframes stepOn{0%,30%{background:var(--lime);border-color:var(--ink);color:var(--ink)}34%,100%{background:transparent;border-color:var(--rule-2);color:inherit}}
@keyframes lnRun{to{transform:translateX(100%)}}
.ws .btn{align-self:flex-start;margin-top:auto}
.topics{list-style:none;margin:0;padding:0}
.topics li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.95rem 0;border-bottom:1px solid var(--rule);font-weight:600;font-stretch:104%;line-height:1.3;transition:padding .45s var(--ease)}
.topics li::after{content:"→";font-family:var(--f-mono);font-weight:400;color:var(--slate-2);transition:transform .45s var(--ease),color .3s}
.topics li:hover{padding-left:.5rem}
.topics li:hover::after{transform:translateX(4px);color:var(--ink)}
.past{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.3rem 1rem;align-items:baseline;font-size:.94rem}
.past time{font:500 .7rem/1.3 var(--f-mono);color:var(--slate)}
@media (max-width:900px){.talk-grid{grid-template-columns:minmax(0,1fr)}.qs{min-height:30rem}}