/* ============================================================
   VIZO — foglio di stile principale, VERSIONE CHIARA
   Fondo unico beige terra + inchiostro sumi + accento rosso lacca

   ATTENZIONE ai nomi dei token. Sono gli stessi della versione scura,
   apposta: le due cartelle restano gemelle e una correzione fatta qui si
   puo ricopiare tale e quale di la. Ma i ruoli sono ribaltati:

       --sumi   e il FONDO   (qui la carta, li l inchiostro)
       --washi  e il TESTO   (qui l inchiostro, li la carta)

   Quindi non fidarti del nome: guarda il commento accanto al valore.
   ============================================================ */

/* ---------- 1. Token ---------- */
:root{
  /* Un solo fondo per tutto il sito: le sezioni non si alternano piu.
     I tre token restano distinti solo per poter tornare indietro con una
     riga, ma oggi valgono lo stesso colore. */
  --sumi:        #C7B89B;   /* fondo unico: beige terra */
  --sumi-2:      #C7B89B;   /* (era il fondo alternato) */
  --sumi-3:      #C7B89B;   /* (erano le superfici sollevate) */
  --ink:         #A99878;   /* bordi caldi */
  --washi:       #211D17;   /* testo primario: inchiostro */
  /* Scuriti apposta per reggere anche con una pennellata sotto: vedi
     ALPHA_MAX in js/brushes.js. Se alzi quella, ricontrolla questi. */
  --washi-2:     #39332A;   /* testo secondario */
  --washi-3:     #443E32;   /* testo terziario, etichette */

  /* Su un fondo di questa densita il vermiglio acceso scende sotto la
     soglia di leggibilita: l accento scala verso il rosso lacca, che regge
     il contrasto e resta lo stesso rosso dei sigilli. */
  --shu:         #8A2216;   /* rosso lacca, accento unico */
  --shu-soft:    #78190F;   /* per i testi piccoli, es. errori del modulo */
  --shu-deep:    #5E140C;

  /* Il fondo si sposta lentamente lungo la pagina, da --bg-top a --bg-bottom,
     e intanto respira di --bg-breath unita. Il respiro va sempre nel verso
     che ALLONTANA il fondo dal testo (qui: verso il piu chiaro), cosi il
     contrasto misurato non peggiora mai: il beige di base resta il punto
     piu carico che si tocca. Il conto lo fa initScrollAtmosphere in core.js
     e riscrive --sumi, --sumi-2 e --carta-rgb. */
  --bg-top:        #D1C2A5;   /* in cima: un beige piu arioso */
  --bg-bottom:     #C7B89B;   /* in fondo: il beige terra di base */
  --bg2-top:       #D1C2A5;
  --bg2-bottom:    #C7B89B;
  --bg-breath:     3;
  --bg-breath-dir: 1;         /* sul fondo chiaro il respiro schiarisce */

  /* il fondo in cifre: serve per velare le fotografie e il video.
     Da qui in poi lo riscrive il JS a ogni respiro. */
  --carta-rgb:   199,184,155;

  --line:        rgba(33,29,23,.20);
  --line-strong: rgba(33,29,23,.34);

  --f-display: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --f-italic:  "Cormorant Garamond", Georgia, serif;
  --f-ui:      "Barlow Condensed", "Helvetica Neue", Arial, sans-serif;

  --header-h: 76px;
  --pad:      clamp(20px, 5vw, 72px);
  --maxw:     1560px;

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-ink:  cubic-bezier(.65,.02,.18,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* Il fondo sta sull elemento radice, non sul body: cosi il quadro delle
   pennellate puo infilarsi fra il fondo e il contenuto. */
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--sumi);
  /* Anche il taglio orizzontale sta qui e non sul body: se sta sul body, e il
     body a comandare la barra di scorrimento, e la riga qui sotto non conta.
     La barra c e sempre, anche sulle pagine corte: cosi la sua larghezza fa
     parte della pagina e non compare e sparisce spostando tutto. Il blocco
     dello scorrimento infatti non la toglie, blocca il body al suo posto. */
  overflow-x:hidden; overflow-y:scroll;
}

/* ---------- La barra di scorrimento, nei colori del sito ----------
   Non e una barra finta appiccicata sopra: e quella vera del browser,
   rivestita. Cosi si trascina, si clicca e risponde alla rotella come
   si aspetta chiunque, ma non e piu grigia di sistema.
   Il cursore e inchiostro a riposo e diventa rosso quando ci passi
   sopra: la stessa regola dei link. */
