/* Casa M'xuma — global styles
   Patterns reconciled with existing-assets/coming-soon.html and terms.html. */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--color-char);
  color: var(--color-ash);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

body.is-locked {
  overflow: hidden;
}

/* Atmospheric overlays — present site-wide at low opacity. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--grain-svg);
  opacity: var(--grain-opacity);
  pointer-events: none;
  z-index: 100;
  mix-blend-mode: overlay;
}

body::after {
  content: '';
  position: fixed;
  /* Inset from the top by the header height so the glow lives strictly
     BELOW the sticky header. Otherwise the header's backdrop-filter
     picks up the glow as part of "what's behind it" and the glow shows
     through the glass nav — wrong on pages where the nav is supposed
     to read see-through over a hero image. */
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--radial-glow-top);
  pointer-events: none;
  /* Above section images (z-index -1 inside isolated section contexts),
     below the sticky header (60), drawer overlay (49), and grain (100). */
  z-index: 10;
  mix-blend-mode: screen;
}

/* Reset img / media defaults */
img,
picture,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-ember);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-expo-out),
              border-color var(--duration-fast) var(--ease-expo-out);
}

a:hover,
a:focus-visible {
  color: var(--color-ember-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 1px solid var(--color-ember);
  outline-offset: 3px;
}

::selection {
  background: var(--color-ember);
  color: var(--color-char);
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-cream);
}

p {
  margin: 0 0 var(--space-4);
}

/* The brand wordmark: italic ember "M'xuma" inside the wordmark text. */
.wordmark em,
.brand em,
em.brand-em {
  font-style: italic;
  color: var(--color-ember);
}

/* Cinzel uppercase labels — eyebrows above headlines, form labels, footer text */
.label {
  font-family: var(--font-label);
  font-size: var(--font-size-micro);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-ember);
  display: inline-block;
}

.label--muted {
  color: rgba(245, 239, 230, 0.6);
}

/* The ◆ diamond accent character */
.accent-diamond {
  color: var(--color-ember);
  font-size: 0.85em;
  display: inline-block;
}

/* Ember-fade horizontal divider */
.rule-ember {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
}
.rule-ember::before,
.rule-ember::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(196, 122, 43, 0.5), transparent);
}

/* Editorial ornament — centered fading rule with a small ember diamond
   in the middle. Use as a deliberate book-design transition between
   sections (closing lines, pull-quotes, major editorial pivots). Apply
   margin-block in the parent context to control spacing.
   Markup: <div class="ornament" aria-hidden="true"></div> */
.ornament {
  position: relative;
  width: 140px;
  height: 12px;
  margin-inline: auto;
}
.ornament::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(196, 122, 43, 0.55) 50%,
    transparent 100%);
}
.ornament::after {
  content: '◆';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  line-height: 1;
  color: var(--color-ember);
  /* Pulls the diamond background from the page bg so the rule appears
     to pass behind it. Set --ornament-bg in the parent if the section
     has a non-default background (e.g. a band section). */
  background: var(--ornament-bg, var(--color-bg-deep));
  padding: 0 8px;
}

/* Spacing for the ornament inside closing sections. The italic line
   above the ornament already carries a 4rem bottom-margin (3rem on
   cocktails where a body paragraph sits between), so the ornament
   only needs to add matching space BELOW itself — symmetric breathing
   room around the diamond rule. */
.story-closing .ornament,
.process-closing .ornament,
.find-closing .ornament {
  margin-top: 0;
  margin-bottom: var(--space-16);
}
.cocktails-closing .ornament {
  margin-top: 0;
  margin-bottom: var(--space-12);
}

.rule-thin {
  width: 100%;
  height: 1px;
  background: var(--color-border);
  border: 0;
}

/* --- Layout primitives --- */
.container {
  width: 100%;
  max-width: var(--max-content-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
  position: relative;
  z-index: 10;
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-8); }
}

@media (min-width: 1024px) {
  .container { padding-inline: var(--space-12); }
}

.section {
  padding-block: var(--space-24);
  position: relative;
  z-index: 10;
}

@media (min-width: 1024px) {
  .section { padding-block: var(--space-32); }
}

/* Visually hidden helper */
.visually-hidden {
  position: absolute !important;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-label);
  font-size: var(--font-size-micro);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border: 1px solid;
  cursor: pointer;
  transition: background var(--duration-fast),
              color var(--duration-fast),
              border-color var(--duration-fast);
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-ember);
  border-color: var(--color-ember);
  color: var(--color-char);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-ember-hover);
  border-color: var(--color-ember-hover);
  color: var(--color-char);
}

.btn--ghost {
  background: transparent;
  border-color: rgba(245, 239, 230, 0.2);
  color: rgba(245, 239, 230, 0.6);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--color-ember);
  color: var(--color-ash);
}

/* In closing CTA clusters + 404 + bottle teaser, force .btn--text
   onto its own row beneath the primary/ghost buttons. Creates a
   clearer two-tier hierarchy: two main paths above, one tertiary
   text-link below.

   Technique: an invisible pseudo-element with order:1 and 100% width
   sits between the primary/ghost items (default order 0) and the
   text-style item (order: 2), forcing a row break in between.
   The text button keeps its intrinsic width — no stretching.

   The :has() check ensures these rules only fire when a tertiary
   text CTA is actually present, so other closings are unaffected. */
.story-closing__ctas:has(.btn--text),
.process-closing__ctas:has(.btn--text),
.cocktails-closing__ctas:has(.btn--text),
.find-closing__ctas:has(.btn--text),
.error-page__ctas:has(.btn--text),
.bottle__actions:has(.btn--text) {
  display: flex;
}

