/* ============================================================
   ACKLAM BLACK — shared design system
   Playfair Display (display serif) + Inter (body sans)
   Palette: Acklam Black / Palm Green / Golden Shimmer / Molasses Brick
   ============================================================ */

/* ---------- Typefaces ----------
   Self-hosted rather than loaded from Google Fonts: served from the same
   origin as everything else, so first paint no longer waits on two
   third-party round trips (fonts.googleapis.com for the CSS, then
   fonts.gstatic.com for the files).

   All three are the variable versions, so one file covers the whole weight
   range each design uses. The latin-ext faces carry their own unicode-range
   and are only fetched if a page actually needs those characters.

   Files live in /assets/fonts and are cached for a year (see netlify.toml);
   if a face is ever updated, rename the file so the new one is picked up. */

/* Inter — body, 400..700 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Playfair Display — headings, 400..700 upright and italic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/playfair-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/playfair-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/playfair-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/playfair-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Alex Brush — the hand-lettered accent on the Home hero only */
@font-face {
  font-family: 'Alex Brush';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/alexbrush-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alex Brush';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/alexbrush-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --acklam-black: #0d0c0a;
  --acklam-black-soft: #16140f;
  --palm-green: #383c22;
  --palm-green-deep: #2a2d19;
  --gold: #c6a077;
  --gold-light: #e3c9a3;
  --gold-dim: #8a6d4c;
  --brick: #a3402c;
  --brick-deep: #7c2f21;
  --cream: #ecdcce;
  --cream-soft: #f4e9de;
  --ink: #1c1712;

  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1240px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 140px;

  --ease: cubic-bezier(.16,.84,.44,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; font-size: 1rem; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.4rem, 4.2vw, 4.4rem); }
h2 { font-size: clamp(2rem, 3.2vw, 3.2rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
p { margin: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
}

/* Signature script accent — used sparingly for a hand-lettered brand moment */
.eyebrow-script {
  font-family: 'Alex Brush', cursive;
  font-size: clamp(2.2rem, 4vw, 3rem);
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 400;
  line-height: 1;
}

.italic { font-style: italic; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 34px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  min-height: 44px;
  transition: background-color 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease);
  background: transparent;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.btn-gold { color: var(--gold-light); border-color: var(--gold-dim); }
.btn-gold:hover { background: var(--gold-light); color: var(--acklam-black); border-color: var(--gold-light); }

.btn-dark { color: var(--ink); border-color: var(--ink); }
.btn-dark:hover { background: var(--ink); color: var(--cream); }

.btn-solid-gold { background: var(--gold); color: var(--acklam-black); border-color: var(--gold); }
.btn-solid-gold:hover { background: var(--gold-light); border-color: var(--gold-light); }

.btn-cream { color: var(--cream); border-color: rgba(236,220,206,0.55); }
.btn-cream:hover { background: var(--cream); color: var(--acklam-black); border-color: var(--cream); }

/* ---------- Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--acklam-black);
  border-bottom: 1px solid rgba(198,160,119,0.16);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}
.logo-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.logo {
  display: flex;
  align-items: center;
}
.logo img {
  height: 40px;
  width: auto;
  display: block;
}
.logo-divider {
  width: 1px;
  height: 26px;
  background: rgba(198,160,119,0.3);
  flex: none;
}
.hoa-crest-link {
  display: flex;
  align-items: center;
  transition: opacity 200ms var(--ease);
}
.hoa-crest-link:hover,
.hoa-crest-link:focus-visible { opacity: 0.72; }
.hoa-crest-link img {
  height: 36px;
  width: auto;
  display: block;
}
@media (max-width: 480px) {
  .logo img { height: 32px; }
  .hoa-crest-link img { height: 28px; }
  .logo-divider { height: 20px; }
}

/* House of Acklam wordmark lockup, used in place of a typeset heading
   wherever the exact brand artwork should appear */
.hoa-wordmark {
  max-width: 480px;
  width: 100%;
  height: auto;
  margin: 0 auto var(--space-3);
  display: block;
}
.hoa-wordmark-stacked { max-width: 320px; }
.cta-band .hoa-wordmark { margin-top: var(--space-1); }
.page-hero .hoa-wordmark { margin: var(--space-2) 0 var(--space-3); }

.brand-mark {
  max-width: 260px;
  width: 60%;
  height: auto;
  margin: 0 auto var(--space-3);
  display: block;
}
.nav-links {
  display: flex;
  gap: var(--space-4);
}
.nav-links a {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-soft);
  font-weight: 500;
  position: relative;
  padding: 4px 0;
  transition: color 200ms var(--ease);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--gold-light); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--cream);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after { display: none; }
