/* ============================================================
   PALETTE — white page, dark green structure, gold accent.
   Gold is sampled from the RWG logo (#C8A234 family).
   ============================================================ */
:root{
  --white:      #FFFFFF;
  --paper:      #F6F7F3;   /* alternating band, very light warm grey-green */
  --line:       #E2E5DC;   /* hairlines */
  --line-soft:  #EDEFE9;

  --green:      #1E3329;   /* primary dark green — footer, bands, buttons */
  --green-mid:  #2C4A3B;   /* hover / lighter green */
  --green-tint: #EDF1EC;   /* pale green wash */

  --gold:       #B0812F;   /* accent, text-safe on white */
  --gold-logo:  #C8A234;   /* logo gold — use on dark only */
  --gold-lift:  #E0B851;

  --ink:        #14201A;   /* headings */
  --body:       #47524B;   /* body copy */
  --muted:      #7A857D;   /* labels, captions */

  --shell: 1140px;
  --r: 3px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--body);
  font:400 16px/1.65 'Archivo',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

.wrap{max-width:var(--shell); margin:0 auto; padding:0 32px}
.mono{font:500 11px/1 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.18em; text-transform:uppercase}

h1,h2,h3,h4{color:var(--ink); margin:0}

/* ---------- buttons ---------- */
.btn{display:inline-block; text-decoration:none; cursor:pointer; border-radius:var(--r);
  padding:15px 28px; font:500 12px/1 'IBM Plex Mono',monospace; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--gold); background:var(--gold); color:#1A1204; transition:.18s ease}
.btn:hover{background:var(--gold-lift); border-color:var(--gold-lift)}
.btn--green{background:var(--green); border-color:var(--green); color:#F2F5F0}
.btn--green:hover{background:var(--green-mid); border-color:var(--green-mid)}
.btn--ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.btn--ghost:hover{background:transparent; border-color:var(--ink)}
.btn--ghost-l{background:transparent; border-color:rgba(255,255,255,.28); color:#F2F5F0}
.btn--ghost-l:hover{border-color:var(--gold-lift); color:var(--gold-lift)}
.btn--sm{padding:11px 20px; font-size:11px}

/* ---------- section headers ---------- */
.eyebrow{color:var(--gold); margin:0 0 18px; display:flex; align-items:center; gap:12px}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--gold); opacity:.6}
.sec-head{max-width:620px; margin:0 0 44px}
.sec-head h2{font:600 clamp(28px,3.6vw,42px)/1.12 'Cinzel',serif; letter-spacing:.005em; margin:0 0 14px}
.sec-head p{margin:0; font-size:17px; color:var(--body)}

/* ============================================================
   HEADER — constant on both pages. White, quiet.
   ============================================================ */
.chrome{background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
.chrome-in{max-width:var(--shell); margin:0 auto; padding:14px 32px; display:flex; align-items:center; gap:36px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; cursor:pointer}
.brand img{height:54px; width:auto}
.brand .tag{font:400 8px/1 'IBM Plex Mono',monospace; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold); white-space:nowrap}
.nav{display:flex; gap:28px; margin-left:auto; align-items:center}
.nav a{font:500 11px/1 'IBM Plex Mono',monospace; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--muted); padding:5px 0; border-bottom:1px solid transparent; transition:.18s}
.nav a:hover,.nav a.on{color:var(--ink); border-bottom-color:var(--gold)}

/* ============================================================
   PUBLISHER HOME
   ============================================================ */
.hero{padding:96px 0 84px}
.hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:64px; align-items:center}
.hero h1{font:700 clamp(38px,5.6vw,66px)/1.06 'Cinzel',serif; letter-spacing:-.005em; margin:0 0 24px}
.hero h1 em{font-style:normal; color:var(--green)}
.hero .lede{font-size:18px; max-width:44ch; margin:0 0 34px}
.acts{display:flex; gap:12px; flex-wrap:wrap}
.hero-fig{position:relative}
.hero-fig img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); border:1px solid var(--line)}
.hero-fig figcaption{position:absolute; left:0; bottom:-30px; color:var(--muted)}

