html { --border-radius: 1rem; block-size: 100%; }

body {
  background-color: var(--color-neutral-10);
  color: var(--color-neutral-2);
  font-family: var(--font-family-1);
  font-feature-settings: "liga" 1, "dlig" 1, "hlig" 1, "clig" 1, "calt" 1;
  font-size: var(--font-size-0);
  font-variant-ligatures: normal;
  line-height: 1.4;
  print-color-adjust: exact;
}

:focus-visible { outline: 2px solid var(--color-color-1); outline-offset: 2px; }
::selection { background-color: var(--color-color-1); color: var(--color-light-neutral-9); }
::marker { color: var(--color-color-1); }

img { height: auto; width: 100%; object-fit: cover; vertical-align: middle; border-radius: var(--border-radius); }

.primary {
  background-color: var(--color-color-1);
  border: 1px solid var(--color-color-1);
  border-radius: 0.3em;
  color: var(--color-light-neutral-9);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-family-1);
  font-size: var(--font-size-0);
  line-height: 0.9;
  padding: 0.65em 1.1em;
  width: fit-content;
  text-decoration: none;
}
.primary:visited { color: var(--color-light-neutral-9); }
.primary:hover { background-color: var(--color-color-9); color: var(--color-light-neutral-9); text-decoration: none; }
.primary:active { background-color: var(--color-color-9); transform: scale(0.99) translateY(1px); }
.primary:disabled { cursor: not-allowed; opacity: .54; }

.secondary {
  border: 1px solid var(--color-neutral-7);
  border-radius: 0.3em;
  background-color: var(--color-neutral-9);
  color: var(--color-neutral-1);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-family-1);
  font-size: var(--font-size-0);
  line-height: 0.9;
  padding: 0.65em 1.1em;
  width: fit-content;
  text-decoration: none;
}
.secondary:visited { color: var(--color-neutral-1); }
.secondary:hover { border-color: var(--color-color-1); color: var(--color-color-1); text-decoration: none; }
.secondary:active { transform: scale(0.99) translateY(1px); }

.tertiary {
  background-color: transparent; border: 0;
  color: var(--color-color-7);
  cursor: pointer; display: inline-flex;
  font-family: var(--font-family-1);
  font-size: var(--font-size-0);
  line-height: 1;
  padding: 0.5em 0;
  text-decoration: underline;
  text-decoration-thickness: .1em;
  text-underline-offset: .15em;
}
.tertiary:hover { color: var(--color-color-11); }

.delete {
  background-color: var(--color-neutral-10);
  border: 1px solid var(--color-color-4);
  border-radius: 0.3em;
  color: var(--color-color-4);
  cursor: pointer; display: inline-flex;
  font-family: var(--font-family-1);
  font-size: var(--font-size-0);
  line-height: 0.9; padding: 0.5em 1em;
  width: fit-content; text-decoration: none;
}
.delete:hover { background-color: var(--color-color-4); color: var(--color-neutral-10); }

input[type="range"] {
  width: 100%;
  accent-color: var(--color-color-1);
}

label {
  line-height: 1;
  color: var(--color-neutral-3);
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--font-size--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

a {
  color: var(--color-color-5);
  text-decoration: none;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.15em;
}
a:hover { color: var(--color-color-9); text-decoration: underline; }

h1 { font-family: var(--font-family-1); font-size: var(--font-size-6); font-weight: normal; line-height: 1.2; text-wrap: balance; }
h2 { font-family: var(--font-family-1); font-size: var(--font-size-5); font-weight: normal; line-height: 1.2; text-wrap: balance; }
h3 { font-family: var(--font-family-1); font-size: var(--font-size-4); font-weight: normal; line-height: 1.2; text-wrap: balance; }
h4 { font-family: var(--font-family-1); font-size: var(--font-size-3); font-weight: normal; line-height: 1.2; text-wrap: balance; }
h5 { font-family: var(--font-family-1); font-size: var(--font-size-2); font-weight: normal; line-height: 1.2; text-wrap: balance; }
h6 { font-family: var(--font-family-1); font-size: var(--font-size-1); font-weight: normal; line-height: 1.2; text-wrap: balance; }

p  { font-family: var(--font-family-1); font-size: var(--font-size-0); font-weight: normal; line-height: 1.4; }
span { font-family: var(--font-family-1); font-size: inherit; }

ul, ol { padding: 0; margin: 0; }