/* ==========================================================================
   MARQUEE EXCLUSIVE
   Deep purple ground, marquee gold, the character labels as the colour.
   Display: Anton · Body: Figtree · Accent caps: Oswald
   (Round 1 client feedback: the theatre/film vocabulary is gone — the
   marquee *lights* stay, the playbill language does not. The MARQUEE and
   BOURBON WITH A SOCIAL LIFE lockups are the brand's own bulb artwork
   rather than type, so the swooping Q is exact.)
   Animations are a layer, not a dependency: every rule here describes the
   finished (end) state; GSAP animates *from* offsets so no-JS and
   reduced-motion visitors always see the complete page.
   ========================================================================== */

:root {
  --purple: #32103C;
  --purple-deep: #250A2E;
  --purple-deepest: #1C0722;
  --purple-line: #4A2158;
  --gold: #F5A623;
  --gold-light: #FFD97A;
  --bulb: #FFF3C4;
  --teal: #2FA8C5;
  --orange: #E87722;
  --pink: #E8A0D8;
  --green: #8CC63F;
  --cream: #F3E9D7;
  --cream-dim: #CDBBD6;

  /* Hard offset shadows for display type. Round 2: the client pointed out the
     headlines were the only type on the site wearing a shadow, so they are
     switched off here, site-wide. To bring them back, restore the colours:
     steel #306487 (--teal taken down), brick #8D442F (--orange taken down). */
  --shadow-steel: transparent;
  --shadow-brick: transparent;

  /* Brothers OT (Emigre) is the brand's real face — it is what the labels,
     cork and box are set in, confirmed from the logo EPS. Served from the
     agency Adobe Fonts project. It carries both the display sizes and the
     small tracked-out caps, which is exactly how the labels use it. */
  --font-display: "brothers", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --font-accent: "brothers", "Arial Narrow", "Helvetica Neue", sans-serif;

  --measure: 62ch;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
}

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

html { scroll-behavior: smooth; }

/* Lenis owns the scroll when it is running; native smooth scrolling fights it
   (Lenis calls window.scrollTo every frame and the browser re-eases the jump). */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--purple);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold); }
a:hover { color: var(--gold-light); }

/* Visible focus everywhere — non-negotiable. */
:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 3px;
}

/* ---- type ---------------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0;
  /* Opt-in: a section sets --display-shadow to switch the offset on. Left
     transparent by default so nothing inherits a shadow it wasn't designed
     with — small headings wear it badly at this offset ratio. */
  text-shadow: 0.045em 0.055em 0 var(--display-shadow, transparent);
}

h1.display { font-size: clamp(3.1rem, 9.5vw, 7.2rem); text-wrap: balance; }
h2.display { font-size: clamp(2.75rem, 8.4vw, 6.25rem); text-wrap: balance; }
h3.display { font-size: clamp(1.5rem, 4vw, 2.25rem); }

/* Section-level shadow assignments. */
.shadow-steel { --display-shadow: var(--shadow-steel); }
.shadow-brick { --display-shadow: var(--shadow-brick); }

/* ---- section head block (left-aligned eyebrow + rule) -------------------- */

.head-block { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.head-block .eyebrow {
  display: flex;
  white-space: nowrap;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--gold);
}
.head-block .eyebrow .star { color: var(--gold); letter-spacing: 0; }
/* Head blocks live in a half-width column, so they cap well below the
   full-bleed centred heads — at h2.display's own max they run to four lines. */
.head-block h2 { margin-top: clamp(1.2rem, 3vw, 2rem); font-size: clamp(1.9rem, 3.8vw, 3.25rem); letter-spacing: -0.01em; }

.kicker {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}

.kicker--orange { color: var(--orange); }
.kicker--pink { color: var(--pink); }
.kicker--green { color: var(--green); }
.kicker--gold { color: var(--gold); }

.accent-teal { color: var(--teal); }
.accent-orange { color: var(--orange); }
.accent-pink { color: var(--pink); }
.accent-green { color: var(--green); }
.accent-gold { color: var(--gold); }

/* Components set their own display, which beats the UA's [hidden] rule.
   Content parked until the client supplies it uses `hidden`, so it must win. */
[hidden] { display: none !important; }

/* Read by screen readers, not shown. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- skip link ------------------------------------------------------------ */

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  padding: 0.7rem 1.2rem;
  background: var(--gold);
  border: 2px solid var(--purple-deep);
  color: var(--purple-deep);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(calc(-100% - 1.5rem));
}
.skip-link:focus { transform: none; }

/* ---- star divider -------------------------------------------------------- */

.stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 0.5em;
  margin: 0 auto;
  user-select: none;
}
.stars::before,
.stars::after {
  content: "";
  height: 1px;
  width: clamp(2rem, 8vw, 5rem);
  background: var(--purple-line);
}

/* ---- bulb strips (marquee lights) ---------------------------------------- */
/* Round 1: client asked whether the bulbs should be larger. They should —
   at the old 16px the strip read as a dotted rule rather than a marquee. */

.bulbs {
  height: 22px;
  background-image: radial-gradient(circle at 50% 50%, var(--bulb) 0 4.2px, var(--gold) 4.2px 6.2px, transparent 7.4px);
  background-size: 36px 22px;
  /* `round` fits a whole number of bulbs to the strip width, so the pattern
     never clips mid-bulb at either edge. */
  background-repeat: round no-repeat;
  background-position: 0 50%;
  animation: bulb-shimmer 2.4s linear infinite;
}

/* Segmented strip: ten spans so JS can ignite the marquee section-by-section.
   Without JS the spans simply shimmer in alternating phase — still alive. */
