.blog-shell { padding-bottom:4.5rem; }

.blog-hero {
  padding:4.8rem 0 3.5rem;
  max-width:48rem;
}

.blog-hero .eyebrow { color:var(--gold-deep); font-size:.76rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.blog-hero h1 { margin:.55rem 0 1rem; font-size:clamp(3.2rem,6.5vw,6.2rem); line-height:.95; }
.blog-hero > p:last-child { max-width:41rem; color:var(--muted); font-size:1.08rem; }

.blog-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(14rem,19rem); gap:clamp(2.5rem,6vw,7rem); align-items:start; }
.blog-feed { min-width:0; }

.blog-post {
  display:grid;
  grid-template-columns:minmax(16rem,39%) minmax(0,1fr);
  gap:clamp(1.6rem,3.6vw,3.5rem);
  align-items:center;
  padding:0 0 2.3rem;
  margin-bottom:2.3rem;
  border-bottom:1px solid #ded7ce;
}

.blog-post-image { display:block; overflow:hidden; border-radius:8px; aspect-ratio:1.22; background:#eee9e2; }
.blog-post-image img { width:100%; height:100%; object-fit:cover; transition:transform .65s var(--ease); }
.blog-post:hover .blog-post-image img { transform:scale(1.035); }
.blog-post-copy { align-self:center; }
.blog-meta { display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin-bottom:.85rem; color:#777069; font-size:.77rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.blog-meta span { color:var(--gold-deep); }
.blog-post h2 { margin-bottom:.85rem; font-size:clamp(1.65rem,2.4vw,2.55rem); line-height:1.08; }
.blog-post h2 a { transition:color .2s var(--ease); }
.blog-post h2 a:hover { color:var(--gold-deep); }
.blog-post-copy > p:not(.blog-meta), .blog-more { color:var(--muted); font-size:1rem; line-height:1.65; }
.blog-more { margin-top:.75rem; }
.blog-read-more { display:inline-flex; align-items:center; gap:.65rem; margin-top:1.25rem; padding:.25rem 0 .4rem; border:0; border-bottom:1px solid #171717; background:transparent; font-weight:700; }
.blog-read-more .ph { transition:transform .25s var(--ease); }
.blog-read-more:hover .ph { transform:translateX(.25rem); }

.blog-sidebar { position:sticky; top:7.2rem; padding-top:.2rem; }
.blog-sidebar h2 { padding-bottom:1.1rem; border-bottom:1px solid #ded7ce; font-family:'DM Sans',sans-serif; font-size:1.08rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.blog-sidebar nav { display:grid; }
.blog-sidebar button { display:flex; justify-content:space-between; gap:1rem; width:100%; padding:1.1rem .25rem; border:0; border-bottom:1px solid #ded7ce; background:transparent; color:var(--muted); text-align:left; transition:color .2s var(--ease),padding-left .2s var(--ease); }
.blog-sidebar button:hover, .blog-sidebar button.active { color:var(--gold-deep); padding-left:.6rem; }
.blog-sidebar button span:last-child { color:#8c857d; font-size:.85rem; }
.blog-sidebar a { display:flex; justify-content:space-between; gap:1rem; width:100%; padding:1.1rem .25rem; border-bottom:1px solid #ded7ce; color:var(--muted); transition:color .2s var(--ease),padding-left .2s var(--ease); }
.blog-sidebar a:hover, .blog-sidebar a.active { color:var(--gold-deep); padding-left:.6rem; }
.blog-sidebar a span:last-child { color:#8c857d; font-size:.85rem; }
.blog-empty { padding:3rem; border:1px solid #ded7ce; border-radius:8px; color:var(--muted); text-align:center; }

.article-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(14rem,19rem); gap:clamp(2.5rem,6vw,7rem); align-items:start; padding-top:2.5rem; }
.article-content { min-width:0; }
.article-hero-image { width:100%; max-height:38rem; aspect-ratio:2.2; object-fit:cover; border-radius:8px; background:#eee9e2; }
.article-header { padding:2.5rem 0 2rem; border-bottom:1px solid #ded7ce; }
.article-header h1 { max-width:58rem; font-size:clamp(2.4rem,4.5vw,4.7rem); line-height:1.02; text-wrap:balance; }
.article-body { max-width:48rem; padding:2.4rem 0 1rem; }
.article-body p { margin-bottom:1.4rem; color:var(--muted); font-size:1.05rem; line-height:1.8; }
.article-body .article-lead { color:#24201c; font-size:1.24rem; line-height:1.65; }
.article-body h2 { margin:2.6rem 0 1rem; font-size:clamp(1.8rem,3vw,2.65rem); }
.article-body blockquote { margin:2.6rem 0; padding:.4rem 0 .4rem 1.7rem; border-left:3px solid var(--gold); color:#3d3023; font-family:var(--serif); font-size:1.55rem; line-height:1.45; }
.article-back { display:inline-flex; align-items:center; gap:.65rem; margin-top:1.5rem; padding-bottom:.35rem; border-bottom:1px solid currentColor; color:var(--gold-deep); font-weight:650; }
.article-back .ph { transition:transform .2s var(--ease); }
.article-back:hover .ph { transform:translateX(-.25rem); }

@media (max-width:900px) {
  .blog-hero { padding:3.5rem 0 2.5rem; }
  .blog-layout { grid-template-columns:1fr; }
  .article-layout { grid-template-columns:1fr; }
  .blog-sidebar { position:static; grid-row:1; }
  .article-sidebar { grid-row:auto; margin-top:2rem; }
  .blog-sidebar nav { grid-template-columns:repeat(3,1fr); gap:.5rem; }
  .blog-sidebar button { border:1px solid #ded7ce; border-radius:5px; padding:.8rem; }
  .blog-sidebar button:hover, .blog-sidebar button.active { padding-left:.8rem; border-color:var(--gold); background:#f6efe6; }
  .blog-sidebar a { border:1px solid #ded7ce; border-radius:5px; padding:.8rem; }
  .blog-sidebar a:hover, .blog-sidebar a.active { padding-left:.8rem; border-color:var(--gold); background:#f6efe6; }
}

@media (max-width:640px) {
  .blog-shell { padding-bottom:3rem; }
  .blog-hero h1 { font-size:3.25rem; }
  .blog-sidebar nav { grid-template-columns:1fr; }
  .blog-post { grid-template-columns:1fr; gap:1.25rem; }
  .blog-post-image { aspect-ratio:1.45; }
  .article-layout { padding-top:1.5rem; }
  .article-hero-image { aspect-ratio:1.35; }
  .article-header { padding:1.8rem 0 1.5rem; }
  .article-body { padding-top:1.8rem; }
}