/* ==========================================================================
   GameDay Vodka — styles.css
   Order: tokens → reset → base type → layout → components → sections →
          reveals (motion-guarded) → responsive → reduced motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* palette — structural */
  --gd-black: #0B0B0C;
  --gd-white: #F5F3EE;
  --black: var(--gd-black);
  --ink: #131315;
  --ink-2: #191A1C;
  --white: var(--gd-white);
  --gray: #9C9A94;

  /* palette — flavor accents.
     Extracted from the inline --accent properties that used to sit on the Spiked
     cards; contrast audit in docs/CURRENT-STATE.md. Ratios are against --gd-black. */
  --flavor-cinderella: #E8567C;  /*  5.67:1 — clears AA body */
  --flavor-closer:     #7D4E9E;  /*  3.24:1 — display type and non-text only */
  --flavor-cleat:      #A4C639;  /* 10.04:1 — clears AA body */
  --flavor-goat:       #E03A4E;  /*  4.58:1 — clears AA body */

  /* The Closer is the one flavor that misses the 4.5:1 body threshold. This tint
     is the brand purple with 15% white mixed in and clears it at 4.51:1. Use it
     for Closer-colored text below display size; the true hex keeps the big type,
     the swatches, the fills and the rules. */
  --flavor-closer-type: #9069AD;

  /* Scoped accent. Every flavor block overrides these two; the fallback is white
     so an un-themed section can never lose contrast. */
  --flavor-active: var(--gd-white);
  --flavor-active-type: var(--gd-white);
  --line: rgba(245, 243, 238, .14);
  --line-strong: rgba(245, 243, 238, .34);
  --dark-line: rgba(11, 11, 12, .16);
  --dark-muted: #55534E;

  /* type */
  --font-display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-h2: clamp(42px, 6.4vw, 96px);
  --fs-h2-sm: clamp(34px, 4.2vw, 62px);
  --fs-h3: clamp(21px, 1.8vw, 28px);
  --fs-lead: clamp(17px, 1.35vw, 22px);
  --fs-body: clamp(16px, 1.05vw, 18px);
  --fs-kicker: clamp(11px, .85vw, 13px);
  --ls-display: .02em;
  --ls-kicker: .28em;

  /* rhythm — 8px base */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 40px;
  --s6: 48px;
  --s7: 56px;
  --s8: 64px;
  --s10: 80px;
  --section-y: clamp(88px, 11vw, 168px);

  /* layout */
  --container: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --header-h: 76px;

  /* motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur: .25s;

  /* z-scale */
  --z-header: 50;
  --z-detail: 60;
  --z-gate: 100;

  /* textures — both sit under a 0.84-0.97 scrim, so they take hard
     compression: 184KB of JPEG becomes 32KB of WebP. The .jpg originals stay
     in assets/img/brand for anything that needs them. */
  --tex-1: url("../assets/img/opt/bg-decorative-1.webp");
  --tex-2: url("../assets/img/opt/bg-decorative-2.webp");
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: auto;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* scroll-lock hooks (age gate / mobile nav / detail overlay) */
body.is-locked,
body.no-scroll,
body.nav-open,
body.gate-open { overflow: hidden; }

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
button, [role="button"], a, input[type="submit"], summary, label[for] { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}
.section--light :focus-visible,
.signup__panel--light :focus-visible { outline-color: var(--black); }

::selection { background: var(--white); color: var(--black); }

.skip-link {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 200;
  transform: translate(-50%, -120%);
  padding: 12px 20px;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: .08em;
  transition: transform .2s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   3. Type primitives
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--ls-display);
  line-height: .9;
  text-transform: uppercase;
  text-wrap: balance;
}

.kicker {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: var(--ls-kicker);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--gray);
}
.section--light .kicker,
.signup__panel--light .kicker { color: var(--dark-muted); }

.outline-text {
  color: transparent;
  -webkit-text-stroke: 1px var(--white);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

.section {
  position: relative;
  padding-block: var(--section-y);
  scroll-margin-top: var(--header-h);
}
section[id] { scroll-margin-top: var(--header-h); }

.section--texture-1 {
  background-color: var(--black);
  background-image: linear-gradient(rgba(11, 11, 12, .84), rgba(11, 11, 12, .94)), var(--tex-1);
  background-size: cover;
  background-position: center;
  border-block: 1px solid var(--line);
}
.section--texture-2 {
  background-color: var(--black);
  background-image: linear-gradient(rgba(11, 11, 12, .88), rgba(11, 11, 12, .96)), var(--tex-2);
  background-size: cover;
  background-position: center;
}
.section--light {
  background: var(--white);
  color: var(--black);
}

.section-head { max-width: 100%; }
.section-head__title {
  margin-top: var(--s2);
  /* ch resolves at the display font size, so this wraps to 2–3 big lines */
  max-width: 20ch;
  font-size: var(--fs-h2);
}
.section-head__sub {
  margin-top: var(--s3);
  max-width: 44ch;
  font-size: var(--fs-lead);
  color: var(--gray);
}
.section--light .section-head__sub { color: var(--dark-muted); }
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head--center .section-head__title,
.section-head--center .section-head__sub { margin-inline: auto; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-fill: var(--white);
  --btn-ink: var(--black);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-height: 48px;
  padding: 0 var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: .07em;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fill);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.btn:hover,
.btn:focus-visible {
  color: var(--btn-ink);
  border-color: var(--btn-fill);
}
.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); }
.btn:active { transform: translateY(1px); }

.btn--lg { min-height: 56px; padding: 0 var(--s4); font-size: 20px; }
.btn--sm { min-height: 44px; padding: 0 var(--s2); font-size: 16px; }
.btn--ghost { border-color: var(--line); }

/* Filled primary — the one repeated conversion CTA. Starts solid and empties on
   hover, the inverse of .btn, so the two hero CTAs never look like the same
   control in two states. */
.btn--solid {
  color: var(--btn-ink);
  border-color: var(--btn-fill);
}
.btn--solid::before { transform: scaleX(1); }
.btn--solid:hover,
.btn--solid:focus-visible {
  color: var(--white);
  border-color: var(--white);
}
.btn--solid:hover::before,
.btn--solid:focus-visible::before {
  transform: scaleX(0);
  transform-origin: right center;
}
.btn--dark {
  --btn-fill: var(--black);
  --btn-ink: var(--white);
  color: var(--black);
  border-color: rgba(11, 11, 12, .5);
}

/* --------------------------------------------------------------------------
   6. Age gate
   -------------------------------------------------------------------------- */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: var(--z-gate);
  display: grid;
  place-items: center;
  padding: var(--s6) var(--gutter);
  background-color: var(--black);
  background-image: linear-gradient(rgba(11, 11, 12, .78), rgba(11, 11, 12, .92)), var(--tex-2);
  background-size: cover;
  background-position: center;
  opacity: 1;
  transition: opacity .5s ease;
}
.age-gate.is-out,
.age-gate.is-hidden,
.age-gate.fade-out {
  opacity: 0;
  pointer-events: none;
}
.age-gate[hidden] { display: none; }

.age-gate__inner {
  max-width: 760px;
  text-align: center;
}
.age-gate__logo {
  height: 46px;
  width: auto;
  margin: 0 auto var(--s5);
}
.age-gate__title {
  margin-top: var(--s2);
  font-size: clamp(40px, 7.6vw, 104px);
}
.age-gate__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s6);
}
.age-gate__fine {
  margin-top: var(--s5);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray);
}
/* main.js empties the gate and appends this single paragraph on "NOT YET" */
.age-gate__message {
  max-width: 24ch;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(28px, 4.4vw, 56px);
  letter-spacing: var(--ls-display);
  line-height: 1.02;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  color: var(--white);
}

