@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/AtkinsonHyperlegible-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/AtkinsonHyperlegible-Italic.woff2') format('woff2');
}

:root {
  --bg: #fdf6e3;
  --panel: #eee8d5;
  --ink: #073642;
  --ink-strong: #002b36;
  --muted: #586e75;
  --line: #e3dcc7;
  --cyan: #2aa198;
  --cyan-ink: #0d6b63;
  --focus: #0d6b63;
  --surface: #fff;
  --surface-active: #d9f2ee;
  --error: #8a2f2f;
  --place-cave: #e9edf2;
  --place-campfire: #f6ead6;
  --place-watering-hole: #e4efee;
  --place-library: #efeaf1;
  --place-habitat: #e9f0e6;
  --maxw: 1040px;
  color-scheme: light;
  font-size: 18px;
}

/* Dark mode: the Solarized dark pairing of the light palette above. Card
   faces keep their own light backgrounds, so they read as light cards on a
   dark table. Text tones are chosen to pass WCAG AA on the dark surfaces.
   The tokens are applied automatically when the device is set to dark (unless
   the reader has forced light with the on-page toggle), and explicitly when
   the reader forces dark. Same values either way. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #002b36;
    --panel: #073642;
    --ink: #93a1a1;
    --ink-strong: #eee8d5;
    --muted: #839496;
    --line: #103e4b;
    --cyan: #2aa198;
    --cyan-ink: #5fc9c0;
    --focus: #5fc9c0;
    --surface: #073642;
    --surface-active: #0b453f;
    --error: #f08c84;
    --place-cave: #04303e;
    --place-campfire: #0b2e30;
    --place-watering-hole: #01313a;
    --place-library: #0a2c3f;
    --place-habitat: #04322f;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #002b36;
  --panel: #073642;
  --ink: #93a1a1;
  --ink-strong: #eee8d5;
  --muted: #839496;
  --line: #103e4b;
  --cyan: #2aa198;
  --cyan-ink: #5fc9c0;
  --focus: #5fc9c0;
  --surface: #073642;
  --surface-active: #0b453f;
  --error: #f08c84;
  --place-cave: #04303e;
  --place-campfire: #0b2e30;
  --place-watering-hole: #01313a;
  --place-library: #0a2c3f;
  --place-habitat: #04322f;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

a { color: var(--cyan-ink); }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink-strong); color: var(--bg);
  padding: 10px 14px; z-index: 10; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; top: 0; }

.site-header {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 24px 0 26px;
}
h1 { font-size: 2rem; margin: 0 0 4px; color: var(--ink-strong); }
.tagline { margin: 0 0 16px; color: var(--muted); max-width: 62ch; }

.rules { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 14px; }
.rules p { margin: 0; max-width: 46ch; }
.rules.stack { flex-direction: column; align-items: flex-start; gap: 8px; }
.rules.stack .rules-lead { margin-top: 2px; }
.rules.stack .rules-list { margin: 0; padding-left: 1.2em; max-width: 46ch; }
.rules.stack .rules-list li { margin: 4px 0; }

.disclose { margin: 8px 0 0; }
.disclose summary { cursor: pointer; color: var(--cyan-ink); font-weight: 700; padding: 4px 0; }
.disclose p, .disclose ul { max-width: 72ch; }
.disclose ul { padding-left: 1.2em; }
.disclose li { margin: 4px 0; }

main { padding: 28px 0 44px; }
.section-head { display: flex; align-items: baseline; gap: 16px; justify-content: space-between; flex-wrap: wrap; }
h2 { font-size: 1.4rem; color: var(--ink-strong); margin: 0 0 4px; }
.muted { color: var(--muted); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 20px; }
.filters-label { margin: 16px 0 6px; color: var(--ink); }
.filter {
  font: inherit; cursor: pointer; padding: 7px 15px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
}
.filter:hover { border-color: var(--cyan); }
.filter[aria-pressed="true"] {
  background: var(--cyan); border-color: var(--cyan);
  color: #04302c; font-weight: 700;
}

.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}
.tile {
  font: inherit; cursor: pointer; text-align: left; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.tile:hover { border-color: var(--cyan); }
.tile-added { border-color: var(--cyan); border-width: 2px; background: var(--surface-active); }
.tile-added .tile-name { color: var(--cyan-ink); }
.tile-added .tile-name::after { content: " ✓"; }
.tile-art {
  display: block; aspect-ratio: 5 / 7; border-radius: 8px;
  overflow: hidden; background: var(--panel);
}
.tile-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tile-name { font-weight: 700; color: var(--ink-strong); }

.table-section { margin-top: 44px; border-top: 1px solid var(--line); padding-top: 24px; }
.table-grid {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px;
}
.laid {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.laid-card { aspect-ratio: 5 / 7; border-radius: 10px; overflow: hidden; background: var(--panel); }
.laid-img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .18s ease; }
.laid-controls { display: flex; flex-direction: column; gap: 8px; }
.laid-text { display: flex; flex-direction: column; gap: 2px; }
.laid-name { font-weight: 700; color: var(--ink-strong); }
.laid-prompt { color: var(--ink); }
.laid-note { margin-top: 2px; }
.laid-note summary { cursor: pointer; color: var(--cyan-ink); }
.laid-note p { margin: 6px 0 0; }
.laid-build { margin: 8px 0 0; font-size: 0.95em; }
.laid-build a { color: var(--cyan-ink); text-decoration: underline; }

.btn {
  font: inherit; cursor: pointer; padding: 9px 14px; border-radius: 10px;
  border: 1.5px solid var(--cyan); background: var(--cyan); color: #04302c; font-weight: 700;
}
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn:hover { filter: brightness(0.97); }

.theme-toggle {
  font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px; margin: 2px 0;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700;
}
.theme-toggle:hover { border-color: var(--cyan); }
.theme-toggle-icon { font-size: 1.05rem; line-height: 1; }
.site-header .theme-toggle { margin: 0 0 10px; }

.site-footer { border-top: 1px solid var(--line); margin-top: 20px; padding: 20px 0 40px; color: var(--muted); font-size: .92rem; }
.error { color: var(--error); max-width: 62ch; }

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

.intro { margin: 0 0 14px; max-width: 66ch; }
.backlink { margin: 0 0 8px; }

.aims { margin: 4px 0 10px; }
.aims h2 { font-size: 1.05rem; margin: 0 0 6px; color: var(--ink-strong); }
.aims ul { margin: 0; padding-left: 1.2em; max-width: 68ch; }
.aims li { margin: 3px 0; }

.family-blurb {
  margin: 0 0 16px; max-width: 70ch; color: var(--ink);
  background: var(--panel); border-radius: 10px; padding: 10px 14px;
}
.family-subtitle { display: block; margin-top: 6px; color: var(--muted); font-size: .92rem; }

.table-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.breakbar { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 0; }
.breakbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.breakbar-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#to-table { flex: none; }

/* Collapsed site menu (native <details>), reused on every page. */
.sitenav { position: relative; margin: 0; }
.sitenav > ul {
  list-style: none; margin: 6px 0 0; padding: 8px 12px;
  position: absolute; z-index: 20; left: 0; min-width: 230px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 6px 22px rgba(0,0,0,.14);
}
.sitenav > ul li { margin: 3px 0; }
.sitenav a[aria-current="page"] { font-weight: 700; }
.site-header .sitenav { margin: 0 0 10px; }

