/* ────────── BLOG ARCHIVE ────────── */
.archive-hero-wrap{ padding:8px 40px 0; max-width:1440px; margin:0 auto; }
.archive-hero{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:0;
  border-radius:12px; overflow:hidden;
  background:var(--surface); border:1px solid var(--hairline);
}
.archive-hero .left{
  background:var(--nav); color:#fff;
  padding:64px 56px; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:340px;
  position:relative; isolation:isolate; overflow:hidden;
  background-repeat:no-repeat; background-position:center; background-size:cover;
}
/* Gradient overlay sits above the photo and below the text. The photo itself
   is set on .left via an inline `background-image:url(...)` style emitted by
   home.php using the Articles page's Featured Image — keeps the source of
   truth in /wp-admin/. With no image set, the solid var(--nav) shows through. */
.archive-hero .left::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(170deg, rgba(26,31,36,.65) 0%, rgba(26,31,36,.5) 40%, rgba(26,31,36,.85) 100%);
}
.archive-hero .left .eyebrow{
  font-weight:600; font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:14px;
}
.archive-hero h1{
  color:#fff; font-family:var(--f); font-weight:600;
  font-size:clamp(2rem,3.4vw,2.75rem); line-height:1.05;
  letter-spacing:-.02em; max-width:14ch;
}
.archive-hero .right{
  padding:56px 56px;
  display:flex; flex-direction:column; gap:18px; justify-content:center;
}
.archive-hero .right p{
  font-size:1rem; line-height:1.65; color:var(--body); font-weight:300;
}
.archive-hero .right p.lead{
  font-size:1.125rem; font-weight:400; line-height:1.5; color:var(--heading);
}
.archive-hero .right p a{
  color:var(--heading); text-decoration:underline; text-underline-offset:3px;
}

