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

html,
body {
  background: #F5F0E8; /* explicit — Safari samples this for the status-bar forehead */
  margin: 0;
  padding: 0;
  width: 100%;
  color-scheme: light; /* prevents iOS dark-mode from overriding the safe-area colour */
}
html {
  /* overflow-x here, not on body — body overflow:hidden can block Safari's
     viewport compositor and prevent real pixels from showing behind status bar */
  overflow-x: hidden;
}
html { scroll-behavior: smooth; }
body { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html,
  body { scroll-behavior: auto; }
}

/* ─── Lenis smooth scroll ─── */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

body {
  background: var(--color-cream);
  font-family: var(--font-body);
  color: var(--color-ink);
  font-size: 17px;
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
  margin-bottom: -1px;
}

/* Paper grain texture overlay
body::after {
  content: '';
  position: fixed;
  inset: -2px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
} */

:focus-visible {
  outline: 2px solid var(--flavor-color);
  outline-offset: 3px;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.1;
}