/* Bookshelf ("fun mode") — styles for the 3D shelf, reading overlay, and rec
   modal. Palette and shadow work port the Bookshelf 3D design project (imported
   via the Claude Design MCP) into vanilla CSS. */

:root {
  --shelf-bg-start: oklch(0.42 0.04 62);
  --shelf-bg-mid: oklch(0.31 0.032 55);
  --shelf-bg-end: oklch(0.205 0.024 42);
  --shelf-text: oklch(0.91 0.012 80);
  --shelf-text-dim: oklch(0.66 0.03 70);
  --shelf-text-quiet: oklch(0.62 0.025 70);
  --shelf-accent: oklch(0.8 0.09 70);
  --shelf-plank-top: oklch(0.58 0.055 58);
  --shelf-plank-top-b: oklch(0.48 0.055 55);
  --shelf-plank-front: oklch(0.43 0.05 52);
  --shelf-plank-front-b: oklch(0.31 0.042 48);
  --wall-top: oklch(0.52 0.055 57);
  --wall-mid: oklch(0.36 0.046 52);
  --wall-bot: oklch(0.26 0.034 48);

  --reading-bg: oklch(0.97 0.014 80);
  --reading-ink: oklch(0.2 0.02 60);
  --reading-body: oklch(0.32 0.02 60);
  --reading-meta: oklch(0.55 0.03 60);
  --reading-rule: oklch(0.62 0.11 55);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Wall background — repeated linearly so it tiles down the full page height
   regardless of how much content there is (no cliff to white). */
html { height: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--shelf-text);
  min-height: 100vh;
  background-color: var(--wall-mid);
  background-image:
    /* one-time top vignette (sconce glow above the first shelf) */
    radial-gradient(80% 55% at 16% -6%, var(--shelf-bg-start), transparent 72%),
    radial-gradient(120% 85% at 62% 8%, var(--shelf-bg-mid), transparent 72%),
    /* faint vertical grain — repeating horizontally only, never a horizontal
       seam that reads as a phantom shelf */
    repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0px, rgba(0,0,0,0.05) 1px, transparent 1px, transparent 11px);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: 100% 100vh, 100% 100vh, auto;
  background-attachment: scroll;
}
a { color: var(--shelf-accent); }
a:hover { color: oklch(0.89 0.09 70); }

/* ── Top bar ────────────────────────────────────────────────────────────── */
.bs-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(20px, 5vw, 64px);
  flex-wrap: wrap;
}
.bs-brand {
  color: var(--shelf-text);
  font-size: 15px;
  text-decoration: none;
  opacity: 0.85;
}
.bs-brand:hover { opacity: 1; }
.bs-topbar-actions { display: flex; align-items: center; gap: 10px; }
.bs-icon-btn {
  appearance: none;
  border: 1px solid oklch(0.4 0.02 60 / 0.5);
  background: oklch(0.28 0.02 55 / 0.6);
  color: var(--shelf-text);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.bs-icon-btn:hover { background: oklch(0.34 0.02 55 / 0.7); }
.bs-icon-btn[aria-pressed="true"] {
  background: var(--shelf-accent);
  color: oklch(0.2 0.02 60);
  border-color: var(--shelf-accent);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.bs-header {
  padding: 4px clamp(24px, 5vw, 64px) 24px;
}
.bs-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--shelf-text-dim);
}
.bs-title-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.bs-title {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.1;
  color: oklch(0.94 0.012 82);
  margin: 0;
}

/* ── Shelf section ──────────────────────────────────────────────────────── */
.bs-section {
  margin: 0 0 40px;
  position: relative;
}
/* Receding shelf floor — the top face of the shelf that books physically
   rest on. Deliberately lighter and warmer than the back wall so the eye
   reads a distinct wooden surface, matched in tone to the plank-top so the
   front lip and the floor look like one continuous piece of wood seen from
   two angles. Gentle tilt so most of the plane is visible. The back edge
   gets a soft shadow so it seats cleanly against the darker wall.
   Books (z:2) sit above it; the body wall (z:0) shows behind. */
