/* Real photography: restrained presentation, readable overlays and source credits. */
.hero .hero-visual {
 position: relative;
 align-self: center;
 min-width: 0;
 aspect-ratio: 8 / 5;
 border-radius: 22px;
 isolation: isolate;
}

.hero .hero-visual::after {
 position: absolute;
 inset: 0;
 z-index: 1;
 border: 1px solid rgba(255, 255, 255, .16);
 border-radius: inherit;
 background:
  linear-gradient(180deg, rgba(4, 20, 45, 0) 48%, rgba(4, 20, 45, .68) 100%),
  linear-gradient(90deg, rgba(4, 20, 45, .2), rgba(4, 20, 45, 0) 48%);
 box-shadow: inset 0 0 0 1px rgba(4, 20, 45, .08);
 content: "";
 pointer-events: none;
}

.hero .hero-visual > img {
 width: 100%;
 height: 100%;
 max-height: none;
 aspect-ratio: 8 / 5;
 border-radius: inherit;
 object-fit: cover;
 object-position: center;
 filter: saturate(.94) contrast(1.02);
 box-shadow: 0 30px 70px rgba(0, 0, 0, .28);
}

.hero-photo-credit {
 position: absolute;
 bottom: 14px;
 left: 14px;
 z-index: 3;
 display: inline-flex;
 align-items: center;
 max-width: calc(100% - 28px);
 padding: 6px 9px;
 border: 1px solid rgba(255, 255, 255, .2);
 border-radius: 999px;
 background: rgba(4, 20, 45, .7);
 color: rgba(255, 255, 255, .9);
 font-size: 10px;
 font-weight: 650;
 line-height: 1.25;
 letter-spacing: .02em;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 box-shadow: 0 7px 20px rgba(0, 0, 0, .16);
 backdrop-filter: blur(8px);
 transition: background-color .2s ease, color .2s ease;
}

.hero-photo-credit:hover {
 background: rgba(4, 20, 45, .88);
 color: #fff;
}

.hero-photo-credit:focus-visible,
.photo-credit a:focus-visible,
a.photo-credit:focus-visible,
.credit-card a:focus-visible {
 outline: 3px solid rgba(255, 255, 255, .95);
 outline-offset: 3px;
}

.hero-visual .hero-card {
 z-index: 4;
 right: -18px;
 bottom: 50px;
 max-width: calc(100% - 30px);
}

/* Inline and image-overlay source labels used outside the homepage hero. */
.photo-credit {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 color: var(--muted);
 font-size: 11px;
 line-height: 1.45;
}

a.photo-credit,
.photo-credit a {
 color: var(--blue-2);
 text-decoration: underline;
 text-decoration-color: rgba(12, 72, 182, .32);
 text-decoration-thickness: 1px;
 text-underline-offset: 3px;
}

a.photo-credit:hover,
.photo-credit a:hover {
 color: var(--blue);
 text-decoration-color: currentColor;
}

.photo-frame {
 position: relative;
}

.photo-frame > .photo-credit,
.zone-card > .photo-credit {
 position: absolute;
 right: 10px;
 bottom: 10px;
 z-index: 3;
 max-width: calc(100% - 20px);
 padding: 5px 8px;
 border-radius: 6px;
 background: rgba(4, 20, 45, .74);
 color: rgba(255, 255, 255, .9);
 font-size: 9px;
 backdrop-filter: blur(7px);
}

.photo-frame > .photo-credit a,
.zone-card > .photo-credit a,
a.photo-frame > .photo-credit,
a.zone-card > .photo-credit {
 color: inherit;
}

/* Photo credits directory. */
.photo-credits-page.legal-page {
 max-width: var(--width);
}

.photo-credits-page > section > h2 {
 margin-top: 48px;
}

.credits-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 20px;
 margin-block: 30px 90px;
}

.credit-card {
 min-width: 0;
 overflow: hidden;
 border: 1px solid var(--line);
 border-radius: 14px;
 background: #fff;
 box-shadow: 0 8px 28px rgba(13, 39, 74, .06);
 transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.credit-card:hover {
 transform: translateY(-2px);
 border-color: #c4d4e8;
 box-shadow: 0 14px 34px rgba(13, 39, 74, .1);
}

.credit-card figure {
 margin: 0;
}

.credit-card img,
.credit-card__image,
.credit-card-image {
 width: 100%;
 aspect-ratio: 8 / 5;
 object-fit: cover;
 object-position: center;
 background: #e8eef6;
}

.credit-card > div,
.credit-card__body,
.credit-card-body {
 padding: 20px;
}

.credit-card h2,
.credit-card h3 {
 margin: 0 0 8px;
 color: var(--ink);
 font-size: 18px;
 line-height: 1.3;
}

.credit-card p {
 margin: 6px 0 0;
 color: var(--muted);
 font-size: 12px;
 line-height: 1.6;
}

.credit-card a {
 color: var(--blue-2);
 text-decoration: underline;
 text-decoration-color: rgba(12, 72, 182, .3);
 text-underline-offset: 3px;
}

.credit-card a:hover {
 color: var(--blue);
 text-decoration-color: currentColor;
}

.credit-card .credit-license,
.credit-card .license {
 display: inline-flex;
 margin-top: 12px;
 padding: 4px 7px;
 border-radius: 5px;
 background: var(--sky);
 color: var(--blue-2);
 font-size: 10px;
 font-weight: 800;
 letter-spacing: .04em;
}

@media (max-width: 900px) {
 .hero .hero-visual {
  width: 100%;
  max-width: 720px;
  margin: 8px auto 58px;
 }

 .hero-visual .hero-card {
  right: 16px;
  bottom: 24px;
 }

 .credits-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 70px;
 }
}

@media (max-width: 620px) {
 .hero .hero-visual {
  display: block;
  aspect-ratio: 4 / 3;
  margin: 8px auto 30px;
  border-radius: 16px;
 }

 .hero .hero-visual > img {
  aspect-ratio: 4 / 3;
 }

 .hero-photo-credit {
  top: 10px;
  bottom: auto;
  left: 10px;
  max-width: calc(100% - 20px);
  padding: 5px 8px;
  font-size: 9px;
 }

 .hero-visual .hero-card {
  right: 10px;
  bottom: 10px;
  gap: 8px;
  max-width: calc(100% - 20px);
  padding: 10px 12px;
 }

 .hero-visual .hero-card > span {
  width: 34px;
  height: 34px;
 }

 .hero-visual .hero-card small {
  display: none;
 }

 .credits-grid {
  grid-template-columns: 1fr;
  gap: 15px;
  margin-block: 22px 60px;
 }

 .credit-card > div,
 .credit-card__body,
 .credit-card-body {
  padding: 17px;
 }
}

@media (prefers-reduced-motion: reduce) {
 .hero-photo-credit,
 .credit-card {
  transition: none;
 }

 .credit-card:hover {
  transform: none;
 }
}