/* worker/public/site/site.css - the website's one stylesheet (design doc 4.5.1).
   The app's neutral theme (RULES.md 25.1 for dark; the proposed light values from
   ios/Illuminory/Theme/NeutralTheme.swift) as custom properties, following the system
   until the candle is tapped (theme.js sets data-theme). Plain CSS, no build step.
   Text contrast stays at 4.5:1 or better in both schemes: dim text is #9a9894 on
   #121212 (6.4:1) and #6b665c on #f4f1ea (4.9:1); the light accent is used for
   decoration and for button fills with dark text, never as text on the page.
   Everything that moves holds still under prefers-reduced-motion. 2026-10-11. */

:root {
  --bg: #121212;
  --surface: #242423;
  --text: #f4f1ea;
  --dim: #9a9894;
  --accent: #e8b44a;
  --on-accent: #121212;
  --shadow: rgba(0, 0, 0, 0.55);
  --qr-bg: #f4f1ea;
  --qr-fg: #121212;
  --flame: 1;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f4f1ea;
  --surface: #e6e1d6;
  --text: #1c1a17;
  --dim: #6b665c;
  --accent: #b8862e;
  --on-accent: #1c1a17;
  --shadow: rgba(40, 30, 10, 0.25);
  --qr-bg: #ffffff;
  --qr-fg: #1c1a17;
  --flame: 0;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f4f1ea;
    --surface: #e6e1d6;
    --text: #1c1a17;
    --dim: #6b665c;
    --accent: #b8862e;
    --on-accent: #1c1a17;
    --shadow: rgba(40, 30, 10, 0.25);
    --qr-bg: #ffffff;
    --qr-fg: #1c1a17;
    --flame: 0;
    color-scheme: light;
  }
}

