[hidden] { display: none !important; }
/* Aurevin landing page — monochrome editorial system (Monopo Saigon
   reference); the hero is plain black with the app icon as its one
   colour moment.
   Deliberately separate from css/styles.css (the app's own warm dark UI) —
   this is the public front door, not the product itself. */

:root {
  --l-obsidian: #000000;
  --l-paper: #ffffff;
  --l-inkstone: #181818;
  --l-felt-gray: #6d6d6d;
  --l-ash-mist: #9a9a9a;

  /* 60/30/10 for everything below the hero (the hero itself stays
     black — its own signature moment, not part of this scale). Surface
     is the 60% dominant, band the 30% secondary (CTA + footer), accent
     the 10% — buttons, numerals, labels, hairlines, never a whole
     surface. Swapping a palette means changing these five values.
     Palette: Black & Gold — #030303 ink, #2c2c2e charcoal, #f2c46d gold accent. */
  --l-surface: #2c2c2e;
  --l-band: #030303;
  --l-accent: #f2c46d;
  --l-text: #f4f1ee;
  --l-muted: #a39d98;
  --l-accent-soft: color-mix(in srgb, var(--l-accent) 30%, transparent);
  --l-accent-hover: color-mix(in srgb, var(--l-accent) 85%, #ffffff);

  /* Display: Fraunces, a soft, characterful serif for headings and the
     logo. Body: DM Sans, a clean geometric sans for everything you read. */
  --l-font-heading: 'Anton', 'Bebas Neue', Impact, sans-serif;
  --l-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --l-font: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --l-ease: cubic-bezier(0.19, 1, 0.22, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--l-surface);
  color: var(--l-text);
  font-family: var(--l-font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ─── Nav ─────────────────────────────────────────────────────────────── */
.l-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 66px;
  z-index: 20;
  mix-blend-mode: difference;
}
.l-nav-inner {
  max-width: 1078px;
  margin: 0 auto;
  height: 100%;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
}
.l-logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--l-font-display); font-size: 20px; font-weight: 600; letter-spacing: 0.3px; }
.l-logo-img { width: 30px; height: 30px; object-fit: contain; display: block; border-radius: 7px; }
.l-menu { display: flex; align-items: center; gap: 28px; }
.l-menu a { font-size: 12px; font-weight: 400; }
.l-nav-cta {
  display: inline-block;
  border: 1px solid #ffffff;
  border-radius: 75px;
  padding: 8px 20px;
}

/* ─── Shimmer skeleton (js/landing-skeleton.js) ─────────────────────────
   Stands in for an image that is still loading: a dark block with a soft
   light band sweeping across it. The image fades in over it on load. */
.l-skel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #1a1a1a;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.l-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0.11) 50%, rgba(255, 255, 255, 0.05) 62%, transparent 80%);
  transform: translateX(-100%);
  animation: l-shimmer 1.6s ease-in-out infinite;
}
.l-skel--fill { z-index: -1; background: #141414; }
.l-skel--tile { border-radius: inherit; }
.l-skel.is-done { opacity: 0; }
.l-skel-img { opacity: 0; transition: opacity 0.7s ease; }
.l-skel-img.is-loaded { opacity: 1; }
@keyframes l-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .l-skel::after { animation: none; transform: none; opacity: 0.5; }
}

/* ─── Clipped hover circle (js/landing-clip.js) ──────────────────────── */
.l-clip-host { position: relative; overflow: hidden; isolation: isolate; }
.l-clip-circle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  border-radius: 50%;
  background: #ffffff;
  mix-blend-mode: difference;
  pointer-events: none;
  transform: scale(0);
  will-change: transform;
}

/* App-store style tile: the Negroni render on black, as a squircle.
   js/landing-tilt.js tilts it under the cursor with a moving glare; js/landing-clip.js
   adds the hover circle, clipped to the tile's rounded shape. */
.l-hero-icon {
  position: relative;
  z-index: 1;
  width: clamp(96px, 10vw, 140px);
  aspect-ratio: 1;
  border-radius: 22.5%;
  overflow: hidden;
  background: #000000;
  outline: 1px solid rgba(255, 255, 255, 0.14);
  outline-offset: -1px;
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.65);
  will-change: transform;   /* tilted towards the cursor by js/landing-tilt.js */
}
.l-hero-icon-glare {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06) 40%, transparent 65%);
  mix-blend-mode: screen;
}
.l-hero-icon-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
/* ─── Flipping word swap (js/landing-flip.js) ───────────────────────────
   Each character of the resting word tips away on its X axis while the
   new word's characters flip up into place, staggered left to right. */
