/* Recon — Base styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-midnight-navy);
  background: var(--color-ghost-canvas);
  font-weight: var(--fw-regular);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; padding: 0; margin: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  letter-spacing: -0.010em;
  font-feature-settings: "ss04", "ss06", "ss09", "ss10", "ss11";
  color: var(--color-midnight-navy);
}

p { margin: 0; }

::selection { background: var(--color-chartreuse-pulse); color: var(--color-midnight-navy); }

/* Layout */
.container {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.container-wide { max-width: 1280px; }

.section { padding: var(--section-gap) 0; }
.section-tight { padding: 56px 0; }

/* Type utilities */
.h-display-xl { font-family: var(--font-display); font-size: var(--text-display-xl); line-height: var(--leading-display-xl); letter-spacing: var(--tracking-display-xl); font-feature-settings: "ss04","ss06","ss09","ss10","ss11"; }
.h-display { font-family: var(--font-display); font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-feature-settings: "ss04","ss06","ss09","ss10","ss11"; }
.h-lg { font-family: var(--font-display); font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg); letter-spacing: var(--tracking-heading-lg); font-feature-settings: "ss04","ss06","ss09","ss10","ss11"; }
.h-md { font-family: var(--font-ui); font-size: var(--text-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); font-weight: var(--fw-semibold); }
.h-sm { font-family: var(--font-ui); font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); letter-spacing: var(--tracking-heading-sm); font-weight: var(--fw-semibold); }
.t-sub { font-size: var(--text-subheading); line-height: var(--leading-subheading); letter-spacing: var(--tracking-subheading); }
.t-body { font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body); }
.t-cap { font-size: var(--text-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption); }
.t-mono { font-family: var(--font-mono); }

.muted { color: var(--color-slate-ink); }
.faint { color: var(--color-ash-medium); }
.center { text-align: center; }

@media (max-width: 768px) {
  .h-display-xl { font-size: 44px; line-height: 1.04; letter-spacing: -0.88px; }
  .h-display { font-size: 34px; line-height: 1.06; letter-spacing: -0.34px; }
  .h-lg { font-size: 30px; line-height: 1.1; letter-spacing: -0.3px; }
  .h-md { font-size: 24px; }
}