/* MAVE — base + componenti condivisi */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{background:var(--black);color:var(--white);font-family:var(--font-mono);
  font-size:var(--t-body);line-height:1.7;overflow-x:hidden;min-height:100vh}
html,body{overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}

/* grain */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}

/* ---------- HUD ---------- */
.hud{position:fixed;z-index:70;font-size:10px;letter-spacing:.12em;color:var(--grey);
  text-transform:uppercase;pointer-events:none}
/* Synkr nel corner estremo in basso a sinistra (richiesta Gigio: non attaccato al logo) */
.hud--tl{bottom:14px;left:20px}
.hud--tr{top:64px;right:22px;writing-mode:vertical-rl;color:var(--red-dim)}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;justify-content:space-between;
  align-items:center;padding:22px var(--margin);mix-blend-mode:difference}
.nav__logo{font-family:var(--font-display);font-weight:800;letter-spacing:.06em;
  text-decoration:none;font-size:1.05rem}
.nav__logo i{font-style:normal;color:var(--red)}
.nav__logo img{height:36px;display:block;width:auto}

/* media full-bleed (video MIA ecc.) */
.media-full{position:relative;overflow:hidden}
.media-full video{width:100%;display:block}
.media-full .label{position:absolute;left:var(--margin);top:24px;z-index:2;color:var(--white)}
.media-full .label i{font-style:normal;color:var(--red)}
.nav__links{display:flex;gap:2.2rem;list-style:none;align-items:center}
.nav__links a{font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--grey-2)}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--white)}
.nav__links a[aria-current]{color:var(--red)}
.nav__links a .kanji{color:var(--red);opacity:0;transition:opacity .15s;margin-left:.4em}
.nav__links a:hover .kanji{opacity:1}
.nav__burger{display:none;background:none;border:0;color:var(--white);
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.12em;cursor:pointer}
@media (max-width:768px){
  .nav__links{display:none}
  .nav__burger{display:block}
  .nav.is-open{mix-blend-mode:normal}
  .nav.is-open .nav__burger{position:fixed;left:50%;top:calc(50% + 165px);transform:translateX(-50%);
    z-index:1;font-size:2.2rem;line-height:1;padding:.3em .5em}
  .nav.is-open .nav__links{display:flex;position:fixed;inset:0;background:rgba(0,0,0,.5);
    flex-direction:column;justify-content:center;align-items:center;text-align:center;
    padding:0 var(--margin);gap:1.2rem}
  .nav.is-open .nav__links a{font-family:var(--font-display);font-size:var(--t-h2);
    text-transform:uppercase;color:var(--white)}
  .nav.is-open .nav__links a .kanji{opacity:1;color:var(--white)}
}

