:root{
  /* spaziatura */
  --space-xs: 22px;
  --space-s: 28px;    /* spazio tra 2 colonne della griglia (gutter) */
  --space-m: 44px;
  --space-l: 58px;
  --space-xl: 82px;
  --space-2xl: 110px;
  --space-3xl: 128px;
  --space-4xl: 150px;
  --space-pad: 72px;  /* margine laterale di pagina */

  /* typeface */
  --font-sans: "gotham", "Montserrat", system-ui, sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* DM Mono */
  --font-size-dettaglio: 11px;    /* etichette, percorso header, indici, contatori */
  --font-size-nav: 12px;          /* nav, toggle menu, filtri, torna indietro */
  --font-size-dato: 13px;         /* liste bio e contatti, dd delle schede dati */

  /* Gotham */
  --font-size-mini: 13.5px;      /* tipologia sotto il titolo della card */
  --font-size-piccolo: 15px;     /* liste bio, descrizione progetto */
  --font-size-voce-menu: 16px;   /* titoli progetto nell'elenco del menu */
  --font-size-nome: 18px;        /* "athos arcuri" in header e menu */
  --font-size-corpo: 19px;
  --font-size-sottotitolo: 23px;
  --font-size-titolo-pager: 26px;
  --font-size-titolo-card: 30px;

  /* Gotham display: tre gradini per tutti i titoli di pagina */
  --font-size-display-s: 72px;   /* bio, voci del menu */
  --font-size-display-m: 86px;   /* progetto, contatti */
  --font-size-display-l: 112px;  /* home */

  /* layout */
  --max-width: 1680px;
  --header-h: 70px;
}

/* light mode */
html[data-theme="light"]{
  --color-sfondo: #f3f1ec;            /* fondo pagina */
  --color-sfondo-blocco: #e7e3db;     /* riquadri e placeholder immagine */
  --color-sfondo-header: rgba(243, 241, 236, 0.72); /* trasparenza vetro */
  --color-titolo: #171512;            /* h1 h2 h3 h4 ... */
  --color-testo: #171512;             /* corpo testo, link, icone */
  --color-sottotitolo: #474542;
  --color-testo-secondario: #6b6966;  /* 4.9:1 su --color-sfondo */
  --color-testo-tenue: #6f6d69;       /* 4.6:1 su --color-sfondo */
  --color-linea: #d4d2cd;
  --color-linea-tenue: #e1dfdb;
  --color-linea-forte: #b1afab;
  --color-accento: #a54a24;           /* colore dei link al passaggio del mouse */
}

/* dark mode */
html[data-theme="dark"]{
  --color-sfondo: #141210;
  --color-sfondo-blocco: #221f1b;
  --color-sfondo-header: rgba(20, 18, 16, 0.72);
  --color-titolo: #efece5;
  --color-testo: #efece5;
  --color-sottotitolo: #bfbcb6;
  --color-testo-secondario: #93908c;
  --color-testo-tenue: #838079;       /* 4.8:1 su --color-sfondo */
  --color-linea: #373532;
  --color-linea-tenue: #282623;
  --color-linea-forte: #615e5b;
  --color-accento: #dd8e68;
}

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

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

body{
  font-family: var(--font-sans);
  font-weight: 400;
  background-color: var(--color-sfondo);
  color: var(--color-testo);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s ease, color .3s ease;
}

a{
  color: var(--color-testo);
  text-decoration: none;
  transition: color .2s ease;
}

a:hover{
  color: var(--color-accento);
}

button{
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

img{
  display: block;
}

::selection{
  background-color: var(--color-testo);
  color: var(--color-sfondo);
}

@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: none; }
}

/* griglia */

.wrapper{
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-pad);
}

.grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--space-s);
}

/* Etichetta maiuscolo MONO */
.label{
  font-family: var(--font-mono);
  font-size: var(--font-size-dettaglio);
  font-weight: 400;  /* serve perché alcune .label sono h2, quindi in grassetto di default */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-testo-tenue);
}

.label--line{
  padding-bottom: 13px;
  border-bottom: 1px solid var(--color-linea);
}

/* header */
.site{
  min-height: 100vh;
  padding-top: var(--header-h);
  background-color: var(--color-sfondo);
}

