/* ===========================================================================
   PBK MEDIA — SHARED EDITORIAL SYSTEM
   ===========================================================================
   ONE set of components for EVERY publication. Karibu Living, PBK Insights and
   every future title use the rules below unchanged; the only thing that varies
   is the --pm-* custom properties, which the generator emits per publication
   from its `identity` record (see templates/masters/partial.theme.css).

   That is the load-bearing decision in this file. Adding a publication must
   add ZERO lines of CSS. If you ever find yourself writing
   `[data-publication="something"] .pm-feature { … }`, the abstraction has
   broken — fix the component or add a token, do not special-case a title.

   RELATIONSHIP TO style.css
   The corporate stylesheet loads first and supplies the shared site header,
   footer and button chrome. It is built for a dark navy page: a fixed
   gradient wash behind everything, pale text, transparent footer. PBK Media
   pages are light editorial documents, so this file neutralises the wash and
   re-grounds the footer. Load order matters — media.css must come second.

   DESIGN BENCHMARK
   Karibu Living, as instructed: a generous prose measure, a heavy display
   face against light sans body text, hairline rules, wide margins, and
   restraint. Monocle / Aesop Journal territory. The commercial material is
   quarantined at the bottom of the page and deliberately looks different from
   the editorial above it.

   ACCESSIBILITY
   Accent colours come in two cuts. --pm-accent is the brand value and is used
   for RULES, HAIRLINES and aria-hidden GLYPHS. --pm-accent-text is a darkened
   cut used for any accent-coloured TEXT on a light ground; every publication's
   value is computed against its own band colour by `pbkmedia validate`, which
   fails the build below 4.5:1. Same split for --pm-muted / --pm-muted-text.
   Rule of thumb: if a reader has to READ it and it sits on light, use -text.
   =========================================================================== */

