/* ============ EMBEDDED ASSETS ============ */
@font-face{
  font-family:"Cinzel";
  src:url("../fonts/cinzel.ttf") format("truetype");
  font-weight:400 900; font-style:normal; font-display:block;
}
:root{
  --img-wall:url("../img/WallOfDead.jpg");
  --img-raise:url("../img/Raising.jpg");
  --img-boss:url("../img/Boss.jpg");
  --img-elite:url("../img/Elite.jpg");
  --img-rain:url("../img/ArrowRain.jpg");
  /* Prop Haunt key art — the Steam header capsule (~2.14:1, wordmark baked in).
     ⚠ See copy/studio.md: the art carries its own title, which collides with the
     <h3> beside it. Crop treatment is an open decision. */
  --img-prop:url("../img/PropHaunt.jpg");
}

/* ============ TOKENS ============ */
:root{
  --void:#08080B;
  --stone:#101017;
  --crypt:#1A1424;
  --edge:#2A2235;
  --edge-2:#3A3145;
  --soul:#6FE04A;
  --ally:#4DA6FF;
  --enemy:#E5372B;
  --rune:#9E75E6;
  --bone:#E9E5ED;
  --text:#B6AFC2;
  --dust:#948DA1;
  --faint:#6D6579;

  --display:"Cinzel",Georgia,serif;
  --body:"Roboto","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","Consolas",monospace;

  --gut:clamp(1.25rem,6vw,6rem);
  --wide:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--bone);font-family:var(--body);
  font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--rune);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

/* ============ SHARED COMPONENTS ============ */
.s-nav{max-width:var(--wide);margin:0 auto;padding:1.5rem var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.s-nav-band{border-bottom:1px solid var(--edge)}
.s-nav-over{position:absolute;top:0;left:0;right:0;z-index:10}
.s-mark{font-family:var(--display);font-weight:900;font-size:.92rem;letter-spacing:.2em;
  margin:0;color:var(--bone);text-decoration:none;white-space:nowrap}
.s-links{display:flex;gap:1.7rem;font-family:var(--body);font-size:.92rem;flex-wrap:wrap}
.s-links a{color:var(--dust);text-decoration:none;transition:color .15s;
  background:none;border:0;padding:0;font:inherit;cursor:pointer}
.s-links a:hover{color:var(--bone)}
.s-links a.here{color:var(--bone);text-decoration:underline;text-underline-offset:.4em;
  text-decoration-thickness:1px}

.s-sec{max-width:var(--wide);margin:0 auto;padding:clamp(4rem,11vh,8rem) var(--gut)}
.s-kick{font-size:.9rem;color:var(--dust);margin:0 0 1rem}
.s-kick-q{color:var(--dust)}
.s-h2{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,3.6vw,2.9rem);
  line-height:1.1;margin:0 0 1.2rem;text-wrap:balance}
.s-h2-sm{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:1rem}
.s-p{color:var(--text);margin:0 0 1rem;max-width:34rem}
.s-caption{color:var(--dust);font-size:.88rem;margin:1.4rem 0 0;max-width:34rem}
.s-p:last-child{margin-bottom:0}

.s-btn{font-family:var(--body);font-size:.88rem;font-weight:700;letter-spacing:.04em;
  padding:.92rem 1.65rem;border-radius:2px;text-decoration:none;border:1px solid transparent;
  transition:.18s;display:inline-block;cursor:pointer}
.s-btn-1{background:var(--soul);color:#08140A;border-color:var(--soul)}
.s-btn-1:hover{background:#8BEA6B;transform:translateY(-2px)}
.s-btn-2{border-color:var(--edge-2);color:var(--bone);background:transparent}
.s-btn-2:hover{border-color:var(--bone);background:rgba(255,255,255,.05)}
.s-cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.s-pending{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--dust);
  text-transform:uppercase;padding-left:.2rem}

.s-plate{aspect-ratio:16/10;background-size:cover;background-position:center;
  border:1px solid var(--edge);position:relative;background-color:var(--stone)}
.s-plate::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 90px rgba(8,8,11,.85)}
.s-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}

