/* The Wolfsbane Library: Oxblood & Gilt (docs/DESIGN.md).
   EB Garamond, the face our books are set in, for display and reading; Jost for the interface.
   Ivory paper, warm black, gilt for the marks a binder would tool by hand, and the house red, kept rare. */

:root {
  --paper: #fcfbf8;
  --ink: #1c1718;
  --ink-2: #3d3534;
  --muted: #6d6461;
  --hair: #ebe7df;
  --hair-2: #ddd8ce;
  --wash: #f4f2ec;
  --accent: #8b1d28;
  --accent-deep: #6e141e;
  --accent-soft: #f5e8e5;
  --gilt: #8c6a2a;
  --gilt-ink: #765820;
  --night: #1a1416;
  --night-2: #241c1e;
  --gilt-light: #d1ae66;
  --danger: #9a2d2d;
  --ok: #2f6a4a;
  --display: 'EB Garamond', serif;
  --text: 'EB Garamond', serif;
  --ui: 'Jost', 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.62;
  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(--accent); outline-offset: 3px; }
::selection { background: #e6d6ad; color: var(--ink); }
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 */

/* Labels speak in italic, not in tracked capitals. */
.eyebrow, .kicker {
  margin: 0 0 1rem;
  font-family: var(--text);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--gilt-ink);
}
.eyebrow span { margin-left: 1.2em; }
.display {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.006em;
  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.8rem, 3vw, 2.6rem); line-height: 1.1; }

.text-link {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--text); font-size: 1.12rem; font-style: italic; line-height: 1.3;
  text-decoration: none; color: var(--ink);
  padding-bottom: 2px; border-bottom: 1px solid var(--gilt);
}
.text-link .arrow { width: 17px; height: 17px; transition: transform .3s, color .3s; }
.text-link:hover .arrow { color: var(--accent); }
.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: .14em; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
  transition: background-color .25s, border-color .25s, color .25s;
}
/* Buttons fill with ink on hover; only Add to basket carries the red. */
.button:hover { background: var(--ink); border-color: var(--ink); 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; }
/* Maintenance mode (back office): the site stays open, with this notice, and buying is paused. */
.maintenance { margin: 0; padding: 10px var(--gutter); background: var(--ink); color: var(--paper); text-align: center; font-family: var(--ui); font-size: 13px; line-height: 1.5; }
.maintenance strong { margin-right: .5em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }
/* First visit: where the prices are for, detected from the visitor's location. Quiet, and only once. */
/* Solid, not see-through: text over a solid colour keeps the screen's sharpest type rendering
   (ClearType and the like); over a translucent, blurred bar browsers fall back to softer greyscale. */
.masthead { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 3px double var(--hair-2); }
.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: .16em; 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(--accent); }
.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 drawn with the rest of the page, never on a layer of its
 * own: a separate layer turns the screen's sharpest type rendering (ClearType
 * and the like) into softer greyscale. The browser places the seal and the
 * letters on whole pixels itself.
 */
.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%; }
.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; }
.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: .16em; text-transform: uppercase; }
.basket-link svg { width: 20px; height: 20px; }
.basket-link .count { min-width: 1.4em; text-align: center; font-variant-numeric: tabular-nums; }
.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; }
  /* Phones: the count becomes a small badge on the bag itself, and only when it holds something. */
  .basket-link { position: relative; padding: 6px; }
  .basket-link .count {
    position: absolute; top: 0; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    display: grid; place-items: center; background: var(--ink); color: var(--paper);
    font-size: 10px; font-weight: 600; letter-spacing: 0; line-height: 1; box-shadow: 0 0 0 2px var(--paper);
  }
  .basket-link .count[data-empty] { 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 { position: relative; padding-block: clamp(64px, 9vw, 120px); border-top: 1px solid var(--hair-2); }
/* A gilt diamond on the rule between sections, as tooled on a binding. */
.band::before { content: ''; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; translate: -50% 0; rotate: 45deg; background: var(--paper); border: 1px solid var(--gilt); }
.band-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); }
.band-head .text-link { flex: none; white-space: nowrap; }

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

/* The night hero: a warm black band the full width of the window (the shadow and clip carry the
   colour past the content's edges with no extra markup), the lead book in a low pool of gilt light. */
