/* ==========================================================================
   The Bookshop — Paper & Ink (design imported 13 Aug 2026)
   --------------------------------------------------------------------------
   The prototype carried every rule inline; production carries them here. The
   token names are the site's own (main.css :root), which the design system
   was built on top of, so nothing new is invented — only used.

   THE OBJECT'S STRUCTURAL RULES (docs/book3d-porting-spec.md §4). Break any
   of these and WebKit silently flattens the book into a stack of rectangles:

     - `.bk-stage` is the perspective element AND the direct parent of
       `.bk-book`. Nothing may be inserted between them.
     - Nothing in that chain may carry overflow, filter, opacity, mask,
       clip-path or contain. The contact shadow needs a blur, so it is drawn
       OUTSIDE the stage.
     - Every face is pointer-events:none; the drag is captured by a flat,
       untransformed hit-plane, because transformed elements drop events.
     - Nothing in the rotating subtree has a CSS transition.
   ========================================================================== */

.bs-page { font-family: var(--font-ui); color: var(--clr-text); }
.bs-wrap { max-width: 1120px; margin-inline: auto; padding-inline: 32px; }
.bs-rule { border-bottom: 1px solid var(--clr-border); }

.bs-fleuron { font-family: var(--font-heading); color: var(--clr-accent); line-height: 1; }

.bs-kicker {
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--clr-accent); margin: 0 0 12px;
}
.bs-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--clr-text-muted);
}
.bs-sectionhead {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--clr-border);
  padding-bottom: 12px; margin-bottom: 30px;
}
.bs-sectionhead h2 {
  font-family: var(--font-heading); font-size: 15px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--clr-primary); margin: 0;
}
.bs-mono {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--clr-text-muted);
}

/* ---- Directory hero ---------------------------------------------------- */

.bs-hero { background: var(--clr-bg-warm); border-bottom: 1px solid var(--clr-border); }
.bs-hero__inner {
  display: grid; grid-template-columns: 1fr 340px; gap: 64px;
  align-items: start; padding: 56px 0 48px;
}
.bs-hero h1 {
  font-family: var(--font-heading); font-size: 64px; font-weight: 300;
  line-height: 1.05; letter-spacing: -0.03em; color: var(--clr-primary);
  margin: 0 0 20px; text-wrap: balance;
}
.bs-hero__sub {
  font-family: var(--font-heading); font-size: 1.0625rem; line-height: 1.75;
  color: var(--clr-secondary); max-width: 56ch; margin: 0;
}
/* The ordering note, stated to readers rather than only to the code. */
.bs-hero__aside {
  border-left: 1px solid var(--clr-border); padding-left: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.bs-hero__aside p {
  font-family: var(--font-heading); font-size: 15px; line-height: 1.65;
  color: var(--clr-secondary); margin: 0;
}

/* ---- Filter line: typeset, not form furniture -------------------------- */

.bs-filters { border-bottom: 1px solid var(--clr-border); background: var(--clr-bg); }
.bs-filters__inner {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 14px 32px; max-width: 1120px; margin-inline: auto;
}
.bs-filters label { font-size: 12.5px; color: var(--clr-text-muted); }
.bs-filters input[type="text"] {
  font-family: inherit; font-size: 13px; padding: 6px 10px;
  border: 1px solid var(--clr-border); border-radius: 4px;
  background: #FFF; color: var(--clr-text); width: 150px;
}
.bs-filters__check {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--clr-text); cursor: pointer;
}
.bs-filters__check input { width: 15px; height: 15px; accent-color: var(--clr-accent); }
.bs-filters button {
  border: 1px solid var(--clr-border); background: transparent;
  color: var(--clr-secondary); font-family: inherit; font-size: 12.5px;
  font-weight: 600; padding: 6px 16px; border-radius: 999px; cursor: pointer;
}
.bs-filters button:hover { border-color: var(--clr-primary); background: var(--clr-bg-warm); }

/* ---- The cover object, flat (grids) ------------------------------------ */

.bs-grid { display: grid; gap: 46px 30px; }
.bs-grid--dir { grid-template-columns: repeat(5, 1fr); }
.bs-grid--shop { grid-template-columns: repeat(4, 1fr); gap: 44px 34px; }

