/* =========================================================================
   AGUA VIDA — Global design system (Phase 1)
   Tokens · base · layout · typography · buttons · media · motion
   Layout responds to the .av-site container (container queries), so every
   artboard/breakpoint preview renders exactly like the live page.
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Palette — charcoal / warm neutral / amber / cream / agave accent */
  --av-ink-950: #0E0D0B;
  --av-ink-900: #161412;
  --av-ink-800: #211E1A;
  --av-ink-700: #2F2A24;
  --av-stone-500: #8C8174;
  --av-stone-400: #A79C8E;
  --av-sand-300: #CDBEA5;
  --av-cream-100: #F1EADC;
  --av-cream-50: #FAF6EE;
  --av-amber-600: #A8762F;
  --av-amber-500: #C8913F;
  --av-amber-300: #E0BD82;
  --av-agave-500: #2E6FD0;   /* label band blue — use sparingly */

  /* Expression identities (from each label) */
  --av-expr-blanco: #4A86E8;
  --av-expr-reposado: #E2663A;
  --av-expr-anejo: #D49A45;

  /* Semantic roles */
  --av-bg: var(--av-ink-950);
  --av-surface: var(--av-ink-900);
  --av-surface-raised: var(--av-ink-800);
  --av-text: var(--av-cream-100);
  --av-text-muted: var(--av-stone-400);
  --av-text-subtle: var(--av-stone-500);
  --av-accent: var(--av-amber-500);
  --av-accent-soft: var(--av-amber-300);
  --av-line: rgba(241, 234, 220, 0.14);
  --av-line-strong: rgba(241, 234, 220, 0.32);

  /* Typography */
  --av-font-display: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --av-font-sans: "Jost", "Futura", "Avenir Next", "Helvetica Neue", sans-serif;
  --av-text-2xs: 11px;
  --av-text-xs: 12px;
  --av-text-sm: 14px;
  --av-text-base: 16px;
  --av-text-md: 18px;
  --av-text-lg: 22px;
  --av-text-xl: 30px;
  --av-text-2xl: 44px;
  --av-text-3xl: clamp(44px, 5cqi, 72px);
  --av-text-display: clamp(80px, 9.6cqi, 150px);
  --av-leading-tight: 0.96;
  --av-leading-snug: 1.2;
  --av-leading-body: 1.65;
  --av-tracking-caps: 0.32em;
  --av-tracking-wide: 0.18em;

  /* Spacing (4-pt) */
  --av-space-1: 4px;
  --av-space-2: 8px;
  --av-space-3: 12px;
  --av-space-4: 16px;
  --av-space-5: 24px;
  --av-space-6: 32px;
  --av-space-7: 48px;
  --av-space-8: 64px;
  --av-space-9: 96px;
  --av-space-10: 128px;

  /* Layout */
  --av-container-max: 1360px;
  --av-gutter: clamp(20px, 5.5cqi, 80px);
  --av-header-h: 96px;
  --av-header-h-compact: 72px;

  /* Radius */
  --av-radius-none: 0;
  --av-radius-sm: 2px;
  --av-radius-md: 6px;
  --av-radius-pill: 999px;
  --av-radius-arch: 999px 999px var(--av-radius-sm) var(--av-radius-sm);

  /* Motion */
  --av-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --av-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --av-dur-fast: 200ms;
  --av-dur-base: 420ms;
  --av-dur-slow: 900ms;
  --av-dur-cinematic: 1400ms;

  /* Elevation */
  --av-shadow-float: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
}

/* Breakpoints (container widths on .av-site):
   mobile  < 640   ·  tablet 640–1023  ·  desktop ≥ 1024  ·  wide ≥ 1440 */

/* ---------- 2. Base ------------------------------------------------------ */
.av-site {
  container: site / inline-size;
  position: relative;
  width: 100%;
  min-height: 100%;
  background: var(--av-bg);
  color: var(--av-text);
  font-family: var(--av-font-sans);
  font-size: var(--av-text-base);
  line-height: var(--av-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.av-site *, .av-site *::before, .av-site *::after { box-sizing: border-box; }
:where(.av-site) a { color: inherit; text-decoration: none; }
:where(.av-site) img { display: block; max-width: 100%; }
.av-site :focus-visible { outline: 1px solid var(--av-accent-soft); outline-offset: 4px; }
/* A component rendered on its own (or nested) keeps the base styles, no fill */
.av-site--part { background: transparent; min-height: 0; }
.av-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

/* ---------- 3. Layout ---------------------------------------------------- */
.av-container {
  width: 100%;
  max-width: calc(var(--av-container-max) + var(--av-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--av-gutter);
}

/* ---------- 4. Typography ------------------------------------------------ */
.av-eyebrow {
  display: inline-flex; align-items: center; gap: var(--av-space-3);
  font-family: var(--av-font-sans); font-size: var(--av-text-xs); font-weight: 500;
  letter-spacing: var(--av-tracking-caps); text-transform: uppercase;
  color: var(--av-accent-soft);
}
.av-eyebrow::before {
  content: ""; width: 40px; height: 1px; background: currentColor; opacity: 0.7;
}
.av-display {
  font-family: var(--av-font-display); font-weight: 400;
  font-size: var(--av-text-display); line-height: var(--av-leading-tight);
  letter-spacing: -0.02em; margin: 0;
}
.av-heading {
  font-family: var(--av-font-display); font-weight: 400;
  font-size: var(--av-text-3xl); line-height: 1.05; letter-spacing: -0.01em; margin: 0;
}
.av-lede {
  font-family: var(--av-font-display); font-weight: 400;
  font-size: var(--av-text-xl); line-height: var(--av-leading-snug); margin: 0;
}
.av-lede em, .av-display em { font-style: italic; color: var(--av-accent-soft); }
.av-body { font-size: var(--av-text-md); line-height: var(--av-leading-body); color: var(--av-text-muted); margin: 0; font-weight: 300; }
.av-caption {
  font-size: var(--av-text-2xs); letter-spacing: var(--av-tracking-wide);
  text-transform: uppercase; color: var(--av-text-subtle); font-weight: 500;
}

/* ---------- 5. Buttons --------------------------------------------------- */
.av-btn {
  --av-btn-bg: transparent; --av-btn-fg: var(--av-text); --av-btn-bd: var(--av-line-strong);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--av-space-3); min-height: 52px; padding: 0 var(--av-space-6);
  font-family: var(--av-font-sans); font-size: var(--av-text-xs); font-weight: 500;
  letter-spacing: var(--av-tracking-wide); text-transform: uppercase; white-space: nowrap;
  color: var(--av-btn-fg); background: var(--av-btn-bg);
  border: 1px solid var(--av-btn-bd); border-radius: var(--av-radius-sm);
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition: color var(--av-dur-base) var(--av-ease-out), border-color var(--av-dur-base) var(--av-ease-out);
}
.av-btn::after { /* fill sweep */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--av-amber-500); transform: scaleX(0); transform-origin: right;
  transition: transform var(--av-dur-base) var(--av-ease-out);
}
.av-btn:hover::after { transform: scaleX(1); transform-origin: left; }
.av-btn:hover { --av-btn-fg: var(--av-ink-950); border-color: var(--av-amber-500); }
.av-btn--primary { --av-btn-bg: var(--av-cream-100); --av-btn-fg: var(--av-ink-950); --av-btn-bd: var(--av-cream-100); }
.av-btn--ghost { --av-btn-bd: var(--av-line-strong); }
.av-btn--sm { min-height: 44px; padding: 0 var(--av-space-5); }
.av-btn__icon { width: 16px; height: 16px; transition: transform var(--av-dur-base) var(--av-ease-out); }
.av-btn:hover .av-btn__icon { transform: translateX(4px); }

.av-link {
  position: relative; display: inline-flex; align-items: center; gap: var(--av-space-3);
  min-height: 44px; font-size: var(--av-text-xs); font-weight: 500;
  letter-spacing: var(--av-tracking-wide); text-transform: uppercase; color: var(--av-text);
}
.av-link__label { position: relative; padding-block: 4px; }
.av-link__label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform-origin: left; transition: transform var(--av-dur-base) var(--av-ease-out);
}
.av-link:hover .av-link__label::after { transform: scaleX(0.35); }
.av-link__icon { width: 16px; height: 16px; transition: transform var(--av-dur-base) var(--av-ease-out); }
.av-link:hover .av-link__icon { transform: translateX(4px); }

/* ---------- 6. Media / image handling ------------------------------------ */
/* Product renders are shown at their native aspect ratio — never cropped. */
.av-media { position: relative; overflow: hidden; background: var(--av-surface); }
.av-media > img { width: 100%; height: 100%; object-fit: contain; }
.av-media--arch { border-radius: var(--av-radius-arch); }

