/* Le Gnocchette. Solo i token di DESIGN.md: niente valori inventati fuori da qui.
   Colori dal manuale del logo (Pastavolante, aprile 2025): Pantone 1935 C, 3125 C e Black C. */

@font-face{font-family:"Shrikhand";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/shrikhand-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:"Shrikhand";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/shrikhand-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:"Atkinson Hyperlegible";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/atkinson-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:"Atkinson Hyperlegible";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/atkinson-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:"Atkinson Hyperlegible";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/atkinson-700-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:"Atkinson Hyperlegible";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/atkinson-700-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}

:root{
  --lampone:#C8234F;
  --vino:#2A0F18;
  --acqua:#00B1BD;
  --acqua-testo:#007079;
  --nero:#231F20;
  --rosa:#FBEAEF;
  --riga:#EBC9D3;
  --bianco:#FFFFFF;

  --f-titoli:"Shrikhand",Georgia,serif;
  --f-testo:"Atkinson Hyperlegible",Verdana,sans-serif;

  --t-testo:18px;
  --t-titolo:28px;
  --t-grande:clamp(40px,7vw,64px);

  --s1:4px;--s2:8px;--s3:16px;--s4:32px;--s5:64px;--s6:128px;

  --r-blocco:16px;
  --r-tondo:999px;
  --r-campo:8px;

  --margine:clamp(16px,4vw,64px);
  --largo:1200px;
  --lettura:680px;
  --passo:150ms ease-out;
  --passo-menu:220ms cubic-bezier(.2,.7,.3,1);
  --rimbalzo:cubic-bezier(.3,.9,.4,1);

  /* Forme del marchio per le maschere CSS: corona (dal logo), pallina da padel, pennellata sotto il titolo */
  --corona:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='56.7 0 128.4 111.6'%3E%3Cpath fill-rule='evenodd' d='M85.1 48C85.1 49.6 86 50.8 89.2 51C90.6 48.7 91 45.9 90.1 43.2C89.3 40.6 87.4 38.6 85.1 37.4C86.4 39.7 85.9 42.3 85.5 44.8C85.3 46 85 47.1 85.1 48Z'/%3E%3Cpath fill-rule='evenodd' d='M76.9 54.9C79.4 52.9 79.4 51.4 78.6 50.1C78.1 49.3 77.2 48.5 76.4 47.6C74.6 45.9 72.7 44 72.5 41.4C71.2 43.6 70.9 46.4 71.7 49C72.5 51.7 74.5 53.8 76.9 54.9Z'/%3E%3Cpath fill-rule='evenodd' d='M144.2 13.3C145.4 12.8 146.6 12.4 147.7 12.3C149.9 12 151.7 12.7 152.7 16.2C153.8 14.8 154.6 13.2 154.8 11.3C155.1 9.5 154.8 7.7 154.1 6.1C152.2 9.1 150.3 9.3 148.2 8.4C147.2 7.9 146.2 7.2 145.2 6.5C142.9 4.8 140.3 2.9 137.3 4.6C136.5 5.7 135.9 7.1 135.7 8.6C135.5 10.1 135.6 11.5 136.1 12.8C138.5 15.3 141.5 14.2 144.2 13.3Z'/%3E%3Cpath fill-rule='evenodd' d='M148.8 7C150.3 7.6 151.7 7.4 153.3 4.6C151.8 2.4 149.5 0.8 146.7 0.4C143.9 0 141.3 0.8 139.3 2.4C141.9 2.2 144 3.8 146.1 5.3C147 6 148 6.6 148.8 7Z'/%3E%3Cpath fill-rule='evenodd' d='M64.4 103.3C64 101.9 64.4 100.6 66.5 99.6C65.5 99 64.4 98.7 63.1 98.7C61.9 98.7 60.7 99 59.7 99.6C61.9 100.6 62.2 101.9 61.8 103.3C61.6 104 61.2 104.8 60.8 105.5C59.9 107.2 58.9 109.1 60.3 110.9C61.2 111.4 62.1 111.6 63.1 111.6C64.1 111.6 65.1 111.4 65.9 110.9C67.3 109.1 66.3 107.2 65.4 105.5C65 104.8 64.6 104 64.4 103.3Z'/%3E%3Cpath fill-rule='evenodd' d='M59.9 105C60.3 104.3 60.7 103.7 60.8 103C61.1 102 60.8 101.1 58.8 100.3C57.5 101.5 56.7 103.2 56.7 105.1C56.7 107 57.4 108.6 58.7 109.8C58.3 108.1 59.2 106.5 59.9 105Z'/%3E%3Cpath fill-rule='evenodd' d='M178.3 40.5C177.8 40 177.3 39.5 176.8 39.2C176.4 38.9 175.9 38.8 175.3 39.1C175.1 39.1 175 39.1 174.9 39.2L162.5 46C161 46.8 159.1 46.1 158.4 44.5L148.5 20.1C148.3 19.6 148.5 19.1 149 18.9C149.9 18.5 150.7 18 151.4 17.4C150.7 14.3 149.4 13.6 147.9 13.8C146.9 13.9 145.8 14.3 144.7 14.7C142.3 15.5 139.8 16.4 137.4 15.5C138.4 17 139.9 18.2 141.7 18.9C142.2 19.1 142.4 19.7 142.1 20.2L126.4 51.1C124.3 55.1 120 57.3 115.6 56.6L88.2 52.4C88.2 52.4 88.2 52.4 88.2 52.4C84.7 52 83.7 50.3 83.6 48.1C83.5 47 83.8 45.8 84 44.5C84.5 41.7 85.1 38.6 82.3 36.6C80.9 36.3 79.4 36.4 78 36.9C76.6 37.3 75.3 38.1 74.3 39.1C73.1 42.3 75.4 44.5 77.5 46.6C78.4 47.5 79.2 48.3 79.8 49.3C81 51.1 81.1 53.1 78.5 55.5C79.6 55.7 80.7 55.8 81.9 55.7C81.9 55.7 81.9 55.7 81.9 55.7C83.2 55.6 83.7 56 84.1 57.4L89.6 84.8C89.8 86 89.3 87.3 88.2 87.9L66.3 100.8C65.9 101.1 65.6 101.4 65.5 101.8C65.3 102.2 65.3 102.6 65.4 103C65.6 103.7 65.9 104.3 66.3 105C67.1 106.5 67.9 108.1 67.6 109.8C68.7 108.7 69.5 107.2 69.6 105.5C69.6 104.8 70.2 104.9 70.2 104.9L85.3 107.6C85.6 107.7 85.8 107.8 86.1 107.9L88.6 109.1C88.7 109.1 88.8 109.2 88.9 109.2C88.7 109 88.6 108.8 88.4 108.6C83.1 99.3 97.3 81.4 120.3 68.7C143.2 56 166.1 53.2 171.5 62.5C171.5 62.5 171.5 62.5 171.5 62.6C171.5 62.5 171.5 62.5 171.5 62.5L171.1 57.4C171 56.9 171.1 56.4 171.3 56L176.4 43.5C176.4 43.5 176.5 42.9 177.1 43.2C177.2 43.2 177.3 43.3 177.4 43.3C179 43.8 180.6 43.6 182 42.9C180.4 42.8 179.3 41.6 178.3 40.5Z'/%3E%3Cpath fill-rule='evenodd' d='M178.1 35.3C178.6 35.3 179.3 35.2 180 35.1C181.5 34.9 183.1 34.6 184.4 35.3C183.8 34 182.6 32.9 181 32.3C179.4 31.8 177.7 32 176.3 32.8C176.5 34.7 177.1 35.3 178.1 35.3Z'/%3E%3Cpath fill-rule='evenodd' d='M184.9 37.1C183.8 35.4 181.9 35.7 180.2 36C179.4 36.1 178.7 36.2 178 36.2C176.7 36.2 175.7 35.5 175.5 33.4C174.7 34.1 174.1 35 173.7 36C173.4 37.1 173.4 38.2 173.6 39.2C175.1 37.6 176.2 37.7 177.3 38.5C177.9 38.8 178.4 39.3 178.9 39.9C180.1 41.1 181.4 42.5 183.4 41.8C184 41.2 184.4 40.5 184.7 39.6C185 38.8 185.1 37.9 184.9 37.1Z'/%3E%3C/svg%3E");
  --pallina:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M0 12a12 12 0 1 0 24 0a12 12 0 1 0-24 0ZM6 1.6Q13 12 6 22.4L7.9 23.3Q15 12 7.9 .7ZM18 1.6Q11 12 18 22.4L16.1 23.3Q9 12 16.1 .7Z'/%3E%3C/svg%3E");
  --sottolinea:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cpath d='M4 31C70 15 172 5 296 11C204 15 112 23 12 38C5 39 0 35 4 31Z'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
body{margin:0;background:var(--bianco);color:var(--vino);font-family:var(--f-testo);font-size:var(--t-testo);line-height:1.55}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{margin:0;font-family:var(--f-titoli);font-weight:400;line-height:1.05;text-wrap:balance}
p,ul{margin:0}
a{color:var(--lampone);transition:color var(--passo)}
a:hover{color:var(--vino)}
:focus-visible{outline:3px solid var(--acqua);outline-offset:2px}
.salta{position:absolute;left:var(--s3);top:-100px;z-index:10;padding:var(--s2) var(--s3);background:var(--bianco);color:var(--vino);border-radius:var(--r-tondo)}
.salta:focus{top:var(--s3)}
.giro{max-width:var(--largo);margin:0 auto;padding-inline:var(--margine)}

/* Barra della bozza (solo nella versione da mostrare) */
.bozza{background:var(--vino);color:var(--bianco);font-size:var(--t-testo)}
.bozza .giro{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 var(--s4);padding-block:var(--s2)}

/* Testata */
.testata{background:var(--lampone);color:var(--bianco)}
.testata a{color:var(--bianco)}
.testata :focus-visible,.piede :focus-visible{outline-color:var(--bianco)}
.barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);padding-block:var(--s3)}
.marchio{display:block;line-height:0}
.marchio .logo{width:200px}

