:root {
  color-scheme: dark;
  --bg: #333333;
  --text: #f1f1f1;
  --body-text: #e4e4e4;
  --muted: #bbbbbb;
  --faint: #666666;
  --rule: var(--text);
  --surface: #292929;
  --shell: 92ch;
  --article-measure: 44rem;
  --edge: clamp(1.25rem, 5vw, 4.75rem);
  --font-header: 20px;
}

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

html {
  text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: Georgia, Cambria, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
}

a {
  color: inherit;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.16em;
}

a:focus-visible {
  outline: 1px solid var(--text);
  outline-offset: 0.2rem;
}

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

h1,
h2 {
  font-weight: 400;
}

.skip-link {
  position: fixed;
  z-index: 10;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.5rem;
  color: var(--bg);
  background: var(--text);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

body > main,
body > header,
body > footer {
  width: min(calc(100% - (2 * var(--edge))), var(--shell));
  margin-inline: auto;
}

body > main > header {
  padding-block: clamp(7rem, 22svh, 12rem) clamp(3rem, 8svh, 5rem);
}

body > main > header > h1 {
  font-size: inherit;
  line-height: inherit;
  text-align: left;
}

.index {
  padding-bottom: clamp(3.5rem, 8vw, 5.5rem);
}

.index:first-child {
  padding-top: clamp(4rem, 10vw, 7rem);
}

.index > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 1.5rem;
}

.index h1,
.index h2 {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.2;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem 0.7rem;
  color: var(--muted);
}

.tags a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.tags a[aria-current="page"] {
  color: var(--text);
  font-style: italic;
}

.index > ol {
  display: grid;
  gap: 1.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.index > ol > li {
  display: grid;
  grid-template-columns: minmax(7rem, 0.22fr) minmax(0, 1fr);
  gap: 0.25rem clamp(1.25rem, 4vw, 3.5rem);
}

.index li > time {
  grid-row: span 2;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.index li > a {
  display: grid;
  gap: 0.25rem;
  text-decoration: none;
}

.index li > a > strong {
  font-size: var(--font-header);
  font-weight: 400;
  line-height: 1.14;
}

.index li > a > span {
  max-width: 48rem;
  color: var(--muted);
  line-height: 1.45;
}

.index li > .tags {
  grid-column: 2;
  justify-content: flex-start;
  gap: 0.45rem 0.7rem;
}

.index > nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  margin-top: 2rem;
  color: var(--muted);
}

.index > nav span {
  grid-column: 2;
}

.index > nav a {
  grid-row: 1;
  text-decoration: none;
}

.index > nav a:last-child {
  grid-column: 3;
  text-align: right;
}

.index > dl {
  display: grid;
  gap: 0.45rem;
  max-width: 32rem;
  margin: 0;
}

.index > dl > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.index dt,
.index dd {
  margin: 0;
}

.index dt a {
  text-decoration: none;
}

.index dd {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.newsletter {
  max-width: 32rem;
  padding-bottom: clamp(4rem, 10vw, 7rem);
}

.newsletter h2 {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.2;
}

.newsletter p {
  margin: 0.75rem 0 0;
  color: var(--muted);
}

body > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.2rem;
  color: var(--muted);
}

body > header a {
  text-decoration: none;
}

main > article {
  display: grid;
  grid-template-columns: minmax(0, var(--article-measure));
  justify-content: center;
  padding-block: 56px 48px;
}

main > article > header {
  margin-bottom: 40px;
}

main > article > header h1 {
  font-size: var(--font-header);
  line-height: 1.1;
}

main > article > header > p {
  margin: 16px 0 0;
  color: var(--muted);
  line-height: inherit;
}

main > article > header > p[role="note"] {
  margin-top: 14px;
}

main > article > header > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 11px;
  margin-top: 18px;
  color: var(--muted);
}

main > article > header > div a {
  color: inherit;
  text-decoration: none;
}

main > article > header span,
main > article > header time,
main > article > header a {
  white-space: nowrap;
}

.content {
  min-width: 0;
  hyphens: none;
}

.content > :first-child {
  margin-top: 0;
}

.content h2 {
  margin: 36px 0 11px;
  font-size: var(--font-header);
  line-height: 1.2;
}

.content h3 {
  margin: 29px 0 10px;
  font-size: 16px;
  line-height: 1.2;
}

.content p {
  color: var(--body-text);
  overflow-wrap: break-word;
}

.content p + p,
.content ul + p,
.content ol + p,
.content p + ul,
.content p + ol {
  margin-top: 14px;
}

.content .article-contact {
  margin-top: 40px;
}

.content ul,
.content ol {
  margin: 14px 0 0;
  padding-left: 20px;
  color: var(--body-text);
}

.content li + li {
  margin-top: 5px;
}

