/* ─────────────────────────────────────────────────────────────────────────────
   The Shelf — a dark reading room, one long walnut shelf, real spines.
   Type: Cormorant Garamond (display) · EB Garamond (text)
         Playfair Display / Archivo (spine lettering, per book)
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --bg: #141110;
  --bg-deep: #0c0a09;
  --ink: #efe6d8;
  --ink-soft: #cdbfae;
  --muted: #9a8c79;
  --brass: #b8925a;
  --brass-hi: #e3c58a;
  --brass-lo: #6f5430;
  --wood-hi: #7a4f2f;
  --wood: #4e301b;
  --wood-lo: #2a1a0f;
  --wood-edge: #5b3a22;
  --paper: #efe7d6;

  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --font-text: 'EB Garamond', Garamond, Georgia, serif;
  --font-spine-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-spine-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* Set by JS from viewport height: 1 unit ≈ 1px × scale */
  --scale: 1.3;
  --plank-thickness: calc(30px * var(--scale));
  --plank-depth: calc(190px * var(--scale));
  --plank-lip: 14px; /* how far the plank's front edge sits in front of the spines */
  --overhang: calc(64px * var(--scale));
  /* The whole shelf is yawed so we look *along* it (70° to the line of sight, not 90°).
     Negative: the right end is near, the left end recedes, and front covers peek out. */
  --shelf-angle: -20deg;
  --P: calc(1500px * var(--scale)); /* camera distance; shared by the scroller and the hand */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-swoop: cubic-bezier(0.55, 0.05, 0.15, 1);
  --pull-dur: 0.45s;
  --swoop-dur: 1.1s;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-y: auto;
}
body.is-reading { overflow: hidden; }

button { font: inherit; color: inherit; }
a { color: var(--brass-hi); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ── Room layout ─────────────────────────────────────────────────────────── */

.room {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
  height: 100dvh;
  /* One continuous lamp glow from the top, eased with many stops so nothing bands. */
  background:
    radial-gradient(ellipse 95% 75% at 50% -8%,
      rgba(255, 200, 140, 0.15) 0%, rgba(255, 200, 140, 0.115) 18%, rgba(255, 200, 140, 0.08) 34%,
      rgba(255, 200, 140, 0.048) 50%, rgba(255, 200, 140, 0.024) 66%, rgba(255, 200, 140, 0.008) 82%, transparent 100%),
    radial-gradient(ellipse 70% 45% at 50% 105%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.3) 40%, transparent 80%),
    linear-gradient(180deg, #1b1614 0%, #171312 30%, var(--bg) 55%, #100d0c 80%, var(--bg-deep) 100%);
}

.masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.25rem, 3vh, 2.25rem) clamp(1.25rem, 4vw, 3.5rem) 0;
  position: relative;
  z-index: 5;
}

.masthead__brand .title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.masthead__brand .subtitle {
  margin: 0.35rem 0 0 0.2rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-soft);
}

/* ── Search ──────────────────────────────────────────────────────────────── */


/* ── Stage & scroller ────────────────────────────────────────────────────── */

.stage {
  position: relative;
  min-height: 0;
  display: grid;
  align-items: end;
  overflow: hidden;
}


.edge {
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(40px, 9vw, 160px);
  pointer-events: none;
  z-index: 3;
  /* ease in from the top so the vignette doesn't start with a hard line under the masthead */
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 clamp(140px, 32%, 260px),
    #000 78%,
    transparent 100%
  );
}
.edge--left { left: 0; background: linear-gradient(90deg, var(--bg) 0%, rgba(20, 17, 16, 0.6) 40%, transparent 100%); }
.edge--right { right: 0; background: linear-gradient(-90deg, var(--bg) 0%, rgba(20, 17, 16, 0.6) 40%, transparent 100%); }

