/* The search pages (How to play, the daily pages, Past dailies): plain HTML in the game's Parlour look (search pages
   spec §1). The tokens are DESIGN.md's Parlour values. Since the game's night parlour went live (5 Oct 2026), the pages
   follow the device's own light or dark setting as the game's Auto look does: the night tokens below are the game's
   (src/ui/night.css), and the art keeps its own light ground, as in the game. Built by src/server/site/shell.ts;
   legal.css (the Classic legal pages) is separate and unchanged. */

@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonts/bricolage-grotesque-latin-wght.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ground: #fbf4e6;
  --surface: #fffcf5;
  --ink: #2a1f1a;
  --ink-2: #3b2e26;
  --quiet: #6b5f52;
  --muted: #8e8272;
  --line: #e8dcc6;
  --line-strong: #cdbfa9;
  --chip: #f3e9d4;
  /* The board's floor tones (the rule pictures carry their own, from the game's art). */
  --floor-a: #f4e8c8;
  --floor-b: #e8d6ab;
  --true: #2f9457;
  --true-text: #23794a;
  --false: #e0483e;
  --false-text: #c2372e;
  --unknown: #cbc1b1;
  --brass: #c99233;
  --cream: #f6ecdc;
  /* The paper kit (DESIGN.md "Paper kit"): a manila tag with paper-text words, for labels that aren't true/false. */
  --manila: #e9cd90;
  --manila-edge: #c9a560;
  --paper-text: #4a3a30;
  --on-ink-quiet: rgba(246, 236, 220, 0.78);
  --on-ink-line: rgba(246, 236, 220, 0.38);
  --on-ink-wash: rgba(246, 236, 220, 0.12);
  --door-panel: rgba(246, 236, 220, 0.09);
  --focus: var(--ink);
  /* The dark ink panels (the door, the Play panel), words on an ink fill, and the lit islands the art sits on: the
     same by day and lifted for the night, so the door stays a dark panel and the art keeps its light ground. */
  --panel: #2a1f1a;
  --door-ink: #2a1f1a;
  --on-ink: #ffffff;
  --shadow: rgba(42, 31, 26, 0.3);
  --island: #fffaf0;
  --island-line: #eadfc9;
  --island-quiet: #6b5f52;
  --tag: color-mix(in srgb, var(--manila) 55%, var(--surface));
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --display: 'Bricolage Grotesque Variable', 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}

/* The night parlour (DESIGN.md "Night"): the device asks for dark, as the game's Auto look follows it. The values are
   the game's own (src/ui/night.css). `data-theme` is left for a later way to pick, as the game does. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
  color-scheme: dark;
  --ground: #1c1411;
  --surface: #2a201b;
  --ink: #f2e6d2;
  --ink-2: #e0d0b8;
  --quiet: #bcab93;
  --muted: #93826f;
  --line: #3d2f28;
  --line-strong: #5c4a3d;
  --chip: #33271f;
  --true: #4cb87a;
  --true-text: #6fd09a;
  --false: #ef6a5e;
  --false-text: #ff9389;
  --unknown: #6e5d50;
  --brass: #d6a24a;
  --manila: #dcc088;
  --manila-edge: #b9965a;
  --panel: #3b2a2b;
  --on-ink: #1c1411;
  --shadow: rgba(8, 5, 4, 0.6);
  --island: #f5ecdb;
  --island-line: #ddd0b6;
  --tag: var(--manila);
  }
}
:root[data-theme='night'] {
  color-scheme: dark;
  --ground: #1c1411;
  --surface: #2a201b;
  --ink: #f2e6d2;
  --ink-2: #e0d0b8;
  --quiet: #bcab93;
  --muted: #93826f;
  --line: #3d2f28;
  --line-strong: #5c4a3d;
  --chip: #33271f;
  --true: #4cb87a;
  --true-text: #6fd09a;
  --false: #ef6a5e;
  --false-text: #ff9389;
  --unknown: #6e5d50;
  --brass: #d6a24a;
  --manila: #dcc088;
  --manila-edge: #b9965a;
  --panel: #3b2a2b;
  --on-ink: #1c1411;
  --shadow: rgba(8, 5, 4, 0.6);
  --island: #f5ecdb;
  --island-line: #ddd0b6;
  --tag: var(--manila);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.5 var(--body);
  overflow-wrap: break-word;
}
::selection { background: var(--brass); color: #2a1f1a; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.015em; text-wrap: balance; }
p { text-wrap: pretty; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- the page: one phone column, as the game's title card (DESIGN.md Layout) ---------- */
.page {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px calc(32px + env(safe-area-inset-bottom));
  padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
}
main { display: block; }

