/* ==========================================================================
   Vinag 1847 — koncept AVINII (oktober 2026)
   The casavanamilos.com house system (DESIGN.md §1–§5, §10) re-cut in Vinag's
   own tokens: gold on warm near-black, a Didone display, Barlow for the body.
   ========================================================================== */

/* ---------- fonts: self-hosted, latin + latin-ext (š č ž are Latin Ext-A) ---------- */
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/bodoni-moda-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/bodoni-moda-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/bodoni-moda-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/bodoni-moda-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/barlow-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/barlow-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- tokens ---------- */
:root{
  /* ground: warm near-black, from the logo ink #231F20 and the cellar photographs */
  --ink-900:#0B0908; --ink-800:#161110; --ink-700:#211A17;
  --umber:#3A2A1F; --umber-lift:#4C3A2C;
  /* accent: the logo's own gold, 700 / 500 / 300 (casa's brass roles) */
  --gold-700:#927A4A; --gold-500:#DAC186; --gold-300:#F0E2BD;
  --metal:linear-gradient(160deg,var(--gold-700),var(--gold-500) 45%,var(--gold-300) 70%,var(--gold-500));
  /* text: one ivory, opacity steps */
  --ivory:#F2EBDD;
  --ivory-92:rgb(242 235 221 / .92); --ivory-64:rgb(242 235 221 / .64);
  --ivory-38:rgb(242 235 221 / .38); --ivory-14:rgb(242 235 221 / .14);
  /* the daylight act (Vinoteka only): the site's own paper and the logo ink */
  --paper:#EEECEA; --paper-card:#F6F5F3; --paper-ink:#231F20;
  --paper-72:rgb(35 31 32 / .72); --paper-12:rgb(35 31 32 / .12); --paper-24:rgb(35 31 32 / .24);
  /* the label palette: Vinoteka only, one hue per wine, never text */
  --l-apricot:#F8C07F; --l-pink:#F5A3B2; --l-coral:#F7A392; --l-mint:#8DCAAE; --l-peri:#8287C6;

  --serif:'Bodoni Moda','Bodoni 72',Didot,Georgia,serif;
  --sans:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;

  --pad-x:clamp(1.5rem,5vw,6rem); --pad-y:clamp(1.6rem,2.8vw,4rem);
  --col:74rem;
  --gutter:max(var(--pad-x),calc((100% - var(--col)) / 2));
  --step:clamp(3rem,5.5vw,5rem);
  --section-y:clamp(4.5rem,8vw,8.5rem);
  --fs-chapter:clamp(1.9rem,3.4vw,3rem);
  --measure:50ch;
  --head-h:5rem;
  --expo:cubic-bezier(.16,1,.3,1);
  --out:cubic-bezier(.33,1,.68,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink-900); -webkit-text-size-adjust:100%; scrollbar-gutter:stable; scroll-behavior:smooth}
body{
  margin:0; background:var(--ink-900); color:var(--ivory);
  font-family:var(--sans); font-size:1rem; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
p{margin:0}
:focus-visible{outline:2px solid var(--gold-300); outline-offset:3px; border-radius:2px}
::selection{background:var(--gold-500); color:var(--ink-900)}
[id]{scroll-margin-top:calc(var(--head-h) - 1px)}
main:focus{outline:none}
.skip-link{position:fixed; z-index:120; top:1rem; left:var(--pad-x); padding:.75rem 1rem; background:var(--gold-300); color:var(--ink-900); transform:translateY(-200%); opacity:0}
.skip-link:focus{transform:none; opacity:1}
.wrap{position:relative; max-width:var(--col); margin-inline:auto}
.section{position:relative; padding:var(--section-y) var(--pad-x)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif); font-weight:400; margin:0}
h1{font-variation-settings:'opsz' 96; line-height:1.04; letter-spacing:-.01em}
h2{
  font-size:var(--fs-chapter); line-height:1.08; letter-spacing:-.01em;
  font-variation-settings:'opsz' 72; text-wrap:balance;
}
/* micro-caps: the one label voice — navigation, status, keys, facts (.7rem / .2em, Barlow 500) */
.eyebrow,.nav a,.rail,.tile figcaption,.index-row .k,.times-k,.pkg-n,.pick,.wine-n,.wine-facts,.lines-k,.next-k,.next-meta,.aw-meta,.facts dt,.menu-n{
  font-family:var(--sans); font-size:.7rem; line-height:1.4; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
}
.eyebrow{
  display:flex; align-items:center; gap:.9rem;
  color:var(--gold-300); margin:0 0 clamp(.9rem,1.6vw,1.5rem);
}
.eyebrow::before{content:""; width:clamp(24px,4vw,54px); height:1px; background:var(--gold-500); flex:none}
h2.eyebrow{font-variation-settings:normal}
.sub{margin:clamp(.9rem,1.5vw,1.25rem) 0 0; color:var(--ivory-64); max-width:44ch; font-size:1.02rem; line-height:1.6}
.sub--tag{
  font-family:var(--serif); font-style:italic; color:var(--gold-300);
  font-size:clamp(1.15rem,1.9vw,1.5rem); line-height:1.35; max-width:44ch;
  margin-top:clamp(2.2rem,4vw,3.4rem); font-variation-settings:'opsz' 40;
}
.story{margin:clamp(1.2rem,2.2vw,1.8rem) 0 0; color:var(--ivory-64); max-width:var(--measure); font-size:1.04rem; line-height:1.65}
.story + .story{margin-top:.9rem}