.scroller {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  outline: none;
  cursor: grab;
  perspective: var(--P);
  perspective-origin: 50% -55%;
  padding: calc(110px * var(--scale)) 0 calc(125px * var(--scale)); /* near end of the yawed shelf projects lower */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.scroller::-webkit-scrollbar { display: none; }
.scroller.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.scroller.is-dragging .book { pointer-events: none; }

.scene {
  display: block;
  width: max-content; /* never shrink to the viewport: the plank must span every book */
  padding: 0 max(8vw, var(--overhang));
  transform-style: preserve-3d;
}

.shelf {
  position: relative;
  transform-style: preserve-3d;
  margin-bottom: var(--plank-thickness);
  /* Pivot follows the viewport centre (set from JS on scroll), so the angle is constant
     while travelling along the shelf instead of swinging the far ends into the distance. */
  transform-origin: var(--pivot, 50%) 50%;
  /* translateZ(P) · rotateY(turn) · translateZ(-P) rotates the world about the *camera's* vertical
     axis — i.e. we turn our head — before the shelf's own yaw is applied. */
  transform: translateZ(var(--P)) rotateY(var(--turn, 0deg)) translateZ(calc(-1 * var(--P))) rotateY(var(--shelf-angle));
  transition: transform var(--swoop-dur) var(--ease-swoop);
}
/* Flat container boxes are z=0 planes in the 3D context; after the yaw, every book left of the
   pivot sits behind that plane and would be shadowed for hit-testing. Only spines and plaques
   should ever catch the pointer. */
.scene, .shelf, .shelf__books, .plank { pointer-events: none; }
.book { pointer-events: auto; }
.room.is-focus .scroller, .room.is-focus .scroller .book, .room.is-focus .scroller .plaque { pointer-events: none; }

.shelf__books {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  transform-style: preserve-3d;
}

.gap { flex: none; width: calc(var(--gap, 34) * 1px * var(--scale)); }

/* ── The plank ───────────────────────────────────────────────────────────── */

.plank {
  position: absolute;
  left: calc(-1 * var(--overhang));
  right: calc(-1 * var(--overhang));
  top: 100%;
  height: var(--plank-thickness);
  transform-style: preserve-3d;
}

/* The plank is built from viewport-sized segments (see shelf.js): Chrome culls any
   very wide layer inside a preserve-3d context against the unscrolled viewport,
   so one 2000px-wide board would vanish past the first screen. Gradients are
   sized/offset in px so segments join seamlessly. */
.seg {
  position: absolute;
  top: 0;
  height: 100%;
  transform-style: preserve-3d;
}
.seg__top, .seg__front { position: absolute; left: 0; top: 0; width: 100%; background-position: 0 0, var(--x) 0, var(--x) 0; }
.seg__top {
  height: calc(var(--plank-depth) + var(--plank-lip));
  transform-origin: top center;
  transform: translateZ(var(--plank-lip)) rotateX(-90deg);
  /* layer 1: sheen + the books' contact shadow just behind the front lip (no 3D shadow
     planes: coplanar layers make Chrome's plane-splitting fall apart) */
  background-image:
    linear-gradient(180deg,
      rgba(255, 220, 170, 0.16) 0, rgba(255, 220, 170, 0.06) var(--plank-lip),
      rgba(0, 0, 0, 0.5) calc(var(--plank-lip) + 1px), rgba(0, 0, 0, 0.28) calc(var(--plank-lip) + 14px),
      rgba(0, 0, 0, 0.08) calc(var(--plank-lip) + 60px), rgba(0, 0, 0, 0.24) 100%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 5px, rgba(0, 0, 0, 0.07) 5px 6px, rgba(255, 255, 255, 0.02) 6px 9px),
    linear-gradient(90deg, var(--wood) 0%, var(--wood-hi) 22%, var(--wood) 48%, #5a3820 71%, var(--wood-hi) 86%, var(--wood) 100%);
  background-size: 100% 100%, 9px 100%, 1400px 100%;
  background-repeat: no-repeat, repeat-x, repeat-x;
}
.seg__front {
  height: 100%;
  transform: translateZ(var(--plank-lip));
  background-image:
    linear-gradient(180deg, rgba(255, 230, 190, 0.18) 0, rgba(255, 230, 190, 0.04) 3px, transparent 12%, rgba(0, 0, 0, 0.35) 100%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 11px, rgba(0, 0, 0, 0.05) 11px 12px, rgba(255, 255, 255, 0.02) 12px 17px),
    linear-gradient(90deg, var(--wood-edge), #6a4428 30%, var(--wood-edge) 55%, #6a4428 80%, var(--wood-edge));
  background-size: 100% 100%, 17px 100%, 1100px 100%;
  background-repeat: no-repeat, repeat-x, repeat-x;
}
.seg__front::after {
  /* shadow the plank throws on the wall below */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: calc(70px * var(--scale));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent);
  transform: translateZ(calc(-1 * var(--plank-lip)));
  pointer-events: none;
}
.seg--first .seg__front { border-radius: 2px 0 0 2px; }
.seg--last .seg__front { border-radius: 0 2px 2px 0; }
.seg--first .seg__top, .seg--last .seg__top { box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.3); }

.plaque {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) translateZ(calc(var(--plank-lip) + 1px));
  padding: 0.28em 0.9em 0.3em;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brass-hi) 0%, var(--brass) 38%, var(--brass-lo) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 -1px 0 rgba(0, 0, 0, 0.35) inset, 0 2px 4px rgba(0, 0, 0, 0.5);
  font-family: var(--font-text);
  font-size: calc(9.5px * var(--scale));
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #2a1c0d;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.35);
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  transition: filter 0.2s;
}
.plaque:hover { filter: brightness(1.12); }
.plaque::before, .plaque::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff2cf, #6f5430 70%);
  transform: translateY(-50%);
}
.plaque::before { left: 0.32em; }
.plaque::after { right: 0.32em; }