.l-flip {
  --d: 400ms;      /* one character's flip */
  --s: 44ms;       /* delay between neighbouring characters */
  position: relative;
  display: inline-grid;
  vertical-align: baseline;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  cursor: pointer;
  user-select: none;
  border-radius: 0.08em;
  justify-items: start;
  transition: width var(--d) cubic-bezier(0.65, 0, 0.35, 1);
}
.l-flip:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 0.08em; }
.l-flip-stage {
  grid-area: 1 / 1;
  display: inline-grid;
  justify-items: start;
  perspective: 800px;
  clip-path: inset(0 -1em);   /* clip the flip vertically, let the wider word overhang while the width animates */
}
.l-flip-layer {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  white-space: pre;
}
.l-flip-ch {
  display: inline-block;
  white-space: pre;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
/* resting state: first word up, second word tipped back and hidden */
.l-flip-first .l-flip-ch {
  transform-origin: center top;
  transition: transform var(--d) cubic-bezier(0.22, 0.61, 0.36, 1), opacity var(--d) cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--d) * 0.62 + var(--i) * var(--s));
}
.l-flip-second .l-flip-ch {
  transform-origin: center bottom;
  transform: rotateX(-82deg);
  opacity: 0;
  transition: transform var(--d) cubic-bezier(0.55, 0.06, 0.68, 0.19), opacity var(--d) cubic-bezier(0.55, 0.06, 0.68, 0.19);
  transition-delay: calc(var(--i) * var(--s));
}
/* swapped: first word tips away (ease-in), second flips up (ease-out) */
.l-flip.is-swapped .l-flip-first .l-flip-ch {
  transform: rotateX(82deg);
  opacity: 0;
  transition-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  transition-delay: calc(var(--i) * var(--s));
}
.l-flip.is-swapped .l-flip-second .l-flip-ch {
  transform: rotateX(0deg);
  opacity: 1;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--d) * 0.62 + var(--i) * var(--s));
}
@media (prefers-reduced-motion: reduce) {
  .l-flip .l-flip-ch { transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* ─── Sign-in dialog (opened from the nav) ────────────────────────────── */
.l-auth-dialog {
  width: calc(100% - 32px);
  max-width: 360px;
  padding: 0;
  border: none;
  background: transparent;
  color: #ffffff;
}
.l-auth-dialog::backdrop {
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background 0.7s ease, backdrop-filter 0.7s ease, -webkit-backdrop-filter 0.7s ease;
}
.l-auth-dialog.is-open::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* The card pops up with a slight overshoot; closing reverses it faster. */
.l-auth-dialog {
  opacity: 0;
  transform: translateY(24px) scale(0.92);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.l-auth-dialog.is-open {
  opacity: 1;
  transform: none;
  transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.l-auth-dialog.is-closing::backdrop { transition-duration: 0.35s; }
@media (prefers-reduced-motion: reduce) {
  .l-auth-dialog, .l-auth-dialog.is-open { transform: none; transition: opacity 0.15s linear; }
  .l-auth-dialog::backdrop { transition: none; }
}
.l-auth-card {
  position: relative;
  padding: 32px 28px 28px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  background: var(--l-inkstone);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}
.l-auth-title {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 400;
}
.l-auth-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.l-auth-close:hover, .l-auth-close:focus-visible { color: #ffffff; background: rgba(255, 255, 255, 0.08); }
.l-signin-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.l-signin-form input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0;
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  padding: 8px 0;
  outline: none;
  transition: border-color 0.4s ease;
}
.l-signin-form input::placeholder { color: rgba(255, 255, 255, 0.5); }
.l-signin-form input:focus { border-bottom-color: #ffffff; }
.l-auth-submit {
  width: 100%;
  text-align: center;
  background: none;
  cursor: pointer;
  font-family: inherit;
}
.l-auth-error {
  color: rgb(255, 172, 46);
  font-size: 13px;
  margin: 0;
}
.l-auth-links {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 12px;
}
.l-auth-links a { color: rgba(255, 255, 255, 0.6); }
.l-auth-links a:hover { color: #ffffff; }
.l-auth-enter { position: relative; z-index: 1; }

.l-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--l-accent);
  margin: 0 0 20px;
}
.l-pill {
  display: inline-block;
  vertical-align: middle;
  border-radius: 75px;
  padding: 11px 33px;
  font-size: 16px;
  font-weight: 400;
  border: 1px solid transparent;
  transition: none;
}
.l-pill--dark { border-color: rgba(255, 255, 255, 0.3); color: #ffffff; }
.l-pill--light { border-color: var(--l-obsidian); color: var(--l-obsidian); }
/* The one filled, fully chromatic surface in the whole system — the
   10% accent gets its single moment of maximum weight on the primary CTA. */
.l-pill--accent {
  background: var(--l-accent);
  border-color: var(--l-accent);
  color: var(--l-band);
  font-weight: 600;
}

/* ─── Footer (secondary — 30%) ───────────────────────────────────────── */
/* Full-bleed band; the side padding keeps the columns on the same
   1078px content width as the sections above. */
.l-footer {
  padding: 64px max(24px, calc((100% - 1078px) / 2 + 24px));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  background: var(--l-band);
}
.l-footer-col p {
  font-size: 11px;
  line-height: 1.36;
  color: var(--l-muted);
  margin: 0 0 10px; /* links are 11px text: 10px of spacing keeps neighbouring tap targets 24px apart (WCAG 2.2 target size) */
}
.l-footer-label {
  color: var(--l-accent) !important;
  font-weight: 600;
  margin-bottom: 12px !important;
}
.l-footer-col a:hover { color: var(--l-text); }

/* ─── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .l-menu { gap: 16px; }
  .l-footer { grid-template-columns: 1fr; }
}

/* ─── Scroll story: "Through the full stop" ───────────────────────────────
   A scroll-driven story instead of a static hero. The night trees show
   only through the letters of BAR.; scrolling dives into the full stop
   until the whole scene opens up and the icon settles in the middle.
   Then: a statement lit word by word, a panel per feature in black and
   gold, and a gold closing band. */
:root { --c-gold: var(--l-accent); --c-ink: var(--l-band); --c-char: var(--l-surface); --c-cream: var(--l-text); --c-dim: rgba(244, 241, 238, 0.16); }

body { overflow-x: clip; }
.l-nav { mix-blend-mode: normal; background: linear-gradient(rgba(3, 3, 3, 0.55), transparent); transition: background 0.7s ease, backdrop-filter 0.7s ease; }
/* once scrolling, the nav gets its own dark glass so it stays readable over the gold panels */
.l-nav.c-nav-solid { background: rgba(3, 3, 3, 0.86); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.c-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 30; background: var(--c-gold); transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); }

/* 1 ─ intro: pinned for three screens of scroll */
.c-intro { position: relative; height: 320vh; background: var(--c-ink); }
.c-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
/* The scene is seen through a window clipped to the letters of BAR. (an
   SVG clipPath the script zooms), then — once the letters are off screen —
   through a plain CSS circle, which is far cheaper to animate. Only
   transform and clip change per frame; the image's filter stays fixed so
   the browser can keep it as one cached layer. */
.c-window { position: absolute; inset: 0; z-index: -2; overflow: hidden; clip-path: url(#c-cut); background: radial-gradient(ellipse 70% 60% at 50% 45%, #1d1f2e, var(--c-ink)); }
.c-window.is-circle { clip-path: var(--hole); }
.c-window.is-open { clip-path: none; }
.c-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--zs, 1.3)); filter: brightness(1.12) saturate(1.15); will-change: transform; }
.c-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(0, 0, 0, 0.55), transparent 75%), linear-gradient(to bottom, transparent 60%, var(--c-ink));
  opacity: var(--s, 0); }
.c-mask { position: absolute; width: 0; height: 0; overflow: hidden; }
.c-mask text { font-family: var(--l-font-heading); font-weight: 400; letter-spacing: 0.01em; }
.c-kicker { position: absolute; left: 0; right: 0; top: 18vh; margin: 0; text-align: center; color: var(--c-cream);
  font-family: var(--l-font-heading); font-weight: 400; font-size: clamp(22px, 3.4vw, 46px); letter-spacing: 0.32em;
  opacity: calc(1 - var(--k, 0)); transform: translateY(calc(var(--k, 0) * -40px)); }
.c-hint { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--l-muted); opacity: calc(1 - var(--k, 0) * 2); }
.c-hint::after { content: ""; width: 2px; height: 44px; border-radius: 2px; transform-origin: top;
  background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.04)); animation: c-drip 1.8s ease-in-out infinite; }
