@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════
   PANINOTECA AUTENTICA ITALIANA — Iași
   Identitate: dosar editorial despre un singur produs, cu o origine precisă.
   Structură: 1 tokens · 2 bază · 3 tipografie · 4 elemente · 5 nav · 6 hero
              · 7 secțiuni · 8 subsol · 9 mișcare · 10 responsive
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0 · fonturi găzduite local ─────────────────────────────────────────── */
/* EB Garamond — model venețian (Manutius/Griffo, 1495); cursiva e una desenată,
   nu o romană înclinată. Source Sans 3 duce textul curent românesc.
   Subseturile latin-ext acoperă ș ț ă î â; se descarcă doar dacă sunt folosite. */
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/ebgaramond-normal-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:'EB Garamond';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/ebgaramond-normal-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 800;font-display:swap;
  src:url(../fonts/ebgaramond-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:'EB Garamond';font-style:italic;font-weight:400 800;font-display:swap;
  src:url(../fonts/ebgaramond-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/sourcesans3-normal-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:'Source Sans 3';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/sourcesans3-normal-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:italic;font-weight:300 700;font-display:swap;
  src:url(../fonts/sourcesans3-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:'Source Sans 3';font-style:italic;font-weight:300 700;font-display:swap;
  src:url(../fonts/sourcesans3-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── 1 · tokens ─────────────────────────────────────────────────────────── */
:root{
  --paper:#f1eadd;
  --paper-2:#e8dfcd;
  --paper-3:#ded3bd;
  --ink:#14120f;
  --ink-2:#211e19;
  --olive:#37432f;
  --olive-d:#1c2218;
  --terra:#b4552f;
  --terra-l:#c9733f;
  --stone:#6f6a5c;
  --terra-t:#a94e28;

  --line:rgba(20,18,15,.15);
  --line-2:rgba(20,18,15,.28);
  --line-l:rgba(241,234,221,.16);
  --line-l2:rgba(241,234,221,.34);

  --serif:'EB Garamond',Cambria,'Palatino Linotype',Georgia,serif;
  --sans:'Source Sans 3',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono','Cascadia Mono',Consolas,'Liberation Mono',monospace;
  /* rolul de etichetă: capitale spațiate în romana de text, nu monospace */
  --label:var(--serif);
  --track-label:.2em;
  --track-meta:.14em;
  --track-body:.04em;

  --gut:clamp(20px,5.5vw,88px);
  --maxw:1560px;
  --e:cubic-bezier(.22,1,.36,1);
  --e2:cubic-bezier(.65,0,.35,1);
  --nav-h:clamp(64px,7vw,92px);
}

/* ── 2 · bază ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:clamp(15px,.42vw + 14px,17px);
  font-weight:400;line-height:1.62;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
h1,h2,h3,h4{margin:0;font-weight:400}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
::selection{background:var(--terra);color:var(--paper)}
html{scrollbar-color:var(--stone) var(--paper-2);scrollbar-width:thin;caret-color:var(--terra)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:var(--stone);border:3px solid var(--paper-2)}
::-webkit-scrollbar-thumb:hover{background:var(--olive)}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:1px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:10px;left:10px;z-index:200;padding:13px 18px;background:var(--ink);
  color:var(--paper);font-size:13px;transform:translateY(-200%)}
.skip:focus{transform:none}
[id]{scroll-margin-top:calc(var(--nav-h) + 8px)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.grain{position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:url(../img/grain.png);background-size:300px;opacity:.055;mix-blend-mode:overlay}

/* ── 3 · tipografie ─────────────────────────────────────────────────────── */
.display{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;line-height:1.06}
.display em{font-style:italic}
.h-xl{font-size:clamp(2.9rem,9.2vw,8.8rem);line-height:1.04}
.h-lg{font-size:clamp(2.3rem,6.1vw,5.5rem);line-height:1.06}

.eyebrow{font-family:var(--label);font-weight:600;font-size:clamp(11px,.8vw,14px);
  text-transform:uppercase;letter-spacing:var(--track-label);color:var(--stone);
  font-variant-numeric:lining-nums tabular-nums;margin:0 0 clamp(28px,3.4vw,56px)}
.eyebrow i{font-style:normal;opacity:.6;margin-inline:.15em}
.eyebrow--light{color:rgba(241,234,221,.68)}

.mono{font-family:var(--label);font-weight:600;font-size:clamp(12px,.76vw,13.5px);
  letter-spacing:var(--track-meta);text-transform:uppercase;color:var(--stone);
  font-variant-numeric:lining-nums tabular-nums}
/* .tab — singurul loc unde monospace face treabă: cifre care se aliniază în coloană */
.tab{font-family:var(--mono);font-variant-numeric:tabular-nums;
  letter-spacing:var(--track-meta);text-transform:uppercase}
.mono i{font-style:normal;opacity:.5}

.lede{font-size:clamp(1.12rem,.55vw + 1rem,1.45rem);line-height:1.52;letter-spacing:-.008em;
  color:rgba(20,18,15,.8)}
.sec--dark .lede,.sec--olive .lede{color:rgba(241,234,221,.78)}
.note{font-size:clamp(13px,.8vw,14.5px);line-height:1.6;color:var(--stone);
  max-width:46ch;margin-top:clamp(20px,2vw,30px)}

/* placeholder — vizibil, dar tratat ca element de design */
.ph{color:var(--terra-t);border-bottom:1px dashed rgba(169,78,40,.5);padding-bottom:.06em}
.sec--dark .ph,.sec--olive .ph,.foot .ph{color:var(--terra-l);border-bottom-color:rgba(201,115,63,.55)}
a.ph{border-bottom-style:dashed}

/* ── 4 · elemente ───────────────────────────────────────────────────────── */
.ul{position:relative;display:inline-block;padding-block:.78em .52em;
  font-size:clamp(.95rem,.98vw,1.08rem)}
.ul::after{content:'';position:absolute;left:0;bottom:.3em;width:100%;height:1px;
  background:currentColor;opacity:.35;transform-origin:right;transform:scaleX(1);
  transition:transform .5s var(--e)}
.ul:hover::after,.ul:focus-visible::after{transform-origin:left;animation:ulSwipe .62s var(--e)}
@keyframes ulSwipe{0%{transform:scaleX(1);transform-origin:right}
  49%{transform:scaleX(0);transform-origin:right}
  50%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  min-height:48px;padding:.85em 1.9em;
  border:1px solid var(--line-2);font-size:clamp(12.5px,.78vw,14px);
  letter-spacing:var(--track-label);font-weight:600;
  text-transform:uppercase;font-family:var(--label);color:var(--ink);background:transparent;
  transition:background .45s var(--e),color .45s var(--e),border-color .45s var(--e)}
.btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* .btn--solid — butonul plin: acțiunea principală (comanda pe Wolt) */
.btn--solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--solid:hover{background:var(--olive);border-color:var(--olive);color:var(--paper)}
.btn--ghost{border-color:var(--line-l2);color:var(--paper)}
.btn--ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.is-stuck .btn--ghost{border-color:var(--line-2);color:var(--ink)}
.is-stuck .btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* registrul de date — coloana vertebrală a informației */
.ledger{border-top:1px solid var(--line)}
.ledger>div{display:grid;grid-template-columns:minmax(110px,.42fr) 1fr;gap:clamp(14px,2vw,32px);
  padding:clamp(12px,1.15vw,18px) 0;border-bottom:1px solid var(--line);align-items:baseline}
.ledger dt{font-family:var(--label);font-weight:600;font-size:clamp(12px,.76vw,13.5px);
  text-transform:uppercase;letter-spacing:var(--track-meta);color:var(--stone)}
.ledger dd{font-size:clamp(.92rem,.95vw,1.06rem);letter-spacing:-.01em}
.ledger dd i{font-style:normal;opacity:.5}
.ledger--light{border-top-color:var(--line-l)}
.ledger--light>div{border-bottom-color:var(--line-l)}
.ledger--light dt{color:rgba(241,234,221,.66)}
.ledger--light dd{color:rgba(241,234,221,.9)}
.ledger--sm>div{padding:clamp(8px,.8vw,12px) 0;grid-template-columns:minmax(96px,.5fr) 1fr}
.ledger--sm dd{font-size:clamp(.84rem,.85vw,.95rem)}
.ledger--lg dd{font-size:clamp(1rem,1.15vw,1.24rem)}

figure{margin:0}
figcaption{margin-top:clamp(10px,1vw,16px);font-family:var(--label);font-weight:600;
  font-size:clamp(12px,.76vw,13.5px);letter-spacing:var(--track-meta);line-height:1.7;
  text-transform:uppercase;color:var(--stone);font-variant-numeric:lining-nums tabular-nums}
figcaption b{font-weight:700;color:var(--ink);opacity:.82;margin-right:.85em}
figcaption .ph{margin-left:.7em}
figcaption i{font-style:normal;opacity:.5}
.sec--dark figcaption b,.sec--olive figcaption b{color:var(--paper);opacity:.6}
.band figcaption,.expand__cap{padding-inline:var(--gut)}

/* ── 5 · nav ────────────────────────────────────────────────────────────── */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;pointer-events:none}
.progress span{display:block;height:100%;width:100%;background:var(--terra);
  transform:scaleX(0);transform-origin:left;transition:transform .12s linear}

.nav{position:fixed;top:0;left:0;right:0;z-index:100;color:var(--paper);
  transition:background .5s var(--e),color .5s var(--e),border-color .5s var(--e),transform .55s var(--e);
  border-bottom:1px solid transparent}
.nav.is-stuck{background:rgba(241,234,221,.92);color:var(--ink);border-bottom-color:var(--line);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.nav.is-hidden{transform:translateY(-102%)}
.nav__in{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);height:var(--nav-h);
  display:flex;align-items:center;gap:clamp(18px,3vw,52px)}

.mark{display:grid;line-height:1;margin-right:auto;padding-block:8px}
.mark__name{font-family:var(--serif);font-size:clamp(1.15rem,1.5vw,1.5rem);letter-spacing:-.015em}
.mark__sub{font-family:var(--label);font-weight:600;font-size:clamp(11px,.68vw,12.5px);
  letter-spacing:var(--track-label);text-transform:uppercase;opacity:.8;margin-top:.4em}

.nav__links{display:flex;gap:clamp(16px,2.1vw,36px)}
.nav__links a{font-size:clamp(12px,.78vw,13.5px);letter-spacing:.02em;position:relative;
  padding-block:6px;opacity:.78;transition:opacity .35s var(--e)}
.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(--e)}
.nav__links a:hover,.nav__links a[aria-current]{opacity:1}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1);transform-origin:left}

