/* The front door, on the identity (Oct 17, 2026; item 5 of the design job, claude/job-game-tales-design-system.md).
   Cody, Oct 13: "every single surface has to feel like it's part of the same design system."

   This sheet only lays the page out. Every color, face and material comes from assets/gt-identity.css, a copy of
   client/src/styles/gt-identity.css that `node script/front-door-pin.mjs` keeps identical (tests/gt-identity.test.ts
   fails if it drifts). The page stands on the app's frame: a 1400px page with the shell's gutter, so the wordmark and
   every block share one left edge with every other room (51px at 1280, 20px on a phone).

   What a stranger sees, in order: the promise and the eight covers (bound plates, as on every shelf in the app; the
   ones they tap keep their own colors and take a gold edge), the page being written beside them from 1180px (the book's
   inside cover, a bookplate, until the first tap), the sample Tale as a page of the book, what a Tale keeps as the
   book's ledger, the shelf in book cloth, the most-opened pages as contents lines, and the gold rule the page closes on.
   Words are unchanged; the one action is the slip's cream; nothing is rounded past the book's 3px; nothing is tilted;
   nothing is set in capitals.

   The earlier sheet (Oct 3 to Oct 13) carried the painting try, the ad hero, the class worlds and the first standalone
   quiz; none of those states are set by the scripts any more, so they are gone with it. */
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-latin-opsz-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("/fonts/lora-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/manrope-latin-variable.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --display: var(--id-display); --mark: "Fraunces", Georgia, serif; --ui: var(--id-ui);
  /* The app's frame (game-tales-app-system.css): a 1400px page, clamp(20px, 4vw, 64px) in from its edge; 20px on a phone. */
  --gutter: calc(max(0px, (100% - 1400px) / 2) + clamp(20px, 4vw, 64px));
  --section: 64px;
  color-scheme: dark;
}
@media (max-width: 820px) { :root { --gutter: 20px; } }
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--id-ground); }
body.lp { margin: 0; min-height: 100vh; color: var(--id-ink); background: var(--id-ground); font: 400 16px/1.6 var(--ui);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-x: clip; }
.lp a { color: inherit; text-decoration: none; }
.lp img { display: block; max-width: 100%; height: auto; }
.lp :focus-visible { outline: 2px solid var(--id-gold); outline-offset: 3px; }
.lp-skip { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 10px 14px; border-radius: 2px; background: var(--id-slip-paper); color: var(--id-slip-ink); font-weight: 700; }
.lp-skip:focus { top: 12px; }
.lp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lp-width { padding-inline: var(--gutter); }
.lp-num { font-family: var(--display); font-weight: 500; font-variant-numeric: proportional-nums lining-nums; letter-spacing: 0; }
.lp-num small { font-size: .55em; margin-left: 1px; }
[hidden] { display: none !important; }

/* ── Type ───────────────────────────────────────────────────────────────────────────────────────── */
.lp h1 { margin: 0; font: 500 var(--id-title-sm)/1.04 var(--display); letter-spacing: -.01em; text-wrap: balance; color: var(--id-ink); }
.lp h2 { margin: 0; font: 500 26px/1.15 var(--display); letter-spacing: 0; text-wrap: balance; color: var(--id-ink); }
.lp-lede { margin: 14px 0 0; max-width: 44ch; color: var(--id-ink-lede); font: 500 16px/1.55 var(--ui); }
.lp-section-lede { margin: 8px 0 0; color: var(--id-ink-label); font: 500 16px/1.5 var(--ui); }
.lp-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
/* A label in the book's italic, never in capitals (the identity: no label over any headline; nothing set in capitals). */
.lp-mine-kicker, .lp-page-kicker, .lp-class-mix-label, .lp-moment figcaption { margin: 0; font: italic 400 16px/1.3 var(--display); letter-spacing: 0; text-transform: none; color: var(--id-gold); }
.lp-mine-note, .lp-find-status, .lp-quiz-status { margin: 8px 0 0; color: var(--id-ink-label); font: 400 14px/1.5 var(--ui); }
.lp-find-status:empty, .lp-quiz-status:empty { display: none; }

/* ── Actions: the one action in the slip's cream, a plain hairline for the second, a line of type for the rest ── */
/* `.lp .lp-button`, not `.lp-button`: the page's own `.lp a` would otherwise hand a link set as a button the ink's color and no
   underline (the first pass: Keep your Tale as a cream box with cream words). */
.lp .lp-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 2px;
  background: var(--id-slip-paper); color: var(--id-slip-ink); font: 600 15px/1 var(--ui); cursor: pointer; text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(135, 96, 43, .22), 0 2px 0 rgba(0, 0, 0, .25); transition: box-shadow .15s, opacity .15s; }
.lp .lp-button:hover { box-shadow: inset 0 0 0 1px var(--id-slip-gold), 0 2px 0 rgba(0, 0, 0, .25); }
.lp .lp-button:disabled { opacity: .45; cursor: default; }
.lp .lp-button--line { background: none; color: var(--id-ink); box-shadow: inset 0 0 0 1px var(--id-edge); }
.lp .lp-button--line:hover { box-shadow: inset 0 0 0 1px var(--id-gold); }
/* Gauntlet r7 (Oct 25), both critics: five same-styled underlined links and no primary. Every line-of-type action is
   quiet now, a step down in size and ink, so the vellum is the page's one action. */
.lp .lp-text-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--id-ink-label); font: 500 15px/1.2 var(--display); text-decoration: underline; text-decoration-color: var(--id-rule-strong); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.lp .lp-text-link:hover { color: var(--id-ink); text-decoration-color: var(--id-gold); }

