/* ============================================================
   Archivio Unduetre — veste d'archivio (pubblico)
   ============================================================ */
:root{
  --paper:#e6e3d9;
  --paper-deep:#ddd9cc;
  --mount:#d6d1c2;
  --ink:#1d1a16;
  --ink-soft:#544e44;
  --red:#b1271c;
  --tape:#5a4636;
  --stamp:#6c7177;
  --hair:rgba(29,26,22,.20);
  --hair-soft:rgba(29,26,22,.10);
  --display:"Fraunces",Georgia,serif;
  --body:"Spectral",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --hand:"Caveat",cursive;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1.04rem,.96rem + .4vw,1.18rem);
  line-height:1.74;
  background-image:
    repeating-linear-gradient(0deg,rgba(29,26,22,.012) 0 1px,transparent 1px 3px),
    radial-gradient(120% 80% at 50% -10%,rgba(255,255,255,.5),transparent 60%);
}
::selection{background:var(--red);color:var(--paper)}
a{color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.sheet{max-width:78rem;margin:0 auto;padding:clamp(1.1rem,3vw,2.4rem)}

/* ---- testata ---- */
.masthead{
  border-top:2px solid var(--ink);border-bottom:1px solid var(--hair);
  padding:.7rem 0 .55rem;display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;flex-wrap:wrap;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
.masthead .stamp{color:var(--red)}
.masthead a.home-link{text-decoration:none;color:inherit;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.masthead a.home-link:hover,.masthead a.home-link:focus-visible{color:var(--red);border-color:var(--red)}

/* ---- soglia (home) ---- */
.soglia{padding:clamp(2.6rem,9vw,6rem) 0 clamp(1.8rem,4vw,3rem);border-bottom:1px solid var(--hair)}
.soglia .conta{font-family:var(--mono);font-size:.82rem;letter-spacing:.42em;text-transform:uppercase;color:var(--red);margin:0 0 1.5rem}
.soglia .conta span{opacity:.32}
.soglia h1{
  font-family:var(--display);font-optical-sizing:auto;font-weight:900;
  font-size:clamp(2.8rem,8vw,6rem);line-height:.92;letter-spacing:-.02em;margin:0;
}
.soglia .annuncio{
  max-width:40rem;margin:1.8rem 0 0;font-size:clamp(1.1rem,1rem + .5vw,1.3rem);
  line-height:1.6;color:var(--ink-soft);font-style:italic;
}

/* ---- indice dei capitoli ---- */
.indice{max-width:52rem;margin:clamp(2rem,5vw,3.4rem) auto 0}
.indice h2{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--stamp);border-bottom:1px solid var(--hair);padding-bottom:.7rem;margin:0 0 .4rem;
}
.cap-row{
  display:flex;align-items:baseline;gap:1.1rem;
  text-decoration:none;color:var(--ink);
  padding:1.05rem 0;border-bottom:1px solid var(--hair-soft);
  transition:background .18s;
}
a.cap-row:hover,a.cap-row:focus-visible{background:rgba(177,39,28,.05)}
.cap-row .num{
  font-family:var(--display);font-weight:600;font-style:italic;
  font-size:1.5rem;min-width:2.6rem;color:var(--red);line-height:1;
}
.cap-row .meta{flex:1;min-width:0}
.cap-row .tit{font-family:var(--display);font-style:italic;font-size:1.35rem;line-height:1.15;display:block}
.cap-row .loc{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--stamp);text-transform:uppercase;display:block;margin-top:.3rem}
.cap-row .flag{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red);white-space:nowrap}
.cap-row.muta{color:var(--stamp);pointer-events:none}
.cap-row.muta .num,.cap-row.muta .tit{color:var(--stamp);font-style:italic;opacity:.7}
.cap-row.muta .flag{color:var(--stamp)}
/* hover più leggibile */
a.cap-row:hover,a.cap-row:focus-visible{
  background:rgba(177,39,28,.09);
  cursor:pointer;
}
a.cap-row:hover .tit,a.cap-row:focus-visible .tit{
  color:var(--red);
}

