/* ====================================================
   Wines of Israel — v2 "Cinematic Magazine"
   Bone-dominant warm light. Onyx as cinematic moment.
   Wine as refined italic accent. Type-quiet, photo-loud
   in the Airbnb tradition; Apple restraint in spacing;
   Runway gravity in the video moments.
   ==================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* warm bone palette */
  --bone:        #F5EFE2;   /* dominant background */
  --bone-2:      #EBE3D0;   /* recessed panel / image placeholder */
  --bone-3:      #FBF7EC;   /* lifted card */
  --bone-edge:   #E7DFC8;   /* rule between bone surfaces */

  /* ink — never pure black, Airbnb principle */
  --ink:         #1A1410;
  --ink-mid:     #5C4E3F;
  --ink-mute:    #9B8A74;

  /* refined wine accent — used scarcely, only in italic + 1px rules + wax */
  --vinous:      #5A0E1F;
  --vinous-2:    #7A1A2C;

  /* gold — small caps numerals, fine rules, wax highlights */
  --gold:        #B8965A;
  --gold-soft:   #D4B97A;

  /* selective onyx — single dramatic close section */
  --onyx:        #14110E;
  --onyx-2:      #1F1B17;
  --on-onyx:     #F5F0E6;
  --on-onyx-mid: #8B8278;

  /* rules */
  --rule:        rgba(26,20,16,0.10);
  --rule-soft:   rgba(26,20,16,0.06);
  --rule-strong: rgba(26,20,16,0.22);

  /* type */
  --sans:  'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;

  /* rhythm */
  --max:         1320px;
  --gutter:      7vw;
  --section-y:   clamp(40px, 5vw, 72px);
  --head-gap:    clamp(28px, 3.4vw, 52px);

  /* motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-ms:   700ms;
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--vinous); color: var(--bone-3); }

/* italic is ALWAYS serif vinous — the single typographic ornament */
em, i {
  font-style: italic;
  font-family: var(--serif);
  font-weight: 500;
  color: var(--vinous);
}

/* ---------- 3. Type system (Apple ratios, Airbnb restraint) ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink-mid);
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--gold);
}
.eyebrow.is-center { display: inline-flex; }
.eyebrow.no-rule::before { display: none; }
.eyebrow-num {
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}

.lede {
  font-family: var(--sans);
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-mid);
  max-width: 56ch;
  margin: 0;
}

.display-xl {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(56px, 9vw, 152px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.display-l {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(40px, 5.2vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.display-m {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
}
.display-s {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}

.meta-row {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.meta-row .dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--gold);
}

/* ---------- 4. Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  background: var(--bone);
}
.section-head {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 760px;
  margin: 0 auto var(--head-gap);
  text-align: center;
  align-items: center;
}
.section-head.is-left {
  text-align: left;
  align-items: flex-start;
  margin-left: 0; margin-right: auto;
}
.section-head .eyebrow { align-self: center; }
.section-head.is-left .eyebrow { align-self: flex-start; }

/* gentle reveal — single principle, no stagger conga line */
.reveal-up {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--reveal-ms) var(--ease-out),
    transform var(--reveal-ms) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
  will-change: opacity, transform;
}
.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 5. Nav — floating pill, restrained ---------- */
.nav {
  position: fixed;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: min(calc(100vw - 32px), 1080px);
  transition: top 400ms var(--ease-out);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 18px 12px 24px;
  border-radius: 9999px;
  background: rgba(245,239,226,0.55);
  backdrop-filter: blur(20px) saturate(110%);
  -webkit-backdrop-filter: blur(20px) saturate(110%);
  border: 1px solid rgba(26,20,16,0.06);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
  transition: background 400ms var(--ease-out), border-color 400ms var(--ease-out);
}
.nav-scrolled .nav-inner {
  background: rgba(245,239,226,0.82);
  border-color: rgba(26,20,16,0.10);
}
.nav-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
}
.nav-mark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--vinous);
}
.nav-name {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  padding: 0; margin: 0;
}
.nav-links a {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-mid);
  transition: color 200ms var(--ease-out);
}
.nav-links a:hover { color: var(--vinous); }
.nav-cta {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  padding: 9px 18px;
  border-radius: 9999px;
  border: 1px solid var(--ink);
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.nav-cta:hover { background: var(--ink); color: var(--bone); }

/* ---------- 6. Cinema stage — preserved scroll math (500vh / 100vh sticky) ---------- */
.cinema-section {
  position: relative;
  height: 500vh;
  background: var(--bone);
}
.cinema-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #0a0805; /* dark behind any letterboxing of the dark video */
}

