/* About page. Loads after styles.css + guides/guides.css (reuses .lrn-hero, .lrn-h1, .lrn-lede, .lrn-body, .lrn-cta-row).
   Nothing here waits on JS: the photo and the story are plain content. Bump ?v= in about/index.html on every change. */
.about-page {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(3rem, 7vw, 5.5rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.8rem, 5vw, 4.5rem); align-items: start;
}
.about-photo {
  margin: 0; border-radius: 18px; overflow: hidden; background: var(--bg-elev);
  box-shadow: 0 0 0 1px var(--line), 0 40px 90px -30px rgba(198, 244, 50, 0.25);
}
.about-photo img { display: block; width: 100%; height: auto; }
.about-story .lrn-h2 { margin-bottom: 1.2rem; }

@media (max-width: 800px) {
  .about-page { grid-template-columns: 1fr; }
}
.about-story .about-legal { margin-top: 1.6rem; font-size: 0.85rem; line-height: 1.55; color: var(--muted); }