:root {
  --c-botanical-night-50: #d8fbf3;
  --c-botanical-night-100: #a8f7e8;
  --c-botanical-night-200: #84e2d1;
  --c-botanical-night-300: #75cbbb;
  --c-botanical-night-400: #67b3a5;
  --c-botanical-night-500: #5a9d90;
  --c-botanical-night-600: #4a8479;
  --c-botanical-night-700: #3d6e65;
  --c-botanical-night-800: #315a52;
  --c-botanical-night-900: #254640;
  --c-botanical-night-950: #122724;

  --c-engulfed-50: #f5f2ed;
  --c-engulfed-100: #ebe5d9;
  --c-engulfed-200: #d1c5b1;
  --c-engulfed-300: #b4aa98;
  --c-engulfed-400: #989080;
  --c-engulfed-500: #7d7669;
  --c-engulfed-600: #635e53;
  --c-engulfed-700: #4b463e;
  --c-engulfed-800: #33302a;
  --c-engulfed-900: #1d1b17;
  --c-engulfed-950: #12110e;
}

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

* {
  margin: 0;
  padding: 0;
}

html {
  color-scheme: light dark;
  hanging-punctuation: first allow-end last;
  word-break: break-word;
  min-height: 100%;
}

body {
  min-height: 100vh;
  position: relative;
}

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

input,
select,
textarea,
button {
  font: inherit;
  /* FUTURE: appearance: base; */
}

label {
  display: block;
}
input:not(:where([type='submit'], [type='checkbox'], [type='radio'], [type='button'], [type='reset'])) {
  inline-size: 100%;
}
button,
input:where([type='submit'], [type='reset'], [type='button']) {
  background: CanvasText;
  color: Canvas;
  border: 1px solid transparent;
}
textarea {
  field-sizing: content;
  min-block-size: 5lh;
  inline-size: 100%;
  max-inline-size: 100%;
}

svg {
  fill: currentColor;
}

[aria-disabled='true' i],
[disabled] {
  cursor: not-allowed;
}
[disabled],
label:has(input[disabled]) {
  opacity: 0.5;

  [disabled] {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :has(:target) {
    scroll-behavior: smooth;
    scroll-padding-top: 3rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  font-family: 'Newsreader', serif;
  font-optical-sizing: auto;
  font-size: 18px;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.25px;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  background: var(--c-engulfed-50);
  color: var(--c-engulfed-900);

  &.no-scroll {
    overflow: hidden;
  }
}

a {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  font-weight: bold;

  &:link {
    color: var(--color-link-active);
  }
  &:hover {
    background: var(--color-link-active);
    color: var(--color-bg);
  }
  &:visited {
    color: var(--color-link-visited);

    &:hover {
      background: var(--color-link-visited);
      color: var(--color-bg);
    }
  }
}

main {
  max-width: 1440px;
  padding: 16px;
  margin: 0 auto 32px auto;

  &.wide {
    max-width: 4096px;
  }
}

.page-title {
  font-size: 32px;
  margin: 32px 0 16px 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  color: var(--c-engulfed-950);
}

p {
  text-wrap: pretty;
  line-height: 32px;
  margin: 0 0 16px 0;
  color: var(--c-engulfed-950);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
  font-family: 'Castoro', 'Newsreader', serif;
}

h1 {
  font-size: 54px;
  font-weight: 700;
}

h2 {
  font-size: 36px;
  line-height: 46px;
  font-weight: 600;
  margin: 32px 0;
}

h3 {
  font-size: 28px;
  line-height: 38px;
  font-weight: 600;
  margin: 32px 0 24px 0;
}

strong {
  font-weight: 700;
}