@charset "UTF-8";
/* =====================================================================
   WEA26 — WEmbrace Awards 2026
   Foglio di stile dedicato al template `template-wea26.php`.

   Caricato SOLO da quel template (vedi functions.php → a4s_wea26_assets).
   Non tocca header, footer e socket: tutte le regole vivono dentro
   `.wea26-scope`, il wrapper aperto dal template attorno al contenuto ALB.

   ---------------------------------------------------------------------
   COME FUNZIONA (leggere prima di modificare)
   ---------------------------------------------------------------------
   Enfold 7.1 genera i propri colori consumando custom property proprie:
       .main_color { background-color: var(--enfold-main-color-bg); ... }
   Qui NON riscriviamo quelle regole: ridefiniamo le variabili dentro
   `.wea26-scope`. L'intera pagina (sezioni, bottoni, link, masonry,
   iconlist, tab, tabelle, form) assume la palette WEA26 senza guerre di
   specificità e senza `!important`.

   TRE LIVELLI DI SPECIFICITÀ, usati con criterio
   ----------------------------------------------
   In gioco ci sono quattro fogli, in quest'ordine di caricamento:
       1. enfold/css/*.css        selettori tipo `.avia-button`      (0,1,0)
       2. dynamic_avia/a4s.css    opzioni tema, tipo `#top .x`       (1,1,0)
       3. enfold-child/style.css  regole del sito, `#top #wrap_all .x`(2,1,1)
       4. wea26.css               questo file
       5. avia_posts_css/post-N   CSS per-elemento dell'editor, prio 1e6

   Da cui:
     · TIER A  `#top .wea26-scope …`             (1,2,0)
       Default della brand identity. Batte Enfold e le opzioni tema di
       a4s.css; resta sotto al CSS per-elemento dell'editor, che sta a
       (1,3,0)/(2,2,0) o pareggia caricandosi dopo. Usare quasi sempre.
       ATTENZIONE: NON promuovere a TIER A una proprietà che l'editor
       può impostare da solo con un selettore a un id o meno — vedi
       `.av-subheading` al §4, dove il corpo lo decide l'editor.

     · TIER B  `#top.wea26 #main .wea26-scope …` (2,2,0)
       Serve solo per superare `#top #wrap_all .all_colors …` di
       style.css. Riservato ai titoli e alle card masonry.

     · TOKEN   `.wea26-scope { --… }`
       Le variabili non competono per specificità: vince l'antenato più
       vicino. Restano senza prefisso.

   ---------------------------------------------------------------------
   MAPPATURA CAMPI EDITOR → RISULTATO WEA26  (nessuna classe da scrivere)
   ---------------------------------------------------------------------
   Elemento «Color Section» → Styling → «Section Colors»:
     Main Content        → superficie CARTA   (#F7F5F0, testo Ink)
     Alternate Content   → superficie BLU BIC (#211FB4, testo Carta)
     Footer              → superficie INK     (#1A1917, testo Carta)
     Socket              → superficie CARTA 2 (carta un tono più marcato)
     Logo Area           → NON USARE in pagina (è lo schema dell'header)

   Gerarchia dei titoli (come nel manuale, sez. 05 e 07):
     h1 / h2  Fraunces 400, corpo grande, INK su Carta / Carta su Blu
     h3       Fraunces 400, BLU BIC — il livello che «parla»
     h4       DM Sans 700, corpo testo — etichetta, non titolo
     h5 / h6  Intel One Mono maiuscolo — micro-info

   Elemento «Heading» → campo «Subheading»:
     posizione SOPRA  → occhiello Intel One Mono spaziato (Voce 03)
     posizione SOTTO  → catenaccio Fraunces corsivo      (Voce 02)

   Bottoni: «Button Color → Theme Color» dà il pieno della superficie,
   «Light» dà il contorno di 1px. Nessun colore custom da impostare.

   ---------------------------------------------------------------------
   CLASSI CUSTOM (campo «Custom CSS Class» di ogni elemento ALB)
   ---------------------------------------------------------------------
   Voci tipografiche (manuale §05)
     wea-claim     Voce 02 · Fraunces      claim, titoli, nomi dei vincitori
     wea-hand      Voce 01 · Caveat        concetti chiave, firme, #PeopleMatter
     wea-meta      Voce 03 · Intel One Mono date, orari, codici, logistica
     wea-body      Voce 04 · DM Sans       testo lungo, comunicazioni di servizio

   Scala (manuale §07 · «contrasto di scala, niente livelli intermedi»)
     wea-display   estremo alto            titolo a piena pagina
     wea-caption   estremo basso           micro-info

   Gesto (manuale §01 e §07 · «il gesto sopra il testo», crayon ≤ 5%)
     wea-accent    colora di Crayon        SOLO testo grande o elemento grafico
     wea-mark      tratto crayon sul testo evidenziazione a pennarello
     wea-tilt      rotazione −2.5°         titoli manoscritti (mai oltre 5°)
     wea-tilt-r    rotazione +2.5°

   Layout (manuale §07 · asimmetria, aria, margini ampi)
     wea-measure   misura di lettura centrata (~64 caratteri)
     wea-narrow    colonna stretta         max 40rem
     wea-air       respiro verticale ampio
     wea-card      riquadro carta          blocco Carta dentro sezione Blu
     wea-fill      immagine a piena colonna

   Tutto il resto si fa con i campi nativi dell'editor.

   ---------------------------------------------------------------------
   §12 e §13 non sono classi da campo «Custom CSS Class»: il layer
   icone e la sezione «Altre storie» li scrive functions.php
   (a4s_wea26_render_icons, a4s_wea26_render_related_stories). Vedi i
   due paragrafi in fondo al file per il perché dell'ordine nel DOM.
   ===================================================================== */


/* =====================================================================
   1 · DESIGN TOKEN
   ===================================================================== */
