/* ═══════════════════════════════════════════════════════════════════
   HIDDEN BOTTLE COLLECTIVE — Main Stylesheet  V2.3
   ═══════════════════════════════════════════════════════════════════

   HOW TO EDIT:
   — All colours and fonts are set once in the :root section below.
   — To change a colour site-wide, edit it once here.
   — Section spacing is controlled by --pad variables.
   — Comments throughout explain what each block does.

   TABLE OF CONTENTS:
   01. Variables
   02. Reset & Base
   03. Typography
   04. Layout Utilities
   05. Navigation
   06. Age Gate
   07. Hero — Split (Homepage) + Inner Pages
   08. Illustrations
   09. Six-Bottle Typographic Motif
   10. Sections & Content Blocks
   11. Step Process
   12. Model Table
   13. Cards
   14. Editorial CTA Section
   15. Reveal Page
   16. Forms & Buttons
   17. Footer
   18. Utilities
   19. Responsive (mobile)
   ═══════════════════════════════════════════════════════════════════ */


/* ─── 01. Variables ─────────────────────────────────────────────── */
:root {
  /* Brand Colours */
  --wine:    #6B1A2A;   /* Wine Red — primary accent, CTAs */
  --gold:    #8B6C2A;   /* Aged Brass — labels, rules, step numbers */
  --dark:    #1C1C1C;   /* Schist Charcoal — primary text, headings */
  --muted:   #7A6E6E;   /* Muted Stone — body text, subtitles */
  --line:    #DDD5CB;   /* Divider / border colour */
  --pale:    #FAF6F1;   /* Cellar Parchment — page background */
  --pale2:   #EDE4D8;   /* Deeper parchment — reveal pre-state, tinted sections */
  --white:   #FFFFFF;

  /* Typography */
  --serif:   'Cormorant Garamond', Georgia, serif;
  --sans:    'Lato', system-ui, -apple-system, sans-serif;

  /* Layout */
  --max-w:   1080px;
  --text-w:  680px;

  /* Spacing */
  --pad:     5rem;      /* Standard section padding */
  --pad-sm:  2.5rem;    /* Compact section padding */
}


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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--pale);
  color: var(--dark);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

ul, ol { list-style: none; }

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}


/* ─── 03. Typography ────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.15;
  color: var(--dark);
}

h1 { font-size: clamp(2.6rem, 5.5vw, 4.5rem); }
h2 { font-size: clamp(1.9rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
h4 { font-size: 1.2rem; font-weight: 400; }

p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--muted);
}

p + p { margin-top: 1rem; }

p strong { color: var(--dark); font-weight: 700; }

/* Small uppercase label — appears above section headings */
.label {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}

/* Pull quote — Cormorant italic with Wine Red left rule */
.pull-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 300;
  color: var(--wine);
  line-height: 1.4;
  border-left: 2px solid var(--wine);
  padding-left: 1.5rem;
  margin: 2rem 0;
}

/* Single-line centred pull quote — no border, used as section divider */
.pull-quote--centred {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  font-weight: 300;
  color: var(--wine);
  text-align: center;
  border-left: none;
  padding: 0;
  margin: 0 auto;
  max-width: 540px;
}


/* ─── 04. Layout Utilities ──────────────────────────────────────── */

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
}

.container--narrow {
  max-width: var(--text-w);
  margin: 0 auto;
  padding: 0 2rem;
}

.section        { padding: var(--pad) 0; }
.section--sm    { padding: var(--pad-sm) 0; }

.section--tinted {
  background-color: var(--pale2);
  padding: var(--pad) 0;
}

/* Thin full-width divider */
.rule {
  width: 100%;
  height: 1px;
  background: var(--line);
  border: none;
  margin: 0;
}

/* Short gold accent rule — used beneath headings */
.rule--gold {
  width: 60px;
  height: 1px;
  background: var(--gold);
  border: none;
  margin: 1.25rem 0;
}

.rule--gold--center {
  margin: 1.25rem auto;
}

.text-center { text-align: center; }

/* Two and three column grids */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}


/* ─── 05. Navigation ────────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--pale);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.2s ease;
}

.nav.scrolled {
  box-shadow: 0 2px 20px rgba(28, 28, 28, 0.06);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.nav__logo {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--dark);
  white-space: nowrap;
  flex-shrink: 0;
}

.nav__logo:hover { color: var(--wine); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__links a {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--muted);
  transition: color 0.2s ease;
}

.nav__links a:hover,
.nav__links a.active { color: var(--dark); }

.nav__cta {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--white) !important;
  background: var(--wine);
  padding: 0.55rem 1.2rem;
  transition: background 0.2s ease !important;
}

.nav__cta:hover {
  background: #5a1524 !important;
  color: var(--white) !important;
}

/* Mobile hamburger */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav__toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--dark);
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.nav__toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle.open span:nth-child(2) { opacity: 0; }
.nav__toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }


/* ─── 06. Age Gate ──────────────────────────────────────────────── */

.age-gate {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(28, 28, 28, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.age-gate.hidden { display: none; }

/*
  V3.0 — "Enter the cellar" welcome. Parchment card with a thin Wine Red
  keyline, the wrapped-bottle lockup above the wordmark eyebrow, serif
  heading. A quiet cellar-door greeting, not a warning page.
  IDs, .hidden behaviour and confirmAge() wiring are unchanged (js/main.js).
*/
.age-gate__box {
  background: var(--pale);
  max-width: 440px;
  width: 100%;
  padding: 2.75rem 2.5rem 2.5rem;
  text-align: center;
  border: 1px solid var(--line);
  border-top: 2px solid var(--wine);
}

.age-gate__box h2  { font-size: clamp(1.6rem, 4.5vw, 2rem); margin: 0.5rem 0 1rem; }
.age-gate__box p   { font-size: 0.9rem; margin-bottom: 2rem; }

/* Wrapped-bottle mark — the wine context reads before any text.
   vh-capped so the card never pushes the buttons below the fold. */
.age-gate__lockup {
  max-height: min(120px, 16vh);
  width: auto;
  margin: 0 auto 1.25rem;
  opacity: 0.85;
}

.age-gate__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Keyboard focus — visible ring for tab users inside the gate */
.age-gate .btn:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 3px;
}

.age-gate__legal {
  font-size: 0.72rem !important;
  color: var(--muted) !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0 !important;
  line-height: 1.5;
}


/* ─── 06b. Homepage Intro Reveal ────────────────────────────────── */

/*
  THE QUIET REVEAL — homepage opening moment (index.html only)
  ─────────────────────────────────────────────────────────────
  A full-screen warm-parchment overlay: wrapped bottle, wordmark,
  one line, "Tap to reveal". One tap and it dissolves calmly into
  the homepage. Silent by design — no sound belongs here.

  HOW IT WORKS
  · Hidden by default (display: none) — no-JS visitors never see it.
  · The inline head script on index.html adds .hbc-intro-active to
    <html> before first paint (once per session) — that displays it.
  · On tap, JS adds .intro-reveal--leaving → overlay + content fade
    and drift gently apart → JS removes .hbc-intro-active when done.
  · z-index 900: below the age gate (999), above the nav (100).
  · prefers-reduced-motion: all movement removed, simple instant fade.
*/

.intro-reveal {
  display: none;                       /* JS-only — see head script */
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--pale2);            /* warm deep parchment — same as reveal pre-state */
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
  cursor: pointer;
  /* The calm exit — a slow, even fade. No bounce, no theatrics. */
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.9s;
}

