/* 01-tokens.css */
/* ============================================================
   Pedra Rubja Technologies, gettoni.

   La tavolozza viene dai due filmati (campionata con ffmpeg su
   riquadri di 200 pixel), la struttura dal riferimento seasats.com:
   lavate in sfumatura, riquadri bianchi, mono maiuscolo. Ogni
   rapporto qui sotto e' calcolato, non stimato. Vedi DESIGN.md §3.
   ============================================================ */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/sourceserif-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: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/sourceserif-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Reddit Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/redditsans-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: 'Reddit Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/redditsans-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Azeret Mono';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/azeretmono-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: 'Azeret Mono';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/azeretmono-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- fondi ------------------------------------------------------
     La carta e' la foschia del tramonto; il bianco e' quello del
     riferimento; le due lavate sono l'acqua sotto costa e la luce
     del tramonto dei due filmati. */
  --paper:    #F8F6F1;
  --white:    #FFFDFD;
  --glass:    #DCEAE4;
  --sand:     #F4E6CF;
  --tile:     #E9EFEC;   /* le celle etichetta */
  --deep-top: #1F6C70;   /* la cima della lavata scura: solo titoli bianchi, 6,0:1 */
  --deep-2:   #12525B;   /* riquadri sulla fascia scura, bianco 8,7:1 */
  --deep:     #0B3A44;   /* l'abisso: fascia, piede, quadrato del bottone; bianco 12,2:1 */
  --deep-3:   #072830;

  /* --- inchiostri -------------------------------------------------- */
  --ink:      #1C2321;   /* 14,8:1 su carta, 12,9 su vetro */
  --body:     #46514F;   /*  7,6:1 su carta,  6,6 su vetro */
  --muted:    #5E6A68;   /*  5,0:1 su carta,  4,5 su vetro: etichette e note */
  --on-deep:      #FFFDFD;
  --on-deep-soft: #A9C6C8;   /* 6,8:1 su deep */

  /* --- accenti --------------------------------------------------------
     L'oro e il ciano sono GRAFICA sulla carta e parole solo nelle
     varianti scure. Sopra la pellicola ogni parola e' bianca. */
  --gold:        #B8843A;   /* 3,1:1 su carta: filetti, pallini, barre */
  --gold-text:   #8A5A17;   /* 5,5:1 su carta, 4,8 su sabbia */
  --gold-lit:    #E8B86A;   /* 6,8:1 su deep */
  --signal:      #2993BD;   /* 3,2:1: la mappa, i dati */
  --signal-text: #1C6E93;   /* 5,3:1 */
  --signal-lit:  #63C6E6;   /* 6,3:1 su deep: rotte e punti */

  /* le tre linee di missione */
  --env:      #2E8B6E;  --env-text: #1F6B54;   /* 3,9 / 5,9:1 */
  --def:      #4A6478;  --def-text: #3B5163;   /* 5,7 / 7,7:1 */
  --ene:      #B8843A;  --ene-text: #8A5A17;

  /* --- filetti ---------------------------------------------------------- */
  --line:     #D9DCD6;
  --line-ui:  #7C8683;   /* bordo dei campi: 3,5 su carta, 3,0 su vetro */
  --line-deep: rgba(255, 253, 253, .18);
  --focus:    #1C6E93;
  --alert:    #A33A2C;   /* 6,1:1 su carta */
  --alert-lit: #F2A08F;

  /* --- la velatura sopra i filmati: abisso, non nero ------------------- */
  --veil-ink: 6, 24, 30;

  /* --- tipografia --------------------------------------------------------
     Tre famiglie come il riferimento. Il serif non scende mai sotto i
     24 px, il mono non compone mai un paragrafo. */
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:  'Reddit Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:  'Azeret Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --t-h1:    clamp(2.6rem, 1.5rem + 4.6vw, 5.4rem);
  --t-h2:    clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
  --t-h3:    1.25rem;
  --t-big:   clamp(2.4rem, 1.6rem + 2.6vw, 3.8rem);
  --t-lede:  clamp(1.1rem, 1rem + .4vw, 1.3rem);
  --t-body:  1.0625rem;
  --t-small: .9375rem;
  --t-mono:  .75rem;
  --t-mono-l: .875rem;

  /* --- forma ----------------------------------------------------------------
     Del riferimento: 8 su bottoni e riquadri, 4 sul quadrato
     dell'icona e sulle voci del selettore, 12 sulle piastrelle. */
  --r:       8px;
  --r-sm:    4px;
  --r-lg:    12px;
  --r-field: 6px;

  --shadow-float: 0 2px 6px rgba(6, 24, 30, .08), 0 20px 48px -20px rgba(6, 24, 30, .36);

  /* --- ritmo ------------------------------------------------------------------ */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;
  --s4: 1rem;    --s5: 1.5rem;  --s6: 2rem;
  --s7: 3rem;    --s8: 4rem;    --s9: 6rem;
  --s10: 8rem;

  --gutter:   clamp(1.25rem, .6rem + 2.4vw, 3.5rem);
  --measure:  36rem;
  --page-max: 86rem;
  --header-h: 64px;

  --ease: cubic-bezier(.215, .61, .355, 1);
}

@media (max-width: 900px) {
  :root { --header-h: 56px; }
}

/* 02-base.css */
/* ============================================================
   Fondamenta: reimpostazione, tipografia, il bottone, il
   cartellino, il selettore, gli elenchi.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
p + p { margin-top: .9em; }

/* I titoli sono in serif a peso normale, mai grassetto: e' il
   riferimento. Gli h3 restano in sans a 500, perche' sotto i 24 px il
   serif non va. */
h1, h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: 'opsz' 60;
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); line-height: 1.06; }
h3, h4 { margin: 0; font-size: var(--t-h3); font-weight: 500; line-height: 1.25; letter-spacing: -.008em; color: var(--ink); }
.lede { font-size: var(--t-lede); line-height: 1.45; color: var(--body); text-wrap: pretty; }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1em; }
.prose a { color: var(--signal-text); }
strong, b { font-weight: 600; color: var(--ink); }
.ul { color: var(--ink); font-weight: 500; }

a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}
[id] { scroll-margin-top: calc(var(--header-h) + var(--s5)); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  padding: .7rem 1.1rem; background: var(--deep); color: var(--white);
  border-radius: var(--r); text-decoration: none; font-weight: 500;
}
.skip-link:focus { top: .6rem; }

/* Il segnaposto si vede. */
.todo { color: var(--alert); text-decoration: underline dotted currentColor; text-underline-offset: 3px; }

.wrap { width: min(100% - var(--gutter) * 2, var(--page-max)); margin-inline: auto; }

/* ------------------------------------------------------------
   IL MONO. Etichette, bottoni, tabelle, voci di menu, piede:
   maiuscolo, 12 o 14 pixel, senza spaziatura. Mai un paragrafo.
   ------------------------------------------------------------ */
.mono, .tag, .btn, .seg label, .nav-link, .menu-toggle, .lang-switch,
.specs dt, .specs dd, .step-n, .row-n, .cap-tag, .log, .rail, .rm-year,
.fund-v, .m-meta dt, .m-meta dd, .footer-h, .footer-legal, .mono-list,
.hero-meta dt, .table thead th, .breadcrumb, .vh-kicker, .vh-note, .m-pin-n, .m-base-n, .m-item i, .m-area, .step-meta, .row-meta {
  font-family: var(--mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.2;
}

/* ------------------------------------------------------------
   IL CARTELLINO: mono in una cella chiara a raggio 4, con il
   pallino della linea quando serve. Sopra la pellicola la cella e'
   bianca e il testo inchiostro: contrasto interno al cartellino.
   ------------------------------------------------------------ */
.tag {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0 0 var(--s4);
  padding: .4rem .6rem .36rem;
  background: var(--tile);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: var(--t-mono);
}
.tag--white { background: var(--white); }
.lane-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--gold); }
[data-lane='env'] .lane-dot, .lane-dot[data-lane='env'] { background: var(--env); }
[data-lane='def'] .lane-dot, .lane-dot[data-lane='def'] { background: var(--def); }
[data-lane='ene'] .lane-dot, .lane-dot[data-lane='ene'] { background: var(--ene); }

