/* Lost Books. Colours are tokens; the dark palette below is all it takes to
   restyle the shop. System fonts only: no request leaves for a font host. */

:root {
  color-scheme: light dark;
  --paper: #f7f2e8;
  --paper-raised: #fffdf8;
  --paper-sunk: #efe7d6;
  --ink: #2a211b;
  --ink-soft: #5b4d40;
  --rule: #d9cdb6;
  --accent: #7b2d26;
  --accent-hover: #5f201b;
  --on-accent: #fffdf8;
  --gold: #9a7b3f;
  --success: #2f5d3a;
  --danger: #9b1c1c;
  --focus: #7b2d26;
  --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius: 6px;
  --shadow: 0 1px 2px rgb(42 33 27 / 0.08), 0 4px 16px rgb(42 33 27 / 0.06);
  --page: 1200px;
  --gutter: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1b1612;
    --paper-raised: #241d17;
    --paper-sunk: #15110e;
    --ink: #efe6d6;
    --ink-soft: #c2b49e;
    --rule: #3d3229;
    --accent: #e3a682;
    --accent-hover: #f0bd9e;
    --on-accent: #1b1612;
    --gold: #c9a466;
    --success: #8cc79a;
    --danger: #f19b9b;
    --focus: #e3a682;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4);
  }
}

@media (min-width: 768px) {
  :root { --gutter: 24px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 var(--font-ui);
}
main { flex: 1; outline: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.15; margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
img { max-width: 100%; }

.container { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.page { padding-block: 32px 64px; }
.narrow { max-width: 760px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 40; padding: 8px 16px;
  background: var(--accent); color: var(--on-accent); border-radius: var(--radius); text-decoration: none;
}
.skip-link:focus { top: 8px; color: var(--on-accent); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 10px 20px; border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--accent); color: var(--on-accent); font: 600 1rem/1.2 var(--font-ui);
  text-decoration: none; cursor: pointer;
}
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.button:disabled { opacity: 0.55; cursor: not-allowed; }
.button.secondary { background: transparent; color: var(--accent); }
.button.secondary:hover { background: var(--paper-sunk); color: var(--accent-hover); }
.link-button {
  padding: 4px 0; border: 0; background: none; color: var(--accent); font: inherit;
  text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer;
}
.eyebrow { margin: 0 0 4px; color: var(--ink-soft); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; }
.lead { max-width: 62ch; font: 1.25rem/1.5 var(--font-display); color: var(--ink-soft); }
.panel { padding: 20px; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); }
.notice { margin: 0; padding: 12px 16px; border-left: 4px solid var(--gold); background: var(--paper-sunk); border-radius: 0 var(--radius) var(--radius) 0; }
.error-text { color: var(--danger); }
/* "This is a demo, not a real bookshop": on the front page and the checkout,
   in the accent colour so it can't be taken for part of the shop. */
.demo-notice { margin: 16px 0; padding: 14px 18px; border: 2px solid var(--accent); border-radius: var(--radius); background: var(--paper-raised); }
.demo-notice h2 { margin: 0 0 4px; font: 600 1.05rem/1.3 var(--font-ui); color: var(--accent); }
.demo-notice p { margin: 0; max-width: 75ch; }
.hint, .small, .note { color: var(--ink-soft); font-size: 0.9375rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }

/* header — stays in view while scrolling (the catalogue is one long list).
   On a phone only the brand row scrolls away: `top` is minus that row's
   height (12px padding + 32px mark + 4px gap), so the menu with the cart
   and the search box stick. site.js publishes the part that stays visible
   as --header-h; scroll-padding keeps focused elements out from under it. */
.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--rule); background: var(--paper-raised); }
html { scroll-padding-top: calc(var(--covered-h, var(--header-h, 0px)) + 8px); }

/* Where the browser supports scroll-driven animations: a shadow lifts the
   header off the page as it starts to scroll, and on a phone the brand row
   drifts away more slowly than the page (a little parallax) as it fades. */
@supports (animation-timeline: scroll()) {
  .site-header { animation: header-lift linear both; animation-timeline: scroll(root); animation-range: 0 64px; }
  @keyframes header-lift { to { border-bottom-color: transparent; box-shadow: var(--shadow); } }
  @media (max-width: 599px) and (prefers-reduced-motion: no-preference) {
    .brand { animation: brand-drift linear both; animation-timeline: scroll(root); animation-range: 0 48px; }
    @keyframes brand-drift { to { opacity: 0; transform: translateY(20px); } }
  }
}
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-block: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand .mark { fill: var(--accent); }
.brand .page { fill: var(--paper-raised); }
.brand .name { font: 600 1.6rem/1 var(--font-display); }
.search { display: flex; flex: 1 1 280px; order: 3; max-width: 520px; }
.search-box { position: relative; display: flex; flex: 1; min-width: 0; }
.search input {
  flex: 1; width: 100%; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--ink-soft);
  border-right: 0; border-radius: var(--radius) 0 0 var(--radius); background: var(--paper); color: var(--ink); font: inherit;
}
.search .button { border-radius: 0 var(--radius) var(--radius) 0; }

