/* ============ TEDx — skin "rinnovo 2026" · componenti (livello sopra components.css e wp.css) ============
   Stesso markup del tema: cambia solo la pelle. Firme: filetti e barre rosse, numerazione editoriale,
   angoli vivi con un taglio a 45°, bicromia rosso/nero + grana sulle immagini decorative, superfici piatte. */

/* ---------- utilità ---------- */
.cut{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.grain::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain);opacity:.14;mix-blend-mode:overlay}

/* ---------- bottoni ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;padding:18px 26px;border:1px solid var(--white);border-radius:0;background:transparent;color:var(--white);font:500 var(--fs-btn)/1 var(--font-sans);font-stretch:85%;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn--primary{background:var(--red);border-color:var(--red);clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.btn--primary:hover{background:var(--white);border-color:var(--white);color:var(--black)}
.btn--inverse{background:transparent;border-color:rgba(255,255,255,.75);color:var(--white)}
.btn--inverse:hover{background:rgba(255,255,255,.08);border-color:var(--white);color:var(--white)}
.btn .arrow{transition:transform var(--dur) var(--ease)}
.btn:hover .arrow{transform:translateX(6px)}

/* NB chevron: SVG nel markup (tedx_chev() in functions.php), riempito con currentColor. NON tornare a pseudo-elementi
   con clip-path o mask: Firefox con accelerazione GPU borda di linee sottili la scatola degli elementi ritagliati o
   mascherati (verificato su Firefox 158, scala 150%). Il verso < si ottiene con rotate(180deg), mai con scaleX(-1):
   il ribaltamento orizzontale, animato, passa per larghezza zero. I due chevron sono i path .chev__a (>) e
   .chev__b (< a riposo); ruotano attorno al proprio centro (transform-box:fill-box). */
.chev{position:absolute;left:50%;top:50%;overflow:visible;fill:currentColor;pointer-events:none}
.chev path{transform-box:fill-box;transform-origin:50% 50%}
.btn-circle .chev{width:52px;height:52px;margin:-26px 0 0 -26px}
.btn .arrow .chev{width:26px;height:22px;margin:-11px 0 0 -13px}
/* ---------- pulsante freccia: due chevron bianchi > < quasi a contatto (piccola luce tra i vertici),
   niente cerchio né sfondo. All'hover uno si ribalta: >> (avanti) o << (indietro), e diventano rossi.
   Area cliccabile 44x44 invisibile; il nome accessibile è nell'aria-label. ---------- */
.btn-circle{position:relative;flex:none;width:44px;height:44px;border-radius:0;background:transparent;color:var(--white);border:0;padding:0;font-size:0;line-height:0;cursor:pointer;text-decoration:none;transition:color var(--dur) var(--ease)}
/* chevron 10x20 px: > con il vertice 0,5 px a sinistra del centro, < con il vertice 0,5 px a destra */
.btn-circle .chev__a,.btn-circle .chev__b{transition:transform .35s var(--ease)}
.btn-circle .chev__b{transform:rotate(180deg)}
.btn-circle:hover,.btn-circle.is-hover,.btn-circle:focus-visible{color:var(--red)}
.btn-circle:focus-visible{outline:1px solid var(--red);outline-offset:2px}
/* avanti: > < diventa >> */
.btn-circle:hover .chev__a,.btn-circle.is-hover .chev__a{transform:translateX(-.5px)}
.btn-circle:hover .chev__b,.btn-circle.is-hover .chev__b{transform:translateX(-4.5px) rotate(0deg)}
/* indietro: > < diventa << */
.btn-circle[data-dir="-1"]:hover .chev__a,.btn-circle[data-dir="-1"].is-hover .chev__a{transform:translateX(4.5px) rotate(180deg)}
.btn-circle[data-dir="-1"]:hover .chev__b,.btn-circle[data-dir="-1"].is-hover .chev__b{transform:translateX(.5px) rotate(180deg)}

/* ---------- occhiello numerato (ex badge a pillola) ---------- */
.badge{display:inline-flex;align-items:center;gap:14px;background:none;border-radius:0;padding:0;font:500 var(--fs-micro)/1 var(--font-sans);font-stretch:85%;letter-spacing:.14em;text-transform:uppercase;color:var(--white)}
.badge::before{counter-increment:sez;content:counter(sez,decimal-leading-zero);color:var(--red);font-weight:700;font-stretch:112%;letter-spacing:0}
.badge::after{content:'';width:36px;height:1px;background:var(--line-strong);order:-1;display:none}
.badge .dot{display:none}
/* ---------- tag anno ---------- */
.chip{display:inline-block;background:var(--red);color:var(--white);border-radius:0;padding:8px 14px;font:600 13px/1 var(--font-sans);font-stretch:90%;letter-spacing:.08em;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}

