/* Blog article layout: a single comfortable reading column with a sticky aside on wide screens. */

.article-wrap {
  display: grid;
  gap: var(--sp-7);
}

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-5);
  color: var(--c-light);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.byline time {
  color: var(--c-brass);
}

.prose {
  max-width: var(--measure);
  color: var(--c-dark);
}

.prose > * + * {
  margin-top: var(--sp-5);
}

.prose h2 {
  margin-top: var(--sp-7);
  color: var(--c-dark);
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
}

.prose h2::after {
  content: "";
  display: block;
  width: 3rem;
  height: 0.3rem;
  margin-top: var(--sp-3);
  background: var(--c-brass);
}

.prose h3 {
  margin-top: var(--sp-6);
  color: var(--c-dark);
}

.prose p,
.prose li {
  color: var(--c-dark);
}

.prose ul,
.prose ol {
  display: grid;
  gap: var(--sp-3);
  padding-left: 1.25rem;
}

.prose li::marker {
  color: var(--c-cta);
}

.prose .callout {
  padding: var(--sp-5);
  background: var(--c-white);
  border-left: 4px solid var(--c-cta);
}

.article-aside {
  align-self: start;
}

.aside-card {
  padding: var(--sp-6) var(--sp-5);
  background: var(--c-dark);
  color: var(--c-light);
  border-top: 4px solid var(--c-cta);
}

.aside-card h2 {
  color: var(--c-white);
  font-size: var(--fs-h3);
}

.aside-card p {
  margin-top: var(--sp-3);
  color: var(--c-light);
}

.aside-card .btn {
  width: 100%;
  margin-top: var(--sp-5);
}

.aside-card .tile-grid {
  margin-top: var(--sp-5);
}

@media (width >= 64rem) {
  .article-wrap {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: clamp(3rem, 6vw, 6rem);
  }

  .article-aside {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}