/* Wardenclyffe Dossier — book figure styles
 * Drop a <figure class="book-figure"> ... </figure> into chapter prose at
 * a scene break. The image gets the vault's aged-photograph treatment;
 * the caption matches the archivist voice.
 */

.book-figure {
  margin: 48px auto;
  max-width: 560px;
  padding: 0 8px;
}

.book-figure img {
  display: block;
  width: 100%;
  height: auto;
  filter: sepia(0.32) contrast(0.92) brightness(0.92) saturate(0.7);
  border: 1px solid rgba(120, 90, 50, 0.35);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.4),
    0 14px 40px rgba(0,0,0,0.45),
    inset 0 0 60px rgba(40, 30, 20, 0.25);
  background: #1a1410;
  /* subtle physical-photograph corner darkening via outline */
  position: relative;
}

.book-figure img:hover {
  filter: sepia(0.18) contrast(0.96) brightness(0.95) saturate(0.85);
  transition: filter 0.6s ease;
}

.book-figure figcaption {
  margin-top: 10px;
  font-family: 'IM Fell English', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(199, 205, 184, 0.7);
  text-align: center;
  padding: 0 12px;
  letter-spacing: 0.02em;
}

.book-figure figcaption .archivist {
  display: block;
  font-family: 'Special Elite', 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(184, 137, 46, 0.7);
  margin-top: 6px;
  font-style: normal;
}

/* on the cream-paper artifact pages, the dark photo treatment is jarring;
 * use a slightly different style when the figure sits on a paper background */
.book-figure.on-paper img {
  filter: sepia(0.55) contrast(0.95) brightness(0.96) saturate(0.6);
  border: 1px solid rgba(80, 50, 20, 0.55);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.25),
    0 10px 24px rgba(0,0,0,0.28);
  background: #ddd0b3;
}

.book-figure.on-paper figcaption {
  color: rgba(74, 58, 40, 0.85);
}

.book-figure.on-paper figcaption .archivist {
  color: rgba(122, 36, 24, 0.7);
}

/* when used as a small inset image (in artifact archivist notes) */
.book-figure.inset {
  max-width: 280px;
  float: right;
  margin: 0 0 18px 24px;
}

@media (max-width: 600px) {
  .book-figure { margin: 32px auto; max-width: 92%; }
  .book-figure.inset { float: none; margin: 24px auto; max-width: 92%; }
}