/*
    PP Neue Montreal è un font a pagamento (Pangram Pangram Foundry),
    quindi non è scaricabile da un CDN pubblico: va autoospitato.
    Sostituisci gli url() qui sotto con i tuoi file di licenza
    (di solito .woff2), poi la variabile --font-logo la userà.
    Finché i file non ci sono, il browser userà i fallback indicati.
  */
  @font-face{
    font-family:'PP Neue Montreal';
    font-weight:600;
    font-style:normal;
    font-display:swap;
    src:url('/fonts/neuemontreal-semibold.woff2') format('woff2');
  }

  :root{
    --bg:#ffffff;
    --fg:#000000;
    --font-logo: 'PP Neue Montreal', -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --font-sub: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --u: calc(100vw / 72);
  }
  @media (max-width: 767.98px) {
    :root{ --u: calc(100vw / 58); }
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    background:var(--bg);
    color:var(--fg);
    font-family:var(--font-sub);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }

  .lockup{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.6em;
  }

  /* Dot-grid identica al loader del portfolio */
  .c-dot-grid{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    color:#000000;
    opacity:1;
    background-image:radial-gradient(circle at 0 0, currentColor 1px, transparent 1px);
    background-size:var(--u) var(--u);
    pointer-events:none;
    z-index:1;
  }
  @media (max-width:991.98px){
    .c-dot-grid{
      background-size:calc(var(--u) * 2) calc(var(--u) * 2);
    }
  }

  .logo{
    font-family:var(--font-logo);
    font-size:clamp(1.3rem,5vw,3.6rem);
    font-weight:600;
    letter-spacing:0.02em;
    white-space:pre;
  }
  .logo .char{
    display:inline-block;
    transition:color 120ms linear;
  }
  .logo .char.is-resolved{
    color:var(--fg);
  }
  .logo .char.is-cycling{
    color:#a8a8a8;
  }

  .sub{
    font-family:var(--font-sub);
    font-size:12px;
    letter-spacing:.02em;
    opacity:.55;
  }

  @media (prefers-reduced-motion: reduce){
    .logo .char{ color:var(--fg) !important; }
  }