/* ============================================================================
   Among the Trolls Guide — site skin (rewritten from the skeleton)
   Palette sampled with PIL from official key art / screenshots, see DESIGN-BRIEF.md.
   Bark + ember + cold sea. Hard edges, woodcut serifs, zero-blur shadows.
   Fonts are self-hosted under /assets/fonts (no Google Fonts link).
   ========================================================================== */

/* ---------------------------------------------------------------- fonts */
@font-face{font-family:'Grenze Gotisch';font-style:normal;font-weight:500;font-display:swap;
  src:url(assets/fonts/grenze-500.woff2) format('woff2')}
@font-face{font-family:'Grenze Gotisch';font-style:normal;font-weight:700;font-display:swap;
  src:url(assets/fonts/grenze-700.woff2) format('woff2')}
@font-face{font-family:'Grenze Gotisch';font-style:normal;font-weight:900;font-display:swap;
  src:url(assets/fonts/grenze-900.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:500;font-display:swap;
  src:url(assets/fonts/alegreya-500.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:'Alegreya';font-style:italic;font-weight:400;font-display:swap;
  src:url(assets/fonts/alegreya-400-italic.woff2) format('woff2')}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fonts/alegreyasans-400.woff2) format('woff2')}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url(assets/fonts/alegreyasans-700.woff2) format('woff2')}

/* ---------------------------------------------------------------- tokens */
:root{
  --bark:#121109; --moss:#1b1a11; --moss-2:#232013;
  --ember:#d9902f; --ember-2:#f2bd63; --ember-deep:#8a5518;
  --virta:#5f9c92; --lichen:#7f8663; --hiisi:#a1493f; --rune:#c9a44f;
  --bone:#eae4d2; --bone-dim:#aca495; --ink:#0a0906;
  --display:'Grenze Gotisch','Palatino Linotype',serif;
  --body:'Alegreya',Georgia,'Times New Roman',serif;
  --ui:'Alegreya Sans','Segoe UI',system-ui,sans-serif;
  --maxw:1180px; --pad:22px;
  --line:rgba(201,164,79,.22);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bark)}
body{
  margin:0;background:var(--bark);color:var(--bone);
  font:400 17.5px/1.68 var(--body);
  background-image:
    radial-gradient(58% 40% at 10% 3%, rgba(217,144,47,.12), transparent 70%),
    radial-gradient(50% 36% at 90% 20%, rgba(95,156,146,.10), transparent 72%),
    radial-gradient(72% 52% at 50% 108%, rgba(127,134,99,.09), transparent 70%);
  background-repeat:no-repeat;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ember-2);text-decoration:none;border-bottom:1px solid rgba(217,144,47,.35)}
