/* MicroBeTech: fondamenta condivise da tutte le pagine (token, testo, etichette,
   pulsanti, barra, card, moduli, cookie). Direzione e motivi in DESIGN.md. */

/* Caratteri serviti in locale (licenza OFL nella cartella fonts). */
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap; 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: "Instrument Sans"; src: url("../fonts/instrument-sans-latin.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap; 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: "Instrument Sans"; src: url("../fonts/instrument-sans-italic-latin.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-style: italic; font-display: swap; 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: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; 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; }

:root {
  /* Un solo carattere, Instrument Sans, per titoli, testo, menu, pulsanti ed etichette: dal 13 ottobre 2026 su tutto il sito,
     con l'aspetto della home rifatta sul modello di arsenale.bio (prima era Inter). --mono resta come nome ma vale il
     carattere del testo. Il monospazio vero (--code, JetBrains Mono) serve solo alle lettere del DNA. */
  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: var(--font);
  --mono: var(--font);
  --code: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* I cinque verdi del logo, dal più scuro al più chiaro: dal 20 ottobre 2026 quelli del grafico (il suo CMYK
     convertito con il profilo Coated FOGRA39, come negli SVG del suo file). Nomi, codici, Pantone e usi stanno nel brand kit. */
  --g-900: #07513f;
  --g-700: #0c6e58;
  --g-500: #169f73;
  --g-300: #55b78e;
  --g-200: #98cfb7;
  /* Il verde più chiaro al 50% sul bianco: serve solo alla versione del logo per i fondi scuri. */
  --g-100: #cce7db;
  /* Il centro della «o» del logo e il grigio del motto (C0 M0 Y0 K70), come nel file del grafico. */
  --g-950: #15483a;
  --grey-70: #727271;
  /* Nero del logo, bianco, e i grigi per testo secondario, note e bordi sulle superfici chiare. */
  --ink: #111111;
  --ink-2: #3a4340;
  --ink-3: #5c6662;
  --edge-line: #7b8581;
  --paper: #ffffff;
  --white: #ffffff;
  --mist: #f1f3f2;
  --mist-2: #e3e8e5;
  /* Superfici scure: nero con il 12, 24 e 36% del verde più scuro. Testo chiaro e le sue due tinte. */
  --night: #0b110f;
  --night-2: #0d1914;
  --night-3: #0e2019;
  --snow: #eef2f0;
  --snow-2: #bcc1bf;
  --snow-3: #989d9b;
  /* Stati del report, sempre con icona e parola: sotto l'intervallo in blu, sopra in rosso. Il rosso segnala anche gli errori dei moduli. */
  --low: #00629b;
  --high: #ab2328;
  --alert: var(--high);
  /* I colori dei dati nei report di esempio di Daniele (area clienti, dal 3 novembre 2026; scripts/report-daniele.py):
     ambra per gli avvisi, batteri e funghi, le classi di tessitura, le serie dei grafici, gli strati del suolo e il giallo
     del confine del campo sull'immagine satellitare. Valgono solo dentro i report. */
  --d-amber: #9a6700;
  --d-bact: #3b5e8c;
  --d-fung: #9a6b3a;
  --d-tx1: #7a5a3c;
  --d-tx2: #9aa86a;
  --d-tx3: #d7b27a;
  --d-warm: #c9853a;
  --d-s1: #2f6f6a;
  --d-s3: #6d8f2b;
  --d-s5: #9a5a86;
  --d-s6: #bdc1b6;
  --d-g3: #b45a9a;
  --d-soil-1: #5a412f;
  --d-soil-2: #72553d;
  --d-soil-3: #8a6b4d;
  --d-sun: #ffd84a;

  /* Token di superficie: cambiano con il tema della sezione (data-theme). Qui il tema chiaro. */
  --bg: var(--paper);
  --bg-2: var(--mist);
  --bg-3: var(--mist-2);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --rule: rgb(17 17 17 / 0.14);
  --grid: rgb(17 17 17 / 0.07);
  --brand: var(--g-700);
  --head: var(--fg);
  --focus: var(--ink);

  /* Nomi usati dalle pagine costruite prima del cambio di palette: restano validi. */
  --card: var(--mist);
  --green-700: var(--g-700);
  --green-900: var(--night);
  --accent: var(--g-200);
  --leaf: var(--g-700);
  --leaf-dark: var(--g-200);
  --mint: var(--g-200);
  --sage: #e0f3ee;
  --earth: var(--ink-2);
  --earth-900: var(--night);
  --earth-100: var(--mist-2);
  --earth-line: #22332c;
  --ink-rgb: 17 17 17;
  --paper-rgb: 255 255 255;
  --deep-rgb: 11 17 15;
  --humus-rgb: 11 17 15;
  --line: var(--rule);

  --t-micro: 0.8125rem;
  --t-small: 0.875rem;
  --t-body: 1rem;
  --t-lead: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  --t-h3: 1.25rem;
  --t-h3-l: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  --t-h2: clamp(2rem, 1.25rem + 2.1vw, 3rem);
  --t-h1: clamp(2.5rem, 1.2rem + 4.6vw, 5.5rem);
  --t-label: 0.9375rem;

  /* Il contenuto sta in una colonna centrata larga al massimo 1320 px (--wrap).
     Sugli schermi più stretti i margini laterali sono il 5% dello schermo, da 20 a 88 px. */
  --wrap: 1320px;
  --gutter: clamp(20px, 5vw, 88px);
  --edge: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  /* Lo stesso margine misurato sulla finestra: serve dentro i blocchi larghi mezza pagina, dove --edge (in percentuale) si calcolerebbe sul blocco. */
  --page-edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  --gap: clamp(16px, 1.4vw, 24px);
  --space-m: clamp(40px, 5vw, 80px);
  --space-l: clamp(64px, 6.5vw, 104px);
  /* Barra a tutta larghezza, attaccata al bordo in alto: --bar è la sua altezza e --nav-h lo spazio che le pagine le lasciano.
     --nav-top è lo stacco dall'alto, oggi zero. Il logo è alto 34 px (--nav-pad), il pulsante 44 px (--nav-pad-end). */
  --bar: 72px;
  --nav-h: var(--bar);
  --nav-top: 0px;
  --nav-pad: calc((var(--bar) - 34px) / 2);
  --nav-pad-end: calc((var(--bar) - 44px) / 2);
  --nav-side: var(--edge);
  --r-nav: 0px;
  /* Vetro smerigliato: le superfici sospese sopra la pagina (barra, tendine, menu, avviso dei cookie, pannelli sulla mappa)
     lasciano vedere, sfocato, quello che hanno sotto. Chiaro e scuro tengono il testo sopra 4,5:1 su qualunque fondo. */
  --glass-blur: blur(22px) saturate(1.6);
  --glass-light: rgb(255 255 255 / 0.78);
  --glass-light-2: rgb(255 255 255 / 0.88);
  --glass-dark: rgb(11 17 15 / 0.7);
  --glass-rim-light: inset 0 0 0 1px rgb(17 17 17 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.7);
  --glass-rim-dark: inset 0 0 0 1px rgb(255 255 255 / 0.14);
  --glass-shadow: 0 18px 44px -26px rgb(0 0 0 / 0.45);
  --r-glass: 0px;
  --r-glass-in: 0px;

  /* Angoli vivi dappertutto: pannelli, card, immagini, campi e vetri. I soli elementi arrotondati sono i pulsanti, a pillola. */
  --r-panel: 0px;
  --r-card: 0px;
  --r-media: 0px;
  --r-ctl: 0px;
  --r-tag: 0px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Dove il browser non sa sfocare lo sfondo il vetro diventa quasi pieno, altrimenti il testo si confonderebbe con la pagina. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-light: rgb(255 255 255 / 0.95); --glass-light-2: rgb(255 255 255 / 0.97); --glass-dark: rgb(11 17 15 / 0.94); }
}