.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-linea);
}

/* Vetro dell'header. Sfondo e sfocatura stanno insieme qui e non su .header */
.header::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-sfondo-header);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}

.header__grid{
  width: 100%;
  align-items: center;
}

.header__logo{
  grid-column: 1 / 6;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
}

.header__name{
  font-size: var(--font-size-nome);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.header__route{
  font-family: var(--font-mono);
  font-size: var(--font-size-dettaglio);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-testo-secondario);
}

.header__actions{
  grid-column: 6 / 13;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.header__nav{
  display: flex;
  align-items: center;
  gap: 26px;
  font-family: var(--font-mono);
  font-size: var(--font-size-nav);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.header__theme{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

/* Bottone light/dark mode */
.header__dot{
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--color-testo);
  -webkit-mask: center / contain no-repeat;
          mask: center / contain no-repeat;
  transition: background-color .25s ease;
}

@media (hover: hover) and (pointer: fine){
  .header__theme:hover .header__dot{
    background-color: var(--color-accento);
  }
}

/* luna (dark mode) */
html[data-theme="light"] .header__dot{
  -webkit-mask-image: url("icone/luna.svg");
          mask-image: url("icone/luna.svg");
}

/* sole (light mode) */
html[data-theme="dark"] .header__dot{
  -webkit-mask-image: url("icone/sole.svg");
          mask-image: url("icone/sole.svg");
}

.header__hb{
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* hb a destra */
  justify-content: center;
  gap: 5px; /* distanza tra le 2 linee */
  width: 44px;
  height: 44px;
}

.header__hb i{
  display: block;
  width: 26px;
  height: 1.5px; /* spessore tratto hb */
  background-color: var(--color-testo);
}

.header__hb i + i{
  width: 18px; /* lunghezza secondo tratto hb */
}

/* menu schermo intero (figlio di .header) */
.menu{
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  overflow-y: auto;
  background-color: var(--color-sfondo);
  animation: fadeUp .28s ease;
}

.menu--open{
  display: block;
}

.menu__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.menu__close{
  min-height: 44px;
  padding: 0 2px;
  font-family: var(--font-mono);
  font-size: var(--font-size-nav);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.menu__grid{
  padding-top: var(--space-xl);
  padding-bottom: 64px;
  row-gap: 40px;
}

.menu__nav{
  grid-column: 1 / 6;
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: 2px;
}

/* Sottolineatura + freccia (lavori,bio, contatti nell'hb) */
.menu__nav a{
  display: flex;
  align-items: center;
  gap: 0.24em;
  width: fit-content;
  padding-bottom: 0.04em;
  border-bottom: 1px solid var(--color-linea-forte);
  font-size: var(--font-size-display-s);
  letter-spacing: -0.035em;
  line-height: 1.05;
  transition: color .2s ease, border-color .2s ease;
}

.menu__nav a::after{
  content: "\2192";
  font-size: 0.42em;
  letter-spacing: 0;
  line-height: 1;
}

.menu__nav a:hover{
  color: var(--color-accento);
  border-bottom-color: var(--color-accento);
}

.menu__side{
  grid-column: 7 / 13;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Elenco menu su 2 colonnne */
.menu__list{
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-s);
}

.menu__list li{
  border-bottom: 1px solid var(--color-linea-tenue);
}

.menu__list a{
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-height: 44px;
  padding: 11px 0;
}

.menu__num{
  min-width: 2.2em;
  font-family: var(--font-mono);
  font-size: var(--font-size-dettaglio);
  color: var(--color-testo-tenue);
}

.menu__title{
  flex: 1;
  font-size: var(--font-size-voce-menu);
  letter-spacing: -0.01em;
}

.menu__cat{
  font-family: var(--font-mono);
  font-size: var(--font-size-dettaglio);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-testo-tenue);
}

/* HOME_hero */
.hero{
  align-items: end;
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-xl);
  row-gap: 32px;
}

.hero__title{
  grid-column: 1 / 8;
  font-size: var(--font-size-display-l);
  color: var(--color-titolo);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.96;
}

.hero__side{
  grid-column: 8 / 13;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 8px;
}

.hero__lead{
  font-size: var(--font-size-corpo);
  line-height: 1.5;
  color: var(--color-sottotitolo);
}

.hero__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-family: var(--font-mono);
  font-size: var(--font-size-dettaglio);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-testo-secondario);
}