@font-face {
  font-family: "Poppins";
  src: url("/site/fonts/Poppins-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; width: min(1200px, 100% - 2rem); margin: 0 auto; padding: 0 0 3rem; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Skip link */
.skip { position: absolute; left: 1rem; top: -3rem; padding: 0.5rem 1rem; background: var(--accent); color: var(--on-accent); border-radius: 6px; z-index: 10; text-decoration: none; }
.skip:focus { top: 1rem; }

/* Header */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(1200px, 100% - 2rem); margin: 0 auto; padding: 1.25rem 0 1.5rem; }
.brand { text-decoration: none; display: flex; align-items: center; gap: 0.8rem; line-height: 1.1; }
/* The app icon beside the wordmark (layout.js, 2026-10-14), rounded as the phones round it. */
.brand-icon { width: 3.1rem; height: 3.1rem; border-radius: 22%; box-shadow: 0 2px 8px var(--shadow); flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
@media (max-width: 600px) { .brand-icon { width: 2.4rem; height: 2.4rem; } .brand { gap: 0.6rem; } }
.wordmark { font-family: "Poppins", system-ui, sans-serif; font-weight: 200; font-size: clamp(2rem, 6vw, 3rem); letter-spacing: 0.02em; }
.caption { font-family: Georgia, "Times New Roman", serif; font-variant-caps: small-caps; letter-spacing: 0.18em; font-size: 0.8rem; color: var(--dim); margin-top: 0.15rem; }
.site-nav { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
/* The cart and the candle after the nav (layout.js headerIcons, 2026-10-16). */
.header-icons { display: inline-flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
.sign-in { font-size: 0.95rem; text-decoration: none; border-bottom: 1px solid var(--dim); padding-bottom: 1px; white-space: nowrap; }
.sign-in:hover { border-color: var(--accent); }
/* The header's "What is Illuminory?" (layout.js, 2026-10-14): the short word on a phone. */
.about-link { font-size: 0.95rem; text-decoration: none; border-bottom: 1px solid var(--dim); padding-bottom: 1px; white-space: nowrap; }
.about-link:hover, .about-link[aria-current="page"] { border-color: var(--accent); }
.about-short { display: none; }
@media (max-width: 600px) { .about-long { display: none; } .about-short { display: inline; } }
/* The about page (about.js): the steps and the questions as native details. */
.about-steps { padding-left: 1.3rem; }
.about-steps li { margin: 0.4rem 0; }
.faq { margin: 0.5rem 0 1.5rem; }
.faq-item { border-top: 1px solid var(--surface); padding: 0.65rem 0; }
.faq-item:last-child { border-bottom: 1px solid var(--surface); }
.faq-item summary { cursor: pointer; font-weight: 600; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; line-height: 1; flex: 0 0 auto; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { margin: 0.5rem 0 0.3rem; line-height: 1.55; }
/* The founder's note on /about and the authors' mini site (authors.js). */
.why { margin: 2rem 0 0; padding: 1.1rem 1.25rem; background: var(--surface); border-radius: 12px; }
.why h2 { margin: 0 0 0.1rem; }
.why p { line-height: 1.55; }
.authors-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; margin: -0.5rem 0 1.75rem; padding: 0.6rem 1rem; background: var(--surface); border-radius: 12px; font-size: 0.9rem; }
.authors-nav a { text-decoration: none; color: var(--dim); border-bottom: 1px solid transparent; }
.authors-nav a:hover { color: var(--text); border-color: var(--accent); }
.authors-kicker { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-right: 0.4rem; }
.authors-section { margin: 2rem 0 0; }
.authors-section h2 { margin-top: 0; }
.authors-list { padding-left: 1.3rem; }
.authors-list li { margin: 0.4rem 0; line-height: 1.5; }
.prose.authors { max-width: 78ch; }
.authors-nav a[aria-current="page"] { color: var(--text); border-color: var(--accent); }
/* The terms for authors (authors-terms.js, 2026-10-14): the summary box at the top, then the sections. */
.terms-short { margin: 1.5rem 0 0; padding: 1rem 1.25rem; background: var(--surface); border-radius: 12px; }
.terms-short h2 { margin: 0 0 0.4rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.terms-short ul { margin: 0; padding-left: 1.2rem; }
.terms-short li { margin: 0.3rem 0; line-height: 1.5; }
.authors-terms p { line-height: 1.55; }
/* Moving a book from Audible (authors-audible.js, 2026-10-18): the letter to ACX, a block to copy. */
.authors-audible p { line-height: 1.55; }
.authors-letter { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0.75rem 0 1rem; padding: 1rem 1.25rem; background: var(--surface); border-radius: 12px; font-size: 0.9rem; line-height: 1.5; }
.terms-before { margin-top: 2.5rem; }
/* A figure not yet set (authors-terms.js [[placeholder]]): outlined, never read as a promise. */
.placeholder { background: color-mix(in srgb, var(--accent) 16%, transparent); color: inherit; border: 1px dashed var(--accent); border-radius: 4px; padding: 0 0.3em; font-style: italic; }
/* An author's own page (author.js, 2026-10-15): the photo and the intro side by side, the shelf under. */
.author-page { max-width: 1100px; }
.author-head { display: flex; gap: 1.5rem 2rem; align-items: flex-start; margin: 0 0 2rem; }
.author-photo { width: 180px; height: 180px; flex: none; border-radius: 50%; object-fit: cover; background: var(--surface); box-shadow: 0 12px 28px -14px var(--shadow); }
.author-intro { min-width: 0; }
.author-intro h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 0.5rem; }
.author-bio { max-width: 68ch; line-height: 1.55; }
.author-bio p { margin: 0 0 0.75rem; }
.author-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 0; }
.author-host { color: var(--dim); font-weight: 400; }
.author-none { color: var(--dim); }
@media (max-width: 560px) { .author-head { flex-direction: column; } .author-photo { width: 140px; height: 140px; } }
/* The authors' enquiry form (enquire.js, 2026-10-14): two columns on a desk, one on a phone. */
.enquiry-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.2rem; margin: 1rem 0 0.5rem; padding: 1.1rem 1.25rem 1.2rem; background: var(--surface); border-radius: 12px; }
.enquiry-field { display: flex; flex-direction: column; gap: 0.3rem; }
.enquiry-field label { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.enquiry-field input, .enquiry-field textarea { font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--dim); border-radius: 8px; background: var(--background); color: var(--text); }
.enquiry-field textarea { resize: vertical; min-height: 6rem; }
.enquiry-wide, .enquiry-actions { grid-column: 1 / -1; }
.enquiry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.enquiry-hint { font-size: 0.85rem; color: var(--dim); }
.enquiry-hint[role="alert"] { color: #e07a6a; }
.enquiry-done { padding: 1rem 1.25rem; background: var(--surface); border-left: 3px solid var(--accent); border-radius: 8px; }
.enquiry-or { margin: 0.4rem 0 0; }
@media (max-width: 620px) { .enquiry-form { grid-template-columns: 1fr; } }
/* The rates table on /authors (authors.js ratesTable): Illuminory's row first and lit, the rest by what one hundred sales pay. Stacks on a phone, each figure under its column's name. */
.rates-wrap { margin: 1rem 0 0.75rem; overflow-x: auto; }
.rates { width: 100%; border-collapse: collapse; font-size: 0.92rem; line-height: 1.45; }
.rates th, .rates td { padding: 0.55rem 0.6rem; text-align: left; vertical-align: top; border-top: 1px solid var(--surface); }
.rates thead th { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); border-top: 0; padding-top: 0; }
.rates tbody th { font-weight: 600; }
.rates .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rates tbody tr:last-child th, .rates tbody tr:last-child td { border-bottom: 1px solid var(--surface); }
.rates-us th, .rates-us td { background: color-mix(in srgb, var(--accent) 14%, transparent); border-top-color: transparent; }
.rates-us th:first-child { border-radius: 10px 0 0 10px; }
.rates-us td:last-child { border-radius: 0 10px 10px 0; }
.rates-us td.num { color: var(--accent); font-weight: 700; font-size: 1.05rem; }
@media (max-width: 640px) {
  .rates thead { display: none; }
  .rates, .rates tbody, .rates tr, .rates th, .rates td { display: block; }
  .rates tr { padding: 0.65rem 0; border-top: 1px solid var(--surface); }
  .rates th, .rates td { border: 0; padding: 0.1rem 0; }
  .rates .num { text-align: left; white-space: normal; }
  .rates td.num::before { content: attr(data-label) ": "; color: var(--dim); font-weight: 400; font-size: 0.85rem; }
  .rates tbody tr:last-child { border-bottom: 1px solid var(--surface); }
  .rates-us { padding: 0.65rem 0.8rem; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); }
  .rates-us th, .rates-us td { background: none; }
  .rates-us th:first-child, .rates-us td:last-child { border-radius: 0; }
}

/* The candle: tap to light (dark) or snuff (light) */
.theme-toggle { background: none; border: 0; padding: 0.25rem 0.5rem; cursor: pointer; border-radius: 8px; display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.candle { width: 28px; height: 44px; }
.candle { overflow: visible; }
.candle .wax { fill: var(--surface); stroke: var(--text); stroke-width: 2; }
.candle .wick { fill: var(--text); }
.candle .drip { fill: var(--text); opacity: 0.5; }
.candle .flame-outer { fill: var(--accent); opacity: var(--flame); transform-origin: 20px 33px; }
.candle .flame-inner { fill: var(--bg); opacity: calc(var(--flame) * 0.9); transform-origin: 20px 33px; }
.candle .flame { transition: opacity 0.4s ease; animation: flicker 2.2s ease-in-out infinite alternate; }
.candle .flame-inner { animation-duration: 1.7s; animation-delay: 0.3s; }
@keyframes flicker {
  0%   { transform: scale(1, 1) translateX(0); }
  25%  { transform: scale(0.96, 1.05) translateX(0.3px); }
  50%  { transform: scale(1.03, 0.97) translateX(-0.4px); }
  75%  { transform: scale(0.98, 1.04) translateX(0.2px); }
  100% { transform: scale(1.01, 0.99) translateX(-0.2px); }
}

/* Shelves */
.shelf { margin: 0 0 2.5rem; }
.shelf-title { font-size: 1.15rem; font-weight: 600; letter-spacing: 0.04em; margin: 0 0 1rem; display: flex; align-items: baseline; gap: 0.75rem; }
.shelf-kind { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); font-weight: 500; }
.shelf-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.5rem 1.25rem; align-items: start; }
@media (min-width: 700px) { .shelf-row { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }

.tile { position: relative; display: flex; flex-direction: column; min-width: 0; }
.tile-link { display: block; text-decoration: none; color: inherit; border-radius: 6px; perspective: 700px; }
/* The wrap carries the tilt, the grow and the lift, so the sash and the flags inside it move with
   the cover (2026-10-14); the cover itself keeps the shadow. site.js sets the tilt on the wrap. */
.cover-wrap { display: block; position: relative; min-width: 0; transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform 0.25s ease; }
.cover { width: 100%; max-width: 100%; min-width: 0; aspect-ratio: 1 / 1; border-radius: 6px; background: var(--surface); box-shadow: 0 6px 18px -8px var(--shadow); transition: box-shadow 0.25s ease; }
.cover-missing { display: block; }
/* The cover link is kept from the keyboard (tile.js, 2026-10-18), so the lift on focus follows the title link. */
.tile:hover .cover-wrap, .tile:has(.tile-title:focus-visible) .cover-wrap { transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) scale(1.045) translateY(-4px); }
.tile:hover .cover, .tile:has(.tile-title:focus-visible) .cover { box-shadow: 0 18px 32px -12px var(--shadow); }
.tile-caption { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.1rem 0; }
.tile-title { font-weight: 600; text-decoration: none; line-height: 1.3; }
.tile-title:hover { text-decoration: underline; }
.tile-author { color: var(--dim); font-size: 0.9rem; }
/* The facts line (tile.js facts, 2026-10-13): the running time and the
   category icons, tinted, the name on hover. */
