.about-page { margin: 0; background: #f7f7f7; color: #30312f; font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
.about-page * { box-sizing: border-box; }
.about-shell { width: 73%; max-width: 1160px; margin: clamp(64px, 6.5vw, 96px) auto 0; }
.about-intro { display: grid; grid-template-columns: 26% minmax(0, 1fr); gap: 4%; }
.about-hello { margin: 0 0 28px; color: #96979f; font-size: clamp(22px, 2.15vw, 30px); line-height: 1.3; }
.about-heading h1, .about-role { margin: 0; font-size: clamp(34px, 3.65vw, 52px); line-height: 1.13; font-weight: 400; letter-spacing: -.8px; }
.about-symbols { display: block; overflow: hidden; width: 80%; max-width: 210px; margin: 24px 0; }
.about-copy { font-size: clamp(18px, 1.75vw, 25px); line-height: 1.16; }
.about-copy p { margin: 0 0 28px; }
.about-copy p:last-child { margin-bottom: 0; }
.about-photos { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 12px; margin: clamp(64px, 6.5vw, 96px) 3% 0; }
.about-photos figure { margin: 0; min-width: 0; border: 8px solid #fff; border-radius: 10px; overflow: hidden; background: white; }
.about-photos svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.photo-group { grid-column: span 13; }
.photo-portrait { grid-column: span 7; position: relative; }
.about-photos .photo-portrait svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo-guitar { grid-column: span 7; }
.photo-friends { grid-column: span 13; }
.about-photos .photo-group svg { aspect-ratio: 573 / 408; }
.about-photos .photo-friends svg { aspect-ratio: 600 / 404; }
.about-skip { position: fixed; top: 12px; left: 12px; z-index: 10; padding: 14px; background: white; color: #30312f; transform: translateY(-160%); }
.about-skip:focus { transform: none; }
@media (max-width: 1000px) {
  .about-shell { width: 86%; }
  .about-intro { grid-template-columns: 28% minmax(0, 1fr); gap: 5%; }
  .about-copy { line-height: 1.4; }
  .about-heading h1, .about-role { font-size: 34px; }
  .about-photos { margin-inline: 0; }
}
@media (max-width: 700px) {
  .about-shell { width: calc(100% - 40px); margin-top: 60px; }
  .about-intro { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .about-heading h1, .about-role { font-size: 38px; }
  .about-hello { margin-bottom: 20px; }
  .about-symbols { width: 170px; margin-block: 20px; }
  .about-copy { font-size: 18px; line-height: 1.5; }
  .about-copy p { margin-bottom: 24px; }
  .about-photos { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 44px; }
  .about-photos figure { grid-column: 1; border-width: 6px; }
  .about-photos svg { height: auto; }
  .about-photos .photo-portrait { aspect-ratio: 324 / 407; }
}