/* =============================================================
   Commons World — components.css
   Buttons · fields · header/nav · logo lockup · footer · hero ·
   book cover · capture · pillars · support · tiers · page-hero ·
   breadcrumbs · reading + progress · cards/postlist.
   Canonical class names per BUILD-CONTRACT §3. Tokens per §2.
   ============================================================= */

/* =============================================================
   BUTTONS
   Gold CTAs use NAVY text (--cw-cta-text), never white (§1.7).
============================================================= */
.cw-btn {
  --_bg: var(--cw-cta);
  --_fg: var(--cw-cta-text);
  --_bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  padding: 16px 26px;
  font-family: var(--cw-font-sans);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid var(--_bd);
  border-radius: 14px;
  box-shadow: var(--cw-shadow-card);
  cursor: pointer;
  transition: transform var(--cw-dur) var(--cw-ease),
    background var(--cw-dur) var(--cw-ease),
    box-shadow var(--cw-dur) var(--cw-ease),
    filter var(--cw-dur) var(--cw-ease),
    color var(--cw-dur) var(--cw-ease),
    border-color var(--cw-dur) var(--cw-ease);
}
.cw-btn:hover {
  text-decoration: none;
  background: var(--cw-cta-hover);
  color: var(--cw-cta-text);
  transform: translateY(-2px);
  box-shadow: var(--cw-shadow-soft);
}
.cw-btn:active {
  transform: translateY(0);
  box-shadow: var(--cw-shadow-card);
}
.cw-btn .cw-icon {
  width: 1.25em;
  height: 1.25em;
}

/* Primary = warm luminous gold / navy ink text (§1.7 — never white).
   Metallic feel: a soft top light-edge (inset highlight) + a warm gold glow,
   not a cold navy drop shadow. Deepens richly on hover. */
.cw-btn--primary {
  --_bg: linear-gradient(180deg, var(--cw-gold-soft) 0%, var(--cw-gold) 100%);
  --_fg: var(--cw-cta-text);
  --_bd: rgba(118, 88, 28, 0.5); /* warm hairline edge — reads as struck metal, not a flat chip */
  /* embossed bevel: bright top edge + soft inner bottom shadow + warm ambient glow */
  box-shadow: inset 0 1px 0 rgba(255, 250, 241, 0.55),
    inset 0 -1px 1px rgba(86, 62, 16, 0.22),
    0 10px 26px rgba(176, 132, 40, 0.32);
  text-shadow: 0 1px 0 rgba(255, 250, 241, 0.32); /* faint letterpress on the warm ink */
}
.cw-btn--primary:hover {
  /* brighten as if catching the light, then lift */
  background: linear-gradient(180deg, var(--cw-gold-light) 0%, var(--cw-gold-soft) 100%);
  color: var(--cw-cta-text);
  transform: translateY(-2px);
  filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 250, 241, 0.6),
    inset 0 -1px 1px rgba(86, 62, 16, 0.2),
    0 18px 42px rgba(176, 132, 40, 0.42);
}

/* Dark = deep navy gradient / cream text */
.cw-btn--dark {
  --_bg: linear-gradient(180deg, var(--cw-navy), var(--cw-navy-deep));
  --_fg: var(--cw-cream-light);
  --_bd: transparent;
  box-shadow: 0 18px 42px rgba(11, 29, 51, 0.18);
}
.cw-btn--dark:hover {
  background: linear-gradient(180deg, var(--cw-navy), var(--cw-navy-deep));
  color: var(--cw-cream-light);
  transform: translateY(-1px);
  filter: brightness(1.06);
}

/* Secondary = outline navy */
.cw-btn--secondary {
  --_bg: transparent;
  --_fg: var(--cw-navy);
  --_bd: var(--cw-navy);
  box-shadow: none;
}
.cw-btn--secondary:hover {
  --_bg: var(--cw-navy);
  --_fg: var(--cw-cream);
  border-color: var(--cw-navy);
  box-shadow: none;
}

/* Ghost = quiet, borderless until hover */
.cw-btn--ghost {
  --_bg: transparent;
  --_fg: var(--cw-navy);
  --_bd: var(--cw-border);
  box-shadow: none;
}
.cw-btn--ghost:hover {
  --_bg: var(--cw-cream-dark);
  --_fg: var(--cw-navy-deep);
  border-color: var(--cw-border);
  box-shadow: none;
  transform: none;
}

/* Size + block */
.cw-btn--lg {
  padding: 1.2rem 2rem;
  font-size: var(--cw-fs-body-lg);
}
.cw-btn--block {
  display: flex;
  width: 100%;
}

/* On-dark surfaces */
.cw-btn--on-dark.cw-btn--secondary {
  --_fg: var(--cw-cream);
  --_bd: rgba(245, 240, 232, 0.5);
}
.cw-btn--on-dark.cw-btn--secondary:hover {
  --_bg: var(--cw-cream);
  --_fg: var(--cw-navy-deep);
  border-color: var(--cw-cream);
}
.cw-btn--on-dark.cw-btn--ghost {
  --_fg: var(--cw-cream);
  --_bd: rgba(245, 240, 232, 0.32);
}
.cw-btn--on-dark.cw-btn--ghost:hover {
  --_bg: rgba(245, 240, 232, 0.1);
  --_fg: var(--cw-cream);
  border-color: rgba(245, 240, 232, 0.5);
}

/* Disabled — applies to <a aria-disabled> and <button disabled> */
.cw-btn[disabled],
.cw-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
  pointer-events: none;
  transform: none;
}

/* Mobile: full-width, taller tap targets for the conversion CTAs */
@media (max-width: 767px) {
  .cw-btn--primary,
  .cw-btn--dark {
    width: 100%;
    min-height: 66px;
    padding: 18px 24px;
    font-size: 1.04rem;
  }
}

/* =============================================================
   FIELDS / FORMS
============================================================= */
.cw-field {
  margin-bottom: 1.25rem;
  text-align: left;
}
.cw-field__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--cw-fs-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cw-ink);
}
.cw-field__input {
  display: block;
  width: 100%;
  font-family: var(--cw-font-body);
  font-size: var(--cw-fs-body);
  line-height: 1.5;
  color: var(--cw-ink);
  background: var(--cw-cream-light);
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius-sm);
  padding: 0.85rem 1rem;
  transition: border-color var(--cw-dur-fast) var(--cw-ease),
    box-shadow var(--cw-dur-fast) var(--cw-ease);
}
.cw-field__input::placeholder {
  color: var(--cw-muted);
  opacity: 0.85;
}
.cw-field__input:focus {
  outline: none;
  border-color: var(--cw-gold-deep);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.28);
}
textarea.cw-field__input {
  min-height: 9rem;
  resize: vertical;
}

/* Checkbox field — checkbox + inline label */
.cw-field--checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.65rem;
}
.cw-field--checkbox .cw-field__input {
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  margin-top: 0.15rem;
  accent-color: var(--cw-gold-deep);
  flex-shrink: 0;
}
.cw-field--checkbox .cw-field__label {
  margin-bottom: 0;
  font-weight: 400;
  font-size: var(--cw-fs-small);
  line-height: 1.5;
  color: var(--cw-text-muted);
}

/* Helper note + live status */
.cw-form-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  font-size: var(--cw-fs-small);
  color: var(--cw-text-muted);
}
.cw-form-note .cw-icon {
  width: 1em;
  height: 1em;
}
.cw-form-status {
  margin-top: 0.9rem;
  font-size: var(--cw-fs-small);
  font-weight: 700;
  min-height: 1.2em;
}
.cw-form-status[data-state="error"] {
  color: var(--cw-error);
}
.cw-form-status[data-state="success"] {
  color: var(--cw-success);
}

/* Fields on the dark capture panel */
.cw-capture .cw-field {
  margin-bottom: 0;
}
.cw-capture .cw-field:not(.cw-field--checkbox) .cw-field__input {
  min-height: 60px;
  padding: 0 20px;
  border-radius: 10px;
  background: var(--cw-cream-light);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--cw-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.cw-capture .cw-field__input:focus {
  outline: 3px solid rgba(227, 198, 108, 0.32);
  outline-offset: 2px;
  border-color: rgba(227, 198, 108, 0.6);
}
.cw-capture .cw-field__label {
  color: rgba(255, 250, 241, 0.92);
  font-size: 0.92rem;
  font-weight: 700;
}
.cw-capture .cw-form-note {
  justify-content: center;
  color: var(--cw-muted-cream);
}
.cw-capture .cw-form-status[data-state="error"] {
  color: #f0b6ae;
}
.cw-capture .cw-form-status[data-state="success"] {
  color: var(--cw-gold-soft);
}
/* Consent — checkbox + text aligned (input is nested inside the label) */
.cw-capture .cw-field--checkbox {
  display: block;
}
.cw-capture .cw-field--checkbox .cw-field__label {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;
  gap: 12px;
  margin: 0;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--cw-muted-cream);
}
.cw-capture .cw-field--checkbox .cw-field__input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--cw-gold);
}