/* ---------- typography helpers ---------- */
.h-display{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1.02}
h1.h-display{font-size:var(--t-hero)}
h2.h-display{font-size:var(--t-h2)}
h3.h-display{font-size:var(--t-h3)}
.label{font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.body-copy{max-width:62ch;color:var(--grey)}
.body-copy strong{color:var(--white);font-weight:400}
.red{color:var(--red)}
.link-mono{display:inline-block;color:var(--white);text-decoration:none;margin-top:1.6rem}
.link-mono::before{content:'> ';color:var(--red)}

/* ---------- layout ---------- */
.section{padding:var(--s-section) var(--margin);position:relative}
.section--panel{background:var(--black-2)}
.section--white{background:var(--white);color:var(--black)}
.section--white .body-copy{color:#444}
.section--white .label{color:#777}
.section__index{position:sticky;top:45vh;float:left;margin-left:calc(-1*var(--margin) + 12px);
  font-size:var(--t-label);color:var(--red-dim)}
@media(max-width:768px){.section__index{display:none}}

/* media slot placeholder (in attesa asset Gigio) */
.slot{position:relative;background:var(--black-2);border:1px dashed #222;
  display:flex;align-items:center;justify-content:center;overflow:hidden;margin:var(--s-gap) 0}
.slot::before{content:attr(data-asset);font-size:var(--t-label);letter-spacing:.12em;
  color:#333;text-transform:uppercase;padding:1rem;text-align:center}
.slot--169{aspect-ratio:16/9}
.slot--halfs{aspect-ratio:4/3}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* slot riempito: via bordo tratteggiato e label placeholder */
.slot:has(img){border:0;background:none}
.slot:has(img)::before{content:none}

/* two col */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-gap);align-items:center}
@media(max-width:900px){.cols{grid-template-columns:1fr}}

/* ---------- index rows (home projects) ---------- */
.rows{border-top:1px solid var(--black-2)}
.row{display:grid;grid-template-columns:8ch 1fr auto;align-items:baseline;gap:var(--s-gap);
  padding:3rem 0;border-bottom:1px solid var(--black-2);text-decoration:none;position:relative}
.row:hover{border-color:var(--red-dim)}
.row__num{font-size:var(--t-label);color:var(--grey)}
.row__title{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2rem,6vw,5rem);letter-spacing:-.02em;line-height:1;color:var(--white)}
.row__desc{grid-column:2;color:var(--grey);font-size:.95rem;margin-top:.6rem}
.row__arrow{color:var(--red);font-size:1.4rem}
@media(max-width:768px){.row{grid-template-columns:6ch 1fr auto;padding:2rem 0}}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--red-dim);padding:4rem var(--margin) 2rem;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-gap);font-size:.85rem}
.footer a{color:var(--grey-2);text-decoration:none;display:block;margin-bottom:.5em}
.footer a:hover{color:var(--white)}
.footer__motto{color:var(--red);letter-spacing:.12em;text-transform:uppercase}
.footer__legal{grid-column:1/-1;margin-top:3rem;color:#4a4a46;font-size:.72rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer__legal a{display:inline;color:#4a4a46}
@media(max-width:768px){.footer{grid-template-columns:1fr 1fr}}

/* ---------- G1 hover glitch ---------- */
.g1:hover{animation:g1 .12s steps(2) both}
@keyframes g1{0%{transform:skewX(2deg);text-shadow:-2px 0 var(--red),2px 0 #00ff66}
  100%{transform:skewX(0);text-shadow:none}}

/* ---------- G3 veil ---------- */
#veil{position:fixed;inset:0;z-index:100;pointer-events:none;visibility:hidden}
#veil .strip{position:absolute;left:0;width:100%;height:calc(100%/6 + 1px);
  background:var(--black);transform:scaleX(0)}
#veil .label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;letter-spacing:.1em;color:var(--grey);opacity:0}
#veil .flash{position:absolute;inset:0;background:var(--white);opacity:0}
#veil .ab{position:absolute;left:0;width:100%;opacity:0}
.cursor::after{content:'_';animation:blink .8s infinite}
@keyframes blink{0%,100%{opacity:.2}50%{opacity:1}}

/* reveal default state (JS toglie) */
.g2{visibility:hidden}
.no-js .g2,[data-reduced] .g2{visibility:visible}

/* fullscreen statement */
.statement{min-height:90vh;display:flex;flex-direction:column;justify-content:center}
.statement .h-display{max-width:14ch}

/* terminal log */
.tlog{background:var(--black-2);padding:2rem;font-size:.85rem;line-height:2;max-width:640px}
.tlog span{display:block;opacity:0}
.tlog span::before{content:'> ';color:var(--red)}

/* marquee */
.marquee{overflow:hidden;white-space:nowrap;padding:2rem 0}
.marquee__track{display:inline-flex;gap:1.2rem;animation:marq 40s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.pfp{width:180px;height:180px;background:var(--black-2);border:1px solid #1c1c1c;
  display:flex;align-items:end;justify-content:start;flex:none;position:relative;overflow:hidden}
.pfp span{font-size:10px;color:var(--grey);padding:8px;letter-spacing:.1em;position:relative;z-index:1}
.pfp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

@media (prefers-reduced-motion: reduce){
  .marquee__track{animation:none}
  .g1:hover{animation:none}
}

/* titolo evidenziato in rosso, stile poster: una striscia PER RIGA,
   appena più grande del testo (display:inline + decoration-break:clone) */
h1.h-boxed,h2.h-boxed,h3.h-boxed,.h-boxed{display:inline;
  background:var(--red);color:var(--white);
  padding:.05em .16em;line-height:1.32;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* voci non ancora attive: barrate, con "soon" accanto leggibile */
.soon{color:var(--grey-2);display:block;margin-bottom:.5em}
.soon s{text-decoration:line-through;text-decoration-color:var(--red-dim);text-decoration-thickness:1px}
.soon em{font-style:normal;opacity:.55;margin-left:.5em}
.link-mono.soon{display:inline-block;margin-bottom:0}

/* ---------- pioneers marquee: card con token+handle (ryodan + home) ---------- */
.marquee__track{animation-duration:200s}
.pcard{flex:none;width:180px;cursor:pointer}
.pcard .plabel{margin-top:.55rem;font-size:.68rem;letter-spacing:.08em;text-align:center;
  color:var(--grey,#9a9a9a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .plabel i{font-style:normal;color:var(--red)}
/* lightbox onorari: finestra unica outline rossa, bordi tondi */
.pxlight{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.92);display:none;
  align-items:center;justify-content:center;padding:4vh 4vw}
.pxlight.on{display:flex}
.pxwin{position:relative;background:#070707;border:1px solid var(--red);
  display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:stretch;
  max-width:min(92vw,720px)}
.pxmain{display:flex;flex-direction:column;align-items:center;gap:1.1rem;
  padding:2.4rem 1.4rem 1.5rem;min-width:0}
.pxlight img{max-width:min(74vw,520px);max-height:64vh;display:block}
.pxcap{display:flex;align-items:center;gap:1rem;font-size:.85rem;letter-spacing:.1em;color:#fff}
.pxcap b{font-family:var(--font-display);font-weight:800;letter-spacing:.06em}
.pxcap a{display:inline-flex;align-items:center;gap:.45rem;color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35)}
.pxcap a:hover{border-color:var(--red)}
.pxcap svg{width:14px;height:14px;fill:#fff;display:block}
.pxbtn{background:none;border:0;color:#fff;cursor:pointer;font-size:1.25rem;line-height:1;
  transition:color .2s,background .2s}
/* frecce: colonne verticali a tutta altezza ai lati della finestra */
.pxwin .pxnav{display:flex;align-items:center;justify-content:center}
.pxwin .pxnav.prev{border-right:1px solid rgba(204,0,0,.45)}
.pxwin .pxnav.next{border-left:1px solid rgba(204,0,0,.45)}
.pxwin .pxnav:hover{background:rgba(204,0,0,.16);color:var(--red)}
/* chiusura: quadrato bordato in alto a destra */
.pxwin .pxclose{position:absolute;top:0;right:0;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;background:#070707;
  border-left:1px solid var(--red);border-bottom:1px solid var(--red);z-index:2}
.pxwin .pxclose:hover{background:rgba(204,0,0,.16);color:var(--red)}