/* ==========================================================================
   BLOG — archive.php, index.php, single.php

   Cascade position: after project.css (the enqueue dependency), so it can
   correct the case-study chrome it reuses without editing project.css.

   SCOPE
   -----
   Two wrappers, both put on the template's own root element:

     .pcr-blog   archive.php and index.php (which requires archive.php)
     .pcr-post   single.php

   Nothing below is declared bare. The case-study pages share class names with
   these templates — case__cta chrome, .prose, the crumbs — so a bare selector
   here would restyle /projects/<slug>/ the moment this file was promoted into
   the global chain.

   COLOUR
   ------
   Tokens only. `--copper-hot` is used on dark grounds and `--copper` on light
   ones, so every accent flips with the band rather than being declared once and
   being wrong on half the page.

   BAND RHYTHM
   -----------
   One value per band, and the same value on both sides of every content band:

     content bands   clamp(56px, 7vw, 104px)
     hero (bottom)   clamp(48px,  6vw,  80px)   + --pcr-nav-offset on top
     closing CTA     clamp(48px,  6vw,  80px)
     single figure   asymmetric by design — it is a plate under the hero, not a
                     band, and carries the hero's own spacing

   `.eyebrow` is `inline-flex`, so every eyebrow -> heading gap in this file is a
   margin on the HEADING, never a margin on the eyebrow.
   ========================================================================== */

/* ======================================================================== */
/* SHARED GROUNDS                                                            */
/* ======================================================================== */

.pcr-blog__band,
.pcr-post__band {
  position: relative;
  padding-block: clamp(56px, 7vw, 104px);
}

/* The dark ground for the opening. There is no global `.sect-dark`, and adding
   one to chrome.css would touch every template, so the band declares it. */
.pcr-blog__band--dark,
.pcr-post__band--dark {
  background: var(--void);
  color: var(--on-dark);
}

/* ======================================================================== */
/* HERO                                                                      */
/* ======================================================================== */

.pcr-blog__hero,
.pcr-post__hero {
  position: relative;
  overflow: hidden;
  background: var(--void);
  color: var(--on-dark);
}

/*
 * The hero is not a `.section`, so the `.pcr-inner .section:first-child` opt-in
 * in chrome.css does not fire here and the fixed nav has to be cleared by hand.
 * Measured, not guessed: `.nav-bar` is 60px and `.site-header` adds 12px.
 */
.pcr-blog__hero-inner,
.pcr-post__hero-inner {
  padding-block: calc(var(--pcr-nav-offset) + var(--sp-3xl)) clamp(48px, 6vw, 80px);
}

.pcr-blog__hero-eyebrow,
.pcr-post__hero-eyebrow {
  margin-top: var(--sp-lg);
  color: var(--copper-hot);
}

.pcr-blog__title {
  margin-top: var(--sp-sm);
  color: #fff;
  max-width: 18ch;
}

.pcr-blog__lede {
  max-width: 64ch;
  margin-top: var(--sp-md);
  color: var(--on-dark-mute);
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
}

/* ------------------------------------------------------------------- post -- */
.pcr-post__title {
  margin-top: var(--sp-sm);
  color: #fff;
  max-width: 24ch;
  overflow-wrap: break-word;
}

.pcr-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-xs) var(--sp-lg);
  margin-top: var(--sp-lg);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--on-dark-line);
}

.pcr-post__updated {
  margin-top: var(--sp-sm);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--on-dark-mute);
  opacity: .8;
}

/* ======================================================================== */
/* META LINE — date / author / category                                     */
/* ======================================================================== */

.pcr-blog__meta,
.pcr-post__meta-read {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2xs) var(--sp-sm);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink-mute);
}

.pcr-blog__meta-item { white-space: nowrap; }
.pcr-blog__meta-sep   { opacity: .45; }

.pcr-blog__meta-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pcr-blog__meta-link:hover {
  color: var(--copper);
  border-bottom-color: var(--copper-edge);
}

