/* Modello D (come es-cinnamon) — stile comune a tutte le pagine del modello. Dalla bozza R6 del 16–17/10/2026. */
/* D — come es-cinnamon.cafe: carta crema con grana, timbro rotondo, lo stesso rito in apertura di ogni sezione
   (scritta curva, titolo inglese spaziato tra due «=», firma corsiva, titolo giapponese), piatti scontornati sparsi
   ai bordi, sezione blu a cupola, linguetta KITCHEN CAR (fissa da 900 px). Con foto, logo, colori e testi di Maison. */
:root{--cream:#fbf5ea;--gold:#e9a800;--bar:62px}
html{background:var(--cream);scroll-padding-bottom:calc(var(--bar) + 16px)}
body{padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom));background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}


/* Timbro d'apertura: entra in 0,8 s, nessuna attesa. L'anello di testo fa un quarto di giro all'arrivo e poi gira con lo scroll
   (il loro gira da solo in loop: qui niente movimento continuo che non si può fermare). */
.hero{position:relative;display:grid;place-items:center;align-content:center;gap:22px;min-height:calc(100svh - var(--bar));padding:40px 20px 70px;text-align:center}
.stamp{position:relative;width:min(76vw,330px);aspect-ratio:1}
.ring{position:absolute;inset:0;width:100%;height:100%}
.js .ring{rotate:calc(var(--sy,0) * .2deg);animation:spinIn 2.4s var(--ease) both}
/* Il quadrato dell'anello che gira è più largo del cerchio: gli angoli vuoti non devono allargare la pagina. */
.hero{overflow-x:clip}
.ring text{font:600 12.5px/1 Jost,sans-serif;letter-spacing:3.4px;fill:var(--deep)}
.disc{position:absolute;inset:13%;display:grid;place-items:center;border-radius:50%;background:var(--navy);box-shadow:inset 0 0 0 5px var(--navy),inset 0 0 0 7px rgba(255,255,255,.75)}
.disc img{width:62%;height:auto}
.hero h1{font-size:19px;line-height:1.6;color:var(--deep)}
.hero .tag{font:600 11px/1 Jost,sans-serif;letter-spacing:.34em;color:var(--deep)}
.scroll{position:absolute;left:50%;bottom:18px;display:grid;justify-items:center;gap:6px;transform:translateX(-50%);font:600 10px/1 Jost,sans-serif;letter-spacing:.3em;color:var(--deep)}
.scroll i{display:block;width:1px;height:34px;background:linear-gradient(var(--deep) 50%,rgba(3,69,115,.2) 50%);background-size:1px 68px}
.js .scroll i{animation:drip 2.2s var(--ease) 2}
.js .stamp{animation:stampIn .8s var(--ease) both}
@keyframes stampIn{from{opacity:.3;transform:scale(.92)}}
@keyframes spinIn{from{transform:rotate(-90deg)}}
@keyframes drip{from{background-position:0 -34px}to{background-position:0 34px}}