/* --------------------------------------------------------------------------
   7. Header + navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(11, 11, 12, .92);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s5);
  height: 100%;
  width: 100%;
  max-width: calc(var(--container) + (var(--gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.site-header__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
}
.site-header__logo img {
  height: 34px;
  width: auto;
  transition: opacity var(--dur) var(--ease);
}
.site-header__logo:hover img { opacity: .7; }

.site-nav { margin-left: auto; }
.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(var(--s3), 2.4vw, var(--s6));
}
.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--white);
  transition: color var(--dur) var(--ease);
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 12px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s var(--ease);
}
.site-nav__link:hover { color: var(--white); }
.site-nav__link:hover::after,
.site-nav__link:focus-visible::after { transform: scaleX(1); }

.site-header__cta { flex: 0 0 auto; }

/* hamburger */
.nav-toggle {
  display: none;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
}
.nav-toggle__box {
  display: grid;
  gap: 5px;
  width: 22px;
}
.nav-toggle__bar {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--white);
  transition: transform .3s var(--ease), opacity .2s linear;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* mobile overlay nav */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: calc(var(--header-h) + var(--s6)) var(--gutter) var(--s8);
  background-color: var(--black);
  background-image: linear-gradient(rgba(11, 11, 12, .9), rgba(11, 11, 12, .97)), var(--tex-2);
  background-size: cover;
  background-position: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s var(--ease), visibility .35s linear;
}
.mobile-nav[hidden]:not(.is-open) { display: none; }
/* open state keys off .is-open OR the toggle's aria-expanded, so it works
   whichever hook main.js uses (class, hidden attribute, or aria only) */
.mobile-nav.is-open,
.site-header:has(.nav-toggle[aria-expanded="true"]) ~ .mobile-nav {
  display: flex;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mobile-nav__inner { width: 100%; }
.mobile-nav__list {
  display: grid;
  gap: var(--s1);
  border-top: 1px solid var(--line);
}
.mobile-nav__list li { border-bottom: 1px solid var(--line); }
.mobile-nav__link {
  display: block;
  padding: var(--s3) 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 10vw, 56px);
  letter-spacing: var(--ls-display);
  line-height: 1;
  text-transform: uppercase;
  transition: color var(--dur) var(--ease), transform .3s var(--ease);
}
.mobile-nav__link:hover { transform: translateX(8px); }
.mobile-nav__cta { margin-top: var(--s6); width: 100%; }
.mobile-nav__fine {
  margin-top: var(--s4);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gray);
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
/* No video here by design. The hero is four transparent can renders on the brand
   field — see docs/DECISIONS.md D5. --can-h is the one dial that sets can scale;
   everything else in the stage is derived from it. Cans sit at roughly 52% of
   viewport height on desktop, capped at 520px because the renders are 340x1000
   native and soften past ~2x. */
.hero {
  /* The cans are the point of this screen and the Drive renders (1324x3266)
     have the resolution to go large, so the only real limit is the vertical
     budget: the primary CTA must stay above the fold.
     `100svh - 470px` is that budget expressed directly — 470px is everything
     else in the hero (header, eyebrow, two headline lines, gaps, CTA row,
     padding). So the cans take 54% of the viewport when there is room and
     give ground first when there is not, instead of pushing the CTA off. */
  --can-h: clamp(280px, min(54vh, 100svh - 470px), 700px);
  --can-aspect: .34;
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + var(--s2)) clamp(var(--s4), 4vh, var(--s6));
  overflow: clip;
  background: var(--black);
  scroll-margin-top: 0;
}
/* A wide wash of all four flavors low behind the lineup, so the cans sit in
   brand color rather than on flat black. Separate from the per-can glows. */
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -12%;
  translate: -50% 0;
  inline-size: min(1500px, 108vw);
  block-size: min(720px, 66vh);
  pointer-events: none;
  filter: blur(76px);
  opacity: .32;
  background:
    radial-gradient(closest-side, var(--flavor-cinderella), transparent) 6% 62% / 40% 78% no-repeat,
    radial-gradient(closest-side, var(--flavor-closer), transparent) 36% 48% / 40% 78% no-repeat,
    radial-gradient(closest-side, var(--flavor-cleat), transparent) 64% 48% / 40% 78% no-repeat,
    radial-gradient(closest-side, var(--flavor-goat), transparent) 94% 62% / 40% 78% no-repeat;
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: calc(var(--container) + (var(--gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}
.hero__eyebrow { color: var(--gray); }

/* Four words, four flavors, left-to-right in the same order as the cans below,
   so the headline reads as a key to the lineup rather than as loose color. */
.hero__title {
  margin-top: var(--s2);
  font-size: clamp(44px, 7.6vw, 118px);
  line-height: .86;
}
.hero__line { display: block; }
.hero__word { color: var(--white); }
.hero__word--cinderella { color: var(--flavor-cinderella); }
/* the type tint, not the base token: #7D4E9E is 3.24:1 on black, which clears
   the large-text threshold only barely and dips under it while the headline is
   still fading in. The true purple stays on fills, dots, borders and glows. */
.hero__word--closer     { color: var(--flavor-closer-type); }
.hero__word--cleat      { color: var(--flavor-cleat); }
.hero__word--goat       { color: var(--flavor-goat); }

/* The can stage */
.hero-cans {
  display: grid;
  grid-template-columns: repeat(4, auto);
  align-items: end;
  justify-content: center;
  /* The 2026-08-24 renders are cropped to the can, where the old masters had
     transparent padding that object-fit turned into a built-in gutter. Same
     --can-h now paints a can ~19% taller and full-width in its box, so the
     gutter has to be real spacing or the fan's outer tilts collide. */
  gap: clamp(2px, .9vw, 20px);
  margin-top: clamp(var(--s2), 2vh, var(--s4));
}
.hero-can {
  position: relative;
  margin: 0;
  inline-size: calc(var(--can-h) * var(--can-aspect));
  block-size: var(--can-h);
  /* --lift and --tilt make the shallow fan: outer cans sit lower and turn out */
  translate: 0 var(--lift, 0);
  rotate: var(--tilt, 0deg);
}
.hero-can:nth-child(1) { --tilt: -7deg; --lift: 4%; }
.hero-can:nth-child(2) { --tilt: -2.5deg; --lift: -3%; }
.hero-can:nth-child(3) { --tilt: 2.5deg; --lift: -3%; }
.hero-can:nth-child(4) { --tilt: 7deg; --lift: 4%; }

/* Per-can glow in that can's own flavor — the only place the four colors sit
   together, and they are tied to the product they belong to. */
.hero-can::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -4%;
  translate: -50% 0;
  /* a tall wash behind the whole can, not a pool at its base: the renders are
     charcoal on a near-black field, so this is what gives them an edge */
  inline-size: 215%;
  block-size: 100%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--flavor) 0%, transparent 100%);
  opacity: .44;
  filter: blur(10px);
  pointer-events: none;
}
/* picture is inline by default, so the image's block-size:100% would resolve
   against an auto-height box and collapse the can to nothing */
.hero-can picture {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.hero-can__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  /* grounds the cans on the black field instead of letting them float */
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .55));
}
.hero-can--cinderella { --flavor: var(--flavor-cinderella); }
.hero-can--closer     { --flavor: var(--flavor-closer); }
.hero-can--cleat      { --flavor: var(--flavor-cleat); }
.hero-can--goat       { --flavor: var(--flavor-goat); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2);
  margin-top: clamp(var(--s3), 3vh, var(--s5));
}
.hero__note {
  margin-top: var(--s3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gray);
}


/* --------------------------------------------------------------------------
   10. Line up — carousel, cards, progress, detail overlay
   -------------------------------------------------------------------------- */
.lineup { padding-bottom: clamp(var(--s10), 8vw, 120px); }

