.blog-shell {
  width: min(1140px, calc(100vw - 32px));
  margin-left: calc(50% - min(570px, 50vw - 16px));
}

.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 36px;
  align-items: start;
}

.blog-main .about-kicker { margin-bottom: 8px; }
.blog-main > h2 { margin-top: 0; }
.blog-lead { margin: 0 0 22px; max-width: 62ch; }

.blog-main .blog-card { margin: 0 0 22px; }
.blog-main .blog-card h3 { margin: 0; }
.blog-main .blog-card h3 a { color: inherit; text-decoration: none; }
.blog-main .blog-card h3 a:hover { text-decoration: underline; }
.blog-main a.card-media { display: block; color: inherit; text-decoration: none; }
a.badge { text-decoration: none; color: #173038; }
.blog-main .blog-feature { margin: 0 0 18px; }

.blog-article .journal-body { max-width: 68ch; }
.blog-article .journal-body h2 {
  margin: 1.35em 0 0.4em;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #10283f;
}
.blog-article .journal-body p,
.blog-article .journal-body li { line-height: 1.65; }
.blog-article .journal-body ul { margin: 0 0 1em 1.15em; }
.blog-article .journal-body a { color: #10283f; }

.blog-side { position: sticky; top: 92px; }
.blog-widget {
  margin: 0 0 16px;
  padding: 18px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(16, 40, 63, 0.06);
}
.blog-widget h2 {
  margin: 0 0 12px;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.28rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #10283f;
}
.blog-search { display: flex; gap: 8px; }
.blog-search input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid #d5dbe0;
  border-radius: 999px;
  font: inherit;
}
.blog-search button {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  background: #10283f;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.blog-search button:hover { background: #000; }

.blog-recent,
.blog-cats { list-style: none; margin: 0; padding: 0; }
.blog-recent li + li { margin-top: 12px; }
.blog-recent a {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 10px;
  align-items: center;
  color: #173038;
  text-decoration: none;
}
.blog-recent a.is-on span,
.blog-recent a:hover span { text-decoration: underline; }
.blog-thumb {
  width: 84px;
  height: 52px;
  object-fit: cover;
  border-radius: 10px;
  background: #10283f;
  display: block;
}
.blog-thumb.is-blank { background: linear-gradient(160deg, #efeae2 0%, #d9d2c6 100%); }

.blog-cats li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid #e6eaed;
}
.blog-cats a { color: #173038; text-decoration: none; }
.blog-cats a.is-on,
.blog-cats a:hover { color: #90783d; }
.blog-cats span { color: #8a9398; }

.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.blog-tags a {
  padding: 4px 10px;
  border-radius: 999px;
  background: #f2f4f5;
  color: #4e595f;
  font-size: 0.78rem;
  text-decoration: none;
}
.blog-tags a.is-on,
.blog-tags a:hover { background: #10283f; color: #fff; }

.blog-empty { color: #5c676e; }

@media (max-width: 900px) {
  .blog-shell { width: 100%; margin-left: 0; }
  .blog-layout { grid-template-columns: 1fr; }
  .blog-side { position: static; }
}