/* CSLAW.IT — Studio Legale Parrini & Sorlini
   Tre colonne: sezioni a sinistra, testo al centro, articoli della sezione a destra. */
:root{
  --carta:#F4F1EA; --carta-scura:#EAE5D9; --inchiostro:#16150F; --corpo:#2A2820;
  --ottone:#96762F; --ottone-chiaro:#B99A56; --tenue:#6A6355; --riga:#D6CFBF;
  --display:'Source Serif 4',Georgia,'Times New Roman',serif;
  --testo:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--carta);color:var(--corpo);font:16.5px/1.72 var(--testo);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--ottone);color:var(--carta)}

.telaio{display:grid;grid-template-columns:240px minmax(0,1fr) 300px;gap:56px;
  max-width:1440px;margin:0 auto;padding:0 40px;align-items:start}

/* ── SINISTRA: le sei sezioni ── */
.sinistra{position:sticky;top:0;height:100vh;overflow-y:auto;padding:40px 0 32px;
  display:flex;flex-direction:column;border-right:1px solid var(--riga);padding-right:28px}
.marchio{font:500 1.2rem/1.2 var(--display);color:var(--inchiostro);text-decoration:none;letter-spacing:.01em}
.marchio b{display:block;font:600 .58rem/1 var(--testo);letter-spacing:.32em;text-transform:uppercase;
  color:var(--ottone);margin-top:7px}
.sezioni{list-style:none;margin-top:44px;counter-reset:s}
.sezioni li{counter-increment:s;border-top:1px solid var(--riga)}
.sezioni li:last-child{border-bottom:1px solid var(--riga)}
.sezioni a{display:grid;grid-template-columns:26px 1fr;padding:13px 0;text-decoration:none;
  font:500 .78rem/1.35 var(--testo);letter-spacing:.09em;text-transform:uppercase;color:var(--corpo);transition:color .2s}
.sezioni a::before{content:counter(s,decimal-leading-zero);font:400 .82rem var(--display);color:var(--ottone-chiaro);
  letter-spacing:0;text-transform:none}
.sezioni a:hover{color:var(--ottone)}
.sezioni a.attiva{color:var(--inchiostro);font-weight:600}
.sezioni a.attiva::before{color:var(--ottone)}
.recapiti{margin-top:auto;padding-top:36px;display:grid;gap:6px;font-size:.8rem;color:var(--tenue)}
.recapiti a{text-decoration:none;color:var(--inchiostro);font-weight:500}
.recapiti a:hover{color:var(--ottone)}
.recapiti span{margin-top:6px;line-height:1.55}

/* ── CENTRO: il testo ── */
.centro{padding:44px 0 90px;min-width:0}
.briciole{font:500 .72rem var(--testo);letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);margin-bottom:22px}
.briciole a{text-decoration:none;color:var(--ottone)}
.briciole span{margin:0 6px;color:var(--riga)}
.centro>h1{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.2vw,2.9rem);line-height:1.12;color:var(--inchiostro);
  letter-spacing:-.015em;padding-bottom:26px;border-bottom:1px solid var(--riga);margin-bottom:30px}
.incisione{mix-blend-mode:multiply;max-width:560px;margin:0 auto 34px}

.testo{max-width:72ch}
.testo::after{content:'';display:block;clear:both}
.testo .modulo{margin-bottom:1.1em}
.testo p{margin-bottom:1em}
.testo h2,.testo h3,.testo h4{font-family:var(--display);font-weight:400;color:var(--inchiostro);
  line-height:1.2;margin:1.6em 0 .6em}
.testo h2{font-size:1.6rem}.testo h3{font-size:1.3rem}.testo h4{font-size:1.1rem}
.testo strong,.testo b{color:var(--inchiostro);font-weight:600}
.testo a{color:var(--ottone);text-decoration-color:var(--ottone-chiaro);text-underline-offset:3px}
.testo a:hover{color:var(--inchiostro)}
.testo ul,.testo ol{margin:0 0 1em 1.4em}
.testo li{margin-bottom:.35em}
.testo blockquote{border-left:2px solid var(--ottone);padding:.2em 0 .2em 1.2em;margin:1.2em 0;
  font-family:var(--display);font-size:1.12rem;color:var(--inchiostro)}
.testo hr{border:0;border-top:1px solid var(--riga);margin:1.8em 0;clear:left}
.testo img{margin:1em auto;border:1px solid var(--riga)}
.testo table{border-collapse:collapse;width:100%;margin:1em 0;font-size:.92rem;display:block;overflow-x:auto}
.testo td,.testo th{border:1px solid var(--riga);padding:6px 10px;vertical-align:top}
.galleria{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin:1.2em 0}
.galleria figure{margin:0}
.galleria img{width:100%;aspect-ratio:1;object-fit:cover;margin:0;border:1px solid var(--riga)}
.galleria figcaption{font-size:.74rem;color:var(--tenue);margin-top:5px;line-height:1.4}

.vicini{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:60px;padding-top:24px;border-top:1px solid var(--riga)}
.vicini a{text-decoration:none;font:400 1rem/1.35 var(--display);color:var(--inchiostro)}
.vicini a:hover{color:var(--ottone)}
.vicini small{display:block;font:600 .66rem var(--testo);letter-spacing:.16em;text-transform:uppercase;color:var(--ottone);margin-bottom:6px}
.vicini .succ{text-align:right}

