:root {
  font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
}

/* A slightly nicer baseline */
* { box-sizing: border-box; }

body {
  margin: 18px;
  background: #f3efe6; /* warm, easy-on-the-eyes sepia */
}

/* Common centered page container */
.wrap {
  max-width: 980px;
  display: grid;
  gap: 14px;
  margin: 0 auto;
  justify-items: center;
}

/* Default headings (pages can override locally) */
h1 {
  margin: 0 0 10px 0;
  font-size: 28px;
  text-align: center;
}

/* Back-to-home link (you still add the <a> in each page’s HTML) */
.homeLink {
  align-self: flex-start;
  text-decoration: none;
  font-size: 14px;
  opacity: 0.85;
  margin-bottom: 4px;
}
.homeLink:hover { text-decoration: underline; }

/* Reusable soft card styling for tiles/panels */
.card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  padding: 12px;
}

/* Helpful baseline for code-ish text blocks across tools */
pre, code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Mobile-friendly tweaks */
@media (max-width: 720px) {
  body { margin: 10px; }  /* closer to your newer compact layout */
  .wrap { gap: 10px; }
  h1 { font-size: 24px; }
}

/* Optional: reduce motion when user prefers it */
@media (prefers-reduced-motion: reduce) {
  /* put reduced-motion overrides here if you add animations later */
}