/* ============================================================
   CESARE CESARINI — nuovo sito
   Stile fondato sul design system (design-system/tokens.css)
   ============================================================ */

:root {
  --bianco-calce:   #f6f4ef;
  --bianco-tela:    #fdfcf9;
  --intonaco:       #eae5db;
  --carta-antica:   #e2d2b6;
  --nero-inchiostro: #24211e;
  --bruno-seppia:    #4d3f2d;
  --grigio-fumo:     #73706a;
  --grigio-velo:     #aaa49c;
  --notte:          #2b2530;
  --notte-velo:     #4c4252;
  --gesso:          #efeae4;
  --ocra:           #a26427;
  --cobalto:        #2438a6;
  --rosso-segno:    #c0301c;
  --turchese:       #2fa8a0;

  --bg:             var(--bianco-calce);
  --bg-rialzato:    var(--bianco-tela);
  --bg-alterno:     var(--intonaco);
  --testo:          var(--nero-inchiostro);
  --testo-2:        var(--grigio-fumo);
  --filetto:        var(--grigio-velo);
  --accento:        var(--ocra);
  --accento-attivo: var(--cobalto);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-testo:   "Newsreader", Georgia, serif;
  --font-ui:      "Archivo", "Helvetica Neue", sans-serif;

  --t-0: 1.0625rem;
  --t-1: 1.4rem;
  --t-2: 1.85rem;
  --t-3: 2.5rem;
  --t-4: 3.35rem;
  --t-micro: 0.8125rem;

  --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem;
  --sp-4: 2.5rem; --sp-5: 4rem; --sp-6: 6.5rem;
  --misura-testo: 62ch;
  --margine: clamp(1.5rem, 6vw, 6rem);

  --ombra-opera: 0 1px 2px rgba(36 33 30 / 0.10), 0 8px 28px rgba(36 33 30 / 0.10);
  --transizione: 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  color-scheme: light;
}

html[data-tema="notte"] {
  color-scheme: dark;
  --bg:             var(--notte);
  --bg-rialzato:    var(--notte-velo);
  --bg-alterno:     #241f29;
  --testo:          var(--gesso);
  --testo-2:        #b5adbd;
  --filetto:        #574d5e;
  --accento:        #c8965a;
  --accento-attivo: #8fa0e8;
  --ombra-opera: 0 1px 2px rgba(0 0 0 / 0.4), 0 8px 28px rgba(0 0 0 / 0.35);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* contenuto centrato sui monitor molto larghi */
main, .piede { max-width: 1760px; margin-inline: auto; }

body {
  background: var(--bg);
  color: var(--testo);
  font-family: var(--font-testo);
  font-size: var(--t-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background 400ms ease, color 400ms ease;
}

/* grana d'intonaco */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 40;
  pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.53 0 0 0 0 0.49 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 380; line-height: 1.08; text-wrap: balance; }

a { color: inherit; }

a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

body.blocca-scroll { overflow: hidden; }

/* col menu (o il visore) aperto la testata perde la sfocatura:
   il backdrop-filter renderebbe la testata il contenitore del menu fisso,
   schiacciandolo nei suoi 68px */
body.blocca-scroll .testata-sito {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--bg);
}

.salta {
  position: absolute; left: -200vw; top: 0; z-index: 100;
  font-family: var(--font-ui); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--nero-inchiostro); color: var(--gesso);
  padding: 0.9em 1.4em; text-decoration: none;
}
.salta:focus-visible { left: 0; }

img { max-width: 100%; display: block; }

.etichetta {
  font-family: var(--font-ui);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--testo-2);
}

/* ---------- testata ---------- */
.testata-sito {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) max(var(--margine), env(safe-area-inset-left));
  padding-right: max(var(--margine), env(safe-area-inset-right));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--filetto);
}
.marchio {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 430; letter-spacing: 0.01em;
  text-decoration: none;
}
.marchio span { color: var(--accento); font-style: italic; }

.nav-sito { display: flex; gap: clamp(0.9rem, 2.5vw, 2rem); align-items: baseline; }
.nav-sito a {
  font-family: var(--font-ui); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--testo); text-decoration: none;
  padding-bottom: 5px; position: relative;
}
.nav-sito a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  border-bottom: 2px solid var(--accento-attivo);
  transition: right var(--transizione);
}
.nav-sito a:hover::after, .nav-sito a[aria-current="page"]::after { right: 0; }
.nav-sito a[aria-current="page"] { color: var(--accento-attivo); }