.story-closing__ctas:has(.btn--text)::after,
.process-closing__ctas:has(.btn--text)::after,
.cocktails-closing__ctas:has(.btn--text)::after,
.find-closing__ctas:has(.btn--text)::after,
.error-page__ctas:has(.btn--text)::after,
.bottle__actions:has(.btn--text)::after {
  content: '';
  flex-basis: 100%;
  height: 0;
  margin: 0;
  order: 1;
}

.story-closing__ctas .btn--text,
.process-closing__ctas .btn--text,
.cocktails-closing__ctas .btn--text,
.find-closing__ctas .btn--text,
.error-page__ctas .btn--text,
.bottle__actions .btn--text {
  order: 2;
}

/* --- Tap feedback ---
   Mobile has no hover state, so cards/buttons feel "dead" when tapped
   before navigation. A subtle press-down scale on :active gives tactile
   feedback that something is happening. Touch-only via @media hover:none
   so desktop pointer interactions aren't affected. */
@media (hover: none) {
  .btn:active,
  .promise__tile:active,
  .process-step:active,
  .cocktail-card:active,
  .trade-row__item:active,
  .find-card:active,
  .recipe-card:active,
  .legal-intro__inner a:active,
  .lightbox-zoomable:active {
    transform: scale(0.98);
    transition: transform 80ms var(--ease-expo-out);
  }
}

/* --- Reveal animations ---
   Default reveal fades up. Variants below override the start transform
   so a single .reveal class with data-reveal="..." selects the motion. */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
      opacity var(--duration-reveal) var(--ease-expo-out),
      transform var(--duration-reveal) var(--ease-expo-out);
    will-change: opacity, transform;
  }

  .reveal[data-reveal="fade-in"]    { transform: none; }
  .reveal[data-reveal="fade-left"]  { transform: translate3d(-24px, 0, 0); }
  .reveal[data-reveal="fade-right"] { transform: translate3d(24px, 0, 0); }
  .reveal[data-reveal="scale-in"]   { transform: scale(0.96); }

  .reveal.is-visible,
  .reveal.is-visible[data-reveal] {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  /* Word-by-word reveal for the hero brand wordmark. Each .word starts
     hidden and slides up; transition-delay is sequenced inline by JS. */
  .word-reveal .word {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 0.4em, 0);
    transition:
      opacity var(--duration-reveal) var(--ease-expo-out),
      transform var(--duration-reveal) var(--ease-expo-out);
    will-change: opacity, transform;
  }
  .word-reveal.is-visible .word {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  .word-reveal .word + .word { margin-left: 0.25em; }

  /* Hero atmosphere parallax target — JS sets translate3d on scroll. */
  [data-parallax] { will-change: transform; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal[data-reveal],
  .word-reveal .word {
    opacity: 1;
    transform: none;
  }
}

/* --- Site header ---
   Layout (mobile):  [brand]                    [lang][menu]
   Layout (≥1024):   [brand]   [story][process][mezcal][find]   [lang]
   The mobile drawer is a slide-down panel anchored to the header. */

:root {
  --header-height: 64px;
}

@media (min-width: 768px) {
  :root { --header-height: 72px; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid transparent;
  /* iOS safe-area handling: pad the top by either the standard 16px
     or the device's safe-area inset (notch/dynamic island), whichever
     is larger. This lets the header background reach into the safe
     area zone so there's no apparent gap between Safari's URL chrome
     and the bar on iPhones. */
  padding: max(16px, env(safe-area-inset-top)) 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
  /* Required so the ::before extension band positions against the
     header itself rather than the body. */
  isolation: isolate;
  /* At top of page (over the hero image): mostly transparent on desktop
     where the backdrop-filter does the heavy lifting. iOS Safari often
     skips backdrop-filter — the mobile override below lifts the base
     background opacity to compensate. */
  background: rgba(13, 11, 9, 0.35);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  transition:
    background var(--duration-base) var(--ease-expo-out),
    border-color var(--duration-base) var(--ease-expo-out);
}

/* Extension band — fills the visual gap that iOS Safari opens above
   the sticky header while its URL bar collapses during scroll. The
   band sits above the header, scrolls with it, and is invisible on
   desktop / when the URL bar isn't transitioning. */
.site-header::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 120px;
  background: inherit;
  pointer-events: none;
  z-index: -1;
}

/* Once the user scrolls past the threshold, the header settles into a
   more solid state for legibility against the content below. */
.site-header.is-scrolled {
  background: rgba(10, 8, 6, 0.92);
  border-bottom-color: var(--color-border);
}

/* If a mobile drawer is open, lift the header background opacity so the
   nav links inside the drawer have a clean dark backing under the bar. */
.site-nav.is-open ~ .site-header,
.site-header:has(.site-nav.is-open) {
  background: rgba(10, 8, 6, 0.96);
  border-bottom-color: var(--color-border);
}

/* Mobile-only tightening: iOS Safari's backdrop-filter is unreliable
   (sometimes skipped entirely on memory pressure or when the URL bar
   is collapsing). Push the base background to a near-opaque value so
   the bar always reads as a solid surface even with no blur. */
@media (max-width: 767px) {
  .site-header {
    background: rgba(10, 8, 6, 0.88);
  }
  .site-header.is-scrolled {
    background: rgba(8, 6, 4, 0.96);
  }
}

@media (min-width: 768px) {
  .site-header { padding: max(20px, env(safe-area-inset-top)) 32px 20px; }
}

@media (min-width: 1024px) {
  .site-header { padding: max(22px, env(safe-area-inset-top)) 48px 22px; gap: var(--space-8); }
}

.site-header__brand {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.3px;
  color: var(--color-cream);
  line-height: 1;
  text-decoration: none;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .site-header__brand { font-size: 26px; }
}

.site-header__brand em {
  font-style: italic;
  color: var(--color-ember);
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

@media (min-width: 1024px) {
  .site-header__right { gap: var(--space-8); }
}

/* --- Primary nav (desktop) / mobile drawer ---
   On desktop this is the inline nav row. Below 1024px it becomes a
   slide-down drawer anchored just below the header. */

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .site-nav { gap: var(--space-8); }
}

.site-nav a {
  font-family: var(--font-label);
  font-size: var(--font-size-micro);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245, 239, 230, 0.55);
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--color-ash);
}

