/* ==========================================================================
   Playbook (blog list) + Playbook Post (article) pages
   Figma BfXzfapKtNusKXflQn976p — Playbook 2569:7865, Playbook Post 2569:7426.
   Shared by playbook.html and playbook-post.html.
   ========================================================================== */

:root {
  --pb-bg: var(--color-neutral-100);
  --pb-line: var(--color-rule);
  --pb-line-strong: var(--color-line-strong);
  --pb-ring: inset 0 0 0 1px var(--color-line-strong);
}

/* ---- Shared small type ---- */
.pb-label { color: var(--color-text-muted); }   /* type = base .kicker */
/* labels on the grey band use text-muted (contrast) */
.pb-more__count, .pb-figure figcaption { color: var(--color-text-soft); }
.pb-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pb-crumbs__sep { font-size: var(--fs-small); line-height: normal; color: var(--color-text-muted); }

/* ---- Hero (both pages) ---- */
.pb-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end;
  background: var(--color-navy-900); color: var(--color-white);
}
.pb-hero__bg {
  position: absolute; z-index: -2; left: 0; top: -34.4%;
  width: 100%; height: 168.75%; max-width: none; object-fit: cover;
}
.pb-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; }   /* overlay = polish.css (--overlay-hero) */
.pb-hero__inner { display: flex; flex-direction: column; gap: var(--space-5); }
.pb-hero__title { max-width: var(--container-text); }
.pb-hero__text {
  max-width: var(--measure-intro);   /* size + colour = polish.css shared hero rule */
}

/* Post variant */
.pb-hero--post .pb-hero__bg { top: -17.9%; height: 174.2%; }
.pb-hero--post .pb-hero__inner { gap: 0; }
.pb-hero--post .pb-crumbs { margin-bottom: var(--space-1); }
.pb-hero--post .pb-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.pb-hero--post .pb-crumbs a { color: var(--color-on-dark-muted); transition: color var(--dur-fast) var(--ease); }
.pb-hero--post .pb-crumbs a:hover { color: var(--color-white); }
.pb-hero--post .pb-crumbs .pb-label:last-child { color: var(--color-white); }
.pb-hero--post .pb-crumbs__sep { color: var(--color-on-dark-faint); }
.pb-hero--post .pb-hero__title { max-width: var(--container-text); }
.pb-hero--post .pb-hero__text { margin-top: var(--space-5); }

.pb-post-meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6);
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--color-line-on-dark);
}
.pb-share { display: flex; align-items: center; gap: var(--space-2); }
.pb-share .pb-label { color: var(--color-on-dark-muted); }
.pb-share__btn { position: relative; }   /* look: base.css .btn-icon */
.pb-share__status {
  position: absolute; top: calc(100% + var(--space-2)); right: 0; white-space: nowrap;
  font-size: var(--fs-xs); color: var(--color-yellow-400);
}

/* ---- Author byline ---- */
.pb-byline { display: flex; align-items: center; gap: var(--space-3); }
.pb-avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; object-position: 30% 50%;
  border: 1px solid var(--color-blue-700);
}
.pb-byline__text { display: flex; flex-direction: column; gap: 1px; line-height: normal; }
.pb-byline__name { font-weight: 600; font-size: var(--fs-small); color: var(--color-text); }
.pb-byline__meta { font-size: var(--fs-small); color: var(--color-text-muted); }
.pb-byline--lg { gap: var(--space-3); }
.pb-byline--lg .pb-byline__text { gap: 2px; }
.pb-byline--lg .pb-byline__name { font-size: var(--fs-small); }   /* same as the card bylines */
.pb-byline--hero .pb-avatar { width: 52px; height: 52px; border-color: var(--color-white); }
.pb-byline--hero .pb-byline__text { gap: 2px; }
.pb-byline--hero .pb-byline__name { font-size: var(--fs-body); color: var(--color-white); }
.pb-byline--hero .pb-byline__meta { font-size: var(--fs-body); color: var(--color-on-dark-muted); }

/* ==========================================================================
   Playbook list
   ========================================================================== */
.pb-library { background: var(--pb-bg); padding-block: var(--section-pad-y); }
.pb-library__inner { display: flex; flex-direction: column; gap: var(--space-7); }
.pb-library__inner > * { min-width: 0; }

.pb-tools { display: flex; flex-direction: column; gap: var(--space-5); }
.pb-tools__intro { max-width: var(--measure-head); color: var(--color-blue-700); }   /* band H2 (.display-lg) */
.pb-search {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; max-width: var(--measure-body); height: 56px; padding-inline: var(--space-5);
  background: var(--color-white); border-radius: var(--radius-pill);
  box-shadow: var(--pb-ring);
}
.pb-search:focus-within { box-shadow: inset 0 0 0 2px var(--color-blue-700); }
.pb-search img { flex: none; }
.pb-search input {
  flex: 1; min-width: 0; height: 44px; padding: 0;
  border: 0; outline: 0; background: transparent;
  font: 400 var(--fs-body)/normal var(--font-body); color: var(--color-text);
}
.pb-search input::placeholder { color: var(--color-placeholder); }

