/* =============================================================
   Commons World — pillar-page.css
   The nine Pillar pages (page-pillar.php), rebuilt 6N as an editorial
   long-read around Mohan's own copy (docs/plan/6N-PILLAR-COPY-AND-HOME.md
   §4) — replaces 6M's six-band layout with an editorial topic page: a
   dominant image-led hero, adaptive chapter rail, continuous reading
   system (prose + optional list + optional case-study panel + the honest
   status line), and the closing CTA/index. Enqueued
   only on these nine pages (see inc/assets.php) — runs on top of the
   shared .cw-band / .cw-container / .cw-eyebrow / .cw-btn / .cw-chip /
   .cw-link-arrow / .cw-sechead system already in base.css / layout.css /
   components.css. No --cw-* custom property is redeclared here — every
   colour/type/space value below is the theme's existing token, consumed
   as-is.

   6M's "what it does" item grid, governance status panel, and the
   cross-Pillar "how it connects" rows are retired along with the invented
   spec data they rendered (docs/plan/6M-DATA-LAYER-AUDIT.md) — replaced
   by the sibling auto-linker inline in the prose (no separate band
   needed) and the case-study panel below.

   Source of truth for this file's shape: docs/plan/6N-PILLAR-COPY-AND-
   HOME.md §4 (the anatomy) + docs/plan/6M-pillar-template-mockup.html
   (the underlying palette/spacing, unchanged) + CLAUDE.md (the book's
   cream-tint / gold-left-rule panel motif, echoed here in .cw-pillar-case
   — the same border-left:3px gold-on-tint language already established by
   community.css .cw-principles__note and series.css .is-style-key-idea).
   ============================================================= */

/* =============================================================
   1. EDITORIAL HERO — wide image lead, never a thumbnail beside copy.
   ============================================================= */
.cw-pillar-hero {
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(3.75rem, 5.5vw, 5rem);
}
.cw-pillar-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 8%;
  right: -12%;
  width: min(44rem, 66vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 163, 75, 0.13), rgba(201, 163, 75, 0) 68%);
  pointer-events: none;
}
.cw-phero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  max-width: min(86rem, calc(100vw - 2 * var(--cw-gutter)));
  margin-inline: auto;
}
@media (min-width: 960px) {
  .cw-phero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "header media"
      "intro  media";
    column-gap: clamp(3rem, 5vw, 5rem);
    row-gap: clamp(1.5rem, 2.5vw, 2rem);
  }
  .cw-phero__header {
    grid-area: header;
    align-self: end;
  }
  .cw-phero__intro {
    grid-area: intro;
    align-self: start;
  }
  .cw-phero__media {
    grid-area: media;
    justify-self: center;
    width: 100%;
  }
}
.cw-phero__header,
.cw-phero__intro {
  min-width: 0;
}
.cw-phero__title {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(3.15rem, 5.1vw, 5.4rem);
  line-height: 0.99;
  letter-spacing: -0.025em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}
.cw-phero__title--measured {
  font-size: clamp(2.9rem, 4.4vw, 4.6rem);
}
.cw-phero__lead {
  max-width: 43ch;
  margin: 0;
  font-size: clamp(1.15rem, 1.45vw, 1.32rem);
  line-height: 1.62;
  text-wrap: pretty;
}
.cw-phero__route {
  max-width: 43ch;
  margin: clamp(1.25rem, 2.4vw, 1.75rem) 0 0;
  color: rgba(248, 242, 227, 0.78);
  font-size: 0.98rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.cw-phero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-top: 1rem;
}
.cw-phero__actions .cw-btn {
  min-height: 3.25rem;
}