/* Scroll-scrubbed video — class names preserved for bottle.jsx */
.scrub-video-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: #0a0805;
}
.scrub-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 35% 30%;
  will-change: transform;
  pointer-events: none;
}
.scrub-video-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Sink the foreground stone wall + the pour's impact point into shadow so
     the wine appears to fall into darkness rather than spill onto the wall.
     The strong radial sits where the stream lands (right of centre, bottom);
     the linear fade keeps text legible and hides the wall ledge. */
  background:
    radial-gradient(ellipse 64% 54% at 63% 104%,
      rgba(10,8,5,0.97) 0%,
      rgba(10,8,5,0.80) 34%,
      rgba(10,8,5,0.34) 60%,
      rgba(10,8,5,0) 78%),
    linear-gradient(180deg,
      rgba(10,8,5,0) 40%,
      rgba(10,8,5,0.28) 64%,
      rgba(10,8,5,0.70) 84%,
      rgba(10,8,5,0.95) 100%);
}
.scrub-video-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 78% at 50% 42%,
    transparent 55%, rgba(10,8,5,0.32) 100%);
}

/* Hero overlay text — bottom-left, vertical right column */
.cinema-text {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--gutter) clamp(72px, 9vh, 120px);
  color: var(--on-onyx);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.cinema-text .hero-block {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.cinema-text .eyebrow {
  color: rgba(245,240,230,0.78);
}
.cinema-text .eyebrow::before { background: var(--gold-soft); }
.cinema-text .display-xl,
.cinema-text .display-l {
  color: var(--on-onyx);
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}
.cinema-text .display-xl em,
.cinema-text .display-l em {
  color: var(--gold-soft);
}
.cinema-text .lede {
  color: rgba(245,240,230,0.86);
  font-size: clamp(18px, 1.4vw, 22px);
  max-width: 48ch;
}

/* Right vertical metadata column */
.cinema-right-col {
  position: absolute;
  right: clamp(20px, 3vw, 44px);
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(245,240,230,0.6);
  z-index: 4;
  pointer-events: none;
}

.cinema-text.story-text,
.cinema-text.flow-text {
  padding: 0 var(--gutter);
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* Localised darkening behind the centered overlays so text reads
   over the brightest moments of the pour video. */
.cinema-text.story-text::before,
.cinema-text.flow-text::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%,
      rgba(8,6,4,0.62) 0%,
      rgba(8,6,4,0.42) 40%,
      rgba(8,6,4,0) 75%);
  pointer-events: none;
}
.cinema-text.story-text .story-block,
.cinema-text.flow-text .flow-block {
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
  position: relative;
}
.cinema-text.story-text .display-l,
.cinema-text.flow-text .display-l {
  color: var(--on-onyx);
  text-shadow: 0 2px 28px rgba(0,0,0,0.55);
}
.cinema-text.story-text .lede,
.cinema-text.flow-text .lede {
  color: rgba(245,240,230,0.86);
  max-width: 52ch;
  text-align: center;
}