/* the header: the wordmark home, and a small ink Play pill */
.site-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.mark {
  font: 800 22px/1 var(--display); letter-spacing: -0.02em; text-decoration: none; color: var(--ink);
  display: inline-block; padding: 11px 0; white-space: nowrap;
}
.mark__lie { color: var(--false); }
.pill {
  min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px;
  background: var(--ink); color: var(--on-ink); font: 800 15px/1 var(--display); text-decoration: none; white-space: nowrap;
}
.pill .icon { width: 14px; height: 14px; }

/* the breadcrumb: a quiet trail under the header */
.crumbs ol {
  margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px;
  font-size: 14px; color: var(--quiet);
}
.crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.crumbs li + li::before { content: '›'; color: var(--muted); }
.crumbs a { color: var(--quiet); display: inline-block; padding: 12px 0; margin: -6px 0; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- reading ---------- */
.page-title { font-size: 34px; line-height: 1.05; margin: 20px 0 10px; }
.lede { font: 700 19px/1.35 var(--display); letter-spacing: -0.005em; margin: 0 0 10px; }
main p { margin: 0 0 12px; }
main section { padding-top: 32px; }
main h2 { font-size: 24px; line-height: 1.1; margin: 0 0 12px; }
main h3 { font-size: 18px; line-height: 1.15; margin: 0 0 4px; }
.quiet { color: var(--quiet); }
.small { font-size: 14.5px; line-height: 1.45; }

/* ---------- the door (DESIGN.md's signature component), and the ink call-to-action panel that borrows it ---------- */
.door, .cta {
  --focus: var(--brass);
  position: relative; overflow: hidden; border-radius: 26px 26px 20px 20px;
  background: var(--panel); color: var(--cream);
  box-shadow: 0 16px 26px -16px var(--shadow);
}
.door::before, .cta::before {
  content: ''; position: absolute; inset: 8px; border-radius: 20px 20px 14px 14px;
  border: 1.5px solid var(--door-panel); pointer-events: none;
}
.door { margin-top: 16px; padding: 16px 16px 18px; }
.cta { margin-top: 36px; padding: 22px 18px 18px; text-align: center; }
.cta h2 { position: relative; color: var(--cream); font-size: 24px; margin: 0 0 6px; }
.cta p { position: relative; color: var(--on-ink-quiet); margin: 0 0 16px; font-size: 15px; }
.door__foot { position: relative; margin-top: 14px; display: grid; gap: 10px; }
.cta .door__foot { margin-top: 0; }
.door__btn {
  min-height: 52px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 20px; font: 800 18px/1.1 var(--display); text-decoration: none; text-align: center; padding: 8px 14px;
}
.door__btn .icon { width: 16px; height: 16px; flex: none; }
.door__btn--play { background: var(--cream); color: var(--door-ink); }
.door__btn--quiet {
  min-height: 44px; font-size: 16px; border: 2px solid var(--on-ink-line); color: var(--cream); background: transparent;
}

/* a full-width quiet link with a chevron, set off by a hairline (the week row's "Past dailies" way in) */
.alllink {
  margin-top: 8px; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--line); text-decoration: none; font-weight: 650; font-size: 15px;
}
.alllink .icon { width: 18px; height: 18px; flex: none; }

