/* The same restrained color treatment is used across the new portrait set. */
main img[src^="assets/portraits/"] {
  filter: saturate(.84) contrast(1.04) brightness(.98);
}
main img[src$="feelings.webp"],
main img[src$="relationships.webp"] {
  filter: grayscale(1) contrast(1.04) brightness(1.01);
}

/* The homepage uses the real portrait over the established forest image. */
.home-page header:not(.scrolled) {
  background: rgba(16,30,20,.78);
  border-color: rgba(255,255,255,.12);
  color: #f6f4ef;
}
.home-page header:not(.scrolled) .brand small,
.home-page header:not(.scrolled) .nav-topics summary:after { color: #e8d9c3; }
.home-page header:not(.scrolled) .nav-cta { border-color: #e6e0d2; }
.home-page header:not(.scrolled) .nav-submenu { color: var(--ink); }
.home-hero { background-position: 40% center; }
.home-hero::before {
  z-index: 1;
  background: linear-gradient(90deg,rgba(9,23,13,.9) 0%,rgba(9,23,13,.68) 45%,rgba(9,23,13,.15) 83%),
              linear-gradient(0deg,rgba(9,23,13,.42),transparent 50%);
  pointer-events: none;
}
.home-hero-person {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 auto;
  width: 54%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,transparent 0%,#000 33%,#000 100%);
  mask-image: linear-gradient(90deg,transparent 0%,#000 33%,#000 100%);
}
.home-hero-person img {
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 74% 35%;
  filter: saturate(.84) contrast(1.04) brightness(.98);
}
.home-hero-content,.home-hero-bottom { z-index: 2; }
.home-hero h1 { max-width: 12.7ch; }

/* No quote or foreground text crosses a face on smaller viewports. */
@media (max-width: 700px) {
  .home-page header:not(.scrolled) .links.open { background: var(--paper); color: var(--ink); }
  .home-hero {
    min-height: 100svh;
    align-items: flex-start;
    padding: clamp(420px,58svh,560px) 0 95px;
    background-position: center top;
  }
  .home-hero-person {
    inset: 72px 0 auto;
    width: 100%; height: clamp(345px,50svh,480px);
    -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 68%,transparent 100%);
    mask-image: linear-gradient(to bottom,#000 0%,#000 68%,transparent 100%);
  }
  .home-hero-person img { object-position: 74% 28%; }
  .home-hero::before {
    background: linear-gradient(to bottom,rgba(9,23,13,.05) 0%,rgba(9,23,13,.05) 38%,rgba(9,23,13,.92) 61%,rgba(9,23,13,.95) 100%);
  }
  .home-hero h1 { max-width: 19ch; font-size: clamp(2.6rem,9.5vw,3.35rem)!important; line-height: 1.02; }
  .home-hero p { font-size: 1rem; max-width: 37ch; }
  .home-hero-bottom { position: static; transform: none; margin-top: 34px; }
  .home-intro-image img { object-position: 42% 33%; }
  .home-about-photo img { object-position: 38% center; }
  .home-voice figure img { object-position: 40% center; }
  .venture-panel:nth-child(2) img { object-position: 42% center; }
}

/* A soft version of each photograph fills the spare space while the original
   remains entirely inside its frame. This protects heads at every width. */
.editorial-band,.network-portrait {
  position: relative; isolation: isolate; overflow: hidden;
  height: clamp(360px,48vw,690px);
  background: #18241b;
}
.editorial-band::before,.network-portrait::before {
  content: ""; position: absolute; z-index: -1; inset: -34px;
  background-image: linear-gradient(rgba(19,31,21,.4),rgba(19,31,21,.4)),var(--portrait-photo);
  background-size: cover; background-position: center;
  filter: blur(25px);
}
.editorial-band img,.editorial-band.portrait img,.network-portrait img {
  position: relative; display: block;
  width: 100%!important; height: 100%!important; max-width: none!important;
  object-fit: contain!important; object-position: center!important;
  box-shadow: none!important;
}
.identity-photo { aspect-ratio: 4/3!important; }
.identity-photo img { object-position: 42% 38%!important; }
.home-intro-image img { object-position: 42% 35%!important; }
.home-about-photo img { object-position: 38% 40%!important; }
.home-voice figure img { object-position: 40% 42%!important; filter: grayscale(.38) saturate(.75) contrast(1.07)!important; }
.venture-panel:nth-child(2) img { object-position: 43% 42%!important; }
.social-photo img,.venture-panel:first-child img { filter: saturate(.84) contrast(1.04) brightness(.98)!important; }

/* Quote at the open left side of the portrait on desktop. */
.image-break {
  justify-content: flex-start!important;
  background-image: linear-gradient(90deg,rgba(17,28,19,.78),rgba(17,28,19,.08) 80%),url('portraits/relationships.webp')!important;
  background-position: center 35%!important;
}
.image-break .image-quote {
  margin: 0 auto 0 max(24px,calc((100vw - 1180px)/2))!important;
  max-width: min(520px,calc(100vw - 48px))!important;
}

@media (max-width: 700px) {
  .editorial-band,.network-portrait { height: clamp(270px,73vw,480px)!important; }
  .image-break {
    display: block!important; min-height: 0!important;
    background-image: none!important; background-color: #18241b;
  }
  .image-break::before {
    content: ""; display: block; height: clamp(280px,76vw,430px);
    background: url('portraits/relationships.webp') center/contain no-repeat;
  }
  .image-break .image-quote {
    width: auto!important; max-width: none!important;
    margin: 0!important; padding: 28px 24px 48px!important;
    background: #18241b!important;
  }
}