/* ---------- 7. Motion ---------------------------------------------------- */
@keyframes av-rise { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
@keyframes av-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes av-unveil {
  from { clip-path: inset(100% 0 0 0 round 999px 999px 2px 2px); }
  to   { clip-path: inset(0 0 0 0 round 999px 999px 2px 2px); }
}
@keyframes av-settle { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes av-line { from { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 50.01% { transform-origin: bottom; } to { transform: scaleY(0); transform-origin: bottom; } }

.av-anim { opacity: 0; animation: av-rise var(--av-dur-slow) var(--av-ease-out) forwards; animation-delay: var(--av-delay, 0ms); }
.av-anim--fade { animation-name: av-fade; }

@media (prefers-reduced-motion: reduce) {
  .av-site *, .av-site *::before, .av-site *::after {
    animation-duration: 1ms !important; animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
  .av-hero { --av-mx: 0 !important; --av-my: 0 !important; --av-sy: 0 !important; }
}

/* =========================================================================
   COMPONENT — Header
   ========================================================================= */
.av-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background-color var(--av-dur-base) var(--av-ease-out),
              border-color var(--av-dur-base) var(--av-ease-out),
              backdrop-filter var(--av-dur-base) var(--av-ease-out);
  border-bottom: 1px solid transparent;
}
.av-header__bar {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--av-header-h);
  transition: height var(--av-dur-base) var(--av-ease-out);
}
.av-header.is-scrolled {
  background: rgba(14, 13, 11, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--av-line);
}
.av-header.is-scrolled .av-header__bar { height: var(--av-header-h-compact); }

.av-brand { display: inline-flex; align-items: center; gap: var(--av-space-3); justify-self: start; color: var(--av-text); min-height: 44px; }
.av-brand__mark { width: 30px; height: 30px; color: var(--av-accent); flex-shrink: 0; }
.av-brand__text { display: flex; flex-direction: column; line-height: 1; }
.av-brand__name { font-family: var(--av-font-display); font-size: 21px; letter-spacing: 0.26em; margin-right: -0.26em; }
.av-brand__sub { margin-top: 6px; font-size: 8.5px; font-weight: 500; letter-spacing: 0.52em; text-transform: uppercase; color: var(--av-text-subtle); }

.av-nav__list { display: flex; gap: var(--av-space-7); list-style: none; margin: 0; padding: 0; }
.av-nav__link {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--av-text-xs); font-weight: 500; letter-spacing: var(--av-tracking-wide);
  text-transform: uppercase; color: var(--av-text-muted);
  transition: color var(--av-dur-fast) ease;
}
.av-nav__link::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 10px; height: 1px;
  background: var(--av-accent); transition: left var(--av-dur-base) var(--av-ease-out), right var(--av-dur-base) var(--av-ease-out);
}
.av-nav__link:hover { color: var(--av-text); }
.av-nav__link:hover::after { left: 0; right: 0; }

.av-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--av-space-4); }

.av-burger {
  display: none; position: relative; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--av-line-strong); border-radius: var(--av-radius-pill);
  color: var(--av-text); cursor: pointer;
}
.av-burger__line {
  position: absolute; left: 13px; right: 13px; height: 1px; background: currentColor;
  transition: transform var(--av-dur-base) var(--av-ease-out), top var(--av-dur-base) var(--av-ease-out);
}
.av-burger__line:nth-child(1) { top: 18px; }
.av-burger__line:nth-child(2) { top: 25px; }
.av-header.is-open .av-burger__line:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.av-header.is-open .av-burger__line:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }

/* Mobile menu overlay */
.av-menu {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1;
  height: var(--av-menu-h, 100svh);
  display: flex; flex-direction: column;
  padding: calc(var(--av-header-h-compact) + var(--av-space-7)) var(--av-gutter) var(--av-space-7);
  background: var(--av-ink-950);
  visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0);
  transition: clip-path var(--av-dur-slow) var(--av-ease-out), opacity var(--av-dur-base) ease, visibility 0s linear var(--av-dur-slow);
}
.av-header.is-open .av-menu {
  visibility: visible; opacity: 1; clip-path: inset(0 0 0 0);
  transition: clip-path var(--av-dur-slow) var(--av-ease-out), opacity var(--av-dur-base) ease, visibility 0s;
}
.av-menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--av-line); }
.av-menu__item { border-bottom: 1px solid var(--av-line); }
.av-menu__link { display: flex; align-items: baseline; gap: var(--av-space-4); padding: var(--av-space-4) 0; font-family: var(--av-font-display); font-size: 40px; line-height: 1.1; color: var(--av-text); }
.av-menu__num { font-family: var(--av-font-sans); font-size: var(--av-text-2xs); letter-spacing: var(--av-tracking-wide); color: var(--av-accent); min-width: 24px; }
.av-menu__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--av-space-5); }
.av-menu__foot .av-btn { width: 100%; }

@container site (max-width: 1023px) {
  .av-header, .av-hero { --av-header-h: 80px; }
  .av-header__bar { grid-template-columns: 1fr auto; }
  .av-nav { display: none; }
  .av-burger { display: inline-block; }
}
@container site (max-width: 639px) {
  .av-header, .av-hero { --av-header-h: 72px; }
  .av-header__cta { display: none; }
  .av-brand__name { font-size: 18px; }
  .av-brand__mark { width: 26px; height: 26px; }
}

/* =========================================================================
   COMPONENT — Hero (single-bottle cinematic)
   ========================================================================= */
.av-hero {
  --av-mx: 0; --av-my: 0; --av-sy: 0;
  position: relative; overflow: hidden; isolation: isolate;
  min-height: var(--av-hero-h, 100svh);
  display: flex; flex-direction: column;
  padding-top: calc(var(--av-header-h) + var(--av-space-5));
  padding-bottom: var(--av-space-6);
  background: var(--av-bg);
}
/* Full-bleed photograph: the whole hero is ONE campaign image, type set onto it */
.av-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #0A0908; }
.av-hero__bg-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 30% 50%;
  animation: av-settle 2600ms var(--av-ease-out) 100ms both;
  translate: calc(var(--av-mx) * -6px) calc(var(--av-sy) * 0.12px);
  transition: translate 900ms var(--av-ease-out);
  will-change: transform;
}
/* Localised shading only: soft falloff where the type sits (right), a whisper at top for the nav
   and at the bottom for the meta line. No panels, no hard edges — the photo stays visible. */
.av-hero__bg-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 46% 62% at 78% 50%, rgba(8,7,6,0.62) 0%, rgba(8,7,6,0.38) 45%, transparent 80%),
    linear-gradient(to bottom, rgba(8,7,6,0.5) 0%, transparent 16%),
    linear-gradient(to top, rgba(8,7,6,0.55) 0%, transparent 20%);
}

.av-hero__inner {
  flex: 1; display: flex; align-items: center; justify-content: flex-end; position: relative;
}
.av-hero__copy { width: min(100%, 540px); margin-right: clamp(0px, 2cqi, 40px); }
.av-hero__copy, .av-hero__meta { text-shadow: 0 2px 24px rgba(0,0,0,0.45); }

.av-hero__eyebrow { margin-bottom: var(--av-space-6); }
.av-hero__title { display: flex; flex-direction: column; }
.av-hero__title-line { display: block; }
.av-hero__title-line--indent { padding-left: 0.62em; font-style: italic; color: var(--av-accent-soft); }
.av-hero__lede { margin-top: var(--av-space-6); max-width: 17em; }
.av-hero__cta { padding-top: var(--av-space-7); }
.av-hero__cta .av-link--lg { font-size: var(--av-text-md); letter-spacing: var(--av-tracking-wide); text-transform: uppercase; }

/* Bottom meta strip */
.av-hero__meta {
  position: relative; display: flex; justify-content: flex-end; align-items: center; gap: var(--av-space-8);
  margin-top: var(--av-space-6);
}
.av-scroll { display: inline-flex; align-items: center; gap: var(--av-space-4); }
.av-scroll__track { position: relative; width: 1px; height: 44px; background: var(--av-line); overflow: hidden; }
.av-scroll__track::after { content: ""; position: absolute; inset: 0; background: var(--av-accent); animation: av-line 2.4s var(--av-ease-in-out) 2s infinite; transform: scaleY(0); }

/* ---- Hero · short desktop viewports (laptops) ---- */
@media (max-height: 820px) and (min-width: 1024px) {
  .av-hero { --av-text-display: clamp(72px, min(9.2cqi, 15svh), 144px); padding-top: calc(var(--av-header-h) + var(--av-space-2)); padding-bottom: var(--av-space-5); }
  .av-hero__eyebrow { margin-bottom: var(--av-space-5); }
  .av-hero__lede { margin-top: var(--av-space-5); font-size: 26px; }
  .av-hero__cta { padding-top: var(--av-space-6); }
  .av-hero__meta { margin-top: var(--av-space-2); }
}

/* ---- Hero · tablet + mobile: the photograph fills the upper frame, the type is set on its lower,
   darker edge (the stone ledge) where it melts into the page — still one image, never a column ---- */
@container site (max-width: 1023px) {
  .av-hero { padding-top: calc(var(--av-header-h) + var(--av-space-6)); padding-bottom: var(--av-space-7); }
  .av-hero { --av-text-display: clamp(64px, 12.5cqi, 116px); }
  .av-hero__bg-img { height: 63%; bottom: auto; object-position: 25% 50%; }
  .av-hero__bg-scrim {
    background:
      linear-gradient(to bottom, rgba(8,7,6,0.5) 0%, transparent 14%, transparent 34%, rgba(10,9,8,0.55) 48%, rgba(10,9,8,0.92) 58%, #0A0908 64%),
      linear-gradient(to right, rgba(8,7,6,0.35) 0%, transparent 30%);
  }
  .av-hero__inner { align-items: flex-end; justify-content: flex-start; }
  .av-hero__copy { width: min(100%, 560px); margin-right: 0; }
  .av-hero__meta { display: none; }
}
@container site (max-width: 639px) {
  .av-hero { padding-bottom: var(--av-space-7); }
  .av-hero { --av-text-display: clamp(60px, 17cqi, 84px); }
  .av-hero__bg-img { height: 62%; object-position: 25% 50%; }
  .av-hero__bg-scrim {
    background:
      linear-gradient(to bottom, rgba(8,7,6,0.45) 0%, transparent 14%, transparent 40%, rgba(10,9,8,0.6) 50%, rgba(10,9,8,0.94) 58%, #0A0908 63%);
  }
  .av-hero__eyebrow { margin-bottom: var(--av-space-4); letter-spacing: 0.22em; }
  .av-hero__eyebrow::before { display: none; }
  .av-hero__lede { font-size: 22px; margin-top: var(--av-space-4); max-width: none; }
  .av-hero__cta { padding-top: var(--av-space-5); }
  .av-hero__cta .av-link--lg { font-size: var(--av-text-sm); }
}

/* =========================================================================
   PHASE 2 — shared additions
   ========================================================================= */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.av-site [id] { scroll-margin-top: 72px; }

.av-btn--dark { --av-btn-bg: var(--av-ink-950); --av-btn-fg: var(--av-cream-100); --av-btn-bd: var(--av-ink-950); }

/* Scroll reveal — scroll-driven, no JS. Browsers without view timelines
   simply show the content. */
@keyframes av-drift { from { transform: translate3d(0, 28px, 0); } to { transform: translate3d(0, -28px, 0); } }
@supports (animation-timeline: view()) {
  .av-reveal {
    animation: av-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 90%;
  }
  .av-drift {
    animation: av-drift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .av-reveal, .av-drift { animation: none !important; opacity: 1 !important; transform: none !important; }
}


/* =========================================================================
   COMPONENT — Collection (intro + product family)
   ========================================================================= */
.av-collection { position: relative; overflow-x: clip; padding-top: var(--av-space-10); background: var(--av-bg); }
.av-collection__intro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(48px, 7cqi, 128px); align-items: center;
  padding-bottom: var(--av-space-10);
}
.av-collection__visual { position: relative; justify-self: start; width: min(100%, 560px); margin: 0; }
.av-collection__frame {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--av-radius-sm); box-shadow: var(--av-shadow-float);
}
.av-collection__frame > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1600ms var(--av-ease-out); }
.av-collection__visual:hover .av-collection__frame > img { transform: scale(1.02); }
.av-collection__visual::before { /* offset hairline frame */
  content: ""; position: absolute; inset: 20px -20px 36px 20px; z-index: -1;
  border: 1px solid var(--av-line-strong); border-radius: var(--av-radius-sm);
}
.av-collection__caption { display: flex; justify-content: space-between; gap: var(--av-space-4); margin-top: 40px; }
.av-collection__text { display: flex; flex-direction: column; gap: var(--av-space-6); max-width: 560px; }
.av-collection__text .av-body { max-width: 30em; }

