/* DMC MEDIA — core tokens (LA CELDA). Shared by every page that adopts the new system. */
@font-face { font-family: 'Inter Tight'; src: url('../fonts/inter-tight-latin.woff2') format('woff2'); font-style: normal; font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('../fonts/instrument-serif-italic-latin.woff2') format('woff2'); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/space-grotesk-700-latin.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }

:root {
  /* Surfaces */
  --paper: #08090b;
  --paper-raise: #0d0f13;
  --ink: #f4f5f7;
  --muted: #a1a4b0;
  --rule: rgba(244, 245, 247, .16);
  --grid-line: rgba(244, 245, 247, .055);

  --light: #e9ebee;
  --light-ink: #111318;
  --light-muted: #545a64;
  --light-rule: rgba(17, 19, 24, .16);
  --light-grid-line: rgba(17, 19, 24, .06);

  /* Light of the cell — sampled from the DMC MEDIA symbol (assets/img/dmc-logo-full.jpg) */
  --cell-cyan: #67b9fb;
  --cell-cyan-pale: #8fd3fb;
  --cell-violet: #d4a0f9;
  --cell-lavender: #c9a8fb;
  --cell-lit: linear-gradient(45deg, var(--cell-cyan-pale) 0%, var(--cell-cyan) 50%, var(--cell-lavender) 50%, var(--cell-violet) 100%);
  --cell-glow: 0 0 1.6em rgba(103, 185, 251, .28);
  --focus: var(--cell-cyan);

  /* Type */
  --sans: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --brand: 'Space Grotesk', var(--sans);
  --t-label: .68rem;
  --t-small: .875rem;
  --t-body: clamp(1rem, .96rem + .2vw, 1.125rem);
  --t-lead: clamp(1.2rem, 1rem + .9vw, 1.9rem);
  --t-h3: clamp(1.6rem, 1.2rem + 1.6vw, 2.9rem);
  --t-h2: clamp(2.6rem, 1.4rem + 4.6vw, 7.4rem);
  --t-display: clamp(3.6rem, 1.6rem + 8.4vw, 12.5rem);

  /* Grid: 4 / 8 / 12 columns inside a gutter frame */
  --gutter: clamp(1.15rem, 3.65vw, 5rem);
  --cols: 4;
  --frame-max: 1760px;
  --header-h: 64px;
  --section-pad: clamp(5rem, 12vh, 10rem);

  /* One module = one column of the frame. Fallback in vw, precise value with container units. */
  --m: calc((100vw - 2 * var(--gutter)) / var(--cols));

  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: .2s;
}

@media (min-width: 700px) { :root { --cols: 8; } }
@media (min-width: 1100px) { :root { --cols: 12; } }