/* samples/photo-frame.css
 *
 * A photograph keeps its own proportions.
 *
 * The section photographs were given a height in viewport units, so on an
 * upright phone the frame became tall and narrow while the picture inside it
 * stayed landscape. object-fit: cover then had to throw most of the picture
 * away to fill the frame, which is the stretched, forced look: a wide room
 * showing as a vertical slice of itself.
 *
 * On a phone the frame now takes the picture's shape instead of the screen's.
 * Above the point where the layout becomes two columns, the tall frame is
 * correct again, because there the photograph sits beside the text rather than
 * above it and the column has a height to match.
 *
 * Loaded after each character's own stylesheet, so one rule covers all six and
 * their palettes stay untouched.
 */

/* The actual stretch. A photograph carries width and height attributes so the
 * browser can reserve its space before it loads, and several of these figures
 * have no CSS height at all. The attribute then becomes the rendered height: a
 * 1280x960 picture drawn 342 wide and 960 tall, which is the elongated look.
 * Every frame that genuinely fills a sized container sets its height through a
 * class, so those are more specific than this and keep filling. */
img { height: auto; }

@media (max-width: 859px) {
  .memory-photo,
  .origin-proof-photo,
  .coordinates-photo,
  .home-evidence-photo,
  .hero-visual {
    min-height: 0;
    /* Not a chosen shape either: a portrait photograph forced into 4/3 loses
       its top and bottom the same way. On a phone the frame simply takes the
       picture's shape, whatever that is, so every photograph shows whole. */
    aspect-ratio: auto;
  }

  .memory-photo img,
  .origin-proof-photo img,
  .coordinates-photo img,
  .home-evidence-photo img,
  .hero-visual img {
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;
  }

  /* A standalone photograph in the flow has no frame to fill at all: it is
     simply itself, at whatever shape it was taken. */
  .archive-beat-photo img,
  .archive-photo img,
  .evidence-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
  }
}

/* A chapter's own photograph, inside a chronology.
 *
 * The timeline was a list of dates and sentences. A life told that way reads
 * as an index of itself; the pictures are what make a year a year. Each entry
 * that has one shows it under its own text, at the picture's shape, and an
 * entry with no honest photograph simply has none rather than borrowing one.
 */
.chapter-photo { margin: 16px 0 0; }
.chapter-photo img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  background: rgba(0, 0, 0, .04);
}
.chapter-photo figcaption {
  margin-top: 8px;
  font-size: .72rem;
  line-height: 1.7;
  color: var(--soft, #6b635a);
}
@media (min-width: 860px) {
  /* Beside the text once there is room, so the chronology stays readable as a
     column of years rather than becoming a gallery. */
  .timeline li:has(.chapter-photo) { grid-template-columns: 78px 1fr 240px; }
  .chapter-photo { margin: 0; }
}