/* ============================================================
   AND YOU CAN QUOTE ME — THE LIBRARY OF VOICES
   Visual specification: architectural editorial reading room.
   No raster imagery. All depth from CSS perspective transforms.
   ============================================================ */

/* ----------------- Design tokens ----------------- */

:root {
  /* The void: deep desaturated graphite, not pure black */
  --void-base: #16181a;
  --void-deep: #0e1011;
  --void-near: #1c1f22;

  /* The architectural grid */
  --grid-line: rgba(170, 158, 142, 0.08);
  --grid-line-strong: rgba(170, 158, 142, 0.13);

  /* The page light: warm but restrained */
  --light-source: rgba(220, 200, 168, 0.07);
  --light-edge: rgba(220, 200, 168, 0.02);

  /* Paper: archival surface for cards */
  --paper: #f6f3ec;
  --paper-warm: #f1ede4;
  --paper-shadow-edge: rgba(40, 32, 22, 0.06);

  /* Ink: typography */
  --ink-primary: #1a1812;
  --ink-secondary: #4a4337;
  --ink-tertiary: #7a7264;
  --ink-quaternary: #a39a89;

  /* Hairlines and division */
  --rule: rgba(160, 145, 120, 0.22);
  --rule-strong: rgba(80, 70, 55, 0.4);

  /* Confidence accents — restrained, not alarming */
  --conf-verified:    #4a6a52;
  --conf-attributed:  #7a6a3e;
  --conf-disputed:    #8a4a36;
  --conf-paraphrased: #5a5a6e;
  --conf-apocryphal:  #6e3636;

  /* On-void typography */
  --void-text-primary:   #f3ead9;
  --void-text-secondary: #d0c4a8;
  --void-text-tertiary:  #b7ad98;

  /* Accent for hover/interactive states on the void */
  --void-accent: #f0d7aa;

  /* Type scale — modular, not arbitrary */
  --type-display:    clamp(2.05rem, 1.45rem + 2.25vw, 3.35rem);
  --type-quote-lg:   clamp(1.35rem, 1.05rem + 1vw, 1.7rem);
  --type-quote-md:   clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
  --type-body:       1rem;
  --type-small:      0.875rem;
  --type-micro:      0.75rem;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* Container width: optimal reading measure */
  --measure: 38rem;
  --measure-wide: 46rem;

  /* Motion */
  --ease-out:  cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   180ms;
  --dur-medium: 320ms;
  --dur-slow:   600ms;

  /* Infinite Library background tuning */
  --bg-exposure: 1.24;
  --bg-book-contrast: 1.38;
  --bg-side-light: 0.88;
  --bg-reflection: 0.96;
  --bg-haze: 0.80;
  --bg-central-scrim: 0.63;
  --bg-edge-vignette: 0.46;

  /* Fixed interface + macOS-style glass input */
  --glass-fill: rgba(255, 255, 255, 0.075);
  --glass-fill-strong: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(244, 229, 201, 0.42);
  --glass-border-strong: rgba(255, 244, 220, 0.72);
  --glass-shadow: rgba(0, 0, 0, 0.34);

  /* UI legibility and brand emphasis */
  --ui-shadow-strong: rgba(0, 0, 0, 0.78);
  --ui-shadow-soft: rgba(0, 0, 0, 0.48);
  --ui-shadow-faint: rgba(0, 0, 0, 0.28);
  --ui-gold-soft: rgba(240, 215, 170, 0.20);
  --ui-gold-line: rgba(240, 215, 170, 0.42);
  --ui-glass-panel: rgba(8, 9, 10, 0.30);
  --ui-glass-panel-light: rgba(255, 245, 222, 0.055);
}

/* ----------------- Reset ----------------- */

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

html, body { margin: 0; padding: 0; }

body {
  background: var(--void-base);
  color: var(--void-text-primary);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: var(--type-body);
  line-height: 1.55;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ----------------- Skip link / accessibility ----------------- */

.skip-link {
  position: fixed;
  left: -9999px;
  top: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--paper);
  color: var(--ink-primary);
  text-decoration: none;
  font-weight: 600;
  z-index: 100;
}
.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
  outline: 2px solid var(--void-accent);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------- The architectural void ----------------- */
/* The Infinite Library is a fixed decorative stage. Books are visible
   coloured surfaces; light is now balanced from multiple off-frame
   directions and reflected between shelves. The books do not glow. */