.cw-phero__media {
  position: relative;
  align-self: center;
  margin: 0;
  overflow: hidden;
  min-height: 0;
  border-radius: clamp(1.1rem, 2vw, 1.8rem);
  background: var(--cw-navy-deep);
  box-shadow: 0 30px 80px rgba(3, 15, 29, 0.38);
}
.cw-phero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(230, 202, 133, 0.38);
  border-radius: inherit;
  pointer-events: none;
}
.cw-phero__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
@media (max-width: 959px) {
  /* Mobile sequence: identity -> image -> explanation. This
     keeps the H1 visible immediately without hiding the photograph below
     a long lead on Pillars V/VI. */
  .cw-phero { gap: clamp(2rem, 7vw, 3rem); }
  .cw-phero__header { order: 1; }
  .cw-phero__media  { order: 2; }
  .cw-phero__intro  { order: 3; }
}
@media (max-width: 520px) {
  .cw-phero__title {
    font-size: clamp(2.25rem, 10.5vw, 3rem);
    line-height: 1.02;
  }
}
/* Icon fallback — never an empty box when a Pillar has no photo on disk
   yet. Same gold-on-tinted-plate language as .cw-np-card__media--fallback
   (pillars.css), scaled up for the much larger hero slot. */
.cw-phero__media-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(280px, 32vw, 440px);
  border-radius: calc(var(--cw-radius-lg) - 0.45rem);
  background: linear-gradient(
    160deg,
    rgba(200, 162, 74, 0.22) 0%,
    var(--cw-navy-deep) 100%
  );
  color: var(--cw-gold-soft);
}
.cw-phero__media-fallback .cw-icon {
  width: 64px;
  height: 64px;
}

/* The compact orientation rail used by UNICEF-style topic pages: it tells
   readers what kind of material follows without becoming a second nav bar. */
.cw-pillar-jump {
  position: relative;
  z-index: 3;
  border-bottom: 1px solid var(--cw-border-soft);
  background: var(--cw-white);
}
.cw-pillar-jump__inner {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  max-width: var(--cw-container-mid);
  min-height: 4.75rem;
}
.cw-pillar-jump__label {
  flex: 0 0 auto;
  margin: 0;
  padding-right: clamp(1.25rem, 3vw, 2.5rem);
  border-right: 1px solid var(--cw-border-soft);
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cw-heading);
}
.cw-pillar-jump__list {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.8vw, 2.4rem);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}
.cw-pillar-jump__list::-webkit-scrollbar { display: none; }
.cw-pillar-jump__list li { flex: 0 0 auto; margin: 0; }
.cw-pillar-jump__list a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--cw-ink-soft);
  font-size: 0.95rem;
  font-weight: 650;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.cw-pillar-jump__list a:hover,
.cw-pillar-jump__list a:focus-visible {
  color: var(--cw-heading);
  border-bottom-color: var(--cw-gold);
}
@media (max-width: 700px) {
  .cw-pillar-jump__inner {
    display: block;
    padding-block: 1rem;
  }
  .cw-pillar-jump__label {
    margin-bottom: 0.45rem;
    padding-right: 0;
    border-right: 0;
  }
  .cw-pillar-jump__list {
    margin-inline: calc(-1 * var(--cw-gutter));
    padding-inline: var(--cw-gutter);
  }
}

/* =============================================================
   2. THE LONG-READ — prose, structured list, case-study panel, status line.
   ============================================================= */

/* -------------------------------------------------------------
   2/a. The reading column.

   6R — THE BUG PANDA SAW ("mostly just left aligned text columns").
   Measured at 1440: the long-read's container rendered 1180px wide and
   .cw-pillar-prose's own 66ch cap resolved to 558px, so every paragraph,
   the case panel and the status line sat FLUSH LEFT with 712px of empty
   band beside them. It read as a broken layout, not a margin.

   Root cause is the trap pages.css:1336 already documents from the 6B
   About review: `.cw-container--narrow` is DEAD inside `.cw-band`, because
   `.cw-band .cw-container` (components.css:2747, two classes,
   --cw-container-mid) beats it (one class). The template asked for narrow
   and silently got mid.

   Fix: the long-read's container owns its width outright under a
   three-class selector that cannot lose to either of them, and the
   measure moves from the prose OUT to the container — so the column is
   the column, centred, with nothing left over to look abandoned.
   .cw-pillar-prose keeps a cap only as a large-font safety net, and
   centres if it ever binds.
------------------------------------------------------------- */
.cw-band .cw-container.cw-pillar-read {
  max-width: 46rem;
  /* ONE measure for the whole long-read. Deliberately rem, not ch: `ch`
     resolves against each element's OWN font, so the body prose, the
     serif display lines and the case panel would all have come out a
     different width from the same "68ch" and the column would read as
     ragged. 36rem is the 68ch the body copy was already setting. */
  --cw-measure: 40rem;
}
.cw-pillar-article {
  scroll-margin-top: 6rem;
}
.cw-pillar-kicker,
.cw-pillar-panel__eyebrow {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6e5620;
}
.cw-pillar-kicker {
  max-width: var(--cw-measure, 40rem);
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--cw-border-soft);
}
/* The strip splits the long-read into two paper bands; the second one
   resumes mid-thought, so it opens tighter than a band normally would. */