.nav-toggle svg { width: 24px; height: 24px; }

@media (max-width: 860px) {
  .nav-links {
    position: fixed;
    inset: 66px 0 0 0;
    background: var(--acklam-black);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  }
  .nav-links.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav-toggle { display: flex; }
}

/* ---------- Shimmer / mood backgrounds (CSS-crafted photography substitute) ---------- */
.shimmer {
  position: relative;
  background: var(--acklam-black);
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
}
.shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(65% 55% at 78% 18%, rgba(198,160,119,0.55) 0%, rgba(198,160,119,0) 60%),
    radial-gradient(50% 45% at 12% 82%, rgba(163,64,44,0.4) 0%, rgba(163,64,44,0) 60%),
    radial-gradient(80% 70% at 50% 100%, rgba(56,60,34,0.55) 0%, rgba(56,60,34,0) 65%),
    linear-gradient(180deg, #0d0c0a 0%, #14120d 100%);
}
.shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
.shimmer-warm::before {
  background:
    radial-gradient(60% 60% at 22% 25%, rgba(227,201,163,0.5) 0%, rgba(227,201,163,0) 60%),
    radial-gradient(55% 55% at 85% 75%, rgba(163,64,44,0.38) 0%, rgba(163,64,44,0) 60%),
    linear-gradient(180deg, #17130e 0%, #0d0c0a 100%);
}
.shimmer-deep::before {
  /* glow kept off-center (top-right / bottom-left corners) so it never sits
     directly behind centered headline text and reduce contrast */
  background:
    radial-gradient(45% 40% at 88% 6%, rgba(198,160,119,0.22) 0%, rgba(198,160,119,0) 60%),
    radial-gradient(55% 55% at 10% 96%, rgba(56,60,34,0.55) 0%, rgba(56,60,34,0) 60%),
    linear-gradient(180deg, #0d0c0a 0%, #100e0a 100%);
}

.glass-glow {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 65% 30%, rgba(227,201,163,0.85) 0%, rgba(198,160,119,0.4) 35%, rgba(13,12,10,0.95) 72%),
    radial-gradient(40% 40% at 25% 75%, rgba(163,64,44,0.5) 0%, rgba(163,64,44,0) 60%),
    #0d0c0a;
  isolation: isolate;
}
.glass-glow::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.55;
}
.glass-glow .glow-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-3);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--cream-soft);
  font-size: 0.95rem;
  background: linear-gradient(0deg, rgba(0,0,0,0.55), transparent);
}
.glass-glow .seal {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 76px;
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}

.vinyl {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(227,201,163,0.16) 0 2px, rgba(0,0,0,0) 2px 5px),
    conic-gradient(from 90deg, #100e0a, #221b12, #0d0c0a, #2a2117, #0d0c0a);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.7), 0 20px 50px rgba(0,0,0,0.35);
}
.vinyl::before {
  content: '';
  position: absolute; inset: 0; margin: auto;
  width: 32%; height: 32%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-light), var(--brick) 70%, var(--brick-deep));
}
.vinyl::after {
  content: '';
  position: absolute; inset: 0; margin: auto;
  width: 6%; height: 6%;
  border-radius: 50%;
  background: var(--acklam-black);
}