.av-index { list-style: none; margin: var(--av-space-5) 0 0; padding: 0; border-top: 1px solid var(--av-line); }
.av-index__item { border-bottom: 1px solid var(--av-line); }
.av-index__link {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: var(--av-space-4);
  min-height: 76px; padding: var(--av-space-3) 0;
}
.av-index__num { font-size: var(--av-text-2xs); letter-spacing: var(--av-tracking-wide); color: var(--av-expr, var(--av-accent)); font-weight: 500; }
.av-index__name {
  font-family: var(--av-font-display); font-size: 34px; line-height: 1.1; color: var(--av-text);
  transition: transform var(--av-dur-base) var(--av-ease-out), color var(--av-dur-base) ease;
}
.av-index__meta { display: inline-flex; align-items: center; gap: var(--av-space-3); }
.av-index__arrow { width: 16px; height: 16px; color: var(--av-text-muted); transform: translateX(-6px); opacity: 0; transition: transform var(--av-dur-base) var(--av-ease-out), opacity var(--av-dur-base) ease; }
.av-index__link:hover .av-index__name { transform: translateX(10px); color: var(--av-accent-soft); }
.av-index__link:hover .av-index__arrow { transform: none; opacity: 1; }
.av-index__item--blanco { --av-expr: var(--av-expr-blanco); }
.av-index__item--reposado { --av-expr: var(--av-expr-reposado); }
.av-index__item--anejo { --av-expr: var(--av-expr-anejo); }

@container site (max-width: 1023px) {
  .av-collection { padding-top: var(--av-space-9); }
  .av-collection__intro { column-gap: var(--av-space-7); padding-bottom: var(--av-space-9); }
  .av-index__name { font-size: 28px; }
}
@container site (max-width: 767px) {
  .av-collection__intro { grid-template-columns: minmax(0, 1fr); row-gap: var(--av-space-8); }
  .av-collection__text { order: -1; }
  .av-collection__visual { justify-self: stretch; width: calc(100% - 12px); }
  .av-collection__visual::before { inset: 12px -12px 44px 12px; }
}

/* =========================================================================
   COMPONENT — Product (one expression, editorial row)
   ========================================================================= */
.av-product {
  --av-expr: var(--av-accent);
  --av-img-pos: 50% 50%;
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--av-space-5);
  align-items: center;
  padding-block: var(--av-space-9);
  border-top: 1px solid var(--av-line);
}
.av-product--blanco { --av-expr: var(--av-expr-blanco); --av-img-pos: 49.8% 50%; }
.av-product--reposado { --av-expr: var(--av-expr-reposado); --av-img-pos: 62% 0%; }
.av-product--anejo { --av-expr: var(--av-expr-anejo); --av-img-pos: 50% 50%; }

.av-product__media { grid-column: 1 / span 6; grid-row: 1; position: relative; display: flex; justify-content: center; }
.av-product__body { grid-column: 8 / span 5; grid-row: 1; position: relative; isolation: isolate; display: flex; flex-direction: column; }
.av-product--reverse .av-product__media { grid-column: 7 / span 6; }
.av-product--reverse .av-product__body { grid-column: 1 / span 5; }

.av-product__media::before { /* expression-tinted ambient light */
  content: ""; position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--av-expr) 16%, transparent), transparent 70%);
}
.av-product__frame {
  position: relative; z-index: 1; width: min(100%, 500px); aspect-ratio: 2 / 3; margin: 0;
  overflow: hidden; border-radius: var(--av-radius-sm); background: #0A0908;
  box-shadow: var(--av-shadow-float);
}
.av-product__frame > img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--av-img-pos);
  transition: transform 1400ms var(--av-ease-out), filter 900ms ease;
}
.av-product__frame:hover > img { transform: scale(1.025); }
.av-product__index {
  position: absolute; top: var(--av-space-5); left: var(--av-space-5); z-index: 2;
  display: inline-flex; align-items: center; gap: var(--av-space-2);
  padding: 6px 12px; border-radius: var(--av-radius-pill);
  background: rgba(14, 13, 11, 0.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--av-line);
}
.av-product__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--av-expr); }

/* hover reveal — tasting notes slide up over the base of the frame */
.av-product__notes {
  position: absolute; left: var(--av-space-4); right: var(--av-space-4); bottom: var(--av-space-4); z-index: 2;
  display: flex; flex-direction: column; gap: var(--av-space-2);
  padding: var(--av-space-4) var(--av-space-5);
  background: rgba(14, 13, 11, 0.84); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--av-line); border-top: 1px solid var(--av-expr); border-radius: var(--av-radius-sm);
  opacity: 0; transform: translate3d(0, 24px, 0);
  transition: opacity var(--av-dur-base) ease, transform var(--av-dur-slow) var(--av-ease-out);
}
.av-product__notes-list { font-family: var(--av-font-display); font-size: var(--av-text-lg); line-height: 1.25; color: var(--av-text); }
.av-product__frame:hover .av-product__notes,
.av-product__frame:focus-within .av-product__notes { opacity: 1; transform: none; }
.av-product__hint { position: absolute; right: var(--av-space-5); bottom: var(--av-space-5); z-index: 2; transition: opacity var(--av-dur-base) ease; }
.av-product__frame:hover .av-product__hint { opacity: 0; }

.av-product__num {
  position: absolute; right: 0; top: -0.82em; z-index: -1;
  font-family: var(--av-font-display); font-size: clamp(140px, 13cqi, 200px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--av-line-strong); opacity: 0.55; pointer-events: none;
}
.av-product__eyebrow { color: var(--av-expr); }
.av-product__eyebrow::before { background: var(--av-expr); }
.av-product__name { margin: var(--av-space-5) 0 0; font-size: clamp(72px, 8.4cqi, 128px); }
.av-product__tagline { margin-top: var(--av-space-5); }
.av-product__desc { margin-top: var(--av-space-5); max-width: 30em; }
.av-product__rule { width: 48px; height: 1px; margin-top: var(--av-space-6); background: var(--av-expr); transition: width var(--av-dur-slow) var(--av-ease-out); }
.av-product:hover .av-product__rule { width: 120px; }

.av-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--av-space-5); margin: var(--av-space-6) 0 0; padding: var(--av-space-5) 0 0; border-top: 1px solid var(--av-line); }
.av-specs__item { display: flex; flex-direction: column; gap: var(--av-space-2); margin: 0; }
.av-specs__item dd { margin: 0; font-size: var(--av-text-sm); line-height: 1.5; color: var(--av-text); }
.av-specs__item--touch { display: none; grid-column: 1 / -1; }
.av-product__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--av-space-4) var(--av-space-6); margin-top: var(--av-space-7); }

/* touch devices: no hover, so the notes live in the spec list instead */
@media (hover: none) {
  .av-product__notes, .av-product__hint { display: none; }
  .av-specs__item--touch { display: flex; }
}

@container site (max-width: 1023px) {
  .av-product { column-gap: var(--av-space-4); padding-block: var(--av-space-8); }
  .av-product__media, .av-product--reverse .av-product__media { grid-column: span 6; }
  .av-product__body { grid-column: 7 / span 6; }
  .av-product--reverse .av-product__media { grid-column: 7 / span 6; }
  .av-product--reverse .av-product__body { grid-column: 1 / span 6; }
  .av-specs { grid-template-columns: minmax(0, 1fr); gap: var(--av-space-4); }
  .av-product__num { display: none; }
}
/* Product sits inside the page container, so its own width drives the stack */
@container site (max-width: 679px) {
  .av-product { grid-template-columns: minmax(0, 1fr); row-gap: var(--av-space-7); padding-block: var(--av-space-8) var(--av-space-9); }
  .av-product__media, .av-product--reverse .av-product__media,
  .av-product__body, .av-product--reverse .av-product__body { grid-column: 1; grid-row: auto; }
  .av-product__frame { width: 100%; }
  .av-product__num { display: none; }
  .av-product__hint { display: none; }
  .av-product__name { font-size: clamp(64px, 19cqi, 88px); }
  .av-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .av-product__cta { flex-direction: column; align-items: stretch; gap: var(--av-space-3); }
  .av-product__cta .av-link { justify-content: center; }
}

/* =========================================================================
   COMPONENT — Brand story (typographic, on cream)
   ========================================================================= */
