/* =========================================================
   SHE BRINGS RAIN · Cambiare Pelle — design system
   Font del brand: Petrona (titoli e testo) · Appareo Black (etichette, pulsanti)
   Palette dal sito ufficiale: crema #F5F1E8 · rame #895B45 · oliva #566325 · kaki #87815E · inchiostro #1D1D1B
   ========================================================= */
@font-face{font-family:"Appareo";src:url("assets/fonts/appareo-black.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  /* palette */
  --cream:#F5F1E8; --linen:#EBE4D5; --sand:#D5CBB7; --ash:#6B6356; --bark:#2E2822;
  --ink:#1D1D1B; --night:#131210; --moss:#1B2016;
  --olive:#566325; --khaki:#87815E; --copper:#895B45; --copper-l:#C49677;
  --smoke:#BDB4A6; --mist:#EDE7DB; --rose:#BC9088;
  /* type */
  --serif:"Petrona",Georgia,"Times New Roman",serif;
  --label:"Appareo","Petrona",Georgia,sans-serif;
  --display:clamp(2.6rem,6.4vw,6.6rem);
  --h1:clamp(2.2rem,4.1vw,4.3rem);
  --h2:clamp(2rem,4.2vw,4rem);
  --h3:clamp(1.45rem,2.2vw,2rem);
  --lede:clamp(1.2rem,1.55vw,1.45rem);
  --body:1.125rem;            /* 18px — mai sotto i 17px */
  --small:1.0625rem;          /* 17px */
  --tag:.82rem;
  /* layout */
  --gutter:clamp(1.25rem,5vw,5.5rem);
  --section:clamp(5.5rem,11vw,11rem);
  --measure:35rem;
  --ease:cubic-bezier(.22,.61,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem}
body{margin:0;background:var(--cream);color:var(--bark);font-family:var(--serif);font-weight:400;font-size:var(--body);line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;text-rendering:optimizeLegibility}
body.dark{background:var(--night)}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:300;line-height:1.08;letter-spacing:-.012em;text-wrap:balance}
h1 em,h2 em,h3 em{font-style:italic;font-weight:300}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
::selection{background:var(--copper);color:var(--cream)}
:focus-visible{outline:1px solid var(--copper-l);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* grana fotografica */
body::after{content:"";position:fixed;inset:-20%;pointer-events:none;z-index:60;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
body.dark::after{mix-blend-mode:screen;opacity:.055}

/* ---------- struttura ---------- */
.wrap{padding-inline:var(--gutter);max-width:1480px;margin-inline:auto;width:100%}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2vw,1.75rem)}
.s{padding-block:var(--section);position:relative;background:var(--cream);color:var(--bark)}
.s--night{background:var(--night);color:var(--mist)}
.s--ink{background:var(--ink);color:var(--mist)}
.s--moss{background:var(--moss);color:var(--mist)}
.s--linen{background:var(--linen)}
.fog{height:clamp(4rem,9vw,8rem);background:linear-gradient(180deg,var(--from,var(--cream)),var(--to,var(--night)))}

/* ---------- etichette ---------- */
.tag{font-family:var(--label);font-weight:800;font-size:var(--tag);letter-spacing:.2em;text-transform:uppercase;line-height:1.3;color:var(--copper);display:flex;align-items:center;gap:1rem}
.tag::before{content:"";width:2.25rem;height:1px;background:currentColor;opacity:.75;transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease) .2s;flex:none}
.tag.in::before,.in .tag::before{transform:scaleX(1)}
.tag--plain::before{display:none}
.s--night .tag,.s--ink .tag,.s--moss .tag,.dark-ui .tag{color:var(--copper-l)}

/* ---------- testo ---------- */
.lede{font-size:var(--lede);line-height:1.45;max-width:var(--measure)}
.body{max-width:var(--measure)}
.body p+p{margin-top:1.15em}
.body strong{font-weight:500}
.muted{color:var(--ash)}
.s--night .muted,.s--ink .muted,.s--moss .muted{color:var(--smoke)}
.statement{font-family:var(--serif);font-weight:300;font-size:var(--display);line-height:1.02;letter-spacing:-.02em}
.statement em{font-style:italic}

