.about-hero .hero-copy { gap: 14px; }
.about-hero .eyebrow { color: var(--ink); text-shadow: 0 1px 10px #000; }
.about-hero h1 { font-size: clamp(2.6rem, 5.8vw, 5rem); letter-spacing: -.055em; }
.about-hero .hero-shade { background: linear-gradient(180deg, #0002, #0004 50%, #0006); }
.about-hero .video-toggle { min-height: 44px; background: #0b0b0bb3; }
.about-film-credit { border-bottom: 1px solid #ffffff70; padding-bottom: 5px; }
/* The photograph and its two teal tones continue the filmmaker's visual palette. */
.about-main {
  --about-deep: #073f46;
  --about-light: #b9dcd8;
  --ink: var(--about-light);
  --muted: var(--about-light);
  --line: #b9dcd85c;
  position: relative;
  isolation: isolate;
  max-width: none;
  padding: 0;
  background: var(--about-light);
  color: var(--about-deep);
  scroll-margin-top: 80px;
}
.about-main::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 42.5%;
  z-index: -1;
  background: url("about/flower-background.jpg") 59% center / cover no-repeat;
}
.about-main .about-grid {
  grid-template-columns: .85fr 1.15fr;
  gap: 0;
  margin: 0;
}
.about-main .page-heading {
  width: fit-content;
  max-width: calc(100% - 2 * var(--gutter));
  margin: clamp(38px, 5vw, 76px) var(--gutter);
  padding: 0;
  color: var(--about-light);
  background: transparent;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
}
.about-main .about-grid > div {
  min-width: 0;
  padding: clamp(38px, 5vw, 76px) clamp(28px, 4vw, 70px);
  background: var(--about-deep);
  color: var(--about-light);
}
.about-main .about-text {
  max-width: 54ch;
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.7;
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.about-main .about-text p + p { margin-top: 24px; }
.about-main .about-awards-link { color: var(--about-light); }
.about-main .about-awards-link a { border-color: var(--about-light); }
.about-main .about-awards-link a:hover { color: var(--about-light); opacity: .82; }
.about-main .about-meta {
  margin-top: 42px;
  padding: 26px 28px 0;
  border: 0;
  background: var(--about-light);
  color: var(--about-deep);
  line-height: 1.6;
}
.about-main .about-invitation {
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 0;
  padding: 14px 28px 28px;
  background: var(--about-light);
  color: var(--about-deep);
}
.about-main .text-cta { border-color: var(--about-deep); }
.about-main a:focus-visible { outline-color: currentColor; }
@media (max-width: 950px) and (min-width: 701px) {
  .about-main .about-grid { grid-template-columns: .7fr 1.3fr; }
  .about-main::before { width: 35%; }
  .about-main .page-heading { margin-left: 24px; }
}
@media (max-width: 700px) {
  .about-main { padding: 0; scroll-margin-top: 108px; }
  .about-main::before {
    width: 100%;
    height: min(78vw, 440px);
    background-position: center 62%;
  }
  .about-main .about-grid {
    grid-template-columns: 1fr;
    grid-template-rows: min(78vw, 440px) auto;
    gap: 0;
  }
  .about-main .page-heading {
    margin: 28px var(--gutter);
    padding: 0;
    align-self: start;
  }
  .about-main .about-grid > div { padding: 38px var(--gutter) 42px; }
  .about-main .about-text { font-size: 19px; }
  .about-main .about-meta { margin-top: 30px; padding: 22px 22px 0; }
  .about-main .about-invitation { padding: 12px 22px 22px; }
}
@media (max-width: 480px) { .about-main .about-text { font-size: 18px; } }