/* ---------- font, self hosted: niente chiamate a Google ---------- */
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/archivo-black-400-latin.woff2) format('woff2');
  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:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/archivo-black-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/inter-var-latin.woff2) format('woff2');
  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:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/inter-var-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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}

/* ============================================================
   TOKEN
   Palette, font e logo sono bloccati dalle regole del brand.
   Tutto il resto qui sotto e' un sistema: scala tipografica con
   rapporti costanti, spazi su base 8, un solo tempo di transizione.
   ============================================================ */
:root{
  /* i tre colori, e basta */
  --ember:#E8541C;
  --crema:#FBF3E4;
  --ink:#232020;

  /* superfici derivate: non colori nuovi, miscele dei tre */
  --carta:      color-mix(in srgb, var(--ink)  4%, var(--crema));
  --carta-alta: color-mix(in srgb, var(--ink)  8%, var(--crema));
  --bordo:      color-mix(in srgb, var(--ink) 14%, var(--crema));
  --bordo-forte:color-mix(in srgb, var(--ink) 28%, var(--crema));
  --testo-2:    color-mix(in srgb, var(--ink) 74%, var(--crema));
  --testo-3:    color-mix(in srgb, var(--ink) 70%, var(--crema));
  /* le stesse, invertite, per le sezioni su fondo Inchiostro */
  --su-ink-1:   var(--crema);
  --su-ink-2:   color-mix(in srgb, var(--crema) 82%, var(--ink));
  --su-ink-3:   color-mix(in srgb, var(--crema) 66%, var(--ink));
  --su-ink-bordo:color-mix(in srgb, var(--crema) 20%, transparent);
  --su-ink-carta:color-mix(in srgb, var(--crema) 7%, transparent);

  --display:'Archivo Black',Impact,'Haettenschweiler','Arial Narrow Bold',sans-serif;
  --text:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  /* scala tipografica: rapporti fissi, non valori decisi caso per caso.
     Il minimo per un testo di lettura e' 17 px, mai meno. */
  --t-micro: .8125rem;                                   /* 13, solo maiuscoletto spaziato */
  --t-sm:    .9375rem;                                   /* 15 */
  --t-body:  clamp(1.0625rem, 1.01rem + .24vw, 1.1875rem);/* 17 -> 19 */
  --t-lead:  clamp(1.25rem,  1.13rem + .52vw, 1.5rem);   /* 20 -> 24 */
  --t-h4:    clamp(1.125rem, 1.06rem + .28vw, 1.3125rem);
  --t-h3:    clamp(1.375rem, 1.21rem + .7vw,  1.75rem);
  --t-h2:    clamp(2rem,     1.48rem + 2.2vw, 3.25rem);
  --t-h1:    clamp(2.5rem,   1.74rem + 3.2vw, 4.5rem);
  --t-apertura:clamp(3rem,   1.9rem + 4.6vw,  6rem);

  /* spazi su base 8 */
  --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.5rem; --s5:2rem;
  --s6:3rem;  --s7:4rem;   --s8:6rem; --s9:8rem;
  --sezione:clamp(4rem, 7vw, 7rem);

  --wrap:1200px;
  --wrap-stretto:66ch;
  --gutter:clamp(1.25rem, 4vw, 2.5rem);

  --raggio:2px;         /* il brand e' squadrato: gli angoli tondi solo sui bottoni */
  --tempo:200ms;
  --curva:cubic-bezier(.2,.7,.3,1);
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{margin:0;background:var(--crema);color:var(--ink);
     font-family:var(--text);font-size:var(--t-body);line-height:1.6;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
     overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
::selection{background:var(--ember);color:var(--crema)}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px;border-radius:var(--raggio)}

h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-.02em;
            text-transform:uppercase;margin:0;text-wrap:balance;line-height:1}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2);line-height:1.02}