/* Article card */
.archive-grid{ padding:64px 40px 96px; max-width:1440px; margin:0 auto; }
.archive-band{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.acard{
  background:#fff; border:1px solid var(--hairline); border-radius:var(--r-xl);
  overflow:hidden; display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
  transition:transform .2s, box-shadow .2s, border-color .15s;
}
.acard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-product); border-color:var(--border); }
/* Fixed image area — equal height across every card (no masonry). */
.acard .thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--section-alt) }
.acard .thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s }
.acard:hover .thumb img{ transform:scale(1.03) }
.acard .body{
  padding:22px 24px 22px; display:flex; flex-direction:column; gap:10px; flex:1;
}
.acard .topic-tag{
  font-weight:600; font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
/* Clamp title + excerpt so varying lengths don't break row alignment. */
.acard .title{
  font-family:var(--f); font-weight:600; font-size:1rem;
  line-height:1.35; letter-spacing:-.005em; color:var(--heading); text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.acard .excerpt{
  font-size:.85rem; line-height:1.6; color:var(--body);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
/* Meta pinned to the bottom so cards line up regardless of body length. */
.acard .meta{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--hairline);
  display:flex; align-items:center; gap:8px;
  font-size:.78rem; color:var(--muted);
}
.acard .meta .read{ color:var(--heading); font-weight:500 }

/* Topic filter chips (blog archive) */
.topic-row{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  margin-bottom:32px;
}
.topic-row .label{ font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-right:6px }
.topic-chip{
  padding:8px 14px; border:1px solid var(--border); border-radius:999px;
  font-size:.82rem; font-weight:500; color:var(--heading); background:#fff;
  cursor:pointer; transition:background .12s, border-color .12s, color .12s;
}
.topic-chip:hover{ border-color:var(--heading) }
.topic-chip.is-active{ background:var(--nav); color:#fff; border-color:var(--nav) }

/* Topic filter (blog.js) — hidden cards + empty state. */
.acard.is-hidden{ display:none }
.archive-empty{ text-align:center; color:var(--muted); padding:56px 20px; font-size:.92rem }
.archive-empty .topic-chip{ display:inline; padding:0; border:0; background:none; color:var(--nav); font-weight:600; text-decoration:underline; cursor:pointer }
.archive-empty.is-hidden{ display:none }

@media (max-width:1100px){
  .archive-hero{ grid-template-columns:1fr }
  .archive-hero .left{ padding:48px 32px; min-height:260px }
  .archive-hero .right{ padding:40px 32px }
  .archive-band{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:700px){
  .archive-hero-wrap{ padding:6px 14px 0 }
  .archive-grid{ padding:48px 22px 64px }
  .archive-band{ grid-template-columns:1fr }
}

/* ────────── BLOG POST ────────── */
.post-hero-wrap{ padding:8px 40px 0; max-width:1440px; margin:0 auto; }
.post-hero{
  display:grid; grid-template-columns:1fr 1.15fr; gap:0;
  border-radius:12px; overflow:hidden;
  min-height:520px;
}
.post-hero .left{
  background:var(--nav); color:#fff;
  padding:64px 56px; display:flex; flex-direction:column; justify-content:flex-end;
}
.post-hero .left .eyebrow{
  font-weight:600; font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:18px;
}
.post-hero h1{
  color:#fff; font-family:var(--f); font-weight:600;
  font-size:clamp(1.875rem,3vw,2.5rem); line-height:1.1;
  letter-spacing:-.02em; max-width:22ch; text-wrap:balance;
}
.post-hero .byline{
  margin-top:32px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.15);
  display:flex; gap:24px; flex-wrap:wrap;
  color:rgba(255,255,255,.7); font-size:.86rem; font-weight:400;
}
.post-hero .byline .meta{ display:inline-flex; align-items:center; gap:8px; }
.post-hero .byline svg{ width:14px; height:14px; opacity:.7; stroke:currentColor; stroke-width:1.8; fill:none }
.post-hero .right{ background:#111; position:relative; overflow:hidden }
.post-hero .right img{ width:100%; height:100%; object-fit:cover; display:block }

/* Article body with TOC */
.post-body{ padding:80px 40px 96px; max-width:1280px; margin:0 auto; }
.post-grid{
  display:grid; grid-template-columns:280px 1fr; gap:80px; align-items:start;
}
.post-toc{
  position:sticky; top:24px; align-self:start;
  background:#fff; border:1px solid var(--hairline); border-radius:var(--r-xl);
  padding:24px 24px 22px;
}
.post-toc summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--f); font-weight:600; font-size:.92rem; color:var(--heading);
  padding-bottom:14px; border-bottom:1px solid var(--hairline);
  margin-bottom:14px;
}
.post-toc summary::-webkit-details-marker{ display:none }
.post-toc summary::after{
  content:""; width:10px; height:10px; flex:none;
  border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg); transition:transform .2s; margin-right:4px;
}
.post-toc[open] summary::after{ transform:rotate(-135deg); margin-top:5px }
.post-toc ol{ list-style:none; padding:0; counter-reset:toc; display:grid; gap:10px }
.post-toc ol li{ counter-increment:toc; }
.post-toc ol li a{
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start;
  font-size:.86rem; line-height:1.45; color:var(--body); font-weight:400;
  text-decoration:none; padding:4px 0;
  transition:color .12s;
}
.post-toc ol li a::before{
  content:counter(toc,decimal-leading-zero);
  font-variant-numeric:tabular-nums; font-size:.72rem;
  color:var(--muted); padding-top:2px; font-weight:500;
}
.post-toc ol li a:hover{ color:var(--heading) }
.post-toc ol li a.is-active{ color:var(--heading); font-weight:500 }

/* Article prose */
.post-prose{ max-width:680px; font-size:1.05rem; line-height:1.75; color:var(--body); font-weight:300 }
.post-prose > p:first-of-type::first-line{ font-weight:400; }
.post-prose p{ margin-bottom:22px; }
.post-prose h2{
  font-family:var(--f); font-weight:600;
  font-size:clamp(1.4rem,2vw,1.625rem); line-height:1.2;
  letter-spacing:-.01em; color:var(--heading);
  margin-top:56px; margin-bottom:18px; scroll-margin-top:24px;
}
.post-prose h3{
  font-family:var(--f); font-weight:600; font-size:1.125rem;
  color:var(--heading); margin-top:32px; margin-bottom:10px;
}
.post-prose a{ color:var(--heading); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--border) }
.post-prose a:hover{ text-decoration-color:var(--heading) }
.post-prose ul{ padding-left:1.2em; margin-bottom:22px; }
.post-prose ul li{ margin-bottom:8px; }
.post-prose blockquote{
  margin:32px 0; padding:22px 26px;
  border-left:2px solid var(--sauna); background:var(--surface);
  font-style:italic; color:var(--heading); font-size:1.0625rem; line-height:1.55;
  border-radius:0 var(--r-lg) var(--r-lg) 0;
}
.post-prose blockquote p{ margin:0 }
.post-prose .callout{
  margin:32px 0; padding:22px 26px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--hairline);
  font-size:.95rem; line-height:1.65; color:var(--body);
}
.post-prose .callout b{ color:var(--heading); font-weight:600 }
.post-prose figure{ margin:36px 0 }
.post-prose figure img{ border-radius:var(--r-lg); width:100%; }
.post-prose figcaption{ font-size:.78rem; color:var(--muted); margin-top:10px; text-align:center; font-style:italic }

/* Author card + share */
.author-card{
  margin-top:64px; padding:28px 30px;
  background:#fff; border:1px solid var(--hairline); border-radius:var(--r-xl);
  display:flex; gap:20px; align-items:center;
}
.author-card .avatar{
  width:56px; height:56px; border-radius:50%;
  background:var(--surface); color:var(--heading);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; font-size:1.1rem; flex:none;
}
.author-card .who b{ display:block; color:var(--heading); font-weight:600; font-size:.95rem }
.author-card .who span{ display:block; font-size:.84rem; color:var(--muted); margin-top:4px }

/* Related posts band */
.related-band{ padding:96px 0; background:var(--surface) }
.related-band > .wrap > h2{
  font-family:var(--f); font-weight:400; font-size:clamp(1.5rem,2.4vw,2rem);
  letter-spacing:-.015em; color:var(--heading); margin-bottom:32px;
}

@media (max-width:1100px){
  .post-hero{ grid-template-columns:1fr; min-height:auto }
  .post-hero .left{ padding:48px 32px }
  .post-hero .right{ aspect-ratio:16/9 }
  .post-grid{ grid-template-columns:1fr; gap:32px }
  .post-toc{ position:relative; top:auto }
  .post-prose{ max-width:none }
}
@media (max-width:700px){
  .post-hero-wrap{ padding:6px 14px 0 }
  .post-body{ padding:48px 22px 64px }
}