/* Mappa degli Antenati - grafica "tavolo da cartografo" (index2.php)
   Pagina fredda e ordinata, perche' la mappa (pergamena, cerchi rossi) risalti.
   Nessun servizio esterno: i caratteri sono in font/ (licenza OFL). */

@font-face{font-family:"Newsreader"; src:url(font/newsreader-latin-wght-normal.woff2) format("woff2"); font-weight:200 800; font-style:normal; font-display:swap;}
@font-face{font-family:"Newsreader"; src:url(font/newsreader-latin-wght-italic.woff2) format("woff2"); font-weight:200 800; font-style:italic; font-display:swap;}
@font-face{font-family:"Hanken Grotesk"; src:url(font/hanken-grotesk-latin-wght-normal.woff2) format("woff2"); font-weight:100 900; font-style:normal; font-display:swap;}

:root{
  --carta:#e9dcbd;        /* fondo pagina: la pergamena del sito originale */
  --carta-2:#dccba2;      /* riempimenti al passaggio del mouse */
  --pannello:#f3ead3;     /* barre e superfici */
  --inchiostro:#2b2118;   /* testo */
  --inchiostro-2:#5a4632; /* testo secondario e bordi */
  --mare:#9e1b1b;         /* link e focus: il rosso del sito */
  --rosso:#9e1b1b;        /* pulsanti */
  --rosso-2:#7d1414;      /* pulsanti al passaggio del mouse */
  --rosso-bordo:#5a1010;
  --cinabro:#b3261e;      /* il rosso dei cerchi: segno di dato */
  --linea:rgba(90,70,50,.32);
  --grid:rgba(90,70,50,.09);
  --ombra:rgba(60,40,15,.5);
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-padding-top:5rem;}
body{margin:0; background:var(--carta); color:var(--inchiostro); font-family:var(--sans); font-size:1.0625rem; line-height:1.55; -webkit-font-smoothing:antialiased;}
img{max-width:100%;}
a{color:var(--mare); text-underline-offset:.2em; text-decoration-thickness:1px;}
a:hover{text-decoration-thickness:2px;}
:focus-visible{outline:3px solid var(--rosso-bordo); outline-offset:3px; border-radius:3px;}
.wrap{width:100%; max-width:1160px; margin:0 auto; padding:0 20px;}
.vai-contenuto{position:absolute; left:12px; top:-60px; z-index:100; background:var(--rosso); color:#fff; padding:.6em 1em; border-radius:6px;}
.vai-contenuto:focus{top:12px;}
.nascosto{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---------- intestazione ---------- */
.top{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--carta) 86%,transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--linea);}
.top .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 24px; min-height:64px;}
.marchio{display:inline-flex; align-items:center; gap:10px; color:var(--inchiostro); text-decoration:none; font-family:var(--serif); font-size:1.35rem; font-weight:500; letter-spacing:-.01em; padding:10px 0;}
.marchio:hover{text-decoration:none;}
.marchio svg{width:30px; height:30px; flex:none;}
.marchio .c-dato{fill:var(--cinabro);}
.nav{display:flex; gap:4px 22px; overflow-x:auto; scrollbar-width:none; max-width:100%;}
.nav::-webkit-scrollbar{display:none;}
.nav a{color:var(--inchiostro-2); text-decoration:none; white-space:nowrap; padding:10px 0; font-size:.97rem; font-weight:500;}
.nav a:hover{color:var(--inchiostro); text-decoration:underline;}