h3{font-size:var(--t-h3);line-height:1.06;letter-spacing:-.01em}
h4{font-size:var(--t-h4);line-height:1.15;letter-spacing:0}
p{margin:0;text-wrap:pretty}
figure,figcaption,blockquote,dl,dd{margin:0}
ul{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sezione{padding-block:var(--sezione)}
.misura{max-width:var(--wrap-stretto)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Occhiello: l'unico testo sotto i 15 px del sito. E' maiuscoletto spaziato,
   quindi si legge, ma non ci va mai un'informazione che esiste solo li'. */
.occhiello{display:flex;align-items:center;gap:var(--s2);
           font-size:var(--t-micro);font-weight:600;letter-spacing:.22em;
           text-transform:uppercase;color:var(--testo-3)}
.occhiello::before{content:"";width:26px;height:3px;background:var(--ember);flex:none}
.su-ink .occhiello{color:var(--su-ink-3)}

.salta{position:absolute;top:var(--s2);left:var(--s2);z-index:200;
       background:var(--ink);color:var(--crema);padding:var(--s2) var(--s4);
       font-weight:600;text-decoration:none;transform:translateY(-200%)}
.salta:focus{transform:none}

/* ============================================================
   MOVIMENTO
   Una sola rivelazione, morbida, e solo se l'utente non ha
   chiesto di ridurre le animazioni.
   ============================================================ */
.rivela{opacity:0;transform:translateY(18px);
        transition:opacity 600ms var(--curva), transform 600ms var(--curva)}
.rivela.dentro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rivela{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================================================
   BOTTONI
   Altezza minima 48 px: sopra la soglia di 44 raccomandata.
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
     min-height:48px;padding:var(--s2) var(--s5);border:2px solid transparent;
     border-radius:999px;font-family:inherit;font-size:1.1875rem;font-weight:700;
     line-height:1.2;text-decoration:none;cursor:pointer;white-space:nowrap;
     transition:background var(--tempo) var(--curva), color var(--tempo) var(--curva),
                border-color var(--tempo) var(--curva), transform 120ms var(--curva)}
.btn:active{transform:translateY(1px)}
.btn-pieno{background:var(--ember);color:var(--crema)}
.btn-pieno:hover{background:var(--ink)}
.btn-linea{background:transparent;color:var(--ink);border-color:var(--bordo-forte)}
.btn-linea:hover{background:var(--ink);color:var(--crema);border-color:var(--ink)}
.su-ink .btn-linea{color:var(--crema);border-color:var(--su-ink-bordo)}
.su-ink .btn-linea:hover{background:var(--crema);color:var(--ink);border-color:var(--crema)}
.azioni{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* Collegamento testuale con la lineetta Ember che si allunga */
.freccia{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;
         font-weight:700;text-decoration:none;color:inherit}
.freccia::after{content:"";width:24px;height:2px;background:var(--ember);
                transition:width var(--tempo) var(--curva)}
.freccia:hover::after{width:40px}

/* ============================================================
   BARRA
   ============================================================ */
/* Sopra l'apertura la barra galleggia trasparente e diventa piena appena
   si scorre: cosi' la foto parte dal bordo alto dello schermo. */
.barra.sopra{position:fixed;left:0;right:0;top:0;
             background:transparent;backdrop-filter:none;border-bottom-color:transparent;
             transition:background var(--tempo) var(--curva), border-color var(--tempo) var(--curva)}
.barra.sopra .marchio,
.barra.sopra .nav a:not(.btn),
.barra.sopra .apri-menu{color:var(--crema)}
.barra.sopra .apri-menu{border-color:var(--su-ink-bordo)}
.barra.sopra.solida{background:color-mix(in srgb, var(--crema) 92%, transparent);
                    backdrop-filter:blur(12px);border-bottom-color:var(--bordo)}
.barra.sopra.solida .marchio,
.barra.sopra.solida .nav a:not(.btn),
.barra.sopra.solida .apri-menu{color:var(--ink)}
.barra.sopra.solida .apri-menu{border-color:var(--bordo-forte)}
@media (max-width:860px){
  /* col menu aperto la barra deve essere piena, altrimenti il pannello
     Crema finirebbe sotto un testo Crema */
  .barra.sopra:has(.nav[data-aperto="si"]){background:var(--crema);border-bottom-color:var(--bordo)}
  .barra.sopra:has(.nav[data-aperto="si"]) .marchio,
  .barra.sopra:has(.nav[data-aperto="si"]) .apri-menu{color:var(--ink)}
}
.barra{position:sticky;top:0;z-index:100;
       background:color-mix(in srgb, var(--crema) 90%, transparent);
       backdrop-filter:blur(12px);
       border-bottom:1px solid var(--bordo)}
@supports not (backdrop-filter:blur(1px)){.barra{background:var(--crema)}}
.barra .wrap{display:flex;align-items:center;justify-content:space-between;
             gap:var(--s4);min-height:72px}
.marchio{display:flex;align-items:center;gap:var(--s2);text-decoration:none;
         color:var(--ink);min-height:44px}
.marchio svg{width:32px;height:32px;flex:none}
.marchio b{font-family:var(--display);font-weight:400;font-size:.95rem;
           letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}

.nav{display:flex;align-items:center;gap:var(--s5)}
.nav a:not(.btn){display:inline-flex;align-items:center;min-height:44px;
                 color:var(--ink);text-decoration:none;font-weight:600;font-size:1rem;
                 position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:14px;height:2px;
                        background:var(--ember);transform:scaleX(0);transform-origin:left;
                        transition:transform var(--tempo) var(--curva)}
.nav a:not(.btn):hover::after,
.nav a[aria-current="page"]::after{transform:scaleX(1)}

.apri-menu{display:none;align-items:center;justify-content:center;
           width:48px;height:48px;padding:0;background:none;border:2px solid var(--bordo-forte);
           border-radius:999px;cursor:pointer;color:var(--ink)}
.apri-menu svg{width:20px;height:20px}
@media (max-width:860px){
  .nav{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;
       gap:0;padding:var(--s4) var(--gutter) var(--s6);background:var(--crema);
       border-bottom:1px solid var(--bordo);
       transform:translateY(-8px);opacity:0;pointer-events:none;
       transition:opacity var(--tempo) var(--curva), transform var(--tempo) var(--curva)}
  .nav[data-aperto="si"]{transform:none;opacity:1;pointer-events:auto}
  .nav a:not(.btn){min-height:56px;font-size:1.25rem;font-family:var(--display);
                   font-weight:400;text-transform:uppercase;letter-spacing:-.01em;
                   border-bottom:1px solid var(--bordo)}
  .nav a:not(.btn)::after{display:none}
  .nav .btn{margin-top:var(--s4);width:100%}
  .apri-menu{display:inline-flex}
}
@media (max-width:380px){.marchio b{display:none}}

/* ============================================================
   APERTURA
   Foto a tutta pagina, testo in basso a sinistra sopra un velo.
   Il velo non e' decorazione: senza, il Crema sulla parete chiara
   non arriva alla soglia di contrasto.
   ============================================================ */
.apertura{position:relative;isolation:isolate;
          min-height:100svh;
          display:flex;align-items:flex-end;
          background:var(--ink);color:var(--crema);overflow:hidden}
/* La foto sta dentro <picture>: va posizionato il contenitore, non solo l'immagine. */
.apertura>picture{position:absolute;inset:0;z-index:-2}
.apertura>picture img{width:100%;height:100%;object-fit:cover}
/* Velo in cima: la barra galleggia sulla foto e sulla parete chiara il Crema
   faceva 1,6:1. Con questo arriva sopra 8:1 e la foto resta luminosa sotto. */
.apertura::before{content:"";position:absolute;left:0;right:0;top:0;height:200px;z-index:-1;
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--ink) 76%, transparent) 0%,
    color-mix(in srgb, var(--ink) 46%, transparent) 45%,
    transparent 100%)}
