/* Fantasy World Manager Guide — bespoke skin.
   Palette and shapes are lifted from the game itself: warm parchment panels,
   grass-green land, river blue, brick-red roofs and a pixel display face.
   No shared fleet template: the map-tile band, the HUD facts strip and the
   editor-window cards are specific to this build. */

@font-face {
  font-family: "FWM Pixel";
  src: url("assets/fonts/pixelify.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "FWM Body";
  src: url("assets/fonts/nunito.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  font-style: normal;
}

:root {
  --ink: #2f2418;
  --ink-2: #4a3a28;
  --muted: #6d5b45;
  --paper: #f8efdc;
  --paper-2: #f1e3c9;
  --parch: #f3e7d2;
  --parch-edge: #cbb18a;
  --grass: #6fa430;
  --grass-dark: #3f6a1c;
  --grass-pale: #dbe8b8;
  --water: #3f60bb;
  --water-dark: #2b4590;
  --roof: #a63a2b;
  --gold: #d9a441;
  --line: 3px solid var(--ink);
  --shadow: 7px 7px 0 rgba(47, 36, 24, 0.16);
  --shadow-sm: 4px 4px 0 rgba(47, 36, 24, 0.14);
  --radius: 10px;
  --maxw: 1240px;
  --font-display: "FWM Pixel", "Courier New", monospace;
  --font-body: "FWM Body", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(111, 164, 48, 0.10), transparent 32%),
    radial-gradient(circle at 88% 4%, rgba(63, 96, 187, 0.09), transparent 30%),
    radial-gradient(circle at 70% 92%, rgba(217, 164, 65, 0.12), transparent 36%),
    repeating-linear-gradient(0deg, rgba(47, 36, 24, 0.035) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(47, 36, 24, 0.035) 0 1px, transparent 1px 34px);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--water-dark); text-decoration-thickness: 2px; text-underline-offset: 2px; }
a:hover { color: var(--roof); }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { margin: 0 0 1.05em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.35em; }
li { margin-bottom: 0.4em; }
strong { color: var(--ink); }
code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.92em;
  background: var(--grass-pale);
  border: 1px solid rgba(47, 36, 24, 0.22);
  border-radius: 4px;
  padding: 0.05em 0.35em;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  z-index: 60;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------------------------------------------------------------- ribbon + topbar */
.ribbon {
  background: var(--grass);
  color: var(--ink);
  border-bottom: var(--line);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ribbon .wrap { padding: 7px 22px; }
/* hand-made map-tile band: the game's own terrain palette in pixel blocks */
.ribbon::after {
  content: "";
  display: block;
  height: 12px;
  border-top: 2px solid var(--ink);
  background-image:
    repeating-linear-gradient(90deg,
      var(--grass) 0 18px,
      #5d8f27 18px 30px,
      var(--grass) 30px 48px,
      var(--parch) 48px 60px,
      var(--water) 60px 78px,
      var(--water-dark) 78px 90px,
      var(--parch) 90px 96px);
  background-size: 96px 12px;
  image-rendering: pixelated;
  opacity: 0.95;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--parch);
  border-bottom: var(--line);
  box-shadow: 0 3px 0 rgba(47, 36, 24, 0.10);
}
.bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 22px;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand img {
  width: 38px;
  height: 38px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--parch);
  image-rendering: pixelated;
}
.brand:hover { color: var(--grass-dark); }