.c-hint::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 2px; height: 44px; margin-left: -1px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(to bottom, transparent 0, rgba(255, 255, 255, 0) 30%, #fff8e0 50%, var(--c-gold) 58%, rgba(255, 255, 255, 0) 75%, transparent 100%);
  background-size: 100% 300%; filter: drop-shadow(0 0 5px rgba(243, 200, 110, 0.9)); animation: c-shine 1.8s ease-in-out infinite; }
@keyframes c-shine { 0% { background-position: 0 100%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { background-position: 0 0; opacity: 0; } }
@keyframes c-drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.c-settle { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 80px 24px 40px; text-align: center;
  opacity: var(--s, 0); transform: translateY(calc((1 - var(--s, 0)) * 40px)); pointer-events: none; }
.c-settle.is-live { pointer-events: auto; }
.c-settle .l-hero-icon { transform-origin: center; }
.c-title { margin: 0; font-family: var(--l-font-heading); font-weight: 400; text-transform: uppercase; font-size: clamp(38px, 6vw, 84px); line-height: 1; color: #fff; }
.c-lede { margin: 0; max-width: 38ch; color: rgba(244, 241, 238, 0.82); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.55; }

/* ─── Drink swatches: Pantone-style cards fanned under the hero copy ─────────
   Each card is a white swatch chip; the drink is a cut-out render standing
   in its grey well. The drink's wrapper is clipped to the card's sides and
   the well's floor but left open above the card, so as it rises it passes
   *through* the card and out over the top edge. Cards deal up from below
   (centre first) when the hero settles; the drinks follow once they land.
   Per-card values come from :nth-child, not style="" (the CSP blocks it). */
.c-settle { justify-content: flex-start; padding-top: clamp(72px, 11vh, 128px); gap: clamp(12px, 2.3vh, 26px); }
.c-settle > :not(.c-fan) { position: relative; z-index: 1; }
.c-settle .l-hero-icon { width: clamp(96px, 15vh, 170px); }
.c-fan { --w: clamp(110px, min(11.8vw, 23vh), 210px); position: absolute; left: 50%; bottom: calc(var(--w) * 0.02); width: 0; height: calc(var(--w) * 1.2); z-index: 0; margin: 0; }
.c-swatch { --x: 0; --y: 0; --r: 0deg; --d: 0; --sc: 1; position: absolute; left: calc(var(--w) * -0.5); bottom: 0; width: var(--w); margin: 0; z-index: calc(10 - var(--d));
  transform: translate(calc(var(--x) * var(--w)), calc(var(--y) * var(--w) + 110vh)) rotate(calc(var(--r) * 2.2)) scale(var(--sc));
  transition: transform 0.9s cubic-bezier(0.55, 0, 0.85, 0.35) calc((3 - var(--d)) * 50ms); }
.c-settle.is-live .c-swatch, .c-static .c-swatch { transform: translate(calc(var(--x) * var(--w)), calc(var(--y) * var(--w))) rotate(var(--r)) scale(var(--sc));
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--d) * 110ms); }
.c-swatch:nth-child(1) { --x: -3;    --y: 0.2;   --r: -12deg; --d: 3; }
.c-swatch:nth-child(2) { --x: -2;    --y: 0.08;  --r: -8deg;  --d: 2; }
.c-swatch:nth-child(3) { --x: -1.02; --y: 0.02;  --r: -4deg;  --d: 1; }
.c-swatch:nth-child(4) { --x: 0;     --y: -0.04; --r: 0deg;   --d: 0; --sc: 1.1; }
.c-swatch:nth-child(5) { --x: 1.02;  --y: 0.02;  --r: 4deg;   --d: 1; }
.c-swatch:nth-child(6) { --x: 2;     --y: 0.08;  --r: 8deg;   --d: 2; }
.c-swatch:nth-child(7) { --x: 3;     --y: 0.2;   --r: 12deg;  --d: 3; }
.c-swatch:hover { z-index: 20; }
.c-swatch-hover { position: relative; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.c-swatch:hover .c-swatch-hover { transform: translateY(calc(var(--w) * -0.07)); }
.c-swatch-card { position: relative; height: calc(var(--w) * 1.2); display: flex; flex-direction: column; overflow: hidden; border-radius: 3px; background: #fbfbfa;
  box-shadow: 0 34px 50px -22px rgba(0, 0, 0, 0.85), 0 2px 8px rgba(0, 0, 0, 0.3); }
.c-swatch-well { flex: 0 0 66%; background: linear-gradient(170deg, #f0f0ee, #d9d9d6); }
.c-swatch figcaption { position: relative; flex: 1; display: grid; align-content: center; gap: 0.15em; padding: 0 9%; text-align: left; color: #121212;
  font-family: 'DM Sans', system-ui, sans-serif; font-size: calc(var(--w) * 0.062); line-height: 1.15; }
.c-swatch figcaption b { font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.c-swatch figcaption span { color: #3a3a3a; font-size: 0.9em; }
.c-swatch figcaption i { position: absolute; right: 8%; bottom: 16%; width: 0.95em; aspect-ratio: 1; border-radius: 50%; border: 1px solid #c4c4c0; }
/* open above the card, clipped at its sides and at the well's floor */
.c-swatch-clip { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--w) * 1.2); pointer-events: none;
  clip-path: polygon(0 66%, 100% 66%, 100% 0, 175% 0, 175% -220%, -75% -220%, -75% 0, 0 0); }
.c-swatch-lift { position: absolute; left: 50%; bottom: 34%; width: 108%;
  transform: translate(-50%, 102%); translate: 0 0;
  transition: transform 0.5s cubic-bezier(0.5, 0, 0.75, 0) 0s, translate 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.c-settle.is-live .c-swatch-lift, .c-static .c-swatch-lift { transform: translate(-50%, 0);
  transition: transform 1.05s cubic-bezier(0.3, 1.35, 0.5, 1) calc(var(--d) * 110ms + 620ms), translate 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.c-swatch:hover .c-swatch-lift { translate: 0 -9%; }
.c-swatch-drink { display: block; width: 100%; height: auto; animation: c-bob 5.2s ease-in-out calc(var(--d) * -1.3s) infinite alternate; }
@keyframes c-bob { from { transform: translateY(0); } to { transform: translateY(-2.5%); } }
@media (max-width: 900px) { .c-swatch:nth-child(1), .c-swatch:nth-child(7) { display: none; } .c-fan { --w: clamp(108px, min(20vw, 24vh), 210px); } }
@media (max-width: 560px) {
  .c-swatch:nth-child(2), .c-swatch:nth-child(6) { display: none; }
  .c-fan { --w: clamp(104px, min(31vw, 25vh), 180px); }
  .c-swatch:nth-child(3) { --x: -0.98; --y: 0.08; --r: -8deg; }
  .c-swatch:nth-child(5) { --x: 0.98;  --y: 0.08; --r: 8deg; }
}
@media (prefers-reduced-motion: reduce) { .c-swatch-drink { animation: none; } }

/* 2 ─ statement lit word by word */
.c-words { position: relative; height: 230vh; background: var(--c-ink); }
.c-words-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; isolation: isolate; padding: 0 24px; }
.c-words-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: calc(0.15 + var(--w, 0) * 0.35); transform: scale(calc(1.15 - var(--w, 0) * 0.15)); }
.c-words-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(var(--c-ink), transparent 30%, transparent 70%, var(--c-ink)); }
.c-statement { margin: 0; max-width: 18ch; font-family: var(--l-font-heading); font-weight: 400; text-transform: uppercase; font-size: clamp(32px, 5.4vw, 76px); line-height: 1.08; text-wrap: balance; text-align: center; }
.c-word { color: var(--c-dim); transition: color 0.6s ease; }
.c-word.is-lit { color: var(--c-cream); }
.c-word.is-accent.is-lit { color: var(--c-gold); }

/* 3 ─ product panels, one per screen, straight down the page */
.c-features { background: var(--c-ink); }
.c-panel { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px;
  padding: 90px max(24px, calc((100vw - 1078px) / 2 + 24px)) 60px; background: var(--c-ink); color: var(--c-cream); }
.c-panel--accent { background: var(--c-gold); color: var(--c-ink); }
.c-panel--accent .c-panel-copy p { color: rgba(3, 3, 3, 0.72); }
.c-panel-intro { grid-template-columns: minmax(0, 1fr); background: var(--c-char); min-height: 70vh; }
.c-verb { margin: 0; font-family: var(--l-font-heading); font-weight: 400; text-transform: uppercase; font-size: clamp(56px, 9.5vw, 150px); line-height: 0.88; letter-spacing: 0.01em; }
.c-panel-copy { display: grid; gap: 18px; min-width: 0; }
.c-panel-copy h3 { margin: 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; }
.c-panel-copy p { margin: 0; max-width: 40ch; font-size: 16px; line-height: 1.6; color: var(--l-muted); }
/* Panels rise in as they arrive. Only once the story script is running
   (.c-js), so without JS everything simply shows. Uses `translate`, not
   `transform`, so the example cards keep their own tilt. */
.c-js .c-panel .c-verb, .c-js .c-panel .c-panel-copy > * {
  opacity: 0; translate: 0 44px;
  transition: opacity 1.2s ease, translate 1.4s var(--l-ease);
}
.c-js .c-panel.is-seen .c-verb, .c-js .c-panel.is-seen .c-panel-copy > * { opacity: 1; translate: 0 0; }
.c-js .c-panel.is-seen .c-panel-copy > :nth-child(1) { transition-delay: 0.12s; }
.c-js .c-panel.is-seen .c-panel-copy > :nth-child(2) { transition-delay: 0.2s; }
.c-js .c-panel.is-seen .c-panel-copy > :nth-child(3) { transition-delay: 0.32s; }
.c-js .c-panel.is-seen .c-panel-copy > :nth-child(4) { transition-delay: 0.44s; }

/* product vignettes: small slices of the real app, marked as examples */
.c-ui { justify-self: center; width: min(100%, 380px); padding: 22px; border-radius: 18px; background: var(--c-char); color: var(--c-cream); border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.8); font-size: 14px; display: grid; gap: 14px; transform: rotate(var(--tilt, -2deg)); }
.c-ui-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.c-ui-head small { font-weight: 400; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--l-muted); }
.c-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
.c-row span:last-child { font-variant-numeric: tabular-nums; color: var(--l-muted); }
.c-bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.c-bar i { display: block; height: 100%; width: var(--v); background: var(--c-cream); border-radius: inherit; transform-origin: left; transform: scaleX(var(--fill, 0)); transition: transform 1.6s var(--l-ease); }
.c-bar.is-low i { background: var(--c-gold); }
.c-chip { display: inline-flex; padding: 3px 9px; border-radius: 99px; font-size: 11px; background: var(--l-accent-soft); color: var(--c-gold); }
.c-total { display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-weight: 600; font-variant-numeric: tabular-nums; }
.c-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.c-chips span { padding: 7px 12px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.14); font-size: 13px; }
.c-chips span.is-can { border-color: var(--c-gold); color: var(--c-gold); }

