/* Campaign Codex — site stylesheet
   Plain CSS, system fonts, no CDN, no build step. */

:root {
  /* Dark theme is the default palette — deep space, not fantasy parchment.
     Campaign Codex is the first of several game-system "universes", so the
     brand is a neutral cosmos rather than a single genre's colors. */
  --ink: #eef0fa;
  --ink-soft: #b6bcd9;
  --ink-muted: #7d84a8;
  --paper: #090b14;
  --paper-alt: #121529;
  --rule: #262a49;
  --accent: #8f7bff;        /* nebula violet */
  --accent-soft: #ab9bff;
  --gold: #f2c14e;          /* star gold, used for primary CTAs */
  --gold-soft: #f6d37c;
  --link: #63c9f2;          /* cyan */
  --code-bg: #141834;
  --hero-ink: #05070f;
  --hero-ink-soft: #eef0fa;

  /* Fixed space-scene tokens — the disc-world and hero are always dark,
     regardless of the light/dark toggle, so they must not read the
     theme-following --ink/--accent/--gold/etc. variables above. */
  --space-ink-muted: #7d84a8;
  --space-rule: #262a49;
  --space-accent: #8f7bff;
  --space-gold: #f2c14e;
  --space-gold-soft: #f6d37c;
  --space-link: #63c9f2;
  --space-paper-alt: #171b38;
}

:root[data-theme="light"] {
  --ink: #171a2c;
  --ink-soft: #454c6e;
  --ink-muted: #6a7093;
  --paper: #f5f6fc;
  --paper-alt: #e9ebf6;
  --rule: #d3d7ec;
  --accent: #5b3fd6;
  --accent-soft: #7c5cff;
  --gold: #b8860b;
  --gold-soft: #966d0b;
  --link: #1f6ea8;
  --code-bg: #eceffb;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 17px;
  line-height: 1.55;
}
html { transition: background-color .2s ease; }
body { transition: background-color .2s ease, color .2s ease; }

a {
  color: var(--link);
  text-decoration: none;
}
a:hover { text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
  border-radius: 2px;
}

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.site-header {
  background: var(--paper-alt);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--accent);
}
.brand:hover { text-decoration: none; }
.brand-mark {
  display: inline-flex;
  width: 24px;
  height: 24px;
  color: var(--accent);
}
.brand-mark svg { width: 100%; height: 100%; }
.site-nav a {
  margin-left: 18px;
  color: var(--ink-soft);
  font-size: 15px;
}
.site-nav a:hover { color: var(--accent); text-decoration: none; }

/* Theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  margin-left: 20px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle-track {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.theme-toggle-track svg {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  color: var(--gold-soft);
}
.theme-toggle-track .icon-moon { left: 5px; }
.theme-toggle-track .icon-sun { right: 5px; }
.theme-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  transition: left .2s ease;
}
:root[data-theme="light"] .theme-toggle-thumb { left: 26px; }

/* Deep-space background, shared by the disc-world section and the hero —
   fixed treatment regardless of light/dark toggle. */