/* =============================================================
   SITE HEADER + NAV
============================================================= */
.cw-site-header {
  position: sticky;
  top: 0;
  z-index: var(--cw-z-header);
  height: var(--cw-header-height);
  background: color-mix(in srgb, var(--cw-cream) 92%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(16, 33, 58, 0.13);
  transition: border-color var(--cw-dur) var(--cw-ease),
    background var(--cw-dur) var(--cw-ease);
}
/* Fallback when backdrop-filter unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cw-site-header {
    background: var(--cw-cream);
  }
}
.cw-site-header[data-scrolled] {
  background: color-mix(in srgb, var(--cw-cream) 95%, transparent);
  border-bottom-color: var(--cw-border);
}

.cw-site-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--cw-navy);
  background: none;
  border: 0;
  cursor: pointer;
}
.cw-site-header__toggle .cw-icon {
  width: 26px;
  height: 26px;
}
/* menu/close icon swap driven by aria-expanded */
.cw-site-header__toggle .cw-icon--close {
  display: none;
}
.cw-site-header__toggle[aria-expanded="true"] .cw-icon--menu {
  display: none;
}
.cw-site-header__toggle[aria-expanded="true"] .cw-icon--close {
  display: inline-flex;
}

.cw-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Reset the global `li + li { margin-top: 0.4em }` typography rule (base.css)
   which leaks onto nav items: it skips the first item (no preceding <li>), so
   in the centred flex row the first item ("About") sat ~3px higher than the
   rest. (Same leak the news filter pills hit.) */
.cw-nav__list > li {
  margin-top: 0;
}
.cw-nav__link {
  display: block;
  font-family: var(--cw-font-body);
  font-weight: 500;
  color: var(--cw-navy);
  text-decoration: none;
  white-space: nowrap;
}
.cw-nav__link:hover {
  text-decoration: none;
  color: var(--cw-navy-deep);
}
.cw-nav__link.is-active {
  color: var(--cw-navy-deep);
}
.cw-nav__cta {
  white-space: nowrap;
}

/* ---------- Mobile nav (full-height drawer, slides from right) ---------- */
@media (max-width: 1023px) {
  /* Taller header on mobile to carry a larger logo */
  .cw-site-header {
    --cw-header-height: 102px;
  }

  /*
   * The header sets backdrop-filter, which makes it the containing block for
   * fixed descendants — so the drawer is positioned relative to the header.
   * top = header height (its bottom edge); height fills the rest of the viewport.
   */
  .cw-nav {
    position: fixed;
    top: var(--cw-header-height);
    left: 0;
    right: 0;
    height: 100vh;
    height: calc(100dvh - var(--cw-header-height));
    z-index: 1;
    display: block;
    padding: 34px 24px calc(34px + env(safe-area-inset-bottom, 0px));
    background: radial-gradient(
        circle at 80% 20%,
        rgba(191, 148, 56, 0.12),
        transparent 32%
      ),
      var(--cw-cream-light);
    transform: translateX(100%);
    transition: transform 220ms var(--cw-ease);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cw-nav.is-open {
    transform: translateX(0);
  }
  .cw-nav__list {
    display: block;
  }
  .cw-nav__link {
    display: block;
    padding: 18px 0;
    border-bottom: 1px solid var(--cw-border-soft);
    font-family: var(--cw-font-serif);
    font-size: 2rem;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--cw-ink);
  }
  /* Secondary mobile area (e.g. "About the Author") */
  .cw-nav__secondary {
    display: block;
    margin-top: 0.5rem;
  }
  .cw-nav__secondary .cw-nav__link {
    font-family: var(--cw-font-sans);
    font-size: 1.06rem;
    letter-spacing: 0;
    border-bottom: 0;
    color: var(--cw-text-muted);
  }
  .cw-nav__cta {
    width: 100%;
    margin-top: 28px;
    font-family: var(--cw-font-sans);
    font-size: 1.06rem;
    letter-spacing: 0;
  }
}

/* ---------- Desktop nav (gold underline grow) ---------- */
@media (min-width: 1024px) {
  .cw-site-header__toggle {
    display: none;
  }
  .cw-nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex: 1; /* fill the row so the links can sit centred between logo and CTA */
  }
  .cw-nav__list {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    margin-inline: auto; /* centre the links; CTA stays pinned right */
  }
  .cw-nav__link {
    position: relative;
    font-size: 0.96rem;
    font-weight: 500;
    padding: 0.5rem 0;
  }
  /* Every link keeps the same weight + colour so the row reads evenly; the
     gold underline is the only active/hover marker (a bolder active item made
     "Book" sit heavier than its neighbours and the rest look grey by contrast). */
  .cw-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -2px;
    height: 1.5px;
    background: var(--cw-gold);
    transition: right var(--cw-dur) var(--cw-ease);
  }
  .cw-nav__link:hover::after,
  .cw-nav__link:focus-visible::after,
  .cw-nav__link.is-active::after {
    right: 0;
  }
  .cw-nav__cta {
    min-height: 52px;
    padding: 0 24px;
    border-radius: 14px;
    font-size: 0.95rem;
    white-space: nowrap;
  }
  /* "About the Author" is a mobile-drawer-only link (it already lives in the
     footer); hide it on desktop so the CTA is the clean terminal element. */
  .cw-nav__secondary {
    display: none;
  }
}

/* =============================================================
   N1 — dropdown navigation (W3C disclosure pattern)
   Top item = real <a>; sibling <button> = disclosure. Desktop opens on
   hover/focus-within/.is-open; mobile is a JS accordion (.cw-js-nav).
============================================================= */
.cw-nav__item {
  position: relative;
}
.cw-nav__disclosure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--cw-navy);
}
.cw-nav__caret {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--cw-dur-fast) var(--cw-ease);
}
.cw-nav__item.is-open > .cw-nav__disclosure .cw-nav__caret {
  transform: rotate(-135deg) translate(-1px, -1px);
}
.cw-nav__submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cw-nav__sublink {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.7rem 0.85rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--cw-navy);
}
.cw-nav__sublink:hover,
.cw-nav__sublink:focus-visible {
  background: rgba(200, 162, 74, 0.1);
  text-decoration: none;
}
.cw-nav__subtitle {
  font-family: var(--cw-font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--cw-navy);
}
.cw-nav__subdesc {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--cw-text-muted);
}
.cw-nav__sublink.is-active .cw-nav__subtitle {
  color: var(--cw-gold-deep);
}

/* ---------- Desktop dropdowns ---------- */
@media (min-width: 1024px) {
  .cw-nav__item--has-children {
    display: inline-flex;
    align-items: center;
    gap: 1px;
  }
  .cw-nav__disclosure {
    width: 26px;
    height: 26px;
  }
  .cw-nav__submenu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    min-width: 268px;
    transform: translateX(-50%) translateY(6px);
    background: var(--cw-cream-light);
    border: 1px solid var(--cw-border-soft);
    border-radius: var(--cw-radius-sm);
    box-shadow: var(--cw-shadow-card);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--cw-dur) var(--cw-ease),
      transform var(--cw-dur) var(--cw-ease);
    z-index: 30;
  }
  /* invisible hover-bridge so the 12px gap doesn't drop the hover */
  .cw-nav__submenu::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
  }
  .cw-nav__item--has-children:hover > .cw-nav__submenu,
  .cw-nav__item--has-children:focus-within > .cw-nav__submenu,
  .cw-nav__item.is-open > .cw-nav__submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  /* trail underline when a child page is current (top <a> isn't .is-active) */
  .cw-nav__item.is-trail .cw-nav__link::after {
    right: 0;
  }
}

/* ---------- Mobile accordions (inside the drawer) ---------- */
@media (max-width: 1023px) {
  .cw-nav__item--has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--cw-border-soft);
  }
  .cw-nav__item--has-children > .cw-nav__link {
    flex: 1;
    border-bottom: 0;
  }
  .cw-nav__item > .cw-nav__disclosure {
    width: 48px;
    min-height: 56px;
    color: var(--cw-ink);
  }
  .cw-nav__caret {
    width: 10px;
    height: 10px;
  }
  .cw-nav__submenu {
    flex-basis: 100%;
    padding: 0 0 0.6rem;
  }
  .cw-nav__sublink {
    padding: 0.55rem 0.25rem;
  }
  /* With JS on, collapse submenus into accordions (no-JS = all expanded). */
  .cw-js-nav .cw-nav__item--has-children .cw-nav__submenu {
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--cw-dur) var(--cw-ease);
  }
  .cw-js-nav .cw-nav__item.is-open .cw-nav__submenu {
    max-height: 70vh;
  }
}

/* =============================================================
   LOGO LOCKUP — COMMONS · 7 GAR bars · rule · WORLD
   Everything scales from font-size (§6).
============================================================= */
.cw-logo {
  --cw-logo-w: 9.2em;
  display: inline-grid;
  justify-items: center;
  gap: 0;
  line-height: 1;
  font-size: 1.4rem; /* base */
  color: var(--cw-navy);
  text-decoration: none;
  transition: opacity var(--cw-dur-fast) var(--cw-ease);
}
a.cw-logo:hover {
  text-decoration: none;
  opacity: 0.85;
}
.cw-logo__commons {
  font-family: var(--cw-font-heading);
  font-weight: 700;
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: currentColor;
}
.cw-logo__bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.42em;
  width: var(--cw-logo-w);
  margin-top: 0.34em;
}
.cw-logo__bar {
  height: 0.2em;
  min-height: 3px;
  border-radius: var(--cw-radius-pill);
  background: var(--c, currentColor);
}
/* The white GAR bar needs a hairline edge to read on cream */
.cw-logo .cw-logo__bar:last-child {
  box-shadow: inset 0 0 0 1px var(--cw-cream-dark);
}
.cw-logo__rule {
  width: var(--cw-logo-w);
  height: 1px;
  margin-top: 0.34em;
  background: var(--cw-border);
}
.cw-logo__world {
  font-family: var(--cw-font-heading);
  font-weight: 400;
  font-size: 0.34em;
  margin-top: 0.5em;
  letter-spacing: 0.46em;
  text-indent: 0.46em; /* optical centring for trailing track */
  text-transform: uppercase;
  color: currentColor;
}

/* Tones */
.cw-logo--dark {
  color: var(--cw-cream);
}
.cw-logo--dark .cw-logo__rule {
  background: rgba(245, 240, 232, 0.22);
}
.cw-logo--dark .cw-logo__bar:last-child {
  box-shadow: inset 0 0 0 1px rgba(245, 240, 232, 0.4);
}

/* Sizes */
.cw-logo--sm {
  font-size: 1.32rem;
}
.cw-logo--lg {
  font-size: 2rem;
}
@media (min-width: 920px) {
  .cw-logo--sm {
    font-size: 1.45rem;
  }
}

/* ---- 4F §F1 — real brand-mark image lockup (header only; footer keeps the
   CSS-drawn lockup above). display:block on the <img> avoids inline-gap
   descender space; the <a> is a plain inline-flex sized off image height so
   it centres cleanly inside .cw-site-header__inner's align-items:center. */
.cw-logo--img {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.cw-logo--img .cw-logo__img {
  display: block;
  width: auto;
  height: 36px;
}
@media (max-width: 1023px) {
  /* Mobile header is taller (102px, components.css §Mobile nav) — let the
     mark grow slightly so it doesn't look lost in the extra height. */
  .cw-logo--img .cw-logo__img {
    height: 40px;
  }
}

/* =============================================================
   SITE FOOTER
============================================================= */
.cw-site-footer {
  background: var(--cw-navy-deep);
  color: rgba(255, 250, 241, 0.74);
  padding-block: clamp(72px, 8vw, 112px) 34px;
}
.cw-site-footer a {
  color: rgba(255, 250, 241, 0.72);
  text-decoration: none;
  transition: color var(--cw-dur-fast) var(--cw-ease);
}
.cw-site-footer a:hover,
.cw-site-footer a:focus-visible {
  text-decoration: none;
  color: var(--cw-gold-light);
}
.cw-site-footer__brand {
  display: grid;
  justify-items: start;
  gap: 0;
  max-width: 360px;
}
.cw-site-footer__brand img,
.cw-site-footer__brand svg {
  opacity: 0.92;
}
.cw-site-footer__tag,
.cw-site-footer__tagline {
  margin: 28px 0 0;
  font-family: var(--cw-font-serif);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.5;
  color: rgba(255, 250, 241, 0.78);
  max-width: none;
}
.cw-site-footer__brand .cw-btn {
  margin-top: 28px;
}
.cw-site-footer__col h2,
.cw-site-footer__head,
.cw-site-footer__col-head {
  margin: 0 0 22px;
  font-family: var(--cw-font-sans);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cw-gold-light);
}
.cw-site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cw-site-footer__col a {
  display: block;
  padding: 8px 0;
  font-size: 1rem;
}
.cw-site-footer__legal {
  max-width: var(--cw-container-mid);
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 250, 241, 0.12);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.88rem;
  color: rgba(255, 250, 241, 0.52);
}
.cw-site-footer__legal p {
  margin: 0;
}
.cw-site-footer__copyright {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(255, 250, 241, 0.52);
}
.cw-site-footer__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  /* Whitespace (newline + indent) between each <li> and its <a> in the
     template injects a font-metric baseline strut into the flex row, which
     lands on the first flex item and lifts it out of alignment with its
     siblings (verified live on /book/'s share row — same markup pattern).
     font-size:0 collapses that whitespace's box; see .cw-site-footer__social
     .cw-icon below for the required icon-size counterpart. Do not remove. */
  font-size: 0;
}
.cw-site-footer__social a:hover {
  color: var(--cw-gold-light);
}
/* .cw-icon is em-sized (1.5em, base.css) — the font-size:0 above would
   shrink it to 0×0 without this. site-footer.php renders each icon via
   cw_icon(..., ['size' => 18]). */
.cw-site-footer__social .cw-icon {
  width: 18px;
  height: 18px;
}

