/* Base */
:root {
  --text: #111827;           /* slate-900 */
  --muted: #6b7280;          /* slate-500 */
  --link: #2563eb;           /* blue-600 */
  --rule: #e5e7eb;           /* gray-200 */
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: #ffffff;
  line-height: 1.6;
  font-size: clamp(0.95rem, 0.3vw + 0.9rem, 1.0625rem); /* scale body text */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Layout */
.container {
  max-width: 640px;           /* narrow column like the screenshot */
  padding: 40px 24px 80px;    /* revert desktop/tablet side padding */
  margin: 0 auto;             /* center column */
}

/* Typography */
h1 {
  font-size: clamp(2rem, 6vw, 3.5rem); /* scales 32px → 56px */
  line-height: 1.1;
  font-weight: 800;
  text-align: center;
  margin: 28px 0 42px;       /* add more space below heading */
}

@media (max-width: 480px) {
  .container {
    padding: 28px 24px 64px;  /* more side padding on small screens */
  }
}

p { margin: 0 0 18px; }

.intro { color: var(--text); }

a {
  color: var(--link);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 22px 0 18px;
}

/* Contact section */
.contact h2 {
  font-size: clamp(1rem, 0.25vw + 0.95rem, 1.125rem);
  font-weight: 700;
  margin: 16px 0 8px;
}

/* Footer */
footer {
  margin-top: 36px;
  text-align: center;
  font-size: clamp(0.75rem, 0.2vw + 0.7rem, 0.8125rem);
  color: var(--muted);
}