/* =========================================================================
   BASE — sostituisce il reset che prima arrivava con Bootstrap.
   Bootstrap veniva scaricato (circa 230 KB di CSS più 80 KB di JavaScript
   sulla home) per tre sole classi che riscriviamo comunque qui sotto:
   .navbar, .navbar-light e .bg-light. Ora non serve più.
   ========================================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: "Libre Bodoni", Georgia, "Times New Roman", serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img,
video {
    max-width: 100%;
}

button,
input,
textarea {
    font: inherit;
    color: inherit;
}

.hero-slideshow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: -2;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;
}

.slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Scatti verticali in cui il soggetto sta più in basso: il taglio scende,
   così la figura entra nell'inquadratura invece di restare tagliata sotto. */
.slide-img--lower {
    object-position: center 28%;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
}
body {
    margin: 0;
    min-height: 100vh;
    background-color: #232121;
}
.navbar {
    /* display e allineamento arrivavano da Bootstrap: ora sono espliciti */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    padding: 1rem 0;
}


.navbar-nav-custom {
    display: flex;
    /* Menu e logo condividono lo stesso asse: entrambi occupano la larghezza
       piena e centrano il proprio contenuto, così restano allineati fra loro
       qualunque cosa cambi attorno. */
    width: 100%;
    justify-content: center;
    gap: 4rem;
    list-style: none;
    margin: 0.5rem 0 0 0;
    padding: 0;
    font-family:"Bodoni Moda", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.navbar-nav-custom a {
    color:#F7F1E7;
    text-shadow: 0 20 20px black;
    text-decoration: none;
    font-weight: 500;
    font-size: 21px;
    letter-spacing: 0.05em;
    display: inline-block;
    transition: transform 0.25s ease,  color 0.25s ease;
}

.navbar-nav-custom a:hover {
    transform: scale(1.15);
    color: #f49b00; /* oro più scuro all'hover */
}
.navbar-nav-custom a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: currentColor; /* o un colore specifico, es. #d4af37 per un oro */
    transition: width 0.3s ease;
}

.navbar-nav-custom a:hover::after {
    width: 100%;
}
/* Sfondo della navbar (prima arrivava dalla classe Bootstrap .bg-light) */
.navbar {
    background-color: rgba(110, 110, 110, 0.4);
}

