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

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 92% 0%, rgba(200, 80, 63, 0.11), transparent 45%),
    radial-gradient(circle at 6% 96%, rgba(79, 157, 143, 0.07), transparent 45%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--font-title); font-weight: 600; line-height: 1.2; }
.muted { color: var(--muted); }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--oxblood); color: var(--ink); padding: 0.6rem 1rem; border-radius: var(--radius-btn);
}
.skip:focus { top: 1rem; }

main {
  max-width: 1000px; margin: 0 auto;
  padding: 0.5rem max(1.25rem, env(safe-area-inset-right)) max(4rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
}