/* The Wolfsbane Library: bright, minimal, editorial.
   Bodoni Moda for display, Newsreader for reading, Jost for the interface.
   White paper, black ink, hairline rules and one deep red accent used sparingly. */

:root {
  --paper: #ffffff;
  --ink: #16141a;
  --ink-2: #3a3640;
  --muted: #77717c;
  --hair: #e8e5e0;
  --hair-2: #d9d5ce;
  --wash: #f6f4f0;
  --accent: #8b1d28;
  --accent-deep: #6e141e;
  --accent-soft: #f8eeee;
  --danger: #9a2d2d;
  --ok: #2f6a4a;
  --display: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --text: 'Newsreader', Georgia, 'Times New Roman', serif;
  --ui: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --gutter: clamp(20px, 4vw, 56px);
  --max: 1360px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; }
main { display: block; outline: none; }
svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
svg.mark { fill: currentColor; stroke: none; }
svg.seal { stroke: none; }
svg.seal circle { fill: currentColor; }
svg.seal path { fill: var(--paper, #fff); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 8px 14px; background: var(--ink); color: var(--paper); font-family: var(--ui); }
.skip:focus { top: 12px; }
.muted { color: var(--muted); }

/* ------------------------------------------------------------------ type */

.eyebrow, .kicker {
  margin: 0 0 1.2rem;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow span { margin-left: 1.2em; }
.display {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.012em;
  font-size: clamp(3rem, 8.4vw, 8.4rem);
  text-wrap: balance;
}
.display em { font-style: italic; }
/* Page titles stay modest: the books are the display pieces. */
.display--page { font-size: clamp(1.9rem, 2.8vw, 2.5rem); line-height: 1.1; letter-spacing: 0; }
.display--book { font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.1; letter-spacing: 0; }
.display--article { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.12; letter-spacing: 0; }
.display--small { font-size: clamp(1.4rem, 2vw, 1.7rem); }
.lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--ink-2); max-width: 36em; margin: 1.2rem 0 0; }
.section-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.1; }

.text-link {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--ui); font-size: 12.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
  padding-bottom: 4px; border-bottom: 1px solid currentColor;
}
.text-link .arrow { width: 18px; height: 18px; transition: transform .3s; }
.text-link:hover .arrow { transform: translateX(4px); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 54px; padding: 0 2.2em;
  border: 1px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink);
  font-family: var(--ui); font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
  transition: background-color .25s, border-color .25s, color .25s;
}
/* Buttons fill with black on hover; only Add to basket carries the red. */
.button:hover { background: #000; border-color: #000; color: var(--paper); }
.button:disabled, .button:disabled:hover { opacity: .4; cursor: not-allowed; background: transparent; border-color: var(--ink); color: var(--ink); }
.button--solid { background: var(--ink); color: var(--paper); }
.button--solid:disabled, .button--solid:disabled:hover { background: var(--ink); color: var(--paper); }
.button--cart { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.button--cart:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.button--cart:disabled, .button--cart:disabled:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.button svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ masthead */

.announcement { margin: 0; padding: 9px var(--gutter); background: var(--ink); color: var(--paper); text-align: center; font-family: var(--ui); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.announcement a { text-decoration: none; }
/* First visit: where the prices are for, detected from the visitor's location. Quiet, and only once. */
.masthead { position: sticky; top: 0; z-index: 30; background: rgb(255 255 255 / .92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--hair); }
.masthead-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); height: 84px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.primary ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(16px, 2.4vw, 36px); }
.primary a { font-family: var(--ui); font-size: 12.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); padding: 6px 0; border-bottom: 1px solid transparent; }
.primary a:hover, .primary a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
.primary .has-sub { position: relative; }
.primary .sub { position: absolute; top: calc(100% + 18px); left: -20px; min-width: 220px; flex-direction: column; gap: 0; padding: 12px 0; background: var(--paper); border: 1px solid var(--hair); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s, transform .2s, visibility .2s; }
.primary .sub a { display: block; padding: 8px 20px; border: 0; letter-spacing: .12em; }
.primary .has-sub:hover .sub, .primary .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: none; }
.nav-toggle { display: none; align-items: center; gap: 8px; border: 0; background: none; padding: 8px 0; cursor: pointer; font-family: var(--ui); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.nav-toggle svg { width: 22px; height: 22px; }

.wordmark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
/*
 * The name is set in capitals and centred on the seal by its letters, not its
 * line box: the gap from the top of the seal to the top of the capitals equals
 * the gap from their foot to the bottom of the seal, in header and footer, at
 * every size and screen density. Measured in Chromium at 1x, 2x and 3x (the
 * decorative W's flourish is left out, as it reaches past the capitals):
 * - the name's box is trimmed to the capitals (cap height to baseline), so
 *   flex centring centres the capitals, not Cinzel's tall line metrics;
 * - the seal is 39px beside the 1.15rem name, and beside the .98rem name on
 *   small screens, so the space around the letters splits evenly into whole
 *   pixels;
 * - the wordmark is its own compositing layer, so seal and letters snap to
 *   the pixel grid together wherever the wordmark lands on the page (the
 *   footer's position usually has a fraction of a pixel in it).
 */
.wordmark { will-change: transform; }
.wordmark .seal { width: 39px; height: auto; flex: none; color: var(--ink); }
.wordmark .publisher { font-size: 1.15rem; line-height: 1; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; text-box: trim-both cap alphabetic; }
.wordmark img.seal { height: 39px; object-fit: contain; }

.tools { display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.quick-search { position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--hair-2); }
.quick-search:focus-within { border-color: var(--ink); }
.quick-search input { width: clamp(90px, 12vw, 190px); border: 0; background: none; padding: 8px 0; font-family: var(--ui); font-size: 14px; outline: none; }
.quick-search input::-webkit-search-cancel-button { display: none; }
.quick-search button { border: 0; background: none; padding: 6px 0 6px 8px; cursor: pointer; }
.quick-search svg { width: 18px; height: 18px; }
.suggestions { position: absolute; top: calc(100% + 10px); right: 0; width: min(360px, 90vw); list-style: none; margin: 0; padding: 8px 0; background: var(--paper); border: 1px solid var(--hair); box-shadow: 0 24px 50px -30px rgb(0 0 0 / .4); z-index: 40; }
.suggestions a { display: block; padding: 10px 18px; text-decoration: none; }
.suggestions a strong { display: block; font-family: var(--display); font-weight: 400; font-size: 1.05rem; }
.suggestions a span { font-family: var(--ui); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.suggestions a:hover, .suggestions a[aria-selected='true'] { background: var(--wash); color: var(--ink); }
/* Ship to: destination and currency */
.ship-to { position: relative; }
.ship-to summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; font-family: var(--ui); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ship-to summary::-webkit-details-marker { display: none; }
.ship-to summary svg { width: 15px; height: 15px; }
.ship-to summary:hover, .ship-to[open] summary { color: var(--ink); }
.ship-to-cur { padding-left: 8px; border-left: 1px solid var(--hair-2); color: var(--ink-2); }
.ship-to summary svg, .basket-link svg, .quick-search svg { flex: none; }
/* Opens upwards from the footer. */
.ship-to-panel { position: absolute; bottom: calc(100% + 14px); left: 50%; translate: -50% 0; text-transform: none; letter-spacing: normal; z-index: 45; width: min(320px, 88vw); display: grid; gap: 12px; padding: 20px; background: var(--paper); border: 1px solid var(--hair); box-shadow: 0 24px 50px -30px rgb(0 0 0 / .4); font-family: var(--ui); }
.ship-to-panel label { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.ship-to-panel select { width: 100%; border: 0; border-bottom: 1px solid var(--ink); background: none; padding: 8px 0; font-family: var(--text); font-size: 1.1rem; cursor: pointer; }
.ship-to-panel p { margin: 0; font-size: 13px; color: var(--muted); }
.ship-to-panel .ship-to-now { font-size: 14px; color: var(--ink-2); padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.ship-to-now strong { font-weight: 500; color: var(--ink); }
.ship-to-panel .button { min-height: 42px; }
.ship-line { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-family: var(--ui); font-size: 13px; color: var(--ink-2); }
.ship-line--change { align-items: center; }
.ship-line--change select { flex: 1; min-width: 0; border: 0; border-bottom: 1px solid var(--ink); background: none; padding: 6px 0; font-family: var(--ui); font-size: 14px; color: var(--ink); cursor: pointer; }
.link-button { border: 0; background: none; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; cursor: pointer; }
.basket-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--ui); font-size: 12.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.basket-link svg { width: 20px; height: 20px; }
.basket-link .count { min-width: 1.4em; text-align: center; }
.basket-link.bump .count { animation: bump .5s ease; }
@keyframes bump { 40% { color: var(--accent); transform: scale(1.3); } }

@media (max-width: 900px) {
  .masthead-inner { height: 68px; grid-template-columns: auto 1fr auto; }
  .wordmark { justify-self: center; }
  .wordmark .publisher { font-size: .98rem; }
  .nav-toggle { display: inline-flex; }
  .nav-toggle span { display: none; }
  .primary ul { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--paper); border-bottom: 1px solid var(--hair); padding: 8px var(--gutter) 20px; }
  .primary.is-open ul { display: flex; }
  .primary li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--hair); }
  .primary .sub { position: static; opacity: 1; visibility: visible; transform: none; border: 0; padding: 0 0 0 16px; }
  .quick-search { display: none; }
  .basket-link .label { display: none; }
}

