/* =====================================================================
   CLOUDY BAY — concept site, COLOURFUL EDITION
   ---------------------------------------------------------------------
   A standalone stylesheet. index-colorful.html loads this and nothing
   else; assets/css/styles.css is untouched and unreferenced here.

   Same layout, same components, same typography. What changes is the
   colour system: sections now alternate dark, warm light, burgundy and
   natural, so the page has rhythm instead of one long dark corridor.

   How the theming works
   ---------------------
   Components keep reading the tokens they always did (--ivory, --sand,
   --line, --surface...). Each section re-declares those tokens for its
   own ground, so a light section flips its text to dark without a single
   component rule being rewritten. The scopes live at the end of this
   file, under SECTION THEMES.
   ===================================================================== */

:root{
  /* --- Colour ------------------------------------------------------ */
  --bg:            #201B1A;   /* warm charcoal */
  --surface:       #2A2321;   /* cocoa */
  --surface-2:     #332927;   /* dark timber */
  --garnet:        #6E1F2A;   /* deep wine */
  --oxblood:       #8F2638;   /* rich garnet — primary CTA */
  --cognac:        #C69A52;   /* warm gold — hairlines and marks */
  --ivory:         #F5EFE3;   /* warm ivory — primary text */
  --sand:          #CBBDA4;   /* secondary text */
  --line:          rgba(232, 216, 181, .18);
  --line-soft:     rgba(232, 216, 181, .09);
  --cognac-soft:   rgba(198, 154, 82, .32);

  /* --- Added for this edition -------------------------------------- */
  --gold:          #C69A52;   /* premium highlight */
  --gold-hi:       #D9B072;   /* gold that still passes on dark grounds */
  --oxblood-hi:    #A93448;   /* primary CTA hover */
  --burgundy:      #3A1D24;   /* trust section ground */
  --champagne:     #E8D8B5;   /* secondary cards, warm contrast */
  --champagne-2:   #D6C48C;
  --cream:         #F5EFE3;   /* brighter section ground */
  --cream-2:       #EDE3D2;
  --clay:          #D9D1B8;   /* Marlborough ground */
  --olive:         #66704A;   /* vineyard, sustainability */
  --olive-lt:      #9BAF62;
  --forest:        #334536;   /* Central Otago ground */
  --rose:          #C9828A;   /* rosé accent */
  --ink:           #201B1A;   /* text on light grounds */
  --ink-2:         #5A4A42;   /* secondary text on light grounds */
  --footer-bg:     #171312;

  /* Small-caps labels. Re-declared per scope so they stay legible. */
  --label:         var(--gold);

  /* --- Type -------------------------------------------------------- */
  --serif: "Cormorant Garamond", "Hoefler Text", Garamond, "Times New Roman", serif;
  --sans:  "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-display: clamp(3.1rem, min(10.5vw, 14vh), 8.25rem);
  --fs-h2:      clamp(2.1rem, 5.2vw, 4.2rem);
  --fs-h3:      clamp(1.5rem, 2.6vw, 2.3rem);
  --fs-lede:    clamp(1.0625rem, 1.5vw, 1.3125rem);
  --fs-body:    clamp(1rem, .96rem + .22vw, 1.09rem);
  --fs-small:   .875rem;
  --fs-label:   .6875rem;

  --track-label: .3em;
  --track-nav:   .18em;

  /* --- Space & layout ---------------------------------------------- */
  --shell:      1440px;
  --gutter:     clamp(1.25rem, 5vw, 4.5rem);
  --pad-section: clamp(5.5rem, 12vw, 11rem);
  --header-h:   84px;

  /* --- Motion ------------------------------------------------------ */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-slow: cubic-bezier(.16, .84, .34, 1);
}

@media (max-width: 800px){ :root{ --header-h: 68px; } }

/* =====================================================================
   RESET & BASE
   ===================================================================== */

*, *::before, *::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.62;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked{ overflow: hidden; }

h1, h2, h3, h4, p, figure, dl, dd, ul, ol{ margin: 0; }
ul, ol{ list-style: none; padding: 0; }
img, video, svg{ display: block; max-width: 100%; }

a{ color: inherit; text-decoration: none; }

button{
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible{
  outline: 1px solid var(--ivory);
  outline-offset: 5px;
  border-radius: 1px;
}

::selection{ background: var(--oxblood); color: var(--ivory); }

.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link{
  position: fixed;
  top: 1rem; left: 1rem;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ivory);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform .3s var(--ease);
}
.skip-link:focus-visible{ transform: none; }

.svg-defs{ position: absolute; width: 0; height: 0; overflow: hidden; }

/* =====================================================================
   LAYOUT PRIMITIVES
   ===================================================================== */

.shell{
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section{
  position: relative;
  padding-block: var(--pad-section);
  scroll-margin-top: var(--header-h);
}

.section + .section{ border-top: 1px solid var(--line-soft); }

.section__head{ margin-bottom: clamp(3rem, 6vw, 5.5rem); }

.section__head--split{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.section__note{
  max-width: 30ch;
  color: var(--sand);
  font-size: var(--fs-small);
  line-height: 1.7;
}

.section__head-cta{ flex: none; }

/* =====================================================================
   TYPOGRAPHY
   ===================================================================== */

.eyebrow{
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 1.75rem;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.eyebrow::after{
  content: "";
  flex: 1;
  max-width: 64px;
  height: 1px;
  background: var(--cognac-soft);
}

.h2{
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -.015em;
  max-width: 18ch;
  text-wrap: balance;
}

.h3{
  font-family: var(--serif);
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.01em;
}

.prose{
  color: var(--sand);
  max-width: 56ch;
  display: grid;
  gap: 1.25rem;
}
.prose--tight{ max-width: 48ch; }
.prose p{ line-height: 1.72; }

/* =====================================================================
   BUTTONS & LINK CTAs
   ===================================================================== */

.btn{
  --btn-fg: var(--ivory);
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 1.05rem 2.1rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--btn-fg);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  transition: color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
}

.btn--solid{
  background: var(--garnet);
  border-color: var(--garnet);
}
.btn--solid::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--oxblood);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .5s var(--ease-slow);
  z-index: -1;
}
.btn--solid:hover::before,
.btn--solid:focus-visible::before{ transform: scaleY(1); }
.btn--solid:hover{ border-color: var(--oxblood); }

.btn--hairline{
  border-color: var(--line);
  color: var(--sand);
}
.btn--hairline:hover,
.btn--hairline:focus-visible{
  color: var(--ivory);
  border-color: var(--cognac);
}

.btn--sm{ padding: .8rem 1.4rem; }

.btn--play{
  padding-inline: 0;
  color: var(--sand);
}
.btn--play:hover,
.btn--play:focus-visible{ color: var(--ivory); }

.btn__play{
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--cognac-soft);
  border-radius: 50%;
  padding-left: 3px;
  transition: border-color .4s var(--ease), background-color .4s var(--ease), transform .4s var(--ease);
}
.btn--play:hover .btn__play,
.btn--play:focus-visible .btn__play{
  border-color: var(--oxblood);
  background: rgba(122, 44, 58, .35);
  transform: scale(1.06);
}

.link-cta{
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ivory);
  padding-block: .55rem;
  position: relative;
  transition: color .35s var(--ease);
}
.link-cta::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--cognac);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform .55s var(--ease-slow), background-color .35s var(--ease);
}
.link-cta:hover, .link-cta:focus-visible{ color: var(--ivory); }
.link-cta:hover::after, .link-cta:focus-visible::after{ background: var(--oxblood); }
.link-cta__arrow{
  display: inline-block;
  transition: transform .45s var(--ease);
}
.link-cta:hover .link-cta__arrow,
.link-cta:focus-visible .link-cta__arrow{ transform: translateX(6px); }

.link-cta--sm{ font-size: .625rem; color: var(--sand); }
.link-cta--sm:hover, .link-cta--sm:focus-visible{ color: var(--ivory); }

/* =====================================================================
   HEADER
   ===================================================================== */

.header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease);
  border-bottom: 1px solid transparent;
}