/* Standalone prose pages (Why, Origin). */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 28px; }
.prose h3 { margin-top: 18px; font-size: 1.1rem; color: var(--ink-strong); }
.prose p { margin: 10px 0; }
.prose ul { padding-left: 1.2em; }
.prose li { margin: 4px 0; }
.prose blockquote { margin: 12px 0; padding-left: 14px; border-left: 3px solid var(--line); color: var(--muted); }

/* Facilitator sheet page: matches the print sheet's structure (modes, dot
   bullets, numbered steps), restyled for the web with the site palette. */
.prose .facilitator-pdf { margin: 0 0 20px; }
.prose p.lead { font-weight: 700; color: var(--ink-strong); margin: 18px 0 6px; }
.prose .mode { margin: 0 0 12px; }
.prose img { max-width: 100%; height: auto; }
.prose .fig { margin: 20px 0; }
.prose .fig img { width: 100%; display: block; border: 1px solid var(--line); border-radius: 14px; }
.prose .mode .name { font-weight: 700; color: var(--ink-strong); }
.prose .mode .who { font-style: italic; color: var(--muted); }
.prose .mode .desc { margin: 2px 0 0; }
.prose ul.dot { list-style: none; margin: 0 0 8px; padding: 0; }
.prose ul.dot > li { position: relative; padding-left: 18px; margin: 0 0 6px; }
.prose ul.dot > li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.prose ol.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.prose ol.steps > li { counter-increment: s; position: relative; padding-left: 32px; margin: 0 0 8px; }
.prose ol.steps > li::before { content: counter(s); position: absolute; left: 0; top: .05em; width: 22px; height: 22px; border-radius: 50%; background: var(--cyan); color: #fff; font-weight: 700; font-size: .8rem; text-align: center; line-height: 22px; }
.break-dialog {
  border: none; border-radius: 16px; padding: 0;
  width: min(92vw, 560px);
  background: var(--bg); color: var(--ink);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.break-dialog::backdrop { background: rgba(0, 43, 54, 0.55); }
.break-dialog-inner {
  padding: 22px 22px 24px; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 14px;
}
.break-dialog h2 { margin: 0; color: var(--ink-strong); }
.break-lead { margin: 0; font-size: 1.05rem; }
.break-def { margin: 0; color: var(--muted); }
.break-audio { margin: 0; }
.break-audio figcaption { margin: 0 0 8px; }
.break-audio audio { width: 100%; }
.break-credit { margin: 6px 0 0; font-size: .9rem; color: var(--muted); }
.break-affirm { margin: 0; padding-left: 14px; border-left: 3px solid var(--line); }
.break-affirm p { margin: 6px 0; }
.break-ways summary { cursor: pointer; color: var(--cyan-ink); font-weight: 700; }
.break-ways ul { columns: 2; margin: 8px 0 0; padding-left: 1.2em; }
.break-ways li { margin: 2px 0; }
#break-close { align-self: flex-start; }

.deck-group { font-size: 1.05rem; color: var(--ink-strong); margin: 20px 0 8px; }
.deck-group:first-child { margin-top: 0; }

.deck-realm-head { display: flex; align-items: center; gap: 8px; margin: 26px 0 10px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.deck-realm-head:first-child { margin-top: 0; }
.deck-realm { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--ink-strong); }
.realm-info {
  flex: none; width: 24px; height: 24px; padding: 0; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; cursor: pointer; font-weight: 700; font-size: .85rem; font-style: italic;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--cyan-ink);
}
.realm-info:hover { border-color: var(--cyan); }
.realm-desc {
  margin: 0 0 14px; max-width: 70ch; color: var(--ink);
  background: var(--panel); border-radius: 10px; padding: 10px 14px;
}
.realm-desc[hidden] { display: none; }
.realm-desc p { margin: 0; }

.summary { margin-top: 34px; border-top: 1px solid var(--line); padding-top: 20px; }
.summary-list { margin: 8px 0 12px; padding-left: 1.2em; max-width: 62ch; }
.summary-list li { margin: 3px 0; }
.summary-q { max-width: 62ch; }
.summary-list li { margin: 8px 0; }
.summary-name { display: block; }
.summary-reflect { display: block; font-style: italic; color: var(--muted); }
.summary-note-field { max-width: 62ch; margin: 4px 0 14px; }
.summary-note-field label { display: block; margin-bottom: 6px; }
#summary-note {
  width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px;
  border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink); resize: vertical;
}
#summary-note:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.reflect { margin-top: 8px; }
.reflect-q { margin: 0 0 4px; font-style: italic; color: var(--ink); }
.reflect-more { font: inherit; font-size: .85rem; cursor: pointer; background: none; border: 0; padding: 0; color: var(--cyan-ink); text-decoration: underline; }

