/* Square covers; full compositions inside the project viewer. */
.project-image,.project.active .project-image{height:auto;aspect-ratio:1 / 1}
.project:hover,.project:focus-visible{flex-basis:30%}
@media(min-width:768px) and (hover:hover) and (pointer:fine){
  .gallery-shell{container-type:inline-size}
  .gallery-track{min-height:calc(42cqw + 110px)}
  .gallery-track:has(.project:hover),.gallery-track:has(.project:focus-visible){scroll-snap-type:none}
  .project:hover,.project:focus-visible{flex-basis:42%}
}
/* Center the existing arrow glyphs independently of the text baseline. */
.round-button,.project-arrow{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1;font-family:Arial,sans-serif}
.arrow-glyph{display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0;vertical-align:middle;transform:translateY(-.04em)}
.round-button .arrow-glyph,.project-arrow .arrow-glyph{width:1em;height:1em}
.journey-service a,.button{align-items:center}
.project-image img{width:100%;height:100%;object-fit:cover}
.project-image .image-tag{max-width:calc(100% - 32px)}
.project-open{overflow:hidden}
#project-dialog{width:min(1180px,94vw);max-width:94vw;max-height:94svh;padding:0;background:#f5f2ed;color:#24211e;overflow:auto}
#project-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;height:94svh;overflow:hidden}
#project-dialog .close-dialog{position:absolute;right:16px;top:16px;z-index:5;width:44px;height:44px;background:#f5f2ed;color:#24211e;border:1px solid #cec7bf;border-radius:50%;font-size:28px}
.project-dialog-heading{padding:26px 76px 20px 28px}
.project-dialog-heading h2{font-size:clamp(27px,4vw,40px);letter-spacing:-1.3px;margin:7px 0}
#dialog-description{font-size:13px;color:#6d635b}
#project-dialog .dialog-image-wrap{height:100%;min-height:0;background:#e7e2db;display:flex;align-items:center;justify-content:center;position:relative}
#dialog-image,#dialog-video{width:100%;height:100%;object-fit:contain;display:block;animation:none}
#dialog-image[hidden],#dialog-video[hidden]{display:none}
.media-navigation{display:flex;align-items:center;gap:14px;padding:12px 28px}
.media-navigation .round-button{width:42px;height:42px;flex-shrink:0}
#project-dialog .round-button{color:#24211e;border-color:#b6a99d}
#project-dialog .round-button:hover:not(:disabled){color:#fff}
#project-dialog .text-link{color:#24211e}
.media-status{flex:1;min-width:0}
#media-caption{display:block;font-size:13px;color:#6d635b;margin-top:3px}
#media-count{font-size:12px;font-variant-numeric:tabular-nums}
.project-thumbnails{display:flex;gap:8px;overflow-x:auto;position:relative;min-width:0;padding:4px 28px 14px;scrollbar-width:thin}
.project-thumbnails button{position:relative;flex:0 0 72px;width:72px;height:72px;padding:3px;border:2px solid transparent;background:none;border-radius:3px}
.project-thumbnails button[aria-pressed=true]{border-color:#920202}
.project-thumbnails img{width:100%;height:100%;object-fit:cover;display:block}
.project-thumbnails span{position:absolute;inset:0;display:grid;place-items:center;color:white;text-shadow:0 1px 8px #000;background:#0003;font-size:22px}
.project-dialog-footer{padding:10px 28px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid #ddd5cc}
.project-dialog-footer p{font-size:12px;color:#6d635b}
.project-dialog-footer .text-link{font-size:13px}
@media(max-width:767px){
  .project:hover,.project:focus-visible{flex-basis:84%}
  .project-image,.project.active .project-image{height:auto;aspect-ratio:1 / 1}
  #project-dialog{width:96vw;max-width:96vw;max-height:96svh}
  .project-dialog-heading{padding:20px 64px 16px 18px}
  #project-dialog .dialog-image-wrap{height:100%;min-height:0}
  .media-navigation{padding:10px 16px;gap:8px}
  .project-thumbnails{padding-left:16px;padding-right:16px}
  .project-thumbnails button{flex-basis:60px;width:60px;height:60px}
  .project-dialog-footer{padding:10px 18px 18px;align-items:flex-start;flex-direction:column;gap:8px}
  #media-caption{font-size:11px}
}