/* Stile del sito LuricFrame.
   I colori e le misure principali sono qui sotto, in :root. */

@font-face {
  font-family: "Jost";
  src: url("font/jost.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --sfondo: #f7f6f3;
  --sfondo-alt: #ecebe6;
  --carta: #ffffff;
  --testo: #1c1c1a;
  --testo-tenue: #5f5e59;
  --linea: #d9d7d0;
  --accento: #9a4b26;
  --accento-scuro: #7a3a1c;
  --scuro: #161615;
  --evidenzia: #fff1a8;

  --carattere: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --larghezza: 1180px;
  --larghezza-ampia: 1600px;
  --margine: clamp(16px, 4vw, 48px);
  --spazio: clamp(56px, 9vw, 120px);
  --testata: 76px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--carattere);
  font-size: 1.0625rem;
  font-weight: 380;
  line-height: 1.7;
}

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

a { color: inherit; }

h1, h2, h3 {
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); font-weight: 350; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 350; }
h3 { font-size: 1.2rem; }

p, ul { margin: 0 0 1.1em; }

code {
  font-size: 0.9em;
  background: var(--sfondo-alt);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

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

.nascosto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.salta {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100;
  background: var(--scuro);
  color: #fff;
  padding: 10px 16px;
}
.salta:focus { top: 12px; }

/* Segnaposto: testi da completare, ben visibili */
.segnaposto {
  background: var(--evidenzia);
  color: var(--testo);
  padding: 0 0.25em;
  border-radius: 2px;
}

.contenitore {
  max-width: var(--larghezza);
  margin-inline: auto;
  padding-inline: var(--margine);
}
.contenitore-largo {
  max-width: var(--larghezza-ampia);
  margin-inline: auto;
  padding-inline: var(--margine);
}
.sezione { padding-block: var(--spazio); }
.sezione + .sezione { padding-top: 0; }
.fascia, .sezione + .fascia { padding-top: var(--spazio); }
.fascia + .sezione { padding-top: var(--spazio); }

.testo { max-width: 40em; }
.testo-lungo h2 { font-size: 1.5rem; margin-top: 1.6em; }

.etichetta {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accento);
  margin-bottom: 1em;
}
.etichetta a { text-decoration: none; }
.etichetta a:hover { text-decoration: underline; }

.nota { font-size: 0.92rem; color: var(--testo-tenue); }

