.container {

}


/* 在你的 CSS 文件中添加以下代碼 */

.hori {
    container-type: inline-size;
    container-name: horizontal-scroll;
  }
  
  /* 當容器寬度小於 768px 時，設置 --is-mobile 變數為 1 */
  @container horizontal-scroll (max-width: 600px) {
    .hori {
      --is-mobile: 1;
    }
  }
  
  /* 當容器寬度大於 768px 時，設置 --is-mobile 變數為 0 */
  @container horizontal-scroll (min-width: 600px) {
    .hori {
      --is-mobile: 0;
    }
  }

  
.kv {
    height: 80vh;
    position: relative;
}

.kv-bg {
    position: absolute;
    inset: 0;
    width: 100vw;
}

.kv-top {
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 80%);
    height: 100vh;
    z-index: -1;
}

.brxe-video {
    height: 100%;
    background-color: #8c1209;
    position: relative;
    overflow: hidden;
}

.brxe-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.bg-bottom {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: -1;
}
.bg {
    background-color: #8c1209;
}

/* Gradiente fade dal basso sull'immagine crown per eliminare lo stacco - reso meno marcato */
.bg-bottom ~ .brxe-div.bg-lines::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 35%;
    background: linear-gradient(to bottom, transparent 0%, rgba(140, 18, 9, 0.6) 50%, #8c1209 100%);
    z-index: 10;
    pointer-events: none;
}

/* Gradiente fade direttamente come overlay sull'immagine bg-bottom */
.bg-bottom + * {
    position: relative;
}

/* Fondale corona: ancorato al viewport, non al documento.
   Prima era `absolute; top: 65vh; height: 120vh`, cioe' un rettangolo fisso nel
   documento. Ma `.kv-top` ha un clip-path animato in scroll (kvTl) che fa
   RISALIRE il bordo inferiore del video: il video si accorciava piu' in fretta
   di quanto questo rettangolo potesse coprire, scoprendo una fascia di `.bg`
   (#8c1209) tra i due. Stessa cosa in fondo, dove i 120vh finivano molto prima
   dei 400vh di `.about`.
   Da fixed a tutto schermo il fondale non ha piu' bordi raggiungibili: qualunque
   cosa scopra la serranda del video trova sempre la corona sotto. */
.brxe-image.bg-bottom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: center 35%;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background-color: #8c1209;
    z-index: -1;
    will-change: transform;
}

@media only screen and (max-width: 600px) {
    .brxe-image.bg-bottom {
        object-position: center 30%;
    }
}
.preloader {
    position: absolute;
    inset: 0;
    z-index: 1000;
}

.preloader svg {
    width: 100%;
    height: auto;
}

.preload-bg {
    background-color: #000;
    width: 100vw;
    height: 100vh;
    position: absolute;
    inset: 0;
    z-index: -1;
}

.svg-char {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    overflow: clip;
}

.kv-title {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 2;
    width: 100%;
    top: 0;
    left: 0;
}

.title-r {
    display: inline-flex;
    flex-direction: row;
}

.bg-lines {
    width: 100vw;
    height: 100vh;
    position: fixed;
    inset: 0;
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-end;
    z-index: 2;
    pointer-events: none;
}

