/* betwest-italia.com — Il manifesto: foglio da torchio, tre inchiostri e una lamina d'oro */

:root{
  --carta:#f2ece0;
  --carta-2:#e8e0d0;
  --carta-3:#dbd1bd;
  --ink:#191410;
  --ink-2:#241d17;
  --minio:#c1301b;
  --minio-cupo:#8e2113;

  /* nero pieno della tavola: il fondo su cui si batte la lamina */
  --tavola:#17120c;
  --osso:#f1e9d9;
  --osso-2:#d6ccb6;

  /* la scala della lamina, campionata sul marchio: ombra, corpo, luce, lampo */
  --foglia-ombra:#5c4b31;
  --foglia-fondo:#8b6a3e;
  --foglia-corpo:#b3844c;
  --foglia-luce:#c9a66f;
  --foglia-lampo:#dccba0;
  /* lamina da corpo grande: il taglio in ombra resta sopra 3:1 sul nero */
  --lamina:linear-gradient(180deg,
    var(--foglia-lampo) 0%,
    var(--foglia-luce) 17%,
    var(--foglia-corpo) 43%,
    var(--foglia-fondo) 60%,
    var(--foglia-luce) 80%,
    #7d6339 100%);
  /* lamina da corpo minuto: scala compressa, tutta sopra 4.5:1 sul nero */
  --lamina-fine:linear-gradient(180deg,
    #e3d3ad 0%,#cfae7a 20%,#b98d55 46%,#a37e49 60%,#cfae7a 82%,#a37e49 100%);

  --legno:"Superclarendon","Rockwell","Bookman Old Style","Noto Serif",Georgia,"Times New Roman",serif;
  --testo:"Superclarendon","Bookman Old Style","Noto Serif",Georgia,"Times New Roman",serif;

  --giustezza:min(92vw,900px);
  --reg:.9px;            /* scarto di registro della seconda passata */
  --cassa:548px;         /* spazio riservato sotto la testata */

  --grana:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23g)' opacity='.52'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font:400 clamp(16.5px,1.35vw,19px)/1.62 var(--testo);
  color:var(--ink);
  background-color:var(--carta);
  background-image:var(--grana);
  background-repeat:repeat;
  text-align:center;
  overflow-x:hidden;
}
body::before{
  /* disomogeneita' del foglio: leggera ombreggiatura ai bordi */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 60% at 50% 0%,rgba(255,255,255,.5),transparent 60%),
    linear-gradient(90deg,rgba(120,102,80,.16),transparent 12% 88%,rgba(120,102,80,.16));
}

img,svg{max-width:100%}
h1,h2,h3,p,dl,dd,dt,ul{margin:0}
ul{list-style:none;padding:0}
b{font-weight:700}

.misura{width:var(--giustezza);margin-inline:auto}

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

.oltrepassa{
  position:absolute;left:-9999px;top:0;z-index:9;
  background:var(--ink);color:var(--carta);
  padding:.7rem 1.1rem;font:700 15px/1 var(--testo);text-decoration:none;
}
.oltrepassa:focus{left:.6rem;top:.6rem}

:is(a,button,input,summary,[tabindex]):focus-visible{
  outline:3px solid var(--minio-cupo);outline-offset:3px;
}

/* ---------- lamina: l'oro battuto a caldo ----------
   Non e' un colore piatto: bisello chiaro dal lato della lampada,
   corpo brunito, taglio in ombra dal lato opposto, e l'impronta
   del ferro che affonda il fregio sotto il pelo della carta.        */

