/* Ardesia — Studio legale. Un codice annotato: carta avorio, inchiostro nero caldo,
   un solo rosso per numeri d'articolo, linguette e rinvii. Brygada 1918, SIL OFL 1.1. */

@font-face {
  font-family: "Brygada 1918";
  src: url("brygada-1918.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Brygada 1918";
  src: url("brygada-1918-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}

@counter-style lettere {
  system: extends lower-alpha;
  suffix: ") ";
}

:root {
  --carta: #f4eee1;
  --inchiostro: #221b16;
  --smorzato: #5f544b;
  --rosso: #a32a1f;
  --rosso-cupo: #8c2219;
  --lavagna: #1c1714;
  --lavagna-testo: #d8cebf;
  --accensione: #efd6c7;
  --filetto: #cdbfa7;
  --filetto-scuro: #9c8e7c;
  --avorio-linguetta: #f7f1e6;

  --bordo: 4.5rem;
  --misura: 66ch;
  --gutter: clamp(1.25rem, 3.2vw, 3.25rem);
  --ease: cubic-bezier(.16, 1, .3, 1);

  color-scheme: light;
  color: var(--inchiostro);
  background: var(--lavagna);
  font-family: "Brygada 1918", Georgia, "Times New Roman", serif;
  font-synthesis: none;
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: #7a6d61 var(--lavagna);
}

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

body {
  margin: 0;
  background: var(--lavagna);
  color: var(--inchiostro);
  font-size: clamp(1.0625rem, .96rem + .32vw, 1.1875rem);
  line-height: 1.6;
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
em { font-style: italic; }
address { font-style: normal; }

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
a:focus-visible {
  outline: 2px solid var(--rosso);
  outline-offset: 3px;
  border-radius: 1px;
}

svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: square;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.nobr { white-space: nowrap; }

.salta {
  position: absolute;
  z-index: 40;
  top: .5rem;
  left: .75rem;
  padding: .6rem 1rem;
  background: var(--carta);
  color: var(--inchiostro);
  font-variant-caps: all-small-caps;
  letter-spacing: .08em;
  transform: translateY(-200%);
}
.salta:focus { transform: none; }

/* ------------------------------------------------------------------ avvertenza */

.avvertenza {
  padding: .45rem calc(var(--bordo) + var(--gutter)) .5rem var(--gutter);
  color: var(--lavagna-testo);
  font-size: .875rem;
  line-height: 1.45;
}
.avvertenza a {
  display: inline-block;
  padding-block: .25rem;
  text-decoration: underline;
  text-decoration-color: #8f8173;
}
.avvertenza a:hover { text-decoration-color: currentColor; }
.avvertenza a:focus-visible { outline-color: var(--avorio-linguetta); }

/* ------------------------------------------------------------------- linguette */

.linguette {
  position: fixed;
  z-index: 20;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--bordo);
  overflow: hidden;
  background: var(--lavagna);
}
/* L'ombra del foglio cade sulle radici delle linguette. */
.linguette::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: .9rem;
  background: linear-gradient(to right, rgb(10 6 4 / .5), rgb(10 6 4 / 0));
  pointer-events: none;
}
.linguette ol {
  list-style: none;
  margin: 0;
  padding: clamp(3.25rem, 9vh, 5.75rem) 0 1rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.linguetta {
  --uscita: -1.35rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .55rem;
  width: 3.9rem;
  min-height: 8.5rem;
  padding: .6rem .6rem .7rem 0;
  background: var(--rosso-cupo);
  color: var(--avorio-linguetta);
  text-decoration: none;
  border-radius: 0 3px 3px 0;
  transform: translateX(var(--uscita));
  transition: transform .5s var(--ease), background-color .3s ease;
}
.lg-art {
  width: 1.2rem;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: lining-nums;
}
.lg-voce {
  writing-mode: vertical-rl;
  width: 1.2rem;
  font-size: .875rem;
  line-height: 1.2rem;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: .08em;
  white-space: nowrap;
}
.linguetta:focus-visible {
  outline: 2px solid var(--avorio-linguetta);
  outline-offset: -5px;
  border-radius: 0 3px 3px 0;
}
@media (hover: hover) {
  .linguetta:hover { --uscita: -.75rem; background: var(--rosso); }
}
.linguetta:focus-visible { --uscita: -.75rem; background: var(--rosso); }

/* La linguetta della sezione aperta sporge dal bordo. */
.linguetta[aria-current] { --uscita: 0rem; background: var(--rosso); }
.home:not(:has(.articolo:target, .articolo :target)) .lg-materie { --uscita: 0rem; background: var(--rosso); }
/* All'apertura l'art. 1 e' l'articolo aperto: filo sotto il numero e nota accesa. */
.home:not(:has(.articolo:target, .articolo :target)) #materie .art-num::after { transform: scaleX(1); }
.home:not(:has(.articolo:target, .articolo :target)) #nota-1 { color: var(--inchiostro); }
.home:not(:has(.articolo:target, .articolo :target)) #nota-1::before { transform: scaleX(1); }
.home:has(#materie:target, #materie :target) .lg-materie,
.home:has(#colloquio:target, #colloquio :target) .lg-colloquio,
.home:has(#compensi:target, #compensi :target) .lg-compensi,
.home:has(#studio:target, #studio :target) .lg-studio,
.home:has(#contatti:target, #contatti :target) .lg-contatti { --uscita: 0rem; background: var(--rosso); }

/* ---------------------------------------------------------------------- foglio */

.foglio {
  min-height: 100svh;
  margin-right: var(--bordo);
  padding: .5rem var(--gutter);
  background: var(--carta);
  border-right: 1px solid var(--filetto);
}

.testo,
.colophon,
.testatina {
  display: grid;
  grid-template-columns:
    [margine-start] minmax(9.5rem, 1fr)
    [margine-end testo-start] minmax(0, var(--misura))
    [testo-end respiro-start] minmax(1rem, .6fr)
    [respiro-end];
  column-gap: var(--gutter);
}
.testo > *,
.colophon > *,
.testatina > * { grid-column: testo; }

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

.frontespizio {
  padding-block: clamp(2rem, 5.4vh, 3.5rem) clamp(2rem, 5vh, 3.25rem);
  text-align: center;
}
.frontespizio h1 { display: grid; justify-items: center; }
.fr-studio {
  padding: .55rem 1.25rem .6rem;
  border-block: 1px solid var(--inchiostro);
  font-size: clamp(1rem, .9rem + .3vw, 1.1875rem);
  line-height: 1.3;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: .26em;
  text-indent: .26em;
}
.fr-titolo {
  margin-top: clamp(1.1rem, 2.6vh, 1.75rem);
  font-size: clamp(2.3rem, 1.25rem + 3.2vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -.015em;
}
.fr-titolo em { color: var(--rosso); }
.filetto-inglese {
  display: block;
  width: min(15rem, 60%);
  height: .4rem;
  margin: clamp(.9rem, 2.2vh, 1.4rem) auto;
  fill: var(--inchiostro);
  stroke: none;
}
.fr-edizione {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--smorzato);
}
.fr-anno {
  color: var(--inchiostro);
  font-variant-caps: all-small-caps;
  letter-spacing: .12em;
}
.fr-edizione .sep { color: var(--rosso); }

/* -------------------------------------------------------------------- articoli */

.articolo {
  grid-column: margine-start / testo-end;
  display: grid;
  grid-template-columns: subgrid;
  align-content: start;
  padding-block: clamp(2.75rem, 6vw, 4.75rem) 0;
  scroll-margin-top: 1.5rem;
}
.articolo ~ .articolo {
  margin-top: clamp(1rem, 2vw, 1.75rem);
  border-top: 1px solid var(--filetto);
}
#materie { padding-top: 0; }

.art-intestazione {
  grid-column: margine-start / testo-end;
  grid-row: 1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  margin-bottom: clamp(.8rem, 1.6vw, 1.2rem);
}
.art-num {
  position: relative;
  grid-column: margine;
  justify-self: end;
  color: var(--rosso);
  font-size: clamp(3.4rem, 1.6rem + 3.6vw, 5.5rem);
  line-height: .86;
  font-weight: 500;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.art-abbr {
  margin-right: .06em;
  font-size: .42em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}
/* Il margine dell'articolo aperto si accende: un filo rosso sotto il numero. */
.art-num::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -.14em;
  width: 100%;
  height: 2px;
  background: var(--rosso);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .7s var(--ease);
}
.articolo:target .art-num::after { transform: scaleX(1); }

.rubrica {
  grid-column: testo;
  font-size: clamp(1.7rem, 1.2rem + 1.3vw, 2.3rem);
  line-height: 1.12;
  font-style: italic;
  letter-spacing: -.01em;
}

.richiamo {
  position: relative;
  top: -.55em;
  margin-left: .12em;
  padding: 0 .12em;
  color: var(--rosso);
  font-size: .58em;
  line-height: 0;
  font-style: normal;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  text-decoration: none;
}
.richiamo:hover { text-decoration: underline; }
.rubrica .richiamo { font-size: .5em; top: -.8em; }

.commi {
  grid-column: testo;
  grid-row: 2;
  padding: 0;
}
.commi > li {
  padding-left: .15rem;
  margin-bottom: .55em;
}
.commi > li::marker {
  color: var(--rosso);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
}
.commi > li:last-child { margin-bottom: 0; }

.materia {
  font-weight: 500;
  font-variant-caps: small-caps;
  letter-spacing: .035em;
  text-decoration-color: var(--rosso);
  transition: color .2s ease;
}
.materia:hover { color: var(--rosso); }

.rinvio {
  grid-column: testo;
  grid-row: 3;
  margin-top: 1rem;
}
.rinvio a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.75rem;
  color: var(--rosso);
  font-style: italic;
  text-decoration-color: rgb(163 42 31 / .45);
}
.rinvio a:hover { text-decoration-color: currentColor; }
.rinvio svg { width: 1.05em; height: 1.05em; transition: transform .35s var(--ease); }
.rinvio a:hover svg { transform: translateX(.2rem); }

/* Note a margine: si accendono quando l'articolo (o la nota) e' aperto. */
.nota {
  position: relative;
  isolation: isolate;
  grid-column: margine;
  grid-row: 2 / span 2;
  align-self: start;
  justify-self: end;
  max-width: 15.5rem;
  margin: .35rem -.7rem 0 0;
  padding: .55rem .7rem .6rem;
  color: var(--smorzato);
  font-size: .9375rem;
  line-height: 1.45;
  text-align: right;
  hyphens: auto;
  scroll-margin-top: 2rem;
  transition: color .4s ease .1s;
}
.nota::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--accensione);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .75s var(--ease) .12s;
}
.nota-etichetta,
.c-num,
.citazione-fonte,
.rinvio-margine { font-variant-numeric: lining-nums; }
.nota-etichetta {
  display: block;
  margin-bottom: .1rem;
  color: var(--rosso);
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: .1em;
  font-size: 1.07em;
}
.articolo:target .nota,
.nota:target { color: var(--inchiostro); }
.articolo:target .nota::before,
.nota:target::before { transform: scaleX(1); }
@media (hover: hover) {
  .articolo:has(.richiamo:hover) .nota { color: var(--inchiostro); }
  .articolo:has(.richiamo:hover) .nota::before { transform: scaleX(1); }
}

/* Art. 3: nel margine, la parcella di esempio in breve. */
.prospetto dl {
  display: grid;
  gap: .05rem;
  min-width: 12.5rem;
  margin-top: .2rem;
}
.prospetto dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.prospetto dd { font-variant-numeric: lining-nums tabular-nums; }
.prospetto .prospetto-totale {
  margin-top: .25rem;
  padding-top: .25rem;
  border-top: 1px solid currentColor;
  font-weight: 500;
}

/* ------------------------------------------------------------------- recapiti */

.recapiti dl { display: grid; gap: .3rem; }
.recapiti dl > div {
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.recapiti dt {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  gap: .6rem;
  min-width: 6rem;
  font-variant-caps: all-small-caps;
  letter-spacing: .09em;
  font-weight: 500;
}
.recapiti dt::after {
  content: "";
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--filetto-scuro);
}
.recapiti dd {
  flex: 0 1 auto;
  max-width: 72%;
  text-align: right;
}

/* ---------------------------------------------------------------------- firma */

.firma { margin-top: clamp(1.5rem, 3.4vh, 2.25rem); }
.firma-apertura { margin-top: clamp(1.4rem, 3.2vh, 2.2rem); }
.commi .firma { margin-top: 1.4rem; }

.firma-linea {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}
.firma-linea::before {
  content: "";
  flex: 1 1 auto;
  min-width: 2.5rem;
  margin-bottom: .55rem;
  border-bottom: 1px solid var(--inchiostro);
}
.firma-dicitura {
  margin-top: .4rem;
  color: var(--smorzato);
  font-size: .9375rem;
  line-height: 1.45;
  font-style: italic;
}

.bottone {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .6rem;
  min-height: 3rem;
  padding: .55rem 1.15rem .65rem 1.3rem;
  background: var(--inchiostro);
  color: var(--carta);
  font-size: 1.1875rem;
  line-height: 1.2;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: .1em;
  text-decoration: none;
  border-radius: 2px;
  transition: background-color .25s ease;
}
.bottone svg { width: 1.05rem; height: 1.05rem; transition: transform .35s var(--ease); }
.bottone:hover { background: var(--rosso); }
.bottone:hover svg { transform: translateX(.2rem); }
.bottone:active { background: var(--rosso-cupo); }

/* -------------------------------------------------------------------- colophon */

.colophon {
  margin-top: clamp(4rem, 9vw, 6.5rem);
  padding-block: 0 clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}
.fregio {
  display: block;
  width: 5rem;
  height: .75rem;
  margin: 0 auto 1rem;
}
.fregio-filo { stroke: var(--filetto-scuro); stroke-width: 1; }
.fregio-rombo { fill: var(--rosso); stroke: none; }
.colophon p {
  font-size: .9375rem;
  color: var(--smorzato);
  font-variant-caps: all-small-caps;
  letter-spacing: .1em;
}
.colophon a {
  display: inline-block;
  padding-block: .35rem;
  text-decoration-color: var(--filetto-scuro);
}
.colophon a:hover { color: var(--inchiostro); text-decoration-color: var(--rosso); }

/* ------------------------------------------------------- pagine di commento */

.testatina {
  padding-top: clamp(1.25rem, 3vh, 2rem);
}
.testatina-riga {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .25rem 1.5rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--inchiostro);
  font-variant-caps: all-small-caps;
  letter-spacing: .12em;
  font-size: 1rem;
}
.testatina-riga a {
  display: inline-block;
  padding-block: .3rem;
  font-weight: 500;
  text-decoration: none;
}
.testatina-riga a:hover { color: var(--rosso); }
.testatina-riga span { color: var(--smorzato); }

.pagina-testa {
  grid-column: margine-start / testo-end;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  padding-block: clamp(2.5rem, 7vh, 4.5rem) 0;
}
.pagina-testa .art-num::after { transform: scaleX(1); }
.pagina-testa h1 {
  grid-column: testo;
  font-size: clamp(2.2rem, 1.3rem + 2.7vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -.015em;
}
.citazione {
  grid-column: margine-start / testo-end;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  margin-top: clamp(1.5rem, 3.5vh, 2.25rem);
}
.citazione-fonte {
  grid-column: margine;
  justify-self: end;
  color: var(--rosso);
  font-style: italic;
  font-size: .9375rem;
  white-space: nowrap;
}
.citazione-fonte a { text-decoration-color: rgb(163 42 31 / .45); }
.citazione blockquote {
  grid-column: testo;
  padding-left: 1.1rem;
  border-left: 1px solid var(--rosso);
  font-style: italic;
  font-size: 1.125em;
  line-height: 1.5;
}

.capo {
  grid-column: margine-start / respiro-end;
  display: grid;
  grid-template-columns: subgrid;
  align-content: start;
  margin-top: clamp(3rem, 7vw, 4.75rem);
}
.capo-titolo {
  grid-column: margine-start / testo-end;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  padding-top: .9rem;
  margin-bottom: 1.25rem;
  border-top: 1px solid var(--filetto);
}
.capo-titolo span {
  grid-column: testo;
  font-size: clamp(1.6rem, 1.2rem + 1.1vw, 2.1rem);
  line-height: 1.15;
  font-style: italic;
}
.capo > .commi { grid-row: auto; }

/* Cosa portare: ogni materia e' un blocco con il rinvio all'articolo nel margine. */
.materia-blocco {
  position: relative;
  isolation: isolate;
  grid-column: margine-start / testo-end;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  padding-block: .9rem 1rem;
  scroll-margin-top: 1.5rem;
}
.materia-blocco + .materia-blocco { border-top: 1px dotted var(--filetto-scuro); }
.materia-blocco::before {
  content: "";
  grid-column: testo;
  grid-row: 1 / span 2;
  align-self: stretch;
  z-index: -1;
  margin: -.5rem -.9rem;
  background: var(--accensione);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .75s var(--ease);
}
.materia-blocco:target::before { transform: scaleX(1); }
.rinvio-margine {
  grid-column: margine;
  grid-row: 1;
  justify-self: end;
  color: var(--smorzato);
  font-style: italic;
  font-size: .9375rem;
  white-space: nowrap;
  transition: color .3s ease;
}
.rinvio-margine a {
  display: inline-block;
  padding-block: .2rem;
  text-decoration-color: var(--filetto-scuro);
}
.rinvio-margine a:hover { color: var(--rosso); text-decoration-color: currentColor; }
.materia-blocco:target .rinvio-margine { color: var(--rosso); }
.materia-blocco h3 {
  grid-column: testo;
  grid-row: 1;
  font-weight: 500;
  font-size: 1.125em;
  font-variant-caps: small-caps;
  letter-spacing: .04em;
}
.lettere {
  grid-column: testo;
  grid-row: 2;
  margin-top: .3rem;
  padding-left: 1.9rem;
  list-style: lettere;
}
.lettere li::marker { color: var(--rosso); font-style: italic; }

.chiusura {
  grid-column: testo;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

/* Parcella: tabella annotata, un comma per voce del calcolo. */
.parcella-sezione {
  grid-column: testo-start / respiro-end;
  margin-top: clamp(2.5rem, 6vw, 3.75rem);
}
.parcella {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.0625rem;
  line-height: 1.45;
}
.parcella caption {
  caption-side: top;
  padding-bottom: .6rem;
  text-align: left;
  color: var(--smorzato);
  font-style: italic;
  font-size: .9375rem;
}
.parcella thead th {
  padding: 0 0 .45rem;
  border-bottom: 1px solid var(--inchiostro);
  text-align: left;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: .12em;
  font-size: 1rem;
  vertical-align: bottom;
}
.parcella thead .col-importo { text-align: right; padding-right: 1.4rem; }
.parcella thead .col-comma { padding-left: 1.4rem; }
.parcella tbody th,
.parcella tbody td {
  padding: .7rem 0 .75rem;
  vertical-align: baseline;
  border-bottom: 1px solid var(--filetto);
}
.parcella tbody th { font-weight: 400; text-align: left; width: 46%; }
.voce {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.voce::after {
  content: "";
  flex: 1 0 1.25rem;
  border-bottom: 1px dotted var(--filetto-scuro);
}
.parcella .importo {
  width: 8.5rem;
  padding-right: 1.4rem;
  padding-left: .5rem;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.parcella .comma {
  padding-left: 1.4rem;
  border-left: 1px solid var(--filetto);
  color: var(--smorzato);
  font-size: .9375rem;
}
.c-num {
  margin-right: .3rem;
  color: var(--rosso);
  font-style: italic;
  font-weight: 500;
  white-space: nowrap;
}
.parcella tr:has(+ .parziale) > * { border-bottom-color: var(--inchiostro); }
.parcella .parziale th { font-weight: 500; }
.parcella .parziale .voce::after { border: 0; }
.parcella .saldo th,
.parcella .saldo td {
  padding-top: .85rem;
  border-top: 3px double var(--inchiostro);
  border-bottom: 0;
  font-size: 1.1875rem;
  font-weight: 600;
}
.parcella .saldo .voce::after { border: 0; }
.parcella .meno .importo { color: var(--rosso); }
.cifre-nota {
  margin-top: 1.1rem;
  max-width: var(--misura);
  color: var(--smorzato);
  font-style: italic;
  font-size: .9375rem;
}

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .linguetta {
    animation: esce .9s var(--ease) backwards;
  }
  .linguette li:nth-child(2) .linguetta { animation-delay: .06s; }
  .linguette li:nth-child(3) .linguetta { animation-delay: .12s; }
  .linguette li:nth-child(4) .linguetta { animation-delay: .18s; }
  .linguette li:nth-child(5) .linguetta { animation-delay: .24s; }
  @keyframes esce {
    from { translate: -1.1rem 0; }
  }
  .pagina-testa .art-num::after { animation: accende .9s var(--ease) .35s backwards; }
  .home:not(:has(.articolo:target, .articolo :target)) #materie .art-num::after,
  .home:not(:has(.articolo:target, .articolo :target)) #nota-1::before { animation: accende .9s var(--ease) .35s backwards; }
  @keyframes accende {
    from { transform: scaleX(0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------- responsive */

@media (max-height: 820px) and (min-width: 760px) {
  .lg-art { display: none; }
  .linguetta { min-height: 7rem; padding-top: .75rem; }
  .linguette ol { padding-top: clamp(3rem, 7vh, 4rem); }
}

@media (max-width: 1180px) {
  .parcella-sezione { grid-column: testo; }
  .parcella thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .parcella, .parcella tbody, .parcella caption { display: block; }
  .parcella tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
    padding: .7rem 0 .75rem;
    border-bottom: 1px solid var(--filetto);
  }
  .parcella tbody tr > * { display: block; width: auto; padding: 0; border: 0; }
  .parcella tbody .importo { grid-column: 2; width: auto; padding: 0; }
  .parcella tbody .comma { grid-column: 1 / -1; margin-top: .2rem; padding: 0; border: 0; }
  .parcella tbody .comma:empty { display: none; }
  .parcella .voce::after { content: none; }
  .parcella tbody tr:has(+ .parziale) { border-bottom-color: var(--inchiostro); }
  .parcella tbody tr:has(+ .saldo) { border-bottom: 0; }
  .parcella tbody .saldo { padding-top: .85rem; border-top: 3px double var(--inchiostro); border-bottom: 0; }
  .parcella tbody .saldo > * { padding: 0; border: 0; }
}

@media (max-width: 1099px) {
  .testo, .colophon, .testatina {
    grid-template-columns:
      [margine-start] minmax(6.25rem, .5fr)
      [margine-end testo-start] minmax(0, var(--misura))
      [testo-end respiro-start] minmax(0, .3fr)
      [respiro-end];
  }
  .art-num { font-size: clamp(3rem, 1.5rem + 3.2vw, 4rem); }
  /* Le note scendono a piè di colonna. */
  .nota {
    grid-column: testo;
    grid-row: auto;
    justify-self: stretch;
    max-width: none;
    margin: 1.4rem -.7rem 0;
    text-align: left;
    hyphens: manual;
  }
  .nota::before { transform-origin: left; }
  .nota p::before {
    content: "";
    display: block;
    width: 4.5rem;
    margin-bottom: .55rem;
    border-top: 1px solid var(--filetto-scuro);
  }
  .rinvio + .nota { margin-top: 1rem; }
  .prospetto dl { max-width: 19rem; }
  .citazione-fonte, .rinvio-margine { white-space: normal; text-align: right; }
}

@media (max-width: 759px), (max-height: 560px) {
  :root { --bordo: 0rem; --gutter: 1.25rem; }
  .avvertenza { padding-inline: var(--gutter); font-size: .8125rem; }

  .linguette {
    position: sticky;
    top: 0;
    bottom: auto;
    width: auto;
    height: 3.4rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--rosso) var(--lavagna);
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
  }
  .linguette::-webkit-scrollbar { height: 5px; }
  .linguette::-webkit-scrollbar-thumb { background: var(--rosso); }
  .linguette::-webkit-scrollbar-track { background: var(--lavagna); }
  .linguette::after { content: none; }
  .linguette ol {
    flex-direction: row;
    align-items: flex-end;
    gap: .25rem;
    width: max-content;
    height: 100%;
    padding: 0 var(--gutter);
  }
  /* Il taglio del libro: dice che la fila continua, e lascia libera l'ultima linguetta.
     La coda di 2,6rem e' il velo stesso: a fine scorrimento sta sul vuoto, non sull'ultima voce. */
  .linguette ol::after {
    content: "";
    position: sticky;
    right: 0;
    z-index: 1;
    flex: 0 0 2.6rem;
    align-self: stretch;
    background: linear-gradient(to right, rgb(28 23 20 / 0), var(--lavagna) 82%);
    pointer-events: none;
  }
  .linguetta {
    --uscita: .75rem;
    flex-direction: row;
    align-items: baseline;
    gap: .4rem;
    width: auto;
    min-height: 0;
    height: 2.55rem;
    padding: .5rem .7rem 0 .65rem;
    border-radius: 3px 3px 0 0;
    transform: translateY(var(--uscita));
    scroll-snap-align: start;
  }
  .lg-art { width: auto; font-size: .95rem; }
  .lg-voce { writing-mode: horizontal-tb; width: auto; line-height: 1.2; font-size: .9375rem; }
  .linguetta:focus-visible { outline-offset: -4px; border-radius: 3px 3px 0 0; }
  @media (hover: hover) {
    .linguetta:hover { --uscita: .4rem; }
  }
  .linguetta:focus-visible { --uscita: .4rem; }
  .linguetta[aria-current] { --uscita: 0rem; }
  @keyframes esce {
    from { translate: 0 .5rem; }
  }

  .foglio { margin-right: 0; border-right: 0; }

  .testo, .colophon, .testatina {
    grid-template-columns: [margine-start testo-start] minmax(0, 1fr) [margine-end testo-end respiro-start respiro-end];
    column-gap: 0;
  }

  .frontespizio { padding-block: 2.25rem 2.5rem; }
  .fr-studio { padding-inline: .5rem; letter-spacing: .2em; text-indent: .2em; }

  .articolo, .capo, .materia-blocco, .citazione { scroll-margin-top: 4.25rem; }
  .nota { scroll-margin-top: 4.25rem; }
  .articolo { padding-top: 2.75rem; }
  .art-intestazione,
  .pagina-testa {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .8rem;
  }
  .pagina-testa { row-gap: .9rem; }
  .art-num { font-size: 3rem; }
  .rubrica { font-size: 1.7rem; }

  .commi { padding-left: 1.55rem; }
  .capo > .commi { padding-left: 1.55rem; }

  .recapiti dl { gap: .75rem; }
  .recapiti dl > div { display: block; }
  .recapiti dt { display: block; }
  .recapiti dt::after { content: none; }
  .recapiti dd { max-width: none; text-align: left; }

  .firma-linea { flex-wrap: wrap; }
  .firma-linea::before { flex-basis: 100%; order: 2; margin: .1rem 0 0; }
  .firma-linea .bottone { order: 1; flex-shrink: 1; }
  .bottone { font-size: 1.125rem; }

  .citazione { display: block; flex-basis: 100%; }
  .citazione-fonte { display: block; justify-self: stretch; margin-bottom: .5rem; text-align: left; }
  .capo-titolo { display: block; }
  .materia-blocco { display: block; padding-block: 1rem 1.1rem; }
  .materia-blocco::before { position: absolute; inset: .4rem -.6rem; margin: 0; }
  .rinvio-margine { display: block; justify-self: stretch; margin-bottom: .1rem; text-align: left; }
  .lettere { padding-left: 1.85rem; }
}

@media (max-width: 359px) {
  :root { --gutter: 1rem; }
  .fr-studio { padding-inline: 0; letter-spacing: .12em; text-indent: .12em; font-size: .9375rem; }
  .fr-titolo { font-size: 2.05rem; }
  .bottone { padding-inline: .9rem .8rem; font-size: 1rem; letter-spacing: .06em; }
  .testatina-riga span { display: none; }
}