/* The Game Tales identity: the one design system every surface draws from.
   Opened Oct 13, 2026 (Cody: "every single surface has to feel like it's part of the same design system";
   the job is `claude/job-game-tales-design-system.md`). Taken from Community v10, the first page past the gate
   (41 of 50 blind critics would know it again next week).

   The rule: a page's own sheet lays things out. Its colors, type, materials and the pieces below come from here,
   so a change made here lands on every page and nothing drifts.

   Materials: the Library's paper (the ground every page stands on); book cloth (panels and doors); a bound plate
   (a cover set into the page like a plate in a book); the room's painted plate (its own painting, behind the
   masthead); a painted band (a painting across a whole chapter); the marbled endpaper (where a page closes).
   People: the class portraits, one painted set. And no label over any headline.

   Every piece is written as `:root [data-gt-identity] .id-…` so it outweighs the older shared sheets (the app-system
   sheet sets every page's h1 and h2 at (0,2,1)). A page that wants to change a piece needs the same weight.

   The front door (relaunch-public/index.html) stands outside the app's bundle and links its own copy of this sheet;
   after any change here run `node script/front-door-pin.mjs`, which copies it there and re-pins the page's URLs
   (tests/gt-identity.test.ts fails until the copy matches). */

:root {
  /* Ground and ink */
  --id-ground: #120e0b;
  --id-ink: #f3eee6;
  --id-ink-body: rgba(243, 238, 230, .86);
  --id-ink-caption: rgba(243, 238, 230, .8);
  --id-ink-lede: rgba(243, 238, 230, .78);
  --id-ink-label: rgba(243, 238, 230, .72);
  --id-gold: #e8c798;
  --id-gold-ring: linear-gradient(145deg, #f6dcae, #b58a4e 55%, #f6dcae);
  --id-rule: rgba(232, 199, 152, .14);
  --id-edge: rgba(232, 199, 152, .42);
  --id-edge-strong: rgba(232, 199, 152, .45);
  --id-edge-cloth: rgba(232, 199, 152, .18);
  --id-edge-bound: rgba(232, 199, 152, .16);
  --id-edge-endpaper: rgba(232, 199, 152, .4);
  --id-rule-strong: rgba(232, 199, 152, .28);
  --id-hair: rgba(236, 227, 207, .12);

  /* Type */
  --id-display: "Lora", Georgia, serif;
  --id-ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --id-title: 58px;          /* a room's name, over its painted plate */
  --id-title-sm: 40px;
  --id-chapter: 50px;        /* a chapter's headline */
  --id-chapter-sm: 36px;
  --id-feature: 60px;        /* the headline set into a painted band */
  --id-feature-sm: 40px;
  --id-h3: italic 500 24px/1.2 var(--id-display);
  --id-epigraph: italic 400 27px/1.3 var(--id-display);
  --id-epigraph-sm: italic 400 21px/1.3 var(--id-display);
  --id-shadow-title: 0 2px 18px rgba(0, 0, 0, .55);

  /* Book cloth */
  --id-cloth: linear-gradient(180deg, rgba(30, 24, 18, .5), rgba(16, 12, 9, .72)), url(/landing/assets/library/cloth-1040.jpg);
  --id-cloth-size: auto, 520px;
  --id-cloth-radius: 3px;
  --id-cloth-shadow: 0 0 0 1px var(--id-edge-cloth), 0 22px 48px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 236, 200, .06);

  /* A bound plate */
  --id-bound-pad: 3px;
  --id-bound-border: 1px solid var(--id-edge);
  --id-bound-radius: 2px;
  --id-bound-bg: #1a140f;
  --id-bound-shadow: 0 0 0 3px var(--id-ground), 0 0 0 4px var(--id-edge-bound), 0 14px 26px rgba(0, 0, 0, .6);
  --id-bound-filter: saturate(.86) sepia(.1) contrast(1.02);

  /* The paper itself, for a page whose older sheet clears backgrounds with !important (the account pages' .gt-page) */
  --id-paper: none;
  /* Where a page closes: a hairline, no texture (Oct 15: the marbled sheet came off everywhere, Cody's call). */
  --id-endpaper: none;
}

