/* Piazzetta San Carlo — anteprima non ufficiale. L'idea: solo la sera, scuro
   e intimo, un tavolo per stasera. I bicchieri alla luce delle candele in
   cima; la sala che si accende (un cerchio trasparente in un velo scuro che
   si ingrandisce, una sola trasformazione); la carta che si accende piatto
   per piatto; il branzino sul vino; la storia al buio col fascio di luce;
   due foto a meta'; «solo la sera»; il lampione; le candele per l'ora; la
   fiammella. Instrument Serif e Manrope; notte, candela, tovaglia, vino. */
@font-face{font-family:"Instrument Serif";src:url(../../font/instrument-serif-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../../font/instrument-serif-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Manrope;src:url(../../font/manrope-200-800.woff2) format("woff2");font-weight:200 800;font-display:swap}

:root{
  --notte:#0E0C0A;
  --candela:#E0BF5A;        /* 11,8:1 sulla notte */
  --tovaglia:#F4EFE8;
  --vino:#5F1329;
  --f:var(--notte);--t:var(--tovaglia);--m:#B9B0A4;--l:#2A2622;--carta:#171411;
  --a:var(--candela);--a-btn:var(--candela);--a-su:var(--notte);--campo:#171411;--t-campo:var(--tovaglia);--l-campo:#4E473F;
  --font-t:"Instrument Serif",Georgia,serif;--font-b:Manrope,system-ui,sans-serif;
  --bordo:clamp(1rem,4.5vw,4rem);--r:2px;--r-btn:99px;
}
h1,h2,h3{font-family:var(--font-t);font-weight:400;line-height:1;letter-spacing:-.01em}
h2{font-size:clamp(2.4rem,1.5rem + 3.2vw,4.4rem);margin-bottom:1rem}
section{padding:clamp(3.5rem,8vw,7rem) var(--bordo)}

.testata{background:var(--notte);border-bottom:1px solid var(--l)}
.t-marchio{font:400 1.7rem/1 var(--font-t);color:var(--candela);font-style:italic}

/* ── 1. le candele nei bicchieri, e le parole in alto a destra ────────────── */
.carlo .clip{--clip-h:calc(100svh - 5.2rem);align-items:start;justify-items:end;text-align:right}
.carlo .clip::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(14,12,10,.94) 0%,rgba(14,12,10,.78) 34%,rgba(14,12,10,.25) 62%,rgba(14,12,10,.1)),
  linear-gradient(0deg,rgba(14,12,10,.55),transparent 25%)}
.carlo .clip-parole{padding:clamp(2rem,5vw,4.5rem) var(--bordo) 0;color:var(--tovaglia);max-width:44rem;display:flex;flex-direction:column;align-items:flex-end}
/* il velo sotto le parole (base.css): sul telefono la frase in corsivo si perdeva
   fra le luci del locale */
.carlo .clip{--velo-parole:rgba(14,12,10,.58)}
.clip-nome{font:400 clamp(3.2rem,1.4rem + 6.4vw,8rem)/.9 var(--font-t);letter-spacing:-.02em}
/* la frase e' un blocco piu' stretto del titolo: senza il margine automatico
   restava rientrata, staccata dal filo destro del titolo e del bottone (voce Cowork 26/10 (1)) */
.clip-frase{font:400 clamp(1.25rem,1rem + .9vw,1.9rem)/1.25 var(--font-t);font-style:italic;color:var(--candela);margin-top:1rem;max-width:22ch;margin-left:auto}
.clip-btn{margin-top:1.6rem;display:inline-block;border:1.5px solid var(--candela);color:var(--candela);background:rgba(14,12,10,.6);font:600 1rem var(--font-b);padding:.95rem 1.6rem;
  border-radius:var(--r-btn);text-decoration:none}
.clip-btn:hover{background:var(--candela);color:var(--notte)}

/* ── 2. la sala che si accende, quando arriva ─────────────────────────────── */
.apertura{position:relative;min-height:min(92svh,58rem);padding:0;display:grid;align-items:end;overflow:hidden}
.ap-foto{position:absolute;inset:0}
.ap-foto picture,.ap-foto img{width:100%;height:100%}
.ap-foto img{object-fit:cover;object-position:50% 55%}
.buio{position:absolute;left:58%;top:62%;width:240vmax;height:240vmax;margin:-120vmax 0 0 -120vmax;pointer-events:none;
  background:radial-gradient(circle,rgba(14,12,10,0) 0,rgba(14,12,10,0) 2.5%,rgba(14,12,10,.96) 11%);
  transform:scale(.7);animation:accendi 4.2s cubic-bezier(.55,0,.25,1) .35s forwards}