/* Il rito: uguale in apertura di ogni sezione. */
.rite{position:relative;display:grid;justify-items:center;width:fit-content;max-width:100%;margin:0 auto 18px;text-align:center}
.rite .arc{width:190px;height:34px;margin-bottom:-4px}
.rite .arc text{font:600 10px/1 Jost,sans-serif;letter-spacing:3.5px;fill:var(--deep)}
.big{display:flex;align-items:center;gap:14px;font:400 clamp(26px,7.8vw,46px)/1.05 Jost,sans-serif;letter-spacing:.16em;color:var(--deep);margin-right:-.16em}
.big .eq{flex:0 0 auto;width:24px;height:7px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
.big .w{white-space:nowrap}
/* KITCHEN CAR deve stare in una riga anche a 320 px. */
@media (max-width:380px){.big{gap:9px}.big .eq{width:16px}}
.sig{justify-self:end;margin:-.32em -.25em -.12em 0;font-size:clamp(34px,10vw,52px);line-height:1;color:var(--gold);transform:rotate(-6deg);pointer-events:none}
.sub{margin-top:8px;font:700 9.5px/1.5 Jost,sans-serif;letter-spacing:.32em;color:var(--deep)}
.on-navy .rite .arc text,.on-navy .big,.on-navy .sub{color:#fff;fill:#fff}
/* Lettere che entrano una alla volta: partono da 0,6 (contrasto 3,3:1 su crema, 4:1 sul blu), la firma corsiva decorativa da 0,2.
   Senza JS o col movimento ridotto sono già ferme e piene. */
.js .rite .w span{display:inline-block;opacity:.6;transform:translateY(.28em);transition:opacity .5s ease,transform .7s var(--ease);transition-delay:calc(var(--i) * 70ms)}
.js .rite.in .w span{opacity:1;transform:none}
.js .rite .sig{opacity:.2;transform:rotate(-6deg) translateX(10px);transition:opacity .6s ease .45s,transform .9s var(--ease) .45s}
.js .rite.in .sig{opacity:1;transform:rotate(-6deg)}

.sec{position:relative;padding:72px 22px}
.sec h2{font-size:21px;line-height:1.5;color:var(--deep);text-align:center}
.sec .txt{max-width:30em;margin:14px auto 0;font-size:14px;line-height:2;text-align:center}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:150px;min-height:44px;padding:0 26px;border:1.5px solid var(--deep);border-radius:99px;font:600 12px/1 Jost,sans-serif;letter-spacing:.28em;color:var(--deep);text-decoration:none;background:rgba(255,255,255,.5)}
.pill.y{border-color:var(--yellow);background:var(--yellow);font-family:inherit;letter-spacing:.08em;font-size:14px;font-weight:700}
.center{display:flex;justify-content:center;margin-top:26px}

/* ABOUT: foto in alto, titolo a sinistra come il loro. */
.about{padding-top:0}
.about figure{margin:0 -22px;height:clamp(220px,58vw,420px);overflow:hidden}
.about figure img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.dots{display:flex;justify-content:center;gap:12px;margin:18px 0 26px}
.dots i{width:6px;height:6px;border-radius:50%;background:rgba(3,69,115,.25)}
.dots i:nth-child(3){background:var(--gold);transform:rotate(45deg);border-radius:1px}
.about .lab{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--deep)}
.about .lab b{color:var(--gold)}
.about .rite{justify-items:start;margin:8px 0 18px;text-align:left}
.about .big{display:block;margin:0;font-size:clamp(28px,8.4vw,44px);line-height:1.2}
.about .sig{justify-self:start;margin-left:3.4em}
.about h2,.about .txt{text-align:left;margin-left:0}

/* MENU: il collage di piatti scontornati, tagliati ai bordi. */
.menu{padding:200px 22px 230px;overflow:hidden}
.cut{position:absolute;height:auto;pointer-events:none;filter:drop-shadow(0 14px 18px rgba(60,40,10,.18))}
.cut.a{width:220px;left:-58px;top:6px;transform:rotate(-10deg)}
.cut.b{width:190px;right:-52px;top:30px;transform:rotate(9deg)}
.cut.c{width:230px;left:-54px;bottom:8px;transform:rotate(7deg)}
.cut.d{width:150px;right:-30px;bottom:40px;transform:rotate(-8deg)}
.cut.m{width:62px;right:96px;bottom:150px;transform:rotate(24deg);filter:none}
/* Le tre foto scontornate escono dal fotogramma originale (coperchio, mani): bordi sfumati nella carta, nessun taglio dritto a vista. */
.cut.a,.cut.b,.cut.c{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 68%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 68%,transparent 100%)}
.js .cut{opacity:.15;translate:0 24px;transition:opacity .9s ease,translate 1.1s var(--ease)}
.js .menu.in .cut{opacity:1;translate:0 0}
.price{display:grid;gap:8px;max-width:22em;margin:18px auto 0;font-size:14px}
.price li{display:flex;align-items:baseline;gap:8px}
.price li::after{content:"";order:2;flex:1;border-bottom:1px dotted rgba(3,69,115,.4)}
.price b{order:1;font-weight:700}
.price span{order:3;font:500 16px/1 Fraunces,serif;color:var(--deep);white-space:nowrap}
.price small{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--cyan-ink)}

