/* ============================================================
   Crizzo — Nature
   Plaster ground · crimson forms · l'insieme in apertura
   ============================================================ */

:root{
  --paper:   #d8d6d1;   /* plaster ground */
  --paper-2: #cecbc4;
  --paper-text: #ece9e3; /* fondo più chiaro per le aree di testo */
  --ink:     #1c1512;   /* warm near-black */
  --wine:    #7e1522;   /* crimson drawn from the work */
  --wine-2:  #9a2230;
  --muted:   #6d6259;
  --line:    rgba(28,21,18,.16);
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(17px,1.05vw + 12px,21px);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }

/* subtle plaster grain */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

.mono{ font-family:var(--mono); font-size:.62em; letter-spacing:.12em; text-transform:uppercase; }
.kicker{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1.2rem;
}

/* ---------- fixed chrome ---------- */
.chrome{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(14px,2.2vw,26px) clamp(18px,3vw,40px);
}
.brand{
  font-size:clamp(28px,2.6vw,40px); font-weight:600; letter-spacing:.02em; text-decoration:none;
  mix-blend-mode:multiply;
  transition:opacity .35s ease;
}
body.scrolled .brand{ opacity:0; pointer-events:none; }
.brand-group{ display:flex; align-items:baseline; gap:.5em; }
.brand__page{
  font-family:var(--serif); font-size:clamp(12px,1.1vw,15px); font-weight:400; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em;
  mix-blend-mode:multiply; transition:opacity .35s ease;
}
body.scrolled .brand-group{ opacity:0; pointer-events:none; }
.nav{ display:flex; gap:clamp(18px,2.4vw,36px); }
.nav a{
  font-family:var(--mono); font-size:clamp(.8rem,1vw,1rem); letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; color:var(--muted); padding-bottom:3px; border-bottom:1px solid transparent;
  transition:color .3s, border-color .3s, opacity .35s ease;
  mix-blend-mode:multiply;
}
.nav a:hover{ color:var(--wine); border-color:var(--wine); }
.nav__lang{ padding-left:clamp(18px,2.4vw,36px); border-left:1px solid var(--line); }
body.nav-collapsed .nav__lang{ padding-left:0; border-left:0; }

/* hamburger toggle — nascosto finché il body non ha .nav-collapsed
   (soglia stretta, gestita via JS, o scroll sopra la seconda colonna di Racconti) */
.menu-toggle{
  display:none; flex-direction:column; align-items:flex-end; justify-content:center; gap:6px;
  width:32px; height:26px; padding:0; background:none; border:none; cursor:pointer; z-index:41;
  mix-blend-mode:multiply;
}
.menu-toggle span{
  display:block; height:1px; width:100%; background:var(--ink);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s, width .3s;
}
.menu-toggle span:nth-child(2){ width:68%; }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); width:100%; }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); width:100%; }

body.nav-collapsed .menu-toggle{ display:flex; }
body.nav-collapsed .nav{
  position:fixed; inset:0 0 0 auto; z-index:40;
  width:min(320px,90vw); height:100svh;
  background:var(--paper);
  flex-direction:column; align-items:flex-start; justify-content:center;
  gap:clamp(1.6rem,5vh,2.4rem); padding:0 clamp(32px,9vw,54px);
  box-shadow:-1px 0 0 var(--line);
  transform:translateX(100%);
}
/* la transizione si attiva solo dopo il primo posizionamento (via JS),
   così entrare/uscire dalla modalità hamburger durante lo scroll è istantaneo
   e non fa "scivolare" il pannello in vista; scivola solo apri/chiudi manuale */
body.nav-collapsed .nav.nav--anim{ transition:transform .4s cubic-bezier(.2,.8,.2,1); }
body.nav-collapsed .nav.open{ transform:translateX(0); }
body.nav-collapsed .nav a{ font-size:.95rem; }

/* ============================================================
   APERTURA — l'insieme su una schermata
   ============================================================ */
.stage{
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(26px,5vh,60px); text-align:center;
  padding:clamp(88px,12vh,130px) clamp(20px,3vw,48px) clamp(40px,7vh,70px);
}
.stage__head{ max-width:66rem; }
.overline{
  font-family:var(--mono); font-size:clamp(.86rem,1.3vw,1.15rem); letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin:0 0 1.1rem;
}
.overline .ov-line{ display:inline; }
.overline .ov-line + .ov-line::before{ content:" · "; }
@media (max-width:560px){
  .overline .ov-line{ display:block; }
  .overline .ov-line + .ov-line::before{ content:none; }
}
@media (min-width:821px){
  .overline{ white-space:nowrap; }
}
.stage__title{
  font-size:clamp(2rem,4.4vw,3.6rem); font-weight:400; line-height:1.04;
  margin:0; letter-spacing:-.01em;
}
.stage__title em{
  font-style:italic; font-size:.6em; color:var(--wine);
  display:inline-block; margin-top:.4em;
}