@keyframes accendi{70%{opacity:1}to{transform:scale(11);opacity:0}}
.apertura::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(14,12,10,.92) 0%,rgba(14,12,10,.5) 42%,rgba(14,12,10,0) 70%)}
.ap-testo{position:relative;z-index:2;padding:0 var(--bordo) clamp(2.5rem,6vw,4.5rem);max-width:48rem}
.ap-dove{color:var(--candela);font-weight:600;font-size:.95rem;margin-bottom:.9rem}
.apertura h2{font-size:clamp(3.2rem,1.6rem + 6.4vw,8rem);line-height:.9;margin-bottom:1.3rem}
.riga{display:block}
.riga:nth-child(2){font-style:italic}
.ap-sotto{font-size:1.1rem;max-width:42ch;color:#E9E2D7}
.mosso .apertura:not(.dentro) .buio{animation-play-state:paused}


/* ── 3. la carta: una colonna sola, i piatti si accendono ─────────────────── */
.carta{text-align:center;max-width:46rem;margin:0 auto}
.cr-intro{color:var(--m);margin-bottom:3rem}
.cr-colonna{list-style:none;padding:0;display:grid;gap:2.4rem}
.cr-colonna li{display:grid;gap:.3rem;transition:opacity .6s,color .6s,text-shadow .6s}
.cr-n{font:400 clamp(1.9rem,1.4rem + 1.8vw,2.8rem)/1.05 var(--font-t)}
.cr-d{color:var(--m)}
.cr-p{font:400 1.3rem var(--font-t);font-style:italic;color:var(--candela)}
.mosso .cr-colonna li:not(.dentro){opacity:.18}
.mosso .cr-colonna li.dentro .cr-n{text-shadow:0 0 22px rgba(224,191,90,.35)}
.carta .nota{margin:2.6rem auto 0}

/* ── 4. il branzino, sul vino ─────────────────────────────────────────────── */
.branzino{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,5vw,5rem);align-items:center;
  background:var(--vino);color:var(--tovaglia);overflow:hidden;--m:#E3C9CF}
/* niente animazioni che muovono il cibo con lo scorrimento (voce Cowork 24/10 (3)): la foto sta ferma */
.br-foto img{width:100%;aspect-ratio:4/3;object-fit:cover}
.br-foto{overflow:hidden;border-radius:var(--r)}
.branzino h2{font-size:clamp(2.8rem,1.6rem + 4vw,5.4rem);font-style:italic}
.branzino p{max-width:42ch}
.br-nota{font-size:.82rem;color:#E3C9CF;margin-top:1rem}
.mosso .br-testo{opacity:0;transform:translateY(2rem);transition:opacity .9s,transform 1s cubic-bezier(.2,.7,.2,1)}
.mosso .br-testo.dentro{opacity:1;transform:none}

/* ── 5. la storia al buio, col fascio di luce che scende ──────────────────── */
.buio-s{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.bs-foto img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r);
  -webkit-mask:radial-gradient(ellipse 70% 45% at 50% calc(10% + var(--p,.6) * 80%),#000 30%,rgba(0,0,0,.25) 70%,rgba(0,0,0,.12));
  mask:radial-gradient(ellipse 70% 45% at 50% calc(10% + var(--p,.6) * 80%),#000 30%,rgba(0,0,0,.25) 70%,rgba(0,0,0,.12))}
.bs-motto{font:400 clamp(1.4rem,1.1rem + 1.2vw,2rem)/1.3 var(--font-t);font-style:italic;color:var(--candela);margin-bottom:1.2rem}
.bs-testo p+p{margin-top:.8rem}

/* ── 6. dalla sala: due foto, una per meta' ───────────────────────────────── */
.meta{display:grid;grid-template-columns:1fr 1fr;padding:0;gap:0}
.meta figure{position:relative;overflow:hidden}
.meta img{width:100%;height:min(86svh,52rem);object-fit:cover}
.meta figcaption{position:absolute;left:1rem;bottom:1rem;font-size:.82rem;background:rgba(14,12,10,.75);padding:.3rem .7rem;border-radius:99px}
.mosso .meta figure picture{transition:clip-path 1.4s cubic-bezier(.6,0,.2,1)}
.mosso .meta figure:not(.dentro) picture{clip-path:inset(0 50% 0 50%)}

/* ── 7. gli orari: «solo la sera» ─────────────────────────────────────────── */
.sera{text-align:center}
.sera h2{font-size:clamp(4.4rem,1.6rem + 11vw,13rem);line-height:.85;margin-bottom:2.4rem}
.sera h2 em{color:var(--candela)}
.mosso .sera h2 em{transition:color 1.6s ease,text-shadow 1.6s ease}
.mosso .sera h2:not(.dentro) em{color:#3a3328}
.mosso .sera h2.dentro em{text-shadow:0 0 40px rgba(224,191,90,.4)}
.se-giorni{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2rem;margin-bottom:1.4rem}
.se-giorni li{display:grid;font:400 1.4rem var(--font-t)}
.se-giorni span{font:400 .82rem var(--font-b);color:var(--m)}
.se-nota{font-size:.85rem;color:var(--m);margin-bottom:.4rem}
.sera .avviso-orari{margin-inline:auto}

/* ── 8. dove: il lampione ─────────────────────────────────────────────────── */
.lampione{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:end;background:#0a0908}
.lp-lampione{width:min(100%,15rem);justify-self:center;overflow:visible}
.lp-staffa{fill:none;stroke:#3b352d;stroke-width:6;stroke-linecap:round}
.lp-lanterna{fill:#1d1915;stroke:#4a4238;stroke-width:3}
.lp-fiamma{fill:#ffd98a;filter:drop-shadow(0 0 10px #ffb347)}
.mosso .lp-lampione .lp-cono,.mosso .lp-lampione .lp-fiamma{transition:opacity 1.2s ease .3s}
.mosso .lp-lampione:not(.dentro) .lp-cono,.mosso .lp-lampione:not(.dentro) .lp-fiamma{opacity:0}
.lp-vicino{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:1rem 2.6rem;margin:1.4rem 0}
.lp-vicino b{display:block;font:400 2.2rem/1 var(--font-t);color:var(--candela)}
.lp-maps .maps{display:inline-block;padding:.4rem 0;color:var(--candela)}
.gdpr{font-size:.82rem;color:var(--m);max-width:52ch}

/* ── 9. prenota: la fila di candele ───────────────────────────────────────── */
.candele{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:2.5rem clamp(2rem,6vw,6rem);align-items:start;background:var(--carta)}
.cn-testo p{max-width:38ch}
.cn-tel{margin-top:1rem;font-weight:600}
.candele a{color:var(--tovaglia)}
.cd-fila{border:0;margin:0 0 .6rem;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:end}
.cd-fila legend{font-weight:600;margin-bottom:1rem;padding:0}
.cd{display:grid;justify-items:center;gap:.5rem;cursor:pointer;font-weight:400}
.cd input{position:absolute;opacity:0;width:1px;height:1px}
.cd-cera{position:relative;width:1.4rem;height:4.4rem;border-radius:3px 3px 2px 2px;background:linear-gradient(90deg,#e8dfcf,#fffaf0 40%,#d9cfbd);margin-top:2.2rem}
.cd-cera::before{content:"";position:absolute;left:50%;top:-.55rem;width:2px;height:.6rem;margin-left:-1px;background:#3a3328}
.cd-cera i{position:absolute;left:50%;top:-2.1rem;width:1rem;height:1.6rem;margin-left:-.5rem;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;
  background:radial-gradient(ellipse at 50% 70%,#fff6d8 0 20%,#ffd36e 45%,#ff9a2e 75%,transparent 76%);opacity:0;transform:scale(.4);
  transform-origin:50% 100%;transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.cd input:checked+.cd-cera i{opacity:1;transform:none;animation:tremola 2.6s ease-in-out infinite}
@keyframes tremola{50%{transform:scale(.94,1.06) rotate(1.5deg)}}
.cd input:focus-visible+.cd-cera{outline:3px solid var(--candela);outline-offset:6px}
.cd-ora{font:400 1.15rem var(--font-t)}
.cd input:checked~.cd-ora{color:var(--candela)}

/* ── il piede: una riga sola, con la fiammella ────────────────────────────── */
.piede-carlo{text-align:center;padding:clamp(2.5rem,6vw,4rem) var(--bordo) 2rem;border-top:1px solid var(--l)}
.pcl-riga{font:400 clamp(1.3rem,1rem + 1vw,1.8rem) var(--font-t);font-style:italic;margin-bottom:1.2rem}
.pcl-fiamma{display:inline-block;width:.7rem;height:1.1rem;margin-right:.7rem;vertical-align:-.05em;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;
  background:radial-gradient(ellipse at 50% 70%,#fff6d8 0 20%,#ffd36e 45%,#ff9a2e 75%,transparent 76%);animation:tremola 2.6s ease-in-out infinite}
.pcl-voci{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem 1.8rem;margin-bottom:1.4rem}
.pcl-voci a{text-decoration:none;color:var(--tovaglia);padding:.35rem 0}
.piede-carlo .legale{justify-items:center}
.piede-carlo .legale a{color:var(--tovaglia)}

@media(max-width:900px){
  .branzino,.buio-s,.lampione,.candele{grid-template-columns:1fr}
  .meta{grid-template-columns:1fr}
  .meta img{height:60svh}
  .lp-lampione{width:9rem}
}