/* KITCHEN CAR e INFO: sezione blu con la cupola, come la loro. */
.navy{position:relative;margin-top:60px;padding:0 0 70px;background:var(--navy);color:#fff}
.navy::before{content:"";position:absolute;left:50%;top:-58px;width:min(78vw,540px);height:120px;transform:translateX(-50%);border-radius:50% 50% 0 0/100% 100% 0 0;background:var(--navy)}
.navy .inner{position:relative;padding:0 22px}
.navy h2{color:#fff;text-align:center}
.navy .card,.navy .photo{width:100%}
.navy .sig{color:var(--yellow)}
.card{max-width:520px;margin:22px auto 0;padding:22px 20px 24px;border-radius:6px;background:#fff;color:var(--navy)}
.card h3{font-size:18px;color:var(--deep)}
.card .k{display:block;margin-top:14px;font:700 10px/1.4 Jost,sans-serif;letter-spacing:.32em;color:var(--cyan-ink)}
.card p{font-size:14px}
.card .note{margin-top:12px;font-size:12.5px;line-height:1.6}
.photo{max-width:520px;margin:22px auto 0;border-radius:6px;overflow:hidden}
.photo img{width:100%;height:auto}
.map{display:grid;place-items:center;height:150px;margin-top:12px;border:1.5px dashed rgba(7,83,134,.45);border-radius:6px;font-size:13px;font-weight:700}
.navy .center{margin-top:22px}
.navy + .navy{margin-top:0;padding-top:40px}
.navy + .navy::before{display:none}
.foot{display:grid;justify-items:center;gap:6px;padding:46px 20px 36px;text-align:center}
.foot img{width:76px;height:auto}
.foot .py{font-size:30px;color:var(--deep)}
.foot small{font-size:11px;letter-spacing:.1em}

/* Barra in basso col logo tondo (come la loro) e linguetta KITCHEN CAR. */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:auto 1fr 1fr 1fr;align-items:center;gap:4px;height:calc(var(--bar) + env(safe-area-inset-bottom));padding:0 10px env(safe-area-inset-bottom);background:#fff;box-shadow:0 -1px 0 rgba(3,69,115,.12)}
.bar .home{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--navy)}
.bar .home img{width:30px;height:auto}
.bar a:not(.home){display:grid;place-items:center;min-height:46px;font-size:12px;font-weight:700;text-decoration:none;color:var(--deep);text-align:center;line-height:1.3}
.truck{position:absolute;right:0;top:calc(100svh - var(--bar) - 112px);z-index:51;display:grid;justify-items:center;gap:2px;width:84px;padding:9px 6px 8px 10px;border-radius:18px 0 0 18px;background:#fff;box-shadow:0 6px 18px rgba(3,40,70,.18);text-decoration:none;color:var(--deep)}
.truck img{width:56px;height:auto}
/* Il furgone si muove solo mentre scorri: ti fermi, si ferma. */
.js.scrolling .truck img{animation:drive .9s ease-in-out infinite}
.truck b{font:700 8px/1.2 Jost,sans-serif;letter-spacing:.2em}
.truck span{font-size:11px;font-weight:700;line-height:1.2}
@keyframes drive{0%,100%{transform:translateX(-3px)}25%{transform:translateX(0) translateY(-1px)}50%{transform:translateX(3px)}75%{transform:translateX(0) translateY(-1px)}}
.side{display:none}

@media (min-width:900px){
  :root{--bar:0px}
  html{scroll-padding-bottom:110px}
  body{padding:0 0 0 58px}
  
  .bar{display:none}
  /* Colonna a sinistra col logo e linguetta gialla 出店のご相談, come la loro RESERVE. */
  .side{position:fixed;left:0;top:0;bottom:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:58px;padding:12px 0 0;background:#fff;box-shadow:1px 0 0 rgba(3,69,115,.1)}
  .side .home{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--navy)}
  .side .home img{width:28px;height:auto}
  .side nav{display:grid;gap:18px;writing-mode:vertical-rl;font-size:13px;font-weight:700;letter-spacing:.14em}
  .side nav a{text-decoration:none;color:var(--deep)}
  .side .res{display:grid;place-items:center;width:100%;padding:16px 0;background:var(--yellow);color:var(--deep);writing-mode:vertical-rl;font-size:13px;font-weight:700;letter-spacing:.16em;text-decoration:none}
  .truck{position:fixed;top:auto;bottom:22px}
  .hero{min-height:100svh}
  .stamp{width:340px}
  .hero h1{font-size:30px}
  .sec{padding:110px 6vw}
  .about{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:0;padding:0 0 0 0}
  .about figure{margin:0;height:min(76vh,640px)}
  .about .dots{display:none}
  .about .copy{position:relative;margin-left:-70px;padding:46px 44px;background:#fff;box-shadow:0 10px 40px rgba(60,40,10,.06)}
  .menu{padding:150px 6vw}
  .menu .copy{max-width:520px;margin:0 auto}
  .cut.a{width:360px;left:-70px;top:auto;bottom:40px}
  .cut.b{width:300px;right:-40px;top:20px}
  .cut.c{width:300px;left:6%;top:-40px;bottom:auto}
  .cut.d{width:250px;right:4%;bottom:-20px}
  .cut.m{width:90px;right:30%;bottom:40px}
  .navy::before{top:-90px;height:180px}
  .navy .inner{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;max-width:1080px;margin:0 auto;padding:0 6vw}
  .navy .rite,.navy h2,.navy .lead{grid-column:1/-1}
  .photo{margin-top:30px}
  .card{margin-top:30px}
  .navy .center{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.js .rite .w span,.js .rite .sig{opacity:1!important;transform:none;translate:none}.js .cut{opacity:1!important;translate:none}.js .rite .sig{transform:rotate(-6deg)}}