.bg-line {
    display: none;
    width: 1px;
    height: 100vh;
    background-color: #ffffff3e;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

.bg-line:nth-child(1) {
    margin-right: calc(var(--svg-height) * 31 / 8); 
}

.bg-line:nth-child(3) {
    position: absolute;
    right: calc(var(--svg-height) * 148 / 80); 
}

.bg-line:nth-child(2) {
    margin-right: 10vw; 
}



.svg-wrap {
    width: min(72vw, 1300px);  
    height: var(--svg-height);
}

.svg-holder {
    width: 100%;
    height: var(--svg-height);
}

.svg-holder svg, .zhan {
    width: 100%;
    height: 100%;
    object-fit: contain;
    overflow: visible;
    text-rendering: geometricPrecision;
    shape-rendering: geometricPrecision;
}

.svg-holder svg text, .zhan text {
    font-family: 'Bodoni Moda', 'Playfair Display', serif;
    text-rendering: geometricPrecision;
    shape-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.kv-title, .svg-wrap, .title-r, .svg-holder {
    overflow: visible !important;
}

.ling-wrap, .brxe-image.ball, .ball {
    display: none !important;
}

.ling-wrap img {
    width: 100%;
    height: auto;
}

.hero-year-bottom {
    position: absolute !important;
    bottom: -5rem !important;
    right: 2rem !important;
    z-index: 99999 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-family: 'Tenor Sans', 'Cinzel', 'Montserrat', sans-serif !important;
    font-size: clamp(3rem, 5vw, 5rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    color: #FFD700 !important;
    text-shadow: 0 0 25px rgba(255, 215, 0, 0.95), 0 3px 15px rgba(0, 0, 0, 0.95) !important;
    text-transform: uppercase !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    pointer-events: none !important;
}

@media (max-width: 600px) {
    .hero-year-bottom {
        bottom: 2rem !important;
        right: 2rem !important;
        font-size: 2.2rem !important;
    }
}

.zhan {
    width: auto;
    height: var(--svg-height);
}

.header-wrap {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 99;
    width: 100vw;
    padding: 8px 4rem ;
    gap: 4rem;
}


.menu-btn {
    font-size: 2rem;
    cursor: pointer;
    pointer-events: auto;
}

.ball {
    width: 1.6rem;
    height: auto;
    object-fit: contain;
}

.nav {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: var(--fs-sm);
    overflow: clip;
}

/* --- PARTNER SHOWCASE (schede organizzatori) ---------------------------
   Due schede essenziali: cornice in filo d'oro, occhiello, logo centrato e
   copy in Bodoni corsivo. Niente decori aggiuntivi. Su mobile occupano quasi
   tutto il viewport, perche' li' si alternano con la didascalia e hanno
   l'intera altezza a disposizione. */
.opposing-split-showcase {
    /* Didascalia + card devono stare tutte dentro i 100vh del box sticky di
       .about-content. Con l'altezza fissa a 400px su schermi bassi lo stack
       sfondava: il titolo finiva sotto la nav e le card venivano tagliate. */
    --about-card-h: clamp(260px, 46vh, 400px);
    --gold: #D4AF37;
    --gold-lt: #F5E096;
    --gold-dp: #8a6d1c;

    display: flex;
    flex-direction: row;
    width: 85%;
    max-width: 1040px;
    height: var(--about-card-h);
    margin: 0 auto;
    overflow: visible;
    position: relative;
    gap: 2.6rem;
    z-index: 10;
}

/* Guscio neutro: e' l'elemento che GSAP anima (yPercent + opacity),
   quindi non porta ne' bordo ne' ombra. */
.split-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.split-item {
    height: var(--about-card-h, 400px);
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.split-item.partner-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    padding: clamp(2rem, 3.4vh, 3.2rem) clamp(2rem, 2.6vw, 3.4rem);
    border-radius: 2px;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(212, 175, 55, 0.10) 0%, rgba(212, 175, 55, 0) 62%),
        linear-gradient(168deg, #17150f 0%, #0b0b0b 48%, #100d07 100%);
    box-shadow:
        0 32px 70px -18px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.6s;
}

.right-col .split-item.partner-item {
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(190, 60, 40, 0.12) 0%, rgba(190, 60, 40, 0) 62%),
        linear-gradient(168deg, #1a100e 0%, #0b0b0b 48%, #130c0a 100%);
}

@media (hover: hover) {
    .split-item.partner-item:hover {
        transform: translateY(-4px);
        box-shadow:
            0 40px 80px -18px rgba(0, 0, 0, 0.92),
            0 0 0 1px rgba(212, 175, 55, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.07);
    }
}

/* Cornice in filo d'oro: gradiente ritagliato a 1px con mask-composite,
   cosi' il filo cambia intensita' lungo il perimetro invece di essere piatto. */
.split-item.partner-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(150deg,
        rgba(245, 224, 150, 0.55) 0%,
        rgba(212, 175, 55, 0.20) 26%,
        rgba(212, 175, 55, 0.06) 50%,
        rgba(212, 175, 55, 0.22) 76%,
        rgba(245, 224, 150, 0.45) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

/* --- occhiello --- */
.item-header,
.partner-item .item-header {
    width: 100%;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-role {
    font-family: 'Tenor Sans', system-ui, sans-serif;
    font-size: clamp(0.72rem, 0.78vw, 0.86rem);
    letter-spacing: 0.34em;
    /* compensa lo spazio che il letter-spacing aggiunge dopo l'ultima lettera */
    text-indent: 0.34em;
    color: rgba(233, 220, 190, 0.72);
    text-transform: uppercase;
    white-space: nowrap;
}

/* --- logo --- */
.brand-logo-wrap,
.partner-item .brand-logo-wrap {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 2.2vh, 2rem) 0;
    position: relative;
}

.brand-logo,
.partner-item .brand-logo {
    width: auto;
    height: auto;
    max-width: 78%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.6));
}

/* I due marchi hanno peso ottico molto diverso: il lockup Saint Jack e'
   piu' pesante, quindi va tenuto piu' stretto per pareggiare la presenza. */
.logo-sj { max-width: 58%; }
.logo-rt { max-width: 74%; }

/* --- testo --- */
.partner-copy {
    flex: 0 0 auto;
    width: 100%;
}

.gold-shimmer {
    background: linear-gradient(135deg, #FFFFFF 0%, #F5E096 40%, #D4AF37 80%, #AA820A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.desc-heading {
    font-family: 'Tenor Sans', system-ui, sans-serif;
    font-weight: 400;
    font-size: clamp(0.92rem, 1.02vw, 1.15rem);
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    margin: 0 0 clamp(0.8rem, 1.6vh, 1.2rem);
    text-transform: uppercase;
    background: linear-gradient(100deg, #FFF6DA 0%, #F0DA9B 32%, #D4AF37 62%, #B4913B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.item-desc {
    font-family: 'Bodoni Moda', serif;
    font-style: italic;
    font-size: clamp(1.1rem, 1.12vw, 1.32rem);
    line-height: 1.74;
    color: rgba(234, 230, 222, 0.88);
    margin: 0;
    /* il body imposta uppercase su tutto: qui va annullato, il corsivo
       maiuscolo e' illeggibile su piu' righe */
    text-transform: none;
    text-wrap: balance;
}

/* Mobile: le schede si alternano con la didascalia, quindi hanno tutti i
   100vh per se'. Vanno grandi, non compresse. */
@media only screen and (max-width: 768px) {
    .opposing-split-showcase {
        flex-direction: column;
        width: 92%;
        max-width: 560px;
        height: auto;
        max-height: none;
        overflow: visible;
        background: transparent;
        border: none;
        box-shadow: none;
        gap: clamp(1.4rem, 2.4vh, 2.4rem);
    }

    .split-col {
        height: auto;
        border: none;
        background: transparent;
        box-shadow: none;
    }

    .split-item {
        height: auto;
    }

    .split-item.partner-item {
        min-height: clamp(240px, 39vh, 400px);
        padding: clamp(1.8rem, 3.2vh, 3.2rem) clamp(1.8rem, 5vw, 2.8rem);
    }

    .item-role {
        font-size: clamp(0.95rem, 2.8vw, 1.15rem);
        letter-spacing: 0.28em;
        text-indent: 0.28em;
    }

    .partner-item .brand-logo-wrap {
        padding: clamp(1.4rem, 3.2vh, 2.8rem) 0;
    }

    .logo-sj { max-width: 76%; }
    .logo-rt { max-width: 92%; }

    .desc-heading {
        font-size: clamp(1.15rem, 3.4vw, 1.45rem);
        letter-spacing: 0.2em;
        text-indent: 0.2em;
    }

    .item-desc {
        font-size: clamp(1.28rem, 3.7vw, 1.6rem);
        line-height: 1.74;
    }
}

.preload-txt {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translateX(-50%);
    z-index: 2;
    font-size: var(--fs-xs);
}

.about {
    overflow: clip;
    z-index: 4;
    height: 400vh;

}

/* `justify-content: flex-end` piu' un figlio alto 100% mandavano il contenuto
   in overflow SOPRA il box sticky: la didascalia finiva fuori dalla viewport in
   alto, sotto la nav fissa, ed era gia' visibile a scroll 0. Centrando e
   lasciando che i figli prendano la loro altezza naturale il blocco resta
   sempre dentro i 100vh; il padding-top tiene la nav libera. */
.about-content {
    position: sticky;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: var(--fs-sm);
    gap: clamp(1rem, 2.5vh, 2.5rem);
    /* La nav e' fixed e alta ~30px: questo padding le tiene libera la fascia
       alta anche quando lo stack e' centrato. In px perche' il root font-size
       del tema e' 10px, quindi i rem qui sarebbero troppo piccoli. */
    padding-top: max(8vh, 64px);
    padding-bottom: 3vh;
}

.about-content .lines-wrap {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    padding: 1.5rem 1rem !important;
    max-width: min(90vw, 840px) !important;
    margin: 0 auto !important;
    box-shadow: none !important;
    text-align: center !important;
}

.about-content .lines-wrap .gold-title {
    font-family: 'Bodoni Moda', 'Tenor Sans', serif !important;
    font-size: clamp(1.15rem, 2.2vw, 1.75rem) !important;
    font-weight: 600 !important;
    letter-spacing: 0.22em !important;
    color: #e6c260 !important;
    text-transform: uppercase !important;
    display: block !important;
    margin-bottom: clamp(0.85rem, 2.2vh, 2rem) !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.95), 0 2px 6px rgba(0, 0, 0, 0.9) !important;
}

.about-content .lines-wrap p {
    font-family: 'Bodoni Moda', 'Tenor Sans', serif !important;
    font-size: clamp(0.98rem, 1.35vw, 1.25rem) !important;
    letter-spacing: 0.04em !important;
    line-height: 1.9 !important;
    color: rgba(255, 255, 255, 0.94) !important;
    text-transform: none !important;
    margin-bottom: clamp(0.6rem, 1.7vh, 1.5rem) !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.9) !important;
    font-weight: 300 !important;
}

.about-content .lines-wrap p:last-child {
    margin-bottom: 0 !important;
}

/* This block sits directly on the page's crown/velvet background image, which
   is a warm, mid-brightness red -- too close in value to plain white text for
   text-shadow alone to guarantee contrast. A dark scrim behind just this text
   block keeps it readable regardless of what's behind it. */
.about-content .lines-wrap.ph-d {
    background: linear-gradient(180deg, rgba(8, 5, 4, 0.4), rgba(8, 5, 4, 0.78)) !important;
    border-radius: 14px !important;
    padding: clamp(1.1rem, 3vh, 2.75rem) 2rem !important;
}

@media only screen and (max-width: 600px) {
    .about-content .lines-wrap {
        padding: 1rem 0.5rem !important;
        max-width: 94vw !important;
    }
}

.about-content-inner {
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;
}

.about-title {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100vw;
    height: fit-content;
    padding-bottom: var(--site--margin);
    z-index: 99;
}

.about-title svg {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.about-gallery {
    position: relative;
    width: calc(100vw - (var(--svg-height) * 148 / 80) * 2); 
    height: auto;
    aspect-ratio: 446 / 175;
    overflow: clip;
    display: flex;
    align-items: center;
    justify-content: center;
    
}


.about-gallery-item {
    position: absolute;
    width: 0;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: clip;
}



.about-gallery-item img {
    position: relative;
    width: calc(100vw - (var(--svg-height) * 148 / 80) * 2);  
    scale: 0.8;
    
}

.about-center {
    width: 80vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: clip;
    font-size: var(--fs-base);
    font-variant-numeric: normal;
}

.hori {
    position: relative;
    background-color: var(--black);
}

.track {
    width: fit-content;
    height: 100vh;
    padding-top: 10%;
    padding-bottom: var(--site--margin);
    display: flex;
    flex-direction: row;
   
}



.hori-content {
    display: grid;
    grid-template-columns: calc(100vw - (var(--svg-height) * 148 / 80) * 2) 1fr calc(var(--svg-height) * 148 / 80 - 10vw) 10vw;
    grid-template-rows: 56% 44%;
    width: 100vw;
    height: 100%;
}

.hori-content-2 {
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr calc(var(--svg-height) * 148 / 80 - 10vw) 10vw;
    grid-template-rows: 56% 44%;
    height: 100%;
    padding-left: 20vw;
    padding-right: 15vw;
}



.organizers-stage-container {
    width: 85%;
    max-width: 1050px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 20;
    perspective: 1200px;
}

.stage-header {
    text-align: center;
    margin-bottom: 2rem;
}

.stage-tag {
    font-family: 'Bodoni Moda', serif;
    font-size: 0.85rem;
    letter-spacing: 0.4em;
    color: #D4AF37;
    text-transform: uppercase;
    font-weight: 600;
    display: block;
    margin-bottom: 0.4rem;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}

.stage-title {
    font-family: 'Bodoni Moda', serif;
    font-size: 1.5rem;
    letter-spacing: 0.22em;
    color: #FFFFFF;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0;
}

.organizers-monolith-grid {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 2.5rem;
    position: relative;
}

.organizer-monolith {
    flex: 1;
    position: relative;
    padding: 3.2rem 2.2rem;
    background: linear-gradient(145deg, rgba(20, 20, 20, 0.75) 0%, rgba(5, 5, 5, 0.85) 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
    overflow: hidden;
}

.organizer-monolith:hover {
    border-color: rgba(212, 175, 55, 0.9);
    box-shadow: 0 45px 90px rgba(212, 175, 55, 0.3), inset 0 0 30px rgba(212, 175, 55, 0.15);
}

.monolith-glow {
    position: absolute;
    top: calc(var(--my, 50) * 1%);
    left: calc(var(--mx, 50) * 1%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.25) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.organizer-monolith:hover .monolith-glow {
    opacity: 1;
}

.monolith-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.monolith-badge {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}

.monolith-num {
    font-family: 'Bodoni Moda', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #D4AF37;
}

.monolith-cat {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.26em;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

.monolith-brand {
    font-family: 'Bodoni Moda', serif;
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.1em;
    color: #FFFFFF;
    margin: 0 0 1rem 0;
    text-transform: uppercase;
}

.gold-shimmer {
    background: linear-gradient(135deg, #FFF6D6 0%, #E6CA65 50%, #D4AF37 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.monolith-gold-bar {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #D4AF37 0%, transparent 100%);
    margin-bottom: 1.2rem;
}

.monolith-text {
    font-family: 'Bodoni Moda', serif;
    font-size: 0.95rem;
    color: rgba(230, 230, 230, 0.85);
    line-height: 1.6;
    margin: 0 0 1.8rem 0;
    font-style: italic;
}

.monolith-footer {
    width: 100%;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.monolith-link {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.25em;
    color: #D4AF37;
    font-weight: 600;
    text-transform: uppercase;
    transition: letter-spacing 0.3s ease, color 0.3s ease;
}

.organizer-monolith:hover .monolith-link {
    letter-spacing: 0.32em;
    color: #FFFFFF;
}

.stage-center-emblem {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
}

.emblem-ring {
    position: absolute;
    width: 46px;
    height: 46px;
    border: 1px dashed rgba(212, 175, 55, 0.5);
    border-radius: 50%;
    animation: spinRing 20s linear infinite;
}

@keyframes spinRing {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.emblem-text {
    font-family: 'Bodoni Moda', serif;
    font-size: 1.4rem;
    font-style: italic;
    color: #D4AF37;
    z-index: 2;
}

.hori-img-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 65%;
    max-height: 55vh;
    margin: auto;
}

.hori-item-text {
    width: 0;
    position: absolute;
    z-index: 10;
    font-size: var(--fs-sm);
    right: -1.6rem;
    white-space: nowrap;
}

.hori-content-2 .hori-img-wrap:nth-child(1) .hori-item-text {
    justify-self: flex-start;
    align-items: flex-end;
    left: 0;
    bottom: 0;
    transform: translateY(calc( 100% + 1.6rem));
}

/* "Carriera & Immagine" non ha un'ancora dedicata: di default il browser la
   centra verticalmente nel suo wrap, il che la fa accavallare al titolo
   "OLTRE LA BELLEZZA" centrato a tutto schermo sotto di lei. La ancoriamo
   sopra l'immagine invece che al centro. */
.hori-content .hori-img-wrap:nth-child(1) .hori-item-text {
    left: 0;
    top: 0;
    transform: translateY(calc(-100% - 1.6rem));
}

.hori-img {
    width: 100%;
    height: 100%;
    max-height: 55vh; /* mirrors .hori-img-wrap's own cap: breaks a height:100%
                          circular-auto-sizing loop that let parallax images
                          balloon to their own intrinsic aspect-ratio height */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hori-img img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* The "lens" parallax needs the image to be physically larger than its
   window (.hori-img, overflow:hidden) so it can pan as the GSAP scroll
   timeline shifts it. The generic max-width/max-height:100% above would
   otherwise clamp it back down and cancel the effect entirely.

   The pan is horizontal only, so the surplus belongs on the width. Height
   must track the window: a fixed 55vh here is taller than the short 2/1
   tiles (sponsor, community), and .hori-img centres the overflow, so those
   two always showed the middle band of a standing portrait -- a headless
   torso -- with object-position powerless to correct it. */
.hori-img img[parallax-x] {
    max-width: none !important;
    max-height: none !important;
    width: calc(100% + 7vw) !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center 15% !important;
    flex-shrink: 0 !important;
}

/* Per-photo framing in the gallery tiles: most of these are standing full-body
   portraits, and a plain centered crop cuts off both the head and the feet,
   leaving only a mid-body band. Bias each one toward where its subject is.

   Valori ricalcolati sulla posizione reale dei volti in ciascuna foto: la
   fascia inquadrata deve contenerli con un margine sopra la testa. Carriera e
   territorio non compaiono qui perche' il loro ritaglio e' orizzontale (foto
   panoramica in finestra verticale) e l'altezza si vede per intero. */
[data-modal="modal-sponsor"] .hori-img img[parallax-x] { object-position: 50% 13% !important; }
[data-modal="modal-territorio"] .hori-img img[parallax-x] { object-position: 50% 12% !important; }
[data-modal="modal-storia"] .hori-img img[parallax-x] { object-position: 50% 38% !important; }
[data-modal="modal-sicurezza"] .hori-img img[parallax-x] { object-position: 50% 0% !important; }
[data-modal="modal-community"] .hori-img img[parallax-x] { object-position: 50% 33% !important; }

/* Clickable "Le Anime del Concorso" tiles -> open partner-modal */
.hori-img-wrap[data-modal] {
    cursor: pointer;
}

/* Scale is animated as its own CSS property (not "transform") so it composes
   with GSAP's inline transform (the horizontal parallax pan) instead of
   clobbering it -- using "transform: scale()" here would reset the pan
   offset on every hover, making the image jump sideways. */
.hori-img-wrap[data-modal] .hori-img img {
    transition: scale 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}

.hori-img-wrap[data-modal]:hover .hori-img img {
    scale: 0.94 !important;
    filter: brightness(0.8);
}

.hori-reveal-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #fff;
    pointer-events: none;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.hori-reveal-hint::before {
    content: '';
    position: absolute;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
}

.hori-img-wrap[data-modal]:hover .hori-reveal-hint {
    opacity: 1;
}

/* Partner modals (Le Anime del Concorso)
   La foto qui dentro non e' un duplicato: e' la stessa immagine cliccata
   nella griglia, spostata nel modale da GSAP Flip (script_8.js), cosi'
   l'apertura continua visivamente il gesto invece di ripartire da un
   dissolvenza generica. Niente piu' angoli da targhetta da museo ne'
   ornamento a losanga: un solo filo dorato sotto l'occhiello, lo stesso
   motivo gia' usato sotto i nomi nella sezione carriera. */
.partner-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 4vw;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.partner-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 6, 6, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.partner-modal-panel {
    position: relative;
    display: flex;
    width: min(1020px, 94vw);
    height: min(680px, 88vh);
    background-color: #0a0a0a;
    overflow: hidden;
}

.partner-modal-drag {
    display: none;
}

/* Vuoto finche' script_8.js non vi sposta dentro l'img reale: le sue
   dimensioni devono essere gia' quelle definitive quando Flip.getState
   la misura, altrimenti il morph parte verso il bersaglio sbagliato. */
.partner-modal-media {
    flex: 0 0 56%;
    position: relative;
    overflow: hidden;
    background: #050505;
}

.partner-modal-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    filter: contrast(1.04);
}

/* Per-photo framing so faces/subjects stay in view when cropped to the modal's aspect ratio */
#modal-carriera .partner-modal-media img { object-position: 50% 20%; }
#modal-sponsor .partner-modal-media img { object-position: 50% 18%; }
#modal-storia .partner-modal-media img { object-position: 50% 22%; }
#modal-territorio .partner-modal-media img { object-position: 50% 45%; }
#modal-sicurezza .partner-modal-media img { object-position: 50% 8%; }
#modal-community .partner-modal-media img { object-position: 50% 28%; }

.partner-modal-body {
    flex: 0 0 44%;
    padding: 3.5rem 3rem 3rem 3rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    z-index: 2;
    /* Giunta strutturale netta al posto della sfumatura che dissolveva la
       foto nel nero: separa le due colonne senza un bordo dorato decorativo. */
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.partner-modal-eyebrow {
    font-family: 'Tenor Sans', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.24em;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    display: block;
}

.partner-modal-title {
    font-family: 'Bodoni Moda', serif;
    font-style: normal;
    font-size: clamp(1.6rem, 2.5vw, 2.4rem);
    font-weight: 600;
    color: #f5f5f5;
    line-height: 1.18;
    letter-spacing: -0.01em;
    margin: 0 0 1.25rem 0;
}

.partner-modal-text {
    font-family: 'Tenor Sans', system-ui, sans-serif;
    font-style: normal;
    font-size: 0.98rem;
    line-height: 1.7;
    color: #cccccc;
    margin: 0;
    max-width: 46ch;
}

/* Il tema applica il maiuscolo a tutto il body per default (stesso motivo
   gia' escluso in carriera, podio e giuria): senza questa, un paragrafo di
   sessanta parole si legge tutto in maiuscolo, dove il maiuscolo va bene per
   un'etichetta di tre parole ma rende un paragrafo un urlo continuo. */
.partner-modal-title,
.partner-modal-text {
    text-transform: none;
}

.partner-modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: none;
    padding: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 6;
    transition: color 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.partner-modal-close:hover {
    color: #ffffff;
    transform: rotate(90deg);
}

@media only screen and (max-width: 768px) {
    .partner-modal {
        padding: 0;
        align-items: flex-start;
    }
    /* Il foglio parte dall'alto (non piu' ancorato in basso: il testo
       finiva sotto la piega e la didascalia restava illeggibile). */
    .partner-modal-panel {
        width: 100%;
        height: auto;
        max-height: 94dvh;
        flex-direction: column;
        border-radius: 0 0 16px 16px;
    }
    .partner-modal-drag {
        display: block;
        position: absolute;
        top: 0.7rem;
        left: 50%;
        transform: translateX(-50%);
        width: 42px;
        height: 4px;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.25);
        z-index: 5;
    }
    .partner-modal-media {
        flex: 0 0 auto;
        height: 34dvh;
    }
    .partner-modal-body {
        flex: 0 1 auto;
        padding: 1.6rem 1.6rem 2.4rem;
        overflow-y: auto;
        justify-content: flex-start;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    .partner-modal-text {
        max-width: none;
    }
    .partner-modal-close {
        top: 0.9rem;
        right: 0.9rem;
        color: rgba(255, 255, 255, 0.8);
    }
}



.hori-title {
    width: 100vw;
    height: 100vh;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none; /* decorative title only; must not block clicks on the
                              gallery tiles it visually overlaps underneath it */
}

/* mix-blend-mode: difference used to sit here, but against the real (and
   tonally varied) gallery photos it partially cancels out the white glyphs
   wherever a photo is itself pale, making the title look broken/incomplete.
   A plain white title with a dark drop-shadow stays fully legible over any
   photo underneath it. */
.hori-title h1 {
    font-size: 8rem;
    font-family: "PP Eiko";
    font-weight: 300;
    color: var(--white);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55), 0 0 60px rgba(0, 0, 0, 0.35);
}

.hori-content .hori-img-wrap:nth-child(2) {
    grid-column-start: 3;
    grid-column-end: 5;
    aspect-ratio: 2 / 1;
}

.hori-content .hori-img-wrap:nth-child(3) {
    grid-column-start: 2;
    grid-column-end: 4;
    height: 100%;
}



.hori-content-2 .hori-img-wrap:nth-child(1) {
    grid-column-start: 1;
    aspect-ratio: 3 / 4;
    height: 100%;
}

.hori-content-2 .hori-img-wrap:nth-child(2) {
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 2;
    aspect-ratio: 3 / 2;
    height: 100%;
 
    
}

.hori-content-2 .hori-img-wrap:nth-child(3) {
    grid-column-start: 4;
    grid-column-end: 6;
    aspect-ratio: 2 / 1;

}

[parallax-x] {
    position: relative;
    width: calc(100% + 20vw);
}

/* ===== ALBO D'ORO — nuovo approccio: un ritratto alla volta ===== */

.experience {
    --gold: #D4AF37;
    --gold-lt: #F5E096;

    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 5vh, 5rem);

    height: auto;
    padding: clamp(8rem, 14vh, 16rem) clamp(2rem, 6vw, 9rem) clamp(10rem, 18vh, 20rem);
    position: relative;
    background-color: #080808;
    background-image: url("./images/albo_bg_desktop.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--white);
}

/* velo scuro: le foto e i nomi devono staccare dallo sfondo dorato */
.experience::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(6, 6, 6, 0.92) 0%, rgba(6, 6, 6, 0.78) 45%, rgba(6, 6, 6, 0.55) 100%);
    pointer-events: none;
}

.experience > * { position: relative; z-index: 1; }

/* Elenco e foto stanno in un contenitore comune: e' quello che da' alla
   foto sticky l'altezza in cui viaggiare. Con la foto in una riga di griglia
   tutta sua l'area era alta quanto la foto stessa e lo sticky non agganciava
   mai -- la foto scorreva via con la pagina. */
.albo-body {
    display: grid;
    /* La larghezza della colonna foto dipende anche dall'altezza del
       viewport: con aspect-ratio 3/4 e' l'unico modo perche' la foto stia
       sempre dentro lo schermo senza rompere le proporzioni. */
    grid-template-columns: 1fr clamp(280px, min(30vw, 44vh), 420px);
    column-gap: clamp(3rem, 6vw, 9rem);
    align-items: start;
    position: relative;
    z-index: 1;
}

.expr-list { grid-column: 1; }

.albo-stage-col {
    grid-column: 2;
    align-self: stretch;
    height: 100%;
}

.experience-title {
    position: static;
    font-family: "PP Eiko";
    font-size: clamp(4.4rem, 7vw, 8rem);
    line-height: 1;
    margin: 0 0 1.2rem;
}

.expr-info {
    font-size: var(--fs-sm);
    margin: 0;
    letter-spacing: 0.16em;
    color: rgba(240, 240, 240, 0.55);
}

/* ---------- elenco ---------- */
.expr-list {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.list-item {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 1.6rem;
    padding: clamp(1.3rem, 2.1vh, 2rem) 0 clamp(1.3rem, 2.1vh, 2rem) 2.2rem;
    line-height: 1;
    opacity: 0.34;
    position: relative;
    cursor: pointer;
    transition: opacity 0.45s ease, padding-left 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* filo d'oro che cresce da sinistra sulla riga attiva */
.list-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1.4rem;
    height: 1px;
    transform: translateY(-50%) scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, var(--gold-lt), rgba(212, 175, 55, 0));
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.list-item.is-active {
    opacity: 1;
    padding-left: 3.6rem;
}

.list-item.is-active::before { transform: translateY(-50%) scaleX(1); }

.list-item p[data="date"] {
    font-size: var(--fs-lg);
    margin-right: clamp(2rem, 4vw, 6rem);
    min-width: 6ch;
    transition: color 0.45s ease;
}

.list-item.is-active p[data="date"] { color: var(--gold-lt); }

.list-item p[data="collect"] {
    font-size: var(--fs-base);
    font-family: "PP Eiko";
    font-style: italic;
}

.list-item p[data="name"] { font-size: var(--fs-base); }

.list-right {
    display: flex;
    flex-direction: row;
    gap: 1.6rem;
}

/* ---------- palcoscenico: una foto alla volta ---------- */
.list-gallery {
    position: sticky;
    top: clamp(6rem, 14vh, 14rem);
    width: 100%;
    aspect-ratio: 3 / 4;
    display: block;
    overflow: hidden;
    border-radius: 2px;
    background: #0c0c0c;
    box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.95);
    pointer-events: none;
    z-index: 1;
}

/* filo d'oro perimetrale */
.list-gallery::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: inherit;
}

.form-container {
    height: 400vh;
}



.list-gallery-item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    overflow: hidden;
    will-change: opacity, transform;
}

/* L'ultima casella dell'albo e' un video, non una fotografia: le vincitrici
   storiche sono immagini d'archivio, quella in carica e' l'unica ancora in
   movimento. Stesse misure, cosi' la dissolvenza fra le caselle non cambia. */
.list-gallery-item img,
.list-gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    display: block;
}

.list-gallery-item video {
    object-position: center center;
}

/* Alcune foto storiche sono scatti di gruppo: la vincitrice non e' sempre
   al centro dell'inquadratura, quindi ognuna ha la sua messa a fuoco. */
.list-gallery-item[list-index="06"] img { object-position: 30% 20%; }
.list-gallery-item[list-index="12"] img { object-position: 70% 25%; }
.list-gallery-item[list-index="05"] img { object-position: 55% 40%; }

.form-sect {
    position: sticky;
    top: calc( -22.4rem - 10vh);
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    z-index: 4;
}

.form-keyword {
    position: absolute;
    font-family: "Sahitya", serif;
    /* Il minimo non scende sotto 2.4rem per restare leggibile, ma non sale
       oltre: a 2.8rem su uno schermo da 360px "Candidati" arrivava a 170px,
       cioe' addosso ai denti della cerniera che stanno al centro. */
    font-size: clamp(2.4rem, 6vw, 8.6rem);
    line-height: 1;
    white-space: nowrap;
    /* Le parole devono stare sul layer sopra la cerniera (card + canvas
       .zip-seq, z-index 6), non spostate per evitarla in verticale: fanno
       parte del collage e si sovrappongono di proposito all'immagine. */
    z-index: 20;
}

/* La sezione .form-sect e' sticky con top:0, quindi il suo bordo superiore
   coincide col bordo della finestra e un valore in vh corrisponde alla
   posizione vera sullo schermo. Una percentuale si calcolerebbe sui 1285px
   di altezza della sezione, di cui solo i primi 932px sono visibili, e
   finirebbe troppo in basso. */
.form-keyword:nth-child(1) {
    top: 42vh;
    transform: translateY(-50%);
    left: 8%;
}

.form-keyword:nth-child(2) {
    top: 42vh;
    transform: translateY(-50%);
    right: 8%;
}

@media (max-width: 768px) {
    .form-keyword:nth-child(1) {
        top: 42vh;
        transform: translateY(-50%);
        left: 5%;
    }
    .form-keyword:nth-child(2) {
        top: 42vh;
        transform: translateY(-50%);
        right: 5%;
    }
}



.rip-area {
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;
    padding-top: 100px;
    margin-bottom: 20rem;
}

.rip-hint {
    font-size: var(--fs-base);
    color: var(--black);
    padding: 4px;
    background-color: #D9D9D9;
    border: 1px solid #000000;
    position: absolute;
    top: 0px;
    white-space: nowrap;
    transform-origin: 50% 100%;
    translate: none;
    rotate: none;
    scale: none;
    transform: translate(0%, calc((var(--value, 0) / 100) * 150%))
    scale(1, calc(1 - ((var(--value, 0) / 100) * 1)));
}

.form-content-inner {
    width: 50rem;
    color: #000;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;

}

.form-input {
    display: flex;
    flex-direction: column;
    height: 70px;
}

.form-input label {
    font-size: var(--fs-base);
    margin-left: 2rem;
    transition: color 0.3s ease-out;
}

.form-input input {
    padding: 12px;
    pointer-events: auto;
    background: none;
    outline: none;
    caret-color: var(--black);
    border-bottom: 1px solid var(--black);
    font-size: var(--fs-base);
    color: #6c6c6c;

}

.form-input--message {
    height: auto;
}

.form-input--message textarea {
    padding: 12px;
    pointer-events: auto;
    background: none;
    outline: none;
    resize: none;
    caret-color: var(--black);
    border-bottom: 1px solid var(--black);
    font-size: var(--fs-base);
    font-family: inherit;
    color: #6c6c6c;
}

.form-content a {
    font-size: var(--fs-base);
    color: var(--black);
    transition: all 0.3s ease-out;
}

.submitted {
    color: #871712 !important;
}

/* This one's for resetting the input styles and getting them out the way */
@layer reset {
            .sr-only {
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
                border-width: 0;
            }

            [type='range']:hover {
                cursor: -webkit-grab;
            }
            [type='range']:active {
                cursor: -webkit-grabbing;
            }
            [type='range']:focus-visible {
                outline-offset: 0.25rem;
                outline-color: transparent;
            }

            [type='range'] {
                width: 200%;
                opacity: 1;
                height: 100%;
                overflow: hidden;
                touch-action: none;
                border: 0;
                padding: 0;
                margin: 0;
                opacity: 0;
                position: absolute;
                left: 0;
                z-index: 10;
                writing-mode: bt-lr;
                -webkit-appearance: slider-vertical;
            }

            [type='range']::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                height: 100%;
                width: 100cqh;
                background: hsl(210 80% 25% / 0.75);
                margin-top: 0;
            }

            [type='range']::-moz-range-thumb {
                height: 100cqh;
                background: hsl(210 80% 25% / 0.5);
                width: 100cqh;
                margin-top: 30px;
            }
            [type='range']::-webkit-slider-runnable-track {
                -webkit-appearance: none;
                appearance: none;
                height: 100cqh;
                background: hsl(210 80% 50% / 0.2);
            }
            [type='range']::-moz-range-track {
                height: 100cqh;
                background: hsl(210 80% 50% / 0.2);
            }
        }

        @layer tear-strip {
    

            .tear-strip {
                --tab-darkness: calc(20 + (60 * (var(--value, 0) / 100)));
                --shadow-multiplier: calc(var(--value, 0) / 100);
                --bg-size: calc(var(--value, 0) * 1%);
                --shadow-reveal: calc(var(--value, 0) / 100);
                --shadow-spread: calc(var(--value, 0) / 100);
                --tab-darkness: 80;
                --bg: url("./assets/form_bg.webp");
                --bg-alpha: #670b0b6f;
                font-size: 1.3rem;
                width: 80px;
                height: var(--rip-height);
                display: grid;
                place-items: center;
                position: relative;
                border: 4px solid hsl(0 0% 85%);
                border-radius: 100px;
                container-type: size;
                pointer-events: none;
                
                
            }

            .tear-bottom {
                position: absolute;
                width: var(--form-width);
                height: var(--rip-height);
                background-image: url("./assets/form_bg.webp");
                background-size: 400% 400%;
                background-repeat: no-repeat;
                background-position: center center;
                -webkit-mask-image: url("./assets/exclude-l.svg"), url("./assets/exclude-r.svg");
                -webkit-mask-repeat: repeat-y;
                -webkit-mask-position: left 20px, right 20px;
                -webkit-mask-size: 14px 40px; 
                -webkit-mask-composite: exclude;
                pointer-events: none;
                
            }

            .content-wrap {
                position: absolute;
                display: flex;
                flex-direction: column;
                align-items: center;
                width: calc(100vw - 84px);
            }


            .inner {
                position: relative;
                width: var(--form-width);
                height: var(--rip-height);
                overflow: clip;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

            }

            .form-content {
                position: absolute;
                width: calc(100vw - 84px);
                height: var(--rip-height);
                background-color: #DADADA;
                box-shadow: inset 0px 0px 6px 4px #00000035;
                display: flex;
                flex-direction: column;
                align-items: center;
                /* Passano da variabili perche' con !important la cascata si
                   inverte: una dichiarazione importante dentro un @layer batte
                   quella non stratificata, il contrario di quanto vale per le
                   dichiarazioni normali. Il blocco della cerniera sta fuori dai
                   layer e non potrebbe sovrascriverle: gli si lascia cambiare
                   la variabile invece della proprieta'. */
                padding: var(--form-pad, 50px) !important;
                gap: var(--form-gap, 5rem) !important;
                
            }

            .form-logo {
                
                width: 42em;
                height: auto;
            }

            .tear-strip:is(:hover, :focus-visible) {
                --intent: 1;
            }
            .tear-strip:active {
                --active: 1;
            }

            .tear-strip__content {
                position: absolute;
                font-size: 0.9rem;
                text-align: center;
                writing-mode: vertical-lr;
                text-orientation: mixed;
                transform: rotate(180deg);
                

            }

            .tear-strip__strip {
                position: absolute;
                inset: 0;
                background-image: url("./assets/outline.png"), url("./assets/form_bg.webp");
                background-size: 80px 39px, 400% 400%;
                background-repeat: repeat, no-repeat;
                background-position: center 20px, center center;
                display: flex;
                border-radius: 100px;
                align-items: center;
                justify-content: center;
                clip-path: inset(1px -100% 0 -100%);
                color: hsl(0, 0%, 71%);
                font-weight: 500;
                clip-path: inset(calc(var(--value, 0) * 1%) 0 -100% 0);
                border: 4px solid #000000;
            }

            .tear-strip__shadow {
                position: absolute;
                width: 100%;
                height: 20px;
                transform-origin: 50% 100%;
                top: 0;
                opacity: calc(1 - (((var(--value, 0) - 90) / 10) * 1));
                translate: 0 -75%;
                transform: translateY(calc(((var(--value, 0) / 100) * (100cqh - 20%))));
                
            }

            .tear-strip__shadow::after {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg, transparent, hsla(0, 93%, 11%, 0.5));
                filter: blur(8px);
                opacity: calc((1 * (clamp(0, var(--value, 0), 20) / 10)));
                
            }

            .tear-strip__back {
                position: absolute;
                height: 100%;
                width: 100%;
                border-radius: 100px;
                bottom: 100%;
                translate: none;
                rotate: none;
                scale: none;
                transform-origin: 50% 0%;
                transform: translate(0px, calc(var(--value, 0) * 2%));
                
            }

            .tear-strip__backing {
                background: linear-gradient(
                    180deg,
                    hsl(0 0% calc(var(--tab-darkness, 40) * 1%) / var(--bg-alpha, 1)),
                    hsl(0 0% 100% / var(--bg-alpha, 1)),
                    hsl(0 0% 80% / var(--bg-alpha, 1))
                );
                background-position: 50% 100%;
                background-repeat: no-repeat;
                background-color: hsl(0, 81%, 20%);
                background-size: 100% var(--bg-size);
                position: absolute;
                inset: 0;
                -webkit-mask-image: url("./assets/strip.svg");
                -webkit-mask-repeat: repeat;
                -webkit-mask-size: 80px 40px; 
                -webkit-mask-position: center 20px;
                filter: drop-shadow( 2px 0px 4px rgba(0,0,0,0.5));
            }

            .tear-strip__backing::before {
                content: '';
                position: absolute;
                inset: 0 0 -8px 0;
                filter: blur(4px);
                background: radial-gradient(120% 200%, hsla(0, 83%, 36%, 0.467), transparent 90%);
                border-radius: 1000px;
                z-index: -1;
                opacity: var(--shadow-reveal, 0);
            }

            .tear-strip__back-shadow {
                position: absolute;
                border-radius: 1000px;
                bottom: 0%;
                left: 50%;
                width: 100%;
                translate: -50% 0%;
                height: calc(var(--value, 0) * 0.8%);
                z-index: 1;
                min-height: 500px;
                color: hsl(0, 100%, 15%);
                mix-blend-mode: multiply;
                box-shadow: 0 0 hsl(0 80% calc((1 - ((var(--value, 0) / 100) * 40)) * 1%)) calc(var(--shadow-spread, 0) * 100cqw);
            }


            .strip-text {
                position: absolute;
                bottom: 20%;
                writing-mode: vertical-lr;
                text-orientation: mixed;
                font-size: 1rem;
            }

            .tear-strip__handle {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                aspect-ratio: 1;
                background: hsl(210 80% 50% / 0.1);
                opacity: calc((var(--intent, 0) * 1) - var(--active, 0));
                border-radius: 50%;
                transform-origin: 50% 100%;
                translate: 0 calc((var(--value, 0) / 100) * (200cqh + -100%));
            }
        }

        @layer scrolls {
            @supports (animation-timeline: scroll()) {
                :root {
                    timeline-scope: --thumb;
                }

                @property --value {
                    initial-value: 0;
                    syntax: "<integer>";
                    inherits: true;
                }

                @keyframes sync {
                    to {
                        --value: 100;
                    }
                }

                .tear-strip {
                    animation: sync both linear reverse;
                    animation-timeline: --thumb;
                    animation-range: contain;
                }

                [type="range"]::-webkit-slider-thumb {
                    view-timeline-name: --thumb;
                    view-timeline-axis: block;
                }
            }
        }


/* ==========================================================================
   SEZIONE CANDIDATURA — LA CERNIERA SUL VELLUTO
   --------------------------------------------------------------------------
   Il meccanismo di scroll non cambia: --value va da 0 a 100 mentre la sezione
   scorre. Cambia da dove viene l'immagine. Prima era un rosso piatto con delle
   tacche nere (la linguetta "strappa qui" di una confezione), poi una cerniera
   disegnata a mano con gradienti e SVG: a una macro non ci si arriva
   disegnando. Ora e' una vera ripresa macro di una cerniera su velluto che si
   apre, ritagliata sul verde e ridotta a 121 frame con canale alpha, che uno
   script disegna su un canvas seguendo lo scroll (tools/build_zip_sequence.py).

   Il modulo sta DIETRO la tela e si vede attraverso l'apertura che si allarga.
   Non serve piu' ne' il clip-path sulla striscia ne' l'allargamento di
   --form-width: il tessuto che si scosta e' filmato.

   Queste regole stanno FUORI da @layer di proposito: post-10.min.css
   riassegnava le stesse proprieta' senza layer, e qualunque regola non
   stratificata batte una regola dentro un layer, a prescindere dall'ordine.
   ========================================================================== */

/* Fondo della sezione: quello che si vede oltre i bordi della ripresa. Scuro e
   neutro, perche' qualunque rosso diverso da quello filmato stonerebbe. */
.form-sect {
    background-image: none;
    background-color: #080808;
    /* Prima era "calc(-22.4rem - 10vh)" (12vh su mobile): un offset negativo
       che scorreva la finestra "incollata" ~300px piu' in basso dell'inizio
       della sezione. Con .content-wrap piccolo (vecchio modulo di carta)
       andava bene, tagliava solo margine morto. Ora che .content-wrap e' a
       tutto schermo (top:0, 100vh) quell'offset tagliava la fetta superiore
       del canvas e scopriva il fondo #1A0507 sotto, invece dell'immagine:
       esattamente il "si blocca a meta' schermo" segnalato. La sezione deve
       restare incollata esattamente al bordo del viewport. */
    top: 0;
}

/* Il riquadro della ripresa deve riempire tutto lo schermo: prima seguiva
   .inner/--rip-height, una misura fissa (78-92rem) pensata per il modulo di
   carta strappata di prima, molto piu' bassa e stretta di 84px del viewport.
   Lasciava margini vuoti del fondo #1A0507 sopra, sotto e ai lati
   dell'immagine invece di un'esperienza a schermo intero.
   Serve anche ancorarlo a top:0/left:0: senza, restava nel normale flusso
   della flex e il titolo+parole sopra lo spingevano in basso, tagliandone
   una fetta identica sotto il bordo dello schermo (.form-sect e' sticky e non
   scrolla al suo interno, quindi quella fetta restava tagliata per sempre).
   Ora ci sta sotto, a tutto schermo fin dall'inizio della sezione, col titolo
   e le 7 parole sovrapposti sopra (z-index maggiore di .zip-seq). */
.content-wrap {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

/* La ripresa. Copre esattamente il riquadro del modulo; il ritaglio "cover" e
   la posizione della card li calcola lo script, che conosce le proporzioni dei
   frame e il riquadro utile dell'apertura letti dal manifest. */
.zip-seq {
    /* dentro .content-wrap, che e' gia' posizionato ed e' esattamente il
       riquadro del modulo. Su .rip-area non si poteva: non ha position, e
       l'ancoraggio sarebbe finito su .form-sect, cioe' piu' in alto del testo
       introduttivo. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* indispensabile: la tela copre gli input, i click devono passare oltre */
    pointer-events: none;
    z-index: 6;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.zip-seq-ready .zip-seq {
    opacity: 1;
}

/* Incondizionato, non solo a frame pronti: nel layer .inner e' largo
   --form-width (80px) con overflow clip, cioe' la fessura che serviva alla
   vecchia animazione. Se i frame non arrivassero, l'invito resterebbe
   ritagliato a una striscia. Meglio che il ripiego sia l'invito intero. */
.rip-area .inner {
    width: 100%;
    /* Deve avere le stesse dimensioni del canvas a tutto schermo
       (.content-wrap), non l'altezza fissa --rip-height: e' il riquadro su cui
       l'invito si centra, e deve coincidere con l'apertura vera. */
    height: 100%;
    overflow: visible;
}


/* ==========================================================================
   L'INVITO — la carta che sta sotto il velluto
   --------------------------------------------------------------------------
   Non e' piu' una card bianca che galleggia dentro l'apertura: e' un foglio a
   tutto schermo che sta SOTTO la cerniera (z-index 5 contro il 6 del canvas) e
   che si scopre man mano che il velluto si apre. Quello che si vede non e' un
   modulo appoggiato sopra la scena, e' cio' che c'era dentro.

   Tutta la comparsa e' pilotata da --value, la stessa variabile 0-100 che lo
   ScrollTrigger della cerniera scrive su <html> a ogni aggiornamento. Nessun
   tween in piu': se il progresso e' lo stesso numero, l'invito non puo'
   andare fuori sincrono con l'apertura. Ogni riga ha la sua finestra (--a
   dove parte, --b quanto dura), cosi' i pezzi arrivano scaglionati mentre la
   cerniera scende invece che tutti insieme.
   ========================================================================== */
.invito {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Carta avorio, non bianca: il bianco puro accanto a un velluto bordeaux
       filmato dal vero stona sempre, sembra una finestra di dialogo. La
       radiale tiene il centro piu' chiaro dei bordi, come un foglio illuminato
       da davanti. */
    background:
        radial-gradient(118% 88% at 50% 34%,
            #FDF8EE 0%, #F5EBD9 44%, #E7D9C0 78%, #DCCBAE 100%);
}

/* Grana della carta: rumore frattale generato dall'SVG, nessun file da
   scaricare. Senza, il fondo resta una sfumatura piatta e si legge come
   "gradiente", che e' esattamente il difetto da evitare. */
.invito-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.07;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

.invito-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(1.4rem, 2.1vh, 3rem);
    /* --zip-card-w/h sono il riquadro utile dell'apertura, misurato sui frame
       e scritto in pixel dallo script: e' una misura prudente, presa dove il
       velluto e' ancora largo. A fine corsa il velluto non c'e' quasi piu'
       (sul verticale resta solo una punta in basso), quindi ci si puo'
       allargare oltre quel rettangolo -- ma non oltre lo schermo. Il fattore
       1.28 e' cio' che, sul verticale, evita una colonna di testo da sette
       caratteri per riga. */
    width: min(calc(var(--zip-card-w, 90vw) * 1.28), 92vw, 76rem);
    max-height: min(calc(var(--zip-card-h, 86vh) * 1.06), 86vh);
    padding: clamp(3rem, 4.2vw, 6rem) clamp(2.4rem, 3.6vw, 5.2rem);
}

/* Il doppio filetto dell'invito: oro sottile, respiro d'avorio, oro piu'
   tenue. Sta su uno pseudo-elemento e non sul bordo della card perche' deve
   comparire con la sua tempistica, dopo il velluto e prima del testo. */
.invito-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 1px solid rgba(138, 109, 28, 0.42);
    box-shadow:
        inset 0 0 0 5px rgba(253, 248, 238, 0.55),
        inset 0 0 0 6px rgba(138, 109, 28, 0.20);
    opacity: clamp(0, calc((var(--value, 0) - 50) / 24), 1);
}

/* La comparsa scaglionata. --p e' la frazione di apertura di QUESTA riga. */
.invito-card > * {
    --p: clamp(0, calc((var(--value, 0) - var(--a, 50)) / var(--b, 24)), 1);
    opacity: var(--p);
    transform: translateY(calc((1 - var(--p)) * var(--dy, 1.8rem)));
    margin: 0;
}

.invito-crest {
    --a: 46; --b: 22; --dy: 1.2rem;
    width: min(16%, 9.6rem);
    height: auto;
    flex: 0 0 auto;
}

.invito-eyebrow {
    --a: 52; --b: 22;
    font-family: "Tenor Sans", serif;
    font-size: clamp(1.1rem, 0.9vw, 1.4rem);
    letter-spacing: 0.34em;
    /* compensa lo spazio che il tracking lascia dopo l'ultima lettera:
       senza, la riga risulta spostata a sinistra rispetto all'asse */
    text-indent: 0.34em;
    text-transform: uppercase;
    color: #8A6D1C;
}


.invito-quote {
    --a: 56; --b: 24; --dy: 2.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.2rem, 1.8vh, 2.4rem);
}

/* I due filetti che stringono la citazione. Sfumati agli estremi: una riga
   netta di 1px taglierebbe la carta invece di posarcisi sopra. */
.invito-quote::before,
.invito-quote::after {
    content: "";
    width: clamp(4.8rem, 7vw, 9rem);
    height: 1px;
    background: linear-gradient(90deg,
        transparent, rgba(138, 109, 28, 0.62), transparent);
}

.invito-quote blockquote {
    margin: 0;
}

.invito-quote p {
    margin: 0;
    font-family: "PP Eiko", serif;
    font-weight: 400;
    font-size: clamp(2.5rem, 5.2vw, 5.2rem);
    line-height: 1.2;
    letter-spacing: -0.004em;
    /* Unica eccezione al maiuscolo di tutto il sito (global.css lo impone su
       body). Qui e' motivata: quarantacinque caratteri di maiuscolo su cinque
       righe si leggono come un cartello, non come una frase, e questo e'
       l'unico punto in cui il sito smette di essere uno schermo e diventa un
       foglio. Il maiuscolo resta su tutto il contorno -- occhiello, firma,
       bottone -- che e' l'impaginazione di un invito vero: caratteri piccoli
       spaziati intorno a una frase composta normalmente. */
    text-transform: none;
    /* nero caldo, mai #000: su carta avorio il nero pieno legge come stampa
       laser, non come stampa tipografica */
    color: #24140F;
    text-wrap: balance;
}

.invito-quote figcaption {
    font-family: "Tenor Sans", serif;
    font-size: clamp(1.1rem, 0.92vw, 1.4rem);
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    text-transform: uppercase;
    color: #8A6D1C;
}

.invito-cta {
    --a: 68; --b: 20;
    /* La spinta dell'hover entra nella STESSA trasformazione della comparsa:
       due transform sullo stesso elemento si sovrascrivono, e l'hover
       cancellerebbe l'ingresso a meta' animazione. */
    transform: translateY(calc((1 - var(--p)) * var(--dy, 1.8rem) - var(--lift, 0rem)));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: min(30rem, 78%);
    padding: 1.5rem 3.4rem;
    font-family: "Tenor Sans", serif;
    font-size: clamp(1.3rem, 1vw, 1.6rem);
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    text-transform: uppercase;
    color: #F8F2E6;
    background-color: #7A0F16;
    border: 1px solid #5C0A0F;
    text-decoration: none;
    /* la tela della cerniera sopra e' pointer-events:none, ma .form-intro e le
       parole hanno z-index 20: senza questa riga il click cadrebbe su di loro */
    pointer-events: auto;
    transition:
        background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.invito-cta:is(:hover, :focus-visible) {
    --lift: 0.2rem;
    background-color: #8E1410;
    box-shadow: 0 1.4rem 2.8rem rgba(92, 10, 15, 0.26);
}

.invito-cta:active {
    --lift: 0rem;
}

.invito-note {
    --a: 74; --b: 18;
    font-family: "Bodoni Moda", serif;
    font-style: italic;
    /* un corsivo Bodoni tutto in maiuscolo non esiste in tipografia: e' una
       didascalia, e va composta come tale */
    text-transform: none;
    font-size: clamp(1.4rem, 1.15vw, 1.7rem);
    color: rgba(36, 20, 15, 0.6);
}

/* Il titolo e le sette parole vivono sul velluto: quando il velluto non c'e'
   piu' non hanno un supporto, e sopra l'invito diventerebbero soltanto due
   messaggi in concorrenza. Si dissolvono sulla stessa curva con cui la carta
   emerge, cosi' la consegna e' un passaggio di mano e non una sovrapposizione.
   pointer-events: entrambi coprono meta' schermo a z-index 20 e
   intercetterebbero il click sul bottone. */
.form-keyword {
    /* Piene fino al 52% dell'apertura, sparite al 70%. La finestra e' presa
       apposta PRIMA che la carta domini lo schermo: sono testi bianchi, e su
       avorio diventano un fantasma grigio sopra l'invito invece di sparire.
       Tanto vale che se ne vadano mentre sotto c'e' ancora velluto, dove il
       bianco si legge e la dissolvenza si capisce. */
    opacity: clamp(0, calc((70 - var(--value, 0)) / 18), 1);
    pointer-events: none;
}

/* Sul verticale la finestra va anticipata: la ripresa mobile scopre la fascia
   alta dello schermo -- dove stanno titolo e prime parole -- molto prima
   dell'orizzontale (luminanza dietro il menu gia' a 163 al 50% di corsa,
   contro il velluto pieno dell'orizzontale allo stesso punto). Con la
   finestra del desktop il titolo bianco restava mezzo acceso sulla carta. */
@media only screen and (max-width: 768px) {
    .form-keyword {
        opacity: clamp(0, calc((46 - var(--value, 0)) / 18), 1);
    }
}

/* Il menu, bianco su tutto il resto del sito, sulla carta dell'invito. La
   classe la mette e la toglie lo ScrollTrigger della cerniera. Il colore e'
   lo stesso bruno caldo della citazione, non nero: sulla carta avorio il nero
   pieno stacca troppo. */
.invito-aperto .header-wrap,
.invito-aperto .header-wrap p {
    color: #3A2118;
}

.invito-aperto .header-wrap {
    transition: color 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
    .invito-card > *,
    .invito-card::before {
        opacity: 1;
        transform: none;
    }
}

/* Con la ripresa attiva la vecchia cerniera disegnata non serve: resta nel
   markup solo come ripiego finche' i frame non sono pronti (o se non
   arrivano affatto). */
/* La vecchia cerniera disegnata non serve piu' in nessuno stato: i suoi
   sfondi puntavano a file (form_bg.webp, outline.png, exclude-l/r.svg) che non
   esistono in locale, quindi come ripiego mostrava solo un rettangolo bordato.
   Meglio niente: finche' i frame non sono pronti si vede il modulo e basta.
   visibility e non display, perche' .tear-strip e' l'unico figlio in flusso di
   .rip-area con un'altezza: togliendolo dal flusso la sezione collasserebbe e
   lo ScrollTrigger perderebbe i suoi riferimenti. */
.tear-strip {
    visibility: hidden;
}

.tear-bottom {
    display: none;
}

/* Un elemento con visibility hidden viene comunque renderizzato, quindi il
   browser scarica lo stesso i suoi sfondi: senza questa riga restavano cinque
   richieste a file che non esistono piu' (form_bg.webp, outline.png, strip.svg
   e le due maschere exclude), tutte 404. */
.tear-strip,
.tear-strip *,
.tear-bottom {
    background-image: none;
    -webkit-mask-image: none;
    mask-image: none;
}

/* Senza il vecchio allargamento --form-width resterebbe indefinita, la
   dichiarazione di .inner diventerebbe invalida e la larghezza cadrebbe su
   auto: dentro un flex in colonna il pannello si stringerebbe sul contenuto. */
.rip-area {
    --form-width: 100%;
}


/* ==========================================================================
   IL PODIO — le quattro fasce
   --------------------------------------------------------------------------
   Fuori da @layer di proposito, per la stessa ragione documentata alla riga
   2151 per la cerniera: post-10.min.css emette regole Bricks non stratificate,
   e una regola non stratificata batte sempre una stratificata a prescindere
   dall'ordine e dalla specificita'.

   I token stanno sul selettore universale in global.css, non su :root, quindi
   --gold va ridichiarato qui sulla sezione, esattamente come fa .experience.
   Ricorda che html ha font-size 10px: 1rem = 10px.
   ========================================================================== */

.podio {
    --gold: #D4AF37;
    --gold-lt: #F5E096;
    --gold-dp: #8a6d1c;

    position: relative;
    /* a meta' strada fra il #080808 dell'Albo d'Oro sopra e il #1A0507 del
       form sotto: la sezione si incastra fra le due senza uno stacco netto */
    /* Rosso profondo, non piu' nero: i busti sono neri e su nero sparirebbero.
       Prepara anche il velluto della sezione della cerniera, subito sotto. */
    background-color: #140305;
    color: var(--txt-white);
}

.podio-stage {
    position: relative;
    height: 100vh;
    /* svh evita che la barra indirizzi del telefono faccia sobbalzare la scena
       mentre la sezione e' bloccata dal pin */
    height: 100svh;
    overflow: clip;
}

.podio-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.podio-ready .podio-canvas {
    opacity: 1;
}

/* Vignettatura: costa zero e sostituisce una catena di post-processing per la
   profondita' di campo, che raddoppierebbe il peso del modulo three.js. */
.podio-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    /* La vignettatura vira al rosso scurissimo invece che al nero puro: con
       il fondo rosso un nero saturo taglierebbe un anello visibile ai bordi. */
    background: radial-gradient(120% 80% at 50% 42%,
                transparent 34%, rgba(14, 2, 4, 0.82) 100%);
}

/* --- testo sopra la scena ---
   Il canvas dietro mostra un palco: fascia alta scura con i fari, figure
   illuminate al centro, pavimento lucido in basso. Il testo sta solo in alto
   e in basso, il centro resta alle figure. Riscritto quando il podio e'
   passato dalla scena 3D alla sequenza di fotogrammi: le vecchie regole
   posizionavano le fasce su ancore calcolate da three.js, che non ci sono
   piu'. */

/* Il podio-stage è il contenitore principale: deve essere un flex column per distribuire i blocchi in alto e in basso, lasciando il centro libero per le figure. */
.podio-stage {
  position: relative;
  height: 100svh;
  overflow: clip;
  display: flex;
  flex-direction: column;
}

/* Il canvas è già posizionato assoluto, quindi gli altri elementi devono stare sopra con z-index. */
.podio-canvas {
  z-index: 0;
}

/* Blocco di testata: ancorato in alto, con una velatura sfumata per leggibilità senza tagli netti. */
.podio-copy {
  position: relative;
  z-index: 1;
  order: 0;
  text-align: center;
  padding: 1rem 1.5rem 2rem;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 40%, rgba(0,0,0,0.4) 75%, transparent 100%);
}