/* colophon evento: data · ora · luogo · durata */
.colophon{display:flex;flex-wrap:wrap;align-items:stretch}
.colophon span{display:flex;flex-direction:column;gap:.35rem;padding:0 1.5rem;border-left:1px solid currentColor;border-color:color-mix(in srgb,currentColor 28%,transparent)}
.colophon span:first-child{padding-left:0;border-left:0}
.colophon small{font-family:var(--label);font-weight:800;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.colophon b{font-weight:400;font-size:1.3rem;line-height:1.1;letter-spacing:-.01em}
@media (max-width:640px){.colophon{display:grid;grid-template-columns:1fr 1fr;row-gap:1.1rem}.colophon span{padding:0 0 0 .9rem;border-left:1px solid color-mix(in srgb,currentColor 28%,transparent)}.colophon span:first-child{padding-left:.9rem;border-left:1px solid color-mix(in srgb,currentColor 28%,transparent)}}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity 1.2s var(--ease),transform 1.6s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js [data-d="1"]{transition-delay:.12s}.js [data-d="2"]{transition-delay:.24s}.js [data-d="3"]{transition-delay:.38s}.js [data-d="4"]{transition-delay:.52s}
/* immagine che si apre come una pelle: dal centro verso i bordi */
.js .skin{overflow:hidden}
.js .skin>img{clip-path:inset(0 50% 0 50%);transform:scale(1.1);transition:clip-path 1.9s var(--ease-out),transform 3s var(--ease-out)}
.js .skin.in>img{clip-path:inset(0 0 0 0);transform:scale(1)}
/* linee di testo che emergono una alla volta */
.js .lines>*{opacity:0;transform:translateY(16px);transition:opacity 1.1s var(--ease),transform 1.5s var(--ease)}
.js .lines.in>*{opacity:1;transform:none}
.js .lines.in>*:nth-child(2){transition-delay:.14s}.js .lines.in>*:nth-child(3){transition-delay:.28s}.js .lines.in>*:nth-child(4){transition-delay:.42s}.js .lines.in>*:nth-child(5){transition-delay:.56s}.js .lines.in>*:nth-child(6){transition-delay:.7s}
/* parole che si accendono con lo scroll (--p: 0→1 impostato da shared.js) */
.words .w{opacity:clamp(.14,calc(var(--p,1) * (var(--n,10) + 6) - var(--i,0)),1);transition:opacity .25s linear}

/* ---------- pulsanti ---------- */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:1rem;font-family:var(--label);font-weight:800;font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  padding:1.2rem 1.9rem;min-height:3.35rem;border:1px solid currentColor;border-radius:999px;position:relative;overflow:hidden;isolation:isolate;cursor:pointer;background:none;text-align:center;
  transition:color .7s var(--ease),border-color .7s var(--ease)}
.cta::before{content:"";position:absolute;inset:0;background:var(--fill,currentColor);z-index:-1;transform:scaleX(0);transform-origin:right;transition:transform .8s var(--ease-out)}
.cta:hover::before,.cta:focus-visible::before{transform:scaleX(1);transform-origin:left}
.cta .arrow{width:1.35rem;height:1px;background:currentColor;position:relative;transition:width .7s var(--ease);flex:none}
.cta .arrow::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.cta:hover .arrow{width:2.1rem}
.cta--light{color:var(--mist);--fill:var(--mist)}.cta--light:hover{color:var(--ink)}
.cta--dark{color:var(--bark);--fill:var(--bark)}.cta--dark:hover{color:var(--cream)}
.cta--solid{background:var(--ink);color:var(--mist);border-color:var(--ink);--fill:var(--copper)}
.cta--solid:hover{color:var(--cream);border-color:var(--copper)}
.cta--cream{background:var(--mist);color:var(--ink);border-color:var(--mist);--fill:var(--copper)}
.cta--cream:hover{color:var(--cream);border-color:var(--copper)}
@media (max-width:380px){.cta{font-size:.78rem;letter-spacing:.09em;gap:.7rem;padding-inline:1.2rem}}
.cta[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}
.cta.is-loading{cursor:wait}
.cta.is-loading .arrow{width:1rem;height:1rem;border:1px solid currentColor;border-right-color:transparent;border-radius:50%;background:none;animation:spin 1s linear infinite}
.cta.is-loading .arrow::after{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.note{font-size:var(--small);color:var(--ash);line-height:1.5}
.s--night .note,.s--ink .note,.s--moss .note,.dark-ui .note{color:var(--smoke)}

/* ---------- header ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:5rem;display:flex;align-items:center;justify-content:space-between;padding-inline:var(--gutter);color:var(--mist);
  transition:color .8s var(--ease),background-color .8s var(--ease),transform .6s var(--ease),border-color .8s var(--ease);border-bottom:1px solid transparent}
.nav--light{color:var(--bark)}
.nav--scrolled.nav--dark{background:rgba(19,18,16,.88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom-color:rgba(237,231,219,.08)}
.nav--scrolled.nav--light{background:rgba(245,241,232,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom-color:rgba(46,40,34,.08)}
.nav--hidden{transform:translateY(-100%)}
.nav .cta{padding:.8rem 1.35rem;min-height:2.75rem;font-size:.76rem;color:inherit}
.nav--dark .cta{--fill:var(--mist)}.nav--dark .cta:hover{color:var(--ink)}
.nav--light .cta{--fill:var(--bark)}.nav--light .cta:hover{color:var(--cream)}
.brand{display:flex;align-items:center;gap:.8rem;min-height:44px;min-width:44px}
.brand svg{width:2rem;height:2rem}
.brand span{font-family:var(--label);font-weight:800;font-size:.84rem;letter-spacing:.2em;text-transform:uppercase}
@media (max-width:640px){.brand span{display:none}.brand svg{width:2.25rem;height:2.25rem}.nav .cta{display:none}}

/* ---------- footer ---------- */
.foot{background:var(--night);color:var(--smoke);padding:3.5rem var(--gutter) 7rem;border-top:1px solid rgba(237,231,219,.08);display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;font-size:1rem}
.foot .brand{color:var(--mist)}
.foot nav{display:flex;gap:.5rem 1.75rem;flex-wrap:wrap;align-items:center}
.foot a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(237,231,219,.25);min-height:44px;display:inline-flex;align-items:center}
.foot a:hover{color:var(--mist)}
@media (min-width:901px){.foot{padding-bottom:3.5rem}}

