/* ------------------------------------------------------------------
   Caratteri, ospitati qui: nessuna chiamata a Google, nessun tracciamento,
   nessuna dipendenza esterna. I file stanno in assets/fonts/.
------------------------------------------------------------------ */

@font-face{
  font-family:"Space Grotesk";
  src:url("/assets/fonts/space-grotesk-latin-wght-normal.woff2") format("woff2-variations");
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Space Mono";
  src:url("/assets/fonts/space-mono-latin-400-normal.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("/assets/fonts/archivo-latin-standard-normal.woff2") format("woff2-variations");
  font-weight:300 700; font-stretch:62% 125%; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bricolage Grotesque";
  src:url("/assets/fonts/bricolage-grotesque-latin-standard-normal.woff2") format("woff2-variations");
  font-weight:300 700; font-stretch:75% 100%; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("/assets/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
  font-weight:300 700; font-style:normal; font-display:swap;
}

/* ------------------------------------------------------------------
   Francesco Vogli — stylesheet
   Palette e tipografia sono tutte qui sotto: cambia le variabili e
   cambia tutto il sito. Per passare a fondo chiaro: scambia --bg e --fg.
------------------------------------------------------------------ */

:root{
  --bg:            #0b0b0b;
  --fg:            #eae8e3;
  --fg-dim:        #7d7a74;
  --rule:          #262523;
  --accent:        #eae8e3;

  /* ABBINAMENTO A — Space Grotesk / Space Mono */
  --font-sans:     "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:     "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --pad:           clamp(1.25rem, 4vw, 3.5rem);
  --maxw:          1600px;

  --t:             320ms cubic-bezier(.22,.61,.36,1);
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  font-weight:400;
  line-height:1.35;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

a{ color:inherit; text-decoration:none; }

::selection{ background:var(--fg); color:var(--bg); }

/* ---------- layout ---------- */

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad);
}

.site-header{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem;
  padding:var(--pad) var(--pad) 1.25rem;
  max-width:var(--maxw); margin:0 auto;
}

.site-header--home{ padding-bottom:var(--pad); }

.site-header .name{
  font-size:clamp(.8rem,1.1vw,.95rem);
  font-family:var(--font-mono);
  letter-spacing:.02em;
  text-transform:uppercase;
}

.nav{
  display:flex; gap:1.5rem;
  font-family:var(--font-mono);
  font-size:clamp(.75rem,1vw,.85rem);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.nav a{ color:var(--fg-dim); transition:color var(--t); }
.nav a:hover,
.nav a[aria-current="page"]{ color:var(--fg); }

/* ---------- hero / titolo ---------- */

/* ---------- apertura: immagine con nome e descrizione sovrapposti ---------- */

/* la testata sta sopra l'immagine, su una fascia sua: l'immagine comincia dopo */
.site-header--home{ padding-bottom:var(--pad); }

.opening--overlay{
  position:relative;
  margin:0 0 clamp(3rem,8vh,6rem);
  height:clamp(300px,58vh,660px);   /* altezza dell'immagine di apertura */
  overflow:hidden;
}

.opening--overlay > img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

/* velo scuro in basso: senza, il testo sparisce su una foto chiara */
.opening-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(11,11,11,.88) 0%, rgba(11,11,11,.42) 30%, rgba(11,11,11,0) 62%);
}

/* nome sopra, descrizione sotto */
.opening-text{
  position:absolute;
  left:0; right:0; bottom:clamp(1.5rem,4.5vh,3rem);
}

.opening-text h1{
  margin:0 0 .45rem;
  font-size:clamp(1.25rem,2.3vw,2rem);
  line-height:1.05;
  letter-spacing:-0.02em;
  font-weight:400;
}

.opening-text .tagline{
  margin:0;
  max-width:48ch;
  font-size:clamp(.9rem,1.15vw,1.08rem);
  line-height:1.4;
  color:var(--fg);
  opacity:.78;
}

@media (max-width:820px){
  .opening--overlay{ height:clamp(260px,46vh,420px); }
}

.opening-caption{
  margin:-2.5rem auto clamp(3rem,8vh,6rem);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.04em;
  color:var(--fg-dim);
}

@media (max-width:820px){
  .opening--overlay{ height:clamp(380px,72vh,620px); }
  .opening-text{
    grid-template-columns:1fr;
    align-items:start;
    gap:.55rem;
  }
  .opening-text .tagline{ margin-bottom:0; }
}

/* ---------- indice lavori ---------- */

