/* Battle For Giostone - the pre-launch waitlist (waitlist/index.html, built by build-waitlist.py).
   Loaded after tokens.css and site.css, whose nav and buttons it reuses; everything new is wl-.

   ONE SCREEN, NEVER A SCROLL (owner, 2026-10-06). The page is exactly the height of the screen: the game's title,
   the headline and the countdown in the sky, the six Heroes of the 2022 trailer still in the middle, the reasons
   and the sign-up on the ground. Up to 1024 px wide the ground holds a Join the waitlist button instead, and the
   form rises as a sheet over the picture. Nothing here is decoration for its own sake: no diamonds, glows, glass
   or particles (owner: "dont use anything that will look ai"). What is drawn is the studio's picture, its title
   lettering, the Giostone mark (and its cut, on the main buttons) and the site's crimson rule; the rest is type. */

/* the display face, served from here and preloaded (build-waitlist.py FONT); it comes after Google's, so it wins */
@font-face{font-family:"Bitter";font-style:normal;font-weight:900;font-display:swap;src:url(../assets/fonts/bitter-900-latin.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0-00FF,U+2011,U+2013,U+2018-2019,U+201C-201D,U+2026}

html{height:100%;overflow:hidden;overscroll-behavior:none;scroll-behavior:auto}
body.wl{--nav:72px;--gut:32px;--pad-l:max(var(--gut),env(safe-area-inset-left));--pad-r:max(var(--gut),env(safe-area-inset-right));height:100%;overflow:hidden;background:var(--bfg-abyss)}
.wl-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- buttons: flat, one corner cut at the angle of the cuts in the Giostone mark ---------- */
.wl .btn,.wl .btn:hover,.wl .btn:active{transform:none;box-shadow:none;text-shadow:none}
.wl .btn--fill,.wl .btn--fill:hover{background:var(--bfg-red);border-color:var(--bfg-red);color:var(--bfg-ivory);clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 26px) 100%,0 100%)}
.wl .btn--fill::before{display:none}
.wl .btn--ghost,.wl .btn--ghost:hover{background:rgba(1,11,31,.4);border-color:rgba(255,253,245,.3);color:var(--bfg-ivory)}
@media (hover:hover){
  .wl .btn--fill:hover{background:var(--bfg-gio-light);border-color:var(--bfg-gio-light)}
  .wl .btn--ghost:hover{background:rgba(255,253,245,.07);border-color:rgba(255,253,245,.75)}
}
.wl .btn--fill:active{background:var(--bfg-gio-dark);border-color:var(--bfg-gio-dark)}
/* the cut corner would clip an outline, so a filled button shows its focus inside its edge */
.wl .btn--fill:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--bfg-ivory)}

/* ---------- nav: the mark and one button; the site's menu is not public before the 15th ---------- */
.wl .nav{height:var(--nav);background:linear-gradient(180deg,rgba(1,11,31,.66),rgba(1,11,31,0))}
.wl .nav .wrap{width:auto;margin:0;padding:0 var(--pad-r) 0 var(--pad-l);flex:1 1 auto;max-width:calc(1280px + var(--pad-l) + var(--pad-r));margin-inline:auto}
.wl .nav .btn{display:inline-flex}
/* the title lettering below says the name; the nav keeps it only where the lettering is not shown */
.wl .brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.wl .wl-nav__x{gap:10px;transition:opacity .3s,visibility .3s,background .18s,border-color .18s,color .18s}
.wl-nav__x b{font-weight:600}
.wl-x{width:14px;height:14px;flex:0 0 14px}
/* one Follow on screen at a time: the success and the open gates carry their own */
.wl.is-open .wl-nav__x{visibility:hidden}

/* ---------- the screen: nav | sky (title, headline, countdown) | the Heroes | ground (reasons, sign-up) ---------- */
.wl-main{position:relative;height:100vh;height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--nav) auto minmax(0,1fr) auto;overflow:hidden;background:var(--bfg-abyss)}
/* no stacking context here or on the ground: the sheet and its scrim (z 79-80) rise above the fixed nav (z 50) */

/* the picture: full bleed on a landscape screen, a slow drift; night at the top for the type, the edges closed in.
   Behind it, the colours of the picture itself, so the frame before it has decoded is the same night */
