@font-face {
  font-family: Inter;
  src: url('/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hedvig Letters Serif';
  src: url('/hedvig.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Amarna;
  src: url('/amarna.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #fdfdfc;
  --heading: #5a5752;
  --ink: #2e2b26;
  --muted: #817b70;
  color: var(--ink);
  background: var(--paper);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  font-weight: 365;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

h1 {
  letter-spacing: 0.02em;
}

::selection {
  color: var(--ink);
  background: #e6e4df;
}

:focus-visible {
  outline: 2px solid var(--heading);
  outline-offset: 4px;
}

img {
  display: block;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(64, 64, 64, 0.4);
  text-decoration-thickness: 10%;
  text-underline-offset: 0.22em;
}

body.auth h1 {
  color: var(--heading);
  font-family: Amarna, sans-serif;
  font-size: 20px;
  font-weight: 565;
  line-height: 24px;
  text-transform: uppercase;
  text-wrap: balance;
}

body.auth h1 {
  margin: 0 0 16px;
}

body.auth .page-footer nav {
  color: var(--muted);
  font-family: Amarna, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 24px;
  text-transform: uppercase;
}

body.doc main {
  width: min(480px, calc(100% - 40px));
  margin: 0 auto;
  padding: 60px 0;
}

body.doc h1 {
  margin: 0;
}

body.doc .updated {
  margin: 8px 0 24px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  line-height: 16px;
}

body.doc p,
body.doc li {
  font-size: 14px;
  line-height: 24px;
}

body.auth p,
body.auth li {
  font-size: 16px;
  line-height: 24px;
}

body.doc p {
  margin: 0;
}

body.auth .legal-copy {
  font-size: 14px;
  line-height: 24px;
}

body.doc h1 + p:not(.updated),
body.doc p + p {
  margin-top: 16px;
}

body.auth h2 {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

body.doc h2 {
  margin: 40px 0 16px;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
}

body.doc footer {
  margin-top: 40px;
}

strong {
  font-weight: 600;
}

.tight-letter {
  letter-spacing: -0.25ch;
}

/* Landing and policy pages: dark theme. Auth pages keep the light theme above. */
:root:has(> body.home, > body.doc) {
  color-scheme: dark;
  background: #292422;
}

body.home,
body.doc {
  --paper: #292422;
  --ink: #f1efe9;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}

body.home ::selection,
body.doc ::selection {
  color: #f1efe9;
  background: rgba(241, 239, 233, 0.25);
}

body.home :focus-visible,
body.doc :focus-visible {
  outline-color: #f1efe9;
}

body.doc a {
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

body.home footer a,
body.doc footer a {
  text-decoration-color: rgba(255, 255, 255, 0.35);
}

body.doc h1,
body.doc h2 {
  font-family:
    'SF Pro Display',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    sans-serif;
  font-weight: 500;
}

body.doc h1 {
  font-size: 32px;
  line-height: 36px;
  text-wrap: balance;
}

body.home footer,
body.doc footer {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

body.doc footer {
  color: rgba(255, 255, 255, 0.5);
}

body.home footer {
  color: rgba(241, 239, 233, 0.8);
}

body.home {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The two blurred ellipses from the Figma frame, centred behind the copy. */
body.home::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('/glow.svg') center / 1200px 800px no-repeat;
  pointer-events: none;
}

body.home main {
  position: relative;
  z-index: 1;
  width: min(352px, calc(100% - 40px));
  padding: 60px 0;
}

body.home header,
body.doc header {
  margin-bottom: 32px;
}

body.home h1 {
  margin: 0 0 16px;
  color: rgba(241, 239, 233, 0.9);
  font-family: 'Hedvig Letters Serif', Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 36px;
  text-wrap: balance;
}

body.home p {
  margin: 0 0 32px;
  color: rgba(241, 239, 233, 0.8);
  font-size: 16px;
  line-height: 24px;
  text-wrap: balance;
}