.standfirst {
  font-size: var(--step-standfirst);
  line-height: var(--leading-standfirst);
  max-width: var(--measure-standfirst);
  color: var(--ink-soft);
  margin: 0;
}

.post-body {
  padding-bottom: var(--space-9);
}

.post-body > svg.ruler,
.post-sheet .feature,
.page-sheet .feature,
.project-sheet .plate {
  margin-left: calc(var(--label-column) + var(--column-gap));
  width: calc(100% - var(--label-column) - var(--column-gap));
}

.post-sheet .feature,
.page-sheet .feature,
.project-sheet .plate {
  margin-top: var(--space-5);
  margin-bottom: var(--space-6);
}

.gh-content {
  display: grid;
  grid-template-columns: [wide-start] var(--label-column) [content-start] minmax(0, var(--measure-body)) [content-end] minmax(0, 1fr) [wide-end];
  column-gap: var(--column-gap);
  font-size: var(--step-body);
  line-height: var(--leading-body);
  overflow-wrap: break-word;
}

.gh-content > * {
  grid-column: content;
  margin: 0 0 1.15em;
  min-width: 0;
}

.gh-content > .kg-width-wide {
  grid-column: wide;
}

.gh-content > .kg-width-full {
  grid-column: wide;
  margin-inline: calc(-1 * var(--gutter));
}

.gh-content h2 {
  font-family: var(--font-display);
  font-size: var(--step-article-h2);
  font-stretch: var(--width-article);
  font-weight: 560;
  margin: 1.8em 0 0.6em;
}

.gh-content h3 {
  font-family: var(--font-display);
  font-size: var(--step-article-h3);
  font-stretch: 100%;
  font-weight: 620;
  letter-spacing: -0.01em;
  margin: 1.6em 0 0.4em;
}

.gh-content a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--pencil);
  text-underline-offset: 5px;
}

.gh-content a:hover,
.gh-content a:focus-visible {
  text-decoration-color: var(--blue);
}

.gh-content :is(ul, ol) {
  padding-left: 1.1em;
}

.gh-content li {
  margin: 0 0 0.45em;
}

.gh-content li::marker {
  color: var(--blue);
}

.gh-content :not(pre) > code {
  font-family: var(--font-code);
  font-size: 0.82em;
  background: var(--mat);
  padding: 0.08em 0.32em;
}

.gh-content pre {
  font-family: var(--font-code);
  font-size: var(--step-code);
  line-height: var(--leading-code);
  background: var(--mat);
  color: var(--ink);
  border-top: 2px solid var(--ink);
  padding: 22px 24px 24px;
  overflow-x: auto;
  margin: 0 0 1.8em;
  tab-size: 4;
}

.gh-content .codebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.6em 0 0;
}

.gh-content .copy {
  background: none;
  border: 0;
  padding: 0 0 0 var(--space-3);
  margin-left: auto;
  cursor: pointer;
  min-height: 44px;
}

.gh-content blockquote:not(.pull) {
  font-family: var(--font-text);
  font-style: normal;
  color: var(--ink-soft);
  border-inline-start: 1px solid var(--pencil);
  padding-inline-start: var(--space-5);
  margin: 1.6em 0;
}

.gh-content > svg.ruler {
  grid-column: content;
  margin: 2.2em 0 var(--space-5);
}

.gh-content blockquote.pull,
.testimonial blockquote {
  font-family: var(--font-display);
  font-stretch: var(--width-section);
  font-weight: 520;
  font-size: var(--step-pull);
  line-height: var(--leading-pull);
  letter-spacing: var(--tracking-pull);
  font-style: normal;
  color: var(--blue);
  max-width: 22ch;
  text-wrap: balance;
  margin: 0 0 2.2em;
  padding: 0;
  border: 0;
  text-align: start;
}

.gh-content blockquote.pull p {
  margin: 0;
}

.gh-content blockquote.pull p:first-child::before,
.gh-content blockquote.pull:not(:has(p))::before {
  content: "\201C";
  font-family: var(--font-stencil);
  font-weight: 800;
  color: var(--blue);
  text-shadow: var(--register-offset) 0 var(--signal);
  margin-right: 0.08em;
}

.gh-content :is(.kg-image-card, .kg-gallery-image) img,
.post-sheet .feature img,
.page-sheet .feature img,
.project-sheet .plate img {
  display: block;
  width: 100%;
  height: auto;
}

.gh-content .kg-image-card:not(.kg-width-wide):not(.kg-width-full) img {
  width: auto;
  max-width: 100%;
}

.gh-content img,
.post-sheet .feature img,
.page-sheet .feature img,
.project-sheet .plate img {
  filter: url(#blueline);
}

.gh-content :is(.kg-bookmark-icon, .kg-bookmark-publisher) img {
  filter: none;
}

.gh-content figcaption,
.post-sheet .feature figcaption,
.page-sheet .feature figcaption,
.project-sheet .plate figcaption {
  font-family: var(--font-text);
  font-style: italic;
  font-size: var(--step-ui);
  color: var(--graphite);
  margin-top: var(--space-3);
}

.gh-content hr {
  border: 0;
  border-top: 1px solid var(--pencil);
  margin: 2.4em 0;
}

.gh-content table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
}

.gh-content th {
  font-family: var(--font-display);
  font-stretch: var(--width-cap);
  font-weight: 600;
  font-size: var(--step-cap);
  letter-spacing: var(--tracking-cap);
  text-transform: uppercase;
  color: var(--graphite);
}

.gh-content th,
.gh-content td {
  border-bottom: 1px solid var(--rule);
  padding: var(--space-2) var(--space-3);
  text-align: start;
}

.gh-content :is(.kg-embed-card, .kg-video-card) iframe {
  max-width: 100%;
}

.post-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--column-gap);
  padding: var(--space-8) 0;
}

.post-nav a {
  display: block;
  font-family: var(--font-display);
  font-stretch: var(--width-article);
  font-weight: 560;
  font-size: var(--step-list-title);
  line-height: var(--leading-list-title);
  letter-spacing: var(--tracking-list-title);
}

.post-nav:not(:has(a)) {
  display: none;
}

.post-nav .cap {
  display: block;
  margin-bottom: var(--space-2);
}

.post-nav-older {
  grid-column: 1;
}

.post-nav-newer {
  grid-column: 2;
  text-align: end;
}

section.block.comments {
  padding: var(--space-10) 0 var(--space-9);
}

@media (max-width: 900px) {
  .post-body > svg.ruler,
  .post-sheet .feature,
  .page-sheet .feature,
  .project-sheet .plate {
    margin-left: 0;
    width: 100%;
  }

  .gh-content {
    grid-template-columns: [wide-start content-start] minmax(0, 1fr) [content-end wide-end];
    font-size: 18px;
  }

  .standfirst {
    font-size: 20px;
  }

  .post-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .post-nav-older,
  .post-nav-newer {
    grid-column: 1;
    text-align: start;
  }
}

@media (max-width: 480px) {
  .gh-content pre {
    font-size: 13.5px;
    padding: 18px 16px;
  }
}