.site-nav a[aria-current="page"] {
  color: var(--color-ember);
  border-bottom-color: var(--color-ember);
}

@media (max-width: 1023px) {
  .site-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-4) 0 var(--space-12);
    background: var(--color-char);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      transform var(--duration-base) var(--ease-expo-out),
      opacity var(--duration-base) var(--ease-expo-out),
      visibility 0s linear var(--duration-base);
    z-index: 55;
  }

  .site-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      transform var(--duration-base) var(--ease-expo-out),
      opacity var(--duration-base) var(--ease-expo-out);
  }

  .site-nav a {
    padding: 18px 24px;
    font-size: var(--font-size-xs);
    color: rgba(245, 239, 230, 0.7);
    border-bottom: 1px solid var(--color-border-faint);
    text-align: left;
    width: 100%;
  }

  .site-nav a[aria-current="page"] {
    border-bottom-color: var(--color-border-faint);
    background: rgba(196, 122, 43, 0.06);
  }
}

/* --- Mobile drawer overlay ---
   Sits between the page content and the open drawer. backdrop-filter
   blurs everything behind it. Header (z-60) and drawer (z-55) both
   paint on top of the overlay (z-49) so they stay crisp. */

.site-nav__overlay {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--duration-base) var(--ease-expo-out),
    visibility 0s linear var(--duration-base);
  /* backdrop-filter intentionally NOT set in the inactive state.
     Some WebKit builds apply backdrop-filter even when opacity is 0,
     leaving a stale blur permanently across the viewport. Only
     apply it when the overlay is genuinely active. */
}

.site-nav__overlay.is-active {
  background: rgba(8, 6, 4, 0.45);
  backdrop-filter: blur(14px) saturate(110%);
  -webkit-backdrop-filter: blur(14px) saturate(110%);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--duration-base) var(--ease-expo-out),
    visibility 0s;
}

@media (min-width: 1024px) {
  .site-nav__overlay { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__overlay { transition: none; }
}

/* --- Language toggle (inline pill, lives in the header) --- */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--color-border-strong);
  overflow: hidden;
  flex-shrink: 0;
}

.lang-toggle a,
.lang-toggle button {
  font-family: var(--font-label);
  font-size: var(--font-size-micro);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: transparent;
  color: rgba(245, 239, 230, 0.5);
  border: 0;
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast);
  min-width: 40px;
  min-height: 32px;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lang-toggle a:hover,
.lang-toggle a:focus-visible {
  color: var(--color-ash);
  background: rgba(196, 122, 43, 0.10);
}

.lang-toggle a[aria-current="true"] {
  background: var(--color-ember);
  color: var(--color-char);
}

.lang-toggle__divider {
  width: 1px;
  height: 14px;
  background: var(--color-border-strong);
  flex-shrink: 0;
}

/* --- Drawer-only language toggle (mobile) ---
   On viewports below 1024px the header-right pill is hidden and a
   duplicate lives at the bottom of the mobile nav drawer. Bigger
   tap targets, a top divider for visual separation from the nav links. */

.lang-toggle--drawer { display: none; }

@media (max-width: 1023px) {
  /* Hide the header-right toggle on mobile — the drawer carries it. */
  .site-header__right .lang-toggle { display: none; }

  .lang-toggle--drawer {
    display: inline-flex;
    align-self: center;
    margin: var(--space-12) auto var(--space-4);
    position: relative;
  }

  /* Soft 60px hairline above the pill so it reads as a secondary
     action, not another nav link. */
  .lang-toggle--drawer::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--space-6));
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background: var(--color-border-faint);
  }

  /* Slightly larger pill than the desktop version — primary tap
     target for switching languages on mobile. */
  .lang-toggle--drawer a {
    padding: 12px 18px;
    min-width: 56px;
    min-height: 44px;
    font-size: var(--font-size-xs);
    letter-spacing: 0.32em;
  }

  .lang-toggle--drawer .lang-toggle__divider {
    height: 20px;
  }
}

/* --- Mobile menu trigger ---
   The trigger is a Cinzel button that toggles the nav drawer.
   Hidden on desktop where the nav is inline. */

.menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-label);
  font-size: var(--font-size-micro);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 239, 230, 0.55);
  background: transparent;
  border: 1px solid var(--color-border-strong);
  cursor: pointer;
  padding: 6px 12px;
  min-width: 44px;
  min-height: 32px;
  flex-shrink: 0;
  transition: color var(--duration-fast), border-color var(--duration-fast);
}

.menu-trigger:hover,
.menu-trigger:focus-visible {
  color: var(--color-ash);
  border-color: var(--color-ember);
}

.menu-trigger[aria-expanded="true"] {
  color: var(--color-ember);
  border-color: var(--color-ember);
}

.menu-trigger__icon {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 14px;
}

.menu-trigger__icon span {
  display: block;
  height: 1px;
  width: 100%;
  background: currentColor;
  transition: transform var(--duration-fast), opacity var(--duration-fast);
}

.menu-trigger[aria-expanded="true"] .menu-trigger__icon span:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}
.menu-trigger[aria-expanded="true"] .menu-trigger__icon span:nth-child(2) {
  opacity: 0;
}
.menu-trigger[aria-expanded="true"] .menu-trigger__icon span:nth-child(3) {
  transform: translateY(-4px) rotate(-45deg);
}

@media (min-width: 1024px) {
  .menu-trigger { display: none; }
}