/* ---- S1 additions: brand blurb, Connect column, legal nav ---- */
.cw-site-footer__blurb {
  margin: 24px 0 0;
  font-family: var(--cw-font-sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 250, 241, 0.72);
  max-width: 34ch;
}
/* Connect column: stack the social links vertically with labels. */
.cw-site-footer__col .cw-site-footer__social {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
}
.cw-site-footer__col .cw-site-footer__social a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 8px 0;
  font-size: 1rem;
}
.cw-site-footer__legal-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.88rem;
}
.cw-site-footer__sep {
  margin-inline: 0.5rem;
  color: var(--cw-gold-deep);
}
.cw-site-footer__colophon {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255, 250, 241, 0.45);
}
.cw-site-footer__colophon a {
  color: rgba(255, 250, 241, 0.6);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
@media (min-width: 720px) {
  .cw-site-footer__legal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 64px;
  }
}

/* =============================================================
   HERO (home)
============================================================= */
/* Hero — luminous cream wash, mobile-first; two-column on desktop */
.cw-hero {
  position: relative;
  overflow: hidden;
  padding-block: 56px 72px;
  background: linear-gradient(
    180deg,
    var(--cw-cream-light) 0%,
    var(--cw-cream) 100%
  );
}
/* radial gold glow accent */
.cw-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 78% 42%,
    rgba(191, 148, 56, 0.1),
    transparent 34%
  );
}
.cw-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "lead"
    "art"
    "body";
  gap: clamp(26px, 6vw, 38px);
  align-items: center;
}
.cw-hero__lead {
  grid-area: lead;
}
.cw-hero__art {
  grid-area: art;
}
.cw-hero__body {
  grid-area: body;
}
/* Grid items default to min-width:auto — the lens img's intrinsic width
   (1254px) then drives the track's min-content past small viewports and
   clips the whole page horizontally. Pin all three areas. */
.cw-hero__lead,
.cw-hero__art,
.cw-hero__body {
  min-width: 0;
}
.cw-hero__lens {
  max-width: 100%;
}
.cw-hero__title {
  font-size: clamp(3.7rem, 13.4vw, 5.25rem);
  line-height: 0.96;
  letter-spacing: -0.055em;
  margin: 0;
  color: var(--cw-ink);
}
.cw-hero__title span {
  display: block;
}
.cw-hero__sub {
  font-size: 1.14rem;
  line-height: 1.72;
  color: #46566e; /* refined slate-navy — richer than the washed muted-blue, ~6.8:1 on cream */
  max-width: 100%;
  margin: 0; /* first child of __body; spacing comes from the inner grid gap (desktop restores top margin) */
}
.cw-hero__actions {
  margin-top: 32px;
  display: grid;
  gap: 24px;
  align-items: stretch;
}
.cw-hero__actions .cw-btn {
  width: 100%;
  justify-content: center;
}
.cw-hero__actions .cw-link-arrow {
  width: max-content;
}

@media (max-width: 420px) {
  .cw-hero__title {
    font-size: clamp(3.45rem, 13vw, 4.65rem);
  }
}

@media (min-width: 1024px) {
  .cw-hero {
    min-height: calc(100vh - var(--cw-header-height));
    display: grid;
    align-items: center;
    padding-block: clamp(56px, 6vw, 96px) clamp(64px, 7vw, 104px);
  }
  .cw-hero__bg {
    background: radial-gradient(
      circle at 78% 42%,
      rgba(191, 148, 56, 0.1),
      transparent 34%
    );
  }
  .cw-hero__inner {
    grid-template-columns: minmax(0, 1.04fr) minmax(420px, 0.86fr);
    grid-template-areas:
      "lead art"
      "body art";
    column-gap: clamp(56px, 7vw, 108px);
    row-gap: 0;
    align-items: start;
  }
  .cw-hero__art {
    align-self: center;
  }
  .cw-hero__lead {
    max-width: 760px;
  }
  .cw-hero__body {
    max-width: 620px;
  }
  .cw-hero__title {
    font-size: clamp(4.6rem, 5.8vw, 7.1rem);
    max-width: 760px;
  }
  .cw-hero__sub {
    max-width: 560px;
    margin-top: 34px;
    font-size: clamp(1.08rem, 1.28vw, 1.24rem);
    line-height: 1.75;
  }
  .cw-hero__actions {
    margin-top: 34px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
  }
  .cw-hero__actions .cw-btn {
    width: auto;
  }
}

/* =============================================================
   BOOK STAGE — flat cover staged inside a premium navy frame
   (no fake 3D). A warm halo sits behind it on the hero.
============================================================= */
.cw-hero__art {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cw-hero__art::before {
  content: "";
  position: absolute;
  width: min(620px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(255, 250, 241, 0.9) 0%,
    rgba(232, 220, 199, 0.45) 48%,
    transparent 70%
  );
  z-index: 0;
}
.cw-book-stage {
  position: relative;
  z-index: 1;
  width: min(100%, 560px);
  padding: clamp(28px, 4vw, 58px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: radial-gradient(
      circle at 50% 15%,
      rgba(255, 250, 241, 0.06),
      transparent 28%
    ),
    linear-gradient(145deg, var(--cw-navy), var(--cw-navy-deep));
  box-shadow: 0 34px 90px rgba(11, 29, 51, 0.28);
}
.cw-book-stage__img {
  display: block;
  width: 100%;
  max-height: 640px;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 26px 50px rgba(0, 0, 0, 0.42);
}

@media (max-width: 1023px) {
  .cw-book-stage {
    width: min(100%, 520px);
    padding: 28px;
    border-radius: 12px;
  }
}

/* =============================================================
   HERO — LENS variant (Commons World homepage)
   Commons World is the star; "The Commons World Lens" illustration
   replaces the staged book cover. The headline is a full sentence,
   so the display type steps down from the single-phrase scale, and
   the illustration — which carries its own cream vignette — melts
   into the hero ground rather than sitting in the navy book frame.
============================================================= */
.cw-hero--lens .cw-hero__title {
  font-size: clamp(2.5rem, 8.6vw, 3.35rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 16ch;
  text-wrap: balance;
}
/* The Lens illustration — no navy frame (that stays with the book cover).
   Compact on mobile (it sits between headline and copy); full size on desktop. */
.cw-hero__lens {
  position: relative;
  z-index: 1;
  display: block;
  width: min(80%, 340px);
  height: auto;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .cw-hero--lens .cw-hero__title {
    font-size: clamp(3rem, 4.2vw, 4.3rem);
    max-width: 14ch;
  }
  .cw-hero__lens {
    width: min(100%, 580px);
  }
}

/* =============================================================
   CAPTURE — gated download panel (navy, gold glow)
============================================================= */
/* Safe alias of the dark surface — guarantees the capture panel stays
   navy even when the stray .cw-section--dark-ish modifier is applied. */
.cw-section--dark-ish {
  background: var(--cw-surface-dark);
  color: var(--cw-on-dark);
}
.cw-capture {
  position: relative;
  overflow: hidden;
  max-width: 1120px;
  margin-inline: auto;
  color: var(--cw-on-dark);
  border-radius: 18px;
  box-shadow: var(--cw-shadow-soft);
  background: radial-gradient(
      circle at 50% 105%,
      rgba(191, 148, 56, 0.18),
      transparent 45%
    ),
    radial-gradient(circle at 0% 50%, rgba(255, 250, 241, 0.05), transparent 42%),
    radial-gradient(
      circle at 100% 50%,
      rgba(255, 250, 241, 0.05),
      transparent 42%
    ),
    linear-gradient(145deg, var(--cw-navy), var(--cw-navy-deep));
}
/* faint diagonal gold glints flanking the panel */
.cw-capture::before,
.cw-capture::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 42%;
  height: 1px;
  opacity: 0.7;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(191, 148, 56, 0.32),
    transparent
  );
}
.cw-capture::before {
  left: -8%;
  transform: rotate(-28deg);
}
.cw-capture::after {
  right: -8%;
  transform: rotate(28deg);
}
.cw-capture__glow {
  position: absolute;
  inset: -40% 30% auto -10%;
  height: 70%;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    rgba(191, 148, 56, 0.14),
    transparent 70%
  );
}
.cw-capture__body {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(56px, 6vw, 78px);
  text-align: center;
}
.cw-capture .cw-eyebrow {
  justify-content: center;
}
.cw-capture__head {
  color: var(--cw-cream-light);
  font-family: var(--cw-font-serif);
  font-weight: 400;
  font-size: clamp(2.8rem, 4.2vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin: 0;
}
.cw-capture__blurb {
  color: var(--cw-muted-cream);
  max-width: 560px;
  margin: 20px auto 0;
  font-size: 1.06rem;
  line-height: 1.65;
}
.cw-capture__form {
  display: grid;
  gap: 18px;
  margin-top: 34px;
  text-align: left;
}
/* On success the JS sets [hidden] on the form to swap in the done panel.
   The explicit display:grid above beats the UA [hidden] rule, so without
   this the "Sending…" button stays visible under the success message. */
.cw-capture__form[hidden] {
  display: none;
}
.cw-capture__form .cw-btn {
  width: 100%;
  min-height: 64px;
  justify-content: center;
}
/* honeypot — visually hidden */
.cw-capture__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
/* success state */
.cw-capture__done {
  text-align: center;
  padding: 0.5rem 0;
}
.cw-capture__done[hidden] {
  display: none;
}
.cw-capture__check {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--cw-radius-pill);
  background: rgba(201, 168, 76, 0.16);
  color: var(--cw-gold-soft);
}
.cw-capture__check .cw-icon {
  width: 28px;
  height: 28px;
}
.cw-capture__done h3,
.cw-capture__done-head {
  color: var(--cw-cream);
  margin: 0 0 1rem;
}
.cw-capture__done h3:focus,
.cw-capture__done-head:focus {
  outline: none;
}
.cw-capture__done > p,
.cw-capture__done-text {
  color: var(--cw-on-dark-muted);
  max-width: 42ch;
  margin: 0 auto 2rem;
}
.cw-capture__after {
  margin-top: 2rem;
  font-size: var(--cw-fs-small);
  color: var(--cw-on-dark-muted);
}
.cw-capture__after a {
  color: var(--cw-cream);
}
/* admin-only configuration note */
.cw-capture__admin-note {
  margin-top: 1.5rem;
  padding: 0.85rem 1rem;
  font-size: var(--cw-fs-small);
  color: var(--cw-on-dark-muted);
  background: rgba(245, 240, 232, 0.06);
  border: 1px dashed rgba(245, 240, 232, 0.28);
  border-radius: var(--cw-radius-sm);
}

@media (max-width: 767px) {
  .cw-capture {
    border-radius: 26px;
  }
  .cw-capture__body {
    padding: 44px 28px;
    text-align: left;
  }
  .cw-capture .cw-eyebrow,
  .cw-capture .cw-form-note {
    justify-content: flex-start;
  }
  .cw-capture__head {
    font-size: clamp(3rem, 11vw, 4rem);
  }
  .cw-capture__blurb {
    margin-left: 0;
    margin-right: 0;
    font-size: 1.05rem;
    line-height: 1.7;
  }
}