/* ── The masthead: the shell's. The ground, a gold rule under it, the wordmark on the page's edge ── */
.lp-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 80px;
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0; background: rgba(18, 14, 11, .94); border-bottom: 1px solid var(--id-rule); }
.lp-mark { color: var(--id-ink); font: 500 32px/1 var(--mark); letter-spacing: -.035em; white-space: nowrap; }
.lp-top nav { display: flex; gap: 22px; }
.lp-top nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--id-ink-caption); font: 600 14px/1 var(--ui); white-space: nowrap; }
.lp-top nav a:hover { color: var(--id-gold); }
/* Under 820px the masthead is the shell's phone masthead: the wordmark centred with Sign in at the right (the closing
   walk, Oct 17: the front door was the one page whose phone masthead kept the wordmark at the left). Discover is the
   shelf and the covers on a phone. */
@media (max-width: 820px) { .lp-top { display: grid; grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr); justify-content: normal; min-height: 64px; }
  .lp-top .lp-mark { grid-column: 2; font-size: 28px; } .lp-top nav { grid-column: 3; justify-self: end; gap: 18px; } .lp-top nav a[href^="/games"] { display: none; } }

/* ── The opening: the promise and the eight covers; beside them (below on a phone) the page they write ── */
.lp-opening { position: relative; display: grid; gap: 40px; padding: 40px var(--gutter) 0; }
.lp-hero { position: relative; }
.lp-hero-copy { max-width: 560px; }

/* The prompts and the eight covers stand in a case of book cloth, as Discover's search and pick and the shelf below do
   (pass 2 panel: on the bare ground the first screen read as "a dark grid of covers like any game tracker"; 5 of 14
   would know it next week). */
.lp-tale { margin-top: 24px; max-width: 596px; padding: 18px 18px 20px; border-radius: var(--id-cloth-radius); background: var(--id-cloth); background-size: var(--id-cloth-size); box-shadow: var(--id-cloth-shadow); }
.lp-tale-rule { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; max-width: 280px; }
.lp-tale-rule li { height: 3px; background: var(--id-rule-strong); transition: background .3s; }
.lp-tale-rule li[data-done] { background: var(--id-gold); }
.lp-tale-rule li[data-now] { background: var(--id-edge); }
.lp-tale .lp-quiz-count { margin: 0 0 6px; color: var(--id-ink-label); font: 500 15px/1.3 var(--ui); font-variant-numeric: tabular-nums; }
.lp-quiz-q { margin: 0; font: 500 26px/1.2 var(--display); color: var(--id-ink); text-wrap: balance; }
.lp-tale-hint { margin: 8px 0 0; color: var(--id-ink-caption); font: 500 15px/1.5 var(--ui); }
.lp-tale-stage { margin-top: 18px; }
.lp-tale[data-ready] .lp-quiz-q { font-size: 30px; }
.lp-tale[data-ready] .lp-tale-hint { max-width: 40ch; color: var(--id-ink-body); font: italic 400 18px/1.5 var(--display); }

/* Which have you played: eight covers, four across, each a bound plate. A tapped one keeps the game's own colors,
   takes the gold edge, and a gold seal sits in its corner. */
.lp-tale-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lp-tale-cover { position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: var(--id-ink); font: inherit; text-align: left; cursor: pointer; }
.lp .lp-tale-cover img, .lp .lp-game img, .lp .lp-mine-plate, .lp .lp-tale-plate, .lp .lp-tale-shelf-plate, .lp .lp-tale-keeps-shelf img, .lp .lp-tale-morelike img, .lp .lp-tale-found-row img {
  object-fit: cover; padding: var(--id-bound-pad); border: var(--id-bound-border); border-radius: var(--id-bound-radius); background: var(--id-bound-bg); box-shadow: var(--id-bound-shadow); filter: var(--id-bound-filter); }