.nav { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nav ul {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.nav li { position: relative; margin: 0; }
.nav li > a {
  display: block;
  padding: 8px 12px;
  font-family: var(--font-display);
  font-size: 14.5px;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 7px;
}
.nav li > a:hover,
.nav li.active > a {
  background: var(--paper);
  border-color: var(--ink);
  color: var(--ink);
}
.nav .kids {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 232px;
  padding: 8px;
  margin: 0;
  list-style: none;
  background: var(--parch);
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  flex-direction: column;
  gap: 2px;
  z-index: 50;
}
.nav .has-kids:hover .kids,
.nav .has-kids:focus-within .kids { display: flex; }
.nav .kids li > a {
  padding: 7px 10px;
  font-size: 14px;
  border-radius: 6px;
  white-space: nowrap;
}
.nav .kids li > a:hover { background: var(--grass-pale); border-color: transparent; }
.nav .cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.nav .cta:hover { background: var(--grass-dark); border-color: var(--grass-dark); color: #fff; }
.nav .has-kids > a::after { content: " ▾"; font-size: 11px; }
.nav .only-mobile { display: none; }

/* ---------------------------------------------------------------- layout */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px;
}

main { display: block; }
main > .wrap:first-child { padding-top: 34px; }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  border-bottom: var(--line);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(248, 239, 220, 0.94), rgba(248, 239, 220, 0.82) 55%, rgba(248, 239, 220, 0.96)),
    var(--hero, none);
  background-size: cover, cover;
  background-position: center, center;
  opacity: 0.9;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(47, 36, 24, 0.05) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(47, 36, 24, 0.05) 0 1px, transparent 1px 46px);
  pointer-events: none;
  z-index: 1;
}
.hero-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  padding-top: 46px;
  padding-bottom: 46px;
}
.eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 10px;
  background: var(--water);
  color: #fdf6e6;
  border: 2px solid var(--ink);
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 rgba(47, 36, 24, 0.2);
}
.hero h1 {
  font-size: clamp(34px, 4.6vw, 60px);
  margin-bottom: 16px;
  color: var(--ink);
}
.lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 52ch;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.btn {
  display: inline-block;
  padding: 12px 18px;
  background: var(--grass-dark);
  color: #fdf6e6;
  border: 3px solid var(--ink);
  border-radius: 9px;
  box-shadow: 5px 5px 0 rgba(47, 36, 24, 0.22);
  font-family: var(--font-display);
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 rgba(47, 36, 24, 0.24); color: #fff; }
.btn.ghost { background: var(--parch); color: var(--ink); }
.btn.ghost:hover { background: var(--gold); color: var(--ink); }

.hero-shot { margin: 0; }
.hero-shot img {
  display: block;
  width: 100%;
  border: 4px solid var(--ink);
  border-radius: 12px;
  box-shadow: 9px 9px 0 rgba(47, 36, 24, 0.22);
  background: var(--water-dark);
}
.hero-shot figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-display);
}

/* ---------------------------------------------------------------- HUD facts strip */
.facts-strip {
  position: relative;
  background: var(--ink);
  border-bottom: var(--line);
  color: var(--parch);
}
.facts {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  padding: 0;
}
.fact {
  padding: 12px 10px;
  border-left: 1px dashed rgba(243, 231, 210, 0.28);
  text-align: center;
}
.fact:first-child { border-left: 0; }
.fact-k {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.fact-v {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--parch);
}

/* ---------------------------------------------------------------- sections + cards */
.section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 40px 0 16px;
  padding-bottom: 8px;
  border-bottom: 3px dotted var(--parch-edge);
}
.section-head h2 { margin: 0; font-size: 27px; }
.overline {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grass-dark);
}
.count-pill {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 9px;
  background: var(--gold);
  border: 2px solid var(--ink);
  border-radius: 20px;
  font-size: 13px;
  vertical-align: middle;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 34px;
}
.grid[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid[data-n="1"] { grid-template-columns: minmax(0, 1fr); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--parch);
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.card:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 rgba(47, 36, 24, 0.2); color: var(--ink); }
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 22px;
  background: var(--grass);
  border-bottom: 2px solid var(--ink);
}
.card::after {
  content: "";
  position: absolute;
  top: 7px; right: 10px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: -14px 0 0 var(--paper), -28px 0 0 var(--paper);
  opacity: 0.85;
}
.thumb { display: block; margin-top: 22px; position: relative; }
.thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 2px solid var(--ink);
}
.pill-tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 2px 8px;
  background: var(--ink);
  color: var(--parch);
  border-radius: 5px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-body h3 { font-size: 18.5px; margin: 0; }
