/** Shopify CDN: Minification failed

Line 1821:1 Unexpected "}"

**/
/* ==========================================================================
   TOKO — Toplički Vinogradi
   Design system: Monumental Earth.
     Primary  #8B4513   Secondary #D4AF37   Tertiary #4A4A4A   Neutral #121212
     Headline EB Garamond   Body and label Hanken Grotesk
   Laid on daylight paper. Everything that moves moves on transform or
   opacity, so the descent holds 60fps on a mid-range phone.
   ========================================================================== */

/* ------------------------------------------------------------- tokens */
:root{
  /* brand */
  --primary:      #8B4513;
  --primary-lit:  #A85A22;
  --primary-pale: #F0E2D6;
  --gold:         #D4AF37;
  --gold-deep:    #9C7C1F;   /* the gold, taken dark enough to read on paper */
  --tertiary:     #4A4A4A;
  --neutral:      #121212;

  /* paper, from the primary tint ramp */
  --paper:    #FCF9F6;
  --paper-2:  #F6EFE8;
  --paper-3:  #EDE1D6;
  --paper-4:  #E2D1C1;

  /* ink */
  --ink:    #121212;
  --ink-2:  #4A4A4A;
  --ink-3:  rgba(18,18,18,.64);
  --ink-4:  rgba(18,18,18,.5);
  --line:   rgba(18,18,18,.14);

  /* light type, for the two places where photography takes over */
  --bone:      #FCF9F6;
  --bone-2:    rgba(252,249,246,.8);
  --bone-3:    rgba(252,249,246,.58);
  --bone-4:    rgba(252,249,246,.34);
  --bone-line: rgba(252,249,246,.24);

  --shell:  min(1440px, 100% - 2 * var(--pad));
  --pad:    clamp(20px, 5vw, 72px);
  --rule:   1px solid var(--line);

  --dsp: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --ui:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* --------------------------------------------------------------- base */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--paper) }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ui);
  font-weight:300;
  font-size:clamp(15.5px,1vw,17px);
  line-height:1.68;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{ overflow:hidden }

img,svg,picture{ display:block; max-width:100% }
img{ height:auto }
/* <picture> is the img's real parent, so it has to carry the height
   before a percentage height on the img can resolve against anything. */
.hero__media picture,
.frame picture,
.gbg{ display:block; width:100%; height:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
h1,h2,h3,h4{
  margin:0; font-family:var(--dsp); font-weight:400;
  letter-spacing:-.01em; line-height:1.06;
}
p{ margin:0 0 1.15em }
p:last-child{ margin-bottom:0 }
dl,dd,dt,ol,ul{ margin:0; padding:0; list-style:none }

/* The parts we did not draw still belong to the design: the caret, the
   scrollbar, the focus ring, the selection, the numerals in data. */
::selection{ background:var(--primary); color:#FFF7EF }
::-moz-selection{ background:var(--primary); color:#FFF7EF }
:focus-visible{
  outline:2px solid var(--primary); outline-offset:3px; border-radius:2px;
}
html{ scrollbar-color:rgba(139,69,19,.4) var(--paper-2); scrollbar-width:thin }
::-webkit-scrollbar{ width:11px; height:11px }
::-webkit-scrollbar-track{ background:var(--paper-2) }
::-webkit-scrollbar-thumb{
  background:rgba(139,69,19,.36);
  border:3px solid var(--paper-2); border-radius:99px;
}
::-webkit-scrollbar-thumb:hover{ background:rgba(139,69,19,.6) }
:root{ accent-color:var(--primary); caret-color:var(--primary) }
a{ text-underline-offset:.18em; text-decoration-thickness:1px }
.specs dd,.wine__spec dd,.hero__facts dd,.ticker b,.awardlist__year,.land__facts dd{
  font-variant-numeric:tabular-nums;
}

.vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:fixed; top:-100px; left:16px; z-index:200;
  padding:12px 18px; background:var(--neutral); color:var(--paper);
  font-family:var(--ui); font-size:13px; letter-spacing:.06em; text-transform:uppercase;
}
.skip:focus{ top:16px }

.wrap{ width:var(--shell); margin-inline:auto }

/* --------------------------------------------------------- typography */
.dsp{
  font-family:var(--dsp); font-weight:400;
  font-size:clamp(2.5rem, 6.4vw, 5.6rem);
  line-height:1.0; letter-spacing:-.018em;
}
.dsp--xl{ font-size:clamp(3.8rem, 13.5vw, 11.5rem); letter-spacing:-.035em; line-height:.92 }
.dsp--sm{ font-size:clamp(1.9rem, 3.4vw, 2.9rem) }

.eyebrow{
  font-family:var(--ui); font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 1.4em; display:flex; align-items:center; gap:.9em;
}
.eyebrow .num{
  color:var(--primary); font-variant-numeric:tabular-nums;
  position:relative; padding-right:.9em;
}
.eyebrow .num::after{
  content:""; position:absolute; right:0; top:50%;
  width:.45em; height:1px; background:var(--line);
}
.lede{
  font-family:var(--dsp);
  font-size:clamp(1.3rem, 2vw, 1.8rem);
  line-height:1.42; color:var(--ink); letter-spacing:-.005em;
}
/* Every chapter opens as a plate in the estate survey: the number of the
   chapter stands monumental behind the head, and a datum line closes it.
   The rest of the section hangs from that line. */
.chead{
  margin-bottom:clamp(40px,6vw,84px);
  position:relative;
  padding-bottom:clamp(20px,2.8vw,34px);
  border-bottom:var(--rule);
}
.chead > *{ position:relative; z-index:1 }
.chead__no{
  position:absolute; z-index:0; right:0; bottom:-.04em;
  font-family:var(--dsp); font-weight:400;
  font-size:clamp(7rem,16vw,15rem); line-height:.72; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:rgba(139,69,19,.08);
  pointer-events:none; user-select:none;
}
@supports (-webkit-text-stroke: 1px red){
  .chead__no{ color:transparent; -webkit-text-stroke:1.2px rgba(139,69,19,.26) }
}
.east .chead__no{ color:rgba(212,175,55,.1) }
@supports (-webkit-text-stroke: 1px red){
  .east .chead__no{ color:transparent; -webkit-text-stroke:1.2px rgba(212,175,55,.32) }
}

/* ------------------------------------------------------------ buttons */
.btn{
  --bg:transparent; --fg:var(--ink); --bd:rgba(18,18,18,.24);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:14px 26px;
  font-family:var(--ui); font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bd); border-radius:999px;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.btn--solid{ --bg:var(--primary); --fg:#FFF7EF; --bd:var(--primary) }
.btn--solid:hover{ --bg:#733909; --bd:#733909 }
.btn--line:hover,.btn--ghost:hover{ --bd:var(--primary); --fg:var(--primary); --bg:rgba(139,69,19,.06) }
.btn{ transition-duration:.2s }
.btn:active{ transform:scale(.97) }

.link{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--ui); font-size:13px; font-weight:400; letter-spacing:.03em;
  color:var(--ink-2); padding-bottom:4px;
  border-bottom:1px solid var(--line);
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.link svg{ width:16px; height:16px; transition:transform .22s var(--ease-out) }
.link{ transition-duration:.2s }
@media (hover:hover) and (pointer:fine){
  .link:hover{ color:var(--primary); border-color:var(--primary) }
  .link:hover svg{ transform:translateX(5px) }
}
.link:active svg{ transform:translateX(2px) }

/* ------------------------------------------------------------ reveals
   Four entrances, assigned by what the element is rather than one fade
   applied to everything. Type wipes up from its own baseline, photography
   uncovers, groups arrive in sequence, everything else simply rises. */
.rv .reveal{
  opacity:0; transform:translate3d(0,16px,0);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change:opacity, transform;
}
.rv .reveal.is-in{ opacity:1; transform:none; will-change:auto }

/* type: a wipe from the baseline, so the letters arrive rather than slide.
   The clip sits on the children, never on the observed element itself: a
   clipped box reports zero intersection and would never trigger. */
.rv .reveal[data-rv="wipe"]{ opacity:1; transform:none }
.rv .reveal[data-rv="wipe"] > *{
  clip-path:inset(-.3em 0 106% 0);
  transition:clip-path .95s var(--ease-out);
  will-change:clip-path;
}
.rv .reveal[data-rv="wipe"].is-in > *{ clip-path:inset(-.3em 0 -.25em 0) }
.rv .reveal[data-rv="wipe"] > *:nth-child(2){ transition-delay:.09s }
.rv .reveal[data-rv="wipe"] > *:nth-child(3){ transition-delay:.17s }

/* photography: uncovered from the bottom while it settles out of a push in */
.rv .reveal[data-rv="frame"]{ opacity:1; transform:none; overflow:hidden }
.rv .reveal[data-rv="frame"] > *{
  clip-path:inset(0 0 100% 0);
  transform:scale(1.06);
  transition:clip-path 1.15s var(--ease-out), transform 1.5s var(--ease-out);
  will-change:clip-path, transform;
}
.rv .reveal[data-rv="frame"].is-in > *{ clip-path:inset(0 0 0 0); transform:none }

/* a group arrives as a phrase; the delay is set per child in toko.js */
.rv .reveal[data-rv="seq"]{ transform:translate3d(0,12px,0) }

@media (prefers-reduced-motion: reduce){
  .rv .reveal[data-rv="wipe"] > *,
  .rv .reveal[data-rv="frame"] > *{ clip-path:none; transform:none }
}

/* ----------------------------------------------------------- age gate */
.gate{
  position:fixed; inset:0; z-index:150;
  display:grid; place-items:center;
  background:var(--paper); padding:var(--pad);
  transition:opacity .9s var(--ease), visibility .9s;
}
.gate[hidden]{ display:none }
.gate.is-out{ opacity:0; visibility:hidden; pointer-events:none }
.gate__grain{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 85% at 50% 0%, rgba(139,69,19,.1), transparent 62%),
    radial-gradient(90% 70% at 50% 100%, rgba(212,175,55,.14), transparent 68%);
}
.gate__inner{ position:relative; text-align:center; max-width:min(520px,92vw) }
.gate__inner .eyebrow{ justify-content:center }
.gate__mark{
  width:44px; margin:0 auto 30px; color:var(--primary);
  animation:markIn 1.4s var(--ease-out) both;
}
.gate__title{
  font-size:clamp(3.4rem,12vw,5.6rem); letter-spacing:.06em;
  line-height:1; margin:0 0 .5em;
  animation:markIn 1.4s .1s var(--ease-out) both;
}
.gate__ask{ color:var(--ink-2); font-size:1.05rem; margin-bottom:2em }
.gate__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.gate__fine,.gate__deny{
  font-family:var(--ui); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-4); margin:2.4em 0 0;
}
.gate__deny{ color:var(--primary); text-transform:none; letter-spacing:.01em; font-size:14px }
@keyframes markIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* ---------------------------------------------------------------- nav */
.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:20px var(--pad);
  color:var(--bone);
  transition:background .6s var(--ease), padding .6s var(--ease), color .5s var(--ease), transform .5s var(--ease);
}
.nav.is-stuck{
  background:rgba(252,249,246,.88);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  padding-block:13px;
  border-bottom:var(--rule);
  color:var(--ink);
}
.nav.is-hidden{ transform:translateY(-102%) }
.nav__brand{ display:flex; align-items:center; gap:11px }
.nav__mark{ width:19px; color:var(--gold); transition:color .5s var(--ease) }
.nav.is-stuck .nav__mark{ color:var(--primary) }
.nav__word{ font-family:var(--dsp); font-size:23px; letter-spacing:.14em; font-weight:400 }
.nav__links{ display:flex; gap:30px }
.nav__links a{
  font-family:var(--ui); font-size:12px; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase;
  opacity:.74; position:relative; padding:4px 0;
  transition:opacity .4s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease-out);
}
.nav__links a:hover{ opacity:1 }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left }
.nav__end{ display:flex; align-items:center; gap:18px }
.nav .btn{ padding:10px 20px; font-size:11px; --fg:currentColor; --bd:currentColor }
.nav .btn--line{ opacity:.8 }
.nav .btn--line:hover{ opacity:1; --bg:rgba(139,69,19,.1) }
.nav.is-stuck .btn--line:hover{ --fg:var(--primary); --bd:var(--primary) }