.wea26-scope {

	/* --- Palette (manuale §04) --------------------------------------- */
	--wea-blue:         #211FB4;   /* Blu Bic · Pantone 2736 · primario     */
	--wea-blue-deep:    #16155F;   /* derivato: superfici profonde, hover   */
	--wea-crayon:       #EE263E;   /* Crayon · Pantone 1788 · SOLO gesto    */
	--wea-paper:        #F7F5F0;   /* Carta · superficie                    */
	--wea-paper-2:      #EFECE4;   /* Carta marcata · piani sovrapposti     */
	--wea-ink:          #1A1917;   /* Ink · testo e titoli                  */
	--wea-neutral:      #8B8678;   /* Warm Gray 9 · linee, elementi grafici */

	/* Varianti accessibili: stessa identità, contrasto conforme.
	   Crayon (3.87:1) e Neutral (3.34:1) su Carta non passano AA per il
	   testo normale; queste due servono dove il colore diventa testo. */
	--wea-crayon-text:  #C4102A;   /* 5.58:1 su Carta                       */
	--wea-neutral-text: #6E6A5E;   /* 4.96:1 su Carta                       */

	/* Linee: il tratto di penna, non il bordo di una UI */
	--wea-line:         rgba(26, 25, 23, .14);
	--wea-line-strong:  rgba(26, 25, 23, .30);
	--wea-line-inv:     rgba(247, 245, 240, .26);

	/* --- Tipografia (manuale §05) ------------------------------------ */
	--wea-font-hand:  "Caveat", "Segoe Script", "Bradley Hand", cursive;
	--wea-font-claim: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--wea-font-meta:  "Intel One Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--wea-font-body:  "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	/* Scala. Il rapporto fra i due estremi è ~10:1 (136px → 13px): il
	   manuale chiede contrasto estremo e nessun livello intermedio, e
	   sono i due gradini che fanno il carattere della pagina. */
	--wea-size-display: clamp(2.75rem, 1.2rem + 5.4vw, 6rem);
	--wea-size-title:   clamp(2rem, 1.15rem + 3.4vw, 3.5rem);
	--wea-size-sub:     clamp(1.3rem, 1.1rem + 0.85vw, 1.75rem);
	--wea-size-body:    clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
	--wea-size-caption: 0.8125rem;   /* micro-info, didascalie, ruoli      */
	--wea-size-ui:      0.75rem;     /* etichette bottoni e chrome         */

	--wea-lh-display: 0.92;
	--wea-lh-title:   1.04;
	--wea-lh-body:    1.6;
	--wea-track-meta:    0.05em;   /* mono corrente                        */
	--wea-track-eyebrow: 0.15em;   /* occhielli, molto spaziati            */

	/* Pesi. Fraunces sta a 400: il manuale dice che la Voce 02 «non urla,
	   non spiega: enuncia». Il grassetto è riservato alle etichette h4. */
	--wea-weight-claim: 400;
	--wea-weight-label: 700;

	/* --- Ritmo e superficie ------------------------------------------ */
	--wea-measure:  64ch;
	--wea-narrow:   40rem;
	--wea-air:      clamp(3.5rem, 7vw, 6rem);
	--wea-tilt:     -2.5deg;
	--wea-rule:     2px;           /* spessore del tratto crayon           */

	/* Raggi. Le immagini restano a spigolo vivo — è carta, non una UI —
	   mentre bottoni e riquadri prendono l'arrotondamento minimo del
	   manuale (3–6px), quel tanto che basta a dirli «oggetti». */
	--wea-radius:      0px;
	--wea-radius-ui:   4px;
	--wea-radius-card: 6px;
}


/* =====================================================================
   2 · MAPPATURA SUGLI SCHEMI COLORE ENFOLD
   Ridefinisce le custom property che Enfold 7.1 consuma nelle proprie
   regole. Restano dentro `.wea26-scope`: header, footer e socket del
   sito non vedono nulla di tutto questo.
   ===================================================================== */
.wea26-scope {

	/* --- «Main Content» → CARTA ------------------------------------- */
	/* heading = Ink: i titoli grossi sono inchiostro, il Blu Bic entra
	   al livello h3 (vedi §2bis). È la gerarchia del manuale. */
	--enfold-main-color-bg:             var(--wea-paper);
	--enfold-main-color-color:          var(--wea-ink);
	--enfold-main-color-heading:        var(--wea-ink);
	--enfold-main-color-primary:        var(--wea-blue);
	--enfold-main-color-secondary:      var(--wea-crayon-text);
	--enfold-main-color-meta:           var(--wea-neutral-text);
	--enfold-main-color-border:         var(--wea-line);
	--enfold-main-color-constant-font:  var(--wea-paper);
	--enfold-main-color-button-font:    var(--wea-paper);
	--enfold-main-color-button-border:  var(--wea-blue);
	--enfold-main-color-button-border2: var(--wea-blue-deep);
	--enfold-main-color-iconlist:       var(--wea-line);
	--enfold-main-color-masonry:        var(--wea-blue);
	--enfold-main-color-timeline:       var(--wea-line);
	--enfold-main-color-timeline-date:  var(--wea-neutral-text);
	--enfold-main-color-stripe:         var(--wea-blue-deep);
	--enfold-main-color-stripe2:        var(--wea-blue-deep);
	--enfold-main-color-stripe2nd:      var(--wea-crayon-text);

	/* bg2 = superfici secondarie (tab attive, bottoni «subtle», card):
	   un tono PIÙ marcato della Carta, non più chiaro, altrimenti
	   sembrano pannelli che galleggiano invece di fogli appoggiati. */
	--enfold-main-color-bg2:            var(--wea-paper-2);

	/* --- «Alternate Content» → BLU BIC ------------------------------ */
	/* Su blu il Crayon non è leggibile (2.6:1): secondary resta Carta e
	   lo stato hover si comunica con la sottolineatura, non col colore. */
	--enfold-alternate-color-bg:             var(--wea-blue);
	--enfold-alternate-color-bg2:            var(--wea-blue-deep);
	--enfold-alternate-color-color:          var(--wea-paper);
	--enfold-alternate-color-heading:        var(--wea-paper);
	--enfold-alternate-color-primary:        var(--wea-paper);
	--enfold-alternate-color-secondary:      var(--wea-paper);
	--enfold-alternate-color-meta:           rgba(247, 245, 240, .74);
	--enfold-alternate-color-border:         var(--wea-line-inv);
	--enfold-alternate-color-constant-font:  var(--wea-blue);
	--enfold-alternate-color-button-font:    var(--wea-blue);
	--enfold-alternate-color-button-border:  var(--wea-paper);
	--enfold-alternate-color-button-border2: var(--wea-paper);
	--enfold-alternate-color-iconlist:       var(--wea-line-inv);
	--enfold-alternate-color-masonry:        var(--wea-blue-deep);
	--enfold-alternate-color-timeline:       var(--wea-line-inv);
	--enfold-alternate-color-timeline-date:  rgba(247, 245, 240, .74);
	--enfold-alternate-color-stripe:         var(--wea-blue-deep);
	--enfold-alternate-color-stripe2:        var(--wea-blue-deep);
	--enfold-alternate-color-stripe2nd:      var(--wea-paper);

	/* --- «Footer» → INK (dentro la pagina, non il footer del sito) --- */
	--enfold-footer-color-bg:             var(--wea-ink);
	--enfold-footer-color-bg2:            #24231F;
	--enfold-footer-color-color:          rgba(247, 245, 240, .88);
	--enfold-footer-color-heading:        var(--wea-paper);
	--enfold-footer-color-primary:        var(--wea-paper);
	--enfold-footer-color-secondary:      var(--wea-paper);
	--enfold-footer-color-meta:           var(--wea-neutral);
	--enfold-footer-color-border:         var(--wea-line-inv);
	--enfold-footer-color-constant-font:  var(--wea-ink);
	--enfold-footer-color-button-font:    var(--wea-ink);
	--enfold-footer-color-button-border:  var(--wea-paper);
	--enfold-footer-color-button-border2: var(--wea-paper);
	--enfold-footer-color-iconlist:       var(--wea-line-inv);
	--enfold-footer-color-masonry:        #24231F;
	--enfold-footer-color-timeline:       var(--wea-line-inv);
	--enfold-footer-color-timeline-date:  var(--wea-neutral);
	--enfold-footer-color-stripe:         var(--wea-blue);
	--enfold-footer-color-stripe2:        var(--wea-blue);
	--enfold-footer-color-stripe2nd:      var(--wea-paper);

	/* --- «Socket» → CARTA 2 ----------------------------------------- */
	--enfold-socket-color-bg:             var(--wea-paper-2);
	--enfold-socket-color-bg2:            var(--wea-paper);
	--enfold-socket-color-color:          var(--wea-ink);
	--enfold-socket-color-heading:        var(--wea-ink);
	--enfold-socket-color-primary:        var(--wea-blue);
	--enfold-socket-color-secondary:      var(--wea-crayon-text);
	--enfold-socket-color-meta:           var(--wea-neutral-text);
	--enfold-socket-color-border:         var(--wea-line);
	--enfold-socket-color-constant-font:  var(--wea-paper);
	--enfold-socket-color-button-font:    var(--wea-paper);
	--enfold-socket-color-button-border:  var(--wea-blue);
	--enfold-socket-color-button-border2: var(--wea-blue-deep);
	--enfold-socket-color-iconlist:       var(--wea-line);
	--enfold-socket-color-masonry:        var(--wea-blue);
	--enfold-socket-color-timeline:       var(--wea-line);
	--enfold-socket-color-timeline-date:  var(--wea-neutral-text);
	--enfold-socket-color-stripe:         var(--wea-blue-deep);
	--enfold-socket-color-stripe2:        var(--wea-blue-deep);
	--enfold-socket-color-stripe2nd:      var(--wea-crayon-text);
}