/* search suggestions: the ARIA listbox under the search box */
.suggestions {
  position: absolute; top: calc(100% + 4px); left: 0; right: -1px; z-index: 20; max-height: 70vh; overflow-y: auto;
  padding: 6px 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-raised); box-shadow: var(--shadow);
}
.suggestions[hidden] { display: none; }
.sugg-heading { margin: 6px 12px 2px; font: 700 0.75rem/1.2 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.sugg { display: grid; gap: 1px; padding: 8px 12px; color: var(--ink); text-decoration: none; }
.sugg:hover, .sugg[aria-selected="true"] { background: var(--paper-sunk); color: var(--accent); }
.sugg[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--accent); }
.sugg-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sugg-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); font-size: 0.875rem; }
.sugg-all { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--rule); font-weight: 600; }
.main-nav { margin-left: auto; }
.main-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.main-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); text-decoration: none; }
.main-nav a:hover, .main-nav a[aria-current] { color: var(--accent); text-decoration: underline; }
.cart svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
/* The language menu: a <details> that opens a short list under its globe. */
.lang-menu { position: relative; }
.lang-menu summary {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 2px;
  color: var(--ink); cursor: pointer; list-style: none;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu details[open] summary { color: var(--accent); }
.lang-menu summary svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.lang-code { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; }
.lang-menu details ul {
  position: absolute; right: 0; top: 100%; z-index: 30; display: block; min-width: 10rem;
  margin: 4px 0 0; padding: 6px; list-style: none;
  background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
}
.lang-menu details ul a { display: flex; min-height: 40px; padding: 0 10px; border-radius: calc(var(--radius) - 2px); }
.lang-menu details ul a:hover { background: var(--paper-sunk); text-decoration: none; }
.lang-menu details ul a[aria-current] { font-weight: 600; text-decoration: none; }
/* Under the header: the page in the visitor's own language (static/site.js). */
.lang-offer {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; padding: 6px 16px;
  background: var(--paper-sunk); border-bottom: 1px solid var(--rule); font-size: 0.9375rem;
}
.lang-offer a { color: var(--accent); font-weight: 600; }
.lang-offer-close {
  min-width: 44px; min-height: 44px; margin: -6px 0; border: 0; background: none;
  color: var(--ink-soft); font-size: 1.25rem; cursor: pointer;
}
.lang-offer-close:hover { color: var(--ink); }
#cart-badge .count {
  min-width: 22px; padding: 1px 6px; border-radius: 11px; background: var(--accent); color: var(--on-accent);
  font-size: 0.8125rem; font-weight: 700; text-align: center;
}
@media (min-width: 1000px) { .search { order: 0; } }
@media (max-width: 599px) {
  .site-header { top: -48px; }
  .bar { gap: 4px 16px; }
  .brand .name { font-size: 1.4rem; }
  .main-nav { width: 100%; margin-left: 0; }
  .main-nav ul { justify-content: space-between; gap: 0 12px; flex-wrap: nowrap; }
  .main-nav a { font-size: 0.9375rem; }
  .cart-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .search { flex-basis: 100%; max-width: none; margin-bottom: 4px; }
}

/* footer */
.site-footer { margin-top: auto; padding-block: 40px 24px; border-top: 1px solid var(--rule); background: var(--paper-sunk); color: var(--ink-soft); font-size: 0.9375rem; }
.site-footer .cols { display: grid; gap: 24px 40px; }
@media (min-width: 768px) { .site-footer .cols { grid-template-columns: 1.2fr 2fr 1fr; } }
.site-footer .heading { margin-bottom: 8px; color: var(--ink); font-size: 1.25rem; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li a { display: inline-block; padding-block: 4px; color: var(--ink-soft); }
.site-footer .categories { columns: 2; column-gap: 24px; }
.site-footer .small { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 0.875rem; }
.site-footer .small p { margin: 0 0 4px; }

/* home */
.hero {
  padding-block: 56px 48px; border-bottom: 1px solid var(--rule);
  background: radial-gradient(ellipse at 85% 0%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 60%), var(--paper-sunk);
}
.hero h1 { max-width: 16ch; }
section + section { margin-top: 56px; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 20px; }
.section-head h2 { margin: 0; }
.category-tiles ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.category-tiles a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 16px;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-raised); color: var(--ink); text-decoration: none;
}
.category-tiles a:hover { border-color: var(--accent); color: var(--accent); }
.category-tiles .label { font: 500 1.15rem/1.2 var(--font-display); }
.category-tiles .count { color: var(--ink-soft); font-size: 0.875rem; white-space: nowrap; }

