@font-face{font-family:"Newsreader";font-weight:300;font-style:normal;font-display:swap;src:url(../assets/fonts/newsreader-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-weight:300;font-style:italic;font-display:swap;src:url(../assets/fonts/newsreader-latin-300-italic.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-weight:400;font-style:normal;font-display:swap;src:url(../assets/fonts/newsreader-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-weight:400;font-style:italic;font-display:swap;src:url(../assets/fonts/newsreader-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Courier Prime";font-weight:400;font-style:normal;font-display:swap;src:url(../assets/fonts/courier-prime-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Courier Prime";font-weight:700;font-style:normal;font-display:swap;src:url(../assets/fonts/courier-prime-latin-700-normal.woff2) format("woff2")}

:root{
  --muro:#8d9aa6; --muro-alto:#9aa6b1;
  --inchiostro:#15191d; --inchiostro-tenue:#3c454e;
  --carta:#f2efe9; --bollino:#c7382a;
  --filo:rgba(21,25,29,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --muro:#2b333b; --muro-alto:#333c45; --inchiostro:#e8e4dc;
    --inchiostro-tenue:#aab3bb; --carta:#1a1f24; --filo:rgba(232,228,220,.18);
  }
}
:root[data-theme="dark"]{
  --muro:#2b333b; --muro-alto:#333c45; --inchiostro:#e8e4dc;
  --inchiostro-tenue:#aab3bb; --carta:#1a1f24; --filo:rgba(232,228,220,.18);
}
*{box-sizing:border-box}
body{margin:0;background:var(--muro);color:var(--inchiostro);
  font-family:"Newsreader",Georgia,"Times New Roman",serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
a{color:var(--bollino)}
.mono{font-family:"Courier Prime",ui-monospace,SFMono-Regular,Menlo,monospace}

/* navigazione */
.nav{padding-block:18px;display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;font-family:"Courier Prime",ui-monospace,monospace;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  border-bottom:1px solid var(--filo)}
.nav a{color:var(--inchiostro-tenue);text-decoration:none}
.nav a:hover,.nav a[aria-current]{color:var(--bollino)}
.nav .teche{display:flex;gap:14px;flex-wrap:wrap}

header{padding-block:clamp(34px,7vw,76px) clamp(20px,4vw,32px)}
.occhiello{font-family:"Courier Prime",ui-monospace,monospace;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--inchiostro-tenue);
  display:flex;align-items:center;gap:10px;margin:0}
.punto{width:9px;height:9px;border-radius:50%;background:var(--bollino);flex:none}
h1{font-weight:300;font-size:clamp(2.3rem,7vw,4.4rem);line-height:1.02;margin:.28em 0 0;
  text-wrap:balance;letter-spacing:-.015em}
h1 em{font-style:italic;color:var(--inchiostro-tenue);display:block;font-size:.42em;
  letter-spacing:0;margin-top:.5em;font-weight:300}
.scheda{font-family:"Courier Prime",ui-monospace,monospace;font-size:12.5px;line-height:1.9;
  color:var(--inchiostro-tenue);margin:26px 0 0;display:grid;grid-template-columns:auto 1fr;
  gap:0 18px;max-width:30rem}
.scheda dt{text-transform:uppercase;letter-spacing:.1em;opacity:.7}
.scheda dd{margin:0}

/* visore */
.teca{margin-block:clamp(14px,3vw,26px)}
.telaio{position:relative;overflow:hidden;background:var(--muro-alto);
  border:1px solid var(--filo);box-shadow:0 28px 60px -28px rgba(0,0,0,.55);
  margin-inline:auto;cursor:zoom-in;touch-action:pan-y}
.telaio.verticale{aspect-ratio:70/100;max-width:min(100%,560px)}
.telaio.quadrata{aspect-ratio:1;max-width:min(100%,680px)}
.telaio.aperta{cursor:grab;aspect-ratio:auto;max-width:100%;
  height:min(78vh,860px);touch-action:none}
.telaio.aperta.presa{cursor:grabbing}
.telaio img{position:absolute;top:0;left:0;transform-origin:0 0;display:block;
  max-width:none;width:auto;height:auto;pointer-events:none;
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.barra{font-family:"Courier Prime",ui-monospace,monospace;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--inchiostro-tenue);
  margin:14px 0 0;display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}
.tasto{font:inherit;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  background:none;border:1px solid var(--filo);color:var(--inchiostro-tenue);
  padding:5px 12px;border-radius:2px;cursor:pointer}
.tasto:hover{border-color:var(--bollino);color:var(--bollino)}
.tasto:focus-visible,.telaio:focus-visible{outline:2px solid var(--bollino);outline-offset:2px}

/* frammenti cliccabili */
.frammenti{position:absolute;top:0;left:0;transform-origin:0 0;pointer-events:none}
.telaio.aperta .frammenti{pointer-events:auto}
.hotspot{position:absolute;margin:0;padding:0;border:1px dashed rgba(199,56,42,.4);
  background:rgba(199,56,42,.05);cursor:zoom-in;transition:background .15s ease,border-color .15s ease}
.hotspot:hover,.hotspot:focus-visible{border-color:var(--bollino);border-style:solid;background:rgba(199,56,42,.16)}
/* all'apertura della teca i riquadri si accendono per due secondi (piu' forte del
   bordo tratteggiato permanente qui sopra), poi tornano al segno leggero: su
   telefono non c'e' :hover, quindi il bordo tratteggiato resta l'unico indizio
   costante che i frammenti sono cliccabili */
.frammenti.svela .hotspot{border-color:var(--bollino);border-style:solid;background:rgba(199,56,42,.16);
  transition:background .45s ease,border-color .45s ease}

.extra{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;justify-content:center}
.extra-et{width:100%;text-align:center;font-family:"Courier Prime",ui-monospace,monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--inchiostro-tenue);
  margin-bottom:2px}
.extra button{padding:0;border:1px solid var(--filo);background:none;width:52px;height:52px;
  overflow:hidden;border-radius:2px;cursor:zoom-in}
.extra button img{width:100%;height:100%;object-fit:cover;display:block;
  -webkit-user-drag:none;user-select:none}
.extra button:hover{border-color:var(--bollino)}

.lightbox[hidden]{display:none}
.lightbox{position:fixed;inset:0;background:rgba(10,12,14,.92);display:flex;
  align-items:center;justify-content:center;z-index:50;padding:24px}
.lightbox img{max-width:100%;max-height:100%;display:block;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.lightbox .tasto{position:absolute;top:18px;right:18px;background:var(--carta);color:var(--inchiostro)}

main{background:var(--carta);margin-top:clamp(40px,8vw,90px);border-top:1px solid var(--filo)}
.colonne{display:grid;grid-template-columns:minmax(0,1fr) 17rem;gap:clamp(28px,5vw,64px);
  padding-block:clamp(40px,7vw,76px);align-items:start}
.testo{max-width:34rem}
.testo p{margin:0 0 1.15em}
.testo > p:first-child::first-letter{float:left;font-size:3.1em;line-height:.82;
  padding:.06em .1em 0 0;color:var(--bollino);font-weight:300}
blockquote{margin:1.6em 0;padding-left:20px;border-left:2px solid var(--bollino);
  font-style:italic;color:var(--inchiostro-tenue)}
blockquote footer{border:0;padding:0;margin-top:.5em;font-style:normal;
  font-family:"Courier Prime",ui-monospace,monospace;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;display:block}
.rail{font-family:"Courier Prime",ui-monospace,monospace;font-size:12.5px;line-height:1.75;
  color:var(--inchiostro-tenue);border-left:1px solid var(--filo);padding-left:22px}
.rail h2{font-family:inherit;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  margin:0 0 12px;color:var(--inchiostro);font-weight:700}
.rail section + section{margin-top:30px}
.rail p{margin:0}
.rail a{text-decoration:none}
.rail a:hover{text-decoration:underline}
.player{border:0;width:100%;height:152px;border-radius:2px;display:block;background:var(--muro-alto)}
.sotto{margin-top:8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.ripiego{display:block;text-decoration:none;color:inherit;border:1px solid var(--filo);
  padding:16px;border-radius:2px;transition:border-color .18s ease}
.ripiego:hover{border-color:var(--bollino)}
.ripiego .nome{color:var(--inchiostro);display:block;margin-bottom:4px}
.ripiego .dove{opacity:.7;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.onda{display:flex;gap:3px;align-items:flex-end;height:15px;margin-bottom:11px}
.onda i{width:3px;background:var(--bollino);display:block;opacity:.85}

/* indice */
.dentro{font-family:"Courier Prime",ui-monospace,monospace;font-size:12.5px;
  line-height:1.85;color:var(--inchiostro-tenue);max-width:34rem;
  margin:0 0 clamp(26px,5vw,52px)}
.griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(18px,3vw,32px);padding-block:clamp(30px,5vw,56px)}
.card{text-decoration:none;color:inherit;display:block}
.card .foto{background:var(--muro-alto);border:1px solid var(--filo);overflow:hidden;
  aspect-ratio:1;display:block;transition:transform .2s ease, box-shadow .2s ease}
.card .foto img{width:100%;height:100%;object-fit:cover;display:block;
  -webkit-user-drag:none;user-select:none}
.card:hover .foto{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(0,0,0,.6)}
.card .n{font-family:"Courier Prime",ui-monospace,monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--inchiostro-tenue);
  margin:12px 0 2px;display:block}
.card .t{font-size:1.16rem;line-height:1.25;display:block}
.card .t span{color:var(--inchiostro-tenue);font-style:italic;font-size:.85em}

footer.pie{border-top:1px solid var(--filo);padding-block:26px;
  font-family:"Courier Prime",ui-monospace,monospace;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--inchiostro-tenue);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
footer.pie .instagram{display:inline-flex;color:inherit}
@media (max-width:760px){
  .colonne{grid-template-columns:1fr}
  .rail{border-left:none;border-top:1px solid var(--filo);padding-left:0;padding-top:26px;order:-1}
  .telaio.aperta{height:min(68vh,620px)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}