/* Superficie di base del contenuto: la pagina è un foglio di carta. */
.wea26-scope {
	background-color: var(--wea-paper);
	color: var(--wea-ink);
}

/* Il tema toglie il bordo alla prima sezione con `#main > .avia-builder-el-0`;
   il wrapper rompe quella relazione di figlio diretto, quindi lo rifacciamo. */
.wea26-scope > .avia-builder-el-0 {
	border-top: none;
}


/* =====================================================================
   2bis · COMPATIBILITÀ CON I FOGLI DEL SITO
   Tre sorgenti fuori dal nostro controllo scavalcherebbero la brand
   identity dentro lo scope, e vanno neutralizzate qui:

   a) style.css del tema figlio, site-wide
        #top #wrap_all .all_colors h2 { color:#000082; font-size:45px }
        #top #wrap_all .all_colors h3 { color:#000082; font-size:30px }
        #top #wrap_all .all_colors h3.av-masonry-entry-title.entry-title
      → serve il TIER B.

   b) a4s.css, opzioni tema
        #top .all_colors strong { color:#000 }
      → il grassetto diventerebbe nero pieno anche su Blu e Ink.

   c) un blocco <style> inline nell'head, valido per tutto il sito
        h1,h2,h3,h4,h5,h6,a,p,span,li { font-family:'Montserrat',sans-serif }
      → i link dentro il testo uscivano in Montserrat mentre il paragrafo
        attorno era DM Sans. Basta una specificità qualsiasi per batterlo,
        ma va scritto: `inherit` è l'unica risposta giusta, così la voce
        la decide sempre il contenitore.

   I due guardiani sui titoli sono deliberati:
     :not(.av-special-heading-tag)   lascia i titoli ALB al §4
     :not(.custom-color-heading)     lascia vincere il colore scelto
                                     nell'editor (opzione «Custom Color»)
   ===================================================================== */

/* (c) — nessun elemento di testo può imporre la propria voce. */
#top .wea26-scope :is(a, span, strong, b, em, i, li, small, cite, blockquote) {
	font-family: inherit;
}

/* (b) — il grassetto è più scuro, non di un altro colore. */
#top .wea26-scope :is(strong, b) {
	color: inherit;
	font-weight: var(--wea-weight-label);
}

/* (a) — titoli scritti dentro un blocco di testo */
#top.wea26 #main .wea26-scope .main_color :is(h1, h2, h3, h4, h5, h6):not(.av-special-heading-tag) {
	color: var(--enfold-main-color-heading);
}

#top.wea26 #main .wea26-scope .alternate_color :is(h1, h2, h3, h4, h5, h6):not(.av-special-heading-tag) {
	color: var(--enfold-alternate-color-heading);
}

#top.wea26 #main .wea26-scope .footer_color :is(h1, h2, h3, h4, h5, h6):not(.av-special-heading-tag) {
	color: var(--enfold-footer-color-heading);
}

#top.wea26 #main .wea26-scope .socket_color :is(h1, h2, h3, h4, h5, h6):not(.av-special-heading-tag) {
	color: var(--enfold-socket-color-heading);
}

/* Titoli dell'elemento ALB «Special Heading» senza colore custom */
#top.wea26 #main .wea26-scope .main_color .av-special-heading:not(.custom-color-heading) .av-special-heading-tag {
	color: var(--enfold-main-color-heading);
}

#top.wea26 #main .wea26-scope .alternate_color .av-special-heading:not(.custom-color-heading) .av-special-heading-tag {
	color: var(--enfold-alternate-color-heading);
}

#top.wea26 #main .wea26-scope .footer_color .av-special-heading:not(.custom-color-heading) .av-special-heading-tag {
	color: var(--enfold-footer-color-heading);
}

#top.wea26 #main .wea26-scope .socket_color .av-special-heading:not(.custom-color-heading) .av-special-heading-tag {
	color: var(--enfold-socket-color-heading);
}

/* Il livello h3 è quello che passa al Blu Bic — ma solo dove la carta
   fa da fondo. Su Blu e su Ink resta Carta, come tutti gli altri. */
#top.wea26 #main .wea26-scope :is(.main_color, .socket_color) :is(h3):not(.av-special-heading-tag),
#top.wea26 #main .wea26-scope :is(.main_color, .socket_color) .av-special-heading-h3:not(.custom-color-heading) .av-special-heading-tag {
	color: var(--wea-blue);
}


/* =====================================================================
   3 · BASE TIPOGRAFICA
   Voce 04 (DM Sans) per il corpo, Voce 02 (Fraunces) per i titoli.
   ===================================================================== */
.wea26-scope {
	font-family: var(--wea-font-body);
	font-size: var(--wea-size-body);
	line-height: var(--wea-lh-body);
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#top .wea26-scope :is(p, li, .avia_textblock) {
	font-family: var(--wea-font-body);
	line-height: var(--wea-lh-body);
}

#top .wea26-scope :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--wea-font-claim);
	font-optical-sizing: auto;
	font-style: normal;
	text-transform: none;
	text-wrap: balance;
}

/* h4 non è un titolo: è un'etichetta. Cambia voce e torna al corpo. */
#top .wea26-scope :is(h4, .av-special-heading-h4 .av-special-heading-tag) {
	font-family: var(--wea-font-body);
	letter-spacing: 0;
}

