/* Blog composition: an editorial feed and data-backed widgets, on shared brand tokens. */
.blog-head{ padding-bottom: var(--block-gap); }
.blog-head .portal-breadcrumbs{ margin-bottom: var(--block-gap); }
.blog-masthead{ display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: end; gap: var(--section-content-gap); }
.blog-head h1{ font-size: clamp(38px, 4.7vw, 64px); line-height: 1.1; margin-top: var(--item-gap); }
.blog-head p.portal-intro{ font-size: 17px; line-height: 1.65; }
.blog-layout{ display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: var(--section-content-gap); align-items: start; }
.blog-toolbar{ grid-column: 1; grid-row: 1; min-width: 0; }
.blog-main{ grid-column: 1; grid-row: 2; min-width: 0; }
.blog-sidebar{ grid-column: 2; grid-row: 2; min-width: 0; }
.blog-results{ min-height: 0; padding: 0 0 var(--group-gap); }
.blog-results h2{ color: var(--paper); font: 400 12px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.blog-results h2 span{ display: inline-grid; place-items: center; min-width: 28px; height: 28px; color: var(--teal); border: 1px solid var(--stroke); border-radius: 50%; }
.blog-feed{ display: flex; flex-direction: column; gap: var(--group-gap); }
.blog-post{ padding: var(--card-padding); }
.blog-post-meta{ display: flex; flex-wrap: wrap; gap: var(--text-gap); color: var(--soft); font: 400 12px/1.6 var(--mono); }
.blog-post-meta time{ color: var(--gold); }
.blog-post h3{ margin-top: var(--item-gap); font-size: clamp(25px, 2.35vw, 34px); line-height: 1.22; letter-spacing: -.025em; }
.blog-post .portal-card-summary{ margin-top: var(--item-gap); margin-bottom: var(--group-gap); max-width: 65ch; }
.blog-post .portal-tags a{ color: var(--soft); border-color: var(--stroke); font-size: 11px; }
.blog-post .portal-tags a:hover{ color: var(--teal); border-color: var(--teal); }
.blog-post-bottom{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--item-gap); margin-top: var(--group-gap); padding-top: var(--item-gap); border-top: 1px solid var(--hairline); }
.blog-read{ display: inline-flex; align-items: center; gap: var(--item-gap); min-height: var(--control-height-compact); color: var(--teal); font-size: 14px; }
.blog-read svg{ width: 36px; height: 36px; padding: var(--inline-gap); border: 1px solid var(--stroke); border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 1.5; transition: background var(--motion), color var(--motion); }
.blog-read:hover svg{ color: var(--ink); background: var(--teal); }
.blog-byline{ display: inline-flex; align-items: center; gap: var(--text-gap); font-size: 14px; }
.blog-byline img{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.blog-sidebar{ display: flex; flex-direction: column; gap: var(--group-gap); scroll-margin-top: var(--text-gap); }
.blog-widget{ padding: var(--card-padding-compact); border: 1px solid var(--stroke); border-radius: var(--radius); background: var(--card); }
.blog-widget h2{ display: flex; align-items: center; gap: var(--text-gap); margin-bottom: var(--group-gap); color: var(--paper); font: 400 18px/1.35 var(--display); letter-spacing: -.015em; }
.blog-widget h2::before{ content: ''; width: 6px; height: 6px; flex: none; background: var(--teal); }
.blog-search form{ display: flex; flex-direction: column; gap: var(--item-gap); }
.blog-search .btn{ justify-content: space-between; width: 100%; }
.blog-search .portal-filter label{ font-size: 10px; }
.blog-categories li + li,.blog-recent li + li{ border-top: 1px solid var(--hairline); }
.blog-categories a{ display: flex; align-items: center; justify-content: space-between; gap: var(--item-gap); min-height: var(--control-height-compact); padding-block: var(--inline-gap); color: var(--soft); font-size: 14px; line-height: 1.45; }
.blog-categories a:hover,.blog-categories a[aria-current],.blog-byline:hover{ color: var(--teal); }
.blog-count{ min-width: 24px; text-align: right; flex: none; color: var(--gold); font: 400 11px/1.5 var(--mono); }
.blog-recent a{ display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--text-gap); padding-block: var(--item-gap); }
.blog-recent li:first-child a{ padding-top: 0; }
.blog-recent li:last-child a{ padding-bottom: 0; }
.blog-recent-number{ color: var(--gold); font: 400 11px/1.7 var(--mono); }
.blog-recent time{ display: block; margin-bottom: var(--inline-gap); color: var(--muted); font: 400 10px/1.5 var(--mono); }
.blog-recent-title{ font-size: 14px; line-height: 1.5; }
.blog-recent a:hover .blog-recent-title{ color: var(--teal); }
.blog-active-filters{ display: flex; flex-wrap: wrap; gap: var(--inline-gap); margin-bottom: var(--group-gap); color: var(--soft); font-size: 13px; }
.blog-active-filters span{ padding: var(--inline-gap) var(--text-gap); background: var(--navy-2); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.blog-widget-jump,.blog-back-to-feed{ display: none; }
.blog-pagination{ gap: var(--item-gap); }
@media (max-width: 1000px){
  .blog-layout{ grid-template-columns: minmax(0, 1fr) 290px; column-gap: var(--group-gap); }
  .blog-masthead{ grid-template-columns: 1fr; gap: var(--item-gap); }
  .blog-head p.portal-intro{ max-width: 65ch; }
  .blog-pagination{ display: flex; flex-wrap: wrap; justify-content: space-between; }
  .blog-pagination > p{ width: 100%; order: -1; text-align: left; }
}
@media (max-width: 760px){
  .blog-layout{ display: block; }
  .blog-sidebar{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; margin-top: var(--feature-gap); }
  .blog-widget-jump{ display: inline-flex; gap: var(--inline-gap); align-items: center; min-height: var(--control-height-compact); color: var(--teal); font-size: 13px; }
  .blog-back-to-feed{ display: inline-flex; }
}
@media (max-width: 540px){
  .blog-sidebar{ display: flex; align-items: stretch; }
  .blog-head h1{ font-size: 38px; }
  .blog-head p.portal-intro{ font-size: 16px; }
  .blog-results{ gap: var(--inline-gap); }
  .blog-post h3{ font-size: 25px; }
  .blog-post .portal-card-summary{ font-size: 15px; }
}

/* Single posts share the blog's reading column and sidebar. */
.blog-single{ padding-top: calc(var(--header) + var(--block-gap)); }
.blog-single-navigation{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--item-gap); margin-bottom: var(--block-gap); }
.blog-single-navigation .portal-breadcrumbs{ margin-bottom: 0; }
.blog-single-main{ min-width: 0; }
.blog-single-layout > .blog-sidebar{ grid-row: 1; }
.blog-article{ padding: var(--card-padding); background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius); }
.blog-article-header .eyebrow{ max-width: 100%; font-size: 11px; line-height: 1.6; }
.blog-article-header .eyebrow::before{ flex: none; }
.blog-article-header h1{ margin-top: var(--item-gap); font: 400 clamp(30px, 3.2vw, 42px)/1.17 var(--display); letter-spacing: -.03em; overflow-wrap: break-word; text-wrap: pretty; }
.blog-article-summary{ margin-top: var(--group-gap); color: var(--soft); font-size: 18px; line-height: 1.7; }
.blog-article-meta{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--text-gap) var(--group-gap); margin-block: var(--group-gap) var(--block-gap); padding-block: var(--item-gap); border-block: 1px solid var(--stroke); }
.blog-article-meta .article-byline,.blog-article-meta .portal-meta{ margin: 0; }
.blog-article-meta time{ color: var(--gold); }
.blog-article-toc{ margin-bottom: var(--block-gap); padding: var(--card-padding-compact); background: var(--navy); border: 1px solid var(--stroke); border-radius: var(--radius-sm); }
.blog-article-toc h2{ margin-bottom: var(--item-gap); }
.blog-article-toc ol{ gap: var(--inline-gap); counter-reset: article-section; }
.blog-article-toc li{ counter-increment: article-section; }
.blog-article-toc a{ display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--text-gap); padding-block: var(--detail-gap); }
.blog-article-toc a::before{ content: counter(article-section, decimal-leading-zero); color: var(--gold); font: 400 10px/2.2 var(--mono); }
.blog-article-prose{ font-size: 18px; line-height: 1.85; }
.blog-article-prose h2{ font-size: clamp(26px, 2.35vw, 32px); }
.blog-article-prose h3{ font-size: 23px; }
.blog-article-prose img{ height: auto; }
.blog-article-prose figcaption{ margin-top: var(--text-gap); color: var(--soft); font-size: 14px; line-height: 1.65; }
.blog-article-prose figcaption small{ font-size: inherit; }
.blog-article .portal-sources{ padding: var(--card-padding-compact); }
.blog-related{ margin-top: var(--section-content-gap); padding: var(--card-padding); border: 1px solid var(--stroke); border-radius: var(--radius); background: var(--card); }
.blog-related .portal-section-head{ margin-bottom: var(--group-gap); gap: var(--item-gap); }
.blog-related h2{ font: 400 24px/1.3 var(--display); letter-spacing: -.02em; }
.blog-related-list li{ padding-block: var(--group-gap); border-top: 1px solid var(--stroke); }
.blog-related-list li:last-child{ padding-bottom: 0; }
.blog-related-list time{ color: var(--gold); font: 400 11px/1.6 var(--mono); }
.blog-related-list h3{ margin-top: var(--inline-gap); font: 400 22px/1.35 var(--display); letter-spacing: -.015em; }
.blog-related-list a:hover{ color: var(--teal); }
@media (max-width: 1000px) and (min-width: 761px){
  .blog-single-layout{ grid-template-columns: minmax(0, 1fr) 260px; }
}
@media (max-width: 760px){
  .blog-single{ padding-top: calc(var(--header) + var(--group-gap)); }
  .blog-single-navigation{ gap: var(--text-gap); margin-bottom: var(--item-gap); }
  .blog-article-header h1{ font-size: clamp(28px, 5.2vw, 36px); }
  .blog-article-summary,.blog-article-prose{ font-size: 17px; }
}
@media (max-width: 380px){
  .blog-article,.blog-related{ padding: var(--card-padding-dense); }
  .blog-article-header h1{ font-size: 27px; }
  .blog-article-header .eyebrow{ letter-spacing: .06em; }
  .blog-article-toc,.blog-article .portal-sources{ padding: var(--card-padding-dense); }
}