@import url("https://fonts.bunny.net/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  --font-display: "Fraunces", georgia, serif;
  --font-body: "Manrope", arial, sans-serif;
  --font-mono: "DM Mono", monospace;
  --container: 76rem;
  --gutter: clamp(1rem, 3vw, 2rem);
  --radius-sm: 0.75rem;
  --radius-md: 1.25rem;
  --radius-lg: 1.75rem;
  --shadow-card: 0 18px 45px rgb(31 40 24 / 0.08);
}

* { box-sizing: border-box;
  }

html { scroll-behavior: smooth;
  }

body { margin: 0;
  min-width: 20rem;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
  }

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

a { color: inherit;
  text-decoration: none;
  }

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

button { cursor: pointer;
  }

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

.section { padding-block: clamp(3.5rem, 7vw, 7rem);
  }

.section--tight { padding-block: clamp(2rem, 4vw, 4rem);
  }

.section-heading { max-width: 46rem;
  margin-bottom: 2rem;
  }

.eyebrow { margin: 0 0 0.65rem;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  }

h1, h2, h3, h4 { margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  line-height: 1.05;
  }

h1 { font-size: clamp(2.8rem, 6vw, 5.6rem);
  letter-spacing: -0.055em;
  }

h2 { font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -0.04em;
  }

h3 { font-size: clamp(1.35rem, 2vw, 1.8rem);
  }

p { margin: 0 0 1rem;
  }

.lede { max-width: 42rem;
  color: var(--color-muted);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  }

.bento-grid { display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.85rem, 2vw, 1.35rem);
  }

.bento-grid > * { grid-column: span 4;
  }

.span-5 { grid-column: span 5;
  }

.span-6 { grid-column: span 6;
  }

.span-7 { grid-column: span 7;
  }

.span-8 { grid-column: span 8;
  }

.card { padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  }

.card--quiet { box-shadow: none;
  }

.card--accent { background: var(--color-ink);
  color: var(--color-ink-text);
  }

.card--accent h1, .card--accent h2, .card--accent h3 { color: var(--color-ink-text);
  }

.card--accent p { color: var(--color-ink-muted);
  }

.stack { display: grid;
  gap: 1rem;
  }

.cluster { display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  }

.button { display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0.7rem 1.05rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 800;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
  }

.button:hover { transform: translateY(-2px);
  }

.button--primary { background: var(--color-accent);
  color: var(--color-accent-text);
  }

.button--secondary { border-color: var(--color-border);
  background: transparent;
  color: var(--color-text);
  }

.button--secondary:hover { background: var(--color-surface-raised);
  }

.site-header { position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(16px);
  }

.header-row { display: flex;
  min-height: 4.75rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  }

.brand { display: grid;
  gap: 0.05rem;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  }

.brand small { color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.57rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  }

.primary-nav { display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  }

.primary-nav a, .footer-nav a { color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 700;
  }

.primary-nav a:hover, .footer-nav a:hover { color: var(--color-accent);
  }

.header-actions { display: flex;
  align-items: center;
  gap: 0.55rem;
  }

.language-switcher { display: inline-flex;
  padding: 0.2rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  }

.language-switcher button, .theme-toggle { border: 0;
  background: transparent;
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 800;
  }

.language-switcher button { padding: 0.45rem 0.65rem;
  border-radius: 999px;
  }

.language-switcher button[aria-pressed="true"] { background: var(--color-ink);
  color: var(--color-ink-text);
  }

.theme-toggle { min-width: 3.9rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  }

.theme-toggle:hover { border-color: var(--color-accent);
  color: var(--color-accent);
  }

.site-footer { border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  }

.footer-grid { display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 2rem;
  padding-block: 3.5rem 2rem;
  }

.footer-title { margin-bottom: 0.85rem;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  }

.footer-nav { display: grid;
  gap: 0.55rem;
  }

.footer-bottom { display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.76rem;
  }

.form-grid { display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  }

.form-field { display: grid;
  gap: 0.45rem;
  color: var(--color-text);
  font-size: 0.82rem;
  font-weight: 700;
  }

.form-field--full { grid-column: 1 / -1;
  }

.form-field input, .form-field textarea, .form-field select { width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--color-bg);
  color: var(--color-text);
  }

.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-focus);
  }

@media (max-width: 52rem) {
  .primary-nav { display: none;
  }

  .header-row { min-height: 4.25rem;
  }

  .bento-grid > *, .span-5, .span-6, .span-7, .span-8 { grid-column: 1 / -1;
  }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid > :first-child { grid-column: 1 / -1;
  }
}

@media (max-width: 32rem) {
  .brand small { display: none;
  }

  .language-switcher button { padding-inline: 0.45rem;
  }

  .form-grid, .footer-grid { grid-template-columns: 1fr;
  }

  .footer-grid > :first-child { grid-column: auto;
  }

  .footer-bottom { display: grid;
  }
}