/* icona ritratto al posto del numero mancante */
.cap-row .icona-ritratto{
  font-family:var(--display);
  font-size:1.3rem;
  color:var(--red);
  line-height:1;
  display:inline-block;
}
/* ---- intestazione capitolo ---- */
.head{position:relative;padding:clamp(2.4rem,7vw,5rem) 0 clamp(1.6rem,4vw,2.6rem);border-bottom:1px solid var(--hair)}
.head .conta{font-family:var(--mono);font-size:.82rem;letter-spacing:.42em;text-transform:uppercase;color:var(--red);margin:0 0 1.4rem}
.head .conta span{opacity:.32}.head .conta b{font-weight:500;opacity:1}
.numeral{font-family:var(--display);font-optical-sizing:auto;font-weight:900;font-size:clamp(4.5rem,17vw,11rem);line-height:.82;letter-spacing:-.02em;margin:0;color:var(--ink)}
.title{font-family:var(--display);font-optical-sizing:auto;font-weight:600;font-style:italic;font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.02;letter-spacing:-.015em;margin:.3rem 0 0}
.parte{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:0 0 1rem}
.locator{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--stamp);margin:1.5rem 0 0}
.locator i{color:var(--ink-soft);font-style:normal}

/* ---- corpo ---- */
.chapter{max-width:39rem;margin:clamp(1.8rem,5vw,3.2rem) auto 0}
.chapter .avviso{font-family:var(--mono);font-size:.78rem;line-height:1.7;color:var(--ink-soft);border-left:2px solid var(--red);padding:.2rem 0 .2rem 1rem;margin:0 0 2.6rem}
.chapter p{margin:0 0 1.3rem}
.chapter p.first::first-letter{font-family:var(--display);font-weight:900;font-size:3.6em;line-height:.72;float:left;padding:.06em .12em 0 0;color:var(--red)}
.chapter em{font-style:italic}
.chapter .said{color:var(--ink);font-style:italic}

/* nota rossa a margine */
.mn{font-family:var(--hand);font-size:1.18rem;line-height:1.18;color:var(--red);display:block;margin:.5rem 0 1.3rem;padding-left:1rem;border-left:1px solid rgba(177,39,28,.4)}
@media(min-width:1080px){
  .mn{float:right;clear:right;width:14rem;margin:.1rem -16rem .6rem 0;padding-left:0;border-left:0}
  .mn::before{content:"\21B3 ";opacity:.6}
}

/* ---- tavole ---- */
figure.plate{margin:2.6rem 0;background:var(--mount);border:1px solid var(--hair);padding:.85rem .85rem .2rem;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 8px 22px -16px rgba(29,26,22,.5)}
figure.plate .frame{position:relative;background:var(--paper-deep);border:1px solid var(--hair-soft);overflow:hidden}
figure.plate img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.02)}
figure.plate.colore img{filter:none}
.plate-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:14rem;color:var(--stamp);font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;background:repeating-linear-gradient(45deg,rgba(29,26,22,.025) 0 10px,transparent 10px 20px)}
.plate-empty span{border:1px dashed var(--hair);padding:.45rem .8rem}
figcaption{font-family:var(--mono);font-size:.74rem;line-height:1.6;color:var(--ink-soft);padding:.7rem .15rem .6rem}
figcaption .tav{color:var(--red);font-weight:500;letter-spacing:.06em;display:inline-block;margin-right:.4em}

/* ---- nota d'archivio ---- */
.endnote{max-width:39rem;margin:3rem auto 0;font-family:var(--mono);font-size:.76rem;line-height:1.7;color:var(--ink-soft);border-top:1px solid var(--hair);padding-top:1.1rem}

/* ---- testimonianze ---- */
.testi{max-width:39rem;margin:3.2rem auto 0}
.testi h2{font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stamp);border-bottom:1px solid var(--hair);padding-bottom:.7rem;margin:0 0 1.4rem}
.testimonianza{margin:0 0 1.5rem;padding-left:1rem;border-left:2px solid var(--hair)}
.testimonianza .txt{font-style:italic;margin:0 0 .35rem}
.testimonianza .by{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stamp)}
.flash{font-family:var(--mono);font-size:.8rem;line-height:1.6;color:var(--red);border:1px solid rgba(177,39,28,.4);padding:.8rem 1rem;margin:0 0 1.6rem}

