/* =========================================================
   Kantina Pupa — stili premium
   Ngjyrat: nata e mushtit, verë bordo, ari i rrushit Puls, letër guri
   ========================================================= */
:root{
  --night:#1A0E13;
  --night-2:#22121A;
  --night-3:#2C1822;
  --wine:#8C080F;
  --gold:#C9A45E;
  --gold-l:#E3CC94;
  --gold-d:#9F7A35;
  --paper:#F1EFEA;
  --paper-2:#E7E3DA;
  --ink:#2A1520;
  --logo-gold:#C9A45E;
  --logo-word:#F1EFEA;
  --muted:#6D5A63;
  --line-l:rgba(42,21,32,.16);
  --line-d:rgba(198,161,91,.22);

  --display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --body:"Jost","Futura","Avenir Next","Segoe UI",system-ui,sans-serif;

  --s-1:clamp(.82rem,.8rem + .1vw,.88rem);
  --s0:clamp(1rem,.96rem + .18vw,1.08rem);
  --s1:clamp(1.2rem,1.1rem + .4vw,1.45rem);
  --s2:clamp(1.55rem,1.3rem + 1vw,2.1rem);
  --s3:clamp(2.2rem,1.6rem + 2.4vw,3.6rem);
  --s4:clamp(2.9rem,1.6rem + 5.4vw,7.2rem);

  --wrap:1280px;
  --gut:clamp(1.25rem,4.5vw,3.5rem);
  --sec:clamp(5rem,11vw,10rem);
  --hh:84px;
  --ease:cubic-bezier(.2,.7,.15,1);

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%;background:var(--night)}
body{margin:0;background:var(--paper);color:var(--ink);font:300 var(--s0)/1.7 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.06;margin:0;letter-spacing:-.015em}
h2{font-size:var(--s3)}
h3{font-size:var(--s2)}
p{margin:0 0 1.1em;max-width:60ch}
::selection{background:var(--gold);color:var(--night)}
:focus-visible{outline:1.5px solid var(--gold);outline-offset:4px}
.wrap{width:min(100% - 2*var(--gut),var(--wrap));margin-inline:auto}
.skip{position:absolute;left:1rem;top:-5rem;z-index:300;background:var(--gold);color:var(--night);padding:.6rem 1rem;text-decoration:none}
.skip:focus{top:1rem}

.kicker{font:italic 400 var(--s1)/1.2 var(--display);color:var(--gold-d);margin:0 0 1.1rem;display:flex;align-items:center;gap:.9rem}
.kicker::before{content:"";width:2.4rem;height:1px;background:currentColor;opacity:.7}

/* Butonat */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.85rem 2rem;font:400 .92rem/1 var(--body);letter-spacing:.06em;text-decoration:none;border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:color .4s var(--ease),border-color .4s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease)}
.btn:hover::before{transform:scaleY(1)}
.btn--gold{background:var(--gold);color:var(--night)}
.btn--gold::before{background:var(--gold-l)}
.btn--ghost{border-color:rgba(241,239,234,.4);color:var(--paper)}
.btn--ghost::before{background:var(--paper)}
.btn--ghost:hover{color:var(--night);border-color:var(--paper)}
.btn--dark{background:var(--ink);color:var(--paper)}
.btn--dark::before{background:var(--wine)}
.btn--sm{min-height:42px;padding:.6rem 1.3rem;font-size:.84rem}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:100;padding-top:env(safe-area-inset-top,0px);color:var(--paper);transition:background .5s var(--ease),transform .5s var(--ease)}
.site-header::after{content:"";position:absolute;left:var(--gut);right:var(--gut);bottom:0;height:1px;background:var(--line-d);transition:opacity .4s}
.site-header.is-solid{background:rgba(26,14,19,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.site-header.is-solid::after{opacity:0}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header__in{height:var(--hh);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;padding-inline:var(--gut)}
.nav{display:flex;align-items:center;gap:2.2rem}
.nav--right{justify-content:flex-end;gap:1.6rem}
.nav a:not(.btn){text-decoration:none;font-size:.88rem;letter-spacing:.06em;position:relative;padding:.4rem 0;opacity:.88;transition:opacity .3s}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .4s var(--ease)}
.nav a:not(.btn):hover,.nav a.is-active{opacity:1}
.nav a:not(.btn):hover::after,.nav a.is-active::after{transform:scaleX(1)}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--gold)}
.lang{background:none;border:1px solid var(--line-d);color:var(--paper);min-width:44px;min-height:42px;font:400 .78rem var(--body);letter-spacing:.1em;cursor:pointer;transition:border-color .3s}
.lang:hover{border-color:var(--gold)}
.burger{display:none;width:46px;height:46px;background:none;border:0;cursor:pointer;position:relative;justify-self:end}
.burger span{position:absolute;left:10px;right:10px;height:1px;background:var(--paper);transition:transform .4s var(--ease)}
.burger span:first-child{top:19px}.burger span:last-child{top:27px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:90;background:var(--night);color:var(--paper);display:flex;flex-direction:column;justify-content:center;padding:calc(var(--hh) + 2rem) var(--gut) 3rem;opacity:0;transition:opacity .4s var(--ease)}
.menu[hidden]{display:none}
.menu.is-open{opacity:1}
.menu nav{display:flex;flex-direction:column}
.menu nav a{font:400 clamp(2rem,9vw,3rem)/1.25 var(--display);text-decoration:none;padding:.35rem 0;border-bottom:1px solid var(--line-d)}
.menu__foot{display:flex;gap:1rem;margin-top:2.5rem}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;background:radial-gradient(120% 90% at 72% 30%,#3A1A27 0%,var(--night) 62%);color:var(--paper);display:grid;align-items:center;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kenburns 22s ease-out both}
.etching{position:absolute;inset:0;width:100%;height:100%}
.has-hero-photo .etching{display:none}
.hero__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,14,19,.55) 0%,rgba(26,14,19,.15) 40%,rgba(26,14,19,.75) 100%)}
.etching .layer{will-change:transform}
.etching .draw{stroke-dasharray:1;stroke-dashoffset:1}
.etching .rows{opacity:0}
.is-ready .etching .draw{animation:draw 2.6s var(--ease) forwards}
.is-ready .etching .layer:nth-child(3) .draw{animation-delay:.3s}
.is-ready .etching .layer:nth-child(4) .draw{animation-delay:.5s}
.is-ready .etching .layer:nth-child(5) .draw{animation-delay:.7s}
.is-ready .etching .rows{animation:rows 2s ease 1s forwards}
@keyframes rows{to{opacity:.55}}
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1)}}