/* 4 ─ closing band */
.c-close { position: relative; overflow: hidden; padding: 18vh 24px; background: var(--c-gold); color: var(--c-ink); display: grid; justify-items: center; gap: 36px; text-align: center; }
.c-close-line { margin: 0; font-family: var(--l-font-heading); font-weight: 400; text-transform: uppercase; font-size: clamp(48px, 10vw, 150px); line-height: 0.9; letter-spacing: 0.01em; white-space: nowrap;
  transform: translateX(calc((0.5 - var(--cl, 0.5)) * 30%)); }
.c-close-line + .c-close-line { transform: translateX(calc((var(--cl, 0.5) - 0.5) * 30%)); }
.c-close .l-pill { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }

@media (max-width: 820px) {
  .c-panel { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 28px; padding-top: 80px; }
  .c-ui { width: min(100%, 340px); padding: 18px; font-size: 13px; }
  .c-kicker { top: 31vh; letter-spacing: 0.24em; }
}

/* reduced motion: no pinning, everything shown in its final state */
.c-static .c-intro, .c-static .c-words { height: auto; }
.c-static .c-stage, .c-static .c-words-stage { position: relative; }
.c-static .c-window { clip-path: none; }
.c-static .c-mask, .c-static .c-kicker, .c-static .c-hint { display: none; }
.c-static .c-word { color: var(--c-cream); }