.wl-art{grid-area:1/1/-1/-1;position:relative;z-index:0;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,#08182a 0%,#1d3a52 34%,#2c3a44 62%,#1a1d22 84%,#0d0f13 100%);transition:transform .42s cubic-bezier(.16,1,.3,1)}
.wl-art img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 10%;transform-origin:50% 42%;animation:wl-drift 48s ease-in-out infinite alternate;transition:opacity .6s ease-out}
.js .wl-art img{animation:wl-drift 48s ease-in-out infinite alternate,wl-show 0s 5s forwards}
.js .wl-art img:not(.is-in){opacity:0}
@keyframes wl-show{to{opacity:1}}
@keyframes wl-drift{from{transform:scale(1.01)}to{transform:scale(1.05) translate3d(-.5%,-.3%,0)}}
/* a landscape screen: the picture hangs from its top edge a tenth of the screen taller, so the Heroes stand larger and
   lower, their heads clear of the date line and their feet in the darkened ground (after the moment there is no
   date line, and the buttons stand in front of them as they are) */
@media (orientation:landscape){.wl:not(.is-open) .wl-art img{inset:0 0 auto 0;height:calc(100% + 10vh);object-position:50% 0}}
/* a 1920 px master on a 2x laptop is already enlarged: drift less there */
@media (min-resolution:2dppx) and (min-width:1025px){@keyframes wl-drift{from{transform:scale(1)}to{transform:scale(1.025) translate3d(-.4%,-.2%,0)}}}
.wl-art::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(1,11,31,.78) 0%,rgba(1,11,31,.5) 16%,rgba(1,11,31,.12) 34%,rgba(1,11,31,0) 46%),
  linear-gradient(90deg,rgba(1,11,31,.55),rgba(1,11,31,0) 15%,rgba(1,11,31,0) 85%,rgba(1,11,31,.55))}

/* ---------- the sky: the game's title, the headline, the countdown, the day ---------- */
.wl-top{--h1:clamp(30px,min(3.9vw,6.1vh),62px);grid-area:2/1;position:relative;z-index:2;justify-self:center;display:flex;flex-direction:column;align-items:center;width:min(1100px,100% - var(--pad-l) - var(--pad-r));padding-top:clamp(0px,1vh,12px);text-align:center;transition:opacity .3s}
/* the studio's carved-stone title, lifted off its 2023 title card; a dark shadow seats it on the sky (no glow) */
.wl-logo{display:block;width:clamp(200px,min(27vw,40vh),430px);height:auto;max-width:none;filter:drop-shadow(0 2px 2px rgba(1,11,31,.7)) drop-shadow(0 6px 18px rgba(1,11,31,.5))}
.wl-head{display:flex;flex-direction:column;align-items:center}
.wl-head h1,.wl-open__title{margin:clamp(6px,2.4vh - 4px,24px) 0 0;font:900 var(--h1)/1.02 var(--bfg-font-display);letter-spacing:-.005em;color:var(--bfg-ivory);text-shadow:0 1px 10px rgba(1,11,31,.55)}
.wl-head h1 em,.wl-open__title em{font-style:normal;color:var(--bfg-ember)}

/* the countdown: numerals a size under the headline, each followed by its unit in the voice of the date line;
   no boxes, no separators, the spacing does the work */
.wl-clock{display:flex;justify-content:center;align-items:baseline;gap:0 .5em;margin-top:clamp(4px,1.3vh,14px);font-size:calc(var(--h1) * .78)}
.wl-clock__unit{display:flex;align-items:baseline;gap:max(5px,.2em)}
.wl-clock b{display:flex;font:900 1em/1.05 var(--bfg-font-display);color:var(--bfg-ivory);font-variant-numeric:tabular-nums lining-nums;text-shadow:0 1px 10px rgba(1,11,31,.55)}
.wl-clock b i{display:inline-block;width:.6em;text-align:center;font-style:normal}
.wl-clock b i.is-tick{animation:wl-tick .42s cubic-bezier(.2,.8,.2,1)}
@keyframes wl-tick{from{opacity:.25;transform:translateY(-.12em)}to{opacity:1;transform:none}}
.wl-clock__unit>span{font:italic 400 max(12px,.36em)/1 var(--bfg-font-display);color:var(--bfg-mist);text-shadow:0 1px 8px rgba(1,11,31,.9)}
.wl-when{margin:clamp(6px,1.4vh,14px) 0 0;max-width:40ch;font:italic 400 clamp(14px,1.1vw,17px)/1.45 var(--bfg-font-display);color:var(--bfg-mist);text-wrap:balance;text-shadow:0 1px 10px rgba(1,11,31,.95)}
.wl-when time{font-style:normal;color:var(--bfg-ivory)}
.wl-when #wl-local{display:block;font-size:.9em;color:var(--bfg-mist);opacity:.85}