.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);
  background: var(--night); box-shadow: 0 0 0 100vmax var(--night); clip-path: inset(0 -100vmax);
  /* along its foot, the full width too, a rule in the house red */
  border-bottom: 3px solid var(--accent); border-image: linear-gradient(var(--accent), var(--accent)) 0 0 100% 0 / 0 0 3px 0 / 0 100vmax;
  overflow: clip; color: #efe7da;
}
.hero--text { grid-template-columns: minmax(0, 1fr); }
.hero .eyebrow { color: var(--gilt-light); }
.hero .display { font-size: clamp(2.6rem, 4.8vw, 4.6rem); line-height: 1.04; color: #f7f0e3; }
.hero .display em { color: var(--gilt-light); }
.hero .lede { margin-top: clamp(24px, 3vw, 40px); color: #d4cbc6; }
.hero .text-link { margin-top: 36px; color: #f7f0e3; border-bottom-color: var(--gilt-light); }
.hero .text-link:hover { color: var(--gilt-light); }
.hero-book { position: relative; isolation: isolate; justify-self: center; display: grid; gap: 22px; width: min(100%, 330px); text-decoration: none; color: #f7f0e3; }
.hero-book::before { content: ''; position: absolute; z-index: -1; inset: -18% -45% 6%; background: radial-gradient(closest-side, rgb(209 174 102 / .26), rgb(209 174 102 / .08) 55%, transparent); pointer-events: none; }
.hero-book:hover { color: #f7f0e3; }
.hero-cover .cover { box-shadow: 0 2px 2px rgb(0 0 0 / .3), 0 30px 50px -24px rgb(0 0 0 / .8); transition: transform .7s cubic-bezier(.2, .7, .2, 1), box-shadow .7s; }
.hero-book:hover .hero-cover .cover { transform: translateY(-8px); box-shadow: 0 2px 2px rgb(0 0 0 / .3), 0 44px 60px -28px rgb(0 0 0 / .85); }
.hero-caption { display: grid; gap: 2px; text-align: center; }
.hero-caption strong { font-family: var(--display); font-weight: 400; font-size: 1.3rem; }
.hero-caption span { font-family: var(--text); font-style: italic; font-size: 1.05rem; color: #b5aba6; }
.hero + .band { border-top: 0; }
.hero + .band::before { display: none; }
@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)); } }
/* Phones: never a single column. Two books side by side, with the gaps and
   captions scaled down so both still read comfortably. */
@media (max-width: 520px) {
  .tiles, .tiles--row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; }
  .tiles .caption { padding-top: 14px; }
  .tiles .tile-title { font-size: 1.02rem; }
  .tiles .tile-author { font-size: .95rem; }
  .tiles .tile-meta { margin-top: 8px; font-size: 12px; }
}
/* backwards, not both: once in, a tile keeps no transform, so its cover is drawn on whole pixels (covers.js). */
.tile { animation: tile-in .8s cubic-bezier(.2, .7, .2, 1) backwards; }
.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; }
/* The number of a numbered edition, in gilt. */
.caption .no { display: block; margin-bottom: 4px; font-family: var(--text); font-style: italic; font-size: 1.05rem; line-height: 1.2; color: var(--gilt-ink); }
.tile-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.24rem; line-height: 1.2; }
.tile-author { margin: 2px 0 0; font-family: var(--text); font-style: italic; font-size: 1rem; line-height: 1.35; color: var(--muted); }
.tile-year { white-space: nowrap; }
.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 contents page. Each top-level subject is numbered, with a dotted leader to its count,
   and its sections listed under it. */
.subjects { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); column-gap: clamp(32px, 6vw, 96px); counter-reset: subject; }
.subject { padding: 18px 0 22px; counter-increment: subject; }
.subject-link { display: flex; align-items: baseline; gap: 12px; text-decoration: none; color: var(--ink); }
.subject-link::after { content: ''; order: 1; flex: 1; min-width: 24px; border-bottom: 1.5px dotted var(--hair-2); translate: 0 -.3em; }
.subject-name { font-family: var(--display); font-size: 1.6rem; line-height: 1.2; }
.subject-name::before { content: counter(subject, upper-roman) '.'; display: inline-block; min-width: 2.4em; font-style: italic; font-size: .7em; color: var(--gilt-ink); }
.subject-count { order: 2; flex: none; font-family: var(--text); font-style: italic; font-size: 1.05rem; color: var(--muted); }
.subject-link:hover .subject-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.subject-subs { margin: 6px 0 0 calc(1.6rem * .7 * 2.4); 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; }

/* Home: each section numbered as a part of a book, in gilt over a short rule. */
.page-home main { counter-reset: part; }
.page-home .band { counter-increment: part; }
.page-home .band-head .section-title::before {
  content: counter(part, upper-roman); display: block; width: max-content; margin-bottom: 10px; padding-right: 44px;
  font-size: 1rem; font-style: italic; line-height: 1.4; color: var(--gilt-ink);
  background: linear-gradient(var(--gilt), var(--gilt)) right 58% / 32px 1px no-repeat;
}

/* The register of new books: numbered lines under column heads, like a library's accession book. On
   wider screens a panel beside the list, as tall as it, shows the cover of the line pointed at (the
   first, until one is); on phones each line carries its own small cover. The line in hand is marked
   in the house red. */