/* ── The ground: paper, on every page that wears the identity ─────────────────────────────────── */
:root .chronicle-shell.chronicle-shell[data-gt-identity][data-design-foundation][data-chronicle-destination] { position: relative; isolation: isolate; overflow-x: clip;
  background: var(--id-ground); }
:root .chronicle-shell[data-gt-identity][data-design-foundation] > .chronicle-main.chronicle-main { background: transparent; }

/* No label over any headline (12 of 12 critics faulted the label, headline, card and gold rule every page repeated).
   Never shown, so it outweighs any older sheet that set a label's display. */
[data-gt-identity] :is(.sys-eyebrow, .chronicle-eyebrow, .gt-question__label, p.gt-story__kicker, .gt-questions__kicker, .gt-story__next-kicker) { display: none !important; }

/* ── The room's painted plate, behind the masthead ───────────────────────────────────────────────
   Set by the shell's `plate` prop: --plate (the painting), --plate-md (a smaller cut at 1200px and under),
   --plate-at and --plate-at-sm (where the painting sits). */
.chronicle-shell[data-gt-plate]::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 600px; pointer-events: none;
  background: linear-gradient(90deg, rgba(14, 11, 8, .84) 0%, rgba(14, 11, 8, .5) 30%, rgba(14, 11, 8, .08) 58%, rgba(14, 11, 8, 0) 70%),
    linear-gradient(0deg, rgba(18, 14, 11, .6) 0%, rgba(18, 14, 11, 0) 40%), var(--plate) var(--plate-at, 50% 50%) / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
@media (max-width: 1200px) { .chronicle-shell[data-gt-plate]::before { background-image: linear-gradient(90deg, rgba(14, 11, 8, .84) 0%, rgba(14, 11, 8, .5) 30%, rgba(14, 11, 8, .08) 58%, rgba(14, 11, 8, 0) 70%), linear-gradient(0deg, rgba(18, 14, 11, .6) 0%, rgba(18, 14, 11, 0) 40%), var(--plate-md, var(--plate)); } }
@media (max-width: 767px) { .chronicle-shell[data-gt-plate]::before { height: 470px; background-position: 0 0, 0 0, var(--plate-at-sm, var(--plate-at, 50% 50%)); } }

/* The room's name, set over its plate. */
:root [data-gt-identity] .id-plate-head { max-width: none; padding: 200px 0 40px; }
:root [data-gt-identity] .id-title { max-width: 11.5em; margin: 0; font: 500 var(--id-title)/1.04 var(--id-display); letter-spacing: -.01em; text-wrap: balance; color: var(--id-ink); text-shadow: var(--id-shadow-title); }
:root [data-gt-identity] .id-lede { margin: 14px 0 0; color: var(--id-ink-lede); font: 500 16px/1.5 var(--id-ui); }
@media (max-width: 767px) { :root [data-gt-identity] .id-plate-head { padding-top: 150px; } :root [data-gt-identity] .id-title { font-size: var(--id-title-sm); } }

/* ── Book cloth: panels and doors ──────────────────────────────────────────────────────────────── */
:root [data-gt-identity] .id-cloth { border-radius: var(--id-cloth-radius); background: var(--id-cloth); background-size: var(--id-cloth-size); box-shadow: var(--id-cloth-shadow); }

/* ── A bound plate: a cover set into the page ──────────────────────────────────────────────────── */
:root [data-gt-identity] .id-bound { 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); }
:root [data-gt-identity] .id-bound img { filter: var(--id-bound-filter); }

/* ── A painted band: a painting across a whole chapter, edge to edge ─────────────────────────────
   Set --band to the painting and --band-at to where it sits. */
