/* Prototipo E «Patrimonio» — il quaderno del patrimonio.
   Carta avorio, inchiostro blu notte, note a penna blu, un filo d'oro. Caldo, scritto a mano, con i numeri in vista. */
@view-transition { navigation: auto; }
:root {
  --carta: #F4EEE2; --carta-2: #EBE3D3; --foglio: #FBF8F1; --inchiostro: #1F2733; --notte: #1A2536; --notte-2: #243149;
  --testo: #1F2733; --tenue: #5A5F66; --penna: #2B4B9B; --margine: #C2553F;
  --oro: #A9824A; --oro-testo: #7A5C29; --oro-chiaro: #CDAE75;
  --linea: rgb(31 39 51 / .14); --linea-chiara: rgb(244 238 226 / .2);
  --ombra: 0 1px 1px rgb(31 39 51 / .05), 0 3px 8px rgb(31 39 51 / .05), 0 14px 34px -14px rgb(31 39 51 / .16);
  --ombra-su: 0 1px 1px rgb(31 39 51 / .06), 0 8px 18px rgb(31 39 51 / .08), 0 30px 50px -20px rgb(31 39 51 / .26);
  --serif: "Newsreader", Georgia, serif; --sans: "Hanken Grotesk", system-ui, sans-serif;
  --mano: "La Belle Aurore", "Bradley Hand", cursive; --firma: "Mrs Saint Delafield", "Snell Roundhand", cursive;
  --esce: cubic-bezier(0.23, 1, 0.32, 1); --muove: cubic-bezier(0.77, 0, 0.175, 1);
  --larghezza: 1200px; --raggio: 3px; --fascia: clamp(80px, 11vw, 136px);
  --grana: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .16 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--carta) var(--grana); color: var(--testo); font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
svg { display: block; max-width: 100%; }
a { color: inherit; }
.contenitore { max-width: var(--larghezza); margin: 0 auto; padding: 0 20px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.04; margin: 0; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 6.6vw, 5.2rem); }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
h3 { font-size: 1.65rem; }
h1 em, h2 em { font-style: italic; color: var(--penna); }
.notte h2 em { color: var(--oro-chiaro); }
p { margin: 0; text-wrap: pretty; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.etichetta { font: 600 .76rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--oro-testo); }
.notte .etichetta { color: var(--oro-chiaro); }
:focus-visible { outline: 2px solid var(--penna); outline-offset: 3px; }

/* Note scritte a penna e segni tracciati a mano */
.nota { font: 600 1.55rem/1.1 var(--mano); color: var(--penna); letter-spacing: .01em; }
.nota--chiara { color: var(--oro-chiaro); margin-top: 14px; font-size: 1.8rem; }
.segno { overflow: visible; }
.segno path { fill: none; stroke: var(--penna); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; }
html:not(.js) .segno path, .visibile .segno path, .entra .segno path { animation: traccia 1100ms var(--muove) forwards; animation-delay: 700ms; }
@keyframes traccia { to { stroke-dashoffset: 0; } }

/* Pulsanti */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: 0 24px;
  border-radius: var(--raggio); background: var(--inchiostro); color: var(--carta); font: 600 1rem/1 var(--sans);
  text-decoration: none; border: 1px solid var(--inchiostro); cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, transform 160ms var(--esce); }
.btn:active { transform: scale(.97); }
.btn .freccia { display: inline-block; transition: transform 240ms var(--esce); }
.btn--oro { background: var(--oro-chiaro); border-color: var(--oro-chiaro); color: var(--notte); position: relative; overflow: hidden; isolation: isolate; }
.btn--oro::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .5) 50%, transparent 65%); transform: translateX(-120%); }
.btn--chiaro { background: transparent; color: var(--carta); border-color: var(--linea-chiara); }
.btn--linea { background: transparent; color: var(--inchiostro); border-color: rgb(31 39 51 / .35); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--notte-2); }
  .btn:hover .freccia { transform: translateX(4px); }
  .btn--oro:hover { background: #D9BE8C; }
  .btn--oro:hover::after { transform: translateX(120%); transition: transform 800ms var(--esce); }
  .btn--chiaro:hover { background: rgb(244 238 226 / .08); }
  .btn--linea:hover { background: var(--carta-2); }
}
.inviti { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* Testata */
.testata { position: sticky; top: 0; z-index: 10; background: rgb(244 238 226 / .88); backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid transparent; transition: border-color 200ms ease, box-shadow 200ms ease; view-transition-name: testata; }
html[data-scorso] .testata { border-color: var(--linea); box-shadow: 0 8px 24px -18px rgb(31 39 51 / .3); }
.testata .contenitore { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; transition: min-height 240ms var(--esce); }
html[data-scorso] .testata .contenitore { min-height: 62px; }
.avanzamento { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--penna); transform-origin: 0 50%; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  .avanzamento { animation: avanza linear both; animation-timeline: scroll(root); }
  @keyframes avanza { to { transform: scaleX(1); } }
}
.marchio { text-decoration: none; line-height: 1.15; }
.marchio b { display: block; font: 400 1.4rem var(--serif); letter-spacing: -.01em; }
.marchio span { display: block; font: 600 .66rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--tenue); transition: opacity 200ms ease; }
html[data-scorso] .marchio span { opacity: 0; height: 0; overflow: hidden; }
.menu-largo { display: none; gap: 30px; font-size: .95rem; }
.menu-largo a { position: relative; text-decoration: none; padding: 8px 0; }
.menu-largo a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--penna); transform: scaleX(0); transform-origin: 0 50%; transition: transform 240ms var(--esce); }
.menu-largo a[aria-current]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .menu-largo a:hover::after { transform: scaleX(1); } }
.testata .btn { min-height: 44px; padding: 0 18px; font-size: .9rem; }
.menu-stretto summary { list-style: none; cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; padding: 0 4px; }
.menu-stretto summary::-webkit-details-marker { display: none; }
.menu-stretto[open] nav { position: fixed; inset: 62px 0 0; background: var(--carta) var(--grana); color: var(--testo); padding: 28px 20px; display: grid; align-content: start; gap: 2px; animation: menu 260ms var(--esce); }
.menu-stretto nav a { font: 400 2rem/1.4 var(--serif); text-decoration: none; border-bottom: 1px solid var(--linea); padding: 10px 0; }
.menu-stretto nav a.btn { font: 600 1rem var(--sans); margin-top: 24px; border-bottom: 0; }
@keyframes menu { from { opacity: 0; transform: translateY(-8px); } }
.testata .solo-largo { display: none; }
@media (min-width: 1020px) { .menu-largo, .testata .solo-largo { display: flex; } .menu-stretto { display: none; } }

/* Apertura: titolo a sinistra, la mappa del patrimonio a destra */
.apertura .contenitore { display: grid; gap: 40px; padding-top: clamp(48px, 8vw, 104px); padding-bottom: clamp(56px, 8vw, 104px); }
.apertura h1 { margin-top: 18px; max-width: 12.5em; }
.apertura .sotto { font-size: 1.18rem; margin-top: 22px; max-width: 31em; color: var(--tenue); }
.rischio { font-size: .8rem; margin-top: 18px; color: var(--tenue); }
.entra { animation: entra 700ms var(--esce) both; animation-delay: calc(var(--i, 0) * 70ms + 40ms); }
@keyframes entra { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } }
.parola { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .12em 0; margin: 0 -.06em -.12em 0; }
.parola > span { display: inline-block; transform: translateY(108%); animation: sale 950ms var(--esce) forwards; animation-delay: calc(var(--w, 0) * 55ms + 120ms); }
@keyframes sale { to { transform: none; } }
.inviti--annotati { position: relative; padding-bottom: 8px; }
.nota--cta { position: absolute; left: 8px; top: calc(100% + 2px); display: flex; align-items: flex-start; gap: 4px; transform: rotate(-3deg); }
.nota--cta .freccia-mano { width: 54px; height: 36px; transform: scaleY(-1) rotate(-10deg); margin-top: -26px; }
.apertura--home .rischio { margin-top: 64px; }
.mappa { position: relative; margin: 0; width: 100%; aspect-ratio: 1 / .95; }
.mappa-tela { position: absolute; inset: 0; width: 100%; height: 100%; animation: svela 2000ms var(--muove) 250ms both; }
@keyframes svela { from { clip-path: circle(0% at 55% 50%); } to { clip-path: circle(85% at 55% 50%); } }
.collina { position: absolute; transform: translate(-50%, -50%); padding: 10px 6px; font: 600 1.45rem/1 var(--mano); color: var(--penna); text-decoration: none; white-space: nowrap; }
.collina::before { content: ""; position: absolute; left: 50%; top: -2px; width: 0; height: 0; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--inchiostro); }
.collina::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 4px; height: 2px; background: var(--penna); border-radius: 2px; transform: scaleX(0); transform-origin: 0 50%; transition: transform 300ms var(--esce); }
.collina:hover::after, .collina:focus-visible::after { transform: scaleX(1); }
.nota--mappa { position: absolute; left: 0; bottom: 0; font-size: 1.3rem; color: var(--tenue); transform: rotate(-2deg); }
@media (min-width: 1020px) {
  .apertura--home .contenitore { grid-template-columns: 1fr 1.1fr; align-items: center; gap: 56px; }
  .collina { font-size: 1.7rem; }
}