.space-bg {
  position: relative;
  background-color: var(--hero-ink);
  background-image:
    radial-gradient(120% 140% at 85% -10%, #2c1f5c 0%, transparent 55%),
    radial-gradient(80% 90% at 10% 110%, #0f2f4a 0%, transparent 60%),
    radial-gradient(1.6px 1.6px at 12% 22%, #fff 0%, transparent 60%),
    radial-gradient(1.2px 1.2px at 28% 68%, #fff 0%, transparent 60%),
    radial-gradient(1.8px 1.8px at 42% 15%, #fff 0%, transparent 60%),
    radial-gradient(1.2px 1.2px at 58% 45%, #fff 0%, transparent 60%),
    radial-gradient(1.4px 1.4px at 68% 78%, #fff 0%, transparent 60%),
    radial-gradient(1.6px 1.6px at 82% 30%, #fff 0%, transparent 60%),
    radial-gradient(1.2px 1.2px at 92% 62%, #fff 0%, transparent 60%),
    radial-gradient(1.4px 1.4px at 6% 85%, #fff 0%, transparent 60%),
    radial-gradient(1.2px 1.2px at 36% 92%, #fff 0%, transparent 60%);
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--hero-ink-soft);
}

/* Hero */
.hero {
  padding: 76px 0 64px;
  border-bottom: 1px solid #05070f;
}
/* Disc-world "choose your world" scene */
.discworld {
  padding: 64px 0 20px;
  text-align: center;
}
.discworld-head {
  max-width: 640px;
  margin: 0 auto 8px;
}
.discworld-kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  color: var(--space-gold-soft);
  margin: 0 0 14px;
  font-weight: 700;
}
.discworld h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 38px;
  line-height: 1.18;
  margin: 0 0 14px;
  color: #fff;
  font-weight: 700;
}
.discworld-sub {
  font-size: 17px;
  color: #c3c6e6;
  margin: 0 0 8px;
}
.discworld-stage {
  max-width: 920px;
  margin: 0 auto;
}

/* Full-bleed starfield strip flanking the island art. Only this band uses
   the photographed starfield; the section above/below it keeps the
   .space-bg blue/purple gradient treatment. */
.discworld-starfield-band {
  background-image: url("assets/discworld/starfield.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Hand-painted multiverse map art + clickable district hotspots. */
.discworld-stage-art {
  position: relative;
}
/* The hotspot percentages must resolve against the IMAGE box. .wrap carries
   `padding: 0 24px`, and a percentage `left` resolves against the padding
   box, so positioning against .discworld-stage-art put every pin ~24px off
   at each edge. This inner box hugs the artwork exactly. */
.discworld-map {
  position: relative;
}
.discworld-art {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.city-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  text-align: center;
}
.city-hotspot-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--space-ink-muted);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  filter: grayscale(0.4);
  opacity: 0.85;
}
.city-hotspot-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--space-ink-muted);
  background: rgba(6, 8, 18, 0.55);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}
.city-hotspot:hover .city-hotspot-label,
.city-hotspot:focus-visible .city-hotspot-label {
  color: #fff;
  border-color: var(--space-gold-soft);
}
.city-tm {
  font-weight: 700;
  color: var(--space-gold-soft);
  margin-left: 2px;
}

.city-hotspot-tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--space-ink-muted);
  background: rgba(6, 8, 18, 0.6);
  border: 1px solid var(--space-rule);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
  pointer-events: none;
}
.city-hotspot-tag-live {
  color: #1c130c;
  background: var(--space-gold);
  border-color: var(--space-gold);
}

.city-hotspot-live .city-hotspot-dot {
  background: var(--space-gold);
  border-color: var(--space-gold-soft);
  filter: none;
  opacity: 1;
  box-shadow: 0 0 12px rgba(242, 193, 78, 0.85);
  animation: city-pulse 3.2s ease-in-out infinite;
}
.city-hotspot-live .city-hotspot-label {
  color: #fff;
  background: rgba(6, 8, 18, 0.78);
  border: 1px solid var(--space-gold-soft);
}
.city-hotspot-live .city-tm { color: var(--space-gold); }
.city-hotspot-live:hover .city-hotspot-dot,
.city-hotspot-live:focus-visible .city-hotspot-dot {
  background: var(--space-gold-soft);
}
.city-hotspot-live:focus-visible {
  outline: 2px solid var(--space-gold-soft);
  outline-offset: 4px;
  border-radius: 6px;
}

@keyframes city-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}

.discworld-note {
  font-size: 13.5px;
  color: var(--space-ink-muted);
  margin: 4px 0 0;
}
.discworld-note strong { color: var(--space-gold-soft); }
.discworld-note a { color: var(--space-link); }

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  color: #c3b6ff;
  background: rgba(143, 123, 255, 0.14);
  border: 1px solid rgba(143, 123, 255, 0.35);
  border-radius: 999px;
  padding: 5px 12px;
  margin: 0 0 16px;
}
.hero-tag .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f2c14e;
  flex-shrink: 0;
}
.hero.compact {
  padding: 48px 0 40px;
  background: var(--paper-alt);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.hero.compact .kicker { color: var(--ink-muted); }
.hero.compact h1 { color: var(--ink); }
.hero.compact .lede { color: var(--ink-soft); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 48px;
}

.kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  color: var(--space-gold-soft);
  margin: 0 0 14px;
  font-weight: 700;
}
.hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 42px;
  line-height: 1.15;
  margin: 0 0 18px;
  color: #fff;
  font-weight: 700;
}
.lede {
  font-size: 18px;
  color: #c3c6e6;
  max-width: 560px;
  margin: 0;
}
.ctas {
  margin-top: 30px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: var(--space-gold);
  color: #1c130c;
}
.btn-primary:hover { background: var(--space-gold-soft); }
.hero .btn-secondary {
  background: transparent;
  color: #eef0fa;
  border-color: #3a3f68;
}
.hero .btn-secondary:hover {
  background: rgba(255,255,255,0.08);
}
.btn-secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn-secondary:hover {
  background: var(--accent);
  color: #fff;
}