html{
  scrollbar-width:thin;                       /* Firefox */
  scrollbar-color:rgba(33,29,23,.42) rgba(33,29,23,.07);
}
::-webkit-scrollbar{width:10px; height:10px}  /* Chrome, Edge, Safari */
::-webkit-scrollbar-track{background:rgba(33,29,23,.07)}
::-webkit-scrollbar-thumb{background:rgba(33,29,23,.42); border:0}
::-webkit-scrollbar-thumb:hover{background:var(--shu)}
::-webkit-scrollbar-thumb:active{background:var(--shu-deep)}
::-webkit-scrollbar-corner{background:transparent}
body{
  margin:0; background:transparent; color:var(--washi);
  font-family:var(--f-ui); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.is-locked{position:fixed; left:0; right:0; width:100%}
img,svg,video{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3,h4{margin:0; font-weight:400; font-family:var(--f-display); line-height:1.12}
p{margin:0 0 1.25em}
::selection{background:var(--shu); color:#fff}

/* Il quadro delle pennellate: sotto a tutto il contenuto, sopra al fondo. */
.brushes{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}
main,.footer{position:relative; z-index:1}

/* grana permanente su tutto il sito */
body::after{
  content:""; position:fixed; inset:-50%; z-index:9000; pointer-events:none;
  opacity:.042; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}      16%{transform:translate(-3%,-4%)}
  33%{transform:translate(2%,-2%)}        50%{transform:translate(-2%,3%)}
  66%{transform:translate(3%,2%)}         83%{transform:translate(-1%,-3%)}
}

/* ---------- 3. Tipografia ---------- */
.kicker{
  font-family:var(--f-ui); font-size:12px; font-weight:400;
  letter-spacing:.34em; text-transform:uppercase; color:var(--washi-3);
  display:flex; align-items:center; gap:14px;
}
.kicker::after{content:""; flex:1; height:1px; background:var(--line); max-width:120px}
.kicker .num{color:var(--shu); font-family:var(--f-display); letter-spacing:0; font-size:14px}

.h-xl{font-size:clamp(38px,6.4vw,86px); letter-spacing:-.015em}
.h-lg{font-size:clamp(30px,4.4vw,58px); letter-spacing:-.01em}
.h-md{font-size:clamp(23px,2.5vw,34px)}
.lead{font-size:clamp(17px,1.35vw,20px); color:var(--washi-2); line-height:1.75; max-width:62ch}
.small{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--washi-3)}
em, .it{font-family:var(--f-italic); font-style:italic; font-weight:400}

.jp-mark{
  font-family:var(--f-display); color:var(--shu); opacity:.62;
  writing-mode:vertical-rl; font-size:clamp(15px,1.2vw,19px); letter-spacing:.5em;
}

/* link con sottolineatura che si traccia */
.ln{position:relative; display:inline-block}
.ln::after{
  content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px;
  background:var(--shu); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.ln:hover::after{transform:scaleX(1); transform-origin:left}

/* ---------- 4. Preloader ---------- */
/* Mentre il marchio viene scritto, la Home dietro sta ferma: altrimenti le sue
   animazioni di entrata finirebbero prima che il velo si alzi, e non le
   vedrebbe nessuno. */
body.writing .hero-tagline,
body.writing .hero-vertical,
body.writing .scroll-cue .bar{animation-play-state:paused}

#preloader{
  position:fixed; inset:0; z-index:10000; background:var(--sumi); overflow:hidden;
}
#preloader.done{
  opacity:0; visibility:hidden;
  transition:opacity .55s var(--ease) .05s, visibility 0s linear .6s;
}
/* il marchio si scrive esattamente dove poi si trovera nella Home:
   larghezza e posizione le imposta il JS */
.pre-logo{position:absolute; left:50%; top:0; transform:translateX(-50%); width:min(58vw,520px)}
.pre-count{
  position:absolute; bottom:var(--pad); right:var(--pad);
  font-family:var(--f-ui); font-size:12px; letter-spacing:.3em; color:var(--washi-3);
}
.pre-count b{color:var(--washi-2); font-weight:400}
/* il marchio prende il colore dal foglio di stile, non dal file */
.pre-logo{z-index:1}
.pre-logo svg{fill:var(--washi)}
.pre-count{z-index:3}

/* apertura "enso": la O viaggia da sola, poi si posa nel marchio */
.pre-o{position:absolute; z-index:1; transform-origin:50% 50%; will-change:transform}
.pre-o svg{width:100%; height:100%; fill:var(--washi)}

/* ---------- 4b. Barra di avanzamento della lettura ---------- */
/* Una linea di inchiostro rosso che si tira mentre si scende. Sta sopra
   alla barra del menu ma sotto al preloader e al velo di transizione. */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:930;
  pointer-events:none; background:var(--line);
}
.progress span{
  display:block; height:100%; background:var(--shu);
  transform:scaleX(0); transform-origin:left center; will-change:transform;
}