.pb-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pb-chip {
  height: 44px; padding-inline: var(--space-5); border-radius: var(--radius-pill);
  background: var(--color-white); box-shadow: var(--pb-ring);
  font-weight: 600; font-size: var(--fs-small); letter-spacing: 0.04em;
  text-transform: uppercase; line-height: normal; color: var(--color-blue-700);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pb-chip:active { transform: scale(0.95); }
.pb-chip:hover { box-shadow: inset 0 0 0 1px var(--color-blue-700); }
.pb-chip[aria-pressed="true"] { background: var(--color-blue-700); color: var(--color-white); box-shadow: none; }

/* Featured card */
.pb-featured {
  width: 100%;
  display: grid; grid-template-columns: minmax(0, 960fr) minmax(0, 720fr);
  min-height: 465px; overflow: hidden;
  transition: border-color var(--dur-mid) var(--ease), transform var(--dur-fast) var(--ease);
}
.pb-featured:hover { border-color: var(--color-blue-700); }
.pb-featured:active { transform: scale(0.995); }
.pb-featured__media { position: relative; background: var(--color-blue-700); min-height: 280px; }
.pb-featured__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pb-featured__body {
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-4);
  padding: var(--card-pad);
}
.pb-featured__body .pb-crumbs .pb-label:first-child { color: var(--color-blue-700); }
.pb-featured__title { color: var(--color-blue-700); line-height: var(--lh-tight); text-wrap: balance; }
.pb-featured__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-muted); }
.pb-featured .pb-byline { gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--pb-line); }

/* Card grid (list + keep reading) */
.pb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.pb-card {
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color var(--dur-mid) var(--ease), transform var(--dur-fast) var(--ease);
}
.pb-card:hover { border-color: var(--color-blue-700); }
.pb-card:active { transform: scale(0.99); }
/* Card clips its corners, so draw the focus ring inside */
.pb-card__link:focus-visible { outline-offset: -3px; border-radius: var(--radius-lg); }
.pb-card[hidden] { display: none; }
.pb-card__link { flex: 1; display: flex; flex-direction: column; }
.pb-card__media { aspect-ratio: 16 / 10; background: var(--color-blue-700); overflow: hidden; }
.pb-card__media img { width: 100%; height: 100%; object-fit: cover; }
.pb-card__body { flex: 1; display: flex; flex-direction: column; }
.pb-card__title { margin-top: var(--space-3); color: var(--color-blue-700); line-height: var(--lh-tight); text-wrap: balance; }
.pb-card__text { margin-top: var(--space-3); margin-bottom: var(--space-4); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-muted); }
.pb-card .pb-byline { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--pb-line); }

.pb-empty { text-align: center; font-size: var(--fs-body); color: var(--color-text-muted); }

.pb-more { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.pb-more__btn[hidden] { display: none; }
.pb-more__count { font-size: var(--fs-small); line-height: normal; color: var(--color-text-muted); }

/* Newsletter */
.pb-newsletter {
  display: grid; grid-template-columns: minmax(0, 900fr) minmax(0, 780fr); gap: var(--space-7); align-items: center;
}
.pb-newsletter__copy { display: flex; flex-direction: column; gap: var(--space-3); }
.pb-newsletter__copy .pb-label { color: var(--color-on-dark-muted); }
.pb-newsletter__text { max-width: var(--measure-intro); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-on-dark-muted); }
.pb-newsletter__form { display: flex; flex-direction: column; gap: var(--space-3); }
.pb-newsletter__row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pb-newsletter__input {
  flex: 1 0 0; min-width: 200px; height: 44px; padding: 0 var(--space-5);
  border: 1px solid var(--glass-photo-line); border-radius: var(--radius-pill);
  background: var(--glass-bg); outline: 0;
  font: 400 var(--fs-body)/normal var(--font-body); color: var(--color-white);
}
.pb-newsletter__input::placeholder { color: var(--color-on-dark-faint); }
.pb-newsletter__input:focus { border-color: var(--color-yellow-400); }
/* Submit = .btn .btn--yellow (primary CTA on dark, same as hero) */
.pb-newsletter__note { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--color-on-dark-muted); }

/* ==========================================================================
   Playbook post
   ========================================================================== */
.pb-article-wrap { background: var(--pb-bg); padding-block: var(--section-pad-y); }
.pb-article-grid {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--space-8); align-items: start;
}