/* Dark grounds: the meta line and its accents have to follow the band. */
.pcr-blog__hero .pcr-blog__meta,
.pcr-post__hero .pcr-blog__meta,
.pcr-blog__band--dark .pcr-blog__meta,
.pcr-post__band--dark .pcr-blog__meta,
.pcr-post__hero .pcr-post__meta-read {
  color: var(--on-dark-mute);
}
.pcr-blog__hero .pcr-blog__meta-link:hover,
.pcr-post__hero .pcr-blog__meta-link:hover,
.pcr-blog__band--dark .pcr-blog__meta-link:hover,
.pcr-post__band--dark .pcr-blog__meta-link:hover {
  color: var(--copper-hot);
  border-bottom-color: var(--copper-edge);
}

/* ======================================================================== */
/* THUMBNAILS                                                                */
/* ======================================================================== */

.pcr-blog__thumb,
.pcr-blog__lead-media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  clip-path: var(--clip-sm);
  background: var(--void);
}

.pcr-blog__thumb {
  border: 1px solid var(--line);
}

.pcr-blog__lead-media {
  border: 1px solid var(--on-dark-line);
  transition: border-color var(--t-base) var(--ease);
}

.pcr-blog__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-base) var(--ease);
}

/* ======================================================================== */
/* "READ THE NOTE"                                                           */
/* ======================================================================== */

.pcr-blog__more {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--sp-xs);
  margin-top: var(--sp-md);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1;
  color: var(--copper-hot);
}
.pcr-blog__more i { transition: transform var(--t-base) var(--ease); }
.sect-light .pcr-blog__more { color: var(--copper); }

@media (hover: hover) {
  .pcr-blog__lead:hover .pcr-blog__more i,
  .pcr-blog__row:hover .pcr-blog__more i { transform: translateX(5px); }
}

/* ======================================================================== */
/* LEAD POST                                                                 */
/* ======================================================================== */

.pcr-blog__lead {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: clamp(20px, 2.6vw, 40px);
  align-items: center;
  padding: clamp(20px, 2.4vw, 36px);
  background: var(--graphite);
  border: 1px solid var(--on-dark-line);
  border-left: 3px solid var(--copper);
  clip-path: var(--clip);
}

/* A post with no featured image drops the column rather than reserving an
   empty plate. */
.pcr-blog__lead--nothumb { grid-template-columns: minmax(0, 1fr); }

.pcr-blog__lead-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pcr-blog__lead-eyebrow {
  color: var(--copper-hot);
  margin-bottom: var(--sp-sm);
}

.pcr-blog__lead-meta { margin-bottom: var(--sp-sm); }

.pcr-blog__lead-title {
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
}
.pcr-blog__lead-title a {
  color: #fff;
  /* Stretched hit area: the whole panel is the link, and the media anchor
     above it resolves to the same URL. */
}
.pcr-blog__lead-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.pcr-blog__lead-title a:hover { color: var(--copper-hot); }

.pcr-blog__lead-excerpt {
  margin-top: var(--sp-sm);
  max-width: 58ch;
  color: var(--on-dark-mute);
  line-height: var(--lh-loose);
}

/* ======================================================================== */
/* SECTION HEAD                                                              */
/* ======================================================================== */

.pcr-blog__head { max-width: var(--measure); }
.pcr-blog__head-title {
  margin-top: var(--sp-xs);
  font-size: var(--fs-2xl);
  color: var(--ink);
}

/* ======================================================================== */
/* THE LIST — rows, not a grid of identical cards                            */
/* ======================================================================== */

.pcr-blog__rows {
  margin-top: var(--sp-2xl);
  border-top: 1px solid var(--line);
}

.pcr-blog__row {
  position: relative;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 34px);
  align-items: start;
  padding-block: clamp(20px, 2.4vw, 32px);
  border-bottom: 1px solid var(--line);
}
.pcr-blog__row--nothumb { grid-template-columns: minmax(0, 1fr); }

.pcr-blog__row-body { min-width: 0; }

