:root{
 --cream:#F4EEDF;--paper:#FBF8F0;--blue:#1E3358;--blue-2:#2B4572;--butter:#EBD9A0;--olive:#2F3A24;--gold:#A5832D;--gold-l:#D9BC75;--ink:#2B2A1F;--muted:#5C5748;--line:#DDD2B6;
 --disp:"Bodoni Moda","Playfair Display",Georgia,"Times New Roman",serif;
 --body:"Hanken Grotesk","Helvetica Neue",Arial,system-ui,sans-serif;
 --pad:clamp(20px,5vw,72px);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font:400 1.0625rem/1.65 var(--body);color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--blue);color:#fff;padding:10px 16px;z-index:100}.skip:focus{left:8px}
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--pad)}
.eyebrow{display:block;font:600 .72rem/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
h1,h2,h3{font-family:var(--disp);font-weight:500;line-height:1.02;letter-spacing:-.01em}
h1 i,h2 i,.q i{font-style:italic;color:var(--gold)}
.btn{display:inline-block;background:var(--blue);color:var(--cream);padding:17px 34px;font:600 .8rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--blue);transition:background .25s,color .25s,transform .25s;cursor:pointer}
.btn:hover{background:var(--blue-2)}
.btn.alt{background:transparent;color:var(--blue);border-color:var(--blue)}.btn.alt:hover{background:var(--blue);color:var(--cream)}
.lnk{display:inline-block;border-bottom:1px solid var(--gold);padding-bottom:3px;font-weight:600;font-size:.92rem;transition:color .2s}.lnk:hover{color:var(--gold)}
.olive{width:78px;margin:0 auto}