/* Table of contents */
.pb-toc { position: sticky; top: calc(var(--header-h) + var(--space-5)); max-height: calc(100vh - 124px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--space-4); }
.pb-toc__list { display: flex; flex-direction: column; gap: var(--space-2); }
.pb-toc__link {
  display: block; padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-left: 2px solid var(--pb-line-strong);
  font-size: var(--fs-small); line-height: var(--lh-body); color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pb-toc__link:hover { color: var(--color-blue-700); border-left-color: var(--color-blue-700); }
.pb-toc__link[aria-current="true"] { border-left-color: var(--color-yellow-400); font-weight: 600; color: var(--color-blue-700); }

/* Article body */
.pb-article { display: flex; flex-direction: column; gap: var(--space-7); max-width: var(--measure-body); min-width: 0; }
.pb-article [id] { scroll-margin-top: calc(var(--header-h) + var(--space-5)); }
.pb-article__lead { font-weight: 400; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--color-blue-700); }

.pb-takeaways {
  display: flex; flex-direction: column; gap: var(--space-4);
}
.pb-takeaways__list { display: flex; flex-direction: column; gap: var(--space-3); }
.pb-takeaways__list li {
  position: relative; padding-left: var(--space-5);
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-muted);
}
.pb-takeaways__list li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--color-blue-700);
}

.pb-section { display: flex; flex-direction: column; border-top: 1px solid var(--color-hairline); padding-top: var(--space-6); }
.pb-section .pb-label { color: var(--color-blue-700); }
.pb-section__title { margin-top: var(--space-3); color: var(--color-blue-700); line-height: var(--lh-tight); text-wrap: balance; }
.pb-section p.pb-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-muted); }
.pb-section__title + .pb-body { margin-top: var(--space-5); }
.pb-body + .pb-body { margin-top: var(--space-4); }

.pb-media { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); }
.pb-media__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.pb-figure { display: flex; flex-direction: column; gap: var(--space-2); }
.pb-figure__frame { position: relative; overflow: hidden; background: var(--color-neutral-250); aspect-ratio: var(--pb-art-ratio); }   /* the art's own shape: nothing cropped */
.pb-figure__frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.pb-figure--video .pb-figure__frame { aspect-ratio: 820 / 461.25; background: var(--color-navy-900); }
.pb-figure--video .pb-figure__frame img { object-position: center; }
.pb-figure--video .pb-figure__frame::after { content: ""; position: absolute; inset: 0; background: var(--overlay-dim); pointer-events: none; }
.pb-figure figcaption { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--color-text-muted); }
.pb-play {
  position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 104px; height: 74px; padding-left: 6px; border-radius: var(--radius-lg);
  background: var(--color-red-play);
  transition: transform var(--dur-fast) var(--ease);
}
.pb-play:hover { transform: translate(-50%, -50%) scale(1.05); }
.pb-play:active { transform: translate(-50%, -50%) scale(0.95); }
.pb-play::before {
  content: ""; width: 0; height: 0;
  border-style: solid; border-width: 15px 0 15px 24px;
  border-color: transparent transparent transparent var(--color-navy-900);
}

.pb-quote { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-2) 0 var(--space-2) var(--space-6); border-left: 4px solid var(--color-yellow-400); }
.pb-quote p { color: var(--color-blue-700); line-height: var(--lh-tight); text-wrap: balance; }
.pb-quote cite { font-style: normal; }

.pb-author {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-6); align-items: start;
  padding-top: var(--space-7); border-top: 1px solid var(--color-hairline);
}
.pb-author__photo { width: 120px; height: 120px; border-radius: var(--radius-lg); object-fit: cover; object-position: center 25%; }
.pb-author__body { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.pb-author__name { color: var(--color-blue-700); line-height: var(--lh-tight); }
.pb-author__bio { max-width: var(--measure-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-muted); }
/* Text links = .link-underline (style guide); padded to a 44px target */
.pb-author__link, .pb-related__all { display: inline-flex; align-items: flex-end; min-height: 44px; transition: border-color var(--dur-fast) var(--ease); }
.pb-author__link { margin-top: var(--space-2); }
.pb-author__link:hover { border-bottom-color: var(--color-blue-700); }

/* Keep reading */
.pb-related {
  padding-block: var(--section-pad-y);
  background: var(--gradient-dark);
  color: var(--color-white);
}
.pb-related__inner { display: flex; flex-direction: column; gap: var(--space-7); }
.pb-related__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.pb-related :focus-visible { outline-color: var(--color-yellow-400); }   /* dark band: yellow ring like base.css */
.pb-related__all { color: var(--color-white); }
.pb-related__all:hover { border-bottom-color: var(--color-white); }
.pb-card--dark:hover { border-color: var(--color-on-dark-faint); }   /* fill + line: base.css .card--glass */
.pb-card--dark .pb-card__media { background: var(--color-navy-800); }
.pb-card--dark .pb-card__body { gap: var(--space-3); }
.pb-card--dark .pb-label { color: var(--color-on-dark-muted); }
.pb-card--dark .pb-card__title { margin-top: 0; color: var(--color-white); }
.pb-card--dark .pb-card__date { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--color-on-dark-muted); }