/* ---------- cta, link ---------- */
.cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-top:clamp(1.4rem,2.4vw,2.3rem)}
.cta{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.55rem; border:1px solid var(--gold-500); border-radius:2px; color:var(--gold-300);
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500; line-height:1.2; white-space:nowrap;
  transition:color .24s ease,border-color .24s ease,transform .24s var(--expo);
}
.cta::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--gold-500);
  transform:scaleX(0); transform-origin:100% 50%; transition:transform .3s var(--expo);
}
.cta--ghost{border-color:var(--ivory-14); color:var(--ivory-64)}
.cta--ghost::before{background:var(--ivory)}
.cta--sm{padding:.62rem 1.05rem; font-size:.66rem; letter-spacing:.14em}
@media (hover:hover) and (pointer:fine){
  .cta:hover{color:var(--ink-900)}
  .cta:hover::before{transform:scaleX(1); transform-origin:0 50%; transition-duration:.42s}
  .cta--ghost:hover{color:var(--ink-900); border-color:var(--ivory)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .cta:hover{transform:translateY(-2px)}
}
@media (prefers-reduced-motion:no-preference){.cta:active{transform:scale(.97)}}

.link{
  position:relative; display:inline-block;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500; line-height:1.4;
  color:var(--gold-300); border-bottom:1px solid rgb(218 193 134 / .45); padding-bottom:2px;
  transition:color .24s ease,border-color .24s ease;
}
.link::after{content:""; position:absolute; inset:-10px -6px}
.link:hover{color:var(--gold-500); border-bottom-color:var(--gold-500)}
.link--inline{font-size:.66rem; margin-left:.35rem; vertical-align:.08em}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:60;
  height:var(--head-h); margin-bottom:calc(-1 * var(--head-h));
  display:flex; align-items:center; gap:clamp(1.25rem,3vw,3rem);
  padding-inline:var(--gutter);
  transition:color .3s ease;
}
.site-head::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  background:rgb(11 9 8 / .5); opacity:0; transition:opacity .3s ease,background-color .3s ease;
}
.site-head.is-scrolled::before{opacity:1}
.head-mark{
  display:block; flex:none; height:56px; aspect-ratio:375/283;
  background:var(--metal);
  -webkit-mask:url('../logo/vinag-mark.png') no-repeat center/contain;
          mask:url('../logo/vinag-mark.png') no-repeat center/contain;
  transition:opacity .3s ease,filter .3s ease;
}
.head-mark:hover{filter:brightness(1.12)}
.nav{display:flex; align-items:center; gap:clamp(1.5rem,2.6vw,2.6rem); margin-left:auto}
.nav a{
  position:relative; padding-block:.6rem; color:var(--ivory-64); white-space:nowrap;
  transition:color .24s ease;
}
.nav a::after{content:""; position:absolute; bottom:.3rem; left:0; right:.18em; height:1px; background:var(--gold-500); transform:scaleX(0); transform-origin:100% 50%; transition:transform .26s var(--expo)}
.nav a[aria-current]{color:var(--gold-300)}
.nav a[aria-current]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){
  .nav a:hover{color:var(--gold-300)}
  .nav a:hover::after{transform:scaleX(1); transform-origin:0 50%; transition-duration:.44s}
}
.head-actions{display:flex; align-items:center; gap:clamp(.85rem,1.6vw,1.25rem); flex:none}
.head-cta{min-height:40px}
.lang{display:flex; align-items:center; flex:none; border:1px solid var(--ivory-14); border-radius:999px; overflow:hidden; background:rgb(11 9 8 / .36)}
.lang button{min-width:40px; min-height:38px; padding:.4rem .7rem; font-size:.64rem; letter-spacing:.14em; font-weight:500; color:var(--ivory-64); transition:color .24s ease,background-color .24s ease}
.lang button + button{border-left:1px solid var(--ivory-14)}
.lang button:hover{color:var(--ivory)}
.lang button[aria-pressed="true"]{color:var(--ink-900); background:var(--gold-500)}
.burger{display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; color:var(--ivory); transition:color .22s ease}
.burger i{position:relative; display:block; width:26px; height:22px}
.burger i::before,.burger i::after{
  content:""; position:absolute; left:0; top:10.5px; width:26px; height:1px; background:currentColor;
  transform:translateY(-4px); transition:transform .4s var(--expo);
}
.burger i::after{transform:translateY(4px)}
.burger[aria-expanded="true"] i::before{transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{transform:rotate(-45deg)}
@media (hover:hover){.burger:hover{color:var(--gold-300)}}

/* over the daylight act the header speaks in the logo's other colour, its black */
.site-head.on-light{color:var(--paper-ink)}
.site-head.on-light::before{background:rgb(238 236 234 / .72)}
.site-head.on-light .head-mark{background:var(--paper-ink)}
.site-head.on-light .nav a{color:var(--paper-72)}
.site-head.on-light .nav a[aria-current],.site-head.on-light .nav a:hover{color:var(--paper-ink)}
.site-head.on-light .nav a::after{background:var(--paper-ink)}
.site-head.on-light .head-cta{color:var(--paper-ink); border-color:var(--gold-700)}
.site-head.on-light .head-cta::before{background:var(--paper-ink)}
.site-head.on-light .head-cta:hover{color:var(--paper)}
.site-head.on-light .lang{background:rgb(238 236 234 / .5); border-color:var(--paper-24)}
.site-head.on-light .lang button{color:var(--paper-72)}
.site-head.on-light .lang button + button{border-left-color:var(--paper-24)}
.site-head.on-light .lang button[aria-pressed="true"]{color:var(--paper); background:var(--paper-ink)}
.site-head.on-light .burger{color:var(--paper-ink)}
body.menu-open .site-head{color:var(--ivory)}
body.menu-open .site-head::before{opacity:0}

/* ---------- the burger overlay ---------- */
.menu{
  position:fixed; inset:0; z-index:55; overflow-y:auto;
  display:flex; align-items:center;
  padding:calc(var(--head-h) + 2rem) var(--gutter) 3rem;
  background:rgb(11 9 8 / .95); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  opacity:0; visibility:hidden; transition:opacity .35s ease,visibility 0s linear .35s;
}
.menu.is-open{opacity:1; visibility:visible; transition:opacity .35s ease}
.menu-inner{width:100%}
.menu-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--ivory-14); max-width:40rem}
.menu-list a{
  display:flex; align-items:baseline; gap:1.5rem; padding:clamp(.7rem,1.3vw,1rem) 0; border-bottom:1px solid var(--ivory-14);
  font-family:var(--serif); font-size:clamp(1.6rem,3.4vw,2.6rem); line-height:1.15; letter-spacing:-.01em; font-variation-settings:'opsz' 72;
  color:var(--ivory); transition:color .24s ease,border-color .24s ease;
}
.menu-n{color:var(--gold-500); width:2.5rem; flex:none}
.menu-list a:hover{color:var(--gold-300); border-bottom-color:rgb(218 193 134 / .4)}
.menu-reach{display:flex; flex-wrap:wrap; gap:.5rem 2rem; margin-top:2rem; color:var(--ivory-64); font-size:.9rem}
.menu-reach a:hover{color:var(--gold-300)}
.menu .menu-list li{opacity:0; transform:translate3d(0,14px,0); transition:opacity .4s ease,transform .6s var(--expo)}
.menu.is-open .menu-list li{opacity:1; transform:none; transition-delay:calc(var(--n,0) * 45ms + 80ms)}
body.menu-open{overflow:hidden}

