/* World of Anterra Guide — bespoke skin.
   Palette sampled from official Steam screenshots (see DESIGN-BRIEF.md).
   Page = night forest teal; panels = parchment; rules = aged gold; shadows = hard ink. */

@font-face{font-family:Cinzel;font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/cinzel-700.woff2) format('woff2')}
@font-face{font-family:Alegreya;font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/alegreya-400.woff2) format('woff2')}
@font-face{font-family:Alegreya;font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/alegreya-700.woff2) format('woff2')}
@font-face{font-family:Silkscreen;font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/silkscreen-400.woff2) format('woff2')}

:root{
  --night:#0c1f1b; --night-2:#17362e; --night-3:#0a1714;
  --moss:#25482f; --leaf:#6fa24a; --water:#5fa996;
  --gold:#d3a85a; --gold-hi:#f2d491; --gold-deep:#96702c;
  --paper:#ecdcb4; --paper-2:#e2c896; --paper-3:#d8bd8a;
  --ink:#241a10; --ink-soft:#4b3620; --rust:#a8451f; --seal:#8d2b1f;
  --edge:#2a1d11; --shadow:6px 6px 0 rgba(4,12,10,.8);
  --maxw:1180px; --font:Alegreya,Georgia,'Times New Roman',serif;
  --display:Cinzel,Georgia,serif; --pixel:Silkscreen,'Courier New',monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--night)}
body{
  margin:0;font-family:var(--font);font-size:17px;line-height:1.66;color:var(--ink);
  background:
    radial-gradient(900px 520px at 12% -6%, rgba(96,150,120,.30), transparent 62%),
    radial-gradient(760px 460px at 88% 4%, rgba(211,168,90,.16), transparent 60%),
    radial-gradient(700px 700px at 50% 120%, rgba(37,72,47,.55), transparent 70%),
    linear-gradient(180deg,#10302a 0%,#0c1f1b 46%,#091714 100%);
  background-attachment:fixed;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(rgba(242,212,145,.10) .7px,transparent .8px);
  background-size:4px 4px}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-hi);text-underline-offset:3px}
a:hover{color:#fff}
strong,b{font-weight:700;color:var(--ink)}
h1,h2,h3{font-family:var(--display);font-weight:700;color:var(--ink);margin:0;line-height:1.12;letter-spacing:.01em}
p{margin:0 0 15px}
ul,ol{margin:0 0 17px;padding-left:24px}
li{margin:0 0 8px}
ul{list-style:none;padding-left:22px}
ul>li{position:relative}
ul>li::before{content:"";position:absolute;left:-17px;top:.62em;width:7px;height:7px;background:var(--gold-deep);
  transform:rotate(45deg);box-shadow:1px 1px 0 var(--ink)}
code{font-family:var(--pixel);font-size:.86em;background:rgba(150,112,44,.16);border:1px solid rgba(150,112,44,.45);
  padding:1px 5px;border-radius:2px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--paper);color:var(--ink);padding:10px 16px;z-index:99;font-family:var(--pixel)}
.skip:focus{left:10px;top:10px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;position:relative;z-index:1}

/* ---------- top bar ---------- */
.topbar{position:relative;z-index:20;background:linear-gradient(180deg,#0a1a16 0%,#122b24 100%);
  border-bottom:2px solid var(--edge);
  box-shadow:inset 0 -1px 0 rgba(211,168,90,.35),0 3px 0 rgba(4,12,10,.55)}
.bar{display:flex;align-items:center;gap:15px;min-height:70px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--gold-hi)}
.brand img{width:40px;height:40px;object-fit:cover;border:2px solid var(--gold-deep);border-radius:3px;
  box-shadow:2px 2px 0 rgba(4,12,10,.9)}
