/* Project gallery only: artwork pages retain their existing components. */
.project-gallery-featured { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.project-gallery-slot-title { margin: 0 0 10px; font-size: 16px; font-weight: 600; text-align: center; }
.project-gallery-slot { display: block; min-width: 0; color: var(--text-color); }
.project-gallery-slot > img { display: block; width: 100%; height: auto; aspect-ratio: auto; }
.project-gallery-slot-caption { display: block; padding-block: 10px; font-size: 13px; color: #596170; }
.project-gallery-placeholder { display: grid; place-items: center; aspect-ratio: 4 / 3; width: 100%; background: var(--light-background-color); color: #596170; padding: 20px; text-align: center; }
.project-gallery-placeholder > span { color: inherit; font-size: 13px; line-height: 1.6; }
.project-gallery-all { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 24px; padding: 12px 22px; border-radius: 6px; background: #9e1b32; color: #fff; font-size: 15px; font-weight: 600; }
.project-gallery-all:hover { background: #7f1528; color: #fff; }
.project-gallery-page { padding: 26px 0 70px; color: var(--text-color); }
body:has(.project-gallery-page) { padding-top: 128px; }
body:has(.project-gallery-page) > nav { position: fixed; inset: 0 0 auto; height: 64px; padding: 0 24px; background: var(--background-color); z-index: 1200; }
.project-gallery-header { position: fixed; inset: 64px 0 auto; min-height: 64px; padding: 12px 24px; display: grid; place-items: center; background: #9e1b32; color: #fff; z-index: 1300; }
.project-gallery-header h1 { color: inherit; font-size: clamp(24px, 3vw, 32px); line-height: 1.2; }
.project-gallery-header { text-align: center; }
.project-gallery-header h1 span { display: block; color: #9e1b32; font-size: 15px; margin-top: 12px; }
.project-gallery-viewer { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); gap: 36px; align-items: start; }
.project-gallery-stage { --gallery-main-height: min(calc(65vh * var(--gallery-viewer-scale, 1)), calc(620px * var(--gallery-viewer-scale, 1))); position: sticky; top: 154px; margin: 0 0 0 var(--gallery-stage-inset, 0px); min-width: 0; }
.project-gallery-stage-title { margin-bottom: 18px; font-size: 22px; line-height: 1.3; text-align: center; }
.project-gallery-carousel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 6fr) minmax(0, 1fr); gap: calc(10px * var(--gallery-viewer-scale, 1)); align-items: center; min-width: 0; touch-action: pan-y; }
.project-gallery-neighbor { position: relative; display: block; min-width: 0; height: min(calc(38vh * var(--gallery-viewer-scale, 1)), calc(340px * var(--gallery-viewer-scale, 1))); padding: 0; border: 0; border-radius: 4px; overflow: hidden; cursor: pointer; background: var(--light-background-color); opacity: .7; }
.project-gallery-neighbor:hover, .project-gallery-neighbor:focus-visible { opacity: 1; }
.project-gallery-neighbor > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-gallery-neighbor > .project-gallery-placeholder { height: 100%; aspect-ratio: auto; padding: 6px; }
.project-gallery-neighbor > [hidden] { display: none; }
.project-gallery-neighbor-arrow { position: absolute; inset: auto 0 10px; color: #fff; text-shadow: 0 1px 5px #000; font-size: 32px; line-height: 1; }
.project-gallery-neighbor.is-scroll-cue { background: transparent; opacity: 1; }
.project-gallery-neighbor.is-scroll-cue .project-gallery-neighbor-arrow { display: none; }
.project-gallery-scroll-cue { display: grid; place-content: center; gap: 8px; height: 100%; color: #9e1b32; }
.project-gallery-scroll-cue span { color: inherit; font-size: 12px; }
.project-gallery-scroll-cue span:first-child { font-size: 30px; line-height: 1; }
.project-gallery-carousel:focus-visible { outline: 3px solid var(--link-color); outline-offset: 3px; }
.project-gallery-display { display: grid; place-items: center; min-height: var(--gallery-main-height); background: var(--light-background-color); }
.project-gallery-display > img, .project-gallery-display > video { display: block; width: 100%; height: var(--gallery-main-height); object-fit: contain; }
.project-gallery-display > [hidden], .project-gallery-stage > a[hidden] { display: none; }
.project-gallery-video-tile { align-content: center; gap: 8px; background: #333; color: #f3f4f6; }
.project-gallery-video-tile > span:first-child { font-size: 24px; color: #f3f4f6; }
.project-gallery-stage > a { display: inline-block; margin-top: 10px; font-size: 14px; }
.project-gallery-display > .project-gallery-placeholder { aspect-ratio: auto; min-height: var(--gallery-main-height); }
.project-gallery-stage figcaption { font-size: 14px; line-height: 1.7; padding-top: 14px; color: #596170; overflow-wrap: anywhere; }
.project-gallery-group + .project-gallery-group { margin-top: 30px; }
.project-gallery-group h2 { margin-bottom: 14px; font-size: 18px; line-height: 1.4; }
.project-gallery-group-banner { display: block; width: 100%; padding: 6px 8px; border: 0; border-radius: 2px; font: inherit; line-height: inherit; color: #fff; background: #9e1b32; text-align: center; cursor: pointer; }
.project-gallery-group-banner:hover, .project-gallery-group-banner[aria-current="true"] { background: #7f1528; }
.project-gallery-thumbnails { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.project-gallery-thumbnail { display: block; width: 100%; padding: 3px; border: 2px solid transparent; border-radius: 5px; background: transparent; cursor: pointer; }
.project-gallery-thumbnail[aria-pressed="true"] { border-color: #9e1b32; }
.project-gallery-thumbnail > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.project-gallery-thumbnail .project-gallery-placeholder { padding: 12px; }
.project-gallery-thumbnail .project-gallery-placeholder > span { font-size: 11px; }
.project-gallery-preview a:focus-visible, .project-gallery-page button:focus-visible { outline: 3px solid var(--link-color); outline-offset: 3px; }
/* Keep the main viewer's grid allocation unchanged; narrow only its selector panel. */
@media (min-width: 901px) {
  .project-gallery-collection { width: 66.6667%; min-width: 0; justify-self: end; }
  .project-gallery-collection .project-gallery-group + .project-gallery-group { margin-top: 12px; }
  .project-gallery-collection .project-gallery-group h2 { margin-bottom: 6px; font-size: 14px; line-height: 1.3; text-align: center; }
  .project-gallery-collection .project-gallery-thumbnails { grid-template-columns: repeat(var(--gallery-columns, 6), minmax(0, 1fr)); gap: 3px; }
  .project-gallery-collection .project-gallery-thumbnail { padding: 0; border-width: 1px; border-radius: 2px; height: var(--gallery-thumb-height, auto); min-width: 0; aspect-ratio: 4 / 3; overflow: hidden; }
  .project-gallery-collection .project-gallery-thumbnail > img { height: 100%; object-fit: cover; }
  .project-gallery-collection .project-gallery-thumbnail .project-gallery-placeholder { height: 100%; aspect-ratio: auto; padding: 0; gap: 0; }
  .project-gallery-collection .project-gallery-thumbnail .project-gallery-video-tile > span:first-child { font-size: clamp(7px, var(--gallery-play-size, 12px), 16px); line-height: 1; }
  .project-gallery-collection .project-gallery-thumbnail .project-gallery-placeholder > span:last-child:not(:first-child) { display: none; }
}
.project-gallery-group h2 { text-align: center; }
@media (max-width: 900px) {
  .project-gallery-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-gallery-viewer { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .project-gallery-stage { position: static; }
  .project-gallery-thumbnails { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .project-gallery-carousel { gap: 5px; }
  .project-gallery-neighbor { height: 180px; }
  .project-gallery-neighbor .project-gallery-video-tile > span:last-child { display: none; }
  .project-gallery-featured { grid-template-columns: minmax(0, 1fr); }
  .project-gallery-thumbnails { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-gallery-display, .project-gallery-display > img, .project-gallery-display > video, .project-gallery-display > .project-gallery-placeholder { min-height: 260px; height: auto; }
  .project-gallery-display > img, .project-gallery-display > video { max-height: 65vh; }
}