.tile-facts { display: flex; align-items: center; gap: 0.55rem; color: var(--dim); font-size: 0.82rem; line-height: 1; margin-top: 0.1rem; }
.tile-cats { display: inline-flex; align-items: center; gap: 0.3rem; }
.tile-cat { display: inline-flex; cursor: default; }
.tile-cat .category-icon { width: 1.15rem; height: 1.15rem; display: block; }
.tile-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; min-height: 1.5rem; }
.price { font-weight: 600; font-size: 0.95rem; }
.price.free { color: var(--on-accent); background: var(--accent); border-radius: 999px; padding: 0.05rem 0.55rem; font-size: 0.8rem; letter-spacing: 0.04em; }
.start-here { position: absolute; z-index: 2; top: 0.6rem; left: -0.35rem; background: var(--accent); color: var(--on-accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 0 4px 4px 0; box-shadow: 0 2px 6px var(--shadow); pointer-events: none; }

/* The narration marks (Adam's logos of 2026-10-12): wide one-colour SVGs as masks, so one
   file serves both themes and takes its tint: podcast purple for a human narration, ice blue
   for a digital one, deep red for a full cast. All three at one size, readable under the
   cover; the light scheme deepens the tints for contrast on cream. */
:root { --mark-human: #b07be0; --mark-digital: #8fd3f4; --mark-full-cast: #c7414f; }
:root[data-theme="light"] { --mark-human: #7b3fb5; --mark-digital: #2f8fc4; --mark-full-cast: #8b1e2d; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) { --mark-human: #7b3fb5; --mark-digital: #2f8fc4; --mark-full-cast: #8b1e2d; } }
/* The tip under a tile's marks hangs from the row of marks, not from the mark, and is never
   wider than the row (2026-10-21, AUT-246): centred on a mark it ran up to 110 px either side,
   so on a phone's two-column shelf a right-hand tile's second mark pushed the page 32 px past a
   390 px screen, sideways scrolling even while the tip was invisible, and a left-hand tile's tip
   opened off the screen's left edge. */
.badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: center; position: relative; }
.badge-item { display: inline-flex; align-items: center; gap: 0.5rem; }
/* Half the first cut's 128 x 32 (Adam, 2026-10-12, on seeing the preview: "about half the size"). */
.badge { display: inline-block; width: 64px; height: 16px; background: currentColor; -webkit-mask: var(--badge) center / contain no-repeat; mask: var(--badge) center / contain no-repeat; }
.badge-human { --badge: url("/site/badges/human-narrated.svg"); color: var(--mark-human); }
.badge-digital { --badge: url("/site/badges/digitally-narrated.svg"); color: var(--mark-digital); }
.badge-full-cast { --badge: url("/site/badges/full-cast-production.svg"); color: var(--mark-full-cast); }
.badge-tip { position: absolute; left: 0; bottom: calc(100% + 6px); box-sizing: border-box; background: var(--text); color: var(--bg); font-size: 0.75rem; line-height: 1.3; padding: 0.35rem 0.55rem; border-radius: 6px; width: max-content; max-width: min(220px, 100%); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 3; }
.badge-item:hover .badge-tip, .badge-item:focus-within .badge-tip { opacity: 1; }
.badges-text { flex-direction: column; align-items: flex-start; gap: 0.5rem; margin: 0.75rem 0; }
.badges-text .badge { width: 100px; height: 25px; flex: none; }
.badges-text .badge-item { display: grid; grid-template-columns: 100px 1fr; grid-template-rows: auto auto; column-gap: 0.75rem; align-items: center; }
.badges-text .badge { grid-row: 1 / 3; }
.badge-name { font-size: 0.72rem; letter-spacing: 0.16em; font-weight: 700; }
.badge-explained { font-size: 0.9rem; color: var(--dim); }
.tile-meta { flex-wrap: wrap; row-gap: 0.4rem; }
.tile-meta .badges { flex-basis: 100%; }

.details-title { margin: 0 0 0.25rem; font-size: 1.5rem; line-height: 1.2; }
.details-by { margin: 0; color: var(--dim); }
.series-line { display: block; font-size: 0.9rem; }
.details-narrator, .details-meta { margin: 0.5rem 0 0; font-size: 0.95rem; color: var(--dim); }
.details-blurb { margin: 1rem 0; max-width: 60ch; }
.details-blurb p { margin: 0 0 0.75rem; }
/* The blurb's headings (shared/blurb.js, 2026-10-14): sized by the typed level whatever element the page gave them. */
.details-blurb .blurb-h2, .details-blurb .blurb-h3, .details-blurb .blurb-h4 { font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.25; margin: 1.1rem 0 0.45rem; }
.details-blurb .blurb-h2 { font-size: 1.2rem; font-weight: 600; }
.details-blurb .blurb-h3 { font-size: 1.06rem; font-weight: 600; }
.details-blurb .blurb-h4 { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); }
.details-blurb :is(.blurb-h2, .blurb-h3, .blurb-h4):first-child { margin-top: 0.2rem; }
.details-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 1rem; }