.lp .lp-tale-cover img { width: 100%; aspect-ratio: 3 / 4; transition: box-shadow .15s, filter .15s, border-color .15s; }
.lp-tale-cover:hover img { border-color: var(--id-gold); }
.lp-tale-cover[aria-pressed="true"] img { border-color: var(--id-gold); filter: none; box-shadow: 0 0 0 3px var(--id-ground), 0 0 0 4px var(--id-gold), 0 14px 26px rgba(0, 0, 0, .6); }
.lp-tale-cover[aria-pressed="true"]::before, .lp-tale-cover[aria-pressed="true"]::after { content: ""; position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; }
.lp-tale-cover[aria-pressed="true"]::before { border-radius: 50%; background: var(--id-gold); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.lp-tale-cover[aria-pressed="true"]::after { background: var(--id-slip-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.lp-tale-cover-name { display: none; }
.lp-tale-more { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-top: 16px; }
.lp-tale-more .lp-tale-next { margin-right: 8px; }
/* Next is the page's one action in the vellum (gauntlet r7), shown with the first pick: full width under the covers on
   a phone, beside them from 960px. Never a greyed button before it (r2 panel: "dead", "locked"). */
@media (max-width: 559px) { .lp-tale-more .lp-tale-next { flex: 1 0 100%; margin: 0 0 4px; } }
.lp-tale-link { font-family: var(--display); }
.lp-tale-find { margin-top: 12px; }
.lp-tale-steam:first-child { margin: 0 0 18px; }
.lp-tale-hint-link { display: block; margin-top: 2px; text-align: left; padding: 0; border: 0; background: none; color: var(--id-ink-body); font: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--id-rule-strong); cursor: pointer; }

/* Search any game, and Have Steam?: the field on the ground, results on hairlines. */
.lp-find-input { display: block; width: 100%; min-height: 52px; padding: 0 16px; border-radius: 2px; border: 1px solid var(--id-rule-strong);
  background: rgba(18, 14, 11, .7); color: var(--id-ink); font: 500 16px/1.2 var(--ui); outline: none; -webkit-appearance: none; appearance: none; transition: border-color .15s; }
.lp-find-input::placeholder { color: var(--id-ink-label); }
.lp-find-input:focus { border-color: var(--id-gold); }
.lp-find-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.lp-tale-found { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.lp-tale-found-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 6px 0;
  border: 0; border-bottom: 1px solid var(--id-hair); background: none; color: var(--id-ink); font: inherit; text-align: left; cursor: pointer; }
.lp .lp-tale-found-row img { width: 36px; height: 48px; padding: 1px; box-shadow: none; }
.lp-tale-found-row:hover .lp-find-words strong, .lp-tale-found-row[aria-pressed="true"] .lp-find-words strong { color: var(--id-gold); }
.lp-find-words { display: flex; flex-direction: column; min-width: 0; }
.lp-find-words strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 500 16px/1.3 var(--display); }
.lp-find-words span { color: var(--id-ink-label); font: 500 14px/1.3 var(--ui); }
.lp-tale-steam { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; }
.lp-tale-steam .lp-find-status, .lp-tale-steam-note, .lp-tale-steam-where { grid-column: 1 / -1; }
.lp-tale-steam-go { min-height: 52px; white-space: nowrap; }
.lp .lp-tale-steam-note, .lp .lp-tale-steam-where { margin: 2px 0 0; font-size: 13.5px; }
@media (max-width: 480px) { .lp-tale-steam { grid-template-columns: minmax(0, 1fr); } .lp-tale-steam-go { width: 100%; } }

/* Which means more: the two covers side by side, with their names in the book's face. */
.lp-tale-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 168px)); gap: 16px; }
.lp-tale-cover--pair .lp-tale-cover-name { display: block; font: 500 16px/1.3 var(--display); }
.lp-tale-cover--pair:hover .lp-tale-cover-name { color: var(--id-gold); }

/* An answer: a word in a hairline box, square to the page; the one picked takes the gold. */
.lp-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-chip, .lp-quiz-option { display: flex; align-items: center; min-height: 44px; padding: 0 16px; border: 0; border-radius: 2px;
  background: rgba(243, 238, 230, .04); box-shadow: inset 0 0 0 1px var(--id-rule-strong); color: var(--id-ink); font: 600 14.5px/1.2 var(--ui); cursor: pointer;
  transition: box-shadow .15s, color .15s; }
.lp-chip:hover, .lp-quiz-option:hover { box-shadow: inset 0 0 0 1px var(--id-edge); }
.lp-chip[aria-pressed="true"], .lp-quiz-option[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--id-gold); color: var(--id-gold); }
.lp-quiz-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.lp-quiz-option { min-height: 54px; padding: 12px 16px; font: 500 16px/1.35 var(--ui); text-align: left; }
@media (hover: none) {
  .lp-chip:not([aria-pressed="true"]):hover, .lp-quiz-option:not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1px var(--id-rule-strong); }
  .lp-tale-cover:not([aria-pressed="true"]):hover img { border-color: var(--id-edge); }
}

/* How far did you get: the game's own ladder, each step a row of the ledger with its gold bar. */
.lp-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-width: 460px; }
.lp-bars .lp-step { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; width: 100%; min-height: 44px; padding: 8px 0;
  border: 0; border-bottom: 1px solid var(--id-hair); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lp-bars .lp-step:hover span, .lp-bars .lp-step[aria-pressed="true"] span { color: var(--id-gold); }
.lp-bars span { font: 600 14px/1.3 var(--ui); }
/* Steam's own words for a step, under its name on one line (Oct 25 audit: "Three-Headed Boy" didn't say what it was). */
.lp-bars .lp-step-what { display: block; overflow: hidden; margin-top: 2px; color: var(--id-ink-label); font: 400 12.5px/1.35 var(--ui); white-space: nowrap; text-overflow: ellipsis; }
.lp-bars b { font-size: 24px; line-height: 1; }
.lp-bars i { grid-column: 1 / -1; position: relative; height: 3px; background: var(--id-hair); overflow: hidden; }
.lp-bars i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--id-gold); }
.lp-tale-ladder + .lp-tale-link { margin-top: 4px; }

/* What the last answer wrote, in the page's own voice. */
.lp-tale-wrote { position: relative; margin: 16px 0 0; padding-left: 22px; font: italic 400 17px/1.45 var(--display); color: var(--id-gold); }
.lp-tale-wrote::before { content: ""; position: absolute; left: 0; top: .75em; width: 14px; height: 1px; background: var(--id-gold); }
.lp-tale-wrote.is-new { animation: lp-wrote .5s ease both; }
@keyframes lp-wrote { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.lp-tale-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 20px; }
/* Skip sits after Back, a step quieter still: every question past the shelf can be left unanswered (r2 walk, Oct 25). */
.lp-tale-foot .lp-tale-skip { margin-left: auto; }
.lp-tale-foot:empty, .lp-tale-foot:not(:has(> :not([hidden]))) { display: none; }

/* ── A page of the book: the sample, the page being written, and the first Tale's two leaves ─────
   The paper is the bound plate's: a hairline at its edge, square to the page, the deep shadow of a thing set down. */
.lp-mine, .lp-page-book { position: relative; border-radius: var(--id-bound-radius); background: var(--id-bound-bg);
  box-shadow: 0 0 0 1px var(--id-edge-bound), 0 30px 60px -12px rgba(0, 0, 0, .65); }