/* =============================================================
   PILLARS — hairline-separated grid, gold serial numbers
============================================================= */
/* Warm gradient band (overrides the muddy --cw-surface-zone fill) */
.cw-pillars {
  padding-block: clamp(72px, 9vw, 124px);
  background: linear-gradient(180deg, var(--cw-sand-soft), var(--cw-cream));
}
.cw-pillars__head {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.cw-pillars__head h2 {
  margin: 10px 0 16px;
  font-size: clamp(2.7rem, 4.2vw, 4.8rem);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--cw-ink);
}
.cw-pillars__head p {
  max-width: 580px;
  margin: 0;
  color: var(--cw-muted-blue);
  font-size: 1.08rem;
  line-height: 1.65;
}
.cw-pillars__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--cw-paper);
  border: 1px solid var(--cw-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(11, 29, 51, 0.06);
}
/* The <li> is the grid cell; the <a> inside carries the card styling. */
.cw-pillars__item {
  display: block;
  margin: 0;
  padding: 0;
  background: transparent;
}
.cw-pillars__link-item {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 104px;
  padding: 24px 28px;
  background: rgba(255, 250, 241, 0.58);
  color: var(--cw-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--cw-border-soft);
  transition: background var(--cw-dur) var(--cw-ease),
    transform var(--cw-dur) var(--cw-ease);
}
.cw-pillars__item:last-child .cw-pillars__link-item {
  border-bottom: none;
}
.cw-pillars__link-item:hover,
.cw-pillars__link-item:focus-visible {
  text-decoration: none;
  background: var(--cw-cream-light);
  transform: translateY(-1px);
}
.cw-pillars__icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--cw-ink);
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(16, 33, 58, 0.14);
  border-radius: var(--cw-radius-pill);
  transition: color var(--cw-dur) var(--cw-ease),
    border-color var(--cw-dur) var(--cw-ease),
    background var(--cw-dur) var(--cw-ease);
}
.cw-pillars__link-item:hover .cw-pillars__icon,
.cw-pillars__link-item:focus-visible .cw-pillars__icon {
  color: var(--cw-gold);
  border-color: var(--cw-gold-border);
  background: rgba(255, 255, 255, 0.66);
}
.cw-pillars__icon .cw-icon {
  width: 23px;
  height: 23px;
}
.cw-pillars__icon .cw-icon svg {
  stroke-width: 1.8;
}
.cw-pillars__content {
  display: flex;
  align-items: baseline;
  gap: 18px;
  min-width: 0;
}
.cw-pillars__n {
  font-family: var(--cw-font-serif);
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cw-gold-deep);
  white-space: nowrap;
}
.cw-pillars__name {
  font-family: var(--cw-font-sans);
  font-size: 1.02rem;
  font-weight: 750;
  line-height: 1.2;
  color: var(--cw-ink);
}
.cw-pillars__desc {
  margin: 0;
  color: var(--cw-text-muted);
  font-size: var(--cw-fs-small);
}
.cw-pillars__link {
  margin-top: clamp(2rem, 3.5vw, 3rem);
}

@media (min-width: 768px) {
  .cw-pillars__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .cw-pillars__link-item {
    min-height: 132px;
    padding: 30px 34px;
    border-right: 1px solid var(--cw-border-soft);
  }
  /* hairline grid: drop the right edge on every 3rd cell and the bottom
     edge on the final row */
  .cw-pillars__item:nth-child(3n) .cw-pillars__link-item {
    border-right: none;
  }
  .cw-pillars__item:nth-last-child(-n + 3) .cw-pillars__link-item {
    border-bottom: none;
  }
}

/* =============================================================
   SUPPORT BAND — light card on a cream→navy transition into footer
============================================================= */
.cw-support {
  padding: 42px 0 72px;
  background: linear-gradient(
    180deg,
    var(--cw-cream) 0%,
    var(--cw-navy-deep) 100%
  );
}
/* card sits on light cream, so the eyebrow uses the deeper gold for contrast */
.cw-support .cw-eyebrow {
  color: var(--cw-gold-deep);
}
.cw-support__inner {
  max-width: var(--cw-container-mid);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  padding: 34px 28px;
  background: var(--cw-cream-light);
  border: 1px solid var(--cw-border);
  border-radius: 24px;
  box-shadow: var(--cw-shadow-card);
}
.cw-support__icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  color: var(--cw-ink);
  background: var(--cw-sand-soft);
  border-radius: var(--cw-radius-pill);
}
.cw-support__icon .cw-icon {
  width: 32px;
  height: 32px;
}
.cw-support__icon .cw-icon svg {
  stroke-width: 1.7;
}
.cw-support__text {
  margin: 0;
}
/* Heading — forced visible (ink on the cream card; not the dark-section cream) */
.cw-support__heading {
  margin: 0;
  color: var(--cw-ink);
  opacity: 1;
  visibility: visible;
  font-family: var(--cw-font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.cw-support__body {
  margin: 12px 0 0;
  color: var(--cw-muted-blue);
  max-width: 640px;
  font-size: 1.04rem;
  line-height: 1.7;
}
.cw-support__cta {
  display: flex;
  justify-content: stretch;
}
.cw-support__cta .cw-btn {
  width: 100%;
}

/* Dark closing bands reuse the support component without the cream card shell. */
.cw-section--dark .cw-support {
  padding: 0;
  background: transparent;
}
.cw-section--dark .cw-support .cw-eyebrow {
  color: var(--cw-gold-soft);
}
.cw-section--dark .cw-support .cw-eyebrow::before {
  background: currentColor;
}
.cw-section--dark .cw-support__inner {
  background: linear-gradient(
    135deg,
    rgba(11, 29, 51, 0.84) 0%,
    rgba(20, 40, 68, 0.68) 100%
  );
  border-color: rgba(245, 240, 232, 0.18);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
}
.cw-section--dark .cw-support__heading {
  color: var(--cw-on-dark);
}
.cw-section--dark .cw-support__text p:not(.cw-eyebrow):not(.cw-support__heading) {
  max-width: 64ch;
  color: var(--cw-on-dark-muted);
  line-height: var(--cw-lh-body);
}
.cw-section--dark .cw-support__heading + p,
.cw-section--dark
  .cw-support__text
  p:not(.cw-eyebrow):not(.cw-support__heading)
  + p:not(.cw-eyebrow):not(.cw-support__heading) {
  margin-top: 0.75rem;
}
@media (min-width: 760px) {
  .cw-support {
    padding: 56px 0 88px;
  }
  .cw-support__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 34px;
    padding: clamp(38px, 5vw, 62px);
    border-radius: 26px;
  }
  .cw-support__icon {
    width: 72px;
    height: 72px;
  }
  .cw-support__cta {
    justify-content: flex-end;
  }
  .cw-support__cta .cw-btn {
    width: auto;
  }
  .cw-section--dark .cw-support__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* =============================================================
   TIERS — monthly/annual toggle + 3 cards (featured) + one-off
============================================================= */
.cw-tiers {
  text-align: center;
}
.cw-tiers__toggle {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  background: var(--cw-surface-zone);
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius-pill);
}
.cw-tiers__toggle button {
  padding: 0.6rem 1.5rem;
  font-family: var(--cw-font-body);
  font-size: var(--cw-fs-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cw-text);
  border: 0;
  background: none;
  border-radius: var(--cw-radius-pill);
  cursor: pointer;
  transition: background var(--cw-dur-fast) var(--cw-ease),
    color var(--cw-dur-fast) var(--cw-ease);
}
.cw-tiers__toggle button.is-active {
  background: var(--cw-navy);
  color: var(--cw-cream);
}
/* Class-based toggle buttons (mirrors the element selectors above) */
.cw-tiers__toggle-btn {
  padding: 0.6rem 1.5rem;
  font-family: var(--cw-font-body);
  font-size: var(--cw-fs-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cw-text);
  border: 0;
  background: none;
  border-radius: var(--cw-radius-pill);
  cursor: pointer;
  transition: background var(--cw-dur-fast) var(--cw-ease),
    color var(--cw-dur-fast) var(--cw-ease);
}
.cw-tiers__toggle-btn.is-active {
  background: var(--cw-navy);
  color: var(--cw-cream);
}
.cw-tiers__grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  text-align: left;
}
@media (min-width: 860px) {
  .cw-tiers__grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
}
.cw-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.75rem, 3vw, 2.5rem) 1.75rem;
  background: var(--cw-surface);
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius-lg);
}
.cw-tier--featured {
  border-color: var(--cw-gold);
  box-shadow: var(--cw-shadow-card);
}
@media (min-width: 860px) {
  .cw-tier--featured {
    transform: translateY(-12px);
  }
}
.cw-tier__badge {
  position: absolute;
  top: 0;
  right: 1.75rem;
  transform: translateY(-50%);
  padding: 0.3rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cw-gold-ink);
  background: var(--cw-gold);
  border-radius: var(--cw-radius-pill);
}
.cw-tier__name {
  font-size: var(--cw-fs-h3);
  margin: 0;
}
.cw-tier__summary {
  margin: 0;
  font-weight: 700;
  color: var(--cw-gold-deep);
}
.cw-tier__price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin: 0.5rem 0;
}
.cw-tier__price-amount,
.cw-tier__amount {
  font-family: var(--cw-font-heading);
  font-size: var(--cw-fs-h2);
  color: var(--cw-navy);
  font-weight: 600;
}
/* Cadence-swapped amounts hide via the [hidden] attribute */
.cw-tier__amount[hidden] {
  display: none;
}
.cw-tier__cadence {
  color: var(--cw-text-muted);
  font-size: var(--cw-fs-small);
}
.cw-tier__desc {
  margin: 0 0 1rem;
  color: var(--cw-text-muted);
  font-size: 0.98rem;
  flex-grow: 1;
}
.cw-tier__cta {
  margin-top: auto;
}
/* one-off — subdued band below the tiers */
.cw-tiers__oneoff {
  margin-top: clamp(2rem, 4vw, 3rem);
  color: var(--cw-text-muted);
  font-size: var(--cw-fs-small);
}
.cw-tiers__oneoff .cw-inline-link {
  font: inherit;
  color: var(--cw-link);
  background: none;
  border: 0;
  cursor: pointer;
}
.cw-tiers .cw-form-status {
  text-align: center;
}
/* "Missing Stripe link" admin badge */
.cw-tier__missing,
.cw-tier__missing-link {
  display: inline-block;
  margin-top: auto;
  padding: 0.55rem 0.85rem;
  font-size: var(--cw-fs-small);
  font-weight: 700;
  color: var(--cw-error);
  background: rgba(155, 44, 44, 0.08);
  border: 1px dashed rgba(155, 44, 44, 0.4);
  border-radius: var(--cw-radius-sm);
}

/* =============================================================
   PAGE HERO (+ dark) + BREADCRUMBS
============================================================= */
.cw-page-hero {
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2rem, 5vw, 4rem);
}
.cw-page-hero--dark {
  position: relative;
  overflow: hidden;
  background: var(--cw-surface-darker);
  color: var(--cw-on-dark);
  background-image: radial-gradient(
      70% 60% at 75% 20%,
      rgba(201, 168, 76, 0.14),
      transparent 60%
    ),
    radial-gradient(60% 50% at 20% 90%, rgba(26, 43, 74, 0.4), transparent 60%);
}
.cw-page-hero__eyebrow {
  /* inherits .cw-eyebrow; kept as hook */
}
.cw-page-hero--dark .cw-page-hero__eyebrow {
  color: var(--cw-gold-soft);
}
.cw-page-hero__title {
  font-size: var(--cw-fs-h1);
  margin: 0 0 1.5rem;
  max-width: 20ch;
}
.cw-page-hero--dark .cw-page-hero__title {
  color: var(--cw-cream);
}
.cw-page-hero__lead {
  font-size: var(--cw-fs-body-lg);
  line-height: var(--cw-lh-body);
  color: var(--cw-text-muted);
  max-width: 56ch;
  margin: 0;
}
.cw-page-hero--dark .cw-page-hero__lead {
  color: var(--cw-on-dark-muted);
}