.av-story {
  --av-text: var(--av-ink-950);
  --av-text-muted: #564C42;
  --av-text-subtle: #6E6357;
  --av-accent-soft: #8A5A1C;
  --av-line: rgba(14, 13, 11, 0.14);
  --av-line-strong: rgba(14, 13, 11, 0.3);
  position: relative; overflow: hidden;
  padding-block: clamp(96px, 11cqi, 176px) clamp(64px, 6cqi, 96px);
  background: var(--av-cream-100); color: var(--av-text);
}
.av-story .av-eyebrow { color: var(--av-accent-soft); }
.av-story .av-body { color: var(--av-text-muted); font-weight: 400; }
.av-story__statement {
  margin: var(--av-space-7) 0 0; max-width: 15ch;
  font-family: var(--av-font-display); font-weight: 400;
  font-size: clamp(48px, 6.6cqi, 108px); line-height: 1.02; letter-spacing: -0.015em;
}
.av-story__statement em { font-style: italic; color: var(--av-accent-soft); }

.av-story__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--av-space-5);
  margin-top: clamp(80px, 9cqi, 144px); align-items: start;
}
.av-story__aside { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: var(--av-space-6); }
.av-story__agave { width: min(100%, 340px); height: auto; color: var(--av-ink-950); opacity: 0.85; }
.av-story__copy { grid-column: 6 / span 7; column-count: 2; column-gap: var(--av-space-7); }
.av-story__copy .av-body { break-inside: avoid; margin-bottom: var(--av-space-5); }
.av-story__copy .av-body:first-child::first-letter {
  float: left; margin: 6px 12px 0 0; font-family: var(--av-font-display);
  font-size: 88px; line-height: 0.8; color: var(--av-ink-950);
}

.av-pillars {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(80px, 9cqi, 144px) 0 0; padding: 0; list-style: none;
  border-top: 1px solid var(--av-line-strong);
}
.av-pillar { display: flex; flex-direction: column; gap: var(--av-space-4); padding: var(--av-space-6) var(--av-space-6) 0 0; }
.av-pillar + .av-pillar { padding-left: var(--av-space-6); border-left: 1px solid var(--av-line); }
.av-pillar__num { font-size: var(--av-text-2xs); letter-spacing: var(--av-tracking-wide); color: var(--av-accent-soft); font-weight: 500; }
.av-pillar__title { margin: 0; font-family: var(--av-font-display); font-weight: 400; font-size: var(--av-text-xl); line-height: 1.1; }
.av-pillar .av-body { font-size: var(--av-text-base); }

.av-story__close {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--av-space-6);
  margin-top: clamp(96px, 11cqi, 176px);
}
.av-story__quote {
  margin: 0; max-width: 16ch; font-family: var(--av-font-display); font-weight: 400;
  font-size: clamp(40px, 5cqi, 80px); line-height: 1.06;
}
.av-story__quote em { display: block; font-style: italic; color: var(--av-accent-soft); }
.av-story__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--av-space-4) var(--av-space-6); margin-top: var(--av-space-4); }
.av-story__facts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--av-space-3) var(--av-space-6);
  margin-top: var(--av-space-8); padding-top: var(--av-space-6); border-top: 1px solid var(--av-line); width: 100%;
}

@container site (max-width: 1023px) {
  .av-story__aside { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: var(--av-space-7); }
  .av-story__agave { width: 180px; }
  .av-story__copy { grid-column: 1 / -1; }
  .av-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .av-pillar:nth-child(3) { padding-left: 0; border-left: 0; }
  .av-pillar:nth-child(n+3) { margin-top: var(--av-space-6); border-top: 1px solid var(--av-line); }
}
@container site (max-width: 639px) {
  .av-story__copy { column-count: 1; }
  .av-story__aside { flex-direction: column; align-items: flex-start; }
  .av-story__agave { width: 150px; }
  .av-pillars { grid-template-columns: minmax(0, 1fr); }
  .av-pillar, .av-pillar + .av-pillar { padding: var(--av-space-6) 0 0; border-left: 0; }
  .av-pillar:nth-child(n+2) { margin-top: var(--av-space-6); border-top: 1px solid var(--av-line); }
  .av-story__cta { flex-direction: column; align-items: stretch; width: 100%; }
  .av-story__cta .av-link { justify-content: center; }
}

/* =========================================================================
   PHASE 3 — The Agua Vida Experience (day → night)
   ========================================================================= */
@keyframes av-unmask { from { clip-path: inset(10% 8% 10% 8%); } to { clip-path: inset(0 0 0 0); } }
@keyframes av-settle-in { from { transform: scale(1.06); } to { transform: scale(1); } }
@supports (animation-timeline: view()) {
  .av-unmask { animation: av-unmask linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  .av-zoom-in { animation: av-settle-in linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .av-unmask, .av-zoom-in { animation: none !important; clip-path: none !important; transform: none !important; }
}

/* ---------- Experience opener ---------- */
.av-xp {
  position: relative; margin-top: -1px; padding: clamp(160px, 16cqi, 240px) 0 var(--av-space-10);
  background: linear-gradient(to bottom, var(--av-cream-100) 0, #CDBFA8 40px, #5A4D3F 130px, #1E1A16 220px, var(--av-ink-950) 300px);
}
.av-xp__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--av-space-5); align-items: end; }
.av-xp__head { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: var(--av-space-6); }
.av-xp__title { margin: 0; font-family: var(--av-font-display); font-weight: 400; font-size: clamp(52px, 7cqi, 112px); line-height: 1; letter-spacing: -0.015em; }
.av-xp__title em { font-style: italic; color: var(--av-accent-soft); }
.av-xp__sub { grid-column: 9 / span 4; }
.av-xp__chapters { list-style: none; margin: clamp(72px, 8cqi, 120px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--av-space-5); }
.av-xp__chapter { position: relative; border-top: 1px solid var(--av-line-strong); }
.av-xp__chapter::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--av-accent);
  transform: scaleX(0); transform-origin: left; transition: transform var(--av-dur-slow) var(--av-ease-out);
}
.av-xp__chapter:hover::before { transform: scaleX(1); }
.av-xp__link { display: flex; flex-direction: column; gap: var(--av-space-3); padding: var(--av-space-5) 0 var(--av-space-4); min-height: 44px; }
.av-xp__chapter-title { font-family: var(--av-font-display); font-size: var(--av-text-lg); line-height: 1.2; color: var(--av-text); transition: color var(--av-dur-base) ease; }
.av-xp__link:hover .av-xp__chapter-title { color: var(--av-accent-soft); }

@container site (max-width: 1023px) {
  .av-xp__head { grid-column: 1 / -1; }
  .av-xp__sub { grid-column: 1 / span 9; margin-top: var(--av-space-6); }
  .av-xp__chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--av-space-4); }
}
@container site (max-width: 639px) {
  .av-xp { padding-top: 140px; padding-bottom: var(--av-space-9); }
  .av-xp__sub { grid-column: 1 / -1; }
  .av-xp__chapters { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .av-xp__chapter:last-child { border-bottom: 1px solid var(--av-line-strong); }
  .av-xp__link { gap: var(--av-space-1); padding: var(--av-space-4) 0; }
}

/* ---------- Day · Afternoon — Blanco campaign moment (editorial, image-led) ---------- */
.av-day {
  --av-text: var(--av-ink-950);
  --av-text-muted: #564C42;
  --av-text-subtle: #6E6357;
  --av-accent-soft: #8A5A1C;
  --av-line: rgba(14, 13, 11, 0.14);
  --av-line-strong: rgba(14, 13, 11, 0.3);
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  background: #F4EEE2; color: var(--av-text);
}
/* The photograph: full section height, bleeding off the right edge, never cropped */
.av-day__media {
  grid-column: 2; grid-row: 1; margin: 0; position: relative;
  aspect-ratio: 1024 / 1536; width: 100%;
}
.av-day__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
/* Type block: set high so the oversized word crosses onto the open sky, not the bottle */
.av-day__body {
  grid-column: 1; grid-row: 1; position: relative; z-index: 2;
  align-self: start;
  padding: clamp(96px, 11cqi, 180px) clamp(32px, 4cqi, 72px) clamp(72px, 7cqi, 120px) max(var(--av-gutter), calc((100cqi - var(--av-container-max)) / 2));
  display: flex; flex-direction: column; align-items: flex-start;
}
.av-day .av-body { color: var(--av-text-muted); font-weight: 400; }
.av-day__kicker { display: flex; align-items: center; gap: var(--av-space-5); }
.av-day__num {
  font-family: var(--av-font-display); font-weight: 400; font-size: clamp(56px, 6cqi, 104px); line-height: 0.8;
  color: transparent; -webkit-text-stroke: 1px var(--av-accent-soft);
}
.av-day__title {
  margin: clamp(16px, 2cqi, 32px) 0 0; white-space: nowrap;
  font-family: var(--av-font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(84px, 13cqi, 220px); line-height: 0.86; letter-spacing: -0.01em;
  margin-right: calc(-1 * clamp(40px, 9cqi, 200px));
}
.av-day__notes {
  margin: clamp(28px, 3cqi, 48px) 0 0;
  font-family: var(--av-font-display); font-style: italic; font-size: clamp(22px, 2cqi, 30px); line-height: 1.3;
  color: var(--av-accent-soft);
}
.av-day__notes span { font-style: normal; opacity: 0.55; margin: 0 0.25em; }
.av-day__desc { margin-top: var(--av-space-5); max-width: 26em; }
.av-day__serve { margin: var(--av-space-6) 0 0; padding-top: var(--av-space-5); border-top: 1px solid var(--av-line); max-width: 30em; line-height: 1.8; }
.av-day__cta { margin-top: var(--av-space-6); color: var(--av-text); }

/* Tablet: image leads, full width, then the type — no side-by-side */
@container site (max-width: 1023px) {
  .av-day { grid-template-columns: minmax(0, 1fr); }
  .av-day__media { grid-column: 1; grid-row: 1; aspect-ratio: 3 / 4; }
  .av-day__body { grid-column: 1; grid-row: 2; padding: var(--av-space-8) var(--av-gutter) var(--av-space-9); }
  .av-day__title { margin-right: 0; font-size: clamp(72px, 17cqi, 150px); }
}
@container site (max-width: 639px) {
  .av-day__media { aspect-ratio: 1024 / 1536; }
  .av-day__body { padding-top: var(--av-space-7); padding-bottom: var(--av-space-8); }
  .av-day__title { font-size: clamp(64px, 20cqi, 96px); }
}

/* ---------- 02 · Golden hour (social, full-bleed) ---------- */
.av-moments { position: relative; padding-top: clamp(96px, 10cqi, 160px); background: var(--av-surface); overflow: hidden; }
.av-moments__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--av-space-5); align-items: end; }
.av-moments__title-wrap { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: var(--av-space-6); }
.av-moments__title { margin: 0; font-family: var(--av-font-display); font-weight: 400; font-size: clamp(44px, 5.6cqi, 88px); line-height: 1.04; }
.av-moments__title em { font-style: italic; color: var(--av-accent-soft); }
.av-moments__intro { grid-column: 9 / span 4; }
.av-moments__figure { position: relative; margin: clamp(56px, 6cqi, 96px) 0 0; aspect-ratio: 3 / 2; overflow: hidden; }
.av-moments__figure > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.av-moments__figure::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(22, 20, 18, 0.35), transparent 18%, transparent 78%, rgba(22, 20, 18, 0.6));
}
.av-moments__caption { position: absolute; z-index: 1; left: 0; right: 0; bottom: var(--av-space-6); display: flex; justify-content: space-between; }
.av-moments__caption .av-caption { color: var(--av-cream-100); }
.av-moments__words {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--av-space-4) var(--av-space-6);
  padding-block: clamp(56px, 6cqi, 96px);
  font-family: var(--av-font-display); font-style: italic; font-size: clamp(28px, 3.2cqi, 48px); line-height: 1.1; color: var(--av-text);
}
.av-moments__words span:nth-child(2) { color: var(--av-accent-soft); }

