/* =========================================================
   N°76 Studio — fondamenta condivise da tutte le pagine
   Header, menu, footer, grana, cursore, reveal.
   Le parti specifiche di una pagina stanno nella pagina
   (home, contatti, about, faq) o in _work.css (progetti).
   ========================================================= */

/* ---------- Font (self-hosted: nessuna chiamata a Google) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url(/fonts/martian-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url(/fonts/martian-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Token ---------- */
:root{
  --bg:#f5f4f0;
  --bg-2:#efede7;
  --text:#111;
  --ink:#0a0a0a;
  /* grigi scuriti per il contrasto: #888 su carta non arrivava al minimo AA */
  --muted:#66635d;
  --muted-2:#86837b;
  --border:#d8d6d0;
  --border-2:#e6e3dc;
  --accent:#e63946;
  --ember:#e85a3a;
  --night:#0c0c0c;
  --ease:cubic-bezier(.65,.05,.36,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-ink:cubic-bezier(.16,.84,.32,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --gutter:2rem;
  --hd-h:4.4rem;
  /* stessa misura e stessa spaziatura per il menu e per l'elenco dei progetti */
  --stack-size:clamp(1.05rem,1.55vw,1.5rem);
  --stack-gap:clamp(1.15rem,2.6vh,1.75rem);
  --stack-track:.18em;
  /* Header, menu e footer usano solo questi: le pagine (about, faq…) possono
     ridefinire --text/--muted per i loro contenuti senza cambiarne l'aspetto */
  --ch-bg:#f5f4f0;
  --ch-ink:#111;
  --ch-muted:#66635d;
  --ch-muted-2:#86837b;
  /* il "bianco" dell'header sopra le sezioni scure: un tocco di grigio caldo */
  --ch-light:#e2e0db;
  /* il nero dell'header sopra la carta: qualche punto di bianco */
  --ch-dark:#2a2926;
}
@media(max-width:700px){:root{--gutter:1.15rem;--hd-h:3.9rem}}
@media(max-width:440px){:root{--stack-size:.92rem;--stack-track:.13em;--stack-gap:clamp(1.05rem,2.6vh,1.5rem)}}

/* ---------- Base ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:18px;-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
body{scrollbar-width:none}
body{
  background:var(--bg);color:var(--text);
  font-family:'Martian Mono',ui-monospace,monospace;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,video{display:block;max-width:100%}
::selection{background:#000;color:#fff}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;top:.6rem;left:.6rem;z-index:10050;background:var(--ink);color:#fff;padding:.6rem 1rem;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;transform:translateY(-200%)}
.skip:focus{transform:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- Grana in movimento ----------
   Stessa texture della vecchia landing, ma disegnata su una tessera da
   300px ripetuta e senza mix-blend-mode: prima il browser doveva fondere
   l'intera pagina (video compreso) a ogni fotogramma. Ora è un solo layer
   del compositore che si sposta. */
body::before{
  content:"";position:fixed;inset:-8%;z-index:10001;pointer-events:none;
  opacity:.05;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.11' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>") repeat;
  animation:grain 8s steps(8) infinite;
  will-change:transform;
}
@keyframes grain{
  0%,100%{transform:translate3d(0,0,0)}
  10%{transform:translate3d(-2%,-3%,0)} 20%{transform:translate3d(-4%,2%,0)}
  30%{transform:translate3d(2%,-4%,0)}  40%{transform:translate3d(-2%,5%,0)}
  50%{transform:translate3d(-4%,2%,0)}  60%{transform:translate3d(3%,0,0)}
  70%{transform:translate3d(0,3%,0)}    80%{transform:translate3d(-3%,1%,0)}
  90%{transform:translate3d(2%,4%,0)}
}

/* ---------- Header ----------
   Niente riga sotto e niente orologio. Il colore è pieno, non più in
   "difference" (sui mezzitoni diventava grigio): bianco sopra le sezioni
   scure, nero sopra la carta. Lo decide _site.js guardando quale sezione
   [data-hd] passa sotto l'header. Una sfumatura appena percettibile dietro
   le scritte le tiene leggibili anche sopra una foto. */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:300;
  height:var(--hd-h);
  padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  color:var(--ch-dark);
  pointer-events:none;
  transition:color .6s var(--ease-soft);
  --hd-shade:rgba(245,244,240,.72);
}
.hd::before{content:"";position:absolute;left:0;right:0;top:0;height:170%;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--hd-shade) 0%,rgba(0,0,0,0) 100%);opacity:.9;transition:opacity .6s var(--ease-soft)}
/* computer: sfumatura più netta e contenuta nell'altezza dell'header, così
   non scende sulle foto che partono subito sotto (es. Kius) */
