/* webard · il testo come partitura
   Carta da musica, inchiostro d'incisione, due matite del direttore. */

/* font ristretti con fontTools agli assi che il sito usa (vedi fonts/LICENZE.txt):
   se servono pesi o corpi fuori da questi intervalli, vanno rifatti dai file originali */

@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2-variations"),
       url("../fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2");
  font-weight: 560 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-latin-opsz-italic.woff2") format("woff2-variations"),
       url("../fonts/bodoni-moda-latin-opsz-italic.woff2") format("woff2");
  font-weight: 600 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-latin-opsz-normal.woff2") format("woff2-variations"),
       url("../fonts/literata-latin-opsz-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-latin-opsz-italic.woff2") format("woff2-variations"),
       url("../fonts/literata-latin-opsz-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* materiali: carta da musica bianca e fredda, inchiostro d'incisione */
  --carta: #fafbfc;
  --carta-campo: #ffffff;
  --inchiostro: #17171b;
  --inchiostro-2: #4b4b53;
  --filetto: #c6c8cf;
  --filetto-forte: #7c7e88; /* 3,9:1 su carta: bordi di comandi e scelte oltre il 3:1 con margine */

  /* il rigo: cinque linee, in testa alle battute e come filetto tra le sezioni */
  --rigo: linear-gradient(to bottom,
    var(--filetto) 0 1px, transparent 1px 6px,
    var(--filetto) 6px 7px, transparent 7px 12px,
    var(--filetto) 12px 13px, transparent 13px 18px,
    var(--filetto) 18px 19px, transparent 19px 24px,
    var(--filetto) 24px 25px, transparent 25px);
  --rigo-alto: 25px;

  /* le due matite: solo per lo strato del bardo */
  --rossa: #c42a1d;
  --rossa-velo: #f7dcd8;
  --blu: #2148b0;

  /* caratteri: il Bodoni resta per i segni della partitura (marchio, numeri, lettere di prova,
     indicazioni); i titoli usano il Literata nel taglio da titolo, che si legge anche piccolo */
  --incisione: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --lettura: "Literata", Georgia, "Times New Roman", serif;
  --titoli: var(--lettura);

  /* scala */
  --t-titolo: clamp(2.55rem, 1.25rem + 5.1vw, 5.75rem);
  --t-h2: clamp(2rem, 1.35rem + 2.3vw, 3.25rem);
  --t-h3: clamp(1.3rem, 1.15rem + .5vw, 1.55rem);
  --t-guida: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  --t-testo: 1.0625rem;
  --t-piccolo: .9rem;
  --t-minimo: .8rem;

  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  --misura: 68ch;
  --larghezza: 76rem;
  --margine: clamp(1rem, .4rem + 2.6vw, 2.5rem);
  --sezione: clamp(4.5rem, 3rem + 6vw, 8.5rem);

  --tratto: 1px;
  --tratto-pesante: 2px;
  --angolo: 2px;
  --uscita: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  scrollbar-color: var(--filetto-forte) var(--carta);
  scrollbar-width: thin;
}

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--lettura);
  font-size: var(--t-testo);
  line-height: 1.62;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  /* il cursore di scrittura è inchiostro: il rosso resta allo strato del bardo */
  caret-color: var(--inchiostro);
}

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
ul, ol { padding: 0; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

::selection { background: var(--rossa-velo); color: var(--inchiostro); }

/* anello di focus in inchiostro, staccato dal bordo: su carta il contrasto è oltre 15:1 */
:focus-visible {
  outline: var(--tratto-pesante) solid var(--inchiostro);
  outline-offset: 3px;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: var(--filetto-forte);
  transition: text-decoration-color .2s var(--uscita), text-decoration-thickness .2s var(--uscita);
}
a:hover {
  text-decoration-color: var(--inchiostro);
  text-decoration-thickness: 2px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.salta {
  position: absolute;
  left: var(--margine);
  top: -4rem;
  z-index: 50;
  padding: var(--s-2) var(--s-4);
  background: var(--inchiostro);
  color: var(--carta);
  text-decoration: none;
}
.salta:focus { top: var(--s-3); }
/* main ha tabindex="-1" perché «Salta al contenuto» ci porti il fuoco in ogni browser */
main:focus { outline: none; }

.pagina {
  width: 100%;
  max-width: calc(var(--larghezza) + 2 * var(--margine));
  margin-inline: auto;
  padding-inline: var(--margine);
}

.numeri { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- lettere di prova ---------- */

.prova {
  display: inline-grid;
  place-items: center;
  min-width: 1.55em;
  height: 1.55em;
  padding-inline: .2em;
  border: var(--tratto-pesante) solid currentColor;
  border-radius: var(--angolo);
  font-family: var(--incisione);
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  font-size: .82em;
  vertical-align: .12em;
}

/* ---------- testata ---------- */

.testata {
  position: sticky;
  top: 0;
  z-index: 20;
  /* carta piena: profondità solo per sovrapposizione, niente velature né sfocature */
  background: var(--carta);
  border-bottom: var(--tratto) solid var(--filetto);
}
.testata .pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  min-height: 4rem;
}
.marchio {
  font-family: var(--incisione);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1;
  text-decoration: none;
}
.marchio:hover {
  text-decoration-line: underline;
  text-decoration-color: var(--inchiostro);
  text-decoration-thickness: 2px;
}
.indice { margin-left: auto; }
.indice ul {
  display: flex;
  gap: var(--s-5);
  list-style: none;
}
.indice a {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-size: var(--t-piccolo);
  text-decoration: none;
}
/* le matite restano al bardo: menu in solo inchiostro, la pagina corrente ha la lettera piena */
.indice a:hover .voce {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--inchiostro);
}
.indice a[aria-current="page"] .prova {
  background: var(--inchiostro);
  border-color: var(--inchiostro);
  color: var(--carta);
}

/* ---------- bottoni ---------- */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 2.9rem;
  padding: .55em 1.25em .6em;
  border: var(--tratto-pesante) solid var(--inchiostro);
  border-radius: var(--angolo);
  background: var(--inchiostro);
  color: var(--carta);
  font-family: var(--lettura);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.15;
  text-decoration: none;
  transition: background-color .2s var(--uscita), border-color .2s var(--uscita), color .2s var(--uscita);
}
.bottone:hover {
  background: var(--inchiostro-2);
  border-color: var(--inchiostro-2);
  color: var(--carta);
  text-decoration: none;
}
.bottone:active { transform: translateY(1px); }
.bottone[disabled],
.bottone[aria-disabled="true"] {
  background: var(--filetto);
  border-color: var(--filetto);
  color: var(--inchiostro-2);
  cursor: not-allowed;
}
.bottone-secondario {
  background: transparent;
  color: var(--inchiostro);
}
.bottone-secondario:hover {
  background: var(--inchiostro);
  color: var(--carta);
  border-color: var(--inchiostro);
}
.bottone-piccolo {
  min-height: 2.4rem;
  padding: .4em .95em .45em;
  font-size: var(--t-piccolo);
}
.bottone svg { width: 1.05em; height: 1.05em; flex: none; }