.pb-pager {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); row-gap: var(--space-5);
  padding-top: var(--space-6); border-top: 1px solid var(--color-line-on-dark);
  font-weight: 600; line-height: normal;
}
.pb-pager a { display: flex; flex-direction: column; gap: var(--space-1); min-height: 44px; min-width: 0; }
.pb-pager__title { transition: color var(--dur-fast) var(--ease); }
.pb-pager a:hover .pb-pager__title { color: var(--color-yellow-400); }
.pb-pager__next { align-items: flex-end; text-align: right; justify-self: end; }
.pb-pager .pb-label { color: var(--color-on-dark-muted); }
.pb-pager__title { font-size: var(--fs-tagline); color: var(--color-white); }

/* CTA */
.pb-cta-wrap { background: var(--pb-bg); padding-block: var(--section-pad-y); }
.pb-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6);
}
.pb-cta__copy { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--measure-intro); }
.pb-cta__title { color: var(--color-blue-700); line-height: var(--lh-tight); text-wrap: balance; }
.pb-cta__text { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--color-text-muted); }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Steps follow tokens.css: 1068 (tablet) and 734 (phone) */
@media (max-width: 1068px) {
  .pb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-featured { grid-template-columns: minmax(0, 1fr); }
  .pb-featured__media { aspect-ratio: var(--pb-art-ratio); min-height: 0; }   /* stacked: the whole art, same shape as the cards */
  .pb-article-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .pb-toc { position: static; max-height: none; overflow: visible; padding: var(--card-pad-sm); background: var(--color-white); border-radius: var(--radius-lg); border: 1px solid var(--color-hairline); }   /* = .card--white */
  .pb-toc, .pb-article { max-width: var(--measure-body); }
  .pb-toc__link { padding-block: var(--space-3); }   /* 44px touch target */
}
@media (max-width: 1279px) {
  .pb-newsletter { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
@media (max-width: 734px) {
  .pb-search { height: 52px; padding-inline: var(--space-4); }
  .pb-chip { padding-inline: var(--space-4); }   /* chips wrap to 2 rows: nothing is cut off */
  .pb-grid { grid-template-columns: 1fr; }
  .pb-featured__body { padding: var(--card-pad-sm); }
  .pb-newsletter__input { min-width: 0; flex-basis: 100%; }
  .pb-newsletter__submit { flex: 1; }
  .pb-post-meta { flex-direction: column; align-items: flex-start; }
  .pb-media__pair { grid-template-columns: 1fr; }
  .pb-play { width: 72px; height: 52px; }
  .pb-play::before { border-width: 11px 0 11px 17px; }
  .pb-quote { padding-left: var(--space-5); }
  .pb-author { grid-template-columns: 1fr; gap: var(--space-5); padding-top: var(--space-6); }
  .pb-pager { grid-template-columns: 1fr; }
  .pb-pager__next { justify-self: start; align-items: flex-start; text-align: left; }
  .pb-pager__title { font-size: var(--fs-body); }
  .pb-cta .btn { width: 100%; white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pb-card, .pb-featured, .pb-chip, .pb-share__btn, .pb-play { transition: none; }
  .pb-card:active, .pb-featured:active, .pb-chip:active, .pb-share__btn:active { transform: none; }
  .pb-play:hover, .pb-play:active { transform: translate(-50%, -50%); }
}

/* Size system 2026-10-13 (restored 2026-10-15): no orphan card on tablet — an odd last VISIBLE
   card spans the row and keeps a banner-shaped image. Counts visible cards only, so filters work. */
@media (min-width: 735px) and (max-width: 1068px) {
  .pb-grid > :nth-child(odd of :not([hidden])):not([hidden]):not(:has(~ :not([hidden]))) { grid-column: 1 / -1; }
  .pb-grid > :nth-child(odd of :not([hidden])):not([hidden]):not(:has(~ :not([hidden]))) .pb-card__link { flex-direction: row; }
  .pb-grid > :nth-child(odd of :not([hidden])):not([hidden]):not(:has(~ :not([hidden]))) .pb-card__media { flex: 0 0 50%; align-self: center; }   /* whole art, never a banner crop */
  .pb-grid > :nth-child(odd of :not([hidden])):not([hidden]):not(:has(~ :not([hidden]))) .pb-card__body { flex: 1; justify-content: center; }
}
@media (min-width: 735px) and (max-width: 1068px) {
  .pb-hero__title { text-wrap: balance; }   /* no one-word last line ("DECADE") */
}

/* ==========================================================================
   Premium polish 2026-10-15 — depth, eyebrows, measure, rhythm. Tokens only
   (every rgba() below is the navy / brand blue / yellow palette colour at alpha).
   Loads after the rules above; same or higher specificity wins on purpose.
   ========================================================================== */
:root {
  --pb-measure-article: 68ch;                 /* article + legal reading column */
  --pb-lh-article: 1.6;                       /* long-form body */
  --pb-shadow-card: var(--shadow-card-soft);   /* resting card on a light band (tokens.css) */
  --pb-link-line: rgba(24, 61, 137, 0.35);    /* underline under in-text links */
  --pb-glow-blue-soft: rgba(24, 61, 137, 0.06);
  --pb-shadow-card-hover: 0 2px 4px rgba(2, 6, 21, 0.05), 0 18px 40px rgba(2, 6, 21, 0.12);   /* lift on a light band (the .32 lift read as a grey smudge) */
  --pb-art-ratio: 40 / 21;                    /* the thumbnails' own 1200x628 shape: nothing cropped */
  --pb-art-grade: var(--photo-grade);         /* one grade for every photo on the site (base.css) */
}

/* ---- Hero: overlay, min-height, padding and subtitle come from polish.css (shared inner-hero rule) ---- */
.pb-hero__title { text-wrap: balance; }
.pb-hero--post .pb-crumbs { margin-bottom: 0; }
.pb-hero--post .pb-hero__title { margin-top: var(--space-2); }
.pb-hero--post .pb-hero__text { margin-top: var(--gap-head-intro); }
.pb-hero--post .pb-post-meta { margin-top: var(--space-6); padding-top: var(--space-5); }
.pb-byline--hero .pb-avatar { box-shadow: var(--shadow-rest); }

/* ---- Eyebrow labels: 24px yellow rule before (same recipe as base .kicker) ---- */
.pb-label--bold, .pb-section > .pb-label, .pb-newsletter__copy .pb-label,
.pb-featured__body .pb-crumbs .pb-label:first-child, .pb-share > .pb-label {
  display: inline-flex; align-items: center; gap: var(--space-3);
}
.pb-label--bold::before, .pb-section > .pb-label::before, .pb-newsletter__copy .pb-label::before,
.pb-featured__body .pb-crumbs .pb-label:first-child::before {
  content: ""; flex: none; width: var(--space-5); height: 2px; border-radius: 2px; background: var(--color-yellow-400);
}
.pb-article-wrap .pb-label--bold, .pb-article-wrap .pb-section > .pb-label { color: var(--color-blue-700); }
/* card category = small yellow dot */
.pb-card__body > .pb-label { display: inline-flex; align-items: center; gap: var(--space-2); }
.pb-card__body > .pb-label::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--color-yellow-400); }

/* ---- Light bands: white → neutral gradient instead of a flat fill ---- */
.pb-article-wrap { background: linear-gradient(180deg, var(--color-white) 0, var(--color-neutral-100) 480px); }   /* bright strip under the hero, quiet grey behind the article */
.pb-library {
  background:
    radial-gradient(55% 35% at 100% 0%, rgba(35, 136, 255, 0.07) 0%, rgba(35, 136, 255, 0) 100%),
    linear-gradient(180deg, var(--color-white) 0%, var(--color-neutral-100) 14%, var(--color-neutral-300) 100%);
}
.pb-cta-wrap { background: linear-gradient(180deg, var(--color-neutral-100) 0%, var(--color-white) 100%); }

/* ---- Library tools: strong intro, 48px search pill, chips at 250ms ---- */
.pb-tools { gap: var(--gap-head-intro); }
.pb-search { height: var(--btn-h); padding-inline: var(--space-4) var(--space-5); background: var(--color-white); box-shadow: inset 0 0 0 1px var(--hairline-light-strong), var(--pb-shadow-card); transition: box-shadow var(--dur-mid) var(--ease); }
.pb-search:hover { box-shadow: inset 0 0 0 1px rgba(2, 6, 21, 0.28), var(--pb-shadow-card); }
.pb-search:focus-within { box-shadow: inset 0 0 0 1px var(--color-blue-700), var(--focus-ring-light); }
.pb-search input { height: var(--btn-h); }
.pb-search img { opacity: .72; }
.pb-filters { gap: var(--space-2); }
.pb-chip {
  height: var(--btn-h); padding-inline: var(--space-5); font-size: var(--btn-fs); letter-spacing: var(--ls-btn);   /* 48px = same pill height as the search */
  box-shadow: inset 0 0 0 1px var(--hairline-light-strong);
  transition: background-color var(--dur-mid) var(--ease), color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.pb-chip:hover { background: var(--tint-brand); box-shadow: inset 0 0 0 1px var(--color-blue-700); }
.pb-chip[aria-pressed="true"] { background: var(--color-blue-700); color: var(--color-white); box-shadow: var(--shadow-btn-blue); }
.pb-chip[aria-pressed="true"]:hover { background: var(--color-blue-800); }
.pb-library__inner { gap: var(--gap-intro-content); }
.pb-library__inner > .pb-filters { margin-top: calc(-1 * var(--space-4)); }

/* ---- Cards: whole art (40:21), soft rest shadow, 250ms lift with a soft shadow ---- */
.pb-card, .pb-featured {
  box-shadow: var(--pb-shadow-card);
  transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease);
}
.pb-card:hover, .pb-featured:hover { border-color: var(--hairline-light-strong); }
.pb-library .pb-card:hover, .pb-featured:hover { box-shadow: var(--pb-shadow-card-hover); }
.pb-card__media { aspect-ratio: var(--pb-art-ratio); }
.pb-card__media img, .pb-featured__media img, .pb-figure:not(.pb-figure--video) .pb-figure__frame img { filter: var(--pb-art-grade); }
.pb-card__media::after, .pb-featured__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 6, 21, 0) 45%, rgba(2, 6, 21, 0.28) 100%);
}
.pb-card__media { position: relative; }
.pb-card__body { padding: var(--card-pad-sm) var(--card-pad-sm) var(--card-pad-sm); gap: 0; }
.pb-card__title { margin-top: var(--space-3); line-height: var(--lh-display); text-wrap: pretty; }
/* no fixed title height: bylines are already bottom-aligned (margin-top:auto), excerpts follow their title */
.pb-card__text { max-width: var(--measure-intro); margin-top: var(--space-3); margin-bottom: var(--space-5); }
.pb-card .pb-byline, .pb-featured .pb-byline { border-top-color: var(--hairline-light); }
.pb-avatar { border: 0; box-shadow: 0 0 0 1px var(--hairline-light-strong); }
/* featured art fills its column (object-fit cover, as step 1); the row height is set by the text */
.pb-featured { min-height: 0; }
.pb-featured__media { overflow: hidden; }
.pb-featured__body { padding: var(--card-pad-sm); gap: var(--space-4); }   /* text is centred; short block padding keeps the row at the art's height */
.pb-featured__title { line-height: var(--lh-display); }
.pb-featured__text { max-width: var(--measure-intro); }
.pb-featured:active, .pb-card:active { transform: translateY(-2px); }

