/* about editorial sequence */
.about-sequence {
  --about-rail-offset: clamp(218px, 24svh, 270px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(330px, .56fr) minmax(620px, 1fr);
  gap: clamp(34px, 3.4vw, 64px);
  padding: clamp(136px, 10.5vw, 164px) var(--pad) clamp(96px, 8vw, 120px);
  align-items: start;
}

.about-anchor {
  position: sticky;
  top: var(--about-rail-offset);
  align-self: start;
}

.about-anchor h2,
.about-founder-beat h3 {
  margin: 0;
  color: var(--ink);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
}

.about-anchor h2 {
  max-width: 11ch;
  font-size: var(--type-section-size);
  line-height: var(--type-section-line);
  text-wrap: balance;
}

.about-beats {
  display: grid;
}

.about-beat {
  max-width: 860px;
}

.about-moment {
  min-height: clamp(600px, 78svh, 820px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.about-founder-beat .about-moment:last-child {
  align-items: flex-end;
}

.about-phrase {
  margin: 0;
  color: var(--ink);
  font-size: var(--type-feature-size);
  font-weight: var(--weight-display);
  line-height: var(--type-feature-line);
  letter-spacing: var(--tracking-display);
}

.about-phrase span {
  display: block;
}

.about-phrase-hands {
  max-width: 12ch;
}

.about-phrase-systems {
  max-width: 13ch;
  color: rgba(255,255,255,.58);
}

.about-founder-beat h3 {
  line-height: .92;
}

.about-founder-intro,
.about-founder-name {
  display: block;
}

.about-founder-intro {
  margin-bottom: clamp(14px, 1.4vw, 22px);
  color: rgba(255,255,255,.62);
  font-size: var(--type-body-size);
  font-weight: var(--weight-body);
  font-stretch: var(--stretch-body);
  line-height: var(--type-body-line);
  letter-spacing: var(--tracking-body);
}

.about-founder-name {
  font-size: var(--type-feature-size);
  font-weight: var(--weight-display);
}

.about-founder-detail {
  display: grid;
  grid-template-columns: minmax(220px, .78fr) minmax(280px, 1fr);
  gap: clamp(28px, 3vw, 52px);
  align-items: end;
  width: 100%;
  max-width: 860px;
}

.about-founder-portrait {
  aspect-ratio: 8 / 5;
  margin: 0;
  overflow: hidden;
  background: #111;
}

.about-founder-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.about-founder-copy {
  display: grid;
  gap: clamp(18px, 1.6vw, 26px);
  max-width: 520px;
  padding-bottom: clamp(24px, 2.2vw, 32px);
  color: rgba(255,255,255,.62);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  letter-spacing: var(--tracking-body);
}

.about-founder-copy p {
  margin: 0;
}

.about-beat.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.about-phrase,
.about-founder-beat h3,
.about-founder-detail {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .72s linear,
    transform .9s cubic-bezier(.22,1,.36,1),
    color .72s linear;
}

.about-phrase.is-about-visible,
.about-founder-beat h3.is-about-visible,
.about-founder-detail.is-about-visible {
  opacity: 1;
  transform: translateY(0);
}

.about-phrase-systems.is-about-visible {
  color: var(--ink);
}

@media (max-width: 920px) {
  .about-sequence {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: clamp(96px, 12vw, 128px) var(--pad);
  }

  .about-anchor {
    position: static;
  }

  .about-beats {
    gap: clamp(64px, 10vw, 96px);
  }

  .about-beat {
    display: grid;
    gap: clamp(64px, 10vw, 96px);
    min-height: auto;
    padding: clamp(56px, 9vw, 82px) 0;
  }

  .about-moment {
    min-height: auto;
  }

  .about-founder-detail {
    grid-template-columns: minmax(220px, .78fr) minmax(260px, 1fr);
  }
}

@media (max-width: 720px) {
  .about-sequence {
    gap: 30px;
    padding-bottom: 72px;
  }

  .about-anchor h2 { max-width: 11ch; }

  .about-studio-beat {
    padding: 46px 0 54px;
  }

  .about-founder-intro {
    margin-bottom: 12px;
  }

  .about-founder-name { line-height: var(--type-feature-line); }

  .about-founder-copy {
    gap: 20px;
    max-width: none;
    padding-bottom: 0;
  }

  .about-founder-detail {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 620px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-phrase,
  .about-founder-beat h3,
  .about-founder-detail {
    opacity: 1;
    transform: none;
    transition: none;
  }
}