.carousel {
  position: relative;
  margin-top: clamp(var(--s6), 6vw, var(--s10));
}
.carousel__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: clamp(32px, 8vw, 160px);
  pointer-events: none;
}
.carousel__fade--l { left: 0; background: linear-gradient(to right, var(--black), rgba(11, 11, 12, 0)); }
.carousel__fade--r { right: 0; background: linear-gradient(to left, var(--black), rgba(11, 11, 12, 0)); }

/* The track is empty in the markup and JS injects 34 cards into it, so without a
   reserved height the whole page below jumps once the script runs. Matches the
   rendered card height (413px) plus this element's own padding. */
.bottle-track {
  display: flex;
  align-items: flex-end;
  gap: clamp(var(--s1), 1.6vw, var(--s4));
  min-height: calc(clamp(168px, 19vw, 230px) * 1.79 + var(--s5) + var(--s6));
  padding: var(--s5) var(--gutter) var(--s6);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bottle-track::-webkit-scrollbar { width: 0; height: 0; display: none; }

.bottle-card {
  --c1: var(--white);
  --c2: var(--gray);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  width: clamp(168px, 19vw, 230px);
  padding: var(--s2) var(--s1) var(--s3);
  border: 0;
  background: transparent;
  color: var(--white);
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.bottle-card__img {
  height: clamp(220px, 25vw, 300px);
  width: auto;
  aspect-ratio: 1 / 2; /* source PNGs are 250×500 */
  object-fit: contain;
  object-position: center;
  /* 14 of the 17 source PNGs ship an opaque white studio background, so every
     bottle gets the same light plate — all 17 cards read identically on dark */
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F1EC 100%);
  border: 1px solid var(--line);
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55));
  transition: transform .55s var(--ease), filter .55s var(--ease), border-color .4s var(--ease);
}
.bottle-card__name {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.4vw, 21px);
  letter-spacing: .1em;
  line-height: 1.1;
  text-transform: uppercase;
  transition: color var(--dur) var(--ease);
}
.bottle-card__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--c1) 0%, var(--c1) 50%, var(--c2) 50%, var(--c2) 100%);
  transition: width .45s var(--ease);
}
.bottle-card:hover .bottle-card__bar,
.bottle-card:focus-visible .bottle-card__bar { width: 88px; }
.bottle-card:hover .bottle-card__img,
.bottle-card:focus-visible .bottle-card__img {
  transform: translateY(-10px);
  border-color: color-mix(in srgb, var(--c1) 70%, var(--white));
  filter: drop-shadow(0 24px 40px color-mix(in srgb, var(--c1) 55%, transparent));
}

.noscript-note {
  padding: 0 var(--gutter) var(--s5);
  max-width: 64ch;
  color: var(--gray);
}

.lineup-progress {
  position: relative;
  height: 2px;
  background: var(--line);
  overflow: hidden;
}
.lineup-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(245, 243, 238, .35), var(--white));
  transition: width .1s linear;
}
/* hedge: works whether JS animates width or transform:scaleX */
.lineup-progress__bar[style*="scaleX"] { width: 100%; }

.carousel__hint {
  margin-top: var(--s3);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray);
}

/* light lineup — pure #fff so the bottle PNGs' white plates disappear into it */
.lineup.section--light {
  background: #fff;
  padding-top: calc(var(--section-y) * .5);
}
/* tighter gap between the section head and the bottle carousel */
.lineup .carousel { margin-top: clamp(var(--s2), 2vw, var(--s4)); }
.lineup.section--light .carousel__fade--l { background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); }
.lineup.section--light .carousel__fade--r { background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0)); }
.lineup.section--light .bottle-card {
  --c2: var(--dark-muted);
  color: var(--black);
}
.lineup.section--light .bottle-card__img {
  border: 0;
  filter: none;
}
.lineup.section--light .bottle-card:hover .bottle-card__img,
.lineup.section--light .bottle-card:focus-visible .bottle-card__img {
  border: 0;
  filter: none;
}
.lineup.section--light .lineup-progress { background: var(--dark-line); }
.lineup.section--light .lineup-progress__bar { background: linear-gradient(90deg, rgba(11, 11, 12, .35), var(--black)); }
.lineup.section--light .carousel__hint,
.lineup.section--light .noscript-note { color: var(--dark-muted); }

/* detail overlay (structure injected by JS) */
.bottle-detail {
  position: fixed;
  inset: 0;
  z-index: var(--z-detail);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, min(46vw, 560px)));
  grid-auto-rows: min(76vh, 700px);
  justify-content: center;
  align-content: center;
  gap: 0;
  padding: var(--s3);
}
.bottle-detail[hidden] { display: none; }
.bottle-detail.is-open { display: grid; } /* wins over [hidden] if JS uses a class */
.bottle-detail::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(6, 6, 7, .88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.bottle-detail__media {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  overflow: hidden;
  /* split-colour field from the colorway accents — shows through for the
     colorway with no beauty shot (Red & Black) */
  background:
    linear-gradient(135deg, var(--c1, #2A2A2A) 0 50%, var(--c2, #111111) 50% 100%);
  border: 1px solid var(--line);
  border-right: 0;
}
.bottle-detail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* product-png fallback sits as a light plate centred on the split-colour field */
.bottle-detail__media img[src*="/products/"],
.bottle-detail__img--product,
.bottle-detail__media--product img {
  width: auto;
  height: 78%;
  max-width: 64%;
  aspect-ratio: 1 / 2;
  object-fit: contain;
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F1EC 100%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}
.bottle-detail__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--s3);
  height: 100%;
  padding: clamp(var(--s4), 4vw, var(--s8));
  background: var(--ink);
  border: 1px solid var(--line);
  overflow-y: auto;
}
.bottle-detail__body h3,
.bottle-detail__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 62px);
  letter-spacing: var(--ls-display);
  line-height: .92;
  text-transform: uppercase;
}
.bottle-detail__specs {
  max-width: 34ch;
  font-size: 15px;
  letter-spacing: .06em;
  line-height: 1.75;
  text-transform: uppercase;
  color: var(--gray);
}
.bottle-detail__rule {
  display: block;
  width: min(220px, 100%);
  height: 4px;
  background: repeating-linear-gradient(90deg,
    var(--c1, var(--white)) 0 14px,
    var(--c2, var(--gray)) 14px 28px);
}
#detail-close,
.bottle-detail__close {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 140px;
  margin-top: var(--s2);
  padding: 0 var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: .07em;
  text-transform: uppercase;
  overflow: hidden;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
#detail-close::before,
.bottle-detail__close::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
#detail-close:hover,
#detail-close:focus-visible,
.bottle-detail__close:hover,
.bottle-detail__close:focus-visible { color: var(--black); border-color: var(--white); }
#detail-close:hover::before,
#detail-close:focus-visible::before,
.bottle-detail__close:hover::before,
.bottle-detail__close:focus-visible::before { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   10a. Page hero — the masthead for a secondary page (vodka.html).
   Deliberately not a full-height hero: this is a sub-page opener, and the
   colorway carousel underneath is the thing worth scrolling to. Carries the
   page's h1 and clears the fixed header.
   -------------------------------------------------------------------------- */
.page-hero {
  padding-block: calc(var(--header-h) + clamp(var(--s6), 7vw, var(--s10))) clamp(var(--s7), 7vw, var(--s10));
  background-color: var(--black);
  background-image: linear-gradient(rgba(11, 11, 12, .78), rgba(11, 11, 12, .93)), var(--tex-1);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--line);
}
.page-hero__title {
  margin-top: var(--s2);
  font-size: clamp(48px, 8vw, 132px);
  line-height: .88;
  color: var(--white);
}
.page-hero__sub {
  margin-top: var(--s3);
  max-width: 46ch;
  font-size: var(--fs-lead);
  color: var(--white);
}
/* --------------------------------------------------------------------------
   10b. Trust strip — thin band under the hero
   -------------------------------------------------------------------------- */
.trust {
  padding-block: clamp(var(--s3), 2.4vw, var(--s5));
  background: var(--ink);
  border-block: 1px solid var(--line);
}
.trust__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--s2), 2.6vw, var(--s6));
  width: 100%;
  max-width: calc(var(--container) + (var(--gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.trust__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s2);
  color: var(--white);
  white-space: nowrap;
}
.trust__icon {
  flex: 0 0 auto;
  width: clamp(30px, 3.2vw, 46px);
  height: auto;
}
.trust__label {
  font-size: clamp(16px, 1.4vw, 23px);
  letter-spacing: .06em;
}
/* five claims, four gaps — one flavor color each, so the palette is present
   even in a band that is otherwise white */
.trust__item + .trust__item::before {
  content: "";
  position: absolute;
  left: calc(clamp(var(--s2), 2.6vw, var(--s6)) / -2);
  top: 50%;
  translate: -50% -50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--flavor-cinderella);
}
.trust__item:nth-child(3)::before { background: var(--flavor-closer); }
.trust__item:nth-child(4)::before { background: var(--flavor-cleat); }
.trust__item:nth-child(5)::before { background: var(--flavor-goat); }

