/* =========================================================
   BLOG — index (/blogs/) and post (/blog/?slug=…)
   Minimal system: square corners, hairline rules, no shadows.
========================================================= */

.blog-wrap{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

.blog-state{
  min-height: 60vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  padding: calc(var(--header-h) + 60px) 24px 80px;
  font-size: 15px; font-weight: 300; color: var(--n-500);
}
.blog-state[hidden]{ display: none; }

.blog-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 30px;
  border: 1px solid var(--n-200); background: transparent; color: var(--ink);
  font-family: inherit;
  font-size: 11.5px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.blog-btn:hover{ border-color: var(--ink); }
.blog-btn.is-dark{ background: var(--ink); border-color: var(--ink); color: #fff; }
.blog-btn.is-dark:hover{ background: var(--blue); border-color: var(--blue); }

/* =========================================================
   INDEX
========================================================= */
.blog-index{ padding: 92px 0 108px; background: var(--white); }
.blog-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 28px;
}
.blog-empty{
  grid-column: 1 / -1; padding: 40px 0;
  font-size: 15px; font-weight: 300; color: var(--n-500);
}

.blog-card{
  display: flex; flex-direction: column;
  border: 1px solid var(--n-200);
  background: var(--white); color: var(--ink);
  overflow: hidden;
  transition: border-color var(--dur-med) var(--ease-out);
}
.blog-card:hover{ border-color: var(--n-400); }
.blog-card-media{ display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.blog-card-media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.8s var(--ease-out);
}
.blog-card:hover .blog-card-media img{ transform: scale(1.05); }
.blog-card-body{ display: flex; flex-direction: column; flex: 1; padding: 24px 24px 0; }
.blog-card-meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin-bottom: 14px;
  font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--n-400);
}
.blog-card-cat{ color: var(--ink); }
.blog-card-title{
  display: block;
  font-family: var(--font-display); font-weight: 300; font-size: 21px;
  line-height: 1.24; letter-spacing: -0.022em; color: var(--ink);
}
.blog-card-excerpt{
  display: block; margin-top: 12px;
  font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--n-500);
}
.blog-card-cta{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 22px; padding: 16px 0; border-top: 1px solid var(--n-200);
  font-size: 11.5px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
}
.blog-card-cta svg{ color: var(--n-400); transition: transform var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out); }
.blog-card:hover .blog-card-cta svg{ transform: translateX(5px); color: var(--ink); }
.blog-card:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }

/* Lead card runs the full width with the image beside the copy */
.blog-card.is-lead{
  grid-column: 1 / -1;
  flex-direction: row; align-items: stretch;
}
.blog-card.is-lead .blog-card-media{ flex: 0 0 56%; aspect-ratio: auto; }
.blog-card.is-lead .blog-card-body{ justify-content: center; padding: 46px 48px; }
.blog-card.is-lead .blog-card-title{ font-size: clamp(24px, 2.6vw, 32px); }
.blog-card.is-lead .blog-card-excerpt{ font-size: 15.5px; max-width: 48ch; }
.blog-card.is-lead .blog-card-cta{ margin-top: 30px; }

/* =========================================================
   POST
========================================================= */
.blog-page{ background: var(--white); }
.blog-post-head{ padding: calc(var(--header-h) + 56px) 0 40px; }
/* .rf-crumbs is styled for dark heroes in theme.css, which loads after this
   sheet — hence the doubled class to win on specificity. */
.blog-crumbs{ margin-bottom: 30px; }
.rf-crumbs.blog-crumbs a,
.rf-crumbs.blog-crumbs .sep{ color: var(--n-400); }
.rf-crumbs.blog-crumbs a:hover{ color: var(--ink); border-bottom-color: var(--n-400); }
.rf-crumbs.blog-crumbs .current{ color: var(--ink); }