/* --- Footer --- */
.site-footer {
  position: relative;
  z-index: 10;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-char);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-16);
}

.site-footer .container {
  position: relative;
  z-index: 1;
}

/* Atmospheric texture band sitting behind the footer columns. The
   WebP fills the section; the scrim above keeps column text legible
   regardless of which part of the texture lands behind it. */
.site-footer__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.site-footer__atmosphere img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.72;
}

.site-footer__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 65% at 50% 50%,
      rgba(8, 6, 4, 0.42) 0%,
      rgba(8, 6, 4, 0.58) 60%,
      rgba(8, 6, 4, 0.68) 100%
    ),
    linear-gradient(180deg,
      rgba(8, 6, 4, 0.42) 0%,
      rgba(8, 6, 4, 0.32) 40%,
      rgba(8, 6, 4, 0.58) 100%
    );
}

/* Mobile layout: Newsletter spans the full first row, Explore and
   Company sit side-by-side beneath. The two link columns are short
   enough to pair naturally at half-width. */
.site-footer__grid {
  display: grid;
  gap: var(--space-12) var(--space-8);
  grid-template-columns: 1fr 1fr;
}

.site-footer__grid > :first-child {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-12);
  }
  .site-footer__grid > :first-child {
    grid-column: auto;
  }
}

.site-footer h3 {
  font-family: var(--font-label);
  font-size: var(--font-size-micro);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-ember);
  margin-bottom: var(--space-6);
}

.site-footer__grid ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer a {
  color: rgba(245, 239, 230, 0.6);
  transition: color var(--duration-fast);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--color-ember);
}

/* Legal row container — only owns layout, not text appearance.
   Text styling lives on .site-footer__legal-text below so the social
   icon row (a sibling here) doesn't accidentally inherit it. */
.site-footer__legal {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-faint);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* The actual legal-text row. Owns its own type, color, and gap so it
   reads consistently regardless of what's around it. */
.site-footer__legal-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  font-family: var(--font-label);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 239, 230, 0.82);
}

@media (max-width: 600px) {
  .site-footer__legal {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .site-footer__legal-text {
    gap: var(--space-2) var(--space-3);
    font-size: 10.5px;
    letter-spacing: 0.18em;
  }
  .site-footer__legal-text .sep { display: none; }
}

/* Links use text-decoration (not a border-bottom) so they don't add
   box height and disrupt the row's vertical rhythm. */
.site-footer__legal-text a {
  color: var(--color-ember);
  text-decoration: underline;
  text-decoration-color: rgba(196, 122, 43, 0.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--duration-fast), text-decoration-color var(--duration-fast);
}
.site-footer__legal-text a:hover,
.site-footer__legal-text a:focus-visible {
  color: var(--color-ember-hover);
  text-decoration-color: var(--color-ember-hover);
}

.site-footer__legal-text .sep {
  color: rgba(196, 122, 43, 0.6);
}

/* Social icon row — sits inline at the right of the legal bar.
   Each link is a fixed square so all four icons share the same
   visual footprint regardless of the underlying glyph's proportions. */
.site-footer__social {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}

.site-footer__social li {
  display: inline-flex;
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: rgba(245, 239, 230, 0.6);
  transition: color var(--duration-fast), transform var(--duration-fast);
}

.site-footer__social svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  color: var(--color-ember);
  transform: translateY(-1px);
}

/* --- Newsletter form --- */
.newsletter__body {
  color: rgba(245, 239, 230, 0.5);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
  margin-bottom: var(--space-6);
}

.newsletter__row {
  display: flex;
  gap: 0;
  border: 1px solid var(--color-border-strong);
  transition: border-color var(--duration-fast);
}

.newsletter__row:focus-within {
  border-color: var(--color-ember);
}

.newsletter input[type="email"] {
  flex: 1;
  background: rgba(196, 122, 43, 0.05);
  border: 0;
  outline: none;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-thin);
  font-size: var(--font-size-base);
  color: var(--color-ash);
  letter-spacing: 0.5px;
  min-width: 0;
}

.newsletter input[type="email"]::placeholder {
  color: rgba(245, 239, 230, 0.55);
}

.newsletter button[type="submit"] {
  background: var(--color-ember);
  border: 0;
  color: var(--color-char);
  font-family: var(--font-label);
  font-size: var(--font-size-micro);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 14px 22px;
  cursor: pointer;
  transition: background var(--duration-fast);
  white-space: nowrap;
}

.newsletter button[type="submit"]:hover {
  background: var(--color-ember-hover);
}

.newsletter__note {
  margin-top: var(--space-3);
  font-size: var(--font-size-xs);
  color: rgba(245, 239, 230, 0.55);
  letter-spacing: 0.3px;
}

@media (max-width: 600px) {
  .newsletter__row { flex-direction: column; }
  .newsletter input[type="email"] { font-size: 16px; padding: 14px 16px; }
  .newsletter button[type="submit"] { padding: 16px; min-height: 52px; }
}

/* --- Skip link --- */
.skip-link {
  position: absolute;
  top: -120px;
  left: var(--space-4);
  background: var(--color-ember);
  color: var(--color-char);
  font-family: var(--font-label);
  font-size: var(--font-size-micro);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 12px 18px;
  z-index: 200;
}

.skip-link:focus { top: var(--space-4); }

