@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/manrope-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/lora-latin.woff2') format('woff2');
}

:root {
  color-scheme: light;

  --ls-color-ink: #111111;
  --ls-color-ink-soft: #616161;
  --ls-color-paper: #ffffff;
  --ls-color-brand: #d53c3c;
  --ls-color-brand-dark: #a82828;
  --ls-color-brand-soft: #eddecd;
  --ls-color-cool: #eaeffa;
  --ls-color-subtle: #f2f5f7;
  --ls-color-line: #d6d6d6;
  --ls-color-success: #2f7659;
  --ls-color-danger: #a82828;
  --ls-color-focus: #005fcc;

  --ls-font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --ls-font-body: 'Manrope', 'Helvetica Neue', Arial, sans-serif;

  --ls-text-caption: 0.6875rem;
  --ls-text-xs: 0.75rem;
  --ls-text-sm: 0.875rem;
  --ls-text-base: 1rem;
  --ls-text-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  --ls-text-card: clamp(1.25rem, 1.125rem + 0.35vw, 1.5rem);
  --ls-text-xl: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);
  --ls-text-2xl: clamp(2rem, 1.75rem + 1.25vw, 3rem);
  --ls-text-3xl: clamp(2.5rem, 1.95rem + 2.75vw, 4.25rem);

  --ls-leading-tight: 1.04;
  --ls-leading-heading: 1.1;
  --ls-leading-body: 1.7;
  --ls-leading-small: 1.5;

  --ls-tracking-display: -0.015em;
  --ls-tracking-heading: -0.01em;
  --ls-tracking-body: -0.012em;
  --ls-tracking-label: 0.14em;
  --ls-tracking-control: 0.07em;

  --ls-space-1: 0.25rem;
  --ls-space-2: 0.5rem;
  --ls-space-3: 0.75rem;
  --ls-space-4: 1rem;
  --ls-space-5: 1.5rem;
  --ls-space-6: 2rem;
  --ls-space-7: 3rem;
  --ls-space-8: 4rem;
  --ls-space-9: 6rem;

  --ls-container: 80rem;
  --ls-container-narrow: 45rem;
  --ls-gutter: 1.25rem;
  --ls-section-space: 3rem;
  --ls-section-space-compact: 2rem;

  --ls-radius-control: 0.5rem;
  --ls-radius-card: 1rem;
  --ls-radius-round: 999px;
  --ls-shadow-card: 0 1rem 3rem rgb(17 17 17 / 10%);
  --ls-shadow-dialog: 0 2rem 6rem rgb(17 17 17 / 25%);
  --ls-motion-fast: 160ms;
  --ls-motion-base: 240ms;
}

@media (min-width: 48rem) {
  :root {
    --ls-gutter: 2rem;
    --ls-section-space: 4rem;
    --ls-section-space-compact: 3rem;
  }
}

@media (min-width: 64rem) {
  :root {
    --ls-section-space: 6rem;
    --ls-section-space-compact: 4rem;
  }
}

@media (min-width: 80rem) {
  :root {
    --ls-gutter: 2.5rem;
  }
}


@import './tokens.css';

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

html {
  min-width: 20rem;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  color: var(--ls-color-ink);
  background: var(--ls-color-paper);
  font-family: var(--ls-font-body);
  font-size: var(--ls-text-base);
  line-height: var(--ls-leading-body);
  letter-spacing: var(--ls-tracking-body);
  text-rendering: optimizeLegibility;
}

body:has(dialog[open]) {
  overflow: hidden;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
summary,
select {
  cursor: pointer;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-start: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--ls-font-display);
  font-weight: 500;
  line-height: var(--ls-leading-heading);
  letter-spacing: var(--ls-tracking-heading);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 3px solid var(--ls-color-focus);
  outline-offset: 3px;
}

::selection {
  color: var(--ls-color-paper);
  background: var(--ls-color-brand-dark);
}

.ls-container {
  width: min(100% - (2 * var(--ls-gutter)), var(--ls-container));
  margin-inline: auto;
}

.ls-container--narrow {
  max-width: var(--ls-container-narrow);
}

.ls-section {
  padding-block: var(--ls-section-space);
}

.ls-section--compact {
  padding-block: var(--ls-section-space-compact);
}

.ls-eyebrow {
  margin-bottom: var(--ls-space-3);
  color: var(--ls-color-brand-dark);
  font-size: var(--ls-text-caption);
  font-weight: 600;
  letter-spacing: var(--ls-tracking-label);
  line-height: var(--ls-leading-small);
  text-transform: uppercase;
}

.ls-display {
  margin-bottom: var(--ls-space-5);
  font-family: var(--ls-font-display);
  font-size: var(--ls-text-3xl);
  font-weight: 500;
  line-height: var(--ls-leading-tight);
  letter-spacing: var(--ls-tracking-display);
  text-wrap: balance;
}

.ls-heading {
  margin-bottom: var(--ls-space-5);
  font-size: var(--ls-text-2xl);
}

h1 {
  font-weight: 500;
  letter-spacing: var(--ls-tracking-display);
}

.ls-muted {
  color: var(--ls-color-ink-soft);
}

.ls-grid {
  display: grid;
  gap: var(--ls-space-6);
}

.ls-grid--cards {
  grid-template-columns: 1fr;
}

.ls-skip-link {
  position: fixed;
  z-index: 1000;
  top: var(--ls-space-3);
  left: var(--ls-space-3);
  padding: var(--ls-space-3) var(--ls-space-4);
  color: var(--ls-color-paper);
  background: var(--ls-color-ink);
  transform: translateY(-200%);
}

.ls-skip-link:focus {
  transform: translateY(0);
}

.ls-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (min-width: 48rem) {
  .ls-grid--cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .ls-grid--cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 80rem) {
  .ls-grid--cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

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