.index-label{
  font-family:var(--font-mono);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--fg-dim);
  padding-bottom:.9rem;
  border-bottom:1px solid var(--rule);
}

.work-list{ list-style:none; margin:0; padding:0; }

.work-list li{ border-bottom:1px solid var(--rule); }

.work-row{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:baseline;
  gap:1rem clamp(1rem,3vw,3rem);
  padding:clamp(1rem,2.2vw,1.9rem) 0;
  transition:opacity var(--t), padding-left var(--t);
}

.work-row:hover,
.work-row:focus-visible{ padding-left:.75rem; }

/* le altre righe sbiadiscono quando ne sfiori una */
.work-list:hover .work-row{ opacity:.35; }
.work-list:hover .work-row:hover{ opacity:1; }

/* la riga si apre: striscia di immagine dentro la riga stessa */
.work-reveal{
  grid-column:1 / -1;
  height:0;
  margin-top:0;
  overflow:hidden;
  transition:height 460ms cubic-bezier(.22,.61,.36,1),
             margin-top 460ms cubic-bezier(.22,.61,.36,1);
}

.work-row:hover .work-reveal,
.work-row:focus-visible .work-reveal{
  height:clamp(150px,20vw,300px);
  margin-top:1.25rem;
}

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

.work-title{
  font-size:clamp(1.5rem,4.5vw,3.4rem);
  line-height:1.02;
  letter-spacing:-0.035em;
  font-weight:400;
}

.work-meta,
.work-year{
  font-family:var(--font-mono);
  font-size:clamp(.7rem,.95vw,.82rem);
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--fg-dim);
  white-space:nowrap;
}


/* ---------- pagina progetto ---------- */

.project-header{ padding:clamp(3rem,10vh,7rem) 0 clamp(2rem,5vh,4rem); }

.project-header h1{
  margin:0 0 1.5rem;
  font-size:clamp(2rem,7vw,6rem);
  line-height:.95;
  letter-spacing:-0.04em;
  font-weight:400;
}

.project-facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1.5rem 2rem;
  padding-top:1.75rem;
  border-top:1px solid var(--rule);
  font-family:var(--font-mono);
  font-size:.8rem;
  line-height:1.5;
}

.project-facts dt{
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--fg-dim);
  margin-bottom:.4rem;
}
.project-facts dd{ margin:0; }

.prose{
  max-width:62ch;
  font-size:clamp(1rem,1.35vw,1.2rem);
  line-height:1.6;
  letter-spacing:-0.005em;
}
.prose p{ margin:0 0 1.4em; }
.prose a{ border-bottom:1px solid var(--fg-dim); transition:border-color var(--t); }
.prose a:hover{ border-color:var(--fg); }

.media{ margin:clamp(3rem,8vh,6rem) 0; display:grid; gap:clamp(1rem,2vw,2rem); }
.media--two{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.media figure{ margin:0; }
.media figcaption{
  margin-top:.7rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--fg-dim);
  letter-spacing:.04em;
}

/* wrapper 16:9 per embed Vimeo/YouTube */
.embed{ position:relative; aspect-ratio:16/9; background:#000; }
.embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- footer ---------- */

.site-footer{
  margin-top:clamp(5rem,15vh,10rem);
  padding:2.5rem var(--pad) 3rem;
  max-width:var(--maxw);
  margin-inline:auto;
  border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:1rem 2.5rem;
  justify-content:space-between;
  font-family:var(--font-mono);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--fg-dim);
}
/* l'email resta in minuscolo, il resto del footer no */
.site-footer a{ text-transform:none; letter-spacing:.02em; transition:color var(--t); }
.site-footer a:hover{ color:var(--fg); }

.back-link{
  display:inline-block;
  margin-top:clamp(3rem,8vh,5rem);
  font-family:var(--font-mono);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--fg-dim);
  transition:color var(--t);
}
.back-link:hover{ color:var(--fg); }

/* ---------- responsive / accessibilità ---------- */

@media (max-width:720px){
  .work-row{ grid-template-columns:1fr auto; }
  .work-meta{ display:none; }
  .site-header{ flex-direction:column; gap:.75rem; }
}