:root [data-gt-identity] .id-band { position: relative; isolation: isolate; }
:root [data-gt-identity] .id-band::before { content: ""; position: absolute; z-index: -1; top: -80px; bottom: -50px; left: calc(50% - 50vw); right: calc(50% - 50vw); pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 14, 11, .62), rgba(18, 14, 11, .22) 30%, rgba(18, 14, 11, .42) 70%, rgba(18, 14, 11, .85)), var(--band) var(--band-at, center 22%) / cover;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent); }

/* ── Where a page closes: a gold hairline across the column ───────────────────────────────────────
   The marbled endpaper came off on Oct 15 (Cody: "it looks like a vague, random, grandma texture"), and so did the tiled
   paper under every page ("the reuse of the same textured background or tiling it is causing weird pattern issues").
   The pages' own rules still set how far below the last words the line sits; its height and texture go everywhere. */
:root [data-gt-identity] .id-endpaper::after { content: ""; display: block; height: 0 !important; margin-top: 40px; border-top: 1px solid var(--id-edge-endpaper) !important;
  background: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
:root [data-gt-identity] .id-endpaper[data-bleed]::after { margin-left: 0; margin-right: 0; }

/* ── People: the class portraits, one painted set ──────────────────────────────────────────────────
   Each person sized by --s and ringed in their class color --c; yours ringed in gold. */
:root [data-gt-identity] .id-people { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 44px; margin: 30px 0 14px; padding: 0; list-style: none; }
:root [data-gt-identity] .id-person { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--id-ink); text-decoration: none; }
:root [data-gt-identity] .id-face { display: block; width: var(--s); height: var(--s); padding: 3px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, var(--c), rgba(0, 0, 0, .4));
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55); transition: transform .2s; }
:root [data-gt-identity] .id-face img { display: block; width: 100%; height: 100%; border: 2px solid var(--id-ground); border-radius: 50%; object-fit: cover; }
:root [data-gt-identity] .id-person b { font: 600 22px/1 var(--id-display); color: var(--id-ink); }
:root [data-gt-identity] .id-person small { color: var(--id-ink-label); font: 500 13px/1.3 var(--id-ui); }
:root [data-gt-identity] .id-people [data-mine] .id-face { padding: 4px; background: var(--id-gold-ring);
  box-shadow: 0 0 0 1px var(--id-edge-endpaper), 0 0 0 8px rgba(232, 199, 152, .08), 0 14px 34px rgba(0, 0, 0, .6); }
:root [data-gt-identity] .id-people [data-mine] small { color: var(--id-gold); }
:root [data-gt-identity] .id-person:hover .id-face, :root [data-gt-identity] .id-person:focus-visible .id-face { transform: translateY(-3px); }
:root [data-gt-identity] .id-person:focus-visible { outline: 2px solid var(--id-gold); outline-offset: 6px; border-radius: 8px; }
@media (max-width: 767px) { :root [data-gt-identity] .id-people { gap: 18px 22px; } :root [data-gt-identity] .id-face { width: calc(var(--s) * .62); height: calc(var(--s) * .62); } }
@media (min-width: 768px) and (max-width: 1023px) { :root [data-gt-identity] .id-people { gap: 28px; } :root [data-gt-identity] .id-face { width: calc(var(--s) * .78); height: calc(var(--s) * .78); } }
/* The ledger (Oct 13): a seal, a name, a dotted leader to what is counted, one row each; the book's way of listing
   what a page counts (the Tale's rare four, the opening chapter's mix). A page sets only its sizes. */
:root [data-gt-identity] .id-ledger { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; text-align: left; }
:root [data-gt-identity] .id-ledger > li { display: flex; align-items: center; gap: 16px; min-width: 0; }
:root [data-gt-identity] .id-ledger b { min-width: 0; font: 400 21px/1.25 var(--id-display); color: var(--id-ink); overflow-wrap: break-word; }
:root [data-gt-identity] .id-ledger i { flex: 1 1 24px; min-width: 24px; height: 0; margin-top: 12px; border-bottom: 2px dotted var(--id-edge); }
:root [data-gt-identity] .id-ledger small { flex: none; font: 500 24px/1 var(--id-display); color: var(--id-ink-lede); font-variant-numeric: tabular-nums; }
:root [data-gt-identity] .id-ledger [data-mine] i, :root [data-gt-identity] .id-ledger [data-rare] small { border-bottom-color: var(--id-gold); color: var(--id-gold); }

