/* Editorial pages use the sales site's navigation, type, spacing and colors. */
body.site-blog {
  --ink: #1b2944;
  --muted: #607089;
  --line: #d5deea;
  --lime: #f4d447;
  --paper: #f5f8fc;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 "Practical Inter", Inter, Arial, sans-serif;
  letter-spacing: 0;
}
.site-blog .site-header .brand-lockup { width: 185px; }
.site-blog .site-footer .brand-lockup { width: 165px; }
.site-blog .article-listing,
.site-blog .article-main { background: radial-gradient(circle at 90% 2%, rgba(221,232,243,.75), transparent 38%), var(--paper); }
.site-blog .article-listing { padding: 60px 0 96px; }
.site-blog .article-main { padding: 40px 0 96px; }
.site-blog .breadcrumbs { color: #677790; font-size: 12px; font-weight: 600; }
.site-blog .breadcrumbs a:hover { color: var(--ink); }
.site-blog .listing-heading { margin: 32px 0 38px; }
.site-blog .listing-heading h1,
.site-blog .article-heading h1 {
  color: var(--ink);
  letter-spacing: -.045em;
  line-height: 1.05;
}
.site-blog .listing-heading h1 { max-width: 860px; font-size: clamp(42px, 5.5vw, 72px); }
.site-blog .article-heading h1 { max-width: 880px; font-size: clamp(42px, 5.5vw, 68px); }
.site-blog .listing-heading p,
.site-blog .article-summary { color: #607089; }
.site-blog .article-eyebrow,
.site-blog .blog-list-label { color: #806b07; }
.site-blog .blog-list { gap: 16px; }
.site-blog .blog-list-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  box-shadow: inset 0 1px 0 #fff, 0 16px 38px rgba(35,55,83,.07);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.site-blog .blog-list-card:hover { box-shadow: inset 0 1px 0 #fff, 0 20px 42px rgba(35,55,83,.13); }
.site-blog .blog-list-card img {
  flex: none;
  width: 104px;
  height: 104px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
}
.site-blog .blog-list-copy { padding: 19px 0 0; }
.site-blog .blog-list-card h2 { margin: 10px 0 12px; font-size: clamp(22px, 2vw, 27px); letter-spacing: -.035em; }
.site-blog .blog-list-card p { color: #607089; }
.site-blog .blog-list-link { color: var(--ink); }
.site-blog .article-heading { max-width: 880px; padding: 34px 0 18px; }
.site-blog .article-meta { color: #667790; }
.site-blog .article-cover {
  max-width: 760px;
  margin: 12px auto 34px;
  border-radius: 15px;
  box-shadow: 0 14px 34px rgba(35,55,83,.11);
}
.site-blog .article-cover img { width: 100%; height: 260px; max-height: none; aspect-ratio: auto; object-fit: cover; }
.site-blog .article-body { color: #293550; }
.site-blog .article-body h2 { letter-spacing: -.035em; }
.site-blog .article-body li::marker { color: #a18a1e; }
.site-blog .article-body a,
.site-blog .related-guides a { color: #264466; text-decoration-color: #bda43e; }
.site-blog .flow-diagram {
  border-left-color: #dfbe39;
  border-radius: 12px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 12px 32px rgba(35,55,83,.07);
}
.site-blog .article-end {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  background: #1b2944;
}
.site-blog .article-end a { color: #f4d447; }

/* The older personal essay keeps its text layout and receives the same chrome. */
body.personal-article.site-blog { --bg: #f5f8fc; --ink: #1b2944; --muted: #607089; --soft: #72829a; --lime: #f4d447; }
.personal-article.site-blog .site-header .wrap,
.personal-article.site-blog .site-footer .wrap { width: min(1180px, calc(100% - 48px)); }
.personal-article.site-blog .site-header .nav { min-height: 77px; background: transparent; border: 0; box-shadow: none; }
.personal-article.site-blog .site-header .nav-links { display: flex; margin-left: auto; gap: 27px; }
.personal-article.site-blog .site-header .nav-links a { color: #dce4ee; font-size: 13px; font-weight: 600; }
.personal-article.site-blog .site-header .nav-links a:hover,
.personal-article.site-blog .site-header .nav-links a[aria-current="page"] { color: #f4d447; }
.personal-article.site-blog .site-header .nav-end .button { color: #1b2944; }
.personal-article.site-blog .site-header .lang-switch { color: #fff; }
.personal-article.site-blog .site-footer { margin-top: 0; }
.personal-article.site-blog .cta { background: #1b2944; border-radius: 18px; }
.personal-article.site-blog .cta .btn { background: rgba(244,212,71,.84); border-color: rgba(244,212,71,.84); color: #1b2944; }
.personal-article.site-blog .cta .btn.secondary { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }

@media (max-width: 1060px) {
  .personal-article.site-blog .site-header .nav-links { gap: 14px; }
}
@media (max-width: 800px) {
  .site-blog .blog-list { grid-template-columns: 1fr; }
  .site-blog .blog-list-card { display: flex; }
  .site-blog .blog-list-card img { width: 104px; height: 104px; aspect-ratio: 1; }
  .site-blog .blog-list-copy { padding-top: 15px; }
}
@media (max-width: 760px) {
  .site-blog .article-listing { padding: 42px 0 72px; }
  .site-blog .article-main { padding: 28px 0 72px; }
  .site-blog .article-cover img { height: 190px; aspect-ratio: auto; }
  .personal-article.site-blog .site-header .wrap,
  .personal-article.site-blog .site-footer .wrap { width: min(100% - 34px, 560px); }
  .personal-article.site-blog .site-header .nav { min-height: 68px; flex-wrap: wrap; padding-top: 10px; }
  .personal-article.site-blog .site-header .nav-links {
    display: flex;
    order: 3;
    width: 100%;
    overflow-x: auto;
    margin-left: 0;
    gap: 21px;
    padding: 0 0 10px;
    scrollbar-width: none;
  }
  .personal-article.site-blog .site-header .nav-end { margin-left: auto; }
}
@media (max-width: 640px) {
  .personal-article.site-blog .site-header .nav-links a:not(.btn) { display: inline; }
}