/* ---------- 5. Header ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:900; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  transition:background .6s var(--ease), border-color .6s var(--ease), backdrop-filter .6s var(--ease);
  border-bottom:1px solid transparent;
}
.header.solid{
  background:rgba(var(--carta-rgb),.84); backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--line);
}
.header-side{display:flex; align-items:center; gap:26px; flex:1}
.header-side.right{justify-content:flex-end}

.nav{display:flex; gap:30px; align-items:center}
.nav a{
  font-family:var(--f-ui); font-size:12.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--washi-2); position:relative; padding:6px 0;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s ease;
}
.header.solid .nav a,
.header.always-solid .nav a{opacity:1; transform:none; pointer-events:auto}
.header.solid .nav a:nth-child(1){transition-delay:.02s}
.header.solid .nav a:nth-child(2){transition-delay:.07s}
.header.solid .nav a:nth-child(3){transition-delay:.12s}
.header.solid .nav a:nth-child(4){transition-delay:.17s}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--shu); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav a:hover{color:var(--washi)}
.nav a:hover::after,.nav a.current::after{transform:scaleX(1); transform-origin:left}
.nav a.current{color:var(--washi)}

/* bottone con sigillo */
.seal-btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--f-ui); font-size:12.5px; letter-spacing:.24em; text-transform:uppercase;
  border:1px solid var(--line-strong); padding:11px 20px; color:var(--washi);
  position:relative; overflow:hidden; transition:color .45s var(--ease), border-color .45s var(--ease);
}
.seal-btn::before{
  content:""; position:absolute; inset:0; background:var(--shu);
  transform:scaleY(0); transform-origin:bottom; transition:transform .5s var(--ease-ink);
}
.seal-btn:hover{color:#fff; border-color:var(--shu)}
.seal-btn:hover::before{transform:scaleY(1); transform-origin:top}
.seal-btn > *{position:relative}
.seal-btn .dot{width:6px; height:6px; background:var(--shu); border-radius:50%; transition:background .4s; flex:none}
.seal-btn:hover .dot{background:#fff}

/* hamburger (mobile) */
.burger{display:none; width:34px; height:22px; position:relative}
.burger span{
  position:absolute; left:0; height:1px; width:100%; background:var(--washi);
  transition:transform .45s var(--ease), opacity .3s ease;
}
.burger span:nth-child(1){top:2px} .burger span:nth-child(2){top:10px} .burger span:nth-child(3){top:18px}
body.menu-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* menu a tutto schermo */
.overlay-menu{
  position:fixed; inset:0; z-index:880; background:var(--sumi-2);
  display:flex; flex-direction:column; justify-content:center; padding:0 var(--pad);
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease-ink);
}
body.menu-open .overlay-menu{clip-path:inset(0 0 0 0)}
.overlay-menu a{
  font-family:var(--f-display); font-size:clamp(34px,7vw,84px); line-height:1.24;
  color:var(--washi-2); display:flex; align-items:baseline; gap:20px;
  opacity:0; transform:translateY(30px); transition:opacity .6s var(--ease), transform .6s var(--ease), color .3s;
}
body.menu-open .overlay-menu a{opacity:1; transform:none}
body.menu-open .overlay-menu a:nth-child(1){transition-delay:.22s}
body.menu-open .overlay-menu a:nth-child(2){transition-delay:.30s}
body.menu-open .overlay-menu a:nth-child(3){transition-delay:.38s}
body.menu-open .overlay-menu a:nth-child(4){transition-delay:.46s}
.overlay-menu a:hover{color:var(--washi)}
.overlay-menu a .idx{font-family:var(--f-ui); font-size:13px; letter-spacing:.2em; color:var(--shu)}

/* ---------- 6. Logo che si trasforma ---------- */
/* Nascosto finche il JS non lo colloca: senza l apertura a coprire, per un
   fotogramma si vedrebbe in alto e mezzo fuori, prima della trasformazione. */
.logo-morph{
  visibility:hidden;
  position:fixed; z-index:910; top:0; left:50%;
  width:min(64vw,760px); transform-origin:50% 50%;
  pointer-events:none; will-change:transform;
}
.logo-morph.clickable{pointer-events:auto; cursor:pointer}
.logo-morph svg{width:100%; height:auto; fill:var(--washi)}
.logo-morph .enso-path{fill:var(--shu)}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative; height:100svh; min-height:560px; overflow:hidden;
  display:grid; place-items:center;
}
.hero-media{position:absolute; inset:0}
.hero-media video,.hero-media img,.hero-media canvas{
  width:100%; height:100%; object-fit:cover;
  /* il filmato viene tirato verso la carta: schiarito e un po smorzato */
  filter:brightness(.98) contrast(.95) saturate(.86);
}
/* Sul chiaro il marchio e scuro, quindi il velo deve schiarire il filmato
   proprio al centro, dove sta il marchio: e il contrario della versione
   scura, dove il velo scuriva i bordi. Restano piu vive le quattro fasce
   ai lati, cosi il video si vede ancora. */
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(105% 78% at 50% 44%, rgba(var(--carta-rgb),.80) 0%, rgba(var(--carta-rgb),.62) 42%, rgba(var(--carta-rgb),.30) 78%, rgba(var(--carta-rgb),.52) 100%),
    linear-gradient(to bottom, rgba(var(--carta-rgb),.62) 0%, rgba(var(--carta-rgb),.24) 26%, rgba(var(--carta-rgb),.24) 62%, rgba(var(--carta-rgb),.72) 100%);
}
/* Senza video c e lo sfondo animato a inchiostro, che e gia beige e gia
   calmo: velarlo come si vela un filmato lo cancellerebbe del tutto. */
