/*
 * Reset and page-level layout. Every value comes from tokens.css or from a
 * measurement in the Figma frames (1512 wide).
 */

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

html {
  /* The page is white; sections never paint their own background. */
  background: var(--white);
  color: var(--neutrals-dark);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font: 400 16px/1.62 var(--font-body);
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

svg {
  display: block;
}

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

/*
 * Content width. At 1512 the Figma frames keep 155px on each side
 * (--padding-default), which leaves 1202px of content.
 * Narrower screens have no Figma frame: below 1100px the gutter drops to
 * --margin-alternative, and on phones to the 16px the plate rule already
 * uses (width: 100% - 32px).
 */
:root {
  --gutter: var(--padding-default);
  --section-space: var(--margin-default);
}

@media (max-width: 1100px) {
  :root {
    --gutter: var(--margin-alternative);
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
    --section-space: var(--margin-alternative);
  }
}

.wrap {
  width: min(100% - 2 * var(--gutter), 1202px);
  margin-inline: auto;
}

main {
  /* Sits above the fixed node field, which is drawn behind the content. */
  position: relative;
  z-index: 1;
}

.section {
  position: relative;
  padding-block: var(--section-space);
}