/* Logo ufficiale: pezzi colorati dal CSS. Su lampone (testata, piede) G e scritta bianche, corona e fascia verde acqua */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.logo{display:block;height:auto;aspect-ratio:536.4/231.8;overflow:visible}
.logo-scritta,.logo-corona{fill:var(--acqua)}
.logo-g,.logo-fascia{fill:var(--lampone)}
:is(.testata,.piede) :is(.logo-scritta,.logo-g){fill:var(--bianco)}
:is(.testata,.piede) .logo-fascia{fill:var(--acqua)}
.logo-corona{transform-box:fill-box;transform-origin:35% 100%}
/* La corona cade sulla G all'apertura della pagina e balla sotto il mouse */
.animato .testata .marchio .logo-corona{animation:corona-giu 1s var(--rimbalzo) .2s both}
@media (hover:hover){.animato .marchio:hover .logo-corona{animation:corona-balla .6s ease-in-out}}
.menu{display:flex;flex-wrap:wrap;gap:0 var(--s4)}
.menu a{position:relative;display:flex;align-items:center;min-height:44px;text-decoration:none}
.menu a.attivo{font-weight:700}
/* Sottolineatura verde acqua: cresce da sinistra al passaggio del mouse, piena sulla voce attiva */
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--acqua);transform:scaleX(0);transform-origin:left;transition:transform var(--passo-menu)}
.menu a:hover::after,.menu a:focus-visible::after,.menu a.attivo::after{transform:scaleX(1)}
/* Corona del logo: compare sulla voce sotto il mouse, sulla voce attiva si raddrizza un po' */
.menu a::before{content:"";position:absolute;top:-15px;left:-18px;width:30px;height:26px;background:var(--acqua);-webkit-mask:var(--corona) center/contain no-repeat;mask:var(--corona) center/contain no-repeat;opacity:0;transform:translateY(6px) rotate(-40deg) scale(.6);transition:opacity var(--passo-menu),transform var(--passo-menu)}
.menu a.attivo::before{opacity:1;transform:rotate(14deg)}
.menu a:hover::before,.menu a:focus-visible::before{opacity:1;transform:translateY(-2px) rotate(26deg)}