/* ------------------------------------------------------------
   IL BOTTONE: il segno del sito. Riquadro bianco, etichetta mono,
   quadrato abisso con la freccia all'estremita' destra. Sulla
   fascia scura e sopra la pellicola resta bianco.
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1.1rem;
  padding: .3rem .3rem .3rem 1.1rem;
  background: var(--white);
  color: var(--ink);
  border: 0;
  border-radius: var(--r);
  font-size: var(--t-mono-l);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.btn-ico {
  width: 2.25rem; height: 2.25rem; flex: none;
  display: grid; place-items: center;
  background: var(--deep);
  color: var(--white);
  border-radius: var(--r-sm);
  transition: background .2s var(--ease), transform .25s var(--ease);
}
.btn-ico svg { width: 16px; height: 16px; }
.btn:hover .btn-ico { background: var(--deep-2); transform: translateX(2px); }
.btn:hover { background: #fff; }

.btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line-ui); }
.btn--ghost .btn-ico { background: var(--tile); color: var(--ink); }
.btn--ghost:hover { background: var(--white); }
.btn--deep { background: var(--deep); color: var(--white); }
.btn--deep .btn-ico { background: var(--white); color: var(--deep); }
.btn--deep:hover { background: var(--deep-2); }
.btn--deep:hover .btn-ico { background: #fff; }
.btn--film { box-shadow: 0 10px 30px -10px rgba(6, 24, 30, .5); }
.btn--sm { padding: .22rem .22rem .22rem .85rem; font-size: var(--t-mono); gap: .8rem; }
.btn--sm .btn-ico { width: 1.9rem; height: 1.9rem; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

/* ------------------------------------------------------------
   IL SELETTORE: riquadro bianco a raggio 8 con dentro le voci a
   raggio 4; la voce scelta e' piena abisso. Quattro radio: senza
   JavaScript e' gia' un selettore.
   ------------------------------------------------------------ */
.seg {
  display: inline-flex; flex-wrap: wrap; gap: .2rem;
  margin: 0; padding: .3rem;
  border: 0;
  background: var(--white);
  border-radius: var(--r);
}
.seg input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.seg label {
  padding: .6rem .95rem .55rem;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: var(--t-mono-l);
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.seg label:hover { background: var(--tile); }
.seg input:checked + label { background: var(--deep); color: var(--white); }
.seg input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 600px) {
  .seg label { font-size: var(--t-mono); padding: .55rem .7rem .5rem; }
}

/* ------------------------------------------------------------
   Elenchi.
   ------------------------------------------------------------ */
.mono-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--s4); font-size: var(--t-mono); color: var(--ink); }
.mono-list li { padding: .32rem .55rem .28rem; background: var(--tile); border-radius: var(--r-sm); }
.check-list { display: grid; gap: .6rem; margin-top: var(--s5); }
.check-list li { position: relative; padding-left: 1.6rem; }
.check-list li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 10px; height: 10px; border-radius: 2px; background: var(--gold);
}
.note { margin-top: var(--s5); max-width: 62ch; font-size: var(--t-small); color: var(--muted); }
.note--light { color: var(--on-deep-soft); }

/* ------------------------------------------------------------
   Entrate in scena, sempre dietro `.js`. Tre reti in app.js.
   ------------------------------------------------------------ */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* 03-layout.css */
/* ============================================================
   Impaginato: fasce, testata, pannello del menu, piede.
   ============================================================ */

/* ------------------------------------------------------------
   Le fasce: le lavate del riferimento nei colori dei filmati.
   ------------------------------------------------------------ */
.section { padding-block: clamp(3.5rem, 2rem + 5vw, 7rem); }
.section--tight { padding-block: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.band--glass { background: linear-gradient(180deg, var(--glass) 0%, var(--sand) 100%); }
.band--sand { background: linear-gradient(180deg, var(--sand) 0%, var(--glass) 100%); }
.band--white { background: var(--white); }
.band--deep {
  background: linear-gradient(180deg, var(--deep-top) 0%, var(--deep) 46%, var(--deep-3) 100%);
  color: var(--on-deep-soft);
}
.band--deep h1, .band--deep h2, .band--deep h3, .band--deep strong, .band--deep b { color: var(--white); }
.band--deep .lede, .band--deep .prose { color: var(--on-deep); }
.band--deep .tag { background: rgba(255, 253, 253, .12); color: var(--white); }
.band--deep .note { color: var(--on-deep-soft); }
.band--deep .btn--ghost { color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 253, 253, .38); }
.band--deep .btn--ghost .btn-ico { background: rgba(255, 253, 253, .14); color: var(--white); }
.band--deep .btn--ghost:hover { background: rgba(255, 253, 253, .08); }
.band--deep .mono-list li { background: rgba(255, 253, 253, .12); color: var(--white); }
.band--deep .check-list li::before { background: var(--gold-lit); }
/* due lavate uguali di fila sono una lavata sola */
.band--glass + .band--glass, .band--sand + .band--sand, .band--white + .band--white { padding-top: 0; }

/* Intestazione di sezione: cartellino, titolo, sommario a destra. */
.section-head {
  display: grid; gap: var(--s4) var(--gutter);
  margin-bottom: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
}
.section-head h2 { max-width: 16ch; }
.sh-intro { align-self: end; max-width: 44ch; font-size: var(--t-lede); line-height: 1.45; }
.band--deep .sh-intro { color: var(--on-deep); }
.section-head--center { text-align: center; justify-items: center; }
.section-head--center h2 { max-width: 22ch; }
.section-head--center .tag { margin-inline: auto; }
@media (min-width: 901px) {
  .section-head:not(.section-head--center) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; }
}