.bulbs--seg {
  display: flex;
  background: none;
  animation: none;
}
.bulbs--seg span {
  flex: 1;
  background-image: radial-gradient(circle at 50% 50%, var(--bulb) 0 4.2px, var(--gold) 4.2px 6.2px, transparent 7.4px);
  background-size: 36px 22px;
  background-repeat: round no-repeat;
  background-position: 0 50%;
  animation: bulb-shimmer 2.4s linear infinite;
}
.bulbs--seg span:nth-child(odd) { animation-delay: -1.2s; }
/* While GSAP runs the ignition flicker it owns opacity; CSS steps aside. */
.bulbs--seg.igniting span { animation: none; }

/* Ambient shimmer: a gentle two-phase glow, not a hard blink. */
@keyframes bulb-shimmer {
  0%, 44% { opacity: 1; }
  50%, 94% { opacity: 0.72; }
  100% { opacity: 1; }
}

.bulbs--dim { opacity: 0.4; animation-duration: 4s; }

/* ---- header / nav -------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--purple-line);
  background: var(--purple-deep);
}

.nav {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0.85rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* The wordmark is the brand's own bulb lockup, not type — the only way to get
   the swooping Q the client asked for, and it matches cork, box and label. */
.nav-wordmark { display: block; line-height: 0; }
.nav-wordmark img { width: clamp(9.5rem, 20vw, 13rem); }

.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem clamp(0.7rem, 2.4vw, 1.5rem);
  list-style: none;
}
.nav-links a,
.nav-links button {
  position: relative;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream);
  background: none;
  border: 0;
  padding: 0.2rem 0;
  cursor: pointer;
  /* Labels wrap as whole phrases, never mid phrase. */
  white-space: nowrap;
}
.nav-links .nav-star { color: var(--gold); font-size: 0.8rem; line-height: 1; }
@media (max-width: 44rem) {
  .nav { padding-bottom: 1.1rem; row-gap: 0.9rem; }
  .nav-links { justify-content: center; width: 100%; }
  .nav-links a, .nav-links button { font-size: 0.7rem; letter-spacing: 0.1em; }
  .nav-links .nav-star { display: none; }
}
.nav-links a:hover,
.nav-links button:hover { color: var(--gold-light); }
.nav-links a[aria-current="page"] { color: var(--gold); }
/* BottleNexus opens its cart drawer on any click whose target carries
   .cart-trigger — so this button holds text only, no child elements. */
.nav-links .nav-cart { color: var(--gold); }
/* Bulb-glow underline sweep */
.nav-links a::after,
.nav-links button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold), 0 0 3px var(--gold-light);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links button:hover::after,
.nav-links button:focus-visible::after { transform: scaleX(1); }
.nav-links .nav-star::after { display: none; }

/* ---- hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--purple);
  text-align: center;
  padding: 0 var(--pad) clamp(2.5rem, 6vw, 4rem);
  overflow: hidden;
}

.hero > .bulbs--seg {
  margin: 0 calc(-1 * var(--pad));
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 62rem;
  margin: 0 auto;
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
}

.hero-logo {
  width: min(38rem, 92vw);
  margin: 0 auto;
}

/* Round 3: only MARQUEE stays as bulb artwork. The lines under it are set in
   the tagline's tracked-out Brothers, in the logo's own colours. */
.hero-lockup {
  margin-top: clamp(0.6rem, 1.6vw, 1rem);
  font-family: var(--font-accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.15;
}
.hero-lockup > span { display: block; }
.hero-exclusive {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-size: clamp(1.7rem, 5.6vw, 3.4rem);
  color: var(--teal);
}
.hero-exclusive .star { color: var(--gold); font-size: 0.6em; letter-spacing: 0; }
.hero-kind-1 {
  margin-top: 0.7rem;
  font-size: clamp(0.95rem, 2.6vw, 1.55rem);
  color: var(--orange);
}
.hero-kind-2 {
  margin-top: 0.2rem;
  font-size: clamp(1.45rem, 4.4vw, 2.7rem);
  color: var(--orange);
}

/* Round 2: the bulb lockup came out of the hero in favour of the flat,
   tracked-out line (the footer treatment, at hero size). The video takes
   the space the lockup held. */
.hero-tagline {
  /* Flex keeps the two stars on the outside and the phrase centred between
     them when it wraps on a phone. */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: clamp(1.4rem, 3vw, 2.2rem) auto 0;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(1.05rem, 3.4vw, 2rem);
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--teal);
  text-wrap: balance;
}
.hero-tagline .star { flex: none; color: var(--gold); letter-spacing: 0; margin-inline: 0.35em; }
.hero-tagline-text { text-align: center; }
/* Phones: one line, stars hugging the phrase (Round 3, "stacks funny"). */
@media (max-width: 30rem) {
  .hero-tagline { font-size: 3.9vw; letter-spacing: 0.1em; white-space: nowrap; }
  .hero-tagline .star { margin-inline: 0.45em; }
}

/* The big gold VIDEO star from the client's sketch. Opens the brand video. */
.hero-video { margin-top: clamp(1.4rem, 3.5vw, 2.2rem); }

.video-star {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: clamp(8.5rem, 22vw, 12rem);
  aspect-ratio: 1;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--gold);
  filter: drop-shadow(0 0 18px rgba(245, 166, 35, 0.35));
  transition: filter 0.28s ease;
  animation: video-star-pulse 2.8s ease-in-out infinite;
}
/* GSAP spins the button in; the hover wobble lives on this inner face.
   A CSS transform transition on the button itself makes GSAP read a
   mid-transition angle as the resting pose, and the star stays rotated. */
