/* The Studio layout: a generous text column alongside the portrait. */
.about-page {
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: start;
  min-height: calc(100svh - 110px);
  margin-top: 110px;
}
.about-copy {
  position: sticky;
  top: 110px;
  padding: 64px 4vw 48px 2vw;
  min-width: 0;
  overflow: visible;
}
.about-layout :where(h1, p, a, span, time) {
  font-family: 'Bastardo Groteskish', Arial, sans-serif;
  font-weight: 400;
}
.about-title {
  margin: 0 0 38px;
  font-size: clamp(80px, 11.7vw, 310px);
  line-height: .82;
  letter-spacing: -.025em;
}
.about-note {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
}
.about-description { margin-top: 28px; }
.about-description p {
  margin: 0 0 20px;
  font-size: clamp(20px, 1.55vw, 28px);
  line-height: 1.25;
}
.about-description p:last-child { margin-bottom: 0; }
.about-visual {
  position: relative;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 1rem 1rem 0 0;
}
.about-video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}
@media (min-width: 901px) and (max-height: 760px) {
  .about-copy { position: static; padding-top: 40px; }
}
@media (max-width: 900px) {
  .about-layout { grid-template-columns: 1fr; }
  .about-copy { position: static; padding: 42px 22px 40px; }
  .about-title { font-size: clamp(80px, 18.5vw, 170px); }
  .about-description p { font-size: 22px; line-height: 1.3; }
}
@media (max-width: 600px) {
  .about-visual { border-radius: 12px 12px 0 0; }
  .about-layout { margin-top: 135px; min-height: calc(100svh - 135px); }
  .about-copy { padding: 32px 20px 36px; }
  .about-title { font-size: 18.9vw; margin-bottom: 28px; }
  .about-note { font-size: 14px; }
  .about-description p { font-size: 20px; }
}

/* Preserve the previous visual proportions and center the face in the crop. */
.about-photo { display: block; width: 100%; aspect-ratio: 720 / 950; object-fit: cover; object-position: 50% 33%; }
