/* Il fondo di tutte le pagine: colori e misure, vetro, barra in alto, tasti, apertura, invito.
   Lo sfondo sta in sfondo.css, i nodi in nodi.css, il rimpicciolimento per le finestre strette in zoom.css, la scia
   del mouse in scia-mouse.css. */
:root {
  /* parete, macchie e perle dello sfondo */
  --wall: #efede9;
  --bianco: #ffffff;
  --blob-sand: #e6dccd;
  --blob-stone: #d7d2ca;
  --blob-silver: #d3d7dc;
  --blob-taupe: #c9c1b6;
  --perla-1: #f6f3ee;
  --perla-2: #e2dbd1;
  --perla-3: #c2b8ab;
  --perla-4: #a99f92;
  --perla-ombra: rgba(80, 66, 50, 0.35);
  --perla-punto: #ede8e1;

  /* testi */
  --text: #1d1d1f;
  --text-2: #5e5e63;
  --text-3: #8a8a8f;
  --text-3-piccolo: #6b6b70; /* lo stesso grigio, più scuro per le scritte piccole: si leggono bene (4,5 a 1) */
  --ink: #3a3a3c;

  /* bianchi trasparenti (il numero è l'opacità) */
  --bianco-95: rgba(255, 255, 255, 0.95);
  --bianco-90: rgba(255, 255, 255, 0.9);
  --bianco-80: rgba(255, 255, 255, 0.8);
  --bianco-75: rgba(255, 255, 255, 0.75);
  --bianco-70: rgba(255, 255, 255, 0.7);
  --bianco-60: rgba(255, 255, 255, 0.6);
  --bianco-55: rgba(255, 255, 255, 0.55);
  --bianco-35: rgba(255, 255, 255, 0.35);
  --bianco-25: rgba(255, 255, 255, 0.25);
  --bianco-22: rgba(255, 255, 255, 0.22);
  --bianco-18: rgba(255, 255, 255, 0.18);
  --bianco-14: rgba(255, 255, 255, 0.14);
  --bianco-10: rgba(255, 255, 255, 0.1);
  --bianco-0: rgba(255, 255, 255, 0);
  --maschera: #000000;

  /* vetro */
  --glass-top: rgba(255, 255, 255, 0.62);
  --glass-bottom: rgba(255, 255, 255, 0.3);
  --glass-shade: rgba(70, 58, 44, 0.2);
  --glass-shade-soft: rgba(70, 58, 44, 0.07);
  --glass-fondo: rgba(90, 74, 58, 0.28);
  --lens-full: rgba(250, 248, 244, 0.92);
  --icona-ombra: rgba(70, 58, 44, 0.3);

  /* tasti */
  --graphite-top: #3c3c3f;
  --graphite-bottom: #1c1c1e;
  --on-graphite: #ffffff;
  --graphite-ombra: rgba(20, 18, 16, 0.55);
  --tab-top: rgba(255, 255, 255, 0.78);
  --tab-bottom: rgba(255, 255, 255, 0.38);
  --tab-line: rgba(60, 56, 52, 0.13);
  --tab-line-attivo: rgba(60, 56, 52, 0.22);
  --tab-shade: rgba(70, 58, 44, 0.22);
  /* il fondo e le ombre del vetro (anche sollevato), dei nodi della rete aperta e della voce aperta del menu: servono
     anche al passaggio fra le pagine (transizioni.css) e alle schede che si sollevano */
  --vetro-fondo: linear-gradient(160deg, var(--glass-top), var(--glass-bottom));
  /* il bordo di luce del vetro (.glass::before) */
  --vetro-bordo: linear-gradient(
    135deg,
    var(--bianco) 0%,
    var(--bianco-25) 38%,
    var(--bianco-10) 60%,
    var(--bianco-80) 100%
  );
  --vetro-sfoca: blur(22px) saturate(170%);
  /* la sfocatura dei nodi a pillola e dei tasti di «Per chi» (sul telefono niente sfocatura: stili/telefono.css) */
  --nodo-sfoca: blur(3px) saturate(150%);
  --tasto-sfoca: blur(10px) saturate(170%);
  --vetro-luci:
    inset 0 1px 0 var(--bianco-95), inset 0 -1px 1px var(--bianco-35),
    inset 0 -12px 22px -16px var(--glass-fondo);
  --vetro-ombra: var(--vetro-luci), 0 24px 50px -24px var(--glass-shade), 0 2px 6px var(--glass-shade-soft);
  --vetro-ombra-alta:
    var(--vetro-luci), 0 40px 64px -28px var(--glass-shade), 0 2px 6px var(--glass-shade-soft);
  --nodo-ombra: inset 0 1px 0 var(--bianco), 0 0 0 1px var(--tab-line), 0 12px 24px -12px var(--icona-ombra);
  --voce-aperta-ombra:
    inset 0 1px 0 var(--bianco), 0 0 0 1px var(--tab-line-attivo), 0 6px 14px -8px var(--tab-shade);

  /* rete di nodi: fili, puntini e colori di significato */
  --filo: rgba(60, 56, 52, 0.3);
  --punto-bordo: rgba(60, 50, 40, 0.1);
  --punto-ombra: rgba(60, 50, 40, 0.3);
  --ai: #9b92c4;
  --code: #8aa3c4;
  --person: #86ae98;
  --data: #cfa27e;
  --data-scuro: #93633d; /* la stessa sabbia, scura perché le scritte piccole si leggano bene (Per chi) */
  --silver: #a9a9af;

  --ease: cubic-bezier(0.45, 0, 0.55, 1);
  --col-mouse: 0.45s; /* quanto ci mettono le schede a rispondere al mouse (si sollevano, si illuminano) */
  --sans: -apple-system, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'SF Mono', Menlo, monospace;
  --pad: 40px;
  --raggio-scheda: 28px; /* le 4 schede della Home e le colonne che diventano */
  --raggio-lastra: 36px; /* le schede grandi di vetro: casi, idee, contatti, storie di Per chi */
  /* la barra del menu in alto: quanto sta sotto la cima della pagina e quanto è alta */
  --nav-cima: 20px;
  --nav-alta: 66px;
}