.hero-media.ink::after{
  background:
    radial-gradient(105% 78% at 50% 44%, rgba(var(--carta-rgb),.34) 0%, rgba(var(--carta-rgb),.10) 55%, rgba(var(--carta-rgb),.32) 100%),
    linear-gradient(to bottom, rgba(var(--carta-rgb),.38) 0%, rgba(var(--carta-rgb),0) 26%, rgba(var(--carta-rgb),0) 62%, rgba(var(--carta-rgb),.52) 100%);
}
/* la didascalia segue il marchio: e fissa e la muove il JS */
.hero-caption{
  position:fixed; left:50%; top:0; z-index:911; width:min(92vw,900px);
  visibility:hidden;   /* come sopra: la posiziona il JS */
  text-align:center; pointer-events:none; will-change:transform,opacity;
}
.hero-tagline{
  font-family:var(--f-display); font-size:clamp(14px,1.5vw,20px);
  letter-spacing:.16em; color:var(--washi); opacity:0;
  animation:fadeUp 1.2s var(--ease) forwards;
}
.hero-tagline em{font-family:var(--f-italic); letter-spacing:.02em; font-size:1.15em}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}

/* Il segno verticale e centrato con una trasformazione: la sua animazione di
   entrata deve rispettarla, altrimenti a fine animazione scivola in basso.
   Il quarto di em compensa lo spazio che la spaziatura lascia sotto l ultimo
   carattere, cosi il segno resta ottimamente centrato con uno o quattro segni. */
.hero-vertical{
  position:absolute; left:var(--pad); top:50%; z-index:2; opacity:0;
  transform:translateY(calc(-50% + .25em));
  animation:fadeUpCentered 1.2s var(--ease) .5s forwards;
}
@keyframes fadeUpCentered{
  from{opacity:0; transform:translateY(calc(-50% + .25em + 16px))}
  to{opacity:1; transform:translateY(calc(-50% + .25em))}
}
.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--washi-3);
}
.scroll-cue .bar{width:1px; height:46px; background:linear-gradient(var(--shu),transparent); animation:cue 2.4s var(--ease) infinite}
@keyframes cue{
  0%{transform:scaleY(0); transform-origin:top}
  45%{transform:scaleY(1); transform-origin:top}
  46%{transform:scaleY(1); transform-origin:bottom}
  100%{transform:scaleY(0); transform-origin:bottom}
}

/* ---------- 8. Sezioni e reveal ---------- */
.section{padding:clamp(90px,11vw,190px) var(--pad); position:relative}
/* le sezioni non hanno piu un fondo proprio: sotto ci passano le pennellate */
.section--flush{padding-left:0; padding-right:0}
.wrap{max-width:var(--maxw); margin:0 auto}
.rule{height:1px; background:var(--line); transform:scaleX(0); transform-origin:left; transition:transform 1.4s var(--ease-ink)}
.rule.in{transform:scaleX(1)}

[data-reveal]{opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease)}
[data-reveal].in{opacity:1; transform:none}
/* Le due rivelazioni a tendina non ritagliano il riquadro: ci passano sopra
   con un velo che poi si ritira. Ritagliare l elemento stesso sembra la via
   piu breve, ma un elemento ridotto a zero non risulta mai "in vista" per l
   osservatore che deve accorgersi del suo arrivo: resterebbe chiuso per
   sempre. Il velo invece e un figlio, e il riquadro resta intero. */
[data-reveal="wipe"],[data-reveal="mask"]{opacity:1; transform:none; position:relative}
[data-reveal="wipe"]::before,[data-reveal="mask"]::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:var(--sumi); transition:transform 1.3s var(--ease-ink);
}
[data-reveal="wipe"]::before{transform-origin:right; transition-duration:1.25s}
[data-reveal="mask"]::before{transform-origin:top}
[data-reveal="wipe"].in::before{transform:scaleX(0)}
[data-reveal="mask"].in::before{transform:scaleY(0)}
[data-delay="1"]{transition-delay:.1s} [data-delay="2"]{transition-delay:.2s}
[data-delay="3"]{transition-delay:.3s} [data-delay="4"]{transition-delay:.4s}
[data-delay="5"]{transition-delay:.5s}
/* il ritardo va dato al velo, non al riquadro che ormai non si muove piu */
[data-reveal="wipe"][data-delay="1"]::before,[data-reveal="mask"][data-delay="1"]::before{transition-delay:.1s}
[data-reveal="wipe"][data-delay="2"]::before,[data-reveal="mask"][data-delay="2"]::before{transition-delay:.2s}
[data-reveal="wipe"][data-delay="3"]::before,[data-reveal="mask"][data-delay="3"]::before{transition-delay:.3s}
[data-reveal="wipe"][data-delay="4"]::before,[data-reveal="mask"][data-delay="4"]::before{transition-delay:.4s}
[data-reveal="wipe"][data-delay="5"]::before,[data-reveal="mask"][data-delay="5"]::before{transition-delay:.5s}

/* parole che salgono una alla volta.
   Il ritaglio che le tiene nascoste e alto quanto la riga, ma il Mincho ha
   discendenti lunghe: senza questo spazio in fondo, le code di g, p e y
   restano mozzate. Il margine negativo lo restituisce, cosi l interlinea
   non cambia. Il salto delle parole deve superare riga + spazio. */
.words span{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.18em; margin-bottom:-.18em;
}
.words span i{
  display:inline-block; font-style:inherit; transform:translateY(125%);
  transition:transform .9s var(--ease);
}
.words.in span i{transform:none}

