:root{
  --ink:#0a0808;
  --ink-2:#120d0c;
  --blood:#c21e2e;
  --blood-deep:#7a0f1a;
  --gold:#c8a24b;
  --gold-bright:#e6c877;
  --bone:#ece3d2;
  --ash:#9a8f80;
  --font-display:'Cinzel',serif;
  --font-serif:'Cormorant Garamond',serif;
  --font-mono:'IBM Plex Mono',monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:var(--font-serif);
  font-size:1.08rem;
  line-height:1.7;
  letter-spacing:.01em;
  color:var(--bone);
  background:
    radial-gradient(1200px 620px at 82% -12%, rgba(194,30,46,.14), transparent 60%),
    radial-gradient(900px 540px at -6% 112%, rgba(200,162,75,.09), transparent 62%),
    radial-gradient(700px 500px at 50% 50%, rgba(20,14,13,.6), transparent 70%),
    var(--ink);
  overflow-x:hidden;
}
::selection{background:var(--blood);color:var(--bone)}
a{color:inherit;text-decoration:none}
img,svg{display:block}

/* atmosphere */
.grain,.vignette,.cursor-ring,.progress{position:fixed;pointer-events:none}
.grain{inset:0;z-index:2000;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.vignette{inset:0;z-index:100;box-shadow:inset 0 0 200px rgba(0,0,0,.85)}
.progress{top:0;left:0;right:0;height:2px;z-index:3000;background:transparent}
.progress span{display:block;height:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--blood),var(--gold))}
.cursor-ring{width:42px;height:42px;border:1px solid rgba(200,162,75,.6);border-radius:50%;
  top:0;left:0;transform:translate(-50%,-50%);z-index:4000;transition:width .25s,height .25s,background .25s,opacity .25s;opacity:0}
.cursor-ring.on{opacity:1}
.cursor-ring.is-hover{width:64px;height:64px;background:rgba(194,30,46,.12)}

.skip{position:absolute;left:-9999px;top:0;background:var(--blood);color:var(--bone);padding:.6rem 1rem;z-index:5000;font-family:var(--font-mono);font-size:.8rem}
.skip:focus{left:0}

/* header */
.site-head{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.4rem clamp(1.2rem,4vw,3rem);border-bottom:1px solid rgba(200,162,75,.16)}
.brand{display:flex;flex-direction:column;gap:.2rem}
.wordmark{font-family:var(--font-display);font-weight:800;letter-spacing:.28em;font-size:.95rem;color:var(--gold-bright);white-space:nowrap}
.wordmark-dot{color:var(--blood)}
.head-credit{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.22em;color:var(--ash);opacity:.55}
.head-quote{margin:0;font-family:var(--font-serif);font-style:italic;font-size:1.02rem;letter-spacing:.05em;color:var(--ash);text-align:right}
.head-quote .q{color:var(--blood);font-family:var(--font-display);font-style:normal;font-size:1.25rem;position:relative;top:.12em}

main{position:relative;z-index:5}

/* hero */
.hero{position:relative;min-height:88vh;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;
  gap:2rem;padding:clamp(3rem,7vw,6rem) clamp(1.2rem,5vw,4rem);max-width:1400px;margin:0 auto}