.void {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 60% 68% at 12% 45%,
      rgba(112, 68, 36, 0.25) 0%,
      rgba(53, 37, 26, 0.18) 38%,
      transparent 72%),
    radial-gradient(ellipse 56% 64% at 88% 47%,
      rgba(63, 91, 100, 0.20) 0%,
      rgba(30, 44, 48, 0.12) 42%,
      transparent 74%),
    radial-gradient(ellipse 76% 70% at 50% 48%,
      rgba(54, 38, 29, 0.48) 0%,
      rgba(24, 24, 23, 0.88) 44%,
      rgba(8, 9, 10, 1) 100%),
    linear-gradient(90deg,
      #17100d 0%,
      #1b1714 36%,
      #121a1d 68%,
      #090a0b 100%);
}

.tunnel {
  position: absolute;
  inset: -2%;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}

.tunnel__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 104%;
  height: 104%;
  opacity: var(--depth);
  filter:
    brightness(calc(var(--tone) * var(--bg-exposure)))
    saturate(var(--bg-book-contrast))
    contrast(1.08);
  transform: translate(-50%, -50%) scale(var(--scale));
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

.void__occlusion,
.void__beam,
.void__reflection,
.void__haze,
.void__scrim,
.void__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.void__occlusion {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.42) 0px,
      rgba(0, 0, 0, 0.42) 14px,
      transparent 14px,
      transparent 90px
    ),
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.10) 0%,
      transparent 24%,
      transparent 72%,
      rgba(0, 0, 0, 0.20) 100%);
  opacity: 0.22;
  mix-blend-mode: multiply;
}

/* Lateral external light: balanced warm/cool sources from off-frame,
   like reflected light travelling through an impossible archive. */
.void__beam {
  inset: -12%;
  opacity: var(--bg-side-light);
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 40% 62% at -8% 44%,
      rgba(255, 226, 176, 0.34) 0%,
      rgba(255, 197, 116, 0.17) 30%,
      rgba(255, 197, 116, 0.052) 56%,
      transparent 76%),
    radial-gradient(ellipse 36% 58% at 108% 47%,
      rgba(184, 220, 219, 0.25) 0%,
      rgba(146, 183, 184, 0.105) 35%,
      rgba(146, 183, 184, 0.035) 58%,
      transparent 76%),
    radial-gradient(ellipse 34% 26% at 52% -6%,
      rgba(255, 229, 190, 0.115) 0%,
      rgba(255, 229, 190, 0.038) 44%,
      transparent 72%),
    linear-gradient(90deg,
      rgba(255, 212, 145, 0.115) 0%,
      rgba(255, 230, 190, 0.070) 28%,
      rgba(205, 226, 224, 0.060) 64%,
      rgba(170, 209, 211, 0.095) 100%);
  filter: blur(10px);
}

/* Reflected light between opposing shelves. The goal is not symmetry,
   but a believable multi-directional bounce in space. */
.void__reflection {
  opacity: var(--bg-reflection);
  mix-blend-mode: screen;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255, 204, 132, 0.070) 18%,
      rgba(255, 239, 202, 0.052) 36%,
      transparent 51%,
      rgba(181, 218, 216, 0.052) 68%,
      rgba(170, 212, 214, 0.070) 100%),
    linear-gradient(270deg,
      transparent 0%,
      rgba(181, 218, 216, 0.050) 21%,
      rgba(244, 219, 180, 0.040) 48%,
      transparent 78%),
    radial-gradient(ellipse 46% 20% at 50% 48%,
      rgba(255, 224, 168, 0.040) 0%,
      transparent 74%);
}

.void__haze {
  opacity: var(--bg-haze);
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 34% 42% at 28% 42%,
      rgba(255, 226, 182, 0.044) 0%,
      transparent 66%),
    radial-gradient(ellipse 30% 36% at 72% 50%,
      rgba(190, 222, 220, 0.045) 0%,
      transparent 70%),
    radial-gradient(ellipse 50% 24% at 50% 48%,
      rgba(255, 236, 210, 0.025) 0%,
      transparent 75%);
  filter: blur(18px);
}

/* Central readability field: narrower and lighter than before, so the
   books retain colour at the sides while text remains protected. */