.hero__content{width:min(100% - 2*var(--gut),var(--wrap));margin-inline:auto;padding:calc(var(--hh) + 3rem) 0 30vh}
.hero__kicker{font:italic 400 var(--s1) var(--display);color:var(--gold);margin-bottom:1.6rem;opacity:0;transition:opacity 1s ease .2s}
.hero__title{font-size:var(--s4);line-height:.98;letter-spacing:-.03em;font-weight:400;max-width:16ch}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.08em}
.hero__title .line>span{display:block;transform:translateY(110%);transition:transform 1.3s var(--ease)}
.hero__title .line:nth-child(2)>span{transition-delay:.12s}
.hero__lead{font-size:var(--s1);font-weight:300;color:rgba(241,239,234,.78);max-width:36ch;margin:2rem 0 2.6rem;opacity:0;transform:translateY(12px);transition:opacity 1s ease .45s,transform 1s var(--ease) .45s}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;opacity:0;transform:translateY(12px);transition:opacity 1s ease .6s,transform 1s var(--ease) .6s}
.is-ready .hero__kicker,.is-ready .hero__lead,.is-ready .hero__cta{opacity:1;transform:none}
.is-ready .hero__title .line>span{transform:none}

.hero__side{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font:italic 400 .95rem var(--display);color:rgba(241,239,234,.6);margin:0;letter-spacing:.04em}
.hero__scroll{position:absolute;left:50%;bottom:calc(2rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.8rem;text-decoration:none;font-size:.78rem;letter-spacing:.12em;color:rgba(241,239,234,.7)}
.hero__scroll i{width:1px;height:54px;background:linear-gradient(var(--gold),transparent);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;left:0;top:-30%;width:1px;height:30%;background:var(--paper);animation:drip 2.2s var(--ease) infinite}
@keyframes drip{to{top:100%}}

/* ---------- Foto dhe mbushja kur mungon fotoja ---------- */
.photo{position:relative;overflow:hidden;background:
  repeating-linear-gradient(128deg,transparent 0 9px,rgba(198,161,91,.09) 9px 10px),
  radial-gradient(90% 70% at 30% 20%,#3B1B29,var(--night) 75%);color:var(--gold)}
.photo__mark{position:absolute;left:50%;top:50%;width:min(34%,120px);height:auto;transform:translate(-50%,-50%);opacity:.5}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.reveal::after{content:"";position:absolute;inset:-1px;z-index:2;background:var(--cover,var(--paper));transform-origin:top;transition:transform 1.4s var(--ease)}
.reveal img{transform:scale(1.18);transition:transform 2s var(--ease)}
.reveal.in::after{transform:scaleY(0)}
.reveal.in img{transform:none}
html:not(.js) .reveal::after{display:none}
.dark .reveal,.grapes .reveal{--cover:var(--night)}

/* ---------- Familja ---------- */
.story{padding-block:var(--sec)}
.story__grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(3rem,8vw,8rem);align-items:center}
.story__media{position:relative;padding-bottom:18%}
.photo--portrait{aspect-ratio:4/5;width:82%}
.photo--small{position:absolute;right:0;bottom:0;width:46%;aspect-ratio:1;border:10px solid var(--paper);transition-delay:.25s}
.statement{font-size:var(--s3);line-height:1.12;margin-bottom:2rem;max-width:18ch}
.story__text>p{color:var(--muted)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin:3rem 0 0;border-top:1px solid var(--line-l)}
.facts div{padding:1.5rem 1rem 0 0}
.facts div+div{padding-left:1.2rem;border-left:1px solid var(--line-l)}
.facts dt{font:400 var(--s3)/1 var(--display);color:var(--ink);white-space:nowrap}
.facts dt small{font-size:.4em;margin-left:.2em;color:var(--gold-d)}
.story__text .more{margin-top:2rem}
.facts dd{margin:.6rem 0 0;font-size:var(--s-1);color:var(--muted);letter-spacing:.02em}

/* ---------- Marquee ---------- */
.marquee{background:var(--night);color:var(--gold);overflow:hidden;padding-block:clamp(2rem,4vw,3rem);border-block:1px solid var(--line-d)}
.marquee__track{display:flex;align-items:center;gap:clamp(2rem,4vw,4rem);width:max-content;animation:marquee 46s linear infinite}
.marquee span{font:italic 400 clamp(3.2rem,8vw,7.5rem)/1 var(--display);color:transparent;-webkit-text-stroke:1px var(--gold);white-space:nowrap}
.marquee svg{width:clamp(36px,4vw,56px);height:auto;flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Koka e seksioneve ---------- */
.head{display:grid;grid-template-columns:1fr 1fr;column-gap:4rem;align-items:end;margin-bottom:clamp(3rem,7vw,5.5rem)}
.head .kicker{grid-column:1/-1}
.head h2{max-width:16ch}
.head__lead{color:var(--muted);margin:0}
.head--center{grid-template-columns:1fr;text-align:center;justify-items:center}
.head--center .kicker::after{content:"";width:2.4rem;height:1px;background:currentColor;opacity:.7}

/* ---------- Rrushi ---------- */
.grapes{background:var(--night-2);color:var(--paper);padding-block:var(--sec)}
.grapes .kicker{color:var(--gold)}
.grapes .head__lead{color:rgba(241,239,234,.65)}
.grapes__grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-d)}
.grape{padding:3rem 2rem 1rem;border-right:1px solid var(--line-d);text-align:center;display:flex;flex-direction:column;align-items:center}
.grape:first-child{padding-left:0}
.grape:last-child{border-right:0;padding-right:0}
.grape__art{width:96px;height:auto;margin-bottom:2rem;transition:transform .8s var(--ease)}
.grape:hover .grape__art{transform:translateY(-6px) rotate(-4deg)}
.grape h3{font-style:italic;color:var(--gold-l);font-size:var(--s3)}
.grape__type{font-size:.8rem;letter-spacing:.1em;color:var(--gold);margin:.8rem 0 1.2rem}
.grape p:last-child{font-size:var(--s-1);color:rgba(241,239,234,.7);line-height:1.75}

/* ---------- Kantina / verërat ---------- */
.cellar{--glass-d:#5E5222;--glass-m:#B8A25A;--glass-l:#E8DBA4;--glow:rgba(216,190,114,.28);
  position:relative;background:var(--night);color:var(--paper);padding-block:var(--sec);overflow:hidden;isolation:isolate}
.cellar[data-style="rose"]{--glass-d:#7A3B3C;--glass-m:#D48C88;--glass-l:#F2C6BF;--glow:rgba(226,140,136,.26)}
.cellar[data-style="red"]{--glass-d:#14060A;--glass-m:#3E0F1C;--glass-l:#6D2236;--glow:rgba(140,30,60,.42)}
.cellar__glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(40% 50% at 50% 55%,var(--glow),transparent 70%);transition:background 1s var(--ease)}
.cellar .kicker{color:var(--gold)}
.stage{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(1.5rem,5vw,5rem);min-height:clamp(420px,62vh,600px)}
.stage__ghost{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;font:italic 400 clamp(5rem,17vw,16rem)/1 var(--display);color:transparent;-webkit-text-stroke:1px rgba(198,161,91,.22);white-space:nowrap;pointer-events:none;z-index:-1;max-width:none;transition:opacity .5s}
.stage__index{font:italic 400 1rem var(--display);color:var(--gold);margin-bottom:1rem}
.stage__name{font-size:var(--s3);margin-bottom:1.4rem;color:var(--paper)}
.stage__desc{color:rgba(241,239,234,.75);max-width:32ch}
.stage__bottle{display:grid;place-items:center}
.bottle{height:clamp(360px,58vh,540px);width:auto;filter:drop-shadow(0 40px 40px rgba(0,0,0,.55));transition:transform .7s var(--ease),opacity .5s ease}
.g-dark{stop-color:var(--glass-d)}.g-mid{stop-color:var(--glass-m)}.g-light{stop-color:var(--glass-l)}
.bottle stop{transition:stop-color .8s ease}
.label-crest{color:var(--wine)}
.label-brand{font:500 15px var(--display);letter-spacing:.32em;fill:var(--ink)}
.label-type{font:italic 400 11px var(--display);fill:var(--ink)}
.label-place{font:400 6.5px var(--body);letter-spacing:.2em;fill:var(--muted)}
.stage__specs{margin:0;display:grid;gap:1.6rem}
.stage__specs div{border-top:1px solid var(--line-d);padding-top:1rem}
.stage__specs dt{font-size:.78rem;letter-spacing:.1em;color:var(--gold);margin-bottom:.4rem}
.stage__specs dd{margin:0;font:400 var(--s1)/1.35 var(--display);color:var(--paper)}
.stage.is-swap .bottle{opacity:0;transform:translateY(24px) rotate(-2deg)}
.stage.is-swap .stage__info,.stage.is-swap .stage__specs,.stage.is-swap .stage__ghost{opacity:0}
.stage__info,.stage__specs{transition:opacity .45s ease}
.stage__nav{display:flex;justify-content:center;align-items:center;gap:.4rem;margin-top:clamp(2.5rem,5vw,4rem);flex-wrap:wrap}
.tab{background:none;border:0;color:rgba(241,239,234,.55);font:italic 400 var(--s1) var(--display);padding:.6rem 1.1rem;cursor:pointer;position:relative;transition:color .3s}
.tab::after{content:"";position:absolute;left:1.1rem;right:1.1rem;bottom:.2rem;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .45s var(--ease)}
.tab[aria-selected="true"]{color:var(--gold-l)}
.tab[aria-selected="true"]::after{transform:scaleX(1)}
.tab:hover{color:var(--paper)}
.arrow{width:48px;height:48px;border:1px solid var(--line-d);background:none;color:var(--gold);cursor:pointer;display:grid;place-items:center;transition:border-color .3s,background .3s}
.arrow:hover{border-color:var(--gold);background:rgba(198,161,91,.08)}
.arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4}

/* ---------- Përvoja ---------- */
.exp{padding-block:var(--sec)}
.exp__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem);align-items:start}
.panel:nth-child(2){margin-top:clamp(0rem,8vw,7rem)}
.panel__photo{aspect-ratio:3/4}
.panel:hover .panel__photo img{transform:scale(1.06)}
.panel__body{padding-top:1.8rem}
.panel h3{margin-bottom:.9rem}
.panel p{color:var(--muted);font-size:var(--s-1);line-height:1.8}
.more{display:inline-flex;align-items:center;gap:.8rem;text-decoration:none;font-size:.9rem;letter-spacing:.05em;padding:.4rem 0}
.more::after{content:"";width:2rem;height:1px;background:var(--gold-d);transition:width .45s var(--ease)}
.more:hover::after{width:3.4rem}