.blog-post-meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin-bottom: 22px;
  font-size: 11px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--n-400);
}
.blog-post-cat{ color: var(--ink); }
.blog-post-title{
  max-width: 20ch;
  font-family: var(--font-display); font-weight: 200;
  font-size: clamp(32px, 5vw, 60px); line-height: 1.04; letter-spacing: -0.038em;
  color: var(--ink);
}
.blog-post-standfirst{
  max-width: 62ch; margin-top: 24px;
  font-size: clamp(17px, 1.9vw, 20px); font-weight: 300; line-height: 1.6; letter-spacing: -0.012em;
  color: var(--n-500);
}

.blog-post-hero{ margin: 12px 0 64px; }
.blog-post-hero img{ width: 100%; height: auto; display: block; }
.blog-post-hero figcaption{
  padding-top: 12px;
  font-size: 11.5px; font-weight: 300; color: var(--n-400);
}
.blog-post-hero figcaption a{ color: var(--n-400); border-bottom: 1px solid var(--n-200); }
.blog-post-hero figcaption a:hover{ color: var(--ink); border-bottom-color: var(--ink); }

.blog-post-layout{
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 72px;
  align-items: start;
  padding-bottom: 96px;
}
.blog-post-rail{ position: sticky; top: calc(var(--header-h) + 32px); }
.blog-toc h2{
  font-size: 11px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--n-400);
  padding-bottom: 14px; border-bottom: 1px solid var(--n-200); margin-bottom: 4px;
}
.blog-toc ol{ list-style: none; counter-reset: toc; }
.blog-toc li{ counter-increment: toc; }
.blog-toc a{
  display: flex; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--n-100);
  font-size: 13.5px; font-weight: 300; line-height: 1.45; color: var(--n-500);
  transition: color var(--dur-fast) var(--ease-out);
}
.blog-toc a::before{
  content: counter(toc);
  color: var(--n-400); font-variant-numeric: tabular-nums; flex: none;
}
.blog-toc a:hover{ color: var(--ink); }
.blog-byline{
  margin-top: 24px;
  font-size: 12px; font-weight: 300; letter-spacing: 0.06em; color: var(--n-400);
}

.blog-post-body{ max-width: 68ch; }
.blog-post-body h2{
  scroll-margin-top: calc(var(--header-h) + 28px);
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(23px, 2.6vw, 30px); line-height: 1.18; letter-spacing: -0.028em;
  color: var(--ink);
  margin: 52px 0 22px;
}
.blog-post-body h2:first-child{ margin-top: 0; }
.blog-post-body p{
  font-size: 17px; font-weight: 300; line-height: 1.85; color: var(--n-700);
  margin-bottom: 22px;
}
.blog-post-body ul{ margin: 0 0 24px; }
.blog-post-body ul li{
  position: relative; padding-left: 22px; margin-bottom: 12px;
  font-size: 16.5px; font-weight: 300; line-height: 1.75; color: var(--n-700);
}
.blog-post-body ul li::before{
  content: ""; position: absolute; left: 0; top: 14px;
  width: 8px; height: 1px; background: var(--n-400);
}
.blog-post-body blockquote{
  margin: 40px 0;
  padding: 4px 0 4px 28px;
  border-left: 1px solid var(--ink);
}
.blog-post-body blockquote p{
  font-family: var(--font-display); font-weight: 200;
  font-size: clamp(20px, 2.4vw, 26px); line-height: 1.42; letter-spacing: -0.026em;
  color: var(--ink); margin: 0;
}
.blog-post-body a{ color: var(--ink); border-bottom: 1px solid var(--n-200); }
.blog-post-body a:hover{ border-bottom-color: var(--ink); }

.blog-source{
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--n-200);
  font-size: 13px; font-weight: 300; color: var(--n-400);
}
.blog-source a{ color: var(--n-500); border-bottom: 1px solid var(--n-200); }
.blog-source a:hover{ color: var(--ink); border-bottom-color: var(--ink); }