.void__scrim {
  background:
    radial-gradient(ellipse 37% 72% at 50% 49%,
      rgba(0, 0, 0, var(--bg-central-scrim)) 0%,
      rgba(0, 0, 0, 0.45) 28%,
      rgba(0, 0, 0, 0.22) 54%,
      rgba(0, 0, 0, 0.055) 78%,
      transparent 96%),
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.14) 0%,
      transparent 22%,
      transparent 70%,
      rgba(0, 0, 0, 0.30) 100%);
}

.void__vignette {
  background:
    radial-gradient(ellipse 84% 95% at 50% 50%,
      transparent 55%,
      rgba(0, 0, 0, 0.30) 84%,
      rgba(0, 0, 0, var(--bg-edge-vignette)) 100%);
}

@media (max-width: 700px) {
  .tunnel {
    inset: -10%;
    perspective: 980px;
  }

  .tunnel__ring {
    width: 124%;
    height: 124%;
  }

  .tunnel__ring[style*="--ring: 7"],
  .tunnel__ring[style*="--ring: 6"] {
    display: none;
  }

  .void__beam {
    opacity: 0.74;
    filter: blur(8px);
  }

  .void__haze {
    opacity: 0.58;
    filter: blur(14px);
  }

  .void__scrim {
    background:
      radial-gradient(ellipse 46% 78% at 50% 49%,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.60) 34%,
        rgba(0, 0, 0, 0.30) 62%,
        transparent 92%),
      linear-gradient(180deg,
        rgba(0, 0, 0, 0.16) 0%,
        transparent 22%,
        transparent 70%,
        rgba(0, 0, 0, 0.34) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .void__beam,
  .void__haze {
    filter: none;
  }
}

/* ----------------- The reading room (fixed interface layer) ----------------- */

.reading-room {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: min(calc(100vw - clamp(1.25rem, 5vw, 4rem)), var(--measure-wide));
  max-width: var(--measure-wide);
  height: 100vh;
  height: 100svh;
  margin: 0 auto;
  padding:
    clamp(1.45rem, 4.2vh, var(--space-8))
    var(--space-5)
    clamp(1rem, 3vh, var(--space-6));
  transform: none;
  transition:
    opacity var(--dur-medium) var(--ease-out),
    filter var(--dur-medium) var(--ease-out);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}

@supports (height: 100dvh) {
  .reading-room {
    height: 100dvh;
  }
}

.reading-room::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: min(58rem, 100vw);
  margin: 0 auto;
  transform: none;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 42% 76% at 50% 48%,
      rgba(0, 0, 0, 0.30) 0%,
      rgba(0, 0, 0, 0.18) 44%,
      rgba(0, 0, 0, 0.05) 72%,
      transparent 100%);
}

.reading-room > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 700px) {
  .reading-room {
    width: 100%;
    padding:
      clamp(1.25rem, 4.8vh, var(--space-7))
      var(--space-4)
      clamp(0.9rem, 3vh, var(--space-5));
  }

  .reading-room::before {
    width: 100vw;
    background:
      radial-gradient(ellipse 54% 78% at 50% 48%,
        rgba(0, 0, 0, 0.38) 0%,
        rgba(0, 0, 0, 0.22) 50%,
        rgba(0, 0, 0, 0.07) 76%,
        transparent 100%);
  }
}

/* ----------------- Masthead ----------------- */

.masthead {
  flex: 0 0 auto;
  text-align: center;
  margin-bottom: clamp(1rem, 3.4vh, var(--space-7));
}

.masthead__title {
  font-family: 'Spectral', Georgia, serif;
  font-weight: 500;
  font-size: var(--type-display);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--void-text-primary);
  margin: 0;
}

.masthead__sub {
  font-family: 'Inter', sans-serif;
  font-size: var(--type-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--void-text-tertiary);
  margin: var(--space-2) 0 0;
}

/* ----------------- Hero ----------------- */

.hero {
  flex: 0 0 auto;
  margin-bottom: clamp(1rem, 3.4vh, var(--space-7));
  padding: 0 var(--space-2);
  text-align: center;
  max-width: var(--measure);
  margin-inline: auto;
}

.hero__rule {
  width: 60px;
  height: 1px;
  background: var(--rule);
  margin: 0 auto var(--space-5);
}

.hero__label {
  font-size: var(--type-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--void-text-tertiary);
  margin: 0 0 var(--space-4);
}

.hero__quote {
  margin: 0;
  border: none;
}