.hero-copy{will-change:transform}
.hero-side{justify-self:center;width:min(46vw,420px);will-change:transform}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.34em;color:var(--blood);text-transform:uppercase;margin:0 0 1.4rem}
.title{font-family:var(--font-display);font-weight:900;font-size:clamp(3.2rem,12vw,9.5rem);line-height:.9;margin:0;letter-spacing:.02em;
  background:linear-gradient(160deg,#f7ecd1 10%,#c8a24b 48%,#7a5f24 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 30px rgba(194,30,46,.25));position:relative}
.role{font-family:var(--font-mono);font-size:clamp(.9rem,2vw,1.2rem);letter-spacing:.3em;text-transform:uppercase;color:var(--bone);margin:1.6rem 0 0}
.role .sep{color:var(--blood)}
.role-dot{color:var(--blood)}
.tagline{max-width:34rem;color:var(--ash);font-style:italic;font-size:1.22rem;margin:1.6rem 0 2rem}
.hero-meta{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.cta{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  background:linear-gradient(180deg,#d5323f,#9c131f);color:#fff;padding:.9rem 1.5rem;border:1px solid var(--blood-deep);
  box-shadow:0 6px 24px rgba(194,30,46,.4);transition:transform .2s,box-shadow .2s}
.cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(194,30,46,.55)}
.cta svg{width:16px;height:16px}
.availability-pill{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;color:var(--gold);border:1px solid rgba(200,162,75,.4);padding:.55rem .9rem}
.dot-live{width:8px;height:8px;border-radius:50%;background:#6cff9a;box-shadow:0 0 10px #6cff9a;animation:pulse 1.6s ease infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.hero-sigil{width:100%;opacity:.9;filter:drop-shadow(0 0 50px rgba(194,30,46,.35));transition:transform .12s ease-out;animation:sigilIn 1s ease-out .25s both}
.hero-sigil svg{width:100%;height:auto}
@keyframes sigilIn{from{opacity:0;filter:drop-shadow(0 0 50px rgba(194,30,46,.35)) blur(6px)}to{opacity:.9;filter:drop-shadow(0 0 50px rgba(194,30,46,.35))}}

/* ticker */
.ticker{position:relative;border-top:1px solid rgba(200,162,75,.18);border-bottom:1px solid rgba(200,162,75,.18);overflow:hidden;background:rgba(10,8,8,.6)}
.ticker-track{display:flex;gap:3rem;white-space:nowrap;padding:.8rem 0;animation:marq 28s linear infinite;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.34em;color:var(--ash)}
.ticker-track span::before{content:'//';color:var(--blood);margin-right:3rem}
@keyframes marq{to{transform:translateX(-50%)}}

/* sections */
section{padding:clamp(4rem,8vw,7rem) clamp(1.2rem,5vw,4rem);max-width:1200px;margin:0 auto}
.section-label{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin:0 0 2.4rem;display:flex;align-items:center;gap:1rem}
.section-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(200,162,75,.4),transparent)}

/* dossier */
.dossier-wrap{will-change:transform}
.dossier{display:grid;grid-template-columns:.8fr 1.2fr;border:1px solid rgba(200,162,75,.25);position:relative;background:linear-gradient(160deg,rgba(18,13,12,.92),rgba(10,8,8,.92))}
.dossier::before,.dossier::after{content:'';position:absolute;width:34px;height:34px;pointer-events:none}
.dossier::before{top:-1px;left:-1px;border-top:2px solid var(--blood);border-left:2px solid var(--blood)}
.dossier::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--blood);border-right:2px solid var(--blood)}
.dossier-photo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2.4rem;border-right:1px solid rgba(200,162,75,.16);position:relative}
.dossier-photo svg{width:min(70%,200px);height:auto}
.stamp{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.32em;color:var(--blood);border:1px solid var(--blood);padding:.35rem .7rem;transform:rotate(-4deg)}
.dossier-fields{margin:0;padding:0}
.field{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:1.15rem 1.6rem;border-bottom:1px solid rgba(200,162,75,.12)}
.field:last-child{border-bottom:0}
.field dt{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ash);flex-shrink:0}
.field dd{margin:0;font-family:var(--font-serif);font-size:1.18rem;color:var(--bone);text-align:right}
.field dd.live{color:#6cff9a}

/* about */
.about-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.4rem}
.lead{grid-column:1/-1;font-family:var(--font-serif);font-style:italic;font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.3;color:var(--gold-bright);margin:0 0 2rem;max-width:20ch}
.lead em{color:var(--blood);font-style:normal}
.log{grid-column:span 4;border:1px solid rgba(200,162,75,.16);padding:1.7rem;position:relative;background:rgba(18,13,12,.5);transition:transform .3s,border-color .3s}
.log:hover{transform:translateY(-4px);border-color:rgba(194,30,46,.5)}
.log.accent{border-color:rgba(194,30,46,.4)}
.log-title{font-family:var(--font-display);font-size:1.15rem;letter-spacing:.14em;color:var(--gold);margin:0 0 1rem;display:flex;align-items:center;gap:.7rem}
.log-title .idx{font-family:var(--font-mono);color:var(--blood);font-size:.8rem}
.log p{margin:0;color:var(--ash);font-size:1.06rem}
.contact-note{grid-column:1/-1;margin:2.4rem 0 0;font-family:var(--font-mono);font-size:.82rem;letter-spacing:.08em;color:var(--bone);border-left:2px solid var(--blood);padding-left:1.2rem}

/* socials */
.socials p.sub,.socials-sub{color:var(--ash);font-style:italic;margin:-1.4rem 0 2.4rem}
.socials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.2rem}
.social{position:relative;display:flex;flex-direction:column;gap:.9rem;padding:1.8rem 1.5rem;border:1px solid rgba(200,162,75,.2);background:rgba(18,13,12,.55);overflow:hidden;transition:transform .3s,border-color .3s}
.social::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent,var(--blood));transform:scaleY(0);transform-origin:top;transition:transform .3s}
.social:hover{transform:translateY(-4px);border-color:rgba(200,162,75,.45)}
.social:hover::before{transform:scaleY(1)}
.social svg{width:32px;height:32px;color:var(--gold);transition:transform .3s}
.social:hover svg{transform:scale(1.12)}
.social-name{font-family:var(--font-display);font-size:1.12rem;letter-spacing:.1em;color:var(--bone)}
.social-handle{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;color:var(--accent,var(--ash));word-break:break-word}
.social.discord{--accent:#7c8cf0}
.social.roblox{--accent:#e2231a}
.social.youtube{--accent:#ff2d55}
.social.email{--accent:#7acb8a}
.social.strawpage{--accent:#d9b45c}

/* footer */
.site-foot{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  padding:2rem clamp(1.2rem,4vw,3rem);border-top:1px solid rgba(200,162,75,.16);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;color:var(--ash)}
.site-foot a{color:var(--gold)}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}

/* responsive */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto;text-align:left;padding-top:4rem}
  .hero-side{width:min(70vw,320px)}
  .dossier{grid-template-columns:1fr}
  .dossier-photo{border-right:0;border-bottom:1px solid rgba(200,162,75,.16)}
  .log{grid-column:span 12}
}
@media (max-width:560px){
  .site-head{flex-direction:column;align-items:flex-start;gap:.6rem}
  .head-quote{text-align:left}
}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
button,a{cursor:pointer}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .hero-sigil{animation:none;opacity:.9}
}