body.page-2 {
    margin: 0;
    min-height: 100vh;
    background-color: #000000;
    background-image:
            radial-gradient(at 15% 20%, rgb(0, 0, 0) 0%, #0000 55%), radial-gradient(at 85% 10%, rgb(0, 0, 0) 0%, #0f0f0f00 55%), radial-gradient(at 10% 80%, rgba(0, 0, 0, 0.47) 0%, #0000 50%), radial-gradient(at 90% 85%, rgba(173, 173, 173, 0.21) 0%, black 50%), linear-gradient(135deg, #6b6b6e 0%, #0000 40%, #1f1f2000 70%, #000 100%);

    background-attachment: fixed;

}
.page-2 .navbar {
    background: linear-gradient(
            135deg,
            rgba(255,255,255,0.25) 0%,
            rgba(255,255,255,0.08) 50%,
            rgba(0,0,0,0.05) 100%
    );
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 4px 30px rgba(0,0,0,0.05);
}
.bodoni-moda-title {
    font-family: "Bodoni Moda", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
.logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem; /* distanza tra chitarra e scritta - replica il gap dell'originale */
}

.logo-symbol {
    height: 76px; /* altezza di riferimento - regola in base allo spazio navbar */
    width: auto;
}

.logo-container {
    text-align: center;
    font-family: 'Cinzel', 'Times New Roman', Times, serif;
    user-select: none;
}

/* Prima riga: DAVIDE PICCI */
.logo-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.3em; /* Ampia spaziatura tra le lettere */
    text-transform: uppercase;

    /* Sfumatura dorata */
    background: linear-gradient(180deg, #ffd700 0%, #e6a100 50%, #b8860b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Contorno chiarissimo: stacca il testo dallo sfondo senza indurirlo */
    -webkit-text-stroke: 0.2px #978a8a;

    /* Piccola ombra opzionale per dare definizione */
    filter: drop-shadow(0px 1px 0px rgba(0,0,0,0.2));
}

/* Seconda riga: GUITARIST */
.logo-subtitle {
    display: block;
    margin-top: 7px;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.5em; /* Spaziatura ancora più ampia per bilanciare la larghezza */
    text-transform: uppercase;

    /* Sfumatura dorata */
    background: linear-gradient(180deg, #ffd700 0%, #e6a100 50%, #b8860b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Contorno chiarissimo, come il titolo */
    -webkit-text-stroke: 0.2px #978a8a;
}
.logo-link {
    display: block;
    width: 100%;
}

a.logo-link,
.logo-wrapper a {
    text-decoration: none !important;
    color: inherit;
}

a.logo-link:hover,
a.logo-link:focus,
a.logo-link:active,
.logo-wrapper a:hover {
    text-decoration: none !important;
    color: inherit;
}
/* =========================================================================
   INTESTAZIONE DI SEZIONE — usata da contacts.html e da media.html
   ========================================================================= */
.section-head {
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-eyebrow {
    display: block;
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: #c9a86a;
    margin-bottom: 1.1rem;
}

.section-title {
    font-family: "Cinzel", "Bodoni Moda", Georgia, serif;
    font-size: clamp(2.1rem, 4vw, 3.1rem);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0;

    background: linear-gradient(180deg, #ffd700 0%, #e6a100 50%, #b8860b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-subtitle {
    font-family: "Libre Bodoni", Georgia, serif;
    font-size: 0.98rem;
    line-height: 1.8;
    color: #D6D3CC;
    max-width: 620px;
    margin: 1.2rem auto 0;
}

.section-rule {
    width: 70px;
    height: 1px;
    margin: 2.2rem auto 0;
    background: linear-gradient(90deg, transparent, #D6A52A, transparent);
}

/* =========================================================================
   MEDIA — percorso unico di foto e video (media.html)
   Accento giallo zafferano sull'impianto nero e oro del sito.
   ========================================================================= */

:root {
    --saffron: #F4C430;
    --saffron-soft: rgba(244, 196, 48, 0.55);
    --saffron-faint: rgba(244, 196, 48, 0.16);
    --ink: #0a0908;
    --cream: #D6D3CC;
    --ash: #8f877c;
}

/* La pagina Media è tutta a filo pagina: niente gutter dal body */
.media-page { overflow-x: hidden; }

/* Navbar sovrapposta all'apertura, senza fondo proprio */
.page-2 .navbar.navbar-media,
.navbar-media {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
}

.navbar-nav-custom a.is-current { color: var(--saffron); }

/* -------------------------------------------------------------------------
   APERTURA
   ------------------------------------------------------------------------- */
.media-hero {
    position: relative;
    height: 100vh;
    min-height: 420px;
    overflow: hidden;

    /* Lo spazio in alto è riservato alla navbar, che è sovrapposta e ha
       altezza propria: site.js misura quell'altezza e la scrive in
       --nav-space, così su schermi bassi (telefono in orizzontale, schermi
       piccoli) il titolo si ferma sotto il menu invece di finirci sopra. */
    padding-top: var(--nav-space, 240px);
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
}

.media-hero-stage {
    position: absolute;
    inset: 0;
    background: #0b0a09;
}

.media-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Solo video: finché non parte resta il fondo scuro, poi entra in dissolvenza. */
.media-hero-video {
    opacity: 0;
    transition: opacity 1.4s ease;
}

.media-hero-video.is-playing { opacity: 1; }
.media-hero-video.is-missing { display: none; }

/* Velo: scurisce in alto per la navbar e sfuma nel nero della sequenza */
.media-hero-veil {
    position: absolute;
    inset: 0;
    background:
            linear-gradient(to bottom,
            rgba(8, 8, 8, 0.72) 0%,
            rgba(8, 8, 8, 0.25) 32%,
            rgba(8, 8, 8, 0.55) 70%,
            #000 100%);
}

.media-hero-content {
    position: relative;
    z-index: 2;

    /* Spinge il blocco in fondo all'apertura, ma quando lo spazio non basta
       il margine si annulla invece di far sbordare il testo sopra il menu
       (cosa che "justify-content: flex-end" farebbe). */
    margin-top: auto;
    margin-inline: auto;   /* non "margin: 0 auto": annullerebbe il margin-top */
    width: 100%;
    max-width: 1320px;
    padding: 0 clamp(1.2rem, 5vw, 4rem) clamp(7rem, 16vh, 11rem);
}

.media-hero-title {
    font-family: "Cinzel", "Bodoni Moda", Georgia, serif;
    font-size: clamp(3rem, 9vw, 7rem);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
    margin: 0.4rem 0 0;

    background: linear-gradient(180deg, #ffe27a 0%, var(--saffron) 45%, #b8860b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.media-hero-lede {
    font-family: "Libre Bodoni", Georgia, serif;
    font-size: clamp(0.95rem, 1.4vw, 1.1rem);
    line-height: 1.9;
    color: var(--cream);
    max-width: 520px;
    margin: 1.6rem 0 0;
}

.media-hero .section-eyebrow {
    display: block;
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--saffron);
}

/* Invito allo scorrimento */
.media-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 2.4rem;
    z-index: 3;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    text-decoration: none;
}

.cue-label {
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--ash);
}

.cue-line {
    width: 1px;
    height: 64px;
    background: linear-gradient(to bottom, var(--saffron), transparent);
    transform-origin: top;
    animation: cueSlide 2.6s ease-in-out infinite;
}

@keyframes cueSlide {
    0%, 100% { transform: scaleY(0.35); opacity: 0.4; }
    50%      { transform: scaleY(1);    opacity: 1; }
}

/* -------------------------------------------------------------------------
   LA SEQUENZA
   ------------------------------------------------------------------------- */
.media-flow {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: clamp(1rem, 2.2vw, 2.2rem);
    row-gap: clamp(3.5rem, 7vw, 7.5rem);
    max-width: 1520px;
    margin: 0 auto;
    padding: clamp(5rem, 11vw, 10rem) clamp(1.2rem, 4vw, 3.5rem) clamp(6rem, 12vw, 11rem);
}

.media-item {
    position: relative;
    margin: 0;
    cursor: pointer;
}

/* --- respiri e formati --- */
.media-item.is-full     { grid-column: 1 / -1; }
.media-item.is-wide     { grid-column: 2 / span 10; }
.media-item.is-half     { grid-column: span 6; }
.media-item.is-portrait { grid-column: 2 / span 5; }
.media-item.is-portrait.is-right { grid-column: 8 / span 5; }
.media-item.is-portrait.is-centre { grid-column: 5 / span 4; }

.media-item.is-offset { margin-top: clamp(2rem, 7vw, 7rem); }

.media-frame {
    position: relative;
    overflow: hidden;
    background: #100e0c;
    aspect-ratio: 3 / 2;
}

.media-item.is-full .media-frame     { aspect-ratio: 2 / 1; }
.media-item.is-wide .media-frame     { aspect-ratio: 16 / 9; }
.media-item.is-portrait .media-frame { aspect-ratio: 3 / 4; }
.media-item.is-video .media-frame    { aspect-ratio: 16 / 9; }
.media-item.is-video.is-half .media-frame { aspect-ratio: 16 / 9; }

.media-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* i soggetti stanno nella metà alta dello scatto: il taglio parte da lì,
       così la testa non finisce mai fuori. Si corregge caso per caso con
       "focus" in media.js. */
    object-position: 50% 30%;
    display: block;
    filter: saturate(0.9) brightness(0.9);
    transition: filter 0.6s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Le fasce a tutta larghezza e i verticali scorrono in parallasse:
   l'immagine è sovradimensionata e viene mossa da media.js. */
.media-item.is-full .media-frame img,
.media-item.is-portrait .media-frame img {
    transform: scale(1.08);
    will-change: transform;
}

/* Cornice sottile che si accende all'avvicinarsi */
.media-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    transition: border-color 0.45s ease;
    pointer-events: none;
}

.media-item:hover .media-frame::after,
.media-item:focus-visible .media-frame::after {
    border-color: var(--saffron-soft);
}

.media-item:hover .media-frame img,
.media-item:focus-visible .media-frame img {
    filter: saturate(1.02) brightness(1);
}

.media-item.is-half:hover .media-frame img,
.media-item.is-wide:hover .media-frame img,
.media-item.is-video:hover .media-frame img {
    transform: scale(1.04);
}

/* --- pulsante di riproduzione --- */
.media-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(58px, 6vw, 86px);
    height: clamp(58px, 6vw, 86px);
    transform: translate(-50%, -50%);
    border: 1px solid var(--saffron-soft);
    border-radius: 50%;
    background: rgba(10, 9, 8, 0.32);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition: transform 0.4s ease, background 0.4s ease, border-color 0.4s ease;
}

.media-play::before {
    content: '';
    position: absolute;
    inset: -14px;
    border: 1px solid var(--saffron-faint);
    border-radius: 50%;
}

.media-play::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 17px;
    border-color: transparent transparent transparent var(--saffron);
}

.media-item:hover .media-play,
.media-item:focus-visible .media-play {
    transform: translate(-50%, -50%) scale(1.09);
    background: rgba(244, 196, 48, 0.16);
    border-color: var(--saffron);
}

.media-item.is-pending .media-play { opacity: 0.4; }

/* --- didascalie --- */
.media-caption {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.15rem 0 0;
}

.media-kind {
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 0.58rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--saffron);
}