/* book cards */
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 20px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .book-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
.card { display: flex; flex-direction: column; height: 100%; }
.card .cover {
  position: relative; display: block; aspect-ratio: 2 / 3; margin-bottom: 10px; overflow: hidden;
  border-radius: 3px; background: var(--paper-sunk); box-shadow: var(--shadow);
}
.card .cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.card .cover:hover img { transform: scale(1.03); }
.ribbon {
  position: absolute; top: 10px; left: 0; padding: 2px 10px; background: var(--ink); color: var(--paper);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
/* Every line of a card has a fixed height (two for the title, one each for
   the rest), so all cards are equally tall: the virtual list computes where
   any row is from that one height. */
.card .title { height: 2.5em; margin: 0 0 2px; overflow: hidden; font-size: 1.125rem; line-height: 1.25; }
.card .title a {
  color: var(--ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card .title a:hover { color: var(--accent); text-decoration: underline; }
.card p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .author { color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.4; }
.card .meta { color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.4; margin-top: 2px; }
.card .price { margin-top: auto; padding-top: 6px; font-weight: 700; line-height: 1.4; }
.card .sold { color: var(--ink-soft); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .card .cover img { transition: none; } }

/* catalogue */
.catalogue { display: grid; gap: 32px; }
@media (min-width: 900px) { .catalogue { grid-template-columns: 220px 1fr; gap: 48px; } }
/* The filters come first, on a phone too: below a virtual list of hundreds of
   books they'd be out of reach. */
.catalogue aside { order: 0; min-width: 0; }
/* The list's heading stays under the header, on every screen, and shrinks
   once the page scrolls (static/site.js sets .page-scrolled where the header
   lifts). The script publishes its height as --results-h for what sticks
   under it. */
.catalogue #results-heading {
  position: sticky; top: var(--header-h, 0px); z-index: 6; margin-bottom: 0; padding-block: 4px 0.4em;
  background: var(--paper); transition: font-size 0.2s ease, padding 0.2s ease;
}
.page-scrolled .catalogue #results-heading { font-size: 1.35rem; padding-block: 8px; }
@media (prefers-reduced-motion: reduce) { .catalogue #results-heading { transition: none; } }
/* A wide screen keeps the frame still and moves only the books: the subjects
   and filters stay beside the list under the header (scrolling on their own
   when taller than the screen), and so do the count and the sort order. The
   page itself still scrolls -- the virtual list (static/site.js) follows the
   window, and the back button comes back to the same place. A phone has them
   above the list (below); the gallery layout has them across the top. */
@media (min-width: 900px) {
  :root:not([data-layout='gallery']) .catalogue aside {
    position: sticky; top: calc(var(--header-h, 0px) + 16px); align-self: start;
    max-height: calc(100vh - var(--header-h, 0px) - 32px); overflow-y: auto; overscroll-behavior: contain;
    padding-right: 8px; scrollbar-width: thin; scrollbar-gutter: stable;
    /* The scrollbar shows only while the filters scroll (static/site.js
       sets .is-scrolling); its room is kept, so nothing shifts. */
    scrollbar-color: transparent transparent;
  }
  :root:not([data-layout='gallery']) .catalogue aside.is-scrolling { scrollbar-color: var(--ink-soft) transparent; }
  .catalogue .toolbar {
    position: sticky; top: calc(var(--header-h, 0px) + var(--results-h, 0px)); z-index: 5; background: var(--paper);
  }
  /* The list's header -- heading, intro, count and sort -- stands in a little
     from the books, so it reads as a header and not as the first row. */
  .catalogue #results-heading, .catalogue .intro, .catalogue .asked,
  .catalogue .asked-also, .catalogue .toolbar { padding-inline: 16px; }
  /* Closer together beside the list, so more of them fit (a phone, with the
     filters below the list, keeps the larger targets). */
  .catalogue .filters a { padding-block: 3px; }
  .catalogue .filter-heading { margin-top: 18px; }
}
.filter-heading { margin: 24px 0 6px; font: 700 0.8125rem/1.2 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.filter-heading:first-child { margin-top: 0; }
.filters { margin: 0; padding: 0; list-style: none; }
.filters a {
  display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; margin-inline: -8px;
  border-radius: var(--radius); color: var(--ink); text-decoration: none;
}
.filters a:hover, .filters a[aria-current] { background: var(--paper-sunk); color: var(--accent); }
.filters a[aria-current] { font-weight: 700; }
.filters .n { color: var(--ink-soft); font-size: 0.875rem; font-weight: 400; }
/* Past the subjects: part of the column as it is on a wide screen (and
   without the script); on a phone folded behind "More filters". */
.more-filters { display: contents; }
.more-filters-toggle { display: none; }
@media (max-width: 899px) {
  /* The subjects: one row of chips to swipe, the current one marked (and
     scrolled into view, static/site.js). */
  :root:not([data-layout='gallery']) .subjects {
    display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none;
    scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  }
  :root:not([data-layout='gallery']) .subjects li { flex: none; scroll-snap-align: start; }
  :root:not([data-layout='gallery']) .subjects a,
  :root:not([data-layout='gallery']) .more-filters .filters a {
    gap: 6px; margin: 0; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px;
    background: var(--paper-raised); white-space: nowrap;
  }
  :root:not([data-layout='gallery']) .subjects a[aria-current],
  :root:not([data-layout='gallery']) .more-filters .filters a[aria-current] {
    border-color: var(--accent); background: var(--accent); color: var(--on-accent);
  }
  :root:not([data-layout='gallery']) .subjects a[aria-current] .n { color: inherit; }
  :root:not([data-layout='gallery']) .more-filters .filters { display: flex; flex-wrap: wrap; gap: 6px; }
  :root:not([data-layout='gallery']) .more-filters .filter-heading:first-child { margin-top: 16px; }
  .js-filters:not([data-layout='gallery']) .more-filters-toggle {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-top: 10px; padding: 6px 14px;
    border: 1px solid var(--ink-soft); border-radius: 999px; background: none; color: var(--ink); font: inherit; cursor: pointer;
  }
  .js-filters:not([data-layout='gallery']) .more-filters-toggle::after { content: '▾'; }
  .js-filters:not([data-layout='gallery']) .more-filters-toggle[aria-expanded='true']::after { content: '▴'; }
  .js-filters:not([data-layout='gallery']) .more-filters { display: none; }
  .js-filters:not([data-layout='gallery']) .catalogue aside.filters-open .more-filters { display: block; }
}
.intro { max-width: 65ch; margin-top: -4px; color: var(--ink-soft); font: 1.15rem/1.5 var(--font-display); }
/* a question read as filters (src/ask.rs) */
.asked { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0; }
.asked-label, .asked-also { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; }
.asked-also { margin-top: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--paper-raised);
  color: var(--ink); font-size: 0.9375rem; text-decoration: none;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip span { color: var(--ink-soft); font-size: 1.1em; line-height: 1; }
.chip:hover span { color: inherit; }
.toolbar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  margin: 16px 0 24px; padding-block: 12px; border-block: 1px solid var(--rule);
}
.total { margin: 0; font-weight: 600; }
.sort { display: flex; align-items: center; gap: 8px; }
.sort select, .field select, .field input, .field textarea {
  min-height: 44px; padding: 6px 10px; border: 1px solid var(--ink-soft); border-radius: var(--radius);
  background: var(--paper-raised); color: var(--ink); font: inherit;
}
.empty { display: grid; justify-items: start; gap: 12px; max-width: 60ch; }
.empty p { margin: 0; }

/* The virtual list (static/site.js). --cols must divide the chunk size (60),
   so a chunk always fills whole rows: 2, 3, 4 or 5. The script reads --cols
   and --row-gap back. Without the script (no .vlist-on) the one server-
   rendered chunk is an ordinary grid with previous/next links under it. */
.vlist { --cols: 2; --row-gap: 28px; position: relative; }
@media (min-width: 480px) { .vlist { --cols: 3; } }
@media (min-width: 640px) { .vlist { --cols: 4; } }
@media (min-width: 900px) { .vlist { --cols: 3; } }
@media (min-width: 1100px) { .vlist { --cols: 4; } }
.vlist-chunk { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--row-gap) 20px; }
.vlist-on .vlist-chunk { position: absolute; left: 0; right: 0; }
.vlist-on .vlist-pager { display: none; }
.vlist-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; }
.vlist-pager a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none;
}
.vlist-pager a:hover { background: var(--paper-sunk); }
.vlist-pager a[rel="next"] { margin-left: auto; }

