:root{
  --bg:#0a0708; --bg2:#100b0d; --panel:#150e11; --line:#2a1a1e;
  --text:#d8cdbd; --dim:#8d8072; --bone:#efe4cf;
  --crimson:#c8102e; --crimson-hi:#ff3b55; --crimson-dk:#6d0b1b;
  --gold:#b89a5e; --green:#2f7a3d;
  --serif:'Cinzel',Georgia,serif; --body:'Cormorant Garamond',Georgia,serif; --pixel:'Pixelify Sans','Courier New',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:1.2rem;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--crimson-hi);outline-offset:3px}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
.wrap--narrow{width:min(760px,100% - 40px)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:12px 28px;transition:background .3s,box-shadow .3s}
.nav.solid{background:rgba(10,7,8,.92);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line)}
.nav__brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--serif);font-weight:700;letter-spacing:.2em;font-size:.95rem;color:var(--bone)}
.nav__brand img{image-rendering:pixelated}
.nav__links{display:flex;align-items:center;gap:26px}
.nav__links a:not(.btn){text-decoration:none;font-family:var(--serif);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);transition:color .2s}
.nav__links a:not(.btn):hover{color:var(--bone)}
.nav__toggle{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer;flex-direction:column;justify-content:center;gap:6px;align-items:center}
.nav__toggle i{display:block;width:24px;height:2px;background:var(--bone);transition:transform .25s,opacity .25s}
.nav__toggle[aria-expanded=true] i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav__toggle[aria-expanded=true] i:nth-child(2){opacity:0}
.nav__toggle[aria-expanded=true] i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:15px 30px;font-family:var(--serif);font-weight:700;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--bone);border:2px solid;position:relative;transition:transform .2s,box-shadow .25s,background .25s,border-color .25s;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.btn svg{width:22px;height:22px;fill:currentColor;flex:none}
.btn--discord{background:linear-gradient(180deg,#3b2fa8,#251c73);border-color:#6f63e0}
.btn--discord:hover{background:linear-gradient(180deg,#4a3dd0,#2d2290);box-shadow:0 0 30px rgba(111,99,224,.5);transform:translateY(-2px)}
.btn--x{background:linear-gradient(180deg,#1b1315,#0d0809);border-color:var(--crimson)}
.btn--x:hover{background:linear-gradient(180deg,#3a0f18,#1b0509);box-shadow:0 0 30px rgba(200,16,46,.55);transform:translateY(-2px)}
.btn--sm{padding:9px 18px;font-size:.75rem}
.btn--lg{padding:19px 40px;font-size:1.05rem}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:110px 20px 90px;isolation:isolate}
.hero__bg{position:absolute;inset:-48% -4% -4% -4%;z-index:-3;background:#0a0708 url(assets/hero-bg.png) center bottom/cover no-repeat;image-rendering:pixelated;filter:saturate(1.1) brightness(1);animation:drift 40s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.1) translate(-1.5%,-1%)}}
.hero__fx{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.hero__vignette{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(ellipse at 50% 45%,rgba(10,7,8,.05) 0%,rgba(10,7,8,.6) 72%,#0a0708 100%),
  linear-gradient(180deg,rgba(10,7,8,.6) 0%,transparent 30%,transparent 65%,var(--bg) 100%)}
.hero__content{max-width:900px}
.eyebrow{font-family:var(--serif);font-size:.82rem;letter-spacing:.38em;text-transform:uppercase;color:var(--crimson-hi);margin-bottom:18px}
.logo{font-family:var(--pixel);font-weight:700;line-height:.9;font-size:clamp(3.2rem,15.5vw,10.5rem);letter-spacing:.02em;color:var(--bone);display:flex;flex-direction:column;align-items:center;
  text-shadow:0 4px 0 var(--crimson-dk),0 8px 0 #2a0610,0 0 40px rgba(200,16,46,.45);animation:flicker 7s infinite}
.logo span:last-child{color:var(--crimson-hi);text-shadow:0 4px 0 var(--crimson-dk),0 8px 0 #2a0610,0 0 50px rgba(255,59,85,.6)}
@media(min-width:760px){.logo{flex-direction:row;justify-content:center;gap:.25em;font-size:clamp(5rem,11.5vw,10rem)}}
@keyframes flicker{0%,18%,22%,62%,64%,100%{opacity:1}20%{opacity:.82}63%{opacity:.9}}
.tagline{margin:34px auto 38px;font-size:clamp(1.25rem,2.6vw,1.65rem);font-style:italic;color:#e5d7c0;text-shadow:0 2px 14px #000}
.cta{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.devbadge{margin-top:34px;display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);padding:8px 16px;border:1px solid var(--line);background:rgba(10,7,8,.6)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--crimson-hi);box-shadow:0 0 10px var(--crimson-hi);animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.25;transform:scale(.7)}}
.scrollcue{position:absolute;bottom:26px;left:50%;width:26px;height:42px;margin-left:-13px;border:2px solid #5a4a4a;border-radius:14px}
.scrollcue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;background:var(--crimson-hi);border-radius:2px;animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(16px)}}

/* ---------- notice ---------- */
.notice{background:linear-gradient(90deg,#1a090e,#220b12 50%,#1a090e);border-block:1px solid var(--crimson-dk);padding:22px 20px}
.notice__inner{max-width:900px;margin:auto;display:flex;gap:18px;align-items:center;font-size:1.1rem}
.notice svg{width:34px;height:34px;flex:none;fill:var(--crimson-hi)}
.notice strong{font-family:var(--serif);letter-spacing:.08em;color:var(--bone)}

/* ---------- sections ---------- */
.section{padding:110px 0;position:relative}
.section--dark{background:linear-gradient(180deg,var(--bg2),#0c0809);border-block:1px solid var(--line)}
.section__head{text-align:center;max-width:780px;margin:0 auto 70px}
h2{font-family:var(--serif);font-weight:900;font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.15;color:var(--bone);letter-spacing:.04em}
h2::after{content:"";display:block;width:90px;height:2px;margin:24px auto 0;background:linear-gradient(90deg,transparent,var(--crimson),transparent)}
.lead{margin-top:22px;color:#b9ad9c;font-size:1.3rem}

.feature{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:60px;align-items:center;padding:50px 0;border-top:1px solid var(--line)}
.feature:first-of-type{border-top:0}
.feature--flip{grid-template-columns:1fr minmax(220px,360px)}
.feature--flip .feature__art{order:2}
.feature__art{aspect-ratio:1;display:grid;place-items:center;color:var(--crimson);position:relative;background:radial-gradient(circle at 50% 50%,rgba(200,16,46,.22),transparent 65%),var(--panel);border:1px solid var(--line);transition:border-color .4s,box-shadow .4s}
.feature__art::before,.feature__art::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--crimson)}
.feature__art::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.feature__art::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.feature__art svg{width:55%;filter:drop-shadow(0 0 14px rgba(200,16,46,.7));transition:transform .5s}
.feature:hover .feature__art{border-color:var(--crimson-dk);box-shadow:0 0 50px rgba(200,16,46,.15)}
.feature:hover .feature__art svg{transform:scale(1.08) rotate(-3deg)}
.chip{display:inline-block;font-family:var(--serif);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;padding:5px 12px;border:1px solid;margin-bottom:14px}
.chip--live{color:#6fcf84;border-color:#2f7a3d;background:rgba(47,122,61,.12)}
.chip--wip{color:#e0b45a;border-color:#7a5d1f;background:rgba(184,154,94,.1)}
.chip--plan{color:#a89fb8;border-color:#463f58;background:rgba(120,110,150,.08)}
h3{font-family:var(--serif);font-weight:700;font-size:1.7rem;color:var(--bone);letter-spacing:.05em;margin-bottom:12px}
.feature__body p{font-size:1.25rem}
.feature__body ul{list-style:none;margin-top:18px}
.feature__body li{position:relative;padding-left:26px;margin:7px 0;color:#b9ad9c;font-size:1.1rem}
.feature__body li::before{content:"";position:absolute;left:3px;top:.62em;width:8px;height:8px;background:var(--crimson);transform:rotate(45deg)}
.feature__body em{color:var(--gold)}

/* ---------- classes ---------- */
.roster{border:1px solid var(--line);background:#0e1416;position:relative;overflow:hidden;box-shadow:0 20px 80px rgba(0,0,0,.7)}
.roster img{width:100%;image-rendering:pixelated;filter:saturate(1.05) contrast(1.05)}
.roster::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(10,7,8,.75)),linear-gradient(0deg,rgba(60,0,10,.28),transparent 40%);mix-blend-mode:multiply;pointer-events:none}
.classlist{list-style:none;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:34px}
.classlist li{font-family:var(--serif);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;padding:8px 16px;border:1px solid var(--line);color:var(--dim);transition:.25s}
.classlist li:hover{border-color:var(--crimson);color:var(--bone);background:rgba(200,16,46,.12)}

/* ---------- media ---------- */
.media-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
.shot{position:relative;display:block;border:1px solid var(--line);background:var(--panel);padding:0;cursor:zoom-in;overflow:hidden;color:inherit;font:inherit}
.shot:nth-child(1){grid-column:span 4}
.shot:nth-child(2){grid-column:span 2}
.shot:nth-child(3){grid-column:span 6}
.shot img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated;transition:transform .6s,filter .4s;filter:brightness(.88)}
.shot:hover img{transform:scale(1.04);filter:brightness(1.05)}
.shot span{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;text-align:left;font-family:var(--serif);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone);background:linear-gradient(0deg,rgba(10,7,8,.92),transparent)}
.shot--video{cursor:default;min-height:240px;background:repeating-linear-gradient(45deg,#110b0d 0 14px,#130d0f 14px 28px)}
.video-ph{height:100%;min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:30px}
.video-ph .play{width:70px;height:70px;border-radius:50%;border:2px solid var(--crimson);display:grid;place-items:center;margin-bottom:8px;box-shadow:0 0 30px rgba(200,16,46,.3)}
.video-ph svg{width:30px;height:30px;fill:var(--crimson-hi);margin-left:4px}
.video-ph strong{font-family:var(--serif);letter-spacing:.15em;text-transform:uppercase;color:var(--bone)}
.video-ph small{color:var(--dim);font-size:1.05rem}

.lightbox{position:fixed;inset:0;z-index:100;background:rgba(5,3,4,.94);display:grid;place-items:center;padding:30px;cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-height:90vh;image-rendering:pixelated;border:1px solid var(--crimson-dk);box-shadow:0 0 80px rgba(200,16,46,.25)}
.lightbox button{position:absolute;top:14px;right:22px;font-size:2.6rem;line-height:1;background:none;border:0;color:var(--bone);cursor:pointer}

/* ---------- timeline ---------- */
.timeline{list-style:none;position:relative;padding-left:34px}
.timeline::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--crimson),var(--line))}
.timeline li{position:relative;margin-bottom:44px}
.timeline li::before{content:"";position:absolute;left:-34px;top:8px;width:14px;height:14px;background:var(--bg);border:2px solid var(--crimson);transform:rotate(45deg)}
.timeline li:first-child::before{background:var(--crimson);box-shadow:0 0 14px var(--crimson-hi)}
.timeline time{font-family:var(--serif);font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--crimson-hi)}
.timeline h3{margin:6px 0 6px;font-size:1.4rem}

/* ---------- join ---------- */
.join{position:relative;text-align:center;padding:130px 0;overflow:hidden;isolation:isolate}
.join__bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 100%,rgba(200,16,46,.35),transparent 65%),linear-gradient(180deg,var(--bg),#13070a)}
.join .cta{margin-top:40px}

.footer{text-align:center;padding:50px 20px 60px;border-top:1px solid var(--line);color:var(--dim);font-size:1rem}
.footer__logo{font-family:var(--pixel);font-size:1.6rem;letter-spacing:.15em;color:var(--bone);margin-bottom:10px}
.footer a{color:var(--crimson-hi);text-decoration:none}
.footer a:hover{text-decoration:underline}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s ease}
.js .reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .nav{padding:8px 16px}
  .nav__toggle{display:flex}
  .nav__links{position:fixed;inset:56px 0 auto 0;flex-direction:column;gap:0;background:rgba(10,7,8,.97);padding:10px 20px 24px;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .35s;visibility:hidden}
  .nav__links.open{transform:none;visibility:visible}
  .nav__links a:not(.btn){padding:16px 0;width:100%;text-align:center;font-size:.9rem}
  .nav__links .btn{margin-top:10px;width:100%}
  .section{padding:70px 0}
  .section__head{margin-bottom:40px}
  .feature,.feature--flip{grid-template-columns:1fr;gap:28px;padding:36px 0}
  .feature--flip .feature__art{order:0}
  .feature__art{max-width:220px;margin-inline:auto}
  .feature__body{text-align:left}
  .media-grid{grid-template-columns:1fr}
  .shot:nth-child(n){grid-column:auto}
  .notice__inner{flex-direction:column;text-align:center}
  .cta .btn{width:100%;max-width:340px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}