/* ---------- card numeri: carbone piatto, taglio a 45°, barretta rossa che si allunga all'hover ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:1024px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.stat-grid{grid-template-columns:1fr 1fr;gap:8px}}
.stat-card{position:relative;background:var(--carbon);border-radius:0;box-shadow:none;padding:30px 26px 26px;display:flex;flex-direction:column;gap:var(--s-3);min-height:210px;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);transition:background var(--dur) var(--ease)}
.stat-card::before{content:'';position:absolute;top:0;left:0;width:36px;height:3px;background:var(--red);transition:width .5s var(--ease)}
.stat-card:hover{background:var(--carbon-2)}
.stat-card:hover::before{width:calc(100% - 22px)}
@media (max-width:767px){.stat-card{min-height:150px;padding:22px 16px 18px;gap:var(--s-2)}}
.stat-card__label{display:flex;align-items:flex-start;gap:8px;font:500 var(--fs-micro)/1.3 var(--font-sans);font-stretch:85%;letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.stat-card__label .dot{display:none}
.stat-card__value{margin-top:auto;align-self:flex-start;font:700 var(--fs-counter)/1 var(--font-sans);font-stretch:112%;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--white)}
.stat-card__value .suffix{color:var(--red);font-stretch:100%}

/* ---------- card talk ---------- */
.talk-card{position:relative;aspect-ratio:303/455;border-radius:0;overflow:hidden;box-shadow:none;background:var(--carbon);flex:0 0 clamp(260px,22vw,320px);scroll-snap-align:start;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.talk-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.talk-card:hover .talk-card__img{transform:scale(1.04)}
.talk-card__chip{position:absolute;top:0;left:0}
.talk-card__panel{position:absolute;left:0;right:0;bottom:0;isolation:isolate;border-radius:0;padding:20px 18px 58px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.9) 55%);display:flex;justify-content:space-between;gap:12px;align-items:flex-end}
.talk-card__panel::before{content:none}
.talk-card__panel h5{max-width:78%}
.talk-card__speaker{position:absolute;left:18px;right:18px;bottom:16px;padding-top:10px;border-top:1px solid rgba(255,255,255,.28);color:var(--text-soft);font:500 var(--fs-micro)/1 var(--font-sans);font-stretch:85%;letter-spacing:.12em;text-transform:uppercase;font-style:normal}
/* ---------- carousel ---------- */
.carousel{position:relative}
.carousel__track{display:flex;gap:var(--s-2);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__nav{display:flex;gap:10px;justify-content:flex-end;margin-top:var(--s-2)}
/* frecce di scorrimento: sempre >> e <<, bianche, tratto più spesso; all'hover rosse e con un piccolo scatto */
.carousel__nav .btn-circle:hover{transform:none}
.carousel__nav .btn-circle[data-dir="1"] .chev__a{transform:translateX(-.5px)}
.carousel__nav .btn-circle[data-dir="1"] .chev__b{transform:translateX(-4.5px) rotate(0deg)}
.carousel__nav .btn-circle[data-dir="-1"] .chev__a{transform:translateX(4.5px) rotate(180deg)}
.carousel__nav .btn-circle[data-dir="-1"] .chev__b{transform:translateX(.5px) rotate(180deg)}
.carousel__nav .btn-circle[data-dir="1"]:hover .chev__a,.carousel__nav .btn-circle[data-dir="1"].is-hover .chev__a{transform:translateX(2.5px)}
.carousel__nav .btn-circle[data-dir="1"]:hover .chev__b,.carousel__nav .btn-circle[data-dir="1"].is-hover .chev__b{transform:translateX(-1.5px) rotate(0deg)}
.carousel__nav .btn-circle[data-dir="-1"]:hover .chev__a,.carousel__nav .btn-circle[data-dir="-1"].is-hover .chev__a{transform:translateX(1.5px) rotate(180deg)}
.carousel__nav .btn-circle[data-dir="-1"]:hover .chev__b,.carousel__nav .btn-circle[data-dir="-1"].is-hover .chev__b{transform:translateX(-2.5px) rotate(180deg)}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;height:104px;display:flex;align-items:center;border-bottom:1px solid transparent;transition:background var(--dur) var(--ease),height var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.site-header.is-scrolled{background:var(--black);border-bottom-color:var(--line);height:72px}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);width:100%}
.logo{font-size:24px;color:var(--white);font-weight:400;letter-spacing:-.02em;white-space:nowrap;text-decoration:none}
.logo b{color:var(--red);font-weight:700}
.logo b sup{font-size:.6em}
.site-nav{display:flex;gap:34px}
.site-nav a{color:var(--text-soft);font:500 var(--fs-micro)/1 var(--font-sans);font-stretch:85%;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:8px 0;border-bottom:2px solid transparent;transition:color var(--dur),border-color var(--dur)}
.site-nav a:hover{color:var(--white)}
.site-nav a[aria-current]{color:var(--white);border-bottom-color:var(--red)}
.nav-toggle{display:none;background:none;border:0;color:var(--white);font-size:28px;cursor:pointer}
@media (max-width:767px){
  .site-header{height:80px}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--black);border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px 0}
  .site-nav.is-open{display:flex}
  .site-nav a{padding:16px var(--gutter);border-bottom:0}
  .site-nav a[aria-current]{border-left:3px solid var(--red);padding-left:calc(var(--gutter) - 3px)}
  .nav-toggle{display:block}
  .site-header .btn{display:none}
}
/* ---------- hero: bicromia rosso/nero + grana, titolo espanso ---------- */
.hero{position:relative;min-height:92svh;display:flex;align-items:flex-end;isolation:isolate;padding-top:104px;padding-bottom:clamp(48px,8vh,96px)}
/* foto desaturata a metà (i rossi del palco restano leggibili); velo rosso SOLO da destra, leggero;
   a sinistra un velo nero sostiene la leggibilità del titolo */
.hero__bg{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;filter:grayscale(.55) contrast(1.1) brightness(.55)}
.hero::before{content:'';position:absolute;inset:0;z-index:-2;background:
  linear-gradient(270deg,rgba(230,43,30,.14) 0%,rgba(230,43,30,.05) 32%,rgba(230,43,30,0) 55%),
  linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.2) 45%,rgba(0,0,0,0) 70%),
  linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.8) 92%)}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain);opacity:.16;mix-blend-mode:overlay}