/* the row of works — statica e centrata (scorrevole via swipe se necessario) */
.ensemble{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(14px,2.6vw,50px); width:100%; min-width:0;
  overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none;
}
@supports (justify-content: safe center){
  .ensemble{ justify-content:safe center; }
}
.ensemble::-webkit-scrollbar{ display:none; }
.work{
  flex:0 1 auto; min-width:0; margin:0;
  display:flex; flex-direction:column; align-items:center;
  cursor:zoom-in;
}
.work img{
  height:min(52vh,20vw); width:auto; object-fit:contain; display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .35s;
}
.work:hover img,
.work:focus-visible img{ opacity:.9; transform:scale(1.02); }
.work:focus{ outline:none; }

/* ============================================================
   OPERA V + studio
   ============================================================ */
.finale{
  padding:clamp(60px,11vh,140px) clamp(24px,7vw,120px);
  display:flex; justify-content:center; align-items:flex-end;
  gap:clamp(24px,5vw,90px); flex-wrap:wrap;
}
.finale__item{
  border:0; background:none; padding:0; margin:0; display:block;
  cursor:zoom-in; flex:0 1 auto; line-height:0;
}
.finale__main img{
  width:auto; height:auto; max-height:82vh; max-width:100%;
  transition:opacity .35s, transform .6s cubic-bezier(.2,.8,.2,1);
}
.finale__item:hover img,
.finale__item:focus-visible img{ opacity:.92; transform:scale(1.01); }
.finale__small{
  width:auto; height:auto; max-height:34vh; max-width:100%; flex:0 0 auto;
}
.finale__fig{ margin:0; display:flex; flex-direction:column; align-items:center; }

/* studio singolo (barbabietola da sola) */
.studio{
  padding:clamp(60px,11vh,140px) clamp(24px,7vw,120px);
  display:flex; justify-content:center;
}
.studio__fig{ margin:0; display:flex; flex-direction:column; align-items:center; }
.studio__fig img{
  width:auto; height:auto; max-height:34vh; max-width:100%;
  transition:opacity .35s, transform .6s cubic-bezier(.2,.8,.2,1);
}

/* Racconti */
.racconti{
  padding:clamp(80px,14vh,180px) clamp(24px,7vw,120px);
  background:var(--paper-text);
}
.racconti__num{
  text-align:center; font-weight:400; color:var(--muted);
  font-size:clamp(1.6rem,2.8vw,2.3rem); line-height:1.1; margin:0;
}
.racconti__sub{
  text-align:center; font-style:italic; color:var(--muted);
  font-size:clamp(1.15rem,1.7vw,1.4rem); margin:.3em 0 clamp(40px,7vh,80px);
}
.racconti__body{ max-width:40rem; margin:0 auto; }
.racconti__body p{
  margin:0 0 1.5rem; color:#2a201b; line-height:1.65;
}
.racconti__more{
  display:block;
  margin:1.6rem auto 0; padding:0; width:100%;
  font-family:var(--mono); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--wine); background:none; border:0; cursor:pointer; text-align:center;
}
.racconti__body.is-collapsed{
  position:relative; max-height:44vh; overflow:hidden;
}
.racconti__body.is-collapsed::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:5rem;
  background:linear-gradient(to bottom, transparent, var(--paper-text));
  pointer-events:none;
}

/* Numero 3 — titolo di serie */
.n3-intro{
  padding:clamp(80px,14vh,160px) clamp(24px,7vw,120px) clamp(20px,4vh,40px);
  text-align:center;
}
.n3-intro__num{
  font-weight:400; color:var(--ink);
  font-size:clamp(2rem,4.4vw,3.6rem); line-height:1.04; margin:0;
}
.n3-intro__sub{
  font-style:italic; color:var(--wine);
  font-size:clamp(1rem,1.6vw,1.25rem); margin:.4em 0 0;
}
#studio-n3-1 .studio__fig img{ max-height:42vh; }