.bokeh-strip {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #d9b98c 0%, #c6a077 25%, #a3402c 55%, #16140f 100%);
}
.bokeh-strip::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(80px 80px at 15% 30%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(120px 120px at 70% 60%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(60px 60px at 85% 20%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(100px 100px at 40% 80%, rgba(255,255,255,0.25), transparent 60%);
  filter: blur(2px);
  mix-blend-mode: overlay;
}

/* ---------- Photography support ----------
   Layers a real photo beneath the existing gradient/grain treatment. The
   gradient becomes a translucent scrim (instead of fully opaque) so the
   photo shows through while text stays legible on top of it. */
.has-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.has-photo::before {
  background:
    radial-gradient(65% 55% at 78% 18%, rgba(198,160,119,0.3) 0%, rgba(198,160,119,0) 60%),
    radial-gradient(50% 45% at 12% 82%, rgba(163,64,44,0.24) 0%, rgba(163,64,44,0) 60%),
    linear-gradient(180deg, rgba(13,12,10,0.5) 0%, rgba(13,12,10,0.8) 100%);
}
.has-photo.shimmer-warm::before {
  background:
    radial-gradient(60% 60% at 22% 25%, rgba(227,201,163,0.26) 0%, rgba(227,201,163,0) 60%),
    linear-gradient(180deg, rgba(23,19,14,0.48) 0%, rgba(13,12,10,0.82) 100%);
}
.has-photo.shimmer-deep::before {
  background:
    radial-gradient(45% 40% at 88% 6%, rgba(198,160,119,0.16) 0%, rgba(198,160,119,0) 60%),
    linear-gradient(180deg, rgba(13,12,10,0.5) 0%, rgba(16,14,10,0.82) 100%);
}
.glass-glow.has-photo { background-color: #0d0c0a; }
.glass-glow.has-photo::after { opacity: 0.22; }

/* Hero photography as a real <img> instead of a CSS background image.
   A background-image is invisible to the browser's preload scanner — the
   fetch cannot start until CSS has been parsed and that element's style
   resolved — and it can carry neither fetchpriority nor srcset. As an <img>
   in the markup it is discovered immediately, the hero photo can be given
   priority, and the browser picks a width to suit the viewport.

   Sits underneath the .shimmer gradient wash (::before at -2) and the noise
   overlay (::after at -1); .shimmer's `isolation: isolate` keeps all three
   contained within the section. */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
}

/* ---------- Photography for the glass panels ----------
   These sit well below the fold, so they stay CSS backgrounds — the preload
   scanner being unable to see them costs nothing down here, and keeping them
   as backgrounds avoids disturbing the gradient/noise layering inside
   .glass-glow.

   What they were missing is a size appropriate to the viewport: each photo
   used to be served at full resolution to every device. A background image
   cannot carry srcset, so the breakpoints below do the same job, matching
   how the panels are actually laid out:
     .split-visual   — 100vw in one column, 50vw from 861px up
     .product-shot   — the container width in one column, roughly half of it
                       (~550px) in two columns from 861px up
   Widths are capped by each source file's own resolution. Serve via the
   Netlify Image CDN so the format is negotiated per browser too. */
.visual-story,
.visual-serve,
.visual-lounge,
.visual-product { background-image: none; }

@media (max-width: 560px) {
  .visual-story   { background-image: url('/.netlify/images?url=/assets/img/photo-story-skyline.jpg&w=560'); }
  .visual-serve   { background-image: url('/.netlify/images?url=/assets/img/photo-pour-serve.jpg&w=560'); }
  .visual-lounge  { background-image: url('/.netlify/images?url=/assets/img/photo-bar-interior.jpg&w=560'); }
  .visual-product { background-image: url('/.netlify/images?url=/assets/img/photo-bottle-hero.jpg&w=560'); }
}

@media (min-width: 561px) and (max-width: 860px) {
  .visual-story   { background-image: url('/.netlify/images?url=/assets/img/photo-story-skyline.jpg&w=860'); }
  .visual-serve   { background-image: url('/.netlify/images?url=/assets/img/photo-pour-serve.jpg&w=860'); }
  .visual-lounge  { background-image: url('/.netlify/images?url=/assets/img/photo-bar-interior.jpg&w=860'); }
  .visual-product { background-image: url('/.netlify/images?url=/assets/img/photo-bottle-hero.jpg&w=860'); }
}

@media (min-width: 861px) {
  .visual-story   { background-image: url('/.netlify/images?url=/assets/img/photo-story-skyline.jpg&w=1000'); }
  .visual-serve   { background-image: url('/.netlify/images?url=/assets/img/photo-pour-serve.jpg&w=1000'); }
  .visual-lounge  { background-image: url('/.netlify/images?url=/assets/img/photo-bar-interior.jpg&w=1000'); }
  .visual-product { background-image: url('/.netlify/images?url=/assets/img/photo-bottle-hero.jpg&w=900'); }
}

/* Product hero shot (Buy Now): closer to the source photo's own aspect
   ratio so the full bottle-and-glass composition shows without a heavy
   crop, instead of forcing the site's default 4:5 mood-shot ratio. */
.glass-glow.product-shot { aspect-ratio: 1400 / 1257; }

/* Circular photographic vinyl (real image in place of the CSS-drawn disc) */
.vinyl-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.55), 0 20px 50px rgba(0,0,0,0.35);
}
.vinyl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vinyl-photo::after {
  content: '';
  position: absolute; inset: 0; margin: auto;
  width: 8%; height: 8%;
  border-radius: 50%;
  background: var(--acklam-black);
  box-shadow: 0 0 0 3px rgba(236,220,206,0.15);
}