.hero .container{width:100%;display:grid;grid-template-columns:1fr;gap:var(--s-3);border-top:1px solid rgba(255,255,255,.35);padding-top:var(--s-3)}
/* niente maiuscolo nel titolo: il marchio va scritto "TEDx" con la x minuscola (linee guida TED) */
.hero__title{font-size:var(--fs-display);font-weight:700;font-stretch:112%;line-height:.86;letter-spacing:-.045em;text-transform:none;color:var(--white)}
.hero__title .red{color:var(--red)}
.hero__tagline{font:400 clamp(17px,.6vw + 14px,22px)/1.45 var(--font-sans);color:var(--text-soft);max-width:520px;padding-left:22px;border-left:3px solid var(--red)}
.hero__tagline .red{color:var(--white);font-weight:600}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- blocco edizione 2026: rosso C con il campo di X (js/xfield.js) ----------
   Il caret rosso lampeggiante dopo "Loading" è comunicativo ("in caricamento"): resta rosso TEDx, dentro
   un'etichetta nera con l'angolo tagliato (stessa forma dei tag anno delle card). */
.teaser{position:relative;isolation:isolate;overflow:hidden;text-align:left;background:var(--red-deep);padding:var(--s-4) var(--gutter)}
.teaser>*{max-width:var(--container);margin-inline:auto}
.teaser>svg.xfield{max-width:none;margin:0}
.teaser h2{font-size:clamp(56px,7vw + 10px,150px);font-stretch:112%;letter-spacing:-.045em;line-height:.88;color:var(--white)}
.teaser__loading{display:flex;width:max-content;align-items:center;gap:10px;margin:var(--s-3) 0 var(--s-2);background:var(--black);color:var(--white);padding:11px 16px;font:500 13px/1 var(--font-sans);font-stretch:85%;letter-spacing:.14em;text-transform:uppercase;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
/* stesso allineamento sinistro del titolo (che è centrato con max-width) */
.teaser .teaser__loading{margin-left:max(0px,calc((100% - var(--container)) / 2))}
.teaser>div{margin-top:var(--s-2)}
.teaser .teaser__actions{justify-content:flex-start}
.teaser .btn--inverse{border-color:var(--white);color:var(--white)}
.teaser .btn--inverse:hover{background:rgba(0,0,0,.14);border-color:var(--white);color:var(--white)}
.cursor-blink{display:inline-block;width:3px;height:1.25em;border-radius:0;background:var(--red);vertical-align:middle;animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
/* ---------- CTA band ---------- */
.cta-band{background:var(--red);border-radius:0;padding:clamp(40px,6vw,80px) var(--s-3);text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2)}
.cta-band h2,.cta-band p{color:var(--white)}
/* ---------- newsletter ---------- */
.newsletter-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s-4);align-items:center}
@media (max-width:1024px){.newsletter-grid{grid-template-columns:1fr;gap:var(--s-3)}}
.newsletter-desc{font-size:clamp(18px,.8vw + 15px,26px);line-height:1.45;color:var(--text-bright);max-width:560px}
.newsletter-card{border-radius:0;padding:clamp(28px,3.5vw,52px);display:flex;flex-direction:column;gap:22px;box-shadow:none;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.newsletter-card input[type=email]{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.6);border-radius:0;padding:14px 0;color:var(--white);font:400 18px/1.3 var(--font-sans);outline:0;transition:border-color var(--dur)}
.newsletter-card input[type=email]:focus{border-bottom-color:var(--white)}
.newsletter-card input[type=email]::placeholder{color:rgba(255,255,255,.75)}
.newsletter-card .btn{width:100%;justify-content:center;background:var(--white);border-color:var(--white);color:var(--black);clip-path:none}
.newsletter-card .btn:hover{background:var(--black);border-color:var(--black);color:var(--white)}
.newsletter-terms{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--white)}
.newsletter-terms input{accent-color:var(--black)}
/* ---------- footer: carbone con barra rossa ---------- */
.site-footer{padding:var(--s-4) 0 var(--s-2)}
.site-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s-3)}
@media (max-width:1024px){.site-footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.site-footer__grid{grid-template-columns:1fr}}
.site-footer h6{display:flex;align-items:center;gap:12px;color:var(--white);margin-bottom:var(--s-2)}
.site-footer h6::before{content:'';width:18px;height:2px;background:var(--white)}
.site-footer ul{list-style:none;padding:0;display:grid;gap:12px}
.site-footer li{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.85)}
.site-footer li .dot{display:none}
.site-footer li a{color:rgba(255,255,255,.85)}
.site-footer li a:hover{color:var(--white);text-decoration-color:var(--white)}
.site-footer .logo b{color:var(--white)}           /* su fondo rosso il marchio va in bianco */
.site-footer__claim{color:rgba(255,255,255,.75);text-transform:uppercase;font:500 var(--fs-micro)/1.4 var(--font-sans);font-stretch:85%;letter-spacing:.12em;margin-top:12px;max-width:260px}
.site-footer__social{display:flex;gap:2px;margin-top:var(--s-2)}
.site-footer__social a{width:40px;height:40px;border-radius:0;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--white);text-decoration:none;transition:background var(--dur),border-color var(--dur)}
.site-footer__social a{border-color:rgba(255,255,255,.5)}
.site-footer__social a:hover{background:var(--white);border-color:var(--white);color:var(--black)}
.site-footer__bottom{border-top:1px solid rgba(255,255,255,.25);margin-top:var(--s-4);padding-top:var(--s-2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:rgba(255,255,255,.65);font:500 var(--fs-micro)/1.4 var(--font-sans);font-stretch:85%;letter-spacing:.1em;text-transform:uppercase}

/* ---------- about / manifesto ---------- */
.about-grid{display:grid;grid-template-columns:260px 1fr;gap:var(--s-2);align-items:start}
@media (max-width:1024px){.about-grid{grid-template-columns:1fr}}
.about__statement{font-family:var(--font-sans);font-weight:500;font-size:clamp(28px,2.2vw + 20px,56px);line-height:1.04;letter-spacing:-.025em;text-transform:none;color:var(--white);margin-bottom:var(--s-3);max-width:1000px}
[data-reveal] .w{color:rgba(255,255,255,.28);transition:color .5s var(--ease)}
[data-reveal] .w.on{color:inherit}
.photo-strip{display:flex;gap:4px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:var(--s-4);width:100%}
.photo-strip::-webkit-scrollbar{display:none}
.photo-strip img{height:clamp(220px,26vw,360px);width:auto;border-radius:0;scroll-snap-align:start;flex:none;filter:grayscale(.25);transition:filter .5s var(--ease)}
.photo-strip img:hover{filter:grayscale(0)}
/* ---------- campo di X (sostituisce la texture fotografica): superficie chiara su cui js/xfield.js
   disegna X rosse, nere e bianche che all'ingresso in pagina arrivano ruotando nella loro posizione e poi
   restano ferme. Più densa verso destra (o verso l'alto nelle card), libera dove sta il testo. ---------- */
.tex-red,.teaser{position:relative;isolation:isolate;overflow:hidden;background:var(--red-deep)}
.xfield{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.xfield .x{fill:none;stroke-linecap:butt;transform-box:fill-box;transform-origin:center}
/* su rosso: rosso scuro, bianco e nero, tutti tenui */
.xfield .x--r{stroke:var(--red-shade);stroke-opacity:.9}
.xfield .x--k{stroke:#000;stroke-opacity:.28}
.xfield .x--w{stroke:var(--white);stroke-opacity:.26}
/* su nero (card 2026): il nero diventa grigio scuro */
.edition-card .xfield .x--r{stroke:var(--red);stroke-opacity:.95}
.edition-card .xfield .x--k{stroke:#fff;stroke-opacity:.09}
.edition-card .xfield .x--w{stroke-opacity:.22}
/* ---------- edition card ---------- */
.edition-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2)}
@media (max-width:1024px){.edition-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.edition-grid{grid-template-columns:1fr}}
.edition-card{position:relative;aspect-ratio:303/470;border-radius:0;overflow:hidden;box-shadow:none;background:var(--carbon);clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.edition-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.4) brightness(.72);transition:filter .5s var(--ease),transform .7s var(--ease)}
.edition-card:hover .edition-card__img{filter:grayscale(0) brightness(.85);transform:scale(1.03)}
.edition-card__chip{position:absolute;top:0;left:0;transform:none;min-width:0;text-align:left;font-size:15px;padding:10px 16px}
.edition-card__panel{position:absolute;left:0;right:0;bottom:0;isolation:isolate;border-radius:0;padding:24px 18px 20px;background:rgba(0,0,0,.9);border-top:3px solid var(--red)}
.edition-card__panel::before{content:none}
.edition-card__panel h5{margin-bottom:8px;max-width:80%}
.edition-card__panel p{font-size:13.5px;line-height:1.5;color:var(--text)}
.edition-card__panel .btn-circle{position:absolute;top:-23.5px;right:10px}
.edition-card.tex-red{background:var(--black)}
.section-head--split{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:var(--s-2);flex-wrap:wrap}
/* ---------- testata di sezione: filetto, occhiello numerato, titolo ---------- */
.section-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);margin-bottom:var(--s-3);padding-top:var(--s-2);border-top:1px solid var(--line)}
.section-head--center{align-items:center;text-align:center}
.about-grid>div:first-child{padding-top:var(--s-2);border-top:1px solid var(--line)}
/* ---------- partner ---------- */
.partners{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;justify-content:space-between;padding-block:var(--s-3);border-top:1px solid var(--line);opacity:1}
.partners img{height:32px;width:auto;filter:grayscale(1) brightness(1.6);opacity:.7;transition:opacity var(--dur)}
.partners img:hover{opacity:1}