/* fullscreen lightbox */
.lightbox{
  position:fixed; inset:0; z-index:70;
  background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,4vw,64px);
  opacity:0; visibility:hidden; cursor:zoom-out;
  transition:opacity .4s ease;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox__img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  transition:opacity .3s ease;
}
.lightbox__close{
  position:absolute; top:clamp(16px,3vw,34px); right:clamp(16px,3vw,40px);
  background:none; border:none; cursor:pointer; z-index:2;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
}
/* frecce prev/next — visibili solo a schermo intero, ben lontane dalla foto */
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  width:clamp(40px,4.5vw,56px); height:clamp(40px,4.5vw,56px);
  border:0; background:none;
  cursor:pointer; color:var(--ink); z-index:2;
  opacity:.6;
  transition:opacity .3s, color .3s, transform .25s;
}
.lightbox__nav::before{
  content:""; width:11px; height:11px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
}
.lightbox__nav--prev::before{ transform:rotate(135deg); margin-left:3px; }
.lightbox__nav--next::before{ transform:rotate(-45deg); margin-right:3px; }
.lightbox__nav:hover{ opacity:1; color:var(--wine); }
.lightbox__nav--prev{ left:clamp(16px,4.5vw,64px); }
.lightbox__nav--prev:hover{ transform:translateY(-50%) translateX(-3px); }
.lightbox__nav--next{ right:clamp(16px,4.5vw,64px); }
.lightbox__nav--next:hover{ transform:translateY(-50%) translateX(3px); }
.lightbox__nav[hidden]{ display:none; }
@media (max-width:820px){
  /* su smartphone le frecce escono dall'area della foto e si spostano
     in una riga più in alto, non incollata al bordo inferiore */
  .lightbox{ padding-bottom:150px; }
  .lightbox__nav{ top:auto; bottom:72px; transform:none; }
  .lightbox__nav--prev{ left:calc(50% - 56px); right:auto; }
  .lightbox__nav--next{ left:calc(50% + 8px); right:auto; }
  .lightbox__nav--prev:hover{ transform:translateX(-3px); }
  .lightbox__nav--next:hover{ transform:translateX(3px); }
}

/* ============================================================
   IL PROGETTO
   ============================================================ */
