.section-about {
  position: relative;
  width: 100%;
  min-height: 100svh;
  padding: 25svh var(--theme-section-padding);
  background: var(--brand-color-sand);
  color: var(--theme-color-text);
  display: flex;
  z-index: 1;
}

/* Content + figure share the same 6-column brand grid, instead of the
   figure being separately absolute-positioned over the backdrop. */
.section-about__grid {
  --theme-grid-rows: auto;

  width: 100%;
  align-items: center;
}

.section-about__backdrop {
  position: absolute;
  inset: 0 0 0 25%;
  width: 75%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* mix-blend-mode: multiply; */
}

/* Fades in as the section scrolls into view — gated behind @supports
   so browsers without animation-timeline (Safari, Firefox as of
   writing) just show the image at full opacity immediately. */
@supports (animation-timeline: view()) {
  .section-about__backdrop {
    opacity: 0;
    animation: fade-in-section-about-backdrop linear both;
    animation-timeline: view();
    animation-range: entry 25% entry 100%;
  }
}

@keyframes fade-in-section-about-backdrop {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.section-about__scrim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--brand-color-sand) 0%, transparent 20%), linear-gradient(90deg, var(--brand-color-sand) 25%, transparent 75%);
  pointer-events: none;
}

@media (width <= 640px) {
  .section-about__scrim {
    background: linear-gradient(180deg, var(--brand-color-sand) 0%, transparent 20%), linear-gradient(90deg, var(--brand-color-sand) 25%, transparent 300%);
  }

  /* col-4 (brand-grid.css) never had a mobile override, leaving content
     stuck at 4/6 of the row's width (unused empty grid space next to
     it) instead of expanding to fill it. */
  .section-about__content {
    grid-column: span var(--theme-grid-columns);
  }
}

.section-about__content {
  position: relative;
  padding: var(--theme-section-padding);
  display: flex;
  flex-direction: column;
  gap: var(--theme-space-lg);
}

/* Heading comes from a WYSIWYG field (about_heading) — editors write
   it as plain paragraphs and reach for bold/italic themselves rather
   than the two fixed line1/line2 text fields this used to be, so the
   line-per-<p> and accent-color styling below targets the tags a rich
   editor actually produces (p, strong) instead of custom classes. */
.section-about__heading {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.2;
}

.section-about__heading p {
  display: block;
  margin: 0;
  line-height: 1.2;
}

/* Lines animate in one by one as the section scrolls into view — each
   line gets its own animation-range slice of the section's own entry
   into the viewport (animation-timeline: view() is unreliable here:
   .section-about's content is vertically centered via flex inside a
   100svh section, so by the time the section visibly enters, the
   content itself has often already crossed its own entry range and
   the animation resolves before it's noticeable). Using view() scoped
   to .section-about itself instead of each child keeps the whole
   group timed to the same scroll distance. Gated behind @supports so
   unsupported browsers show everything immediately instead of stuck
   at opacity 0. */
@supports (animation-timeline: view()) {
  .section-about__heading p,
  .section-about__body {
    opacity: 0;
    animation: fade-in-section-about-heading-line linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 40%;
  }

  .section-about__heading p:nth-child(2) {
    animation-range: cover 10% cover 50%;
  }

  .section-about__body {
    animation-range: cover 20% cover 40%;
  }
}

@keyframes fade-in-section-about-heading-line {
  from {
    opacity: 0;
    transform: translateY(0.5em);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-about__heading strong {
  color: var(--theme-color-accent);
  font-weight: inherit;
}

.section-about__body {
  max-width: 40rem;
  font-size: var(--theme-font-size-copy);
}

/* The literal Kerklaan photo, shares the same grid row as the content
   column instead of being absolute-positioned over the backdrop. */
.section-about__figure {
  position: relative;
  z-index: 1;
  margin: 0;
  border: var(--theme-line-width) solid var(--theme-line-color);
}

.section-about__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}