@container site (max-width: 1023px) {
  .av-moments__title-wrap { grid-column: 1 / -1; }
  .av-moments__intro { grid-column: 1 / span 9; margin-top: var(--av-space-6); }
}
@container site (max-width: 639px) {
  .av-moments__intro { grid-column: 1 / -1; }
  .av-moments__figure { aspect-ratio: auto; }
  .av-moments__figure { overflow: visible; }
  .av-moments__figure > img { aspect-ratio: 5 / 4; height: auto; }
  .av-moments__figure::after { display: none; }
  .av-moments__caption { position: static; padding-top: var(--av-space-4); }
  .av-moments__caption .av-caption:last-child { display: none; }
  .av-moments__words { flex-direction: column; gap: var(--av-space-2); }
}

/* ---------- 03 · The ritual + 04 · After dark (sticky cinematic panel) ---------- */
.av-evening { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--av-bg); }
.av-evening__panel {
  position: sticky; top: 0; height: var(--av-vh, min(100svh, 1000px)); min-height: 560px; overflow: hidden;
  display: flex; justify-content: flex-end; background: #080706;
}
.av-evening__frame { position: relative; margin: 0; height: 100%; width: min(100%, calc(var(--av-vh, min(100svh, 1000px)) * 0.86)); }
.av-evening__frame > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.av-evening__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(8, 7, 6, 0.35), transparent 22%, transparent 80%, rgba(14, 13, 11, 0.55)),
              linear-gradient(to bottom, transparent 70%, rgba(8, 7, 6, 0.7));
}
.av-evening__frame figcaption { position: absolute; z-index: 1; left: var(--av-space-7); right: var(--av-space-7); bottom: var(--av-space-7); display: flex; justify-content: space-between; gap: var(--av-space-4); }
.av-evening__frame figcaption .av-caption { color: var(--av-cream-100); }
.av-evening__content { display: flex; flex-direction: column; }
.av-evening__chapter {
  min-height: var(--av-vh, min(100svh, 1000px)); display: flex; flex-direction: column; justify-content: center; gap: var(--av-space-6);
  padding: var(--av-space-9) clamp(24px, 6cqi, 112px);
}
.av-evening__chapter + .av-evening__chapter { border-top: 1px solid var(--av-line); }
.av-evening__title { margin: 0; font-family: var(--av-font-display); font-weight: 400; font-size: clamp(44px, 4.8cqi, 76px); line-height: 1.04; }
.av-evening__title em { font-style: italic; color: var(--av-accent-soft); }

.av-recipe { margin-top: var(--av-space-4); padding: var(--av-space-6); border: 1px solid var(--av-line-strong); border-radius: var(--av-radius-sm); background: rgba(22, 20, 18, 0.6); }
.av-recipe__head { display: flex; flex-direction: column; gap: var(--av-space-2); padding-bottom: var(--av-space-5); border-bottom: 1px solid var(--av-line); }
.av-recipe__title { font-family: var(--av-font-display); font-size: var(--av-text-xl); line-height: 1.15; }
.av-recipe__list { list-style: none; margin: 0; padding: var(--av-space-4) 0; }
.av-recipe__row { display: flex; align-items: baseline; gap: var(--av-space-3); padding: 6px 0; font-size: var(--av-text-sm); color: var(--av-text); }
.av-recipe__leader { flex: 1; border-bottom: 1px dotted var(--av-line-strong); transform: translateY(-4px); }
.av-recipe__qty { color: var(--av-accent-soft); white-space: nowrap; }
.av-recipe__method { margin: 0; padding-top: var(--av-space-4); border-top: 1px solid var(--av-line); font-size: var(--av-text-sm); color: var(--av-text-muted); line-height: 1.6; }

.av-evening__support { position: relative; margin: var(--av-space-4) 0 0; width: min(100%, 420px); }
.av-evening__support-frame { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--av-radius-sm); box-shadow: var(--av-shadow-float); }
.av-evening__support-frame > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--av-ease-out); }
.av-evening__support:hover .av-evening__support-frame > img { transform: scale(1.02); }
.av-evening__support figcaption { display: flex; justify-content: space-between; gap: var(--av-space-4); margin-top: var(--av-space-4); }
.av-evening__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--av-space-4) var(--av-space-6); margin-top: var(--av-space-4); }

@container site (max-width: 767px) {
  .av-evening { grid-template-columns: minmax(0, 1fr); }
  .av-evening__panel { position: relative; height: auto; min-height: 0; display: block; }
  .av-evening__frame { width: 100%; height: auto; aspect-ratio: 4 / 5; }
  .av-evening__frame figcaption { left: var(--av-gutter); right: var(--av-gutter); bottom: var(--av-space-5); }
  .av-evening__chapter { min-height: 0; padding: var(--av-space-9) var(--av-gutter); }
  .av-evening__support { width: 100%; }
  .av-evening__cta { flex-direction: column; align-items: stretch; gap: var(--av-space-3); }
  .av-evening__cta .av-link { justify-content: center; }
}

/* =========================================================================
   PHASE 4 — Motion, depth & interaction polish
   Everything scroll-linked runs on CSS scroll timelines (compositor-friendly,
   no libraries). JS is limited to pointer depth + header state.
   ========================================================================= */
.av-site { --av-reveal-y: 40px; --av-curtain-x: 3%; }

/* reveal keyframes now read a per-device distance */
@keyframes av-reveal { from { opacity: 0; transform: translate3d(0, var(--av-reveal-y), 0); } to { opacity: 1; transform: none; } }
@keyframes av-mask-up {
  from { opacity: 0.001; clip-path: inset(0 0 100% 0); translate: 0 var(--av-reveal-y); }
  to   { opacity: 1; clip-path: inset(-12% -4% -22% -4%); translate: 0 0; }
}
@keyframes av-curtain {
  from { clip-path: inset(0 var(--av-curtain-x) 0 var(--av-curtain-x) round 36px 36px 0 0); }
  to   { clip-path: inset(0 0 0 0 round 0 0 0 0); }
}
@keyframes av-rise-in { from { opacity: 0; scale: 0.94; } to { opacity: 1; scale: 1; } }
@keyframes av-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes av-hero-exit { from { opacity: 1; translate: 0 0; } to { opacity: 0.25; translate: 0 -56px; } }

@supports (animation-timeline: view()) {
  .av-reveal-mask { animation: av-mask-up linear both; animation-timeline: view(); animation-range: entry 5% cover 30%; }
  .av-curtain { animation: av-curtain linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
  .av-rise-in { animation: av-rise-in linear both; animation-timeline: view(); animation-range: entry 0% cover 32%; }
  .av-hero__inner { animation: av-hero-exit linear both; animation-timeline: scroll(root block); animation-range: 0 85vh; }
  .av-header__progress { animation: av-progress linear both; animation-timeline: scroll(root block); }
  /* staggered word reveal */
  .av-moments__words span { animation: av-reveal linear both; animation-timeline: view(); }
  .av-moments__words span:nth-child(1) { animation-range: entry 0% entry 70%; }
  .av-moments__words span:nth-child(2) { animation-range: entry 15% entry 85%; }
  .av-moments__words span:nth-child(3) { animation-range: entry 30% entry 100%; }
}

/* ---------- Header: hide on scroll down, progress line, active section ---------- */
.av-header {
  transition: background-color var(--av-dur-base) var(--av-ease-out), border-color var(--av-dur-base) var(--av-ease-out),
              backdrop-filter var(--av-dur-base) var(--av-ease-out), transform var(--av-dur-slow) var(--av-ease-out);
}
.av-header.is-hidden { transform: translate3d(0, -100%, 0); }
.av-header__progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, var(--av-amber-600), var(--av-amber-300));
  transform-origin: left; transform: scaleX(0); opacity: 0; transition: opacity var(--av-dur-base) ease;
}
.av-header.is-scrolled .av-header__progress { opacity: 1; }
.av-header.is-open .av-header__progress { opacity: 0; }
.av-nav__link.is-active { color: var(--av-text); }
.av-nav__link.is-active::after { left: 0; right: 0; }
.av-brand__mark { transition: color var(--av-dur-base) ease, transform var(--av-dur-slow) var(--av-ease-out); }
.av-brand:hover .av-brand__mark { color: var(--av-amber-300); transform: translateY(-2px); }
.av-burger { transition: border-color var(--av-dur-base) ease, background-color var(--av-dur-base) ease; }
.av-burger:hover { border-color: var(--av-accent); background: rgba(200, 145, 63, 0.08); }

