/* ============================================================
   SHARED CSS — used by every page of the site.
   Header, nav, hamburger menu, mobile menu, lightbox, footer,
   switcher (prev/next), and the base reset/typography.
   Page-specific styles (hero, galleries, unique sections) stay
   in each page's own <style> block.
   ============================================================ */

:root{
  --bg:#0a0a0d; --surface:#131318; --line:#242430;
  --ink:#f2efe9; --muted:#8b8b96; --accent:#ff2b00; --accent-2:#2fe6d6;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;overflow-x:hidden;}
::selection{background:var(--accent);color:#0a0a0d;}
a{color:inherit;text-decoration:none;}

.scan{position:fixed;inset:0;pointer-events:none;z-index:60;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:overlay;}

/* header / nav */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.6rem 2.5rem;
  background:linear-gradient(to bottom, rgba(10,10,13,.92), transparent);
  backdrop-filter:blur(2px);
}
.logo{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;font-size:1.05rem;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;line-height:1.2;white-space:nowrap;}
.logo span.tag{font-family:'Noto Sans JP',sans-serif;font-size:.65rem;color:var(--accent);opacity:.8;font-weight:500;}
.logo-img{height:46px;width:auto;display:block;transition:opacity .25s;}
a.logo:hover .logo-img{opacity:.75;}
nav{display:flex;gap:2.2rem;align-items:center;}
/* un gradino piu' chiaro del grigio di servizio: a questo corpo, con le
   lettere spaziate e il video che scorre dietro, il muted si leggeva poco */
nav a{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#c9c7c2;position:relative;padding-bottom:2px;transition:color .25s;}
nav a:hover{color:var(--ink);}
nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent);transition:width .25s;}
nav a:hover::after{width:100%;}
nav a.active{color:var(--accent);}
nav a.active::after{width:100%;}

/* hamburger */
.hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:32px;height:32px;cursor:pointer;background:none;border:none;
  padding:0;z-index:70;position:relative;
}
.hamburger span{
  display:block;width:100%;height:2px;background:var(--ink);
  transition:transform .3s ease, opacity .3s ease;
}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span{background:var(--accent);}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* mobile fullscreen menu */
.mobile-menu{
  position:fixed;inset:0;background:rgba(10,10,13,.98);z-index:65;
  display:none;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:1.6rem;padding:0 2.2rem;
  overflow:hidden;
}
.mobile-menu::before{
  content:"from.neotokyo";position:absolute;top:2.2rem;left:2.2rem;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:.68rem;letter-spacing:.1em;
  color:var(--muted);opacity:.5;text-transform:uppercase;
}
.mobile-menu::after{
  content:"MENU";position:absolute;top:2.2rem;right:2.2rem;
  font-size:.68rem;letter-spacing:.2em;color:var(--muted);opacity:.5;
}
.mobile-menu.active{display:flex;}
.mobile-menu a{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;
  font-size:2.5rem;line-height:1.1;letter-spacing:-.01em;color:var(--ink);
  display:flex;align-items:baseline;gap:.9rem;
  opacity:0;transform:translateY(24px);
}
.mobile-menu a.active{color:var(--accent);}
.mobile-menu.active a{
  animation:menuItemIn .55s cubic-bezier(.16,1,.3,1) forwards;
}
.mobile-menu.active a:nth-child(1){animation-delay:.06s;}
.mobile-menu.active a:nth-child(2){animation-delay:.13s;}
.mobile-menu.active a:nth-child(3){animation-delay:.2s;}
.mobile-menu.active a:nth-child(4){animation-delay:.27s;}
@keyframes menuItemIn{
  to{opacity:1;transform:translateY(0);}
}

