*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
  /* clip ≠ hidden: hidden + overflow-y:visible computes to auto → nested scroll on mobile */
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
  overscroll-behavior-x: none;
}

body {
  margin: 0;
  min-height: 100%;
  max-width: 100%;
  width: 100%;
  position: relative;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 90% 55% at 100% -10%, var(--accent-soft), transparent 55%),
    radial-gradient(ellipse 70% 45% at -5% 95%, var(--warm-soft), transparent 50%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-elevated) 100%);
  background-attachment: scroll;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--body);
  line-height: 1.75;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

@media (min-width: 901px) {
  body {
    background-attachment: fixed;
  }
}

img,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--accent);
  color: #fff;
}

/* Critical layout — keep first paint aligned before/with main.css */
.container {
  width: min(100% - 2rem, var(--max-w));
  margin-inline: auto;
  max-width: 100%;
}

.container--wide {
  width: min(100% - 2rem, var(--max-w-wide));
  margin-inline: auto;
  max-width: 100%;
}

.page-pad,
.section.page-pad,
body.page-inner > main {
  padding-top: calc(var(--header-h) + var(--space-6));
  padding-bottom: var(--space-8);
}