/* Action row beneath the hero lead */
.cw-page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

/* Tighter rhythm (used on the generic index fallback hero) */
.cw-page-hero--tight {
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

/* Investor — subtle, formal differentiation (hairline rule, no fill) */
.cw-page-hero--investor {
  border-bottom: 1px solid var(--cw-border);
}
.cw-page-hero--investor .cw-page-hero__title {
  letter-spacing: -0.01em;
}

.cw-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: var(--cw-fs-small);
  color: var(--cw-text-muted);
  list-style: none;
  padding: 0;
}
.cw-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cw-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
/* Separator is emitted explicitly in markup (.cw-breadcrumbs__sep) */
.cw-breadcrumbs__sep {
  color: var(--cw-border);
}
.cw-breadcrumbs__item a,
.cw-breadcrumbs__link {
  color: var(--cw-text-muted);
  text-decoration: none;
}
.cw-breadcrumbs__item a:hover,
.cw-breadcrumbs__link:hover {
  color: var(--cw-navy);
  text-decoration: none;
}
.cw-breadcrumbs__item [aria-current="page"] {
  color: var(--cw-navy);
}

/* =============================================================
   READING — long-form measure + prev/next + progress bar
============================================================= */
.cw-reading {
  font-size: 1.0625rem; /* 17px mobile */
  line-height: var(--cw-lh-reading);
  color: var(--cw-ink);
}
.cw-reading__body {
  max-width: var(--cw-reading-width);
  margin-inline: auto;
}
.cw-reading__body > * + * {
  margin-top: 1.5rem;
}
.cw-reading__body h2 {
  font-size: var(--cw-fs-h3);
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
}
.cw-reading__body h3 {
  margin-top: 2rem;
}
.cw-reading__body ul,
.cw-reading__body ol {
  padding-left: 1.5rem;
  display: grid;
  gap: 0.6rem;
}
.cw-reading__body blockquote {
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--cw-gold);
  font-family: var(--cw-font-heading);
  font-style: italic;
  font-size: var(--cw-fs-h3);
  line-height: 1.4;
  color: var(--cw-navy);
}
.cw-reading__body img {
  border-radius: var(--cw-radius-md);
  margin-block: 2rem;
}
@media (min-width: 768px) {
  .cw-reading {
    font-size: 1.125rem; /* 18px desktop */
  }
}

/* prev/next */
.cw-reading__nav {
  display: grid;
  gap: 1rem;
  max-width: var(--cw-reading-width);
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--cw-border);
}
.cw-reading__nav a {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius-md);
  text-decoration: none;
  color: var(--cw-ink);
  transition: border-color var(--cw-dur) var(--cw-ease);
}
.cw-reading__nav a:hover {
  text-decoration: none;
  border-color: var(--cw-gold);
}
.cw-reading__nav a span {
  font-size: var(--cw-fs-small);
  font-weight: 700;
  letter-spacing: var(--cw-track-eyebrow);
  text-transform: uppercase;
  color: var(--cw-gold-deep);
}
.cw-reading__nav a.is-next {
  text-align: right;
}
@media (min-width: 620px) {
  .cw-reading__nav {
    grid-template-columns: 1fr 1fr;
  }
}

/* Reading hero — eyebrow / title / subtitle / time */
.cw-reading__hero {
  max-width: var(--cw-reading-width);
  margin-inline: auto;
}
.cw-reading__eyebrow {
  margin-bottom: 1rem;
}
.cw-reading__title {
  font-size: var(--cw-fs-h1);
  margin: 0 0 1rem;
}
.cw-reading__subtitle {
  font-family: var(--cw-font-heading);
  font-style: italic;
  font-size: var(--cw-fs-body-lg);
  line-height: var(--cw-lh-body);
  color: var(--cw-text-muted);
  max-width: 52ch;
  margin: 0;
}
.cw-reading__time {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  font-size: var(--cw-fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cw-text-muted);
}

/* prev/next links — direction-aware (mirrors the .is-next sibling above) */
.cw-reading__nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.cw-reading__nav-link--next {
  justify-content: flex-end;
  text-align: right;
}
.cw-reading__nav-text {
  display: grid;
  gap: 0.25rem;
}
.cw-reading__nav-label {
  font-size: var(--cw-fs-small);
  font-weight: 700;
  letter-spacing: var(--cw-track-eyebrow);
  text-transform: uppercase;
  color: var(--cw-gold-deep);
}
.cw-reading__nav-icon {
  flex-shrink: 0;
  color: var(--cw-gold-deep);
  transition: transform var(--cw-dur) var(--cw-ease);
}
.cw-reading__nav-icon--flip {
  transform: scaleX(-1);
}
.cw-reading__nav-link--prev:hover .cw-reading__nav-icon--flip {
  transform: scaleX(-1) translateX(4px);
}
.cw-reading__nav-link--next:hover .cw-reading__nav-icon {
  transform: translateX(4px);
}

/* End-of-section CTA row (download + support) */
.cw-reading__end-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* fixed scroll-progress bar (gold, scaleX) */
.cw-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: var(--cw-z-header);
  background: transparent;
  pointer-events: none;
}
.cw-reading-progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--cw-gold);
  transition: transform 80ms linear;
}

/* =============================================================
   CARDS / POSTLIST — editorial news list
============================================================= */
.cw-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--cw-surface);
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius-lg);
  transition: border-color var(--cw-dur) var(--cw-ease),
    box-shadow var(--cw-dur) var(--cw-ease),
    transform var(--cw-dur) var(--cw-ease);
}
.cw-card:hover {
  border-color: var(--cw-gold);
  box-shadow: var(--cw-shadow-card);
  transform: translateY(-2px);
}
.cw-card__title {
  font-size: var(--cw-fs-h3);
  margin: 0;
}
.cw-card__title a {
  color: var(--cw-heading);
  text-decoration: none;
}
.cw-card__title a:hover {
  text-decoration: none;
  color: var(--cw-navy-deep);
}
.cw-card__excerpt {
  margin: 0;
  color: var(--cw-text-muted);
  flex-grow: 1;
}
.cw-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--cw-fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cw-text-muted);
}
.cw-card__meta .cw-icon {
  width: 1em;
  height: 1em;
  color: var(--cw-gold-deep);
}

/* Serial number marker (book-section cards) */
.cw-card__number {
  margin: 0;
  font-family: var(--cw-font-heading);
  font-size: var(--cw-fs-h3);
  font-weight: 700;
  line-height: 1;
  color: var(--cw-gold-deep);
}

/* Category eyebrow inside a card — reset the utility's bottom margin */
.cw-card__category {
  margin-bottom: 0;
}

/* Footer row — reading time on the left, read-link on the right */
.cw-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.35rem;
}

/* Search result meta — type separator + post-type label */
.cw-card__type {
  color: var(--cw-border);
}
.cw-card__posttype {
  color: var(--cw-text-muted);
}

/* News list */
.cw-postlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.cw-postlist__item {
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--cw-border);
}
.cw-postlist__item:first-child {
  padding-top: 0;
}
.cw-post {
  display: grid;
  gap: 0.6rem;
}
.cw-post__meta {
  font-size: var(--cw-fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cw-text-muted);
}
.cw-post__title {
  font-size: var(--cw-fs-h3);
  margin: 0;
}
.cw-post__title a {
  color: var(--cw-heading);
  text-decoration: none;
}
.cw-post__title a:hover {
  text-decoration: none;
  color: var(--cw-navy-deep);
}
.cw-post__excerpt {
  margin: 0;
  color: var(--cw-text-muted);
  max-width: 68ch;
}

/* Single news post — header / meta / featured image / body / CTAs */
.cw-post__header {
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
.cw-post__header .cw-post__title {
  margin: 0.5rem 0 1rem;
  font-size: var(--cw-fs-h1);
}
.cw-post__date {
  font-variant-numeric: tabular-nums;
}
.cw-post__meta-sep {
  color: var(--cw-border);
}
.cw-post__author {
  font-style: normal;
}
.cw-post__featured-image {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}
.cw-post__featured-image img {
  width: 100%;
  border-radius: var(--cw-radius-md);
}
.cw-post__body {
  font-size: 1.0625rem;
  line-height: var(--cw-lh-reading);
  color: var(--cw-ink);
}
.cw-post__body > * + * {
  margin-top: 1.5rem;
}
.cw-post__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
@media (min-width: 768px) {
  .cw-post__body {
    font-size: 1.125rem;
  }
}

/* =============================================================
   FIGURE — the image-slot system (Phase 4C, W3b)
   .cw-figure--band  : full-bleed 21:9 photo band, navy duotone overlay,
                       optional cream caption. Sits full-width inside a
                       .cw-section (no side gutters of its own).
   .cw-figure--inset : 3:2 image inside the reading column, hairline cream
                       frame, gold caption rule underneath.
   Component renders NOTHING when no src is resolved (see figure.php) — these
   rules only ever apply to a real <figure class="cw-figure …"> in the DOM.
============================================================= */
.cw-figure {
  margin: 0;
}
.cw-figure__frame {
  position: relative;
  display: block;
  overflow: hidden;
}
.cw-figure__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- --band : full-bleed, duotone overlay ---------- */
.cw-figure--band {
  width: 100%;
}
.cw-figure--band .cw-figure__frame {
  aspect-ratio: 21 / 9;
  background: var(--cw-navy-deep); /* visible while the image decodes */
}
/* Navy duotone: a strong flat-navy multiply pass ties the photo into the
   palette (verified against real photographic tonal range, not just a line
   illustration — a thin/graded multiply reads as generic grey, not navy; a
   near-opaque flat wash is what actually holds the hue), then a soft gold
   overlay pass lifts the highlight corner so it never goes muddy-dark. */
.cw-figure--band .cw-figure__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(16, 33, 57, 0.74);
  mix-blend-mode: multiply;
}
.cw-figure--band .cw-figure__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    120% 90% at 20% 15%,
    rgba(226, 198, 120, 0.2),
    transparent 55%
  );
  mix-blend-mode: overlay;
}
.cw-figure--band .cw-figure__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem);
  font-family: var(--cw-font-sans);
  font-size: var(--cw-fs-small);
  line-height: 1.5;
  color: var(--cw-cream);
  background: linear-gradient(
    0deg,
    rgba(11, 29, 51, 0.72) 0%,
    transparent 100%
  );
}

/* ---------- --inset : reading-column image, hairline frame ----------
   Hardened to editorial (4K §2 THE RULE, §4 Phase-1 task 4): zero radius,
   no drop-shadow — separation from cream is a 1px gold keyline instead. */
.cw-figure--inset {
  max-width: var(--cw-reading-width, 720px);
  margin-inline: auto;
}
.cw-figure--inset .cw-figure__frame {
  aspect-ratio: 3 / 2;
  border: 1px solid var(--cw-gold);
  border-radius: 0;
  background: var(--cw-surface);
  box-shadow: none;
}
.cw-figure--inset .cw-figure__caption {
  margin: 0.85rem 0 0;
  padding-top: 0.6rem;
  border-top: 2px solid var(--cw-gold);
  font-family: var(--cw-font-sans);
  font-size: var(--cw-fs-small);
  line-height: 1.5;
  color: var(--cw-text-muted);
}

