/* ---------- Typography: clean system UI sans ---------- */
:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* ---------- Base layout (desktop keeps roomy margins) ---------- */
body {
  background-color: #CFB9E4;
  font-family: var(--font-sans);
  padding: 75px 750px 75px 450px;  
  font-size: 18px;
  color: #575757;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* helps long words/URLs not overflow on mobile */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Optional: limit line length for comfort across devices */
.container {
  max-width: 70ch;     /* ~70 characters per line = comfy reading */
  margin: 0 auto;      /* center the content */
}

/* ---------- Links ---------- */
a {
  color: #613D5C;
  text-decoration: none;
  /* bigger tap target on touch devices without changing layout */
  padding-inline: 2px;
}
a:hover,
a:focus {
  text-decoration: underline;
}

/* ---------- Headings & lists spacing ---------- */
h1, h2, h3 { line-height: 1.25; }
h2 { margin-top: 2rem; }
h3 { margin-top: 1.5rem; }
ul { margin: 0.5rem 0 1rem 1.25rem; }

/* Big laptops / small desktops (1600px)
   Reduce right/left a lot so it stops feeling like a column */
@media (max-width: 1600px) {
  body { padding: 64px 280px 64px 200px; }
}

/* Common laptop widths 1366–1440px 
   Go even wider */
@media (max-width: 1440px) {
  body { padding: 56px 200px 56px 140px; }
}

/* Smaller laptops 
   Comfortable, broad reading width */
@media (max-width: 1280px) {
  body { padding: 48px 140px 48px 100px; }
}

/* Tablets (1024px) */
@media (max-width: 1024px) {
  body { padding: 40px 80px 40px 64px; }
}

/* Phones (800px) — unchanged comfort */
@media (max-width: 800px) {
  body {
    padding: 24px 20px;
    font-size: 17px;
    line-height: 1.7;
  }
  h2 { font-size: 1.35rem; margin-top: 1.25rem; }
  h3 { font-size: 1.15rem; margin-top: 1rem; }
  ul { margin-left: 1rem; }
}

/* Very small phones (360px) */
@media (max-width: 360px) {
  body { font-size: 16px; }
}