/* Due colonne: intestazione a sinistra, corpo a destra. */
.two { display: grid; gap: var(--s6) var(--gutter); }
.two-head h2 { max-width: 14ch; }
.two-head .lede { margin-top: var(--s4); max-width: 34ch; }
@media (min-width: 901px) { .two { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* ------------------------------------------------------------
   TESTATA. Sottile, sempre piena in carta: il palco parte sotto di
   lei, quindi la pellicola non ci passa mai sotto.
   ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--s5);
  height: var(--header-h);
  padding-inline: var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

/* Il marchio del cliente come maschera: il PNG bianco su trasparente
   fa da mask-image e sotto passa currentColor. Dove la maschera non
   c'e', la parola scritta. */
.site-brand { flex: none; text-decoration: none; color: var(--ink); }
.wordmark {
  display: block; height: 22px; aspect-ratio: 1976 / 187;
  background: currentColor;
  -webkit-mask: url('/media/img/wordmark-white.png') no-repeat left center / contain;
  mask: url('/media/img/wordmark-white.png') no-repeat left center / contain;
}
.wordmark-fallback { display: none; }
@supports not (mask: url('/media/img/wordmark-white.png')) {
  .wordmark { aspect-ratio: auto; background: none; -webkit-mask: none; mask: none; height: auto; }
  .wordmark-fallback { display: block; font-family: var(--sans); font-weight: 700; letter-spacing: .04em; font-size: 1rem; white-space: nowrap; }
  .wordmark-fallback small { font-weight: 400; letter-spacing: 0; }
}
.wordmark--light { color: var(--white); height: 20px; }

.nav-main { margin-inline: auto; }
.nav-list { display: flex; align-items: center; gap: clamp(.9rem, .3rem + 1.4vw, 2rem); }
.nav-item { position: relative; }
.nav-link {
  display: inline-block; padding: .55rem 0;
  color: var(--ink); font-size: var(--t-mono); text-decoration: none; white-space: nowrap;
  border-bottom: 1.5px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.nav-link:hover { color: var(--signal-text); }
.nav-link[aria-current='page'] { border-bottom-color: var(--ink); }

/* Il pannello delle missioni: si apre su :hover e :focus-within, senza
   JavaScript. Galleggia, quindi ha l'ombra: e' fra le tre cose che
   stanno sopra qualcos'altro. */
.nav-panel {
  position: absolute; top: calc(100% + 10px); left: -14px; z-index: 50;
  min-width: 17rem; padding: .5rem;
  background: var(--white); border-radius: var(--r); box-shadow: var(--shadow-float);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-item:hover > .nav-panel, .nav-item:focus-within > .nav-panel { opacity: 1; visibility: visible; transform: none; }
.nav-panel a {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 .6rem;
  padding: .6rem .7rem; border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; font-family: var(--sans); font-size: var(--t-small); font-weight: 500;
}
.nav-panel a small { grid-column: 2; font-weight: 400; color: var(--muted); font-size: .8125rem; }
.nav-panel a:hover { background: var(--tile); }

.header-tools { display: flex; align-items: center; gap: .5rem; flex: none; }
.lang-switch {
  display: inline-grid; place-items: center; min-width: 2.4rem; height: 2.4rem;
  border-radius: var(--r); background: var(--white); color: var(--ink);
  font-size: var(--t-mono); text-decoration: none;
}
.lang-switch:hover { background: var(--tile); }
.menu-toggle {
  display: inline-flex; align-items: center; gap: .6rem;
  height: 2.4rem; padding: 0 .8rem 0 .95rem;
  background: var(--white); border-radius: var(--r);
  color: var(--ink); font-size: var(--t-mono); text-decoration: none;
}
.menu-toggle:hover { background: var(--tile); }
.menu-bars { display: grid; gap: 4px; }
.menu-bars span { display: block; width: 14px; height: 1.5px; background: currentColor; }

@media (max-width: 1100px) {
  .nav-main { display: none; }
  .header-tools { margin-inline-start: auto; }
  .cta-contact { display: none; }
}
@media (max-width: 480px) {
  .wordmark { height: 18px; }
  .menu-toggle { padding-inline: .7rem; }
}

/* ------------------------------------------------------------
   IL PANNELLO DEL MENU: quello del riferimento. Da destra, un terzo
   dello schermo, una pila di fasce colorate dalle chiare alle scure.
   Si apre con :target prima che il JavaScript arrivi.
   ------------------------------------------------------------ */
.site-menu { position: fixed; inset: 0; z-index: 60; opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), visibility .28s; }
.site-menu:target, .site-menu.is-open { opacity: 1; visibility: visible; }
.menu-scrim { position: absolute; inset: 0; background: rgba(6, 24, 30, .42); }
.menu-inner {
  position: absolute; top: .6rem; right: .6rem; bottom: .6rem;
  width: min(26rem, calc(100% - 1.2rem));
  display: flex; flex-direction: column;
  overflow-y: auto;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
  transform: translateX(24px);
  transition: transform .32s var(--ease);
}
.site-menu:target .menu-inner, .site-menu.is-open .menu-inner { transform: none; }
html.menu-open { overflow: hidden; }
.menu-head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem .7rem 1.4rem; }
.menu-title { font-family: var(--mono); font-size: var(--t-mono); text-transform: uppercase; color: var(--muted); }
.menu-close {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--white); color: var(--ink);
  font-size: 1.4rem; line-height: 1; text-decoration: none;
}
.menu-row {
  display: flex; align-items: center; gap: .8rem;
  padding: 1.05rem 1.4rem;
  color: var(--ink); text-decoration: none; font-size: 1.05rem; font-weight: 500;
  border-top: 1px solid rgba(6, 24, 30, .08);
  transition: background .2s var(--ease);
}
.menu-row:hover { background: rgba(255, 253, 253, .5); }
.menu-row[aria-current='page'] { text-decoration: underline; text-underline-offset: 5px; }
.menu-row--sub { padding-left: 1.4rem; font-weight: 400; }
.menu-n { font-family: var(--mono); font-size: var(--t-mono); color: var(--muted); width: 1.6rem; }
.menu-group[data-tint='glass'] { background: var(--glass); }
.menu-group[data-tint='sand'] { background: var(--sand); }
.menu-group[data-tint='deep-2'] { background: var(--deep-2); }
.menu-group[data-tint='deep'] { background: var(--deep); }
.menu-group[data-tint='deep-2'] .menu-row, .menu-group[data-tint='deep'] .menu-row { color: var(--white); border-top-color: rgba(255, 253, 253, .12); }
.menu-group[data-tint='deep-2'] .menu-row:hover, .menu-group[data-tint='deep'] .menu-row:hover { background: rgba(255, 253, 253, .08); }
.menu-group[data-tint='deep-2'] .menu-n, .menu-group[data-tint='deep'] .menu-n { color: var(--on-deep-soft); }
.menu-foot {
  margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 1.1rem 1.4rem;
  font-family: var(--mono); font-size: var(--t-mono); text-transform: uppercase;
}
.menu-foot a { color: var(--ink); text-decoration: none; }
.menu-langs { display: flex; gap: .9rem; }
.menu-langs a[aria-current='true'] { text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------------------
   PIEDE. Abisso, voci in mono.
   ------------------------------------------------------------ */
.site-footer { background: var(--deep-3); color: var(--on-deep-soft); }
.footer-body { padding-block: var(--s8) var(--s6); }
.footer-top { display: grid; gap: var(--s7) var(--gutter); }
@media (min-width: 901px) { .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.footer-blurb { margin-top: var(--s5); max-width: 32ch; font-size: var(--t-small); }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: var(--s6) var(--s5); }
.footer-h { margin: 0 0 var(--s4); font-size: var(--t-mono); color: var(--white); }
.footer-col ul { display: grid; gap: .55rem; font-size: var(--t-small); }
.footer-col a { color: var(--on-deep-soft); text-decoration: none; }
.footer-col a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.footer-legal {
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--line-deep);
  font-size: var(--t-mono); line-height: 1.7; text-transform: none;
  display: grid; gap: var(--s3); max-width: 90ch;
}
.footer-legal .footer-startup { color: var(--on-deep-soft); }
.footer-copy { display: flex; flex-wrap: wrap; gap: var(--s4); text-transform: uppercase; }
.footer-copy a { color: var(--on-deep-soft); }

/* ------------------------------------------------------------
   Apertura di pagina interna: cartellino, titolo in serif a
   sinistra, sommario e bottoni a destra, poi la fotografia larga.
   ------------------------------------------------------------ */
.page-hero { padding-block: clamp(2.2rem, 1.2rem + 3vw, 4rem) clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--s5); font-size: var(--t-mono); color: var(--muted); }
.breadcrumb li + li::before { content: '/'; margin-right: .5rem; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ph-grid { display: grid; gap: var(--s5) var(--gutter); }
.ph-text h1 { max-width: 16ch; }
.ph-side .lede { max-width: 42ch; }
@media (min-width: 901px) {
  .ph-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
}
.ph-figure { position: relative; margin-top: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); border-radius: var(--r-lg); overflow: hidden; }
.ph-figure img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.hero-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: var(--s5);
  margin: var(--s6) 0 0; padding-top: var(--s5); border-top: 1px solid var(--line);
}
.hero-meta dt { font-size: var(--t-mono); color: var(--muted); }
.hero-meta dd { margin: .3rem 0 0; font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; color: var(--ink); }
@media (max-width: 700px) { .ph-figure img { aspect-ratio: 4 / 3; } }

/* 04-scrolly.css */
/* ============================================================
   I due filmati.

   DUE FILMATI, DUE MESTIERI, DUE FORMATI. L'apertura mostra il
   drone al lavoro e riproduce e basta: <video> muto in ciclo. Il
   racconto mostra come e' fatto e si scrubba: 957 JPEG a 48 fps
   disegnati su canvas.

   Il palco parte SOTTO la barra ed e' alto quanto lo schermo meno la
   barra: la pellicola non passa mai sotto la testata. Il testo sta
   sulla pellicola nuda, bianco, con una velatura leggera in abisso e
   un alone sulle lettere. Niente schede sopra i filmati.
   ============================================================ */

/* ------------------------------------------------------------
   L'apertura. Titolo in alto al centro su due righe di serif, riga
   mono sotto, bottone in basso al centro: la composizione del
   riferimento, e la riga alta e' la calma su tutti gli stacchi.
   ------------------------------------------------------------ */
.videohero {
  position: relative;
  height: calc(100svh - var(--header-h));
  min-height: 34rem;
  overflow: hidden;
  background: var(--deep-3);
  isolation: isolate;
}
.film-stage { position: absolute; inset: 0; }
.vh-video, .vh-poster, .vh-poster img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
.vh-poster { z-index: 0; }
.vh-video { z-index: 1; }

/* La velatura: leggera e locale. Una sfumatura dall'alto sotto il
   titolo, una dal basso sotto il bottone, e in mezzo la pellicola
   nuda. Si misura sulle scatole vere (DESIGN.md §11). */
.vh-veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(var(--veil-ink), .50) 0%, rgba(var(--veil-ink), .42) 22%, rgba(var(--veil-ink), .16) 36%, rgba(var(--veil-ink), 0) 48%),
    linear-gradient(to top, rgba(var(--veil-ink), .46) 0%, rgba(var(--veil-ink), .22) 18%, rgba(var(--veil-ink), 0) 34%);
}

.vh-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  padding: clamp(2.2rem, 1.2rem + 3.5vh, 4rem) var(--gutter) 0;
  text-align: center;
}
/* L'alone: tre strati che seguono le lettere, e' lui a fare il
   contrasto dove il cielo e' chiaro (memoria «filmato di apertura
   luminoso»). */