/* Tema della sezione: scuro (nero verde) o chiaro (bianco). Vale per tutto ciò che contiene. */
[data-theme="dark"] { --bg: var(--night); --bg-2: var(--night-2); --bg-3: var(--night-3); --fg: var(--snow); --fg-2: var(--snow-2); --fg-3: var(--snow-3); --rule: rgb(255 255 255 / 0.16); --grid: rgb(255 255 255 / 0.07); --brand: var(--g-200); --head: var(--fg); --focus: var(--snow); background: var(--bg); color: var(--fg); }
[data-theme="light"] { --bg: var(--paper); --bg-2: var(--mist); --bg-3: var(--mist-2); --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --rule: rgb(17 17 17 / 0.14); --grid: rgb(17 17 17 / 0.07); --brand: var(--g-700); --head: var(--fg); --focus: var(--ink); background: var(--bg); color: var(--fg); }
[data-theme="mist"] { --bg: var(--mist); --bg-2: var(--paper); --bg-3: var(--mist-2); --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --rule: rgb(17 17 17 / 0.14); --grid: rgb(17 17 17 / 0.07); --brand: var(--g-700); --head: var(--fg); --focus: var(--ink); background: var(--bg); color: var(--fg); }
/* Campo verde pieno (dal 15 ottobre 2026, pagine interne): il verde più scuro del logo, con i testi chiari del tema scuro. */
[data-theme="forest"] { --bg: var(--g-900); --bg-2: color-mix(in srgb, var(--g-900) 82%, var(--night)); --bg-3: color-mix(in srgb, var(--g-900) 64%, var(--night)); --fg: var(--snow); --fg-2: var(--snow-2); --fg-3: var(--snow-2); --rule: rgb(255 255 255 / 0.18); --grid: rgb(255 255 255 / 0.08); --brand: var(--g-200); --head: var(--fg); --focus: var(--snow); background: var(--bg); color: var(--fg); }

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }
/* overflow-wrap: con il testo molto ingrandito una parola lunga va a capo invece di uscire dallo schermo. */
body { margin: 0; font-family: var(--font); font-stretch: 100%; font-size: var(--t-body); font-weight: 400; line-height: 1.5; color: var(--fg); background: var(--bg); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--g-200); color: var(--night); }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3, h4, p { margin: 0; }
/* Niente parola sola in fondo a paragrafi, voci e definizioni (Chrome e Safari; gli altri browser lo ignorano). */
p, li, dd, figcaption { text-wrap: pretty; }
/* Titoli grandi e leggeri, con le lettere ravvicinate. */
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.06; letter-spacing: -0.012em; text-wrap: balance; color: var(--head); }
/* Il titolo d'apertura di ogni pagina è in semibold (richiesta di Mirko); gli altri titoli restano leggeri. */
h1 { font-size: var(--t-h1); font-weight: 500; line-height: 1.04; letter-spacing: -0.012em; }
h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.015em; }
p { text-wrap: pretty; }
strong, b { font-weight: 600; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.lead { font-size: var(--t-lead); line-height: 1.4; color: var(--fg-2); max-width: 54ch; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Testo solo per chi usa uno screen reader. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 12px 16px; border-radius: var(--r-ctl); background: var(--white); color: var(--ink); font-size: var(--t-small); font-weight: 500; transform: translateY(-200%); }
.skip:focus { transform: none; }

/* Etichette: piccole, maiuscole e spaziate, per i nomi delle sezioni, gli indici e i dati. Stanno sopra un titolo o accanto
   a un dato, mai da sole. .label--dot mette davanti il quadratino verde; .idx è il numero tra parentesi quadre. */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* Le lettere del DNA disegnate da seq.js restano in monospazio. */
canvas[data-seq] { --mono: var(--code); }
.label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.label--dot::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--brand); }
.label--plain { color: var(--fg-3); }
.idx { font-family: var(--mono); font-size: var(--t-label); font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--fg-3); }
.idx::before { content: "[ "; }
.idx::after { content: " ]"; }