/* ---------- act I: the hero ---------- */
.act--i{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100vh; min-height:100svh;
  display:grid; grid-template-rows:var(--head-h) 1fr auto;
  padding:0 var(--gutter) var(--pad-y);
}
.stage{position:absolute; inset:0; z-index:-1; overflow:hidden; background:var(--ink-900)}
.stage-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:38% 52%}
.scrim{position:absolute; inset:0; pointer-events:none}
/* the grade: warm umber multiplied over the frame, so the white work-lights read as lanterns */
.scrim--grade{background:rgb(92 64 40 / .5); mix-blend-mode:multiply}
.scrim--v{background:linear-gradient(to top,rgb(11 9 8 / .94) 0%,rgb(11 9 8 / .6) 24%,rgb(11 9 8 / .16) 56%,rgb(11 9 8 / .46) 100%)}
.scrim--h{background:linear-gradient(100deg,rgb(11 9 8 / .9) 0%,rgb(11 9 8 / .66) 30%,rgb(11 9 8 / .26) 56%,rgb(11 9 8 / 0) 78%)}
.scrim--bloom{background:radial-gradient(56% 48% at 24% 48%,rgb(58 42 31 / .34) 0%,rgb(58 42 31 / 0) 70%)}
.scrim--deep{background:linear-gradient(to bottom,rgb(11 9 8 / 0) 84%,var(--ink-900) 100%)}
.scrim--veil{background:var(--ink-900); opacity:0}