/* ---------- frontespizio ---------- */

.frontespizio {
  padding-block: clamp(2.25rem, 1rem + 4vw, 4.25rem) var(--s-6);
  text-align: center;
  /* con il testo molto ingrandito un cerchio a matita può uscire oltre il bordo della pagina:
     si taglia lì, senza far scorrere la pagina di lato */
  overflow-x: clip;
}
/* titolo e crediti stanno in un blocco largo quanto il titolo: il filetto lo regge da un capo all'altro */
.titolo-brano {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.frontespizio h1 {
  max-width: 17ch;
  margin-inline: auto;
  font-family: var(--titoli);
  font-size: var(--t-titolo);
  font-weight: 540;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.crediti {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: var(--tratto) solid var(--inchiostro);
  font-style: italic;
  font-size: var(--t-piccolo);
  color: var(--inchiostro-2);
}
.crediti b {
  font-style: normal;
  font-weight: 600;
  color: var(--inchiostro);
}
.guida {
  max-width: 34em;
  margin: var(--s-5) auto 0;
  font-size: var(--t-guida);
  line-height: 1.5;
  text-wrap: pretty;
}
.azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-5);
}
/* il secondo invito è un rimando a parole, accanto al bottone */
.rimando {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
  text-underline-offset: .28em;
}
/* sotto la demo: il prezzo, dopo aver visto cosa si compra */
.nota-tester {
  max-width: 44rem;
  margin: var(--s-6) auto 0;
  font-size: var(--t-piccolo);
  color: var(--inchiostro-2);
  text-wrap: pretty;
}
.nota-tester strong { color: var(--inchiostro); font-weight: 650; }

/* ---------- il sistema: due righi ---------- */

.sistema {
  position: relative;
  margin-top: var(--s-6);
  text-align: left;
}
.sistema-capo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  margin-bottom: var(--s-4);
}
.tempo {
  display: flex;
  align-items: baseline;
  gap: .6em;
  font-family: var(--incisione);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.2;
}
.tempo .metronomo {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--lettura);
  font-weight: 400;
  font-size: var(--t-piccolo);
  color: var(--inchiostro-2);
}
/* gli spazi tra nota, numero e parole li danno i   del testo: niente gap in più */
.tempo .metronomo svg { width: .7em; height: 1.15em; align-self: center; margin-right: .3em; }
.comandi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}
.leve {
  display: inline-flex;
  border: var(--tratto) solid var(--inchiostro);
  border-radius: var(--angolo);
}
.leve button {
  min-height: 2.4rem;
  padding: .35em .9em;
  border: 0;
  background: transparent;
  font-size: var(--t-piccolo);
  font-style: italic;
  color: var(--inchiostro-2);
}
.leve button + button { border-left: var(--tratto) solid var(--inchiostro); }
.leve button[aria-pressed="true"] {
  background: var(--inchiostro);
  color: var(--carta);
  font-style: normal;
  font-weight: 600;
}
.comando {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 2.4rem;
  padding: .35em .8em;
  border: var(--tratto) solid var(--filetto-forte);
  border-radius: var(--angolo);
  background: transparent;
  font-size: var(--t-piccolo);
}
.comando:hover { border-color: var(--inchiostro); }
.comando svg { width: 1rem; height: 1rem; }
.comando-icona { justify-content: center; min-width: 2.4rem; }
.comando-leggi {
  border-color: var(--rossa);
  color: var(--rossa);
  font-weight: 600;
}
.comando-leggi:hover { background: var(--rossa); border-color: var(--rossa); color: var(--carta); }
.comando-leggi.acceso { background: var(--rossa); color: var(--carta); }
.comando-leggi .icona-pausa { display: none; }
.comando-leggi.acceso .icona-pausa { display: block; }
.comando-leggi.acceso .icona-leggi { display: none; }
/* finché lo script non li accende, i comandi tengono il loro spazio senza vedersi:
   quando arrivano non spostano i righi. Senza script li toglie del tutto senza-js.css */
.sistema:not(.vivo) .comandi-vivi { visibility: hidden; }

.righi {
  position: relative;
  display: grid;
  grid-template-columns: 8.5rem repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto;
  border-right: var(--tratto-pesante) solid var(--inchiostro);
}
.righi::before {
  /* accollatura: la parentesi che unisce i due righi */
  content: "";
  position: absolute;
  left: calc(8.5rem - 11px);
  top: 1.1rem;
  bottom: .6rem;
  width: 5px;
  background: var(--inchiostro);
}
.righi::after {
  content: "";
  position: absolute;
  left: calc(8.5rem - 11px);
  top: calc(1.1rem - 9px);
  bottom: calc(.6rem - 9px);
  width: 16px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 10V8.5C6 8.5 12 6 15.5 0L16 .6C13 7.2 7 10 0 10Z' fill='%2317171b'/%3E%3C/svg%3E") top left / 16px 10px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 0V1.5C6 1.5 12 4 15.5 10L16 9.4C13 2.8 7 0 0 0Z' fill='%2317171b'/%3E%3C/svg%3E") bottom left / 16px 10px no-repeat;
  pointer-events: none;
}
.nome-rigo {
  grid-column: 1;
  padding: 2.1rem var(--s-5) 0 0;
  font-style: italic;
  font-size: var(--t-piccolo);
  line-height: 1.3;
  text-align: right;
  color: var(--inchiostro-2);
  padding-right: 1.4rem;
}
.nome-rigo.rigo-1 { grid-row: 1; }
.nome-rigo.rigo-2 { grid-row: 2; }