:root {
  /* The PBK Media display face. Publications inherit this unless their
     identity names its own; see partial.theme.css. */
  --pm-display-default: 'Fraunces', Georgia, 'Times New Roman', serif;
  --pm-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Platform defaults — the approved PBK Media brand system (go-live,
     2026-08-03): PBK Navy, Editorial Gold, Warm Ivory, Charcoal.
     --pm-accent-text is a darkened cut of Editorial Gold: the raw brand
     value (#B58B2A) is 2.8:1 on Warm Ivory, below the 4.5:1 AA floor for
     text, so anywhere gold has to be READ rather than merely seen uses this
     cut instead. Same logic for --pm-accent-deep, which sits under white
     button text on hover and needs its own floor.
     A page that belongs to no single publication (the PBK Media home,
     /archive/) runs on these. */
  --pm-accent: #B58B2A;
  --pm-accent-text: #7A5C1C;
  --pm-accent-deep: #8A6820;
  --pm-ink: #082454;
  --pm-ink-deep: #222222;
  --pm-paper: #FEFDFB;
  --pm-paper-warm: #F7F3E9;
  --pm-band: #EFE8D7;
  --pm-muted: #9A9184;
  --pm-muted-text: #6B6355;
  --pm-display: var(--pm-display-default);

  --pm-measure: 38rem;      /* prose column — a comfortable line length */
  --pm-wide: 1180px;        /* page gutter maximum */
  --pm-narrow: 900px;       /* editorial maximum */
  --pm-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------------------------------------------------------------
   1. PAGE GROUND
   The corporate wash is a fixed dark gradient injected by main.js. It is right
   for the corporate pages and wrong here, so it is neutralised rather than
   fought with per-section backgrounds.
   --------------------------------------------------------------------------- */

.pm-body { background: var(--pm-paper); color: var(--pm-ink-deep);
  font-family: var(--pm-sans); font-size: 17px; line-height: 1.75;
  -webkit-font-smoothing: antialiased; }
.pm-body .bg-wash { display: none; }

.pm-body h1, .pm-body h2, .pm-body h3, .pm-body h4 {
  font-family: var(--pm-display); font-weight: 300; color: var(--pm-ink);
  line-height: 1.14; letter-spacing: -0.005em; }
.pm-body a { color: var(--pm-ink); }
.pm-body ::selection { background: var(--pm-ink); color: #fff; }
/* `height: auto` is load-bearing, not tidiness. Every <img> the generator
   emits carries width/height ATTRIBUTES (they reserve layout space and stop
   the article reflowing mid-sentence). Those attributes are presentational
   hints that map to the CSS width/height properties, so a rule that sets
   only `width: 100%` overrides the width hint and leaves the HEIGHT hint
   intact — the image then renders at 100% width by its raw pixel height and
   is visibly stretched. Without this line a 900x1600 portrait rendered
   560x1600 instead of 560x996. */
.pm-body img { max-width: 100%; height: auto; display: block; }

/* Focus is declared once, globally, so nothing added later can ship without
   a visible focus state. :focus-visible keeps it off mouse clicks. */
.pm-body a:focus-visible, .pm-body button:focus-visible,
.pm-body input:focus-visible, .pm-body select:focus-visible,
.pm-body [tabindex]:focus-visible {
  outline: 2px solid var(--pm-ink); outline-offset: 3px; border-radius: 1px; }
/* On dark grounds the ink ring disappears — use the accent there. */
.pm-body .pm-subscribe a:focus-visible,
.pm-body .pm-subscribe button:focus-visible,
.pm-body .pm-subscribe input:focus-visible,
.pm-body .site-footer a:focus-visible { outline-color: var(--pm-accent); }

/* The corporate footer is transparent pale-on-dark, designed to sit over the
   wash. With the wash gone it needs its own ground. A dark footer closing a
   light editorial page is also simply the right shape for the page. */
.pm-body .site-footer { background: var(--pm-ink-deep); color: #C5D5DF;
  border-top: none; margin-top: 0; }
.pm-body .site-footer h4 { color: #fff; font-family: var(--pm-sans);
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; }
.pm-body .site-footer a { color: #C5D5DF; }
.pm-body .site-footer a:hover { color: #fff; }
/* The social icons sit on a near-white disc, so they must NOT inherit the
   pale link colour above — that is #C5D5DF on #EFEFEF, effectively invisible.
   style.css already fixes this for the corporate pages, but its
   `.footer-col .social-links a` rule has the SAME specificity (0,2,1) as
   `.pm-body .site-footer a` here, and media.css loads second, so on PBK Media
   pages this file was silently winning and undoing the fix. Hence the extra
   `.pm-body` qualifier — it outranks rather than ties. */
.pm-body .site-footer .social-links a { color: var(--pm-ink); }
.pm-body .site-footer .social-links a:hover { color: #fff; }

/* ---------------------------------------------------------------------------
   2. LAYOUT PRIMITIVES
   --------------------------------------------------------------------------- */

.pm-section { max-width: var(--pm-wide); margin: 0 auto; padding: 84px 24px; }
.pm-section-head { display: flex; align-items: center; gap: 20px;
  margin-bottom: 40px; }
.pm-section-head .rule { flex: 1; height: 1px;
  background: var(--pm-accent); opacity: 0.45; }
.pm-section-head h2 { margin: 0; white-space: nowrap; }
.pm-section-lede { max-width: var(--pm-measure); margin: -20px auto 44px;
  text-align: center; color: var(--pm-muted-text); }
/* A centered eyebrow/heading/intro header, used ahead of a grid rather than
   prose (e.g. "What We Publish", "What X Covers") — the rule-flanked
   .pm-section-head reads better ahead of a single feature block. */
.pm-section-intro { max-width: var(--pm-measure); margin: 0 auto 44px;
  text-align: center; }
.pm-section-intro h2 { margin: 0 0 16px; }
.pm-section-intro .pm-section-lede { margin: 0; }
.pm-section-more { text-align: center; margin-top: 44px; }
.pm-section-more a { font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pm-accent-text); text-decoration: none; }
.pm-section-more a:hover { text-decoration: underline; }
.pm-section-more .arrow { transition: transform 0.2s var(--pm-ease);
  display: inline-block; }
.pm-section-more a:hover .arrow { transform: translateX(4px); }

/* The eyebrow: the small caps label above a heading. Uses the -text cut,
   because it is type on a light ground. */
.pm-eyebrow { display: block; font-family: var(--pm-sans); font-size: 0.72rem;
  font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pm-muted-text); margin-bottom: 14px; }
.pm-section-head .pm-eyebrow { color: var(--pm-accent-text); margin: 0; }

/* Metadata rule: "Issue 01 · August 2026 · 5 minute read". The separators are
   real elements and aria-hidden, so a screen reader hears the facts without
   hearing punctuation between them. */
.pm-meta { font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--pm-muted-text); margin-bottom: 16px; }
.pm-meta .sep { color: var(--pm-accent); }
.pm-byline { font-size: 0.8rem; letter-spacing: 0.04em;
  color: var(--pm-muted-text); margin-top: 4px; }

.pm-offsite-note { font-size: 0.78rem; color: var(--pm-muted-text);
  margin-top: 14px; font-style: italic; }

/* Reveal-on-scroll. Progressive enhancement, strictly.

   The marker class in the markup is .pm-reveal and it has NO styles of its
   own — it is only a hook for the script. What hides an element is
   .pm-reveal-pending, which JavaScript adds. So with JavaScript off, absent
   or broken, every element is simply visible.

   The prefix is not cosmetic. style.css defines a bare `.reveal { opacity: 0 }`
   for the corporate pages, revealed by its own `.is-visible` class. Reusing
   `reveal` here meant every PBK Media feature, card and archive row rendered
   at opacity 0 for any reader without JavaScript — the whole page blank. That
   is why nothing in PBK Media markup uses an unprefixed utility class. */
.pm-body .pm-reveal-pending { opacity: 0; transform: translateY(22px); }
.pm-body .pm-reveal-in { opacity: 1; transform: none;
  transition: opacity 0.7s var(--pm-ease), transform 0.7s var(--pm-ease); }
@media (prefers-reduced-motion: reduce) {
  .pm-body .pm-reveal-pending, .pm-body .pm-reveal-in {
    opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------------------
   3. BUTTONS
   Named pm-* rather than reusing .btn, so the corporate button styles and the
   editorial ones can evolve independently without either surprising the other.

   EVERY rule here is scoped under .pm-body, and that is load-bearing rather
   than tidiness. style.css sets a bare `a { color: var(--sky) }`, so this file
   needs `.pm-body a { color: var(--pm-ink) }` to re-ground link colour — and
   that selector (0,1,1) outranks a bare `.pm-btn-ink` (0,1,0). A solid navy
   button would therefore render navy text on a navy fill: invisible. Scoping
   the button rules the same way restores the intended order. Any new rule in
   this file that colours an <a> must be scoped under .pm-body for the same
   reason.
   --------------------------------------------------------------------------- */

.pm-body .pm-btn { display: inline-block; font-family: var(--pm-sans);
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 15px 30px; border: 1px solid transparent;
  border-radius: 2px; text-decoration: none; cursor: pointer;
  transition: background 0.25s var(--pm-ease), color 0.25s var(--pm-ease),
              border-color 0.25s var(--pm-ease); }
.pm-body .pm-btn-ink { background: var(--pm-ink); color: #fff;
  border-color: var(--pm-ink); }
.pm-body .pm-btn-ink:hover { background: var(--pm-ink-deep);
  border-color: var(--pm-ink-deep); color: #fff; }
.pm-body .pm-btn-accent { background: var(--pm-accent); color: var(--pm-ink-deep);
  border-color: var(--pm-accent); }
.pm-body .pm-btn-accent:hover { background: var(--pm-accent-deep);
  border-color: var(--pm-accent-deep); color: #fff; }
.pm-body .pm-btn-outline { background: transparent; color: var(--pm-ink);
  border-color: rgba(8, 36, 84, 0.35); }
.pm-body .pm-btn-outline:hover { background: var(--pm-ink); color: #fff;
  border-color: var(--pm-ink); }
.pm-body .pm-btn-quiet { background: transparent; color: var(--pm-ink);
  border-color: rgba(8, 36, 84, 0.18); }
.pm-body .pm-btn-quiet:hover { border-color: var(--pm-ink); color: var(--pm-ink); }
.pm-body .pm-btn.is-loading { opacity: 0.6; pointer-events: none; }
/* On the dark subscribe band the outline button needs light strokes. */
.pm-body .pm-subscribe .pm-btn-outline { color: #fff;
  border-color: rgba(255, 255, 255, 0.4); }
.pm-body .pm-subscribe .pm-btn-outline:hover { background: #fff;
  color: var(--pm-ink-deep); border-color: #fff; }

/* ---------------------------------------------------------------------------
   4. PBK MEDIA SUBNAV
   --------------------------------------------------------------------------- */

.pm-subnav { background: var(--pm-ink); position: sticky; top: 69px; z-index: 400; }
.pm-subnav-inner { max-width: var(--pm-wide); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 28px; min-height: 48px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pm-subnav-brand { font-family: var(--pm-display); font-size: 1rem;
  color: #fff !important; text-decoration: none; white-space: nowrap;
  padding-right: 6px; border-right: 1px solid rgba(255,255,255,0.22); }
.pm-subnav ul { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.pm-subnav a { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.72) !important;
  text-decoration: none; white-space: nowrap; padding: 14px 0;
  border-bottom: 2px solid transparent; }
.pm-subnav a:hover { color: #fff !important; }
.pm-subnav a[aria-current="page"] { color: #fff !important;
  border-bottom-color: var(--pm-accent); }
.pm-subnav a:focus-visible { outline-color: var(--pm-accent); }

/* ---------------------------------------------------------------------------
   5. HERO / PAGE HEAD / PUBLICATION MASTHEAD
   --------------------------------------------------------------------------- */

.pm-hero { background: var(--pm-paper-warm);
  border-bottom: 1px solid rgba(8, 36, 84, 0.07); }
.pm-hero-inner { max-width: var(--pm-narrow); margin: 0 auto;
  padding: 96px 24px 84px; text-align: center; }
.pm-hero h1 { font-size: clamp(3rem, 9vw, 5.6rem); margin-bottom: 22px;
  letter-spacing: -0.02em; }
/* The PBK Media wordmark, real artwork rather than typeset text (go-live
   fix, 2026-08-03). Sized by height so its width follows the source SVG's
   own aspect ratio — see platform.identity.logo.wordmarkWidth/Height. */
.pm-hero-mark { margin: 0 0 26px; }
.pm-hero-mark img { max-height: 92px; width: auto; margin: 0 auto; }
/* Narrower than --pm-measure (38rem) on purpose — the copy refinement pass
   (2026-08-03) asked for the hero copy to stay concise and visually
   balanced rather than spanning the full prose measure. */
.pm-hero-prop { max-width: 32rem; margin: 0 auto 20px;
  font-size: 1.12rem; color: var(--pm-muted-text); }
.pm-hero-prop-secondary { max-width: 26rem; font-size: 1rem;
  margin-bottom: 34px; }
.pm-hero-actions { display: flex; gap: 14px; justify-content: center;
  flex-wrap: wrap; }
/* One quiet text link under the primary button, replacing a second
   competing button (go-live copy refinement, 2026-08-03). */
.pm-hero-more { margin-top: 18px; text-align: center; }
.pm-hero-more a { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--pm-accent-text); text-decoration: none; }
.pm-hero-more a:hover { text-decoration: underline; }
.pm-hero-more .arrow { display: inline-block; transition: transform 0.2s var(--pm-ease); }
.pm-hero-more a:hover .arrow { transform: translateX(4px); }

.pm-page-head { background: var(--pm-paper-warm);
  border-bottom: 1px solid rgba(8, 36, 84, 0.07); }
.pm-page-head-inner { max-width: var(--pm-narrow); margin: 0 auto;
  padding: 76px 24px 64px; text-align: center; }
.pm-page-head h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin-bottom: 18px; }
.pm-page-lede { max-width: var(--pm-measure); margin: 0 auto;
  color: var(--pm-muted-text); }
.pm-placeholder-note { max-width: var(--pm-measure); margin: 18px auto 0;
  color: var(--pm-muted-text); font-size: 0.95rem; }

.pm-masthead { background: var(--pm-paper-warm);
  border-bottom: 1px solid rgba(8, 36, 84, 0.07); }
.pm-masthead-inner { max-width: var(--pm-narrow); margin: 0 auto;
  padding: 78px 24px 66px; text-align: center; }
.pm-masthead-mark { margin: 0 0 22px; }
/* Primary (horizontal) lockup by default; stacked mark only on narrow
   viewports where a 3:1+ wide wordmark would have to shrink past
   legibility (go-live fix, 2026-08-03 — see the note on this file's
   'MASTHEAD LOGO SWAP' breakpoint below). */
.pm-masthead-mark-wide img { max-height: 84px; width: auto; margin: 0 auto; }
.pm-masthead-mark-narrow { display: none; }
.pm-masthead-mark-narrow img { max-height: 220px; width: auto; margin: 0 auto; }
.pm-masthead-typeset { font-size: clamp(2.6rem, 7vw, 4.4rem); margin-bottom: 20px; }
.pm-masthead-tag { max-width: var(--pm-measure); margin: 0 auto 12px;
  font-family: var(--pm-display); font-size: 1.5rem; font-weight: 300;
  color: var(--pm-ink); line-height: 1.25; }
.pm-masthead-intro { max-width: var(--pm-measure); margin: 0 auto 18px;
  font-size: 1.05rem; color: var(--pm-muted-text); }
.pm-masthead-meta { font-size: 0.76rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--pm-accent-text); }
.pm-masthead-secondary { max-width: var(--pm-measure); margin: 14px auto 0;
  font-size: 0.92rem; color: var(--pm-muted-text); }
.pm-masthead-cats { display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; list-style: none; margin: 22px 0 0; padding: 0; }
.pm-masthead-cats li { font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--pm-muted-text);
  border: 1px solid rgba(8, 36, 84, 0.14); border-radius: 999px;
  padding: 5px 13px; }

/* ---------------------------------------------------------------------------
   6. THE LATEST-ISSUE FEATURE
   --------------------------------------------------------------------------- */

.pm-feature { max-width: var(--pm-wide); margin: 0 auto; padding: 84px 24px 40px; }
.pm-feature-inner { display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 56px; align-items: center; }
.pm-feature-media { display: block; overflow: hidden; border-radius: 3px;
  background: var(--pm-band); }
.pm-feature-media img { width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 3 / 2; transition: transform 0.9s var(--pm-ease); }
.pm-feature:hover .pm-feature-media img { transform: scale(1.03); }
.pm-feature-body h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); margin-bottom: 18px; }
.pm-feature-body h2 a { text-decoration: none; }
.pm-feature-body h2 a:hover { text-decoration: underline;
  text-decoration-color: var(--pm-accent); text-underline-offset: 6px; }
.pm-stand { color: var(--pm-muted-text); margin-bottom: 20px; }
.pm-feature-body .pm-btn { margin-top: 12px; }

/* ---------------------------------------------------------------------------
   7. ARCHIVE ROWS
   --------------------------------------------------------------------------- */

.pm-issues { display: flex; flex-direction: column; gap: 8px; }
.pm-issue-row { display: grid; grid-template-columns: 300px 1fr; gap: 40px;
  align-items: center; text-decoration: none; padding: 30px 0;
  border-top: 1px solid rgba(8, 36, 84, 0.1); }
.pm-issue-row:last-child { border-bottom: 1px solid rgba(8, 36, 84, 0.1); }
.pm-issue-row figure { overflow: hidden; border-radius: 3px;
  background: var(--pm-band); margin: 0; }
.pm-issue-row figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform 0.8s var(--pm-ease); }
.pm-issue-row:hover figure img { transform: scale(1.04); }
.pm-issue-row .body { position: relative; }
/* The oversized issue number is decorative and aria-hidden — the meta line
   below it carries the same fact as text. */
.pm-issue-row .bignum { position: absolute; right: 0; top: -18px;
  font-family: var(--pm-display); font-size: 4.4rem; line-height: 1;
  color: var(--pm-accent); opacity: 0.16; pointer-events: none; }
.pm-issue-row h3 { font-size: 1.55rem; margin-bottom: 10px; }
.pm-issue-row .excerpt { color: var(--pm-muted-text); font-size: 0.94rem;
  margin-bottom: 14px; max-width: 46rem; }
.pm-issue-row .read-btn { font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--pm-accent-text); }
.pm-issue-row .read-btn .arrow { display: inline-block;
  transition: transform 0.2s var(--pm-ease); }
.pm-issue-row:hover .read-btn .arrow { transform: translateX(5px); }
.pm-issue-row:hover h3 { text-decoration: underline;
  text-decoration-color: var(--pm-accent); text-underline-offset: 5px; }

.pm-archive-empty, .pm-search-empty { text-align: center;
  color: var(--pm-muted-text); padding: 40px 0; }
.pm-empty-state { max-width: var(--pm-measure); margin: 0 auto;
  padding: 72px 24px; text-align: center; color: var(--pm-muted-text); }
/* A quiet utility label, not headline copy (go-live copy refinement,
   2026-08-03 — "2 issues and counting" used to be the page's lede). */
.pm-archive-count { text-align: center; font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pm-muted-text); margin: -20px 0 32px; }

/* ---------------------------------------------------------------------------
   8. PUBLICATION CARDS
   Each card carries data-publication, so the theme block scoped to that
   attribute re-skins it in place. This is why a mixed grid can show each
   title in its own accent with no per-title CSS.
   --------------------------------------------------------------------------- */

.pm-pub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px; }
.pm-pub-card { background: var(--pm-paper); border: 1px solid rgba(8, 36, 84, 0.1);
  border-top: 3px solid var(--pm-accent); border-radius: 3px;
  padding: 32px 30px 30px; display: flex; flex-direction: column; }