/* ---------- 9. Manifesto ---------- */
.manifesto{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(40px,7vw,120px); align-items:start}
.manifesto-title{margin:26px 0 0}
.manifesto-jp{
  position:absolute; right:var(--pad); top:clamp(60px,8vw,130px);
  font-family:var(--f-display); font-size:clamp(90px,14vw,220px); color:var(--washi);
  opacity:.035; line-height:1; pointer-events:none; user-select:none;
}
.quote{
  margin-top:44px; padding-left:24px; border-left:1px solid var(--shu);
  font-family:var(--f-italic); font-style:italic; font-size:clamp(19px,1.8vw,25px);
  color:var(--washi); line-height:1.5;
}
.sig{margin-top:26px; font-family:var(--f-ui); font-size:12px; letter-spacing:.3em; color:var(--washi-3)}

/* ---------- 10. Strisce progetto (galleria e home) ---------- */
.strip{
  position:relative; display:block; overflow:hidden; background:var(--sumi-2);
  height:clamp(240px,34vw,460px); border-top:1px solid var(--line);
}
.strips .strip:last-child{border-bottom:1px solid var(--line)}
.strip-media{position:absolute; inset:-9% 0}
.strip-media img{width:100%; height:100%; object-fit:cover; will-change:transform;
  filter:grayscale(.32) contrast(.96) brightness(1.04);
  transition:filter 1.1s var(--ease), transform 1.4s var(--ease)}
.strip::after{
  content:""; position:absolute; inset:0; background:rgba(var(--carta-rgb),.40);
  transition:background .8s var(--ease);
}
.strip:hover::after{background:rgba(var(--carta-rgb),.16)}
.strip:hover .strip-media img{filter:grayscale(0) contrast(1.02) brightness(1.02); transform:scale(1.035)}
.strip-body{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:10px; padding:0 var(--pad);
}
.strip-title{
  font-family:var(--f-display); font-size:clamp(26px,3.6vw,54px); letter-spacing:.06em;
  color:var(--washi); text-shadow:0 2px 26px rgba(var(--carta-rgb),.95), 0 0 60px rgba(var(--carta-rgb),.8);
  transition:letter-spacing .8s var(--ease);
}
.strip:hover .strip-title{letter-spacing:.14em}
.strip-meta{
  display:flex; gap:16px; align-items:center; font-size:11.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--washi-2);
  opacity:0; transform:translateY(10px); transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.strip:hover .strip-meta{opacity:1; transform:none}
.strip-meta .sep{width:16px; height:1px; background:var(--shu)}
.strip-idx{
  position:absolute; left:var(--pad); top:50%; transform:translateY(-50%); z-index:2;
  font-family:var(--f-display); font-size:15px; color:var(--shu); letter-spacing:.2em;
}
.strip-jp{
  position:absolute; right:var(--pad); top:50%; transform:translateY(-50%); z-index:2;
  font-family:var(--f-display); font-size:clamp(30px,3.4vw,52px); color:var(--washi);
  opacity:.14; transition:opacity .8s var(--ease);
}
.strip:hover .strip-jp{opacity:.34}

/* ---------- 11. Processo ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); margin-top:60px; border-top:1px solid var(--line)}
/* le righe della griglia sono bordi, non fondo: cosi il riquadro resta
   trasparente e le pennellate si vedono anche qui sotto */
.step{padding:clamp(28px,3vw,44px); position:relative; overflow:hidden;
  border-left:1px solid var(--line); border-bottom:1px solid var(--line)}
.step:first-child{border-left:0}
.step::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:2px;
  background:var(--shu); transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease-ink);
}
.step:hover::before{transform:scaleX(1)}
.step .kanji{font-family:var(--f-display); font-size:44px; color:var(--shu); opacity:.85; line-height:1}
.step h3{font-size:22px; margin:20px 0 4px}
.step .jp{font-family:var(--f-display); font-size:13px; letter-spacing:.4em; color:var(--washi-3); margin-bottom:16px}
.step p{font-size:14.5px; color:var(--washi-2); margin:0; line-height:1.75}

/* ---------- 12. About teaser ---------- */
.teaser{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(36px,6vw,96px); align-items:center}
.teaser-img{position:relative; overflow:hidden}
.teaser-img img{width:100%; filter:grayscale(.45) brightness(1.03); transition:filter 1.2s var(--ease), transform 1.6s var(--ease)}
.teaser-img:hover img{filter:grayscale(0) brightness(1); transform:scale(1.03)}
.teaser-img::after{content:""; position:absolute; inset:0; border:1px solid var(--line); pointer-events:none}