/* --------------------------------------------------------------------------
   11. The lineup — four stacked flavor blocks
   Was a tablist; since 2026-08-24 every flavor is on the page at once, so the
   accent can no longer live on the section. Each block carries its own
   --flavor-active pair instead, which is why .flavor--* exists as a modifier
   rather than a decoration. The Closer swaps in its lightened tint for
   anything text-sized, which is the whole reason the -type token is separate.
   -------------------------------------------------------------------------- */
.flavor--cinderella {
  --flavor-active: var(--flavor-cinderella);
  --flavor-active-type: var(--flavor-cinderella);
}
.flavor--closer {
  --flavor-active: var(--flavor-closer);
  --flavor-active-type: var(--flavor-closer-type);
}
.flavor--cleat {
  --flavor-active: var(--flavor-cleat);
  --flavor-active-type: var(--flavor-cleat);
}
.flavor--goat {
  --flavor-active: var(--flavor-goat);
  --flavor-active-type: var(--flavor-goat);
}

.flavors .section-head__title { color: var(--white); }

.flavors__stage {
  display: grid;
  gap: clamp(var(--s8), 11vw, 168px);
  margin-top: clamp(var(--s6), 6vw, var(--s10));
}

.flavor {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(var(--s5), 5vw, var(--s10));
  /* the header is sticky, so #the-closer &co. must land below it */
  scroll-margin-top: 96px;
}
/* Sides alternate so four near-identical blocks don't read as a list. The
   media keeps its DOM position (source order = reading order); only the
   painted column flips. */
.flavor:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.flavor:nth-child(even) .flavor__media { grid-column: 2; grid-row: 1; }
.flavor:nth-child(even) .flavor__body  { grid-column: 1; grid-row: 1; }
.flavor:nth-child(even) [data-reveal="slide-x"] { --reveal-x: 6vw; }

/* hairline between blocks, tinted by the block it introduces */
.flavor + .flavor::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: clamp(calc(var(--s8) * -1), -5.5vw, -84px);
  block-size: 1px;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--flavor-active) 55%, transparent) 0%,
    transparent 62%);
}

.flavor__media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(320px, 40vw, 560px);
}
.flavor__media::before {
  content: "";
  position: absolute;
  z-index: 0;
  inline-size: min(78%, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--flavor-active) 0%, transparent 100%);
  opacity: .3;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   11a. Rotator
   Shared by the cans (continuous 360, when frames exist) and the two cartons
   (four named views). JS adds .is-spinnable only once a real frame sequence is
   wired up, plus .is-continuous or .is-discrete — so a can with no frames gets
   a tilt on hover rather than a broken spin.
   -------------------------------------------------------------------------- */
.rotator {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  perspective: 1400px;
  /* vertical scroll must still work when a finger starts on the can */
  touch-action: pan-y;
}
.rotator.is-spinnable { cursor: ew-resize; }
.rotator.is-dragging  { cursor: grabbing; }

.flavor__can {
  position: relative;
  z-index: 1;
  block-size: clamp(300px, 38vw, 620px);
  inline-size: auto;
  object-fit: contain;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .6));
  transform: rotateY(var(--spin-tilt, 0deg)) scale(var(--spin-scale, 1));
  transition: transform .6s var(--ease);
}
.rotator.is-dragging .flavor__can { transition: none; }

/* the hint only earns its place while the thing is actually interactive */
.rotator__hint {
  position: absolute;
  z-index: 2;
  inset-block-end: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 8px var(--s2);
  border: 1px solid color-mix(in srgb, var(--flavor-active) 60%, transparent);
  border-radius: 999px;
  background: rgba(11, 11, 12, .72);
  backdrop-filter: blur(6px);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}
.rotator.is-spinnable:hover .rotator__hint,
.rotator.is-spinnable:focus-within .rotator__hint { opacity: 1; transform: none; }

.rotator:focus-visible {
  outline: 2px solid var(--flavor-active, var(--white));
  outline-offset: 10px;
}

/* --- discrete mode: the two cartons, four named views ------------------- */
.rotator--pack {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--s3);
  inline-size: 100%;
}
/* The frames are pre-centred on one shared canvas, so every view has identical
   intrinsic dimensions and the carton cannot jump as it turns. That is done in
   docs/pipeline/pack-spin.py, not here — CSS cannot fix mismatched renders. */
.rotator--pack img { display: block; }

.rotator__views {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s1);
}
.rotator__view {
  min-height: 40px;
  padding: 0 var(--s3);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--gray);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.rotator__view:hover,
.rotator__view:focus-visible {
  color: var(--white);
  border-color: color-mix(in srgb, var(--white) 45%, transparent);
}
.rotator__view[aria-pressed="true"] {
  color: var(--black);
  background: var(--white);
  border-color: var(--white);
}

/* --------------------------------------------------------------------------
   11b. Flavor copy
   --flavor-active-type, not --flavor-active: text always takes the accessible
   variant. For three flavors the two are the same value; for The Closer they
   are not, and this is the rule that keeps that from being a special case.
   -------------------------------------------------------------------------- */
.flavor__index {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.4vw, 72px);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--flavor-active) 70%, transparent);
  margin-bottom: var(--s2);
}
.flavor__name {
  font-size: var(--fs-h2-sm);
  color: var(--flavor-active-type);
}
.flavor__descriptor {
  margin-top: var(--s2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--flavor-active-type);
}
/* body copy stays near-white — flavor color on long text fails contrast */
.flavor__blurb {
  margin-top: var(--s3);
  max-width: 52ch;
  color: var(--white);
}
/* Per-flavor feature tags: the brand's circular attribute badges, with the
   wording kept as real text underneath rather than baked into the raster. */
.flavor__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) clamp(var(--s2), 2vw, var(--s4));
  margin-top: var(--s4);
}
.spec-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: clamp(64px, 7vw, 84px);
  text-align: center;
}
.spec-badge__icon {
  width: clamp(38px, 4vw, 52px);
  height: auto;
  /* the badges are mono line art, so the active flavor can tint them */
  opacity: .92;
  transition: opacity var(--dur) var(--ease);
}
.flavor:hover .spec-badge__icon { opacity: 1; }
.spec-badge__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--gray);
  text-wrap: balance;
}
.flavor__tags {
  margin-top: var(--s3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray);
}

/* --------------------------------------------------------------------------
   11a. Variety pack section wrapper
   -------------------------------------------------------------------------- */
