@font-face { font-family: "Atlas Display"; src: url("/atlas/fonts/libre-caslon-display-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Atlas Sans"; src: url("/atlas/fonts/manrope-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atlas Sans"; src: url("/atlas/fonts/manrope-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Atlas Sans"; src: url("/atlas/fonts/manrope-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Atlas Display Fallback"; src: local("Georgia"); size-adjust: 83.1%; ascent-override: 116.7%; descent-override: 32.5%; line-gap-override: 0%; }
@font-face { font-family: "Atlas Display Fallback T"; src: local("Times New Roman"); size-adjust: 91.6%; ascent-override: 105.9%; descent-override: 29.5%; line-gap-override: 0%; }
@font-face { font-family: "Atlas Sans Fallback"; src: local("Arial"); size-adjust: 103.8%; ascent-override: 103.1%; descent-override: 28.9%; line-gap-override: 0%; }

/* ---- Homepage v7 "The Library" (LibraryHero.tsx + shared/homeLibraryShell.ts). Served byte-identical as
   /home/library.css for the server first paint (a test holds the two files together).
   The room: a night library seen from a slight three-quarter angle. The scene is an environment, not a card: it runs
   from behind the copy to off the right edge of the viewport; the copy sits in the dark to its left. One filled
   primary, one outline secondary, free labs as a text link, the picker and Milo under the copy.
   Motion is transform/opacity only; the scene draws its own frames. Reduced motion: a still, fully usable shelf. */
.lib-hero {
  --night: #0b1626; --night-deep: #060d18; --raised: #13223a; --ink: #f4f1e8; --ink-2: #cfd6e2; --line: rgba(207, 214, 226, 0.16);
  --amber: #f2b45c; --amber-2: #e0953a; --amber-ink: #1d1304; --brass: #d8b46d; --teal: #46c8b4; --oak: #9a6a3c;
  --display: "Atlas Display", "Atlas Display Fallback", "Atlas Display Fallback T", Georgia, serif;
  --sans: "Atlas Sans", "Atlas Sans Fallback", Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --head: 81px; --stage-left: clamp(340px, 36vw, 640px);
  position: relative; isolation: isolate; overflow: hidden; min-height: max(680px, 100svh); background: var(--night); color: var(--ink); font-family: var(--sans);
}
.lib-hero *, .lib-hero *::before, .lib-hero *::after { box-sizing: border-box; }
.lib-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- the room: the wall's night, a lamp warming the shelves, a faint floor, a vignette */
.lib-room { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(110% 80% at 62% 42%, #15243a 0%, #0d1a2d 48%, var(--night-deep) 100%); }
.lib-room__lamp { position: absolute; left: 30%; top: -30%; width: 70%; height: 95%; opacity: 0;
  background: radial-gradient(50% 50% at 50% 40%, rgba(255, 196, 120, 0.22), rgba(255, 196, 120, 0.07) 45%, rgba(255, 196, 120, 0) 72%);
  transition: opacity 1.6s var(--ease) 0.2s; }
.lib-room__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
  background: linear-gradient(180deg, rgba(6, 13, 24, 0) 0%, rgba(6, 13, 24, 0.85) 100%); }
.lib-room__vignette { position: absolute; inset: 0; background: radial-gradient(90% 80% at 55% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.6) 100%); }
.lib-hero.is-entered .lib-room__lamp, .lib-hero.is-reduced .lib-room__lamp { opacity: 1; }

/* ---- the stage: the scene box is as tall as the hero (under the site header) and 1.85 times that wide, starting to the
   right of the copy and running off the right edge of the viewport (the hero clips it). The still, the live canvas and
   the book links share the box, so they line up exactly. */
.lib-stage { position: absolute; left: var(--stage-left); top: calc(var(--head) + 20px); bottom: clamp(18px, 2.5vh, 28px); z-index: 1; }
/* Keep the lower shelf, real covers and engraved plaque unobscured. The room supplies its own falloff. */
.lib-scene { position: relative; height: 100%; aspect-ratio: 1.85; }
.lib-poster-pic { display: contents; }
.lib-poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill; user-select: none; -webkit-user-drag: none;
  opacity: 1; transition: opacity 0.9s var(--ease); }
.lib-scene.is-live .lib-poster { opacity: 0; }
.lib-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; opacity: 0; transition: opacity 0.9s var(--ease); }
.lib-scene.is-live .lib-canvas { opacity: 1; }
.lib-hits { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.lib-hit { position: absolute; display: block; border-radius: 3px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: box-shadow 0.2s var(--ease), opacity 0.35s var(--ease); }
.lib-hit:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.lib-hit.is-dim { opacity: 0.6; }
/* on the still (no live scene) a hovered book gets a lamp-lit edge, since it cannot pull out */
.lib-scene.is-poster .lib-hit.is-active, .lib-scene.is-loading .lib-hit.is-active { box-shadow: 0 0 0 2px rgba(242, 180, 92, 0.9), 0 0 26px rgba(242, 180, 92, 0.45); }
/* A real collection route remains available when the WebGL scene never starts. It is deliberately HTML, rather
   than a plate hit-area, because the poster's distant plates can sit beyond the cropped viewport. */
.lib-poster-nav { position: absolute; z-index: 6; right: 16px; bottom: 14px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: min(62%, 580px); padding: 8px;
  border: 1px solid rgba(216, 180, 109, 0.36); border-radius: 12px; background: rgba(6, 13, 24, 0.82); box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.92); backdrop-filter: blur(8px); }
.lib-poster-nav__label { align-self: center; padding: 0 4px; color: #f5dfa8; font: 700 0.72rem/1.2 var(--sans); letter-spacing: 0.035em; text-transform: uppercase; }
.lib-poster-nav a { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 9px; border: 1px solid rgba(207, 214, 226, 0.28); border-radius: 999px; color: var(--ink); font: 600 0.75rem/1.2 var(--sans); text-decoration: none; }
.lib-poster-nav a:hover { border-color: var(--brass); background: rgba(216, 180, 109, 0.14); }
.lib-poster-nav a:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-color: var(--teal); }
/* the brass plates are glide targets once the scene is live */
.lib-plate-hit { position: absolute; z-index: 4; display: block; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; transition: box-shadow 0.2s var(--ease); }
.lib-plate-hit:hover { box-shadow: 0 0 0 2px rgba(242, 180, 92, 0.6), 0 0 18px rgba(242, 180, 92, 0.35); }
.lib-plate-hit:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.lib-card { position: absolute; z-index: 5; display: flex; gap: 10px; width: 17%; min-width: 230px; padding: 9px; border-radius: 12px; pointer-events: none;
  background: rgba(8, 16, 30, 0.94); border: 1px solid rgba(216, 180, 109, 0.42); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.4);
  transform: translate(0, -100%); animation: lib-card-in 0.18s var(--ease); }
@keyframes lib-card-in { from { opacity: 0; transform: translate(0, calc(-100% + 6px)); } to { opacity: 1; transform: translate(0, -100%); } }
.lib-card__cover { flex: none; width: 54px; height: auto; border-radius: 3px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.lib-card__text { display: grid; align-content: center; gap: 2px; min-width: 0; }
.lib-card__title { font: 700 0.9rem/1.25 var(--sans); color: var(--ink); }
.lib-card__meta { font: 500 0.78rem/1.3 var(--sans); color: var(--ink-2); }
.lib-card__hint { font: 600 0.75rem/1.3 var(--sans); color: #f5dfa8; }
.lib-pause { position: absolute; left: 12px; bottom: 12px; z-index: 6; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; cursor: pointer; background: transparent; color: var(--ink); }
.lib-pause::before { content: ""; position: absolute; inset: 6px; border-radius: 9px; background: rgba(8, 16, 30, 0.8); border: 1px solid rgba(216, 180, 109, 0.35); }
.lib-pause:hover::before { background: rgba(19, 34, 58, 0.95); }
.lib-pause svg { position: relative; width: 13px; height: 13px; fill: currentColor; }

/* ---- the copy: a column in the dark to the left of the stage (two blocks, so phones can put the shelf between them) */
.lib-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(300px, calc(var(--stage-left) - clamp(20px, 4vw, 56px))) minmax(0, 1fr); grid-template-rows: auto auto;
  align-content: center; min-height: max(680px, 100svh); max-width: none; margin: 0; padding: calc(var(--head) + 14px) clamp(20px, 4vw, 56px) 28px; pointer-events: none; }
.lib-copy, .lib-copy-2 { grid-column: 1; max-width: 500px; pointer-events: auto; }
.lib-copy-2 { margin-top: 20px; }
.lib-title { margin: 0; max-width: 10.5em; font-family: var(--display); font-weight: 400; font-size: clamp(2.3rem, 1.05rem + 2.6vw, 3.85rem);
  line-height: 1.04; letter-spacing: -0.014em; color: var(--ink); text-wrap: balance; -webkit-text-stroke: 0.014em currentColor; paint-order: stroke fill; }
.lib-sub { margin: 20px 0 0; max-width: 30em; font-size: clamp(1.0rem, 0.95rem + 0.28vw, 1.125rem); line-height: 1.6; font-weight: 500; color: var(--ink-2); text-wrap: pretty; }
.lib-sub--short { display: none; }
.lib-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 30px; }
.lib-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 26px; border-radius: 14px;
  font: 600 1.0625rem/1 var(--sans); text-decoration: none; letter-spacing: 0.004em; transition: transform 0.16s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s; }