.hero__text {
  font-family: 'Spectral', Georgia, serif;
  font-weight: 400;
  font-size: var(--type-quote-lg);
  line-height: 1.4;
  color: var(--void-text-primary);
  margin: 0 0 var(--space-4);
  font-style: italic;
  letter-spacing: -0.005em;
}

.hero__attribution {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.hero__author {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: var(--type-small);
  color: var(--void-text-secondary);
  letter-spacing: 0.02em;
}

.hero__lifespan {
  font-size: var(--type-micro);
  color: var(--void-text-tertiary);
  font-weight: 400;
  letter-spacing: 0.04em;
}

.hero__source {
  font-size: var(--type-micro);
  color: var(--void-text-tertiary);
  margin: var(--space-3) 0 0;
  letter-spacing: 0.02em;
  font-style: italic;
}

/* ----------------- Search ----------------- */

.search {
  flex: 0 0 auto;
  margin: 0 auto clamp(0.9rem, 2.4vh, var(--space-6));
  max-width: var(--measure);
  width: 100%;
}

.tabs {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--rule);
}

.tab {
  font-family: 'Inter', sans-serif;
  font-size: var(--type-small);
  font-weight: 500;
  color: var(--void-text-tertiary);
  background: none;
  border: none;
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
  letter-spacing: 0.02em;
  /* Mobile tap target */
  min-height: 44px;
}

.tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 1px;
  background: var(--void-accent);
  transition: transform var(--dur-fast) var(--ease-out);
  transform-origin: center;
}

.tab:hover {
  color: var(--void-text-primary);
}

.tab--active,
.tab[aria-selected="true"] {
  color: var(--void-text-primary);
  font-weight: 600;
}

.tab--active::after,
.tab[aria-selected="true"]::after {
  transform: translateX(-50%) scaleX(1);
}

.tab:focus-visible {
  outline: 2px solid var(--void-accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.panel {
  display: block;
}

.panel[hidden] {
  display: none;
}

.search__input {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  background:
    linear-gradient(135deg,
      var(--glass-fill-strong) 0%,
      var(--glass-fill) 42%,
      rgba(12, 14, 16, 0.22) 100%),
    rgba(18, 20, 22, 0.18);
  color: #f0eadb;
  border: 1px solid var(--glass-border);
  border-top-color: rgba(255, 246, 224, 0.62);
  border-bottom-color: rgba(90, 68, 44, 0.34);
  border-radius: 14px;
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 18px 36px var(--glass-shadow),
    0 0 0 1px rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(22px) saturate(155%) brightness(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(155%) brightness(1.08);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}

.search__input::placeholder {
  color: rgba(232, 224, 206, 0.58);
  font-style: italic;
}

.search__input:focus-visible {
  border-color: var(--glass-border-strong);
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.085) 44%,
      rgba(12, 14, 16, 0.20) 100%),
    rgba(18, 20, 22, 0.14);
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16),
    0 18px 40px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 0 32px rgba(255, 216, 150, 0.13);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .search__input {
    background: rgba(18, 20, 22, 0.74);
  }
}

.search__hint {
  font-size: var(--type-small);
  color: var(--void-text-tertiary);
  margin: var(--space-3) 0 0;
  text-align: center;
  letter-spacing: 0.01em;
}

/* ----------------- Results ----------------- */

.results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 0.15rem clamp(0.75rem, 2vh, var(--space-5));
  scrollbar-gutter: stable both-edges;
}

.results::-webkit-scrollbar {
  width: 10px;
}

.results::-webkit-scrollbar-thumb {
  background: rgba(212, 197, 168, 0.16);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

.results__heading {
  font-family: 'Inter', sans-serif;
  font-size: var(--type-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--void-text-tertiary);
  margin: 0 0 var(--space-4);
  text-align: center;
}

.results__heading:focus {
  outline: none;
}

.results__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.empty-state {
  padding: var(--space-7) var(--space-4);
  text-align: center;
}

.empty-state__prompt {
  font-family: 'Spectral', Georgia, serif;
  font-style: italic;
  font-size: var(--type-quote-md);
  color: var(--void-text-secondary);
  margin: 0 0 var(--space-3);
}

.empty-state__sub {
  font-size: var(--type-small);
  color: var(--void-text-tertiary);
  margin: 0;
}

/* ----------------- Quote card ----------------- */

.card {
  background: var(--paper);
  color: var(--ink-primary);
  border-radius: 1px;
  padding: var(--space-6) var(--space-6) var(--space-5);
  /* Sharp Y-axis-only shadow: a single overhead light source */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 14px 28px -8px rgba(0, 0, 0, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.25);
  position: relative;
  /* Subtle entrance: handled in JS w/ staggered delay */
  animation: card-enter var(--dur-medium) var(--ease-out) backwards;
}

@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
}