.burger{display:none;background:none;border:0;padding:12px 10px;margin-right:-10px;
  min-width:48px;min-height:48px;align-items:center;justify-content:flex-end;
  cursor:pointer;color:inherit}
.burger__box{display:grid;gap:5px;width:26px}
.burger__box i{display:block;height:1px;background:currentColor;transition:transform .45s var(--e),opacity .3s}
.burger[aria-expanded=true] .burger__box i:first-child{transform:translateY(3px) rotate(9deg)}
.burger[aria-expanded=true] .burger__box i:last-child{transform:translateY(-3px) rotate(-9deg)}

.menu{position:fixed;inset:0;z-index:99;background:var(--olive-d);color:var(--paper);
  display:grid;place-items:center;opacity:0;pointer-events:none;
  transition:opacity .45s var(--e)}
/* atributul hidden trebuie să învingă display:grid, altfel overlay-ul invizibil
   înghite fiecare clic din pagină */
.menu[hidden]{display:none}
.menu.is-open{opacity:1;pointer-events:auto}
.menu__in{display:grid;gap:clamp(14px,2.4vw,26px);padding:var(--gut);width:100%;max-width:640px}
.menu__in a{font-family:var(--serif);font-size:clamp(2rem,9vw,3.4rem);line-height:1.08;
  display:flex;align-items:baseline;gap:.6em;border-bottom:1px solid var(--line-l);padding-bottom:.28em;
  opacity:0;transform:translateY(18px)}
