:root {
    --bg: #0b0e15;
    --text: #e6dec7;
    --muted: #b6a98b;
    --gold: #d7b169;
    --gold-2: #b8924c;
    --danger: #ffbebc
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: #0b0e15;
    color: var(--text);
    font: 16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto
}

a {
    color: var(--gold);
    text-decoration: none
}

    a:hover {
        color: #f0dba2
    }

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px
}
    
/* ====================== HEADER ====================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100000;
    background: linear-gradient(180deg,rgba(11,14,21,.98),rgba(11,14,21,.94));
    backdrop-filter: saturate(140%) blur(2px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

    .site-header::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: linear-gradient(90deg,transparent 0%,rgba(215,177,105,.38) 25%,rgba(215,177,105,.38) 75%,transparent 100%);
        opacity: .6;
    }

.wrap.bar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 0
}

.brand--image {
    display: inline-flex;
    align-items: center;
    gap: 10px
}

.brand-logo {
    height: 42px;
    width: auto;
    display: block;
    object-fit: contain
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0
}

/* NAV desktop */
.main-nav {
    margin-left: auto;
    display: flex;
    gap: 24px;
    align-items: center
}

.lang {
    margin-left: 18px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(215,177,105,.35);
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(215,177,105,.06)
}

    .lang a {
        color: var(--gold);
        font-weight: 700
    }

        .lang a.active {
            color: #2d2412;
            background: linear-gradient(180deg,var(--gold),var(--gold-2));
            padding: 2px 8px;
            border-radius: 999px
        }

/* HAMBURGER (desktop: nascosto) */
.menu-toggle {
    display: none;
    margin-left: auto;
    background: transparent;
    border: 0;
    padding: 8px;
    cursor: pointer
}

    .menu-toggle span {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--gold);
        margin: 5px 0;
        border-radius: 2px
    }

/* ====================== MOBILE HEADER & MENU ====================== */
@media (max-width: 920px) {
    /* più respiro ai lati */
    .container {
        padding: 0 26px;
    }

    .wrap.bar {
        padding: calc(8px + env(safe-area-inset-top)) 0 12px;
    }

    /* brand “pill” */
    .brand--image {
        padding: 6px 12px;
        border-radius: 14px;
        background: rgba(215,177,105,.06);
        border: 1px solid rgba(215,177,105,.18);
        box-shadow: 0 6px 14px rgba(0,0,0,.35);
    }

    .brand-logo {
        height: 30px;
        width: auto;
        object-fit: contain;
    }

    /* hamburger come bottone */
    .menu-toggle {
        display: block;
        margin-left: auto;
        position: relative;
        z-index: 10001;
        padding: 9px;
        border-radius: 12px;
        background: rgba(215,177,105,.08);
        border: 1px solid rgba(215,177,105,.25);
    }

        .menu-toggle span {
            width: 18px;
            height: 2px;
            margin: 4px 0;
        }

    /* PANNELLO MENU: fuori dal layout del container, a TUTTA VIEWPORT */
    .main-nav {
        position: fixed;
        inset: calc(58px + env(safe-area-inset-top)) 0 auto 0; /* top / left / bottom / right */
        width: 100vw; /* non ereditare la larghezza della .container */
        max-width: none;
        margin: 0;
        display: none; /* chiuso di default */
        z-index: 99999; /* sopra a qualunque card/copertina/bg */
        background: rgba(11,14,21,.98);
        backdrop-filter: blur(6px);
        border-bottom: 1px solid rgba(215,177,105,.20);
        padding-bottom: 10px;
    }

        .main-nav.is-open {
            display: block;
        }

        .main-nav a {
            display: block;
            padding: 16px 24px;
            border-top: 1px solid rgba(255,255,255,.06);
        }

    /* evitiamo scroll sotto il menu aperto */
    body.nav-open {
        overflow: hidden;
    }
}


/* sicurezza: l’header non clippa i figli */
.site-header{ overflow: visible; }


/* gli strati del background non intercettano click */
body.has-book-bg::before, body.has-book-bg::after {
    pointer-events: none
}

/* ====================== GRID ====================== */
.grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 26px;
    margin: 24px 0 40px
}

@media(max-width:980px) {
    .grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:640px) {
    .grid {
        grid-template-columns: 1fr
    }

    .brand-logo {
        height: 28px
    }
}