@keyframes card-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card__why {
  font-family: 'Inter', sans-serif;
  font-size: var(--type-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin: 0 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.card__why-rule {
  flex: 1;
  height: 1px;
  background: var(--paper-shadow-edge);
}

.card__quote {
  font-family: 'Spectral', Georgia, serif;
  font-weight: 500;
  font-size: var(--type-quote-md);
  line-height: 1.42;
  color: var(--ink-primary);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.005em;
}

.card__attribution {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}

.card__author {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: var(--type-body);
  color: var(--ink-secondary);
}

.card__lifespan {
  font-size: var(--type-small);
  color: var(--ink-tertiary);
  font-weight: 400;
}

.card__role {
  flex-basis: 100%;
  font-size: var(--type-small);
  color: var(--ink-tertiary);
  font-style: italic;
}

/* Confidence badge: small, restrained, telling the truth */

.confidence {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: 'Inter', sans-serif;
  font-size: var(--type-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border: 1px solid currentColor;
  border-radius: 2px;
  margin-bottom: var(--space-4);
}

.confidence--verified    { color: var(--conf-verified); }
.confidence--attributed  { color: var(--conf-attributed); }
.confidence--disputed    { color: var(--conf-disputed); }
.confidence--paraphrased { color: var(--conf-paraphrased); }
.confidence--apocryphal  { color: var(--conf-apocryphal); }

.confidence__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.paraphrase-flag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px 6px;
  border-radius: 2px;
  background: rgba(120, 100, 70, 0.1);
  color: var(--conf-attributed);
  font-size: var(--type-micro);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Source */

.card__source {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--paper-warm);
  border-left: 2px solid var(--rule-strong);
  font-size: var(--type-small);
  color: var(--ink-secondary);
  line-height: 1.5;
}

.card__source-label {
  font-family: 'Inter', sans-serif;
  font-size: var(--type-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin: 0 0 var(--space-2);
}

.card__source p { margin: 0 0 var(--space-2); }
.card__source p:last-child { margin-bottom: 0; }

.card__source em {
  font-style: italic;
  color: var(--ink-secondary);
}

/* Context — historical, factual, no embellishment */

.card__context-label {
  font-family: 'Inter', sans-serif;
  font-size: var(--type-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin: var(--space-5) 0 var(--space-2);
}

.card__context {
  font-size: var(--type-small);
  line-height: 1.6;
  color: var(--ink-secondary);
  margin: 0;
}

/* Actions */

.card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--paper-shadow-edge);
}

.btn {
  font-family: 'Inter', sans-serif;
  font-size: var(--type-small);
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: 1px solid var(--ink-tertiary);
  color: var(--ink-secondary);
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  letter-spacing: 0.02em;
  /* Mobile tap target */
  min-height: 44px;
}

.btn:hover {
  background: var(--paper-warm);
  border-color: var(--ink-secondary);
}

.btn:focus-visible {
  outline: 2px solid var(--ink-secondary);
  outline-offset: 2px;
}

/* Similar quotes — inline expansion */

.similar {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--paper-warm);
  border-radius: 1px;
  display: none;
}

.similar[data-open="true"] {
  display: block;
}

.similar__heading {
  font-family: 'Inter', sans-serif;
  font-size: var(--type-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin: 0 0 var(--space-3);
}

.similar__item {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--paper-shadow-edge);
}

.similar__item:first-child {
  border-top: none;
  padding-top: 0;
}

.similar__quote {
  font-family: 'Spectral', Georgia, serif;
  font-size: var(--type-small);
  font-style: italic;
  color: var(--ink-secondary);
  margin: 0 0 var(--space-1);
}

.similar__author {
  font-size: var(--type-micro);
  color: var(--ink-tertiary);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ----------------- Toast ----------------- */

.toast {
  position: fixed;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--void-near);
  color: var(--void-text-primary);
  padding: var(--space-3) var(--space-5);
  font-size: var(--type-small);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  z-index: 50;
  letter-spacing: 0.02em;
}

.toast[data-visible="true"] {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity var(--dur-fast) linear; transform: translateX(-50%); }
  .toast[data-visible="true"] { transform: translateX(-50%); }
}