.video-star-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.video-star svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.video-star-label {
  position: relative;
  /* Sits a touch above the star's centre (Kris, Oct 9). */
  margin-top: 0.05em;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(0.82rem, 2.2vw, 1.35rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--purple);
}
.video-star:hover {
  color: var(--gold-light);
  filter: drop-shadow(0 0 28px rgba(255, 217, 122, 0.55));
}
.video-star:hover .video-star-face { transform: scale(1.06) rotate(-6deg); }
@keyframes video-star-pulse {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(245, 166, 35, 0.3)); }
  50% { filter: drop-shadow(0 0 30px rgba(255, 217, 122, 0.6)); }
}
.video-star:hover { animation-play-state: paused; }

/* Real labels peeking in from the edges — desktop set dressing only. */
.hero-wings { display: none; }
@media (min-width: 78em) {
  .hero-wings { display: block; }
  .hero-wing {
    position: absolute;
    z-index: 1;
    top: clamp(3rem, 8vh, 6rem);
    width: 15rem;
    height: auto;
    opacity: 0.92;
    border-radius: 6px;
    box-shadow: 0 32px 64px rgba(10, 2, 12, 0.55);
  }
  .hero-wing--left { left: -4.75rem; transform: rotate(-6deg); }
  .hero-wing--right { right: -4.75rem; transform: rotate(6deg); }
}

/* ---- generic section ----------------------------------------------------- */

.section {
  padding: clamp(3.5rem, 9vw, 7rem) var(--pad);
}
.section--tight { padding-top: clamp(2.5rem, 6vw, 4rem); }
.section-inner { max-width: 76rem; margin: 0 auto; }
.section-inner--narrow { max-width: 56rem; }
.section-head { text-align: center; max-width: 60rem; margin: 0 auto 1rem; }
.section-head .kicker { display: block; margin-bottom: 1rem; }
.section-head .stars { margin-top: 1.5rem; }
.section-lede {
  max-width: var(--measure);
  margin: 1.4rem auto 0;
  text-align: center;
  color: var(--cream-dim);
}

.section--deep { background: var(--purple-deep); }

/* ---- brand story --------------------------------------------------------- */

.story-act { position: relative; overflow: hidden; }
.story-act .section-inner { position: relative; z-index: 2; }
.section-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 70% at 50% 42%, transparent 40%, rgba(10, 2, 12, 0.6) 100%);
  opacity: 0.6;
}

/* Two columns: lifestyle imagery holds the left, the story prose runs down the
   right at reading size. The payoff line then breaks the grid and runs to the
   right — it is the sentence the last paragraph deliberately stops short of. */
.story-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
@media (max-width: 56rem) {
  .story-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.story p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--cream-dim);
}
.story p + p { margin-top: 1.5em; }
.story strong { font-weight: 700; color: var(--cream); }
/* The client's colour reference: each highlighted phrase in its own label
   colour. These have to out-rank the plain .story strong rule above. */
.story .accent-teal { color: var(--teal); }
.story .accent-green { color: var(--green); }
.story .accent-pink { color: var(--pink); }
.story .accent-orange { color: var(--orange); }
.story .accent-gold { color: var(--gold); }
.story .stars { margin-top: 1.8rem; letter-spacing: 0.6em; font-size: 1.35rem; }
.story .stars::before,
.story .stars::after { display: none; }

/* Client asked for the big headline to become lifestyle imagery — people
   drinking socially. Real photography is owed; these are marked placeholders
   laid out at the final proportions. */
.lifestyle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: clamp(0.7rem, 1.8vw, 1.1rem);
}
.lifestyle-shot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border: 2px solid var(--swatch, var(--gold));
  background: var(--purple-deepest);
  text-align: center;
  padding: 1rem;
  overflow: hidden;
}
.lifestyle-shot:has(img) { padding: 0; }
.lifestyle-shot img { width: 100%; height: 100%; object-fit: cover; }
.lifestyle-shot--wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.lifestyle > .lifestyle-shot:nth-child(1) { transform: rotate(-1.4deg); }
.lifestyle > .lifestyle-shot:nth-child(2) { transform: rotate(1.2deg); }
.lifestyle > .lifestyle-shot:nth-child(3) { transform: rotate(0.8deg); }
/* A wide slot standing on its own (the batch group photo) is capped so it
   does not become a full-bleed empty band while the photo is outstanding. */
.lifestyle-shot--solo { max-width: 56rem; margin-inline: auto; aspect-ratio: 21 / 9; }
/* Once the real photo is in, the frame takes the photo's own proportions. */
.lifestyle-shot--photo { aspect-ratio: 3 / 2; padding: 0; }

.placeholder-note {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.placeholder-note .star-mark { display: block; color: var(--gold); font-size: 1.4rem; letter-spacing: 0; margin-bottom: 0.4rem; }
/* The small slots are short boxes on phones; the note has to fit inside the
   aspect-ratio rather than be cropped by it. 0.72rem = 11.5px, which still
   clears the cap-height floor Brothers needs to keep its chamfers clean. */
@media (max-width: 40rem) {
  .placeholder-note { font-size: 0.72rem; letter-spacing: 0.14em; }
  .placeholder-note .star-mark { font-size: 1.15rem; margin-bottom: 0.25rem; }
  .lifestyle-shot:not(:has(img)) { aspect-ratio: auto; min-height: 9rem; padding: 1.1rem 0.75rem; }
}

.story-payoff .accent-pink { color: var(--pink); }
.story-payoff {
  position: relative;
  z-index: 3;
  margin: clamp(2.2rem, 5vw, 3.5rem) 0 0 auto;
  padding-right: clamp(0rem, 4vw, 3.5rem);
  font-family: var(--font-accent);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 5.4vw, 4rem);
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--gold);
  text-align: right;
  max-width: 20ch;
}

/* ---- ambient set dressing: scattered posters ----------------------------- */

/* Desktop-only decoration. It is absolutely positioned outside the content
   flow, so on narrow screens it has nowhere safe to sit — hidden rather than
   squeezed. aria-hidden + pointer-events:none in every case. */