.bs-card { display: flex; flex-direction: column; gap: 11px; color: inherit; text-decoration: none; }
.bs-card__object { position: relative; padding-right: 6px; }
.bs-cover {
  position: relative; aspect-ratio: 2/3; border-radius: 2px 4px 4px 2px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(33,26,18,0.16), 0 1px 0 rgba(33,26,18,0.2);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.bs-card:hover .bs-cover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(33,26,18,0.22);
}
.bs-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The board, when there is no artwork: a dyed case with the title set on it,
   not a grey box with a filename. */
.bs-cover__board { position: absolute; inset: 0; background: var(--bs-tint, #5A4632); }
.bs-cover__shade {
  position: absolute; inset: 0;
  background: linear-gradient(148deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.32) 100%);
  box-shadow: inset -2px 0 4px rgba(255,255,255,0.06), inset 0 0 40px rgba(0,0,0,0.28);
}
.bs-cover__gutter {
  position: absolute; left: 0; top: 0; bottom: 0; width: 7px;
  background: linear-gradient(to right, rgba(0,0,0,0.34), rgba(0,0,0,0.02));
}
.bs-cover__set {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: 8% 6% 7%; box-sizing: border-box; text-align: center;
}
.bs-cover__panel {
  width: 100%; flex: 1; border: 1px solid rgba(243,236,221,0.3); border-radius: 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 6%; box-sizing: border-box;
}
.bs-cover__title {
  font-family: var(--font-heading); font-weight: 500; font-size: 11.5px;
  line-height: 1.32; letter-spacing: 0.07em; text-transform: uppercase;
  color: #F0E4CE; overflow-wrap: break-word; text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.bs-cover__hair { width: 28px; height: 1px; background: rgba(243,236,221,0.4); display: block; }
.bs-cover__author {
  font-size: 7.5px; font-weight: 600; letter-spacing: 0.26em;
  text-transform: uppercase; color: rgba(243,236,221,0.6);
}
.bs-cover__series {
  font-size: 7.5px; font-weight: 600; letter-spacing: 0.3em;
  text-transform: uppercase; color: rgba(243,236,221,0.45);
}
/* The page block, shown only where Alhora holds a print specification —
   which is exactly the set of books it can honestly claim a thickness for. */
.bs-foreedge {
  position: absolute; right: 0; top: 5px; bottom: 3px; width: 6px;
  border-radius: 0 3px 3px 0;
  background: repeating-linear-gradient(to right, #EFE7D2 0 1px, #D8CCB2 1px 2px);
  box-shadow: 0 8px 16px rgba(33,26,18,0.14);
}

.bs-card__meta { display: flex; flex-direction: column; gap: 3px; }
.bs-card__meta h3 {
  font-family: var(--font-heading); font-weight: 500; font-size: 1.0625rem;
  line-height: 1.25; margin: 0; color: var(--clr-primary);
}
.bs-card__by { font-size: 12.5px; color: var(--clr-text-muted); margin: 0; }
.bs-card__spec {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--clr-secondary); margin: 5px 0 0;
}
.bs-card__price { font-size: 14px; font-weight: 600; color: var(--clr-text); }
.bs-badge {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 5px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--clr-accent); border: 1px solid rgba(166,58,43,0.45);
  border-radius: 999px; padding: 2px 8px; margin-top: 5px;
}

/* ---- Designed empty states -------------------------------------------- */

.bs-empty {
  border: 1px solid var(--clr-border); border-radius: 8px;
  background: var(--clr-surface, #FBF7EE); padding: 34px 36px;
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
  max-width: 68ch;
}
.bs-empty h2, .bs-empty h3 {
  font-family: var(--font-heading); font-weight: 300; letter-spacing: -0.01em;
  color: var(--clr-primary); margin: 0; font-size: 32px;
}
.bs-empty p {
  font-family: var(--font-heading); font-size: 16.5px; line-height: 1.75;
  color: var(--clr-secondary); margin: 0;
}
.bs-empty p.bs-empty__fine {
  font-family: var(--font-ui); font-size: 13px; line-height: 1.7;
  color: var(--clr-text-muted);
}

/* ---- Buttons ----------------------------------------------------------- */

.bs-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-family: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none; border: 1.5px solid transparent;
}
.bs-btn--solid {
  background: var(--clr-accent); border-color: var(--clr-accent);
  color: #F3ECDD; font-size: 15.5px; padding: 14px 24px; width: 100%;
}
.bs-btn--solid:hover { background: #B94434; border-color: #B94434; color: #F3ECDD; }
.bs-btn--outline {
  border-color: var(--clr-primary); color: var(--clr-primary);
  background: transparent; font-size: 13.5px; padding: 10px 20px;
}
.bs-btn--outline:hover { background: var(--clr-bg-warm); }
.bs-btn--quiet { color: var(--clr-secondary); font-size: 13.5px; padding: 10px 20px; }
.bs-btn--quiet:hover { background: var(--clr-bg-warm); }

/* ==========================================================================
   THE BOOK PAGE
   ========================================================================== */

.bk-record {
  background: linear-gradient(180deg, var(--clr-bg-warm) 0%, var(--clr-bg) 62%);
  border-bottom: 1px solid var(--clr-border); padding: 34px 0 56px;
}
.bk-crumb { font-size: 13px; color: var(--clr-text-muted); margin: 0 0 30px; }
.bk-crumb a { color: var(--clr-secondary); }
.bk-layout { display: grid; grid-template-columns: 460px 1fr; gap: 64px; align-items: start; }
.bk-objectcol { display: flex; flex-direction: column; align-items: center; gap: 18px; }

/* ---- The object -------------------------------------------------------- */

.bk-objectwrap { position: relative; width: 100%; display: flex; justify-content: center; }
/* PERSPECTIVE ROOT. Direct parent of .bk-book, and carries no overflow,
   filter, opacity, mask, clip-path or contain — see the header note. */
.bk-stage { perspective: 1500px; padding: 24px 40px 0; cursor: grab; user-select: none; }
/* The book's dimensions are variables so a phone can shrink the whole
   object — faces, spine and edges together — by changing three numbers.
   Hard-coding 300/460 into the faces is how the boards end up a different
   size from the block they are supposed to be wrapped around. */
.bk-book {
  position: relative;
  width: var(--bk-w, 300px); height: var(--bk-h, 460px);
  transform-style: preserve-3d;
  transform: rotateY(-24deg) rotateX(6deg);
}
.bk-face { position: absolute; pointer-events: none; backface-visibility: hidden; }
.bk-front, .bk-back {
  left: 0; top: 0;
  width: var(--bk-w, 300px); height: var(--bk-h, 460px);
  box-sizing: border-box;
}
.bk-front {
  transform: translateZ(var(--bk-half, 16.5px));
  border-radius: 3px 8px 8px 3px;
  background: linear-gradient(148deg, var(--bs-tint, #5A4632) 0%, rgba(0,0,0,0.55) 320%);
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; padding: 34px 27px; text-align: center;
  overflow: hidden;
}
/* Artwork on ANY face fills it the same way. Absolutely placed, so it sits
   over the padding the typeset fallbacks need rather than inside it; and
   `cover`, so a wrap authored at print proportions is cropped rather than
   stretched — a squashed spine reads as a printing fault. Each face carries
   its own `overflow: hidden`, because the corner radii are on the faces and
   nothing clips without it. */
.bk-front img, .bk-back img, .bk-spine img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.bk-back {
  transform: rotateY(180deg) translateZ(var(--bk-half, 16.5px));
  border-radius: 8px 3px 3px 8px;
  background: linear-gradient(212deg, var(--bs-tint, #4E3A28) 0%, rgba(0,0,0,0.6) 300%);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 38px 34px;
  overflow: hidden;
}
.bk-back__blurb {
  font-family: var(--font-heading); font-size: 11.5px; line-height: 1.75;
  color: rgba(243,236,221,0.82); margin: 0;
}
/* Said out loud rather than faked: a derived board is not artwork. */
.bk-back__none {
  font-family: var(--font-heading); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(243,236,221,0.34);
  align-self: flex-end; margin-top: auto;
}
.bk-spine {
  left: calc(var(--bk-half, 16.5px) * -1); top: 0;
  width: calc(var(--bk-half, 16.5px) * 2); height: 100%;
  transform: rotateY(90deg); border-radius: 2px;
  background: var(--bs-tint-dark, #4A3826);
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; padding: 14px 0;
  overflow: hidden;
}
.bk-spine__text {
  writing-mode: vertical-rl; font-family: var(--font-heading); font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase; color: rgba(240,228,206,0.8);
}
/* The real page block: its thickness is the book's own spine width. */
.bk-edge-fore {
  right: calc(var(--bk-half, 16.5px) * -1); top: 0; bottom: 0;
  width: calc(var(--bk-half, 16.5px) * 2); transform: rotateY(90deg);
  background: repeating-linear-gradient(to right, #EFE7D2 0 1px, #D8CCB2 1px 2px);
  border-radius: 1px;
}
.bk-edge-head {
  left: 0; right: 0; top: calc(var(--bk-half, 16.5px) * -1);
  height: calc(var(--bk-half, 16.5px) * 2); transform: rotateX(90deg);
  background: repeating-linear-gradient(to bottom, #EFE7D2 0 1px, #DCD1B8 1px 2px);
}
.bk-edge-tail {
  left: 0; right: 0; bottom: calc(var(--bk-half, 16.5px) * -1);
  height: calc(var(--bk-half, 16.5px) * 2); transform: rotateX(-90deg);
  background: repeating-linear-gradient(to bottom, #E6DCC4 0 1px, #CFC3A8 1px 2px);
}
/* OUTSIDE the stage: it needs a blur, and a filter anywhere in the
   perspective chain flattens the whole subtree. */
.bk-contact {
  width: 70%; height: 18px; margin: 34px auto 0;
  background: radial-gradient(ellipse, rgba(33,26,18,0.45) 0%, transparent 70%);
  filter: blur(4px);
}
/* The hit-plane: flat, untransformed, and the only thing that hears a
   pointer. Transformed and transitioning elements drop events in WebKit. */
.bk-grab {
  position: absolute; inset: 0; background: transparent;
  cursor: grab; touch-action: none; border-radius: 6px;
}
.bk-grab:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: 2px; }
.bk-draghint {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--clr-text-muted); margin: 0;
}

.bk-flat { width: 300px; position: relative; padding-right: 8px; }
.bk-flat .bs-cover { box-shadow: 0 16px 40px rgba(33,26,18,0.22); }

.bk-toggle { display: flex; border: 1px solid var(--clr-border); border-radius: 999px; padding: 3px; background: var(--clr-bg); }
.bk-toggle button {
  border: 0; background: transparent; color: var(--clr-secondary);
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
}
.bk-toggle button[aria-pressed="true"] { background: var(--clr-primary); color: var(--clr-bg); }
.bk-specimen {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.7;
  letter-spacing: 0.02em; color: var(--clr-secondary); text-align: center;
  margin: 0; white-space: pre-line;
}
.bk-objectnote {
  font-family: var(--font-heading); font-size: 13px; line-height: 1.6;
  color: var(--clr-text-muted); text-align: center; margin: 0; max-width: 40ch;
}

/* ---- The entry --------------------------------------------------------- */

.bk-title {
  font-family: var(--font-heading); font-size: 68px; font-weight: 300;
  line-height: 1; letter-spacing: -0.03em; color: var(--clr-primary); margin: 0 0 14px;
}
.bk-subtitle {
  font-family: var(--font-heading); font-style: italic; font-size: 21px;
  line-height: 1.4; color: var(--clr-secondary); margin: 0 0 18px;
}
.bk-by { font-size: 14.5px; color: var(--clr-text); margin: 0 0 8px; }
.bk-blurb {
  font-family: var(--font-heading); font-size: 17.5px; line-height: 1.8;
  color: var(--clr-text); max-width: 58ch; margin-top: 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.bk-blurb p { margin: 0; }

/* ---- Buy --------------------------------------------------------------- */

.bk-buy {
  border: 1px solid var(--clr-border); border-radius: 8px;
  background: var(--clr-surface, #FBF7EE); padding: 26px 28px;
  max-width: 520px; margin-top: 22px; box-shadow: 0 4px 16px rgba(33,26,18,0.06);
}
.bk-editions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.bk-edition {
  text-align: left; border: 1.5px solid var(--clr-border); background: transparent;
  border-radius: 6px; padding: 13px 15px; display: flex; flex-direction: column;
  gap: 3px; font-family: inherit; cursor: pointer;
}
.bk-edition[aria-pressed="true"] { border-color: var(--clr-accent); background: rgba(166,58,43,0.05); }
.bk-edition__key {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--clr-text-muted);
}
.bk-edition[aria-pressed="true"] .bk-edition__key { color: var(--clr-accent); }
.bk-edition__price { font-family: var(--font-heading); font-size: 23px; color: var(--clr-primary); line-height: 1.2; }
.bk-edition__note { font-size: 11.5px; color: var(--clr-text-muted); }

/* The price table. Postage is ALWAYS its own line — it is money the author
   hands to a courier, and Alhora takes no share of it. */
.bk-prices { margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.bk-prices__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.bk-prices dt { color: var(--clr-secondary); }
.bk-prices dd { margin: 0; font-family: var(--font-mono); font-size: 13.5px; color: var(--clr-secondary); }
.bk-prices__lead { flex: 1; border-bottom: 1px dotted var(--clr-border); transform: translateY(-3px); }
.bk-prices__total dt, .bk-prices__total dd { color: var(--clr-text); font-weight: 600; }

/* Not fine print, and never styled as fine print: this is the sentence that
   makes instant delivery lawful. */
.bk-consent {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid rgba(166,58,43,0.35); background: rgba(166,58,43,0.05);
  border-radius: 6px; padding: 13px 15px; margin-bottom: 16px; cursor: pointer;
}
.bk-consent input { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--clr-accent); }
.bk-consent span { font-size: 14px; line-height: 1.55; color: var(--clr-text); }

.bk-split { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7; color: var(--clr-secondary); margin: 14px 0 0; }
.bk-fulfil { font-size: 12.5px; line-height: 1.65; color: var(--clr-text-muted); margin: 8px 0 0; }

.bk-notice {
  border: 1px solid var(--clr-border); border-left: 3px solid var(--clr-accent);
  border-radius: 6px; background: var(--clr-bg-warm); padding: 20px 22px;
  max-width: 520px; margin-top: 22px;
}
.bk-notice p { font-size: 15px; line-height: 1.65; color: var(--clr-secondary); margin: 0; }
.bk-notice strong { color: var(--clr-text); }

.bk-cert { display: flex; align-items: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.bk-cert__note { font-size: 13px; color: var(--clr-text-muted); max-width: 46ch; line-height: 1.6; }

.bk-facts {
  margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--clr-border);
  display: grid; grid-template-columns: auto 1fr; gap: 9px 22px;
  font-size: 13.5px; max-width: 520px;
}
.bk-facts dt { color: var(--clr-text-muted); }
.bk-facts dd { margin: 0; color: var(--clr-text); }
.bk-facts dd.bk-facts__mono { font-family: var(--font-mono); font-size: 12.5px; }

/* ---- The opening, as it is typeset ------------------------------------- */

.bk-opening { background: var(--clr-bg); border-bottom: 1px solid var(--clr-border); padding: 56px 0 60px; }
.bk-opening__body {
  font-family: var(--font-heading); font-size: 18px; line-height: 1.85;
  color: var(--clr-text); max-width: 66ch;
}
.bk-opening__body p { margin: 0 0 1.1em; }
.bk-opening__body p:first-of-type::first-letter {
  float: left; font-size: 3.4em; line-height: 0.82; padding: 0.06em 0.08em 0 0;
  color: var(--clr-accent); font-weight: 400;
}

/* ---- Reviews ----------------------------------------------------------- */

.bk-reviews { background: var(--clr-bg-warm); border-bottom: 1px solid var(--clr-border); padding: 56px 0 64px; }
.bk-reviews__layout { display: grid; grid-template-columns: 1fr 320px; gap: 64px; align-items: start; }
/* The seal. It explains why a review here cannot be bought, which is the
   only thing that makes a rating on a stranger's book worth anything. */
.bk-seal {
  border: 1px solid var(--clr-border); border-radius: 8px; background: var(--clr-bg);
  padding: 22px 24px; display: flex; flex-direction: column; gap: 12px;
}
.bk-seal p { font-family: var(--font-heading); font-size: 15px; line-height: 1.7; color: var(--clr-secondary); margin: 0; }
.bk-seal p.bk-seal__fine {
  font-family: var(--font-ui); font-size: 12.5px; line-height: 1.65;
  color: var(--clr-text-muted); border-top: 1px solid var(--clr-border); padding-top: 12px;
}

/* ---- Elsewhere --------------------------------------------------------- */

.bk-elsewhere { background: var(--clr-bg); border-bottom: 1px solid var(--clr-border); padding: 52px 0 56px; }
.bk-elsewhere__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.bk-elsewhere__intro { font-family: var(--font-heading); font-size: 15.5px; line-height: 1.75; color: var(--clr-secondary); margin: 0; max-width: 52ch; }
.bk-elsewhere a {
  display: flex; align-items: baseline; gap: 14px;
  border-bottom: 1px solid var(--clr-border); padding: 12px 0; color: var(--clr-secondary);
}
.bk-elsewhere a:hover { color: var(--clr-primary); }
.bk-elsewhere__name { font-family: var(--font-heading); font-size: 16.5px; min-width: 126px; }
.bk-elsewhere__what { font-size: 13px; color: var(--clr-text-muted); flex: 1; }

/* ---- Author shop ------------------------------------------------------- */

/* A dyed bookcloth band woven in CSS, not an uploaded JPEG nobody has the
   right dimensions for. */
.sh-band { height: 132px; position: relative; overflow: hidden; background: var(--bs-tint, #3B2C22); }
.sh-band__weave {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 3px);
}
.sh-band__light { position: absolute; inset: 0; background: radial-gradient(120% 140% at 20% 0%, rgba(255,255,255,0.08), transparent 60%); }
.sh-band__text {
  position: absolute; inset: 0; max-width: 1120px; margin-inline: auto;
  padding-inline: 32px; display: flex; align-items: flex-end; padding-bottom: 20px;
  font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.32em;
  text-transform: uppercase; color: rgba(240,228,206,0.72);
}

.sh-head { background: var(--clr-bg); border-bottom: 1px solid var(--clr-border); }
.sh-head__inner { display: grid; grid-template-columns: 1fr 300px; gap: 72px; align-items: start; padding: 44px 0 40px; }
.sh-ident { display: flex; gap: 24px; align-items: flex-start; }
/* The device: a portrait, or the author's initials set as a press mark. The
   empty state is designed rather than a broken image. */
.sh-device {
  width: 88px; height: 88px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid var(--clr-border); background: var(--clr-bg-warm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; overflow: hidden;
}
.sh-device img { width: 100%; height: 100%; object-fit: cover; }
.sh-device__initials { font-family: var(--font-heading); font-size: 26px; font-weight: 500; letter-spacing: 0.06em; color: var(--clr-secondary); line-height: 1; }
.sh-name { font-family: var(--font-heading); font-size: 56px; font-weight: 300; line-height: 1.05; letter-spacing: -0.03em; color: var(--clr-primary); margin: 0 0 10px; }
.sh-tagline { font-family: var(--font-heading); font-style: italic; font-size: 19px; line-height: 1.5; color: var(--clr-secondary); margin: 0; max-width: 44ch; }
.sh-bio { font-family: var(--font-heading); font-size: 17px; line-height: 1.75; color: var(--clr-text); max-width: 62ch; margin-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.sh-bio p { margin: 0; }
.sh-imprint { border-left: 1px solid var(--clr-border); padding-left: 28px; display: flex; flex-direction: column; gap: 20px; margin-top: 6px; }
.sh-imprint dl { margin: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }
.sh-imprint dl > div { display: flex; justify-content: space-between; gap: 12px; }
.sh-imprint dt { color: var(--clr-text-muted); }
.sh-imprint dd { margin: 0; font-family: var(--font-mono); font-size: 12.5px; color: var(--clr-text); }
.sh-imprint__note { font-family: var(--font-heading); font-size: 13.5px; line-height: 1.6; color: var(--clr-text-muted); margin: 0; border-top: 1px solid var(--clr-border); padding-top: 16px; }

.sh-colophon { margin-top: 64px; display: grid; grid-template-columns: 1fr 340px; gap: 56px; align-items: start; border-top: 1px solid var(--clr-border); padding-top: 28px; }
.sh-colophon p { font-family: var(--font-heading); font-size: 15.5px; line-height: 1.75; color: var(--clr-secondary); margin: 0; max-width: 64ch; }

/* ---- Reader footer ----------------------------------------------------- */

.bs-footnote { font-family: var(--font-heading); font-size: 15px; line-height: 1.7; color: var(--clr-text-muted); margin: 0; }
.bs-footgrid { margin-top: 64px; border-top: 1px solid var(--clr-border); padding-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }

/* ==========================================================================
   Phone. Roughly half of these readers are on one, and a full-width 2:3
   cover is 1.5x the viewport height — which had to be fixed once already.
   ========================================================================== */

@media (max-width: 860px) {
  .bs-wrap, .bs-filters__inner { padding-inline: 20px; }
  .bs-hero__inner, .bk-layout, .bk-reviews__layout, .bk-elsewhere__layout,
  .sh-head__inner, .sh-colophon, .bs-footgrid {
    grid-template-columns: 1fr; gap: 32px;
  }
  /* A grid track defaults to min-width:auto, so a `1fr` column refuses to
     shrink below its content's min-content width. The buy card's price rows
     and mono split line are wide enough to push the track past the viewport,
     which scrolls the WHOLE page sideways and shoves the book off-centre —
     the symptom looks like a broken book and is actually a broken column. */
  .bs-hero__inner > *, .bk-layout > *, .bk-reviews__layout > *,
  .bk-elsewhere__layout > *, .sh-head__inner > *, .sh-colophon > *,
  .bs-footgrid > * { min-width: 0; }
  .bk-buy, .bk-notice, .bk-facts { max-width: 100%; }
  .bk-split, .bk-specimen { overflow-wrap: anywhere; }
  .bs-hero__aside, .sh-imprint { border-left: 0; padding-left: 0; border-top: 1px solid var(--clr-border); padding-top: 20px; }
  .bs-hero h1 { font-size: 40px; }
  .sh-name { font-size: 38px; }
  .bk-title { font-size: 42px; }
  .bs-grid--dir { grid-template-columns: repeat(2, 1fr); gap: 30px 18px; }
  .bs-grid--shop { grid-template-columns: repeat(2, 1fr); gap: 30px 18px; }
  /* Shrink the whole object together. A 300px book plus its rotation is
     wider than the usable width of a 390px phone. */
  .bk-objectcol { width: 100%; --bk-w: 208px; --bk-h: 319px; --bk-half: 11px; }
  .bk-stage { padding: 12px 0 0; }
  .bk-flat { width: 208px; }
  .bk-front { padding: 24px 19px; }
  .bk-back { padding: 26px 24px; }
  .bk-title { overflow-wrap: break-word; }
  .bk-editions { grid-template-columns: 1fr; }
}

/* The one control that must always be within thumb reach. */
.bk-stickybuy { display: none; }
@media (max-width: 860px) {
  .bk-stickybuy {
    position: sticky; bottom: 0; z-index: 40;
    display: flex; align-items: center; gap: 14px;
    background: var(--clr-surface, #FBF7EE);
    border-top: 1px solid var(--clr-border);
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 18px rgba(33,26,18,0.1);
  }
  .bk-stickybuy__price { font-family: var(--font-heading); font-size: 20px; color: var(--clr-primary); }
  .bk-stickybuy .bs-btn--solid { width: auto; flex: 1; padding: 12px 20px; font-size: 14.5px; }
}

/* Motion is a courtesy, never a requirement. */
@media (prefers-reduced-motion: reduce) {
  .bs-cover, .bs-card:hover .bs-cover { transition: none; transform: none; }
}