/* prev/next switcher */
.switcher{
  display:flex;border-top:1px solid var(--line);
}
.switcher a{
  position:relative;overflow:hidden;
  flex:1;padding:2.6rem 2.5rem;display:flex;flex-direction:column;gap:.5rem;
  transition:background .3s;
}
.switcher a::before{
  content:"";position:absolute;top:0;height:2px;width:0;
  background:var(--accent);transition:width .4s cubic-bezier(.16,1,.3,1);
}
.switcher a:first-child::before{left:0;}
.switcher a:last-child::before{right:0;}
.switcher a:hover::before{width:100%;}
.switcher a:first-child{border-right:1px solid var(--line);}
.switcher a:hover{background:var(--surface);}
.switcher .dir{
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:.4rem;transition:color .3s;
}
.switcher a:hover .dir{color:var(--accent);}
.switcher .dir .arrow-icon{display:inline-block;transition:transform .35s cubic-bezier(.16,1,.3,1);}
.switcher a:first-child:hover .dir .arrow-icon{transform:translateX(-5px);}
.switcher a:last-child:hover .dir .arrow-icon{transform:translateX(5px);}
.switcher .title{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:1.15rem;font-weight:600;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.switcher a:first-child:hover .title{transform:translateX(-4px);}
.switcher a:last-child:hover .title{transform:translateX(4px);}
.switcher a:last-child{text-align:right;align-items:flex-end;}

/* blocco contatti di fine pagina (schede work e pagina tattoo).
   Pesi: titolo grande e azione a sinistra, testo a destra, formula sotto. */
.contact-block{
  padding:7.5rem 2.5rem 6rem;border-top:1px solid var(--line);
}
/* Su desktop: titolo e azione incolonnati a sinistra, testo a destra.
   Nel codice l'azione sta dopo il testo, che e' l'ordine di lettura giusto
   quando la griglia si scioglie su schermo stretto. */
.contact-head{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  column-gap:5rem;row-gap:2.6rem;align-items:start;
}
.contact-block h2{grid-column:1;grid-row:1;}
.contact-block .contact-body{grid-column:2;grid-row:1 / span 2;}
.contact-block .contact-cta{grid-column:1;grid-row:2;margin-top:0;}

.contact-block h2{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;
  /* stessa scala del titolo di pagina (.phero h1): il saluto finale non deve
     gridare piu' forte del nome del progetto */
  font-size:clamp(2.2rem,6vw,4.4rem);line-height:1.03;
  color:var(--ink);
}
.contact-block h2 .dot{color:var(--accent);}
.contact-block .contact-body p{font-size:1.1rem;line-height:1.75;color:#c9c7c2;}
.contact-block .contact-body p + p{margin-top:1.2rem;}
.contact-block .contact-body{padding-top:.6rem;}
.contact-cta{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:1rem;}
.contact-cta a{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:1.15rem 2.4rem;border-radius:999px;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:600;
  font-size:1.05rem;letter-spacing:.01em;
  border:1px solid var(--ink);
  transition:background .3s,color .3s,border-color .3s,transform .3s;
}
.contact-cta a .arrow{transition:transform .3s;}
.contact-cta a:hover .arrow{transform:translate(3px,-3px);}
.contact-cta a.primary{background:var(--ink);color:#0a0a0d;}
.contact-cta a.primary:hover{background:var(--accent);border-color:var(--accent);color:var(--ink);}
.contact-cta a.ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.contact-cta a.ghost:hover{border-color:var(--ink);}

@media(max-width:900px){
  .contact-head{display:flex;flex-direction:column;gap:1.8rem;align-items:flex-start;}
  .contact-block .contact-body{padding-top:0;max-width:60ch;}
}
@media(max-width:640px){
  .contact-block{padding:4rem 1.3rem 3.5rem;}
  .follow{margin-top:3.2rem;}
  .contact-cta{flex-direction:column;align-items:stretch;gap:.8rem;}
  .contact-cta a{justify-content:center;}
}

/* "Seguimi" scritto come una formula: SEGUIMI = @tizio + @caio
   Regola ferrea: sta sempre su una riga sola. Per questo il blocco ha un
   corpo fluido legato alla larghezza dello schermo e tutte le misure interne
   sono in em: rimpicciolisce invece di andare a capo. Ogni handle e' nowrap,
   cosi' "@from.neotokyo" non si spezza mai sul punto. */
.follow{margin-top:5rem;}
/* testata del blocco: etichetta, filo e kanji sulla stessa riga, come la
   testata "Selected Work" in home */
.follow-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.8rem;}
.follow-head .rule{flex:1;height:1px;background:var(--line);}
.follow-head .mata{
  font-family:'Noto Sans JP',sans-serif;font-size:.85rem;
  letter-spacing:.05em;color:var(--muted);
}
.follow-label{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.follow{container-type:inline-size;}
.follow-row{
  display:flex;flex-wrap:nowrap;align-items:baseline;
  white-space:nowrap;
  /* Il corpo si misura sulla colonna che ospita il blocco, non sulla finestra:
     cosi' vale uguale dove il blocco e' a tutta pagina (schede, tattoo) e dove
     sta dentro una cornice rientrata (home). Questa riga e' il ripiego per i
     browser senza container query; sotto arriva la versione in cqi. */
  font-size:clamp(.68rem, calc((100vw - 100px) / 19), 2.2rem);
  gap:1.15em;
}
/* sotto i 640px i margini di pagina sono piu' stretti: la riga puo' stare
   un po' piu' grande senza rischiare di toccare i bordi */
@media(max-width:640px){
  /* su schermo stretto la riga riempie la colonna del testo crescendo di
     corpo, non allargando lo stacco: i due nomi restano vicini e insieme
     arrivano quasi a filo del margine destro. */
  .follow-row{font-size:clamp(.68rem, calc((100vw - 46px) / 15.9), 2.2rem);}
}
/* la misura buona: 100cqi e' la larghezza della colonna del blocco */
@supports (font-size:1cqi){
  .follow-row{font-size:clamp(.68rem, 6.1cqi, 2.2rem);}
}
.follow-item{display:inline-flex;flex-direction:column;align-items:center;gap:.35em;}
.follow-item .handle .at{color:var(--muted);font-weight:600;}
.follow-item .handle{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;
  font-size:1em;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;
  color:var(--ink);transition:color .3s;
}
.follow-item .brace{
  width:100%;height:.55em;color:var(--muted);opacity:.75;
  transition:color .3s,opacity .3s;
}
.follow-item .role{
  font-size:max(.56rem,.4em);letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);transition:color .3s;
}
.follow-item:hover .brace{opacity:1;}
.follow-item[href*="mauriziowhat"]:hover .handle,
.follow-item[href*="mauriziowhat"]:hover .role,
.follow-item[href*="mauriziowhat"]:hover .brace{color:var(--accent);}
.follow-item[href*="from.neotokyo"]:hover .handle,
.follow-item[href*="from.neotokyo"]:hover .role,
.follow-item[href*="from.neotokyo"]:hover .brace{color:var(--accent-2);}

/* footer */
footer{
  padding:2.2rem 2.5rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
  font-size:.72rem;color:var(--muted);letter-spacing:.05em;
}
footer a{color:var(--muted);}
footer a:hover{color:var(--ink);}
footer .logo-mark{height:28px;width:auto;opacity:.9;filter:invert(1);}

/* lightbox */
.lightbox-overlay{
  position:fixed;inset:0;background:rgba(10,10,13,.96);
  display:none;align-items:center;justify-content:center;
  z-index:1000;padding:2rem;cursor:pointer;
  touch-action:none;
}
.lightbox-overlay.active{display:flex;}
.lightbox-close{
  position:absolute;top:1.2rem;right:1.2rem;z-index:1001;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);
  color:#f2efe9;font-size:1.6rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
}
@media(min-width:701px){.lightbox-close{display:none;}}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);
  color:#f2efe9;font-size:1.8rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:1001;
}
.lightbox-prev{left:1.2rem;}
.lightbox-next{right:1.2rem;}
@media(max-width:640px){
  .lightbox-nav{display:none;}
  .lightbox-prev{left:.5rem;}
  .lightbox-next{right:.5rem;}
}
.lightbox-overlay img{
  max-width:92vw;max-height:92vh;object-fit:contain;
  border-radius:4px;cursor:default;
}
@media(min-width:701px){
  .lightbox-overlay{
    cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><line x1="10" y1="10" x2="30" y2="30" stroke="white" stroke-width="2.5" stroke-linecap="round"/><line x1="30" y1="10" x2="10" y2="30" stroke="white" stroke-width="2.5" stroke-linecap="round"/></svg>') 20 20, pointer;
  }
  .lightbox-overlay img{
    cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><line x1="10" y1="10" x2="30" y2="30" stroke="white" stroke-width="2.5" stroke-linecap="round"/><line x1="30" y1="10" x2="10" y2="30" stroke="white" stroke-width="2.5" stroke-linecap="round"/></svg>') 20 20, pointer;
  }
  .ph-tile img, .cover img{cursor:zoom-in;}
}

/* mobile breakpoint — shared elements only (header/nav/hamburger/footer/switcher) */
@media(max-width:640px){
  .lightbox-overlay{padding:.6rem;}
  .lightbox-overlay img{max-width:96vw;max-height:88vh;}
  .lightbox-close{top:.8rem;right:.8rem;width:40px;height:40px;font-size:1.4rem;}
  header{padding:1.1rem 1.3rem;}
  .logo{font-size:.9rem;}
  .logo span.tag{font-size:.6rem;}
  .logo-img{height:36px;}
  nav{display:none;}
  .hamburger{display:flex;}
  .switcher{flex-direction:column;}
  .switcher a{padding:1.8rem 1.3rem;}
  .switcher a:first-child{border-right:none;border-bottom:1px solid var(--line);}
  .switcher a:last-child{text-align:left;align-items:flex-start;}
  footer{padding:1.6rem 1.3rem;flex-direction:column;gap:.7rem;align-items:flex-start;}
  video{border-radius:0 !important;border:none !important;}
}
@media(min-width:641px){
  .mobile-menu{display:none !important;}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
  .mobile-menu a{opacity:1 !important;transform:none !important;}
}