.header.is-stuck{
  background: rgba(32, 27, 26, .82);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  border-bottom-color: var(--line-soft);
}

.header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.wordmark{
  font-family: var(--sans);
  font-size: clamp(.8rem, 1.1vw, .95rem);
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ivory);
  white-space: nowrap;
  transition: color .35s var(--ease);
}
.wordmark:hover{ color: var(--sand); }
.wordmark--muted{ color: var(--sand); }
.wordmark--lg{
  font-size: clamp(1rem, 2vw, 1.35rem);
  letter-spacing: .38em;
}

.nav__list{
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
}
.nav__list a{
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--sand);
  position: relative;
  padding-block: .5rem;
  transition: color .35s var(--ease);
}
.nav__list a::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--cognac);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease-slow);
}
.nav__list a:hover,
.nav__list a[aria-current="true"]{ color: var(--ivory); }
.nav__list a:hover::after,
.nav__list a[aria-current="true"]::after{
  transform: scaleX(1);
  transform-origin: left;
}

.header__actions{ display: flex; align-items: center; gap: 1rem; }

.burger{ display: none; }
.burger__box{
  display: grid;
  gap: 6px;
  width: 26px;
}
.burger__box span{
  display: block;
  height: 1px;
  background: var(--ivory);
  transition: transform .4s var(--ease), width .4s var(--ease);
}
.burger__box span:last-child{ width: 60%; justify-self: end; }
.burger:hover .burger__box span:last-child{ width: 100%; }

@media (max-width: 1080px){
  .nav{ display: none; }
  .burger{ display: block; padding: .5rem; margin-right: -.5rem; }
}
@media (max-width: 640px){
  .header__stockist{ display: none; }
}

/* =====================================================================
   MOBILE MENU
   ===================================================================== */

.menu{
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--bg);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.menu[hidden]{ display: none; }
.menu.is-open{ opacity: 1; }

.menu__inner{
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: var(--header-h) 1fr auto;
  overflow: hidden;
}
.menu__inner::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 80% 12%, rgba(90, 31, 44, .40), transparent 62%),
    radial-gradient(60% 50% at 10% 90%, rgba(139, 94, 60, .16), transparent 65%);
  pointer-events: none;
}

.menu__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.menu__close{
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sand);
  padding: .5rem;
  transition: color .3s var(--ease);
}
.menu__close:hover{ color: var(--ivory); }

.menu__nav{
  display: flex;
  align-items: center;
  position: relative;
}
.menu__nav ul{ width: 100%; }
.menu__nav li{
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease) calc(var(--i) * 55ms),
              transform .6s var(--ease) calc(var(--i) * 55ms);
}
.menu.is-open .menu__nav li{ opacity: 1; transform: none; }
.menu__nav a{
  display: block;
  padding-block: clamp(.7rem, 2.4vh, 1.15rem);
  font-family: var(--serif);
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 300;
  line-height: 1.1;
  transition: color .3s var(--ease), padding-left .4s var(--ease);
}
.menu__nav a:hover{ color: var(--sand); padding-left: .5rem; }

.menu__foot{
  position: relative;
  padding-bottom: clamp(2rem, 6vh, 3.5rem);
  display: grid;
  gap: 1.5rem;
  justify-items: start;
}
.menu__place{
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sand);
}

/* =====================================================================
   HERO
   ===================================================================== */

.hero{
  position: relative;
  /* The review bar is fixed to the foot of the viewport; the first
     screen has to end above it, not behind it. */
  min-height: calc(100svh - var(--demo-bar-h, 0px));
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(1.75rem, 4vh, 2.75rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__media{
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--bg);
}
.hero__media video,
.hero__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: heroDrift 34s ease-in-out infinite alternate;
}

.hero__layer{
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(52% 46% at 18% 14%, rgba(139, 94, 60, .26), transparent 64%),
    radial-gradient(62% 56% at 78% 24%, rgba(90, 31, 44, .58), transparent 62%),
    radial-gradient(46% 40% at 62% 58%, rgba(122, 44, 58, .22), transparent 70%),
    radial-gradient(130% 88% at 50% 112%, rgba(32, 27, 26, .96), transparent 68%),
    linear-gradient(178deg, #3A2027 0%, #2B1B20 48%, #201B1A 100%);
  animation: heroDrift 34s ease-in-out infinite alternate;
}

@keyframes heroDrift{
  from{ transform: scale(1) translate3d(0, 0, 0); }
  to  { transform: scale(1.09) translate3d(-1.5%, -1%, 0); }
}

.hero__scrim{
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(32, 27, 26, .62) 0%,
      rgba(32, 27, 26, .28) 42%,
      rgba(32, 27, 26, 0) 72%),
    linear-gradient(180deg,
      rgba(32, 27, 26, .30) 0%,
      rgba(32, 27, 26, .48) 46%,
      rgba(32, 27, 26, .78) 100%);
}

.hero__content{ align-self: end; padding-bottom: clamp(2.5rem, 7vh, 5rem); }

.hero__eyebrow{
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--sand);
}
.hero__eyebrow::after{ max-width: 90px; }

.hero__title{
  font-family: var(--serif);
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: .95;
  letter-spacing: -.025em;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 15ch;
}
.hero__title em{
  font-style: italic;
  font-weight: 300;
  color: var(--sand);
}
.hero__line{
  display: block;
  overflow: hidden;
}
.hero__line > span{
  display: block;
  transform: translateY(105%);
  animation: heroRise 1.25s var(--ease-slow) forwards;
}
.hero__line:nth-child(1) > span{ animation-delay: .15s; }
.hero__line:nth-child(2) > span{ animation-delay: .28s; }

@keyframes heroRise{ to{ transform: none; } }

.hero__lede{
  font-size: var(--fs-lede);
  color: var(--sand);
  max-width: 46ch;
  line-height: 1.6;
  margin-bottom: clamp(2.25rem, 4vw, 3rem);
  opacity: 0;
  animation: heroFade 1.1s var(--ease) .55s forwards;
}

.hero__actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  opacity: 0;
  animation: heroFade 1.1s var(--ease) .72s forwards;
}

@keyframes heroFade{ to{ opacity: 1; } }

/* Laptops and short windows: keep the whole hero above the fold. */
@media (max-height: 820px) and (min-width: 720px){
  .hero{ padding-top: calc(var(--header-h) + 1rem); }
  .hero__content{ padding-bottom: 2rem; }
  .hero__eyebrow{ margin-bottom: 1.25rem; }
  .hero__title{ margin-bottom: 1.25rem; }
  .hero__lede{ margin-bottom: 1.75rem; }
}

.hero__foot{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  opacity: 0;
  animation: heroFade 1.2s var(--ease) 1s forwards;
}

.hero__est{
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sand);
}

.scroll-cue{
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: .75rem;
  color: var(--sand);
  transition: color .35s var(--ease);
}
.scroll-cue:hover{ color: var(--ivory); }
.scroll-cue__label{
  font-size: .625rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.scroll-cue__line{
  width: 1px;
  height: 42px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.scroll-cue__line::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cognac);
  animation: cueTrace 2.6s var(--ease-slow) infinite;
}
@keyframes cueTrace{
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

.hero__credit{
  justify-self: end;
  text-align: right;
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sand);
  opacity: .68;
  max-width: 30ch;
}

/* Short phones: hold the hero to a single screen. */
@media (max-height: 780px) and (max-width: 719px){
  .hero{ padding-top: calc(var(--header-h) + .5rem); }
  .hero__content{ padding-bottom: 1.25rem; }
  .hero__eyebrow{ margin-bottom: 1rem; }
  .hero__title{ margin-bottom: 1rem; }
  .hero__lede{ margin-bottom: 1.5rem; }
  .scroll-cue__line{ height: 26px; }
}
@media (max-height: 700px) and (max-width: 719px){
  :root{ --fs-display: clamp(2.4rem, 11vw, 3.1rem); }
  .hero__lede{ font-size: 1rem; }
}

/* --- Placeholder tag (shared) ------------------------------------- */

