/* About: a single understated portrait with a fixed, calm silhouette. */
.about-content { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(32px,7vw,100px); }
.about-collage.portrait-gallery { display:block; width:100%; max-width:420px; padding:0; margin-inline:auto; transform:none; min-width:0; }
.portrait-single { position:relative; aspect-ratio:4 / 5; overflow:hidden; border-radius:16px; background:var(--dark); }
.portrait-single img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.portrait-single img[data-candid] { transform:scale(1.6); object-position:50% 55%; }
.portrait-controls { display:flex; align-items:center; gap:20px; margin-top:15px; color:var(--dark); font:.7rem var(--utility); }
.portrait-count { margin-right:auto; }
.portrait-controls button { padding:10px 0; min-height:44px; border:0; border-bottom:1px solid transparent; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.portrait-controls button:hover { border-bottom-color:currentColor; }
.portrait-controls button:focus-visible { outline:2px solid var(--dark); outline-offset:4px; }
/* Motion: an editorial playground with an alternate contact-sheet layout. */
.motion-gallery { padding-top:64px; }
.motion-gallery-heading { align-items:flex-end; border-bottom:1px solid #fffdf850; padding-bottom:24px; }
.motion-gallery-heading h3 { font-size:clamp(2.4rem,6vw,5rem); letter-spacing:-.06em; line-height:1; }
.motion-gallery-tools { display:flex; flex-wrap:wrap; gap:10px; }
.motion-gallery-tools button[aria-pressed="true"] { background:var(--yellow); border-color:var(--yellow); color:var(--dark); }
.motion-gallery-grid { grid-template-columns:repeat(12,minmax(0,1fr)); align-items:start; gap:70px 36px; padding:28px 0 50px; }
.motion-gallery-card { position:relative; grid-column:span 5; border:0; padding:0; border-radius:0; }
.motion-gallery-card:nth-child(even) { grid-column:7 / 13; margin-top:110px; }
.motion-gallery-card:nth-child(4n+3) { grid-column:2 / 7; }
.motion-gallery-card figure { position:relative; padding:12px; background:var(--card-paper,var(--lavender)); border-radius:22px; overflow:hidden; margin:0 0 22px; transform:rotate(-2deg); transition:transform .4s ease; }
.motion-gallery-card:nth-child(even) figure { transform:rotate(2deg); }
.motion-gallery-card:nth-child(3n+2) { --card-paper:var(--sky); }
.motion-gallery-card:nth-child(3n+3) { --card-paper:var(--coral); }
.motion-gallery-card:hover figure, .motion-gallery-card:focus-within figure { transform:rotate(0); }
.motion-gallery-card video { height:auto; max-height:470px; width:100%; aspect-ratio:1!important; object-fit:contain; border-radius:13px; background:var(--dark); }
.motion-gallery-card h3 { font:600 clamp(1.5rem,2.5vw,2.2rem)/1.15 var(--display); letter-spacing:-.04em; padding-right:45px; }
.motion-gallery-card p { font-size:.88rem; max-width:40ch; opacity:1; }
.motion-card-index { display:block; margin-bottom:14px; color:var(--yellow); font:.72rem var(--utility); letter-spacing:.06em; }
.motion-gallery-grid.is-contact-sheet { grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 24px; }
.motion-gallery-grid.is-contact-sheet .motion-gallery-card { grid-column:auto; margin-top:0; }
.motion-gallery-grid.is-contact-sheet figure { transform:none; }
.motion-gallery-grid.is-contact-sheet h3 { font-size:1.4rem; }
@media(max-width:900px) {
 .about-content { grid-template-columns:1fr; }
 .about-collage.portrait-gallery { max-width:360px; }
 .motion-gallery-grid { gap:40px 24px; }
 .motion-gallery-grid.is-contact-sheet { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
 .motion-gallery { padding-top:32px; }
 .motion-gallery-heading { align-items:flex-start; flex-direction:column; }
 .motion-gallery-grid, .motion-gallery-grid.is-contact-sheet { grid-template-columns:minmax(0,1fr); gap:38px; padding-inline:5px; }
 .motion-gallery-grid .motion-gallery-card { grid-column:auto; margin-top:0; }
 .motion-gallery-grid .motion-gallery-card figure { transform:none; }
 .motion-gallery-grid.is-contact-sheet .motion-gallery-card video { max-height:240px; }
 .motion-gallery-tools button { padding:10px 13px; font-size:.75rem; }
}
@media(prefers-reduced-motion:reduce) { .motion-gallery-card figure { transition:none; } }
/* Each section owns its ink, even while the page theme changes on scroll. */
.hero { background:var(--bg); color:var(--dark); }
.work, .services, .about, .experience, .contact, .archive-band { color:var(--dark); }