.lamina{
  fill:url(#foglia);
  stroke:#4a3a24;stroke-width:.7;stroke-opacity:.5;
  vector-effect:non-scaling-stroke;
}
.lamina-carta{filter:drop-shadow(0 -.6px 0 rgba(52,38,20,.55)) drop-shadow(0 1px 0 rgba(255,252,244,.9))}
.lamina-tavola{filter:drop-shadow(0 -.7px 0 rgba(0,0,0,.9)) drop-shadow(0 1.1px 0 rgba(255,238,205,.24))}

/* ---------- filetti: la marcatura orizzontale del foglio ---------- */

.filetto{
  border:0;position:relative;
  width:var(--giustezza);margin:0 auto;
}
.filetto-sottile{height:0;border-top:1px solid var(--ink);opacity:.5;margin-block:clamp(.55rem,1.5vw,.95rem)}
.filetto-doppio{height:7px;border-top:5px solid var(--ink);border-bottom:1px solid var(--ink)}
.filetto-largo{
  height:12px;border-top:7px solid var(--ink);border-bottom:2px solid var(--ink);
  margin-block:clamp(2.4rem,6.5vw,4.4rem);
  display:flex;align-items:center;justify-content:center;
}
.filetto-largo::after{
  /* seconda passata in minio, fuori registro di un capello */
  content:"";position:absolute;left:0;right:0;top:calc(100% + 3px);
  height:2px;background:var(--minio);
  transform:translate(calc(var(--reg) * 1.6),0);
}
/* il fregio del marchio interrompe il filetto: l'oro e' battuto dentro la carta */
.filetto-fregio{
  position:relative;z-index:1;
  width:min(56%,352px);height:auto;
  padding:0 clamp(.7rem,2.4vw,1.5rem);
  background-color:var(--carta);
  background-image:var(--grana);
  fill:url(#foglia);
  stroke:#4a3a24;stroke-width:.7;stroke-opacity:.5;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 -.6px 0 rgba(52,38,20,.55)) drop-shadow(0 1px 0 rgba(255,252,244,.9));
}

/* ---------- cimasa: la testata, oro battuto su tavola nera ---------- */

.cimasa{
  background-color:var(--tavola);
  padding:clamp(.85rem,2.2vw,1.35rem) 0 clamp(.75rem,2vw,1.2rem);
  border-bottom:2px solid var(--foglia-fondo);
  box-shadow:inset 0 -14px 22px -14px rgba(0,0,0,.85),0 1px 0 rgba(255,252,244,.7);
  position:relative;
}
.cimasa::after{
  /* grana della carta anche sotto l'inchiostro pieno */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grana);background-size:150px 150px;
  opacity:.08;
}
.cimasa-riga{display:flex;align-items:center;justify-content:space-between;gap:clamp(.5rem,2vw,1.6rem)}
.cimasa-voce{
  flex:1 1 0;
  font:700 clamp(9.5px,1.05vw,11.5px)/1.3 var(--testo);
  letter-spacing:.34em;text-transform:uppercase;color:var(--osso-2);
  text-align:left;white-space:nowrap;
}
.cimasa-eta{text-align:right;color:var(--osso)}
.cimasa-insegna{
  flex:0 0 auto;
  width:clamp(210px,29vw,380px);height:auto;display:block;
  filter:drop-shadow(0 -1px 0 rgba(0,0,0,.9)) drop-shadow(0 1.5px 0 rgba(255,238,205,.16));
}

/* ---------- proclama: la testata a caratteri di legno ---------- */

.proclama{padding:clamp(.9rem,2vw,1.4rem) 0 0}
.proclama-strillo{
  font:700 clamp(11px,1.35vw,14px)/1.4 var(--testo);
  letter-spacing:.22em;text-transform:uppercase;color:var(--minio-cupo);
  margin-bottom:.5rem;text-wrap:balance;
}
.proclama-titolo{margin:0;font-weight:400}
.proclama-legno{
  display:block;margin:clamp(.5rem,1.1vw,.9rem) auto clamp(.25rem,.6vw,.5rem);
  width:min(100%,calc((100vh - var(--cassa)) * 1.95));
  width:min(100%,calc((100svh - var(--cassa)) * 1.95));
  height:auto;
  /* rilievo: il foglio si solleva appena accanto all'inchiostro */
  filter:drop-shadow(0 1.2px 0 rgba(255,255,255,.6));
}
/* schiacciamento d'inchiostro: il bordo e' piu' denso del centro */
.legno-nero use{
  fill:#1c1611;stroke:#080605;stroke-width:1.3;
  vector-effect:non-scaling-stroke;stroke-opacity:.5;
}
.legno-minio{
  fill:var(--minio);stroke:var(--minio-cupo);stroke-width:1.3;
  vector-effect:non-scaling-stroke;stroke-opacity:.6;
}
.legno-fantasma{fill:var(--ink);stroke:none;opacity:.26}

.proclama-coda{
  display:block;
  font:700 clamp(15px,2.5vw,26px)/1.25 var(--legno);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.proclama-guida{
  max-width:56ch;margin:clamp(.5rem,1.3vw,.8rem) auto 0;
  font-size:clamp(15.5px,1.5vw,18.5px);color:var(--ink-2);
}

/* ---------- tagliando: il modulo, stampato come una cedola ---------- */

.tagliando{
  margin:clamp(.8rem,1.8vw,1.15rem) auto 0;
  max-width:min(100%,620px);
  padding:clamp(.9rem,2vw,1.2rem) 0 clamp(.8rem,1.8vw,1rem);
  border-top:4px solid var(--ink);
  border-bottom:1px solid var(--ink);
}
.tagliando-dicitura{
  display:block;
  font:700 clamp(10.5px,1.2vw,12.5px)/1.3 var(--testo);
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2);
  margin-bottom:.6rem;
}
.tagliando-riga{display:flex;gap:.55rem;align-items:stretch;justify-content:center;flex-wrap:wrap}
.tagliando-campo{
  flex:1 1 15rem;min-width:0;
  font:400 clamp(16px,1.5vw,18px)/1.2 var(--testo);
  color:var(--ink);
  background:var(--carta-3);
  border:0;border-bottom:2px solid var(--ink);
  padding:.78rem .8rem;
  box-shadow:inset 0 2px 3px rgba(25,20,16,.3),inset 0 -1px 0 rgba(255,255,255,.35);
  text-align:center;
}
.tagliando-campo::placeholder{color:#5f564a;opacity:1}
/* la leva: tavola nera, lettere in lamina, filo di minio fuori registro */
.tagliando-leva{
  position:relative;flex:0 0 auto;
  font:700 clamp(13px,1.35vw,15px)/1 var(--legno);
  letter-spacing:.2em;text-transform:uppercase;
  border:0;padding:.95rem 1.5rem;cursor:pointer;
  background-color:transparent;
  background-image:var(--lamina-fine),linear-gradient(180deg,#2a2119,#140f0a 62%,#0b0806);
  -webkit-background-clip:text,border-box;background-clip:text,border-box;
  color:transparent;-webkit-text-fill-color:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.55);
}
.tagliando-leva::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--minio);
  transform:translate(calc(var(--reg) * -1.7),calc(var(--reg) * -1.2));
}
.tagliando-leva:hover{
  background-image:var(--lamina-fine),linear-gradient(180deg,#a5290f,#7d1c10 62%,#661609);
}
.tagliando-fine{
  margin-top:.75rem;
  font-size:clamp(12.5px,1.15vw,14px);color:var(--ink-2);opacity:.9;
}
.tagliando-sbaglio{
  margin-top:.7rem;
  font:700 clamp(13px,1.2vw,14.5px)/1.4 var(--testo);
  color:var(--minio-cupo);
}
.tagliando-sbaglio:empty{display:none}
.tagliando-campo[aria-invalid="true"]{border-bottom-color:var(--minio-cupo);border-bottom-width:3px}

.tagliando-fatto{
  padding:clamp(1rem,2.4vw,1.5rem) 0;
}
.tagliando-fatto-capo{
  font:700 clamp(20px,3.4vw,34px)/1.1 var(--legno);
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--minio-cupo);
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.tagliando-fatto-testo{
  margin-top:.6rem;font-size:clamp(15px,1.4vw,17.5px);color:var(--ink-2);
}

/* ---------- piombo: la cifra di sezione, lamina su tavola ---------- */

.piombo{
  position:relative;display:block;width:max-content;
  margin:0 auto clamp(1rem,2.4vw,1.5rem);
  font:700 clamp(14px,1.7vw,19px)/1 var(--legno);
  letter-spacing:.3em;text-indent:.3em;
  padding:.62em .7em .55em;
  background-color:transparent;
  background-image:var(--lamina-fine),linear-gradient(180deg,#2a2119,#140f0a 62%,#0b0806);
  -webkit-background-clip:text,border-box;background-clip:text,border-box;
  color:transparent;-webkit-text-fill-color:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.6);
}
.piombo::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1.6px var(--minio);
  transform:translate(calc(var(--reg) * -1.8),calc(var(--reg) * -1.3));
}