.battuta {
  position: relative;
  min-width: 0;
  padding: 2.15rem var(--s-4) var(--s-5);
  border-left: var(--tratto) solid var(--inchiostro);
  /* pentagramma: cinque linee in testa a ogni battuta */
  background-image: var(--rigo);
  background-size: 100% var(--rigo-alto);
  background-repeat: no-repeat;
  background-position: 0 .35rem;
}
.battuta.rigo-1 { grid-row: 1; }
.battuta.rigo-2 { grid-row: 2; border-top: var(--tratto) solid var(--filetto); }
.battuta.b1 { grid-column: 2; }
.battuta.b2 { grid-column: 3; }
.battuta.b3 { grid-column: 4; }
.battuta.b4 { grid-column: 5; }
.n-battuta {
  position: absolute;
  top: -.95rem;
  left: .2rem;
  font-style: italic;
  font-size: var(--t-minimo);
  color: var(--inchiostro-2);
}
.battuta.rigo-2 .n-battuta { display: none; }
.dinamica {
  position: absolute;
  top: .15rem;
  right: var(--s-3);
  padding-inline: .15em;
  background: var(--carta);
  font-family: var(--incisione);
  font-style: italic;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
}
.dinamica.matita-rossa { color: var(--rossa); }
.dinamica.matita-blu { color: var(--blu); }

.testo-rigo {
  font-size: 1rem;
  line-height: 1.62;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.nota {
  margin-bottom: var(--s-2);
  font-style: italic;
  font-size: var(--t-piccolo);
  line-height: 1.4;
}
.nota.matita-rossa { color: var(--rossa); }
.nota.matita-blu { color: var(--blu); }
.riscrittura { font-size: 1rem; line-height: 1.62; }

/* lo strato non letto diventa voce di sottofondo */
.sistema.vivo[data-vista="prima"] .rigo-2 .riscrittura,
.sistema.vivo[data-vista="dopo"] .rigo-1 .testo-rigo { color: var(--inchiostro-2); }

/* segni della matita */
.segno {
  position: relative;
  background: none;
  color: inherit;
  padding: 0;
  -webkit-hyphens: manual;
  hyphens: manual;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.segno-cerchio {
  padding: .05em .3em;
  margin: 0 -.15em;
  border: var(--tratto-pesante) solid var(--blu);
  border-radius: 1.2em;
}
.segno-cerchio.matita-rossa { border-color: var(--rossa); }
.segno-onda {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .25em;
  text-decoration-color: var(--blu);
}
.segno-onda.matita-rossa { text-decoration-color: var(--rossa); }

/* con lo script i cerchi e le onde li traccia partitura.js in SVG, a mano libera:
   il bordo e la sottolineatura CSS restano solo come ripiego, trasparenti e senza spostare il testo */
/* con i tratti SVG il cerchio CSS non tiene spazio: l'aria attorno alla frase la dà l'ovale (partitura.js),
   così prima che la linea arrivi non resta un vuoto davanti al punto */
.segni-tracciati .segno-cerchio { padding-inline: 0; margin-inline: 0; border-width: 0; border-color: transparent; }
.segni-tracciati .segno-onda { text-decoration-color: transparent; }
.tratto {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
  color: var(--blu);
}
.tratto.matita-rossa { color: var(--rossa); }
.tratto path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cesura,
.respiro {
  display: inline-block;
  vertical-align: .55em;
  margin-inline: .12em .2em;
  color: var(--rossa);
}
.cesura svg { width: .95em; height: .95em; }
.respiro svg { width: .42em; height: .62em; }
.cesura-testo {
  font-style: italic;
  font-size: var(--t-minimo);
  vertical-align: .45em;
  margin-left: .1em;
}

/* la linea di lettura */
.linea-lettura {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 1.4em;
  background: var(--rossa);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: transform .14s linear, height .14s linear, opacity .25s var(--uscita);
}
.sistema.in-lettura .linea-lettura { opacity: 1; }
.w.ora {
  color: var(--rossa);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
  text-decoration-color: var(--rossa);
}

/* segni che la matita deve ancora posare: le note si scrivono da sinistra,
   punti di significato e cesure scendono dall'alto; i cerchi e le onde in SVG li disegna lo script,
   al passo della linea. Le regole sui bordi CSS valgono solo per il ripiego. */
.sistema.in-lettura .nota.da-posare,
.sistema.in-lettura .cesura-testo.da-posare { clip-path: inset(0 100% 0 0); }
.sistema.in-lettura .cesura.da-posare,
.sistema.in-lettura .respiro.da-posare { clip-path: inset(0 0 100% 0); }
.sistema.in-lettura .nota.posato,
.sistema.in-lettura .cesura-testo.posato,
.sistema.in-lettura .cesura.posato,
.sistema.in-lettura .respiro.posato {
  clip-path: inset(0 0 0 0);
  transition: clip-path .6s var(--uscita);
}
.sistema.in-lettura .segno.da-posare {
  border-color: transparent;
  text-decoration-color: transparent;
}
.sistema.in-lettura .segno.posato {
  transition: border-color .45s var(--uscita), text-decoration-color .45s var(--uscita);
}

.stato-lettura {
  min-height: 1.5em;
  margin-top: var(--s-3);
  font-style: italic;
  font-size: var(--t-piccolo);
  color: var(--rossa);
}

.piede-sistema {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-5) var(--s-7);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: var(--tratto) solid var(--filetto);
}
.legenda {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2) var(--s-5);
  list-style: none;
  font-size: var(--t-piccolo);
  color: var(--inchiostro-2);
}
.legenda li {
  display: flex;
  align-items: baseline;
  gap: .55em;
}
.legenda .campione {
  flex: none;
  min-width: 1.6em;
  color: var(--rossa);
}
.legenda .campione.matita-blu { color: var(--blu); }
.legenda .campione svg { width: 1em; height: 1em; }
/* etichetta della demo (e vecchio avviso di bozza, non piu' usato): tratteggio rosso */
.etichetta-esempio,
.avviso-bozza {
  display: inline-block;
  margin-bottom: var(--s-4);
  padding: var(--s-1) var(--s-3);
  border: var(--tratto) dashed var(--rossa);
  border-radius: var(--angolo);
  font-size: var(--t-piccolo);
  line-height: 1.4;
  color: var(--inchiostro);
}
.avviso-bozza { margin-bottom: var(--s-5); }
.etichetta-esempio strong,
.avviso-bozza strong { color: var(--rossa); font-weight: 600; }

