/* ============================================================================
   Martina Campagnolo — illustratrice
   Foglio di stile del sito. Caricato DOPO Bootstrap e GLightbox, quindi ne
   sovrascrive liberamente i valori di base.
   L'impaginazione è di Bootstrap (.container-xl → .row → .col-*): qui ci sono
   i colori, i caratteri e l'aspetto dei singoli elementi, non la griglia.
   ========================================================================== */

/* ------------------------------ 1. Variabili ------------------------------ */

:root {
  /* Colori ripresi dalle illustrazioni: carta calda, inchiostro, azzurro
     d'acquerello e ocra. */
  --carta: #fbf7f1;
  --carta-scura: #f3ebdf;
  --inchiostro: #2b2724;
  --inchiostro-tot: #5e574f;
  --azzurro: #6e8a9c;
  --ocra: #b9873f;
  --bordo: rgba(43, 39, 36, 0.12);

  --titolo: "Fraunces", Georgia, "Times New Roman", serif;
  --testo:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;

  /* Respiro verticale delle sezioni. */
  --respiro: clamp(4rem, 9vw, 8.5rem);
}

/* Il sito è pensato su carta chiara: niente inversione automatica. */
html {
  color-scheme: light;
}

/* ------------------------------ 2. Impianto ------------------------------- */

