/* Isolated layout experiment: the original homepage keeps its own styles. */
.work-home button.work-card__content {
  width: 100%; border: 0; padding: 0; background: none;
  color: inherit; font: inherit; text-align: left;
}
.work-home button.work-card__content .work-card__image { width: 100%; }
.work-home .work-card__image { border-radius: 0; }
/* The page progress bar is reserved for scrolling through a project's images. */
.work-home .progress { opacity: 0; transition: opacity .3s ease; }
body.gallery-open .progress { opacity: 1; }
.work-home .work-card__content:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
body.gallery-open { overflow: hidden; }
.gallery-open > .cursor { visibility: hidden; }
/* The site header stays above the gallery, so it is shown non-modally beneath it. */
body.gallery-open .site-header { transform: translateY(0); opacity: 1; }
/* Swipes on the header must not scroll the page hidden behind the gallery. */
body.gallery-open .site-header { touch-action: none; }
.project-gallery {
  position: fixed; inset: 0; z-index: 9000; width: 100%; max-width: none;
  height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  overflow: hidden; background: transparent; color: var(--ink);
  /* Touches on the gallery never scroll the page behind it; the image strip below still pans sideways. */
  touch-action: none; overscroll-behavior: contain;
  font: 13px/1.5 var(--mono); text-transform: none;
}
.gallery-backdrop { position: absolute; inset: 0; background: var(--paper); }
.project-gallery, .project-gallery a, .project-gallery button { cursor: auto; }
/* Anywhere outside the imagery returns to the project list. */
.project-gallery { cursor: zoom-out; }
.project-gallery .gallery-slide, .gallery-description { cursor: auto; }
.project-gallery button, .project-gallery a { cursor: pointer; }
.project-gallery button { color: inherit; font: inherit; background: none; border: 0; }
.project-gallery button:focus-visible, .project-gallery a:focus-visible,
.gallery-viewport:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.project-gallery { --gallery-height: 56vh; }
.gallery-viewport {
  position: absolute; top: 19vh; left: 0; right: 0;
  height: var(--gallery-height); overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x;
}
.gallery-viewport::-webkit-scrollbar { display: none; }
.gallery-track {
  display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2.16vw, 36px);
  width: max-content; min-width: 100%; height: 100%; padding-inline: clamp(18px, 5.4vw, 90px);
}
/* Every slide shares the viewport's height; widths follow each image's ratio, so the cover scales uniformly.
   The width is spelled out because Safari sizes aspect-ratio boxes with a percentage height to zero inside a max-content strip. */
.gallery-slide {
  flex: none; height: var(--gallery-height); width: calc(var(--gallery-height) * var(--ratio, 1.778));
  position: relative; overflow: hidden;
}
.is-unfolding .gallery-viewport { overflow: visible; }
.gallery-slide img, .gallery-slide video { width: 100%; height: 100%; object-fit: cover; }
.gallery-slide.is-unavailable::after {
  content: 'Preview unavailable'; position: absolute; inset: 0; display: grid;
  place-items: center; background: #e7e7e7; color: #666;
}
.gallery-footer {
  position: absolute; top: 80vh; left: 0; right: 0; bottom: 0;
  padding: 0 var(--gutter) max(18px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px;
}
/* A plain cross at the bottom centre, drawn from two thin strokes. */
.gallery-close { position: relative; flex: none; width: 44px; height: 44px; }
.gallery-close::before, .gallery-close::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 22px; height: 1.5px;
  background: currentColor; transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.gallery-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.gallery-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.gallery-close:hover::before { transform: translate(-50%, -50%) rotate(135deg); }
.gallery-close:hover::after { transform: translate(-50%, -50%) rotate(45deg); }
.gallery-description { width: min(100%, 440px); min-height: 0; overflow: hidden; text-align: center; }
.gallery-project-name { font-size: 13px; font-weight: 500; }
#gallery-category { color: #777; margin-top: 3px; font-size: 12px; }
#gallery-description { margin-top: 9px; font-size: 12px; color: #777; line-height: 1.7; }
@media (max-width: 600px) {
  /* Height-led slides stay within a narrow screen: a 16:9 image fills about 90% of the width. */
  .project-gallery { --gallery-height: min(43svh, 50vw); }
  /* The strip is exactly as tall as the slides and sits just above the caption; the close cross stays at the bottom. */
  .gallery-viewport { top: calc(60svh - var(--gallery-height)); height: var(--gallery-height); }
  .gallery-footer { top: calc(60svh + 20px); gap: 8px; }
  .gallery-project-name { font-size: 12px; }
  #gallery-category { font-size: 10px; }
}
@media (max-height: 500px) and (min-width: 601px) {
  .project-gallery { --gallery-height: 48vh; }
  .gallery-viewport { top: 22vh; }
  .gallery-footer { top: 76vh; }
}
@media (prefers-reduced-motion: reduce) {
  .work-home, .work-home * { scroll-behavior: auto !important; }
}