:root {
      /* Palette, faces, and card chrome come from ../css/wiki.css */
      --nav-w: 13.5rem;
      --map-w: 39rem;
      /* Type scale. Every font-size in this sheet is one of these seven steps —
         it had grown fifteen ad-hoc values between 0.72rem and 1.72rem. */
      --fs-micro: 0.72rem; /* tracked micro-labels: nav groups, tags */
      --fs-xs: 0.8rem;     /* secondary chrome: sub-nav, footer */
      --fs-sm: 0.88rem;    /* dense body: meta, readouts, kickers */
      --fs-base: 0.9375rem;/* 15px — body copy, read-aloud, map headings */
      --fs-lg: 1.1rem;     /* h3, nav title */
      --fs-xl: 1.25rem;    /* h2 */
      --fs-2xl: 1.7rem;    /* h1 */
    }
    html, body {
      height: auto !important;
      overflow: auto !important;
      min-height: 0 !important;
    }
    /* Map present: the page does not scroll. The main column does, so the
       bar sits on the map’s left edge instead of covering its right. */
    html:has(body.has-map),
    html:has(body.has-map) body {
      height: 100% !important;
      overflow: hidden !important;
    }
    * { box-sizing: border-box; }
    body.site-sheet {
      margin: 0;
      font: var(--fs-base)/1.5 var(--font-sans);
      letter-spacing: var(--track-text);
      color: var(--ink);
      /* Wiki chrome uses --text for dice and the like. On a book page that
         is remapped to article size inside .content; a sheet has no .content. */
      --text: var(--fs-base);
    }
    a, a.wiki-link { color: var(--link); }
    a.wiki-link {
      text-decoration: underline;
      text-decoration-color: rgba(var(--link-rgb), .5);
    }
    a.wiki-link:hover {
      color: var(--link-hover);
      text-decoration-color: var(--link-hover);
      background: rgba(var(--link-rgb), .12);
    }

    .site-layout {
      display: flex;
      align-items: flex-start;
      min-height: 100vh;
    }

    /* Left nav */
    .site-nav {
      position: fixed;
      top: 0;
      left: 0;
      width: var(--nav-w);
      height: 100vh;
      overflow-y: auto;
      padding: 1rem 0.75rem 1.5rem;
      background: var(--bg);
      border-right: 1px solid var(--rule);
      box-shadow: inset -1px 0 0 rgba(var(--accent-rgb), 0.08), inset 0 2px 0 var(--accent-deep);
      z-index: 20;
    }
    .site-nav .nav-title {
      display: block;
      font-family: var(--font-serif);
      font-size: var(--fs-lg);
      font-weight: 400;
      font-synthesis-weight: none;
      letter-spacing: var(--track-display);
      color: var(--head);
      margin: 0 0 0.65rem;
      padding: 0 0.35rem 0.5rem;
      border-bottom: 1px solid var(--rule);
      text-decoration: none;
    }
    .site-nav .nav-title:hover { color: var(--link-hover); }
    .site-nav .nav-wiki-home {
      display: block;
      margin: -0.35rem 0 0.55rem;
      padding: 0.15rem 0.4rem 0.45rem;
      font-size: var(--fs-xs);
      color: var(--muted);
      text-decoration: none;
      border: none;
      border-bottom: 1px solid var(--rule);
    }
    .site-nav .nav-wiki-home:hover {
      color: var(--link-hover);
      background: transparent;
    }
    .site-nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .site-nav li { margin: 0; }
    .site-nav a {
      display: block;
      padding: 0.28rem 0.4rem;
      color: var(--quote);
      text-decoration: none;
      border-radius: 4px;
      font-size: var(--fs-sm);
      border: none;
      border-bottom: none;
    }
    .site-nav a:hover {
      color: var(--ink);
      background: var(--accent-soft);
    }
    .site-nav a.nav-sub {
      padding-left: 0.9rem;
      font-size: var(--fs-xs);
      color: var(--muted);
    }
    .site-nav .nav-label {
      display: block;
      margin: 0.75rem 0.4rem 0.25rem;
      font-family: var(--font-serif);
      font-size: var(--fs-micro);
      font-weight: 400;
      font-synthesis-weight: none;
      letter-spacing: 0.06em;
      color: var(--muted);
    }
    .site-nav a.is-current {
      color: var(--ink);
      background: var(--accent-soft);
      box-shadow: inset 2px 0 0 var(--accent);
    }
    /* GitHub credit — same classes as wiki sidebar (icon styles in wiki.css) */
    .site-nav .sidebar-foot {
      margin-top: 0.75rem;
      padding: 0.55rem 0 0.25rem;
      border-top: 1px solid var(--rule);
    }
    .site-nav .sidebar-github {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      border: none;
      border-bottom: none;
      border-radius: 4px;
      padding: 0.28rem 0.4rem;
      font-size: var(--fs-xs);
      line-height: 1.2;
      color: var(--muted);
    }
    .site-nav .sidebar-github::before {
      flex-shrink: 0;
      width: 0.85rem;
      height: 0.85rem;
    }
    .site-nav .sidebar-github:hover {
      background: var(--accent-soft);
      color: var(--head);
    }

    /* Main column — cap width so prose stays readable on wide screens */
    .site-main {
      flex: 1;
      min-width: 0;
      width: 100%;
      max-width: 640px;
      margin-left: var(--nav-w);
      padding: 1.25rem 1.5rem 2.5rem;
      box-sizing: border-box;
    }
    body.has-map .site-main {
      position: fixed;
      top: 0;
      left: var(--nav-w);
      right: var(--map-w);
      height: 100vh;
      margin-left: 0;
      margin-right: 0;
      max-width: none;
      width: auto;
      overflow-y: auto;
    }
    body.has-map .site-main > * {
      max-width: 640px;
    }

    /* Right map sidebar (opt-in: body.has-map + aside.site-map) */
    .site-map {
      display: none;
    }
    body.has-map .site-map {
      display: block;
      position: fixed;
      top: 0;
      right: 0;
      width: var(--map-w);
      height: 100vh;
      overflow-y: auto;
      padding: 0.85rem 0.7rem 1.5rem;
      background: var(--bg-elev);
      border-left: 1px solid var(--rule);
      z-index: 20;
    }
    .site-map > h2 {
      margin-top: 0;
      font-size: var(--fs-base);
    }
    .site-map > p {
      margin: 0.35rem 0 0;
    }
    .site-map-wrap {
      background: #080607;
      border: 1px solid var(--rule);
      border-radius: var(--radius);
      padding: 0.4rem;
      margin: 0.35rem 0 0.45rem;
      overflow-x: auto;
    }
    .site-map-svg {
      display: block;
      width: 100%;
      max-width: none;
      height: auto;
      margin: 0 auto;
    }
    .site-map-svg .map-edge {
      fill: none;
      stroke: var(--accent);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .site-map-svg .map-edge-tight {
      stroke-dasharray: 6 5;
    }
    .site-map-svg .map-node {
      fill: var(--panel);
      stroke: var(--rule);
      stroke-width: 1;
      filter: drop-shadow(0 0 4px #000);
      transition: stroke 0.12s ease;
    }
    .site-map-svg .map-node-wash {
      fill: url(#site-node-wash);
      pointer-events: none;
    }
    .site-map-svg .map-node-out {
      stroke: var(--muted);
    }
    .site-map-svg .map-node-danger {
      stroke: var(--danger);
    }
    .site-map-svg a:hover .map-node,
    .site-map-svg a:focus .map-node {
      stroke: var(--link-hover);
    }
    .site-map-svg a:hover .map-node-danger,
    .site-map-svg a:focus .map-node-danger {
      stroke: var(--danger);
    }
    .site-map-svg a:focus {
      outline: none;
    }
    .site-map-svg a:focus .map-node {
      stroke-width: 2;
    }
    .site-map-svg .map-label,
    .site-map-svg .map-label tspan {
      fill: var(--head);
      font-family: var(--font-serif);
      font-size: var(--map-label-fs, 10px);
      font-weight: 400;
      font-synthesis-weight: none;
      letter-spacing: 0.08em;
      text-anchor: middle;
      dominant-baseline: alphabetic;
      alignment-baseline: alphabetic;
      pointer-events: none;
    }
    .site-map-svg a:hover .map-label,
    .site-map-svg a:hover .map-label tspan,
    .site-map-svg a:focus .map-label,
    .site-map-svg a:focus .map-label tspan {
      fill: var(--ink);
    }
    .site-map-svg .map-note {
      fill: var(--muted);
      font-family: var(--font-sans);
      font-size: 8px;
      text-anchor: middle;
      pointer-events: none;
    }
    .exits {
      font-size: var(--fs-sm);
      color: var(--muted);
      margin: 0.35rem 0 0.5rem;
    }
    .exits a { margin-right: 0.15rem; }

    header {
      border-bottom: 3px double var(--rule);
      padding-bottom: 0.65rem;
      margin-bottom: 1rem;
    }
    h1 {
      font-family: var(--font-serif);
      font-size: var(--fs-2xl);
      font-weight: 400;
      font-synthesis-weight: none;
      letter-spacing: var(--track-display);
      line-height: var(--lh-display);
      color: var(--head);
      margin: 0 0 0.35rem;
    }
    .meta { color: var(--muted); font-size: var(--fs-sm); }
    .meta strong { color: var(--ink); }
    nav.links { margin-top: 0.4rem; font-size: var(--fs-sm); }
    h2 {
      font-family: var(--font-serif);
      font-size: var(--fs-xl);
      font-weight: 400;
      font-synthesis-weight: none;
      letter-spacing: var(--track-display);
      line-height: var(--lh-display);
      color: var(--head);
      margin: 1.2rem 0 0.45rem;
      /* Matches the wiki page rule: full-width hairline in --rule at 90% */
      border-bottom: 1px solid color-mix(in srgb, var(--rule) 90%, transparent);
      padding-bottom: 0.32rem;
    }
    h3 {
      font-family: var(--font-serif);
      font-size: var(--fs-lg);
      font-weight: 400;
      font-synthesis-weight: none;
      letter-spacing: var(--track-display);
      line-height: var(--lh-display);
      color: var(--ink);
      margin: 0.75rem 0 0.28rem;
    }
    p, li { margin: 0.25rem 0; }
    ul, ol { padding-left: 1.15rem; margin: 0.3rem 0; }
    /* Areas are an h2 in the flow, not a card. .room stays as the id
       wrapper for nav, map, and § links. */
    .room {
      margin: 0 0 1.35rem;
      scroll-margin-top: 0.75rem;
    }
    section { scroll-margin-top: 0.75rem; }
    .deal {
      background: var(--accent-soft);
      border-left: 3px solid var(--accent);
      padding: 0.4rem 0.6rem;
      margin: 0.4rem 0;
      font-size: var(--fs-sm);
    }
    /* Read-aloud: parchment on a 4px rule of the same, set in Vollkorn. Roman
       only, so nothing here asks for italic — the serif against the sans body
       is the signal, at the same size as body copy. */
    .gm-line {
      border-left: 4px solid var(--read-aloud);
      padding: 0.3rem 0.75rem;
      margin: 0.45rem 0;
      color: var(--read-aloud);
      font-family: var(--font-quote);
      font-size: var(--fs-base);
      line-height: 1.3;
      letter-spacing: 0;
    }
    /* Read-aloud runs dimmer than body copy, and --link is within a few points
       of --quote — so a link inside one needs to sit brighter than its
       surroundings rather than dimmer, as it does in normal prose. */
    .gm-line a.wiki-link {
      color: var(--ink);
      text-decoration-color: rgba(238, 232, 223, .55);
    }
    .gm-line a.wiki-link:hover {
      color: var(--link-hover);
      text-decoration-color: var(--link-hover);
    }

    .dialog-lines {
      margin: 0.35rem 0 0.6rem 1.1rem;
      padding-left: 0.65rem;
      border-left: 2px solid var(--rule);
    }
    .dialog-lines .gm-line {
      margin: 0.2rem 0;
      padding: 0.1rem 0;
      color: var(--quote);
      border-left: none;
    }
    .dialog-lines .gm-line em {
      color: var(--muted);
      font-style: italic;
      margin-right: 0.25rem;
    }
    /* .tag and .tag.danger are defined once in the wiki's wiki.css — the
       index flags an untested sheet with the same tag. A sheet loads
       wiki.css before this one. */
    /* GM paragraph under the intro read-aloud: what’s true in this area. */
    .area-notes {
      margin: 0.25rem 0 0.45rem;
    }

    /* HP rows sit inside a wiki .stat-block; don't double the panel. */
    .stat-block .enemy-block {
      margin: 0.35rem 0 0;
      padding: 0.3rem 0 0;
      background: none;
      border: none;
      box-shadow: none;
    }
    .enemy-block {
      margin: 0.45rem 0 0.55rem;
      padding: 0.45rem 0.55rem;
      background: var(--panel);
      background-image: var(--card-wash);
      border: 1px solid var(--rule);
      border-left: 3px solid var(--accent);
      border-radius: var(--radius-panel);
      box-shadow: var(--shadow-panel);
    }
    .enemy-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.45rem 0.75rem;
      padding: 0.28rem 0;
      border-bottom: 1px solid rgba(74, 63, 50, 0.45);
    }
    .enemy-row:last-child { border-bottom: none; }
    .enemy-meta {
      flex: 1 1 10rem;
      min-width: 8rem;
      font-size: var(--fs-sm);
      color: var(--ink);
    }
    .enemy-meta .enemy-name {
      font-family: var(--font-serif);
      font-weight: 400;
      font-synthesis-weight: none;
      letter-spacing: var(--track-display);
      color: var(--head);
      margin-right: 0.35rem;
    }
    .hp-tracker {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.35rem 0.5rem;
      flex: 1 1 14rem;
      justify-content: flex-end;
    }
    /* The boxes, the filled/empty states and the readout are defined once in
       ../css/wiki.css — the book pages grew HP trackers of their own, and a
       sheet loads that stylesheet before this one. Only the sheet's own
       layout around them lives here. */

    footer,
    footer.site-credit {
      margin-top: 1.5rem;
      padding-top: 0.55rem;
      border-top: 1px solid var(--rule);
      font-size: var(--fs-xs);
      color: var(--muted);
      font-style: italic;
    }

    @media (max-width: 1100px) {
      html:has(body.has-map),
      html:has(body.has-map) body {
        height: auto !important;
        overflow: auto !important;
      }
      body.has-map .site-main {
        position: static;
        height: auto;
        left: auto;
        right: auto;
        margin-right: 0;
        max-width: 640px;
        overflow: visible;
      }
      body.has-map .site-main > * {
        max-width: none;
      }
      body.has-map .site-map {
        position: relative;
        width: 100%;
        height: auto;
        max-height: none;
        border-left: none;
        border-top: 1px solid var(--rule);
      }
    }
    @media (max-width: 800px) {
      .site-layout { flex-direction: column; }
      .site-nav {
        position: relative;
        width: 100%;
        height: auto;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--rule);
      }
      .site-main { margin-left: 0; max-width: none; }
      body.has-map .site-main { margin-right: 0; }
      .site-nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.15rem;
      }
      .site-nav .nav-label { width: 100%; }
    }
    @media print {
      :root {
        --ink: #1c1410; --muted: #5c4a3a; --rule: #c4a574; --bg: #fff;
        --card: #f7f1e8; --accent: #5d142b; --accent-soft: #efe6d8;
        --link: #4a3018; --danger: #8b3a2a;
        --read-aloud: #5c4a3a; --head: #5d142b;
      }
      .site-nav, .dice-toast, .wiki-preview { display: none !important; }
      body.has-map .site-map {
        position: relative;
        width: auto;
        height: auto;
        max-width: 22rem;
        border: 1px solid var(--rule);
        break-inside: avoid;
      }
      html:has(body.has-map),
      html:has(body.has-map) body {
        height: auto !important;
        overflow: visible !important;
      }
      body.has-map .site-main {
        position: static;
        height: auto;
        overflow: visible;
        margin-right: 0;
      }
      .room { break-inside: avoid; }
      button.dice-roll {
        background: none; border: none; color: inherit;
        padding: 0; box-shadow: none; font-weight: inherit;
      }
    }