.menu.is-open .menu__in a{opacity:1;transform:none;
  transition:opacity .6s var(--e) var(--d,0s),transform .6s var(--e) var(--d,0s)}
.menu__in a span{font-family:var(--label);font-weight:600;font-size:13px;
  letter-spacing:var(--track-label);opacity:.55;font-variant-numeric:lining-nums tabular-nums}
.menu__foot{font-family:var(--serif);font-style:italic;font-size:1.3rem;opacity:.5;margin-top:1em}

.dock{position:fixed;left:var(--gut);right:var(--gut);bottom:16px;z-index:90;display:none;
  align-items:center;justify-content:center;min-height:52px;padding:15px;
  background:var(--ink);color:var(--paper);
  font-family:var(--label);font-weight:600;font-size:13.5px;
  letter-spacing:var(--track-label);text-transform:uppercase;
  transform:translateY(140%);transition:transform .55s var(--e)}
.dock.is-on{transform:none}

/* ── 6 · hero ───────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;background:var(--ink);color:var(--paper);overflow:hidden;
  padding:calc(var(--nav-h) + 6vh) 0 clamp(22px,3vw,40px)}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  animation:heroIn 2.4s var(--e) both,heroDrift 34s 2.4s ease-in-out 6 alternate}
@keyframes heroIn{from{opacity:0;transform:scale(1.14)}to{opacity:1;transform:scale(1.045)}}
@keyframes heroDrift{from{transform:scale(1.045) translate3d(0,0,0)}
  to{transform:scale(1.1) translate3d(-1.2%,-1%,0)}}
.hero__veil{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,rgba(12,11,9,.86) 0%,rgba(12,11,9,.34) 46%,rgba(12,11,9,.5) 100%)}
.hero__in{position:relative;z-index:3;max-width:var(--maxw);width:100%;margin-inline:auto;
  padding-inline:var(--gut);margin-top:auto}
.hero__title{font-family:var(--serif);font-weight:400;letter-spacing:-.018em;
  font-size:clamp(2.45rem,10.9vw,11.5rem);line-height:1.04;margin:0 0 clamp(26px,3.4vw,48px)}
.hero__title em{font-style:italic;color:#e8dcc6}
.hero__copy{display:grid;gap:clamp(12px,1.4vw,20px);max-width:52ch}
.hero__it{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.1vw,2.1rem);
  line-height:1.28;color:rgba(241,234,221,.9);margin:0}
.hero__ro{font-size:clamp(1.02rem,1.1vw,1.2rem);line-height:1.58;color:rgba(241,234,221,.86);
  max-width:44ch;margin:0}
.ul--light{color:rgba(241,234,221,.92)}


.hero__foot{position:relative;z-index:3;max-width:var(--maxw);width:100%;margin-inline:auto;
  padding:clamp(26px,4vw,60px) var(--gut) 0;display:flex;align-items:center;
  gap:clamp(12px,2vw,28px);flex-wrap:wrap}
.coord{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(10.5px,.66vw,12px);letter-spacing:var(--track-meta);
  text-transform:uppercase;color:rgba(241,234,221,.64)}
.coord b{font-weight:400;color:rgba(241,234,221,.88);margin-left:.7em}
.hero__rule{flex:1 1 40px;height:1px;background:var(--line-l);min-width:20px}
.hero__scroll{display:flex;align-items:center;gap:.8em;font-family:var(--label);font-weight:600;
  font-size:clamp(11px,.68vw,12.5px);letter-spacing:var(--track-label);text-transform:uppercase;
  color:rgba(241,234,221,.7)}
.hero__scroll i{display:block;width:1px;height:26px;background:rgba(241,234,221,.35);
  position:relative;overflow:hidden}
.hero__scroll i::after{content:'';position:absolute;inset:0;background:var(--paper);
  animation:scrollTick 2.4s var(--e2) infinite}
@keyframes scrollTick{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

/* ── 7 · secțiuni ───────────────────────────────────────────────────────── */
.sec{position:relative;padding-block:clamp(78px,11vw,190px)}
.sec--paper{background:var(--paper);color:var(--ink)}
.sec--dark{background:var(--ink);color:var(--paper)}
.sec--olive{background:var(--olive-d);color:var(--paper)}
.sec--dark .mono,.sec--olive .mono{color:rgba(241,234,221,.66)}
.sec--dark figcaption,.sec--olive figcaption{color:rgba(241,234,221,.64)}
.sec__head{display:grid;gap:clamp(20px,2.4vw,34px);max-width:1100px;
  margin-bottom:clamp(48px,6vw,110px)}