.hbc-intro-active .intro-reveal { display: flex; }

/* Lock page scroll while the intro is up */
.hbc-intro-active body { overflow: hidden; }

/* Exit state — overlay fades, inner content lifts softly (an "unwrap" gesture) */
.intro-reveal--leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-reveal__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 460px;
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.7s ease;
}

.intro-reveal--leaving .intro-reveal__inner {
  transform: translateY(-14px);
  opacity: 0;
}

/* Wrapped bottle — the HBC tag mark. First brand impression after the age
   gate, so it carries real presence without dominating. Tall portrait art,
   vh-capped so it never crowds the wordmark on shorter screens. */
.intro-reveal__bottle {
  max-height: min(500px, 58vh);
  width: auto;
  opacity: 0.96;
  margin-bottom: 2.25rem;
}

.intro-reveal__wordmark {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 5vw, 2.4rem);
  font-weight: 300;
  color: var(--dark);
  line-height: 1.2;
}

.intro-reveal__rule {
  border: none;
  border-top: 1px solid rgba(107, 26, 42, 0.20);
  width: 64px;
  margin: 1.1rem auto 1rem;
}

.intro-reveal__line {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.02rem, 3vw, 1.2rem);
  font-weight: 300;
  /* One step darker than --muted for clear mobile readability on the deep
     parchment intro background, while staying visually secondary to the
     charcoal wordmark. Scoped to this line only. */
  color: #5B4F4C;
  max-width: 340px;
}

/* "Tap to reveal" — quiet, tracked, with a slow breathing pulse */
.intro-reveal__hint {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wine);
  margin-top: 2.25rem;
  padding: 0.75rem 1.5rem;             /* generous tap target */
  border: 1px solid rgba(107, 26, 42, 0.28);
  animation: introHintBreathe 3.2s ease-in-out infinite;
}

@keyframes introHintBreathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Keyboard focus — visible ring for tab users */
.intro-reveal:focus-visible {
  outline: none;
}

.intro-reveal:focus-visible .intro-reveal__hint {
  outline: 2px solid var(--wine);
  outline-offset: 3px;
}

/*
  Reduced motion — the intro still works, but nothing moves.
  Fade becomes near-instant, hint stops pulsing, content doesn't drift.
*/
@media (prefers-reduced-motion: reduce) {
  .intro-reveal,
  .intro-reveal__inner { transition-duration: 0.01s; }
  .intro-reveal--leaving .intro-reveal__inner { transform: none; }
  .intro-reveal__hint { animation: none; opacity: 0.9; }
}


/* ─── 07. Hero ──────────────────────────────────────────────────── */

/* ── Homepage hero — split layout (text left, bottle right) */
.hero--home {
  background-color: var(--pale);
  padding-top: calc(68px + 5rem);
  padding-bottom: 5rem;
  border-bottom: 1px solid var(--line);
}

.hero__split {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 5rem;
  align-items: center;
}

.hero__label {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
}

.hero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.8rem, 5.5vw, 4.4rem);
  color: var(--dark);
  line-height: 1.08;
  margin-bottom: 1.5rem;
}

.hero__title em { font-style: italic; }