.passaporto {
  border: var(--tratto) solid var(--inchiostro);
  border-radius: var(--angolo);
  padding: var(--s-4) var(--s-5);
  background: var(--carta-campo);
}
.passaporto h2,
.passaporto h3 {
  font-family: var(--titoli);
  font-size: 1.15rem;
  font-weight: 650;
  line-height: 1.2;
  margin-bottom: var(--s-3);
}
.passaporto dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--s-2) var(--s-4);
  font-size: var(--t-piccolo);
}
.passaporto dt {
  font-variant-caps: all-small-caps;
  letter-spacing: .04em;
  color: var(--inchiostro-2);
}
.passaporto dd { line-height: 1.45; }

/* ---------- sezioni ---------- */

.sezione {
  padding-block: var(--sezione);
  border-top: var(--tratto) solid var(--inchiostro);
}
.sezione h2 {
  max-width: 22ch;
  font-family: var(--titoli);
  font-size: var(--t-h2);
  font-weight: 540;
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.sezione h2 .prova {
  margin-right: .35em;
  font-size: .5em;
  vertical-align: .45em;
}
.introduzione {
  max-width: 38em;
  margin-top: var(--s-4);
  font-size: var(--t-guida);
  line-height: 1.5;
  color: var(--inchiostro);
  text-wrap: pretty;
}
.testa-sezione {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-bottom: var(--s-7);
}

/* movimenti del metodo */
.movimenti {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  border-top: var(--tratto-pesante) solid var(--inchiostro);
}
.movimenti li {
  padding: var(--s-5) var(--s-5) var(--s-2) 0;
}
.movimenti li + li {
  padding-left: var(--s-5);
  border-left: var(--tratto) solid var(--inchiostro);
}
.movimenti .numero-movimento {
  display: block;
  font-family: var(--incisione);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.movimenti h3 {
  margin-top: var(--s-4);
  font-family: var(--titoli);
  font-size: var(--t-h3);
  font-weight: 650;
  line-height: 1.2;
}
.movimenti p { margin-top: var(--s-3); max-width: 34ch; }

.blocco-passaporto {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--s-6) var(--s-8);
  align-items: start;
  margin-top: var(--s-8);
}
.blocco-passaporto h3 {
  font-family: var(--titoli);
  font-size: var(--t-h3);
  font-weight: 650;
  line-height: 1.2;
}
.blocco-passaporto > div > p { margin-top: var(--s-3); max-width: 38ch; }
.voci-passaporto {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--s-3) var(--s-5);
  padding-top: var(--s-4);
  border-top: var(--tratto-pesante) solid var(--inchiostro);
}
.voci-passaporto dt {
  font-variant-caps: all-small-caps;
  letter-spacing: .04em;
  font-weight: 600;
  color: var(--inchiostro-2);
}

/* programma di sala: servizi e prezzi */
/* le voci condividono le colonne (subgrid): titoli, testi e bottoni restano in colonna */
.programma {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto;
  column-gap: var(--s-6);
  list-style: none;
  border-top: var(--tratto-pesante) solid var(--inchiostro);
}
.programma > li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  gap: var(--s-3) var(--s-6);
  align-items: baseline;
  padding-block: var(--s-6);
  border-bottom: var(--tratto) solid var(--inchiostro);
}
.programma h3 {
  font-family: var(--titoli);
  font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.programma .prezzo {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--lettura);
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}
.programma .per-chi {
  font-size: 1rem;
  text-wrap: pretty;
}
.programma .cosa {
  margin-top: var(--s-3);
  list-style: none;
  font-size: var(--t-piccolo);
  color: var(--inchiostro-2);
}
.programma .cosa li {
  position: relative;
  padding-left: 1.1em;
}
.programma .cosa li + li { margin-top: var(--s-1); }
.programma .cosa li::before {
  content: "\2013";
  position: absolute;
  left: 0;
}
.programma .bottone { align-self: center; white-space: normal; }

.tester {
  margin-top: var(--s-6);
  padding: var(--s-5);
  border: var(--tratto-pesante) solid var(--inchiostro);
  border-radius: var(--angolo);
  max-width: 42rem; /* quanto la misura del testo (60ch) più il margine interno: niente vuoto a destra */
}
.tester h3 {
  font-family: var(--titoli);
  font-size: var(--t-h3);
  font-weight: 650;
  line-height: 1.2;
}
.tester p { margin-top: var(--s-2); max-width: 60ch; }

/* la Carta del bardo, su carta: un sistema di cinque battute, una per articolo,
   chiuso dalla stanghetta e dalla riga della firma */
.articoli {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: var(--s-6);
  list-style: none;
  counter-reset: articolo;
  border-right: var(--tratto-pesante) solid var(--inchiostro);
}
.articoli li {
  counter-increment: articolo;
  position: relative;
  min-width: 0;
  padding: 2.15rem var(--s-4) var(--s-5);
  border-left: var(--tratto) solid var(--inchiostro);
  background: var(--rigo) 0 .35rem / 100% var(--rigo-alto) no-repeat;
  font-size: 1rem;
  line-height: 1.55;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.articoli li::before {
  /* il numero dell'articolo sta sopra la battuta, come il numero di battuta in partitura */
  content: "Art. " counter(articolo);
  position: absolute;
  left: .2rem;
  top: -1.45rem;
  font-family: var(--incisione);
  font-style: italic;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.2;
  white-space: nowrap;
}
.firma {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
  margin-top: var(--s-6);
  font-style: italic;
  font-size: var(--t-piccolo);
  text-align: right;
  color: var(--inchiostro-2);
}
/* lo spazio della firma resta vuoto finché Raffaele non firma */
.riga-firma {
  flex: none;
  width: min(16rem, 70%);
  height: 2.4rem;
  border-bottom: var(--tratto) solid var(--inchiostro);
}

/* il bardo */
.bardo {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-6) var(--s-8);
  align-items: end;
}
.bardo p { max-width: 40ch; margin-top: var(--s-4); font-size: var(--t-guida); line-height: 1.5; }
.cronaca {
  list-style: none;
  border-top: var(--tratto-pesante) solid var(--inchiostro);
  font-size: var(--t-piccolo);
}
.cronaca li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: var(--tratto) solid var(--filetto);
}
.cronaca li span:last-child {
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
}
.cronaca + .bottone { margin-top: var(--s-5); }