/* Comparsa allo scorrimento (solo con JS attivo) */
html.js [data-rivela] { opacity: 0; transform: translateY(22px); transition: opacity 800ms var(--esce), transform 800ms var(--esce); transition-delay: calc(var(--i, 0) * 80ms); }
html.js [data-rivela].visibile { opacity: 1; transform: none; }

/* Intestazione delle fasce */
.capo { display: grid; gap: 18px; }
.capo h2 { margin-top: 2px; }
.capo p:not(.etichetta) { color: var(--tenue); max-width: 30em; font-size: 1.08rem; }
@media (min-width: 900px) { .capo { grid-template-columns: 1fr 1fr; align-items: end; column-gap: 64px; } .capo .etichetta { grid-column: 1 / -1; } }

/* Nastro dei mercati (TradingView, solo con il consenso): una striscia di carta perforata */
.nastro[hidden] { display: none; }
.nastro { min-height: 60px; }
.nastro { position: relative; display: flex; align-items: center; background: var(--foglio); border-block: 1px solid var(--linea); overflow: hidden; }
.nastro::before, .nastro::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; background: radial-gradient(circle at 50% 50%, var(--carta-2) 2px, transparent 2.6px) 0 0 / 14px 6px repeat-x; }
.nastro::before { top: 3px; } .nastro::after { bottom: 3px; }
.nastro .cartellino { flex: none; margin-left: 20px; font-size: .72rem; }
html:not(.js) .nastro { display: none; }

/* Foglio a righe con il margine rosso, come un registro */
.registro { position: relative; isolation: isolate;
  background: repeating-linear-gradient(180deg, transparent 0 33px, rgb(43 75 155 / .1) 33px 34px); }
.registro::after { content: ""; position: absolute; top: 0; bottom: 0; left: max(12px, calc((100% - var(--larghezza)) / 2 - 18px)); width: 1px; background: rgb(194 85 63 / .45); z-index: -1; }

/* Cerchio a penna intorno a «sartoriale» */
.cerchiata { position: relative; display: inline-block; }
.cerchio-mano { position: absolute; left: -10%; top: -22%; width: 120%; max-width: none; height: 150%; pointer-events: none; }

/* Cifre a rullo */
.cifre { display: inline-flex; align-items: flex-end; }
.cifra, .fisso { display: inline-block; height: 1em; line-height: 1; }
.cifra { overflow: hidden; }
.fisso { white-space: pre; }
.rullo { display: flex; flex-direction: column; transition: transform 1900ms var(--muove); transition-delay: calc(var(--c, 0) * 110ms); }
.rullo > span { display: block; height: 1em; line-height: 1; }

/* Mercati */
.mercati { background: rgb(235 227 211 / .6); }
.mercati .contenitore { padding-top: var(--fascia); padding-bottom: var(--fascia); }
.comandi { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; }
.schede-mercato { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px; background: var(--foglio); border-radius: calc(var(--raggio) + 4px); box-shadow: inset 0 0 0 1px var(--linea); max-width: 100%; }
.schede-mercato::-webkit-scrollbar { display: none; }
.schede-mercato button { flex: none; min-height: 44px; padding: 0 16px; border-radius: var(--raggio); border: 0; background: transparent;
  color: var(--tenue); font: 600 .92rem var(--sans); cursor: pointer; transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--esce); }
.schede-mercato button:active { transform: scale(.97); }
.schede-mercato button[aria-pressed="true"] { background: var(--inchiostro); color: var(--carta); }
.grafico { position: relative; margin-top: 16px; background: var(--foglio); border-radius: calc(var(--raggio) + 3px); padding: 24px; box-shadow: var(--ombra); }
.nota--grafico { position: absolute; right: 22px; top: -14px; transform: rotate(-2.5deg); font-size: 1.35rem; background: var(--foglio); padding: 0 8px; }
.grafico .riga { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 20px; margin-top: 8px; }
.grafico [data-nome] { font: 400 1.55rem var(--serif); }
.grafico [data-segno="su"] { color: #2E6B4F; }
.grafico [data-segno="giu"] { color: #9A3B32; }
.grafico .piede { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: .8rem; color: var(--tenue); }
.cartellino { display: inline-block; padding: 2px 8px; border: 1px dashed var(--oro); border-radius: var(--raggio); color: var(--testo); font-weight: 600; }

/* Le quattro aree: fogli con un'incisione a puntini */
.sezioni .contenitore { padding-top: var(--fascia); padding-bottom: var(--fascia); }
.sezioni ol { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 16px; }
.sezioni li { position: relative; background: var(--foglio); border-radius: calc(var(--raggio) + 3px); box-shadow: var(--ombra); transition: box-shadow 300ms ease, transform 300ms var(--esce), opacity 800ms var(--esce); }
.sezioni li > a { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 26px 26px 30px; text-decoration: none; border-radius: inherit; }
.scena--scheda { display: block; width: 100%; height: 150px; margin: -6px 0 0; }
.sezioni .n { font: 600 1.6rem/1 var(--mano); color: var(--penna); }
.sezioni li p { color: var(--tenue); flex: 1; }
.sezioni .vai { font-weight: 600; display: inline-flex; gap: .5em; align-items: center; }
.sezioni .vai .freccia { transition: transform 240ms var(--esce); }
@media (hover: hover) and (pointer: fine) {
  .sezioni li.visibile:hover, html:not(.js) .sezioni li:hover { box-shadow: var(--ombra-su); transform: translateY(-3px) rotate(-.4deg); }
  .sezioni li:hover .freccia { transform: translateX(4px); }
}
@media (min-width: 760px) { .sezioni ol { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sezioni ol { grid-template-columns: repeat(4, 1fr); } }

/* Fascia blu notte della costruzione del portafoglio, con il guilloche */
.notte { background: var(--notte); color: var(--carta); position: relative; overflow: hidden; isolation: isolate; }
.notte p { color: rgb(244 238 226 / .82); }
.guilloche { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1400ms ease; }
[data-guilloche] .guilloche { opacity: 1; }
.portafoglio .contenitore, .chiusura .contenitore { padding-top: var(--fascia); padding-bottom: var(--fascia); }
.portafoglio h2 { margin-top: 8px; max-width: 16em; text-wrap: balance; }
.portafoglio .testo { margin-top: 14px; max-width: 34em; font-size: 1.12rem; }
.passi { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px 36px; }
.passi li { border-top: 1px dashed rgb(205 174 117 / .42); padding-top: 16px; }
.passi .n { font: 400 1.6rem/1 var(--mano); color: var(--oro-chiaro); }
.passi h3 { margin: 10px 0 6px; color: var(--carta); font-size: 1.45rem; }
.passi p { margin: 0; font-size: .95rem; text-wrap: pretty; }
.fonte { font-size: .8rem; margin-top: 14px; opacity: .72; }
.luce { position: absolute; top: 0; left: 0; z-index: -1; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(205 174 117 / .14), rgb(205 174 117 / 0) 62%); opacity: 0; transition: opacity 500ms ease; will-change: transform; }
.notte[data-luce] .luce { opacity: 1; }

/* Chiusura con la firma */
.chiusura { text-align: center; }
.chiusura h2 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
.chiusura .inviti { justify-content: center; }
.chiusura p:not(.etichetta):not(.nota):not(.firma-mano) { margin: 18px auto 0; max-width: 30em; color: var(--tenue); }
.firma-blocco { margin-top: 48px; }
.firma-mano { margin: 0; font: 400 clamp(3rem, 8vw, 4.6rem)/1 var(--firma); color: var(--penna); transform: rotate(-3deg); }
.firma-blocco .nota { margin-top: 6px; }

/* Pagine di sezione */
.apertura--sezione { position: relative; isolation: isolate; }
.apertura--sezione .contenitore { min-height: min(74svh, 700px); align-content: center; }
.nota--appunto { font-size: 1.9rem; margin-top: 12px; transform: rotate(-1.5deg); transform-origin: 0 50%; }
.scena--apertura { position: absolute; right: -25%; top: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .3; }
@media (min-width: 1020px) { .scena--apertura { right: 0; width: 55%; opacity: 1; } }
.sezione-testo .contenitore { padding-top: var(--fascia); padding-bottom: var(--fascia); }
.punti { list-style: none; margin: 48px 0 0; padding: 0; display: grid; }
.punti li { border-top: 1px solid var(--linea); padding: 26px 0; display: grid; gap: 6px; }
.punti li:last-child { border-bottom: 1px solid var(--linea); }
.punti h3 { font-size: 1.5rem; }
.punti p { color: var(--tenue); }
@media (min-width: 900px) { .punti li { grid-template-columns: 1fr 1.2fr; align-items: baseline; column-gap: 64px; } }
.dato { margin-top: 56px; padding-left: 22px; position: relative; }
.dato::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--penna); }
.dato b { display: block; font: 400 clamp(3.2rem, 8vw, 5.4rem)/1 var(--serif); color: var(--inchiostro); }
.dato p { margin-top: 10px; color: var(--tenue); max-width: 34em; }