/* ── DESTRA: gli articoli della sezione ── */
.destra{position:sticky;top:0;max-height:100vh;overflow-y:auto;padding:44px 0 32px;
  border-left:1px solid var(--riga);padding-left:28px}
.elenco-titolo{font:600 .68rem var(--testo);letter-spacing:.2em;text-transform:uppercase;color:var(--ottone);
  margin-bottom:12px;display:flex;justify-content:space-between}
.elenco-titolo span{color:var(--tenue)}
.elenco{list-style:none}
.elenco li{border-top:1px solid var(--riga)}
.elenco li[data-livello="3"] a{padding-left:16px;font-size:.8rem}
.elenco a{display:block;padding:11px 0;text-decoration:none;font-size:.86rem;line-height:1.42;color:var(--corpo);transition:color .2s}
.elenco a:hover{color:var(--ottone)}
.elenco a.attiva{color:var(--inchiostro);font-weight:600;box-shadow:inset 2px 0 0 var(--ottone);padding-left:10px}
.tutti{display:inline-block;margin:12px 0 34px;font:600 .72rem var(--testo);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ottone);text-decoration:none}

/* ── PIEDE ── */
.piede{background:var(--inchiostro);color:rgba(244,241,234,.66);display:grid;
  grid-template-columns:repeat(4,1fr);gap:32px;padding:44px 40px;font-size:.82rem;line-height:1.7}
.piede strong{color:var(--carta);font-weight:500}
.piede a{color:var(--ottone-chiaro);text-decoration:none}

.testata-mobile{display:none}

/* ── schermi medi: articoli sotto il testo ── */
@media (max-width:1180px){
  .telaio{grid-template-columns:220px minmax(0,1fr);gap:44px}
  .destra{grid-column:2;position:static;max-height:none;border-left:0;padding:0 0 60px;border-top:1px solid var(--riga);padding-top:30px}
  .piede{grid-template-columns:1fr 1fr}
}
/* ── telefono: sezioni a scomparsa ── */
@media (max-width:760px){
  .telaio{grid-template-columns:1fr;gap:0;padding:0 20px}
  .testata-mobile{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;
    border-bottom:1px solid var(--riga);position:sticky;top:0;background:var(--carta);z-index:10}
  .hamb{background:0;border:0;padding:8px;cursor:pointer}
  .hamb i{display:block;width:22px;height:1.5px;background:var(--inchiostro);margin:5px 0}
  .sinistra{display:none;position:static;height:auto;border-right:0;padding:0 0 20px}
  .sinistra.aperta{display:block}
  .sinistra>.marchio,.recapiti{display:none}
  .sezioni{margin-top:10px}
  .centro{padding-top:26px}
  .destra{grid-column:1}
  .vicini{grid-template-columns:1fr}.vicini .succ{text-align:left}
  .piede{grid-template-columns:1fr;padding:34px 20px}
}

/* Testo giustificato: margini allineati su entrambi i lati, con sillabazione
   automatica per evitare i buchi fra le parole nelle righe corte. */
.testo.giustificato p,.testo.giustificato li,.testo.giustificato blockquote{
  text-align:justify;hyphens:auto;-webkit-hyphens:auto}

/* ── LAW IN ACTION: le sentenze al centro, con sunto di tre righe ── */
.senza-destra .telaio{grid-template-columns:240px minmax(0,1fr)}
.senza-destra .telaio>div:empty{display:none}
.senza-destra .testo{max-width:980px}
.schede{list-style:none;margin:40px 0 48px;padding:0;border-top:1px solid var(--inchiostro)}
.testo .scheda{margin:0}
.testo .scheda a{display:grid;grid-template-columns:58px minmax(0,1fr);gap:20px;padding:24px 14px 24px 0;
  border-bottom:1px solid var(--riga);text-decoration:none;color:inherit;transition:background .25s}
.testo .scheda a:hover{background:var(--carta-scura)}
.scheda .num{font:400 1.6rem/1 var(--display);color:var(--ottone);padding-top:2px}
.testo .scheda h2{font-family:var(--display);font-weight:400;font-size:1.22rem;line-height:1.3;
  color:var(--inchiostro);margin:0 0 9px}
.sunto{font-size:.95rem;line-height:1.62;color:var(--corpo);margin:0 0 11px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.leggi{font:600 .68rem/1 var(--testo);letter-spacing:.14em;text-transform:uppercase;color:var(--ottone)}
.scheda a:hover .leggi{color:var(--inchiostro)}
@media (max-width:1180px){.senza-destra .telaio{grid-template-columns:220px minmax(0,1fr)}}
@media (max-width:760px){
  .senza-destra .telaio{grid-template-columns:1fr}
  .testo .scheda a{grid-template-columns:40px minmax(0,1fr);gap:12px}
  .scheda .num{font-size:1.2rem}
}
.testo ol.schede{margin-left:0}
.testo .scheda[data-livello="3"] a{padding-left:34px}
.senza-destra .testo>.modulo img{max-height:320px;width:auto}

/* ── COLONNA DESTRA: il riquadro recapiti del sito originale ── */
.destra{font-size:.84rem;line-height:1.55;color:var(--corpo)}
.rq{padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid var(--riga);text-align:center}
.rq p{margin:0}
.rq-libra{margin:0 auto 14px;mix-blend-mode:multiply;max-width:100%}
.rq-tel{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--inchiostro);
  font:500 1.02rem var(--testo);letter-spacing:.02em}