/* Inside the .cw-doc reading column (about.css context) the figure should
   never exceed the column measure — matches .cw-prose/.cw-reading behaviour. */
.cw-doc__main .cw-figure--inset,
.cw-doc__section .cw-figure--inset {
  max-width: 100%;
  margin-block: clamp(2rem, 4vw, 3rem);
}

/* ---------- --card : 3:2 thumb for feature/involve cards ----------
   Same 3:2 ratio + hairline frame as --inset, but no reading-column max-width
   and no caption rule — this variant lives inside a card body (e.g.
   .cw-essay-feature__body, .cw-involve__card), which already supplies its own
   padding/measure. Used by page-essays.php's per-essay thumb slot. */
.cw-figure--card {
  width: 100%;
  margin-bottom: 0.25rem;
}
.cw-figure--card .cw-figure__frame {
  /* Hardened to editorial (4K §2 THE RULE): zero radius. */
  aspect-ratio: 3 / 2;
  border: 1px solid var(--cw-border);
  border-radius: 0;
  background: var(--cw-surface-zone);
}
.cw-figure--card .cw-figure__caption {
  margin: 0.6rem 0 0;
  font-family: var(--cw-font-sans);
  font-size: var(--cw-fs-small);
  line-height: 1.4;
  color: var(--cw-text-muted);
}

/* ---------- --plate : standalone hard-edged editorial figure ----------
   docs/plan/4K-IMAGE-SYSTEM.md §3.2. Zero-radius frame with a 1px gold
   keyline (no drop-shadow — THE RULE §2.2), optional corner category tag,
   italic-serif caption under a short gold rule, optional muted credit line.
   "Pagella"/"Lato" in the spec map to this theme's real type tokens: the
   caption uses --cw-font-serif (Source Serif 4, this theme's Palatino-class
   serif), the tag uses --cw-font-sans (Source Sans 3) — see .cw-figure__tag
   below for the shared rule. */
.cw-figure--plate .cw-figure__frame {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--cw-gold);
  border-radius: 0;
  overflow: hidden;
  background: var(--cw-surface-zone);
  box-shadow: none;
  position: relative;
}
/* The shared base .cw-figure__img rule (this file, ~line 2301) sets
   height:auto, which only fills --band/--inset/--card because those
   variants' frame aspect-ratio happens to equal 21:9 / 3:2 / 3:2 — the SAME
   ratio their currently-deployed source photos already have, so
   object-fit:cover never actually has to crop anything. --plate's frame is
   16:10, and a real source photo at a different native ratio (verified live
   with community-gathering.webp, native ~5:3) leaves a visible gap under
   height:auto — object-fit can't crop a box that's sized to the image's OWN
   ratio. Fix: force the img to fill the frame explicitly via
   position:absolute + inset:0 (mirrors the identical, separately-verified
   fix on .cw-editorial__media img below) so cover-crop always has a box to
   crop within, regardless of the source photo's native proportions. */
.cw-figure--plate .cw-figure__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cw-figure--plate .cw-figure__caption {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.85rem 0 0;
}
/* Short gold rule (~34px), NOT a full-measure border-top — a ::before kept
   the caption's own width free to hug its (variable-length) text content. */
.cw-figure--plate .cw-figure__caption::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-bottom: 0.6rem;
  background: var(--cw-gold);
}
.cw-figure--plate .cw-figure__cap-text {
  font-family: var(--cw-font-serif);
  font-style: italic;
  font-size: var(--cw-fs-body);
  line-height: 1.5;
  color: var(--cw-text);
}
.cw-figure--plate .cw-figure__credit {
  font-family: var(--cw-font-sans);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--cw-muted);
}

/* ---------- .cw-figure__tag : shared corner category tag ----------
   Used by --plate (above) and by .cw-editorial__media (editorial-row.php).
   Both parent frames use `overflow:hidden` to hold their crop, so the tag
   sits FLUSH IN-CORNER (not the ~10px-overhang alternative floated in the
   spec) — a hanging tag would be clipped by that overflow:hidden. Flush
   in-corner is also the more robust choice across breakpoints (no risk of
   overlapping caption/body text below on mobile stacks). */
.cw-figure__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  background: var(--cw-gold);
  color: var(--cw-navy);
  font-family: var(--cw-font-sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 5px 9px;
}

/* =============================================================
   EDITORIAL ROW — .cw-editorial (docs/plan/4K-IMAGE-SYSTEM.md §3.1, NEW)
   Image+text row: a hard-edged zero-radius media frame on one side, an
   eyebrow/heading/prose/link body column on the other, 2-col grid.
   --flip mirrors the column order (media second) for rhythm when two rows
   sit near each other on a page. Partial: template-parts/components/
   editorial-row.php. GRACEFUL-EMPTY: editorial-row.php omits the whole
   <figure> when no image src resolves — .cw-editorial__body alone still
   lays out correctly as a single (ex-grid) column via the media:not()
   fallback below, so a text-only row never leaves a blank grid track.
============================================================= */
.cw-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
/* No image resolved (figure.php/editorial-row.php graceful-empty) — the
   body is the row's only child, so drop back to a single column instead of
   leaving an empty 1fr track beside it. */
.cw-editorial:not(:has(.cw-editorial__media)) {
  grid-template-columns: 1fr;
}
/* --flip : media second visually, via explicit grid order (not a `direction`
   flip — that would also invert scrollbar/text-align semantics for anything
   under .cw-prose that relies on logical `start`/`end`, which this row's
   body content does). */
.cw-editorial--flip .cw-editorial__media {
  order: 2;
}
.cw-editorial--flip .cw-editorial__body {
  order: 1;
}
.cw-editorial__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  min-height: 360px;
  /* Muted navy-tinted cream reads as a deliberate placeholder while the image
     decodes, rather than the raw beige --cw-surface-zone (4L: promoted from the
     pillars-scoped pilot to the shared component so every editorial row fades in
     cleanly instead of flashing an empty box). */
  background: color-mix(in srgb, var(--cw-navy) 8%, var(--cw-cream-dark));
}
.cw-editorial__media img {
  /* position:absolute + inset:0 (not width/height:100%) — verified in a live
     render probe that a plain block <img> with height:100% does not reliably
     resolve against a grid-item parent whose height comes from min-height +
     grid track sizing (percentage-height needs the parent's height to be
     "definite" via an explicit `height`, which .cw-editorial__media
     intentionally doesn't set, since its height is meant to flex with
     content/breakpoint). Absolute positioning sidesteps that entirely and is
     the standard robust pattern for a cover-fit image in a flexible-height
     box; .cw-editorial__media is already position:relative above. */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lazy-load fade-in (4L, global). editorial-row.php and the home VW +
   participate bands mark their images loading="lazy"; without this they pop in
   from an empty box on scroll (reads as broken/unintentional). Start at
   opacity:0 and fade once main.js adds .is-loaded on decode. GATED on html.js
   so a no-JS client — where .is-loaded is never added — still shows every image
   at full opacity. */
html.js .cw-editorial__media img,
html.js .cw-vw-band__cover img,
html.js .cw-participate-band__media img,
html.js .cw-stub-hero__media img {
  opacity: 0;
  transition: opacity 0.5s var(--cw-ease);
}
html.js .cw-editorial__media img.is-loaded,
html.js .cw-vw-band__cover img.is-loaded,
html.js .cw-participate-band__media img.is-loaded,
html.js .cw-stub-hero__media img.is-loaded {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  html.js .cw-editorial__media img,
  html.js .cw-vw-band__cover img,
  html.js .cw-participate-band__media img,
  html.js .cw-stub-hero__media img {
    transition: none;
  }
}
.cw-editorial__title {
  /* Font-family/size/weight/colour all come from the global h2/h3 rules
     (base.css) — heading_tag lets a placement agent pick h3's smaller
     scale for a tighter row. Only the eyebrow-to-heading spacing is
     this component's own concern. */
  margin: 0.35rem 0 0;
}
.cw-editorial__body .cw-prose {
  margin-top: 0.85rem;
}
.cw-editorial__body .cw-link-arrow {
  margin-top: 1.1rem;
}

@media (max-width: 719px) {
  /* Collapse to one column; media always comes first regardless of --flip
     (image above text — THE RULE §2.7 "never strand": image+heading stay
     adjacent on mobile). order:-1 beats both the base row's implicit 0 and
     --flip's order:2, so this single rule covers both cases. */
  .cw-editorial,
  .cw-editorial--flip {
    grid-template-columns: 1fr;
  }
  .cw-editorial__media {
    order: -1;
    min-height: 260px;
  }
}

/* -------------------------------------------------------------------------
   BEM block/element hooks. These always co-appear with .cw-section or
   .cw-container (which supply layout), so they need no layout of their own;
   declared as real positioning baselines so future targeted overrides have
   a stable hook (closes the two low-severity declaration gaps).
   ------------------------------------------------------------------------- */
.cw-pillars,
.cw-support {
  position: relative;
}
.cw-page-hero__inner {
  position: relative;
  z-index: 1; /* keep hero content above any page-hero background layer */
}

/* =============================================================
   4E — BAND / CARD SYSTEM (docs/plan/4E-CHARITIFY-MAPPING.md §2/§3)
   W6a foundations. Full-width alternating bands, one section-header
   grammar, contained elevated cards, icon trios, static stat counters,
   CTA bands. Built entirely on the LOCKED --cw-* tokens above (navy/
   gold/cream + Source Serif 4 / Source Sans 3) — no new palette, no
   new fonts. Nothing here is wired into a live page yet (W6b–e do that).

   Contents:
     1. .cw-band            — full-width section wrapper (5 surfaces)
     2. .cw-sechead         — eyebrow + H2 + lede header grammar
     3. .cw-card (unified)  — --icon / --media / --book / --person
        + .cw-cards grid helper (--2/--3/--4) + .cw-chip
     4. .cw-stats           — 4-up static counters
     5. .cw-cta-band        — heading + button (+ optional benefits)
     6. .cw-page-hero--band — inner-page hero on a coloured/image band
============================================================= */

/* -------------------------------------------------------------
   1. BAND — the only section wrapper new pages use. Alternates
   surface per instance so each section context-shifts visibly.
   Modifiers: --paper (default) / --white / --tint / --navy / --image.
------------------------------------------------------------- */
.cw-band {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  background: var(--cw-bg); /* --paper is the implicit default */
  color: var(--cw-text);
}
.cw-band--tight {
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}

/* Inner container — every band's content lives inside this. */
.cw-band .cw-container {
  max-width: var(--cw-container-mid);
}

/* ---- --white : plain white surface (separates from --paper cream) ---- */
.cw-band--white {
  background: var(--cw-white);
}

/* ---- --tint : warm sand zone (the existing cream-dark surface var) ---- */
.cw-band--tint {
  background: var(--cw-surface-zone);
}

/* ---- --navy : dark immersive band, on-dark text rules ---- */
.cw-band--navy {
  background: var(--cw-surface-dark);
  color: var(--cw-on-dark);
}
.cw-band--navy h1,
.cw-band--navy h2,
.cw-band--navy h3,
.cw-band--navy h4,
.cw-band--navy h5,
.cw-band--navy h6 {
  color: var(--cw-on-dark);
}
.cw-band--navy p {
  color: var(--cw-on-dark-muted);
}
.cw-band--navy a:not(.cw-btn):not(.cw-link-arrow) {
  color: var(--cw-on-dark);
}
.cw-band--navy .cw-eyebrow {
  color: var(--cw-gold-soft);
}
.cw-band--navy .cw-eyebrow::before {
  background: var(--cw-gold-soft);
}
.cw-band--navy .cw-link-arrow {
  color: var(--cw-on-dark);
  border-color: var(--cw-gold);
}

/* ---- --image : background-image slot with a navy overlay, cream text ----
   Markup: <section class="cw-band cw-band--image" style="--cw-band-img:url(...)">
   The overlay is a ::before so caller content stacks safely above it. */
.cw-band--image {
  overflow: hidden;
  color: var(--cw-on-dark);
  background: var(--cw-navy-deep) var(--cw-band-img, none) center/cover no-repeat;
}
.cw-band--image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
      160deg,
      rgba(11, 29, 51, 0.86) 0%,
      rgba(11, 29, 51, 0.62) 100%
    );
}
.cw-band--image > .cw-container {
  position: relative;
  z-index: 1;
}
.cw-band--image h1,
.cw-band--image h2,
.cw-band--image h3,
.cw-band--image h4 {
  color: var(--cw-on-dark);
}
.cw-band--image p {
  color: var(--cw-on-dark-muted);
}
.cw-band--image .cw-eyebrow {
  color: var(--cw-gold-soft);
}
.cw-band--image .cw-eyebrow::before {
  background: var(--cw-gold-soft);
}