.media-title {
    font-family: "Bodoni Moda", Georgia, serif;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    letter-spacing: 0.05em;
    color: #F0EAE0;
}

.media-meta {
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ash);
}

/* --- pausa tipografica fra i blocchi --- */
.media-note {
    grid-column: 3 / span 8;
    text-align: center;
    padding: clamp(1rem, 4vw, 3rem) 0;
}

.media-note-rule {
    display: block;
    width: 1px;
    height: clamp(48px, 7vw, 86px);
    margin: 0 auto 2rem;
    background: linear-gradient(to bottom, transparent, var(--saffron), transparent);
}

.media-note p {
    font-family: "Libre Bodoni", Georgia, serif;
    font-style: italic;
    font-size: clamp(1.05rem, 2vw, 1.6rem);
    line-height: 1.8;
    color: #C9C2B6;
    margin: 0;
}

/* --- comparsa progressiva --- */
.reveal {
    opacity: 0;
    transform: translateY(44px);
    transition: opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* --- filo di avanzamento --- */
.media-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.06);
    z-index: 900;
}

.media-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #b8860b, var(--saffron));
    transform: scaleX(0);
    transform-origin: left;
}

/* -------------------------------------------------------------------------
   VISORE UNICO
   ------------------------------------------------------------------------- */
