/* Ragno D'Oro — landing mobile «Club Londinese»
   Nero legno scuro, sabbia, oliva solo per filetti, rombi e puntini guida. */

@font-face{font-family:"Playfair Display SC";src:url(assets/fonts/PlayfairDisplaySC-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(assets/fonts/CormorantGaramond-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(assets/fonts/CormorantGaramond-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(assets/fonts/CormorantGaramond-500i.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}

:root{
  --nero:#000;
  --sabbia:#e4d4bb;
  --oliva:#738122;
  --bianco:#edf7f3;
  --tenue:rgba(228,212,187,.55);
  --nav:46px;
  --titoli:"Playfair Display SC","Playfair Display",Georgia,serif;
  --testo:"Cormorant Garamond",Garamond,Georgia,serif;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--nav);
  -webkit-text-size-adjust:100%;
  background:var(--nero);
}
body{
  margin:0;
  background:var(--nero);
  color:var(--sabbia);
  font-family:var(--testo);
  font-weight:500;
  font-size:19px;
  line-height:1.2;
  font-variant-numeric:lining-nums;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,ul,li{margin:0;padding:0}
ul{list-style:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--sabbia);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ───── Cornice «club»: doppio filetto con angoli tagliati a 45° ───── */
.club{position:relative;max-width:460px;margin:0 auto;min-height:100vh;background:var(--nero)}
.club::before,.club::after{content:"";position:absolute;pointer-events:none;z-index:3;border:1px solid var(--sabbia)}
.club::before{
  inset:10px;
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
}
.club::after{
  inset:17px;border-width:.5px;
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
}
.ang{position:absolute;width:56px;height:56px;z-index:3;pointer-events:none;overflow:visible}
.ang.tl{top:0;left:0}
.ang.tr{top:0;right:0;transform:scaleX(-1)}
.ang.bl{bottom:0;left:0;transform:scaleY(-1)}
.ang.br{bottom:0;right:0;transform:scale(-1)}

/* ───── Testata ───── */
.testata{position:relative;padding:84px 34px 0;text-align:center}
.logo-wrap{position:relative;width:74%;margin:0 auto}
.logo-wrap img{display:block;width:100%;height:auto}
.logo-ph{display:block;font-family:var(--titoli);font-size:30px;letter-spacing:.12em;color:var(--sabbia);padding:10px 0}

/* il ragno cala una sola volta sul filo, sopra l'ultima «o» del logo */
.cala{
  position:absolute;left:93%;top:-67px;width:1px;height:41px;margin-left:-.5px;
  background:var(--oliva);
  animation:cala 2.8s .4s cubic-bezier(.22,.8,.24,1) both;
}
.cala svg{position:absolute;left:50%;top:100%;width:22px;height:19px;margin-left:-11px;overflow:visible}
@keyframes cala{from{height:0}to{height:41px}}

.tag{
  margin-top:26px;display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--titoli);font-size:10.5px;letter-spacing:.24em;white-space:nowrap;
}
.tag i{display:block;width:24px;height:1px;background:var(--oliva)}

.titolo-menu{
  margin-top:56px;display:flex;align-items:center;justify-content:center;gap:16px;
  font-family:var(--titoli);font-weight:400;font-size:28px;line-height:1;letter-spacing:.3em;text-indent:.3em;
}
.titolo-menu b{display:block;width:6px;height:6px;background:var(--oliva);transform:rotate(45deg);flex:none}
.doppio{height:4px;margin-top:16px;border-top:1px solid var(--sabbia);border-bottom:.5px solid var(--sabbia)}

/* ───── Indice sticky ───── */
.indice{
  position:sticky;top:0;z-index:6;height:var(--nav);margin:22px 24px 0;
  background:var(--nero);
  border-bottom:.5px solid rgba(228,212,187,.38);
}
.scorri{
  position:relative;height:100%;display:flex;align-items:center;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.scorri::-webkit-scrollbar{display:none}
.scorri a{
  position:relative;flex:none;height:100%;display:flex;align-items:center;
  padding:0 15px;
  font-family:var(--titoli);font-size:12px;letter-spacing:.2em;white-space:nowrap;
  color:var(--tenue);
  transition:color .35s ease;
}
.scorri a+a::before{
  content:"";position:absolute;left:-2px;top:50%;width:4px;height:4px;margin-top:-2px;
  background:var(--oliva);transform:rotate(45deg);
}
.scorri a::after{
  content:"";position:absolute;left:15px;right:calc(15px - .2em);bottom:-1px;height:2px;
  background:var(--oliva);transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.3,.7,.2,1);
}
.scorri a[aria-current="true"]{color:var(--sabbia)}
.scorri a[aria-current="true"]::after{transform:scaleX(1)}

/* ───── Corpo ───── */
.corpo{padding:0 34px}
.coperto{margin-top:34px}
.sezione{padding-top:44px}
.coperto+.sezione{padding-top:30px}
.sez-titolo{
  font-family:var(--titoli);font-weight:400;font-size:19px;line-height:1.25;
  letter-spacing:.26em;text-indent:.26em;text-align:center;
}
.sez-nota{margin-top:6px;text-align:center;font-style:italic;font-size:15px;color:var(--bianco);letter-spacing:.03em}
.orn{display:flex;align-items:center;justify-content:center;gap:10px;margin:13px 0 28px}
.orn u{display:block;width:46px;height:1px;background:var(--oliva)}
.orn b{display:block;width:5px;height:5px;background:var(--oliva);transform:rotate(45deg)}

.voce{margin-bottom:23px}
.riga{display:flex;align-items:baseline;gap:8px}
.nome{
  flex:0 1 auto;min-width:0;
  font-family:var(--testo);font-weight:500;font-size:19.5px;line-height:1.15;
  overflow-wrap:break-word;hyphens:auto;
}
.guida{flex:1 1 14px;min-width:14px;border-bottom:2px dotted var(--oliva);transform:translateY(-.26em)}
.prezzi{flex:none;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 14px;text-align:right}
.prezzo{font-weight:600;font-size:19px;white-space:nowrap}
.eti{font-style:italic;font-weight:500;font-size:14.5px;color:var(--bianco);margin-right:.4em;letter-spacing:.02em}
.all{
  margin-left:.4em;vertical-align:super;line-height:0;
  font-family:var(--testo);font-weight:600;font-size:.6rem;letter-spacing:.08em;color:var(--tenue);
}
.ing,.nota{
  margin-top:3px;max-width:88%;
  font-style:italic;font-weight:500;font-size:14.5px;line-height:1.25;letter-spacing:.03em;color:var(--bianco);
}
.ing+.nota{margin-top:1px}

/* ───── Piede ───── */
.piede{padding:58px 34px 66px;text-align:center}
.piede .orn{margin:0 0 30px}
.piede .orn svg{width:20px;height:17px;flex:none;overflow:visible}
.legenda{
  display:grid;grid-template-columns:1fr 1fr;gap:7px 20px;text-align:left;
  font-size:14.5px;line-height:1.2;
}
.legenda li{display:flex;gap:9px;align-items:baseline}
.legenda b{flex:none;width:1.1em;text-align:right;font-family:var(--titoli);font-weight:400;font-size:12px;color:var(--tenue)}
.avvisi{margin-top:24px;font-style:italic;font-size:15px;line-height:1.35;color:var(--bianco);letter-spacing:.03em}
.avvisi p+p{margin-top:4px}
.contatti{margin-top:40px;font-size:17px;line-height:1.45}
.contatti .nome-locale{font-family:var(--titoli);font-size:15px;letter-spacing:.22em;text-indent:.22em;margin-bottom:10px}
.contatti .orari{white-space:pre-line;margin-top:8px}
.contatti a{border-bottom:1px solid rgba(115,129,34,.8)}
.social{
  margin-top:20px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 0;
  font-family:var(--titoli);font-size:11.5px;letter-spacing:.2em;
}
.social a{border:0;padding:4px 14px;position:relative}
.social a+a::before{
  content:"";position:absolute;left:-2px;top:50%;width:4px;height:4px;margin-top:-2px;
  background:var(--oliva);transform:rotate(45deg);
}

/* ───── Movimento: poco e discreto ───── */
.js .sezione .orn u{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.3,.7,.2,1)}
.js .sezione .orn u:first-child{transform-origin:right}
.js .sezione .orn u:last-child{transform-origin:left}
.js .sezione.vista .orn u{transform:scaleX(1)}

@media (min-width:480px){
  body{font-size:20px}
}
@media (max-width:359px){
  .testata{padding-inline:26px}
  .corpo,.piede{padding-inline:28px}
  .nome{font-size:18.5px}
  .prezzo{font-size:18px}
  .tag{font-size:9.5px;gap:8px}
  .tag i{width:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cala{animation:none}
  *,*::before,*::after{transition:none!important}
  .js .sezione .orn u{transform:none}
}