/* Apertura della home: sul fondo il simbolo gigante in filigrana e le palline, che scorrono a velocità diverse */
.testata{position:relative}
.apertura-fondo{position:relative;overflow:hidden}
.apertura-deco,.chi-deco{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}
.deco{position:absolute;will-change:transform}
.deco-simbolo{right:-3%;top:-4%;width:min(44vw,540px)}
.deco-svg{display:block;width:100%;height:auto;aspect-ratio:130.2/231.8;opacity:.09}
.deco-svg :is(.logo-g,.logo-fascia,.logo-corona){fill:var(--bianco)}
.deco-p1{left:46%;top:12%;width:30px}
.deco-p2{right:5%;bottom:14%;width:46px}
.deco-p3{left:3%;bottom:9%;width:22px}
.pallina{display:block;width:100%;height:auto;fill:var(--acqua)}
.deco-p3 .pallina{fill:var(--bianco);opacity:.45}
.animato .deco .pallina{animation:galleggia 6s ease-in-out infinite}
.animato .deco-p2 .pallina{animation-duration:8s;animation-delay:-3s}
.animato .deco-p3 .pallina{animation-duration:7s;animation-delay:-5s}
.apertura{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s5);padding-block:var(--s5) var(--s6)}
/* Titolo: le parole salgono una alla volta, sotto l'ultima passa una pennellata verde acqua */
.apertura h1 .parola{display:inline-block}
.parola.ultima{position:relative}
.parola.ultima::after{content:"";position:absolute;left:-4%;right:-8%;bottom:-.16em;height:.34em;background:var(--acqua);-webkit-mask:var(--sottolinea) center/100% 100% no-repeat;mask:var(--sottolinea) center/100% 100% no-repeat}
.animato .apertura h1 .parola{animation:parola-su .8s var(--rimbalzo) both;animation-delay:calc(var(--i) * 90ms + 150ms)}
.animato .parola.ultima::after{animation:pennellata .6s cubic-bezier(.6,0,.2,1) both;animation-delay:calc(var(--i) * 90ms + 650ms)}
.apertura-testo{flex:3 1 520px;display:flex;flex-direction:column;gap:var(--s4)}
.apertura h1{font-size:var(--t-grande)}
.apertura p{max-width:560px}
.prossimo{flex:2 1 320px;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);border-radius:var(--r-blocco);background:var(--bianco);color:var(--vino)}
.prossimo-quando{color:var(--acqua-testo);font-weight:700}
.prossimo-quando::before{content:"";display:inline-block;width:14px;height:14px;margin-right:var(--s2);vertical-align:-1px;background:var(--acqua);-webkit-mask:var(--pallina) center/contain no-repeat;mask:var(--pallina) center/contain no-repeat}
/* La corona sta sopra le cose importanti: il prossimo torneo e la foto di squadra.
   Nel logo è inclinata per stare sulla G: ruotata di circa 20 gradi sta dritta */
