/* ---------- About page ---------- */
.page-hero--about .media-fade {
  --fade-h: linear-gradient(90deg, rgba(15,15,15,.8) 0%, rgba(15,15,15,.059) 69.2%, rgba(15,15,15,.15) 78.4%, rgba(15,15,15,.15) 92.3%, rgba(15,15,15,.8) 100%);
  --fade-v: linear-gradient(0deg, rgba(15,15,15,.8) 0%, rgba(15,15,15,.1) 31.4%);
}
.page-hero--about .media-fade img { object-position: center 7.9%; }

/* ---------- Biography ---------- */
.bio { padding-block: var(--section-y); border-bottom: 1px solid var(--border); }
.bio__inner { display: flex; align-items: flex-start; gap: 60px; }
.bio__photo {
  flex: 1 1 0; min-width: 0; margin: 0; aspect-ratio: 2007 / 2048; overflow: hidden;
  border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.bio__photo img { width: 100%; height: 100%; object-fit: cover; }
.bio__text { flex: 1 1 0; min-width: 0; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; }
.bio__copy { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.bio__copy h2 { font-size: var(--fs-h2); line-height: 1.1; }
.bio__copy p { align-self: stretch; line-height: 1.5; }

/* ---------- Highlights ---------- */
.highlights { padding-block: var(--section-y); border-bottom: 1px solid var(--border); }
.highlights__inner { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.highlights__head { align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
.highlights__head h2 { font-size: var(--fs-h2); line-height: 1.1; }
.highlights__head p { color: var(--text-muted); }
.highlights__list { align-self: stretch; }
.highlight { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 60px; align-items: center; padding-block: 60px; }
.highlight + .highlight { border-top: 1px solid var(--border); }
.highlight__video { grid-column: span 2; aspect-ratio: 400 / 225; background: #000; display: grid; place-items: center; }
.highlight__video svg { width: 16px; height: 18px; color: var(--text); }
.highlight__video:hover svg { color: var(--accent); }
.highlight__body { grid-column: span 3; align-self: start; display: flex; flex-direction: column; gap: 8px; }
.highlight__body h3 { font-size: var(--fs-h3); line-height: 1.15; }

/* ---------- Gallery (mosaic) ---------- */
.gallery { padding-block: var(--section-y); }
.gallery h2 { font-size: var(--fs-h2); line-height: 1.1; margin-bottom: 64px; }
.gallery__grid { list-style: none; margin: 0; padding: 0; column-count: 5; column-gap: 24px; }
.gallery__grid li { break-inside: avoid; margin-bottom: 24px; }
.gallery__item { display: block; width: 100%; padding: 0; border-radius: 4px; overflow: hidden; background: var(--bg-card); cursor: zoom-in; }
.gallery__item img { width: 100%; height: auto; display: block; transition: opacity .2s; }
.gallery__item:hover img { opacity: .85; }

/* ---------- Lightbox (gallery-specific) ---------- */
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; }
.lightbox__img { max-width: min(92vw, 1400px); max-height: calc(100dvh - 96px); width: auto; height: auto; object-fit: contain; border-radius: 4px; touch-action: pan-y; }
.lightbox__count { font-size: var(--fs-small); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }

@media (max-width: 1100px) { .gallery__grid { column-count: 4; } }
@media (max-width: 900px) {
  .bio__inner { flex-direction: column; gap: 40px; }
  .bio__photo { flex: none; width: min(100%, 480px); align-self: center; }
  .bio__text { align-self: stretch; }
  .highlight { grid-template-columns: 1fr; row-gap: 24px; padding-block: 40px; }
  .highlight__video, .highlight__body { grid-column: auto; }
  .gallery__grid { column-count: 3; column-gap: 16px; }
  .gallery__grid li { margin-bottom: 16px; }
}
@media (max-width: 520px) {
  .gallery__grid { column-count: 2; }
  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
}