/* ---------- 13. Contatti ---------- */
.contact{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(40px,7vw,110px)}
.form{display:grid; gap:30px; margin-top:8px}
.field{position:relative}
.field label{
  display:block; font-size:11.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--washi-3); margin-bottom:10px;
}
.field input,.field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line-strong);
  color:var(--washi); font-family:var(--f-display); font-size:18px; padding:10px 0 14px;
  outline:none; transition:border-color .5s var(--ease); resize:vertical;
}
.field textarea{min-height:130px; line-height:1.7}
.field input::placeholder,.field textarea::placeholder{color:var(--washi-3); opacity:.55; font-family:var(--f-ui); font-size:15px; letter-spacing:.02em}
.field .bar{position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--shu); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease-ink)}
.field input:focus ~ .bar,.field textarea:focus ~ .bar{transform:scaleX(1)}
.field.err input,.field.err textarea{border-bottom-color:var(--shu)}
.field .msg{font-size:12px; color:var(--shu-soft); letter-spacing:.06em; margin-top:8px; min-height:1em}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.submit{
  justify-self:start; display:inline-flex; align-items:center; gap:16px;
  padding:16px 30px; border:1px solid var(--line-strong); position:relative; overflow:hidden;
  font-family:var(--f-ui); font-size:12.5px; letter-spacing:.28em; text-transform:uppercase;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.submit::before{content:""; position:absolute; inset:0; background:var(--shu); transform:translateY(101%); transition:transform .55s var(--ease-ink)}
.submit:hover:not(:disabled){color:#fff; border-color:var(--shu)}
.submit:hover:not(:disabled)::before{transform:translateY(0)}
.submit > *{position:relative}
.submit:disabled{opacity:.5; cursor:progress}
.form-status{font-size:14px; letter-spacing:.04em; min-height:1.6em; margin-top:4px}
.form-status.ok{color:var(--washi)}
.form-status.ko{color:var(--shu-soft)}

.contact-aside{display:flex; flex-direction:column; gap:26px}
.contact-aside .line{height:1px; background:var(--line)}
.contact-aside a{font-family:var(--f-display); font-size:clamp(18px,1.7vw,24px)}

/* sigillo che appare a invio riuscito */
.sent-seal{
  position:fixed; inset:0; z-index:950; display:grid; place-items:center;
  background:rgba(var(--carta-rgb),.93); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .6s var(--ease), visibility 0s .6s;
}
.sent-seal.on{opacity:1; visibility:visible; transition:opacity .6s var(--ease)}
.sent-seal .box{text-align:center; display:grid; gap:22px; justify-items:center; padding:var(--pad); max-width:520px}
.sent-seal svg{width:132px; height:132px}
.sent-seal .ring{fill:none; stroke:var(--shu); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:400; stroke-dashoffset:400}
.sent-seal.on .ring{animation:draw 1.1s var(--ease-ink) .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.sent-seal .kj{font-family:var(--f-display); font-size:46px; fill:var(--shu); opacity:0}
.sent-seal.on .kj{animation:fadeUp .8s var(--ease) .9s forwards}

/* ---------- 14. Footer ---------- */
.footer{
  border-top:1px solid var(--line); padding:clamp(50px,6vw,88px) var(--pad) 40px;
  background:var(--sumi-2);
}
.footer-grid{display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; align-items:flex-end; max-width:var(--maxw); margin:0 auto}
.footer .brand svg{width:190px; fill:var(--washi); opacity:.85}
.footer .brand .enso-path{fill:var(--shu)}
.footer nav{display:flex; gap:26px; flex-wrap:wrap}
.footer .socials{display:flex; gap:26px; flex-wrap:wrap}
.footer nav a,.footer .socials a{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--washi-3); transition:color .35s}
.footer nav a:hover,.footer .socials a:hover{color:var(--shu)}
.footer-bottom{
  max-width:var(--maxw); margin:46px auto 0; padding-top:22px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:11.5px; letter-spacing:.16em; color:var(--washi-3); text-transform:uppercase;
}

/* ---------- 15. Pagine interne ---------- */
.page-head{padding:calc(var(--header-h) + clamp(70px,10vw,150px)) var(--pad) clamp(40px,5vw,80px); position:relative; overflow:hidden}
.page-head .h-xl{margin-top:22px}
.page-head .jp-big{
  position:absolute; right:var(--pad); bottom:-.14em; font-family:var(--f-display);
  font-size:clamp(80px,12vw,190px); color:var(--washi); opacity:.045; line-height:.9; pointer-events:none;
}

/* about */
.about-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(40px,7vw,110px); align-items:start}
.about-body p{color:var(--washi-2); font-size:17px; line-height:1.85}
.about-body p:first-of-type{color:var(--washi); font-family:var(--f-display); font-size:clamp(20px,2vw,26px); line-height:1.6}
.facts{display:grid; margin-top:44px}
.fact{display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid var(--line)}
.fact .k{font-size:11.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--washi-3)}
.fact .v{font-family:var(--f-display); font-size:16px}
.portrait-cap{margin:14px 0 0; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--washi-3); line-height:1.7}
/* le didascalie sotto il ritratto: come guardo, per chi lavoro, cosa consegno */
.notes{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line)}
.note{padding:clamp(26px,2.8vw,42px); border-left:1px solid var(--line); border-bottom:1px solid var(--line)}
.note:first-child{border-left:0}
.note-n{display:block; font-family:var(--f-display); font-size:13px; letter-spacing:.2em; color:var(--shu); margin-bottom:16px}
.note h2{font-size:clamp(19px,1.7vw,24px); margin-bottom:12px}
.note p{margin:0; color:var(--washi-2); font-size:15.5px; line-height:1.8}
/* I servizi: solo le parole, senza riquadro. Tolta la cornice servono due
   cose perche restino un elenco e non una frase: il peso, che li stacca dal
   testo intorno, e uno spazio fra l uno e l altro piu largo di quello fra le
   parole di uno stesso servizio. */