/* ---------- strip carousel ---------- */
.carousel--strip .carousel__nav{margin:0}
.carousel--strip .carousel__nav button{position:absolute;top:50%;margin-top:-22px;z-index:2;filter:drop-shadow(0 0 4px rgba(0,0,0,.9)) drop-shadow(0 0 1px rgba(0,0,0,.9))}
.carousel--strip [data-dir="-1"]{left:var(--gutter)}
.carousel--strip [data-dir="1"]{right:var(--gutter)}
.carousel__track{cursor:grab}
.carousel__track.dragging{cursor:grabbing;scroll-snap-type:none}
.photo-strip img{user-select:none;-webkit-user-drag:none;pointer-events:none}
.carousel__track[data-marquee]{scroll-snap-type:none}

/* ---------- intro + nav anni ---------- */
.lead{max-width:760px;font-size:18px;line-height:1.6;color:var(--text)}
.lead strong{color:var(--white)}
.year-nav{display:flex;flex-wrap:wrap;gap:0;padding-block:var(--s-3);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.year-nav a{font:700 clamp(22px,2.2vw,34px)/1 var(--font-sans);font-stretch:112%;font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--text-dim);padding:6px clamp(14px,2vw,30px) 6px 0;text-decoration:none;transition:color var(--dur)}
.year-nav a:hover{color:var(--white)}
/* ---------- blocco edizione ---------- */
.edition-block{padding-block:var(--s-4);scroll-margin-top:110px}
.edition-head{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s-2);margin-bottom:var(--s-3);align-items:stretch}
@media (max-width:1024px){.edition-head{grid-template-columns:1fr}}
.info-card{border-radius:0;padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;gap:var(--s-2);clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.info-card__year{text-align:left;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;padding:0;font:700 clamp(64px,7vw,120px)/.9 var(--font-sans);font-stretch:112%;letter-spacing:-.045em;color:var(--white)}
.info-card__theme{font-size:clamp(26px,2.3vw,36px);font-weight:600;letter-spacing:-.02em;text-transform:none;color:var(--white);margin-top:var(--s-1);padding-top:var(--s-2);border-top:1px solid rgba(255,255,255,.4)}
.info-card p{color:var(--white)}
.edition-media{display:flex;flex-direction:column;gap:var(--s-2)}
.chips-row{display:flex;gap:2px;flex-wrap:wrap}
.chip-dark{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line-strong);border-radius:0;padding:10px 16px;font:500 var(--fs-micro)/1 var(--font-sans);font-stretch:85%;letter-spacing:.1em;text-transform:uppercase;color:var(--white)}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:4px;flex:1;min-height:0}
.gallery img{width:100%;height:100%;min-height:220px;object-fit:cover;border-radius:0}
/* ---------- griglia talk ---------- */
.talk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2)}
@media (max-width:1024px){.talk-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.talk-grid{grid-template-columns:1fr}}
.edition-block__footer{display:flex;justify-content:center;margin-top:var(--s-3)}
/* ---------- pagina teaser 2026 ---------- */
.teaser-page{min-height:100svh;padding-top:150px}

