/* --- RESET --- */
  /* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Increase line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
  background-color: var(--_site-theme---background);
  color: var(--_site-theme---text);
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

/* --- Variables --- */ 

:root {
  --global-transition-duration: calc(var(--animation--transition-duration) * 1s);
}

/* --- Elements --- */

a { color: inherit; }

[data-slot], .slot {
  display: flex;
  flex-flow: column;
  align-items: flex-start;

  > [data-component="button"]:not([data-slider]), & .button:not([data-slider]) {
    align-self: flex-start;
  }
}

[data-slot="contents"], .u-d-contents, [data-utility="display-contents"] {
  display: contents;
}

/* --- Layout --- */

#page-wrapper {
  flex-flow: column;
  display: flex;
  position: relative;
  overflow: clip;
}

/* --- Utilities --- */

[data-component="aspect-ratio"] {display: none;}
[data-ratio="16/9"], *:has(> [data-ratio="16/9"]) {aspect-ratio: 16/9;}
[data-ratio="4/3"], *:has(> [data-ratio="4/3"]) {aspect-ratio: 4/3;}
[data-ratio="3/4"], *:has(> [data-ratio="3/4"]) {aspect-ratio: 3/4;}
[data-ratio="1"], *:has(> [data-ratio="1"]) {aspect-ratio: 1;}
[data-ratio="9/16"], *:has(> [data-ratio="9/16"]) {aspect-ratio: 9/16;}
[data-ratio="32/9"], *:has(> [data-ratio="32/9"]) {aspect-ratio: 32/9;}

.u-sr-only, [data-utility="visually-hidden"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.u-link-cover, [data-utility="link-cover"] {
  z-index: 1;
  position: absolute;
  inset: 0%;
  width: 100%;
  height: 100%;
  padding: 0;
  background-color: transparent;

  &:focus-visible {
    outline: 2px solid var(--_site-theme---focus-outline);
  }
}

.u-hide-embed, [data-utility="hide-embed"] {
  display: none;
  position: fixed;
  inset: 0% auto auto 0%;
}