.lp-mine { padding: 24px 22px 24px 26px; }
.lp .lp-mine-title { margin: 6px 0 4px; font: 500 30px/1.08 var(--display); color: var(--id-ink); outline: none; }
.lp-mine-rel { margin: 0; font: italic 400 16px/1.4 var(--display); color: var(--id-ink-label); }
.lp-mine-prose { margin: 16px 0 0; font: 400 16px/1.65 var(--display); color: var(--id-ink-body); text-wrap: pretty; }
/* The drop cap is held inside its own paragraph (flow-root), so a one-line opening never lets it run into the next. */
.lp-mine-prose--first { display: flow-root; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--id-rule-strong); }
/* The cap sits tight against the rest of its word (gauntlet r7, both critics: "H ades" read as two words): its own
   side bearing is the gap, and the lines wrap round it. */
.lp-mine-prose--first::first-letter { float: left; margin: 6px -1px 0 -2px; font: 500 52px/.8 var(--display); color: var(--id-gold); }
/* A floated cap, not initial-letter: a sunk initial runs on into the next paragraph when the opening is one line long
   (the first pass: the sample's H beside its second paragraph). The float stays inside its own paragraph (flow-root). */
.lp-mine-head { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: end; gap: 18px; }
.lp .lp-mine-plate { width: 84px; height: 112px; }
.lp-mine-plate[hidden] + .lp-mine-titles { grid-column: 1 / -1; }
.lp-class { padding: 0; overflow: hidden; }
.lp-class-band { position: relative; height: 156px; overflow: hidden; }
.lp-class-band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.lp-class-body { position: relative; padding: 4px 22px 24px 26px; }
.lp-class-body > .lp-class-mix-label { margin-top: 22px; }
.lp-class-mix { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.lp-class-mix li { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 12px; }
.lp-class-mix span { color: var(--id-ink-label); font: 500 14px/1.3 var(--ui); }
.lp-class-mix li:first-child span { color: var(--id-ink); }
.lp-class-mix i { position: relative; height: 3px; background: var(--id-hair); overflow: hidden; }
.lp-class-mix i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--id-edge); }
.lp-class-mix li:first-child i::before { background: var(--id-gold); }
@media (min-width: 760px) {
  .lp-mine { padding: 32px 36px 32px 40px; }
  .lp-mine-head { grid-template-columns: 96px minmax(0, 1fr); gap: 22px; }
  .lp .lp-mine-plate { width: 96px; height: 128px; }
  .lp .lp-mine-title { font-size: 36px; }
  .lp-class-band { height: 184px; }
  .lp-class-body { padding: 8px 36px 32px 40px; }
}

/* The page being written beside the prompts: the Tale's title, its shelf as plates, every line an answer wrote. */
.lp-tale-page { margin-top: 28px; max-width: 420px; }
.lp .lp-tale-page .lp-mine-title { font-size: 26px; }
.lp-tale-page .lp-mine-title[data-forming] { color: var(--id-ink-lede); }
.lp-tale-page-shelf { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lp-tale-page-shelf li { width: 40px; }
.lp .lp-tale-plate { width: 40px; height: 53px; padding: 1px; box-shadow: none; }
.lp-tale-page-shelf li[data-first] { width: 52px; }
.lp-tale-page-shelf li[data-first] .lp-tale-plate { width: 52px; height: 69px; border-color: var(--id-gold); filter: none; }
.lp-tale-page-lines { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--id-rule-strong); display: grid; gap: 8px; }
.lp-tale-page-lines:empty { display: none; }
.lp-tale-page-lines li { position: relative; padding-left: 18px; font: 400 15px/1.5 var(--display); color: var(--id-ink-body); }
.lp-tale-page-lines li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 1px; background: var(--id-gold); }
.lp-tale-page-lines li:last-child { color: var(--id-ink); animation: lp-wrote .5s ease both; }
.lp-tale-page-lines li.lp-tale-page-wait { font-style: italic; color: var(--id-ink-label); animation: none; }
.lp-tale-page-lines li.lp-tale-page-wait::before { background: var(--id-edge); }
/* Before the first tap the page is the book's inside cover: a bookplate waiting for a name (Oct 7, both critics asked for
   a printed object of the product's own). Shown beside the prompts from 1180px; the first tap turns to the page. */
