/* ============================================================
   QUOTTY CRAFT, fogli di stile del sito.
   Questo file vale per TUTTE le pagine: la home di oggi e le
   pagine delle quattro porte che verranno. Quello che e
   specifico di una pagina sola sta in fondo, sotto la sua
   intestazione.

   I colori NON si scrivono qui: si prendono da
   ../../marchio/palette.css, che e l unico posto autorevole.
   ============================================================ */

/* ---- i caratteri, dichiarati in un posto solo ------------------
   Direzione scelta il 22 settembre 2026: "la libreria vecchia",
   cioe Goudy Old Style. Disegnato nel 1915, caldo e un po
   irregolare, di quelli che sembrano stampati su carta ruvida.

   La pila e in quest ordine di proposito:
   1. Sorts Mill Goudy, il ridisegno libero e gratuito di Goudy
      Old Style. E QUESTO che va scaricato e ospitato insieme al
      sito: finche i file non ci sono, il nome non trova niente
      e si passa oltre senza rompere nulla.
   2. Goudy Old Style, quello di Office: lo vede chi ce l ha
      installato (Giorgia si, i visitatori quasi mai).
   3. Georgia, che sta su qualsiasi computer ed e la piu vicina.

   Goudy ha le lettere piccole rispetto al corpo dichiarato:
   il testo parte da 18px invece che da 17. I titoli all inizio
   erano a 700, giudicati col Goudy di Office che il neretto ce
   l ha: con Sorts Mill Goudy sono tornati a 400, vedi sotto.    */

/* ---- i file veri, ospitati col sito (23 settembre 2026) --------
   Scaricati da Google Fonts, licenza SIL Open Font: il testo
   della licenza sta in ../caratteri/LICENZA-OFL.txt e ci resta.
   Sono in woff2, non ttf: stesso disegno, un terzo del peso, e
   lo capiscono tutti i browser in circolazione. 67 KB in tutto.

   Due tagli per stile, come li serve Google: "latin" copre
   l italiano, "latin-ext" le lingue che qui non servono quasi
   mai. Con unicode-range dichiarato il secondo file viene
   scaricato SOLO se in pagina compare un carattere che sta li
   dentro: dichiararlo non costa niente a chi non lo usa.

   font-display:swap di proposito: il testo si legge subito col
   carattere di sistema e cambia quando il file e arrivato. Il
   contrario (invisibile finche non arriva) fa una pagina bianca
   su una connessione lenta.

   ⚠ Sorts Mill Goudy esiste SOLO in peso 400, tondo e corsivo:
   non ha un neretto. Qualsiasi peso sopra 400 il browser se lo
   inventa ingrassando il tondo. Vedi --peso-titolo.              */