/* ---- modulo ---- */
.modulo{max-width:39rem;margin:2.4rem auto 0;border-top:1px dashed var(--hair);padding-top:1.8rem}
.modulo p.intro{font-family:var(--mono);font-size:.78rem;line-height:1.7;color:var(--ink-soft);margin:0 0 1.2rem}
.modulo label{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stamp);margin:0 0 .35rem}
.modulo input[type=text],.modulo textarea{
  width:100%;background:var(--paper-deep);border:1px solid var(--hair);color:var(--ink);
  font-family:var(--body);font-size:1rem;padding:.7rem .8rem;margin:0 0 1.1rem;border-radius:0;
}
.modulo textarea{min-height:8rem;resize:vertical;line-height:1.6}
.modulo input:focus,.modulo textarea:focus{outline:2px solid var(--red);outline-offset:0;border-color:transparent}
.modulo .hp{position:absolute;left:-9999px}
.modulo button{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);border:0;padding:.8rem 1.5rem;cursor:pointer;transition:background .2s;
}
.modulo button:hover,.modulo button:focus-visible{background:var(--red)}

/* ---- pager ---- */
.pager{max-width:78rem;margin:3.4rem auto 0;border-top:2px solid var(--ink);padding-top:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.04em}
.pager a{text-decoration:none;color:var(--ink);border-bottom:1px solid transparent;padding-bottom:.1rem;transition:border-color .2s,color .2s}
.pager a:hover,.pager a:focus-visible{border-color:var(--red);color:var(--red)}
.pager a.home{color:var(--ink-soft);letter-spacing:.08em}
.pager .disabled{color:var(--hair);pointer-events:none}
@media(max-width:640px){.pager{flex-wrap:wrap;justify-content:center;gap:.6rem 1.4rem;text-align:center}.pager a.home{order:3;flex-basis:100%}}

/* ---- link alle tavole + apparato ---- */
a.tavlink{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(177,39,28,.55);transition:color .15s,border-color .15s}
a.tavlink:hover,a.tavlink:focus-visible{color:var(--red);border-color:var(--red)}
.mn a.tavlink{
  border-bottom-style:dotted;
}
.mn a.tavlink:hover,
.mn a.tavlink:focus-visible{
  background:rgba(177,39,28,.18);
  border-bottom-style:solid;
}
.apparato{max-width:42rem;margin:clamp(1.6rem,4vw,2.6rem) auto 0}
.apparato figure.plate{scroll-margin-top:2rem}
.apparato figcaption .vai{display:block;margin-top:.5rem;font-size:.72rem;letter-spacing:.04em;color:var(--red);text-decoration:none;border-bottom:1px solid transparent;width:fit-content}
.apparato figcaption .vai:hover,.apparato figcaption .vai:focus-visible{border-color:var(--red)}
.apparato figcaption .vai.indietro{color:var(--ink-soft)}
.apparato figcaption .vai.indietro:hover,.apparato figcaption .vai.indietro:focus-visible{color:var(--red);border-color:var(--red)}
figure.plate:target{outline:2px solid var(--red);outline-offset:8px;animation:flashplate 1.6s ease}
@keyframes flashplate{0%,40%{outline-color:var(--red)}100%{outline-color:transparent}}
@media(prefers-reduced-motion:reduce){figure.plate:target{animation:none}}

/* ---- colophon ---- */
.colophon{max-width:78rem;margin:1.4rem auto 0;font-family:var(--mono);font-size:.68rem;line-height:1.7;letter-spacing:.05em;color:var(--stamp);text-transform:uppercase}

/* ---- motion ---- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.head .conta,.head .numeral,.head .title,.head .locator,.head .parte,.soglia .conta,.soglia h1,.soglia .annuncio{opacity:0;animation:rise .9s ease forwards}
.head .conta,.soglia .conta{animation-delay:.05s}
.head .parte{animation-delay:.12s}
.head .numeral,.soglia h1{animation-delay:.18s}
.head .title{animation-delay:.32s}
.head .locator,.soglia .annuncio{animation-delay:.46s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  [class] *{animation:none !important}
  .head .conta,.head .numeral,.head .title,.head .locator,.head .parte,.soglia .conta,.soglia h1,.soglia .annuncio{animation:none;opacity:1}
}