.vh-title {
  color: var(--white);
  font-size: clamp(2.6rem, 1.4rem + 5vw, 5.8rem);
  line-height: .98;
  max-width: 19ch;
  margin-inline: auto;
  text-shadow: 0 1px 2px rgba(6, 24, 30, .5), 0 0 26px rgba(6, 24, 30, .38), 0 0 80px rgba(6, 24, 30, .42);
}
/* La riga di servizio sta in BASSO, nella fascia scura, non sotto il
   titolo: a 14 px chiede 4,5:1 e sul cielo grigio della fregata stava
   a 1,3:1. Spostata, passa senza un punto di velatura in piu'
   (lezione Teide, Boscolo, Gruppo Star: prima si sposta il testo
   piccolo, poi si vela). */
.vh-kicker {
  margin: 0 0 var(--s2);
  color: var(--white);
  font-size: var(--t-mono-l);
  text-align: center;
  text-shadow: 0 1px 2px rgba(6, 24, 30, .6), 0 0 18px rgba(6, 24, 30, .5);
}
.vh-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: var(--s4);
  padding: 0 var(--gutter) clamp(1.8rem, 1rem + 3vh, 3.2rem);
}
.vh-note { color: rgba(255, 253, 253, .88); font-size: var(--t-mono); text-shadow: 0 1px 2px rgba(6, 24, 30, .6); }

/* Il caso stretto e' un altro strumento: `cover` tiene la fetta
   centrale, il titolo va a tutta larghezza. */
@media (max-width: 900px) {
  .vh-video, .vh-poster img { object-position: 50% 50%; }
  .vh-title { font-size: clamp(2.3rem, 1.2rem + 6vw, 3.4rem); }
  .vh-veil {
    background:
      linear-gradient(to bottom, rgba(var(--veil-ink), .54) 0%, rgba(var(--veil-ink), .42) 22%, rgba(var(--veil-ink), .14) 38%, rgba(var(--veil-ink), 0) 50%),
      linear-gradient(to top, rgba(var(--veil-ink), .54) 0%, rgba(var(--veil-ink), .26) 20%, rgba(var(--veil-ink), 0) 36%);
  }
  .vh-note { display: none; }
}

/* ------------------------------------------------------------
   Il racconto.

   L'altezza della sezione E' la velocita' dello scrub: i 957
   fotogrammi si distribuiscono su `altezza - 100svh`. A 1400vh su
   uno schermo da 900 sono 12 px per fotogramma a 48 fps.
   ------------------------------------------------------------ */
.scrolly { position: relative; height: calc(var(--seq-vh, 1400) * 1vh); background: var(--deep-3); }
@media (max-width: 900px) { .scrolly { height: calc(var(--seq-vh-n, 1800) * 1vh); } }

/* Il palco e' una griglia: una riga vuota e una riga in fondo con due
   colonne, il giornale di bordo a sinistra e le didascalie a destra.
   Nessuno deve conoscere l'altezza dell'altro. */
.scrolly-stage {
  position: sticky; top: var(--header-h);
  height: calc(100svh - var(--header-h));
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 31rem);
  grid-template-rows: 1fr auto;
  align-items: end;
  gap: 0 var(--s6);
  padding: 0 var(--gutter) clamp(1.6rem, 1rem + 2.4vh, 2.8rem);
}
.scrolly-canvas, .scrolly-poster { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.scrolly-poster img { width: 100%; height: 100%; object-fit: cover; }
[data-painted='true'] .scrolly-poster { opacity: 0; }

/* LA VELATURA DEL RACCONTO. Dal basso, in abisso, piatta sotto il
   blocco e a zero entro il 55%. Il basso e' la fascia piu' scura in
   cinque capitoli su sei (DESIGN.md §8); l'alone fa il resto. */
.scrolly-veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top,
    rgba(var(--veil-ink), .56) 0%,
    rgba(var(--veil-ink), .48) 24%,
    rgba(var(--veil-ink), .18) 42%,
    rgba(var(--veil-ink), 0) 56%);
}

/* Le didascalie e l'apertura stanno nella STESSA cella, in basso a
   destra. Il motore scrive opacita' e trasformazione sulla fase e
   sull'apertura: niente transform qui sopra. */
.scrolly-lead, .scrolly-captions { grid-area: 2 / 2; position: relative; z-index: 3; width: 100%; }
.scrolly-captions { display: grid; }
.scrolly-phase { grid-area: 1 / 1; opacity: 0; pointer-events: none; }

.cap { max-width: 31rem; color: var(--white); }
.cap-tag {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 var(--s4);
  padding: .42rem .6rem .38rem;
  background: var(--white); color: var(--ink);
  border-radius: var(--r-sm);
  font-size: var(--t-mono);
}
.cap-n { color: var(--muted); }
.cap-title {
  color: var(--white);
  font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.3rem);
  line-height: 1.04;
  text-shadow: 0 1px 2px rgba(6, 24, 30, .5), 0 0 24px rgba(6, 24, 30, .4), 0 0 70px rgba(6, 24, 30, .4);
}
.cap-text {
  margin-top: var(--s3);
  max-width: 44ch;
  color: rgba(255, 253, 253, .94);
  text-shadow: 0 1px 2px rgba(6, 24, 30, .55), 0 0 22px rgba(6, 24, 30, .45);
}
.cap--lead .cap-title { font-size: clamp(1.9rem, 1.2rem + 2.3vw, 3.2rem); }
.lead-hint { display: inline-flex; align-items: center; gap: .6em; margin-top: var(--s4); color: rgba(255, 253, 253, .85); font-size: var(--t-mono); font-family: var(--mono); text-transform: uppercase; }
.lead-hint span { width: 18px; height: 28px; flex: none; border: 1.4px solid rgba(255, 253, 253, .6); border-radius: 9px; position: relative; }
.lead-hint span::after {
  content: ''; position: absolute; left: 50%; top: 6px; width: 2px; height: 6px; margin-left: -1px;
  border-radius: 1px; background: var(--white);
  animation: scrollcue 1.9s var(--ease) infinite;
}
@keyframes scrollcue { 0%, 100% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(8px); opacity: .2; } }

/* L'ENTRATA: come il bottone dell'apertura del riferimento. Le tre
   righe salgono da sotto una dopo l'altra, `.6s` con la sua curva e
   `.12s` di ritardo per indice. */