/* Scroll cue — tiny, only in hero, no clipart arrow */
.scroll-cue {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(245,240,230,0.55);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
.scroll-cue::after {
  content: "";
  width: 1px; height: 28px;
  background: linear-gradient(180deg, rgba(245,240,230,0.6), rgba(245,240,230,0));
  animation: cue-pulse 2.4s var(--ease-out) infinite;
}
@keyframes cue-pulse {
  0% { opacity: 0.2; transform: scaleY(0.6); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0.2; transform: scaleY(0.6); transform-origin: bottom; }
}

/* ---------- 7. Intertitle — film cut between scroll stages ---------- */
.intertitle {
  background: var(--bone);
  padding: clamp(38px, 5vw, 68px) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.intertitle .eyebrow { color: var(--vinous); }
.intertitle .eyebrow::before { background: var(--vinous); opacity: 0.45; }
.intertitle-line {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(32px, 4.8vw, 72px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 26ch;
  margin: 0;
  text-wrap: balance;
}
.intertitle-line .accent { color: var(--vinous); }

/* Interlude as a film intertitle card — a vertical spine threads through it,
   closing on the brand diamond seal that re-opens in The Estates below. */
.intertitle { position: relative; isolation: isolate; }
.intertitle::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 56% 72% at 50% 50%,
    rgba(181,138,62,0.07) 0%, rgba(181,138,62,0) 60%);
  pointer-events: none;
}
.intertitle .eyebrow--flanked::after {
  content: ""; width: 28px; height: 1px;
  background: var(--vinous); opacity: 0.45;
}
.intertitle-rule {
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold));
  opacity: 0.55;
  transform: scaleY(0);
  transition: transform 900ms var(--ease-out);
}
.intertitle-rule--in  { height: clamp(26px, 4vw, 48px); transform-origin: top; }
.intertitle-rule--out {
  height: clamp(22px, 3.4vw, 40px); transform-origin: top;
  background: linear-gradient(180deg, var(--gold), transparent);
}
.intertitle.is-visible .intertitle-rule { transform: scaleY(1); }
.intertitle-seal { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.intertitle-diamond {
  width: 7px; height: 7px;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(181,138,62,0.10);
  transform: rotate(45deg) scale(0);
  transition: transform 700ms var(--ease-out) 140ms;
}
.intertitle.is-visible .intertitle-diamond { transform: rotate(45deg) scale(1); }

/* ---------- 8. Regions — editorial tile grid (Airbnb photo-led + Apple anatomy) ---------- */
.regions {
  background: var(--bone);
  /* Compact: this section sits tighter than the global section rhythm. */
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
.regions .section-head {
  max-width: 700px;
  gap: 16px;
  margin-bottom: clamp(24px, 3vw, 42px);
}
.regions .section-head .display-l { font-size: clamp(32px, 3.8vw, 64px); }
.regions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(26px, 3vw, 44px) clamp(18px, 1.8vw, 30px);
  margin-top: clamp(12px, 2vw, 26px);
}
.region-tile {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.region-art {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bone-2);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 700ms var(--ease-out);
}
.region-tile:hover .region-art { transform: translateY(-4px); }
.region-art svg {
  width: 70%;
  height: auto;
  opacity: 0.55;
}
/* Photo plate — real destination image fills the tile */
.region-art-photo { background: var(--ink); }
.region-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);
  transition: transform 1200ms var(--ease-out);
}
.region-tile:hover .region-photo { transform: scale(1.04); }
/* Top scrim so the Roman-numeral eyebrow stays legible over any photo */
.region-art-photo::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(26,22,18,0.42) 0%,
    rgba(26,22,18,0.12) 22%,
    rgba(26,22,18,0) 42%);
  pointer-events: none;
}
.region-art-eyebrow {
  position: absolute;
  top: 15px; left: 16px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  gap: 10px;
}
.region-art-num {
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
/* Over a photo, the eyebrow flips to light and rides above the scrim */
.region-art-photo .region-art-eyebrow {
  z-index: 2;
  color: var(--bone);
  text-shadow: 0 1px 10px rgba(10,8,5,0.55);
}
.region-art-photo .region-art-num { color: #e6c98a; }
.region-art::after {
  /* warm vignette so the panel reads like an old map */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 80% at 50% 50%,
    transparent 50%, rgba(75,55,30,0.08) 100%);
  pointer-events: none;
}
.region-info { padding: 0 2px; display: flex; flex-direction: column; gap: 9px; }
.region-name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(20px, 1.5vw, 26px);
  letter-spacing: -0.012em;
  line-height: 1.06;
  color: var(--ink);
  margin: 0;
}
.region-name em { color: var(--vinous); }
.region-desc {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-mid);
  margin: 0;
  max-width: 32ch;
}
.region-meta {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}