.register { --plate: min(28%, 360px); position: relative; padding-left: calc(var(--plate) + clamp(40px, 5vw, 72px)); }
.register::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--plate); background: var(--wash); }
.register-head, .reg-link { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 4.5rem 12.5rem 6rem; align-items: center; column-gap: 18px; padding-inline: 14px; }
/* Every cell in its own column (the cover, placed in the panel, takes none). */
.reg-no { grid-area: 1 / 1; } .reg-title { grid-area: 1 / 2; } .reg-year { grid-area: 1 / 3; } .reg-formats { grid-area: 1 / 4; } .reg-price { grid-area: 1 / 5; }
.register-head { margin: 0; padding-block: 0 12px; border-bottom: 1px solid var(--ink); font-family: var(--ui); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.register-head span:last-child, .reg-price { justify-self: end; }
.register-list { list-style: none; margin: 0; padding: 0; }
.reg-link { height: 76px; border-bottom: 1px solid var(--hair); text-decoration: none; color: var(--ink); }
.reg-no { font-family: var(--text); font-style: italic; font-size: 1.05rem; color: var(--gilt-ink); transition: color .25s; }
.reg-title { min-width: 0; }
.reg-title strong, .reg-title em { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reg-title strong { font-family: var(--display); font-weight: 400; font-size: 1.24rem; line-height: 1.25; }
.reg-title em { font-size: 1rem; line-height: 1.3; color: var(--muted); }
.reg-year { font-style: italic; font-size: 1.02rem; color: var(--muted); }
.reg-formats { font-family: var(--ui); font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reg-price { font-family: var(--ui); font-size: 14.5px; white-space: nowrap; }
.reg.is-sold-out .reg-title strong, .reg.is-sold-out .reg-price { color: var(--muted); }
.reg-cover { position: absolute; z-index: 1; left: calc(var(--plate) / 2); top: 50%; width: calc(var(--plate) * .56); translate: -50% -50%; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; pointer-events: none; }
.reg-cover .cover { box-shadow: var(--book-shadow); }
.reg:hover .reg-cover, .reg:focus-within .reg-cover,
.register-list:not(:has(.reg:hover, .reg:focus-within)) .reg:first-child .reg-cover { opacity: 1; visibility: visible; transition: opacity .35s; }
.reg:hover .reg-link, .reg:focus-within .reg-link,
.register-list:not(:has(.reg:hover, .reg:focus-within)) .reg:first-child .reg-link { box-shadow: inset 2px 0 0 var(--accent); }
.reg:hover .reg-no, .reg:focus-within .reg-no,
.register-list:not(:has(.reg:hover, .reg:focus-within)) .reg:first-child .reg-no { color: var(--accent); }
.reg-link:hover .reg-title strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
@media (max-width: 1300px) {
  .register-head, .reg-link { grid-template-columns: 2.4rem minmax(0, 1fr) 4.5rem 6rem; }
  .register-head span:nth-child(4), .reg-formats { display: none; }
  .reg-price { grid-area: 1 / 4; }
}
@media (max-width: 900px) {
  .register { padding-left: 0; }
  .register::before, .register-head, .reg-no, .reg-year { display: none; }
  .register-list { border-top: 1px solid var(--hair-2); }
  .reg-link { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 2px 16px; height: auto; padding: 14px 4px 14px 0; }
  .reg-link, .reg:hover .reg-link, .reg:focus-within .reg-link,
  .register-list:not(:has(.reg:hover, .reg:focus-within)) .reg:first-child .reg-link { box-shadow: none; }
  .reg-cover, .register .reg .reg-cover { position: static; width: 56px; translate: none; opacity: 1; visibility: visible; grid-area: 1 / 1 / span 2; }
  .reg-title { grid-area: 1 / 2; }
  .reg-title strong { font-size: 1.18rem; white-space: normal; }
  .reg-title em { font-size: .95rem; }
  .reg-formats { display: block; grid-area: 2 / 2; font-size: 12px; }
  .reg-price { grid-area: 1 / 3 / span 2; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .reg-cover, .reg-no { transition: none; } }

/* 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 10px; font-family: var(--text); font-style: italic; font-size: 1.02rem; color: var(--gilt-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: #8a8191; 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; }
  /* Centred both ways; the left padding matches the letter-spacing trailing the last letter. */
  .filters-toggle { display: inline-flex; width: 100%; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: 0 0 0 .2em; border: 1px solid var(--ink); background: none; color: var(--ink); font-family: var(--ui); font-size: 12px; line-height: 1; 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-bottom-color: var(--hair-2); padding-top: 6px; padding-bottom: 6px; font-size: 14px; }
.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;
}
/* The still cover is the 3D book seen face on: book.js gives it the book's own size (dimsOf), and its art
   fills it exactly as it fills the book's front (stretched to the trim, never cropped). */
.stage-flat { width: min(44%, 300px); transition: opacity .45s, transform .45s; }
.stage-flat .cover { box-shadow: var(--book-shadow-lift); }
.stage-flat .cover--image img { object-fit: fill; }
.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; }
/* Soft start: the book waits unseen over the flat cover, fades in, then the flat cover fades away beneath it. */
.book-stage > .obj { transition: opacity .42s ease; }
.book-stage > .obj.is-waiting { opacity: 0; pointer-events: none; }
.stage-flat.is-handed { opacity: 0; transform: none; transition: opacity .35s ease; }
.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: #fefdfb; z-index: 1; }
.edition:has(input:checked) { border-color: var(--ink); background: #ffffff; box-shadow: inset 3px 0 0 var(--accent); 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--digital { color: var(--ink-2); }
.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 { margin: 14px 0 0; font-size: .95rem; color: var(--ink-2); }
.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); }
/* Who holds what: the text's rights and our edition's, in small print under the details. */
.book-rights { margin: 18px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.book-rights a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; white-space: nowrap; }
.book-rights a:hover { color: var(--ink, currentColor); }
.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: 'Cormorant Garamond', serif; font-weight: 600; font-size: 3.35em; line-height: .78; padding: .07em .11em 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 .32em 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; min-height: 160px; }
.prose .embed iframe { width: 100%; height: 100%; border: 0; }
.prose .embed--audio iframe { height: 160px; }
/* A player waiting for consent (src/web/markdown.ts): the notice fills its place until it is played. */
.embed-gate { height: 100%; min-height: 160px; box-sizing: border-box; display: grid; align-content: center; gap: 12px; padding: 22px 26px; background: var(--wash); font-family: var(--ui); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.embed-gate p { margin: 0; }
.embed-gate strong { color: var(--ink); }
.embed-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.embed-actions a { color: var(--ink); }
.embed-always { font-size: 13px; }
@media (max-width: 560px) { .prose .embed--video { aspect-ratio: auto; } .prose .embed--video:has(iframe) { aspect-ratio: 16 / 9; } }
.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; } }