.lang{ display:flex; align-items:center; gap:6px; font-family:var(--ui); font-size:11px; letter-spacing:.1em; opacity:.5 }
.lang__btn{ padding:4px 2px; opacity:.7; transition:opacity .35s var(--ease), color .35s var(--ease) }
.lang__btn.is-on{ opacity:1; color:var(--gold) }
.nav.is-stuck .lang__btn.is-on{ color:var(--primary) }
.lang__btn:hover{ opacity:1 }

.nav__burger{ display:none; width:26px; height:16px; position:relative }
.nav__burger span{
  position:absolute; left:0; width:100%; height:1px; background:currentColor;
  transition:transform .45s var(--ease), opacity .3s;
}
.nav__burger span:first-child{ top:3px }
.nav__burger span:last-child{ bottom:3px }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(4.5px) rotate(45deg) }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-4.5px) rotate(-45deg) }

.navpanel{
  position:fixed; inset:0; z-index:99;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:0 var(--pad);
  background:var(--paper); color:var(--ink);
  opacity:0; transition:opacity .5s var(--ease);
}
.navpanel[hidden]{ display:none }
.navpanel.is-open{ opacity:1 }
.navpanel a{
  font-family:var(--dsp);
  font-size:clamp(2rem,8vw,3.2rem); letter-spacing:-.01em;
  padding:10px 0; color:var(--ink-2); border-bottom:var(--rule);
}

/* --------------------------------------------------------- depth rail */
.rail{
  position:fixed; right:calc(var(--pad) * .5); top:50%; z-index:60;
  transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  font-family:var(--ui); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-4);
  opacity:0; transition:opacity .8s var(--ease), color .6s var(--ease);
  pointer-events:none;
}
.rail.is-on{ opacity:1 }
.rail__label{ writing-mode:vertical-rl; letter-spacing:.24em }
.rail__num{ color:var(--primary); font-variant-numeric:tabular-nums }
.rail__track{ position:relative; width:1px; height:130px; background:currentColor; opacity:.45 }
.rail__fill{
  position:absolute; inset:0 auto auto 0; width:1px; height:100%;
  background:var(--primary); transform:scaleY(0); transform-origin:top;
}
.rail__depth{ font-variant-numeric:tabular-nums; opacity:0; transition:opacity .5s var(--ease) }
.rail__depth i{ font-style:normal; opacity:.5; margin-left:1px }
.rail.is-deep .rail__depth{ opacity:1 }

/* --------------------------------------------------------------- hero */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(96px,13vh,140px) var(--pad) clamp(28px,4vh,48px);
  overflow:hidden; isolation:isolate;
  color:var(--bone);
}
.hero__media{ position:absolute; inset:0; z-index:-1; background:#5A6A44 }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:10% 62%;
  /* the phone gets its own crop, already framed on the building */
  transform:scale(1.1);
  animation:heroIn 2.6s var(--ease-out) both;
  will-change:transform;
}
@keyframes heroIn{ from{ opacity:0; transform:scale(1.16) } to{ opacity:1; transform:scale(1.1) } }
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(30,18,10,.44) 0%, rgba(30,18,10,.05) 30%, rgba(30,18,10,.4) 64%, rgba(24,16,10,.82) 92%, var(--paper) 100%),
    linear-gradient(96deg, rgba(30,18,10,.6) 0%, rgba(30,18,10,.2) 46%, rgba(30,18,10,0) 78%);
}
.hero__body{ max-width:min(900px, 100%); margin-bottom:clamp(40px,7vh,86px) }
.hero .eyebrow{ color:var(--bone-3) }
.hero__title{
  font-family:var(--dsp); font-weight:400;
  font-size:clamp(3.4rem, 11vw, 10rem);
  line-height:.94; letter-spacing:-.028em;
  margin:0 0 .34em;
  text-shadow:0 2px 40px rgba(24,14,6,.4);
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.05em }
.hero__title .line > span{
  display:block; transform:translateY(105%);
  animation:lineUp 1.5s var(--ease-out) both;
}
.hero__title .line:nth-child(2) > span{ animation-delay:.14s }
@keyframes lineUp{ to{ transform:none } }
.hero__sub{
  max-width:58ch; color:var(--bone-2);
  font-size:clamp(1rem,1.25vw,1.15rem); line-height:1.68;
  margin-bottom:2.2em;
}
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap }
.hero__cta .btn{ --fg:var(--bone); --bd:var(--bone-line) }
.hero__cta .btn--solid{ --bg:var(--bone); --fg:var(--neutral); --bd:var(--bone) }
.hero__cta .btn--solid:hover{ --bg:var(--gold); --bd:var(--gold); --fg:#2A1A05 }
.hero__cta .btn--line:hover{ --bd:var(--bone); --bg:rgba(252,249,246,.1); --fg:var(--bone) }

.hero__foot{
  display:flex; align-items:flex-end; justify-content:space-between; gap:32px;
  padding-top:22px; border-top:1px solid var(--bone-line);
}
.hero__scroll{
  display:flex; align-items:center; gap:10px;
  font-family:var(--ui); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--bone-3);
}
.hero__scroll svg{ width:15px; height:15px; animation:bob 2.6s var(--ease) infinite }
@keyframes bob{ 0%,100%{ transform:translateY(-3px); opacity:.5 } 50%{ transform:translateY(3px); opacity:1 } }
.hero__facts{ display:flex; gap:clamp(20px,3.4vw,52px); flex-wrap:wrap }
.hero__facts dt{
  font-family:var(--ui); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone-4); margin-bottom:5px;
}
.hero__facts dd{
  font-family:var(--dsp);
  font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--bone);
}

/* ----------------------------------------------------------- chapters */
.chapter{ position:relative; padding-block:clamp(96px,13vh,190px) }

/* ------------------------------------------------------------- return */
.return{ background:var(--paper); background-image:radial-gradient(120% 90% at 88% -12%, rgba(212,175,55,.08), transparent 58%), repeating-linear-gradient(115deg, rgba(139,69,19,.03) 0 1px, transparent 1px 46px) }
.return__grid{
  display:grid; gap:clamp(36px,5vw,80px);
  grid-template-columns:minmax(0,1fr) minmax(0,.94fr);
  align-items:start;
}
.return__text p{ max-width:48ch; color:var(--ink-2) }
.return__text .lede{ color:var(--ink) }
.return__fig{ margin:0; position:relative }
.return__fig img{ width:100% }
.return__fig figcaption{
  margin-top:14px;
  font-family:var(--ui); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-4);
}
.ticker{
  display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,64px);
  margin-top:clamp(48px,7vw,96px); padding-top:32px; border-top:var(--rule);
}
.ticker li{ display:flex; flex-direction:column; gap:4px }
.ticker b{
  font-family:var(--dsp); font-weight:400;
  font-size:clamp(1.9rem,3.4vw,2.9rem);
  letter-spacing:-.02em; color:var(--primary);
}
.ticker span{
  font-family:var(--ui); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-4);
}