/* ── The shell (item 2) ────────────────────────────────────────────────────────────────────────── */

/* The masthead on every page, a painting under it or not: the ground, a gold rule under it (Oct 15: Cody, "the header bar on
   community is totally different than all the other pages"; it stood see-through over the painting). */
[data-gt-app-system] .chronicle-shell[data-gt-identity] > .gt-masthead { background: rgba(18, 14, 11, .94); border-bottom-color: var(--id-rule); }

/* The page's wrapper and the document behind it stand on the same paper, so nothing shows through under a page with no
   bottom tabs (the closing walk, Oct 17: /my-tale closed on an 80px band of a darker ground). */
html:has([data-gt-app-system]), [data-gt-app-system] .gt-protected-page { background-color: var(--id-ground); }  /* the app-system canvas itself keeps #110e0b: the release journeys pin it */
/* The paper ground on anything that isn't the shell (the loading state, the error page, the game page). */
:root [data-gt-identity].id-ground { min-height: 100dvh; padding: 0 20px; background: var(--id-ground); color: var(--id-ink); }
/* Its masthead is the shell's: the ground, a gold rule under it. */
[data-gt-app-system] [data-gt-identity].id-ground > .gt-masthead { background: rgba(18, 14, 11, .94); border-bottom-color: var(--id-rule); }

/* A door: where to go next, set in book cloth. A title, a line under it, an arrow. */
:root [data-gt-identity] .id-door { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px 18px; border-radius: var(--id-cloth-radius);
  background: var(--id-cloth); background-size: var(--id-cloth-size); box-shadow: var(--id-cloth-shadow); color: var(--id-ink); text-align: left; text-decoration: none; }
:root [data-gt-identity] .id-door > span { flex: 1; min-width: 0; display: grid; gap: 4px; }
:root [data-gt-identity] .id-door b { font: 700 15px/1.3 var(--id-ui); }
:root [data-gt-identity] .id-door small { color: var(--id-ink-label); font: 500 13.5px/1.45 var(--id-ui); }
:root [data-gt-identity] .id-door > svg { flex: none; width: 20px; height: 20px; color: var(--id-gold); }
:root [data-gt-identity] .id-door:hover, :root [data-gt-identity] .id-door:focus-visible { box-shadow: 0 0 0 1px var(--id-edge), 0 22px 48px rgba(0, 0, 0, .5); outline: none; }
:root [data-gt-identity] button.id-door { width: 100%; border: 0; font: inherit; cursor: pointer; }

/* A notice: a page with one thing to say (not found, something went wrong, opening). */
:root [data-gt-identity] .id-notice { display: grid; align-content: center; justify-items: center; gap: 0; width: min(100%, 560px); min-height: calc(100dvh - 240px); margin: 0 auto; padding: 72px 0 40px; text-align: center; }
/* Over a painted plate the headline sits on the painting's lower edge, as a room's name does. */
:root [data-gt-plate] .id-notice { align-content: start; min-height: 0; padding-top: 470px; }
:root [data-gt-plate] .id-notice .id-lede { text-shadow: 0 1px 12px rgba(0, 0, 0, .8); }
:root [data-gt-identity] .id-notice .id-title { max-width: 12em; font-size: 50px; }
:root [data-gt-identity] .id-notice .id-lede { max-width: 30em; margin-top: 16px; }
:root [data-gt-identity] .id-notice .id-doors { display: grid; gap: 12px; width: 100%; margin-top: 36px; }
@media (max-width: 767px) { :root [data-gt-identity] .id-notice { min-height: calc(100dvh - 200px); padding-top: 48px; } :root [data-gt-identity] .id-notice .id-title { font-size: var(--id-title-sm); } }
@media (max-width: 767px) { :root [data-gt-plate] .id-notice { padding-top: 360px; } }

