/* Real-book rendering: hardcover anatomy, paper, light and shadow.
   Works with js/realbook.js, which builds the geometry on top of the existing markup. */

:root {
  --rb-paper: #f6efe1;
  --rb-paper-dark: #e4d8c0;
  --rb-noise: 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='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.45  0 0 0 0 0.38  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --rb-linen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0h6v1H0zM0 3h6v1H0z' fill='%23000' fill-opacity='.05'/%3E%3Cpath d='M0 0v6h1V0zM3 0v6h1V0z' fill='%23fff' fill-opacity='.05'/%3E%3C/svg%3E");
}

/* ---------- 3D hardcover ---------- */

.rb-book { transform-style: preserve-3d; }
.rb-book > * { box-sizing: border-box; }

.rb-face { position: absolute; backface-visibility: hidden; }

/* Front board: the existing cover art sits in here */
.rb-front {
  inset: 0;
  border-radius: 1.5px 4px 4px 1.5px;
  overflow: hidden;
  transform: translateZ(0);
  background: #ddd;
}
.rb-front > .rb-art,
.rb-front > img.rb-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  object-fit: cover;
}
.rb-front > .rb-art > div[style*="transform:scale"] { will-change: auto; }

/* Printed matte lamination: grain, linen, hinge groove, bevelled edge, moving glint */
.rb-skin {
  position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
}
.rb-grain {
  background-image: var(--rb-noise), var(--rb-linen);
  background-size: 160px 160px, 6px 6px;
  mix-blend-mode: multiply;
  opacity: 0.55;
}
.rb-hinge {
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0.38) 0,
      rgba(0,0,0,0.12) 1.2%,
      rgba(255,255,255,0.10) 2.6%,
      rgba(0,0,0,0) 4%,
      rgba(0,0,0,0) 5.2%,
      rgba(0,0,0,0.30) 6.1%,
      rgba(0,0,0,0.05) 7.2%,
      rgba(255,255,255,0.22) 7.9%,
      rgba(255,255,255,0) 9.6%);
}
.rb-bevel {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset -1px 0 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.22),
    inset 0 0 0 0.5px rgba(0,0,0,0.25);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0) 30%, rgba(0,0,0,0.10));
}
.rb-glint {
  background: linear-gradient(105deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,0.20) 44%,
    rgba(255,255,255,0.06) 52%,
    rgba(255,255,255,0) 64%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  animation: rbGlint 7s ease-in-out infinite both;
}
.rb-still .rb-glint { animation: none; background-position: 35% 0; }

/* Board edges (the cut edge of the hardboard, wrapped in cover stock) */
.rb-edge { background: var(--rb-board, #444); }
.rb-edge::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.25), rgba(255,255,255,0.12) 50%, rgba(0,0,0,0.25));
}
.rb-edge.rb-h::after { background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(255,255,255,0.12) 50%, rgba(0,0,0,0.25)); }