.media-viewer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(5, 5, 5, 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
}

.media-viewer.active { display: flex; }

.media-viewer-body {
    width: min(1180px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.media-viewer-stage {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-viewer-stage.is-video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid rgba(244, 196, 48, 0.24);
}

.media-viewer-stage.is-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.media-viewer-stage.is-photo img {
    max-width: 100%;
    max-height: 72vh;
    object-fit: contain;
    border: 1px solid rgba(244, 196, 48, 0.24);
}

.media-viewer-caption {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.4rem;
    text-align: center;
}

.viewer-kind {
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 0.58rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--saffron);
}

.viewer-title {
    font-family: "Bodoni Moda", Georgia, serif;
    font-size: 1.15rem;
    letter-spacing: 0.05em;
    color: #F0EAE0;
}

.viewer-meta {
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ash);
}

.viewer-counter {
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.3em;
    color: #857d71;   /* contrasto 4.9:1 sul fondo scuro — prima 3.6:1 */
    margin-top: 0.3rem;
}

.media-viewer-close,
.media-viewer-arrow {
    position: absolute;
    background: none;
    border: none;
    color: var(--saffron);
    cursor: pointer;
    line-height: 1;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.media-viewer-close {
    top: clamp(1rem, 3vw, 2rem);
    right: clamp(1rem, 3vw, 2.5rem);
    font-size: 2.4rem;
}

.media-viewer-close:hover { transform: scale(1.15); }

.media-viewer-arrow {
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.8rem;
    padding: 0 1rem;
}

.media-viewer-arrow:hover { transform: translateY(-50%) scale(1.2); }
.media-viewer-arrow.is-prev { left: clamp(0.2rem, 2vw, 1.5rem); }
.media-viewer-arrow.is-next { right: clamp(0.2rem, 2vw, 1.5rem); }

/* -------------------------------------------------------------------------
   ADATTAMENTI
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .media-item.is-wide     { grid-column: 1 / -1; }
    .media-item.is-portrait,
    .media-item.is-portrait.is-right { grid-column: span 6; }
    .media-item.is-portrait.is-centre { grid-column: 4 / span 6; }
    .media-note { grid-column: 2 / span 10; }
}


@media (prefers-reduced-motion: reduce) {
    .media-hero-still { animation: none; }
    .cue-line { animation: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .media-frame img { transition: none; }
}

.bio-section {

        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
        padding: clamp(3rem, 7vw, 6rem) 6%;

}


/* seconda sezione:
   FOTO SINISTRA — TESTO DESTRA */
.bio-section-reverse {
    flex-direction: row;
}

.bio-section-reverse .photo-left {
    order: 1;
}

.bio-section-reverse .bio-text {
    order: 2;
}

.bio-text::before {
    content: "";
    display: block;
    width: 55px;
    height: 1px;
    background: #D6A52A;
    margin-bottom: 28px;
}
.bio-text {
    flex: 1;
    font-family: "Libre Bodoni", serif;
        font-weight: 400;
        font-style: normal;
    font-size: 15px;
    line-height: 1.8;
    max-width: 600px;
    text-align: justify;
    z-index: 2;
    margin-bottom: 0;
position: relative;
    width: 100%;
}

.bio-text h2 {
    color: #E5B02B;
    margin-bottom: 1.5rem;
}

.bio-text p {
    line-height: 1.7;
    color: #D6D3CC;
    -webkit-background-clip: text;
    background-clip: text;
    margin-bottom: 1.5rem;
}

.bio-text .highlight {
    color: #D6A52A;
}

.photo-right,
.photo-left {
    /* Cornice verticale più stretta della foto: così c'è margine per
       spostare il taglio e portare il soggetto al centro. */
    width: min(100%, 440px);
    height: clamp(480px, 70vh, 700px);
    margin-inline: auto;
    overflow: hidden;
    position: relative; /* Fondamentale per contenere l'immagine assoluta */

    mask-image: radial-gradient(
            circle at 50% 42%,
            rgba(0,0,0,1) 0%,
            rgba(0,0,0,1) 42%,
            rgba(0,0,0,0) 88%,
            rgba(0,0,0,0) 100%
    );
    -webkit-mask-image: radial-gradient(
            circle at 50% 42%,
            rgba(0,0,0,1) 0%,
            rgba(0,0,0,1) 42%,
            rgba(0,0,0,0) 88%,
            rgba(0,0,0,0) 100%
    );
}

.photo-right img,
.photo-left img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    /* L'immagine riempie la cornice invece di scorrere fuori dall'alto:
       il soggetto resta dentro, leggermente sopra la mezzeria. */
    object-fit: cover;
    object-position: 50% 55%;
}

