/* The brewing page keeps its existing typography and opening treatment. */
.hero {
  display: block;
  min-height: 0;
  overflow: visible;
  background: #121315;
  isolation: isolate;
  --hero-copy-opacity: 1;
  --hero-copy-shift: 0px;
  --hero-video-opacity: 0;
  --hero-video-scale: 1;
  --hero-shade-opacity: 1;
}

.hero__sticky {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 100svh;
  overflow: hidden;
}

.hero--animated { height: 280svh; }
.hero--animated .hero__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
}

.hero__poster, .hero__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.hero__poster { opacity: calc(1 - var(--hero-video-opacity)); }
.hero__video {
  z-index: 1;
  object-fit: cover;
  object-position: center;
  opacity: var(--hero-video-opacity);
  transform: scale(var(--hero-video-scale));
  transform-origin: center;
}
.hero__shade {
  z-index: 2;
  pointer-events: none;
  opacity: var(--hero-shade-opacity);
}
.hero__content {
  z-index: 3;
  opacity: var(--hero-copy-opacity);
  transform: translateY(var(--hero-copy-shift));
}

/* Reveal the complete landscape scene as a visitor scrolls on a tall screen. */
@media (max-aspect-ratio: 4 / 3) {
  .hero__video { object-fit: contain; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero--animated { height: auto; }
  .hero--animated .hero__sticky {
    position: relative;
    height: auto;
    min-height: 100svh;
  }
  .hero__video { display: none; }
}