.hero{grid-row:2; align-self:center; width:100%; padding-block:clamp(1rem,2vw,2.5rem)}
.mark{
  --w:clamp(96px,8.4vw,124px);
  position:relative; overflow:hidden; width:var(--w); aspect-ratio:375/283;
  background:var(--metal);
  -webkit-mask:url('../logo/vinag-mark.png') no-repeat center/100% 100%;
          mask:url('../logo/vinag-mark.png') no-repeat center/100% 100%;
  margin-bottom:clamp(1.3rem,2.4vw,2.4rem);
}
.mark .sheen{
  position:absolute; inset:-10% -60%;
  background:linear-gradient(105deg,rgb(240 226 189 / 0) 43%,rgb(255 250 236 / .98) 50%,rgb(240 226 189 / 0) 57%);
  transform:translate3d(-70%,0,0); opacity:0;
}
.act--i .eyebrow{text-shadow:0 1px 14px rgb(11 9 8 / .8)}
.hero h1{
  font-size:clamp(2.3rem,5vw,4.75rem); max-width:none;
  text-shadow:0 1px 30px rgb(11 9 8 / .6),0 1px 4px rgb(11 9 8 / .45);
}
.hero h1 span{display:block}
.hero h1 .l2{color:var(--gold-300); font-style:italic}
.lead{
  margin:clamp(1.1rem,1.9vw,1.8rem) 0 0; max-width:56ch;
  font-size:clamp(1.04rem,.6rem + .8vw,1.2rem); line-height:1.6; color:var(--ivory-92);
  text-shadow:0 1px 22px rgb(11 9 8 / .7),0 1px 3px rgb(11 9 8 / .5);
}
.hero .cta:not(.cta--ghost){background:rgb(218 193 134 / .14); border-color:var(--gold-300)}
.hero .cta--ghost{border-color:rgb(242 235 221 / .34); color:var(--ivory)}
@media (hover:hover) and (pointer:fine){
  .hero .cta:not(.cta--ghost):hover{border-color:var(--gold-500)}
  .hero .cta--ghost:hover{border-color:var(--ivory); color:var(--ink-900)}
}
.rail{
  grid-row:3; width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; color:var(--ivory-64);
}
.scroll-cue{display:flex; align-items:center; gap:.85rem; transition:color .24s ease}
.scroll-cue:hover{color:var(--gold-300)}
.scroll-cue i{display:block; width:1px; height:38px; background:linear-gradient(to bottom,var(--gold-500),rgb(218 193 134 / 0)); transform-origin:top; animation:drop 2.4s var(--expo) infinite}
@keyframes drop{0%{transform:scaleY(0); opacity:0}30%{opacity:1}100%{transform:scaleY(1); opacity:0}}
.rail .right{text-align:right; color:var(--gold-300)}

/* --- the signature moment: the gold catches the light ---
   Before .is-ready (set by site.js once the photo is decoded) the frame is blurred, dim and
   veiled; then it settles to sharp over 2 s while the veil lifts and the lantern warmth comes up,
   one sheen crosses the gold mark, and the words rise in after it. */
.js .stage-img{filter:blur(14px) brightness(.62) saturate(.7); transform:scale(1.05)}
.js .scrim--veil{opacity:.9}
.js .mark{opacity:0}
.js .act--i .reveal{opacity:0; transform:translate3d(0,18px,0)}
.is-ready .stage-img{animation:settle 2s var(--out) forwards}
.is-ready .scrim--veil{animation:veil 2.2s cubic-bezier(.4,0,.2,1) forwards}
.is-ready .mark{animation:mark-in 1.1s var(--expo) .25s forwards}
.is-ready .mark .sheen{animation:sheen 1.7s cubic-bezier(.45,0,.2,1) .6s forwards}
.is-ready .act--i .reveal{animation:rise .9s var(--expo) forwards; animation-delay:calc(760ms + var(--i,0) * 80ms)}
@keyframes settle{to{filter:blur(0) brightness(1) saturate(1); transform:scale(1)}}
@keyframes veil{to{opacity:0}}
@keyframes mark-in{from{opacity:0; transform:translate3d(0,8px,0)}to{opacity:1; transform:none}}
@keyframes sheen{0%{transform:translate3d(-70%,0,0); opacity:0}20%{opacity:1}100%{transform:translate3d(75%,0,0); opacity:0}}