/* ----------------- Colophon ----------------- */

.colophon {
  flex: 0 0 auto;
  margin-top: clamp(0.8rem, 2.4vh, var(--space-8));
  padding-top: clamp(0.75rem, 1.8vh, var(--space-5));
  border-top: 1px solid var(--rule);
  text-align: center;
}

.colophon__line {
  font-size: var(--type-small);
  color: var(--void-text-tertiary);
  margin: 0 0 var(--space-3);
}

.colophon__line--small {
  font-size: var(--type-micro);
  max-width: 30rem;
  margin-inline: auto;
  line-height: 1.6;
  letter-spacing: 0.01em;
}


@media (max-height: 760px) {
  .reading-room {
    padding-top: 1.1rem;
    padding-bottom: 0.85rem;
  }

  .masthead,
  .hero,
  .search {
    margin-bottom: 0.85rem;
  }

  .hero__rule {
    margin-bottom: 0.75rem;
  }

  .hero__source {
    display: none;
  }

  .empty-state {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
}

@media (max-height: 640px) {
  .colophon {
    display: none;
  }
}

/* ----------------- Reduced motion ----------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ----------------- UI contrast + brand prominence pass -----------------
   Keeps the Infinite Library visible while giving the interface its own
   stronger typographic plane: brighter brand, clearer labels, safer microcopy. */

:root {
  --void-text-primary: #f2ead9;
  --void-text-secondary: #d8ccb5;
  --void-text-tertiary: #bfb198;
  --void-accent: #ecd4a8;

  --ui-brand: #fff3dd;
  --ui-brand-soft: #ead8ba;
  --ui-label: #ddcba8;
  --ui-small: #cabea8;
  --ui-small-strong: #e1d4bd;
  --ui-rule: rgba(236, 212, 168, 0.42);
  --ui-shadow: rgba(0, 0, 0, 0.82);
  --ui-caption-fill: rgba(8, 10, 12, 0.34);
  --ui-caption-border: rgba(239, 214, 176, 0.20);

  --type-display: clamp(2.05rem, 1.42rem + 2.15vw, 3.25rem);

  /* A small lift to the central readability field without crushing the books. */
  --bg-central-scrim: 0.62;
}

.reading-room::before {
  background:
    radial-gradient(ellipse 44% 82% at 50% 48%,
      rgba(0, 0, 0, 0.50) 0%,
      rgba(0, 0, 0, 0.36) 34%,
      rgba(0, 0, 0, 0.20) 58%,
      rgba(0, 0, 0, 0.075) 78%,
      transparent 100%);
}

.masthead {
  position: relative;
  isolation: isolate;
  padding-block: 0.15rem;
}

.masthead::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -0.75rem;
  width: min(38rem, calc(100vw - 2rem));
  height: calc(100% + 1.35rem);
  transform: translateX(-50%);
  pointer-events: none;
  border-radius: 999px;
  background:
    radial-gradient(ellipse 64% 80% at 50% 48%,
      rgba(0, 0, 0, 0.46) 0%,
      rgba(0, 0, 0, 0.30) 44%,
      rgba(0, 0, 0, 0.11) 72%,
      transparent 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 18px 44px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(5px) saturate(128%);
  -webkit-backdrop-filter: blur(5px) saturate(128%);
}

.masthead__title {
  display: inline-block;
  font-weight: 600;
  font-size: clamp(2.18rem, 1.46rem + 2.35vw, 3.45rem);
  line-height: 1.04;
  letter-spacing: -0.026em;
  color: var(--ui-brand);
  text-wrap: balance;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10),
    0 2px 10px var(--ui-shadow),
    0 0 30px rgba(255, 222, 174, 0.18),
    0 0 1px rgba(255, 249, 230, 0.72);
}

.masthead__title::after {
  content: "";
  display: block;
  width: min(10rem, 44%);
  height: 1px;
  margin: 0.62rem auto 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(236, 212, 168, 0.24) 18%,
    rgba(255, 238, 202, 0.72) 50%,
    rgba(236, 212, 168, 0.24) 82%,
    transparent 100%);
  box-shadow: 0 0 14px rgba(255, 218, 160, 0.20);
}

