/* Base reset and typography */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
  color: #1f2937; /* slate-800 */
  background: #f8fafc; /* slate-50 */
}

a {
  /* text-decoration: none; */
  color: black;
}

/* Page wrapper centers content like a doc on a desk */
.page-wrap {
  min-height: 100vh;
  display: grid;
  place-items: start center; /* vertical + horizontal center, top align inside doc */
  padding: 24px;
}

/* Document container: centered, left-aligned text */
.doc {
  width: 100%;
  max-width: 800px; /* readable measure on desktop */
  background: #ffffff;
  color: inherit;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.doc h1, .doc h2, .doc h3 {
  margin: 0 0 12px;
  line-height: 1.25;
}

.doc h1 { font-size: clamp(28px, 5vw, 36px); letter-spacing: -0.01em; }
.doc p { margin: 0 0 16px; font-size: clamp(14px, 2.5vw, 16px); }

/* Improve readability for long-form content */
.doc {
  text-align: left; /* left-aligned like a word doc */
}

/* Mobile tweaks */
@media (max-width: 480px) {
  .page-wrap { padding: 16px; }
  .doc { padding: 16px; border-radius: 10px; }
}