:root{
  --ink: #10131A;
  --panel: #171B24;
  --panel-2: #1D2230;
  --brass: #C9A24B;
  --brass-dim: #8E7433;
  --velvet: #7A2E2C;
  --cream: #ECE6D6;
  --muted: #9A9890;
  --hairline: rgba(236,230,214,0.14);
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html{ scroll-padding-top: env(safe-area-inset-top, 0px); }
*{ box-sizing: border-box; }
html, body{ margin:0; background: var(--ink); color: var(--cream); }
body{
  font-family: 'Work Sans', Arial, sans-serif;
  line-height: 1.6;
}
h1, h2, h3{ font-family: 'Fraunces', Georgia, serif; font-weight: 600; line-height: 1.15; margin: 0 0 .6rem; }
h1{ font-size: clamp(2rem, 5vw, 3rem); }
h2{ font-size: clamp(1.5rem, 3.4vw, 2.1rem); color: var(--brass); }
h3{ font-size: 1.2rem; }
p{ margin: 0 0 1rem; }
a{ color: var(--brass); text-decoration: none; }
a:hover{ text-decoration: underline; }
img{ max-width: 100%; display:block; }

.wrap{ max-width: 1080px; margin: 0 auto; padding: 0 6vw; }

/* --- Nav --- */
header.site{
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; z-index: 20;
  background: rgba(16,19,26,0.92); backdrop-filter: blur(6px);
  padding-top: env(safe-area-inset-top, 0px);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding: 1rem 6vw; max-width:1080px; margin:0 auto; }
.nav .brand{ font-family:'Fraunces',serif; font-weight:600; font-size:1.15rem; color:var(--cream); }
.nav .brand span{ color: var(--brass); }
.nav .brand{ display:flex; align-items:center; gap:.6rem; }
.jns-mark{ display:block; flex-shrink:0; }
.social-links{ display:flex; gap:.7rem; margin:.6rem 0 .4rem; }
.social-links a{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; border:1px solid var(--hairline);
  color: var(--cream);
}
.social-links a:hover{ color: var(--brass); border-color: var(--brass); text-decoration:none; }
.jns-logo-full{ display:flex; align-items:center; gap:1.2rem; justify-content:center; margin-bottom:2rem; }
.jns-logo-text{ display:flex; flex-direction:column; text-align:left; line-height:1.05; }
.jns-word-jazz{ font-family:'Fraunces',serif; font-weight:600; font-size:2rem; color: var(--cream); }
.jns-word-network{ font-family:'Work Sans',sans-serif; font-weight:600; font-size:1.05rem; letter-spacing:.14em; color: var(--brass); text-transform:uppercase; }
.jns-tagline{ margin-top:.5rem; font-size:.8rem; letter-spacing:.04em; color: var(--muted); }
@media (max-width:600px){
  .jns-logo-full{ flex-direction:column; text-align:center; }
  .jns-logo-text{ align-items:center; text-align:center; }
}
.nav ul{ list-style:none; display:flex; gap:1.4rem; margin:0; padding:0; flex-wrap:wrap; }
.nav a{ color: var(--cream); font-size:.92rem; }
.nav a:hover{ color: var(--brass); text-decoration:none; }
.nav-toggle{ display:none; }

@media (max-width: 760px){
  .nav{ flex-wrap:wrap; gap:.8rem; }
  .nav ul{ gap: 1rem 1.2rem; }
}

/* --- Hero --- */
.hero{ padding: 5rem 0 3.5rem; text-align:center; }
.hero .lede{ max-width: 60ch; margin: 0 auto 1.6rem; color: var(--muted); font-size:1.08rem; }
.pillars{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.6rem; }
@media (max-width: 820px){ .pillars{ grid-template-columns: repeat(2, 1fr); } }
.pillar{ background: var(--panel); border:1px solid var(--hairline); border-radius:8px; padding:1.4rem 1.1rem; text-align:left; }
.pillar h3{ color: var(--brass); margin-bottom:.4rem; font-size:1.05rem; }
.pillar p{ color: var(--muted); font-size:.9rem; margin-bottom:.8rem; }
.pillar a{ font-size:.88rem; }

/* --- Sections --- */
section.block{ padding: 3.4rem 0; border-top: 1px solid var(--hairline); }
section.block:first-of-type{ border-top:none; }
.section-lede{ color: var(--muted); max-width:70ch; margin-bottom:2rem; }

/* --- Cards grid (speaker / radio / podcast) --- */
.grid-cards{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:1.2rem; }
.card{ background: var(--panel); border:1px solid var(--hairline); border-radius:8px; padding:1.3rem; }
.card h3{ margin-bottom:.25rem; }
.card .meta{ color: var(--brass); font-size:.85rem; margin-bottom:.6rem; }
.card p{ color: var(--muted); font-size:.92rem; margin-bottom:.8rem; }
.card .thumb{ width:100%; aspect-ratio: 1/1; object-fit:contain; object-position:center; border-radius:6px; margin-bottom:.9rem; background: var(--panel-2); padding:.6rem; }
.empty-state{ color: var(--muted); font-style: italic; }

/* --- Forms --- */
form.site-form{ background: var(--panel); border:1px solid var(--hairline); border-radius:8px; padding:1.8rem; max-width:560px; display:flex; flex-direction:column; gap:1.1rem; }
form.site-form label{ display:flex; flex-direction:column; gap:.35rem; font-size:.9rem; color:var(--muted); }
form.site-form input, form.site-form textarea, form.site-form select{
  background: var(--ink); color: var(--cream); border:1px solid var(--hairline);
  border-radius:4px; padding:.6rem .7rem; font-size:1rem; font-family:inherit; min-height:44px;
}
form.site-form textarea{ min-height: 110px; resize: vertical; }
form.site-form button{
  background: var(--brass); color: var(--ink); border:none; border-radius:4px;
  padding:.75rem 1rem; font-size:.95rem; font-weight:600; cursor:pointer; min-height:44px;
}
form.site-form button:disabled{ opacity:.6; cursor:not-allowed; }
#formStatus{ font-size:.9rem; min-height:1.2em; }
#formStatus.ok{ color:#7DB88A; }
#formStatus.err{ color:#C97757; }

/* --- Podcast player page --- */
.episode{ background: var(--panel); border:1px solid var(--hairline); border-radius:8px; padding:1rem 1.2rem; margin-bottom:.8rem; }
.episode .ep-date{ color: var(--brass); font-size:.85rem; margin-bottom:.4rem; }
.episode audio{ width:100%; margin-top:.5rem; }

/* --- Footer --- */
footer.site{ border-top:1px solid var(--hairline); padding: 2.4rem 0; margin-top:3rem; color: var(--muted); font-size:.85rem; }
footer.site .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; }
footer.site a{ color: var(--muted); }
footer.site a:hover{ color: var(--brass); }