/* ------------------------------------------------------------ descent */
.descent{ position:relative; background:var(--paper-2) }
.descent__intro{ padding-block:clamp(96px,13vh,180px) clamp(48px,7vh,90px) }
.descent__intro .chead{ margin-bottom:0 }
.descent__intro .lede{
  max-width:46ch;
  /* the lede stands on the same datum line as the head */
  padding-bottom:clamp(20px,2.8vw,34px);
  border-bottom:var(--rule);
}

.descent__stage{ position:relative; height:520vh }
.descent__sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center;
  background:var(--paper-3);
}
.descent__frames{ position:absolute; inset:0 }
.frame{
  position:absolute; inset:0; margin:0;
  opacity:0; filter:blur(6px);
  transition:opacity .9s var(--ease), filter .9s var(--ease);
  will-change:opacity, filter;
}
.frame.is-on{ opacity:1; filter:blur(0) }
.frame img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.08) translate3d(0,0,0);
  transition:transform 1.6s var(--ease-out);
  will-change:transform;
}
.frame.is-on img{ transform:scale(1) }
/* a warm wash rather than a blackout: the photography stays open */
.descent__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(252,249,246,.55) 0%, rgba(252,249,246,.04) 34%, rgba(40,24,12,.26) 100%),
    linear-gradient(90deg, rgba(252,249,246,.9) 0%, rgba(252,249,246,.42) 30%, rgba(252,249,246,0) 56%);
}

.descent__hud{
  position:absolute; left:var(--pad); top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:clamp(18px,2.4vw,34px);
  color:var(--ink);
}
.hud__depth{
  font-family:var(--dsp);
  font-size:clamp(2.8rem,6.4vw,5.4rem); line-height:1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  min-width:3.4ch; text-align:right; color:var(--primary);
}
.hud__depth::before{ content:"−"; opacity:.4; margin-right:.06em }
.hud__depth i{
  font-family:var(--ui); font-style:normal; font-size:.24em;
  opacity:.5; margin-left:.24em; letter-spacing:.05em; color:var(--ink);
}
.hud__bar{ position:relative; width:1px; height:min(46vh,340px); background:var(--line) }
.hud__bar span{
  position:absolute; inset:0 auto auto 0; width:1px; height:100%;
  background:linear-gradient(180deg,var(--gold),var(--primary));
  transform:scaleY(0); transform-origin:top;
}
.hud__list{
  display:flex; flex-direction:column; gap:clamp(10px,2.2vh,22px);
  position:relative; padding-left:18px;
}
.hud__list::before{
  content:""; position:absolute; left:0; top:0;
  width:9px; height:1px; background:var(--primary);
  transform:translateY(var(--marker,0)); opacity:0;
  transition:transform .55s var(--ease-out), opacity .4s var(--ease);
}
.hud__list.is-live::before{ opacity:1 }
.hud__list li{
  display:flex; align-items:baseline; gap:12px;
  font-family:var(--ui); color:var(--ink-4);
  transition:color .6s var(--ease), transform .6s var(--ease-out);
}
.hud__list li span{ font-size:10px; letter-spacing:.14em; font-variant-numeric:tabular-nums }
.hud__list li b{ font-size:12.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase }
.hud__list li.is-on{ color:var(--ink); transform:translateX(5px) }
.hud__list li.is-on span{ color:var(--primary) }

.descent__cards{
  position:absolute; right:var(--pad); bottom:clamp(48px,9vh,96px);
  width:min(440px, 42vw);
}
.lcard{
  position:absolute; right:0; bottom:0; width:100%;
  padding:clamp(26px,2.8vw,38px);
  background:rgba(252,249,246,.95);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 30px 70px -40px rgba(18,18,18,.55);
  opacity:0; visibility:hidden; transform:translate3d(0,24px,0);
  transition:opacity .55s var(--ease), transform .8s var(--ease-out), visibility .55s;
  pointer-events:none; will-change:opacity, transform;
}
.lcard.is-on{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity .8s .12s var(--ease), transform .9s .12s var(--ease-out), visibility 0s;
}
.lcard__depth{
  font-family:var(--ui); font-size:10.5px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--primary); margin-bottom:1em;
}
.lcard h3{ font-size:clamp(1.7rem,2.6vw,2.3rem); margin-bottom:.35em }
.lcard p{ color:var(--ink-2); font-size:.96rem; line-height:1.64 }

.specs{
  display:grid; gap:1px;
  grid-template-columns:repeat(5,minmax(0,1fr));
  margin-top:clamp(64px,9vh,120px);
}
.specs > div{
  background:var(--paper-2); padding:26px 24px;
  box-shadow:0 0 0 1px var(--line);
}
.specs dt{
  font-family:var(--ui); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-4); margin-bottom:9px;
}
.specs dd{ font-family:var(--dsp); font-size:1.2rem; letter-spacing:-.005em }

/* --------------------------------------------------------------- grape */
.grape{ position:relative; overflow:hidden; background:var(--paper) }
.grape__bg{ position:absolute; inset:0; z-index:0 }
.grape__bg::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(180deg, var(--paper) 0%, rgba(252,249,246,.9) 16%, rgba(252,249,246,.84) 76%, var(--paper) 100%),
    linear-gradient(90deg, rgba(252,249,246,.95) 0%, rgba(252,249,246,.62) 52%, rgba(252,249,246,.46) 100%);
}
.gbg{
  position:absolute; inset:0;
  opacity:0; transition:opacity 1.2s var(--ease), transform 1.6s var(--ease-out);
  transform:scale(1.06);
}
.gbg.is-on{ opacity:1; transform:scale(1) }
.gbg img{ width:100%; height:100%; object-fit:cover }
.grape__body{ position:relative; z-index:3 }
.grape .dsp--xl{ margin-bottom:.12em; color:var(--primary) }
.grape__kick{
  font-family:var(--dsp);
  font-size:clamp(1.2rem,1.9vw,1.6rem); color:var(--ink);
  max-width:34ch;
}
.grape__cols{
  display:grid; gap:clamp(24px,4vw,64px);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  max-width:1000px; margin-bottom:clamp(56px,8vw,110px);
}
.grape__cols p{ color:var(--ink-2) }
.grape__cols .lede{ color:var(--ink) }

/* The tasting reads like the descent HUD: a numbered index down the left,
   the glass described in Garamond on the right, the photography breathing
   behind it. Same instrument, different measurement. */
.taste{
  border-top:var(--rule); padding-top:clamp(30px,4vw,52px);
  display:grid; gap:clamp(28px,5vw,90px);
  grid-template-columns:minmax(190px,.42fr) minmax(0,1fr);
  align-items:start;
}
.taste__tabs{
  display:flex; flex-direction:column; align-items:stretch; gap:0;
  counter-reset:tt;
}
.taste__tabs button{
  position:relative;
  display:flex; align-items:baseline; gap:1.1em;
  padding:11px 0 11px 24px; text-align:left;
  border:0; border-radius:0; background:none;
  font-family:var(--ui); font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-4);
  transition:color .4s var(--ease), transform .5s var(--ease-out);
}
.taste__tabs button::before{
  counter-increment:tt; content:counter(tt,decimal-leading-zero);
  font-size:10px; letter-spacing:.14em;
  font-variant-numeric:tabular-nums; color:var(--ink-4);
  transition:color .4s var(--ease);
}
/* the marker dash, borrowed from the depth index */
.taste__tabs button::after{
  content:""; position:absolute; left:0; top:50%;
  width:9px; height:1px; background:var(--primary);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease-out);
}
.taste__tabs button:hover{ color:var(--ink-2) }
.taste__tabs button.is-on{ color:var(--ink); transform:translateX(4px) }
.taste__tabs button.is-on::before{ color:var(--primary) }
.taste__tabs button.is-on::after{ transform:scaleX(1) }
/* the panels stack in one grid cell, so the block sizes itself to the
   longest note and nothing below it ever shifts */
.taste__panels{ display:grid }
.tpanel{
  grid-area:1/1; max-width:44ch;
  font-family:var(--dsp);
  font-size:clamp(1.4rem,2.2vw,2rem); line-height:1.4;
  opacity:0; transform:translate3d(0,12px,0);
  transition:opacity .6s var(--ease), transform .6s var(--ease-out);
  pointer-events:none;
}
.tpanel.is-on{ opacity:1; transform:none; pointer-events:auto }