/* ---------- Citati ---------- */
.quote{position:relative;color:var(--paper);padding-block:clamp(7rem,16vw,13rem);text-align:center;isolation:isolate;overflow:hidden}
.quote__bg{position:absolute;inset:0;z-index:-1}
.quote__bg::after{content:"";position:absolute;inset:0;background:rgba(26,14,19,.62)}
.quote__in{margin-inline:auto;display:flex;flex-direction:column;align-items:center}
.quote__crest{width:64px;height:64px;color:var(--gold);margin-bottom:2.2rem}
.quote blockquote{margin:0;font:italic 400 var(--s3)/1.2 var(--display);max-width:24ch}
.quote figcaption{margin-top:2rem;font-size:.82rem;letter-spacing:.12em;color:var(--gold)}

/* ---------- Dita ---------- */
.day{background:var(--paper-2);padding-block:var(--sec)}
.day__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line-l)}
.day__steps li{padding:2rem 1.6rem 0 0;position:relative}
.day__steps li+li{padding-left:1.6rem;border-left:1px solid var(--line-l)}
.day__n{display:block;font:italic 400 var(--s2)/1 var(--display);color:var(--gold-d);margin-bottom:1.6rem}
.day__steps h3{font-size:var(--s1);margin-bottom:.6rem}
.day__steps p{font-size:var(--s-1);color:var(--muted);line-height:1.75}

