.blog-page { max-width: 1440px; padding-top: var(--space-16); }
.blog-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-20); align-items: start; padding-bottom: var(--space-16); }
.blog-rail {
  --blog-rail-top: calc(var(--sticky-header-bottom, 88px) + var(--space-6));
  position: sticky;
  top: var(--blog-rail-top);
  max-height: calc(var(--visual-height, 100dvh) - var(--blog-rail-top) - var(--space-6));
  overflow-y: auto;
  min-width: 0;
}
.blog-brand { font-size: var(--font-size-9); line-height: 1.12; letter-spacing: -2px; font-weight: var(--font-weight-bold); margin: 0; }
.blog-brand span { color: var(--color-action-primary); }
.blog-intro { max-width: 230px; margin: var(--space-6) 0 var(--space-8); font-size: var(--font-size-3); line-height: var(--line-height-body); color: var(--color-text-secondary); }
.blog-topics { display: flex; flex-direction: column; gap: var(--space-2); }
.blog-topics a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--font-size-3); min-height: var(--touch-target-min); }
.blog-topics a span { font-family: var(--font-family-mono); font-size: var(--font-size-1); }
.blog-topics a[aria-current] { background: var(--color-action-soft); color: var(--color-action-primary); font-weight: var(--font-weight-semibold); }
.blog-topics a:hover { background: var(--color-bg-surface); color: var(--color-action-primary); }
.blog-search { margin-top: var(--space-8); }
.blog-search label { display: block; font-size: var(--font-size-1); color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.blog-search > div { display: flex; align-items: center; border: var(--surface-border); background: var(--color-bg-surface); border-radius: var(--radius-md); overflow: hidden; }
.blog-search input[type=search] { min-width: 0; width: 100%; padding: var(--space-3); min-height: var(--touch-target-min); font: inherit; font-size: var(--font-size-3); background: transparent; border: 0; }
.blog-search button { flex: 0 0 var(--touch-target-min); min-height: var(--touch-target-min); color: var(--color-action-primary); font-size: var(--font-size-6); }
.blog-library-link { display: inline-flex; align-items: center; min-height: var(--touch-target-min); margin-top: var(--space-8); font-size: var(--font-size-3); color: var(--color-text-secondary); }
.blog-feed, .blog-article { min-width: 0; }
.blog-feed-heading { display: flex; justify-content: space-between; align-items: end; gap: var(--space-4); padding-bottom: var(--space-6); border-bottom: var(--surface-border); }
.blog-feed-heading p { margin: 0 0 var(--space-3); font-size: var(--font-size-1); letter-spacing: .06em; color: var(--color-text-secondary); }
.blog-feed-heading h2 { margin: 0; font-size: var(--font-size-8); line-height: var(--line-height-heading); }
.blog-feed-heading > span { font-size: var(--font-size-1); white-space: nowrap; color: var(--color-text-secondary); padding-bottom: var(--space-1); }
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.blog-card { min-width: 0; border-bottom: var(--surface-border); }
.blog-card > a { display: flex; flex-direction: column; height: 100%; padding: var(--space-8) 0; }
.blog-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); font-size: var(--font-size-1); line-height: var(--line-height-ui); color: var(--color-text-secondary); }
.blog-meta > span { color: var(--color-action-primary); }
.blog-meta time { font-family: var(--font-family-mono); }
.blog-card :is(h2,h3) { font-size: var(--font-size-7); letter-spacing: -.4px; line-height: 1.5; margin: var(--space-5) 0 var(--space-3); text-wrap: pretty; }
.blog-card p { font-size: var(--font-size-3); color: var(--color-text-secondary); line-height: var(--line-height-body); margin: 0 0 var(--space-8); }
.blog-read { display: flex; align-items: center; justify-content: space-between; margin-top: auto; min-height: var(--touch-target-min); font-size: var(--font-size-3); }
.blog-read > span { font-size: var(--font-size-7); color: var(--color-action-primary); }
.blog-card a:hover :is(h2,h3) { color: var(--color-action-primary); }
.blog-query { font-size: var(--font-size-3); overflow-wrap: anywhere; }
.blog-empty { padding: var(--space-16) 0; }
.blog-empty h3 { font-size: var(--font-size-7); }
.blog-empty p { color: var(--color-text-secondary); line-height: var(--line-height-body); }
.blog-article { max-width: 820px; }
.blog-article > .permalink { margin: 0 0 var(--space-6); }
.blog-article h1 { font-size: var(--font-size-9); line-height: 1.35; letter-spacing: -1.2px; margin: var(--space-6) 0; text-wrap: pretty; }
.blog-deck { font-size: var(--font-size-5); line-height: var(--line-height-body); color: var(--color-text-secondary); }
.blog-byline { font-size: var(--font-size-3); margin: var(--space-6) 0 var(--space-8); }
.blog-contents { display: flex; flex-direction: column; align-items: start; padding: var(--space-6); border: var(--surface-border); border-radius: var(--radius-xl); background: var(--color-bg-surface); margin-bottom: var(--space-12); max-width: 700px; }
.blog-contents strong { font-size: var(--font-size-3); margin-bottom: var(--space-2); }
.blog-contents a { display: flex; align-items: center; min-height: var(--touch-target-min); font-size: var(--font-size-3); color: var(--color-text-secondary); line-height: var(--line-height-body); }
.blog-contents a:hover { color: var(--color-action-primary); }
.blog-reading { max-width: 700px; }
.blog-reading section { scroll-margin-top: var(--space-8); margin-bottom: var(--space-12); }
.blog-reading h2 { font-size: var(--font-size-7); line-height: 1.5; margin: 0 0 var(--space-4); }
.blog-reading p { font-size: var(--font-size-4); line-height: var(--line-height-reading); color: var(--color-text-tertiary); margin: var(--space-4) 0; }
.blog-article-end { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); border-top: var(--surface-border); padding-top: var(--space-6); font-size: var(--font-size-3); color: var(--color-text-secondary); }
.blog-more { margin-top: var(--space-12); }
.blog-more > h2 { font-size: var(--font-size-7); }
.blog-more .blog-card :is(h2,h3) { font-size: var(--font-size-6); }
@media (max-width: 1100px) { .blog-layout { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-10); } .blog-grid { grid-template-columns: 1fr; gap: 0; } }
@media (max-width: 980px) {
  .blog-page { padding-top: var(--space-8); }
  .blog-layout { grid-template-columns: 1fr; gap: var(--space-8); padding-bottom: var(--space-8); }
  .blog-rail { position: static; max-height: none; overflow: visible; }
  .blog-brand { font-size: var(--font-size-8); letter-spacing: -1px; }
  .blog-brand br { display: none; }
  .blog-brand span::before { content: ' '; }
  .blog-intro { max-width: none; margin: var(--space-3) 0 var(--space-5); }
  .blog-topics { flex-direction: row; overflow-x: auto; padding-bottom: var(--space-1); }
  .blog-topics a { flex-shrink: 0; gap: var(--space-3); white-space: nowrap; }
  .blog-search { margin-top: var(--space-4); max-width: 480px; }
  .blog-search input[type=search] { font-size: var(--font-size-4); }
  .blog-library-link { display: none; }
  .blog-feed-heading h2 { font-size: var(--font-size-7); }
  .blog-card :is(h2,h3) { font-size: var(--font-size-7); }
  .blog-article h1 { font-size: var(--font-size-8); letter-spacing: -.5px; }
  .blog-article, .blog-reading { max-width: 100%; }
  .blog-contents { padding: var(--space-5); }
}
.blog-byline { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.blog-byline > span { color: var(--color-text-secondary); }
.blog-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-8); }
.blog-share button { min-height: var(--touch-target-min); padding: var(--space-3) var(--space-4); border: var(--surface-border); border-radius: var(--radius-md); background: var(--color-bg-surface); font-size: var(--font-size-3); }
.blog-share button:hover { color: var(--color-action-primary); }
.blog-share [role=status] { color: var(--color-text-secondary); font-size: var(--font-size-1); }
.blog-share input { width: 100%; min-width: 0; min-height: var(--touch-target-min); font: inherit; padding: var(--space-3); border: var(--surface-border); border-radius: var(--radius-md); }
.blog-share [hidden] { display: none; }
.blog-figure { margin: var(--space-8) 0 var(--space-12); }
.blog-figure img { display: block; width: 100%; height: auto; border: var(--surface-border); border-radius: var(--media-radius); }
.blog-figure figcaption { color: var(--color-text-secondary); font-size: var(--font-size-1); line-height: var(--line-height-body); margin-top: var(--space-3); }
.blog-figure figcaption a, .blog-sources a { color: var(--color-action-primary); text-decoration: underline; text-underline-offset: 4px; }
.blog-card-cover { margin-bottom: var(--space-5); }
.blog-card-cover img { width: 100%; height: auto; border-radius: var(--media-radius); display: block; }
.blog-sources { padding: var(--space-6) 0; margin-bottom: var(--space-6); border-top: var(--surface-border); }
.blog-sources h2 { font-size: var(--font-size-7); }
.blog-sources ul { padding-left: var(--space-6); }
.blog-sources a { display: inline-block; padding: var(--space-3) 0; font-size: var(--font-size-3); overflow-wrap: anywhere; }
.blog-pagination { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: var(--space-8); font-size: var(--font-size-3); }
.blog-pagination a { display: inline-flex; align-items: center; min-height: var(--touch-target-min); padding: var(--space-3) var(--space-4); border: var(--surface-border); border-radius: var(--radius-md); background: var(--color-bg-surface); }

.blog-news-source { font-size: var(--font-size-1); color: var(--color-text-secondary); line-height: var(--line-height-body); overflow-wrap: anywhere; }
.blog-news-source a { color: var(--color-action-primary); text-decoration: underline; text-underline-offset: 4px; }