/* ==========================================================================
   Tures — element defaults
   Only bare elements are styled here. Anything that needs a decision belongs
   in a utility class or a component stylesheet.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background-color: var(--theme-background);
  color: var(--theme-text);
  font-family: var(--font-body);
  font-size: var(--text-main-font-size);
  font-weight: var(--font-primary-regular);
  line-height: var(--line-height-1-3);
  letter-spacing: var(--letter-spacing-0-02);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Nothing on this site scrolls sideways. */
  overflow-x: clip;
  /* The grain below is absolutely positioned against this. */
  position: relative;
}

/* The paper grain runs the full height of the page rather than living on
   the hero and the footer, so there is one continuous surface. It scrolls
   with the page (absolute, not fixed) because a grain pinned to the
   viewport reads as a screen effect rather than as paper. Negative z-index
   puts it above the page ground and below every section. */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--texture-image);
  background-repeat: repeat;
  background-size: var(--texture-size);
  opacity: var(--texture-opacity);
  mix-blend-mode: var(--texture-blend);
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin-block: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  letter-spacing: var(--letter-spacing-0);
  color: inherit;
  text-wrap: balance;
}

h1 { font-size: var(--h1-font-size); line-height: var(--line-height-1); }
h2 { font-size: var(--h2-font-size); line-height: var(--line-height-1); }
h3 { font-size: var(--h3-font-size); line-height: var(--line-height-1-1); }
h4 { font-size: var(--h4-font-size); line-height: var(--line-height-1-3); }
h5 { font-size: var(--h5-font-size); line-height: var(--line-height-1-3); }
h6 { font-size: var(--h6-font-size); line-height: var(--line-height-1-3); }

p {
  text-wrap: pretty;
}

ul, ol {
  margin-block: 0;
  padding-inline-start: 0;
  list-style: none;
}

a {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--theme-brand);
}

/* A11Y: one visible focus treatment for every interactive element, on both
   the cream and the green ground. Never remove this without a replacement. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--theme-focus);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-none);
}

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

img, video {
  height: auto;
  object-fit: cover;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

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

label {
  display: block;
  font-weight: var(--font-primary-bold);
}

hr {
  border: 0;
  border-block-start: var(--border-width-control) solid var(--swatch-neutral-200);
  margin-block: var(--space-m);
}

section, header, footer {
  position: relative;
}

::selection {
  background-color: var(--theme-brand);
  color: var(--theme-on-brand);
}