.sec__head--split{grid-template-columns:1fr;max-width:none}
@media (min-width:900px){
  .sec__head--split{grid-template-columns:1.2fr .8fr;align-items:end;gap:clamp(30px,4vw,80px)}
}

/* 01 manifest ------------------------------------------------------------ */
.manifest__t{font-size:clamp(2.1rem,5.9vw,5.6rem);line-height:1.08;
  margin-bottom:clamp(44px,5.5vw,96px);max-width:21ch}
.manifest__t span{display:block}
.manifest__t .indent{padding-left:clamp(0px,5vw,2.1em);color:var(--olive)}
.manifest__grid{display:grid;gap:clamp(32px,4vw,80px)}
@media (min-width:860px){
  .manifest__grid{grid-template-columns:1.15fr .85fr;align-items:start}
}
.manifest__text{max-width:52ch}
.manifest__fig{margin-top:clamp(40px,4.5vw,80px);max-width:clamp(280px,34vw,520px);
  margin-left:auto;margin-right:clamp(0px,4vw,7%)}
.manifest__fig img{filter:saturate(.94)}

/* 02 porchetta ----------------------------------------------------------- */
.porchetta{padding-bottom:clamp(78px,10vw,170px)}
.porchetta__head{position:relative;z-index:3}
.porchetta__t{font-size:clamp(2.05rem,6.1vw,5.9rem);line-height:1.08;max-width:17ch}
.porchetta__t span{display:block}
.porchetta__t .accent{color:var(--terra-l);padding-left:clamp(0px,6vw,2.4em)}
.porchetta__lede{margin-top:clamp(26px,3vw,44px);max-width:48ch}