/* ---------- 9. Glass stage — same scroll math (320vh / 100vh sticky) ---------- */
.glass-section {
  position: relative;
  height: 320vh;
  background: var(--bone);
}
.glass-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--bone-2);
}
.scrub-video-frame.glass-scrub .scrub-video {
  object-position: 50% 50%;
}
/* Glass video is bright daylight — darken bottom-left so the overlay
   sits on a soft cinematic shadow instead of competing with sun. */
.scrub-video-frame.glass-scrub .scrub-video-mask {
  background:
    radial-gradient(ellipse 80% 70% at 25% 100%,
      rgba(14,11,8,0.78) 0%,
      rgba(14,11,8,0.45) 35%,
      rgba(14,11,8,0) 65%),
    linear-gradient(180deg,
      rgba(14,11,8,0) 45%,
      rgba(14,11,8,0.30) 100%);
}
.scrub-video-frame.glass-scrub .scrub-video-vignette {
  background: radial-gradient(ellipse 95% 80% at 50% 45%,
    transparent 55%, rgba(14,11,8,0.28) 100%);
}
.glass-text {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--gutter) clamp(72px, 9vh, 120px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  pointer-events: none;
}
.glass-text .glass-block {
  max-width: 640px;
  display: flex; flex-direction: column;
  gap: 28px;
}
.glass-text .eyebrow { color: rgba(245,240,230,0.78); }
.glass-text .eyebrow::before { background: var(--gold-soft); }
.glass-text .display-l {
  color: var(--on-onyx);
  text-shadow: 0 2px 24px rgba(0,0,0,0.55);
}
.glass-text .display-l em { color: var(--gold-soft); }
.glass-text .lede { color: rgba(245,240,230,0.86); }
.glass-right-col {
  position: absolute;
  right: clamp(20px, 3vw, 44px);
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(245,240,230,0.6);
  z-index: 4;
  pointer-events: none;
}

.export-line {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,240,230,0.78);
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  max-width: 580px;
}
.export-line .dot { color: var(--gold-soft); }

/* ---------- 10. Wineries — Apple-anatomy + Airbnb host-card warmth ---------- */
/* ===== Estates spread — warm lit alcove + vine-laurel estate crest ===== */
.estates-spread { position: relative; isolation: isolate; background: var(--bone); }
.estates-spread > .intertitle,
.estates-spread > .wineries { background: transparent; position: relative; z-index: 1; }
.estates-spread > .intertitle::before { display: none; }
/* tighter so Interlude + Estates read as one composition */
.estates-spread > .intertitle { padding-bottom: clamp(12px, 2.2vw, 28px); }
.estates-spread > .wineries { padding-top: clamp(14px, 2.2vw, 32px); }

/* atmosphere — a warm parchment band with gold + vinous light gathered on
   the crest, plus faint top/bottom shadow so it reads as a lit alcove. */
.estates-spread::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 30% at 50% 43%, rgba(181,138,62,0.16) 0%, rgba(181,138,62,0) 60%),
    radial-gradient(122% 52% at 50% 41%, rgba(181,138,62,0.10) 0%, rgba(181,138,62,0) 50%),
    radial-gradient(78% 36% at 50% 44%, rgba(122,18,36,0.07) 0%, rgba(122,18,36,0) 58%),
    linear-gradient(180deg, var(--bone) 0%, #eee3cd 44%, #efe5d0 56%, var(--bone) 100%);
}
.estates-spread::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(40,26,14,0.05) 0%, transparent 13%, transparent 87%, rgba(40,26,14,0.05) 100%);
}

/* the estate crest divider — a gold grapevine swag with the wax seal nested
   in its centre medallion. */
.estates-spread .section-open {
  position: relative; width: min(520px, 90%);
  display: flex; align-items: center; justify-content: center;
}
.crest-swag {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: 100%; height: auto; pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 3px 7px rgba(60,30,16,0.12));
  transition: opacity 1100ms var(--ease-out), transform 1400ms var(--ease-out);
}
.section-head.is-visible .crest-swag { opacity: 0.96; transform: translate(-50%, -50%) scale(1); }