/* --- Lightbox --- */
/* Fullscreen image viewer for documentary photography. JS in
   assets/js/lightbox.js attaches to any <img> with data-lightbox or
   any <img> inside a .lightbox-zoomable container. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: rgba(8, 6, 4, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-expo-out);
}

.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox__stage {
  position: relative;
  max-width: min(94vw, 1600px);
  max-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__image {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.8);
  transform: scale(0.98);
  transition: transform 280ms var(--ease-expo-out);
}

.lightbox.is-open .lightbox__image {
  transform: scale(1);
}

.lightbox__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-6);
  text-align: center;
  font-family: var(--font-label);
  font-size: var(--font-size-micro);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245, 239, 230, 0.7);
  padding: 0 var(--space-8);
  pointer-events: none;
}

.lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(245, 239, 230, 0.25);
  color: var(--color-cream);
  cursor: pointer;
  border-radius: 50%;
  transition: border-color var(--duration-fast), color var(--duration-fast), background-color var(--duration-fast);
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
  border-color: var(--color-ember);
  color: var(--color-ember);
  background-color: rgba(196, 122, 43, 0.08);
}

@media (min-width: 768px) {
  .lightbox__close {
    top: var(--space-6);
    right: var(--space-6);
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox__image {
    transition: none;
  }
}

/* --- Form field errors (shared across all forms) ----------------- */
/* Per-field validation errors used by newsletter, contact, investor,
   and partner forms. Pattern:
     - Each input has a sibling <span data-field-error="fieldName"> hidden
       by default. JS toggles `hidden` to reveal an inline error message.
     - The input itself gets aria-invalid="true" when invalid, which
       drives the red border + warm-warning background tint.
     - User typing in the field clears its own error.
   !important is intentional — per-form CSS uses scoped selectors like
   .investors-form input[type="email"] which would otherwise win the
   specificity battle. The error state needs to always override. */

[data-field-error] {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: var(--color-warning);
  margin: var(--space-2) 0 0;
  padding: 0;
  display: block;
}

[data-field-error][hidden] {
  display: none;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--color-warning) !important;
  background-color: rgba(184, 91, 58, 0.08) !important;
}

input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(184, 91, 58, 0.25);
}

/* --- Newsletter form states --- */
/* Inline error variant of the helper note beneath the email input. */
.newsletter__note.is-error {
  color: var(--color-warning);
}

/* Submit button loading state — soft pulse so the user sees something
   is happening between click and either success or error. */
.newsletter button[type="submit"].is-loading {
  opacity: 0.6;
  cursor: progress;
}

/* --- Newsletter success modal ---
   VERSION_MARKER: NEWSLETTER_MODAL_2026_05_10_v4
   If this string isn't in the live CSS, the deployed file is stale. */
/* Branded confirmation dialog opened by newsletter.js after a successful
   signup. Hero image at top of panel, copy stack below, labeled CTA
   plus a corner × overlaid on the hero. Same close affordances as the
   lightbox: × button, backdrop click, Esc. */
.success-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(8, 6, 4, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-expo-out);
}

.success-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Absolutely centered panel sized via width: min() so the constraint
   is built into the width property itself — no reliance on flexbox
   sizing rules that can be subverted by intrinsic content widths. */
.success-modal__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(640px, calc(100vw - var(--space-12)));
  max-height: calc(100vh - var(--space-12));
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-gold);
  text-align: center;
  isolation: isolate;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.8);
  overflow-x: hidden;
  overflow-y: auto;
  transform: translate(-50%, calc(-50% + 12px)) scale(0.98);
  transition:
    transform 320ms var(--ease-expo-out),
    opacity 220ms var(--ease-expo-out);
}

.success-modal.is-open .success-modal__panel {
  transform: translate(-50%, -50%) scale(1);
}

/* --- Hero image (fills top of panel edge-to-edge) --- */
.success-modal__hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-espresso);
}

@media (min-width: 768px) {
  .success-modal__hero { aspect-ratio: 16 / 8; }
}

.success-modal__hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Bottom scrim transitions photograph into the dark copy panel. */
.success-modal__hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(8, 6, 4, 0) 50%,
      rgba(8, 6, 4, 0.65) 100%
    );
}

/* --- Copy stack --- */
/* Display: flex column with center alignment is the most defensive way
   to keep the eyebrow / heading / body / CTA all centered regardless
   of intrinsic widths. text-align: center on the parent only handles
   inline content; this catches block children too. */
.success-modal__copy {
  padding: var(--space-12) var(--space-8) var(--space-12);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.success-modal__eyebrow {
  font-family: var(--font-label);
  font-size: var(--font-size-xs);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--color-ember);
  margin-bottom: var(--space-4);
}

.success-modal__heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--color-cream);
  max-width: 24ch;
  margin-bottom: var(--space-6);
}

.success-modal__body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-text-sand);
  max-width: 56ch;
  margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .success-modal__body {
    font-size: var(--font-size-md);
    max-width: 60ch;
  }
}

/* Labeled close button — primary CTA at the bottom of the copy stack. */
.success-modal__cta {
  min-width: 180px;
  margin-top: var(--space-6);
}

/* Close X — overlaid on the hero image when present, falls back to
   panel corner when there's no hero. Sits with a soft backdrop so it
   stays legible against any photograph. */
.success-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 6, 4, 0.55);
  border: 1px solid rgba(245, 239, 230, 0.32);
  color: rgba(245, 239, 230, 0.92);
  cursor: pointer;
  border-radius: 50%;
  z-index: 2;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: border-color var(--duration-fast), color var(--duration-fast), background-color var(--duration-fast);
}

.success-modal__close:hover,
.success-modal__close:focus-visible {
  border-color: var(--color-ember);
  color: var(--color-ember);
  background-color: rgba(8, 6, 4, 0.75);
}

@media (prefers-reduced-motion: reduce) {
  .success-modal,
  .success-modal__panel {
    transition: none;
    transform: none;
  }
}

/* --- Newsletter CTA modal — global "Join the list" entry point ---
   Re-uses .success-modal chrome. Adds form-view layout so the email
   input sits comfortably inside the modal's narrower column. The two
   inner views (form / success) live in the same panel; JS toggles
   visibility via the [hidden] attribute on the inactive view. */

