:root {
  --canvas: #151515;
  --ink: #b8b8b8;
  --ink-strong: #d0d0d0;
  --muted: #777777;
  --quiet: #555555;
  --focus: #9f9f9f;
  --font-main: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--font-main);
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--canvas);
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  overflow-x: hidden;
}

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

a:hover,
a:focus-visible {
  color: var(--ink-strong);
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 20;
  padding: 7px 10px;
  border-radius: 4px;
  background: var(--ink-strong);
  color: var(--canvas);
  font-size: 13px;
  line-height: 18px;
  transform: translateY(-170%);
}

.skip-link:focus {
  transform: translateY(0);
}

.theme-mark {
  position: fixed;
  top: 28px;
  right: 28px;
  z-index: 5;
  width: 24px;
  height: 24px;
  opacity: 0.66;
}

.theme-mark::before,
.theme-mark::after,
.theme-mark span,
.theme-mark span::before,
.theme-mark span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  background: var(--muted);
  transform-origin: center;
}

.theme-mark::before {
  width: 7px;
  height: 7px;
  border: 2px solid var(--muted);
  border-radius: 999px;
  background: transparent;
  transform: translate(-50%, -50%);
}

.theme-mark::after,
.theme-mark span,
.theme-mark span::before,
.theme-mark span::after {
  width: 2px;
  height: 5px;
  border-radius: 999px;
}

.theme-mark::after {
  transform: translate(-50%, -13px);
  box-shadow: 0 21px 0 var(--muted);
}

.theme-mark span {
  transform: translate(-50%, -13px) rotate(45deg);
  box-shadow: 0 21px 0 var(--muted);
}

.theme-mark span::before {
  transform: translate(-50%, -13px) rotate(45deg);
  box-shadow: 0 21px 0 var(--muted);
}

.theme-mark span::after {
  transform: translate(-50%, -13px) rotate(90deg);
  box-shadow: 0 21px 0 var(--muted);
}

.home-shell {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 56px 24px;
}

.home-cluster {
  width: min(100%, 324px);
  margin-top: -8vh;
}

.home-heading {
  margin-bottom: 56px;
}

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

h1 {
  color: var(--ink-strong);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 28px;
}

.home-heading p,
.byline,
.article-lede {
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.byline {
  display: inline-block;
}

.home-links {
  display: grid;
  gap: 24px;
  margin-bottom: 44px;
}

.home-links a {
  display: block;
  width: fit-content;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  transition: color 140ms ease;
}

.home-note {
  max-width: 300px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.article-shell {
  width: min(100% - 48px, 620px);
  margin: 0 auto;
  padding: 74px 0 88px;
}

.back-link {
  display: inline-block;
  margin-bottom: 42px;
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
}

.article-header {
  margin-bottom: 36px;
}

.article-header h1 {
  margin-bottom: 12px;
}

.article-lede {
  max-width: 560px;
}

.article-section {
  margin-top: 34px;
}

.article-section h2,
.plain-list h2 {
  margin-bottom: 10px;
  color: var(--ink-strong);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 24px;
}

.article-section h3 {
  margin: 22px 0 4px;
  color: var(--ink-strong);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
}

.article-section p,
.article-section li {
  max-width: 600px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 23px;
}

.plain-list {
  display: grid;
  gap: 18px;
  margin-top: 34px;
}

.plain-link,
.text-link {
  color: var(--ink);
  transition: color 140ms ease;
}

.plain-link {
  display: block;
  width: fit-content;
}

.plain-link strong {
  display: block;
  color: var(--ink-strong);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
}

.plain-link span {
  display: block;
  max-width: 520px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.micro-copy {
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
}

.link-stack {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.link-stack a {
  width: fit-content;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
}

a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

::selection {
  background: #2e2e2e;
  color: var(--ink-strong);
}

@media (max-width: 640px) {
  .theme-mark {
    top: 24px;
    right: 24px;
  }

  .home-shell {
    padding: 48px 28px;
  }

  .home-cluster {
    width: min(100%, 286px);
    margin-top: -5vh;
  }

  .home-heading {
    margin-bottom: 50px;
  }

  .home-links {
    gap: 24px;
    margin-bottom: 40px;
  }

  .article-shell {
    width: min(100% - 48px, 620px);
    padding-top: 58px;
  }
}

@media (max-width: 380px) {
  .home-shell {
    padding-left: 24px;
    padding-right: 24px;
  }

  .home-cluster {
    width: min(100%, 270px);
  }

  .article-shell {
    width: min(100% - 36px, 620px);
  }
}