/* Il velo non e' decorazione: senza, il Crema sulla parete chiara non
   arriva alla soglia. Su schermo largo scende di lato, cosi' il testo sta
   sulla parete vuota e i fiori restano luminosi. */
.apertura::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--ink) 93%, transparent) 0%,
      color-mix(in srgb, var(--ink) 86%, transparent) 30%,
      color-mix(in srgb, var(--ink) 58%, transparent) 54%,
      color-mix(in srgb, var(--ink) 20%, transparent) 78%,
      transparent 100%),
    linear-gradient(color-mix(in srgb, var(--ink) 22%, transparent),
                    color-mix(in srgb, var(--ink) 22%, transparent))}
@media (min-width:1100px){
  /* Su schermo largo il testo sta a destra, sulla parete vuota: il velo scende
     di lato e i fiori restano luminosi. Sotto i 1100 px la colonna di testo
     finirebbe sopra i fiori, quindi il testo torna in basso a sinistra. */
  .apertura::after{background:
    linear-gradient(to left,
      color-mix(in srgb, var(--ink) 92%, transparent) 0%,
      color-mix(in srgb, var(--ink) 88%, transparent) 28%,
      color-mix(in srgb, var(--ink) 60%, transparent) 50%,
      color-mix(in srgb, var(--ink) 26%, transparent) 70%,
      transparent 88%),
    linear-gradient(to top,
      color-mix(in srgb, var(--ink) 34%, transparent) 0%,
      transparent 48%),
    linear-gradient(color-mix(in srgb, var(--ink) 26%, transparent),
                    color-mix(in srgb, var(--ink) 26%, transparent))}
  .apertura .wrap{display:flex;justify-content:flex-end}
  .apertura .blocco{max-width:40ch}
}

