.about-page { max-width: var(--max-width); margin: auto; padding: 160px 40px 40px; }
.about-intro, .about-cat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 90px; padding-bottom: 100px; }
.about-page figure { margin: 0; min-width: 0; }
.about-page figure img { display: block; width: 100%; height: auto; border-radius: 4px; }
.about-page figcaption { color: var(--muted); font-size: 0.75rem; margin-top: 12px; }
.about-copy h1 { font-size: clamp(3.8rem, 7vw, 6.3rem); font-weight: 550; line-height: 1; letter-spacing: -0.06em; margin: 0 0 28px; }
.about-page h1 span, .about-page h2 span { color: var(--accent); }
.about-copy p { color: var(--muted); max-width: 560px; }
.about-copy .about-lead { font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.4; color: var(--text); letter-spacing: -0.025em; }
.about-copy .button-secondary { margin-top: 16px; }
.about-page h2 { border: 0; padding: 0; margin: 0 0 24px; font-size: clamp(2.3rem, 4vw, 3.8rem); font-weight: 500; letter-spacing: -0.05em; line-height: 1.1; }
.about-cat { border-top: 1px solid var(--border); padding-top: 90px; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.about-visitors { border-top: 1px solid var(--border); padding: 75px 0 60px; }
.visitor-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; }
.visitor-heading h2 { max-width: 700px; }
.visitor-heading p { color: var(--muted); margin: 0; }
.visitor-total { white-space: nowrap; font-size: 0.85rem; color: var(--muted); }
.visitor-map { position: relative; background: #f7f8f6; border: 1px solid #e8ebe7; border-radius: 4px; overflow: hidden; }
.visitor-map img { width: 100%; height: auto; display: block; }
.visitor-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.visitor-map circle { fill: var(--accent); fill-opacity: .7; stroke: white; stroke-width: 1.5; }
.visitor-map circle:focus { outline: none; stroke: #111; stroke-width: 3; }
.visitor-status, .visitor-note, .map-credit { color: var(--muted); font-size: 0.8rem; margin: 18px 0 0; }
.visitor-note { max-width: 800px; }
.map-credit { font-size: 0.7rem; }
.visitor-regions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; max-height: 200px; overflow: auto; }
.visitor-regions li { padding: 6px 12px; border: 1px solid var(--border); border-radius: 20px; font-size: 0.75rem; }
.about-footer { border-top: 1px solid var(--border); padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; font-size: .75rem; color: var(--muted); }
.about-footer a { text-decoration: none; }
.about-page a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
@media (max-width: 850px) {
  .about-page { padding: 125px 22px 32px; }
  .about-intro, .about-cat { gap: 35px; }
  .about-intro { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .about-copy h1 { font-size: 3.5rem; }
}
@media (max-width: 600px) {
  .about-page { padding: 115px 18px 28px; }
  .about-intro, .about-cat { grid-template-columns: 1fr; padding-bottom: 55px; }
  .about-portrait { max-width: 380px; }
  .about-cat { padding-top: 55px; }
  .about-visitors { padding-top: 55px; }
  .visitor-heading { align-items: flex-start; flex-direction: column; }
  .about-footer { flex-wrap: wrap; }
}