/* a book */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 24px; padding: 0; list-style: none; font-size: 0.9375rem; color: var(--ink-soft); }
.crumbs li + li::before { content: '›'; margin-right: 4px; }
.crumbs li[aria-current] { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book { display: grid; gap: 32px; }
@media (min-width: 768px) { .book { grid-template-columns: minmax(240px, 420px) 1fr; gap: 48px; } }
.book-cover {
  aspect-ratio: 2 / 3; align-self: start; overflow: hidden; border-radius: 4px;
  background: var(--paper-sunk); box-shadow: var(--shadow);
}
.book-cover img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 767px) { .book-cover { width: min(100%, 240px); justify-self: center; } }
@media (min-width: 768px) { .book-cover { position: sticky; top: 24px; } }
.book h1 { margin-bottom: 4px; }
.subtitle { margin: 0 0 8px; font: italic 1.3rem/1.35 var(--font-display); color: var(--ink-soft); }
.authors { margin: 0 0 24px; font: 1.25rem/1.4 var(--font-display); }
.buy { display: grid; gap: 12px; margin-bottom: 28px; }
.buy .price { margin: 0; font: 600 2rem/1 var(--font-display); }
.ships { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; }
.add-to-cart { margin: 0; }
.in-cart, .sold-note { margin: 0; font-weight: 600; }
.sold-note { color: var(--ink-soft); }
.facts { margin: 0 0 28px; }
.facts div { display: grid; grid-template-columns: 10rem 1fr; gap: 12px; padding-block: 10px; border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--ink-soft); }
.facts dd { margin: 0; }
.description p { max-width: 65ch; font: 1.15rem/1.6 var(--font-display); white-space: pre-line; }
.small-heading { font-size: 1.25rem; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tags a {
  display: inline-block; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px;
  color: var(--ink); font-size: 0.875rem; text-decoration: none;
}
.tags a:hover { border-color: var(--accent); color: var(--accent); }
.related { margin-top: 64px; }

/* cart, checkout, order */
.cart-layout, .checkout-layout { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) {
  .cart-layout { grid-template-columns: 1fr 340px; }
  .checkout-layout { grid-template-columns: 1fr 400px; }
}
.checkout-box, .address { display: grid; gap: 16px; }
.checkout-box .keep { justify-self: center; }
.address h2, .checkout-layout aside h2 { margin: 0; font-size: 1.5rem; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; }
.field [aria-invalid='true'] { border-color: var(--danger); }
.field p { margin: 0; }
.row { display: grid; gap: 16px; }
@media (min-width: 600px) { .row { grid-template-columns: 1fr 2fr; } }
.address .button { justify-self: start; }
form.notice { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: 16px; }
.lines { margin: 0; padding: 0; list-style: none; }
.lines li { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding-block: 14px; border-bottom: 1px solid var(--rule); }
.lines .gone .thumb, .lines .gone .title { opacity: 0.6; }
.thumb { display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 2px; background: var(--paper-sunk); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.what { display: grid; gap: 2px; min-width: 0; }
.what .title { color: var(--ink); font: 500 1.1rem/1.25 var(--font-display); text-decoration: none; }
.what .title:hover { color: var(--accent); text-decoration: underline; }
.by { color: var(--ink-soft); font-size: 0.875rem; }
.right { display: grid; justify-items: end; gap: 2px; }
.right form { margin: 0; }
.amount { font-weight: 700; white-space: nowrap; }
.totals { margin: 16px 0 0; }
.totals div { display: flex; justify-content: space-between; gap: 16px; padding-block: 6px; }
.totals dd { margin: 0; white-space: nowrap; }
.totals .note { display: block; font-size: 0.875rem; }
.totals .grand { margin-top: 6px; padding-top: 10px; border-top: 2px solid var(--ink); font: 600 1.35rem/1.2 var(--font-display); }
.totals .discount dd { color: var(--success); }
.totals .discount .error-text { color: var(--danger); }
.hint { margin: 8px 0 0; }
p.hint:not(.field p) { color: var(--success); }
.coupon { margin: 0; }
.coupon .inline { display: flex; gap: 8px; }
.coupon .inline input { flex: 1; min-width: 0; text-transform: uppercase; }
.coupon p { margin: 0; }
.steps { margin: 0; padding-left: 1.25rem; display: grid; gap: 6px; }
section.panel { margin-block: 24px; }

/* shipping, about */
.table-wrap { overflow-x: auto; margin-block: 32px; }
.rates { width: 100%; min-width: 620px; border-collapse: collapse; background: var(--paper-raised); border: 1px solid var(--rule); }
.rates th, .rates td { padding: 14px 16px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.rates thead th { background: var(--paper-sunk); font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; }
.rates tbody th { font: 500 1.15rem/1.3 var(--font-display); }
.rates .countries { display: block; max-width: 40ch; margin-top: 4px; color: var(--ink-soft); font: 0.8125rem/1.4 var(--font-ui); }
.rates .free { display: block; color: var(--success); font-size: 0.875rem; }
.notes ul { padding-left: 1.25rem; display: grid; gap: 6px; max-width: 70ch; }
.prose { max-width: 760px; }
.prose h2 { margin-top: 40px; }
.prose p, .prose dd { font: 1.15rem/1.6 var(--font-display); }
.prose dt { font-weight: 700; margin-top: 12px; }
.prose dd { margin: 2px 0 0; }
/* The Returns page (src/pages/returns.rs). */
.returns .terms { padding-left: 1.25rem; display: grid; gap: 8px; font: 1.05rem/1.55 var(--font-display); }
.return-form { margin-top: 32px; display: grid; gap: 12px; }
.return-form h2 { margin: 0; }
.return-form .notice { margin: 0; }
.return-books { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.return-book { display: grid; grid-template-columns: auto 40px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer; }
.return-book:has(input:checked) { border-color: var(--accent); background: var(--paper-sunk); }
.return-book input { width: 20px; height: 20px; }
.lines-plain { padding-left: 1.25rem; }
.address-block { padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--paper-sunk); }
.model-form { margin-top: 40px; }
.model-form summary { cursor: pointer; }
.model-form summary h2 { display: inline; margin: 0; }
.model-form .panel p { font: 1rem/1.55 var(--font-display); }

/* ============================================================================
   Layouts: four looks over the same HTML, switched in the header and set as
   `data-layout` on <html> (none = classic). Each redefines the colour tokens
   and restyles the same markup, so the cached pages serve every layout.

   The virtual list needs two things of each: every card in a layout equally
   tall, and a column count (--cols) that divides the chunk size, 60.
   ========================================================================= */

/* the switch: there from the first paint when JavaScript runs (`.js`, set
   in <head>), and the chosen layout marked from <html data-layout> -- never
   by site.js after the page is on screen, which would move the menu. */
.layout-switch {
  display: none; gap: 2px; order: 2; padding: 2px;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper);
}
.js .layout-switch { display: inline-flex; }
.layout-switch button {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: calc(var(--radius) - 2px); background: transparent; color: var(--ink-soft); cursor: pointer;
}
.layout-switch svg { fill: currentColor; }
.layout-switch [data-layout='modern'] svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.layout-switch button:hover { background: var(--paper-sunk); color: var(--ink); }
:root:not([data-layout]) .layout-switch [data-layout='classic'],
:root[data-layout='modern'] .layout-switch [data-layout='modern'],
:root[data-layout='gallery'] .layout-switch [data-layout='gallery'],
:root[data-layout='index'] .layout-switch [data-layout='index'] { background: var(--accent); color: var(--on-accent); }
@media (max-width: 599px) {
  /* Beside the brand, on a row no taller than it (the sticky header hides
     exactly that row, see .site-header). */
  .layout-switch { order: 0; margin-left: auto; padding: 0; }
  .layout-switch button { width: 30px; height: 30px; }
}

/* --- Modern: clean sans-serif, white rounded cards, follows light/dark ------ */
:root[data-layout='modern'] {
  --paper: #f6f7f9;
  --paper-raised: #ffffff;
  --paper-sunk: #eceef2;
  --ink: #111318;
  --ink-soft: #565c69;
  --rule: #e1e4ea;
  --accent: #1d4ed8;
  --accent-hover: #1e40af;
  --on-accent: #ffffff;
  --gold: #b45309;
  --success: #15803d;
  --danger: #b91c1c;
  --focus: #1d4ed8;
  --font-display: var(--font-ui);
  --radius: 12px;
  --shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 10px 28px -14px rgb(16 24 40 / 0.22);
}
@media (prefers-color-scheme: dark) {
  :root[data-layout='modern'] {
    --paper: #0f1115;
    --paper-raised: #171a21;
    --paper-sunk: #0b0d10;
    --ink: #eef0f4;
    --ink-soft: #a5abb8;
    --rule: #272b34;
    --accent: #84a9ff;
    --accent-hover: #a4c0ff;
    --on-accent: #0f1115;
    --gold: #f0b35a;
    --success: #86d39b;
    --danger: #f19b9b;
    --focus: #84a9ff;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.5);
  }
}
[data-layout='modern'] h1, [data-layout='modern'] h2, [data-layout='modern'] h3 { font-weight: 700; letter-spacing: -0.02em; }
[data-layout='modern'] .brand .name { font-weight: 800; letter-spacing: -0.03em; }
[data-layout='modern'] .site-header { background: color-mix(in srgb, var(--paper-raised) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); }
[data-layout='modern'] .button, [data-layout='modern'] .filters a { border-radius: 999px; }
[data-layout='modern'] .search input { border-radius: 999px 0 0 999px; padding-left: 18px; }
[data-layout='modern'] .search .button { border-radius: 0 999px 999px 0; }
[data-layout='modern'] .intro { font-family: var(--font-ui); font-size: 1.05rem; }
[data-layout='modern'] .card {
  padding: 10px; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-raised); box-shadow: var(--shadow);
}
[data-layout='modern'] .card .cover { border-radius: 8px; box-shadow: none; }
[data-layout='modern'] .card .title { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
[data-layout='modern'] .card .price { align-self: flex-start; margin-top: 8px; padding: 2px 10px; border-radius: 999px; background: var(--paper-sunk); font-size: 0.9375rem; }
[data-layout='modern'] .ribbon { top: 8px; left: 8px; border-radius: 999px; letter-spacing: 0.02em; }
[data-layout='modern'] .vlist { --row-gap: 20px; }

/* --- Gallery: dark, large framed covers, filters as a row of chips --------- */
:root[data-layout='gallery'] {
  color-scheme: dark;
  --paper: #121010;
  --paper-raised: #1b1816;
  --paper-sunk: #0c0a09;
  --ink: #f2ebdf;
  --ink-soft: #b3a690;
  --rule: #302a25;
  --accent: #d4af6a;
  --accent-hover: #e6c58a;
  --on-accent: #121010;
  --gold: #d4af6a;
  --success: #8cc79a;
  --danger: #f19b9b;
  --focus: #d4af6a;
  --shadow: 0 14px 30px -12px rgb(0 0 0 / 0.85);
}
[data-layout='gallery'] .brand .name { font-size: 1.2rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
[data-layout='gallery'] h1 { font-weight: 400; }
[data-layout='gallery'] .catalogue { grid-template-columns: minmax(0, 1fr); gap: 24px; }
[data-layout='gallery'] .catalogue aside {
  order: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 16px; align-items: baseline;
}
[data-layout='gallery'] .filter-heading { margin: 0; }
[data-layout='gallery'] .filters { display: flex; flex-wrap: wrap; gap: 6px; }
[data-layout='gallery'] .filters a {
  gap: 6px; margin: 0; padding: 4px 12px; border: 1px solid var(--rule); border-radius: 999px; font-size: 0.875rem;
}
[data-layout='gallery'] .filters a[aria-current] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
[data-layout='gallery'] .filters a[aria-current] .n { color: inherit; }
@media (max-width: 599px) {
  [data-layout='gallery'] .catalogue aside { grid-template-columns: minmax(0, 1fr); }
}
[data-layout='gallery'] .card { text-align: center; }
[data-layout='gallery'] .card .cover {
  margin-bottom: 14px; padding: 8px; border: 1px solid #3a322b; border-radius: 2px;
  background: #241f1b; box-shadow: var(--shadow);
}
[data-layout='gallery'] .card .cover img { border-radius: 1px; }
[data-layout='gallery'] .card .title { height: 1.3em; font-size: 1.05rem; line-height: 1.3; }
[data-layout='gallery'] .card .title a { -webkit-line-clamp: 1; }
[data-layout='gallery'] .card .meta { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
[data-layout='gallery'] .card .price { color: var(--accent); font-weight: 600; }
[data-layout='gallery'] .ribbon { top: auto; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--on-accent); }
[data-layout='gallery'] .vlist { --cols: 2; --row-gap: 44px; }
@media (min-width: 640px) { [data-layout='gallery'] .vlist { --cols: 3; } }
@media (min-width: 1000px) { [data-layout='gallery'] .vlist { --cols: 4; } }
[data-layout='gallery'] .vlist-chunk { column-gap: 28px; }
[data-layout='gallery'] .book-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 44px 28px; }

/* --- Card index: a library card catalogue, one card per row ---------------- */
:root[data-layout='index'] {
  color-scheme: light;
  --paper: #e6e0d2;
  --paper-raised: #fbf8f0;
  --paper-sunk: #ddd5c3;
  --ink: #1d2330;
  --ink-soft: #4a5262;
  --rule: #c8bfa9;
  --accent: #a2302a;
  --accent-hover: #82241f;
  --on-accent: #fbf8f0;
  --gold: #8a6d2f;
  --success: #2f5d3a;
  --danger: #9b1c1c;
  --focus: #a2302a;
  --font-mono: 'Courier New', Courier, ui-monospace, monospace;
  --radius: 3px;
  --shadow: 0 1px 0 rgb(29 35 48 / 0.08);
}
[data-layout='index'] .brand .name, [data-layout='index'] h1 { font-family: var(--font-mono); font-weight: 700; letter-spacing: -0.02em; }
[data-layout='index'] .filter-heading {
  display: inline-block; padding: 4px 10px; border-radius: 6px 6px 0 0;
  background: var(--paper-sunk); font-family: var(--font-mono); letter-spacing: 0;
}
/* Rows sized outright: the lines clip their overflow, and in a fixed-height
   card an auto row would then shrink to nothing. */
[data-layout='index'] .card {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-rows: 2.6rem 1.3rem 1.2rem 1fr;
  column-gap: 14px; height: 124px; padding: 10px 14px 10px 10px;
  border: 1px solid var(--rule); border-top: 3px solid var(--accent); border-radius: var(--radius);
  background: var(--paper-raised); box-shadow: var(--shadow);
}
[data-layout='index'] .card .cover {
  grid-row: 1 / -1; grid-column: 1; width: 64px; height: 96px; aspect-ratio: auto; margin: 0;
  border-radius: 2px; box-shadow: none;
}
[data-layout='index'] .card .title { grid-column: 2; grid-row: 1; height: 2.5em; margin: 0; font-size: 1rem; }
[data-layout='index'] .card .author { grid-column: 2; grid-row: 2; font-size: 0.875rem; }
[data-layout='index'] .card .meta { grid-column: 2; grid-row: 3; font-family: var(--font-mono); font-size: 0.78rem; }
[data-layout='index'] .card .price { grid-column: 3; grid-row: 1; margin: 0; padding: 0; font-family: var(--font-mono); }
[data-layout='index'] .ribbon { top: 4px; padding: 1px 4px; font-size: 0.6rem; }
[data-layout='index'] .vlist { --cols: 1; --row-gap: 12px; }
@media (min-width: 700px) { [data-layout='index'] .vlist { --cols: 2; } }
@media (min-width: 900px) and (max-width: 1099px) { [data-layout='index'] .vlist { --cols: 1; } }
[data-layout='index'] .vlist-chunk { column-gap: 16px; }
[data-layout='index'] .book-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px 16px; }
[data-layout='index'] .card .cover img { border-radius: 2px; }

/* A page written in the admin (src/pages/written.rs, templates/blocks.html).
   The text right under the title opens with its lead, as the pages had
   before they were written there; a page with the rates table is as wide
   as the shipping page was. */
.written > h1 + .block-text > p:first-child { max-width: 62ch; font: 1.25rem/1.5 var(--font-display); color: var(--ink-soft); }
.written:has(.rates) { max-width: none; }
.written .block-text ul, .written .block-text ol, .written .block-notice ul, .written .block-notice ol { padding-left: 1.25rem; display: grid; gap: 6px; max-width: 70ch; }
.written .block-text li, .written .block-notice li { font: 1.1rem/1.55 var(--font-display); }
.written blockquote { margin: 24px 0; padding-left: 20px; border-left: 3px solid var(--rule); color: var(--ink-soft); }
.block-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 40px; }

