:root {
  --font-body: 'General Sans', system-ui, -apple-system, sans-serif;
  --font-heading: 'Raleway', var(--font-body);
  --text-size: clamp(1.125rem, 1.2vw, 1.25rem);
  --line-height: 1.25;
}

body {
  font-size: var(--text-size);
  line-height: var(--line-height);
  color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.25;
  margin: 0 0 0.75rem;
  color: #f9fafb;
}

h1 { font-size: clamp(2rem, 3vw, 2.5rem); }

h2 { font-size: clamp(1.625rem, 2.4vw, 2rem); }

h3 { font-size: clamp(1.375rem, 2vw, 1.625rem); }
.card h3 { text-transform: capitalize; }
summary h3 { display: inline-block; }

h4 { font-size: clamp(1.25rem, 1.8vw, 1.375rem); }

p { margin: 0 0 0.875rem; color: var(--text); }

ul, ol { margin: 0 0 1rem 1.25rem; padding: 0; }

code {
  font-family: 'SFMono-Regular', Consolas, Monaco, monospace;
  background: rgba(38, 42, 51, 0.7);
  padding: 0.125rem 0.375rem;
  border-radius: 0.375rem;
  border: 0.0625rem solid var(--border);
}

pre {
  margin: 0 0 1.125rem;
  padding: 0.875rem;
  background: #0b0d11;
  border-radius: var(--radius);
  border: 0.0625rem solid var(--border);
  overflow-x: auto;
}

pre code { background: transparent; border: none; padding: 0; }

a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

blockquote {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 0.1875rem solid var(--accent-strong);
  background: rgba(56, 189, 248, 0.08);
  border-radius: 0.625rem;
  color: var(--text);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.muted { color: var(--muted); }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0 0 0.375rem;
}

.sr-only {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  margin: -0.0625rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}