/* Article layout */
.gh-article {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2.4rem;
}

.gh-article-header {
  margin-bottom: 4.0rem;
  text-align: center;
}

.gh-article-tag {
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-midgrey);
  margin-bottom: 1.2rem;
}

.gh-article-title {
  font-size: 4.8rem;
  line-height: 1.1;
  margin-bottom: 1.6rem;
  color: var(--color-darkgrey);
}

.gh-article-meta {
  font-size: 1.4rem;
  color: var(--color-midgrey);
}

/* Hero image */
.gh-article-image {
  max-width: var(--max-width-wide);
  margin: 0 auto 4.8rem;
  padding: 0 2.4rem;
}

.gh-article-image picture,
.gh-article-image img {
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: cover;
}

/* Prose content */
.gh-content {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  line-height: 1.8;
  color: #333;
}

.gh-content h2 { font-size: 2.8rem; margin-top: 4.0rem; font-family: var(--font-sans); }
.gh-content h3 { font-size: 2.4rem; margin-top: 3.2rem; font-family: var(--font-sans); }
.gh-content blockquote {
  margin: 2.4rem 0;
  padding: 0 2.4rem;
  border-left: 3px solid var(--color-darkgrey);
  font-style: italic;
  color: var(--color-midgrey);
}
.gh-content pre {
  background: var(--color-lightgrey);
  padding: 1.6rem;
  overflow-x: auto;
  font-size: 1.4rem;
}
.gh-content code {
  background: var(--color-lightgrey);
  padding: 0.2rem 0.4rem;
  font-size: 1.4rem;
}
.gh-content pre code { background: none; padding: 0; }
.gh-content ul, .gh-content ol { padding-left: 2.4rem; margin-bottom: 1.6rem; }
.gh-content li { margin-bottom: 0.4rem; }
.gh-content figure { margin: 2.4rem 0; }
.gh-content figcaption { font-size: 1.4rem; color: var(--color-midgrey); text-align: center; margin-top: 0.8rem; font-family: var(--font-sans); font-style: italic; }

@media (max-width: 600px) {
  .gh-article-title { font-size: 3.2rem; }
  .gh-content { font-size: 1.6rem; }
}