/* Ginga brand tokens. Every colour on the site derives from these four. */
:root {
  --black: #000000;
  --purple: #7E3BED;
  --lime: #C6FF34;
  --paper: #F0F0F0;

  --ink-muted: rgba(0, 0, 0, .72);
  --ink-line: rgba(0, 0, 0, .1);
  --paper-muted: rgba(240, 240, 240, .76);
  --paper-line: rgba(240, 240, 240, .14);

  --font: "Plus Jakarta Sans", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --type-h1: clamp(46px, 6.2vw, 96px);
  --type-h2: clamp(38px, 4.8vw, 72px);
  --type-scene: clamp(32px, 3.6vw, 52px);
  --type-h3: clamp(22px, 2vw, 28px);
  --type-lede: clamp(18px, 1.5vw, 22px);
  --type-body: 17px;
  --track-display: -.03em;

  --space-section: clamp(72px, 9vw, 128px);
  --nav-clear: 88px;

  --gutter: clamp(20px, 4.4vw, 72px);
  --edge: clamp(6px, .9vw, 14px);
  --radius-xl: clamp(32px, 4.4vw, 64px);
  --radius-lg: 28px;
  --max: 1320px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow-card: 0 2px 4px rgba(0, 0, 0, .05), 0 18px 40px -22px rgba(0, 0, 0, .28);
  --shadow-object: 0 3px 6px rgba(0, 0, 0, .28), 0 32px 60px -18px rgba(0, 0, 0, .62);
}

*, *::before, *::after { box-sizing: border-box; }

/* Scroll padding keeps keyboard focus clear of the fixed nav and bottom bar */
html { scroll-behavior: smooth; scroll-padding: var(--nav-clear) 0 96px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--black);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}