/* Disclaimer */
.disclaimer { background: var(--carta-2); border-top: 1px solid var(--linea); font-size: .85rem; color: var(--tenue); }
.disclaimer .contenitore { padding-top: 56px; padding-bottom: 56px; display: grid; gap: 12px; }
.disclaimer .contenitore > * { max-width: 860px; }
.disclaimer nav { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 8px; }

/* Al telefono: chiamata e WhatsApp compaiono quando l'apertura esce di scena */
.chiama-fisso { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgb(244 238 226 / .96); backdrop-filter: blur(8px);
  box-shadow: 0 -10px 24px -18px rgb(31 39 51 / .35); transition: transform 320ms var(--esce); }
html.js:not([data-oltre]) .chiama-fisso { transform: translateY(110%); }
.chiama-fisso .btn { min-height: 48px; padding: 0 10px; }
body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
@media (min-width: 1020px) { .chiama-fisso { display: none; } body { padding-bottom: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entra, .parola > span, .mappa-tela { animation: none; transform: none; }
  html.js [data-rivela] { transform: none; transition: opacity 300ms ease; }
  .numeri li::before { transition: none; transform: scaleX(1); }
  .segno path { animation: none !important; stroke-dashoffset: 0; }
  .luce { display: none; }
  .rullo { transition: none; }
}

/* ——— Rifiniture ——— */
/* Titolo della home su tre righe al computer */
@media (min-width: 1020px) { .apertura--home h1 { font-size: clamp(3rem, 4.9vw, 4.6rem); } }
/* La mappa come una carta vera: rosa dei venti, scala, legenda su carta */
.rosa { position: absolute; right: 4%; top: 2%; width: 30px; height: 40px; overflow: visible; }
.rosa path { fill: var(--inchiostro); }
.rosa .vuota { fill: none; stroke: var(--inchiostro); stroke-width: 1; }
.rosa text { font: 600 9px var(--sans); fill: var(--inchiostro); }
.scala { position: absolute; right: 4%; bottom: 3%; display: grid; grid-template-columns: auto auto; justify-content: space-between; width: 120px; row-gap: 2px; font: 500 1.05rem/1 var(--mano); color: var(--tenue); }
.scala span { grid-column: 1 / -1; height: 6px; border: 1px solid var(--inchiostro); border-top: 0;
  background: linear-gradient(90deg, var(--inchiostro) 0 25%, transparent 25% 50%, var(--inchiostro) 50% 75%, transparent 75%) bottom / 100% 3px no-repeat; }
.nota--mappa { background: var(--carta); padding: 0 8px 2px 0; }
/* I puntini delle forme non passano dietro ai titoli */
@media (min-width: 1020px) {
  .scena--apertura { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%); }
}

/* ——— Il quaderno, fino in fondo: ogni parte è un oggetto di carta ——— */
:root { --pile: 0 1px 0 #E6DECC, 0 3px 0 -1px var(--foglio), 0 4px 0 -1px #DCD2BE, 0 7px 0 -2px var(--foglio), 0 8px 0 -2px #D2C7B0, 0 26px 50px -24px rgb(31 39 51 / .45); }

/* Apertura: un quaderno aperto. Sinistra il titolo, destra la mappa su carta a quadretti, la piega al centro. */
.quaderno { position: relative; display: grid; background: var(--foglio); border-radius: 4px; box-shadow: var(--pile); }
.quaderno::after { content: ""; position: absolute; left: 12px; top: 14px; bottom: 14px; border-left: 2px dashed rgb(31 39 51 / .16); pointer-events: none; }
.pagina { position: relative; padding: clamp(28px, 4.5vw, 60px) clamp(24px, 4.5vw, 60px) clamp(28px, 4.5vw, 60px) clamp(34px, 4.5vw, 60px); }
.pagina--quadretti { background-image: linear-gradient(rgb(43 75 155 / .08) 1px, transparent 1px), linear-gradient(90deg, rgb(43 75 155 / .08) 1px, transparent 1px); background-size: 22px 22px; border-top: 1px dashed rgb(31 39 51 / .14); }
.mappa.pagina { aspect-ratio: auto; min-height: min(92vw, 520px); }
.nota--mappa { left: 18px; bottom: 14px; }
@media (min-width: 1020px) {
  .apertura--home .contenitore { grid-template-columns: 1fr; }
  .quaderno { grid-template-columns: 1fr 1fr; }
  .quaderno::after { left: 50%; top: 0; bottom: 0; width: 96px; border: 0; transform: translateX(-50%); z-index: 1;
    background: linear-gradient(90deg, transparent, rgb(31 39 51 / .05) 38%, rgb(31 39 51 / .16) 49.6%, rgb(255 255 255 / .55) 50.3%, rgb(31 39 51 / .05) 62%, transparent); }
  .pagina--quadretti { border-top: 0; }
  .mappa.pagina { min-height: 560px; }
  .apertura--home .testo-apertura { align-self: center; }
}

/* Linguette colorate sul bordo destro, come i divisori di un'agenda */
.linguette { position: fixed; right: 0; top: 50%; z-index: 9; display: none; flex-direction: column; gap: 6px; transform: translateY(-50%); }
.linguette a { writing-mode: vertical-rl; transform: rotate(180deg); padding: 16px 9px 16px 12px; background: var(--colore); color: var(--inchiostro);
  font: 600 1.2rem/1 var(--mano); text-decoration: none; border-radius: 0 8px 8px 0; box-shadow: 2px 2px 6px rgb(31 39 51 / .16);
  translate: 6px 0; transition: translate 280ms var(--esce); }
.linguette a:hover, .linguette a:focus-visible, .linguette a[aria-current] { translate: 0 0; }
.linguette a[aria-current] { box-shadow: 2px 2px 10px rgb(31 39 51 / .28); }
@media (min-width: 1320px) { .linguette { display: flex; } }

/* Il registro: voci con i puntini, la spunta a penna, il margine rosso */
.numeri { position: relative; }
.numeri .contenitore { padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(64px, 8vw, 104px); }
.libro { position: relative; max-width: 1000px; margin: 0 auto; padding: 40px clamp(20px, 5vw, 72px) 44px clamp(48px, 9vw, 116px);
  background: var(--foglio) repeating-linear-gradient(180deg, transparent 0 39px, rgb(43 75 155 / .13) 39px 40px) 0 22px; border-radius: 3px; box-shadow: var(--pile); }
.libro::before, .libro::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: rgb(194 85 63 / .55); }
.libro::before { left: clamp(34px, 6.5vw, 86px); } .libro::after { left: calc(clamp(34px, 6.5vw, 86px) + 4px); }
.voci { list-style: none; margin: 20px 0 0; padding: 0; }
.voce { display: grid; grid-template-columns: 1fr 36px; align-items: end; column-gap: 14px; padding: 20px 0 8px; }
.voce-nome { grid-column: 1 / -1; font: 400 1.05rem var(--sans); color: var(--tenue); }
.puntini { display: none; }
.voce b { font: 400 clamp(2.3rem, 5.4vw, 3.8rem)/1 var(--serif); color: var(--inchiostro); }
.spunta { width: 32px; height: 24px; margin-bottom: 8px; }
.nota--margine { margin-top: 18px; transform: rotate(-2deg); transform-origin: 0 50%; }
@media (min-width: 900px) {
  .voce { grid-template-columns: auto 1fr auto 36px; }
  .voce-nome { grid-column: auto; font: 400 1.45rem var(--serif); color: var(--testo); }
  .puntini { display: block; border-bottom: 2px dotted rgb(31 39 51 / .32); margin-bottom: 12px; }
  .nota--margine { position: absolute; right: clamp(20px, 5vw, 72px); bottom: 44px; margin: 0; text-align: right; transform: rotate(-3deg); transform-origin: 100% 50%; }
}

/* Il grafico dei mercati è un ritaglio fissato con il nastro adesivo; il mercato scelto si cerchia a penna */
.ritaglio { rotate: -.5deg; box-shadow: 0 1px 2px rgb(31 39 51 / .08), 0 20px 34px -20px rgb(31 39 51 / .4); border-radius: 2px; }
.adesivo { position: absolute; top: -13px; width: 112px; height: 30px; z-index: 2; background: rgb(217 182 92 / .5); mix-blend-mode: multiply; pointer-events: none;
  clip-path: polygon(2% 0, 98% 4%, 100% 22%, 97% 42%, 100% 62%, 97% 82%, 99% 100%, 1% 96%, 3% 78%, 0 58%, 3% 38%, 0 18%); }