.pcr-blog__row-meta { margin-bottom: var(--sp-xs); }

.pcr-blog__row-title {
  font-size: var(--fs-xl);
  color: var(--ink);
}
.pcr-blog__row-title a { color: var(--ink); }
.pcr-blog__row-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.pcr-blog__row-title a:hover { color: var(--copper); }

.pcr-blog__row-excerpt {
  margin-top: var(--sp-xs);
  max-width: 62ch;
  color: var(--ink-light);
  font-size: var(--fs-sm);
  overflow-wrap: break-word;
}

.pcr-blog__row-more { margin-top: var(--sp-sm); }

@media (hover: hover) {
  .pcr-blog__row:hover .pcr-blog__thumb { border-color: var(--copper-edge); }
  .pcr-blog__row:hover .pcr-blog__thumb-img { transform: scale(1.04); }
}

/* ======================================================================== */
/* EMPTY STATE — the launch screen                                           */
/* ======================================================================== */

/*
 * There are no published posts, so this is what /blog/ will look like on day
 * one. It has to read as a designed panel — a top rule, a surface card, a real
 * heading and three real destinations — because "an empty archive" and "a page
 * that was never finished" are the same thing on screen otherwise.
 */
.pcr-blog__empty {
  max-width: 92ch;
  padding: clamp(22px, 3.2vw, 46px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--copper);
  clip-path: var(--clip-sm);
}

.pcr-blog__empty-eyebrow { color: var(--copper); }

.pcr-blog__empty-title {
  margin-top: var(--sp-sm);
  font-size: var(--fs-2xl);
  color: var(--ink);
}

.pcr-blog__empty-text {
  margin-top: var(--sp-sm);
  max-width: var(--measure);
  color: var(--ink-light);
  line-height: var(--lh-loose);
}

.pcr-blog__empty-routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: var(--sp-2xl);
}

.pcr-blog__route {
  min-width: 0;
  padding: clamp(14px, 1.6vw, 20px);
  background: var(--base);
  border: 1px solid var(--line);
  clip-path: var(--clip-xs);
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.pcr-blog__route-title { font-size: var(--fs-md); }
.pcr-blog__route-title a { color: var(--ink); }
.pcr-blog__route-title a:hover { color: var(--copper); }
.pcr-blog__route-title i {
  margin-inline-start: 5px;
  font-size: .88em;
  opacity: .5;
}
.pcr-blog__route-text {
  margin-top: var(--sp-xs);
  color: var(--ink-light);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

@media (hover: hover) {
  .pcr-blog__route:hover {
    border-color: var(--copper-edge);
    transform: translateY(-3px);
  }
}

.pcr-blog__empty-actions { margin-top: var(--sp-2xl); }

/* ======================================================================== */
/* TOPICS — real category links with real counts                            */
/* ======================================================================== */

/* Immediately after the light list band. Same ground, so the panel needs its
   own surface and rule or the two bands read as one long gap. */
.pcr-blog__band--topics { border-top: 1px solid var(--line); }

.pcr-blog__topics {
  padding: clamp(18px, 2.2vw, 28px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--copper);
  clip-path: var(--clip-sm);
}

.pcr-blog__topics-eyebrow { color: var(--copper); }
.pcr-blog__topics-title {
  margin-top: var(--sp-xs);
  font-size: var(--fs-xl);
  color: var(--ink);
}

.pcr-blog__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin-top: var(--sp-md);
}

/* The topic chip and the tag chip are the same component on two grounds. */
.pcr-blog__chip,
.pcr-post__chips a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: 7px var(--sp-sm);
  background: var(--copper-wash);
  border: 1px solid var(--copper-edge);
  color: var(--copper-dim);
  clip-path: var(--clip-xs);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: break-word;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.pcr-blog__chip:hover,
.pcr-post__chips a:hover {
  background: var(--copper);
  border-color: var(--copper);
  color: #fff;
}

.pcr-blog__chip-count {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  opacity: .72;
}
.pcr-blog__chip:hover .pcr-blog__chip-count { opacity: .9; }

/* ======================================================================== */
/* PAGER                                                                     */
/* ======================================================================== */

/* the_posts_pagination() prints real <a href>s; these are the same controls
   the projects archive uses, restated on this page's ground. */
.pcr-blog__pager { margin-top: var(--sp-2xl); }

.pcr-blog .navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
}