.hero__sub {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 480px;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

.hero__meta {
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin-top: 1.25rem;
  opacity: 0.7;
}

/* Hero CTA row — primary + secondary side by side, stacked on mobile */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Quiet producer path link inside the hero meta line */
.hero__producer-link {
  color: var(--wine);
  font-weight: 700;
}

.hero__producer-link:hover { color: #5a1524; }

/*
  Hero visual column — currently unused pending real packaging photography.
  When images/packaging-cream.jpg is available, restore .hero__split grid
  (grid-template-columns: 1fr 300px) and place the photo in .hero__visual.
  For now, hero runs as a single text column via .hero__text--solo.
*/
.hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Single-column hero — constrains text width when no visual column is present */
.hero__text--solo {
  max-width: 640px;
}

/* ── Inner page hero — compact parchment heading block */
.hero--inner {
  background-color: var(--pale);
  padding-top: calc(68px + 3.5rem);
  padding-bottom: 3.5rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.hero--inner .hero__title {
  color: var(--dark);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  margin-bottom: 1rem;
}

.hero--inner .hero__sub {
  color: var(--muted);
  max-width: 560px;
  margin-bottom: 0;
}


/* ─── 08. Illustrations ─────────────────────────────────────────── */

/*
  HBC illustration system — reserved for approved brand assets.
  The SVG line drawings created in V2/V2.1 have been removed from all primary placements
  in V2.2 pending the arrival of real HBC photography and the official HBC badge mark.

  In V2.3 the approved HBC brand lockup (images/hbc-brand-lockup.png) is now live.
  The .brand-lockup-- modifier classes handle all primary placements.
  The .illus system remains in place for any future supplementary assets.

  When images/packaging-cream.jpg is available:
    → restore hero__visual split on index.html alongside the brand lockup
*/

.illus {
  display: block;
  width: auto;
  height: auto;
}

/* Size variants */
.illus--xl  { max-height: 320px; }   /* Hero / reveal pre-state */
.illus--lg  { max-height: 220px; }   /* Section feature */
.illus--md  { max-height: 140px; }   /* Step / card illustration */
.illus--sm  { max-height: 80px; }    /* Footer / inline accent */

/* Opacity variants */
.illus--full    { opacity: 1; }
.illus--medium  { opacity: 0.55; }
.illus--subtle  { opacity: 0.18; }   /* Background / watermark use */
.illus--ghost   { opacity: 0.08; }   /* Very faint decorative use */

/* Centre an illustration within its container */
.illus--centred { margin: 0 auto; }

/* Pair: bottle + corkscrew side by side as a divider motif */
.illus-pair {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3rem;
  padding: var(--pad-sm) 0;
}

.illus-pair .illus { max-height: 100px; }
.illus-pair .illus--cork { max-height: 80px; }


/* ─── 08b. HBC Brand Lockup ─────────────────────────────────────── */

/*
  Approved transparent brand assets — Wine Red (#6B1A2A) line art on transparent background.

  images/hbc-bottle-tag.webp  (+ .png fallback / social)
  The definitive HBC brand mark: the wrapped bottle with the HBC hanging tag.
  Represents Hidden Bottle Collective itself — concealment, the shipment, anticipation,
  the reveal ritual. Tall portrait art (~466×1000).
  Used: homepage intro reveal (hero), homepage hero visual, how-it-works feature bottle,
        reveal-page pre-reveal, all footers.
  Replaced the retired grape lockup (winebottle-hbc-brand-lockup.png) in this pass.
  NB: numbered-bottle art (bottle-01..06.webp) is kept ONLY where it appears as a
      1–6 line-up explaining the tasting/release system (founding-members). The confirmed
      18+ age-gate mark (agegate-bottle-18plus.webp) is used on every age gate.

  images/corkscrew-hbc-brand-lockup.png
  Represents: opening, reveal, discovery, the winery story, the moment after tasting.
  Used: how-it-works section divider, producers page divider before reveal section,
        reveal page post-reveal (above winery story).

  Modifier classes control size and context. Footers use
  filter: brightness(0) invert(1) to render as white/cream ghost on dark background.
*/

/* Base: no dimensions set here — use modifier classes */
.brand-lockup {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Homepage hero — primary placement. Transparent bg sits cleanly on parchment. */
.brand-lockup--hero {
  max-height: 380px;
  width: auto;
  opacity: 0.90;
}

/* How It Works section divider — centred, editorial */
.brand-lockup--divider {
  max-height: 180px;
  width: auto;
  margin: 0 auto;
  opacity: 0.70;
}

/* Reveal page pre-reveal — the physical bottle is the visual hero.
   Size and all transition properties live here. JS adds .dissolving to .reveal-pre
   to trigger the dissolution cascade. Do not add inline styles on this element. */
.brand-lockup--reveal {
  /* vh-capped (V2.9) so the bottle can never push the reveal button
     below the fold — it scales down with shorter screens */
  max-height: min(300px, 32vh);
  width: auto;
  margin: 0 auto 1.5rem;
  opacity: 0.90;
  transition: opacity 1s cubic-bezier(0.4, 0, 0.15, 1),
              transform 1s cubic-bezier(0.4, 0, 0.15, 1),
              filter 1s cubic-bezier(0.4, 0, 0.15, 1);
  will-change: opacity, transform, filter;
}

/* Footer — quiet mark on dark background.
   filter: brightness(0) invert(1) converts wine red marks to white/cream.
   opacity then dials it back to a ghost. No parchment rectangle — clean. */
.brand-lockup--footer {
  max-height: 88px;              /* tall portrait art — a touch more height keeps proportion */
  width: auto;
  margin-top: 1.25rem;
  opacity: 0.22;
  filter: brightness(0) invert(1);
}

/* Accent — small contextual placement.
   Used for individual bottle or corkscrew marks within page sections.
   Sits naturally on parchment without competing with text. */
.brand-lockup--accent {
  max-height: 90px;
  width: auto;
  margin: 0 auto 1.5rem;
  opacity: 0.65;
  display: block;
}


/* ─── 10. Sections & Content Blocks ────────────────────────────── */

.section-intro { max-width: var(--text-w); margin-bottom: 3.5rem; }
.section-intro h2 { margin-bottom: 1rem; }
.section-intro p  { font-size: 1.05rem; }

.section-intro--center {
  max-width: var(--text-w);
  margin: 0 auto 3.5rem;
  text-align: center;
}

/* Two-column content pair */
.content-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.content-pair--wide {
  grid-template-columns: 2fr 3fr;
}

/* Stacked content blocks with dividers */
.content-stack > * + * {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

/* Em-dash list (not a bullet) */
.not-list { list-style: none; padding: 0; }

.not-list li {
  font-size: 0.95rem;
  color: var(--muted);
  padding: 0.7rem 0 0.7rem 1.25rem;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.not-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--line);
}

/* Benefit list with gold em-dash */
.benefit-list { list-style: none; padding: 0; }

.benefit-list li {
  font-size: 0.95rem;
  color: var(--dark);
  padding: 0.65rem 0 0.65rem 1.25rem;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.benefit-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gold);
}

.benefit-list li:first-child { border-top: 1px solid var(--line); }


/* ─── 11. Step Process ──────────────────────────────────────────── */

/* Three-column preview (Homepage + How It Works intro) */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-top: 3rem;
}

.step { padding-top: 1.5rem; border-top: 1px solid var(--line); }

.step__num {
  font-family: var(--serif);
  font-size: 3.5rem;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.75rem;
  opacity: 0.65;
}

.step__title {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--dark);
  margin-bottom: 0.75rem;
}

.step__body { font-size: 0.95rem; color: var(--muted); line-height: 1.7; }

/* Full detailed steps (How It Works page) */
.steps--detailed { grid-template-columns: 1fr; gap: 0; margin-top: 0; }

.step--detailed {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 2rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--line);
}

.step--detailed .step__num { font-size: 2.8rem; margin-bottom: 0; padding-top: 0.2rem; }
.step--detailed .step__title { font-size: 1.5rem; margin-bottom: 0.5rem; }


/* ─── 12. Model Table ───────────────────────────────────────────── */

.model-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }

.model-table tr { border-bottom: 1px solid var(--line); }
.model-table tr:first-child { border-top: 1px solid var(--line); }

.model-table td { padding: 0.9rem 0; font-size: 0.95rem; vertical-align: top; }

.model-table td:first-child {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  width: 36%;
  padding-right: 2rem;
}

.model-table td:last-child { color: var(--dark); }

.model-table tr:nth-child(even) td { background: rgba(221, 213, 203, 0.15); }


/* ─── 13. Cards ─────────────────────────────────────────────────── */

.card { padding: 2rem; border: 1px solid var(--line); background: var(--white); }
.card h3 { font-size: 1.4rem; margin-bottom: 0.75rem; }
.card p  { font-size: 0.95rem; }
.card + .card { margin-top: 1rem; }

/*
  Price block — founding-members.html hero.
  Answers "what does it cost?" immediately, without shouting.
  A quiet framed card: label → price → what's included → the free/no-payment
  reassurance. "Planned price" wording until pricing + licensing are final.
*/
.price-block {
  display: inline-flex;
  flex-direction: column;
  gap: 0.35rem;
  border: 1px solid rgba(107, 26, 42, 0.25);
  background: var(--white);
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 18px rgba(28, 28, 28, 0.05);
}

.price-block__label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.price-block__price {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 400;
  color: var(--wine);
  line-height: 1.2;
}

.price-block__meta {
  font-size: 0.8rem;
  color: var(--dark);
  letter-spacing: 0.04em;
}

.price-block__note {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 380px;
  margin-top: 0.35rem;
}

/*
  Why-lines — short italic HBC statements stacked as a quiet centrepiece
  (founding-members.html "Why Blind?" section).
*/
.why-lines {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.why-lines p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2.5vw, 1.35rem);
  font-weight: 300;
  color: var(--wine);
  line-height: 1.4;
}

/*
  Path cards — "Choose your path" section on the homepage.
  Two premium cards: For Customers / For Wineries. Compact signposts,
  not brochures — title, two lines, three steps, one CTA.
*/
.path-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.path-card {
  display: flex;
  flex-direction: column;
  padding: 2.5rem 2.25rem;
  border: 1px solid var(--line);
  background: var(--white);
}

.path-card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.path-card__copy {
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Three numbered steps — serif gold numerals, hairline dividers */
.path-card__steps {
  list-style: none;
  counter-reset: pathstep;
  margin: 1.5rem 0 2rem;
}

.path-card__steps li {
  counter-increment: pathstep;
  font-size: 0.9rem;
  color: var(--dark);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
}

.path-card__steps li:first-child { border-top: 1px solid var(--line); }

.path-card__steps li::before {
  content: counter(pathstep, decimal-leading-zero);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--gold);
  opacity: 0.8;
}

/* CTA pinned to the card base so both cards align */
.path-card__cta { margin-top: auto; }

/* FAQ items */
.faq-item { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item__q { font-family: var(--sans); font-weight: 700; font-size: 0.95rem; color: var(--dark); margin-bottom: 0.5rem; }
.faq-item__a { font-size: 0.95rem; color: var(--muted); }


/* ─── 14. Editorial CTA Section ─────────────────────────────────── */

/*
  Replaces the old Wine Red CTA block on the homepage.
  Keeps parchment as the dominant background while drawing the eye
  with an illustration accent and restrained typography.
*/
.section--editorial {
  background: var(--pale);
  padding: var(--pad) 0;
  border-top: 1px solid var(--line);
  text-align: center;
}

.section--editorial h2 {
  margin-bottom: 0.75rem;
}

.section--editorial p {
  max-width: 440px;
  margin: 0 auto 2rem;
  font-size: 1rem;
}

/* Keep the wine CTA block for pages that still need it (inner pages) */
.section--wine {
  background-color: var(--wine);
  color: var(--white);
  padding: var(--pad) 0;
}

.section--wine h1,
.section--wine h2,
.section--wine h3,
.section--wine h4 { color: var(--white); }

.section--wine p { color: rgba(250, 246, 241, 0.8); }
.section--wine .label { color: var(--line); }


/* ─── 15. Reveal Page ───────────────────────────────────────────── */

/*
  The reveal page is a standalone experience accessed via QR code.
  It has two visual states:

  PRE-REVEAL: Warm deep parchment (#EDE4D8). The wrapped bottle illustration
  is the hero. The numbered tag card centres the page. Quiet, anticipatory.
  Feels like holding a beautifully wrapped bottle.

  POST-REVEAL: Standard cellar parchment (#FAF6F1). Winery content cascades
  in element by element. The corkscrew appears as a subtle accent.
  Transition: a gentle warmth shift and a staggered fade-up cascade.
*/

.reveal-page {
  min-height: 100vh;
  padding-top: 68px;
  background-color: var(--pale2);   /* Warm deep parchment — pre-reveal state */
  transition: background-color 1s ease;
  display: flex;
  flex-direction: column;
}

.reveal-page.revealed {
  background-color: var(--pale);    /* Standard parchment — post-reveal */
}

/* ── Pre-reveal state
   Padding kept deliberately light (V2.9): the full composition —
   badge, bottle, sealed card, "Ready for the reveal?", and the
   "Reveal the wine" button — must land inside the FIRST viewport
   on ordinary phones. No scrolling to reach the reveal action. */
.reveal-pre {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 2rem 3rem;
  transition: opacity 0.5s ease;
}

.reveal-page.revealed .reveal-pre {
  opacity: 0;
  pointer-events: none;
  position: absolute;      /* remove from flow once revealed */
  top: -9999px;
}

/*
  .reveal-bottle — superseded in V2.3.
  The reveal page pre-reveal state now uses .brand-lockup--reveal above the tag card.
*/
.reveal-bottle {
  width: 110px;
  height: auto;
  margin: 0 auto 2rem;
  opacity: 0.9;
}

/*
  Numbered tag card — inspired by the physical HBC bottle tag.
  Borrows proportions, typography, breathing room, and restraint.
  Does not literally reproduce the tag — shares its design language.

  The thread element (.reveal-tag-thread) sits above this card in HTML,
  referencing the twine that attaches the physical tag to the bow.
*/

.reveal-tag-thread {
  width: 1px;
  height: 22px;
  background: rgba(107, 26, 42, 0.18);
  margin: 0 auto;
}

.reveal-tag-card {
  display: inline-block;
  border: 1px solid rgba(107, 26, 42, 0.18);
  background: rgba(250, 246, 241, 0.88);
  padding: 0.9rem 2.4rem 2.2rem;   /* Less top (eyelet takes space), generous bottom */
  margin-bottom: 2.5rem;
  min-width: 120px;                 /* Narrower — portrait proportions like the physical tag */
  text-align: center;
  box-shadow: 0 2px 18px rgba(28, 28, 28, 0.07);
}

/* Eyelet hole at top of tag — references the physical tag's punched hole */
.reveal-tag-card::before {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(107, 26, 42, 0.20);
  margin: 0.5rem auto 1.6rem;
}

.reveal-tag-num {
  display: block;
  font-family: var(--serif);
  font-size: 5.5rem;
  font-weight: 300;
  color: var(--dark);
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.reveal-tag-rule {
  border: none;
  border-top: 1px solid rgba(107, 26, 42, 0.15);
  margin: 1.1rem 0 0.9rem;
}

.reveal-tag-label {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Heading and sub in pre-reveal — dark text on warm parchment */
.reveal-pre h2 {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  font-weight: 300;
  color: var(--dark);
  margin-bottom: 0.6rem;
}

.reveal-pre > p {
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 300px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
}

/* ── Post-reveal state — content fades in with cascade */
.reveal-post {
  opacity: 0;
  pointer-events: none;
  padding: 4rem 2rem 5rem;
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}

.reveal-page.revealed .reveal-post {
  opacity: 1;
  pointer-events: auto;
}

/* Cascade animation — each post-reveal element fades up in sequence */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal-page.revealed .reveal-post__num {
  animation: fadeUp 0.45s ease 0.40s both;
}

.reveal-page.revealed .reveal-post__eyebrow {
  animation: fadeUp 0.5s ease 0.56s both;
}

.reveal-page.revealed .reveal-post__winery {
  animation: fadeUp 0.55s ease 0.72s both;
}

.reveal-page.revealed .reveal-post__sub {
  animation: fadeUp 0.5s ease 0.88s both;
}

.reveal-page.revealed .reveal-post__lead {
  animation: fadeUp 0.5s ease 1.00s both;
}

.reveal-page.revealed .reveal-content {
  animation: fadeUp 0.6s ease 1.16s both;
}

/* Post-reveal typography */
.reveal-post__eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: 0.4rem;
}

.reveal-post__winery {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 300;
  color: var(--dark);
  margin-bottom: 0.25rem;
  line-height: 1.1;
}

.reveal-post__sub {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
  letter-spacing: 0.04em;
}

/* Post-reveal lead line — "Now meet the producer, place and story..."
   Bridges the reveal moment into the content below. */
.reveal-post__lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--wine);
  margin-bottom: 3rem;
}