@media (hover: hover) {
  .pill, .door__btn, .alllink { transition: background-color 160ms var(--ease-out-expo), border-color 160ms var(--ease-out-expo), opacity 160ms var(--ease-out-expo); }
  .pill:hover { opacity: 0.88; }
  .door__btn--play:hover { background: #fffcf5; }
  .door__btn--quiet:hover { border-color: var(--cream); }
  .alllink:hover { text-decoration: underline; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- the footer ---------- */
.site-foot {
  margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--quiet);
}
.site-foot ul { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.site-foot a { color: var(--ink); display: inline-block; padding: 12px 0; }
.site-foot p { margin: 0; }

/* ---------- How to play (/how-to-play) ---------- */
/* The board picture: Dad's sightlines over a low sofa to a tall bookshelf, in the game's own Parlour art. Held still,
   like the game's own How to play. */
.board-fig { margin: 20px 0 4px; }
.board { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; }
.board-cap { margin: 10px auto 0; max-width: 34ch; text-align: center; font-size: 14.5px; line-height: 1.4; color: var(--quiet); }

/* three moves: a real sequence, so numbered, in drawn rings rather than a list's digits */
.moves { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: move; }
.moves li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; counter-increment: move; }
.moves li::before {
  content: counter(move); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--ink); font: 800 17px/1 var(--display);
}
.moves b { display: block; margin-top: 6px; font: 800 17px/1.25 var(--display); }
.moves span { display: block; margin-top: 2px; color: var(--quiet); font-size: 15.5px; line-height: 1.45; }

/* the family: portrait, name and rule, and their sight on the game's own demo board, drawn in the game's own Parlour
   art (howtoArt.generated.ts), big enough to see each standee: under the rule on a phone, beside it from 600px */
.family { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.family li {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px 12px; align-items: start;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 600px) {
  .family li { grid-template-columns: 52px minmax(0, 1fr) 168px; align-items: start; }
}
.portrait { width: 52px; height: 52px; border-radius: 50%; background: var(--chip); overflow: hidden; align-self: start; }
.portrait__art { display: block; width: 52px; height: 52px; }
.family h3 { margin: 0 0 3px; display: flex; align-items: center; gap: 6px; }
.family h3 .icon { width: 18px; height: 18px; color: var(--quiet); flex: none; }
.family p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--quiet); }
.diag { grid-column: 2; display: block; width: 100%; max-width: 176px; height: auto; }
@media (min-width: 600px) { .diag { grid-column: auto; align-self: center; } }

/* what blocks who */
.heights { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.heights th, .heights td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.heights thead th { padding-top: 0; font: 600 13px/1.3 var(--body); color: var(--quiet); }
.heights tbody th { font: 800 16px/1.3 var(--display); width: 56px; }
.heights td:last-child { padding-right: 0; }
.heights .v { display: block; font-weight: 600; }
.heights .ex { display: block; margin-top: 2px; font-size: 13.5px; color: var(--quiet); }
.notes { margin: 12px 0 0; padding: 0 0 0 18px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.45; color: var(--quiet); }
.notes li::marker { color: var(--muted); }

/* statement cards, drawn with the game's border language: solid true, dashed-over-stripes false, dotted unknown */
.cards { display: grid; gap: 10px; margin: 4px 0 12px; }
.card {
  display: grid; grid-template-columns: 34px 22px 34px minmax(0, 1fr); gap: 8px; align-items: center;
  padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 3px dotted var(--unknown);
}
.card.is-true { border: 3px solid var(--true); }
.card.is-false {
  border: 3px dashed var(--false);
  background: repeating-linear-gradient(135deg, var(--surface) 0 7px, color-mix(in srgb, var(--false) 12%, var(--surface)) 7px 10px);
}
.card .who { width: 34px; height: 34px; border-radius: 50%; background: var(--chip); overflow: hidden; }
.who__art { display: block; width: 34px; height: 34px; }
.card .sense { width: 22px; height: 22px; }
.card .target { width: 30px; height: 30px; margin-inline: 2px; }
.card p { margin: 0; font-size: 14px; line-height: 1.35; }
.card p b { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.card.is-true p b { color: var(--true-text); }
.card.is-false p b { color: var(--false-text); }
.card.is-unknown p b { color: var(--quiet); }

/* tips: not a sequence, so drawn magnifier bullets */
.tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tips li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 15.5px; line-height: 1.5; }
.tips .icon { width: 20px; height: 20px; margin-top: 3px; color: var(--ink); }
.tips b { font-weight: 700; }

/* ---------- the play guide (How to play, 7 Oct 2026): a reading column, a sticky section index, the art on lit islands ---------- */
/* One reading column (680px at most); from 1040px the section index sits beside it as a list. */
.howto .page { max-width: 712px; }
.guide { display: grid; grid-template-columns: minmax(0, 1fr); }
.guide__body { min-width: 0; }
@media (min-width: 1040px) {
  .howto .page { max-width: 1000px; }
  .guide { grid-template-columns: 216px minmax(0, 680px); gap: 48px; justify-content: center; }
}
html:has(.guide) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.guide) { scroll-behavior: auto; } }