/* Titolo display: PP Eiko peso 100, dimensioni contenute per non dominare la scena. */
.podio-title {
  font-family: "PP Eiko", serif;
  font-weight: 100;
  font-size: clamp(3.2rem, 8vw, 5.6rem);
  line-height: 1.1;
  margin: 0.2em 0 0.1em;
  color: #f4f2ee;
  text-shadow: 0 4px 16px rgba(0,0,0,0.8);
}

/* Sottotitolo: Bodoni Moda corsivo, attenuato, larghezza contenuta. */
.podio-lede {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.4;
  color: rgba(244,242,238,0.8);
  max-width: 40ch;
  margin: 0 auto;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

/* --- le tre fasce ---
   Da telefono sono un elenco in fondo alla scena. Da 769px in su ciascuna
   viene posizionata da JavaScript sulla faccia del proprio gradino, leggendo
   le ancore misurate fotogramma per fotogramma dalla pipeline: la riga a
   spaziatura uniforme di prima non aveva alcun rapporto con dove stanno
   davvero le sagome, e infatti sembrava storta. */
.podio-labels {
  position: relative;
  z-index: 3;
  order: 1;
  /* In colonna resta nel flusso e "margin-top: auto" la spinge in fondo:
     assoluta staccherebbe chiusura e invito, che devono restarle sotto. */
  margin: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding: 0 2rem 1.6rem;
  list-style: none;
  pointer-events: none;
}

/* Il fondo della scena e' il pavimento lucido, chiaro a chiazze: senza
   velatura il numero romano dorato ci sparisce dentro. Sta sullo stage e non
   sull'elenco perche' deve passare anche sotto chiusura e invito.
   Il vignettatura usa gia' ::after, qui tocca a ::before. */
.podio-stage::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top,
              rgba(8, 2, 3, 0.94) 0%,
              rgba(8, 2, 3, 0.6) 45%,
              rgba(8, 2, 3, 0) 100%);
}