/* proof strip */
.proof{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper)}
.proof-in{max-width:var(--shell); margin:0 auto; padding:26px 32px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.proof div{display:flex; flex-direction:column; gap:7px}
.proof dt{font:500 10px/1 'IBM Plex Mono',monospace; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.proof dd{margin:0; font:700 21px/1 'Cinzel',serif; color:var(--green)}

/* our games — single card, no roadmap */
.games{padding:88px 0}
.gcard{display:grid; grid-template-columns:.9fr 1.1fr; gap:0; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; background:var(--white)}
.gcard-img{position:relative; background:var(--green)}
.gcard-img img{width:100%; height:100%; min-height:340px; object-fit:cover}
.gcard-body{padding:44px 46px; display:flex; flex-direction:column; justify-content:center}
.gcard .badge{display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  background:var(--green-tint); color:var(--green); border-radius:100px; padding:7px 14px;
  font:500 10px/1 'IBM Plex Mono',monospace; letter-spacing:.16em; text-transform:uppercase; margin-bottom:20px}
.gcard .badge::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold)}
.gcard h3{font:700 clamp(26px,3vw,36px)/1.1 'Cinzel',serif; margin:0 0 12px}
.gcard .tag{font-size:17px; color:var(--body); margin:0 0 22px; max-width:42ch}
.facts{display:flex; gap:0; flex-wrap:wrap; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin:0 0 26px}
.facts div{padding:15px 22px 15px 0; margin-right:22px; border-right:1px solid var(--line)}
.facts div:last-child{border-right:0; margin-right:0}
.facts dt{font:500 9px/1 'IBM Plex Mono',monospace; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.facts dd{margin:0; font:600 16px/1 'Archivo',sans-serif; color:var(--ink)}

/* studio band — dark green */
.studio{background:var(--green); color:#D7E0D8; padding:92px 0}
.studio h2{color:#F4F7F2; font:600 clamp(28px,3.6vw,42px)/1.14 'Cinzel',serif; margin:0 0 20px}
.studio .eyebrow{color:var(--gold-lift)}
.studio .eyebrow::before{background:var(--gold-lift)}
.studio-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center}
.studio-logo{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r); padding:44px; display:grid; place-items:center}
.studio-logo img{max-width:220px}
.studio p{font-size:17px; margin:0 0 18px; color:#C6D2C7}
.studio p:last-of-type{margin-bottom:0}
.studio q{display:block; font:500 19px/1.5 'Cinzel',serif; color:#F4F7F2; quotes:none;
  border-left:2px solid var(--gold-lift); padding-left:20px; margin:28px 0 0}

/* newsletter */
.news{padding:84px 0; background:var(--paper); border-top:1px solid var(--line); text-align:center}
.news h2{font:600 clamp(24px,3vw,34px)/1.15 'Cinzel',serif; margin:0 0 12px}
.news p{margin:0 auto 28px; max-width:46ch}
.news form{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; max-width:520px; margin:0 auto}
.news input{flex:1 1 260px; padding:15px 18px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--white); font:400 15px 'Archivo',sans-serif; color:var(--ink)}
.news input:focus{border-color:var(--gold); outline:none}
.news small{display:block; margin-top:16px; color:var(--muted); font-size:13px}

/* ============================================================
   FOOTER — constant
   ============================================================ */
.foot{background:var(--green); color:#B9C6BB; padding:64px 0 34px}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px}
.foot-brand img{height:76px; width:auto; margin-bottom:18px}
.foot-brand p{font-size:14px; max-width:32ch; margin:0; color:#A9B7AB}
.foot h5{margin:0 0 16px; font:500 10px/1 'IBM Plex Mono',monospace; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-lift)}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:11px; font-size:14px}
.foot a{text-decoration:none; opacity:.85; transition:.18s}
.foot a:hover{opacity:1; color:var(--gold-lift)}
.foot-note{margin-top:46px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1);
  font-size:12px; color:#8D9C8F; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
.foot-note div{display:flex; gap:18px}

/* ============================================================
   ZOMBIE OVERLORD PAGE
   Product voice = deep green canvas + gold, still bright overall.
   ============================================================ */
.crumb{background:var(--paper); border-bottom:1px solid var(--line); padding:14px 0}
.crumb span{color:var(--muted)}
.crumb a{text-decoration:none; color:var(--muted)}
.crumb a:hover{color:var(--ink)}
.crumb i{font-style:normal; color:var(--line); padding:0 9px}

.zo-hero{background:var(--green); color:#D7E0D8; padding:76px 0 80px; position:relative; overflow:hidden}
.zo-hero::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(900px 420px at 78% 42%, rgba(200,162,52,.13), transparent 70%)}
.zo-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; z-index:1}
.zo-grid>*{min-width:0}
.zo-hero .mono{color:var(--gold-lift)}
/* min() keeps the title from forcing the grid column wider than the viewport */
.zo-title{max-width:min(100%,520px); margin:20px 0 22px}
.zo-line{font:500 21px/1.45 'Archivo',sans-serif; color:#E4EBE4; max-width:30ch; margin:0 0 30px}
.zo-line b{color:var(--gold-lift); font-weight:600}
.spec{display:flex; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14); margin:0 0 30px}
.spec div{padding:16px 24px 16px 0; margin-right:24px; border-right:1px solid rgba(255,255,255,.14)}
.spec div:last-child{border-right:0; margin-right:0}
.spec dt{font:500 9px/1 'IBM Plex Mono',monospace; letter-spacing:.2em; text-transform:uppercase;
  color:#93A395; margin-bottom:9px}
.spec dd{margin:0; font:700 17px/1 'Archivo',sans-serif; color:#F2F5F0}
.zo-art{border-radius:var(--r); border:1px solid rgba(255,255,255,.12); overflow:hidden}
.zo-art img{width:100%; aspect-ratio:1/1; object-fit:cover}
.zo-cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.zo-cta .note{font:500 11px/1.4 'IBM Plex Mono',monospace; letter-spacing:.1em;
  text-transform:uppercase; color:#93A395}

.play{padding:88px 0}
.beats{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px}
.beat{border:1px solid var(--line); border-radius:var(--r); padding:32px 30px; background:var(--white)}
.beat .num{font:500 10px/1 'IBM Plex Mono',monospace; letter-spacing:.2em; color:var(--gold); margin-bottom:16px}
.beat h4{font:700 25px/1 'Cinzel',serif; margin:0 0 14px; color:var(--green)}
.beat p{margin:0; font-size:15px}

.gal{padding:0 0 92px}
.gal-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:38px}
.gal figure{margin:0}
.gal img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); border:1px solid var(--line)}
.gal figcaption{margin-top:10px; color:var(--muted); font:500 10px/1 'IBM Plex Mono',monospace;
  letter-spacing:.14em; text-transform:uppercase}

