/* Modello H (come nougatshop) — stile comune a tutte le pagine del modello. Dalla bozza R6 del 16–17/10/2026. */
/* H — come nougatshop.jp: carta colorata con grana, logo piccolo in alto a sinistra, la frase in verticale che si scrive
   un carattere alla volta, paragrafi lenti e larghi, foto piene, la «lineup» numerata con il prodotto in una capsula
   di colore tenue, una scritta gigante sfocata da cui sale una foto rotonda, e una barra fissa in basso.
   Foto, logo, colori e testi di Maison. */
:root{--butter:#fbf0c9;--cap1:#fff3b0;--cap2:#d8eff1;--cap3:#fde7a6;--bar:56px;--top:74px}
html{background:var(--butter);scroll-padding-top:calc(var(--top) + 14px);scroll-padding-bottom:calc(var(--bar) + 18px)}
body{padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom));background:var(--butter) 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")}


/* Logo e お問い合わせ stanno su una fascia di carta fissa: ciò che scorre passa sotto la fascia, mai fra le lettere. */
.band{position:fixed;left:0;right:0;top:0;z-index:39;height:var(--top);background:inherit;box-shadow:0 1px 0 rgba(7,83,134,.08)}
/* Il logo sta in una piccola capsula burro: è la capsula dell'apertura, che si posa qui. */
.logo{position:fixed;left:12px;top:6px;z-index:40;display:grid;place-items:center;width:44px;height:62px;border-radius:999px;background:var(--cap1);box-shadow:inset 0 0 0 1px var(--navy)}
.logo img{width:34px;height:auto}
.pill{position:fixed;right:14px;top:15px;z-index:40;display:grid;place-items:center;min-height:44px;padding:0 18px;border-radius:99px;background:#fff;font-size:12.5px;font-weight:700;text-decoration:none;box-shadow:0 1px 0 rgba(7,83,134,.08)}

/* Prima schermata come la loro: una foto a capsula (alta sul telefono, larga sul desktop), il logo che la sfiora in alto
   a sinistra, la notizia in basso. La foto entra una volta, piano; il testo resta sotto, sulla carta. */
.stage{position:relative;min-height:100svh;padding:calc(var(--top) + 10px) 0 calc(var(--bar) + 100px)}
.tall{display:block;position:relative;width:min(76vw,420px);height:max(380px,calc(100svh - var(--bar) - 184px));margin:0 7vw 0 auto;border-radius:999px;overflow:hidden;background:var(--cap2)}
.tall img{width:100%;height:100%;object-fit:cover;object-position:40% 62%}
.js .tall img{animation:open 1.4s var(--ease) .1s both}
@keyframes open{from{opacity:.25;transform:scale(1.06)}}

/* La frase in verticale: i caratteri entrano uno alla volta da 0,65 (testo grande, contrasto 3,3:1 già durante l'entrata). */
.hero{position:relative;display:grid;place-items:center;min-height:80svh;padding:40px 18px 110px} /* seconda schermata: la frase segue la capsula senza un vuoto lungo */
.vert{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:20px}
.hero h1{writing-mode:vertical-rl;font-size:clamp(26px,7.4vw,40px);font-weight:500;line-height:1.5;letter-spacing:.2em}
.hero h1 .l2{display:block;margin-top:2.6em}
.hero .en{writing-mode:vertical-rl;font:400 12px/1 Jost,sans-serif;letter-spacing:.14em;margin-top:8px}
.js .hero h1 .c{opacity:.65;transition:opacity .9s ease;transition-delay:calc(var(--i)*70ms + .2s)}
.js .hero.in h1 .c{opacity:1}
.news{position:absolute;left:18px;bottom:calc(var(--bar) + 20px);display:grid;gap:4px;font-size:12px}
.news a{min-height:44px;display:inline-flex;align-items:center;border-bottom:1px solid currentColor;text-decoration:none;font-weight:700;width:max-content}

/* Paragrafi lenti, larghi: salgono piano; partono da 0,85 (contrasto 5:1, sopra il minimo AA). */
.say{padding:40px 30px 90px;max-width:560px;margin:0 auto}
.say p{font-size:13.5px;line-height:2.5;letter-spacing:.14em}
.say p+p{margin-top:2.2em}
.say .sign{font:500 12px/2.2 Jost,sans-serif;letter-spacing:.06em}
.js .say p{opacity:.85;translate:0 14px;transition:opacity 1s ease,translate 1.2s var(--ease)}
.js .say p.in{opacity:1;translate:0 0}

/* Foto piene, una sopra l'altra: due foto 4:3 sul telefono, due 4:5 affiancate sul desktop. */
.full{display:grid}
.full img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

/* Lineup. */
.lineup{padding:90px 24px 40px;max-width:1100px;margin:0 auto}
.lineup > header{text-align:center}
.lineup > header h2{font:500 22px/1.2 Jost,sans-serif;letter-spacing:.02em}
.lineup > header small{display:block;margin-top:8px;font-size:11px;letter-spacing:.2em}
.item{display:grid;gap:22px;margin-top:70px}
.cap{position:relative;display:grid;place-items:center;aspect-ratio:4/3;border-radius:30px;overflow:hidden}
/* Capsule 4:3 come le foto: coperchio e mani tagliati dal fotogramma originale finiscono sul bordo della capsula, non a metà.
   Entrando sale tutta la scheda; sfuma solo la foto, i testi e i prezzi restano pieni. */
.cap img{width:100%;height:auto}
.cap.t1{background:var(--cap1)}.cap.t2{background:var(--cap2)}.cap.t3{background:var(--cap3)}
.badge{position:absolute;left:14px;top:14px;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--yellow);font-size:11px;font-weight:700;line-height:1.3;text-align:center}
.cap .typo{display:grid;justify-items:center;gap:8px;text-align:center}
.cap .typo i{font:300 italic clamp(30px,9vw,46px)/1.05 Fraunces,serif}
.cap .typo span{font:400 22px/1 Fraunces,serif}
.name{display:grid;grid-template-columns:30px 1fr;align-items:baseline}
.name .n{font:400 11px/1 Jost,sans-serif}
.name b{font:500 19px/1.2 Jost,sans-serif;letter-spacing:.02em}
.name small{grid-column:2;margin-top:6px;font-size:10.5px;letter-spacing:.2em}
.label{justify-self:start;margin-left:30px;padding-bottom:6px;border-bottom:1.5px solid currentColor;font-size:14px;font-weight:700;letter-spacing:.12em}
.item ul{margin-left:30px;font-size:13px;line-height:2.3;letter-spacing:.1em}
.item li{display:flex;justify-content:space-between;gap:12px;max-width:360px}
.item li span{flex-shrink:0;white-space:nowrap;font:400 14px/2.3 Fraunces,serif;letter-spacing:0}
.js .item{translate:0 24px;transition:translate 1.2s var(--ease)}
.js .item.in{translate:0 0}
/* Sfuma solo la foto: fondo, scritta, prezzo e bollino della scheda restano pieni. */
.js .item .cap img{opacity:.15;transition:opacity 1s ease}
.js .item.in .cap img{opacity:1}
.drinks{margin:70px 0 0 30px;font-size:13px;line-height:2.3;letter-spacing:.1em}
.drinks h3{font:500 15px/1.4 Jost,sans-serif;margin-bottom:6px}
.drinks li{display:flex;justify-content:space-between;gap:12px;max-width:360px;letter-spacing:.04em}
.drinks li span{flex-shrink:0;white-space:nowrap;font:400 14px/2.3 Fraunces,serif;letter-spacing:0}
.more{display:inline-flex;align-items:center;min-height:44px;margin:34px 0 0 30px;border-bottom:1px solid currentColor;font-size:13px;font-weight:700;text-decoration:none}