.pm-pub-card-head { margin-bottom: 16px; }
.pm-pub-mark { max-height: 26px; width: auto; margin-bottom: 12px; }
.pm-pub-typeset { font-family: var(--pm-display); font-size: 1.7rem;
  color: var(--pm-ink); line-height: 1.15; margin-bottom: 10px; }
.pm-pub-kind { display: block; font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--pm-muted-text); }
.pm-pub-tagline { color: var(--pm-muted-text); font-size: 0.94rem;
  margin-bottom: 18px; }
.pm-pub-cats { display: flex; flex-wrap: wrap; gap: 7px; list-style: none;
  margin: 0 0 20px; padding: 0; }
.pm-pub-cats li { font-size: 0.66rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--pm-accent-text);
  background: var(--pm-band); border-radius: 999px; padding: 4px 10px; }
.pm-pub-count { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pm-muted-text); margin-top: auto; margin-bottom: 14px; }
/* .pm-body-scoped: see the note on buttons above — a bare .pm-pub-link would
   lose to `.pm-body a` and render ink instead of the publication's accent. */
.pm-body .pm-pub-link { font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--pm-accent-text); text-decoration: none; }
.pm-body .pm-pub-link:hover { text-decoration: underline; }
.pm-pub-link .arrow { display: inline-block; transition: transform 0.2s var(--pm-ease); }
.pm-pub-link:hover .arrow { transform: translateX(4px); }