.lp-bookplate { display: none; }
@media (max-width: 1179px) { .lp-tale-page[data-waiting] { display: none !important; } }
@media (min-width: 1180px) {
  /* The bookplate stands on its own beside the covers, level with their top; no dark case around it (pass 1 panel:
     a tall empty panel with a small card floating in it read as unfinished to about 20 of 25). */
  /* Oct 17, the words pass (50): with the line in place, 35 of 50 named one thing first: "the payoff is hidden below
     the fold". So before the first tap the sample page stands beside the prompts, where a stranger can read a finished
     page, and the bookplate waits under it. For that one state the hero lends its two children to the opening's grid
     (display: contents); the first tap puts the hero back together and the page being written takes the sample's place. */
  :root:not([data-tale]) .lp-hero { display: contents; }
  /* The quiz fills its column, so the gap to the sample is the grid's own (r2, Oct 25: a 94px dead gutter at 1440). */
  :root:not([data-tale]) .lp-opening { column-gap: 48px; }
  :root:not([data-tale]) .lp-hero-copy.lp-hero-default { grid-column: 1; grid-row: 1 / span 2; max-width: none; margin: 56px 0 24px; }
  :root:not([data-tale]) .lp-hero-copy.lp-hero-default > .lp-tale { max-width: none; }
  :root:not([data-tale]) .lp-opening > .lp-specimen { grid-column: 2; grid-row: 1; margin-top: 56px; }
  :root:not([data-tale]) .lp-opening > .lp-moments { grid-column: 1 / -1; grid-row: 3; margin-top: 56px; }
  :root:not([data-tale]) .lp-opening > .lp-moments .lp-moments-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .lp-hero > .lp-tale-page[data-waiting] { grid-column: 2; grid-row: 2; justify-self: center; width: min(100%, 440px); margin: 20px 0 0; padding: 0; display: block; background: none; box-shadow: none; }
  .lp-tale-page[data-waiting] > :not(.lp-bookplate) { display: none !important; }
  .lp-tale-page[data-waiting] .lp-bookplate { display: grid; justify-items: center; gap: 0; width: 100%; padding: 16px 22px 18px; background: var(--id-slip-paper); color: var(--id-slip-ink); text-align: center;
    box-shadow: inset 0 0 0 1px var(--id-slip-gold), inset 0 0 0 6px var(--id-slip-on-ink), inset 0 0 0 7px var(--id-slip-gold), var(--id-slip-shadow); }
  .lp-bookplate-from { font: italic 400 22px/1.2 var(--display); white-space: nowrap; }
  /* Gauntlet r7, both critics: "From the library of" ended on an empty line, a form with no name. The plate says whose
     it is in full ("From your library") and the line is a short rule under it, not a blank to fill. */
  .lp-bookplate-line { display: block; width: 56px; height: 1px; margin: 10px 0 8px; background: var(--id-slip-gold); }
  .lp-bookplate-note { font: italic 400 17px/1.4 var(--display); color: var(--id-slip-ink-body); text-wrap: balance; }
  /* The plate's one ornament: the book's diamond between two short rules. */
  .lp-bookplate-mark { position: relative; width: 84px; height: 10px; margin-bottom: 10px; }
  .lp-bookplate-mark::before { content: ""; position: absolute; left: 0; right: 0; top: 4.5px; height: 1px; background: linear-gradient(90deg, var(--id-slip-gold) 0 38%, transparent 38% 62%, var(--id-slip-gold) 62%); }
  .lp-bookplate-mark::after { content: ""; position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin-left: -4px; background: var(--id-slip-gold); transform: translateY(1px) rotate(45deg); }
  /* Gauntlet r7 try (won blind with all four critics, Oct 26): the Tale's seal between the plate's two rules, where the
     diamond was, printed in the slip's ink gold (both front door critics: "art it owns, a seal or mark stamped on every
     Tale and on the bookplate"). Drawn in code: script/draw-engraved-marks.mjs. It is set into the plate's frame at the
     head, so the plate still ends above the fold at 1440x900 (#522), its rules and margins a little closer. */
  .lp-bookplate-mark { width: 172px; height: 52px; margin: -22px 0 4px; }
  .lp-bookplate-mark::before { top: 25.5px; background: linear-gradient(90deg, var(--id-slip-gold) 0 30%, transparent 30% 70%, var(--id-slip-gold) 70%); }
  .lp-bookplate-mark::after { content: none; }
  .lp .lp-bookplate-mark img { position: absolute; left: 50%; top: 0; width: 52px; height: 52px; margin-left: -26px; }
  .lp-tale-page[data-waiting] .lp-bookplate:has(.lp-bookplate-mark img) { padding-bottom: 15px; }
  .lp-bookplate-mark:has(img) ~ .lp-bookplate-line { margin: 8px 0 6px; }
}
/* Oct 26, 2026 (the final walk of deep round 2): at 1280x800 the fold cut the plate's seal in half. From 1180px the
   sample ends at y748 at every width and the plate stands 20px under it (y768 to 898, its seal y762 to 814), so a window
   from 763 to 813px tall showed the top of the seal and nothing else (1280x800, 1366x768). In those windows the plate
   stands a little lower, wholly under the fold, its seal from y818; from 814px the seal shows whole, and from 898px the
   plate. 1280x680 never reached it. */
@media (min-width: 1180px) and (min-height: 763px) and (max-height: 813px) {
  .lp-hero > .lp-tale-page[data-waiting] { margin-top: 76px; }
}
/* The Tale's seal on the sample page, stamped where the art meets the page, its centre on the art's lower edge: the Home
   tab's quill standing in an open book, in a ring (script/draw-engraved-marks.mjs). Cut heavy, on a disc darker than the
   page, so the book and quill read at phone size (all four critics: thin gold lines went muddy and read as a badge). */
.lp .lp-page-seal { position: absolute; z-index: 3; top: 112px; right: 24px; width: 76px; height: 76px; pointer-events: none; user-select: none; }
.lp-page-seal ~ .lp-page-body > .lp-page-kicker { padding-right: 96px; }
@media (min-width: 760px) {
  .lp .lp-page-seal { top: 122px; right: 40px; width: 92px; height: 92px; }
  .lp-page-seal ~ .lp-page-body > .lp-page-kicker { padding-right: 112px; }
}