/* A written page's Book, Book list and Notice blocks (templates/blocks.html). */
.book-feature { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; align-items: start; margin: 28px 0; }
.book-feature__cover { display: block; aspect-ratio: 2 / 3; background: var(--paper-sunk); border-radius: var(--radius); overflow: hidden; }
.book-feature__cover img { width: 100%; height: 100%; object-fit: cover; }
.book-feature__title { margin: 0 0 4px; font-size: 1.35rem; line-height: 1.25; }
.book-feature__title a { color: var(--ink); text-decoration: none; }
.book-feature__title a:hover { color: var(--accent); text-decoration: underline; }
.book-feature p { margin: 0; }
.book-feature .author { color: var(--ink-soft); }
.book-feature .meta { color: var(--ink-soft); font-size: 0.875rem; margin-top: 2px; }
.book-feature .price { margin-top: 10px; font-weight: 700; }
.book-feature .sold { color: var(--ink-soft); font-weight: 600; }
@media (max-width: 480px) { .book-feature { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; } }
.written .block-book-list { margin: 40px 0; }
.written:has(.block-book-list) { max-width: none; }
.block-notice > :first-child { margin-top: 0; }
.block-notice > :last-child { margin-bottom: 0; }
.block-notice h2, .block-notice h3 { margin: 0 0 4px; font: 600 1.05rem/1.3 var(--font-ui); color: var(--accent); }
/* A page as wide as its book lists keeps its text at reading width. */
.written > h1, .written > .block-text, .written > .block-notice, .written > .book-feature { max-width: 760px; }

