/* ==========================================================================
   BOTTLE OF — DESIGN SYSTEM
   --------------------------------------------------------------------------
   1. Tokens       colour · type · space · radius · size · motion
   2. Breakpoints  phone < 700px · tablet 700–1179px · desktop ≥ 1180px
                   Sizes are fluid between 390px and 1440px wide, so the page
                   grows smoothly instead of jumping at each breakpoint.
   3. Hero         Stacked (default): nav, BOTTLE OF, bottle, intro, Shop button,
                   top to bottom. Side by side: only when the hero is at least
                   1180px wide and 3:2 or wider, so BOTTLE OF never drops below
                   about 100px beside the bottle. There the Shop button sits
                   under the intro on the right, the intro lines up with the
                   top of BOTTLE. The pause button is hidden on every screen
                   but still reachable by keyboard and screen readers.
   ========================================================================== */

:root {
  /* Colour — neutrals matched to the studio backdrop in the photography */
  --studio: #D4D7D6;          /* hero, photo wells */
  --ground: #F2F3F2;          /* page */
  --panel: #E3E5E4;           /* alternate section (gift sets) */
  --card: #FFFFFF;            /* category tiles */
  --ink: #151413;             /* text, primary buttons */
  --muted: #565A59;           /* secondary text on ground and panel */
  --muted-on-studio: #464A49;    /* secondary text on studio */
  --line: #CDD1CF;            /* dividers */
  --on-ink: #F2F3F2;          /* text on ink */
  --on-ink-muted: #B4B8B6;    /* small print on ink */
  --accent: #D63A2A;          /* highlight: ketchup red, for the carousel arrows. White on it is 4.7:1 */
  --accent-hover: #B52E20;
  /* Category accents — the colour band at the foot of each label */
  --cat-pantry: #D63A2A;
  --cat-drinks: #3B8FD6;
  --cat-wine-beer: #7A1630;
  --cat-spirits: #B5651D;
  --cat-bath: #F25F4C;
  --cat-home: #2FA84F;

  /* Type families — Barlow Condensed matches the bottle labels */
  --font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;

  /* Type scale — display sizes are fluid from 390px to 1440px wide */
  --t-display-xl: clamp(64px, 43.2px + 5.33vw, 120px);  /* section titles: THE RANGE, GIFT SETS */
  --t-display-l: clamp(36px, 25.6px + 2.67vw, 64px);    /* category names */
  --t-display-m: clamp(22px, 18.3px + 0.95vw, 32px);    /* category tiles, gift set names */
  --t-display-s: clamp(18px, 15.8px + 0.57vw, 24px);    /* product names */
  --t-footer: clamp(72px, 46.7px + 6.48vw, 140px);      /* footer wordmark */
  --t-intro: clamp(17px, 15.5px + 0.38vw, 21px);        /* hero intro */
  --t-lede: clamp(16px, 15.3px + 0.19vw, 18px);         /* section intros */
  --t-body: 16px;
  --t-ui: 15px;          /* nav, chips, menu links */
  --t-small: 14px;       /* card buttons, counts, small notes */
  --t-caption: 13px;     /* counts, small print */
  --t-micro: 11px;       /* badges: uppercase, +0.08em */
  --lh-display: 0.9;
  --lh-body: 1.5;

  /* Space — 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --gutter: clamp(16px, 5vw - 4px, 64px);               /* page side margin */
  --gap: clamp(12px, 9px + 0.76vw, 20px);               /* between cards and tiles */
  --section-top: clamp(56px, 41px + 3.8vw, 96px);
  --range-top: clamp(28px, 20.5px + 1.9vw, 48px);       /* space between the hero and the category tiles */
  --section-bottom: clamp(64px, 46px + 4.6vw, 112px);
  --block-gap: clamp(48px, 42px + 1.52vw, 64px);        /* between category rows */

  /* Radius */
  --radius-pill: 999px;
  --radius-tile: 14px;
  --radius-card: 12px;
  --radius-inner: 8px;

  /* Sizes */
  --h-cta: 52px;          /* primary button */
  --h-control: 44px;      /* chips, icon buttons, minimum tap target */
  --h-button: 40px;       /* secondary buttons on cards */
  --w-card: clamp(160px, 134px + 6.67vw, 230px);
  --h-tile: clamp(180px, 150px + 7.6vw, 260px);
  --h-gift: clamp(220px, 190px + 7.6vw, 300px);
  --nav-h: clamp(64px, 55px + 2.3vw, 88px);
  --bar-h: 60px;
  --peek: clamp(40px, 84px - 3.05vw, 72px);             /* how much of the next section shows under the hero */
  --max-w: 1600px;
  --bleed: calc(max(0px, (100vw - var(--max-w)) / 2) + var(--gutter));   /* page edge to content edge */

  /* Motion */
  --motion-fast: 0.2s;
  --motion-slide: 0.25s;

  color-scheme: light;
}

/* Base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; top: var(--space-2); z-index: 50; padding: 10px var(--space-4); border-radius: var(--radius-pill); background: var(--ink); color: var(--on-ink); font-weight: 600; text-decoration: none; }
.skip:focus { left: var(--space-2); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Components: buttons */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h-cta); padding: 0 26px; border-radius: var(--radius-pill);
  background: var(--ink); color: var(--on-ink);
  font-size: var(--t-body); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.btn-primary svg { width: 18px; height: 18px; }
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h-button); padding: 0 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--ink);
  color: var(--ink); font-size: var(--t-small); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.btn-secondary:hover { background: var(--ink); color: var(--on-ink); }
.btn-dark {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--h-button); padding: 0 var(--space-4); border-radius: var(--radius-pill);
  background: var(--ink); color: var(--on-ink);
  font-size: var(--t-small); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.btn-secondary svg, .btn-dark svg { width: 14px; height: 14px; }
.icon-btn {
  width: var(--h-control); height: var(--h-control); flex: 0 0 var(--h-control); border-radius: var(--radius-pill);
  border: 1.5px solid currentColor; background: transparent; color: inherit;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
}
.icon-btn.solid { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.icon-btn:disabled { opacity: .3; cursor: default; }
.icon-btn svg { width: 18px; height: 18px; }
.chip {
  flex: 0 0 auto; height: var(--h-control); padding: 0 18px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  font: 600 var(--t-ui)/1 var(--font-body); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap;
}
.chip span { font-weight: 500; opacity: .7; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }

/* Sticky bar, shown once the hero has scrolled away */
.bar {
  position: fixed; z-index: 20; top: 0; left: 0; right: 0;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--ground); border-bottom: 1px solid var(--line);
  transform: translateY(-100%); visibility: hidden;
  transition: transform var(--motion-slide) ease, visibility 0s linear var(--motion-slide);
}
.bar.is-on { transform: none; visibility: visible; transition: transform var(--motion-slide) ease, visibility 0s; }
.bar-in { height: var(--bar-h); padding-inline: var(--gutter); display: flex; align-items: center; gap: var(--space-6); max-width: var(--max-w); margin-inline: auto; }
.bar-logo { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: .02em; text-decoration: none; display: inline-flex; align-items: center; min-height: var(--h-control); }
.bar-links { display: flex; gap: 22px; margin-left: auto; }
.bar-links a { text-decoration: none; font-size: var(--t-ui); font-weight: 600; min-height: var(--h-control); display: inline-flex; align-items: center; white-space: nowrap; }
.bar .menu-open { margin-left: auto; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  height: calc(100vh - var(--peek));
  min-height: max(520px, 50vw);
  background: var(--studio);
  color: var(--ink);
  overflow: hidden;
  container: hero / size;
}
@supports (height: 100svh) { .hero { height: calc(100svh - var(--peek)); } }

/* Stacked (default): everything in one column, nothing overlaps */
.hero-in {
  --bottle-half: calc(0.155 * max(100cqw, 177.78cqh));  /* half the widest bottle in the desktop cut */
  --hero-gap: clamp(28px, 2.5cqw, 48px);                 /* space between the bottle and the type */
  --side-room: calc(50cqw - var(--bottle-half) - var(--hero-gap) - var(--gutter));
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  padding-bottom: clamp(20px, 12.6px + 1.9vw, 40px);
}
.hero-nav {
  position: relative; z-index: 3; flex: 0 0 var(--nav-h); width: 100%;
  padding-inline: var(--gutter); padding-top: env(safe-area-inset-top, 0px);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.nav-links { display: flex; gap: 28px; }
.nav-links a { text-decoration: none; font-size: var(--t-ui); font-weight: 600; min-height: var(--h-control); display: inline-flex; align-items: center; }
.ships { font-size: var(--t-small); font-weight: 500; }
.hero .menu-open { margin-left: auto; }
.words {
  position: relative; z-index: 2; flex: none; margin: 0;
  padding-inline: var(--gutter);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: min(calc((100cqw - 2 * var(--gutter)) / 3.95), 16cqh, 160px);
  line-height: .86; letter-spacing: -.005em; white-space: nowrap; text-align: center;
}
.stage { position: relative; flex: 1 1 auto; min-height: 120px; width: 100%; }
.stage video {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
}
/* A wide, short space shows the whole frame, sized to the video and faded on every edge */
.stage.is-contain video {
  left: 50%; right: auto; width: auto; aspect-ratio: 16 / 9; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%, #000 70%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 30%, #000 70%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-composite: intersect;
}
.intro {
  position: relative; z-index: 2; flex: none;
  padding-inline: var(--gutter); margin-top: var(--space-2);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center;
}
.intro-lead { font-size: var(--t-intro); font-weight: 500; line-height: 1.3; text-wrap: balance; max-width: 24em; }
.intro-sub { font-size: var(--t-ui); line-height: 1.45; color: var(--muted-on-studio); text-wrap: pretty; max-width: 34em; }
.intro-cta { display: none; }   /* the Shop button under the intro, side-by-side hero only */
.hero-bar {
  position: relative; z-index: 3; flex: none; width: 100%;
  padding-inline: var(--gutter); margin-top: var(--space-4);
  display: flex; align-items: center; justify-content: center;
}
.hero-bar .pause { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); }
.pause .i-play { display: none; }
.pause.is-paused .i-play { display: block; }
.pause.is-paused .i-pause { display: none; }
/* No visible pause button on any screen; it still appears for keyboard and screen reader users */
.hero-bar .pause:not(:focus-visible) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); border: 0; white-space: nowrap;
}

/* Side by side: wide, landscape heroes only */
@container hero (min-width: 1180px) and (min-aspect-ratio: 3 / 2) {
  .hero-in {
    display: block; padding: 0;
    --words-size: clamp(88px, calc(var(--side-room) / 2.82), min(220px, 34cqh));
  }
  .hero-nav { position: absolute; top: 0; left: 0; right: 0; height: var(--nav-h); }
  .stage { position: absolute; inset: 0; }
  .stage video { -webkit-mask-image: none; mask-image: none; }
  .words {
    position: absolute; top: 50%; transform: translateY(-50%);
    right: calc(50cqw + var(--bottle-half) + var(--hero-gap));
    padding: 0; text-align: right; white-space: normal;
    font-size: var(--words-size);
  }
  .words span { display: block; }
  /* The intro's first line starts level with the top of BOTTLE: BOTTLE's letters begin .743 of its size
     above the centre line, and the intro's letters begin .336 of their size below the top of their line */
  .intro {
    position: absolute; top: calc(50% - .743 * var(--words-size) - .336 * var(--t-intro)); transform: none; margin: 0; padding: 0;
    left: calc(50cqw + var(--bottle-half) + var(--hero-gap));
    width: min(320px, var(--side-room));
    align-items: flex-start; text-align: left;
  }
  .hero-bar {
    position: absolute; left: 0; right: 0; bottom: var(--space-10); margin: 0;
    justify-content: flex-end;
  }
  .hero-bar > .btn-primary { display: none; }
  .hero-bar .pause { position: static; transform: none; }
  .intro-cta { display: inline-flex; margin-top: var(--space-4); }
}

/* ==========================================================================
   Range
   ========================================================================== */
.range { background: var(--ground); padding-block: var(--range-top) var(--section-bottom); }
.h-section { margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: var(--lh-display); font-size: var(--t-display-xl); text-wrap: balance; }
.lede { margin-top: clamp(12px, 10.5px + .38vw, 16px); font-size: var(--t-lede); line-height: var(--lh-body); max-width: 34em; }

/* Category tiles */
.tiles { display: flex; gap: var(--gap); overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.tile {
  flex: 0 0 var(--w-tile, clamp(150px, 105px + 11.4vw, 200px)); height: var(--h-tile); scroll-snap-align: start;
  padding: 10px; border-radius: var(--radius-tile); background: var(--card); text-decoration: none;
  display: flex; flex-direction: column; gap: 10px;
  container-type: inline-size;
}
.tile:hover .tile-name { text-decoration: underline; text-underline-offset: 4px; }
.tile-text { display: flex; flex-direction: column; gap: 2px; padding-inline: var(--space-1); }
/* Tile names stay on one line on every screen. The size steps down when a tile is narrow, so the longest
   name (WINE & BEER, about 4.8 times its font size) always fits. Every tile is the same width, so every name
   gets the same size. */
.tile-name { font-family: var(--font-display); font-weight: 800; font-size: min(var(--t-display-m), (100cqi - 2 * var(--space-1)) / 5.1); line-height: var(--lh-display); text-transform: uppercase; white-space: nowrap; }
.tile-count { font-size: var(--t-caption); font-weight: 600; line-height: 17px; color: var(--muted); }
.tile-band { flex: 0 0 6px; height: 6px; border-radius: 3px; margin-inline: var(--space-1); }

/* Photos side by side overlap. Each photo sits on top of the one before it, so only its left edge fades,
   with a short fade placed in the clear space between two bottles so no grey lands on a bottle.
   The two outer bottles are nudged slightly outwards to give that fade more room.
   A bottle without a photo yet is a drawing in the same 800 × 1000 frame, so it lines up the same way. */
.blend { position: relative; display: flex; overflow: hidden; border-radius: var(--radius-inner); background: var(--studio); }
.blend > * {
  flex: 0 0 var(--bw, 44%); min-width: 0; height: 100%; object-fit: cover; display: block;
  -webkit-mask-image: linear-gradient(to right, transparent var(--fade-from, 14%), #000 var(--fade-to, 21%));
  mask-image: linear-gradient(to right, transparent var(--fade-from, 14%), #000 var(--fade-to, 21%));
}
.blend > :first-child { -webkit-mask-image: none; mask-image: none; }
.blend.n3 > :first-child { object-position: 65% 50%; }
.blend.n3 > :last-child { object-position: 35% 50%; --fade-from: 23.5%; --fade-to: 30.5%; }
.blend.n3 > [src$="/hotwater.jpg"]:first-child { object-position: 76% 50%; }   /* the hot water bottle is extra wide: a little more room before the next photo's fade */
.blend > * + * { margin-left: calc(var(--bo, 16%) * -1); }
.blend.n2 { --bw: 60%; --bo: 20%; }
.blend.n1 > * { flex-basis: 100%; -webkit-mask-image: none; mask-image: none; }
.blend > * { transform: scale(1.15); }   /* bottles 15% bigger inside the same-size category tiles and gift sets */
.tile .blend { flex: 1 1 auto; min-height: 0; }

/* Category rows */
.cat { margin-top: var(--block-gap); padding-top: var(--space-5); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--bar-h) + var(--space-4)); }
.cat-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--h-control); }
.cat-title { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
.cat-name { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--t-display-l); line-height: var(--lh-display); text-transform: uppercase; }
.cat-count { font-size: var(--t-small); font-weight: 600; color: var(--muted); white-space: nowrap; }
.arrows { display: none; gap: var(--space-2); }
.subs { display: flex; gap: var(--space-2); margin-top: var(--space-4); overflow-x: auto; padding-bottom: 2px; }
.row { display: flex; gap: var(--gap); margin-top: var(--space-5); overflow-x: auto; padding-bottom: var(--space-3); scroll-snap-type: x mandatory; scrollbar-width: thin; }
/* Rows run off both edges of the screen, with no margin cutting them off. The first card still lines up
   with the page margin, and from 700px the script sizes the cards so a row always ends on half a card. */
.row, .tiles { margin-inline: calc(-1 * var(--bleed)); padding-inline: var(--bleed); scroll-padding-inline: var(--bleed); }
/* Carousel arrows: solid red while there's more to see that way, a faint outline at the end */
.arrows .icon-btn {
  width: var(--h-cta); height: var(--h-cta); flex-basis: var(--h-cta);
  background: var(--accent); border-color: var(--accent); color: #FFFFFF;
  transition: transform var(--motion-fast), background var(--motion-fast), color var(--motion-fast);
}
.arrows .icon-btn svg { width: 24px; height: 24px; stroke-width: 2.6; }
.arrows .icon-btn:hover:not(:disabled) { transform: scale(1.08); background: var(--accent-hover); border-color: var(--accent-hover); }
.arrows .icon-btn:disabled { opacity: 1; background: transparent; border-color: var(--line); color: var(--line); }

/* Product card */
.card { flex: 0 0 var(--w-card); min-width: 0; display: flex; flex-direction: column; scroll-snap-align: start; }
.card-img { display: block; position: relative; aspect-ratio: 4 / 5; max-width: 100%; border-radius: var(--radius-card); overflow: hidden; background: var(--studio); }
.card-img img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.21); transition: transform var(--motion-slide) ease; }   /* bottle 21% bigger inside the same-size card */
/* A photo that links to Amazon: on hover the bottle grows a little and the Buy button fills, so it's clear they go to the same place */
@media (hover: hover) {
  a.card-img:hover img { transform: scale(1.26); }
  .card:has(a.card-img:hover) .btn-secondary { background: var(--ink); color: var(--on-ink); }
}
.drawn { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14%; }
.drawn svg { height: 66%; width: auto; max-width: 70%; }
.badge { position: absolute; top: 10px; left: 10px; padding: 4px var(--space-2); border-radius: var(--radius-pill); background: var(--ink); color: var(--on-ink); font-size: var(--t-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.card-body { padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.card-name { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--t-display-s); line-height: 1; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .btn-secondary { margin-top: var(--space-2); }
.soon-note { margin-top: var(--space-2); min-height: var(--h-button); display: flex; align-items: center; font-size: var(--t-small); font-weight: 600; color: var(--muted); }

/* Gift sets */
.gifts { background: var(--panel); padding-block: var(--section-top) var(--section-bottom); }
/* Gift sets sit in swipeable rows like the categories: Seasonal, then Any occasion. Three in view from 700px. */
.gift { flex: 0 0 280px; min-width: 0; display: flex; flex-direction: column; scroll-snap-align: start; }
.gift-img { display: block; position: relative; border-radius: var(--radius-card); }
/* Like the product cards: point at a gift set and its bottles grow a little (4%). The three photos grow
   together around the middle of the set, so the fades between them stay in the gaps between bottles.
   The outer photos move out by 4% of their distance from the middle (28% of the set's width = 63.6% of a
   photo's width, so 2.55%; a two-photo set: 20% = 33.3% of a photo, so 1.33%). */
.gift .blend > * { transition: transform var(--motion-slide) ease; }
@media (hover: hover) {
  a.gift-img:hover .blend > * { transform: scale(1.196); }
  a.gift-img:hover .blend.n3 > :first-child { transform: translateX(-2.55%) scale(1.196); }
  a.gift-img:hover .blend.n3 > :last-child { transform: translateX(2.55%) scale(1.196); }
  a.gift-img:hover .blend.n2 > :first-child { transform: translateX(-1.33%) scale(1.196); }
  a.gift-img:hover .blend.n2 > :last-child { transform: translateX(1.33%) scale(1.196); }
}
.gift .blend { height: var(--h-gift); border-radius: var(--radius-card); }
/* tablet: gift set boxes a little shorter so the three bottles have room and do not overlap */
@media (min-width: 700px) and (max-width: 1179px) { .gift .blend { height: auto; aspect-ratio: 14 / 11; } }
.gift-body { padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.gift-name { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--t-display-m); line-height: 1; text-transform: uppercase; }
.gift-what { font-size: var(--t-ui); line-height: 22px; color: var(--muted); }
.gift .btn-dark { align-self: flex-start; margin-top: 10px; }

/* Footer */
.foot { background: var(--ink); color: var(--on-ink); padding-block: clamp(48px, 30px + 4.6vw, 80px) calc(clamp(32px, 22.9px + 2.3vw, 48px) + env(safe-area-inset-bottom, 0px)); }
.foot :focus-visible { outline-color: var(--on-ink); }
.foot-in { display: flex; flex-direction: column; gap: var(--space-6); }
.foot-word { font-family: var(--font-display); font-weight: 800; font-size: var(--t-footer); line-height: var(--lh-display); }
.foot-tag { font-size: var(--t-body); line-height: 24px; max-width: 32em; }
.foot-links { display: flex; flex-wrap: wrap; column-gap: var(--space-6); row-gap: var(--space-1); }
.foot-links a { text-decoration: none; font-size: var(--t-ui); font-weight: 600; min-height: var(--h-control); display: inline-flex; align-items: center; }
.foot-small { font-size: var(--t-caption); line-height: 20px; color: var(--on-ink-muted); max-width: 46em; }
/* Amazon's required statement: full strength and body size, so it is clear and prominent */
.foot-disclosure { font-size: var(--t-body); line-height: 24px; font-weight: 600; max-width: 46em; }
.foot-disclosure a { font-weight: 500; color: var(--on-ink-muted); text-underline-offset: 3px; }
.foot-disclosure a:hover { color: var(--on-ink); }

/* Text pages (privacy policy): a plain header, one readable column, the same footer */
.page-head { background: var(--ground); border-bottom: 1px solid var(--line); }
.page-head-in { height: var(--bar-h); max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.legal { padding-block: var(--section-top) var(--section-bottom); }
.legal > * { max-width: 40em; }
.legal-title { margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: var(--lh-display); font-size: var(--t-display-l); }
.legal-date { margin-top: var(--space-3); font-size: var(--t-small); color: var(--muted); }
.legal h2 { margin: var(--space-12) 0 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--t-display-m); line-height: 1; scroll-margin-top: var(--space-6); }
.legal p, .legal ul { margin-top: var(--space-4); }
.legal ul { padding-left: 1.2em; }
.legal li + li { margin-top: var(--space-2); }
.legal a { text-underline-offset: 3px; }
.legal-statement { padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); background: var(--panel); font-weight: 500; }

/* Phone menu */
.menu {
  position: fixed; inset: 0; z-index: 40; background: var(--ground); color: var(--ink);
  padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + var(--space-6));
  display: flex; flex-direction: column; gap: var(--space-1); overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu-head { display: flex; align-items: center; justify-content: space-between; min-height: 54px; margin-bottom: var(--space-3); }
.menu-head span { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: .02em; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a { font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1.1; text-transform: uppercase; text-decoration: none; padding-block: var(--space-1); }
.menu-note { margin-top: auto; padding-top: var(--space-6); font-size: var(--t-small); color: var(--muted); }

/* ==========================================================================
   Breakpoints
   ========================================================================== */

/* Phone: < 700px */
@media (max-width: 699px) {
  .nav-links, .ships, .bar-links { display: none; }
  .intro-sub { display: none; }
  /* BOTTLE OF 15% smaller, so the hero bottle gets the room; the hero bottle 10% bigger */
  .words { font-size: calc(min((100cqw - 2 * var(--gutter)) / 3.95, 16cqh, 160px) * .85); }
  .stage:not(.is-contain) video { transform: scale(1.1); }
}

/* Tablet and up: ≥ 700px */
@media (min-width: 700px) {
  .menu-open { display: none; }
  .card .btn-secondary { align-self: flex-start; }
  .gift { flex-basis: var(--w-gift, calc((100% - 2 * var(--gap)) / 3)); }
}
@media (hover: hover) and (min-width: 700px) {
  .arrows { display: flex; }
}

/* Desktop: ≥ 1180px */
@media (min-width: 1180px) {
  .tiles { overflow: visible; }
  .tile { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bar, .bar.is-on { transition: none; }
  .btn-secondary, .card-img img, .arrows .icon-btn, .gift .blend > * { transition: none; }
}