.poster-scatter {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
@media (min-width: 64em) {
  .poster-scatter { display: block; }
}
.scatter-poster {
  position: absolute;
  width: var(--w, 11rem);
  border: 3px solid var(--swatch, var(--gold));
  border-radius: 3px;
  box-shadow: 0 26px 52px rgba(10, 2, 12, 0.55);
  opacity: 0.9;
}

/* ---- label crawl (counter-scrolling marquee rows) ------------------------- */
/* This replaces the static bottle line-up on the homepage: the labels move. */

.crawl {
  overflow: hidden;
  background: var(--purple-deepest);
  padding: clamp(1.6rem, 4vw, 2.4rem) 0;
}
/* Bulb strips top and bottom turn the crawl from a filler band into a framed
   marquee. */
.crawl > .bulbs { margin-bottom: 1.4rem; }
.crawl > .bulbs--bottom { margin-bottom: 0; margin-top: 1.4rem; }

.crawl-row { overflow: hidden; }
.crawl-row + .crawl-row { margin-top: 1.4rem; }
.crawl-track {
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  width: max-content;
  animation: crawl-left 92s linear infinite;
  will-change: transform;
}
.crawl-track--reverse { animation-name: crawl-right; }
/* Each parade card carries its character's colour as a frame, so the row
   reads as twelve distinct characters, not a texture. */
.crawl-card {
  position: relative;
  flex: 0 0 auto;
  display: block;
  border: 3px solid var(--swatch, var(--gold));
  line-height: 0;
}
.crawl-track img {
  width: clamp(7.5rem, 13vw, 10.5rem);
  height: auto;
}
@keyframes crawl-left { to { transform: translateX(-50%); } }
@keyframes crawl-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* When GSAP drives the crawl (hover-pause + drift) the CSS loop steps aside. */
.crawl--gsap .crawl-track { animation: none; }

/* ---- small-batch teaser / explainer -------------------------------------- */

.batch-teaser {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: center;
}
@media (max-width: 56rem) {
  .batch-teaser { grid-template-columns: 1fr; gap: 2.5rem; }
}
.batch-teaser-copy p { margin-top: 1.2rem; color: var(--cream-dim); }
.batch-teaser-copy p strong { color: var(--cream); }
.batch-teaser-copy p .accent-teal { color: var(--teal); }
.batch-teaser-copy p .accent-green { color: var(--green); }
.batch-teaser-copy p .accent-pink { color: var(--pink); }
.batch-teaser-copy p .accent-orange { color: var(--orange); }
.batch-teaser-copy .btn { margin-top: 1.8rem; }

/* The claim, set as the headline the client wrote. */
.claim {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--gold);
  text-wrap: balance;
}
.claim .roles { display: block; margin-top: 0.5rem; color: var(--teal); font-size: 0.62em; }

/* ---- selection committee photos ------------------------------------------ */
/* "Pictures of the barrel selection committee in action" — Batch #1
   selection session photography, cropped 4:5. */

.committee-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.8rem, 2vw, 1.3rem);
  list-style: none;
}
.committee-grid > li:nth-child(odd) { transform: rotate(-1.4deg); }
.committee-grid > li:nth-child(even) { transform: rotate(1.2deg); }
.committee-grid > li:nth-child(3) { margin-top: 1.2rem; }
.committee-grid > li:nth-child(4) { margin-top: 2rem; }
@media (max-width: 30rem) {
  .committee-grid { gap: 0.7rem; }
  .committee-grid > li { transform: none !important; margin-top: 0 !important; }
  .committee-shot { aspect-ratio: 3 / 4; padding: 0.5rem; }
}
.committee-shot {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border: 2px solid var(--swatch, var(--gold));
  background: var(--purple-deepest);
  text-align: center;
  padding: 1rem;
  overflow: hidden;
}
.committee-shot:has(img) { padding: 0; }
.committee-shot img { width: 100%; height: 100%; object-fit: cover; }

/* ---- tastemaker roster (photo + bio, per batch) -------------------------- */

.tastemakers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1.5rem, 4vw, 2.6rem);
  list-style: none;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.tastemaker-photo {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border: 2px dashed var(--purple-line);
  background: var(--purple-deepest);
  text-align: center;
  padding: 1rem;
  overflow: hidden;
  transition: border-color 0.25s ease;
}
.tastemaker-photo img { width: 100%; height: 100%; object-fit: cover; }
.tastemaker:hover .tastemaker-photo { border-color: var(--gold); }
.tastemaker-name {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gold);
}
.tastemaker-role {
  margin-top: 0.25rem;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}