/* ---- .cw-band__tag : corner category tag for bands ----
   Shares the exact look of .cw-figure__tag (see components.css --plate rule
   above) but is placed TOP-LEFT rather than bottom-left: bands commonly
   bottom-align their heading/content block, so a bottom-left tag would
   collide with boxed headline text. Markup contract (4K §3.3): a direct
   child of the .cw-band--image section, NOT inside the shared cta-band.php
   partial — e.g. <section class="cw-band cw-band--image cw-band--boxed">
   <span class="cw-band__tag">TAG</span> {cta-band.php get_template_part}
   </section>. .cw-band already sets position:relative (see the base .cw-band
   rule), so no positioning context change is needed here. */
.cw-band__tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--cw-gold);
  color: var(--cw-navy);
  font-family: var(--cw-font-sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 5px 9px;
}

/* =============================================================
   2. SECHEAD — eyebrow + H2 + optional lede. One grammar everywhere.
   --center (default) centres everything on a max-width column;
   --left keeps the block left-aligned (used above asymmetric grids).
============================================================= */
.cw-sechead {
  max-width: 100%;
  margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}
.cw-sechead .cw-eyebrow {
  margin-bottom: 18px;
}
.cw-sechead__title {
  margin: 0;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: var(--cw-lh-tight);
  color: var(--cw-heading);
}
.cw-sechead__lede {
  margin: 1rem 0 0;
  max-width: 60ch;
  font-size: var(--cw-fs-body-lg);
  line-height: var(--cw-lh-body);
  color: var(--cw-text-muted);
}
/* --cw-text-muted only reaches 3.70:1 on --tint (--cw-surface-zone) — fails
   AA for this non-bold body-lg text. --cw-ink-soft holds 5.5:1. */
.cw-band--tint .cw-sechead__lede {
  color: var(--cw-ink-soft);
}

/* --center (default posture) */
.cw-sechead--center,
.cw-sechead:not(.cw-sechead--left) {
  text-align: center;
}
.cw-sechead--center .cw-eyebrow,
.cw-sechead:not(.cw-sechead--left) .cw-eyebrow {
  justify-content: center;
}
.cw-sechead--center .cw-sechead__lede,
.cw-sechead:not(.cw-sechead--left) .cw-sechead__lede {
  margin-inline: auto;
}

/* --left variant */
.cw-sechead--left {
  text-align: left;
}
.cw-sechead--left .cw-eyebrow {
  justify-content: flex-start;
}
.cw-sechead--left .cw-sechead__lede {
  margin-inline: 0;
}

/* On-dark bands: title/lede already inherit via .cw-band--navy/--image rules
   above (h2 → on-dark, p → on-dark-muted); eyebrow lift is handled there too. */

/* =============================================================
   3. CARD — unified .cw-card (+ --icon/--media/--book/--person).
   ONE hover treatment used everywhere: lift + shadow deepen + gold
   top-border reveal. White surface, radius-md, soft shadow, hairline
   border. Body copy is always LEFT-aligned inside the card regardless
   of the section's --center header above it.
============================================================= */
.cw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  height: 100%;
  padding: 1.5rem 1.65rem 1.75rem;
  text-align: left;
  background: var(--cw-white);
  border: 1px solid var(--cw-border-soft);
  border-radius: var(--cw-radius-md);
  box-shadow: 0 6px 24px rgba(16, 33, 57, 0.07);
  overflow: hidden; /* clips the top-border reveal + media-top image */
  transition: transform var(--cw-dur) var(--cw-ease),
    box-shadow var(--cw-dur) var(--cw-ease),
    border-color var(--cw-dur) var(--cw-ease);
}
/* the ONE hover treatment: gold top-border reveal (a 3px inset rule that
   grows in via a pseudo-element, so it never shifts layout) + lift + deeper
   shadow. Every --variant below inherits this from the base rule. */
.cw-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--cw-gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--cw-dur) var(--cw-ease);
}
.cw-card:hover,
.cw-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(16, 33, 57, 0.14);
  border-color: var(--cw-border);
}
.cw-card:hover::before,
.cw-card:focus-within::before {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .cw-card {
    transition: none;
  }
  .cw-card:hover,
  .cw-card:focus-within {
    transform: none;
  }
}

.cw-card__title {
  margin: 0;
  font-size: var(--cw-fs-h3);
  line-height: var(--cw-lh-heading);
  color: var(--cw-heading);
}
.cw-card__title a {
  color: inherit;
  text-decoration: none;
}
.cw-card__title a::after {
  /* expands the click target to the whole card without nesting <a> tags */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.cw-card__title a:hover {
  text-decoration: none;
  color: var(--cw-navy-deep);
}
.cw-card__text {
  margin: 0;
  color: var(--cw-text-muted);
  line-height: var(--cw-lh-body);
  flex-grow: 1;
}
.cw-card__link {
  position: relative;
  z-index: 2; /* sit above the __title::after full-card click target */
  margin-top: 0.35rem;
  align-self: flex-start;
}

/* ---------- --icon : icon-top feature card (the "trio") ---------- */
.cw-card--icon .cw-card__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 0.35rem;
  color: var(--cw-gold-deep);
  background: rgba(200, 162, 74, 0.12);
  border-radius: var(--cw-radius-md);
}
.cw-card--icon .cw-card__icon .cw-icon {
  width: 28px;
  height: 28px;
}
.cw-card--icon .cw-card__icon .cw-icon svg {
  stroke-width: 1.7;
}

/* ---------- --media : image-top card (causes/events/blog) ---------- */
.cw-card--media {
  padding: 0 0 1.5rem;
}
.cw-card--media .cw-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--cw-surface-zone);
}
.cw-card--media .cw-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform calc(var(--cw-dur) * 2) var(--cw-ease);
}
.cw-card--media:hover .cw-card__media img,
.cw-card--media:focus-within .cw-card__media img {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .cw-card--media .cw-card__media img {
    transition: none;
  }
  .cw-card--media:hover .cw-card__media img {
    transform: none;
  }
}
.cw-card--media .cw-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex-grow: 1;
  padding: 1.35rem 1.5rem 0;
}

/* ---------- --book : book cover card (covers The two books) ---------- */
.cw-card--book {
  align-items: center;
  text-align: center;
  padding: 1.85rem 1.5rem 1.75rem;
}
.cw-card--book .cw-card__cover {
  width: min(100%, 168px);
  aspect-ratio: 2 / 3;
  margin-bottom: 0.5rem;
  border-radius: var(--cw-radius-sm);
  box-shadow: 0 14px 34px rgba(16, 33, 57, 0.18);
  overflow: hidden;
  background: var(--cw-navy-deep);
}
.cw-card--book .cw-card__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cw-card--book .cw-card__title {
  text-align: center;
}
.cw-card--book .cw-card__subtitle {
  margin: 0;
  font-family: var(--cw-font-heading);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--cw-text-muted);
}
.cw-card--book .cw-card__text {
  text-align: center;
  flex-grow: 0;
}
.cw-card--book .cw-chip {
  margin-block: 0.15rem;
}
.cw-card--book .cw-card__link {
  align-self: center;
  margin-top: 0.5rem;
}

/* Book cards on a dark band (e.g. coming-soon.php's closing --navy
   three-book band): .cw-card--book is always a white/light surface — the
   band's on-dark cascade (.cw-band--navy h1..h6/.cw-chip/.cw-link-arrow,
   this file, ~line 2703) bleeds cream text onto that white card and reads
   as unreadable (measured live: title/text/link rgb(247,241,231) on a
   rgb(255,255,255) card). Force every text element back to normal dark ink
   whenever a --book card sits inside a --navy/--image band. Background
   stays untouched — light card, always — only text colour changes here. */
.cw-band--navy .cw-card--book .cw-card__title,
.cw-band--image .cw-card--book .cw-card__title {
  color: var(--cw-heading);
}
.cw-band--navy .cw-card--book .cw-card__subtitle,
.cw-band--image .cw-card--book .cw-card__subtitle,
.cw-band--navy .cw-card--book .cw-card__text,
.cw-band--image .cw-card--book .cw-card__text {
  color: var(--cw-text-muted);
}
.cw-band--navy .cw-card--book .cw-chip,
.cw-band--image .cw-card--book .cw-chip {
  color: var(--cw-navy);
  background: var(--cw-surface-zone);
}
.cw-band--navy .cw-card--book .cw-chip--gold,
.cw-band--image .cw-card--book .cw-chip--gold {
  color: var(--cw-gold-ink);
  background: transparent;
  border-color: var(--cw-gold-border);
}
.cw-band--navy .cw-card--book .cw-card__link,
.cw-band--image .cw-card--book .cw-card__link {
  color: var(--cw-heading);
  border-color: var(--cw-gold);
}

/* ---------- --person : profile-style mini-card (contributor/author) ---------- */
.cw-card--person {
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  text-align: left;
}
.cw-card--person .cw-card__portrait {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--cw-radius-pill);
  overflow: hidden;
  background: var(--cw-surface-zone);
  display: grid;
  place-items: center;
  font-family: var(--cw-font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--cw-gold-deep);
}
.cw-card--person .cw-card__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cw-card--person .cw-card__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cw-heading);
}
.cw-card--person .cw-card__role {
  margin: 0.15rem 0 0;
  font-size: var(--cw-fs-small);
  color: var(--cw-text-muted);
}

/* ---------- .cw-chip : small factual pill (tags, never fake metrics) ---------- */
.cw-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  font-family: var(--cw-font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--cw-navy);
  background: var(--cw-surface-zone);
  border: 1px solid transparent;
  border-radius: var(--cw-radius-pill);
  white-space: nowrap;
}
.cw-chip--gold {
  color: var(--cw-gold-ink);
  background: transparent;
  border-color: var(--cw-gold-border);
}
/* On-dark bands/cards, chips need a lighter surface to stay legible */
.cw-band--navy .cw-chip,
.cw-band--image .cw-chip {
  color: var(--cw-cream);
  background: rgba(245, 240, 232, 0.12);
}
.cw-band--navy .cw-chip--gold,
.cw-band--image .cw-chip--gold {
  color: var(--cw-gold-light);
  background: transparent;
  border-color: rgba(226, 198, 120, 0.4);
}