/* ---------- Mobile menu: staggered, layered ---------- */
.av-menu { overflow: hidden; }
.av-menu__mark { position: absolute; right: -60px; bottom: 96px; width: 320px; height: auto; color: var(--av-cream-100); opacity: 0.05; pointer-events: none; }
.av-menu__item, .av-menu__foot {
  opacity: 0; translate: 0 18px;
  transition: opacity 400ms ease, translate 700ms var(--av-ease-out);
}
.av-header.is-open .av-menu__item, .av-header.is-open .av-menu__foot {
  opacity: 1; translate: 0 0; transition-delay: calc(140ms + var(--i, 0) * 70ms);
}
.av-menu__link { position: relative; transition: color var(--av-dur-base) ease, padding var(--av-dur-base) var(--av-ease-out); }
.av-menu__arrow { width: 20px; height: 20px; margin-left: auto; align-self: center; color: var(--av-text-muted); opacity: 0.5; transition: transform var(--av-dur-base) var(--av-ease-out), opacity var(--av-dur-base) ease, color var(--av-dur-base) ease; }
.av-menu__link:hover, .av-menu__link:focus-visible { color: var(--av-accent-soft); padding-left: 6px; }
.av-menu__link:hover .av-menu__arrow { transform: translateX(4px); opacity: 1; color: var(--av-accent-soft); }
.av-menu__link.is-active .av-menu__num { color: var(--av-cream-100); }
.av-menu__link.is-active::before { content: ""; position: absolute; left: -14px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--av-accent); transform: translateY(-50%); }

/* ---------- Buttons & links: tactile, accessible ---------- */
.av-btn { transition: color var(--av-dur-base) var(--av-ease-out), border-color var(--av-dur-base) var(--av-ease-out), scale var(--av-dur-fast) ease, box-shadow var(--av-dur-base) ease; }
.av-btn:hover { box-shadow: 0 14px 34px -18px rgba(200, 145, 63, 0.55); }
.av-btn:active { scale: 0.98; }
.av-btn--dark:hover { --av-btn-fg: var(--av-ink-950); }
.av-link, .av-index__link, .av-xp__link, .av-menu__link, .av-nav__link, .av-brand, .av-btn, .av-burger { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.av-link { transition: color var(--av-dur-base) ease; }
.av-link:hover { color: var(--av-accent-soft); }
.av-site .av-btn:focus-visible, .av-site .av-link:focus-visible, .av-site .av-nav__link:focus-visible,
.av-site .av-burger:focus-visible, .av-site .av-index__link:focus-visible, .av-site .av-xp__link:focus-visible,
.av-site .av-menu__link:focus-visible, .av-site .av-brand:focus-visible, .av-site .av-product__frame:focus-visible {
  outline: 1px solid var(--av-accent-soft); outline-offset: 5px; border-radius: var(--av-radius-sm);
}
.av-scroll { cursor: pointer; transition: color var(--av-dur-base) ease; }
.av-scroll:hover .av-caption { color: var(--av-text); }

/* ---------- Hero depth (driven by the existing --av-mx / --av-my / --av-sy on [data-av-hero]) ---------- */
.av-hero__bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(40cqi circle at calc(32% + var(--av-mx) * 3%) calc(45% + var(--av-my) * 3%), rgba(255, 236, 205, 0.1), transparent 60%);
}

/* ---------- Product depth: layered parallax + moving light (no tilt, no distortion) ---------- */
.av-product { --px: 0; --py: 0; --sheen: 0; }
.av-product__frame {
  translate: calc(var(--px) * 10px) calc(var(--py) * 10px);
  box-shadow: calc(var(--px) * -26px) calc(36px + var(--py) * -18px) 80px -28px rgba(0, 0, 0, 0.8);
  transition: translate 800ms var(--av-ease-out), box-shadow 800ms var(--av-ease-out);
}
.av-product__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(420px circle at calc(50% + var(--px) * 45%) calc(38% + var(--py) * 45%), rgba(255, 244, 225, 0.2), transparent 62%);
  opacity: var(--sheen); transition: opacity 700ms ease;
}
.av-product__media::before { translate: calc(var(--px) * -28px) calc(var(--py) * -28px); transition: translate 1000ms var(--av-ease-out); }
.av-product__num { translate: calc(var(--px) * -16px) calc(var(--py) * -10px); transition: translate 1000ms var(--av-ease-out); }
.av-product__index { translate: calc(var(--px) * 6px) calc(var(--py) * 6px); transition: translate 800ms var(--av-ease-out); }

/* ---------- Mobile & touch: calmer motion ---------- */
@media (max-width: 767px), (hover: none) {
  .av-site { --av-reveal-y: 22px; --av-curtain-x: 12px; }
  .av-drift { animation: none !important; transform: none !important; }
  .av-hero__inner { animation: none !important; }
  .av-product__frame { translate: none; }
  .av-hero__bg-img { transform: none !important; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .av-reveal-mask, .av-curtain, .av-rise-in, .av-hero__inner, .av-moments__words span { animation: none !important; opacity: 1 !important; clip-path: none !important; translate: none !important; scale: none !important; }
  .av-header.is-hidden { transform: none; }
  .av-menu__item, .av-menu__foot { transition: none; }
}


/* =========================================================================
   COMPONENT — Footer (Find a Bottle + site index)
   ========================================================================= */
.av-footer { position: relative; overflow: hidden; background: #0A0908; border-top: 1px solid var(--av-line); padding-top: clamp(96px, 10cqi, 160px); }
.av-footer__find {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--av-space-5); align-items: end;
  padding-bottom: clamp(72px, 8cqi, 120px); border-bottom: 1px solid var(--av-line);
}
.av-footer__find-text { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: var(--av-space-6); }
.av-footer__title { margin: 0; font-family: var(--av-font-display); font-weight: 400; font-size: clamp(52px, 6.4cqi, 104px); line-height: 1.02; letter-spacing: -0.015em; }
.av-footer__title em { font-style: italic; color: var(--av-accent-soft); }
.av-footer__expressions { grid-column: 9 / span 4; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--av-line); }
.av-footer__expr { border-top: 1px solid var(--av-line); }
.av-footer__expr--blanco { --av-expr: var(--av-expr-blanco); }
.av-footer__expr--reposado { --av-expr: var(--av-expr-reposado); }
.av-footer__expr--anejo { --av-expr: var(--av-expr-anejo); }
.av-footer__expr-link { display: flex; align-items: center; justify-content: space-between; gap: var(--av-space-4); min-height: 64px; }
.av-footer__expr-name { display: inline-flex; align-items: center; gap: var(--av-space-3); font-family: var(--av-font-display); font-size: 28px; line-height: 1.1; transition: transform var(--av-dur-base) var(--av-ease-out), color var(--av-dur-base) ease; }
.av-footer__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--av-expr); }
.av-footer__expr-link:hover .av-footer__expr-name { transform: translateX(8px); color: var(--av-accent-soft); }

.av-footer__main { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--av-space-7); padding-block: var(--av-space-9) var(--av-space-8); }
.av-footer__brand { display: flex; flex-direction: column; gap: var(--av-space-5); align-items: flex-start; }
.av-footer__tagline { font-size: var(--av-text-base); max-width: 24em; }
.av-footer__col { display: flex; flex-direction: column; gap: var(--av-space-4); }
.av-footer__heading { margin: 0; color: var(--av-accent-soft); }
.av-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--av-space-1); }
.av-footer__link { display: inline-flex; align-items: center; min-height: 36px; font-size: var(--av-text-base); color: var(--av-text-muted); transition: color var(--av-dur-base) ease; }
.av-footer__link:hover { color: var(--av-text); }
.av-footer__links--static li { font-size: var(--av-text-base); color: var(--av-text-muted); line-height: 1.5; padding-block: 6px; }

.av-footer__word {
  margin: 0 0 -0.14em; text-align: center; white-space: nowrap; user-select: none; pointer-events: none;
  font-family: var(--av-font-display); font-weight: 400; font-size: clamp(48px, 17cqi, 300px); line-height: 0.9; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(241, 234, 220, 0.16);
}
.av-footer__legal { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--av-space-3) var(--av-space-6); padding-block: var(--av-space-5) var(--av-space-6); border-top: 1px solid var(--av-line); background: #0A0908; }
.av-footer__top-icon { transform: none; }
.av-footer__top:hover .av-footer__top-icon { transform: translateY(-3px); }

@container site (max-width: 1023px) {
  .av-footer__find-text { grid-column: 1 / -1; }
  .av-footer__expressions { grid-column: 1 / -1; margin-top: var(--av-space-8); }
  .av-footer__main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .av-footer__brand { grid-column: 1 / -1; }
}
@container site (max-width: 639px) {
  .av-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--av-space-7); }
  .av-footer__col:last-child { grid-column: 1 / -1; }
  .av-footer__legal { flex-direction: column; align-items: flex-start; }
}

/* Skip link */
.av-skip {
  position: fixed; left: 16px; top: -80px; z-index: 200; padding: 12px 18px;
  background: var(--av-cream-100); color: var(--av-ink-950) !important; border-radius: var(--av-radius-sm);
  font-size: var(--av-text-xs); font-weight: 500; letter-spacing: var(--av-tracking-wide); text-transform: uppercase;
  transition: top var(--av-dur-base) var(--av-ease-out);
}
.av-skip:focus { top: 16px; }