/* Le due foto della bio hanno il soggetto fuori asse: qui si riporta
   al centro della cornice, una per una. */
#photo-box-1 img { object-position: 80% 60%; }
#photo-box-2 img { object-position: 30% 58%; }


.event{
    background-color: #1e2229; /* Grigio antracite corporate/business */
    width: 100%;
    padding: 60px 0;
opacity: 0.9;
}

/* Griglia interna a 3 colonne */
.events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 50px;
    row-gap: 60px;
    padding: 0 40px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    max-width: 1200px;
    margin: 0 auto; /* Centra la griglia dentro l'antracite */
}

/* Solo scritte: nessun quadrato o bordo intorno ai testi */
.event-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Colori delle scritte (tonalità di bianco e grigio chiaro) */
.date-time {
    font-size: 18px;
    color: #d1c4b6; /* Tortora chiaro luminoso */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.location {
    font-size: 13px;
    color: #9ca3af; /* Grigio chiaro pulito */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.title {
    font-size: 16px;
    color: #ffffff; /* Bianco puro per far risaltare il titolo */
    text-decoration: underline;
    text-decoration-color: #4b5563; /* Linea di sottolineatura discreta */
}

.description {
    font-size: 15px;
    color: #e5e7eb; /* Bianco sporco molto leggibile */
    line-height: 1.4;
}

.artists {
    font-size: 15px;
    color: #9ca3af; /* Grigio chiaro per il corsivo degli artisti */
    font-style: italic;
    line-height: 1.4;
}

/* Layout responsive per smartphone */