.tastemaker-bio { margin-top: 0.8rem; font-size: 0.92rem; color: var(--cream-dim); }
/* Text-only roster (Batch #1: names and bios, no matched portraits yet). */
/* Nine tastemakers: three across reads as a full 3x3, no orphan. */
@media (min-width: 56.01rem) {
  .tastemakers--text { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tastemakers--text .tastemaker {
  padding-top: 1.1rem;
  border-top: 2px solid var(--purple-line);
}
.tastemakers--text .tastemaker-name { margin-top: 0; }

/* ---- buttons ------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.9rem;
  border: 2px solid var(--gold);
  color: var(--purple-deep);
  background: var(--gold);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, color 0.2s ease;
}
.btn:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--purple-deep);
  box-shadow: 0 0 24px rgba(245, 166, 35, 0.35);
}

.btn--ghost {
  background: transparent;
  color: var(--gold);
}
.btn--ghost:hover { background: var(--gold); color: var(--purple-deep); }

.btn[disabled] {
  background: transparent;
  border-color: var(--purple-line);
  color: var(--cream-dim);
  cursor: not-allowed;
  box-shadow: none;
}

/* ---- shop ---------------------------------------------------------------- */

/* ---- BottleNexus buy block -------------------------------------------------
   BottleNexus sells Marquee as ONE product (id 12915). Their button is an
   iframe they render in place of the embed script; its colours and label
   ("PRE-ORDER") are set in the BottleNexus dashboard, not here. The slot
   only reserves its height (42px) so the page does not jump when it loads. */
.shop-buy {
  margin: 0 auto;
  max-width: 62rem;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
@media (max-width: 44rem) {
  .shop-buy { grid-template-columns: 1fr; text-align: center; }
  .shop-buy-label { max-width: 17rem; margin-inline: auto; }
}
.shop-buy-label {
  border: 3px solid var(--gold);
  box-shadow: 0 26px 52px rgba(10, 2, 12, 0.55);
  transform: rotate(-2deg);
}
.shop-buy-label img { width: 100%; height: auto; }
.shop-buy-label--bottle {
  max-width: 10.5rem;
  margin-inline: auto;
  border: 0;
  box-shadow: none;
  transform: none;
  filter: drop-shadow(0 26px 30px rgba(10, 2, 12, 0.6));
}
@media (max-width: 44rem) {
  .shop-buy-label--bottle { max-width: 7.5rem; }
}
.shop-buy-kicker {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}
.shop-buy-name {
  margin-top: 0.7rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.8vw, 3rem);
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--gold);
  text-wrap: balance;
}
.shop-buy-size {
  margin-top: 0.8rem;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}
.shop-buy-cast {
  margin-top: 1.3rem;
  max-width: 28rem;
  color: var(--cream-dim);
  line-height: 1.6;
}
@media (max-width: 44rem) {
  .shop-buy-cast { margin-inline: auto; }
}
.shop-buy-price {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245, 166, 35, 0.3);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.8vw, 2.3rem);
  line-height: 1;
  color: var(--cream);
}
.bnx-slot { margin-top: 1.2rem; min-height: 42px; }
/* Their iframe centres itself; in the two-column layout it should sit on the
   copy's left edge. */
@media (min-width: 44.01rem) {
  .bnx-slot iframe { margin-left: 0 !important; }
}
.shop-buy-note {
  margin-top: 1rem;
  max-width: 28rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--cream-dim);
}
@media (max-width: 44rem) {
  .shop-buy-note { margin-inline: auto; }
}
.shop-buy-learn { margin-top: 1.4rem; }
.shop-buy-learn a {
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 0.35em;
}
.shop-buy-learn a:hover { color: var(--gold-light); }

/* ---- the twelve labels ---------------------------------------------------- */
/* Four across on desktop, three on tablet, two on phones: twelve always
   divides evenly, so no orphan row. */
.shop-labels-head {
  margin-top: clamp(4rem, 10vw, 7rem);
  text-align: center;
}
.shop-labels {
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  max-width: 62rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.9rem, 2.4vw, 1.75rem);
  list-style: none;
}
@media (max-width: 56rem) {
  .shop-labels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 34rem) {
  .shop-labels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.shop-label img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 14px 30px rgba(10, 2, 12, 0.5);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}
.shop-label:hover img {
  transform: translateY(-6px);
  box-shadow: 0 24px 44px rgba(10, 2, 12, 0.65);
}
/* Cut-out bottle photos: the shadow follows the glass, not the image box. */
.shop-labels--bottles .shop-label img,
.shop-labels--bottles .shop-label:hover img {
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 14px 18px rgba(10, 2, 12, 0.55));
}
.shop-labels--bottles .shop-label img { width: 88%; margin-inline: auto; }
/* Bottles are narrow: six across on desktop, four on tablet, three on phones. */
.shop-labels--bottles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 56rem) {
  .shop-labels--bottles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 34rem) {
  .shop-labels--bottles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Shop: pick your label (Round 3) ------------------------------------- */
.shop-intro { max-width: 46rem; margin: 0 auto; text-align: center; }
.shop-intro .shop-buy-cast,
.shop-intro .shop-buy-note { margin-inline: auto; }
.shop-intro .shop-buy-price {
  display: inline-block;
  padding: 1.2rem 2.5rem 0;
}
.shop-pick-head { margin-top: clamp(2.5rem, 6vw, 3.5rem); text-align: center; }
.shop-pick-head p { margin-top: 0.6rem; color: var(--cream-dim); }

.bottle-picker {
  margin: clamp(1.8rem, 4vw, 2.6rem) auto 0;
  max-width: 66rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.2rem) clamp(0.8rem, 2vw, 1.4rem);
  list-style: none;
}
@media (max-width: 56rem) { .bottle-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .bottle-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Below ~350px two columns are narrower than BottleNexus's button text. */
@media (max-width: 22rem) {
  .bottle-picker { grid-template-columns: 1fr; }
  .bottle-pick img { width: 7rem; }
}
.bottle-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.6rem 1.1rem;
  border: 1px solid transparent;
  scroll-margin-top: 2rem;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.bottle-pick img {
  width: min(8.5rem, 70%);
  height: auto;
  filter: drop-shadow(0 14px 18px rgba(10, 2, 12, 0.55));
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.bottle-pick:hover img { transform: translateY(-6px); }
.bottle-pick-name {
  margin-top: 0.9rem;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  text-align: center;
}
.bottle-pick .bnx-slot { margin-top: 0.7rem; width: 100%; }
/* BottleNexus sizes its iframe at a fixed 200px; on phones a column is
   narrower, so the frame is held to the column. */
.bottle-pick .bnx-slot iframe { margin-inline: auto !important; max-width: 100% !important; }
/* Arriving from a label link (shop#albert): light the chosen bottle. */
.bottle-pick:target {
  border-color: var(--gold);
  background: var(--purple-deep);
  box-shadow: 0 0 36px rgba(245, 166, 35, 0.22);
}

/* Batch page label grid: each label links to its bottle in the Shop. */
.shop-label a { display: block; }
.shop-label a:focus-visible { outline-offset: 4px; }

/* The twelve-bottle lineup photo, above the label grid on the batch page. */
.lineup-shot {
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  max-width: 62rem;
  border: 3px solid var(--gold);
  box-shadow: 0 26px 52px rgba(10, 2, 12, 0.55);
}
.lineup-shot img { display: block; width: 100%; height: auto; }

.shop-note {
  margin: clamp(2.5rem, 6vw, 3.5rem) auto 0;
  max-width: 44rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--cream-dim);
}

/* ---- privacy & terms ------------------------------------------------------ */

.legal-toc {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.legal-toc a { color: var(--teal); text-decoration: none; }
.legal-toc a:hover { color: var(--gold-light); }
.legal-toc span { color: var(--gold); }

.legal {
  max-width: var(--measure);
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  color: var(--cream-dim);
  scroll-margin-top: 6rem;
}
.legal + .legal {
  padding-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--purple-line);
}
.legal h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--gold);
}
.legal h3 {
  margin-top: 2rem;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  scroll-margin-top: 6rem;
}
.legal p, .legal ul { margin-top: 0.8rem; line-height: 1.7; }
.legal ul { padding-left: 1.2rem; }
.legal li + li { margin-top: 0.4rem; }
.legal strong { color: var(--cream); }
.legal a { color: var(--teal); text-underline-offset: 0.2em; }
.legal a:hover { color: var(--gold-light); }
.footer-legal a { color: inherit; text-underline-offset: 0.2em; }
.footer-legal a:hover { color: var(--gold); }