.card-body p { margin: 0; font-size: 15px; color: var(--ink-2); }
.go {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--roof);
}
.stamp {
  position: absolute;
  top: 2px;
  left: 12px;
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------------------------------------------------------------- home prose / article */
.home-prose {
  background: var(--parch);
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 28px;
  margin: 8px 0 40px;
}
.home-prose h2 { font-size: 24px; margin-top: 1.4em; }
.home-prose h2:first-child { margin-top: 0; }
.home-prose > p, .home-prose > ul, .home-prose > ol, .home-prose > blockquote { max-width: 74ch; }

.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 248px;
  gap: 34px;
  align-items: start;
  padding-top: 30px;
  padding-bottom: 50px;
}
article {
  background: var(--parch);
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px 34px 34px;
  min-width: 0;
}
article > p, article > ul, article > ol, article > blockquote, article > .callout { max-width: 74ch; }
article h1 { font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 18px; }
article h2 {
  font-size: 25px;
  margin: 1.7em 0 0.55em;
  padding-top: 14px;
  border-top: 3px dotted var(--parch-edge);
}
article h2:first-of-type { border-top: 0; padding-top: 0; }
article h3 { font-size: 19.5px; margin: 1.35em 0 0.4em; color: var(--ink-2); }
article ul li::marker { color: var(--grass-dark); }
article img.zoom {
  display: block;
  width: 100%;
  border: 3px solid var(--ink);
  border-radius: 8px;
  margin: 20px 0 8px;
  cursor: zoom-in;
}
article blockquote {
  margin: 20px 0;
  padding: 12px 18px;
  background: var(--paper);
  border-left: 6px solid var(--grass);
  border-radius: 0 8px 8px 0;
  color: var(--ink-2);
  font-style: italic;
}

.crumb {
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 16px;
}
.crumb a { color: var(--water-dark); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb .sep { color: var(--parch-edge); padding: 0 4px; }
.crumb .here { color: var(--ink); }

.quick-answer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 0 0 22px;
  padding: 14px 16px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.qa-stamp {
  align-self: start;
  padding: 4px 8px;
  background: var(--gold);
  border: 2px solid var(--ink);
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-2.5deg);
  white-space: nowrap;
}
.quick-answer p { margin: 0; font-size: 16.5px; }

.toc {
  position: sticky;
  top: 82px;
  background: var(--parch);
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px 16px;
  min-width: 0;
}
.toc .overline { display: block; margin-bottom: 8px; }
.toc-list { display: flex; flex-direction: column; gap: 2px; }
.toc-list a {
  display: block;
  padding: 5px 4px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px dotted rgba(47, 36, 24, 0.18);
}
.toc-list a:hover { color: var(--roof); }

/* ---------------------------------------------------------------- tables */
.tbl-wrap {
  margin: 20px 0 26px;
  overflow-x: auto;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  max-width: 100%;
}
table { border-collapse: collapse; width: 100%; font-size: 16px; }
thead th {
  background: var(--grass);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 13.5px;
  letter-spacing: 0.03em;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 3px solid var(--ink);
  border-right: 2px solid rgba(47, 36, 24, 0.22);
  white-space: nowrap;
}
thead th:last-child { border-right: 0; }
tbody td {
  padding: 10px 13px;
  vertical-align: top;
  border-bottom: 1px solid rgba(47, 36, 24, 0.18);
  border-right: 1px solid rgba(47, 36, 24, 0.1);
}
tbody td:last-child { border-right: 0; }
tbody tr:nth-child(even) { background: rgba(111, 164, 48, 0.07); }
tbody tr:hover { background: rgba(217, 164, 65, 0.16); }
tbody tr:last-child td { border-bottom: 0; }
table strong, table b { color: inherit; }

