/* Layout: one flavour, one colour. The pack lands on a woven field of its own colour; story and siblings follow. */
@font-face{font-family:"Chillax";src:url(fonts/Chillax-Variable.woff2) format("woff2");font-weight:200 700;font-display:swap}
:root{
  --teal:#47c0c1; --teal-deep:#22a7a4; --cream:#fde6c3; --cream-2:#f6d6a6; --cream-hi:#fff4e2;
  --plum:#8f1158; --plum-2:#6a0b41; --gold-hi:#fbe39a; --text:#3a1027;
  --font:"Chillax","Outfit",ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:var(--cream);color:var(--plum);font:500 17px/1.6 var(--font);-webkit-font-smoothing:antialiased}
@supports not (overflow-x:clip){html{overflow-x:hidden}}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px;border-radius:6px}

.top{position:absolute;z-index:10;left:0;right:0;top:0;padding-top:calc(16px + env(safe-area-inset-top,0px))}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.top .logo{display:block;width:118px;padding:8px 14px;border-radius:999px;background:rgba(255,244,226,.86);box-sizing:content-box}
.top nav{display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(255,244,226,.86)}
.top nav a,.top nav button{border:0;background:none;cursor:pointer;text-decoration:none;font:600 15px/1 var(--font);color:var(--plum);padding:9px 14px;border-radius:999px;transition:background-color .2s ease}
.top nav a:hover,.top nav button:hover{background:var(--cream-2)}
.top nav .lang{color:#0c5f60;font-weight:700;letter-spacing:.06em}
@media (max-width:520px){.top .logo{width:90px}.top nav a.hide-s{display:none}}

.hero{position:relative;background:var(--bg);color:var(--ink);overflow:hidden;padding:clamp(110px,14vw,150px) 0 clamp(60px,8vw,90px)}
.hero::before{content:"";position:absolute;inset:0;background-image:var(--weave);background-size:160px 128px;opacity:.55}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,5vw,70px);align-items:center}
.stage{position:relative;aspect-ratio:1/1;display:grid;place-items:center}
.num{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(170px,30vw,400px);font-weight:700;letter-spacing:-.06em;line-height:1;color:transparent;-webkit-text-stroke:2px rgba(255,244,226,.8);user-select:none}
.shadow{position:absolute;left:50%;bottom:8%;width:46%;height:6%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(40,10,25,.35),transparent);filter:blur(4px)}
.pack{position:relative;height:80%;width:auto;max-width:88%;object-fit:contain;filter:drop-shadow(0 26px 24px rgba(40,10,25,.28));animation:land .95s cubic-bezier(.34,1.3,.64,1) .15s both}
@keyframes land{0%{transform:translateY(-70%) rotate(-10deg);opacity:0}55%{transform:translateY(4%) rotate(1deg) scaleY(.94);opacity:1}75%{transform:translateY(-3%) scaleY(1.02)}100%{transform:none}}
.info{display:grid;gap:18px}
.crumb{font-size:14px;font-weight:600;letter-spacing:.06em}
.crumb a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}.crumb a:hover{text-decoration-thickness:2px}
h1{font-size:clamp(38px,5.4vw,70px);font-weight:700;letter-spacing:-.03em}
.no{font-size:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:7px 11px;border-radius:999px;background:rgba(255,244,226,.85);color:var(--plum)}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font:700 16px/1 var(--font);padding:15px 20px;border-radius:16px;transition:scale .16s ease-out,background-color .2s ease}
.btn:active{scale:.97}
.btn.p{background:var(--plum);color:var(--cream-hi)}.btn.p:hover{background:var(--plum-2)}
.btn.s{background:rgba(255,244,226,.9);color:var(--plum)}.btn.s:hover{background:#fff}

.story{padding:clamp(60px,9vw,110px) 0}
.story .wrap{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,6vw,90px);align-items:start}
.story h2{font-size:clamp(30px,3.6vw,46px);font-weight:700;letter-spacing:-.025em}
.story p{font-size:clamp(20px,2.1vw,26px);line-height:1.5;font-weight:500;color:var(--text);max-width:40ch}
.facts{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px}
.facts span{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;padding:10px 14px;border-radius:14px;background:var(--cream-hi)}
.facts i{width:10px;height:10px;border-radius:2px;background:var(--teal-deep)}

.more{padding:0 0 clamp(70px,9vw,110px)}
.more h2{font-size:clamp(28px,3.4vw,42px);font-weight:700;letter-spacing:-.025em;margin-bottom:22px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.also{display:grid;grid-template-rows:auto 1fr;border-radius:24px;overflow:hidden;background:var(--cream-hi);text-decoration:none;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.also-img{position:relative;aspect-ratio:4/3;background:var(--c)}
.also-img img{position:absolute;left:10%;top:10%;width:80%;height:80%;object-fit:contain;filter:drop-shadow(0 12px 12px rgba(40,10,25,.25));transition:transform .4s var(--ease-out)}
.also-t{display:grid;gap:4px;padding:16px 18px 20px}
.also-t small{font-size:13px;font-weight:600;letter-spacing:.06em;color:#9a3f6c}
.also-t b{font-size:19px;line-height:1.2}
@media (hover:hover) and (pointer:fine){.also:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(143,17,88,.14)}.also:hover .also-img img{transform:translateY(-6px) rotate(-3deg)}}
.pn{margin-top:28px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pn a{display:grid;gap:2px;text-decoration:none;padding:14px 18px;border-radius:16px;background:var(--cream-hi);min-width:0;max-width:48%}
.pn a small{font-size:13px;font-weight:600;color:#9a3f6c}
.pn a b{font-size:16px;line-height:1.25}
.pn a.n{text-align:right;margin-left:auto}

footer{background:var(--teal);color:var(--cream-hi);font-size:13px;line-height:1.6;padding:28px 0 calc(28px + env(safe-area-inset-bottom,0px))}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
footer a{color:var(--cream-hi);font-weight:700}

@media (max-width:820px){
  .hero .wrap,.story .wrap{grid-template-columns:minmax(0,1fr)}
  .stage{max-width:440px;width:100%;margin:0 auto}
  .grid{grid-template-columns:minmax(0,1fr)}
  .also{grid-template-columns:120px minmax(0,1fr);grid-template-rows:none}
  .also-img{aspect-ratio:auto;min-height:110px}
  .also-t{align-content:center}
  .pn a{max-width:100%;flex:1 1 100%}
  .pn a.n{text-align:left;margin-left:0}
}
@media (prefers-reduced-motion:reduce){.pack{animation:none}}

.badge-row{display:flex;flex-wrap:wrap;gap:8px}
.badge-row .b-new{background:var(--gold-hi);color:var(--plum)}
.badge-row .b-lf{background:var(--teal);color:var(--cream-hi)}

/* menu del piè di pagina */
footer{background:#167d7a}
.g-foot-nav{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px 18px;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid rgba(255,244,226,.3)}
.g-foot-nav a{font-size:15px;text-decoration:none}.g-foot-nav a:hover{text-decoration:underline}

/* passaggio morbido da una pagina all'altra (browser recenti; gli altri cambiano pagina come sempre) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .38s cubic-bezier(.16,1,.3,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}