/* Photo meets type — the selected hero composition. */
.photo-hero { position: relative; isolation: isolate; overflow: clip; background: var(--red); color: var(--cream); }
.photo-hero-inner { position: relative; min-height: min(56.9vw, 904px); }
.photo-title { position: relative; z-index: 1; margin: 0; font-size: clamp(100px, 23.4vw, 371px); line-height: 1; letter-spacing: -.039em; white-space: nowrap; }
.photo-title span { display: block; transform: translate(-10px, -8px) scaleY(1.12); transform-origin: left top; }
.photo-copy { position: relative; z-index: 3; width: 51%; margin-top: min(4.9vw, 78px); padding-bottom: 90px; }
.photo-copy .hero-bio { margin: 0; font-size: clamp(20px, 1.9vw, 30px); line-height: 1.45; letter-spacing: -.015em; }
.photo-copy .hero-bio + .hero-bio { margin-top: 16px; }
.photo-copy .hero-intro { margin: 0; font-size: clamp(30px, 5.22vw, 83px); line-height: 1.13; text-align: left; letter-spacing: -.028em; }
.photo-copy .hero-intro .line { white-space: nowrap; width: 113.64%; transform: scaleX(.88); transform-origin: left center; }
.photo-copy .hero-intro .line:last-child { transform: scaleX(.95); width: 105.26%; }
.photo-copy .hero-roles { margin: 22px 0 0; font-size: clamp(20px, 2.37vw, 37.6px); line-height: 1.35; letter-spacing: -.025em; }
.photo-copy .hero-cta { margin-top: 46px; font-size: clamp(22px, 1.9vw, 30px); }
.photo-art { position: absolute; z-index: 2; right: .4%; top: min(17.1vw, 271px); width: 51.5%; height: auto; display: block; }
@media (max-width: 1050px) {
  .photo-hero-inner { min-height: 60vw; }
  .photo-copy { margin-top: 5vw; padding-bottom: 64px; }
  .photo-copy .hero-roles { font-size: clamp(20px, 2.4vw, 25px); font-weight: 700; }
  .photo-copy .hero-cta { margin-top: 32px; font-size: 23px; }
}
@media (max-width: 700px) {
  .photo-hero-inner { min-height: 0; }
  .photo-title { font-size: 23vw; letter-spacing: -.047em; }
  .photo-title span { transform: scaleY(1.12); }
  .photo-copy .hero-intro .line, .photo-copy .hero-intro .line:last-child { width: 100%; transform: none; }
  .photo-copy { width: 100%; margin-top: 34px; padding-bottom: 0; }
  .photo-copy .hero-intro { font-size: 8.25vw; line-height: 1.17; max-width: 100%; }
  .photo-copy .hero-roles { font-size: 21px; font-weight: 700; letter-spacing: -.02em; max-width: 340px; margin: 20px 0 0; }
  .photo-copy .hero-cta { font-size: 20px; font-weight: 700; margin-top: 25px; }
  .photo-art { position: relative; width: 91%; top: auto; right: auto; margin: 24px -6px -48px auto; }
}

/* Project introduction and selected examples. */
.stuff-section { padding-top: 90px; padding-bottom: 90px; }
.stuff-section > .section-heading { margin-bottom: 34px; }
.stuff-section > .section-heading h2 { color: var(--red); }
.stuff-projects { scroll-margin-top: 32px; }
.projects-intro { max-width: 1050px; margin: 0 0 48px; font-size: clamp(20px, 2.05vw, 29px); line-height: 1.5; }
.stuff-projects .ws-detail strong { color: #992d20; }
.stuff-projects #dsr-title { font-size: clamp(42px, 4.4vw, 70px); line-height: 1.08; }
.stuff-projects .ws-project-divider { border-color: rgb(32 35 28 / 30%); }
.red-footer .footer-line .roles { margin: 0; }
@media (max-width: 800px) {
  .stuff-section { padding-top: 56px; padding-bottom: 56px; }
  .projects-intro { margin-bottom: 36px; }
}