/* HOME_filtri */
.filters{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--color-linea);
  border-bottom: 1px solid var(--color-linea);
}

.filters__set{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filters__chip{
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  background-color: transparent;
  font-family: var(--font-mono);
  font-size: var(--font-size-nav);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.filters__chip--active{
  background-color: var(--color-testo);
  color: var(--color-sfondo);
}

/* Hover solo con mouse */
@media (hover: hover) and (pointer: fine){
  .filters__chip:not(.filters__chip--active):hover{
    background-color: var(--color-linea-tenue);
  }
}

.filters__chip:focus-visible{
  outline: 2px solid var(--color-testo);
  outline-offset: 2px;
}

.filters__count{
  font-family: var(--font-mono);
  font-size: var(--font-size-dettaglio);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-testo-tenue);
}

/* HOME_schede progetto */
.cards{
  padding-top: var(--space-l);
  padding-bottom: var(--space-3xl);
  row-gap: var(--space-m);
}

.card{
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card[hidden]{
  display: none;
}

.card__media{
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__body{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card__meta{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--font-size-dettaglio);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-testo-tenue);
  margin-bottom: 4px;  /* stacco dal titolo */
}

.card__title{
  font-size: var(--font-size-titolo-card);
  color: var(--color-titolo);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.card__kind{
  font-size: var(--font-size-mini);
  line-height: 1.45;
  color: var(--color-testo-secondario);
}

/* pagina progetto */
main{
  animation: fadeUp .3s ease;
}

.project__head{
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-m);
  row-gap: 32px;
}

.project__left{
  grid-column: 1 / 7;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.project__title{
  font-size: var(--font-size-display-m);
  color: var(--color-titolo);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

.project__claim{
  max-width: 34ch;
  font-size: var(--font-size-sottotitolo);
  line-height: 1.4;
  color: var(--color-sottotitolo);
}

.project__right{
  grid-column: 8 / 13;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 6px;
}

.project__desc{
  max-width: 52ch;
  font-size: var(--font-size-piccolo);
  line-height: 1.6;
  color: var(--color-sottotitolo);
}

.project__meta{
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 16px;
  column-gap: var(--space-s);
  padding-top: 20px;
  border-top: 1px solid var(--color-linea);
  font-family: var(--font-mono);
}

.project__meta > div{
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.project__meta dt{
  margin-bottom: 3px;
  font-size: var(--font-size-dettaglio);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-testo-tenue);
}

.project__meta dd{
  font-size: var(--font-size-dato);
}

.project__link{
  align-self: flex-start;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--color-linea-forte);
  font-family: var(--font-mono);
  font-size: var(--font-size-nav);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* galleria progetto. proporzione h (--ratio in html) */
.gallery{
  display: grid;
  row-gap: var(--space-s);
  padding-bottom: var(--space-xl);
}

.gallery__row{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--space-s);
  aspect-ratio: var(--ratio, 1.5);
}

.gallery__item{
  margin: 0;
  overflow: hidden;
}

.gallery__item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* una immagine a tutta larghezza */
.gallery__row--uno > .gallery__item{ grid-column: 1 / 13; }

/* due immagini: pari, poi piccola a sinistra, poi piccola a destra */
.gallery__row--due > .gallery__item:nth-child(1){ grid-column: 1 / 7; }
.gallery__row--due > .gallery__item:nth-child(2){ grid-column: 7 / 13; }

.gallery__row--due-sx > .gallery__item:nth-child(1){ grid-column: 1 / 5; }
.gallery__row--due-sx > .gallery__item:nth-child(2){ grid-column: 5 / 13; }

.gallery__row--due-dx > .gallery__item:nth-child(1){ grid-column: 1 / 9; }
.gallery__row--due-dx > .gallery__item:nth-child(2){ grid-column: 9 / 13; }

/* tre immagini: terzi, poi due strette a sinistra, poi due strette a destra */
.gallery__row--tre > .gallery__item:nth-child(1){ grid-column: 1 / 5; }
.gallery__row--tre > .gallery__item:nth-child(2){ grid-column: 5 / 9; }
.gallery__row--tre > .gallery__item:nth-child(3){ grid-column: 9 / 13; }

.gallery__row--tre-sx > .gallery__item:nth-child(1){ grid-column: 1 / 4; }
.gallery__row--tre-sx > .gallery__item:nth-child(2){ grid-column: 4 / 7; }
.gallery__row--tre-sx > .gallery__item:nth-child(3){ grid-column: 7 / 13; }

.gallery__row--tre-dx > .gallery__item:nth-child(1){ grid-column: 1 / 7; }
.gallery__row--tre-dx > .gallery__item:nth-child(2){ grid-column: 7 / 10; }
.gallery__row--tre-dx > .gallery__item:nth-child(3){ grid-column: 10 / 13; }

/* pagina progetto -> passaggio al progetto vicino */
.pager{
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 26px;
  padding-bottom: var(--space-3xl);
  border-top: 1px solid var(--color-linea);
}

.pager__link{
  display: flex;
  flex-direction: column;
  gap: 9px;  /* stacco dal titolo */
  max-width: 45%;
  min-height: 44px;
}

.pager__link--next{
  align-items: flex-end;
  text-align: right;
}

.pager__label{
  font-family: var(--font-mono);
  font-size: var(--font-size-dettaglio);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-testo-tenue);
}

.pager__title{
  font-size: var(--font-size-titolo-pager);
  color: var(--color-titolo);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* bio */
.bio__head{
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-xl);
  row-gap: 36px;
}

.bio__text{
  grid-column: 1 / 7;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.bio__title{
  font-size: var(--font-size-display-s);
  color: var(--color-titolo);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.bio__lead{
  font-size: var(--font-size-corpo);
  line-height: 1.55;
  color: var(--color-sottotitolo);
}

.bio__figure{
  grid-column: 8 / 13;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.bio__figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bio__cols{
  padding-top: var(--space-l);
  padding-bottom: var(--space-3xl);
  border-top: 1px solid var(--color-linea);
  row-gap: 36px;
}

.bio__col{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bio__col--cosa{ grid-column: 1 / 5; }
.bio__col--formazione{ grid-column: 5 / 9; }
.bio__col--clienti{ grid-column: 9 / 13; }

.bio__list{
  list-style: none;
  display: grid;
  gap: 9px;
  font-size: var(--font-size-piccolo);
  line-height: 1.4;
}

.bio__edu{
  list-style: none;
  display: grid;
  gap: 14px;
  font-size: var(--font-size-piccolo);  /* Gotham al posto del mono */
  line-height: 1.5;
}

.bio__edu li{
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

/* La data sta in fondo alla riga e non va mai a capo */
.bio__edu span + span{
  white-space: nowrap;
  color: var(--color-testo-tenue);
}

.bio__clients{
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 18px;
  font-size: var(--font-size-piccolo);  /* Gotham al posto del mono */
  line-height: 1.4;
  color: var(--color-sottotitolo);
}

.bio__clients a{
  display: inline;
  padding: 1px 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-linea-forte);
  text-underline-offset: 4px;
}

/* contatti */
.contatti__head{
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-l);
}

.contatti__title{
  grid-column: 1 / 10;
  font-size: var(--font-size-display-m);
  color: var(--color-titolo);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

.contatti__cols{
  padding-top: var(--space-m);
  padding-bottom: var(--space-3xl);
  border-top: 1px solid var(--color-linea);
  row-gap: 30px;
}

.contatti__field{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contatti__field--email{ grid-column: 1 / 5; }
.contatti__field--social{ grid-column: 5 / 9; }
.contatti__field--dove{ grid-column: 9 / 13; }

.contatti__value{
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--font-size-sottotitolo);
  letter-spacing: -0.01em;
}

/* footer */
.footer{
  padding: 26px 0 34px;
  border-top: 1px solid var(--color-linea);
}

.footer__inner{
  row-gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--font-size-dettaglio);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-testo-secondario);
}

.footer__legal{ grid-column: 1 / 5; }

.footer__mail {
  grid-column: 5 / 9;
  text-align: center; /* mail centro */
  letter-spacing: 0.06em;
  text-transform: none;
}

.footer__place{
  grid-column: 10 / 13;
  text-align: right;
}

/* torna in cima */
.to-top{
  position: fixed;
  right: var(--space-pad);
  bottom: var(--space-xs);
  z-index: 85;
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background-color: var(--color-testo);
  color: var(--color-sfondo);
  font-family: var(--font-mono);
  font-size: 22px;  /* dimensione del glifo ↑, non della scala tipografica */
  line-height: 1;
}

.to-top--visible{
  display: flex;
  animation: fadeUp .28s ease;
}

/* cursore (mouse/trackpad) */
.cursor{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 220;
  display: none;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--color-accento);
  color: var(--color-sfondo);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
  transform: translate(-100px, -100px) translate(-50%, -50%);
  transition: width .2s ease, height .2s ease;
}

.cursor--on{
  display: flex;
}

.cursor span{
  opacity: 0;
  transition: opacity .15s ease;
}

@media (hover: hover) and (pointer: fine){
  body.u-nocursor,
  body.u-nocursor a,
  body.u-nocursor button{
    cursor: none;
  }
}

@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
  }
}

/* TABLET  <1024px griglia 8 colonne */ 
@media screen and (max-width: 1024px){
  :root{
    --space-xs: 18px;
    --space-s: 22px;
    --space-m: 32px;
    --space-l: 40px;
    --space-xl: 54px;
    --space-2xl: 72px;
    --space-3xl: 92px;
    --space-4xl: 108px;
    --space-pad: 40px;

    --font-size-corpo: 17px;
    --font-size-sottotitolo: 19px;
    --font-size-titolo-pager: 21px;
    --font-size-titolo-card: 24px;
    --font-size-display-s: 48px;
    --font-size-display-m: 56px;
    --font-size-display-l: 72px;
  }

  .grid,
  .gallery__row{
    grid-template-columns: repeat(8, 1fr);
  }

  .header__logo{ grid-column: 1 / 5; }
  .header__actions{ grid-column: 5 / 9; }

  .menu__nav{ grid-column: 1 / 4; }
  .menu__side{ grid-column: 4 / 9; }

  .hero__title{ grid-column: 1 / 6; }
  .hero__side{ grid-column: 6 / 9; }

  /* Metà griglia a testa: 4 colonne su 8 */
  .card{ grid-column: span 4; }

  .project__left{ grid-column: 1 / 5; }
  .project__right{ grid-column: 5 / 9; }

  .gallery__row--uno > .gallery__item{ grid-column: 1 / 9; }

  .gallery__row--due > .gallery__item:nth-child(1){ grid-column: 1 / 5; }
  .gallery__row--due > .gallery__item:nth-child(2){ grid-column: 5 / 9; }

  .gallery__row--due-sx > .gallery__item:nth-child(1){ grid-column: 1 / 4; }
  .gallery__row--due-sx > .gallery__item:nth-child(2){ grid-column: 4 / 9; }

  .gallery__row--due-dx > .gallery__item:nth-child(1){ grid-column: 1 / 6; }
  .gallery__row--due-dx > .gallery__item:nth-child(2){ grid-column: 6 / 9; }

  .gallery__row--tre > .gallery__item:nth-child(1){ grid-column: 1 / 4; }
  .gallery__row--tre > .gallery__item:nth-child(2){ grid-column: 4 / 7; }
  .gallery__row--tre > .gallery__item:nth-child(3){ grid-column: 7 / 9; }

  .gallery__row--tre-sx > .gallery__item:nth-child(1){ grid-column: 1 / 3; }
  .gallery__row--tre-sx > .gallery__item:nth-child(2){ grid-column: 3 / 5; }
  .gallery__row--tre-sx > .gallery__item:nth-child(3){ grid-column: 5 / 9; }

  .gallery__row--tre-dx > .gallery__item:nth-child(1){ grid-column: 1 / 5; }
  .gallery__row--tre-dx > .gallery__item:nth-child(2){ grid-column: 5 / 7; }
  .gallery__row--tre-dx > .gallery__item:nth-child(3){ grid-column: 7 / 9; }

  .bio__text{ grid-column: 1 / 5; }
  .bio__figure{ grid-column: 5 / 9; }
  .bio__col--cosa{ grid-column: 1 / 5; }
  .bio__col--formazione{ grid-column: 5 / 9; }
  /* La lista clienti è su due colonne: in un quarto di schermo non ci sta */
  .bio__col--clienti{ grid-column: 1 / 9; }

  .contatti__title{ grid-column: 1 / 7; }
  .contatti__field--email{ grid-column: 1 / 4; }
  .contatti__field--social{ grid-column: 4 / 7; }
  .contatti__field--dove{ grid-column: 7 / 9; }


  .footer__legal { 
    grid-column: 1 / 3; /* 2 colonne a sinistra */
  }

  .footer__mail { 
    grid-column: 3 / 7; /* 4 colonne al centro */
    text-align: center; 
  }

  .footer__place { 
    grid-column: 7 / 9; /* 2 colonne a destra */
    text-align: right; 
  }
  
}

/* MOBILE <768px griglia 4 colonne */
@media screen and (max-width: 768px){
  :root{
    --space-xs: 14px;
    --space-s: 14px;
    --space-m: 26px;
    --space-l: 34px;
    --space-xl: 46px;
    --space-2xl: 52px;
    --space-3xl: 70px;
    --space-4xl: 64px;
    --space-pad: 20px;

    --font-size-corpo: 16px;
    --font-size-sottotitolo: 17px;
    --font-size-titolo-pager: 18px;
    --font-size-titolo-card: 22px;
    --font-size-display-s: 38px;
    --font-size-display-m: 42px;
    --font-size-display-l: 48px;
  }

  body{
    cursor: auto;
  }

  .grid{
    grid-template-columns: repeat(4, 1fr);
    row-gap: 32px;
  }

  .grid > *{
    grid-column: 1 / -1;
  }

  /* Logo e comandi restano sulla stessa riga: il menu è dietro l'hamburger */
  .header__grid{
    grid-template-columns: 1fr auto;
    row-gap: 0;
  }

  .header__logo{
    grid-column: 1;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
  }

  .header__actions{
    grid-column: 2;
    gap: 4px;
  }

  :root{ --font-size-nome: 15px; }

  .header__route{
    font-size: 9px;
    white-space: nowrap;
  }

  .header__nav{ display: none; }

  .hero{ align-items: start; }

  /* Filtri centrati: i tre chip su una riga (con "fotografia" al centro) */
  .filters{
    justify-content: center;
    row-gap: 14px;
  }

  /* "fotografia" (colonna centrale) al centro, indipendente da resto */
  .filters__set{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 4px;
  }

  .filters__set > :first-child{ justify-self: end; }
  .filters__set > :last-child{ justify-self: start; }

  .filters__chip{ padding: 10px 13px; }

  .filters__count{
    width: 100%;
    text-align: center;
  }

  .menu__list{ grid-template-columns: 1fr; }

  /* Le schede dati del progetto una per riga */
  .project__meta{ grid-template-columns: 1fr; }

  /* righe galleria -> 1 colonna, no h --ratio */
  .gallery__row{
    grid-template-columns: 1fr;
    row-gap: var(--space-s);
    aspect-ratio: auto;
  }

  /* :nth-child(n) pareggia la specificità delle regole tablet */
  .gallery__row > .gallery__item:nth-child(n){
    grid-column: 1 / -1;
    aspect-ratio: var(--ratio, 1.5);
  }

.footer__legal,
  .footer__mail,
  .footer__place {
    grid-column: 1 / -1; /* piena larghezza */
    text-align: center;   /* testo centrato */
  }

}

/* ─── iubenda: esclude il banner dal reset globale ─── */

:where(#iubenda-cs-banner, .iubenda-cs-container, #iubenda-iframe),
:where(#iubenda-cs-banner, .iubenda-cs-container, #iubenda-iframe) :where(*) {
  margin: revert;
  padding: revert;
  box-sizing: border-box;
}

:where(#iubenda-cs-banner, .iubenda-cs-container) :where(button) {
  font: revert;
  color: revert;
  background: revert;
  border: revert;
  cursor: pointer;
}