.homepage-main {
  width: 100%;
  max-width: none;
  overflow: hidden;
}

.cinematic-hero {
  height: 75svh;
  min-height: 520px;
  max-height: 760px;
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: #080808;
  color: #fff;
  isolation: isolate;
}

.hero-slides,
.hero-slides img,
.hero-previews,
.hero-previews img,
.hero-shade {
  position: absolute;
  inset: 0;
}

.hero-slides,
.hero-previews { z-index: -2; }

.hero-slides img,
.hero-previews img {
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: cover;
  will-change: opacity, transform;
}

.hero-slides img {
  animation: cinematic-dissolve 60s linear infinite;
}

.hero-previews img {
  animation: preview-ken-burns 22s linear infinite alternate;
  transition: opacity 700ms ease;
}

:is(.hero-slides, .hero-previews) img:nth-child(1) { object-position: 50% 50%; }
:is(.hero-slides, .hero-previews) img:nth-child(2) { object-position: 50% 45%; }
:is(.hero-slides, .hero-previews) img:nth-child(3) { object-position: 50% 58%; }
:is(.hero-slides, .hero-previews) img:nth-child(4) { object-position: 50% 50%; }
:is(.hero-slides, .hero-previews) img:nth-child(5) { object-position: 50% 46%; }

.hero-slides img:nth-child(1) { animation-delay: 0s; }
.hero-slides img:nth-child(2) { animation-delay: 12s; }
.hero-slides img:nth-child(3) { animation-delay: 24s; }
.hero-slides img:nth-child(4) { animation-delay: 36s; }
.hero-slides img:nth-child(5) { animation-delay: 48s; }

.hero-shade {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .4) 49%, rgba(0, 0, 0, .16) 78%),
    linear-gradient(0deg, rgba(0, 0, 0, .72) 0%, transparent 35%, rgba(0, 0, 0, .16) 100%);
}

.hero-copy {
  width: min(1040px, calc(100% - 40px));
  margin: -55px auto 0;
}

.hero-copy h1 {
  max-width: 900px;
  margin: 0;
  color: #fff;
  font-size: clamp(4.8rem, 11vw, 9.4rem);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: .78;
  text-shadow: 0 3px 24px rgba(0, 0, 0, .72), 0 1px 2px rgba(0, 0, 0, .8);
}

.hero-copy h1 span {
  display: block;
  margin-top: .26em;
  font-size: .38em;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1;
}

.hero-parts {
  width: min(1040px, calc(100% - 40px));
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .46);
}

.hero-parts a {
  min-width: 0;
  padding: 18px 16px 21px;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(.78rem, 1.1vw, .95rem);
  font-weight: 600;
  line-height: 1.15;
  text-decoration: none;
  text-shadow: 0 1px 8px #000;
  transition: background-color 180ms ease, color 180ms ease;
}

.hero-parts a + a { border-left: 1px solid rgba(255, 255, 255, .3); }
.hero-parts a:hover,
.hero-parts a:focus-visible,
.hero-parts a.is-previewing { background: rgba(0, 0, 0, .42); color: #fff; }
.hero-parts a:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }

.hero-parts span {
  display: block;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, .7);
  font-size: .72rem;
  letter-spacing: .12em;
}

.cinematic-hero[data-preview="1"] .hero-previews img:nth-child(1),
.cinematic-hero[data-preview="2"] .hero-previews img:nth-child(2),
.cinematic-hero[data-preview="3"] .hero-previews img:nth-child(3),
.cinematic-hero[data-preview="4"] .hero-previews img:nth-child(4),
.cinematic-hero[data-preview="5"] .hero-previews img:nth-child(5) {
  opacity: 1;
}

@keyframes cinematic-dissolve {
  0% { opacity: 0; transform: scale(1.02) translate3d(-1%, 0, 0); }
  1.5% { opacity: 1; }
  19% { opacity: 1; }
  21% { opacity: 0; transform: scale(1.13) translate3d(1.5%, -1%, 0); }
  100% { opacity: 0; transform: scale(1.13) translate3d(1.5%, -1%, 0); }
}

@keyframes preview-ken-burns {
  from { transform: scale(1.02) translate3d(-.25%, 0, 0); }
  to { transform: scale(1.075) translate3d(.75%, -.5%, 0); }
}

.homepage-index {
  width: min(1040px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(270px, 1fr) minmax(480px, 1.55fr);
  gap: clamp(50px, 8vw, 110px);
  padding: clamp(76px, 10vw, 130px) 0;
}

.index-note { max-width: 390px; color: var(--muted); font-size: 1.12rem; line-height: 1.6; }
.index-links { border-top: 1px solid var(--line); }

.index-links a {
  display: grid;
  grid-template-columns: minmax(100px, .55fr) minmax(240px, 1.45fr) auto;
  gap: 20px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.index-links strong { font-size: 1.5rem; }
.index-links small { color: var(--muted); font-size: 1rem; line-height: 1.45; }
.index-links b { color: var(--primary); font-size: 1.35rem; }
.index-links a:hover strong { color: var(--primary); }

.image-credits {
  width: min(1040px, calc(100% - 40px));
  margin: -52px auto 56px;
  color: var(--muted);
  font-size: .76rem;
}
.image-credits h2 { margin: 0 0 6px; color: var(--text); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
.image-credits p { margin: 0; }

@media (max-width: 720px) {
  .cinematic-hero { height: 75svh; min-height: 560px; }
  .hero-copy { margin-top: -100px; }
  .hero-copy h1 { font-size: clamp(3.9rem, 19vw, 6rem); line-height: .82; }
  .hero-shade { background: linear-gradient(0deg, rgba(0,0,0,.8), rgba(0,0,0,.22) 82%); }
  .hero-parts { width: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hero-parts a { min-width: 0; padding: 15px 7px 17px; font-size: clamp(.64rem, 2.55vw, .76rem); }
  .hero-parts span { margin-bottom: 6px; font-size: .62rem; letter-spacing: .08em; }
  .homepage-index { grid-template-columns: 1fr; gap: 36px; }
  .index-links a { grid-template-columns: 1fr auto; gap: 10px 14px; }
  .index-links small { grid-column: 1 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slides img { opacity: 0; animation: none; transform: none; }
  .hero-slides img:first-child { opacity: 1; }
  .hero-previews img { animation: none !important; transform: none; }
}