/* estate seal — sits above the swag's medallion with a soft golden halo */
.estates-spread .section-open-mark { position: relative; z-index: 1; }
.estates-spread .section-open-mark::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); z-index: -1;
  width: 172%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(181,138,62,0.24) 0%, rgba(181,138,62,0) 66%);
}

.wineries { background: var(--bone); position: relative; }
/* The Estates — chapter masthead: a brand wax seal opens the section on a
   pair of rules that draw outward; a short gold rule sets the lede apart. */
.wineries-head { position: relative; isolation: isolate; }
.wineries-head::before {
  content: "";
  position: absolute; left: 50%; top: -6%; z-index: -1;
  width: min(720px, 82%); height: 64%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 70% 80% at 50% 26%,
    rgba(181,138,62,0.06) 0%, rgba(181,138,62,0) 64%);
  pointer-events: none;
}
.section-open {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 2.2vw, 30px);
  width: min(540px, 80%);
  margin: 0 auto clamp(22px, 3vw, 34px);
}
.section-open-rule {
  flex: 1; height: 1px;
  background: var(--rule-strong);
  transform: scaleX(0);
  transition: transform 1000ms var(--ease-out) 80ms;
}
.section-open-rule:first-child {
  transform-origin: right;
  background: linear-gradient(90deg, transparent, var(--rule-strong));
}
.section-open-rule:last-child {
  transform-origin: left;
  background: linear-gradient(270deg, transparent, var(--rule-strong));
}
.section-head.is-visible .section-open-rule { transform: scaleX(1); }
.section-open-mark {
  flex: 0 0 auto; line-height: 0;
  opacity: 0; transform: translateY(6px);
  transition: opacity 700ms var(--ease-out) 220ms, transform 700ms var(--ease-out) 220ms;
  filter: drop-shadow(0 3px 8px rgba(40,12,18,0.16));
}
.section-head.is-visible .section-open-mark { opacity: 1; transform: translateY(0); }
.head-rule {
  width: clamp(40px, 5vw, 62px); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(181,138,62,0.25));
  margin: clamp(6px, 1vw, 12px) auto 2px;
}
.winery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;            /* expanding one card must not stretch its row neighbour */
  gap: clamp(28px, 3vw, 48px);
  margin-top: clamp(24px, 4vw, 56px);
}

/* ---- Trade-profile card ---- */
.winery-card {
  position: relative;
  background: var(--bone-3);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: clamp(22px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: transform 500ms var(--ease-out), border-color 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
}
.winery-card:hover {
  transform: translateY(-3px);
  border-color: rgba(90,14,31,0.26);
  box-shadow: 0 18px 44px -26px rgba(60,30,10,0.34);
}
.winery-card.is-open {
  transform: none;
  border-color: rgba(90,14,31,0.40);
  box-shadow: 0 28px 64px -30px rgba(60,30,10,0.44);
}
.winery-card .ico { width: 16px; height: 16px; }

/* top row — logo badge + year established */
.wc-top { display: flex; align-items: center; justify-content: space-between; }
/* Logo plate — a clean tile that fits ANY logo shape without distortion
   (horizontal, vertical, circular, text-only, emblem). */
.wc-logo {
  height: 54px; min-width: 54px; max-width: 144px;
  padding: 8px 12px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fffdf9;
  border: 1px solid var(--bone-edge);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.85), 0 3px 8px -5px rgba(60,30,16,0.26);
  overflow: hidden;
}
.wc-logo-img {
  max-height: 100%; max-width: 100%;
  width: auto; height: auto;
  object-fit: contain; display: block;
}
/* Premium monogram fallback — same plate footprint, warm gold-ring treatment */
.wc-logo--mono {
  width: 54px; min-width: 54px; max-width: 54px; padding: 0;
  background: radial-gradient(circle at 38% 30%, #fbf7ec, #ece2cd);
  border-color: var(--gold);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.75), 0 3px 8px -4px rgba(90,14,31,0.30);
}
.wc-logo-mono {
  font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 24px;
  color: var(--vinous); line-height: 1;
}
.wc-est {
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-mute);
  border: 1px solid var(--rule); border-radius: 9999px; padding: 5px 12px;
}