.bs-section::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 34px;             /* rests directly on top of the plank-front */
  height: 112px;            /* taller slab — back edge reaches further up */
  z-index: 1;
  transform-origin: 50% 100%;
  transform: perspective(1100px) rotateX(54deg);
  background:
    /* soft shadow where the wall meets the floor (like light bouncing off
       the floor into the corner) */
    linear-gradient(to top, transparent 0%, transparent 72%, rgba(0,0,0,0.32) 96%, rgba(0,0,0,0.4) 100%),
    /* warm wood surface, subtle front-to-back darkening for depth but
       always LIGHTER than the wall so contrast is obvious */
    linear-gradient(to top, var(--shelf-plank-top), var(--shelf-plank-top-b) 70%, oklch(0.42 0.05 52) 100%),
    /* same 9px grain rhythm as the plank front — reads as one wood */
    repeating-linear-gradient(90deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 9px);
  box-shadow:
    /* dark contact line at the very front lip where floor meets plank top */
    inset 0 -2px 4px -1px rgba(0,0,0,0.35);
  pointer-events: none;
}
.bs-section-label {
  padding: 0 clamp(24px, 5vw, 64px) 10px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--shelf-text-quiet);
}
.bs-shelf-scroll {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  z-index: 2; /* books float above the receding floor */
}
.bs-shelf-scroll::-webkit-scrollbar { display: none; }

.bs-row {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  min-width: max-content;
  padding: 22px clamp(24px, 5vw, 64px) 0;
}
.bs-row--rec {
  padding-top: 14px;
}

/* Wooden shelf plank — full viewport width, above the section wall so the
   plank looks like a continuous piece of wood across the whole page.
   z-index above the floor pseudo so the plank front reads as the visible
   front lip of the tilted floor. */
.bs-plank {
  position: relative;
  z-index: 3;
  margin: 0;
}
.bs-plank-top {
  height: 12px;
  background:
    linear-gradient(var(--shelf-plank-top), var(--shelf-plank-top-b)),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0px, rgba(0,0,0,0.05) 1px, transparent 1px, transparent 7px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24);
}
.bs-plank-front {
  height: 22px;
  background:
    linear-gradient(var(--shelf-plank-front), var(--shelf-plank-front-b)),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.06) 0px, rgba(0,0,0,0.06) 1px, transparent 1px, transparent 9px);
  box-shadow: 0 26px 36px -14px rgba(20,8,0,0.7), inset 0 -1px 0 rgba(0,0,0,0.35);
}

/* caption line beneath the shelf */
.bs-caption {
  padding: 14px clamp(24px, 5vw, 64px) 0;
  min-height: 40px;
}
.bs-caption-inner {
  opacity: 0.34;
  transition: opacity 0.3s ease;
}
.bs-caption-inner.is-active { opacity: 1; }
.bs-caption-title {
  font-family: 'Lora', Georgia, serif;
  font-size: 16px;
  color: oklch(0.93 0.012 82);
}
.bs-caption-meta {
  font-size: 12px;
  color: oklch(0.66 0.018 70);
  margin-left: 12px;
}

/* ── Book wrapper ───────────────────────────────────────────────────────── */
.bs-book {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  transition: transform 0.38s cubic-bezier(.2,.7,.2,1), filter 0.3s ease;
}
.bs-book--standing {
  perspective: 1250px;
  perspective-origin: 50% 42%;
}
.bs-book--flat {
  perspective: 900px;
  perspective-origin: 50% -160px;
}
.bs-book-inner {
  position: absolute;
  transform-style: preserve-3d;
  cursor: pointer;
  will-change: transform;
  transition: filter 0.3s ease;
}
.bs-face {
  position: absolute;
  left: 50%;
  top: 50%;
  backface-visibility: hidden;
}
.bs-face--front {
  overflow: hidden;
  border-radius: 1px 3px 3px 1px;
}
.bs-face--front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 38%, rgba(0,0,0,0.24));
  pointer-events: none;
}
.bs-face--front::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 10px;
  background: linear-gradient(90deg, rgba(0,0,0,0.34), rgba(0,0,0,0));
  pointer-events: none;
}
.bs-face--back { border-radius: 3px 1px 1px 3px; box-shadow: inset 0 0 50px rgba(0,0,0,0.28); }
.bs-face--spine { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bs-cover-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 22px 16px 26px;
  box-sizing: border-box;
}
.bs-cover-art { position: absolute; inset: 0; }
.bs-cover-meta {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.72;
}
.bs-cover-title {
  font-family: 'Lora', Georgia, serif;
  font-size: 15px;
  line-height: 1.32;
  margin-bottom: 4px;
}
.bs-cover-rec-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-color: oklch(0.35 0.02 60);
}
.bs-spine-text {
  writing-mode: vertical-rl;
  font-size: 9.5px;
  letter-spacing: 0.05em;
  opacity: 0.85;
  white-space: nowrap;
  padding: 0 4px;
  overflow: hidden;
  max-height: 100%;
}
/* Standing books read bottom-to-top like real spines; flat books get the
   default vertical-rl (top-to-bottom) so lettering isn't upside down. */