/* --- The index: one card per site (moved here from wiki.css) --- */
.site-list {
  margin: 0.5rem 0 0;
}
.site-card {
  break-inside: avoid;
  margin: 0 0 1rem;
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--rule);
}
.site-card:last-child {
  border-bottom: none;
}
.site-card h2 {
  margin-top: 0;
}
.site-card .site-excerpt {
  color: var(--muted, #6b6560);
}
.site-card .site-variants,
.site-card .site-refs {
  font-size: var(--text);
  margin: 0.3rem 0 0;
}
.site-card .site-refs {
  color: var(--muted, #6b6560);
}
.site-refs-label {
  display: inline-block;
  margin-right: 0.4rem;
  font-family: var(--font-serif);
  font-size: 0.85em;
  letter-spacing: 0.06em;
  color: var(--muted, #6b6560);
  font-weight: 400;
  font-synthesis-weight: none;
}

/* --- Optional three.js model under a sheet's SVG map --- */
.site-map-3d {
  position: relative;
  margin-top: 0.75rem;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: var(--bg-elev);
  cursor: grab;
}
.site-map-3d:active {
  cursor: grabbing;
}
.site-map-3d canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.site-map-3d .map3d-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.map3d-label {
  pointer-events: auto;
  font-family: var(--font-serif);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--head);
  background: rgba(11, 9, 9, 0.72);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  text-decoration: none;
  white-space: nowrap;
}
.map3d-label:hover,
.map3d-label:focus {
  color: var(--link-hover);
  border-color: var(--head);
}
.map3d-label.danger {
  color: var(--danger);
}
.map3d-full {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 2;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--head);
  background: rgba(11, 9, 9, 0.72);
  border: 1px solid var(--rule);
  border-radius: 3px;
  cursor: pointer;
  box-shadow: none;
}
.map3d-full:hover,
.map3d-full:focus {
  color: var(--link-hover);
  border-color: var(--head);
}
.map3d-full .ico-close {
  display: none;
}
.site-map-3d:fullscreen {
  aspect-ratio: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.site-map-3d:fullscreen .map3d-full .ico-open {
  display: none;
}
.site-map-3d:fullscreen .map3d-full .ico-close {
  display: block;
}