/* ============================================================================
   The front page (templates/home.html), redesigned with Bram's UX rulebook.
   Rule numbers: plain = general, M = mobile, S = sales, X = supplementary,
   V = visual craft. Only the colour tokens above, so every layout and dark
   mode restyle it too.
   ========================================================================= */

/* Stone and petrol, the redesign's palette: on the front page only for now
   (the rest of the shop keeps its own). Neutral stone paper, ink text and
   one accent, petrol, for actions and the current state (X68, V12). Petrol
   is no status colour (X67) and stands apart from the mostly red and brown
   covers (X71). Ink 16.2:1, petrol 7.3:1 on paper, its label 7.7:1. Set on
   <body>, so it wins over the layout switch's tokens on <html>. */
body.home {
  --paper: #f8f7f4;
  --paper-raised: #fefdfc;
  --paper-sunk: #ebe9e5;
  --ink: #171b1f;
  --ink-soft: #575b60;
  --rule: #d6d4d0;
  --accent: #035a69;
  --accent-hover: #004957;
  --on-accent: #fcfcfa;
  --gold: #8d5406;
  --success: #2c6330;
  --danger: #a13029;
  --focus: #035a69;
  --tint: #ddeff4;
  --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius: 6px;
  --shadow: 0 1px 2px rgb(42 33 27 / 0.08), 0 4px 16px rgb(42 33 27 / 0.06);
  color-scheme: light;
}
/* The same roles, remapped: dark grey, not black, and a lighter, calmer
   petrol (X72, M28). */