.bs-book--standing .bs-spine-text { transform: rotate(180deg); }
/* Bottom-heavy contact shadow. Two layers stacked via multiple gradients:
   a tight dark core at the book's foot (contact patch), plus a wider soft
   ambient spread. Makes the book read as physically planted on the floor. */
.bs-book-shadow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(26,12,2,0.72), rgba(26,12,2,0) 70%);
  filter: blur(5px);
  pointer-events: none;
}
.bs-slab {
  position: absolute;
  border-radius: 2px;
  box-shadow: 0 7px 13px -4px rgba(20,8,0,0.72), inset 0 1px 0 rgba(255,255,255,0.18);
}

/* ── Empty state (rec shelf until CMS ships) ────────────────────────────── */
.bs-empty {
  padding: 24px clamp(24px, 5vw, 64px) 0;
  color: oklch(0.7 0.02 70);
  font-size: 13px;
  line-height: 1.55;
  max-width: 640px;
}

/* ── Reading overlay ────────────────────────────────────────────────────── */
.bs-reading {
  position: fixed;
  top: 0; left: 0;
  background: var(--reading-bg);
  overflow: hidden;
  z-index: 80;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}
.bs-reading.is-animating {
  transition:
    top 0.55s cubic-bezier(.4,0,.2,1),
    left 0.55s cubic-bezier(.4,0,.2,1),
    width 0.55s cubic-bezier(.4,0,.2,1),
    height 0.55s cubic-bezier(.4,0,.2,1),
    border-radius 0.55s ease;
}
.bs-reading-scroll {
  height: 100%;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.4s ease 0.05s;
  position: relative;
}
.bs-reading.is-open .bs-reading-scroll { opacity: 1; }
.bs-reading-article {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(56px, 9vw, 104px) clamp(22px, 5vw, 26px) 160px;
}
.bs-reading-meta {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--reading-meta);
}
.bs-reading-title {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(30px, 4.4vw, 42px);
  line-height: 1.2;
  color: var(--reading-ink);
  margin: 14px 0 0;
}
.bs-reading-rule {
  width: 40px;
  height: 2px;
  background: var(--reading-rule);
  margin: 26px 0 32px;
}
.bs-reading-body,
.bs-reading-body p {
  font-family: 'Lora', Georgia, serif;
  font-size: 18px;
  line-height: 1.8;
  color: var(--reading-body);
}
.bs-reading-body p { margin: 0 0 22px; }
.bs-reading-body h1, .bs-reading-body h2, .bs-reading-body h3 {
  font-family: 'Lora', Georgia, serif;
  color: var(--reading-ink);
  line-height: 1.25;
  margin: 40px 0 14px;
}
.bs-reading-body h2 { font-size: 24px; }
.bs-reading-body h3 { font-size: 20px; }
.bs-reading-body img, .bs-reading-body figure {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 24px 0;
}
.bs-reading-body a { color: oklch(0.5 0.13 30); text-decoration: underline; }
.bs-reading-body blockquote {
  border-left: 3px solid var(--reading-rule);
  margin: 22px 0;
  padding: 4px 0 4px 18px;
  color: oklch(0.4 0.02 60);
  font-style: italic;
}
.bs-reading-body ul, .bs-reading-body ol { padding-left: 22px; }
.bs-reading-body li { margin: 0 0 8px; }
.bs-reading-footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid oklch(0.85 0.01 80);
  font-size: 14px;
  color: var(--reading-meta);
}
.bs-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.06);
  color: oklch(0.32 0.02 60);
  font-size: 22px;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.2s;
}
.bs-close:hover { background: rgba(0,0,0,0.12); }

/* Decorative page-curl at bottom-right of reading page (spec §7).
   Scale/opacity is driven from JS based on scroll progress. */
