/* The home selection forms an offset editing ribbon. */
.home-gallery { --gallery-stagger: 32px; }
.home-gallery .featured-project { width: 93%; margin-inline-start: auto; }
.home-gallery .project-carousel { margin-top: 46px; }
.home-gallery .carousel-track { align-items: stretch; gap: clamp(24px, 2.4vw, 36px); padding: 20px 8px calc(18px + var(--gallery-stagger)); scroll-padding-inline: 8px; }
.home-gallery .carousel-track .project-card:nth-child(even) { top: var(--gallery-stagger); }
.home-gallery .carousel-track .project-scroll-scene { height: 100%; }
.home-gallery .carousel-track .project-info { position: relative; z-index: 3; flex: 1; min-height: 132px; margin: -24px 14px 0 0; padding: 16px 20px 18px; gap: 8px; border-top-right-radius: 12px; }
.home-gallery .carousel-track .project-info > div { flex-direction: column; gap: 9px; }
.home-gallery .carousel-track .project-info h3 { font-size: clamp(17px, 5.1cqi, 19px); line-height: 1.24; }
.home-gallery .carousel-track:has(.project-card--poster) { align-items: flex-start; }
.home-gallery .carousel-track .project-card--poster { flex-basis: clamp(190px, 17vw, 220px); }
.home-gallery .carousel-track .project-card--poster .project-scroll-scene { height: auto; }
.home-gallery .carousel-track .project-card--poster .project-info { flex: none; min-height: 0; margin: 0; padding: 14px 16px 16px; border-top-right-radius: 0; }
.home-gallery .carousel-track .project-card--poster .project-info h3 { font-size: 15px; line-height: 1.28; }
.home-gallery .carousel-end-card { align-self: stretch; min-height: 270px; }
.home-gallery .is-scroll-driven .carousel-track::before { flex-basis: 24%; }
.js .home-gallery .carousel-track .project-card.reveal { translate: 48px 16px; clip-path: none; transition: opacity .65s var(--ease), translate .85s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
.js .home-gallery .carousel-track .project-card.reveal.visible,
.js .home-gallery .carousel-track .project-card.reveal:focus-within { opacity: 1; translate: 0 0; clip-path: none; }
.home-gallery .carousel-track h3 .motion-word { animation: none; }
.home-gallery .carousel-track .project-card:focus-within h3 .motion-word { animation: gallery-title-focus .42s var(--ease) both; animation-delay: var(--word-delay, 0s); }
@keyframes gallery-title-focus {
  from { opacity: .65; transform: translate3d(0, 7px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Two focus marks sit above the media without capturing pointer events. */
.home-gallery .project-visual::before,
.home-gallery .project-visual::after { content: ''; position: absolute; z-index: 2; width: 22px; height: 22px; opacity: 0; border: 1.5px solid var(--blue-light); pointer-events: none; transition: opacity .35s var(--ease), transform .55s var(--ease); }
.home-gallery .project-visual::before { top: 20px; left: 20px; border-right: 0; border-bottom: 0; transform: translate3d(-7px, -7px, 0); }
.home-gallery .project-visual::after { right: 20px; bottom: 42px; border-left: 0; border-top: 0; transform: translate3d(7px, 7px, 0); }
.home-gallery .project-card--featured .project-visual::before { top: 72px; left: 32px; }
.home-gallery .project-card--featured .project-visual::after { right: 32px; bottom: 32%; }
.home-gallery .project-visual:focus-visible::before,
.home-gallery .project-visual:focus-visible::after { opacity: 1; transform: translate3d(0, 0, 0); }
@media (hover: hover) and (pointer: fine) {
  .home-gallery .carousel-track .project-card:hover h3 .motion-word { animation: gallery-title-focus .42s var(--ease) both; animation-delay: var(--word-delay, 0s); }
  .home-gallery .project-visual:hover::before,
  .home-gallery .project-visual:hover::after { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 760px) {
  .home-gallery { --gallery-stagger: 0px; }
  .home-gallery .featured-project { width: 100%; }
  .home-gallery .project-carousel { margin-top: 32px; }
  .home-gallery .carousel-track { gap: 18px; padding-block: 12px 16px; }
  .home-gallery .carousel-track .project-info { min-height: 132px; margin-top: -18px; margin-right: 10px; }
  .home-gallery .carousel-track .project-info h3 { font-size: clamp(16px, 5.2cqi, 18px); }
  .home-gallery .carousel-track .project-card--poster { flex-basis: min(64vw, 245px); }
  .home-gallery .project-card--featured .project-visual::before { top: 56px; left: 20px; }
  .home-gallery .project-card--featured .project-visual::after { right: 20px; bottom: 24px; }
  .js .home-gallery .carousel-track .project-card.reveal { translate: 20px 8px; }
  .js .home-gallery .carousel-track .project-card.reveal.visible,
  .js .home-gallery .carousel-track .project-card.reveal:focus-within { translate: 0 0; }
}
@media (max-height: 680px) and (min-width: 761px) {
  .home-gallery { --gallery-stagger: 20px; }
  .home-gallery .carousel-track { padding-block: 12px calc(12px + var(--gallery-stagger)); }
}
@media (prefers-reduced-motion: reduce) {
  .js .home-gallery .carousel-track .project-card.reveal { opacity: 1; translate: none; transition: none; }
  .home-gallery .project-visual::before,
  .home-gallery .project-visual::after { transform: none; transition: none; }
  .home-gallery .carousel-track .project-card h3 .motion-word { animation: none !important; }
}