/* ---------- after the launch moment ---------- */
.wl-open__text{max-width:44ch;margin:14px 0 0;text-wrap:balance;font:400 clamp(16px,1.3vw,19px)/1.55 var(--bfg-font-display);color:var(--bfg-ivory);text-shadow:0 1px 12px rgba(1,11,31,.9)}
.wl-open__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:22px}
.wl-open__actions .btn{gap:10px}
.wl.is-open .wl-dock{display:none}
/* with no ground to fill, the way in stands on it: the title and the words in the sky, the two buttons on the
   ground in front of the Heroes, where the night comes back up */
.wl.is-open .wl-top{grid-row:2/5;align-self:stretch;padding-bottom:calc(clamp(20px,5vh,56px) + env(safe-area-inset-bottom))}
.wl.is-open .wl-open{flex:1 1 auto}
.wl.is-open .wl-open__actions{margin-top:auto;padding-top:20px}
.wl.is-open .wl-art::after{background:
  linear-gradient(0deg,rgba(1,11,31,.94) 0%,rgba(1,11,31,.6) 16%,rgba(1,11,31,0) 34%),
  linear-gradient(180deg,rgba(1,11,31,.78) 0%,rgba(1,11,31,.5) 16%,rgba(1,11,31,.12) 34%,rgba(1,11,31,0) 46%),
  linear-gradient(90deg,rgba(1,11,31,.55),rgba(1,11,31,0) 15%,rgba(1,11,31,0) 85%,rgba(1,11,31,.55))}

/* ---------- the ground: the reasons, then the sign-up ---------- */
.wl-dock{--ctl:52px;grid-area:4/1;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:0 clamp(36px,4.4vw,72px);padding:clamp(12px,2.2vh,26px) max(var(--pad-r),(100% - 1280px) / 2) clamp(14px,2.6vh,30px) max(var(--pad-l),(100% - 1280px) / 2)}
/* the ground sinks into the night under the sign-up, however tall the sign-up is */
.wl-dock::before{content:"";position:absolute;left:0;right:0;top:-130px;bottom:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(1,11,31,0),rgba(1,11,31,.8) 130px,rgba(1,11,31,.93) calc(130px + 50%),rgba(1,11,31,.97))}
.wl-pitch,.wl-panel{position:relative;z-index:3}

.wl-pitch{display:flex;flex-direction:column;align-items:flex-start}
/* the site's crimson rule, the brand's own mark for the start of a section */
.wl-pitch::before{content:"";width:48px;height:3px;margin:0 0 14px;background:var(--bfg-red)}
/* the one reason, in the owner's words (2026-10-07: "we can just say Get your free Hero") */
.wl-why{margin:0;font:900 clamp(23px,1.78vw,27px)/1.1 var(--bfg-font-display);color:var(--bfg-ivory);white-space:nowrap}
/* "N warriors waiting": its line is kept from the first frame, so a count that arrives later moves nothing */
.wl-proof{margin:12px 0 0;font:500 13px/20px var(--bfg-font-ui);color:var(--bfg-mist);visibility:hidden}
.wl-proof.is-on{visibility:visible}
.wl-proof b{font:900 18px/1 var(--bfg-font-display);color:var(--bfg-ivory);font-variant-numeric:tabular-nums}
.wl-cta{display:none}
.wl-noscript{display:none}
.wl-scrim{display:none}