/* Contenitore dei social */
.site-footer {
    background-color: #262626; /* Grigio Antracite */
    color: #e0e0e0;
    padding: 35px 20px;
    text-align: center;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Stile icone social */
.social-links {
    display: flex;
    gap: 20px;
}

.social-links a {
    color: #ffffff;
    font-size: 26px;
    transition: transform 0.3s ease, color 0.3s ease;
    text-decoration: none;
}

/* Effetto al passaggio del mouse sulle icone */
.social-links a:hover {
    color: #00a8ff;
    transform: translateY(-3px);
}

/* Stile Copyright */
.copyright {
    font-size: 14px;
    letter-spacing: 0.5px;
}

.copyright p {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.copyright a {
    display: inline-flex;
    align-items: center;
}

.copyright img {
    width: 40px;
    height: auto;
    transition: opacity 0.3s ease;
}

.copyright img:hover {
    opacity: 0.8;
}
.dropdown {
    position: relative;
}

.dropdown-btn {
    display: flex;
    align-items: center;
    gap: 6px;
}

.arrow {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.dropdown-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    letter-spacing: 0.5px;
    color: #e8e0d0;
    padding: 6px 0;
    position: relative;
}

.dropdown-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: #c9a86a;
    transition: width 0.3s ease;
}

.dropdown:hover .dropdown-btn::after {
    width: 100%;
}

.arrow {
    font-size: 10px;
    color: #c9a86a;
    transition: transform 0.3s ease;
}

.dropdown:hover .arrow {
    transform: rotate(180deg);
}

.dropdown-content {
    position: absolute;
    top: 140%;
    left: 50%;
    transform: translate(-50%, -8px);
    list-style: none;
    margin: 0;
    padding: 8px 0;
    background: #1a1a1a;
    border: 1px solid #c9a86a55;
    min-width: 180px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
    border-radius: 2px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.dropdown-content li a {
    display: block;
    padding: 12px 24px;
    color: #e8e0d0;
    text-decoration: none;
    font-size: 21px;
    letter-spacing: 0.3px;
    text-align: center;
    transition: all 0.25s ease;
    border-left: 2px solid transparent;
    font-size: 17px;
}

.dropdown-content li a:hover {
    background: #242424;
    border-left: 2px solid #c9a86a;
    color: #c9a86a;
    padding-left: 28px;
}
/* =========================================================================
   NAVBAR RESPONSIVE — evita lo scorrimento orizzontale su tablet e telefono
   ========================================================================= */
@media (max-width: 900px) {
    .navbar-nav-custom {
        gap: 2.5rem;
        flex-wrap: wrap;
        padding: 0 1rem;
    }

    .navbar-nav-custom a { font-size: 21px; }
}


/* =========================================================================
   CONTATTI (contacts.html)
   ========================================================================= */
.contacts-wrapper {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.2rem, 4vw, 3rem) clamp(5rem, 10vw, 8rem);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-bottom: clamp(3.5rem, 8vw, 6rem);
}

.contact-card {
    position: relative;
    padding: clamp(1.6rem, 3vw, 2.4rem);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(201, 168, 106, 0.18);
    transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s ease;
}

.contact-card:hover {
    border-color: var(--saffron-soft);
    background: rgba(244, 196, 48, 0.04);
    transform: translateY(-3px);
}

.contact-kind {
    display: block;
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 0.58rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--saffron);
    margin-bottom: 1rem;
}

.contact-name {
    font-family: "Bodoni Moda", Georgia, serif;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #F0EAE0;
    margin: 0 0 0.5rem;
}

.contact-role {
    font-family: "Libre Bodoni", Georgia, serif;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--cream);
    margin: 0 0 1.4rem;
}

.contact-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.contact-lines li,
.contact-lines a,
.contact-lines span {
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    color: var(--ash);
    text-decoration: none;
}

.contact-lines a {
    color: #cbbf9f;
    border-bottom: 1px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.contact-lines a:hover {
    color: var(--saffron);
    border-bottom-color: var(--saffron-soft);
}

/* ----- parte bassa: modulo + colonna laterale ----- */
.contact-lower {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.contact-subtitle {
    font-family: "Cinzel", "Bodoni Moda", Georgia, serif;
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--saffron);
    margin: 0 0 1.8rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.field-label {
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ash);
}

.field input,
.field textarea {
    width: 100%;
    /* esplicito: senza, il riempimento si somma alla larghezza e il modulo
       sborda dallo schermo se il CSS esterno non viene caricato */
    box-sizing: border-box;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(201, 168, 106, 0.2);
    border-radius: 0;
    color: #F0EAE0;
    font-family: "Libre Bodoni", Georgia, serif;
    font-size: 0.95rem;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.field textarea { resize: vertical; min-height: 130px; }

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--saffron);
    background: rgba(244, 196, 48, 0.05);
}