body { transition: background-color .4s ease; }
body[data-place="the-cave"] { background-color: var(--place-cave); }
body[data-place="the-campfire"] { background-color: var(--place-campfire); }
body[data-place="the-watering-hole"] { background-color: var(--place-watering-hole); }
body[data-place="the-library"] { background-color: var(--place-library); }
body[data-place="the-habitat"] { background-color: var(--place-habitat); }

.gb { padding-top: 8px; }
.gb-family { margin: 0 0 30px; }
.gb-family > .muted { max-width: 70ch; margin: 0 0 14px; }
.gb-entry { margin: 0 0 18px; max-width: 70ch; }
.gb-entry h3 { margin: 0 0 2px; color: var(--ink-strong); font-size: 1.05rem; }
.gb-meta { margin: 0 0 5px; color: var(--muted); }
.gb-entry p:last-child { margin: 0; }

.tile-wrap { position: relative; }
.tile { width: 100%; }
.laid-card { position: relative; }

.zoom {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line);
  background: rgba(255, 255, 255, 0.92); color: var(--ink-strong);
}
.zoom:hover { border-color: var(--cyan); }
.zoom svg { display: block; }

.lightbox {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.lightbox[hidden] { display: none; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(0, 43, 54, 0.55); }
.lightbox-panel {
  position: relative; z-index: 1; margin: 0;
  background: var(--bg); border-radius: 16px; padding: 16px;
  max-width: min(92vw, 560px); max-height: 92vh; overflow: auto;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.lightbox-close {
  position: absolute; top: 8px; right: 8px;
  width: 40px; height: 40px; padding: 0; line-height: 1; font-size: 1.6rem;
  cursor: pointer; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--surface); color: var(--ink-strong);
}
.lightbox-close:hover { border-color: var(--cyan); }
.lightbox-img {
  width: 100%; max-height: 68vh; object-fit: contain; display: block;
  border-radius: 10px; background: var(--panel);
}
.lightbox-caption { margin: 0; }
.lightbox-name { margin: 4px 0 2px; font-size: 1.3rem; }
.lightbox-prompt { margin: 0; color: var(--ink); font-size: 1.1rem; }
.lightbox-prompt[hidden] { display: none; }
.lightbox-note { margin-top: 6px; }
body.lightbox-open { overflow: hidden; }
body.break-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------------------
   Zone a room (rooms.html)
   Reuses the existing tokens throughout, including the per-place background
   colors already defined for the deck, so a zone is the same color here as it
   is on its card. No new palette.
   --------------------------------------------------------------------------- */

.rooms-intro, .rooms-step { margin: 0 0 40px; }
.rooms-step h2 { margin: 0 0 10px; }
.rooms-note { margin: 4px 0 14px; font-size: .95rem; }

.rooms-form { margin: 18px 0 0; }
.rooms-group {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px 16px 14px;
  margin: 0 0 14px;
}
.rooms-group legend {
  font-weight: 700;
  color: var(--ink-strong);
  padding: 0 6px;
}
.rooms-group label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 8px 0;
  max-width: 72ch;
  line-height: 1.5;
  cursor: pointer;
}
.rooms-group input[type="checkbox"] {
  margin-top: .3em;
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
  accent-color: var(--cyan-ink);
}

