/* Om mig: a calm opening. One portrait, one short headline, a lot of air. */
.about-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); align-items: center; gap: clamp(32px, 6vw, 110px); min-height: min(88svh, 900px); padding-top: calc(var(--head-h) + clamp(24px, 4vw, 56px)); padding-bottom: clamp(48px, 6vw, 88px); background: radial-gradient(closest-side at 72% 52%, rgba(227, 161, 90, .13), rgba(227, 161, 90, 0) 70%); }
.about-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 7vw, 6.6rem); line-height: .98; letter-spacing: -.02em; }
.about-hero-line { margin-top: 20px; max-width: 22ch; font-family: var(--serif); font-size: clamp(1.45rem, 2.4vw, 2.1rem); line-height: 1.2; color: var(--cream-2); }
.about-hero-meta { margin-top: 30px; padding-top: 18px; max-width: 34ch; font-size: .98rem; color: var(--cream-3); background: linear-gradient(90deg, rgba(227, 161, 90, .55), rgba(227, 161, 90, 0)) no-repeat 0 0 / 100% 1px; }
.about-portrait { margin: 0; justify-self: end; width: min(100%, 520px); aspect-ratio: 4 / 5.2; border-radius: 999px 999px 30px 30px; overflow: hidden; box-shadow: 0 0 0 1px rgba(227, 161, 90, .25), 0 0 120px -30px rgba(227, 161, 90, .35), 0 60px 120px -60px rgba(0, 0, 0, .9); }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; scale: 1.06; animation: drift-a 32s ease-in-out infinite alternate; }

@media (max-width: 860px) {
  .about-hero { grid-template-columns: 1fr; gap: 28px; min-height: 0; padding-top: calc(var(--head-h) + 20px); }
  .about-portrait { order: -1; justify-self: center; width: min(78%, 360px); }
  .about-hero h1 { font-size: clamp(2.6rem, 12vw, 3.6rem); }
}
@media (prefers-reduced-motion: reduce) {
  .about-portrait img { animation: none; }
}