.bs-page-curl {
  position: fixed;
  right: 0;
  bottom: 0;
  width: clamp(60px, 12vw, 130px);
  height: clamp(60px, 12vw, 130px);
  pointer-events: none;
  z-index: 81;
  opacity: 0;
  transform: scale(0.6);
  transform-origin: 100% 100%;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.bs-page-curl svg { width: 100%; height: 100%; display: block; }

/* ── Recommendation modal ──────────────────────────────────────────────── */
.bs-rec-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8,6,4,0);
  transition: background 0.25s ease, backdrop-filter 0.25s ease;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(0);
}
.bs-rec-backdrop.is-open {
  background: rgba(8,6,4,0.62);
  backdrop-filter: blur(4px);
}
.bs-rec-card {
  width: min(320px, 84vw);
  background: oklch(0.25 0.014 55);
  border: 1px solid oklch(0.33 0.016 55);
  border-radius: 6px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.6);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.bs-rec-backdrop.is-open .bs-rec-card { opacity: 1; transform: scale(1); }
.bs-rec-cover {
  width: 100%;
  height: 240px;
  background-size: cover;
  background-position: center;
  background-color: oklch(0.35 0.02 60);
}
.bs-rec-body { padding: 22px 24px 26px; display: flex; flex-direction: column; }
.bs-rec-title { font-family: 'Lora', Georgia, serif; font-size: 20px; color: oklch(0.93 0.01 80); margin: 0; }
.bs-rec-author { font-size: 13px; color: oklch(0.64 0.015 70); margin: 5px 0 20px; }
.bs-rec-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-radius: 4px;
  background: var(--shelf-accent);
  color: oklch(0.2 0.02 60);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.bs-rec-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.08);
  color: oklch(0.85 0.01 80);
  font-size: 18px;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── Footer (Stripe Press-inspired) ────────────────────────────────────── */
/* No hard border on top — the header of the footer used to have both a
   1px stroke AND a light→dark gradient, which read as two competing edges.
   Gradient alone does the divide now. */
.bs-footer {
  margin-top: 32px;
  padding: 72px clamp(24px, 5vw, 64px) 40px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.28) 60%, rgba(0,0,0,0.42) 100%);
  color: oklch(0.78 0.015 75);
}
.bs-footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px 60px;
  align-items: start;
}
.bs-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bs-footer-mark {
  font-family: 'Lora', Georgia, serif;
  font-size: 20px;
  color: oklch(0.94 0.012 82);
  letter-spacing: 0.005em;
}
.bs-footer-tag {
  font-size: 13px;
  line-height: 1.55;
  color: oklch(0.7 0.02 70);
  max-width: 44ch;
}
.bs-footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}
.bs-footer-links a {
  color: oklch(0.9 0.012 80);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid oklch(0.4 0.02 60 / 0.6);
  align-self: flex-start;
  transition: color 0.2s, border-color 0.2s;
}
.bs-footer-links a:hover {
  color: var(--shelf-accent);
  border-color: var(--shelf-accent);
}
/* Colophon sits below the brand + links with just spacing — no rule line,
   since a second horizontal edge inside the footer competes with the one
   at the top of the section. */
.bs-footer-colophon {
  grid-column: 1 / -1;
  margin-top: 36px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: oklch(0.62 0.015 70);
}
.bs-footer-inspired {
  grid-column: 1 / -1;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  padding: 6px 2px;
  color: oklch(0.78 0.015 75);
  text-decoration: none;
  border-bottom: none;
  transition: color 0.2s;
}
.bs-footer-inspired:hover {
  color: var(--shelf-accent);
}
.bs-footer-inspired-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: oklch(0.62 0.015 70);
}
.bs-footer-inspired-mark {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.bs-footer-inspired-name {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: inherit;
}

@media (max-width: 640px) {
  .bs-footer-inner { grid-template-columns: 1fr; gap: 24px; }
  .bs-footer { padding-top: 40px; }
}

/* ── Mobile / touch tweaks (spec §6) ───────────────────────────────────── */
@media (hover: none), (max-width: 640px) {
  .bs-book--standing .bs-book-inner {
    /* on touch, always show the cover face — no hover to pull it out */
    transform: translateY(0) translateZ(0) rotateY(0deg) !important;
  }
  .bs-book-shadow { opacity: 0.35 !important; filter: blur(3px) !important; }
  .bs-caption { display: none; }
  .bs-header { padding-bottom: 12px; }
}