@font-face {
  font-family: 'PPPangramSansRounded-Medium';
  src: url('assets/font/pangram/PPPangramSansRounded-Medium.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PPPangramSansRounded-Bold';
  src: url('assets/font/pangram/PPPangramSansRounded-Bold.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   VARIABILI
   ============================================================ */
:root{
  --color-bg:        #fafafa;
  --color-text:      #1B1815;
  --color-text-muted:#6b6b6b;
  --color-accent:    #8a5e31;   /* menu, dettagli — scurito rispetto al moodboard per contrasto AA su sfondo chiaro */
  --color-overlay:   #4C5A68;   /* hover galleria */
  --color-overlay-light: #607a949a;
  --color-footer-bg: #D9CDB3;
  --color-border:    #e6e2da;
  --color-rust:      #9C3B2C;   /* rosso mattone — frecce navigazione progetto */
  

  --font-heading:'Betania Patmos In', 'Georgia', serif;
  --font-section: 'Betania Patmos In', serif;
  --font-media: 'PPPangramSansRounded-Bold', sans-serif;
  --font-body: 'PPPangramSansRounded-Medium', -apple-system, sans-serif;
  --font-img: 'PPPangramSansRounded-Bold', sans-serif;

  --max-width: 1240px;
  --gap: 4px;
}

*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  scroll-behavior:smooth;
  /* Disattiva lo "scroll anchoring" automatico del browser: quando si
     nasconde l'Hero dopo il primo scroll, questa euristica dovrebbe
     compensare da sola la posizione, ma con lo scroll animato via JS
     (e sul mobile, con il menu che si apre/chiude) può risultare
     inaffidabile o non attivarsi affatto — meglio farlo sempre a mano,
     in modo prevedibile (vedi rimuoviHeroSenzaSalti in script.js). */
  overflow-anchor: none;
}
body{
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
  min-height:100vh;
}
/* Spinge il footer in fondo: il contenuto principale occupa lo spazio
   disponibile, anche quando è corto. */
body > footer{ margin-top:auto; }


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

/* Scoraggia il salvataggio rapido delle immagini (drag, selezione, callout mobile).
   Non impedisce lo screenshot: nessuna misura via codice può farlo. */
   
img{
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }

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

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ============================================================
   REVEAL ON SCROLL
   Aggiungi class="reveal" a un elemento per farlo comparire (dissolvenza
   + leggero spostamento verso l'alto) quando entra nello schermo.
   Gestito da IntersectionObserver in script.js, che aggiunge
   "is-visible" la prima volta che l'elemento diventa visibile.
   ============================================================ */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

.skip-link{
  position:absolute; left:-9999px; top:auto;
  background: var(--color-text); color:#fff; padding:12px 20px; z-index:200;
  font-size:0.85rem;
}
.skip-link:focus{ left:16px; top:16px; }

h1, h2, h3{ font-family: var(--font-heading); font-weight:600; line-height:1.15; color: var(--color-overlay);}

.wrap{ max-width: var(--max-width); width: 100%; margin:0 auto; padding:0 32px; }
section{ padding:0; }
section[id] { scroll-margin-top: 127px; }

.section-space{
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
/* Solo per le sezioni con poco contenuto (Hero, Contatti):
   su quelle lunghe (Portfolio, Laboratori, About) centrare
   taglierebbe la parte superiore, perché il contenuto supera
   l'altezza dello schermo. */
.section-space--center{ justify-content: center; }
.section-head{  margin-top:26px; margin-bottom:56px; }
#portfolio .section-head{ margin-bottom:24px; }
.section-head .eyebrow{
  font-family: var(--font-section); font-size:1.72rem;
  text-transform:lowercase; color: var(--color-accent); display:block; margin-bottom:14px;
}

/* Eyebrow delle pagine progetto: font pulito e maiuscolo (font-body),
   diverso da quello decorativo della home. Scoperto tramite
   #project-content così non serve toccare l'HTML delle pagine
   progetto, né le classi da cui dipende il posizionamento dei
   pulsanti precedente/successivo. */
#project-content .eyebrow{
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section-head h2{ font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.section-head p{ color: var(--color-text-muted); max-width:58ch; margin-top:14px; font-size:1rem; }

/* ============================================================
   HEADER
   ============================================================ */
header{
  position:sticky; top:0; z-index:100;
  background: rgba(250,250,250,0.92);
  backdrop-filter: blur(6px);
}
.nav{
  max-width: var(--max-width); margin:0 auto; padding:24px 32px;
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:24px;
}

.nav-left{ display:flex; align-items:center; justify-content: flex-start; }
.brand{
  display:inline-flex; align-items:center;
  white-space:nowrap;
}
.brand .logo{
  height:80px; width:auto; display:block;
  mix-blend-mode: multiply
}


@media (max-width:480px){ .brand .logo{ height:48px; } }
.nav-links{
  display:flex; gap:36px; font-size:0.82rem; letter-spacing:0.03em;
  color: var(--color-accent);
}

.nav-links a{ position:relative; padding-bottom:3px; padding-left:0; border-bottom:1px solid transparent; transition: padding-left 0.2s ease; }
.nav-links a:hover, .nav-links a:focus-visible{ border-bottom-color: var(--color-overlay-light); }

/* Pallino a sinistra della voce attiva (la sezione in cui ci si trova). */
.nav-links a.is-active{ padding-left:16px; }
.nav-links a.is-active::before{
  content:'';
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:7px; height:7px; border-radius:50%;
  background: var(--color-rust);
}

.nav-right{ display:flex; align-items:center; gap:20px; justify-content:flex-end; }
.lang-switch{ display:flex; gap:14px; font-size:0.82rem; letter-spacing:0.03em; }
.lang-switch button{
  background:none; border:none; padding:0 0 3px;
  color: var(--color-text-muted);
  border-bottom:1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.lang-switch button:hover, .lang-switch button:focus-visible{ color: var(--color-accent); }
.lang-switch button.active{
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.nav-toggle{
  display:none; background:none; border:1px solid var(--color-border);
  width:40px; height:34px; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
  position:relative; z-index:210;
}
.nav-toggle-bar{
  display:block; width:20px; height:2px; background: var(--color-accent);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Le due linee diventano una X quando il menu è aperto */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child{ transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child{ transform: translateY(-4px) rotate(-45deg); }

.nav-lang-mobile{ display:none; }

@media (max-width:820px){
  .nav{ grid-template-columns: 1fr auto; }
  .nav-right{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-links{
    display:none; position:fixed; top:0; left:0;
    width:100vw; height:100vh; height:100dvh;
    flex-direction:column; justify-content:center; align-items:center;
    gap:28px; background: var(--color-bg);
    padding:96px 32px 48px; overflow-y:auto;
    font-size:1.15rem;
    z-index:200;
  }
  .nav-links.open{ display:flex; }
  .nav-lang-mobile{
    display:block; margin-top:12px; padding-top:24px;
    border-top:1px solid var(--color-border);
  }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding:56px 0; }

.hero-collage{
  position: relative;
  width: 100%;
  height: 780px;
}

.hero-tile{
  position: absolute;
  background:#ececec00;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.hero-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-tile span{
  font-size:0.65rem; text-transform:uppercase; letter-spacing:0.05em;
  color: var(--color-text-muted); text-align:center; padding:4px;
}

/* Comparsa scaglionata: ogni tessera appare una alla volta, in ordine
   non sequenziale (non 1,2,3... ma mischiato) per un effetto quasi
   casuale. "forwards" mantiene il risultato finale (opacità piena)
   una volta terminata l'animazione, invece di tornare invisibile. */
@keyframes heroAppare{
  from{ opacity:0; transform: scale(0.85); }
  to{ opacity:1; transform: scale(1); }
}
.hero-tile{
  opacity:0;
  animation: heroAppare 0.6s ease-out forwards;
}
.hero-tile:nth-child(1){ animation-delay:0.1s; }
.hero-tile:nth-child(2){ animation-delay:0.9s; }
.hero-tile:nth-child(3){ animation-delay:0.3s; }
.hero-tile:nth-child(4){ animation-delay:1.3s; }
.hero-tile:nth-child(5){ animation-delay:0.5s; }
.hero-tile:nth-child(6){ animation-delay:1.7s; }
.hero-tile:nth-child(7){ animation-delay:0.2s; }
.hero-tile:nth-child(8){ animation-delay:1.1s; }
.hero-tile:nth-child(9){ animation-delay:0.7s; }
.hero-tile:nth-child(10){ animation-delay:1.5s; }

@media (prefers-reduced-motion: reduce){
  .hero-tile{ animation:none; opacity:1; }
}

/* Una volta cliccata una voce del menu, lo scroll naturale della pagina
   (smooth, già impostato su html) attraversa tutte le sezioni fino a
   quella scelta. Solo a scroll terminato l'Hero viene tolta dal flusso,
   così non ricompare più risalendo. Ricompare solo ricaricando la pagina
   (es. click sul logo). */
.hero.hero-hidden{ display:none; }

.hero-text{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(90%, 560px);
  text-align: center;
  z-index: 5;
}
.hero-text h1{ font-size: clamp(2.1rem, 4.2vw, 3.2rem);  margin-bottom: 30px; }
.hero-text p{ margin-top:16px; color: var(--color-overlay); font-size:1.02rem; }

/* Loop hero: nascosto su desktop (lì c'è il collage sparso) */
.hero-mobile{ display:none; }
.hero-loop{
  position:relative;
  width:100%;
  aspect-ratio: 3/4; background:#ececec; overflow:hidden;
}
.hero-loop img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition: opacity 0.6s ease;
}
.hero-loop img.is-active{ opacity:1; }
.hero-mobile-text h1{ font-size: clamp(2rem, 8vw, 1.6rem); text-align: center;}
.hero-mobile-text p{ margin-top:16px; margin-bottom:28px; color: var(--color-text-muted); font-size:0.8rem; text-align: center; }

@media (max-width: 900px){
  .hero.section-space{ min-height:100vh; justify-content:center; }
  .hero{ padding: 24px 0 40px; }
  /* Su mobile nascondo il collage sparso e mostro il loop */
  .hero-collage{ display:none; }
  .hero-mobile{ display:block; padding: 0 24px; width:100%; }
}

/* ============================================================
   PORTFOLIO / GALLERIA
   ============================================================ */
.filters{ display:flex; flex-wrap:wrap; gap:24px; margin-bottom:44px; }
.filter-btn{
  background:none; border:none; color: var(--color-accent);
  padding:6px 0; font-size:0.85rem; letter-spacing:0.02em;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.filter-btn:hover, .filter-btn:focus-visible{ color: var(--color-rust); }
.filter-btn.active{ color: var(--color-rust); border-bottom-color: var(--color-rust); }

.gallery-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px; /* griglia a piena larghezza, tipo "muro di immagini" — aumenta se preferisci più respiro */
  width: 100%;
}
@media (max-width: 1000px){ .gallery-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px){
  .gallery-grid{ grid-template-columns: 1fr; gap: 0; margin-bottom: 70px; }
  .plate-image{ aspect-ratio: 3/1 !important; }
  .plate-image img{  width:100%; height:100%; object-fit:cover; object-position: center;}
  .plate-caption{ display:none !important; }
}

.plate{
  position:relative;
  display:block;
}
.plate.hidden{ display:none; }

.plate-image{
  position:relative;
  aspect-ratio: 4/3; /* proporzione fissa: ordine di lettura preservato, nessun buco */
  background: #ececec;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.plate-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.plate-image span.ph{
  font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color: var(--color-text-muted);
}

.plate-overlay{
  position:absolute; inset:0;
  background: rgba(76,90,104,0.82); /* --color-overlay */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:20px;
  opacity:0; transition: opacity 0.3s ease;
  color:#fff;
}
.plate-overlay .p-title{ font-family: var(--font-img); text-transform:uppercase; font-size:17px; margin-bottom:6px; }
.plate-overlay .p-cat{ font-family: var(--font-body); font-size:0.72rem; letter-spacing:0.08em; text-transform:none; opacity:0.85; }

/* Desktop: overlay on hover, no caption below */
@media (hover:hover) and (pointer:fine){
  .plate:hover .plate-overlay, .plate:focus-visible .plate-overlay{ opacity:1; }
  .plate-caption{ display:none; }
}

/* Mobile/touch: caption always visible below image, no overlay */
@media (hover:none), (pointer:coarse){
  .plate-overlay{ display:none; }
  .plate-caption{
    padding:12px 4px; display:flex; justify-content:space-between; gap:8px;
  }
  .plate-caption .p-title{ font-family: var(--font-img); font-size:0.8rem; color: #4C5A68;}
  .plate-caption .p-cat{ font-size:0.65rem; letter-spacing:0.05em; text-transform:uppercase; color: var(--color-text-muted); }
}

/* ============================================================
   LABORATORI
   ============================================================ */
.lab-columns{ display:grid;
  grid-template-columns: 1fr 1fr;
  gap:56px;
  align-items:center;
}

@media (max-width:800px){
  .lab-columns{ grid-template-columns:1fr; }
  .lab-intro{ text-align:left; }
}

.lab-intro p{ margin-bottom:16px; font-size:1.02rem; }
.lab-intro p:last-of-type{ color: var(--color-text-muted); font-size:0.92rem; margin-bottom:28px; }

.lab-loop{
  position:relative;
  width:100%; max-width:none;
  aspect-ratio: 4/3; background:#ececec; overflow:hidden;
  margin:0;
}
.lab-loop img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0;
  transition: opacity 0.25s ease;
}
.lab-loop img.is-active{ opacity:1; }

.cta-link{
  font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase; color: var(--color-accent);
  border-bottom:1px solid var(--color-rust); padding-bottom:2px;
}
/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:24px; margin-top:26px; }
@media (max-width:800px){ .about-grid{ grid-template-columns:1fr; } }

.about-text{ order:1; grid-column: span 7; display:flex; flex-direction:column; }
.about-body{ margin-top:auto;
margin-left: 22%;}
.about-portrait{
  order:2; grid-column: span 4;
  aspect-ratio: 3/4; background:#ececec; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
@media (max-width:800px){
  .about-text{ order:2; grid-column: span 1; }
  .about-portrait{ order:1; grid-column: span 1; }
  .about-body{ margin-left:0; }
  .about-text p{ text-align:left !important; margin-left:0; }
  .client-list{ justify-content:flex-start !important; }
}
.about-portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-portrait span{ font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color: var(--color-text-muted); }

.about-text .eyebrow{
  font-size:1.72rem; text-transform:lowercase;
  color: var(--color-accent); display:block; margin-bottom:24px; 
  font-family: var(--font-section);
}
.about-text p{ text-align:right; margin-bottom:20px; max-width:62ch; margin-left:auto; font-size:1rem; }

.client-list{
  margin-top:28px; padding-top:24px; border-top:1px solid var(--color-border);
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px 26px; font-size:0.85rem; color: var(--color-text-muted);
}

/* Esposizioni / Pubblicazioni / Commissioni — tre colonne affiancate */
.info-lists{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:48px;
  margin-top: 156px; margin-bottom: 56px; padding-top:32px; border-top:1px solid var(--color-border);
}
@media (max-width:800px){ .info-lists{ grid-template-columns:1fr; gap:36px; } }
.info-list h3{
  font-family: var(--font-body); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--color-accent); margin-bottom:20px; font-weight:600;
}
.info-list-item{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--color-border);
  font-size:0.86rem; color: var(--color-text-muted);
}
.info-list-item:last-child{ border-bottom:none; }
.info-list-item .info-year{ color: var(--color-text); white-space:nowrap; font-variant-numeric: tabular-nums; }
.info-list-item > span:last-child{ text-align:right; }

/* ============================================================
   CONTATTI
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:64px; width: stretch;}
@media (max-width:800px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-lead{ text-align:left !important; }
  .contact-list{ text-align:left !important; }
  .social-list{ justify-content:flex-start !important; }
}
.contact-lead{ font-family: var(--font-heading); font-size:1.7rem; color: var(--color-border); padding-top: 5px; text-align:right; }
.contact-list{ margin-top:28px; color: var(--color-border); text-align:right; }
.contact-list li{ margin-bottom:14px; font-size:0.95rem;}
.contact-list a{ border-bottom:1px solid var(--color-border);}
.contact-list a:hover{ border-color: var(--color-accent); color: var(--color-accent); }
.social-list{ display:flex; justify-content:flex-end; gap:20px; margin-top:32px; font-size:0.85rem; }
.social-list a{ border-bottom:1px solid var(--color-border); }
.social-list a:hover{ border-color: var(--color-accent); color: var(--color-accent); }

.contatti-dark .contact-lead{ color:#fff; }
.contatti-dark .contact-list{ color: rgba(255,255,255,0.85);}
.contatti-dark .contact-list a{ border-bottom-color: rgba(255,255,255,0.4); }
.contatti-dark .contact-list a:hover{ border-color:#fff; color:#fff; }
.contatti-dark .social-list a{ color: rgba(255,255,255,0.85); border-bottom-color: rgba(255,255,255,0.4); }
.contatti-dark .social-list a:hover{ border-color:#fff; color:#fff; }
.contatti-dark label{ color: rgba(255,255,255,0.7) !important; }
.contatti-dark input, .contatti-dark textarea{
  color:#fff !important;
  border-color: rgba(255,255,255,0.4) !important;
}
.contatti-dark input::placeholder, .contatti-dark textarea::placeholder{ color: rgba(255,255,255,0.5); }
.contatti-dark button[type="submit"]{
  background: #fff !important;
  color: var(--color-text) !important;
}
.contatti-dark button[type="submit"]:hover{ background: rgba(255,255,255,0.85) !important; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background: var(--color-footer-bg);
  padding:30px 0;
  font-size:0.8rem; color: var(--color-text);
}
footer .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ============================================================
   FRECCE NAVIGAZIONE PROGETTO (a fianco dell'immagine, non sovrapposte)
   ============================================================ */
.page-nav-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-rust);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  text-decoration: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.page-nav-arrow--prev { left: 24px; }
.page-nav-arrow--next { right: 24px; }

/* Su desktop si vede la lettera P/N, su mobile la parola intera */
.nav-text--mobile{ display:none; }
@media (max-width:1100px){
  .nav-text--desktop{ display:none; }
  .nav-text--mobile{ display:inline; }
}

/* Nasconde completamente l'icona della freccia */
.page-nav-arrow .arrow-icon {
  display: none !important;
}

/* Testo prev/next con font del paragrafo (p) */
.page-nav-arrow .nav-text {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  color: #ffffff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  user-select: none;
}

/* HOVER: Il pallino rimane identico nelle dimensioni, cambia colore e mostra il testo */
.page-nav-arrow:hover,
.page-nav-arrow:focus-visible {
  background: #7d2f22;
  box-shadow: 0 4px 12px rgba(156, 59, 44, 0.25);
}

.page-nav-arrow:hover .nav-text,
.page-nav-arrow:focus-visible .nav-text {
  opacity: 1;
}

@media (max-width: 1100px) {
  /* Su mobile le frecce non stanno più fisse ai lati: diventano due link
     testuali in cima al contenuto della pagina progetto. */
  .page-nav-arrow {
    position: static;
    transform: none;
    width: auto; height: auto;
    border-radius: 0;
    background: none;
    color: var(--color-accent);
    display: inline-flex;
    z-index: auto;
    box-shadow: none !important;
  }
  .page-nav-arrow--prev, .page-nav-arrow--next { left:auto; right:auto; }

  #project-content .wrap{ display:flex; flex-wrap:wrap; }
  .page-nav-arrow--prev{ order:1; margin-right:auto; }
  .page-nav-arrow--next{ order:2; margin-left:auto; }
  #project-content .section-head,
  #project-content .project-hero-image,
  #project-content .project-meta,
  #project-content .process-grid,
  #project-content .project-body{ order:3; width:100%; }
  /* L'immagine principale in flex-wrap collasserebbe a larghezza 0:
     la forzo a piena larghezza (le proporzioni le gestisce la regola base). */
  #project-content .project-hero-image{
    flex: 0 0 100%;
    width:100%;
  }

  .page-nav-arrow .nav-text{
    opacity:1; pointer-events:auto;
    color: var(--color-accent);
    border-bottom:1px solid var(--color-border);
    padding-bottom:2px;
    font-size:0.85rem;
  }
  .page-nav-arrow:hover, .page-nav-arrow:focus-visible{ background:none; }
}

/* ============================================================
   ZOOM / LIGHTBOX
   Aggiungi class="zoomable" a qualunque <img> per renderla cliccabile
   e apribile a schermo intero.
   ============================================================ */
img.zoomable{ cursor: zoom-in; }

/* ============================================================
   BARRA DI CARICAMENTO PAGINA
   Mostrata subito al click su un link interno che porta a un'altra
   pagina, per dare un riscontro immediato se il caricamento richiede
   un attimo. Non serve nasconderla: il sito è multipagina, quindi
   sparisce da sola insieme al resto del documento quando la nuova
   pagina arriva.
   ============================================================ */
.page-loading-bar{
  position: fixed; top:0; left:0; height:3px; width:0%;
  background: var(--color-rust);
  z-index: 300;
  transition: width 4s cubic-bezier(0.1, 0.7, 0.3, 1);
}
.page-loading-bar.is-loading{ width: 80%; }
@media (prefers-reduced-motion: reduce){
  .page-loading-bar{ transition: none; }
}

/* ============================================================
   DISSOLVENZA IMMAGINI AL CARICAMENTO
   Applicata solo alle immagini "statiche" (galleria, immagini
   progetto, ritratto about — vedi script.js): niente scatto quando
   un'immagine pesante finisce di scaricarsi. I caroselli hero/
   laboratori gestiscono già da soli la propria opacità e restano
   esclusi.
   ============================================================ */
.plate-image img,
.project-hero-image img,
.process-image img,
.about-portrait img{
  opacity: 0;
  transition: opacity 0.5s ease;
}
.plate-image img.img-loaded,
.project-hero-image img.img-loaded,
.process-image img.img-loaded,
.about-portrait img.img-loaded{
  opacity: 1;
}
@media (prefers-reduced-motion: reduce){
  .plate-image img, .project-hero-image img, .process-image img, .about-portrait img{
    opacity: 1; transition: none;
  }
}

.lightbox-overlay{
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(27,24,21,0.94);
  display:flex; align-items:center; justify-content:center;
  padding: 32px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease;
}
.lightbox-overlay.is-open{ opacity: 1; visibility: visible; }
.lightbox-overlay img{
  max-width: 100%; max-height: 90vh; width: auto; height: auto;
  cursor: zoom-out;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-close{
  position: absolute; top: 24px; right: 32px;
  background: none; border: 1px solid rgba(255,255,255,0.4); color:#fff;
  width: 40px; height: 40px; font-size: 1.3rem; line-height:1;
  cursor: pointer;
}
.lightbox-close:hover{ border-color:#fff; }
@media (prefers-reduced-motion: reduce){
  .lightbox-overlay{ transition:none; }
}

/* ============================================================
   PAGINE PROGETTO — regole condivise
   Prima erano duplicate in ogni singola pagina (<style> in cima
   a ciascun file). Ora sono qui: nelle pagine progetto basta
   il link a style.css, senza <style> locale — un'unica modifica
   vale per tutte.
   ============================================================ */

.project-title{ font-size:clamp(0.8rem, 2.2vw, 1.1rem); margin-bottom:36px; max-width:20ch; }

.project-hero-image{
  background:#ececec00;
  overflow:hidden;
  margin-bottom: 80px;
  text-align:center;
}
.project-hero-image img{
  max-width:100%;
  max-height:60vh;      /* non supera l'80% dell'altezza schermo: resta intera senza uscire */
  width:auto; height:auto;
  object-fit:contain; display:inline-block;
}
.project-hero-image span{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--color-text-muted); }

.project-meta{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  padding:26px 0; margin-bottom:48px; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border);
}
@media (max-width:700px){ .project-meta{ grid-template-columns:repeat(2,1fr); } }
.project-meta dt{ font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--color-accent); margin-bottom:6px; }
.project-meta dd{ font-size:0.95rem; }

.project-body{ max-width:68ch; margin-bottom:60px; }
.project-body p{ margin-bottom:20px; }

.process-grid{ column-count:2; column-gap:32px; margin:0 auto 60px; max-width:800px; }
@media (max-width:700px){ .process-grid{ column-count:1; } }
.process-grid .process-image{
  break-inside: avoid;
  margin-bottom:40px;
  background:#ececec;
}
.process-image img{ width:100%; height:auto; display:block; }
.process-image span{ font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--color-text-muted); }

/* Freccine disegnate in CSS (sempre centrate, indipendenti dal font) */
.page-nav-arrow .arrow-icon{
  display:block;
  width:8px; height:8px;
  border-style: solid;
  border-color: #fff;
  border-width: 0 2px 2px 0;
}
.page-nav-arrow--prev .arrow-icon{ transform: rotate(135deg); margin-left:4px; }
.page-nav-arrow--next .arrow-icon{ transform: rotate(-45deg); margin-right:4px; }

.page-nav-label{
  position: fixed;
  top: calc(50% + 32px);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-rust);
  z-index: 50;
}
.page-nav-label--prev{ left: 24px; }
.page-nav-label--next{ right: 24px; }
@media (max-width: 1100px){
  .page-nav-label{ display:none; }
}