/* A planned title reads as reserved architecture, not a product. Muted,
   unlinked and explicitly labelled. */
.pm-pub-card[data-state="planned"] { background: var(--pm-band);
  border-top-style: dashed; opacity: 0.86; }
.pm-pub-card[data-state="planned"] .pm-pub-typeset { color: var(--pm-muted-text); }
.pm-pub-link.is-planned { color: var(--pm-muted-text); cursor: default; }
.pm-pub-planned { color: var(--pm-accent-text); }

/* Homepage "What We Publish" — lighter than the full masthead card in
   section 8: name, description, one microcopy line (cadence · sector, no
   kind label or issue count — copy refinement, 2026-08-03), CTA. Scoped by
   data-publication so each title still reads in its own accent even though
   the two currently share one palette. */
.pm-publish-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px; margin-top: 8px; }
.pm-publish-card { border-top: 3px solid var(--pm-accent); padding: 28px 0 0; }
.pm-publish-card h3 { font-size: 1.7rem; margin-bottom: 10px; }
.pm-publish-tag { color: var(--pm-muted-text); margin-bottom: 16px; }
.pm-publish-micro { display: block; font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--pm-accent-text); margin-bottom: 18px; }
.pm-body .pm-publish-link { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--pm-accent-text); text-decoration: none; }
.pm-body .pm-publish-link:hover { text-decoration: underline; }
.pm-publish-link .arrow { display: inline-block; transition: transform 0.2s var(--pm-ease); }
.pm-publish-link:hover .arrow { transform: translateX(4px); }

/* "What [Publication] Covers" — a publication's editorial-territory grid
   (page.publication-landing.html section C, conditional on coverageTopics).
   Plain items, not cards: the section already has a header, so a second
   layer of card chrome per topic would be visual noise. */
.pm-coverage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px 36px; }
.pm-coverage-item h3 { font-size: 1.2rem; margin-bottom: 8px; }
.pm-coverage-item p { color: var(--pm-muted-text); font-size: 0.94rem; margin: 0; }

/* ---------------------------------------------------------------------------
   9. COMING NEXT
   --------------------------------------------------------------------------- */

.pm-next { max-width: var(--pm-wide); margin: 0 auto; padding: 40px 24px 84px; }
.pm-next-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px;
  align-items: center; background: var(--pm-band); border-radius: 3px;
  padding: 34px; }
.pm-next-inner figure { position: relative; margin: 0; overflow: hidden;
  border-radius: 3px; background: var(--pm-paper-warm); min-height: 200px; }
.pm-next-inner figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.pm-next-inner .badge { position: absolute; top: 14px; left: 14px;
  background: var(--pm-accent-text); color: #fff; font-size: 0.66rem;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 2px; }
.pm-next-inner h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin-bottom: 14px; }
.pm-next-inner .excerpt { color: var(--pm-muted-text); margin-bottom: 14px; }
.pm-next-note { font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pm-accent-text); margin-bottom: 20px; }

/* ---------------------------------------------------------------------------
   10. ABOUT-THIS-PUBLICATION / PROSE SECTIONS
   --------------------------------------------------------------------------- */

.pm-about-pub { background: var(--pm-paper-warm); max-width: none;
  padding-left: 0; padding-right: 0; }
.pm-about-pub-inner { max-width: var(--pm-measure); margin: 0 auto;
  padding: 0 24px; text-align: center; }
.pm-about-pub h2 { font-size: 1.9rem; margin-bottom: 16px; }
.pm-about-pub p { color: var(--pm-muted-text); }
.pm-about-pub-links { margin-top: 22px; font-size: 0.82rem;
  color: var(--pm-muted-text); }
.pm-about-pub-links a { color: var(--pm-accent-text); }
.pm-about-pub-links span { margin: 0 8px; color: var(--pm-accent); }

.pm-prose-section { max-width: var(--pm-narrow); }
.pm-about-titles { list-style: none; margin: 0 0 34px; padding: 0; }
.pm-about-titles li { padding: 16px 0; border-bottom: 1px solid rgba(8,36,84,0.08); }
.pm-about-title-meta { display: block; font-size: 0.74rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--pm-muted-text); margin-top: 5px; }
.pm-workflow-list { counter-reset: wf; list-style: none; margin: 0 0 30px; padding: 0; }
.pm-workflow-list li { counter-increment: wf; position: relative;
  padding: 14px 0 14px 46px; border-bottom: 1px solid rgba(8,36,84,0.08); }
.pm-workflow-list li::before { content: counter(wf, decimal-leading-zero);
  position: absolute; left: 0; top: 16px; font-family: var(--pm-display);
  font-size: 1.1rem; color: var(--pm-accent-text); }
.pm-workflow-list strong { display: inline-block; margin-right: 10px; }
.pm-workflow-visibility { font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--pm-muted-text);
  border: 1px solid rgba(8,36,84,0.15); border-radius: 999px; padding: 2px 9px; }
.pm-workflow-desc { display: block; color: var(--pm-muted-text);
  font-size: 0.92rem; margin-top: 5px; }

/* ---------------------------------------------------------------------------
   11. SEARCH
   Progressive enhancement: the archive is already in the HTML, and this only
   filters what is there. With JS off the controls are inert and the full
   archive is still readable, which is the correct failure mode.
   --------------------------------------------------------------------------- */

