:root {
  --plate-lift: calc(var(--band) * -1);
}

.prop-hero { display: flex; flex-direction: column; }
.prop-hero__plate { flex: 0 0 var(--plate-h); }
.prop-hero__band { flex: 0 0 auto; }

.prop-hero__tagline { font: italic 400 var(--f0)/var(--lead-head) var(--serif); }

.split__content { padding-inline: var(--gutter); }
.split__image { aspect-ratio: var(--ratio-card); border-inline: none; }
.split__text { max-width: var(--measure); }
.split__content { display: grid; align-content: start; justify-items: start; }

.split--box { padding: 0; background: var(--surface); }
.split--box.split--reverse { background: var(--paper); }
.split--box .split__content { padding: var(--band) var(--gutter); }

.split--plate { display: block; background: var(--paper); }

.split--plate img.split__image { aspect-ratio: auto; }
.split--plate .split__image { aspect-ratio: var(--ratio-plate); }

.split--plate .split__content {
  position: relative; background: var(--paper);
  padding: var(--inset);
  border: 1px solid var(--hairline);
}
.split--plate .split__eyebrow { margin: 0; }

.split--plate .split__text { max-width: var(--measure); }

.trio { display: grid; gap: var(--inset); padding-inline: var(--gutter);
        background: var(--paper); }
.trio__label { grid-column: 1 / -1; margin: 0; }
.trio > div { border-top: 1px solid var(--hairline); padding-block-start: var(--rule-gap); }
.trio__text { max-width: var(--measure); }

.video { background: var(--surface); }

.video__frame { margin: var(--inset) auto 0;
                aspect-ratio: 16 / 9;
                background: var(--paper);
                border-block: 1px solid var(--hairline); }
.video__label, .video__title, .video__intro { padding-inline: var(--gutter); }
.video__label { text-align: center; }
.video__title { font: 400 var(--f3)/var(--lead-tight) var(--serif); text-align: center; }
.video__intro { max-width: var(--measure); margin-inline: auto;
                text-align: center; }

.quote { background: var(--surface); padding-inline: var(--gutter); }
.quote__wrap { max-width: var(--measure); margin: 0 auto; text-align: center; }
.quote__text { font: 400 var(--f2)/var(--lead-head) var(--serif); }

.prop-request { padding-inline: var(--gutter); }
.prop-request .request { max-width: var(--measure-wide); margin-inline: auto; }
.prop-request__head { text-align: center; }
.prop-request__head .request__eyebrow,
.prop-request__head .request__intro { margin-inline: auto; }

img.prop-hero__plate,
img.split__image {
  display: block; width: 100%;
  object-fit: cover; object-position: var(--focal);
}

img.prop-hero__plate { min-height: 0; }

img.split__image { height: auto; }

@media (min-width: 72rem) {
  .prop-hero { --plate-h: min(56.25vw, calc(100svh / var(--phi))); }
  .split { display: grid;
           grid-template-columns: calc((100% - var(--s2)) / var(--phi2)) 1fr;
           column-gap: var(--s2); align-items: center; }
  .split--reverse { grid-template-columns: calc((100% - var(--s2)) / var(--phi)) 1fr; }

  .split--box { grid-template-columns: 1fr 1fr; column-gap: 0; }
  .split--box.split--reverse { grid-template-columns: 1fr 1fr; }

  .split--box .split__image { width: 100%; height: 100%; min-height: calc(50vw / (var(--ratio-card)));
    aspect-ratio: auto; object-fit: cover; object-position: var(--focal); }

  .split__image.slot-empty { border: none; border-block: 1px dashed var(--line); }

  .split--plate { --media-w: calc(100% / var(--phi)); }

  .video { --media-w: calc(100vw / var(--phi)); padding-inline: var(--gutter); }
  .video__frame { width: var(--media-w); margin: var(--inset) auto 0;
                  border: 1px solid var(--accent); }

  .split--reverse .split__image { order: 2; }

  .trio { grid-template-columns: repeat(3, 1fr); column-gap: var(--band); row-gap: var(--head-gap); }
  .trio__text { max-width: none; }

  .split--plate { display: block; padding: var(--band) var(--gutter); }

  .split--plate .split__image { width: var(--media-w); }

  .split--plate .split__content {
    width: var(--media-w);
    margin-block-start: var(--plate-lift);
    margin-inline-start: auto;
  }

  .split--plate.split--reverse .split__image { margin-inline-start: auto; }
  .split--plate.split--reverse .split__content {
    margin-inline-start: 0; margin-inline-end: auto;
  }
}

.prop-grid {
  display: grid;
  gap: var(--head-gap) var(--s1);
  padding-inline: var(--gutter);
}
.prop-card { display: grid; gap: calc(var(--stack-gap) / var(--phi2)); align-content: start;
             text-decoration: none; color: var(--ink); }
.prop-card__image { width: 100%; aspect-ratio: var(--ratio-card); object-fit: cover; object-position: var(--focal); display: block; }
.prop-card__name { margin-top: var(--tight-gap); }
span.prop-card__image.slot-empty { aspect-ratio: var(--ratio-card); display: grid; place-items: center;
  border: 1px dashed var(--line); }

.roll-head + .prop-grid { padding-block-start: 0; }

@media (min-width: 56rem) { .prop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .prop-grid { grid-template-columns: repeat(3, 1fr); } }

.type-nav { display: flex; gap: var(--head-gap); flex-wrap: wrap; justify-content: center;
  font-size: var(--f-1); letter-spacing: var(--track-label); text-transform: uppercase; }
.type-nav .btn--rule[aria-pressed="false"] { --btn-bd: transparent; --btn-fg: var(--ink-soft); }
.prop-card[hidden] { display: none; }