/* ---------- reveals ---------- */
.reveal{opacity:0; transform:translate3d(0,26px,0)}
.in .reveal,.in.reveal{animation:rise .85s var(--expo) forwards; animation-delay:calc(var(--i,0) * 70ms)}
@keyframes rise{to{opacity:1; transform:none}}
.in .reveal-group:not(.in) .reveal{animation:none}
.no-js .reveal{opacity:1; transform:none}

/* ---------- act II: klet ---------- */
.act--ii{
  background:
    radial-gradient(60% 50% at 82% 38%,rgb(58 42 31 / .26) 0%,rgb(58 42 31 / 0) 70%),
    linear-gradient(to bottom,var(--ink-900) 0%,var(--ink-800) 46%,var(--ink-900) 100%);
}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(2rem,5vw,5rem); align-items:center}
.split-text{max-width:34rem}

.tile{
  margin:0; position:relative; overflow:hidden; border-radius:2px;
  background:var(--ink-800); border:1px solid rgb(240 226 189 / .10);
  box-shadow:inset 0 1px 0 rgb(240 226 189 / .06),0 22px 50px -34px rgb(0 0 0 / .95);
  transition:border-color .24s ease,translate .24s var(--expo);
}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:sepia(.16) saturate(1.06) brightness(.94)}
.tile::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top,rgb(11 9 8 / .42) 0%,rgb(11 9 8 / 0) 42%)}
.tile--32{aspect-ratio:3/2}
.tile--45{aspect-ratio:4/5}
.tile figcaption{
  position:absolute; z-index:1; left:clamp(1rem,1.8vw,1.4rem); bottom:clamp(.9rem,1.6vw,1.2rem); color:var(--ivory-92);
}
@media (hover:hover) and (pointer:fine){.tile:hover{border-color:rgb(240 226 189 / .28)}}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.tile:hover{translate:0 -3px}}

