/* PROPOSTA A - "Immersione": bianco e nero. La pagina scende sotto la linea dell'acqua:
   ogni capitolo e' piu' scuro del precedente e un misuratore di profondita' accompagna lo scorrimento. */

.dive { background: var(--bg); }
.chapter { color: var(--text); background: var(--bg); padding: 0 var(--frame-x) var(--gap); }
@media (min-width: 1001px) { .chapter { padding-right: 96px; } }   /* il misuratore sta nel margine, non sopra il video */
.chapter:first-of-type .chapter-break { padding-top: clamp(3rem, 6vw, 5rem); border-top: 0; }
.chapter .chapter-break { border-top: 0; }
.chapter .arena { padding-bottom: 0; }
.d1 { --bg: #f1f1ee; --text: #3d3d3d; --head: #0a0a0a; --mute: #6b6b6b; --line: rgba(10, 10, 10, .22); }
.d2 { --bg: #c6c6c3; --text: #262626; --head: #0a0a0a; --mute: #454545; --line: rgba(10, 10, 10, .3); }
.d3 { --bg: #3c3c3c; --text: #dcdcdc; --head: #ffffff; --mute: #bcbcb9; --line: rgba(255, 255, 255, .28); }
.d4 { --bg: #0a0a0a; --text: #d2d2cf; --head: #ffffff; --mute: #b0b0ad; --line: rgba(255, 255, 255, .26); }
.chapter .panel.framed { margin: 0 0 1.5rem; border-color: rgba(0, 0, 0, .4); }
.d3 .panel.framed, .d4 .panel.framed { border-color: rgba(255, 255, 255, .28); }

/* Misuratore di profondita': sempre leggibile grazie al colore in "difference" */
.depth-gauge { position: fixed; right: clamp(.6rem, 1.6vw, 1.6rem); top: 50%; transform: translateY(-50%); height: 46vh; width: 76px; z-index: 120; pointer-events: none; opacity: 0; transition: opacity .4s; mix-blend-mode: difference; color: #fff; }
.depth-gauge.on { opacity: 1; }
.dg-line { position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: currentColor; opacity: .7; }
.dg-ticks { position: absolute; right: 0; top: 0; bottom: 0; width: 9px; background: repeating-linear-gradient(180deg, currentColor 0 1px, transparent 1px 11.4%); opacity: .7; }
.dg-marker { position: absolute; right: -3px; width: 7px; height: 7px; background: currentColor; transform: translateY(-50%); transition: top .15s linear; }
.dg-value { position: absolute; right: 16px; top: -1.6rem; font-family: var(--font-roman); font-size: .68rem; letter-spacing: .14em; white-space: nowrap; }
.dg-title { position: absolute; right: 16px; bottom: -1.7rem; font-family: var(--font-roman); font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; opacity: .8; white-space: nowrap; }
.dg-marker .dg-value { top: -4px; transform: translateY(-50%); }

@media (max-width: 820px) {
    .depth-gauge { top: calc(var(--header-h) + .7rem); right: .7rem; transform: none; height: auto; width: auto; }
    .dg-line, .dg-ticks, .dg-title { display: none; }
    .dg-marker { position: static; display: block; width: auto; height: auto; background: none; transform: none; }
    .dg-marker .dg-value { position: static; transform: none; font-size: .7rem; padding: .3rem .55rem; border: 1px solid currentColor; }
}