[data-editorial-page="blog"] .journal-heading { text-align: left; padding-top: 56px; padding-bottom: 36px; }
[data-editorial-page="blog"] .journal-breadcrumb { text-align: left; }
[data-editorial-page="blog"] .journal-heading h1, [data-editorial-page="blog"] .journal-lead { margin-inline: 0; }
[data-editorial-page="blog"] .journal-heading h1 { max-width: 22ch; font-size: 48px; }
.blog-list { padding-top: 8px; padding-bottom: 88px; }
.blog-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.blog-count { font-size: 12px; color: var(--muted); margin: 0 0 20px; }
.blog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px 24px; }
.blog-card { min-width: 0; background: color-mix(in srgb,var(--card) 92%,transparent); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 18px rgb(20 28 45 / 6%),0 1px 3px rgb(20 28 45 / 4%); transition: transform 200ms ease,border-color 200ms ease,box-shadow 200ms ease; }
[data-theme="dark"] .blog-card { box-shadow: 0 4px 18px rgb(0 0 0 / 24%); }
.blog-card:hover, .blog-card:focus-within { transform: translateY(-3px); border-color: var(--denim); box-shadow: 0 12px 32px rgb(35 51 72 / 9%); }
.blog-card-link { display: flex; flex-direction: column; height: 100%; color: var(--text); text-decoration: none; }
.blog-card-link:hover { color: var(--text); }
.blog-card-link:focus-visible { outline: 3px solid var(--denim); outline-offset: -3px; }
.blog-card-media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--band); }
.blog-card-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 350ms ease; }
.blog-card:hover .blog-card-media > img { transform: scale(1.025); }
.blog-category { position: absolute; bottom: 14px; left: 14px; z-index: 1; font-size: 10px; font-weight: 500; color: #fff; background: rgb(16 20 28 / 75%); backdrop-filter: blur(8px); padding: 5px 9px; border-radius: 4px; max-width: calc(100% - 28px); }
.blog-card-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(10 16 25 / 12%); opacity: 0; transition: opacity 200ms ease; }
.blog-card-overlay > span { padding: 11px 20px; background: rgb(255 255 255 / 95%); border-radius: 999px; color: #17191d; font-size: 12px; font-weight: 500; }
.blog-card:hover .blog-card-overlay, .blog-card:focus-within .blog-card-overlay { opacity: 1; }
.blog-card-copy { padding: 24px 22px; flex: 1; }
.blog-card h2 { font-size: 18px; font-weight: 600; line-height: 1.5; margin: 0; text-wrap: pretty; }
.blog-card-copy p { font-size: 13px; color: var(--muted); line-height: 1.8; margin: 14px 0 0; }
.blog-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; font-size: 10px; color: var(--muted); border-top: 1px solid var(--line); margin: 0 22px; padding: 16px 0 20px; }
.blog-author { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--text); }
.blog-author img { object-fit: contain; flex-shrink: 0; }
.blog-read-time { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.blog-read-time svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.6; flex-shrink: 0; }
.blog-touch-read { display: none; }
.blog-article-heading { text-align: left; max-width: 1120px; }
.blog-article-heading h1 { font-size: 48px; max-width: 27ch; }
.blog-article-meta { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; color: var(--muted); font-size: 12px; margin-top: 28px; }
.blog-article-cover { max-width: 1120px; margin: 0 auto; }
.blog-article-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: contain; border-radius: 6px; }
.blog-article-cover figcaption { color: var(--muted); font-size: 11px; margin-top: 12px; }
.blog-reading-layout { display: grid; grid-template-columns: 240px minmax(0,760px); gap: 64px; padding-block: 64px 80px; justify-content: center; }
.blog-toc { align-self: start; position: sticky; top: 104px; font-size: 12px; }
.blog-toc > p { font-weight: 500; margin: 0 0 16px; }
.blog-toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--line); }
.blog-toc li { margin-bottom: 16px; padding-left: 16px; }
.blog-toc a { color: var(--muted); text-decoration: none; line-height: 1.7; }
.blog-toc a:hover { color: var(--text); }
.blog-toc a:focus-visible { outline: 2px solid var(--denim); outline-offset: 4px; }
.blog-reading-body section { scroll-margin-top: 106px; }
.blog-reading-body section + section { margin-top: 44px; }
.blog-reading-body h2 { font-size: 18px; font-weight: 600; line-height: 1.6; margin: 0; }
.blog-reading-body p, .blog-reading-body li { font-size: 15px; line-height: 1.95; color: var(--muted); }
.blog-reading-body p { margin: 18px 0 0; }
.blog-reading-body ul { padding-left: 22px; margin-top: 20px; }
.blog-reading-body li + li { margin-top: 10px; }
.blog-reading-body > .journal-link { padding-top: 28px; border-top: 1px solid var(--line); margin-top: 40px; width: 100%; }
.blog-related { padding-bottom: 80px; }
.blog-related > h2 { font-size: 18px; font-weight: 500; margin: 0 0 24px; }
.blog-related-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; max-width: 900px; }
@media(max-width:1023px) { .blog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .blog-reading-layout { grid-template-columns: 180px minmax(0,1fr); gap: 32px; } .blog-article-heading h1 { font-size: 40px; } }
@media(max-width:767px) {
  .blog-grid, .blog-related-grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .blog-card h2, .blog-reading-body h2, .blog-related > h2 { font-size: 16px; }
  .blog-card-copy { padding: 22px 20px; }
  .blog-card-meta { margin-inline: 20px; }
  .blog-article-heading h1 { font-size: 36px; }
  .blog-reading-layout { display: block; padding-block: 40px 56px; }
  .blog-toc { position: static; margin-bottom: 36px; }
  .blog-reading-body p, .blog-reading-body li { font-size: 14px; }
  .blog-touch-read { display: block; padding: 0 20px 22px; font-size: 12px; font-weight: 500; }
  .blog-list, .blog-related { padding-bottom: 56px; }
  .blog-list { padding-top: 0; }
  [data-editorial-page="blog"] .journal-heading { padding-top: 36px; padding-bottom: 28px; }
  [data-editorial-page="blog"] .journal-heading h1 { font-size: 36px; }
}
@media(hover:none) { .blog-touch-read { display: block; padding: 0 22px 20px; font-size: 12px; font-weight: 500; } .blog-card-overlay { display: none; } }
@media(max-width:359px) { .blog-article-heading h1 { font-size: 32px; } }
@media(prefers-reduced-motion:reduce) { .blog-card, .blog-card-overlay, .blog-card-media > img { transition: none; } .blog-card:hover, .blog-card:focus-within, .blog-card:hover .blog-card-media > img { transform: none; } }
/* Imported long-form articles: h3/h4, ordered lists, links, emphasis */
.blog-reading-body h3 { font-size: 16px; font-weight: 600; line-height: 1.6; margin: 30px 0 0; color: var(--text); }
.blog-reading-body h4 { font-size: 15px; font-weight: 600; line-height: 1.6; margin: 24px 0 0; color: var(--text); }
.blog-reading-body h2 + h3 { margin-top: 20px; }
.blog-reading-body ol { padding-left: 24px; margin-top: 20px; }
.blog-reading-body ul ul, .blog-reading-body ol ol { margin-top: 10px; }
.blog-reading-body li p { margin: 0; }
.blog-reading-body strong, .blog-reading-body b { color: var(--text); font-weight: 600; }
.blog-reading-body a:not(.journal-link) { color: var(--denim); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.blog-reading-body blockquote { margin: 24px 0 0; padding-left: 18px; border-left: 2px solid var(--line); }
.blog-reading-body img { max-width: 100%; height: auto; border-radius: 12px; margin-top: 18px; }
.blog-reading-body table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px; display: block; overflow-x: auto; }
.blog-reading-body th, .blog-reading-body td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.blog-reading-body, .blog-reading-body p, .blog-reading-body li { overflow-wrap: break-word; min-width: 0; }