/* Critical: the .success-modal__copy class sets display: flex, which
   has higher specificity than the browser's default [hidden] rule, so
   without this override both views would render at once. */
.newsletter-cta-modal__view[hidden] {
  display: none;
}

.newsletter-cta-modal__form {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

.newsletter-cta-modal__form .newsletter__row {
  flex-direction: column;
  gap: 10px;
  border: 0;
  background: transparent;
}

@media (min-width: 540px) {
  .newsletter-cta-modal__form .newsletter__row {
    flex-direction: row;
    gap: 0;
    border: 1px solid var(--color-border-strong);
  }
  .newsletter-cta-modal__form .newsletter__row:focus-within {
    border-color: var(--color-ember);
  }
}

.newsletter-cta-modal__form input[type="email"] {
  border: 1px solid var(--color-border-strong);
  padding: 14px 16px;
  font-size: 16px;
  min-height: 52px;
}

@media (min-width: 540px) {
  .newsletter-cta-modal__form input[type="email"] {
    border: 0;
  }
}

.newsletter-cta-modal__form button[type="submit"] {
  min-height: 52px;
}

.newsletter-cta-modal__form .newsletter__note {
  margin: var(--space-4) 0 0;
  font-size: var(--font-size-xs);
  color: rgba(245, 239, 230, 0.55);
}

.newsletter-cta-modal__form .newsletter__note.is-error {
  color: var(--color-warning);
}

/* Form-view body needs a touch more space before the input.
   Success-view body is followed by a CTA which has its own margin. */
.newsletter-cta-modal__view[data-view="form"] .success-modal__body {
  margin-bottom: var(--space-6);
}

/* --- Cookie consent notice -------------------------------------------- */
/* Slide-up bottom-anchored notice. Brand dark-glass aesthetic — same
   palette + warmth as the success modals — but non-blocking. The
   visitor can scroll and interact with the page while the notice is
   visible; it only closes when they Accept or Decline.
   
   Hidden by default (`hidden` attribute on the <aside>). JS removes
   the attribute + adds .is-visible to trigger the slide-up. On
   dismiss, .is-visible is removed → slide-down → after 300ms the
   `hidden` attribute returns so the element doesn't trap focus.
   
   z-index sits BELOW the age gate (999) and BELOW the success
   modals (~1000) so it never appears on top of them — the cookie
   decision is the lowest-priority interaction. */

.cookie-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  padding: var(--space-4);
  pointer-events: none; /* allow clicks to pass through the container; restored on .__inner */
  transform: translateY(120%);
  transition: transform 320ms var(--ease-expo-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.cookie-notice[hidden] {
  display: none;
}

.cookie-notice.is-visible {
  transform: translateY(0);
}

.cookie-notice__inner {
  pointer-events: auto;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
  /* Warm dark glass — matches the success modal panel atmosphere. */
  background:
    linear-gradient(180deg, rgba(196, 122, 43, 0.05) 0%, rgba(196, 122, 43, 0) 100%),
    rgba(13, 11, 9, 0.94);
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  border: 1px solid rgba(196, 122, 43, 0.28);
  box-shadow:
    0 -20px 60px -20px rgba(0, 0, 0, 0.65),
    0 -2px 0 0 rgba(196, 122, 43, 0.10);
}

@media (min-width: 800px) {
  .cookie-notice__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-8);
    padding: var(--space-6) var(--space-8);
  }
}

.cookie-notice__copy {
  min-width: 0;
}

.cookie-notice__eyebrow {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--font-size-micro);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--color-ember);
  text-indent: 0.4em;
  margin-bottom: var(--space-3);
}

.cookie-notice__heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.2;
  color: var(--color-cream);
  margin: 0 0 var(--space-3);
}

.cookie-notice__body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-sand);
  margin: 0;
  max-width: 60ch;
}

.cookie-notice__link {
  display: inline-block;
  margin-left: 4px;
  color: var(--color-aged-gold);
  text-decoration: underline;
  text-decoration-color: rgba(196, 122, 43, 0.4);
  text-underline-offset: 3px;
  white-space: nowrap;
  transition: color 150ms ease;
}

.cookie-notice__link:hover,
.cookie-notice__link:focus-visible {
  color: var(--color-ember);
  text-decoration-color: var(--color-ember);
}

.cookie-notice__actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}

.cookie-notice__btn {
  /* Slightly tighter than default brand buttons so the notice doesn't
     dominate the viewport. */
  padding: var(--space-3) var(--space-6);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .cookie-notice__actions {
    flex-direction: column;
    width: 100%;
  }
  .cookie-notice__btn {
    width: 100%;
  }
}

/* Honor reduced motion — no slide animation, just fade. */
@media (prefers-reduced-motion: reduce) {
  .cookie-notice {
    transition: opacity 200ms ease;
    transform: none;
    opacity: 0;
  }
  .cookie-notice.is-visible {
    opacity: 1;
  }
}

/* Footer "Cookie preferences" link styling — sits in the legal text
   row, picked out by JS via [data-cookie-preferences]. Pure text
   button look; matches the legal-row's restrained type scale. */
.cookie-preferences-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(196, 122, 43, 0.35);
  text-underline-offset: 3px;
  transition: color 150ms ease;
}

.cookie-preferences-link:hover,
.cookie-preferences-link:focus-visible {
  color: var(--color-ember);
  text-decoration-color: var(--color-ember);
}

/* ---------------------------------------------------------------------------
   hCaptcha widget — shared layout
   ---------------------------------------------------------------------------
   The widget itself is an iframe styled by hCaptcha; we set data-theme="dark"
   on render. These rules govern the WRAPPER — spacing, alignment, and
   limiting frame width so the widget doesn't overflow on small screens.

   Per-form variants (contact-form__captcha etc.) inherit these and can
   tighten margins or alignment as needed.
   --------------------------------------------------------------------------- */