/* ---------------------------------------------------------------- land */
.land{ background:var(--paper-2); background-image:radial-gradient(110% 85% at 8% -8%, rgba(212,175,55,.07), transparent 55%), repeating-linear-gradient(115deg, rgba(139,69,19,.03) 0 1px, transparent 1px 46px) }
.land__grid{
  display:grid; gap:clamp(40px,5vw,80px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
}
.map{ width:100%; height:auto; color:var(--ink); overflow:visible }
.map__contours path{
  stroke-width:1; opacity:.22;
  stroke-dasharray:var(--len,2000); stroke-dashoffset:var(--len,2000);
}
.is-in .map__contours path{ animation:draw 2.6s var(--ease-out) forwards }
.map__contours path:nth-child(2){ animation-delay:.1s; opacity:.26 }
.map__contours path:nth-child(3){ animation-delay:.2s; opacity:.3 }
.map__contours path:nth-child(4){ animation-delay:.3s; opacity:.36 }
.map__contours path:nth-child(5){ animation-delay:.4s; opacity:.42 }
.map__contours path:nth-child(6){ animation-delay:.5s; opacity:.5 }
.map__ridges path{ stroke-width:1.2; opacity:.45 }
.map__river{ stroke:var(--primary); stroke-width:1.6; opacity:.9 }
.map__sites circle{ fill:none; stroke:currentColor; stroke-width:1; opacity:.5 }
.map__estate circle:first-child{ stroke:var(--primary); stroke-width:1 }
.map__estate circle:nth-child(2){ fill:var(--primary) }
.map__estate path{ stroke:var(--primary); stroke-width:1; opacity:.7 }
.map__pulse{ transform-origin:300px 248px; animation:pulse 4.5s var(--ease) infinite }
@keyframes pulse{ 0%{ transform:scale(.7); opacity:.7 } 70%,100%{ transform:scale(1.5); opacity:0 } }
@keyframes draw{ to{ stroke-dashoffset:0 } }
.map text{ font-family:var(--ui); fill:currentColor; font-weight:500 }
.mt-range{ font-size:10.5px; letter-spacing:.24em; opacity:.45 }
.mt-estate{ font-size:10px; letter-spacing:.3em; fill:var(--primary) }
.mt-town{ font-size:10.5px; letter-spacing:.24em; opacity:.6 }
.mt-river{ font-size:9.5px; letter-spacing:.22em; fill:var(--primary); opacity:.8 }
.mt-site{ font-size:8.5px; letter-spacing:.16em; opacity:.45 }
.mt-coord{ font-size:9.5px; letter-spacing:.2em; opacity:.4 }

.land__text p{ max-width:46ch; color:var(--ink-2) }
.land__text .lede{ color:var(--ink) }
.land__facts{ margin-top:36px; border-top:var(--rule) }
.land__facts > div{
  display:grid; grid-template-columns:minmax(90px,.4fr) 1fr; gap:20px;
  padding:16px 0; border-bottom:var(--rule);
}
.land__facts dt{
  font-family:var(--ui); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-4); padding-top:.35em;
}
.land__facts dd{ color:var(--ink-2); font-size:1rem }
.land__strip{
  display:grid; gap:clamp(10px,1.4vw,20px);
  grid-template-columns:repeat(3,1fr);
  margin-top:clamp(56px,8vw,110px);
}
.land__strip figure{ margin:0; overflow:hidden }
.land__strip img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform 1.4s var(--ease-out);
}
.land__strip figure:hover img{ transform:scale(1.05) }