.rooms-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  margin: 16px 0 0;
}
.rooms-saved { margin: 0; font-size: .92rem; }

.rooms-result { margin: 12px 0 0; }
.rooms-lead { max-width: 68ch; font-size: 1.05rem; color: var(--ink-strong); }
.rooms-held, .rooms-open { margin: 10px 0 12px; padding-left: 1.2em; max-width: 72ch; }
.rooms-held li, .rooms-open li { margin: 8px 0; line-height: 1.5; }
.rooms-open-head { margin: 22px 0 6px; font-size: 1.05rem; }

.rooms-zone {
  border: 1px solid var(--line);
  border-left: 6px solid var(--cyan);
  border-radius: 10px;
  padding: 14px 18px 16px;
  margin: 0 0 16px;
  background: var(--surface);
}
.rooms-zone h3 { margin: 0 0 6px; }
.rooms-zone p { max-width: 72ch; }
.rooms-prompt { font-style: italic; color: var(--ink-strong); margin: 0 0 10px; }
.rooms-needs { margin: 12px 0 0; color: var(--muted); font-size: .95rem; }
#zone-cave { background: var(--place-cave); }
#zone-campfire { background: var(--place-campfire); }
#zone-watering-hole { background: var(--place-watering-hole); }
#zone-library { background: var(--place-library); }
#zone-habitat { background: var(--place-habitat); }

.rooms-next { padding-left: 1.2em; max-width: 72ch; }
.rooms-next li { margin: 8px 0; }

.rooms-signs { margin: 20px 0 0; display: grid; gap: 18px; }
.rooms-sign {
  border: 2px solid var(--ink-strong);
  border-radius: 12px;
  background: var(--surface);
  margin: 0;
  padding: 26px 24px 18px;
  text-align: center;
}
.rooms-sign-kicker { margin: 0; color: var(--muted); text-transform: lowercase; letter-spacing: .04em; }
.rooms-sign-name { margin: 2px 0 10px; font-size: 2rem; color: var(--ink-strong); }
.rooms-sign-prompt { margin: 0 0 14px; font-style: italic; font-size: 1.15rem; }
.rooms-sign-body { margin: 0 auto; max-width: 42ch; font-size: 1.05rem; line-height: 1.5; }
.rooms-sign-foot { margin: 18px 0 0; color: var(--muted); font-size: .85rem; }