.cw-pillar-read--cont {
  padding-top: 0;
}
.cw-pillar-prose {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  max-width: var(--cw-measure, 40rem);
  margin-inline: auto;
}
.cw-pillar-prose p {
  margin: 0;
  font-size: clamp(1.08rem, 1.25vw, 1.18rem);
  line-height: 1.76;
  color: var(--cw-ink-soft);
}
.cw-pillar-prose p.cw-pillar-prose__lead {
  color: var(--cw-ink);
  font-weight: 500;
  /* "First paragraph as a larger lead" (6N §4/2) — a genuine step up from
     body-lg, short of pull-quote size. */
  font-size: clamp(1.24rem, 2vw, 1.46rem);
  line-height: 1.55;
}
/* Sibling-Pillar auto-links (cw_pillar_autolink_paragraphs(), inc/
   template-tags.php) — the same in-body-link language essays.css already
   uses (.cw-essay__body a), so an inline link reads consistently wherever
   it appears on the site. */
.cw-pillar-prose a {
  color: var(--cw-ink);
  text-decoration: underline;
  text-decoration-color: var(--cw-gold);
  text-underline-offset: 2px;
}
.cw-pillar-prose a:hover {
  color: var(--cw-gold-deep);
}

/* One editorial decision point after the opening movement. It is deliberately
   a single compact module, not a recurring banner: the article can keep
   teaching while the visitor who is ready for the whole system has a clear
   onward route. */