.s-head{max-width:var(--wide);margin:0 auto;padding:clamp(3.5rem,10vh,6rem) var(--gut) clamp(2rem,5vh,3rem);
  border-bottom:1px solid var(--edge)}
.s-h1{font-family:var(--display);font-weight:900;font-size:clamp(2.2rem,5.5vw,3.6rem);
  line-height:1.02;margin:0 0 1rem;text-wrap:balance}
.s-lede{color:var(--text);font-size:1.05rem;max-width:38rem;margin:0}

.s-foot{border-top:1px solid var(--edge);max-width:var(--wide);margin:0 auto;
  padding:3rem var(--gut) 4rem;display:flex;flex-wrap:wrap;gap:2.5rem;justify-content:space-between}
.s-foot-col{font-size:.82rem;color:var(--dust);line-height:1.95}
.s-foot-col b{display:block;font-size:.82rem;color:var(--bone);margin-bottom:.4rem;font-weight:600}
.s-foot-col a{color:var(--dust);text-decoration:none}
.s-foot-col a:hover{color:var(--bone)}

/* rows (devlog / dispatches) */
.s-rows{border-top:1px solid var(--edge)}
.s-row{display:grid;grid-template-columns:7rem 1fr auto;gap:1.4rem;align-items:baseline;
  padding:1.15rem 0;border-bottom:1px solid var(--edge);text-decoration:none;transition:.15s}
.s-row:hover{background:rgba(158,117,230,.06)}
.s-date{font-family:var(--mono);font-size:.7rem;color:var(--faint);letter-spacing:.05em;
  font-variant-numeric:tabular-nums}
.s-row-t{font-size:1rem;color:var(--bone)}
.s-tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rune);border:1px solid rgba(158,117,230,.35);padding:.22rem .55rem;white-space:nowrap}
@media (max-width:620px){.s-row{grid-template-columns:1fr;gap:.25rem}.s-tag{justify-self:start}}

/* ============ HOME ============ */
.p-hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;
  padding:0 0 clamp(3rem,8vh,6rem)}
.p-hero::before{content:"";position:absolute;inset:0;background-image:var(--img-wall);
  background-size:cover;background-position:50% 42%}
.p-hero::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 35%,transparent 20%,rgba(8,8,11,.55) 65%,rgba(8,8,11,.95) 100%),
    linear-gradient(to top,var(--void) 2%,rgba(8,8,11,.72) 26%,transparent 62%)}
.p-hero-in{position:relative;z-index:2;width:100%;margin:0 auto;
  max-width:var(--wide);padding:0 var(--gut)}
.p-hero-box{max-width:44rem}
.p-eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--dust);margin:0 0 1.4rem}
.p-title{font-family:var(--display);font-weight:900;
  font-size:clamp(2.6rem,7.2vw,5.6rem);line-height:.94;letter-spacing:.01em;
  margin:0 0 1.5rem;text-wrap:balance;
  text-shadow:0 4px 30px rgba(0,0,0,.9)}
.p-sub{font-size:clamp(1rem,1.6vw,1.2rem);color:#C9C3D2;max-width:34rem;margin:0 0 2.4rem}

.s-legend{display:flex;gap:1.4rem;margin-top:1.6rem;flex-wrap:wrap}
.s-leg{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dust)}
.s-dot{width:9px;height:9px;border-radius:50%;flex:none}

/* three doctrines: three plain text cells */
.d-band{background:var(--stone);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.d-in{max-width:var(--wide);margin:0 auto;padding:clamp(3.5rem,9vh,6rem) var(--gut)}
.d-top{max-width:38rem;margin-bottom:clamp(2.5rem,6vh,4rem)}
.d-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--edge);
  border:1px solid var(--edge)}