/* h5/h6 sono micro-info tecniche: Voce 03. */
#top .wea26-scope :is(h5, h6, .av-special-heading-h5 .av-special-heading-tag, .av-special-heading-h6 .av-special-heading-tag) {
	font-family: var(--wea-font-meta);
	letter-spacing: var(--wea-track-eyebrow);
	text-transform: uppercase;
}

/* I PESI, e i due !important che servono davvero.
   style.css impone site-wide `#top #wrap_all .all_colors h2 {font-weight:600
   !important}` e `.av-special-heading h1 {font-weight:700 !important}`.
   Avevo scelto di non contrastarli; la reference mostra però Fraunces a
   400 e la pagina renderizzava a 700, differenza visibile su un titolo
   di 100px. Un !important si batte solo con un !important, quindi due
   dichiarazioni mirate, confinate allo scope: fuori da questa pagina
   nulla cambia. Costo: su WEA26 l'opzione «Style → Thin» dell'elemento
   Heading non ha più effetto. */
#top.wea26 #main .wea26-scope :is(h1, h2, h3, h5, h6) {
	font-weight: var(--wea-weight-claim) !important;
}

#top.wea26 #main .wea26-scope h4 {
	font-weight: var(--wea-weight-label) !important;
}

/* --- La scala, applicata al testo scritto nei blocchi -------------- */
#top.wea26 #main .wea26-scope h1:not(.av-special-heading-tag) {
	font-size: var(--wea-size-display);
	line-height: var(--wea-lh-display);
	letter-spacing: -0.035em;
}

#top.wea26 #main .wea26-scope h2:not(.av-special-heading-tag) {
	font-size: var(--wea-size-title);
	line-height: var(--wea-lh-title);
	letter-spacing: -0.02em;
}

#top.wea26 #main .wea26-scope h3:not(.av-special-heading-tag) {
	font-size: var(--wea-size-sub);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

#top.wea26 #main .wea26-scope h4:not(.av-special-heading-tag) {
	font-size: var(--wea-size-body);
	line-height: 1.45;
}

#top.wea26 #main .wea26-scope :is(h5, h6):not(.av-special-heading-tag) {
	font-size: var(--wea-size-caption);
	line-height: 1.4;
}

/* Link: il colore arriva dalle variabili. Qui solo il comportamento,
   perché su Blu il cambio di colore da solo non si vede. */
#top .wea26-scope a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: from-font;
}

#top .wea26-scope :is(.avia_textblock, .iconlist_content) a {
	text-decoration: underline;
	text-decoration-color: var(--wea-crayon);
	text-decoration-thickness: 2px;
}

#top .wea26-scope :is(.avia_textblock, .iconlist_content) a:hover,
#top .wea26-scope :is(.avia_textblock, .iconlist_content) a:focus-visible {
	text-decoration-thickness: 4px;
}

/* Citazioni: Voce 02 corsiva, il tratto blu al posto della stanghetta. */
#top .wea26-scope blockquote {
	font-family: var(--wea-font-claim);
	font-size: var(--wea-size-sub);
	font-style: italic;
	line-height: 1.3;
	border-left-width: var(--wea-rule);
	padding-left: 1.25rem;
}


/* =====================================================================
   4 · TITOLI ALB — elemento «Special Heading»
   Il campo «Font Size» dell'editor aggiunge `.av-inherit-size`: le
   regole qui sotto lo escludono, così l'impostazione dell'editor vince
   sempre e questo file resta solo il default.
   ===================================================================== */
/* Nessun `font-family` qui: la voce la assegna il §3 per livello di
   titolo (Fraunces per h1–h3, DM Sans per h4, mono per h5/h6). Una
   dichiarazione qui sopra vincerebbe su tutte e appiattirebbe la scala. */
#top .wea26-scope .av-special-heading .av-special-heading-tag {
	line-height: var(--wea-lh-title);
	text-wrap: balance;
}

#top.wea26 #main .wea26-scope .av-special-heading-h1:not(.av-inherit-size) .av-special-heading-tag {
	font-size: var(--wea-size-display);
	line-height: var(--wea-lh-display);
	letter-spacing: -0.035em;
}

#top.wea26 #main .wea26-scope .av-special-heading-h2:not(.av-inherit-size) .av-special-heading-tag {
	font-size: var(--wea-size-title);
	letter-spacing: -0.02em;
}

#top.wea26 #main .wea26-scope .av-special-heading-h3:not(.av-inherit-size) .av-special-heading-tag {
	font-size: var(--wea-size-sub);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

#top.wea26 #main .wea26-scope .av-special-heading-h4:not(.av-inherit-size) .av-special-heading-tag {
	font-size: var(--wea-size-body);
	line-height: 1.45;
}

#top.wea26 #main .wea26-scope :is(.av-special-heading-h5, .av-special-heading-h6):not(.av-inherit-size) .av-special-heading-tag {
	font-size: var(--wea-size-caption);
}

/* --- I due sottotitoli, due voci diverse -------------------------- */
/* NOTA — qui NON si tocca `font-size`. Enfold lo espone nel campo
   «Subheading Font Size» e lo scrive con `.av-special-heading.av-HASH
   .av-subheading` (0,2,0): una regola nostra a un id vincerebbe e
   spegnerebbe il campo. Il corpo lo decide l'editor, noi la voce. */

/* Sopra il titolo → occhiello tecnico, Voce 03, molto spaziato. */
#top .wea26-scope .av-subheading_above {
	font-family: var(--wea-font-meta);
	letter-spacing: var(--wea-track-eyebrow);
	text-transform: uppercase;
	line-height: 1.5;
	opacity: 0.7;
}

/* Sotto il titolo → catenaccio editoriale, Voce 02 corsiva. */
#top .wea26-scope .av-subheading_below {
	font-family: var(--wea-font-claim);
	font-style: italic;
	line-height: 1.45;
	opacity: 0.85;
}

/* Payoff sotto il wordmark: `<span class="wea-meta wea-caption">` dentro
   un titolo. Da solo resterebbe schiacciato dallo strut della riga del
   titolo (96px × 0.92 = 88px di altezza anche per un testo di 13px), che
   apre una voragine fra le due righe. Diventa un blocco con la propria
   interlinea e un distacco misurato in em, così scala col titolo. */
#top .wea26-scope :is(h1, h2, h3) > :is(.wea-meta, .wea-caption) {
	display: block;
	line-height: 1.5;
	margin-top: 0.35em;
}

/* Filetto laterale del titolo: tratto pieno, non velatura al 15%. */
#top .wea26-scope .special-heading-inner-border {
	opacity: 1;
	border-top-width: var(--wea-rule);
	margin-left: 0.75rem;
}


/* =====================================================================
   5 · TESTO, LISTE, TABELLE
   ===================================================================== */
#top .wea26-scope .avia_textblock {
	font-size: var(--wea-size-body);
}

/* La misura di lettura NON si applica in automatico a ogni paragrafo:
   in una sezione centrata un blocco largo 64ch resta ancorato a
   sinistra e sfalsa la colonna rispetto al titolo. Si chiede quando
   serve, con `wea-measure`, e allora è centrato (vedi §9.4). */

