/* Layout: testata bordeaux col logo che sfuma nel panna; schede bordeaux a corona attorno a 8 drink disposti sul rombo. Look unico. */
:root{
  --wine-900:#2A0B11;
  --wine-700:#4A1A22;
  --wine-500:#6E2B36;
  --blush:#B88E8F;
  --rose-200:#EBD8D8;
  --rose-400:#C9A3A4;
  --cream:#F1E9E3;
  --cream-hi:#F8F3EF;
  --ink:#3A1219;
  --muted:#76585C;
  --accent:#9C4F5B;
  --f-display:"Jost", "Helvetica Neue", Arial, sans-serif;
  --f-brand:"Montserrat", "Helvetica Neue", Arial, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--cream)}
.menu-app{
  --shift:0px;
  background-color:var(--cream);
  background-image:
    radial-gradient(ellipse 60% 40% at 50% 62%, var(--cream-hi) 0%, transparent 70%),
    linear-gradient(180deg,
      var(--wine-900) 0px,
      var(--wine-700) calc(190px + var(--shift)),
      var(--wine-500) calc(270px + var(--shift)),
      var(--blush) calc(360px + var(--shift)),
      #DCC6C2 calc(430px + var(--shift)),
      var(--cream) calc(500px + var(--shift)),
      var(--cream) calc(100% - 280px),
      #E4CDCA calc(100% - 90px),
      #D7B9B7 100%);
  background-repeat:no-repeat;
  background-size:100% calc(100% - var(--shift)),100% 100%;
  background-position:bottom center,top center;
  color:var(--ink);
  font-family:var(--f-display);
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:0 40px;
}
.page{max-width:1100px;margin:0 auto;position:relative}

/* Testata */
.mast{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:40px}
.mast img{width:clamp(190px,28vw,300px);height:auto;display:block}
.mast .city{font:300 11px/1 var(--f-display);letter-spacing:.9em;padding-left:.9em;color:var(--rose-400);text-transform:uppercase}
.nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;margin-top:26px}
@media (min-width:640px){ .nav{max-width:610px;margin-inline:auto;row-gap:12px} }
/* pallino mediano tra una categoria e l'altra; a fine riga viene nascosto */
.nav .sep{flex:none;width:3px;height:3px;border-radius:50%;background:var(--rose-400);opacity:.85;margin-bottom:1px}
.nav .sep.eol{visibility:hidden}
.nav button{
  background:none;border:0;padding:6px 0;cursor:pointer;
  font:400 10.5px/1 var(--f-display);letter-spacing:.24em;text-transform:uppercase;
  color:rgba(235,216,216,.8);border-bottom:1px solid transparent;
}
.nav button[aria-current="true"]{color:var(--rose-200);border-bottom-color:var(--rose-400)}
.nav button:hover{color:var(--rose-200)}
.nav button:focus-visible,.card-select:focus-visible,.pair:focus-visible,.glass:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Titolo sezione */
.head{text-align:center;margin:180px 0 44px}
.head h1{margin:0;font:300 clamp(22px,3vw,30px)/1 var(--f-display);letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;color:var(--ink)}