:is(.apertura,.anteprima-home) .prossimo,.chi .foto{position:relative}
:is(.apertura,.anteprima-home) .prossimo::after,.chi .foto::after{content:"";position:absolute;top:-66px;left:14px;width:104px;height:90px;background:var(--acqua);-webkit-mask:var(--corona) center/contain no-repeat;mask:var(--corona) center/contain no-repeat;rotate:20deg;transform-origin:50% 100%;pointer-events:none}
.animato .apertura .prossimo.visto::after,.animato .chi .foto.visto::after{animation:corona-giu 1s var(--rimbalzo) .45s both,dondola 5s ease-in-out 1.6s infinite}
.prossimo-citta{font-family:var(--f-titoli);font-size:var(--t-grande);line-height:1;color:var(--lampone)}

/* Bottoni */
.bottone,.testata .bottone{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s4);border-radius:var(--r-tondo);background:var(--lampone);color:var(--bianco);font-weight:700;text-decoration:none;transition:background-color var(--passo),transform var(--passo-menu)}
.bottone:hover,.testata .bottone:hover{background:var(--vino);color:var(--bianco)}
/* Solo col mouse: su iPad e telefono l'effetto resterebbe attaccato dopo il tocco */
@media (hover:hover){.animato .bottone:hover{transform:rotate(-2deg) scale(1.04)}}