/* domande */
.domande {
  border-top: var(--tratto-pesante) solid var(--inchiostro);
  max-width: 52rem;
}
.domande details { border-bottom: var(--tratto) solid var(--inchiostro); }
.domande summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
  font-family: var(--titoli);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
  list-style: none;
  cursor: pointer;
  /* col testo ingrandito una parola lunga può andare a capo, invece di spingere il segno + fuori pagina */
  overflow-wrap: anywhere;
}
.domande summary::-webkit-details-marker { display: none; }
.domande summary svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  transition: transform .3s var(--uscita);
}
.domande details[open] summary svg { transform: rotate(45deg); }
.domande summary:hover {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.domande details p {
  max-width: var(--misura);
  padding-bottom: var(--s-5);
}

/* ---------- modulo ---------- */

.scrivi {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-7) var(--s-8);
  align-items: start;
}
.scrivi .rassicura {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: var(--tratto) solid var(--filetto);
  font-size: var(--t-piccolo);
  color: var(--inchiostro-2);
  max-width: 34ch;
}
.modulo {
  display: grid;
  gap: var(--s-5);
}
.obbligatori {
  font-size: var(--t-piccolo);
  color: var(--inchiostro-2);
  line-height: 1.4;
}
.campo { display: grid; gap: var(--s-2); }
.campo label,
.campo legend {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
}
.aiuto {
  font-size: var(--t-piccolo);
  color: var(--inchiostro-2);
  line-height: 1.4;
}
.modulo input[type="text"],
.modulo input[type="email"],
.modulo textarea {
  width: 100%;
  min-height: 3rem;
  padding: .7em .85em;
  border: var(--tratto) solid var(--inchiostro);
  border-radius: var(--angolo);
  background: var(--carta-campo);
  font-size: 1rem;
  line-height: 1.45;
  transition: border-color .2s var(--uscita), box-shadow .2s var(--uscita);
}
.modulo textarea { min-height: 9.5rem; resize: vertical; }
.modulo input:hover,
.modulo textarea:hover { border-color: var(--inchiostro); box-shadow: 0 0 0 var(--tratto) var(--inchiostro); }
.modulo input:focus-visible,
.modulo textarea:focus-visible {
  /* contorno trasparente, non «none»: in contrasto forzato l'ombra sparisce e resta questo */
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--inchiostro);
  box-shadow: 0 0 0 var(--tratto-pesante) var(--inchiostro);
}
/* input[...] e textarea[...] per battere la specificità di .modulo input[type="text"] (0,2,1) */
.modulo input[aria-invalid="true"],
.modulo textarea[aria-invalid="true"] { border-color: var(--rossa); }
.modulo [aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 var(--tratto-pesante) var(--rossa); border-color: var(--rossa); }
.modulo ::placeholder { color: #6b6c74; opacity: 1; }

fieldset.campo {
  padding: 0;
  border: 0;
  min-width: 0;
}
fieldset.campo legend { padding: 0; margin-bottom: var(--s-2); }
.scelte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2) var(--s-4);
}
.scelta {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7em;
  min-height: 2.75rem;
  padding: .45em .7em;
  border: var(--tratto) solid var(--filetto-forte);
  border-radius: var(--angolo);
  background: var(--carta-campo);
  cursor: pointer;
  line-height: 1.3;
  transition: border-color .2s var(--uscita), background-color .2s var(--uscita);
}
.scelta:hover { border-color: var(--inchiostro); }
.scelta input {
  /* la testa di nota: vuota se libera, piena se scelta */
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 1.05rem;
  height: .78rem;
  margin: 0;
  border: 2px solid var(--inchiostro);
  border-radius: 50%;
  transform: rotate(-22deg);
  background: transparent;
  transition: background-color .15s var(--uscita);
}
.scelta input:checked { background: var(--inchiostro); }
.scelta input:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 3px; }
.scelta:has(input:checked) {
  border-color: var(--inchiostro);
  background: var(--carta);
  font-weight: 600;
}
.consenso {
  display: flex;
  align-items: flex-start;
  gap: .7em;
  font-size: var(--t-piccolo);
  line-height: 1.45;
}
.consenso input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: .12em 0 0;
  border: 2px solid var(--inchiostro);
  border-radius: 2px;
  background: var(--carta-campo) center / 80% no-repeat;
  cursor: pointer;
}
.consenso input:checked {
  background-color: var(--inchiostro);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4 4.8 9 10 3' fill='none' stroke='%23fafbfc' stroke-width='2'/%3E%3C/svg%3E");
}
.consenso input[aria-invalid="true"] { border-color: var(--rossa); }
.conteggio {
  justify-self: end;
  font-size: var(--t-minimo);
  color: var(--inchiostro-2);
  font-variant-numeric: tabular-nums lining-nums;
}
p.errore {
  font-size: var(--t-piccolo);
  color: var(--rossa);
  font-weight: 600;
  line-height: 1.4;
}
/* senza JS il server rimanda a ?errore=<campo>#errore-<campo>: si vede l'errore bersaglio.
   Con JS (.vivo) decide solo «hidden», altrimenti l'errore corretto resterebbe a vista. */