/* Collaboration / card thumbnail photography */
.collab-thumb img,
.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Layout blocks ---------- */
.section { padding: var(--space-6) 0; }
.section-tight { padding: var(--space-5) 0; }

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: var(--space-6) 0;
}
.hero-inner { text-align: center; max-width: 880px; margin: 0 auto; }
.hero .eyebrow { display: block; margin-bottom: var(--space-2); }
.hero h1 { color: var(--cream-soft); margin-bottom: var(--space-3); }
.hero-sub { color: rgba(236,220,206,0.72); max-width: 560px; margin: 0 auto var(--space-4); font-size: 1.02rem; }

.page-hero {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  padding: var(--space-6) 0 var(--space-5);
}
.page-hero .eyebrow { margin-bottom: var(--space-2); display: block; }
.page-hero h1 { color: var(--cream-soft); max-width: 720px; }
.page-hero p { color: rgba(236,220,206,0.72); max-width: 560px; margin-top: var(--space-2); }

/* split panels: image + copy card, matches deck's Our Story / Perfect Serve layout */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px;
}
.split-copy {
  background: var(--cream-soft);
  display: flex;
  align-items: center;
  padding: var(--space-6) var(--space-5);
}
.split-copy .panel { max-width: 460px; }
.split-copy .eyebrow { display: block; margin-bottom: var(--space-2); }
.split-copy h2 { margin-bottom: var(--space-3); color: var(--ink); }
.split-copy p { color: #4a4038; margin-bottom: var(--space-4); }
.split-visual { position: relative; }
.split.reverse { grid-template-columns: 1fr 1fr; }
.split.reverse .split-copy { order: 2; }
.split.reverse .split-visual { order: 1; }

@media (max-width: 860px) {
  /* min-width: 0 overrides the browser's default "min-width: auto" on grid
     items, which otherwise refuses to shrink a track below its content's
     natural size and forces the whole grid wider than the viewport. */
  .split, .split.reverse { grid-template-columns: 1fr; min-height: auto; }
  .split-copy, .split-visual { min-width: 0; }
  .split-copy { padding: var(--space-5) var(--space-3); order: 2 !important; }
  .split-copy .panel { max-width: 100%; }
  .split-visual { order: 1 !important; aspect-ratio: 4/3; }
}

.cta-band {
  padding: var(--space-6) 0;
  text-align: center;
}
.cta-band .eyebrow { display: block; margin-bottom: var(--space-2); }
.cta-band h2 { color: var(--cream-soft); margin-bottom: var(--space-2); }
.cta-band .lounge-loc { color: var(--gold-dim); letter-spacing: 0.2em; font-size: 0.78rem; margin-bottom: var(--space-3); display: block; }
.cta-band p { color: rgba(236,220,206,0.72); max-width: 520px; margin: 0 auto var(--space-4); }

/* ---------- Cards ---------- */
.grid {
  display: grid;
  gap: var(--space-3);
}
.grid > * { min-width: 0; } /* prevent grid-track blowout past the viewport */
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

.card {
  background: var(--cream-soft);
  border: 1px solid rgba(28,23,18,0.08);
  border-radius: 6px;
  padding: var(--space-4);
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px rgba(28,23,18,0.1); }
.tag {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  background: var(--brick);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: var(--space-2);
}
.card h3 { margin-bottom: var(--space-1); }
.card p { color: #5a4f45; font-size: 0.94rem; }

.dark-card {
  background: var(--acklam-black-soft);
  border: 1px solid rgba(198,160,119,0.18);
  border-radius: 6px;
  padding: var(--space-4);
  color: var(--cream-soft);
}
.dark-card .tag { background: var(--palm-green); }
.dark-card p { color: rgba(236,220,206,0.7); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--palm-green-deep);
  color: var(--cream-soft);
  padding: var(--space-6) 0 var(--space-4);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr auto;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(236,220,206,0.14);
}
.footer-top > * { min-width: 0; }
.footer-top h3 { font-family: var(--font-display); font-style: italic; color: var(--gold-light); margin-bottom: var(--space-2); font-size: 1.4rem; }
.footer-top p { color: rgba(236,220,206,0.65); margin-bottom: var(--space-3); font-size: 0.92rem; }
.signup-form { display: flex; gap: 10px; max-width: 380px; flex-wrap: wrap; }
.signup-form input {
  flex: 1 1 160px;
  min-width: 0;
  background: rgba(236,220,206,0.08);
  border: 1px solid rgba(236,220,206,0.28);
  border-radius: 999px;
  padding: 12px 18px;
  color: var(--cream);
  min-height: 44px;
}
.signup-form input::placeholder { color: rgba(236,220,206,0.5); }
.signup-form input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.crest {
  display: flex;
  align-items: center;
  justify-content: center;
}
.crest img { width: 96px; height: auto; display: block; }

.footer-links h4, .footer-social h4 {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: var(--space-2);
}
.footer-links ul { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 0.92rem; color: rgba(236,220,206,0.82); transition: color 200ms var(--ease); }
.footer-links a:hover { color: var(--gold-light); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  font-size: 0.8rem;
  color: rgba(236,220,206,0.55);
  flex-wrap: wrap;
  gap: var(--space-2);
}
.social-icons {
  display: flex;
  align-items: center;
  gap: 12px;
}
.social-icon {
  width: 40px; height: 40px;
  border: 1px solid rgba(236,220,206,0.3);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.social-icon:hover { background: var(--gold); border-color: var(--gold); color: var(--acklam-black); }
.social-icon svg { width: 18px; height: 18px; }

.footer-responsible {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-3);
  font-size: 0.8rem;
  color: rgba(236,220,206,0.55);
}
.footer-responsible-text { flex: 1 1 320px; min-width: 0; }
/* The Drinkaware logo is shown in its approved white version, unaltered —
   only its size and the link focus ring are ours. */
.drinkaware-logo { display: inline-block; flex: 0 0 auto; line-height: 0; transition: opacity 200ms var(--ease); }
.drinkaware-logo img { display: block; width: 176px; height: auto; }
.drinkaware-logo:hover { opacity: 0.8; }
.drinkaware-logo:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.footer-responsible p + p { margin-top: 6px; }
.footer-responsible a {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 200ms var(--ease);
}
.footer-responsible a:hover { color: var(--cream); }

@media (max-width: 1080px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr; text-align: left; gap: var(--space-4); }
  .crest { justify-content: flex-start; }
}

