.gallery-page { background-color: var(--paper); }
.portfolio-gallery { padding-block: 64px; overflow: clip; }
.gallery-intro, .gallery-row-heading {
  width: min(100%, var(--content-width)); margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.gallery-intro { display: flex; align-items: center; justify-content: center; gap: 32px; margin-bottom: 48px; }
.gallery-intro h1 { margin: 0; text-align: center; font-family: var(--display); font-size: clamp(44px, 6vw, 80px); font-weight: 500; line-height: 1.08; letter-spacing: -.045em; }
.gallery-row + .gallery-row { margin-top: 48px; }
.gallery-row-heading { margin-bottom: 16px; text-align: left; }
.gallery-row h2 { margin: 0; font-family: var(--display); font-size: clamp(24px, 2.7vw, 36px); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; }
.gallery-frame { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: var(--sage) var(--paper-deep); }
.gallery-frame:focus-visible { outline-offset: -4px; }
.gallery-track, .gallery-group { display: flex; gap: 24px; width: max-content; }
.gallery-track { padding: 4px 0; }
.gallery-tile { flex: 0 0 auto; width: clamp(248px, 26vw, 360px); aspect-ratio: 3 / 2; margin: 0; padding: 8px; overflow: hidden; border: 1px solid #b6bbae; border-radius: 24px; background: #f7f0e3; }
.gallery-tile img { width: 100%; height: 100%; object-fit: contain; border-radius: 16px; background: #e1e4d9; }
.marquee-ready .gallery-frame { overflow-x: hidden; }
.marquee-ready .gallery-track { animation: gallery-drift var(--gallery-duration, 90s) linear infinite; }
.gallery-row-right .gallery-track { animation-direction: reverse; }
@keyframes gallery-drift { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 12px)); } }
@media (max-width: 620px) {
  .portfolio-gallery { padding-block: 40px; }
  .gallery-intro { flex-direction: column; align-items: center; gap: 24px; margin-bottom: 32px; }
  .gallery-row + .gallery-row { margin-top: 32px; }
  .gallery-track, .gallery-group { gap: 16px; }
  .gallery-tile { width: 264px; border-radius: 20px; }
  @keyframes gallery-drift { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-ready .gallery-frame { overflow-x: auto; }
  .marquee-ready .gallery-track { animation: none; transform: none; }
  .gallery-group[aria-hidden="true"], .gallery-tile[data-repeat] { display: none; }
}