/* Atlante dello spazio — foglio di stile del sito pubblico.
   Uno solo per tutte le lingue: l'aspetto non puo' divergere fra it ed en.
   Palette e tipografia ereditate da atlante.html: chi entra non deve sentire
   di aver cambiato prodotto. */

:root{
  --void:#05060B; --void-2:#0A0C14; --void-3:#121520;
  --ink:#E8E4DC; --ink-dim:#8A8B96; --ink-faint:#777A86;
  --amber:#E07A2F; --amber-hot:#F2A65A;
  --hair:rgba(224,122,47,.22); --hair-2:rgba(138,139,150,.16);
  /* --ink-faint qui e' piu' chiaro che in atlante.html (#565A66): su questo
     fondo quello dava 2,94:1 e il testo piccolo non si legge. #777A86 da'
     4,73:1, sopra la soglia WCAG AA. Stessa famiglia, stessa freddezza. */
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --cond:"IBM Plex Sans Condensed","Helvetica Neue",Arial,sans-serif;
  --misura:64ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--void); color:var(--ink);
  font-family:var(--cond); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--amber);color:var(--void)}

a{color:var(--amber-hot);text-decoration:none;border-bottom:1px solid var(--hair)}
a:hover{border-bottom-color:var(--amber-hot)}
:focus-visible{outline:2px solid var(--amber-hot);outline-offset:3px}

.pagina{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}

/* --- testata ------------------------------------------------------------ */
.testata{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;
  padding:26px 0 0}
.marchio{font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--ink);
  border:none}
.marchio:hover{color:var(--amber-hot)}
.lingue{margin-left:auto;font-family:var(--mono);font-size:12px;
  color:var(--ink-faint);display:flex;gap:10px;align-items:baseline}
.lingue a{border:none;color:var(--ink-dim)}
.lingue a:hover{color:var(--amber-hot)}
.lingue [aria-current]{color:var(--ink);border-bottom:1px solid var(--amber)}

/* --- soglia -------------------------------------------------------------- */
/* L'immagine sta dietro alla prima schermata. Non e' decorazione: e' un
   fotogramma vero dell'atlante, di un posto che non si raggiunge nei primi
   dieci secondi -- Saturno, con la divisione di Cassini al raggio giusto.
   Le proporzioni vengono da una misura di luminanza su griglia 8x6 fatta da
   uiux: il quadrante in alto a sinistra (25% x 33%) e' nero vero, 8-12 su
   255, ed e' li' che va il testo. Gli anelli attraversano la sinistra a mezza
   altezza, quindi una colonna sinistra pulita a tutta altezza NON esiste.
   Se il file non c'e' non si rompe niente: resta il fondo nero di prima. */
.fondo{position:absolute;inset:0 0 auto 0;height:min(100vh,880px);z-index:-1;
  background-color:var(--void);background-repeat:no-repeat;
  background-position:54% 44%;background-size:cover;
  background-image:url("media/soglia.jpg")}
.fondo::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 95% at 2% 18%,rgba(5,6,11,.97) 0%,
      rgba(5,6,11,.9) 32%,rgba(5,6,11,.45) 54%,rgba(5,6,11,0) 76%),
    linear-gradient(103deg,var(--void) 0%,rgba(5,6,11,.9) 22%,
      rgba(5,6,11,.5) 44%,rgba(5,6,11,.06) 68%),
    linear-gradient(to bottom,rgba(5,6,11,.45) 0%,rgba(5,6,11,0) 20%,
      rgba(5,6,11,0) 60%,var(--void) 97%)}
.soglia{padding:clamp(48px,11vh,110px) 0 0}
h1{
  margin:0 0 28px; font-weight:600;
  font-size:clamp(38px,7.2vw,86px); line-height:1.02;
  letter-spacing:-.022em; max-width:17ch;
}
.guida{margin:0 0 34px;max-width:var(--misura);font-size:clamp(17px,1.5vw,20px);
  line-height:1.66;color:var(--ink)}
.guida b{font-weight:600;color:var(--ink)}
/* i numeri in mezzo alla prosa restano nel carattere del testo: il mono qui
   spezzava la lettura. Resta mono dove il numero e' un dato in colonna. */
.n{font-variant-numeric:tabular-nums;font-weight:600;color:var(--amber-hot)}
/* ogni numero porta alla sua fonte: un numero con la fonte a un clic *e'*
   l'argomento del progetto, dirlo in prosa altrove lo indebolisce (uiux) */
