/* ============================================================
   MASTURZO — Design tokens
   Stessa grammatica del tema Mital (colori neutri, scala 8pt,
   misura 720px, un solo carattere + mono per le etichette,
   motion lenta), ma monocromo: niente ambra, che è il colore
   del marchio Mital. Le foto portano il colore, il nero firma.
   ============================================================ */

/* Inter e JetBrains Mono copiati dal tema Mital: tutto locale,
   nessuna richiesta a host esterni. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colori — regola 80% neutri, come Mital.
     --color-text-soft è più scuro del #8A8A8A di Mital: quel grigio su
     bianco fa 3.4:1 e non passa AA per il testo piccolo (etichette 13px,
     testo inglese). #666 fa 5.7:1 su bianco e 5.2:1 su #F5F4F2. */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F4F2;
  --color-text: #111111;
  --color-text-soft: #666666;
  --color-line: #E3E1DD;
  /* Nessun accento: la firma è il nero pieno (filetto del footer,
     pulsanti al passaggio, selezione del testo). */
  --color-ink: #111111;

  /* Tipografia — una famiglia, gerarchia per dimensione e non per peso.
     Scala di Mital, con un passo in più (small) per footer e meta. */
  --font-sans: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-label: 0.8125rem;                                  /* 13px etichette mono */
  --text-small: 0.875rem;                                   /* 14px meta, footer */
  --text-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);      /* 16–18px */
  --text-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);   /* 18–20px sottotitoli */
  --text-h2: clamp(1.375rem, 1.2rem + 0.55vw, 1.625rem);    /* 22–26px */
  --text-display: clamp(2rem, 1.55rem + 1.4vw, 2.6875rem);  /* 32–43px */
  --leading-body: 1.6;
  --leading-tight: 1.15;
  --tracking-label: 0.05em;

  /* Spaziatura — scala 8pt (come Mital) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-15: 120px;
  --space-20: 160px;
  --section-gap: clamp(64px, 4vw + 40px, 160px);

  /* Layout */
  --grid-gutter: 24px;
  --page-margin: max(5vw, 24px);
  --container: 1600px;
  --measure: 720px;           /* larghezza massima del testo */
  --header-h: 76px;
  --col-gap: clamp(40px, 4vw, 80px); /* stacco fra colonna testo e colonna foto */

  /* Immagini: un solo riquadro per tutte le card.
     3:4 è la mediana reale delle foto (progetti 0.74, copertine 0.76,
     news 0.80: vedi media.csv), quindi il taglio medio è minimo. */
  --card-ratio: 3 / 4;

  /* Motion — poche, lente, coerenti (Mital) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-hover: 0.6s;
  --dur-reveal: 0.7s;

  /* Zero raggi, zero ombre */
  --radius: 0;
  --shadow: none;
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }
}
@media (max-width: 599.98px) {
  :root { --grid-gutter: 16px; }
}