.scrolly-phase .cap-tag, .scrolly-phase .cap-title, .scrolly-phase .cap-text {
  opacity: 0; transform: translateY(12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.scrolly-phase.is-active .cap-tag, .scrolly-phase.is-active .cap-title, .scrolly-phase.is-active .cap-text { opacity: 1; transform: none; }
.scrolly-phase.is-active .cap-title { transition-delay: .12s; }
.scrolly-phase.is-active .cap-text { transition-delay: .24s; }

/* ------------------------------------------------------------
   IL GIORNALE DI BORDO. In basso a sinistra: la riga del capitolo
   (posizione e giorno di mare) accesa da :has() sulla fase attiva,
   e sotto la guida da 0 a 200 giorni che il motore riempie, con la
   tacca ogni venticinque. Il motore scrive l'opacita' di
   `.scrolly-counter` come rovescio dell'apertura.
   ------------------------------------------------------------ */
.scrolly-counter { grid-area: 2 / 1; position: relative; z-index: 3; align-self: end; max-width: 26rem; }
.log { position: relative; height: 1.4rem; margin-bottom: var(--s3); }
.log-line {
  position: absolute; left: 0; bottom: 0;
  display: flex; flex-wrap: wrap; gap: .3rem 1rem;
  color: var(--white); font-size: var(--t-mono);
  text-shadow: 0 1px 2px rgba(6, 24, 30, .6), 0 0 16px rgba(6, 24, 30, .5);
  opacity: 0; transition: opacity .4s var(--ease);
  white-space: nowrap;
}
.log-line b { font-weight: 500; color: inherit; }
.log-line i { font-style: normal; color: rgba(255, 253, 253, .82); }
.log-line[data-k='1'] { opacity: 1; }
.scrolly-stage:has(.scrolly-phase.is-active:not(:nth-child(1))) .log-line[data-k='1'] { opacity: 0; }
.scrolly-stage:has(.scrolly-phase:nth-child(2).is-active) .log-line[data-k='2'],
.scrolly-stage:has(.scrolly-phase:nth-child(3).is-active) .log-line[data-k='3'],
.scrolly-stage:has(.scrolly-phase:nth-child(4).is-active) .log-line[data-k='4'],
.scrolly-stage:has(.scrolly-phase:nth-child(5).is-active) .log-line[data-k='5'],
.scrolly-stage:has(.scrolly-phase:nth-child(6).is-active) .log-line[data-k='6'] { opacity: 1; }

.rail { display: flex; align-items: center; gap: .6rem; color: rgba(255, 253, 253, .85); font-size: var(--t-mono); text-shadow: 0 1px 2px rgba(6, 24, 30, .6); }
.rail-l { flex: none; }
.rail-track { position: relative; flex: 1; height: 2px; background: rgba(255, 253, 253, .3); }
.rail-track .tick { position: absolute; top: -3px; left: var(--at); width: 1px; height: 8px; background: rgba(255, 253, 253, .55); }
.scrolly-progress { position: absolute; inset: 0; overflow: hidden; }
.scrolly-progress i { display: block; height: 100%; width: 0; background: var(--white); }

@media (max-width: 900px) {
  .scrolly-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto; gap: var(--s4) 0; }
  .scrolly-lead, .scrolly-captions { grid-area: 2 / 1; }
  .scrolly-counter { grid-area: 3 / 1; max-width: none; }
  .cap { max-width: none; }
  .cap-title { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 1.9rem); }
  .cap-text { font-size: var(--t-small); }
  .log { height: auto; margin-bottom: var(--s2); }
  .log-line { position: static; }
  .log-line:not([data-k='1']) { display: none; }
  .scrolly-stage:has(.scrolly-phase:nth-child(2).is-active) .log-line[data-k='2'],
  .scrolly-stage:has(.scrolly-phase:nth-child(3).is-active) .log-line[data-k='3'],
  .scrolly-stage:has(.scrolly-phase:nth-child(4).is-active) .log-line[data-k='4'],
  .scrolly-stage:has(.scrolly-phase:nth-child(5).is-active) .log-line[data-k='5'],
  .scrolly-stage:has(.scrolly-phase:nth-child(6).is-active) .log-line[data-k='6'] { display: flex; }
  .scrolly-stage:has(.scrolly-phase.is-active:not(:nth-child(1))) .log-line[data-k='1'] { display: none; }
  /* IL CASO STRETTO: il testo va a tutta larghezza e `cover` tiene la
     fetta centrale, che e' un'altra inquadratura. Piu' densa e piu'
     alta. */
  .scrolly-veil {
    background: linear-gradient(to top,
      rgba(var(--veil-ink), .64) 0%,
      rgba(var(--veil-ink), .56) 34%,
      rgba(var(--veil-ink), .22) 54%,
      rgba(var(--veil-ink), 0) 68%);
  }
}

/* ------------------------------------------------------------
   Il ripiego senza JavaScript. `data-mode="static"` e' quello che
   parte nell'HTML; il motore promuove. L'ATTRIBUTO STA SULLA
   SEZIONE STESSA (lezione PodoClinic).
   ------------------------------------------------------------ */
.scrolly[data-mode='static'] { height: auto; background: var(--paper); }
.scrolly[data-mode='static'] .scrolly-stage {
  position: static; height: auto; overflow: visible;
  display: block; align-items: normal; padding: 0;
}
.scrolly[data-mode='static'] .scrolly-canvas, .scrolly[data-mode='static'] .scrolly-veil, .scrolly[data-mode='static'] .scrolly-counter { display: none; }
.scrolly[data-mode='static'] .scrolly-poster { position: relative; height: clamp(22rem, 56svh, 40rem); }
.scrolly[data-mode='static'] .scrolly-lead { width: min(100% - var(--gutter) * 2, var(--page-max)); margin-inline: auto; padding-block: var(--s7) 0; }
.scrolly[data-mode='static'] .scrolly-captions {
  display: grid; gap: var(--s8);
  width: min(100% - var(--gutter) * 2, var(--page-max)); margin-inline: auto;
  padding-block: var(--s7) var(--s9);
}
.scrolly[data-mode='static'] .scrolly-phase { grid-area: auto; opacity: 1; pointer-events: auto; display: grid; gap: var(--s5); }
.scrolly[data-mode='static'] .cap { max-width: 40rem; color: var(--ink); }
.scrolly[data-mode='static'] .cap-tag { background: var(--tile); }
.scrolly[data-mode='static'] .cap-title, .scrolly[data-mode='static'] .cap-text { color: var(--ink); text-shadow: none; }
.scrolly[data-mode='static'] .cap-text { color: var(--body); }
.scrolly[data-mode='static'] .scrolly-phase .cap-tag, .scrolly[data-mode='static'] .scrolly-phase .cap-title, .scrolly[data-mode='static'] .scrolly-phase .cap-text { opacity: 1; transform: none; }
.scrolly[data-mode='static'] .lead-hint { display: none; }
.scrolly[data-mode='static'] .scrolly-still img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); }
[data-mode='scrub'] .scrolly-still { display: none; }

/* 05-blocks.css */
/* ============================================================
   I blocchi.

   Tre regole valgono per tutto il file: i riquadri sono bianchi sulla
   lavata, senza bordo e senza ombra; le righe si separano con un
   filetto; l'accento vive nel cartellino, nel pallino e nel filetto
   sopra il blocco, mai in una barra a sinistra.
   ============================================================ */

/* ------------------------------------------------------------
   Le tre frasi: serif che scende dallo scuro al chiaro, e sotto la
   fila di piccole fotografie con il cartellino.
   ------------------------------------------------------------ */
.st-lines { max-width: 38ch; display: grid; gap: .35em; }
.st-line {
  font-family: var(--serif); font-weight: 400; font-variation-settings: 'opsz' 60;
  font-size: clamp(1.7rem, 1.1rem + 2.5vw, 3.4rem); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance;
  color: color-mix(in oklab, var(--ink) calc(100% - var(--i) * 26%), var(--muted));
}
.st-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin-top: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.st-tile { position: relative; border-radius: var(--r); overflow: hidden; }
.st-tile img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.st-tile .tag { position: absolute; left: .6rem; top: .6rem; margin: 0; }
.st-text { margin-top: var(--s6); max-width: 46ch; font-size: var(--t-lede); line-height: 1.45; }
@media (max-width: 900px) { .st-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------
   La piattaforma: la vetrina del riferimento.
   ------------------------------------------------------------ */
.pf-figure { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.pf-figure img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.pf-tag { position: absolute; left: .8rem; top: .8rem; margin: 0; }
.pf-grid { display: grid; gap: var(--s7) var(--gutter); margin-top: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); }
@media (min-width: 901px) { .pf-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
@media (max-width: 700px) { .pf-figure img { aspect-ratio: 4 / 3; } }

.feat-list { display: grid; }
.feat {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .2rem var(--s4);
  padding: var(--s4) 0; border-top: 1px solid var(--line);
}
.feat:last-child { border-bottom: 1px solid var(--line); }
.feat-ico { grid-row: 1 / 3; width: 22px; height: 22px; color: var(--ink); }
.feat-ico svg { width: 22px; height: 22px; }
.feat b { font-weight: 600; color: var(--ink); }
.feat > span:last-child { font-size: var(--t-small); max-width: 46ch; }
.band--deep .feat { border-color: var(--line-deep); }
.band--deep .feat-ico, .band--deep .feat b { color: var(--white); }

/* La scheda tecnica: righe mono, etichetta a sinistra e valore a destra. */
.specs { display: grid; margin: 0; }
.spec {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  padding: .7rem 0; border-top: 1px solid var(--line);
}
.specs > .spec:last-child { border-bottom: 1px solid var(--line); }
.spec dt { font-size: var(--t-mono); color: var(--muted); }
.spec dd { margin: 0; font-size: var(--t-mono-l); color: var(--ink); text-align: right; }
.specs--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
.specs--two > .spec:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line); }
.specs--tight .spec { padding: .5rem 0; }
.band--deep .spec { border-color: var(--line-deep); }
.band--deep .spec dt { color: var(--on-deep-soft); }
.band--deep .spec dd { color: var(--white); }
@media (max-width: 700px) { .specs--two { grid-template-columns: 1fr; } .specs--two > .spec:nth-last-child(2):nth-child(odd) { border-bottom: 0; } }

/* Le configurazioni: selettore e pannelli con :has(). Senza :has()
   restano tutti in colonna, che e' una pagina corretta. */