/* ---------- titoli di sezione ---------- */

.tariffa-titolo,.dispaccio-titolo,.cassetta-titolo,.quesiti-titolo,.controfoglio-titolo{
  font:700 clamp(29px,5.6vw,58px)/1.02 var(--legno);
  letter-spacing:.005em;text-transform:uppercase;
  /* schiacciamento d'inchiostro + rilievo del foglio accanto */
  text-shadow:0 0 .7px currentColor,0 1.5px 0 rgba(255,255,255,.6);
  max-width:20ch;margin-inline:auto;
}
.tariffa-nota,.cassetta-nota,.controfoglio-testo{
  max-width:46ch;margin:clamp(.7rem,1.8vw,1rem) auto 0;
  font-size:clamp(15px,1.4vw,17.5px);color:var(--ink-2);
}

/* ---------- tariffa: le cifre dell'operatore, oro su tavola nera ---------- */

.tariffa{
  position:relative;
  background-color:var(--tavola);
  padding-block:clamp(2.2rem,5.5vw,3.6rem) clamp(1.6rem,4vw,2.6rem);
  box-shadow:inset 0 12px 20px -14px rgba(0,0,0,.9),inset 0 -12px 20px -14px rgba(0,0,0,.9);
}
.tariffa::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grana);background-size:150px 150px;opacity:.08;
}
.tariffa>.misura{position:relative}
.tariffa .piombo{
  /* sulla tavola la cifra si rovescia: blocco d'osso, lettera nera */
  background-image:linear-gradient(180deg,var(--osso),#e2d8c2);
  -webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:var(--tavola);color:var(--tavola);
  box-shadow:0 1px 0 rgba(0,0,0,.6);
}
.tariffa-titolo{
  color:var(--osso);
  text-shadow:0 0 .7px currentColor,0 -1px 0 rgba(0,0,0,.8);
}
.tariffa-nota{color:var(--osso-2)}

.tariffa-elenco{margin-top:clamp(1.6rem,4vw,2.6rem)}
.tariffa-voce{padding:clamp(1.1rem,2.8vw,1.9rem) 0;border-top:1px dotted rgba(193,48,27,.75)}
.tariffa-voce:last-child{border-bottom:1px dotted rgba(193,48,27,.75)}
.tariffa-cosa{
  font:700 clamp(11px,1.25vw,13.5px)/1.3 var(--testo);
  letter-spacing:.3em;text-transform:uppercase;color:var(--osso);
}
.tariffa-quanto{margin:.35rem 0 0}
.tariffa-quanto b{
  display:block;
  font:700 clamp(50px,12.5vw,118px)/.92 var(--legno);
  letter-spacing:-.015em;
  background-color:transparent;
  background-image:var(--lamina);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  /* il ferro ha affondato la lamina: taglio scuro sopra, riflesso sotto */
  filter:drop-shadow(0 -1.5px 0 rgba(0,0,0,.9)) drop-shadow(0 2px 0 rgba(255,238,205,.2));
}
.tariffa-quanto span{
  display:block;margin-top:.3rem;
  font:700 clamp(14px,2vw,22px)/1.2 var(--legno);
  letter-spacing:.18em;text-transform:uppercase;color:var(--osso-2);
}

/* ---------- plancia: la lastra stampata ---------- */

.plancia{margin:clamp(2.2rem,6vw,4rem) 0}
.plancia-lastra{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--carta-2);
  /* impronta: la lastra e' premuta dentro il foglio */
  box-shadow:
    inset 0 0 0 1px rgba(25,20,16,.9),
    inset 0 3px 5px rgba(8,6,5,.55),
    inset 0 -2px 4px rgba(8,6,5,.4),
    inset 0 0 34px rgba(25,20,16,.2),
    0 2px 0 rgba(255,255,255,.75),
    0 3px 2px -2px rgba(25,20,16,.18);
}
.plancia-lastra-larga{aspect-ratio:2/1}
.plancia-lastra-alta{aspect-ratio:3/2}
.plancia-lastra img{
  display:block;width:100%;height:100%;object-fit:cover;
  /* mezzatinta a un solo inchiostro: la sorgente e' di mezzo tono,
     quindi basta un contrasto secco e una punta di caldo */
  filter:grayscale(1) brightness(1.1) contrast(1.16) sepia(.3);
  mix-blend-mode:multiply;
}
.plancia-lastra::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:
    radial-gradient(circle at 50% 50%,rgba(25,20,16,.55) 0 .75px,transparent 1.1px),
    var(--grana);
  background-size:3px 3px,150px 150px;
  mix-blend-mode:multiply;opacity:.5;
}
.plancia-didascalia{
  max-width:52ch;margin:clamp(.7rem,1.8vw,1.05rem) auto 0;
  font:400 clamp(13.5px,1.25vw,15.5px)/1.55 var(--testo);
  font-style:italic;color:var(--ink-2);
}