#top .wea26-scope .iconlist_content {
	font-family: var(--wea-font-body);
}

#top .wea26-scope .avia-icon-list .iconlist_title {
	font-family: var(--wea-font-claim);
	font-weight: var(--wea-weight-claim);
}

/* Tabelle e listini: dati → Voce 03. */
#top .wea26-scope :is(table, .pricing-table) {
	font-family: var(--wea-font-meta);
	font-size: var(--wea-size-caption);
}

#top .wea26-scope :is(th, .avia-heading-row) {
	letter-spacing: var(--wea-track-meta);
	text-transform: uppercase;
}


/* =====================================================================
   6 · BOTTONI — elemento «Button», «Button Row», «Icon Box»
   Misure prese dalla reference: Intel One Mono ~11px, peso normale,
   spaziatura 0.05em, maiuscolo, bordo di 1px, raggio 4px, padding
   contenuto. La versione precedente perdeva contro `#top .avia-button`
   di a4s.css (font-size 16px, letter-spacing 0.01em, border 1px,
   radius 2px): un id in più e il default torna nostro, restando sotto
   al CSS per-elemento dell'editor.
   ===================================================================== */
#top .wea26-scope :is(.avia-button, .avia-button .avia_button_background) {
	border-radius: var(--wea-radius-ui);
}

#top .wea26-scope .avia-button {
	font-family: var(--wea-font-meta);
	font-size: var(--wea-size-ui);
	font-weight: 400;
	letter-spacing: var(--wea-track-meta);
	text-transform: uppercase;
	line-height: 1.2;
	border-width: 1px;
	border-style: solid;
	padding: 0.85em 1.5em;
	transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

/* Il campo «Button Size» dell'editor deve restare vivo: sovrascrivendo
   il padding per tutti allo stesso modo, small/large/x-large facevano
   tutti la stessa cosa. Qui le tre misure tornano a distinguersi,
   scalando insieme corpo e spaziatura. */
#top .wea26-scope .avia-button.avia-size-small {
	font-size: calc(var(--wea-size-ui) * 0.92);
	padding: 0.75em 1.2em;
}

#top .wea26-scope .avia-button.avia-size-large {
	font-size: calc(var(--wea-size-ui) * 1.08);
	padding: 1.05em 2.1em;
}

#top .wea26-scope .avia-button.avia-size-x-large {
	font-size: calc(var(--wea-size-ui) * 1.2);
	padding: 1.2em 2.6em;
}

#top .wea26-scope .avia-button:hover,
#top .wea26-scope .avia-button:focus-visible {
	transform: translateY(-2px);
}

/* Variante «Light» → bottone di contorno: la penna, non il pieno.
   `currentColor` fa adattare il tratto alla superficie: Blu su Carta,
   Carta su Blu, Carta su Ink — sempre leggibile, mai da impostare. */
#top .wea26-scope .avia-button.avia-color-light,
#top .wea26-scope .avia-button.avia-color-light:hover {
	background-color: transparent;
	color: currentColor;
	border-color: currentColor;
	opacity: 1;
}

#top .wea26-scope .avia-button-fullwidth {
	border-radius: var(--wea-radius-ui);
}


/* =====================================================================
   7 · IMMAGINI, GALLERIE, MASONRY, SLIDER
   Le immagini restano a spigolo vivo: è carta, non una interfaccia.
   ===================================================================== */
#top .wea26-scope :is(.avia-image-container-inner, .av-masonry-entry, .avia_image, img) {
	border-radius: var(--wea-radius);
}

#top .wea26-scope .av-masonry {
	background-color: var(--wea-blue);
}

/* Titolo della card: micro-info, non titolo editoriale (manuale §07).
   Serve il TIER B: style.css lo fissa a 20px con selettori a 4 classi. */
#top.wea26 #main .wea26-scope .av-masonry-entry .av-masonry-entry-title.entry-title {
	font-family: var(--wea-font-meta);
	font-size: var(--wea-size-caption);
	font-weight: 400;
	letter-spacing: var(--wea-track-meta);
	line-height: 1.35;
	text-transform: uppercase;
	color: inherit;
	padding: 0;
}

#top.wea26 #main .wea26-scope .av-masonry-entry .av-inner-masonry-content {
	background-color: var(--wea-paper);
	padding: 1rem;
}

/* Con «Caption Style → overlay» il titolo sta sopra l'immagine: niente
   fondo carta, testo Carta sul gradiente di Enfold. */
#top.wea26 #main .wea26-scope .av-caption-style-overlay .av-masonry-entry .av-inner-masonry-content {
	background-color: transparent;
	color: var(--wea-paper);
}

#top .wea26-scope .av-masonry-entry .avia-arrow {
	display: none;
}

/* Didascalie e caption slider → Voce 03. */
#top .wea26-scope :is(.avia-caption-content, .wp-caption-text, .av-caption-text) {
	font-family: var(--wea-font-meta);
	font-size: var(--wea-size-caption);
	letter-spacing: var(--wea-track-meta);
	color: var(--wea-neutral-text);
}


/* =====================================================================
   8 · SEPARATORI — elemento «Separator / Whitespace»
   Il tratto orizzontale è un gesto di penna: pieno, corto, e del colore
   del testo della superficie. Il default di Enfold userebbe la
   variabile `border`, quasi invisibile.
   ===================================================================== */
#top .wea26-scope .hr .hr-inner {
	border-top-width: var(--wea-rule);
	border-color: currentColor;
	opacity: 1;
}

#top .wea26-scope .hr-short .hr-inner,
#top .wea26-scope .hr-custom.hr-left .hr-inner {
	width: 4rem;
	margin-left: 0;
}

#top .wea26-scope .hr-short.hr-center .hr-inner,
#top .wea26-scope .hr-custom.hr-center .hr-inner {
	margin-inline: auto;
}


/* =====================================================================
   9 · CLASSI CUSTOM WEA26
   Da scrivere nel campo «Custom CSS Class» dell'elemento ALB.
   Poche e ortogonali: voce, scala, gesto, layout.
   ===================================================================== */

/* --- 9.1 Voci tipografiche (manuale §05) -------------------------- */
#top .wea26-scope .wea-claim,
#top .wea26-scope .wea-claim :is(h1, h2, h3, h4, h5, h6, p, .avia_textblock, .av-special-heading-tag) {
	font-family: var(--wea-font-claim);
	font-optical-sizing: auto;
	letter-spacing: -0.015em;
	text-transform: none;
}

#top .wea26-scope .wea-hand,
#top .wea26-scope .wea-hand :is(h1, h2, h3, h4, h5, h6, p, .avia_textblock, .av-special-heading-tag) {
	font-family: var(--wea-font-hand);
	letter-spacing: 0;
	line-height: 1.15;
	text-transform: none;
}

#top .wea26-scope .wea-meta,
#top .wea26-scope .wea-meta :is(h1, h2, h3, h4, h5, h6, p, .avia_textblock, .av-special-heading-tag) {
	font-family: var(--wea-font-meta);
	letter-spacing: var(--wea-track-meta);
	line-height: 1.5;
	text-transform: none;
}

