:root {
  --color-base: #050507;
  --color-base-deep: #000000;
  --color-surface: #0a0a0c;
  --color-border: #1a1d24;
  --color-grid: #1f242d;
  --color-text: #ffffff;
  --color-text-secondary: #8f96a3;
  --color-muted: #5d6470;
  --color-focus: #f4f1ea;

  --font-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  --header-height: 60px;
  --touch-min: 44px;
  --radius: 0;

  --pad-x: clamp(1rem, 4.2vw, 2rem);
  --container: min(36rem, calc(100% - 2 * var(--pad-x)));
  --rhythm: clamp(1.5rem, 4vw, 2.25rem);
  --section-y: clamp(5.5rem, 10vw, 9rem);

  --text-body: 1rem;
  --leading-body: 1.55;
  --brand: clamp(2.7rem, 13.5vw, 3.1rem);
  --h1: clamp(2.6rem, 12.8vw, 3.45rem);
  --h2: clamp(1.95rem, 8.6vw, 2.55rem);
  --h3: 1.125rem;

  --z-page: 1;
  --z-nav: 50;
  --z-header: 60;
  --z-toggle: 70;
  --z-grain: 80;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 430px) {
  :root {
    --pad-x: 1rem;
    --section-y: clamp(3.75rem, 12vw, 5.5rem);
    --brand: clamp(2.2rem, 11.2vw, 2.7rem);
    --h1: clamp(2.15rem, 10.6vw, 2.65rem);
    --h2: clamp(1.65rem, 7.6vw, 2.05rem);
    --h3: 1.0625rem;
  }
}

/* 577px – 992px */
@media (min-width: 577px) {
  :root {
    --header-height: 68px;
    --pad-x: clamp(1.25rem, 3.4vw, 2.75rem);
    --container: min(60rem, calc(100% - 2 * var(--pad-x)));
    --rhythm: clamp(1.75rem, 3.2vw, 2.5rem);
    --brand: clamp(2.45rem, 6vw, 3.35rem);
    --h1: clamp(3.2rem, 8.6vw, 4.55rem);
    --h2: clamp(2.15rem, 5.2vw, 3.35rem);
    --h3: clamp(1.15rem, 2vw, 1.4rem);
  }
}

/* 993px – 1440px */
@media (min-width: 993px) {
  :root {
    --header-height: 72px;
    --pad-x: clamp(2rem, 3.2vw, 3.5rem);
    --container: min(90rem, calc(100% - 2 * var(--pad-x)));
    --rhythm: clamp(2rem, 3vw, 2.75rem);
    --brand: clamp(2.7rem, 4.5vw, 4rem);
    --h1: clamp(3.8rem, 6.4vw, 6rem);
    --h2: clamp(2.45rem, 4.2vw, 4.45rem);
    --h3: clamp(1.2rem, 1.6vw, 1.5rem);
  }
}

/* >1440: cap and center */
@media (min-width: 1441px) {
  :root {
    --pad-x: 3.5rem;
    --container: 90rem;
    --brand: 4rem;
    --h1: 6rem;
    --h2: 4.45rem;
  }
}