.seg-wrap { display: grid; gap: var(--s6); }
.seg-panels { display: grid; gap: var(--s6); }
.seg-panel {
  display: grid; gap: var(--s6) var(--gutter);
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  background: var(--white); border-radius: var(--r);
}
@media (min-width: 901px) { .seg-panel { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.seg-text h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.1; letter-spacing: -.01em; }
.seg-text p { margin-top: var(--s3); max-width: 48ch; }
.seg-for { font-size: var(--t-small); }
.seg-wrap:has(.seg input:checked) .seg-panel { display: none; }
.seg-wrap:has(.seg input:nth-of-type(1):checked) .seg-panel[data-i='0'],
.seg-wrap:has(.seg input:nth-of-type(2):checked) .seg-panel[data-i='1'],
.seg-wrap:has(.seg input:nth-of-type(3):checked) .seg-panel[data-i='2'],
.seg-wrap:has(.seg input:nth-of-type(4):checked) .seg-panel[data-i='3'] { display: grid; }

/* ------------------------------------------------------------
   Passi in fila: numerali mono, filetto sopra, quattro colonne.
   ------------------------------------------------------------ */
.step-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--s6) var(--s5); }
.step { padding-top: var(--s4); border-top: 1px solid var(--line-ui); display: grid; gap: .5rem; align-content: start; }
.step-n { font-size: var(--t-mono); color: var(--gold-text); }
.step p { font-size: var(--t-small); max-width: 34ch; }
.step-meta { margin-top: .3rem; font-size: var(--t-mono); color: var(--muted); }
.band--deep .step { border-color: rgba(255, 253, 253, .3); }
.band--deep .step-n { color: var(--gold-lit); }
.band--deep .step-meta { color: var(--on-deep-soft); }

/* ------------------------------------------------------------
   Le tre linee: riquadri bianchi con la fotografia sopra, il
   cartellino con il pallino della linea, un filetto della linea in
   cima al corpo.
   ------------------------------------------------------------ */
.lane-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.lane-card {
  display: flex; flex-direction: column;
  background: var(--white); border-radius: var(--r); overflow: hidden;
  color: inherit; text-decoration: none;
  transition: transform .3s var(--ease);
}
.lane-card:hover { transform: translateY(-3px); }
.lane-card figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.lane-body { display: flex; flex-direction: column; flex: 1; padding: var(--s5); border-top: 2px solid var(--gold); }
.lane-card[data-lane='env'] .lane-body { border-top-color: var(--env); }
.lane-card[data-lane='def'] .lane-body { border-top-color: var(--def); }
.lane-card[data-lane='ene'] .lane-body { border-top-color: var(--ene); }
.lane-body h3 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; line-height: 1.1; letter-spacing: -.01em; }
.lane-body > p { margin-top: var(--s3); font-size: var(--t-small); }
.lane-go {
  margin-top: auto; padding-top: var(--s5);
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--mono); font-size: var(--t-mono); text-transform: uppercase; color: var(--ink);
}
.lane-go .btn-ico { width: 1.9rem; height: 1.9rem; }
.lane-card:hover .lane-go .btn-ico { transform: translateX(2px); }
@media (max-width: 900px) { .lane-cards { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   I numeri: serif grande sopra, riga in sans sotto, filetto sopra.
   ------------------------------------------------------------ */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: var(--s5); margin: 0; }
.stat { padding-top: var(--s4); border-top: 1px solid var(--line-ui); }
.stat dd { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--t-big); line-height: 1; letter-spacing: -.01em; color: var(--ink); }
.stat dt { margin-top: .6rem; font-size: var(--t-small); max-width: 22ch; }
.band--deep .stat { border-color: rgba(255, 253, 253, .3); }
.band--deep .stat dd { color: var(--white); }
.band--deep .stat dt { color: var(--on-deep-soft); }

/* ------------------------------------------------------------
   Righe numerate.
   ------------------------------------------------------------ */
.row-list { border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: var(--s3) var(--s5);
  padding: var(--s5) 0; border-bottom: 1px solid var(--line);
}
.row-n { font-size: var(--t-mono-l); color: var(--gold-text); padding-top: .25rem; }
.row-body p { margin-top: .45rem; max-width: 56ch; font-size: var(--t-small); }
.row-meta { align-self: start; padding: .36rem .55rem .3rem; background: var(--tile); border-radius: var(--r-sm); font-size: var(--t-mono); color: var(--ink); white-space: nowrap; }
.band--deep .row-list, .band--deep .row { border-color: var(--line-deep); }
.band--deep .row-n { color: var(--gold-lit); }
.band--deep .row-meta { background: rgba(255, 253, 253, .12); color: var(--white); }
@media (max-width: 700px) { .row { grid-template-columns: 2.6rem minmax(0, 1fr); } .row-meta { grid-column: 2; justify-self: start; } }

/* ------------------------------------------------------------
   Tabella: mono nelle intestazioni, filetti fra le righe.
   ------------------------------------------------------------ */
.table-scroll { position: relative; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.table th, .table td { padding: .85rem 1rem .85rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.table thead th { font-size: var(--t-mono); color: var(--muted); border-bottom-color: var(--line-ui); }
.table tbody th { font-weight: 500; color: var(--ink); white-space: nowrap; }

/* ------------------------------------------------------------
   Domande: righe con il segno nel quadrato.
   ------------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s5) 0; cursor: pointer; list-style: none;
  font-size: var(--t-h3); font-weight: 500; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq-sign { position: relative; flex: none; width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--tile); }
.faq-sign::before, .faq-sign::after { content: ''; position: absolute; inset: 0; margin: auto; background: var(--ink); }
.faq-sign::before { width: 12px; height: 1.6px; }
.faq-sign::after { width: 1.6px; height: 12px; transition: transform .2s var(--ease); }
.faq details[open] .faq-sign::after { transform: scaleY(0); }
.faq-body { padding-bottom: var(--s5); max-width: 60ch; }

/* ------------------------------------------------------------
   Immagine e testo.
   ------------------------------------------------------------ */
.split { display: grid; gap: var(--s6) var(--gutter); align-items: center; }
.split-figure { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.split-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split-body h2 { max-width: 16ch; }
.split-body .prose { margin-top: var(--s4); }
@media (min-width: 901px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--flip .split-figure { order: 2; }
}

/* ------------------------------------------------------------
   La galleria del laboratorio: tre colonne, rapporto fisso, un
   riquadro bianco attorno come il riferimento fa attorno alle
   piastrelle.
   ------------------------------------------------------------ */
.gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.gal-item figure { background: var(--white); border-radius: var(--r); padding: .5rem; }
.gal-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); }
.gal-item figcaption { padding: .6rem .3rem .2rem; font-family: var(--mono); font-size: var(--t-mono); text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) { .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------
   La tabella di marcia: quattro tappe con l'anno in mono, la tappa
   in corso segnata.
   ------------------------------------------------------------ */
.rm { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: var(--s6) var(--s5); }
.rm-step { position: relative; padding-top: var(--s4); border-top: 1px solid var(--line-ui); display: grid; gap: .5rem; align-content: start; }
.rm-step.is-now { border-top: 2px solid var(--gold); }
.rm-year { display: flex; align-items: center; gap: .6rem; font-size: var(--t-mono-l); color: var(--ink); }
.rm-year i { font-style: normal; padding: .25rem .45rem .2rem; background: var(--gold); color: var(--white); border-radius: var(--r-sm); font-size: .6875rem; }
.rm-step p { font-size: var(--t-small); max-width: 32ch; }
.band--deep .rm-step { border-color: rgba(255, 253, 253, .3); }
.band--deep .rm-step.is-now { border-top-color: var(--gold-lit); }
.band--deep .rm-year { color: var(--white); }
.band--deep .rm-year i { background: var(--gold-lit); color: var(--deep-3); }

/* L'uso dei fondi: barre in scala. */
.funds { display: grid; gap: var(--s4); }
.fund { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 3.2rem; align-items: center; gap: var(--s4); }
.fund-k { font-size: var(--t-small); color: var(--ink); }
.fund-bar { height: 10px; border-radius: 2px; background: var(--tile); overflow: hidden; }
.fund-bar i { display: block; height: 100%; width: calc(var(--pct) * 1%); background: var(--deep); }
.fund-v { font-size: var(--t-mono-l); color: var(--ink); text-align: right; }
.band--deep .fund-k, .band--deep .fund-v { color: var(--white); }
.band--deep .fund-bar { background: rgba(255, 253, 253, .14); }
.band--deep .fund-bar i { background: var(--signal-lit); }

/* La squadra: due riquadri. Nessun ritratto: non ne abbiamo. */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: var(--s4); }
.member { padding: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); background: var(--white); border-radius: var(--r); }
.member h3 { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; line-height: 1.1; letter-spacing: -.01em; }
.member > p:not(.tag) { margin-top: var(--s3); font-size: var(--t-small); }