/* ── Books ───────────────────────────────────────────────────────────────── */

.book {
  --wpx: calc(var(--w) * 1px * var(--scale));
  --hpx: calc(var(--h) * 1px * var(--scale));
  --dpx: calc(var(--d) * 1px * var(--scale));
  position: relative;
  flex: none;
  width: var(--wpx);
  height: var(--hpx);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-style: preserve-3d;
  transform: translateZ(0) rotateY(0deg) translateY(0);
  transition: transform 0.55s var(--ease-out), filter 0.45s ease, opacity 0.45s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.book:hover,
.book:focus-visible,
.book.is-open {
  transform: translateZ(calc(38px * var(--scale)));
  z-index: 3;
}
.book.is-open { transform: translateZ(calc(60px * var(--scale))); }

.face { position: absolute; backface-visibility: visible; }

.face--spine {
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.14) 7%,
      rgba(255, 255, 255, 0.09) 20%, rgba(255, 255, 255, 0.02) 42%,
      rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.13) 86%, rgba(0, 0, 0, 0.45) 100%),
    linear-gradient(180deg, var(--bg2), var(--bg1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}
.face--spine::before {
  /* paper / cloth grain */
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.16;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.book[data-format='hardcover'] .face--spine { border-radius: calc(3px * var(--scale)) / calc(14px * var(--scale)); }
.book[data-format='paperback'] .face--spine { border-radius: 1px; }
.book[data-format='hardcover'] .face--spine::after {
  /* raised hinge lines of a case-bound spine */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 8%, rgba(0, 0, 0, 0.18) 9%, rgba(255, 255, 255, 0.08) 10.5%, transparent 12%),
    linear-gradient(90deg, transparent 88%, rgba(255, 255, 255, 0.08) 89.5%, rgba(0, 0, 0, 0.18) 91%, transparent 92%);
  pointer-events: none;
}

/* decorative bands driven by data-band */
.band { position: absolute; left: 0; right: 0; pointer-events: none; }
.band--top { top: 0; height: 9%; background: var(--accent); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.band--edges { top: 0; bottom: 0; }
.band--edges::before, .band--edges::after {
  content: ''; position: absolute; left: 0; right: 0; height: 3.5%; background: var(--accent);
}
.band--edges::before { top: 3%; } .band--edges::after { bottom: 3%; }
.band--image { top: 0; height: 22%; background-image: var(--cover); background-size: cover; background-position: center top; opacity: 0.95; }
.band--image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--bg1)); }
.band--image-bottom { bottom: 0; height: 18%; background-image: var(--cover); background-size: cover; background-position: center 70%; }
.band--image-bottom::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, transparent 55%, var(--bg1)); }
.band--rainbow { top: 0; height: 12%; background: linear-gradient(90deg, #f7c46c, #f78d5c, #e05a8a, #6a5acd, #3fb4c8, #9ad36a); filter: saturate(1.1); }
.band--rainbow::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--bg1)); }
.band--square {
  left: 50%; bottom: 13%;
  width: 34%; aspect-ratio: 1;
  transform: translateX(-50%);
  background: var(--accent);
}