/* The first Tale: a spread. Your Tale on the left, Chapter one on the right in its game's art and color. */
.lp-tale-read { padding-top: 8px; }
.lp-tale-loading { margin: 0; padding: 40px 0; }
.lp-tale-spread { display: grid; gap: 20px; }
.lp-tale-leaf { --game: var(--id-gold); }
.lp-tale-leaf .lp-mine-prose--first::first-letter { color: var(--game); }
.lp-tale-leaf--you .lp-class-body { padding-top: 32px; }
.lp-tale-leaf--you .lp-mine-title { font-size: 34px; }
.lp-tale-leaf--chapter .lp-mine-head { margin-top: 4px; }
.lp-tale-shelf { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.lp-tale-shelf li { display: grid; grid-template-columns: 22px 32px minmax(0, 1fr); align-items: center; gap: 12px; }
.lp-tale-shelf b { font-size: 17px; line-height: 1; color: var(--id-ink-label); text-align: right; }
.lp-tale-shelf li[data-first] b { color: var(--id-gold); }
.lp .lp-tale-shelf-plate { width: 32px; height: 43px; padding: 1px; box-shadow: none; }
.lp-tale-shelf li[data-first] .lp-tale-shelf-plate { border-color: var(--id-gold); filter: none; }
.lp-tale-shelf-words { display: flex; flex-direction: column; min-width: 0; }
.lp-tale-shelf-words strong { font: 500 16px/1.3 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-tale-shelf-words span { color: var(--id-ink-label); font: 500 14px/1.3 var(--ui); }
.lp-tale-reveal { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--id-rule-strong); }
.lp-tale-reveal .lp-mine-prose { margin-top: 8px; color: var(--id-ink); }
.lp-tale-morelike { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--id-rule-strong); }
.lp .lp-tale-morelike img { width: 48px; height: 64px; padding: 1px; box-shadow: none; }
.lp-tale-morelike p { margin: 0; display: flex; flex-direction: column; }
.lp-tale-morelike .lp-class-mix-label { margin: 0 0 2px; }
.lp-tale-morelike strong { font: 500 18px/1.25 var(--display); }
/* Chapter one's ledger: the game's own numbers under its words, ruled like the sample's (r2 walk, Oct 25: half the
   spread stood empty at 1440). The player's step, or their hours, in the chapter's color; the rest in the edge. */
.lp-tale-ledger { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--id-rule-strong); }
.lp-tale-ledger .lp-class-mix-label { margin: 0 0 6px; }
.lp-tale-ledger-rows.lp-bars { max-width: none; }
.lp-tale-ledger-rows.lp-bars .lp-step { min-height: 0; padding: 7px 0 6px; cursor: default; }
.lp-tale-ledger-rows.lp-bars b { font-size: 20px; }
.lp-tale-ledger-rows.lp-bars .lp-step span, .lp-tale-ledger-rows.lp-bars .lp-step:hover span { color: var(--id-ink-body); }
.lp-tale-ledger-rows.lp-bars i::before { background: var(--id-edge); }
.lp-tale-ledger-rows.lp-bars .lp-step[data-you] span, .lp-tale-ledger-rows.lp-bars .lp-step[data-you] b { color: var(--game); }
.lp-tale-ledger-rows.lp-bars .lp-step[data-you] i::before { background: var(--game); }
.lp-tale-ledger-rows.lp-hours { margin-top: 10px; }
.lp-tale-ledger-rows.lp-hours li:first-child span { color: var(--id-ink-label); font-weight: 500; }
.lp-tale-ledger-rows.lp-hours li:first-child i::before { background: var(--id-edge); }
.lp-tale-ledger-rows.lp-hours li[data-you] span { color: var(--id-ink); font-weight: 600; }
.lp-tale-ledger-rows.lp-hours li[data-you] i::before { background: var(--game); }
.lp-tale-source { margin-top: 18px; }
.lp-tale-source .lp-text-link { min-height: 32px; font-size: 15px; }
.lp-tale-keeps { max-width: 64ch; margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--id-rule-strong); }
.lp-tale-keeps .lp-class-mix-label { margin: 0 0 10px; }
.lp-tale-keeps-shelf { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.lp .lp-tale-keeps-shelf img { width: 36px; height: 48px; padding: 1px; box-shadow: none; }
.lp-tale-keeps-line { margin: 0 0 6px; font: 400 16px/1.55 var(--display); color: var(--id-ink-body); text-wrap: pretty; }
.lp-tale-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 24px; }
.lp-tale-status { max-width: 64ch; margin: 8px 0 0; }
@media (max-width: 559px) { .lp-tale-actions .lp-button { flex: 1 0 100%; } }
/* On a phone a quiet bar holds Keep once chapter one is in view: the ground, a gold rule over it. */
.lp-tale-bar { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: flex; justify-content: center;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(18, 14, 11, .94); border-top: 1px solid var(--id-edge);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lp-tale-bar .lp-button { width: 100%; max-width: 420px; }
@media (min-width: 760px) { .lp-tale-bar { display: none !important; } }

/* ── The sample: one page of the book a Tale becomes, set in the page's own type at reading size ─ */
.lp-specimen { min-width: 0; }
.lp-page { margin: 0; }
.lp-page-book { display: block; overflow: hidden; }
.lp-page-book:hover .lp-page-more { text-decoration-color: var(--id-gold); }
.lp-page-band { position: relative; display: block; height: 150px; overflow: hidden; }
.lp .lp-page-art { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; opacity: .9;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.lp-page-body { position: relative; display: block; padding: 20px 24px 28px 26px; }
.lp-page-body > span { display: block; }
.lp-page-title { margin: 6px 0 4px; font: 500 40px/1.05 var(--display); color: var(--id-ink); }
.lp-page-rel { font: italic 400 16px/1.4 var(--display); color: var(--id-ink-label); }
.lp-page-rule { position: relative; height: 1px; margin: 24px 0 8px; background: var(--id-rule-strong); }
.lp-page-rule i { position: absolute; top: -1px; left: var(--a); width: calc(var(--b) - var(--a)); height: 3px; background: var(--id-gold); }
.lp-page-dates { display: flex !important; justify-content: space-between; gap: 12px; font: italic 400 14px/1.3 var(--display); color: var(--id-ink-label); }
.lp-page-prose { margin-top: 16px; font: 400 16px/1.65 var(--display); color: var(--id-ink-body); text-wrap: pretty; }
.lp-page-body > .lp-page-prose--first { display: flow-root; margin-top: 24px; }
.lp-page-prose--first::first-letter { float: left; margin: 6px -1px 0 -2px; font: 500 52px/.8 var(--display); color: var(--id-gold); }
.lp .lp-page-more { margin-top: 18px; width: fit-content; font: 500 15px/1.4 var(--display); color: var(--id-ink-label);
  text-decoration: underline; text-decoration-color: var(--id-rule-strong); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.lp-page-book:hover .lp-page-more { color: var(--id-ink); }
/* "Explore Hades" stands on the sample page's last line, across from "Read the whole Tale" (gauntlet r7, both critics:
   it floated alone under the card). Laid over the page, not inside its link. */
.lp-page { position: relative; }
.lp-page figcaption { position: absolute; right: 24px; bottom: 17px; margin: 0; }
@media (min-width: 760px) { .lp-page figcaption { right: 40px; bottom: 21px; } }

/* ── What a Tale keeps: three moments from the sample, each a row of the book's ledger ──────────── */
.lp-moments, .lp-shelf-section, .lp-searched { padding-top: var(--section); }
.lp-moments-grid { display: grid; gap: 40px; margin-top: 24px; }
.lp-moment { margin: 0; padding-top: 16px; border-top: 1px solid var(--id-hair); }
.lp-moment p { margin: 8px 0 0; max-width: 32ch; color: var(--id-ink-body); font: 400 16px/1.5 var(--ui); }
/* The strip's figures in the Tale's own numerals, the book's serif, as its hours are (r2, Oct 25: "5.9%" and "No. 5" came
   out in the label's sans, because `.lp-moment p` set the face). */
.lp-moment .lp-moment-num { margin-top: 14px; font: 500 56px/1 var(--display); font-variant-numeric: proportional-nums lining-nums; color: var(--id-ink); }
.lp-hours { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.lp-hours li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; }
.lp-hours span { color: var(--id-ink-label); font: 500 14px/1.3 var(--ui); }
.lp-hours li:first-child span { color: var(--id-ink); font-weight: 600; }
.lp-hours b { font: 500 20px/1 var(--display); font-variant-numeric: lining-nums; }
.lp-hours i { grid-column: 1 / -1; position: relative; height: 3px; background: var(--id-hair); overflow: hidden; }
.lp-hours i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--id-edge); }
.lp-hours li:first-child i::before { background: var(--id-gold); }

/* ── Start with a game: four covers in a cloth-lined case ──────────────────────────────────────── */
.lp-shelf-section { margin-top: var(--section); padding-block: 48px 56px; background: var(--id-cloth); background-size: var(--id-cloth-size);
  box-shadow: inset 0 1px 0 var(--id-edge-endpaper), inset 0 -1px 0 var(--id-edge-cloth), inset 0 30px 50px -30px rgba(0, 0, 0, .85); }
.lp-shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; margin-top: 24px; }
.lp-game { display: flex; flex-direction: column; gap: 2px; }
/* The shelf's covers are never cropped (tests/e2e/public-home.spec.ts pins `contain`; IGDB covers are 3:4, so the plate shows no bars). */
.lp .lp-game img { width: 100%; aspect-ratio: 3 / 4; margin-bottom: 8px; object-fit: contain; transition: border-color .15s; }
.lp-game:hover img { border-color: var(--id-gold); }
.lp-game strong { font: 500 17px/1.3 var(--display); }
.lp-game span { color: var(--id-ink-label); font: 500 14px/1.3 var(--ui); }
.lp-season { display: none; }
:root[data-season="october"] .lp-season { display: block; margin: 24px 0 0; }