@media (min-width: 720px) {
  .rooms-signs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Printing. Two modes:
   - Plain print (browser File > Print): the whole page, minus screen furniture.
   - "printing-signs" (the buttons on the page): ONLY the signs, one per sheet,
     because a sign competing with a page of prose is a sign nobody puts up. */
@media print {
  .breakbar, .skip, .theme-toggle, .rooms-actions, .site-footer { display: none !important; }
  .rooms-zone { break-inside: avoid; }
  .rooms-sign { break-inside: avoid; border-width: 3px; }
  .rooms-signs { grid-template-columns: 1fr; }

  body.printing-signs > *:not(main) { display: none !important; }
  body.printing-signs main .wrap > section:not(.rooms-signs-section) { display: none !important; }
  body.printing-signs .rooms-signs-section > *:not(.rooms-signs) { display: none !important; }
  body.printing-signs .rooms-signs { display: block; }
  body.printing-signs .rooms-sign {
    break-after: page;
    page-break-after: always;
    min-height: 88vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  body.printing-signs .rooms-sign:last-child { break-after: auto; page-break-after: auto; }
  body.printing-signs .rooms-sign-name { font-size: 3.2rem; }
  body.printing-signs .rooms-sign-prompt { font-size: 1.5rem; }
  body.printing-signs .rooms-sign-body { font-size: 1.25rem; }
}

/* ---------------------------------------------------------------------------
   The threshold (index.html)
   Three doors, above the fold, deck first. Deliberately thin on prose: this
   page's job is to be left within about ten seconds, and the deck's promise is
   that no reading is required to use it. A landing page that has to be read
   would charge its own audience at the door.
   --------------------------------------------------------------------------- */

.threshold-header { padding-bottom: 6px; }
.threshold-header h1 { margin: 0 0 6px; }
.threshold-line {
  margin: 0;
  max-width: 46ch;
  font-size: 1.15rem;
  color: var(--ink);
}

.doors {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.door { margin: 0; }
.door > a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  border-left: 8px solid var(--cyan);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.door > a:hover { border-color: var(--cyan); filter: brightness(0.985); }
.door > a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.door-verb {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--ink-strong);
  line-height: 1.25;
}
.door-name { color: var(--cyan-ink); font-weight: 700; }
.door-body { margin-top: 6px; max-width: 46ch; line-height: 1.5; }

/* The deck is the door with an audience already pointed at it, so it gets the
   most weight. The other two are peers. */
.door-deck > a { background: var(--place-campfire); border-left-color: var(--cyan-ink); }
.door-deck .door-verb { font-size: 1.75rem; }
.door-rooms > a { background: var(--place-habitat); }
.door-about > a { background: var(--place-library); }

.threshold-more { margin: 26px 0 0; max-width: 66ch; color: var(--muted); }

/* Two columns, not three. The deck spans the row above and the other two doors
   take one column each, so the grid closes. A three-column grid with a
   full-width deck leaves the third cell of the second row empty — a ragged
   hole exactly like the one in the Stimpunks footer this pattern came from. */
@media (min-width: 860px) {
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .door-deck { grid-column: 1 / -1; }
  .door-deck > a { flex-direction: row; align-items: baseline; gap: 18px; flex-wrap: wrap; }
  .door-deck .door-body { margin-top: 0; flex: 1 1 22ch; }
}

/* The zone-transition diagram on space.html. Preformatted text is the one
   thing on these pages that cannot reflow, so it gets its own scroll container
   rather than pushing the whole page sideways on a phone. */
.rooms-diagram {
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  overflow-x: auto;
  font-size: .95rem;
  line-height: 1.6;
}

/* The wordmark lockup on the threshold. The mark is the same file the browser
   already fetched for the tab — an <img> rather than an inlined copy, so the
   logo on the page cannot drift from the favicon when build-icons.py regenerates
   it. It is alt="" and aria-hidden because the <h1> beside it says the same
   thing; announcing both would read the name twice. */
.lockup { display: flex; align-items: center; gap: 18px; }
.lockup h1 { margin: 0; }
.lockup-mark { flex: 0 0 auto; width: 76px; height: 76px; display: block; }

@media (max-width: 560px) {
  .lockup { gap: 14px; }
  .lockup-mark { width: 54px; height: 54px; }
}