.brand span{font-family:var(--display);font-size:19px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
.brand:hover span{color:#fff}
.nav{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav>ul{display:flex;align-items:center;gap:5px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav li{position:relative;margin:0}
.nav li::before{content:none}
.nav a{display:block;color:var(--paper);text-decoration:none;font-family:var(--pixel);font-size:11.5px;letter-spacing:.06em;
  padding:9px 10px;border:1px solid transparent;border-radius:2px;text-transform:uppercase}
.nav a:hover{background:rgba(211,168,90,.14);border-color:rgba(211,168,90,.55);color:#fff;text-decoration:none}
.nav li.active>a{background:rgba(211,168,90,.2);border-color:var(--gold);color:var(--gold-hi)}
.nav li.has-kids>a::after{content:" \25BE";color:var(--gold);font-size:10px}
.nav .kids{display:none;position:absolute;top:calc(100% + 6px);left:-6px;min-width:250px;z-index:60;
  flex-direction:column;gap:2px;padding:10px;margin:0;list-style:none;
  background:linear-gradient(180deg,#132b24,#0c1f1b);border:2px solid var(--edge);
  box-shadow:4px 4px 0 rgba(4,12,10,.9),inset 0 0 0 1px rgba(211,168,90,.3)}
.nav .kids::before{content:"GUIDE SECTIONS";display:block;padding:2px 4px 7px;
  font-family:var(--pixel);font-size:9px;letter-spacing:.16em;color:var(--gold-deep)}
.nav .kids a{font-size:10.5px;padding:7px 8px;border-left:2px solid transparent;text-transform:none;letter-spacing:.03em}
.nav .kids a:hover{background:rgba(211,168,90,.14);border-left-color:var(--gold);color:#fff}
.nav li.has-kids:hover .kids,.nav li.has-kids:has(:focus-visible) .kids{display:flex}
/* transparent hover bridge - kills the dead gap between parent and panel */
.nav li.has-kids::after{content:"";display:none;position:absolute;left:-6px;top:100%;width:250px;height:10px}
.nav li.has-kids:hover::after,.nav li.has-kids:has(:focus-visible)::after{display:block}
.nav a.cta{background:linear-gradient(180deg,var(--gold) 0%,#b98c40 100%);color:#1c1206;font-weight:400;
  border:2px solid var(--edge);padding:8px 13px;box-shadow:2px 2px 0 rgba(4,12,10,.9)}
.nav a.cta:hover{background:var(--gold-hi);color:#120b03;transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(4,12,10,.9)}
.langsel{font-family:var(--pixel);font-size:10.5px;letter-spacing:.08em;color:var(--paper);
  border:1px solid rgba(211,168,90,.5);padding:8px 9px;border-radius:2px;background:rgba(8,20,17,.6);white-space:nowrap}
.langsel .caret{color:var(--gold);font-size:9px}

/* ---------- ribbon ---------- */
.ribbon{background:rgba(141,43,31,.9);border-bottom:1px dashed rgba(242,212,145,.55);color:#ffeccd;
  font-family:var(--pixel);font-size:10.5px;letter-spacing:.06em;text-align:center;padding:7px 0}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:2px solid var(--edge);isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background-image:var(--hero);background-size:cover;
  background-position:center 42%;z-index:-2;transform:scale(1.02)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(7,20,17,.93) 0%,rgba(7,20,17,.86) 34%,rgba(7,20,17,.44) 62%,rgba(7,20,17,.18) 100%),
             linear-gradient(180deg,rgba(7,20,17,.35) 0%,rgba(7,20,17,0) 30%,rgba(7,20,17,.55) 100%)}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,510px);gap:34px;align-items:center;
  padding:52px 22px 56px}
.hero-copy{min-width:0}
.eyebrow{display:inline-block;margin:0 0 15px;padding:5px 11px;border:1px solid rgba(211,168,90,.6);
  background:rgba(12,31,27,.72);color:var(--gold-hi);font-family:var(--pixel);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.hero h1{font-size:clamp(36px,5.1vw,66px);line-height:.97;color:#fdf3dc;text-shadow:0 3px 0 rgba(4,12,10,.85)}
.hero h1 .sub{display:block;color:var(--gold)}
.hero .lead{margin:16px 0 0;font-size:17.5px;color:#e8dcbf;max-width:34em}
.hero-cta{margin:24px 0 0;display:flex;flex-wrap:wrap;gap:11px}
.btn{display:inline-block;padding:11px 19px;border-radius:3px;background:linear-gradient(180deg,var(--gold) 0%,#bb8f43 100%);
  color:#1b1004;text-decoration:none;font-family:var(--pixel);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  border:2px solid var(--edge);box-shadow:4px 4px 0 rgba(4,12,10,.85)}
.btn:hover{background:var(--gold-hi);color:#120b03;transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(4,12,10,.85);text-decoration:none}
.btn.ghost{background:rgba(236,220,180,.92);color:var(--ink);border-color:var(--edge)}
.btn.ghost:hover{background:var(--paper);color:var(--ink)}
.hero-shot{position:relative;margin:0;border:2px solid var(--edge);border-radius:3px;background:#0a1714;
  box-shadow:var(--shadow),inset 0 0 0 1px rgba(211,168,90,.45)}
.hero-shot::before{content:"";position:absolute;left:0;right:0;top:0;height:20px;z-index:3;
  background:linear-gradient(180deg,rgba(211,168,90,.28),rgba(211,168,90,0));
  border-bottom:1px solid rgba(211,168,90,.5)}
.hero-shot::after{content:"";position:absolute;left:9px;top:8px;width:5px;height:5px;border-radius:50%;
  background:var(--gold);box-shadow:33px 0 0 var(--gold);z-index:4}
.hero-shot img{display:block;width:100%;height:auto}
.hero-shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:7px 11px;
  background:linear-gradient(0deg,rgba(6,16,13,.92),rgba(6,16,13,0));color:#f0e3c2;
  font-family:var(--pixel);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase}

/* ---------- facts (inventory slots) ---------- */
.facts-strip{background:linear-gradient(180deg,rgba(5,14,12,.92),rgba(10,26,22,.92));
  border-bottom:2px solid var(--edge);box-shadow:inset 0 1px 0 rgba(211,168,90,.3)}
.facts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;padding:18px 22px}
.fact{background:linear-gradient(180deg,rgba(236,220,180,.10),rgba(236,220,180,.04));
  border:1px solid rgba(211,168,90,.4);border-radius:2px;padding:9px 10px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55)}
.fact-k{display:block;font-family:var(--pixel);font-size:9px;letter-spacing:.14em;color:#d8b370;text-transform:uppercase}
.fact-v{display:block;margin-top:4px;font-family:var(--pixel);font-size:14px;color:var(--gold-hi);line-height:1.35}

/* ---------- section heads ---------- */
.section-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:36px 0 4px}
.overline{display:inline-block;padding:4px 9px;background:var(--paper-3);color:var(--ink);
  border:1px solid var(--edge);transform:rotate(-1.6deg);box-shadow:2px 2px 0 rgba(4,12,10,.7);
  font-family:var(--pixel);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase}
.section-head h2{font-size:clamp(22px,2.5vw,30px);color:#fdf1d6;margin:0;text-shadow:0 2px 0 rgba(4,12,10,.8)}
.count-pill{display:inline-block;margin-left:10px;vertical-align:middle;padding:2px 9px;border-radius:999px;
  background:var(--seal);color:#ffe9c9;font-family:var(--pixel);font-size:10.5px;border:1px solid var(--edge)}

/* ---------- cards ---------- */
.grid{display:flex;flex-wrap:wrap;gap:20px;margin:20px 0 8px}
.grid[data-n="2"]>.card{flex:1 1 calc(50% - 20px)}
.grid[data-n="3"]>.card{flex:1 1 calc(33.333% - 20px)}
.card{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
  border:2px solid var(--edge);border-radius:3px;box-shadow:var(--shadow);overflow:hidden;
  transition:transform .16s ease,box-shadow .16s ease}
.card:hover{transform:translate(-2px,-3px);box-shadow:9px 10px 0 rgba(4,12,10,.8);color:var(--ink);text-decoration:none}
.thumb{position:relative;display:block;aspect-ratio:16/9;background:#0a1714;overflow:hidden;border-bottom:2px solid var(--edge)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pill-tag{position:absolute;right:8px;top:8px;padding:3px 8px;background:rgba(12,31,27,.92);color:var(--gold-hi);
  border:1px solid var(--gold-deep);border-radius:2px;font-family:var(--pixel);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase}
.card-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-body h3{font-size:17.5px;line-height:1.22}
.card-body p{margin:0;font-size:14px;color:var(--ink-soft);line-height:1.5}
.go{margin-top:auto;padding-top:6px;font-family:var(--pixel);font-size:10px;letter-spacing:.1em;color:#7a2c10;text-transform:uppercase}
.stamp{font-family:var(--pixel);font-size:9px;color:var(--gold-deep);letter-spacing:.06em}

/* ---------- home prose panel ---------- */
.home-prose,article{
  position:relative;background:
    radial-gradient(600px 300px at 90% 0%,rgba(211,168,90,.22),transparent 60%),
    linear-gradient(178deg,var(--paper) 0%,var(--paper-2) 58%,var(--paper-3) 100%);
  border:2px solid var(--edge);border-radius:3px;
  box-shadow:var(--shadow),inset 0 0 0 1px rgba(150,112,44,.5);
  padding:30px 34px 26px;margin:26px 0 34px;
}
.home-prose::before,article::before{content:"";position:absolute;inset:8px;pointer-events:none;
  border:1px dashed rgba(120,86,36,.45);border-radius:2px}
.home-prose h2,article h2{position:relative;margin:32px 0 12px;font-size:clamp(22px,2.5vw,29px)}
.home-prose h2:first-child,article h2:first-child{margin-top:6px}
.home-prose h2::after,article h2::after{content:"";display:block;margin-top:8px;height:6px;
  background:
    linear-gradient(90deg,var(--gold-deep) 0 58px,transparent 58px) 0 0/100% 2px no-repeat,
    repeating-linear-gradient(90deg,rgba(36,26,16,.35) 0 3px,transparent 3px 7px) 0 4px/100% 2px no-repeat}
.home-prose h3,article h3{margin:22px 0 8px;font-size:18px;letter-spacing:.02em}
.home-prose p,.home-prose li,article p,article li{color:#2c1f12}
.home-prose a,article a{color:#7b3a10}
.home-prose a:hover,article a:hover{color:var(--seal)}
.home-prose>p:first-of-type,article>p:first-of-type{font-size:18.5px;color:#33240f}

/* ---------- article layout ---------- */
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:34px;align-items:start;padding-top:22px}
.article-grid:not(:has(.toc)){grid-template-columns:minmax(0,1fr)}
.article-grid>div{min-width:0}
.crumb{font-family:var(--pixel);font-size:10px;letter-spacing:.05em;color:#c9bb9a;margin:0 0 10px}
.crumb a{color:var(--gold-hi);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb .sep{color:#c8a86a;margin:0 4px}
.crumb .here{color:#f3e6c6}
article>h1{font-size:clamp(29px,3.6vw,42px);line-height:1.06;margin:2px 0 12px}
.quick-answer{position:relative;margin:16px 0 22px;padding:16px 18px 14px 20px;background:rgba(37,72,47,.1);
  border:1px solid rgba(150,112,44,.55);border-left:5px solid var(--moss);border-radius:2px}
.qa-stamp{display:inline-block;margin:0 0 8px;padding:3px 9px;background:var(--seal);color:#ffeccd;
  font-family:var(--pixel);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  transform:rotate(-3deg);box-shadow:2px 2px 0 rgba(4,12,10,.35)}
.quick-answer p{margin:0;color:#2b1d0f;font-size:16.5px}
article img.zoom{width:100%;border:2px solid var(--edge);border-radius:2px;margin:8px 0 4px;
  box-shadow:4px 4px 0 rgba(4,12,10,.55);cursor:zoom-in;background:#0a1714}
article img.zoom+em,article img.zoom+p.cap{display:block;margin:0 0 16px}

/* tables */
.tbl-wrap{width:100%;overflow-x:auto;margin:16px 0 20px;border:2px solid var(--edge);border-radius:2px;
  box-shadow:4px 4px 0 rgba(4,12,10,.35)}
table{width:100%;border-collapse:collapse;font-size:15px;background:rgba(255,248,230,.5)}
thead th{background:linear-gradient(180deg,#2a1d11,#170f08);color:var(--gold-hi);
  font-family:var(--pixel);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  text-align:left;padding:10px 11px;border-right:1px solid rgba(211,168,90,.28);vertical-align:top}
tbody td{padding:9px 11px;border-top:1px solid rgba(150,112,44,.35);border-right:1px solid rgba(150,112,44,.22);
  vertical-align:top;color:#2c1f12}
tbody tr:nth-child(even){background:rgba(150,112,44,.10)}
thead th:last-child,tbody td:last-child{border-right:0}
table strong,table b{color:inherit}

/* callouts, quotes */
blockquote{margin:18px 0;padding:12px 16px;border-left:4px solid var(--gold-deep);
  background:rgba(150,112,44,.13);font-style:italic;color:#3a2a13}
blockquote p:last-child{margin:0}
.callout{margin:20px 0;padding:14px 17px 12px;border:1px solid rgba(150,112,44,.55);
  border-left:5px solid var(--rust);background:rgba(168,69,31,.09);border-radius:2px}
.callout::before{content:"FIELD NOTE";display:block;margin-bottom:6px;font-family:var(--pixel);
  font-size:9px;letter-spacing:.13em;color:var(--rust)}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}

/* toc */
.toc{position:sticky;top:18px;background:linear-gradient(180deg,rgba(12,31,27,.96),rgba(9,23,20,.96));
  border:2px solid var(--edge);border-radius:3px;padding:14px 13px;box-shadow:var(--shadow),
  inset 0 0 0 1px rgba(211,168,90,.3)}
.toc .overline{transform:rotate(-1.2deg);margin-bottom:8px}
.toc-list{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.toc-list a{display:block;padding:6px 7px;color:#e2d4b3;text-decoration:none;font-size:14px;
  border-left:2px solid transparent;border-radius:2px}
.toc-list a:hover{background:rgba(211,168,90,.14);border-left-color:var(--gold);color:#fff}

/* all guides block */
.all-guides{margin:34px 0 4px;padding-top:22px;border-top:2px dashed rgba(120,86,36,.45)}
.all-guides .section-head{margin:0 0 4px}
.all-guides .section-head h2{color:var(--ink);text-shadow:none}
.all-guides .grid{margin-bottom:6px}
.all-link{font-family:var(--pixel);font-size:10.5px;letter-spacing:.06em;margin:8px 0 0}
.card.sm .thumb{aspect-ratio:16/10}
.card.sm .card-body h3{font-size:15.5px}

/* ---------- footer ---------- */
.foot{position:relative;z-index:1;margin-top:40px;padding:30px 0 34px;
  background:linear-gradient(180deg,rgba(6,16,13,.6),rgba(5,13,11,.95));
  border-top:2px solid var(--edge);box-shadow:inset 0 1px 0 rgba(211,168,90,.35)}
.foot .disclaimer{margin:0 0 12px;font-size:13.5px;color:#c7b998;max-width:70ch}
.foot-links{margin:0 0 8px;font-family:var(--pixel);font-size:10.5px;letter-spacing:.05em;color:#c3b593}
.foot-links a{color:var(--gold-hi);text-decoration:none}
.foot-links a:hover{text-decoration:underline;color:#fff}
.muted{margin:0;font-family:var(--pixel);font-size:9.5px;letter-spacing:.06em;color:#8d8264}

/* ---------- ads ---------- */
.ad-slot{margin:22px auto;text-align:center}
.ad-slot:empty{display:none;margin:0}
.ad-inner{min-height:92px;display:flex;align-items:center;justify-content:center;
  background:rgba(6,16,13,.35);border:1px dashed rgba(211,168,90,.35);border-radius:2px}
.ad-banner-box{min-height:50px;border:0;background:none}
.ad-slot-native{display:none}
.ad-slot-mobile{display:none}
@media (hover: hover) and (pointer: fine){.ad-slot-native{display:block}}
@media not all and (hover: hover) and (pointer: fine){.ad-slot-mobile{display:block}}
@media print{.ad-slot{display:none!important}}

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

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .article-grid{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;margin:0 0 18px}
}
@media (max-width:960px){
  .hero-in{grid-template-columns:minmax(0,1fr);gap:24px;padding:38px 22px 42px}
  .hero-shot{order:-1;max-width:640px}
  .hero h1{font-size:clamp(33px,7vw,52px)}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .bar{min-height:60px;gap:10px}
  .brand span{font-size:16px}
  .nav{width:100%;margin-left:0}
  .nav>ul{gap:3px}
  .nav a{font-size:10px;padding:7px 8px}
  .nav .kids,.nav li.has-kids::after{display:none!important}
  .langsel{order:-1;margin-left:auto}
  .home-prose,article{padding:22px 18px 20px;margin:20px 0 26px}
  .home-prose::before,article::before{inset:6px}
  .grid{gap:14px}
  .grid[data-n="2"]>.card,.grid[data-n="3"]>.card{flex:1 1 100%}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px 18px}
  .hero-shot figcaption{font-size:8.5px}
  table{font-size:13.5px}
  thead th,tbody td{padding:8px}
}
@media (max-width:420px){
  .wrap{padding:0 14px}
  .hero-in{padding:30px 14px 34px}
  .facts{grid-template-columns:1fr 1fr;gap:7px}
  .fact-v{font-size:12.5px}
}