.slot-tag{ display: grid; gap: .4rem; max-width: 34ch; }
.slot-tag__id{
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sand);
  opacity: .85;
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.slot-tag__note{
  font-size: .75rem;
  line-height: 1.5;
  color: var(--sand);
  opacity: .72;
}
.slot-tag__id--mini{
  font-size: .5rem;
  letter-spacing: .18em;
  opacity: .42;
}

@media (max-width: 480px){
  .slot-tag__id{ font-size: .5625rem; letter-spacing: .16em; }
  .slot-tag__note{ font-size: .6875rem; }
}

@media (max-width: 900px){
  .hero__foot{ grid-template-columns: 1fr auto; }
  .hero__credit{ display: none; }
}
@media (max-width: 560px){
  .hero__foot{ grid-template-columns: 1fr; justify-items: start; }
  .scroll-cue{ justify-self: start; justify-items: start; }

  .hero__actions{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    width: 100%;
  }
  .hero__actions .btn--solid,
  .hero__actions .btn--hairline{ padding-inline: 1rem; width: 100%; }
  .hero__actions .btn--play{ grid-column: 1 / -1; justify-content: flex-start; }
}

/* =====================================================================
   MEDIA PLACEHOLDERS
   ===================================================================== */

.media{ position: relative; }

.media__frame{
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-soft);
}
.media--tall  .media__frame{ aspect-ratio: 3 / 4; }
.media--wide  .media__frame{ aspect-ratio: 16 / 10; }
.media--band  .media__frame{ aspect-ratio: 21 / 9; }
.media--film  .media__frame{ aspect-ratio: 16 / 9; }

.media__inner{
  position: absolute;
  inset: 0;
  transform: scale(1);
  transition: transform 1.8s var(--ease-slow);
}
[data-reveal="clip"] .media__inner{ transform: scale(1.1); }

/* hover zoom wants a shorter curve than the reveal */
.vcard__media .media__inner,
.post__media .media__inner{ transition-duration: 1.1s; }
.media__inner img,
.media__inner video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media__slot{
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .85rem;
  text-align: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(52, 37, 35, .9), transparent 70%),
    linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 55%, var(--slot-deep, #241E1D) 100%);
}
.media__slot::before{
  content: "";
  position: absolute;
  inset: clamp(10px, 1.6vw, 18px);
  pointer-events: none;
  opacity: .4;
  background:
    linear-gradient(var(--cognac), var(--cognac)) 0 0        / 1px 20px no-repeat,
    linear-gradient(var(--cognac), var(--cognac)) 0 0        / 20px 1px no-repeat,
    linear-gradient(var(--cognac), var(--cognac)) 100% 0     / 1px 20px no-repeat,
    linear-gradient(var(--cognac), var(--cognac)) 100% 0     / 20px 1px no-repeat,
    linear-gradient(var(--cognac), var(--cognac)) 0 100%     / 1px 20px no-repeat,
    linear-gradient(var(--cognac), var(--cognac)) 0 100%     / 20px 1px no-repeat,
    linear-gradient(var(--cognac), var(--cognac)) 100% 100%  / 1px 20px no-repeat,
    linear-gradient(var(--cognac), var(--cognac)) 100% 100%  / 20px 1px no-repeat;
}
.media__slot .slot-tag__id{ opacity: .9; }
.media__slot .slot-tag__note{ max-width: 32ch; }

.media__caption{
  margin-top: 1rem;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sand);
  opacity: .9;
}

/* --- Photographic grade -------------------------------------------
   The source photography is daylight-blue and green; the palette is
   warm charcoal and garnet. A single house grade pulls every image
   into the same range so nothing reads as pasted in. Bottles are
   deliberately excluded — product colour stays true. */

.media__inner img,
.hero__media img,
.hero__media video{
  filter: saturate(.50) sepia(.28) brightness(.80) contrast(1.07);
}

/* The sources range from an overcast aerial to a bright summer lake.
   A veil over every photographic frame levels that exposure spread so
   the section reads as one shoot rather than a stock assortment.
   Scoped with :has() so drawn placeholders keep their full contrast. */
.media__frame:has(img)::after,
.media__frame:has(video)::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(175deg, rgba(32, 27, 26, .16) 0%, rgba(32, 27, 26, .44) 100%);
}
.hero__media img,
.hero__media video{
  filter: saturate(.46) sepia(.30) brightness(.84) contrast(1.06);
}

/* --- Bottle packshots ---------------------------------------------- */

.bottle-slot img{
  height: clamp(180px, 17vw, 236px);
  width: auto;
  object-fit: contain;
  transition: transform .7s var(--ease-slow);
}
.bottle-slot--lg img{ height: clamp(240px, 25vw, 348px); }

.wine:hover .bottle-slot img,
.wine:focus-within .bottle-slot img{ transform: translateY(-8px) scale(1.02); }

/* =====================================================================
   STORY
   ===================================================================== */

.story__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}

.story__title{ margin-bottom: clamp(2rem, 4vw, 2.75rem); }

.story__figure{ margin-top: clamp(0rem, 6vw, 5.5rem); }

.facts{
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
  max-width: 46ch;
}
.facts__item{
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--line-soft);
}
.facts dt{
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sand);
  opacity: .85;
  padding-top: .18rem;
}
.facts dd{ margin: 0; font-size: var(--fs-small); color: var(--ivory); }

@media (max-width: 900px){
  .story__grid{ grid-template-columns: 1fr; }
  .story__figure{ margin-top: 0; max-width: 480px; }
}

/* =====================================================================
   TERROIR
   ===================================================================== */

.section--terroir{ padding-bottom: calc(var(--pad-section) * .55); }

.place{ padding-block: clamp(2.5rem, 6vw, 5rem); }
.place:first-of-type{ padding-top: 0; }

.place__grid{
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.place--reverse .place__grid > .place__text{ order: 2; }
.place--reverse .place__grid > .place__figure{ order: 1; }

.place__index{
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 1.1rem;
}

.place__text .h3{ margin-bottom: 1.5rem; }
.place__text .prose{ margin-bottom: clamp(2rem, 4vw, 3rem); }

/* --- SIGNATURE: soil profiles ------------------------------------- */

.soils{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.soil{
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.soil__profile{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 200px;
  border: 1px solid var(--line-soft);
  border-radius: 1px;
  overflow: hidden;
  background: var(--soil-ground, #241E1D);
}
/* depth: light at the surface, dark at the base */
.soil__profile::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(241, 233, 221, .06) 0%, transparent 28%, rgba(32, 27, 26, .34) 100%);
}

.soil__band{
  display: block;
  height: var(--h);
  background-color: var(--tone);
  opacity: var(--o);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .8s var(--ease-slow);
  transition-delay: calc(var(--i, 0) * 90ms);
  border-bottom: 1px solid rgba(32, 27, 26, .38);
}
.is-in .soil__band{ transform: scaleY(1); }

.soil__name{
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: .5rem;
}
.soil__desc{
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--sand);
}

.soils__key{
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: .75rem;
  color: var(--sand);
  opacity: .76;
}

/* --- Central Otago site list --------------------------------------- */

.sites{
  display: grid;
  border-top: 1px solid var(--line);
  max-width: 40ch;
}
.site{
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-small);
  color: var(--ivory);
}
.site__mark{
  flex: none;
  width: 22px;
  height: 1px;
  background: var(--cognac);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--ease-slow);
}
.site:nth-child(1) .site__mark{ transition-delay: .05s; }
.site:nth-child(2) .site__mark{ transition-delay: .18s; }
.site:nth-child(3) .site__mark{ transition-delay: .31s; }
.is-in .site__mark{ transform: scaleX(1); }

@media (max-width: 960px){
  .place__grid{ grid-template-columns: 1fr; }
  .place--reverse .place__grid > .place__text,
  .place--reverse .place__grid > .place__figure{ order: initial; }
}
@media (max-width: 560px){
  .soils{ grid-template-columns: 1fr; }
  .soil__profile{ height: 148px; }
}

/* =====================================================================
   WINES
   ===================================================================== */