.pack-section { background: var(--ink-2); }

/* --------------------------------------------------------------------------
   11b. Tailgate band
   -------------------------------------------------------------------------- */
.tailgate {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(420px, 56vh, 640px);
  padding-block: clamp(var(--s8), 10vw, 140px);
  overflow: clip;
  background: var(--black);
}
.tailgate picture {
  position: absolute;
  inset: 0;
}
.tailgate__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* The scrim resolves to --ink, not --black, because the gallery below is --ink:
   the photo dissolves into the next section's exact background instead of
   hitting a seam. The last 22% is the actual hand-off. */
.tailgate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(11, 11, 12, .46) 0%,
    rgba(11, 11, 12, .66) 48%,
    rgba(19, 19, 21, .88) 78%,
    var(--ink) 100%);
}
.tailgate__inner {
  position: relative;
  z-index: 1;
}
/* "From the beach to the tailgate" was a 13px eyebrow; as of 2026-08-24 it is
   the band's headline. Bebas at this size needs its tracking pulled way in —
   the .28em kicker letter-spacing falls apart above ~20px — and it needs a
   shadow of its own, because the scrim behind it is lightest at the top where
   this line sits. The flavor sweep ties it back to the lineup above. */
.tailgate__kicker {
  margin: 0;
  /* background-clip:text paints the element box, and a block-level <p> is as
     wide as the container — which threw two of the four flavor stops into
     empty space to the right of the words. Shrink-wrapping the box puts the
     whole sweep across the text. */
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(38px, 6vw, 92px);
  letter-spacing: .02em;
  line-height: .88;
  text-transform: uppercase;
  background: linear-gradient(100deg,
    var(--flavor-closer-type) 0%,
    var(--flavor-goat) 34%,
    var(--flavor-cleat) 66%,
    var(--flavor-cinderella) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .75));
}
/* the gradient is decoration; if background-clip:text is not honoured the
   line must still be readable, so a plain white fallback comes first */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .tailgate__kicker { color: var(--white); background: none; }
}

.tailgate__title {
  margin-top: var(--s3);
  max-width: 16ch;
  font-size: var(--fs-h2-sm);
  color: var(--white);
}
.tailgate__copy {
  margin-top: var(--s3);
  max-width: 46ch;
  font-size: var(--fs-lead);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   11c. Find us — locator shell + honest retailer list
   -------------------------------------------------------------------------- */
.find-us { background: var(--ink); }

.locator {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: center;
  gap: var(--s2);
  margin-top: clamp(var(--s5), 5vw, var(--s8));
}
.locator__field {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  flex: 1 1 220px;
  max-width: 320px;
}
.locator__field--state { flex-basis: 180px; }
.locator__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gray);
}
.locator__input {
  min-height: 56px;
  padding: 0 var(--s2);
  background: var(--black);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
}
.locator__input:hover { border-color: var(--line-strong); }
.locator__select { appearance: none; padding-right: var(--s4); }
.locator__submit { flex: 0 0 auto; }

.locator__status {
  margin-top: var(--s3);
  text-align: center;
  font-size: 14px;
  color: var(--gray);
}

.retailers {
  margin-top: clamp(var(--s7), 7vw, var(--s10));
  padding-top: clamp(var(--s5), 5vw, var(--s7));
  border-top: 1px solid var(--line);
}
.retailers__title {
  font-size: var(--fs-h3);
  color: var(--white);
}
.retailers__title--delivery { margin-top: var(--s6); }
.retailers__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s2);
  margin-top: var(--s3);
}
.retailer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s3);
  border: 1px solid var(--line);
  background: var(--black);
}
.retailer__link {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--white);
  transition: color var(--dur) var(--ease);
}
a.retailer__link:hover,
a.retailer__link:focus-visible { color: var(--flavor-cleat); }
.retailer__link--plain { color: var(--white); }
.retailer__note {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray);
}
.retailers__fine {
  margin-top: var(--s4);
  font-size: 13px;
  color: var(--gray);
}

/* --------------------------------------------------------------------------
   11a. Retail variety pack
   -------------------------------------------------------------------------- */
/* white panel: the carton render carries a white background, so the panel is
   pure #fff (not the off-white --white) and the render blends straight in */
/* The carton render is transparent now, so this panel no longer has to be pure
   white to hide a plate edge — it sits on the brand field like everything else. */
.pack {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--s5), 5vw, var(--s10));
  margin-top: clamp(var(--s6), 6vw, var(--s10));
}
.pack__media {
  position: relative;
  display: grid;
  place-items: center;
  /* the render's intrinsic width would otherwise push this track past its
     share of the grid and swallow the gap */
  min-width: 0;
}
/* four wedges of flavor light behind the carton, one per can inside it */
.pack__glow {
  position: absolute;
  z-index: 0;
  inset: -6% -14%;
  border-radius: 50%;
  filter: blur(54px);
  opacity: .72;
  pointer-events: none;
  background:
    radial-gradient(closest-side, var(--flavor-cinderella), transparent) -12% 62% / 56% 78% no-repeat,
    radial-gradient(closest-side, var(--flavor-closer), transparent) 32% 36% / 56% 78% no-repeat,
    radial-gradient(closest-side, var(--flavor-cleat), transparent) 68% 64% / 56% 78% no-repeat,
    radial-gradient(closest-side, var(--flavor-goat), transparent) 112% 38% / 56% 78% no-repeat;
}
.pack__img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 44px rgba(0, 0, 0, .6));
}
.pack__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
}
.pack__title {
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: .9;
  color: var(--white);
}
.pack__title-line { display: block; }
.pack__title-line.is-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-strong);
}
.pack__sub {
  max-width: 34ch;
  margin-top: var(--s1);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--gray);
}
/* The flavor manifest and the badge row that used to sit beside the carton
   came off on 2026-08-24 — the panel is the render, the title and one line.

   11d. UGA partner pack — the team carton, centred under its own header.
   Deliberately plainer than the variety panel: the headline is the point. */
.uga-pack { background: var(--ink); }
/* The measure has to be set on the heading itself: a ch cap on this wrapper
   resolves against the body font, not the display face, which folded this
   headline into five ragged lines. */
.section-head--center { text-align: center; }
.section-head--center .section-head__title,
.section-head--center .kicker {
  margin-inline: auto;
  max-width: 18ch;
  text-wrap: balance;
}
.uga-pack .section-head__title { font-size: var(--fs-h2-sm); }
.uga-pack__media {
  position: relative;
  display: grid;
  place-items: center;
  margin-top: clamp(var(--s6), 6vw, var(--s10));
}
/* one warm wash behind the carton rather than the variety panel's four
   flavor wedges — a team pack is one team, not four flavors */
.uga-pack__glow {
  position: absolute;
  z-index: 0;
  inline-size: min(76%, 760px);
  aspect-ratio: 1.35;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(186, 12, 47, .38) 0%, transparent 100%);
  pointer-events: none;
}
.uga-pack__img {
  position: relative;
  z-index: 1;
  inline-size: min(100%, 900px);
  block-size: auto;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55));
}

/* --------------------------------------------------------------------------
   11e. Beach gallery
   -------------------------------------------------------------------------- */
/* pulls the top of this section up under the tailgate scrim so the two meet in
   one continuous field rather than at an edge */
.beach {
  position: relative;
  background: var(--ink);
}
.beach::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: clamp(90px, 12vw, 190px);
  background: linear-gradient(to bottom, var(--ink), transparent);
  pointer-events: none;
}
/* Eight shots tiling a 4x3 grid with no holes. The spans are chosen to total
   exactly 12 cells: one 1x2 tall + one 2x2 feature + six 1x1 = 2 + 4 + 6.
   `dense` is the belt to that braces — if a span ever changes, later items
   backfill the gap instead of leaving a hole. */
