/* =========================================================
   Base Typography & Layout
   ========================================================= */

:root {
  /* 16px body text base */
  --font-body: 1rem;
  /* Golden ratio (1.618) scale for headings */
  --scale-1: clamp(1.2rem, 1.2rem + 0.5vw, 1.625rem);  /* h6 / small heading */
  --scale-2: clamp(1.4rem, 1.4rem + 0.8vw, 2.625rem);  /* h5-h4 */
  --scale-3: clamp(1.8rem, 1.8rem + 1.5vw, 4.25rem);   /* h3 */
  --scale-4: clamp(2.2rem, 2.2rem + 2vw, 6.9rem);      /* h2 */
}

html {
  box-sizing: border-box;
  font-size: 100%; /* baseline 16px for rem */
}

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

body {
  margin: 0;
  font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--font-body);
  line-height: 1.75;
  color: #222;
  text-rendering: optimizeLegibility;
}

/* =========================================================
   Headings
   ========================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: "Merriweather", "Georgia", "Times New Roman", Times, serif;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 1.6rem;
  margin-bottom: 0.8rem;
}

h1 { font-size: var(--scale-4); }
h2 { font-size: var(--scale-3); }
h3 { font-size: var(--scale-2); }
h4 { font-size: var(--scale-1); }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.1rem; }

/* =========================================================
   Text Elements
   ========================================================= */

p {
  margin: 0 0 1rem;
}

small {
  font-size: 0.875rem;
  color: #555;
}

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

li + li {
  margin-top: 0.25rem;
}

code, pre {
  font-family: "Fira Code", "Courier New", monospace;
  background: #f5f5f5;
  border-radius: 4px;
}

code {
  padding: 0.1em 0.3em;
  font-size: 0.95em;
}

pre {
  padding: 1rem;
  overflow-x: auto;
  margin: 0 0 1.5rem;
}

/* =========================================================
   Form Elements
   ========================================================= */

input, button, textarea, select {
  font: inherit;
  color: inherit;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  background-color: #fff;
  transition: border-color 0.2s ease;
}

input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: none;
  border-color: #0077ff;
}

button {
  cursor: pointer;
  background-color: #0077ff;
  color: #fff;
  border: none;
}

button:hover {
  background-color: #005fcc;
}

/* =========================================================
   Responsive Tweaks
   ========================================================= */

@media (max-width: 600px) {
  body { line-height: 1.55; }
  h1 { font-size: clamp(1.8rem, 5vw, 3rem); }
  h2 { font-size: clamp(1.6rem, 4.5vw, 2.5rem); }
  h3 { font-size: clamp(1.4rem, 4vw, 2rem); }
}

@media (min-width: 1200px) {
  body { font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem); }
}