.podio-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  text-shadow: 0 1px 8px rgba(0,0,0,0.75);
}

.podio-rank {
  font-family: "Tenor Sans", sans-serif;
  font-size: 1.2rem;
  color: var(--gold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.podio-name {
  font-family: "Bodoni Moda", serif;
  font-size: 1.8rem;
  color: #f4f2ee;
  line-height: 1.2;
}

.podio-riga {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.35;
  color: rgba(244,242,238,0.72);
  margin-top: 0.3rem;
}

/* La prima classificata pesa di piu' col corpo e con un filo d'oro sopra il
   numero. Non con l'opacita': GSAP anima proprio l'opacita' per l'entrata e
   scriverebbe 1 in linea, cancellando qualunque attenuazione messa qui. */
.podio-label--primo .podio-name {
  font-size: 2.4rem;
}

.podio-label--primo .podio-rank {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--gold-lt);
}

.podio-label--primo .podio-rank::before {
  content: "";
  width: 2.6rem;
  height: 1px;
  background-color: var(--gold-lt);
  margin-bottom: 0.7rem;
}

.podio-label:not(.podio-label--primo) .podio-name {
  color: rgba(244,242,238,0.86);
}

/* Chiusura e invito: chiudono la scena sotto le fasce. */
.podio-chiusura {
  position: relative;
  z-index: 3;
  order: 2;
  margin: 0 0 0.8rem;
  padding: 0 1.5rem;
  text-align: center;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.4;
  color: rgba(244,242,238,0.78);
  text-shadow: 0 1px 8px rgba(0,0,0,0.75);
}

/* Pulsante: Syne, maiuscolo, con bordo inferiore dorato, alto almeno 4.4rem per il tocco. */
.podio-cta {
  position: relative;
  z-index: 3;
  order: 3;
  align-self: center;
  margin-bottom: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.4rem;
  padding: 0.8rem 1.2rem;
  font-family: "Syne", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 1.1rem;
  color: var(--gold-lt);
  background: none;
  border: none;
  border-bottom: 1px solid var(--gold);
  text-decoration: none;
  cursor: pointer;
  transition: color 160ms cubic-bezier(0.16,1,0.3,1), border-color 160ms cubic-bezier(0.16,1,0.3,1);
}

/* Stato iniziale per animazione GSAP: solo dentro .podio-ready le voci sono nascoste e spostate. */
.podio-ready .podio-label,
.podio-ready .podio-chiusura,
.podio-ready .podio-cta {
  opacity: 0;
  transform: translateY(1.2rem);
}

/* Riduzione movimento: tutto visibile immediatamente. */
@media (prefers-reduced-motion: reduce) {
  .podio-ready .podio-label,
  .podio-ready .podio-chiusura,
  .podio-ready .podio-cta {
    opacity: 1;
    transform: none;
  }
}

/* Desktop: ogni fascia va sul suo gradino, posizionata da JavaScript.
   La soglia e' 1024 e non 769: sotto, i tre gradini nell'inquadratura stanno
   troppo vicini e le tre voci si accavallano. Meglio l'elenco in fondo. */
@media (min-width: 1024px) {
  .podio-copy {
    padding: 2rem 2rem 0;
  }

  /* L'elenco smette di essere una colonna e diventa il piano su cui le tre
     voci vengono collocate una per una. */
  .podio-labels {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    display: block;
  }

  /* Senza ancore utilizzabili (il montaggio verticale non ne ha) le fasce
     tornano l'elenco in fondo: assolute e senza coordinate finivano tutte
     impilate nell'angolo in alto a sinistra. */
  .podio-senza-ancore .podio-labels {
    position: relative;
    inset: auto;
    margin: auto 0 0;
    padding: 0 2rem 1.6rem;
    display: flex;
  }

  .podio-senza-ancore .podio-label {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: none;
    align-items: flex-start;
    text-align: left;
  }

  /* Nessun centraggio qui dentro, ne' con transform ne' con translate.
     GSAP anima l'entrata di queste fasce e assorbe nel proprio transform in
     linea qualunque spostamento trovi dichiarato: quello spostamento restava
     scritto sull'elemento anche dopo che la finestra si era stretta e la
     regola non si applicava piu', e le fasce finivano mezze fuori schermo a
     sinistra. Il centraggio lo calcola posizionaFasce sulla larghezza vera. */
  .podio-label {
    position: absolute;
    align-items: center;
    width: max-content;
    max-width: 22rem;
    text-align: center;
  }

  .podio-label--primo .podio-rank {
    align-items: center;
  }

  /* Con l'elenco tolto dal flusso, chiusura e invito sarebbero risaliti
     sotto il titolo: "auto" li rimanda in fondo alla colonna. */
  .podio-chiusura {
    margin-top: auto;
    font-size: 1.5rem;
  }

  /* La misura stretta serviva sul verticale, dove il sottotitolo scendeva
     sulla testa della figura centrale. In orizzontale la fascia scura in alto
     e' larga, e restringere qui spezzava la frase a meta' proposizione. */
  .podio-lede {
    /* Larga abbastanza da stare su una riga sola: la seconda riga scendeva
       sulla testa della figura centrale, che e' la parte piu' illuminata
       della scena e la peggiore su cui appoggiare del testo. */
    max-width: 76ch;
    font-size: 1.6rem;
    color: rgba(244, 242, 238, 0.88);
  }

  /* Il velo in basso serviva alle fasce raccolte in fondo. Qui sono sparse
     sulla scena e il velo coprirebbe il podio: resta solo dove appoggiano
     chiusura e invito. */
  .podio-stage::before {
    height: 26%;
  }
}

/* Hover solo su dispositivi con hover supportato. */
@media (hover: hover) {
  .podio-cta:hover {
    color: #fff;
    border-color: var(--gold-lt);
  }
}

/* Il sito applica il maiuscolo a tappeto. Su un occhiello di tre parole va
   bene, su una frase no: sparisce il profilo delle parole e si legge piu'
   lentamente. Restano maiuscoli solo occhiello, numero romano e pulsante. */
.podio-title,
.podio-lede,
.podio-name,
.podio-riga,
.podio-chiusura {
  text-transform: none;
}

/* Il sottotitolo finiva sulla testa della figura centrale: la fascia utile
   in alto e' stretta, quindi si stringe l'interlinea invece di lasciarlo
   scendere nella zona illuminata. La misura della riga resta un fatto del
   singolo taglio: stava qui senza condizioni e vinceva per posizione sulla
   regola del desktop, spezzando la frase a meta' proposizione. */
.podio-lede {
  line-height: 1.35;
}

/* Sul verticale la fascia scura in alto e' piu' bassa che sul 16:9: il
   sottotitolo scendeva sulla testa della figura centrale. */
@media (max-width: 768px) {
  /* 26ch spezzavano i settantasette caratteri in tre righe, e la terza
     cadeva 150px sotto il bordo, oltre la velatura, proprio dove comincia la
     struttura illuminata del palco: l'ultima parola sembrava tagliata. Con
     una misura piu' larga la frase sta in due righe e resta nella fascia
     scura. Sotto i 430px vince comunque la larghezza disponibile. */
  .podio-lede {
    max-width: 42ch;
    font-size: 1.4rem;
  }
}

/* Sul verticale la fascia scura del palco e' stretta e il sottotitolo finiva
   sulla testa della figura centrale. Invece di accorciare il testo, la
   velatura in alto si allunga e si scurisce: cosi' il blocco appoggia su una
   fascia voluta e non su un punto qualsiasi della scena. */
@media (max-width: 768px) {
  .podio-copy::before {
    content: "";
    position: absolute;
    inset: -4rem -2rem auto -2rem;
    height: calc(100% + 8rem);
    z-index: -1;
    pointer-events: none;
    /* Le tappe si misurano dal basso in rem, non in percentuale: il riquadro
       sporge di 4rem sotto l'ultima riga, quindi tutta la sfumatura sta in
       quella riserva e il testo appoggia sempre sul pieno, qualunque sia il
       numero di righe. In percentuale la sfumatura cominciava a meta' del
       blocco e l'ultima riga restava scoperta. */
    background: linear-gradient(to top,
                rgba(8, 2, 3, 0) 0,
                rgba(8, 2, 3, 0.94) 4.4rem,
                rgba(8, 2, 3, 0.94) 100%);
  }

  .podio-copy {
    position: relative;
    isolation: isolate;
  }
}

/* --- ripiego: contenuto vero, zero byte scaricati ---
   Mostrato se manca WebGL, se il contesto va perso o se il modello non carica.
   Riusa il linguaggio a schede gia' stabilito dall'Albo d'Oro invece di essere
   un poster renderizzato, che costerebbe un quarto del budget della sezione
   per una cosa che quasi nessuno vede. */

.podio-fallback {
    display: none;
}

.podio--fallback .podio-stage {
    display: none;
}

.podio--fallback .podio-fallback {
    display: block;
    padding: clamp(8rem, 14vh, 14rem) var(--site--margin);
}

.podio-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 3vw, 4rem);
    max-width: 120rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.podio-card {
    border-top: 1px solid rgba(212, 175, 55, 0.28);
    padding-top: 2.4rem;
}