.pb-more { gap: var(--space-4); }

/* ---- Newsletter panel: floats, 48px input with focus ring ---- */
.pb-newsletter { box-shadow: var(--shadow-rest); border: 1px solid var(--hairline-dark); background-origin: border-box; }
.pb-card--dark, .pb-cta { background-origin: border-box; }
.pb-newsletter__copy { gap: var(--space-4); }
.pb-newsletter__copy .pb-label { margin-bottom: calc(-1 * var(--space-1)); }
.pb-newsletter__input {
  height: var(--btn-h); background: var(--input-on-dark-bg); border-color: var(--input-on-dark-line);
  transition: border-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.pb-newsletter__input:hover { border-color: var(--color-ring-on-dark); }
.pb-newsletter__input:focus { border-color: var(--color-yellow-400); box-shadow: var(--focus-ring-dark); }

/* ---- Article: 68ch reading column (grid = step-1: TOC rail left, article next to it) ---- */
.pb-article { max-width: var(--pb-measure-article); gap: var(--space-8); }
.pb-article__lead { color: var(--color-text); font-size: var(--fs-lead); line-height: var(--lh-lead); }
.pb-section p.pb-body, .pb-takeaways__list li, .pb-author__bio { line-height: var(--pb-lh-article); }
.pb-section { padding-top: var(--space-7); }
.pb-section__title { margin-top: var(--gap-head-intro); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.pb-section__title:first-child { margin-top: 0; }
.pb-section__title + .pb-body, .pb-section__title + .pb-takeaways__list { margin-top: var(--gap-head-intro); }
.pb-body + .pb-body { margin-top: var(--space-4); }
.pb-section .pb-body + .pb-takeaways__list, .pb-section .pb-takeaways__list + .pb-body { margin-top: var(--space-4); }
.pb-section .pb-takeaways__list { gap: var(--space-3); }
.pb-section .pb-takeaways__list li::before { box-shadow: none; }   /* no white halo on the grey band */
.pb-takeaways__list li::before { background: var(--color-yellow-400); box-shadow: 0 0 0 2px var(--color-white); top: 0.65em; }
.pb-article strong { color: var(--color-text); }
.pb-body a, .pb-takeaways__list a {
  color: var(--color-blue-700);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--pb-link-line);
  transition: text-decoration-color var(--dur-mid) var(--ease), color var(--dur-mid) var(--ease);
}
.pb-body a:hover, .pb-takeaways__list a:hover { text-decoration-color: var(--color-blue-700); color: var(--color-blue-800); }
.pb-takeaways { gap: var(--space-5); box-shadow: var(--pb-shadow-card); }
.pb-takeaways .pb-takeaways__list li::before { box-shadow: 0 0 0 2px var(--color-white); }
.pb-media { margin-top: var(--space-7); }
.pb-figure__frame { border-radius: var(--radius-lg); }
.pb-figure figcaption { padding-top: var(--space-1); }

/* TOC rail */
.pb-toc { gap: var(--space-5); }
.pb-toc__list { gap: 0; }
.pb-toc__link { padding-block: var(--space-2); border-left-color: var(--hairline-light-strong); transition: color var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease), background-color var(--dur-mid) var(--ease); }
.pb-toc__link:hover { background: var(--tint-brand); }
.pb-toc__link[aria-current="true"] { border-left-width: 2px; }