.cw-pillar-route {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  max-width: calc(var(--cw-measure, 40rem) + 4rem);
  margin: clamp(3rem, 6vw, 4.5rem) auto;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  overflow: hidden;
  border: 1px solid rgba(201, 163, 75, 0.5);
  border-radius: var(--cw-radius-lg);
  background:
    radial-gradient(circle at 100% 0, rgba(201, 163, 75, 0.18), transparent 42%),
    var(--cw-navy);
  box-shadow: 0 18px 50px rgba(19, 42, 69, 0.12);
  color: var(--cw-on-dark);
}
.cw-pillar-route__eyebrow {
  margin: 0 0 0.7rem;
  color: var(--cw-gold-light);
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cw-pillar-route h2 {
  max-width: 16ch;
  margin: 0;
  color: var(--cw-on-dark);
  font-size: clamp(1.8rem, 4vw, 2.55rem);
  line-height: 1.08;
  text-wrap: balance;
}
.cw-pillar-route__copy > p:last-child {
  max-width: 48ch;
  margin: 1rem 0 0;
  color: rgba(248, 242, 227, 0.8);
  font-size: clamp(1.02rem, 1.4vw, 1.12rem);
  line-height: 1.65;
  text-wrap: pretty;
}
.cw-pillar-route__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
}
@media (min-width: 780px) {
  .cw-pillar-route {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
  .cw-pillar-route__actions {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 520px) {
  .cw-phero__actions,
  .cw-pillar-route__actions {
    align-items: stretch;
  }
  .cw-phero__actions .cw-btn,
  .cw-pillar-route__actions .cw-btn {
    width: 100%;
  }
  .cw-phero__actions .cw-link-arrow,
  .cw-pillar-route__actions .cw-link-arrow {
    justify-content: center;
    min-height: 2.75rem;
  }
}

/* -------------------------------------------------------------
   2/b. Structured list — copy['list'] + copy['list_intro'], OPTIONAL.
   Bordered white block, the same visual weight 6M's governance status
   panel used (white / border / radius / shadow) for a "this is a
   distinct, citable block" read — reused here for a different purpose,
   the fabricated checklist it used to hold is gone.
------------------------------------------------------------- */
/* 6R: everything in the long-read hangs off ONE measure (68ch, centred),
   so the column reads as a column — and the two panels then BREAK OUT of
   it by 2rem a side at desktop. Varying element width at a few deliberate
   moments is what stops a long read looking like one undifferentiated
   block; without the shared measure it would just look misaligned. */
.cw-pillar-list,
.cw-pillar-case,
.cw-pillar-close,
.cw-pillar-status,
.cw-pillar-seq,
.cw-pillar-motif {
  max-width: var(--cw-measure, 40rem);
  margin-inline: auto;
}
@media (min-width: 800px) {
  .cw-pillar-list,
  .cw-pillar-case {
    max-width: calc(var(--cw-measure, 40rem) + 6rem);
  }
}
.cw-pillar-list {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding: clamp(1.6rem, 4vw, 2.5rem);
  background: var(--cw-white);
  border: 1px solid var(--cw-border-soft);
  border-top: 4px solid var(--cw-gold);
  border-radius: var(--cw-radius-lg);
  box-shadow: 0 18px 50px rgba(19, 42, 69, 0.08);
  scroll-margin-top: 6rem;
}
.cw-pillar-list__intro {
  margin: 0.8rem 0 1.4rem;
  font-family: var(--cw-font-serif);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--cw-ink);
}
.cw-pillar-list__items {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cw-pillar-list__items li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--cw-ink-soft);
  /* Owl-selector fix: base.css' global `li + li { margin-top:.4em }`
     would otherwise push every item but the first out of rhythm with its
     gold marker (memory li-owl-margin-leak — neutralised at the
     selector, never masked with font-size:0). */
  margin-top: 0;
}
.cw-pillar-list__items li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  transform: rotate(45deg);
  background: var(--cw-gold);
}

/* -------------------------------------------------------------
   2/c. Case-study panel — body[case_study], OPTIONAL. Cream tint + gold
   left rule: the book's meditation-panel motif (CLAUDE.md), echoed here
   for the human anecdotes Mohan's copy carries (Emeka's mine, the Braga
   co-op, Lake Mwanza…). The preceding "✦ ✦ ✦" is the same gold-diamond
   divider the book uses between sections — purely decorative
   (aria-hidden in the template), so it never interrupts the reading
   order for assistive tech.
------------------------------------------------------------- */
.cw-pillar-motif {
  margin: clamp(3rem, 6vw, 4.5rem) auto clamp(1.1rem, 2.5vw, 1.4rem);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  color: var(--cw-gold);
}
.cw-pillar-case {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--cw-surface-zone);
  border-left: 5px solid var(--cw-gold);
  border-radius: 0 var(--cw-radius-lg) var(--cw-radius-lg) 0;
  scroll-margin-top: 6rem;
}
.cw-pillar-case p {
  margin: 0.85rem 0 0;
  font-family: var(--cw-font-heading);
  font-weight: 500;
  font-size: clamp(1.08rem, 1.7vw, 1.25rem);
  line-height: 1.55;
  color: var(--cw-heading);
}
.cw-pillar-case a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--cw-gold);
  text-underline-offset: 2px;
}
.cw-pillar-case a:hover {
  color: var(--cw-gold-deep);
}

/* -------------------------------------------------------------
   2/d. Honest status line — one quiet sentence, no checklist. 6M's
   fabricated implementation[] panel (docs/plan/6M-DATA-LAYER-AUDIT.md:
   invented) is deleted outright, not just restyled.
------------------------------------------------------------- */
.cw-pillar-status {
  margin-top: clamp(2.5rem, 4vw, 3.25rem);
  padding: clamp(1.35rem, 3vw, 1.75rem);
  border: 1px solid var(--cw-border-soft);
  border-radius: var(--cw-radius-md);
  background: var(--cw-white);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cw-ink-soft);
  scroll-margin-top: 6rem;
}
.cw-pillar-status p:last-child {
  margin: 0.65rem 0 0;
}

