/* ==========================================================================
   FRONTLINE21 — THE SCENES, 8 September 2026.

   The twenty photographs as a library, not a carousel. Every scene is on the
   page at once and is browsed by scrolling; on a desktop two to a row, on a
   phone one, each at the size of a plate. The caption sits inside the frame
   in the same place on every crop, so the eye learns it once.

   The same markup makes the three-scene teaser on the homepage, so the
   scale and the caption are identical there and the visitor recognises the
   library when he reaches it.

   Generated by tools/build-scenes.py; the markup is not edited by hand.
   ========================================================================== */

.scenes__group {
  padding: clamp(40px, 7vw, 96px) 0;
  border-top: var(--border-hair);
}

.scenes__group:first-child { border-top: 0; }

.scenes__head {
  margin-bottom: clamp(20px, 3vw, 36px);
}

.scenes__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
}

/* A phone: two to a row, portrait, a contact sheet a thumb can move through
   in four or five swipes rather than twenty screens of single plates. The
   caption steps down with the frame. */
@media (max-width: 767px) {
  .scenes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

.scenes__grid--teaser {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--stack-md);
}

@media (max-width: 1023px) {
  .scenes__grid--teaser { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scenes__grid--teaser .scene:nth-child(3) { grid-column: 1 / -1; }
}

/* The homepage's three, on a phone: a strip that swipes, one plate at a
   time with the next one showing at the edge, bleeding to the screen edge.
   No script: scroll snap and the page's own horizontal scroll. */
@media (max-width: 767px) {
  .scenes__grid--teaser {
    display: flex;
    gap: 10px;
    margin-inline: calc(-1 * var(--margin));
    padding-inline: var(--margin);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--margin);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .scenes__grid--teaser::-webkit-scrollbar { display: none; }
  .scenes__grid--teaser .scene {
    flex: 0 0 min(76vw, 320px);
    scroll-snap-align: start;
  }
  .scenes__grid--teaser .scene:last-child { margin-right: var(--margin); }
  /* The teaser keeps the full-size caption; the two-up library steps down. */
  .scenes__grid:not(.scenes__grid--teaser) .scene__caption {
    padding: 40px 10px 10px;
    gap: 4px;
  }
  /* The group heading names the discipline; a label in every frame at
     this size would only repeat it. */
  .scenes__grid:not(.scenes__grid--teaser) .scene__discipline { display: none; }
  .scenes__grid:not(.scenes__grid--teaser) .scene__declaration { font-size: 13px; line-height: 1.1; }
}

.scene {
  margin: 0;
  position: relative;
  background: var(--ink-deep);
}

.scene__frame {
  position: relative;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  background: var(--ink-deep);
}

@media (max-width: 767px) {
  .scene__frame { aspect-ratio: 941 / 1672; }
}

.scene__frame picture,
.scene__frame img {
  display: block;
  width: 100%;
  height: 100%;
}

.scene__frame img { object-fit: cover; }

/* A plate with no portrait yet is contained on the ground rather than cropped
   to its middle third. See tools/build-scenes.py. */
@media (max-width: 767px) {
  .scene__frame[data-uncropped] {
    display: grid;
    place-items: center;
    background: var(--ink);
  }
  .scene__frame[data-uncropped] img {
    object-fit: contain;
    height: auto;
    max-height: 100%;
  }
}

/* The caption. The gradient is local to the caption, so the photograph keeps
   its full range everywhere the type is not. Discipline lower left, the
   declaration below it, both inside the safe area on every crop. */
.scene__caption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(56px, 9vw, 110px) clamp(16px, 2.4vw, 32px) clamp(14px, 2vw, 26px);
  background: linear-gradient(to top, rgba(6, 8, 8, 0.9), rgba(6, 8, 8, 0.5) 44%, transparent);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  pointer-events: none;
}

.scene__discipline {
  font-size: clamp(10px, 1.05vw, 12px);
  letter-spacing: 0.24em;
  color: var(--f21-red-hi);
}

.scene__declaration {
  font-size: clamp(17px, 1.8vw, 26px);
  line-height: 1.06;
  color: var(--paper);
  text-wrap: balance;
  max-width: 22ch;
}

@media (max-width: 767px) {
  .scene__declaration { font-size: clamp(20px, 6vw, 28px); }
}

/* --- The film, on the Code in Action page ----------------------------------- */

.film-page { padding-top: clamp(40px, 7vw, 96px); }