@font-face{font-family:"Jost";src:url("/assets/jost.235d8f89.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";src:url("/assets/jost-ext.b2a539cd.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --mg:#D80375;
  --yl:#FDDD10;
  --ink:#231F20;
  --sx:.953;
  --sy:.953;
  --gut:16px;
  --hc:var(--yl);
  --f:"Jost","Futura PT","Futura",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--mg);color:var(--ink);font-family:var(--f);font-weight:400;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip;-webkit-tap-highlight-color:transparent}
html.gated,html.gated body{overflow:hidden}
svg{display:block}
a{color:inherit}
button,input{font:inherit;color:inherit}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.k{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;line-height:1.3;margin:0}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* the label's offset print: yellow face, ink shadow */
.fc{fill:var(--yl)}
.sh{fill:var(--ink);transform:translate(calc((var(--sx) + var(--lift,0)) * 1px),calc((var(--sy) + var(--lift,0)) * 1px))}

/* ------ gate ------ */
.gate{position:fixed;inset:0;z-index:100;background:var(--mg);color:var(--ink);display:grid;grid-template-rows:auto auto 1fr;gap:14px;padding:calc(var(--gut) + env(safe-area-inset-top)) var(--gut) calc(var(--gut) + env(safe-area-inset-bottom))}
.gate[hidden]{display:none}
.gate__mk{width:100%;height:auto;overflow:visible}
.gate__mk--l{display:none}
.gate__t{margin:4px 0 0;font-weight:800;text-transform:uppercase;font-size:clamp(30px,8.7vw,110px);line-height:1.04;letter-spacing:-.02em}
.gate__b{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:0}
.gate__b button{appearance:none;background:transparent;border:1.5px solid var(--ink);border-radius:0;padding:0 14px 10px;display:flex;align-items:flex-end;text-align:left;cursor:pointer;color:var(--ink);transition:background-color .15s ease,box-shadow .15s ease,transform .15s ease}
.gate__b span{font-weight:800;text-transform:uppercase;font-size:clamp(48px,15vw,150px);line-height:.9;letter-spacing:-.02em}
.gate__b button:active,.gate__b button.on{background:var(--yl);box-shadow:6px 6px 0 var(--ink);transform:translate(-3px,-3px)}
@media (hover:hover){.gate__b button:hover{background:var(--yl);box-shadow:6px 6px 0 var(--ink);transform:translate(-3px,-3px)}}
@media (min-width:760px),(orientation:landscape){
  .gate{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:clamp(24px,3vw,56px);row-gap:18px}
  .gate__mk--s{grid-row:1/3;height:calc(100vh - 2 * var(--gut));height:calc(100svh - 2 * var(--gut));width:auto;max-width:48vw}
  .gate__mk--l{display:none}
  .gate__t{grid-column:2;align-self:start;margin-top:0;font-size:clamp(36px,5.4vw,104px)}
  .gate__b{grid-column:2}
}

/* ------ hero ------ */
.hero{position:relative;height:240vh;height:240svh;background:var(--mg)}
.hero__pin{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden}
.hero__stage{position:relative;height:100vh;height:100svh;display:grid;place-items:center}
.hero__mark{--w:min(calc(100vw - 2 * var(--gut)),calc((100svh - 150px) / 1.2),640px);position:relative;width:var(--w);container-type:inline-size}
.word{width:100%;height:auto;overflow:visible}
.word .L{cursor:grab;touch-action:pan-y}
.word .L:active{cursor:grabbing}
.meta{margin-top:5cqw;display:flex;justify-content:space-between;color:var(--ink);font-size:6.9cqw;line-height:1.18;text-transform:uppercase;letter-spacing:.01em}
.meta p{margin:0}
.meta p:last-child{text-align:right}

/* ------ manifesto ------ */
.mani{position:relative;background:var(--yl);min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:96px var(--gut);overflow:visible;overflow-x:clip}
.mani__t{margin:0;font-weight:800;text-transform:uppercase;font-size:clamp(56px,19vw,230px);line-height:.84;letter-spacing:-.02em;color:var(--mg);text-shadow:.035em .035em 0 var(--ink)}
.mani__t span{display:inline-block;will-change:transform}
.avv__t .wd{display:inline-block}

/* ------ cosa c'è dentro: one continuous scroll, colours flow ------ */
.ingr{position:relative;overflow:hidden}
.ing{--wave:44px;position:relative;background:var(--bg);color:var(--tx);height:100vh;height:100svh;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:end;padding:calc(env(safe-area-inset-top) + 6svh) var(--gut) calc(var(--wave) + 5svh)}
.ing__n{margin:0;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.74;white-space:nowrap;color:var(--fg);writing-mode:vertical-rl;transform:rotate(180deg);text-shadow:-.04em -.04em 0 var(--sh);font-size:calc(80svh / (var(--n) * .76));padding:.06em 0 0 .05em;overflow:hidden}
.ing__n .ch{display:inline-block;will-change:transform}
.ing__t{display:flex;flex-direction:column;gap:10px;text-align:left;min-width:0}
.ing__r{margin:0;font-weight:800;font-size:clamp(28px,8.4vw,72px);line-height:.92;text-transform:uppercase;letter-spacing:-.01em}
.ing__d{margin:0;font-size:17px;line-height:1.38;max-width:15em}

/* the edge between two colours is a moving wave, pure CSS */
.ing__wave{position:absolute;left:0;bottom:100%;width:200%;height:44px;margin-bottom:-1px;fill:var(--bg);animation:wave 7s linear infinite;pointer-events:none}
.ing:nth-child(even) .ing__wave{animation-duration:9s;animation-direction:reverse}
.ing__wave .w2{fill:var(--sh)}
.no-onda .ing__wave{display:none}
.no-onda .ing{--wave:0px}
@keyframes wave{to{transform:translateX(-50%)}}

/* ------ forme: one figure that turns into each botanical (?forme) ------ */
.fo{display:none}
html.forme .fo{display:block}
html.forme .ingr{display:none}
.fo{position:relative;height:560vh;height:560svh}
.fo__stage{--bg:#FDDD10;--fg:#D80375;--sh:#231F20;--tx:#231F20;--af:#D80375;--as:#231F20;position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:var(--bg);color:var(--tx)}
.fo__wipe{position:absolute;left:0;top:0;border-radius:50%;background:var(--nb,transparent);transform:scale(0);visibility:hidden;pointer-events:none}
.fo__in{position:relative;height:100vh;height:100svh;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;column-gap:18px;padding:calc(env(safe-area-inset-top) + 6svh) var(--gut) 6svh}
.fo__names{grid-row:1/3;display:grid;align-items:end}
.fo__n{grid-area:1/1;align-self:end;margin:0;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.74;white-space:nowrap;color:var(--fg);writing-mode:vertical-rl;transform:rotate(180deg);text-shadow:-.04em -.04em 0 var(--sh);font-size:calc(80svh / (var(--n) * .76));padding:.06em 0 0 .05em;overflow:hidden;visibility:hidden}
.fo__n .ch{display:inline-block;will-change:transform}
.fo__art{grid-column:2;grid-row:1;align-self:center;justify-self:stretch;display:block;width:100%;height:auto;max-height:64svh;overflow:visible;transform:scale(1.15);will-change:transform}
.fo__fc{fill:var(--af)}
.fo__sh{fill:var(--as);transform:translate(calc((var(--sx) + var(--lift,0)) * var(--shk,3.8px)),calc((var(--sy) + var(--lift,0)) * var(--shk,3.8px)))}
.fo__det{opacity:0}
.fo__txt{grid-column:2;grid-row:2;display:grid}
.fo__t{grid-area:1/1;opacity:0;transform:translateY(12px)}
.fo__t.on{opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease}
.fo__t--end{position:absolute;left:0;top:0;display:flex;justify-content:space-between;text-transform:uppercase;line-height:1.18;letter-spacing:.01em;color:var(--ink)}
.fo__t--end p{margin:0}
.fo__t--end p:last-child{text-align:right}
.fo__r{margin:0 0 8px;font-weight:800;font-size:clamp(28px,8.4vw,72px);line-height:.92;text-transform:uppercase;letter-spacing:-.01em}
.fo__d{margin:0;font-size:17px;line-height:1.38;max-width:15em}

/* ------ avvisami: the last screen, magenta like the label ------ */
.avv{position:relative;background:var(--mg);color:var(--ink);min-height:100vh;min-height:100lvh;display:flex;flex-direction:column;justify-content:flex-end}
.avv__box{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:90px var(--gut) 130px}
.avv__in{width:100%}
.avv .k{color:var(--ink)}
.avv__t{margin:14px 0 44px;font-weight:800;text-transform:uppercase;font-size:clamp(46px,14.2vw,150px);line-height:.86;letter-spacing:-.02em;color:var(--yl);text-shadow:.04em .04em 0 var(--ink)}
.form{max-width:640px}
.field{position:relative;display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--ink)}
.field input{flex:1;min-width:0;background:transparent;border:0;border-radius:0;padding:16px 0;font-size:22px;font-weight:500;color:var(--ink);outline:none}
.field input::placeholder{color:var(--ink);opacity:.55}
.field:focus-within{border-bottom-color:var(--yl)}
.go{appearance:none;border:0;background:var(--yl);color:var(--ink);width:54px;height:54px;flex:none;display:grid;place-items:center;cursor:pointer;margin-bottom:8px;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.go:active{transform:translate(4px,4px);box-shadow:none}
.go svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4}
.consent{display:flex;gap:12px;align-items:center;margin:20px 0 0;font-size:15px;line-height:1.4;cursor:pointer}
.consent input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;border:1.5px solid var(--ink);border-radius:0;display:grid;place-items:center;cursor:pointer}
.consent input:checked{background:var(--ink)}
.consent input:checked::after{content:"";width:10px;height:6px;border-left:2px solid var(--yl);border-bottom:2px solid var(--yl);transform:translateY(-1px) rotate(-45deg)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__msg{margin:18px 0 0;min-height:1.5em;font-weight:500}
.form.done .consent{display:none}
.go.ok{cursor:default}
.go.ok svg{stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}

/* strips under Safari's status bar and toolbar, always the colour of the section on screen */
.tint{position:fixed;left:0;right:0;z-index:60;pointer-events:none;background:var(--tint-t,#D80375)}
.tint--t{top:0;height:env(safe-area-inset-top)}
.tint--b{bottom:0;height:env(safe-area-inset-bottom);background:var(--tint-b,#D80375)}

.avv__more{display:inline-block;margin-top:26px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1.5px solid currentColor;padding:6px 0}
.avv__more::after{content:" →"}

/* ------ the end: one legal line at the foot of the last screen ------ */
.legal{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(20px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;gap:16px;font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:var(--ink)}
.legal p{margin:0}
.legal p:last-child{text-align:right}
@media (min-width:760px){.legal br.m,.consent br.m{display:none}}

/* ------ tablet / desktop ------ */
@media (min-width:760px){
  :root{--gut:32px}
  .k{font-size:13px}
  .ing{height:auto;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:18px;padding:10vh var(--gut) calc(var(--wave) + 8vh)}
  .ing__n{align-self:stretch;writing-mode:horizontal-tb;transform:none;text-shadow:.04em .04em 0 var(--sh);font-size:calc((100vw - 2 * var(--gut)) / (var(--n) * .76));padding:0 .06em .08em 0}
  .ing__t{align-self:stretch;flex-direction:row;justify-content:space-between;align-items:baseline;gap:40px;text-align:left;padding:0}
  .ing__d{margin:0;font-size:21px;text-align:right;max-width:none}
  .avv__box{padding:170px var(--gut) 140px}
  .avv__in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px;align-items:end}
  .avv__t{margin-bottom:0}
}
@media (min-width:760px){
  .fo__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;column-gap:48px;padding:10vh var(--gut)}
  .fo__names{grid-column:1;grid-row:1;align-items:end}
  .fo__n{writing-mode:horizontal-tb;transform:none;text-shadow:.04em .04em 0 var(--sh);padding:0 .06em .08em 0}
  .fo__art{grid-column:2;grid-row:1/3;max-height:74vh;transform:scale(.86)}
  .fo__txt{grid-column:1;grid-row:2;padding-top:22px}
  .fo__r{font-size:clamp(24px,2.1vw,34px);margin-bottom:8px}
  .fo__d{font-size:clamp(17px,1.25vw,20px);max-width:24em}
}
@media (min-width:1200px){:root{--gut:48px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero{height:100vh;height:100svh}
}