#top .wea26-scope .wea-body,
#top .wea26-scope .wea-body :is(h1, h2, h3, h4, h5, h6, p, .avia_textblock, .av-special-heading-tag) {
	font-family: var(--wea-font-body);
	letter-spacing: 0;
	text-transform: none;
}

/* --- 9.2 Scala: i due estremi (manuale §07) ----------------------- */
/* Pareggiano i selettori del §4 e vincono per ordine, stando dopo. Il
   guardiano `:not(.av-inherit-size)` lascia l'ultima parola al campo
   «Font Size» dell'editor. Le righe coprono i tre modi in cui la classe
   può essere scritta: sull'elemento titolo, su un contenitore, su testo. */
#top.wea26 #main .wea26-scope .wea-display:not(.av-inherit-size),
#top.wea26 #main .wea26-scope .av-special-heading.wea-display:not(.av-inherit-size) .av-special-heading-tag,
#top.wea26 #main .wea26-scope .wea-display .av-special-heading:not(.av-inherit-size) .av-special-heading-tag,
#top.wea26 #main .wea26-scope .wea-display :is(h1, h2, h3, h4, h5, h6, p):not(.av-special-heading-tag) {
	font-size: var(--wea-size-display);
	line-height: var(--wea-lh-display);
	letter-spacing: -0.035em;
}

#top.wea26 #main .wea26-scope .wea-caption:not(.av-inherit-size),
#top.wea26 #main .wea26-scope .av-special-heading.wea-caption:not(.av-inherit-size) .av-special-heading-tag,
#top.wea26 #main .wea26-scope .wea-caption .av-special-heading:not(.av-inherit-size) .av-special-heading-tag,
#top.wea26 #main .wea26-scope .wea-caption :is(h1, h2, h3, h4, h5, h6, p):not(.av-special-heading-tag) {
	font-size: var(--wea-size-caption);
	line-height: 1.5;
	letter-spacing: var(--wea-track-meta);
}

/* --- 9.3 Gesto: Crayon, mai decorazione, mai testo piccolo -------- */
/* Non forza un `color`: ridefinisce la variabile di titolo dello schema
   colore, così le regole del §2bis risolvono da sole in Crayon e
   l'impostazione «Custom Color» dell'editor continua a vincere.
   NB — su sezione Blu Bic il Crayon non è leggibile (2.6:1): lì la
   variabile non viene toccata e i titoli restano Carta. */
.wea26-scope .wea-accent {
	--enfold-main-color-heading:   var(--wea-crayon);
	--enfold-footer-color-heading: var(--wea-crayon);
	--enfold-socket-color-heading: var(--wea-crayon);

	/* Testo corrente: variante conforme AA (5.58:1 su Carta). */
	color: var(--wea-crayon-text);
}

/* Il tratto passa SOPRA il testo, come un pennarello dato dopo. */
#top .wea26-scope .wea-mark :is(h1, h2, h3, h4, h5, h6, .av-special-heading-tag, strong),
#top .wea26-scope .wea-mark.avia_textblock strong {
	background-image: linear-gradient(
		to bottom,
		transparent 52%,
		color-mix(in srgb, var(--wea-crayon) 78%, transparent) 52%,
		color-mix(in srgb, var(--wea-crayon) 78%, transparent) 84%,
		transparent 84%
	);
	background-repeat: no-repeat;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	padding-inline: 0.08em;
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	#top .wea26-scope .wea-mark :is(h1, h2, h3, h4, h5, h6, .av-special-heading-tag, strong) {
		background-image: linear-gradient(
			to bottom,
			transparent 52%,
			rgba(238, 38, 62, .78) 52%,
			rgba(238, 38, 62, .78) 84%,
			transparent 84%
		);
	}
}

/* Rotazione 2°–5°, mai oltre (manuale §07). Il corpo testo resta dritto.
   Perno al centro, così funziona anche sui titoli `modern-centered`
   che Enfold produce di default. */
#top .wea26-scope .wea-tilt {
	transform: rotate(var(--wea-tilt));
	transform-origin: center;
}

#top .wea26-scope .wea-tilt-r {
	transform: rotate(calc(var(--wea-tilt) * -1));
	transform-origin: center;
}

/* Enfold fa flottare il tag del titolo (`float:left`), quindi il
   contenitore collassa a altezza zero e il perno finisce sul bordo
   superiore. Togliendo il float il box torna reale e la rotazione
   avviene davvero attorno al centro del testo. */
#top .wea26-scope .av-special-heading:is(.wea-tilt, .wea-tilt-r) .av-special-heading-tag {
	float: none;
}

/* --- 9.4 Layout: aria, misura, asimmetria (manuale §07) ----------- */
/* Il box della misura segue da solo l'allineamento del suo contenuto.
   Senza questo, delle due l'una: o resta ancorato a sinistra sotto un
   titolo centrato, o si centra sotto un titolo allineato a sinistra —
   in entrambi i casi la colonna va fuori asse.
   `:has()` lascia decidere al testo: centrato il testo, centrato il box.
   Il default è a sinistra, come chiede il manuale (§07, «asimmetria
   sempre, mai elementi centrati»). */
#top .wea26-scope .wea-measure,
#top .wea26-scope .wea-measure .avia_textblock {
	max-width: var(--wea-measure);
	margin-inline: 0 auto;
}

#top .wea26-scope .wea-narrow,
#top .wea26-scope .wea-narrow .avia_textblock,
#top .wea26-scope .wea-narrow.avia-image-container {
	max-width: var(--wea-narrow);
	margin-inline: 0 auto;
}

#top .wea26-scope :is(.wea-measure, .wea-narrow):is(.av-align-center, .avia-align-center),
#top .wea26-scope :is(.wea-measure, .wea-narrow):has([style*="text-align: center"]),
#top .wea26-scope :is(.wea-measure, .wea-narrow):has([style*="text-align:center"]) {
	margin-inline: auto;
}

#top .wea26-scope :is(.wea-measure, .wea-narrow):is(.av-align-right, .avia-align-right),
#top .wea26-scope :is(.wea-measure, .wea-narrow):has([style*="text-align: right"]) {
	margin-inline: auto 0;
}

#top .wea26-scope .wea-air {
	padding-block: var(--wea-air);
}

/* Riquadro di carta dentro una sezione Blu: eredita lo schema Carta. */
#top .wea26-scope .wea-card {
	background-color: var(--wea-paper);
	color: var(--wea-ink);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border: 1px solid var(--wea-line);
	border-radius: var(--wea-radius-card);
}

.wea26-scope .wea-card {
	--enfold-alternate-color-bg:        var(--wea-paper);
	--enfold-alternate-color-color:     var(--wea-ink);
	--enfold-alternate-color-heading:   var(--wea-ink);
	--enfold-alternate-color-primary:   var(--wea-blue);
	--enfold-alternate-color-secondary: var(--wea-crayon-text);
	--enfold-alternate-color-meta:      var(--wea-neutral-text);
	--enfold-alternate-color-border:    var(--wea-line);
}