.trust-row {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 13.5px;
  color: #a5abce;
}
.trust-row li { position: relative; padding-left: 16px; }
.trust-row li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--space-gold-soft);
}

/* Hero mockup art */
.hero-art { display: flex; justify-content: center; }
.mockup-window {
  width: 100%;
  max-width: 380px;
  background: #10132a;
  border: 1px solid #2c3160;
  border-radius: 10px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7);
  overflow: hidden;
}
.mockup-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: #171b38;
  border-bottom: 1px solid #2c3160;
}
.mockup-titlebar .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #454b7e;
}
.mockup-title {
  margin-left: 8px;
  font-size: 12px;
  color: #a5abce;
  font-family: Georgia, "Times New Roman", serif;
}
.mockup-body { padding: 20px; }
.mockup-row-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.mockup-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--space-link), var(--space-accent));
  flex-shrink: 0;
}
.mockup-lines { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mockup-bar {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--space-gold);
  opacity: 0.85;
}
.mockup-bar.dim { background: #454b7e; opacity: 0.7; }
.mockup-bar.w-60 { width: 60%; }
.mockup-bar.w-40 { width: 40%; }
.mockup-bar.w-90 { width: 90%; }
.mockup-bar.w-75 { width: 75%; }
.mockup-bar.w-55 { width: 55%; }
.mockup-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.mockup-stat {
  background: #171b38;
  border: 1px solid #2c3160;
  border-radius: 6px;
  padding: 8px 4px;
  text-align: center;
}
.mockup-stat-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #7d84a8;
  margin-bottom: 4px;
}
.mockup-stat-val {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  color: #eef0fa;
  font-weight: 700;
}
.mockup-trace { display: flex; flex-direction: column; gap: 8px; }

/* Content sections */
.content {
  padding: 48px 0;
}
.content.alt {
  background: var(--paper-alt);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.content h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  margin: 0 0 16px;
  color: var(--ink);
}
.section-title { text-align: center; margin-bottom: 10px; }
.section-sub {
  text-align: center;
  color: var(--ink-muted);
  max-width: 560px;
  margin: 0 auto 40px;
  font-size: 16px;
}
.section-sub-tight {
  color: var(--ink-muted);
  font-size: 14.5px;
  margin: -8px 0 16px;
}

/* Feature grid */
.grid.three { grid-template-columns: repeat(3, 1fr); }
.feature-card {
  background: var(--paper-alt);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 26px 24px;
}
.feature-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--accent);
  margin-bottom: 16px;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-card h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  margin: 0 0 8px;
  color: var(--ink);
}
.feature-card p { margin: 0; color: var(--ink-soft); font-size: 15px; }

/* World-select buttons (project status page) */
.world-select-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 12px;
}
.world-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 28px 16px;
  border-radius: 10px;
  border: 1px solid var(--rule);
  background: var(--paper-alt);
  text-decoration: none;
  min-height: 100px;
}
.world-btn-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 700;
}
.trademark-mark {
  font-weight: 700;
  color: var(--gold-soft);
  margin-left: 2px;
}
.world-btn-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px 10px;
}
.world-btn-live {
  border-color: var(--gold);
  background: var(--paper-alt);
  cursor: pointer;
}
.world-btn-live .world-btn-name { color: var(--ink); }
.world-btn-live:hover {
  border-color: var(--gold-soft);
  background: var(--code-bg);
  text-decoration: none;
}
.world-btn-tag-live {
  color: #1c130c;
  background: var(--gold);
  border-color: var(--gold);
}
.world-btn-planned {
  cursor: not-allowed;
  opacity: 0.55;
}
.world-btn-planned .world-btn-name { color: var(--ink-muted); }
.world-btn-planned .trademark-mark { color: var(--ink-muted); }

