/* Shared image sizing for the grouped site. Keep photographs subordinate to
   the content and give picture elements the same bounds as their frames. */
:root {
  --section-y: clamp(2.75rem, 4.8vw, 4.5rem);
  --section-y-tight: clamp(2rem, 3.6vw, 3.25rem);
}

.lead__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
  padding-block: 2.5rem;
  align-items: center;
}
.lead__copy { padding-block: 0; }
.lead h1 { max-width: 20ch; font-size: clamp(2rem, 3.3vw, 3rem); }
.lead__text { font-size: 1.0625rem; line-height: 1.65; }
.lead__actions { gap: 0.75rem; }
.lead__actions .btn { padding-inline: 1.15rem; font-size: 0.9375rem; }
.lead__media {
  min-height: 0;
  height: clamp(360px, 37vw, 520px);
  margin: 0;
  width: 100%;
  align-self: center;
}

.feature { gap: clamp(1.75rem, 4vw, 3.5rem); }
.feature--bleed-left .feature__media,
.feature--bleed-right .feature__media { margin-inline: 0; }
.feature__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 460px;
  overflow: hidden;
}
.intro__media {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 400px;
  overflow: hidden;
}
.media-frame { max-height: 460px; }
.media-frame--tall { aspect-ratio: 4 / 3; }
.page-hero__media {
  margin-right: 0;
  margin-block: 2.5rem;
  align-self: center;
  height: clamp(260px, 29vw, 420px);
  min-height: 0;
  overflow: hidden;
}
.page-hero__inner { padding-block: clamp(2rem, 4vw, 3.5rem); }
.band { min-height: clamp(260px, 28vw, 380px); }
.showcase__img { display: block; }
.photo-row .photo-row__img {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 360px;
}
.gallery-grid figure {
  position: relative;
  max-height: 380px;
}
.post-card__media, .card__img { position: relative; }

/* An auto-height picture must not let its intrinsic portrait dimensions
   determine the height of a bounded landscape frame. */
:is(.lead__media, .feature__media, .intro__media, .media-frame,
    .page-hero__media, .page-hero__bg, .home-hero__bg, .band__img,
    .showcase__img, .photo-row__img, .gallery-grid figure,
    .card__img, .post-card__media) > picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
:is(.lead__media, .feature__media, .intro__media, .media-frame,
    .page-hero__media, .page-hero__bg, .home-hero__bg, .band__img,
    .showcase__img, .photo-row__img, .gallery-grid figure,
    .card__img, .post-card__media) img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
}
.figure img, .prose > picture img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 460px;
  margin-inline: auto;
  object-fit: contain;
}
.hp-field input { width: 1px; min-width: 0; max-width: 1px; padding: 0; border: 0; }
.contact-method a, .footer-contact a { overflow-wrap: anywhere; }

@media (max-width: 960px) {
  .lead__grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding-block: 2rem; }
  .lead__copy { padding: 0; }
  .lead h1 { max-width: 24ch; }
  .lead__media { height: auto; aspect-ratio: 16 / 9; max-height: 400px; margin: 0; }
}
@media (max-width: 900px) {
  .feature__media, .intro__media, .media-frame { aspect-ratio: 16 / 10; max-height: 380px; }
  .page-hero__media { margin: 0 0 2rem; height: auto; aspect-ratio: 16 / 9; max-height: 380px; }
  .feature--bleed-left .feature__media,
  .feature--bleed-right .feature__media { margin-inline: 0; }
  .band { min-height: 300px; }
}
@media (max-width: 520px) {
  .lead__grid { padding-top: 1.75rem; }
  .lead h1 { font-size: clamp(1.85rem, 8vw, 2.4rem); }
  .lead__actions { align-items: stretch; }
  .lead__actions .btn { width: 100%; justify-content: center; }
  .lead__media, .feature__media, .intro__media, .media-frame,
  .page-hero__media { max-height: 300px; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .photo-row .photo-row__img { aspect-ratio: 4 / 3; max-height: 280px; }
  .showcase__item { grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; }
  .showcase__item h3 { font-size: 1rem; }
}