.apertura .wrap{padding-block:var(--s8) var(--s8)}
.apertura h1{font-size:var(--t-apertura);line-height:.9;margin-top:var(--s4)}
.apertura .occhiello{color:var(--su-ink-2)}
.apertura .lead{margin-top:var(--s4);font-size:var(--t-lead);line-height:1.45;
                max-width:34ch;color:var(--su-ink-1)}
.apertura .azioni{margin-top:var(--s5)}
.apertura .didascalia{margin-top:var(--s5);font-size:var(--t-sm);color:var(--su-ink-3)}
.apertura .didascalia a{color:var(--su-ink-2);text-underline-offset:4px}

/* ============================================================
   GRIGLIA DEI LAVORI
   ============================================================ */
.griglia{display:grid;gap:var(--s5);margin-top:var(--s6);
         grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.griglia.due{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}

.pezzo{position:relative;display:flex;flex-direction:column;
       text-decoration:none;color:inherit;background:var(--carta);
       border:1px solid var(--bordo);border-radius:var(--raggio);overflow:hidden;
       transition:border-color var(--tempo) var(--curva), transform var(--tempo) var(--curva)}
.pezzo:hover{border-color:var(--bordo-forte);transform:translateY(-3px)}
.su-ink .pezzo{background:var(--su-ink-carta);border-color:var(--su-ink-bordo);color:var(--crema)}
.su-ink .pezzo:hover{border-color:color-mix(in srgb, var(--crema) 45%, transparent)}
.pezzo .telaio{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink)}
.pezzo img{width:100%;height:100%;object-fit:cover;
           transition:transform 500ms var(--curva)}
.pezzo:hover img{transform:scale(1.04)}
.pezzo .stato{position:absolute;top:var(--s3);left:var(--s3);
              padding:6px 14px;border-radius:999px;background:var(--ink);color:var(--crema);
              border:2px solid var(--ember);
              font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.pezzo .corpo{display:flex;flex-direction:column;gap:var(--s1);flex:1;
              padding:var(--s4) var(--s4) var(--s5)}
.pezzo .materiale{font-size:var(--t-micro);font-weight:600;letter-spacing:.18em;
                  text-transform:uppercase;color:var(--testo-3)}
.su-ink .pezzo .materiale{color:var(--su-ink-3)}
.pezzo h3{margin-top:2px}
.pezzo .riga{font-size:var(--t-sm);line-height:1.5;color:var(--testo-2)}
.su-ink .pezzo .riga{color:var(--su-ink-2)}
.pezzo .freccia{margin-top:auto;padding-top:var(--s3)}
/* Tutta la card e' cliccabile, ma il bersaglio dichiarato resta il titolo */
.pezzo::after{content:"";position:absolute;inset:0}
@media (prefers-reduced-motion:reduce){
  .pezzo:hover{transform:none}
  .pezzo:hover img{transform:none}
}

/* ============================================================
   TESTATA DI SEZIONE
   ============================================================ */
.testata{display:grid;gap:var(--s4);
         grid-template-columns:minmax(0,1fr);align-items:end}
@media (min-width:900px){
  .testata.affiancata{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s7)}
  .testata.affiancata .spalla{justify-self:end;text-align:right}
}
.testata h2{margin-top:var(--s3)}
.testata .intro{margin-top:var(--s3);font-size:var(--t-lead);line-height:1.5;
                color:var(--testo-2);max-width:52ch}