/* Two-column reveal content layout */
.reveal-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--line);
}

.tasting-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--wine);
  line-height: 1.5;
  padding: 1.5rem 0;
}

.reveal-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}

.reveal-detail-row:first-child { border-top: 1px solid var(--line); }

.reveal-detail-row dt {
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

.reveal-detail-row dd { color: var(--dark); margin: 0; text-align: right; }

.reveal-body-text p { font-size: 1rem; color: var(--muted); line-height: 1.8; margin-bottom: 1rem; }

/* Mailchimp inline error — appears below submit button on form errors */
.mc-error {
  font-size: 0.83rem;
  color: var(--wine);
  margin-top: 0.75rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(107, 26, 42, 0.22);
  background: rgba(107, 26, 42, 0.04);
  line-height: 1.55;
}

/* Demo badge — remove on real reveal pages */
.demo-badge {
  display: inline-block;
  background: rgba(139, 108, 42, 0.1);
  border: 1px solid rgba(139, 108, 42, 0.28);
  color: var(--gold);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  margin-bottom: 2rem;
}

/* Reveal nav — parchment-appropriate (works on both warm and standard parchment) */
.nav--reveal {
  background: rgba(250, 246, 241, 0.88);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--line);
}

.nav--reveal .nav__logo { color: var(--muted); font-size: 0.9rem; }
.nav--reveal .nav__logo:hover { color: var(--dark); }

/*
  Tag-hero pre-reveal composition — V2.5
  Mirrors the physical HBC bottle tag: large serif numeral → fine rule → tagline → colophon.
  The number is the primary visual element, same as the front of the tag the member holds.

  Hierarchy:
    .reveal-tag-hero        — centred column container
    .reveal-tag-num--hero   — huge wine-red numeral (the hero)
    .reveal-tag-rule--hero  — fine horizontal rule (mirrors the tag's divider)
    .reveal-tag-tagline     — "Taste first. Reveal when ready." in tracked uppercase
    .reveal-tag-colophon    — "Hidden Bottle Collective · 2026" — quiet base label
*/

.reveal-tag-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 260px;   /* tighter — number is now an identifier, not the hero */
  margin: 0 auto;
}

/*
  Bottle number — reads as an identifier/label, not the visual centrepiece.
  The bottle image above is the hero. This confirms which bottle you are holding.
*/
.reveal-tag-num--hero {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5vw, 3.6rem);   /* was clamp(8rem, 22vw, 13rem) */
  font-weight: 300;
  color: var(--wine);
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
}

.reveal-tag-rule--hero {
  border: none;
  border-top: 1px solid rgba(107, 26, 42, 0.20);
  width: 100%;
  margin: 1rem 0 0.9rem;
}

/* "TASTE FIRST. REVEAL WHEN READY." — tracked uppercase, mirrors the physical tag */
.reveal-tag-tagline {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wine);
}

/* "Hidden Bottle Collective · 2026" — quiet colophon at the base of the composition */
.reveal-tag-colophon {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-top: 1.5rem;
}

/*
  ─── Sealed-card reveal (V2.8) ──────────────────────────────────────
  The ripple/water animation was removed — the reveal is now a quiet
  "sealed card opening": like opening a private cellar note or a
  wax-sealed tasting card. Nothing liquid, nothing dramatic.

  THE SEQUENCE
  1. Tap "Reveal the wine" → unlock-door sound (JS, user tap only)
  2. JS adds .unsealing to .reveal-seal-card
     → the seal mark's shackle swings open, then the mark fades
  3. JS adds .dissolving to #revealPre a beat later (the opening cascade
     below) → hint fades → button fades → bottle drifts up → the sealed
     card lifts ~16px and fades, as if set aside
  4. .revealed on #revealPage → wine details cascade in underneath

  prefers-reduced-motion: all movement is removed at the bottom of this
  stylesheet — the reveal becomes a simple, near-instant fade.
*/