/* --------------------------------------------------------------- wines */
.wines{ background:var(--paper); background-image:radial-gradient(130% 90% at 50% -14%, rgba(212,175,55,.07), transparent 60%), repeating-linear-gradient(115deg, rgba(139,69,19,.03) 0 1px, transparent 1px 46px) }
.wines__grid{
  display:grid; gap:clamp(16px,1.8vw,26px);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
/* Each wine stands in a vaulted niche, the arch the cellar photography is
   full of. No boxes around the words: the niche is the object, the text is
   the ledger entry beneath it. */
.wine{
  display:grid; grid-template-rows:auto 1fr;
  transition:transform .8s var(--ease-out);
}
.wine:hover,.wine:focus-visible{ transform:translateY(-6px) }
.wine__stage{
  display:grid; place-items:end center;
  padding:clamp(72px,8vw,120px) 18px clamp(18px,2vw,28px);
  background:linear-gradient(178deg, #F3EBDD 0%, #EBDFC9 100%);
  border:1px solid rgba(139,69,19,.22);
  border-radius:999px 999px 0 0;
  position:relative; overflow:hidden;
  transition:border-color .6s var(--ease), box-shadow .8s var(--ease), background .8s var(--ease);
}
.wine:hover .wine__stage,.wine:focus-visible .wine__stage{
  border-color:rgba(139,69,19,.48);
  box-shadow:0 44px 70px -52px rgba(18,18,18,.55);
}
.wine__stage::after{
  content:""; position:absolute; left:12%; right:12%; bottom:clamp(18px,2vw,28px);
  height:1px; background:var(--line);
}
/* the flagship niche: gold in the hairline, a keystone at the crown */
.wine--prokupac .wine__stage{
  border-color:rgba(166,124,46,.55);
  background:linear-gradient(178deg, #F4EDE1 0%, #EEE3CE 100%);
}
.wine--prokupac .wine__stage::before{
  content:""; position:absolute; top:16px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--gold-deep);
}
.wine--prokupac:hover .wine__stage{ border-color:rgba(166,124,46,.85) }

/* ------------------------------------------------- the bottle, drawn
   Real capsule colours, glass tones and label copy, built as vector so it
   stays crisp and stays translatable. When the photographed renders land,
   swap .bottle for a <picture> inside .wine__stage and nothing else moves. */
.bottle{
  position:relative;
  width:min(160px, 78%);
  aspect-ratio:120/436;
  transition:transform .9s var(--ease-out);
}
.wine:hover .bottle{ transform:translateY(-8px) }
.bottle__glass{ width:100%; height:100%; overflow:visible }
.bottle__shadow{ fill:rgba(18,18,18,.2) }
.bottle__body{ fill:var(--glass-b) }
.bottle__sheen{ fill:rgba(255,255,255,.17) }
.bottle__shade{ fill:rgba(0,0,0,.22) }
.bottle__cap{ fill:var(--cap) }
.bottle__ring{ fill:rgba(0,0,0,.16) }
.bottle__capword{
  position:absolute; top:6.6%; left:0; right:0;
  display:flex; flex-direction:column; align-items:center; gap:.15em;
  font-family:var(--ui); font-weight:600;
  font-size:clamp(3.4px,.46vw,5.4px); letter-spacing:.12em;
  color:var(--cap-ink); text-align:center; line-height:1.25;
  pointer-events:none;
}
.bottle__capword i{ font-style:normal }

.bottle__label{
  position:absolute; left:17%; right:17%; top:45%; height:39%;
  background:linear-gradient(178deg,#FBF6EA,#F0E7D4);
  color:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:6% 8%;
  box-shadow:0 2px 10px rgba(18,18,18,.22);
}
.bottle__label .label__emblem{
  width:38%; margin-bottom:7%; color:var(--gold-deep); opacity:.95;
}
.bottle__label .label__word{
  font-family:var(--dsp); font-weight:400;
  font-size:clamp(13px,1.5vw,21px); letter-spacing:.09em;
  line-height:1; margin:0 0 .3em;
}
.bottle__label .label__var{
  font-family:var(--dsp); font-weight:400;
  font-size:clamp(6px,.65vw,9px); letter-spacing:.14em;
  margin:0 0 .8em; text-align:center; line-height:1.2;
}
.bottle__label .label__var.is-red{ color:#7C1524 }
.bottle__label .label__var.is-rose{ color:#A85B45 }
.bottle__label .label__rule{
  width:22%; height:1px; background:var(--gold-deep); opacity:.5; margin-bottom:.8em;
}
.bottle__label .label__est{
  font-family:var(--dsp); font-weight:400;
  font-size:clamp(5px,.55vw,7.5px); letter-spacing:.13em;
  margin:0; opacity:.78; text-align:center;
}
.bottle--rose .bottle__label{ background:linear-gradient(178deg,#FDF7F3,#F6E7DE) }
.bottle--rose .bottle__label .label__emblem{ color:#B3705A }
.bottle--rose .bottle__label .label__rule{ background:#B3705A }

.wine__text{
  padding:clamp(20px,2.2vw,30px) 2px 0;
  display:flex; flex-direction:column;
}
.wine__tag{
  font-family:var(--ui); font-size:10px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--primary); margin-bottom:.9em;
}
.wine__text h3{ font-size:clamp(1.35rem,1.7vw,1.75rem); margin-bottom:.45em }
/* the body flexes so the spec tables sit on one line across all four cards,
   however long the description runs */
.wine__text > p{ color:var(--ink-2); font-size:.94rem; line-height:1.62; flex:1 }
.wine__spec{ margin-top:auto; padding-top:22px; border-top:var(--rule) }
.wine__spec > div{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:var(--rule) }
.wine__spec dt{
  font-family:var(--ui); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-4); white-space:nowrap;
}
.wine__spec dd{ font-size:.88rem; color:var(--ink-2); text-align:right }

.heirloom{
  display:grid; gap:clamp(28px,4vw,60px);
  grid-template-columns:minmax(0,1fr) minmax(0,.5fr);
  align-items:center;
  margin-top:clamp(28px,3.4vw,44px);
  padding:clamp(30px,4vw,56px);
  background:var(--paper-2); border:var(--rule);
}
.heirloom p{ color:var(--ink-2); max-width:54ch }
.heirloom h3{ margin-bottom:.35em }
.heirloom figure{ margin:0 }
.heirloom img{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:50% 42% }

/* -------------------------------------------------------------- awards */
.awards{
  position:relative; overflow:hidden;
  background:var(--paper-3);
  background-image:
    radial-gradient(110% 85% at 12% -6%, rgba(212,175,55,.16), transparent 58%),
    radial-gradient(90% 70% at 96% 108%, rgba(139,69,19,.08), transparent 62%),
    repeating-linear-gradient(115deg, rgba(139,69,19,.03) 0 1px, transparent 1px 46px);
}
.awards .wrap{ position:relative; z-index:1 }
/* the section's own object, engraved monumentally into the paper: the seal
   hangs from the top edge the way each medal hangs from its line */
.awards__seal{
  position:absolute; z-index:0;
  top:0; right:clamp(-90px,-6vw,-40px);
  width:clamp(360px,34vw,560px); height:auto;
  color:var(--gold-deep); opacity:.16;
  pointer-events:none;
}
.awards__seal .medal__disc{ fill:rgba(212,175,55,.05) }
/* one object per plate: the seal carries this chapter, the numeral rests */
.awards .chead__no{ display:none }
/* A medal cabinet kept as a ledger: heavy head rule, the medal itself in
   Garamond italic and gold, the wine and its judge entered beneath it. */
.awardlist{ border-top:2px solid rgba(139,69,19,.4) }
.awardlist li{
  display:grid; align-items:baseline;
  grid-template-areas:"mark medal wine year" "mark medal body year";
  grid-template-columns:auto minmax(150px,.55fr) minmax(0,1.6fr) auto;
  column-gap:clamp(16px,3vw,48px); row-gap:8px;
  padding:clamp(26px,3.4vw,46px) 0;
  border-top:var(--rule);
  transition:background .5s var(--ease);
}
/* The medal itself, drawn in the same engraved hand as the map and the
   bottles, and hung from the ledger line the way medals hang on a rail. */
.awardlist__mark{
  grid-area:mark; align-self:start;
  margin-top:calc(clamp(26px,3.4vw,46px) * -1);
  line-height:0;
}
.medal{
  width:clamp(62px,6.6vw,92px); height:auto; overflow:visible;
  transform-origin:50% 0;
  transition:transform .8s var(--ease-out);
}
.awardlist li:hover .medal{ transform:rotate(3.5deg) }
.medal__ribbon{ fill:none; stroke:currentColor; stroke-width:1.2 }
.medal__disc{ stroke:currentColor; stroke-width:1.2 }
.medal__ring{ fill:none; stroke:currentColor; stroke-width:1 }
.medal use{ color:currentColor }
.medal--dgold,.medal--gold{ color:var(--gold-deep) }
.medal--dgold .medal__disc{ fill:rgba(212,175,55,.13) }
.medal--gold .medal__disc{ fill:rgba(212,175,55,.08) }
.medal--silver{ color:#8E887C }
.medal--silver .medal__disc{ fill:rgba(18,18,18,.045) }
.awardlist li:first-child{ border-top:0 }
.awardlist li:last-child{ border-bottom:var(--rule) }
.awardlist li:hover{ background:rgba(139,69,19,.04) }
.awardlist__medal{
  grid-area:medal;
  font-family:var(--dsp); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,2.5vw,2.2rem); line-height:1.05;
  letter-spacing:0; color:var(--gold-deep);
}
.awardlist__wine{ grid-area:wine; font-family:var(--dsp); font-size:clamp(1.35rem,2.2vw,1.85rem) }
.awardlist__body{
  grid-area:body;
  font-family:var(--ui); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4);
}
.awardlist__year{
  grid-area:year;
  font-family:var(--dsp); font-size:clamp(1.2rem,1.8vw,1.5rem);
  color:var(--primary); font-variant-numeric:tabular-nums; text-align:right;
}

/* ------------------------------------------------------------ heritage */
/* the one deep note in the page: the chapter that happened far from home */
.east{ position:relative; overflow:hidden; background:#2A1408; color:var(--bone) }
.east__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 55% at 80% 14%, rgba(212,175,55,.3), transparent 66%),
    radial-gradient(80% 70% at 6% 96%, rgba(139,69,19,.85), transparent 74%),
    repeating-linear-gradient(115deg, rgba(212,175,55,.05) 0 1px, transparent 1px 46px);
}
.east__body{ position:relative }
.east .eyebrow{ color:var(--bone-3) }
.east .eyebrow .num{ color:var(--gold) }
.east .eyebrow .num::after{ background:var(--bone-line) }
.east .dsp{ color:var(--bone) }
.east .dsp em{ font-style:normal; color:var(--gold) }
.east__cols{
  display:grid; gap:clamp(24px,4vw,64px);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  max-width:1020px;
}
.east__cols p{ color:var(--bone-2) }
.east__cols .lede{ color:var(--bone) }
.east__marks{
  display:flex; flex-wrap:wrap; gap:clamp(26px,5vw,70px);
  margin-top:clamp(48px,7vw,96px); padding-top:34px;
  border-top:1px solid rgba(212,175,55,.32);
}
.east__marks li{
  display:flex; align-items:baseline; gap:14px;
  font-family:var(--dsp);
  font-size:clamp(1.7rem,3.2vw,2.5rem); color:var(--gold); letter-spacing:.03em;
}
.east__marks span{
  font-family:var(--ui); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone-4);
}

/* --------------------------------------------------------------- trade */
.trade{ background:var(--paper) }
.trade .chead{ max-width:70ch }
.trade .lede{ margin-top:1.2em; color:var(--ink-2) }
.trade__grid{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.tcard{
  background:var(--paper); padding:clamp(26px,3vw,40px);
  box-shadow:0 0 0 1px var(--line);
  display:flex; flex-direction:column; gap:12px;
  transition:background .6s var(--ease);
}
.tcard:hover{ background:var(--paper-2) }
.tcard__n{
  font-family:var(--ui); font-size:10px; font-weight:600;
  letter-spacing:.2em; color:var(--primary); margin:0 0 8px;
}
.tcard h3{ font-size:1.55rem }
.tcard p{ color:var(--ink-3); font-size:.96rem; flex:1 }
.tcard .link{ align-self:flex-start; margin-top:6px }

/* ---------------------------------------------------------------- film */
.film{
  display:grid; gap:clamp(28px,4vw,64px);
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  align-items:center;
  margin-top:clamp(56px,8vh,110px);
}
.film__head .eyebrow{ margin-bottom:1.1em }
.film__head h3{ margin-bottom:.5em }
.film__head p{ color:var(--ink-2); max-width:34ch }
.film__frame{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:var(--ink); border:var(--rule);
}
.film__video{ width:100%; height:100%; object-fit:cover; display:block }
.film__play{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:linear-gradient(180deg, rgba(24,16,10,.2), rgba(24,16,10,.55));
  color:var(--bone);
  font-family:var(--ui); font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  transition:opacity .6s var(--ease), background .6s var(--ease);
}
.film__play[hidden]{ display:none }
.film__play:hover{ background:linear-gradient(180deg, rgba(24,16,10,.14), rgba(24,16,10,.46)) }
.film__play i{ font-style:normal; font-size:10px; letter-spacing:.18em; opacity:.6 }
.film__tri{
  width:62px; height:62px; border-radius:50%;
  border:1px solid rgba(252,249,246,.55);
  display:grid; place-items:center;
  transition:transform .7s var(--ease-out), background .5s var(--ease), border-color .5s var(--ease);
}
.film__tri::after{
  content:""; width:0; height:0; margin-left:4px;
  border-left:13px solid currentColor;
  border-top:8px solid transparent; border-bottom:8px solid transparent;
}
.film__play:hover .film__tri{ transform:scale(1.08); background:rgba(252,249,246,.12); border-color:var(--bone) }

/* --------------------------------------------------------- partnership */
.pact{ background:var(--paper); background-image:radial-gradient(120% 90% at 90% -10%, rgba(212,175,55,.08), transparent 58%), repeating-linear-gradient(115deg, rgba(139,69,19,.03) 0 1px, transparent 1px 46px) }
.pact .chead{ max-width:66ch }
.pact .lede{ margin-top:1.2em; color:var(--ink-2) }
/* The terms read as a charter, not a card rack: four articles on a ruled
   grid, each opened by its numeral set in Garamond. */
.pact__grid{
  display:grid; gap:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:2px solid rgba(139,69,19,.4);
}
.pcard{
  display:grid; align-items:start;
  grid-template-columns:auto 1fr;
  column-gap:clamp(20px,2.6vw,36px); row-gap:.5em;
  padding:clamp(30px,3.6vw,52px) clamp(26px,3.4vw,52px) clamp(30px,3.6vw,52px) 0;
  border-bottom:var(--rule);
  transition:background .6s var(--ease);
}
.pcard:nth-child(odd){ border-right:var(--rule) }
.pcard:nth-child(even){ padding-left:clamp(26px,3.4vw,52px); padding-right:0 }
.pcard:hover{ background:rgba(139,69,19,.035) }
.pcard p.pcard__n{
  grid-column:1; grid-row:1 / span 2;
  font-family:var(--dsp); font-size:clamp(2.1rem,3.2vw,3rem); line-height:.9;
  letter-spacing:0; color:var(--primary); margin:0;
  font-variant-numeric:tabular-nums;
}
.pcard h3{ grid-column:2; font-size:clamp(1.3rem,1.8vw,1.6rem); margin-bottom:0 }
.pcard p:not(.pcard__n){ grid-column:2; color:var(--ink-2); font-size:.95rem; line-height:1.62 }
.pact__nums b{ color:var(--primary) }

.ask{
  display:grid; gap:clamp(26px,4vw,64px);
  grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  margin-top:clamp(48px,6vw,88px);
  padding:clamp(30px,4vw,56px);
  border-top:2px solid rgba(139,69,19,.4);
  background:var(--paper-2);
}
.ask__head h3{ margin-top:.2em }
.ask__list{ counter-reset:ask }
.ask__list li{
  counter-increment:ask;
  display:grid; grid-template-columns:auto 1fr; gap:1.3em;
  padding:16px 0; border-bottom:var(--rule);
  color:var(--ink-2); font-size:1rem; line-height:1.6;
}
.ask__list li:last-child{ border-bottom:0; padding-bottom:0 }
.ask__list li::before{
  content:counter(ask,decimal-leading-zero);
  font-family:var(--dsp); font-size:1.4rem; line-height:1;
  color:var(--primary); padding-top:.18em;
  font-variant-numeric:tabular-nums;
}

.apply__gate{
  margin-top:1.6em;
  font-family:var(--ui); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--primary);
}

/* the closing contact strip */
.reach{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:clamp(20px,2.6vw,36px);
}
.rcard{
  background:var(--paper); padding:clamp(24px,2.6vw,34px);
  box-shadow:0 0 0 1px var(--line);
  display:flex; flex-direction:column; gap:10px;
}
.rcard h3{ font-size:1.2rem }
.rcard p{ color:var(--ink-3); font-size:.94rem; flex:1 }

/* --------------------------------------------------------------- apply */
.apply{ background:var(--paper-2); background-image:radial-gradient(120% 85% at 10% -10%, rgba(212,175,55,.08), transparent 55%), repeating-linear-gradient(115deg, rgba(139,69,19,.03) 0 1px, transparent 1px 46px) }
.apply .chead{ max-width:60ch }
.apply .lede{ margin-top:1.2em; color:var(--ink-2) }

.apply__form{
  display:grid; gap:clamp(28px,3.4vw,52px);
  padding:clamp(28px,4vw,60px);
  background:var(--paper); border:var(--rule);
}
.fset{ margin:0; padding:0; border:0 }
.fset + .fset{ border-top:var(--rule); padding-top:clamp(28px,3.4vw,48px) }
.fset legend{
  display:flex; align-items:center; gap:.9em;
  float:left; width:100%; padding:0; margin-bottom:clamp(18px,2vw,28px);
  font-family:var(--ui); font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}
.fset__n{
  color:var(--primary); font-variant-numeric:tabular-nums;
  position:relative; padding-right:.9em;
}
.fset__n::after{
  content:""; position:absolute; right:0; top:50%;
  width:.45em; height:1px; background:var(--line);
}
.fgrid{
  display:grid; gap:clamp(16px,1.8vw,26px);
  grid-template-columns:repeat(2,minmax(0,1fr));
  clear:both;
}
.field{ margin:0; display:flex; flex-direction:column; gap:8px }
.field--wide{ grid-column:1/-1 }
.fset > .field--wide{ clear:both }
.fset > .fgrid + .field--wide,
.fset > .field--wide + .field--wide{ margin-top:clamp(20px,2.2vw,32px) }

.field label,
.field__label{
  font-family:var(--ui); font-size:11px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
}
.field input:not([type="checkbox"]),
.field select,
.field textarea{
  width:100%; padding:13px 16px;
  background:var(--paper);
  border:1px solid var(--line); border-radius:3px;
  color:var(--ink); font-family:var(--ui); font-size:15px; line-height:1.5;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.field textarea{ resize:vertical; min-height:78px }
.field select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:40px;
}
.field input:not([type="checkbox"]):hover,.field select:hover,.field textarea:hover{ border-color:var(--ink-4) }
.field input:not([type="checkbox"]):focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(139,69,19,.13);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{ border-color:#A5311C; background:rgba(165,49,28,.03) }
.field__hint{
  font-family:var(--ui); font-size:12px; color:var(--ink-4); line-height:1.55;
}
.field__err{
  font-family:var(--ui); font-size:12px; color:#A5311C; letter-spacing:.01em;
}
.field__err[hidden]{ display:none }

/* the checkbox chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{
  display:inline-flex; align-items:center; gap:.55em;
  padding:10px 18px;
  border:1px solid var(--line); border-radius:999px;
  font-family:var(--ui); font-size:12px; letter-spacing:.06em;
  color:var(--ink-2); cursor:pointer; user-select:none;
  transition:color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.chip input{
  appearance:none; -webkit-appearance:none; margin:0;
  width:13px; height:13px; border-radius:50%;
  border:1px solid var(--ink-4);
  transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.chip:hover{ border-color:var(--ink-4); color:var(--ink) }
.chip:has(input:checked){ border-color:var(--primary); background:rgba(139,69,19,.07); color:var(--primary) }
.chip:has(input:checked) input{ border-color:var(--primary); background:var(--primary); box-shadow:inset 0 0 0 2.5px var(--paper) }
.chip:has(input:focus-visible){ outline:2px solid var(--primary); outline-offset:3px }

.apply__foot{ display:grid; gap:20px; border-top:var(--rule); padding-top:clamp(24px,3vw,38px) }
.consent{
  display:flex; align-items:flex-start; gap:.8em;
  font-family:var(--ui); font-size:13px; line-height:1.6; color:var(--ink-2);
  max-width:74ch; cursor:pointer;
}
.consent input{
  appearance:none; -webkit-appearance:none; margin:.22em 0 0;
  flex:0 0 auto; width:16px; height:16px; border-radius:2px;
  border:1px solid var(--ink-4); background:var(--paper);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.consent input:checked{
  border-color:var(--primary); background:var(--primary);
  box-shadow:inset 0 0 0 2px var(--paper), inset 0 0 0 6px var(--primary);
}
.consent input[aria-invalid="true"]{ border-color:#A5311C }
.consent input:focus-visible{ outline:2px solid var(--primary); outline-offset:3px }

.apply__send{
  display:flex; align-items:center; gap:clamp(16px,2.4vw,32px); flex-wrap:wrap;
}
.apply__send .btn{ padding:16px 34px }
.apply__status{
  margin:0; font-family:var(--ui); font-size:11.5px; letter-spacing:.05em;
  color:var(--ink-4); max-width:46ch; line-height:1.6;
}
.apply__status.is-bad{ color:#A5311C }

.apply__done{
  text-align:center;
  padding:clamp(48px,7vw,96px) clamp(24px,4vw,60px);
  background:var(--paper); border:var(--rule);
}
.apply__done[hidden]{ display:none }
.apply__mark{ width:38px; margin:0 auto 26px; color:var(--primary) }
.apply__done h3{ margin-bottom:.5em }
.apply__done p{ color:var(--ink-2); max-width:52ch; margin-inline:auto }

/* ---------------------------------------------------------------- foot */
.foot{ background:var(--paper-3); padding-block:clamp(64px,9vh,120px) 40px; border-top:var(--rule) }
.foot__grid{
  display:grid; gap:clamp(32px,4vw,64px);
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);
}
.foot__mark{ width:26px; color:var(--primary); margin-bottom:18px }
.foot__word{ font-family:var(--dsp); font-size:30px; letter-spacing:.14em; margin:0 0 .15em }
.foot__est{ font-family:var(--dsp); font-size:1.1rem; color:var(--ink-3); margin:0 0 1.2em }
.foot__line{
  font-family:var(--ui); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-4); margin:0;
}
.foot__nav{ display:flex; flex-direction:column; gap:9px; align-content:start }
.foot__nav a{
  font-family:var(--ui); font-size:12px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3);
  transition:color .4s var(--ease);
}
.foot__nav a:hover{ color:var(--primary) }
.foot__meta p{
  font-family:var(--ui); font-size:11px; letter-spacing:.06em;
  color:var(--ink-4); margin:0 0 12px; line-height:1.7;
}
.foot__tbc{ opacity:.75 }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1180px){
  .rail{ display:none }
  .descent__cards{ width:min(400px,46vw) }
}
@media (max-width: 980px){
  .nav__links{ display:none }
  .nav__burger{ display:block }
  .nav .btn--line{ display:none }
  .return__grid,.land__grid,.heirloom,.film,.ask{ grid-template-columns:1fr }
  .fgrid{ grid-template-columns:1fr }
  .heirloom figure{ max-width:340px }
  .descent__stage{ height:460vh }
  .descent__sticky{ align-items:flex-start }
  .descent__veil{
    background:linear-gradient(180deg, rgba(252,249,246,.9) 0%, rgba(252,249,246,.4) 44%, rgba(40,24,12,.34) 100%);
  }
  .descent__hud{
    position:absolute; left:var(--pad); right:var(--pad); top:clamp(84px,13vh,120px);
    transform:none; align-items:flex-start; justify-content:space-between;
  }
  .hud__bar{ height:min(30vh,220px) }
  .hud__list{ gap:9px }
  .descent__cards{ width:auto; left:var(--pad); right:var(--pad); bottom:clamp(36px,6vh,64px) }
  .awardlist li{
    grid-template-areas:"mark medal year" "mark wine wine" "mark body body";
    grid-template-columns:auto 1fr auto; column-gap:16px; row-gap:6px;
  }
  .medal{ width:clamp(44px,12vw,54px) }
  .foot__grid{ grid-template-columns:1fr 1fr }
  .foot__brand{ grid-column:1/-1 }
}
@media (max-width: 640px){
  .hero__foot{ flex-direction:column; align-items:flex-start; gap:22px }
  .hero__facts{ gap:20px 26px }
  .land__strip{ grid-template-columns:1fr; gap:10px }
  .land__strip figure:nth-child(n+3){ display:none }
  .ticker{ gap:20px 32px }
  .hud__list li b{ font-size:11px }
  .hud__depth{ font-size:2.6rem }
  .foot__grid{ grid-template-columns:1fr }
  .apply__send{ flex-direction:column; align-items:stretch }
  .apply__send .btn{ width:100% }
  .chips{ gap:6px }
  .chip{ padding:9px 14px; font-size:11.5px }
}

/* -------------------------------------------------------- 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;
  }
  .rv .reveal{ opacity:1; transform:none }
  .hero__title .line > span{ transform:none }
  .hero__media img{ transform:none }
  .descent__stage{ height:auto }
  .descent__sticky{ position:static; height:auto; display:block; background:var(--paper-2) }
  .descent__frames{ position:relative; height:60svh }
  .frame{ opacity:0 }
  .frame.is-on{ opacity:1 }
  .descent__hud,.descent__cards{ position:static; transform:none; width:auto; margin-top:24px }
  .descent__veil{ display:none }
  .lcard{ position:static; opacity:1; transform:none; display:none; box-shadow:none; background:none; padding:0 }
  .lcard.is-on{ display:block }
}

/* the town itself, a square on the river */
.map__town{ fill:var(--ink); opacity:.6 }

/* the one line that makes the market argument */
.pull{
  margin:clamp(48px,7vw,96px) 0 clamp(40px,5vw,72px);
  padding-left:clamp(20px,3vw,40px);
  border-left:2px solid var(--primary);
  max-width:46ch;
}
.pull p{
  font-family:var(--dsp);
  font-size:clamp(1.5rem,2.8vw,2.4rem);
  line-height:1.24; letter-spacing:-.012em; color:var(--ink);
}


/* ------------------------------------------------- pressable, everywhere
   Anything that can be pressed answers the press. Hover is gated behind a
   real pointer so a tap on a phone does not leave a stuck hover state. */
.taste__tabs button,
.chip,
.lang__btn,
.nav__links a,
.foot__nav a,
.film__play{
  transition-duration:.2s;
}
.taste__tabs button:active{ transform:scale(.97) }
.chip:active{ transform:scale(.98) }
.film__play:active .film__tri{ transform:scale(.96) }
.wine:active{ transform:translateY(-2px) }

@media (hover:hover) and (pointer:fine){
  .land__strip figure:hover img{ transform:scale(1.04) }
  .awardlist li:hover{ background:rgba(139,69,19,.04) }
  .pcard:hover{ background:var(--paper-3); transform:translateY(-3px) }
  .tcard:hover,.rcard:hover{ background:var(--paper-2) }
}
@media (hover:none){
  .land__strip figure:hover img{ transform:none }
  .wine:hover{ transform:none; box-shadow:none }
  .wine:hover .label,.wine:hover .bottle{ transform:none }
  .pcard:hover{ transform:none }
}

/* the film frame reads as a plate on the page, not a video element */
.film__frame{ box-shadow:0 40px 80px -60px rgba(18,18,18,.7) }
.film__video{ transition:filter .5s var(--ease) }
.film__frame:has(.film__play:hover) .film__video{ filter:saturate(1.06) }

/* ------------------------------------------------------- touch targets
   A finger is not a cursor. On coarse pointers every control clears 44px,
   using padding where the visual size should not change and a pseudo
   element where it should not change at all. */
@media (pointer: coarse){
  .taste__tabs button,
  .chip{ min-height:44px; padding-block:12px }
  .field input:not([type="checkbox"]),
  .field select{ padding-block:15px }
  .btn{ min-height:48px }
  .nav__burger,
  .film__play,
  .link{ position:relative }
  .nav__burger::after,
  .link::after{
    content:""; position:absolute; left:50%; top:50%;
    width:max(100%,44px); height:max(100%,44px);
    transform:translate(-50%,-50%);
  }
  /* EN and SR are 18px wide and sit side by side, so a phantom 44px zone on
     each would land mostly on its neighbour. They get real width instead. */
  .lang__btn{
    min-width:40px; min-height:44px; padding:0;
    display:grid; place-items:center;
  }
  .consent{ padding-block:6px }
  .consent input{ width:22px; height:22px; margin-top:.1em }
  .foot__nav a{ padding-block:12px }
}

/* ==========================================================================
   Mobile
   The descent and the wines were laid out for a wide frame and only shrunk
   to fit. On a phone they get compositions of their own.
   ========================================================================== */

/* the hint only makes sense where the lineup actually scrolls */
.wines__hint{ display:none }

@media (max-width: 900px){

  /* ---- 02 the descent -------------------------------------------------
     On a phone the five levels are five photographs, each with its depth
     and its paragraph, read top to bottom. No sticky, no scroll maths, and
     nothing a handset browser can get wrong. */
  .descent__stage{ height:auto }
  .descent__sticky{
    position:static; height:auto; overflow:visible;
    display:grid; grid-template-columns:1fr; gap:0;
    place-items:stretch;      /* the desktop rule centres, which stops the
                                 portrait frames filling the column */
    background:var(--paper-2);
  }
  .descent__frames,
  .descent__cards{ display:contents }
  .descent__veil,
  .descent__hud{ display:none }

  .frame{
    position:relative; inset:auto; opacity:1; filter:none;
    height:46svh; overflow:hidden;
    transition:none; will-change:auto;
  }
  .frame img{ transform:none; height:100%; transition:none; will-change:auto }

  .lcard{
    position:relative; inset:auto; width:auto;
    opacity:1; visibility:visible; transform:none;
    background:none; box-shadow:none; backdrop-filter:none;
    padding:clamp(22px,6vw,30px) var(--pad) clamp(34px,8vw,48px);
    transition:none; will-change:auto;
  }
  .lcard.is-on{ transition:none }
  .frame.is-on,
  .frame.is-on img{ transition:none }

  /* the guarantee: nothing inside the descent moves on a phone, whatever
     state the reveal system or a mid-animation resize left behind */
  .descent .reveal,
  .descent .reveal > *{
    opacity:1 !important; transform:none !important;
    clip-path:none !important; filter:none !important;
    transition:none !important; animation:none !important;
  }
  .lcard h3{ font-size:clamp(1.7rem,7vw,2.2rem) }
  .lcard p{ font-size:.95rem }

  /* photograph, then its text, five times over */
  .frame:nth-of-type(1){ order:1 }  .lcard:nth-of-type(1){ order:2 }
  .frame:nth-of-type(2){ order:3 }  .lcard:nth-of-type(2){ order:4 }
  .frame:nth-of-type(3){ order:5 }  .lcard:nth-of-type(3){ order:6 }
  .frame:nth-of-type(4){ order:7 }  .lcard:nth-of-type(4){ order:8 }
  .frame:nth-of-type(5){ order:9 }  .lcard:nth-of-type(5){ order:10 }


  /* ---- 05 the wines ---------------------------------------------------
     Four columns became four slivers. On a phone the lineup scrolls
     sideways, one bottle at a time, which is how a range is actually read. */
  .wines__grid{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:min(78vw, 320px);
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--pad);
    padding:4px var(--pad) 18px;
    margin-inline:calc(var(--pad) * -1);
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }
  .wines__grid::-webkit-scrollbar{ height:0 }
  .wine{ scroll-snap-align:start }
  .wine__stage{ padding:clamp(26px,7vw,40px) 18px clamp(16px,4vw,24px) }
  .bottle{ width:min(132px,58%) }
  .wine .bottle--photo{ width:min(137px,60%) }
  .wine__text{ padding:clamp(20px,5vw,26px) }
  .wines__hint{
    display:flex; align-items:center; gap:.7em;
    margin-top:2px;
    font-family:var(--ui); font-size:10.5px; font-weight:500;
    letter-spacing:.18em; text-transform:uppercase; color:var(--ink-4);
  }
  .wines__hint::after{
    content:""; flex:1; height:1px; background:var(--line);
  }
}