/* ---------- ricerca ---------- */
.cerca{display:flex; width:100%; max-width:520px; background:#fffaf0; border:1.5px solid var(--inchiostro-2); border-radius:999px; padding:4px; box-shadow:0 10px 24px -16px var(--ombra);}
.cerca:focus-within{outline:3px solid var(--rosso-bordo); outline-offset:3px;}
.cerca input[type=text]{flex:1; min-width:0; border:0; background:transparent; color:var(--inchiostro); font:inherit; font-size:1.15rem; padding:.55em 1em; outline:0;}
.cerca input[type=text]::placeholder{color:var(--inchiostro-2); opacity:.8;}
.cerca button{flex:none; border:1px solid var(--rosso-bordo); border-radius:999px; background:var(--rosso); color:#fff; font:inherit; font-weight:600; font-size:1rem; padding:0 1.4em; cursor:pointer;}
.cerca button:hover{background:var(--rosso-2);}
.cerca button:focus-visible{outline-offset:2px;}
.aiuto{margin:.7rem 0 0; font-size:.9rem; color:var(--inchiostro-2); max-width:46ch;}

/* ---------- home ---------- */
.apertura{position:relative; padding:clamp(36px,6vw,72px) 0 clamp(40px,6vw,72px);}
.apertura::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(var(--grid) 1px,transparent 1px) 0 0/44px 44px, linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/44px 44px;
  -webkit-mask-image:linear-gradient(#000 55%,transparent); mask-image:linear-gradient(#000 55%,transparent);}
.apertura .wrap{display:grid; grid-template-columns:minmax(0,1fr); gap:44px; align-items:center;}
@media (min-width:960px){ .apertura .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:72px;} }
.titolo{margin:0 0 .5em; font-family:var(--serif); font-weight:400; font-size:clamp(2.6rem,6vw,4.7rem); line-height:1.02; letter-spacing:-.02em; text-wrap:balance;}
.sottotitolo{margin:0 0 1.6rem; max-width:36ch; font-family:var(--serif); font-size:clamp(1.15rem,2vw,1.4rem); line-height:1.5; color:var(--inchiostro-2);}
.prova{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:1.5rem 0 0; padding:0; list-style:none; font-size:.95rem;}
.prova span{color:var(--inchiostro-2); margin-right:4px;}
.prova a{display:inline-block; padding:.25em .75em; border:1px solid var(--linea); border-radius:6px; background:var(--pannello); color:var(--inchiostro); text-decoration:none; font-weight:500;}
.prova a:hover{border-color:var(--inchiostro);}

/* tavola: la mappa incorniciata, con i segni di taglio agli angoli */
.taglio{position:relative; padding:16px;}
.taglio::before{content:""; position:absolute; inset:0; pointer-events:none;
  --c:var(--inchiostro-2);
  background:
    linear-gradient(var(--c),var(--c)) left top/14px 1px no-repeat, linear-gradient(var(--c),var(--c)) left top/1px 14px no-repeat,
    linear-gradient(var(--c),var(--c)) right top/14px 1px no-repeat, linear-gradient(var(--c),var(--c)) right top/1px 14px no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/14px 1px no-repeat, linear-gradient(var(--c),var(--c)) left bottom/1px 14px no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/14px 1px no-repeat, linear-gradient(var(--c),var(--c)) right bottom/1px 14px no-repeat;}
.tavola,.mappa-box{position:relative; background:#e9d9ae; border-radius:3px; overflow:hidden; box-shadow:0 1px 0 var(--linea), 0 30px 50px -32px var(--ombra), 0 10px 18px -12px var(--ombra);}
.tavola img{display:block; width:100%; height:auto;}
.vetrina{width:min(100%,430px); justify-self:center;}
@media (min-width:960px){ .vetrina{justify-self:end; transform:rotate(1.4deg);} }
.didascalia{margin:.5rem 0 0; font-size:.85rem; color:var(--inchiostro-2); text-align:center;}

/* dimostrazione animata: l'unico movimento della pagina */
.d{position:absolute; left:var(--x); top:var(--y); width:var(--s); aspect-ratio:1; border-radius:50%; background:rgba(190,40,34,.42); border:1.5px solid rgba(140,24,20,.9); opacity:0; transform:translate(-50%,-50%) scale(.2);}
.da{animation:fa 16s infinite;} .db{animation:fb 16s infinite;} .dc{animation:fc 16s infinite;} .dd{animation:fd 16s infinite;}
@keyframes fa{0%,3%{opacity:0; transform:translate(-50%,-50%) scale(.2)} 9%,90%{opacity:1; transform:translate(-50%,-50%) scale(1)} 96%,100%{opacity:0; transform:translate(-50%,-50%) scale(1)}}
@keyframes fb{0%,26%{opacity:0; transform:translate(-50%,-50%) scale(.2)} 32%,90%{opacity:1; transform:translate(-50%,-50%) scale(1)} 96%,100%{opacity:0; transform:translate(-50%,-50%) scale(1)}}
@keyframes fc{0%,50%{opacity:0; transform:translate(-50%,-50%) scale(.2)} 56%,90%{opacity:1; transform:translate(-50%,-50%) scale(1)} 96%,100%{opacity:0; transform:translate(-50%,-50%) scale(1)}}
@keyframes fd{0%,74%{opacity:0; transform:translate(-50%,-50%) scale(.2)} 80%,90%{opacity:1; transform:translate(-50%,-50%) scale(1)} 96%,100%{opacity:0; transform:translate(-50%,-50%) scale(1)}}
.era{position:absolute; left:5%; bottom:4%; margin:0; opacity:0; font-family:var(--serif); font-size:clamp(.8rem,2.6vw,1rem); line-height:1.25; color:#3a2a14;}
.era b{display:block; font-weight:600;}
.ea{animation:ea 16s infinite;} .eb{animation:eb 16s infinite;} .ec{animation:ec 16s infinite;} .ed{animation:ed 16s infinite;}
@keyframes ea{0%,2%{opacity:0} 5%,23%{opacity:1} 26%,100%{opacity:0}}
@keyframes eb{0%,25%{opacity:0} 28%,47%{opacity:1} 50%,100%{opacity:0}}
@keyframes ec{0%,49%{opacity:0} 52%,71%{opacity:1} 74%,100%{opacity:0}}
@keyframes ed{0%,73%{opacity:0} 76%,94%{opacity:1} 97%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .d{animation:none; opacity:1; transform:translate(-50%,-50%);}
  .era{animation:none;} .ed{opacity:1;}
}

.percorsi{padding:8px 0 56px;}
.percorsi .wrap{display:grid; gap:28px;}
@media (min-width:760px){ .percorsi .wrap{grid-template-columns:1fr 1fr; gap:0;} .percorsi a:first-child{border-right:1px solid var(--linea);} }
.percorsi a{display:block; padding:6px 0 6px; color:inherit; text-decoration:none;}
@media (min-width:760px){ .percorsi a{padding:6px 40px;} .percorsi a:first-child{padding-left:0;} }
.percorsi strong{display:block; font-family:var(--serif); font-weight:500; font-size:1.7rem; line-height:1.15; margin-bottom:.3em;}
.percorsi a:hover strong{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.18em;}
.percorsi span{display:block; max-width:46ch; color:var(--inchiostro-2);}

/* ---------- risultato ---------- */
.intesta{padding:clamp(24px,4vw,44px) 0 8px;}
.intesta .wrap{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 48px;}
.intesta .cerca{width:auto; min-width:0; flex:1 1 360px; max-width:520px;}
.h1{margin:0; font-weight:400; max-width:100%; min-width:0;}
.h1-pre{display:block; font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem,2vw,1.35rem); color:var(--inchiostro-2); margin-bottom:.1em;}
/* il cognome e' composto come il nome di una regione su una carta: capitali spaziate */
.h1-nome{display:block; font-family:var(--serif); font-size:clamp(1.5rem,calc(min(1120px,100vw - 40px) / (var(--n,8) * .86)),5.6rem); line-height:1.05; letter-spacing:.14em; text-transform:uppercase; overflow-wrap:anywhere; hyphens:none;}
.risultato{padding:20px 0 40px;}
.risultato .wrap{display:grid; grid-template-columns:minmax(0,1fr); gap:32px; align-items:start;}
@media (min-width:960px){ .risultato .wrap{grid-template-columns:minmax(0,640px) minmax(0,1fr); gap:56px;} .lato{position:sticky; top:88px;} }
.scheda{margin:0;}
.lato h2{margin:0 0 .5em; font-family:var(--serif); font-weight:500; font-size:1.55rem; line-height:1.2;}
.lato p{margin:0 0 1em; max-width:48ch;}
.oggi{padding:14px 0 0; border-top:1px solid var(--linea);}
.condividi{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px;}
.condividi a,.condividi button{display:inline-flex; align-items:center; gap:8px; padding:.5em 1em; border:1px solid var(--rosso-bordo); border-radius:6px; color:#fff; text-decoration:none; font-weight:500; font-size:.95rem; background:var(--rosso);}
.condividi a:hover,.condividi button:hover{background:var(--rosso-2); text-decoration:none;}
.condividi button{font:inherit; font-weight:500; font-size:.95rem; cursor:pointer;}
.condividi svg{width:18px; height:18px; fill:currentColor; flex:none;}
.condividi-msg{flex-basis:100%; margin:2px 0 0; font-size:.9rem; color:var(--inchiostro-2);}
.condividi-msg:empty{display:none;}
.azione{display:inline-block; padding:.7em 1.3em; background:var(--rosso); color:#fff; border:1px solid var(--rosso-bordo); border-radius:6px; text-decoration:none; font-weight:600;}
.azione:hover{background:var(--rosso-2); color:#fff; text-decoration:none;}

/* controlli del player (player.js) */
.mappa{position:absolute; top:0; left:0; width:100%; height:auto;}
canvas.mappa{cursor:pointer;}
.scheda .mappa-ctl{display:flex; align-items:center; gap:6px; margin:0; padding:8px 10px; background:var(--pannello); border:1px solid var(--linea); border-radius:0 0 3px 3px;}
.scheda .mappa-box{border-radius:3px 3px 0 0;}
.mappa-ctl button{display:inline-flex; align-items:center; justify-content:center; flex:none; width:40px; height:38px; padding:0; background:var(--rosso); color:#fff; border:1px solid var(--rosso-bordo); border-radius:6px; cursor:pointer; font:inherit;}
.mappa-ctl button:hover{background:var(--rosso-2);}
.mappa-ctl .mc-play{background:var(--rosso); border-color:var(--rosso-bordo); color:#fff;}
.mappa-ctl .mc-play:hover{background:var(--rosso-2);}
.mappa-ctl button:disabled{opacity:.6; cursor:progress;}
.mappa-ctl svg{width:20px; height:20px; fill:currentColor;}
.mappa-ctl input[type=range]{flex:1 1 0; width:0; min-width:50px; margin:0 4px; accent-color:var(--rosso);}
.mappa-ctl .mc-info{flex:none; min-width:4.5em; text-align:right; font-variant-numeric:tabular-nums; font-size:.95rem; color:var(--inchiostro-2);}
.mappa-ctl .mc-share{width:auto; padding:0 12px; gap:8px; margin-left:4px; font-weight:600; font-size:.95rem;}
.mappa-ctl .mc-share span{display:none;}
.mappa-ctl-solo{justify-content:flex-end;}
.mappa-msg{margin:0; padding:8px 12px 0; font-size:.9rem; color:var(--inchiostro-2);}
.mappa-msg:empty{display:none;}
@media (min-width:480px){ .mappa-ctl .mc-share span{display:inline;} }
@media (max-width:359px){ .mappa-ctl .mc-info{display:none;} }

/* ---------- testo del cognome ---------- */
.approfondimento{padding:24px 0 56px; border-top:1px solid var(--linea);}
.testo{max-width:66ch; font-family:var(--serif); font-size:1.19rem; line-height:1.7; font-optical-sizing:auto;}
.testo h2{margin:0 0 .4em; font-family:var(--sans); font-size:.95rem; font-weight:600; letter-spacing:.01em; color:var(--inchiostro-2);}
.testo h3{margin:2.2em 0 .5em; font-family:var(--serif); font-weight:500; font-size:1.75rem; line-height:1.2; letter-spacing:-.01em;}
.testo p{margin:0 0 1em;}
.testo ul{list-style:none; margin:1.1em 0 1.4em; padding:0 0 0 0; border-left:1px solid var(--linea);}
.testo li{position:relative; padding:0 0 .8em 1.5rem;}
.testo li::before{content:""; position:absolute; left:-5px; top:.62em; width:9px; height:9px; border-radius:50%; background:var(--cinabro);}
.testo strong{font-weight:600;}

/* ---------- altre mappe e piede ---------- */
.sorelle{padding:36px 0; border-top:1px solid var(--linea);}
.sorelle h2{margin:0 0 .8em; font-family:var(--serif); font-weight:500; font-size:1.35rem;}
.sorelle ul{display:flex; flex-wrap:wrap; gap:6px 22px; margin:0; padding:0; list-style:none;}
.sorelle a{color:var(--inchiostro); text-decoration:none; border-bottom:1px solid var(--linea); padding:2px 0; font-size:.98rem;}
.sorelle a:hover{border-color:var(--inchiostro);}
.piede{padding:22px 0 40px; border-top:1px solid var(--linea); font-size:.9rem; color:var(--inchiostro-2);}
.piede a{color:inherit;}

/* ---------- pagine di testo, classifica, modulo ---------- */
.nav a[aria-current]{color:var(--inchiostro); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.35em;}
.pagina{padding:clamp(28px,5vw,56px) 0 clamp(40px,6vw,72px);}
.prosa{max-width:72ch; font-family:var(--serif); font-size:1.16rem; line-height:1.7;}
.prosa::after{content:""; display:block; clear:both;}
.prosa h1{margin:0 0 .6em; font-weight:400; font-size:clamp(2.1rem,5.4vw,3.4rem); line-height:1.08; letter-spacing:-.015em; text-wrap:balance;}
.prosa h2{margin:2em 0 .5em; font-weight:500; font-size:clamp(1.5rem,3vw,1.9rem); line-height:1.2; letter-spacing:-.01em;}
.prosa h3{margin:1.6em 0 .4em; font-weight:600; font-size:1.2rem; line-height:1.3;}
.prosa p{margin:0 0 1em;}
.prosa br + br,.prosa p + br,.prosa ul + br,.prosa :is(h1,h2,h3) + br{display:none;}
.prosa p:empty{display:none;}
.prosa ul,.prosa ol{margin:.6em 0 1.4em; padding-left:1.3em;}
.prosa li{padding:.1em 0 .1em .3em;}
.prosa li::marker{color:var(--cinabro);}
.prosa strong{font-weight:600;}
.prosa img{float:right; width:min(300px,38%); height:auto; margin:.3em 0 1em 1.6rem; border-radius:3px; box-shadow:0 20px 36px -24px var(--ombra);}
.prosa .salta{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; font-family:var(--sans); font-size:.95rem; color:var(--inchiostro-2); margin:1.4em 0;}
.prosa .salta a{padding:.1em .5em; border:1px solid var(--linea); border-radius:6px; background:var(--pannello); color:var(--inchiostro); text-decoration:none; white-space:nowrap;}
.prosa .salta a:hover{border-color:var(--inchiostro-2);}
.condividi-pagina{padding:0 0 clamp(36px,5vw,56px);}
.condividi-pagina .condividi{margin-top:0;}

/* classifica dei cognomi */
.prosa{overflow-wrap:break-word;}
table.classifica{width:100%; max-width:none; border-collapse:collapse; margin:1.2em 0 1.6em; font-family:var(--sans); font-size:1rem; line-height:1.5; background:transparent;}
table.classifica th{padding:.5em .8em; text-align:left; font-weight:600; font-size:.88rem; color:var(--inchiostro-2); border-bottom:2px solid var(--inchiostro-2); background:transparent;}
table.classifica td{padding:.75em .8em; vertical-align:top; border:0; border-bottom:1px solid var(--linea);}
table.classifica tr:target td{background:var(--carta-2);}
table.classifica td:first-child{width:4.2em; font-variant-numeric:tabular-nums; color:var(--inchiostro-2); text-align:left;}
table.classifica td:nth-child(2){white-space:nowrap; font-family:var(--serif); font-size:1.25rem; font-weight:500; line-height:1.3;}
table.classifica td:nth-child(2) a{color:var(--inchiostro); text-decoration-color:var(--cinabro); text-decoration-thickness:2px;}
table.classifica td:nth-child(3){color:var(--inchiostro-2);}
table.classifica tr:hover td{background:rgba(255,250,240,.45);}

/* modulo "Segnala un antenato" */
form.segnala{margin:1.6em 0 0; font-family:var(--sans); font-size:1.02rem; line-height:1.5;}
form.segnala .campo{margin:0 0 1.15em;}
form.segnala label{display:block; margin:0 0 .35em; font-weight:600;}
form.segnala label small{font-weight:400; color:var(--inchiostro-2); font-size:.88em;}
form.segnala input[type=text],form.segnala input[type=number],form.segnala input[type=email]{display:block; width:100%; max-width:30em; font:inherit; font-size:1.05rem; color:var(--inchiostro); padding:.6em .8em; background:#fffaf0; border:1.5px solid var(--inchiostro-2); border-radius:8px;}
form.segnala input::placeholder{color:var(--inchiostro-2); opacity:.7;}
form.segnala input.anno{max-width:8em;}
form.segnala input.codice{max-width:9em; font-size:1.3rem; letter-spacing:.15em;}
form.segnala input#captcha{text-transform:uppercase;}
form.segnala .campi-anni{display:flex; flex-wrap:wrap; gap:0 28px;}
form.segnala .nota{margin:.4em 0 0; font-size:.9rem; color:var(--inchiostro-2);}
form.segnala label.spunta{display:flex; gap:.7em; align-items:flex-start; margin:0 0 1em; max-width:40em; font-weight:400;}
form.segnala label.spunta input{flex:none; width:1.25em; height:1.25em; margin:.2em 0 0; accent-color:var(--rosso);}
form.segnala .captcha-riga{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:.2em 0 .7em;}
form.segnala .captcha-riga img{float:none; width:200px; height:60px; margin:0; border:1px solid var(--inchiostro-2); border-radius:6px; box-shadow:none; background:#fff;}
form.segnala .azioni{display:flex; flex-wrap:wrap; gap:10px; margin-top:1.4em;}
form.segnala button{font:inherit; font-weight:600; font-size:1rem; padding:.7em 1.3em; border-radius:8px; cursor:pointer;}
form.segnala .btn-principale{background:var(--rosso); color:#fff; border:1px solid var(--rosso-bordo);}
form.segnala .btn-principale:hover{background:var(--rosso-2);}
form.segnala .btn-secondario{background:var(--pannello); color:var(--inchiostro); border:1px solid var(--inchiostro-2);}
form.segnala .btn-secondario:hover{background:var(--carta-2);}
.esito-ok,.esito-errore{margin:1.2em 0; padding:.9em 1.1em; border-radius:8px; font-family:var(--sans); font-size:1.02rem; line-height:1.5;}
.esito-ok{background:#e3ecd2; border:1px solid #6b8a3a;}
.esito-errore{background:#f6dcd4; border:1px solid var(--rosso);}
.esito-errore ul{margin:.4em 0 0; padding-left:1.2em;}

/* ---------- telefoni: titolo e ricerca compatti, cosi' la mappa e i suoi pulsanti stanno nello schermo ---------- */
@media (max-width:600px){
  html{scroll-padding-top:1rem;}
  .wrap{padding:0 12px;}
  .top{position:static; -webkit-backdrop-filter:none; backdrop-filter:none;}
  .top .wrap{min-height:0; gap:0 16px;}
  .marchio{font-size:1.1rem; padding:6px 0 0; gap:8px;}
  .marchio svg{width:24px; height:24px;}
  .nav{gap:0 18px;}
  .nav a{padding:6px 0; font-size:.88rem;}
  .intesta{padding:8px 0 4px;}
  .intesta .wrap{gap:8px;}
  .h1-pre{font-size:.95rem; margin:0;}
  .h1-nome{font-size:clamp(.8rem,calc((100vw - 24px) / (var(--n,8) * .8)),2.2rem); letter-spacing:.1em; line-height:1.1;}
  .intesta .cerca{flex:1 1 100%; max-width:none;}
  .intesta .cerca{padding:3px; box-shadow:none;}
  .intesta .cerca input[type=text]{font-size:1rem; padding:.4em .8em;}
  .intesta .cerca button{font-size:.9rem; padding:0 1.1em;}
  .risultato{padding:8px 0 28px;}
  .risultato .wrap{gap:20px;}
  /* mappa + pulsanti: la larghezza e' limitata in modo che l'altezza complessiva resti nello schermo */
  .scheda{padding:8px; margin:0 auto; width:100%; max-width:max(300px, calc((100vh - 240px) * .7676)); max-width:max(300px, calc((100svh - 240px) * .7676));}
  .scheda .mappa-ctl{padding:6px 6px; gap:4px;}
  .mappa-ctl button{width:36px; height:34px;}
  .mappa-ctl input[type=range]{margin:0 2px; min-width:40px;}
  .mappa-ctl .mc-info{min-width:3.6em; font-size:.85rem;}
  .mappa-ctl .mc-share{padding:0 8px; margin-left:0;}

  .pagina{padding:20px 0 36px;}
  .prosa{font-size:1.08rem; line-height:1.65;}
  .prosa > img{display:none;}
  .prosa h1{font-size:clamp(1.8rem,8vw,2.4rem);}
  form.segnala .captcha-riga img{width:min(200px,100%); height:auto;}
  /* classifica: ogni riga diventa "posizione, cognome" sopra e origine sotto */
  table.classifica,table.classifica tbody{display:block;}
  table.classifica tr{display:grid; grid-template-columns:2.4em 1fr; column-gap:.4em; padding:.7em 0; border-bottom:1px solid var(--linea);}
  table.classifica tr:has(th){display:none;}
  table.classifica td{display:block; padding:0; border:0;}
  table.classifica td:first-child{width:auto; padding-top:.2em;}
  table.classifica td:nth-child(3){grid-column:2; font-size:.95rem;}
  table.classifica tr:hover td{background:transparent;}
  table.classifica tr:target{background:var(--carta-2);}
  form.segnala .captcha-riga img{margin:0 !important; display:inline-block;}
}

/* cognomi particolari: indice delle raccolte ed elenchi */
.prosa ul.raccolte{list-style:none; padding:0; margin:1.4em 0 1.8em;}
.prosa ul.raccolte li{padding:.75em 0; border-bottom:1px solid var(--linea);}
.prosa ul.raccolte a{font-size:1.25rem; font-weight:500; color:var(--inchiostro); text-decoration-color:var(--cinabro); text-decoration-thickness:2px;}
.prosa ul.raccolte span{display:block; margin-top:.15em; font-family:var(--sans); font-size:.95rem; line-height:1.45; color:var(--inchiostro-2);}
.prosa ul.elenco-cognomi{list-style:none; padding:0; margin:1.2em 0 1.6em; display:grid; grid-template-columns:repeat(auto-fill,minmax(9em,1fr)); gap:0 18px;}
.prosa ul.elenco-cognomi li{padding:.4em 0; border-bottom:1px solid var(--linea); font-size:1.15rem; line-height:1.35;}
.prosa ul.elenco-cognomi a{color:var(--inchiostro); text-decoration-color:var(--cinabro); text-decoration-thickness:2px;}
.prosa ul.elenco-cognomi .esempio{display:block; font-family:var(--sans); font-size:.85rem; color:var(--inchiostro-2);}
.prosa .salta span[aria-current]{padding:.1em .5em; border:1px solid var(--inchiostro); border-radius:6px; background:var(--carta-2); color:var(--inchiostro); font-weight:600;}