.lib-cta--primary { background: linear-gradient(180deg, #f7c577 0%, var(--amber) 55%, var(--amber-2) 100%); color: var(--amber-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 -1px 0 rgba(90, 50, 0, 0.25) inset, 0 16px 36px -14px rgba(242, 180, 92, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.25); }
.lib-cta--primary:hover, .lib-cta--primary:focus-visible { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 22px 44px -14px rgba(242, 180, 92, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.25); }
.lib-cta--outline { min-height: 52px; color: var(--ink); border: 1.5px solid rgba(216, 180, 109, 0.75); background: rgba(13, 26, 45, 0.35); }
.lib-cta--outline:hover, .lib-cta--outline:focus-visible { transform: translateY(-2px); border-color: var(--brass); background: rgba(216, 180, 109, 0.12); }
.lib-cta--ghost { min-height: 48px; color: var(--ink); border: 1.5px solid rgba(207, 214, 226, 0.4); }
.lib-cta--ghost:hover, .lib-cta--ghost:focus-visible { border-color: var(--ink); }
.lib-cta:active { transform: translateY(0) scale(0.985); transition-duration: 0.06s; }
.lib-free { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; color: var(--ink); font: 600 1rem/1.3 var(--sans); text-decoration: underline;
  text-decoration-color: rgba(70, 200, 180, 0.8); text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.lib-free:hover { text-decoration-color: var(--teal); text-decoration-thickness: 2px; }
.lib-sale { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 0.9375rem/1.45 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.lib-sale__tag { flex: none; padding: 4px 9px; border-radius: 6px; background: rgba(216, 180, 109, 0.16); border: 1px solid rgba(216, 180, 109, 0.55); color: #f5dfa8; font: 700 0.75rem/1 var(--sans); letter-spacing: 0.03em; }
.lib-hero a:focus-visible, .lib-hero button:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.lib-caption { margin: 18px 0 0; font: 500 0.8125rem/1.4 var(--sans); color: var(--ink-2); }

/* ---- the picker: two rows of chips under the copy; a choice lights the matching books and the camera glides to them */
.lib-picker { display: grid; justify-items: start; gap: 8px; width: 100%; margin-top: 10px; }
.lib-picker__row { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.lib-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(207, 214, 226, 0.28);
  background: rgba(13, 26, 45, 0.6); color: var(--ink); font: 600 0.84rem/1 var(--sans); transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.16s var(--ease); }
.lib-chip:hover { border-color: var(--brass); transform: translateY(-1px); }
.lib-chip[aria-pressed="true"] { background: var(--brass); border-color: var(--brass); color: #2b1c06; }
.lib-chip--reset { border-style: dashed; }
.lib-chip--amber { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.lib-picker__live { min-height: 1.2em; margin: 0; font: 500 0.8125rem/1.3 var(--sans); color: #f5dfa8; }

/* ---- Milo: under the picker, never over a button */
.lib-milo { position: relative; display: flex; align-items: flex-end; gap: 10px; max-width: 420px; margin-top: 16px; }
.lib-milo__mark { flex: none; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55)); }
.lib-milo__svg { display: block; }
.lib-hero:not(.is-reduced):not(.is-paused) .lib-milo__arm--wave { transform-origin: 70px 70px; animation: lib-wave 2.6s var(--ease) infinite; }
@keyframes lib-wave { 0%, 60%, 100% { transform: rotate(0deg); } 70% { transform: rotate(-14deg); } 85% { transform: rotate(10deg); } }
.lib-milo__bubble { position: relative; display: grid; gap: 8px; padding: 10px 34px 10px 12px; border-radius: 14px 14px 14px 4px; background: rgba(8, 16, 30, 0.92); border: 1px solid rgba(216, 180, 109, 0.4); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.9); }
.lib-milo__line { margin: 0; font: 500 0.9rem/1.4 var(--sans); color: var(--ink); }
.lib-milo__name { font-weight: 700; color: #f5dfa8; }
.lib-milo__choices { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-milo__close { position: absolute; right: 4px; top: 4px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 999px; border: 1px solid rgba(207, 214, 226, 0.25); background: rgba(19, 34, 58, 0.9); color: var(--ink-2); cursor: pointer; }
.lib-milo__close:hover { color: var(--ink); border-color: var(--brass); }
.lib-milo-show { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-top: 16px; padding: 0 12px 0 6px; border-radius: 999px;
  border: 1px solid rgba(216, 180, 109, 0.4); background: rgba(8, 16, 30, 0.92); color: var(--ink); font: 600 0.85rem/1 var(--sans); cursor: pointer; }

/* ---- the phone shelf: hidden on wide screens; a swipeable oak ledge of the same real covers under 861 px */
.lib-phone { display: none; }

/* ---- the opened book (BookViewer.tsx): a modal over the page */
.lib-viewer { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-rows: auto 1fr auto; color: var(--ink, #f4f1e8); font-family: "Atlas Sans", Manrope, system-ui, sans-serif; outline: none;
  animation: lib-viewer-in 0.24s ease-out; }
.lib-viewer.is-leaving { animation: lib-viewer-out 0.22s ease-in forwards; }
@keyframes lib-viewer-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lib-viewer-out { to { opacity: 0; } }
.lib-viewer__scrim { position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer; background: rgba(4, 9, 18, 0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lib-viewer__top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px clamp(16px, 4vw, 40px) 8px; }
.lib-viewer__kicker { margin: 0; font: 600 0.8125rem/1.3 "Atlas Sans", Manrope, sans-serif; color: #f5dfa8; }
.lib-viewer__title { margin: 2px 0 0; font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/1.1 "Atlas Display", "Libre Caslon Display", Georgia, serif; color: #f4f1e8; }
.lib-viewer__sub { margin: 4px 0 0; max-width: 60ch; font: 500 0.875rem/1.35 "Atlas Sans", Manrope, sans-serif; color: #cfd6e2; }
.lib-viewer__close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(207, 214, 226, 0.3); border-radius: 12px; background: rgba(8, 16, 30, 0.9); color: #f4f1e8; cursor: pointer; }
.lib-viewer__stage { position: relative; z-index: 1; display: grid; place-items: center; min-height: 0; padding: 8px clamp(12px, 3vw, 40px); }
.lib-viewer__flip { --from-x: 0px; --from-y: 0px; --from-s: 1; transform: translate(0, 0) scale(1); transition: transform 0.62s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lib-viewer__flip[data-settled="false"] { transform: translate(var(--from-x), var(--from-y)) scale(var(--from-s)); transition: none; }
.lib-viewer__row { display: flex; gap: 12px; margin: 0; padding: 0 0 8px; list-style: none; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.lib-viewer__row li { flex: none; width: min(78vw, 420px); scroll-snap-align: center; }
.lib-viewer__row img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.9); background: #fbf8f1; }
.lib-viewer__bar { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; padding: 10px clamp(16px, 4vw, 40px) 20px; }
.lib-viewer__nav { display: flex; align-items: center; gap: 10px; }
.lib-viewer__btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(207, 214, 226, 0.3); border-radius: 12px; background: rgba(8, 16, 30, 0.9); color: #f4f1e8; cursor: pointer; }
.lib-viewer__btn:disabled { opacity: 0.35; cursor: default; }
.lib-viewer__count { min-width: 4.5em; text-align: center; font: 600 0.875rem/1 "Atlas Sans", Manrope, sans-serif; color: #cfd6e2; font-variant-numeric: tabular-nums; }
.lib-viewer__saving { font: 700 0.875rem/1 "Atlas Sans", Manrope, sans-serif; color: #f5dfa8; }
.lib-viewer__live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lib-viewer .lib-cta { font: 600 1rem/1 "Atlas Sans", Manrope, sans-serif; min-height: 48px; padding: 0 22px; border-radius: 12px; text-decoration: none; display: inline-flex; align-items: center; }
.lib-viewer .lib-cta--primary { background: linear-gradient(180deg, #f7c577, #f2b45c 55%, #e0953a); color: #1d1304; box-shadow: 0 14px 30px -14px rgba(242, 180, 92, 0.8); }
.lib-viewer .lib-cta--ghost { color: #f4f1e8; border: 1.5px solid rgba(207, 214, 226, 0.4); }
.lib-book__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* the CSS 3D book: a cover leaf and page leaves turning around the spine */
@property --turn { syntax: "<number>"; inherits: false; initial-value: 0; }
.lib-book { --page-w: 240px; --page-h: 320px; --paper: #fbf8f1; --board: #0b1a33; --turn-ms: 720ms; position: relative; width: calc(var(--page-w) * 2); height: var(--page-h);
  transform: translateX(0); transition: transform var(--turn-ms) cubic-bezier(0.4, 0, 0.2, 1); }
.lib-book.is-closed { transform: translateX(-25%); }
.lib-book--static, .lib-book--static .lib-book__leaf { transition: none !important; }
.lib-book__board { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; overflow: hidden; border-radius: 0 10px 10px 0; background: var(--board);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.06), 2px 0 0 #e3ddcf, 4px 0 0 #f6f2e8, 6px 0 0 #d9d2c1, 8px 0 0 #ece7da, 0 30px 60px -20px rgba(0, 0, 0, 0.7); }
.lib-book__leaves { position: absolute; inset: 0; perspective: 2600px; perspective-origin: 50% 50%; }
.lib-book__leaf { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; transform: rotateY(calc(var(--turn) * -180deg));
  transition: transform var(--turn-ms) cubic-bezier(0.45, 0.02, 0.2, 1), --turn var(--turn-ms) cubic-bezier(0.45, 0.02, 0.2, 1); will-change: transform; }
.lib-book__face { position: absolute; inset: 0; overflow: hidden; background: var(--paper); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lib-book__face--front { border-radius: 0 8px 8px 0; box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.06); }
.lib-book__face--back { transform: rotateY(180deg); border-radius: 8px 0 0 8px; }
.lib-book__img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.lib-book__leaf--cover .lib-book__face--front { border-radius: 4px 10px 10px 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 50px -18px rgba(0, 0, 0, 0.7); background: #0b1a33; }
.lib-book__leaf--cover .lib-book__face--back { background: var(--board); }
.lib-book__face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(11, 27, 51, 0.28), rgba(11, 27, 51, 0.05) 22%, transparent 45%); opacity: calc(1 - var(--turn)); }
.lib-book__face--back::after { background: linear-gradient(to left, rgba(11, 27, 51, 0.28), rgba(11, 27, 51, 0.05) 22%, transparent 45%); opacity: var(--turn); }
.lib-book__face::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%); opacity: calc(var(--turn) * (1 - var(--turn)) * 4); mix-blend-mode: screen; }
.lib-book__panel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 8%; color: #e6efff; overflow: hidden;
  background: radial-gradient(120% 80% at 100% 0%, rgba(216, 180, 109, 0.2), transparent 55%), radial-gradient(90% 70% at 0% 100%, rgba(70, 200, 180, 0.14), transparent 55%), var(--board); }
.lib-book__kicker { margin: 0; font: 600 0.75rem/1.3 "Atlas Sans", Manrope, sans-serif; color: #f5dfa8; }
.lib-book__panel-title { margin: 0; font: 400 clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem)/1.12 "Atlas Display", "Libre Caslon Display", Georgia, serif; color: #f4f1e8; }
.lib-book__note { margin: 0; font: 500 0.8125rem/1.4 "Atlas Sans", Manrope, sans-serif; color: #cfd6e2; }
.lib-book__facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lib-book__facts li { padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(216, 180, 109, 0.45); font: 600 0.75rem/1.2 "Atlas Sans", Manrope, sans-serif; color: #f5dfa8; }

/* ---- tablets and phones */
@media (max-width: 1100px) {
  .lib-hero { --stage-left: clamp(300px, 34vw, 520px); }
  .lib-card { min-width: 190px; }
}
@media (max-width: 860px) {
  .lib-hero { min-height: 0; }
  .lib-stage { display: none; }
  .lib-inner { display: flex; flex-direction: column; min-height: 0; padding: calc(var(--head) + 6px) 20px 24px; pointer-events: auto; }
  .lib-copy, .lib-copy-2 { max-width: none; }
  .lib-title { max-width: none; font-size: clamp(2.05rem, 1.4rem + 3.2vw, 2.5rem); }
  .lib-sub { display: none; }
  .lib-sub--short { display: block; margin-top: 10px; font-size: 1.0625rem; }
  /* Keep the real-cover shelf within the first phone screen: the two commercial routes share one compact row,
     while the amber store route remains visually dominant. */
  .lib-actions { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); margin-top: 18px; gap: 9px; }
  .lib-cta { width: auto; min-height: 64px; padding: 10px 12px; font-size: 0.9375rem; line-height: 1.2; text-align: center; }
  .lib-copy-2 { margin-top: 20px; }
  .lib-caption { display: none; } /* the phone shelf already carries this count */
  .lib-picker { display: none; }
  .lib-milo, .lib-milo-show { margin: 16px 0 0; max-width: none; }
  /* the phone shelf: an oak ledge with real covers tilted in 3D, scroll-snap bay by bay, a lamp pool over each bay */
  .lib-phone { display: block; width: 100%; min-width: 0; max-width: 100%; margin-top: 22px; }
  .lib-phone__hint { margin: 0 0 8px; font: 500 0.8125rem/1.3 var(--sans); color: var(--ink-2); }
  .lib-phone__row { display: flex; gap: 26px; margin: 0 -20px; padding: 6px 20px 10px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; -webkit-overflow-scrolling: touch; }
  .lib-phone__bay { flex: none; scroll-snap-align: start; position: relative; padding: 10px 10px 16px; border-radius: 14px;
    background: radial-gradient(70% 60% at 50% 12%, rgba(255, 196, 120, 0.2), rgba(255, 196, 120, 0.05) 50%, rgba(255, 196, 120, 0) 75%); }
  .lib-phone__plate { display: inline-block; margin: 0 0 12px 4px; padding: 6px 12px; border-radius: 3px; font: 700 0.75rem/1.2 var(--sans); letter-spacing: 0.02em; color: #2b1c06;
    background: linear-gradient(180deg, #e9cf92 0%, #bf944f 42%, #d8b46d 60%, #7d5a26 100%); box-shadow: 0 1px 0 rgba(255, 245, 210, 0.7) inset, 0 -1px 0 rgba(60, 38, 10, 0.5) inset, 0 3px 8px rgba(0, 0, 0, 0.55);
    text-shadow: 0 1px 0 rgba(255, 244, 214, 0.55); }
  .lib-phone__books { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 16px; margin: 0; padding: 0 6px 0; list-style: none; perspective: 900px; }
  .lib-phone__book { flex: none; width: 150px; display: grid; grid-template-rows: auto 2.5em 1.2em; gap: 3px; align-items: end; transition: opacity 0.3s; }
  .lib-phone__book.is-dim { opacity: 0.45; }
  .lib-phone__cover { position: relative; display: block; max-width: 100%; transform: rotateY(-12deg) translateZ(0); transform-style: preserve-3d; transform-origin: left center; border-radius: 2px 4px 4px 2px;
    box-shadow: 12px 16px 28px -8px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.35), 3px 0 0 #e8e1d1, 5px 0 0 #d6cfbf; transition: transform 0.25s var(--ease); background: #0b1a33; }
  .lib-phone__cover img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 2px 4px 4px 2px; }
  .lib-phone__spine { position: absolute; left: -8px; top: 0; bottom: 0; width: 9px; border-radius: 2px 0 0 2px; transform: rotateY(-90deg) translateX(-4px); transform-origin: right center; }
  .lib-phone__cover:active { transform: rotateY(-4deg) translateZ(12px); }
  .lib-phone__title { align-self: start; margin-top: 18px; font: 700 0.8125rem/1.25 var(--sans); color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .lib-phone__grade { font: 500 0.75rem/1.2 var(--sans); color: var(--ink-2); }
  .lib-phone__ledge { position: absolute; left: 0; right: 0; bottom: calc(2.5em + 1.2em + 16px + 6px); height: 16px; border-radius: 2px; z-index: 0;
    background: linear-gradient(180deg, #b8814a 0%, #94613a 35%, #5f3b1d 100%); box-shadow: 0 1px 0 rgba(216, 180, 109, 0.9) inset, 0 12px 20px rgba(0, 0, 0, 0.6); }
  .lib-phone__ledge::after { content: ""; position: absolute; inset: 0; opacity: 0.35; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 9px, rgba(60, 30, 8, 0.6) 9px 10px, rgba(0, 0, 0, 0) 10px 23px, rgba(255, 220, 170, 0.25) 23px 24px); }
  .lib-phone__count { margin: 2px 0 0; font: 500 0.8125rem/1.3 var(--sans); color: var(--ink-2); }
}
@media (max-width: 420px) {
  .lib-cta { min-height: 60px; padding-inline: 9px; font-size: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lib-hero *, .lib-hero *::before, .lib-hero *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .lib-book, .lib-book__leaf, .lib-viewer__flip { transition: none !important; }
}