/* NIGHTKILN — foglio di stile unico.
   ⛔ Nessun font esterno, nessuna libreria, nessuna richiesta fuori dal sito:
      4 studi su 6 girano su roba del 2015 e sono i migliori del mondo (→ _ANATOMIA_Siti_Migliori.md).
   🎨 Fondo CHIARO: 5 su 6 dei siti misurati. E per noi c'e' un motivo in piu':
      le immagini del case sono in penombra (8,9-52% di pixel neri) => su chiaro staccano. */

:root{
  --fondo:      #e8e7e4;   /* chiaro caldo: sul grigio-freddo il vetro ambrato virava */
  --inchiostro: #16181c;
  /* 🔴 MISURATO l'11/08, non scelto a occhio: #6b6f76 dava 4,08:1 sul fondo, e ne
     servono 4,5 (WCAG AA per il testo normale). Questo da' 4,59:1 con la stessa
     tinta fredda. ⛔ Riguardava didascalie, menu e tutte le righe piccole:
     cioe' quasi tutto il testo che NON e' un titolo. */
  --tenue:      #63676e;
  --linea:      #cfcdc8;
  --misura:     1280px;    /* ⚠️ le immagini sono 2160 px di lato lungo: non le si stira mai */
  /* 🔤 Un font di sistema, e per una ragione dichiarata: il logo di oggi e' un
     TAMPONE, e un font custom senza identita' decisa e' arredamento.
     ⇒ quando Sharon sceglie l'identita', si cambia QUESTA riga e basta. */
  --testo: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--fondo); color:var(--inchiostro);
  font-family:var(--testo); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* ───────────────────────────────────────────── testata */
.testata{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:22px 28px; border-bottom:1px solid var(--linea);
  position:sticky; top:0; background:var(--fondo); z-index:10;
}
.marchio{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.marchio img{ width:34px; height:34px; }
.marchio b{ font-size:15px; letter-spacing:.30em; font-weight:700; }
/* ⚠️ tre voci, non di piu': Tendril ne ha quattro e la quarta e' «Careers».
   Noi non assumiamo => tre. */
.menu{ display:flex; gap:26px; font-size:13px; letter-spacing:.16em; text-transform:uppercase; }
.menu a{ text-decoration:none; color:var(--tenue); }
.menu a:hover, .menu a[aria-current="page"]{ color:var(--inchiostro); }

/* ───────────────────────────────────────────── impaginato */
.dentro{ max-width:var(--misura); margin:0 auto; padding:0 28px; }
.stretto{ max-width:660px; }       /* 🔑 la misura di lettura: ~70 caratteri per riga */
.largo{ max-width:1600px; margin:0 auto; padding:0 28px; }

section{ padding:56px 0; }
h1{ font-size:clamp(38px,7vw,74px); line-height:1.02; margin:0 0 18px; letter-spacing:-.02em; }
h2{ font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--tenue);
    margin:0 0 22px; font-weight:600; }
h3{ font-size:22px; margin:0 0 10px; letter-spacing:-.01em; }
p{ margin:0 0 18px; }
.claim{ font-size:clamp(20px,2.4vw,27px); line-height:1.35; max-width:760px; margin:0 0 10px; }
.tenue{ color:var(--tenue); }
.piccolo{ font-size:14px; }