.wc-name {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(23px, 1.9vw, 30px); letter-spacing: -0.014em; line-height: 1.06;
  color: var(--ink); margin: 6px 0 0;
}
.wc-region {
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-mid);
  display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.wc-region .ico { color: var(--gold); flex: 0 0 auto; }
.wc-region .dot { color: var(--gold); margin: 0 1px; }
.wc-loc {
  font-family: var(--serif); font-style: italic; font-size: 15px;
  color: var(--ink-mute); margin-top: -2px;
}
.wc-story {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 17px; line-height: 1.5; color: var(--ink-mid); margin: 6px 0 0;
}

/* contacts — neat icon rows */
.wc-contacts {
  display: grid; gap: 4px;
  margin-top: 8px; padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.wc-line {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 13px; color: var(--ink-mid);
  text-decoration: none; max-width: 100%; padding: 4px 0;
  transition: color 240ms var(--ease-out);
}
.wc-line .ico { color: var(--gold); flex: 0 0 auto; }
.wc-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.wc-line:hover { color: var(--vinous); }
.wc-line--static { color: var(--ink-mute); }

/* footer — social icons + the expand cue */
.wc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--rule);
}
.wc-socials { display: inline-flex; gap: 8px; }
.wc-social {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-mid); border: 1px solid var(--rule);
  transition: color 240ms, border-color 240ms, background 240ms, transform 240ms;
}
.wc-social:hover { color: var(--bone-3); background: var(--vinous); border-color: var(--vinous); transform: translateY(-2px); }
.wc-social:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wc-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); background: transparent; border: 0; cursor: pointer;
  padding: 8px 2px;
}
.wc-toggle-chev { display: grid; place-items: center; color: var(--vinous); transition: transform 500ms var(--ease-out); }
.winery-card.is-open .wc-toggle-chev { transform: rotate(180deg); }
.wc-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* expand panel — smooth height via grid-rows 0fr -> 1fr, content fades up */
.wc-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 560ms var(--ease-out);
}
.winery-card.is-open .wc-panel { grid-template-rows: 1fr; }
.wc-panel-inner {
  min-height: 0; overflow: hidden;
  opacity: 0; transform: translateY(8px);
  transition: opacity 420ms var(--ease-out) 90ms, transform 460ms var(--ease-out) 90ms;
}
.winery-card.is-open .wc-panel-inner { opacity: 1; transform: none; }

