/* Modello F (come peaceput) — stile comune a tutte le pagine del modello. Dalla bozza R6 del 16–17/10/2026. */
/* F — come peaceput.com: un'immagine a tutto schermo che resta ferma mentre il manifesto scorre sopra, ogni riga da
   sfocata a nitida mentre passa al centro; poi l'immagine si stringe in un quadro sulla carta; poi una sequenza grande
   con un numero che scorre dietro il quadro. Loro hanno un film: qui c'è una foto di Maison che si avvicina piano con lo scroll.
   Nessuna libreria: poche righe di JS su scroll. Movimento ridotto o niente JS: righe nitide su foto ferma, nessun tratto bloccato. */
:root{--cream:#f8f3ea}
html{background:var(--cream);scroll-padding-top:76px}

.hd{position:fixed;left:0;right:0;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center;height:60px;padding:0 12px;color:var(--deep);background:var(--cream);transition:background .4s ease,color .4s ease}
/* Sopra la foto la testata diventa scura e sfoca ciò che passa sotto: le righe del manifesto non si mescolano coi comandi. */
.js .hd.over{background:rgba(0,22,40,.62);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hd .m{justify-self:start;display:grid;place-items:center;min-height:44px;padding:0 6px;font-size:13px;font-weight:700;text-decoration:none}
.hd .logo{font:300 clamp(20px,5.6vw,26px)/1 Fraunces,serif;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.hd .logo em{font-style:italic}
.hd .order{justify-self:end;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 0 0 4px;font-size:12.5px;font-weight:700;line-height:1.3;text-decoration:none}
/* Sul telefono stretto il pulsante va su due righe e il logo si stringe: niente sovrapposizioni a 320 px. */
@media (max-width:400px){.hd .order{font-size:12px}.hd .order span{display:block;max-width:3.2em}.hd .logo{font-size:18px}}
.hd .order i{display:grid;place-items:center;width:30px;height:30px;border-radius:4px;background:var(--yellow);color:var(--deep);font-style:normal;font-size:18px;line-height:1}

/* Il film: resta fermo (sticky) mentre le righe scorrono; alla fine si stringe in un quadro.
   Senza JS o col movimento ridotto la foto copre solo la sezione e le righe scorrono normali, senza tratto bloccato. */
.film{position:relative}
.stage{position:absolute;inset:0;overflow:hidden;background:var(--cream)}
.js .film{height:270svh}
.js .stage{position:sticky;inset:0 auto auto;height:100svh}
.frame{position:absolute;inset:0;overflow:hidden}
.js .frame{clip-path:inset(calc(var(--p,0) * 16%) calc(var(--p,0) * 20%) round calc(var(--p,0) * 22px))}
.frame img{width:100%;height:100%;object-fit:cover;object-position:46% 60%}
/* La foto si avvicina piano mentre scorri il film (il loro è un video): nessun movimento quando ti fermi. */
.js .frame img{transform:scale(calc(1 + var(--z,0) * .12))}
.frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,22,40,.55),rgba(0,22,40,.62) 60%,rgba(0,22,40,.78))}
.js .frame::after{opacity:calc(1 - var(--p,0) * .85)}
.lines{position:relative;z-index:2;padding:22svh 26px 22svh;color:#fff}
.js .lines{margin-top:-100svh;padding:34svh 26px 55svh}
.lines p{font-size:clamp(17px,4.8vw,26px);font-weight:400;line-height:2;letter-spacing:.16em;text-shadow:0 1px 14px rgba(0,20,40,.5)}
.lines p+p{margin-top:12svh}
.lines .brand{font:300 14px/1.6 Fraunces,serif;letter-spacing:.06em;margin-bottom:8svh}
/* Riga appena sfocata → nitida: è nitida e piena in tutta la parte centrale dello schermo, si ammorbidisce solo ai bordi
   (opacità minima 0,8, sfocatura massima 1,2 px): resta leggibile anche mentre entra ed esce. */
.js .lines p{filter:blur(calc((1 - var(--r,1)) * 1.2px));opacity:calc(.8 + var(--r,1) * .2)}

/* Dopo il film: titolo grande sulla carta, come il loro «history & vision». */
.story{position:relative;padding:40px 24px 30px;color:var(--deep)}
.story h2{font:300 clamp(46px,13vw,120px)/.95 Fraunces,serif;letter-spacing:-.02em}
.story h2 em{font-style:italic}
.story .sub{margin-top:14px;font-size:14px;letter-spacing:.2em}

/* Sequenza: un numero enorme scorre dietro il quadro (il loro «20XX» rosso; per Maison «39» giallo). */
.seq{position:relative;padding:40px 0 30px;overflow:hidden}
.seq .num{position:absolute;top:50%;left:0;z-index:0;font:400 clamp(220px,62vw,560px)/1 Fraunces,serif;color:var(--yellow);white-space:nowrap;transform:translate(-10vw,-50%)}
.js .seq .num{transform:translate(calc(var(--s,.5) * -40vw + 10vw),-50%)}
.seq figure{position:relative;z-index:1;width:min(68vw,420px);margin:0 auto;aspect-ratio:3/4;overflow:hidden;border-radius:4px;box-shadow:0 20px 50px rgba(40,25,5,.18)}
.seq figure img{width:100%;height:100%;object-fit:cover}
.seq figure figcaption{position:absolute;right:10px;bottom:10px}
/* «メニュー +» è un vero collegamento alla pagina menu, non un'etichetta che sembra un pulsante. */
.seq figure figcaption a{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 10px 0 14px;border-radius:4px;background:#fff;color:var(--deep);font-size:12px;font-weight:700;text-decoration:none}
.seq figure figcaption i{display:grid;place-items:center;width:22px;height:22px;border-radius:3px;background:var(--yellow);font-style:normal}
.seq h3{position:relative;z-index:1;margin-top:26px;font-size:clamp(26px,7.4vw,52px);line-height:1.4;text-align:center;color:var(--deep)}
.seq .yen{position:relative;z-index:1;margin-top:8px;text-align:center;font-size:14px}
.seq .yen b{font:500 18px/1 Fraunces,serif}
.dash{display:grid;justify-items:center;padding:20px 0}
.dash i{width:1px;height:70px;background:var(--deep);opacity:.4}

.next{padding:80px 24px 90px;background:var(--deep);color:#fff}
.next .k{font:300 15px/1 Fraunces,serif;letter-spacing:.04em;font-style:italic;color:var(--yellow)}
.next h2{margin-top:14px;font-size:clamp(26px,7vw,44px);line-height:1.5}
.next dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;max-width:460px;margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.25);font-size:14px}
.next dt{color:rgba(255,255,255,.75);font-size:12px;font-weight:700;letter-spacing:.14em}
.next .note{margin-top:14px;font-size:12.5px;color:rgba(255,255,255,.8)}
.go{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.go a{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 10px 0 20px;border-radius:4px;font-size:14px;font-weight:700;text-decoration:none}
.go a i{display:grid;place-items:center;width:30px;height:30px;border-radius:3px;font-style:normal}
.go .p{background:var(--yellow);color:var(--deep)}.go .p i{background:var(--deep);color:var(--yellow)}
.go .o{border:1.5px solid rgba(255,255,255,.7);color:#fff}.go .o i{background:#fff;color:var(--deep)}
.foot{padding:30px 24px 40px;text-align:center;color:var(--deep)}
.foot p{font:300 26px/1 Fraunces,serif}
.foot small{display:block;margin-top:10px;font-size:11px;letter-spacing:.1em}

@media (min-width:760px){
  html{scroll-padding-top:88px}
  .hd{height:72px;padding:0 28px}
  .lines{padding-left:14vw;padding-right:14vw}
  .story{padding:70px 8vw 40px}
  .seq{padding:80px 0 40px}
  .seq figure{width:min(34vw,440px)}
  .next{padding:120px 8vw}
}
@media (prefers-reduced-motion:reduce){.lines p{filter:none!important;opacity:1!important}.frame{clip-path:none!important}.frame img{transform:none!important}}