/* ====================== CARDS ====================== */
.card {
    position: relative;
    background: linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0,0,0,.25)
}

    .card .body {
        padding: 14px 14px 16px
    }

    .card h2 {
        margin: 4px 0 8px;
        font-size: 20px
    }

    /* Copertine contenute senza tagli */
    .card .cover {
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,.02);
        width: 100%;
        aspect-ratio: 3/4
    }

    .card img.book-cover {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
        background: #0b0e15;
        border-radius: 12px
    }

/* ====================== ABOUT ====================== */
.about {
    margin: 28px 0 60px
}

.about-card {
    --radius: 16px;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 28px;
    padding: 22px;
    border-radius: var(--radius);
    background: linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
    border: 1px solid rgba(255,255,255,.06)
}

.about-media {
    display: flex;
    align-items: flex-start;
    justify-content: center
}

.about-photo {
    width: clamp(140px,22vw,200px);
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 24px rgba(0,0,0,.45)
}

.about-title {
    margin: 4px 0 16px;
    font-size: clamp(22px,3.4vw,32px)
}

.about-text {
    font-size: clamp(16px,2.1vw,18px);
    line-height: 1.9;
    letter-spacing: .2px
}

    .about-text p {
        margin: 0 0 14px
    }

/* Citazione evidenziata */
.about-quote {
    margin: 14px 0 18px;
    padding: 14px 16px;
    background: rgba(215,177,105,.08);
    border-left: 4px solid var(--gold);
    border-radius: 10px;
    font-style: italic;
    color: var(--text)
}

/* Firma */
.about-sign {
    margin-top: 18px
}

    .about-sign .sig-name {
        font-family: "Segoe Script","Lucida Handwriting","Brush Script MT",cursive;
        font-size: clamp(28px,6vw,40px);
        color: var(--gold);
        line-height: 1.1;
        text-shadow: 0 1px 0 rgba(0,0,0,.25)
    }

    .about-sign .sig-role {
        margin-top: 4px;
        font-size: 14px;
        color: #b8ad93;
        border-top: 1px dashed rgba(215,177,105,.35);
        padding-top: 6px
    }

/* Mobile About */
@media (max-width:860px) {
    .about-card {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
        border-radius: 14px
    }

    .about-media {
        justify-content: flex-start
    }

    .about-photo {
        width: clamp(130px,40vw,200px)
    }

    .about-text {
        font-size: 16px;
        line-height: 1.85
    }
}

/* ====================== BADGE store ====================== */
.badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px
}

.badge-label {
    font-size: 13px;
    color: #b8ad93;
    margin-right: 2px
}

.badge-inline.store {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 13px;
    background: rgba(215,177,105,.12);
    color: var(--gold);
    border: 1px solid rgba(215,177,105,.45);
    text-decoration: none
}

    .badge-inline.store:hover {
        background: rgba(215,177,105,.2);
        border-color: rgba(215,177,105,.6)
    }

    .badge-inline.store .ico {
        display: inline-flex;
        line-height: 0
    }

        .badge-inline.store .ico svg {
            width: 16px;
            height: 16px;
            fill: currentColor
        }

/* BADGE availability */
.avail-badge {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 3;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 13px;
    background: rgba(215,177,105,.12);
    color: var(--gold);
    border: 1px solid rgba(215,177,105,.45)
}

    .avail-badge.out {
        background: rgba(200,40,40,.12);
        color: var(--danger);
        border-color: rgba(200,40,40,.35)
    }

.badge-inline {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 13px;
    background: rgba(215,177,105,.12);
    color: var(--gold);
    border: 1px solid rgba(215,177,105,.45)
}

/* ====================== FOOTER ====================== */
footer {
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 26px 0;
    color: #b2a98f;
    font-size: 14px
}

.site-footer {
    border-top: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
    padding: 20px 0 28px
}

.footer-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.footer-copy {
    color: #b8ad93
}

.footer-sign {
    display: flex;
    align-items: center;
    gap: 10px
}

    .footer-sign .sig-img {
        height: 40px;
        filter: drop-shadow(0 1px 0 rgba(0,0,0,.25))
    }

    .footer-sign .sig-name {
        font-family: "Segoe Script","Lucida Handwriting","Brush Script MT",cursive;
        font-size: 28px;
        color: var(--gold);
        line-height: 1;
        text-shadow: 0 1px 0 rgba(0,0,0,.25)
    }