a.n{border-bottom:1px solid rgba(224,122,47,.3)}
a.n:hover,a.n:focus-visible{border-bottom-color:var(--amber-hot)}

/* il costo sta SOTTO il bottone, non accanto: accanto finiva sugli anelli,
   dove il fondo e' chiaro e quel testo e' il piu' piccolo della pagina */
.azione{display:flex;flex-direction:column;align-items:flex-start;gap:15px;
  margin-bottom:14px}
.entra{
  display:inline-block;padding:15px 30px;border:1px solid var(--amber);
  background:linear-gradient(100deg,rgba(224,122,47,.14),rgba(10,12,20,.5));
  color:var(--amber-hot);font-size:17px;font-weight:600;letter-spacing:.01em;
  transition:background .25s,box-shadow .25s;
}
.entra:hover{background:linear-gradient(100deg,rgba(224,122,47,.3),rgba(10,12,20,.5));
  box-shadow:0 0 38px rgba(224,122,47,.22)}
.postilla{margin:0;font-size:14.5px;color:var(--ink-faint);
  max-width:32ch;line-height:1.55}
.postilla b{display:block;color:var(--ink-dim);font-weight:400}

/* il browser non sa fare WebGL: lo diciamo qui, non con uno schermo nero */
#senzaWebgl{display:none;margin:0 0 14px;padding:16px 20px;max-width:var(--misura);
  border-left:2px solid var(--amber);background:var(--void-2);
  font-size:15px;color:var(--ink-dim)}
#senzaWebgl b{color:var(--ink);font-weight:600}
body.no-webgl #senzaWebgl{display:block}
body.no-webgl .entra{opacity:.42;pointer-events:none}

/* --- la riga delle distanze --------------------------------------------- */
/* Posizioni in percentuale = logaritmo decimale della distanza in metri,
   riscalato fra la Luna (3,844e8 m) e cento megaparsec (3,086e24 m).
   Sono misure, non spaziatura decorativa. */
.scala{margin:clamp(54px,9vh,96px) 0 0;padding:0 0 62px;position:relative}
.scala h2{font-size:13px;font-weight:400;color:var(--ink-dim);margin:0 0 30px;
  letter-spacing:.01em;max-width:58ch}
.riga{position:relative;height:1px;background:var(--hair-2);margin-top:96px}
.riga::after{content:"";position:absolute;inset:0;background:var(--amber);
  transform-origin:left;animation:traccia 1.5s cubic-bezier(.2,.7,.2,1) both}
