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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1.5rem);
}

html,
body {
  margin: 0;
  padding: 0;
}

@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  main,
  main.page-main {
    overflow-x: hidden;
    max-width: 100%;
  }
}

body {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text-secondary);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

main {
  position: relative;
  isolation: isolate;
  padding-top: var(--header-height);
}

/* global ambient: very subtle warm glow at top of page + noise grain */
main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 35% at 50% 0%, rgba(255, 238, 210, 0.04), transparent 65%),
    radial-gradient(ellipse 40% 25% at 20% 5%, rgba(255, 245, 225, 0.02), transparent 50%),
    radial-gradient(ellipse 40% 25% at 80% 5%, rgba(255, 245, 225, 0.02), transparent 50%),
    var(--color-bg);
}

main::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.018;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%);
  background-size: 3px 3px;
}

h1, h2, h3, p { margin: 0; }
p { max-width: 68ch; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
  width: min(var(--container-max), calc(100% - 3rem));
  margin: 0 auto;
}

.text-primary { color: var(--color-text-primary); }
.text-muted { color: var(--color-text-muted); }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

@media (max-width: 768px) {
  .container { width: calc(100% - 2rem); }
}