/* About follows the portfolio's lilac, soft cards and editorial typography. */
.about-page { padding-top: clamp(120px, 16vw, 210px); }
.about-page .page-heading { font-size: clamp(36px, 5.73vw, 72px); margin-bottom: clamp(16px, 2vw, 24px); }
.about-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(28px, 4vw, 60px); }
.about-event-photo { margin: 0; overflow: hidden; border-radius: 28px; }
.about-event-photo img { display: block; width: 100%; height: auto; }
.about-copy { max-width: 660px; }
.about-copy p { font-size: clamp(17px, 1.65vw, 22px); line-height: 1.6; margin-bottom: 20px; color: var(--color-text); }
.about-details { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
.about-panel { background: var(--color-card); border-radius: 28px; padding: clamp(24px, 3vw, 40px); }
.about-panel h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(25px, 2.7vw, 36px); margin-bottom: 20px; color: var(--color-text); }
.about-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.about-tags li { padding: 9px 14px; border: 1px solid #e5dced; border-radius: 999px; font-size: clamp(14px, 1.25vw, 17px); line-height: 1.4; color: var(--color-text); }
@media (max-width: 850px) {
  .about-intro { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .about-page .page-inner { padding: 0 24px; }
  .about-details { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
}