.podio-card-rank {
    display: block;
    font-family: "Tenor Sans", serif;
    font-size: var(--fs-xs);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold-lt);
    margin-bottom: 1.2rem;
}

.podio-card-name {
    font-family: "PP Eiko", serif;
    font-weight: 100;
    font-size: clamp(2.6rem, 3.4vw, 4rem);
    line-height: 1.1;
    margin: 0 0 0.8rem;
}

.podio-card-role {
    font-family: "Bodoni Moda", serif;
    font-size: var(--fs-sm);
    font-style: italic;
    color: rgba(240, 240, 240, 0.55);
    margin: 0;
}


/* .pie e non footer: il piede ora e' quello condiviso con le pagine interne
   (piede.css, caricato dopo). Con il selettore generico questa regola gli
   imponeva 58vh di altezza minima e un incolonnamento suo, e la chiusura si
   apriva con mezzo schermo vuoto. Qui resta solo la firma grafica: il tralcio
   di rose, che e' della home e non delle pagine interne. */
body.home .pie {
    background-color: var(--black);
    /* Il tralcio chiudeva la pagina nella sezione .draw, rimossa perche' su
       desktop era solo una tela interattiva col mouse (su telefono, dove non
       c'e' puntatore, non faceva proprio niente). La chiusura grafica pero'
       serviva: l'immagine si sposta qui, dove il footer mobile la usava gia'
       -- il blocco @media 600px la ridefinisce per il formato verticale. */
    /* Due strati: il velo scuro sta davanti al tralcio. Prima si alleggeriva
       verso destra, dove il vecchio piede non aveva testo; adesso li' c'e' la
       colonna dei contatti, quindi il velo resta fitto per tutta la larghezza
       e le rose fanno da trama, non da immagine in primo piano. */
    background-image:
        linear-gradient(to right,
            #000 0%, rgba(0, 0, 0, 0.93) 30%,
            rgba(0, 0, 0, 0.86) 60%, rgba(0, 0, 0, 0.8) 100%),
        url("./images/draw_bg_rose_vine.jpg");
    background-repeat: no-repeat;
    background-position: center, right -4vw top;
    background-size: cover, auto 175%;
}

.footer-info {
    width: 100%;
    padding: 0 4rem 3rem 4rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.credit-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: var(--fs-sm);
    z-index: 4;
}


.credit-wrap .credit-item {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.credit-wrap img {
    width: 100%;
    height: auto;
}

.name_link::after {
    content: '↗';
}


.footer-title {
    height: 25vh;
    overflow: clip;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-title-text {
    margin: 0;
    width: 100%;
    text-align: center;
    font-family: "PP Eiko", serif;
    font-size: 14vw;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--white);
}

.back-to-top {
    font-size: var(--fs-base);
}

.svg-wrap-mobile {
    width: 100%;
    aspect-ratio: 31 / 8;
    display: none;
}

.svg-holder-mobile {
    width: 100%;
    aspect-ratio: 31 / 8;
}


.mobile-menu-wrap {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 99;
    background: var(--black);
    padding: 6rem 1rem 2rem;
    font-size: 2rem;

}
  
.mobile-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    padding-bottom: 8rem
}
  