/* header */
header.top{position:sticky;top:0;z-index:50;background:rgba(244,238,223,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px}
.logo img{height:54px;width:auto}
header nav{display:flex;gap:38px}
header nav a{font:500 .92rem/1 var(--body);padding:8px 0;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
header nav a:hover,header nav a[aria-current]{border-color:var(--gold);color:var(--blue)}
.lang{display:flex;gap:2px}
.lang button{font:600 .74rem/1 var(--body);letter-spacing:.12em;padding:8px 9px;border:1px solid transparent;background:none;color:var(--muted);cursor:pointer}
.lang button:hover{color:var(--blue)}
.lang button[aria-pressed=true]{color:var(--blue);border-color:var(--gold)}
.menu{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer;position:relative}
.menu span,.menu span::before,.menu span::after{position:absolute;left:9px;right:9px;height:2px;background:var(--blue);content:"";transition:.25s}
.menu span{top:19px}.menu span::before{top:-7px;left:0;right:0}.menu span::after{top:7px;left:0;right:0}

/* hero */
.hero{padding:clamp(36px,6vw,72px) 0 clamp(56px,8vw,96px)}
.hero .wrap{display:grid;grid-template-columns:1fr minmax(0,600px);gap:clamp(40px,6vw,88px);align-items:center}
.hero h1{font-size:clamp(3rem,6.6vw,6.1rem);color:var(--blue);margin:22px 0 28px;font-weight:500}
.hero p.lead{font-size:1.2rem;color:var(--muted);max-width:26em;margin-bottom:38px}
.hero .acts{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.pic{position:relative}
.pic::before{content:"";position:absolute;left:-28px;bottom:-28px;width:72%;height:72%;background:var(--butter)}
.pic>img{position:relative;width:100%;aspect-ratio:1/1.04;object-fit:cover}
.stamp{position:absolute;left:-46px;top:34px;z-index:2;width:128px;height:128px;border-radius:50%;background:var(--blue);color:var(--gold-l);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(-9deg);box-shadow:0 10px 26px -10px rgba(0,0,0,.45)}
.stamp::after{content:"";position:absolute;inset:6px;border:1px dashed rgba(217,188,117,.6);border-radius:50%}
.stamp b{font:500 1.7rem/1 var(--disp)}.stamp span{font:600 .56rem/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;margin-top:6px}
.pic figcaption{margin-top:16px;font:italic 500 1.05rem var(--disp);color:var(--gold);position:relative}

/* reel */
.reel{padding:clamp(40px,5vw,64px) 0 clamp(64px,8vw,100px);border-top:1px solid var(--line);overflow:hidden}
.reel .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:34px}
.reel .top h2{font-size:clamp(1.9rem,3vw,2.6rem);color:var(--blue)}
.track{display:flex;gap:26px;width:max-content;align-items:center;animation:reel 70s linear infinite}
.reel:hover .track,.reel:focus-within .track{animation-play-state:paused}
@keyframes reel{to{transform:translateX(-50%)}}
.tile{display:block;width:290px;flex:none;position:relative}
.tile .ph{overflow:hidden;background:#fff}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{transform:scale(1.06)}
.tile:nth-child(odd) .ph{aspect-ratio:4/5}
.tile:nth-child(even) .ph{aspect-ratio:1/1;margin-top:0}
.tile .nm{display:block;font:500 1.25rem/1.2 var(--disp);margin-top:12px;color:var(--blue)}
.tile .tg{font:600 .66rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.tile:hover .nm{color:var(--gold)}
@media (prefers-reduced-motion:reduce){.track{animation:none}.reel{overflow-x:auto}html{scroll-behavior:auto}.tile img{transition:none}}

/* story */
.story{padding:clamp(70px,9vw,130px) 0;background:var(--paper)}
.story .wrap{display:grid;grid-template-columns:7fr 4fr;gap:clamp(40px,7vw,110px);align-items:start}
.story .q{font:500 clamp(1.9rem,3.5vw,3.1rem)/1.16 var(--disp);color:var(--blue);margin:22px 0 28px}
.story .s{color:var(--muted);max-width:34em}
.story .side{padding-top:clamp(0px,6vw,90px)}
.story .side img{width:100%;box-shadow:0 22px 40px -24px rgba(30,51,88,.5)}
.story .side .olive{margin:34px 0 0 auto;width:96px;opacity:.95}

/* salato / dolce */
.split{padding:clamp(70px,9vw,120px) 0 clamp(90px,10vw,140px)}
.split h2{font-size:clamp(2.2rem,4.2vw,3.6rem);color:var(--blue);margin-bottom:46px;max-width:12em}
.split .grid{display:grid;grid-template-columns:1.45fr 1fr;gap:28px;align-items:start}
.big{position:relative;display:block;overflow:hidden;color:#fff;background:#222}
.big img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.big::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,26,40,0) 38%,rgba(20,26,40,.78))}
.big:hover img{transform:scale(1.05)}
.big .in{position:absolute;left:34px;right:34px;bottom:30px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.big h3{font-size:clamp(2.4rem,4.4vw,4rem);font-style:italic;font-weight:500}
.big small{font:600 .72rem/1.4 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l);display:block;margin-top:8px}
.big .ar{font:400 2rem/1 var(--body);transition:transform .3s}.big:hover .ar{transform:translateX(8px)}
.split .a{height:560px}.split .b{height:480px;margin-top:80px}

/* su misura */
.custom{background:var(--blue);color:var(--cream);padding:clamp(70px,9vw,120px) 0;position:relative;overflow:hidden}
.custom::before{content:"";position:absolute;right:-70px;bottom:-60px;width:520px;height:300px;background:url(../img/olive.png) no-repeat center/contain;opacity:.12;transform:rotate(-8deg)}
.custom .wrap{display:grid;grid-template-columns:5fr 6fr;gap:clamp(40px,7vw,110px);position:relative}
.custom .eyebrow{color:var(--gold-l)}
.custom h2{font-size:clamp(2.4rem,4.6vw,4.2rem);margin:20px 0 30px}
.custom h2 i{color:var(--gold-l)}
.custom ul{list-style:none;padding:0}
.custom li{display:grid;grid-template-columns:44px 1fr;gap:6px 20px;padding:28px 0;border-top:1px dashed rgba(217,188,117,.45)}
.custom li:last-child{border-bottom:1px dashed rgba(217,188,117,.45)}
.custom li img{width:40px;margin-top:6px}
.custom li h3{font-size:1.65rem;grid-column:2;margin-bottom:6px;color:#fff}
.custom li p{grid-column:2;color:#C9D1E1;max-width:30em}
.custom .lnk{margin-top:34px;border-color:var(--gold-l);color:var(--gold-l)}

/* contact */
.contact{padding:clamp(70px,9vw,130px) 0;background:var(--paper)}
.contact .wrap{display:grid;grid-template-columns:5fr 6fr;gap:clamp(40px,7vw,110px)}
.contact h2{font-size:clamp(2.3rem,4.2vw,3.7rem);color:var(--blue);margin:20px 0 22px}
.contact .lead{color:var(--muted);max-width:24em}
form{display:grid;grid-template-columns:1fr 1fr;gap:30px 28px}
form .full{grid-column:1/-1}
label{display:block;font:600 .7rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
input,select,textarea{width:100%;font:inherit;color:var(--ink);padding:10px 0;border:0;border-bottom:1px solid #A89B78;background:transparent;border-radius:0;transition:border-color .2s}
textarea{resize:vertical;min-height:110px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--blue)}
.hp{position:absolute;left:-9999px}
#msg{grid-column:1/-1;font-weight:600;min-height:1.5em}#msg.ok{color:#1b6b34}#msg.err{color:#9b1c1c}
.sales{margin-top:30px;color:var(--muted);font-size:.95rem}.sales a{border-bottom:1px solid var(--gold);color:var(--blue)}

/* footer */
footer.ft{background:var(--blue);color:#C9D1E1;padding:clamp(48px,6vw,76px) 0 28px}
footer.ft .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px}
footer.ft .logo img{height:84px}
footer.ft p{font-size:.95rem;max-width:22em;margin-top:16px}
footer.ft h4{font:600 .7rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l);margin-bottom:16px}
footer.ft li{list-style:none;margin-bottom:8px;font-size:.95rem}footer.ft ul{padding:0}
footer.ft a:hover{color:#fff}
footer.ft .copy{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:22px;margin-top:10px;font-size:.8rem;display:flex;justify-content:space-between;align-items:center}
footer.ft .copy img{height:46px;opacity:.9}

/* catalogo */
.cat-h{padding:clamp(50px,7vw,96px) 0 34px}
.cat-h h1{font-size:clamp(3rem,7vw,6rem);color:var(--blue);margin:18px 0 18px}
.cat-h p{color:var(--muted);max-width:30em;font-size:1.15rem}
.filters{display:flex;gap:30px;margin-top:34px;border-bottom:1px solid var(--line)}
.filters button{font:600 .78rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);padding:0 0 16px;margin-bottom:-1px;cursor:pointer}
.filters button:hover{color:var(--blue)}
.filters button[aria-pressed=true]{color:var(--blue);border-color:var(--gold)}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 34px;padding:56px 0 clamp(80px,9vw,130px)}
.pc{display:block}
.pc:nth-child(3n+2){margin-top:56px}
.pc .ph{overflow:hidden;aspect-ratio:4/3.2;background:#fff}
.pc img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.pc:hover img{transform:scale(1.05)}
.pc .n{font:500 .78rem/1 var(--disp);font-style:italic;color:var(--gold);margin-top:16px;display:block}
.pc h3{font-size:1.8rem;color:var(--blue);margin:6px 0 8px}
.pc p{color:var(--muted);font-size:.97rem;max-width:26em}
.pc .go{display:inline-block;margin-top:14px;font:600 .74rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--gold);padding-bottom:3px}
.pc[hidden]{display:none}

/* scheda prodotto */
.pp{position:relative;color:var(--cream);background:var(--theme,#1E3358);z-index:1;overflow-x:clip}
.pp .gw{position:absolute;inset:0;overflow:hidden;pointer-events:none}.pp .ghost{position:absolute;left:-1vw;bottom:-0.28em;font:italic 500 clamp(12rem,26vw,24rem)/1 var(--disp);color:rgba(255,255,255,.075);user-select:none}
.pp .wrap{position:relative;display:grid;grid-template-columns:1fr minmax(0,540px);gap:clamp(30px,6vw,90px);padding-top:30px;padding-bottom:clamp(60px,8vw,110px)}
.crumb{font:500 .85rem/1 var(--body);color:rgba(244,238,223,.75);margin-bottom:clamp(30px,5vw,64px)}.crumb a:hover{color:#fff}.crumb span{opacity:.5;margin:0 8px}
.pp .eyebrow{color:var(--gold-l)}
.pp h1{font-size:clamp(2.9rem,6.6vw,6rem);margin:20px 0 24px;line-height:.98}
.pp p.d{font-size:1.2rem;max-width:25em;color:rgba(244,238,223,.88);margin-bottom:34px}
.pp .btn{background:var(--cream);color:var(--theme,#1E3358);border-color:var(--cream)}.pp .btn:hover{background:var(--butter)}
.pp .back{margin-left:26px;border-bottom:1px solid var(--gold-l);padding-bottom:3px;font-weight:600;font-size:.9rem}
.pp .photo{align-self:end;margin-bottom:calc(-1 * clamp(70px,10vw,150px));transform:rotate(1.4deg);background:var(--cream);padding:12px;box-shadow:0 30px 50px -22px rgba(0,0,0,.55);position:relative;z-index:2}
.pp .photo img{width:100%;aspect-ratio:4/3.1;object-fit:cover}
.pp .photo::after{content:"";position:absolute;right:-18px;top:-18px;width:54px;height:54px;background:var(--butter);border-radius:50%;z-index:-1}
.pbody{padding:clamp(60px,7vw,100px) 0 clamp(70px,8vw,110px)}
.pbody .wrap{display:grid;grid-template-columns:1fr minmax(0,540px);gap:clamp(30px,6vw,90px);align-items:start}
.ticket{background:var(--paper);border:1px solid var(--line);padding:34px 36px;position:relative}
.ticket::before,.ticket::after{content:"";position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:var(--cream);border:1px solid var(--line);transform:translateY(-50%)}
.ticket::before{left:-12px}.ticket::after{right:-12px}
.ticket h2{font-size:1.9rem;color:var(--blue);margin-bottom:20px}
.ticket dl{display:grid;gap:0}
.ticket .r{display:flex;align-items:baseline;gap:12px;padding:13px 0}
.ticket dt{font:600 .72rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ticket .r::after{content:"";order:1;flex:1;border-bottom:1px dotted #A89B78;transform:translateY(-4px)}
.ticket dd{order:2;font:500 1.2rem/1.2 var(--disp);color:var(--blue);text-align:right}
.cook{padding-top:clamp(0px,9vw,140px)}
.cook h2{font-size:clamp(1.9rem,3.2vw,2.8rem);color:var(--blue);margin:16px 0 18px}
.cook p{color:var(--muted);max-width:30em;margin-bottom:22px}
.cook .note{border-left:2px solid var(--gold);padding-left:20px;color:var(--ink);font-family:var(--disp);font-style:italic;font-size:1.25rem;line-height:1.4;margin-top:34px}
.more{padding:0 0 clamp(80px,9vw,130px)}
.more .top{display:flex;align-items:center;gap:22px;margin-bottom:34px}
.more .top h2{font-size:clamp(1.8rem,3vw,2.6rem);color:var(--blue)}
.more .top::after{content:"";flex:1;height:1px;background:var(--line)}
.more .row{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.more .row .tile{width:auto}.more .row .tile .ph{aspect-ratio:4/3.2!important}
.more .row .tile:nth-child(even){margin-top:30px}

@media (max-width:960px){
 header nav{position:absolute;left:0;right:0;top:100%;background:var(--cream);flex-direction:column;gap:0;padding:8px var(--pad) 20px;border-bottom:1px solid var(--line);display:none}
 header nav.open{display:flex}header nav a{padding:14px 0;border-bottom:1px solid var(--line)}
 .menu{display:block;order:3}header.top .wrap{height:72px}.logo img{height:46px}
 .hero .wrap,.story .wrap,.custom .wrap,.contact .wrap,.pp .wrap,.pbody .wrap{grid-template-columns:1fr}
 .stamp{left:-8px;top:-30px;width:104px;height:104px}.stamp b{font-size:1.4rem}
 .pic::before{left:-14px;bottom:-14px}
 .story .side{padding-top:0;max-width:420px}
 .split .grid{grid-template-columns:1fr}.split .b{margin-top:0;height:380px}.split .a{height:420px}
 .cgrid{grid-template-columns:1fr 1fr}.pc:nth-child(3n+2){margin-top:0}.pc:nth-child(even){margin-top:36px}
 .pp .photo{margin-bottom:-60px;max-width:520px}
 .cook{padding-top:30px}
 .more .row{grid-template-columns:1fr 1fr}
 footer.ft .wrap{grid-template-columns:1fr 1fr}footer.ft .wrap>div:first-child{grid-column:1/-1}
 form{grid-template-columns:1fr}
}
@media (max-width:560px){
 .cgrid{grid-template-columns:1fr}.pc:nth-child(even){margin-top:0}
 .tile{width:230px}
 footer.ft .wrap{grid-template-columns:1fr}
 .more .row{grid-template-columns:1fr}.more .row .tile:nth-child(even){margin-top:0}
 .big .in{left:20px;right:20px}
}