.pcr-blog .navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--sp-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-light);
  font-size: var(--fs-sm);
  font-weight: 600;
  clip-path: var(--clip-xs);
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.pcr-blog .navigation.pagination a.page-numbers:hover {
  border-color: var(--copper-edge);
  color: var(--copper);
}
.pcr-blog .navigation.pagination .page-numbers.current {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.pcr-blog .navigation.pagination .page-numbers.dots {
  background: transparent;
  border-color: transparent;
}

/* ======================================================================== */
/* CLOSING COPPER BAND — shared by archive and single                        */
/* ======================================================================== */

/*
 * `.case__cta` draws a graphite panel with a copper left rule and a chamfer.
 * On a full-bleed copper band all three would be redundant, so the band is flat
 * and the inner shell supplies the gutter.
 */
.pcr-blog__cta,
.pcr-post__cta {
  padding-block: clamp(48px, 6vw, 80px);
}

.pcr-blog__cta-inner,
.pcr-post__cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
}

.pcr-blog__cta h2,
.pcr-post__cta h2 {
  color: #fff;
  max-width: 24ch;
  font-size: var(--fs-2xl);
}

.pcr-blog__cta p,
.pcr-post__cta p {
  max-width: 52ch;
  margin-top: var(--sp-xs);
  color: rgba(255, 255, 255, .82);
}

/* `.sect-copper .btn` turns every button solid white, which would leave the
   two CTAs identical. The secondary is drawn as an outline on the copper. */
.pcr-blog__cta .btn--outline-light,
.pcr-post__cta .btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .58);
}
.pcr-blog__cta .btn--outline-light:hover,
.pcr-post__cta .btn--outline-light:hover {
  --btn-bg: #fff;
  --btn-fg: var(--ink);
  --btn-bd: #fff;
}

/* ========================================================================== */
/* SINGLE POST                                                               */
/* ========================================================================== */

/* ----------------------------------------------------------------- figure -- */
/* The featured image runs the full shell width and takes the brand chamfer.
   The whole band disappears when a post has no featured image. */
.pcr-post__figure {
  margin: 0;
  background: var(--void);
  padding-block: clamp(8px, 1.2vw, 16px) clamp(28px, 3.4vw, 48px);
}
.pcr-post__figure-inner {
  overflow: hidden;
  background: var(--graphite);
  clip-path: var(--clip);
}
.pcr-post__img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

/* ------------------------------------------------------------------- body -- */
.pcr-post__body-inner {
  max-width: var(--measure);
  margin-inline: auto;
}

/* Block-editor output. `overflow-wrap` is the one rule that has to be here:
   part numbers, file names and long URLs must never widen the page. */
