:root{
  --bg:#0a0a0c;
  --bg-2:#101013;
  --card:#16161a;
  --ink:#f2efea;
  --bone:#ecebe6;
  --muted:#9b9aa3;
  --faint:#5d5c64;
  --line:rgba(255,255,255,.09);
  --red:#e3192b;
  --red-hot:#ff2a3a;
  --red-deep:#6e0a13;
  --r-xs:7px; --r-sm:10px; --r-md:16px; --r-lg:24px;
  --pad:clamp(16px,4vw,48px);
  --max:1320px;
  --display:"Oswald","Arial Narrow",sans-serif;
  --goth:"Pirata One",serif;
  --body:"Space Grotesk",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-color:var(--red) var(--bg);overflow-x:clip}
body{background:var(--bg);color:var(--ink);font:16px/1.6 var(--body);overflow-x:clip;-webkit-font-smoothing:antialiased}
body.is-loading{overflow:hidden}
body::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:500;opacity:.07;animation:grain 1s steps(6) infinite;background:url("assets/grain.png") repeat;background-size:256px 256px;image-rendering:pixelated}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--red);border-radius:100px;border:3px solid var(--bg)}
::selection{background:var(--red);color:#fff}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.red{color:var(--red-hot)}
.muted{color:var(--muted)}
.center{text-align:center}
.h2{font:400 clamp(54px,7.4vw,116px)/1.0 var(--goth);letter-spacing:.005em}
.h2.center{margin-inline:auto;max-width:14ch}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.04em}
.split .w > span{display:inline-block;transform:translateY(105%)}