.masthead__sub {
  margin-top: 0.72rem;
  color: var(--ui-brand-soft);
  font-weight: 700;
  letter-spacing: 0.235em;
  text-shadow:
    0 2px 9px rgba(0, 0, 0, 0.72),
    0 0 18px rgba(255, 222, 174, 0.10);
}

.hero__rule {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(236, 212, 168, 0.35) 18%,
    rgba(255, 240, 208, 0.72) 50%,
    rgba(236, 212, 168, 0.35) 82%,
    transparent 100%);
  box-shadow: 0 0 12px rgba(255, 218, 160, 0.14);
}

.hero__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.22rem 0.72rem;
  border: 1px solid rgba(239, 214, 176, 0.16);
  border-radius: 999px;
  background: rgba(8, 10, 12, 0.20);
  backdrop-filter: blur(9px) saturate(120%);
  -webkit-backdrop-filter: blur(9px) saturate(120%);
}

.hero__label,
.results__heading {
  color: var(--ui-label);
  font-weight: 700;
  text-shadow:
    0 2px 9px rgba(0, 0, 0, 0.74),
    0 0 1px rgba(255, 246, 224, 0.42);
}

.hero__text {
  color: #f7efdf;
  font-weight: 500;
  text-shadow:
    0 2px 18px rgba(0, 0, 0, 0.78),
    0 0 1px rgba(255, 248, 226, 0.48),
    0 0 26px rgba(255, 220, 170, 0.08);
}

.hero__author {
  color: var(--ui-small-strong);
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.70);
}

.hero__lifespan,
.hero__source {
  color: var(--ui-small);
  font-weight: 500;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.66);
}

.tabs {
  border-bottom-color: rgba(236, 212, 168, 0.32);
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.34));
}

.tab {
  color: #cdbf9f;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.68);
}

.tab:hover {
  color: #fff0d8;
}

.tab--active,
.tab[aria-selected="true"] {
  color: #fff2dc;
  font-weight: 700;
}

.tab::after {
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(236, 212, 168, 0.90),
    transparent);
  box-shadow: 0 0 12px rgba(255, 218, 160, 0.24);
}

.search__input::placeholder {
  color: rgba(244, 235, 216, 0.72);
}

.search__hint,
.empty-state__sub {
  color: var(--ui-small);
  font-weight: 500;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.66);
}

.results__heading span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.20rem 0.68rem;
  border: 1px solid rgba(239, 214, 176, 0.16);
  border-radius: 999px;
  background: rgba(8, 10, 12, 0.18);
  backdrop-filter: blur(9px) saturate(118%);
  -webkit-backdrop-filter: blur(9px) saturate(118%);
}

.empty-state {
  border-radius: 22px;
  background:
    radial-gradient(ellipse at center,
      rgba(0, 0, 0, 0.22) 0%,
      rgba(0, 0, 0, 0.10) 54%,
      transparent 100%);
}

.empty-state__prompt {
  color: #e8dac0;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.72),
    0 0 1px rgba(255, 246, 224, 0.40);
}

.colophon {
  width: min(34rem, 100%);
  margin-left: auto;
  margin-right: auto;
  padding:
    clamp(0.78rem, 1.8vh, 1.1rem)
    clamp(1rem, 2vw, 1.35rem);
  border: 1px solid var(--ui-caption-border);
  border-top-color: rgba(239, 214, 176, 0.34);
  border-radius: 16px;
  background:
    linear-gradient(180deg,
      rgba(12, 14, 16, 0.40) 0%,
      rgba(8, 10, 12, 0.28) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 16px 38px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px) saturate(132%);
  -webkit-backdrop-filter: blur(10px) saturate(132%);
}

.colophon__line {
  color: #d8ccb5;
  font-weight: 500;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.70);
}

.colophon__line strong {
  color: #f2e7cf;
  font-weight: 700;
}

.colophon__line--small {
  font-size: clamp(0.78rem, 0.74rem + 0.12vw, 0.85rem);
  color: #c9bea8;
  line-height: 1.68;
  letter-spacing: 0.012em;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead::before,
  .hero__label,
  .results__heading span,
  .colophon {
    background-color: rgba(8, 10, 12, 0.62);
  }
}

@media (max-width: 700px) {
  .reading-room::before {
    background:
      radial-gradient(ellipse 62% 82% at 50% 48%,
        rgba(0, 0, 0, 0.56) 0%,
        rgba(0, 0, 0, 0.38) 48%,
        rgba(0, 0, 0, 0.13) 76%,
        transparent 100%);
  }

  .masthead__title {
    font-size: clamp(2rem, 11vw, 2.95rem);
  }

  .masthead__sub {
    letter-spacing: 0.19em;
  }
}