/* ---------- invito sticky (solo mobile, discreto) ---------- */
.pill{position:fixed;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:55;display:none;transform:translate(-50%,160%);transition:transform .8s var(--ease-out),opacity .8s var(--ease);opacity:0}
.pill.on{transform:translate(-50%,0);opacity:1}
.pill .cta{min-height:3rem;padding:.95rem 1.5rem;font-size:.8rem;background:rgba(19,18,16,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--mist);border-color:rgba(237,231,219,.35);--fill:var(--mist);white-space:nowrap;box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}
@media (max-width:900px){.pill{display:block}}

/* ---------- form ---------- */
.f{display:flex;flex-direction:column;gap:.45rem}
.f>label:not(.check){font-size:1.3rem;line-height:1.3;font-weight:400}
.f label sup{color:var(--copper);font-size:.7em;margin-left:.15em}
.f label small{display:block;font-size:var(--small);color:var(--ash);margin-top:.2rem;font-style:italic}
input[type=text],input[type=email],textarea{appearance:none;width:100%;border:0;border-bottom:1px solid var(--sand);background:transparent;border-radius:0;font-family:var(--serif);font-weight:400;font-size:var(--body);color:inherit;padding:.75rem 0;min-height:3.1rem;line-height:1.5;transition:border-color .5s var(--ease)}
input::placeholder,textarea::placeholder{color:var(--ash);opacity:.55}
input:focus,textarea:focus{outline:none;border-bottom-color:var(--copper)}
textarea{resize:none;min-height:4.5rem;overflow:hidden}
.check{display:grid;grid-template-columns:1.5rem 1fr;gap:.9rem;align-items:start;cursor:pointer;font-size:var(--small);line-height:1.5;min-height:44px;padding-top:.35rem}
.check input{appearance:none;width:1.3rem;height:1.3rem;border:1px solid var(--ash);border-radius:50%;margin:.1rem 0 0;cursor:pointer;display:grid;place-content:center;flex:none;background:transparent}
.check input::before{content:"";width:.62rem;height:.62rem;border-radius:50%;background:var(--copper);transform:scale(0);transition:transform .4s var(--ease-out)}
.check input:checked{border-color:var(--copper)}.check input:checked::before{transform:scale(1)}
.check a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--copper);padding-block:.7rem;margin-block:-.7rem;display:inline-block}
.f.err input,.f.err textarea{border-bottom-color:#A5462B}
.f.err .check input{border-color:#A5462B}
.msg{display:none;font-size:1rem;color:#A5462B;font-style:italic}
.err .msg{display:block}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.status{font-size:var(--small);min-height:1.5em;color:var(--ash)}
.status.err{color:#A5462B}
.status.ok{color:var(--olive)}

/* ---------- accordion ---------- */
.acc__item{border-top:1px solid var(--sand)}
.acc__item:last-child{border-bottom:1px solid var(--sand)}
.acc__item h3{font-size:inherit;line-height:inherit;letter-spacing:0}
.acc__btn{width:100%;background:none;border:0;padding:1.45rem 0;min-height:44px;display:grid;grid-template-columns:1fr 1.5rem;gap:1.25rem;align-items:center;text-align:left;cursor:pointer;font-family:var(--serif);font-size:clamp(1.25rem,1.8vw,1.55rem);line-height:1.3;font-weight:400;color:inherit;transition:color .5s var(--ease)}
.acc__btn:hover{color:var(--copper)}
.acc__btn::after{content:"";width:1rem;height:1rem;justify-self:end;background:linear-gradient(var(--copper),var(--copper)) center/100% 1px no-repeat,linear-gradient(var(--copper),var(--copper)) center/1px 100% no-repeat;transition:transform .6s var(--ease-out)}
.acc__btn[aria-expanded="true"]::after{transform:rotate(135deg)}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s var(--ease-out)}
.acc__panel.open{grid-template-rows:1fr}
.acc__panel>div{overflow:hidden}
.acc__panel p{padding:0 2.5rem 1.7rem 0;color:var(--ash);max-width:34rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv,.js .lines>*,.js .skin>img{opacity:1;transform:none;clip-path:none;transition:none}
  .tag::before{transform:none;transition:none}
  .words .w{opacity:1}
  .cta,.cta::before,.acc__panel,.acc__btn::after,.pill{transition:none}
  [data-parallax] img{transform:none!important}
}