/* Reusable progress bar */
.progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--rule);
  overflow: hidden;
}
.progress-bar-lg { height: 10px; }
.progress-bar-fill {
  height: 100%;
  width: 0;
  background: var(--gold);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* Pathfinder build-status figures */
.status-overall {
  max-width: 640px;
  margin: 0 auto 40px;
}
.status-overall-figure {
  display: flex;
  align-items: baseline;
  gap: 12px;
  justify-content: center;
  margin-bottom: 10px;
}
.status-overall-pct {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 42px;
  font-weight: 700;
  color: var(--ink);
}
.status-overall-label {
  font-size: 14.5px;
  color: var(--ink-muted);
}
.status-books-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
/* These are the primary navigation of the status page, so they are sized as
   real buttons (comfortable tap target on a phone) and state their status in
   words, not only as a bar and a percentage. */
.status-book-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-height: 104px;
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--rule);
  border-radius: 10px;
  padding: 16px 18px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.status-book-card:hover,
.status-book-card:focus-visible {
  border-color: var(--accent);
  border-left-color: var(--accent);
  background: var(--code-bg);
}
.status-book-card-done    { border-left-color: var(--gold); }
.status-book-card-partial { border-left-color: var(--accent); }
.status-book-card-pending { border-left-color: var(--rule); }
.status-book-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.status-book-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.status-book-pct {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0;
  line-height: 1.1;
}
.status-book-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}
.status-book-badge {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 10px;
}
.status-book-badge-done {
  color: #1c130c;
  background: var(--gold);
}
.status-book-badge-partial {
  color: var(--ink);
  background: var(--paper-alt);
  border: 1px solid var(--accent);
}
.status-book-badge-pending {
  color: var(--ink-muted);
  background: var(--code-bg);
  border: 1px solid var(--rule);
}
.status-book-count {
  font-size: 12.5px;
  color: var(--ink-muted);
}

/* Book/kind drill-down navigation */
.status-back {
  display: inline-block;
  background: none;
  border: none;
  color: var(--link);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
}
.status-back:hover { text-decoration: underline; }

.status-item-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}
.status-item-search {
  flex: 1 1 240px;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
}
.status-filter-chips {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.status-chip {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
}
.status-chip.is-active {
  color: #1c130c;
  background: var(--gold);
  border-color: var(--gold);
}

/* Item table. A real <table> so the three facts per row (name, standing,
   doneness) stay in aligned, individually-headed columns. The previous flex
   rows had no headers and no column rule, so on a narrow screen the name and
   both pills ran together into one unreadable string. */
.status-item-tablewrap {
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow-x: auto;
  margin-bottom: 16px;
  -webkit-overflow-scrolling: touch;
}
.status-item-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.status-item-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--paper-alt);
  border-bottom: 1px solid var(--rule);
  padding: 9px 14px;
  white-space: nowrap;
}
.status-item-table thead th:nth-child(2),
.status-item-table thead th:nth-child(3) { text-align: right; }
.status-item-row { background: var(--paper); }
.status-item-row:nth-child(even) { background: var(--paper-alt); }
.status-item-table td {
  padding: 9px 14px;
  border-top: 1px solid var(--rule);
  vertical-align: middle;
}
.status-item-name {
  font-size: 14px;
  color: var(--ink);
  width: 100%;
}
.status-item-cell {
  text-align: right;
  white-space: nowrap;
}
.status-item-pill {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 3px 10px;
}
.status-item-pill-done {
  color: #1c130c;
  background: var(--gold);
}
.status-item-pill-partial {
  color: var(--ink);
  background: var(--paper-alt);
  border: 1px solid var(--accent);
}
.status-item-pill-pending {
  color: var(--ink-muted);
  background: var(--code-bg);
  border: 1px solid var(--rule);
}
.status-item-pill-standing {
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--rule);
  font-weight: 600;
}
.status-standing-note {
  color: var(--ink-muted);
  margin-top: 4px;
}
.status-standing-note:empty { display: none; }

.status-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}
.status-page-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-alt);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
}
.status-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.status-page-label {
  font-size: 13px;
  color: var(--ink-muted);
}

