/* Tokens come from Open Props, vendored as open-props.min.css (the same
   v1.6.0 file No Pants Vintage uses). */

:root {
  color-scheme: light dark;
  --ink: #1f2a44;
  --paper: #f6f3ec;
  --accent: #8a3b2a;
  --rule: #d8d2c4;
  --muted: #5d6270;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ece8dd;
    --paper: #161b2a;
    --accent: #e0a28f;
    --rule: #333a50;
    --muted: #a3a8b8;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--font-size-2);
  line-height: var(--font-lineheight-3);
}

.page {
  max-inline-size: 38rem;
  margin-inline: auto;
  padding: var(--size-fluid-4) var(--size-4);
}

h1 {
  font-size: var(--font-size-fluid-3);
  line-height: var(--font-lineheight-0);
  margin: 0;
}

h2 {
  font-size: var(--font-size-3);
  margin-block: var(--size-8) var(--size-3);
}

.lede {
  font-size: var(--font-size-4);
  margin-block: var(--size-2) 0;
}

a {
  color: var(--accent);
  text-underline-offset: 0.2em;
}

.muted {
  color: var(--muted);
  font-size: var(--font-size-1);
}

.storefronts {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--rule);
}

.storefronts li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--size-2) var(--size-4);
  padding-block: var(--size-3);
  border-block-end: 1px solid var(--rule);
}

.storefronts .name {
  font-size: var(--font-size-3);
}

.storefronts .domain,
.storefronts .admin {
  font-size: var(--font-size-1);
}