/* ==========================================================================
   LAB 451 — Generative Grid  (exp.lab451.net/generativeart/)
   Includere DOPO il <style> inline esistente.
   Passa da dark/lime + Instrument Serif a bianco/navy/purple + DM Sans.
   ========================================================================== */

:root {
  --bg:       var(--l451-bg);
  --surface:  var(--l451-surface);
  --border:   var(--l451-border);
  --text:     var(--l451-text);
  --text-dim: var(--l451-muted);
  --accent:   var(--l451-accent);
}

body { font-family: var(--l451-font); }

/* Titoli: da Instrument Serif a DM Sans bold */
header h1 {
  font-family: var(--l451-font);
  font-weight: 700;
  letter-spacing: -0.03em;
}
header h1 em {
  font-style: normal;
  background: var(--l451-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.experiment-title {
  font-family: var(--l451-font);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--l451-text);
}

/* Etichette tecniche restano mono (DM Mono, stessa famiglia) */
.experiment-number,
header .meta,
footer,
.btn { font-family: var(--l451-font-mono); }

.experiment-desc { font-size: 0.85rem; }

/* La tela era bianca su fondo nero: ora serve un bordo per staccarla */
.canvas-wrap {
  border: 1px solid var(--l451-border);
  box-shadow: var(--l451-shadow);
}

.btn:hover { background: var(--l451-accent-dim); }

/* --- Allineamento riquadri ---
   Titoli e descrizioni di lunghezza diversa spostavano le tele a quote diverse.
   Ogni card diventa una colonna flex e la tela viene spinta in fondo:
   le card della stessa riga hanno la stessa altezza (grid stretch),
   quindi le tele risultano allineate. */
.experiment {
  display: flex;
  flex-direction: column;
}
.canvas-wrap {
  margin-top: auto;
  width: 100%;
}
/* p5 imposta width/height inline a 500px: la tela si adatta alla colonna */
.canvas-wrap canvas {
  width: 100% !important;
  height: auto !important;
}