/* =============================================================
   2/e. 6Q — the turn (docs/plan/6Q-READMORE-AND-PILLARS.md).
   ONE body paragraph per Pillar (copy['turn'], utilities.php) set as
   display type instead of a body <p> — moved, never copied. Two renders:

   THE STRIP — a mid-body turn (PCH's Prime Directive, CR's and ATE's
   one-sentence pivots) runs as a full-bleed --tint band between two
   --paper bands: the same surface flip the homepage uses, and the only
   generic band break these pages can carry honestly (a photo per Pillar
   body is blocked on Mohan's stock assets). Centered serif over the
   book's gold-diamond divider motif (CLAUDE.md) — the meditation-panel
   language at band scale.

   THE CLOSE — a last-paragraph turn (the other six Pillars) sets as a
   display line after the case-study panel, in the read-more page's turn
   grammar (gold left rule + serif), so the page ends on his closing
   line instead of tailing off in body type.
   ============================================================= */
.cw-pillar-strip {
  padding-block: clamp(2.75rem, 5vw, 4rem);
  text-align: center;
  scroll-margin-top: 6rem;
}
.cw-pillar-strip__motif {
  margin: 0 0 clamp(0.9rem, 2vw, 1.25rem);
  font-size: 0.85rem;
  letter-spacing: 0.45em;
  /* one glyph's tracking hangs past the visual centre — nudge back */
  text-indent: 0.45em;
  color: var(--cw-gold);
}
.cw-pillar-strip__text {
  max-width: 30em;
  margin: 0 auto;
  font-family: var(--cw-font-serif);
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--cw-heading);
  text-wrap: balance;
}
.cw-pillar-strip__text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--cw-gold);
  text-underline-offset: 2px;
}

.cw-pillar-close {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-left: clamp(1.1rem, 2.5vw, 1.75rem);
  border-left: 2px solid var(--cw-gold);
  font-family: var(--cw-font-serif);
  font-size: clamp(1.28rem, 2.1vw, 1.55rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--cw-heading);
}
.cw-pillar-close a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--cw-gold);
  text-underline-offset: 2px;
}

/* =============================================================
   2/f. 6Q — slug-keyed list presentation. The container block is
   unchanged; --rows swaps the diamond bullets for hairline-separated
   rows so GAR's colour dots, ATE's "ADn, Name," lead-ins, and EL's
   numerals do the scanning work instead. Emphasis is his own leading
   characters wrapped in markup — never a reword (template 2/b).
   ============================================================= */