.rq-tel:hover{color:var(--ottone)}
.rq-tel svg{color:var(--ottone)}
.rq-wa img{width:32px;height:32px;border-radius:7px}
.rq-bluepass{background:#E8EEF5;border:1px solid #C9D6E6;border-bottom:1px solid #C9D6E6;padding:18px 16px 16px}
.bp-titolo{font:600 .95rem var(--testo);letter-spacing:.18em;color:#1F4E8C;margin-bottom:9px !important}
.bp-testo{font-size:.76rem;line-height:1.5;color:#2B3A4E;text-transform:uppercase;letter-spacing:.03em;margin-bottom:12px !important}
.rq-bluepass img{margin:0 auto;width:120px;height:120px;background:#fff;padding:6px;border:1px solid #C9D6E6}
.rq-studio{font:400 .9rem/1.35 var(--display);color:var(--tenue)}
.rq-studio strong{display:block;font:500 1.15rem/1.3 var(--display);color:var(--inchiostro);letter-spacing:.01em}
.rq-app{font:600 .64rem var(--testo);letter-spacing:.18em;text-transform:uppercase;color:var(--ottone);margin:12px 0 5px !important}
.rq-sedi{list-style:none;margin:0 0 20px;padding:0}
.rq-sedi li{padding:0 0 14px 14px;margin-bottom:14px;border-left:2px solid var(--ottone-chiaro);border-bottom:0}
.rq-sedi strong{display:block;font:500 .92rem/1.3 var(--display);color:var(--inchiostro);margin-bottom:3px}
.rq-sedi small{display:block;font-size:.74rem;color:var(--tenue);margin:5px 0 3px;line-height:1.45}
.rq-sedi a,.rq-email a{color:var(--ottone);text-decoration:none;font-weight:500}
.rq-sedi a:hover,.rq-email a:hover{color:var(--inchiostro)}
.rq-email{font:600 .64rem/2 var(--testo);letter-spacing:.14em;text-transform:uppercase;color:var(--tenue)}
.rq-email a{font:500 .86rem/1.7 var(--testo);letter-spacing:0;text-transform:none}
.sunto{font-size:.9rem;line-height:1.55}

/* Titoli: Source Serif 4 al posto del Bodoni, le cui aste sottili si leggevano male */
.centro>h1{font-weight:600;letter-spacing:-.01em}
.testo h2,.testo h3,.testo h4,.testo .scheda h2{font-weight:600;letter-spacing:0}
.marchio,.rq-studio strong,.rq-sedi strong{font-weight:600}
.centro>h1.titolo-home{text-align:center;line-height:1.15}

/* Immagini fuse con la carta: il bianco di fondo prende il colore della pagina,
   così non sembrano ritagli incollati. Niente cornice. */
.testo img,.galleria img,.rq-libra,.incisione img{mix-blend-mode:multiply;border:0;background:transparent}
.rq-bluepass img{mix-blend-mode:normal}   /* il QR resta su bianco: il telefono lo legge meglio */
/* la fusione avviene col colore del riquadro che contiene l'immagine: va dichiarato */
.telaio,.centro,.destra,.sinistra,.testo,.testo .modulo,.galleria,.galleria figure,.rq{background-color:var(--carta)}
.rq-bluepass{background:#E8EEF5}

/* Testo giustificato in tutte le sezioni, sentenze comprese.
   La sillabazione automatica evita i vuoti larghi fra le parole. */
.testo p,.testo li,.testo blockquote,.testo td,.sunto{
  text-align:justify;hyphens:auto;-webkit-hyphens:auto;text-justify:inter-word}
.testo h2,.testo h3,.testo h4,.testo figcaption,.titolo-home{text-align:inherit}

/* ── SEZIONI FLOTTANTI (come «CasEstate B&A» su casestate.net) ──
   Pannello scuro, bordo d'ottone, angoli arrotondati e ombra: sospeso
   sulla pagina e fermo durante lo scorrimento. Solo su schermi larghi. */
@media (min-width:761px){
  .telaio>.centro{grid-column:2}
  .telaio>.destra{grid-column:3}
  .sinistra{
    position:fixed;z-index:50;
    top:24px;left:max(24px,calc((100vw - 1440px)/2 + 24px));
    width:232px;height:auto;max-height:calc(100vh - 48px);overflow-y:auto;
    padding:26px 22px 22px;border:1px solid rgba(185,154,86,.6);border-radius:10px;
    background:var(--inchiostro) !important;
    box-shadow:0 8px 28px rgba(22,21,15,.32);
  }
  .sinistra .marchio{color:var(--carta)}
  .sinistra .marchio b{color:var(--ottone-chiaro)}
  .sinistra .sezioni{margin-top:26px}
  .sinistra .sezioni li{border-color:rgba(244,241,234,.14)}
  .sinistra .sezioni a{color:rgba(244,241,234,.86);padding:11px 0}
  .sinistra .sezioni a::before{color:var(--ottone-chiaro)}
  .sinistra .sezioni a:hover{color:var(--ottone-chiaro)}
  .sinistra .sezioni a.attiva{color:#F5C800;font-weight:600}
  .sinistra .recapiti{margin-top:22px;padding-top:18px;border-top:1px solid rgba(244,241,234,.14);color:rgba(244,241,234,.6)}
  .sinistra .recapiti a{color:var(--carta)}
  .sinistra .recapiti a:hover{color:var(--ottone-chiaro)}
}
@media (min-width:761px) and (max-width:1180px){
  .telaio>.destra{grid-column:2}
  .sinistra{width:200px}
}
@media (min-width:761px){.sinistra .sezioni li:last-child{border-bottom:0}.sinistra .recapiti{margin-top:8px}}

/* Titoli interni al testo centrati (es. «Avvocato Civilista Penalista…» in Home).
   Le schede numerate di Law/Work in Action restano allineate al loro numero. */
.testo h2,.testo h3,.testo h4{text-align:center;text-wrap:balance}
.testo .scheda h2{text-align:left;text-wrap:auto}

/* ── SOTTOSEZIONI nel pannello di sinistra ── */
.sezioni .riga{display:flex;align-items:center;gap:6px}
.sezioni .riga>a{flex:1}
.sezioni .apri{flex:none;width:28px;height:28px;border:0;background:transparent;cursor:pointer;
  display:grid;place-items:center;border-radius:4px;color:inherit}
.sezioni .apri span{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);transition:transform .2s}
.sezioni .apri[aria-expanded="true"] span{transform:rotate(45deg)}
.sezioni .sotto{list-style:none;margin:0 0 10px 26px;padding:0;max-height:46vh;overflow-y:auto}
.sezioni .sotto[hidden]{display:none}
.sezioni .sotto li{counter-increment:none;border:0}
.sezioni .sotto li:last-child{border:0}
.sezioni .sotto a{display:block;padding:6px 0 6px 10px;font:400 .76rem/1.35 var(--testo);letter-spacing:0;
  text-transform:none;border-left:1px solid var(--riga)}
.sezioni .sotto a::before{content:none}
.sezioni .sotto li[data-livello="3"] a{padding-left:22px;font-size:.72rem}
.sezioni .sotto a.attiva{font-weight:600;border-left:2px solid var(--ottone)}
@media (min-width:761px){
  .sinistra .sezioni .apri{color:var(--ottone-chiaro)}
  .sinistra .sezioni .apri:hover{background:rgba(244,241,234,.08)}
  .sinistra .sezioni .sotto a{color:rgba(244,241,234,.72);padding:6px 0 6px 10px;border-left-color:rgba(244,241,234,.18)}
  .sinistra .sezioni .sotto a:hover{color:var(--ottone-chiaro)}
  .sinistra .sezioni .sotto a.attiva{color:#F5C800;border-left-color:#F5C800}
  .sinistra .sotto::-webkit-scrollbar{width:4px}
  .sinistra .sotto::-webkit-scrollbar-thumb{background:rgba(244,241,234,.2);border-radius:2px}
}

/* Colonna destra (recapiti) sempre a destra, non in fondo alla pagina,
   da 900 px in su: le colonne si stringono invece di impilarsi. */
@media (min-width:900px) and (max-width:1180px){
  .telaio{grid-template-columns:210px minmax(0,1fr) 220px;gap:32px;padding:0 24px}
  .telaio>.centro{grid-column:2}
  .telaio>.destra{grid-column:3;position:sticky;top:0;max-height:100vh;overflow-y:auto;
    border-top:0;border-left:1px solid var(--riga);padding:44px 0 32px 20px}
  .sinistra{width:200px;left:20px}
  .destra{font-size:.8rem}
  .rq-libra{max-width:150px}
}

/* ── ISOLA DEL TESORO ──
   Il pannello delle sezioni prende la sagoma di un'isola da mappa antica:
   costa frastagliata, insenatura a est, baia a sud-ovest, contorno del mare
   tratteggiato e l'isolotto dello Scheletro con la croce del tesoro.
   Il disegno sta in /img/isola.svg — un file a parte, non più un data URI,
   perché ora contiene anche il rilievo: crinali, boschi, torrenti e borghi.
   Due cose da sapere prima di metterci mano.
   PRIMA: l'SVG viene stirato (preserveAspectRatio="none", background-size
   100% 100%) da 256x916 alla misura del pannello, di regola 250x447. Lo
   schiacciamento verticale è circa 0,49, quindi nel sorgente ogni altezza
   è raddoppiata: un monte alto 12 è disegnato 24, altrimenti esce piatto.
   SECONDA: il terreno sta solo dove NON corre testo — calotta y 4-74,
   varco y 155-210, fasce costiere x 4-27 e x 213-236, punta sud y 777-896.
   Le tinte restano cupe per la stessa ragione: sopra corrono voci chiare. */
@media (min-width:761px){
  .sinistra{
    background:url("/img/isola.svg") center/100% 100% no-repeat !important;
    background-color:transparent !important;
    border:0 !important;border-radius:0 !important;box-shadow:none !important;
    filter:drop-shadow(0 8px 12px rgba(22,21,15,.30));
    padding:40px 34px 58px 34px !important;width:250px !important;
  }
  .sinistra .marchio{display:block;text-align:center;padding-left:0}
}
@media (min-width:900px) and (max-width:1180px){ .sinistra{width:222px !important;padding:36px 28px 54px !important} }

@media (min-width:761px){
  .sinistra .recapiti{display:none}          /* già nella colonna di destra */
  .sinistra .sezioni{margin-bottom:6px}
}

/* ── BUSSOLA sotto l'isola: rimanda a «Dove siamo» ── */
.bussola{display:none}
@media (min-width:761px){
  .sinistra{overflow:visible !important;max-height:none !important}
  .sezioni .sotto{max-height:38vh}
  .bussola{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;
    position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);filter:none}
  .bussola .rosa{width:78px;height:78px;transition:transform .6s ease;filter:drop-shadow(0 3px 5px rgba(22,21,15,.25))}
  .bussola:hover .rosa{transform:rotate(360deg)}
  .bussola span{font:600 .62rem var(--testo);letter-spacing:.2em;text-transform:uppercase;color:var(--ottone)}
  .bussola:hover span{color:var(--inchiostro)}
}

@media (min-width:761px){
  .bussola .rosa{width:92px;height:92px;mix-blend-mode:multiply;filter:drop-shadow(0 2px 3px rgba(22,21,15,.22))}
  .bussola span{color:var(--inchiostro);font-family:var(--display);font-style:italic;letter-spacing:.06em;text-transform:none;font-size:.8rem;font-weight:500}
}
/* titolo della Home al doppio del corpo dei titoli di pagina */
.centro>h1.titolo-home{font-size:clamp(3.2rem,6.2vw,5.8rem);line-height:1.04;letter-spacing:-.02em;padding-bottom:34px}

/* ── TESTATA: il carrello d'immagini ──────────────────────────────────
   Le figure stanno sovrapposte in un'unica cella di griglia. Lo scambio
   d'immagine e il passaggio dal seppia al colore avvengono INSIEME: la
   nuova sale da trasparente a piena e nello stesso tempo si accende dal
   seppia al proprio colore, mentre l'uscente, sotto, si spegne al seppia.
   L'entrante sta SOPRA (z-index) e l'uscente resta a opacità piena fin
   quasi alla fine. È il modo in cui si incrociano due pellicole: se
   invece scendesse l'una mentre sale l'altra, a metà strada sarebbero
   entrambe al 50% e la carta trasparirebbe da sotto, schiarendo la
   fascia. Nell'istante centrale si vedono le due fotografie l'una
   nell'altra: è la dissolvenza, ed è voluta.
   Le due fasi di filtro dichiarano la STESSA sequenza di funzioni, con
   valori diversi: è la condizione perché il browser le interpoli in
   modo continuo invece di scattare. Per questo il capo "a colori" è
   scritto sepia(0) saturate(1)… e non filter:none. */
.carrello{
  --posa:5s;              /* quanto ogni immagine resta ferma a colori */
  --dissolvenza:10s;      /* l'intero passaggio, nei suoi quattro tempi:
                             3s per scolorire · 2s per svanire nella carta
                             2s per riemergere · 3s per ritrovare il colore
                             Sono i due soli numeri da toccare per cambiare
                             il respiro del carrello: il resto si adegua. */
  display:grid;grid-template-areas:"telo";
  aspect-ratio:800/178;margin:0 0 30px;background:var(--carta)}
/* i bordi sfumano nella carta: la fascia affiora dalla pagina
   invece di starci sopra come un ritaglio incollato */
.carrello{-webkit-mask-image:radial-gradient(118% 150% at 50% 50%,#000 58%,transparent 100%);
  mask-image:radial-gradient(118% 150% at 50% 50%,#000 58%,transparent 100%)}
.carrello figure{grid-area:telo;margin:0}
.carrello img{width:100%;height:100%;object-fit:cover;margin:0;border:0;opacity:0;
  filter:sepia(1) saturate(.22) brightness(1.1) contrast(.9)}
/* senza JavaScript resta ferma la prima immagine, a colori */
.carrello:not(.vivo) figure:first-child img{opacity:1;
  filter:sepia(0) saturate(1) brightness(1) contrast(1)}
/* la primissima immagine è già in campo al caricamento: l'animazione d'ingresso
   parte da opacità zero, e usarla anche all'avvio lascerebbe la fascia vuota
   per tutta la prima metà della dissolvenza */
.carrello figure.ferma img{opacity:1;animation:none;
  filter:sepia(0) saturate(1) brightness(1) contrast(1)}
.carrello figure.attiva{z-index:2}
.carrello figure.esce{z-index:1}
.carrello figure.attiva img{animation:carrello-entra var(--dissolvenza) linear forwards}
.carrello figure.esce   img{animation:carrello-esce  var(--dissolvenza) linear forwards}

@keyframes carrello-entra{
  0%  {opacity:0;filter:sepia(1) saturate(.22) brightness(1.1) contrast(.9)}
  100%{opacity:1;filter:sepia(0) saturate(1) brightness(1) contrast(1)}}
@keyframes carrello-esce{
  0%      {opacity:1;filter:sepia(0) saturate(1) brightness(1) contrast(1)}
  88%     {opacity:1;filter:sepia(1) saturate(.22) brightness(1.1) contrast(.9)}
  100%    {opacity:0;filter:sepia(1) saturate(.22) brightness(1.1) contrast(.9)}}

/* chi ha disattivato le animazioni vede la prima immagine, ferma e a colori */
@media (prefers-reduced-motion:reduce){
  .carrello figure img{animation:none !important;opacity:0}
  .carrello figure:first-child img{opacity:1;
    filter:sepia(0) saturate(1) brightness(1) contrast(1)}}

@media (max-width:760px){.carrello{margin-bottom:20px}}

/* ---- carta delle sedi e recapiti nella pagina "Dove siamo" -------- */
.testo .carta-sedi{margin:6px 0 30px;padding:0;background:transparent}
.testo .carta-sedi img{width:100%;height:auto;display:block;border:0;background:transparent;
  mix-blend-mode:multiply}
.testo .carta-sedi figcaption{margin-top:8px;text-align:center;font-size:.86rem;
  font-style:italic;color:#4A4636;letter-spacing:.2px}
.testo .recapito-sede{margin-top:14px;padding-top:12px;border-top:1px solid rgba(22,21,15,.16);
  text-align:left;line-height:1.75}
.testo .recapito-sede strong{letter-spacing:.2px}
.testo a.indicazioni{display:inline-block;margin-left:14px;padding:3px 12px 4px;
  border:1px solid var(--ottone);border-radius:2px;color:var(--ottone);
  text-decoration:none;font-size:.86rem;letter-spacing:.3px;white-space:nowrap}
.testo a.indicazioni:hover,.testo a.indicazioni:focus{background:var(--ottone);color:var(--carta)}
@media (max-width:560px){
  .testo a.indicazioni{display:block;margin:8px 0 0;text-align:center}
}
@media (min-width:661px){
  .testo .carta-sedi{float:left;width:54%;margin:6px 22px 10px 0}
}
@media (max-width:660px){
  .testo .carta-sedi{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    border-bottom:1px solid rgba(22,21,15,.10);padding-bottom:6px}
  .testo .carta-sedi img{min-width:640px}
  .testo .carta-sedi figcaption{position:sticky;left:0;width:100%}
  .testo .carta-sedi figcaption::after{display:block;margin-top:3px;font-size:.78rem;
    font-style:normal;letter-spacing:.4px;opacity:.68;content:"scorri la carta per vedere tutte le sedi"}
}

/* ── CARTINE delle sedi, in «Dove siamo» ──────────────────────────────
   Piante di quartiere disegnate sui dati OpenStreetMap (img/cartine/*.svg),
   una per sede, sotto la carta d'insieme. Il file è a colori; a riposo la
   pagina lo mostra in seppia, come una lastra incisa, e lo porta al colore
   quando la cartina entra nello schermo (js/cartine.js). Le due catene di
   filtri hanno le stesse funzioni nello stesso ordine: il passaggio è
   continuo, come nel carrello. Senza JavaScript la cartina resta a colori. */
.testo .cartina{margin:18px 0 6px;padding:0;background:transparent}
.testo .cartina img{width:100%;height:auto;display:block;margin:0;border:0;
  background:transparent;mix-blend-mode:normal;
  filter:sepia(0) saturate(1) brightness(1) contrast(1);
  transition:filter 3.5s ease-in-out}
.testo .cartina.a-riposo img{filter:sepia(.85) saturate(.4) brightness(1.02) contrast(.95)}
@media (prefers-reduced-motion:reduce){.testo .cartina img{transition:none}}
/* ── il segnaposto della cartina apre le indicazioni ──────────────────
   Il perno è disegnato dentro l'SVG, quindi non sarebbe cliccabile: sopra
   ci sta un bottone trasparente. Il perno è ancorato al centro esatto del
   disegno (360×216 su 720×432), perciò il bottone si centra sul «telo» che
   contiene l'immagine — non sulla figura, che sul telefono scorre di lato
   e lo lascerebbe indietro. Il bottone sale di tutta la propria altezza
   perché il perno si sviluppa VERSO L'ALTO dal punto d'ancoraggio. */
.testo .cartina .telo{position:relative;display:block;width:max-content;max-width:none}
.testo .cartina .segnaposto{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-100%);width:34px;height:36px;padding:0;
  background:none;border:0;cursor:pointer;border-radius:50% 50% 45% 45%}
.testo .cartina .segnaposto .perno{position:absolute;inset:0;border-radius:inherit;
  background:rgba(168,50,43,.001);transition:background .2s,box-shadow .2s}
.testo .cartina .segnaposto:hover .perno,
.testo .cartina .segnaposto:focus-visible .perno{background:rgba(168,50,43,.14);
  box-shadow:0 0 0 3px rgba(168,50,43,.28)}
.testo .cartina .segnaposto:focus-visible{outline:0}

/* il menu delle tre applicazioni, in cartiglio come il resto della cartina */
.testo .cartina .vie{position:absolute;left:calc(50% + 24px);top:calc(50% - 34px);
  z-index:5;margin:0;padding:8px 0;list-style:none;min-width:186px;
  background:var(--carta);border:1px solid var(--inchiostro);
  box-shadow:0 6px 18px rgba(22,21,15,.26);font-family:var(--testo)}
.testo .cartina .vie[hidden]{display:none}
.testo .cartina .vie .dove{padding:2px 14px 8px;margin:0 0 6px;font-size:.74rem;
  line-height:1.35;color:var(--tenue);border-bottom:1px solid var(--riga);text-align:left}
.testo .cartina .vie li{margin:0}
.testo .cartina .vie a{display:block;padding:8px 14px;font-size:.88rem;
  text-decoration:none;color:var(--inchiostro)}
.testo .cartina .vie a:hover,.testo .cartina .vie a:focus{background:var(--inchiostro);color:var(--carta)}
/* quando il menu sta a destra dello schermo si apre a sinistra del perno */
.testo .cartina .vie.a-sinistra{left:auto;right:calc(50% + 24px)}

/* sul telefono la pianta non si rimpicciolisce fino a rendere illeggibili
   i nomi delle vie: scorre di lato, e parte centrata sullo Studio */
@media (max-width:760px){
  .testo .cartina{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .testo .cartina img{min-width:600px}}

/* ── CHI SIAMO: la descrizione accanto alla foto ───────────────────────
   Nei blocchi che contengono una foto e il suo testo, la foto va a
   sinistra in colonna propria e la descrizione le sta di fianco, invece
   di stare sotto. La foto occupa tutte le righe del blocco (grid-row
   1/-1) perché alcuni blocchi hanno più paragrafi: senza, il secondo
   paragrafo scivolerebbe sotto la foto invece di restare in colonna.
   Vale solo per le pagine il cui articolo porta anche la classe
   «affianca», non per tutto il sito. */
.testo.affianca .modulo:has(> img){
  display:grid;grid-template-columns:250px minmax(0,1fr);gap:0 24px;align-items:start}
.testo.affianca .modulo:has(> img) > img{grid-column:1;grid-row:1/-1;width:100%;margin:.3em 0 0}
.testo.affianca .modulo:has(> img) > *:not(img){grid-column:2}
.testo.affianca .modulo:has(> img) > p:first-of-type{margin-top:0}
/* sotto i 760 px due colonne renderebbero illeggibili sia la foto sia il
   testo: si torna a foto sopra e descrizione sotto */
@media (max-width:760px){
  .testo.affianca .modulo:has(> img){display:block}
  .testo.affianca .modulo:has(> img) > img{width:auto;margin:1em auto}}

/* ── BRIGANTINO in filigrana ───────────────────────────────────────────
   Entra dal lato destro del foglio, attraversa in diagonale e va a
   ormeggiarsi nell'insenatura della costa est dell'isola, sotto il
   logotipo. La rotta la calcola js/nave.js in pixel e la esegue lui:
   qui restano solo l'aspetto e le misure.

   Perché non è uno pseudo-elemento con mix-blend-mode, che sarebbe stato
   più breve: Safari, messi insieme posizione fissa, fusione in
   moltiplicazione e variabili CSS dentro i fotogrammi, non disegnava
   nulla. Un elemento vero, mosso con valori in pixel, funziona ovunque.

   Le manopole: --navigazione (in js/nave.js) per la durata, opacity per
   quanto si vede, width/height per la stazza. */
#nave{
  position:fixed;left:0;top:0;width:158px;height:363px;
  background:url("/img/brigantino.svg") center/contain no-repeat;
  opacity:.30;pointer-events:none;z-index:60;
  transform:translate(-9999px,-9999px)}   /* fuori campo finché non salpa */
@media (max-width:760px){#nave{width:112px;height:258px;opacity:.24}}
@media print{#nave{display:none}}

/* ── la tavola di Work in Action ─────────────────────────────────────
   Figura sopra, descrizione sotto, come in Law in Action. Il file è un
   PNG con lo sfondo bianco tolto, così il disegno sta sulla pergamena
   senza il rettangolo bianco della scansione; per questo va anche
   togliato il bordo che .testo img mette a tutte le immagini.
   Misura 596 px come la tavola di Law in Action: la scansione originale
   è di 417, ed è stata ingrandita con interpolazione Lanczos e una
   leggera nitidizzazione — il sito non ne serve una più grande. */
.testo img.tavola{display:block;width:596px;max-width:100%;height:auto;
  margin:1.2em auto;border:0}

/* ── ROTOLO DELLE MATERIE ──────────────────────────────────────────────
   Un rotolo di pergamena sotto la rubrica dei settori. Chiuso porta la
   scritta «Materie»; cliccato si srotola e scopre le nove materie, che
   raccolgono insieme le sentenze di Law in Action e gli articoli di
   Work in Action.

   Com'è costruito: due RULLI d'ottone ai lati, più alti della carta così
   sporgono sopra e sotto — è quella sporgenza a farlo leggere come un
   rotolo aperto e non come un riquadro — e in mezzo la CARTA, con le
   ombre di arricciatura nel punto in cui esce dagli avvolgimenti.
   I rulli crescono insieme alla carta: da aperto sembra srotolato.

   L'altezza da aperto NON è scritta qui: la misura il JavaScript sul
   contenuto vero, perché i nomi delle materie vanno a capo su un numero
   di righe che dipende dal carattere e dalla larghezza, e un valore
   fisso taglierebbe l'ultima voce. */
.rotolo{position:relative;z-index:6;width:182px;height:44px;margin:22px 0 0;cursor:pointer;outline:none;
  transition:height .55s cubic-bezier(.4,1.05,.5,1),transform .55s cubic-bezier(.4,1.05,.5,1)}
.rotolo .carta{position:absolute;left:9px;right:9px;top:0;bottom:0;overflow:hidden;
  background:
    linear-gradient(90deg,rgba(22,21,15,.22),rgba(22,21,15,0) 9px),
    linear-gradient(270deg,rgba(22,21,15,.22),rgba(22,21,15,0) 9px),
    linear-gradient(180deg,#D7D0BE 0,#F6F3EC 16px,#F8F5EF 55%,#D9D2C1 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.rotolo .rullo{position:absolute;top:-5px;bottom:-5px;width:11px;border-radius:6px;
  background:linear-gradient(90deg,#6B5732 0,#B99A56 36%,#E6D29B 52%,#A78A4A 70%,#5B4928 100%);
  box-shadow:0 1px 4px rgba(22,21,15,.5)}
.rotolo .rullo.sx{left:0} .rotolo .rullo.dx{right:0}
.rotolo .rullo::before,.rotolo .rullo::after{content:"";position:absolute;left:-2px;right:-2px;
  height:4px;border-radius:2px;background:linear-gradient(90deg,#5B4928,#D9C285 50%,#5B4928)}
.rotolo .rullo::before{top:-1px} .rotolo .rullo::after{bottom:-1px}
.rotolo .tit{position:absolute;left:0;right:0;top:0;height:44px;display:flex;
  align-items:center;justify-content:center;gap:7px;
  font:600 9.6px/1 var(--testo);letter-spacing:.26em;text-transform:uppercase;color:var(--inchiostro)}
.rotolo .tit .fr{font-size:8px;color:var(--ottone);transition:transform .45s ease}
.rotolo.aperto .tit .fr{transform:rotate(180deg)}
.rotolo:hover .tit,.rotolo:focus .tit{color:var(--ottone)}
.rotolo .elenco{position:absolute;left:12px;right:12px;top:46px;opacity:0;
  transition:opacity .26s;pointer-events:none}
.rotolo.aperto .elenco{opacity:1;pointer-events:auto;transition-delay:.22s}
.rotolo .elenco .m{display:flex;align-items:flex-start;justify-content:space-between;gap:7px;
  padding:6px 0;border-top:1px solid rgba(22,21,15,.10);text-decoration:none;
  font:500 11.4px/1.3 var(--display);color:var(--corpo)}
.rotolo .elenco .m b{font:600 8.2px/1 var(--testo);color:var(--ottone);flex:0 0 auto;
  border:1px solid rgba(150,118,47,.4);border-radius:7px;padding:2px 5px;margin-top:2px}
.rotolo .elenco .m:hover span{color:var(--ottone);text-decoration:underline;text-underline-offset:2px}
@media (max-width:760px){.rotolo{margin:18px auto 4px}}
@media (prefers-reduced-motion:reduce){.rotolo,.rotolo .elenco,.rotolo .tit .fr{transition:none}}

/* ── CONTATORE DELLE VISITE ────────────────────────────────────────────
   Rulli d'ottone su fondo d'inchiostro, come il totalizzatore di un
   contachilometri. Le cifre usano le figure TABULARI del carattere:
   senza, ogni cifra ha larghezza propria e i rulli ballano a ogni
   cambio di numero.
   Il blocco nasce nascosto: lo scopre il JavaScript soltanto quando
   contatore.php ha restituito un numero. Se l'hosting non esegue PHP
   resta invisibile — meglio niente che un contatore fermo sullo zero. */
.contatore{grid-column:1/-1;display:flex;align-items:center;justify-content:center;
  gap:13px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(244,241,234,.14)}
.contatore .etichetta{font:600 .58rem var(--testo);letter-spacing:.22em;text-transform:uppercase;
  color:rgba(244,241,234,.5)}
.contatore .rulli{display:flex;gap:3px}
.contatore .rulli b{font:600 .92rem/1 var(--testo);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;color:var(--ottone-chiaro);background:#0D0C08;
  border:1px solid rgba(185,154,86,.34);border-radius:2px;padding:6px 6px 5px;
  min-width:19px;text-align:center;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6),inset 0 -1px 0 rgba(185,154,86,.14)}
@media (max-width:760px){.contatore{margin-top:16px;padding-top:14px;gap:10px}
  .contatore .rulli b{font-size:.84rem;min-width:17px;padding:5px 5px 4px}}