/* Layout: single column story. Split hero (words left, carved door right), then the game, the studio, contact. */
:root{
  --void:#120d0a;        /* umber dark of the buried vault */
  --vault:#1b1410;       /* raised panels */
  --stone:#7a6650;       /* sandstone */
  --sand:#cbb592;        /* light sandstone, secondary text */
  --text:#efe2c8;
  --glyph:#c2391f;       /* blood red of the waking seal */
  --ember:#ec7438;
  --light:#ffe2b0;
  --rule:rgba(203,181,146,.18);
  --display:"Marcellus SC","Trajan Pro",Georgia,serif;
  --body:"Spectral",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --step--1:clamp(.82rem,.8rem + .1vw,.88rem);
  --step-0:clamp(1.05rem,1rem + .25vw,1.18rem);
  --step-1:clamp(1.3rem,1.15rem + .6vw,1.6rem);
  --step-2:clamp(1.8rem,1.4rem + 1.6vw,2.6rem);
  --step-3:clamp(2.4rem,1.6rem + 3.4vw,4.4rem);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--text);font-family:var(--body);font-size:var(--step-0);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--light);text-decoration-color:var(--glyph);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:#fff;text-decoration-color:var(--ember)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:2px}
img,svg{max-width:100%}

.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}

/* header */
.top{position:sticky;top:0;z-index:5;background:rgba(18,13,10,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-family:var(--display);letter-spacing:.14em;font-size:.95rem}
.brand svg{width:22px;height:28px;flex:none}
.nav{display:flex;gap:clamp(14px,3vw,28px);font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase}
.nav a{color:var(--sand);text-decoration:none}
.nav a:hover{color:var(--light)}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 60% at 72% 55%,rgba(194,57,31,.20),transparent 70%);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(24px,5vw,64px);padding-block:clamp(48px,9vw,110px)}
.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sand);margin:0 0 1.1rem}
h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0}
h1{font-size:var(--step-3);line-height:1.02;letter-spacing:.06em}
.lead{max-width:34ch;font-size:var(--step-1);line-height:1.45;color:var(--text);margin:1.4rem 0 2rem}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:14px 20px;border:1px solid var(--rule);color:var(--text);border-radius:2px;transition:border-color .2s,background-color .2s,color .2s}
.btn:hover{border-color:var(--ember);color:var(--light)}
.btn.primary{background:var(--glyph);border-color:var(--glyph);color:#fff4e6}
.btn.primary:hover{background:var(--ember);border-color:var(--ember);color:#fff}
.door{justify-self:center;width:min(100%,400px)}
.door svg{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}
.seam{animation:breathe 4.5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.75}50%{opacity:1}}

/* sections */
section{padding-block:clamp(56px,9vw,110px)}
.label{font-family:var(--mono);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--glyph);margin:0 0 .9rem}
h2{font-size:var(--step-2);line-height:1.1;letter-spacing:.04em}
.game-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px;margin-bottom:2rem}
.status{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);border:1px solid var(--rule);padding:8px 12px;border-radius:2px;white-space:nowrap}
.status b{color:var(--ember);font-weight:500}
.game-body{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:start}
.game-body > *{min-width:0}
.prose p{margin:0 0 1.1em;max-width:62ch;color:var(--text)}
.prose p.muted{color:var(--sand)}
.pillars{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem}
.pillars li{display:grid;grid-template-columns:22px 1fr;gap:14px;padding-top:1.4rem;border-top:1px solid var(--rule)}
.pillars li:first-child{border-top:0;padding-top:0}
.pillars svg{width:22px;height:22px;margin-top:.3em}
.pillars h3{font-size:var(--step-1);letter-spacing:.04em;line-height:1.2;margin-bottom:.35rem}
.pillars p{margin:0;color:var(--sand);font-size:var(--step--1);line-height:1.6}

.quote{margin:clamp(40px,7vw,80px) 0 0;padding:clamp(28px,5vw,48px);background:var(--vault);border:1px solid var(--rule);border-radius:2px;text-align:center}
.quote p{margin:0;font-family:var(--display);font-size:var(--step-2);line-height:1.2;letter-spacing:.03em;color:var(--light);text-wrap:balance}
.quote cite{display:block;margin-top:1rem;font-family:var(--mono);font-style:normal;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sand)}

.studio{border-top:1px solid var(--rule)}
.studio .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,72px)}
.studio .wrap > *{min-width:0}

.contact{border-top:1px solid var(--rule);text-align:center}
.contact .mail{display:inline-block;margin-top:1.2rem;font-family:var(--display);font-size:var(--step-2);letter-spacing:.03em;word-break:break-word}
.contact p{color:var(--sand);margin:1rem auto 0;max-width:46ch}

footer{border-top:1px solid var(--rule);padding-block:28px;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:var(--sand)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}

@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr}
  .door{order:-1;width:min(70%,300px)}
  .game-body,.studio .wrap{grid-template-columns:1fr}
  .lead{max-width:none}
}
@media (max-width:480px){
  .nav a.hide-sm{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .seam{animation:none;opacity:1}
}

/* 404 */
.lost{min-height:70vh;display:grid;place-items:center;text-align:center;padding-block:80px}
.lost h1{font-size:var(--step-3)}
.lost p{color:var(--sand);margin:1rem 0 2rem}