@keyframes traccia{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Le tappe si alternano sopra e sotto la riga. Non e' un vezzo: affiancate
   tutte sotto si sovrappongono sotto i 1000px, e le distanze stanno dove
   stanno -- la spaziatura la detta il logaritmo, non il disegno. */
.tappa{position:absolute;top:0;transform:translateX(-50%);text-align:center;
  width:14ch}
.tappa i{display:block;width:1px;height:12px;background:var(--ink-faint);
  margin:0 auto 10px;position:relative;top:-12px}
.tappa b{display:block;font-weight:400;font-size:13.5px;color:var(--ink);
  line-height:1.3}
.tappa span{display:block;font-family:var(--mono);font-size:11px;
  color:var(--ink-faint);margin-top:3px;font-variant-numeric:tabular-nums}
.tappa.su{top:auto;bottom:0;display:flex;flex-direction:column-reverse}
.tappa.su i{margin:10px auto 0;top:12px}
.tappa.su span{margin:0 0 3px}

/* --- mete ---------------------------------------------------------------- */
.mete{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:clamp(26px,3.4vw,52px);margin:clamp(56px,8vh,96px) 0 0}
.meta h3{margin:0 0 9px;font-size:19px;font-weight:600;letter-spacing:-.005em}
.meta p{margin:0;color:var(--ink-dim);font-size:15.5px;line-height:1.6;
  max-width:42ch}

/* --- blocco dell'onesta' ------------------------------------------------- */
.onesta{margin:clamp(62px,9vh,110px) 0 0;padding:clamp(30px,4vw,46px) 0 0;
  border-top:1px solid var(--hair)}
.onesta h2{margin:0 0 20px;font-size:clamp(25px,3.1vw,36px);font-weight:600;
  letter-spacing:-.015em;line-height:1.14;max-width:20ch}
.onesta p{margin:0 0 15px;max-width:var(--misura);color:var(--ink-dim)}
.onesta p.forte{color:var(--ink);font-size:clamp(18px,1.8vw,22px);line-height:1.5;
  border-left:2px solid var(--amber);padding-left:20px;margin:26px 0}

/* --- testo lungo (pagine interne) ---------------------------------------- */
.testo{padding:clamp(40px,7vh,76px) 0 0;max-width:var(--misura)}
.testo h1{font-size:clamp(32px,4.6vw,52px);margin-bottom:18px;max-width:20ch}
.occhiello{font-family:var(--mono);font-size:13px;color:var(--ink-dim);
  margin:0 0 40px;line-height:1.6}
.testo h2{font-size:21px;font-weight:600;margin:46px 0 4px;letter-spacing:-.005em;
  scroll-margin-top:24px}
.testo h2 + .riga-fonte{margin-top:0}
.riga-fonte{font-family:var(--mono);font-size:12px;color:var(--ink-faint);
  margin:0 0 12px;line-height:1.7}
.testo h3{font-size:16.5px;font-weight:600;margin:30px 0 8px;
  letter-spacing:-.003em;color:var(--ink)}
.testo p{margin:0 0 14px;color:var(--ink-dim)}
.testo p strong{color:var(--ink);font-weight:600}
.testo ul{margin:0 0 14px;padding-left:19px;color:var(--ink-dim)}
.testo li{margin-bottom:7px}
.gruppo{margin:58px 0 0;padding-top:26px;border-top:1px solid var(--hair)}
.gruppo > p:first-of-type{color:var(--ink)}
.attesa{color:var(--ink-faint);font-style:normal}

/* i comandi: il termine e cosa fa, su due colonne. Il termine e' mono perche'
   e' una cosa da premere, non una parola da leggere. */
.comandi{display:grid;grid-template-columns:auto 1fr;gap:5px 22px;
  margin:0 0 16px;align-items:baseline}
.comandi dt{font-family:var(--mono);font-size:13px;color:var(--amber-hot);
  white-space:nowrap}
.comandi dd{margin:0;color:var(--ink-dim)}

/* --- piede --------------------------------------------------------------- */
.piede{margin:clamp(70px,10vh,120px) 0 0;padding:26px 0 46px;
  border-top:1px solid var(--hair-2);display:flex;gap:28px;flex-wrap:wrap;
  align-items:baseline;font-size:14px;color:var(--ink-faint)}
.piede nav{display:flex;gap:22px;flex-wrap:wrap}
.piede a{color:var(--ink-dim);border:none}
.piede a:hover{color:var(--amber-hot)}
.piede .credito{margin-left:auto;font-family:var(--mono);font-size:11.5px;
  max-width:46ch;line-height:1.65;text-align:right}

@media (max-width:620px){
  /* verticale: il soggetto sta nel terzo centrale, il sesto sopra e quello
     sotto sono neri pieni. Titolo sopra, pianeta in mezzo, bottone sotto --
     senza ritagliare niente, perche' la fascia fa gia' il lavoro. */
  .fondo{height:min(94vh,820px);background-position:50% 50%;
    background-image:url("media/soglia-verticale.jpg")}
  /* Sul telefono il testo copre tutta l'altezza, quindi la fascia centrale
     chiara ci finisce sotto: a 375px l'immagine fa l'atmosfera, non la
     protagonista. Velo quasi uniforme, abbastanza scuro da tenere il testo
     sopra 8:1 anche sul punto piu' bianco degli anelli. */
  .fondo::after{background:
    linear-gradient(to bottom,var(--void) 0%,rgba(5,6,11,.87) 13%,
      rgba(5,6,11,.82) 58%,rgba(5,6,11,.9) 82%,var(--void) 96%)}
}

@media (max-width:560px){
  .comandi{grid-template-columns:1fr;gap:1px 0}
  .comandi dd{margin:0 0 12px}
}

@media (max-width:760px){
  body{font-size:16px}
  .scala{padding:0}
  .riga{height:auto;background:none;margin-top:0}
  .riga::after{display:none}
  .tappa,.tappa.su{position:static;transform:none;text-align:left;width:auto;
    display:grid;grid-template-columns:8ch 1fr;gap:14px;align-items:baseline;
    padding:9px 0;border-top:1px solid var(--hair-2)}
  .tappa i{display:none}
  .tappa span,.tappa.su span{margin:0;order:-1;color:var(--amber-hot)}
  .piede .credito{margin-left:0;text-align:left}
}

@media (prefers-reduced-motion:reduce){
  .riga::after{animation:none}
  *{transition:none!important}
}