/* Elenco dei racconti */
.racconti{padding-block:var(--s6) var(--s5)}
.titolo-sezione{margin-bottom:var(--s4);font-size:var(--t-titolo);color:var(--lampone)}
.evidenza{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s5);padding-bottom:var(--s5)}
.evidenza .foto{flex:7 1 440px}
.evidenza-testo{flex:5 1 320px;display:flex;flex-direction:column;gap:var(--s3)}
.evidenza-testo:only-child{max-width:900px}  /* racconto senza foto */
.evidenza h3{font-size:var(--t-grande)}
.evidenza h3 a,.riga h3 a{color:var(--vino);text-decoration:none}
.evidenza h3 a:hover,.riga h3 a:hover{color:var(--lampone)}
.quando{color:var(--acqua-testo);font-weight:700}
.riga{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);padding-block:var(--s4);border-top:1px solid var(--riga)}
.riga:last-child{border-bottom:1px solid var(--riga)}
.riga .quando{flex:0 0 200px}
.riga-testo{flex:1 1 480px;display:flex;flex-direction:column;gap:var(--s2)}
.riga h3{font-size:var(--t-titolo);line-height:1.15}
.riga h3 a{display:inline-block;transition:color var(--passo),transform var(--passo-menu)}
@media (hover:hover){.animato .riga h3 a:hover{transform:translateX(6px)}}
.tutti{margin-top:var(--s5)}

/* Pagina blog: tutti i racconti, divisi per anno */
.blog{display:flex;flex-direction:column;gap:var(--s5);padding-block:var(--s5) var(--s6)}
.blog-testa{display:flex;flex-direction:column;gap:var(--s3);max-width:var(--lettura)}
.blog-vuoto{max-width:var(--lettura)}
.blog h1{position:relative;align-self:flex-start;font-size:var(--t-grande);color:var(--lampone)}
.blog h1::before{content:"";position:absolute;top:-.62em;left:-.22em;width:.9em;height:.78em;background:var(--acqua);-webkit-mask:var(--corona) center/contain no-repeat;mask:var(--corona) center/contain no-repeat;rotate:16deg}
.animato .blog h1::before{animation:corona-giu 1s var(--rimbalzo) .3s both}

/* Foto e segnaposto */
.foto{margin:0}
.foto img,.foto-vuota{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-blocco)}
.foto-vuota{display:flex;align-items:center;justify-content:center;padding:var(--s3);background:var(--rosa);color:var(--vino);text-align:center}
.foto-ritratto img,.foto-ritratto .foto-vuota{aspect-ratio:4/5}

/* Invito al chi siamo in fondo alla home */
.invito{background:var(--rosa);clip-path:polygon(0 max(24px,4vw),100% 0,100% 100%,0 100%)}
.invito .giro{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s5);padding-block:calc(var(--s6) + 2vw) calc(var(--s6) + var(--nastro-alto) / 2)}
.invito-testo{flex:1 1 320px;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.invito h2{font-size:var(--t-grande);color:var(--lampone)}
.invito-logo{flex:0 1 auto;width:min(480px,100%);min-width:0}
.animato .invito-logo.visto .logo-corona{animation:corona-giu 1s var(--rimbalzo) .5s both}
.animato .invito-logo.visto .logo-scritta{animation:scritta-entra .9s var(--rimbalzo) .25s both}

/* Articolo */
.articolo{padding-block:var(--s5) var(--s6)}
.articolo-testa{display:flex;flex-direction:column;gap:var(--s3);max-width:900px;margin-bottom:var(--s5)}
.articolo h1{font-size:var(--t-grande)}
.articolo .foto{margin-bottom:var(--s5)}
.articolo .foto img,.articolo .foto-vuota{aspect-ratio:16/9}
.testo{max-width:var(--lettura);display:flex;flex-direction:column;gap:var(--s3)}
.testo h2{margin-top:var(--s4);font-size:var(--t-titolo);color:var(--lampone)}
.testo ul{padding-left:1.2em;display:flex;flex-direction:column;gap:var(--s2)}
.altri{padding-block:0 var(--s6)}

/* Chi siamo */
.pagina-rosa{position:relative;overflow:hidden;background:var(--rosa)}
.chi-deco .deco-p1{left:auto;right:8%;top:10%}
.chi-deco .deco-p2{right:auto;left:42%;bottom:6%;width:34px}
.chi{position:relative}
.chi{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s5);padding-block:var(--s5) var(--s6)}
.chi .foto{flex:1 1 320px;max-width:440px}
.chi-testo{flex:1 1 480px;display:flex;flex-direction:column;gap:var(--s4)}
.chi h1{font-size:var(--t-grande);color:var(--lampone)}
.chi-intro{font-family:var(--f-titoli);font-size:var(--t-titolo);line-height:1.15}
.chi .foto-vuota{background:var(--bianco)}
/* Finché non c'è la foto di squadra, al suo posto il simbolo: la corona cade sulla G quando arriva sullo schermo */
.chi-simbolo{flex:0 1 300px;align-self:center}
.chi-simbolo .logo{width:100%;aspect-ratio:130.2/231.8}
.animato .chi-simbolo.visto .logo-corona{animation:corona-giu 1s var(--rimbalzo) .4s both}
@media (min-width:601px){.chi .foto{order:-1}}