/* ------------------------------------------------------------------ layout helpers */

.hero, .band, .catalogue, .marginalia, .article, .book, .notice, .basket-page, .preview-flag { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: clamp(64px, 9vw, 120px); border-top: 1px solid var(--hair); }
.band-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); }

/* ------------------------------------------------------------------ home */

.hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 6vw, 96px); padding-block: clamp(56px, 8vw, 112px); }
.hero--text { grid-template-columns: minmax(0, 1fr); }
.hero .display { font-size: clamp(2.4rem, 4.4vw, 4.2rem); line-height: 1.06; }
.hero .display em { color: var(--accent); }
.hero .lede { margin-top: clamp(24px, 3vw, 40px); }
.hero .text-link { margin-top: 36px; }
.hero-book { justify-self: center; display: grid; gap: 22px; width: min(100%, 330px); text-decoration: none; color: var(--ink); }
.hero-cover .cover { box-shadow: var(--book-shadow); transition: transform .7s cubic-bezier(.2, .7, .2, 1), box-shadow .7s; }
.hero-book:hover .hero-cover .cover { transform: translateY(-8px); box-shadow: var(--book-shadow-lift); }
.hero-caption { display: grid; gap: 2px; text-align: center; }
.hero-caption strong { font-family: var(--display); font-weight: 400; font-size: 1.25rem; }
.hero-caption span { font-family: var(--ui); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-book { width: min(70%, 260px); }
}

/* Tiles: the cover sits on the page with a soft shadow. On hover it lifts
   straight up, as the featured book does. */
:root {
  --book-shadow: 0 1px 1px rgb(0 0 0 / .06), 0 4px 8px -4px rgb(20 16 24 / .22), 0 22px 34px -22px rgb(20 16 24 / .45);
  --book-shadow-lift: 0 1px 1px rgb(0 0 0 / .05), 0 8px 14px -8px rgb(20 16 24 / .22), 0 36px 44px -26px rgb(20 16 24 / .45);
}
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: clamp(44px, 5vw, 64px) clamp(24px, 3vw, 44px); }
.tiles--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .tiles--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { animation: tile-in .8s cubic-bezier(.2, .7, .2, 1) both; }
.tile:nth-child(2) { animation-delay: .06s; } .tile:nth-child(3) { animation-delay: .12s; } .tile:nth-child(4) { animation-delay: .18s; }
.tile:nth-child(5) { animation-delay: .24s; } .tile:nth-child(6) { animation-delay: .3s; } .tile:nth-child(7) { animation-delay: .36s; }
.tile:nth-child(n + 8) { animation-delay: .42s; }
@keyframes tile-in { from { opacity: 0; transform: translateY(18px); } }
.tile-link { display: block; text-decoration: none; color: var(--ink); }
.tile-cover { position: relative; }
.tile-cover .cover { box-shadow: var(--book-shadow); transition: transform .7s cubic-bezier(.2, .7, .2, 1), box-shadow .7s; }
.tile-link:hover .tile-cover .cover, .tile-link:focus-visible .tile-cover .cover { transform: translateY(-8px); box-shadow: var(--book-shadow-lift); }
.caption { padding-top: 20px; }
.caption .no { display: block; margin-bottom: 6px; font-family: var(--ui); font-size: 11px; letter-spacing: .2em; color: var(--muted); }
.tile-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.24rem; line-height: 1.2; }
.tile-author { margin: 4px 0 0; font-family: var(--ui); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.tile-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin: 12px 0 0; font-family: var(--ui); font-size: 13px; color: var(--muted); }
.tile-meta .price { color: var(--ink); white-space: nowrap; }
.tile.is-sold-out .tile-cover { filter: grayscale(.6) opacity(.7); }
.tile-link:hover .tile-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
@media (prefers-reduced-motion: reduce) {
  .tile { animation: none; }
  .tile-link:hover .tile-cover .cover, .tile-link:focus-visible .tile-cover .cover { transform: translateY(-4px); }
}

/* Subjects: a plain, scannable list of top-level subjects and their sections */
.subjects { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); column-gap: clamp(24px, 4vw, 56px); }
.subject { padding: 22px 0 26px; border-top: 1px solid var(--hair); }
.subject-link { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; text-decoration: none; color: var(--ink); }
.subject-name { font-family: var(--display); font-size: 1.55rem; line-height: 1.2; }
.subject-count { flex: none; font-family: var(--ui); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.subject-link:hover .subject-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.subject-subs { margin: 8px 0 0; font-family: var(--ui); font-size: 14px; line-height: 1.7; color: var(--muted); }
.subject-subs a { text-decoration: none; color: var(--ink-2); }
.subject-subs a:hover { text-decoration: underline; }

/* Marginalia entries */
.entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 48px 40px; }
.entry a { display: block; text-decoration: none; color: var(--ink); }
.entry-image { margin: 0 0 20px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--wash); }
.entry-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.entry a:hover .entry-image img { transform: scale(1.03); }
.entry-kicker { margin: 0 0 12px; font-family: var(--ui); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); }
.entry-kicker span { margin-left: 1em; color: var(--muted); }
.entry-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.7rem; line-height: 1.15; }
.entry-excerpt { margin: 12px 0 0; color: var(--ink-2); font-size: 1.02rem; }
.entry a:hover .entry-title { font-style: italic; }
.entry--lead { padding-bottom: clamp(48px, 6vw, 80px); margin-bottom: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--hair); }
.entry--lead a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.entry--lead .entry-image { grid-column: 1 / 8; grid-row: 1 / span 3; margin: 0; }
.entry--lead .entry-kicker, .entry--lead .entry-title, .entry--lead .entry-excerpt { grid-column: 8 / -1; }
.entry--lead .entry-title { font-size: clamp(2rem, 3.6vw, 3.2rem); }
.entry--lead a:not(:has(.entry-image)) > * { grid-column: 1 / 10; }
@media (max-width: 900px) { .entry--lead a > * { grid-column: 1 / -1 !important; grid-row: auto !important; } .entry--lead .entry-image { margin-bottom: 20px; } }

/* ------------------------------------------------------------------ page heads & crumbs */