.contact-submit {
    align-self: flex-start;
    margin-top: 0.4rem;
    padding: 0.85rem 2.6rem;
    background: transparent;
    border: 1px solid var(--saffron-soft);
    color: var(--saffron);
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.contact-submit:hover {
    background: var(--saffron);
    border-color: var(--saffron);
    color: #100d08;
}

.contact-feedback {
    margin: 0;
    min-height: 1.2em;
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.contact-feedback.is-ok { color: var(--saffron); }
.contact-feedback.is-error { color: #d98b6a; }

.contact-aside {
    border-left: 1px solid rgba(201, 168, 106, 0.16);
    padding-left: clamp(1.4rem, 3vw, 2.6rem);
}

.contact-social {
    list-style: none;
    margin: 0 0 2.6rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.contact-social a {
    font-family: "Bodoni Moda", Georgia, serif;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    color: #E5E0D6;
    text-decoration: none;
    transition: color 0.25s ease, padding-left 0.25s ease;
}

.contact-social a:hover {
    color: var(--saffron);
    padding-left: 8px;
}

.contact-based p {
    font-family: "Libre Bodoni", Georgia, serif;
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--cream);
    margin: 0;
}

.contact-home-link {
    display: inline-block;
    margin-top: 2.6rem;
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--saffron);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease;
}

.contact-home-link:hover { border-bottom-color: var(--saffron-soft); }

/* =========================================================================
   COMANDI: TORNA SU / TORNA ALLA HOME
   ========================================================================= */
.home-dock {
    position: fixed;
    right: clamp(1rem, 2.5vw, 2rem);
    bottom: clamp(1rem, 2.5vw, 2rem);
    z-index: 950;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;

    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}

.home-dock.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.home-dock-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 54px;
    height: 54px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(244, 196, 48, 0.35);
    background: rgba(14, 12, 10, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--saffron);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.home-dock-btn:hover,
.home-dock-btn:focus-visible {
    background: rgba(244, 196, 48, 0.16);
    border-color: var(--saffron);
    color: var(--saffron);
    transform: translateY(-2px);
}

.dock-label {
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 0.44rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: inherit;
}

.dock-icon {
    display: block;
    width: 13px;
    height: 13px;
}

/* freccia in su */
.dock-arrow {
    border-left: 1.5px solid currentColor;
    border-top: 1.5px solid currentColor;
    transform: rotate(45deg) translate(2px, 2px);
    width: 11px;
    height: 11px;
}

/* casetta */
.dock-house {
    position: relative;
    width: 15px;
    height: 13px;
}

.dock-house::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 10px;
    height: 10px;
    transform: translateX(-50%) rotate(45deg);
    border-top: 1.5px solid currentColor;
    border-left: 1.5px solid currentColor;
}

.dock-house::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 11px;
    height: 7px;
    transform: translateX(-50%);
    border: 1.5px solid currentColor;
    border-top: none;
}

/* =========================================================================
   SCHERMI BASSI — telefono in orizzontale, finestre schiacciate
   Qui non conta la larghezza ma l'altezza: style-mobile.css non si attiva
   (un telefono in orizzontale è largo più di 768px) e la navbar, se resta
   alta, mangia tutta l'apertura.
   ========================================================================= */
@media (max-height: 560px) {
    .navbar { padding: 0.5rem 0 0.4rem; }
    .navbar-nav-custom { margin-top: 0.4rem; gap: 2rem; }
    .navbar-nav-custom a { font-size: 16px; }

    .logo-symbol { height: 46px; }
    .logo-title { font-size: 1rem; letter-spacing: 0.2em; }
    .logo-subtitle { font-size: 0.6rem; margin-top: 4px; letter-spacing: 0.34em; }

    .media-hero { min-height: 340px; }
    .media-hero-title { font-size: clamp(1.9rem, 7vw, 3rem); }
    .media-hero-content { padding-bottom: 1.6rem; }

    /* In orizzontale lo spazio non basta: restano occhiello e titolo */
    .media-hero-lede { display: none; }
    .media-scroll-cue { display: none; }
}