.beach-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 15vw, 230px);
  grid-auto-flow: row dense;
  gap: clamp(8px, 1vw, 16px);
  margin-top: clamp(var(--s6), 6vw, var(--s10));
}
/* Flavor colors carry through the gallery: each tile is assigned one of the
   four in rotation, shown as a rule along its bottom edge and as a ring plus a
   colored lift on hover. */
.beach-shot {
  position: relative;
  overflow: hidden;
  background: var(--black);
  --tile: var(--flavor-cinderella);
}
.beach-shot:nth-child(4n+2) { --tile: var(--flavor-closer); }
.beach-shot:nth-child(4n+3) { --tile: var(--flavor-cleat); }
.beach-shot:nth-child(4n+4) { --tile: var(--flavor-goat); }

.beach-shot::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--tile);
  transform: scaleX(.32);
  transform-origin: left center;
  transition: transform .45s var(--ease);
}
.beach-shot:hover::after,
.beach-shot:focus-within::after { transform: scaleX(1); }

/* the ring sits inside the tile so it never nudges the grid */
.beach-shot::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 2px solid var(--tile);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.beach-shot:hover::before,
.beach-shot:focus-within::before { opacity: .85; }
.beach-shot--tall { grid-row: span 2; }
.beach-shot--big  { grid-column: span 2; grid-row: span 2; }
.beach-shot picture,
.beach-shot img {
  display: block;
  width: 100%;
  height: 100%;
}
.beach-shot img {
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.beach-shot:hover img { transform: scale(1.04); }
/* --------------------------------------------------------------------------
   12. Craft
   -------------------------------------------------------------------------- */
.craft {
  position: relative;
  overflow: clip;
}
/* The spinning-bottle loop backs the whole section. The video box is wider than
   the section and left-anchored so the bottle lands on the right half, clear of
   the copy column. */
.craft__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.craft__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 135%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* the poster and first frames are near-black; this stops a flash of nothing */
  background-color: var(--black);
}
.craft__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--black) 0%, rgba(11, 11, 12, .78) 36%, rgba(11, 11, 12, .3) 64%, rgba(11, 11, 12, .42) 100%);
}
.craft > .container {
  position: relative;
  z-index: 1;
}
.craft__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(var(--s6), 7vw, 120px);
  align-items: start;
}
.craft__sticky { position: sticky; top: calc(var(--header-h) + var(--s5)); }
.craft__title {
  margin-top: var(--s3);
  font-size: var(--fs-h2-sm);
  max-width: 20ch;
}
.craft__copy {
  margin-top: var(--s4);
  max-width: 44ch;
  color: var(--gray);
}
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(var(--s3), 2.5vw, var(--s5));
  margin-top: clamp(var(--s5), 4vw, var(--s7));
  padding: 0;
  list-style: none;
}
.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.badge__ring {
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: box-shadow .45s var(--ease), transform .45s var(--ease);
}
.badge__icon {
  width: clamp(76px, 7.5vw, 112px);
  height: auto;
}
.badge:hover .badge__ring { transform: translateY(-4px); }
.stat-strip {
  margin-top: clamp(var(--s10), 9vw, 128px);
  padding-top: clamp(var(--s6), 5vw, var(--s10));
  border-top: 1px solid var(--line);
  font-size: clamp(28px, 5.6vw, 76px);
  letter-spacing: .04em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px var(--white);
}
.craft__accolades {
  margin-top: clamp(var(--s7), 7vw, var(--s10));
  padding-top: clamp(var(--s5), 5vw, var(--s7));
  border-top: 1px solid var(--line);
  text-align: center;
}
.craft__accolades-kicker { text-align: center; }
.awards-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(var(--s4), 4vw, var(--s8));
  margin-top: clamp(var(--s5), 3.5vw, var(--s7));
}
.award {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.award__chip {
  display: grid;
  place-items: center;
  width: clamp(104px, 11.5vw, 152px);
  aspect-ratio: 1 / 1;
  padding: 28px;
  border-radius: 50%;
  background: var(--ink);
  will-change: transform;
}
.award__chip img {
  width: 100%;
  height: auto;
  /* source SVGs are near-black (#1F1F1F); inverted to read on the dark chip */
  filter: invert(1) brightness(1.6);
}

/* --------------------------------------------------------------------------
   13b. Legal page (privacy.html)
   -------------------------------------------------------------------------- */
.legal {
  padding: calc(var(--header-h) + clamp(var(--s7), 8vw, 120px)) 0 clamp(var(--s8), 8vw, 120px);
  background: var(--black);
}
/* no inline nav on this page, so push the CTA to the right and keep it on mobile */
.page-legal .site-header__cta { display: inline-flex; margin-left: auto; }
.legal__inner { max-width: 760px; }
.legal__title {
  margin-top: var(--s3);
  font-size: var(--fs-h2-sm);
}
.legal__updated {
  margin-top: var(--s3);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray);
}
.legal__sub {
  margin-top: clamp(var(--s6), 5vw, var(--s8));
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.legal p {
  margin-top: var(--s3);
  color: var(--gray);
  line-height: 1.7;
}
.legal .legal__updated { color: var(--gray); }

/* --------------------------------------------------------------------------
   14. Story
   -------------------------------------------------------------------------- */
.story {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding-block: clamp(120px, 16vw, 240px);
  overflow: clip;
  background: var(--black);
  scroll-margin-top: var(--header-h);
}
.story__media {
  position: absolute;
  inset: -12% 0;
  z-index: -2;
}
.story__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* main.js writes --parallax-y on #story; the bg consumes it as a transform */
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}
.story::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(11, 11, 12, .62), rgba(11, 11, 12, .9)),
    linear-gradient(to bottom, var(--black), rgba(11, 11, 12, .3) 22%, rgba(11, 11, 12, .3) 78%, var(--black));
}
.story__inner { text-align: center; }
.story__title {
  margin-top: var(--s2);
  font-size: var(--fs-h2);
}
.story__copy {
  margin: var(--s5) auto 0;
  max-width: 60ch;
  font-size: var(--fs-lead);
  color: var(--white);
}
.story__mark {
  height: clamp(28px, 3.4vw, 44px);
  width: auto;
  margin: clamp(var(--s6), 6vw, var(--s10)) auto 0;
  opacity: .5;
}

/* --------------------------------------------------------------------------
   15. Gallery
   -------------------------------------------------------------------------- */
.gallery { background: var(--black); }
.gallery .kicker { font-size: clamp(16px, 1.5vw, 24px); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(180px, 20vw, 260px);
  gap: var(--s2);
  margin-top: clamp(var(--s6), 6vw, var(--s10));
}
.shot {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--line);
}
.shot--wide { grid-column: span 2; }
.shot--full { grid-column: 1 / -1; }
.shot:first-child { grid-row: span 2; }
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(30%) contrast(1.04);
  transition: transform .7s var(--ease), filter .5s var(--ease);
}
.shot:hover img,
.shot:focus-within img {
  transform: scale(1.05);
  filter: grayscale(0) contrast(1.04);
}
.shot__chip {
  position: absolute;
  left: var(--s2);
  bottom: var(--s2);
  padding: 7px 12px;
  background: rgba(11, 11, 12, .82);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.shot:hover .shot__chip,
.shot:focus-within .shot__chip { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   16. Signup
   -------------------------------------------------------------------------- */
.signup {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  scroll-margin-top: var(--header-h);
}
.signup__panel {
  display: grid;
  align-items: center;
  padding: clamp(var(--s8), 8vw, 128px) var(--gutter);
}
.signup__panel--dark { background: var(--black); }
.signup__panel--light { background: var(--white); color: var(--black); }
.signup__inner { width: min(560px, 100%); }
.signup__title {
  margin-top: var(--s2);
  font-size: clamp(36px, 4.4vw, 68px);
}
.signup__copy {
  margin-top: var(--s3);
  max-width: 40ch;
  color: var(--gray);
}
.signup__panel--light .signup__copy { color: var(--dark-muted); }

.social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s6);
}
.social__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-strong);
  color: var(--white);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.social__btn:hover,