/* La pagina è una composizione larga 1200, al centro della finestra */
html {
  overflow-x: hidden;
  /* il posto della barra di scorrimento c'è sempre: quando una pagina si allunga (la rete aperta) non si sposta */
  scrollbar-gutter: stable;
  background: var(--wall);
}
body {
  margin: 0;
  background: var(--wall);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  color: var(--text);
}
/* Sui telefoni e sui tablet quello che esce di lato (macchie e perle dello sfondo, la rete della Home) si taglia già
   nel body: il browser allargherebbe la pagina per farlo stare, con una fascia vuota a destra che si trascina. Sul
   computer basta html, e lì il taglio cambierebbe di un soffio le sfocature dello sfondo. */
@media (pointer: coarse) {
  body {
    overflow-x: clip;
  }
}
* {
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
p {
  margin: 0;
}
.site {
  position: relative;
  width: 1200px;
  /* sugli schermi più alti della pagina lo sfondo arriva fino in fondo alla finestra */
  min-height: 100vh;
  margin: 0 auto;
  overflow-x: visible;
  overflow-y: clip;
}
/* Il contenuto è una colonna: ogni blocco viene dopo il precedente (lo spazio fra i due è il suo margine in alto),
   così l'altezza della pagina si calcola da sola. Sotto l'ultima cosa restano 80 punti di respiro. */
main {
  position: relative;
  z-index: 2;
  display: flow-root;
  padding: 0 var(--pad) 80px;
}

/* Vetro liquido */
.glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--vetro-fondo);
  -webkit-backdrop-filter: var(--vetro-sfoca);
  backdrop-filter: var(--vetro-sfoca);
  box-shadow: var(--vetro-ombra);
}
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: var(--vetro-bordo);
  -webkit-mask:
    linear-gradient(var(--maschera) 0 0) content-box,
    linear-gradient(var(--maschera) 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(var(--maschera) 0 0) content-box exclude,
    linear-gradient(var(--maschera) 0 0);
}
/* Le schede grandi di vetro col mouse sopra si sollevano, come i riquadri: le schede con i nodi di «Cosa faccio» e
   «Chi sono», anche quella senza nodi, e le due di «Contatti». Solo dove c'è un mouse vero («hover»): toccando col
   dito il telefono finge un mouse sopra, che poi resta attaccato */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .caso,
  .contatto {
    transition:
      transform var(--col-mouse) var(--ease),
      box-shadow var(--col-mouse) var(--ease);
  }
  .caso:hover,
  .contatto:hover {
    transform: translateY(-6px);
    box-shadow: var(--vetro-ombra-alta);
  }
}