.chips{display:flex; flex-wrap:wrap; gap:12px 30px; margin-top:22px}
.chip{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--washi); transition:color .4s}
.chip:hover{color:var(--shu)}
.clients{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); margin-top:26px}
.clients span{background:var(--sumi); padding:26px 14px; text-align:center; font-family:var(--f-display); font-size:15px; letter-spacing:.18em; color:var(--washi-2)}
/* un cliente puo essere un logo invece del nome: i marchi arrivano da mani
   diverse, quindi si spengono tutti allo stesso modo e tornano com erano
   quando ci passi sopra. L altezza e comune, la larghezza no: e l altezza a
   far sembrare due marchi diversi grandi uguale. */
.clients span.with-logo{display:flex; align-items:center; justify-content:center; padding:22px 20px}
.clients span.with-logo img{
  width:auto; height:auto; max-height:42px; max-width:100%; object-fit:contain;
  filter:grayscale(1); opacity:.66;
  transition:opacity .5s var(--ease), filter .5s var(--ease);
}
.clients span.with-logo:hover img{filter:grayscale(0); opacity:1}

/* progetto */
/* la foto che apre la pagina: sta sotto la barra, con gli stessi margini
   laterali del resto della pagina, e prende il posto dello spazio vuoto che
   prima stava fra la barra e il titolo. */
.proj-hero{padding:calc(var(--header-h) + clamp(18px,2.6vw,40px)) var(--pad) 0}
.proj-hero-frame{position:relative; overflow:hidden; aspect-ratio:2.39/1; background:var(--sumi-2)}
.proj-hero-frame img{width:100%; height:100%; object-fit:cover; filter:brightness(1.01)}
.page-head.has-hero{padding-top:clamp(34px,4.6vw,66px)}

/* il testo lungo del progetto: al centro e disteso, righe piu larghe della
   colonna stretta usata altrove. */
.proj-text{max-width:1080px; margin:clamp(36px,4.2vw,58px) auto 0; text-align:center}
.proj-text p{font-size:clamp(17px,1.35vw,20px); color:var(--washi-2); line-height:1.85; margin:0 0 1.15em}
.proj-text p:last-child{margin-bottom:0}

.proj-meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:26px; padding:34px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
/* Righe da tre, tutte uguali: ogni anteprima e un verticale 2:3, orizzontale
   o verticale che sia la foto sotto. La griglia non racconta niente da sola,
   e solo un indice: le immagini si guardano una alla volta, aperte, dove
   tornano nel formato in cui sono state scattate. Fra una foto e l altra non
   c e scritto niente. */
.proj-photos{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,.85vw,14px);
  padding:clamp(40px,6vw,90px) var(--pad); max-width:1180px; margin:0 auto}
.proj-photos figure{margin:0; position:relative}
.proj-photos .ph{display:block; overflow:hidden; aspect-ratio:2/3; background:var(--sumi-2)}
.proj-photos img{width:100%; height:100%; object-fit:cover;
  transition:transform 1.6s var(--ease), filter 1.2s var(--ease); filter:brightness(1.01)}
.proj-photos figure:hover img{transform:scale(1.03); filter:brightness(1)}
.proj-nav{display:flex; justify-content:space-between; gap:20px; padding:clamp(40px,6vw,80px) var(--pad); border-top:1px solid var(--line); max-width:var(--maxw); margin:0 auto}
.proj-nav a{font-family:var(--f-display); font-size:clamp(18px,2vw,26px); color:var(--washi-2); transition:color .4s}
.proj-nav a:hover{color:var(--washi)}
.proj-nav .lab{display:block; font-family:var(--f-ui); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--shu-soft); margin-bottom:8px}

/* il film del progetto */
.proj-film{padding:clamp(30px,4vw,56px) var(--pad) 0}
.film-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  flex-wrap:wrap; padding:26px 0 22px}
.film-note{font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--washi-3)}
/* Il riquadro tiene la forma del video (gliela scrive il JavaScript). La
   copertina e un immagine a parte stesa sopra: si adatta al riquadro
   ritagliandosi, quindi qualunque foto si scelga il film resta della sua
   forma invece di adattarsi a quella dell immagine. */
.film-frame{position:relative; overflow:hidden; background:var(--washi); line-height:0; aspect-ratio:16/9}
.film-frame video{width:100%; height:100%; display:block; object-fit:contain}
.film-cover{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  transition:opacity .5s var(--ease);
}
.proj-film.playing .film-cover{opacity:0; pointer-events:none}
/* il sigillo di avvio: sta sopra al fotogramma di attesa e se ne va quando il film parte */
.film-play{
  position:absolute; inset:0; width:100%; z-index:2; display:flex; align-items:center; justify-content:center;
  background:rgba(var(--carta-rgb),.28); border:0; padding:0;
  transition:background .7s var(--ease), opacity .5s var(--ease);
}
.film-play .seal{
  display:flex; align-items:center; justify-content:center;
  width:clamp(62px,7vw,86px); height:clamp(62px,7vw,86px);
  font-family:var(--f-display); font-size:clamp(24px,2.6vw,32px); color:#fff;
  background:var(--shu); border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.28) inset;
  transform:scale(1); transition:transform .7s var(--ease), background .5s var(--ease);
}
.film-play:hover{background:rgba(var(--carta-rgb),.10)}
.film-play:hover .seal{transform:scale(1.08); background:var(--shu-deep)}
.proj-film.playing .film-play{opacity:0; pointer-events:none}

