:root {
  --bg: #050505;
  --bg-soft: rgba(0, 0, 0, 0.18);
  --text: #f5f7fb;
  --muted: rgba(255, 255, 255, 0.72);
  --line: rgba(255, 255, 255, 0.12);
  --blue: #ffffff;
  --layout-wide-max: 1440px;
  --layout-shell-max: 1560px;
  --header-h: 76px;
  --header-h-scrolled: 76px;
  --section-x-base: clamp(24px, 5vw, 80px);
  --section-x: var(--section-x-base);
  --section-y: clamp(72px, 7vw, 112px);
  --section-y-compact: clamp(54px, 5.4vw, 84px);
  --card-radius: 8px;
  --card-title-weight: 300;
  --card-text-weight: 300;
  --card-action-weight: 600;
  --card-meta-weight: 300;
  --menu-text-size: 14px;
  --nav-text-size: 15px;
  --menu-text-line-height: 1;
  --menu-text-weight: 500;
  --menu-text-tracking: 0;
  --menu-text-color: rgba(255, 255, 255, 0.86);
  --footer-heading-color: #ffffff;
  --footer-section-color: rgba(255, 255, 255, 0.58);
  --footer-separator-color: rgba(255, 255, 255, 0.16);
  --footer-screen-height: calc(100vh - var(--header-h));
  --footer-screen-height-dynamic: calc(100svh - var(--header-h));
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 1600px) {
  :root {
    --section-x: max(80px, calc((100vw - var(--layout-wide-max)) / 2));
  }
}