/* The business's details ([[company]] on the Legal notice): label and value side by side, stacked on phones. */
.company-details { margin: 0 0 1.6em; font-family: var(--ui); font-size: 15px; border-top: 1px solid var(--hair); }
.company-details > div { display: grid; grid-template-columns: 11rem 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.company-details dt { color: var(--muted); letter-spacing: .04em; }
.company-details dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .company-details > div { grid-template-columns: 1fr; gap: 2px; } }
.company-contact { font-style: italic; }
/* The model withdrawal form ([[company:form]]): a sheet with a line to write on for each answer. */
.model-form { margin: 0 0 1.6em; padding: 22px 24px; background: var(--wash); font-family: var(--ui); font-size: 15px; }
.model-form p { margin: 0 0 .9em; }
.model-form dl { margin: 1.2em 0 0; display: grid; gap: 14px; }
.model-form dl > div { display: grid; grid-template-columns: max-content 1fr; gap: 10px; align-items: end; }
.model-form dd { margin: 0; min-height: 1.2em; border-bottom: 1px dotted var(--muted); }

.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--email form { margin: 8px 0 28px; }
.notice-undo { font-family: var(--ui); font-size: 15px; color: var(--muted); }
.notice p { margin: 1.2rem 0 0; }

/* Pinned to the window's edges (not a height in dvh), so its foot stays on the
   bottom edge however the phone's toolbars move; only the list inside scrolls. */
