/* Apache-2.0, see fonts/permanent-marker-LICENSE.txt */
@font-face{font-family:"Permanent Marker";src:url(fonts/permanent-marker.woff2) format("woff2");font-display:swap}

:root{
  --ink:#1F2A44;--dusk:#34497A;--red:#D2433A;--pad:#F2D16B;--paper:#F7F3EA;
  --muted:rgba(247,243,234,.74);
  --marker:"Permanent Marker","Segoe Print","Bradley Hand",cursive;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--ink);overflow-x:hidden;overflow-x:clip}
body{
  margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  color:var(--paper);font:400 1rem/1.55 var(--sans);overflow-x:hidden;overflow-x:clip;
  background:
    radial-gradient(60rem 30rem at 50% 115%,rgba(210,67,58,.22),transparent 70%),
    linear-gradient(var(--ink),var(--dusk));
}
a{color:var(--paper);text-decoration-color:rgba(242,209,107,.7);text-underline-offset:.2em}
a:hover{color:var(--pad)}
:focus-visible{outline:3px solid var(--pad);outline-offset:3px}

.stage{flex:1;width:min(42rem,100% - 2rem);margin:0 auto;padding:clamp(2.5rem,9vh,6rem) 0 2rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}

/* Logo + ember glow parked on the flame (flame sits ~94% / 51% of the image). */
.logo{position:relative;margin:0;width:min(100%,40rem);line-height:0}
.logo img{position:relative;z-index:1;width:100%;height:auto;filter:drop-shadow(0 .9rem 1.4rem rgba(10,14,28,.45))}
.logo::before,.logo::after{content:"";position:absolute;pointer-events:none;left:93%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.logo::before{width:50%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(242,209,107,.45),rgba(210,67,58,.3) 45%,transparent);
  animation:flicker 2.6s ease-in-out infinite}
.logo::after{z-index:2;width:.3rem;height:.3rem;background:var(--pad);
  box-shadow:-.9rem .4rem 0 -.05rem var(--red),.7rem .9rem 0 -.08rem var(--pad),-.3rem 1.4rem 0 -.1rem color-mix(in srgb,var(--pad),var(--red));
  animation:embers 3.2s ease-out infinite}
@keyframes flicker{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}35%{opacity:1;transform:translate(-50%,-52%) scale(1.08)}60%{opacity:.85;transform:translate(-50%,-50%) scale(.96)}}
@keyframes embers{0%{opacity:0;transform:translate(-50%,0)}15%{opacity:1}100%{opacity:0;transform:translate(-30%,-5.5rem)}}

.tag{font:400 clamp(2rem,8.5vw,3.4rem)/1.1 var(--marker);margin:clamp(1.25rem,4vh,2.25rem) 0 0;letter-spacing:.01em;
  text-shadow:0 .15rem 0 rgba(10,14,28,.35)}
.tag::after{content:"";display:block;width:62%;height:.32rem;margin:.35rem auto 0;border-radius:.3rem;background:var(--red);transform:rotate(-1.2deg)}
.soon{margin:1rem 0 0;color:var(--muted);font-size:1rem}

.signup{width:min(100%,30rem);margin-top:clamp(1.75rem,5vh,2.75rem)}
.row{display:flex;flex-wrap:wrap;gap:.6rem}
.row input{flex:1 1 14rem;min-width:0;min-height:3.1rem;padding:.75rem 1rem;font:inherit;font-size:1rem;color:var(--paper);
  background:rgba(14,20,36,.5);border:2px solid rgba(247,243,234,.5);border-radius:.6rem}
.row input::placeholder{color:rgba(247,243,234,.55)}
.row input:hover{border-color:rgba(247,243,234,.6)}
.row input:focus-visible{outline:none;border-color:var(--pad);box-shadow:0 0 0 3px rgba(242,209,107,.35)}
.row button{flex:1 1 auto;min-height:3.1rem;padding:.7rem 1.4rem;font:400 1.15rem/1 var(--marker);letter-spacing:.02em;
  color:var(--paper);background:#B9362E;border:0;border-radius:.6rem;cursor:pointer;
  box-shadow:0 .25rem 0 #7f2620;transition:transform .12s,box-shadow .12s,background .12s}
.row button:hover{background:#A82F28;box-shadow:0 .25rem 0 #7f2620,0 0 0 2px var(--pad)}
.row button:active{transform:translateY(.2rem);box-shadow:0 .05rem 0 #7f2620}
.row button[aria-disabled=true]{opacity:.7;cursor:progress}
.status{min-height:1.5em;margin:.6rem 0 0;font-weight:600}
.status[data-kind=ok],.status[data-kind=err]{color:var(--pad)}
.consent{margin:0;font-size:.85rem;color:var(--muted)}

.foot{padding:1.25rem 1rem 1.75rem;text-align:center;font-size:.85rem;color:var(--muted)}
.foot a{color:var(--muted)}

.sr-only,.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hp{left:-9999px}

/* Privacy page */
.doc{flex:1;width:min(42rem,100% - 2rem);margin:0 auto;padding:2.5rem 0 3rem}
.doc .back img{width:9rem;height:auto}
.doc h1{font:400 clamp(2rem,7vw,2.8rem)/1.15 var(--marker);margin:1.5rem 0 .5rem}
.doc h2{font:400 1.35rem/1.3 var(--marker);color:var(--pad);margin:2rem 0 .4rem}
.doc p,.doc li{color:rgba(247,243,234,.88)}

@media (prefers-reduced-motion:reduce){
  .logo::before,.logo::after{animation:none}
  .logo::after{display:none}
  .row button{transition:none}
}