/* ============================================================
   SITO PERSONALE — Matteo Montenero
   Dal 03/11/2026 anche le pagine interne usano il sistema della home: fondo bianco,
   inchiostro #16161A, Archivo e IBM Plex Mono (SIL OFL, in assets/fonts), un solo
   accento rosso. Prima erano «bianco ghiaccio» con i caratteri di sistema
   (copia in _versioni/style-prima-del-03-11.css).
   ============================================================ */
@font-face{ font-family:"ArchivoV"; src:url("../assets/fonts/Archivo-var.ttf") format("truetype");
  font-weight:100 900; font-stretch:62% 125%; font-display:swap; }
@font-face{ font-family:"Plex"; src:url("../assets/fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Plex"; src:url("../assets/fonts/IBMPlexMono-Medium.ttf") format("truetype"); font-weight:500; font-display:swap; }

:root{
  --bg:        #FFFFFF;
  --bg-2:      #FFFFFF;
  --paper:     #F7F7F8;   /* grigio freddo chiarissimo, solo per distinguere */
  --ink:       #16161A;
  --ink-soft:  #6E6E73;
  --ink-faint: #6E6E73;   /* i testi che informano (anni, numero di foto, crediti) passano il contrasto AA: niente #A0A0A6 */
  --line:      #E2E2E5;
  --line-soft: #E2E2E5;
  --accent:    #B4342A;   /* l'unico accento */
  --target:    #B4342A;
  --orange:    #C98A1E;
  --present:   #2F7D4F;
  --mono: "Plex", ui-monospace, monospace;
  --sans: "ArchivoV", sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }

/* ---------- piccoli elementi UI ---------- */
.mono{ font-family:var(--mono); }
.tag{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
}

/* ====================================================================
   HOME — GRAFO
   ==================================================================== */
#graph-wrap{
  position:fixed; inset:0; overflow:hidden;
  background:
    radial-gradient(120% 120% at 50% 35%, var(--bg-2) 0%, var(--bg) 70%);
  cursor:default;
  touch-action:none;            /* per il drag su touch */
  user-select:none;
}
#graph-svg{ position:absolute; inset:0; width:100%; height:100%; }
#graph-svg line{
  stroke:var(--line); stroke-width:1;
  transition:stroke .18s ease, stroke-width .18s ease, opacity .18s ease;
}
#graph-svg line.hi{ stroke:var(--accent); stroke-width:1.6; }
#graph-svg line.dim{ opacity:.18; }

