/* Nav: barra di navigazione flottante in vetro. */

  /* ============ Nav ============ */
  /* navbar flottante in vetro: pill arrotondata, staccata dai bordi.
     È FIXED, non sticky: così la foto della hero le passa dietro fino al bordo
     superiore della pagina (con sticky resterebbe una striscia di fondo sopra). */
  .nav{
    position:fixed; top:clamp(.6rem,1.4vw,1rem); left:0; right:0; z-index:var(--z-nav);
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    width:min(calc(100% - 2*clamp(1.1rem,4vw,2rem)), var(--maxw));
    margin-inline:auto;
    padding:.78rem .7rem .78rem 1.3rem;
    border-radius:999px;
    /* vetro: velo chiaro sottile + sfocatura ampia. La saturazione ravviva ciò che
       passa sotto (è quello che distingue il vetro da un pannello semitrasparente),
       e il filo di luce in alto simula il riflesso sul bordo. */
    background:color-mix(in srgb, var(--card) 40%, transparent);
    -webkit-backdrop-filter:saturate(1.9) blur(20px);
    backdrop-filter:saturate(1.9) blur(20px);
    border:1px solid color-mix(in srgb, #ffffff 62%, transparent);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.55),
      0 1px 2px rgba(var(--shadow-rgb),.04),
      0 18px 40px -26px rgba(var(--shadow-rgb),.45);
    transition:background-color .3s var(--ease), box-shadow .3s var(--ease);
  }
  /* scrollando il velo si addensa: sotto passano bande scure e foto, e il testo
     verde deve restare leggibile (a questa densità resta sopra 7:1 anche sul verde) */
  .nav.is-scrolled{
    background:color-mix(in srgb, var(--card) 64%, transparent);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.5),
      0 1px 2px rgba(var(--shadow-rgb),.05),
      0 20px 44px -26px rgba(var(--shadow-rgb),.5);
  }
  /* senza backdrop-filter il velo al 40% non basta su una foto scura: si compatta */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .nav{ background:color-mix(in srgb, var(--card) 88%, transparent); }
    .nav.is-scrolled{ background:color-mix(in srgb, var(--card) 94%, transparent); }
  }
  .nav__brand{ font-family:'Young Serif',serif; font-size:1.2rem; color:var(--ink); text-decoration:none; letter-spacing:-.01em;
    display:inline-flex; align-items:center; gap:.55rem; }
  /* all'atterraggio la navbar è sopra la foto: stesso trattamento della hero
     (bianco + ombra portata) finché il vetro non si addensa allo scroll */
  .nav__mark{ width:1.5rem; height:1.5rem;
    filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(var(--photo-shadow-rgb),.5));
    transition:filter .3s var(--ease); }
  .nav.is-scrolled .nav__mark{ filter:none; }
  .nav__links{ display:flex; align-items:center; gap:1.9rem; }
  .nav__links a{ color:var(--ink); text-decoration:none; font-weight:500; font-size:.95rem; }
  .nav__links a:hover{ color:var(--accent); }
  /* le due lingue: stessa larghezza e stessa altezza, testo centrato in entrambe */
  .nav__lang{ display:inline-flex; align-items:stretch; border:1px solid var(--line); border-radius:999px; overflow:hidden;
    font-size:.82rem; font-weight:700; line-height:1; }
  .nav__lang span,.nav__lang a{
    display:flex; align-items:center; justify-content:center;
    min-width:2.6rem; padding:.34rem .5rem;
    text-decoration:none; color:var(--ink-soft); line-height:1;
  }
  .nav__lang .on{ background:var(--accent); color:var(--accent-ink); }
  /* su mobile spariscono le voci di menu, NON il selettore lingua (che è dentro .nav__lang) */