body {
  background-color: var(--carta);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* Lo scorrimento verso le ancore parte sotto la testata fissa.
   overflow-x: clip e non hidden: hidden creerebbe un contenitore di
   scorrimento e la testata smetterebbe di restare appiccicata in alto. */
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

:target {
  scroll-margin-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.container-xl {
  padding-inline: clamp(1.15rem, 4vw, 3rem);
}

h1,
h2,
h3 {
  font-family: var(--titolo);
  font-weight: 400;
  font-variation-settings: "opsz" 120;
  letter-spacing: -0.01em;
  line-height: 1.06;
}

a {
  color: inherit;
  text-decoration-color: var(--bordo);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  transition:
    color 0.25s ease,
    text-decoration-color 0.25s ease;
}

a:hover,
a:focus-visible {
  color: var(--azzurro);
  text-decoration-color: currentColor;
}

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

/* Scorciatoia da tastiera, visibile solo quando riceve il fuoco. */
.salta-al-contenuto {
  position: absolute;
  left: 50%;
  top: 0.5rem;
  z-index: 100;
  transform: translate(-50%, -300%);
  padding: 0.6rem 1.1rem;
  background: var(--inchiostro);
  color: var(--carta);
  font-size: 0.85rem;
  text-decoration: none;
  border-radius: 999px;
}

.salta-al-contenuto:focus-visible {
  transform: translate(-50%, 0);
  color: var(--carta);
}

/* ------------------------------ 3. Testata ------------------------------- */

.testata {
  /* Quanto è avanzata la comparsa del nome e del logo: 0 in cima alla pagina,
     1 a comparsa finita. La scrive js/sito.js seguendo lo scorrimento, ed è un
     numero puro: le misure che ne derivano stanno tutte qui sotto. */
  --comparsa: 0;
  /* Lo scorrimento entro cui la comparsa si compie, da tarare qui. Va in px:
     js/sito.js la legge come numero, quindi altre unità sarebbero fraintese. */
  --comparsa-corsa: 80px;

  /* Il respiro sopra e sotto in cima alla pagina, e quello a comparsa finita. */
  --respiro-alto: clamp(0.9rem, 1.9vw, 1.2rem);
  --respiro-basso: clamp(0.45rem, 1.1vw, 0.7rem);
  --respiro-pieno: clamp(0.85rem, 2vw, 1.35rem);

  /* Il posto che si fa per il nome e per il logo mentre la comparsa avanza. */
  --nome-corpo: clamp(1rem, 1.6vw, 1.2rem);
  /* Il fattore sta sopra l'interlinea del testo (1.75): essendo un max-height
     non gonfia la riga, mentre se stesse sotto taglierebbe il nome. */
  --nome-altezza: calc(var(--nome-corpo) * 1.9);
  --logo-altezza: clamp(2.5rem, 5.5vw, 3.25rem);

  position: sticky;
  top: 0;
  z-index: 30;
  padding-block: var(--respiro-pieno);
  /* Prima il colore pieno, poi quello velato: color-mix è arrivato solo con
     iOS 16.2, e senza la riga di scorta i browser precedenti resterebbero con
     la testata trasparente e il testo sopra le illustrazioni. */
  background: var(--carta);
  background: color-mix(in srgb, var(--carta) 88%, transparent);
  /* Il prefisso serve a Safari, che ha reso sfocatura non prefissata solo
     dalla versione 18. */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  /* Il respiro non ha più una transizione sua: segue lo scorrimento, e una
     transizione lo farebbe arrivare in ritardo rispetto al dito. */
  transition: border-color 0.3s ease;
}

/* Classe aggiunta da js/sito.js dopo i primi pixel di scorrimento. */
.testata--staccata {
  border-bottom-color: var(--bordo);
}

.testata__nome {
  font-family: var(--titolo);
  font-variation-settings: "opsz" 40;
  font-size: var(--nome-corpo);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}

/* In cima alla pagina il nome è già scritto grande in apertura: nella testata
   sarebbe detto due volte. Finché il titolo dell'apertura è in vista il nome e
   il logo non occupano posto, e la testata si tiene bassa; man mano che quel
   titolo scorre via la testata cresce e i due entrano.

   La crescita è legata allo scorrimento e non a un interruttore, e per un
   motivo preciso: la testata è sticky, quindi occupa spazio nel flusso, e
   crescendo spinge in giù il titolo dell'apertura. Un interruttore che guardi
   proprio quel titolo si riaccende e si rispegne da solo — il titolo esce, la
   testata cresce, il titolo rientra — e sullo schermo si vede tremolare. Qui
   invece il posto si fa poco per volta mentre il dito scorre, e il nome si
   accende solo dopo, a spazio ormai fatto: quando compare non sposta più
   niente, e non c'è nessuna soglia da riattraversare.

   Tutto sotto la classe .js: senza JavaScript --comparsa resterebbe a zero e
   nome e logo sarebbero nascosti per sempre, quindi lì restano visibili. */

/* Nello stato basso il respiro sopra resta più generoso di quello sotto: il
   menu da solo, appiccicato al bordo dello schermo, stava scomodo. */
.js .testata {
  padding-top: calc(
    var(--respiro-alto) + var(--comparsa) * (var(--respiro-pieno) - var(--respiro-alto))
  );
  padding-bottom: calc(
    var(--respiro-basso) + var(--comparsa) * (var(--respiro-pieno) - var(--respiro-basso))
  );
}

/* Prima si fa il posto, poi si accende. L'altezza segue la comparsa dall'inizio
   alla fine, l'opacità parte a due terzi: fino a lì il contenuto è lì ma non si
   vede, e quello che cresce è solo spazio vuoto. */
.js .testata__col-nome,
.js .testata__col-logo {
  overflow: hidden;
  opacity: calc((var(--comparsa) - 0.66) * 3);
}

.js .testata__col-nome {
  max-height: calc(var(--comparsa) * var(--nome-altezza));
}

.js .testata__col-logo {
  max-height: calc(var(--comparsa) * var(--logo-altezza));
}

/* A comparsa ferma a zero il nome è un collegamento invisibile ma ancora
   raggiungibile con il tabulatore: visibility lo toglie di mezzo davvero, e a
   differenza di display non cambia l'ingombro, quindi non rimette in moto
   l'altezza. */
.js .testata--comparsa-ferma .testata__col-nome,
.js .testata--comparsa-ferma .testata__col-logo {
  visibility: hidden;
}

/* È il logo a dare l'altezza alla testata: è più alto della colonna con il nome
   e il menu, quindi è lui l'elemento che detta la misura della barra. L'altezza
   è dichiarata e la larghezza deriva da quella, perché il contrario — altezza
   al 100% del contenitore — farebbe misurare alla colonna la larghezza piena
   del file, che è di 500px. */
.testata__logo {
  display: block;
  height: var(--logo-altezza);
  width: auto;
}

.testata__nav {
  display: flex;
  gap: clamp(1rem, 2.6vw, 2.25rem);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.testata__nav a {
  text-decoration: none;
  color: var(--inchiostro-tot);
  padding-block: 0.2rem;
  border-bottom: 1px solid transparent;
}

.testata__nav a:hover,
.testata__nav a:focus-visible {
  color: var(--inchiostro);
  border-bottom-color: var(--azzurro);
}

/* Sul telefono la testata è su due righe: si stringe il passo per non rubare
   troppa altezza, visto che resta appiccicata in alto. */
@media (max-width: 575.98px) {
  /* Si stringono le variabili e non il padding: la regola che scriveva qui
     padding-block non faceva effetto, perché .js .testata pesa più di .testata
     e con JavaScript attivo — cioè sempre — vinceva quella. */
  .testata {
    --respiro-alto: 0.6rem;
    --respiro-basso: 0.6rem;
    --respiro-pieno: 0.6rem;
    /* Qui il nome e il menu sono impilati: il logo li affianca tutti e due, ed
       è alto quanto le due righe messe insieme. */
    --logo-altezza: 2.75rem;
  }

  .testata__nav {
    gap: 1.35rem;
    font-size: 0.68rem;
  }
}

/* ------------------------------ 4. Apertura ------------------------------- */

.apertura {
  padding-block: clamp(2.5rem, 7vw, 6rem) var(--respiro);
}

.apertura__sopra {
  margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--azzurro);
}

.apertura__titolo {
  margin: 0;
  font-size: clamp(2.9rem, 7.4vw, 5.4rem);
  font-variation-settings: "opsz" 144;
  font-weight: 300;
}

.apertura__testo {
  max-width: 34ch;
  margin-block: clamp(1.5rem, 3vw, 2.25rem) 0;
  font-size: 1.5rem;
  color: var(--inchiostro-tot);
  font-family: var(--titolo);
}

/* Illustrazione d'apertura: nessun testo sovrapposto, solo l'opera. */
.apertura__opera {
  position: relative;
  line-height: 0;
}

.apertura__opera img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 1.5rem 3.5rem -1.5rem rgba(43, 39, 36, 0.25);
}

@media (min-width: 992px) {
  .apertura__opera {
    /* L'opera sborda un poco verso destra, come una tavola appoggiata. */
    margin-right: calc(clamp(1.15rem, 4vw, 3rem) * -1);
  }

  .apertura__opera img {
    max-height: 78vh;
    width: auto;
    max-width: 100%;
    margin-left: auto;
  }
}

.bottone-testo {
  display: inline-block;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--inchiostro);
}