.pcr-post__prose {
  color: var(--ink-light);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  overflow-wrap: break-word;
}
.pcr-post__prose > * + *              { margin-top: var(--sp-md); }
.pcr-post__prose > p                  { color: var(--ink-light); }
.pcr-post__prose strong               { color: var(--ink); font-weight: 600; }
.pcr-post__prose h2,
.pcr-post__prose h3,
.pcr-post__prose h4                   { color: var(--ink); }
.pcr-post__prose h2                   { margin-top: var(--sp-3xl); font-size: var(--fs-2xl); }
.pcr-post__prose h3                   { margin-top: var(--sp-2xl); font-size: var(--fs-xl); }
.pcr-post__prose h4                   { margin-top: var(--sp-xl);  font-size: var(--fs-lg); }
.pcr-post__prose h2 + *,
.pcr-post__prose h3 + *,
.pcr-post__prose h4 + *               { margin-top: var(--sp-sm); }
.pcr-post__prose a {
  color: var(--copper);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pcr-post__prose a:hover { color: var(--copper-dim); }

.pcr-post__prose ul,
.pcr-post__prose ol { padding-left: 1.15em; }
.pcr-post__prose ul { list-style: disc; }
.pcr-post__prose ol { list-style: decimal; }
.pcr-post__prose li + li   { margin-top: var(--sp-xs); }
.pcr-post__prose li::marker { color: var(--copper); }

.pcr-post__prose blockquote {
  margin-inline: 0;
  padding: var(--sp-sm) 0 var(--sp-sm) var(--sp-md);
  border-left: 2px solid var(--copper);
  color: var(--ink-light);
  font-style: italic;
}
.pcr-post__prose blockquote p + p { margin-top: var(--sp-xs); }

.pcr-post__prose pre {
  padding: var(--sp-md);
  background: var(--graphite);
  color: var(--on-dark);
  overflow-x: auto;
  clip-path: var(--clip-sm);
}
.pcr-post__prose pre code {
  padding: 0;
  background: none;
  color: inherit;
}

.pcr-post__prose img,
.pcr-post__prose video,
.pcr-post__prose iframe { max-width: 100%; height: auto; }

.pcr-post__prose figure { margin: var(--sp-lg) 0; }
.pcr-post__prose figcaption {
  margin-top: var(--sp-xs);
  color: var(--ink-mute);
  font-size: var(--fs-xs);
}

/* `display: block` + `overflow-x: auto` is what stops a wide table from
   overflowing the viewport at 390px instead of scrolling inside its own box. */
.pcr-post__prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.pcr-post__prose th,
.pcr-post__prose td {
  padding: var(--sp-xs) var(--sp-sm);
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.pcr-post__prose th { color: var(--ink); font-weight: 600; }

.pcr-post__prose hr { margin-block: var(--sp-2xl); }

/* ------------------------------------------------------------------- tags -- */
.pcr-post__tags {
  margin-top: var(--sp-3xl);
  padding-top: var(--sp-xl);
  border-top: 1px solid var(--line);
}
.pcr-post__tags-label { color: var(--ink-mute); }

/* `get_the_tag_list()` is called with an empty separator, so the chips can be
   laid out with margins rather than a flow of ", " text nodes. */
.pcr-post__chips { margin-top: var(--sp-sm); }
.pcr-post__chips a { margin: 0 var(--sp-xs) var(--sp-xs) 0; }

/* ----------------------------------------------------------------- author -- */
.pcr-post__author {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--sp-md);
  align-items: start;
  margin-top: var(--sp-2xl);
  padding: clamp(16px, 2vw, 24px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--copper);
  clip-path: var(--clip-sm);
}
.pcr-post__author-mark {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: var(--copper-wash);
  border: 1px solid var(--copper-edge);
  color: var(--copper-dim);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  clip-path: var(--clip-sm);
}
.pcr-post__author-body { min-width: 0; }
.pcr-post__author-label {
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.pcr-post__author-name {
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
}
.pcr-post__author-name a { color: var(--ink); }
.pcr-post__author-name a:hover { color: var(--copper); }
.pcr-post__author-bio {
  margin-top: var(--sp-xs);
  color: var(--ink-light);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

/* ------------------------------------------------------- previous / next --- */
/* `auto-fit` so a post with only one neighbour still fills the row instead of
   sitting in a half-width column. */
.pcr-post__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--sp-md);
}

.pcr-post__nav-link {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-xs);
  min-height: 104px;
  padding: clamp(16px, 2vw, 24px);
  background: var(--graphite);
  border: 1px solid var(--on-dark-line);
  clip-path: var(--clip-sm);
  transition: border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.pcr-post__nav-link .label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.pcr-post__nav-link b {
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.24;
  overflow-wrap: break-word;
}
.pcr-post__nav-link--next {
  text-align: right;
  align-items: flex-end;
}

@media (hover: hover) {
  .pcr-post__nav-link:hover {
    border-color: var(--copper-edge);
    transform: translateY(-3px);
    box-shadow: var(--sh-dark);
  }
  .pcr-post__nav-link:hover b { color: var(--copper-hot); }
}

/* ---------------------------------------------------------------- related -- */
.pcr-post__related { margin-top: var(--sp-4xl); }
.pcr-post__related-title {
  margin-top: var(--sp-xs);
  color: #fff;
  font-size: var(--fs-2xl);
}
.pcr-post__band--dark .pcr-post__related-head .eyebrow { color: var(--copper-hot); }

.pcr-post__rel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: var(--sp-xl);
}

