/* ==========================================================
   BASE STYLES
   ========================================================== */

html { font-size: 14px; }

body {
   font-size: 0.875rem; 
   line-height: 1.50;
   font-weight: 400;
   font-family: var(--font-body);
   background: var(--bg);
   color: var(--text);
}

section { margin-bottom: 6rem; }
.section-title { margin: 0 0 1rem; padding: 1rem 0; }

h1 { font-size: 1.500rem; font-weight: 600; color: var(--accent); }
h2 { font-size: 1.250rem; font-weight: 600; color: var(--accent); }
h3 { font-size: 1.125rem; font-weight: 500; color: var(--accent); }
h4 { font-size: 1.000rem; font-weight: 500; color: var(--accent); }

small { font-size: 0.750rem; }

p { margin: 0.8750rem 0 0.4375rem; }

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

hr { border: none; border-top: 1px solid var(--divider); margin: 6rem 0; }

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

.mono { font-family: var(--font-mono); color: var(--muted); }

.center { text-align: center; }

footer { padding: 1.5rem; color: var(--muted); font-family: var(--font-mono); }