/* The sealed card — fine border, parchment panel, quiet shadow */
.reveal-seal-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(107, 26, 42, 0.22);
  background: rgba(250, 246, 241, 0.92);
  padding: 1.5rem 2.5rem 1.9rem;
  box-shadow: 0 2px 20px rgba(28, 28, 28, 0.07);
  margin-bottom: 2.25rem;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.15s,
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.15s,
              border-color 0.6s ease;
  will-change: opacity, transform;
}

/* Seal mark — small line-drawn seal at the head of the card */
.seal-mark {
  color: var(--wine);
  opacity: 0.55;
  margin-bottom: 1.1rem;
  transition: opacity 0.45s ease 0.12s;
}

/* Shackle — hinges from its right foot so it can swing open */
.seal-mark__shackle {
  transform-origin: 16px 10.5px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
  .unsealing — added by JS at tap time, before the card dissolves.
  The shackle swings open a few degrees (a soft lock opening — no
  dramatic door swing), then the whole mark fades. Border softens.
*/
.reveal-seal-card.unsealing .seal-mark__shackle {
  transform: rotate(-24deg) translateY(-1px);
}

.reveal-seal-card.unsealing .seal-mark {
  opacity: 0;
}

.reveal-seal-card.unsealing {
  border-color: rgba(107, 26, 42, 0.08);
}

/* "Ready for the reveal?" — blind-tasting language above the button */
.reveal-ready-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 3vw, 1.3rem);
  font-weight: 300;
  color: var(--dark);
  margin-bottom: 1.75rem;
}

/*
  ─── Opening cascade ────────────────────────────────────────────────
  JS adds .dissolving to #revealPre when "Reveal the wine" is tapped.
  Each pre-reveal element departs in a gentle sequence — the mystery
  is set aside element by element before the wine details arrive.
*/

/* Bottle — opacity + soft upward drift + slight blur */
.reveal-pre.dissolving .brand-lockup--reveal {
  opacity: 0;
  transform: scale(0.975) translateY(-10px);
  filter: blur(2px);
  /* transition defined on .brand-lockup--reveal: 1s cubic-bezier(0.4, 0, 0.15, 1) */
}

/* Sealed card — lifts gently (~16px) and fades, as if set aside.
   The 0.15s delay lets the seal-mark opening register first. */
.reveal-pre.dissolving .reveal-seal-card {
  opacity: 0;
  transform: translateY(-16px);
}

/* "Ready for the reveal?" line — fades with the button */
.reveal-pre.dissolving .reveal-ready-line {
  opacity: 0;
  transition: opacity 0.5s ease 0.08s;
}

/* Reveal button — fades early, its job is done */
.reveal-pre.dissolving #revealBtn {
  opacity: 0;
  transition: opacity 0.5s ease 0.08s;
}

/* Instruction text — fades first (smallest, least important) */
.reveal-pre.dissolving .reveal-pre__hint {
  opacity: 0;
  transition: opacity 0.35s ease 0s;
}

/*
  Post-reveal bottle number — tag number DNA carried into the revealed state.
  Same wine-red serif numeral as pre-reveal, at a smaller scale.
  Confirms the bottle identity before the winery name arrives.
  Animates in first in the post-reveal cascade.
*/
.reveal-post__num {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 300;
  color: var(--wine);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.15rem;
}


/* ─── 16. Forms & Buttons ───────────────────────────────────────── */

/* Buttons — no rounded corners, letter-spaced uppercase */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
  cursor: pointer;
  border: 1px solid currentColor;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  text-align: center;
}

.btn--primary {
  background: var(--wine);
  color: var(--white);
  border-color: var(--wine);
}

.btn--primary:hover {
  background: #5a1524;
  border-color: #5a1524;
  color: var(--white);
}

.btn--outline {
  background: transparent;
  color: var(--dark);
  border-color: var(--dark);
}

.btn--outline:hover {
  background: var(--dark);
  color: var(--white);
}

.btn--outline-wine {
  background: transparent;
  color: var(--wine);
  border-color: var(--wine);
}

.btn--outline-wine:hover {
  background: var(--wine);
  color: var(--white);
}

.btn--outline-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.5);
}

.btn--outline-light:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--white);
  color: var(--white);
}

.btn--text {
  background: transparent;
  color: var(--muted);
  border-color: transparent;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
}

.btn--text:hover { color: var(--dark); background: transparent; }

.btn--large { padding: 1.1rem 2.5rem; font-size: 0.8rem; }

/* Form elements */
.form-group { margin-bottom: 1.25rem; }

.form-group label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--dark);
  background: var(--white);
  border: 1px solid var(--line);
  outline: none;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
  border-radius: 0;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--gold); }

.form-group textarea { min-height: 120px; resize: vertical; }

.checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.checkbox-group input[type="checkbox"] {
  width: 16px; height: 16px;
  flex-shrink: 0;
  margin-top: 0.2rem;
  border: 1px solid var(--line);
  cursor: pointer;
}

.checkbox-group label { font-size: 0.9rem; color: var(--muted); line-height: 1.5; }

/* Form success state */
.form-success {
  display: none;
  text-align: center;
  padding: 2.5rem;
  border: 1px solid var(--line);
  background: var(--white);
}

.form-success.visible { display: block; }
.form-success h3 { font-size: 1.6rem; margin-bottom: 0.75rem; color: var(--gold); }

/* Arrow link */
.link-arrow {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--wine);
  letter-spacing: 0.06em;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.link-arrow:hover { border-bottom-color: var(--wine); }
.link-arrow::after { content: ' →'; }


/* ─── 17. Footer ────────────────────────────────────────────────── */

.footer {
  background-color: var(--dark);
  color: rgba(250, 246, 241, 0.5);
  padding: 3.5rem 0 2.5rem;
}

.footer__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer__brand {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 300;
  color: rgba(250, 246, 241, 0.85);
  margin-bottom: 0.75rem;
}