/* ---------- Galeria ---------- */
.gallery{padding-block:var(--sec)}
.gallery__grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(120px,14vw,200px);gap:clamp(.6rem,1.2vw,1rem)}
.gallery figure{margin:0;overflow:hidden;background:var(--paper-2)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.gallery figure:hover img{transform:scale(1.05)}
.g1{grid-column:1/6;grid-row:span 3}.g2{grid-column:6/10;grid-row:span 2}.g3{grid-column:10/13;grid-row:span 2}
.g4{grid-column:6/9;grid-row:span 2}.g5{grid-column:9/13;grid-row:span 2}.g6{grid-column:1/6;grid-row:span 1}
.gallery figure.is-missing{display:none}

/* ---------- Rezervimi ---------- */
.book{background:var(--night);color:var(--paper);padding-block:var(--sec)}
.book .kicker{color:var(--gold)}
.book__grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(3rem,8vw,8rem)}
.book__intro h2{margin-bottom:1.4rem}
.book__intro p{color:rgba(241,239,234,.72)}
.book__contact{list-style:none;padding:0;margin:3rem 0 0;display:grid;gap:1.3rem}
.book__contact li{display:grid;gap:.25rem;border-top:1px solid var(--line-d);padding-top:1rem}
.book__contact span{font-size:.78rem;letter-spacing:.1em;color:var(--gold)}
.book__contact a{font:400 var(--s1) var(--display);text-decoration:none}
.book__contact a:hover{color:var(--gold-l)}
.form fieldset{border:0;padding:0;margin:0 0 2.6rem}
.form legend{font:400 var(--s2) var(--display);margin-bottom:1.3rem}
.form__choice{display:flex;flex-wrap:wrap;gap:.7rem}
.form__choice legend{width:100%}
.form__choice label{position:relative;cursor:pointer}
.form__choice input{position:absolute;opacity:0;inset:0;cursor:pointer}
.form__choice span{display:inline-block;padding:.8rem 1.4rem;border:1px solid var(--line-d);font-size:.9rem;letter-spacing:.03em;transition:all .35s var(--ease)}
.form__choice input:checked+span{background:var(--gold);color:var(--night);border-color:var(--gold)}
.form__choice input:focus-visible+span{outline:1.5px solid var(--gold);outline-offset:4px}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem 2rem}
.field{display:flex;flex-direction:column;gap:.5rem;font-size:.8rem;letter-spacing:.08em;color:var(--gold)}
.field--full{grid-column:1/-1}
.field input,.field textarea{font:300 var(--s1)/1.4 var(--body);color:var(--paper);background:transparent;border:0;border-bottom:1px solid rgba(241,239,234,.25);padding:.5rem 0;border-radius:0;min-height:48px;resize:vertical;color-scheme:dark;transition:border-color .3s}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold)}
.field input[aria-invalid="true"]{border-bottom-color:#E07A86}
.form__error{color:#F0A1AA;font-size:var(--s-1);margin:1.4rem 0 0}
.form__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.6rem}

/* ---------- Kontakt ---------- */
.contact{padding-block:var(--sec)}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.contact h2{margin-bottom:1.3rem}
.contact p{color:var(--muted);margin-bottom:2rem}
.contact__map{width:100%;max-width:520px;justify-self:end}
.map-label{font:italic 400 14px var(--display);fill:var(--muted)}
.map-label--strong{fill:var(--ink);font-size:17px}
.pulse{transform-origin:205px 146px;animation:pulse 2.6s ease-out infinite}
@keyframes pulse{from{transform:scale(.6);opacity:1}to{transform:scale(1.8);opacity:0}}

/* ---------- Footer ---------- */
.site-footer{background:var(--night);color:rgba(241,239,234,.6);padding:clamp(3rem,7vw,5rem) 0 2.2rem;overflow:hidden;font-size:var(--s-1)}
.footer__word{font:italic 400 clamp(7rem,30vw,28rem)/.8 var(--display);color:transparent;-webkit-text-stroke:1px rgba(198,161,91,.4);margin:0 0 2.5rem;text-align:center;max-width:none;letter-spacing:-.03em}
.footer__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;border-top:1px solid var(--line-d);padding-top:1.6rem}
.footer__row p{margin:0}
.footer__row a{text-decoration:none}
.footer__row a:hover{color:var(--gold)}