@media (prefers-color-scheme: dark) {
  body.home {
    --paper: #141819;
    --paper-raised: #1d2124;
    --paper-sunk: #0e1113;
    --ink: #ecebe8;
    --ink-soft: #b3b1ab;
    --rule: #363b3e;
    --accent: #77c6d4;
    --accent-hover: #94d8e4;
    --on-accent: #01151a;
    --gold: #ebb25f;
    --success: #8aca8b;
    --danger: #f58c7f;
    --focus: #77c6d4;
    --tint: #192f35;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4);
    color-scheme: dark;
  }
  body.home .home-cover img, body.home .home-fan img { filter: brightness(0.92); }
}
/* The logo in ink: the accent is for actions only (V12). */
.home .brand .mark { fill: var(--ink); }

/* The grid size belongs on the catalogue, not here (Rule 14): nothing on
   this page changes with it. */
.home .layout-switch { display: none; }

/* the demo notice: first in the page, calm, an icon and text (X73) */
.demo-bar { border-bottom: 1px solid var(--rule); background: var(--paper-raised); font-size: 0.9375rem; }
.demo-bar-inner { display: flex; align-items: flex-start; gap: 12px; padding-block: 12px; }
.demo-bar svg { flex: none; margin-top: 2px; fill: none; stroke: var(--ink-soft); stroke-width: 1.75; stroke-linecap: round; }
.demo-bar p { margin: 0; max-width: 90ch; }

/* hero: what the shop is (S1), one button (S3), quiet facts (V20) */
.home-hero { border-bottom: 1px solid var(--rule); background: var(--paper-sunk); }
.home-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px;
  align-items: center; padding-block: 72px;
}
.home-hero h1 { max-width: 16ch; margin: 0; font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem); font-weight: 400; letter-spacing: -0.01em; text-wrap: balance; }
.home-lead { max-width: 36rem; margin: 24px 0 0; font: 1.1875rem/1.6 var(--font-display); text-wrap: pretty; }
.home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }
.home-cta { min-height: 48px; padding-inline: 24px; }
.home-cta:active { transform: translateY(1px); }
.home-text-link, .home-more {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600;
  text-decoration-thickness: 1px;
}
.home-text-link:hover, .home-more:hover { color: var(--ink); text-decoration-thickness: 2px; }
.home-facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 32px 0 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: 0.9375rem; }
.home-facts li { display: inline-flex; align-items: center; gap: 8px; }
.home-facts svg { flex: none; fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.home-fan { position: relative; height: 22rem; }
.home-fan img {
  position: absolute; width: 13rem; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px;
  box-shadow: 0 1px 2px rgb(40 30 20 / 0.18), 0 12px 28px -10px rgb(40 30 20 / 0.35);
}
.home-fan img:nth-child(1) { left: 6%; top: 1.5rem; transform: rotate(-6deg); }
.home-fan img:nth-child(2) { left: 30%; top: 0; transform: rotate(1deg); z-index: 1; }
.home-fan img:nth-child(3) { left: 54%; top: 1.75rem; transform: rotate(6deg); }

/* sections */
.home-page { padding-bottom: 72px; }
.home-section { padding-top: 48px; }
.home-section h2 { margin: 0; font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem); font-weight: 400; }
.home-section > h2 { margin-bottom: 24px; }
.home-section .section-head { margin-bottom: 24px; }
.home-aside { margin: 24px 0 0; font-size: 0.9375rem; }
.home-aside a { color: var(--ink-soft); }

