/* Launch system: spotlight, statement, footnotes. Rounded rem: 1rem = 10px. */
.me-anchor { display: block; position: relative; top: -7rem; visibility: hidden; }
html { scroll-behavior: smooth; }

/* Spotlight: a still photograph. The sticky header would cover the title, so it scrolls away here. */
html:has(.me-spot) .section-header.shopify-section-header-sticky { position: relative; }
.me-spot { position: relative; background: var(--color-ink); }
.me-spot__stage { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.me-spot__media { position: absolute; inset: 0; }
.me-spot__media .me-placeholder { width: 100%; height: 100%; }
.me-spot__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.me-spot__intro { position: relative; z-index: 1; width: 100%; text-align: center; padding-top: clamp(4rem, 9vh, 9.6rem); color: var(--color-paper); }
.me-spot__title { margin: 0; color: inherit; }
.me-spot__sub { margin: 1.2rem 0 0; color: inherit; font-weight: var(--me-weight-heading-light); }
.me-spot__price { margin: 1.2rem 0 0; font-size: 1.4rem; opacity: 0.86; }
.me-spot__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; margin-top: 2.4rem; }
.me-spot__actions .button--primary { --color-button: var(--color-paper-rgb); --color-button-text: var(--color-ink-rgb); }
@media screen and (min-width: 750px) {
  /* The floor in rem keeps the bottle clear of the fixed-height copy on short laptop screens. */
  .me-spot__media { top: max(26%, 30rem); }
  .me-spot__intro { padding-top: clamp(3.2rem, 6vh, 6.4rem); }
  .me-spot__image { object-position: center 45%; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%); mask-image: linear-gradient(to bottom, transparent, #000 14%); }
}
@media screen and (max-width: 749px) {
  .me-spot__media { top: 38%; }
  .me-spot__image { object-position: center; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%); mask-image: linear-gradient(to bottom, transparent, #000 22%); }
}

/* Short statement */
.me-lit__eyebrow { margin: 0 0 2.4rem; }
.me-lit__text { margin: 0; max-width: 24ch; color: rgb(var(--color-foreground)); }
@media screen and (min-width: 990px) { .me-lit__text { max-width: 30ch; } }

/* Footnotes */
.me-notes { padding-block: 3.2rem; border-top: 1px solid var(--color-mist); }
.me-notes__text, .me-notes__text p { font-size: 1.3rem; line-height: 1.6; max-width: 80ch; }
.me-notes__text p { margin: 0 0 0.8rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}