/* ---- footer -------------------------------------------------------------- */

.site-footer {
  background: var(--purple-deep);
  font-size: 0.85rem;
  color: var(--cream-dim);
}
.footer-inner {
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) var(--pad);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 52rem) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-wordmark { display: inline-block; line-height: 0; }
.footer-wordmark img { width: clamp(12rem, 26vw, 16rem); }
.footer-tagline {
  margin-top: 1.1rem;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal);
}
.footer-tagline .star { color: var(--gold); letter-spacing: 0; }

.footer-links {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  list-style: none;
}
.footer-links a {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
}
.footer-links a:hover { color: var(--gold-light); text-decoration: underline; }

.footer-social {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.footer-social a {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--purple-line);
  color: var(--cream);
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.footer-social a:hover { border-color: var(--gold); color: var(--purple-deep); background: var(--gold); }
.footer-social svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }

/* ---- newsletter signup --------------------------------------------------- */

.newsletter {
  border: 1px solid var(--purple-line);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  background: var(--purple);
}
.newsletter h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.4vw, 1.85rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gold);
}
.newsletter-disclaimer {
  margin-top: 0.7rem;
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.newsletter-form {
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.newsletter-form .full { grid-column: 1 / -1; }
@media (max-width: 26rem) {
  .newsletter-form { grid-template-columns: 1fr; }
}

.field label {
  display: block;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 0.35rem;
}
.field input,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--cream);
  background: var(--purple-deepest);
  border: 1px solid var(--purple-line);
  padding: 0.7rem 0.85rem;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus,
.field textarea:focus { outline: 3px solid var(--gold-light); outline-offset: 1px; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(205, 187, 214, 0.55); }

/* Shown by JS after a submit. The newsletter form is still a stub. */
.form-status {
  margin-top: 0.9rem;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--green);
}
.form-status[hidden] { display: none; }
.form-status--error { color: var(--gold-light); text-transform: none; letter-spacing: 0.04em; }
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.footer-legal {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--purple-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  font-size: 0.72rem;
}
.footer-legal .legal-line span + span::before { content: "\00B7"; margin: 0 0.5em; }
@media (max-width: 40rem) {
  .footer-legal .legal-line span { display: block; }
  .footer-legal .legal-line span + span::before { content: none; }
}
.footer-legal .distillery {
  font-family: var(--font-accent);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

/* ---- age gate ------------------------------------------------------------ */

.age-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--purple-deepest);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
  text-align: center;
}
.age-verified .age-gate { display: none; }

.age-gate-inner { width: min(36rem, 100%); min-width: 0; }

.booth-frame {
  position: relative;
  background: var(--purple-deep);
  border: 3px solid var(--gold);
  box-shadow:
    0 0 0 7px var(--purple-deep),
    0 0 0 8px var(--purple-line),
    0 0 90px rgba(245, 166, 35, 0.16);
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.1rem, 4vw, 2.2rem);
}
.age-gate-logo { margin: clamp(1.8rem, 4vw, 2.4rem) auto 0; width: min(24rem, 84%); }
.age-gate-question {
  margin-top: clamp(1.8rem, 4vw, 2.4rem);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 4.6vw, 1.9rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1.25;
}
.age-gate-buttons {
  margin-top: 1.7rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.age-gate-buttons .btn { min-width: 8rem; }
.age-gate .bulbs--bottom { margin-top: clamp(1.8rem, 4vw, 2.4rem); }

/* Body scroll lock while the gate is up (JS toggles this) */
body.gate-open { overflow: hidden; }

/* ---- curtain transition overlay ------------------------------------------- */

.curtain-veil {
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  overflow: hidden;
}
.curtain-veil[hidden] { display: none; }
.curtain-half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 51%;
  background-color: var(--purple-deepest);
  /* Vertical folds: alternating bands, not gradient goo. */
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 217, 122, 0.05) 0 14px,
    rgba(10, 2, 12, 0.32) 14px 40px);
  border-bottom: 7px solid var(--gold);
  will-change: transform;
}
.curtain-half--left { left: 0; }
.curtain-half--right { right: 0; }