/* Buttons */
.button { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--accent); color: var(--on-accent); border: 0; border-radius: 999px; padding: 0.7rem 1.4rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.button:hover { filter: brightness(1.06); }
.button[disabled], .button[aria-disabled="true"] { background: var(--surface); color: var(--dim); cursor: default; border: 1px solid var(--dim); }
.button.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--dim); }
.button.danger { background: #a33b2e; color: #fff; }
.buy-price { font-weight: 500; opacity: 0.85; }
.buy-free { font-weight: 600; }
.link-button { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; align-self: flex-start; }

/* The wax seal sample button */
.sample { display: flex; align-items: center; gap: 0.75rem; }
.seal { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; display: inline-flex; color: #8b1e2d; }
:root[data-theme="light"] .seal { color: #8b1e2d; }
.seal-wax { fill: currentColor; filter: drop-shadow(0 2px 2px var(--shadow)); }
.seal-ring { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.5; }
.seal-progress { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: var(--progress, 0) 100; transform: rotate(-90deg); transform-origin: 32px 32px; transition: stroke-dasharray 0.3s linear; }
.seal-play, .seal-pause { fill: #f4f1ea; }
.seal-pause { display: none; }
.seal[aria-pressed="true"] .seal-play { display: none; }
.seal[aria-pressed="true"] .seal-pause { display: block; }
.seal:hover .seal-svg { transform: scale(1.05); }
.seal-svg { transition: transform 0.2s ease; }
.sample-text { display: flex; flex-direction: column; font-size: 0.95rem; }
.sample-length { color: var(--dim); font-size: 0.85rem; }

/* Book page */
.book-page { display: grid; grid-template-columns: minmax(200px, 420px) 1fr; gap: 1.5rem 3rem; align-items: start; }
.book-page .back { grid-column: 1 / -1; margin: 0; font-size: 0.95rem; }
.book-cover-wrap { position: relative; }
.book-cover { border-radius: 10px; box-shadow: 0 24px 48px -20px var(--shadow); }
.book-page .start-here { top: 1rem; left: -0.35rem; }
@media (max-width: 700px) { .book-page { grid-template-columns: 1fr; } .book-cover-wrap { max-width: 420px; } }

/* How it works, Get the apps */
.how, .apps { margin: 3rem 0 0; padding-top: 2rem; border-top: 1px solid var(--surface); }
.how h2, .apps h2, .apps h1 { font-size: 1.15rem; letter-spacing: 0.04em; margin: 0 0 1rem; }
.how-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem 2rem; counter-reset: step; }
.how-steps li { counter-increment: step; padding-left: 2.4rem; position: relative; }
.how-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; display: grid; place-items: center; font-size: 0.9rem; }
.apps-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 3rem; }
.store-badges { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.store-badge img { border-radius: 8px; }
.apps-qr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.apps-qr .qr { width: 132px; height: 132px; border-radius: 8px; }
.apps-qr figcaption { font-size: 0.8rem; color: var(--dim); }
.apps-soon { color: var(--dim); margin: 1rem 0 0; max-width: 60ch; }
@media (pointer: coarse) and (max-width: 760px) { .apps-qr { display: none; } }
.store-badge.hidden-by-platform { display: none; }

/* Prose pages */
.prose { max-width: 68ch; }
.prose h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 0.5rem; }
.prose h2 { font-size: 1.15rem; margin: 2rem 0 0.5rem; }
.prose .lede { font-size: 1.1rem; color: var(--dim); }
.prose .small { font-size: 0.85rem; color: var(--dim); }
.prose ul { padding-left: 1.2rem; }
.prose li { margin: 0.35rem 0; }

/* Account */
.account-form { display: flex; flex-direction: column; gap: 0.6rem; max-width: 420px; margin: 1rem 0; }
.account-form.inline { margin: 0; }
.account-form label { font-weight: 600; font-size: 0.95rem; }
.account-form input { font: inherit; padding: 0.7rem 0.9rem; border-radius: 8px; border: 1px solid var(--dim); background: var(--surface); color: var(--text); }
.account-form input#code { letter-spacing: 0.4em; font-size: 1.4rem; max-width: 12ch; }
.account-form .button { align-self: flex-start; }
.form-error { color: #e07a6a; margin: 0; }
.signed-in-as { color: var(--dim); }
.reminders-form { margin: 0; }
.reminders-line { margin: 0.5rem 0 0; }
.reminders-line .link-button { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.account-books { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1.25rem; }
.account-books li { display: flex; flex-direction: column; gap: 0.25rem; }
.account-books img { aspect-ratio: 1; border-radius: 6px; width: 100%; }
.account-book-title { font-weight: 600; font-size: 0.95rem; }
.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2rem; }
/* The refund request (site/refund.js, 2026-10-18): the account's paid books, each with its state in
   words; one that cannot be asked about is greyed and has no box. */
.refund-section { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.refund-form { max-width: 640px; }
.refund-form fieldset { border: 0; margin: 0 0 0.6rem; padding: 0; }
.refund-form legend { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.4rem; }
.refund-form .refund-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.refund-line { padding: 0.6rem 0.85rem; border: 1px solid var(--dim); border-radius: 8px; background: var(--surface); }
/* Box, cover thumbnail, then the title over its meta (2026-10-18). A closed line keeps the box's width
   empty (.refund-nobox) so the covers line up; its cover goes grey with the rest of the line. */
.refund-pick { display: flex; align-items: center; gap: 0.75rem; }
label.refund-pick { cursor: pointer; }
.refund-line input[type="checkbox"], .refund-nobox { width: 1.1rem; height: 1.1rem; flex: none; margin: 0; accent-color: var(--accent); }
.refund-thumb { display: block; width: 56px; height: 56px; flex: none; border-radius: 4px; object-fit: cover; background: var(--bg); box-shadow: 0 3px 8px -4px var(--shadow); }
.refund-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.refund-line .refund-title { font-weight: 600; }
.refund-line .refund-meta { color: var(--dim); font-size: 0.9rem; font-weight: 400; } /* inside the label, which the account form bolds */
.refund-line.state-eligible .refund-state { color: var(--text); }
.refund-line.is-closed { opacity: 0.6; border-style: dashed; }
.refund-line.is-closed .refund-thumb { filter: grayscale(1); }
.refund-reason { display: flex; align-items: center; gap: 0.55rem; font-weight: 400 !important; margin: 0.2rem 0; cursor: pointer; }
.refund-reason input { accent-color: var(--accent); }
.refund-form textarea { font: inherit; padding: 0.7rem 0.9rem; border-radius: 8px; border: 1px solid var(--dim); background: var(--surface); color: var(--text); resize: vertical; }
.refund-errors { margin: 1rem 0; display: flex; flex-direction: column; gap: 0.35rem; }
.danger-link { color: #e07a6a; }
.hint { color: var(--dim); font-size: 0.95rem; }

/* Footer */
.site-footer { width: min(1200px, 100% - 2rem); margin: 0 auto; padding: 2rem 0 2.5rem; border-top: 1px solid var(--surface); color: var(--dim); font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: baseline; }
.site-footer p { margin: 0; }
.site-footer nav a { margin-right: 1rem; }
/* Illuminory's social accounts (src/site/social.js): a row of icons, a dimmed one not yet live. */
.site-footer nav.social { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.site-footer nav.social a.social-link { margin-right: 0; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--text); }
a.social-link:hover, a.social-link:focus-visible { background: var(--surface); }
.social-link.pending { color: var(--dim); opacity: 0.45; cursor: default; }
.no-tracking { flex: 1 1 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cover { transform: none !important; }
}

/* The store (added 2026-10-12): the switcher and the cart in the header, prices with
   their notes, Owned marks, bundle tiles, the cart page, the account's purchases. */
.site-nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.4rem; }
.country-form { margin: 0; display: inline-flex; min-width: 0; }
.country-select { font: inherit; font-size: 0.85rem; max-width: 11rem; min-width: 0; padding: 0.35rem 0.5rem; border-radius: 8px; border: 1px solid var(--dim); background: var(--surface); color: var(--text); }
/* On a touch screen the selector's text is 16 px (2026-10-21, AUT-246): it was the one control on
   the site under 16 px, and iOS Safari zooms the page in when such a control is tapped and leaves
   it zoomed after the choice, so the page scrolls sideways. A little wider, so "United Kingdom
   (GBP)" still reads in full where the row has room. */
@media (pointer: coarse) { .country-select { font-size: 1rem; max-width: 12.5rem; } }
/* On a phone the header is two rows: the wordmark, then the nav on a row of its own, so the
   selector never pushes the page past the screen (Adam, 2026-10-16: "on load on iOS and Android
   the default page is a little bit too wide and therefore scrolls left and right"). The nav's row
   never wraps (2026-10-21): the two links keep their width and the selector gives way, down to
   whatever the row leaves it, its label cut short, so the wider touch selector never sends
   "My account" to a row of its own (it would at 360 px). The links are told not to shrink:
   "My account" clips its overflow (.account-link), which would otherwise let it shrink too. */
@media (max-width: 600px) {
  .site-header { flex-wrap: wrap; gap: 0.5rem 1rem; padding-bottom: 1rem; }
  .header-icons { order: 1; margin-left: auto; }
  .site-nav { order: 2; flex: 1 1 100%; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; margin-left: 0; }
  .site-nav > a { flex-shrink: 0; }
  .country-form { flex: 0 1 auto; }
  .country-select { width: 100%; }
}
.cart-link { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 44px; min-height: 44px; justify-content: center; text-decoration: none; border-radius: 8px; position: relative; }
.cart-count { font-size: 0.72rem; font-weight: 700; background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: 0.05rem 0.45rem; line-height: 1.4; }
.account-link { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
.price-note { font-weight: 400; font-size: 0.75rem; color: var(--dim); letter-spacing: 0.02em; }
.price-inline { display: inline; }
.saving, .pill { display: inline-block; font-size: 0.78rem; font-weight: 700; border-radius: 999px; padding: 0.05rem 0.5rem; letter-spacing: 0.04em; white-space: nowrap; vertical-align: middle; }
.saving { color: var(--on-accent); background: var(--accent); }
/* The BUNDLE pill sits beside Save on a bundle tile (Adam, 2026-10-12): the same shape, outlined so the saving stays the louder of the two. */
.pill-bundle { color: var(--accent); background: transparent; border: 1px solid var(--accent); padding-top: 0; padding-bottom: 0; line-height: 1.35; }
/* Owned sits at the cover's bottom-right tab, clear of the sash in the top-right and the flags at
   the top-left, so nothing overlaps whatever a book wears (2026-10-14). */
.owned-flag { position: absolute; z-index: 2; bottom: 0.6rem; right: 0.35rem; background: var(--text); color: var(--bg); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 4px 0 0 4px; box-shadow: 0 2px 6px var(--shadow); pointer-events: none; }
/* Categories (2026-10-12): the book's up-to-three categories as chips in its details. */
.categories { margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; letter-spacing: 0.03em; padding: 0.15rem 0.6rem 0.15rem 0.45rem; border-radius: 999px; border: 1px solid var(--dim); color: var(--dim); }
/* The category's icon inside its chip (2026-10-14): the facts line's art at the chip's size, tinted like it. */
.chip .category-icon { width: 1rem; height: 1rem; flex: none; }
/* The keywords under the chips (2026-10-14): a quiet row of links to the search, a dot between. */
.keywords { margin: 0.45rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; font-size: 0.78rem; color: var(--dim); }
.keyword { color: inherit; text-decoration: none; border-bottom: 1px dotted transparent; }
.keyword:hover, .keyword:focus-visible { color: var(--text); border-color: var(--accent); }
.keyword + .keyword::before { content: "\00b7"; margin-right: 0.5rem; color: var(--dim); }
/* Reviews (2026-10-12): a gold star row clipped to the average, the number and the count; the book page's Reviews section; the gold Verified pill. */
.rating { display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: none; color: var(--dim); font-size: 0.85rem; line-height: 1; }
a.rating:hover .rating-text { text-decoration: underline; }
.stars { --fill: 0%; display: inline-block; font-size: 1rem; letter-spacing: 0.05em; line-height: 1; color: transparent; background: linear-gradient(90deg, var(--accent) var(--fill), var(--dim) var(--fill)); -webkit-background-clip: text; background-clip: text; }
.rating-text { color: var(--text); font-weight: 600; }
.rating-count { color: var(--dim); font-weight: 400; }
.details-rating { margin: 0.35rem 0 0; }
.reviews { margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--surface); }
.reviews h2 { margin: 0 0 0.75rem; font-size: 1.25rem; }
.reviews-none { color: var(--dim); }
.reviews-summary { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-start; margin: 0 0 1.25rem; }
.reviews-average { margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.reviews-number { font-size: 2.4rem; font-weight: 700; line-height: 1; }
.reviews-average .stars { font-size: 1.4rem; }
.reviews-count { color: var(--dim); font-size: 0.9rem; }
.reviews-breakdown { list-style: none; margin: 0; padding: 0; min-width: 14rem; flex: 1 1 14rem; max-width: 24rem; }
.reviews-breakdown li { display: grid; grid-template-columns: 4.2rem 1fr 2.6rem; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--dim); margin: 0.2rem 0; }
.breakdown-bar { display: block; height: 0.6rem; background: var(--surface); border-radius: 999px; overflow: hidden; }
.breakdown-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.breakdown-pct { text-align: right; }
.reviews-list { list-style: none; margin: 0; padding: 0; }
.review { padding: 0.9rem 0; border-top: 1px solid var(--surface); }
.review-head { margin: 0; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.review-headline { font-weight: 700; }
.review-body { margin: 0.4rem 0 0; }
.review-body p { margin: 0 0 0.5rem; }
.review-by { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--dim); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.review-name { color: var(--text); font-weight: 600; }
.verified-pill { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); border-radius: 999px; padding: 0.1rem 0.55rem; }
.owned-badge { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--text); color: var(--bg); padding: 0.1rem 0.45rem; border-radius: 4px; vertical-align: middle; }
.tile.is-owned .cover { opacity: 0.92; }
.tile-bundle .cover { box-shadow: 0 6px 18px -8px var(--shadow), 6px 6px 0 -2px var(--surface), 12px 12px 0 -4px var(--surface); }
.details-price { margin: 0.75rem 0 0; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.details-price .price { font-size: 1.15rem; }
.store-actions { display: inline-flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.store-actions .button { padding: 0.55rem 1.1rem; }
/* The Share button (2026-10-12): the arrow-out-of-a-tray icon beside the word. */
.share-button { gap: 0.4rem; }
.share-icon { width: 1em; height: 1em; flex: none; }
.button.is-added { background: var(--surface); color: var(--text); border: 1px solid var(--accent); }
.store-status { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--dim); flex: 1 1 100%; }
.store-status.is-error { color: #e07a6a; }
.bundle-includes { margin: 0.75rem 0 0.25rem; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.bundle-books { margin: 0 0 0.75rem; padding-left: 1.1rem; }
.bundle-books li { margin: 0.2rem 0; }
.bundle-offer { margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; }
.bundle-own { font-weight: 600; }
.price-explained { color: var(--dim); font-size: 0.85rem; max-width: 70ch; margin: 0 0 1rem; }

/* The cart page */
.cart-page { max-width: 760px; }
.cart-line { display: grid; grid-template-columns: 72px 1fr auto auto; gap: 0.5rem 1rem; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--surface); }
.cart-cover { width: 72px; height: 72px; border-radius: 6px; background: var(--surface); object-fit: cover; display: block; }
.cart-text { display: flex; flex-direction: column; min-width: 0; }
.cart-title { font-weight: 600; text-decoration: none; }
.cart-title:hover { text-decoration: underline; }
.cart-remove { font-size: 0.85rem; color: var(--dim); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.15rem; font-weight: 600; margin: 1.25rem 0 0.5rem; }
.cart-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.cart-status { min-height: 1.5rem; color: var(--dim); }
.cart-status.is-error { color: #e07a6a; }
@media (max-width: 480px) { .cart-line { grid-template-columns: 56px 1fr; } .cart-cover { width: 56px; height: 56px; } .cart-line .price, .cart-remove { grid-column: 2; justify-self: start; } }

/* The account's books and purchases */
.listen-line { font-size: 0.8rem; color: var(--dim); }
.purchase-banner, .new-account-notice, .email-changed-notice, .find-done, .refund-sent-notice { background: var(--surface); border-left: 4px solid var(--accent); padding: 0.6rem 0.9rem; border-radius: 6px; }
/* Account recovery (2026-10-17): the finder's five boxes on /help, the change-email form on /account. */
.find-form input { max-width: 420px; }
.find-line { margin-top: 0.25rem; }
.change-email-form .hint { margin: 0; }
.account-purchases { list-style: none; margin: 0; padding: 0; }
.purchase { padding: 0.75rem 0; border-bottom: 1px solid var(--surface); }
.purchase-head { margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; align-items: baseline; }
.purchase-total { font-weight: 600; }
.purchase-tax, .purchase-id, .purchase-test { font-size: 0.85rem; color: var(--dim); }
.purchase-refunded { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #e07a6a; font-weight: 700; }
.purchase-lines { margin: 0.35rem 0 0; padding-left: 1.1rem; font-size: 0.95rem; }
.purchase-lines li.is-refunded { color: var(--dim); text-decoration: line-through; }
.purchase-line-amount { color: var(--dim); }

/* Finding books (2026-10-12): the filter bar above the shelves, the results heading, the editor's
   pick strip, the You might like shelf and the flag on the pick's tile, the linked chips. */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; align-items: flex-end; margin: 0 0 1.75rem; padding: 0.9rem 1rem; background: var(--surface); border-radius: 12px; }
.filter-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.filter-search { flex: 1 1 220px; }
.filter-label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.filter-bar input, .filter-bar select { font: inherit; padding: 0.5rem 0.7rem; border-radius: 8px; border: 1px solid var(--dim); background: var(--bg); color: var(--text); max-width: 100%; }
.filter-bar select { max-width: 14rem; }
.filter-show { padding: 0.5rem 1rem; }
.filter-clear { font-size: 0.9rem; align-self: center; padding-bottom: 0.4rem; }
/* The category tiles under the filter bar (discover.js renderCategoryTiles,
   category-art.js; 2026-10-13): one row that scrolls sideways, each tile the
   category's Phosphor icon lit in the accent on the surface with a soft halo
   behind it, the name at the foot. The shown category's tile is outlined. */
.category-tiles { margin: -1rem 0 1.75rem; }
.category-row { list-style: none; margin: 0; padding: 0.25rem 0 0.6rem; display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.category-row li { flex: 0 0 auto; scroll-snap-align: start; }
.category-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 10.5rem; height: 6.4rem; padding: 0.7rem 0.85rem; border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; overflow: hidden; border: 1px solid transparent; transition: border-color 0.15s, transform 0.15s; }
.category-tile::before { content: ""; position: absolute; right: -1.6rem; top: -1.6rem; width: 8.4rem; height: 8.4rem; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent); pointer-events: none; }
.category-icon { color: var(--accent); }
.category-tile .category-icon { position: absolute; right: 0.55rem; top: 0.5rem; width: 3.5rem; height: 3.5rem; }
.category-icon-plate { opacity: 0.22; }
.category-name { position: relative; font-weight: 600; font-size: 0.92rem; line-height: 1.2; max-width: 6.4rem; }
.category-tile:hover, .category-tile:focus-visible { border-color: var(--accent); transform: translateY(-1px); }
.category-tile.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
@media (max-width: 600px) { .category-tile { width: 8.6rem; height: 5.5rem; padding: 0.6rem 0.7rem; } .category-tile .category-icon { width: 3rem; height: 3rem; } .category-name { font-size: 0.85rem; } }

.filter-heading { font-size: 1.5rem; line-height: 1.2; margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; }
.filter-count { font-size: 0.9rem; color: var(--dim); font-weight: 400; }
.editors-pick { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 1rem 1.5rem; align-items: center; margin: 0 0 2.5rem; padding: 1.25rem; border: 1px solid var(--accent); border-radius: 12px; }
.pick-cover { display: block; text-decoration: none; }
.pick-cover .cover { box-shadow: 0 12px 24px -12px var(--shadow); }
.pick-label, .pick-flag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.pick-label { margin: 0 0 0.25rem; color: var(--accent); }
.pick-title { margin: 0; font-size: 1.4rem; line-height: 1.2; }
.pick-title a { text-decoration: none; }
.pick-title a:hover { text-decoration: underline; }
.pick-by { margin: 0.15rem 0 0; color: var(--dim); }
.pick-rating { margin: 0.35rem 0 0; }
.pick-note { margin: 0.75rem 0 0; padding: 0 0 0 0.9rem; border-left: 3px solid var(--accent); font-style: italic; max-width: 60ch; }
.pick-note p { margin: 0; }
.pick-actions { margin: 1rem 0 0; }
@media (max-width: 560px) { .editors-pick { grid-template-columns: 1fr; } .pick-cover { max-width: 200px; } }
.pick-flag { position: absolute; z-index: 2; top: 0.6rem; left: -0.35rem; background: var(--accent); color: var(--on-accent); padding: 0.25rem 0.6rem; border-radius: 0 4px 4px 0; box-shadow: 0 2px 6px var(--shadow); pointer-events: none; }
.start-here ~ .pick-flag { top: 2.5rem; }
.shelf-suggest { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--surface); }
.suggest-slot { margin-top: 1.5rem; }
.author-link, .series-link { color: inherit; }
a.chip { text-decoration: none; }
a.chip:hover, a.chip:focus-visible { border-color: var(--text); color: var(--text); }

/* The discount box on the cart page (2026-10-12): the code and Apply, the applied line, the
   total before the code struck through beside the total after it. */
.discount-form { display: flex; flex-direction: column; gap: 0.35rem; margin: 1.25rem 0 0; max-width: 420px; }
.discount-form label { font-size: 0.85rem; color: var(--dim); }
.discount-row { display: flex; gap: 0.5rem; }
.discount-row input { flex: 1 1 10rem; min-width: 0; font: inherit; padding: 0.55rem 0.8rem; border-radius: 8px; border: 1px solid var(--dim); background: var(--surface); color: var(--text); text-transform: uppercase; }
.discount-row .button { padding: 0.55rem 1rem; }
.discount-status { min-height: 1.2rem; font-size: 0.9rem; color: var(--dim); }
.discount-status.is-error { color: #e07a6a; }
.cart-discount { margin: 0.75rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: baseline; font-size: 0.95rem; }
/* display: flex would beat the hidden attribute's own display: none, so say it. */
.cart-discount[hidden] { display: none; }
.discount-code { font-weight: 700; letter-spacing: 0.04em; }
.cart-total-amounts { display: inline-flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; justify-content: flex-end; }
.price-before { color: var(--dim); font-weight: 400; }
.price-before[hidden] { display: none; }
.purchase-discount { font-size: 0.85rem; color: var(--dim); }

/* The badges (2026-10-12): NEW RELEASE and ON SALE as a sash across the cover's top-right
   corner, a square overlay clipping a rotated band so the cover underneath still tilts and
   grows; a slow sheen crosses the band every few seconds (none under reduced motion, the rule
   above). A sale wears the full-cast red, a new release the accent gold. The band's centre is
   pinned to the square's diagonal (its top-right corner at 2.5rem from each edge, then pulled
   back by half its own size before the turn), so the text sits dead centre on the visible band
   whatever the band's width; the text-indent balances the last letter's spacing (2026-10-14).
   The struck-through price beside a sale price. */
.sash { position: absolute; z-index: 2; top: 0; right: 0; width: 7.5rem; height: 7.5rem; overflow: hidden; pointer-events: none; border-top-right-radius: 6px; }
.sash > span { position: absolute; top: 2.5rem; right: 2.5rem; width: 10.5rem; transform: translate(50%, -50%) rotate(45deg); text-align: center; text-indent: 0.16em; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; padding: 0.32rem 0; box-shadow: 0 2px 6px var(--shadow); background: linear-gradient(100deg, var(--accent) 0%, var(--accent) 38%, #fbe7a6 50%, var(--accent) 62%, var(--accent) 100%); background-size: 260% 100%; background-position: 100% 0; color: var(--on-accent); animation: sheen 7s ease-in-out infinite; }
.sash-best > span { background-image: linear-gradient(100deg, #1d1d1d 0%, #1d1d1d 38%, #4a4a4a 50%, #1d1d1d 62%, #1d1d1d 100%); color: #e8b44a; }
.sash-coming > span { background-image: linear-gradient(100deg, #2f5d8a 0%, #2f5d8a 38%, #9cc4ea 50%, #2f5d8a 62%, #2f5d8a 100%); color: #fff; }
.sash-sale > span { background-image: linear-gradient(100deg, #c7414f 0%, #c7414f 38%, #f0929b 50%, #c7414f 62%, #c7414f 100%); color: #fff; }
@keyframes sheen { 0%, 72% { background-position: 100% 0; } 100% { background-position: -40% 0; } }
.was { text-decoration: line-through; color: var(--dim); }
.price-was { font-weight: 400; font-size: 0.85rem; }
.price-sale { color: #c7414f; }
:root[data-theme="light"] .price-sale { color: #8b1e2d; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .price-sale { color: #8b1e2d; } }
.deal-badge { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.1rem 0.5rem; border-radius: 4px; vertical-align: middle; }
.deal-new { background: var(--accent); color: var(--on-accent); }
.deal-sale { background: #c7414f; color: #fff; }
.deal-coming { background: #2f5d8a; color: #fff; }
.deal-best { background: #1d1d1d; color: #e8b44a; }
/* ONLY HERE (2026-10-21): a supporting fact, so outlined and quiet like the BUNDLE pill. The
   accent is the border only, never the text, which keeps 4.5:1 on cream (the header's rule). */
.deal-only { background: transparent; color: var(--text); border: 1px solid var(--accent); padding: calc(0.1rem - 1px) calc(0.5rem - 1px); }
/* The tagline (2026-10-12): one italic line under the title, on the tile and in the details. */
.tile-tagline { display: block; font-size: 0.82rem; font-style: italic; color: var(--dim); line-height: 1.3; margin: 0.1rem 0 0.15rem; }
.details-tagline { font-style: italic; font-size: 1.05rem; margin: 0.15rem 0 0.5rem; color: var(--text); }
/* The best sellers' shelf at the top of the front page (2026-10-12). */
.shelf-best { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--surface); }
/* "Tell me when it lands" (2026-10-12): the form in place of the store's buttons. */
.notify-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; }
.notify-email { font: inherit; padding: 0.5rem 0.8rem; border: 1px solid var(--dim); border-radius: 999px; background: var(--surface); color: var(--text); min-width: 14rem; }
.notify-hint { flex: 1 1 100%; font-size: 0.8rem; color: var(--dim); }
.notify-done { margin: 0; font-weight: 600; }

/* The newsletter box (src/site/subscribe.js): the footer's, full width above
   the small print in the page's own colour; a book page's under the reviews. */
.signup { color: var(--text); font-size: 1rem; }
.signup-footer { flex: 1 1 100%; padding-bottom: 1.25rem; border-bottom: 1px solid var(--surface); }
.signup-book { margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--surface); }
.signup-heading { margin: 0 0 0.6rem; font-size: 1.15rem; font-weight: 600; }
.signup-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; }
.signup-email { font: inherit; padding: 0.5rem 0.8rem; border: 1px solid var(--dim); border-radius: 999px; background: var(--surface); color: var(--text); min-width: 14rem; flex: 1 1 14rem; max-width: 24rem; }
.signup-hint { flex: 1 1 100%; font-size: 0.8rem; color: var(--dim); }
.signup-hint[role="alert"] { color: var(--text); }
.signup-done { margin: 0; font-weight: 600; }

/* Why buy here (sections.js whyBuy, 2026-10-14): the hero under the caption and the three points. */
.why-buy { margin: 1.4rem auto 2.2rem; max-width: 62rem; text-align: center; }
.why-buy-hero { font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 1.45rem; line-height: 1.3; letter-spacing: 0.01em; margin: 0 0 1.1rem; }
.why-buy-points { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.7rem 2rem; text-align: left; }
.why-buy-points li { position: relative; padding-left: 1.3rem; line-height: 1.45; }
.why-buy-points li::before { content: ""; position: absolute; left: 0; top: 0.5rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); }
.why-buy-note { color: var(--dim); font-size: 0.92rem; margin: 1.1rem 0 0; }
/* The box on the front page (2026-10-14): folds to its head on a click; html[data-why-buy="closed"] is set by theme.js before paint and by site.js on the click. */
.why-buy-box { padding: 1rem 1.25rem 1.2rem; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 14px; }
.why-buy-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1rem; cursor: pointer; }
.why-buy-box .why-buy-hero { margin: 0; }
.why-buy-toggle { flex: 0 0 auto; background: none; border: 1px solid var(--dim); color: var(--dim); border-radius: 999px; padding: 0.2rem 0.75rem; font: inherit; font-size: 0.8rem; cursor: pointer; }
.why-buy-head:hover .why-buy-toggle { color: var(--text); border-color: var(--accent); }
.why-buy-body { margin-top: 1.1rem; }
html[data-why-buy="closed"] .why-buy-body { display: none; }
html[data-why-buy="closed"] .why-buy-box { padding: 0.55rem 1rem; }
html[data-why-buy="closed"] .why-buy-box .why-buy-hero { font-size: 1.05rem; }
.why-buy-compact { text-align: left; margin: 1.1rem 0 0; padding: 0.9rem 1rem; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 8px; max-width: none; }
.why-buy-compact .why-buy-hero { font-size: 1.02rem; margin: 0 0 0.5rem; }
.why-buy-compact .why-buy-points { display: block; }
.why-buy-compact .why-buy-points li { margin: 0.25rem 0; font-size: 0.95rem; }
@media (max-width: 620px) { .why-buy-hero { font-size: 1.25rem; } .why-buy { margin-top: 1rem; } }

/* The review form on a book's page (site/review.js, 2026-10-17). */
.review-form-section { margin: 2rem 0; }
.review-form textarea { font: inherit; padding: 0.7rem 0.9rem; border-radius: 8px; border: 1px solid var(--dim); background: var(--surface); color: var(--text); }
.rating-pick { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.rating-pick legend { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.3rem; }
.rating-option { font-weight: 400; }
.review-state { margin: 0.5rem 0 0.8rem; }
.review-problems { margin: 0 0 1rem; padding-left: 1.2rem; }

/* The podcast's apps on its own page (site/podcast-apps.js, 2026-10-18). */
.podcast-apps { margin: 1.5rem 0; }
.podcast-apps h2 { margin: 0 0 0.75rem; font-size: 1.1rem; }
.podcast-app-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.podcast-app { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.85rem 0.45rem 0.5rem; border-radius: 999px; background: var(--surface); color: var(--text); text-decoration: none; font-size: 0.92rem; border: 1px solid transparent; }
.podcast-app:hover { border-color: var(--accent); }
.podcast-app.pending { opacity: 0.75; }
.podcast-app small { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }

/* A claim-only title (claim-note.js, claim.js; 2026-10-18). */
.claim-note { margin: 1.5rem 0; padding: 1rem 1.25rem; background: var(--surface); border-radius: 12px; }
.claim-note h2 { margin: 0 0 0.4rem; font-size: 1.1rem; }
.claim-cover { display: block; width: 200px; height: 200px; border-radius: 10px; margin: 1rem 0; }

/* The Android "get the app" strip (src/site/app-banner.js, 2026-10-22): one slim row above the
   header, the app icon, its name and line, Get, and a close button. */
.app-banner { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; background: var(--surface); color: var(--text); font-size: 0.85rem; border-bottom: 1px solid var(--surface); }
.app-banner[hidden] { display: none; }
.app-banner-icon { width: 2.25rem; height: 2.25rem; border-radius: 0.55rem; flex: none; }
.app-banner-text { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.app-banner-text strong { display: block; }
.app-banner-text span { color: var(--dim); }
.app-banner-get { flex: none; padding: 0.35rem 1rem; }
.app-banner-close { flex: none; background: none; border: 0; color: var(--dim); font-size: 1.4rem; line-height: 1; width: 44px; height: 44px; cursor: pointer; }