.pm-search { max-width: var(--pm-wide); margin: 0 auto; padding: 44px 24px 0; }
.pm-search-form { display: grid;
  grid-template-columns: minmax(220px, 2fr) 1fr 1fr auto; gap: 14px;
  align-items: end; }
.pm-search-field { grid-column: span 1; }
.pm-search-status { margin-top: 14px; font-size: 0.8rem;
  color: var(--pm-muted-text); min-height: 1.2em; }
.pm-feed-list { list-style: none; margin: 0; padding: 0; display: flex;
  flex-wrap: wrap; gap: 10px 24px; justify-content: center; }
.pm-feed-list a { font-size: 0.82rem; color: var(--pm-accent-text); }

/* ---------------------------------------------------------------------------
   12. FORMS + SUBSCRIBE
   The commercial band, deliberately dark so it reads as distinct from the
   editorial above it rather than continuous with it.
   --------------------------------------------------------------------------- */

.pm-field { display: flex; flex-direction: column; gap: 7px; }
.pm-field label { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--pm-muted-text); }
.pm-field input, .pm-field select {
  font-family: var(--pm-sans); font-size: 0.95rem; padding: 13px 14px;
  border: 1px solid rgba(8, 36, 84, 0.2); border-radius: 2px;
  background: var(--pm-paper); color: var(--pm-ink-deep); width: 100%; }
.pm-field input:focus, .pm-field select:focus { border-color: var(--pm-ink); }
.pm-field .field-invalid { border-color: #B3261E; }
/* The consent checkbox (item 8): a checkbox + inline label side by side,
   not the label-above-input stack every other field uses. */
.pm-field-consent { flex-direction: row; align-items: flex-start; gap: 10px; }
.pm-field-consent input[type="checkbox"] { width: 18px; height: 18px; flex: none;
  margin-top: 3px; accent-color: var(--pm-accent); }
.pm-field-consent label { font-size: 0.82rem; font-weight: 400; letter-spacing: normal;
  text-transform: none; line-height: 1.5; }
.pm-field-consent input.field-invalid { outline: 1.5px solid #B3261E; outline-offset: 2px; }
.pm-form-row { margin-bottom: 16px; }
.pm-form-row.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pm-form-error { color: #FFB4AB; font-size: 0.85rem; margin-top: 12px;
  display: none; }
.pm-form-error.show { display: block; }
.pm-form-note { font-size: 0.76rem; color: var(--pm-muted); margin-top: 14px; }

.pm-subscribe { background: var(--pm-ink-deep); color: #C5D5DF;
  padding: 84px 24px; }
.pm-subscribe .inner { max-width: var(--pm-wide); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.pm-subscribe h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.8rem);
  margin-bottom: 16px; }
.pm-subscribe .pm-eyebrow { color: var(--pm-accent); }
.pm-subscribe p { color: #C5D5DF; }
.pm-subscribe .pm-field label { color: rgba(255, 255, 255, 0.72); }
.pm-subscribe .pm-field input { background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22); color: #fff; }
.pm-subscribe .pm-field input::placeholder { color: rgba(255, 255, 255, 0.4); }
.pm-subscribe .pm-form-note { color: rgba(255, 255, 255, 0.55); }
.pm-subscribe .pm-form-note a { color: var(--pm-accent); }
.pm-invite-done { color: #fff; font-size: 1.05rem; line-height: 1.7; }
.pm-invite-done strong { color: var(--pm-accent); }

/* ---------------------------------------------------------------------------
   13. ARTICLE
   --------------------------------------------------------------------------- */

/* READING PROGRESS — a vertical rail on the right (2026-08-04, at Violet's
   request: the previous 3px bar across the very top of the page was there,
   but readers did not notice it). The visible track shows how much of the
   article remains; the gold fill shows how far the reader has come.
   Driven by the --pm-read custom property set in pbk-media.js. */
.pm-progress { position: fixed; top: 0; right: 0; width: 5px; height: 100vh;
  background: rgba(8, 36, 84, 0.08); z-index: 900; pointer-events: none; }
.pm-progress::after { content: ""; display: block; width: 100%;
  height: var(--pm-read, 0%); background: var(--pm-accent);
  transition: height 0.1s linear; }

/* BACK TO TOP — hidden until the reader is a screen or so down the page, so
   it never covers content on a short view. Kept off the right rail's 5px so
   the two never overlap. */
.pm-to-top { position: fixed; right: 22px; bottom: 26px; z-index: 940;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: var(--pm-ink); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; line-height: 1;
  box-shadow: 0 6px 18px rgba(8, 36, 84, 0.28);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.25s var(--pm-ease), transform 0.25s var(--pm-ease),
              visibility 0.25s var(--pm-ease), background 0.2s var(--pm-ease); }
.pm-to-top.show { opacity: 1; visibility: visible; transform: none; }
.pm-to-top:hover { background: var(--pm-accent-deep); }
@media (prefers-reduced-motion: reduce) {
  .pm-to-top { transition: none; }
  .pm-progress::after { transition: none; }
}

.pm-article { background: var(--pm-paper); }
.pm-cover { max-width: var(--pm-wide); margin: 0 auto; padding: 56px 24px 0; }
.pm-cover-media { margin: 0 0 44px; overflow: hidden; border-radius: 3px;
  background: var(--pm-band); }
.pm-cover-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.pm-cover-body { max-width: var(--pm-narrow); margin: 0 auto; text-align: center; }
.pm-cover-pub { display: block; font-family: var(--pm-display); font-size: 1.05rem;
  letter-spacing: 0.05em; color: var(--pm-accent-text); margin-bottom: 18px; }
/* The publication's real wordmark in place of its typeset name (go-live
   fix, 2026-08-03) — same slot .pm-cover-pub occupied, degrades to the
   typeset span above when no wordmark art exists yet. */
.pm-cover-pub-mark { display: block; margin: 0 auto 20px; }
.pm-cover-pub-mark img { max-height: 52px; width: auto; margin: 0 auto; }
.pm-cover-meta { margin-bottom: 20px; }
.pm-cover h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); margin-bottom: 22px; }
.pm-cover-stand { max-width: var(--pm-measure); margin: 0 auto 14px;
  font-size: 1.14rem; color: var(--pm-muted-text); }

.pm-utilbar { max-width: var(--pm-narrow); margin: 44px auto 0; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  border-top: 1px solid rgba(8,36,84,0.1);
  border-bottom: 1px solid rgba(8,36,84,0.1); }
.pm-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none;
  margin: 0; padding: 14px 0; font-size: 0.76rem; color: var(--pm-muted-text); }
.pm-crumbs li + li::before { content: "/"; margin-right: 8px;
  color: var(--pm-accent); }
.pm-crumbs a { color: var(--pm-muted-text); text-decoration: none; }
.pm-crumbs a:hover { color: var(--pm-ink); text-decoration: underline; }
.pm-crumbs [aria-current="page"] { color: var(--pm-ink); }
.pm-utilbar-actions { display: flex; gap: 8px; }
.pm-util-btn { background: none; border: 1px solid rgba(8,36,84,0.16);
  border-radius: 2px; padding: 8px 14px; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--pm-muted-text);
  min-height: 36px; }
.pm-util-btn:hover { border-color: var(--pm-ink); color: var(--pm-ink); }