@media(min-width:701px){
  .hd::before{height:100%;background:linear-gradient(180deg,var(--hd-shade) 0%,var(--hd-shade) 38%,rgba(0,0,0,0) 100%)}
}
.hd-dark .hd{color:var(--ch-light);--hd-shade:rgba(0,0,0,.34)}
.hd-dark .hd .hd-logo,.hd-dark .hd .hd-lang{text-shadow:0 1px 14px rgba(0,0,0,.35)}
.hd > *{pointer-events:auto}
.hd-logo{font-size:1rem;font-weight:400;letter-spacing:-.02em;white-space:nowrap}
.hd-right{display:flex;align-items:center;gap:1.2rem;font-size:.62rem;letter-spacing:.04em}
.hd-lang{display:flex;align-items:center;border:1px solid currentColor;border-radius:999px;padding:.14rem;font-size:.56rem;letter-spacing:.1em}
.hd-lang a,.hd-lang span{padding:.26rem .58rem;border-radius:999px;text-transform:uppercase;line-height:1}
.hd-lang span{background:var(--ch-dark);color:var(--ch-bg)}
.hd-dark .hd .hd-lang span{background:var(--ch-light);color:#0a0a0a;text-shadow:none}
.hd-lang a{opacity:.85;transition:opacity .3s}
.hd-lang a:hover{opacity:1}
.hd-burger{width:38px;height:38px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;margin-right:-8px}
.hd-burger span{display:block;width:22px;height:1.5px;background:currentColor;transition:transform .45s var(--ease-out),opacity .3s}
.menu-open .hd{color:var(--ch-dark)}
.menu-open .hd::before{opacity:0}
.menu-open .hd .hd-lang span{background:var(--ch-dark);color:var(--ch-bg)}
.menu-open .hd-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-open .hd-burger span:nth-child(2){opacity:0;transform:scaleX(0)}
.menu-open .hd-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- Menu (hamburger su ogni schermo) ---------- */
.mn{
  position:fixed;inset:0;z-index:250;
  background:var(--ch-bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease-out),visibility 0s linear .5s;
}
.menu-open .mn{opacity:1;visibility:visible;transition:opacity .5s var(--ease-out)}
html.menu-open,html.menu-open body{overflow:hidden}
.stack{list-style:none;display:flex;flex-direction:column;align-items:center;gap:var(--stack-gap);text-align:center}
.stack a{
  font-family:'Martian Mono',monospace;font-size:var(--stack-size);
  letter-spacing:var(--stack-track);text-transform:uppercase;line-height:1.15;
  display:inline-block;
}
.mn .stack a{color:var(--ch-ink);opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out),color .3s}
.menu-open .mn .stack a{opacity:1;transform:none}
.menu-open .mn .stack li:nth-child(2) a{transition-delay:.05s,.05s,0s}
.menu-open .mn .stack li:nth-child(3) a{transition-delay:.1s,.1s,0s}
.mn .stack a[aria-current="page"]{color:var(--ch-muted-2)}
.mn .stack a:hover{color:var(--ch-muted)}
.mn-foot{
  position:absolute;left:0;right:0;bottom:2rem;
  display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem 1.6rem;
  font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ch-muted);
  padding:0 var(--gutter);
}
.mn-foot a:hover,.mn-foot button:hover{color:var(--ch-ink)}
.mn-foot button{font-size:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}