.modulo:not(.vivo) p.errore:target { display: block; }
fieldset.errore .scelta { border-color: var(--rossa); }
fieldset.errore .scelta input { border-color: var(--rossa); }
.errore-modulo {
  padding: var(--s-3) var(--s-4);
  border: var(--tratto-pesante) solid var(--rossa);
  border-radius: var(--angolo);
  color: var(--rossa);
  font-weight: 600;
}
.trappola {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.modulo .bottone { justify-self: start; min-width: min(14rem, 100%); }
/* occupato: i colori del bottone disattivato, senza velo (inchiostro-2 su filetto, oltre 5:1) */
.modulo[data-occupato] .bottone { cursor: progress; }

/* contrasto forzato (Windows): ombre e sfondi dell'autore spariscono, quindi il focus
   e lo stato scelto di radio e casella si ridisegnano con i colori di sistema */
@media (forced-colors: active) {
  .modulo input:focus-visible,
  .modulo textarea:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
  .scelta input,
  .consenso input {
    forced-color-adjust: none;
    border-color: CanvasText;
    background-color: Canvas;
  }
  .scelta input:checked { background-color: Highlight; border-color: Highlight; }
  .consenso input:checked {
    /* niente spunta chiara su Highlight: quadrato pieno con un anello di Canvas */
    background-image: none;
    background-color: Highlight;
    border-color: Highlight;
    box-shadow: inset 0 0 0 .2rem Canvas;
  }
  .scelta input:focus-visible,
  .consenso input:focus-visible { outline: 2px solid Highlight; outline-offset: 3px; }
  .scelta:has(input:checked) { border-color: Highlight; }
}

/* ---------- fine ---------- */

.fine {
  border-top: var(--tratto) solid var(--inchiostro);
  padding-block: var(--s-7) var(--s-6);
}
.fine .pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
}
.doppia-stanghetta {
  display: flex;
  align-items: flex-end;
  gap: var(--s-4);
}
.doppia-stanghetta::before {
  /* stanghetta finale: sottile e spessa */
  content: "";
  width: 11px;
  height: 3.2rem;
  border-left: 1.5px solid var(--inchiostro);
  border-right: 5px solid var(--inchiostro);
}
.parola-fine {
  font-family: var(--incisione);
  font-style: italic;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
}
.fine-righe {
  display: grid;
  gap: var(--s-2);
  justify-items: end;
  font-size: var(--t-piccolo);
  color: var(--inchiostro-2);
  text-align: right;
}
.fine-righe ul {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-5);
  list-style: none;
}
/* «D.C. al Fine» come in partitura, con la glossa in chiaro sotto */
.dacapo {
  display: inline-grid;
  justify-items: inherit;
  text-decoration: none;
  line-height: 1.2;
}
.dacapo .dc {
  font-family: var(--incisione);
  font-style: italic;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--inchiostro);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: var(--filetto-forte);
}
.dacapo .glossa { font-size: var(--t-minimo); }
.dacapo:hover .dc {
  text-decoration-color: var(--inchiostro);
  text-decoration-thickness: 2px;
}

/* il rigo come filetto: cinque linee al posto del filetto singolo tra le sezioni e sopra la fine */
.filetto-rigo {
  border-top: 0;
  background-image: var(--rigo);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: var(--rigo-largo, 100%) var(--rigo-alto);
}
.sezione.filetto-rigo,
.fine.filetto-rigo { --rigo-largo: min(calc(100% - 2 * var(--margine)), var(--larghezza)); }

/* ---------- pagina del bardo ---------- */

/* testata della pagina: il nome a sinistra, la riga e l'invito a destra;
   quando c'è il ritratto a penna, nome e riga vanno a sinistra e il ritratto a destra */
.programma-sala {
  padding-block: clamp(2.5rem, 1rem + 5vw, 5rem) var(--s-8);
}
.sala {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "nome invito";
  gap: var(--s-6) var(--s-8);
  align-items: end;
}
/* il nome prende la sua larghezza: il filetto del ruolo chiude con il nome */
.sala-nome { grid-area: nome; justify-self: start; }
.sala-invito { grid-area: invito; }
/* con il ritratto: nome, riga e invito fanno un blocco solo, a metà altezza del disegno.
   .con-ritratto è il ripiego per i browser senza :has() */
.sala:has(.ritratto),
.sala.con-ritratto {
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  grid-template-areas: "nome ritratto" "invito ritratto";
  grid-template-rows: 1fr 1fr;
  row-gap: var(--s-6);
}
.sala:has(.ritratto) .sala-nome,
.sala.con-ritratto .sala-nome { align-self: end; }
.sala:has(.ritratto) .sala-invito,
.sala.con-ritratto .sala-invito { align-self: start; }
.programma-sala h1 {
  overflow-wrap: break-word;
  font-family: var(--titoli);
  font-size: clamp(3rem, 1.4rem + 6.4vw, 6rem);
  font-weight: 540;
  line-height: 1;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.ruolo {
  display: flex;
  align-items: baseline;
  gap: .6em;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: var(--tratto) solid var(--inchiostro);
  font-style: italic;
  font-size: var(--t-guida);
  color: var(--inchiostro-2);
}
.riga-bardo {
  max-width: 30ch;
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  line-height: 1.42;
  text-wrap: pretty;
}
.programma-sala .azioni { justify-content: flex-start; }
/* il ritratto è inchiostro su carta: il bianco del disegno sparisce nella carta della pagina */
.ritratto {
  grid-area: ritratto;
  justify-self: end;
  width: min(100%, 26rem);
  margin: 0;
}
.ritratto img {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

/* chi legge: la nota in prosa a sinistra, a destra i tre righi del bardo uniti dall'accollatura,
   con il nome di ogni rigo al suo posto, come gli strumenti in testa a una partitura */
.chi {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-7) var(--s-8);
  align-items: center;
}
.chi h2 { margin-bottom: var(--s-5); }
.chi-testo p { max-width: 40ch; }
.chi-testo .parola {
  margin-top: var(--s-5);
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  font-style: italic;
  line-height: 1.42;
  text-wrap: pretty;
}
.tre-voci { margin: 0; }
.voci {
  --riga-voce: 3.25rem;
  position: relative;
  display: grid;
  grid-template-columns: max-content 2.25rem minmax(0, 1fr);
  grid-template-rows: repeat(3, var(--riga-voce));
  row-gap: var(--s-3);
  list-style: none;
}
.voci li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  font-family: var(--titoli);
  font-size: clamp(1.2rem, .95rem + 1.1vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
  white-space: nowrap;
  text-align: right;
}
/* accollatura e stanghette occupano già le righe: le voci vanno al loro posto a mano */
.voci li:nth-child(2) { grid-row: 2; }
.voci li:nth-child(3) { grid-row: 3; }
.voci li:first-child { grid-row: 1; }
/* il rigo di ogni voce */
.voci li::after {
  content: "";
  grid-column: 3;
  height: var(--rigo-alto);
  background: var(--rigo);
}
/* accollatura, che unisce i tre righi */
.voci::before {
  content: "";
  grid-column: 2;
  grid-row: 1 / -1;
  justify-self: end;
  width: 16px;
  margin: calc((var(--riga-voce) - var(--rigo-alto)) / 2 - 9px) 6px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 10V8.5C6 8.5 12 6 15.5 0L16 .6C13 7.2 7 10 0 10Z' fill='%2317171b'/%3E%3C/svg%3E") top left / 16px 10px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 0V1.5C6 1.5 12 4 15.5 10L16 9.4C13 2.8 7 0 0 0Z' fill='%2317171b'/%3E%3C/svg%3E") bottom left / 16px 10px no-repeat,
    linear-gradient(var(--inchiostro), var(--inchiostro)) left center / 5px calc(100% - 18px) no-repeat;
  pointer-events: none;
}
/* stanghetta d'attacco e stanghetta finale, attraverso i tre righi */
.voci::after {
  content: "";
  grid-column: 3;
  grid-row: 1 / -1;
  margin-block: calc((var(--riga-voce) - var(--rigo-alto)) / 2);
  border-left: var(--tratto) solid var(--inchiostro);
  border-right: var(--tratto-pesante) solid var(--inchiostro);
  pointer-events: none;
}
.tre-voci figcaption {
  margin-top: var(--s-5);
  font-size: var(--t-piccolo);
  font-style: italic;
  color: var(--inchiostro-2);
  text-align: right;
}
.tre-voci figcaption i {
  display: block;
  margin-top: var(--s-1);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--inchiostro);
}