/* Back board */
.rb-back {
  inset: 0;
  border-radius: 4px 1.5px 1.5px 4px;
  background: var(--rb-board, #444);
  background-image: var(--rb-noise), linear-gradient(90deg, rgba(0,0,0,0.25), rgba(0,0,0,0) 30%);
  background-size: 160px 160px, auto;
  background-blend-mode: multiply, normal;
}

/* Page block: fore-edge, head and tail */
.rb-pages {
  background-color: var(--rb-paper);
  background-image:
    var(--rb-noise),
    repeating-linear-gradient(90deg, rgba(120,98,66,0.00) 0, rgba(120,98,66,0.00) 0.6px, rgba(120,98,66,0.20) 0.6px, rgba(120,98,66,0.20) 0.9px, rgba(120,98,66,0.00) 0.9px, rgba(120,98,66,0.00) 1.7px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 5px, rgba(110,88,58,0.10) 5px, rgba(110,88,58,0.10) 6px),
    linear-gradient(90deg, rgba(60,45,25,0.38), rgba(60,45,25,0) 22%, rgba(255,255,255,0.18) 50%, rgba(60,45,25,0) 78%, rgba(60,45,25,0.38));
  background-size: 120px 120px, auto, auto, auto;
  background-blend-mode: multiply, normal, normal, normal;
}
.rb-pages.rb-h {
  background-image:
    var(--rb-noise),
    repeating-linear-gradient(0deg, rgba(120,98,66,0.00) 0, rgba(120,98,66,0.00) 0.6px, rgba(120,98,66,0.20) 0.6px, rgba(120,98,66,0.20) 0.9px, rgba(120,98,66,0.00) 0.9px, rgba(120,98,66,0.00) 1.7px),
    linear-gradient(0deg, rgba(60,45,25,0.35), rgba(60,45,25,0) 25%, rgba(255,255,255,0.15) 50%, rgba(60,45,25,0) 75%, rgba(60,45,25,0.35)),
    linear-gradient(90deg, rgba(60,45,25,0.25), rgba(60,45,25,0) 12%);
}
.rb-pages.rb-tail { filter: brightness(0.72); }

/* Spine: rounded, with the title stamped along it */
.rb-spine {
  background: var(--rb-board, #444);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.rb-spine::before {
  content: ""; position: absolute; inset: 0;
  background:
    var(--rb-noise),
    linear-gradient(90deg, rgba(0,0,0,0.42), rgba(0,0,0,0.05) 22%, rgba(255,255,255,0.16) 46%, rgba(0,0,0,0.04) 70%, rgba(0,0,0,0.45));
  background-size: 160px 160px, auto;
  background-blend-mode: multiply, normal;
}
.rb-spine span {
  position: relative;
  writing-mode: vertical-rl;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  white-space: nowrap;
  color: var(--rb-ink, #fcf7ee);
  letter-spacing: 0.02em;
  line-height: 1;
}
.rb-foil .rb-spine span, .rb-foil .rb-spine small {
  color: transparent;
  background: linear-gradient(180deg, #f6d48a 0%, #c9952f 30%, #fbe6b0 50%, #b8842a 72%, #f2cf83 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0.5px 0 rgba(0,0,0,0.35));
}
.rb-spine small {
  position: relative;
  writing-mode: vertical-rl;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 0.55em;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rb-ink, #fcf7ee);
  opacity: 0.8;
  margin-top: 1.4em;
}

/* Hide the original flat faces that the real geometry replaces */
.rb-retired { display: none !important; }

/* Grounded shadow: a tight contact line plus a soft ambient pool */
.rb-shadow {
  background:
    radial-gradient(50% 30% at 50% 50%, rgba(34,49,76,0.45), rgba(34,49,76,0) 100%),
    radial-gradient(50% 50% at 52% 50%, rgba(34,49,76,0.22), rgba(34,49,76,0) 100%) !important;
  filter: blur(2px);
  height: 22px !important;
  bottom: 2px !important;
  transform: translateX(-10px);
}

/* Camera a little above the book so the head of the page block reads */
.book-hit { perspective: 1100px !important; perspective-origin: 50% -35% !important; }
.edition-row.rb-row { perspective-origin: 50% -40% !important; }
@keyframes tbSway {
  0%, 100% { transform: rotateX(-9deg) rotateY(32deg); }
  50% { transform: rotateX(-9deg) rotateY(14deg); }
}
@keyframes rbGlint {
  0%, 100% { background-position: 95% 0; }
  50% { background-position: 10% 0; }
}

/* ---------- Static showcase covers (home page edition row) ---------- */

.edition-row.rb-row { gap: 56px; perspective: 1400px; align-items: flex-end; padding-bottom: 30px; }
.rb-stand {
  position: relative;
  display: flex; justify-content: center; align-items: flex-end;
}
.rb-stand .rb-shadow-floor {
  position: absolute; left: -16%; right: -4%; bottom: -16px; height: 32px; pointer-events: none;
  background:
    radial-gradient(50% 26% at 46% 40%, rgba(34,49,76,0.42), rgba(34,49,76,0) 100%),
    radial-gradient(52% 50% at 44% 50%, rgba(34,49,76,0.18), rgba(34,49,76,0) 100%);
  filter: blur(3px);
}
.rb-stand .rb-book { position: relative; }

/* ---------- Open spreads: gutter, page curve, paper and page stack ---------- */

.rb-spread {
  --rb-board: #22314C;
  border-radius: 2px !important;
  box-shadow:
    /* the page block: sheets fanning out at the outer edges and foot */
    -0.6px 1px 0 #efe6d3, 0.6px 1px 0 #efe6d3,
    -1.2px 2px 0 #fbf7ee, 1.2px 2px 0 #fbf7ee,
    -1.8px 3px 0 #e4d9c3, 1.8px 3px 0 #e4d9c3,
    -2.4px 4px 0 #f7f1e5, 2.4px 4px 0 #f7f1e5,
    -3px 5px 0 #dcd0b8, 3px 5px 0 #dcd0b8,
    -3.6px 6px 0 #f3ecdd, 3.6px 6px 0 #f3ecdd,
    -4.2px 7px 0 #d3c6aa, 4.2px 7px 0 #d3c6aa,
    /* the hardcover boards showing past the pages */
    0 9px 0 9px var(--rb-board),
    0 11px 0 9px color-mix(in srgb, var(--rb-board) 62%, #000),
    /* resting on a surface */
    0 22px 30px 2px rgba(34,49,76,0.30),
    0 46px 70px -10px rgba(34,49,76,0.32) !important;
}
.rb-spread-skin {
  position: absolute; inset: 0; pointer-events: none; z-index: 20;
  border-radius: inherit;
  /* the skin is its own stacking context, so the blend has to live here to reach the page */
  mix-blend-mode: multiply;
}
.rb-spread-skin::before {
  /* paper grain: photographed paper (Higgsfield) with procedural grain as a fallback */
  content: ""; position: absolute; inset: 0;
  background-image: url("/assets/materials/paper.webp"), var(--rb-noise);
  background-size: 420px 420px, 200px 200px;
  mix-blend-mode: multiply;
  opacity: 0.55;
}
.rb-spread-skin::after {
  /* gutter fold + page curvature toward the outer edges */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(40,30,15,0.16) 0,
      rgba(40,30,15,0) 2.2%,
      rgba(255,255,255,0.10) 5%,
      rgba(255,255,255,0) 14%,
      rgba(40,30,15,0) calc(var(--rb-g, 50%) - 12%),
      rgba(40,30,15,0.10) calc(var(--rb-g, 50%) - 6%),
      rgba(40,30,15,0.34) calc(var(--rb-g, 50%) - 1.4%),
      rgba(20,14,6,0.62) var(--rb-g, 50%),
      rgba(40,30,15,0.34) calc(var(--rb-g, 50%) + 1.4%),
      rgba(40,30,15,0.10) calc(var(--rb-g, 50%) + 6%),
      rgba(40,30,15,0) calc(var(--rb-g, 50%) + 12%),
      rgba(255,255,255,0) 86%,
      rgba(255,255,255,0.10) 95%,
      rgba(40,30,15,0) 97.8%,
      rgba(40,30,15,0.16) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 85%, rgba(40,30,15,0.08));
  mix-blend-mode: multiply;
}
.rb-spread-skin.rb-light::after { opacity: 0.75; }
/* Single-surface layouts (essays, lists, full-bleed quotes): no fold through the text */
.rb-spread-skin.rb-single::after {
  background:
    linear-gradient(90deg,
      rgba(40,30,15,0.14) 0,
      rgba(40,30,15,0) 2.5%,
      rgba(255,255,255,0.08) 6%,
      rgba(255,255,255,0) 16%,
      rgba(255,255,255,0) 84%,
      rgba(255,255,255,0.08) 94%,
      rgba(40,30,15,0) 97.5%,
      rgba(40,30,15,0.14) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 85%, rgba(40,30,15,0.08));
}


@media (prefers-reduced-motion: reduce) {
  .rb-glint { animation: none; background-position: 35% 0; }
}

/* Editions photo (home) */
.editions-photo { margin: 0 auto; max-width: 1040px; }
.editions-photo img { display: block; width: 100%; height: auto; }

/* Packshots: the image already carries its own light and shadow */
img.rb-pack {
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background: none !important; object-fit: contain; height: auto !important;
}
.book-pick img.rb-pack { width: 150px; margin: -6px -10px -4px 0; }
.journal-pick img.rb-pack { width: 66px; margin: -6px -6px -6px 0; }
.line img.rb-pack { width: 62px; }
.upsell img.rb-pack { width: 50px; }

/* keep captions clear of the cover boards and the shadow under an open book */
.rb-spread + p, .rb-spread + div:not(.rb-spread) { margin-top: 26px !important; }

/* Spreads shown as photographs of the open book */
.rb-photo { box-shadow: 0 18px 40px -18px rgba(34,49,76,0.45) !important; border-radius: 10px !important; background: #e9e1d4 !important; }
.rb-photo > *:not(.rb-photo-img) { visibility: hidden !important; }
.rb-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 30; border-radius: inherit; }