/* ---------- Verifikimi i moshës ---------- */
.agegate{position:fixed;inset:0;z-index:350;display:grid;place-items:center;padding:var(--gut);background:rgba(26,14,19,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.agegate[hidden]{display:none}
.agegate__box{max-width:460px;width:100%;padding:clamp(2.2rem,6vw,3.4rem);text-align:center;color:var(--paper);border:1px solid var(--line-d);background:var(--night-2)}
.agegate__crest{width:70px;height:70px;margin:0 auto 1.6rem;color:var(--gold)}
.agegate h2{font-size:var(--s2);margin-bottom:1rem}
.agegate p{color:rgba(241,239,234,.7);font-size:var(--s-1);margin-inline:auto}
.agegate__actions{display:flex;justify-content:center;gap:.8rem;margin-top:2rem}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .nav{display:none}
  .site-header__in{grid-template-columns:1fr auto}
  .burger{display:block}
  .grapes__grid{grid-template-columns:1fr 1fr}
  .grape,.grape:first-child,.grape:last-child{padding:2.6rem 1.4rem 2rem}
  .grape:nth-child(2){border-right:0}
  .grape:nth-child(n+3){border-top:1px solid var(--line-d)}
  .day__steps{grid-template-columns:1fr;border-top:0}
  .day__steps li,.day__steps li+li{display:grid;grid-template-columns:4rem 1fr;padding:1.6rem 0;border-left:0;border-top:1px solid var(--line-l)}
  .day__n{grid-row:span 2;margin:0}
  .stage{grid-template-columns:1fr 1fr;grid-template-areas:"bottle info" "bottle specs"}
  .stage__bottle{grid-area:bottle}.stage__info{grid-area:info;align-self:end}.stage__specs{grid-area:specs;align-self:start}
}
@media (max-width:820px){
  .story__grid,.book__grid,.contact__grid,.head{grid-template-columns:1fr}
  .head h2{margin-bottom:1.2rem}
  .exp__grid{grid-template-columns:1fr;gap:3.5rem}
  .panel:nth-child(2){margin-top:0}
  .panel__photo{aspect-ratio:4/3}
  .stage{grid-template-columns:1fr;grid-template-areas:"info" "bottle" "specs";text-align:center;min-height:0}
  .stage__desc{margin-inline:auto}
  .stage__specs{text-align:left}
  .bottle{height:clamp(320px,52vh,420px)}
  .contact__map{justify-self:start}
  .hero__side{display:none}
  .gallery__grid{grid-template-columns:1fr 1fr;grid-auto-rows:44vw}
  .gallery figure{grid-column:auto!important;grid-row:auto!important}
  .gallery .g1{grid-column:1/-1!important;grid-row:span 1!important}
}
@media (max-width:560px){
  .grapes__grid{grid-template-columns:1fr}
  .grape,.grape:first-child,.grape:last-child{border-right:0;border-top:1px solid var(--line-d);padding:2.6rem 0}
  .facts{grid-template-columns:1fr 1fr}
  .facts div:nth-child(3){grid-column:1/-1;border-left:0;padding-left:0;border-top:1px solid var(--line-l);margin-top:1.5rem}
  .form__grid{grid-template-columns:1fr}
  .hero__cta .btn,.form__actions .btn{flex:1 1 100%}
  .stage__nav .arrow{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal::after{display:none}
  .etching .draw{stroke-dashoffset:0}.etching .rows{opacity:.55}
  .hero__title .line>span,.hero__kicker,.hero__lead,.hero__cta{transform:none;opacity:1}
}
@media print{.site-header,.loader,.curtain,.cursor,.agegate,.marquee,.hero__media,.form__actions{display:none}.hero,.grapes,.cellar,.book,.site-footer{background:#fff;color:#000}}

/* =========================================================
   v3: loader, kalimet mes faqeve, kursori, faqet e brendshme
   ========================================================= */
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@keyframes pop{to{transform:scale(1)}}
@keyframes riseIn{to{transform:none}}

/* Loader me logon */
.loader{position:fixed;inset:0;z-index:500;display:grid;place-items:center}
.loader__panel{position:absolute;left:0;right:0;height:50.2%;background:var(--night);transition:transform 1.15s var(--ease)}
.loader__panel--t{top:0}.loader__panel--b{bottom:0}
.loader__panel--t::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .6s var(--ease)}
.loader.is-split .loader__panel--t::after{transform:scaleX(1)}
.loader.is-done .loader__panel--t{transform:translateY(-100%)}
.loader.is-done .loader__panel--b{transform:translateY(100%)}
.loader.is-done{pointer-events:none}
.loader__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;color:var(--gold);transition:opacity .45s ease,transform .9s var(--ease)}
.loader.is-split .loader__inner{opacity:0;transform:scale(.92)}
.loader__sub{margin:.9rem 0 0;font:italic 400 var(--s0) var(--display);color:var(--gold);opacity:0;animation:fade .9s ease 1.4s forwards}
.loader__bar{width:180px;height:1px;background:var(--line-d);margin-top:2.2rem;position:relative;overflow:hidden}
.loader__bar i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .25s linear}
.loader__count{margin:.9rem 0 0;font:400 .72rem var(--body);letter-spacing:.24em;color:rgba(241,239,234,.5);font-variant-numeric:tabular-nums}
.no-loader .loader,html:not(.js) .loader{display:none}

/* Kalimi mes faqeve */
.curtain{position:fixed;inset:0;z-index:450;background:var(--night);display:grid;place-items:center;color:var(--gold);transform:translateY(100%);pointer-events:none}
.curtain svg{width:72px;height:72px;opacity:0;transition:opacity .35s ease .15s}
.curtain.is-cover{transform:none;transition:transform .75s var(--ease)}
.curtain.is-cover svg{opacity:1}
.from-nav .curtain{transform:none}
.from-nav .curtain svg{opacity:1}
.curtain.is-leave{transform:translateY(-100%);transition:transform 1s var(--ease)}
.curtain.is-leave svg{opacity:0;transition-delay:0s}

/* Kursori */
.cursor{position:fixed;left:0;top:0;z-index:600;pointer-events:none;display:none;opacity:0;transition:opacity .3s}
.cursor.is-on{opacity:1}
.cursor__dot,.cursor__ring{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.cursor__dot{width:6px;height:6px;background:var(--gold)}
.cursor__ring{width:38px;height:38px;border:1px solid rgba(198,161,91,.7);display:grid;place-items:center;transition:width .4s var(--ease),height .4s var(--ease),background .4s,border-color .4s}
.cursor__ring span{font:400 .7rem var(--body);letter-spacing:.14em;color:var(--night);opacity:0;transition:opacity .3s}
.cursor.is-link .cursor__ring{width:62px;height:62px;border-color:var(--gold)}
.cursor.is-label .cursor__ring{width:92px;height:92px;background:var(--gold);border-color:var(--gold)}
.cursor.is-label .cursor__ring span{opacity:1}
.cursor.is-label .cursor__dot{opacity:0}
@media (pointer:fine){.has-cursor .cursor{display:block}}

/* Nav: lidhja e faqes aktive */
.nav a[aria-current="page"]{opacity:1}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.menu nav a[aria-current="page"]{color:var(--gold)}
.menu nav a{display:flex;justify-content:space-between;align-items:baseline}
.menu nav a small{font:italic 400 .95rem var(--display);color:var(--gold)}

/* Hero i faqeve të brendshme */
.phero{position:relative;min-height:82svh;display:flex;align-items:flex-end;color:var(--paper);overflow:hidden;isolation:isolate;padding:calc(var(--hh) + 4rem) 0 clamp(3.5rem,8vw,6.5rem)}
.phero__bg{position:absolute;inset:0;z-index:-2}
.phero__bg img{animation:kenburns 20s ease-out both}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(26,14,19,.55),rgba(26,14,19,.2) 40%,rgba(26,14,19,.85))}
.phero__in{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end}
.crumbs{display:flex;gap:.7rem;font-size:.8rem;letter-spacing:.1em;color:var(--gold);margin:0 0 1.6rem;opacity:0;transition:opacity 1s ease .2s}
.crumbs a{text-decoration:none;color:rgba(241,239,234,.7)}
.crumbs a:hover{color:var(--paper)}
.phero h1{font-size:var(--s4);line-height:.98;letter-spacing:-.03em;max-width:18ch}
.phero__bg .photo__mark{display:none}
.phero h1 .line{display:block;overflow:hidden;padding-bottom:.08em}
.phero h1 .line>span{display:block;transform:translateY(110%);transition:transform 1.3s var(--ease)}
.phero__lead{max-width:38ch;color:rgba(241,239,234,.8);font-size:var(--s1);margin:1.8rem 0 0;opacity:0;transform:translateY(12px);transition:opacity 1s ease .45s,transform 1s var(--ease) .45s}
.phero__num{font:italic 400 clamp(4rem,10vw,9rem)/1 var(--display);color:transparent;-webkit-text-stroke:1px rgba(198,161,91,.55);margin:0;opacity:0;transition:opacity 1.4s ease .6s}
.is-ready .crumbs,.is-ready .phero__lead,.is-ready .phero__num{opacity:1;transform:none}
.is-ready .phero h1 .line>span{transform:none}