.page-head { padding-block: clamp(32px, 4.5vw, 56px) clamp(24px, 3vw, 40px); }
.page-head--centered { text-align: center; }
.page-head--centered .lede { margin-inline: auto; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 28px; padding: 0; font-family: var(--ui); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--hair-2); }
.crumbs a { text-decoration: none; }
.crumbs [aria-current] { color: var(--ink); }

.search-bar { display: flex; align-items: center; gap: 12px; max-width: 760px; margin-top: 40px; border-bottom: 1px solid var(--ink); }
.page-head--centered .search-bar, .notice .search-bar { margin-inline: auto; }
.search-bar input { flex: 1; min-width: 0; border: 0; background: none; padding: 14px 0; font-family: var(--text); font-size: clamp(1.2rem, 2vw, 1.5rem); outline: none; }
.search-bar input::placeholder { color: #aaa4ad; font-style: italic; }
.search-bar button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; font-family: var(--ui); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.search-bar svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------------ catalogue */

/* Compact head: title and introduction on the left, search on the right. */
.catalogue .page-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 440px); column-gap: clamp(24px, 5vw, 80px); align-items: end; padding-block: clamp(28px, 4vw, 48px) clamp(24px, 3vw, 40px); }
.catalogue .page-head .crumbs { grid-column: 1 / -1; }
.catalogue .page-head h1, .catalogue .page-head .lede { grid-column: 1; }
.catalogue .page-head .lede { font-size: 1.05rem; margin-top: .6rem; }
.catalogue .search-bar { grid-column: 2; grid-row: 2 / span 2; margin-top: 0; max-width: none; }
.catalogue .search-bar input { font-size: 1.1rem; padding: 10px 0; }
@media (max-width: 760px) {
  .catalogue .page-head { grid-template-columns: minmax(0, 1fr); }
  .catalogue .search-bar { grid-column: 1; grid-row: auto; margin-top: 24px; }
}

