.hero__mascot{width:clamp(84px,8.4vw,118px);top:2%;left:-1%;rotate:-8deg}
.way__media--cut{display:block}
.way__media--cut img{position:absolute;left:50%;bottom:-12%;width:auto;height:114%;max-width:none;transform:translateX(-50%);object-fit:contain}
.dock .dock__btn{flex:1 1 auto;justify-content:center}
@media (max-width:640px){
.rail{align-items:flex-start}
.hero__stage{display:block;position:relative;height:auto;aspect-ratio:auto;margin:6px calc(-1*var(--gutter)) 26px;padding:0}
.hero__visual{position:absolute;inset:-6% 0 22% 0;border-radius:0;box-shadow:none;z-index:0;
-webkit-mask:linear-gradient(180deg,transparent 0,#000 18%,#000 58%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 18%,#000 58%,transparent 100%)}
.hero__visual::after{display:none}
.hero__visual img{object-position:50% 38%;transform:none}
.hero__mascot{width:62px;left:auto;right:calc(var(--gutter) + 2px);top:2%;rotate:10deg}
.cardwrap{position:relative;z-index:4;right:auto;bottom:auto;width:calc(100% - 2*var(--gutter) - 8px);max-width:400px;margin:56vw auto 0}
.cardwrap .icard{--rot:-4deg}
.way__media,.way--hero .way__media{height:190px}
.dock{padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;left:16px;right:16px}
.dock__btn{padding:1.15em 1.2em 1.1em;font-size:1rem;box-shadow:0 0 0 3px var(--void),0 16px 34px rgba(0,0,0,.55)}
}
.js .intro{background:radial-gradient(120% 80% at 50% 46%,#0b1450 0%,var(--void) 62%)}
.intro__word{font-size:clamp(3.8rem,17vw,8rem);background:linear-gradient(100deg,#a88c08 0%,#EAD11F 26%,#fff6c2 43%,#ffffff 50%,#fff1a3 57%,#EAD11F 72%,#a88c08 100%);background-size:320% 100%;background-position:100% 0;
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
animation:rise .9s var(--ease-expo) .15s both,foil 1.15s cubic-bezier(.45,0,.2,1) .25s both;filter:drop-shadow(0 8px 34px rgba(234,209,31,.25))}
@keyframes foil{from{background-position:100% 0}to{background-position:0 0}}
.intro::after{content:"Milky Way 2027";position:relative;font:800 .8rem/1 var(--f-display);font-stretch:75%;letter-spacing:.42em;text-transform:uppercase;color:var(--cream);animation:introLine .7s var(--ease-expo) .5s both}
@keyframes introLine{from{opacity:0;transform:translateY(10px)}to{opacity:.75;transform:none}}
.progress{grid-template-columns:repeat(6,1fr)}
.handle__note{min-height:1.5em;margin:-8px 0 8px;font-size:var(--step--1);font-weight:600}
.handle__note.is-free{color:var(--ufo)}
.handle__note.is-taken{color:var(--gold)}
.handle__options{display:flex;flex-wrap:wrap;gap:8px}
.oval__pick{padding:7px 12px;border-radius:999px;box-shadow:inset 0 0 0 2px rgba(247,247,245,.4);font-size:var(--step--1);cursor:pointer}
.oval__pick:hover{box-shadow:inset 0 0 0 2px var(--acc)}
.verify__err{min-height:1.4em;margin:0 0 10px;color:var(--gold);font-weight:600}
.foot__links{display:flex;flex-wrap:wrap;gap:6px 16px}
.foot__links a{color:inherit;opacity:.72;text-underline-offset:.2em}
.foot__links a:hover{opacity:1}
.bar__tag a{color:inherit}
/* The restored site, carried forward: the shared card, tape, stickers and the mint reveal. */
:root{--fg-3:rgba(247,247,245,.62);--focus:var(--gold);--t-xs:.78rem;--ease-swing:cubic-bezier(.45,.05,.25,1);--ease-back:cubic-bezier(.3,1.5,.5,1);
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.5 -.5'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
html.is-locked{overflow:hidden}
.mwc p{margin:0}
.cardwrap{width:min(452px,86%);right:-3%;bottom:6px;perspective:none}
.cardwrap .mwc{rotate:-5deg}
.hero__sticker{left:8%;bottom:17%;--sz:clamp(52px,6vw,84px);--rot:10deg}
.mwc .flash{animation:flash .6s var(--ease-out)}
.mwc.is-pop{animation:cardPop .9s var(--ease-expo)}
.join__card .mwc{rotate:-3deg}
.sticker{position:absolute;z-index:5;display:block;width:var(--sz,72px);color:#fff;filter:drop-shadow(1.5px 0 0 var(--void)) drop-shadow(-1.5px 0 0 var(--void)) drop-shadow(0 1.5px 0 var(--void)) drop-shadow(0 -1.5px 0 var(--void)) drop-shadow(3px 4px 0 var(--void));rotate:var(--rot,-8deg);pointer-events:none}
.sticker svg{width:100%;height:auto}
.tape{position:relative;z-index:4;width:calc(100% + 80px);margin:0 -40px;overflow:hidden;background:var(--gold);color:var(--void);rotate:-1.2deg;box-shadow:0 7px 0 rgba(0,3,20,.55);font:800 clamp(1rem,.9rem + .5vw,1.32rem)/1 var(--f-display);font-stretch:75%;letter-spacing:.08em;text-transform:uppercase}
.tape__run{display:flex;width:max-content;padding-block:.62em .56em;animation:tape-run 48s linear infinite}
.tape__run>span{display:flex;align-items:center;gap:1.3em;padding-right:1.3em;white-space:nowrap}
.tape__run b{font-weight:800}
.tape__run i{display:block;width:.72em;height:.72em;background:currentColor;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
@keyframes tape-run{to{transform:translateX(-50%)}}
.fan{list-style:none;margin:clamp(34px,5vw,64px) 0 0;padding:0 4% 8px;display:flex;justify-content:center}
.fan__stop{position:relative;z-index:var(--i);flex:0 0 31%;margin-inline:-3.5%;transition:translate .5s var(--ease-expo),rotate .5s var(--ease-expo),opacity .55s var(--ease-out),transform .55s var(--ease-out);transition-delay:calc(var(--i)*70ms)}
.fan__stop:nth-child(1){rotate:-7deg;translate:0 24px}
.fan__stop:nth-child(2){rotate:-2.4deg;translate:0 4px}
.fan__stop:nth-child(3){rotate:2.4deg;translate:0 4px}
.fan__stop:nth-child(4){rotate:7deg;translate:0 24px}
.fan__stop:hover,.fan__stop:focus-within{z-index:9;rotate:0deg;translate:0 -18px;transition-delay:0s}
.fan__name{margin:18px 0 0;font:800 var(--step-1)/1 var(--f-display);font-stretch:75%;letter-spacing:.03em;text-transform:uppercase}
.fan__say{margin:4px 0 0;font-size:var(--step--1);color:var(--cream)}
.fan__stop:last-child .fan__name{color:var(--gold)}
@media (max-width:800px){
.fan{justify-content:flex-start;gap:14px;margin-inline:calc(-1*var(--gutter));padding:6px var(--gutter) 14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.fan__stop,.fan__stop:nth-child(n){flex:0 0 84%;margin:0;rotate:0deg;translate:0;scroll-snap-align:center}
}
.minted{position:fixed;inset:0;z-index:96;display:grid;place-items:center;padding:var(--gutter);background:var(--void);overflow:hidden;isolation:isolate;opacity:0;transition:opacity .4s}
.minted.is-on{opacity:1}
.minted__rays{position:absolute;z-index:-1;left:50%;top:44%;width:max(170vmax,1400px);aspect-ratio:1;translate:-50% -50%;background:repeating-conic-gradient(from 0deg,rgba(234,209,31,.15) 0deg 6deg,transparent 6deg 15deg);-webkit-mask:radial-gradient(closest-side,#000,transparent 80%);mask:radial-gradient(closest-side,#000,transparent 80%);animation:spin 70s linear infinite;scale:.4;opacity:0;transition:scale 1.4s var(--ease-expo) .2s,opacity 1s .2s}
.minted.is-on .minted__rays{scale:1;opacity:1}
.minted__in{display:grid;justify-items:center;gap:14px;width:min(100%,600px);text-align:center}
.minted__in .kick{margin:0}
.minted__card{width:100%;rotate:-2deg;margin-block:8px 18px}
.minted__title{margin:0;font:800 var(--step-4)/.86 var(--f-display);font-stretch:75%;text-transform:uppercase;opacity:0;translate:0 24px;transition:opacity .8s var(--ease-expo) 1.1s,translate .8s var(--ease-expo) 1.1s}
.minted__lede{margin:0 0 8px;max-width:44ch;color:var(--cream);opacity:0;transition:opacity .8s 1.35s}
.minted .btn{opacity:0;transition:opacity .8s 1.6s,scale .2s}
.minted.is-on .minted__title,.minted.is-on .minted__lede,.minted.is-on .btn{opacity:1;translate:0}
@media (max-width:640px){
.cardwrap{width:calc(100% - 2*var(--gutter) - 8px);right:auto}
.cardwrap .mwc{rotate:-4deg}
.hero__sticker{display:none}
}
@media (prefers-reduced-motion:reduce){.tape__run,.minted__rays{animation:none}}
/* The road is the one full-bleed gold moment on the page. It cuts in on a bolt, the way the book's posters do. */
.roadsec{--bolt:clamp(44px,7.5vw,118px);isolation:isolate;margin-top:clamp(60px,7vw,110px);padding-top:calc(var(--bolt) + clamp(36px,5vw,64px));padding-bottom:calc(var(--bolt) + clamp(36px,5vw,64px));color:var(--void)}
.roadsec::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--gold);clip-path:polygon(0 var(--bolt),46% calc(var(--bolt)*.24),41.5% calc(var(--bolt)*.7),100% 0,100% calc(100% - var(--bolt)),54% calc(100% - var(--bolt)*.3),58.5% calc(100% - var(--bolt)*.76),0 100%)}
.roadsec .kick--acc,.roadsec .sec__lede,.roadsec .fan__say{color:var(--void)}
.roadsec .fan__stop:last-child .fan__name{color:var(--void)}
#credits{padding-top:clamp(30px,4vw,60px)}
/* Claiming a handle is the moment a member names themselves, so the field is set at display size. */
.step[data-k=handle] .affix{align-items:center;gap:4px;padding:0;background:none;box-shadow:none;border-bottom:3px solid var(--moon);border-radius:0;transition:border-color .2s}
.step[data-k=handle] .affix:focus-within{border-color:var(--gold)}
.step[data-k=handle] .affix__tag{padding:0;background:none;color:var(--gold);font:800 clamp(2rem,1.6rem + 1.6vw,3rem)/1 var(--f-display);font-stretch:75%}
.step[data-k=handle] .affix input{padding:6px 0;border:0;background:none;box-shadow:none;font:800 clamp(2rem,1.6rem + 1.6vw,3rem)/1 var(--f-display);font-stretch:75%}
.step[data-k=handle] .affix input:focus{outline:0}