.section--wines{ background: var(--wines-bg, linear-gradient(180deg, var(--bg) 0%, #241E1D 50%, var(--bg) 100%)); }

/* --- Featured ------------------------------------------------------ */

.feature{
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  border: 1px solid var(--line-soft);
  background: var(--feature-bg, linear-gradient(150deg, var(--surface) 0%, #241E1D 70%));
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}

.feature__niche{
  position: relative;
  display: grid;
  place-items: center;
  padding-block: clamp(1rem, 2vw, 2rem);
  isolation: isolate;
}
.feature__glow{
  position: absolute;
  inset: 8% 12%;
  z-index: -1;
  background: radial-gradient(48% 46% at 50% 52%, rgba(90, 31, 44, .78), rgba(122, 44, 58, .18) 56%, transparent 74%);
  filter: blur(6px);
  animation: glowBreathe 9s ease-in-out infinite alternate;
}
@keyframes glowBreathe{
  from{ opacity: .75; transform: scale(1); }
  to  { opacity: 1;   transform: scale(1.07); }
}

.bottle-slot{ display: grid; justify-items: center; gap: 1.25rem; }
.bottle{
  height: clamp(180px, 17vw, 236px);
  width: auto;
  transition: transform .7s var(--ease-slow);
}
.bottle-slot--lg .bottle{ height: clamp(240px, 25vw, 348px); }

.slot-tag--bottle{ justify-items: center; }

.feature__name{
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.02em;
  margin-bottom: 1.5rem;
}
.feature__text .prose{ margin-bottom: 2rem; }

.wine__region{
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 1rem;
}

/* --- Secondary grid ------------------------------------------------ */

.wines{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
}

.wine{
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1.5rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--bg);
  position: relative;
  transition: background-color .6s var(--ease);
}
.wine::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 45% at 50% 22%, rgba(90, 31, 44, .30), transparent 68%);
  opacity: 0;
  transition: opacity .7s var(--ease);
  pointer-events: none;
}
.wine:hover::before,
.wine:focus-within::before{ opacity: 1; }
.wine:hover .bottle,
.wine:focus-within .bottle{ transform: translateY(-8px) scale(1.02); }

.wine__niche{
  display: grid;
  place-items: center;
  padding-block: 1rem;
}

.wine__name{
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: .85rem;
}
.wine__desc{
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--sand);
  margin-bottom: 1.5rem;
  max-width: 34ch;
}
.wine__text{ display: flex; flex-direction: column; align-items: flex-start; }
.wine__text .link-cta{ margin-top: auto; }

@media (min-width: 600px){
  .wines{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1020px){
  .wines{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px){
  .feature{ grid-template-columns: 1fr; }
}

/* =====================================================================
   CRAFT
   ===================================================================== */

.section--craft{ padding-top: 0; }

.section--craft .media--band{ margin-bottom: clamp(3.5rem, 8vw, 7rem); }
.section--craft .media--band .media__frame{ border-inline: 0; }

.craft__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}
.craft__body{ padding-top: .5rem; }

/* --- Process line -------------------------------------------------- */

.process{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  padding-top: 2px;
}

.process__track{
  position: absolute;
  top: 5px;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--cognac), var(--oxblood));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.9s var(--ease-slow);
}
.process.is-in .process__track{ transform: scaleX(1); }

.process__step{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.process__dot{
  order: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1px solid var(--cognac);
  background: var(--bg);
  margin-bottom: 1.5rem;
  transform: scale(0);
  transition: transform .5s var(--ease-slow) calc(.35s + var(--i) * .38s),
              background-color .5s var(--ease) calc(.35s + var(--i) * .38s);
}
.process.is-in .process__dot{
  transform: scale(1);
  background: var(--oxblood);
}

.process__num{
  order: 1;
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--sand);
  margin-bottom: .55rem;
}

.process__label{
  order: 2;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 300;
  color: var(--ivory);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .7s var(--ease) calc(.45s + var(--i) * .38s),
              transform .7s var(--ease) calc(.45s + var(--i) * .38s);
}
.process.is-in .process__label{ opacity: 1; transform: none; }

@media (max-width: 900px){
  .craft__grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .process{
    grid-template-columns: 1fr;
    row-gap: 1.75rem;
    padding-left: 0;
  }
  .process__step{
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
  .process__dot{ margin-bottom: 0; }
  .process__num{ margin-bottom: 0; }
  .process__track{
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--cognac), var(--oxblood));
    transform: scaleY(0);
    transform-origin: top;
  }
  .process.is-in .process__track{ transform: scaleY(1); }
}

/* =====================================================================
   SUSTAINABILITY
   ===================================================================== */

.sustain__grid{
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 6.5rem);
  align-items: center;
}

.sustain__text .h2{ margin-bottom: clamp(2rem, 4vw, 3rem); }

.ledger{
  display: grid;
  border-top: 1px solid var(--line);
}
.ledger__row{
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.25rem, 2.4vw, 1.75rem);
  border-bottom: 1px solid var(--line-soft);
}
.ledger__key{
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sand);
  padding-top: .28rem;
}
.ledger__val{
  font-size: var(--fs-small);
  line-height: 1.68;
  color: var(--ivory);
  max-width: 46ch;
}

@media (max-width: 900px){
  .sustain__grid{ grid-template-columns: 1fr; }
  .sustain__figure{ max-width: 460px; }
}
@media (max-width: 520px){
  .ledger__row{ grid-template-columns: 1fr; gap: .5rem; }
}

/* =====================================================================
   VISIT
   ===================================================================== */

.visit{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.vcard{
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--line-soft);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .6s var(--ease), background-color .6s var(--ease);
}
.vcard:hover, .vcard:focus-within{
  border-color: var(--cognac-soft);
  background: var(--surface-2);
}
.vcard__media .media__frame{
  aspect-ratio: 16 / 10;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
}
.vcard:hover .media__inner,
.vcard:focus-within .media__inner{ transform: scale(1.04); }

.vcard__body{
  padding: clamp(1.75rem, 3.2vw, 2.75rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.vcard__region{
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 1rem;
}
.vcard__title{ margin-bottom: .9rem; }
.vcard__desc{
  font-size: var(--fs-small);
  line-height: 1.68;
  color: var(--sand);
  max-width: 38ch;
  margin-bottom: 1.75rem;
}
.vcard__body .link-cta{ margin-top: auto; }

@media (max-width: 780px){
  .visit{ grid-template-columns: 1fr; }
}

/* =====================================================================
   JOURNAL
   ===================================================================== */

.journal{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
}

.post{ display: flex; flex-direction: column; align-items: flex-start; }
.post__media{ width: 100%; margin-bottom: 1.75rem; }
.post__media .media__frame{ aspect-ratio: 4 / 3; }
.post:hover .media__inner,
.post:focus-within .media__inner{ transform: scale(1.05); }

.post__cat{
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: .85rem;
}
.post__title{
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  font-weight: 300;
  line-height: 1.15;
  margin-bottom: 1.25rem;
  max-width: 24ch;
}
.post .link-cta{ margin-top: auto; }

@media (max-width: 860px){
  .journal{ grid-template-columns: 1fr; gap: 3rem; }
  .post__media{ max-width: 420px; }
}

/* =====================================================================
   FOOTER
   ===================================================================== */

.footer{
  position: relative;
  padding-block: clamp(4rem, 8vw, 7rem) clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #1F1B1A 0%, var(--footer-bg) 100%);
}
.footer::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 82% 0%, rgba(90, 31, 44, .22), transparent 62%);
  pointer-events: none;
}

.footer .shell{ position: relative; }

.footer__top{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .6fr) minmax(0, .6fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line-soft);
}

.footer__place{
  margin-top: 1.25rem;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sand);
  opacity: .9;
}

.footer__label{
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sand);
  opacity: .82;
  margin-bottom: 1.5rem;
}

.footer__nav ul{ display: grid; gap: .85rem; justify-items: start; }
.footer__nav a,
.footer__link-btn{
  font-size: var(--fs-small);
  color: var(--ivory);
  position: relative;
  transition: color .3s var(--ease);
}
.footer__nav a::after,
.footer__link-btn::after{
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--cognac);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-slow);
}
.footer__nav a:hover::after,
.footer__nav a:focus-visible::after,
.footer__link-btn:hover::after,
.footer__link-btn:focus-visible::after{ transform: scaleX(1); transform-origin: left; }

