/* Blog — Layout primitives.
   Shared wrapper, container, and 2-col grid used by archive / single /
   search views. The container offsets the fixed header height; the grid
   collapses to a single column under 1024px (sidebar drops out of view). */

/* Force the fixed site header opaque on blog views. The global header is
   transparent by default (only opaque after scroll via .scrolled) — that's
   intentional on the home page where the hero blob sits behind it, but on
   blog pages the H1 ends up visible through the transparent header at
   scroll=0, making the title look like it's floating in the nav bar.
   layout.css is enqueued only for blog views, so this override is scoped. */
#hdr{
  background:var(--cream);
  box-shadow:0 1px 0 var(--line);
}

/* Page background is cream (matches the .pillars / .process bands on home)
   so the paper-tinted cards (post cards, sidebar panels, share card,
   article card) stand out clearly instead of blending into a single tone. */
.pr-blog-archive,
.pr-blog-single{
  padding:180px 0 96px;
  background:var(--cream);
}

.pr-blog-archive__container,
.pr-blog-single__container{
  max-width:1320px;
  margin:0 auto;
  padding:0 24px;
}

/* Two-column layout: main content + sticky sidebar on ≥1024px. */
.pr-blog-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:36px;
  margin-bottom:48px;
}

@media(min-width:1024px){
  .pr-blog-layout{
    grid-template-columns:minmax(0,1fr) 320px;
    align-items:start;
  }
}

.pr-blog-layout__main{min-width:0}

/* Single uses a narrower container — editorial reading width. */
.pr-blog-single .pr-blog-archive__container,
.pr-blog-single__container{max-width:1180px}

/* Responsive paddings. */
@media(max-width:768px){
  .pr-blog-archive,
  .pr-blog-single{padding:140px 0 64px}
  .pr-blog-archive__container,
  .pr-blog-single__container{padding:0 18px}
}
@media(max-width:480px){
  .pr-blog-archive,
  .pr-blog-single{padding:128px 0 56px}
  .pr-blog-archive__container,
  .pr-blog-single__container{padding:0 14px}
}