/* The index: a sticky strip of chips on a phone, a sticky list beside the column on a computer. Plain links: the
   page's one script (public/guide.js) only marks where the reader is. */
.toc {
  position: sticky; top: 0; z-index: 5; margin: 8px -16px 0; background: var(--ground);
  border-bottom: 1px solid var(--line);
}
.toc__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; margin: 0;
}
.toc ol {
  list-style: none; margin: 0; padding: 8px 16px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.toc ol::-webkit-scrollbar { display: none; }
.toc a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px; border-radius: 999px; white-space: nowrap;
  background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--ink-2); text-decoration: none;
  font: 650 13.5px/1 var(--display);
}
.toc a.is-here { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
@media (min-width: 1040px) {
  .toc {
    top: 16px; align-self: start; margin: 24px 0 0; border: 0; background: transparent;
    max-height: calc(100vh - 32px); overflow-y: auto;
  }
  .toc__label {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal;
    margin: 0 0 8px 10px; font: 800 15px/1.2 var(--display);
  }
  .toc ol { flex-direction: column; gap: 2px; padding: 0; overflow: visible; }
  .toc a { min-height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; font-size: 14px; }
  .toc a.is-here { background: var(--chip); color: var(--ink); }
}

/* The opening: the h1, the premise, the board, and the page's Play */
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; }
.hero__cta span { font-size: 14px; color: var(--quiet); }
.hero__play {
  min-height: 48px; padding: 0 22px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px;
  background: var(--ink); color: var(--on-ink); font: 800 16px/1 var(--display); text-decoration: none;
}
.hero__play .icon { width: 15px; height: 15px; }

/* A section: a hairline above, its heading a link to itself, clear of the sticky strip when jumped to. */
.g-sec { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--line); scroll-margin-top: 60px; }
@media (min-width: 1040px) { .g-sec { scroll-margin-top: 16px; } }
.g-sec > h2 .anchor { color: inherit; text-decoration: none; }
@media (hover: hover) { .g-sec > h2 .anchor:hover { text-decoration: underline; text-decoration-color: var(--line-strong); } }
.g-sec > p:last-child, .g-sec > ul:last-child { margin-bottom: 0; }

/* The lit islands: the art (and the paper it's drawn on) keeps a light ground in both looks, as in the game. */
.island {
  margin: 0; padding: 12px; border-radius: 14px; background: var(--island); color: #2a1f1a;
  border: 1px solid var(--island-line); box-shadow: 0 6px 14px -10px var(--shadow);
}
.island figcaption, .island .board-cap { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: var(--island-quiet); }
.island .board-cap { margin-inline: auto; }
.howto .board-fig { margin: 18px 0 0; }
.lane { display: block; width: 100%; max-width: 300px; height: auto; }
.mini { display: block; width: 100%; max-width: 190px; height: auto; margin: 0 auto; }
.diag-lg { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; }