.footer__signup-note{
  font-size: var(--fs-small);
  color: var(--sand);
  margin-bottom: 1.5rem;
  max-width: 32ch;
}

.newsletter__field{
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: .85rem;
  transition: border-color .4s var(--ease);
}
.newsletter__field:focus-within{ border-bottom-color: var(--cognac); }

.newsletter input{
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--ivory);
  font-family: inherit;
  font-size: var(--fs-small);
  padding: 0;
}
.newsletter input::placeholder{ color: var(--sand); opacity: .55; }
.newsletter input:focus{ outline: none; }

.newsletter__submit{
  flex: none;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sand);
  transition: color .3s var(--ease);
}
.newsletter__submit:hover,
.newsletter__submit:focus-visible{ color: var(--ivory); }

.newsletter__msg{
  min-height: 1.25rem;
  margin-top: .85rem;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--sand);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.newsletter__msg.is-shown{ opacity: .8; transform: none; }
.newsletter__msg.is-error{ color: var(--oxblood); opacity: 1; }

.social{
  display: flex;
  gap: 1.75rem;
  margin-top: 2.25rem;
}
.social button{
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sand);
  transition: color .3s var(--ease);
}
.social button:hover,
.social button:focus-visible{ color: var(--ivory); }

.footer__bottom{
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem clamp(1.5rem, 4vw, 3rem);
  align-items: baseline;
}
.footer__legal{
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sand);
  opacity: .78;
}
.footer__legal--age{ color: var(--sand); opacity: 1; }
.footer__credits{ text-transform: none; letter-spacing: .02em; opacity: .6; flex-basis: 100%; }
.footer__copy{ margin-left: auto; text-transform: none; letter-spacing: .02em; }

@media (max-width: 1080px){
  .footer__top{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__signup{ grid-column: 1 / -1; }
}
@media (max-width: 560px){
  .footer__top{ grid-template-columns: 1fr; }
  .footer__copy{ margin-left: 0; }
}

/* =====================================================================
   COMMERCE
   ===================================================================== */

/* --- Demo notice --------------------------------------------------
   Sample figures must announce themselves before anyone reads a price. */

/* Fixed to the foot of the viewport: a banner in normal flow would sit
   underneath the fixed header, and pushing the header down would change
   the layout the design is being reviewed in. */
.demo-bar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  background: var(--surface-2);
  border-top: 1px solid var(--cognac-soft);
}
.demo-bar__inner{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.1rem;
  padding-block: .7rem;
}
.demo-bar__tag{
  flex: none;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ivory);
  background: var(--garnet);
  padding: .3rem .6rem;
}
.demo-bar__text{
  font-size: .75rem;
  line-height: 1.5;
  color: var(--sand);
}
/* JS measures the bar and reserves room for it. */
body.has-demo-bar{ padding-bottom: var(--demo-bar-h, 0px); }
body.has-demo-bar .toast{ bottom: calc(var(--demo-bar-h, 0px) + 1.5rem); }

/* --- Proof strip --------------------------------------------------- */

.proof{
  border-bottom: 1px solid var(--line-soft);
  background: var(--proof-bg, #241E1D);
}
.proof__list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.proof__item{ display: grid; gap: .5rem; align-content: start; }
.proof__key{
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sand);
}
.proof__val{ font-size: var(--fs-small); line-height: 1.6; color: var(--ivory); }

@media (max-width: 760px){
  .proof__list{ grid-template-columns: 1fr; gap: 1.5rem; }
}

/* --- Help me choose ------------------------------------------------ */

.routes{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
}
.route{ background: var(--bg); }
.route__btn{
  display: grid;
  gap: .55rem;
  width: 100%;
  height: 100%;
  text-align: left;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  position: relative;
  transition: background-color .5s var(--ease);
}
.route__btn::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 50% 100%, rgba(90, 31, 44, .34), transparent 70%);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.route__btn:hover::before,
.route__btn:focus-visible::before{ opacity: 1; }

.route__prompt{
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--sand);
}
.route__wine{
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--ivory);
}
.route__note{
  font-size: .75rem;
  color: var(--sand);
  opacity: .8;
}
.route__go{
  font-size: 1rem;
  color: var(--cognac);
  transition: transform .45s var(--ease);
}
.route__btn:hover .route__go,
.route__btn:focus-visible .route__go{ transform: translateX(6px); }

@media (max-width: 1000px){ .routes{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .routes{ grid-template-columns: 1fr; } }

/* --- Wine card commerce block -------------------------------------- */

.wine__style,
.feature__style{
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
  color: var(--sand);
  margin-bottom: .85rem;
}
.feature__style{ font-size: clamp(1.2rem, 1.8vw, 1.5rem); margin-bottom: 1.25rem; }

.wine__vintage{ color: var(--sand); opacity: .7; }

.spec{
  display: grid;
  border-top: 1px solid var(--line-soft);
  margin-bottom: 1.25rem;
}
.spec__row{
  display: grid;
  grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
  gap: 1rem;
  padding-block: .6rem;
  border-bottom: 1px solid var(--line-soft);
}
.spec dt{
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sand);
  opacity: .8;
  padding-top: .15rem;
}
.spec dd{ margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--ivory); }
.spec--feature{ max-width: 34rem; }
.spec--feature .spec__row{ grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); }

.wine__foot{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-bottom: 1.35rem;
}
.price{
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.price__label{
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sand);
  opacity: .8;
}
.price__value{
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 400;
  color: var(--ivory);
}

.stock{
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sand);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.stock:empty{ display: none; }
.stock::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sand);
  flex: none;
}
.stock[data-tone="ok"]::before{ background: var(--cognac); }
.stock[data-tone="warn"]::before{ background: var(--oxblood); }
.stock[data-tone="off"]{ opacity: .6; }
.stock[data-tone="off"]::before{ background: var(--line); }

.wine__actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: auto;
}

/* A wine arrived at from "help me choose" announces itself briefly. */
.wine.is-picked,
.feature.is-picked{
  box-shadow: 0 0 0 1px var(--cognac);
  transition: box-shadow .5s var(--ease);
}
.wine:focus-visible,
.feature:focus-visible{ outline: 1px solid var(--ivory); outline-offset: 3px; }

/* --- Buy panels ---------------------------------------------------- */

.buy__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.panel{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.75rem, 3.2vw, 2.75rem);
  border: 1px solid var(--line-soft);
  background: var(--surface);
}
.panel__title{
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 300;
  line-height: 1.15;
  margin-bottom: .85rem;
}
.panel__note{
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--sand);
  max-width: 38ch;
  margin-bottom: 1.75rem;
}
.panel__meta{
  display: grid;
  gap: 0;
  width: 100%;
  margin-top: auto;
  padding-top: 1.75rem;
}
.panel__meta > div{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .7rem;
  border-top: 1px solid var(--line-soft);
}
.panel__meta dt{
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sand);
  opacity: .8;
}
.panel__meta dd{ margin: 0; font-size: var(--fs-small); color: var(--ivory); }

.ship{ width: 100%; }
.ship__field{
  display: flex;
  align-items: stretch;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: .85rem;
  transition: border-color .4s var(--ease);
}
.ship__field:focus-within{ border-bottom-color: var(--cognac); }
.ship select{
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--ivory);
  font-family: inherit;
  font-size: var(--fs-small);
  padding: 0;
  cursor: pointer;
  appearance: none;
}
.ship select:focus{ outline: none; }
.ship select option{ background: var(--surface-2); color: var(--ivory); }
.ship__submit{
  flex: none;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sand);
  transition: color .3s var(--ease);
}
.ship__submit:hover,
.ship__submit:focus-visible{ color: var(--ivory); }

.ship__result{
  min-height: 1.5rem;
  margin-top: 1rem;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--sand);
}
.ship__result:empty{ margin-top: 0; }
.ship__result[data-tone="ok"]{ color: var(--ivory); }
.ship__result[data-tone="warn"]{ color: var(--sand); }

@media (max-width: 820px){
  .buy__grid{ grid-template-columns: 1fr; }
}