/* Blloqe teksti editoriale */
.split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(3rem,8vw,8rem);align-items:start;padding-block:var(--sec)}
.split--rev{grid-template-columns:7fr 5fr}
.split__sticky{position:sticky;top:calc(var(--hh) + 2rem)}
.prose p{color:var(--muted);font-size:var(--s0)}
.prose p:first-of-type{font:400 var(--s2)/1.35 var(--display);color:var(--ink);max-width:28ch}
.photo--land{aspect-ratio:3/2}
.photo--sq{aspect-ratio:1}
.dark{background:var(--night);color:var(--paper)}
.dark .kicker{color:var(--gold)}
.dark .head__lead,.dark .prose p{color:rgba(241,239,234,.72)}
.dark .prose p:first-of-type{color:var(--paper)}

/* Kronologjia */
.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-d)}
.timeline li{padding:2.4rem 2rem 0 0}
.timeline li+li{padding-left:2rem;border-left:1px solid var(--line-d)}
.timeline__y{display:block;font:italic 400 var(--s3)/1 var(--display);color:var(--gold-l);margin-bottom:1.2rem}
.timeline h3{font-size:var(--s1);margin-bottom:.6rem}
.timeline p{font-size:var(--s-1);color:rgba(241,239,234,.7)}

/* Numrat e mëdhenj */
.numbers{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line-l)}
.numbers div{padding:2.6rem 1.5rem;text-align:center}
.numbers div+div{border-left:1px solid var(--line-l)}
.numbers dt{font:400 clamp(2.3rem,1.2rem + 3.2vw,4.6rem)/1 var(--display);letter-spacing:-.03em;white-space:nowrap}
.numbers dt small{font-size:.35em;color:var(--gold-d);margin-left:.15em}
.numbers dd{margin:.8rem 0 0;color:var(--muted);font-size:var(--s-1)}