/* La citazione. */
.quote { max-width: 34ch; margin: 0; }
.quote blockquote { margin: 0; }
.quote p { font-family: var(--serif); font-weight: 400; font-variation-settings: 'opsz' 60; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.7rem); line-height: 1.18; letter-spacing: -.01em; color: var(--ink); }
.quote figcaption { margin-top: var(--s5); font-family: var(--mono); font-size: var(--t-mono); text-transform: uppercase; color: var(--muted); }
.band--deep .quote p { color: var(--white); }
.band--deep .quote figcaption { color: var(--on-deep-soft); }

/* La chiamata: riquadro con titolo a sinistra e bottoni a destra. */
.cta-box {
  display: grid; gap: var(--s5) var(--gutter); align-items: end;
  padding: clamp(1.6rem, 1rem + 2.4vw, 3rem);
  background: var(--white); border-radius: var(--r-lg);
}
.band--deep .cta-box { background: rgba(255, 253, 253, .08); }
.cta-body h2 { max-width: 18ch; }
.cta-body .lede { margin-top: var(--s4); max-width: 44ch; }
.cta-box .actions { margin-top: 0; }
@media (min-width: 901px) { .cta-box { grid-template-columns: minmax(0, 1fr) auto; } }

/* Collegamenti alle altre pagine: righe con filetto. */
.pl-list { border-top: 1px solid var(--line); }
.pl-list a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: center; gap: var(--s4);
  padding: var(--s4) 0; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
}
.pl-list a:not([data-lane]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; }
.pl-list b { font-weight: 500; }
.pl-list span:not(.lane-dot):not(.btn-ico) { font-size: var(--t-small); color: var(--body); }
.pl-list .btn-ico { width: 1.9rem; height: 1.9rem; }
.pl-list a:hover .btn-ico { transform: translateX(3px); }
.band--deep .pl-list, .band--deep .pl-list a { border-color: var(--line-deep); color: var(--white); }
.band--deep .pl-list span:not(.lane-dot):not(.btn-ico) { color: var(--on-deep-soft); }
@media (max-width: 700px) { .pl-list a, .pl-list a:not([data-lane]) { grid-template-columns: minmax(0, 1fr) auto; } .pl-list span:not(.lane-dot):not(.btn-ico) { grid-column: 1; } .pl-list a[data-lane] .lane-dot { display: none; } }

/* Una missione di esempio: fotografia e scheda. */
.mission-card { display: grid; gap: 0; background: var(--white); border-radius: var(--r-lg); overflow: hidden; }
.mc-figure img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mc-body { padding: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); }
.mc-body h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.1; letter-spacing: -.01em; }
.mc-body > p:not(.tag):not(.m-example) { margin-top: var(--s3); }
@media (min-width: 901px) { .mission-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.m-meta { display: grid; gap: 0; margin: var(--s5) 0 0; }
.m-meta > div { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--s3); padding: .55rem 0; border-top: 1px solid var(--line); }
.m-meta dt { font-size: var(--t-mono); color: var(--muted); }
.m-meta dd { margin: 0; font-size: var(--t-mono-l); color: var(--ink); }
.m-example { margin-top: var(--s4); font-family: var(--mono); font-size: var(--t-mono); text-transform: uppercase; color: var(--gold-text); }

/* Contatti. */
.contact-grid { display: grid; gap: var(--s7) var(--gutter); }
@media (min-width: 901px) { .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.contact-side h2 { max-width: 14ch; }
.contact-side .lede { margin-top: var(--s4); max-width: 36ch; }
.contact-aside { display: grid; gap: var(--s4); margin: var(--s6) 0 0; }
.contact-aside dt { font-size: var(--t-mono); font-family: var(--mono); text-transform: uppercase; color: var(--muted); }
.contact-aside dd { margin: .25rem 0 0; color: var(--ink); }
.contact-aside a { color: var(--ink); }
.contact-form { background: var(--white); border-radius: var(--r-lg); padding: clamp(1.25rem, .8rem + 1.6vw, 2.2rem); }

/* 06-forms.css */
/* ============================================================
   Moduli. Il bordo di un campo e' interfaccia: --line-ui sta a 3,7:1
   sul bianco.
   ============================================================ */
.form-grid { display: grid; gap: var(--s4); }
.field { display: grid; gap: .4rem; }
.field label, .fieldset-legend { font-family: var(--mono); font-size: var(--t-mono); text-transform: uppercase; color: var(--muted); }
.req { color: var(--alert); }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem .9rem;
  border: 1px solid var(--line-ui); border-radius: var(--r-field);
  background: var(--paper); color: var(--ink);
  font: inherit; font-size: var(--t-small);
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.field input[aria-invalid='true'], .field textarea[aria-invalid='true'] { border-color: var(--alert); }
.field-error { font-size: var(--t-mono); font-family: var(--mono); text-transform: uppercase; color: var(--alert); }
@media (min-width: 620px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid > *:not(.field--half) { grid-column: 1 / -1; }
}
.choice { border: 0; margin: 0; padding: 0; }
.seg--form { margin-top: .5rem; background: var(--paper); }
.consents { display: grid; gap: var(--s3); }
.consent { display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: start; }
.consent input { margin: .3rem 0 0; width: 17px; height: 17px; accent-color: var(--deep); }
.consent label { font-size: .8125rem; color: var(--muted); line-height: 1.5; }
.consent label a { text-decoration: underline; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.form-note { margin: 0; font-size: .8125rem; color: var(--muted); }
.form-done { display: none; }
form[data-state='done'] { display: none; }
form[data-state='done'] + .form-done { display: block; padding: var(--s5); background: var(--glass); border-radius: var(--r); }
.form-done h3 { margin-bottom: var(--s2); }

/* 07-panels.css */
/* ============================================================
   Il pannello di contatto. Entra al 40% dello scorrimento o dopo 25
   secondi, mai all'apertura, trattenuto sopra i filmati e sopra la
   carta. Chiuso una volta, resta chiuso sette giorni. Galleggia
   davvero, quindi ha l'ombra.
   ============================================================ */
.b2b-panel {
  position: fixed; right: var(--s4); bottom: var(--s4); z-index: 70;
  width: min(24rem, calc(100vw - var(--s4) * 2));
  max-height: min(78svh, 42rem); overflow-y: auto;
  padding: var(--s5);
  background: var(--white); border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
  transform: translateY(14px); opacity: 0;
  transition: opacity .34s var(--ease), transform .34s var(--ease);
}
.b2b-panel.is-open { opacity: 1; transform: none; }
.b2b-close {
  position: absolute; top: var(--s3); right: var(--s3);
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); background: var(--tile); color: var(--ink);
  font-size: 1.1rem; cursor: pointer;
}
.b2b-panel h2 { font-size: 1.5rem; margin-bottom: var(--s4); padding-right: var(--s6); }
.b2b-intro { font-size: var(--t-small); color: var(--muted); margin-bottom: var(--s4); }
.b2b-choices { display: grid; gap: var(--s2); }
.b2b-option {
  display: grid; gap: .15rem; width: 100%; text-align: left;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); font: inherit; cursor: pointer;
}
.b2b-option:hover { border-color: var(--line-ui); }
.b2b-option b { font-weight: 500; color: var(--ink); }
.b2b-option > span { font-size: .8125rem; color: var(--muted); }
.b2b-back, .b2b-toggle-more {
  margin-bottom: var(--s3); padding: 0; border: 0; background: none;
  color: var(--signal-text); font-family: var(--mono); font-size: var(--t-mono); text-transform: uppercase; cursor: pointer;
}
.b2b-toggle-more { margin: var(--s2) 0 0; }
@media (max-width: 620px) {
  .b2b-panel { right: var(--s2); left: var(--s2); bottom: var(--s2); width: auto; }
}