/* Author box */
.pb-author { padding-top: var(--space-8); gap: var(--space-6); }
.pb-author__photo { box-shadow: var(--shadow-rest); }
.pb-author__name { margin-top: var(--space-1); }

/* ---- Keep reading: glow band, glass cards ---- */
.pb-related { background: var(--gradient-dark-glow); }
.pb-related__inner { gap: var(--gap-intro-content); }
.pb-card--dark { box-shadow: none; }
.pb-card--dark:hover { border-color: var(--color-ring-on-dark); box-shadow: var(--shadow-lift); }
.pb-card--dark .pb-card__body { padding: var(--card-pad-sm); }
.pb-card--dark .pb-card__title { margin-top: var(--space-3); }
.pb-card--dark .pb-card__date { margin-top: auto; padding-top: var(--space-4); }
.pb-pager { padding-top: var(--space-7); border-top-color: var(--hairline-dark); }
.pb-pager a { gap: var(--space-2); }
.pb-pager .pb-label { display: inline-flex; align-items: center; gap: var(--space-2); }
.pb-pager a:not(.pb-pager__next) .pb-label::before, .pb-pager__next .pb-label::after {
  content: ""; width: 7px; height: 7px; border-left: 2px solid var(--color-yellow-400); border-bottom: 2px solid var(--color-yellow-400);
  transform: rotate(45deg); margin-bottom: 1px; transition: transform var(--dur-mid) var(--ease);
}
.pb-pager__next .pb-label::after { transform: rotate(-135deg); }
.pb-pager a:hover:not(.pb-pager__next) .pb-label::before { transform: rotate(45deg) translate(-2px, 2px); }
.pb-pager__next:hover .pb-label::after { transform: rotate(-135deg) translate(-2px, 2px); }
.pb-pager__title { max-width: var(--measure-intro); transition: color var(--dur-mid) var(--ease); }

