:root{--tabloid:#ffd400;--ink:#1a1a1a;--accent:#b3361f;--paper:#fffdf2;--gold:#fcae3b}
*{box-sizing:border-box}
body{margin:0;background:var(--tabloid);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--ink)}
header.na-top{padding:1.3rem 1rem;border-bottom:4px solid var(--ink)}
header .back{font-size:.85rem;text-decoration:none;font-weight:700}
header h1{font-family:"Times New Roman",Georgia,serif;font-size:clamp(2rem,6vw,3.4rem);
  margin:.3rem 0 0;line-height:.95;text-transform:uppercase;letter-spacing:-1px}
header p{margin:.3rem 0 0;max-width:62ch;font-size:.95rem}
main{max-width:1100px;margin:1.2rem auto;padding:0 1rem}

/* classifica */
.na-board{background:var(--ink);color:#fff;border-radius:12px;padding:1rem 1.1rem;margin-bottom:1.4rem}
.na-board h2{margin:0 0 .6rem;font-size:1.1rem;letter-spacing:.04em}
.na-board ol{margin:0;padding:0;list-style:none;counter-reset:r}
.na-board li{counter-increment:r;display:flex;align-items:center;gap:.7rem;padding:.4rem 0;border-bottom:1px solid #333}
.na-board li:last-child{border-bottom:0}
.na-board li::before{content:counter(r);font-family:"Times New Roman",Georgia,serif;font-weight:700;
  font-size:1.3rem;color:var(--gold);min-width:1.6rem;text-align:center}
.na-board img{width:48px;height:48px;object-fit:cover;border-radius:6px;border:2px solid #fff}
.na-board .t{flex:1;font-weight:600;font-size:.92rem;line-height:1.2}
.na-board .v{font-weight:800;color:var(--gold)}
.na-board .empty{color:#bbb;font-style:italic}

/* toggle ordinamento */
.na-sort{display:flex;gap:.5rem;margin-bottom:1rem;align-items:center}
.na-sort a{padding:.35rem .8rem;border:2px solid var(--ink);border-radius:999px;text-decoration:none;
  font-weight:700;font-size:.85rem;background:#fff}
.na-sort a.on{background:var(--ink);color:#fff}

/* griglia */
.na-grid{columns:260px;column-gap:1rem}
figure.na-card{margin:0 0 1rem;background:var(--paper);border:2px solid var(--ink);display:flex;flex-direction:column;break-inside:avoid;-webkit-column-break-inside:avoid}
figure.na-card img.shot{width:100%;height:auto;display:block;border-bottom:2px solid var(--ink);cursor:zoom-in}
figcaption{padding:.7rem .8rem;flex:1;display:flex;flex-direction:column}
figcaption .t{font-weight:800;font-size:1rem;line-height:1.2}
figcaption .src{font-size:.78rem;color:#555;margin-top:.25rem}
figcaption .n{font-size:.85rem;margin-top:.4rem;white-space:pre-wrap}
.na-vote{margin-top:.7rem;display:flex;align-items:center;gap:.5rem}
.na-vote button{font:inherit;font-weight:800;cursor:pointer;border:2px solid var(--ink);background:var(--gold);
  border-radius:999px;padding:.4rem .9rem}
.na-vote button:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.na-vote button[disabled]{background:#ddd;color:#666;cursor:default;border-color:#bbb}
.na-vote .count{font-weight:800}
.na-empty{background:var(--paper);border:2px dashed var(--ink);padding:2rem;text-align:center}
.na-empty code{background:var(--ink);color:var(--tabloid);padding:.1rem .35rem;border-radius:3px}
footer{text-align:center;font-size:.78rem;padding:2rem 1rem;opacity:.75}

/* lightbox */
dialog.na-lb{border:4px solid var(--ink);padding:0;max-width:92vw;max-height:92vh;background:#000}
dialog.na-lb img{display:block;max-width:92vw;max-height:84vh}
dialog.na-lb .x{position:absolute;top:.4rem;right:.6rem;background:var(--accent);color:#fff;border:0;
  font-weight:800;padding:.3rem .7rem;cursor:pointer}
dialog.na-lb::backdrop{background:rgba(0,0,0,.7)}

/* --- titolo headline lungo --- */
header h1{overflow-wrap:break-word;word-break:break-word;hyphens:auto}
header h1 .cit{font-size:.45em;font-style:italic;letter-spacing:0;white-space:nowrap;vertical-align:.15em}

/* --- griglia: nessun overflow su schermi piccolissimi --- */
.na-grid{columns:260px;column-gap:1rem}
img,figure,dialog{max-width:100%}

/* --- mobile --- */
@media (max-width:640px){
  header.na-top{padding:1rem .85rem}
  header h1{font-size:clamp(1.6rem,8.5vw,2.4rem)}
  header p{font-size:.9rem}
  main{margin:1rem auto}
  .na-board{padding:.85rem .9rem}
  .na-board img{width:40px;height:40px}
  .na-board .t{font-size:.85rem}
  .na-grid{gap:.8rem}
  .na-sort{flex-wrap:wrap}
}
@media (max-width:430px){
  .na-grid{columns:1}
}

/* --- impaginatore --- */
.na-count{margin-left:auto;font-size:.82rem;color:#555}
.na-pager{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;margin:1rem 0}
.na-pager .pg{padding:.35rem .65rem;border:2px solid var(--ink);border-radius:6px;background:#fff;
  text-decoration:none;font-weight:700;font-size:.9rem;color:var(--ink)}
.na-pager .pg.cur{background:var(--ink);color:#fff}
.na-pager .pg.off{opacity:.4;border-color:#aaa}
.na-pager .pg.dots{border:0;background:none;font-weight:700;padding:.35rem .2rem}

/* --- titolo cliccabile --- */
figcaption .t a{color:inherit;text-decoration:none}
figcaption .t a:hover{text-decoration:underline}

/* --- condivisione --- */
.na-share{margin-top:.6rem}
.na-share summary{cursor:pointer;font-weight:700;font-size:.85rem;list-style:none;
  display:inline-block;padding:.25rem .55rem;border:2px solid var(--ink);border-radius:999px;background:#fff}
.na-share summary::-webkit-details-marker{display:none}
.na-share[open] summary{background:var(--ink);color:#fff}
.na-share-row{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.na-sh{font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;text-decoration:none;
  padding:.3rem .6rem;border:1px solid var(--ink);border-radius:6px;background:var(--paper);color:var(--ink)}
.na-sh:hover{background:var(--gold)}

/* --- pagina foto singola --- */
.na-single{margin:0;background:var(--paper);border:2px solid var(--ink)}
.na-single img{display:block;width:100%;height:auto;border-bottom:2px solid var(--ink)}
.na-single figcaption{padding:1rem}
.na-single h1{font-size:1.3rem;margin:.2rem 0;text-transform:none;letter-spacing:0;font-family:inherit}
.na-single .src{color:#555;font-size:.9rem}
.na-single .n{white-space:pre-wrap;margin:.6rem 0}
.na-single .votes{font-weight:800}