/* ---------------------------------------------------------------- callouts */
.callout {
  margin: 20px 0;
  padding: 14px 16px 14px 18px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-left: 8px solid var(--water);
  border-radius: 8px;
}
.callout > p:last-child { margin-bottom: 0; }
.callout.note { border-left-color: var(--water); }
.callout.tip { border-left-color: var(--grass); }
.callout.warn { border-left-color: var(--roof); background: #fbeee4; }
.callout h3, .callout strong { font-family: var(--font-display); }

/* ---------------------------------------------------------------- next guides */
.all-guides {
  margin-top: 40px;
  padding-top: 8px;
  border-top: 3px dotted var(--parch-edge);
}
.all-guides .section-head { margin-top: 18px; }
.all-guides .grid { margin-bottom: 12px; }
.all-link {
  font-family: var(--font-display);
  font-size: 14px;
  margin: 0;
}
.all-link a { text-decoration: none; }
.all-link a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- footer */
.foot::before {
  content: "";
  display: block;
  height: 12px;
  margin-bottom: 26px;
  border-bottom: 2px solid var(--ink);
  background-image:
    repeating-linear-gradient(90deg,
      rgba(111, 164, 48, 0.85) 0 18px,
      rgba(93, 143, 39, 0.85) 18px 30px,
      rgba(111, 164, 48, 0.85) 30px 48px,
      rgba(243, 231, 210, 0.35) 48px 60px,
      rgba(63, 96, 187, 0.75) 60px 78px,
      rgba(43, 69, 144, 0.75) 78px 90px,
      rgba(243, 231, 210, 0.35) 90px 96px);
  background-size: 96px 12px;
}
.foot {
  background: var(--ink);
  color: var(--parch);
  border-top: 6px solid var(--grass);
  padding: 30px 0 34px;
  font-size: 14.5px;
}
.foot .wrap { padding-top: 0; }
.foot a { color: var(--gold); }
.foot a:hover { color: #fff; }
.disclaimer { color: rgba(243, 231, 210, 0.82); max-width: 88ch; }
.foot-links { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.03em; }
.muted { color: rgba(243, 231, 210, 0.66); font-size: 13px; margin-bottom: 0; }

/* ---------------------------------------------------------------- lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(18, 13, 8, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  cursor: zoom-out;
}
.lightbox img {
  max-width: min(1500px, 96vw);
  max-height: 92vh;
  width: auto;
  height: auto;
  border: 4px solid var(--parch);
  border-radius: 8px;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .article-grid { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; order: -1; }
  .toc-list { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .toc-list a { border: 2px solid rgba(47, 36, 24, 0.2); border-radius: 6px; padding: 4px 8px; }
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fact { border-top: 1px dashed rgba(243, 231, 210, 0.28); }
  .fact:nth-child(-n+3) { border-top: 0; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  body { font-size: 16.5px; }
  .bar { gap: 10px; padding: 10px 16px; }
  .brand { font-size: 16.5px; }
  .brand img { width: 32px; height: 32px; }
  .nav { margin-left: 0; width: 100%; }
  .nav ul { width: 100%; gap: 4px; }
  .nav li > a { padding: 6px 9px; font-size: 13px; }
  /* mobile: parent links only, plus an explicit All guides chip.
     Rendering 19 sub-items inline pushed the hero 700px down the page. */
  .nav .kids { display: none; }
  .nav .only-mobile { display: block; }
  .nav .only-mobile > a { background: var(--grass-pale); border-color: var(--ink); }
  .nav .cta { margin-left: 0; }
  .hero-in { padding-top: 28px; padding-bottom: 30px; }
  .lead { font-size: 17px; }
  .home-prose { padding: 20px 18px; }
  article { padding: 22px 18px 26px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .grid[data-n="2"] { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(2n+1) { border-left: 0; }
  .fact:nth-child(-n+2) { border-top: 0; }
  .quick-answer { grid-template-columns: minmax(0, 1fr); }
  .qa-stamp { justify-self: start; transform: rotate(-1.5deg); }
}

@media (max-width: 560px) {
  .wrap { padding: 0 14px; }
  .ribbon .wrap { padding: 6px 14px; }
  .ribbon { font-size: 11px; }
  thead th { font-size: 12.5px; padding: 8px 9px; }
  tbody td { padding: 8px 9px; font-size: 14.5px; }
  .section-head h2 { font-size: 22px; }
}

@media print {
  .topbar, .ribbon, .foot, .toc, .all-guides { display: none; }
  body { background: #fff; }
  article { border: 0; box-shadow: none; }
}


/* --- Ad slot (dual format) ------------------------------------------------ */
.ad-slot{display:none;margin:14px auto 30px;max-width:960px;padding:0 4px}
.ad-slot .ad-inner{min-height:96px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ad-slot-native .ad-inner{border:1px dashed rgba(47,36,24,.22);background:rgba(255,255,255,.35)}
.ad-slot-mobile .ad-banner-box{border:1px dashed rgba(47,36,24,.22);background:rgba(255,255,255,.35);padding:6px}
@media (hover: hover) and (pointer: fine){.ad-slot-native{display:block}}
@media (hover: none), (pointer: coarse){.ad-slot-mobile{display:block}}
@media print{.ad-slot{display:none!important}}