/* ---------- index rows ---------- */
.index{margin:clamp(3rem,5.5vw,5rem) 0 0; border-top:1px solid var(--ivory-14)}
.index-row{
  display:grid; grid-template-columns:minmax(0,11rem) minmax(0,14rem) minmax(0,1fr);
  gap:.6rem clamp(1rem,2vw,2rem); align-items:baseline;
  padding:clamp(1.05rem,1.7vw,1.5rem) 0; border-bottom:1px solid var(--ivory-14);
  transition:border-color .3s ease;
}
.index-row .n{
  font-family:var(--serif); font-variation-settings:'opsz' 20; color:var(--gold-500);
  font-size:clamp(1.5rem,2.2vw,2rem); line-height:1; letter-spacing:-.005em; font-variant-numeric:lining-nums;
}
.index-row .k{color:var(--ivory); transition:transform .3s var(--expo); display:inline-block}
.index-row .v{color:var(--ivory-64); font-size:.98rem; max-width:52ch}
@media (hover:hover){
  .index-row:hover{border-bottom-color:rgb(218 193 134 / .42)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.index-row:hover .k{transform:translateY(-2px)}}

/* ---------- act III: vodeni ogledi ---------- */
.section--tours{background:var(--ink-900)}
.tours{display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(2rem,5vw,5rem); align-items:stretch}
.tours-photo.tile--45{aspect-ratio:auto; min-height:32rem}
.tours-photo img{object-position:42% 50%}
.times{display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.4rem; margin-top:clamp(1.6rem,2.6vw,2.2rem); padding-top:1.1rem; border-top:1px solid var(--ivory-14)}
.times-k{color:var(--ivory-64); margin-right:.4rem}
.times .t{font-family:var(--serif); font-variation-settings:'opsz' 20; font-size:clamp(1.35rem,2vw,1.75rem); line-height:1; color:var(--gold-500); font-variant-numeric:lining-nums}
.times-note{margin-top:.8rem; font-size:.9rem; color:var(--ivory-64)}

.packages{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(.8rem,1.4vw,1.2rem); margin-top:clamp(2rem,3.4vw,2.8rem)}
.pkg{
  display:flex; flex-direction:column;
  padding:clamp(1.15rem,1.9vw,1.6rem) clamp(1.15rem,1.9vw,1.6rem) clamp(1.1rem,1.7vw,1.4rem);
  border:1px solid rgb(240 226 189 / .10); border-radius:3px; background:rgb(22 17 16 / .55);
  box-shadow:inset 0 1px 0 rgb(240 226 189 / .06),0 18px 44px -34px rgb(0 0 0 / .9);
  transition:border-color .24s ease,translate .24s var(--expo);
}
.pkg-n{display:flex; align-items:center; justify-content:space-between; gap:1rem; color:var(--ivory-64)}
.pkg{position:relative}
.pick{
  position:absolute; top:0; right:clamp(1rem,1.6vw,1.4rem); transform:translateY(-50%);
  padding:.2rem .6rem; background:var(--ink-900); border:1px solid rgb(218 193 134 / .4); border-radius:2px;
  font-size:.6rem; color:var(--gold-300);
}
.pkg-name{font-size:clamp(1.45rem,2.1vw,1.9rem); line-height:1.12; letter-spacing:-.01em; margin-top:.55rem; font-variation-settings:'opsz' 32}
.pkg-desc{margin-top:.5rem; color:var(--ivory-64); font-size:.95rem; line-height:1.55; max-width:34ch}
.pkg-actions{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-top:auto; padding-top:clamp(1.1rem,1.8vw,1.5rem)}
.price{font-family:var(--serif); font-variation-settings:'opsz' 20; font-size:clamp(1.5rem,2.2vw,1.95rem); line-height:1; color:var(--gold-500); font-variant-numeric:lining-nums}
.pkg--pick{border-color:rgb(218 193 134 / .26)}
@media (hover:hover) and (pointer:fine){
  .pkg:hover{border-color:rgb(240 226 189 / .30)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.pkg:hover{translate:0 -3px}}

/* ---------- act IV: vinoteka, the step into daylight ---------- */
.act--light{background:var(--paper); color:var(--paper-ink)}
.act--light .eyebrow{color:var(--paper-ink)}
.act--light .eyebrow::before{background:var(--gold-700)}
.act--light .sub{color:var(--paper-72)}
.act--light .link{color:var(--paper-ink); border-bottom-color:rgb(146 122 74 / .7)}
.act--light .link:hover{color:var(--paper-ink); border-bottom-color:var(--paper-ink)}
.sec-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem clamp(2rem,5vw,5rem); align-items:end}
.sec-head .sub{margin:0 0 .35rem; max-width:44ch}

.wines{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.8rem,1.5vw,1.4rem); margin-top:clamp(2.6rem,4.6vw,4rem)}
.wine{
  display:flex; flex-direction:column; color:inherit;
  background:var(--paper-card); border:1px solid var(--paper-12); border-radius:3px;
  box-shadow:0 1px 0 rgb(255 255 255 / .7) inset,0 24px 46px -38px rgb(35 31 32 / .45);
  transition:border-color .24s ease,translate .24s var(--expo),box-shadow .24s ease;
}
.wine-media{margin:0; position:relative; aspect-ratio:1; overflow:hidden; border-radius:2px 2px 0 0; background:var(--paper-card)}
.wine-media img{position:absolute; left:0; right:0; top:7%; bottom:3%; width:100%; height:90%; object-fit:contain; mix-blend-mode:multiply}
/* the label's own colour: one 2px hairline where the bottle meets the words */
.wine-media::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--hue); transform-origin:0 50%; transition:transform .5s var(--expo)}
.wine-body{display:flex; flex-direction:column; flex:1; padding:clamp(1rem,1.6vw,1.35rem) clamp(1rem,1.6vw,1.35rem) clamp(1.1rem,1.7vw,1.4rem)}
.wine-n{color:var(--paper-72)}
.wine-name{font-size:clamp(1.35rem,1.9vw,1.7rem); line-height:1.12; letter-spacing:-.01em; margin-top:.4rem; font-variation-settings:'opsz' 32; color:var(--paper-ink)}
.wine-desc{margin-top:.45rem; font-size:.93rem; line-height:1.5; color:var(--paper-72)}
.wine-facts{margin-top:.8rem; color:var(--paper-72)}
.wine .link{align-self:flex-start; margin-top:auto}
.wine-facts{margin-bottom:1.1rem}
@media (hover:hover) and (pointer:fine){
  .wine:hover{border-color:var(--paper-24); box-shadow:0 1px 0 rgb(255 255 255 / .7) inset,0 30px 50px -36px rgb(35 31 32 / .5)}
  .wine:hover .link{border-bottom-color:var(--paper-ink)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.wine:hover{translate:0 -3px}}
.lines{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1.6rem;
  margin-top:clamp(2rem,3.4vw,2.8rem); padding-top:1.2rem; border-top:1px solid var(--paper-12);
  font-family:var(--serif); font-size:1.2rem; font-variation-settings:'opsz' 18; color:var(--paper-ink);
}
.lines-k{color:var(--paper-72)}
.lines .link{margin-left:auto; font-family:var(--sans)}
/* round 2: the line names lead into the shop, filtered */
.lines > a:not(.link){border-bottom:1px solid transparent; transition:border-color .24s ease,color .24s ease}
.lines > a:not(.link):hover{border-bottom-color:var(--gold-700)}
.tours-more{margin-top:1.1rem}
.menu-list a[aria-current],.foot-nav a[aria-current]{color:var(--gold-300)}

/* ---------- act V: dogodki ---------- */
.section--events{background:linear-gradient(to bottom,var(--ink-900),var(--ink-800) 60%,var(--ink-900))}
.split--events{align-items:end}
.next{margin-top:clamp(1.8rem,3.2vw,2.6rem); padding-top:clamp(1.3rem,2.2vw,1.8rem); border-top:1px solid rgb(218 193 134 / .32)}
.next-k{color:var(--gold-300)}
.next-date{font-family:var(--serif); font-variation-settings:'opsz' 32; font-size:clamp(2.4rem,4.2vw,3.6rem); line-height:1; letter-spacing:-.01em; color:var(--gold-500); margin-top:.7rem; font-variant-numeric:lining-nums}
.next-name{font-size:clamp(1.5rem,2.3vw,2rem); line-height:1.12; letter-spacing:-.01em; margin-top:.75rem; font-variation-settings:'opsz' 40}
.next-meta{margin-top:.6rem; color:var(--ivory-92)}
.next-tix{margin:.45rem 0 1.3rem; font-size:.95rem; color:var(--ivory-64)}
.index--events .index-row .n{font-size:clamp(1.2rem,1.6vw,1.45rem)}

/* ---------- act VI: nagrade ---------- */
.section--awards{padding-block:0 clamp(3.5rem,6vw,5.5rem); background:var(--ink-900)}
.section--awards .wrap{padding-top:clamp(2.6rem,4.4vw,3.6rem); border-top:1px solid var(--ivory-14)}
.awards{list-style:none; margin:clamp(.6rem,1.4vw,1.2rem) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.awards li{display:flex; flex-direction:column; gap:.55rem; padding:.2rem clamp(1rem,2.2vw,2rem) .3rem; border-left:1px solid rgb(218 193 134 / .2)}
.awards li:first-child{padding-left:0; border-left:0}
.aw-meta{color:var(--gold-300)}
.aw-name{font-family:var(--serif); font-variation-settings:'opsz' 32; font-size:clamp(1.25rem,1.75vw,1.55rem); line-height:1.16; letter-spacing:-.005em}
.aw-wine{font-size:.9rem; line-height:1.5; color:var(--ivory-64)}

/* ---------- act VII: kontakt panel ---------- */
.section--contact{padding-top:0}
.contact{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(1.8rem,4vw,3.5rem); align-items:center;
  padding:clamp(1.8rem,4vw,3.4rem); border-radius:3px;
  border:1px solid rgb(218 193 134 / .22);
  background:linear-gradient(150deg,rgb(76 58 44 / .42) 0%,rgb(58 42 31 / .22) 46%,rgb(22 17 16 / .14) 100%);
  box-shadow:inset 0 1px 0 rgb(240 226 189 / .10),0 30px 70px -44px rgb(0 0 0 / .95);
}
.contact h2{font-size:clamp(1.7rem,2.8vw,2.5rem); line-height:1.1; max-width:16ch}
.contact .note{margin-top:.9rem; color:var(--ivory-64); font-size:.98rem; max-width:40ch}
.contact .cta-row{margin-top:clamp(1.4rem,2.2vw,1.9rem)}
.reach{display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; margin-bottom:clamp(1.5rem,2.4vw,2rem)}
.phone{font-family:var(--serif); font-variation-settings:'opsz' 20; font-size:clamp(1.6rem,3vw,2.35rem); line-height:1.1; color:var(--gold-300); letter-spacing:0; font-variant-numeric:lining-nums; transition:color .24s ease}
.phone:hover{color:var(--gold-500)}
.facts{margin:0; border-top:1px solid var(--ivory-14)}
.facts > div{display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:1rem; align-items:baseline; padding:.85rem 0; border-bottom:1px solid var(--ivory-14)}
.facts dt{color:var(--ivory-64)}
.facts dd{margin:0; font-size:.95rem; color:var(--ivory-92)}

/* ---------- footer ---------- */
.site-foot{
  width:min(var(--col),100% - 2 * var(--pad-x)); margin-inline:auto;
  padding:clamp(3rem,5vw,4.5rem) 0 clamp(2rem,3vw,2.6rem); text-align:center;
  border-top:1px solid var(--ivory-14);
}
.foot-lockup{
  display:block; width:clamp(96px,7vw,108px); aspect-ratio:375/283; margin:0 auto clamp(1.8rem,2.8vw,2.4rem);
  background:var(--metal);
  -webkit-mask:url('../logo/vinag-mark.png') no-repeat center/100% 100%;
          mask:url('../logo/vinag-mark.png') no-repeat center/100% 100%;
  transition:filter .25s ease;
}
.foot-lockup:hover{filter:brightness(1.14)}
.foot-nav{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.2rem 1.6rem}
.foot-nav a,.foot-reach a,.foot-place a,.foot-legal a{display:inline-flex; align-items:center; min-height:2.25rem; color:var(--ivory-64); transition:color .24s ease}
.foot-nav a{font-size:.875rem}
.foot-reach{display:flex; flex-wrap:wrap; justify-content:center; gap:0 1.6rem; margin-top:1rem; font-size:.84rem}
.foot-place{margin-top:.2rem; font-size:.78rem; line-height:1.6; color:var(--ivory-64)}
.foot-place a{min-height:0; margin-left:.2rem}
.nw{white-space:nowrap}
@media (hover:hover){.foot-nav a:hover,.foot-reach a:hover,.foot-place a:hover,.foot-legal a:hover{color:var(--gold-300)}}
.foot-languages{display:flex; justify-content:center; gap:.2rem; margin-top:1.2rem}
.foot-languages button{min-width:38px; min-height:36px; padding:0 .4rem; font-size:.74rem; letter-spacing:.1em; color:var(--ivory-64); position:relative}
.foot-languages button[aria-pressed="true"]{color:var(--gold-300)}
.foot-languages button[aria-pressed="true"]::after{content:""; position:absolute; left:.7rem; right:.7rem; bottom:8px; height:1px; background:var(--gold-500)}
.foot-languages button:hover{color:var(--ivory)}
.foot-base{display:grid; justify-items:center; margin-top:2rem}
.foot-copy,.foot-legal{font-size:.75rem; line-height:1.6; color:var(--ivory-64)}
.foot-legal a{min-height:0}
.credit{display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; margin-top:.9rem; color:var(--ivory-38); transition:color .3s ease}
@media (hover:hover){.credit:hover{color:var(--gold-300)}}
.avinii{width:46px; height:auto; display:block}

/* ---------- short laptop screens: give the fold back off the mark (casa §3) ---------- */
@media (min-width:900px) and (max-height:860px){
  .mark{--w:clamp(84px,6.6vw,108px); margin-bottom:clamp(1rem,1.6vw,1.6rem)}
  .lead{margin-top:clamp(.9rem,1.4vw,1.3rem)}
  .hero .cta-row{margin-top:clamp(1.1rem,1.6vw,1.6rem)}
}

/* ---------- under 900px: one column, without effort ---------- */
@media (max-width:1060px){
  .nav{display:none}
  .head-actions{margin-left:auto}
}
@media (max-width:899px){
  :root{--head-h:4.25rem}
  .head-mark{height:44px}
  .lang{display:none}
  .split,.tours,.sec-head,.contact{grid-template-columns:minmax(0,1fr)}
  .tours{align-items:start}
  .tours-photo{order:2; min-height:0; width:100%; aspect-ratio:4/5 !important}
  .wines{grid-template-columns:repeat(2,minmax(0,1fr))}
  .awards{grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.6rem 0}
  .awards li:nth-child(3){padding-left:0; border-left:0}
  .index-row{grid-template-columns:minmax(0,1fr); gap:.35rem}
  .lines .link{margin-left:0}
  .rail{flex-direction:column; align-items:flex-start; gap:1rem}
  .rail .right{text-align:left}
}
@media (max-width:560px){
  .head-cta{display:none}
  .packages,.wines{grid-template-columns:minmax(0,1fr)}
  .awards{grid-template-columns:minmax(0,1fr)}
  .awards li{padding-left:0; border-left:0}
}

/* ---------- reduced motion: everything instant, loops stopped ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.js .act--i .reveal{opacity:1 !important; transform:none !important; animation:none !important}
  .js .stage-img{filter:none; transform:none; animation:none !important}
  .js .scrim--veil{opacity:0; animation:none !important}
  .js .mark{opacity:1; animation:none !important}
  .mark .sheen{display:none}
  .scroll-cue i{animation:none; opacity:.6; transform:none}
  .menu .menu-list li{opacity:1; transform:none; transition:none}
  *,*::before,*::after{transition-duration:.01ms !important}
}