/* PROPOSTA A - "Abisso": nero e azzurro ghiaccio.
   Struttura: hero con logo sul globo, poi "capitoli" a tutto schermo separati da un frontespizio numerato. */
:root {
    --page-bg: #050608; --alt-bg: #0a1119; --footer-bg: #050608; --header-rgb: 5, 6, 8;
    --veil-rgb: 5, 6, 8; --line: rgba(156, 199, 238, 0.22);
    --btn-bg: #efebe2; --btn-fg: #050608; --btn-hover: #1f5da8; --btn-hover-fg: #f4f8fc;
}

.hero-logo { filter: drop-shadow(0 0 40px rgba(156, 199, 238, .28)) drop-shadow(0 8px 30px rgba(0, 0, 0, .7)); }

.chapters { background: var(--page-bg); padding-top: clamp(1rem, 4vw, 3rem); }
.chapter { padding: 0 var(--frame-x); }

/* Frontespizio del capitolo: separa nettamente un video dal successivo, su desktop e su mobile */
.chapter-break {
    display: grid; grid-template-columns: auto 1fr auto; align-items: end;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: clamp(3.5rem, 9vw, 6.5rem) .25rem clamp(1.25rem, 3vw, 2rem);
    border-top: 1px solid var(--line);
}
.chapter:first-child .chapter-break { border-top: 0; padding-top: clamp(2rem, 5vw, 3.5rem); }
.cb-num {
    font-family: var(--font-display); font-weight: 500; line-height: .8;
    font-size: clamp(4rem, 12vw, 9.5rem); color: transparent;
    -webkit-text-stroke: 1px var(--ice); font-variation-settings: 'opsz' 96;
}
.cb-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3.6vw, 3rem); line-height: 1.1; color: var(--sec-head); padding-bottom: .4rem; }
.cb-count { font-size: .72rem; letter-spacing: .3em; color: var(--sec-accent); padding-bottom: .9rem; white-space: nowrap; }
.chapter .panel.framed { margin: 0 0 clamp(2rem, 6vw, 4rem); }

.chapter.last { padding-bottom: clamp(3rem, 8vw, 6rem); }
.chapter.last .panel.framed { margin-bottom: 0; }

.about { background: var(--page-bg); }

@media (max-width: 560px) {
    .chapter-break { grid-template-columns: auto 1fr; align-items: center; }
    .cb-count { display: none; }
    .cb-num { font-size: 4.2rem; }
    .cb-title { font-size: 1.5rem; }
}

/* Testo sul video: frase in serif, il titolo e' gia' nel frontespizio */
.sector .ov-text { font-family: var(--font-display); font-size: clamp(1.35rem, 2.5vw, 2.05rem); line-height: 1.3; color: var(--foam); max-width: 30rem; font-variation-settings: 'opsz' 30; }
.panel.sector .panel-inner > .ov-text { max-width: 30rem; }