/* ---------- Founder ------------------------------------------------------- */
.av-founder {
  --av-text: var(--av-ink-950);
  --av-text-muted: #564C42;
  --av-accent-soft: #8A5A1C;
  position: relative; overflow: hidden;
  padding-block: clamp(80px, 9cqi, 144px);
  background: var(--av-cream-100); color: var(--av-text);
}
.av-founder .av-eyebrow { color: var(--av-accent-soft); }
.av-founder .av-body { color: var(--av-text-muted); font-weight: 400; }
.av-founder__grid {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(48px, 7cqi, 112px); align-items: center;
}
.av-founder__media {
  position: relative; margin: 0; border-radius: var(--av-radius-sm); overflow: hidden;
  aspect-ratio: 1 / 1; max-width: 440px;
}
.av-founder__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-founder__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--av-space-5); }
.av-founder__title { font-family: var(--av-font-display); font-weight: 400; font-size: clamp(36px, 4.4cqi, 56px); line-height: 1.05; letter-spacing: -0.01em; margin: 0; color: var(--av-text); }
.av-founder__title em { font-style: italic; color: var(--av-accent-soft); }
.av-founder__body .av-body { max-width: 34em; }
.av-founder__linkedin { color: var(--av-text); margin-top: var(--av-space-2); }
.av-founder__linkedin .av-link__label::after { background: var(--av-accent-soft); }

@container site (max-width: 1023px) {
  .av-founder__grid { grid-template-columns: minmax(0, 1fr); gap: var(--av-space-8); }
  .av-founder__media { order: -1; max-width: 320px; }
}
@container site (max-width: 639px) {
  .av-founder__media { max-width: 240px; }
}

/* ---------- Jalapeño Blanco feature ---------------------------------------- */
.av-heat {
  position: relative; overflow: hidden;
  padding-block: clamp(72px, 8cqi, 128px);
  background: var(--av-surface); color: var(--av-text);
}
.av-heat__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 6cqi, 96px); align-items: center;
}
.av-heat__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--av-space-4); }
.av-heat__title { font-family: var(--av-font-display); font-weight: 400; font-size: clamp(32px, 4cqi, 48px); line-height: 1.08; letter-spacing: -0.01em; margin: 0; }
.av-heat__title em { font-style: italic; color: var(--av-accent-soft); }
.av-heat__media { position: relative; margin: 0; border-radius: var(--av-radius-sm); overflow: hidden; background: var(--av-ink-900); }
.av-heat__media img { width: 100%; height: auto; display: block; }

@container site (max-width: 1023px) {
  .av-heat__grid { grid-template-columns: minmax(0, 1fr); gap: var(--av-space-7); }
  .av-heat__media { order: -1; max-width: 380px; margin-inline: auto; }
}

/* ---------- Retail / partner CTA ------------------------------------------ */
.av-retail {
  position: relative; padding-block: clamp(56px, 6cqi, 88px);
  background: var(--av-ink-900); color: var(--av-text);
  border-block: 1px solid var(--av-line);
}
.av-retail__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--av-space-7); flex-wrap: wrap;
}
.av-retail__title { font-family: var(--av-font-display); font-weight: 400; font-size: clamp(28px, 3.2cqi, 40px); line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
.av-retail__title em { font-style: italic; color: var(--av-accent-soft); }
.av-retail__cta { flex-shrink: 0; }

@container site (max-width: 767px) {
  .av-retail__row { flex-direction: column; align-items: flex-start; }
}

/* ---------- Contact / inquiry form ----------------------------------------- */
.av-contact {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(48px, 6cqi, 96px);
  margin-top: clamp(72px, 8cqi, 120px); padding-top: clamp(56px, 6cqi, 88px);
  border-top: 1px solid var(--av-line);
}
.av-contact__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--av-space-4); }
.av-contact__title { font-family: var(--av-font-display); font-weight: 400; font-size: clamp(30px, 3.4cqi, 42px); line-height: 1.1; letter-spacing: -0.01em; margin: 0; color: var(--av-text); }
.av-contact__details { list-style: none; margin: var(--av-space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--av-space-3); }
.av-contact__details li { color: var(--av-text-subtle); font-size: var(--av-text-sm); }

.av-contact__form { display: flex; flex-direction: column; gap: var(--av-space-5); }
.av-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--av-space-5); }
.av-field { display: flex; flex-direction: column; gap: var(--av-space-2); position: relative; }
.av-field label { font-size: var(--av-text-xs); font-weight: 500; letter-spacing: var(--av-tracking-wide); text-transform: uppercase; color: var(--av-text-subtle); }
.av-field input, .av-field select, .av-field textarea {
  width: 100%; font-family: var(--av-font-sans); font-size: var(--av-text-sm); color: var(--av-text);
  background: transparent; border: 1px solid var(--av-line-strong); border-radius: var(--av-radius-sm);
  padding: 12px 14px; min-height: 48px; transition: border-color var(--av-dur-base) var(--av-ease-out);
}
.av-field textarea { min-height: 120px; resize: vertical; }
.av-field select { appearance: none; cursor: pointer; }
.av-field select option { background: var(--av-ink-900); color: var(--av-text); }
.av-field input::placeholder, .av-field textarea::placeholder { color: var(--av-text-subtle); }
.av-field input:focus-visible, .av-field select:focus-visible, .av-field textarea:focus-visible {
  outline: 1px solid var(--av-accent-soft); outline-offset: 2px; border-color: var(--av-accent-soft);
}
.av-field--invalid input, .av-field--invalid select, .av-field--invalid textarea { border-color: #C0503D; }
.av-field__error {
  display: none; font-size: var(--av-text-2xs); letter-spacing: var(--av-tracking-wide);
  color: #E4806A; min-height: 1em;
}
.av-field--invalid .av-field__error { display: block; }

.av-contact__submit { align-self: flex-start; margin-top: var(--av-space-2); }
.av-contact__submit[disabled] { opacity: 0.6; cursor: default; pointer-events: none; }
.av-contact__submit[disabled]::after { display: none; }
.av-contact__status {
  min-height: 1.4em; margin: 0; font-size: var(--av-text-xs); letter-spacing: var(--av-tracking-wide);
  color: var(--av-text-subtle);
}
.av-contact__status--success { color: var(--av-accent-soft); }
.av-contact__status--error { color: #E4806A; }

@container site (max-width: 1023px) {
  .av-contact { grid-template-columns: minmax(0, 1fr); gap: var(--av-space-7); }
}
@container site (max-width: 639px) {
  .av-field-row { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   MULTI-PAGE — shared page furniture
   ========================================================================= */
.av-footer { padding-top: 0; }
.av-footer__heading-link { color: inherit; }
.av-footer__heading-link:hover { color: var(--av-text); }
.av-preview-link { margin-top: var(--av-space-6); align-self: flex-start; }
.av-page-top { padding-top: calc(var(--av-header-h, 96px) + clamp(48px, 6cqi, 96px)) !important; }
.av-header__cta.is-active { border-color: var(--av-accent-soft); }

/* Home: collection preview + tequila page opener need their own bottom edge now */
.av-collection--preview, .av-page-tequila .av-collection { padding-bottom: clamp(96px, 10cqi, 160px); }
.av-collection__text { display: flex; flex-direction: column; }

/* Home: story preview */
.av-story--preview { padding-block: clamp(96px, 10cqi, 160px); }
.av-story-preview__row {
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--av-space-7); flex-wrap: wrap;
  margin-top: clamp(40px, 5cqi, 72px); padding-top: var(--av-space-6); border-top: 1px solid var(--av-line);
}
.av-story-preview__row .av-body { max-width: 36em; }
.av-story-preview__row .av-preview-link { margin-top: 0; }

/* Home: moments preview link */
.av-moments__intro .av-preview-link { margin-top: var(--av-space-5); }

/* =========================================================================
   /tequila — expressions (extends the editorial .av-day layout)
   ========================================================================= */
.av-day__facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--av-space-5);
  margin: var(--av-space-7) 0 0; padding-top: var(--av-space-5); border-top: 1px solid var(--av-line); width: min(100%, 560px);
}
.av-day__fact dt { display: block; margin-bottom: var(--av-space-2); }
.av-day__fact dd { margin: 0; font-size: var(--av-text-sm); line-height: 1.5; color: var(--av-text); }

/* Oak (Reposado) — warm, rested; image leads on the left */
.av-day--oak {
  --av-text: var(--av-cream-100); --av-text-muted: rgba(241, 234, 220, 0.72); --av-text-subtle: rgba(241, 234, 220, 0.56);
  --av-accent-soft: var(--av-amber-300); --av-line: rgba(241, 234, 220, 0.16); --av-line-strong: rgba(241, 234, 220, 0.32);
  background: #231A13;
}
/* Night (Añejo) — the darkest pour; the word crosses onto the black of the photograph */
.av-day--night {
  --av-text: var(--av-cream-100); --av-text-muted: rgba(241, 234, 220, 0.7); --av-text-subtle: rgba(241, 234, 220, 0.52);
  --av-accent-soft: var(--av-amber-300); --av-line: rgba(241, 234, 220, 0.14); --av-line-strong: rgba(241, 234, 220, 0.3);
  background: #0B0A09;
}
.av-day--reverse { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
.av-day--reverse .av-day__media { grid-column: 1; }
.av-day--reverse .av-day__body {
  grid-column: 2;
  padding-left: clamp(40px, 6cqi, 112px);
  padding-right: max(var(--av-gutter), calc((100cqi - var(--av-container-max)) / 2));
}
.av-day--reverse .av-day__title { margin-right: 0; }
@container site (max-width: 1023px) {
  .av-day__facts { grid-template-columns: minmax(0, 1fr); gap: var(--av-space-4); }
  .av-day--reverse { grid-template-columns: minmax(0, 1fr); }
  .av-day--reverse .av-day__media { grid-column: 1; }
  .av-day--reverse .av-day__body { grid-column: 1; padding: var(--av-space-8) var(--av-gutter) var(--av-space-9); }
}

/* Jalapeño Blanco on the tequila page */
.av-heat__title { font-size: clamp(48px, 6cqi, 104px); line-height: 0.98; }
.av-heat__body .av-day__notes { margin-top: var(--av-space-2); }
.av-heat__cta { margin-top: var(--av-space-5); }
.av-heat__body .av-day__kicker { margin-bottom: var(--av-space-3); }

/* =========================================================================
   /story — typographic page hero, image band
   ========================================================================= */
.av-phero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(92svh, 980px); display: flex; align-items: flex-end;
  padding: calc(var(--av-header-h, 96px) + var(--av-space-8)) 0 clamp(64px, 7cqi, 112px);
  background: radial-gradient(ellipse 70% 60% at 80% 100%, rgba(201, 138, 62, 0.14), transparent 70%), var(--av-bg);
}
.av-phero__art { position: absolute; z-index: -1; right: -4%; bottom: -6%; width: min(62cqi, 820px); color: var(--av-cream-100); opacity: 0.1; pointer-events: none; }
.av-phero__agave { width: 100%; height: auto; display: block; }
.av-phero__inner { position: relative; }
.av-phero__title {
  margin: var(--av-space-6) 0 0; font-family: var(--av-font-display); font-weight: 400;
  font-size: clamp(52px, 7.6cqi, 132px); line-height: 1.02; letter-spacing: -0.015em; max-width: 14ch;
}
.av-phero__title > span { display: block; }
.av-phero__title em { font-style: italic; color: var(--av-accent-soft); }
.av-phero__foot { display: block; margin-top: var(--av-space-7); }

.av-story--first { padding-top: clamp(96px, 10cqi, 160px); padding-bottom: clamp(96px, 10cqi, 160px); }
.av-story__statement--sm { font-size: clamp(40px, 4.6cqi, 76px); max-width: 17ch; }
.av-story--first .av-story__grid { margin-top: clamp(56px, 6cqi, 96px); }
.av-story--pillars { padding-top: clamp(72px, 8cqi, 128px); }
.av-story--pillars .av-pillars { margin-top: 0; }

.av-band { position: relative; background: #070606; overflow: hidden; }
.av-band__figure { margin: 0; height: clamp(460px, 82svh, 900px); }
.av-band__figure img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; display: block; }
.av-band__figure::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(7,6,6,0.85) 0%, rgba(7,6,6,0.45) 38%, transparent 62%), linear-gradient(to top, rgba(7,6,6,0.6), transparent 40%); }
.av-band__text { position: absolute; left: 0; right: 0; bottom: clamp(48px, 7cqi, 112px); }
.av-band__line { margin: var(--av-space-5) 0 0; font-family: var(--av-font-display); font-size: clamp(40px, 5.4cqi, 92px); line-height: 1.02; max-width: 12ch; color: var(--av-cream-100); }
.av-band__line em { font-style: italic; color: var(--av-accent-soft); display: block; }
@container site (max-width: 767px) {
  .av-band__figure { height: 78svh; }
  .av-band__figure img { object-position: 76% 50%; }
  .av-band__figure::after { background: linear-gradient(to top, rgba(7,6,6,0.92) 0%, rgba(7,6,6,0.55) 38%, transparent 64%); }
}