.adesivo--sx { left: -22px; rotate: -30deg; }
.adesivo--dx { right: -22px; rotate: 28deg; }
.schede-mercato { background: transparent; box-shadow: none; padding: 6px 10px; gap: 10px; }
.schede-mercato button { position: relative; background: transparent; color: var(--tenue); font: 600 1.4rem/1 var(--mano); padding: 6px 10px; }
.schede-mercato button[aria-pressed="true"] { background: transparent; color: var(--penna); box-shadow: none; }
.schede-mercato button[aria-pressed="true"]::after { content: ""; position: absolute; inset: 0 -4px; border: 2px solid var(--penna); border-radius: 52% 46% 50% 48% / 58% 50% 46% 44%; rotate: -3deg; animation: cerchia 420ms var(--esce); pointer-events: none; }
@keyframes cerchia { from { opacity: 0; scale: .8; } }

/* Le aree sono schede d'archivio con il foro, sparse sul tavolo */
.sezioni ol { gap: 30px; }
.sezioni li { border-radius: 2px; rotate: var(--r, 0deg); translate: 0 var(--dy, 0px);
  background: var(--foglio) linear-gradient(transparent 52px, rgb(194 85 63 / .5) 52px 53px, transparent 53px) no-repeat;
  transition: box-shadow 300ms ease, rotate 400ms var(--esce), translate 400ms var(--esce), opacity 800ms var(--esce), transform 800ms var(--esce); }
.sezioni li::after { content: ""; position: absolute; top: 16px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--carta); box-shadow: inset 0 1px 3px rgb(31 39 51 / .35); }
.sezioni li:nth-child(1) { --r: -1.6deg; } .sezioni li:nth-child(2) { --r: 1.2deg; --dy: 14px; }
.sezioni li:nth-child(3) { --r: -.8deg; --dy: 4px; } .sezioni li:nth-child(4) { --r: 1.8deg; --dy: 16px; }
.sezioni li > a { padding-top: 40px; }
@media (hover: hover) and (pointer: fine) {
  .sezioni li.visibile:hover, html:not(.js) .sezioni li:hover { transform: none; rotate: 0deg; translate: 0 -8px; box-shadow: var(--ombra-su); }
}