/* --- Age gate ------------------------------------------------------ */

.agegate{
  width: min(520px, calc(100vw - 2 * var(--gutter)));
  max-width: none;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ivory);
}
.agegate::backdrop{
  background: rgba(24, 20, 19, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.agegate__inner,
.agegate__denied{
  padding: clamp(2rem, 5vw, 3.25rem);
  text-align: center;
  position: relative;
}
.agegate__inner::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 55% at 50% 0%, rgba(90, 31, 44, .34), transparent 66%);
  pointer-events: none;
}
.agegate__mark{ position: relative; margin-bottom: 2rem; }
.agegate__title{
  position: relative;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4vw, 2.35rem);
  font-weight: 300;
  line-height: 1.12;
  margin-bottom: 1rem;
}
.agegate__note{
  position: relative;
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--sand);
  margin-bottom: 2rem;
}
.agegate__actions{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.agegate__legal{
  position: relative;
  font-size: .6875rem;
  line-height: 1.5;
  color: var(--sand);
  opacity: .7;
}

/* --- Footer legal -------------------------------------------------- */

.footer__address{
  display: grid;
  gap: .45rem;
  margin-top: 1.5rem;
  font-style: normal;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--sand);
}
.footer__address a{ color: var(--ivory); }
.footer__address a:hover{ color: var(--sand); }

/* Links with no destination yet must not look like working links. */
[data-unset]{ cursor: pointer; }

.noscript-note{
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line-soft);
  font-size: var(--fs-small);
  color: var(--sand);
}

@media (max-width: 1180px){
  .header__stockist{ display: none; }
}
@media (max-width: 640px){
  .header__buy{ display: none; }
}

/* =====================================================================
   FILM DIALOG
   ===================================================================== */

.film{
  width: min(1100px, calc(100vw - 2 * var(--gutter)));
  max-width: none;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ivory);
  overflow: visible;
}
.film::backdrop{
  background: rgba(24, 20, 19, .84);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.film[open]{ animation: filmIn .5s var(--ease-slow); }
@keyframes filmIn{
  from{ opacity: 0; transform: translateY(14px) scale(.99); }
  to  { opacity: 1; transform: none; }
}

.film__inner{ padding: clamp(1.25rem, 2.5vw, 2rem); }
.film__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}
.film__title{
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sand);
}
.film__close{
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sand);
  padding: .5rem;
  margin: -.5rem;
  transition: color .3s var(--ease);
}
.film__close:hover{ color: var(--ivory); }
.film .media__inner{ transform: none; }

/* =====================================================================
   TOAST
   ===================================================================== */

.toast{
  position: fixed;
  left: 50%;
  bottom: 2rem;
  z-index: 180;
  transform: translate(-50%, 1.5rem);
  padding: .9rem 1.5rem;
  background: var(--surface-2);
  border: 1px solid var(--cognac-soft);
  color: var(--ivory);
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease-slow);
  max-width: calc(100vw - 2rem);
  text-align: center;
}
.toast.is-shown{ opacity: 1; transform: translate(-50%, 0); }

/* =====================================================================
   GRAIN
   ===================================================================== */

.grain{
  position: fixed;
  inset: -10%;
  z-index: 190;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 8s steps(6) infinite;
}
@keyframes grainShift{
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-1.5%, 1%); }
  40%  { transform: translate(1%, -1.5%); }
  60%  { transform: translate(-1%, -1%); }
  80%  { transform: translate(1.5%, .5%); }
  100% { transform: translate(0, 0); }
}

/* =====================================================================
   SCROLL REVEAL
   ===================================================================== */

[data-reveal],
[data-reveal-group] > *{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .95s var(--ease), transform .95s var(--ease-slow);
}
[data-reveal].is-in,
[data-reveal-group].is-in > *{
  opacity: 1;
  transform: none;
}

[data-reveal="clip"]{
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.35s var(--ease-slow);
}
[data-reveal="clip"].is-in{ clip-path: inset(0 0 0 0); }
[data-reveal="clip"].is-in .media__inner{ transform: scale(1); }

/* soils / sites animate their own bands, so keep their wrappers static */
[data-reveal-group].soils > *,
[data-reveal-group].sites > *{ transition-delay: 0ms; }

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }

  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .hero__line > span{ transform: none; }
  .hero__lede, .hero__actions, .hero__foot{ opacity: 1; }
  .grain{ animation: none; }

  [data-reveal],
  [data-reveal-group] > *{ opacity: 1; transform: none; }
  [data-reveal="clip"]{ clip-path: none; }
  .media__inner{ transform: none; }
  .soil__band{ transform: scaleY(1); }
  .site__mark{ transform: scaleX(1); }
  .process__track{ transform: scaleX(1); }
  .process__dot{ transform: scale(1); background: var(--oxblood); }
  .process__label{ opacity: 1; transform: none; }
  .route__go{ transform: none; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 640px){
  .process__track{ transform: scaleY(1); }
}

/* =====================================================================
   PRINT
   ===================================================================== */

