/* Reset, layout helpers and global rules. Values come from tokens, never raw. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px; /* sticky top bar is 60px */
}

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

body {
  min-height: 100vh;
}

/* A class that sets display (flex, grid) must not beat the hidden attribute. */
[hidden] {
  display: none !important;
}

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

.wrap {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.load-error {
  margin: var(--sp-32) 0;
  padding: var(--sp-16);
  border: var(--bw-ui) solid var(--ink);
  border-radius: var(--r-chip);
  background: var(--white);
  color: var(--error);
  font-weight: var(--fw-bold);
}