:root {
  --ink: #1a1410;
  --ink-soft: #3b3228;
  --bottle: #14110e;
  --bottle-mid: #221a14;
  --accent: #c47a2a;
  --accent-text: #8b3a1a;
  --accent-bright: #e09a4a;
  --parchment: #f4efe6;
  --cream: #f7f2e9;
  --paper: #e8dcc8;
  --muted: #5c5348;
  --tint: #2a1a12;
}

.hero-media img {
  object-position: center 42%;
  bottom: auto;
  height: 58%;
}

.hero-media::after {
  background:
    linear-gradient(180deg, rgba(20, 17, 14, 0.48) 0%, rgba(20, 17, 14, 0.32) 18%, rgba(20, 17, 14, 0.38) 38%, rgba(20, 17, 14, 0.72) 52%, var(--bottle) 64%);
}

@media (min-width: 840px) {
  .hero {
    align-items: center;
  }

  .hero-media img {
    inset: 0;
    height: 100%;
    object-position: 12% 46%;
    transform: scale(1.08);
    transform-origin: 16% 48%;
  }

  .hero-media::after {
    background:
      linear-gradient(90deg, rgba(20, 17, 14, 0.78) 0%, rgba(20, 17, 14, 0.52) 28%, rgba(20, 17, 14, 0.28) 54%, rgba(20, 17, 14, 0.16) 100%),
      linear-gradient(180deg, rgba(20, 17, 14, 0.48) 0%, rgba(20, 17, 14, 0.36) 24%, rgba(20, 17, 14, 0.4) 58%, rgba(20, 17, 14, 0.62) 100%);
  }

  .hero-copy {
    width: min(26.5rem, 34vw);
    margin: 0 auto 0 calc((100vw - min(var(--full), calc(100vw - var(--gutter) * 2))) / 2);
    padding: calc(var(--header-offset) + 0.5rem) 0 2rem;
  }

  .hero .display {
    font-size: clamp(3.2rem, 4vw, 5.2rem);
  }

  .hero .measure {
    max-width: 28ch;
  }
}

@media (min-width: 1200px) {
  .hero-media img {
    object-position: 0% 48%;
    transform: scale(1.18);
    transform-origin: 8% 48%;
  }

  .hero-copy {
    width: min(26.5rem, 32vw);
  }
}

.friends-photo {
  margin: 0;
}

.friends-photo-media {
  aspect-ratio: 1024 / 723;
}

.friends-photo-media img {
  object-position: center 38%;
}

.friends-photo figcaption {
  margin-top: 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.bar > span {
  background: linear-gradient(90deg, var(--accent-text), var(--accent-bright));
}

.section-tint {
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 30%),
    #1b1410;
}

.cask.is-on {
  box-shadow: inset 0 0 0 1px var(--accent-bright);
}