/* preorder / store block — shared component */
.store{padding:84px 0; background:var(--paper); border-top:1px solid var(--line)}
.buys{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:0 0 26px}
.buy{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:26px;
  display:flex; gap:22px; align-items:center}
.buy--feat{border:1px solid var(--gold); box-shadow:0 0 0 3px rgba(176,129,47,.09)}
.buy img{flex:0 0 104px; width:104px; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); border:1px solid var(--line)}
.buy .tagbest{color:var(--gold); display:block; margin-bottom:9px}
.buy h4{margin:0 0 8px; font:700 19px/1.2 'Cinzel',serif}
.buy .price{font:700 27px/1 'Archivo',sans-serif; color:var(--ink); margin:0 0 4px}
.buy .ship{color:var(--muted); font-size:13px; margin:0 0 16px}
.trust{display:flex; gap:32px; flex-wrap:wrap; padding-top:24px; border-top:1px solid var(--line);
  color:var(--muted); font-size:13px}
.trust b{color:var(--ink); font-weight:600}

/* ---------- premise + flow chain ---------- */
.premise{padding:88px 0 0}
.premise-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center}
.premise h2{font:600 clamp(28px,3.6vw,42px)/1.12 'Cinzel',serif; margin:0 0 18px}
.premise .big{font:500 21px/1.5 'Archivo',sans-serif; color:var(--ink); margin:0 0 20px}
.premise .big b{color:var(--gold); font-weight:600}
.premise p{margin:0 0 16px}
.premise figure{margin:0}
.premise figure img{border-radius:var(--r); border:1px solid var(--line); aspect-ratio:4/3; object-fit:cover}
.flow{margin:44px 0 0; padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; gap:14px}
.flow span{font:500 11px/1 'IBM Plex Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--ink)}
.flow i{font-style:normal; color:var(--gold)}

/* ---------- pillars: alternating image / copy ---------- */
.pillars{padding:88px 0}
.pillar{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:44px 0;
  border-top:1px solid var(--line)}
.pillar:first-of-type{border-top:0}
.pillar:nth-child(even) .pillar-fig{order:2}
.pillar-fig img{border-radius:var(--r); border:1px solid var(--line); aspect-ratio:4/3; object-fit:cover}
.pillar h3{font:700 clamp(22px,2.5vw,29px)/1.15 'Cinzel',serif; margin:0 0 12px; color:var(--green)}
.pillar .kicker{font:500 17px/1.5 'Archivo',sans-serif; color:var(--ink); margin:0 0 14px}
.pillar p{margin:0 0 14px; font-size:15px}
.pillar ul{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px}
.pillar li{position:relative; padding-left:22px; font-size:15px}
.pillar li::before{content:"✦"; position:absolute; left:0; color:var(--gold); font-size:12px; top:3px}

/* ---------- contrast band: not a passive deck-builder ---------- */
.vs{background:var(--green); color:#D7E0D8; padding:88px 0}
.vs h2{color:#F4F7F2; font:600 clamp(28px,3.6vw,42px)/1.14 'Cinzel',serif; margin:0 0 14px}
.vs .eyebrow{color:var(--gold-lift)}
.vs .eyebrow::before{background:var(--gold-lift)}
.vs .sec-head p{color:#C6D2C7}
.vs-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:44px}
.vs-item{border:1px solid rgba(255,255,255,.13); border-radius:var(--r); padding:28px 30px;
  background:rgba(255,255,255,.035)}
.vs-item h4{color:#F4F7F2; font:600 18px/1.25 'Archivo',sans-serif; margin:0 0 10px;
  display:flex; gap:11px; align-items:flex-start}
.vs-item h4::before{content:"✔"; color:var(--gold-lift); flex:0 0 auto}
.vs-item p{margin:0; font-size:15px; color:#B6C4B8}
.vs-close{margin:40px 0 0; padding-top:28px; border-top:1px solid rgba(255,255,255,.12);
  font:500 19px/1.5 'Cinzel',serif; color:#F4F7F2}
.vs-close b{color:var(--gold-lift); font-weight:500}

/* ---------- a turn in five steps ---------- */
.turn{padding:88px 0; background:var(--paper); border-top:1px solid var(--line)}
.steps{counter-reset:s; margin-top:44px; border-top:1px solid var(--line)}
.step{counter-increment:s; display:grid; grid-template-columns:74px 1fr; gap:26px;
  padding:26px 0; border-bottom:1px solid var(--line); align-items:start}
.step::before{content:counter(s,decimal-leading-zero); font:600 26px/1 'Cinzel',serif; color:var(--gold)}
.step h4{font:700 20px/1.2 'Cinzel',serif; margin:0 0 8px; color:var(--green)}
.step p{margin:0; font-size:15px; max-width:64ch}
.turn-win{margin-top:34px; display:flex; gap:22px; align-items:center; flex-wrap:wrap;
  background:var(--white); border:1px solid var(--gold); border-radius:var(--r); padding:26px 30px}
.turn-win h4{font:700 20px/1.2 'Cinzel',serif; margin:0 0 6px; color:var(--ink)}
.turn-win p{margin:0; font-size:15px; max-width:62ch}

/* ---------- three editions ---------- */
.eds{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:0 0 26px}
.ed{background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  display:flex; flex-direction:column; overflow:hidden}
.ed--feat{border-color:var(--gold); box-shadow:0 0 0 3px rgba(176,129,47,.09)}
.ed-img{background:var(--green-tint); border-bottom:1px solid var(--line)}
.ed-img img{width:100%; aspect-ratio:3/2; object-fit:cover}
.ed-body{padding:26px 26px 28px; display:flex; flex-direction:column; flex:1}
.ed .tagbest{color:var(--gold); display:block; margin-bottom:10px}
.ed h4{margin:0 0 12px; font:700 20px/1.2 'Cinzel',serif}
.ed .price{font:700 30px/1 'Archivo',sans-serif; color:var(--ink); margin:0 0 4px}
.ed .ship{color:var(--muted); font-size:13px; margin:0 0 18px}
.ed ul{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:9px; font-size:14px}
.ed li{position:relative; padding-left:20px}
.ed li::before{content:"✔"; position:absolute; left:0; color:var(--gold); font-size:11px; top:3px}
.ed .btn{margin-top:auto; text-align:center}

/* ---------- add-ons ---------- */
.addons{margin-top:56px; padding-top:44px; border-top:1px solid var(--line)}
.addon-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px}
.addon{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:22px}
.addon img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--r);
  border:1px solid var(--line); margin-bottom:18px}
.addon{display:flex; flex-direction:column}
.addon .row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:9px}
.addon h4{margin:0; font:700 17px/1.2 'Cinzel',serif}
.addon .price{font:700 17px/1 'Archivo',sans-serif; color:var(--gold); white-space:nowrap}
.addon p{margin:0; font-size:14px}
.addon-cta{margin-top:auto; padding-top:18px; display:flex; gap:8px; flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important; scroll-behavior:auto}}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .hero-grid,.zo-grid,.studio-grid{grid-template-columns:1fr; gap:40px}
  .gcard{grid-template-columns:1fr}
  .gcard-img img{min-height:260px}
  .gcard-body{padding:32px 28px}
  .proof-in{grid-template-columns:1fr 1fr; gap:22px}
  .beats{grid-template-columns:1fr}
  .gal-grid{grid-template-columns:1fr 1fr}
  .buys{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav{display:none}
  .hero-fig figcaption{position:static; margin-top:12px}
  .premise-grid,.pillar{grid-template-columns:1fr; gap:32px}
  .pillar:nth-child(even) .pillar-fig{order:0}
  .vs-grid,.eds,.addon-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .wrap,.chrome-in,.proof-in{padding-left:20px; padding-right:20px}
  .hero{padding:56px 0 48px}
  .studio-logo{padding:28px}
  .foot-grid{grid-template-columns:1fr}
  .buy{flex-direction:column; align-items:flex-start}
  .step{grid-template-columns:1fr; gap:10px}
  .flow{gap:9px}
  .flow span{font-size:10px}
}