.wc-dossier-label {
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold);
  margin: 18px 0 14px; padding-top: 16px; border-top: 1px solid var(--rule);
}
.wc-specs { display: grid; gap: 9px; margin: 0; }
.wc-spec { display: grid; grid-template-columns: 102px 1fr; gap: 14px; align-items: baseline; }
.wc-spec dt {
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute);
}
.wc-spec dd { margin: 0; font-family: var(--sans); font-size: 13.5px; color: var(--ink); line-height: 1.4; }
.wc-varietals { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; }
.wc-grape {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.02em;
  color: var(--ink-mid); background: var(--bone-2);
  border: 1px solid var(--bone-edge); border-radius: 9999px; padding: 5px 12px;
}
.wc-longstory {
  font-family: var(--serif); font-size: 16px; line-height: 1.6;
  color: var(--ink-mid); margin: 16px 0 0;
}
.wc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.wc-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.04em; text-decoration: none;
  padding: 12px 20px; border-radius: 9999px;
  border: 1px solid var(--rule-strong); color: var(--ink);
  transition: background 260ms, color 260ms, border-color 260ms, transform 200ms;
}
.wc-cta:hover { transform: translateY(-2px); }
.wc-cta--primary { background: var(--vinous); color: var(--bone-3); border-color: var(--vinous); }
.wc-cta--primary:hover { background: #4a0a18; }
.wc-cta .ico { stroke-width: 1.8; }

/* Idle invitation hint — a quiet "you can open me" cue on one visible card.
   Two slow cycles, then rests. Driven by the .invite class (added by an idle
   timer in App, removed on scroll/click). Skipped entirely under reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .winery-card.invite { animation: wc-invite-edge 1.7s var(--ease-out) 2; }
  .winery-card.invite .wc-toggle-chev { animation: wc-invite-chev 1.7s var(--ease-out) 2; }
  .winery-card.invite .wc-toggle { animation: wc-invite-label 1.7s var(--ease-out) 2; }
}
@keyframes wc-invite-edge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(181,138,62,0); border-color: var(--rule); }
  50%      { box-shadow: 0 0 0 1px rgba(181,138,62,0.26), 0 22px 50px -28px rgba(60,30,10,0.26);
             border-color: rgba(181,138,62,0.42); }
}
@keyframes wc-invite-chev {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 0 rgba(181,138,62,0)); }
  50%      { transform: translateY(2.5px); filter: drop-shadow(0 2px 5px rgba(181,138,62,0.55)); }
}
@keyframes wc-invite-label {
  0%, 100% { color: var(--ink); }
  50%      { color: var(--vinous); }
}

.winery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 36px;
}
.chip {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  border-radius: 9999px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-mid);
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.chip:hover { color: var(--ink); border-color: var(--rule-strong); }
.chip.is-active { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* ---------- 11. Trade CTA — single dramatic onyx moment ---------- */
.trade {
  background: var(--onyx);
  color: var(--on-onyx);
  /* The dramatic close keeps a little more air than a normal section. */
  padding-top: clamp(64px, 8vw, 110px);
  padding-bottom: clamp(58px, 7vw, 96px);
}
.trade .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  text-align: center;
}
.trade .eyebrow { color: var(--gold-soft); }
.trade .eyebrow::before { background: var(--gold-soft); }
.trade-headline {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 88px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--on-onyx);
  margin: 0;
  text-wrap: balance;
  max-width: 18ch;
}
.trade-headline em { color: var(--gold-soft); }
.trade-manifesto {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.55;
  color: rgba(245,240,230,0.72);
  max-width: 38ch;
  margin: 0;
}
.trade-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--on-onyx);
  padding: 22px 36px;
  border-radius: 9999px;
  border: 1px solid rgba(245,240,230,0.30);
  transition: background 300ms var(--ease-out), border-color 300ms var(--ease-out), color 300ms var(--ease-out);
}
.trade-link:hover {
  background: var(--on-onyx);
  color: var(--onyx);
  border-color: var(--on-onyx);
}
.trade-link-arrow {
  width: 16px; height: 12px;
  display: inline-block;
  position: relative;
  transition: transform 300ms var(--ease-out);
}
.trade-link:hover .trade-link-arrow { transform: translateX(4px); }
.trade-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 64px);
  margin-top: 28px;
  width: 100%;
  max-width: 720px;
  padding-top: 56px;
  border-top: 1px solid rgba(245,240,230,0.12);
}
.trade-number {
  display: flex; flex-direction: column;
  gap: 6px;
  text-align: center;
}
.trade-number-value {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
  color: var(--gold-soft);
  font-variant-numeric: tabular-nums;
}
.trade-number-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245,240,230,0.55);
}

/* ---------- 12. Footer — bone canvas (Airbnb principle: no dark slab), single wax seal ---------- */
.footer {
  background: var(--bone);
  color: var(--ink);
  padding: clamp(48px, 6vw, 80px) var(--gutter) clamp(36px, 4.5vw, 56px);
  border-top: 1px solid var(--rule);
}
.footer-inner { max-width: var(--max); margin: 0 auto; }
.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  padding-bottom: clamp(64px, 8vw, 100px);
}
.footer-brand { display: flex; flex-direction: column; gap: 22px; }
.footer-brand-mark {
  display: flex; align-items: center; gap: 16px;
}
.footer-brand-name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(28px, 2.4vw, 36px);
  letter-spacing: -0.012em;
  line-height: 1;
  color: var(--ink);
  margin: 0;
}
.footer-brand-name em { color: var(--vinous); }
.footer-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-mid);
  max-width: 36ch;
  margin: 0;
}
.footer-address {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-mid);
  margin: 0;
}
.footer-address a { color: var(--vinous); border-bottom: 1px solid currentColor; padding-bottom: 1px; }