/* ---- video modal --------------------------------------------------------- */

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: var(--pad);
  background: rgba(10, 2, 12, 0.88);
}
.video-modal[hidden] { display: none; }
.video-modal-inner {
  position: relative;
  width: min(64rem, 100%);
  border: 3px solid var(--gold);
  background: var(--purple-deep);
}
.video-frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: var(--purple-deepest);
}
.video-frame iframe,
.video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-close {
  position: absolute;
  top: -1.1rem;
  right: -1.1rem;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--gold);
  background: var(--purple-deep);
  color: var(--gold);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.video-close:hover { background: var(--gold); color: var(--purple-deep); }

/* ---- batch page ---------------------------------------------------------- */

.batch-head {
  text-align: center;
  padding: 0 var(--pad);
}
.batch-head > .bulbs--seg {
  margin: 0 calc(-1 * var(--pad)) clamp(1.8rem, 5vw, 3rem);
}
.batch-head h1 {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 13vw, 8.6rem);
  line-height: 0.92;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0.045em 0.055em 0 var(--shadow-steel);
}
.batch-head .batch-sub {
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(0.78rem, 1.9vw, 0.98rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal);
}
.batch-head .stars { margin-top: 1.4rem; }

/* The Barrels sits close under the batch head, at a sub-head size. */
.section--barrels { padding-top: clamp(1.4rem, 3.5vw, 2.4rem); }
.section--barrels h2.display { font-size: clamp(2rem, 5vw, 3.4rem); }

/* ---- the barrels --------------------------------------------------------- */
/* Round 3: the six-column table did not work on a phone. Each barrel group is
   now a card: how much of the batch it is, its age, and its mash bill as one
   stacked bar. Four across, two on tablets, one on phones. Framed top and
   bottom by bulb strips at the homepage size. */

.barrels-wrap {
  margin: clamp(1.4rem, 3.5vw, 2.2rem) auto 0;
  max-width: 62rem;
}
.barrels-wrap > .bulbs--bottom { margin-top: clamp(1.2rem, 3vw, 1.8rem); }
.barrels-wrap > .bulbs:first-child { margin-bottom: clamp(1.2rem, 3vw, 1.8rem); }

.barrels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.8rem, 2vw, 1.2rem);
  list-style: none;
}
@media (max-width: 56rem) { .barrels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .barrels { grid-template-columns: 1fr; } }

.barrel {
  border: 1px solid var(--purple-line);
  background: var(--purple-deep);
  padding: 1rem 1.1rem 1.1rem;
}
.barrel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}
/* Kris, Oct 9: the age is the headline (large, gold); the share of the
   batch is secondary, in green. No barrel counts. */
.barrel-age {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.barrel-age b { font-weight: inherit; font-size: 2.6rem; margin-right: 0.12em; }
.barrel-share {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--green);
  white-space: nowrap;
}
.barrel-share span {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.mash-bar {
  display: flex;
  height: 0.85rem;
  margin-top: 0.9rem;
  background: var(--purple-deepest);
  overflow: hidden;
}
.mash-bar span { flex: 0 0 calc(var(--p) * 1%); }
.mash-bar span + span { border-left: 2px solid var(--purple-deep); }
.mash-legend {
  margin-top: 0.7rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem 0.8rem;
  list-style: none;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
}
.mash-legend li { display: flex; align-items: center; gap: 0.45rem; }
.mash-legend li::before {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--grain);
}
.mash-legend li.nil { color: rgba(205, 187, 214, 0.45); }
.mash-legend li.nil::before { background: var(--purple-line); }
.grain-corn { --grain: var(--gold); }
.grain-rye { --grain: var(--pink); }
.grain-wheat { --grain: var(--teal); }
.grain-malt { --grain: var(--green); }
.mash-bar .grain-corn, .mash-bar .grain-rye, .mash-bar .grain-wheat, .mash-bar .grain-malt { background: var(--grain); }

/* ---- batch bottle lineup ------------------------------------------------- */

.batch-bottles { margin-top: clamp(2.5rem, 6vw, 4rem); }
.batch-bottles img { width: min(76rem, 100%); margin: 0 auto; }

/* Small screens: keep the bottle labels legible by holding the lineup at a
   readable width and letting the strip scroll sideways. */
@media (max-width: 40rem) {
  .batch-bottles {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.6rem;
  }
  .batch-bottles img { width: 44rem; max-width: none; }
}

.lineup-caption {
  margin: 1rem auto 0;
  text-align: center;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

.tbd { color: var(--pink); }

.back-link-row {
  text-align: center;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

/* ---- simple content pages (contact, media kit) --------------------------- */

.page-head {
  text-align: center;
  padding: clamp(3rem, 8vw, 5rem) var(--pad) 0;
}
.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(2.9rem, 9.6vw, 6rem);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0.045em 0.055em 0 var(--shadow-steel);
}
/* A long page title fills the container at the size above and would wrap
   below 1440. It gets the tighter setting instead of the bigger one. */
.page-head--long h1 { font-size: clamp(2.1rem, 6.4vw, 5.25rem); letter-spacing: -0.015em; }

.page-head .stars { margin-top: 1.4rem; }
.page-head--tight + .section { padding-top: clamp(1.8rem, 4.5vw, 3rem); }
.page-head .page-lede {
  max-width: var(--measure);
  margin: 1.4rem auto 0;
  color: var(--cream-dim);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 52rem) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-form .field + .field { margin-top: 1rem; }
.contact-form .btn { margin-top: 1.4rem; }

.info-block + .info-block { margin-top: 1.8rem; }
.info-block h2 {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.info-block p { color: var(--cream-dim); }

/* ---- batch archive -------------------------------------------------------
   Round 2: the two big cards would not survive four batches a year. Batches
   now file under their year as compact tiles, four to a row — one row per
   year. The current year stays open; earlier years sit in <details> and
   collapse, so the page stays short after dozens of batches. */

.batch-years { margin-top: clamp(2.5rem, 6vw, 4rem); }
.batch-year + .batch-year { margin-top: clamp(1.6rem, 4vw, 2.4rem); }
.batch-year-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.batch-year-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--purple-line);
}
details.batch-year > summary {
  cursor: pointer;
  list-style: none;
}
details.batch-year > summary::-webkit-details-marker { display: none; }
details.batch-year > summary::before {
  content: "\25B8";
  letter-spacing: 0;
  transition: transform 0.2s ease;
}
details.batch-year[open] > summary::before { transform: rotate(90deg); }
details.batch-year > summary:hover { color: var(--gold-light); }