.testo{
  padding:clamp(70px,12vh,160px) clamp(24px,7vw,120px);
  background:var(--paper-text);
}
.testo__body{ max-width:38rem; margin:0 auto; }
.testo__h{
  font-size:clamp(1.7rem,2.6vw,2.5rem); font-weight:500; line-height:1.08;
  margin:0 0 1rem; letter-spacing:-.01em;
}
.testo p{ margin:0 0 1.1rem; color:#2a201b; }
.testo em{ color:var(--wine); font-style:italic; }
.drop{ float:left; font-size:3.4em; line-height:.72; padding:.05em .08em 0 0; color:var(--wine); font-weight:500; }

/* ============================================================
   CURRICULUM
   ============================================================ */
.curriculum{
  padding:clamp(70px,12vh,160px) clamp(24px,7vw,120px);
  background:var(--paper-text);
}
.curriculum__body{ max-width:38rem; margin:0 auto; }
.curriculum p{ margin:0 0 1.1rem; color:#3a2f28; }
.curriculum em{ color:var(--wine); font-style:italic; }

/* ============================================================
   ARCHIVIO — lavori precedenti, raggruppati per serie
   ============================================================ */
.archivio{
  padding:clamp(70px,12vh,160px) clamp(24px,7vw,120px);
}
/* pagina standalone: è il primo elemento sotto l'header fisso,
   serve più margine sopra per non finirci sotto */
.archivio--page{ padding-top:clamp(96px,14vh,150px); }
body.page-archivio{ background:#fff; }
body.page-archivio .lightbox{ background:#fff; }
.archivio__list{ max-width:78rem; margin:2.4rem auto 0; }
.archivio__series{ margin-bottom:clamp(46px,7vh,80px); }
.archivio__series:last-child{ margin-bottom:0; }
.archivio__series-title{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1.1rem;
}
.archivio__grid{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px;
}
.archivio__item{
  border:0; background:none; padding:0; margin:0; display:block;
  height:170px; cursor:zoom-in;
}
.archivio__item img{
  height:100%; width:auto; display:block;
  transition:opacity .35s, transform .5s cubic-bezier(.2,.8,.2,1);
}
.archivio__item:hover img,
.archivio__item:focus-visible img{ opacity:.85; transform:scale(1.05); }

@media (max-width:820px){
  /* altezza calcolata sulla foto più larga dell'archivio (ofelia-130x40,
     rapporto ~3.32:1) così, alla larghezza del contenuto su smartphone
     (100vw meno il padding orizzontale, anch'esso in vw), quella singola
     foto occupa l'intera riga da un bordo all'altro */
  .archivio__item{ height:25.9vw; }
}

/* ============================================================
   MOSTRE — elenco cronologico, dalla più recente
   ============================================================ */
.mostre{ padding:clamp(70px,12vh,160px) clamp(24px,7vw,120px); }
.mostre--page{ padding-top:clamp(96px,14vh,150px); }
.mostre__list{ max-width:52rem; margin:0 auto; list-style:none; padding:0; }
.mostre__item{
  display:flex; align-items:baseline; gap:1.1rem; flex-wrap:wrap;
  padding:1rem 0; border-bottom:1px solid var(--line);
}
.mostre__item:first-child{ border-top:1px solid var(--line); }
.mostre__year{
  font-family:var(--mono); font-size:1.05rem; color:var(--wine);
  min-width:3.4rem; flex:0 0 auto;
}
.mostre__venue{ flex:1 1 16rem; font-size:1.1rem; }
.mostre__city{ color:var(--muted); font-style:italic; }
.mostre__type{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); flex:0 0 auto;
}

/* ============================================================
   RASSEGNA STAMPA — articoli e interviste, dal più recente
   ============================================================ */
.press{ padding:clamp(70px,12vh,160px) clamp(24px,7vw,120px); }
.press--page{ padding-top:clamp(96px,14vh,150px); }
.press__list{ max-width:42rem; margin:0 auto; }
.press__item{ margin-bottom:clamp(56px,8vh,90px); }
.press__item:last-child{ margin-bottom:0; }
.press__date{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--wine); margin:0 0 .5rem;
}
.press__title{
  font-size:clamp(1.3rem,2.2vw,1.7rem); font-weight:500; line-height:1.15;
  margin:0 0 .3rem; letter-spacing:-.01em;
}
.press__source{
  font-style:italic; color:var(--muted); font-size:.95rem; margin:0 0 1.2rem;
}
.press__body p{ margin:0 0 1.1rem; color:#2a201b; line-height:1.65; }
.press__body p:last-child{ margin-bottom:0; }
.press__images{ margin:1.2rem 0 1.4rem; }
.press__more{
  display:block;
  margin:1.2rem auto 0; padding:0; width:100%;
  font-family:var(--mono); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--wine); background:none; border:0; cursor:pointer; text-align:center;
}
.press__body.is-collapsed{
  position:relative; max-height:26rem; overflow:hidden;
}
.press__body.is-collapsed::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:5rem;
  background:linear-gradient(to bottom, transparent, #fff);
  pointer-events:none;
}

/* ============================================================
   CONTATTI
   ============================================================ */
.contatti{
  padding:clamp(70px,12vh,160px) clamp(24px,7vw,120px);
  background:var(--paper-text);
}
.contatti__body{ max-width:38rem; margin:0 auto; }
.contatti__form{ display:flex; flex-direction:column; gap:1.6rem; margin-top:2rem; }
.contatti__field{ display:flex; flex-direction:column; gap:.4rem; }
.contatti__field span{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
}
.contatti__field input,
.contatti__field textarea{
  font-family:var(--serif); font-size:1.1rem; color:var(--ink);
  background:none; border:0; border-bottom:1px solid var(--line);
  padding:.4em 0; resize:vertical;
  transition:border-color .3s;
}
.contatti__field input:focus,
.contatti__field textarea:focus{ outline:none; border-color:var(--wine); }
.contatti__submit{
  align-self:flex-start; margin-top:.6rem;
  font-family:var(--mono); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--wine); background:none; border:1px solid var(--wine); padding:.8em 1.8em;
  cursor:pointer; transition:background .3s, color .3s;
}
.contatti__submit:hover{ background:var(--wine); color:var(--paper-text); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  padding:clamp(30px,5vw,60px) clamp(24px,7vw,120px);
  color:var(--muted);
}
.foot__mark{ font-size:1.3rem; color:var(--ink); }

/* tasto torna in cima — appare solo quando si è scorso */
.back-to-top{
  position:fixed; right:clamp(18px,3vw,40px); bottom:clamp(18px,3vw,40px); z-index:35;
  width:clamp(44px,4vw,52px); height:clamp(44px,4vw,52px); border-radius:50%;
  background:var(--paper); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; line-height:1; color:var(--ink); cursor:pointer;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(6px);
  transition:opacity .35s ease, visibility .35s ease, transform .35s ease, border-color .3s, color .3s;
}
body.scrolled .back-to-top{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.back-to-top:hover{ border-color:var(--wine); color:var(--wine); transform:translateY(-3px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:820px){
  .ensemble{ flex-wrap:wrap; gap:clamp(18px,5vw,36px); }
  .work{ flex:1 1 40%; display:flex; justify-content:center; }
  .work img{ height:auto; width:100%; }
}
@media (max-width:560px){
  .stage{ justify-content:flex-start; }
  .work{ flex:1 1 100%; max-width:460px; margin:0 auto; }
  .finale{ align-items:center; gap:clamp(20px,6vw,40px); }
  .finale__small{ max-height:none; max-width:56%; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; }
}