.spine__text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: calc(10px * var(--scale));
  padding: calc(14px * var(--scale)) 0 calc(30px * var(--scale));
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--ink1);
  z-index: 1;
}
/* (percentages here would resolve against the spine's width, so use --hpx) */
.book[data-band='top-image'] .spine__text, .book[data-band='rainbow'] .spine__text { padding-top: calc(var(--hpx) * 0.24); }
.book[data-band='top'] .spine__text { padding-top: calc(var(--hpx) * 0.13); }
.book[data-band='bottom-image'] .spine__text, .book[data-band='square'] .spine__text { padding-bottom: calc(var(--hpx) * 0.24); }
.book[data-band='edges'] .spine__text { padding-top: calc(var(--hpx) * 0.09); padding-bottom: calc(var(--hpx) * 0.13); }

.spine__title {
  font-family: var(--spine-font);
  font-weight: var(--spine-weight, 600);
  font-stretch: var(--spine-stretch, 100%);
  font-size: calc(var(--fs, 15) * 1px);
  line-height: 1;
  letter-spacing: var(--spine-tracking, 0.02em);
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28em;
}
.spine__title small {
  font-size: 0.56em;
  font-weight: 400;
  letter-spacing: 0.06em;
  opacity: 0.85;
}
.book[data-caps='true'] .spine__title { text-transform: uppercase; }
.book[data-font='script'] .spine__title { font-style: italic; font-weight: 500; letter-spacing: 0; }

.spine__author {
  font-family: var(--spine-font);
  font-weight: 500;
  font-stretch: var(--spine-stretch, 100%);
  font-size: calc(var(--fs, 15) * 0.62px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink2);
  opacity: 0.95;
}

.spine__mark {
  position: absolute;
  bottom: calc(9px * var(--scale));
  left: 50%;
  transform: translateX(-50%);
  writing-mode: horizontal-tb;
  font-family: var(--font-text);
  font-size: calc(7.5px * var(--scale));
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--ink2);
  opacity: 0.8;
  padding: 0.28em 0.3em;
  border: 1px solid currentColor;
  border-radius: 1px;
  z-index: 1;
}

.face--cover {
  top: 0; left: 100%;
  width: var(--dpx); height: 100%;
  transform-origin: left center;
  transform: rotateY(90deg);
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 12%), var(--cover);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.book[data-format='hardcover'] .face--cover { border-radius: 0 2px 2px 0; }

.face--back {
  top: 0; left: 0;
  width: var(--dpx); height: 100%;
  transform-origin: left center;
  transform: rotateY(90deg);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 15%), var(--bg1);
}

.face--top {
  top: 0; left: 0;
  width: 100%; height: var(--dpx);
  transform-origin: top center;
  transform: rotateX(-90deg);
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #ebe3d0, #d9cfb8);
}
.book[data-format='hardcover'] .face--top {
  /* board edges around the text block */
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px) padding-box,
    linear-gradient(180deg, #ebe3d0, #d9cfb8) padding-box;
  border: 2px solid var(--bg1);
  border-bottom: 0;
  border-top: 0;
}

/* the clicked book: slid out of the row, then hidden while its stand-in is in your hands */
.book.is-away { visibility: hidden; }

/* tooltip */
.book__tip {
  position: absolute;
  bottom: calc(100% + 18px * var(--scale));
  left: 50%;
  transform: translate(-50%, 6px) translateZ(20px) rotateY(calc(-1 * var(--shelf-angle)));
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  background: rgba(24, 20, 18, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.3s var(--ease-out);
  writing-mode: horizontal-tb;
  z-index: 10;
}
.book__tip span { display: block; font-family: var(--font-text); font-size: 0.78rem; color: var(--muted); letter-spacing: 0.04em; }
.book:hover .book__tip, .book:focus-visible .book__tip { opacity: 1; transform: translate(-50%, 0) translateZ(20px) rotateY(calc(-1 * var(--shelf-angle))); }


/* ── Focus mode: the book in your hands ─────────────────────────────────── */

.hand {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  /* left/top/size/perspective are copied from the scroller at open time (see detail.js) */
}
.hand.is-active { pointer-events: auto; }
/* The room dims as we turn away from the shelf. It sits over the whole room (not just the stage)
   so the lamp glow stays one continuous gradient, and under the masthead so the title stays
   crisp. Darker toward the right: the shelf sits in our peripheral vision there. */
.room::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(90deg, rgba(10, 8, 7, 0.62) 0 30%, rgba(10, 8, 7, 0.93) 55% 82%, rgba(10, 8, 7, 0.85) 100%);
  opacity: 0;
  transition: opacity var(--swoop-dur) ease;
  pointer-events: none;
}
.room.is-turned::after { opacity: 1; }
.hand .book {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0 0;
  transition: transform var(--swoop-dur) var(--ease-swoop);
  cursor: default;
  z-index: 1;
}
.hand .book:hover { transform: none; } /* inline matrix wins; this just neutralises the shelf hover rule */
.hand .book .face--cover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), inset 6px 0 14px rgba(0, 0, 0, 0.25); }

