/* Round 3 only: the reference variants keep their original CSS and JavaScript. */
.gallery-page .hero-gallery { height: 400vh; min-height: 0; }
.gallery-page .gallery-pin { height: 100vh; min-height: 0; }
.gallery-page { --phone-width: 190px; --phone-height: calc(var(--phone-width) * 18.2 / 9); }
.gallery-viewport { position: absolute; inset: 0; perspective: 1200px; overflow: hidden; touch-action: pan-y; user-select: none; cursor: grab; }
.gallery-viewport:focus-visible { outline: 1px solid #777; outline-offset: -8px; }
.gallery-viewport.is-dragging { cursor: grabbing; }
.gallery-track { position: absolute; top: 50%; left: 0; display: flex; align-items: center; gap: 96px; width: max-content; transform: translate3d(20px,-50%,0); will-change: transform; }
.gallery-group { position: relative; display: flex; align-items: center; gap: 32px; flex: none; height: var(--phone-height); }
.product-card { display: block; position: relative; flex: none; width: var(--phone-width); aspect-ratio: 9 / 18.2; perspective: 1200px; transform-origin: center; }
.product-card .card-art { display: block; width: 100%; height: 100%; transform: rotateY(var(--card-angle, -12deg)); transition: transform 300ms var(--ease); }
.product-card .card-art > img { width: 100%; height: 100%; object-fit: contain; }
.product-card:hover .card-art, .product-card:focus-visible .card-art { transform: translateY(-10px) rotateY(0deg); }
.product-card:focus-visible { outline: 1px solid #fff; outline-offset: 8px; }
.product-card.cover-card { width: 200px; aspect-ratio: 2 / 3; }
.product-card.cover-card img, .product-card.landscape-card img { border-radius: 9px; }
.product-card.identity-card { aspect-ratio: 2 / 3; }
.product-card.landscape-card { width: 360px; aspect-ratio: 16 / 9; }
/* Before the first paint only the large, centred White Nights reader is visible. */
.gallery-group:not(:first-child), .gallery-group:first-child .product-card:not(:first-child), .group-link { opacity: 0; }
.group-link { position: absolute; top: calc(100% + 18px); left: 0; font-size: 13px; white-space: nowrap; }
.gallery-caption { position: absolute; left: 20px; right: 20px; top: calc(50% + var(--phone-height) / 2 + 58px); pointer-events: none; opacity: 0; color: #aaa; min-height: 40px; }
.gallery-caption span { position: absolute; inset: 0; transition: opacity 300ms var(--ease); }
.gallery-caption span.is-leaving { opacity: 0; }
.gallery-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: #222; }
.gallery-progress span { display: block; width: 100%; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.identity-tile { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #141414; color: white; border-radius: 9px; }
.identity-tile img { width: 96px; height: 96px; margin-bottom: 20px; }
.tile-title { font-size: 20px; }
.tile-meta { font-size: 13px; color: #999; margin-top: 6px; white-space: nowrap; }
.yatra-tile { background: #1b1b1b; }
.products { padding: 48px 20px 0; scroll-margin-top: 96px; }
.product-section { border-top: 1px solid var(--hairline); padding: 120px 0; scroll-margin-top: 96px; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); column-gap: 20px; }
.product-copy { grid-column: span 4; padding-right: 28px; }
.product-copy h2 { display: flex; align-items: center; gap: 12px; font-size: 32px; }
.product-role { margin-top: 16px; color: var(--muted); font-size: 13px; }
.product-description { margin-top: 28px; max-width: 48ch; }
.product-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 28px; font-size: 13px; }
.product-links a { text-decoration: underline; text-underline-offset: 4px; }
.product-screens { grid-column: span 8; min-width: 0; }
.screen-row { display: flex; align-items: flex-start; gap: 24px; max-width: 100%; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #ccc transparent; padding: 0 0 16px; }
.screen-row figure { margin: 0; flex: none; }
.screen-row .phone-image { width: 100%; height: auto; aspect-ratio: 9 / 18.2; }
.kafka-primary figure { width: 260px; }
.kafka-secondary { margin-top: 32px; }
.kafka-secondary figure { width: 150px; }
.product-screens figcaption { font-size: 13px; color: var(--muted); margin-top: 16px; }
@media (max-width: 900px) {
  .product-section { grid-template-columns: 1fr; row-gap: 48px; }
  .product-copy, .product-screens { grid-column: auto; }
  .product-copy { padding-right: 0; }
}
@media (max-width: 600px) {
  .gallery-page { --phone-width: 150px; }
  .product-card.cover-card { width: 150px; }
  .product-card.landscape-card { width: 280px; }
  .product-card .tile-meta { font-size: 13px; white-space: normal; text-align: center; padding: 0 6px; }
  .identity-card .identity-tile img { width: 96px; height: 96px; margin-bottom: 14px; }
  .gallery-caption { top: calc(50% + var(--phone-height) / 2 + 58px); }
  .gallery-page .hero-meta p:first-child { max-width: 225px; }
  .products { padding-top: 48px; }
  .product-section { padding-top: 120px; padding-bottom: 72px; }
  .gallery-page .footer-email { font-size: 28px; }
}
@media (max-height: 740px) and (min-width: 601px) {
  .gallery-page { --phone-width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-page .hero-gallery { height: 100vh; }
  .gallery-viewport { overflow-x: auto; touch-action: auto; cursor: auto; }
  .gallery-track { position: relative; margin: 0 20px; transform: translateY(-50%); will-change: auto; }
  .gallery-group:not(:first-child), .gallery-group:first-child .product-card:not(:first-child), .group-link, .gallery-caption { opacity: 1; }
  .product-card:hover .card-art, .product-card:focus-visible .card-art { transform: rotateY(-12deg); }
}
/* Keep pinned text in its own composited layer while the wide track scrubs. */
.gallery-page .header, .gallery-page .hero-headline, .gallery-page .hero-meta { transform: translateZ(0); }

.work-soon { margin: 0 20px; padding: 28px 0 72px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 13px; scroll-margin-top: 96px; }
.gallery-footer { height: 200px; }
.gallery-footer nav { display: flex; gap: 24px; }
.gallery-page .statement { scroll-margin-top: 96px; }