.footer-social {
    display: flex;
    gap: 10px
}

    .footer-social .ico {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: rgba(215,177,105,.07);
        border: 1px solid rgba(215,177,105,.25);
        color: var(--gold);
        transition: transform .12s ease,background .12s ease,border-color .12s ease
    }

        .footer-social .ico svg {
            width: 18px;
            height: 18px;
            fill: currentColor
        }

        .footer-social .ico:hover {
            transform: translateY(-1px);
            background: rgba(215,177,105,.12);
            border-color: rgba(215,177,105,.45)
        }

@media (max-width:820px) {
    .footer-grid {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px
    }

    .footer-sign .sig-img {
        height: 36px
    }

    .footer-sign .sig-name {
        font-size: 24px
    }
}

/* ====================== BACKGROUND GLOBALE ====================== */
/* Variabili impostabili inline sul <body>:
   --book-bg: url('/img/bg/xxx.jpg')
   --book-bg-opacity: 0.42 (0.30–0.65)
   --book-bg-blur: 1px (0–2px)
   --book-bg-v1: .36 (sfumatura centrale)
   --book-bg-v2: .80 (velatura generale) */
:root {
    --book-bg: none;
    --book-bg-opacity: .42;
    --book-bg-blur: 1px;
    --book-bg-v1: .36;
    --book-bg-v2: .80
}

body.has-book-bg {
    position: relative;
    z-index: 0
}

    body.has-book-bg::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image: var(--book-bg);
        background-size: cover;
        background-position: center;
        opacity: var(--book-bg-opacity);
        filter: saturate(112%) blur(var(--book-bg-blur))
    }

    body.has-book-bg::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: radial-gradient(1200px 700px at 50% -10%, rgb(11 14 21 / var(--book-bg-v1)) 0%, rgb(11 14 21 / 0) 60%), linear-gradient(to bottom, rgb(11 14 21 / var(--book-bg-v2)) 0%, rgb(11 14 21 / var(--book-bg-v2)) 100%)
    }

/* mantieni main/footer a z-index 1, ma lascia l'header sopra a tutti */
main, .site-footer {
    position: relative;
    z-index: 1;
}

.site-header {
    z-index: 100000; /* ripristina lo stacking corretto dell’header */
}

/* ====================== TYPO SCHEDA LIBRO ====================== */
.book-sheet {
    max-width: 860px;
    margin: 0 auto;
    padding: 18px 20px 22px;
    background: linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    backdrop-filter: blur(1px)
}

.book-title {
    margin: 6px 0 0;
    font-size: clamp(26px,3.6vw,34px)
}

.book-sub {
    margin: 4px 0 14px;
    color: #cbbd9e;
    font-weight: 600
}

.book-sheet .desc {
    font-size: clamp(17px,2.1vw,19px);
    line-height: 1.9;
    letter-spacing: .2px;
    text-wrap: pretty
}

.book-sheet .preview-title {
    margin: 18px 0 8px;
    font-size: clamp(20px,2.8vw,24px)
}

.book-sheet .preview {
    font-size: clamp(16px,2vw,18px);
    line-height: 1.9;
    padding: 14px 16px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px
}

@media (max-width:820px) {
    .book-sheet {
        padding: 14px 14px 18px;
        border-radius: 14px
    }

        .book-sheet .desc {
            font-size: 17px;
            line-height: 1.85
        }

        .book-sheet .preview {
            padding: 12px 12px
        }

}
/* Mostra il pannello mobile quando il body ha la classe "nav-open" */
@media (max-width: 920px) {
    body.nav-open .main-nav {
        display: block !important;
    }
}

/* ===== Mobile menu – spazi più compatti ===== */
@media (max-width: 920px) {

    /* Riduce il padding verticale di ogni voce del menu */
    .main-nav a {
        padding: 10px 18px !important; /* prima 16px 24px */
    }

    /* Selettore lingua (pill) più stretto */
    .lang {
        gap: 6px !important; /* prima 10px */
        padding: 4px 8px !important; /* prima 6px 10px */
    }

        /* Bottoni IT/EN più compatti */
        .lang a {
            font-size: .95rem; /* leggermente più piccolo */
            line-height: 1.2;
        }

            .lang a.active {
                padding: 2px 6px !important; /* prima 2px 8px */
                border-radius: 999px;
            }
}