/* ---------- Pulsanti e link ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:1rem 1.6rem;border-radius:999px;
  font-family:'Martian Mono',monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  background:var(--ink);color:#fff;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .3s,color .3s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(0,0,0,.4)}
.btn .arrow{transition:transform .35s var(--ease-out)}
.btn:hover .arrow{transform:translateX(4px)}
.link-u{border-bottom:.5px solid currentColor;padding-bottom:.2rem;transition:opacity .3s}
.link-u:hover{opacity:.6}

/* ---------- Reveal (solo con JS attivo) ---------- */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js .rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s!important}.rv-d2{transition-delay:.16s!important}.rv-d3{transition-delay:.24s!important}

/* ---------- Elenco progetti (home + "Altri lavori") ----------
   Testo bianco in difference: dove sotto c'è nero la lettera è bianca,
   dove c'è chiaro diventa nera. Il blend sta sull'elemento che sfuma, così
   l'effetto regge anche durante la dissolvenza. Il contenitore non deve
   creare un nuovo stacking context (niente z-index/opacity/transform). */
.plist .stack a{color:#fff;mix-blend-mode:difference;transition:opacity .5s var(--ease-out)}
.plist sup{font-size:.5em;letter-spacing:0;margin-left:.3em;vertical-align:.95em;line-height:0;font-feature-settings:'tnum'}
.plist .stack a{transition:opacity 1.1s var(--ease-soft)}
.plist.has-active .stack a{opacity:.5}
.plist.has-active .stack a.is-active{opacity:1}
/* Le immagini del progetto: entrano lente (1,8 s) con un avvicinamento
   quasi impercettibile, ed escono ancora più lente. Così passare da un
   nome all'altro è una dissolvenza incrociata, non uno stacco. */
.stage-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);
  transition:opacity 2.2s var(--ease-soft),transform 9s var(--ease-out)}
.stage-layer.on{opacity:1;transform:scale(1);transition:opacity 1.8s var(--ease-soft),transform 9s var(--ease-out)}
/* anteprima video (YouTube muto, solo con consenso): ingrandita quanto
   basta a coprire lo schermo e a tagliare fuori i controlli del player */
.stage-yt{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity 2s var(--ease-soft);pointer-events:none}
.stage-yt.on{opacity:1}
/* nascosto per uno stato diverso da "in riproduzione": subito, non in 2 s */
.stage-yt.quick{transition-duration:.18s}
.stage-yt iframe{position:absolute;top:50%;left:50%;border:0;pointer-events:none;transform-origin:50% 50%;
  width:640px;height:360px;transform:translate(-50%,-50%) scale(4)}  /* misura e scala vere: _site.js (ytFit) */

/* ---------- Cursore (solo puntatori fini) ---------- */
.cur{position:fixed;top:0;left:0;z-index:10010;pointer-events:none;
  width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;mix-blend-mode:difference;
  transition:width .3s var(--ease-out),height .3s var(--ease-out),margin .3s var(--ease-out),opacity .2s;
  opacity:0;will-change:transform}
