:root {
  color-scheme: light;

  --ss-cream: #F4EFE4;
  --ss-paper: #FAF7EF;
  --ss-ink: #121217;
  --ss-ink-soft: #2A2A32;
  --ss-gold: #C9A24B;
  --ss-gold-deep: #8A6A1F;
  --ss-night: #161B38;
  --ss-stone: #6E6A5E;
  --ss-mist: #C9C2B3;
  --ss-ember: #C34424;
  --ss-moss: #4A7A5C;

  --ss-font-display: "Fraunces", "Iowan Old Style", "Book Antiqua", "Palatino Linotype", Georgia, serif;
  --ss-font-body: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ss-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --ss-fs-eyebrow: 0.6875rem;
  --ss-fs-body: 1.0625rem;
  --ss-fs-body-l: clamp(1.125rem, 1rem + 0.5vw, 1.35rem);
  --ss-fs-h4: clamp(1.35rem, 1.15rem + 0.7vw, 1.65rem);
  --ss-fs-h3: clamp(1.7rem, 1.3rem + 1vw, 2.2rem);
  --ss-fs-h2: clamp(2.35rem, 1.75rem + 2vw, 3.45rem);
  --ss-fs-h1: clamp(3.2rem, 2.1rem + 4.2vw, 5.6rem);
  --ss-fs-display: clamp(4.25rem, 2.8rem + 6.5vw, 7.5rem);
  --ss-fs-giant: clamp(5rem, 3rem + 10vw, 11.25rem);

  --ss-leading-body: 1.55;
  --ss-leading-display: 1.02;
  --ss-tracking-eyebrow: 0.12em;
  --ss-tracking-display: -0.02em;

  --ss-space-1: 0.5rem;
  --ss-space-2: 1rem;
  --ss-space-3: 1.5rem;
  --ss-space-4: 2rem;
  --ss-space-5: 3rem;
  --ss-space-6: 4rem;
  --ss-space-7: 6rem;
  --ss-space-8: 8rem;

  --ss-container: 80rem;
  --ss-reading: 42.5rem;
  --ss-header-height: 5rem;
  --ss-border: 1px solid rgba(18, 18, 23, 0.12);
  --ss-border-strong: 1px solid rgba(18, 18, 23, 0.2);
  --ss-border-night: 1px solid rgba(250, 247, 239, 0.16);
  --ss-shadow-soft: 0 26px 70px rgba(18, 18, 23, 0.08);
  --ss-shadow-image: 0 22px 48px rgba(18, 18, 23, 0.16);

  --ss-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ss-duration-fast: 240ms;
  --ss-duration-base: 420ms;
  --ss-duration-slow: 800ms;
}

@font-face {
  font-family: "Fraunces";
  src:
    local("Fraunces"),
    url("../assets/fonts/fraunces/fraunces-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src:
    local("Fraunces SemiBold"),
    url("../assets/fonts/fraunces/fraunces-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src:
    local("Fraunces Bold"),
    url("../assets/fonts/fraunces/fraunces-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src:
    local("IBM Plex Sans"),
    url("../assets/fonts/plex/ibm-plex-sans-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src:
    local("IBM Plex Sans Medium"),
    url("../assets/fonts/plex/ibm-plex-sans-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src:
    local("IBM Plex Mono"),
    url("../assets/fonts/plex/ibm-plex-mono-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src:
    local("IBM Plex Mono Medium"),
    url("../assets/fonts/plex/ibm-plex-mono-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

html {
  background: var(--ss-cream);
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ss-header-height) + var(--ss-space-2));
}

body {
  min-width: 20rem;
  margin: 0;
  background: var(--ss-cream);
  color: var(--ss-ink);
  font-family: var(--ss-font-body);
  font-size: var(--ss-fs-body);
  line-height: var(--ss-leading-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(201, 162, 75, 0.28);
  color: var(--ss-ink);
}