/* Pulsanti: a pillola, etichetta nel carattere dei testi, alti almeno 44 px.
   .btn--go aggiunge la freccia a destra, per i pulsanti che portano altrove (come su mirage.app). */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px; border-radius: 999px; border: 1px solid transparent; font-family: var(--mono); font-size: var(--t-label); font-weight: 500; line-height: 1.25; letter-spacing: 0; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), scale 0.16s var(--ease); }
.btn--go { justify-content: space-between; gap: 14px; }
.btn--go::after { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E") center / 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform 0.25s var(--ease); }
@media (hover: hover) and (pointer: fine) { .btn--go:hover::after { transform: translateX(3px); } }
/* Sul chiaro: pieno nero, oppure solo bordo. */
.btn--dark { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--dark:hover { background: var(--g-700); border-color: var(--g-700); }
.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
/* Sullo scuro e sulle fotografie: pieno bianco, solo bordo, pieno verde chiaro. */
.btn--light { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--light:hover { background: var(--g-200); border-color: var(--g-200); }
.btn--land { border-color: rgb(255 255 255 / 0.55); color: var(--paper); background: rgb(255 255 255 / 0.1); }
/* Il vetro smerigliato serve solo sopra il video dell'hero; sui fondi pieni il pulsante è piatto (dal 15 ottobre 2026). */
.hero .btn--land { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.btn--land:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--mint { background: var(--g-200); border-color: var(--g-200); color: var(--night); }
.btn--mint:hover { background: var(--paper); border-color: var(--paper); }
/* Risposta alla pressione: il pulsante si stringe appena. Con scale, e non transform, convive con l'effetto magnetico. */
.btn:active:not([disabled]) { scale: 0.97; }
.btn[disabled] { opacity: 0.55; cursor: progress; }
.linkbtn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; text-decoration: none; cursor: pointer; }

/* Etichette di stato e segnaposto: si leggono, non si premono. */
.tag { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: var(--r-tag); background: var(--mist-2); color: var(--ink-2); font-family: var(--mono); font-size: 0.75rem; font-weight: 500; line-height: 1.4; letter-spacing: 0; white-space: nowrap; }
.todo { padding: 0.05em 0.35em; border-radius: var(--r-tag); background: var(--mist-2); color: var(--ink-2); }
.notice { margin: 18px 0; padding: 14px 16px; background: var(--mist); color: var(--ink-2); font-size: 0.9375rem; border-radius: var(--r-ctl); }

/* Card: riquadri squadrati con un filetto. Chiare sul bianco; .card--paper è la card bianca sopra superfici scure e fotografie. */
.card { padding: clamp(20px, 2.1vw, 30px); border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--mist); color: var(--ink); --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --rule: rgb(17 17 17 / 0.14); --brand: var(--g-700); --head: var(--ink); --focus: var(--ink); }
.card--paper { border-color: transparent; background: var(--paper); }
.card__title { font-size: var(--t-h3); font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; }
.card__text { margin-top: 8px; color: var(--ink-2); }
.card .btn { margin-top: 18px; }

/* Barra: staccata dai bordi della finestra, con gli angoli arrotondati. In cima all'hero non ha superficie; scorrendo
   diventa una lastra di vetro smerigliato, chiara sulle sezioni chiare e scura su quelle scure (site.js legge il data-theme
   della sezione che ha sotto e mette .is-dark). Il vetro sta su ::before: se stesse sulla barra, la tendina dentro di lei
   non potrebbe sfocare la pagina. Le voci stanno al centro, senza filetti: quella sotto il puntatore prende un fondo arrotondato. */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; padding: var(--nav-top) var(--nav-side) 0; pointer-events: none; color: var(--paper); --nav-link: clamp(8px, 1vw, 16px); --focus: var(--paper); --cell: rgb(255 255 255 / 0.2); transition: color 0.3s var(--ease); }
.nav__in { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 36px); position: relative; min-height: var(--bar); padding-inline: var(--nav-pad) var(--nav-pad-end); border-radius: var(--r-nav); pointer-events: auto; }
/* In cima alla pagina la barra si fonde con l'hero: il vetro compare quando si scorre (.is-solid). */
.nav__in::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity 0.3s var(--ease), background-color 0.3s var(--ease); }
/* Angolo concentrico a quello della barra. */
.nav .btn--nav, .nav__toggle { border-radius: calc(var(--r-nav) - var(--nav-pad-end)); }
.brand { display: inline-flex; flex: none; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; color: inherit; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; text-decoration: none; }
/* Il logo è uno sprite SVG (assets/img/logo.svg) e i suoi colori sono variabili CSS. Sui fondi chiari
   ha i cinque verdi del logo dal più scuro al più chiaro e il nome in nero; sui fondi scuri la scala
   sale di due gradini e il nome è bianco, altrimenti il bastoncino più scuro non si vedrebbe. */