/* Dhomat */
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.room .photo{aspect-ratio:4/5}
.room:hover .photo img{transform:scale(1.06)}
.room__body{padding-top:1.6rem}
.room__cap{font:italic 400 1rem var(--display);color:var(--gold-d);margin-bottom:.6rem}
.room h3{margin-bottom:.8rem}
.room p{color:var(--muted);font-size:var(--s-1);line-height:1.8}
.included{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 3rem;padding:2.4rem 0;margin-top:clamp(3rem,6vw,5rem);border-block:1px solid var(--line-l)}
.included p{margin:0;font:italic 400 var(--s1) var(--display);display:flex;align-items:center;gap:.8rem}
.included svg{width:26px;height:26px;color:var(--gold-d)}

/* Menyja e restorantit */
.dishes{list-style:none;margin:0;padding:0}
.dishes li{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;padding:1.5rem 0;border-bottom:1px solid var(--line-d)}
.dishes h3{font-size:var(--s2)}
.dishes p{grid-column:1/-1;margin:.3rem 0 0;color:rgba(241,239,234,.68);font-size:var(--s-1)}
.dishes span{font:italic 400 .95rem var(--display);color:var(--gold)}

/* Faqja tjetër */
.next{display:block;text-decoration:none;background:var(--night-2);color:var(--paper);padding-block:clamp(4rem,10vw,8rem);position:relative;overflow:hidden;border-top:1px solid var(--line-d)}
.next__in{display:flex;flex-direction:column;align-items:center;text-align:center}
.next__k{font:italic 400 var(--s1) var(--display);color:var(--gold);margin-bottom:1rem}
.next__t{font:400 clamp(3rem,11vw,10rem)/1 var(--display);letter-spacing:-.03em;margin:0;max-width:none;transition:transform .9s var(--ease),color .5s}
.next:hover .next__t{transform:translateX(1.5rem);color:var(--gold-l)}
.next__line{width:0;height:1px;background:var(--gold);margin-top:2rem;transition:width .9s var(--ease)}
.next:hover .next__line{width:min(60%,520px)}

/* Banda CTA */
.cta-band{text-align:center;padding-block:var(--sec)}
.cta-band h2{font-size:var(--s4);max-width:14ch;margin:0 auto 2.4rem}

/* Kontakt: harta */
.mapframe{width:100%;aspect-ratio:16/10;border:0;filter:grayscale(1) sepia(.25) contrast(1.05);display:block}
.info{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:0}
.info div{padding:1.8rem 0;border-top:1px solid var(--line-l)}
.info div:nth-child(odd){padding-right:2rem}
.info dt{font-size:.78rem;letter-spacing:.1em;color:var(--gold-d);margin-bottom:.5rem}
.info dd{margin:0;font:400 var(--s1)/1.4 var(--display)}
.info a{text-decoration:none}
.info a:hover{color:var(--wine)}