/* Racconto d'apertura (solo Signatures) */
.intro{margin:72px auto 0;max-width:640px;text-align:center;color:var(--rose-200);font:italic 300 clamp(14.5px,1.5vw,16px)/1.8 var(--f-display);letter-spacing:.01em}
.intro[hidden]{display:none}
.intro .orn{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto 30px;color:var(--rose-400)}
.intro .orn::before,.intro .orn::after{content:"";width:46px;height:1px;background:linear-gradient(90deg,transparent,currentColor)}
.intro .orn::after{transform:scaleX(-1)}
.intro .orn i{width:5px;height:5px;transform:rotate(45deg);border:1px solid currentColor}
.intro .lead{margin:0 0 28px;font:italic 300 clamp(19px,2.4vw,25px)/1.45 var(--f-brand);letter-spacing:.02em;
  background:linear-gradient(180deg,#F7E9EA 0%,#E9C9C8 55%,#C9A3A4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro .lead span{display:block;text-wrap:balance}
.intro p{margin:0 0 18px;text-wrap:pretty}
.intro p.body{color:rgba(235,216,216,.86)}
.intro b{font:500 .78em/1 var(--f-brand);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:#F7E9EA;white-space:nowrap;padding:0 .08em}
.intro .close{margin:30px 0 0;font:italic 300 clamp(17px,2vw,20px)/1.4 var(--f-brand);letter-spacing:.02em;color:#F7E9EA}
.intro .close span{display:block;margin-top:8px;font:italic 300 .72em/1.4 var(--f-display);letter-spacing:.04em;color:var(--rose-400)}
.intro .sig{display:block;margin:26px auto 0;width:1px;height:46px;background:linear-gradient(180deg,var(--rose-400),transparent)}
.intro > *{animation:introIn .9s cubic-bezier(.2,.7,.2,1) both}
.intro > :nth-child(2){animation-delay:.08s}.intro > :nth-child(3){animation-delay:.16s}.intro > :nth-child(4){animation-delay:.24s}
.intro > :nth-child(5){animation-delay:.32s}.intro > :nth-child(6){animation-delay:.4s}.intro > :nth-child(7){animation-delay:.48s}
@keyframes introIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:520px){ .intro{margin-top:52px;font-size:14.5px;line-height:1.75} .intro .lead{margin-bottom:22px} .intro p{margin-bottom:15px} }
@media (prefers-reduced-motion: reduce){ .intro > *{animation:none} }

/* Griglia a corona */
.stage{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-areas:
    ". t1 t2 ."
    "l1 c c r1"
    "l2 c c r2"
    ". b1 b2 .";
  gap:34px 40px;
  align-items:start;
}
.slot-t1{grid-area:t1}.slot-t2{grid-area:t2}
.slot-l1{grid-area:l1;align-self:start}.slot-l2{grid-area:l2;align-self:end}
.slot-r1{grid-area:r1;align-self:start}.slot-r2{grid-area:r2;align-self:end}
.slot-b1{grid-area:b1}.slot-b2{grid-area:b2}
/* 6 signature: due sopra, una per lato, due sotto */
.stage.n6{grid-template-areas:". t1 t2 ." "l c c r" ". b1 b2 ."}
.slot-l{grid-area:l;align-self:center}.slot-r{grid-area:r;align-self:center}

/* Centro: 8 drink sul rombo (4 vertici + 4 lati). Coordinate in cqw, così il rombo scala con lo spazio */
.center{grid-area:c;position:relative;container-type:inline-size;width:100%;aspect-ratio:530/550;align-self:center}
.glass{position:absolute;left:calc(50% + var(--x));top:var(--y);
  transform:translate(-50%,-50%);transform-origin:50% 50%;
  background:none;border:0;padding:0;cursor:pointer;line-height:0;
  transition:left .65s cubic-bezier(.3,.7,.2,1), top .65s cubic-bezier(.3,.7,.2,1), opacity .35s ease}
.glass img{display:block;height:var(--h);width:auto;max-width:none;pointer-events:none;transition:height .65s cubic-bezier(.3,.7,.2,1)}
.glass .main{position:relative;z-index:2}
/* ombra proiettata sul piano, verso dietro a destra */
.glass .cast{position:absolute;left:0;bottom:0;z-index:0;
  transform-origin:50% 100%;transform:translateX(10%) skewX(-38deg) scaleY(.42);
  filter:brightness(0) blur(7px);opacity:.26;mix-blend-mode:multiply}
/* ombra di contatto alla base */
.glass::after{content:"";position:absolute;z-index:1;left:12%;right:12%;bottom:-7px;height:16px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(42,11,17,.38) 0%, rgba(42,11,17,.14) 45%, transparent 72%);filter:blur(2px)}
.stage.has-sel .glass{opacity:.3}
.stage.has-sel .glass.on{opacity:1;z-index:1000 !important;pointer-events:none}

/* Schede bordeaux, testi chiari */
.card{perspective:1400px;cursor:pointer;outline:none;border-radius:20px;min-width:0}
.inner{display:grid;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.card.flipped .inner{transform:rotateY(180deg)}
.face{
  grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  position:relative;overflow:hidden;border-radius:20px;min-width:0;
  background:linear-gradient(155deg, var(--wine-500) 0%, var(--wine-700) 48%, var(--wine-900) 100%);
  box-shadow:0 1px 0 rgba(235,216,216,.14) inset, 0 0 0 1px rgba(235,216,216,.08) inset, 0 22px 40px -22px rgba(42,11,17,.7);
  color:var(--rose-200);
  padding:20px 18px;
  display:flex;flex-direction:column;gap:0;
  transition:box-shadow .3s ease;
}
.face::before{content:"";position:absolute;inset:-40% -20% auto auto;width:70%;aspect-ratio:1;
  background:radial-gradient(circle, rgba(235,216,216,.16), transparent 65%);pointer-events:none}
.back{transform:rotateY(180deg);background:linear-gradient(155deg, #7A3340 0%, var(--wine-500) 50%, var(--wine-700) 100%)}
.face[aria-hidden="true"],.dface[aria-hidden="true"]{pointer-events:none}
.card:hover .face{box-shadow:0 1px 0 rgba(235,216,216,.18) inset, 0 0 0 1px rgba(235,216,216,.14) inset, 0 26px 44px -20px rgba(42,11,17,.75)}
.card{transition:transform .35s ease}
.card.sel{transform:translateY(-6px)}
.card.sel .face{box-shadow:0 1px 0 rgba(235,216,216,.2) inset, 0 0 0 1.5px var(--rose-400) inset, 0 40px 70px -22px rgba(42,11,17,.9), 0 16px 30px -10px rgba(42,11,17,.55), 0 0 0 6px rgba(110,43,54,.12)}
.top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;position:relative}
.eyebrow{font:500 9px/1.5 var(--f-display);letter-spacing:.24em;text-transform:uppercase;color:var(--rose-400);min-width:0}
.price{font:300 19px/1 var(--f-display);color:#F7E9EA;font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}
.price small{font-size:10px;margin-right:3px;color:var(--rose-400)}
.name{margin:0;padding-top:.3em;font:500 19px/1.25 var(--f-brand);letter-spacing:.14em;text-transform:uppercase;transition:font-size .35s ease;position:relative;
  background:linear-gradient(180deg,#F7E9EA 0%,#D2ADB0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal;min-width:0}
.card.sel .name{font-size:16px}
.name .w{display:inline-block;max-width:100%}
.card-select{display:inline;background:transparent;border:0;padding:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:inherit;cursor:pointer}
.hrow{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative}
.hrow .price{font-size:20px;transition:font-size .35s ease}
.card.sel .hrow .price{font-size:18px}
/* da chiuse: solo il titolo, tutte alla stessa altezza */
.card:not(.sel) .back{display:none}
.card:not(.sel) .face{justify-content:center;min-height:96px}
/* dettagli: chiusi di default, si aprono solo sul drink selezionato */
.more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.3,.7,.2,1)}
.more-in{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:10px;
  opacity:0;visibility:hidden;transition:opacity .25s ease, visibility 0s linear .45s}
.more-in > :first-child{margin-top:12px}
.card.sel .more{grid-template-rows:1fr}
.card.sel .more-in{opacity:1;visibility:visible;transition:opacity .35s ease .12s, visibility 0s}
.ing,.desc{margin:0;font:300 12.5px/1.6 var(--f-display);color:rgba(235,216,216,.82);min-height:calc(1.6em * 3)}
.ing{list-style:none;padding:0;display:flex;flex-wrap:wrap;align-content:flex-start}
.ing li:not(:last-child)::after{content:"·";margin:0 7px;color:var(--rose-400)}
.pair{
  position:relative;z-index:1;margin-top:4px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;min-width:0;
  background:rgba(235,216,216,.07);border:1px solid rgba(235,216,216,.24);border-radius:12px;
  padding:10px 12px;cursor:pointer;
  font:500 9px/1 var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:var(--rose-200);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.pair span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pair svg{width:14px;height:14px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.pair:hover{background:var(--rose-200);color:var(--wine-700);border-color:var(--rose-200)}}
.back .pair,.dback .pair{justify-content:flex-start}

/* Firma in basso: logo in bordeaux */
.sign{display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin-top:56px}
.sign img{display:block;width:104px;height:auto;max-width:100%}
.sign span{font:300 9px/1 var(--f-display);letter-spacing:.7em;margin-right:-.7em;color:var(--wine-500);text-transform:uppercase}


/* ===== Spirits: cartina del mondo cliccabile + elenco per categoria ===== */
.spirits{display:flex;flex-direction:column;gap:28px}
.map-card{position:relative;border-radius:22px;overflow:hidden;
  background:radial-gradient(ellipse 80% 70% at 50% 45%, #3A1219 0%, var(--wine-900) 75%);
  box-shadow:0 1px 0 rgba(235,216,216,.12) inset, 0 30px 60px -30px rgba(42,11,17,.8);
  padding:0}
.world{display:block;width:100%;height:auto}
.world .ct{stroke:rgba(235,216,216,.22);stroke-width:.5;vector-effect:non-scaling-stroke;transition:fill .3s ease, opacity .3s ease}
.world .t0{fill:#5A2230}.world .t1{fill:#6E2B36}.world .t2{fill:#4E1C27}.world .t3{fill:#7A3340}.world .t4{fill:#642733}
.world .has{fill:url(#roseMetal);cursor:pointer;stroke:rgba(255,245,245,.55)}
.world .has:hover{fill:#F7E9EA}
.map-card.filtered .world .has{opacity:.45}
.map-card.filtered .world .has.on{opacity:1;fill:#F7E9EA;stroke:#FFFFFF;stroke-width:1.6}
.pin{position:absolute;transform:translate(-50%,-50%);width:24px;height:24px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center}
.pin::before{content:"";width:7px;height:7px;border-radius:50%;background:#F7E9EA;box-shadow:0 0 0 2px rgba(110,43,54,.9), 0 0 10px rgba(247,233,234,.7)}
.pin::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;border:1px solid rgba(247,233,234,.8);animation:pinPulse 2.4s ease-out infinite}
.pin:nth-of-type(3n)::after{animation-delay:.8s}.pin:nth-of-type(3n+1)::after{animation-delay:1.6s}
@keyframes pinPulse{from{transform:scale(1);opacity:.9}to{transform:scale(3.4);opacity:0}}
.map-card.filtered .pin:not(.on){opacity:.35}
.pin:focus-visible{outline:1px solid var(--rose-200);outline-offset:2px;border-radius:50%}
.pin-label{position:absolute;transform:translate(-50%,calc(-100% - 14px));pointer-events:none;white-space:nowrap;
  font:500 10px/1 var(--f-brand);letter-spacing:.16em;text-transform:uppercase;color:var(--wine-700);
  background:#F7E9EA;padding:7px 10px;border-radius:999px;box-shadow:0 8px 18px -8px rgba(0,0,0,.6)}
.origin-picker{border:1px solid rgba(74,26,34,.2);border-radius:14px;background:rgba(248,243,239,.65)}
.origin-picker summary{cursor:pointer;min-height:48px;padding:15px 16px;font:500 11px/1.5 var(--f-brand);letter-spacing:.14em;text-transform:uppercase;color:var(--wine-700)}
.origin-options{display:flex;flex-wrap:wrap;gap:8px;padding:0 12px 14px}
.origin-options button{min-height:44px;padding:10px 14px;border:1px solid rgba(74,26,34,.25);border-radius:999px;background:transparent;color:var(--wine-700);font:400 13px/1.3 var(--f-display);cursor:pointer}
.origin-options button:hover,.origin-options button[aria-pressed="true"]{background:var(--wine-700);color:var(--rose-200)}
.origin-picker summary:focus-visible,.origin-options button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.filter-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid rgba(74,26,34,.18)}
.filter-bar.is-hint{justify-content:center;border-bottom:0;padding-bottom:4px}
.tap-hint{margin:0;display:inline-flex;align-items:center;gap:12px;text-align:center;
  font:500 clamp(11.5px,1.6vw,14px)/1.4 var(--f-brand);letter-spacing:.2em;text-transform:uppercase;color:var(--wine-700)}
.tap-dot{position:relative;flex:none;width:9px;height:9px;border-radius:50%;background:var(--wine-500);box-shadow:0 0 0 3px rgba(110,43,54,.18)}
.tap-dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--wine-500);animation:pinPulse 2.4s ease-out infinite}
.filter-bar .where{font:500 13px/1.3 var(--f-brand);letter-spacing:.16em;text-transform:uppercase;color:var(--wine-700)}
.filter-bar .where small{display:block;margin-top:4px;font:400 11px/1 var(--f-display);letter-spacing:.12em;color:var(--muted)}
.filter-bar button{background:none;border:1px solid rgba(74,26,34,.3);border-radius:999px;padding:8px 14px;cursor:pointer;
  font:500 9.5px/1 var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:var(--wine-700)}
.filter-bar button:hover{background:var(--wine-700);color:var(--rose-200);border-color:var(--wine-700)}
.sp-list{display:flex;flex-direction:column;gap:34px}
.sp-cat h3{margin:0 0 4px;font:500 15px/1.2 var(--f-brand);letter-spacing:.2em;text-transform:uppercase;color:var(--wine-700)}
.sp-head,.sp-item{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 92px minmax(0,1.25fr);gap:6px 22px;align-items:baseline}
.sp-head{padding:8px 0;border-bottom:1px solid rgba(74,26,34,.3);
  font:500 9.5px/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.sp-item{width:100%;background:none;border:0;border-bottom:1px solid rgba(74,26,34,.12);padding:12px 0;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.sp-item:hover .sp-name,.sp-item.on .sp-name{color:var(--wine-500)}
.sp-item.on{background:linear-gradient(90deg, rgba(110,43,54,.07), transparent 70%)}
.sp-name{font:400 15px/1.3 var(--f-display);transition:color .2s ease}
.sp-item.on .sp-name{font-weight:500}
.sp-from{font:400 13px/1.35 var(--f-display);color:#5A3A3F}
.sp-abv{font:300 14px/1.3 var(--f-display);color:var(--wine-700);font-variant-numeric:tabular-nums;white-space:nowrap}
.sp-notes{font:300 13.5px/1.4 var(--f-display);color:#6B4B4E}
.sp-item i{display:none;font-style:normal}
@media (max-width:640px){
  .sp-head{display:none}
  .sp-item{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name abv" "from from" "notes notes";gap:4px 12px}
  .sp-name{grid-area:name}.sp-abv{grid-area:abv}.sp-from{grid-area:from}.sp-notes{grid-area:notes}
  .sp-item i{display:inline;margin-right:6px;font:500 9px/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .sp-abv i{display:none}
  .sp-from,.sp-notes{font-size:12.5px}
}
.sp-note{font:300 11px/1.5 var(--f-display);letter-spacing:.06em;color:var(--muted);text-align:center;margin:0}
.map-view{position:relative;overflow:hidden;aspect-ratio:1000/501;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.map-view.dragging{cursor:grabbing}
.map-view .world{position:absolute;inset:0;width:100%;height:100%}
.map-ctrl{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:6px;z-index:5}
.map-ctrl button{width:34px;height:34px;border-radius:50%;border:1px solid rgba(235,216,216,.35);background:rgba(42,11,17,.72);
  color:var(--rose-200);cursor:pointer;display:grid;place-items:center;padding:0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.map-ctrl button:hover{background:var(--rose-200);color:var(--wine-700)}
.map-ctrl svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pin[hidden],.pin-label[hidden]{display:none}
@media (max-width:640px){
  /* telefono: vista più alta, si zooma con due dita e si sposta col dito */
  .map-view{aspect-ratio:1/.86;touch-action:pan-y}
}
@media (max-width:520px){ .tap-hint{font-size:10.5px;letter-spacing:.1em;gap:9px} .map-card{border-radius:16px} .pin{width:22px;height:22px} .pin::before{width:6px;height:6px} .pin-label{font-size:8.5px;padding:6px 8px} }
@media (prefers-reduced-motion: reduce){ .pin::after,.tap-dot::after{animation:none;opacity:0} }


/* ===== IBA Cocktails: elenco in ordine alfabetico ===== */
.iba-list{columns:2 340px;column-gap:64px;margin-top:6px}
.iba-item{break-inside:avoid;padding:18px 0 16px;border-bottom:1px solid rgba(74,26,34,.14)}
.iba-name{display:flex;align-items:baseline;gap:12px;margin:0;font:500 15px/1.25 var(--f-brand);letter-spacing:.2em;text-transform:uppercase;color:var(--wine-700)}
.iba-ing{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;font:300 14px/1.6 var(--f-display);color:#5A3A3F}
.iba-ing li:not(:last-child)::after{content:"·";margin:0 8px;color:var(--rose-400)}
.iba-variants{display:flex;flex-wrap:wrap;gap:5px 18px;margin:10px 0 0;padding:0;list-style:none;font:400 13px/1.5 var(--f-display);color:var(--wine-700)}
.iba-variants li{white-space:nowrap}.iba-variants strong{font-weight:500;color:var(--wine-500)}
.iba-alt{margin:6px 0 0;font:400 10.5px/1.4 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.wine-disclaimer{margin:0 0 34px;font:300 13px/1.6 var(--f-display);color:var(--muted)}
.wine-review{margin-top:46px;font:300 13px/1.6 var(--f-display);color:var(--muted)}
.wine-review summary{cursor:pointer;font:500 10.5px/1.5 var(--f-brand);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.wine-review ul{padding-left:18px;margin:12px 0 0}.wine-review li+li{margin-top:6px}
.wine-review summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media (max-width:520px){ .iba-name{font-size:13.5px;letter-spacing:.16em} .iba-ing{font-size:13.5px} }
.mock-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;margin-top:6px}
@media (max-width:640px){ .mock-list{grid-template-columns:1fr} }
.grp + .grp{margin-top:56px}
.soft-list li{display:flex;align-items:baseline;gap:12px}
.pr{margin-left:2px;flex:none;font:400 14px/1 var(--f-display);letter-spacing:.04em;text-transform:none;color:var(--wine-500)}
.soft-list li small{display:inline-block;white-space:nowrap;margin-left:12px;font:300 12px/1 var(--f-display);letter-spacing:.06em;text-transform:none;color:var(--muted)}
.grp-h{display:flex;align-items:center;gap:16px;margin:0 0 4px;font:500 11px/1 var(--f-brand);letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.grp-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(156,79,91,.45),transparent)}
.soft-list{columns:3 200px;column-gap:64px;margin:6px 0 0;padding:0;list-style:none}
.soft-list li{break-inside:avoid;padding:16px 0 15px;border-bottom:1px solid rgba(74,26,34,.14);font:500 13.5px/1.3 var(--f-brand);letter-spacing:.18em;text-transform:uppercase;color:var(--wine-700)}
@media (max-width:520px){ .soft-list{columns:1} .soft-list li{font-size:12.5px;letter-spacing:.16em;padding:14px 0 13px} }

/* Pagine in lavorazione */
.wip{display:grid;place-items:center;min-height:420px;text-align:center;color:var(--muted);font:300 13px/1.7 var(--f-display);letter-spacing:.08em}
.wip strong{display:block;font:300 22px/1.2 var(--f-display);letter-spacing:.3em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}

/* Responsive */
@media (max-width: 1100px){
  .name{font-size:16.5px;letter-spacing:.11em}
  .card.sel .name{font-size:15px}
  .hrow .price{font-size:18px}
}
/* Pannello dettagli: usato solo dove le schede sono troppo strette per aprirsi */
.detail{display:none}
@media (max-width: 900px){
  /* stessa corona del desktop, in piccolo: 2 schede sopra, 2 per lato, 2 sotto; drink a ottagono al centro */
  .stage{
    grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,1fr);
    grid-template-areas:
      ". t1 t2 ."
      "l1 c c r1"
      "l2 c c r2"
      ". b1 b2 .";
    gap:8px 6px;
  }
  .slot-l1,.slot-r1{align-self:center}
  .slot-l2,.slot-r2{align-self:center}
  .center{aspect-ratio:530/900}
  .card,.face{border-radius:14px}
  .face{padding:10px 8px;text-align:center}
  .face::before{display:none}
  .card:not(.sel) .face,.card.sel .face{justify-content:center;min-height:78px} /* tutte le schede della stessa altezza */
  .hrow{flex-direction:column;align-items:center;gap:4px}
  .name,.card.sel .name{font-size:clamp(9.5px,2.55vw,15px);letter-spacing:.06em;line-height:1.2;padding-top:.15em}
  .hrow .price,.card.sel .hrow .price{font-size:clamp(12px,3.1vw,17px)}
  .price small{font-size:.6em}
  .more{display:none}
  .back{display:none !important}
  .card.sel{transform:translateY(-3px)}
  .card.sel .face{box-shadow:0 0 0 1.5px var(--rose-400) inset, 0 18px 30px -12px rgba(42,11,17,.85), 0 0 0 4px rgba(110,43,54,.14)}
  .detail:not([hidden]){display:block;max-width:460px;margin:18px auto 0;perspective:1400px;animation:detailIn .35s ease}
  .dinner{display:grid;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.2,1)}
  .detail.flipped .dinner{transform:rotateY(180deg)}
  .dface{
    grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;
    display:flex;flex-direction:column;gap:10px;
    padding:18px;border-radius:18px;position:relative;overflow:hidden;
    background:linear-gradient(155deg, var(--wine-500) 0%, var(--wine-700) 48%, var(--wine-900) 100%);
    box-shadow:0 1px 0 rgba(235,216,216,.14) inset, 0 22px 40px -22px rgba(42,11,17,.7);
    color:var(--rose-200);
  }
  .dface::before{content:"";position:absolute;inset:-40% -20% auto auto;width:70%;aspect-ratio:1;
    background:radial-gradient(circle, rgba(235,216,216,.16), transparent 65%);pointer-events:none}
  .dback{transform:rotateY(180deg);background:linear-gradient(155deg, #7A3340 0%, var(--wine-500) 50%, var(--wine-700) 100%)}
  .detail .name{font-size:16px;letter-spacing:.12em;text-align:left}
  .detail .hrow{flex-direction:row;align-items:center;justify-content:space-between}
  .detail .hrow .price{font-size:19px}
  .detail .ing,.detail .desc{min-height:0}
  .detail .pair{margin-top:4px}
  .detail .pair span{white-space:normal}
}
@keyframes detailIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.dinner{transition:none}}
@media (max-width: 520px){
  .head{margin:140px 0 26px}
  .head h1{letter-spacing:.3em;padding-left:.3em;line-height:1.35;text-wrap:balance}
}
@media (prefers-reduced-motion: reduce){
  .inner,.glass,.glass img,.card,.more,.more-in{transition:none}
  .detail:not([hidden]){animation:none}
}

@media (max-width:640px){
  .nav{gap:4px 12px}
  .nav button{min-height:40px;font-size:11px}
  .pair{min-height:44px}
  .soft-list li>span:first-child,.iba-name>span:first-child{min-width:0;overflow-wrap:anywhere}
  .soft-list li small{white-space:normal}
}

/* ===== v2: engineering ===== */
.taste{margin:0;font:italic 300 13px/1.5 var(--f-display);color:var(--rose-200)}
.detail .taste{margin:0}
.legal{margin:40px auto 0;max-width:560px;text-align:center;font:300 11px/1.7 var(--f-display);letter-spacing:.03em;color:var(--muted)}
.wine-region{margin:26px 0 0;font:500 10px/1 var(--f-display);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.wine-region:first-of-type{margin-top:12px}
.grp .iba-list{margin-top:2px}
.iba-item .iba-tag{margin:8px 0 0;font:400 10.5px/1.4 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.menu-label{display:none}
.in-landing .mast-logo,.in-landing .city{display:none}
.in-landing .menu-label{display:block;font:300 11px/1 var(--f-display);letter-spacing:.9em;padding-left:.9em;color:var(--rose-400);text-transform:uppercase}
.in-landing .mast{padding-top:56px}
.in-landing .sign{display:none}
.in-landing{padding-bottom:20px}

h4.iba-name{margin:0}

/* flip: la faccia non visibile viene nascosta a meta' rotazione (Safari iOS lascia trasparire i bottoni) */
.face{transition:box-shadow .3s ease, visibility 0s linear .35s}
.dface{transition:visibility 0s linear .35s}
.card .back{visibility:hidden}
.card.flipped .face:not(.back){visibility:hidden}
.card.flipped .back{visibility:visible}
@media (max-width:900px){
  /* mobile: niente flip 3D (Safari iOS lo rende male), solo dissolvenza tra le due facce */
  .detail:not([hidden]){perspective:none}
  .dinner,.detail.flipped .dinner{transform:none;transform-style:flat;transition:none}
  .dface{backface-visibility:visible;-webkit-backface-visibility:visible;opacity:1;visibility:visible;
    transition:opacity .3s ease, visibility 0s linear .3s}
  .dback{transform:none;opacity:0;visibility:hidden}
  .detail.flipped .dfront{opacity:0;visibility:hidden}
  .detail.flipped .dback{opacity:1;visibility:visible}
  .detail.flipped .dback,.detail:not(.flipped) .dfront{transition:opacity .3s ease, visibility 0s}
}