:root{
--bg:#0d0b08; --panel:#161210; --parchment:#e8d5a3; --ink:#efe6cc;
--muted:#b8ab84; --gold:#c9a227; --red:#a41f1f; --iron:#8a8f98;
--line:#3a2f22; --max:880px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
font-family:Georgia,Palatino,"Palatino Linotype","Book Antiqua","Times New Roman",serif;
line-height:1.6}
.hero{border-bottom:3px solid var(--gold);background:#000}
.hero picture{display:block}
.banner{display:block;width:100%;height:auto;max-height:62vh;object-fit:cover;object-position:center}
.hero-text{max-width:var(--max);margin:0 auto;padding:28px 20px 32px;text-align:center}
h1{margin:.2em 0 .1em;font-size:clamp(2rem,6vw,3.4rem);letter-spacing:.08em;color:var(--parchment);
text-shadow:0 2px 0 #000,0 0 24px rgba(201,162,39,.25)}
.tagline{margin:.2em 0 1em;letter-spacing:.22em;font-size:clamp(.75rem,2.6vw,.95rem);color:var(--gold);font-weight:bold}
.pitch{font-size:1.05rem;max-width:62ch;margin:0 auto}
.promise{margin:1.2em auto 0;max-width:62ch;background:var(--panel);border:1px solid var(--line);
border-left:4px solid var(--gold);padding:12px 16px;text-align:left}
.fine{font-size:.85rem;color:var(--muted)}
.status{margin-top:1em;font-size:.9rem;letter-spacing:.04em;color:var(--parchment)}
.dot{display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--red);margin-right:.5em}
main{max-width:var(--max);margin:0 auto;padding:8px 20px 40px}
section{background:var(--panel);border:1px solid var(--line);border-radius:10px;
padding:22px 20px;margin:22px 0}
h2{margin:0 0 .6em;font-size:1.5rem;letter-spacing:.06em;color:var(--parchment);
border-bottom:1px solid var(--line);padding-bottom:.4em}
.how ol{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.how li{display:flex;gap:14px;align-items:flex-start;background:#0f0c0a;
border:1px solid var(--line);border-radius:8px;padding:14px}
.num{flex:0 0 2em;width:2em;height:2em;line-height:2em;text-align:center;border-radius:50%;
background:var(--gold);color:#1a1408;font-weight:bold;font-family:Arial,Helvetica,sans-serif}
.playtest{text-align:center}
.btn{display:inline-block;margin:.4em 0;padding:12px 22px;border-radius:8px;text-decoration:none;
font-weight:bold;font-family:Arial,Helvetica,sans-serif;color:#1a1408;background:var(--gold);
border:2px solid #8a6d15}
.btn:hover{background:var(--parchment)}
footer{text-align:center;color:var(--muted);font-size:.85rem;padding:20px;border-top:1px solid var(--line)}
@media (min-width:700px){
.how ol{grid-template-columns:repeat(3,1fr)}
.how li{flex-direction:column}
.banner{max-height:72vh}
}
@media (max-width:520px){
.hero-text{padding:20px 16px 26px}
section{padding:18px 14px}
.how li{padding:12px}
}