/* Pulsanti e collegamenti */
.pulsante {
  display: inline-block;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--accento);
  border: 1px solid var(--accento);
  padding: 0.95em 1.8em;
  cursor: pointer;
  transition: background-color 0.15s;
}
.pulsante:hover { background: var(--accento-scuro); border-color: var(--accento-scuro); }
.pulsante-secondario { background: transparent; color: var(--testo); border-color: var(--testo); }
.pulsante-secondario:hover { background: var(--testo); border-color: var(--testo); color: #fff; }
.pulsante-chiaro { background: transparent; border-color: #fff; color: #fff; }
.pulsante-chiaro:hover { background: #fff; border-color: #fff; color: var(--testo); }

.collegamento {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.collegamento:hover { color: var(--accento); }

/* Testata e menu */
.testata {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--sfondo);
  border-bottom: 1px solid var(--linea);
}
.testata-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--testata);
  max-width: var(--larghezza-ampia);
  margin-inline: auto;
  padding-inline: var(--margine);
}
.marchio { display: block; text-decoration: none; }
.marchio img { height: 46px; width: auto; }
.marchio-testo { font-size: 1.3rem; letter-spacing: 0.2em; text-transform: uppercase; }

.menu ul {
  display: flex;
  gap: clamp(18px, 2.6vw, 40px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu a {
  font-size: 0.85rem;
  font-weight: 450;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 1px solid transparent;
}
.menu a:hover { border-bottom-color: var(--linea); }
.menu a[aria-current="page"] { border-bottom-color: var(--accento); }

.apri-menu { display: none; }

@media (max-width: 820px) {
  .js .apri-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    font: inherit;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: none;
    border: 0;
    color: var(--testo);
    padding: 10px 0;
    cursor: pointer;
  }
  .apri-menu-icona, .apri-menu-icona::before, .apri-menu-icona::after {
    display: block;
    width: 22px; height: 1.5px;
    background: currentColor;
    position: relative;
  }
  .apri-menu-icona::before, .apri-menu-icona::after { content: ""; position: absolute; }
  .apri-menu-icona::before { top: -7px; }
  .apri-menu-icona::after { top: 7px; }
  .apri-menu[aria-expanded="true"] .apri-menu-icona { background: transparent; }
  .apri-menu[aria-expanded="true"] .apri-menu-icona::before { top: 0; transform: rotate(45deg); }
  .apri-menu[aria-expanded="true"] .apri-menu-icona::after { top: 0; transform: rotate(-45deg); }

  .js .menu {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: var(--testata);
    background: var(--sfondo);
    border-bottom: 1px solid var(--linea);
    padding: 8px var(--margine) 24px;
  }
  .js .menu.aperto { display: block; }
  .js .menu ul { flex-direction: column; gap: 0; }
  .js .menu a { display: block; padding: 14px 0; font-size: 0.95rem; border-bottom: 1px solid var(--linea); }
  .js .menu a[aria-current="page"] { color: var(--accento); border-bottom-color: var(--linea); }

  /* Senza JavaScript il menu resta visibile su due righe */
  html:not(.js) .testata-interno { flex-wrap: wrap; height: auto; padding-block: 12px; }
  html:not(.js) .menu ul { flex-wrap: wrap; gap: 4px 18px; }
  .marchio img { height: 38px; }
}

/* Segnaposto delle fotografie */
.foto-mancante {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 60%),
    var(--sfondo-alt);
  border: 1px dashed #b9b6ac;
  color: var(--testo-tenue);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 16px;
}

/* Home: fotografia di apertura.
   La foto si vede sempre intera: viene ridotta finché sta tutta nello schermo. */
.apertura {
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background: var(--scuro);
}
/* Sullo sfondo, ai lati, la stessa foto ingrandita, scurita e leggermente sfocata */
.apertura::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: var(--sfondo-apertura, none) center / cover no-repeat;
  filter: blur(14px) brightness(0.45);
  transform: scale(1.15);
}
.apertura-cornice {
  position: relative;
  z-index: 1;
  max-width: 100%;
}
.apertura-foto {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100svh - var(--testata));
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.45);
}
.apertura .foto-mancante.apertura-foto {
  width: 100vw;
  height: 70svh;
  max-height: none;
  aspect-ratio: auto;
  background: linear-gradient(160deg, #3b3d3a, #1d1e1c);
  border: 0;
  color: rgba(255,255,255,0.6);
  align-items: flex-start;
  padding-top: 24px;
}
.apertura-testo {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(28px, 5vw, 72px) clamp(20px, 4vw, 56px);
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
.apertura-testo h1 {
  max-width: 16em;
  font-size: clamp(1.9rem, 4.2vw, 3.3rem);
  font-weight: 300;
  text-shadow: 0 1px 20px rgba(0,0,0,0.3);
}
/* Su schermi stretti la frase va sotto la foto, per non coprirla */
@media (max-width: 700px) {
  .apertura-foto { width: 100%; }
  .apertura-testo {
    position: static;
    background: none;
    padding: 24px var(--margine) 32px;
  }
  .apertura-testo h1 { font-size: 1.8rem; }
}

/* Home: presentazione */
.presentazione {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.ritratto {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.intestazione-sezione {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.intestazione-sezione h2 { margin: 0; }

/* Schede (gallerie e stampe) */
.schede {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 3vw, 40px);
  list-style: none;
  padding: 0;
  margin: 0;
}
.scheda a { text-decoration: none; display: block; }
.scheda-foto { overflow: hidden; background: var(--sfondo-alt); margin-bottom: 16px; }
.scheda-foto img, .scheda-foto .foto-mancante {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: opacity 0.2s;
}
.scheda-stampa .scheda-foto img { aspect-ratio: auto; object-fit: contain; }
.scheda a:hover img { opacity: 0.88; }
.scheda h3 { margin-bottom: 0.2em; }
.scheda-info { font-size: 0.9rem; color: var(--testo-tenue); margin-bottom: 0.8em; }

/* Portfolio: titoli delle categorie (Paesaggistica, Ritratti) */
.titolo-categoria {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accento);
  margin: 0 0 20px;
}
.titolo-ritratti { margin-top: clamp(56px, 8vw, 96px); }
.schede-album { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
@media (min-width: 901px) {
  .schede-album { grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 28px); }
}
.schede-album .scheda-foto img, .schede-album .scheda-foto .foto-mancante { aspect-ratio: 4 / 3; }
.schede-album .scheda h3 { font-size: 1.2rem; }
.js .schede-album .scheda {
  animation: entrata-scheda 0.7s ease-out both;
  animation-delay: calc(0.1s + var(--i, 0) * 0.12s);
}

/* Portfolio: carosello delle gallerie */
.carosello-binario {
  --spazio-schede: clamp(16px, 2.2vw, 28px);
  display: flex;
  gap: var(--spazio-schede);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  list-style: none;
  margin: 0 calc(-1 * var(--margine));
  padding: 4px var(--margine) 8px;
  scroll-padding-inline: var(--margine);
}
.carosello-binario::-webkit-scrollbar { display: none; }
/* Tre gallerie visibili sul computer, due sul tablet, una (e un pezzo della successiva) sullo smartphone */
.carosello-binario .scheda {
  flex: 0 0 calc((100% - 2 * var(--spazio-schede)) / 3);
  scroll-snap-align: start;
}
@media (max-width: 900px) {
  .carosello-binario .scheda { flex-basis: calc((100% - var(--spazio-schede)) / 2); }
}
@media (max-width: 600px) {
  .carosello-binario .scheda { flex-basis: 80%; }
}
.carosello-binario .scheda-foto img,
.carosello-binario .scheda-foto .foto-mancante { aspect-ratio: 4 / 3; }
.carosello-binario .scheda h3 { font-size: 1.2rem; }
.carosello-comandi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}
.carosello-conteggio { font-size: 0.9rem; color: var(--testo-tenue); min-width: 3.5em; text-align: center; }
.carosello-freccia {
  width: 52px;
  height: 52px;
  border: 1px solid var(--testo);
  border-radius: 50%;
  background: transparent;
  color: var(--testo);
  font: inherit;
  font-size: 1.8rem;
  line-height: 1;
  padding-bottom: 4px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.carosello-freccia:hover { background: var(--testo); color: #fff; }
html:not(.js) .carosello-comandi { display: none; }

/* Entrando nella pagina, le gallerie salgono e compaiono una dopo l'altra,
   mentre la foto di copertina si assesta con un leggero zoom all'indietro */
.js .carosello-binario .scheda,
.js .scheda-stampa {
  animation: entrata-scheda 0.7s ease-out both;
  animation-delay: calc(0.1s + var(--i, 0) * 0.12s);
}
.js .carosello-binario .scheda-foto img,
.js .scheda-stampa .scheda-foto img {
  animation: entrata-copertina 1.4s ease-out both;
  animation-delay: calc(0.1s + var(--i, 0) * 0.12s);
}
@keyframes entrata-scheda { from { opacity: 0; transform: translateY(24px); } }
@keyframes entrata-copertina { from { transform: scale(1.08); } }

/* Home: fascia stampe */
.fascia { background: var(--carta); border-block: 1px solid var(--linea); padding-bottom: var(--spazio); }
.fascia-interno {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}

.invito { text-align: center; }
.invito p { max-width: 36em; margin-inline: auto; margin-bottom: 1.8em; }

/* Intestazione delle pagine interne */
.intestazione-pagina { margin-bottom: clamp(32px, 5vw, 64px); }
.intestazione-pagina .testo { color: var(--testo-tenue); }

/* Griglia delle gallerie: righe della stessa altezza, foto mai tagliate */
.griglia {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 1vw, 12px);
  list-style: none;
  padding: 0;
  margin: 0;
}
.griglia li {
  flex: var(--r) 1 calc(var(--r) * 300px);
}
.griglia li.griglia-riempitivo { flex: 20 1 0; height: 0; }
.griglia a { display: block; background: var(--sfondo-alt); }
.griglia img { width: 100%; height: auto; transition: opacity 0.2s; }
.griglia a:hover img { opacity: 0.9; }
@media (max-width: 600px) {
  .griglia li { flex-basis: calc(var(--r) * 170px); }
}

.griglia-vuota {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.naviga-gallerie {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(40px, 6vw, 80px);
  padding-top: 24px;
  border-top: 1px solid var(--linea);
  font-size: 0.95rem;
}
.naviga-gallerie a { text-decoration: none; }
.naviga-gallerie a:hover { color: var(--accento); }

/* Chi sono */
.chi-sono {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.chi-sono-foto { position: sticky; top: calc(var(--testata) + 32px); }

/* Contatti */
.contatti {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.contatti-riquadro {
  background: var(--carta);
  border: 1px solid var(--linea);
  padding: clamp(24px, 4vw, 48px);
}
.contatti-email { font-size: clamp(1.2rem, 2.4vw, 1.6rem); word-break: break-word; margin-bottom: 0.6em; }
.contatti-email a { text-decoration: none; border-bottom: 1px solid var(--linea); }
.contatti-email a:hover { border-color: var(--accento); }
.contatti-azioni { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 20px; }
.contatti-altri { list-style: none; padding: 20px 0 0; margin: 0; border-top: 1px solid var(--linea); }
.contatti-social { grid-column: 2; }
.icona { width: 1.25em; height: 1.25em; flex: none; }
.pulsante-instagram {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 1.15rem;
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
  padding-bottom: 4px;
}
.pulsante-instagram .icona { width: 32px; height: 32px; }
.pulsante-instagram:hover { color: var(--accento); border-color: var(--accento); }
.piede .instagram { display: inline-flex; align-items: center; gap: 8px; }
.copia-esito { margin-left: 12px; font-size: 0.9rem; color: var(--testo-tenue); }

/* Piede */
.piede {
  background: var(--scuro);
  color: #d8d6cf;
  padding-block: 56px 32px;
  font-size: 0.95rem;
}
.piede a { text-decoration: none; }
.piede a:hover { color: #fff; text-decoration: underline; }
.piede-interno {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.piede-nome { color: #fff; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.3em; }
.piede-contatti { list-style: none; padding: 0; text-align: right; }
.piede-legale {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #34342f;
  font-size: 0.82rem;
  color: #a19f97;
}
.piede-legale p { margin-bottom: 0.4em; }
.piede .segnaposto { color: var(--testo); }

/* Schermi stretti */
@media (max-width: 820px) {
  .presentazione, .fascia-interno, .chi-sono, .contatti { grid-template-columns: 1fr; }
  .contatti-social { grid-column: auto; }
  .presentazione-foto, .chi-sono-foto { max-width: 340px; position: static; }
  .piede-contatti { text-align: left; }
}

/* Visualizzazione a schermo intero */
.visore {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-rows: 1fr auto;
  background: #0e0e0d;
  color: #eee;
}
.visore[hidden] { display: none; }
.visore-scena {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 56px clamp(8px, 6vw, 88px) 8px;
  touch-action: pan-y pinch-zoom;
}
.visore-scena img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.visore-piede {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px clamp(16px, 4vw, 40px) 18px;
  font-size: 0.92rem;
}
.visore-conteggio { color: #9d9b94; white-space: nowrap; }
.visore button {
  position: absolute;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  padding: 14px;
  opacity: 0.8;
}
.visore button:hover, .visore button:focus-visible { opacity: 1; }
.visore-chiudi { top: 6px; right: 8px; font-size: 2rem; }
.visore-prec, .visore-succ { top: 50%; transform: translateY(-50%); font-size: 3.4rem; padding: 18px 16px; }
.visore-prec { left: 4px; }
.visore-succ { right: 4px; }
@media (max-width: 600px) {
  .visore-prec, .visore-succ { top: auto; bottom: 4px; transform: none; }
  .visore-piede { padding-inline: 64px; justify-content: center; flex-direction: column; gap: 2px; text-align: center; }
}
body.visore-aperto { overflow: hidden; }

/* Animazione all'apertura della pagina.
   Home: la foto compare lentamente con un leggero zoom all'indietro, poi salgono frase e pulsante.
   Altre pagine: breve dissolvenza del contenuto.
   Per cambiare la velocità modifica i secondi (s) qui sotto. */
.js .apertura-foto {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.2s ease, transform 1.8s ease;
}
.js .apertura::before { opacity: 0; transition: opacity 1.6s ease; }
.js .apertura-testo > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s ease, transform 0.8s ease, background-color 0.15s, color 0.15s;
}
.js .apertura.caricata .apertura-foto,
.js .apertura.caricata .apertura-testo > * { opacity: 1; transform: none; }
.js .apertura.caricata::before { opacity: 1; }
.js .apertura.caricata .apertura-testo h1 { transition-delay: 0.5s, 0.5s, 0s, 0s; }
.js .apertura.caricata .apertura-testo .pulsante { transition-delay: 0.75s, 0.75s, 0s, 0s; }
/* Sicurezza: se lo script non parte, dopo 4 secondi tutto diventa comunque visibile */
.js .apertura:not(.caricata) .apertura-foto,
.js .apertura:not(.caricata) .apertura-testo > * { animation: rivela 0s 4s forwards; }
.js .apertura:not(.caricata)::before { animation: rivela 0s 4s forwards; }
@keyframes rivela { to { opacity: 1; transform: none; } }

/* Il logo entra da sinistra a ogni pagina che si apre o si ricarica */
.js .marchio { animation: entrata-logo 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
@keyframes entrata-logo { from { opacity: 0; transform: translateX(-60px); } }

.js body:not(.pagina-home) main { animation: comparsa 0.5s ease both; }
@keyframes comparsa { from { opacity: 0; transform: translateY(8px); } }

/* Chi ha chiesto al computer di ridurre le animazioni non le vede */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .apertura-foto, .js .apertura-testo > *, .js .apertura::before { opacity: 1; transform: none; }
  .carosello-binario { scroll-behavior: auto; }
}