.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(460px, 100vw); height: auto; max-height: none; padding: 0; border: 0; border-left: 1px solid var(--hair); background: var(--paper); color: var(--ink); overscroll-behavior: contain; }
html.is-pinned { overflow: hidden; scrollbar-gutter: stable; }
html.is-pinned body { position: fixed; inset-inline: 0; width: 100%; overflow: hidden; }
.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 { flex: none; 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 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 8px 28px; }
.drawer-foot { flex: none; padding: 24px 28px max(28px, calc(env(safe-area-inset-bottom) + 16px)); 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: 30px; border-color: var(--hair-2); border-radius: 15px; padding: 0 2px; }
.basket-line .qty button { width: 26px; height: 26px; border-radius: 50%; font-size: 15px; line-height: 1; color: var(--muted); transition: color .15s, background-color .15s; }
.basket-line .qty button:hover:not(:disabled) { color: var(--ink); background: var(--wash); }
.basket-line .qty button:disabled { opacity: .35; cursor: default; }
.basket-line .qty output { min-width: 22px; font-size: 13px; font-variant-numeric: tabular-nums; }
.basket-line-price { font-family: var(--ui); font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.totals { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--ui); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.totals strong { font-family: var(--ui); font-weight: 500; font-size: 1.15rem; letter-spacing: .01em; text-transform: none; color: var(--ink); font-variant-numeric: tabular-nums; }
.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 */

/* The footer is night: the page's colours turned for it here, and back for the panel that opens over it. */
.colophon { margin-top: 0; background: var(--night); border-top: 1px solid var(--gilt); }
.colophon-grid, .colophon-base { --ink: #f3ece0; --ink-2: #d4cbc6; --muted: #aca29d; --hair: rgb(255 255 255 / .12); --hair-2: rgb(255 255 255 / .22); }
.colophon .ship-to-panel { --ink: #1c1718; --ink-2: #3d3534; --muted: #6d6461; --hair: #ebe7df; --hair-2: #ddd8ce; color: var(--ink); }
.colophon .wordmark, .colophon .wordmark .seal { color: var(--ink); }
.colophon svg.seal path { fill: var(--night); }
.colophon :focus-visible { outline-color: var(--gilt-light); }
.colophon-set { display: flex; align-items: center; gap: 10px; font-family: var(--text); font-style: italic; font-size: 1rem; color: var(--gilt-light); }
.colophon-set::before { content: ''; flex: none; width: 7px; height: 7px; rotate: 45deg; border: 1px solid currentColor; }
@media (max-width: 600px) { .colophon-set { justify-content: center; } }
/* The brand and its note, then even columns (Help, Company, Follow), each
   under a small heading on one shared baseline. Contact details live on the
   Contact page. */
.colophon-grid {
  max-width: var(--max); margin: 0 auto; padding: 72px var(--gutter) 56px;
  display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 40px 48px;
  font-family: var(--ui); font-size: 14px; color: var(--ink-2);
}
.colophon-about p { max-width: 30em; margin: 20px 0 0; line-height: 1.7; }
.colophon-col { display: block; }
.colophon-head { margin: 6px 0 20px; font-family: var(--ui); font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.colophon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.colophon-col a { color: var(--ink-2); transition: color .15s; }
.colophon-col a:hover, .colophon-col a:focus-visible { color: var(--ink); }
.colophon a { text-decoration: none; }
.colophon .social { margin: -8px 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-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: 980px) { .colophon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .colophon-about { grid-column: 1 / -1; } }
/* Tablets and phones: the small print stacks, centred, in a calm order: the
   legal links, where we ship to, then the copyright. */
@media (max-width: 980px) {
  .colophon-base { flex-direction: column; justify-content: center; gap: 14px; padding-top: 26px; text-align: center; }
  .colophon-base nav { order: 1; }
  .colophon-base .ship-to { order: 2; }
  .colophon-base > span { order: 3; font-size: 11px; letter-spacing: .16em; }
  .colophon-base ul { justify-content: center; }
}
/* Phones: the brand and its note centred over a hairline, then Help and
   Company side by side, centred in their halves. */
@media (max-width: 600px) {
  .colophon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; padding: 44px var(--gutter) 36px; text-align: center; }
  .colophon-about { padding-bottom: 30px; border-bottom: 1px solid var(--hair); }
  .colophon-about p { margin: 16px auto 0; max-width: 28em; font-size: 13.5px; line-height: 1.65; }
  .colophon-head { margin: 0 0 14px; }
  .colophon ul { gap: 10px; justify-items: center; }
  .colophon-col a { display: inline-block; padding: 2px 0; }
  .colophon-follow { grid-column: 1 / -1; }
  .colophon .social { margin: -6px 0 0; justify-content: center; }
  .colophon-base { padding: 22px var(--gutter) 30px; gap: 12px; }
  .colophon-base ul { gap: 6px 22px; }
}

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

/* Everything fits the window, and nothing in it ever scrolls: a page lifted in
   mid-turn (and the frame its fold is cut with) may reach past the edges. */
.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); overflow: clip; overscroll-behavior: contain; }
.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;
  --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;
}
/* The book itself, lying flat: 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[data-position='closed-front'] .fb-book { transform: translateX(calc(var(--page-w) * -.5)); }
.flipbook[data-position='closed-back'] .fb-book { transform: translateX(calc(var(--page-w) * .5)); }
.flipbook.no-anim .fb-book { transition: none; }
/* Perspective only for a hardcover's boards, which swing over; pages peel flat. */
.fb-stage { position: absolute; inset: 0; perspective: calc(var(--page-w) * 7.5); perspective-origin: 50% 45%; }

/* A light shadow under each side of the book, as if on a table seen from above. */
.fb-shadow { position: absolute; top: 0; bottom: 0; width: 50%; border-radius: 2px; pointer-events: none; opacity: 0; transition: opacity .3s;
  box-shadow: 0 1px 2px rgb(40 30 22 / .12), 0 10px 28px -10px rgb(40 30 22 / .28); }
.fb-shadow--left { left: 0; }
.fb-shadow--right { left: 50%; }
.flipbook.has-left .fb-shadow--left, .flipbook.has-right .fb-shadow--right { opacity: 1; }
.flipbook.no-anim .fb-shadow { transition: none; }