/* ── The game pages people open most: the book's contents lines ───────────────────────────────── */
.lp-searched-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.lp-searched-list a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--id-hair); color: var(--id-ink); font: 500 16px/1.3 var(--display); }
.lp-searched-list a:hover { color: var(--id-gold); }

/* ── Where the page closes: the gold rule, the wordmark, the credit ─────────────────────────────── */
.lp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: var(--section); padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--id-edge-endpaper); }
.lp-foot .lp-mark { font-size: 28px; }
.lp-foot nav { display: flex; gap: 16px; margin-left: auto; }
.lp-foot nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--id-ink-label); font: 500 14px/1 var(--ui); }
.lp-foot nav a:hover { color: var(--id-gold); }
.lp-credit { flex-basis: 100%; margin: 0; color: var(--id-ink-label); font: 400 12px/1.5 var(--ui); }
.lp-credit a { color: var(--id-ink-body); text-decoration: underline; text-underline-offset: 2px; }

/* ── The states the Tale's script sets on <html> ───────────────────────────────────────────────── */
/* While writing, the promise's second line goes and the sample, what it keeps, the shelf and the most-opened list step
   aside (Oct 13: 4 of 34 who started a Tale left through the shelf's covers right under the eight). While reading,
   only the Tale is on the page. */
:root[data-tale] .lp-hero-default > .lp-lede { display: none; }
:root[data-tale] .lp-opening > .lp-specimen, :root[data-tale] .lp-opening > .lp-moments { display: none; }
:root[data-tale="writing"] .lp-shelf-section, :root[data-tale="writing"] .lp-searched { display: none; }
:root[data-tale="read"] .lp-hero, :root[data-tale="read"] .lp-tale-page { display: none; }
:root[data-tale="read"] .lp-tale-read { padding-top: 0; }

