/* Nodo — identity file (premium-client-sites, signature.md). Every component reads these tokens.

   Where each piece comes from (all from the client's own brand board, input/brand-board.png, and logo SVG):
   - ground   Ink #202435, the colour of the wordmark: the page is set on the logo's own ink, never on white or cream.
   - ink      Ivory #F6F4EF, the brand's paper colour, used as the text colour on the ink ground.
   - accent   Electric Indigo #4E59E8, the dot that closes "nodo." — used for the dot, the live thing and little else.
   - light    the same indigo, as the glow of a screen behind the page (brand-light, "neon").
   - paper    Ivory, for the things you hold: the itinerary slip and the business card.
   - field    Soft Lavender #E5E8FF, one section only (the request composer).
   - lettering the logo itself (vector, from input/NODO-Logos); titles in Space Grotesk, text in DM Sans (the board's pair).
   - motif    the node: a dot on the 8-point grid of the brand's design system.
   - material the white concrete against a black sky, the black-and-white picture of the brand's visual style, veiled in ink.
   Violet/indigo is the brand's real colour, not an aesthetic choice: inspect runs with --allow palette-purple.
   Fonts are loaded with <link> in each page's <head>, never @import. */

:root {
  --ground: #202435;
  --ground-2: #282d42;        /* one tone step up, for alternating rows and bands */
  --ink: #F6F4EF;
  --muted: #b9bccb;           /* soft ink on the ground, 9.0:1 */
  --faint: #6c7186;           /* the unlit words of words-light-up */
  --accent: #4E59E8;
  --accent-ink: #F6F4EF;      /* text on the accent, 4.9:1 */
  --accent-soft: #8b93ff;     /* indigo that reads on the ink ground (5.6:1), for small marks */
  --light: #4E59E8;
  --paper: #F6F4EF;
  --paper-ink: #202435;
  --paper-muted: #4d5266;     /* 7.6:1 on paper */
  --field: #E5E8FF;
  --field-ink: #202435;
  --slate: #858A99;
  --font-sign: 'Space Grotesk', system-ui, sans-serif;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-text: 'DM Sans', system-ui, sans-serif;
  --veil: .86;
  --grain: .07;
  --film-shadow: #202435;
  --film-light: #4E59E8;
  --film-light-amount: .12;
  --film-sat: .85;
  --film-sepia: 0;
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='1.6' fill='%234E59E8'/%3E%3C/svg%3E");
}

html { background: var(--ground); color: var(--ink); }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.55 var(--font-text); }

/* The ground made of the client's material: the black-and-white concrete of the brand imagery, veiled in ink. */
.material { position: relative; isolation: isolate; }
.material::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url('../img/spigolo.webp') var(--material-pos, center 40%) / var(--material-size, cover) no-repeat; }
@media (max-width: 767px) { .material::before { background-image: url('../img/spigolo-tel.webp'); } }
.material::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ground); opacity: var(--veil); }

/* The node motif: a row of grid dots. */
.motif-band { height: 16px; background: var(--motif) repeat-x 0 0 / 16px 16px; }

.sign { font-family: var(--font-sign); font-weight: 700; letter-spacing: -.04em; line-height: .9; }

/* The film grain lives IN the ground (a light raster tile with its own transparency), not as a fixed layer over the
   whole page: a full-screen fixed overlay blocks hit-testing and screenshots and costs every frame on a phone.
   film-look's body::after layer is switched off here; the photos keep film-look's own grade. */
body::after { content: none !important; display: none !important; }
body, .method, .composer, .foot, .card-flip .scene-stage { background-image: url('../img/grain.png'); background-size: 220px 220px; }