.hcaptcha-wrap {
  margin: var(--space-4, 16px) 0;
  display: flex;
  justify-content: flex-start;
  min-height: 78px; /* reserve space so the layout doesn't jump on widget load */
}

/* Render the widget bare — no outer frame, no glow. Unscoped from
   .hcaptcha-wrap so the rule catches every hCaptcha instance, the
   admin login included. line-height:0 also kills the inline-block
   descender gap so the widget bottom-aligns with the button next
   to it. !important defends against any future hCaptcha upstream
   change that tries to ship its own border. */
.h-captcha iframe {
    border: none !important;
}

.h-captcha {
    display: inline-block;
    line-height: 0;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent;
}

/* Inside a submit row, kill the wrap's own vertical margin — the row's
   gap handles spacing and the widget should bottom-align with the
   button next to it. */
.contact-form__submit-row .hcaptcha-wrap,
.investors-form__submit-row .hcaptcha-wrap,
.partners-form__submit-row .hcaptcha-wrap {
  margin: 0;
}

.hcaptcha-wrap--centered {
  justify-content: center;
}

/* iframe-itself sizing safety — keeps the widget from forcing horizontal
   scroll on narrow screens. */
.hcaptcha-wrap iframe {
  max-width: 100%;
}

/* Invisible hCaptcha widget — sits in the form but has zero size and
   zero layout impact. The challenge popup (when hCaptcha decides one
   is needed) is a fixed-position overlay it injects into document.body,
   not anything inside .hcaptcha-wrap. We use width/height/min-height:0
   rather than display:none so the API can still discover and execute
   the widget. */
.hcaptcha-wrap--invisible {
  width: 0;
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Bottle reveal — wax-seal medallion, anticipation eyebrow, caption block.
   Surfaces:
     - .bottle__media on the home bottle-teaser (no real photo yet)
     - .product-hero__media on /the-mezcal/joven and /the-tequila/blanco
       (atmospheric image placeholder until bottle photography lands)
     - .bottle-reveal-eyebrow + .bottle-reveal-caption in the copy column
       on both surfaces
   All controlled by $t['bottle_reveal']['active']. Flip to false in the
   i18n file once real photography ships → every surface goes back to
   its production-ready treatment, no code change.
   --------------------------------------------------------------------------- */

/* --- The wax seal -------------------------------------------------- */
/* A circular ember-bordered medallion. Sits as the centerpiece of the
   home teaser; sits as a small corner mark on the product hero. The
   double border (outer thin + inner thick) simulates a hand-pressed
   wax stamp without going kitschy. */

.bottle-reveal-seal {
  position: absolute;
  display: grid;
  place-items: center;
  font-family: var(--font-label, 'Cinzel', serif);
  text-transform: uppercase;
  color: var(--color-ember);
  pointer-events: none;
  z-index: 4;
}

.bottle-reveal-seal__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  width: 142px;
  height: 142px;
  border-radius: 50%;
  /* Softer, more glass-like — slight tint instead of dark fill, single
     hairline border instead of bold ember outline. Reads as a delicate
     wax-stamp imprint rather than a sticker. */
  background:
    radial-gradient(circle at 50% 38%, rgba(196, 122, 43, 0.14) 0%, transparent 70%),
    rgba(13, 11, 9, 0.32);
  border: 1px solid rgba(196, 122, 43, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow:
    inset 0 0 0 1px rgba(196, 122, 43, 0.08),
    inset 0 0 24px rgba(196, 122, 43, 0.06),
    0 6px 18px -8px rgba(0, 0, 0, 0.55);
  text-align: center;
}

.bottle-reveal-seal__eyebrow {
  font-size: 9px;
  letter-spacing: 0.4em;
  color: rgba(212, 143, 58, 0.92);
  padding-left: 2px; /* compensate for the wide letter-spacing on the right edge */
}

.bottle-reveal-seal__rule {
  display: block;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-ember), transparent);
  opacity: 0.65;
}

.bottle-reveal-seal__label {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-cream);
}

/* Position variants — center on the homepage teaser (where the
   bottle would be), top-left corner on the product hero. */
.bottle__media .bottle-reveal-seal {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Homepage seal — slightly smaller + darker fill to match the product
   hero treatment. Same proportions as the product-hero seal so the
   visual vocabulary stays consistent across surfaces. */
.bottle__media .bottle-reveal-seal__inner {
  width: 148px;
  height: 148px;
  padding: 22px;
  background:
    radial-gradient(circle at 50% 35%, rgba(196, 122, 43, 0.16) 0%, transparent 70%),
    rgba(8, 6, 4, 0.86);
  border: 1.5px solid rgba(196, 122, 43, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(196, 122, 43, 0.18),
    inset 0 0 24px rgba(196, 122, 43, 0.08),
    0 12px 36px -10px rgba(0, 0, 0, 0.75),
    0 0 0 4px rgba(196, 122, 43, 0.10);
}
.bottle__media .bottle-reveal-seal__rule { width: 32px; }
.bottle__media .bottle-reveal-seal__label { font-size: 17px; }

/* Left column on the homepage — wraps the bottle media + the reveal
   aside underneath. The aside ties the reveal copy to the visual
   instead of orphaning it next to the specs in the right column,
   and adds vertical mass to balance the much-taller copy stack. */
.bottle__media-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 20px);
}

.bottle__media-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--space-5, 20px);
  background: rgba(245, 239, 230, 0.025);
  border: 1px solid rgba(196, 122, 43, 0.22);
  text-align: center;
}

.bottle__media-aside .bottle-reveal-eyebrow {
  margin: 0 auto;
}

.bottle__media-aside .bottle-reveal-caption__body {
  margin: 0;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(245, 239, 230, 0.78);
}

