/* Mycopunk Guide — SAXON hazard-crew skin (mycopunkguide.wiki)
   Palette + type brief: DESIGN-BRIEF.md. Hex-grid motif = the game's upgrade grid. */
@font-face{font-family:"Archivo Black";src:url(assets/fonts/archivo-black.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url(assets/fonts/archivo-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url(assets/fonts/archivo-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Archivo;src:url(assets/fonts/archivo-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(assets/fonts/plexmono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(assets/fonts/plexmono-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --void:#120f0e; --void-2:#0c0a09;
  --panel:#1b1614; --panel-2:#241d19; --panel-3:#2e241e;
  --rust:#e2512f; --rust-deep:#8f2c1a; --rust-soft:#f46948;
  --spore:#bbe86b; --spore-dim:#7d9463;
  --bone:#f3ead8; --mut:#b6a695; --line:#3b2f27;
  --cryo:#8fc7e0; --epic:#b98cf0; --rare:#6fc3d8; --std:#9c9086; --odd:#f0b13c;
  --accent:#bbe86b;
  --display:"Archivo Black",Impact,"Arial Black",sans-serif;
  --font:Archivo,"Segoe UI",system-ui,sans-serif;
  --mono:"Plex Mono",ui-monospace,Consolas,monospace;
  --maxw:1240px;
  --hard:6px 6px 0 rgba(0,0,0,.55);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;background:var(--void);color:var(--bone);font:400 17px/1.68 var(--font);
  background-image:
    radial-gradient(circle at 12% 6%,rgba(187,232,107,.07),transparent 42%),
    radial-gradient(circle at 88% 0%,rgba(226,81,47,.13),transparent 46%),
    radial-gradient(circle at 50% 100%,rgba(125,148,99,.08),transparent 55%);
  background-attachment:fixed;
}
img{max-width:100%;height:auto;border:0}
a{color:var(--spore);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline;color:#d6ff96}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:-.01em;margin:0 0 .5em;text-transform:uppercase}
strong,b{color:#fff;font-weight:600}
code{font-family:var(--mono);font-size:.88em;background:#0d0b0a;border:1px solid var(--line);padding:1px 5px;border-radius:2px;color:var(--spore)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--spore);color:#111;padding:8px 14px}

/* ---------- ribbon + topbar ---------- */
.ribbon{
  font:600 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#f2c96b;
  background:#1a1512;
  border-bottom:2px solid #0c0a09;
}
.ribbon::before{content:"";display:block;height:6px;
  background:repeating-linear-gradient(45deg,#e2b23f 0 14px,#191512 14px 28px)}
.ribbon .wrap{padding:8px 18px;display:flex;gap:10px;align-items:center}
.ribbon .wrap::before{content:"\25B2";font-size:9px}
.topbar{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(rgba(25,19,17,.95),rgba(18,16,14,.97));
  border-bottom:2px solid var(--rust);
}
.bar{display:flex;align-items:center;gap:20px;padding:11px 18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--bone);font-family:var(--display);font-size:19px;text-transform:uppercase}
.brand:hover{text-decoration:none;color:#fff}
.brand img{width:38px;height:38px;border:2px solid var(--line);border-radius:4px;background:#0d0b0a}
.nav{display:flex;align-items:center;gap:18px;margin-left:auto;flex-wrap:wrap}
.nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap;align-items:center}
.nav li{position:relative}
.nav a{
  display:block;padding:9px 12px;color:var(--bone);font:600 12.5px/1 var(--mono);
  letter-spacing:.13em;text-transform:uppercase;border:1px solid transparent;border-radius:2px;
}
.nav a:hover{background:var(--panel-2);border-color:var(--line);text-decoration:none;color:#fff}
.nav li.active>a{color:var(--spore);border-color:var(--spore-dim)}
.nav .has-kids>a::after{content:" \25BE";color:var(--rust-soft);font-size:11px}
.nav .kids{
  display:none;position:absolute;top:calc(100% + 8px);left:-14px;min-width:272px;z-index:50;
  flex-direction:column;gap:0;padding:8px;margin:0;
  background:var(--panel-2);border:2px solid var(--line);border-top:3px solid var(--rust);
  box-shadow:var(--hard);
}
.nav .kids li{width:100%}
.nav .kids a{padding:9px 10px;font-size:11.5px;letter-spacing:.06em;white-space:nowrap;text-transform:none;border-bottom:1px solid #2a211c}
.nav .kids a:hover{background:#31261f;border-color:#3d2f26}
.nav .has-kids:hover .kids,.nav .has-kids:has(:focus-visible) .kids{display:flex}
.nav .has-kids::after{content:"";display:none;position:absolute;left:-14px;top:100%;width:272px;height:10px}
.nav .has-kids:hover::after,.nav .has-kids:has(:focus-visible)::after{display:block}
a.cta{
  display:inline-block;padding:11px 16px;background:#b63818;color:#fff;
  font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  border:2px solid #7a2517;box-shadow:3px 3px 0 #0a0807;
}
a.cta:hover{background:#c9421f;color:#fff;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
main{display:block;padding-bottom:8px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:2px solid var(--rust);isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--hero);background-size:cover;background-position:center 42%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(96deg,rgba(12,10,9,.96) 0%,rgba(14,11,10,.9) 38%,rgba(18,15,14,.42) 64%,rgba(18,15,14,.1) 100%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);
}
.hero-in{padding:64px 22px 56px;max-width:840px;min-height:392px;display:flex;flex-direction:column;justify-content:center}
.eyebrow{
  display:inline-block;margin:0 0 16px;padding:5px 10px;
  font:600 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--spore);background:rgba(12,10,9,.72);border:1px solid var(--spore-dim);border-left:4px solid var(--spore);
}
.hero h1{font-size:clamp(38px,6.2vw,80px);margin:0 0 6px;color:#fff;text-shadow:5px 5px 0 rgba(0,0,0,.6)}
.hero h1 .h1-2{
  display:block;margin-top:10px;font-family:var(--mono);font-size:clamp(13px,1.7vw,19px);
  letter-spacing:.2em;color:var(--rust-soft);text-shadow:none;
}
.lead{font-size:clamp(16px,1.6vw,19px);color:#e8dcc6;max-width:60ch;margin:10px 0 22px;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:0}
.btn{
  display:inline-block;padding:13px 20px;background:#b63818;color:#fff;
  font:600 12.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  border:2px solid #7a2517;box-shadow:4px 4px 0 #0a0807;
}
.btn:hover{background:#c9421f;color:#fff;text-decoration:none}
.btn.ghost{background:rgba(12,10,9,.6);border-color:var(--spore-dim);color:var(--spore)}
.btn.ghost:hover{background:#1d2415;color:#dcffa4}

/* ---------- facts strip ---------- */
.facts-strip{background:linear-gradient(#161211,#1b1614);border-bottom:2px solid var(--line)}
.facts{display:flex;flex-wrap:wrap;gap:12px;padding:18px 22px}
.fact{
  flex:1 1 190px;display:flex;flex-direction:column;gap:4px;padding:12px 14px 12px 18px;
  background:var(--panel-2);border:1px solid var(--line);border-left:4px solid var(--spore);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
}
.fact-k{display:block;font:600 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.fact-v{display:block;font:600 16px/1.25 var(--mono);color:var(--bone)}

/* ---------- section head ---------- */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:34px 0 16px;border-bottom:2px solid var(--line);padding-bottom:10px;flex-wrap:wrap}
.section-head h2{font-size:clamp(22px,3vw,32px);margin:0;display:flex;align-items:center;gap:12px}
.section-head .overline{display:block;font:600 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--rust-soft);padding-bottom:7px}
.overline{font:600 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--rust-soft)}
.count-pill{
  font:600 11px/1 var(--mono);color:#12100e;background:var(--spore);padding:5px 8px;border-radius:2px;
  box-shadow:2px 2px 0 rgba(0,0,0,.5);
}

/* ---------- cards ---------- */
.grid{display:flex;flex-wrap:wrap;gap:18px;margin:0}
.grid[data-n="2"]>.card{flex:1 1 calc(50% - 9px)}
.grid[data-n="3"]>.card{flex:1 1 calc(33.333% - 12px)}
.grid-title{margin-bottom:0}
.card{
  flex:1 1 300px;display:flex;flex-direction:column;min-width:0;
  background:var(--panel);border:2px solid var(--line);box-shadow:5px 5px 0 rgba(0,0,0,.55);
  color:var(--bone);transition:transform .12s ease,border-color .12s ease;
}
.card:hover{transform:translate(-2px,-2px);border-color:var(--rust);text-decoration:none;color:var(--bone)}
.thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0c0a09;border-bottom:2px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pill-tag{
  position:absolute;top:9px;left:9px;padding:4px 8px;
  font:600 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  background:var(--std);color:#100e0c;border-radius:1px;box-shadow:2px 2px 0 rgba(0,0,0,.6);
}
.card-body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.card-body h3{font-size:17px;margin:0;color:#fff;line-height:1.15}
.card-body p{margin:0;font-size:14px;color:var(--mut);line-height:1.5}
.card .go{margin-top:auto;font:600 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--spore)}
.card .stamp{font:400 10.5px/1 var(--mono);color:#a2948a;letter-spacing:.06em}
.card.sm{flex:1 1 240px}
.card.sm .card-body h3{font-size:15px}

/* ---------- home prose ---------- */
.home-prose{background:var(--panel);border:2px solid var(--line);border-top:3px solid var(--rust);padding:26px 26px 30px;margin:26px 0 8px;box-shadow:var(--hard)}
.home-prose>h2:first-child{margin-top:0}
.home-prose h2{font-size:clamp(21px,2.6vw,28px);margin:30px 0 12px;padding-left:14px;border-left:5px solid var(--spore);color:#fff}
.home-prose h3{font-size:17px;margin:20px 0 8px;color:var(--spore)}
.home-prose p,.home-prose li{color:#e4d8c4}
.home-prose>p,.home-prose>ul,.home-prose>ol,.home-prose>blockquote,.home-prose>.callout,.home-prose>h2,.home-prose>h3{max-width:94ch}

/* ---------- article ---------- */
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 258px;gap:30px;align-items:start;padding-top:22px}
.article-grid>div{min-width:0}
.crumb{font:400 11.5px/1.5 var(--mono);letter-spacing:.05em;color:var(--mut);margin:0 0 14px;text-transform:uppercase}
.crumb a{color:var(--mut)}
.crumb a:hover{color:var(--spore)}
.crumb .sep{color:#9a8874;margin:0 6px}
.crumb .here{color:var(--bone)}
article{background:var(--panel);border:2px solid var(--line);border-top:3px solid var(--rust);padding:26px 26px 30px;box-shadow:var(--hard);min-width:0}
article>h1{font-size:clamp(27px,3.6vw,42px);margin:0 0 16px;color:#fff}
.art-lead{color:#cdbfa9;font-size:17px;margin:6px 0 4px;max-width:74ch}
.art-meta{color:#a2948a;font-size:12.5px;margin:0 0 18px;font-family:var(--mono)}
.quick-answer{position:relative;margin:0 0 22px;padding:18px 18px 16px;background:#1f2a16;border:2px solid var(--spore-dim);border-left:6px solid var(--spore)}
.quick-answer p{margin:0;color:#e9f7d2;font-size:16px}
.qa-stamp{display:inline-block;margin-bottom:9px;padding:4px 8px;background:var(--spore);color:#12140c;font:600 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
article h2{font-size:clamp(20px,2.4vw,27px);margin:34px 0 12px;padding:0 0 8px;border-bottom:2px solid var(--line);color:#fff}
article h2::before{content:"\/\/ ";color:var(--rust);font-family:var(--mono);font-size:.7em}
article h3{font-size:17.5px;margin:22px 0 8px;color:var(--spore)}
article p,article li{color:#e2d6c2}
article p{margin:0 0 15px}
article ul,article ol{margin:0 0 16px;padding-left:22px}
article li{margin:0 0 7px}
article li::marker{color:var(--rust-soft)}
article img.zoom{width:100%;display:block;margin:18px 0 8px;border:2px solid var(--line);cursor:zoom-in}
article strong{color:#fff}
article a{border-bottom:1px solid rgba(187,232,107,.35)}
blockquote{margin:0 0 18px;padding:14px 16px;background:#171310;border-left:5px solid var(--rust);color:#ddcfba;font-style:italic}
.tbl-wrap{max-width:100%;overflow-x:auto;margin:0 0 20px;border:2px solid var(--line);background:#151110}
.tbl-wrap table{min-width:520px}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px}
th,td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid #302620}
thead th{background:linear-gradient(#2a2019,#221a15);color:var(--spore);font:600 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid var(--rust)}
tbody tr:nth-child(even){background:#1b1613}
tbody tr:hover{background:#241c17}
table strong,table b{color:inherit}
td{color:#ded2be}
.callout{
  margin:0 0 20px;padding:15px 16px 13px;background:#1d1a14;border:1px solid var(--line);
  border-left:7px solid var(--odd);
  background-image:repeating-linear-gradient(45deg,rgba(240,177,60,.07) 0 8px,transparent 8px 16px);
}
.callout p:last-child{margin:0}
.callout.tip{border-left-color:var(--spore);background-color:#1b2315}
.callout.warn{border-left-color:var(--rust);background-color:#241512;background-image:repeating-linear-gradient(45deg,rgba(226,81,47,.12) 0 8px,transparent 8px 16px)}

.toc{position:sticky;top:88px;background:var(--panel-2);border:2px solid var(--line);border-top:3px solid var(--rust);padding:14px 14px 16px}
.toc .overline{display:block;margin-bottom:10px}
.toc-list{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.toc-list a{font:400 12px/1.4 var(--mono);color:var(--mut);padding:5px 8px;border-left:2px solid #3a2e26}
.toc-list a:hover{color:var(--spore);border-left-color:var(--spore);background:#221b16;text-decoration:none}
.all-guides{margin-top:38px;border-top:2px dashed var(--line);padding-top:8px}
.all-guides .section-head h2{font-size:22px}

/* ---------- ad slot (key empty on purpose) ---------- */
.ad-slot,.ad-inner{display:none}
.ad-label{margin:0 0 8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
@media (hover: hover) and (pointer: fine){.ad-slot{display:none}}

/* ---------- footer ---------- */
.foot{background:var(--void-2);border-top:2px solid var(--rust);margin-top:34px}
.foot .wrap{padding:26px 22px 34px}
.disclaimer{font-size:12.5px;color:#a2948a;max-width:82ch;margin:0 0 12px;line-height:1.6}
.foot-links{font:400 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:0 0 10px}
.foot-links a{color:var(--mut)}
.foot-links a:hover{color:var(--spore)}
.muted{font:400 11px/1.5 var(--mono);color:#a3948a;margin:0}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:99;display:flex;align-items:center;justify-content:center;background:rgba(6,5,4,.95);cursor:zoom-out;padding:20px}
.lightbox img{max-width:min(1500px,96vw);max-height:92vh;width:auto;height:auto;border:2px solid var(--line);box-shadow:0 0 60px rgba(0,0,0,.9)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .article-grid{grid-template-columns:minmax(0,1fr) 222px;gap:20px}
  .grid[data-n="3"]>.card,.grid[data-n="4"]>.card{flex:1 1 calc(50% - 9px)}
  th,td{padding:9px 10px}
  table{font-size:13.5px}
}
@media (max-width:980px){
  .article-grid{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;order:2;margin-top:22px}
  .toc-list{flex-direction:row;flex-wrap:wrap;gap:6px}
  .toc-list a{border-left:0;border:1px solid var(--line)}
}
@media (max-width:820px){
  .bar{gap:10px;padding:10px 16px}
  .nav{margin-left:0;width:100%;gap:10px}
  .nav ul{gap:4px}
  .nav a{padding:8px 9px;font-size:11.5px;letter-spacing:.08em}
  .nav .kids{display:none}
  .nav .has-kids>a::after{content:""}
  .nav .has-kids::after{display:none}
  .nav a.cta{width:100%;text-align:center}
  .hero-in{padding:44px 18px 40px;min-height:0}
  .home-prose,article{padding:20px 16px 24px}
  .facts{padding:14px 16px}
  .fact{flex:1 1 46%}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding:0 14px}
  .grid[data-n="2"]>.card,.grid[data-n="3"]>.card,.grid[data-n="4"]>.card,.card{flex:1 1 100%}
  .fact{flex:1 1 100%}
  .section-head{flex-direction:column;align-items:flex-start;gap:6px}
  .hero h1{text-shadow:3px 3px 0 rgba(0,0,0,.7)}
  .foot-links{line-height:1.9}
  table,.tbl-wrap table{min-width:440px}
  th{white-space:normal}
  td{overflow-wrap:anywhere}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}