/* A bar with the wordmark, for the pages that stand outside the shell (the error page). */
:root [data-gt-identity] .id-bar { display: flex; align-items: center; min-height: 80px; margin: 0 -20px; padding: 0 calc(max(0px, (100% - var(--id-page-width, 1400px)) / 2) + var(--id-gutter, clamp(20px, 4vw, 64px)));
  background: rgba(18, 14, 11, .94); border-bottom: 1px solid var(--id-rule); }  /* the app's frame and gutter (the closing walk, Oct 17: the 404's wordmark stood 16 to 27px left of every other page's) */
:root [data-gt-identity] .id-wordmark { color: var(--id-ink); font: 500 32px/1 "Fraunces", Georgia, serif; letter-spacing: -.035em; text-decoration: none; }
@media (max-width: 820px) { :root [data-gt-identity] .id-bar { justify-content: center; min-height: 64px; } :root [data-gt-identity] .id-wordmark { font-size: 28px; } }

/* The credit line under every page. */
:root [data-gt-identity] .gt-art-credit { color: var(--id-ink-label); }
:root [data-gt-identity] .gt-art-credit a { color: var(--id-ink-body); }

/* ── Icons in one hand (item 3) ─────────────────────────────────────────────────────────────────
   Engraved gold (components/engraved-icon.tsx), never stock line icons. Quiet until they're the room you're in. */
:root .id-icon { display: block; flex: none; object-fit: contain; }
[data-gt-app-system] .gt-primary-tabs a .id-icon { width: 26px; height: 26px; opacity: .76; filter: saturate(.7) brightness(.96); transition: opacity .15s, filter .15s; }
[data-gt-app-system] .gt-primary-tabs a[aria-current="page"] .id-icon { opacity: 1; filter: drop-shadow(0 0 6px rgba(232, 199, 152, .35)); }
.chronicle-settings-link .id-icon { width: 22px; height: 22px; opacity: .78; transition: opacity .15s; }
.chronicle-settings-link:hover .id-icon, .chronicle-settings-link:focus-visible .id-icon, .chronicle-settings-link[aria-current="page"] .id-icon { opacity: 1; }

/* ── A book's pages (item 6, the Tale) ────────────────────────────────────────────────────────────
   The Tale's own sheet names its colors --book-*; they are the identity's. */
:root [data-gt-identity] .gt-spread[data-book] { --book-page: var(--id-ground); --book-ink: var(--id-ink); --book-text: var(--id-ink-body);
  --book-quiet: var(--id-ink-label); --book-gold: var(--id-gold); --book-rule: var(--id-rule-strong); --book-hair: var(--id-hair); }

/* A colophon: the things to do with a page, set as a line of type at its foot, not a row of buttons (item 6: 15 of 50
   critics called the pill buttons generic). The !important outweighs the older Tale sheets, which set their buttons
   that way. A note under it (who can read the page) takes the whole line. */
:root [data-gt-identity] .id-colophon { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 4px; text-align: center; }
:root [data-gt-identity] .id-colophon :is(a, button):not(p *) { display: inline-flex !important; align-items: center; min-height: 44px !important; margin: 0 !important; padding: 0 14px !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--id-ink) !important;
  font: 500 18px/1.2 var(--id-display) !important; letter-spacing: 0 !important; text-transform: none !important;
  text-decoration: underline; text-decoration-color: var(--id-edge); text-decoration-thickness: 1px; text-underline-offset: 7px; cursor: pointer; }