/* Leaves: a page and its back. A turning leaf hides its faces behind the peel. */
.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%; }
.face > .fb-shade { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
/* The peel (placed by script from the spine's head). Only transforms and
   opacity change as a page turns, so nothing is redrawn: the crease is a
   mask on an unturned frame (the page lying stays sharp); light and shadow are fixed gradients. */
.fb-peel { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.fb-peel-near { position: absolute; left: 0; top: 0; mask-repeat: no-repeat; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; }
.fb-peel-page { position: absolute; left: 0; top: 0; width: var(--page-w); height: var(--page-h); overflow: hidden; transform-origin: 0 0; will-change: transform; }
.fb-peel-page > .page { width: 100%; height: 100%; }
/* The fold casts a soft shadow onto the page it lies over. */
.fb-peel-page.is-fold { box-shadow: 0 1px 16px rgb(30 20 12 / .26); }
.fb-peel-under { position: absolute; left: 0; top: 0; width: var(--page-w); height: var(--page-h); overflow: hidden; transform-origin: 0 0; }
.fb-peel-grad { position: absolute; left: 0; top: 0; width: 100px; z-index: 6; opacity: 0; transform-origin: 0 0; will-change: transform, opacity; pointer-events: none; }
/* The page still lying rises into the crease. */
.fb-peel-grad--lying { background: linear-gradient(90deg, transparent, rgb(40 28 18 / .16)); }
/* The fold, from the crease out to its corner: shade in the crease, a sheen along the curl. */
.fb-peel-grad--fold { background: linear-gradient(90deg, rgb(40 28 18 / .32) 0, rgb(40 28 18 / .14) 4%, rgb(255 253 246 / .55) 25%, rgb(255 253 246 / 0) 72%, rgb(40 28 18 / .07) 100%); }
/* The page uncovered: the sheet's shadow, darkest under the crease. */
.fb-peel-grad--under { background: linear-gradient(90deg, rgb(30 20 12 / .4), rgb(30 20 12 / .12) 35%, transparent); }
/* The shadow a swinging board 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;
}
/* The gutter: a fine crease where the pages meet, the paper just shaded into it. */
:is(.face--front, .fb-peel--front) .page::after, :is(.face--back, .fb-peel--back) .page::after { content: ''; position: absolute; top: 0; bottom: 0; width: 9%; pointer-events: none; }
:is(.face--front, .fb-peel--front) .page::after { left: 0; background: linear-gradient(90deg, rgb(50 32 16 / .16) 0, rgb(50 32 16 / .05) 22%, transparent 100%); }
:is(.face--back, .fb-peel--back) .page::after { right: 0; background: linear-gradient(270deg, rgb(50 32 16 / .16) 0, rgb(50 32 16 / .05) 22%, transparent 100%); }
:is(.face, .fb-peel-page) :is(.page--cover, .page--back)::after { display: none; }
.fmt-paperback .page { background-color: #fdfbf6; }
.fmt-paperback :is(.face--front, .fb-peel--front) .page::after, .fmt-paperback :is(.face--back, .fb-peel--back) .page::after { width: 6%; opacity: .7; }
/* Special edition: gilt outer edges. */
.fmt-special-edition :is(.face--front, .fb-peel--front) .page::before, .fmt-special-edition :is(.face--back, .fb-peel--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-peel--front) .page::before { right: 0; }
.fmt-special-edition :is(.face--back, .fb-peel--back) .page::before { left: 0; }
.fmt-special-edition .page--cover::before, .fmt-special-edition .page--back::before { display: 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 .1em 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 .28em 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--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; }
.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(--ui); font-weight: 400; font-size: 1.3em; letter-spacing: .02em; font-variant-numeric: lining-nums tabular-nums; color: #1d1a1c; }
/* One slim button on a single line, and a quiet text link under it: sized to
   the page, so they stay light on a phone's small spread. */
.page--end .e-actions { display: flex; flex-direction: column; align-items: center; gap: .9em; width: 100%; margin-top: .5em; }
.page--end .e-btn {
  display: inline-block; max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis;
  font: 500 clamp(9px, calc(var(--page-w) * .033), 12px) / 1.2 var(--ui); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  padding: .95em 1.7em; border: 1px solid #2a2527; border-radius: 2px; background: #2a2527; color: #fbf8f1; text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.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--end .e-btn--ghost, .page--end .e-btn--ghost:hover {
  padding: .2em 0 .35em; border: 0; border-bottom: 1px solid rgb(42 37 39 / .3); border-radius: 0; background: none; color: #5a4f55; letter-spacing: .12em;
}
.page--end .e-btn--ghost:hover { color: #8b1d28; border-color: currentColor; }
.flipbook.is-small .page--end { gap: .6em; }
.flipbook.is-small .page--end p { font-size: max(8.5px, .92em); }
.flipbook.is-small .page--end .e-btn { padding: .85em 1.2em; letter-spacing: .1em; }
.flipbook.is-small .page--end .e-btn--ghost { padding: .2em 0 .35em; }
.flipbook.is-small .page--end .e-actions { gap: .7em; }
.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 { display: block; flex: 1; height: 2px; background: rgb(255 255 255 / .15); border-radius: 2px; overflow: hidden; }
.ereader-fill { display: block; 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; }
/* Billing: the delivery address by default; unticked, its own fields open beneath. */
.checkout-form .billing .check { font-family: var(--ui); font-size: 15px; }
.checkout-form .billing .check input { width: 18px; height: 18px; accent-color: var(--ink); }
.billing-fields:not([hidden]) { display: grid; gap: 18px; }
/* The email list: one box, never ticked for the customer. */
.checkout-form .check--news { align-items: flex-start; font-family: var(--ui); font-size: 15px; line-height: 1.45; color: var(--ink-2); margin-top: 2px; }
.checkout-form .check--news input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }
.checkout-form .check--news small { display: block; font-size: 13px; color: var(--muted); }
.checkout-form .check--news a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.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, .order-email .field { display: grid; gap: 6px; }
.checkout .field > span, .track .field > span, .order-email .field > span { font-family: var(--ui); font-size: 13px; color: var(--ink-2); }
.checkout .field input, .track .field input, .order-email .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 select { width: 100%; }
.checkout .field input:focus, .checkout .field select:focus, .track .field input:focus, .order-email .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, 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; }
}

/* Where the order's emails go: on the thank-you and order pages. */
.order-email { max-width: 560px; margin: 32px auto; padding: 22px 24px; border: 1px solid var(--hair); display: grid; gap: 12px; text-align: left; font-family: var(--ui); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.notice .order-email p { margin: 0; }
.order-email p { margin: 0; overflow-wrap: anywhere; }
.order-email strong { font-weight: 500; color: var(--ink); }
.order-email--bounced { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.order-email-alert { color: var(--ink); }
.order-email-ok { padding: 10px 12px; background: var(--accent-soft); color: var(--ink); }
.order-email-line { margin: 0; color: var(--muted); }
.order-email-line .link-button { color: var(--ink); }
.order-email-change summary { cursor: pointer; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
.order-email-change form { display: grid; gap: 14px; margin-top: 14px; }
.order-email-change .button { justify-self: start; }
.notice-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.notice-actions .button { min-width: 210px; justify-content: center; }

/* Track an order: the orders placed from this browser. */
.device-orders { max-width: 560px; margin: 0 auto 48px; }
.device-orders h2 { margin: 0 0 12px; }
.device-orders ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.device-orders a { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 16px; align-items: baseline; padding: 14px 4px; border-bottom: 1px solid var(--hair); text-decoration: none; font-family: var(--ui); font-size: 14px; color: var(--ink-2); transition: background-color .15s; }
.device-orders a:hover { background: var(--wash); }
.device-orders strong { font-weight: 500; color: var(--ink); letter-spacing: .03em; }
.device-orders-total { grid-row: 1 / span 2; grid-column: 3; align-self: center; font-variant-numeric: tabular-nums; color: var(--ink); }
.device-orders a span:nth-of-type(2) { grid-column: 1 / span 2; font-size: 13px; color: var(--muted); }

/* The receipt: a sheet to print, or save as PDF. */
.receipt { max-width: 720px; margin: 48px auto 120px; padding: clamp(24px, 5vw, 56px); border: 1px solid var(--hair); font-family: var(--ui); font-size: 14px; color: var(--ink-2); }
.receipt-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.receipt-brand { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 1.15rem; color: var(--ink); }
.receipt-brand strong { font-weight: 400; }
.receipt-mark { display: inline-block; width: 30px; color: var(--ink); line-height: 0; }
.receipt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.receipt-title { margin: 40px 0 20px; font-family: var(--display); font-weight: 400; font-size: 2rem; color: var(--ink); }
.receipt-void { margin-left: 10px; font-family: var(--ui); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--danger); }
.receipt-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px 24px; margin: 0 0 32px; }
.receipt-meta dt { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.receipt-meta dd { margin: 4px 0 0; color: var(--ink); }
.receipt-lines { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.receipt-lines th, .receipt-lines td { padding: 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
.receipt-lines thead th { font-weight: 400; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.receipt-lines td small { display: block; color: var(--muted); }
.receipt-lines tbody td:first-child { color: var(--ink); }
.receipt-lines .n { text-align: right; padding-left: 16px; white-space: nowrap; }
.receipt-lines tfoot th { font-weight: 400; text-align: right; }
.receipt-lines tfoot th, .receipt-lines tfoot td { border-bottom: 0; padding: 6px 0; }
.receipt-total th, .receipt-total td { padding-top: 14px !important; border-top: 1px solid var(--ink) !important; font-size: 16px; color: var(--ink); }
.receipt-vat th, .receipt-vat td { font-size: 13px; color: var(--muted); }
.receipt-foot { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 12.5px; color: var(--muted); }
.receipt-foot p { margin: 4px 0 0; }
@media (max-width: 520px) {
  .receipt-lines thead th:nth-child(3), .receipt-lines tbody td:nth-child(3) { display: none; }
  .receipt-lines tfoot th { text-align: left; }
}
@media print {
  .page-receipt .masthead, .page-receipt .colophon, .page-receipt .toasts, .page-receipt .consent, .no-print { display: none !important; }
  body.page-receipt, .page-receipt main { padding: 0 !important; margin: 0 !important; background: #fff; }
  .receipt { margin: 0; max-width: none; border: 0; padding: 0; }
}

/* 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; }
.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 { max-height: calc(100vh - 32px); overflow-y: auto; }
.consent-title { margin: 0; font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.consent-uses { margin: 0; padding: 0; list-style: none; font-family: var(--ui); font-size: 13px; line-height: 1.5; color: var(--ink-2); display: grid; gap: 4px; }
.consent-uses strong { font-weight: 600; color: var(--ink); }
.consent-choices { margin: 0; padding: 0; border: 0; display: grid; gap: 12px; }
.consent-choices[hidden] { display: none; }
.consent-choice { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; cursor: pointer; font-family: var(--ui); font-size: 13.5px; line-height: 1.45; }
.consent-choice input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--ink); }
.consent-choice input:disabled { opacity: .55; }
.consent-choice small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.consent a { color: var(--ink); }
.consent-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.consent-actions .button { flex: 1 1 auto; min-width: 104px; 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); }
.email-suggest { margin: -6px 0 0; font-family: var(--ui); font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.email-suggest .link-button { font-weight: 500; color: var(--accent); }
.receipt-to { margin: 0; font-family: var(--ui); font-size: 13px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.receipt-to:empty { display: none; }
.receipt-to strong { font-weight: 500; color: var(--ink); }

/* ------------------------------------------------------------------ dropdowns
   Every drop-down on the site looks the same: an underline, the text in the
   interface face, and one fine chevron (no browser box or arrow). */
select {
  appearance: none; -webkit-appearance: none;
  border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; outline: none;
  padding: 8px 26px 8px 0; min-height: 40px;
  font-family: var(--ui); font-size: 14px; line-height: 1.3; color: var(--ink);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2316141a' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 4px center / 11px 7px;
  cursor: pointer; text-overflow: ellipsis;
}
select:hover { border-bottom-color: var(--ink); }
select:focus-visible { border-bottom-color: var(--ink); box-shadow: 0 1px 0 0 var(--ink); }
select:disabled { opacity: .5; cursor: default; }
select option { font-family: var(--ui); color: var(--ink); background: var(--paper); }
.ship-to-panel select, .ship-line--change select, .checkout .field select { font-family: var(--ui); font-size: 15px; padding: 9px 26px 9px 0; }
.checkout .field select { border-bottom-color: var(--hair-2); }
.checkout .field select:focus { border-bottom-color: var(--ink); }


/* ------------------------------------------------------------------ ebook downloads */
.downloads { max-width: 820px; margin-inline: auto; padding: 0 var(--gutter) 120px; }
.download-list { list-style: none; margin: 0 0 48px; padding: 0; border-top: 1px solid var(--hair); }
.download-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--hair); }
.download-title strong { display: block; font-family: var(--display); font-weight: 400; font-size: 1.5rem; line-height: 1.2; }
.download-title span { display: block; margin-top: 4px; font-family: var(--ui); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.download-files { display: flex; flex-wrap: wrap; gap: 14px 18px; justify-content: flex-end; }
.download-files form { display: grid; gap: 6px; justify-items: center; margin: 0; }
.download-files .button small { margin-left: 6px; font-size: .85em; opacity: .75; letter-spacing: .06em; text-transform: none; }
.download-left { font-family: var(--ui); font-size: 12px; color: var(--muted); }
.download-help { font-size: 1rem; color: var(--ink-2); }
.download-help h2 { font-family: var(--ui); font-size: 11.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.download-help p { margin: 0 0 12px; }
.parcel--ebooks .button { margin-top: 6px; }
@media (max-width: 640px) {
  .download-item { grid-template-columns: 1fr; }
  .download-files { justify-content: flex-start; }
  .download-files form { justify-items: start; }
}
.download-help a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ------------------------------------------------------------------ checkout: voucher */
.voucher { margin: 0 0 14px; font-family: var(--ui); font-size: 14px; }
.voucher summary { cursor: pointer; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; list-style: none; width: max-content; }
.voucher summary::-webkit-details-marker { display: none; }
.voucher-row { display: flex; gap: 8px; margin-top: 10px; }
.voucher-input { flex: 1; min-width: 0; border: 1px solid var(--hair-2); background: none; padding: 9px 10px; font-family: var(--ui); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; border-radius: 0; outline: none; }
.voucher-input:focus { border-color: var(--ink); }
.voucher-apply { flex: none; min-height: 0; padding: 0 16px; }
.voucher--applied { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; padding: 10px 12px; background: rgb(139 29 40 / .06); border: 1px dashed rgb(139 29 40 / .35); }
.voucher--applied strong { letter-spacing: .08em; }
.voucher .form-error { flex-basis: 100%; margin: 8px 0 0; }
.summary-totals .discount dd { color: var(--accent); }
.voucher-row .voucher-input { flex: 1 1 auto; width: auto; }
.voucher-row .voucher-apply { flex: 0 0 auto; width: auto; min-width: 0; padding: 0 18px; }