/* su touch non c'è hover: la striscia resta sempre aperta */
@media (hover:none), (pointer:coarse){
  .work-list:hover .work-row{ opacity:1; }
  .work-row:hover{ padding-left:0; }
  .work-reveal{ height:clamp(130px,42vw,240px); margin-top:1rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

:focus-visible{ outline:2px solid var(--fg); outline-offset:4px; }

/* ---------- aggiunte del generatore ---------- */

.media--hero{ margin-top:0; }
.media--hero img{ width:100%; aspect-ratio:16/9; object-fit:cover; }

.media--portrait img{ max-width:min(100%,540px); }

.project-nav{
  display:flex; flex-wrap:wrap; gap:1rem 2rem;
  justify-content:space-between;
  margin-top:clamp(3rem,8vh,5rem);
}
.project-nav .back-link{ margin-top:0; }

.project-facts dd a{ border-bottom:1px solid var(--rule); }
.project-facts dd a:hover{ border-color:var(--fg); }

/* ---------- pagina di attesa ---------- */

.opening--full{
  height:100svh;
  margin:0;
}

.opening--full .opening-text{ bottom:clamp(2rem,7vh,4.5rem); }

.soon-note{
  margin:clamp(1.5rem,4vh,2.5rem) 0 0;
  font-family:var(--font-mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--fg-dim);
}
.soon-note a{ text-transform:none; letter-spacing:.02em; }
.soon-note a:hover{ color:var(--fg); }

/* ---------- selettore lingua IT / EN ---------- */

.nav{ flex-wrap:wrap; align-items:baseline; }

.lang-switch{
  display:inline-flex; gap:.6rem;
  padding-left:1.5rem;
  border-left:1px solid var(--rule);
}
.lang-switch [aria-current]{ color:var(--fg); }

/* ---------- avviso "sito in costruzione" in fondo ---------- */

.footer-note{ color:var(--fg); }

/* ---------- crediti fotografici in fondo alla pagina del lavoro ---------- */

.credits{
  margin:clamp(2rem,5vh,3rem) 0 0;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.04em;
  color:var(--fg-dim);
}

/* ==================================================================
   Revisione 11 ottobre
   ================================================================== */

:root{
  --avviso: #f2c230;   /* colore di "Sito in costruzione…" (rosso: #ff4a3d) */
}

/* 1. menu sempre in alto a destra, su tutte le pagine e anche su telefono */
.site-header{ flex-wrap:wrap; }
.site-header .nav{ margin-left:auto; justify-content:flex-end; }

@media (max-width:720px){
  .site-header{ flex-direction:row; gap:.75rem 1.25rem; }
  .nav{ gap:1rem; }
  .lang-switch{ padding-left:1rem; gap:.5rem; }
}

/* 2. immagine di apertura: più alta di prima ma non a tutto schermo,
      sfumata sopra e sotto nel colore di fondo */
.opening--overlay{ height:clamp(340px,76vh,860px); }

@media (max-width:820px){
  .opening--overlay{ height:clamp(380px,70vh,640px); }
}

.opening--overlay > img{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 22%, #000 62%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 22%, #000 62%, transparent 100%);
}

/* 3. Bio: testo giustificato a sinistra, foto sfumata a destra */
.about-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:start;
}
.about-grid .prose{
  max-width:none;
  text-align:justify;
  -webkit-hyphens:auto; hyphens:auto;   /* sillabazione: evita i buchi tra le parole */
}
.about-grid .media--portrait{ margin:0; }
.about-grid .media--portrait img{
  width:100%; max-width:100%;
  -webkit-mask-image:
    linear-gradient(to right,  transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(to right,  transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
          mask-composite:intersect;
}

@media (max-width:820px){
  .about-grid{ grid-template-columns:1fr; }
}

/* 4. "Sito in costruzione…" su tutte le pagine, in evidenza */
.footer-note{ color:var(--avviso); }

/* su telefono: giustificato solo quando testo e foto sono affiancati,
   in colonna stretta il giustificato apre buchi tra le parole */
@media (max-width:820px){
  .about-grid .prose{ text-align:left; }
}

/* su telefono il nome e il menu non stanno sulla stessa riga:
   nascondo il nome, così il menu resta nello stesso punto su tutte le pagine
   (la home è raggiungibile da "Lavori") */
@media (max-width:459px){
  .site-header .name{ display:none; }
}

/* home: l'immagine di apertura sale fin quasi alla riga del menu
   (il menu resta sopra, la sfumatura parte subito sotto le voci) */
.site-header--home{ position:relative; z-index:2; }
.site-header--home + .opening--overlay{
  margin-top:calc(-1 * var(--pad));
  height:calc(clamp(340px,76vh,860px) + var(--pad));
}
@media (max-width:820px){
  .site-header--home + .opening--overlay{ height:calc(clamp(380px,70vh,640px) + var(--pad)); }
}