/* lists: brass-dotted facts, green-ticked truths */
.dots { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; }
.dots li::marker { color: var(--brass); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 26px; }
.ticks li::before {
  content: ''; position: absolute; left: 3px; top: 6px; width: 12px; height: 7px;
  border-left: 2.5px solid var(--true); border-bottom: 2.5px solid var(--true); transform: rotate(-45deg);
}

/* True for everyone: a paper callout with the people-never-block lane */
.callout { display: grid; gap: 12px; margin: 16px 0 12px; padding: 16px; border-radius: 20px; background: var(--chip); }
.callout h3 { margin: 0; }
.callout .island { padding: 10px; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 12px; }
.pair figcaption b { color: #2a1f1a; }

/* what blocks who: three small lanes beside their words */
.lanes { display: grid; gap: 10px; margin: 14px 0 12px; }
.lanes figure { margin: 0; display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 12px; align-items: center; }
.lanes figcaption { margin: 0; }
@media (max-width: 480px) { .lanes figure { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* moving the family: the three ways */
.ways { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.ways li {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: baseline;
  padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
}
.ways b { font: 800 16px/1 var(--display); }
kbd {
  display: inline-block; min-width: 26px; padding: 2px 7px; border-radius: 7px; border: 1.5px solid var(--line-strong);
  border-bottom-width: 3px; background: var(--surface); color: var(--ink); text-align: center; font: 700 13px/1.3 var(--display);
}

/* words beside a small demo: the Check button, Accuse then Sure?, the hint */
.split { display: grid; gap: 14px; align-items: start; }
.split > div { min-width: 0; }
.split .dots { margin-bottom: 0; }
@media (min-width: 620px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 210px); }
  .split--fig { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.demo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 12px; border-radius: 14px; background: var(--chip);
}
.demo__note { width: 100%; text-align: center; font-size: 13px; color: var(--quiet); }
.demo__check, .demo__pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 76px; height: 44px; padding: 0 16px;
  border-radius: 999px; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); font: 800 16px/1 var(--display);
}
.demo__check .icon { width: 18px; height: 18px; }
.demo__pill--armed { border-color: var(--false); color: var(--false-text); }
.demo__then { width: 18px; height: 18px; color: var(--muted); }
.demo-fig { display: grid; gap: 10px; }
.bubble {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px;
  background: #fffdf7; border: 2px solid #2a1f1a; color: #2a1f1a; font-size: 14px; line-height: 1.35;
}
.bubble .bulb { width: 22px; height: 22px; flex: none; color: #b07a12; }

/* score: the rows, and a worked example on paper */
.score { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 15px; }
.score th, .score td { padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.score th { font-weight: 600; padding-right: 12px; }
.score td { text-align: right; white-space: nowrap; }
.score td span { display: block; margin-top: 3px; white-space: normal; font: 400 13px/1.35 var(--body); color: var(--quiet); }
.score .is-bonus th, .score .is-bonus td { color: var(--true-text); }
.num { font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; }
.sum { display: grid; gap: 4px; max-width: 360px; margin: 0 0 14px; }
.sum__title { margin: 0 0 4px; font: 700 12px/1.2 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--island-quiet); }
.sum dl { margin: 0; display: grid; }
.sum dl div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dotted #d6bd93; font-size: 15px; }
.sum dd { margin: 0; font: 800 16px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.sum dl div:last-child { border: 0; color: #23794a; }

/* the end: the case file's stamps, the end board and its moved line */
.stamp {
  display: inline-block; padding: 4px 7px 3px; border: 2px double #94600f; border-radius: 4px; transform: rotate(-3deg);
  color: #94600f; background: var(--island); font: 800 13px/1 var(--display); letter-spacing: 0.08em;
}
.stamp--away { color: #4a3a30; border-color: #4a3a30; }
.island .moved { font: 700 15px/1.35 var(--display); color: #2a1f1a; }
#end-board .split { margin-top: 4px; }

/* the daily: the week row's marks, drawn as on the home */
.week { display: flex; flex-wrap: wrap; gap: 12px 18px; margin: 0 0 12px; padding: 12px 14px; }
.week span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.wk { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.wk .icon { width: 16px; height: 16px; }
.wk--solved { background: #2f9457; color: #fff; }
.wk--miss { background: #4a3a30; color: #fff; }
.wk--late { border: 2.5px solid #2f9457; color: #2f9457; }
.wk--none { border: 2.5px dashed #b0a28c; }
.flame { width: 18px; height: 18px; vertical-align: -3px; }

/* the free cases: a ladder, the Tricky Cases on the ink panel */
.ladder { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.ladder li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.ladder b { font: 800 17px/1.2 var(--display); }
.ladder span { color: var(--quiet); font-size: 15px; }
.ladder .is-ink { background: var(--panel); border-color: var(--panel); color: var(--cream); }
.ladder .is-ink b { color: var(--brass); }
.ladder .is-ink span { color: var(--on-ink-quiet); }

/* the Cat Files' stars */
.stars ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stars li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.stars li span { font-weight: 400; font-size: 13.5px; color: var(--island-quiet); }
.stars .star { width: 22px; height: 22px; color: #c99233; flex: none; }
.stars p.small { margin: 8px 0 0; color: var(--island-quiet); }

/* free and the unlock, side by side from 620px */
.box { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.box h3, .box p { margin: 0; }
.box--ink { background: var(--panel); border-color: var(--panel); color: var(--cream); }
.box--ink h3 { color: var(--brass); }
.box--ink .ticks li::before { border-color: var(--brass); }
#unlock .split { margin-bottom: 12px; }

/* how everyone did: an example on paper */
.crowd { margin: 0 0 12px; }
.crowd__lead { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 15px; }
.crowd__lead b { display: block; font: 800 18px/1.2 var(--display); }
.crowd__face { width: 52px; height: 52px; flex: none; border-radius: 50%; background: #f3e9d4; }
.crowd p.small { margin: 8px 0 0; color: var(--island-quiet); }

/* keys */
.keys { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 15px; }
.keys th, .keys td { padding: 8px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.keys th { width: 1%; padding-right: 14px; white-space: nowrap; font-weight: 400; }

/* the questions: each opens in place; all of it is in the page, so search and assistants read every answer */
.faq details { margin: 0 0 8px; padding: 0 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.faq summary { min-height: 48px; display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; padding: 12px 0; font-size: 16.5px; line-height: 1.25; }
.faq summary::after { content: '+'; margin-left: auto; color: var(--brass); font: 800 22px/1 var(--display); }
.faq details[open] summary::after { content: '\2013'; }
.faq details p { margin: 0 0 14px; color: var(--ink-2); }

@media (min-width: 960px) {
  .page-title { font-size: 40px; }
}

/* ---------- a daily's page (/daily/<n>): the door, as on the game's home screen ---------- */
.door__lock { position: absolute; top: 18px; right: 20px; width: 22px; height: 22px; color: var(--brass); }
.door__hole { position: relative; display: block; width: 68%; max-width: 220px; height: auto; margin: 4px auto 0; }
.door h1 { position: relative; margin: 10px 0 0; text-align: center; }
.door__room { display: block; font: 800 30px/1.05 var(--display); letter-spacing: -0.015em; color: var(--cream); }
/* The brass caption sits below the room it names, never above it (DESIGN.md's No-Kicker Rule). */
.door__caption {
  display: block; margin-top: 9px; font: 650 12px/1.3 var(--display); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--brass); font-variant-numeric: tabular-nums;
}
.door__mystery { position: relative; margin: 8px 0 0; text-align: center; font-size: 16.5px; line-height: 1.35; color: var(--on-ink-quiet); text-wrap: balance; }
.door__cast { position: relative; list-style: none; margin: 14px 0 0; padding: 0; display: flex; justify-content: center; gap: 8px; }
.door__cast li { width: 42px; height: 42px; border-radius: 50%; background: var(--on-ink-wash); overflow: hidden; }
.door__face { display: block; width: 42px; height: 42px; }
.door__status { margin: 0; text-align: center; font-size: 14.5px; line-height: 1.4; color: var(--on-ink-quiet); text-wrap: balance; }
.door__status b { color: var(--cream); font-weight: 700; }

.chips { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { padding: 5px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 14.5px; }
.chips small { margin-left: 2px; font-size: 12.5px; color: var(--quiet); }
.facts { margin: 4px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: 15px; }
.facts dt { color: var(--quiet); }
.facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.nospoil {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); font-size: 15px; line-height: 1.45;
}
.nospoil .icon { width: 22px; height: 22px; }
.nospoil p { margin: 0; }

/* the days either side: two quiet cards, earlier on the left */
.nbrs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 32px; }
.nbr {
  display: flex; flex-direction: column; gap: 3px; min-height: 64px; padding: 10px 12px; border-radius: 14px;
  text-decoration: none; background: var(--surface); border: 1px solid var(--line);
}
.nbr--next { grid-column: 2; text-align: right; align-items: flex-end; }
.nbr small { display: inline-flex; align-items: center; gap: 2px; color: var(--quiet); font-size: 13px; }
.nbr small .icon { width: 14px; height: 14px; }
.nbr b { font: 800 16px/1.2 var(--display); }
@media (hover: hover) {
  .nbr { transition: border-color 160ms var(--ease-out-expo); }
  .nbr:hover { border-color: var(--line-strong); }
}

/* a daily that isn't out (or never was): a small page that points home */
.missing__ways { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 18px; }
.quiet-link { display: inline-block; padding: 12px 0; font-weight: 600; }

/* ---------- Past dailies (/dailies): every daily, newest first, a row per day ---------- */
.lede-line { color: var(--quiet); }
.days { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.days li { border-bottom: 1px solid var(--line); }
.day {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  min-height: 64px; padding: 10px 0; text-decoration: none;
}
.day__n { font: 800 17px/1 var(--display); font-variant-numeric: tabular-nums; }
.day__main { min-width: 0; }
.day__main b { display: block; font: 800 16.5px/1.2 var(--display); }
.day__main span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.35; color: var(--quiet); }
.day__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 13px; color: var(--quiet); white-space: nowrap; }
/* "Free": a small manila tag, never true-green (green means a true statement in the game, review batch 5a). */
.day__free {
  padding: 2px 8px; border-radius: 999px; background: var(--tag);
  box-shadow: inset 0 0 0 1px var(--manila-edge); color: var(--paper-text); font-weight: 650; font-size: 12px;
}
.day__lock .icon { width: 14px; height: 14px; color: var(--quiet); }
@media (hover: hover) {
  .day:hover .day__main b { text-decoration: underline; text-underline-offset: 3px; }
}
/* How to play: the way into Past dailies sits clear of the dark Play panel's shadow */
.howto .cta + .alllink { margin-top: 20px; }

/* ---------- the answer pages (/games-like-wordle, /logic-puzzles-for-adults, /how-to-spot-the-liar, /meet-the-fibbersons) ---------- */
/* the answer itself, first, a step up from body copy: it's the paragraph search tools quote */
p.answer { font-size: 17.5px; line-height: 1.5; color: var(--ink-2); }
/* a room from above, empty, as the daily pages show it */
.room-fig { margin: 20px 0 4px; }
.room-fig img { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; }
.answer-page .tips, .answer-page .notes { margin-bottom: 12px; }
.answer-page main .notes { color: var(--ink-2); font-size: 15.5px; }
.answer-page .moves { margin-bottom: 16px; }
.answer-page main .notes b { font-weight: 700; }
/* the worked example: two small boards side by side, even on a phone */
.example { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 16px 0 8px; }
.example figure { margin: 0; }
.ex-board { display: block; width: 100%; height: auto; }
.example figcaption { margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: var(--quiet); }
/* a family member: portrait and name, who they are, then their rule beside their sight */
.fib { border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.fib__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.fib__head h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
.fib__head h2 .icon { width: 20px; height: 20px; color: var(--quiet); flex: none; }
.fib__rule {
  display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 14px; align-items: center;
  margin: 4px 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
}
.fib__rule h3 { font-size: 15px; margin: 0 0 2px; }
.fib__rule p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--quiet); }
/* the questions */
.faq h3 { margin-top: 18px; }
.faq h3:first-child { margin-top: 0; }
/* the other pages: quiet rows, as Past dailies' way in */
.more { padding-top: 32px; }
.more ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.more li { border-bottom: 1px solid var(--line); }
.more a {
  min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  text-decoration: none; font-weight: 650; font-size: 15.5px;
}
.more a .icon { width: 18px; height: 18px; flex: none; color: var(--quiet); }
@media (hover: hover) {
  .more a:hover { text-decoration: underline; }
}

/* ---------- the press kit (/press): a fact sheet like a case file's index card, words to copy, pictures to take ---------- */
.press .lede { margin-bottom: 12px; }
.sheet {
  margin: 0; padding: 4px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  font-size: 15px;
}
.sheet div {
  display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 2px 12px; padding: 10px 0;
  border-bottom: 1px dashed var(--line-strong);
}
@media (max-width: 359px) {
  .sheet div { grid-template-columns: minmax(0, 1fr); }
  .sheet dt { font-size: 13.5px; }
}
.sheet div:last-child { border-bottom: 0; }
.sheet dt { color: var(--quiet); }
.sheet dd { margin: 0; font-weight: 650; }

.copy-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 18px !important; }
.copy-head span { font: 500 13.5px/1.3 var(--body); letter-spacing: 0; color: var(--quiet); font-variant-numeric: tabular-nums; }
.copy {
  margin-top: 6px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line-strong);
  font-size: 15.5px; line-height: 1.55; color: var(--ink-2);
  -webkit-user-select: all; user-select: all; cursor: text;
}
.copy p:last-child { margin-bottom: 0; }
.copy::selection, .copy *::selection { background: color-mix(in srgb, var(--brass) 45%, var(--surface)); }

.feats { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--line); }
.feats li {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 11px 0;
  border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.45;
}
.feats li::before { content: ''; width: 8px; height: 8px; margin: 8px 0 0 5px; border-radius: 50%; background: var(--brass); }
.feats li.is-unlock::before { display: none; }
.feats .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--quiet); }
.icon--inline { width: 15px; height: 15px; margin-right: 5px; vertical-align: -2px; color: var(--quiet); }

.family--press li { row-gap: 8px; }
.family--press .portrait { align-self: center; }
.family--press li > p { grid-column: 1 / -1; }
.family--press p.rule-line { color: var(--ink-2); font-size: 15px; }
/* the family with no sight diagram: portrait, then name and who they are */
.family--plain li { grid-template-columns: 52px minmax(0, 1fr); align-items: start; }
.family--plain + p { margin-top: 14px; }

.appicon {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center;
  padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.appicon img { display: block; width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 8px 16px -10px var(--shadow); }
.appicon h3 { margin: 0 0 4px; }
.appicon p { margin: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.press main a[download] { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; padding: 10px 0; }
.press main a[download] .icon { width: 16px; height: 16px; flex: none; }
.shots { list-style: none; margin: 0; padding: 0; }
.shots li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.shot { margin: 0; }
.shot > a { display: block; padding: 0 !important; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--surface); }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { margin-top: 10px; font-size: 14.5px; line-height: 1.45; }
.shot figcaption p { margin: 0; }
.shot__get { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.shot__get .quiet { font-size: 13.5px; font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .shot > a { transition: border-color 160ms var(--ease-out-expo); }
  .shot > a:hover { border-color: var(--ink); }
}