/* Immagine a piena colonna. Enfold lascia le immagini alla loro
   dimensione naturale (`max-width:100%`): serve quando un'immagine
   piccola — un'icona, una sfera tematica — deve riempire la colonna. */
#top .wea26-scope .wea-fill img,
#top .wea26-scope .wea-fill .avia_image {
	width: 100%;
	height: auto;
}


/* =====================================================================
   10 · RESPONSIVE
   Le dimensioni sono già fluide via clamp(); qui solo ciò che la
   fluidità non copre.
   ===================================================================== */
@media only screen and (max-width: 767px) {

	.wea26-scope {
		--wea-air: clamp(2.25rem, 9vw, 3.5rem);
		--wea-tilt: -1.5deg;
	}

	#top .wea26-scope .avia-button {
		padding: 0.8em 1.2em;
	}
}


/* =====================================================================
   11 · ACCESSIBILITÀ
   Il sistema di focus del tema (style.css) resta valido; qui solo
   l'adattamento cromatico e il rispetto delle preferenze di sistema.
   ===================================================================== */

/* Su Blu e su Ink il focus blu del tema sparisce: passa a Carta. */
#top .wea26-scope :is(.alternate_color, .footer_color) :is(a, button, .button, input, select, textarea):focus-visible {
	outline-color: var(--wea-paper);
}

@media (prefers-reduced-motion: reduce) {
	#top .wea26-scope .avia-button,
	#top .wea26-scope .avia-button:hover,
	#top .wea26-scope .avia-button:focus-visible {
		transition: none;
		transform: none;
	}
}

@media (prefers-contrast: more) {
	.wea26-scope {
		--wea-neutral-text: #4A473F;
		--wea-line: rgba(26, 25, 23, .38);
		--wea-line-inv: rgba(247, 245, 240, .55);
	}
}

/* In stampa la pagina è già un foglio: si torna a inchiostro su carta. */
@media print {
	.wea26-scope,
	.wea26-scope .alternate_color,
	.wea26-scope .footer_color {
		background: #fff;
		color: #000;
	}

	.wea26-icons {
		display: none;
	}
}


/* =====================================================================
   12 · ICONE HAND-WRITE (WEA26)
   Livello decorativo iniettato da functions.php
   (a4s_wea26_render_icons), come ULTIMO figlio di `.wea26-scope`:
   non è contenuto editoriale, nessuna classe da applicare in editor.

   PERCHÉ ULTIMO FIGLIO — l'ordine nel DOM non è un dettaglio.
   `.container_wrap` (ogni sezione ALB, grid.css: position:relative,
   senza z-index) e questo layer sono entrambi elementi "positioned" a
   stack level 0: a parità di livello vince chi viene DOPO nel DOM, e
   solo da ultimo figlio il layer dipinge SOPRA lo sfondo di ogni
   sezione (Carta, Blu, Ink) invece che restarci sotto.
   Il testo resta comunque sopra alle icone: `.units` (grid.css di
   Enfold) ha `z-index:1` esplicito, che batte il nostro `z-index:0` per
   valore numerico — indipendentemente dall'ordine nel DOM. Stesso
   discorso per §13 qui sotto, che si dà `z-index:1` per lo stesso
   motivo.
   ===================================================================== */

.wea26-scope {
	/*
	 * Le sezioni ALB sono `float:left` (shortcodes.css): senza un BFC
	 * `.wea26-scope` collasserebbe (quasi) ad altezza zero, e il layer
	 * icone qui sotto (`inset:0`) erediterebbe quell'altezza sbagliata,
	 * comprimendo tutte le posizioni in percentuale verso l'alto.
	 * `flow-root` crea il BFC senza gli effetti collaterali che il
	 * commento qui sopra volutamente evita: niente `overflow` (che
	 * taglierebbe contenuti a piena larghezza) né `transform` (che
	 * farebbe di questo div il containing block degli sfondi
	 * `position:fixed` di Enfold, rompendoli).
	 */
	display: flow-root;
	position: relative;
}

.wea26-icons {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;   /* un'icona a left:9x% non deve creare scroll orizzontale */
	pointer-events: none;
}

.wea26-icon {
	position: absolute;
	width: clamp(2.25rem, 4vw, 4.5rem);
	aspect-ratio: 1 / 1;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: .55;
	/* `--wea26-icon-y` è scritta dal JS (parallasse); il CSS non tocca
	   mai `transform` a runtime, così i due non entrano in conflitto. */
	transform: translateY(var(--wea26-icon-y, 0px)) rotate(var(--wea26-icon-rot, 0deg));
}

/* --- Import automatico: una classe per ogni tavola icon-01…icon-42,
       anche se il PHP (a4s_wea26_render_icons) ne usa solo 4 (manuale
       §01, «poche voci, mai un badge»). Per usarne un'altra basta
       aggiungere una riga all'array in functions.php: la classe è già
       pronta qui. --- */
.wea26-icon--01 { background-image: url('../images/wea-26-icons/icon-01.png'); }
.wea26-icon--02 { background-image: url('../images/wea-26-icons/icon-02.png'); }
.wea26-icon--03 { background-image: url('../images/wea-26-icons/icon-03.png'); }
.wea26-icon--04 { background-image: url('../images/wea-26-icons/icon-04.png'); }
.wea26-icon--05 { background-image: url('../images/wea-26-icons/icon-05.png'); }
.wea26-icon--06 { background-image: url('../images/wea-26-icons/icon-06.png'); }
.wea26-icon--07 { background-image: url('../images/wea-26-icons/icon-07.png'); }
.wea26-icon--08 { background-image: url('../images/wea-26-icons/icon-08.png'); }
.wea26-icon--09 { background-image: url('../images/wea-26-icons/icon-09.png'); }
.wea26-icon--10 { background-image: url('../images/wea-26-icons/icon-10.png'); }
.wea26-icon--11 { background-image: url('../images/wea-26-icons/icon-11.png'); }
.wea26-icon--12 { background-image: url('../images/wea-26-icons/icon-12.png'); }
.wea26-icon--13 { background-image: url('../images/wea-26-icons/icon-13.png'); }
.wea26-icon--14 { background-image: url('../images/wea-26-icons/icon-14.png'); }
.wea26-icon--15 { background-image: url('../images/wea-26-icons/icon-15.png'); }
.wea26-icon--16 { background-image: url('../images/wea-26-icons/icon-16.png'); }
.wea26-icon--17 { background-image: url('../images/wea-26-icons/icon-17.png'); }
.wea26-icon--18 { background-image: url('../images/wea-26-icons/icon-18.png'); }
.wea26-icon--19 { background-image: url('../images/wea-26-icons/icon-19.png'); }
.wea26-icon--20 { background-image: url('../images/wea-26-icons/icon-20.png'); }
.wea26-icon--21 { background-image: url('../images/wea-26-icons/icon-21.png'); }
.wea26-icon--22 { background-image: url('../images/wea-26-icons/icon-22.png'); }
.wea26-icon--23 { background-image: url('../images/wea-26-icons/icon-23.png'); }
.wea26-icon--24 { background-image: url('../images/wea-26-icons/icon-24.png'); }
.wea26-icon--25 { background-image: url('../images/wea-26-icons/icon-25.png'); }
.wea26-icon--26 { background-image: url('../images/wea-26-icons/icon-26.png'); }
.wea26-icon--27 { background-image: url('../images/wea-26-icons/icon-27.png'); }
.wea26-icon--28 { background-image: url('../images/wea-26-icons/icon-28.png'); }
.wea26-icon--29 { background-image: url('../images/wea-26-icons/icon-29.png'); }
.wea26-icon--30 { background-image: url('../images/wea-26-icons/icon-30.png'); }
.wea26-icon--31 { background-image: url('../images/wea-26-icons/icon-31.png'); }
.wea26-icon--32 { background-image: url('../images/wea-26-icons/icon-32.png'); }
.wea26-icon--33 { background-image: url('../images/wea-26-icons/icon-33.png'); }
.wea26-icon--34 { background-image: url('../images/wea-26-icons/icon-34.png'); }
.wea26-icon--35 { background-image: url('../images/wea-26-icons/icon-35.png'); }
.wea26-icon--36 { background-image: url('../images/wea-26-icons/icon-36.png'); }
.wea26-icon--37 { background-image: url('../images/wea-26-icons/icon-37.png'); }
.wea26-icon--38 { background-image: url('../images/wea-26-icons/icon-38.png'); }
.wea26-icon--39 { background-image: url('../images/wea-26-icons/icon-39.png'); }
.wea26-icon--40 { background-image: url('../images/wea-26-icons/icon-40.png'); }
.wea26-icon--41 { background-image: url('../images/wea-26-icons/icon-41.png'); }
.wea26-icon--42 { background-image: url('../images/wea-26-icons/icon-42.png'); }

