@font-face {
  font-family: 'Oldschool Grotesk';
  src: url('assets/fonts/oldschool-grotesk-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oldschool Grotesk';
  src: url('assets/fonts/oldschool-grotesk-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oldschool Grotesk';
  src: url('assets/fonts/oldschool-grotesk-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oldschool Grotesk';
  src: url('assets/fonts/oldschool-grotesk-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('assets/fonts/dm-sans-variable.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
:root {
  --shape-lime: #b8d98a;
  --shape-on-accent: #010202;
  --shape-ink: #010202;
  --shape-paper: #ffffff;
  --shape-night: #0e0f11;
  --shape-gray: #f5f5f5;
  --shape-line: #e2e2e2;
  --shape-muted: #676767;
  --shape-lilac: #ded9ed;
  --shape-font: 'Oldschool Grotesk', 'DM Sans', 'Arial', sans-serif;
  --shape-ease: cubic-bezier(.135, .9, .15, 1);
  --shape-fast: 300ms;
  --shape-shelf: 400ms;
  --shape-menu: 1000ms;
  --shape-track: -.025em;
  --shape-motion: 900ms;
  --shape-radius: 24px;
  --shape-pill: 999px;
  --shape-gutter: max(clamp(22px, 5vw, 72px), calc((100vw - 1800px) / 2 + clamp(22px, 5vw, 72px)));
  --shape-display: clamp(48px, 4.5vw, 80px);
  --shape-heading: clamp(36px, 4vw, 72px);
  --shape-body: clamp(16px, 1.25vw, 20px);
  --surface: var(--shape-paper);
  --text: var(--shape-ink);
  --panel: var(--shape-gray);
  --line: var(--shape-line);
  --muted: var(--shape-muted);
}
[data-theme='dark'] {
  --surface: var(--shape-night);
  --text: #ffffff;
  --panel: #242527;
  --line: #393a3c;
  --muted: #b6b6b6;
}

/* Titles: Oldschool Grotesk sets wide, so headings track tighter than body copy. */
:root{--shape-title-track:-.035em}
h1,h2,h3,.rs-giant,.rs-title{letter-spacing:var(--shape-title-track)!important;word-spacing:.06em}

/* Oldschool Grotesk sits high in its line box: nudge button labels down to optical centre. */
html a.shape-button>span,html button.shape-button>span,html a.shape-button.small>span,html button.shape-button.small>span{padding-top:10px;padding-bottom:6px}
html a.arrow-link{padding-top:3px}

/* Manila orb: 12-hour time, temperature and time share one size, two colours. */
html .orb-info{font-size:13px;gap:3px}
html .orb-info time{font-size:inherit;color:var(--shape-on-accent)}
html #orb-temperature{color:#2d5a1f}
@media(max-width:760px){html .orb-info{font-size:11px;gap:2px}}