/* listino: i prezzi in numeri da incisione */
.listino .cifra {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .3em;
  margin-top: var(--s-3);
  font-weight: 600;
  font-size: 1.15rem;
}
.numerale {
  font-family: var(--incisione);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.listino .dettaglio {
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-piccolo);
  color: var(--inchiostro-2);
}
.listino .dettaglio.sotto { flex-basis: 100%; }
.listino .cifra > .dettaglio:not(.sotto) { font-size: 1.05rem; }
/* il prezzo da tester si vede: inchiostro pieno, non nota di margine */
.listino .offerta { font-style: normal; font-weight: 600; font-size: 1rem; color: var(--inchiostro); }
/* il bottone si allinea in alto con il nome del servizio: l'occhio non scende a zig-zag */
.listino > li > .bottone { align-self: start; margin-top: .3rem; }

.segnaposto {
  padding: 0 .25em;
  border: 1px dashed var(--rossa);
  border-radius: var(--angolo);
  color: var(--rossa);
  font-style: italic;
  font-size: .92em;
}
.ultimo-aggiornamento {
  margin-top: var(--s-6);
  font-size: var(--t-minimo);
  font-style: italic;
  color: var(--inchiostro-2);
}

/* ---------- pagine di servizio ---------- */

.foglio {
  padding-block: var(--s-8) var(--sezione);
}
.foglio .colonna { max-width: var(--misura); margin-inline: auto; }
.foglio h1 {
  font-family: var(--titoli);
  font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4rem);
  font-weight: 540;
  line-height: 1.06;
  letter-spacing: -.02em;
  margin-bottom: var(--s-5);
  text-wrap: balance;
}
.foglio h2 {
  font-family: var(--titoli);
  font-size: var(--t-h3);
  font-weight: 650;
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
}
.foglio p + p,
.foglio p + ul,
.foglio ul + p { margin-top: var(--s-4); }
.foglio ul { padding-left: 1.2em; }
.foglio li + li { margin-top: var(--s-2); }
.foglio .bottone { margin-top: var(--s-6); }
.foglio h1 + .ultimo-aggiornamento { margin-top: 0; margin-bottom: var(--s-6); }
.foglio table {
  width: 100%;
  margin-top: var(--s-4);
  border-collapse: collapse;
  font-size: var(--t-piccolo);
  line-height: 1.45;
}
.foglio th,
.foglio td {
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom: var(--tratto) solid var(--filetto);
  text-align: left;
  vertical-align: top;
}
.foglio thead th {
  border-bottom: var(--tratto-pesante) solid var(--inchiostro);
  font-weight: 600;
  font-variant-caps: all-small-caps;
  letter-spacing: .04em;
  color: var(--inchiostro-2);
}

/* ---------- movimento ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ---------- misure ---------- */

