/* Title first, surrounded by a loose editorial contact sheet. */
.hero.hero-collage {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 820px;
  padding: 110px 26% 130px;
  isolation: isolate;
}
.hero-collage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at center, #ed427f0b, transparent 65%);
}
.hero-collage .hero-copy {
  position: relative;
  z-index: 3;
  text-align: center;
  transform: none;
}
.hero-collage .eyebrow { justify-content: center; font-size: 9px; letter-spacing: 1.8px; }
.hero-collage h1 { font-size: clamp(22px, 2.3vw, 34px); letter-spacing: -.06em; margin-bottom: 25px; }
.hero-collage .hero-english {
  font-size: clamp(64px, 7.5vw, 112px);
  letter-spacing: -.065em;
  line-height: .91;
  margin: auto;
}
.hero-collage .hero-english br { display: block; }
.hero-collage .hero-english i { margin-left: 0; }
.hero-collage .spark { top: -32px; right: -20px; font-size: 42px; }
.hero-collage .intro { font-size: 16px; margin: 26px 0 22px; letter-spacing: .14em; }
.hero-collage .pill { background: var(--ink); color: var(--paper); box-shadow: none; }
.hero-collage .pill:hover { background: var(--pink); border-color: var(--pink); }
.hero-collage .hero-bottom { color: #78776f; font-size: 7px; }
.hero-collage .hero-art { position: absolute; inset: 25px 3% 28px; pointer-events: none; }
.hero-collage .photo-grid {
  position: absolute;
  inset: 0 0 55px;
  display: block;
  padding: 0;
  transform: none;
}
.hero-collage .hero-portrait {
  position: absolute;
  width: 16%;
  height: 245px;
  aspect-ratio: auto;
  padding: 6px;
  border: 1px solid #292b2420;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 12px 30px #292b2412;
  transform: rotate(var(--tilt, 0deg));
  pointer-events: auto;
  transition: transform .35s, box-shadow .35s;
  animation: collage-float var(--float-duration, 10s) ease-in-out var(--float-delay, 0s) infinite alternate;
  touch-action: pan-y pinch-zoom;
}
.hero-collage .hero-portrait[data-slot="1"] { left: 1%; top: 5%; width: 13%; height: 195px; --tilt: -9deg; z-index: 1; }
.hero-collage .hero-portrait[data-slot="2"] { left: 12%; top: 0%; width: 12%; height: 170px; --tilt: 7deg; z-index: 2; }
.hero-collage .hero-portrait[data-slot="3"] { left: 17%; top: 23%; width: 11%; height: 160px; --tilt: -5deg; z-index: 3; }
.hero-collage .hero-portrait[data-slot="4"] { left: 0%; top: 34%; width: 14%; height: 210px; --tilt: 5deg; z-index: 1; }
.hero-collage .hero-portrait[data-slot="5"] { left: 12%; top: 43%; width: 12%; height: 180px; --tilt: -8deg; z-index: 2; }
.hero-collage .hero-portrait[data-slot="6"] { left: 2%; top: 65%; width: 13%; height: 200px; --tilt: -6deg; z-index: 3; }
.hero-collage .hero-portrait[data-slot="7"] { left: 16%; top: 73%; width: 11%; height: 155px; --tilt: 9deg; z-index: 1; }
.hero-collage .hero-portrait[data-slot="8"] { left: 7%; top: 17%; width: 12%; height: 175px; --tilt: 12deg; z-index: 2; }
.hero-collage .hero-portrait[data-slot="9"] { left: 6%; top: 52%; width: 11%; height: 165px; --tilt: -12deg; z-index: 3; }
.hero-collage .hero-portrait[data-slot="10"] { left: 20%; top: 5%; width: 9%; height: 140px; --tilt: -10deg; z-index: 1; }
.hero-collage .hero-portrait[data-slot="11"] { right: 1%; top: 5%; width: 13%; height: 195px; --tilt: -9deg; z-index: 2; }
.hero-collage .hero-portrait[data-slot="12"] { right: 12%; top: 0%; width: 12%; height: 170px; --tilt: 7deg; z-index: 3; }
.hero-collage .hero-portrait[data-slot="13"] { right: 17%; top: 23%; width: 11%; height: 160px; --tilt: -5deg; z-index: 1; }
.hero-collage .hero-portrait[data-slot="14"] { right: 0%; top: 34%; width: 14%; height: 210px; --tilt: 5deg; z-index: 2; }
.hero-collage .hero-portrait[data-slot="15"] { right: 12%; top: 43%; width: 12%; height: 180px; --tilt: -8deg; z-index: 3; }
.hero-collage .hero-portrait[data-slot="16"] { right: 2%; top: 65%; width: 13%; height: 200px; --tilt: -6deg; z-index: 1; }
.hero-collage .hero-portrait[data-slot="17"] { right: 16%; top: 73%; width: 11%; height: 155px; --tilt: 9deg; z-index: 2; }
.hero-collage .hero-portrait[data-slot="18"] { right: 7%; top: 17%; width: 12%; height: 175px; --tilt: 12deg; z-index: 3; }
.hero-collage .hero-portrait[data-slot="19"] { right: 6%; top: 52%; width: 11%; height: 165px; --tilt: -12deg; z-index: 1; }
.hero-collage .hero-portrait[data-slot="20"] { right: 20%; top: 5%; width: 9%; height: 140px; --tilt: -10deg; z-index: 2; }
.hero-collage .hero-portrait[data-slot="21"] { right: 19%; top: 54%; width: 10%; height: 145px; --tilt: 6deg; z-index: 3; }
.hero-collage .hero-portrait:hover { animation-play-state: paused; transform: rotate(0deg) translateY(-6px); box-shadow: 0 18px 35px #292b2425; z-index: 4; }
.hero-collage .hero-portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 35%;
  scale: 1; transform: none; border-radius: 1px;
}
.hero-collage .hero-portrait .collage-incoming { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
.hero-collage .hero-portrait span { display: none; }
.collage-controls {
  position: absolute; bottom: 5px; left: 0; display: flex;
  align-items: center; gap: 18px; pointer-events: auto;
}
.collage-controls > span { font-size: 8px; letter-spacing: 1.5px; }
.collage-pause { border: 1px solid #292b2430; background: transparent; border-radius: 30px; padding: 9px 13px; font-size: 10px; }
.collage-pause:hover { background: white; }
.hero-collage .art-caption { position: absolute; bottom: 15px; right: 0; gap: 22px; margin: 0; padding: 0; pointer-events: auto; }
@media (max-width: 1000px) {
  .hero.hero-collage { min-height: auto; flex-direction: column; padding: 65px 6% 28px; gap: 38px; }
  .hero-collage .hero-copy { width: 100%; }
  .hero-collage .hero-english { font-size: clamp(68px, 12vw, 105px); }
  .hero-collage .hero-art { position: relative; inset: auto; width: 100%; }
  .hero-collage .photo-grid { position: relative; inset: auto; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; padding: 12px 0 25px; }
  .hero-collage .hero-portrait[data-slot] { position: relative; inset: auto; width: 120%; height: auto; aspect-ratio: .72; --tilt: -6deg; margin: -4px -10%; }
  .hero-collage .hero-portrait[data-slot]:nth-of-type(even) { --tilt: 3deg; }
  .hero-collage .hero-portrait span { font-size: 8px; padding-inline: 4px; }
  .hero-collage .hero-portrait b { display: none; }
  .collage-controls { position: relative; bottom: auto; justify-content: space-between; margin-top: 16px; }
  .hero-collage .art-caption { position: relative; bottom: auto; margin-top: 16px; justify-content: space-between; }
}
@media (max-width: 700px) {
  .hero.hero-collage { padding: 38px 9% 28px 6%; gap: 23px; }
  .hero-collage .eyebrow { font-size: 7px; letter-spacing: 1px; margin-bottom: 14px; }
  .hero-collage h1 { font-size: clamp(21px, 6vw, 30px); margin-bottom: 18px; }
  .hero-collage .hero-english { font-size: clamp(48px, 16vw, 92px); }
  .hero-collage .spark { font-size: 30px; right: -13px; top: -22px; }
  .hero-collage .intro { font-size: 12px; margin: 16px 0; }
  .hero-collage .hero-copy > .pill { display: inline-flex; font-size: 11px; padding: 13px 18px; gap: 18px; }
  .hero-collage .hero-bottom { display: none; }
  .hero-collage .photo-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 16px 3% 30px; }
  .hero-collage .hero-portrait[data-slot] { aspect-ratio: .72; padding: 3px; }
  .hero-collage .hero-portrait[data-slot="21"] { grid-column: 3; grid-row: 4; top: 24px; left: 12px; --tilt: 12deg; z-index: 4; }
  .hero-collage .hero-portrait span { left: 3px; right: 3px; bottom: 3px; font-size: 8px; }
  .hero-collage .hero-portrait .collage-incoming { inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); }
  .hero-collage .art-caption { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-collage .spark { animation: none; }
  .hero-collage .hero-portrait { transition: none; animation: none; }
}

@keyframes collage-float {
  from { translate: -3px -6px; rotate: -1.5deg; }
  to { translate: 4px 7px; rotate: 1.5deg; }
}
.hero-collage .photo-grid.is-paused .hero-portrait { animation-play-state: paused; }
.hero-collage .hero-portrait:focus-visible { z-index: 5; }

/* Explicit cells let the last photo overlap the fourth row without adding a row. */
@media (max-width: 700px) {
  .hero-collage .hero-portrait[data-slot="1"] { grid-column: 1; grid-row: 1; }
  .hero-collage .hero-portrait[data-slot="2"] { grid-column: 2; grid-row: 1; }
  .hero-collage .hero-portrait[data-slot="3"] { grid-column: 3; grid-row: 1; }
  .hero-collage .hero-portrait[data-slot="4"] { grid-column: 4; grid-row: 1; }
  .hero-collage .hero-portrait[data-slot="5"] { grid-column: 5; grid-row: 1; }
  .hero-collage .hero-portrait[data-slot="6"] { grid-column: 1; grid-row: 2; }
  .hero-collage .hero-portrait[data-slot="7"] { grid-column: 2; grid-row: 2; }
  .hero-collage .hero-portrait[data-slot="8"] { grid-column: 3; grid-row: 2; }
  .hero-collage .hero-portrait[data-slot="9"] { grid-column: 4; grid-row: 2; }
  .hero-collage .hero-portrait[data-slot="10"] { grid-column: 5; grid-row: 2; }
  .hero-collage .hero-portrait[data-slot="11"] { grid-column: 1; grid-row: 3; }
  .hero-collage .hero-portrait[data-slot="12"] { grid-column: 2; grid-row: 3; }
  .hero-collage .hero-portrait[data-slot="13"] { grid-column: 3; grid-row: 3; }
  .hero-collage .hero-portrait[data-slot="14"] { grid-column: 4; grid-row: 3; }
  .hero-collage .hero-portrait[data-slot="15"] { grid-column: 5; grid-row: 3; }
  .hero-collage .hero-portrait[data-slot="16"] { grid-column: 1; grid-row: 4; }
  .hero-collage .hero-portrait[data-slot="17"] { grid-column: 2; grid-row: 4; }
  .hero-collage .hero-portrait[data-slot="18"] { grid-column: 3; grid-row: 4; }
  .hero-collage .hero-portrait[data-slot="19"] { grid-column: 4; grid-row: 4; }
  .hero-collage .hero-portrait[data-slot="20"] { grid-column: 5; grid-row: 4; }
}