/* Callout */
.callout {
  background: var(--paper-alt);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  padding: 22px 26px;
}
.callout-kicker {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 8px;
}
.callout p:last-child { margin-bottom: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Install table: Linux / macOS / Windows columns */
.install-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.install-table {
  width: 100%;
  min-width: 760px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 14.5px;
}
.install-table th,
.install-table td {
  border: 1px solid var(--rule);
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}
.install-table thead th:first-child,
.install-table tbody th {
  width: 160px;
}
.install-table thead th {
  background: var(--code-bg);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  color: var(--ink);
}
.install-table tbody th {
  background: var(--paper-alt);
  font-weight: 600;
  color: var(--ink);
}
.install-table td pre {
  margin: 0 0 8px;
  overflow-x: auto;
  white-space: pre;
}
.install-table td p:last-child { margin-bottom: 0; }
.install-status {
  display: inline-block;
  margin-left: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 2px 8px;
  vertical-align: middle;
}
.install-status-verified {
  color: #1c130c;
  background: var(--gold);
  border-color: var(--gold);
}
.content h3 {
  font-size: 18px;
  margin: 24px 0 8px;
  color: var(--ink);
}
.content p {
  margin: 0 0 14px;
}
.content ul {
  margin: 0 0 14px;
  padding-left: 22px;
}
.content li { margin-bottom: 4px; }

.grid {
  display: grid;
  gap: 32px;
}
.grid.two {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 340px; margin: 0 auto 8px; }
}
@media (max-width: 720px) {
  .grid.two { grid-template-columns: 1fr; }
  .grid.three { grid-template-columns: 1fr; }
  .world-select-grid { grid-template-columns: 1fr 1fr; }
  .status-books-grid { grid-template-columns: 1fr; }
  .status-item-table { font-size: 13px; }
  .status-item-table td,
  .status-item-table thead th { padding: 9px 10px; }
  .hero h1 { font-size: 30px; }
  .lede { font-size: 17px; }
}
@media (max-width: 480px) {
  .world-select-grid { grid-template-columns: 1fr; }
}

code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
  background: var(--code-bg);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--ink);
}
pre {
  background: var(--code-bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 18px;
}
pre code {
  background: transparent;
  padding: 0;
  font-size: inherit;
}

/* Releases */
.release {
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.release:first-of-type {
  border-top: none;
  padding-top: 0;
}
.release h3 {
  margin: 0 0 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
}
.release .meta {
  color: var(--ink-muted);
  font-size: 14px;
  margin: 0 0 12px;
  font-style: italic;
}
.release p:last-child {
  margin-bottom: 0;
}

/* Footer */
.site-footer {
  padding: 32px 0;
  background: var(--paper-alt);
  border-top: 1px solid var(--rule);
  font-size: 13.5px;
  color: var(--ink-muted);
}
.site-footer p {
  margin: 0 0 4px;
}


/* ---------------------------------------------------------------------------
   Map legend (phones)
   Six always-on nowrap labels cannot coexist on a ~340px-wide image; they
   overlap into unreadable noise, and the widest of them overflows the frame
   and is clipped. Below 720px the floating labels are hidden and this legend
   carries exactly the same six districts, in the same order, with the same
   standing tags.
--------------------------------------------------------------------------- */
.discworld-legend {
  display: none;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.discworld-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--space-rule);
  border-radius: 8px;
  background: rgba(6, 8, 18, 0.55);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--space-ink-muted);
}
.discworld-legend-item + .discworld-legend-item { margin-top: 8px; }
.discworld-legend-item a {
  color: #fff;
  text-decoration: none;
}
.discworld-legend-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--space-ink-muted);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
}
.discworld-legend-live {
  border-color: var(--space-gold-soft);
  background: rgba(6, 8, 18, 0.75);
}
.discworld-legend-live .discworld-legend-dot {
  background: var(--space-gold);
  border-color: var(--space-gold-soft);
  box-shadow: 0 0 10px rgba(242, 193, 78, 0.8);
}
.discworld-legend-tag {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--space-ink-muted);
  border: 1px solid var(--space-rule);
  border-radius: 999px;
  padding: 2px 8px;
}
.discworld-legend-tag-live {
  color: #1c130c;
  background: var(--space-gold);
  border-color: var(--space-gold);
}

@media (max-width: 720px) {
  .city-hotspot-label,
  .city-hotspot-tag { display: none; }
  .discworld-legend { display: block; }
}