@font-face {
  font-family: 'BanditoDemo-VariableVF';
  src: url('assets/font/pangram/PPPangramSansRounded-Thin.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

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

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


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

  --font-heading: 'BanditoDemo-VariableVF', 'Georgia', 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; }
body{
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}


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;
}

.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: #4c5a688a; letter-spacing: 0.09em;}

.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; }
.section-head .eyebrow{
  font-family: var(--font-body); font-size:0.72rem; letter-spacing:0.14em;
  text-transform:uppercase; color: var(--color-accent); display:block; margin-bottom:14px;
}
.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;
  justify-self:center;
}
.brand .logo{
  height:80px; width:auto; display:block;
  mix-blend-mode: multiply
}


@media (max-width:480px){ .brand .logo{ height:32px; } }
.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-accent); }

/* 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:2px; font-size:0.72rem; letter-spacing:0.05em; }
.lang-switch button{
  background:none; border:1px solid var(--color-border); color: var(--color-text-muted);
  padding:5px 10px;
}
.lang-switch button.active{ background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }

.nav-toggle{
  display:none; background:none; border:1px solid var(--color-border);
  padding:8px 14px; font-size:0.78rem;
}

@media (max-width:820px){
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:18px; background: var(--color-bg);
    border-bottom:1px solid var(--color-border); padding:24px 32px;
  }
  .nav-links.open{ display:flex; }
  .nav-toggle{ display:block; }
}

/* ============================================================
   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;
}

.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); }
.hero-text p{ margin-top:16px; color: var(--color-text-muted); font-size:1.02rem; }

@media (max-width: 900px){
  .hero-collage{
    position: static;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 0 24px;
  }
  .hero-tile{
    position: static !important;
    top: auto !important; left: auto !important;
    width: 100% !important; height: 90px !important;
  }
  .hero-text{
    grid-column: 1 / -1;
    order: -1;
    position: static; transform:none;
    width:100%; text-align:left;
    padding: 24px 0 8px;
  }
}

/* ============================================================
   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; } }

.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-heading); font-size:0.9rem; }
  .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 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-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:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--color-accent); display:block; margin-bottom:24px;
}
.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{ 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; }

/* 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) {
  .page-nav-arrow { display: none; }
}

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

.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 (1.1rem, 2.2vw, 0.8rem); margin-bottom:36px; max-width:20ch; }

.project-hero-image{
  flex:1; min-width:0;
  aspect-ratio:16/9; background:#ececec00; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  margin-bottom: 80px;
}
.project-hero-image img{ height:100%; object-fit:cover; display: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; }
}