/* ---------- ABOUT PAGE ---------- */
.about-hero { padding-block: clamp(48px, 7vw, 96px) var(--section); }
.about-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-6); align-items: center; }
.about-hero h1 { font-size: var(--t-2xl); font-size: clamp(2.25rem, 1.4rem + 3.8vw, 4rem); line-height: 1.05; }
.about-hero p { margin-top: var(--s-4); font-size: var(--t-lg); line-height: 1.55; color: var(--stout-70); max-width: 32em; }
.portrait { rotate: 1.5deg; }
.portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 2px solid var(--stout); border-radius: var(--radius); box-shadow: 0 8px 0 var(--stout); }
.portrait figcaption { margin-top: var(--s-3); font-size: var(--t-sm); font-style: italic; color: var(--stout-70); text-align: center; }
.story { max-width: 680px; margin-inline: auto; }
.story h2 { margin-bottom: var(--s-4); }
.story p { font-size: var(--t-lg); line-height: 1.7; }
.story p + p { margin-top: var(--s-3); }
.story .credit { font-size: var(--t-md); color: var(--stout-70); }
.concert { text-align: center; }
.concert h2 { font-size: var(--t-3xl); line-height: 1.02; letter-spacing: -0.032em; max-width: 12ch; margin-inline: auto; }
.concert .card-q { display: inline-block; margin-top: var(--s-5); padding: 18px 26px; background: var(--foam); color: var(--stout); border-radius: var(--radius-sm); font-family: var(--display); font-size: var(--t-xl); rotate: -2deg; box-shadow: 0 6px 0 var(--copper); }
.concert p { margin: var(--s-5) auto 0; font-size: var(--t-lg); line-height: 1.65; color: var(--foam-70); max-width: 38em; }
.concert p strong { color: var(--foam); font-weight: 500; }
.wont { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--s-6); align-items: center; }
.wont figure img { width: 100%; height: auto; border-radius: var(--radius); border: 2px solid var(--stout); }
.wont ul { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
.wont li { border-top: 2px solid var(--stout); padding-top: var(--s-3); }
.wont li h3 { font-size: var(--t-xl); }
.wont li p { margin-top: var(--s-1); color: var(--stout-70); }
.textlink { color: var(--amber); font-weight: 700; text-underline-offset: 4px; }
@media (max-width: 900px) { .about-hero__grid, .wont { grid-template-columns: 1fr; gap: var(--s-5); } .portrait { max-width: 420px; } .wont figure { max-width: 420px; } }