@font-face{
  font-family:"Sorts Mill Goudy"; font-style:normal; font-weight:400;
  font-display:swap;
  src:url("../caratteri/sorts-mill-goudy-regular-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:"Sorts Mill Goudy"; font-style:normal; font-weight:400;
  font-display:swap;
  src:url("../caratteri/sorts-mill-goudy-regular-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:"Sorts Mill Goudy"; font-style:italic; font-weight:400;
  font-display:swap;
  src:url("../caratteri/sorts-mill-goudy-italic-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:"Sorts Mill Goudy"; font-style:italic; font-weight:400;
  font-display:swap;
  src:url("../caratteri/sorts-mill-goudy-italic-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;
}

/* ---- Old Standard TT, il carattere del sito dal 24 settembre 2026 --
   Scelto da Giorgia nel confronto sulla home vera
   (../../confronto-caratteri-web.html, variante E): *"D molto
   originale ma E e piu leggibile e leggero"*. Sorts Mill Goudy le
   sembrava "simile al Times". I libri dell Ottocento: contrasto forte
   fra pieni e sottili, e un NERETTO VERO, che Sorts Mill Goudy non
   aveva. Stessi tagli latin / latin-ext, licenza in
   ../caratteri/LICENZA-OFL-old-standard-tt.txt. Il neretto e
   dichiarato ma il browser lo scarica solo se una pagina lo usa.
   Sorts Mill Goudy resta dichiarato qui sopra e i suoi file restano
   in ../caratteri/ (niente si cancella): non essendo piu nella pila,
   nessun browser lo scarica. */
@font-face{
  font-family:"Old Standard TT"; font-style:normal; font-weight:400;
  font-display:swap;
  src:url("../caratteri/old-standard-tt-regular-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:"Old Standard TT"; font-style:normal; font-weight:400;
  font-display:swap;
  src:url("../caratteri/old-standard-tt-regular-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:"Old Standard TT"; font-style:italic; font-weight:400;
  font-display:swap;
  src:url("../caratteri/old-standard-tt-italic-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:"Old Standard TT"; font-style:italic; font-weight:400;
  font-display:swap;
  src:url("../caratteri/old-standard-tt-italic-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:"Old Standard TT"; font-style:normal; font-weight:700;
  font-display:swap;
  src:url("../caratteri/old-standard-tt-bold-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:"Old Standard TT"; font-style:normal; font-weight:700;
  font-display:swap;
  src:url("../caratteri/old-standard-tt-bold-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{
  /* Georgia sotto: e quella che si vede per un attimo finche il file
     non arriva, e la piu vicina che c e su ogni computer */
  --font-titolo: "Old Standard TT", Georgia, "Times New Roman", serif;
  --font-testo:  "Old Standard TT", Georgia, "Times New Roman", serif;
  /* Deciso da Giorgia il 23 settembre 2026, variante C di
     ../../confronto-titoli.html: titoli nel tondo vero, niente
     neretto inventato dal browser, e la presenza che il peso non
     da piu la recuperano con la misura, piu 12 per cento.
     La scala vale per h1 e h2, che sono quelli confrontati. */
  --peso-titolo: 400;
  --scala-titolo: 1.12;
}

*,*::before,*::after{ box-sizing:border-box }

html{
  scroll-behavior:smooth;
  /* l altezza della barra si misura, non si stima: vedi il JS */
  scroll-padding-top:var(--barra, 88px);
}

/* La tela delle grafiche coordinate di Giorgia (24 settembre 2026),
   al posto del crema pieno. Il ritaglio e specchiato 2x2, quindi i
   bordi combaciano per costruzione. Il file e largo 840 px e si
   mostra a 420: sugli schermi densi e a misura piena, e la trama
   ha un filo ogni 7 px come nella grafica vista sul telefono.
   Il colore pieno sotto e la media misurata della tela: e quello
   che si vede finche l immagine non arriva, e quello su cui sono
   calcolati i contrasti. */
body{
  margin:0;
  background:url("../decori/tela-salvia.webp") 0 0/420px 420px var(--tela);
  color:var(--inchiostro);
  font-family:var(--font-testo);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* il reset che serve davvero: i controlli non ereditano il font */
button,input,select,textarea{ font:inherit; color:inherit }

h1,h2,h3,h4{ margin:0; line-height:1.2; color:var(--inchiostro-scuro);
              font-family:var(--font-titolo); font-weight:var(--peso-titolo) }
p{ margin:0 }
img{ max-width:100%; display:block }
ul{ margin:0; padding:0; list-style:none }

/* Un meccanismo SOLO. scroll-padding-top sta sull elemento che scorre
   (html, sopra) e basta: aggiungere anche scroll-margin-top sui
   bersagli li somma, e l ancora atterra al doppio della distanza.
   Misurato: 171px invece dei 93 dichiarati. */

/* ---- contenitori --------------------------------------------- */
.dentro{ width:100%; max-width:1060px; margin-inline:auto; padding-inline:22px }
.dentro-largo{ width:100%; max-width:1280px; margin-inline:auto; padding-inline:22px }
.stretto{ max-width:60ch }

section{ padding-block:clamp(56px,8vw,112px) }

/* ---- tipografia di servizio ----------------------------------- */
.occhiello{
  color:var(--inchiostro-chiaro);
  font-size:15px; letter-spacing:.2em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px;
}
/* La coccinella accanto agli occhielli: e Quotty, il nome scritto in
   disegno (STORIA.md 1). Dal 24 settembre e quella vera, presa dai
   tracciati della scritta del marchio (../marchio/coccinella.svg),
   al posto del puntino rosso disegnato col CSS che la teneva in caldo.
   Proporzioni del file: 180 x 143. */
.segno{
  width:24px; height:19px; flex:0 0 auto;
  background:url("../marchio/coccinella.svg") center/contain no-repeat;
}
h2{ font-size:calc(clamp(28px,3.6vw,40px) * var(--scala-titolo)) }
h3{ font-size:clamp(19px,2vw,22px) }
.guida{ font-size:clamp(18px,2vw,21px); line-height:1.6 }

/* ---- bottoni --------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 30px;
  border:0; border-radius:999px;
  background:var(--salvia-scura); color:var(--fondo);
  font-family:var(--font-testo);
  /* Maiuscole spaziate, come gli occhielli. Deciso da Giorgia il
     23 settembre 2026, variante D di ../../confronto-bottoni.html:
     Sorts Mill Goudy non ha il neretto e a questa misura quello
     inventato dal browser impasta le lettere. Misurato: a 320px
     nessun bottone va a capo, con il neretto finto uno si. */
  font-size:16px; font-weight:400; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease;
  box-shadow:0 1px 2px rgba(92,50,39,.14);
}
/* il crema sulla salvia scura vale 6,1:1. Il marrone NO: 1,28:1 */
.btn:active{ transform:translateY(1px) scale(.99) }

.btn-lieve{
  background:transparent; color:var(--inchiostro-scuro);
  border:1.5px solid var(--salvia-media);
  box-shadow:none;
}

/* ---- il filo: elemento ricorrente ------------------------------ */
/* Nel marchio c e gia: una linea continua che disegna la foglia e
   diventa un ago. Qui e ripresa come PUNTO DI CUCITURA, cioe
   tratteggiata come il punto filza vero, in verde bosco scuro.
   La lunghezza dei trattini la calcola il JS dalla larghezza vera
   resa a schermo, altrimenti con preserveAspectRatio="none" si
   stirano insieme al disegno e non sembrano piu punti. */
/* La cucitura sta sul BORDO della fascia, nello spazio vuoto in
   fondo, non in mezzo al contenuto: attraversando la colonna
   passava sopra i bottoni, e in una pagina a una colonna sola una
   linea decorativa prima o poi colpisce sempre il testo.
   Sul bordo invece fa quello che fa una costura vera: unisce due
   pezzi. */
/* La cucitura sta sul BORDO della fascia, nello spazio vuoto in
   fondo, non in mezzo al contenuto: attraversando la colonna
   passava sopra i bottoni, e in una pagina a una colonna sola una
   linea decorativa prima o poi colpisce sempre il testo.
   Sul bordo invece fa quello che fa una costura vera: unisce due
   pezzi. */
.filo-scia{
  position:absolute; left:0; right:0; bottom:8px;
  width:100%; height:62px;
  pointer-events:none; overflow:visible;
}
.filo-scia .cucitura{
  fill:none;
  stroke:var(--filo-cucitura);
  stroke-width:2.4;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
/* Il punto filza realistico (24 settembre 2026): quattro tracciati
   uguali, uno sull altro. L ombra appena sotto, i fori nella stoffa
   appena fuori dai capi di ogni punto, il filo, e una luce sottile
   che fa girare il filo. I trattini li misura il JS; questi sono i
   valori per chi non ha JavaScript. */
.filo-scia .punti{ stroke-dasharray:11 7 }
.filo-scia .cucitura-ombra,
.filo-scia .cucitura-fori,
.filo-scia .cucitura-luce{
  fill:none; stroke-linecap:round; vector-effect:non-scaling-stroke;
}
.filo-scia .cucitura-ombra{
  stroke:color-mix(in srgb, var(--inchiostro-scuro) 24%, transparent);
  stroke-width:3.6; transform:translate(0, 2.4px);
}
.filo-scia .cucitura-fori{
  stroke:color-mix(in srgb, var(--inchiostro-scuro) 40%, transparent);
  stroke-width:3; stroke-dasharray:0 14.2 0 3.8; stroke-dashoffset:1.6;
}
.filo-scia .cucitura-luce{
  stroke:color-mix(in srgb, var(--tela) 60%, transparent);
  stroke-width:.8; transform:translate(0, -1.2px);
}
/* Il movimento lo fa il JS fotogramma per fotogramma, rallentando
   verso il punto raggiunto: niente transizioni qui, che farebbero
   inseguire l ago a se stesso. Il 24 settembre la prima versione
   saltava ogni 40 ms con transizioni brevi, e Giorgia l ha vista
   scattare: "se non si puo avere un effetto piu fluido non lo voglio". */

/* L ago del marchio, allineato al filo: lo tira dalla cruna, che e
   il perno della rotazione e sta sempre sulla punta del filo. */
.ago-cucito{
  position:absolute; left:0; top:0; z-index:2;
  width:15px; height:auto; aspect-ratio:46/183;
  transform-origin:83.7% 7.7%;
  pointer-events:none;
  transition:opacity .4s ease;
}
/* Quotty, la coccinella, sul filo cucito come nel logo. Scivola,
   senza dondolio: il dondolio a scatti la faceva "tremante". */
.coccinella-cammina{
  position:absolute; left:0; top:0; z-index:2;
  width:26px; aspect-ratio:180/143;
  background:url("../marchio/coccinella.svg") center/contain no-repeat;
  transform-origin:50% 80%;
  /* dal 12 ottobre 2026 e un bottone: il gioco "Esprimi un desiderio"
     (sito.js). Niente aspetto da bottone, e il dito non fa scorrere
     la pagina mentre la porta */
  border:0; padding:0; margin:0; background-color:transparent;
  cursor:pointer; touch-action:none; -webkit-tap-highlight-color:transparent;
}
/* il bersaglio e largo 44 anche se lei ne misura 26: cresce solo la
   superficie che riceve il dito, lei resta dov e */
.coccinella-cammina::before{ content:""; position:absolute; inset:-12px -9px }
.coccinella-cammina:focus-visible{ outline:2px solid var(--salvia-scura); outline-offset:6px; border-radius:50% }
.coccinella-cammina.via{ opacity:0 }

/* Quotty in volo: fissa sullo schermo, sopra a tutto */
.coccinella-volo{
  position:fixed; left:0; top:0; z-index:1000;
  width:26px; aspect-ratio:180/143;
  background:url("../marchio/coccinella.svg") center/contain no-repeat;
  pointer-events:none;
  filter:drop-shadow(0 6px 5px rgba(92,50,39,.18));
}

/* il biglietto che lascia volando via */
.biglietto-quotty{
  position:fixed; z-index:1001;
  /* 100% e non 100vw: il vw comprende la barra di scorrimento, e a
     320 px il biglietto finiva a 1 px dal bordo invece che a 16 */
  width:max-content; max-width:calc(100% - 32px);
  padding:18px 58px 18px 24px;
  background:var(--tovagliato); color:var(--inchiostro);
  border:1px solid var(--salvia-nebbia); border-radius:3px;
  box-shadow:0 10px 30px rgba(92,50,39,.16);
  opacity:0; translate:0 8px;
  transition:opacity .35s ease, translate .35s ease;
}
.biglietto-quotty.aperto{ opacity:1; translate:0 0 }
.biglietto-quotty p{ margin:0; font-size:17px; line-height:1.4 }
.biglietto-quotty .desiderio{
  font-family:var(--font-titolo); font-weight:var(--peso-titolo);
  font-size:24px; line-height:1.2; color:var(--inchiostro-scuro); margin-bottom:6px;
}
.biglietto-quotty .chiudi{
  position:absolute; top:6px; right:6px;
  width:44px; height:44px; border:0; padding:0; margin:0;
  background:transparent; color:var(--inchiostro); cursor:pointer;
  font:inherit; border-radius:50%;
}
.biglietto-quotty .chiudi span,
.biglietto-quotty .chiudi span::after{
  position:absolute; left:13px; top:21px; width:18px; height:2px;
  background:currentColor; rotate:45deg;
}
.biglietto-quotty .chiudi span::after{ content:""; left:0; top:0; rotate:90deg }
@media (hover:hover) and (pointer:fine){
  .biglietto-quotty .chiudi:hover{ background:color-mix(in srgb, var(--salvia-nebbia) 50%, transparent) }
}
.biglietto-quotty .chiudi:focus-visible{ outline:2px solid var(--salvia-scura); outline-offset:2px }
@media (prefers-reduced-motion:reduce){
  .biglietto-quotty{ transition:none; translate:0 0 }
}
/* le coccinelle accanto agli occhielli entrano scivolando quando il
   loro blocco compare. Senza dondolio, per la stessa ragione */
.js .vista .segno{ animation:segno-entra 1.1s cubic-bezier(.2,.7,.3,1) .2s both }
@keyframes segno-entra{
  from{ translate:-24px 0 }
  to{ translate:0 0 }
}

/* A: le cuciture fra le fasce. Un contenitore alto zero sul bordo fra
   due sezioni; la cucitura sta a cavallo, nei loro margini interni */
.cucitura-fra{ position:relative; height:0; z-index:3 }
.cucitura-fra .filo-scia{ top:-31px; bottom:auto }

/* B: la cornice cucita, fissa sul lato, sotto la barra */
.cornice-cucita{ position:fixed; z-index:30; width:14px; pointer-events:none }
/* height:100% e non i 62 px della cucitura orizzontale: con quelli
   il disegno verticale si schiacciava e l ago stava a un quinto
   dell altezza giusta (misurato: 17 px invece di 100) */
.cornice-cucita .filo-scia{ position:static; display:block; width:14px; height:100%; overflow:visible }

/* il tracciato dentro la maschera non si vede: serve solo a
   scoprire la cucitura mentre si scorre.
   NIENTE vector-effect:non-scaling-stroke qui: con quello Chrome
   misura il tratteggio in pixel dello schermo, mentre il JS lo
   calcola (e posa l ago) in unita del disegno. Coincidono solo verso
   i 1200 px: a 800 il filo arrivava al 44 per cento con l ago al 28,
   "a meta del filo", e a 1920 ne spuntava un pezzo in fondo (Giorgia,
   27 settembre). Senza, il filo finisce esattamente sulla cruna.
   Capo piatto, non tondo: il tondo sporgeva oltre la cruna */
.filo-scia .maschera-tratto{
  fill:none; stroke:#fff; stroke-width:24;
  stroke-linecap:butt;
}

/* ---- barra di navigazione -------------------------------------- */
.barra{
  position:sticky; top:0; z-index:40;
  /* la stessa tela della pagina: la barra e un pezzo di stoffa, non
     una striscia di colore. Serve un fondo pieno perche ci scorre
     sotto il contenuto */
  background:url("../decori/tela-salvia.webp") 0 0/420px 420px var(--tela);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.barra.staccata{ border-bottom-color:var(--salvia-nebbia); box-shadow:0 2px 14px rgba(92,50,39,.05) }
.barra .dentro-largo{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding-block:12px;
}
/* Il marchio vero, dai vettoriali di Micromega.grafiche (24 settembre
   2026): il cerchio con l ago, e il nome come nel logo. Il nome NON e
   un carattere: nel file originale e in Timberline, qui e la scritta
   gia convertita in tracciati, cosi e identica su ogni schermo senza
   dover ospitare il carattere. File in ../marchio/, preparati da
   quelli in marchio/logo/ senza ridisegnare niente. */
/* Nella barra SOLO la scritta con la coccinella (24 settembre): il
   cerchio affiancato alla scritta non e nessuno dei due marchi di
   Giorgia, e il logo intero in verticale vorrebbe una barra alta. */
.marchio{ display:flex; align-items:center; text-decoration:none; color:inherit }
/* la scritta ha le proporzioni del file: 1473 x 455 */
.marchio-scritta{ height:56px; width:auto; aspect-ratio:1473/455 }

/* flex-wrap: serve SENZA JavaScript, dove in fila ci sono tutte e dieci
   le voci e a 1009 px di barra uscivano dal bordo (misurato il 30
   settembre 2026). Vanno a capo invece di traboccare. Con JavaScript le
   voci sono cinque e non ci arrivano mai. */
.menu{ display:flex; align-items:center; flex-wrap:wrap; gap:clamp(4px,1.4vw,20px) }
.menu a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px;
  /* bersaglio allargato senza spostare il testo */
  padding-inline:14px; margin-inline:-2px;
  color:var(--inchiostro); text-decoration:none; font-size:16px;
  position:relative; border-radius:8px;
  /* una voce non va a capo dentro se stessa: con sei voci, fra 700 e
     860px "I primi mesi" finiva su due righe. Sotto gli 860 il menu
     scende su una riga sua, vedi le larghezze in fondo */
  white-space:nowrap;
}
.menu a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:7px; height:1.5px;
  background:var(--salvia-scura);
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
/* il bottone Menu lo crea sito.js, e compare solo sul telefono:
   vedi le larghezze in fondo */
.menu-apri{ display:none }

/* ---- la voce "I mondi", 30 settembre 2026 ------------------------
   Nel menu mancavano tre porte su sei, e le porte si trovavano solo
   scorrendo la home. Misurato il 30 settembre: dieci voci in fila
   vogliono 1078 px di menu, piu 181 di marchio e 44 di margini, cioe
   una barra da 1300; il bottone Menu sarebbe comparso su quasi tutti
   i portatili. Quindi le sei porte stanno in una voce che si apre.
   Regola 6: lo stato di default e quello finale. Senza JavaScript le
   porte restano in fila come le altre voci, e il bottone non c e:
   lo crea sito.js, come quello del Menu. */
.menu .mondi{ display:contents }
.menu .voce-mondi{ display:none }

.js .menu .gruppo{ position:relative; display:inline-flex; align-items:center }
.js .menu .voce-mondi{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding-inline:14px; margin-inline:-2px;
  border:0; background:none; cursor:pointer;
  color:var(--inchiostro); font-family:inherit; font-size:16px;
  border-radius:8px; white-space:nowrap;
}
/* la punta di freccia, ruotata quando l elenco e aperto */
.js .menu .voce-mondi .punta{
  width:7px; height:7px; margin-top:-4px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform .2s ease;
}
.js .menu .gruppo.aperto .voce-mondi .punta{ transform:rotate(-135deg); margin-top:2px }
.js .menu .mondi{
  display:none;
  position:absolute; top:100%; left:0; z-index:60;
  flex-direction:column; min-width:236px; padding:6px;
  background:var(--fondo);
  border:1px solid var(--salvia-media); border-radius:12px;
  box-shadow:0 12px 28px rgba(12,2,2,.16);
}
.js .menu .gruppo.aperto .mondi{ display:flex }
.js .menu .mondi a{ justify-content:flex-start; width:100% }
.js .menu .mondi a::after{ left:14px; right:14px; bottom:9px }

/* ---- apertura --------------------------------------------------- */
.apertura{ position:relative; overflow:clip; padding-top:clamp(28px,4vw,54px) }
.apertura .dentro{ position:relative; z-index:1 }
.apertura-griglia{
  display:grid; gap:clamp(30px,5vw,64px); align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
}
.apertura h1{
  font-size:calc(clamp(32px,4.6vw,54px) * var(--scala-titolo)); line-height:1.15;
  color:var(--inchiostro-scuro); letter-spacing:-.01em;
}
.apertura .guida{ margin-top:20px; max-width:46ch }
/* due bottoni affiancati che vanno a capo restano staccati: flex con
   gap, ovunque. Era scritto solo per l apertura, e fuori da li i
   bottoni si toccavano */
.azioni{ display:flex; flex-wrap:wrap; gap:14px }
.apertura .azioni{ margin-top:32px }

/* la scena della rivelazione: il libro entra nella tasca.
   Oggi e disegnata col CSS, domani sono tre fotografie. */
.scena{
  position:relative; aspect-ratio:4/3; border-radius:6px;
  background:var(--salvia-nebbia);
  border:1px solid var(--salvia-media);
  overflow:hidden;
}
.scena-eti{
  position:absolute; left:14px; top:14px; z-index:3;
  font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--inchiostro);
  background:var(--fondo); border:1px solid var(--salvia-media);
  padding:5px 11px; border-radius:999px;
}
.cuscino{
  position:absolute; left:12%; right:12%; top:26%; bottom:10%;
  background-color:#D9CDB8;
  background-image:
    repeating-linear-gradient(0deg,  rgba(92,50,39,.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px);
  border-radius:4px;
  box-shadow:0 10px 26px rgba(92,50,39,.14);
}
.tasca{
  position:absolute; left:16%; right:16%; bottom:10%; height:38%;
  background-color:#CFC0A6;
  background-image:repeating-linear-gradient(90deg, rgba(92,50,39,.06) 0 1px, transparent 1px 3px);
  border-top:1.5px solid rgba(92,50,39,.22);
  border-radius:3px 3px 4px 4px;
  z-index:2;
}
/* Lo stato di DEFAULT e quello FINALE: il libro sta gia dentro la
   tasca. Senza JavaScript la pagina racconta comunque la cosa giusta.
   Il movimento lo aggiunge il JS, e solo se puo. */
.libro{
  position:absolute; left:32%; right:32%; z-index:1;
  height:46%; bottom:14%;
  background:var(--inchiostro);
  border-radius:2px 4px 4px 2px;
  box-shadow:-4px 0 0 rgba(12,2,2,.22) inset, 0 4px 12px rgba(92,50,39,.3);
}
.js .scena .libro{ bottom:44% }
.js .scena.entra .libro{ bottom:14%; transition:bottom 1.15s cubic-bezier(.3,.8,.35,1) .25s }

/* ---- le quattro porte -------------------------------------------- */
/* Le fasce nebbia sono la stessa tela con un velo salvia sopra: la
   trama continua da una fascia all altra, cambia solo il tono.
   Tono risultante, misurato: circa #E3E8DE (vedi MARCHIO.md). */
.porte{
  background:
    linear-gradient(color-mix(in srgb, var(--salvia-nebbia) 55%, transparent), color-mix(in srgb, var(--salvia-nebbia) 55%, transparent)),
    url("../decori/tela-salvia.webp") 0 0/420px 420px var(--tela);
}
/* Sul fondo nebbia l inchiostro chiaro vale 4,29:1, cioe sotto soglia
   per il testo piccolo: su queste sezioni l occhiello usa l inchiostro
   pieno, che vale 6,25:1. La matrice lo diceva gia (MARCHIO.md § 2),
   ed e stato usato lo stesso: trovato misurando, non rileggendo. */
.porte .occhiello{ color:var(--inchiostro) }
.porte-griglia{
  display:grid; gap:20px; margin-top:38px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
/* Le schede (porte, attivita, listino, i due modi, il campo del
   ricamo) dal 24 settembre sono tela schiarita, non piu crema: il
   crema appoggiato sulla tela bianco-verde tirava al rosato. Le
   stacca il bordo salvia media, come prima. */
.porta{
  display:flex; flex-direction:column;
  background:color-mix(in srgb, var(--tela) 82%, transparent);
  border:1px solid var(--salvia-media);
  border-radius:6px; padding:22px;
  text-decoration:none; color:inherit;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease;
}
.porta h3{ margin-bottom:8px }
.porta p{ font-size:16px }
.porta .avanti{
  margin-top:auto; padding-top:18px;
  /* maiuscole spaziate come i bottoni: variante D, 23 settembre */
  color:var(--inchiostro-scuro); font-weight:400; font-size:15px;
  letter-spacing:.14em; text-transform:uppercase;
}

/* ---- il ricamo: il momento che vale ------------------------------ */
.ricamo-griglia{
  display:grid; gap:clamp(28px,4vw,54px); align-items:start;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
}
.campo{ margin-top:26px }
/* etichetta, eta e prezzo: tondo 400 piu grande, niente neretto finto.
   In maiuscolo no: una frase intera cosi non si legge. Variante D */
.campo label{ display:block; font-size:18px; font-weight:400; margin-bottom:8px }
.campo input{
  width:100%; min-height:52px; padding:0 16px;
  background:var(--tela);
  border:1.5px solid var(--salvia-media); border-radius:6px;
}
/* input[type=text] da solo non prende gli input senza type */
.campo input:not([type]){ min-height:52px }
.campo .aiuto{ font-size:15px; margin-top:8px; color:var(--inchiostro) }

/* ---- il cuscino con la tasca, 27 settembre 2026 ------------------ */
/* Al posto del rettangolo "telaio" e dei tre tessuti: Giorgia ricama
   solo su tovagliato bianco latte, sulla tasca del cuscino. Misure
   vere: cuscino 45 x 45 cm, tasca alta 21, cioe il 46,7 per cento.
   Il corpo e a pois, come i cuscini delle sue foto, nei colori della
   palette. La scritta si misura sul cuscino (container query), non
   sulla finestra: cosi resta proporzionata a ogni larghezza */
.cuscino-prova{ max-width:440px; width:100%; justify-self:center }
.cuscino-ricamo{
  --tasca:46.7%;
  position:relative; aspect-ratio:1/1;
  container-type:inline-size;
  border-radius:20px 20px 22px 22px;
  /* salvia media e non nebbia (Giorgia, 27 settembre: "io vedo
     grigio"; la nebbia, con l ombra marrone sopra, tirava al grigio).
     Scelta fra i colori gia in uso, come ha chiesto lei */
  background:
    radial-gradient(circle, var(--tela) 0 1.8px, transparent 2.4px) 0 0/14px 14px,
    var(--salvia-media);
  /* imbottito: piu scuro verso i bordi, e appoggiato. Ombra dentro
     verde bosco, non marrone: il marrone sporcava il salvia */
  box-shadow:
    inset 0 0 34px color-mix(in srgb, var(--filo-cucitura) 30%, transparent),
    0 14px 26px rgba(92,50,39,.14);
  overflow:hidden;
}
.tasca-ricamo{
  position:absolute; left:0; right:0; bottom:0; height:var(--tasca);
  display:grid; place-items:center; padding:9cqi 8cqi 7cqi;
  background:
    repeating-linear-gradient(0deg,  rgba(92,50,39,.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(92,50,39,.03) 0 1px, transparent 1px 3px),
    var(--tovagliato);
  border-top:1px solid rgba(92,50,39,.18);
  box-shadow:0 -3px 8px rgba(92,50,39,.08), inset 0 -18px 26px rgba(92,50,39,.07);
}
/* la cucitura che chiude l orlo della tasca, col filo del sito */
.tasca-ricamo::before{
  content:""; position:absolute; left:4%; right:4%; top:3.2cqi;
  border-top:1.5px dashed var(--filo-cucitura); opacity:.55;
}
/* I tre caratteri delle scritte: liberi (SIL OFL), anche per lavoro
   e sul web. Quelli con cui Giorgia ricama davvero sono demo solo per
   uso personale: sul sito c e un anteprima, la grafica vera la fa lei
   dopo l ordine. Licenze in ../caratteri/LICENZA-OFL-scritte-del-ricamo.txt */
@font-face{
  font-family:"Cookie"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../caratteri/cookie-regular.ttf") format("truetype");
}
@font-face{
  font-family:"Yesteryear"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../caratteri/yesteryear-regular.ttf") format("truetype");
}
@font-face{
  font-family:"Courgette"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../caratteri/courgette-regular.ttf") format("truetype");
}
/* ogni carattere ha la sua misura: a parita di corpo Cookie e
   piccolo e Courgette largo. Tarati perche la frase di 60 caratteri
   stia nella tasca con tutti e tre (misurato, vedi CLAUDE.md) */
.tasca-ricamo .punto{
  font-family:"Cookie", cursive;
  font-size:clamp(20px, 8.6cqi, 40px); line-height:1.25;
}
.tasca-ricamo .punto[data-scritta="yesteryear"]{ font-family:"Yesteryear", cursive; font-size:clamp(18px, 7.2cqi, 34px); line-height:1.35 }
.tasca-ricamo .punto[data-scritta="courgette"]{ font-family:"Courgette", cursive; font-size:clamp(16px, 6.2cqi, 29px); line-height:1.4 }

.scritte-scelta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px }
.scritte-scelta p{ width:100%; font-size:16px; margin-bottom:2px }
.scritte-scelta button{
  min-height:48px; padding:0 18px;
  border:1.5px solid var(--salvia-media); border-radius:999px;
  background:transparent; color:var(--inchiostro-scuro);
  font-size:20px; line-height:1; cursor:pointer;
}
/* ogni bottone e scritto nel suo carattere: si sceglie guardando */
.scritte-scelta [data-scritta="cookie"]{ font-family:"Cookie", cursive; font-size:24px }
.scritte-scelta [data-scritta="yesteryear"]{ font-family:"Yesteryear", cursive }
.scritte-scelta [data-scritta="courgette"]{ font-family:"Courgette", cursive; font-size:17px }
.scritte-scelta button[aria-pressed="true"]{ border-color:var(--inchiostro-scuro); border-width:2px; background:var(--tovagliato) }
.cuscino-prova .nota{ margin-top:12px; text-align:center; font-size:14px; color:var(--inchiostro) }

/* I tessuti e il telaio li usa ancora solo home-lunga.html,
   l archivio: restano perche l archivio resti com era */
.tessuti-scelta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px }
.tessuti-scelta button{
  min-height:48px; padding:0 16px 0 44px;
  border:1.5px solid var(--salvia-media); border-radius:999px;
  background-color:transparent; background-repeat:no-repeat;
  background-position:12px center; background-size:22px 22px;
  font-size:16px; cursor:pointer;
}
.tessuti-scelta button[aria-pressed="true"]{ border-color:var(--inchiostro-scuro); border-width:2px }

.telaio{
  position:relative; aspect-ratio:3/2; border-radius:6px; overflow:hidden;
  background-color:#D9CDB8;
  border:1px solid var(--salvia-media);
  display:grid; place-items:center; padding:28px;
  box-shadow:inset 0 0 40px rgba(92,50,39,.10);
}
.telaio::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(92,50,39,.06) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px);
}
.punto{
  position:relative; z-index:1; text-align:center;
  font-family:"Segoe Script","Brush Script MT",cursive;
  font-size:clamp(24px,3.4vw,38px); line-height:1.35;
  color:var(--inchiostro-scuro);
  overflow-wrap:anywhere;
}
.telaio .nota{
  position:absolute; left:0; right:0; bottom:10px; z-index:1;
  text-align:center; font-size:14px; color:var(--inchiostro);
}

/* ---- blocchi racconto ------------------------------------------- */
.racconto-griglia{
  display:grid; gap:clamp(28px,5vw,64px); align-items:center;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.racconto-griglia.ribaltato .testo{ order:2 }
.racconto-griglia.ribaltato .figura{ order:1 }
.figura{ margin:0 }
.figura .ph{ aspect-ratio:4/3 }
.figura figcaption{ font-size:15px; margin-top:10px; color:var(--inchiostro) }

/* ---- fotografie -------------------------------------------------- */
/* width e height sono dichiarati nel markup: senza, la pagina si
   allunga mentre carica e chi arriva con un ancora atterra altrove */
.foto{
  width:100%; height:auto;
  border-radius:6px;
  background:var(--salvia-nebbia);   /* sta li mentre carica */
  box-shadow:0 10px 28px rgba(92,50,39,.13);
}
.foto-alta{ aspect-ratio:3/4; object-fit:cover }
.foto-bassa{ aspect-ratio:4/3; object-fit:cover }
.foto-quadra{ aspect-ratio:1/1; object-fit:cover }

/* ---- fascia scura ------------------------------------------------ */
.fascia{ background:var(--salvia-scura); color:var(--fondo) }
.fascia h2, .fascia h3{ color:var(--fondo) }
.fascia .occhiello{ color:var(--salvia-nebbia) }
.fascia .btn{ background:var(--fondo); color:var(--inchiostro-scuro) }
.fascia .btn-lieve{ background:transparent; color:var(--fondo); border-color:var(--salvia-nebbia) }
/* i laboratori in poche righe, dentro la fascia dell educatrice.
   Serve alla home ridotta (proposta del 23 settembre): in index.html
   la classe non c e, quindi la regola li non fa niente */
.laboratori-breve{
  margin-top:clamp(36px,5vw,56px); padding-top:clamp(28px,4vw,40px);
  border-top:1px solid var(--salvia-media);
}

/* ---- come si fa ad averlo ---------------------------------------- */
.modi{ display:grid; gap:20px; margin-top:38px; grid-template-columns:repeat(2,minmax(0,1fr)) }
.modo{ background:color-mix(in srgb, var(--tela) 82%, transparent); border:1px solid var(--salvia-media); border-radius:6px; padding:26px }
.modo .prezzo{ font-size:29px; font-weight:400; color:var(--inchiostro-scuro); margin-top:14px }
.modo .prezzo small{ display:block; font-size:15px; font-weight:400; color:var(--inchiostro) }
.modo .btn{ margin-top:20px }

/* ---- storie e laboratori ------------------------------------------ */
/* La sezione sta su fondo nebbia: le schede sono crema col bordo
   salvia media, che e quello che le fa esistere (MARCHIO.md § 3). */
.attivita-griglia{
  display:grid; gap:20px; margin-top:clamp(36px,5vw,56px);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.attivita{
  background:color-mix(in srgb, var(--tela) 82%, transparent);
  border:1px solid var(--salvia-media);
  border-radius:6px; padding:22px;
}
.attivita h3{ margin-bottom:8px }
.attivita p{ font-size:16px }
/* le eta: una riga separata sotto, col filetto, perche e la cosa
   che un genitore cerca con gli occhi */
.attivita .eta{
  margin-top:12px; padding-top:10px;
  border-top:1px solid var(--salvia-nebbia);
  color:var(--inchiostro-scuro); font-weight:400; font-size:18px;
}
/* tre foto in fila sotto le schede, una colonna sola sui telefoni */
.laboratori-foto{
  display:grid; gap:16px; margin-top:clamp(28px,4vw,44px);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
/* il collegamento alla cooperativa: testo, non bottone, e 44px
   di bersaglio senza spostare la riga */
.attivita .esterno{
  display:inline-flex; align-items:center; min-height:44px;
  margin-top:6px; color:var(--inchiostro-scuro); font-size:16px;
}

/* ---- i disegni delle grafiche coordinate ------------------------ */
/* Rocchetti, forbici, ago e macchina da cucire, staccati dalla
   "grafica vuota" di Giorgia (24 settembre 2026). Sono SAGOME: il
   file porta solo la forma, il colore lo mette --disegno da
   palette.css, cosi si cambia in un punto solo. Stanno dietro al
   contenuto, non ricevono clic, e sforano dai bordi come nelle sue
   grafiche; la sezione li taglia (overflow:clip) cosi la pagina non
   scorre di lato. Chiarissimi di proposito: sono tela, non immagini. */
.con-decori{ position:relative; overflow:clip }
.con-decori > .dentro,
.con-decori > .dentro-largo{ position:relative; z-index:1 }
.decoro{
  position:absolute; z-index:0; pointer-events:none;
  background-color:var(--disegno);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
}
.decoro.rocchetto{ -webkit-mask-image:url("../decori/rocchetto.webp"); mask-image:url("../decori/rocchetto.webp");
  aspect-ratio:410/456; width:clamp(120px,16vw,210px) }
.decoro.rocchetto-piccolo{ -webkit-mask-image:url("../decori/rocchetto-piccolo.webp"); mask-image:url("../decori/rocchetto-piccolo.webp");
  aspect-ratio:273/245; width:clamp(100px,12vw,160px) }
.decoro.forbici{ -webkit-mask-image:url("../decori/forbici.webp"); mask-image:url("../decori/forbici.webp");
  aspect-ratio:498/592; width:clamp(140px,19vw,250px) }
.decoro.ago{ -webkit-mask-image:url("../decori/ago.webp"); mask-image:url("../decori/ago.webp");
  aspect-ratio:110/343; width:clamp(34px,3.6vw,52px) }
.decoro.macchina{ -webkit-mask-image:url("../decori/macchina.webp"); mask-image:url("../decori/macchina.webp");
  aspect-ratio:390/317; width:clamp(140px,17vw,230px) }
/* dove stanno: sempre ai bordi, mai in mezzo alla colonna di testo */
/* piu in basso della barra, che altrimenti lo copriva, e quasi
   tutto nel margine, fuori dalla colonna del titolo */
.decoro.alto-sinistra{ top:18px; left:-78px }
.decoro.basso-destra{ right:-44px; bottom:36px }
.decoro.basso-sinistra{ left:-24px; bottom:20px }
.decoro.destra{ right:4%; top:14% }
.decoro.destra-centro{ right:5%; top:50%; transform:translateY(-50%) }

/* ---- le polaroid ------------------------------------------------ */
/* Dal Figma di Giorgia (RILIEVO.md 2: una delle tre cose che la
   rendono sua): le foto chiuse in una cornice col bordo basso piu
   alto, crema o tan, appena storte, "come oggetti appoggiati invece
   che come immagini incollate". Il criterio, per non farne un tema:
   - SI alla foto principale di un racconto, alternando colore e verso;
   - SI alle foto piccole in fila (laboratori, galleria di un mondo);
   - NO alle copertine di Storie di velluto e alle griglie lunghe.
   La didascalia sta nella striscia bassa, dove si scrive sulle vere.
   La rotazione usa la proprieta rotate, NON transform: la comparsa
   (.rivela.vista) scrive transform:none e la cancellerebbe. */
.polaroid{
  background:var(--fondo);
  padding:12px 12px 14px;
  border-radius:2px;
  box-shadow:0 1px 2px rgba(92,50,39,.10), 0 12px 28px rgba(92,50,39,.14);
  rotate:var(--storto, 0deg);
}
.polaroid.tan{ background:var(--polaroid-tan) }
.polaroid .foto{ border-radius:0; box-shadow:none }
/* figure.polaroid e non .polaroid: .figura figcaption e .ricamo-vero
   figcaption hanno lo stesso peso e gli toglievano i margini */
figure.polaroid figcaption{
  margin:0; padding:12px 4px 4px; min-height:34px;
  text-align:center; font-size:15px; font-style:italic; line-height:1.4;
  color:var(--inchiostro-scuro);
}
/* senza didascalia la striscia bassa resta, come su una polaroid vera */
.polaroid:not(:has(figcaption)){ padding-bottom:46px }
.polaroid.storta-sinistra{ --storto:-1.8deg }
.polaroid.storta-destra{ --storto:1.5deg }
/* le foto in fila: ognuna un po diversa, come appoggiate a mano */
.in-fila .polaroid:nth-child(odd){ --storto:-1.6deg }
.in-fila .polaroid:nth-child(even){ --storto:1.2deg; background:var(--polaroid-tan) }
/* Una polaroid piccola appoggiata sull'angolo in alto a sinistra della
   grande, come un dettaglio (set asilo, 28 settembre 2026, chiesto da
   Giorgia). Sul telefono resta dentro il margine della pagina */
.foto-con-dettaglio{ position:relative }
.foto-con-dettaglio .polaroid.dettaglio{
  position:absolute; top:-22px; left:-26px; z-index:1;
  width:42%; padding:8px 8px 22px; --storto:-4deg;
}
@media (max-width:860px){
  .foto-con-dettaglio .polaroid.dettaglio{ top:-16px; left:-8px }
}
/* una cosa ruotata e piu larga di se stessa: la pagina non deve
   scorrere di lato per un angolo di foto (tabella trappole della skill) */
main{ overflow-x:clip }

/* il marchio grande, nella sezione del nome: il logo intero come
   quello ufficiale, cerchio sopra e scritta sotto SENZA coccinella e
   in proporzione al cerchio (Giorgia, 24 settembre: la prima versione
   univa il cerchio alla scritta con la coccinella, che e un altro
   marchio). File unico, ../marchio/logo-intero.svg */
.logo-grande{ display:block; width:min(80%, 360px); height:auto; aspect-ratio:381/512; margin-inline:auto }

/* ---- le pagine dei mondi ------------------------------------------ */
/* L apertura di un mondo: il nome, la frase della sua porta, e la
   cucitura animata sul bordo, come in home. Senza foto: le foto vere
   stanno subito sotto, nei racconti. */
.mondo-apertura .guida{ margin-top:18px; max-width:52ch }
.mondo-apertura{ padding-bottom:clamp(88px,10vw,128px) }

/* la voce del menu della pagina in cui si e */
.menu a[aria-current="page"]{ color:var(--inchiostro-scuro) }
.menu a[aria-current="page"]::after{ transform:scaleX(1) }

/* Il listino: una riga per prodotto, nome e due parole a sinistra,
   cifra a destra. Righe crema col bordo salvia media sul fondo
   nebbia (MARCHIO.md § 3: la nebbia regge solo col bordo). */
.listino{ display:grid; gap:12px; margin-top:clamp(28px,4vw,40px) }
.listino li{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 24px;
  align-items:center;
  background:color-mix(in srgb, var(--tela) 82%, transparent);
  border:1px solid var(--salvia-media); border-radius:6px;
  padding:18px 22px;
}
.listino h3{ font-size:clamp(19px,2vw,22px) }
.listino .cosa{ font-size:16px; margin-top:4px }
.listino .cifra{ font-size:26px; color:var(--inchiostro-scuro); white-space:nowrap; text-align:right }
/* Il prezzo che manca si vede, come lo slot del logo: una pagina
   pronta con un buco dichiarato e meglio di un numero inventato.
   Prima di pubblicare non ne deve restare nessuno. */
.listino .cifra.da-inserire{
  font-size:14px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--inchiostro);
  border:1.5px dashed var(--salvia-media); border-radius:999px;
  padding:8px 14px; white-space:normal;
}
.listino-nota{ font-size:16px; margin-top:18px; max-width:60ch }
/* La descrizione che manca, 27 settembre 2026: Giorgia la scrive in
   scrivi-testi.html. Si vede, come il prezzo da inserire, e prima di
   pubblicare non ne deve restare nessuna */
.listino .cosa.da-scrivere{ font-style:italic; text-decoration:underline dashed var(--salvia-media); text-underline-offset:4px }

/* ---- i link che escono dal sito (linus v2, 12 ottobre 2026) -------- */
/* la freccia dice "si va fuori" a chi guarda; a chi ascolta lo dice
   il testo nascosto. Il testo resta leggibile dai lettori di schermo,
   ma non occupa spazio */
.freccia-fuori{ white-space:nowrap }
.solo-lettori{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---- galleria ------------------------------------------------------ */
.galleria-griglia{
  display:grid; gap:16px; margin-top:38px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
/* nelle pagine dei mondi: le foto di quel mondo soltanto */
.galleria-griglia.due{ grid-template-columns:repeat(2,minmax(0,1fr)) }
/* tre foto (i fiocchi nascita, 30 settembre 2026): la prima sta sopra da
   sola, al centro, e le altre due sotto, tutte larghe uguali. In fila da
   tre, accanto al testo, sul computer erano larghe 129 px */
.galleria-griglia.tre{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.galleria-griglia.tre > :first-child{ grid-column:1 / -1; justify-self:center; width:calc(50% - 8px) }
/* due foto dove conta il dettaglio (le ali, 27 ottobre 2026): sul
   telefono affiancate erano larghe 140 px, una sotto l altra 300 */
@media (max-width:600px){
  .galleria-griglia.due.una-sul-telefono{ grid-template-columns:minmax(0,1fr); max-width:320px !important }
}
/* "Guarda anche": le altre tre porte */
.porte-griglia.tre{ grid-template-columns:repeat(3,minmax(0,1fr)) }
/* cinque porte, dal 27 settembre 2026 con Piccoli passi nel mondo:
   tre sopra e due sotto, centrate. Cinque in fila a 1060 px sono
   larghe 196 l una, e i testi andavano su sei righe */
.porte-griglia.cinque{ grid-template-columns:repeat(6,minmax(0,1fr)) }
.porte-griglia.cinque > *{ grid-column:span 2 }
.porte-griglia.cinque > :nth-child(4){ grid-column:2 / span 2 }
.porte-griglia.cinque > :nth-child(5){ grid-column:4 / span 2 }
#guarda-anche .porte-griglia{ margin-top:28px }

/* la foto del ricamo vero, accanto alla prova interattiva */
.ricamo-vero{ margin:22px 0 0 }
.ricamo-vero figcaption{ font-size:15px; margin-top:10px; color:var(--inchiostro) }

/* ---- piede -------------------------------------------------------- */
.piede{
  background:
    linear-gradient(color-mix(in srgb, var(--salvia-nebbia) 55%, transparent), color-mix(in srgb, var(--salvia-nebbia) 55%, transparent)),
    url("../decori/tela-salvia.webp") 0 0/420px 420px var(--tela);
  padding-block:clamp(44px,6vw,80px);
}
/* In cima al piede, la cucitura a punto filza della cornice delle
   grafiche coordinate, trattini lunghi come i suoi, circa 22 su 40.
   Nelle grafiche e menta (#78B781): qui e salvia media, perche la
   famiglia scelta da Giorgia e la salvia (ricordato il 24 settembre).
   Separa il piede dalla sezione sopra quando hanno lo stesso tono,
   e chiude ogni pagina con una cucitura. Un bordo dashed del CSS
   farebbe trattini corti e tutti uguali: qui sono disegnati. */
.piede{
  position:relative;
}
.piede::before{
  content:""; position:absolute; left:0; right:0; top:10px; height:2px;
  background:linear-gradient(to right, var(--salvia-media) 0 22px, transparent 22px 40px) 8px 0/40px 2px repeat-x;
  border-radius:1px; pointer-events:none;
}
/* il nome nel piede: la stessa scritta del marchio */
.piede-marchio img{ display:block; height:60px; width:auto; aspect-ratio:1473/455 }
.piede-griglia{ display:grid; gap:34px; grid-template-columns:1.2fr 1fr 1fr }
.piede h3{ font-size:18px; margin-bottom:12px }
.piede li{ margin-bottom:2px }
/* i link del piede sono bersagli come gli altri: 44px anche qui.
   Padding per l area toccabile, margin negativo uguale e contrario,
   cosi il testo non si sposta di un pixel. */
.piede li a{
  display:inline-flex; align-items:center;
  min-height:44px; min-width:44px;
  padding-inline:10px; margin-inline:-10px;
  color:var(--inchiostro-scuro); border-radius:6px;
}
.piede .minuto{ font-size:15px; margin-top:26px }
/* la riga legale in fondo al piede, 29 settembre 2026: ditta, partita
   IVA e la pagina della privacy. Una cucitura sopra, come in cima */
.piede-legale{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 24px;
  margin-top:40px; padding-top:18px;
  background:linear-gradient(to right, var(--salvia-media) 0 22px, transparent 22px 40px) 8px 0/40px 2px repeat-x;
  font-size:15px;
}
.piede-legale a{
  display:inline-flex; align-items:center; min-height:44px;
  padding-inline:10px; margin-inline:-10px;
  color:var(--inchiostro-scuro); border-radius:6px;
}
/* la pagina della privacy: titoli piu piccoli di quelli dei racconti */
#privacy h2{ font-size:clamp(22px,2.4vw,28px) }
#privacy a{ color:var(--inchiostro-scuro) }

/* ---- segnaposto delle immagini ------------------------------------ */
/* Un fondo fissato pretende colori fissati: qui il colore e
   dichiarato pieno sotto le righe, cosi il contrasto e vero. */
.ph{
  background-color:#E6E2D6;
  background-image:repeating-linear-gradient(45deg,#E9E5DA 0 9px,#E1DCD0 9px 18px);
  border:1px solid var(--salvia-media); border-radius:4px;
  display:grid; place-items:center; text-align:center; padding:16px;
  color:#4A4036; font-size:14px; letter-spacing:.06em; text-transform:uppercase;
}

/* ---- comparse ------------------------------------------------------ */
.js .rivela{ opacity:0; transform:translateY(20px) }
/* lo stato "comparso" si chiama vista, NON dentro: dentro e il nome
   del contenitore, e ogni blocco comparso ne ereditava i 22px di
   margine interno (misurato: foto larghe 228px in colonne da 272) */
.js .rivela.vista{
  opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}

:focus-visible{ outline:3px solid var(--inchiostro-scuro); outline-offset:3px; border-radius:6px }

/* hover solo dove il puntatore e fine: sui touch il tap incolla lo
   stato hover all ultimo elemento toccato */
@media (hover:hover) and (pointer:fine){
  .menu a:hover::after{ transform:scaleX(1) }
  .btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(92,50,39,.20) }
  .porta:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(92,50,39,.13) }
  .tessuti-scelta button:hover{ border-color:var(--inchiostro-scuro) }
}

/* ---- larghezze ------------------------------------------------------ */
@media (max-width:1000px){
  .porte-griglia,
  .porte-griglia.tre,
  .porte-griglia.cinque{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .porte-griglia.cinque > :nth-child(n){ grid-column:auto }
  .galleria-griglia{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .piede-griglia{ grid-template-columns:1fr 1fr }
}
/* Le file lunghe (Natale, 28 settembre 2026): con 16 polaroid su due
   colonne a 768 px erano alte 3195 px. Ora sono 8, a rotazione, ma
   quattro colonne fino a 600 px restano meglio; sotto tornano due */
@media (min-width:600px) and (max-width:1000px){
  .galleria-griglia.molte{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px }
}
@media (max-width:860px){
  .apertura-griglia,
  .ricamo-griglia,
  .racconto-griglia{ grid-template-columns:1fr }
  .racconto-griglia.ribaltato .testo{ order:1 }
  .racconto-griglia.ribaltato .figura{ order:2 }
  .modi{ grid-template-columns:1fr }
  .attivita-griglia{ grid-template-columns:1fr }
  .laboratori-foto{ grid-template-columns:1fr 1fr }
  .laboratori-foto .figura:last-child{ display:none }
  /* era a 680px con cinque voci; con sei il menu non sta accanto al
     marchio sotto gli 860 (misurato: a 700 la pagina scorreva di lato) */
  .barra .dentro-largo{ flex-wrap:wrap; justify-content:center; row-gap:4px }
  .menu{ order:2; flex-wrap:wrap; justify-content:center }
  .marchio{ order:1 }
}
@media (max-width:480px){
  /* La variante D sul telefono: misurato il 24 settembre, a 390 px tre
     bottoni andavano su due righe e a 320 molti di piu. Il 23 avevo
     detto il contrario: la sonda contava "a capo" solo sopra i 60 px
     di altezza, e un bottone su due righe e alto 53. Qui le maiuscole
     restano, meno spaziate e con meno aria ai lati; se proprio va a
     capo, il testo sta al centro invece che appeso a sinistra. */
  /* con Old Standard (24 settembre), piu largo di Sorts Mill Goudy,
     a 390 px "Sto cercando per un neonato" tornava su due righe:
     spaziatura .05em e margine interno 16 */
  .btn{ font-size:15px; letter-spacing:.05em; padding-inline:16px; text-align:center }
}
@media (max-width:680px){
  /* la barra sul telefono e gia alta (il menu va a capo): la scritta
     si stringe un po, resta leggibile. Vale senza JavaScript: con, la
     barra e quella del bottone Menu, qui sotto */
  .marchio-scritta{ height:46px }
  /* sul telefono la colonna e una sola: il disegno dell apertura dei
     mondi, che sul computer sta nel vuoto a destra, finiva sotto il
     titolo (misurato a 390 e 320). Qui scende nell angolo in basso,
     piccolo e mezzo fuori dal bordo, vicino alla cucitura */
  .decoro.destra-centro{ top:auto; bottom:14px; right:-22px; transform:none; width:96px }
  /* l ago e stretto e lungo: largo 96 sarebbe alto 300 */
  .decoro.ago.destra-centro{ width:30px; right:14px }
  .piede-griglia{ grid-template-columns:1fr }
  /* sul telefono la cifra va sotto il nome, non accanto */
  .listino li{ grid-template-columns:1fr }
  .listino .cifra{ text-align:left }
  .listino .cifra.da-inserire{ justify-self:start }
}

@media (max-width:860px){
  /* La barra su telefono e tablet: il marchio e un bottone Menu, che
     apre le pagine sotto la barra, una per riga. Scelta C del
     confronto del 27 settembre 2026 (../confronto-barra.html): col
     menu a capo la barra, che resta attaccata in cima, era alta 168 px
     a 390, 216 a 320 e 129 sul tablet; cosi 61. Prima solo sotto i
     680, esteso al tablet lo stesso giorno (Giorgia: "estendilo anche
     al tablet"). 860 e la soglia dove il menu non sta piu accanto al
     marchio. Tutto sotto la classe js: senza JavaScript il bottone
     non esiste e il menu resta aperto, com era. Blocco DOPO quello dei
     680, perche la scritta a 42 vinca sui 46 */
  .js .barra .dentro-largo{ flex-wrap:nowrap; justify-content:space-between; padding-block:8px }
  .js .marchio-scritta{ height:42px }
  /* order 3: sotto gli 860 il marchio ha order 1, e il bottone
     senza ordine gli passava davanti, a sinistra */
  .js .menu-apri{
    order:3;
    display:inline-flex; align-items:center; gap:10px;
    min-height:44px; min-width:44px; padding:0 16px;
    background:transparent; border:1.5px solid var(--salvia-media); border-radius:999px;
    color:var(--inchiostro-scuro); font-size:15px; letter-spacing:.08em; text-transform:uppercase;
    cursor:pointer;
  }
  /* le tre righe disegnate col bordo, niente icone ne emoji */
  .js .menu-apri .linee{
    position:relative; width:16px; height:10px;
    border-top:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  }
  .js .menu-apri .linee::after{
    content:""; position:absolute; left:0; right:0; top:50%;
    border-top:1.5px solid currentColor; transform:translateY(-50%);
  }
  .js .menu{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    padding:4px 22px 14px;
    background:url("../decori/tela-salvia.webp") 0 0/420px 420px var(--tela);
    border-bottom:1px solid var(--salvia-nebbia);
    box-shadow:0 12px 22px rgba(92,50,39,.10);
  }
  .js .barra.menu-aperto .menu{ display:flex }
  .js .menu a{
    justify-content:flex-start; min-height:50px; margin:0; padding-inline:4px;
    font-size:18px; border-radius:0; border-bottom:1px solid var(--salvia-nebbia);
  }
  .js .menu a:last-child{ border-bottom:0 }
  .js .menu a::after{ left:4px; right:auto; width:2.2em; bottom:9px }

  /* Nel pannello del telefono lo spazio in verticale non manca: le sei
     porte tornano in fila con le altre voci, e il bottone "I mondi"
     sparisce. display:contents le rende figlie dirette del pannello,
     cosi prendono il bordo e l altezza delle altre voci. Serve anche
     sulla regola .aperto, che ha piu peso di quella di partenza. */
  .js .menu .gruppo,
  .js .menu .mondi,
  .js .menu .gruppo.aperto .mondi{
    display:contents;
    position:static; padding:0; border:0; box-shadow:none; background:none;
  }
  .js .menu .voce-mondi{ display:none }
}

/* ---- chi ha chiesto meno movimento ---------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ transition:none !important; animation:none !important }
  .js .rivela{ opacity:1; transform:none }
  .js .scena .libro{ bottom:14% }
  .filo-scia .maschera-tratto{ stroke-dasharray:none !important; stroke-dashoffset:0 !important }
}