/* ---------- feature (chi siamo) ---------- */
.feature-grid{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:var(--s-3);align-items:center;margin-top:var(--s-3)}
@media (max-width:1024px){.feature-grid{grid-template-columns:1fr}}
.feature-plain h5{margin-bottom:12px}
.feature-plain p{font-size:15px}
.feature-item{display:grid;grid-template-columns:56px 1fr;gap:16px;padding-block:var(--s-2)}
.feature-item+.feature-item{border-top:1px solid var(--line)}
.feature-item__icon{width:56px;height:56px;border-radius:0;border:1px solid var(--line-strong);background:none;display:grid;place-items:center}
.feature-item__icon img{width:28px;height:28px;filter:invert(1)}
.feature-item h5{margin-bottom:8px}
.feature-item p{font-size:15px}
/* ---------- promo card ---------- */
.promo-card{border-radius:0;padding:28px;min-height:450px;display:flex;flex-direction:column;box-shadow:none;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.promo-card h4{max-width:78%}
.promo-card__sub{color:rgba(255,255,255,.85);margin-top:10px}
.promo-card>.btn-circle{position:absolute;top:24px;right:24px}
.promo-card__inner{margin-top:auto;background:var(--white);border-radius:0;padding:22px;max-width:260px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.promo-card__inner h6{color:var(--black);font-size:15px;font-stretch:100%;letter-spacing:-.01em;text-transform:none;font-weight:600}
.promo-card__inner p{color:#444;font-size:14px;line-height:1.45}
.pill-light{display:inline-block;background:var(--black);color:var(--white);border-radius:0;padding:10px 16px;font:500 var(--fs-micro)/1 var(--font-sans);font-stretch:85%;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.pill-light:hover{background:var(--red);color:var(--white)}
/* ---------- campi form nella card rossa ---------- */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
@media (max-width:767px){.form-row{grid-template-columns:1fr}}
.newsletter-card input[type=text],.newsletter-card textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.6);border-radius:0;padding:14px 0;color:var(--white);font:400 17px/1.3 var(--font-sans);outline:0}
.newsletter-card textarea{min-height:120px;resize:vertical;border:1px solid rgba(255,255,255,.6);padding:14px}
.newsletter-card input::placeholder,.newsletter-card textarea::placeholder{color:rgba(255,255,255,.75)}
/* ---------- benefici (diventa partner): elenco numerato con filetti ---------- */
.benefits{position:relative;margin-top:var(--s-3);display:grid;gap:0;max-width:840px;border-top:1px solid var(--line);counter-reset:ben}
.benefits::before{content:none}
.benefit{position:relative;display:grid;grid-template-columns:64px 1fr;gap:18px;padding:var(--s-2) 0;border-bottom:1px solid var(--line)}
.benefit::before{counter-increment:ben;content:counter(ben,decimal-leading-zero);position:static;width:auto;height:auto;border-radius:0;background:none;box-shadow:none;font:700 28px/1 var(--font-sans);font-stretch:112%;letter-spacing:-.03em;color:var(--red)}
.benefit__icon{display:none}
.benefit h3{font-size:19px;margin-bottom:8px;text-transform:none;letter-spacing:-.01em;font-weight:600}
.benefit p{font-size:15px;color:var(--text);max-width:600px}
/* ---------- griglia loghi partner ---------- */
.logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4) var(--s-3);align-items:center;justify-items:center;margin-top:var(--s-3)}
@media (max-width:767px){.logo-grid{grid-template-columns:repeat(2,1fr)}}
.logo-grid img{max-height:110px;max-width:min(220px,80%);width:auto;height:auto}
/* ---------- foto team ---------- */
.team-photo{width:100%;border-radius:0;margin-top:var(--s-2);filter:grayscale(.2)}