.pm-prose { max-width: var(--pm-measure); margin: 0 auto; padding: 60px 24px; }
.pm-prose p { margin-bottom: 26px; }
.pm-prose .pm-lede { font-size: 1.3rem; line-height: 1.55; font-weight: 500;
  color: var(--pm-ink-deep); }
/* H2s: clearly larger and heavier than body/lede so a scanning reader can
   find the next section without slowing down — 300-weight (the global
   heading default, tuned for a hero <h1>) reads as body text at this size. */
.pm-prose .pm-h2 { font-size: 2.05rem; font-weight: 600; line-height: 1.2;
  margin: 60px 0 22px;
  display: flex; gap: 16px; align-items: baseline; }
.pm-prose .pm-h2:first-child { margin-top: 0; }
.pm-section-number { font-family: var(--pm-display); font-weight: 500;
  font-size: 1rem; color: var(--pm-accent-text); flex: none; }
/* H3s (agency names, subheads): bold enough to scan a list of cards or a
   subhead-led subsection at a glance. */
.pm-prose .pm-h3 { font-size: 1.3rem; font-weight: 600; margin: 38px 0 14px; }
.pm-list { list-style: none; margin: 0 0 26px; padding: 0; }
.pm-list li { position: relative; padding-left: 1.5em; margin-bottom: 11px; }
.pm-list li::before { content: ""; position: absolute; left: 0.15em; top: 0.7em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--pm-accent); }
/* An ordered `list` block (rare — most numbered content uses the dedicated
   recommendation-list component) still gets a real, visible number rather
   than relying on the browser default, styled to match the rest of the
   numbering system. */
ol.pm-list { counter-reset: pm-list; }
ol.pm-list li { padding-left: 2em; }
ol.pm-list li::before { content: counter(pm-list, decimal) "."; counter-increment: pm-list;
  width: auto; height: auto; border-radius: 0; background: none;
  font-family: var(--pm-display); font-weight: 600; color: var(--pm-accent-text); top: 0; }
.pm-prose .pm-figure { margin: 42px 0; }
/* Landscape photographs fill the measure; a PORTRAIT photograph must not,
   or a single phone snapshot runs ~1000px tall and swamps the article. The
   portrait class is set in blocks.py from the declared dimensions, so the
   cap is applied from real data rather than guessed at in CSS. */
.pm-prose .pm-figure img { border-radius: 3px; width: 100%; height: auto; }
.pm-prose .pm-figure-portrait img { width: auto; height: auto;
  max-height: 560px; max-width: 100%; margin: 0 auto; }
.pm-caption { font-size: 0.8rem; color: var(--pm-muted-text); margin-top: 10px; }

.pm-pullquote { margin: 48px 0; padding: 8px 0 8px 26px;
  border-left: 2px solid var(--pm-accent); position: relative; }
.pm-quote-mark { position: absolute; left: 14px; top: -16px;
  font-family: var(--pm-display); font-size: 3rem; color: var(--pm-accent);
  opacity: 0.4; line-height: 1; }
.pm-pullquote blockquote p { font-family: var(--pm-display); font-weight: 500;
  font-size: 1.5rem; line-height: 1.4; color: var(--pm-ink); margin-bottom: 10px; }
.pm-quote-by { font-size: 0.76rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--pm-muted-text); }

.pm-note { background: var(--pm-band); border-radius: 3px; padding: 22px 24px;
  margin: 38px 0; }
.pm-note p { font-size: 0.9rem; color: var(--pm-muted-text); margin: 0; }
.pm-stat { text-align: center; margin: 38px 0; }
.pm-stat-value { display: block; font-family: var(--pm-display);
  font-size: 3.2rem; color: var(--pm-ink); line-height: 1; }
.pm-stat-label { display: block; font-size: 0.86rem; color: var(--pm-muted-text);
  margin-top: 8px; }
.pm-stat-source { display: block; font-size: 0.72rem; color: var(--pm-muted-text);
  margin-top: 6px; font-style: italic; }
.pm-divider { border: none; border-top: 1px solid rgba(8,36,84,0.12);
  margin: 44px 0; }
.pm-cta-line { text-align: center; margin: 14px 0; }
.pm-cta-line + .pm-cta-line { margin-top: -2px; }
/* The secondary CTA (item 7): a plain text link with a trailing arrow, kept
   visually quieter than the primary accent button above it so the two never
   compete for the reader's attention. */
.pm-cta-line-secondary { margin-top: 4px; }
.pm-cta-textlink { display: inline-block; font-size: 0.88rem; font-weight: 600;
  color: var(--pm-accent-text); text-decoration: none; }
.pm-cta-textlink:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   13b. LONG-FORM FEATURE COMPONENTS
   Added for PBK Insights Issue 01's go-live rewrite (2026-08-03) — callouts,
   data panels, agency cards, process flow, checklists, comparisons,
   recommendation cards and the rebuilt Karibu timeline. Deliberately kept
   inside .pm-prose's existing measure (not a full-bleed breakout): a
   negative-margin or 100vw breakout is a classic source of the very
   horizontal overflow this system is built to catch, and a contained width
   still reads well as two narrower columns.
   --------------------------------------------------------------------------- */

.pm-callout { border-radius: 3px; padding: 34px 36px; margin: 44px 0; }
.pm-callout p { margin: 0; }
.pm-callout-eyebrow { display: block; font-family: var(--pm-sans); font-size: 0.72rem;
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pm-accent-text); margin-bottom: 12px; }
/* The article's core, opening lesson (item 13A): the largest, warmest
   treatment in the piece — pale-gold ground, a full gold rule (not just a
   left border), generous padding, so it reads as the one idea to remember. */
.pm-callout-lesson { background: var(--pm-paper-warm);
  border-top: 3px solid var(--pm-accent); border-left: 4px solid var(--pm-accent);
  box-shadow: 0 1px 0 rgba(181,139,42,0.25) inset; }
.pm-callout-lesson p { font-family: var(--pm-display); font-weight: 500;
  font-size: 1.5rem; line-height: 1.42; color: var(--pm-ink); }
.pm-callout-highlight { background: var(--pm-band); border-left: 4px solid var(--pm-accent-deep); }
.pm-callout-highlight p { font-size: 1.02rem; font-weight: 600; color: var(--pm-ink-deep); }
/* A single named-agency recommendation (item 13B) — a distinct banner, not
   another lesson callout, so the developer-recommendation tone is legible
   at a glance rather than blending into the surrounding prose. */
.pm-callout-recommendation { background: #fff; border: 1px solid rgba(181,139,42,0.35);
  border-left: 4px solid var(--pm-accent); }
.pm-callout-recommendation p { font-weight: 700; font-size: 1.12rem; color: var(--pm-ink); }
/* The closing statement (item 13H / correction #4) — deliberately different
   from the opening .pm-callout-lesson (dark ground instead of pale, no
   eyebrow) so the two do not read as the same block repeated. */