/* Tiles centre under the centred heading; four to a row at most. */
.batch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 15rem));
  justify-content: center;
  max-width: calc(4 * 15rem + 3 * 1.4rem);
  margin-inline: auto;
  gap: clamp(0.9rem, 2.2vw, 1.4rem);
  list-style: none;
}
@media (max-width: 56rem) {
  .batch-grid { grid-template-columns: repeat(2, minmax(0, 15rem)); }
}

.batch-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--purple-line);
  background: var(--purple-deep);
  color: var(--cream);
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease;
}
a.batch-tile:hover,
a.batch-tile:focus-visible {
  color: var(--cream);
  border-color: var(--gold);
  transform: translateY(-4px);
}
.batch-tile-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 586 / 612; /* the batch label template's shape */
  background: var(--purple-deepest);
  overflow: hidden;
  text-align: center;
  padding: 0.8rem;
}
.batch-tile-thumb img { width: 100%; height: 100%; object-fit: contain; }
.batch-tile-body { padding: 0.9rem 1rem 1.1rem; }
.batch-tile-name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--gold);
}
.batch-tile-meta {
  margin-top: 0.35rem;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
/* Hangs from the tile's top-right edge (Kris, Oct 9: as on mobile). */
.batch-tile-badge {
  position: absolute;
  top: -0.7rem;
  right: 0.6rem;
  z-index: 1;
  padding: 0.3rem 0.6rem;
  background: var(--gold);
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple-deep);
}
/* A label tile carries its own gold frame, so it drops the tile border and
   takes the label's purple all the way down, name bar included. */
.batch-tile--card {
  border: 0;
  background: #26003E;
}
.batch-tile--card .batch-tile-thumb { background: var(--batch-color, #5E8A3D); }
a.batch-tile--card:hover,
a.batch-tile--card:focus-visible { box-shadow: 0 0 0 1px rgba(245, 166, 35, 0.55), 0 18px 40px rgba(10, 2, 12, 0.55); }
.batch-tile--soon { border-style: dashed; }
/* The batch tile is Kris's label template (Oct 9). The window and the word
   EXCLUSIVE are transparent in the image; --batch-color shows through both. */
.batch-tile-thumb--card {
  position: relative;
  padding: 0;
  place-items: stretch;
  background: var(--batch-color, #5E8A3D);
  container-type: inline-size;
}
.batch-tile-thumb--card img { object-fit: cover; }
.batch-card {
  position: absolute;
  /* The window, above the arch. */
  inset: 7% 8% 38%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
}
.batch-card-name {
  font-family: var(--font-display);
  font-size: 15cqw;
  line-height: 1;
  text-transform: uppercase;
  color: var(--purple-deepest);
}
.batch-card-cta {
  font-family: var(--font-display);
  font-size: 6.4cqw;
  letter-spacing: 0.1em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--bulb);
}
.batch-card-cta b {
  display: block;
  margin-top: 0.15em;
  font-weight: inherit;
  font-size: 1.95em;
  letter-spacing: 0.06em;
}
.batch-tile--soon .batch-tile-name { color: var(--cream-dim); }

/* Media kit download tiles */
/* Three to a row with the last row centred, so five tiles read 3 + 2. */
.kit-grid {
  --kit-gap: clamp(1.2rem, 3vw, 2rem);
  margin-top: clamp(2rem, 5vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--kit-gap);
  list-style: none;
}
.kit-grid > li { flex: 0 0 calc((100% - 2 * var(--kit-gap)) / 3); }
@media (max-width: 52rem) { .kit-grid > li { flex-basis: calc((100% - var(--kit-gap)) / 2); } }
@media (max-width: 34rem) { .kit-grid > li { flex-basis: 100%; } }
.kit-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--purple-line);
  background: var(--purple-deep);
  padding: clamp(1.2rem, 3vw, 1.6rem);
}
.kit-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--purple-line);
  background: var(--purple-deepest);
  margin-bottom: 1.1rem;
  overflow: hidden;
}
/* Absolutely placed so a tall image (a label, the fact sheet) is contained by
   the 4:3 frame instead of stretching the grid track it sits in. */
.kit-thumb { position: relative; }
.kit-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 0.9rem; }
.kit-thumb--photo img { object-fit: cover; padding: 0; }
.kit-card h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gold);
}
.kit-card p { margin-top: 0.5rem; font-size: 0.92rem; color: var(--cream-dim); flex: 1; }
/* Every download button the same size, whatever its label. */
.kit-card .btn {
  margin-top: 1.2rem;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.6rem;
  padding-inline: 1rem;
  text-align: center;
}

/* ---- motion safety -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .bulbs, .bulbs--seg span, .chase::before, .chase::after { animation: none !important; opacity: 1; }
  .crawl-row { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .crawl-track { animation: none !important; }
}