/* skeletons behind the full-screen scenes sit with them, under the overlays */
.l-skel--scene { z-index: -2; }

/* ─── Scramble-in phrases (js/landing-scramble.js) ────────────────────── */
.l-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.l-scramble-x { color: var(--l-accent); }
.c-panel--accent .l-scramble-x { color: rgba(3, 3, 3, 0.45); }

/* Pinch-zoom is allowed; keep iOS from auto-zooming into small fields. */
@media (pointer: coarse) {
  input, select, textarea { font-size: max(16px, 1em) !important; }
}

/* Hero wall: giant wavy red AUREVIN rows on black */
.c-window { background: #060606; }
.c-wall { position: absolute; inset: -6% -4%; display: flex; flex-direction: column; justify-content: center; }
.c-wall span { display: block; font-family: 'Anton', 'Impact', sans-serif; font-size: clamp(120px, 36vw, 640px); line-height: 0.8; letter-spacing: 0.01em; color: #e3112b; -webkit-text-stroke: 0.025em #e3112b; text-align: center; white-space: nowrap; }
.c-wave { position: absolute; width: 0; height: 0; }

/* Intro: BAR and its full stop are solid red; the wall fades in as the hole opens */
.c-window { background: #e3112b; }
.c-wall { opacity: 0; background: #060606; transition: opacity 1.4s ease; }
.c-window.is-open .c-wall { opacity: 1; }
.c-wall-canvas { transition: filter 1.4s ease; overflow: hidden; }
.c-window.is-open .c-wall-canvas { filter: blur(4px); }
.c-kicker { color: #fff; }
.c-hint { color: #fff; }
.c-hint::after { background: linear-gradient(#e3112b, transparent); }

.c-wall-canvas { position: absolute; inset: -12%; width: 124%; height: 124%; transform: rotate(-7deg); }

/* Section 2: a tunnel of drink photos that you travel down as you scroll */
.c-words-stage { --tw: 100vw; --th: 100vh; --td: 2800px; perspective: 700px; perspective-origin: 50% 50%; }
.c-statement { position: relative; z-index: 2; }
.c-tunnel { position: absolute; inset: 0; z-index: -2; transform-style: preserve-3d; will-change: transform; }
.c-tw { position: absolute; left: 50%; top: 50%; display: grid; gap: 10px; margin: 0; backface-visibility: hidden; }
.c-tw--l, .c-tw--r { width: var(--td); height: var(--th); margin-left: calc(var(--td) / -2); margin-top: calc(var(--th) / -2);
  grid-template-rows: repeat(2, 1fr); grid-auto-flow: column; grid-auto-columns: calc(var(--th) / 2); }
.c-tw--t, .c-tw--b { width: var(--tw); height: var(--td); margin-left: calc(var(--tw) / -2); margin-top: calc(var(--td) / -2);
  grid-template-columns: repeat(3, 1fr); grid-auto-rows: calc(var(--tw) / 3); }
.c-tw--l { transform: translateX(calc(var(--tw) / -2)) translateZ(calc(var(--td) / -2)) rotateY(90deg); }
.c-tw--r { transform: translateX(calc(var(--tw) / 2)) translateZ(calc(var(--td) / -2)) rotateY(-90deg); }
.c-tw--t { transform: translateY(calc(var(--th) / -2)) translateZ(calc(var(--td) / -2)) rotateX(-90deg); }
.c-tw--b { transform: translateY(calc(var(--th) / 2)) translateZ(calc(var(--td) / -2)) rotateX(90deg); }
.c-tc { overflow: hidden; background: #0b0b0c; }
.c-tc img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
.c-tunnel-fade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 34% 36% at 50% 50%, #030303 20%, rgba(3, 3, 3, 0.85) 55%, transparent 100%), linear-gradient(var(--c-ink), transparent 18%, transparent 82%, var(--c-ink)); }
.c-words-stage::before { display: none; }
@media (max-width: 700px) { .c-words-stage { --td: 2200px; } }

/* Hero wall and intro use the site's gold */
.c-window { background: var(--l-accent); }
.c-hint::after { background: linear-gradient(var(--l-accent), transparent); }
.c-shade { background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0, 0, 0, 0.78), transparent 80%), linear-gradient(to bottom, transparent 60%, var(--c-ink)); }

/* Reduced motion: no intro, show the dark wall behind the settled copy */
.c-static .c-window { background: #060606; }
.c-static .c-wall { opacity: 1; }

/* Features: black pages with a beam of gold light that starts at the big verb and
   sweeps across the copy, so the part that matters is the part that is lit. */
.c-panel:not(.c-panel-intro), .c-panel--accent { background: var(--c-ink); color: var(--c-cream); overflow: hidden; isolation: isolate; }
.c-panel:not(.c-panel-intro)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, #f2c15c 0%, var(--l-accent) 45%, #fff0c4 100%);
  clip-path: polygon(0% 88%, 0% 88%, 0% 100%, 0% 100%);
  transition: clip-path 1.8s cubic-bezier(0.25, 0.1, 0.25, 1); }
.c-panel:not(.c-panel-intro).is-seen::before, .c-static .c-panel:not(.c-panel-intro)::before { clip-path: polygon(0% 62%, 100% -6%, 100% 74%, 20% 100%, 0% 100%); }
.c-panel:nth-of-type(even):not(.c-panel-intro)::before { transform: scaleY(-1); }
/* copy and verb colours: the verb stays on black, the copy sits in the beam */
.c-panel:not(.c-panel-intro) .c-verb { color: var(--c-cream); text-shadow: 0 3px 0 rgba(3, 3, 3, 0.9), 0 0 48px rgba(3, 3, 3, 0.55); }
.c-panel:not(.c-panel-intro) .c-panel-copy h3 { color: var(--c-ink); }
.c-panel:not(.c-panel-intro) .c-panel-copy p, .c-panel--accent .c-panel-copy p { color: rgba(3, 3, 3, 0.78); }
.c-panel:not(.c-panel-intro) .c-ui { box-shadow: 0 24px 60px rgba(3, 3, 3, 0.35); }
@media (max-width: 900px) {
  .c-panel:not(.c-panel-intro).is-seen::before, .c-static .c-panel:not(.c-panel-intro)::before { clip-path: polygon(0% 70%, 100% 36%, 100% 100%, 0% 100%); }
}
@media (prefers-reduced-motion: reduce) { .c-panel:not(.c-panel-intro)::before { transition: none; } }

/* Intro of the features: dark page. Giant condensed heading with a script accent, the about
   and the four jobs on the left, and on the right a card the Negroni steps out of. One screen
   tall. */
.c-panel-intro { background: #161618; color: var(--c-cream); height: 100vh; height: 100svh; min-height: 560px; display: block; padding: 0; overflow: hidden; }
.c-bento { height: 100%; max-width: 1240px; margin: 0 auto; padding: 84px 28px 18px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 2svh; box-sizing: border-box; }
.c-bh { position: relative; margin: 0; font-family: 'Anton', 'Bebas Neue', Impact, sans-serif; font-weight: 400; text-transform: uppercase; line-height: 0.88; letter-spacing: 0; }
.c-bh1 { display: block; white-space: nowrap; font-size: min(18.8vw, 272px, 31vh); font-size: min(18.8vw, 272px, 31svh); color: var(--c-cream); }
.c-bh2 { position: absolute; z-index: 1; left: 1%; bottom: -0.3em; font-family: var(--l-font-display); font-style: italic; font-weight: 600; text-transform: none; font-size: min(7.4vw, 112px, 12svh); line-height: 1; color: var(--c-gold); transform: rotate(-6deg); transform-origin: 0 100%; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); }
.c-bgrid { display: grid; grid-template-columns: 5fr 7fr; gap: 28px; min-height: 0; margin-top: 3.4svh; }
.c-bl { display: grid; align-content: start; gap: 1.5svh; min-height: 0; }
.c-bt-label { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-gold); }
.c-bt-text { margin: 0; max-width: 46ch; font-size: clamp(13px, 2svh, 16px); line-height: 1.55; color: rgba(244, 241, 238, 0.86); }
.c-bt-pill { justify-self: start; display: inline-flex; padding: 11px 26px; border-radius: 999px; background: var(--c-gold); color: var(--c-ink); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.c-jobs { list-style: none; margin: 1svh 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.c-jobs li { padding: 1.6svh 16px; border: 1px solid rgba(244, 241, 238, 0.18); border-radius: 16px; font-family: 'Anton', 'Bebas Neue', Impact, sans-serif; font-size: clamp(20px, 3.6svh, 30px); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; }
.c-jobs b { display: block; margin-bottom: 0.8svh; font-family: var(--l-font); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--c-gold); }
.c-br { position: relative; min-height: 0; }
.c-br-card { position: absolute; inset: 0; border-radius: 30px; background: radial-gradient(circle at 56% 52%, rgba(242, 196, 109, 0.22), transparent 58%), #1d1d20; border: 1px solid rgba(244, 241, 238, 0.14); }
.c-br-drink { position: absolute; z-index: 3; height: 126%; width: auto; max-width: none; bottom: 4%; left: 50%; transform: translateX(-50%); filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.5)); }
.c-br-tag { position: absolute; z-index: 4; left: 20px; bottom: 18px; margin: 0; padding: 9px 14px; border-radius: 12px; background: rgba(3, 3, 3, 0.78); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(244, 241, 238, 0.8); }
.c-br-tag span { margin-right: 8px; color: var(--c-cream); font-weight: 700; }
.c-br-tag b { color: var(--c-gold); margin-right: 3px; }
.c-meta { display: flex; gap: 28px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(244, 241, 238, 0.55); }
@media (max-width: 760px) {
  .c-panel-intro { height: auto; }
  .c-bento { height: auto; padding-top: 84px; }
  .c-bgrid { grid-template-columns: 1fr; margin-top: 8px; }
  .c-br { height: 300px; margin-top: 70px; }
  .c-meta { flex-wrap: wrap; gap: 10px 20px; }
}

/* Motion for the features intro is scrubbed by scroll (js/landing-wall.js); this block keeps the
   idle bits: the pulsing glow behind the Negroni, its slow float and its lean toward the pointer. */
@keyframes c-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-1.6%); } }
@keyframes c-glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.c-br-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 56% 52%, rgba(242, 196, 109, 0.3), transparent 50%); animation: c-glow 4.5s ease-in-out infinite; pointer-events: none; }
.c-br-drink { rotate: calc(var(--mx, 0) * 2.5deg); transition: rotate 0.5s var(--l-ease); animation: c-bob 6s ease-in-out infinite; }
.c-jobs-pin { position: relative; height: 330vh; }
.c-jobs-pin .c-panel-intro { position: sticky; top: 0; }
.c-w { display: inline-block; will-change: transform; transform-origin: 50% 70%; }
.c-bh1 { will-change: transform; }
.c-static .c-jobs-pin, .c-nopin .c-jobs-pin { height: auto; }
.c-static .c-jobs-pin .c-panel-intro, .c-nopin .c-jobs-pin .c-panel-intro { position: relative; }
@media (prefers-reduced-motion: reduce) { .c-br-card::after, .c-br-drink { animation: none !important; } }

/* The four jobs on one screen: a board of rounded tiles, one per job. */
.c-board { height: 100vh; height: 100svh; min-height: 560px; box-sizing: border-box; padding: 78px max(16px, calc((100vw - 1400px) / 2 + 16px)) 18px; background: var(--c-ink); display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 12px; }
.c-tile { position: relative; min-height: 0; overflow: hidden; border-radius: 28px; padding: clamp(16px, 2.6svh, 26px); padding-top: clamp(34px, 5.4svh, 52px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 20px; align-items: center; }
.c-tn { position: absolute; left: clamp(16px, 2.6svh, 26px); top: clamp(14px, 2.4svh, 22px); padding: 3px 10px; border: 1px solid currentColor; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; }
.c-tt { min-width: 0; display: grid; gap: 1.4svh; align-content: center; }
.c-th { margin: 0; font-family: 'Anton', 'Bebas Neue', Impact, sans-serif; font-weight: 400; text-transform: uppercase; line-height: 0.95; font-size: clamp(38px, min(4.9vw, 12svh), 92px); }
.c-tt p { margin: 0; font-size: clamp(12px, 1.9svh, 15px); line-height: 1.5; max-width: 34ch; }
.c-tile .c-ui { width: 100%; justify-self: stretch; padding: clamp(12px, 2svh, 18px); font-size: clamp(11.5px, 1.8svh, 14px); gap: clamp(7px, 1.3svh, 12px); transform: none; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55); }
.c-tile--count { background: var(--c-gold); color: var(--c-ink); }
.c-tile--cost { background: #f4f1ee; color: var(--c-ink); }
.c-tile--count .c-tt p, .c-tile--cost .c-tt p { color: rgba(3, 3, 3, 0.74); }
.c-tile--order { background: #2c2c2e; color: var(--c-cream); }
.c-tile--order .c-th { color: var(--c-gold); }
.c-tile--order .c-tt p { color: rgba(244, 241, 238, 0.74); }
.c-tile--order .c-ui { background: #151517; }
.c-tile--discover { color: var(--c-cream); background: linear-gradient(90deg, rgba(3, 3, 3, 0.94) 28%, rgba(3, 3, 3, 0.5)), url("../images/old-fashioned.webp") center / cover #151517; }
.c-tile--discover .c-tt p { color: rgba(244, 241, 238, 0.8); }
.c-tile--discover .c-ui { background: rgba(3, 3, 3, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (max-width: 900px) {
  .c-board { height: auto; grid-template-columns: 1fr; grid-template-rows: none; padding-top: 70px; }
  .c-tile { grid-template-columns: 1fr; padding-top: 52px; }
  .c-th { font-size: 52px; }
}
.c-th { font-size: clamp(32px, min(3.6vw, 11svh), 80px); }
.c-tile--cost, .c-tile--discover { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }

/* Divider between the tunnel and the features: two bands cross the full screen, their words
   run sideways with the scroll, then they leave the other way. */
.c-divide { position: relative; height: 240vh; background: var(--c-ink); }
.c-divide-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.c-band { position: absolute; left: -12vw; width: 124vw; top: 50%; height: min(27vh, 250px); margin-top: calc(min(27vh, 250px) / -2); display: flex; align-items: center; overflow: hidden; will-change: transform; }
.c-band--a { background: var(--c-gold); color: var(--c-ink); }
.c-band--b { height: min(17vh, 150px); margin-top: calc(min(17vh, 150px) / -2); border-block: 2px solid var(--c-gold); color: var(--c-gold); background: rgba(3, 3, 3, 0.55); }
.c-band-track { display: flex; white-space: nowrap; will-change: transform; font-family: 'Anton', 'Bebas Neue', Impact, sans-serif; text-transform: uppercase; font-size: min(14vw, 23vh, 210px); line-height: 1; letter-spacing: 0.01em; }
.c-band--b .c-band-track { font-size: min(9vw, 14vh, 130px); }
.c-nopin .c-divide, .c-static .c-divide { display: none; }

/* burst behind the heading when the features page arrives */
.c-burst { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 38%, rgba(242, 196, 109, 0.55), rgba(242, 196, 109, 0) 52%), repeating-conic-gradient(from 0deg at 50% 38%, rgba(242, 196, 109, 0.16) 0 0.7deg, transparent 0.7deg 9deg);
  -webkit-mask-image: radial-gradient(circle at 50% 38%, #000 0, transparent 72%); mask-image: radial-gradient(circle at 50% 38%, #000 0, transparent 72%); }
.c-bento { position: relative; z-index: 1; }

/* tile board: pinned, tiles fly in from the four corners */
.c-board-pin { position: relative; height: 270vh; }
.c-board-pin .c-board { position: sticky; top: 0; overflow: hidden; }
.c-tile { will-change: transform; }
.c-nopin .c-board-pin, .c-static .c-board-pin { height: auto; }
.c-nopin .c-board-pin .c-board, .c-static .c-board-pin .c-board { position: relative; }

/* softer edges: burst has no box edge, tape ends and sides feather out, board gets a faint glow */
.c-burst { inset: auto; left: -50%; right: -50%; top: -62%; bottom: -38%;
  background: radial-gradient(circle at 50% 50%, rgba(242, 196, 109, 0.5), rgba(242, 196, 109, 0) 38%), repeating-conic-gradient(from 0deg at 50% 50%, rgba(242, 196, 109, 0.16) 0 0.7deg, transparent 0.7deg 9deg);
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 0, rgba(0, 0, 0, 0.55) 45%, transparent 100%); mask-image: radial-gradient(circle closest-side at 50% 50%, #000 0, rgba(0, 0, 0, 0.55) 45%, transparent 100%); }
.c-band { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent), linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent), linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-composite: intersect; }
.c-band--b { border-block-color: rgba(242, 196, 109, 0.7); }
.c-board { background: radial-gradient(60% 55% at 18% 8%, rgba(242, 196, 109, 0.16), transparent 70%), radial-gradient(55% 50% at 88% 96%, rgba(242, 196, 109, 0.12), transparent 70%), linear-gradient(#060606, #101011 50%, #060606); }


/* Closing page: a pour. A jug tips, a thin stream falls through the headline into a glass
   and fills it. The jug and glass are drawn placeholders in the SVG; generated cut-outs can
   replace them. Scrubbed by scroll (js/landing-wall.js). */
.c-pour-pin { padding: 0; display: block; height: 280vh; overflow: visible; background: var(--c-gold); }
.c-pour-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; color: var(--c-ink); }
.c-pour-ticker { position: absolute; z-index: 1; top: 84px; left: 50%; transform: translateX(-50%); width: min(82vw, 1100px); margin: 0; padding: 7px 14px; border: 1.5px solid rgba(3, 3, 3, 0.55); display: flex; justify-content: space-between; font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; opacity: 0.85; }
.c-pour-kicker { position: absolute; z-index: 1; left: 50%; top: calc(50% - min(30svh, 22vw) - 22px); transform: translateX(-50%); margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 600; white-space: nowrap; }
.c-pour-title { position: relative; z-index: 1; margin: 0; text-align: center; font-family: 'Anton', 'Bebas Neue', Impact, sans-serif; font-weight: 400; text-transform: uppercase; line-height: 0.9; font-size: min(17vw, 30svh); }
.c-pour-title span { display: block; }
.c-pour { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.c-pour-drops circle { fill: #7c1f12; opacity: 0; }
.c-pour-cta { position: absolute; z-index: 3; left: 50%; bottom: 7svh; translate: -50% 0; background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.c-pour-meta { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 18px; margin: 0; display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.c-nopin .c-pour-pin, .c-static .c-pour-pin { height: auto; }
.c-nopin .c-pour-stage, .c-static .c-pour-stage { position: relative; }
@media (max-width: 760px) { .c-pour-pin { height: auto; } .c-pour-stage { position: relative; min-height: 100svh; } .c-pour { display: none; } .c-pour-title { font-size: 22vw; } .c-pour-ticker { display: none; } .c-pour-kicker { top: 18%; } }

/* silhouette look for the pour page: cream distressed type behind black cut-outs on gold */
.c-pour-title { color: #f6f2ea; filter: url(#c-rough); transform-origin: 50% 50%; }
.c-pour-title span:last-child { translate: 3% 0; }
.c-pour-drops circle { fill: #0b0b0c; }
.c-pour-ticker, .c-pour-kicker, .c-pour-meta { color: #0b0b0c; }

/* pour: jug and glass are pre-rendered images (the rough texture is baked in, so nothing is
   filtered per frame); only the headline keeps a filter, on its static letters. */
.c-defs { position: absolute; width: 0; height: 0; pointer-events: none; }
.c-pour-title { filter: none; will-change: transform; }
.c-pour-title span { filter: url(#c-rough); }
.c-pour-jug, .c-pour-glassg { will-change: transform; }

/* closing page: ink headline with fruit dropping over it */
.c-pour-title { color: #0b0b0c; }
.c-fruit .c-fr { will-change: transform, opacity; filter: drop-shadow(0 10px 14px rgba(60, 10, 0, 0.28)); }

/* softer section handoffs */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.l-guest-link { display: block; margin-top: 14px; font-size: 13px; color: rgba(244, 241, 238, 0.72); text-decoration: underline; text-underline-offset: 3px; text-align: center; }
.l-guest-link:hover { color: var(--l-accent); }