/* ---- CTA panel: floats on the quiet band ---- */
.pb-cta { box-shadow: var(--shadow-rest); background: linear-gradient(180deg, var(--color-white) 0%, var(--color-neutral-300) 100%); position: relative; overflow: hidden; }
.pb-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 80% at 0% 50%, var(--pb-glow-blue-soft) 0%, rgba(24, 61, 137, 0) 100%); }
.pb-cta > * { position: relative; }
.pb-cta__copy { gap: var(--space-4); }
.pb-cta__title { line-height: var(--lh-display); letter-spacing: var(--ls-display); max-width: var(--measure-statement); }

/* ---- Tablet ---- */
@media (max-width: 1068px) {
  .pb-toc { box-shadow: var(--shadow-card-soft); }
  .pb-toc, .pb-article { max-width: var(--pb-measure-article); }
  .pb-toc__link { padding-block: var(--space-3); }
  .pb-chip { height: var(--btn-h); }   /* touch widths: chips >= 44px like every button */
}
/* ---- Phone ---- */
@media (max-width: 734px) {
  .pb-hero--post .pb-hero__title { font-size: var(--fs-display-xl); }
  .pb-search { height: var(--btn-h); }
  .pb-chip { height: var(--btn-h); padding-inline: var(--space-4); }
  .pb-hero__text { text-wrap: pretty; }
  .pb-card__body { padding: var(--card-pad-sm); }
  .pb-featured__body { padding: var(--card-pad-sm); }
  .pb-article-grid { gap: var(--space-6); }
  .pb-article { gap: var(--space-7); }
  .pb-section { padding-top: var(--space-6); }
  .pb-author { padding-top: var(--space-7); }
  .pb-pager__title { max-width: none; }
  .pb-cta__title { max-width: none; }
}

/* ==========================================================================
   Hierarchy pass 2026-10-15 — hero eyebrow, library band head + toolbar, one article set
   ========================================================================== */
/* Hero eyebrow: .pb-hero__inner already spaces items by 24px, so the kicker adds no margin */

/* Library band head = site pattern: kicker + Bebas H2, then the search */
.pb-tools { gap: var(--gap-head-intro); }
.pb-tools > .kicker { margin-bottom: 0; }
.pb-search { margin-top: var(--space-2); }   /* H2 -> search 28px; kicker -> H2 stays 20px */
@media (max-width: 1068px) {
  .pb-tools__intro { max-width: none; }   /* 2 lines on tablet, not 3 */
  .pb-search { max-width: none; }   /* tablet: right edge lines up with the cards below */
}
/* desktop toolbar: headline left, search pill right on the H2 baseline */
@media (min-width: 1069px) {
  .pb-tools {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    align-items: end; column-gap: var(--space-7); row-gap: var(--gap-head-intro);
  }
  .pb-tools > .kicker, .pb-tools > h2 { grid-column: 1; }
  .pb-tools__intro { max-width: none; }
  .pb-search { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; max-width: none; }
}

/* Featured card heads the same article set: featured -> grid gap = the grid gap */
.pb-library__inner > article:has(.pb-featured):not([hidden]) + .pb-grid { margin-top: calc(var(--grid-gap) - var(--gap-intro-content)); }