@media (max-width:1100px){
  .timeline{grid-template-columns:1fr 1fr}
  .timeline li:nth-child(3){padding-left:0;border-left:0}
  .timeline li:nth-child(n+3){border-top:1px solid var(--line-d);margin-top:2rem}
  .numbers{grid-template-columns:1fr 1fr}
  .numbers div:nth-child(3){border-left:0}
  .numbers div:nth-child(n+3){border-top:1px solid var(--line-l)}
}
@media (max-width:820px){
  .split,.split--rev{grid-template-columns:1fr}
  .split__sticky{position:static}
  .rooms{grid-template-columns:1fr}
  .phero__in{grid-template-columns:1fr}
  .phero__num{display:none}
  .info{grid-template-columns:1fr}
}
@media (max-width:560px){
  .timeline{grid-template-columns:1fr}
  .timeline li,.timeline li+li{padding:2rem 0 0;border-left:0}
  .timeline li+li{border-top:1px solid var(--line-d);margin-top:2rem}
}
@media (prefers-reduced-motion:reduce){
  .loader,.curtain{display:none}
  .phero h1 .line>span,.crumbs,.phero__lead,.phero__num{transform:none;opacity:1}
}

/* Footer me kolona */
.footer__cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:2.5rem;padding-bottom:3rem}
.footer__h{font:italic 400 1.05rem var(--display);color:var(--gold);margin-bottom:1rem}
.footer__cols p{color:rgba(241,239,234,.65);font-size:var(--s-1)}
.footer__cols ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.footer__cols a:not(.btn){text-decoration:none;color:rgba(241,239,234,.8);transition:color .3s}
.footer__cols a:not(.btn):hover{color:var(--gold-l)}
.grapes__grid--6{grid-template-columns:repeat(3,1fr)}
.grapes__grid--6 .grape{padding:3rem 2rem 2rem;border-bottom:1px solid var(--line-d)}
.grapes__grid--6 .grape:nth-child(3n){border-right:0}
.grapes__grid--6 .grape:nth-child(3n+1){padding-left:0}
.grapes__grid--6 .grape:nth-child(3n){padding-right:0}
.prose .photo{margin-top:2.5rem}
.panel>a{display:block}
@media (max-width:1100px){
  .footer__cols{grid-template-columns:1fr 1fr}
  .grapes__grid--6{grid-template-columns:1fr 1fr}
  .grapes__grid--6 .grape,.grapes__grid--6 .grape:nth-child(n){padding:2.6rem 1.4rem 2rem;border-right:1px solid var(--line-d);border-top:0}
  .grapes__grid--6 .grape:nth-child(2n){border-right:0}
}
@media (max-width:560px){
  .footer__cols{grid-template-columns:1fr}
  .grapes__grid--6{grid-template-columns:1fr}
  .grapes__grid--6 .grape:nth-child(n){border-right:0;padding:2.4rem 0}
}

/* Siguri: nëse JavaScript dështon, loader-i zhduket vetë */
.loader{animation:loaderKill .6s ease 6.5s forwards}
@keyframes loaderKill{to{opacity:0;visibility:hidden;pointer-events:none}}
.js-failed .loader,.js-failed .curtain{display:none}


/* =========================================================
   Logo zyrtare
   ========================================================= */
.brand__logo{height:58px;width:auto;transition:height .5s var(--ease)}
.site-header.is-solid .brand__logo{height:48px}
.light-logo,.paper-ctx{--logo-gold:#9F7A35;--logo-word:#8C080F}
.photo__mark{--logo-word:var(--gold);width:min(46%,220px)!important;opacity:.32!important}
.curtain svg{width:min(220px,50vw)!important;height:auto!important}
.agegate__logo{width:min(240px,70%);height:auto;margin:0 auto 1.8rem}
.quote__logo{width:150px;height:auto;margin-bottom:2.4rem}
.footer__logo{display:block;width:min(560px,82%);margin:0 auto clamp(3rem,6vw,4.5rem)}
.footer__logo svg{width:100%;height:auto}
.label-logo{--logo-gold:#9F7A35;--logo-word:#8C080F}
.marquee__sep{flex:none;width:12px;height:12px;border:1px solid var(--gold);transform:rotate(45deg)}
.included svg{width:22px;height:22px;color:var(--gold-d)}

/* Loader me logon zyrtare */
.loader__logo{width:min(420px,72vw);height:auto;overflow:visible}
.loader__logo .wipe{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:wipe 1.6s cubic-bezier(.65,0,.25,1) .15s forwards}
.loader__logo .lg-kantina{opacity:0;transform:translateY(18px);transform-box:fill-box;animation:logoIn .9s var(--ease) 1.05s forwards}
.loader__logo .lp{opacity:0;transform:translateY(60px);transform-box:fill-box;animation:logoIn 1s var(--ease) forwards;animation-delay:calc(1.25s + var(--i) * .1s)}
@keyframes wipe{to{transform:scaleX(1)}}
@keyframes logoIn{to{opacity:1;transform:none}}
.loader__sub{margin-top:1.6rem;animation-delay:1.8s}
.loader .loader__inner{--logo-gold:#C9A45E;--logo-word:#F1EFEA}

@media (max-width:560px){
  .brand__logo{height:46px}
  .site-header.is-solid .brand__logo{height:40px}
}

/* Galeria me 4 foto */
.gallery__grid .g1{grid-column:1/8;grid-row:1/4}
.gallery__grid .g2{grid-column:8/13;grid-row:1/3}
.gallery__grid .g3{grid-column:8/13;grid-row:3/4}
.gallery__grid .g4{grid-column:1/13;grid-row:4/6}
@media (max-width:820px){.gallery__grid .g4{grid-column:1/-1!important}}