/* La fascia scura è una copertina in pelle cucita, con il guilloche impresso in oro */
.pelle { background: var(--grana), radial-gradient(120% 90% at 28% 18%, #26354F, var(--notte) 58%, #111925); }
.pelle::after { content: ""; position: absolute; inset: 14px; z-index: -1; border: 1.5px dashed rgb(205 174 117 / .42); border-radius: 12px; pointer-events: none; }
@media (max-width: 700px) { .pelle .contenitore { padding-left: 32px; padding-right: 32px; } } /* il testo non tocca la cucitura */

/* La chiusura è una cartolina: messaggio a sinistra, francobollo, timbro e righe dell'indirizzo a destra */
.chiusura { text-align: left; }
.cartolina { position: relative; display: grid; gap: 28px; max-width: 1000px; margin: 0 auto; padding: clamp(28px, 5vw, 56px); background: var(--foglio); border-radius: 3px; box-shadow: var(--pile); rotate: -.7deg; }
.chiusura .cartolina .inviti { justify-content: flex-start; }
.chiusura .cartolina p:not(.etichetta):not(.nota):not(.firma-mano) { margin: 16px 0 0; }
.cartolina h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.firma-blocco { margin-top: 36px; }
.cartolina-lato { position: relative; display: flex; align-items: flex-start; gap: 18px; }
.francobollo { width: 92px; height: 108px; flex: none; padding: 8px; background: #E9D8B2; border: 6px dotted var(--foglio); color: var(--margine); rotate: 3deg; box-shadow: 0 2px 4px rgb(31 39 51 / .15); }
.francobollo svg { width: 100%; height: 100%; }
.francobollo text { font: 600 8px var(--sans); letter-spacing: .12em; fill: currentColor; }
.timbro { width: 120px; height: 120px; rotate: -14deg; margin-left: -46px; margin-top: 26px; fill: none; stroke: rgb(43 75 155 / .5); stroke-width: 1.4; }
.timbro text { fill: rgb(43 75 155 / .62); stroke: none; font: 600 8.6px var(--sans); letter-spacing: .14em; }
.timbro .timbro-centro { font: 400 20px var(--serif); letter-spacing: 0; }
.riga-indirizzo { display: none; }
@media (min-width: 900px) {
  .cartolina { grid-template-columns: 1.45fr 1fr; gap: 0; }
  .cartolina-testo { padding-right: 44px; border-right: 1px solid rgb(31 39 51 / .2); }
  .cartolina-lato { display: block; padding-left: 44px; }
  .francobollo { margin-left: auto; }
  .timbro { position: absolute; right: 74px; top: 34px; margin: 0; }
  .riga-indirizzo { display: block; height: 1px; background: rgb(31 39 51 / .3); margin-top: 44px; }
  .riga-indirizzo:first-of-type { margin-top: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .schede-mercato button[aria-pressed="true"]::after { animation: none; }
}
/* gli oggetti ruotati (nastro adesivo, schede, cartolina) non devono far scorrere la pagina di lato */
main { overflow-x: clip; }

/* ——— Le pagine delle aree sono pagine del quaderno ——— */
.quaderno--sezione { isolation: isolate; grid-template-columns: 1fr; }
.quaderno--sezione .scena--apertura { position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: -1; opacity: .2; }
.linguetta-pagina { position: absolute; right: 18px; top: -32px; padding: 8px 14px; background: var(--colore); color: var(--inchiostro);
  font: 600 1.15rem/1 var(--mano); border-radius: 8px 8px 0 0; box-shadow: 0 -2px 6px rgb(31 39 51 / .1); }
@media (min-width: 1020px) {
  .quaderno--sezione { grid-template-columns: 1fr 1fr; }
  .quaderno--sezione::after { display: none; }
  .quaderno--sezione .scena--apertura { width: 55%; opacity: 1; }
  .linguetta-pagina { writing-mode: vertical-rl; right: -36px; top: 52px; padding: 16px 9px; border-radius: 0 8px 8px 0; box-shadow: 2px 2px 6px rgb(31 39 51 / .16); }
}
/* Tre domande come appunti, con la casella che si spunta a penna */
.appunti li { grid-template-columns: 30px 1fr; column-gap: 18px; align-items: start; }
.appunti li > div { display: grid; gap: 6px; }
@media (min-width: 900px) { .appunti li { grid-template-columns: 30px 1fr; } .appunti li > div { grid-template-columns: 1fr 1.2fr; column-gap: 64px; align-items: baseline; } }
.casella { position: relative; width: 24px; height: 24px; margin-top: 8px; border: 2px solid var(--inchiostro); border-radius: 3px; rotate: -4deg; }
.casella .spunta { position: absolute; left: -3px; top: -13px; width: 38px; height: 30px; max-width: none; margin: 0; }
/* Il dato è un foglietto adesivo del colore dell'area */
.postit { max-width: 440px; margin-top: 64px; padding: 38px 30px 30px; rotate: 1.6deg; border-radius: 2px 2px 18px 2px;
  background: #FBF1D0; background: color-mix(in srgb, var(--colore) 42%, #FFF8E2);
  box-shadow: 0 2px 3px rgb(31 39 51 / .08), 0 22px 30px -18px rgb(31 39 51 / .38); }
.postit::before { display: none; }
.postit b { font-size: clamp(2.8rem, 6vw, 4.2rem); }
.postit p { color: var(--testo); }
.adesivo--centro { left: 50%; top: -14px; margin-left: -56px; rotate: -3deg; }

/* Il menu del telefono è l'indice del quaderno */
.menu-stretto[open] nav { background: var(--foglio) repeating-linear-gradient(180deg, transparent 0 55px, rgb(43 75 155 / .1) 55px 56px) 0 70px; }
.indice-titolo { font-size: 2.2rem; margin: 0 0 6px; transform: rotate(-2deg); transform-origin: 0 50%; }
.menu-stretto nav a:not(.btn) { display: flex; align-items: baseline; gap: 10px; border-bottom: 0; }
.menu-stretto nav a i { flex: 1; border-bottom: 2px dotted rgb(31 39 51 / .3); }
.menu-stretto nav a small { font: 600 1.4rem var(--mano); color: var(--penna); }
.menu-stretto nav a[aria-current] span { color: var(--penna); }

/* Cambiare pagina è voltare un foglio */
::view-transition-old(root) { animation: 460ms var(--muove) both volta-via; transform-origin: 0 50%; }
::view-transition-new(root) { animation: 460ms var(--muove) both volta-arriva; transform-origin: 100% 50%; }
@keyframes volta-via { to { transform: perspective(1800px) rotateY(-12deg) translateX(-4%); opacity: 0; } }
@keyframes volta-arriva { from { transform: perspective(1800px) rotateY(9deg) translateX(4%); opacity: 0; } }

/* Sulla mappa il puntatore è un pennino */
@media (hover: hover) and (pointer: fine) {
  .mappa { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M2 30 L9 15 L21 3 L29 11 L17 23 Z' fill='%231F2733' stroke='%23F4EEE2' stroke-width='1'/%3E%3Cpath d='M2 30 L13 19' stroke='%23F4EEE2' stroke-width='1.2'/%3E%3Ccircle cx='15' cy='17' r='1.8' fill='%23F4EEE2'/%3E%3C/svg%3E") 2 30, crosshair; }
  .collina { cursor: pointer; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
/* il vetro della testata fa da riferimento al pannello fisso: lo apro sotto la testata e alto quanto lo schermo */
.menu-stretto[open] nav { inset: auto; top: 100%; left: 0; right: 0; height: calc(100dvh - 62px); overflow-y: auto; }

/* ——— Dettagli e animazioni del quaderno ——— */

/* Il percorso tratteggiato sulla mappa: si disegna da «tu sei qui» fino all'ultima area */
.percorso { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.percorso .tratteggio { fill: none; stroke: var(--penna); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.percorso .maschera { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: traccia 2800ms var(--muove) 1500ms forwards; }
.tu { position: absolute; transform: translate(-12%, -50%); padding-left: 16px; font: 600 1.25rem/1 var(--mano); color: var(--margine); white-space: nowrap; }
.tu::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-radius: 50%; background: var(--margine); box-shadow: 0 0 0 4px rgb(194 85 63 / .18); }
.collina { text-shadow: 0 0 3px var(--foglio), 0 0 6px var(--foglio), 0 0 10px var(--foglio); }
.nota--mappa { top: 14px; bottom: auto; }
html.js .collina { opacity: 0; translate: 0 6px; animation: pianta 500ms var(--esce) forwards; }
html.js .collina:nth-of-type(1) { animation-delay: 2100ms; } html.js .collina:nth-of-type(2) { animation-delay: 2500ms; }
html.js .collina:nth-of-type(3) { animation-delay: 2900ms; } html.js .collina:nth-of-type(4) { animation-delay: 3300ms; }
@keyframes pianta { to { opacity: 1; translate: 0 0; } }

/* Le note a penna si scrivono da sinistra a destra quando entrano nello schermo */
@keyframes scrive { from { clip-path: inset(-25% 100% -25% -4%); } to { clip-path: inset(-25% -4% -25% -4%); } }
html.js .nota, html.js .firma-mano, html.js .tu { animation: scrive 1300ms cubic-bezier(.45, 0, .25, 1) both; animation-delay: var(--ritardo, 350ms); animation-play-state: paused; }
html.js .apertura .nota, html.js .apertura .tu, html.js .visibile .nota, html.js .visibile .firma-mano, html.js .libro:has(.voce.visibile) .nota { animation-play-state: running; }
html.js .nota--cta { --ritardo: 1500ms; } html.js .nota--appunto { --ritardo: 1200ms; } html.js .nota--mappa { --ritardo: 900ms; } html.js .tu { --ritardo: 1300ms; }
html.js .nota--margine { --ritardo: 1400ms; } html.js .nota--grafico { --ritardo: 700ms; }
html.js .firma-mano { animation-duration: 2400ms; --ritardo: 500ms; }
html.js .firma-blocco .nota { --ritardo: 2700ms; }
html.js .indice-titolo { animation: none; }

/* La cartolina: il francobollo si posa, poi il timbro batte */
html.js .cartolina .francobollo, html.js .cartolina .timbro { opacity: 0; }
.cartolina.visibile .francobollo { animation: posa 700ms var(--esce) 500ms both; }
.cartolina.visibile .timbro { animation: timbra 560ms cubic-bezier(.2, 1.5, .4, 1) 1300ms both; }
@keyframes posa { from { opacity: 0; translate: 0 -24px; rotate: 12deg; } to { opacity: 1; } }
@keyframes timbra { 0% { opacity: 0; scale: 1.7; } 55% { opacity: 1; scale: .93; } 100% { opacity: 1; scale: 1; } }

/* Il nastro adesivo si attacca */
html.js .adesivo { opacity: 0; }
.visibile .adesivo { animation: attacca 520ms var(--esce) 250ms both; }
.visibile .adesivo--dx { animation-delay: 420ms; }
@keyframes attacca { from { opacity: 0; scale: 1.3; } to { opacity: 1; scale: 1; } }

/* Le schede d'archivio arrivano sul tavolo come carte distribuite */
.sezioni li { transition-delay: calc(var(--i, 0) * 110ms); }
.sezioni li:hover { transition-delay: 0ms; }
html.js .sezioni li:not(.visibile) { rotate: calc(var(--r, 0deg) * 6); translate: 0 calc(var(--dy, 0px) - 60px); }
.sezioni li.visibile { transition-duration: 300ms, 900ms, 900ms, 800ms, 800ms; }

/* Nel registro i puntini si tirano come una riga a matita */
.puntini { transform-origin: 0 50%; transition: transform 900ms var(--muove) 350ms; }
html.js .voce:not(.visibile) .puntini { transform: scaleX(0); }

/* L'angolo del quaderno è piegato a orecchia, e si alza quando ci passi sopra */
.quaderno::before { content: ""; position: absolute; right: 0; bottom: 0; z-index: 2; width: 46px; height: 46px; pointer-events: none;
  background: linear-gradient(135deg, #E9E1CF 0%, #F6F1E6 44%, rgb(31 39 51 / .14) 49.5%, var(--carta) 50.5%);
  border-top-left-radius: 4px; transform-origin: 100% 100%; transition: scale 400ms var(--esce); }
@media (hover: hover) and (pointer: fine) { .quaderno:hover::before { scale: 1.35; } }

/* Il nome nella testata si sottolinea a penna */
.marchio b { position: relative; display: inline-block; }
.marchio b::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--penna); border-radius: 2px; transform: scaleX(0); transform-origin: 0 50%; rotate: -1deg; transition: transform 420ms var(--muove); }
@media (hover: hover) and (pointer: fine) { .marchio:hover b::after { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  html.js .nota, html.js .firma-mano, html.js .tu, html.js .collina { animation: none; opacity: 1; translate: none; clip-path: none; }
  .percorso .maschera { animation: none; stroke-dashoffset: 0; }
  html.js .cartolina .francobollo, html.js .cartolina .timbro, html.js .adesivo { opacity: 1; animation: none; }
  html.js .sezioni li:not(.visibile) { rotate: var(--r, 0deg); translate: 0 var(--dy, 0px); }
  html.js .voce:not(.visibile) .puntini { transform: none; }
}
.scala { right: 62px; }
.nota--mappa { background: none; padding: 0; text-shadow: 0 0 3px var(--foglio), 0 0 6px var(--foglio), 0 0 10px var(--foglio); }

/* ——— Tipografia affinata ———
   Newsreader più leggero nei titoli (350, corsivo 300) con l'asse ottico automatico; scrittura a mano La Belle Aurore,
   che ha un solo peso: niente grassetti finti. */
html { font-synthesis: none; font-kerning: normal; }
h1, h2 { font-weight: 350; letter-spacing: -.022em; font-optical-sizing: auto; text-rendering: optimizeLegibility; }
h1 em, h2 em { font-weight: 300; letter-spacing: -.01em; }
h3 { font-weight: 400; letter-spacing: -.01em; }
.marchio b { font-weight: 420; }
.voce b, .dato b, .grafico [data-nome] { font-weight: 350; font-variant-numeric: lining-nums tabular-nums; }
.voce-nome { font-feature-settings: "kern"; }
p { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 3 3; }
.apertura .sotto { font-size: 1.15rem; line-height: 1.55; }
.etichetta { letter-spacing: .18em; }
/* La Belle Aurore: un peso solo, occhio più piccolo di Caveat, quindi un filo più grande e con più interlinea */
.nota, .collina, .tu, .scala, .sezioni .n, .passi .n, .linguette a, .linguetta-pagina, .indice-titolo, .menu-stretto nav a small, .schede-mercato button { font-weight: 400; }
.nota { font-size: 1.5rem; line-height: 1.3; letter-spacing: 0; }
.nota--grafico { font-size: 1.3rem; }
.nota--chiara { font-size: 1.7rem; }
.nota--appunto { font-size: 1.75rem; }
.collina { font-size: 1.45rem; }
@media (min-width: 1020px) { .collina { font-size: 1.65rem; } }
.tu { font-size: 1.2rem; }
.schede-mercato button { font-size: 1.3rem; }
.linguette a, .linguetta-pagina { font-size: 1.1rem; }
.sezioni .n { font-size: 1.5rem; }
/* La Belle Aurore ha il tratto sottile: un filo più grande di Caveat, ma senza esagerare (Massimo: «leggermente troppo grande») */
.nota { font-size: 1.6rem; line-height: 1.25; }
.nota--grafico { font-size: 1.35rem; }
.nota--chiara { font-size: 1.8rem; }
.nota--appunto { font-size: 1.8rem; }
.nota--mappa { font-size: 1.35rem; }
.collina { font-size: 1.5rem; }
@media (min-width: 1020px) { .collina { font-size: 1.75rem; } }
.tu { font-size: 1.25rem; }
.schede-mercato button { font-size: 1.35rem; }
.linguette a, .linguetta-pagina { font-size: 1.18rem; }
.sezioni .n { font-size: 1.5rem; }
.scala { font-size: 1.1rem; }

/* ——— Prova: Mazius Display per titoli e numeri, Roboto Mono per il testo (richiesta di Massimo) ———
   Mazius Display: Alberto Casagrande, Collletttivo (Milano), licenza SIL OFL 1.1 in font/OFL-Mazius-Display.txt.
   Il corsivo è l'«Extra Italic», molto inclinato: è la firma del carattere, va nelle parole in <em>. */
@font-face { font-family: "Mazius Display"; src: url(font/MaziusDisplay-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Mazius Display"; src: url(font/MaziusDisplay-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Mazius Display"; src: url(font/MaziusDisplay-Extraitalic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Mazius Display"; src: url(font/MaziusDisplay-ExtraItalicBold.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
:root { --serif: "Mazius Display", Georgia, serif; --sans: "Roboto Mono", ui-monospace, monospace; }
body { font-size: 15.5px; line-height: 1.65; letter-spacing: -.01em; }
h1, h2, h3 { font-weight: 400; letter-spacing: -.01em; line-height: 1.02; }
h1 { font-size: clamp(2.6rem, 6.2vw, 4.9rem); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h3 { font-size: 1.6rem; }
h1 em, h2 em { font-weight: 400; letter-spacing: 0; }
.marchio b { font-size: 1.45rem; letter-spacing: 0; }
.marchio span { letter-spacing: .12em; }
.etichetta { font-weight: 500; letter-spacing: .12em; }
.btn { font-weight: 500; letter-spacing: -.01em; }
.voce b, .dato b, .grafico [data-nome] { font-weight: 400; letter-spacing: -.01em; }
.voce-nome { font-size: 1.05rem; }
.voce b { line-height: 1.1; padding-top: .2em; } /* il 6 e l'8 di Mazius hanno un ricciolo alto: spazio sopra, così non tocca l'etichetta */
.apertura .sotto { font-size: 1.02rem; }

/* ——— Rifiniture del 9 novembre: piede come un colophon, testo delle schede, dettagli ——— */
::selection { background: rgb(43 75 155 / .2); }
.sezioni li p { font-size: .9rem; line-height: 1.6; }
.apertura .sotto, .sezioni li p { hyphens: manual; -webkit-hyphens: manual; text-wrap: pretty; }
.disclaimer .contenitore { gap: 40px; padding-top: 64px; }
.disclaimer .contenitore > * { max-width: none; }
.colophon { display: grid; gap: 22px; align-content: start; }
.colophon-nome { margin: 0; font: 400 clamp(2.1rem, 4vw, 2.9rem)/1 var(--serif); color: var(--inchiostro); }
.recapiti { margin: 0; border-top: 1px solid var(--linea); }
.recapiti div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--linea); }
.recapiti dt { font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--oro-testo); }
.recapiti dd { margin: 0; color: var(--inchiostro); overflow-wrap: anywhere; }
.legale { display: grid; gap: 12px; align-content: start; font-size: .8rem; line-height: 1.65; }
.legale p { margin: 0; }
.disclaimer a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgb(31 39 51 / .3); transition: color 160ms ease, text-decoration-color 160ms ease; }
.disclaimer a:hover { color: var(--penna); text-decoration-color: currentColor; }
@media (max-width: 520px) { .recapiti div { grid-template-columns: 1fr; gap: 2px; } }
@media (min-width: 900px) { .disclaimer .contenitore { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 72px; } }
.legale p { hyphens: manual; -webkit-hyphens: manual; }
/* La cartolina: il numero scritto a penna sulle righe dell'indirizzo */
@media (min-width: 900px) {
  .riga-indirizzo { height: 44px; margin-top: 0; background: none; border-bottom: 1px solid rgb(31 39 51 / .3); display: flex; align-items: flex-end;
    padding: 0 0 3px 8px; font: 500 1.5rem/1 var(--mano); color: var(--penna); rotate: -1deg; transform-origin: left bottom; }
  .riga-indirizzo:first-of-type { margin-top: 76px; }
}

/* ——— Mercati ——— */
@media (max-width: 759px) { .ritaglio .nota--grafico { font-size: 1.15rem; } }
/* Telefono: i quattro mercati vanno a capo, invece di scorrere fuori dallo schermo */
@media (max-width: 559px) { .schede-mercato { flex-wrap: wrap; overflow: visible; } }

/* ——— Pagine delle aree, 11/11: il titolo sta in tre righe e i pulsanti si vedono subito ——— */
.apertura--sezione h1 { font-size: clamp(2.5rem, 4.4vw, 3.6rem); }
.sezione-testo .contenitore { padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(56px, 7vw, 88px); }
@media (min-width: 1020px) {
  .apertura--sezione .contenitore { min-height: 0; padding-top: 56px; padding-bottom: 72px; }
  .quaderno--sezione { grid-template-columns: 1.2fr .8fr; }
  .quaderno--sezione .scena--apertura { width: 44%; }
  /* le tre domande a sinistra, il foglietto col numero attaccato accanto */
  .foglio-appunti { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); column-gap: 56px; align-items: start; }
  .foglio-appunti .postit { margin-top: 76px; }
}
/* Volta pagina: la prossima area, con la sua linguetta colorata */
.volta-pagina { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px 24px; margin-top: 64px; padding-top: 26px;
  border-top: 1px dashed rgb(31 39 51 / .3); color: var(--inchiostro); text-decoration: none; }
.volta-pagina .etichetta { grid-column: 1 / -1; }
.volta-titolo { display: flex; align-items: baseline; gap: 16px; font: 400 clamp(2rem, 4.4vw, 3.2rem)/1.05 var(--serif); letter-spacing: -.01em; }
.volta-n { align-self: center; padding: 6px 10px; border-radius: 0 6px 6px 0; background: var(--colore); font: 500 .85rem/1 var(--sans); letter-spacing: .08em; }
.volta-pagina .freccia { font-size: clamp(1.8rem, 3.4vw, 2.6rem); transition: translate 200ms var(--esce); }
.volta-pagina:hover .freccia, .volta-pagina:focus-visible .freccia { translate: 8px 0; }
.volta-pagina:hover .volta-titolo { color: var(--penna); }
@media (prefers-reduced-motion: reduce) { .volta-pagina .freccia { transition: none; } }
.postit p, .punti p, .capo p { hyphens: manual; -webkit-hyphens: manual; }
.sezione-testo + .chiusura .contenitore { padding-top: clamp(24px, 4vw, 48px); }

/* ——— Difetti al computer, 11/11 ——— */
/* Apertura della home: titolo, pulsanti affiancati e frase sul rischio stanno in uno schermo da 1366×768 */
.rischio { hyphens: manual; -webkit-hyphens: manual; }
@media (min-width: 1020px) {
  .apertura--home .contenitore { padding-top: 40px; padding-bottom: 72px; }
  .apertura--home h1 { font-size: clamp(3rem, 4.2vw, 4rem); }
  .apertura--home .quaderno { grid-template-columns: 1.12fr .88fr; }
  .apertura--home .quaderno::after { left: 56%; }
  .apertura--home .rischio { margin-top: 52px; }
  .apertura--home .mappa.pagina { min-height: 520px; }
}
/* Mappa: un contorno sottile color carta attorno alle lettere (come sulle carte vere); il tratteggio si ferma prima dei nomi (vivo.js) */
.collina, .tu { text-shadow: 2px 0 var(--foglio), -2px 0 var(--foglio), 0 2px var(--foglio), 0 -2px var(--foglio),
  2px 2px var(--foglio), -2px -2px var(--foglio), 2px -2px var(--foglio), -2px 2px var(--foglio),
  3px 0 1px var(--foglio), -3px 0 1px var(--foglio), 0 3px 1px var(--foglio), 0 -3px 1px var(--foglio); }
.tu { transform: translate(-4.5px, -4.5px); padding: 15px 4px 0 6px; }
.tu::before { top: 0; margin-top: 0; }
/* Grafico: la scritta a penna dal lato libero, in cima o in fondo, legata al cerchio da un filo tratteggiato */
/* La fascia dei mercati chiude con un filo, invece di uno stacco di colore */
.mercati { border-bottom: 1px solid var(--linea); }
/* Pagine delle aree: sulla carta a righe bastano le righe del quaderno; una sola fila di linguette */
.registro .punti li, .registro .punti li:last-child { border: 0; }
@media (min-width: 1320px) { .linguetta-pagina { display: none; } }

/* ——— Dalle foto di Massimo, 11/11 ——— */
/* Cifre a rullo: casella più alta della cifra (le cifre «antiche» di Mazius salgono e scendono), stesso ingombro di prima */
.cifre { --alto: 1.4em; }
.cifra, .fisso { height: var(--alto); line-height: var(--alto); margin-block: -.2em; overflow: hidden; }
.rullo > span { height: var(--alto); line-height: var(--alto); }
/* «salgono e scendono»: dentro il foglio, sopra il valore, invece che a cavallo del bordo */
.ritaglio .nota--grafico { position: static; display: block; width: fit-content; margin: -8px 0 8px auto; padding: 0; background: none; }
/* «parti da qui»: la freccia si ferma sotto il pulsante, senza entrarci */
.nota--cta { top: calc(100% + 6px); }
.nota--cta .freccia-mano { margin-top: -8px; }
.cifra { position: relative; }
.cifra::before { content: attr(data-c); visibility: hidden; }
.rullo { position: absolute; top: 0; left: -.2em; right: -.2em; }
.rullo > span { text-align: center; }

/* Nastro di TradingView: compare solo con il consenso, pronto dietro le quinte finché non ha caricato */
.nastro-diretta { position: absolute; left: 0; right: 0; top: 0; opacity: 0; pointer-events: none; }
.nastro.in-diretta { flex-wrap: wrap; }
.nastro.in-diretta .nastro-diretta { position: static; flex: 1; min-width: 0; opacity: 1; pointer-events: auto; }
.nastro-fonte { display: none; margin: 6px 20px 0; font-size: .66rem; color: var(--tenue); }
.nastro:not([hidden]) + .nastro-fonte { display: block; } /* fonte e spazio del nastro subito, non quando ha caricato: niente salti */
.nastro-fonte a { color: inherit; }

/* ——— 11/11 sera: il nastro non si ferma mai; i grafici con gruppi, strumenti e, nel sito vero, TradingView ——— */
.nastro-diretta iframe { pointer-events: none; } /* il nastro di TradingView si ferma sotto il mouse: il mouse ci passa attraverso */
.strumenti { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 34px; padding: 0 10px; }
.strumenti[hidden] { display: none; }
.strumenti button { min-height: 40px; padding: 0 14px; border: 1px solid var(--linea); border-radius: 999px; background: var(--foglio);
  color: var(--testo); font: 500 .82rem/1 var(--sans); letter-spacing: .02em; cursor: pointer; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; }
.strumenti button[hidden] { display: none; }
.strumenti button[aria-pressed="true"] { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--carta); }
@media (hover: hover) and (pointer: fine) { .strumenti button:not([aria-pressed="true"]):hover { border-color: var(--inchiostro); } }
.strumenti button:active { transform: scale(.97); }
.grafico { position: relative; }
.tela-diretta { position: absolute; left: 0; right: 0; top: 0; height: 440px; opacity: 0; pointer-events: none; }
.tela-diretta .tradingview-widget-container, .tela-diretta .tradingview-widget-container__widget, .tela-diretta iframe { width: 100%; height: 100%; }
.mercati.in-diretta .tela-diretta { position: relative; height: clamp(340px, 40vw, 460px); opacity: 1; pointer-events: auto; }
.mercati.in-diretta .riga { display: none; }
.fonte-diretta { display: none; }
.mercati.in-diretta .fonte-diretta { display: inline; }
.fonte-diretta a { color: inherit; }

/* ——— Controllo legale, 11/11 ——— */
/* L'avvertenza sui rendimenti passati in evidenza in cima a ogni grafico, con costi, cambio e cripto-attività */
.avvertenza { margin: 4px 0 14px; padding: 10px 14px; border-left: 3px solid var(--penna); background: rgb(43 75 155 / .05);
  font-size: .8rem; line-height: 1.55; color: var(--testo); hyphens: manual; -webkit-hyphens: manual; text-wrap: pretty; }
.avvertenza strong { color: var(--inchiostro); }
/* Avviso sui cookie: Rifiuta e Accetta con lo stesso peso */
.consenso { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; max-width: 640px; margin: 0 auto; padding: 18px 20px;
  background: var(--foglio); border: 1px solid var(--linea); border-radius: 6px; box-shadow: 0 18px 40px -16px rgb(31 39 51 / .45);
  font-size: .84rem; line-height: 1.6; }
.consenso[hidden] { display: none; }
.consenso p { margin: 0; hyphens: manual; -webkit-hyphens: manual; }
.consenso a { color: var(--penna); }
.consenso-scelte { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.consenso-scelte .btn { flex: 1 1 140px; min-height: 46px; }
@media (max-width: 1019px) { .consenso { bottom: 88px; } } /* sopra la barra Chiama/WhatsApp del telefono */
.collegamento { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Pagine legali: un foglio di quaderno da leggere */
.documento .contenitore { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(48px, 7vw, 88px); }
.foglio-documento { max-width: 780px; margin: 0 auto; padding: clamp(28px, 5vw, 60px); background: var(--foglio); border-radius: 4px; box-shadow: var(--pile); }
.foglio-documento h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); margin: 14px 0 18px; }
.foglio-documento h2 { font-size: 1.55rem; margin: 38px 0 10px; }
.foglio-documento p, .foglio-documento li { font-size: .92rem; line-height: 1.75; hyphens: manual; -webkit-hyphens: manual; text-wrap: pretty; }
.foglio-documento p { margin: 0 0 12px; }
.foglio-documento ul { margin: 0 0 12px; padding-left: 1.2em; display: grid; gap: 8px; }
.foglio-documento a, .foglio-documento .collegamento { color: var(--penna); }
.da-completare { padding: 1px 6px; border-radius: 3px; background: #F6DF8E; color: var(--inchiostro); font-weight: 600; }
.aggiornato { margin-top: 36px !important; font-size: .8rem !important; color: var(--tenue); }
/* le email lunghe vanno a capo solo se non c'è altro modo; break-word non restringe le colonne delle tabelle */
.foglio-documento, .legale, .recapiti dd { overflow-wrap: break-word; }

/* ——— Caratteri ospitati sul sito (11/11): niente richieste a Google Fonts, quindi nessun indirizzo IP inviato a Google.
   Roboto Mono, La Belle Aurore e Mrs Saint Delafield con licenza SIL OFL 1.1 (font/OFL-*.txt); stessi sottoinsiemi latin e latin-ext di Google. ——— */
@font-face { font-family: 'La Belle Aurore'; font-style: normal; font-weight: 400; font-display: swap; src: url(font/LaBelleAurore-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'La Belle Aurore'; font-style: normal; font-weight: 400; font-display: swap; src: url(font/LaBelleAurore-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Mrs Saint Delafield'; font-style: normal; font-weight: 400; font-display: swap; src: url(font/MrsSaintDelafield-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Mrs Saint Delafield'; font-style: normal; font-weight: 400; font-display: swap; src: url(font/MrsSaintDelafield-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto Mono'; font-style: italic; font-weight: 300 600; font-display: swap; src: url(font/RobotoMono-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Roboto Mono'; font-style: italic; font-weight: 300 600; font-display: swap; src: url(font/RobotoMono-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(font/RobotoMono-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(font/RobotoMono-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ——— Pagine legali, 11/11 sera: in breve, indice, tabella, sezioni raggiungibili sotto la testata fissa ——— */
.in-breve { position: relative; margin: 6px 0 28px; padding: 18px 22px 16px; border-left: 3px solid var(--penna); background: rgb(43 75 155 / .05); border-radius: 0 4px 4px 0; }
.in-breve .nota { position: absolute; top: -18px; right: 16px; margin: 0; font-size: 1.35rem; transform: rotate(-3deg); background: var(--foglio); padding: 0 6px; }
.in-breve ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
.in-breve li { font-size: .9rem; line-height: 1.6; color: var(--inchiostro); }
.indice-documento { margin: 0 0 8px; padding: 14px 0 18px; border-block: 1px dashed var(--linea); }
.indice-documento ol { margin: 8px 0 0; padding-left: 1.4em; columns: 2 16em; column-gap: 32px; }
.indice-documento li { font-size: .85rem; line-height: 1.9; break-inside: avoid; }
.indice-documento a { color: var(--penna); text-decoration: none; }
.indice-documento a:hover { text-decoration: underline; }
.foglio-documento section { scroll-margin-top: 90px; }
.foglio-documento ul ul { margin: 6px 0 6px; gap: 2px; }
.tabella { overflow-x: auto; margin: 4px 0 16px; border: 1px solid var(--linea); border-radius: 4px; }
.tabella table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .82rem; line-height: 1.5; }
.tabella th, .tabella td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.tabella th { font-weight: 600; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--oro-testo); background: rgb(31 39 51 / .03); }
.tabella tr:last-child td { border-bottom: 0; }
.tabella small { color: var(--tenue); }
.consenso p a + a { margin-left: 4px; }
html.js .foglio-documento .nota { animation-play-state: running; } /* «in breve» e la nota della 404 */
.tabella th { white-space: nowrap; }
.tabella td:first-child { font-weight: 500; }
/* Telefono: la tabella dei cookie diventa una scheda per strumento, con l'etichetta accanto a ogni valore */
@media (max-width: 599px) {
  .tabella { border: 0; overflow: visible; }
  .tabella table { min-width: 0; }
  .tabella thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabella tr { display: block; margin-bottom: 10px; padding: 10px 14px; border: 1px solid var(--linea); border-radius: 4px; }
  .tabella td { display: grid; grid-template-columns: 7.2em 1fr; gap: 10px; padding: 3px 0; border: 0; }
  .tabella td::before { content: attr(data-etichetta); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--oro-testo); padding-top: .15em; }
  .tabella td:first-child { display: block; padding-bottom: 6px; font-size: .9rem; }
  .tabella td:first-child::before { content: none; }
}

/* ——— SEO, 11/11: l'etichetta sopra il titolo fa parte dell'h1 (parole chiave), con lo stesso aspetto di prima ——— */
.h1-etichetta { display: block; margin-bottom: 18px; }
.apertura h1:has(> .h1-etichetta) { margin-top: 0; }
.foglio-documento > .nota { margin-top: 28px; transform: rotate(-2deg); transform-origin: 0 50%; }

/* ——— Telefono, 11/11 sera: la stessa cura del computer, senza toccare il computer ——— */
.menu-stretto .chiudi, .menu-stretto[open] .apri { display: none; }
.menu-stretto[open] .chiudi { display: inline; }
html:has(.menu-stretto[open]) .chiama-fisso { transform: translateY(110%); } /* a menu aperto la barra non copre l'indice */
@media (max-width: 1019px) {
  /* Apertura della home: la mappa viene prima del titolo, così sta nel primo schermo come al computer */
  .apertura--home .contenitore { padding-top: 20px; padding-bottom: 36px; }
  .apertura--home .mappa { order: -1; animation-delay: 40ms; }
  .apertura--home .mappa.pagina { min-height: 0; aspect-ratio: 1 / .86; border-top: 0; border-bottom: 1px dashed rgb(31 39 51 / .14); }
  .apertura--home .rischio { margin-top: 44px; }
  .numeri .contenitore { padding-top: 44px; }
  /* Aree di tocco da almeno 44 px */
  .marchio { display: inline-block; padding-block: 7px; }
  .strumenti button { min-height: 44px; }
  .disclaimer nav { gap: 0 22px; }
  .disclaimer nav a, .disclaimer nav .collegamento { display: inline-flex; align-items: center; min-height: 44px; }
  .indice-documento li { line-height: 1.5; }
  .indice-documento a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Niente testo sotto i 12 px */
  .nastro .cartellino, .recapiti dt { font-size: .75rem; }
}
@media (max-width: 759px) {
  /* Schede delle aree compatte: la forma a sinistra, il testo a destra; tutte e quattro in poco più di uno schermo */
  .sezioni ol { gap: 18px; margin-top: 32px; }
  .sezioni li { rotate: calc(var(--r, 0deg) * .4); translate: 0 0;
    background: var(--foglio) linear-gradient(transparent 36px, rgb(194 85 63 / .5) 36px 37px, transparent 37px) no-repeat; }
  .sezioni li > a { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "forma n" "forma titolo" "forma testo" "forma vai";
    column-gap: 16px; row-gap: 4px; align-items: start; padding: 50px 20px 22px 12px; }
  .scena--scheda { grid-area: forma; align-self: center; width: 84px; height: 112px; margin: 0; }
  .sezioni .n { grid-area: n; } .sezioni li h3 { grid-area: titolo; font-size: 1.4rem; text-wrap: balance; }
  .sezioni li p { grid-area: testo; } .sezioni .vai { grid-area: vai; margin-top: 6px; }
}
@media (max-width: 599px) {
  /* Pagine legali: il foglio va da bordo a bordo, le righe tornano comode */
  .documento .contenitore { padding-left: 0; padding-right: 0; }
  .foglio-documento { border-radius: 0; padding: 32px 20px 40px; }
  .in-breve { padding: 16px 14px 14px 16px; }
}
@media (max-width: 559px) {
  /* Pulsanti a tutta larghezza, uno sotto l'altro; se il testo va a capo resta centrato e arioso */
  .inviti { flex-direction: column; align-items: stretch; }
  .inviti .btn { width: 100%; text-align: center; line-height: 1.3; padding: 12px 18px; }
}

/* ——— Liste di controllo (Front-End Checklist, HTML5 Boilerplate), 11/11 sera ——— */
/* Collegamento per saltare al contenuto: invisibile finché non lo raggiunge la tastiera */
.salta { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 12px 18px; background: var(--inchiostro); color: var(--carta); font-weight: 600; text-decoration: none; border-radius: var(--raggio); transition: top 160ms var(--esce); }
.salta:focus { top: 12px; }
main:focus { outline: none; }
/* Testata fissa in alto e barra in basso sul telefono: chi scorre a un'ancora o con la tastiera non finisce sotto */
html { scroll-padding-top: 96px; }
@media (max-width: 1019px) { html { scroll-padding-bottom: 84px; } }
/* Percorso nelle pagine delle aree */
.briciole ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .55em; list-style: none; margin: 0 0 6px; padding: 0;
  font: 500 .75rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.briciole li + li::before { content: "›"; margin-right: .55em; }
.briciole a { display: inline-block; padding: 13px 0; margin: -13px 0; color: inherit; text-underline-offset: 3px; }
.briciole [aria-current] { color: var(--testo); }
/* Stampa: si stampa il testo (pagine legali comprese), senza barre, animazioni, grafici dal vivo e avvisi */
@media print {
  @page { margin: 18mm 16mm; }
  html { scroll-padding: 0; }
  body { background: #fff; color: #111; font-size: 11pt; padding: 0; }
  .testata, .linguette, .chiama-fisso, .consenso, .nastro, .salta, .menu-stretto, .inviti, .tela-diretta, canvas, .mappa, .rosa,
  .strumenti, .schede-mercato, .comandi, .nota[aria-hidden="true"], .volta-pagina, .indice-documento { display: none !important; }
  html.js [data-rivela], .entra, .parola > span { opacity: 1 !important; transform: none !important; animation: none !important; filter: none !important; }
  .notte, .pelle { background: #fff !important; color: #111 !important; }
  main section { background: #fff !important; } /* il grafico si stampa intero, senza l'animazione di comparsa */
  .notte p, .notte h2, .notte h3, .notte .etichetta, .notte em, .passi .n { color: #111 !important; }
  .pelle::after, .quaderno::after, .quaderno::before { display: none; }
  .quaderno, .foglio-documento, .libro, .sezioni li, .ritaglio { box-shadow: none !important; background: #fff !important; rotate: none !important; translate: none !important; }
  a { color: #111; }
  .foglio-documento a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
  h1, h2, h3 { break-after: avoid; }
  li, .in-breve, .tabella tr, .voce { break-inside: avoid; } /* le sezioni lunghe possono andare a pagina nuova a metà */
}

/* ——— Mercati solo con TradingView, 11/11 sera: prima del consenso un riquadro invita ad attivare i grafici ——— */
.invito-diretta { display: grid; justify-items: start; align-content: center; gap: 14px; min-height: clamp(340px, 40vw, 460px); margin-top: 16px;
  padding: 28px clamp(20px, 4vw, 40px); border: 1.5px dashed rgb(31 39 51 / .22); border-radius: var(--raggio);
  background: repeating-linear-gradient(to bottom, transparent 0 39px, rgb(43 75 155 / .07) 39px 40px); }
.invito-diretta p { margin: 0; max-width: 46ch; }
.invito-titolo { font: 400 1.7rem/1.1 var(--serif); color: var(--inchiostro); }
.invito-nota, .invito-bloccato { font-size: .8rem; color: var(--tenue); }
.invito-nota a { color: var(--penna); }
.invito-bloccato, .mercati.bloccato :is([data-attiva], .invito-nota) { display: none; }
.mercati.bloccato .invito-bloccato { display: block; }
.mercati.in-diretta .invito-diretta { display: none; }
@media print { .invito-diretta { display: none !important; } }