/* ---------- Age gate ---------- */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--acklam-black);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}
.age-gate[hidden] { display: none; }
.age-gate-panel {
  text-align: center;
  max-width: 420px;
  color: var(--cream-soft);
}
.age-gate-panel .logo-mark-img { width: 96px; height: auto; margin: 0 auto var(--space-3); display: block; }
.age-gate-panel h2 { font-size: 1.7rem; margin-bottom: var(--space-2); color: var(--cream-soft); }
.age-gate-panel p { color: rgba(236,220,206,0.65); margin-bottom: var(--space-4); font-size: 0.92rem; }
.age-gate-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.age-gate-fine { margin-top: var(--space-4); font-size: 0.72rem; color: rgba(236,220,206,0.6); }
.age-gate-fine a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.age-gate-fine a:hover { color: var(--cream); }
body.gate-locked { overflow: hidden; }

/* ---------- Forms (contact / lounge) ---------- */
.form-grid { display: grid; gap: var(--space-3); max-width: 560px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dim); font-weight: 600; }
.field input, .field textarea {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(28,23,18,0.18);
  border-radius: 4px;
  padding: 13px 16px;
  color: var(--ink);
  min-height: 44px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--brick); outline-offset: 1px; }
.form-note { font-size: 0.82rem; color: #6b5f53; }
.form-success {
  display: none;
  background: var(--palm-green);
  color: var(--cream-soft);
  padding: var(--space-3);
  border-radius: 6px;
  margin-top: var(--space-3);
}
.form-success.is-visible { display: block; }
.form-error {
  display: none;
  background: var(--brick-deep);
  color: var(--cream-soft);
  padding: var(--space-3);
  border-radius: 6px;
  margin-top: var(--space-3);
}
.form-error.is-visible { display: block; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.contact-grid > * { min-width: 0; }
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ---------- Product (Buy Now) ---------- */
/* Sits inline with the "Perfect Serve" button; collapses to nothing
   until the real Shopify Buy Button snippet renders inside it. */
.shopify-buy-button-slot { display: inline-flex; align-items: center; }
.shopify-buy-button-slot:empty { display: none; }
/* Room for the quantity stepper beside the 220px button; the Shopify
   iframe fills its node's width. */
.shopify-buy-button-slot > div { width: 380px; max-width: 100%; }

.product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
.product-layout > * { min-width: 0; }
@media (max-width: 860px) { .product-layout { grid-template-columns: 1fr; gap: var(--space-4); } }
.price { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); margin: var(--space-2) 0 var(--space-3); }
.stat-row { display: flex; gap: var(--space-4); margin: var(--space-4) 0; flex-wrap: wrap; }
.stat-row div { min-width: 110px; }
.stat-row .num { font-family: var(--font-display); font-size: 1.5rem; color: var(--brick); display: block; }
.stat-row .label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #6b5f53; }

/* ---------- Reveal-on-scroll ----------
   Progressive enhancement: content is fully visible by default so it never
   depends on JavaScript running. Only once the tiny head script has confirmed
   JS is active (html.js) do reveal elements start hidden, ready to animate in. */
.reveal { transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
html.js .reveal { opacity: 0; transform: translateY(24px); }
html.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--acklam-black);
  padding: 10px 16px; z-index: 1000; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Home page: gold typography ----------
   On the home page the headline and body copy over the dark bands are set in
   the brand golds rather than off-white, so all of the page's type sits in the
   same palette as the gold eyebrows and buttons. Headings take the lighter
   gold, supporting copy the base gold, keeping the hierarchy readable. */
.page-home main .hero h1,
.page-home main .cta-band h2,
.page-home main .glass-glow .glow-caption { color: var(--gold-light); }
.page-home main .hero-sub,
.page-home main .cta-band p { color: var(--gold); }