:root {
  --black: #0a0a0a;
  --white: #ededed;
  --paper: #f5f5f3;
  --box: #ffffff;
  --grey-1: #c8c8c8;
  --grey-2: #8a8a8a;
  --grey-3: #2a2a2a;
  --light-grey-1: #2a2a2a;
  --light-grey-2: #5a5a5a;
  --light-grey-3: #d4d4d0;
  --heart: #e5262d;

  --bg: var(--black);
  --fg: var(--white);
  --fg2: var(--grey-1);
  --fg3: var(--grey-2);
  --line: var(--grey-3);
  --box-bg: var(--box);
  --box-fg: var(--black);

  --font-display: 'Inter Tight', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-dys: 'OpenDyslexic', sans-serif;

  --h1-size: clamp(24px, 7.4vw, 88px);
  --h1-line: 1.35;
  --h1-track: -0.035em;
  --h1-dys-size: clamp(20px, 5vw, 64px);
  --h2-size: clamp(32px, 4.4vw, 56px);
  --h2-line: 1.1;
  --h2-track: -0.03em;
  --h3-size: 24px;
  --h3-track: -0.02em;
  --text-size: clamp(17px, 1.4vw, 19px);
  --text-line: 1.65;
  --nav-size: 16px;
  --cta-size: 18px;
  --dock-size: 18px;
  --meta-size: 14px;
  --meta-line: 1.7;
  --date-size: 15px;
  --note-size: 13px;
  --imprint-size: 16px;

  --ease: cubic-bezier(.45, 0, .2, 1);
  --ease-slide: cubic-bezier(.65, 0, .2, 1);
  --ease-fade: cubic-bezier(.33, 0, .2, 1);
  --ease-drift: cubic-bezier(.65, 0, .35, 1);
  --t: .65s;
  --t-fade: .45s;
  --t-roll: 1.2s;
  --t-intro: 1s;
  --t-show: .6s;
  --t-drift: 1s;
  --delay-cta: .5s;
  --delay-arrow: 1.1s;
  --delay-dock: 1.2s;
  --delay-up: .06s;

  --stroke: 0.108em;
  --pad: clamp(31px, 8vw, 125px);
  --column: 760px;
  --gap: 6px;
  --cube-pad: 5px;
  --icon: 24px;
  --cube: calc(var(--icon) + 2 * var(--cube-pad));
  --s: 72px;
  --s-block: 40px;
  --logo-text: 48px;
}

.light {
  --bg: var(--paper);
  --fg: var(--black);
  --fg2: var(--light-grey-1);
  --fg3: var(--light-grey-2);
  --line: var(--light-grey-3);
  --box-bg: var(--black);
  --box-fg: var(--paper);
}

@media (max-width: 600px) {
  :root {
    --gap: 5px;
    --icon: 20px;
    --s: 56px;
    --s-block: 28px;
    --logo-text: 40px;
    --nav-size: 15px;
    --cta-size: 16px;
    --dock-size: 16px;
  }
}