/* =========================================================================
   /founder
   ========================================================================= */
.av-fhero {
  position: relative; overflow: hidden;
  padding: calc(var(--av-header-h, 96px) + clamp(40px, 5cqi, 80px)) 0 clamp(72px, 8cqi, 128px);
  background: var(--av-bg);
}
.av-fhero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6cqi, 112px); align-items: end; }
.av-fhero__media { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--av-radius-sm); background: var(--av-surface); }
.av-fhero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.av-fhero__body { padding-bottom: var(--av-space-4); }
.av-fhero__name {
  margin: var(--av-space-6) 0 0; font-family: var(--av-font-display); font-weight: 400;
  font-size: clamp(64px, 10cqi, 184px); line-height: 0.92; letter-spacing: -0.02em;
}
.av-fhero__name > span { display: block; }
.av-fhero__name-2 { font-style: italic; color: var(--av-accent-soft); padding-left: 0.5em; }
.av-fhero__role { display: block; margin-top: var(--av-space-7); color: var(--av-text-muted); }

.av-fstory {
  --av-text: var(--av-ink-950); --av-text-muted: #564C42; --av-accent-soft: #8A5A1C; --av-line: rgba(14, 13, 11, 0.14);
  padding-block: clamp(96px, 11cqi, 176px); background: var(--av-cream-100); color: var(--av-text);
}
.av-fstory__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--av-space-5); align-items: start; }
.av-fstory__lead { grid-column: 1 / span 6; margin: 0; font-family: var(--av-font-display); font-weight: 400; font-size: clamp(38px, 4.4cqi, 72px); line-height: 1.06; letter-spacing: -0.01em; }
.av-fstory__lead em { font-style: italic; color: var(--av-accent-soft); }
.av-fstory__copy { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: var(--av-space-5); }
.av-fstory .av-body { color: var(--av-text-muted); font-weight: 400; }
.av-fstory__place { margin-top: var(--av-space-4); padding-top: var(--av-space-5); border-top: 1px solid var(--av-line); color: var(--av-accent-soft); }

.av-fconnect { padding-block: clamp(80px, 9cqi, 144px); background: var(--av-surface); border-top: 1px solid var(--av-line); }
.av-fconnect__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--av-space-7); flex-wrap: wrap; }
.av-fconnect__title { margin: var(--av-space-5) 0 0; font-family: var(--av-font-display); font-weight: 400; font-size: clamp(40px, 5cqi, 84px); line-height: 1.02; }
.av-fconnect__title em { font-style: italic; color: var(--av-accent-soft); }
.av-fconnect__links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--av-space-3); }
.av-link--lg { font-size: var(--av-text-md); }

@container site (max-width: 1023px) {
  .av-fhero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--av-space-7); align-items: start; }
  .av-fhero__media { max-width: 440px; }
  .av-fstory__lead, .av-fstory__copy { grid-column: 1 / -1; }
  .av-fstory__copy { margin-top: var(--av-space-7); }
}
@container site (max-width: 639px) {
  .av-fhero__media { max-width: none; aspect-ratio: 1 / 1; }
  .av-fhero__name { font-size: clamp(60px, 19cqi, 96px); }
}

/* =========================================================================
   /experience — Day poster
   ========================================================================= */
.av-poster {
  --av-text: var(--av-ink-950); --av-text-muted: #564C42; --av-accent-soft: #8A5A1C; --av-line: rgba(14, 13, 11, 0.14);
  position: relative; overflow: hidden; background: #F4EEE2; color: var(--av-text);
  padding-block: clamp(80px, 9cqi, 144px);
}
.av-poster__stage { position: relative; width: min(100% - var(--av-gutter) * 2, var(--av-container-max)); margin-inline: auto; }
.av-poster__media {
  margin: 0 0 0 auto; margin-right: 8%; width: min(46%, calc(90svh * 2 / 3)); aspect-ratio: 1024 / 1536; overflow: hidden;
}
.av-poster__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-poster__head { position: absolute; left: 0; top: 9%; width: 64%; z-index: 2; }
.av-poster__title { margin: var(--av-space-5) 0 0; font-family: var(--av-font-display); font-weight: 400; font-size: clamp(48px, 6.6cqi, 124px); line-height: 0.98; letter-spacing: -0.015em; }
.av-poster__title em { display: block; font-style: italic; color: var(--av-accent-soft); }
.av-poster__foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--av-space-6); flex-wrap: wrap; margin-top: var(--av-space-7); }
.av-poster .av-body { color: var(--av-text-muted); font-weight: 400; max-width: 30em; }
@container site (max-width: 1023px) {
  .av-poster__head { position: static; width: auto; margin-bottom: var(--av-space-7); }
  .av-poster__stage { display: flex; flex-direction: column-reverse; }
  .av-poster__media { width: 100%; margin: 0; aspect-ratio: 3 / 4; }
  .av-poster__media img { object-position: 50% 30%; }
}
@container site (max-width: 639px) { .av-poster__media { aspect-ratio: 1024 / 1536; } }

/* =========================================================================
   /contact
   ========================================================================= */
.av-cpage {
  position: relative; overflow: hidden;
  padding: calc(var(--av-header-h, 96px) + clamp(56px, 7cqi, 112px)) 0 clamp(96px, 10cqi, 160px);
  background: radial-gradient(ellipse 60% 50% at 90% 0%, rgba(201, 138, 62, 0.12), transparent 70%), var(--av-bg);
}
.av-cpage__head { max-width: 900px; }
.av-cpage__title { margin: var(--av-space-6) 0 0; font-family: var(--av-font-display); font-weight: 400; font-size: clamp(60px, 9cqi, 160px); line-height: 0.96; letter-spacing: -0.02em; }
.av-cpage__title em { font-style: italic; color: var(--av-accent-soft); }
.av-cpage__lede { margin-top: var(--av-space-6); max-width: 36em; }
.av-cpage--404 { min-height: 80svh; }
.av-cpage--404 .av-link { margin-top: var(--av-space-6); }
.av-contact--page { margin-top: clamp(64px, 7cqi, 112px); }
dl.av-contact__details { display: flex; flex-direction: column; gap: var(--av-space-5); margin: var(--av-space-5) 0 0; }
dl.av-contact__details dt { display: block; margin-bottom: var(--av-space-1); }
dl.av-contact__details dd { margin: 0; color: var(--av-text); font-size: var(--av-text-md); overflow-wrap: anywhere; }
/* Long names (Reposado) sit fully inside their column: size the word to the text column itself */
.av-day--reverse .av-day__body { container-type: inline-size; }
.av-day--reverse .av-day__title { font-size: min(15.5cqi, 200px); }
.av-index__item--jalapeno { --av-expr: #6FA35A; }
.av-retail__title { margin-block: var(--av-space-3) var(--av-space-4); }
.av-page-experience .av-xp {
  margin-top: 0; padding-bottom: clamp(96px, 10cqi, 160px);
  background: radial-gradient(ellipse 60% 70% at 88% 0%, rgba(201, 138, 62, 0.14), transparent 70%), var(--av-ink-950);
}
.av-page-story .av-story__agave { display: none; }
.av-cpage__title > span { display: block; }
dl.av-contact__details dd .av-footer__link { color: var(--av-text); }
@container site (max-width: 767px) {
  .av-band { display: flex; flex-direction: column-reverse; }
  .av-band__text { position: static; padding-block: var(--av-space-8) var(--av-space-6); }
  .av-band__figure { height: 72svh; }
  .av-band__figure img { object-position: 50% 40%; }
  .av-band__figure::after { background: linear-gradient(to bottom, #070606 0%, transparent 18%); }
}