.pm-callout-closing { background: var(--pm-ink); border-left: 4px solid var(--pm-accent); }
.pm-callout-closing p { font-family: var(--pm-display); font-weight: 500;
  font-size: 1.55rem; line-height: 1.4; color: #fff; }

.pm-statgrid { background: var(--pm-paper-warm); border-radius: 3px;
  border: 1px solid rgba(8,36,84,0.08);
  padding: 32px 30px; margin: 44px 0; }
.pm-statgrid-heading { font-size: 1.15rem; font-weight: 600; margin: 0 0 20px; }
.pm-statgrid-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 24px; }
.pm-statgrid-item { text-align: center; padding: 0 8px; }
.pm-statgrid-item + .pm-statgrid-item { border-left: 1px solid rgba(8,36,84,0.1); }
/* The original-vs-revised scheme numbers, and the Karibu-status-today dates
   (items 13C and 13G), are the two places this component carries the most
   weight — large, bold values in a clearly gridded, high-contrast panel. */
.pm-statgrid-value { display: block; font-family: var(--pm-display); font-weight: 600;
  font-size: 2.1rem; color: var(--pm-ink); line-height: 1.1; }
.pm-statgrid-label { display: block; font-size: 0.85rem; font-weight: 600;
  color: var(--pm-muted-text); margin-top: 8px; }
.pm-statgrid-note { font-size: 0.8rem; color: var(--pm-muted-text); font-style: italic;
  margin: 20px 0 0; text-align: center; }

/* The grouped variant (e.g. "Original concept" vs "Revised scheme"): two
   named columns side by side on desktop, stacked on mobile, so numbers that
   belong to different moments in the story never look like one flat list. */
.pm-statgrid-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px; }
.pm-statgrid-col { text-align: center; }
.pm-statgrid-col + .pm-statgrid-col { border-left: 1px solid rgba(8,36,84,0.12); }
.pm-statgrid-col-heading { display: block; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--pm-accent-text);
  margin-bottom: 18px; }
.pm-statgrid-col-items { display: flex; flex-direction: column; gap: 20px; }
.pm-statgrid-col-items .pm-statgrid-item { padding: 0; }

.pm-agency-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px; margin: 36px 0; }
.pm-agency-card { border: 1px solid rgba(8,36,84,0.12); border-top: 3px solid var(--pm-accent);
  border-radius: 3px; padding: 20px 22px; }
.pm-agency-card h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 8px; }
.pm-agency-card p { font-size: 0.9rem; color: var(--pm-muted-text); margin: 0; }

.pm-flow { margin: 40px 0; }
.pm-flow-steps { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 0; counter-reset: pm-flow; }
.pm-flow-steps li { counter-increment: pm-flow; position: relative;
  background: var(--pm-paper-warm); border-radius: 3px; padding: 14px 18px 14px 46px;
  font-size: 0.92rem; font-weight: 600; margin-bottom: 22px; }
.pm-flow-steps li::before { content: counter(pm-flow); position: absolute; left: 16px;
  top: 50%; transform: translateY(-50%); font-family: var(--pm-display);
  font-weight: 600; color: var(--pm-accent-text); font-size: 1rem; }
.pm-flow-steps li:not(:last-child)::after { content: "↓"; position: absolute;
  left: 24px; bottom: -24px; color: var(--pm-accent); font-size: 1rem; }
.pm-flow-note { font-size: 0.82rem; color: var(--pm-muted-text); font-style: italic; margin-top: 8px; }

/* Checklists (item 12): a visible outlined tick in its own circle, not a
   bare glyph, so each item reads as a checked-off entry rather than a line
   of text with a stray character in front of it. Two columns only above
   480px — auto-fit/minmax already collapses to one column on mobile. */
.pm-checklist { list-style: none; margin: 36px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 24px; }
.pm-checklist li { position: relative; padding: 6px 0 6px 34px; font-size: 0.94rem;
  font-weight: 500; line-height: 1.5; }
.pm-checklist li::before { content: "✓"; position: absolute; left: 0; top: 2px;
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--pm-accent);
  color: var(--pm-accent-text); font-weight: 700; font-size: 0.78rem;
  display: flex; align-items: center; justify-content: center; }
/* A leadership/lesson line attached to a checklist (item 13D) — a full
   standalone pull-quote treatment, not a small caption under the list. */
.pm-checklist-highlight { font-family: var(--pm-display); font-weight: 500;
  font-size: 1.35rem; line-height: 1.4; color: var(--pm-ink);
  border-left: 3px solid var(--pm-accent); background: var(--pm-paper-warm);
  padding: 22px 26px; margin: 32px 0 0; }

/* Side-by-side on desktop, stacked on mobile via the same auto-fit/minmax
   pattern used throughout; bold headings and a one-line bold summary per
   card, with the legal note visually demoted below (item 13F). */
.pm-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px; margin: 36px 0 14px; }
.pm-comparison-col { background: var(--pm-band); border-top: 3px solid var(--pm-accent-deep);
  border-radius: 3px; padding: 24px 26px; }
.pm-comparison-col h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 10px; }
.pm-comparison-col p { font-size: 0.96rem; font-weight: 600; color: var(--pm-ink-deep); margin: 0; }
.pm-comparison-note { font-size: 0.78rem; color: var(--pm-muted-text); font-style: italic;
  margin: 14px 0 26px; }

/* Numbered recommendations: prominent navy/gold numerals, cards with more
   room between them, and a heading clearly separated in weight from its
   supporting sentence (item 12). */
.pm-recommend-list { list-style: none; margin: 40px 0; padding: 0;
  counter-reset: pm-recommend; display: flex; flex-direction: column; gap: 28px; }
.pm-recommend-list li { counter-increment: pm-recommend; display: flex; gap: 20px;
  background: var(--pm-paper-warm); border-radius: 3px; padding: 22px 24px; }
.pm-recommend-list li::before { content: counter(pm-recommend, decimal-leading-zero);
  flex: none; font-family: var(--pm-display); font-weight: 600; font-size: 1.6rem;
  color: var(--pm-accent-text); line-height: 1; }
.pm-recommend-body h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; }
.pm-recommend-body p { font-size: 0.94rem; color: var(--pm-muted-text); margin: 0; }

/* Timeline — rebuilt as real markup, not an embedded screenshot. Left/right
   alternation is class-driven from a running counter in blocks.py, not
   nth-child, so it survives years with an uneven number of entries. */
.pm-timeline { margin: 40px 0; position: relative; }
.pm-timeline-year { text-align: center; margin: 30px 0 18px; }
.pm-timeline-year:first-child { margin-top: 0; }
.pm-timeline-year-badge { display: inline-block; background: var(--pm-ink);
  color: #fff; font-family: var(--pm-display); font-size: 0.95rem;
  padding: 4px 16px; border-radius: 2px; }
.pm-timeline-phase { display: block; margin-top: 8px; font-size: 0.76rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--pm-accent-text); }
.pm-timeline-entry { position: relative; width: 46%; padding: 10px 22px;
  border-left: 2px solid var(--pm-accent); margin-bottom: 16px; }
.pm-timeline-entry-left { margin-left: 0; margin-right: 54%; text-align: right;
  border-left: none; border-right: 2px solid var(--pm-accent); padding-right: 22px; padding-left: 0; }
.pm-timeline-entry-right { margin-left: 54%; }
.pm-timeline-month { display: block; font-family: var(--pm-display); font-size: 0.92rem;
  color: var(--pm-accent-text); margin-bottom: 4px; }