#nodes{ position:absolute; inset:0; }
.node{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:7px;
  cursor:grab;
  transition:opacity .18s ease;
}
.node:active{ cursor:grabbing; }
.node .dot{
  border-radius:50%;
  background:var(--ink);
  box-shadow:0 1px 0 rgba(255,255,255,.5);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.node .lbl{
  font-family:var(--mono);
  font-size:12px; line-height:1.25; letter-spacing:.04em;
  color:var(--ink); text-align:center; white-space:pre;
  pointer-events:none;
  transition:color .18s ease, opacity .18s ease;
}

/* tipi di nodo */
.node.hub   .dot{ background:var(--ink); }
.node.hub   .lbl{ font-weight:600; letter-spacing:.12em; }
.node.project .dot{ background:#2c333a; }
/* nodo-video: pallino a cerchio (vuoto) per distinguerlo dai progetti foto */
.node.is-video .dot{ background:transparent; box-shadow:inset 0 0 0 2px #2c333a; }
.node.is-video:hover .dot,
.node.is-video.hl .dot{ background:var(--accent); box-shadow:inset 0 0 0 2px var(--accent); }
.node.concept .dot{ background:#aeb8bf; }
.node.concept .lbl{ color:var(--ink-soft); font-size:11px; text-transform:lowercase; }

/* stati hover */
.node.project,
.node.hub{ cursor:pointer; }
.node:hover .dot{ background:var(--accent); transform:scale(1.18); }
.node.hl .dot{ background:var(--accent); }
.node.hl .lbl{ color:var(--accent); }
#graph-wrap.has-hover .node.dim{ opacity:.28; }

/* intestazione home */
.home-head{
  position:fixed; left:28px; top:24px; z-index:5; pointer-events:none;
}
.home-head h1{
  font-family:var(--mono); font-size:13px; font-weight:600;
  letter-spacing:.22em; margin:0; color:var(--ink);
}
.home-head p{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:var(--ink-soft); margin:6px 0 0;
}
.home-hint{
  position:fixed; right:24px; bottom:20px; z-index:5; pointer-events:none;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  color:var(--ink-faint); text-transform:uppercase; text-align:right;
}

/* ====================================================================
   BARRA / NAV pagine interne
   ==================================================================== */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px;
  padding:22px 28px 14px;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
/* il nome a sinistra porta sempre alla home, come nella home (03/11/2026: prima c'era solo un piccolo «← graph») */
.topbar .back{
  font-family:var(--sans); font-weight:800; font-stretch:112%; font-size:15px;
  letter-spacing:.01em; text-transform:uppercase; color:var(--ink);
}
.topbar .back:hover{ color:var(--accent); }
.topbar .ptitle{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; font-weight:400; color:var(--ink-soft);
}
.topbar .ptitle::before{ content:"/\00a0"; color:var(--ink-faint); }
.topbar .pmeta{
  margin-left:auto; font-family:var(--mono); font-size:11px;
  letter-spacing:.06em; color:var(--ink-faint);
}
.topbar .tnav{ display:flex; gap:20px; margin-left:auto; font-family:var(--mono); font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; }
.topbar .pmeta ~ .tnav, .topbar .txt-toggle ~ .tnav{ margin-left:22px; }
.topbar .tnav a{ padding:6px 0; }
.topbar .tnav a:hover{ color:var(--accent); }
@media (max-width:640px){
  .topbar{ padding:14px 16px 6px; }
  .topbar .back, .topbar .tnav a{ display:inline-block; padding:12px 0; }   /* bersagli da 44 pixel per il dito */
  .topbar .back{ font-size:13px; }
  .topbar .tnav{ gap:12px; font-size:10.5px; letter-spacing:.04em; }
  .topbar .txt-toggle{ order:6; padding:6px 0; }
  .topbar .ptitle{ order:5; width:100%; }
  .topbar:has(.txt-toggle) .ptitle{ width:auto; flex:1 1 60%; }   /* Poem: titolo e «text» sulla stessa riga */
  .topbar .pmeta{ display:none; }
  .topbar .tnav{ margin-left:auto; }
  .topbar .txt-toggle ~ .tnav{ margin-left:auto; }
}

/* ====================================================================
   GALLERIA (vista totale → click → singola foto)
   ==================================================================== */
/* intro / statement del progetto (in alto, colonna leggibile) */
.intro{ max-width:680px; padding:34px 26px 6px; }
.intro .meta{ font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:20px; }
.intro p{ font-size:14.5px; line-height:1.72; color:var(--ink); margin:0 0 15px; }
.intro p:last-child{ margin-bottom:0; }
.intro .credit{ font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--ink-faint); margin-top:20px; line-height:1.6; }

/* righe giustificate: ordine di lettura (1 affianco a 2), stessa altezza per riga,
   immagini intere (no crop). Larghezza/altezza calcolate in JS. */
.gallery{
  display:flex; flex-wrap:wrap; gap:10px; align-content:flex-start;
  padding:22px 26px 80px;
}
.gallery img{
  display:block; cursor:zoom-in; background:var(--paper);
  border:1px solid var(--line-soft);
  opacity:0; transition:opacity .35s ease, border-color .15s ease;
}
.gallery img.ready{ opacity:1; }
.gallery img:hover{ border-color:var(--accent); }

/* lightbox singola foto */
.lightbox{
  position:fixed; inset:0; z-index:60; display:none;
  background:#FFFFFF;
  align-items:center; justify-content:center;
}
.lightbox.open{ display:flex; }
/* foto grande e intera. Niente ombra: con object-fit contain l'ombra seguiva il riquadro e non la foto, e disegnava
   un grande rettangolo vuoto attorno (verifica del 03/11/2026) */
.lightbox img{ width:88vw; height:86vh; object-fit:contain; }
.lb-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:54px; height:54px; border:none; cursor:pointer;
  background:transparent; color:var(--ink);
  font-size:30px; font-family:var(--mono);
}
.lb-btn:hover{ color:var(--accent); }
.lb-prev{ left:10px; } .lb-next{ right:10px; }
.lb-close{
  position:absolute; top:18px; right:22px; width:auto; height:auto;
  transform:none; font-size:22px;
}
.lb-count{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:12px; letter-spacing:.18em;
  color:var(--ink-soft);
}

/* ====================================================================
   POEM AGAINST THE SEA — slider unico
   ==================================================================== */
/* Poem = striscia orizzontale: immagini orizzontali e verticali alla STESSA ALTEZZA,
   unite in fila, scorrimento con le frecce. Click = foto intera (lightbox). */
.poem{ position:fixed; inset:0; height:100vh; overflow:hidden;
       display:flex; flex-direction:column; background:var(--bg); }
.poem-stage{
  flex:1; min-height:0; position:relative;
  display:flex; align-items:center;
}
.strip{
  display:flex; align-items:center; gap:0;        /* nessuno spazio: foto unite */
  height:80vh; width:100%;
  overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth;
  padding:0 74px; scrollbar-width:thin;
}
.strip::-webkit-scrollbar{ height:6px; }
.strip::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.strip img{
  height:100%; width:auto; flex:0 0 auto; cursor:zoom-in;
  background:var(--paper); display:block;          /* unite, senza ombra */
  opacity:0; transition:opacity .4s ease;
}
.strip img.ready{ opacity:1; }
.poem-nav{
  position:absolute; top:0; bottom:0; width:74px; border:none; cursor:pointer; z-index:3;
  background:transparent; color:var(--ink); font-size:30px; font-family:var(--mono);
  opacity:.45; transition:opacity .15s;
}
.poem-nav:hover{ opacity:1; color:var(--accent); }
.poem-prev{ left:0; background:linear-gradient(90deg,var(--bg),transparent); }
.poem-next{ right:0; background:linear-gradient(270deg,var(--bg),transparent); }
.poem-foot{
  display:flex; align-items:center; justify-content:center;
  padding:14px 0 22px;
}
.poem-count{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--ink-faint); }

/* toggle "text" + overlay statement (Poem) */
.txt-toggle{ background:none; border:0; cursor:pointer; font-family:var(--mono);
  font-size:12px; letter-spacing:.14em; color:var(--ink-soft); }
.txt-toggle:hover{ color:var(--accent); }
.text-overlay{ position:fixed; inset:0; z-index:70; display:none; overflow-y:auto;
  background:color-mix(in srgb, var(--bg) 96%, #000 4%); }
.text-overlay.open{ display:block; }
.to-inner{ max-width:680px; margin:0 auto; padding:84px 26px 90px; }
.to-inner .meta{ font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:20px; }
.to-inner p{ font-size:14.5px; line-height:1.72; color:var(--ink); margin:0 0 15px; }
.to-inner .credit{ font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--ink-faint); margin-top:20px; line-height:1.6; }
.to-close{ position:fixed; top:18px; right:22px; background:none; border:0; cursor:pointer;
  font-family:var(--mono); font-size:20px; color:var(--ink); }
.to-close:hover{ color:var(--accent); }

/* ====================================================================
   ARCHITECTURE OF COLONIZATION — sx testo / centro software / dx kill list
   ==================================================================== */
.aoc{ display:grid; grid-template-columns:minmax(280px,1fr) minmax(440px,2.1fr) minmax(280px,1fr);
      gap:0; height:100vh; }
.aoc > section{ overflow-y:auto; height:100vh; }

/* SX — spiegazione */
.aoc-text{ padding:30px 30px 60px; border-right:1px solid var(--line-soft); }
.aoc-text .kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  color:var(--ink-soft); text-transform:uppercase; }
.aoc-text h1{ font-family:var(--mono); font-size:20px; line-height:1.2;
  letter-spacing:.04em; margin:14px 0 22px; }
.aoc-text p{ font-size:14px; line-height:1.62; color:var(--ink); margin:0 0 14px; }
.aoc-text p strong{ color:var(--ink); }
.aoc-text .src{ margin-top:26px; padding-top:16px; border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:10.5px; line-height:1.7; color:var(--ink-faint); }

/* CENTRO — software (schermo pulito) */
.aoc-stage{
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-2); position:relative;
}
.monitor{ position:relative; width:min(92%,860px); }
.monitor .screen{
  position:relative; width:100%; aspect-ratio:5/4; overflow:hidden;
  background:#11151a; border:1px solid var(--line);
  box-shadow:0 16px 60px rgba(20,30,40,.18);
}
.monitor .screen video,
.monitor .screen canvas{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
/* gate d'ingresso (permesso webcam) */
.gate{ position:absolute; inset:0; z-index:4; display:flex; align-items:center;
  justify-content:center; text-align:center; padding:24px; background:#0e1216;
  color:#e9eef2; font-family:var(--mono); }
.gate.hidden{ display:none; }
.gate .k{ font-size:11px; letter-spacing:.24em; color:#7fd1ff; margin-bottom:14px; }
.gate p{ font-size:12.5px; line-height:1.6; color:#c4ccd2; max-width:340px; margin:0 auto 18px; }
.gate button{ font-family:var(--mono); font-size:12px; letter-spacing:.2em;
  padding:11px 26px; cursor:pointer; background:transparent; color:#e9eef2; border:1px solid #3a444c; }
.gate button:hover{ border-color:#7fd1ff; color:#7fd1ff; }
.gate .note{ margin-top:14px; font-size:9.5px; letter-spacing:.1em; color:#6b757d; line-height:1.5; }
.monitor .hud{
  position:absolute; inset:0; pointer-events:none;
  font-family:var(--mono); color:#e9eef2; font-size:11px; letter-spacing:.14em;
}
.monitor .hud .tl{ position:absolute; top:12px; left:14px; text-shadow:0 1px 3px rgba(0,0,0,.8); }
.monitor .hud .tr{ position:absolute; top:12px; right:14px; text-align:right; text-shadow:0 1px 3px rgba(0,0,0,.8); }
.monitor .hud .bl{ position:absolute; bottom:12px; left:14px; text-shadow:0 1px 3px rgba(0,0,0,.8); }
.monitor .hud .status{ color:#7fd1ff; }
.monitor .hud .status.elim{ color:#ff6a5c; }
.monitor .cap{
  margin-top:12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  color:var(--ink-soft); text-align:center;
}

/* DX — kill list */
.aoc-kill{ padding:24px 22px 60px; border-left:1px solid var(--line-soft);
  background:var(--paper); }
.aoc-kill h2{ font-family:var(--mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; margin:0 0 4px; color:var(--target); }
.aoc-kill .sub{ font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  color:var(--ink-faint); margin:0 0 16px; }
.kill-row{
  display:grid; grid-template-columns:38px 1fr auto; gap:10px; align-items:center;
  padding:8px 0; border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:11px;
  opacity:0; transform:translateY(4px);
  transition:opacity .4s ease, transform .4s ease;
}
.kill-row.in{ opacity:1; transform:none; }
.kill-row .thumb{ width:38px; height:38px; object-fit:cover; background:#11151a;
  filter:grayscale(.25) contrast(1.05); border:1px solid var(--line); }
.kill-row .id{ color:var(--ink-faint); }
.kill-row .attr{ color:var(--ink-soft); letter-spacing:.02em; }
.kill-row .risk{ font-weight:600; color:var(--target); }
.kill-row.orange .risk{ color:var(--orange); }
.kill-row .x{ color:var(--target); font-weight:700; }

/* ====================================================================
   VIDEO (Vimeo) — player custom, controlli testuali (stile reference)
   ==================================================================== */
.vwrap{ max-width:1120px; margin:0 auto; padding:30px 26px 80px; }
.vframe{ position:relative; width:100%; aspect-ratio:16/9; background:#0e1216; overflow:hidden; }
.vframe iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vbar{ display:flex; align-items:center; gap:20px; padding:14px 2px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink); }
.vbtn{ background:none; border:0; cursor:pointer; font:inherit; letter-spacing:inherit;
  color:var(--ink-soft); padding:0; white-space:nowrap; }
.vbtn:hover{ color:var(--accent); }
.vprog{ flex:1; height:2px; background:var(--line); cursor:pointer; position:relative; }
.vprog i{ position:absolute; left:0; top:0; bottom:0; width:0; background:var(--ink); }
.vprog:hover i{ background:var(--accent); }
.vtime{ color:var(--ink-faint); white-space:nowrap; }
.vmeta{ margin-top:24px; }
.vmeta h1{ font-family:var(--mono); font-size:18px; letter-spacing:.04em; margin:0 0 4px; }
.vmeta .vyear{ font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:var(--ink-faint); margin-bottom:12px; }
.vcredits{ font-family:var(--mono); font-size:11.5px; line-height:1.75; color:var(--ink-soft); }

/* ====================================================================
   ABOUT / BIO (click sul nodo Matteo Montenero)
   ==================================================================== */
.about{ max-width:720px; margin:0 auto; padding:44px 26px 90px; }
.about h1{ font-family:var(--mono); font-size:22px; letter-spacing:.06em; margin:0 0 8px; }
.about .role{ font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  color:var(--ink-soft); text-transform:uppercase; }
.about .loc{ font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  color:var(--ink-faint); margin-top:4px; }
.about .lead{ font-size:15.5px; line-height:1.72; margin:28px 0 0; color:var(--ink); }
.about section{ margin-top:34px; }
.about h2{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line-soft); }
.about ul{ list-style:none; margin:0; padding:0; }
.about li{ font-size:14px; line-height:1.6; color:var(--ink); padding:5px 0; }
.about li b{ color:var(--ink); font-weight:600; }
.about li .yr{ font-family:var(--mono); color:var(--ink-faint); font-size:12px; }
.about .contact a{ color:var(--accent); }
/* le voci con il link (03/11/2026): sottolineate piano, una freccia piccola che dice che si esce dal sito */
.about li a{ text-decoration:underline; text-decoration-color:var(--line); text-decoration-thickness:1px; text-underline-offset:3px; }
.about li a:hover{ color:var(--accent); text-decoration-color:currentColor; }
.about li a[target="_blank"]::after{ content:"\00a0\2197"; font-family:var(--mono); font-size:11px; color:var(--ink-faint); }

/* ---------- responsive ---------- */
/* film sul telefono: la barra dei comandi va su due righe, l'avanzamento sotto, a tutta larghezza */
@media (max-width:640px){
  .vwrap{ padding:16px 16px 60px; }
  .vbar{ flex-wrap:wrap; gap:12px 18px; }
  .vprog{ order:9; flex-basis:100%; height:3px; }
  .vbtn{ min-height:40px; }
}
.vbtn:disabled{ opacity:.45; cursor:default; }

/* sul telefono le frecce della foto ingrandita stanno sotto, non sopra la foto */
@media (max-width:640px){
  .lightbox img{ width:100vw; height:74vh; }
  .lb-prev, .lb-next{ top:auto; bottom:14px; transform:none; width:64px; height:56px; }
  .lb-count{ bottom:32px; }
  .lb-close{ top:10px; right:10px; width:48px; height:48px; }
}

@media (max-width:880px){
  .aoc{ grid-template-columns:1fr; height:auto; }
  .aoc > section{ height:auto; }
  .aoc-text{ border-right:none; border-bottom:1px solid var(--line-soft); }
  .aoc-stage{ padding:30px 16px; }
  .aoc-kill{ border-left:none; border-top:1px solid var(--line-soft); }
  .strip{ height:62vh; padding:0 56px; }
  .poem-nav{ width:50px; }
}