@media (max-width: 640px){
  .heirloom{ padding:clamp(22px,6vw,32px) }
  .heirloom figure{ max-width:none }
  .ask{ padding:clamp(22px,6vw,32px) }
  .apply__form{ padding:clamp(20px,5vw,28px) }
  .fset legend{ margin-bottom:16px }
  .east__marks{ gap:18px 26px }
  .east__marks li{ font-size:clamp(1.4rem,7vw,1.9rem) }
  .pull{ padding-left:16px; margin:clamp(32px,9vw,48px) 0 clamp(28px,7vw,40px) }
  .film{ gap:22px }
  .awardlist li{ padding:18px 0 }
  .foot__nav{ gap:2px }
}


/* the portrait hero crop is already centred, so it needs no offset */
@media (max-width: 700px){
  .hero__media img{ object-position:50% 42% }
  .hero__veil{
    background:
      linear-gradient(180deg, rgba(30,18,10,.42) 0%, rgba(30,18,10,.04) 26%, rgba(30,18,10,.5) 58%, rgba(24,16,10,.88) 88%, var(--paper) 100%);
  }
}

/* the hero has to land whole on a phone: headline, promise, both routes in */
@media (max-width: 700px){
  .hero{ padding-top:clamp(84px,12vh,104px) }
  .hero .eyebrow{ font-size:9.5px; letter-spacing:.16em; margin-bottom:1em }
  .hero__title{ font-size:clamp(2.9rem,13.5vw,4rem); margin-bottom:.3em }
  .hero__sub{
    font-size:.95rem; line-height:1.55; max-width:34ch; margin-bottom:1.6em;
    color:rgba(252,249,246,.86);
  }
  .hero__body{ margin-bottom:clamp(20px,4vh,32px) }
  .hero__cta{ gap:10px }
  .hero__cta .btn{ flex:1 1 auto; padding-inline:18px }
  .hero__facts{ gap:14px 20px }
  .hero__facts dd{ font-size:1rem }
  .hero__foot{ padding-top:16px }
}