.d-cell{background:var(--stone);padding:clamp(1.8rem,3.4vw,2.8rem)}
/* Doctrine figures, flat grey with no glow (Gary, 2026-10-14): one large circle,
   twenty-four small ones, six different shapes. */
.d-fig{height:110px;display:flex;align-items:center;justify-content:center;margin-bottom:1.6rem}
.d-one{width:76px;height:76px;border-radius:50%;background:var(--dust)}
.d-many{display:grid;grid-template-columns:repeat(8,1fr);gap:9px;width:172px}
.d-many i{display:block;width:12px;height:12px;border-radius:50%;background:var(--dust)}
.d-kinds{display:grid;grid-template-columns:repeat(3,30px);gap:18px}
.d-kinds i{display:block;width:30px;height:30px;background:var(--dust)}
.d-kinds .k-circle{border-radius:50%}
.d-kinds .k-square{border-radius:2px}
.d-kinds .k-tri{clip-path:polygon(50% 4%,100% 96%,0 96%)}
.d-kinds .k-diamond{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.d-kinds .k-ring{background:none;border:7px solid var(--dust);border-radius:50%}
.d-kinds .k-hex{clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%)}
.d-name{font-family:var(--display);font-size:1.5rem;font-weight:700;margin:0 0 .8rem;letter-spacing:.03em}
.d-cell p{color:var(--text);font-size:.95rem;margin:0}

.s-closer{padding:clamp(5rem,14vh,9rem) var(--gut);text-align:center;
  background:radial-gradient(80% 100% at 50% 0%,rgba(26,20,36,.9),var(--void) 70%)}
.s-quote{font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,3.6vw,2.6rem);line-height:1.3;max-width:24ch;margin:0 auto;
  text-wrap:balance;color:var(--bone)}
.s-quote em{font-style:italic}
/* The email address in the studio and press closers can't wrap; shrink it on phones. */
@media (max-width:520px){.s-quote em{font-size:.74em}}

/* ============ DEVLOG ============ */
.l-feat{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center;
  padding-bottom:clamp(2.5rem,6vh,4rem)}
.l-meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dust);margin:0 0 1rem;display:flex;gap:.9rem;align-items:center;flex-wrap:wrap}
.l-meta .s-tag{color:var(--soul);border-color:rgba(111,224,74,.35)}
.l-h{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,3.2vw,2.3rem);
  line-height:1.14;margin:0 0 1rem;text-wrap:balance}