.form-submit {
    border-bottom: 1px solid;
}


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

    * {
        --svg-height: 20vw;
        --rip-height: 78rem;
    }

    /* Su telefono l'anno lo dice gia' il "1947" grande della hero (.zhan):
       nel marchio sarebbe il secondo, quindi qui resta solo il nome. */
    .marchio-anno {
        display: none;
    }

    .header-wrap {
        padding: 8px var(--site--margin);
    }

    .kv-top {
        clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0 90%);

    }
    
    .rip-area {
        padding-top: 5rem;
    }

    .kv-title {
      display: flex;
      flex-direction: row;
    }
    
    .about-center {
        width: 100%;
        padding: var(--site--margin);
        flex-direction: column;
        column-gap: 4rem;
        gap: 2rem;
    }

    .hori {
        height: fit-content;
    }

    .track {
        width: 100vw;
        flex-direction: column;
        height: fit-content;
        margin: 4rem 0;
        gap: 8rem;

    }

    .hori-content, .hori-content-2 {
        height: auto;
        grid-template-columns: repeat(2, 50%);
        grid-template-rows: auto;
        padding: var(--site--margin);
        row-gap: 6.4rem;
    }

     .hori-img-wrap {
        width: 100%;
        flex-direction: column-reverse;
        grid-column-start: auto;
        grid-column-end: auto;
        
    }

    .hori-img img {
        width: 100%;
        height: 120%;
    }

    /* Da telefono la panoramica e' verticale (script_8.js: fromTo y da
       -heightDiff a 0), quindi l'immagine DEVE eccedere in altezza la sua
       finestra: con height:100% heightDiff vale 0 e l'animazione non parte.
       L'eccedenza e' la corsa del movimento: col 22% di prima la corsa era piu'
       alta della testa dei soggetti, che per mezzo scorrimento restavano fuori
       inquadratura. Il 10% conserva la panoramica e tiene i volti sempre
       dentro, insieme a object-position qui sotto. */
    .hori-img img[parallax-x] {
        max-width: none !important;
        max-height: none !important;
        width: 100% !important;
        height: 110% !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
    }

    /* Due riquadri cambiano forma passando al telefono (da verticali a
       orizzontali), quindi la loro inquadratura va ritarata qui: coi valori
       del desktop la corona di "storia" e la testa di "territorio" restano
       sopra il bordo superiore. */
    [data-modal="modal-carriera"] .hori-img img[parallax-x] { object-position: 50% 15% !important; }
    [data-modal="modal-sponsor"] .hori-img img[parallax-x] { object-position: 50% 3% !important; }
    [data-modal="modal-storia"] .hori-img img[parallax-x] { object-position: 50% 0% !important; }
    [data-modal="modal-sicurezza"] .hori-img img[parallax-x] { object-position: 50% 0% !important; }
    [data-modal="modal-community"] .hori-img img[parallax-x] { object-position: 50% 27% !important; }

    /* "Territorio" e' l'unico riquadro verticale: essendo il piu' alto, a pari
       percentuale la sua corsa e' la piu' lunga e all'inizio dello scorrimento
       scavalcava la testa. Corsa piu' corta solo per lui. */
    [data-modal="modal-territorio"] .hori-img img[parallax-x] {
        height: 106% !important;
        object-position: 50% 0% !important;
    }

    .hori-item-text {
        position: static;
        width: auto;
    }

    .hori-content .hori-img-wrap:nth-child(1) { 
        grid-area: 1 / 1 / 2 / 3; 
        aspect-ratio: 6 / 5;

        .hori-img img {
            aspect-ratio: 6 / 5;
        }
    }

    
    
    .hori-content .hori-img-wrap:nth-child(2) {
        grid-area: 2 / 1 / 3 / 2;
        aspect-ratio: 2 / 1;

        .hori-img img {
            aspect-ratio: 2 / 1;
        }
    }

    .hori-content .hori-img-wrap:nth-child(3) {
        grid-area: 3 / 2 / 4 / 3;
        aspect-ratio: 3 / 2;

        .hori-img img {
            aspect-ratio: 3 / 2;
        }
    }


    .hori-content-2 .hori-img-wrap:nth-child(1) { 
        grid-area: 1 / 1 / 2 / 3; 
        aspect-ratio: 3 / 4;

        .hori-img img {
            aspect-ratio: 3 / 4;
        }
    }


    .hori-content-2 .hori-img-wrap:nth-child(2) {
        grid-area: 3 / 1 / 4 / 3;
        aspect-ratio: 35 / 22;
        height: auto;

        .hori-img img {
            aspect-ratio: 35 / 22;
        }
    }

    .hori-content-2 .hori-img-wrap:nth-child(3) {
        grid-area: 2 / 2 / 3 / 3;
        aspect-ratio: 2 / 1;

        .hori-img img {
            aspect-ratio: 2 / 1;
        }
    }

    .hori-title h1 {
        font-size: 4rem;
        font-family: "PP Eiko";
        font-weight: 300;
    }

    .bg-bottom {
        width: 100%;
        height: 100vh;
        transform: none !important;
    }

    /* Le regole mobile dell'Albo d'Oro vivono ora nel blocco @media del
       nuovo palcoscenico, in fondo al file. Qui restavano un
       `opacity: 1 !important` sulle righe (che impediva di evidenziare
       quella attiva) e una griglia a 6 righe per la vecchia galleria a
       mosaico, entrambi superati. */

    /* Qui viveva `.form-sect { top: calc(-22.4rem - 12vh) }`. E' la stessa
       trappola gia' corretta per il desktop alla riga ~2169, sfuggita su
       mobile: essendo piu' in basso nel file e altrettanto non stratificata,
       vinceva sul `top: 0`. Con .content-wrap a tutto schermo quell'offset
       incollava la sezione 321px sopra il bordo della finestra: la cerniera
       spariva per la sua fetta alta e sotto restavano 321px (il 40% dello
       schermo) di fondo #1A0507 nudo. E' il "si blocca a meta'" segnalato.
       Non va reintrodotto: la sezione deve stare incollata a top: 0.

       Con la card bianca sostituita dall'invito a tutto schermo sono cadute
       anche le regole di .form-content / .form-logo / .form-content-inner /
       .form-input: quel markup non esiste piu'. */

    .bg-line:nth-child(1) {
        display: none;
    }


    .bg-line:nth-child(2) {
        margin-right: var(--site--margin);
    }

    .bg-line:nth-child(3) {
        right: 50%;
    }



    .about-gallery {
        width: 100%;
        aspect-ratio: 6 / 5;
    }
    
    .about-gallery-item img {
        width: 100%;
        aspect-ratio: 6 / 5;
    }

    .experience-title {
        font-size: 3.2rem;
    }
  
      
    .svg-wrap {
      display: none;
    }


    .svg-wrap-mobile {
        display: block;
    }

    .preload-svg {
        width: 120%;
        aspect-ratio: 31 / 8;
    }

    /* Il tralcio su telefono sta in cima e sfuma nel nero prima dei link.
       Prima il piede era alto 100vh con i contenuti spinti in fondo, e sotto
       i 600px l'intera colonna di link era nascosta: su telefono il piede era
       una schermata di sole rose. Ora il disegno accompagna, non sostituisce. */
    body.home .pie {
        background-image:
            linear-gradient(to bottom, rgba(0, 0, 0, 0.42) 0%, rgba(10, 2, 4, 0.9) 22%, rgba(10, 2, 4, 0.99) 40%, #0a0204 55%),
            url("./images/draw_bg_rose_vine.jpg");
        background-size: cover, 150% auto;
        background-repeat: no-repeat, no-repeat;
        background-position: center, center top;
    }

    
  
  }



.mobile-show {
    display: none;
}


@media only screen and (max-width: 600px) {
    .mobile-hide {
        display: none;
    }

    .mobile-show {
        display: flex;
    }
}

.mobile-nav .credit-wrap {
    display: flex !important;
}