/* ---------- .cw-cards grid helper (2/3/4 columns, consistent gap) ---------- */
.cw-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .cw-cards--2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 700px) {
  .cw-cards--3,
  .cw-cards--4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 980px) {
  .cw-cards--3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  .cw-cards--4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem;
  }
}

/* =============================================================
   4. STATS — 4-up static counters (no JS count-up, no fake metrics).
   Typically sits inside a .cw-band--navy but the block itself only
   assumes it may be on-dark OR on-light (both text colours covered).
============================================================= */
.cw-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.75rem, 4vw, 2.5rem) 1.5rem;
  text-align: center;
}
@media (min-width: 700px) {
  .cw-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}
.cw-stats__item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.cw-stats__num {
  margin: 0;
  font-family: var(--cw-font-heading);
  font-weight: var(--cw-wt-heading);
  font-size: var(--cw-fs-stat);
  line-height: 1;
  color: var(--cw-gold);
}
/* On light bands the numeral needs the deeper gold to hold AA-large (3:1)
   against cream/white. --cw-gold-deep only reaches 2.9:1 on the warmer
   --tint surface (--cw-surface-zone, #e8dcc9), so --tint uses the darker
   --cw-gold-ink token instead (10.3:1 — verified against every light
   surface this component can sit on). */
.cw-band--paper .cw-stats__num,
.cw-band--white .cw-stats__num {
  color: var(--cw-gold-deep);
}
.cw-band--tint .cw-stats__num {
  color: var(--cw-gold-ink);
}
.cw-stats__label {
  margin: 0;
  font-family: var(--cw-font-sans);
  font-size: var(--cw-fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cw-on-dark-muted);
}
/* --cw-text-muted only reaches ~4.46:1 on --paper (just under the 4.5:1 AA
   threshold for this small uppercase label) and fails outright on --tint
   (3.70:1). --cw-ink-soft holds AA with real margin on all three light
   surfaces (5.5–7.5:1) — verified, not assumed. */
.cw-band--paper .cw-stats__label,
.cw-band--white .cw-stats__label,
.cw-band--tint .cw-stats__label {
  color: var(--cw-ink-soft);
}

/* =============================================================
   5. CTA BAND — heading + 1-line + ONE gold button, centred.
   Sits on --tint or --navy (never --paper/--white — needs contrast
   from the sections around it). Optional 3-bullet benefits row.
============================================================= */
.cw-cta-band {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.cw-cta-band__title {
  margin: 0;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  line-height: var(--cw-lh-tight);
  color: var(--cw-heading);
}
.cw-band--navy .cw-cta-band__title,
.cw-band--image .cw-cta-band__title {
  color: var(--cw-on-dark);
}
.cw-cta-band__lede {
  margin: 0.85rem 0 0;
  font-size: var(--cw-fs-body-lg);
  line-height: var(--cw-lh-body);
  color: var(--cw-text-muted);
}
.cw-band--navy .cw-cta-band__lede,
.cw-band--image .cw-cta-band__lede {
  color: var(--cw-on-dark-muted);
}
/* --cw-text-muted only reaches 3.70:1 on --tint — fails AA. cta-band is
   documented to live on --tint or --navy; --tint needs its own override. */
.cw-band--tint .cw-cta-band__lede {
  color: var(--cw-ink-soft);
}
.cw-cta-band__actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
.cw-cta-band__actions .cw-btn {
  width: 100%;
  max-width: 360px;
}
@media (min-width: 500px) {
  .cw-cta-band__actions .cw-btn {
    width: auto;
  }
}

/* Optional benefits row — 3 short bullets, factual only (no icons required
   but they slot in cleanly via .cw-icon if a caller wants them). */
.cw-cta-band__benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  max-width: 620px;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
@media (min-width: 640px) {
  .cw-cta-band__benefits {
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
  }
}
.cw-cta-band__benefit {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--cw-fs-small);
  line-height: 1.5;
  color: var(--cw-text-muted);
}
.cw-band--navy .cw-cta-band__benefit,
.cw-band--image .cw-cta-band__benefit {
  color: var(--cw-on-dark-muted);
}
/* --cw-text-muted only reaches 3.70:1 on --tint — fails AA for this small
   (14px) text. --cw-ink-soft holds 5.5:1. */
.cw-band--tint .cw-cta-band__benefit {
  color: var(--cw-ink-soft);
}
@media (min-width: 640px) {
  .cw-cta-band__benefit {
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
  }
}
.cw-cta-band__benefit .cw-icon {
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.15em;
  color: var(--cw-gold-deep);
}
.cw-band--navy .cw-cta-band__benefit .cw-icon,
.cw-band--image .cw-cta-band__benefit .cw-icon {
  color: var(--cw-gold-soft);
  margin-top: 0;
}
/* --cw-gold-deep only reaches 2.9:1 on --tint (below the 3:1 non-text/
   graphical-contrast threshold) — --cw-gold-ink holds 10.3:1. */
.cw-band--tint .cw-cta-band__benefit .cw-icon {
  color: var(--cw-gold-ink);
}

/* Vertical rhythm when a .cw-cards grid sits directly above a .cw-cta-band
   in the same container (e.g. coming-soon.php's closing three-book band:
   the .cw-cards--3 cover grid immediately followed by cta-band.php's
   heading/lede/button, no wrapper element between them). Neither side
   carries its own spacing for this adjacency — .cw-cards has no
   margin-bottom and .cw-cta-band has no margin-top — so they were
   measured flush (0px gap live). Match the site's other inter-block
   rhythm values (e.g. .cw-stub-arch, .cw-cta-band__actions). */
.cw-cards + .cw-cta-band {
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

/* =============================================================
   6. PROFILE — portrait/monogram left, quote + name/role right
   (docs/plan/4E-CHARITIFY-MAPPING.md §2.6 / §3). A full-width band-
   content block (author intro), distinct from the .cw-card--person
   grid mini-card above.
============================================================= */
.cw-profile {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 1.75rem;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.cw-profile__portrait {
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  flex-shrink: 0;
  border-radius: var(--cw-radius-pill);
  overflow: hidden;
  background: var(--cw-surface-zone);
  font-family: var(--cw-font-heading);
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--cw-gold-deep);
  box-shadow: var(--cw-shadow-card);
}
.cw-profile__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cw-profile__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.cw-profile__quote {
  margin: 0 0 0.5rem;
  font-family: var(--cw-font-heading);
  font-style: italic;
  font-size: var(--cw-fs-h3);
  line-height: var(--cw-lh-quote);
  color: var(--cw-heading);
}
.cw-band--navy .cw-profile__quote,
.cw-band--image .cw-profile__quote {
  color: var(--cw-on-dark);
}
.cw-profile__name {
  margin: 0;
  font-weight: 700;
  color: var(--cw-heading);
}
.cw-band--navy .cw-profile__name,
.cw-band--image .cw-profile__name {
  color: var(--cw-on-dark);
}
.cw-profile__role {
  margin: 0;
  font-size: var(--cw-fs-small);
  color: var(--cw-text-muted);
}
.cw-band--navy .cw-profile__role,
.cw-band--image .cw-profile__role {
  color: var(--cw-on-dark-muted);
}
/* --cw-text-muted only reaches 3.70:1 on --tint — fails AA for this small
   (14px) text. --cw-ink-soft holds 5.5:1. */
.cw-band--tint .cw-profile__role {
  color: var(--cw-ink-soft);
}
.cw-profile__link {
  margin-top: 0.5rem;
}

/* --left : portrait beside the copy on wider screens (the classic
   "CEO profile" layout the benchmark uses). Opt in via modifier class. */
@media (min-width: 700px) {
  .cw-profile--left {
    grid-template-columns: auto 1fr;
    justify-items: start;
    align-items: center;
    gap: 2.5rem;
    text-align: left;
    max-width: 880px;
  }
  .cw-profile--left .cw-profile__body {
    align-items: flex-start;
  }
  .cw-profile--left .cw-profile__portrait {
    width: 140px;
    height: 140px;
  }
}

/* =============================================================
   7. PAGE HERO — BAND variant. Replaces the bare cream H1 hero on
   every inner page (old .cw-page-hero stays for compat until pages
   migrate — W6b–e do that page by page). Sits on --navy or --image.
============================================================= */
.cw-page-hero--band {
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.75rem, 6vw, 4.5rem);
}
.cw-page-hero--band .cw-page-hero__inner {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.cw-page-hero--band .cw-eyebrow {
  justify-content: center;
}
.cw-page-hero--band .cw-page-hero__title {
  max-width: none;
  font-size: var(--cw-fs-h1);
  margin: 0 0 1.25rem;
  color: var(--cw-on-dark);
}
.cw-page-hero--band .cw-page-hero__lead {
  max-width: 56ch;
  margin-inline: auto;
  color: var(--cw-on-dark-muted);
}
.cw-page-hero--band .cw-page-hero__actions {
  justify-content: center;
}
/* Breadcrumb-eyebrow slot (optional, sits above the standard eyebrow) */
.cw-page-hero--band .cw-breadcrumbs {
  justify-content: center;
  color: var(--cw-on-dark-muted);
}
.cw-page-hero--band .cw-breadcrumbs__item a,
.cw-page-hero--band .cw-breadcrumbs__link {
  color: var(--cw-on-dark-muted);
}
.cw-page-hero--band .cw-breadcrumbs__item [aria-current="page"] {
  color: var(--cw-on-dark);
}
.cw-page-hero--band .cw-breadcrumbs__sep {
  color: rgba(245, 240, 232, 0.3);
}

/* =============================================================
   8. STUB HERO SPLIT — .cw-stub-hero (coming-soon.php, /participate
   ONLY). A 2-col editorial hero: participate-meeting.webp beside the
   eyebrow/status-pill/H1/lead, inside the same .cw-band--navy the plain
   single-column stub hero also uses — so every existing on-dark colour
   rule (.cw-band--navy h1/p/.cw-eyebrow/.cw-status-pill's own border)
   keeps applying with zero extra overrides here. Same family as
   .cw-editorial (editorial-row.php) and home.css' .cw-participate-band,
   but scoped locally in this file (coming-soon.php is the only caller;
   home.css/editorial-row.php are out of scope for this change and this
   hero's copy is the plain hand-rolled hero block, not a cta-band).
   Retires the old standalone content-less figure.cw-figure--band that
   used to sit in its own section right under the hero with zero text
   over it — THE RULE's banned "decorative band" pattern; the photo now
   only ever appears earning its place beside real content.
============================================================= */
.cw-stub-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.cw-stub-hero__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  min-height: 260px;
}
.cw-stub-hero__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cw-stub-hero__body {
  min-width: 0;
}
/* The hero copy (.cw-page-hero__eyebrow/__title/__lead, .cw-status-pill)
   is centred by nothing here — it was already left-edge by default before
   this split (no .cw-page-hero--band wrapper, which is the ONLY thing that
   centres this markup elsewhere on the site); keep that left alignment
   inside the narrower body column instead of centring it mid-split. */
.cw-stub-hero__body .cw-page-hero__title,
.cw-stub-hero__body .cw-page-hero__lead {
  max-width: none;
}

@media (min-width: 720px) {
  .cw-stub-hero {
    grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr);
  }
  .cw-stub-hero__media {
    min-height: 100%;
  }
}

@media (max-width: 719px) {
  /* Image above copy on mobile regardless of source order — mirrors
     .cw-editorial's identical mobile rule (THE RULE §2.7 "never strand":
     image+heading stay adjacent, image leads). */
  .cw-stub-hero__media {
    order: -1;
  }
}