/* --- Posizioni: coordinate fisse pensate per sembrare libere, non
       `random()` CSS (supporto browser ancora incompleto). Otto punti
       diagonali e non simmetrici (manuale §07, «asimmetria sempre»);
       il PHP ne usa 4, gli altri 4 restano pronti per nuove icone. --- */
.wea26-icon--pos-1 { top: 6%;  left: 4%;  --wea26-icon-rot: -8deg; }
.wea26-icon--pos-2 { top: 16%; left: 88%; --wea26-icon-rot: 6deg; }
.wea26-icon--pos-3 { top: 42%; left: 6%;  --wea26-icon-rot: 4deg; }
.wea26-icon--pos-4 { top: 64%; left: 90%; --wea26-icon-rot: -5deg; }
.wea26-icon--pos-5 { top: 82%; left: 10%; --wea26-icon-rot: 7deg; }
.wea26-icon--pos-6 { top: 30%; left: 48%; --wea26-icon-rot: -3deg; }
.wea26-icon--pos-7 { top: 92%; left: 68%; --wea26-icon-rot: 5deg; }
.wea26-icon--pos-8 { top: 54%; left: 28%; --wea26-icon-rot: -6deg; }

/* Alternativa "rimanere fisse" (rispetto al viewport, non alla pagina)
   richiesta dal brief: da usare al posto di una .wea26-icon--pos-N per
   un'icona che deve restare ancorata invece di scorrere col contenuto.
   Il JS (wea26-icons.js) la esclude sempre dal parallasse. */
.wea26-icon--fixed {
	position: fixed;
}

@media only screen and (max-width: 767px) {

	/* Sotto i 768px il respiro fra i blocchi di testo si riduce (§10
	   qui sopra): troppe icone sovrapposte al testo diventano rumore
	   invece che gesto. Ne restano 2 delle 4 in uso. */
	.wea26-icon--pos-2,
	.wea26-icon--pos-4,
	.wea26-icon--pos-6,
	.wea26-icon--pos-7,
	.wea26-icon--pos-8 {
		display: none;
	}

	.wea26-icon {
		width: clamp(2rem, 10vw, 2.75rem);
		opacity: .45;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wea26-icon {
		transition: none;
		/* niente `transform: none !important`: la rotazione fissa
		   (--wea26-icon-rot) resta, si ferma solo il parallasse — che
		   il JS non applica comunque a chi ha questa preferenza. */
	}
}


/* =====================================================================
   13 · SEZIONE «ALTRE STORIE» — fine di single-portfolio-wea26.php
   Iniettata da functions.php (a4s_wea26_render_related_stories),
   subito PRIMA del layer icone del §12: le è quindi precedente nel DOM
   e le serve un `z-index` esplicito (uguale a quello di `.units`) per
   restare sopra alle icone invece di finirci sotto — vedi §12.
   ===================================================================== */
#top .wea26-scope .wea-related {
	position: relative;
	z-index: 1;
}

#top .wea26-scope .wea-related__intro {
	max-width: var(--wea-measure);
	margin-inline: auto;
	text-align: center;
	padding-block-end: var(--wea-air);
}

#top .wea26-scope .wea-related__title {
	color: var(--wea-blue);
}

#top .wea26-scope .wea-related__subtitle {
	font-family: var(--wea-font-hand);
	font-size: var(--wea-size-sub);
	color: var(--wea-neutral-text);
	margin-top: .25em;
}

#top .wea26-scope .wea-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

#top .wea26-scope .wea-related__card {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--wea-radius);
	background-color: var(--wea-paper-2);
}

#top .wea26-scope .wea-related__card-image {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transition: transform .4s ease;
}

#top .wea26-scope .wea-related__card:is(:hover, :focus-visible) .wea-related__card-image {
	transform: scale(1.04);
}

/* Titolo: testo reale nel DOM, non contenuto generato via `::after` —
   serve a chi naviga con lettore di schermo e a chi non ha hover. */
#top .wea26-scope .wea-related__card-title {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1rem;
	font-family: var(--wea-font-meta);
	font-size: var(--wea-size-caption);
	letter-spacing: var(--wea-track-meta);
	text-transform: uppercase;
	color: var(--wea-paper);
	background: linear-gradient(to top, rgba(26, 25, 23, .78), transparent);
	opacity: 0;
	transform: translateY(.5rem);
	transition: opacity .25s ease, transform .25s ease;
}

#top .wea26-scope .wea-related__card:is(:hover, :focus-visible) .wea-related__card-title {
	opacity: 1;
	transform: translateY(0);
}

#top .wea26-scope .wea-related__card:focus-visible {
	outline: 2px solid var(--wea-blue);
	outline-offset: 3px;
}

/* Touch e mobile: l'hover non esiste, il titolo resta sempre visibile
   invece di essere raggiungibile solo scoprendolo per tentativi. */
@media (hover: none), only screen and (max-width: 767px) {
	#top .wea26-scope .wea-related__card-title {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	#top .wea26-scope .wea-related__card-image,
	#top .wea26-scope .wea-related__card-title {
		transition: none;
	}
}