.su-ink .testata .intro{color:var(--su-ink-2)}

/* ============================================================
   BLOCCHI SU FONDO SCURO E SU EMBER
   ============================================================ */
.su-ink{background:var(--ink);color:var(--crema)}
.su-ink h1,.su-ink h2,.su-ink h3{color:var(--crema)}
/* Su Ember il Crema fa 3,4:1: passa solo il testo grande.
   Il corpo va sempre dentro un pannello Crema. */
.su-ember{background:var(--ember);color:var(--crema)}
.pannello{margin-top:var(--s5);background:var(--crema);color:var(--ink);
          padding:clamp(1.75rem,4vw,3rem);border-radius:var(--raggio)}

/* ============================================================
   PASSI, DATI, ELENCHI
   ============================================================ */
.passi{display:grid;gap:var(--s5);margin-top:var(--s6);
       grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.passo{padding-top:var(--s4);border-top:4px solid var(--ember)}
/* Ember su Inchiostro fa 4,4:1: a 13 px sarebbe sotto soglia. A 24 px il
   numero e' testo grande, la soglia scende a 3:1, e si legge meglio. */
.passo .n{font-family:var(--display);font-size:1.5rem;line-height:1;letter-spacing:.02em;
          color:var(--ember)}
.passo h3{margin-block:var(--s2) var(--s2)}
.passo p{color:var(--testo-2);font-size:var(--t-sm);line-height:1.55}
.su-ink .passo p{color:var(--su-ink-2)}

.dati{display:grid;gap:var(--s4);margin-top:var(--s6);
      grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.dati>div{padding-top:var(--s3);border-top:4px solid var(--ember)}
.dati dt{font-size:var(--t-micro);font-weight:600;letter-spacing:.2em;
         text-transform:uppercase;color:var(--testo-3)}
.dati dd{margin-top:var(--s1);font-weight:600;font-size:1.0625rem}

.chip{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.chip li{padding:10px 20px;border-radius:999px;font-size:var(--t-sm);font-weight:600;
         background:var(--ink);color:var(--crema)}
.chip li[data-stato="presto"]{background:transparent;color:var(--ink);
         border:2px dashed var(--bordo-forte)}

.voci{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s4)}
.voce{display:flex;gap:var(--s3);align-items:flex-start}
.voce i{display:block;width:26px;height:3px;background:var(--ember);flex:none;margin-top:.7em}
.voce p{color:var(--testo-2)}
.su-ink .voce p{color:var(--su-ink-2)}

/* ============================================================
   SCHEDA DI UN PEZZO
   ============================================================ */
.briciole{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1);
          padding-block:var(--s4) 0;font-size:var(--t-sm);color:var(--testo-3)}
.briciole a{display:inline-flex;align-items:center;min-height:44px;padding-inline:2px;
            color:var(--testo-2);font-weight:600;text-decoration:none;
            border-bottom:2px solid transparent}
.briciole a:hover{color:var(--ink);border-bottom-color:var(--ember)}
.briciole span{color:color-mix(in srgb, var(--ink) 45%, var(--crema))}

.scheda-testa{padding-block:var(--s3) var(--s5)}
.scheda-testa h1{margin-top:var(--s3)}
.scheda-testa .lead{margin-top:var(--s4);font-size:var(--t-lead);line-height:1.45;
                    color:var(--testo-2);max-width:46ch}
.scheda-hero{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--ink);
             border-radius:var(--raggio)}