.bottone-testo:hover,
.bottone-testo:focus-visible {
  border-bottom-color: var(--azzurro);
}

/* ------------------------------ 5. Sezioni ------------------------------- */

.sezione {
  padding-block: var(--respiro);
}

.sezione--carta {
  background: var(--carta-scura);
}

.sezione__titolo {
  margin: 0 0 clamp(1.75rem, 4vw, 3rem);
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
}

.sezione__titolo::after {
  content: "";
  display: block;
  width: 2.5rem;
  margin-top: 1.1rem;
  border-top: 1px solid var(--azzurro);
}

.testo-grande {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.6;
  font-weight: 300;
}

.sezione p:last-child {
  margin-bottom: 0;
}

.avviso {
  padding: 1rem 1.25rem;
  border: 1px solid var(--bordo);
  border-radius: 3px;
  color: var(--inchiostro-tot);
}

/* Elenco dei contatti: una riga per voce, l'etichetta piccola in alto a
   sinistra e il recapito in evidenza. Su schermo stretto l'etichetta va a capo
   sopra il recapito invece di stringerlo. */
.contatti {
  list-style: none;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
  padding: 0;
}

.contatti li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1.5rem;
  padding-block: 0.9rem;
  border-top: 1px solid var(--bordo);
}

.contatti li:last-child {
  border-bottom: 1px solid var(--bordo);
}

.contatti__voce {
  flex: 0 0 7rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azzurro);
}

.contatti a {
  font-family: var(--titolo);
  font-variation-settings: "opsz" 40;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  text-decoration: none;
  padding-bottom: 0.1rem;
  border-bottom: 1px solid var(--bordo);
  word-break: break-word;
}

.contatti a:hover,
.contatti a:focus-visible {
  border-bottom-color: var(--azzurro);
}