/* ----------------- Subtle “entering the library” transition -----------------
   Activated only on an explicit search submit. The movement is short,
   editorial, and spatial: a slight forward drift, one haze pulse, and
   a calm centre-in reveal for the archive results. */

:root {
  --library-entry-duration: 780ms;
  --library-entry-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --library-entry-depth: 1.014;
}

.tunnel {
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: 50% 50%;
  transition: transform 900ms var(--library-entry-ease);
  will-change: transform;
}

/* Layout guard: the library animation must never manipulate the fixed UI shell. */
body.library-has-results .reading-room,
body.is-entering-library .reading-room,
body.library-has-results .reading-room::before,
body.is-entering-library .reading-room::before {
  transform: none;
}

body.library-has-results .tunnel {
  transform: translate3d(0, 0, 0) scale(var(--library-entry-depth));
}

body.is-entering-library .tunnel {
  animation: library-forward-drift var(--library-entry-duration) var(--library-entry-ease) both;
}

.void__beam::after,
.void__haze::before {
  content: "";
  position: absolute;
  inset: -12%;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
}

.void__beam::after {
  background:
    radial-gradient(ellipse 44% 26% at 50% 48%,
      rgba(255, 236, 201, 0.16) 0%,
      rgba(255, 213, 151, 0.075) 30%,
      rgba(188, 220, 220, 0.040) 52%,
      transparent 74%),
    linear-gradient(90deg,
      transparent 0%,
      rgba(255, 219, 160, 0.065) 18%,
      rgba(245, 230, 204, 0.060) 48%,
      rgba(172, 213, 214, 0.055) 78%,
      transparent 100%);
  filter: blur(18px);
  transform: scale(0.985);
}

.void__haze::before {
  background:
    radial-gradient(ellipse 36% 20% at 50% 50%,
      rgba(255, 240, 215, 0.115) 0%,
      rgba(255, 218, 170, 0.060) 42%,
      transparent 78%);
  filter: blur(24px);
  transform: scale(0.96);
}

body.is-entering-library .void__beam::after {
  animation: library-light-flare var(--library-entry-duration) var(--library-entry-ease) both;
}

body.is-entering-library .void__haze::before {
  animation: library-haze-breath var(--library-entry-duration) var(--library-entry-ease) both;
}

body.is-entering-library .void__reflection {
  animation: library-reflection-lift var(--library-entry-duration) var(--library-entry-ease) both;
}

.results {
  transform-origin: 50% 28%;
}

.results[data-entering="true"] .results__heading,
.results[data-entering="true"] .results__list,
.results[data-entering="true"] .empty-state {
  animation: library-results-emerge 620ms var(--library-entry-ease) 120ms both;
}

.results[data-entering="true"] .card {
  animation-name: card-enter;
  animation-duration: 360ms;
  animation-timing-function: var(--library-entry-ease);
}

@keyframes library-forward-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  46% {
    transform: translate3d(0, 0, 0) scale(1.036);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(var(--library-entry-depth));
  }
}

@keyframes library-light-flare {
  0% {
    opacity: 0;
    transform: scale(0.97);
  }
  34% {
    opacity: 0.78;
    transform: scale(1.015);
  }
  100% {
    opacity: 0;
    transform: scale(1.055);
  }
}

@keyframes library-haze-breath {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  42% {
    opacity: 0.62;
    transform: scale(1.025);
  }
  100% {
    opacity: 0;
    transform: scale(1.055);
  }
}

@keyframes library-reflection-lift {
  0% {
    opacity: var(--bg-reflection);
  }
  42% {
    opacity: 1;
  }
  100% {
    opacity: var(--bg-reflection);
  }
}

@keyframes library-results-emerge {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tunnel {
    transition: none !important;
    will-change: auto;
  }

  body.library-has-results .tunnel,
  body.is-entering-library .tunnel {
    transform: none !important;
    animation: none !important;
  }

  .void__beam::after,
  .void__haze::before {
    display: none;
  }

  body.is-entering-library .void__reflection,
  .results[data-entering="true"] .results__heading,
  .results[data-entering="true"] .results__list,
  .results[data-entering="true"] .empty-state {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }
}