/* DEAD.EARTH — geteiltes Stylesheet (Grimdark: Asche, Blut, Gold) */
:root{
  --ground:#13100c; --surface:#1a1611; --surface2:#221b13; --raise:#241d15;
  --ink:#e8e1d2; --ink-soft:#ccc3b2; --muted:#9b917f; --faint:#79705f;
  --hair:#332c21; --hair2:#463c2c;
  --blood:#c8402f; --blood-soft:#d9634c; --gold:#c8a24a; --gold-soft:#d8b968;
  --maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"Spectral",Georgia,serif;font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
a{color:var(--gold-soft);text-decoration:none}
a:hover{color:var(--gold)}
/* film grain / ash overlay (global) */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.055;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:140px 140px}
@media (prefers-reduced-motion:reduce){body::after{opacity:.04}}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:"Cormorant Garamond",serif;line-height:1.1;font-weight:700;text-wrap:balance}
.mono{font-family:"IBM Plex Mono",monospace}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--blood-soft)}

/* ---------- header + burger nav ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(19,16,12,.86);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border-bottom:1px solid var(--hair)}
.nav{max-width:var(--maxw);margin:0 auto;padding:.7rem 22px;display:flex;align-items:center;gap:1rem;position:relative}
.brand{font-family:"Cormorant Garamond",serif;font-weight:700;font-size:1.45rem;letter-spacing:.02em;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand b{color:var(--blood)}
.navtoggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.burger{display:none;margin-left:auto;width:38px;height:32px;flex-direction:column;justify-content:center;gap:6px;cursor:pointer;padding:5px;border-radius:4px}
.burger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.navlinks{margin-left:auto;display:flex;gap:1.3rem;font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.navlinks a{color:var(--muted)}
.navlinks a:hover{color:var(--ink)}
.navlinks a[aria-current]{color:var(--gold)}
@media(max-width:760px){
  .burger{display:flex}
  .navlinks{position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;gap:0;background:var(--surface);border-bottom:1px solid var(--hair2);padding:.2rem 22px .9rem;display:none;box-shadow:0 24px 44px -22px rgba(0,0,0,.85)}
  .navtoggle:checked ~ .navlinks{display:flex}
  .navlinks a{padding:.8rem 0;border-bottom:1px solid var(--hair);font-size:.82rem}
  .navlinks a:last-child{border-bottom:0}
  .navtoggle:checked ~ .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .navtoggle:checked ~ .burger span:nth-child(2){opacity:0}
  .navtoggle:checked ~ .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}
.burger:focus-visible,.navtoggle:focus-visible ~ .burger{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:"IBM Plex Mono",monospace;font-size:.78rem;letter-spacing:.06em;padding:.8rem 1.15rem;border-radius:3px;border:1px solid var(--hair2);color:var(--ink);background:var(--surface);transition:border-color .2s,background .2s,color .2s}
.btn:hover{border-color:var(--blood);color:var(--ink)}
.btn.primary{background:var(--blood);border-color:var(--blood);color:#fff}
.btn.primary:hover{background:var(--blood-soft);color:#fff}
.btn.sm{padding:.55rem .85rem;font-size:.72rem}

/* ---------- compact page hero ---------- */
.pagehero{position:relative;overflow:hidden;border-bottom:1px solid var(--hair);background:radial-gradient(820px 360px at 80% -10%,rgba(200,64,47,.16),transparent 60%),linear-gradient(180deg,#17130d,#100d09)}
.pagehero .in{max-width:var(--maxw);margin:0 auto;padding:3.4rem 22px 2.6rem}
.pagehero .kicker{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.pagehero h1{font-size:clamp(2.3rem,6vw,4rem);color:var(--ink);margin:.35rem 0 0}
.pagehero h1 b{color:var(--blood)}
.pagehero .tag{font-family:"Cormorant Garamond",serif;font-style:italic;color:var(--gold-soft);font-size:clamp(1.1rem,2.6vw,1.5rem);margin-top:.3rem}
.pagehero p.lead{max-width:64ch;color:var(--ink-soft);margin:1rem 0 0}

/* ---------- footer ---------- */
footer.site{padding:3rem 0 3.5rem;color:var(--faint);font-size:.85rem;border-top:1px solid var(--hair)}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:baseline}
footer.site .fbrand{font-family:"Cormorant Garamond",serif;font-size:1.2rem;color:var(--muted)}
footer.site .fbrand b{color:var(--blood)}
footer.site a{color:var(--muted)}

/* ---------- heroes hub ---------- */
.heroes{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin-top:1.8rem}
.herocard{position:relative;display:block;background:linear-gradient(180deg,var(--surface2),var(--surface));border:1px solid var(--hair);border-radius:9px;padding:1.4rem 1.3rem 1.5rem;overflow:hidden;transition:border-color .2s,transform .2s}
.herocard:hover{border-color:var(--blood);transform:translateY(-3px)}
.herocard .ico{width:36px;height:36px;color:var(--gold);display:block}
.herocard .arche{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blood-soft);margin-top:.7rem}
.herocard h3{font-size:1.7rem;color:var(--ink);margin:.12rem 0 .05rem}
.herocard .epi{font-family:"Cormorant Garamond",serif;font-style:italic;color:var(--gold-soft);font-size:1.05rem}
.herocard p{color:var(--ink-soft);font-size:.92rem;margin:.55rem 0 0}
.herocard .watermark{position:absolute;right:-16px;bottom:-22px;width:120px;height:120px;color:var(--ink);opacity:.05;pointer-events:none}

/* ---------- character dossier ---------- */
.dossier{display:grid;grid-template-columns:300px 1fr;gap:2rem;padding:3rem 0}
@media(max-width:820px){.dossier{grid-template-columns:1fr;gap:1.4rem;padding:2rem 0}}
.portrait{position:relative;background:radial-gradient(120% 90% at 50% 0%,var(--raise),var(--surface));border:1px solid var(--hair2);border-radius:11px;padding:2rem;text-align:center;overflow:hidden;align-self:start}
.portrait .big{width:132px;height:132px;color:var(--blood);opacity:.92}
.portrait .arche{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:.7rem}
.portrait .nm{font-family:"Cormorant Garamond",serif;font-weight:700;font-size:2rem;color:var(--ink);line-height:1.04;margin-top:.15rem}
.portrait .epi{font-style:italic;color:var(--gold-soft);font-family:"Cormorant Garamond",serif;font-size:1.1rem}
.statbox{margin-top:1.2rem;border-top:1px solid var(--hair);padding-top:.9rem;text-align:left;font-size:.9rem}
.statrow{display:flex;justify-content:space-between;gap:1rem;padding:.28rem 0;border-bottom:1px dashed var(--hair)}
.statrow span{color:var(--muted)}
.statrow b{font-family:"IBM Plex Mono",monospace;color:var(--gold-soft);text-align:right}
.attrs{display:flex;gap:.4rem;margin:1rem 0 0}
.attr{flex:1;text-align:center;border:1px solid var(--hair);border-radius:5px;padding:.4rem 0;background:var(--surface)}
.attr .k{font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.05em;color:var(--muted)}
.attr .v{font-family:"IBM Plex Mono",monospace;font-size:1.15rem;color:var(--blood-soft)}
.bio .dlabel{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blood-soft)}
.bio .quote{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(1.5rem,3.4vw,2.2rem);color:var(--gold-soft);line-height:1.22;margin:.35rem 0 1.5rem;border-left:3px solid var(--blood);padding-left:1.1rem}
.bio h2{font-size:1.55rem;color:var(--ink);margin:1.7rem 0 .3rem}
.bio p{color:var(--ink-soft)}
.sig{background:var(--surface);border:1px solid var(--hair2);border-left:3px solid var(--gold);border-radius:0 6px 6px 0;padding:.9rem 1.1rem;margin:1rem 0}
.sig .st{font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.15rem}
.sig b{color:var(--ink)}
.heronav{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--hair);padding:1.4rem 0 0;margin-top:.4rem;font-family:"IBM Plex Mono",monospace;font-size:.74rem}
.heronav a{color:var(--muted)}
.heronav a:hover{color:var(--gold)}

/* section helper (content pages) */
section.block{padding:3.4rem 0;border-bottom:1px solid var(--hair)}

/* ---------- download / material cards ---------- */
.matgroup{margin-top:2.4rem}
.matgroup .glabel{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blood-soft);border-bottom:1px solid var(--hair);padding-bottom:.5rem;margin:0 0 1.1rem}
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.dlcard{background:var(--surface);border:1px solid var(--hair2);border-radius:7px;padding:1.4rem;display:flex;flex-direction:column;gap:.55rem}
.dlcard .badge{align-self:flex-start;font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid var(--hair2);border-radius:999px;padding:.2rem .6rem}
.dlcard .t{font-family:"Cormorant Garamond",serif;font-weight:700;font-size:1.5rem;color:var(--ink);line-height:1.1}
.dlcard .m{color:var(--muted);font-size:.93rem;flex:1;margin:0}
.dlcard .row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.3rem}
@media(max-width:640px){.dl{grid-template-columns:1fr}}