/* Shared spacing and responsive layout; colours and fonts stay in the palette. */
body {
  margin: 0;
  padding: 1.5rem 1rem 2.5rem;
}

.site-header, main, .site-footer {
  width: 100%;
  max-width: 700px;
  min-width: 0;
  margin-inline: auto;
}

.ascii-banner {
  display: grid;
  align-items: center;
  margin: 0 0 0.75rem;
  font-family: monospace;
  font-size: 0.6875rem;
  line-height: 1.5;
}

.ascii-banner pre, .ascii-banner-text {
  grid-area: 1 / 1;
  margin: 0;
  font: inherit;
}

.ascii-banner pre {
  min-width: 0;
  width: 100%;
  white-space: pre-wrap;
  overflow-wrap: normal;
}

.ascii-banner-text {
  visibility: hidden;
}

.ascii-banner:is(:hover, :focus-visible) pre {
  visibility: hidden;
}

.ascii-banner:is(:hover, :focus-visible) .ascii-banner-text {
  visibility: visible;
}

.main-nav ul {
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.main-nav li {
  margin: 0;
}

.main-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0.75rem;
}

.main-nav a[aria-current] {
  border-bottom-color: currentColor;
}

.site-header > hr {
  margin: 1.25rem 0 2rem;
}

main {
  overflow-wrap: anywhere;
}

main h1, main h2, main h3, main h4, main h5, main h6 {
  margin-block: 2rem 0.75rem;
  line-height: 1.3;
  scroll-margin-top: 1.5rem;
}

main > h1:first-child, .post > header h1, .blog > header h1 {
  margin-top: 0;
  line-height: 1.2;
}

.post > header, .blog > header {
  margin-bottom: 1.5rem;
}

.post > header h1 {
  margin-bottom: 0.75rem;
}

.post-meta {
  margin: 0;
  line-height: 1.5;
}

.post, .blog {
  margin-bottom: 0;
}

main p, main ul, main ol, main blockquote,
main div.highlighter-rouge, main figure.highlight, main > pre, .post-content > pre {
  margin-block: 0 1.25rem;
}

main ul, main ol {
  padding-inline-start: 1.5rem;
}

main li + li {
  margin-top: 0.375rem;
}

main li > p {
  margin-bottom: 0.5rem;
}

main li > p:last-child {
  margin-bottom: 0;
}

main li > ul, main li > ol {
  margin-block: 0.5rem 0;
}

main blockquote {
  padding-block: 0.125rem;
  padding-inline-start: 1rem;
}

main blockquote > :last-child {
  margin-bottom: 0;
}

main code {
  padding: 0.1em 0.35em;
  overflow-wrap: anywhere;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

main pre, main pre code {
  max-width: 100%;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}

main pre code {
  margin: 0;
  padding: 0.75rem;
  overflow-x: auto;
}

main div.highlighter-rouge .highlight, main .highlight pre {
  margin: 0;
}

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

.post-content > :last-child,
.blog-table-of-contents > :last-child, main > :last-child {
  margin-bottom: 0;
}

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  margin-block: 0 1.5rem;
}

.table-scroll > table {
  width: 100%;
  min-width: 32rem;
  margin: 0;
}

main th, main td {
  padding: 0.625rem 0.75rem;
  vertical-align: top;
}

main a, .site-footer a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.ascii-banner:focus-visible, .main-nav a:focus-visible, .table-scroll:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.blog-table-of-contents li + li {
  margin-top: 0.5rem;
}

.blog-table-of-contents li > p {
  margin: 0;
}

.blog-table-of-contents a {
  display: block;
  padding-block: 0.25rem;
}

.site-footer {
  margin-top: 2.5rem;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.site-footer > hr {
  margin: 0 0 1.5rem;
}

.site-footer p {
  margin: 0;
}

.site-footer p + p {
  margin-top: 0.5rem;
}

@media (min-width: 48rem) {
  body { padding: 2rem 2rem 3rem; }
  main pre code { padding: 1rem; }
  .site-footer { margin-top: 3rem; }
}