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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--wp--preset--font-family--sans);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video { display: block; max-width: 100%; height: auto; }

figure { margin: 0; }

a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--color-accent); }

button,
input,
textarea,
select { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-accent) 70%, white); outline-offset: 3px; }

h1,
h2,
h3,
h4,
h5,
h6 { margin-top: 0; color: var(--color-ink); line-height: 1.35; text-wrap: balance; }

p { margin-top: 0; }

::selection { background: color-mix(in srgb, var(--color-accent) 24%, white); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}