:root {
  /* Colour */
  --ink: #0B0B0F;          /* all black */
  --paper: #E9E9E7;        /* stage background — exact match to character video studio backdrop */
  --paper-floor: #E4E4E1;  /* subtle floor gradient at bottom */
  --cream: #E7E2D8;        /* sheet background */
  --white: #FFFFFF;
  --blue: #1F4BFF;         /* primary accent (LOCKED: Electric Cobalt Blue) */
  --blue-deep: #0A2499;    /* shadows, pressed states, duotone darks */
  --blue-soft: #C9D4FF;    /* tints, selection */
  --cyan-split: rgba(0, 210, 255, 0.55);   /* RGB-split fringe, headings only */
  --muted: #6B6B70;        /* secondary mono text */
  --line: rgba(11, 11, 15, 0.14);

  /* Type families */
  --f-display: "Instrument Serif", "Times New Roman", serif;     /* sheet titles */
  --f-impact: "Anton", "Arial Narrow", sans-serif;               /* numbers, ransom */
  --f-sans: "Archivo", "Arial", sans-serif;                      /* labels, body */
  --f-mono: "JetBrains Mono", ui-monospace, "Consolas", monospace; /* HUD */

  /* Type scale */
  --t-hud: 11px;        /* mono, uppercase, HUD */
  --t-small: 13px;
  --t-body: 16px;
  --t-lead: 19px;
  --t-label: 22px;      /* Archivo 800 labels on bars */
  --t-h3: 28px;
  --t-h2: clamp(36px, 4.4vw, 56px);
  --t-title: clamp(64px, 12vw, 200px);   /* sheet title */

  /* Spacing (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Desktop Stage geometry (1:1:1 split) */
  --hud-pad: 28px;
  --avatar-x: 50vw;
  --avatar-h: 66svh;
  --avatar-top: 17svh;
  --track-angle: 44deg;
  --card-h: clamp(150px, 22svh, 260px);   /* FILLER card height. Service = 1.25x, Focal = 1.42x */

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.2, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 160ms;
  --d-base: 260ms;
  --d-slow: 480ms;

  /* Layers — Carousel (.track) sits on top layer above .avatar video box */
  --z-bg: 0;
  --z-avatar: 10;
  --z-track: 20;
  --z-hud: 30;
  --z-sheet: 100;
  --z-flip: 110;
  --z-lightbox: 120;
  --z-preloader: 200;
}

@media (max-width: 1023px), (orientation: portrait) {
  :root {
    --hud-pad: 20px;
    --avatar-x: 50vw;
    --avatar-h: 54svh;
    --avatar-top: 25svh;
    --track-angle: 44deg;
    --card-h: clamp(120px, 18svh, 210px);
  }
}

@media (max-width: 767px) {
  :root {
    --hud-pad: 14px;
    --avatar-x: 50vw;
    --avatar-h: 50svh;
    --avatar-top: 24svh;
    --track-angle: 44deg;
    --card-h: clamp(105px, 15.5svh, 165px);
  }
}