/* Tablet: shorter hero so the library starts on the first screen. The featured card stays stacked
   (side by side at 900-1068px cropped the baked-in text of the art to about half its width). */


/* ---- Cards revealed later (Load more, filter chips): same fade + 24px rise as the scroll reveal.
        motion.js sets transition:none while it reveals the first cards, so this only runs for
        cards that appear afterwards. ---- */
@media (prefers-reduced-motion: no-preference) {
  .pb-grid > .pb-card {
    transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease),
                opacity var(--dur-slow) var(--ease-out), translate var(--dur-slow) var(--ease-out);
  }
  @starting-style {
    .pb-grid > .pb-card { opacity: 0; translate: 0 var(--rise-y); }
  }
}

/* ---- Reduced motion: the rules above re-declare transitions, so switch movement off again ---- */
@media (prefers-reduced-motion: reduce) {
  .pb-card, .pb-featured, .pb-chip { transition: none; }
  .pb-card:active, .pb-featured:active, .pb-chip:active { transform: none; }
}

/* ==========================================================================
   Area 5 (2026-10-15) — art never cropped, centred reading column, legal template, phone chips
   ========================================================================== */

/* ---- Featured card on desktop: the art keeps its own 40:21 shape, text centres beside it ---- */
@media (min-width: 1069px) {
  .pb-featured { align-items: center; }
  .pb-featured__media { aspect-ratio: var(--pb-art-ratio); min-height: 0; }
  /* one visible grid card (a filter left a single result): same side-by-side shape as the featured card */
  .pb-grid > :nth-child(1 of :not([hidden])):not([hidden]):not(:has(~ :not([hidden]))) { grid-column: 1 / -1; }
  .pb-grid > :nth-child(1 of :not([hidden])):not([hidden]):not(:has(~ :not([hidden]))) .pb-card__link { display: grid; grid-template-columns: minmax(0, 960fr) minmax(0, 720fr); align-items: center; }
  .pb-grid > :nth-child(1 of :not([hidden])):not([hidden]):not(:has(~ :not([hidden]))) .pb-card__body { justify-content: center; }
}

/* ---- Eyebrow rule on the post / legal hero crumbs (same slot as the list hero kicker) ---- */
.pb-hero--post .pb-crumbs::before { content: ""; flex: none; width: var(--space-5); height: 2px; border-radius: 2px; background: var(--color-yellow-400); margin-right: var(--space-1); }

/* ---- Reading column: TOC rail + 68ch article centred; hero copy sits on the same box ---- */
@media (min-width: 1069px) {
  .pb-article-grid { grid-template-columns: 260px minmax(0, var(--pb-measure-article)); justify-content: center; }
  .pb-hero--post .pb-hero__inner { max-width: calc(260px + var(--space-8) + var(--pb-measure-article)); margin-inline: auto; }
}
@media (min-width: 735px) and (max-width: 1068px) {
  .pb-article-grid { justify-items: center; }
  .pb-toc, .pb-article { width: 100%; }
  .pb-hero--post .pb-hero__inner { max-width: var(--pb-measure-article); margin-inline: auto; }
}

/* ---- Search: no browser-blue clear button ---- */
.pb-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ---- Keep reading head stacks on phone ---- */
@media (max-width: 734px) {
  .pb-related__head { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* ---- Legal pages (privacy, terms, cookies): short hero, calm clauses, collapsible TOC ---- */
html .pb-hero.pb-hero--legal { min-height: calc(400px + var(--header-h)); }
@media (max-width: 1068px) { html .pb-hero.pb-hero--legal { min-height: calc(340px + var(--header-h)); } }
@media (max-width: 734px) { html .pb-hero.pb-hero--legal { min-height: 0; } }
.pb-article > .pb-section:first-child { border-top: 0; padding-top: 0; }
.pb-article--legal { gap: var(--space-7); }
.pb-article--legal .pb-section { padding-top: var(--space-6); }
.pb-article--legal .pb-section:first-child { padding-top: 0; }
.pb-article--legal .pb-section__title { font-size: var(--fs-display-sm); }
.pb-toc__details > summary { display: flex; list-style: none; cursor: default; }
.pb-toc__details > summary::-webkit-details-marker { display: none; }
.pb-toc__details[open] > summary { margin-bottom: var(--space-5); }
@media (min-width: 735px) { .pb-toc__details > summary { pointer-events: none; } }
@media (min-width: 735px) and (max-width: 1068px) {
  .pb-toc__list { display: block; column-count: 2; column-gap: var(--space-5); }
  .pb-toc__list li { break-inside: avoid; }
}
@media (max-width: 734px) {
  .pb-toc__details > summary { cursor: pointer; align-items: center; min-height: 44px; margin-block: calc(-1 * var(--space-3)); }
  .pb-toc__details > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: auto; margin-right: var(--space-1); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--dur-mid) var(--ease); align-self: center; }
  .pb-toc__details[open] > summary::after { transform: rotate(-135deg); }
  .pb-toc__details[open] > summary { margin-bottom: var(--space-2); }
}