/* ───────────────────────────────────────────── il lavoro */
.griglia{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:34px; }
.scheda{ text-decoration:none; display:block; }
.scheda img{ width:100%; max-height:78vh; object-fit:cover; background:#111; }
.scheda .riga{ display:flex; justify-content:space-between; gap:16px;
               padding:12px 2px 0; font-size:14px; }

/* 🖼️ le immagini a tutta larghezza, alternate a paragrafi brevi:
   e' l'ordine misurato sulle pagine progetto di Ditroit (9-38 immagini). */
figure{ margin:0 0 34px; }
/* 🔴 RIPARATO L'11/08 GUARDANDOLA, non leggendola: «a tutta larghezza» funziona
   per Ditroit perche' le loro immagini sono ORIZZONTALI o quadrate (2560x1600,
   2560x2560). Le nostre sono VERTICALI 2160x2700: a tutta larghezza diventavano
   alte 2000 px e sullo schermo se ne vedeva una fetta di nero.
   ⇒ il vincolo giusto non e' la larghezza, e' l'ALTEZZA DELLO SCHERMO. */
figure img, figure video{ width:auto; max-height:92vh; margin:0 auto; background:#111; }
figcaption{ font-size:14px; color:var(--tenue); padding-top:10px; max-width:660px; }
.coppia{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:820px){ .coppia{ grid-template-columns:1fr; } }

/* 📊 i numeri di SCALA — si da' la difficolta', mai la ricetta.
   (Ditroit: «2,5 TB di cache simulata». Nessun software, mai.) */
.numeri{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
         gap:26px; border-top:1px solid var(--linea); padding-top:26px; }
.numeri b{ display:block; font-size:30px; letter-spacing:-.02em; }
.numeri span{ font-size:13px; color:var(--tenue); }

.credits{ border-top:1px solid var(--linea); padding-top:22px; font-size:15px; }
.credits div{ display:flex; gap:16px; padding:5px 0; }
.credits div span:first-child{ width:190px; color:var(--tenue); flex:none; }

/* ───────────────────────────────────────────── piede */
footer{ border-top:1px solid var(--linea); margin-top:40px; padding:40px 28px 60px; }
footer .dentro{ display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; }
footer a{ text-decoration:none; }
footer a:hover{ text-decoration:underline; }
.social{ display:flex; gap:18px; font-size:14px; }

/* ⚖️ la riga che dichiara cosa siamo: piccola, ma c'e'. */
.nota-ia{ font-size:12px; color:var(--tenue); max-width:520px; }

/* ══ TELEFONO — 🔴 aggiunto l'11/08 h17:45 dopo averlo MISURATO a 375 px ══════
   ⛔ Non era un sospetto: la pagina scorreva in orizzontale (425 px su 375).
      Colpevole: la testata a `space-between` che NON va a capo — marchio (180 px)
      + menu (239 px) + spazi non ci stanno, e nessuno dei due e' «troppo largo»
      da solo. ⇒ un controllo che guarda la LARGHEZZA degli elementi non lo trova:
      va guardato il BORDO DESTRO. (Ed e' cosi' che l'ho trovato.) */
@media (max-width:560px){
  .testata{ padding:14px 18px; gap:10px; flex-wrap:wrap; }
  .marchio img{ width:28px; height:28px; }
  .marchio b{ font-size:13px; letter-spacing:.20em; }
  .menu{ gap:15px; font-size:12px; letter-spacing:.08em; }
  .dentro, .largo{ padding:0 18px; }
  footer{ padding:32px 18px 46px; }
  .credits div span:first-child{ width:118px; }
  /* 📱 su schermo stretto una verticale puo' prendersi piu' altezza: e' il formato
     nativo del telefono, non uno spreco. */
  figure img, figure video{ max-height:80vh; }
}

/* ══ LA LENTE — il visore a piena pagina (→ lente.js) ═════════════════════════
   🔑 Il motivo sta in un numero: in pagina un'immagine da 2560 px di altezza si
      vede a ~990 px su uno schermo 1080p, cioe' al 38%. Sotto quella soglia il
      dettaglio fine NON e' sullo schermo, e guardare meglio non lo fa comparire.
   🎨 Fondo quasi nero: il sito e' su fondo chiaro, ma queste immagini sono in
      penombra e su chiaro l'occhio legge male i toni bassi. */
.apribile{ cursor:zoom-in; }
.apribile:focus-visible{ outline:2px solid var(--inchiostro); outline-offset:3px; }

.lente{
  position:fixed; inset:0; z-index:100;
  background:#0d0e10; display:flex; flex-direction:column;
}
.lente[hidden]{ display:none; }

.lente-scena{
  flex:1; min-height:0; overflow:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:#3a3d42 #0d0e10;
}
.lente-trascinabile{ cursor:grab; }
.lente-tirando{ cursor:grabbing; }
.lente-tela{
  min-width:100%; min-height:100%;
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.lente-img{ display:block; max-width:none; background:#000; }

.lente-barra{
  flex:none; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 18px; border-top:1px solid #23262b; background:#131519;
  color:#c9ccd2; font-size:12.5px; letter-spacing:.02em;
}
.lente-tit{
  flex:1 1 220px; min-width:0; color:#8d9299;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lente-dim{ color:#8d9299; font-variant-numeric:tabular-nums; }
/* la percentuale e' calcolata sui pixel FISICI dello schermo: su un monitor denso
   il «100% CSS» non e' il 100% vero, e qui la differenza decide se stai guardando. */
.lente-zoom{ font-variant-numeric:tabular-nums; min-width:52px; text-align:right; color:#e8e7e4; }
.lente-ridotta .lente-zoom{ color:#d9a05b; }   /* sotto il 100%: stai vedendo meno del file */
.lente-sep{ width:1px; height:20px; background:#2b2f35; }
.lente-conta{ color:#8d9299; font-variant-numeric:tabular-nums; min-width:52px; text-align:center; }

.lente-bot{
  font:inherit; color:#c9ccd2; background:transparent;
  border:1px solid #2b2f35; border-radius:3px; padding:5px 11px; cursor:pointer;
}
.lente-bot:hover{ border-color:#4a4f57; color:#fff; }
.lente-bot[aria-pressed="true"]{ background:#e8e7e4; color:#16181c; border-color:#e8e7e4; }
.lente-bot:focus-visible{ outline:2px solid #d9a05b; outline-offset:2px; }
.lente-chiudi{ margin-left:auto; }

@media (max-width:560px){
  .lente-barra{ gap:9px; padding:9px 12px; font-size:12px; }
  .lente-tit{ flex-basis:100%; order:9; }
  .lente-bot{ padding:6px 9px; }
}

/* ══ IL SELETTORE DI LINGUA — 23/08/2026 ═════════════════════════════════════
   🗣️ Sharon: «deve essere fatto sia in italiano che in inglese, che volendo
      puoi cambiare la lingua».
   🔑 La lingua ATTIVA e' in grassetto e ⛔ non e' un link: cliccare la pagina
      su cui sei gia' e' il modo piu' rapido di far dubitare qualcuno che il
      sito funzioni. L'altra e' un link vero, e porta alla STESSA pagina. */
.lingue{ display:inline-flex; gap:8px; align-items:center; margin-left:6px;
         padding-left:16px; border-left:1px solid var(--linea); }
.lingue b{ color:var(--inchiostro); font-weight:700; }
.lingue a{ color:var(--tenue); text-decoration:none; }
.lingue a:hover{ color:var(--inchiostro); }
@media (max-width:560px){ .lingue{ padding-left:10px; margin-left:2px; } }