/* Desktop Specific Adjustments - Original position */
@media only screen and (min-width: 601px) {
    .about-title,
    .zhan,
    .ling-wrap {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* `opacity` e `visibility` non possono stare qui: erano `!important` e
       quindi battevano anche gli inline style di GSAP, inchiodando la
       didascalia sempre visibile e rendendo impossibile animarla in scroll.
       Restano solo display e height, che e' cio' che serviva davvero. */
    .about-content .lines-wrap,
    .about-content .lines-wrap.ph-d,
    .brxe-nehnpa,
    .brxe-cnfnyn {
        display: block !important;
        height: auto !important;
    }

    .about-content-inner {
        padding-top: 0 !important;
        padding-left: 5vw !important;
        align-items: flex-start !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .about-center {
        position: relative !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
        transform: none !important;
    }

    .about-gallery {
        margin: 0 auto !important;
        position: relative !important;
        transform: translateX(-5vw) !important;
    }
}

/* Mobile Specific Adjustments - Centered photo gallery & New Vertical Crown Image */
@media only screen and (max-width: 600px) {
    /* Stesso fondale fixed del desktop: ancorarlo al documento riapriva la
       fascia rossa sotto la serranda del video. `transform` resta libera,
       altrimenti il respiro in scale della timeline verrebbe bloccato. */
    .brxe-image.bg-bottom,
    .bg-bottom {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        object-fit: cover !important;
        object-position: center 30% !important;
    }

    /* Center photo gallery element on mobile */
    .about-content-inner {
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100vw !important;
    }

    .about-center {
        position: relative !important;
        width: 100vw !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
    }

    .about-gallery {
        margin: 0 auto !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

}
/* Inverte l'ordine verticale dentro #about: prima il testo introduttivo,
   poi le due card partner. .about-content e' un flex column, quindi basta
   l'ordine dei flex item -- il DOM resta invariato per le animazioni GSAP. */
.about-content .lines-wrap.ph-d {
    order: 1;
}

.about-content-inner {
    order: 2;
}

/* Stato iniziale della didascalia. GSAP lo sovrascrive con una gsap.set() al
   momento di costruire aboutTl, ma serve anche qui: senza, il blocco lampeggia
   a schermo nel frame tra il primo paint e l'avvio degli script. */
.about-content .lines-wrap.ph-d {
    opacity: 0;
}

/* Sotto i 768px le due card si impilano in colonna, quindi lo stack
   didascalia + card cresce di ~500px e sfonda i 100vh del box sticky (che e'
   `overflow: clip`, percio' l'eccesso verrebbe tagliato sopra e sotto).
   Qui si recupera lo spazio necessario stringendo le spaziature verticali. */
@media only screen and (max-width: 768px) {
    /* Su schermo stretto didascalia e card non stanno insieme in 100vh a
       qualunque altezza (su 640px sforano di ~150px). Invece di comprimerle
       entrambe fino a renderle illeggibili, le si sovrappone nella stessa cella
       di griglia: la timeline di .about le alterna nel tempo, sfruttando i
       400vh di corsa della sezione. Cosi' il fit e' garantito a ogni altezza. */
    .about-content {
        display: grid;
        grid-template-areas: "about-stack";
        place-items: center;
        padding-top: max(5vh, 46px);
        padding-bottom: 2vh;
        gap: 0;
    }

    .about-content > .lines-wrap.ph-d,
    .about-content-inner {
        grid-area: about-stack;
        width: 100%;
    }

    /* Qui la didascalia e' sola in scena (le card arrivano dopo il crossfade),
       quindi ha tutti i 100vh per se' e non va compressa: blocco alto, testo
       leggibile. I clamp di larghezza del desktop, essendo su vw, qui
       collassavano sul minimo -- 0.98rem con root a 10px fa 9.8px. */
    .about-content .lines-wrap.ph-d {
        padding: clamp(1.8rem, 3.6vh, 3rem) 1.5rem !important;
    }

    .about-content .lines-wrap .gold-title {
        font-size: clamp(1.45rem, 4.3vw, 2.1rem) !important;
        letter-spacing: 0.16em !important;
        line-height: 1.45 !important;
        margin-bottom: clamp(1.2rem, 2.8vh, 2.4rem) !important;
    }

    .about-content .lines-wrap p {
        font-size: clamp(1.25rem, 3.6vw, 1.7rem) !important;
        line-height: 1.85 !important;
        margin-bottom: clamp(1rem, 2.2vh, 1.8rem) !important;
    }

    /* Le regole di compressione delle schede che stavano qui sono state
       rimosse: servivano quando didascalia e card coesistevano nello stesso
       viewport. Ora si alternano, quindi le schede usano le misure generose
       definite nel blocco @media del partner showcase piu' in alto. */
}

/* didascalia sovrapposta in basso */
.albo-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 6rem 2rem 2rem;
    text-align: center;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.6) 38%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

.albo-caption-year {
    display: block;
    font-family: 'Tenor Sans', system-ui, sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.34em;
    text-indent: 0.34em;
    color: var(--gold-lt);
    margin-bottom: 0.7rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.albo-caption-name {
    display: block;
    font-family: 'Bodoni Moda', serif;
    font-size: clamp(1.6rem, 1.7vw, 2.1rem);
    letter-spacing: 0.04em;
    color: #f4f2ee;
    text-transform: none;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

/* ---------- mobile ---------- */
@media only screen and (max-width: 768px) {
    .experience {
        gap: clamp(2rem, 4vh, 3.5rem);
        padding: clamp(6rem, 10vh, 9rem) var(--site--margin) clamp(8rem, 14vh, 12rem);
        background-image: url("./images/albo_bg_mobile.jpg");
        background-attachment: scroll;
    }

    /* In verticale la foto va sopra l'elenco e ci resta incollata mentre
       l'elenco le scorre sotto: e' cosi' che ogni vincitrice si vede a
       schermo pieno invece che in una tessera da 100px. */
    .albo-body {
        display: flex;
        flex-direction: column;
        /* senza questo resta l'align-items:start della griglia desktop e la
           colonna foto, che non ha larghezza intrinseca, collassa a zero */
        align-items: stretch;
    }

    .albo-stage-col {
        order: -1;
        position: sticky;
        top: clamp(6rem, 9vh, 9rem);
        align-self: auto;
        height: auto;
        margin-bottom: clamp(2rem, 4vh, 3.5rem);
    }

    .experience::before {
        background: linear-gradient(180deg, rgba(6, 6, 6, 0.9) 0%, rgba(6, 6, 6, 0.8) 40%, rgba(6, 6, 6, 0.92) 100%);
    }

    .list-gallery {
        /* Su mobile e' la colonna a essere sticky, non il riquadro. */
        position: relative;
        top: auto;
        aspect-ratio: 4 / 5;
        max-width: 46rem;
        margin: 0 auto;
    }

    /* Su mobile e' lo scroll a cambiare la foto: l'altezza della riga E' la
       durata di ogni vincitrice. Con le righe compatte del desktop (55px)
       le foto si sostituivano prima di finire di comparire. */
    .list-item {
        padding: clamp(3.2rem, 5.4vh, 4.6rem) 0 clamp(3.2rem, 5.4vh, 4.6rem) 2rem;
    }

    .list-item.is-active { padding-left: 3rem; }

    .list-item p[data="date"] {
        min-width: 5.5ch;
        margin-right: 2rem;
    }

    .albo-caption { padding: 5rem 1.5rem 1.8rem; }
    .albo-caption-year { font-size: 1.3rem; }
    .albo-caption-name { font-size: 2rem; }
}

/* ==========================================================================
   IL PODIO — verticale
   Il ritaglio verticale della scena arriva da un secondo montaggio 9:16, non
   da una camera: qui resta solo la tipografia.
   ========================================================================== */

@media only screen and (max-width: 768px) {
    .podio-cards {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

@media only screen and (max-width: 600px) {
    .podio-copy {
        top: clamp(3rem, 5vh, 5rem);
        padding: 0 var(--site--margin);
    }

    .podio-lede {
        font-size: var(--fs-base);
        margin-top: 1.2rem;
    }

    .podio-name {
        font-size: 1.7rem;
    }

    .podio-label--primo .podio-name {
        font-size: 2.2rem;
    }

    .podio-rank {
        font-size: 1rem;
        margin-bottom: 0.4rem;
    }

    .podio-riga {
        font-size: 1.1rem;
    }
}


/* ==========================================================================
   DA MISS TRIESTE A MISS ITALIA
   Tre vincitrici hanno preso la corona nazionale nello stesso anno in cui
   l'avevano presa qui. E' la ragione per cui una ragazza dovrebbe candidarsi,
   quindi la sezione sta fra l'Albo d'Oro e il Podio, e chiude sul form.

   Famiglia di impaginazione: bande a piena larghezza con l'anno in filigrana,
   lati alternati. Non e' una griglia, e non deve diventarlo: la versione a tre
   schede affiancate e' quella che il cliente ha bocciato. La Giuria qui sotto
   usa apposta una famiglia diversa, la cascata diagonale.

   Mobile first: le regole base sono per telefono, il desktop arriva dopo con
   una sola @media (min-width: 1024px). html ha font-size 10px: 1rem = 10px.
   ========================================================================== */

.carriera {
  --gold: #D4AF37;
  --gold-lt: #F5E096;
  --gold-dp: #8a6d1c;
  background-color: #0a0204;
  color: #f4f2ee;
  padding: 10rem 0;
  width: 100%;
  height: auto;
  overflow: visible;
  position: relative;
}

.carriera *,
.carriera *::before,
.carriera *::after {
  box-sizing: border-box;
}

/* Il sito applica il maiuscolo a tappeto: va bene per un occhiello, non per
   un paragrafo che deve convincere qualcuno a candidarsi. */
.carriera-title,
.carriera-nome,
.carriera-lede,
.carriera-dopo,
.carriera-foot,
.carriera-monogramma,
.carriera-filigrana {
  text-transform: none;
}

/* Contenitore principale con margini di sicurezza per evitare il contatto con i bordi del viewport */
.carriera-intro,
.carriera-bande,
.carriera-foot,
.carriera-cta {
  max-width: 132rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2.4rem;
  padding-right: 2.4rem;
}

.carriera-intro {
  max-width: 70rem;
  margin-bottom: 8rem;
  text-align: center;
}

.carriera-title {
  font-family: "PP Eiko", serif;
  font-weight: 100;
  font-size: clamp(3.6rem, 9vw, 8rem);
  line-height: 1.05;
  margin-bottom: 4rem;
}

/* Azzera la lista ordinata per rimuovere numeri e rientri predefiniti del browser */
.carriera-bande {
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
}

.carriera-banda {
  position: relative;
  margin-bottom: 10rem;
}

/* Posiziona la filigrana fuori asse e disabilita l'interazione per non ostacolare la lettura */
.carriera-filigrana {
  position: absolute;
  top: -2rem;
  z-index: 0;
  color: rgba(212, 175, 55, 0.12);
  font-family: "PP Eiko", serif;
  font-weight: 100;
  font-size: clamp(12rem, 26vw, 26rem);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.carriera-banda[data-lato="sinistra"] .carriera-filigrana {
  right: 0;
}

.carriera-banda[data-lato="destra"] .carriera-filigrana {
  left: 0;
}

.carriera-ritratto {
  width: 80%;
  aspect-ratio: 3/4;
  position: relative;
  z-index: 1;
  margin: 0;
}

.carriera-ritratto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carriera-banda[data-lato="sinistra"] .carriera-ritratto {
  margin-left: -2.4rem;
  margin-right: auto;
}

.carriera-banda[data-lato="destra"] .carriera-ritratto {
  margin-left: auto;
  margin-right: -2.4rem;
}

/* Velatura sfumata per garantire la leggibilita' del testo sovrapposto a immagini chiare */
.carriera-testo {
  position: relative;
  z-index: 2;
  margin-top: -4rem;
  padding: 0 2rem;
}

/* La velatura deve iniziare DENTRO la foto, non al bordo del blocco di testo:
   il testo sale di 4rem sopra il ritratto, e l'anno con l'eta' finiva a cadere
   proprio li', su un fotogramma d'archivio pieno di dettaglio chiaro. */
.carriera-testo::before {
  content: "";
  position: absolute;
  inset: -6rem 0 -2rem;
  z-index: -1;
  background: linear-gradient(to bottom,
              rgba(10, 2, 4, 0) 0%,
              rgba(10, 2, 4, 0.72) 26%,
              rgba(10, 2, 4, 0.96) 52%,
              #0a0204 72%);
  pointer-events: none;
}

.carriera-meta {
  font-family: "Tenor Sans", sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
}

.carriera-sep {
  color: var(--gold-dp);
  margin: 0 0.6em;
}

.carriera-nome {
  font-family: "Bodoni Moda", serif;
  font-size: clamp(2.8rem, 6vw, 4.4rem);
  color: #f4f2ee;
  margin: 1rem 0;
}

.carriera-nome::after {
  content: "";
  display: block;
  width: 6rem;
  height: 1px;
  background-color: var(--gold);
  margin-top: 2rem;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.e-visibile .carriera-nome::after {
  transform: scaleX(1);
}

/* Mantiene il filo dorato visibile se JavaScript non e' attivo */
:root:not(.js) .carriera-nome::after {
  transform: scaleX(1);
}

.carriera-dopo,
.carriera-lede {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  color: rgba(244, 242, 238, 0.74);
}

/* Senza dimensione esplicita eredita il corpo del sito, e con html a 10px
   la riga finisce a otto punti. */
.carriera-dopo {
  font-size: 1.5rem;
  line-height: 1.6;
  max-width: 46ch;
  margin-top: 1.6rem;
}

.carriera-lede {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.5;
  max-width: 52ch;
  margin-inline: auto;
}

.carriera-ritratto--vuoto {
  background-color: #050505;
  border: 1px solid var(--gold);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.carriera-monogramma {
  font-family: "PP Eiko", serif;
  font-size: 6rem;
  color: var(--gold-lt);
}

.carriera-didascalia {
  font-family: "Tenor Sans", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dp);
}

.carriera-foot {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  line-height: 1.5;
  color: rgba(244, 242, 238, 0.54);
  max-width: 52ch;
  text-align: center;
  margin-top: 8rem;
  margin-inline: auto;
}

/* Allinea il testo al centro del pulsante sia in verticale che in orizzontale */
.carriera-cta {
  display: flex;
  width: max-content;
  align-items: center;
  justify-content: center;
  font-family: "Syne", sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f4f2ee;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  min-height: 4.4rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (min-width: 1024px) {
  .carriera-intro,
  .carriera-bande,
  .carriera-foot,
  .carriera-cta {
    padding-left: 6rem;
    padding-right: 6rem;
  }

  .carriera-intro {
    margin-bottom: 12rem;
  }

  .carriera-banda {
    display: grid;
    grid-template-columns: 7fr 5fr;
    align-items: center;
    gap: 8rem;
  }

  .carriera-banda[data-lato="destra"] {
    grid-template-columns: 5fr 7fr;
  }

  /* La riga va dichiarata insieme alla colonna. Con la sola colonna, il
     collocamento automatico aveva gia' consumato la prima riga sul ritratto e
     spediva il testo in una seconda riga: la banda diventava alta 851px invece
     di 620 e in mezzo restava un vuoto. */
  .carriera-banda[data-lato="destra"] .carriera-ritratto,
  .carriera-banda[data-lato="destra"] .carriera-ritratto--vuoto {
    grid-column: 2;
    grid-row: 1;
  }

  .carriera-banda[data-lato="destra"] .carriera-testo {
    grid-column: 1;
    grid-row: 1;
  }

  /* Proporzioni e altezza massima limitate per non deformare la griglia su schermi grandi */
  .carriera-ritratto,
  .carriera-ritratto--vuoto {
    width: 100%;
    aspect-ratio: 4/5;
    max-height: 62rem;
    margin: 0;
  }

  .carriera-banda[data-lato="sinistra"] .carriera-ritratto,
  .carriera-banda[data-lato="sinistra"] .carriera-ritratto--vuoto {
    margin-left: -6rem;
    margin-right: 0;
  }

  .carriera-banda[data-lato="destra"] .carriera-ritratto,
  .carriera-banda[data-lato="destra"] .carriera-ritratto--vuoto {
    margin-right: -6rem;
    margin-left: 0;
  }

  .carriera-testo {
    margin-top: 0;
    padding: 0;
  }

  .carriera-testo::before {
    display: none;
  }

  .carriera-filigrana {
    font-size: clamp(20rem, 18vw, 34rem);
    top: -6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carriera-nome::after {
    transition: none;
    transform: scaleX(1);
  }
}/* ==========================================================================
   CHI SCEGLIE — la giuria dell'edizione
   Generata da tools/build_giuria.py a partire da data/giuria.json: la giuria
   cambia ogni anno, l'impaginazione no.

   Famiglia di impaginazione: cascata diagonale sovrapposta. La sezione qui
   sopra usa bande orizzontali a piena larghezza, e le due non devono
   assomigliarsi: erano gia' state bocciate una volta proprio perche' erano la
   stessa griglia di tre schede ripetuta due volte.

   Lo scostamento di ogni voce si calcola da --posto, scritto nel markup: se un
   anno la giuria passa da tre a quattro membri la diagonale si allunga da sola.

   Mobile first, desktop in una sola @media (min-width: 1024px).
   html ha font-size 10px: 1rem = 10px.
   ========================================================================== */

/* Reset strutturale per isolare la sezione dalle regole globali del layout e prevenire scrollbar indesiderate */
.giuria {
  --gold: #D4AF37;
  --gold-lt: #F5E096;
  --gold-dp: #8a6d1c;
  width: 100%;
  height: auto;
  position: relative;
  background-color: #0d0305;
  padding: 8rem 0;
  overflow: clip;
}

.giuria *,
.giuria *::before,
.giuria *::after {
  box-sizing: border-box;
}

/* Il maiuscolo globale del sito va bene su un occhiello, non su una qualifica. */
.giuria-title,
.giuria-nome,
.giuria-lede,
.giuria-ruolo,
.giuria-monogramma {
  text-transform: none;
}

.giuria-intro,
.giuria-cascata {
  max-width: 132rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2.4rem;
  padding-right: 2.4rem;
}

.giuria-eyebrow {
  font-family: "Tenor Sans", sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.24em;
  color: var(--gold-lt);
  text-transform: uppercase;
}

.giuria-title {
  font-family: "PP Eiko", serif;
  font-weight: 100;
  font-size: clamp(3.6rem, 9vw, 8rem);
  line-height: 1.05;
  margin-bottom: 2rem;
}

.giuria-lede {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.5;
  color: rgba(244, 242, 238, 0.74);
  max-width: 52ch;
  margin-bottom: 6rem;
}

.giuria-cascata {
  list-style: none;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
}

/* Sta davanti chi viene prima, non chi viene dopo. Con l'ordine opposto la
   voce successiva copriva l'ultima riga della qualifica precedente: la
   sovrapposizione deve mangiare la cima di un ritratto, mai del testo. */
.giuria-voce {
  position: relative;
  margin-left: calc(var(--posto) * 3.2rem);
  z-index: calc(20 - var(--posto));
}

/* Appena un accenno. Con una sovrapposizione generosa la targa della voce
   precedente mordeva l'angolo del ritratto successivo lasciando una tacca che
   sembrava un errore di disegno. A reggere la cascata bastano il rientro
   diagonale e la profondita' della parallasse. */
.giuria-voce:not(:first-child) {
  margin-top: -1.2rem;
}

/* Misura fissa, non percentuale: il rientro della cascata accorcia la colonna
   di ogni voce, e una larghezza in percentuale faceva rimpicciolire il ritratto
   di un quinto dal primo al terzo. Sembrava uno sbaglio, non una scelta. */
.giuria-ritratto {
  margin: 0;
  width: 21rem;
  aspect-ratio: 2/3;
  overflow: hidden;
  filter: saturate(0.8) brightness(0.9);
  transition: filter 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.giuria-ritratto img,
.giuria-ritratto video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Una targa appoggiata sull'angolo in basso a destra del ritratto, non una
   didascalia larga quanto la colonna: a piena larghezza copriva mezza foto e
   lasciava un rettangolo scuro vuoto di fianco.
   Il margine destro negativo cancella il respiro laterale della sezione, cosi'
   la targa arriva al bordo dello schermo invece di fermarsi prima. */
.giuria-testo {
  position: relative;
  margin-top: -6rem;
  margin-left: 5rem;
  margin-right: -2.4rem;
  padding: 2rem 2.4rem 2.4rem;
  background: linear-gradient(to bottom,
              rgba(13, 3, 5, 0.84) 0%,
              rgba(13, 3, 5, 0.97) 34%,
              #0d0305 100%);
}

.giuria-nome {
  font-family: "Bodoni Moda", serif;
  font-size: clamp(2.4rem, 5.5vw, 3.8rem);
  color: #f4f2ee;
  margin: 0;
}

/* Senza dimensione esplicita eredita il corpo del sito, e con html a 10px
   la qualifica diventa illeggibile. */
.giuria-ruolo {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.6;
  color: rgba(244, 242, 238, 0.74);
  margin: 0.8rem 0 0;
  max-width: 44ch;
}

/* Oro pieno: accanto a due fotografie il contorno gridava piu' dei volti. */
.giuria-ritratto--vuoto {
  background: #060102;
  border: 1px solid rgba(212, 175, 55, 0.42);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.giuria-monogramma {
  font-family: "PP Eiko", serif;
  font-size: 4rem;
  color: var(--gold);
}

.giuria-didascalia {
  font-family: "Tenor Sans", sans-serif;
  font-size: 1rem;
  color: var(--gold-lt);
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .giuria-intro,
  .giuria-cascata {
    padding-left: 6rem;
    padding-right: 6rem;
  }

  .giuria-voce {
    display: flex;
    align-items: center;
    margin-left: calc(var(--posto) * 12rem);
  }

  /* Qui i ritratti sono alti mezzo schermo e il testo sta a meta' altezza:
     con una sovrapposizione timida restavano tre blocchi distanti e la
     diagonale si perdeva nell'aria in mezzo. */
  .giuria-voce:not(:first-child) {
    margin-top: -14rem;
  }

  .giuria-voce:nth-child(even) {
    flex-direction: row-reverse;
  }

  .giuria-ritratto {
    width: 34rem;
    flex-shrink: 0;
  }

  /* Il testo scavalla il ritratto di 8rem e le prime lettere del nome cadono
     sulla parte piu' chiara della fotografia. Una velatura dietro il blocco
     risolveva la leggibilita' ma disegnava un rettangolo scuro visibile sulla
     foto: qui il lavoro lo fa un'ombra sulle lettere, che non ha forma. */
  .giuria-testo {
    margin-top: 0;
    margin-left: -8rem;
    padding: 4rem;
    max-width: 46rem;
    background: none;
  }

  .giuria-nome,
  .giuria-ruolo {
    text-shadow:
      0 2px 12px rgba(8, 2, 3, 0.95),
      0 0 32px rgba(8, 2, 3, 0.85);
  }

  .giuria-voce:nth-child(even) .giuria-testo {
    margin-left: 0;
    margin-right: -8rem;
    text-align: right;
  }
}

@media (hover: hover) {
  .giuria-voce:hover {
    z-index: 30;
  }

  .giuria-voce:hover .giuria-ritratto {
    filter: saturate(1) brightness(1);
  }
}

/* L'incremento della specificita' annulla l'animazione nei criteri di accessibilita' senza forzature */
@media (prefers-reduced-motion: reduce) {
  .giuria .giuria-ritratto {
    translate: none;
    transition: none;
  }

  .giuria .giuria-voce {
    transition: none;
  }
}

/* ==========================================================================
   IL MOVIMENTO DELLE DUE SEZIONI
   misstrieste_source/sezioni.js aggiorna delle variabili a ogni fotogramma
   mentre si scorre; qui si decide cosa ne viene fuori. Tenere separati i due
   mestieri vuol dire che il movimento si ritocca da qui, senza toccare il
   JavaScript.

   Nella carriera l'anno in filigrana e la fotografia derivano in direzioni
   opposte: e' quello che si legge come profondita'. Nella giuria i tre
   ritratti derivano con ampiezze diverse e segni alterni, e ogni nome si
   muove contro il proprio ritratto.

   I valori di ripiego dentro le var() sono lo stato di riposo: senza
   JavaScript la pagina resta ferma e corretta, non rotta.
   ========================================================================== */

/*
  Il colore e' pieno perche' l'opacita' e' modulata dallo scorrimento,
  evitando una doppia trasparenza che impoverirebbe la filigrana.
*/
.carriera-filigrana {
  color: var(--gold);
  translate: 0 var(--deriva-anno, 0%);
  opacity: var(--luce-anno, 0.12);
}

/*
  Clip isola lo sbordo dello zoom senza generare contesti di scorrimento sui bordi dell'elemento.
*/
.carriera-ritratto {
  overflow: clip;
}

.carriera-ritratto img {
  transform-origin: center;
  scale: var(--zoom-foto, 1);
  translate: 0 var(--deriva-foto, 0%);
}

/*
  Nessuna transizione su translate o clip-path per evitare ritardi di inseguimento
  rispetto all'aggiornamento continuo delle variabili ad ogni fotogramma.
*/
.giuria-ritratto {
  translate: 0 var(--deriva-ritratto, 0px);
  clip-path: inset(calc((1 - var(--apertura, 1)) * 100%) 0 0 0);
}

.giuria-testo {
  translate: 0 var(--deriva-nome, 0px);
}

/*
  Promozione dei livelli hardware riservata ai dispositivi che non richiedono un movimento ridotto.
*/
@media (prefers-reduced-motion: no-preference) {
  .carriera-ritratto img {
    will-change: scale, translate;
  }

  .giuria-ritratto {
    will-change: translate, clip-path;
  }
}

/*
  Inibisce i calcoli dinamici e blocca l'impaginazione in uno stato di riposo stabile.
*/
@media (prefers-reduced-motion: reduce) {
  .carriera-filigrana {
    translate: none;
    opacity: 0.12;
  }

  .carriera-ritratto img {
    scale: 1;
    translate: none;
  }

  .giuria-ritratto {
    translate: none;
    clip-path: none;
  }

  .giuria-testo {
    translate: none;
  }
}
/* ==========================================================================
   L'ANNO DA TELEFONO
   Sul verticale la fotografia occupa l'80% della larghezza e passava sopra la
   filigrana: del "1948" restava scoperto solo "48", per giunta al 12% di
   opacita'. Sotto i 1024px l'anno resta sovrapposto alla fotografia - non
   prima, sopra - ma passa davanti, a un corpo e un'opacita' che si leggono.

   Il blocco sta in fondo al foglio di proposito: deve arrivare dopo le regole
   di movimento, che dichiarano translate e opacity sullo stesso selettore e
   vincerebbero per posizione.
   ========================================================================== */

@media (max-width: 1023px) {
  .carriera-filigrana {
    /* Stesso -2rem della regola di base: l'anno resta a cavallo del bordo,
       con una porzione sul fondo nero sopra la fotografia e il resto sceso
       sull'immagine. Confinarlo dentro l'immagine, provato prima, toglieva
       proprio l'effetto voluto. */
    top: -2rem;
    /* Sopra la fotografia (z-index 1), dietro il testo che sale sopra il suo
       bordo basso: a parita' di z-index vince l'ordine nel documento, e il
       testo viene dopo la filigrana. */
    z-index: 2;
    /* Stessa scala della regola di base, non ridotta: doveva restare
       dominante e sconfinare, non stare compatto dentro la fotografia. */
    font-size: clamp(10rem, 28vw, 16rem);
    /* La luce dello scorrimento oscilla fra 0.05 e 0.20: da sola lascerebbe
       il numero invisibile su una foto d'archivio chiara. Qui parte da una
       soglia leggibile e conserva il respiro, restando fra 0.57 e 0.80. */
    opacity: calc(0.5 + var(--luce-anno, 0.12) * 1.5);
    /* Ampiezza dimezzata: la deriva del desktop e' tarata su un numero alto
       34rem dentro una banda alta il doppio di questa. */
    translate: 0 calc(var(--deriva-anno, 0%) * 0.5);
    /* La foto e' in bianco e nero e ha sia zone chiare sia zone scure: l'oro
       pieno da solo sparisce in quelle chiare. Un'ombra sfumata, non un
       riquadro, gli da' stacco in entrambe. */
    text-shadow: 0 0 1.2rem rgba(0, 0, 0, 0.6);
  }

  /* A filo del bordo della banda, non rientrato: deve poter sconfinare sul
     nero, non restare chiuso dentro l'immagine. */
  .carriera-banda[data-lato="sinistra"] .carriera-filigrana {
    left: 0;
    right: auto;
  }

  .carriera-banda[data-lato="destra"] .carriera-filigrana {
    right: 0;
    left: auto;
  }

  /* Finche' l'anno faceva da sfondo al 12%, ripeterlo nella riga di servizio
     serviva a dirlo davvero. Ora si legge in grande sopra la fotografia, e
     riscriverlo nella riga sotto e' una ripetizione che si vede: resta
     l'eta', che e' l'informazione che quella riga porta da sola. */
  .carriera-meta-anno,
  .carriera-meta-anno + .carriera-sep {
    display: none;
  }
}

/* Senza questa, la regola di riposo piu' su riporterebbe l'anno al 12%, cioe'
   allo stesso difetto, per chi chiede meno movimento. */
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .carriera-filigrana {
    translate: none;
    opacity: 0.68;
  }
}




/* ==========================================================================
   MODULI A ROTAZIONE — AGENDA E SPONSOR DELL'EDIZIONE (v4)
   Generati da tools/build_moduli.py da data/edizioni/AAAA.json.
   Linguaggio visivo identico a carriera/giuria/podio.
   Il movimento scroll-driven usa le stesse variabili CSS della carriera.
   ========================================================================== */

/* ── AGENDA ──────────────────────────────────────────────────────────────── */

.agenda {
  --gold: #D4AF37;
  --gold-lt: #F5E096;
  --gold-dp: #8a6d1c;
  --cream: #f4f2ee;
  background: #0d0305;
  height: auto;
  padding: clamp(8rem, 14vh, 16rem) clamp(2rem, 5vw, 6rem);
  overflow: hidden;
}

.agenda *,
.agenda *::before,
.agenda *::after { box-sizing: border-box; }

.agenda-header {
  max-width: 132rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  margin-bottom: clamp(3rem, 7vh, 6rem);
}

.agenda-eyebrow,
.sponsor-eyebrow {
  font-family: "Tenor Sans", sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin: 0 0 1.5rem;
}

.agenda-title,
.sponsor-title {
  font-family: "PP Eiko", serif;
  font-weight: 100;
  font-size: clamp(3.6rem, 9vw, 8rem);
  line-height: 1.05;
  color: var(--cream);
  text-transform: none;
  margin: 0;
}

.agenda-lede {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.5;
  color: rgba(244, 242, 238, 0.74);
  max-width: 52ch;
  margin: 2rem 0 0;
}

.agenda-lista {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 132rem;
}

/* Entrata in scena dell'header: la sezione arriva e l'intestazione
   si dischiude dal basso con un leggero risalire. */
.agenda-header {
  translate: 0 calc((1 - var(--apertura, 1)) * 2rem);
  opacity: var(--apertura, 1);
}

/* Ogni voce entra di lato quando raggiunge il campo visivo: la prima
   scorre da sinistra, la seconda da destra, come due pagine di un libro. */
.agenda-voce {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  padding: clamp(4rem, 7vh, 7rem) 1.5rem;
  border-top: 1px solid rgba(212, 175, 55, 0.18);
  opacity: 0;
  will-change: transform, opacity;
}

.agenda-voce.is-visible:nth-child(odd) {
  animation: entra-sinistra 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.agenda-voce.is-visible:nth-child(even) {
  animation: entra-destra 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes entra-sinistra {
  from { opacity: 0; transform: translateX(-100px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes entra-destra {
  from { opacity: 0; transform: translateX(100px); }
  to { opacity: 1; transform: translateX(0); }
}


.agenda-voce > * {
  translate: 0 calc((1 - var(--apertura, 1)) * 3rem);
}

.agenda-voce:last-child {
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}

/* Spazio per le foto delle tappe: cornice dorata a tratteggio,
   sostituibile con un'immagine reale mettendo un <img> dentro. */
.agenda-voce-foto {
  margin: 0;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(212, 175, 55, 0.4);
  background:
    linear-gradient(rgba(212, 175, 55, 0.04), rgba(212, 175, 55, 0.04)),
    repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.03) 0 1px, transparent 1px 12px);
  padding: 1rem;
  text-align: center;
}

/* Con la fotografia vera la cornice tratteggiata (che segnalava il posto
   vuoto) sparisce: resta un filo d'oro sottile, coerente col resto. */
.agenda-voce-foto--piena {
  border: 1px solid rgba(212, 175, 55, 0.28);
  background: none;
  padding: 0;
  overflow: hidden;
}

.agenda-voce-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
}

.agenda-voce-foto-label {
  font-family: "Tenor Sans", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(212, 175, 55, 0.55);
}

/* Le righe pari ribaltano: testo a destra, foto a sinistra */
.agenda-voce:nth-child(even) .agenda-voce-foto {
  order: -1;
}

/* Filigrana del prossimo evento, in deriva col passaggio inquadratura */
.agenda-voce--prima .agenda-filigrana {
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 calc(-50% + var(--deriva-filigrana, 0px));
  color: rgba(212, 175, 55, 0.08);
  font-family: "PP Eiko", serif;
  font-weight: 100;
  font-size: clamp(11rem, 26vw, 26rem);
  line-height: 1;
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
  will-change: translate;
}

.agenda-voce-data {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 1rem;
  translate: 0 var(--deriva-data, 0px);
  will-change: translate;
}

/* Il numero del giorno usa la firma del sito: contorno oro, interno vuoto */
.agenda-data-giorno {
  font-family: "PP Eiko", serif;
  font-weight: 100;
  font-size: clamp(6rem, 12vw, 10rem);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212, 175, 55, 0.7);
  letter-spacing: 0.01em;
}

.agenda-data-mese {
  font-family: "Tenor Sans", sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dp);
  margin-top: 0.4rem;
}

.agenda-data-anno {
  font-family: "Tenor Sans", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.15em;
  color: rgba(212, 175, 55, 0.4);
  margin-top: 0.6rem;
}

.agenda-voce-corpo {
  position: relative;
  z-index: 1;
}

.agenda-voce-tag {
  display: inline-block;
  font-family: "Tenor Sans", sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(212, 175, 55, 0.45);
  padding: 0.4rem 1rem;
  border-radius: 0.3rem;
  margin-bottom: 1.6rem;
}

.agenda-voce-nome {
  font-family: "Bodoni Moda", serif;
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  line-height: 1.1;
  color: var(--cream);
  margin: 0 0 1.2rem;
  text-transform: none;
}

.agenda-voce:not(.agenda-voce--prima) .agenda-voce-nome {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  color: rgba(244, 242, 238, 0.82);
}

.agenda-voce-luogo {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.5;
  color: rgba(244, 242, 238, 0.72);
  margin: 0;
}

.agenda-voce-ora {
  font-family: "Tenor Sans", sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: var(--gold-lt);
  margin: 0.8rem 0 0;
}

.agenda-voce-note {
  font-family: "Tenor Sans", sans-serif;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--gold);
  margin: 1.4rem 0 0;
  padding-left: 1.2rem;
  border-left: 2px solid rgba(212, 175, 55, 0.45);
}

.agenda-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  min-height: 5.2rem;
  width: fit-content;
  padding: 1.4rem 3.4rem;
  margin: 4rem auto 0;
  font-family: "Syne", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 1.1rem;
  color: #0d0305;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 100px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms cubic-bezier(0.16, 1, 0.3, 1), transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.agenda-cta:hover,
.agenda-cta:focus-visible {
  background: var(--gold-lt);
  border-color: var(--gold-lt);
  color: #0d0305;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -12px rgba(212, 175, 55, 0.55);
}

.agenda-cta:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .agenda-voce {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 3rem 1rem;
  }
  .agenda-voce--prima .agenda-filigrana {
    display: none;
  }
  .agenda-voce:nth-child(even) .agenda-voce-foto {
    order: 0;
  }
  .agenda-voce-foto {
    aspect-ratio: 16 / 10;
  }
  .agenda-cta {
    width: 100%;
    margin-top: 2.4rem;
  }
}


/* ── SPONSOR — IL MURO DEI PARTNER ──────────────────────────────────────── */

.sponsor {
  --gold: #D4AF37;
  --gold-lt: #F5E096;
  --gold-dp: #8a6d1c;
  --cream: #f4f2ee;
  background: #080808;
  height: auto;
  padding: clamp(8rem, 14vh, 16rem) 0;
  overflow: hidden;
}

.sponsor-header {
  max-width: 132rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  margin-bottom: clamp(3rem, 7vh, 6rem);
}

/* Due file di loghi che si rincorrono in direzioni opposte: la sezione
   resta piena fino in fondo, nessun vuoto nero sotto. */
.sponsor-scena {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  overflow: hidden;
}

.sponsor-fila {
  display: flex;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
}

.sponsor-fila {
  animation: sponsor-scorrere 52s linear infinite;
}

.sponsor-gruppo {
  display: flex;
  align-items: stretch;
  gap: 1.4rem;
  padding-right: 1.4rem;
}

/* Ogni chip riporta il logo nei colori originali: chi lo riconosce lo
   riconosce davvero, e chi non lo conosce lo vede. */
.sponsor-card,
.sponsor-card-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15rem;
  height: 7rem;
  flex-shrink: 0;
  background: var(--cream);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 0.5rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.35);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sponsor-card:hover,
.sponsor-card-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, 0.5);
  background: #fbfaf7;
}

/* Loghi bianchi (Mytilus): chip scura per rispettare il brand */
.sponsor-card--scuro,
.sponsor-card-link--scuro {
  background: #0d0305;
  border-color: rgba(212, 175, 55, 0.35);
}

.sponsor-card--scuro:hover,
.sponsor-card-link--scuro:hover {
  background: #14060a;
}

.sponsor-card img,
.sponsor-card-link img {
  max-width: 78%;
  max-height: 62%;
  object-fit: contain;
  filter: none;
}

/* Loghi opachi (sfondo bianco) si fondono con la chip crema */
.sponsor-card--multiply img,
.sponsor-card-link--multiply img {
  mix-blend-mode: multiply;
}

.sponsor-card--scuro img,
.sponsor-card-link--scuro img {
  filter: brightness(0) invert(1);
}

.sponsor-nome {
  font-family: "Tenor Sans", sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a1a1a;
}

.sponsor-chiusura {
  max-width: 132rem;
  margin: clamp(3rem, 6vh, 5rem) auto 0;
  padding: 0 1.5rem;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.5;
  color: rgba(244, 242, 238, 0.6);
  text-align: center;
}

/* -33.333% = una copia esatta dei tre gruppi emessi dal build. */
@keyframes sponsor-scorrere {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-33.3333%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .sponsor-fila {
    animation: none;
  }
  /* fermo il nastro le copie sarebbero doppioni visibili: ne resta una */
  .sponsor-fila .sponsor-gruppo + .sponsor-gruppo { display: none; }
  .sponsor-scena {
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
  }
  .sponsor-gruppo {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .sponsor-scena {
    gap: 1.2rem;
  }
  /* Su mobile le due file continuano a scorrere in direzioni opposte,
     come su desktop: il giro non si ferma ne' si impila. */
  .sponsor-card,
  .sponsor-card-link {
    width: 9.5rem;
    height: 5.2rem;
  }
  .sponsor-gruppo {
    gap: 0.9rem;
    padding-right: 0.9rem;
  }
}


/* ==========================================================================
   RIMANDI ALLE PAGINE INTERNE
   Le sezioni della home raccontano; le pagine approfondiscono. Questo e' il
   ponte fra le due: un link discreto in coda alla sezione, non un bottone che
   compete con la candidatura.
   ========================================================================== */
.rimando {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 3.2rem;
  font-family: "Tenor Sans", sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: #D4AF37;
  transition: color .35s ease, gap .35s ease;
}
.rimando::after {
  content: "";
  width: 3.2rem;
  height: 1px;
  background: currentColor;
  transition: width .35s ease;
}
.rimando:hover { color: #F5E096; gap: 1.8rem; }
.rimando:hover::after { width: 4.8rem; }
.rimando-riga {
  max-width: 132rem;
  margin: 0 auto;
  padding: 0 2.4rem 8rem;
  text-align: center;
}