/* ── Widths ─────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 959px) {
  :root[data-tale] .lp-hero-default > h1 { font-size: 30px; }
  :root[data-tale] .lp-tale { margin-top: 16px; }
  .lp-tale { padding: 14px 14px 16px; }
  /* r2 (Oct 25): this held the sample 72px further down so its art wouldn't peek in under the covers; with Next under
     them the sample starts past a phone's first screen anyway, and the extra read as an empty block. */
}
@media (max-width: 380px) { .lp-tale-wall { gap: 8px; } .lp-tale-pair { gap: 12px; } .lp-chip { padding: 0 13px; font-size: 14px; } }
@media (max-width: 359px) { .lp h1 { font-size: 36px; } .lp-page-title { font-size: 34px; } }
@media (min-width: 760px) {
  :root { --section: 96px; }
  .lp h1 { font-size: 54px; }
  .lp h2 { font-size: 32px; }
  .lp-quiz-q { font-size: 28px; }
  .lp-tale-wall { gap: 12px; }
  .lp-tale-pair { grid-template-columns: repeat(2, minmax(0, 180px)); gap: 24px; }
  .lp-moments-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .lp-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .lp-searched-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
  .lp-page-body { padding: 28px 40px 32px 40px; }
  .lp-page-band { height: 168px; }
  .lp-specimen { max-width: 640px; }
}
/* From 960px: the promise on one line with the covers four across under it, the page they write waiting beside them;
   below, the sample page takes seven columns and what it keeps takes five. */
@media (min-width: 960px) {
  .lp-opening { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; row-gap: 0; align-items: start; padding-top: 0; }
  .lp-hero { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 56px; padding: 56px 0 24px; }
  .lp-hero-copy.lp-hero-default { max-width: 680px; flex: 1 1 auto; }
  .lp h1 { font-size: var(--id-title); line-height: 1.04; }
  .lp-hero-default > h1 { white-space: nowrap; }
  :root[data-tale] .lp-hero-default > h1 { font-size: 44px; }
  :root[data-tale] .lp-hero { padding-top: 40px; }
  .lp-tale { max-width: 712px; padding: 22px 24px 24px; }
  .lp-tale-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 640px; }
  .lp-hero > .lp-tale-page { flex: 0 0 340px; align-self: flex-start; margin-top: 40px; }
  .lp-tale-read { grid-column: 1 / -1; padding-top: 40px; }
  .lp-specimen { max-width: none; margin-top: 40px; }
  .lp-opening > .lp-moments { grid-column: 2; margin-top: 40px; padding: 0; }
  .lp-opening > .lp-moments .lp-moments-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* A spread: two pages meeting at the gutter, each shaded toward it. */
  .lp-tale-spread { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .lp-tale-leaf::before { content: ""; position: absolute; z-index: 2; inset: 0 auto 0 0; width: 34px; pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, .1) 45%, transparent); }
  .lp-tale-leaf--you { border-radius: var(--id-bound-radius) 0 0 var(--id-bound-radius); }
  .lp-tale-leaf--you::before { inset: 0 0 0 auto; background: linear-gradient(270deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, .1) 45%, transparent); }
  .lp-tale-leaf--chapter { border-radius: 0 var(--id-bound-radius) var(--id-bound-radius) 0; }
  .lp-tale-leaf--you .lp-class-body { padding-top: 56px; padding-right: 52px; }
  .lp-tale-leaf--you .lp-mine-title { font-size: 44px; }
  .lp-tale-leaf--chapter .lp-class-body { padding-left: 52px; }
  /* Under the spread, what keeping does stands under Your Tale and the actions under chapter one, each on its own rule,
     so the book's foot is as wide as the book (r2 walk, Oct 25: the right half sat empty at 1440). */
  .lp-tale-read:has(> .lp-tale-keeps) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; align-content: start; }
  .lp-tale-read:has(> .lp-tale-keeps) > .lp-tale-spread { grid-column: 1 / -1; }
  .lp-tale-read:has(> .lp-tale-keeps) > .lp-tale-keeps { grid-column: 1; grid-row: 2 / span 2; max-width: none; margin-right: 52px; }
  .lp-tale-read:has(> .lp-tale-keeps) > .lp-tale-actions { grid-column: 2; grid-row: 2; align-self: start; margin-top: 28px; padding: 18px 0 0 52px; border-top: 1px solid var(--id-rule-strong); }
  .lp-tale-read:has(> .lp-tale-keeps) > .lp-tale-status { grid-column: 2; grid-row: 3; align-self: start; padding-left: 52px; }
  /* The covers and the action beside them: the covers take the room, Next and the quiet links stand at their right. */
  .lp-tale-stage:has(> .lp-tale-wall) { display: grid; grid-template-columns: minmax(0, auto) max-content; justify-content: start; column-gap: 24px; align-items: start; }
  .lp-tale-stage:has(> .lp-tale-wall) > :not(.lp-tale-wall):not(.lp-tale-more) { grid-column: 1 / -1; }
  .lp-tale-stage > .lp-tale-more { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 0; margin-top: 0; }
  .lp-tale-stage > .lp-tale-more .lp-tale-next { margin: 0 0 8px; min-width: 132px; white-space: nowrap; }
}
@media (min-width: 960px) and (max-width: 1100px) { .lp .lp-hero-default > h1 { font-size: 52px; } }
/* Short laptop windows (1280x800, and Cody's 1280x680): the whole first prompt fits. */
@media (min-width: 960px) and (max-height: 860px) {
  .lp-hero { padding-top: 32px; }
  .lp .lp-hero-default > h1 { font-size: 52px; }
  .lp-tale-wall { max-width: 540px; }
}
@media (min-width: 960px) and (max-height: 720px) {
  .lp-hero { padding-top: 28px; }
  .lp .lp-hero-default > h1 { font-size: 44px; }
  .lp-tale { margin-top: 18px; }
  .lp-tale-wall { max-width: 430px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { animation: none !important; transition: none !important; }
}