.footer-col { display: flex; flex-direction: column; gap: 16px; }
.footer-col-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 6px;
}
.footer-col a {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-mid);
  transition: color 200ms var(--ease-out);
}
.footer-col a:hover { color: var(--vinous); }

.footer-fine {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-mute);
}
.footer-fine em {
  font-size: 13px;
}

/* The single ornament — wax seal as a small mark in the brand row */
.wax-mark {
  width: 64px; height: 64px;
  flex: 0 0 64px;
}

/* ---------- 13. Texture — a single quiet film grain, 0.02 ---------- */
.film-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.018;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- 14. Mobile ---------- */
@media (max-width: 900px) {
  :root {
    --gutter: 6vw;
    --section-y: clamp(36px, 7vw, 60px);
    --head-gap: clamp(24px, 5vw, 40px);
  }
  body { font-size: 16px; }

  .nav { top: 14px; }
  .nav-inner { padding: 10px 14px 10px 18px; gap: 12px; }
  .nav-links { display: none; }
  .nav-cta { padding: 8px 14px; font-size: 12px; }

  .cinema-section { height: 480vh; }
  .glass-section { height: 320vh; }

  .cinema-text { padding-bottom: 80px; }
  .cinema-text .hero-block { gap: 22px; max-width: 92vw; }
  .display-xl { font-size: clamp(48px, 14vw, 88px); }
  .display-l  { font-size: clamp(36px, 9vw, 64px); }
  .cinema-right-col, .glass-right-col { display: none; }

  .intertitle { padding: clamp(34px, 8vw, 60px) var(--gutter); }
  .intertitle-line { font-size: clamp(28px, 7vw, 44px); }
  .section-open { width: min(440px, 86%); }
  .section-open-mark svg { width: 32px; height: 32px; }
  .estates-spread .section-open { width: min(440px, 94%); }

  .regions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(28px, 4vw, 40px) clamp(18px, 3vw, 28px);
  }
  .region-art { aspect-ratio: 4 / 5; }

  .winery-grid { grid-template-columns: 1fr; gap: 28px; }
  .winery-card { padding: 28px; }

  .trade-numbers { grid-template-columns: 1fr; gap: 28px; max-width: 320px; }
  .trade-link { padding: 18px 28px; }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-bottom: 56px;
  }
  .footer-fine { flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; }
}

@media (max-width: 540px) {
  .display-xl { font-size: clamp(44px, 13vw, 64px); }
  .display-l  { font-size: clamp(32px, 9vw, 48px); }
  .nav { width: calc(100vw - 24px); }

  /* Regions read as one compact 3-up cluster on phones (a wine-atlas index),
     not a long stack. On these tiny tiles the description and meta condense
     out; the core identity, image + region name, stays clear. */
  .regions-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 8px;
  }
  .region-tile { gap: 7px; }
  .region-art { aspect-ratio: 4 / 5; border-radius: 8px; }
  .region-art-eyebrow { top: 7px; left: 7px; font-size: 7px; letter-spacing: 0.1em; gap: 4px; }
  .region-info { gap: 2px; padding: 0; }
  .region-name { font-size: 12.5px; line-height: 1.1; letter-spacing: -0.012em; }
  .region-desc { display: none; }
  .region-meta { display: none; }
}

@media (max-width: 360px) {
  .regions-grid { gap: 14px 7px; }
  .region-name { font-size: 11.5px; }
  .region-art-eyebrow { font-size: 6.5px; }
}

/* ---------- 15. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal-up { opacity: 1; transform: none; }
  /* Decorative spine / seal / rules resolve to their final state instantly. */
  .intertitle-rule, .section-open-rule, .section-open-mark { transform: none !important; opacity: 1 !important; }
  .intertitle-diamond { transform: rotate(45deg) !important; }
  .crest-swag { opacity: 0.96 !important; transform: translate(-50%, -50%) !important; }
}