/* =========================================================================
   ELEMENTI TENUTI DA PARTE
   Restano nel codice ma non si vedono. Per rimetterne uno online basta
   togliere "is-hidden" dalla sua riga nell'HTML.
   ========================================================================= */
.is-hidden { display: none !important; }

/* =========================================================================
   ICONE SOCIAL — disegnate qui dentro, nessuna libreria esterna da caricare
   ========================================================================= */
.social-icon {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* Le parti piene (il triangolo del play, il punto di Instagram) */
.social-icon .solid {
    fill: currentColor;
    stroke: none;
}

/* Facebook è una sagoma piena */
.social-icon path[d^="M14.6"] {
    fill: currentColor;
    stroke: none;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Nella colonna "Elsewhere" l'icona sta accanto al nome */
.contact-social a {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}

.contact-social .social-icon {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--saffron);
    transition: transform 0.25s ease;
}

.contact-social a:hover .social-icon { transform: scale(1.12); }

/* Con una sola scheda visibile la griglia a due colonne lascerebbe un vuoto */
.contact-grid { align-items: start; }

/* Quando il modulo è tenuto da parte resta la sola colonna laterale:
   prende tutta la larghezza e perde il filetto di separazione, che
   altrimenti dividerebbe il nulla. */
.contact-lower:has(> .contact-form-side.is-hidden) {
    grid-template-columns: 1fr;
}

.contact-lower:has(> .contact-form-side.is-hidden) .contact-aside {
    border-left: none;
    padding-left: 0;
}

/* =========================================================================
   ACCESSIBILITÀ
   ========================================================================= */

/* Collegamento per saltare il menu: invisibile finché non lo si raggiunge
   col tasto Tab. Serve a chi naviga da tastiera o con un lettore di schermo,
   per non ripercorrere tutta la testata a ogni pagina. */
.skip-link {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -120%);
    z-index: 1200;
    padding: 0.8rem 1.6rem;
    background: var(--saffron);
    color: #100d08;
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: translate(-50%, 0);
}

/* Anello di messa a fuoco visibile ovunque si arrivi col tasto Tab.
   Compare solo per la tastiera, non al clic del mouse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--saffron);
    outline-offset: 3px;
}

/* Sugli elementi della sequenza l'anello segue la cornice */
.media-item:focus-visible {
    outline: 2px solid var(--saffron);
    outline-offset: 4px;
}

.home-dock-btn:focus-visible {
    outline: 2px solid var(--saffron);
    outline-offset: 3px;
}

/* Messaggio mostrato se i file dati non si caricano */
.events-error,
.media-data-error {
    grid-column: 1 / -1;
    font-family: "Libre Bodoni", Georgia, serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #b6ada0;
    text-align: center;
    margin: 0;
    padding: 2rem 1rem;
}

/* =========================================================================
   HOME — impalcatura attorno alla copertina fissa
   La copertina è in posizione fissa dietro alla pagina: serve qualcosa che
   spinga il contenuto sotto di essa, e che il piè di pagina resti in fondo
   anche quando non c'è nessuna data in programma.
   ========================================================================= */
.page-home {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.hero-spacer {
    height: 500px;
    flex-shrink: 0;
}

.page-home .site-footer {
    margin-top: auto;
}

/* =========================================================================
   DIDASCALIE DELLA GALLERIA — messe da parte
   -------------------------------------------------------------------------
   Titoli e sottotitoli sotto foto e video ("Recital", "Live · Concert Hall",
   "Composer — Title · Venue, Year") restano nei dati e nel codice, ma non si
   vedono: sono testi ancora provvisori.

   PER RIMETTERLI: cancella questo blocco, e tornano tutti.
   Restano comunque leggibili dai lettori di schermo, perché ogni blocco
   porta il proprio titolo nell'attributo aria-label.
   ========================================================================= */
.media-caption {
    display: none;
}

/* Anche nel visore a pieno schermo: stesso testo provvisorio.
   Il contatore (01 / 12) resta, perché serve a orientarsi. */
.media-viewer-caption .viewer-kind,
.media-viewer-caption .viewer-title,
.media-viewer-caption .viewer-meta {
    display: none;
}