.cw-pillar-list--rows .cw-pillar-list__items {
  gap: 0;
}
.cw-pillar-list--rows .cw-pillar-list__items li {
  padding: 0.85rem 0;
  padding-left: 0;
  border-top: 1px solid var(--cw-border-soft);
}
.cw-pillar-list--rows .cw-pillar-list__items li::before {
  content: none;
}
.cw-pillar-list__lead {
  font-weight: 600;
  color: var(--cw-heading);
}
.cw-pillar-list__n {
  display: inline-block;
  min-width: 2rem;
  font-family: var(--cw-font-serif);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cw-gold-deep);
  font-variant-numeric: tabular-nums;
}
/* -------------------------------------------------------------
   GAR's seven colours — 6R: ONE CONTINUOUS SPECTRUM RAIL.

   Panda: "the color code card on GAR needs to be optimised so all colors
   are clearly visible." The 6Q version keyed each row with a 0.7rem dot,
   which failed twice over: at that size a swatch is too small to read as
   a colour at all, and the two lightest — Yellow on white and White on
   white — effectively disappeared. Seven separate dots also never showed
   the one thing the list is about, that these are a SCALE running from
   confirmed harm to civilisational contribution.

   So the swatch becomes a full-height block in its own grid column, rows
   sit flush (gap: 0, and the separating hairline moves onto the text cell
   so it can't cut the rail), and the seven together read as a single
   graded bar down the left of the card. Every swatch also carries an
   inset hairline: that is what makes Yellow and White read as deliberate
   swatches on a white card rather than as gaps, without having to darken
   either colour into something it is not.

   Still purely decorative (aria-hidden in the template) — Mohan's own
   sentence names each colour, so nothing here is load-bearing meaning.
------------------------------------------------------------- */
.cw-pillar-list--scale .cw-pillar-list__items li {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  column-gap: clamp(0.9rem, 2vw, 1.2rem);
  align-items: stretch;
  /* Padding lives on the text cell, not here: any padding on the row
     itself would open a gap between one swatch and the next. */
  padding: 0;
  border-top: 0;
}
.cw-pillar-list--scale .cw-pillar-list__body {
  padding: 0.9rem 0;
  border-top: 1px solid var(--cw-border-soft);
}
.cw-pillar-list--scale .cw-pillar-list__items li:first-child .cw-pillar-list__body {
  border-top: 0;
}
.cw-pillar-swatch {
  align-self: stretch;
  width: 100%;
  /* The hairline is what keeps the palest two visible — see the note above. */
  box-shadow: inset 0 0 0 1px rgba(38, 34, 25, 0.16);
}
.cw-pillar-list--scale .cw-pillar-list__items li:first-child .cw-pillar-swatch {
  border-radius: 3px 3px 0 0;
}
.cw-pillar-list--scale .cw-pillar-list__items li:last-child .cw-pillar-swatch {
  border-radius: 0 0 3px 3px;
}
.cw-pillar-swatch--red    { background: #b03027; }
.cw-pillar-swatch--orange { background: #c4661a; }
.cw-pillar-swatch--yellow { background: #d8a81b; }
.cw-pillar-swatch--green  { background: #3f7a45; }
.cw-pillar-swatch--blue   { background: #2f628f; }
.cw-pillar-swatch--violet { background: #6a4e96; }
.cw-pillar-swatch--white  {
  background: #fcfaf4;
  box-shadow: inset 0 0 0 1px rgba(38, 34, 25, 0.32);
}

/* =============================================================
   2/g. 6R — MOVEMENTS: breaking the long-read into digestible parts.

   Every Pillar page ran 6–12 body paragraphs at one size, one weight, one
   colour, with nothing to enter on and no sense of how far in you were.
   The page is now chunked into movements of ~3 paragraphs
   (cw_pillar_movements()), each announced by a chrome numeral on a gold
   rule, and each opening on its own first sentence set as display type
   (cw_pillar_split_opening()).

   The display lines are the point: they give the page a spine you can
   read by scrolling, and — because a sentence is MOVED into a bigger
   register rather than summarised — that spine is written in Mohan's
   words. Not one word is added, dropped, or reordered anywhere on this
   page (docs/plan/6R-PILLAR-PAGES-AND-CARDS.md).

   Movement 01 is deliberately quieter: it already has the hero directly
   above it and the large .cw-pillar-prose__lead paragraph, so it takes
   the numeral but neither the rule nor a lifted sentence.
   ============================================================= */
.cw-pillar-mv {
  max-width: var(--cw-measure, 40rem);
  margin-inline: auto;
}
.cw-pillar-mv + .cw-pillar-mv {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
}
.cw-pillar-mv__n {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 clamp(0.9rem, 2vw, 1.25rem);
  font-family: var(--cw-font-serif);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  color: #6e5620; /* not --cw-gold-deep: that fails AA on paper/tint (see page-pillar.php's hard rules) */
}
.cw-pillar-mv__n::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to right, var(--cw-gold), rgba(194, 162, 76, 0));
}
.cw-pillar-mv--first .cw-pillar-mv__n::after {
  /* the opening movement gets the numeral but not the rule — the hero is
     its divider */
  display: none;
}
.cw-pillar-mv__open {
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
  font-family: var(--cw-font-serif);
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  font-weight: 500;
  line-height: 1.28;
  color: var(--cw-heading);
  text-wrap: balance;
}
.cw-pillar-mv__open a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--cw-gold);
  text-underline-offset: 3px;
}

/* -------------------------------------------------------------
   2/h. 6R — Previous / next Pillar.
   The nine are a sequence, and the only way between them used to be the
   index at the very bottom of the page. Registry-driven chrome; no copy
   of Mohan's is involved.
------------------------------------------------------------- */
.cw-pillar-seq {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--cw-border-soft);
}
.cw-pillar-seq__link {
  flex: 1 1 16rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--cw-border-soft);
  border-radius: var(--cw-radius-md);
  background: var(--cw-white);
  text-decoration: none;
  transition: border-color var(--cw-dur) var(--cw-ease), background var(--cw-dur) var(--cw-ease);
}
.cw-pillar-seq__link:hover {
  border-color: var(--cw-gold);
  background: var(--cw-surface-zone);
}
.cw-pillar-seq__link--next {
  text-align: right;
}
.cw-pillar-seq__dir {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6e5620;
}
.cw-pillar-seq__name {
  font-family: var(--cw-font-serif);
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--cw-heading);
}
.cw-pillar-seq__num {
  margin-right: 0.45rem;
  font-weight: 700;
  color: var(--cw-gold-deep);
}
/* A lone "next" (Pillar I) must not stretch across the whole row as if it
   were a full-width banner — keep it in the right-hand half. */