.racconto{margin-top:var(--s7);display:grid;gap:var(--s6);align-items:start;
          grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.racconto{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s7)}}
.racconto .testo>p+p{margin-top:var(--s3)}
.racconto .testo p{color:var(--testo-2);max-width:52ch}
.racconto img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--ink);
              border-radius:var(--raggio)}
.racconto figcaption{margin-top:var(--s2);font-size:var(--t-sm);color:var(--testo-3)}

.dichiarazione{margin-top:var(--s5);padding:var(--s4);background:var(--carta-alta);
               border-left:4px solid var(--ember);border-radius:var(--raggio);
               font-size:var(--t-sm);line-height:1.55;color:var(--testo-2);max-width:56ch}
.dichiarazione b{color:var(--ink)}

/* ============================================================
   STUDIO
   ============================================================ */
.ritratto{display:grid;gap:var(--s6);align-items:center;
          grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.ritratto{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:var(--s8)}}
.ritratto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--raggio)}
.ritratto .testo p{margin-top:var(--s3);color:var(--testo-2)}
.ritratto .firma{margin-top:var(--s5);font-family:var(--display);font-size:var(--t-h4);
                 text-transform:uppercase;letter-spacing:-.01em}
.ritratto .luogo{margin-top:2px;font-size:var(--t-sm);color:var(--testo-3)}

/* ============================================================
   MODULO
   ============================================================ */
.modulo{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.modulo input[type=email]{flex:1 1 280px;min-height:48px;padding:var(--s2) var(--s4);
       border:2px solid var(--bordo-forte);border-radius:999px;background:#fff;color:var(--ink);
       font-family:inherit;font-size:1.0625rem}
.modulo input[type=email]::placeholder{color:var(--testo-3)}
.modulo input[type=email]:focus-visible{border-color:var(--ember)}
.micro{margin-top:var(--s3);font-size:var(--t-sm);color:var(--testo-2)}
.micro a{color:var(--ink);font-weight:600;text-decoration:underline;
         text-decoration-color:var(--ember);text-underline-offset:4px;text-decoration-thickness:2px}
.micro a:hover{color:var(--ember)}
.esito{margin-top:var(--s3);font-weight:600;min-height:1.6em}
.esito[data-tipo="ko"]{color:var(--ember)}

/* ============================================================
   PIEDE
   Bersagli da 44 px: prima i link erano alti 24.
   ============================================================ */
footer{background:var(--ink);color:var(--crema);padding-block:var(--s8) var(--s6)}
footer .wrap{display:grid;gap:var(--s6);
             grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
footer .marchio{color:var(--crema)}
.piede-note{margin-top:var(--s3);font-size:var(--t-sm);color:var(--su-ink-3);max-width:32ch}
footer h4{font-size:var(--t-micro);letter-spacing:.22em;color:var(--su-ink-3);
          font-family:var(--text);font-weight:600}
footer .link{margin-top:var(--s2)}
footer .link a{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;
               color:var(--crema);text-decoration:none;font-weight:600}
footer .link a span{border-bottom:2px solid transparent;padding-bottom:1px;
                    transition:border-color var(--tempo) var(--curva)}
footer .link a:hover span{border-bottom-color:var(--ember)}
/* L'icona segue il colore del testo e non si schiaccia se la voce va a capo */
.icona{width:19px;height:19px;flex:none;color:inherit}
/* Dentro un bottone l'icona sta un filo piu' grande, in scala col testo a 19 px */
.btn .icona{width:21px;height:21px}
footer .link a:hover .icona{color:var(--ember)}
.copy{grid-column:1/-1;margin-top:var(--s4);padding-top:var(--s4);
      border-top:1px solid var(--su-ink-bordo);font-size:var(--t-sm);color:var(--su-ink-3)}