.cur.on{opacity:1}
.cur.big{width:60px;height:60px;margin:-30px 0 0 -30px}
.cur-lab{position:fixed;top:0;left:0;z-index:10011;pointer-events:none;
  font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;color:#000;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .2s;white-space:nowrap;mix-blend-mode:normal}
.cur.big.has-lab{background:#fff}
.has-cursor,.has-cursor a,.has-cursor button{cursor:none}
.has-cursor input,.has-cursor textarea,.has-cursor select{cursor:text}

/* ---------- Avviso contenuti protetti ---------- */
.toast{position:fixed;left:50%;bottom:2rem;z-index:10020;transform:translate(-50%,1rem);
  background:var(--ink);color:#fff;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.85rem 1.2rem;border-radius:999px;display:inline-flex;align-items:center;gap:.7rem;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease-out),transform .45s var(--ease-out)}
.toast::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ember)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Footer (quello della vecchia landing) ----------
   Identico su tutte le pagine (la home non ce l'ha): solo token --ch-*.
   Nessuna riga fra i gruppi; link in Martian Mono 400 grigio, titoli
   500 neri, a ogni larghezza. L'ultima riga sta sempre su una riga sola. */
.ft{padding:0 var(--gutter) 2rem;background:var(--ch-bg);color:var(--ch-muted);position:relative}
.ft-logo{display:flex;justify-content:center;padding:4rem 0 3rem}
.ft-logo img{height:clamp(80px,14vw,160px);width:auto;user-select:none;-webkit-user-drag:none}
.ft-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;padding-top:2rem;max-width:1200px;margin:0 auto;font-size:.7rem;color:var(--ch-muted);text-align:center}
@media(max-width:900px) and (min-width:701px){.ft-grid{grid-template-columns:1fr 1fr;gap:2rem 1rem}}
.ft-grid > div{display:flex;flex-direction:column;align-items:center}
.ft-grid h2{font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ch-ink);margin-bottom:.8rem;font-weight:500}
.ft-grid ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;align-items:center}
.ft-grid a,.ft-grid button{font-weight:400;transition:color .3s;font-size:inherit;letter-spacing:inherit;color:inherit}
.ft-grid a:hover,.ft-grid button:hover{color:var(--ch-ink)}
.ft-bottom{display:flex;justify-content:center;margin:3rem auto 0;padding-top:1rem;max-width:1200px;
  font-size:.62rem;letter-spacing:.08em;color:var(--ch-muted);text-align:center;white-space:nowrap}
.ft-bottom .sep{margin:0 .7em;opacity:.7}
/* Su telefono: logo al centro, un gruppo per riga (etichetta a sinistra,
   voci a destra) separati solo dallo spazio. La riga finale si stringe
   con lo schermo invece di andare a capo. */
@media(max-width:700px){
  .ft{padding:0 var(--gutter) 1.6rem}
  .ft-logo{padding:3.2rem 0 1.8rem}
  .ft-logo img{height:64px}
  .ft-grid{grid-template-columns:1fr;gap:1.5rem;padding-top:.4rem;text-align:left}
  .ft-grid > div{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:1.2rem}
  .ft-grid h2{margin:0;padding-top:.12rem;flex:0 0 auto}
  .ft-grid ul{align-items:flex-end;text-align:right;gap:.55rem}
  .ft-bottom{margin-top:2.4rem;padding-top:0;font-size:min(.56rem,2vw);letter-spacing:.01em}
  .ft-bottom .sep{margin:0 .4em}
}

/* ---------- Passaggio fra le pagine ----------
   Un foglio di carta con la grana (che sta sopra, z-index 10001) e N°76 al
   centro: esce salendo dal basso (pt-out, _site.js), la pagina nuova si
   apre con lo stesso foglio che continua a salire (pt-in, script in <head>).
   Al posto delle View Transitions, che non tutti i browser hanno. */
html.pt-in body::after,html.pt-out body::after{
  content:"N\00B0 76";position:fixed;inset:0;z-index:10000;display:grid;place-items:center;pointer-events:none;
  background:var(--ch-bg);color:var(--ch-dark);font-family:'Martian Mono',ui-monospace,monospace;font-size:1rem;letter-spacing:-.02em;
  will-change:transform}
html.pt-out body::after{animation:pt-cover .48s var(--ease-ink) both}
html.pt-in body::after{animation:pt-reveal .85s var(--ease-ink) .06s both}
@keyframes pt-cover{from{transform:translate3d(0,100%,0)}to{transform:none}}
@keyframes pt-reveal{from{transform:none}to{transform:translate3d(0,-100%,0)}}

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