@media print{
  .header, .menu, .grain, .toast, .film, .scroll-cue{ display: none !important; }
  body{ background: #fff; color: #000; }
}

/* =====================================================================
   SECTION THEMES
   ---------------------------------------------------------------------
   Each scope re-declares the tokens the components already read, so a
   light section flips its own text, rules and surfaces without any
   component rule being touched. Grounds are always set as an explicit
   background-color (a gradient alone leaves the computed value
   transparent, which breaks contrast auditing and inherited surfaces).
   ===================================================================== */

/* Colour now does the separating, so the hairline between sections goes. */
.section + .section{ border-top: 0; }

/* --- Light scope --------------------------------------------------- */

.proof,
.section--choose,
.section--buy,
.section--story,
.section--visit,
.place:not(.place--reverse){
  --ivory:       var(--ink);
  --sand:        var(--ink-2);
  --line:        rgba(32, 27, 26, .20);
  --line-soft:   rgba(32, 27, 26, .10);
  --cognac:      #A8792F;              /* gold deepened just enough to read on cream */
  --cognac-soft: rgba(110, 31, 42, .26);
  --label:       var(--garnet);
  --surface:     var(--champagne);
  --surface-2:   var(--champagne-2);
  --slot-deep:   #CFBE97;
  color: var(--ink);
}

/* Photographs need less crushing when they sit on a light ground. */
.proof .media__inner img,
.section--choose .media__inner img,
.section--buy .media__inner img,
.section--story .media__inner img,
.section--visit .media__inner img,
.place:not(.place--reverse) .media__inner img{
  filter: saturate(.62) sepia(.16) brightness(.94) contrast(1.03);
}
.section--story .media__frame:has(img)::after,
.section--visit .media__frame:has(img)::after,
.place:not(.place--reverse) .media__frame:has(img)::after{
  background: linear-gradient(175deg, rgba(32, 27, 26, .06) 0%, rgba(32, 27, 26, .26) 100%);
}

/* --- Labels -------------------------------------------------------- */

.eyebrow,
.wine__region,
.ledger__key,
.place__index,
.post__cat,
.process__num,
.vcard__region,
.proof__key,
.price__label,
.spec dt,
.panel__meta dt,
.footer__label{
  color: var(--label);
  opacity: 1;
}
.eyebrow::after{ background: var(--cognac-soft); }

/* --- 1. Hero ------------------------------------------------------- */

.hero__layer{
  background:
    radial-gradient(58% 52% at 20% 16%, rgba(198, 154, 82, .16), transparent 62%),
    radial-gradient(66% 58% at 80% 26%, rgba(143, 38, 56, .40), transparent 64%),
    radial-gradient(120% 80% at 50% 108%, rgba(58, 32, 39, .95), transparent 70%),
    linear-gradient(178deg, #3A2027 0%, #2B1B20 48%, #201B1A 100%);
}
.hero__scrim{
  background:
    linear-gradient(100deg, rgba(32, 27, 26, .60) 0%, rgba(32, 27, 26, .26) 42%, rgba(32, 27, 26, 0) 72%),
    linear-gradient(180deg, rgba(32, 27, 26, .26) 0%, rgba(43, 27, 32, .46) 46%, rgba(32, 27, 26, .78) 100%);
}
.hero__est,
.scroll-cue{ color: var(--gold); }
.scroll-cue__line::after{ background: var(--gold); }

/* --- 2. Proof ------------------------------------------------------ */

.proof{
  --proof-bg: var(--cream);
  background-color: var(--cream);
  border-bottom: 1px solid rgba(32, 27, 26, .12);
}
.proof__item{ position: relative; padding-top: 1.1rem; }
.proof__item::before{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 34px; height: 2px;
  background: var(--gold);
}

/* --- 3. Help me choose --------------------------------------------- */

.section--choose{
  background-color: var(--champagne);
  background-image: linear-gradient(170deg, #EFE2C4 0%, var(--champagne) 46%, #DFCDA6 100%);
}
.section--choose .routes{
  background: rgba(32, 27, 26, .14);
  border-block-color: rgba(32, 27, 26, .16);
}
.route{ background: rgba(245, 239, 227, .72); }
.route__btn::before{
  background: linear-gradient(180deg, transparent 0%, var(--route-tint, rgba(110, 31, 42, .16)) 100%);
}
.route__go{ color: var(--garnet); }
.route:nth-child(1){ --route-tint: rgba(155, 175, 98, .26); }   /* fresh and bright */
.route:nth-child(2){ --route-tint: rgba(198, 154, 82, .28); }   /* with fish */
.route:nth-child(3){ --route-tint: rgba(214, 196, 140, .34); }  /* a gift */
.route:nth-child(4){ --route-tint: rgba(110, 31, 42, .24); }    /* complex reds */
.route__btn:hover,
.route__btn:focus-visible{ background: rgba(245, 239, 227, .95); }

/* --- 4. Wines ------------------------------------------------------ */

.section--wines{
  --wines-bg: none;
  --feature-bg: linear-gradient(150deg, #33292700 0%, transparent 70%);
  background-color: #2A2321;
  background-image:
    radial-gradient(72% 40% at 50% 0%, rgba(110, 31, 42, .26), transparent 68%);
}
.section--wines .wine{ background: var(--surface-2); }
.section--wines .wines{ background: rgba(232, 216, 181, .12); }

.feature{
  background-color: var(--surface-2);
  background-image: linear-gradient(150deg, rgba(198, 154, 82, .07) 0%, transparent 62%);
  border-color: rgba(232, 216, 181, .18);
}

/* Each wine carries its own light. Nothing becomes a block of colour. */
.wine,
.feature{ --wine-accent: var(--gold); --wine-glow: rgba(198, 154, 82, .26); }
[data-wine="sauvignon-blanc"]{ --wine-accent: #9BAF62; --wine-glow: rgba(155, 175, 98, .30); }
[data-wine="chardonnay"]    { --wine-accent: #C69A52; --wine-glow: rgba(198, 154, 82, .30); }
[data-wine="te-koko"]       { --wine-accent: #B0A45A; --wine-glow: rgba(176, 164, 90, .28); }
[data-wine="pinot-noir"]    { --wine-accent: #8F2638; --wine-glow: rgba(143, 38, 56, .36); }
[data-wine="te-wahi"]       { --wine-accent: #6E1F2A; --wine-glow: rgba(110, 31, 42, .42); }
[data-wine="pelorus"]       { --wine-accent: #D6C48C; --wine-glow: rgba(214, 196, 140, .30); }
[data-wine="pelorus-rose"]  { --wine-accent: #C9828A; --wine-glow: rgba(201, 130, 138, .32); }

.wine::before{
  background: radial-gradient(70% 45% at 50% 22%, var(--wine-glow), transparent 68%);
  opacity: .55;
}
.wine:hover::before,
.wine:focus-within::before{ opacity: 1; }
.wine::after{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--wine-accent);
  opacity: .34;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.wine:hover::after,
.wine:focus-within::after{ opacity: .95; }
.wine__region{ color: var(--wine-accent); }
.feature__glow{
  background: radial-gradient(50% 48% at 50% 52%, var(--wine-glow), rgba(110, 31, 42, .14) 55%, transparent 72%);
}
.feature .wine__region{ color: var(--wine-accent); }

.stock[data-tone="ok"]::before{ background: #9BAF62; }
.stock[data-tone="warn"]::before{ background: var(--gold); }

/* --- 5. Buy -------------------------------------------------------- */

.section--buy{
  background-color: var(--cream);
  background-image: linear-gradient(180deg, #F8F3E9 0%, var(--cream) 100%);
}
.section--buy .panel{
  background-color: var(--champagne);
  border-color: rgba(32, 27, 26, .14);
  transition: border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.section--buy .panel:hover{
  border-color: var(--gold);
  box-shadow: 0 10px 30px -18px rgba(32, 27, 26, .45);
}
.ship select option{ background: var(--cream); color: var(--ink); }
.ship__result[data-tone="ok"]{ color: #4A5A32; }
.ship__result[data-tone="warn"]{ color: var(--garnet); }

/* --- 6. Trust ------------------------------------------------------ */

.section--trust{
  --label: var(--gold-hi);
  --line: rgba(232, 216, 181, .22);
  --line-soft: rgba(232, 216, 181, .12);
  --cognac: var(--gold);
  background-color: var(--burgundy);
  background-image:
    radial-gradient(80% 60% at 15% 0%, rgba(143, 38, 56, .34), transparent 62%),
    radial-gradient(60% 50% at 100% 100%, rgba(198, 154, 82, .10), transparent 66%);
}
.section--trust .ledger__row{ border-bottom-color: rgba(232, 216, 181, .14); }
.section--trust .ledger{ border-top-color: rgba(198, 154, 82, .45); }

/* --- 7. Story ------------------------------------------------------ */

.section--story{
  background-color: var(--cream-2);
  background-image: radial-gradient(70% 50% at 88% 0%, rgba(110, 31, 42, .07), transparent 62%);
}
.section--story .facts{ border-top-color: rgba(110, 31, 42, .40); }

/* --- 8. Terroir ---------------------------------------------------- */

.section--terroir{
  background-color: var(--cream-2);
  --ivory: var(--ink);
  --sand: var(--ink-2);
  --line: rgba(32, 27, 26, .20);
  --line-soft: rgba(32, 27, 26, .10);
  --label: var(--garnet);
  color: var(--ink);
}
.place:not(.place--reverse){
  background-color: var(--clay);
  background-image: linear-gradient(170deg, #E1DAC4 0%, var(--clay) 100%);
}
.place:not(.place--reverse) .place__index{ color: #4A5A32; }
.place:not(.place--reverse) .soils__key{ border-top-color: rgba(102, 112, 74, .45); }
.place:not(.place--reverse){ --soil-ground: #C6BDA0; }

.place--reverse{
  --ivory:       var(--cream);
  --sand:        #DCD5C2;
  --line:        rgba(232, 216, 181, .24);
  --line-soft:   rgba(232, 216, 181, .13);
  --cognac:      var(--gold);
  --cognac-soft: rgba(198, 154, 82, .40);
  --label:       var(--gold-hi);
  --surface:     #3C4E3F;
  --surface-2:   #45584A;
  --slot-deep:   #2C3B2E;
  background-color: var(--forest);
  background-image: linear-gradient(170deg, #3A4D3C 0%, var(--forest) 60%, #2C3B2E 100%);
  color: var(--cream);
}
.place--reverse .site__mark{ background: var(--rose); }

/* --- 9. Craft ------------------------------------------------------ */

.section--craft{
  background-color: #2A211F;
  background-image:
    radial-gradient(60% 45% at 50% 0%, rgba(198, 154, 82, .14), transparent 66%),
    radial-gradient(70% 50% at 50% 100%, rgba(110, 31, 42, .20), transparent 70%);
}
.section--craft .process__track{ background: linear-gradient(90deg, var(--gold), var(--oxblood)); }
.section--craft .process__dot{ border-color: var(--gold); }
.section--craft .process.is-in .process__dot{ background: var(--gold); }

/* --- 10. Sustainability -------------------------------------------- */

.section--sustain{
  --ivory:       var(--cream);
  --sand:        #E4DCCB;
  --line:        rgba(245, 239, 227, .28);
  --line-soft:   rgba(245, 239, 227, .16);
  --cognac:      var(--gold-hi);
  --cognac-soft: rgba(217, 176, 114, .45);
  --label:       var(--cream);
  --surface:     #5E6845;
  --surface-2:   #6B7550;
  --slot-deep:   #4E5638;
  background-color: #5A6342;
  background-image: linear-gradient(168deg, var(--olive) 0%, #5A6342 58%, #4E5638 100%);
  color: var(--cream);
}
.section--sustain .ledger{ border-top-color: rgba(217, 176, 114, .55); }
.section--sustain .ledger__key{ color: var(--champagne); }

/* --- 11. Visit ----------------------------------------------------- */

.section--visit{
  background-color: var(--cream);
  background-image: linear-gradient(180deg, var(--cream) 0%, #F0E8D9 100%);
}
.section--visit .vcard{
  background-color: var(--champagne);
  border-color: rgba(32, 27, 26, .14);
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.section--visit .vcard:hover,
.section--visit .vcard:focus-within{
  background-color: var(--champagne);
  border-color: var(--garnet);
  transform: translateY(-4px) scale(1.006);
  box-shadow: 0 18px 40px -24px rgba(58, 29, 36, .55);
}
.section--visit .vcard__media .media__frame{ border-bottom-color: rgba(32, 27, 26, .14); }

/* --- 12. Journal --------------------------------------------------- */

.section--journal{
  background-color: #2A2321;
  background-image: radial-gradient(70% 45% at 50% 0%, rgba(110, 31, 42, .18), transparent 66%);
}
.section--journal .post{
  --post-pad: clamp(1.25rem, 2vw, 1.75rem);
  background: var(--post-bg, var(--surface-2));
  border: 1px solid var(--line-soft);
  padding: 0 var(--post-pad) var(--post-pad);
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.section--journal .post__media{
  width: calc(100% + var(--post-pad) * 2);
  max-width: none;
  margin-inline: calc(var(--post-pad) * -1);
  margin-bottom: var(--post-pad);
}
.section--journal .post:hover{
  transform: translateY(-4px);
  border-color: var(--post-accent);
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .7);
}
.section--journal .post__cat{ color: var(--post-accent); }
.section--journal .post:nth-child(1){ --post-bg: #332927; --post-accent: #C69A52; }
.section--journal .post:nth-child(2){ --post-bg: #3A2B28; --post-accent: #C9828A; }
.section--journal .post:nth-child(3){ --post-bg: #2E2925; --post-accent: #8F2638; }

/* --- 13. Footer ---------------------------------------------------- */

.footer{ border-top: 1px solid rgba(198, 154, 82, .30); }
.footer::before{
  background:
    radial-gradient(60% 70% at 82% 0%, rgba(110, 31, 42, .30), transparent 62%),
    radial-gradient(40% 50% at 8% 100%, rgba(198, 154, 82, .07), transparent 66%);
}
.footer__legal--age{ color: var(--gold); opacity: 1; }

/* =====================================================================
   CONTROLS
   ===================================================================== */

.btn--solid{
  /* Always cream on wine, whatever the surrounding scope says. */
  --btn-fg: var(--cream);
  background: var(--oxblood);
  border-color: var(--oxblood);
  box-shadow: 0 0 0 0 rgba(169, 52, 72, 0);
  transition: color .4s var(--ease), border-color .4s var(--ease),
              background-color .4s var(--ease), box-shadow .5s var(--ease);
}
.btn--solid::before{ background: var(--oxblood-hi); }
.btn--solid:hover,
.btn--solid:focus-visible{
  border-color: var(--oxblood-hi);
  box-shadow: 0 8px 24px -12px rgba(169, 52, 72, .7);
}

.btn--hairline{
  border-color: var(--gold);
  color: var(--sand);
}
.btn--hairline:hover,
.btn--hairline:focus-visible{
  background: rgba(198, 154, 82, .12);
  border-color: var(--gold-hi);
  color: var(--ivory);
}

.btn--play .btn__play{ border-color: var(--gold); }
.btn--play:hover .btn__play,
.btn--play:focus-visible .btn__play{
  border-color: var(--gold-hi);
  background: rgba(198, 154, 82, .16);
}

.link-cta::after{ background: var(--cognac); }
.link-cta:hover::after,
.link-cta:focus-visible::after{ background: var(--oxblood); }

.nav__list a::after{ background: var(--gold); }
.demo-bar__tag{ background: var(--oxblood); }

/* =====================================================================
   REDUCED MOTION — the new hovers must not move either
   ===================================================================== */

@media (prefers-reduced-motion: reduce){
  .section--visit .vcard:hover,
  .section--visit .vcard:focus-within,
  .section--journal .post:hover{ transform: none; }
}

/* =====================================================================
   LEGIBILITY PASS
   ---------------------------------------------------------------------
   A saturated red on a dark ground cannot carry 10–11px text: #8F2638 on
   #332927 measures 1.7:1 and #6E1F2A measures 1.3:1, and no amount of
   tuning fixes that without leaving the palette. So the wine and journal
   identities split in two: the brief's colour keeps the decorative work
   (top rule, glow, hover border), and the small-caps label falls back to
   a member of the palette that actually reads. Everything below was
   found by measuring, not by eye.
   ===================================================================== */

/* Wine cards. Tinting five labels and falling back to gold on the two
   dark reds looked like an accident rather than a decision, so every
   region label is gold and the wine's own colour does its work where it
   has no contrast obligation: the 2px top rule and the glow behind the
   bottle. Seven differently-tinted 11px labels also read as busier than
   the design wants. */
.wine__region,
.feature .wine__region{ color: var(--label); }

/* Journal keeps three distinguishable categories, which is the point of
   category colour. Winemaking's #8F2638 is unreadable at 10px on a dark
   card, so it moves to the card's border and hover while the label takes
   champagne — still clearly a third colour, not a repeat of gold. */
.section--journal .post{ --post-label: var(--post-accent); }
.section--journal .post:nth-child(3){ --post-label: var(--champagne); }
.section--journal .post__cat{ color: var(--post-label); }

/* Small text that was dimmed for a dark ground needs its full value on
   a light one. */
:is(.proof, .section--choose, .section--buy, .section--story,
    .section--visit, .section--terroir, .place:not(.place--reverse))
:is(.media__caption, .soils__key, .route__note, .slot-tag__note,
    .slot-tag__id, .facts dt, .footer__label, .panel__note, .section__note){
  opacity: 1;
}

.footer__credits{ opacity: .78; }


/* ---------- Первый экран на телефонах и планшетах ----------
   Кадр залива снят горизонтально (2000x1361), а первый экран на телефоне —
   вытянутый вертикально. object-fit: cover обрезал панораму до ~37% ширины:
   от изгиба залива, ради которого кадр и выбран, не оставалось ничего.
   Поэтому на узких экранах фото занимает собственную полосу в пропорции самого
   кадра — панорама видна целиком, — а текст идёт под ней на фоне страницы.
   До 1023px включительно: на планшете в портрете кадр обрезался до ~41%.
   Десктоп (1024+) остаётся полноэкранным, как задуман. */
@media (max-width: 1023px){
  .hero{
    min-height: 0;
    grid-template-rows: auto auto auto;
    align-items: start;
    padding-top: var(--header-h);
  }

  .hero__media{
    position: relative;
    inset: auto;
    z-index: 0;
    grid-row: 1;
    aspect-ratio: 2000 / 1361;
  }

  /* дрейф-зум увеличивал кадр на 9% и добавлял обрезку — на полосе он лишний */
  .hero__media img,
  .hero__media video{ animation: none; }

  .hero__content{ grid-row: 2; padding-top: clamp(1.5rem, 5vw, 2rem); }
  .hero__foot{ grid-row: 3; }

  /* затемнение поверх всего экрана больше не нужно: вместо него мягкий
     переход от нижней кромки фото к фону страницы */
  .hero__scrim{ display: none; }
  .hero__media::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to top, var(--bg) 0%, rgba(32, 27, 26, 0) 100%);
  }
}