:root, [data-theme="light"], [data-theme="mist"], .card, .logo--pos { --logo-1: var(--g-900); --logo-2: var(--g-700); --logo-3: var(--g-500); --logo-4: var(--g-300); --logo-5: var(--g-200); --logo-ink: var(--ink); --logo-6: var(--g-950); --logo-motto: var(--grey-70); }
[data-theme="dark"], [data-theme="forest"], .nav, .logo--neg { --logo-1: var(--g-200); --logo-2: var(--g-100); --logo-3: var(--g-500); --logo-4: var(--g-300); --logo-5: var(--g-200); --logo-ink: var(--paper); --logo-6: var(--g-300); --logo-motto: var(--snow-2); }
.nav.is-solid:not(.is-dark), .nav--solid:not(.is-dark) { --logo-1: var(--g-900); --logo-2: var(--g-700); --logo-3: var(--g-500); --logo-4: var(--g-300); --logo-5: var(--g-200); --logo-ink: var(--ink); --logo-6: var(--g-950); --logo-motto: var(--grey-70); }
/* Nella barra il simbolo e il nome stanno affiancati, con il nome più grande che nel logo intero, perché a 19 px si legga. */
.logo__mark { display: block; flex: none; width: auto; height: 34px; }
.logo__word { display: block; flex: none; width: auto; height: 21px; }
.nav__links { display: flex; align-items: center; gap: 2px; font-family: var(--mono); font-size: var(--t-label); font-weight: 500; letter-spacing: 0; }
.nav__links a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--nav-link); border-radius: var(--r-glass-in); text-decoration: none; white-space: nowrap; transition: background-color 0.25s var(--ease); }
.nav__links a:hover, .nav__links a:focus-visible { background: var(--cell); }
/* Tendine del menu: un pulsante apre le voci raggruppate (site.js mette .is-open; col puntatore basta passarci sopra). */
.nav__group { position: relative; display: flex; align-items: center; align-self: stretch; }
.nav__more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 var(--nav-link); border: 0; border-radius: var(--r-glass-in); background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap; cursor: pointer; transition: background-color 0.25s var(--ease); }
.nav__more::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-2px) rotate(45deg); transition: transform 0.25s var(--ease); }
.nav__group.is-open .nav__more::after { transform: translateY(1px) rotate(225deg); }
.nav__more:hover, .nav__more:focus-visible, .nav__group.is-open .nav__more { background: var(--cell); }
/* Tendina: dista dalla barra quanto la barra dal bordo della finestra; il testo delle sue voci è allineato a quello della voce che la apre.
   Dentro, 8 px su tutti i lati e voci con l'angolo concentrico a quello del pannello. */