/* 08-mappa.css */
/* ============================================================
   LA CARTA: il Mediterraneo in 200 giorni.

   Sta sulla fascia scura. La terra sta sotto il mare in tono, la
   Sardegna e' accesa perche' e' la base, e il ciano dello schermo
   della sala controllo fa rotte e punti: e' l'unico posto del sito
   in cui compare pieno.

   I RAPPORTI, MISURATI
     mare        #0B3A44 (la fascia)
     terra       #17505A   su mare 1,6:1   fondo, sta basso apposta
     costa       #3E8A92   su mare 3,1:1   e' il filetto a far leggere il bordo
     sardegna    #2A7A80   su mare 2,5:1   con l'orlo #9ADBE3 a 7,5:1
     ciano       #63C6E6   su mare 6,3:1   rotte, punti, drone
     oro         #E8B86A   su mare 6,8:1   energia
     verde       #6FCFA9   su mare 6,7:1   ambiente
     ardesia     #A9BFD0   su mare 6,9:1   difesa
     nome        #FFFDFD   su mare 12,2:1
   ============================================================ */
.mappa {
  --m-sea: var(--deep);
  --m-land: #17505A;
  --m-coast: #3E8A92;
  --m-sard: #2A7A80;
  --m-sard-edge: #9ADBE3;
  --m-env: #6FCFA9;
  --m-def: #A9BFD0;
  --m-ene: #E8B86A;
  display: grid; gap: var(--s5);
}
.m-filters { justify-self: start; }
.seg--film { background: rgba(255, 253, 253, .1); }
.seg--film label { color: var(--white); }
.seg--film label:hover { background: rgba(255, 253, 253, .12); }
.seg--film input:checked + label { background: var(--white); color: var(--deep); }

.m-body { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 1000px) { .m-body { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--s6); } }

/* Il palco ha il rapporto del riquadro proiettato: appena si scosta,
   l'SVG si mette a lettera e i punti in percentuale scivolano via. */
.m-stage {
  position: relative;
  aspect-ratio: 756.5 / 504;
  background: var(--m-sea);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 253, 253, .1);
}
.m-svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.m-land { fill: var(--m-land); fill-rule: evenodd; stroke: var(--m-coast); stroke-width: .8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.m-sard { fill: var(--m-sard); stroke: var(--m-sard-edge); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* i trasferimenti: tratteggio nella tinta della linea, bassi finche'
   non si punta la missione */
.m-transfer { fill: none; stroke-width: 1; stroke-dasharray: 3 4; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .34; transition: opacity .25s var(--ease); }
.m-transfer[data-lane='env'] { stroke: var(--m-env); }
.m-transfer[data-lane='def'] { stroke: var(--m-def); }
.m-transfer[data-lane='ene'] { stroke: var(--m-ene); }
.m-transfer.is-attivo { opacity: 1; stroke-width: 1.6; }
.mappa[data-attivo] .m-transfer:not(.is-attivo) { opacity: .16; }

/* l'anello del drone, e il drone */
.m-loop { fill: none; stroke: var(--signal-lit); stroke-width: 1; stroke-dasharray: 2 5; opacity: .55; vector-effect: non-scaling-stroke; }
.m-drone path { fill: var(--signal-lit); }
.m-drone path:last-child { fill: var(--white); }

/* I punti stanno in HTML sopra l'SVG, in percentuale. Lo strato lascia
   passare il puntatore, i bottoni no (lezione Gruppo Star). */
.m-pins { position: absolute; inset: 0; pointer-events: none; }
.m-pin, .m-base {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: .3rem;
  padding: 0; border: 0; background: none; color: var(--white);
  pointer-events: auto; cursor: pointer;
  font-family: var(--mono); font-size: var(--t-mono); text-transform: uppercase;
}
.m-base { pointer-events: none; }
.m-pin-p, .m-base-p {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--signal-lit);
  box-shadow: 0 0 0 4px rgba(99, 198, 230, .22);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.m-pin[data-lane='env'] .m-pin-p { background: var(--m-env); box-shadow: 0 0 0 4px rgba(111, 207, 169, .22); }
.m-pin[data-lane='def'] .m-pin-p { background: var(--m-def); box-shadow: 0 0 0 4px rgba(169, 191, 208, .22); }
.m-pin[data-lane='ene'] .m-pin-p { background: var(--m-ene); box-shadow: 0 0 0 4px rgba(232, 184, 106, .22); }
.m-base-p { width: 10px; height: 10px; background: var(--white); box-shadow: 0 0 0 3px rgba(255, 253, 253, .3); border-radius: 2px; }
.m-pin-n, .m-base-n {
  padding: .28rem .45rem .24rem;
  background: rgba(6, 24, 30, .72); border-radius: var(--r-sm);
  white-space: nowrap;
  opacity: 0; transition: opacity .2s var(--ease);
}
.m-base-n { opacity: 1; }
.m-pin:hover .m-pin-n, .m-pin:focus-visible .m-pin-n, .m-pin.is-attivo .m-pin-n { opacity: 1; }
.m-pin.is-attivo .m-pin-p { transform: scale(1.35); }
.m-pin[aria-pressed='true'] .m-pin-p { box-shadow: 0 0 0 4px rgba(255, 253, 253, .5); }

/* il filtro: quattro radio e :has(), senza JavaScript */
.mappa:has(#mf-environment:checked) .m-pin:not([data-lane='env']),
.mappa:has(#mf-defence:checked) .m-pin:not([data-lane='def']),
.mappa:has(#mf-energy:checked) .m-pin:not([data-lane='ene']) { opacity: .18; pointer-events: none; }
.mappa:has(#mf-environment:checked) .m-transfer:not([data-lane='env']),
.mappa:has(#mf-defence:checked) .m-transfer:not([data-lane='def']),
.mappa:has(#mf-energy:checked) .m-transfer:not([data-lane='ene']) { opacity: .06; }
.mappa:has(#mf-environment:checked) .m-item:not([data-lane='env']),
.mappa:has(#mf-defence:checked) .m-item:not([data-lane='def']),
.mappa:has(#mf-energy:checked) .m-item:not([data-lane='ene']) { opacity: .4; }

/* La colonna: sempre nello stesso posto, sempre della stessa
   larghezza. Sul telefono scende sotto. */
.m-column { display: grid; }
.m-card { grid-area: 1 / 1; padding: var(--s5); background: rgba(255, 253, 253, .07); border-radius: var(--r); color: var(--on-deep-soft); }
.m-card[hidden] { display: none; }
.m-card h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.01em; color: var(--white); }
.m-card > p:not(.tag):not(.m-area):not(.m-example) { margin-top: var(--s3); font-size: var(--t-small); }
.m-area { margin-top: .3rem; font-size: var(--t-mono); color: var(--on-deep-soft); }
.m-card .m-meta > div { border-color: var(--line-deep); }
.m-card .m-meta dt { color: var(--on-deep-soft); }
.m-card .m-meta dd { color: var(--white); }
.m-card .m-example { color: var(--gold-lit); }
.m-go { display: inline-flex; align-items: center; gap: .7rem; margin-top: var(--s4); color: var(--white); text-decoration: none; font-family: var(--mono); font-size: var(--t-mono); text-transform: uppercase; }
.m-go .btn-ico { width: 1.9rem; height: 1.9rem; background: var(--white); color: var(--deep); }

/* L'elenco sotto: la legenda, il ripiego senza JavaScript, e il modo
   comodo di interrogare la carta su un telefono. */
.m-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: .4rem var(--s5); border-top: 1px solid var(--line-deep); padding-top: var(--s4); }
/* Ogni voce e' una griglia di due righe: pallino, nome e giorni sulla
   prima; l'area sulla seconda, sotto il nome. Le celle sono assegnate
   una per una: il pallino e' uno <span> come l'area, e una regola sui
   soli <span> lo spostava di colonna. */
.m-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: baseline; gap: .15rem .7rem; padding: .5rem 0; color: var(--on-deep-soft); font-size: var(--t-small); text-align: left; transition: opacity .25s var(--ease); }
/* mappa.js riveste il contenuto di ogni voce con un <button
   class="m-item-b"> a display: contents: i figli restano nella griglia
   della voce, ma ereditano dal bottone il centrato e il carattere del
   browser. Selettori discendenti, e il bottone si azzera. */
.m-item-b { display: contents; font: inherit; color: inherit; text-align: left; letter-spacing: inherit; }
.m-item .lane-dot { grid-area: 1 / 1; align-self: center; }
.m-item b { grid-area: 1 / 2; font-weight: 500; color: var(--white); }
.m-item span:not(.lane-dot) { grid-area: 2 / 2; font-size: .8125rem; }
.m-item i { grid-area: 1 / 3; font-style: normal; font-size: var(--t-mono); white-space: nowrap; }
.m-voce--vivo { cursor: pointer; }
.m-item.is-attivo b { text-decoration: underline; text-underline-offset: 4px; }