/* The Warded March — a deliberately single-theme site.
   The game is about a valley going dark; the site commits to that world, so
   every colour is painted explicitly rather than inherited from the viewer. */

:root{
  --ink:#0E0C0F;            /* warm near-black, violet bias — the tileset outline */
  --ink-2:#161318;
  --panel:#1C181E;
  --panel-2:#241F27;
  --rule:#332C38;
  --rule-2:#463D4C;
  --bone:#EDE6D8;           /* parchment, not white */
  --bone-2:#B6AC9C;
  --bone-3:#7E7466;
  --ember:#EFB851;          /* torchlight — the accent */
  --ember-dim:#8A6520;
  --ward:#7BA8CE;           /* the cold blue of a working stone */
  --blood:#C4553F;
  --moss:#7FB25E;
  --shadow:0 2px 4px rgba(0,0,0,.5), 0 18px 44px -20px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Young Serif",Georgia,serif; font-weight:400; margin:0;
  text-wrap:balance; letter-spacing:-.005em}
.label,.eyebrow,.chip,nav a,.stat b{font-family:"Silkscreen",monospace}
code,.mono,.num{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace}
img{max-width:100%; display:block}
a{color:var(--ember)}

/* ---------------------------------------------------------------- chrome */
.topbar{
  position:sticky; top:0; z-index:40; background:rgba(14,12,15,.92);
  border-bottom:1px solid var(--rule); backdrop-filter:blur(8px);
}
.topbar .inner{max-width:1200px; margin:0 auto; padding:0 clamp(16px,3.5vw,32px);
  display:flex; align-items:center; gap:clamp(14px,3vw,34px); min-height:60px; flex-wrap:wrap}
.brand{font-family:"Young Serif",Georgia,serif; font-size:19px; color:var(--bone);
  text-decoration:none; white-space:nowrap; margin-right:auto}
.brand span{color:var(--ember)}
nav{display:flex; gap:clamp(10px,2vw,22px); flex-wrap:wrap}
nav a{font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--bone-2); text-decoration:none; padding:6px 0; border-bottom:2px solid transparent}
nav a:hover{color:var(--bone)}
nav a.on{color:var(--ember); border-bottom-color:var(--ember)}

.wrap{max-width:1200px; margin:0 auto; padding:0 clamp(16px,3.5vw,32px)}
.page{display:none}
.page.on{display:block}
section{padding:clamp(44px,6vw,78px) 0; border-bottom:1px solid var(--rule)}
section:last-child{border-bottom:none}

.eyebrow{font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ember); margin-bottom:16px}
h2{font-size:clamp(27px,3.6vw,40px); line-height:1.12; margin-bottom:14px}
h3{font-size:20px; margin-bottom:8px}
.lede{font-size:clamp(17px,1.9vw,20px); color:var(--bone-2); max-width:62ch;
  line-height:1.55; margin:0 0 26px}
p{margin:0 0 15px; max-width:66ch; color:var(--bone-2)}
p strong,li strong{color:var(--bone); font-weight:600}

/* ------------------------------------------------------------------ hero */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--rule)}
.hero-art{position:absolute; inset:0; background-size:cover; background-position:center 30%;
  image-rendering:pixelated; opacity:.5; filter:saturate(.75)}
.hero-art::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,12,15,.55) 0%, rgba(14,12,15,.82) 55%, var(--ink) 100%)}
.hero .wrap{position:relative; padding-top:clamp(70px,11vw,140px); padding-bottom:clamp(48px,7vw,86px)}
.chip{display:inline-flex; align-items:center; gap:8px; font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ember); border:1px solid var(--ember-dim);
  background:rgba(239,184,81,.08); border-radius:2px; padding:5px 11px; margin-bottom:22px}
.chip::before{content:""; width:6px; height:6px; background:var(--ember); border-radius:50%}
h1{font-size:clamp(42px,8vw,86px); line-height:1.0; margin-bottom:18px; max-width:13ch}
.tag{font-size:clamp(18px,2.4vw,25px); color:var(--bone); max-width:30ch; line-height:1.35;
  margin:0 0 30px; font-family:"Young Serif",Georgia,serif}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-block; font-family:"Silkscreen",monospace; font-size:11px;
  letter-spacing:.07em; text-transform:uppercase; text-decoration:none;
  padding:13px 22px; border-radius:2px; border:1px solid var(--ember);
  color:var(--ink); background:var(--ember)}
.btn:hover{background:#FFD180; border-color:#FFD180}
.btn.ghost{background:transparent; color:var(--bone); border-color:var(--rule-2)}
.btn.ghost:hover{border-color:var(--bone-2); background:rgba(237,230,216,.06)}

.stats{display:flex; gap:clamp(20px,4vw,46px); flex-wrap:wrap; margin-top:34px;
  padding-top:26px; border-top:1px solid var(--rule)}
.stat b{display:block; font-size:23px; color:var(--ember); line-height:1.3}
.stat span{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--bone-3)}