:root [data-gt-identity] .id-colophon :is(a, button):not(p *):is(:hover, :focus-visible) { text-decoration-color: var(--id-gold); }
:root [data-gt-identity] .id-colophon :is(a, button):not(p *) svg { display: none !important; }
:root [data-gt-identity] .id-colophon p { flex-basis: 100%; margin: 8px 0 0; color: var(--id-ink-label); font: 400 13px/1.5 var(--id-ui); }
@media (max-width: 480px) { :root [data-gt-identity] .id-colophon :is(a, button):not(p *) { padding: 0 10px !important; font-size: 16.5px !important; } }

/* A contents line: a fold set like a line in a book's table of contents. Its name, a dotted leader, its count. */
:root [data-gt-identity] .id-fold { border-top: 1px solid var(--id-hair); }
:root [data-gt-identity] .id-fold > summary { display: flex; align-items: baseline; min-height: 64px; padding: 18px 0; list-style: none; cursor: pointer; color: var(--id-ink); }
:root [data-gt-identity] .id-fold > summary::-webkit-details-marker { display: none; }
:root [data-gt-identity] .id-fold > summary > span { flex: 1; display: flex; align-items: baseline; gap: 14px; min-width: 0; font: 500 24px/1.2 var(--id-display); letter-spacing: 0; }
:root [data-gt-identity] .id-fold > summary > span:has(+ small)::after { content: ""; flex: 1; min-width: 24px; border-bottom: 1px dotted var(--id-edge); }
:root [data-gt-identity] .id-fold > summary > span svg { display: none; }
:root [data-gt-identity] .id-fold > summary > small { flex: none; margin-left: 14px; color: var(--id-ink-label); font: italic 400 17px/1.2 var(--id-display); letter-spacing: 0; text-transform: none; }
:root [data-gt-identity] .id-fold > summary > svg { flex: none; align-self: center; width: 16px; height: 16px; margin-left: 14px; color: var(--id-gold); transition: transform .2s ease; }
:root [data-gt-identity] .id-fold[open] > summary > svg { transform: rotate(180deg); }
:root [data-gt-identity] .id-fold > summary:focus-visible { outline: 2px solid var(--id-gold); outline-offset: 4px; }
@media (max-width: 480px) { :root [data-gt-identity] .id-fold > summary > span { font-size: 21px; } :root [data-gt-identity] .id-fold > summary > small { font-size: 15px; } }

/* ---------- Two pieces for the Tale's opening, pass 3 (Oct 13, 2026) ----------
   A game's own art keeps its own colors. The bound filter warms our paintings into the book; on a player's trophies it
   read as "small, muddy and dim" (panel 30, ~9 of 25).
   A slip tucked into the book. A question asked inside the Tale is a slip of paper between its pages, cream and square
   to the page; it read as "a stock popup" or "a UI card" on the cloth (~6).
   Inside the slip the inks turn dark, so every piece in it that draws from --id-* or --book-* follows. */
