/* The existing brand material introduces the founder story. */
.about-page .about-opening {
  background-image: linear-gradient(90deg, rgba(7,24,22,.28), rgba(7,24,22,0) 75%), url('/assets/hero-matter-v2.webp');
  background-size: cover;
  background-position: center 52%;
  min-height: 540px;
  padding-top: 170px;
  padding-bottom: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #fffaf1;
}
.about-page .about-opening > * { position: relative; max-width: 800px; }
.about-page .about-opening .label { color: #ecdca7; }
.about-page .about-opening h1 { text-shadow: 0 2px 24px rgba(3,20,17,.3); }
.about-page .about-opening > p:last-child { color: #f5e8c7; text-shadow: 0 1px 12px rgba(3,20,17,.35); }
@media (max-width: 760px) {
  .about-page .about-opening {
    min-height: 440px;
    padding-top: 128px;
    padding-bottom: 90px;
    background-position: 38% center;
    background-image: linear-gradient(90deg, rgba(7,24,22,.45), rgba(7,24,22,.12)), url('/assets/hero-matter-v2.webp');
  }
  .about-page .about-opening h1 { font-size: clamp(2.2rem, 8vw, 3.5rem); line-height: 1.4; }
  .about-page .about-opening > p:last-child { font-size: 18px; max-width: 26ch; }
}