/* Chartist Games holding page. No inline styles or scripts anywhere, so the Content-Security-Policy can stay strict. */
@font-face{font-family:"Slightly Eroded";src:url(fonts/SlightlyEroded.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Act of Rejection";src:url(fonts/ActOfRejection.woff2) format("woff2");font-display:swap}
@font-face{font-family:Barlow;font-weight:400;src:url(fonts/Barlow-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Space Mono";font-weight:700;src:url(fonts/SpaceMono-700.woff2) format("woff2");font-display:swap}

:root{
  --night:#0D0B0A; --line:#2C2724; --torch:#F05222; --ember:#BC3A00; --bone:#F2EEE8; --ash:#A39C95;
  --eroded:"Slightly Eroded",Impact,"Arial Narrow",sans-serif;
  --brush:"Act of Rejection","Slightly Eroded",Impact,sans-serif;
  --text:Barlow,"Helvetica Neue",Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.56,.64,1);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{min-height:100dvh;background:var(--night);color:var(--bone);font:400 17px/1.6 var(--text);overflow-x:clip;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--torch);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eroded{font-family:var(--eroded);font-weight:400;text-transform:uppercase;letter-spacing:.01em}
.brush{font-family:var(--brush);font-weight:400;-webkit-text-stroke:.09em var(--night);paint-order:stroke fill}

/* key art: the torch crowd, embers and firelight, fixed behind everything */
.art{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--night)}
.art .glow{position:absolute;inset:auto -10% -40% -10%;height:90%;background:radial-gradient(60% 60% at 50% 100%,#BC3A00aa,transparent 70%)}
.art canvas{position:absolute;inset:0;width:100%;height:100%}
.art::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 42%,#0D0B0Aee 0%,#0D0B0Ab3 45%,#0D0B0A33 80%),linear-gradient(transparent 70%,#0D0B0Acc)}
.crowd{position:absolute;left:-4vw;right:-4vw;bottom:-10vh;height:88%}
.crowd img{position:absolute;bottom:0;width:auto;transform-origin:50% 100%;animation:rise 1.8s var(--ease) both,sway 6s ease-in-out infinite alternate}
.crowd .t1{left:3%;height:56%;animation-delay:.5s,-1s}
.crowd .t2{left:17%;height:74%;animation-delay:.3s,-3s}
.crowd .t3{left:32%;height:62%;animation-delay:.4s,-2s}
.crowd .t4{left:48%;height:92%;animation-delay:.1s,-4s}
.crowd .t5{left:63%;height:70%;animation-delay:.2s,-5s}
.crowd .t6{left:78%;height:84%;animation-delay:.35s,-2.5s}
.crowd .t7{left:92%;height:60%;animation-delay:.45s,-1.5s}
@keyframes rise{from{transform:translateY(60%)}to{transform:none}}
@keyframes sway{from{rotate:-2deg}to{rotate:2.5deg}}

/* layout */
.page{min-height:100dvh;display:grid;grid-template-rows:1fr auto}
.title{align-self:center;justify-self:center;width:min(980px,100%);padding:48px max(16px,4vw);display:grid;justify-items:center;text-align:center;gap:26px}
.title > img{height:clamp(60px,8vw,104px);width:auto}
.title h1{display:grid;justify-items:center;line-height:.86;font-weight:400}
.title h1 .eroded{font-size:clamp(44px,5.6vw,92px)}
.title h1 .brush{font-size:clamp(46px,5.8vw,96px);color:var(--torch);rotate:-4deg;margin-top:-.1em}
.title h1 span{animation:up 1s var(--ease) both}
.title h1 .brush{animation-delay:.18s}
@keyframes up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.tip{max-width:78ch;min-height:1.6em;color:#d4cdc5;font-size:16px;text-wrap:balance;transition:opacity .4s}

/* sign-up */
.panel{width:min(560px,100%);display:grid;gap:12px;padding:22px;text-align:left;background:#0D0B0Ad9;box-shadow:inset 0 0 0 1px #ffffff14;border-radius:2px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
form{display:grid;gap:8px}
label{font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.row{display:flex;gap:8px}
input[type=email]{flex:1;min-width:0;min-height:52px;background:var(--night);border:1px solid #4a433e;border-radius:2px;padding:14px 16px;color:var(--bone);font:400 17px var(--text)}
input[type=email]::placeholder{color:#8a827b}
input[type=email]:focus{outline:none;border-color:var(--torch);box-shadow:0 0 0 3px #F0522233}
input[aria-invalid=true]{border-color:#ff8a63}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:13px 20px;border:0;border-radius:2px;background:var(--torch);color:var(--night);cursor:pointer;font:700 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:transform .3s var(--spring),background-color .2s}
.btn:hover{background:#ff6a3a}
.btn:active{transform:translateY(1px) scale(.98)}
.btn[disabled]{cursor:progress;opacity:.8}
.consent{font-size:14px;line-height:1.5;color:#c9c2bb}
.consent a{color:var(--bone);text-decoration-color:var(--torch);text-underline-offset:3px}
.msg{font-size:14px;color:var(--ash);min-height:1.5em}
.msg[data-tone=error]{color:#ff8a63}
.msg[data-tone=ok]{color:var(--torch)}

/* footer: links, then the legal disclosure line */
footer{display:grid;justify-items:center;gap:10px;padding:20px max(16px,4vw) 28px;text-align:center}
footer nav{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;font-size:15px}
footer nav a{color:var(--bone);text-decoration-color:var(--torch);text-underline-offset:4px}
footer small{font-size:12.5px;color:#9a928b;max-width:90ch}

/* text pages (privacy notice, unsubscribe, 404) */
.doc{max-width:72ch;margin:0 auto;padding:40px max(16px,4vw) 80px}
.doc header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:48px}
.doc header img{height:44px;width:auto}
.doc h1{font:400 clamp(40px,6vw,72px)/.9 var(--eroded);text-transform:uppercase;margin-bottom:12px}
.doc h2{font:400 28px/1.1 var(--eroded);text-transform:uppercase;margin:40px 0 10px;color:var(--torch)}
.doc p,.doc li{color:#ddd6cf;margin-bottom:12px}
.doc ul{padding-left:22px}
.doc a{color:var(--bone);text-decoration-color:var(--torch);text-underline-offset:3px}
.doc .meta{color:var(--ash);font:700 12px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.doc .panel{margin-top:24px}
.back{font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}

@media (max-width:640px){.row{flex-direction:column}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (prefers-reduced-transparency:reduce){.panel{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--night)}}