/* comandi come i link del piede: testo quieto, nessun riquadro */
.comandi {
  display: flex; align-items: center;
  gap: clamp(0.9rem, 2.2vw, 1.8rem);
}
.btn-tema, .btn-lingua, .apri-menu {
  font-family: var(--font-ui); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: transparent; color: var(--testo-2);
  border: 0;
  padding: 0.3em 0; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.5em;
  transition: color var(--transizione);
}
.btn-tema:hover, .btn-lingua:hover, .apri-menu:hover { color: var(--accento-attivo); }
.btn-tema .icona { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 50%; background: var(--notte); border: 1px solid var(--filetto); vertical-align: -0.05em; }
html[data-tema="notte"] .btn-tema .icona { background: var(--gesso); }

/* menu mobile */
.apri-menu { display: none; }
@media (max-width: 860px) {
  .nav-sito {
    position: fixed; inset: 0; z-index: 50;
    display: none;
    flex-direction: column; justify-content: center; align-items: center; gap: var(--sp-3);
    background: var(--bg);
    overscroll-behavior: contain;
  }
  .nav-sito.aperta { display: flex; }
  .nav-sito a { font-size: 1.1rem; }
  .apri-menu { display: inline-flex; }
  /* marchio e comandi restano sopra il menu aperto: si può sempre chiudere */
  .marchio, .comandi { position: relative; z-index: 60; }
}

/* ---------- blocchi comuni ---------- */
main { min-height: 70vh; }
.sezione { padding: var(--sp-6) var(--margine); }
.sezione + .sezione { border-top: 1px solid var(--filetto); }
.sezione-alterna { background: var(--bg-alterno); }
.sezione > .etichetta { display: block; margin-bottom: var(--sp-4); }
.max-testo { max-width: var(--misura-testo); }
.max-testo p + p { margin-top: 1em; }
.testo-2 { color: var(--testo-2); }

.titolo-pagina { font-size: clamp(2.2rem, 6vw, var(--t-4)); margin-bottom: var(--sp-3); letter-spacing: -0.015em; }
.sottotitolo { font-size: var(--t-1); font-style: italic; color: var(--testo-2); max-width: 48ch; }