@media (max-width: 1100px) {
  .righi { grid-template-columns: 6.75rem repeat(4, minmax(0, 1fr)); }
  .righi::before,
  .righi::after { left: calc(6.75rem - 11px); }
  .battuta { padding-inline: var(--s-3); }
  .programma { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .programma .bottone { grid-column: 2; justify-self: start; }
  /* la Carta: cinque battute in fila non stanno, si impilano come su /raffaele */
  .articoli {
    grid-template-columns: minmax(0, 1fr);
    max-width: 46rem;
    margin-top: var(--s-4);
    border-right: 0;
  }
  .articoli li {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: var(--s-4);
    padding: 2.4rem 0 var(--s-4);
    border-left: 0;
  }
  .articoli li::before { position: static; }
}

@media (max-width: 900px) {
  /* testata su due righe: marchio e bottone sopra, le lettere di prova sotto, sole,
     con il nome della sezione per chi usa un lettore di schermo */
  html { scroll-padding-top: 7.25rem; }
  .testata .pagina {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "marchio invito" "indice indice";
    align-items: center;
    gap: 0 var(--s-4);
    min-height: 0;
    padding-top: var(--s-2);
  }
  .marchio { grid-area: marchio; }
  .testata .pagina > .bottone { grid-area: invito; }
  .indice { grid-area: indice; margin: var(--s-1) 0 0; }
  .indice ul { flex-wrap: wrap; gap: var(--s-1); }
  .indice a {
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
  .indice .voce {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .indice .prova { font-size: .95rem; }
  .indice a:hover .prova { background: var(--inchiostro); color: var(--carta); }
  .movimenti { grid-template-columns: minmax(0, 1fr); }
  .movimenti li,
  .movimenti li + li {
    padding: var(--s-5) 0;
    border-left: 0;
    border-bottom: var(--tratto) solid var(--inchiostro);
  }
  .movimenti p { max-width: 52ch; }
  .blocco-passaporto,
  .bardo,
  .chi,
  .scrivi { grid-template-columns: minmax(0, 1fr); }
  .sala,
  .sala:has(.ritratto),
  .sala.con-ritratto {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "nome" "invito";
    grid-template-rows: none;
    gap: var(--s-5);
  }
  /* al telefono il ritratto viene dopo l'invito: il bottone resta nella prima schermata */
  .sala:has(.ritratto),
  .sala.con-ritratto { grid-template-areas: "nome" "invito" "ritratto"; }
  .ritratto { justify-self: start; width: min(100%, 18rem); }
  .articoli { grid-template-columns: minmax(0, 1fr); }
  .piede-sistema { grid-template-columns: minmax(0, 1fr); }

  /* il sistema diventa una battuta sotto l'altra */
  .righi {
    grid-template-columns: 1.25rem minmax(0, 1fr);
    grid-template-rows: none;
    border-right: 0;
    border-bottom: var(--tratto-pesante) solid var(--inchiostro);
  }
  .righi::before { left: 0; top: .4rem; bottom: .4rem; }
  .righi::after { left: 0; top: calc(.4rem - 9px); bottom: calc(.4rem - 9px); }
  .nome-rigo { display: none; }
  .battuta,
  .battuta.rigo-1,
  .battuta.rigo-2,
  .battuta.b1, .battuta.b2, .battuta.b3, .battuta.b4 {
    grid-column: 2;
    grid-row: auto;
    border-left: 0;
    padding: 2.1rem 0 var(--s-4);
  }
  .battuta.rigo-1 { border-top: var(--tratto) solid var(--inchiostro); }
  .battuta.rigo-1:first-of-type { border-top: 0; }
  .battuta.rigo-2 { border-top: 0; padding-top: var(--s-2); background-image: none; }
  /* il nome del rigo va sul primo blocco: la nota, o la riscrittura quando la nota non c'è */
  .battuta.rigo-2 .nota::before,
  .battuta.rigo-2 .riscrittura:first-child::before {
    content: attr(data-rigo) " · ";
    content: attr(data-rigo) " · " / "";
    font-style: italic;
    color: var(--inchiostro-2);
  }
  .battuta.rigo-2 .riscrittura:first-child::before { font-size: var(--t-piccolo); }
  .n-battuta { top: -.35rem; left: auto; right: 0; }
  .battuta.rigo-1 .n-battuta::before { content: attr(data-etichetta) " "; }
}

@media (max-width: 700px) {
  /* la tabella dell'informativa diventa una scheda per riga */
  .foglio thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .foglio tr {
    display: block;
    padding-block: var(--s-3);
    border-bottom: var(--tratto) solid var(--filetto);
  }
  .foglio td { display: block; padding: var(--s-1) 0; border: 0; }
  .foglio td::before {
    content: attr(data-etichetta);
    content: attr(data-etichetta) / "";
    display: block;
    font-weight: 600;
    font-variant-caps: all-small-caps;
    letter-spacing: .04em;
    color: var(--inchiostro-2);
  }
}

@media (max-width: 560px) {
  .testata .bottone { padding-inline: .8em; }

  /* prima schermata del telefono: il titolo, un invito e subito la Frase 1 con il suo segno e la prima nota */
  .frontespizio { padding-top: var(--s-4); }
  .crediti { margin-top: var(--s-3); padding-top: var(--s-2); }
  .guida { margin-top: var(--s-3); font-size: 1.05rem; line-height: 1.45; }
  /* bottone e rimando sulla stessa riga a 390 px; più stretto vanno a capo, centrati */
  .azioni { margin-top: var(--s-4); gap: var(--s-1) var(--s-3); }
  .azioni .bottone { padding-inline: 1em; font-size: .9375rem; }
  .rimando { font-size: var(--t-piccolo); }
  .sistema { margin-top: var(--s-4); }
  .comandi { gap: var(--s-2); }
  /* bersagli del tocco alti 44 px; le larghezze restano, così le righe non vanno a capo più di prima */
  .bottone-piccolo,
  .leve button,
  .comando { min-height: 2.75rem; }
  .etichetta-esempio { margin-bottom: var(--s-3); padding-block: var(--s-1); font-size: var(--t-piccolo); line-height: 1.4; text-wrap: pretty; }
  .tempo { font-size: 1.05rem; }
  .sistema-capo { align-items: flex-start; gap: var(--s-2); margin-bottom: var(--s-2); }
  .comando-ricomincia .etichetta-comando { display: none; }
  .comando-ricomincia { padding-inline: 0; }
  .nota-tester { margin-top: var(--s-5); text-align: left; }
  .legenda { grid-template-columns: minmax(0, 1fr); }
  .scelte { grid-template-columns: minmax(0, 1fr); }
  .programma { grid-template-columns: minmax(0, 1fr); }
  .programma .bottone { grid-column: 1; }
  .voci-passaporto { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .voci-passaporto dd + dt { margin-top: var(--s-3); }
  .articoli li { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .passaporto dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .passaporto dd + dt { margin-top: var(--s-2); }
  .fine .pagina { flex-direction: column; align-items: flex-start; }
  .fine-righe { justify-items: start; text-align: left; }
  .firma { align-items: flex-start; text-align: left; }
  .modulo .bottone { justify-self: stretch; }
}

/* telefoni stretti (360-375 px): Prima/Dopo, «Segui la lettura» e l'icona restano su una riga */
@media (max-width: 400px) {
  /* i tre righi del bardo: nomi un poco più piccoli, così il rigo resta un rigo anche a 320 px */
  .voci { grid-template-columns: max-content 1.5rem minmax(0, 1fr); }
  .voci li { font-size: 1.1rem; }
  .comandi { gap: .375rem; }
  .leve button { padding-inline: .7em; }
  .comando-leggi { padding-inline: .6em; }
}