.expand{position:relative;height:100svh;margin-top:clamp(56px,7vw,120px)}
.expand.js{height:230svh}
.expand__sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.expand__frame{position:absolute;inset:0;
  clip-path:inset(calc((1 - var(--p,1)) * 31%) calc((1 - var(--p,1)) * 33%));
  will-change:clip-path}
.expand__frame img{width:100%;height:100%;object-fit:cover;
  transform:scale(calc(1.08 - .08 * var(--p,1)));transform-origin:50% 50%}
.expand__cap{position:absolute;left:0;right:0;top:71%;text-align:center;margin:0;
  font-family:var(--label);font-weight:600;font-size:clamp(12px,.76vw,13.5px);
  letter-spacing:var(--track-meta);
  text-transform:uppercase;color:rgba(241,234,221,.7);
  opacity:calc(1 - var(--p,1) * 2.6)}
.expand__cap b{font-weight:700;color:rgba(241,234,221,.9);margin-right:.7em}
.expand__scrim{position:absolute;left:0;right:0;bottom:0;height:58%;z-index:1;
  pointer-events:none;
  background:linear-gradient(to top,rgba(10,9,8,.9),rgba(10,9,8,.5) 40%,rgba(10,9,8,0));
  opacity:calc((var(--p,1) - .5) * 2.4)}
.expand__over{position:absolute;left:0;right:0;bottom:clamp(34px,6vw,84px);margin:0;z-index:2;
  padding-inline:var(--gut);text-align:center;font-family:var(--serif);
  font-size:clamp(1.65rem,4.8vw,4.4rem);line-height:1.1;letter-spacing:-.014em;
  color:var(--paper);text-shadow:0 2px 28px rgba(0,0,0,.75);
  opacity:calc((var(--p,1) - .68) * 3.6)}
.expand__over em{font-style:italic;color:#e8dcc6}

.porchetta__body{margin-top:clamp(64px,8vw,140px)}
.porchetta__cols{display:grid;gap:clamp(34px,4vw,64px)}
.porchetta__crust{max-width:min(62%,300px)}
@media (min-width:860px){
  .porchetta__cols{grid-template-columns:1fr 1fr;align-items:start}
  .porchetta__cols>div:first-child{max-width:46ch;font-size:clamp(1rem,1.05vw,1.16rem);
    color:rgba(241,234,221,.72)}
  .porchetta__crust{grid-column:2;justify-self:end;max-width:min(64%,300px);
    margin-top:clamp(28px,3.4vw,52px)}
}
@media (min-width:1220px){
  .porchetta__cols{grid-template-columns:1.05fr 1fr .56fr;
    gap:clamp(34px,3.4vw,72px);align-items:start}
  .porchetta__crust{grid-column:3;justify-self:stretch;max-width:100%;margin-top:0}
}

/* 03 origine ------------------------------------------------------------- */
.origine__head{display:grid;gap:clamp(26px,3.4vw,56px)}
.origine__row{display:grid;gap:clamp(26px,3.4vw,60px)}
.origine__fig{max-width:min(80%,440px)}
.origine__fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media (min-width:900px){
  .origine__row{grid-template-columns:minmax(240px,.34fr) 1fr;align-items:end;
    gap:clamp(34px,5vw,90px)}
  .origine__fig{max-width:100%}
}
.wordmark{display:flex;justify-content:space-between;width:100%;
  font-size:clamp(3.3rem,16.4vw,15.2rem);line-height:.84;letter-spacing:0;color:var(--olive)}
.wordmark span{display:block}
.origine__meta{display:grid;gap:clamp(16px,2vw,26px)}
@media (min-width:860px){
  .origine__meta{grid-template-columns:1fr auto;align-items:end;gap:clamp(30px,5vw,90px)}
  .origine__meta .mono{text-align:right;line-height:2}
}
.origine__it{font-family:var(--serif);font-size:clamp(1.45rem,2.7vw,2.65rem);line-height:1.2;
  letter-spacing:-.02em;margin:0;max-width:16ch}
.origine__it em{font-style:italic;color:var(--terra)}

.band{margin-block:clamp(46px,6vw,110px)}
.band img{width:100%;height:clamp(240px,42vw,620px);object-fit:cover}

.journey{display:grid;gap:0;position:relative;border-top:1px solid var(--line);
  margin-top:clamp(20px,3vw,40px)}
.journey::after{content:'';position:absolute;top:-1px;left:0;width:100%;height:1px;
  background:var(--terra);transform:scaleX(0);transform-origin:left;
  transition:transform 1.5s var(--e2) .15s}
.journey.in::after{transform:scaleX(1)}
.journey__i{padding:clamp(24px,2.6vw,42px) 0;border-bottom:1px solid var(--line)}
@media (min-width:820px){
  .journey{grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,44px)}
  .journey__i{border-bottom:0;padding-right:clamp(10px,2vw,28px)}
  .journey__i+.journey__i{border-left:1px solid var(--line);padding-left:clamp(18px,2.2vw,36px)}
}
.journey__n{display:block;margin-bottom:clamp(16px,2vw,28px);color:var(--terra-t)}
.journey__h{font-size:clamp(1.75rem,2.8vw,2.7rem);line-height:1.08;margin-bottom:.35em}
.journey__i>p:last-child{font-size:clamp(.88rem,.9vw,1rem);color:rgba(20,18,15,.66);
  margin-top:.9em;max-width:30ch}