/* hero home */
.hero {
  min-height: 78vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-5) var(--margine);
  position: relative; overflow: hidden;
}
/* un frammento di tela dietro la citazione: la pittura c'è dal primo istante */
.hero-fondo {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.hero-fondo img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.42;
  -webkit-mask-image: linear-gradient(105deg, transparent 0 34%, #000 78%);
  mask-image: linear-gradient(105deg, transparent 0 34%, #000 78%);
}
html[data-tema="notte"] .hero-fondo img { opacity: 0.16; filter: invert(0.92) hue-rotate(180deg); }
@media (max-width: 860px) {
  .hero-fondo img {
    -webkit-mask-image: linear-gradient(180deg, transparent 0 42%, #000 88%);
    mask-image: linear-gradient(180deg, transparent 0 42%, #000 88%);
    opacity: 0.35;
  }
}
.hero h1 {
  font-size: clamp(2.3rem, 6.5vw, 4.4rem);
  font-weight: 340; letter-spacing: -0.015em;
  max-width: 20ch;
  margin-bottom: var(--sp-3);
}
.hero h1 em { font-style: italic; color: var(--accento); font-weight: 380; }
.hero .sottotitolo { margin-bottom: var(--sp-4); }
.segno-asemico { display: block; width: min(380px, 65%); height: 36px; overflow: visible; }
.segno-asemico path {
  fill: none; stroke: var(--accento-attivo); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 1200; stroke-dashoffset: 1200;
  animation: scrivere 2.6s 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
/* ripassata: stessa scrittura, un pixel più in alto a destra, più esile e tenue */
.segno-asemico .tratto-eco {
  stroke-width: 1.05; opacity: 0.35;
  animation-delay: 0.55s; animation-duration: 2.7s;
}
@keyframes scrivere { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .segno-asemico path { animation: none; stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
}

/* citazione critica */
.citazione { max-width: 46rem; border-left: 3px solid var(--accento); padding-left: var(--sp-3); }
.citazione p { font-family: var(--font-display); font-style: italic; font-size: clamp(1.4rem, 3vw, var(--t-2)); font-weight: 350; line-height: 1.28; }
.citazione cite { display: block; margin-top: var(--sp-2); font-family: var(--font-ui); font-style: normal; font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--testo-2); }

/* sala di proiezione — banda scura in entrambi i temi, come le tele nero-viola 2008 */
.sala-video {
  background: var(--notte);
  color: var(--gesso);
  padding: var(--sp-5) var(--margine) var(--sp-6);
}
.sala-video .etichetta { color: #b5adbd; }
.proiezione { max-width: 680px; margin: var(--sp-4) 0 0; }
.schermo {
  position: relative; aspect-ratio: 4 / 3; background: #16131a;
  box-shadow: 0 1px 2px rgba(0 0 0 / 0.5), 0 14px 44px rgba(0 0 0 / 0.45);
}
.schermo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.avvia-video {
  position: absolute; inset: 0; width: 100%;
  border: 0; padding: 0; cursor: pointer; background: #16131a;
}
.avvia-video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; transition: opacity var(--transizione); }
.avvia-video:hover img, .avvia-video:focus-visible img { opacity: 0.75; }
.play-cerchio {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 76px; height: 76px;
  border: 1px solid var(--gesso); border-radius: 50%;
  background: rgba(22 19 26 / 0.55); color: var(--gesso);
  transition: background var(--transizione), color var(--transizione);
}
.play-cerchio svg { margin-left: 4px; }
.avvia-video:hover .play-cerchio, .avvia-video:focus-visible .play-cerchio { background: var(--cobalto); }
.play-testo {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(50% + 58px);
  font-family: var(--font-ui); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gesso);
}
.proiezione figcaption {
  margin-top: var(--sp-2);
  font-family: var(--font-ui); font-size: var(--t-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: #b5adbd;
}

/* bottoni */
.btn {
  display: inline-block;
  font-family: var(--font-ui); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.9em 1.8em; cursor: pointer; text-decoration: none;
  border: 1px solid var(--testo); background: transparent; color: var(--testo);
  transition: background var(--transizione), color var(--transizione);
}
.btn:hover { background: var(--testo); color: var(--bg); }
.btn-filo { border: 0; padding: 0.9em 0; }
.btn-filo::after { content: "→"; margin-left: 0.6em; display: inline-block; transition: transform var(--transizione); }
.btn-filo:hover { background: transparent; color: var(--accento-attivo); }
.btn-filo:hover::after { transform: translateX(6px); }

/* ---------- opere ---------- */
.periodo-blocco { padding: var(--sp-5) var(--margine); border-top: 1px solid var(--filetto); scroll-margin-top: 7.5rem; }
.periodo-testa { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.periodo-testa .anno { font-family: var(--font-display); font-size: var(--t-3); font-weight: 340; color: var(--accento); }
.periodo-testa h2 { font-size: var(--t-2); }
.periodo-intro { max-width: var(--misura-testo); color: var(--testo-2); font-style: italic; margin-bottom: var(--sp-4); }

.griglia-opere {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-3);
}
.griglia-opere figure { margin: 0; }
.griglia-opere button.opera {
  display: block; width: 100%; border: 0; padding: 0; cursor: zoom-in;
  background: var(--bg-rialzato); box-shadow: var(--ombra-opera);
}
/* l'opera intera, mai ritagliata: object-fit contain su fondo tela = passe-partout */
.griglia-opere img {
  width: 100%; height: auto; aspect-ratio: 4/3; object-fit: contain;
  padding: 10px; box-sizing: border-box;
  transition: transform 500ms cubic-bezier(0.22,0.61,0.36,1), opacity 500ms ease;
}
.griglia-opere button.opera:hover img { transform: scale(1.02); }
.griglia-opere figcaption {
  padding: var(--sp-1) 2px 0;
  font-family: var(--font-ui); font-size: var(--t-micro);
  letter-spacing: 0.08em; color: var(--testo-2);
  font-variant-numeric: tabular-nums;
}

/* barra dei periodi */
.barra-periodi {
  position: sticky; top: 3.6rem; z-index: 20;
  display: flex; gap: var(--sp-1); flex-wrap: wrap;
  padding: var(--sp-2) var(--margine);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--filetto);
}
.barra-periodi a {
  font-family: var(--font-ui); font-size: var(--t-micro); letter-spacing: 0.12em;
  padding: 0.5em 1.1em; border: 1px solid var(--filetto);
  color: var(--testo-2); text-decoration: none;
  transition: border-color var(--transizione), color var(--transizione), background var(--transizione);
}
.barra-periodi a:hover { border-color: var(--testo); color: var(--testo); }
.barra-periodi a[aria-current="true"] {
  background: var(--nero-inchiostro); border-color: var(--nero-inchiostro); color: var(--gesso);
}
html[data-tema="notte"] .barra-periodi a[aria-current="true"] {
  background: var(--gesso); border-color: var(--gesso); color: var(--notte);
}
/* quando la barra scorre in orizzontale (telefono), i lati ancora nascosti
   sfumano: il segnale che c'è altro oltre il bordo. Attributo gestito da sito.js */
.barra-periodi { --sfuma-sx: #000; --sfuma-dx: #000; }
.barra-periodi[data-sfuma~="sx"] { --sfuma-sx: transparent; }
.barra-periodi[data-sfuma~="dx"] { --sfuma-dx: transparent; }
.barra-periodi[data-sfuma] {
  -webkit-mask-image: linear-gradient(to right, var(--sfuma-sx), #000 2.4rem, #000 calc(100% - 2.4rem), var(--sfuma-dx));
  mask-image: linear-gradient(to right, var(--sfuma-sx), #000 2.4rem, #000 calc(100% - 2.4rem), var(--sfuma-dx));
}

/* lightbox */
dialog.lightbox {
  border: 0; padding: 0; margin: auto;
  max-width: min(92vw, 1500px); max-height: 92vh;
  background: transparent; overflow: visible;
}
dialog.lightbox::backdrop { background: rgba(20 17 22 / 0.88); backdrop-filter: blur(4px); }
dialog.lightbox img { max-width: min(92vw, 1500px); max-height: 84vh; width: auto; height: auto; margin: 0 auto; box-shadow: 0 20px 80px rgba(0 0 0 / 0.5); }
dialog.lightbox .didascalia {
  text-align: center; color: #efeae4; margin-top: var(--sp-2);
  font-family: var(--font-ui); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase;
}
dialog.lightbox { overscroll-behavior: contain; }
dialog.lightbox button.chiudi {
  position: fixed; top: 1rem; right: 1.4rem;
  background: none; border: 0; color: #efeae4; font-size: 2rem; cursor: pointer;
  font-family: var(--font-ui);
}
dialog.lightbox .prec, dialog.lightbox .succ {
  position: fixed; top: 50%; transform: translateY(-50%);
  background: rgba(20 17 22 / 0.45); border: 1px solid rgba(239 234 228 / 0.3);
  color: #efeae4; font-size: 1.6rem; line-height: 1;
  width: 2.6rem; height: 2.6rem; cursor: pointer;
  transition: background var(--transizione), border-color var(--transizione);
}
dialog.lightbox .prec:hover, dialog.lightbox .succ:hover { background: rgba(20 17 22 / 0.8); border-color: #efeae4; }
dialog.lightbox .prec { left: 1rem; }
dialog.lightbox .succ { right: 1rem; }

/* ---------- biografia ---------- */
.bio-colonna { max-width: var(--misura-testo); }
.bio-colonna h2 { font-size: var(--t-2); margin: var(--sp-5) 0 var(--sp-2); }
.bio-colonna h2:first-child { margin-top: 0; }
.bio-colonna p + p { margin-top: 1em; }
.bio-colonna .anno-inline { color: var(--accento); font-family: var(--font-ui); font-size: var(--t-micro); letter-spacing: 0.12em; margin-right: 0.6em; }

/* ---------- recensioni ---------- */
.lista-recensioni { list-style: none; max-width: 56rem; }
.lista-recensioni li { border-top: 1px solid var(--filetto); }
.lista-recensioni li:last-child { border-bottom: 1px solid var(--filetto); }
.lista-recensioni a {
  display: grid; grid-template-columns: 6.5rem 1fr auto; gap: var(--sp-3); align-items: baseline;
  padding: 0.9rem 0.4rem; text-decoration: none;
  transition: background var(--transizione);
}
.lista-recensioni a:hover { background: var(--bg-rialzato); }
.lista-recensioni .data { font-family: var(--font-ui); font-size: var(--t-micro); letter-spacing: 0.1em; color: var(--accento); font-variant-numeric: tabular-nums; }
.lista-recensioni li.decennio {
  border-top: 0; padding: var(--sp-4) 0.4rem var(--sp-1);
  font-family: var(--font-display); font-size: var(--t-1); font-style: italic; color: var(--testo-2);
}
.lista-recensioni .testata-g { font-family: var(--font-display); font-size: 1.15rem; }
.lista-recensioni .vedi { font-family: var(--font-ui); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--testo-2); }
@media (max-width: 640px) {
  .lista-recensioni a { grid-template-columns: 1fr auto; }
  .lista-recensioni .data { grid-column: 1 / -1; }
}

.ritagli-evidenza { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.ritaglio {
  background: var(--carta-antica); color: var(--bruno-seppia);
  padding: var(--sp-3); box-shadow: var(--ombra-opera);
}
.ritaglio:nth-child(odd) { transform: rotate(-0.4deg); }
.ritaglio:nth-child(even) { transform: rotate(0.35deg); }
.ritaglio .testata-r { font-family: var(--font-ui); font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 2px solid var(--bruno-seppia); padding-bottom: 6px; margin-bottom: var(--sp-2); display: flex; justify-content: space-between; gap: 1rem; }
.ritaglio blockquote { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.3; }
.ritaglio .firma-critico { margin-top: var(--sp-2); font-size: 0.9rem; font-style: italic; }

/* ---------- contatti ---------- */
.scheda-contatti { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); align-items: start; }
.scheda-contatti .voce { border-top: 1px solid var(--filetto); padding-top: var(--sp-2); }
.scheda-contatti .voce .etichetta { display: block; margin-bottom: var(--sp-1); }
.scheda-contatti .voce a { font-family: var(--font-display); font-size: var(--t-1); text-decoration: none; }
.scheda-contatti .voce a:hover { color: var(--accento-attivo); }

/* immagine a tutta larghezza */
.respiro { padding: 0; }
.respiro img { width: 100%; max-height: 66vh; object-fit: cover; }

/* ---------- piede ---------- */
.griglia-atelier {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-3);
}
.griglia-atelier img { width: 100%; aspect-ratio: 4/3; object-fit: cover; box-shadow: var(--ombra-opera); }

.piede {
  border-top: 1px solid var(--filetto);
  padding: var(--sp-5) var(--margine);
  padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom));
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
}
.piede-nav { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.piede-nav a {
  font-family: var(--font-ui); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--testo-2); text-decoration: none;
  transition: color var(--transizione);
}
.piede-nav a:hover { color: var(--accento-attivo); }
.piede img.firma { height: 42px; mix-blend-mode: multiply; }
html[data-tema="notte"] .piede img.firma { mix-blend-mode: screen; filter: invert(1); }

/* reveal in scroll */
.rivela { opacity: 0; transform: translateY(14px); transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22,0.61,0.36,1); }
.rivela.visibile { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rivela { opacity: 1; transform: none; transition: none; } }

:focus-visible { outline: 2px solid var(--accento-attivo); outline-offset: 3px; }

/* ============================================================
   RESPONSIVE — telefono, tablet, pc
   ============================================================ */

/* tablet e portatili stretti */
@media (max-width: 1100px) {
  .barra-periodi { top: 3.5rem; }
}

/* telefono */
@media (max-width: 520px) {
  :root { --t-0: 1rem; }

  .testata-sito { padding: 0.7rem 1.1rem; gap: var(--sp-1); }
  .marchio { font-size: 1.05rem; }
  .btn-tema, .btn-lingua, .apri-menu { letter-spacing: 0.08em; }
  /* su schermo stretto il tema parla solo col pallino */
  .btn-tema-testo { display: none; }
  .btn-tema .icona { width: 0.95em; height: 0.95em; }

  .sezione, .periodo-blocco { padding-block: var(--sp-5); }
  .hero { min-height: 66vh; }

  .barra-periodi { top: 3rem; padding: 0.7rem 1.1rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .barra-periodi::-webkit-scrollbar { display: none; }
  .barra-periodi a { padding: 0.45em 0.8em; flex: 0 0 auto; }

  /* opere su due colonne compatte */
  .griglia-opere { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  .griglia-opere figcaption { font-size: 0.72rem; letter-spacing: 0.05em; }

  .citazione { padding-left: var(--sp-2); }
  .ritaglio { transform: none !important; }

  .lista-recensioni .testata-g { font-size: 1.02rem; }
  .lista-recensioni .vedi { display: none; }

  dialog.lightbox button.chiudi { font-size: 2.6rem; padding: 0.2em 0.45em; }
  dialog.lightbox img { max-height: 76vh; }

  .piede { padding: var(--sp-4) 1.1rem; }
  .piede img.firma { height: 34px; }
}

/* touch: niente effetti hover appiccicosi, bersagli comodi */
@media (hover: none) {
  .griglia-opere button.opera:hover img { transform: none; }
  .nav-sito a { padding-block: 0.4em; }
}

/* schermi molto grandi: griglia più ariosa */
@media (min-width: 1500px) {
  .griglia-opere { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); }
}