/* lightbox delle foto di progetto */
.lightbox{
  position:fixed; inset:0; z-index:960; background:rgba(var(--carta-rgb),.97);
  display:grid; place-items:center; opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility 0s .5s;
}
.lightbox.on{opacity:1; visibility:visible; transition:opacity .5s var(--ease)}
.lightbox img{max-width:92vw; max-height:86vh; object-fit:contain}
.lightbox .close,.lightbox .prev,.lightbox .next{
  position:absolute; color:var(--washi-2); font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; padding:14px; transition:color .3s;
}
.lightbox .close:hover,.lightbox .prev:hover,.lightbox .next:hover{color:var(--shu)}
.lightbox .close{top:calc(var(--pad) / 2); right:var(--pad)}
.lightbox .prev{left:var(--pad); top:50%; transform:translateY(-50%)}
.lightbox .next{right:var(--pad); top:50%; transform:translateY(-50%)}

/* ---------- 16. Transizione di pagina (velo di inchiostro) ---------- */
.ink-veil{
  position:fixed; inset:0; z-index:9500; pointer-events:none; background:var(--sumi);
  clip-path:inset(0 0 100% 0);
}
.ink-veil.cover{clip-path:inset(0 0 0 0); transition:clip-path .62s var(--ease-ink)}
.ink-veil.uncover{clip-path:inset(100% 0 0 0); transition:clip-path .8s var(--ease-ink)}
.ink-veil .mk{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--f-display); font-size:20px; letter-spacing:.5em; color:var(--shu); opacity:0;
}
.ink-veil.cover .mk{opacity:1; transition:opacity .4s ease .2s}

/* ---------- 17. Cursore ---------- */
/* E il cursore vero del sistema, ridisegnato in rosso: nessun inseguimento,
   nessuna animazione, nessun ritardo. La freccia ha un filo di contorno
   chiaro cosi resta visibile anche sopra a una fotografia scura.

   ATTENZIONE: il colore sta dentro l immagine (%238A2216 e il rosso lacca,
   %23F0E7D5 il contorno). Le variabili CSS non arrivano dentro a url(),
   quindi se cambi --shu vanno cambiati anche i tre disegni qui sotto. */

/* freccia: dappertutto */
body{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M2 1.6 L2 19.8 L6.7 15.5 L9.8 21.9 L12.7 20.5 L9.7 14.3 L16 14.1 Z' fill='%238A2216' stroke='%23F0E7D5' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2, auto;
}

/* freccia con il punto: su tutto cio su cui si puo agire */
a,button,summary,label,select,.strip,.proj-photos figure,[role="button"]{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M2 1.6 L2 19.8 L6.7 15.5 L9.8 21.9 L12.7 20.5 L9.7 14.3 L16 14.1 Z' fill='%238A2216' stroke='%23F0E7D5' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ccircle cx='19.8' cy='20' r='3.4' fill='%238A2216' stroke='%23F0E7D5' stroke-width='1.2'/%3E%3C/svg%3E") 2 2, pointer;
}

/* asta da testo: nei campi del modulo */
input,textarea{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='26'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M6 3 H12 M9 3 V23 M6 23 H12' stroke='%23F0E7D5' stroke-width='3.4'/%3E%3Cpath d='M6 3 H12 M9 3 V23 M6 23 H12' stroke='%238A2216' stroke-width='1.8'/%3E%3C/g%3E%3C/svg%3E") 9 13, text;
}

/* ---------- 18. Responsive ---------- */
@media (max-width:1000px){
  .manifesto,.teaser,.contact,.about-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(2n+1){border-left:0}
  .notes{grid-template-columns:1fr}
  .note{border-left:0}
  .nav{display:none}
  .burger{display:block}
  .header-side{gap:16px}
  .seal-btn{padding:9px 14px; font-size:11px; letter-spacing:.18em}
}
@media (max-width:640px){
  :root{--header-h:64px}
  .steps{grid-template-columns:1fr}
  .step{border-left:0}
  /* le righe restano da tre anche sul telefono: e un indice, non una lettura;
     la foto vera si apre toccandola */
  .proj-photos{gap:6px}
  /* sullo schermo stretto il 2.39:1 diventa una fettuccia alta un dito */
  .proj-hero-frame{aspect-ratio:16/9}
  .proj-text{text-align:left}
  .strip{height:clamp(200px,52vw,300px)}
  .strip-idx,.strip-jp{display:none}
  .hero-vertical{display:none}
  .seal-btn .txt{display:none}
  .seal-btn{padding:10px}
}

/* ---------- 19. Riduzione del movimento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  body::after{animation:none}
}