.nav__sub { display: none; position: absolute; min-width: 100%; flex-direction: column; }
/* Copre lo stacco tra la barra e la tendina: il puntatore ci passa senza che la tendina si chiuda. */
.nav__group::after { content: ""; display: none; position: absolute; inset: 100% 0 auto 0; height: calc((var(--bar) - 44px) / 2 + 2px); }
.nav__group:hover::after { display: block; }
.nav__sub a { min-height: 44px; }
.nav__group.is-open .nav__sub { display: flex; }
@media (hover: hover) and (min-width: 1181px) { .nav__group:hover .nav__sub { display: flex; } }
@media (scripting: none) { .nav__group:focus-within .nav__sub { display: flex; } }
.nav__side { display: flex; align-items: center; gap: 12px; }
.lang { display: inline-flex; align-items: center; font-family: var(--mono); font-size: var(--t-label); font-weight: 500; letter-spacing: 0; }
.lang button { min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; opacity: 0.72; }
.lang button:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.lang button[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.lang i { font-style: normal; opacity: 0.72; }
/* Pulsante della barra: lo stesso verde chiaro di «Richiedi un'analisi», senza freccia, su ogni fondo. */
.btn--nav { white-space: nowrap; }
.nav__toggle { display: none; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid currentColor; border-radius: var(--r-ctl); background: none; color: inherit; font-family: var(--mono); font-size: var(--t-label); font-weight: 500; letter-spacing: 0; cursor: pointer; }
.nav__toggle[aria-expanded="true"] .when-closed, .nav__toggle[aria-expanded="false"] .when-open { display: none; }
/* Barra chiara: testo, filetti e logo scuri. */
.nav.is-solid:not(.is-dark), .nav--solid:not(.is-dark) { color: var(--ink); --focus: var(--ink); --cell: rgb(17 17 17 / 0.12); }
.nav.is-solid .nav__in::before, .nav--solid .nav__in::before { opacity: 1; }
/* Area clienti e dashboard misurano la barra per mettersi sotto: lo stacco inferiore fa parte della misura. */
.topbar { padding-bottom: var(--nav-top); }
/* Senza script la barra non può cambiare colore scorrendo: resta in cima alla pagina. */
@media (scripting: none) { .nav { position: absolute; } }
/* Senza script lingua, menu e preferenze cookie non potrebbero rispondere: non si mostrano. */
@media (scripting: none) { .lang, .nav__toggle, [data-cookie-prefs] { display: none !important; } }
/* Senza JavaScript il pulsante «Menu» non funziona: sotto 1180 px le voci stanno aperte sotto il logo, su fondo scuro. */
@media (scripting: none) and (max-width: 1180px) {
  header.nav { position: relative; padding-bottom: var(--nav-top); background: var(--night); }
  .nav .nav__in { flex-wrap: wrap; padding-block: 0 8px; }
  .nav .nav__sub a { padding: 0 var(--nav-link); }
  .nav .nav__links { display: flex; flex-wrap: wrap; flex-basis: 100%; }
  .nav .nav__side { display: flex; flex-basis: 100%; justify-content: flex-end; }
  .nav .nav__sub, .nav .nav__group:focus-within .nav__sub { display: flex; position: static; flex-flow: row wrap; min-width: 0; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav .nav__group { display: contents; }
  .nav .nav__more { display: none; }
}

/* Barra piena, dal 13 ottobre 2026 su tutte le pagine (prima era una lastra di vetro sospesa). Queste regole hanno :root
   davanti perché vincano su quelle generali della barra qui sopra, che restano per quello che non cambia. A tutta larghezza, attaccata al bordo in alto: trasparente sopra l'hero, poi piena,
   bianca sulle sezioni chiare e nera su quelle scure, senza filetto né ombra. Voci in maiuscolo piccolo; «Accedi» è una
   pillola con il solo bordo. */
:root .nav { padding: 0; }
:root .nav__in { padding-inline: var(--edge); border-radius: 0; }
:root .nav__in::before { border-radius: 0; }
:root .nav.is-solid .nav__in::before, :root .nav--solid .nav__in::before { background: var(--paper); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root .nav.is-dark .nav__in::before { background: var(--night); box-shadow: none; }
:root .nav__links, :root .lang, :root .nav .btn, :root .nav__toggle { font-size: 0.8125rem; letter-spacing: 0.07em; text-transform: uppercase; }
:root .nav__links { gap: 0; }
:root .nav__links a:hover, :root .nav__links a:focus-visible, :root .nav__more:hover, :root .nav__more:focus-visible, :root .nav__group.is-open .nav__more { background: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
:root .nav .btn--nav, :root .nav__toggle { border-radius: 999px; }
:root .nav .btn--nav { padding-inline: 20px; background: transparent; border-color: currentColor; color: inherit; }
:root .nav .btn--nav:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
:root .nav.is-solid:not(.is-dark) .btn--nav:hover, :root .nav--solid:not(.is-dark) .btn--nav:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* Il menu «Servizi» scende dal filo della barra, senza stacco: pieno, con un bordo sottile. */
:root .nav__sub { top: calc(100% + (var(--bar) - 44px) / 2); border-radius: 0; left: calc(var(--nav-link) - 20px); padding: 8px 0; background: var(--night); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--snow) 16%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root .nav__sub a { padding: 0 20px; }
/* Dal 2 novembre 2026 (Daniele) le tre pagine dei clienti stanno sotto il nome del servizio, MicroBeScan: il nome fa da
   intestazione e non si clicca, le sue voci rientrano. */
:root .nav__sublabel { display: flex; align-items: center; min-height: 36px; margin: 0; padding: 0 20px; font-weight: 600; }
:root .nav__sub a.nav__nest { padding-left: 36px; }
:root .nav.is-solid:not(.is-dark) .nav__sub, :root .nav--solid:not(.is-dark) .nav__sub { background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
/* Sotto 1180 px il pulsante del menu non è una pillola con la scritta: tre tratti sottili (36 × 24 px) allineati al margine
   destro, che diventano una croce a menu aperto. Sul telefono, sopra e a destra dei tratti lo spazio è lo stesso, 28 px:
   80 = 28 + 24 + 28. Le parole «Menu» e «Chiudi» restano per chi usa uno screen reader. */
@media (max-width: 1180px) {
  :root .nav__toggle { position: relative; width: 44px; height: 44px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: linear-gradient(currentColor, currentColor) right center / 36px 1.5px no-repeat; transition: background-size 0.3s var(--ease); }
  :root .nav__toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  :root .nav__toggle::before, :root .nav__toggle::after { content: ""; position: absolute; top: 10px; right: 0; width: 36px; height: 1.5px; background: currentColor; transition: translate 0.4s var(--ease), rotate 0.4s var(--ease); }
  :root .nav__toggle::after { top: 32.5px; }
  :root .nav__toggle[aria-expanded="true"] { background-size: 0 1.5px; }
  :root .nav__toggle[aria-expanded="true"]::before { translate: 5px 11.25px; rotate: 45deg; }
  :root .nav__toggle[aria-expanded="true"]::after { translate: 5px -11.25px; rotate: -45deg; }
}
/* Apertura del menu: il pannello si srotola da sotto la barra e le voci salgono una dopo l'altra. */
@media (max-width: 1180px) and (prefers-reduced-motion: no-preference) {
  :root .nav.is-open::before { animation: nav-veil 0.4s var(--ease); }
  :root .nav.is-open .nav__in { animation: nav-open 0.5s var(--ease); }
  :root .nav.is-open .nav__links > *, :root .nav.is-open .nav__side { animation: nav-item 0.5s var(--ease) backwards; animation-delay: calc(0.08s + var(--i, 0) * 0.045s); }
  :root .nav.is-open .nav__links > :nth-child(2) { --i: 1; }
  :root .nav.is-open .nav__links > :nth-child(3) { --i: 2; }
  :root .nav.is-open .nav__links > :nth-child(4) { --i: 3; }
  :root .nav.is-open .nav__links > :nth-child(5) { --i: 4; }
  :root .nav.is-open .nav__links > :nth-child(6) { --i: 5; }
  :root .nav.is-open .nav__links > :nth-child(n + 7) { --i: 6; }
  :root .nav.is-open .nav__side { --i: 7; }
}
@keyframes nav-veil { from { opacity: 0; } }
@keyframes nav-open { from { clip-path: inset(0 0 calc(100% - var(--bar)) 0); } to { clip-path: inset(0); } }
@keyframes nav-item { from { opacity: 0; translate: 0 -10px; } }
@media (max-width: 1180px) {
  /* Menu aperto dal pulsante: un pannello bianco pieno, largo quanto lo schermo. */
  :root .nav.is-open .nav__in { max-height: 100vh; max-height: 100svh; padding-inline: var(--edge); background: var(--paper); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root .nav.is-open .nav__toggle { margin-right: 0; }
  :root .nav.is-open .nav__group .nav__sub { padding: 0 0 0 14px; background: none; box-shadow: none; }
  :root .nav.is-open .nav__sub a { padding: 0; }
  :root .nav.is-open .nav__sublabel { min-height: 52px; padding: 0; border-bottom: 1px solid var(--line); font-size: 0.875rem; }
  :root .nav.is-open .nav__sub a.nav__nest { padding-left: 14px; }
  :root .nav.is-open .nav__links a:hover, :root .nav.is-open .nav__more:hover { text-decoration: none; }
}

/* Moduli */
.form { display: grid; gap: 14px; }
/* I campi di una riga si allineano in alto: un messaggio d'errore sotto uno non allunga l'altro. */
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.field { display: grid; gap: 6px; font-size: var(--t-small); font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 11px 14px; border-radius: var(--r-ctl); border: 1px solid var(--edge-line); background: var(--white); color: var(--ink); font: inherit; font-size: 1rem; font-weight: 400; }
.field textarea { min-height: 96px; resize: vertical; }
.field select { -webkit-appearance: none; appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23111111' stroke-width='1.6' stroke-linecap='square'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 11px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: var(--alert); box-shadow: inset 0 0 0 1px var(--alert); }
.field__error { font-weight: 400; color: var(--alert); }
.field__error:empty { display: none; }
.form__note { font-size: var(--t-micro); color: var(--ink-2); }
.form__note a { padding-block: 14px; }
.form__msg { padding: 12px 14px; border-left: 2px solid var(--g-500); background: var(--mist); color: var(--ink-2); font-size: var(--t-small); font-weight: 500; }
.form__msg:empty { display: none; }

/* Footer delle pagine di testo: fascia scura con i soli link. */
.footer { position: relative; isolation: isolate; color: var(--snow); --focus: var(--snow); }
/* Finché l'avviso dei cookie è aperto il footer si allunga quanto l'avviso (--ck-h, scritto da cookies.js): così niente resta coperto. */
.footer::after { content: ""; display: block; height: var(--ck-h, 0px); }
.footer__in { display: flex; flex-direction: column; align-items: center; gap: clamp(48px, 6vw, 88px); padding-inline: var(--edge); container-type: inline-size; }
.footer__bottom { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px; font-size: var(--t-small); }
.footer__links { display: grid; justify-items: start; }
.footer__links--end { justify-items: end; text-align: right; }
.footer__links a, .footer__links .linkbtn { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.footer__links a:hover, .footer__links .linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Al centro, sopra le note legali, il logo completo con il motto: si legge da 240 px di larghezza in su. */
.footer__sign { display: grid; justify-items: center; gap: 20px; }
.footer__mark { display: block; width: 340px; max-width: 100%; height: auto; }
.footer__copy { padding-bottom: 11px; font-size: var(--t-micro); text-align: center; }
.footer__copy span { display: block; }
.footer--plain { margin-top: var(--space-l); padding: 40px 0 28px; background: var(--night); }

/* Pagine di testo (privacy, termini, cookie). Dal 15 ottobre 2026 sull'asse al 42% delle pagine interne: l'indice a sinistra,
   fermo mentre si scorre; il titolo e il testo sull'asse, a 17 px. Sul telefono l'indice non c'è e il testo prende la colonna. */
.page { padding-top: calc(var(--nav-h) + clamp(40px, 5vw, 88px)); padding-bottom: var(--space-l); }
.doc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
/* Campo trappola dei moduli (vedi site.js): fuori dallo schermo ma presente, perché molti programmi saltano i campi nascosti con display. */
/* Riquadro della verifica anti-spam di Cloudflare (Turnstile), sempre visibile sopra il pulsante (richiesta di Mirko,
   3 novembre 2026). Lo spazio è riservato da subito, così il modulo non salta quando il riquadro arriva: 72 px per quello
   largo quanto i campi, 147 per quello compatto (misurati: la documentazione di Cloudflare dice 65 e 140), che site.js sceglie sotto i 300 px di larghezza. Senza JavaScript il
   riquadro non c'è e lo spazio nemmeno. */
.form__captcha { display: none; }
.js .form__captcha { display: block; min-height: 72px; }
.js .form__captcha.is-compact { min-height: 147px; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Pagina 404 (404.html): un titolo, due righe e le pagine da cui ripartire. */
/* ---------- Articoli: le schede, nella home e in News ---------- */

/* Come «Recent Thoughts» e «Thoughts» di arsenale.bio: su fondo scuro, quattro schede per riga con immagine 4:3, data e tipo,
   titolo, sommario e «Leggi l'articolo». Il collegamento del titolo copre tutta la scheda. Le figure degli articoli
   scientifici stanno intere su un riquadro del colore della carta. */
.arts { padding: var(--space-l) var(--edge); background: var(--bg); color: var(--fg); }
.arts__head { display: grid; justify-items: start; gap: clamp(18px, 2vw, 28px); margin-bottom: clamp(40px, 5vw, 72px); }
/* Dopo un'altra sezione scura lo spazio sopra c'è già: le due sezioni sembrano una sola, e lo spazio fra i contenuti resta quello di sempre. */
[data-theme="dark"] + .arts--home { padding-top: 0; }
.arts__head .label { color: var(--brand); }
.arts__head h1 { max-width: 17ch; font-size: clamp(2.25rem, 1.1rem + 3.4vw, 4.375rem); line-height: 1; }
.arts__lead { max-width: 52ch; font-size: var(--t-lead); line-height: 1.4; color: var(--fg-2); }
.arts__list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(44px, 4.5vw, 64px) var(--gap); margin: 0; padding: 0; }
.arts__all { display: flex; justify-content: center; margin-top: clamp(44px, 5vw, 72px); }
.acard { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.acard__ph { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2); }
.acard__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 0.6s var(--ease); }
.acard__ph--fig { background: var(--paper); }
.acard__ph--fig img { object-fit: contain; padding: 14px; }
@media (hover: hover) and (pointer: fine) { .acard:hover .acard__ph img { scale: 1.04; } }
.acard__meta { margin-top: 18px; font-size: var(--t-small); color: var(--fg-3); }
.acard__t { margin-top: 10px; font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem); line-height: 1.2; transition: color 0.25s var(--ease); }
.acard__t a { color: inherit; text-decoration: none; }
.acard__t a::after { content: ""; position: absolute; inset: 0; }
.acard__t a:focus-visible { outline: none; }
.acard:has(a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 8px; }
.acard:hover .acard__t { color: var(--brand); }
.acard__x { margin-top: 12px; font-size: var(--t-small); line-height: 1.5; color: var(--fg-2); }
.acard__more { margin-top: 16px; font-size: var(--t-small); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1180px) { .arts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .arts__list { grid-template-columns: minmax(0, 1fr); }
}

/* Pagina 404: sull'asse delle pagine interne. A sinistra «Errore 404», sull'asse il titolo, la frase, il pulsante e le pagine
   da cui ripartire, in righe grandi come «Altre pagine». */
.lost { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; padding-block: clamp(32px, 6vh, 80px) clamp(48px, 8vh, 104px); }
.lost > * { grid-column: 6 / -1; }
.lost__side { grid-column: 1 / span 4; grid-row: 1; font-size: var(--t-body); font-weight: 500; color: var(--g-700); }
.lost h1 { grid-row: 1; max-width: 14ch; margin: 0 0 20px; font-size: clamp(2.5rem, 1rem + 4vw, 5rem); line-height: 0.98; letter-spacing: -0.035em; }
.lost .lead { max-width: 40ch; color: var(--ink-2); }
.lost__cta { margin-top: clamp(28px, 3vw, 44px); }
.lost__links { display: grid; justify-items: start; margin-top: clamp(40px, 5vw, 72px); }
.lost__links a { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem); letter-spacing: -0.015em; color: var(--ink); text-decoration: none; transition: color 0.2s var(--ease); }
.lost__links a::after { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E") center / 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E") center / 20px no-repeat; transition: translate 0.25s var(--ease); }
.lost__links a:hover { color: var(--g-700); }
@media (hover: hover) and (pointer: fine) { .lost__links a:hover::after { translate: 5px 0; } }
@media (max-width: 900px) {
  /* Sul telefono «Errore 404» scende sotto il titolo, come le note a margine delle altre pagine. */
  .lost { display: flex; flex-direction: column; align-items: flex-start; }
  .lost h1 { margin-bottom: 12px; }
  .lost__side { order: 1; margin-bottom: 20px; }
  .lost h1 ~ * { order: 2; }
}
.doc__side { grid-column: 1 / span 4; position: sticky; top: calc(var(--nav-h) + 32px); padding-top: clamp(150px, 13vw, 210px); }
.doc__label { font-size: var(--t-body); font-weight: 500; color: var(--g-700); }
.doc__toc { display: grid; margin-top: 8px; font-size: var(--t-body); }
.doc__toc a { display: flex; align-items: center; min-height: 40px; color: var(--ink-2); text-decoration: none; transition: color 0.2s var(--ease), translate 0.25s var(--ease); }
.doc__toc a:hover { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .doc__toc a:hover { translate: 4px 0; } }
.prose { grid-column: 6 / span 6; font-size: 1.0625rem; line-height: 1.6; }
.prose h1 { margin: 0 0 24px; font-size: clamp(2.25rem, 1rem + 3.2vw, 4.25rem); line-height: 1; letter-spacing: -0.035em; }
.prose > .lead { max-width: 40ch; margin-bottom: clamp(40px, 5vw, 72px); font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.5rem); line-height: 1.4; }
.prose h2 { margin: clamp(48px, 5vw, 72px) 0 14px; font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; scroll-margin-top: calc(var(--nav-h) + 24px); }
.prose > .lead + h2 { margin-top: 0; }
.prose h3 { margin: 28px 0 8px; font-size: 1.1875rem; }
.prose p, .prose li { color: var(--ink-2); }
.prose p { margin-bottom: 14px; }
.prose ul { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; }
.prose a { color: var(--ink); text-underline-offset: 3px; }
/* Un elenco di soli collegamenti: ogni riga è alta quanto un dito. */
.prose .prose__links { gap: 0; }
.prose .prose__links a { display: inline-flex; align-items: center; min-height: 44px; }
.prose .btn { margin-top: 6px; color: var(--paper); }
.statusbox { margin: 16px 0 8px; padding: 20px 22px; background: var(--mist); }
.statusbox p { margin-bottom: 14px; color: var(--ink); }
.tablewrap { margin: 14px 0 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); }
.cktable { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--t-small); }
.cktable th { padding: 12px 14px; text-align: left; font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.cktable td { padding: 13px 14px; border-top: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.cktable td:first-child { color: var(--ink); font-family: var(--mono); font-size: var(--t-micro); font-weight: 500; white-space: nowrap; }
.cktable small { display: block; font-family: var(--font); font-size: 0.75rem; font-weight: 400; color: var(--ink-3); }

/* Cookie: avviso alla prima visita e pannello delle preferenze. Sono i soli
   elementi con l'ombra, perché coprono la pagina. */
.ck { position: fixed; z-index: 70; right: 20px; bottom: 20px; width: min(440px, calc(100vw - 32px)); padding: 22px 22px 20px; border-radius: var(--r-glass); background: var(--glass-light-2); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); color: var(--ink); font-size: var(--t-small); line-height: 1.5; box-shadow: 0 0 0 1px var(--line), 0 24px 60px -20px rgb(var(--deep-rgb) / 0.5); --focus: var(--ink); --head: var(--ink); }
.ck[hidden], .ckm[hidden], [data-cookie-prefs][hidden] { display: none; }
.ck__close { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--r-ctl); background: none; color: var(--ink-2); cursor: pointer; }
.ck__close:hover { color: var(--ink); }
.ck__close svg { width: 12px; height: 12px; }
.ck__title { padding-right: 36px; margin-bottom: 8px; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.ck__text { color: var(--ink-2); }
.ck__text a { padding-block: 14px; color: var(--ink); text-underline-offset: 3px; }
/* Rifiuta e Accetta hanno lo stesso aspetto, come chiede il Garante. */
.ck__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.ck__actions .ck__more { grid-column: 1 / -1; }
.ckm { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgb(var(--deep-rgb) / 0.5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); --focus: var(--ink); --head: var(--ink); }
.ckm__box { position: relative; width: min(620px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; border-radius: var(--r-glass); background: var(--white); color: var(--ink); overflow: hidden; box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.6); }
.ckm__head { padding: 26px 64px 0 26px; }
.ckm__head h2 { font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; }
.ckm__head p { margin-top: 8px; font-size: var(--t-small); color: var(--ink-2); }
.ckm__head a { color: var(--ink); text-underline-offset: 3px; }
.ckm__body { padding: 8px 26px 4px; overflow-y: auto; }
.ckcat { padding: 18px 0; border-bottom: 1px solid var(--line); }
.ckcat:last-child { border-bottom: 0; }
.ckcat__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ckcat h3 { font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.ckcat p { margin-top: 6px; font-size: var(--t-small); color: var(--ink-2); }
.ckcat a { color: var(--ink); text-underline-offset: 3px; }
.ckcat__always { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; color: var(--ink-2); white-space: nowrap; }
.switch { position: relative; flex: none; width: 52px; height: 32px; }
.switch input { position: absolute; inset: -6px 0; width: 100%; height: 44px; margin: 0; opacity: 0; cursor: pointer; }
.switch__track { position: absolute; inset: 0; border-radius: var(--r-ctl); background: var(--edge-line); transition: background-color 0.2s var(--ease); pointer-events: none; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: calc(var(--r-ctl) - 3px); background: var(--white); transition: transform 0.2s var(--ease); }
.switch input:checked + .switch__track { background: var(--g-700); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--focus); outline-offset: 3px; }
.ckm__foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16px 26px 22px; border-top: 1px solid var(--line); }
.ckm__foot .btn { padding-inline: 10px; }
html.is-locked { overflow: hidden; }

/* Da 1181 px: logo a sinistra, voci al centro della barra, lingua e pulsante a destra. Sotto i 1180 px il menu si apre dal pulsante «Menu». */
@media (min-width: 1181px) {
  .nav:not(.nav--simple) .nav__in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .nav:not(.nav--simple) .brand { justify-self: start; margin-right: 0; }
  .nav:not(.nav--simple) .nav__side { justify-self: end; }
}
/* Tra 1181 e 1340 px le voci, la lingua e il pulsante starebbero strette (in inglese andavano a capo): barra più compatta. */
@media (min-width: 1181px) and (max-width: 1340px) {
  .nav { --nav-link: 9px; }
  .nav__in { gap: 14px; }
  .nav__side { gap: 8px; }
}
@media (max-width: 1180px) {
  .nav__in { flex-wrap: wrap; gap: 0 20px; }
  .nav__toggle { display: inline-flex; }
  .nav__links, .nav__side { display: none; }
  /* Menu aperto: un velo scuro copre la pagina, così niente spunta sotto il pannello. */
  .nav.is-open::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgb(var(--deep-rgb) / 0.5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); pointer-events: auto; }
  .nav.is-open { color: var(--ink); --focus: var(--ink); --cell: rgb(17 17 17 / 0.12); --logo-1: var(--g-900); --logo-2: var(--g-700); --logo-3: var(--g-500); --logo-4: var(--g-300); --logo-5: var(--g-200); --logo-ink: var(--ink); --logo-6: var(--g-950); --logo-motto: var(--grey-70); }
  .nav.is-open .nav__in { padding-bottom: var(--nav-pad); overflow-y: auto; overscroll-behavior: contain; }
  .nav.is-open .nav__in::before { content: none; }
  .nav.is-open .brand, .nav.is-open .nav__toggle { margin-block: calc((var(--bar) - 44px) / 2); }
  .nav.is-open .nav__links { display: flex; flex-direction: column; align-items: stretch; gap: 0; flex-basis: 100%; font-size: 0.9375rem; }
  .nav.is-open .nav__links a { min-height: 52px; padding: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
  .nav.is-open .nav__links a:hover { background: none; }
  .nav.is-open .nav__group { flex-direction: column; align-items: stretch; }
  .nav.is-open .nav__more { justify-content: space-between; width: 100%; min-height: 52px; padding: 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); background: none; }
  .nav.is-open .nav__sub a { padding: 0; font-size: 0.875rem; white-space: normal; }
  .nav.is-open .nav__group .nav__sub { position: static; }
  .nav.is-open .nav__group::after { content: none; }
  .nav.is-open .nav__side { display: flex; flex-basis: 100%; flex-wrap: wrap; justify-content: space-between; padding-top: 18px; }
  /* Sulle pagine di testo la barra non ha menu: lingua e area clienti restano visibili. */
  .nav--simple .nav__side { display: flex; }
}
@media (max-width: 980px) {
  .doc { display: block; }
  .doc__side { display: none; }
}
@media (max-width: 760px) {
  /* Sul telefono la barra ha le proporzioni di quella di arsenale.bio: alta 80 px, margini di 28 px, logo grande come da desktop. */
  :root { --bar: 80px; --gutter: 28px; }
}
@media (max-width: 640px) {
  .nav--simple .btn--nav { display: none; }
  /* A 320 px logo e lingua devono stare sulla stessa riga. */
  .nav--simple .nav__in { gap: 0 8px; }
  .form__row { grid-template-columns: 1fr; }
  .footer__bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 20px; }
  .footer__sign { grid-column: 1 / -1; grid-row: 2; }
  .footer__copy { padding-bottom: 0; }
  /* La tabella dei cookie diventa un elenco di schede: l'etichetta di ogni
     riga viene dall'intestazione (data-th, scritto da site.js). */
  .tablewrap { overflow: visible; border: 0; }
  .cktable { min-width: 0; }
  .cktable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cktable tr { border-radius: var(--r-card); display: block; margin-bottom: 10px; padding: 12px 16px; border: 1px solid var(--line); }
  .cktable td { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 5px 0; border: 0; }
  .cktable td:first-child { white-space: normal; }
  .cktable td::before { content: attr(data-th); font-family: var(--font); font-size: var(--t-micro); font-weight: 400; color: var(--ink-3); }
  .ck { right: 8px; left: 8px; bottom: 8px; width: auto; padding: 20px 18px 16px; }
  .ckm { padding: 8px; align-items: end; }
  .ckm__box { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .ckm__head { padding: 22px 56px 0 20px; }
  .ckm__body { padding: 6px 20px 2px; }
  .ckm__foot { grid-template-columns: 1fr 1fr; padding: 14px 20px 18px; }
  .ckm__foot .btn:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .nav, .footer, .ck, .ckm, .skip { display: none !important; }
}