/* ---------- X delle card: a riposo ruotata di 90° (due chevron affrontati in verticale: il filo rosso del
   pannello passa nella luce tra i vertici). Passando sulla card ruota a 0° e diventa >> rossa; puntando
   proprio la freccia, i >> avanzano di qualche pixel (components.css qui metteva un quadrato rosso). ---------- */
.talk-card .btn-circle:hover,.edition-card .btn-circle:hover,.promo-card>.btn-circle:hover{background:transparent}
.talk-card .btn-circle,.edition-card .btn-circle,.promo-card>.btn-circle,.btn-circle--card{transform:rotate(90deg);filter:drop-shadow(0 0 3px rgba(0,0,0,.85));transition:transform .45s var(--ease),color var(--dur) var(--ease)}
.talk-card:hover .btn-circle,.edition-card:hover .btn-circle,.promo-card:hover>.btn-circle,.btn-circle--card:hover,.btn-circle--card.is-hover{transform:rotate(0deg);color:var(--red)}
.talk-card:hover .btn-circle .chev__a,.edition-card:hover .btn-circle .chev__a,.promo-card:hover>.btn-circle .chev__a{transform:translateX(.5px)}
.talk-card:hover .btn-circle .chev__a,.edition-card:hover .btn-circle .chev__a,.promo-card:hover>.btn-circle .chev__a{transform:translateX(-.5px)}
.talk-card:hover .btn-circle .chev__b,.edition-card:hover .btn-circle .chev__b,.promo-card:hover>.btn-circle .chev__b{transform:translateX(-4.5px) rotate(0deg)}

/* sulle superfici rosse i >> diventano bianchi (rosso su rosso non si vedrebbe) */
.promo-card:hover>.btn-circle,.promo-card>.btn-circle:hover{color:var(--white)}

/* ---------- gallery edizione come carousel ---------- */
.gallery-car{flex:1;display:flex;flex-direction:column;min-height:0}
.gallery-car .carousel__track{flex:1;padding-bottom:0}
.gallery-car .carousel__track img{flex:0 0 calc(50% - 2px);width:calc(50% - 2px);height:100%;min-height:240px;object-fit:cover;border-radius:0;scroll-snap-align:start;user-select:none;-webkit-user-drag:none;pointer-events:none}
@media (max-width:767px){.gallery-car .carousel__track img{flex:0 0 100%;width:100%}}
/* ---------- load more talk ---------- */
.talk-card.is-hidden{display:none}

/* =====================================================================================================
   Integrazione con i componenti propri del tema (assenti nel prototipo): pagine interne, Edizione 2026,
   legali, speech, Fluent Forms, cookie. Stessa grammatica: angoli vivi con taglio, superfici piatte,
   rosso C per le superfici, rosso TEDx per gli accenti, campo di X sui banner.
   ===================================================================================================== */

/* bottoni pieni dentro superfici rosse: bianchi (rosso su rosso non si legge) */
.tex-red .btn--primary,.teaser .btn--primary,.page-hero .btn--primary,.ed26-band .btn--primary{background:var(--white);border-color:var(--white);color:var(--black)}
.tex-red .btn--primary:hover,.teaser .btn--primary:hover,.page-hero .btn--primary:hover,.ed26-band .btn--primary:hover{background:var(--black);border-color:var(--black);color:var(--white)}
.ed26-band .eyebrow .dot{background:var(--white)}

/* misura del campo di X: durante il calcolo gli elementi con entrata animata non devono essere traslati */
.xf-measure .anim{transform:none!important;transition:none!important}

/* hero a fascia delle pagine interne (chi siamo, edizioni passate, diventa partner, legali):
   via la texture a onde, rosso C che sfuma nel nero; il campo di X sta sotto la sfumatura */
