body.site-page .about-page { padding-block: 36px 40px; }
body.site-page .about-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
body.site-page .about-story { max-width: 650px; min-width: 0; }
body.site-page .about-story .eyebrow { font-size: .875rem; letter-spacing: .06em; }
body.site-page .about-story h1 { margin-block: 12px 18px; font-size: clamp(2.75rem, 5.2vw, 4.5rem); line-height: 1.06; letter-spacing: -.045em; }
body.site-page .about-lead { max-width: 54ch; font-size: 1.125rem; line-height: 1.55; color: var(--sl-muted); }
body.site-page .about-lead + .about-lead { margin-top: 12px; }
body.site-page .about-release { margin-top: 14px; font-size: .875rem; line-height: 1.55; color: var(--sl-muted); }
body.site-page .about-brand { min-width: 0; padding: clamp(24px, 3vw, 44px) clamp(28px, 4vw, 56px); border-radius: 26px; background: var(--sl-forest); color: var(--sl-cream); }
body.site-page .about-brand svg { display: block; width: 60px; height: 60px; margin-bottom: 16px; }
body.site-page .about-brand p { font-family: var(--display); font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 550; line-height: 1.16; letter-spacing: -.035em; }
body.site-page .about-purpose { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 40px; padding-block: 32px; margin-top: 28px; border-top: 1px solid var(--sl-border); }
body.site-page .about-purpose h2, body.site-page .about-feedback h2 { font-size: clamp(1.75rem, 2.5vw, 2.25rem); line-height: 1.2; letter-spacing: -.025em; }
body.site-page .about-principles { margin: 0; }
body.site-page .about-principles > div + div { margin-top: 16px; }
body.site-page .about-principles dt { font-size: 1.0625rem; line-height: 1.5; font-weight: 650; }
body.site-page .about-principles dd { margin: 4px 0 0; max-width: 62ch; font-size: 1rem; line-height: 1.55; color: var(--sl-muted); }
body.site-page .about-feedback { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 24px 28px; border-radius: 20px; background: var(--sl-primary-container); }
body.site-page .about-feedback p { margin-top: 8px; font-size: 1rem; line-height: 1.55; color: var(--sl-muted); }
body.site-page .about-actions { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }
body.site-page .about-actions .button { min-height: 48px; font-size: .9375rem; }
body.site-page .about-editorial { margin-top: 0; scroll-margin-top: 110px; }
body.site-page .about-editorial p { max-width: 62ch; font-size: 1rem; line-height: 1.6; color: var(--sl-muted); }
body.site-page .about-editorial p + p { margin-top: 12px; }
body.site-page .about-editorial a { color: var(--sl-forest); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 850px) {
  body.site-page .about-intro, body.site-page .about-purpose { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  body.site-page .about-brand { display: flex; align-items: center; gap: 24px; }
  body.site-page .about-brand svg { flex-shrink: 0; margin: 0; }
  body.site-page .about-purpose { margin-top: 22px; padding-block: 24px; }
  body.site-page .about-feedback { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 460px) {
  body.site-page .about-page { padding-block: 24px 28px; }
  body.site-page .about-lead { font-size: 1rem; }
  body.site-page .about-brand, body.site-page .about-feedback { padding: 20px 22px; }
  body.site-page .about-brand svg { width: 44px; height: 44px; }
  body.site-page .about-actions { width: 100%; }
  body.site-page .about-actions .button { flex: 1; padding-inline: 16px; }
}