:root{
  /* sfondo “carta” */
  --paper: #f6f3ee;
  --ink: #1f2130;

  /* colore effetto hover quadratini */
  --hover: rgba(31, 33, 48, 0.18);
}

*{ box-sizing: border-box; }

html, body{
  height: 100%;
  margin: 0;
}

body{
  background: var(--paper);
  color: var(--ink);
  overflow: hidden; /* per non scrollare quando la griglia è grande */

  /* un filo di “texture” senza immagini */
  background-image:
    radial-gradient(circle at 10% 20%, rgba(0,0,0,0.03), transparent 45%),
    radial-gradient(circle at 80% 10%, rgba(0,0,0,0.02), transparent 55%),
    linear-gradient(0deg, rgba(0,0,0,0.02), rgba(0,0,0,0.00));
}

/* Griglia quadratini 20x20, sotto al testo */
#grid{
  position: fixed;
  inset: 0;
  z-index: 0;

  --cell: 20px; /* default, verrà sovrascritto da JS */

  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  grid-template-rows: repeat(var(--rows), var(--cell));
  justify-content: center;
  align-content: center;

  pointer-events: none;
  opacity: 0.9;
}

.cell{
  width: var(--cell);
  height: var(--cell);
  background: transparent;
  transition: background-color 140ms linear;
}

/* Centro perfetto testo */
.center{
  position: relative;
  z-index: 1;

  height: 100%;
  display: grid;
  place-items: center;
  padding: 5vh 6vw; /* respiro su mobile */
  text-align: center;
}

.name{
  margin: 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.02;

  /* dimensione responsive: mai troppo grande, mai troppo piccola */
  font-size: clamp(34px, 6vw, 92px);

  /* leggero effetto “stampa” */
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

/* Opzionale: su schermi molto bassi riduci un pelo */
@media (max-height: 500px){
  .name{ font-size: clamp(28px, 7vw, 70px); }
}