/* About: an editorial long-read. Mobile first, tokens only. */
.prose { max-width: var(--w-text); margin-inline: auto; display: grid; gap: var(--s-5); }
.prose p { max-width: none; }
.prose h2 { font-size: var(--t-h2); margin-bottom: var(--s-1); }
.lede { font-size: var(--t-lead); line-height: 1.5; color: var(--c-ink); }
.longread { padding-block: var(--s-10); }
.longread .wrap > * + * { margin-top: var(--s-8); }
.longread__wide { margin: 0; }
.longread__wide .photo { border-radius: var(--r-md); aspect-ratio: 4 / 3; }
.longread__wide figcaption { max-width: var(--w-text); margin-inline: auto; }
.pull { margin: var(--s-3) 0; padding: var(--s-5) 0 0; border-top: 1px solid var(--c-rule); font-family: var(--f-display); font-size: var(--t-h3); line-height: 1.4; font-weight: 400; font-style: italic; color: var(--c-slate); text-wrap: balance; }

/* Two photos, the second one steps in a beat later and sits lower */
.duo { display: grid; gap: var(--s-3); }
.duo .photo { margin: 0; border-radius: var(--r-md); aspect-ratio: 4 / 3; }
.duo__b { transition-delay: 120ms; }
.duo .photo img, .longread__wide .photo img { transition-property: clip-path, transform; }
@media (hover: hover) {
  .duo .photo img, .longread__wide .photo img { transition: clip-path var(--d-edit) var(--ease-fluid), transform var(--d-edit-long) var(--ease-fluid); }
  .js .duo .photo.is-in:hover img, .js .longread__wide .photo.is-in:hover img { transform: scale(1.03); }
}

/* Headline rises on load */
.js .page-hero__copy > * { opacity: 0; transform: translateY(14px); transition: opacity var(--d-edit) var(--ease-fluid), transform var(--d-edit) var(--ease-fluid); }
.js .page-hero__copy > .lead { transition-delay: 140ms; }
.js .page-hero.is-loaded .page-hero__copy > * { opacity: 1; transform: none; }

.about-cta__btns { display: grid; gap: var(--s-4); margin-top: var(--s-3); }
.about-cta__btns .link { justify-self: start; padding-block: var(--s-3); }
.about-cta .prose p { color: var(--c-fog); }

@media (min-width: 760px) {
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
  .duo .duo__b { margin-top: var(--s-9); }
  .longread__wide .photo { aspect-ratio: 16 / 9; }
  .longread__wide figcaption { margin-inline: 0; max-width: none; }
  .pull { font-size: var(--t-h2); }
  .about-cta__btns { grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--s-6); }
}
@media (min-width: 1024px) {
  .longread .wrap > * + * { margin-top: var(--s-10); }
}
@media (prefers-reduced-motion: reduce) {
  .js .page-hero__copy > * { opacity: 1; transform: none; }
}