/* Barra in alto: il marchio (il menu sta accanto, .links) */
.nav {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  top: var(--nav-cima);
  height: var(--nav-alta);
  border-radius: 33px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0 12px 0 14px;
  z-index: 3;
}
/* Il logo (scelta di Leo, «Il nodo LC»): il nome e, dopo, il nodo con le iniziali disegnate (pagine/parti/logo-nodo.html).
   Le lettere sono forme, non un carattere: il logo è uguale su ogni schermo. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.28em;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.03em;
}
.nodo-lc {
  flex: none;
  width: 48px;
  height: 48px;
  color: var(--text);
}
.nodo-lc-filo {
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
}
.nodo-lc-corpo {
  fill: currentColor;
}
.nodo-lc-lettere {
  fill: var(--bianco);
}
.nodo-lc-porta {
  fill: var(--bianco);
  stroke: currentColor;
  stroke-width: 3.5;
}
.nodo-lc-ai {
  fill: var(--ai);
  stroke: var(--bianco);
  stroke-width: 3;
}
/* Il menu: sul computer dentro la barra in alto, a destra, dove stava sempre (sul telefono va in basso,
   stili/telefono.css). Nella pagina sta fuori dalla barra di vetro: il vetro tratterrebbe un menu fermo in basso */
.links {
  position: absolute;
  top: var(--nav-cima);
  right: calc(var(--pad) + 12px);
  height: var(--nav-alta);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: var(--text-2);
}
/* Le voci del menu e quelle delle lingue sono le stesse pillole; quella della pagina (o lingua) aperta è bianca */
.links a,
.lingue a {
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: linear-gradient(160deg, var(--tab-top), var(--tab-bottom));
  box-shadow:
    inset 0 1px 0 var(--bianco),
    0 0 0 1px var(--tab-line),
    0 6px 14px -8px var(--tab-shade);
}
.links a {
  height: 42px;
  padding: 0 20px;
}
/* le icone delle voci servono solo al menu in basso del telefono (stili/telefono.css) */
.links svg {
  display: none;
}
.links a[aria-current='page'],
.lingue a[aria-current='true'] {
  color: var(--text);
  background: var(--bianco);
  box-shadow: var(--voce-aperta-ombra);
}
/* Il selettore delle lingue (scelta di Leo): subito sotto la barra, allineato a destra con le voci del menu */
.lingue {
  position: absolute;
  top: calc(var(--nav-cima) + var(--nav-alta) + 12px);
  right: calc(var(--pad) + 12px);
  z-index: 3;
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
}
.lingue a {
  height: 30px;
  padding: 0 13px;
}

/* Disegni SVG: un solo modo di disegnare il tratto; colore e spessore cambiano con --tratto e --spessore */
.ico {
  fill: none;
  stroke: var(--tratto, var(--ink));
  stroke-width: var(--spessore, 1.7);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tasti */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
}
.btn-dark {
  background: linear-gradient(180deg, var(--graphite-top), var(--graphite-bottom));
  color: var(--on-graphite);
  box-shadow:
    inset 0 1px 0 var(--bianco-22),
    0 10px 24px -10px var(--graphite-ombra);
}

/* Apertura delle pagine: titolo grande a sinistra (seconda riga grigia), frase a destra */
h1,
.titolo-grande {
  font-size: 66px;
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.035em;
}
h1 span,
.titolo-grande span {
  color: var(--text-3);
}
.intro {
  position: relative;
  margin-top: 150px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.intro h1,
.intro .titolo-grande {
  margin-top: -14px;
}
.intro-side {
  width: 420px;
  font-size: 20px;
  line-height: 1.45;
  color: var(--text-2);
}

/* In fondo alla pagina: la domanda e il tasto Contatti */
.invito {
  height: 96px;
  border-radius: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 40px;
}
.invito p {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.invito p span {
  font-weight: 400;
  color: var(--text-2);
}
.invito .btn {
  height: 56px;
  padding: 0 var(--invito-lati, 32px);
}