/* Piede */
.piede{position:relative;background:var(--lampone);color:var(--bianco)}
.piede a{color:var(--bianco)}
.piede a:hover{color:var(--rosa)}
.piede .giro{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s4) var(--s5);padding-block:calc(var(--nastro-alto) / 2 + var(--s5)) var(--s5)}
.piede-marchio{display:block;line-height:0}
.piede-marchio .logo{width:clamp(200px,26vw,300px)}
.animato .piede-marchio.visto .logo-corona{animation:corona-giu 1s var(--rimbalzo) .3s both}
@media (hover:hover){.animato .piede-marchio:hover .logo-corona{animation:corona-balla .6s ease-in-out}}
.piede-info{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2)}
.piede-nome{font-weight:700}
.piede nav{display:flex;flex-wrap:wrap;gap:0 var(--s4)}
.piede nav a{display:inline-flex;align-items:center;min-height:44px}
.piede-nota{flex:1 1 100%}

/* Nastri inclinati: uno scuro e uno verde acqua incrociati sotto l'apertura della home, uno verde acqua in cima al piede.
   Stanno a cavallo del bordo e lo coprono; scorrono di lato mentre si scorre la pagina (js/effetti.js) */
:root{--nastro-alto:clamp(130px,12vw,220px)}
.nastri{position:absolute;left:0;right:0;z-index:2;height:var(--nastro-alto);overflow:hidden;pointer-events:none}
.nastri-apertura{bottom:0;transform:translateY(50%)}
.nastri-piede{top:0;transform:translateY(-50%)}
.nastro{position:absolute;left:-20vw;right:-20vw;top:50%;display:flex;align-items:center;overflow:hidden}
.nastro-acqua{--alto:max(58px,4.4vw);height:var(--alto);margin-top:calc(var(--alto) / -2);background:var(--acqua);color:var(--nero);transform:rotate(-4deg)}
.nastro-scuro{--alto:max(52px,4vw);height:var(--alto);margin-top:calc(var(--alto) / -2);background:var(--nero);color:var(--bianco);transform:rotate(2deg)}
.nastri-piede .nastro-acqua{transform:rotate(-2deg)}
.nastro-binario{display:flex;flex:none;will-change:transform}
.nastro-gruppo{display:flex;flex:none;align-items:center;gap:var(--s4);padding-right:var(--s4);font-family:var(--f-titoli);font-size:clamp(20px,2.2vw,32px);line-height:1;white-space:nowrap}
.nastro .pallina{width:.8em;fill:var(--bianco)}
.nastro-scuro .pallina{fill:var(--acqua)}
.nastro-simbolo{display:block;width:auto;height:1.6em;aspect-ratio:130.2/231.8}
.nastro .logo-corona{fill:var(--bianco)}
.nastro :is(.logo-g,.logo-fascia){fill:var(--lampone)}
.racconti{position:relative}

/* 404: la corona è caduta dalla G */
.perso{position:relative}
.perso-simbolo{display:block;width:140px;height:auto;aspect-ratio:130.2/231.8;margin-bottom:var(--s4);overflow:visible}
.perso-simbolo .logo-corona{transform:translate(58%,72%) rotate(38deg)}

/* Entrate mentre si scorre: js/effetti.js aggiunge .visto quando l'elemento arriva sullo schermo.
   La stessa lista di selettori è in js/effetti.js */
.animato :where(.titolo-sezione,.evidenza,.riga,.invito-testo > *,.invito-logo,.blog-testa > *,.articolo-testa > *,.articolo > .foto,.chi-testo > *,.chi > .foto,.chi-simbolo,.apertura .prossimo,.piede-marchio,.piede-info){transition:opacity .7s ease-out var(--ritardo,0ms),transform .9s var(--rimbalzo) var(--ritardo,0ms)}
.animato :where(.titolo-sezione,.evidenza,.riga,.invito-testo > *,.invito-logo,.blog-testa > *,.articolo-testa > *,.articolo > .foto,.chi-testo > *,.chi > .foto,.chi-simbolo,.apertura .prossimo,.piede-marchio,.piede-info):not(.visto){opacity:0;transform:translateY(28px) rotate(-1.2deg)}
.animato .riga:not(.visto){transform:translateX(-32px) skewX(-8deg)}
.animato .apertura .prossimo:not(.visto){transform:translateY(40px) rotate(4deg) scale(.94)}