.content blockquote {
  margin: 20px 0;
  padding-left: 16px;
  border-left: 1px solid var(--faint);
  color: var(--muted);
}

.content blockquote p {
  color: inherit;
}

.content hr {
  margin-block: 2.5rem;
  border: 0;
  border-top: 1px solid var(--faint);
}

.content code {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
}

.content :not(pre) > code {
  padding: 0.08em 0.22em;
  background: var(--surface);
}

.content pre {
  max-width: 100%;
  margin: 16px 0 0;
  padding: 14px 16px;
  overflow-x: auto;
  background: var(--surface);
}

.content table {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: 1rem;
  overflow-x: auto;
  border-collapse: collapse;
  color: var(--body-text);
  font-variant-numeric: tabular-nums;
}

.content th,
.content td {
  padding: 0.3rem 0.65rem;
  border-bottom: 1px solid var(--faint);
  text-align: left;
}

.content th:first-child,
.content td:first-child {
  padding-left: 0;
}

.figure {
  display: block;
  width: 100%;
  margin: 20px 0 22px;
}

.figure > a {
  display: block;
  cursor: zoom-in;
}

.figure img {
  display: block;
  width: 100%;
  height: auto;
}

.figure > small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.8em;
  font-style: italic;
}

.footnotes {
  margin-top: 48px;
  color: var(--muted);
}

.footnotes hr {
  display: none;
}

.footnotes ol {
  margin: 0;
  padding-left: 18px;
  color: inherit;
}

.footnotes li {
  overflow-wrap: break-word;
}

.footnotes li + li {
  margin-top: 5px;
}

.footnote-ref,
.footnote-backref {
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.chroma .c,
.chroma .c1,
.chroma .cm,
.chroma .cp {
  color: var(--muted);
  font-style: italic;
}

.chroma .k,
.chroma .kc,
.chroma .kd,
.chroma .kn,
.chroma .kr,
.chroma .kt {
  font-weight: 700;
}

main > article > aside {
  display: none;
}

main > article > aside ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

main > article > aside li + li {
  margin-top: 0.2rem;
}

main > article > aside ul ul {
  margin: 0.2rem 0 0 0.65rem;
}

main > article > aside a {
  display: block;
  padding-block: 0.12rem;
  color: var(--muted);
  text-decoration: none;
}

main > article > aside a:hover,
main > article > aside a[aria-current="location"] {
  color: var(--text);
}

main > article > aside a[aria-current="location"] {
  font-style: italic;
}

main > article .newsletter {
  margin-top: 3rem;
  padding-bottom: 0;
}

main > article > footer > nav {
  margin-top: 2rem;
  color: var(--muted);
}

main > article > footer > nav a {
  text-decoration: none;
}

main > article > footer > nav a:hover {
  color: var(--text);
}

body > footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: clamp(3rem, 8vw, 5rem);
  color: var(--muted);
}

body > footer strong {
  color: var(--text);
  font-weight: 400;
}

.error {
  min-height: 70vh;
  padding-block: clamp(8rem, 28svh, 16rem);
  color: var(--muted);
}

.error h1 {
  color: var(--text);
  font-size: var(--font-header);
}

.error h1 + p {
  margin-top: 0.75rem;
}

@media (min-width: 74rem) {
  main > article > header {
    grid-area: 1 / 1;
  }

  main > article > .content {
    grid-area: 2 / 1;
  }

  main > article > footer {
    grid-area: 3 / 1;
  }

  main > article > aside {
    position: sticky;
    top: 2rem;
    grid-area: 2 / 1;
    display: block;
    width: 11rem;
    align-self: start;
    justify-self: start;
    max-height: calc(100vh - 4rem);
    overflow: auto;
    color: var(--muted);
    line-height: 1.35;
    transform: translateX(-14rem);
  }
}

@media (max-width: 42rem) {
  body > main > header {
    padding-block: clamp(5rem, 18svh, 7rem) 3rem;
  }

  .index > header {
    display: grid;
    gap: 0.75rem;
  }

  .tags {
    justify-content: flex-start;
  }

  .index > ol > li {
    grid-template-columns: 1fr;
  }

  .index li > time {
    grid-row: auto;
  }

  .index li > .tags {
    grid-column: auto;
  }

  body > footer {
    display: grid;
  }
}

@media print {
  :root {
    color-scheme: light;
    --bg: #ffffff;
    --text: #111111;
    --body-text: #222222;
    --muted: #555555;
    --faint: #cccccc;
    --rule: var(--text);
    --surface: #f5f5f5;
  }

  body > header,
  main > article > aside,
  .newsletter,
  main > article > footer > nav,
  body > footer {
    display: none;
  }

  main > article {
    padding: 0;
  }

  .figure {
    break-inside: avoid;
  }
}