/* Nota sulle stampe: un inciso a margine, distinto dai recapiti di Martina
   perché riguarda un altro interlocutore. */
.nota-stampe {
  max-width: 46ch;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 1px solid var(--azzurro);
}

.nota-stampe__titolo {
  margin: 0 0 0.55rem;
  font-family: var(--testo);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--azzurro);
}

.nota-stampe p {
  margin-bottom: 0;
  color: var(--inchiostro-tot);
}

.nota-stampe__email {
  margin-top: 0.7rem;
}

.nota-stampe__email a {
  color: var(--inchiostro);
  text-decoration: none;
  border-bottom: 1px solid var(--bordo);
  word-break: break-word;
}

.nota-stampe__email a:hover,
.nota-stampe__email a:focus-visible {
  border-bottom-color: var(--azzurro);
}

/* ------------------------------ 6. Galleria ------------------------------ */

/* La griglia è quella di Bootstrap: una .row con dentro le colonne generate da
   js/sito.js (.galleria__voce col-12 col-sm-6 col-xl-4). Le distanze sono i
   gutter g-3 / g-lg-4 dichiarati nell'HTML, non margini scritti qui.
   Masonry accosta le colonne in verticale posizionandole in modo assoluto: la
   .row diventa il loro riferimento e non deve avere altezza imposta. */

.galleria {
  position: relative;
}

/* Il collegamento che avvolge l'illustrazione. È un <a> con href all'immagine
   perché è così che GLightbox riconosce le voci della galleria. */
.opera {
  position: relative;
  display: block;
  line-height: 0;
  text-decoration: none;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.opera img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  background: var(--carta-scura);
  box-shadow: 0 0.6rem 1.6rem -1rem rgba(43, 39, 36, 0.28);
  transition: box-shadow 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Al passaggio del mouse cambia solo l'ombra: uno spostamento entrerebbe in
   conflitto con le trasformazioni che Masonry usa per posizionare le colonne e
   con quella della comparsa qui sotto. */
.opera:hover img,
.opera:focus-visible img {
  box-shadow: 0 1.4rem 2.8rem -1.2rem rgba(43, 39, 36, 0.38);
}

/* Comparsa morbida allo scorrimento. La classe .js la mette js/sito.js, così
   senza JavaScript non resta nulla di invisibile. L'animazione sta sul
   collegamento e non sulla colonna, che è Masonry a spostare. */
.js .opera,
.js .apertura__opera {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js .opera.e-visibile,
.js .apertura__opera.e-visibile {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .opera,
  .js .apertura__opera {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .opera img {
    transition: none;
  }
}

/* ------------------- 7. Scudi sopra le illustrazioni --------------------- */

/* Ogni illustrazione è coperta da tre rettangoli trasparenti. Chi tenta il
   tasto destro, il trascinamento o la pressione prolungata sul telefono trova
   un contenitore vuoto al posto dell'immagine.
   Va detto chiaramente: questo scoraggia il salvataggio distratto, non ferma
   chi sa dove guardare — il file resta raggiungibile dagli strumenti per
   sviluppatori e al suo indirizzo diretto in images/. */

.opera img,
.apertura__opera img {
  /* Il bersaglio del puntatore è sempre uno scudo, mai l'immagine: così il
     menu del tasto destro non ha alcun elemento <img> a cui riferirsi. */
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.scudo {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  width: 33.4%;
  background: transparent;
}

.scudo--1 {
  left: 0;
}
.scudo--2 {
  left: 33.3%;
}
.scudo--3 {
  right: 0;
}

.opera .scudo {
  cursor: zoom-in;
}

/* Dentro il visualizzatore gli scudi non ci sono, perché il contenuto lo
   costruisce GLightbox: lì restano il divieto di selezione e di trascinamento,
   e il blocco del tasto destro che fa js/sito.js. Niente pointer-events: none,
   che toglierebbe alla libreria l'ingrandimento e lo scorrimento col dito. */
.gslide-image img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* ------------------------------ 8. Piede -------------------------------- */

.piede {
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--bordo);
  font-size: 0.8rem;
  color: var(--inchiostro-tot);
}

#logo {
  width: 150px;
  margin-bottom: 30px;
}

#profile {
  border-radius: 100%;
  width: 250px;
  height: 250px;
}