:root,
[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

body [data-theme] {
  color: var(--content-primary);
}

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

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  margin: 0;
  background: var(--background-primary);
  color: var(--content-primary);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.text-caption-ac,
.text-footnote-ac,
time {
  font-variant-numeric: tabular-nums;
}

main {
  flex: 1 0 auto;
}

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

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

::selection {
  background: var(--background-inverse-primary);
  color: var(--content-inverse-primary);
}

:focus-visible {
  outline: var(--stroke-small) solid var(--border-focus);
  outline-offset: var(--spacing-xxsmall);
}

.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--padding-edge);
}

.wrap-wide {
  max-width: var(--content-wide);
}

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

[data-colour="paper"] { --band-fill: var(--background-band-paper); }
[data-colour="stone"] { --band-fill: var(--background-band-stone); }
[data-colour="sky"] { --band-fill: var(--background-band-sky); }
[data-colour="peach"] { --band-fill: var(--background-band-peach); }
[data-colour="ink"] { --band-fill: var(--background-band-ink); }
[data-colour="olive"] { --band-fill: var(--background-band-olive); }
[data-colour="clay"] { --band-fill: var(--background-band-clay); }
[data-colour="navy"] { --band-fill: var(--background-band-navy); }
[data-colour="brand"] { --band-fill: var(--background-band-brand); }
[data-colour="wine"] { --band-fill: var(--background-band-wine); }
[data-colour="forest"] { --band-fill: var(--background-band-forest); }

:root {
  --band-padding: var(--padding-section);
  --band-radius: 0;
}

:root[data-band-padding="compact"] { --band-padding: var(--spacing-xtreme1); }
:root[data-band-padding="generous"] { --band-padding: var(--spacing-xtreme3); }
:root[data-band-radius="small"] { --band-radius: var(--radius-large); }
:root[data-band-radius="large"] { --band-radius: var(--radius-xxlarge); }

.band {
  background: var(--band-fill, transparent);
  transition: background-color var(--duration-fade) var(--ease-reveal);
}

.band:not([data-colour="none"]) {
  padding-block: var(--band-padding);
  border-radius: var(--band-radius);
  border-color: transparent;
}

:root[data-band-shape="inset"] .band:not([data-colour="none"]) {
  margin: var(--spacing-small) var(--spacing-small) 0;
}

.band:not([data-colour="none"]) + .rule,
.rule:has(+ .band:not([data-colour="none"])) {
  display: none;
}

.rule {
  border: 0;
  border-top: var(--stroke-small) solid var(--border-primary);
  margin: 0;
}

.muted {
  color: var(--content-secondary);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[data-logo] {
  display: block;
}

[data-logo] svg {
  display: block;
  width: 100%;
  height: auto;
}

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

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}