.social__btn:focus-visible {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

.signup-form { margin-top: var(--s6); }
.signup-form__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dark-muted);
}
.signup-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s2);
}
.signup-form__input {
  flex: 1 1 220px;
  min-height: 56px;
  padding: 0 var(--s2);
  border: 1px solid rgba(11, 11, 12, .3);
  border-radius: 0;
  background: transparent;
  color: var(--black);
  font-family: var(--font-body);
  font-size: 16px;
  transition: border-color var(--dur) var(--ease);
}
.signup-form__input::placeholder { color: rgba(11, 11, 12, .42); }
.signup-form__input:hover { border-color: rgba(11, 11, 12, .55); }
.signup-form__input:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.signup-form__input[aria-invalid="true"],
.signup-form__input.is-invalid { border-color: #B3202C; }

.signup-form__error,
.signup__error,
.form-error,
.signup-form [role="alert"] {
  margin-top: var(--s2);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  color: #A81C27;
}
.signup-form__error:empty { display: none; }

.form-success,
.signup__success,
.signup-form__success,
.signup__panel--light .signup-success {
  margin-top: var(--s6);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: .06em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--black);
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--black);
  border-top: 1px solid var(--line);
  padding-block: clamp(var(--s6), 5vw, var(--s10));
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
}
.site-footer__logo {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 44px;
  align-items: center;
}
/* the lockup PNG is a 1201×1201 canvas with the 894×203 artwork centred, so the
   box is set to the artwork ratio and object-fit crops the transparent bands */
.site-footer__logo img {
  height: 44px;
  width: 194px;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}
.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--gray);
  transition: color var(--dur) var(--ease);
}
.site-footer__links a:hover { color: var(--white); }
.site-footer__legal { text-align: right; }
.site-footer__line {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--gray);
}
.site-footer__fine {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gray);
}

/* --------------------------------------------------------------------------
   18. Motion — reveals, hero can entrance, floats
   Hidden-by-default states live ONLY inside this block, and only for html.js,
   so no-JS and reduced-motion users always see the content.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  html.js [data-reveal="slide-x"] { transform: translateX(var(--reveal-x, -6vw)); }
  html.js [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }
  html.js [data-reveal-delay="1"] { transition-delay: .08s; }
  html.js [data-reveal-delay="2"] { transition-delay: .16s; }
  html.js [data-reveal-delay="3"] { transition-delay: .24s; }
  html.js [data-reveal-delay="4"] { transition-delay: .32s; }
  html.js [data-reveal-delay="5"] { transition-delay: .40s; }
  html.js [data-reveal-delay="6"] { transition-delay: .48s; }

  /* hero content fade — main.js adds .is-live to #hero once the age gate is
     cleared; the long default delay is a safety net if it never does */
  html.js .hero__eyebrow,
  html.js .hero__title,
  html.js .hero__actions {
    opacity: 0;
    animation: heroFade .9s var(--ease) 2.75s both;
  }
  html.js .hero__title { animation-delay: 2.82s; }
  html.js .hero__actions { animation-delay: 3.4s; }
  html.js .is-live .hero__eyebrow { animation-delay: .1s; }
  html.js .is-live .hero__title { animation-delay: .18s; }
  html.js .is-live .hero__actions { animation-delay: .76s; }

  /* The one orchestrated moment on the page: the cans rise in on load with a
     short stagger and then hold still. Nothing else moves in the hero. */
  html.js .hero-can {
    opacity: 0;
    animation: canRise .8s var(--ease) 2.9s both;
  }
  html.js .hero-can:nth-child(2) { animation-delay: 3s; }
  html.js .hero-can:nth-child(3) { animation-delay: 3.1s; }
  html.js .hero-can:nth-child(4) { animation-delay: 3.2s; }
  html.js .is-live .hero-can:nth-child(1) { animation-delay: .3s; }
  html.js .is-live .hero-can:nth-child(2) { animation-delay: .4s; }
  html.js .is-live .hero-can:nth-child(3) { animation-delay: .5s; }
  html.js .is-live .hero-can:nth-child(4) { animation-delay: .6s; }

  /* awards gentle float — staggered so the row reads as a wave */
  .award__chip { animation: floatY 6s ease-in-out infinite; }
  .award:nth-child(2) .award__chip { animation-delay: .8s; }
  .award:nth-child(3) .award__chip { animation-delay: 1.6s; }
  .award:nth-child(4) .award__chip { animation-delay: 2.4s; }

  /* nav click feedback — press-and-spring on the button, swipe on the underline */
  .site-nav__link.is-clicked,
  .site-header__cta.is-clicked,
  .mobile-nav__link.is-clicked,
  .mobile-nav__cta.is-clicked { animation: navKick .4s var(--ease); }
  .site-nav__link.is-clicked::after { animation: navSweep .4s var(--ease); }

  /* craft badge ring pulse */
  .badge:hover .badge__ring { animation: ringPulse 1.8s ease-out infinite; }

  /* detail overlay entrance — panels persist in the DOM, so they animate off
     .is-open; the images are created per open, so they animate on insertion */
  .bottle-detail.is-open .bottle-detail__media { animation: detailMedia .6s var(--ease) both; }
  .bottle-detail.is-open .bottle-detail__body { animation: detailBody .55s var(--ease) .06s both; }
  .bottle-detail__media img { animation: detailImg .8s var(--ease) both; }
}

/* --------------------------------------------------------------------------
   18b. Scroll-driven motion — deliberately light.
   These use CSS scroll timelines, so there is no JS and no scroll listener.
   Everything lives inside BOTH the reduced-motion guard and an @supports
   test: where view() timelines are unsupported the rules never apply, so no
   element is ever left hidden by a from-state that cannot animate away.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* gallery tiles rise a little as they enter — the stagger comes free from
       each tile crossing the viewport at its own moment */
    .beach-shot {
      animation: tileIn linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 24%;
    }

    /* the carton and the big flavor renders settle rather than pop */
    .pack__media,
    .flavor__media {
      animation: settleIn linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }

    /* a few pixels of drift on the full-bleed band; not a parallax showpiece */
    .tailgate__bg {
      animation: bandDrift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}