.provenance{display:grid;gap:clamp(44px,5vw,90px);margin-top:clamp(64px,8vw,150px)}
.provenance__t{font-size:clamp(2.05rem,4.8vw,4.5rem);line-height:1.08;color:var(--olive)}
.provenance__ro{margin-top:clamp(16px,1.6vw,24px);color:rgba(20,18,15,.66);
  font-size:clamp(.95rem,1vw,1.1rem)}
.badges{margin-top:clamp(30px,3.4vw,54px);border-top:1px solid var(--line-2);max-width:640px}
.badges li{display:flex;align-items:baseline;gap:clamp(14px,1.6vw,26px);
  padding:clamp(13px,1.3vw,20px) 0;border-bottom:1px solid var(--line);
  font-size:clamp(1rem,1.35vw,1.42rem);font-family:var(--serif);letter-spacing:-.015em}
.badges span{font-family:var(--label);font-weight:600;font-size:clamp(12px,.76vw,13.5px);
  color:var(--terra-t);letter-spacing:var(--track-meta);
  font-variant-numeric:lining-nums tabular-nums}

/* 04 ingrediente --------------------------------------------------------- */
.ing{display:grid;gap:clamp(40px,4.4vw,80px) clamp(24px,3vw,56px)}
@media (min-width:760px){.ing{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1180px){
  .ing{grid-template-columns:repeat(6,1fr)}
  .ing__i{grid-column:span 2}
  .ing__i--wide{grid-column:span 3}
  .ing__i:nth-child(2){margin-top:clamp(30px,5vw,90px)}
  .ing__i:nth-child(4){margin-top:clamp(20px,3vw,56px)}
  .ing__i:nth-child(5){margin-top:clamp(40px,6vw,110px)}
}
.ing__fig{overflow:hidden;background:var(--paper-2)}
.ing__fig img{width:100%;aspect-ratio:11/14;object-fit:cover;
  transition:transform 1.1s var(--e),filter 1.1s var(--e);filter:saturate(.92)}
.ing__i--wide .ing__fig img{aspect-ratio:1400/963}
.ing__i:hover .ing__fig img,.ing__i:focus-within .ing__fig img{transform:scale(1.045);filter:saturate(1)}
.ing__b{padding-top:clamp(16px,1.6vw,26px)}
.ing__n{color:var(--terra-t);margin-bottom:.8em}
.ing__t{font-size:clamp(1.65rem,2.7vw,2.7rem);line-height:1.08;margin-bottom:.3em;
  transition:color .5s var(--e)}
.ing__i:hover .ing__t{color:var(--olive)}
.ing__o{color:var(--stone);margin:0}
.ing__more{margin-top:clamp(16px,1.6vw,24px)}
.ing__d{margin-top:clamp(12px,1.2vw,18px);font-size:clamp(.92rem,.92vw,1.04rem);
  color:rgba(20,18,15,.74);max-width:40ch}
/* provenienţa e argumentul paginii: se vede pe toate ecranele, nu doar la hover */
@media (hover:hover) and (min-width:1180px){
  .ing__more{transition:opacity .6s var(--e)}
  .ing__i:hover .ing__more,.ing__i:focus-within .ing__more{opacity:1}
}

/* 05 panini -------------------------------------------------------------- */
.rail{margin-top:clamp(10px,2vw,30px)}
.rail__track{display:flex;gap:clamp(20px,2.6vw,52px);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
  padding:4px var(--gut) clamp(26px,3vw,48px);
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
.rail__track::-webkit-scrollbar{display:none}
.rail__track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.rail__track.is-dragging *{pointer-events:none}
.card{flex:0 0 clamp(255px,29vw,410px);scroll-snap-align:center}
@media (min-width:760px){.card{scroll-snap-align:start}}
.card__fig{overflow:hidden;background:var(--ink-2)}
.card__fig img{width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform 1.15s var(--e),opacity .8s var(--e)}
.card:hover .card__fig img{transform:scale(1.05)}
.card__b{padding-top:clamp(16px,1.6vw,26px)}
.card__n{color:rgba(241,234,221,.66);display:flex;align-items:center;gap:1.1em;margin-bottom:.9em}
.sig{font-weight:600;color:var(--terra-l);letter-spacing:var(--track-label);position:relative;padding-left:1.4em}
.sig::before{content:'';position:absolute;left:0;top:50%;width:.9em;height:1px;background:currentColor}
.card__t{font-size:clamp(1.5rem,2.05vw,2.1rem);line-height:1.08;margin-bottom:.5em}
.card__i{font-size:clamp(.9rem,.9vw,1rem);color:rgba(241,234,221,.82);margin-bottom:.7em}
.card__i i{font-style:normal;opacity:.45;margin-inline:.25em}
.card__d{font-size:clamp(.88rem,.88vw,.98rem);color:rgba(241,234,221,.68);margin-bottom:1em}
.card__p{color:rgba(241,234,221,.92);letter-spacing:var(--track-meta);
  font-variant-numeric:lining-nums tabular-nums}
@media (hover:hover) and (min-width:1024px){
  .card__d,.card__i{opacity:.82;transition:opacity .6s var(--e)}
  .card:hover .card__d,.card:hover .card__i{opacity:1}
}
.rail__bar{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.rail__bar span{display:block;height:2px;background:var(--terra-l);
  transform-origin:left;transform:scaleX(.2);transition:transform .18s linear;
  box-shadow:0 0 0 0 transparent}
.rail__bar{position:relative}
.rail__bar::before{content:'';position:absolute;left:var(--gut);right:var(--gut);top:0;height:1px;
  background:var(--line-l)}

/* 06 filosofia ----------------------------------------------------------- */
.filosofia{padding-block:clamp(96px,13vw,220px)}
.filosofia__in{text-align:left}
.filosofia__in{max-width:1180px}
.filosofia__q{margin:0}
.filosofia__q h2{font-size:clamp(2.2rem,6.5vw,6.6rem);line-height:1.06;letter-spacing:-.018em;
  color:#e8dcc6;margin-bottom:clamp(26px,3vw,52px)}
.filosofia__q footer{font-size:clamp(.98rem,1.12vw,1.28rem);line-height:1.55;
  color:rgba(241,234,221,.6);max-width:44ch}

/* 07 locație ------------------------------------------------------------- */
.locatie__top{display:grid;gap:clamp(28px,3vw,48px);align-items:end;
  margin-bottom:clamp(44px,5.5vw,100px)}
.locatie__t{max-width:14ch;margin:0}
.locatie__marca{width:clamp(118px,12.5vw,176px);height:auto;justify-self:start}
@media (min-width:820px){
  .locatie__top{grid-template-columns:1fr auto;gap:clamp(40px,6vw,110px)}
  .locatie__marca{justify-self:end}
}
.locatie__grid{display:grid;gap:clamp(40px,4.5vw,90px)}
@media (min-width:900px){
  .locatie__grid{grid-template-columns:.95fr 1.05fr;align-items:start}
}
/* harta încadrată ca o planșă, nu ca un widget lipit în pagină */
.locatie__map__frame{position:relative;aspect-ratio:4/3;background:var(--paper-2);
  border:1px solid var(--line);overflow:hidden}
.locatie__map__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  /* filtru discret, cât să intre în paletă fără să acopere marca Google */
  filter:saturate(.85) sepia(.18) contrast(1.02)}
.locatie__map figcaption .mono{display:block;margin-top:.35em;letter-spacing:.13em}
.locatie__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:clamp(26px,3vw,44px)}
.locatie__actions .btn{flex:1 1 auto}
.locatie__note{margin-top:clamp(20px,2.2vw,32px);max-width:38ch}
.locatie__cta{margin-top:clamp(30px,3.4vw,54px)}
.locatie__vino{font-size:clamp(2.1rem,4.4vw,4rem);line-height:1.06;margin:clamp(26px,3vw,44px) 0 .18em;
  color:var(--olive)}
.locatie__it{font-family:var(--serif);font-size:clamp(1.25rem,1.8vw,1.75rem);color:var(--terra-t);
  margin:0}

/* ── 8 · subsol ─────────────────────────────────────────────────────────── */
.foot{background:var(--ink);color:var(--paper);padding-block:clamp(56px,6vw,104px) clamp(28px,3vw,44px)}
.foot__in{display:grid;gap:clamp(36px,4vw,70px);padding-bottom:clamp(40px,4.5vw,80px);
  border-bottom:1px solid var(--line-l)}
@media (min-width:820px){.foot__in{grid-template-columns:1.4fr .8fr .8fr;align-items:start}}
.foot__name{font-size:clamp(1.75rem,2.8vw,2.7rem);line-height:1.08;margin-bottom:.6em}
.foot__nav,.foot__contact{display:grid;gap:.2em;align-content:start;font-size:clamp(.95rem,.95vw,1.05rem)}
.foot__nav a,.foot__contact a{display:inline-block;padding-block:.78em}
.foot__nav a{opacity:.85;transition:opacity .4s var(--e)}
.foot__nav a:hover{opacity:1}
.foot__contact a{justify-self:start}
.foot__end{display:grid;gap:clamp(18px,2vw,30px);padding-top:clamp(26px,3vw,44px);
  align-items:end}
@media (min-width:820px){.foot__end{grid-template-columns:1fr auto;gap:clamp(30px,4vw,70px)}}
.foot__amore{font-size:clamp(1.55rem,3.2vw,2.85rem);line-height:1.1;color:#e8dcc6;margin:0}
.foot__legal{color:rgba(241,234,221,.62);text-transform:none;font-weight:400;
  letter-spacing:var(--track-body);font-family:var(--sans);
  font-size:clamp(12px,.72vw,13px);line-height:1.75;max-width:48ch;margin:0}
.foot__legal i{font-style:normal;opacity:.5}
.foot .ph{border-bottom-color:rgba(201,115,63,.4)}
.foot .mono,.foot figcaption{color:rgba(241,234,221,.72)}

/* ── 9 · mișcare ────────────────────────────────────────────────────────── */
.mask{display:block;overflow:hidden;padding-bottom:.06em}
.mask__i{display:block;transform:translateY(112%);
  animation:maskUp 1.25s var(--e) var(--d,0s) both}
@keyframes maskUp{to{transform:none}}
.rise{opacity:0;animation:riseIn 1.1s var(--e) var(--d,0s) both}
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(30px);
  transition:opacity .95s var(--e) var(--d,0s),transform .95s var(--e) var(--d,0s)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .mask__i{transform:none}
  .rise{opacity:1}
  .hero__img{animation:none}
  .expand{height:100svh}
  .ing__more{opacity:1!important;transform:none!important}
}

/* ── 10 · responsive ────────────────────────────────────────────────────── */
@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .burger{display:flex}
  .dock{display:flex}
  .hero__foot .coord:nth-of-type(1){display:none}
  .hero__note{display:none}
  .manifest__fig{max-width:min(78%,420px);margin-right:0}
  /* cadrul imersiv (scroll-scrubbing) nu merge pe telefon: iese o fâșie îngustă,
     decupată; îl scoatem și lăsăm textul să urmeze direct după titlu */
  .expand{display:none}
  .porchetta__body{margin-top:clamp(44px,8vw,72px)}
  .porchetta__crust{max-width:min(78%,340px);margin-inline:auto}
  .journey__i>p:last-child{max-width:44ch}
  .foot{padding-bottom:calc(clamp(28px,3vw,44px) + 74px)}
}
@media (max-width:560px){
  .wordmark{font-size:clamp(2.7rem,16vw,5rem);letter-spacing:-.02em}
  .hero{min-height:100svh}
  .hero__foot{gap:12px}
  .hero__rule{display:none}
  .badges li{font-size:1.05rem}
  .foot__end{gap:22px}
}
@media (hover:none){
  .ing__more{opacity:1;transform:none}
  .rail__track{cursor:auto}
}
@media print{
  .nav,.dock,.progress,.menu,.grain,.hero__scroll{display:none!important}
  .sec--dark,.sec--olive,.foot,.hero{background:#fff!important;color:#000!important}
  .expand{height:auto}
  .expand__sticky{position:static;height:auto}
  .expand__frame{position:static;clip-path:none}
}