/* ----------------------------------------------------------------- grids */
.cols{display:grid; gap:clamp(18px,2.5vw,28px)}
.c2{grid-template-columns:1fr}
.c3{grid-template-columns:1fr}
@media(min-width:760px){.c2{grid-template-columns:1fr 1fr} .c3{grid-template-columns:repeat(3,1fr)}}

.card{background:var(--panel); border:1px solid var(--rule); border-radius:3px;
  padding:24px; box-shadow:var(--shadow)}
.card h3{color:var(--bone)}
.card p:last-child{margin-bottom:0}
.card .n{font-family:"Silkscreen",monospace; font-size:11px; color:var(--ember); display:block;
  margin-bottom:12px}

/* ------------------------------------------------------------ screenshots */
.shots{display:grid; gap:22px; grid-template-columns:1fr}
@media(min-width:820px){.shots{grid-template-columns:1fr 1fr}}
figure{margin:0; background:var(--panel); border:1px solid var(--rule); border-radius:3px;
  overflow:hidden; box-shadow:var(--shadow)}
figure img{image-rendering:pixelated; width:100%; height:auto; border-bottom:1px solid var(--rule)}
figcaption{padding:16px 18px}
figcaption h3{font-size:18px; margin-bottom:2px}
figcaption .lvl{font-family:"Silkscreen",monospace; font-size:10px; color:var(--ember);
  letter-spacing:.05em; display:block; margin-bottom:9px}
figcaption p{font-size:14.5px; margin:0; max-width:none}

.sprites{display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.sprite{background:var(--panel); border:1px solid var(--rule); border-radius:3px;
  text-align:center; overflow:hidden}
.sprite .stage{padding:18px; display:grid; place-items:center; min-height:130px;
  background-color:#181420;
  background-image:linear-gradient(45deg,#1F1A28 25%,transparent 25%,transparent 75%,#1F1A28 75%),
    linear-gradient(45deg,#1F1A28 25%,transparent 25%,transparent 75%,#1F1A28 75%);
  background-size:14px 14px; background-position:0 0,7px 7px}
.sprite img{image-rendering:pixelated}
.sprite .nm{padding:10px 12px 14px; border-top:1px solid var(--rule)}
.sprite h3{font-size:15px; margin-bottom:4px}
.sprite p{font-size:13px; margin:0; max-width:none}

/* --------------------------------------------------------------- tables */
.scroller{overflow-x:auto; border:1px solid var(--rule); border-radius:3px; background:var(--panel)}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:15px}
th,td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--rule); vertical-align:top;
  color:var(--bone-2)}
thead th{background:var(--panel-2); font-family:"Silkscreen",monospace; font-size:10px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--bone-3); white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td b{color:var(--bone); font-weight:600}
td.num{font-family:"JetBrains Mono",monospace; color:var(--ember); white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------- roadmap */
ol.road{list-style:none; padding:0; margin:0; counter-reset:ph}
ol.road li{counter-increment:ph; position:relative; padding:0 0 26px 46px;
  border-left:2px solid var(--rule); margin-left:12px}
ol.road li:last-child{border-left-color:transparent; padding-bottom:0}
ol.road li::before{content:""; position:absolute; left:-8px; top:5px; width:14px; height:14px;
  border-radius:50%; background:var(--ink); border:2px solid var(--rule-2)}
ol.road li.done::before{background:var(--moss); border-color:var(--moss)}
ol.road li.now::before{background:var(--ember); border-color:var(--ember);
  box-shadow:0 0 0 5px rgba(239,184,81,.16)}
ol.road h3{font-size:18px; margin-bottom:3px}
ol.road p{font-size:14.5px; margin:0}
ol.road .st{font-family:"Silkscreen",monospace; font-size:9px; letter-spacing:.06em;
  text-transform:uppercase; padding:2px 7px; border-radius:2px; border:1px solid;
  margin-left:10px; vertical-align:2px; white-space:nowrap}
.st.done{color:var(--moss); border-color:#3E6B2E}
.st.now{color:var(--ember); border-color:var(--ember-dim)}
.st.next{color:var(--ward); border-color:#3C5B74}
.st.planned{color:var(--bone-3); border-color:var(--rule-2)}

/* --------------------------------------------------------------- notice */
.notice{border:1px solid var(--ember-dim); background:rgba(239,184,81,.07);
  border-radius:3px; padding:22px 24px}
.notice h3{color:var(--ember); font-size:19px}
.notice p:last-child{margin-bottom:0}

.rows{border:1px solid var(--rule); border-radius:3px; background:var(--panel); overflow:hidden}
.row{padding:18px 22px; border-bottom:1px solid var(--rule)}
.row:last-child{border-bottom:none}
.row h3{font-size:17px; margin-bottom:4px}
.row p{margin:0; font-size:14.5px; max-width:74ch}
.row .who{font-size:13px; color:var(--bone-3); margin-bottom:6px}

footer{padding:38px 0 60px; color:var(--bone-3); font-size:13.5px}
footer p{max-width:80ch; color:var(--bone-3)}
:focus-visible{outline:2px solid var(--ember); outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}}