@keyframes tileIn {
  from { opacity: 0; transform: translateY(20px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes settleIn {
  from { opacity: .35; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bandDrift {
  from { transform: scale(1.06) translateY(-1.5%); }
  to   { transform: scale(1.06) translateY(1.5%); }
}

@keyframes heroFade {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
/* Animates transform only. The fan's offsets live on the `translate` and
   `rotate` properties instead, so they survive the animation rather than being
   overwritten by it. */
@keyframes canRise {
  from { opacity: 0; transform: translateY(9%) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes navKick {
  0%   { transform: none; }
  30%  { transform: translateY(3px) scale(.95); }
  65%  { transform: translateY(-2px) scale(1.04); }
  100% { transform: none; }
}
@keyframes navSweep {
  0%   { transform: scaleX(0); transform-origin: left center; }
  45%  { transform: scaleX(1); transform-origin: left center; }
  55%  { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}
@keyframes floatY {
  0%, 100% { transform: translateY(-13px); }
  50%      { transform: translateY(13px); }
}
@keyframes ringPulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 243, 238, .18), 0 0 0 1px rgba(245, 243, 238, .2); }
  70%  { box-shadow: 0 0 0 18px rgba(245, 243, 238, 0), 0 0 0 1px rgba(245, 243, 238, .2); }
  100% { box-shadow: 0 0 0 0 rgba(245, 243, 238, 0), 0 0 0 1px rgba(245, 243, 238, .2); }
}
@keyframes detailMedia {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes detailImg {
  from { opacity: 0; transform: translateY(3%) scale(1.06); }
  to   { opacity: 1; transform: none; }
}
@keyframes detailBody {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */

/* ≤1200 */
@media (max-width: 1200px) {
  .site-nav__list { gap: var(--s3); }
  .site-nav__link { font-size: 12px; letter-spacing: .16em; }
}

/* ≤1024 — tablet landscape */
@media (max-width: 1024px) {
  :root { --header-h: 68px; }

  .craft__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
  .craft__sticky { position: static; }
  .craft__title { max-width: 26ch; }
  /* single column: the copy spans the video, so darken the whole overlay */
  .craft__media::after { background: rgba(11, 11, 12, .8); }

  .bottle-detail {
    grid-template-columns: minmax(0, min(92vw, 620px));
    grid-auto-rows: auto;
    align-content: center;
    padding: var(--s2);
    overflow-y: auto;
  }
  .bottle-detail__media { height: min(42vh, 340px); border-right: 1px solid var(--line); border-bottom: 0; }
  .bottle-detail__body { height: auto; gap: var(--s2); padding: var(--s5); }
}

/* ≤820 — mobile nav breakpoint */
@media (max-width: 820px) {
  .site-nav,
  .site-header__cta { display: none; }
  .nav-toggle { display: grid; }

  /* no-JS safety: keep the inline nav usable when the toggle can't work */
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-header { height: auto; background: rgba(11, 11, 12, .92); }
  html:not(.js) .site-header__inner { flex-wrap: wrap; gap: var(--s1) var(--s2); padding-block: 10px; }
  html:not(.js) .site-nav { margin-left: auto; width: 100%; }
  html:not(.js) .site-nav__list { flex-wrap: wrap; justify-content: flex-start; gap: var(--s2); }
  html:not(.js) .site-nav__link { min-height: 32px; font-size: 11px; letter-spacing: .14em; }

  .signup { grid-template-columns: minmax(0, 1fr); }
  .awards-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s3); }
  .pack { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(150px, 34vw, 220px);
  }
  .shot--wide { grid-column: span 2; }
  .shot:first-child { grid-row: span 1; }

  .site-footer__inner { justify-content: center; text-align: center; }
  .site-footer__legal { text-align: center; }

  /* HERO — four cans across a tablet width still read, but the fan has to
     flatten or the outer two tilt off the gutter. */
  .hero {
    --can-h: clamp(280px, 38vh, 400px);
    min-height: 0;
    padding-block: calc(var(--header-h) + var(--s4)) var(--s8);
  }
  .hero-can:nth-child(1) { --tilt: -4deg; --lift: 3%; }
  .hero-can:nth-child(2) { --tilt: -1.5deg; --lift: -2%; }
  .hero-can:nth-child(3) { --tilt: 1.5deg; --lift: -2%; }
  .hero-can:nth-child(4) { --tilt: 4deg; --lift: 3%; }


  /* one column, so the alternating desktop rhythm is switched off entirely */
  .flavor,
  .flavor:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s5);
    text-align: center;
  }
  .flavor:nth-child(even) .flavor__media,
  .flavor:nth-child(even) .flavor__body { grid-column: 1; grid-row: auto; }
  .flavor:nth-child(even) [data-reveal="slide-x"] { --reveal-x: -6vw; }
  .flavors__stage { gap: clamp(var(--s7), 16vw, var(--s10)); }
  .flavor__media { min-height: 0; }
  .flavor__can { block-size: clamp(280px, 52vw, 400px); }
  .flavor__blurb,
  .flavor__specs { margin-inline: auto; }
  .flavor__specs { justify-content: center; }

  .locator { flex-direction: column; align-items: stretch; }
  .locator__field { max-width: none; }
  .locator__submit { width: 100%; }

  /* pack stacks: carton above the manifest */
  .pack { grid-template-columns: minmax(0, 1fr); }
  .pack__media { order: -1; }
  .pack__glow { inset: 12% 0; filter: blur(38px); }

  /* Two columns: 8 shots, and the spans have to re-tile. One full-width
     feature (2x1) + seven 1x1 = 9 cells, which leaves an odd cell, so the
     tall one keeps its 1x2 and takes it: 2 + 2 + 6 = 10 cells over 5 rows. */
  .beach-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(140px, 26vw, 220px);
  }
  .beach-shot--big { grid-column: span 2; grid-row: span 1; }
}

/* ≤680 */
@media (max-width: 680px) {
  :root { --header-h: 64px; }

  .section-head { max-width: none; }
  .hero__actions .btn { flex: 1 1 100%; }
  .age-gate__actions .btn { flex: 1 1 100%; }

  /* Four cans squeezed into a phone width stop being legible, so they go
     two-up instead of shrinking. Labels stay readable; the fan becomes two
     mirrored pairs. */
  .hero {
    --can-h: clamp(190px, 34vh, 260px);
    padding-block: calc(var(--header-h) + var(--s3)) var(--s7);
  }
  .hero-cans {
    grid-template-columns: repeat(2, auto);
    gap: var(--s3) clamp(var(--s2), 5vw, var(--s4));
  }
  .hero-can:nth-child(1) { --tilt: -5deg; --lift: 0; }
  .hero-can:nth-child(2) { --tilt: 5deg; --lift: 0; }
  .hero-can:nth-child(3) { --tilt: -5deg; --lift: 0; }
  .hero-can:nth-child(4) { --tilt: 5deg; --lift: 0; }




  /* trust strip goes two-up rather than squeezing five across a phone */
  .trust__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s2) var(--s3);
    justify-items: start;
  }
  .trust__label { font-size: 14px; }
  .trust__item + .trust__item::before { display: none; }

  .beach-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: clamp(200px, 56vw, 300px);
  }
  .beach-shot--big,
  .beach-shot--tall { grid-column: span 1; grid-row: span 1; }

  .pack__flavor { grid-template-columns: 1fr auto; row-gap: 2px; }
  .pack__flavor-note { grid-column: 1; }

  .gallery-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: clamp(200px, 62vw, 300px); }
  .shot--wide, .shot:first-child { grid-column: span 1; grid-row: span 1; }

  .stat-strip { -webkit-text-stroke-width: .75px; }

  .signup-form__row .btn { flex: 1 1 100%; }
  .bottle-detail__media { height: min(36vh, 280px); }
}

/* ≤400 */
@media (max-width: 400px) {
  .bottle-card { width: 160px; }
}

/* short viewports — the cans are the tallest thing on the page, so they give
   ground first rather than letting the headline or the CTAs get pushed out */
@media (max-height: 760px) and (min-width: 821px) {
  .hero { --can-h: clamp(230px, 40vh, 360px); }
}
@media (max-height: 620px) and (min-width: 821px) {
  .hero { min-height: 0; padding-block: calc(var(--header-h) + var(--s4)) var(--s8); }
}

/* wide screens */
@media (min-width: 1600px) {
  :root { --container: 1280px; }
}

/* hover-less devices: reveal chips/bars that rely on hover */
@media (hover: none) {
  .shot__chip { opacity: 1; transform: none; }
  .bottle-card__bar { width: 44px; }
}

/* --------------------------------------------------------------------------
   20. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .bottle-track { overflow-x: auto; }
  .story__bg { transform: none !important; }
  /* the cans keep their fan offsets — those are layout, not motion — but the
     rise animation collapses to nothing */
  .hero-can { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   21. Print
   -------------------------------------------------------------------------- */
@media print {
  .age-gate, .site-header, .mobile-nav, .bottle-detail { display: none !important; }
  body { background: #fff; color: #000; }
}