/* Wreckfest 2 Guides — shared site stylesheet (cream/gold house style). */
:root{
  --bg:#f2efe7; --paper:#faf8f2; --paper2:#fdfcf8; --ink:#2b2a26;
  --muted:#55524a; --faint:#8a8578; --border:#d8d2c2; --dark:#23221f;
  --gold:#e8a33d; --accent:#e8a33d;
  --maxw:1080px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Helvetica,Arial,sans-serif; line-height:1.55; font-size:16px;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px;}
a{color:#9a5a12; text-decoration:none;}
a:hover{text-decoration:underline;}
.skip{position:absolute; left:-9999px; top:0; background:var(--dark); color:#fff; padding:8px 14px; z-index:100;}
.skip:focus{left:8px; top:8px;}

/* Masthead + nav */
.masthead{background:var(--dark); color:#f5f2ea; border-bottom:3px solid var(--gold);}
.masthead-inner{display:flex; align-items:center; gap:16px; min-height:60px; flex-wrap:wrap;}
.brand{color:#f5f2ea; font-weight:bold; font-size:17px; letter-spacing:.3px; margin-right:auto;}
.brand:hover{text-decoration:none;}
.brand-w{color:var(--gold);}
.nav{display:flex; gap:4px; flex-wrap:wrap;}
.nav a{color:#c9c4b6; padding:8px 12px; border-radius:6px; font-size:14px; font-weight:600;}
.nav a:hover{color:#fff; background:#33322d; text-decoration:none;}
.nav a.active{color:var(--dark); background:var(--gold);}
.navtoggle{display:none; background:#33322d; color:#f5f2ea; border:1px solid #4a483f;
  border-radius:6px; padding:8px 12px; font-size:14px; cursor:pointer;}
@media(max-width:760px){
  .navtoggle{display:block;}
  .nav{display:none; width:100%; flex-direction:column;}
  body.nav-open .nav{display:flex;}
}

/* Content */
h1,h2,h3{line-height:1.25; color:var(--dark);}
h1{font-size:30px; margin:26px 0 8px;}
h2{font-size:22px; margin:34px 0 10px; border-bottom:2px solid var(--accent); padding-bottom:4px;}
h3{font-size:18px; margin:22px 0 6px;}
p{margin:12px 0;}
.lead{font-size:18px; color:var(--muted); max-width:70ch;}
.eyebrow{text-transform:uppercase; letter-spacing:2px; font-size:12px; color:var(--faint);
  font-weight:700; margin:24px 0 0;}
hr{border:0; border-top:1px solid var(--border); margin:28px 0;}
main{padding-bottom:40px;}

/* Hero / path picker */
.hero{background:var(--paper); border:1px solid var(--border); border-radius:14px;
  padding:28px 28px 8px; margin:24px 0;}
.paths{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:20px 0 4px;}
.path{display:block; background:var(--paper2); border:1px solid var(--border);
  border-left:5px solid var(--accent); border-radius:12px; padding:18px 20px; color:inherit;}
.path:hover{text-decoration:none; box-shadow:0 3px 14px rgba(35,34,31,.10); transform:translateY(-2px);
  transition:.15s;}
.path h3{margin:0 0 6px;}
.path p{margin:0; color:var(--muted); font-size:15px;}

/* Card / tile grids */
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin:22px 0;}
.tile{display:block; background:var(--paper2); border:1px solid var(--border);
  border-top:6px solid var(--accent); border-radius:12px; padding:16px 18px; color:inherit;}
.tile:hover{text-decoration:none; box-shadow:0 3px 14px rgba(35,34,31,.10); transform:translateY(-2px);
  transition:.15s;}
.tile .row{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
.tile h3{margin:0;}
.tile .badge{font-size:11px; font-weight:700; letter-spacing:.5px; color:#fff;
  background:var(--accent); border-radius:20px; padding:2px 9px;}
.tile p{margin:8px 0 0; color:var(--muted); font-size:14px;}

/* Panels */
.panel{background:var(--paper); border:1px solid var(--border); border-radius:12px;
  padding:18px 20px; margin:18px 0;}
.panel.accent{border-left:5px solid var(--accent);}
.note{background:#fbf4e6; border:1px solid #ecd9ac; border-radius:10px; padding:12px 16px;
  color:#6a5a30; font-size:14.5px; margin:18px 0;}
.crumbs{font-size:13px; color:var(--faint); margin:18px 0 0;}
.crumbs a{color:var(--faint);}

/* Download / link lists */
.linklist{list-style:none; padding:0; margin:16px 0;}
.linklist li{border:1px solid var(--border); border-radius:10px; margin:8px 0; background:var(--paper2);}
.linklist a{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; color:inherit;}
.linklist a:hover{text-decoration:none; background:#f4efe3;}
.linklist .meta{color:var(--faint); font-size:13px; white-space:nowrap;}
.dl-actions{display:flex; flex-wrap:wrap; gap:10px; margin:16px 0;}
.btn{display:inline-block; background:var(--accent); color:#fff; border-radius:8px;
  padding:9px 16px; font-weight:600; font-size:14px;}
.btn:hover{text-decoration:none; filter:brightness(1.06);}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--border);}

/* Embedded self-contained pages (cards + interactive guides) */
.embed{width:100%; border:1px solid var(--border); border-radius:12px; background:#fff;
  display:block; overflow:hidden;}
.embed-note{font-size:13px; color:var(--faint); margin:6px 0 0;}

/* Markdown-rendered reference prose */
.prose{max-width:78ch;}
.prose table{border-collapse:collapse; width:100%; margin:16px 0; font-size:14.5px; display:block; overflow-x:auto;}
.prose th,.prose td{border:1px solid var(--border); padding:7px 10px; text-align:left; vertical-align:top;}
.prose th{background:var(--paper); color:var(--dark);}
.prose tr:nth-child(even) td{background:var(--paper2);}
.prose ul{margin:12px 0; padding-left:22px;}
.prose li{margin:5px 0;}
.prose img{max-width:100%; height:auto; border:1px solid var(--border); border-radius:10px; background:#fff;}
figure{margin:20px 0;}
figure figcaption{font-size:13px; color:var(--faint); margin-top:6px;}

/* Footer */
.footer{background:var(--dark); color:#c9c4b6; margin-top:40px; padding:26px 0 34px;
  border-top:3px solid var(--gold); font-size:13.5px;}
.footer a{color:#d9cfa0;}
.disclaimer{max-width:80ch; line-height:1.6;}
.foot-nav{margin-top:14px; color:#8a8578;}