/* five specs, one row on a wide screen and sensible pairs below it */
@media (max-width: 1100px){ .specs{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width: 700px){ .specs{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* ------------------------------------------------- the survey, in one hand
   The plates, the index and the charter, recomposed for a phone. */
@media (max-width: 900px){
  .chead__no{ font-size:clamp(5rem,22vw,8rem); bottom:0 }

  .taste{ grid-template-columns:1fr; gap:22px }
  .taste__tabs{
    flex-direction:row; flex-wrap:nowrap; overflow-x:auto;
    gap:clamp(14px,4vw,26px);
    margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad);
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .taste__tabs::-webkit-scrollbar{ display:none }
  .taste__tabs button{ padding:10px 0 16px; white-space:nowrap; flex:0 0 auto }
  .taste__tabs button::after{ top:auto; bottom:8px; width:100%; height:1px }
  .taste__tabs button.is-on{ transform:none }
  .tpanel{ font-size:clamp(1.3rem,5.4vw,1.6rem) }

  .pact__grid{ grid-template-columns:1fr }
  .pcard,
  .pcard:nth-child(odd),
  .pcard:nth-child(even){ border-right:0; padding-left:0; padding-right:0 }

  .awardlist__medal{ font-size:clamp(1.4rem,6vw,1.8rem) }
}

/* =========================================================== the dark act
   Chapter 07's cloth, cut for more of the page: recognition, heritage and
   the partnership run as one act below the daylight chapters, and the
   descent opens with the same material because that is where the page first
   goes underground. Plates overlap with a shallow vault at each turn. */
.cloth{
  position:relative; overflow:hidden;
  background:#2A1408; color:var(--bone);
}
.cloth::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 55% at 80% 10%, rgba(212,175,55,.28), transparent 66%),
    radial-gradient(80% 70% at 4% 100%, rgba(139,69,19,.8), transparent 74%),
    repeating-linear-gradient(115deg, rgba(212,175,55,.05) 0 1px, transparent 1px 46px);
}
.cloth > *{ position:relative; z-index:1 }
.cloth--open{
  border-radius:clamp(28px,4.5vw,60px) clamp(28px,4.5vw,60px) 0 0;
  margin-top:calc(clamp(28px,4.5vw,60px) * -1);
}
.plate{
  position:relative; z-index:1;
  border-radius:clamp(28px,4.5vw,60px) clamp(28px,4.5vw,60px) 0 0;
  margin-top:calc(clamp(28px,4.5vw,60px) * -1);
}
/* heritage stands alone in the dark, and enters under a shallow vault */
.east{
  border-radius:clamp(28px,4.5vw,60px) clamp(28px,4.5vw,60px) 0 0;
  margin-top:calc(clamp(28px,4.5vw,60px) * -1);
  z-index:1;
}

.cloth .eyebrow{ color:var(--bone-3) }
.cloth .eyebrow .num{ color:var(--gold) }
.cloth .eyebrow .num::after{ background:var(--bone-line) }
.cloth .dsp,.cloth h3{ color:var(--bone) }
.cloth .chead{ border-bottom-color:var(--bone-line) }
.cloth .chead__no{ color:rgba(212,175,55,.1) }
@supports (-webkit-text-stroke: 1px red){
  .cloth .chead__no{ color:transparent; -webkit-text-stroke:1.2px rgba(212,175,55,.32) }
}
.cloth .lede{ color:var(--bone) }
.cloth p{ color:var(--bone-2) }

/* the descent intro wears it first */
.descent__intro{ padding-inline:0 }
.descent__intro .wrap{
  display:grid; align-items:end;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,90px);
}
.descent__intro .lede{ border-bottom-color:var(--bone-line); color:var(--bone-2) }
.descent__intro .chead{ border-bottom-color:var(--bone-line) }