.cw-pillar-seq__link--next:only-child {
  margin-left: auto;
  flex-grow: 0;
}

/* =============================================================
   3. CLOSING ROUTE — one clear continuation, then the compact index.
   ============================================================= */
.cw-pillar-closing .cw-cta-band {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}
.cw-pillar-closing .cw-cta-band__title {
  max-width: 16ch;
  margin-inline: auto;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  text-wrap: balance;
}
.cw-pillar-closing .cw-cta-band__lede {
  max-width: 56ch;
  margin-inline: auto;
  font-size: 1.08rem;
  line-height: 1.7;
}
.cw-pillar-closing__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
}
@media (max-width: 520px) {
  .cw-pillar-closing__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    max-width: 22rem;
    margin-inline: auto;
  }
  .cw-pillar-closing__actions .cw-btn {
    width: 100%;
    min-height: 58px;
    padding: 0.65rem 0.55rem;
    font-size: 0.88rem;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
  }
}

.cw-index {
  margin-top: clamp(4rem, 7vw, 5.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--cw-border-dark);
}
.cw-index__head {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cw-gold-soft);
  margin-bottom: 1.4rem;
  text-align: center;
}
.cw-index__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem 2rem;
  list-style: none;
  margin-inline: auto;
  padding: 0;
  max-width: var(--cw-container-mid);
}
@media (min-width: 620px) {
  .cw-index__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .cw-index__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.cw-index__list li {
  /* Owl-selector fix — see .cw-pillar-list__items li above. */
  margin-top: 0;
}
.cw-index__link {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.75rem 0.65rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--cw-on-dark);
  font-size: 0.95rem;
  transition: background var(--cw-dur) var(--cw-ease);
}
a.cw-index__link:hover {
  background: rgba(247, 241, 231, 0.07);
}
.cw-index__link[aria-current] {
  color: var(--cw-gold-soft);
  font-weight: 700;
}
.cw-index__num {
  flex: 0 0 1.7rem;
  font-family: var(--cw-font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--cw-gold);
  letter-spacing: 0.04em;
}
.cw-index__dom {
  display: block;
  font-size: 0.74rem;
  /* The mockup's rgba(...,.5) measures 4.36:1 on --cw-navy — fails AA at
     this size (11.8px, well under the large-text threshold). .65 holds
     6.35:1 while staying visibly the more muted of the two lines. */
  color: rgba(245, 240, 232, 0.65);
  letter-spacing: 0.02em;
  margin-top: 0.1rem;
}