/* the sign-up, in place on a wide screen */
.wl-panel{min-width:0}
.wl-panel__top{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.wl-close{display:none}
.wl-panel__top h2{margin:0;font:800 22px/1.15 var(--bfg-font-display);color:var(--bfg-ivory)}

/* one row: your main (the six painted faces), the email, or a Telegram name; labels in sentence case */
.wl-fields{display:grid;grid-template-columns:auto minmax(0,1.25fr) minmax(0,1fr);gap:0 18px;align-items:start}
.wl-field{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;padding:0;border:0;font:600 13px/16px var(--bfg-font-ui);color:var(--bfg-mist)}
.wl-field small{margin-left:6px;font:500 12.5px/16px var(--bfg-font-ui);color:var(--bfg-muted)}
.wl-field input{width:100%;height:var(--ctl);padding:0 15px;border:0;border-radius:var(--bfg-radius-btn);background:rgba(1,11,31,.78);box-shadow:inset 0 0 0 1px rgba(255,253,245,.26);color:var(--bfg-ivory);font:500 15px/1 var(--bfg-font-ui);transition:box-shadow .16s,background .16s}
.wl-field input::placeholder{color:var(--bfg-muted);opacity:1}
.wl-field input:hover{box-shadow:inset 0 0 0 1px rgba(255,253,245,.46)}
/* where you type is ivory; ember is kept for a field that needs fixing, focused or not */
.wl-field input:focus{outline:none;background:rgba(1,11,31,.92);box-shadow:inset 0 0 0 2px rgba(255,253,245,.82)}
.wl-field input[aria-invalid="true"],.wl-field input[aria-invalid="true"]:focus{box-shadow:inset 0 0 0 2px var(--bfg-ember)}

/* your main: six round faces cut from the painted portraits, at full colour until one is picked: then it is ringed
   in its class colour and the other five step back into the night; the row is as tall as the inputs, so the three
   labels sit on one line */
.wl-mains legend{display:block;float:left;width:100%;margin:0 0 8px;padding:0;white-space:nowrap}
.wl-mains legend+*{clear:both}
.wl-mains.has-pick small{color:var(--bfg-ivory);font-weight:600}
.wl-mains__row{display:flex;align-items:center;gap:8px;height:var(--ctl)}
.wl-chip{--ring:color-mix(in srgb,var(--c) 62%,#FFFDF5);--chip:var(--ctl);position:relative;isolation:isolate;flex:0 0 var(--chip);width:var(--chip);height:var(--chip);border-radius:50%;overflow:hidden;cursor:pointer;background:#04061a;transition:transform .16s}
.wl-chip input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.wl-chip img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s,filter .2s}
.wl-mains.has-pick .wl-chip:not(.is-picked) img{filter:saturate(.35) brightness(.62)}
.wl-chip::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,253,245,.28)}
@media (hover:hover){
  .wl-chip:hover img{transform:scale(1.06)}
  .wl-chip:hover::after{box-shadow:inset 0 0 0 1px rgba(255,253,245,.7)}
  .wl-mains.has-pick .wl-chip:not(.is-picked):hover img{filter:none}
}
.wl-chip.is-picked{transform:translateY(-2px)}
.wl-chip.is-picked::after{box-shadow:inset 0 0 0 3px var(--ring),inset 0 0 0 4px rgba(1,11,31,.55)}
.wl-chip:has(input:focus-visible){outline:2px solid var(--bfg-ember);outline-offset:2px}
.wl-mains[aria-invalid="true"] .wl-chip::after{box-shadow:inset 0 0 0 1px var(--bfg-ember)}

/* a message never moves anything: its line is always there */
.wl-msg{min-height:20px;margin:8px 0 6px;font:600 13px/20px var(--bfg-font-ui);color:var(--bfg-ember)}
.wl-msg a{color:var(--bfg-mist);text-decoration:underline;text-underline-offset:2px}

/* the box, then the button that needs it */
.wl-send{display:flex;align-items:center;justify-content:space-between;gap:28px}
.wl-consent{display:flex;align-items:flex-start;gap:12px;min-width:0;flex:1 1 auto}
.wl-consent__text{min-width:0}
.wl-consent label{display:block;font:500 13.5px/1.42 var(--bfg-font-ui);color:var(--bfg-ivory);cursor:pointer}
.wl-consent input{-webkit-appearance:none;appearance:none;position:relative;flex:0 0 18px;width:18px;height:18px;margin:1px 0 0;border-radius:var(--bfg-radius-btn);display:grid;place-items:center;cursor:pointer;background:rgba(1,11,31,.78);box-shadow:inset 0 0 0 1px rgba(255,253,245,.55);transition:background .14s,box-shadow .14s}
.wl-consent input::after{content:"";width:9px;height:5px;margin-top:-2px;border:2px solid var(--bfg-ivory);border-top:0;border-right:0;transform:rotate(-45deg) scale(0);transition:transform .14s}
@media (hover:hover){.wl-consent input:hover{box-shadow:inset 0 0 0 1px rgba(255,253,245,.8)}}
.wl-consent input::before{content:"";position:absolute;inset:-7px}    /* a 32 px target around the 18 px box */
.wl-consent input:checked{background:var(--bfg-red);box-shadow:inset 0 0 0 1px var(--bfg-ember)}
.wl-consent input:checked::after{transform:rotate(-45deg) scale(1)}
.wl-consent input:focus-visible{outline:2px solid var(--bfg-ember);outline-offset:3px}
.wl-consent input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--bfg-ember)}
.wl-link{display:inline;margin:2px 0 0;padding:4px 0;border:0;background:none;cursor:pointer;font:500 12px/1.5 var(--bfg-font-ui);color:var(--bfg-muted);text-decoration:underline;text-decoration-color:rgba(255,253,245,.25);text-underline-offset:3px}
@media (hover:hover){.wl-link:hover{color:var(--bfg-ivory)}}
.wl-link:focus-visible{outline:2px solid var(--bfg-ember);outline-offset:2px}
.wl-submit{flex:0 0 auto;height:var(--ctl);justify-content:center;min-width:200px;padding:0 34px;font-family:var(--bfg-font-ui);cursor:pointer}
.wl-submit[disabled]{cursor:progress;opacity:.75}
.wl-hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* the privacy note: a small dialog over the page, the page itself never grows; the note scrolls inside only on a
   very small screen, and Close is always in view */