.page-hero:not(.hero){background:var(--red-deep)}
.page-hero:not(.hero)::before{background:linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 55%,#000 100%)}
.page-hero>svg.xfield{z-index:-2}
.page-hero__sub{color:var(--text-bright)}
/* pagina speech: la hero è fotografica (classi .hero + .page-hero) */
.hero.page-hero{background:var(--black)}
.speech-video{border-radius:0;box-shadow:none;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.speech-nav__link{border-radius:0;border-color:var(--line-strong);text-decoration:none}
.speech-nav__link:hover{border-color:var(--red);transform:none}
.speech-nav__dir{font:500 var(--fs-micro)/1 var(--font-sans);font-stretch:85%;letter-spacing:.14em;color:var(--red)}

/* newsletter / contatti / partnership con Fluent Forms dentro la card rossa. Il plugin stampa regole come
   form.fluent_form_5 .ff-btn-submit:not(.ff_btn_no_style){background:#E40A2B}: servono selettori più forti */
.newsletter-card .frm-fluent-form .ff-el-form-control{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.6);border-radius:0;padding:14px 0;color:var(--white);font:400 18px/1.3 var(--font-sans);box-shadow:none}
.newsletter-card .frm-fluent-form textarea.ff-el-form-control{border:1px solid rgba(255,255,255,.6);border-radius:0;padding:14px;min-height:130px;background:rgba(0,0,0,.12)}
.newsletter-card .frm-fluent-form .ff-el-form-control:focus{border-color:var(--white);outline:0;box-shadow:none;background:transparent}
.newsletter-card .frm-fluent-form textarea.ff-el-form-control:focus{background:rgba(0,0,0,.2)}
.newsletter-card .frm-fluent-form .ff-el-form-control::placeholder{color:rgba(255,255,255,.62);opacity:1}
.newsletter-card .frm-fluent-form .ff-el-group{margin-bottom:22px}
.newsletter-card .frm-fluent-form .ff-el-input--label{margin-bottom:2px}
.newsletter-card .frm-fluent-form .ff-el-input--label label{color:var(--white);font:500 var(--fs-micro)/1.3 var(--font-sans);font-stretch:85%;letter-spacing:.12em;text-transform:uppercase}
.newsletter-card .frm-fluent-form .ff-el-is-required.asterisk-right label::after,.newsletter-card .frm-fluent-form .ff-el-is-required.asterisk-left label::before{color:rgba(255,255,255,.7)}
.newsletter-card .frm-fluent-form .ff-el-form-check-label,.newsletter-card .frm-fluent-form .ff_t_c,.newsletter-card .frm-fluent-form .ff-el-input--content{color:rgba(255,255,255,.85);font-size:14px;line-height:1.55}
.newsletter-card .frm-fluent-form a{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.newsletter-card .frm-fluent-form input[type=checkbox]{accent-color:var(--black);width:16px;height:16px}
.newsletter-card form .ff-btn.ff-btn-submit:not(.ff_btn_no_style),.newsletter-card form .ff-btn.ff-btn-submit{width:100%;border:0;border-radius:0;background:var(--white);color:var(--black);font:500 var(--fs-btn)/1 var(--font-sans);font-stretch:85%;letter-spacing:.12em;text-transform:uppercase;padding:19px 26px;box-shadow:none;opacity:1}
.newsletter-card form .ff-btn.ff-btn-submit:not(.ff_btn_no_style):hover,.newsletter-card form .ff-btn.ff-btn-submit:hover{background:var(--black);color:var(--white);opacity:1}
.newsletter-card .frm-fluent-form .ff-el-is-error .text-danger{color:var(--white);font-size:12px}
.newsletter-card .frm-fluent-form .ff-el-is-error .ff-el-form-control{border-color:var(--white)}
.newsletter-card .ff-message-success{border-radius:0;background:rgba(0,0,0,.25);color:var(--white);border:0}
/* footer: i menu WP non hanno lo span .dot, il pallino era un ::before (wp.css) */
.site-footer__grid ul li::before{content:none}

/* occhiello senza numero (pagina Edizione 2026) e etichette dei tier */
.eyebrow{background:none;border:0;border-radius:0;padding:0;gap:10px;font:500 var(--fs-micro)/1 var(--font-sans);font-stretch:85%;letter-spacing:.14em;text-transform:uppercase;color:var(--white)}
.eyebrow .dot,.tier__label .dot{width:7px;height:7px;border-radius:0;background:var(--red)}
.ed26-band .eyebrow{background:none;border:0}
.tier__label{font:500 var(--fs-micro)/1 var(--font-sans);font-stretch:85%;letter-spacing:.14em;text-transform:uppercase}
/* superfici "vetro" del tema: carbone piatto con angolo tagliato */
.tedx-scheda,.ed26-date__card,.tier--title .tier__logos{background:var(--carbon);border:0;border-radius:0;box-shadow:none;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.tedx-ritratto{border-radius:0}
.logo-grid img{border-radius:0;background:var(--carbon);border:0}
.partner-slideshow{border-radius:0;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.ed26-date__day{font-weight:700;font-stretch:112%}
.ed26-date__time{font-stretch:85%;letter-spacing:.14em}
/* pagine legali */
.tedx-legale .tedx-legale-titolare,.tedx-legale .tedx-legale-tabella{border-radius:0}
.tedx-legale li::marker{color:var(--red)}
@media (max-width:767px){.tedx-legale tbody tr{border-radius:0}}
/* Edizione 2026: manifesto e banner biglietti in rosso C (non più il rosso pieno), con il campo di X */
.ed26-manifesto h2{font-weight:600;letter-spacing:-.03em}
.ed26-band{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,var(--red-deep) 0%,var(--red-deep) 55%,#3A0906 100%)}
.tedx-onda{background:var(--red-deep)}
/* cookie: il banner resta quello del riferimento, ma con il rosso C */
.tedx-cookie__btn{background:var(--red-deep);border-color:var(--red-deep)}
.tedx-cookie__btn:hover{color:var(--red-deep)}
.tedx-switch input:checked+span{background:var(--red-deep)}
.tedx-cookie-revisit{background:var(--red-deep)}
.tedx-cookie-revisit svg{fill:var(--red-deep)}

/* ---------- freccia dei bottoni: come le frecce delle card. A riposo la X di TEDx (due chevron) ruotata di 90°,
   in hover ruota a 0° e diventa >>. Nei bottoni a filo parte rossa e diventa bianca; nei bottoni pieni e sulle
   superfici rosse segue il colore del testo (bianca). ---------- */
.btn .arrow{position:relative;display:inline-block;flex:none;width:18px;height:14px;font-size:0;line-height:0;color:inherit;transform:rotate(90deg);transition:transform .45s var(--ease),color var(--dur) var(--ease)}
.btn .arrow .chev__a,.btn .arrow .chev__b{transition:transform .45s var(--ease)}
.btn .arrow .chev__b{transform:rotate(180deg)}
.btn:hover .arrow,.btn:focus-visible .arrow{transform:rotate(0deg)}
.btn:hover .arrow .chev__a,.btn:focus-visible .arrow .chev__a{transform:translateX(1px)}
.btn:hover .arrow .chev__b,.btn:focus-visible .arrow .chev__b{transform:translateX(-2.5px) rotate(0deg)}
.btn--inverse .arrow{color:var(--red)}
.btn--inverse:hover .arrow,.btn--inverse:focus-visible .arrow{color:var(--white)}
.teaser .btn--inverse .arrow,.tex-red .btn--inverse .arrow,.page-hero .btn--inverse .arrow,.ed26-band .btn--inverse .arrow{color:var(--white)}
@media (prefers-reduced-motion:reduce){.btn .arrow,.btn .arrow .chev__a,.btn .arrow .chev__b{transition:none}}

/* ---------- header sopra la fascia rossa delle pagine interne (finché non si scorre): marchio e bottone
   in bianco, altrimenti rosso su rosso spariscono. Su fondo rosso il marchio TEDx va in bianco. ---------- */
body:has(.page-hero:not(.hero)) .site-header:not(.is-scrolled) .logo b{color:var(--white)}
body:has(.page-hero:not(.hero)) .site-header:not(.is-scrolled) .btn--primary{background:var(--white);border-color:var(--white);color:var(--black)}
body:has(.page-hero:not(.hero)) .site-header:not(.is-scrolled) .site-nav a[aria-current]{border-bottom-color:var(--white)}
/* pulsante "preferenze cookie": nero con biscotto bianco, si legge sia sul nero sia sul footer rosso */
.tedx-cookie-revisit{background:var(--black);box-shadow:0 0 0 1px rgba(255,255,255,.45),0 2px 10px rgba(0,0,0,.35)}
.tedx-cookie-revisit svg{fill:var(--black)}
/* puntando proprio la freccia di una card: stesso effetto dell'hover sulla card (>> rossi; bianchi solo sulla card rossa) */
.talk-card .btn-circle:hover,.edition-card .btn-circle:hover{color:var(--red)}

/* ---------- Edizioni passate: la fila di anni in alto torna a card (carbone, angolo tagliato, rosse al passaggio).
   L'anno grande dentro la card rossa di ogni edizione resta testo, come prima. ---------- */
.year-nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding-block:var(--s-3);border:0}
@media (max-width:767px){.year-nav{grid-template-columns:repeat(2,1fr);gap:8px}}
.year-nav a{position:relative;display:flex;align-items:flex-end;min-height:120px;background:var(--carbon);color:var(--white);padding:26px 22px 18px;font:700 clamp(32px,1.8vw + 14px,46px)/1 var(--font-sans);font-stretch:112%;letter-spacing:-.03em;text-decoration:none;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);transition:background var(--dur) var(--ease)}
.year-nav a::before{content:'';position:absolute;top:0;left:0;width:20px;height:3px;background:var(--red);transition:width .4s var(--ease)}
.year-nav a:hover{background:var(--red);color:var(--white)}
.year-nav a:hover::before{width:100%;background:var(--white)}
.year-nav a::before{width:36px}
@media (max-width:767px){.year-nav a{min-height:92px;padding:20px 16px 14px}}
/* frecce della galleria sulle foto: niente alone quadrato né doppio spostamento ereditati dal tema di base */
.carousel--strip .carousel__nav button{box-shadow:none;transform:none}

/* Edizione 2026: il titolo del manifesto è bianco pieno (via la sfumatura grigio-bianco del riferimento) */
.ed26-gradient{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--white)}
/* anni di Edizioni passate: tutti su una riga su desktop (niente anno orfano), 4 per riga su tablet, 2 su telefono */
@media (min-width:1025px){.year-nav{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}}
@media (min-width:768px) and (max-width:1024px){.year-nav{grid-template-columns:repeat(4,1fr)}}

/* puntando proprio la freccia di una card (speech, edizioni, card rossa) i >> avanzano di qualche pixel nella
   loro direzione; colore invariato rispetto all'hover sulla card (rossi; bianchi sulla card rossa) */
.talk-card .btn-circle:hover .chev__a,.edition-card .btn-circle:hover .chev__a,.promo-card>.btn-circle:hover .chev__a{transform:translateX(2.5px)}
.talk-card .btn-circle:hover .chev__b,.edition-card .btn-circle:hover .chev__b,.promo-card>.btn-circle:hover .chev__b{transform:translateX(-1.5px) rotate(0deg)}

/* form: il testo resta bianco anche mentre si scrive (Fluent Forms in :focus lo rimetteva grigio) e con
   l'autocompilazione del browser (che altrimenti impone testo scuro e fondo chiaro) */
.newsletter-card .frm-fluent-form .ff-el-form-control,.newsletter-card .frm-fluent-form .ff-el-form-control:focus,
.newsletter-card input,.newsletter-card textarea{color:var(--white);-webkit-text-fill-color:var(--white);caret-color:var(--white)}
.newsletter-card input:-webkit-autofill,.newsletter-card input:-webkit-autofill:hover,.newsletter-card input:-webkit-autofill:focus{-webkit-text-fill-color:var(--white);-webkit-box-shadow:0 0 0 1000px var(--red-deep) inset;box-shadow:0 0 0 1000px var(--red-deep) inset;transition:background-color 9999s ease-out 0s}

/* anni di Edizioni passate: le colonne possono stringersi (minmax(0,1fr)) e il corpo segue la larghezza,
   così la fila non sborda mai a destra dal contenitore (prima a 1920 px usciva di 118 px) */
.year-nav a{min-width:0;overflow:hidden;font-size:clamp(24px,2.2vw,40px);padding:26px 16px 18px}
@media (min-width:1025px){.year-nav{grid-auto-columns:minmax(0,1fr)}}
@media (min-width:768px) and (max-width:1024px){.year-nav{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:767px){.year-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.year-nav a{font-size:32px}}

/* chi siamo: le icone sono glifi bianchi; il filtro invert del tema le rendeva nere su nero (invisibili) */
.feature-item__icon img{filter:none}