/* Photography: the hero photo under a navy wash, and one photo banner at
   the top of each main view. Text on photos always sits on the navy wash,
   so it reads the same in light and dark themes. */
:root {
  --wash: rgba(0, 0, 71, 0.92);
  --wash-soft: rgba(0, 0, 71, 0.35);
}

/* Hero */
.hero-photo { position: relative; isolation: isolate; overflow: hidden; }
.hero-photo > img {
  position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; max-width: none;
  object-fit: cover; object-position: center 100%;
}
.hero-photo::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--navy) 0%, var(--wash) 42%, var(--wash-soft) 100%);
}
@media (max-width: 48rem) {
  .hero-photo::before { background: linear-gradient(180deg, rgba(0, 0, 71, 0.78) 0%, var(--navy) 100%); }
}
.hero-intro { display: grid; gap: 1.1rem; padding-block: 3.5rem 3rem; }
@media (min-width: 62rem) { .hero-intro { padding-block: 5rem 4.5rem; } }
.hero-kicker { color: var(--sky); font-weight: 700; font-size: 0.95rem; }
.hero-intro h1 { max-width: 18ch; }
.hero-intro .lede { color: #dfe6f5; max-width: 58ch; }
.hero-tools { color: var(--navy-soft); font-size: var(--step-0); max-width: 60ch; }

/* Who this is for */
.audience { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.audience li { border-inline-start: 3px solid var(--sky); padding: 0.2rem 0 0.2rem 0.9rem; color: var(--navy-soft); }
.audience strong { color: #ffffff; }

/* Photo banners at the top of each view */
.panel-banner { position: relative; margin: 0; min-block-size: 11rem; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
@media (min-width: 48rem) { .panel-banner { min-block-size: 14rem; } }
.panel-banner img { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; max-width: none; object-fit: cover; }
.panel-banner::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--wash) 0%, var(--wash-soft) 75%); }
.panel-banner figcaption { display: grid; gap: 0.35rem; padding: 1.5rem 1.4rem; max-width: 40rem; color: #ffffff; }
.banner-title { font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem); font-weight: 700; line-height: 1.2; text-wrap: balance; }
.banner-text { color: #dfe6f5; }

.credits { margin-block-start: 0.6rem; }
.credits a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }