/* ═══════════════════════════════════════════════════════════
   The Drinks Experience — Master Stylesheet
   Semantic. Clean. No duplication.
═══════════════════════════════════════════════════════════ */

/* ── Local Fonts ─────────────────────────────────────────── */
@font-face {
  font-display: swap;
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/cormorant-garamond-v21-latin-300.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/cormorant-garamond-v21-latin-300italic.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/cormorant-garamond-v21-latin-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/cormorant-garamond-v21-latin-500italic.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200;
  src: url('fonts/jost-v20-latin-200.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/jost-v20-latin-300.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/jost-v20-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/jost-v20-latin-500.woff2') format('woff2');
}

/* ── Variables ─────────────────────────────────────────── */
:root {
  --gold:        #C9A96E;
  --gold-light:  #E8D5A3;
  --black:       #0A0806;
  --off-black:   #111009;
  --charcoal:    #1C1A14;
  --cream:       #F5F0E8;
  --warm-white:  #FAF7F2;

  --font-serif:  'Cormorant Garamond', serif;
  --font-sans:   'Jost', sans-serif;

  --space-xs:    1.5rem;
  --space-sm:    2.5rem;
  --space-md:    4rem;
  --space-lg:    6rem;
  --space-xl:    9rem;

  --border-gold: 1px solid rgba(201,169,110,0.18);
  --border-gold-strong: 1px solid rgba(201,169,110,0.4);

  --max-width:   1200px;
  --text-width:  47.5rem;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--cream);
  font-family: var(--font-sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
address { font-style: normal; }

/* ── Fonts ──────────────────────────────────────────────── */

/* ── Typography base ────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

/* The lower bound is px, not rem, and deliberately so. In rem it scaled with
   the reader's default text size, and at 150% became 72px — past the point
   where the headline still fits its intended two lines. "The Cocktail" and
   "The Craft of" then broke mid-phrase into three or four lines, which grew the
   header enough to push the eyebrow up under the logo.

   A flat 48px floor is not enough on its own, though: it governs from 0 to
   686px, so the headline stays 48px however narrow the screen gets, while iOS
   Display Zoom and Safari's Page Zoom narrow the CSS viewport instead of
   scaling the text. Measured, the widest phrase wraps below 294px on mastery
   and 277px on index. 15vw is exactly 48px at 320px, so from 320px up min()
   picks 48px and nothing moves; below it the floor tracks the viewport and the
   headline holds its two lines down to 200px. 7vw and the 6rem ceiling still
   govern everywhere there is room to grow. Firefox Android is out of reach —
   Gecko multiplies computed font sizes after the cascade, so no CSS bound
   survives it. */
h1 { font-size: clamp(min(48px, 15vw), 7vw, 6rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }

p {
  font-size: clamp(0.88rem, 1.3vw, 1rem);
  line-height: 1.85;
  color: rgba(245,240,232,0.72);
}

small {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: var(--space-xs);
}

blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.7;
  color: var(--cream);
}

cite {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-style: normal;
  display: block;
  margin-top: 1.5rem;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 300;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold-light);
  border: 1px solid rgba(201,169,110,0.9);
  /* 12vw is 3rem at 400px — below that the side padding shrinks so the label
     keeps its text box. Also caps under Firefox text zoom, which scales the
     rem term but not the vw one. */
  padding: 1rem min(3rem, 12vw);
  background: rgba(10,8,6,0.35);
  backdrop-filter: blur(4px);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.4s ease;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
  z-index: -1;
}
.btn:hover { color: var(--black); }
.btn:hover::before { transform: translateX(0); }
.btn-outline {
  background: transparent;
  border-color: rgba(201,169,110,0.5);
  color: var(--warm-white);
}
.btn-outline:hover { color: var(--black); }
.btn-sm {
  font-size: 0.58rem;
  padding: 0.75rem 2.2rem;
  letter-spacing: 0.3em;
}

/* ── Nav ────────────────────────────────────────────────── */
body > nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.8rem 3rem;
  transition: background 0.4s, padding 0.4s;
}
body > nav.scrolled {
  background: rgba(10,8,6,0.96);
  padding: 1.2rem 3rem;
  border-bottom: var(--border-gold);
}

/* Logo */
body > nav > a {
  display: block;
  width: 160px;
  flex-shrink: 0;
  opacity: 0.72;
  transition: opacity 0.3s;
  z-index: 1003;
}
body > nav > a:hover { opacity: 1; }
body > nav > a img { width: 100%; }
@media (max-width: 768px) {
  body > nav > a { width: 120px; }
}

@media (max-width: 480px) {
  body > nav > a { width: 90px; }
}

/* Nav links — desktop horizontal */
body > nav > ul {
  display: flex;
  gap: 2.8rem;
  align-items: center;
}
body > nav > ul a {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--warm-white);
  opacity: 0.88;
  transition: opacity 0.3s, color 0.3s;
}
body > nav > ul a:hover,
body > nav > ul a.active { opacity: 1; color: var(--gold); }

/* Email — hidden on desktop, shown in mobile menu */
body > nav > address {
  display: none;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: rgba(245,240,232,0.75);
  font-style: normal;
}
body > nav > address a { transition: color 0.3s; }
body > nav > address a:hover { color: var(--gold); }

/* Hamburger — hidden on desktop */
body > nav > button {
  display: none;
  flex-direction: column;
  gap: 0.3rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1003;
}
body > nav > button span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--warm-white);
  transition: transform 0.35s, opacity 0.35s;
}

/* Mobile: show hamburger, hide desktop links */
@media (max-width: 900px) {
  body > nav > ul { display: none; }
  body > nav > button {
    display: flex;
    position: absolute;
    /* Matches the nav's own padding-top. The button is absolutely positioned
       while the logo is a flex child, so without this they drift apart whenever
       the padding changes — most visibly on scroll, where the logo rose but the
       button stayed put. */
    top: 1.8rem;
    right: 1.5rem;
  }
  body > nav.scrolled > button { top: 1.2rem; }
}

/* Nav open state — full-screen overlay */
body > nav.nav-open {
  position: fixed;
  inset: 0;
  height: auto;
  background: rgba(10,8,6,0.97);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
/* Opening the menu takes the logo out of the flex flow and pins it absolutely,
   so these offsets have to equal the closed nav's padding exactly — otherwise
   the logo and hamburger visibly jump the moment the menu opens. They must be
   kept in step with the nav padding, including the mobile overrides below. */
body > nav.nav-open > a {
  position: absolute;
  top: 1.8rem;
  left: 3rem;
}
body > nav.nav-open.scrolled > a {
  top: 1.2rem;
}
body > nav.nav-open > button {
  position: absolute;
  top: 1.8rem;
  right: 1.5rem;
}
body > nav.nav-open.scrolled > button {
  top: 1.2rem;
}
body > nav.nav-open > button span:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}
body > nav.nav-open > button span:nth-child(2) {
  opacity: 0;
}
body > nav.nav-open > button span:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
}
body > nav.nav-open > ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  text-align: center;
}
body > nav.nav-open > ul a {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 9vw, 4rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: none;
  opacity: 1;
}
body > nav.nav-open > ul a:hover { color: var(--gold); }
body > nav.nav-open > address {
  display: block;
  margin-top: var(--space-md);
}

/* The open menu is a fixed, centred overlay and the body is scroll-locked
   while it's up, so anything taller than the screen is simply unreachable.
   `safe center` stops flex centring from pushing the first link past the top
   edge (plain `center` overflows in both directions and the overflow above is
   not scrollable); overflow-y then makes the remainder reachable. */
body > nav.nav-open {
  justify-content: safe center;
  overflow-y: auto;
}

/* Short viewports — a phone in landscape has ~375px of height for four 64px
   links plus the address block, which needs ~510px. Scale the menu to fit. */
@media (max-height: 500px) {
  body > nav.nav-open > ul { gap: 1.2rem; }
  body > nav.nav-open > ul a { font-size: clamp(1.4rem, 7vh, 2rem); }
  body > nav.nav-open > address { margin-top: 1.2rem; }
}

/* ── Art deco hero corners ──────────────────────────────── */
section.hero > span {
  position: absolute;
  width: 90px;
  height: 90px;
  z-index: 3;
  opacity: 0.32;
  pointer-events: none;
}
/* One inset on all four sides, so the brackets read as an evenly spaced frame.
   Previously the top sat 72px down while the sides were 40px, which both pushed
   the frame off-centre and dropped the top rule through the middle of the logo.
   25px keeps the corner just clear of the logo; larger values cut across it. */
section.hero > span:nth-of-type(1) { top: 25px; left: 25px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
section.hero > span:nth-of-type(2) { top: 25px; right: 25px; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); }
section.hero > span:nth-of-type(3) { bottom: 25px; left: 25px; border-bottom: 1px solid var(--gold); border-left: 1px solid var(--gold); }
section.hero > span:nth-of-type(4) { bottom: 25px; right: 25px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }
@media (max-width: 768px) {
  section.hero > span { width: 50px; height: 50px; opacity: 0.25; }
  section.hero > span:nth-of-type(1),
  section.hero > span:nth-of-type(2) { top: 16px; }
  section.hero > span:nth-of-type(1),
  section.hero > span:nth-of-type(3) { left: 16px; }
  section.hero > span:nth-of-type(2),
  section.hero > span:nth-of-type(4) { right: 16px; }
  section.hero > span:nth-of-type(3),
  section.hero > span:nth-of-type(4) { bottom: 16px; }
}

/* ── Animations & Reveal ────────────────────────────────── */
@keyframes heroFade {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50%       { opacity: 0.9; transform: scaleY(0.7); }
}

/* Scroll-triggered reveal — js adds .visible */
.js-loaded .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.js-loaded .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Staggered children */
.js-loaded .reveal-child {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js-loaded .reveal-child.visible { opacity: 1; transform: translateY(0); }
.js-loaded .reveal-child:nth-child(2) { transition-delay: 0.1s; }
.js-loaded .reveal-child:nth-child(3) { transition-delay: 0.2s; }
.js-loaded .reveal-child:nth-child(4) { transition-delay: 0.3s; }

/* ── Hero ───────────────────────────────────────────────── */
section.hero {
  position: relative;
  /* min-height rather than a fixed height: with `height: 100svh` plus
     `overflow: hidden`, a reader using a larger default text size grows the
     header past the hero and the bottom of it is silently cut off. As a
     min-height the hero grows to fit instead. No effect at normal text size —
     min-height still resolves to the same 100svh / 37.5rem. */
  min-height: max(100svh, 37.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
section.hero > img {
  animation: heroFade 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
section.hero > picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
section.hero > picture > img {
  animation: heroFade 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* Art deco accent lines */
section.hero > header::before,
section.hero > header::after {
  content: '';
  position: absolute;
  top: -10%;
  width: 1px;
  height: 120%;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, rgba(201,169,110,0.25) 15%, var(--gold) 45%, var(--gold) 55%, rgba(201,169,110,0.25) 85%, transparent 100%);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top center;
}
section.hero > header::before { left: -2rem; }
section.hero > header::after  { right: -2rem; }
/* Dark overlay */
section.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,8,6,0.45) 0%,
    rgba(10,8,6,0.2) 40%,
    rgba(10,8,6,0.6) 100%
  );
  z-index: 1;
}
/* Grain texture */
section.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.35;
  z-index: 2;
  pointer-events: none;
}
section.hero > header {
  animation: fadeUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 4rem 3rem;
  max-width: 900px;
  background: radial-gradient(ellipse at center, rgba(10,8,6,0.6) 0%, rgba(10,8,6,0.3) 50%, transparent 75%);
}
/* 3rem of side padding leaves only 224px of text on a 320px screen. Must sit
   after the rule above — same specificity, so source order decides. */
@media (max-width: 768px) {
  section.hero > header { padding-inline: 1.5rem; }
}
section.hero > header small { margin-bottom: var(--space-sm); opacity: 0.9; }
section.hero > header h1 { color: var(--warm-white); margin-bottom: var(--space-sm); }
section.hero > header h1 em {
  font-style: italic;
  color: var(--gold-light);
  display: block;
}
section.hero > header p {
  color: var(--gold-light);
  opacity: 0.92;
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-md);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
section.hero > header small {
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
section.hero > header h1 {
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

/* Scroll hint */
section.hero > a {
  animation: fadeUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) 1s both;
  position: absolute;
  bottom: 0.8rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.75);
  opacity: 0.5;
  transition: color 0.3s;
}
section.hero > a::after {
  content: '';
  display: block;
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, rgba(201,169,110,0.6), transparent);
  animation: scrollLine 1.8s ease-in-out infinite;
}
section.hero > a > span {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
  transform-origin: top;
}
section.hero > a:hover { color: var(--gold); }

/* Short phone viewports: the only real problem is the scroll hint landing on
   the CTA. The hint is 129px tall and the gap between the CTA and the hero
   floor is about that same 129px, so it collides on its own size rather than
   for want of somewhere to sit. Shorten the two rules, close the gaps, and sit
   it flush on the hero floor — that clears the CTA everywhere.

   The header itself is deliberately left alone, at the site's normal spacing
   and type scale. An earlier version also retimmed the header's padding and
   margins to lift the eyebrow clear of the logo, but measuring the rendered
   text (rather than <small>'s full-width block box) showed the two never
   actually touch at these sizes — there's a 14-42px gap at landscape. The
   trimming was fixing a phantom and only left the hero looking bunched.

   The max-width bound matters: height alone also matches a 1366x768 laptop
   (~660px of viewport after browser chrome). 900px is the seam where the nav
   already switches to the hamburger. */
/* Height in em, not px: em in a media query resolves against the browser's
   default text size, so a reader who has set larger text widens this range —
   which is exactly when the hero content grows and the hint needs the room.
   41.7em is 667px at the default 16px, so normal rendering is unchanged. */
@media (max-height: 41.7em) and (max-width: 900px) {
  section.hero > a { bottom: 0; gap: 0.5rem; }
  section.hero > a > span { height: 24px; }
  section.hero > a::after { height: 30px; }
}

@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(1); transform-origin: top; opacity: 0; }
}

/* ── Intro ──────────────────────────────────────────────── */
section.intro {
  background: var(--charcoal);
  padding: 5rem 4rem;
  text-align: center;
  border-top: var(--border-gold);
  border-bottom: var(--border-gold);
  max-width: 100%;
}
section.intro > p {
  max-width: 680px;
  margin: 0 auto;
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.7;
  color: var(--cream);
  opacity: 0.85;
  letter-spacing: 0.03em;
}
section.intro > p em { color: var(--gold-light); font-style: normal; }

/* ── Section header (shared) ────────────────────────────── */
section:not(.hero) > header {
  text-align: center;
  margin-bottom: var(--space-md);
}
section:not(.hero) > header small { margin-bottom: 0.8rem; }
section:not(.hero) > header h2 { color: var(--warm-white); }
section:not(.hero) > header h2 em {
  font-style: italic;
  color: var(--gold-light);
}

/* ── Services ───────────────────────────────────────────── */
section.services {
  padding: 7rem 4rem;
  background: var(--black);
}
section.services > header {
  text-align: center;
  margin-bottom: 0;
}
section.services > header > small {
  font-size: 0.58rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  display: block;
}
section.services > header > h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
  color: var(--warm-white);
  margin-bottom: 5rem;
  font-style: normal;
}
section.services > ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(201,169,110,0.15);
}
section.services > ol > li {
  background: var(--off-black);
  padding: 3.5rem 2.5rem;
  text-align: center;
  transition: background 0.4s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
section.services > ol > li::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.5s ease;
}
section.services > ol > li:hover { background: #141208; }
section.services > ol > li:hover::after { width: 60%; }
section.services > ol > li > svg {
  width: 48px; height: 48px;
  margin: 0 auto 2rem;
  opacity: 0.7;
  flex-shrink: 0;
}
/* service-name → small (label like "Shaken & Stirred") */
section.services > ol > li > small {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--gold-light);
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
  text-transform: none;
  display: block;
}
/* h3 = service title */
body.page-experiences section.services > ol > li > h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.98rem;
  font-weight: 300;
  color: var(--gold-light);
  opacity: 0.85;
  margin-bottom: 0.8rem;
  letter-spacing: 0.06em;
}
/* .card-sub = service subtitle (italic) */
section.services > ol > li > p.card-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--gold-light);
  opacity: 0.85;
  margin-bottom: 0.8rem;
  letter-spacing: 0.06em;
}
/* body text */
section.services > ol > li > p:not(.card-sub) {
  font-size: 0.78rem;
  line-height: 1.8;
  color: var(--cream);
  opacity: 0.88;
  letter-spacing: 0.03em;
}
/* edu card list items */
section.services > ol > li > ul {
  margin-top: var(--space-xs);
  border-top: var(--border-gold);
  padding-top: var(--space-xs);
  width: 100%;
  text-align: left;
}
section.services > ol > li > ul > li {
  font-size: 0.78rem;
  font-weight: 300;
  color: rgba(245,240,232,0.72);
  letter-spacing: 0.03em;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(201,169,110,0.08);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
section.services > ol > li > ul > li::before {
  content: '—';
  color: var(--gold);
  opacity: 0.5;
  font-size: 0.7rem;
  flex-shrink: 0;
}
section.services > ol > li > ul > li:last-child { border-bottom: none; }

body.page-mastery section.services > ol > li > small {
  font-size: 0.58rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  font-family: var(--font-sans);
  margin-bottom: 1rem;
  display: block;
}
body.page-mastery section.services > ol > li > h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 300;
  color: var(--warm-white);
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
  font-style: normal;
  opacity: 1;
}

section.process > header > h2 em {
  font-style: italic;
  color: var(--gold-light);
}
/* ── Enquire note ───────────────────────────────────────── */
section.services > p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--cream);
  opacity: 0.8;
  letter-spacing: 0.04em;
  text-align: center;
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(201,169,110,0.15);
}
section.services > a {
  display: block;
  width: fit-content;
  margin: 2rem auto 0;
  text-align: center;
}

/* ── Callout ────────────────────────────────────────────── */
section.callout {
  position: relative;
  padding: 8rem 4rem;
  overflow: hidden;
  background: var(--charcoal);
  text-align: center;
}
section.callout::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(201,169,110,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 50%, rgba(201,169,110,0.04) 0%, transparent 60%);
  pointer-events: none;
}
section.callout > blockquote {
  position: relative;
  max-width: var(--text-width);
  margin: 0 auto var(--space-xs);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
}
section.callout > cite {
  position: relative;
  font-size: 0.62rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.8;
  font-style: normal;
  display: block;
}

/* ── Process ────────────────────────────────────────────── */
section.process {
  padding: 7rem 4rem;
  background: var(--black);
}
section.process > ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
  max-width: 1100px;
  margin: var(--space-lg) auto 0;
  counter-reset: process;
}
section.process > ol > li {
  text-align: center;
  counter-increment: process;
}
section.process > ol > li::before {
  content: counter(process, decimal-leading-zero);
  font-family: var(--font-serif);
  font-size: 4rem;
  font-weight: 300;
  color: rgba(201,169,110,0.7);
  display: block;
  margin-bottom: 1rem;
  line-height: 1;
}
section.process > ol > li > h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--gold-light);
  margin-bottom: 0.8rem;
  letter-spacing: 0.05em;
}
section.process > ol > li > p {
  font-size: 0.75rem;
  line-height: 1.85;
  color: var(--cream);
  opacity: 0.9;
}

section.process > p {
  text-align: center;
  margin-top: var(--space-lg);
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-style: italic;
  color: rgba(245,240,232,0.75);
}
section.process > p + a {
  display: block;
  text-align: center;
  width: fit-content;
  margin: var(--space-sm) auto 0;
}

/* ── Cocktail Teaser ─────────────────────────────────────── */
section.cocktail-teaser-section {
  background: var(--black);
  padding: 5rem 4rem;
  text-align: center;
  border-top: 1px solid rgba(201,169,110,0.08);
}
section.cocktail-teaser-section > small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.8;
  margin-bottom: 1.5rem;
}
section.cocktail-teaser-section > .btn {
  margin-top: 2rem;
}
ul.cocktail-teaser {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0 1.25rem;
  width: 100%;
}
ul.cocktail-teaser > li > a {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(201,169,110,0.15);
  transition: border-color 0.4s ease;
}
ul.cocktail-teaser > li > a:hover {
  border-color: rgba(201,169,110,0.4);
}
ul.cocktail-teaser > li > a > img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.5s ease;
}
ul.cocktail-teaser > li > a:hover > img {
  transform: scale(1.04);
}

/* ── Perfect For ─────────────────────────────────────────── */
body.page-experiences section.perfect-for {
  background: var(--black);
  padding: 5rem 4rem;
  border-bottom: 1px solid rgba(201,169,110,0.12);
}
body.page-experiences section.perfect-for > header {
  text-align: center;
  margin-bottom: var(--space-md);
}
body.page-experiences section.perfect-for > ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid rgba(201,169,110,0.12);
}
body.page-experiences section.perfect-for > ul > li {
  padding: 2rem;
  text-align: center;
  border-right: 1px solid rgba(201,169,110,0.12);
  border-bottom: 1px solid rgba(201,169,110,0.12);
  font-family: var(--font-serif);
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--cream);
  opacity: 0.88;
  letter-spacing: 0.05em;
  line-height: 1.4;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}
body.page-experiences section.perfect-for > ul > li:hover {
  background: rgba(201,169,110,0.04);
}
body.page-experiences section.perfect-for > ul > li::before {
  content: '◇';
  color: var(--gold);
  opacity: 0.6;
  font-size: 0.6rem;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  body.page-experiences section.perfect-for { padding: 3rem 1.5rem; }
  body.page-experiences section.perfect-for > ul { grid-template-columns: 1fr 1fr; }
  ul.cocktail-teaser { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  body.page-experiences section.perfect-for > ul { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   Shared: section.adam (used on influence, about, contact)
══════════════════════════════════════════════════════════ */
section.adam {
  background: var(--charcoal);
  padding: 5rem 4rem;
  border-top: 1px solid rgba(201,169,110,0.12);
  border-bottom: 1px solid rgba(201,169,110,0.12);
  text-align: center;
}
section.adam > .adam-inner {
  max-width: 760px;
  margin: 0 auto;
}
section.adam .adam-inner > small { margin-bottom: 0.6rem; }
section.adam .adam-inner > h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--warm-white);
  margin-bottom: 2rem;
}
section.adam .adam-inner > h2 em { font-style: italic; color: var(--gold-light); }
section.adam .adam-inner > p {
  font-size: 0.9rem;
  line-height: 1.9;
  color: var(--cream);
  opacity: 0.85;
  letter-spacing: 0.03em;
  margin-bottom: 1.2rem;
}
section.adam .adam-inner > blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 300;
  color: var(--gold-light);
  opacity: 0.85;
  line-height: 1.6;
  border-left: 2px solid rgba(201,169,110,0.3);
  padding-left: 1.2rem;
  margin: 2rem auto;
  text-align: left;
}
@media (max-width: 768px) {
  section.adam { padding: var(--space-lg) 1.5rem; }
}

/* About page: adam portrait layout */
body.page-about section.adam {
  display: flex;
  align-items: flex-start;
  gap: 4rem;
  text-align: left;
}
body.page-about section.adam > .adam-portrait {
  width: 20rem;
  flex-shrink: 0;
  border: 1px solid rgba(201,169,110,0.15);
}
body.page-about section.adam > .adam-inner {
  margin: 0;
  flex: 1;
}
@media (max-width: 900px) {
  body.page-about section.adam {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  body.page-about section.adam > .adam-portrait {
    width: 17.5rem;
  }
}

/* Craft image break */
section.adam-craft {
  background: var(--black);
  padding: 0;
  text-align: center;
}
section.adam-craft > img {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  display: block;
  border-top: 1px solid rgba(201,169,110,0.1);
  border-bottom: 1px solid rgba(201,169,110,0.1);
}

/* ══════════════════════════════════════════════════════════
   Mastery page (body.page-mastery) — mastery-only
══════════════════════════════════════════════════════════ */
body.page-mastery section.services > ol {
  grid-template-columns: repeat(2, 1fr);
}
body.page-mastery section.services > ol > li > ul {
  margin-top: var(--space-xs);
  border-top: var(--border-gold);
  padding-top: var(--space-xs);
  width: 100%;
  text-align: left;
}
body.page-mastery section.services > ol > li > ul > li {
  font-size: 0.78rem;
  color: rgba(245,240,232,0.72);
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(201,169,110,0.08);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
body.page-mastery section.services > ol > li > ul > li::before {
  content: '—';
  color: var(--gold);
  opacity: 0.5;
  font-size: 0.7rem;
  flex-shrink: 0;
}
body.page-mastery section.services > ol > li > ul > li:last-child { border-bottom: none; }
@media (max-width: 768px) {
  body.page-mastery section.services > ol { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   About page (body.page-about) — about-only
══════════════════════════════════════════════════════════ */
body.page-about section.faq {
  background: var(--charcoal);
  padding: 5rem 2rem;
}
body.page-about section.faq > header { margin-bottom: 2rem; }
body.page-about section.faq > footer { margin-top: 0; padding-top: 2rem; }

/* ══════════════════════════════════════════════════════════
   Contact page (body.page-contact) — contact-only
══════════════════════════════════════════════════════════ */
body.page-contact section.adam > .adam-inner { max-width: 620px; }
section.adam .adam-inner > .btn {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-md);
}
section.adam .adam-inner > .contact-number {
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}
section.adam .adam-inner > .contact-number a {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 300;
  color: var(--gold-light);
  text-decoration: none;
  letter-spacing: 0.08em;
  transition: color 0.3s;
}
section.adam .adam-inner > .contact-number a:hover {
  color: var(--gold);
}
section.adam .adam-inner > .card-sub {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(245,240,232,0.75);
  margin-top: var(--space-lg);
}
section.adam .adam-inner > p:not(.contact-number) a {
  color: var(--gold-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,169,110,0.3);
  transition: border-color 0.3s;
}
section.adam .adam-inner > p:not(.contact-number) a:hover {
  border-color: var(--gold);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --space-md: 3rem;
    --space-lg: 4.5rem;
    --space-xl: 6rem;
  }
  /* px, not rem, and deliberately so. The mobile nav holds a fixed-width logo
     image and an icon button — no text that benefits from scaling — so in rem
     this padding only grew the bar for readers with a larger default text size,
     pushing the logo down while the hero header grew upward to meet it. At 150%
     text the gap between the logo and the hero eyebrow closed to 2px. These are
     the exact rem values at the default size, so nothing moves normally. */
  body > nav { padding: 16px 24px; min-height: 70px; }
  body > nav.scrolled { padding: 11px 24px; min-height: 60px; }
  body > nav > button { top: 16px; }
  body > nav.scrolled > button { top: 11px; }
  /* Same values for the open menu, so nothing shifts when it opens. */
  body > nav.nav-open > a,
  body > nav.nav-open > button { top: 16px; }
  body > nav.nav-open > a { left: 24px; }
  body > nav.nav-open.scrolled > a,
  body > nav.nav-open.scrolled > button { top: 11px; }
  section.intro { padding: 3rem 1.5rem; }
  section.services { padding: var(--space-lg) 1.5rem; }
  section.services > ol { grid-template-columns: 1fr; background: none; gap: 2px; }
  section.process { padding: var(--space-lg) 1.5rem; }
  section.process > ol { grid-template-columns: 1fr 1fr; gap: 2rem; }
  section.callout { padding: var(--space-lg) 1.5rem; }
  footer > nav { gap: var(--space-xs); }
  footer { padding: var(--space-md) 1.5rem var(--space-sm); }
}
@media (max-width: 480px) {
  section.process > ol { grid-template-columns: 1fr; }
  footer { padding: 3rem 1.5rem; }
  footer > address { flex-direction: column; gap: 0.8rem; }
  footer > address span { display: none; }
}

/* ── Testimonial ────────────────────────────────────────── */
section.testimonial {
  padding: var(--space-lg) 2rem;
  background: #0D0B07;
  border-top: var(--border-gold);
  border-bottom: var(--border-gold);
  text-align: center;
}
section.testimonial > svg {
  display: block;
  margin: 0 auto 1.5rem;
}
section.testimonial > blockquote {
  position: relative;
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 300;
  font-style: italic;
  color: var(--cream);
  opacity: 0.92;
  max-width: 800px;
  margin: 0 auto 2rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
}
section.testimonial > cite {
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
  font-style: normal;
  display: block;
}
section.testimonial > cite span {
  display: block;
  color: rgba(245,240,232,0.75);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  margin-top: 0.3rem;
}

/* ── FAQ ────────────────────────────────────────────────── */
section.faq {
  padding: var(--space-xl) 0 0;
  background: #0E0C08;
}
section.faq > header {
  text-align: center;
  margin-bottom: var(--space-lg);
  padding: 0 2rem;
}
section.faq > ol {
  max-width: var(--text-width);
  margin: 0 auto;
  border-top: var(--border-gold);
  padding: 0 2rem;
}
section.faq > ol > li { border-bottom: var(--border-gold); }

section.faq > ol > li > details > summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.6rem 0;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--warm-white);
  gap: 1rem;
  transition: color 0.3s;
}
section.faq > ol > li > details > summary::-webkit-details-marker { display: none; }
section.faq > ol > li > details > summary::marker { display: none; }
section.faq > ol > li > details > summary:hover { color: var(--gold); }
section.faq > ol > li > details[open] > summary { color: var(--gold); }

/* Plus/minus icon via pseudo */
section.faq > ol > li > details > summary::after {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  position: relative;
  background-image:
    linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold));
  background-size: 100% 1px, 1px 100%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.6;
  transition: opacity 0.3s, transform 0.35s;
}
section.faq > ol > li > details[open] > summary::after {
  background-size: 100% 1px, 1px 0%;
  opacity: 1;
}

section.faq > ol > li > details > p {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease, padding-bottom 0.45s ease;
  font-size: clamp(0.88rem, 1.3vw, 1rem);
  padding-bottom: 0;
}

section.faq > footer {
  padding: 4rem 2rem;
  margin-top: var(--space-lg);
  text-align: center;
  width: 100%;
}
section.faq > footer > p {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: rgba(245,240,232,0.4);
  margin-bottom: var(--space-xs);
}

/* ── Footer ─────────────────────────────────────────────── */
body > footer {
  background: var(--charcoal);
  border-top: 1px solid rgba(201,169,110,0.2);
  padding: 4rem;
  text-align: center;
}
body > footer > figure {
  /* max-width stops the fixed 12.5rem overflowing a narrow screen — at a larger
     default text size 12.5rem is 300px, wider than the content area on a small
     phone, which pushed the page into horizontal scroll. The image follows the
     figure rather than repeating the width, so the figure is the only source of
     truth (same pattern as the nav logo). */
  width: 12.5rem;
  max-width: 100%;
  margin: 0 auto 1rem;
}
body > footer > figure > img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.85;
}
body > footer > p {
  font-size: 0.55rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold-light);
  opacity: 0.5;
  margin-bottom: 3rem;
  font-style: normal;
  font-family: var(--font-sans);
}
/* Divider lines — rendered as <hr> elements */
body > footer > hr {
  width: 60px;
  height: 1px;
  border: none;
  background: linear-gradient(to right, transparent, rgba(201,169,110,0.4), transparent);
  margin: 0 auto 2rem;
}
body > footer > nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
body > footer > nav a {
  color: var(--warm-white);
  text-decoration: none;
  font-size: 0.70rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.75;
  transition: opacity 0.3s;
}
body > footer > nav a:hover,
body > footer > nav a.active { opacity: 1; color: var(--gold); }
body > footer > nav span { color: var(--gold); opacity: 0.25; font-size: 0.5rem; }
body > footer > address {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  font-style: normal;
}
/* The email address is a single unbreakable token — browsers do not break at
   "@" or ".", so on a narrow viewport it overflows and pushes the whole page
   into horizontal scroll. `anywhere` lets it wrap only when it genuinely cannot
   fit, so it is untouched at normal size (no change at all down to 272px).
   Covers every copy: nav, body copy and footer.
   Not `break-word` — that breaks the line but does not shrink min-content, so a
   shrink-to-fit ancestor stays sized to the unbroken token and the page still
   scrolls. Not global — applied to all text it breaks display headings mid-word.
   tel: deliberately excluded — the number already wraps at its spaces. */
a[href^="mailto:"] { overflow-wrap: anywhere; }

body > footer > address a {
  color: var(--gold-light);
  text-decoration: none;
  font-size: 0.77rem;
  letter-spacing: 0.15em;
  opacity: 0.72;
  transition: opacity 0.3s;
}
body > footer > address a:hover { opacity: 1; }
body > footer > address span { color: var(--gold); opacity: 0.25; }
body > footer > address a svg { display: block; }
body > footer > small {
  display: block;
  text-align: center;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--cream);
  opacity: 0.3;
  margin-top: 2rem;
}

/* ── Cocktails page ─────────────────────────────────────── */

/* `body.page-cocktails section.hero { min-height: 60vh }` was removed here.
   It never had any effect: section.hero set `height: 100svh`, which always won,
   and 60vh cannot exceed 100svh — so it could only ever be a floor below the
   height the hero already had. When the base rule became a min-height (so the
   hero could grow for readers with larger text), this override stopped being
   inert and started capping the hero at 60vh, collapsing it to 444px on a
   740px-tall phone. The hero now follows the shared rule, full viewport height
   as on every other page. */

section.cocktail-gallery {
  padding: 7rem 4rem;
  background: var(--black);
}
section.cocktail-gallery > ol {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  list-style: none;
}
section.cocktail-gallery > ol > li {
  position: relative;
  overflow: hidden;
  background: var(--off-black);
  border: 1px solid rgba(201,169,110,0.1);
  transition: border-color 0.4s ease;
}
section.cocktail-gallery > ol > li:hover {
  border-color: rgba(201,169,110,0.3);
}
section.cocktail-gallery figure {
  display: flex;
  flex-direction: column;
}
section.cocktail-gallery figure > img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background: var(--black);
}
section.cocktail-gallery figcaption {
  padding: 2rem 2.5rem 2.5rem;
}
section.cocktail-gallery figcaption > h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 300;
  color: var(--gold-light);
  margin-bottom: 0.6rem;
  letter-spacing: 0.04em;
}
section.cocktail-gallery figcaption > p {
  font-size: 0.78rem;
  line-height: 1.8;
  color: var(--cream);
  opacity: 0.8;
  letter-spacing: 0.03em;
}

/* CTA section */
body.page-cocktails section.cta {
  padding: 7rem 4rem;
  background: var(--charcoal);
  text-align: center;
}
body.page-cocktails section.cta header {
  max-width: 600px;
  margin: 0 auto;
}
body.page-cocktails section.cta h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
  color: var(--warm-white);
  margin-bottom: var(--space-sm);
}
body.page-cocktails section.cta h2 em {
  font-style: italic;
  color: var(--gold-light);
}
body.page-cocktails section.cta p {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--cream);
  opacity: 0.8;
  margin-bottom: var(--space-md);
  letter-spacing: 0.04em;
}

@media (max-width: 768px) {
  section.cocktail-gallery { padding: 4rem 1.5rem; }
  section.cocktail-gallery > ol { grid-template-columns: 1fr; gap: 1.5rem; }
  section.cocktail-teaser-section { padding: 4rem 1.5rem; }
  body.page-cocktails section.cta { padding: 4rem 1.5rem; }
}