/* SpectaBooks sits on the shared Calida Lab stylesheet and changes only what is its own.
   A fork of styles.css would drift the moment either site is touched. */
:root {
  --blue: #f5b301;
  --blue-deep: #d99a00;
  --amber: #f5c400;
}

/* A feature whose screenshot has not been taken yet drops to one column instead of leaving a hole.
   The image removes itself via onerror, so this is what the reader sees until the shot arrives. */
.feature--noshot { grid-template-columns: 1fr; }
.feature--noshot .frame { display: none; }

/* The two turns, side by side. They are the same gesture seen twice only if you show them
   together; apart, each just looks like "a page turning". */
.feature--stacked { grid-template-columns: 1fr; }
.turns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
.turns figure { margin: 0; }
.turns img {
  width: 100%; height: auto; display: block; border-radius: 10px;
  border: 1px solid var(--card-border); background: #fff;
}
.turns figcaption {
  margin-top: 8px; font-size: 13px; color: var(--ink-dim); text-align: center;
}
@media (max-width: 720px) { .turns { grid-template-columns: 1fr; } }