/* ===== intro ===== */
.intro{position:fixed;inset:0;z-index:1000;pointer-events:none}
.intro-half{position:absolute;left:0;right:0;height:50.5%;background:#000}
.intro-half.top{top:0}.intro-half.bottom{bottom:0}
.intro-core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px}
.intro-vid{width:min(440px,70vw);height:auto;display:block;mix-blend-mode:screen}
.intro-text{font:400 34px/1 var(--goth);color:#cfcdc8;opacity:0;animation:fadein .6s .9s forwards}
@keyframes fadein{to{opacity:1}}
.intro.done .intro-core{opacity:0;transition:opacity .35s}
.intro.done .top{transform:translateY(-100%);transition:transform 1s .25s cubic-bezier(.76,0,.24,1)}
.intro.done .bottom{transform:translateY(100%);transition:transform 1s .25s cubic-bezier(.76,0,.24,1)}

/* ===== cursor: plain red arrow ===== */
html,body,a,button,label,input,.card{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M4 2v19l5-4.6 3.6 7.6 3.4-1.6-3.6-7.4H19z' fill='%23ff2a3a' stroke='%230a0a0c' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2,auto}
input:not([type=range]){cursor:text}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 20px;
  border-radius:var(--r-sm);font:700 15px/1 var(--body);transition:transform .2s var(--ease),background .2s,box-shadow .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-lg{height:58px;padding:0 30px;font-size:17px}
.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 30px -10px rgba(227,25,43,.85),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-red:hover{background:var(--red-hot);box-shadow:0 16px 46px -10px rgba(255,42,58,1),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-ghost{border:1px solid rgba(255,255,255,.24);background:rgba(10,10,12,.35);backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

/* ===== nav ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s,border-color .3s,transform .4s var(--ease);border-bottom:1px solid transparent}
.nav.solid{background:rgba(10,10,12,.72);backdrop-filter:blur(18px);border-color:var(--line)}
.nav.hide{transform:translateY(-100%)}
.nav-in{display:flex;align-items:center;gap:32px;height:76px}
.brand{display:flex;align-items:center;gap:10px;font:400 30px/1 var(--goth)}
.mark{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,42,58,.55),0 0 18px rgba(255,42,58,.35)}
.links{display:flex;gap:30px;margin-left:auto;font-weight:500;font-size:15px}
.links a{position:relative;color:#d9d7d2}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--red-hot);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.links a:hover::after{transform:scaleX(1)}

/* ===== hero ===== */
.hero{position:relative;height:100svh;min-height:680px;max-height:1020px;overflow:hidden;background:var(--bg)}
.hero-art{position:absolute;top:0;bottom:0;right:0;width:min(74%,1440px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%),linear-gradient(180deg,transparent 0%,#000 14%,#000 70%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,#000 34%),linear-gradient(180deg,transparent 0%,#000 14%,#000 70%,transparent 100%);mask-composite:intersect}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:58% 30%;transform:scale(1.03);will-change:transform}
.embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;z-index:2}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(50% 60% at 18% 55%,rgba(227,25,43,.16),transparent 70%)}
.hero-in{position:relative;z-index:3;height:100%;display:flex;align-items:center}
.hero-copy{max-width:600px;padding-top:40px}
.hero-kicker{font:700 14px/1 var(--mono);letter-spacing:.32em;color:var(--red-hot);margin-bottom:10px}
.hero-title{font:400 clamp(110px,13.5vw,220px)/.84 var(--goth);margin-left:-.04em;filter:drop-shadow(0 0 34px rgba(227,25,43,.42)) drop-shadow(0 10px 26px rgba(0,0,0,.65))}
.ht-line{display:block;overflow:hidden;padding:.04em 0 .18em;margin-bottom:-.08em}
.ht-w{position:relative;display:inline-block;color:var(--bone)}
.ht-w.red{color:var(--red-hot)}
.ht-w::before,.ht-w::after{content:attr(data-text);position:absolute;inset:0;opacity:0;pointer-events:none}
.ht-w::before{color:#00e5ff;transform:translate(-4px,0);mix-blend-mode:screen}
.ht-w::after{color:var(--red-hot);transform:translate(4px,0);mix-blend-mode:screen}
.hero-title.glitch .ht-w::before,.hero-title.glitch .ht-w::after{opacity:.7;animation:glit .3s steps(2) 2}
@keyframes glit{0%{clip-path:inset(10% 0 60% 0)}50%{clip-path:inset(55% 0 10% 0)}100%{clip-path:inset(30% 0 40% 0)}}
.hero-sub{margin-top:18px;font:500 clamp(20px,1.9vw,26px)/1.3 var(--body);color:#e6e3dd}
.hero-sub em{font-style:normal;color:#fff;font-weight:700}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ca{display:flex;align-items:center;gap:14px;margin-top:18px;padding:10px 12px 10px 14px;border-radius:var(--r-sm);
  background:rgba(0,0,0,.5);border:1px solid var(--line);backdrop-filter:blur(10px);font:400 14px/1 var(--mono);max-width:min(100%,calc(100vw - 32px))}
.ca-label{flex-shrink:0;color:var(--red-hot);font-weight:700}
.ca-val{min-width:0;flex:1 1 auto;color:#cfcdc8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-copy{flex-shrink:0;padding:7px 10px;border-radius:var(--r-xs);background:rgba(255,255,255,.09);font-weight:700}
.ca:hover .ca-copy{background:var(--red)}

/* ===== report ===== */
.report{padding-top:clamp(70px,9vw,120px);padding-bottom:clamp(60px,8vw,110px)}
.report-title{font:400 clamp(30px,3vw,44px)/1 var(--goth);color:#bdbbb5;margin-bottom:28px}
.report-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(180deg,#121215,#0c0c0f)}
.stat{padding:30px 28px 26px;border-right:1px solid var(--line);position:relative}
.stat:last-child{border-right:0}
.stat p{margin-top:10px;font-weight:600;color:#bdbbb5;text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.roll{height:1em;overflow:hidden;font:600 clamp(70px,8vw,128px)/1 var(--display);font-variant-numeric:tabular-nums}
.roll-col{display:flex;flex-direction:column}
.roll-col span{height:1em;display:block}
.stat-red{background:linear-gradient(160deg,var(--red),var(--red-deep))}
.stat-red p{color:#ffd9dc}

/* ===== lore ===== */
.lore{position:relative;padding:clamp(130px,15vw,220px) 0;overflow:hidden;text-align:center}
.lore-bg{position:absolute;top:0;bottom:0;left:50%;width:min(100%,1440px);transform:translateX(-50%);opacity:.5;
  -webkit-mask-image:radial-gradient(60% 55% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(60% 55% at 50% 50%,#000 30%,transparent 100%)}
.lore-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.lore-in{position:relative;z-index:2}
.lore-title{font:400 clamp(60px,8.4vw,136px)/.98 var(--goth);max-width:15ch;margin:0 auto;filter:drop-shadow(0 8px 30px rgba(0,0,0,.85))}
.lore-text{margin:28px auto 0;max-width:560px;color:#dad8d2;font-size:19px}
.rules3{display:grid;grid-template-columns:repeat(3,1fr);max-width:900px;margin:56px auto 0;border-block:1px solid rgba(255,255,255,.14)}
.rules3 .r{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 12px;border-right:1px solid rgba(255,255,255,.14)}
.rules3 .r:last-child{border-right:0}
.rules3 b{font:400 46px/1 var(--goth);color:var(--red-hot)}
.rules3 span{font:600 clamp(22px,2.2vw,30px)/1 var(--display);text-transform:uppercase;letter-spacing:.03em}

/* ===== signs ===== */
.signs{position:relative;padding:clamp(100px,12vw,170px) 0;background:radial-gradient(50% 60% at 15% 40%,rgba(227,25,43,.13),transparent 70%)}
.signs-in{display:grid;grid-template-columns:.9fr 1.4fr;gap:clamp(36px,5vw,80px);align-items:start}
.signs-side{position:sticky;top:110px}
.signs-side .h2{font-size:clamp(52px,5.6vw,92px)}
.signs-side .muted{margin-top:18px;font-size:18px;max-width:380px}
.meter{margin-top:34px;padding:22px 22px 24px;border-radius:var(--r-lg);background:linear-gradient(180deg,#141417,#0d0d10);border:1px solid var(--line)}
.meter-top{display:flex;justify-content:space-between;align-items:baseline;font:600 14px/1 var(--display);text-transform:uppercase;letter-spacing:.08em;color:#bdbbb5}
.meter-top b{font:600 22px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.meter-bar{margin-top:16px;height:12px;border-radius:6px;background:#232327;overflow:hidden}
.meter-bar i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#7d0c16,var(--red-hot));box-shadow:0 0 20px rgba(255,42,58,.7);transition:width .6s var(--ease)}
.verdict{margin-top:18px;font:400 clamp(30px,2.6vw,40px)/1.05 var(--goth);color:var(--ink);transition:color .3s}
.verdict.hot{color:var(--red-hot)}
.sign-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.sign{position:relative;display:flex;flex-direction:column;text-align:left;border-radius:var(--r-lg);overflow:hidden;background:var(--card);border:1px solid var(--line);
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.sign:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.2)}
.sign-img{display:block;overflow:hidden;aspect-ratio:16/9}
.sign-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.55) brightness(.75);transition:filter .4s,transform .6s var(--ease)}
.sign:hover .sign-img img{filter:none;transform:scale(1.05)}
.sign-text{display:block;padding:18px 20px 22px;font:600 clamp(20px,1.7vw,24px)/1.15 var(--display);text-transform:uppercase;letter-spacing:.02em}
.stamp{position:absolute;top:16px;right:16px;padding:8px 12px;border:3px solid var(--red-hot);border-radius:var(--r-xs);color:var(--red-hot);background:rgba(10,10,12,.7);
  font:400 26px/1 var(--goth);transform:rotate(-12deg) scale(1.6);opacity:0;transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.sign[aria-pressed="true"]{border-color:var(--red-hot);box-shadow:0 20px 50px -20px rgba(255,42,58,.7)}
.sign[aria-pressed="true"] .sign-img img{filter:none}
.sign[aria-pressed="true"] .stamp{opacity:1;transform:rotate(-12deg) scale(1)}

/* ===== graves ===== */
.graves{position:relative;padding:clamp(100px,12vw,170px) 0 clamp(120px,14vw,200px);overflow:hidden;background:
  radial-gradient(55% 45% at 50% 18%,rgba(227,25,43,.22),transparent 70%),linear-gradient(180deg,var(--bg),#0e0c0f 50%,#08080a)}
.graves::before{content:"";position:absolute;left:50%;top:6%;width:min(520px,70vw);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at 40% 38%,#ff6a6a,#c0141f 45%,#5d0810 80%);opacity:.22;filter:blur(2px);box-shadow:0 0 160px 40px rgba(227,25,43,.25)}
.graves .wrap{position:relative;z-index:2}
.grave-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:64px;align-items:end}
.grave{position:relative;padding:58px 22px 34px;text-align:center;background:linear-gradient(180deg,#45454c,#26262b 55%,#1a1a1e);
  border-radius:130px 130px var(--r-sm) var(--r-sm);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 2px 0 rgba(255,255,255,.14),inset 0 -30px 40px rgba(0,0,0,.4),0 30px 40px -20px #000;transition:transform .4s var(--ease)}
.grave::before{content:"";position:absolute;inset:10px 10px auto;height:calc(100% - 20px);border-radius:120px 120px 6px 6px;border:1px solid rgba(255,255,255,.06);pointer-events:none}
.grave:nth-child(1){--rot:-2deg}.grave:nth-child(2){--rot:2.5deg;margin-bottom:18px}.grave:nth-child(3){--rot:-1.5deg}.grave:nth-child(4){--rot:1.5deg;margin-bottom:10px}
.grave{transform:rotate(var(--rot))}
.grave:hover{transform:translateY(-12px) rotate(0)}
.rip{display:block;font:400 28px/1 var(--goth);color:#9a99a1;margin-bottom:14px}
.grave h3{font:600 30px/1.05 var(--display);text-transform:uppercase;letter-spacing:.02em}
.grave p{margin-top:10px;color:#b7b5af;font-size:15px}
@keyframes drift{from{transform:translateX(-5%)}to{transform:translateX(5%)}}

/* ===== wall ===== */
.wall-sec{padding:clamp(90px,10vw,140px) 0 clamp(60px,8vw,100px)}
.wall-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.wall-head p{max-width:360px}
.wall{position:relative;max-width:var(--max);height:clamp(560px,54vw,740px);margin:44px auto 0;border-radius:var(--r-lg);
  background:radial-gradient(60% 50% at 50% 40%,rgba(227,25,43,.12),transparent 70%),repeating-linear-gradient(0deg,transparent 0 47px,rgba(255,255,255,.03) 47px 48px),repeating-linear-gradient(90deg,transparent 0 47px,rgba(255,255,255,.03) 47px 48px),#0d0d10;border:1px solid var(--line);overflow:hidden}
.card{position:absolute;left:var(--x);top:var(--y);width:28%;padding:10px 10px 14px;background:#ecebe6;border-radius:var(--r-sm);
  transform:rotate(var(--r));box-shadow:0 30px 50px -20px rgba(0,0,0,.9);user-select:none;touch-action:none;transition:box-shadow .3s}
.card::before{content:"";position:absolute;top:-12px;left:50%;width:84px;height:24px;margin-left:-42px;background:rgba(227,25,43,.75);border-radius:3px;transform:rotate(-3deg)}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:6px;pointer-events:none}
.card figcaption{margin-top:10px;font:700 15px/1.25 var(--body);color:#141414}
.card.dragging{box-shadow:0 50px 80px -20px rgba(0,0,0,1)}

/* ===== buy ===== */
.buy{padding-top:clamp(90px,11vw,150px);padding-bottom:clamp(90px,11vw,150px)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.step{position:relative;overflow:hidden;padding:34px 28px 34px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);transition:transform .35s var(--ease),border-color .3s}
.step:hover{transform:translateY(-8px);border-color:rgba(255,42,58,.5)}
.step-n{display:block;font:400 96px/.9 var(--goth);color:var(--red-hot)}
.step h3{margin-top:16px;font:600 30px/1.05 var(--display);text-transform:uppercase;letter-spacing:.02em}
.step p{margin-top:10px;color:#bdbbb5}
.step-red{background:linear-gradient(160deg,var(--red),var(--red-deep));border-color:transparent;box-shadow:0 30px 70px -25px rgba(227,25,43,.75)}
.step-red .step-n{color:#0a0a0c}.step-red p{color:#ffe3e5}

/* ===== final ===== */
.final{position:relative;min-height:min(100svh,900px);display:flex;align-items:center;overflow:hidden}
.final-art{position:absolute;top:0;bottom:0;left:50%;width:min(100%,1440px);transform:translateX(-50%);overflow:hidden}
.final-img{width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.final-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,12,.92),rgba(10,10,12,.5) 50%,rgba(10,10,12,.1)),linear-gradient(180deg,var(--bg),transparent 18%,transparent 78%,var(--bg))}
.final-in{position:relative;z-index:2;width:100%}
.final-kicker{font:500 clamp(20px,2vw,26px)/1.3 var(--body);max-width:520px;color:#e6e3dd}
.final-mega{display:flex;flex-wrap:wrap;gap:0 .22em;margin-top:6px;font:400 clamp(120px,14vw,240px)/.9 var(--goth)}
.final-mega span{display:block;overflow:hidden;padding-bottom:.2em}
.final-mega{filter:drop-shadow(0 0 34px rgba(255,42,58,.4)) drop-shadow(0 10px 26px rgba(0,0,0,.6))}

/* ===== footer ===== */

/* toast */
.toast{position:fixed;left:50%;bottom:28px;z-index:950;transform:translate(-50%,30px);opacity:0;pointer-events:none;padding:14px 18px;border-radius:var(--r-sm);background:var(--bone);color:#111;font-weight:700;transition:.35s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* reveal base */
.reveal{opacity:0;transform:translateY(34px)}
.h-in{opacity:0;transform:translateY(30px)}
.ht-w{transform:translateY(105%)}
.final-mega span > i{display:block;font-style:normal;transform:translateY(105%)}

/* ===== responsive ===== */
@media (max-width:1024px){
  .links{display:none}
  .nav-in .btn{margin-left:auto}
  .grave-row{grid-template-columns:repeat(2,1fr);row-gap:30px}
  .report-grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:860px){
  .lore-in{grid-template-columns:1fr}
  .signs-in{grid-template-columns:1fr}
  .signs-side{position:static}
  .steps{grid-template-columns:1fr}
  .wall-head{flex-direction:column;align-items:flex-start}
  .wall{height:auto;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:28px var(--pad);border-radius:0;border-inline:0}
  .card{position:relative;left:auto;top:auto;flex:none;width:78vw;scroll-snap-align:center}
  }
@media (max-width:560px){
  .nav-in{height:64px}
  .brand{font-size:26px}
  .nav-in .btn{height:40px;padding:0 14px;font-size:14px}
  .hero-art img{object-position:60% 18%}
  .hero-sub{font-size:21px}
  .btn-lg{height:52px;padding:0 20px;font-size:16px}
  .grave-row{gap:14px}
  .sign-grid{grid-template-columns:1fr}
  .grave{padding:42px 12px 24px}
  .grave h3{font-size:22px}
  .grave p{font-size:13px}
  .ca{font-size:12px;gap:10px}
  .final-mega{font-size:24vw}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.h-in{opacity:1!important;transform:none!important}
  .ht-w,.split .w > span,.final-mega span > i{transform:none!important}
  .intro{display:none}
}

/* wide screens: art stays near native size and melts into the page instead of stretching */
@media (min-width:1441px){
}
/* smooth seams between sections */
.graves{background:radial-gradient(55% 45% at 50% 18%,rgba(227,25,43,.22),transparent 70%),linear-gradient(180deg,var(--bg),#0e0c10 45%,var(--bg))}

/* every big image fades in and out vertically, wide screens also fade at the sides */
.final-art{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 80%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 80%,transparent 100%)}
@media (min-width:1441px){
  .final-art{
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 80%,transparent 100%),linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 80%,transparent 100%),linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
}
.final-scrim{background:linear-gradient(90deg,rgba(10,10,12,.92),rgba(10,10,12,.45) 50%,rgba(10,10,12,.05))!important}

@media (max-width:860px){
  .hero{height:auto;max-height:none;min-height:100svh}
  .hero-art{left:0;width:100%;height:62%;bottom:auto;
    -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
  .hero-in{align-items:flex-end;min-height:100svh;padding-bottom:110px}
  .hero-copy{padding-top:0}
  .rules3{grid-template-columns:1fr}
  .rules3 .r{border-right:0;border-bottom:1px solid rgba(255,255,255,.14);flex-direction:row;justify-content:center;gap:16px}
  .rules3 .r:last-child{border-bottom:0}
}
@media (max-width:560px){
  .hero-title{font-size:30vw}
  .hero-art img{object-position:60% 20%}
}

/* section glows fade in and out vertically so no section starts with a hard edge */
.graves,.signs{background:var(--bg)!important;isolation:isolate}
.graves::after,.signs::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 28%,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 28%,#000 72%,transparent 100%)}
.graves::after{background:radial-gradient(55% 45% at 50% 34%,rgba(227,25,43,.22),transparent 70%),linear-gradient(180deg,var(--bg),#0e0c10 50%,var(--bg))}
.signs::after{background:radial-gradient(50% 55% at 15% 50%,rgba(227,25,43,.13),transparent 70%)}
.graves::before{top:12%;-webkit-mask-image:radial-gradient(circle,#000 55%,transparent 72%);mask-image:radial-gradient(circle,#000 55%,transparent 72%)}

/* smoother, eased dark ramps to avoid visible banding */
.lore-bg{-webkit-mask-image:radial-gradient(closest-side at 50% 50%,#000 30%,rgba(0,0,0,.82) 48%,rgba(0,0,0,.55) 64%,rgba(0,0,0,.26) 80%,rgba(0,0,0,.07) 92%,transparent 100%);mask-image:radial-gradient(closest-side at 50% 50%,#000 30%,rgba(0,0,0,.82) 48%,rgba(0,0,0,.55) 64%,rgba(0,0,0,.26) 80%,rgba(0,0,0,.07) 92%,transparent 100%)}

/* ===== crows and sound ===== */
.hero-crows{position:absolute;left:0;top:0;z-index:1;width:min(60vw,1000px);height:min(72%,680px);pointer-events:none;isolation:isolate;
  background:radial-gradient(58% 64% at 34% 40%,rgba(150,16,26,.62),rgba(80,8,14,.42) 46%,rgba(10,10,12,0) 78%),var(--bg);
  -webkit-mask-image:linear-gradient(90deg,#000 45%,rgba(0,0,0,.6) 70%,transparent 100%),linear-gradient(180deg,#000 40%,rgba(0,0,0,.55) 70%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 45%,rgba(0,0,0,.6) 70%,transparent 100%),linear-gradient(180deg,#000 40%,rgba(0,0,0,.55) 70%,transparent 100%);mask-composite:intersect;
  opacity:0;transition:opacity 1.6s var(--ease)}
.hero-crows.ready{opacity:1}
.crow-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;mix-blend-mode:multiply}
.sound{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.18);color:#d9d7d2;transition:background .2s,color .2s,border-color .2s}
.sound svg{width:22px;height:22px}
.sound .wave{display:none}
.sound[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.sound[aria-pressed="true"] .wave{display:block}
.sound[aria-pressed="true"] .mute{display:none}
.links + .sound{margin-left:6px}
@media (max-width:1024px){ .sound{margin-left:auto} .nav-in .btn{margin-left:0} }
@media (max-width:860px){ .hero-crows{display:none} }
.sound.loading svg{animation:pulse-op 1s ease-in-out infinite}
@keyframes pulse-op{50%{opacity:.35}}

.final .hero-cta{margin-top:18px}

/* ===== footer ===== */
.foot{position:relative;border-top:1px solid var(--line);padding:56px 0;background:#050506}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(32px,4vw,64px)}
.foot-tag{margin-top:16px;color:#bdbbb5;max-width:340px}
.foot-ca{margin-top:22px}
.socials{display:flex;gap:10px;margin-top:22px}
.soc{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.16);color:#d9d7d2;transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease)}
.soc svg{width:20px;height:20px}
.soc:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-3px)}
.foot-col{display:flex;flex-direction:column;gap:12px}
.foot-col h4{font:600 14px/1 var(--display);text-transform:uppercase;letter-spacing:.14em;color:var(--red-hot);margin-bottom:8px}
.foot-col a{color:#d9d7d2;width:max-content;position:relative}
.foot-col a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--red-hot);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.foot-col a:hover::after{transform:scaleX(1)}
.facts{display:flex;flex-direction:column;gap:10px}
.facts div{display:flex;justify-content:space-between;gap:16px}
.facts dt{color:var(--muted)}
.facts dd{color:var(--ink);font-weight:500}
.foot-mega{margin-top:clamp(50px,6vw,80px);font:400 clamp(90px,16vw,280px)/.85 var(--goth);text-align:center;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(255,42,58,.28);user-select:none}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--faint)}
.foot-bottom .disclaimer{max-width:620px;text-align:center}
.to-top{color:#d9d7d2;white-space:nowrap}
.to-top:hover{color:var(--red-hot)}
@media (max-width:1024px){ .foot-top{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .foot-top{grid-template-columns:1fr} .foot-bottom{flex-direction:column;align-items:flex-start} .foot-bottom .disclaimer{text-align:left} }
.brand span{white-space:nowrap}
@media (max-width:560px){ .nav-in{gap:10px} .brand{font-size:22px} .brand .mark{width:34px;height:34px} .sound{width:38px;height:38px} }

/* fades live in the image masks only, no translucent overlay layers (they band in Chrome) */
.lore-bg{opacity:.55;
  -webkit-mask-image:radial-gradient(closest-side at 50% 50%,#000 30%,rgba(0,0,0,.82) 48%,rgba(0,0,0,.55) 64%,rgba(0,0,0,.26) 80%,rgba(0,0,0,.07) 92%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(closest-side at 50% 50%,#000 30%,rgba(0,0,0,.82) 48%,rgba(0,0,0,.55) 64%,rgba(0,0,0,.26) 80%,rgba(0,0,0,.07) 92%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
  mask-composite:intersect}
.final-scrim{display:none!important}
.final-art{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.5) 30%,#000 62%),linear-gradient(180deg,transparent 0%,#000 16%,#000 80%,transparent 100%)!important;-webkit-mask-composite:source-in!important;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.5) 30%,#000 62%),linear-gradient(180deg,transparent 0%,#000 16%,#000 80%,transparent 100%)!important;mask-composite:intersect!important}
@media (min-width:1441px){
  .final-art{-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 10%,rgba(0,0,0,.5) 32%,#000 62%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 16%,#000 80%,transparent 100%)!important;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 10%,rgba(0,0,0,.5) 32%,#000 62%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 16%,#000 80%,transparent 100%)!important}
}
.final-kicker,.final-mega,.final .hero-cta{position:relative;text-shadow:0 2px 18px rgba(0,0,0,.9)}
.foot-top{align-items:start}

/* ===== centered layout ===== */
.report{text-align:center}
.report-title{margin-bottom:28px}
.stat{display:flex;flex-direction:column;align-items:center;text-align:center}
.roll{margin:0 auto}
.signs-in{grid-template-columns:1fr;justify-items:center;text-align:center}
.signs-side{position:static;max-width:640px;display:flex;flex-direction:column;align-items:center}
.signs-side .muted{margin-left:auto;margin-right:auto}
.meter{width:100%;max-width:520px}
.sign-grid{grid-template-columns:repeat(3,1fr);width:100%;margin-top:12px}
.sign-text{text-align:center}
.wall-head{flex-direction:column;align-items:center;text-align:center;gap:14px}
.wall-head p{max-width:460px}
.buy{text-align:center}
.step{display:flex;flex-direction:column;align-items:center;text-align:center}
@media (max-width:860px){ .sign-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .sign-grid{grid-template-columns:1fr} }