/* book cards: fixed slots so a row lines up (V5); 12 = 2, 3 or 6 full rows (Rule 17) */
.home-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 24px; margin: 0; padding: 0; list-style: none; }
.home-book { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.home-book p { margin: 0; }
.home-book-link { display: flex; flex-direction: column; gap: 12px; color: var(--ink); text-decoration: none; border-radius: 4px; }
.home-book-link:hover { color: var(--ink); }
.home-cover {
  position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 3px; background: var(--paper-raised);
  box-shadow: 0 1px 2px rgb(40 30 20 / 0.14), 0 6px 16px -8px rgb(40 30 20 / 0.3);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.home-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-book-link:hover .home-cover { transform: translateY(-3px); box-shadow: 0 1px 2px rgb(40 30 20 / 0.14), 0 14px 24px -10px rgb(40 30 20 / 0.4); }
.home-book-link:hover .home-book-title { text-decoration: underline; }
.home-book-title {
  display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  font: 400 1.0625rem/1.3 var(--font-display);
}
.home-book-author { overflow: hidden; font-size: 0.9375rem; text-overflow: ellipsis; white-space: nowrap; }
.home-book-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; color: var(--ink-soft); font-size: 0.875rem; }
.home-tag { padding: 0 6px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; }
.home-book-price { margin-top: 4px !important; font-weight: 700; font-variant-numeric: tabular-nums; }
.home-book .ribbon { z-index: 1; }

/* a book still being photographed: a plain cloth binding that says so (X1) */
.binding {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 12% 10%; color: #efe8da; text-align: center; background-color: var(--bind);
  background-image: linear-gradient(90deg, rgb(0 0 0 / 0.22) 0 7%, transparent 7% 9%, rgb(255 255 255 / 0.06) 9% 10%, transparent 10%);
}
.binding::before, .binding::after { content: ''; width: 60%; border-top: 1px solid currentColor; opacity: 0.55; }
.binding-title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; font: 1.0625rem/1.2 var(--font-display); }
.binding-year { font: 0.875rem/1 var(--font-display); letter-spacing: 0.12em; opacity: 0.85; }
.bind-0 { --bind: #3e5a63; } .bind-1 { --bind: #2b2a26; } .bind-2 { --bind: #8e2f25; } .bind-3 { --bind: #6b5a3a; } .bind-4 { --bind: #4a3b55; }
.binding-note { position: absolute; right: 0; bottom: 0; left: 0; padding: 4px 8px; background: rgb(0 0 0 / 0.55); color: #fff; font-size: 0.75rem; text-align: center; }

/* subjects: link tiles with counts, 52 px (Rule 19, M6) */
.home-subjects { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.home-subjects a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 16px;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-raised); color: var(--ink); text-decoration: none;
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}
.home-subjects a:hover { border-color: var(--accent); background: var(--tint, var(--paper-sunk)); color: var(--ink); }
.home-subjects .name { font: 1.0625rem/1.25 var(--font-display); }
.home-subjects .count { color: var(--ink-soft); font-size: 0.8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* shelves: one row, the next card peeks (X65); arrows besides swiping (M19) */
.home-shelf-row {
  display: grid; grid-auto-columns: calc((100% - 5 * 24px) / 5.5); grid-auto-flow: column; gap: 24px;
  margin: 0; padding: 0 0 16px; overflow-x: auto; overscroll-behavior-x: contain; list-style: none;
  scroll-snap-type: x proximity; scrollbar-color: var(--rule) transparent; scrollbar-width: thin;
}
.home-shelf-row > li { scroll-snap-align: start; }
.home-shelf-row:focus-visible { outline-offset: 4px; }
/* swipeable with a mouse too (static/site.js): a grab hand says so */
@media (hover: hover) and (pointer: fine) { .js .home-shelf-row { cursor: grab; } }
.home-shelf-row.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.home-shelf-row.is-dragging a { cursor: grabbing; }
.home-shelf-buttons { display: none; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.js .home-shelf-buttons { display: flex; }
.home-icon-button {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ink-soft); border-radius: 999px;
  background: var(--paper-raised); color: var(--ink); cursor: pointer;
}
.home-icon-button svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.home-icon-button:hover { background: var(--tint, var(--paper-sunk)); }
.home-icon-button:disabled { cursor: default; opacity: 0.4; }

/* content-led breakpoints (M2) */
@media (max-width: 75rem) {
  .home-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-shelf-row { grid-auto-columns: calc((100% - 3 * 24px) / 4.4); }
}
@media (max-width: 60rem) {
  .home-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 48px; }
  .home-fan { display: none; }
}
@media (max-width: 40rem) {
  .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .home-shelf-row { grid-auto-columns: 42%; gap: 16px; }
  .js .home-shelf-buttons { display: none; }
  .home-lead { font-size: 1.0625rem; }
  .home-facts { flex-direction: column; gap: 8px; }
  .home-subjects { grid-template-columns: 1fr 1fr; }
  .home-subjects a { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .home-cover, .home-subjects a { transition: none; }
  .home-book-link:hover .home-cover { transform: none; }
}
@media print { .demo-bar, .home-fan, .home-shelf-buttons { display: none; } }