/* Photo credits: teal line. One list per page of the site, so each page can drop its own credits block. */
.hero--credits { min-height: auto; padding-top: clamp(140px, 16vw, 220px); padding-bottom: clamp(24px, 3vw, 40px); }
.hero--credits .lede { max-width: 62ch; }
.hero--credits .lede a { color: var(--cream); text-underline-offset: 4px; }

.credits-index { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: clamp(28px, 3vw, 44px); padding-bottom: 8px;
  font: 500 12px/1.2 var(--f-label); letter-spacing: .12em; text-transform: uppercase; }
.credits-index a { color: var(--cream-soft); text-decoration: none; border-bottom: 1px solid rgb(241 233 216 / .25); padding-bottom: 3px; }
.credits-index a:hover { color: var(--cream); border-color: var(--line-ink); }

.credits-group > .wrap { padding-top: clamp(44px, 5vw, 72px); padding-bottom: 0; }
.credits-group:last-of-type > .wrap { padding-bottom: clamp(80px, 9vw, 130px); }
.credits-group__title { margin: 0 0 18px; font: 800 clamp(1.178rem, 1.86vw, 1.612rem)/1 var(--f-label); letter-spacing: 0; text-transform: uppercase; }
.credits-group__title a { color: var(--cream); text-decoration: none; }
.credits-group__title a:hover { color: var(--line-ink); }
.credits-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 80ch; font: 400 .92rem/1.55 var(--f-body); color: var(--cream-soft); }
.credits-list li { padding: 11px 0; border-top: 1px solid rgb(241 233 216 / .1); }
.credits-list .credits__what { display: block; margin-bottom: 2px; color: var(--cream); }
.credits-list a { color: var(--cream); text-underline-offset: 3px; text-decoration-color: var(--line-ink); }
.credits-list a:hover { color: var(--line-ink); }
.credits-group { scroll-margin-top: 80px; }