.pm-timeline-entry p { margin: 0; font-size: 0.9rem; color: var(--pm-muted-text); }
.pm-timeline-note { font-size: 0.8rem; color: var(--pm-muted-text); font-style: italic;
  text-align: center; margin-top: 20px; }

/* A restrained, visible list of the official sources fact-checked against
   (item 5) — plain links in a bordered box, deliberately quiet rather than
   styled as another feature component; this is a citation list, not a
   highlight. */
.pm-sources { background: var(--pm-paper-warm); border-radius: 3px;
  padding: 26px 28px; margin: 48px 0; }
.pm-sources h3 { font-size: 0.98rem; font-weight: 600; margin: 0 0 14px; }
.pm-sources-list { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 24px; }
.pm-sources-list a { font-size: 0.86rem; color: var(--pm-accent-text);
  text-decoration: none; }
.pm-sources-list a:hover { text-decoration: underline; }

/* The author bio (item 6) — sits between the article body and the subscribe
   module, so it needs its own light card rather than borrowing the
   subscribe band's dark ground. */
.pm-author-bio { border-top: 1px solid rgba(8,36,84,0.12); padding: 36px 0 0;
  margin: 48px 0 0; }
.pm-author-bio-name { font-family: var(--pm-display); font-weight: 600;
  font-size: 1.15rem; color: var(--pm-ink); margin: 4px 0 2px; }
.pm-author-bio-name a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--pm-accent); }
.pm-author-bio-name a:hover { color: var(--pm-accent-text); }
.pm-author-bio-role { font-size: 0.82rem; color: var(--pm-muted-text); margin: 0 0 10px; }
.pm-author-bio-text { font-size: 0.94rem; color: var(--pm-ink-deep); margin: 0; }

.pm-article-end { max-width: var(--pm-measure); margin: 0 auto;
  padding: 0 24px 72px; text-align: center; }
.pm-endmark { display: block; font-family: var(--pm-display); font-size: 1.6rem;
  color: var(--pm-accent); margin-bottom: 26px; }
.pm-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  list-style: none; margin: 0 0 20px; padding: 0; }
.pm-tags a { font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--pm-muted-text); background: var(--pm-band); border-radius: 999px;
  padding: 5px 12px; text-decoration: none; }
.pm-tags a:hover { color: var(--pm-ink); }
.pm-pdf a { font-size: 0.8rem; color: var(--pm-accent-text); }
.pm-more { background: var(--pm-paper-warm); max-width: none; }
.pm-more .pm-issues { max-width: var(--pm-wide); margin: 0 auto; }

/* News: short dated update cards. Simpler than an issue-card (no image, no
   publication theming — News has none of its own) but the same editorial
   voice as the rest of PBK Media. Used both on /pbk-media/news/ and the
   home page's "Latest News" preview. */
.pm-news-list { max-width: var(--pm-wide); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px; }
.pm-news-card { border: 1px solid rgba(8,36,84,0.1); border-top: 3px solid var(--pm-accent);
  border-radius: 3px; padding: 26px 28px; background: var(--pm-paper); }
.pm-news-card time { display: block; font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--pm-accent-text);
  margin-bottom: 10px; }
.pm-news-card h3 { font-size: 1.2rem; font-weight: 600; margin: 0 0 10px; }
.pm-news-card p { font-size: 0.92rem; color: var(--pm-muted-text); margin: 0 0 14px; }
.pm-news-link { font-size: 0.82rem; font-weight: 600; color: var(--pm-accent-text);
  text-decoration: none; }
.pm-news-link:hover { text-decoration: underline; }
section#news .pm-news-list, .pm-news .pm-news-list { margin-top: 8px; }

/* ---------------------------------------------------------------------------
   14. TOAST
   --------------------------------------------------------------------------- */

.pm-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  background: var(--pm-ink-deep); color: #fff; padding: 13px 22px;
  border-radius: 3px; font-size: 0.86rem; opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--pm-ease), transform 0.3s var(--pm-ease);
  z-index: 950; max-width: calc(100vw - 40px); }
.pm-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------------------
   15. RESPONSIVE
   The 1200px breakpoint matches where the corporate nav collapses, so the
   subnav's sticky offset stays correct on both sides of it.
   --------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .pm-feature-inner, .pm-next-inner { grid-template-columns: 1fr; gap: 30px; }
  .pm-issue-row { grid-template-columns: 220px 1fr; gap: 26px; }
  .pm-subscribe .inner { grid-template-columns: 1fr; gap: 40px; }
  .pm-search-form { grid-template-columns: 1fr 1fr; }
  .pm-search-field { grid-column: 1 / -1; }
}

/* Stacked stat-grid columns lose the vertical divider and gain a horizontal
   one instead — a left border on a full-width stacked block reads as a
   stray line down the left edge, not a column separator. */
@media (max-width: 520px) {
  .pm-statgrid-col + .pm-statgrid-col { border-left: none;
    border-top: 1px solid rgba(8,36,84,0.12); padding-top: 24px; margin-top: 4px; }
}

/* MASTHEAD LOGO SWAP: below 480px a wide 3:1+ horizontal lockup has to
   shrink so far to fit that the wordmark stops being legible, so the
   masthead swaps to the stacked (square) mark instead — content the same,
   just a different crop of the same artwork (go-live fix, 2026-08-03). */
@media (max-width: 480px) {
  .pm-masthead-mark-wide { display: none; }
  .pm-masthead-mark-narrow { display: block; }
}

/* Timeline: single-column stacked, per the brief — the desktop left/right
   alternation is a layout device that stops making sense once there is no
   room either side of the centre line. */
@media (max-width: 640px) {
  .pm-timeline-entry, .pm-timeline-entry-left, .pm-timeline-entry-right {
    width: auto; margin-left: 0; margin-right: 0; text-align: left;
    border-left: 2px solid var(--pm-accent); border-right: none;
    padding-left: 18px; padding-right: 10px; }
}

@media (max-width: 700px) {
  .pm-section { padding: 60px 20px; }
  .pm-feature { padding: 56px 20px 28px; }
  .pm-next { padding: 28px 20px 60px; }
  .pm-hero-inner { padding: 68px 20px 60px; }
  .pm-page-head-inner, .pm-masthead-inner { padding: 56px 20px 48px; }
  /* The image stacks above the text rather than shrinking into a thumbnail:
     below this width a 220px image column leaves the headline nowhere to go. */
  .pm-issue-row { grid-template-columns: 1fr; gap: 18px; padding: 26px 0; }
  .pm-issue-row .bignum { top: -12px; font-size: 3.2rem; }
  .pm-form-row.cols-2 { grid-template-columns: 1fr; }
  .pm-search-form { grid-template-columns: 1fr; }
  .pm-subscribe { padding: 60px 20px; }
  .pm-prose { padding: 44px 20px; }
  .pm-cover { padding: 36px 20px 0; }
  .pm-utilbar { padding: 0 20px; }
  .pm-masthead-mark img { max-height: 200px; }
  /* Tap targets: 44px minimum on touch. */
  .pm-btn { padding: 15px 26px; min-height: 46px; }
  .pm-util-btn { min-height: 44px; padding: 12px 16px; }
  .pm-subnav { top: 61px; }
}

@media (min-width: 1201px) {
  .pm-subnav { top: 69px; }
}