/* Scritta gigante sfocata, foto rotonda che sale. */
.big{position:relative;overflow:hidden;margin-top:90px;padding:40px 0 0;background:#fdf6dc}
.big .word{font:700 clamp(64px,19vw,250px)/.92 Jost,sans-serif;letter-spacing:-.01em;color:rgba(7,83,134,.13);filter:blur(5px);padding:0 14px;white-space:nowrap}
.round{position:relative;width:min(70vw,360px);aspect-ratio:1/1;margin:-34% auto 0;border-radius:50%;overflow:hidden}
.round img{width:100%;height:100%;object-fit:cover}
.js .round{translate:0 40%;transition:translate 1.6s var(--ease)}
.js .big.in .round{translate:0 0}
.info{padding:70px 30px 50px;background:#fdf6dc;text-align:center}
.info h2{font-size:20px;letter-spacing:.14em;font-weight:500}
.info p{margin-top:16px;font-size:13px;line-height:2.2;letter-spacing:.1em}
.info .links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:22px}
.info .links a{display:inline-flex;align-items:center;min-height:44px;border-bottom:1px solid currentColor;font-size:13px;font-weight:700;text-decoration:none}
.foot{padding:20px 18px 26px;background:#fdf6dc;text-align:center;font:400 11px/1.6 Jost,sans-serif;letter-spacing:.06em}
.foot p{width:fit-content;margin:0 auto} /* il testo resta al centro, lontano dalla barra a destra sul desktop */

/* Barra fissa in basso, come la loro «online shop». */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;place-items:center;height:calc(var(--bar) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(3,69,115,.9);color:#fff;font-size:14px;font-weight:700;letter-spacing:.1em;text-decoration:none}

@media (min-width:760px){
  :root{--top:96px}
  html{scroll-padding-bottom:100px}
  .logo{left:34px;top:4px;width:62px;height:88px}.logo img{width:48px}
  .pill{right:30px;top:26px}
  .stage{padding:calc(var(--top) + 8px) 0 120px}
  .tall{width:88vw;height:max(420px,calc(100svh - 216px));margin:0 auto}
  .tall img{object-position:50% 55%}
  .hero h1{font-size:40px}
  .news{left:34px;bottom:30px}
  .say{padding:60px 30px 140px}
  .full{grid-template-columns:1fr 1fr}
  .full img{aspect-ratio:4/5;height:100%}
  .lineup{padding:140px 6vw 40px}
  .item{grid-template-columns:minmax(0,340px) 1fr;grid-template-areas:"cap name" "cap label" "cap list";grid-template-rows:auto auto 1fr;column-gap:8vw;row-gap:20px;margin-top:110px;align-items:start}
  .cap{grid-area:cap}.name{grid-area:name}.label{grid-area:label}.item ul{grid-area:list}
  .drinks{margin-left:calc(340px + 8vw + 30px)}
  .more{margin-left:calc(340px + 8vw + 30px)}
  .round{margin-top:-22%}
  .bar{left:auto;right:30px;bottom:30px;width:240px;height:52px;border-radius:99px;padding:0}
  body{padding-bottom:0}
  
}
@media (prefers-reduced-motion:reduce){.hero h1 .c,.say p,.item,.item .cap img{opacity:1!important;translate:none!important}.round{translate:none!important}}