.footer__tagline { font-size: 0.85rem; line-height: 1.65; color: rgba(250, 246, 241, 0.45); }

/*
  Footer brand mark — V2.3: using .brand-lockup--footer on all 5 footer instances.
  The .footer__illus class below is retained for any future supplementary assets.
*/
.footer__illus {
  margin-top: 1.5rem;
  opacity: 0.2;
  filter: brightness(0) invert(1);
}

.footer__col-title {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(221, 213, 203, 0.5);
  margin-bottom: 1rem;
}

.footer__links { display: flex; flex-direction: column; gap: 0.5rem; }
.footer__links a { font-size: 0.875rem; color: rgba(250, 246, 241, 0.5); transition: color 0.2s ease; }
.footer__links a:hover { color: rgba(250, 246, 241, 0.9); }

.footer__bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(221, 213, 203, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer__legal { font-size: 0.75rem; color: rgba(250, 246, 241, 0.3); line-height: 1.6; }


/* ─── 18. Utilities ─────────────────────────────────────────────── */

.spacer--sm { display: block; height: 2rem; }
.spacer--md { display: block; height: 3.5rem; }
.spacer--lg { display: block; height: 5rem; }

.text-gold  { color: var(--gold); }
.text-wine  { color: var(--wine); }
.text-muted { color: var(--muted); }

.max-text { max-width: var(--text-w); }

/* Anchor targets (#register, #producer-enquiry, #paths, etc.) —
   offset for the fixed 68px nav so headings aren't hidden behind it */
[id] { scroll-margin-top: 84px; }


/* ─── 19. Responsive ─────────────────────────────────────────────── */

@media (max-width: 900px) {
  :root { --pad: 3.5rem; --pad-sm: 2rem; }

  /* Show hamburger, stack nav links */
  .nav__toggle { display: flex; }

  .nav__links {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: absolute;
    top: 68px; left: 0; right: 0;
    background: var(--pale);
    border-bottom: 1px solid var(--line);
    padding: 1rem 2rem 1.5rem;
  }

  .nav__links.open { display: flex; }
  .nav__links li   { width: 100%; }

  .nav__links a {
    display: block;
    padding: 0.65rem 0;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--line);
  }

  .nav__cta {
    margin-top: 0.5rem;
    padding: 0.65rem 0 !important;
    background: transparent !important;
    color: var(--wine) !important;
    border: none;
    font-size: 0.9rem !important;
    border-bottom: 1px solid var(--line) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  /* Collapse all multi-column layouts */
  .grid-2,
  .grid-3,
  .steps,
  .content-pair,
  .content-pair--wide,
  .footer__inner,
  .reveal-content,
  .path-cards,
  .hero__split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Hide bottle illustration on small hero (text takes priority) */
  .hero__visual { display: none; }

  .step--detailed {
    grid-template-columns: 60px 1fr;
    gap: 1.25rem;
  }

  .hero--home {
    padding-top: calc(68px + 3rem);
    padding-bottom: 3rem;
  }

  .hero--inner {
    padding-top: calc(68px + 2rem);
    padding-bottom: 2rem;
  }

  .age-gate__box { padding: 2rem 1.5rem; }
  .age-gate__lockup { max-height: min(90px, 13vh); }

  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .illus-pair { gap: 1.5rem; }

  .reveal-bottle { width: 80px; }

  /* Brand lockup responsive adjustments */
  .brand-lockup--hero    { max-height: 220px; }
  .brand-lockup--divider { max-height: 120px; }
  .brand-lockup--reveal  { max-height: min(220px, 26vh); }

  /* Tag-hero numeral — stays proportional to bottle on tablet */
  .reveal-tag-num--hero { font-size: clamp(2.2rem, 4.5vw, 3rem); }
}

@media (max-width: 540px) {
  :root { --pad: 2.5rem; }

  .container, .container--narrow { padding: 0 1.25rem; }

  .hero__title { font-size: 2.6rem; }

  .btn--large { width: 100%; text-align: center; }

  .brand-lockup--hero    { max-height: 160px; }
  .brand-lockup--divider { max-height: 90px; }
  .brand-lockup--reveal  { max-height: min(160px, 19vh); }

  /* Tag-hero numeral — compact on mobile */
  .reveal-tag-num--hero { font-size: clamp(2rem, 7vw, 2.6rem); }

  /* Intro reveal — tighter bottle so wordmark + hint always fit above the fold */
  .intro-reveal__bottle { max-height: min(320px, 42vh); margin-bottom: 1.75rem; }

  /* Sealed card + reveal rhythm — compact on small phones so
     bottle + card + "Ready for the reveal?" + button all fit in
     the first viewport. No scrolling to reach the reveal action. */
  .reveal-pre { padding: 1.5rem 1.25rem 2.5rem; }
  .reveal-seal-card { padding: 1.15rem 1.75rem 1.4rem; margin-bottom: 1.25rem; }
  .reveal-ready-line { margin-bottom: 1.25rem; }
  .seal-mark { margin-bottom: 0.85rem; }

  .path-card { padding: 2rem 1.5rem; }
}


/* ─── 19b. Short screens — reveal button in the first viewport ──── */

/*
  Height-based query (V2.9) so it also catches compact phones like the
  iPhone SE (667px tall) and 812px-class iPhones once browser chrome is
  subtracted. Tightens the pre-reveal composition so the bottle, sealed
  card, "Ready for the reveal?" line, and the "Reveal the wine" button
  ALL land in the first viewport — no scrolling to reach the reveal.
  Only reveal-page elements are touched; the rest of the site ignores this.
*/
@media (max-height: 740px) {
  .reveal-pre { padding-top: 1.25rem; padding-bottom: 2rem; }

  .brand-lockup--reveal {
    max-height: min(130px, 17vh);
    margin-bottom: 1rem;
  }

  .reveal-seal-card {
    padding: 1rem 1.75rem 1.25rem;
    margin-bottom: 1rem;
  }

  .seal-mark { margin-bottom: 0.75rem; }

  .reveal-tag-num--hero { font-size: 2rem; }

  .reveal-tag-colophon { margin-top: 1rem; }

  .reveal-ready-line { margin-bottom: 1rem; }

  /* Demo badge — trims its inline spacing on short screens */
  .demo-badge { margin-bottom: 0.75rem !important; }
}


/* ─── 20. Reduced Motion (site-wide) ────────────────────────────── */

/*
  Respect prefers-reduced-motion everywhere:
  · smooth scrolling off
  · reveal-page cascade and dissolution become instant fades
  (The homepage intro has its own reduced-motion rules in section 06b.)
*/
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal-page,
  .reveal-pre,
  .brand-lockup--reveal,
  .reveal-seal-card,
  .seal-mark,
  .seal-mark__shackle,
  .reveal-pre.dissolving .reveal-ready-line,
  .reveal-pre.dissolving #revealBtn,
  .reveal-pre.dissolving .reveal-pre__hint {
    transition-duration: 0.01s !important;
    transition-delay: 0s !important;
  }

  /* No movement — the sealed-card reveal becomes a simple fade */
  .reveal-pre.dissolving .brand-lockup--reveal { transform: none; filter: none; }
  .reveal-pre.dissolving .reveal-seal-card     { transform: none; }
  .reveal-seal-card.unsealing .seal-mark__shackle { transform: none; }

  .reveal-page.revealed .reveal-post__num,
  .reveal-page.revealed .reveal-post__eyebrow,
  .reveal-page.revealed .reveal-post__winery,
  .reveal-page.revealed .reveal-post__sub,
  .reveal-page.revealed .reveal-post__lead,
  .reveal-page.revealed .reveal-content {
    animation-duration: 0.01s !important;
    animation-delay: 0s !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   NUMBERED WRAPPED-BOTTLE IMAGERY  (V4.0 visual refinement, 2026-08-03)
   ───────────────────────────────────────────────────────────────────
   ADDITIVE ONLY. New classes; no existing selector modified or removed.
   Assets: images/bottle-01..06.webp — transparent engravings that sit
   cleanly on parchment (--pale) and tinted (--pale2) sections.
   Used on: index hero (reuses .brand-lockup--hero), how-it-works
   (.hbc-bottle-feature) and founding-members (.bottle-lineup).
   ═══════════════════════════════════════════════════════════════════ */

/* Single feature bottle within a page section */
.hbc-bottle-feature {
  max-height: 340px;
  width: auto;
  margin: 0 auto;
  display: block;
}

/* The six numbered bottles presented as one considered lineup */
.bottle-lineup {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(0.75rem, 2.5vw, 2rem);
  margin: 0 auto;
  max-width: 1000px;
}
.bottle-lineup img {
  height: 220px;
  width: auto;
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  .bottle-lineup img { height: 168px; }
}
@media (max-width: 540px) {
  .bottle-lineup img { height: 122px; }   /* wraps neatly to 3 + 3 */
  .hbc-bottle-feature { max-height: 240px; }
}

/* How It Works — the six numbered bottles as a deliberate 3 + 3 composition.
   Bespoke to this page (distinct from the founding-members single-row
   .bottle-lineup): two centred rows of three, generous spacing, tags kept
   legible. A fixed 3-column grid guarantees the 3 + 3 rhythm at EVERY width,
   so mobile keeps the intended composition rather than reflowing. */
.ht-six-bottles {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;      /* centres the whole group in the container */
  justify-items: center;        /* centres each bottle within its column */
  align-items: end;             /* bottles share a baseline despite width variance */
  column-gap: clamp(1.75rem, 5vw, 3.5rem);
  row-gap: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 860px;
  margin: 0 auto;
}
.ht-six-bottles img {
  height: 250px;
  width: auto;
  flex: 0 0 auto;
}
.ht-six-bottles__note {
  max-width: 32rem;
  margin: 2.75rem auto 0;
  color: var(--muted);
}

@media (max-width: 900px) {
  .ht-six-bottles { column-gap: clamp(1.25rem, 4vw, 2.25rem); }
  .ht-six-bottles img { height: 196px; }
}
@media (max-width: 540px) {
  /* Stays 3 + 3; bottles kept large enough that each numbered tag reads */
  .ht-six-bottles { column-gap: 0.9rem; row-gap: 1.4rem; }
  .ht-six-bottles img { height: 140px; }
  .ht-six-bottles__note { margin-top: 2rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   AGE-GATE 18+ BOTTLE — public-site only  (V4.1, 2026-08-03)
   ───────────────────────────────────────────────────────────────────
   Scoped modifier so the 18+ bottle reads as the main visual anchor on
   the PUBLIC website age gate, WITHOUT touching the shared
   .age-gate__lockup rule used by the live tasting/reveal platform.
   Applied only to pages using images/agegate-bottle-18plus.webp.
   vh caps keep the full dialog on-screen (no clipped buttons) on short
   laptops and small phones. Additive only — no existing selector changed.
   ═══════════════════════════════════════════════════════════════════ */
.age-gate__lockup--18plus {
  max-height: min(215px, 26vh);   /* ~+45% vs the 120px base */
  margin-bottom: 1.75rem;         /* more breathing room above the wordmark */
  opacity: 0.92;
}
@media (max-width: 768px) {
  .age-gate__lockup--18plus { max-height: min(190px, 24vh); }
}
@media (max-width: 540px) {
  .age-gate__lockup--18plus { max-height: min(165px, 22vh); margin-bottom: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   CORKSCREW SECTION DIVIDER — trimmed asset, scoped  (V4.2, 2026-08-03)
   ───────────────────────────────────────────────────────────────────
   Uses images/corkscrew-hbc-divider.webp (approved artwork, transparent
   padding removed — engraving unchanged). Scoped so the shared
   .brand-lockup--divider rule (and the small footer/accent corkscrews)
   stay as they are. Sized per placement, not one global rule.
   ═══════════════════════════════════════════════════════════════════ */
.hbc-corkscrew {
  display: block;
  width: auto;
  height: 260px;      /* primary divider (How It Works) */
  margin: 0 auto;
  opacity: 0.9;
}
.hbc-corkscrew--sm { height: 230px; opacity: 0.85; }  /* secondary divider (For Producers) */
@media (max-width: 900px) {
  .hbc-corkscrew    { height: 200px; }
  .hbc-corkscrew--sm { height: 178px; }
}
@media (max-width: 540px) {
  .hbc-corkscrew    { height: 150px; }
  .hbc-corkscrew--sm { height: 135px; }
}