/* Modello E (come the-butter) — stile comune a tutte le pagine del modello. Dalla bozza R6 del 16–17/10/2026. */
/* E — come the-butter.com: schermo blu pieno col nome spaziato e la foto che sale sopra il nome (il loro cucchiaio),
   About blu con un motivo ripetuto ai lati, Menu su giallo burro con piatti su blocchi di colore pieno e pillola col nome
   inglese, nastro gigante del nome che scorre, Information e Access. Colori, foto e testi di Maison. */
:root{--butter:#fbefc0;--pat:#2a73a8}
html{background:var(--butter);scroll-padding-top:84px}

/* Intestazione fissa: logo tondo e una pillola su una fascia blu. Sull'eroe blu la fascia non si vede; più giù i contenuti
   passano sotto la fascia, mai sotto i pulsanti. */
.hd{position:fixed;left:0;right:0;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--navy)}
.hd a{pointer-events:auto}
.hd .home{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--navy);box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.hd .home img{width:30px;height:auto}
.hd nav{display:flex;gap:8px}
.hd nav a{display:grid;place-items:center;min-height:44px;padding:0 16px;border-radius:99px;background:var(--navy);color:#fff;font-size:13px;font-weight:700;text-decoration:none;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.hd nav a.y{background:var(--yellow);color:var(--deep)}
.hd nav .wide{display:none}
/* Come le pillole di the-butter: al passaggio del mouse si riempiono di bianco. */
@media (hover:hover){.hd nav a{transition:background-color .25s,color .25s}.hd nav a:hover{background:#fff;color:var(--deep)}}

/* Apertura: blu pieno, nome spaziato, slogan; poi la foto sale sopra il nome. Nessuna attesa: il nome c'è subito. */
.hero{position:relative;display:grid;align-content:center;justify-items:center;min-height:100svh;padding:90px 20px 0;overflow:hidden;background:var(--navy);color:#fff}
.mark{position:relative;z-index:1;display:grid;justify-items:start;margin-top:-18svh}
.mark h1{font:600 clamp(46px,14vw,150px)/1.08 Jost,sans-serif;letter-spacing:.12em}
.mark h1 span{display:block}
.mark .by{margin-top:10px;font:600 clamp(9px,2.5vw,14px)/1.4 Jost,sans-serif;letter-spacing:.24em}
.mark .slo{margin-top:16px;font-size:clamp(13px,3.6vw,20px);letter-spacing:.24em}
/* La foto scontornata ha bordi dritti a destra (resti del ritaglio): si taglia lì e quel taglio coincide col bordo dello schermo;
   il coperchio tagliato in alto sfuma nel blu. */
.hero .lift{position:absolute;z-index:2;right:0;bottom:-2px;width:min(110vw,640px);height:auto;transform:translateX(14%);clip-path:inset(0 14% 0 0);-webkit-mask-image:linear-gradient(transparent,#000 16%);mask-image:linear-gradient(transparent,#000 16%)}
.js .hero .lift{animation:lift 1.3s var(--ease) .25s both}
@keyframes lift{from{opacity:.2;transform:translate(14%,28%)}}

/* About: blu, motivo della tenda del furgone ripetuto ai lati, testo al centro. */
.about{position:relative;padding:86px 70px 90px;background:var(--navy);color:#fff;text-align:center}
.about::before,.about::after{content:"";position:absolute;top:0;bottom:0;width:52px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='84' fill='none' stroke='%232a73a8' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M8 14h36v12c-3 5-6 5-9 0c-3 5-6 5-9 0c-3 5-6 5-9 0c-3 5-6 5-9 0z'/%3E%3Cpath d='M12 34v26h28V34'/%3E%3C/svg%3E") 0 0/52px 84px repeat-y}
.about::before{left:8px}
.about::after{right:8px;background-position:0 42px}
.ul{display:inline-block;font:500 20px/1.2 Jost,sans-serif;letter-spacing:.02em;text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:2px}
.about h2{margin-top:44px;font-size:clamp(22px,6.4vw,34px);line-height:1.6}
.about p{margin-top:34px;font-size:13.5px;line-height:2.3;letter-spacing:.06em}
.wide-photo{display:block;height:clamp(240px,64vw,560px);overflow:hidden;background:var(--navy)}
.wide-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}

/* Menu: giallo burro, schede con la foto su un blocco di colore pieno. */
.menu{padding:80px 20px 96px;text-align:center;color:var(--deep)}
.cards{display:grid;gap:26px;max-width:1120px;margin:48px auto 0;text-align:left}
.cards a{display:block;border:1.5px solid var(--deep);text-decoration:none;background:var(--butter);transition:transform .5s var(--ease)}
.blk{display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden}
/* Le foto scontornate escono dal fotogramma originale (coperchio, mani): a tutta larghezza in un blocco 4:3 quei tagli coincidono coi bordi del blocco. */
.blk img{width:100%;height:auto;transition:transform .9s var(--ease)}
.blk.n{background:var(--navy)}.blk.y{background:var(--yellow)}.blk.c{background:var(--cyan)}
.blk .drinks{display:grid;gap:6px;color:var(--ink);font-size:17px;text-align:center}
.blk .drinks span{font:500 15px/1 Fraunces,serif}
.lbl{position:relative;display:grid;justify-items:center;gap:12px;padding:18px 18px 22px}
.pill{display:grid;justify-items:center;width:100%;max-width:300px;padding:9px 14px;border:1.5px solid var(--deep);border-radius:99px;font-family:Jost,sans-serif;line-height:1.25}
.pill small{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.pill b{font-size:17px;font-weight:600}
.lbl h3{font-size:clamp(20px,5.6vw,26px);line-height:1.3;text-align:center}
.lbl h3 small{display:block;font-size:12px;letter-spacing:.1em}
.lbl .yen{font:500 16px/1 Fraunces,serif}
.lbl::after{content:"›";position:absolute;right:14px;bottom:10px;font-size:26px;line-height:1}
.cards a:hover .blk img{transform:scale(1.04)}

/* Il nastro del nome: il loro scorre da solo in loop; qui scorre con lo scroll e si ferma quando ti fermi.
   Fermo senza JS e col movimento ridotto. */
.tape{overflow:hidden;padding:30px 0 26px;background:#fff;color:var(--navy)}
.tape .row{display:flex;width:max-content;white-space:nowrap}
.tape .row span{padding-right:.6em}
.tape .a{font:600 clamp(64px,17vw,170px)/1 Jost,sans-serif;letter-spacing:.1em}
.tape .b{margin-top:10px;font:600 clamp(14px,3.6vw,28px)/1 Jost,sans-serif;letter-spacing:.3em}
.js .tape .a{transform:translateX(calc(var(--t,0) * -30%))}
.js .tape .b{transform:translateX(calc(-30% + var(--t,0) * 30%))}

/* Information (blu) e Access (giallo). */
.info{padding:76px 22px 70px;background:var(--navy);color:#fff;text-align:center}
.news{max-width:640px;margin:36px auto 0;text-align:left}
.news li{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.28)}
.news time,.news .d{display:block;font:500 13px/1.4 Jost,sans-serif;letter-spacing:.06em}
.news b{display:block;margin-top:4px;font-size:14.5px}
.news .sample{color:#fff}
.access{padding:76px 22px 90px;text-align:center;color:var(--deep)}
.acc{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;max-width:520px;margin:36px auto 0;text-align:left;font-size:14px}
.acc dt{font:500 14px/1.6 Jost,sans-serif}
.map{display:grid;place-items:center;max-width:640px;height:180px;margin:26px auto 0;border:1.5px dashed rgba(3,69,115,.5);font-weight:700}
.go{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.go a{display:grid;place-items:center;min-width:200px;min-height:52px;padding:0 22px;border-radius:99px;font-weight:700;text-decoration:none}
.go .p{background:var(--navy);color:#fff}
.go .o{border:1.5px solid var(--deep)}
.foot{padding:34px 20px 40px;background:var(--navy);color:#fff;text-align:center}
.foot p{font:600 20px/1.2 Jost,sans-serif;letter-spacing:.2em}
.foot small{display:block;margin-top:8px;font-size:11px;letter-spacing:.1em}

@media (min-width:760px){
  html{scroll-padding-top:96px}
  .hd{padding:18px 26px}
  .hd nav .wide{display:grid}
  /* Su schermo largo il nome a sinistra e la foto a destra, come il cucchiaio accanto a THE BUTTER: la foto non copre lo slogan. */
  .hero{justify-items:start;padding-left:8vw}
  .mark{margin-top:0}
  .mark h1{font-size:clamp(46px,7.4vw,112px)}
  .hero .lift{width:min(50vw,680px)}
  .about{padding:120px 22vw 120px}
  .about::before{left:6vw;box-shadow:80px 0 0 transparent}
  .about::after{right:6vw}
  .cards{grid-template-columns:repeat(3,1fr)}
  .menu,.info,.access{padding-top:110px;padding-bottom:110px}
}
@media (prefers-reduced-motion:reduce){.tape .row{transform:none}}
/* Piede blu: contorno di focus giallo come sulle altre zone blu. */
.foot :focus-visible{outline-color:var(--yellow)}