:root [data-gt-identity] {
  --id-slip-paper: linear-gradient(174deg, #f4eddd, #ebe1cc 58%, #e1d4ba);
  --id-slip-ink: #2a2019;
  --id-slip-ink-body: rgba(42, 32, 25, .86);
  --id-slip-ink-quiet: rgba(42, 32, 25, .64);
  --id-slip-gold: #87602b;
  --id-slip-rule: rgba(42, 32, 25, .22);
  --id-slip-hair: rgba(42, 32, 25, .16);
  --id-slip-corner: #d6b27a;
  --id-slip-shadow: 0 24px 48px rgba(0, 0, 0, .55), 0 3px 8px rgba(0, 0, 0, .4);
}
:root [data-gt-identity] .id-bound.id-bound--art img { filter: none; }
:root [data-gt-identity] .id-slip { position: relative; border-radius: 2px; background: var(--id-slip-paper); box-shadow: var(--id-slip-shadow); color: var(--id-slip-ink);
  --id-ink: var(--id-slip-ink); --id-ink-body: var(--id-slip-ink-body); --id-ink-caption: var(--id-slip-ink-body); --id-ink-lede: var(--id-slip-ink-body);
  --id-ink-label: var(--id-slip-ink-quiet); --id-gold: var(--id-slip-gold); --id-rule: var(--id-slip-rule); --id-rule-strong: var(--id-slip-rule);
  --id-hair: var(--id-slip-hair); --id-edge: var(--id-slip-rule);
  --book-ink: var(--id-slip-ink); --book-text: var(--id-slip-ink-body); --book-quiet: var(--id-slip-ink-quiet); --book-gold: var(--id-slip-gold);
  --book-rule: var(--id-slip-rule); --book-hair: var(--id-slip-hair); --gt-game: var(--id-slip-gold); }
/* Square to the page (Cody, Oct 14, 2026: "i personally hate those tilted cards... it feels corny/cheap to me"). No
   tilt and no photo corners: a straight sheet of cream paper with a hairline at its edge. */
:root [data-gt-identity] .id-slip { transform: none; box-shadow: inset 0 0 0 1px rgba(135, 96, 43, .22), var(--id-slip-shadow); }

/* ---------- The page's edge, for pieces that run edge to edge (Oct 13, 2026) ----------
   The masthead sits in a 1400px page with a clamp(20px, 4vw, 64px) gutter (game-tales-app-system.css) from 821px up, and
   20px in from the edge below that. A full-bleed piece (the Tale's title page) pads its words by the same sum, measured
   from the viewport's edge, so they stand on the masthead's edge. Measured on the live Tale before this: wordmark at 41,
   51, 75 and 321, the title's words at 61, 61, 117 and 357 (1024, 1280, 1440, 1920). */
:root [data-gt-identity] { --id-page-width: var(--gt-page-width, 1400px); --id-gutter: var(--gt-gutter, clamp(20px, 4vw, 64px));
  --id-bleed-inline: calc(max(0px, (100vw - var(--id-page-width)) / 2) + var(--id-gutter)); }
@media (max-width: 820px) { :root [data-gt-identity] { --id-bleed-inline: 20px; } }

/* ---------- On a slip: one inked action and a plain link (Oct 13, 2026) ----------
   The slip's one thing to do is set in its own ink, the way a stamp sits on paper; anything else is a plain underline. */
:root [data-gt-identity] { --id-slip-on-ink: #f4eddd; }
:root [data-gt-identity] .id-slip .id-slip__action { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 22px; border-radius: 2px;
  background: var(--id-slip-ink); color: var(--id-slip-on-ink); font: 600 15px/1 var(--id-ui); text-decoration: none; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
:root [data-gt-identity] .id-slip .id-slip__action svg { width: 17px; height: 17px; }
:root [data-gt-identity] .id-slip .id-slip__action:hover { background: var(--id-slip-gold); }
:root [data-gt-identity] .id-slip .id-slip__link { color: var(--id-slip-ink-body); font: italic 400 16px/1.4 var(--id-display); text-decoration: underline; text-decoration-color: var(--id-slip-rule); text-underline-offset: 4px; }
/* An answer on a slip (Oct 14, item 7): a word set in a hairline box of the slip's ink; the one picked is inked in. */
:root [data-gt-identity] .id-slip .id-slip__choice { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 0; border-radius: 2px;
  background: rgba(255, 252, 245, .38); box-shadow: inset 0 0 0 1px var(--id-slip-rule); color: var(--id-slip-ink); font: 600 14.5px/1.2 var(--id-ui); text-align: center; cursor: pointer; }
:root [data-gt-identity] .id-slip .id-slip__choice:hover { box-shadow: inset 0 0 0 1px var(--id-slip-ink-quiet); }
:root [data-gt-identity] .id-slip .id-slip__choice[aria-pressed="true"] { background: var(--id-slip-ink); color: var(--id-slip-on-ink); box-shadow: none; }
:root [data-gt-identity] .id-slip .id-slip__choice:focus-visible { outline: 2px solid var(--id-slip-gold); outline-offset: 2px; }