/* ---------- dispaccio: gli avvisi, ognuno aperto da una manina ---------- */

.dispaccio-brano{padding:clamp(.9rem,2.2vw,1.4rem) 0}
.dispaccio-capo{
  font:700 clamp(19px,2.9vw,30px)/1.15 var(--legno);
  letter-spacing:.06em;text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.manina{
  display:inline-block;vertical-align:-.1em;
  width:1.5em;height:auto;margin-right:.45em;
  fill:var(--minio);
  filter:drop-shadow(calc(var(--reg) * -1.4) calc(var(--reg) * -1) 0 rgba(25,20,16,.42));
}
.dispaccio-testo{
  max-width:50ch;margin:clamp(.6rem,1.6vw,.9rem) auto 0;
}

/* ---------- cassetta: il perimetro ---------- */

.cassetta-elenco{
  margin-top:clamp(1.4rem,3.4vw,2.2rem);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.15rem clamp(.7rem,1.8vw,1.3rem);
}
.cassetta-voce{
  flex:0 0 auto;display:inline-flex;align-items:center;
  gap:clamp(.7rem,1.8vw,1.3rem);
  font:700 clamp(17px,3.2vw,34px)/1.35 var(--legno);
  letter-spacing:.04em;text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.cassetta-voce:not(:last-child)::after{
  /* il rombo del marchio, ridotto a punto di separazione */
  content:"";display:block;width:.34em;height:.34em;
  background-image:var(--lamina);transform:rotate(45deg);
  box-shadow:0 -.5px 0 rgba(52,38,20,.5),0 .5px 0 rgba(255,252,244,.85);
}

/* fregio del marchio a chiusura di sezione */
.fregio{
  display:block;width:min(64%,300px);height:auto;
  margin:clamp(1.5rem,3.6vw,2.4rem) auto 0;
  fill:url(#foglia);
  stroke:#4a3a24;stroke-width:.7;stroke-opacity:.5;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 -.6px 0 rgba(52,38,20,.55)) drop-shadow(0 1px 0 rgba(255,252,244,.9));
}
.fregio-chiaro{filter:drop-shadow(0 -.7px 0 rgba(0,0,0,.9)) drop-shadow(0 1.1px 0 rgba(255,238,205,.24))}
.astrino{
  display:inline-block;vertical-align:.02em;
  width:.78em;height:auto;margin:0 .85em;
  fill:url(#foglia);
  filter:drop-shadow(0 -.5px 0 rgba(52,38,20,.5)) drop-shadow(0 .8px 0 rgba(255,252,244,.85));
}

/* ---------- quesiti ---------- */

.quesiti-elenco{margin-top:clamp(1.4rem,3.4vw,2.2rem)}
.quesiti-voce{padding:clamp(1rem,2.4vw,1.5rem) 0;border-top:1px dotted rgba(25,20,16,.5)}
.quesiti-voce:last-child{border-bottom:1px dotted rgba(25,20,16,.5)}
.quesiti-domanda{
  font:700 clamp(17px,2.3vw,24px)/1.25 var(--legno);
  letter-spacing:.03em;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.quesiti-replica{max-width:52ch;margin:.5rem auto 0;color:var(--ink-2)}

/* ---------- controfoglio: la cedola in coda, battuta sulla tavola ---------- */

.controfoglio{
  position:relative;
  background-color:var(--tavola);
  padding-block:clamp(2.2rem,5.5vw,3.6rem) clamp(2.4rem,6vw,4rem);
  box-shadow:inset 0 12px 20px -14px rgba(0,0,0,.9),inset 0 -12px 20px -14px rgba(0,0,0,.9);
}
.controfoglio::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grana);background-size:150px 150px;opacity:.08;
}
.controfoglio>.misura{position:relative}
.controfoglio-titolo{
  background-color:transparent;
  background-image:var(--lamina);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 -1.4px 0 rgba(0,0,0,.9)) drop-shadow(0 1.8px 0 rgba(255,238,205,.2));
}
.controfoglio-testo{color:var(--osso-2)}
.tagliando-basso{border-top-width:5px}
.controfoglio .tagliando{border-color:var(--osso)}
.controfoglio .tagliando-dicitura{color:var(--osso)}
.controfoglio .tagliando-fine{color:var(--osso-2);opacity:1}
.controfoglio .tagliando-sbaglio{color:#e8705a}
.controfoglio .tagliando-fatto-capo{
  color:var(--osso);text-shadow:0 -1px 0 rgba(0,0,0,.8);
}
.controfoglio .tagliando-fatto-testo{color:var(--osso-2)}
/* sulla tavola la leva si rovescia: blocco d'osso, lettere nere */
.controfoglio .tagliando-leva{
  background-image:linear-gradient(180deg,#241c13,#0f0b07),linear-gradient(180deg,var(--osso),#ded3bb);
  box-shadow:0 1px 0 rgba(0,0,0,.6);
}
.controfoglio .tagliando-leva:hover{
  background-image:linear-gradient(180deg,#fff7e8,#f1e6cf),linear-gradient(180deg,#a5290f,#7d1c10 62%,#661609);
}
.controfoglio :is(a,button,input):focus-visible,
.cimasa :is(a,button,input):focus-visible{outline-color:var(--foglia-luce)}

/* ---------- colofone ---------- */

.colofone{
  padding:clamp(1.6rem,4vw,2.6rem) 0 clamp(2rem,5vw,3rem);
  background:var(--carta-2);
  border-top:1px solid rgba(25,20,16,.3);
}
.colofone-insegna{
  width:clamp(180px,26vw,290px);height:auto;display:block;
  margin:clamp(1.2rem,3vw,1.9rem) auto 0;
}
.colofone-avvertenza,.colofone-eta,.colofone-aiuto,.colofone-firma{
  max-width:60ch;margin-inline:auto;
  font-size:clamp(13px,1.15vw,14.5px);line-height:1.6;color:var(--ink-2);
}
.colofone-avvertenza{margin-top:clamp(1rem,2.4vw,1.4rem)}
.colofone-eta,.colofone-aiuto{margin-top:.85rem}
.colofone-bollo{
  display:inline-block;
  font:700 12px/1 var(--legno);letter-spacing:.1em;
  color:var(--carta);background:var(--ink);
  padding:.35em .5em;margin-right:.4em;vertical-align:.06em;
}
.colofone-aiuto b{color:var(--minio-cupo);letter-spacing:.04em}
.colofone-vie{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.4rem;
  margin:clamp(1rem,2.4vw,1.4rem) 0;
}
.colofone-vie a{
  font:700 clamp(11px,1.15vw,13px)/1 var(--testo);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink);text-decoration-thickness:1px;text-underline-offset:.32em;
}
.colofone-vie a:hover{color:var(--minio-cupo)}
.colofone-firma{margin-top:.6rem;opacity:.82}

/* ---------- moto: comparse legate all'ingresso, senza spostamenti ---------- */

@keyframes sorgi{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .plancia-lastra,.tariffa-voce,.dispaccio-brano{
      animation:sorgi linear both;
      animation-timeline:view();
      animation-range:entry 6% entry 44%;
    }
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- adattamenti ---------- */

@media (max-width:900px){
  .cimasa-voce{letter-spacing:.2em}
}
@media (max-width:760px){
  :root{--cassa:462px}
  .cimasa-riga{gap:.6rem}
  .cimasa-insegna{width:clamp(190px,32vw,268px)}
  .cassetta-voce+.cassetta-voce::before{display:none}
  .cassetta-elenco{gap:0 .2rem}
}
@media (max-width:620px){
  :root{--cassa:436px}
  .cimasa{padding:.62rem 0 .58rem}
  /* la testata si impagina su due righe: insegna sopra, dicitura sotto */
  .cimasa-riga{flex-wrap:wrap;gap:.42rem}
  .cimasa-insegna{order:-1;flex:0 0 100%;width:min(62vw,244px);margin-inline:auto}
  .cimasa-voce{flex:1 1 auto;font-size:8.5px;letter-spacing:.16em;line-height:1.2}
}
@media (max-width:430px){
  :root{--cassa:410px}
  .cimasa-insegna{width:min(66vw,228px)}
  .proclama-coda{letter-spacing:.1em}
  .proclama-guida{font-size:14.8px;line-height:1.5}
  .tagliando{padding-top:.7rem;padding-bottom:.6rem}
  .tagliando-dicitura{font-size:9.5px;letter-spacing:.2em;margin-bottom:.45rem}
  .tagliando-campo{padding-block:.68rem}
  .tagliando-leva{width:100%}
  .filetto-fregio{width:min(72%,300px)}
}
@media (min-width:1500px){
  :root{--giustezza:min(88vw,940px)}
}