/* ============================================================
   DE SCÈNE — Spacing, radii, effects, texture
   Editorial rhythm: generous, structural, hairline borders.
   ============================================================ */
:root {
  /* — Spacing scale (4px base) — */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* — Radii — mostly square/editorial. Small softening only. — */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;   /* stamp / tag chips */

  /* — Borders — */
  --border-width: 1px;
  --border-accent-width: 2px;
  --rule-thick: 3px;      /* the red accent rule under headers */

  /* — Shadows — deep, soft, nocturnal (no colored glows) — */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.55);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.6);
  --shadow-inset: inset 0 1px 0 rgba(243,213,171,0.05);

  /* — Motion — restrained, filmic — */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */

  /* — Layout — */
  --measure: 66ch; /* @kind other */
  --container: 1200px; /* @kind spacing */
  --container-narrow: 760px; /* @kind spacing */
}

/* — Film grain overlay — the signature nocturnal texture.
   Apply .grain to any dark surface for the archive/analog feel. — */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  z-index: 1;
}