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

:root{
  --paper:   #d8d6d1;   /* plaster ground */
  --paper-2: #cecbc4;
  --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; }
.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); }
body.scrolled:not(.nav-collapsed) .nav a{ opacity:0; pointer-events:none; }

/* 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:60rem; }
.overline{
  font-family:var(--mono); font-size:clamp(.78rem,1.15vw,1rem); letter-spacing:.24em;
  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; }
}
.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{
  border-top:1px solid var(--line);
  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{
  border-top:1px solid var(--line);
  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{
  border-top:1px solid var(--line);
  padding:clamp(80px,14vh,180px) clamp(24px,7vw,120px);
}
.racconti .kicker{ text-align:center; }
.racconti__num{
  text-align:center; font-weight:400; color:var(--ink);
  font-size:clamp(2rem,4vw,3rem); line-height:1.04; margin:0;
}
.racconti__sub{
  text-align:center; font-style:italic; color:var(--wine);
  font-size:clamp(1rem,1.6vw,1.25rem); margin:.4em 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;
}
@media (min-width:821px){
  .racconti__body{
    max-width:64rem;
    column-count:2; column-gap:clamp(50px,6vw,90px); column-rule:1px solid var(--line);
  }
  .racconti__body p{ break-inside:avoid-column; }
}

/* Numero 3 — titolo di serie */
.n3-intro{
  border-top:1px solid var(--line);
  padding:clamp(80px,14vh,160px) clamp(24px,7vw,120px) clamp(20px,4vh,40px);
  text-align:center;
}
.n3-intro .kicker{ text-align:center; }
.n3-intro__num{
  font-weight:400; color:var(--ink);
  font-size:clamp(2rem,4vw,3rem); 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(48px,4.5vw,64px); height:clamp(48px,4.5vw,64px);
  border-radius:50%; border:1px solid var(--line); background:var(--paper);
  cursor:pointer; font-size:1.35rem; color:var(--ink); z-index:2;
  transition:border-color .3s, color .3s, transform .25s;
}
.lightbox__nav:hover{ border-color:var(--wine); 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; }

/* ============================================================
   IL PROGETTO
   ============================================================ */
.testo{
  padding:clamp(70px,12vh,160px) clamp(24px,7vw,120px);
  border-top:1px solid var(--line);
}
.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__serie{
  font-style:italic; font-size:1.35rem; color:var(--wine);
  margin:0 0 1.8rem; display:flex; gap:.7rem; align-items:baseline; flex-wrap:wrap;
}
.testo__serie .mono{ color:var(--muted); }
.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);
  border-top:1px solid var(--line);
}
.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; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  padding:clamp(30px,5vw,60px) clamp(24px,7vw,120px);
  border-top:1px solid var(--line);
  color:var(--muted);
}
.foot__mark{ font-size:1.6rem; 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; }
}