.pcr-post__card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--graphite);
  border: 1px solid var(--on-dark-line);
  clip-path: var(--clip-sm);
  transition: border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.pcr-post__card-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--on-dark-line);
  background: var(--void);
}
.pcr-post__card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  padding: clamp(14px, 1.6vw, 20px);
}
.pcr-post__card-title { font-size: var(--fs-md); }
.pcr-post__card-title a { color: #fff; }
.pcr-post__card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.pcr-post__card-title a:hover { color: var(--copper-hot); }
.pcr-post__card-excerpt {
  color: var(--on-dark-mute);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

@media (hover: hover) {
  .pcr-post__card:hover {
    border-color: var(--copper-edge);
    transform: translateY(-3px);
    box-shadow: var(--sh-dark);
  }
  .pcr-post__card:hover .pcr-blog__thumb-img { transform: scale(1.04); }
}

.pcr-post__related-all {
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-xl);
  border-top: 1px solid var(--on-dark-line);
}
.pcr-post__all-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1;
  color: var(--copper-hot);
}
.pcr-post__all-link i { transition: transform var(--t-base) var(--ease); }
.pcr-post__all-link:hover i { transform: translateX(5px); }

/* --------------------------------------------------------------- comments -- */
.pcr-post__comments {
  padding-block: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--line);
}

/* ========================================================================== */
/* NARROW                                                                    */
/* ========================================================================== */

/*
 * Nothing here may widen the page past the viewport. By 390px the lead, the
 * rows, the route set and the related grid are all single column; the chips wrap
 * rather than scroll; and every long string in the templates is either short or
 * covered by overflow-wrap.
 */
@media (max-width: 900px) {
  .pcr-blog__lead { grid-template-columns: minmax(0, 1fr); }
  .pcr-post__rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .pcr-blog__empty-routes { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .pcr-blog__row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .pcr-post__rel-grid { grid-template-columns: minmax(0, 1fr); }
  .pcr-post__author { grid-template-columns: 52px minmax(0, 1fr); }
  .pcr-post__author-mark { width: 52px; height: 52px; font-size: var(--fs-lg); }
}

@media (max-width: 640px) {
  .pcr-blog__hero-inner,
  .pcr-post__hero-inner { padding-top: calc(var(--pcr-nav-offset) + var(--sp-2xl)); }
  .pcr-blog__band,
  .pcr-post__band { padding-block: clamp(44px, 12vw, 72px); }
  .pcr-blog__cta-inner,
  .pcr-post__cta-inner { gap: var(--sp-md); }
  .pcr-blog__cta .btn,
  .pcr-post__cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pcr-blog__more i,
  .pcr-blog__thumb-img,
  .pcr-blog__chip,
  .pcr-post__chips a,
  .pcr-post__nav-link,
  .pcr-post__card,
  .pcr-post__all-link i,
  .pcr-blog__route { transition: none; }
  .pcr-blog__row:hover .pcr-blog__thumb-img,
  .pcr-post__card:hover .pcr-blog__thumb-img { transform: none; }
  .pcr-blog__lead:hover .pcr-blog__more i,
  .pcr-blog__row:hover .pcr-blog__more i,
  .pcr-post__all-link:hover i { transform: none; }
  .pcr-blog__row:hover .pcr-blog__thumb,
  .pcr-blog__route:hover,
  .pcr-post__nav-link:hover,
  .pcr-post__card:hover { transform: none; box-shadow: none; }
}