/* recognition, on the cloth */
.cloth .awardlist,.awards.cloth .awardlist{ border-top-color:rgba(212,175,55,.5) }
.cloth .awardlist li{ border-top-color:var(--bone-line) }
.cloth .awardlist li:last-child{ border-bottom-color:var(--bone-line) }
.cloth .awardlist li:hover{ background:rgba(212,175,55,.06) }
.cloth .awardlist__medal{ color:var(--gold) }
.cloth .awardlist__wine{ color:var(--bone) }
.cloth .awardlist__body{ color:var(--bone-4) }
.cloth .awardlist__year{ color:var(--gold) }

/* the charter, on the cloth */
.cloth .pact__grid{ border-top-color:rgba(212,175,55,.5) }
.cloth .pcard{ border-bottom-color:var(--bone-line) }
.cloth .pcard:nth-child(odd){ border-right-color:var(--bone-line) }
.cloth .pcard:hover{ background:rgba(212,175,55,.05) }
.cloth p.pcard__n{ color:var(--gold) }
.cloth .ticker b{ color:var(--gold) }
.cloth .ticker span{ color:var(--bone-4) }
.cloth .ask{ background:rgba(18,8,2,.5); border-top-color:rgba(212,175,55,.5) }
.cloth .ask__list li{ border-bottom-color:var(--bone-line); color:var(--bone-2) }
.cloth .ask__list li::before{ color:var(--gold) }

/* ------------------------------------------------ the walking filmstrip
   The land ends on a strip of harvest photography that walks past as the
   page moves, the way the rows pass a window. */
.land__filmstrip{ overflow:hidden; margin-top:clamp(56px,8vw,110px) }
.land__strip{
  display:grid; grid-auto-flow:column;
  grid-template-columns:none;
  grid-auto-columns:clamp(240px,26vw,420px);
  gap:clamp(10px,1.4vw,20px);
  width:max-content;
  margin-top:0;
  will-change:transform;
}
@media (max-width: 640px){
  .land__strip{ grid-template-columns:none }
  .land__strip figure:nth-child(n+3){ display:block }
}

/* -------------------------------------------------- the lit pull quote */
.pull .w{ opacity:.16; transition:opacity .5s var(--ease) }
.pull .w.is-lit{ opacity:1 }

@media (max-width: 900px){
  .descent__intro .wrap{ grid-template-columns:1fr; align-items:start; gap:clamp(24px,6vw,40px) }
  .descent__intro .lede{ border-bottom:0; padding-bottom:0 }
  .land__strip{ grid-auto-columns:min(70vw,340px) }
}
@media (prefers-reduced-motion: reduce){
  .land__filmstrip{ overflow-x:auto; -webkit-overflow-scrolling:touch }
  .pull .w{ opacity:1 }
}

/* ------------------------------------------------ the printed front label
   The real artwork, cropped inside its die. Its top arches like the niche
   it stands in. The drawn label stays for wines whose print is not final. */
.bottle__label--art{
  top:47%; height:auto; aspect-ratio:640/645;
  padding:0; background:#FDFCFA;
  display:block; overflow:hidden;
  border-radius:999px 999px 0 0 / 90px 90px 0 0;
}
.bottle__label--art img{ width:100%; height:100%; object-fit:cover; display:block }

/* estate grown, said once and plainly, under the chapter datum */
.wines__estate{
  font-family:var(--ui); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--primary);
  margin:calc(clamp(40px,6vw,84px) * -0.55) 0 clamp(36px,5vw,64px);
}

/* ------------------------------------------------------------- founder
   The man behind the return: his portrait in a vault niche, his story in
   the estate's own ledger language. */
.founder{
  background:var(--paper-2);
  background-image:
    radial-gradient(110% 85% at 90% -8%, rgba(212,175,55,.09), transparent 56%),
    repeating-linear-gradient(115deg, rgba(139,69,19,.03) 0 1px, transparent 1px 46px);
}
.founder__grid{
  display:grid; gap:clamp(36px,5vw,90px);
  grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  align-items:start;
}
.founder__fig{ margin:0 }
.founder__fig picture{
  display:block; overflow:hidden;
  border-radius:999px 999px 0 0;
  border:1px solid rgba(139,69,19,.22);
}
.founder__fig img{ width:100%; height:auto; display:block }
.founder__fig figcaption{
  margin-top:14px;
  font-family:var(--ui); font-size:10.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-4);
}
.founder__text p{ max-width:58ch; color:var(--ink-2) }
.founder__text .lede{ color:var(--ink) }
.founder__facts{ margin-top:36px }

@media (max-width: 900px){
  .founder__grid{ grid-template-columns:1fr }
  .founder__fig{ max-width:min(86vw, 420px) }
}

/* the rendered bottles: sized so their bases and shoulders sit level with
   the drawn bottle that still waits for its photograph */
.bottle--photo{ width:min(166px,80%); aspect-ratio:268/936 }
.bottle--photo img{ width:100%; height:100%; display:block }

/* ---------------------------------------------------- the wine plates
   Each wine is presented on the house's own sheet: label and bottle
   photographed together, shown whole, framed like a plate in the folio.
   The words and the ledger follow beneath. */
.wplates{ display:grid; gap:clamp(56px,7vw,104px) }
.wplate{ padding-bottom:clamp(44px,6vw,84px); border-bottom:var(--rule) }
.wplate__sheet{
  margin:0 auto; max-width:1060px;
}
.wplate__sheet img{
  width:100%; height:auto; display:block;
  border:1px solid rgba(18,18,18,.08);
  box-shadow:0 40px 80px -48px rgba(18,18,18,.5);
}
.wplate__row{
  display:grid; align-items:start;
  grid-template-columns:minmax(0,.56fr) minmax(0,.44fr);
  column-gap:clamp(32px,5vw,90px);
  max-width:1060px; margin:clamp(28px,3.6vw,44px) auto 0;
  padding:0;
}
.wplate__row .wine__spec{ margin-top:2.4em }

@media (max-width: 900px){
  .wplate__row{ grid-template-columns:1fr; row-gap:8px }
  .wplate__row .wine__spec{ margin-top:10px }
}}