.focus-panel {
  position: absolute;
  z-index: 7;
  left: 50%;
  right: clamp(7rem, 14vw, 13rem);
  top: 50%;
  max-height: 82%;
  overflow-y: auto;
  padding-right: 0.5rem;
  padding-bottom: 1.5rem;
  transform: translateY(-50%) translateX(28px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.6s var(--ease-out);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.focus-panel.is-visible { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.focus-panel.is-overflowing { mask-image: linear-gradient(to bottom, #000 calc(100% - 4rem), transparent); }
.focus-panel__title {
  margin: 0 0 0.15rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.focus-panel__subtitle {
  margin: 0.2rem 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--ink-soft);
  text-wrap: balance;
}
.focus-panel__subtitle:empty { display: none; }
.focus-panel__author {
  margin: 0.9rem 0 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
}
.focus-panel__author em { font-style: italic; font-weight: 400; color: var(--muted); }
.focus-panel__description { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, 0.1); max-width: 60ch; }
.focus-panel__description p { margin: 0 0 0.95rem; font-size: 1.03rem; line-height: 1.6; color: var(--ink-soft); }
.focus-panel__description p:first-child::first-letter {
  font-family: var(--font-display);
  font-size: 3.4em;
  line-height: 0.8;
  float: left;
  margin: 0.08em 0.1em 0 0;
  color: var(--brass-hi);
}
.focus-panel__links { margin: 1.2rem 0 0; font-size: 0.86rem; letter-spacing: 0.06em; color: var(--muted); }
.focus-panel__links a { margin-right: 1.2rem; }

.focus-return {
  position: absolute;
  z-index: 8;
  right: clamp(1rem, 2.5vw, 2.5rem);
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%) translateX(16px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.5s var(--ease-out);
}
.focus-return.is-visible { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.focus-return__arrow {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(227, 197, 138, 0.35);
  background: rgba(24, 20, 18, 0.85);
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s, transform 0.3s var(--ease-out);
}
.focus-return:hover .focus-return__arrow { background: rgba(60, 48, 40, 0.95); border-color: rgba(227, 197, 138, 0.7); transform: translateX(3px); }
.focus-return__label {
  font-family: var(--font-text);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  writing-mode: vertical-rl;
}

/* ── Recommendations ────────────────────────────────────────────────────── */

.recommendations {
  position: relative;
  margin-top: -1px;
  min-height: 100vh;
  padding: clamp(5rem, 10vh, 9rem) clamp(1.25rem, 6vw, 6rem) clamp(8rem, 16vh, 14rem);
  background:
    radial-gradient(
      ellipse 70% 45% at 50% -5%,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.3) 40%,
      transparent 80%
    ),
    linear-gradient(180deg, var(--bg-deep) 0%, #090706 42%, #050403 100%);
  isolation: isolate;
}
.recommendations__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(380px, 1.22fr);
  gap: clamp(4rem, 9vw, 9rem);
  align-items: start;
}
.recommendations__form-panel {
  position: sticky;
  top: clamp(2rem, 8vh, 6rem);
  max-width: 420px;
}
.recommendations__kicker {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.recommendations h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.8rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}
.recommendation-form {
  position: relative;
  display: grid;
  gap: 1.15rem;
  margin-top: 2rem;
}
.field { position: relative; display: grid; gap: 0.38rem; }
.field label {
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.field input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(239, 230, 216, 0.2);
  border-radius: 0;
  padding: 0.62rem 0;
  background: transparent;
  color: var(--ink);
  font: 1.13rem/1.35 var(--font-text);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.field input::placeholder { color: rgba(154, 140, 121, 0.65); font-style: italic; }
.field input:focus { border-color: rgba(227, 197, 138, 0.72); }
.field input[aria-invalid='true'] { border-color: #b96554; }
.field__hint {
  min-height: 1em;
  margin: 0.1rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-style: italic;
}
.field__hint.is-selected { color: var(--brass-hi); }
.field--trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.handle-input { position: relative; }
.handle-input > span {
  position: absolute;
  left: 0;
  bottom: 0.62rem;
  color: var(--muted);
  font-size: 1.13rem;
}
.handle-input input { padding-left: 1.05rem; }
.recommendation-form__submit {
  justify-self: start;
  min-width: 11rem;
  margin-top: 0.3rem;
  padding: 0.72rem 1.2rem 0.78rem;
  border: 1px solid rgba(227, 197, 138, 0.38);
  border-radius: 999px;
  background: rgba(63, 48, 36, 0.34);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.05rem;
  cursor: pointer;
  transition: transform 0.25s var(--ease-out), background 0.2s, border-color 0.2s;
}
.recommendation-form__submit:hover {
  transform: translateY(-2px);
  border-color: rgba(227, 197, 138, 0.75);
  background: rgba(84, 62, 43, 0.48);
}
.recommendation-form__submit:disabled { opacity: 0.55; cursor: wait; transform: none; }
.recommendation-form__status {
  min-height: 1.25rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}
.recommendation-form__status.is-error { color: #cf8171; }
.recommendation-form__status.is-success { color: var(--brass-hi); }

.book-picker__input { position: relative; }
.book-picker__spinner {
  position: absolute;
  right: 0.2rem;
  bottom: 0.8rem;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(227, 197, 138, 0.22);
  border-top-color: var(--brass-hi);
  border-radius: 50%;
  opacity: 0;
  animation: picker-spin 0.7s linear infinite;
}
.book-picker__spinner.is-visible { opacity: 1; }
@keyframes picker-spin { to { transform: rotate(360deg); } }

.book-suggestions {
  position: absolute;
  z-index: 20;
  top: calc(100% - 1.1rem);
  left: 0;
  right: 0;
  max-height: 23rem;
  margin: 0;
  padding: 0.35rem;
  overflow-y: auto;
  list-style: none;
  border: 1px solid rgba(227, 197, 138, 0.18);
  border-radius: 7px;
  background: rgba(15, 12, 10, 0.98);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
}
.book-suggestions[hidden] { display: none; }
.book-suggestion {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 0.7rem;
  width: 100%;
  padding: 0.52rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.book-suggestion:hover,
.book-suggestion.is-active { background: rgba(255, 255, 255, 0.065); }
.book-suggestion img {
  width: 38px;
  height: 56px;
  border-radius: 2px;
  object-fit: cover;
  background: #241e1a;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
}
.book-suggestion__copy { min-width: 0; align-self: center; }
.book-suggestion__title {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.book-suggestion__meta {
  display: block;
  margin-top: 0.15rem;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.book-suggestions__message {
  padding: 0.7rem;
  color: var(--muted);
  font-style: italic;
}

.pile-scene { min-width: 0; }
.pile-scene__heading { text-align: center; }
.book-pile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 24rem;
  padding: 9rem 0 2rem;
}
.book-pile__empty {
  margin: 3rem 0;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-style: italic;
}
.pile-slot {
  position: relative;
  z-index: var(--pile-z, 1);
  width: min(100%, 500px);
  min-height: var(--pile-height, 74px);
  margin-top: -1px;
  transition: transform 0.7s var(--ease-out);
}
.pile-book {
  --pile-pull-x: clamp(28px, 5.7vw, 58px);
  --pile-pull-y: clamp(13px, 2.4vw, 24px);
  display: block;
  outline: none;
}
.pile-book__volume {
  display: block;
  position: relative;
  width: var(--pile-width, 360px);
  height: var(--pile-depth, 62px);
  margin: 0 auto;
  isolation: isolate;
  transform: translateX(var(--pile-offset, 0px)) rotate(var(--pile-rotation, 0deg));
  transform-origin: 50% 75%;
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.5));
  transition: transform 0.35s var(--ease-out), filter 0.25s;
}
.pile-book__volume::before,
.pile-book__volume::after {
  content: '';
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  height: 4px;
  border: 1px solid rgba(0, 0, 0, 0.32);
  background: linear-gradient(90deg, var(--pile-bg2), var(--pile-bg), var(--pile-bg2));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
.pile-book__volume::before { top: 0; border-radius: 3px 4px 0 0; }
.pile-book__volume::after { bottom: 0; border-radius: 0 0 3px 4px; box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2); }
.pile-book:hover .pile-book__volume,
.pile-book:focus-visible .pile-book__volume {
  transform:
    translateX(calc(var(--pile-offset, 0px) + var(--pile-pull-x)))
    translateY(var(--pile-pull-y))
    rotate(var(--pile-rotation, 0deg))
    scale(1.006);
  filter: drop-shadow(0 13px 10px rgba(0, 0, 0, 0.6));
}
.pile-book__top {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: calc(100% - 3px);
  height: var(--pile-cover-depth, 220px);
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background-color: var(--pile-bg);
  box-shadow: 0 -5px 18px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(0, 0, 0, 0.22);
  transform: perspective(760px) rotateX(66deg);
  transform-origin: 50% 100%;
}
.pile-book__top::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 14% 78%, rgba(0, 0, 0, 0.22)),
    linear-gradient(0deg, rgba(0, 0, 0, 0.18), transparent 30%);
  pointer-events: none;
}
.pile-book__cover-art {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--pile-cover-depth, 220px);
  height: calc(var(--pile-width, 360px) - 12px);
  max-width: none;
  object-fit: cover;
  transform: translate(-50%, -50%) rotate(90deg);
}
.pile-book__fore-edge {
  position: absolute;
  z-index: 3;
  inset: 4px 4px 5px;
  overflow: hidden;
  border: 1px solid rgba(35, 28, 22, 0.42);
  border-radius: 3px 4px 4px 3px / 12px 5px 5px 12px;
  background-image:
    linear-gradient(
      90deg,
      rgba(54, 43, 32, 0.28) 0%,
      rgba(255, 255, 255, 0.14) 7%,
      transparent 18% 82%,
      rgba(255, 255, 255, 0.1) 91%,
      rgba(54, 43, 32, 0.25) 100%
    ),
    repeating-linear-gradient(
      180deg,
      #f3ecdd 0 1px,
      #d7cdbb 1px 2px,
      #eee6d7 2px 4px
    );
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.45),
    inset 0 -2px 3px rgba(91, 70, 49, 0.25);
}
.pile-book__edge-label {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  max-width: calc(100% - 3rem);
  color: #3d3329;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + 3px));
  transition: opacity 0.2s, transform 0.3s var(--ease-out);
  white-space: nowrap;
}
.pile-book__edge-label strong {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 1.3vw, 0.9rem);
  font-weight: 600;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pile-book__edge-label span {
  flex: none;
  color: #776958;
  font-family: var(--font-spine-sans);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}
.pile-book:hover .pile-book__edge-label,
.pile-book:focus-visible .pile-book__edge-label {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.pile-slot.is-new .pile-book__volume {
  animation: book-drop 0.72s cubic-bezier(0.16, 0.8, 0.22, 1) both;
}
@keyframes book-drop {
  from {
    opacity: 0;
    transform: translateX(var(--pile-offset, 0px)) translateY(-80px) rotate(calc(var(--pile-rotation, 0deg) * 0.25)) scale(1.035);
  }
  68% { opacity: 1; }
  to { transform: translateX(var(--pile-offset, 0px)) rotate(var(--pile-rotation, 0deg)); }
}

/* ── Small screens ───────────────────────────────────────────────────────── */

@media (max-width: 820px) {
  body { font-size: 16px; }
  .masthead { flex-direction: column; gap: 1rem; }
  .focus-panel { left: 1.25rem; right: 4.5rem; top: 52%; transform: translateY(0) translateX(28px); max-height: 46%; }
  .focus-panel.is-visible { transform: none; }
  .focus-panel__title { font-size: 1.7rem; }
  .focus-panel__subtitle { font-size: 1.05rem; }
  .focus-panel__description p { font-size: 0.98rem; }
  .focus-return { right: 0.75rem; top: 27%; }
  .focus-return__label { display: none; }
  .recommendations {
    padding: 4.5rem 1.25rem 8rem;
  }
  .recommendations__inner {
    grid-template-columns: 1fr;
    gap: 6rem;
  }
  .recommendations__form-panel {
    position: relative;
    top: auto;
    max-width: 100%;
  }
  .book-pile { padding-top: 11rem; }
  .pile-book__volume { max-width: calc(100vw - 4rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .scroller { scroll-behavior: auto; }
}