.product-hero__media .bottle-reveal-seal {
  top: var(--space-4, 16px);
  left: var(--space-4, 16px);
  /* Anchors to the outer (left) edge of the figure, away from the
     copy column on the right — gives the seal its own visual space
     instead of crowding the title. */
  transform: none;
  transform-origin: top left;
}

/* Product-hero seal treatment — deliberate hallmark mark. Slightly
   smaller than the previous bump; darker, more solid backing so the
   ember text reads against the photo behind. */
.product-hero__media .bottle-reveal-seal__inner {
  width: 148px;
  height: 148px;
  padding: 22px;
  background:
    radial-gradient(circle at 50% 35%, rgba(196, 122, 43, 0.16) 0%, transparent 70%),
    rgba(8, 6, 4, 0.86);
  border: 1.5px solid rgba(196, 122, 43, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(196, 122, 43, 0.18),
    inset 0 0 24px rgba(196, 122, 43, 0.08),
    0 12px 36px -10px rgba(0, 0, 0, 0.75),
    0 0 0 4px rgba(196, 122, 43, 0.10);
}
.product-hero__media .bottle-reveal-seal__eyebrow {
  font-size: 10px;
  letter-spacing: 0.42em;
  color: rgba(212, 143, 58, 1);
}
.product-hero__media .bottle-reveal-seal__rule {
  width: 32px;
}
.product-hero__media .bottle-reveal-seal__label {
  font-size: 17px;
}

/* Subtle breathing animation. Honors prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .bottle-reveal-seal__inner {
    animation: bottle-reveal-pulse 6s ease-in-out infinite;
  }
  @keyframes bottle-reveal-pulse {
    0%, 100% { box-shadow:
        inset 0 0 0 1px rgba(196, 122, 43, 0.12),
        inset 0 0 18px rgba(196, 122, 43, 0.08),
        0 8px 22px -10px rgba(0, 0, 0, 0.6); }
    50%     { box-shadow:
        inset 0 0 0 1px rgba(196, 122, 43, 0.22),
        inset 0 0 24px rgba(196, 122, 43, 0.16),
        0 8px 28px -10px rgba(196, 122, 43, 0.18); }
  }
}

/* --- The anticipation eyebrow ----------------------------------------- */
/* Sits in the copy column above (or beside) the title. A small ember
   dot + uppercase Cinzel label. Reads as a deliberate "save the date"
   marker rather than a hype label. */

.bottle-reveal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-3, 12px);
  padding: 6px 14px;
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ember);
  background: rgba(196, 122, 43, 0.06);
  border: 1px solid rgba(196, 122, 43, 0.32);
  width: fit-content;
}

.bottle-reveal-eyebrow__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--color-ember);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(196, 122, 43, 0.18);
}

@media (prefers-reduced-motion: no-preference) {
  .bottle-reveal-eyebrow__dot {
    animation: bottle-reveal-dot 2.4s ease-in-out infinite;
  }
  @keyframes bottle-reveal-dot {
    0%, 100% { box-shadow: 0 0 0 2px rgba(196, 122, 43, 0.18); }
    50%     { box-shadow: 0 0 0 4px rgba(196, 122, 43, 0.30); }
  }
}

/* --- The caption block ----------------------------------------------- */
/* Italic Cormorant body paragraph that frames the wait as deliberate
   craft, not a delay. */

.bottle-reveal-caption {
  display: block;
  max-width: 56ch;
  margin: 0 0 var(--space-6, 24px);
}

.bottle-reveal-caption__eyebrow {
  display: block;
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-aged-gold, var(--color-ember));
  margin-bottom: var(--space-2, 8px);
}

.bottle-reveal-caption__body {
  display: block;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.55;
  color: rgba(245, 239, 230, 0.82);
}

/* --- Home bottle teaser tweak when reveal is active ------------------ */
/* Drop the "Photography pending" tiny-label color so the seal isn't
   competing with empty placeholder text. */

.bottle__media--reveal {
  /* The seal is the focal element — let the radial glow halo it. */
}
.bottle__media--reveal .bottle__media-note { display: none; }

/* Video layer — fills the bottle media area behind the seal. The seal
   sits above on z-index:4; we put the video at z-index:1 so it lives
   below the radial glow (z-index 2 implicit) and the seal. */
.bottle__media--video {
  /* Reset the dark gradient background so the video shows through. */
  background: var(--color-bg-deep);
}
.bottle__media-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* Scale the video to 120% of the box height so anchoring it to the
     top still covers the bottom edge — no empty gradient strip. The
     container has overflow:hidden, so the bottom 20% that extends
     past the box is cleanly clipped. */
  height: 120%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.2s ease;
}
/* Once metadata loads we know the video has dimensions; reveal it. */
.bottle__media-video:not([poster]),
.bottle__media-video[poster] {
  opacity: 1;
}
/* Soft warm scrim above the video so the seal stays legible against
   any frame. Lives BELOW the seal (z-index:4) but ABOVE the video. */
.bottle__media--video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(ellipse 60% 65% at 50% 50%, transparent 0%, rgba(8, 6, 4, 0.55) 80%);
  pointer-events: none;
}

/* --- Product hero figure when bottle reveal is active --------------- */
/* Restrained treatment: the photo stays at full warmth (no scrim, no
   heavy filter) and a single wax-seal medallion floats in the corner
   as the only overlay. The reveal eyebrow + caption + CTA in the copy
   column carry the messaging; the image doesn't need to repeat it. */

.product-hero__media--reveal {
  position: relative;
  overflow: hidden;
}

@media (max-width: 720px) {
  .bottle-reveal-seal__inner {
    width: 118px;
    height: 118px;
    padding: 18px 14px;
  }
  .bottle-reveal-seal__label { font-size: 14px; }
  .product-hero__media .bottle-reveal-seal { transform: scale(0.78); }
}