/* Homepage About: supplied portrait and the approved studio text. */
#about.about--portrait {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: clamp(56px, 6vw, 96px) var(--pad) 0;
  display: block;
  background: var(--paper);
}
#about .about-story {
  width: 100%;
  max-width: 1492px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, clamp(360px, 32vw, 520px)) minmax(0, 1fr);
  grid-template-areas: "heading ." "portrait copy";
  column-gap: clamp(36px, 5vw, 72px);
  row-gap: 0;
  align-items: start;
}
#about .about-heading { grid-area: heading; width: 100%; max-width: 520px; min-width: 0; justify-self: start; }
#about .about-heading .eyebrow { display: block; }
#about .about-title { margin: 20px 0 32px; font-size: clamp(48px, 5vw, 72px); line-height: .96; }
#about .about-media--portrait {
  grid-area: portrait;
  width: 100%;
  max-width: 520px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: visible;
  align-self: start;
  order: 0;
}
#about .about-media--portrait picture { display: block; }
#about .about-media--portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1122 / 1402;
  object-fit: contain;
  object-position: center;
  filter: none;
}
#about .about-media--portrait figcaption {
  display: grid;
  gap: 6px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
#about .about-media--portrait figcaption strong { font: 500 19px/1.3 var(--display); letter-spacing: -.025em; }
#about .about-media--portrait figcaption span { font: 400 12px/1.6 var(--body); color: #68645d; }
#about .about-copy {
  grid-area: copy;
  width: 100%;
  max-width: 900px;
  min-width: 0;
  padding: 0;
  justify-self: start;
  align-self: start;
}
#about .about-copy p {
  max-width: none;
  margin: 0 0 24px;
  font: 400 16px/1.7 var(--body);
  color: #35322e;
  overflow-wrap: break-word;
}
#about .about-copy .about-lead { color: var(--ink); }
#about .about-copy a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
#about .about-copy a:hover { color: var(--red); }
#about .about-copy a:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
#about .about-copy .about-finale {
  margin: 28px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
}
#about .about-finale strong { font-weight: 500; }
#about > .experience-proof {
  width: 100%;
  max-width: none;
  margin-top: clamp(56px, 5vw, 80px);
  padding: 32px 0 0;
}
@media (max-width: 1099px) {
  #about.about--portrait { padding: 56px var(--pad) 0; }
  #about .about-story {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "portrait" "copy";
    row-gap: 28px;
  }
  #about .about-heading { max-width: 500px; justify-self: center; }
  #about .about-copy { width: 100%; max-width: 760px; justify-self: center; }
  #about .about-title { margin: 18px 0 0; }
  #about .about-media--portrait { max-width: 500px; justify-self: center; }
  #about > .experience-proof { margin-top: 52px; }
}
@media (max-width: 980px) {
  #about.about--portrait { padding-inline: 20px; }
}
@media (max-width: 600px) {
  #about.about--portrait { padding: 48px 20px 0; }
  #about .about-story { row-gap: 24px; }
  #about > .experience-proof { margin-top: 48px; }
  #about .about-title { font-size: clamp(44px, 10vw, 56px); }
  #about .about-copy p { font-size: 15px; line-height: 1.75; margin-bottom: 22px; }
  #about .about-copy .about-finale { margin-top: 26px; padding-top: 22px; font-size: 17px; }
  #about .about-media--portrait figcaption { margin-top: 16px; padding-top: 14px; }
}
@media (max-width: 359px) {
  #about .experience-proof__grid { grid-template-columns: minmax(0, 1fr); }
}

#about .about-portrait-link { display:block; position:relative; cursor:zoom-in; }
#about .about-portrait-link:focus-visible { outline:2px solid var(--red); outline-offset:6px; }
#about .about-portrait-expand { position:absolute; right:16px; bottom:16px; display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--ink); background:var(--paper); color:var(--ink); pointer-events:none; }