.blog-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.blog-tags span{
  padding: 8px 14px; border: 1px solid var(--n-200);
  font-size: 11px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--n-500);
}

.blog-cta{
  margin-top: 56px; padding: 40px 38px;
  background: var(--ink); color: #fff;
}
.blog-cta h2{
  font-family: var(--font-display); font-weight: 200;
  font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.028em; color: #fff;
  margin: 0 0 14px;
}
.blog-cta p{ font-size: 15px; font-weight: 300; line-height: 1.75; color: rgba(255,255,255,0.62); margin-bottom: 26px; }
.blog-cta-actions{ display: flex; flex-wrap: wrap; gap: 10px; }
.blog-cta .blog-btn{ border-color: rgba(255,255,255,0.3); color: #fff; }
.blog-cta .blog-btn:hover{ background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.5); }
.blog-cta .blog-btn.is-dark{ background: #fff; border-color: #fff; color: var(--ink); }
.blog-cta .blog-btn.is-dark:hover{ background: rgba(255,255,255,0.86); }

.blog-more{ padding: 84px 0 104px; border-top: 1px solid var(--n-200); }
.blog-more-title{
  font-family: var(--font-display); font-weight: 200;
  font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.03em; color: var(--ink);
  margin-bottom: 36px;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1040px){
  .blog-grid{ grid-template-columns: repeat(2, 1fr); }
  .blog-post-layout{ grid-template-columns: 1fr; gap: 40px; }
  .blog-post-rail{ position: static; }
  .blog-toc ol{ columns: 2; column-gap: 32px; }
  .blog-post-body{ max-width: none; }
}
@media (max-width: 860px){
  .blog-card.is-lead{ flex-direction: column; }
  .blog-card.is-lead .blog-card-media{ flex: none; aspect-ratio: 16 / 9; }
  .blog-card.is-lead .blog-card-body{ padding: 24px 24px 0; }
}
@media (max-width: 640px){
  .blog-wrap{ padding-left: 20px; padding-right: 20px; }
  .blog-index{ padding: 60px 0 76px; }
  .blog-grid{ grid-template-columns: 1fr; gap: 24px; }
  .blog-post-head{ padding: calc(var(--header-h) + 36px) 0 30px; }
  .blog-post-title{ max-width: none; }
  .blog-post-hero{ margin-bottom: 44px; }
  .blog-post-layout{ padding-bottom: 68px; }
  .blog-toc ol{ columns: 1; }
  .blog-post-body h2{ margin-top: 40px; }
  .blog-post-body p{ font-size: 16.5px; }
  .blog-cta{ padding: 32px 24px; }
  .blog-cta-actions .blog-btn{ flex: 1 1 auto; }
  .blog-more{ padding: 60px 0 76px; }
}

/* =========================================================
   HOMEPAGE STRIP — "From the blog", matched to the
   Listings / Projects bands above it
========================================================= */
.home-blogs{ padding: 104px 32px 112px; background: var(--white); }
.home-blogs-inner{ max-width: 1280px; margin: 0 auto; }
.home-blogs .blog-grid{ margin-top: 44px; }
/* A lone post shouldn't stretch across the full three columns */
.home-blogs .blog-grid.is-single{ grid-template-columns: minmax(0, 420px); }
.home-blogs-more{ margin-top: 44px; }
.home-blogs-more .blog-btn svg{
  color: var(--n-400);
  transition: transform var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}
.home-blogs-more .blog-btn:hover svg{ transform: translateX(5px); color: var(--ink); }

@media (max-width: 1040px){
  .home-blogs .blog-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .home-blogs{ padding: 72px 20px 80px; }
  .home-blogs .blog-grid{ grid-template-columns: 1fr; margin-top: 32px; }
  .home-blogs .blog-grid.is-single{ grid-template-columns: 1fr; }
  .home-blogs-more{ margin-top: 32px; }
  .home-blogs-more .blog-btn{ width: 100%; }
}