a:hover{color:#fff;border-bottom-color:var(--ember)}
a:focus-visible{outline:2px dashed var(--ember);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.12;color:#fff;margin:0 0 .5em}
p{margin:0 0 1.05em}
strong,th strong{color:#fff}
code{font-family:'Cascadia Mono',Consolas,monospace;font-size:.86em;background:rgba(255,255,255,.07);padding:2px 6px;border:1px solid var(--line);border-radius:3px;color:var(--ember-2)}
hr{border:0;height:16px;margin:24px 0;background:radial-gradient(closest-side at 50% 100%,transparent 0 60%,var(--line) 61% 65%,transparent 66%) 50% 100%/90px 14px no-repeat}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--ember);color:var(--ink);padding:8px 12px}

/* ---------------------------------------------------------------- ribbon */
.ribbon{background:var(--moss-2);border-bottom:1px solid var(--line);font-family:var(--ui);font-size:13px;letter-spacing:.05em;color:var(--bone-dim)}
.ribbon .wrap{padding:7px var(--pad)}

/* ---------------------------------------------------------------- topbar */
.topbar{position:sticky;top:0;z-index:40;background:rgba(12,11,6,.95);border-bottom:2px solid rgba(201,164,79,.28)}
.bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px var(--pad) 12px}
.brand{display:flex;align-items:center;gap:10px;border:0;color:#fff;font-family:var(--display);font-size:23px;font-weight:900}
.brand span{background:linear-gradient(180deg,#fff9ea,var(--ember-2) 62%,var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand img{width:38px;height:38px;border:2px solid rgba(201,164,79,.45);border-radius:50%;background:var(--ink)}
.nav{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav ul{display:flex;flex-wrap:wrap;gap:3px;list-style:none;margin:0;padding:0}
.nav li{position:relative}
.nav>ul>li>a{display:block;padding:9px 11px;border:0;color:var(--bone);font-family:var(--ui);font-size:14.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.nav>ul>li>a:hover,.nav li.active>a{color:var(--ember-2);background:rgba(217,144,47,.10)}
.nav li.has-kids>a::after{content:"▾";margin-left:6px;font-size:11px;color:var(--ember)}
.nav .kids{display:none;position:absolute;left:0;top:100%;min-width:264px;z-index:60;
  background:var(--moss);border:2px solid rgba(201,164,79,.34);box-shadow:6px 6px 0 rgba(0,0,0,.55);padding:8px}
.nav .has-kids:hover .kids,.nav .has-kids:focus-within .kids,.nav .has-kids:has(:focus-visible) .kids{display:block}
.nav .kids li a{display:block;padding:8px 10px;border:0;color:var(--bone);font-family:var(--ui);font-size:14px}
.nav .kids li a:hover{background:rgba(217,144,47,.14);color:#fff}
.nav .cta{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(180deg,var(--ember-2),var(--ember));color:#20160a;border:2px solid #3a2a10;border-bottom-width:3px;padding:8px 14px;font-family:var(--ui);font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase;box-shadow:3px 3px 0 rgba(0,0,0,.5)}
.nav .cta:hover{color:#120c04;filter:brightness(1.07)}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;border-bottom:2px solid rgba(201,164,79,.3);background:#0d0c07 var(--hero,linear-gradient(120deg,#14120b,#241d10)) center/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(8,7,4,.88) 0%,rgba(9,8,4,.60) 36%,rgba(10,9,5,.22) 66%,rgba(10,9,5,.05) 100%),
  linear-gradient(180deg,rgba(6,5,3,.42),rgba(6,5,3,.04) 42%,rgba(6,5,3,.58))}
.hero-in{position:relative;padding:66px var(--pad) 62px;min-height:470px;display:flex;flex-direction:column;justify-content:center}
.eyebrow{font-family:var(--ui);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ember-2);margin:0 0 14px;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--ember)}
.hero h1{font-size:clamp(44px,7.2vw,102px);font-weight:900;line-height:.94;margin:0 0 16px;
  background:linear-gradient(180deg,#fffdf6,var(--ember-2) 58%,var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 .h1-line{display:block}
.hero h1 .h1-sub{display:block;font-family:var(--ui);font-size:clamp(14px,1.5vw,19px);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#efe7d4;-webkit-text-fill-color:#efe7d4;background:none;margin-top:14px;max-width:32ch;line-height:1.5}
.hero .lead{max-width:56ch;font-size:19px;color:#f0ead9;margin:0 0 22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.btn{display:inline-block;padding:13px 20px;background:linear-gradient(180deg,var(--ember-2),var(--ember));color:#20160a;border:2px solid #3a2a10;border-bottom-width:4px;font-family:var(--ui);font-weight:700;font-size:15px;letter-spacing:.05em;text-transform:uppercase;box-shadow:4px 4px 0 rgba(0,0,0,.5)}
.btn:hover{color:#120c04;filter:brightness(1.08)}
.btn.ghost{background:rgba(12,11,6,.55);color:var(--bone);border-color:rgba(201,164,79,.5)}
.btn.ghost:hover{color:#fff;background:rgba(95,156,146,.22)}

/* -------------------------------------------- HUD readout strip (home facts) */
.facts-strip{background:linear-gradient(180deg,#171509,#100f08);border-bottom:2px solid rgba(201,164,79,.26)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0}
.fact{padding:14px 16px 15px;border-right:1px solid var(--line);min-width:0}
.fact:last-child{border-right:0}
.fact-k{display:block;font-family:var(--ui);font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--virta);margin-bottom:5px}
.fact-v{display:block;font-family:var(--display);font-size:19px;font-weight:700;color:#fff;line-height:1.22}
.fact::after{content:"";display:block;height:4px;margin-top:9px;background:repeating-linear-gradient(90deg,var(--ember) 0 7px,transparent 7px 11px);opacity:.6}

/* ---------------------------------------------------------------- section heads */
.section-head{margin:32px 0 14px}
.overline{display:block;font-family:var(--ui);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--virta);margin-bottom:5px}
.section-head h2{display:flex;align-items:center;gap:12px;font-size:30px;margin:0;padding:0}
.section-head h2::before{content:none}
.count-pill{font-family:var(--ui);font-size:12.5px;font-weight:700;color:var(--ink);background:var(--ember);padding:2px 9px;border-radius:999px}
article h2,main h2{position:relative;padding-left:24px;margin-top:2.1em}
article h2::before,main h2::before{content:"";position:absolute;left:0;top:.42em;width:11px;height:11px;background:var(--rune);transform:rotate(45deg);box-shadow:0 0 0 2px rgba(201,164,79,.26)}
h3{font-size:22px;color:var(--ember-2);margin-top:1.6em}

/* ---------------------------------------------------------------- cards */
.grid{display:flex;flex-wrap:wrap;gap:18px;margin:6px 0 30px}
.grid[data-n="2"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.grid[data-n="3"]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.grid[data-n="4"]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.card{flex:1 1 262px;max-width:100%;display:flex;flex-direction:column;background:var(--moss);border:2px solid rgba(201,164,79,.3);box-shadow:5px 5px 0 rgba(0,0,0,.5);color:var(--bone);min-width:0}
.card:hover{border-color:var(--ember);box-shadow:5px 5px 0 rgba(138,85,24,.6)}
.card:hover h3{color:var(--ember-2)}
.card .thumb{position:relative;display:block;border-bottom:2px solid rgba(201,164,79,.24);background:#0c0b06}
.card .thumb img{width:100%;aspect-ratio:16/9;object-fit:cover}
.pill-tag{position:absolute;left:9px;top:9px;background:var(--bark);color:var(--ember-2);border:1px solid rgba(217,144,47,.6);font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;transform:rotate(-2deg);box-shadow:2px 2px 0 rgba(0,0,0,.6)}
.card-body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:7px}
.card h3{font-size:19.5px;margin:0;color:#fff}
.card-body p{margin:0;font-size:15px;color:var(--bone-dim);line-height:1.55}
.card .go{font-family:var(--ui);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--virta)}
.card .stamp{font-family:var(--ui);font-size:11.5px;color:#8b8474}
.card.sm{flex:1 1 212px}
.card.sm .card-body{padding:11px 12px 13px}
.card.sm h3{font-size:17px}

/* ---------------------------------------------------------------- article */
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 238px;gap:30px;align-items:start;margin:26px auto 46px;padding:0 var(--pad)}
.article-grid>div{min-width:0}
.crumb{font-family:var(--ui);font-size:13px;color:var(--bone-dim);margin:0 0 12px}
.crumb a{border:0;color:var(--virta)}
.crumb a:hover{color:#fff}
.crumb .sep{margin:0 6px;color:#9c9481}
.crumb .here{color:#fff}
article{position:relative;background:var(--moss);border:2px solid var(--line);box-shadow:8px 8px 0 rgba(0,0,0,.45);padding:30px 30px 34px;min-width:0}
article::before,article::after{content:"";position:absolute;width:26px;height:26px;border:2px solid rgba(201,164,79,.55)}
article::before{left:-2px;top:-2px;border-right:0;border-bottom:0}
article::after{right:-2px;bottom:-2px;border-left:0;border-top:0}
article>h1,main h1{font-size:clamp(30px,4vw,44px);margin:0 0 14px;color:#fff}
article>p,article>ul,article>ol,article>blockquote,article>.callout,article>h2,article>h3,article>.tbl-wrap,article>.art-note{max-width:92ch}
article img.zoom{width:100%;border:2px solid rgba(201,164,79,.3);box-shadow:5px 5px 0 rgba(0,0,0,.5);margin:6px 0 22px;cursor:zoom-in;background:#0c0b06}
article ul,article ol{padding-left:22px;margin:0 0 1.1em}
article li{margin:0 0 .45em}
article li::marker{color:var(--ember)}
blockquote{margin:0 0 1.2em;padding:4px 0 4px 16px;border-left:3px solid var(--rune);color:#d8d1bf;font-style:italic}
.callout{margin:0 0 1.3em;padding:14px 16px;background:rgba(127,134,99,.12);border:1px solid rgba(127,134,99,.45);border-left:4px solid var(--lichen)}
.callout.warn{background:rgba(217,144,47,.10);border-color:rgba(217,144,47,.45);border-left-color:var(--ember)}
.callout.hiisi{background:rgba(161,73,63,.13);border-color:rgba(161,73,63,.5);border-left-color:var(--hiisi)}
.callout p:last-child{margin:0}
.tbl-wrap{overflow-x:auto;margin:0 0 1.3em;border:1px solid var(--line);background:var(--moss-2)}
table{border-collapse:collapse;width:100%;font-size:15.5px}
th,td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(201,164,79,.16)}
thead th{background:linear-gradient(180deg,#2f2a17,#241f10);color:var(--ember-2);font-family:var(--ui);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid rgba(201,164,79,.4)}
tbody tr:nth-child(even){background:rgba(255,255,255,.022)}
tbody tr:last-child td{border-bottom:0}
table strong,table b{color:inherit}
table a{color:var(--virta)}

/* quick answer = a page torn from Anna's journal */
.quick-answer{position:relative;margin:0 0 22px;padding:18px 20px 16px;background:linear-gradient(180deg,rgba(201,164,79,.10),rgba(201,164,79,.03));border:1px solid rgba(201,164,79,.4);border-left:5px solid var(--rune)}
.qa-stamp{display:inline-block;font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#20160a;background:var(--rune);padding:3px 9px;margin-bottom:9px}
.quick-answer p{margin:0;color:#f2ecdc;font-size:17.5px}

/* toc */
.toc{position:sticky;top:96px;background:var(--moss);border:2px solid var(--line);box-shadow:5px 5px 0 rgba(0,0,0,.4);padding:14px 15px}
.toc .overline{margin-bottom:9px}
.toc-list{display:flex;flex-direction:column;gap:2px}
.toc-list a{font-family:var(--ui);font-size:13.5px;line-height:1.35;color:var(--bone-dim);border:0;padding:5px 7px;border-left:2px solid transparent}
.toc-list a:hover{color:#fff;background:rgba(95,156,146,.14);border-left-color:var(--virta)}

/* all-guides */
.all-guides{margin:36px 0 0;padding-top:22px;border-top:2px solid var(--line)}
.all-guides .section-head{margin-top:0}
.all-more{margin:14px 0 0;font-family:var(--ui);font-size:14px;letter-spacing:.05em}

/* ---------------------------------------------------------------- footer */
.foot{margin-top:34px;background:#0d0c07;border-top:2px solid rgba(201,164,79,.3);padding:30px 0 34px;font-size:15px}
.foot .disclaimer{color:#cbc4b2;max-width:96ch}
.foot-links{font-family:var(--ui);font-size:14px;letter-spacing:.05em;margin:14px 0 8px}
.foot-links a{border:0}
.muted{color:#8f8878;font-family:var(--ui);font-size:13px;margin:0}

/* ad slot（Adsterra：桌面指针门控；未配 key 时整块不渲染） */
@media (hover: hover) and (pointer: fine){.ad-slot{display:block}}
@media not all and (hover: hover) and (pointer: fine){.ad-slot{display:none}}
.ad-slot{margin:26px auto;max-width:var(--maxw)}
.ad-inner{min-height:0}

/* lightbox（build_site.py 注入；点击正文图全屏） */
.zoom{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(5,5,3,.94);display:flex;align-items:center;justify-content:center;padding:18px;cursor:zoom-out}
.lightbox img{max-width:min(1500px,96vw);max-height:92vh;width:auto;height:auto;border:2px solid rgba(201,164,79,.5)}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1000px){
  .article-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .toc{position:static}
  .grid[data-n="4"],.grid[data-n="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact:nth-child(2n){border-right:0}
  .fact:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:760px){
  body{font-size:17px}
  .bar{gap:10px}
  .nav{margin-left:0;width:100%;justify-content:space-between}
  .nav>ul>li>a{padding:7px 8px;font-size:13px}
  .nav .kids{min-width:0;width:max-content;max-width:86vw}
  .hero-in{padding:42px var(--pad) 40px;min-height:0}
  article{padding:20px 16px 24px}
  article>p,article>ul,article>ol,article>blockquote,article>.callout,article>.tbl-wrap{max-width:100%}
  .grid[data-n="2"],.grid[data-n="3"],.grid[data-n="4"]{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:minmax(0,1fr)}
  .fact{border-right:0;border-top:1px solid var(--line)}
  .fact:first-child{border-top:0}
}
@media print{.topbar,.ribbon,.foot,.toc{display:none}}