.wl-dialog{width:min(520px,100% - 32px);max-height:min(600px,100% - 32px);margin:auto;padding:0;border:0;border-radius:var(--bfg-radius-sm);background:linear-gradient(rgba(1,11,31,.55),rgba(1,11,31,.55)),url(../assets/brand/stone-grain.webp) 0 0/176px 248px,var(--bfg-abyss);background-blend-mode:normal,soft-light,normal;color:var(--bfg-mist);box-shadow:inset 0 0 0 1px rgba(255,253,245,.1),0 30px 90px rgba(0,0,0,.7);overscroll-behavior:contain}
.wl-dialog[open]{display:flex;flex-direction:column}
.wl-dialog::backdrop{background:rgba(1,11,31,.74)}
.wl-dialog::before{content:"";flex:0 0 3px;width:48px;height:3px;margin:26px 26px 16px;background:var(--bfg-red)}
.wl-dialog h2{margin:0 26px;font:800 21px/1.2 var(--bfg-font-display);color:var(--bfg-ivory)}
.wl-dialog__body{min-height:0;overflow:auto;padding:4px 26px 0}
.wl-dialog p{margin:8px 0 0;font:400 14px/1.6 var(--bfg-font-ui);color:var(--bfg-mist);text-wrap:pretty}
.wl-dialog a{color:var(--bfg-ivory);text-decoration:underline;text-decoration-color:rgba(255,253,245,.35);text-underline-offset:2px}
.wl-dialog__foot{flex:0 0 auto;padding:18px 26px 22px}
.wl-dialog .btn{padding:12px 22px}
.wl-dialog[open]{animation:wl-rise-in .24s cubic-bezier(.2,.8,.2,1)}
@keyframes wl-rise-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- registered: the success replaces the form in place, at its height ---------- */
.wl-done{--seal:clamp(96px,8.6vw,124px);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:0 clamp(20px,2.2vw,32px);height:100%}
.wl-done__seal{position:relative;flex:none;width:var(--seal);height:var(--seal)}
/* the picked Hero's painted face set in the Giostone's outline; the mark itself without a main */
.wl-done__seal img,.wl-done__mark{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}
.wl-done__mark{inset:10%;width:80%;height:80%}
.wl-done.has-hero .wl-done__mark{display:none}
.wl-done__seal img.is-in{animation:wl-rise .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes wl-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.wl-done h2{margin:0;font:800 clamp(22px,1.9vw,28px)/1.15 var(--bfg-font-display);color:var(--bfg-ivory);text-wrap:balance}
.wl-done h2:focus{outline:none}
.wl-done__text>p{max-width:60ch;margin:8px 0 0;text-wrap:balance;font:400 15px/1.5 var(--bfg-font-display);color:var(--bfg-mist)}
.wl-done__actions{display:flex;flex-direction:column;gap:10px}
.wl-done__actions .btn{gap:10px;justify-content:center;height:42px;padding:0 22px}
.wl-done:not([hidden]){animation:wl-fade .5s ease-out both}
@keyframes wl-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- a laptop's short screen: the same layout, tighter ---------- */
@media (min-width:1025px) and (max-height:760px){
  body.wl{--nav:64px}
  .wl:not(.is-open) .wl-art img{height:calc(100% + 14vh)}    /* the Heroes' heads further under the date line */
  .wl-dock{--ctl:46px}
  .wl-msg{margin:6px 0 4px}
}
@media (min-width:1025px){
  .wl.is-done .wl-nav__x{visibility:hidden}
  .wl-panel.is-done{overflow:hidden}
}
@media (min-width:1025px) and (max-width:1200px){
  .wl-dock{--ctl:44px}
  .wl-fields{gap:0 12px}
  .wl-mains__row{gap:5px}
  .wl-submit{min-width:0}
  .wl-done{grid-template-columns:auto minmax(0,1fr)}
  .wl-done__actions{grid-column:2;flex-direction:row}
}

/* ---------- phones and tablets: the ground holds the button, the form is a sheet ---------- */
@media (max-width:1024px){
  .wl-dock{grid-template-columns:minmax(0,1fr);justify-items:center;padding:10px var(--pad-r) calc(clamp(16px,3vh,32px) + env(safe-area-inset-bottom)) var(--pad-l);text-align:center}
  .wl-dock::before{top:-100px;background:linear-gradient(180deg,rgba(1,11,31,0),rgba(1,11,31,.86) 100px,rgba(1,11,31,.95))}
  .wl-pitch{align-items:center;width:100%}
  .wl-pitch::before{margin:0 0 12px}
  .wl-why{font-size:clamp(24px,6.6vw,30px)}
  .wl-proof{margin-top:8px}
  .wl-noscript{display:block;max-width:34ch;margin:16px 0 0;font:600 13px/1.5 var(--bfg-font-ui);color:var(--bfg-ember)}
  .wl-noscript a{color:var(--bfg-ivory);text-decoration:underline;text-underline-offset:2px}
  .wl-cta{display:inline-flex;justify-content:center;width:min(100%,400px);height:52px;margin-top:clamp(8px,1.6vh,16px);padding:0 24px;font-size:13px}

  /* the sheet: the night of the page with the brand's stone grain, its handle the crimson rule; it rises over the
     picture (the Heroes rise with it, js lift()) and scrolls inside itself only when the keyboard leaves it too
     little room. The scrim covers the nav too. */
  .wl-scrim{display:block;position:fixed;inset:0;z-index:79;background:rgba(1,11,31,.5);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s linear .3s}
  .wl.is-sheet .wl-scrim{opacity:1;visibility:visible;transition:opacity .3s}
  .wl.is-sheet .wl-top{opacity:0}
  /* under the sheet the nav's Follow steps aside: the only cross on screen is the sheet's own, and the success
     carries its own Follow */
  .wl.is-sheet .wl-nav__x{opacity:0;visibility:hidden}
  .wl.is-sheet .wl-art{transform:translateY(calc(-1 * var(--lift,0px)))}
  .wl-panel{position:fixed;left:0;right:0;bottom:var(--kb,0px);z-index:80;width:min(100%,620px);max-height:calc(var(--vvh,100dvh) - 10px);margin:0 auto;padding:0 max(22px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;text-align:left;background:linear-gradient(rgba(1,11,31,.55),rgba(1,11,31,.55)),url(../assets/brand/stone-grain.webp) 0 0/176px 248px,var(--bfg-abyss);background-blend-mode:normal,soft-light,normal;border-radius:var(--bfg-radius-sm) var(--bfg-radius-sm) 0 0;box-shadow:inset 0 1px 0 rgba(255,253,245,.12),0 -30px 80px rgba(0,0,0,.65);transform:translateY(calc(100% + 40px));visibility:hidden;transition:transform .34s cubic-bezier(.4,0,.6,1),visibility 0s linear .34s}
  .wl.is-sheet .wl-panel{transform:translateY(var(--drag,0px));visibility:visible;transition:transform .42s cubic-bezier(.16,1,.3,1)}
  .wl.is-dragging .wl-panel{transition:none}
  .wl-panel__top{position:sticky;top:0;z-index:2;width:auto;height:auto;margin:0 -22px;padding:24px 22px 12px;overflow:visible;clip:auto;white-space:normal;display:flex;align-items:center;justify-content:space-between;gap:16px;background:inherit;background-blend-mode:normal,soft-light,normal;touch-action:none}
  .wl-panel__top::before{content:"";position:absolute;left:50%;top:10px;width:40px;height:3px;margin-left:-20px;background:var(--bfg-red)}
  .wl-close{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;margin:0 -8px 0 auto;padding:0;border:0;border-radius:50%;background:transparent;color:var(--bfg-mist);cursor:pointer}
  .wl-close:focus-visible{outline:2px solid var(--bfg-ember);outline-offset:1px}
  @media (hover:hover){.wl-close:hover{color:var(--bfg-ivory);background:rgba(255,253,245,.06)}}
  .wl-close__x{width:20px;height:20px}
  @media (hover:none){.wl-close{flex-basis:44px;width:44px;height:44px;margin-right:-10px}}
  .wl-panel.is-done .wl-panel__top h2{display:none}
  .wl-panel.is-done .wl-panel__top{padding-bottom:0}
  /* the keyboard is up: the header gives its room to the fields */
  .wl.is-kb .wl-panel__top{padding-top:14px;padding-bottom:6px}
  .wl.is-kb .wl-panel__top::before{top:5px}
  .wl.is-kb .wl-panel__top h2{font-size:17px}
  .wl.is-kb .wl-close{flex-basis:40px;width:40px;height:40px;margin-right:-8px}

  .wl-dock{--ctl:48px}
  .wl-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 14px}
  .wl-mains{grid-column:1/-1}
  .wl-mains__row{height:auto;gap:8px}
  .wl-chip{--chip:auto;flex:1 1 0;width:auto;height:auto;max-width:60px;aspect-ratio:1}
  .wl-field input{font-size:16px}
  .wl-msg{min-height:20px;margin:8px 0 4px}
  .wl-send{flex-direction:column;align-items:stretch;gap:16px;margin-top:4px}
  .wl-submit{width:100%;height:52px;font-size:13px}

  /* in the sheet the seal stands on top, the words under it, the two buttons full width */
  .wl-done{--seal:clamp(120px,22vh,160px);display:flex;flex-direction:column;align-items:center;gap:0;height:auto;padding:4px 0 4px;text-align:center}
  .wl-done__text{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:14px}
  .wl-done h2{font-size:clamp(24px,6.4vw,30px)}
  .wl-done__text>p{max-width:40ch;font-size:15px}
  .wl-done__actions{align-items:stretch;width:100%;margin-top:20px}
  .wl-done__actions .btn{height:50px}
}
/* a tablet's sheet is wider than six faces: they grow a little and the row spans it */
@media (min-width:561px) and (max-width:1024px){
  .wl-mains__row{justify-content:space-between}
  .wl-chip{max-width:84px}
}
@media (max-width:560px){
  .wl-fields{grid-template-columns:minmax(0,1fr)}
  /* a server message can run to two lines here: it wraps evenly and keeps its distance from the box */
  .wl-msg{margin-bottom:10px;text-wrap:pretty}
}

/* an upright screen would crop the picture down to one Hero: it becomes a band about two screens wide that stands on
   the ground just above the sign-up, the middle Heroes whole in it with the falling stars over them, and its painted
   night fades up into the page's own night behind the title and the countdown, with no edge between them. The title
   keeps a breath of sky under the nav (owner, 2026-10-07: "the text is kinda so up"). The band is at most 66 % of
   the sky, so on a short phone the Heroes shrink rather than reach up into the date line */
@media (orientation:portrait){
  .wl-top{--h1:clamp(28px,min(8.8vw,5.1vh),56px);padding-top:clamp(12px,(100svh - 480px) * .26,56px)}
  .wl-logo{width:clamp(170px,min(62vw,27vh),400px);filter:drop-shadow(0 2px 2px rgba(1,11,31,.7))}
  .wl-main{background:linear-gradient(180deg,var(--bfg-abyss) 0%,#030f22 26%,#0a1c30 52%,#10263a 100%)}
  .wl-art{grid-area:1/1/4/2;overflow:visible;background:none}
  .wl-art::after{display:none}
  .wl-art img{--band:min(118vw,66%);inset:auto;left:50%;bottom:calc(36px - var(--band) * .18);width:auto;height:var(--band);aspect-ratio:16/9;object-position:50% 50%;transform:translateX(-50%);animation:none;filter:brightness(.9);-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 10%,#000 24%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 10%,#000 24%,#000 86%,transparent 100%)}
  .js .wl-art img{animation:wl-show 0s 5s forwards}
  /* after the moment there is no ground to stand on: the Heroes stand at the foot of the screen */
  .wl.is-open .wl-art img{bottom:-6%}
  .wl.is-open .wl-top{grid-row:2;align-self:start;padding-bottom:0}
  .wl.is-open .wl-open__actions{margin-top:22px;padding-top:0}
}
@media (max-width:760px){
  body.wl{--nav:60px;--gut:20px}
  .wl-clock{gap:0 .42em}
  .wl-when{font-size:14px}
  /* the X logo alone (owner, 2026-10-07: no "Follow" beside it), with no frame, so it reads as X and never as a
     close; the target stays 44 px and the link's aria-label names it */
  .wl-nav__x>span{display:none}
  .wl .wl-nav__x.btn--ghost,.wl .wl-nav__x.btn--ghost:hover{width:44px;height:44px;margin-right:-10px;padding:0;justify-content:center;background:transparent;border-color:transparent}
  .wl-nav__x .wl-x{width:21px;height:21px;flex-basis:21px}
  .wl-open__actions{flex-direction:column;align-items:stretch;width:min(340px,100%)}
  .wl-open__actions .btn{justify-content:center}
}
@media (max-width:440px){
  .wl-panel{padding-left:18px;padding-right:18px}
  .wl-panel__top{margin:0 -18px;padding-left:18px;padding-right:18px}
  .wl-clock__unit>span{font-size:12px}
}
/* a phone on its side (wide and short; a phone standing up with its keyboard open is short but not wide): the
   title goes back to the nav, everything smaller, the reasons on one line */
@media (max-height:520px) and (min-width:560px) and (orientation:landscape){
  body.wl{--nav:52px}
  .wl-logo{display:none}
  .wl .brand span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .wl-top{--h1:clamp(24px,6.6vh,34px);padding-top:0}
  .wl-head h1,.wl-open__title{margin-top:0}
  .wl-clock{margin-top:4px}
  .wl-when{margin-top:4px;font-size:13px}
  .wl-pitch::before{display:none}
  .wl-why{font-size:19px}
  .wl-proof{margin-top:2px}
  .wl-cta{height:44px;margin-top:6px}
  .wl-dock{padding-top:4px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
}

/* a phone on its side, sheet up: the wide screen's one-row form, so the whole form fits a 375 px tall screen */
@media (max-width:1024px) and (max-height:560px) and (min-width:560px) and (orientation:landscape){
  .wl-panel{width:min(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right),820px);padding:0 22px calc(12px + env(safe-area-inset-bottom))}
  .wl-panel__top{margin:0 -22px;padding:18px 22px 8px}
  .wl-panel__top::before{top:7px}
  .wl-panel__top h2{font-size:19px}
  .wl .wl-close{flex-basis:40px;width:40px;height:40px;margin-right:-8px}
  .wl-dock{--ctl:44px}
  .wl-fields{grid-template-columns:auto minmax(0,1.3fr) minmax(0,1fr);gap:0 12px}
  .wl-mains{grid-column:auto}
  .wl-mains__row{height:var(--ctl);gap:5px}
  .wl-chip{--chip:40px;flex:0 0 var(--chip);width:var(--chip);height:var(--chip);max-width:none}
  .wl-msg{margin:6px 0 2px}
  .wl-send{flex-direction:row;align-items:center;gap:20px;margin-top:4px}
  .wl-submit{width:auto;min-width:170px;height:46px}
  /* the success on one row: the seal at its own size, the words taking what is left, the two buttons stacked */
  .wl-done{--seal:96px;flex-direction:row;align-items:center;gap:20px;text-align:left}
  .wl-done__seal{flex:0 0 var(--seal)}
  .wl-done__text{flex:1 1 auto;min-width:0;align-items:flex-start;margin-top:0}
  .wl-done h2{font-size:22px}
  .wl-done__text>p{margin-top:6px;font-size:14px;text-wrap:pretty}
  .wl-done__actions{flex:0 0 auto;flex-direction:column;width:auto;margin-top:0}
  .wl-done__actions .btn{height:44px;white-space:nowrap}
}
@media (max-width:700px) and (max-height:560px) and (min-width:560px) and (orientation:landscape){
  .wl-chip{--chip:34px}
  .wl-mains__row{gap:4px}
}
/* a short or narrow screen: the privacy note gets smaller type rather than scrolling */
@media (max-height:700px),(max-width:400px){
  .wl-dialog::before{margin:20px 20px 12px}
  .wl-dialog h2{margin:0 20px;font-size:19px}
  .wl-dialog__body{padding:2px 20px 0}
  .wl-dialog p{margin-top:6px;font-size:13px;line-height:1.5}
  .wl-dialog__foot{padding:14px 20px 18px}
  .wl-dialog .btn{padding:10px 20px}
}
@media (max-height:560px) and (orientation:landscape){
  .wl-dialog{width:min(760px,100% - 32px)}
}
@media (max-width:340px){
  .wl-dialog p{font-size:12.5px;line-height:1.45}
}
@media (max-width:350px){
  .wl-cta{padding:0 14px;font-size:12px;letter-spacing:.1em;white-space:nowrap}
}

@media (min-width:1600px){
  .wl-open__actions .btn{padding:18px 36px;font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .wl-art img,.js .wl-art img,.wl-clock b i.is-tick,.wl-done__seal img.is-in,.wl-done:not([hidden]),.wl-dialog[open]{animation:none}
  .js .wl-art img:not(.is-in){opacity:1}
  .wl-art,.wl-art img,.wl-top,.wl .wl-panel,.wl.is-sheet .wl-panel,.wl .wl-scrim,.wl.is-sheet .wl-scrim,.wl-chip,.wl-chip img,.wl-field input,.wl .wl-nav__x{transition:none}
  .wl-chip:hover img{transform:none}
}