.btn{ display:inline-block; background: var(--brass); color: var(--ink); padding:.7rem 1.3rem; border-radius:4px; font-weight:600; font-size:.92rem; }
.btn:hover{ text-decoration:none; opacity:.92; }
.btn-outline{ display:inline-block; border:1px solid var(--brass); color: var(--brass); padding:.65rem 1.25rem; border-radius:4px; font-weight:600; font-size:.92rem; }




.jns-logo-full {
    display: block;
    width: 100%;
    max-width: 400px;
    height: auto;
    margin: 0 auto;
}

.jns-mark {
    display: block;
    max-width: 100%;
    height: auto;
}






/* =========================================================
   MENU HAMBURGER RESPONSIVE
   ========================================================= */

.menu-toggle {
    display: none;
}


/* =========================================================
   TABLET E SMARTPHONE
   ========================================================= */

@media (max-width: 900px) {

    .nav {
        position: relative;
    }

    /* Pulsante hamburger */
    .menu-toggle {
        display: flex;

        width: 44px;
        height: 44px;

        padding: 0;
        margin: 0;

        border: none;
        background: transparent;

        flex-direction: column;
        justify-content: center;
        align-items: center;

        gap: 5px;

        cursor: pointer;

        z-index: 1002;
    }


    /* Le tre linee */
    .menu-toggle span {
        display: block;

        width: 25px;
        height: 2px;

        border-radius: 2px;

        transition:
            transform 0.25s ease,
            opacity 0.2s ease;
    }

    /* Bianca - Oro - Bianca */
    .menu-toggle span:nth-child(1) {
        background: #ffffff;
    }

    .menu-toggle span:nth-child(2) {
        background: #c9a24b;
    }

    .menu-toggle span:nth-child(3) {
        background: #ffffff;
    }


    /* =====================================================
       HAMBURGER → X
       ===================================================== */

    .menu-toggle.is-open span:nth-child(1) {
        background: #ffffff;
        transform: translateY(7px) rotate(45deg);
    }

    .menu-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.is-open span:nth-child(3) {
        background: #c9a24b;
        transform: translateY(-7px) rotate(-45deg);
    }


    /* =====================================================
       MENU
       ===================================================== */

    .nav > ul {
        display: none;

        position: absolute;

        top: calc(100% + 10px);
        right: 0;

        width: min(320px, calc(100vw - 30px));

        margin: 0;
        padding: 8px 0;

        list-style: none;

        background: #10131a;

        border: 1px solid rgba(201, 162, 75, 0.35);

        border-radius: 10px;

        box-shadow:
            0 15px 40px rgba(0, 0, 0, 0.45);

        z-index: 1001;

        overflow: hidden;
    }


    /* Menu aperto */
    .nav > ul.is-open {
        display: block;

        animation: jnsMenuOpen 0.2s ease-out;
    }


    /* =====================================================
       VOCI DEL MENU
       ===================================================== */

    .nav > ul li {
        margin: 0;
        padding: 0;
    }

    .nav > ul li a {
        display: block;

        padding: 14px 20px;

        color: #ffffff;

        text-decoration: none;

        font-weight: 500;

        transition:
            color 0.2s ease,
            background 0.2s ease,
            padding-left 0.2s ease;
    }


    /* Hover / voce selezionata */
    .nav > ul li a:hover,
    .nav > ul li a:focus,
    .nav > ul li a:active {
        color: #c9a24b;

        background: rgba(201, 162, 75, 0.08);

        padding-left: 24px;
    }

}


/* =========================================================
   ANIMAZIONE APERTURA
   ========================================================= */

@keyframes jnsMenuOpen {

    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   SMARTPHONE PICCOLI
   ========================================================= */

@media (max-width: 480px) {

    .nav > ul {
        width: calc(100vw - 24px);
        right: -6px;
    }

}