.l-sub{background:var(--stone);border:1px solid var(--edge);
  padding:clamp(2rem,4vw,3rem);margin:clamp(3rem,8vh,5rem) 0 0;
  display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.l-sub h3{font-family:var(--display);font-size:1.4rem;font-weight:700;margin:0 0 .5rem}
.l-sub p{color:var(--text);margin:0;font-size:.95rem;max-width:34rem}
.l-form{display:flex;gap:.6rem;flex-wrap:wrap}
.l-input{background:var(--void);border:1px solid var(--edge-2);color:var(--bone);
  font-family:var(--body);font-size:.9rem;padding:.9rem 1rem;border-radius:2px;min-width:15rem}
.l-input::placeholder{color:var(--faint)}
@media (max-width:820px){.l-sub{grid-template-columns:1fr}}

/* ============ STUDIO ============ */
.w-lead{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.w-status{font-size:.9rem;color:var(--dust);margin:0 0 .5rem}
.w-t{font-family:var(--display);font-weight:900;font-size:clamp(1.5rem,3.2vw,2.2rem);
  line-height:1.12;margin:0 0 .9rem}

/* Key art as a full-bleed band. Mirrors the home hero's scrim + bottom-left text
   so a second visual moment on this page still reads as the same system.
   ⚠ Must sit OUTSIDE .s-sec — that container is max-width'd, and a band inside it
   is not full-bleed, it's just a wide box. */
.w-band{position:relative;width:100%;min-height:clamp(240px,32vw,420px);
  background-image:var(--img-prop);background-size:cover;background-position:center;
  display:flex;align-items:flex-end;
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.w-band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(8,8,11,.95) 3%,rgba(8,8,11,.6) 36%,transparent 74%)}
.w-band-in{position:relative;z-index:2;width:100%;max-width:var(--wide);margin:0 auto;
  padding:0 var(--gut) clamp(1.6rem,4vh,2.6rem)}
.w-band-box{max-width:36rem}
.w-band .w-t{font-size:clamp(1.2rem,2.4vw,1.65rem);font-weight:700;
  margin-bottom:.6rem;text-shadow:0 3px 24px rgba(0,0,0,.85)}
/* The art is brightest at the left, exactly where the text sits — the scrim
   handles most of it, these shadows handle the rest. Don't remove them. */
.w-band .s-p{color:#CFC7D8;text-shadow:0 2px 14px rgba(0,0,0,.8)}

.w-press{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--edge);
  border:1px solid var(--edge)}
.w-pc{background:var(--stone);padding:1.8rem}
.w-pc h4{font-family:var(--display);font-size:1.05rem;margin:0 0 .4rem;letter-spacing:.03em}
.w-pc p{margin:0;font-size:.88rem;color:var(--text)}
.w-pc p+p{margin-top:.6rem}
.w-pc a{color:var(--bone);text-decoration:underline;text-decoration-color:var(--edge-2);
  text-underline-offset:.2em}
.w-pc a:hover{text-decoration-color:var(--bone)}
.w-size{font-size:.82rem;color:var(--faint)}

/* ============ PRESS ============ */
.k-facts{display:grid;grid-template-columns:minmax(8rem,13rem) 1fr;margin:0;
  border-top:1px solid var(--edge)}
.k-facts dt,.k-facts dd{margin:0;padding:.85rem 0;border-bottom:1px solid var(--edge)}
.k-facts dt{font-size:.88rem;color:var(--dust)}
.k-facts dd{color:var(--bone)}
.k-facts a{color:var(--bone);text-decoration:underline;text-decoration-color:var(--edge-2);
  text-underline-offset:.2em}
.k-feat{margin:0;padding:0 0 0 1.1rem;color:var(--text);max-width:40rem}
.k-feat li{margin:0 0 .45rem}
.k-feat li::marker{color:var(--faint)}
.k-shots{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--edge);
  border:1px solid var(--edge);margin-top:clamp(2rem,5vh,3rem)}
.k-shots img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--stone)}
.k-gap{margin-top:clamp(2.5rem,6vh,4rem)}

/* ============ LEGAL ============ */
.g-doc{max-width:44rem;color:var(--text)}
.g-doc h2{font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,2vw,1.4rem);
  color:var(--bone);margin:2.6rem 0 .9rem;letter-spacing:.02em}
.g-doc h2:first-child{margin-top:0}
.g-doc p,.g-doc ul{margin:0 0 1rem}
.g-doc ul{padding-left:1.2rem}
.g-doc li{margin:0 0 .5rem}
.g-doc li::marker{color:var(--faint)}
.g-doc b{color:var(--bone);font-weight:600}
.g-doc a{color:var(--bone);text-decoration:underline;text-decoration-color:var(--edge-2);
  text-underline-offset:.2em;overflow-wrap:anywhere}
.g-doc a:hover{text-decoration-color:var(--bone)}
.g-date{color:var(--dust);font-size:.9rem}

@media (max-width:820px){
  .s-split,.l-feat,.w-lead,.d-grid,.w-press,.k-shots{grid-template-columns:1fr}
  .d-grid,.w-press{gap:1px}
}
@media (max-width:520px){
  .k-facts{grid-template-columns:1fr}
  .k-facts dt{border-bottom:0;padding-bottom:0}
  .k-facts dd{padding-top:.2rem}
}

/* reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}