/* Barra di lettura nei racconti, con la pallina che rotola */
.progresso{position:fixed;left:0;right:0;top:0;z-index:20;height:4px;pointer-events:none}
.progresso::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--acqua);transform-origin:left;transform:scaleX(var(--p,0))}
.progresso::after{content:"";position:absolute;top:-6px;left:0;width:16px;height:16px;background:var(--acqua);-webkit-mask:var(--pallina) center/contain no-repeat;mask:var(--pallina) center/contain no-repeat;transform:translateX(calc(var(--p,0) * (100vw - 16px))) rotate(calc(var(--p,0) * 1080deg))}

/* Fuori dallo schermo (js/effetti.js mette .fermo) le animazioni continue si fermano e i livelli grafici
   di decorazioni e nastri si liberano: meno lavoro e meno memoria, e quando tornano visibili ripartono da dove erano */
.fermo :is(.deco,.nastro-binario){will-change:auto}
.animato .fermo .deco .pallina,.animato .fermo .apertura .prossimo.visto::after,.animato .fermo .chi .foto.visto::after{animation-play-state:paused}

@keyframes corona-giu{0%{opacity:0;transform:translateY(-60%) rotate(-30deg)}55%{opacity:1;transform:translateY(5%) rotate(7deg)}78%{transform:translateY(-3%) rotate(-3deg)}100%{transform:none}}
@keyframes corona-balla{0%,100%{transform:none}25%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}}
@keyframes dondola{0%,100%{transform:none}50%{transform:translateY(-5px) rotate(7deg)}}
@keyframes galleggia{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(28deg)}}
@keyframes parola-su{from{opacity:0;transform:translateY(.7em) rotate(7deg)}to{opacity:1;transform:none}}
@keyframes pennellata{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes scritta-entra{from{opacity:0;transform:translateX(40px) skewX(-14deg)}to{opacity:1;transform:none}}

/* Anteprima dell'area riservata (solo bozza) */
.anteprima{padding-block:var(--s5) var(--s6)}
.anteprima h1{font-size:var(--t-grande);color:var(--lampone);margin-bottom:var(--s3)}
.anteprima-nota{max-width:var(--lettura);margin-bottom:var(--s5)}
/* Area riservata: un pannello alla volta. Il menu sta sopra i pannelli su telefono e iPad in verticale, a sinistra dai 960px */
.area{display:flex;flex-direction:column;gap:var(--s5)}
.area-menu{display:flex;flex-direction:column;gap:var(--s2)}
.area-menu .bottone{margin-bottom:var(--s2)}
.area-gruppo{margin-top:var(--s3);color:var(--acqua-testo);font-weight:700}
.area-menu ul{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.area-menu li a{display:flex;flex-direction:column;justify-content:center;min-height:44px;padding:var(--s2) var(--s3);border-radius:var(--r-campo);color:var(--vino);text-decoration:none}
.area-menu li a span{color:var(--acqua-testo)}
.area-menu li a:hover,.area-menu li a[aria-current]{background:var(--rosa)}
.area-menu li a[aria-current]{font-weight:700}
.area-menu .secondario{align-self:flex-start;min-height:44px;margin-top:var(--s3);padding:0;border:0;background:none;color:var(--lampone);font:inherit;text-align:left;text-decoration:underline;cursor:pointer}
.area-menu .secondario:hover{color:var(--vino)}
.area-pannelli{min-width:0;display:flex;flex-direction:column;gap:var(--s5)}
.pannello{display:flex;flex-direction:column;gap:var(--s3);scroll-margin-top:var(--s4)}
.pannello h2{font-size:var(--t-titolo);color:var(--lampone)}
.anteprima-home{padding:calc(var(--s4) + 56px) var(--s4) var(--s4);border-radius:var(--r-blocco);background:var(--lampone)}  /* in alto c'è posto per la corona */
.anteprima-home .prossimo{max-width:420px}
.anteprima-vuota{color:var(--bianco)}
@media (min-width:960px){
  .area{flex-direction:row;align-items:flex-start}
  .area-menu{flex:0 0 320px}
  .area-pannelli{flex:1 1 0}
}
/* Menu fermo mentre si scorre solo col mouse e di fianco ai pannelli: su iPad scorre con la pagina
   (fermo sopra il modulo lo copriva). Se è più alto dello schermo scorre da solo; il padding lascia spazio al bordo del focus */
@media (min-width:960px) and (hover:hover){
  .area-menu{position:sticky;top:var(--s4);max-height:calc(100vh - 2 * var(--s4));overflow-y:auto;padding:var(--s2);margin:calc(var(--s2) * -1)}
}
.modulo{max-width:900px;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);border:1px solid var(--riga);border-radius:var(--r-blocco)}
.modulo label{display:flex;flex-direction:column;gap:var(--s1);font-weight:700}
.modulo input,.modulo textarea{min-height:44px;padding:var(--s2) var(--s3);border:1px solid var(--riga);border-radius:var(--r-campo);font:inherit;font-weight:400;color:var(--vino);background:var(--bianco)}
.modulo textarea{min-height:200px;resize:vertical}
.modulo-barra{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s1)}
.modulo-barra span{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s3);border:1px solid var(--riga);border-radius:var(--r-campo);font-weight:400}
.modulo-azioni{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--s3)}
.modulo-campo{display:flex;flex-direction:column;gap:var(--s1)}
.modulo-etichetta{font-weight:700}
/* Riquadro della foto: si trascina una foto o si tocca per sceglierla */
.modulo .trascina{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);min-height:160px;padding:var(--s4);border:2px dashed var(--lampone);border-radius:var(--r-campo);background:var(--bianco);font-weight:400;text-align:center;cursor:pointer;transition:background-color var(--passo)}
.trascina input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.trascina:focus-within{outline:3px solid var(--acqua);outline-offset:2px}
.modulo .trascina.sopra{background:var(--rosa);border-style:solid}
.trascina-foto{width:100%;max-width:480px;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-campo)}
.trascina-testo{display:flex;flex-direction:column;align-items:center;gap:var(--s1)}
.trascina-senza{color:var(--acqua-testo);font-weight:700}
.trascina-link{color:var(--lampone);text-decoration:underline}
.modulo .togli-foto{align-self:flex-start;margin-block:var(--s2)}
.con-dito{display:none}
@media (hover:none) and (pointer:coarse){.con-mouse{display:none}.con-dito{display:inline}}
.modulo .modulo-spunta{flex-direction:row;align-items:center;gap:var(--s2);min-height:44px;font-weight:400}
.modulo .modulo-spunta input{width:20px;height:20px;min-height:0;margin:0;padding:0;accent-color:var(--lampone)}
.modulo button{min-height:44px;padding:0 var(--s4);border-radius:var(--r-tondo);font:inherit;font-weight:700;cursor:pointer}
.modulo .secondario{border:1px solid var(--lampone);background:var(--bianco);color:var(--lampone)}
.modulo-esito{color:var(--acqua-testo);font-weight:700}
.modulo-esito:empty{display:none}
.modulo .primario{border:0;background:var(--lampone);color:var(--bianco)}

@media (max-width:600px){
  .marchio .logo{width:150px}
  .chi-simbolo{flex-basis:200px;margin-inline:auto}
  .menu a::before{left:-10px}
  .deco-simbolo{width:72vw;right:-22%;top:auto;bottom:-6%}
  .deco-p1{left:auto;right:10%;top:6%}
  :is(.apertura,.anteprima-home) .prossimo::after,.chi .foto::after{width:82px;height:71px;top:-52px;left:10px}
  .riga .quando{flex-basis:100%}
  .apertura{padding-block:var(--s4) var(--s5)}
  .racconti,.chi,.articolo,.blog{padding-block:var(--s5) calc(var(--s5) + var(--s4))}
  .invito .giro{padding-block:calc(var(--s5) + 4vw) calc(var(--s5) + var(--nastro-alto) / 2)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{
  .nastri,.apertura-deco,.chi-deco,.progresso{display:none}
  .animato *{opacity:1!important;transform:none!important}
}