/* Holy Instant 2.1 gallery

   atoms:      shared type, rule, badge, and .device-frame from styles.css
   molecules:  .plate__figure + .plate__words
   organism:   .plate
   template:   .gallery

   Phones stack on the smallest screen, become image-and-caption rows on a
   tablet, and settle into a compact two-column editorial gallery on desktop.
*/

.screens {
  display: block;
  padding: 0;
}

.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 42rem;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-8);
  text-align: center;
}

.release-mark {
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  text-wrap: balance;
}

.gallery {
  display: grid;
  gap: var(--space-3);
  width: min(100%, var(--layout-wide));
  margin-inline: auto;
  padding: 0 var(--space-2) var(--space-8);
}

.plate {
  overflow: hidden;
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-panel);
  background: var(--surface);
  color: var(--ink);
}

.plate__inner {
  display: grid;
  gap: var(--space-4);
  align-items: center;
  justify-items: center;
  max-width: 100%;
  margin-inline: auto;
}

.plate__figure {
  width: min(100%, 15rem);
}

.plate__words {
  max-width: 31rem;
  text-align: left;
  text-wrap: pretty;
}

.plate__words p {
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  line-height: 1.65;
  color: var(--ink);
}

.plate__words p + p { margin-top: var(--space-2); }

.plate__seam {
  display: block;
  width: 2.75rem;
  height: 2px;
  margin-bottom: var(--space-3);
  background: var(--accent);
  opacity: 0.85;
}

.masthead__mark,
.masthead__kicker,
.doc h2 {
  text-wrap: balance;
}

@media (min-width: 700px) {
  .intro { padding-block: var(--space-4) var(--space-8); }

  .gallery {
    gap: var(--space-4);
    padding-inline: var(--space-4);
  }

  .plate { padding: var(--space-6); }

  .plate__inner {
    grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr);
    gap: var(--space-6);
  }

  .plate--flip .plate__figure { order: 2; }
}

@media (min-width: 1100px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .plate:first-child { grid-column: 1 / -1; }

  .plate:first-child .plate__inner {
    grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
    max-width: 54rem;
  }

  .plate:not(:first-child) .plate__inner {
    grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
    gap: var(--space-4);
  }

  .plate:not(:first-child) .plate__figure { width: min(100%, 12rem); }

  .plate--flip .plate__figure { order: 0; }
}