.catalogue-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); padding-bottom: 120px; }
.filters section { padding: 22px 0; border-top: 1px solid var(--hair); }
.filters h2 { margin: 0 0 14px; font-family: var(--ui); font-size: 11.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.filters ul { list-style: none; margin: 0; padding: 0; }
.filters .tree ul ul { padding-left: 14px; border-left: 1px solid var(--hair); margin: 4px 0 6px 2px; }
.filters li a { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; text-decoration: none; font-size: 1rem; color: var(--ink-2); }
.filters li a span { font-family: var(--ui); font-size: 12px; color: var(--muted); }
.filters li a[aria-current] { color: var(--accent); font-style: italic; }
.filters li { position: relative; }
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 1rem; }
.check input { width: 16px; height: 16px; accent-color: var(--ink); }
.price-range { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.price-range label { display: grid; gap: 4px; font-family: var(--ui); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.price-range input { width: 100%; border: 0; border-bottom: 1px solid var(--hair-2); background: none; padding: 6px 0; font-family: var(--ui); font-size: 15px; outline: none; }
.price-range input:focus { border-color: var(--ink); }
.facet-form .button { min-height: 40px; padding: 0 1.4em; font-size: 11.5px; }
.filters-toggle { display: none; }
@media (max-width: 900px) {
  .catalogue-body { grid-template-columns: 1fr; }
  .filters-toggle { display: inline-flex; width: 100%; justify-content: center; min-height: 48px; border: 1px solid var(--ink); background: none; font-family: var(--ui); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
  .filters.js-collapsible .filters-panel { display: none; }
  .filters.js-collapsible.is-open .filters-panel { display: block; }
}

.results-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-bottom: 20px; margin-bottom: 36px; border-bottom: 1px solid var(--hair); font-family: var(--ui); font-size: 13px; }
.results-bar > p { margin: 0; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 12px; border: 1px solid var(--hair-2); text-decoration: none; font-size: 13px; }
.chip svg { width: 13px; height: 13px; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chips .clear { color: var(--muted); font-size: 12.5px; }
.sort { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sort label { letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-size: 11.5px; }
.sort select { border: 0; border-bottom: 1px solid var(--hair-2); background: none; padding: 6px 22px 6px 0; font-family: var(--ui); font-size: 14px; cursor: pointer; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: right 6px center, right 2px center; background-size: 4px 4px; background-repeat: no-repeat; }
.view-switch { display: flex; gap: 14px; }
.view-switch a { text-decoration: none; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-size: 11.5px; }
.view-switch a[aria-current] { color: var(--ink); border-bottom: 1px solid var(--ink); }

.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.row a { display: grid; grid-template-columns: 46px minmax(0, 3fr) 70px minmax(0, 2fr) 110px; gap: 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hair); text-decoration: none; }
.row-cover .cover { box-shadow: 0 1px 1px rgb(0 0 0 / .06), 0 8px 12px -8px rgb(0 0 0 / .45); }
.row-title strong { display: block; font-family: var(--display); font-weight: 400; font-size: 1.2rem; line-height: 1.2; }
.row-title em { font-style: normal; font-family: var(--ui); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.row-year, .row-formats { font-family: var(--ui); font-size: 13px; color: var(--muted); }
.row-price { font-family: var(--ui); font-size: 14px; text-align: right; }
.row a:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
@media (max-width: 760px) { .row a { grid-template-columns: 40px 1fr auto; } .row-year, .row-formats { display: none; } }

.empty { padding: 80px 0; text-align: center; color: var(--ink-2); }
.pages ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 72px 0 0; padding: 0; font-family: var(--ui); font-size: 14px; }
.pages a, .pages span { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; text-decoration: none; }
.pages a:hover { text-decoration: underline; }
.pages [aria-current] { border-bottom: 1px solid var(--ink); }
.pages .prev a, .pages .next a { letter-spacing: .16em; text-transform: uppercase; font-size: 12px; }
.pages .gap { display: inline-grid; place-items: center; min-width: 30px; color: var(--muted); }

/* ------------------------------------------------------------------ book */

.book { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); padding-block: 32px 96px; }
.book-stage {
  position: sticky; top: 108px; align-self: start;
  display: grid; place-items: center; align-content: center; gap: 28px;
  min-height: min(82vh, 780px);
  background: var(--wash);
  overflow: hidden;
}
.stage-flat { width: min(46%, 300px); transition: opacity .45s, transform .45s; }
.stage-flat .cover { box-shadow: var(--book-shadow-lift); }
.stage-flat.is-leaving { opacity: 0; transform: scale(.96); }
/* The flat cover, the book and the ebook reader share one place, so one can become the next. */
.book-stage > .stage-flat, .book-stage > .obj, .book-stage > .device { grid-area: 1 / 1; }
.book-stage > .obj.is-leaving, .book-stage > .device.is-leaving { opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.stage-hint { margin: 0; font-family: var(--ui); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.book-stage .obj { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; }
.book-stage .obj.is-dragging { cursor: grabbing; }
.book-stage .obj:focus-visible::before { content: ''; position: absolute; inset: -14px; border: 1px solid var(--accent, currentColor); border-radius: 4px; opacity: .5; }
.turn-hint { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; text-align: center; font-family: var(--ui); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); animation: turn-hint-in .6s 1.8s both; transition: opacity .6s; pointer-events: none; }
.turn-hint.is-done { opacity: 0; }
@keyframes turn-hint-in { from { opacity: 0; transform: translateY(4px); } }
.book-info { padding-top: 8px; }
.book-subtitle { margin: 12px 0 0; font-style: italic; font-size: 1.35rem; color: var(--ink-2); }
.book-description { margin: 28px 0 0; font-size: 1.15rem; line-height: 1.65; color: var(--ink-2); max-width: 34em; }

.editions { margin: 40px 0 0; padding: 0; border: 0; }
.editions legend { padding: 0; margin-bottom: 14px; font-family: var(--ui); font-size: 11.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
/* Editions are a choice, not buttons: a list of options, each with a radio
   mark, the chosen one outlined in ink. */
.edition { position: relative; display: grid; grid-template-columns: 18px 1fr auto; gap: 3px 16px; align-items: center; padding: 16px 20px; border: 1px solid var(--hair); margin-top: -1px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.edition::before { content: ''; grid-row: 1 / span 2; width: 18px; height: 18px; border: 1px solid var(--hair-2); border-radius: 50%; box-sizing: border-box; transition: border-color .2s, background .2s; }
.edition:has(input:checked)::before { border-color: var(--ink); background: radial-gradient(circle, var(--ink) 0 4px, transparent 4.5px); }
.edition:hover::before { border-color: var(--ink-2); }
.edition input { position: absolute; opacity: 0; pointer-events: none; }
.edition:hover { border-color: var(--hair-2); background: #fcfbf9; z-index: 1; }
.edition:has(input:checked) { border-color: var(--ink); background: #fcfbf9; z-index: 2; }
.edition:has(input:focus-visible) { outline: 1.5px solid var(--ink); outline-offset: 2px; z-index: 3; }
.edition-format { font-family: var(--display); font-size: 1.3rem; line-height: 1.2; }
.edition-price { font-family: var(--ui); font-size: 15px; grid-row: 1 / span 2; grid-column: 3; }
.edition-meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--ui); font-size: 12.5px; color: var(--muted); letter-spacing: .04em; }
.edition-status { color: var(--ok); }
.status--low { color: #9a6a12; }
.status--unavailable { color: var(--danger); }
.status--external { color: var(--muted); }
.edition.is-sold-out .edition-format { color: var(--muted); }

/* The buying controls share one system: 54px tall, a 1px border, square
   corners, and the width of the edition list above them. */
.purchase { margin-top: 12px; display: grid; gap: 12px; }
.purchase-physical { display: grid; grid-template-columns: auto 1fr; gap: 12px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--ink); height: 54px; }
.qty button { width: 44px; height: 100%; border: 0; background: none; cursor: pointer; font-size: 1.1rem; }
.qty output { min-width: 28px; text-align: center; font-family: var(--ui); }
.purchase-ebook p { margin: 0 0 12px; color: var(--ink-2); }
.partner-links { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0; padding: 0; }
.partner-links a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 1.4em; border: 1px solid var(--ink); text-decoration: none; font-family: var(--ui); font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.partner-links a:hover { background: #000; border-color: #000; color: var(--paper); }
.partner-links svg { width: 15px; height: 15px; }
.look-inside { width: 100%; }
.purchase-physical > * { min-width: 0; }
.purchase .button--cart { white-space: nowrap; }
.purchase .button--cart:disabled { white-space: normal; line-height: 1.4; padding-block: 8px; }
@media (max-width: 480px) {
  .purchase .qty button { width: 34px; }
  .purchase .button--cart { padding-inline: 12px; font-size: 12px; letter-spacing: .12em; }
}
@media (max-width: 374px) { .purchase .cart-price { display: none; } }
.shipping-note { margin: 6px 0 0; font-family: var(--ui); font-size: 12.5px; color: var(--muted); }
.purchase.is-revealed { animation: reveal .6s ease both; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } }

.details { display: grid; grid-template-columns: 1fr 1fr; margin: 48px 0 0; border-top: 1px solid var(--hair); }
.details div { padding: 16px 0; border-bottom: 1px solid var(--hair); }
.details dt { font-family: var(--ui); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.details dd { margin: 4px 0 0; }
@media (max-width: 900px) {
  .book { grid-template-columns: 1fr; }
  .book-stage { position: relative; top: 0; min-height: 440px; }
}

/* ------------------------------------------------------------------ Marginalia & pages */

.marginalia { padding-bottom: 120px; }
.topics ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin: 36px 0 0; padding: 0; font-family: var(--ui); font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; }
.topics a { text-decoration: none; color: var(--muted); padding-bottom: 4px; }
.topics a[aria-current] { color: var(--ink); border-bottom: 1px solid var(--ink); }

.article { padding-block: clamp(40px, 7vw, 96px) 120px; }
.article-head { max-width: 900px; margin: 0 auto; text-align: center; }
.article-head .eyebrow a { color: var(--ink); text-decoration: none; }
.article-standfirst { margin: 28px auto 0; max-width: 34em; font-style: italic; font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.5; color: var(--ink-2); }
.byline { margin: 24px 0 0; font-family: var(--ui); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.article-cover { margin: clamp(40px, 6vw, 72px) auto 0; max-width: 1100px; }
.article-cover img { width: 100%; height: auto; }
.prose { max-width: 700px; margin: clamp(40px, 6vw, 72px) auto 0; font-size: 1.2rem; line-height: 1.75; }
/* Drop cap: exactly two lines deep. Its capital runs from the top of line one to the baseline of line two
   (one line of leading plus the text's cap height), sized for Bodoni's capitals. */
.prose > p:first-child::first-letter { float: left; font-family: var(--display); font-weight: 400; font-size: 3.35em; line-height: .78; padding: .07em .16em 0 0; margin-bottom: -.1em; color: var(--accent); }
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  .prose > p:first-child::first-letter { float: none; font-size: inherit; line-height: inherit; padding: 0; margin: 0 .45em 0 0; -webkit-initial-letter: 2; initial-letter: 2; }
}
.prose h2, .prose h3, .prose h4 { font-family: var(--display); font-weight: 400; line-height: 1.15; margin: 2.2em 0 .6em; }
.prose h2 { font-size: 2rem; }
.prose h3 { font-size: 1.55rem; }
.prose h4 { font-size: 1.25rem; font-style: italic; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.2em; }
.prose a { color: var(--accent); }
.prose blockquote { margin: 2em 0; padding: 0 0 0 1.4em; border-left: 1px solid var(--ink); font-family: var(--display); font-style: italic; font-size: 1.55rem; line-height: 1.4; }
.prose blockquote p { margin: 0; }
.prose figure { margin: 2.4em calc(-1 * min(12vw, 140px)); }
.prose figure img { width: 100%; height: auto; }
.prose figcaption { margin-top: 10px; font-family: var(--ui); font-size: 12.5px; letter-spacing: .06em; color: var(--muted); text-align: center; }
.prose .embed { aspect-ratio: 16 / 9; margin-inline: 0; }
.prose .embed--audio { aspect-ratio: auto; height: 160px; }
.prose .embed iframe { width: 100%; height: 100%; border: 0; }
.prose hr { border: 0; text-align: center; margin: 3em 0; }
.prose hr::after { content: '✦ ✦ ✦'; color: var(--muted); letter-spacing: 1em; font-size: .8rem; }
.prose code { font-size: .88em; background: var(--wash); padding: .1em .35em; }
.prose pre { overflow-x: auto; background: var(--wash); padding: 1em 1.2em; font-size: .85em; }
.prose .table-scroll { overflow-x: auto; margin: 0 0 1.4em; }
.prose table { border-collapse: collapse; width: 100%; font-family: var(--ui); font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hair); }
@media (max-width: 900px) { .prose figure { margin-inline: 0; } }

.book-card { margin: 2.2em 0; }
.book-card a { display: grid; grid-template-columns: 110px 1fr; gap: 26px; align-items: center; padding: 22px; background: var(--wash); text-decoration: none; color: var(--ink); }
.book-card-cover .cover { box-shadow: 0 14px 22px -14px rgb(0 0 0 / .5); }
.book-card-text { display: grid; gap: 4px; }
.book-card .kicker { margin: 0 0 6px; }
.book-card strong { font-family: var(--display); font-weight: 400; font-size: 1.5rem; line-height: 1.15; }
.book-card em { font-style: normal; font-family: var(--ui); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.book-card-meta { font-family: var(--ui); font-size: 13px; color: var(--ink-2); margin-top: 8px; }
.book-card .more { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-family: var(--ui); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; }
.book-card .more svg { width: 16px; height: 16px; }
.book-card a:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }

.article-books { max-width: var(--max); margin: 96px auto 0; padding-top: 56px; border-top: 1px solid var(--hair); }
.article-books .section-title { margin-bottom: 40px; }
.article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 96px auto 0; padding-top: 32px; border-top: 1px solid var(--hair); }
.article-nav a { display: grid; gap: 6px; text-decoration: none; font-family: var(--display); font-size: 1.3rem; line-height: 1.25; }
.article-nav a:last-child:not(:first-child) { text-align: right; }
.article-nav span { font-family: var(--ui); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.preview-flag { margin: 0 auto; padding-block: 10px; background: var(--accent-soft); color: var(--accent); font-family: var(--ui); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; text-align: center; max-width: none; }

/* ------------------------------------------------------------------ notices & basket */

.notice { max-width: 760px; padding-block: clamp(80px, 12vw, 160px); text-align: center; }
.notice-mark { display: inline-block; width: 48px; color: var(--ink); margin-bottom: 28px; }
.notice .lede { margin-inline: auto; }
.notice p { margin: 1.2rem 0 0; }

.drawer { margin: 0 0 0 auto; width: min(460px, 100vw); height: 100dvh; max-height: 100dvh; padding: 0; border: 0; border-left: 1px solid var(--hair); background: var(--paper); color: var(--ink); }
.drawer[open] { display: flex; flex-direction: column; animation: slide-in .35s cubic-bezier(.2, .8, .2, 1); }
.drawer::backdrop { background: rgb(22 20 26 / .28); }
@keyframes slide-in { from { transform: translateX(30px); opacity: 0; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px; border-bottom: 1px solid var(--hair); }
.drawer-head h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.9rem; }
.icon-button { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; }
.icon-button svg { width: 22px; height: 22px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 28px; }
.drawer-foot { padding: 24px 28px 28px; border-top: 1px solid var(--hair); display: grid; gap: 14px; }
.basket-line { display: grid; grid-template-columns: 60px 1fr auto; gap: 18px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--hair); }
.basket-line .cover { box-shadow: 0 8px 14px -10px rgb(0 0 0 / .5); }
.basket-line-title { font-family: var(--display); font-size: 1.2rem; line-height: 1.2; text-decoration: none; }
.basket-line-meta { font-family: var(--ui); font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.basket-line .remove { margin-top: 8px; padding: 0; border: 0; background: none; font-family: var(--ui); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-decoration: underline; cursor: pointer; }
.basket-line .qty { height: 36px; }
.basket-line .qty button { width: 32px; }
.basket-line-price { font-family: var(--ui); font-size: 14px; text-align: right; }
.totals { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--ui); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.totals strong { font-family: var(--display); font-weight: 400; font-size: 1.8rem; letter-spacing: 0; text-transform: none; }
.fine { margin: 0; font-family: var(--ui); font-size: 12.5px; color: var(--muted); }
.form-error { margin: 0; color: var(--danger); font-family: var(--ui); font-size: 14px; }
.basket-page { max-width: 760px; padding-bottom: 120px; }
.basket-page .drawer-body, .basket-page .drawer-foot { padding-inline: 0; }
.drawer .empty, .basket-page .empty { padding: 48px 0; }

.toasts { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 200; display: grid; gap: 8px; }
.toast { padding: 14px 22px; background: var(--ink); color: var(--paper); font-family: var(--ui); font-size: 13px; letter-spacing: .06em; box-shadow: 0 20px 40px -20px rgb(0 0 0 / .6); animation: reveal .3s; transition: opacity .4s; }
.toast.out { opacity: 0; }

/* ------------------------------------------------------------------ colophon */

.colophon { margin-top: 0; border-top: 1px solid var(--hair); }
.colophon-grid { max-width: var(--max); margin: 0 auto; padding: 72px var(--gutter) 48px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; font-family: var(--ui); font-size: 14px; color: var(--ink-2); }
.colophon-about p { max-width: 30em; margin: 18px 0 0; line-height: 1.7; }
.colophon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.colophon a { text-decoration: none; }
.colophon .social { margin: 20px 0 0 -8px; display: flex; flex-wrap: wrap; gap: 2px; }
.colophon .social a { display: grid; place-items: center; width: 36px; height: 36px; color: var(--ink-2); border-radius: 50%; transition: color .15s; }
.colophon .social a:hover, .colophon .social a:focus-visible { color: var(--ink); }
svg.social-icon { width: 19px; height: 19px; fill: currentColor; stroke: none; }
svg.social-icon--link { fill: none; stroke: currentColor; stroke-width: 1.8; }
.social-link { display: inline-flex; align-items: center; gap: 10px; }
.colophon .address { white-space: pre-line; }
.colophon-base { max-width: var(--max); margin: 0 auto; padding: 22px var(--gutter) 36px; display: flex; justify-content: space-between; align-items: center; gap: 16px 28px; flex-wrap: wrap; border-top: 1px solid var(--hair); font-family: var(--ui); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.colophon-base ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0; padding: 0; }
.colophon-base a { text-decoration: none; color: var(--muted); }
.colophon-base a:hover { color: var(--ink); }
@media (max-width: 760px) { .colophon-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ look inside */

.reader { --surround: #aaa398; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--surround); color: var(--ink); }
.reader[open] { display: flex; flex-direction: column; }
.reader::backdrop { background: #aaa398; }
.reader-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--gutter); }
.reader-title { margin: 0; font-family: var(--display); font-size: 1.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-title span { font-family: var(--ui); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #3d3833; margin-left: 12px; }
.reader-stage { flex: 1; display: grid; place-items: center; min-height: 0; padding: 0 12px; }
.reader-bottom { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 14px 12px 26px; font-family: var(--ui); }
.reader-progress { min-width: 150px; text-align: center; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #3d3833; }
.reader-hint { width: 100%; text-align: center; margin: 0; font-size: 12px; color: #3d3833; }
.reader .button { color: var(--ink); border-color: rgb(22 20 26 / .55); }
.reader .button:hover { background: #000; border-color: #000; color: var(--paper); }
.round { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--hair-2); border-radius: 50%; background: var(--paper); cursor: pointer; }
.round:hover { border-color: var(--ink); }
.round:disabled { opacity: .35; cursor: default; }
.round svg { width: 20px; height: 20px; }
.reader .round { background: rgb(255 255 255 / .35); border-color: rgb(22 20 26 / .3); color: var(--ink); }
.reader .round:hover { background: var(--paper); border-color: var(--ink); }
.reader-loading { color: #3d3833; font-style: italic; }

/* ---- The page-turning book (js/flipbook.js). --page-w/--page-h size one page. */
.flipbook {
  --page-w: 360px; --page-h: 533px;
  --sq: calc(var(--page-w) * .018);
  --case-bg: #3a2432; --case-accent: #c9a45c;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 .09 0 0 0 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  position: relative; width: calc(var(--page-w) * 2); height: var(--page-h); outline: none; touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.flipbook.is-single { width: var(--page-w); overflow: hidden; }
/* The book itself: slides so a closed book sits in the middle. */
.fb-book { position: absolute; inset: 0; width: calc(var(--page-w) * 2); transition: transform .9s cubic-bezier(.645, .045, .355, 1); }
.flipbook:not(.is-single)[data-position='closed-front'] .fb-book { transform: translateX(calc(var(--page-w) * -.5)); }
.flipbook:not(.is-single)[data-position='closed-back'] .fb-book { transform: translateX(calc(var(--page-w) * .5)); }
.flipbook.is-single .fb-book { left: calc(var(--page-w) * -1); }
.flipbook.no-anim .fb-book, .flipbook.no-anim .fb-shadow, .flipbook.no-anim .fb-case { transition: none; }
.fb-stage { position: absolute; inset: 0; perspective: calc(var(--page-w) * 7.5); perspective-origin: 50% 45%; }

/* The book's shadow on the table, and the page stacks either side. */
.fb-shadow { position: absolute; top: 2%; bottom: -2.5%; left: -1%; right: -1%; border-radius: 6px; background: rgb(40 30 22 / .42); filter: blur(22px); transition: left .9s cubic-bezier(.645, .045, .355, 1), right .9s cubic-bezier(.645, .045, .355, 1); pointer-events: none; }
.flipbook[data-position='closed-front'] .fb-shadow { left: 49%; }
.flipbook[data-position='closed-back'] .fb-shadow { right: 49%; }
.fb-stack { position: absolute; top: 0; width: var(--page-w); height: var(--page-h); background: #efe9dc; pointer-events: none; }
.fb-stack--left { left: 0; }
.fb-stack--right { left: 50%; }
.fb-stack[hidden] { display: none; }

/* A hardcover's case: the boards frame the open pages, cloth over board, joined at a hinge. */
.fb-case { position: absolute; inset: calc(var(--sq) * -1); pointer-events: none; }
.fb-case > * { opacity: 0; transition: opacity .25s; }
.flipbook.has-front-board .fb-board--left, .flipbook.has-back-board .fb-board--right,
.flipbook.has-front-board.has-back-board .fb-hinge { opacity: 1; }
.flipbook.fmt-paperback .fb-case, .flipbook.is-single .fb-case { display: none; }
.fb-board { position: absolute; top: 0; bottom: 0; width: calc(50% - 1px); border-radius: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0 0 0 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(180deg, rgb(255 255 255 / .06), transparent 40%, rgb(0 0 0 / .18)), var(--case-bg);
  background-size: 140px 140px, auto, auto; background-blend-mode: soft-light, normal, normal;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25), inset 0 1px 0 rgb(255 255 255 / .12), 0 1px 2px rgb(0 0 0 / .25); }
.fb-board--left { left: 0; border-radius: 3px 1px 1px 3px; }
.fb-board--right { right: 0; border-radius: 1px 3px 3px 1px; }
.fb-hinge { position: absolute; top: 0; bottom: 0; left: calc(50% - 6px); width: 12px; background: linear-gradient(90deg, rgb(0 0 0 / .35), color-mix(in srgb, var(--case-bg) 80%, #fff) 50%, rgb(0 0 0 / .35)); }

/* Leaves: a page and its back. Turning leaves swap their faces for a bending chain of strips. */
.leaf { position: absolute; top: 0; left: 50%; width: var(--page-w); height: 100%; transform-origin: left center; transform-style: preserve-3d; cursor: pointer; }
.leaf.is-flipped { transform: rotateY(-180deg); }
.leaf.is-turning { transform: none; }
.leaf.is-turning > .face { visibility: hidden; }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.face--back { transform: rotateY(180deg); }
.face > * { width: 100%; height: 100%; }
.fb-chain { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.fb-strip { position: absolute; top: 0; height: 100%; transform-origin: left center; transform-style: preserve-3d; }
/* Each slice runs a hair past its strip to close the joint, tapered at head and tail
   so the overlap never pokes out beyond the page's edge. */
.fb-slice { position: absolute; top: 0; left: 0; width: calc(100% + 1.2px); height: 100%; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  clip-path: polygon(0 0, calc(100% - 1.2px) 0, 100% 1.6px, 100% calc(100% - 1.6px), calc(100% - 1.2px) 100%, 0 100%); }
.fb-slice--back { transform: rotateY(180deg); }
.fb-slice > * { position: absolute; top: 0; left: 0; width: var(--page-w); height: 100%; }
/* Light on the turning sheet: its shade and a sheen along the curl, painted by script.
   Only over the strip's own width: where strips overlap, doubled shade would show as a line. */
.fb-shade { position: absolute; top: 0; bottom: 0; left: 0; right: 1.2px; z-index: 6; pointer-events: none; }
.fb-slice--back > .fb-shade { left: 1.2px; right: 0; }
.face > .fb-shade { inset: 0; z-index: 8; width: auto; height: auto; }
/* The shadow a turning sheet casts on the pages below it. */
.fb-cast { position: absolute; top: 0; width: var(--page-w); height: 100%; pointer-events: none; }
.fb-cast--left { left: 0; }
.fb-cast--right { left: 50%; }

.page {
  position: relative; display: flex; flex-direction: column;
  padding: calc(var(--page-w) * .1) calc(var(--page-w) * .1) calc(var(--page-w) * .075);
  background-color: #fbf8f1;
  color: #2a2527;
  font-family: var(--text);
  font-size: calc(var(--page-w) * .041);
  line-height: 1.5;
  /* Paper: a fine grain, and light falling a little unevenly across the sheet. */
  background-image: var(--paper-grain), radial-gradient(130% 90% at 30% 20%, rgb(255 255 255 / .35), transparent 60%), linear-gradient(180deg, transparent 70%, rgb(90 70 40 / .05));
  background-size: 160px 160px, auto, auto;
}
/* Gutter depth: the pages curve down into the spine (deeply in a hardcover), catching a
   little light on the rise and darkening where they meet. Outer edges: a hint of the sheet's thickness. */
:is(.face--front, .fb-slice--front) .page::after, :is(.face--back, .fb-slice--back) .page::after { content: ''; position: absolute; top: 0; bottom: 0; width: 20%; pointer-events: none; }
:is(.face--front, .fb-slice--front) .page::after { left: 0; background: linear-gradient(90deg, rgb(50 32 16 / .36) 0, rgb(50 32 16 / .17) 2.5%, rgb(255 250 240 / .1) 7%, rgb(50 32 16 / .05) 11%, transparent 100%); }
:is(.face--back, .fb-slice--back) .page::after { right: 0; background: linear-gradient(270deg, rgb(50 32 16 / .36) 0, rgb(50 32 16 / .17) 2.5%, rgb(255 250 240 / .1) 7%, rgb(50 32 16 / .05) 11%, transparent 100%); }
:is(.face--front, .fb-slice--front) .page { box-shadow: inset -1px 0 0 rgb(80 60 40 / .08); }
:is(.face--back, .fb-slice--back) .page { box-shadow: inset 1px 0 0 rgb(80 60 40 / .08); }
.is-single .face--front .page::after, .is-single .fb-slice--front .page::after { width: 6%; }
/* Paperback: pages lie flatter, so a gentler gutter; slightly brighter, thinner stock. */
:is(.face, .fb-slice) :is(.page--cover, .page--back)::after { display: none; }
.fmt-paperback .page { background-color: #fdfbf6; }
.fmt-paperback :is(.face--front, .fb-slice--front) .page::after, .fmt-paperback :is(.face--back, .fb-slice--back) .page::after { width: 9%; opacity: .55; }
/* Special edition: gilt outer edges and a ribbon marker. */
.fmt-special-edition :is(.face--front, .fb-slice--front) .page::before, .fmt-special-edition :is(.face--back, .fb-slice--back) .page::before { content: ''; position: absolute; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #9a7630, #efd593, #a8823a, #f3dfa6, #8a6a2a); }
.fmt-special-edition :is(.face--front, .fb-slice--front) .page::before { right: 0; }
.fmt-special-edition :is(.face--back, .fb-slice--back) .page::before { left: 0; }
.fmt-special-edition .page--cover::before, .fmt-special-edition .page--back::before { display: none; }
.fb-ribbon { position: absolute; left: 50%; bottom: -34px; width: 10px; height: 60px; margin-left: 6px; background: #8f1f2e; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); z-index: 400; pointer-events: none; }

.page--blank { background-color: #f4efe4; }
.fmt-paperback .page--blank { background-color: #fbf8f1; }
.page-head-run { display: flex; justify-content: center; font-family: var(--ui); font-size: .6em; letter-spacing: .24em; text-transform: uppercase; color: #968a80; margin-bottom: 1.6em; }
.page-body { flex: 1; overflow: hidden; text-align: justify; hyphens: auto; -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent); mask-image: linear-gradient(180deg, #000 88%, transparent); }
.page-body p { margin: 0 0 .6em; text-indent: 1.3em; }
.page-body p:first-of-type, .page-body h4 + p { text-indent: 0; }
.page-body h4 { margin: .4em 0 1.1em; text-align: center; font-family: var(--display); font-weight: 400; font-size: 1.4em; color: #2a2527; }
.page-body h4::after { content: '✦'; display: block; font-size: .5em; color: #a8894f; margin-top: .6em; }
.page-body h4 + p::first-letter { float: left; font-family: var(--display); font-size: 2.95em; line-height: .8; padding: .06em .15em 0 0; color: var(--accent); }
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  .page-body h4 + p::first-letter { float: none; font-size: inherit; line-height: inherit; padding: 0; margin: 0 .4em 0 0; -webkit-initial-letter: 2; initial-letter: 2; }
}
.page-body .verse { text-align: left; text-indent: 0; }
.page-body .verse span { display: block; padding-left: 1.2em; text-indent: -1.2em; }
.page-foot { text-align: center; font-family: var(--ui); font-size: .62em; letter-spacing: .1em; color: #968a80; margin-top: .6em; }
.page--cover { padding: 0; background: none; box-shadow: none; }
/* Square corners: the cover sits exactly over the pages, so rounding would show them. */
.page--cover .cover { height: 100%; aspect-ratio: auto; border-radius: 0; }
.page--endpaper { align-items: center; justify-content: center; background: radial-gradient(circle at 25% 25%, var(--ep-accent, #a8894f) 0 1.5px, transparent 2px) 0 0 / 22px 22px, var(--ep-bg, #2a1d3a); }
.ex-libris { background: #fbf8f1; color: #2a2527; padding: 1.2em 1.4em; text-align: center; border: 1px solid #a8894f; outline: 1px solid #a8894f; outline-offset: 3px; font-family: var(--display); max-width: 70%; }
.ex-libris small { display: block; font-family: var(--ui); letter-spacing: .26em; text-transform: uppercase; font-size: .5em; color: #968a80; }
.ex-libris strong { display: block; font-weight: 400; font-size: 1.05em; margin-top: .3em; }
.ex-libris svg { width: 2em; color: #a8894f; margin: .5em auto 0; }
.page--title { align-items: center; justify-content: center; text-align: center; gap: .6em; }
.page--title .t-title { font-family: var(--display); font-size: 2em; line-height: 1.05; }
.page--title .t-sub { font-style: italic; color: #6b6068; }
.page--title .t-author { font-family: var(--ui); letter-spacing: .26em; text-transform: uppercase; font-size: .66em; color: #7b6a5a; margin-top: .6em; }
.page--title .t-rule { width: 22%; height: 1px; background: #a8894f; margin: .4em 0; }
.page--title .t-imprint { margin-top: auto; font-family: var(--ui); font-size: .56em; letter-spacing: .24em; text-transform: uppercase; color: #968a80; display: flex; flex-direction: column; align-items: center; gap: .6em; }
.page--title .t-imprint svg { width: 2.2em; color: #2a2527; }
.page--title .t-imprint .publisher { font-size: 1.7em; letter-spacing: .06em; text-transform: none; color: #2a2527; }
.ex-libris strong .publisher { letter-spacing: .04em; }
.back-cover-foot .imprint .publisher { font-size: 1.5em; letter-spacing: .06em; text-transform: none; }
.page--end { align-items: center; justify-content: center; text-align: center; gap: .8em; }
.page--end h4 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.6em; line-height: 1.15; }
.page--end p { margin: 0; color: #5a4f55; font-size: .92em; }
.page--end .e-price { font-family: var(--display); font-size: 1.6em; }
.page--end .e-actions { display: grid; gap: .6em; width: 80%; margin-top: .4em; }
.page--end .e-btn { font-family: var(--ui); font-size: max(12px, .62em); letter-spacing: .18em; text-transform: uppercase; padding: 1em; border: 1px solid #2a2527; background: #2a2527; color: #fbf8f1; cursor: pointer; }
.page--end .e-btn--ghost { background: transparent; color: #2a2527; }
.page--end .e-btn:hover { background: #000; border-color: #000; color: #fbf8f1; }
.page--end .e-btn--cart { background: #8b1d28; border-color: #8b1d28; }
.page--end .e-btn--cart:hover { background: #6e141e; border-color: #6e141e; }
.page--end .e-btn--cart.is-added, .page--end .e-btn--cart.is-added:hover { background: #2f5d45; border-color: #2f5d45; }
.page--end .e-btn:disabled { opacity: .4; cursor: not-allowed; }
.page--back { padding: 0; background: none; box-shadow: none; }
.back-cover { height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 12% 11%; background-color: var(--bg); color: var(--fg); border-radius: 0; font-family: var(--text); font-size: calc(var(--page-w) * .038); }
.back-cover blockquote { margin: 0; font-style: italic; line-height: 1.55; }
.back-cover-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; }
.back-cover-foot .imprint { font-family: var(--ui); font-size: .62em; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); display: flex; flex-direction: column; gap: .5em; }
.back-cover-foot .imprint svg { width: 2.4em; }
.back-cover .barcode { width: 42%; }

/* E-reader (ebook look inside): one page at a time, no paper, no gutter */
.ereader { position: relative; width: calc(var(--page-w) + 44px); padding: 26px 22px 54px; border-radius: 26px; background: #111012; box-shadow: 0 50px 80px -40px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .09), inset 0 1px 0 rgb(255 255 255 / .08); }
.ereader-screen { position: relative; width: var(--page-w); height: var(--page-h); overflow: hidden; border-radius: 4px; background: #f3f1ea; }
.ereader-screen .page { position: absolute; inset: 0; background: #f3f1ea; box-shadow: none; transition: opacity .35s ease, transform .35s ease; font-size: calc(var(--page-w) * .044); text-align: left; }
.ereader-screen .page::after, .ereader-screen .page::before { display: none; }
.ereader-screen .page.is-hidden { opacity: 0; transform: translateX(12px); pointer-events: none; }
.ereader-screen .page.is-prev { transform: translateX(-12px); }
.ereader-screen .page-body { text-align: left; hyphens: manual; }
.ereader-bar { position: absolute; left: 22px; right: 22px; bottom: 20px; display: flex; align-items: center; gap: 12px; font-family: var(--ui); font-size: 11px; letter-spacing: .12em; color: rgb(255 255 255 / .55); }
.ereader-track { flex: 1; height: 2px; background: rgb(255 255 255 / .15); border-radius: 2px; overflow: hidden; }
.ereader-fill { height: 100%; width: 0; background: rgb(255 255 255 / .6); transition: width .35s; }

/* ------------------------------------------------------------------ refinements */
.basket-line .qty { margin-top: 12px; }
.basket-line .remove { display: block; margin-top: 10px; }
.flipbook:focus, .ereader:focus { outline: none; }

/* ------------------------------------------------------------------ delivery (checkout) */

.checkout { max-width: var(--max); margin-inline: auto; padding: 0 var(--gutter) 120px; }
.checkout-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.checkout-form fieldset { margin: 0 0 36px; padding: 0; border: 0; display: grid; gap: 18px; }
.checkout-form legend { margin-bottom: 14px; padding: 0; font-family: var(--ui); font-size: 11.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.checkout .field, .track .field { display: grid; gap: 6px; }
.checkout .field > span, .track .field > span { font-family: var(--ui); font-size: 13px; color: var(--ink-2); }
.checkout .field input, .checkout .field select, .track .field input { width: 100%; border: 0; border-bottom: 1px solid var(--hair-2); background: none; padding: 9px 0; font-family: var(--text); font-size: 1.1rem; border-radius: 0; outline: none; }
.checkout .field input:focus, .checkout .field select:focus, .track .field input:focus { border-bottom-color: var(--ink); }
.checkout .field small, .track .field small { font-family: var(--ui); font-size: 12.5px; color: var(--muted); }
.checkout .field-error { font-style: normal; font-family: var(--ui); font-size: 12.5px; color: var(--danger); }
.checkout .field-error:empty { display: none; }
.checkout .has-error input, .checkout .has-error select { border-bottom-color: var(--danger); }
.checkout-summary { position: sticky; top: 108px; display: grid; gap: 16px; padding: 28px; border: 1px solid var(--hair); }
.checkout-summary h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.5rem; }
.summary-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.summary-lines li { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; }
.summary-lines .cover { box-shadow: 0 6px 10px -6px rgb(0 0 0 / .45); }
.summary-title strong { display: block; font-family: var(--display); font-weight: 400; font-size: 1.05rem; line-height: 1.2; }
.summary-title em { font-style: normal; font-family: var(--ui); font-size: 12.5px; color: var(--muted); }
.summary-price { font-family: var(--ui); font-size: 14px; }
.summary-totals { margin: 0; border-top: 1px solid var(--hair); padding-top: 14px; display: grid; gap: 8px; font-family: var(--ui); font-size: 14px; }
.summary-totals div { display: flex; justify-content: space-between; gap: 12px; }
.summary-totals dt { color: var(--ink-2); }
.summary-totals dd { margin: 0; }
.summary-totals .grand { padding-top: 10px; border-top: 1px solid var(--hair); align-items: baseline; }
.summary-totals .grand dd { font-family: var(--display); font-size: 1.6rem; }
.checkout-summary .button { width: 100%; }
.button[aria-disabled='true'] { opacity: .4; pointer-events: none; }
.status--print_on_demand { color: var(--ink-2); }
@media (max-width: 900px) {
  .checkout-body { grid-template-columns: 1fr; }
  .checkout-summary { position: static; }
  .field-row { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ order tracking */

.track { max-width: var(--max); margin-inline: auto; padding: 0 var(--gutter) 120px; }
.track-form { max-width: 440px; margin: 0 auto; display: grid; gap: 22px; }
.track-form .button { justify-self: start; }
.track-note { max-width: 560px; margin: 36px auto 0; text-align: center; font-family: var(--ui); font-size: 13px; color: var(--muted); }
.track-note a, .track-note .link-button { color: var(--ink-2); }
.track-forget { margin: 0; }
.track-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.parcels { display: grid; gap: 28px; }
.parcel { display: grid; gap: 16px; padding: 28px; border: 1px solid var(--hair); }
.parcel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.parcel-head h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.4rem; }
.parcel-kind { font-family: var(--ui); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.track-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr auto; }
.track-steps li { position: relative; padding-top: 22px; font-family: var(--ui); font-size: 12.5px; color: var(--muted); }
.track-steps li::before { content: ''; position: absolute; top: 4px; left: 0; right: 0; height: 1px; background: var(--hair-2); }
.track-steps li:last-child::before { display: none; }
.track-steps li::after { content: ''; position: absolute; top: 0; left: 0; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 1px solid var(--hair-2); }
.track-steps li.done, .track-steps li.now { color: var(--ink); }
.track-steps li.done::before { background: var(--ink); }
.track-steps li.done::after { background: var(--ink); border-color: var(--ink); }
.track-steps li.now::after { background: var(--accent); border-color: var(--accent); }
.parcel-status { margin: 0; font-family: var(--text); font-size: 1.1rem; }
.parcel-status--note { font-style: italic; color: var(--ink-2); }
.parcel-tracking { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; font-family: var(--ui); font-size: 14px; }
.parcel-tracking .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; letter-spacing: .02em; }
.parcel-items { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--hair); display: grid; gap: 8px; }
.parcel-items li { display: flex; justify-content: space-between; gap: 16px; }
.parcel-items .t { font-family: var(--display); font-size: 1.05rem; }
.parcel-items .e { font-family: var(--ui); font-size: 13px; color: var(--muted); white-space: nowrap; }
.track-summary { position: sticky; top: 108px; padding: 28px; border: 1px solid var(--hair); display: grid; gap: 14px; }
.track-summary dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; font-family: var(--ui); font-size: 14px; }
.track-summary dt { color: var(--ink-2); }
.track-summary dd { margin: 0; text-align: right; }
.track-total { margin: 0; padding-top: 12px; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; align-items: baseline; font-family: var(--ui); font-size: 14px; color: var(--ink-2); }
.track-total strong { font-family: var(--display); font-weight: 400; font-size: 1.5rem; color: var(--ink); }
.track-summary .small { margin: 0; font-size: 12.5px; }
@media (max-width: 900px) {
  .track-body { grid-template-columns: 1fr; }
  .track-summary { position: static; }
}

/* Look inside: hand-picked pages uploaded as a PDF, shown as images */
.page--image { padding: 0; background: #fff; }
.page--image img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
.page--back.page--image img { object-fit: cover; }
.page--end a.e-btn { display: block; text-align: center; text-decoration: none; }
.page--end a.e-btn:hover { color: #fbf8f1; }
.ereader-screen .page--image { background: #fff; }

/* Contact page: details from Site settings */
.contact-details { max-width: 700px; margin: 48px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; padding-top: 32px; border-top: 1px solid var(--hair); }
.contact-details h2 { margin: 0 0 8px; font-family: var(--ui); font-size: 11.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.contact-details p, .contact-details ul { margin: 0; padding: 0; list-style: none; font-size: 1.1rem; }
.contact-details .address { white-space: pre-line; }
.contact-details a { color: var(--accent); }

/* ------------------------------------------------------------------ cookie choice (only when Google tags are set up) */

.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 520px; padding: 20px 22px; background: #fff; border: 1px solid var(--hair); box-shadow: 0 18px 40px -18px rgb(0 0 0 / .35); display: grid; gap: 14px; }
.consent[hidden] { display: none; }
.consent--center { left: 50%; right: auto; width: min(560px, calc(100% - 32px)); translate: -50% 0; }
.consent--right { left: auto; right: 16px; }
.consent p { margin: 0; font-family: var(--ui); font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.consent a { color: var(--ink); }
.consent-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.consent-actions .button { min-width: 120px; justify-content: center; }
.colophon-base .link-button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--muted); text-decoration: none; }
.colophon-base .link-button:hover { color: var(--ink); }

/* Small phones: a smaller seal and name, so the menu button, name and basket
   fit on one row. Each pair is measured to split evenly around the letters. */
@media (max-width: 480px) {
  .masthead-inner { gap: 14px; }
  .wordmark { gap: 10px; }
  .wordmark .seal { width: 31px; }
  .wordmark img.seal { height: 31px; }
  .wordmark .publisher { font-size: .8rem; }
}
@media (max-width: 359px) {
  .masthead-inner { gap: 10px; }
  .wordmark { gap: 8px; }
  .wordmark .seal { width: 28px; }
  .wordmark img.seal { height: 28px; }
  .wordmark .publisher { font-size: .7rem; }
}

/* Wordmark centring for browsers without text-box trimming (Firefox): the same
   position as the trimmed box, from Cinzel's line metrics. Last, so it wins. */
@supports not (text-box: trim-both cap alphabetic) {
  .wordmark .publisher { translate: 0 .109em; }
  @media (max-width: 900px) { .wordmark .publisher { translate: 0 .064em; } }
  @media (max-width: 480px) { .wordmark .publisher { translate: 0 .156em; } }
  @media (max-width: 359px) { .wordmark .publisher { translate: 0 .089em; } }
}

/* Import duties may be due on arrival (destinations outside the primary fulfilment zones). */
.customs-notice { margin: 0; padding: 10px 12px; border-left: 2px solid var(--accent); background: var(--accent-soft); font-family: var(--ui); font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }