/* =============================================================
   Commons World — home.css
   Front-page narrative sections (Home Page Copy v1, S2–S9).
   Self-contained: built only on the design-system tokens and
   primitives in base/layout/components.css. Enqueued on the
   front page only (see inc/assets.php). No global overrides.
   ============================================================= */

/* -------------------------------------------------------------
   SHARED — narrative prose + second-line accent
------------------------------------------------------------- */
.cw-home-prose {
  max-width: 60ch;
  font-size: var(--cw-fs-body-lg);
  line-height: var(--cw-lh-reading);
  color: var(--cw-text);
}

/* The closing line of a prose block lifts to a serif statement. */
.cw-home-prose__close {
  margin-top: 1.4em;
  font-family: var(--cw-font-heading);
  font-size: var(--cw-fs-h3);
  line-height: var(--cw-lh-heading);
  letter-spacing: -0.02em;
  color: var(--cw-heading);
}

/* Second line of a two-part heading, set quieter. */
.cw-line-accent {
  display: block;
  color: var(--cw-text-muted);
}

/* Dark-band inheritance for prose + accents. */
.cw-section--dark .cw-home-prose {
  color: var(--cw-on-dark-muted);
}
.cw-section--dark .cw-home-prose__close,
.cw-section--dark .cw-home-closing__title {
  color: var(--cw-on-dark);
}
.cw-section--dark .cw-line-accent {
  color: var(--cw-on-dark-muted);
}

/* -------------------------------------------------------------
   S3 — HIGHLIGHT STATEMENT ("Visibility should follow…")
------------------------------------------------------------- */
.cw-statement {
  margin: clamp(2.5rem, 5vw, 3.75rem) 0 0;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--cw-gold-border);
  max-width: 60ch;
}
.cw-statement__quote {
  font-family: var(--cw-font-heading);
  font-size: var(--cw-fs-h2);
  line-height: var(--cw-lh-heading);
  letter-spacing: -0.03em;
  color: var(--cw-navy);
  text-wrap: balance;
}

/* -------------------------------------------------------------
   S4 — THE BOOKS (two-book conversion block, Phase 4C)
   Lead (eyebrow + heading + lede) → two-card grid (cover + title +
   one-liner per book) → fact strip → ladder note → actions. Replaces
   the single-book cover+copy two-column layout.
------------------------------------------------------------- */
.cw-home-book__lead {
  max-width: 62ch;
}
.cw-home-book__title {
  margin-top: 0.2em;
}
/* Lede — the two-book summary line (mockup .s-book__lede lineage). */
.cw-home-book__lede {
  margin-top: 1.2rem;
  max-width: 58ch;
  font-size: var(--cw-fs-body-lg);
  line-height: var(--cw-lh-body);
  color: var(--cw-text);
}

/* Two-card grid — one card per book, cover + title + one-liner. */
.cw-home-book__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  margin-top: clamp(2rem, 5vw, 3.25rem);
}
.cw-home-book__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.cw-home-book__card-copy {
  margin-top: 1.1rem;
}
.cw-home-book__card-title {
  font-size: var(--cw-fs-h3);
  line-height: var(--cw-lh-heading);
  letter-spacing: -0.015em;
  color: var(--cw-heading);
}
.cw-home-book__card-one-liner {
  margin-top: 0.5rem;
  max-width: 40ch;
  font-size: var(--cw-fs-body);
  line-height: var(--cw-lh-body);
  color: var(--cw-text-muted);
}

/* S-tier flat cover — a real book presence on cream: larger, layered shadow,
   hairline edge, and a warm pedestal glow behind it (no heavy navy frame). */
.cw-book-cover {
  position: relative;
  margin: 0;
  width: min(100%, 340px);
  isolation: isolate;
}
/* Smaller variant for the side-by-side two-book cards. */
.cw-book-cover--sm {
  width: min(100%, 210px);
}
/* warm radial glow + soft contact shadow grounding the book */
.cw-book-cover::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -10% -16% -12%;
  background: radial-gradient(
    58% 52% at 50% 40%,
    rgba(200, 162, 74, 0.22),
    rgba(200, 162, 74, 0) 70%
  );
}
.cw-book-cover__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px 6px 6px 4px;
  box-shadow:
    0 0 0 1px rgba(20, 40, 68, 0.08),
    -6px 0 14px -6px rgba(11, 29, 51, 0.22),
    0 4px 6px rgba(11, 29, 51, 0.12),
    0 22px 34px -8px rgba(11, 29, 51, 0.28),
    0 46px 70px -18px rgba(11, 29, 51, 0.24);
  transition: transform var(--cw-dur, 0.25s) var(--cw-ease, ease),
    box-shadow var(--cw-dur, 0.25s) var(--cw-ease, ease);
}
.cw-book-cover__img:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(20, 40, 68, 0.1),
    -7px 0 16px -6px rgba(11, 29, 51, 0.24),
    0 6px 8px rgba(11, 29, 51, 0.14),
    0 28px 42px -8px rgba(11, 29, 51, 0.3),
    0 56px 84px -18px rgba(11, 29, 51, 0.26);
}

@media (min-width: 820px) {
  .cw-book-cover {
    width: min(100%, 360px);
  }
}

/* Fact strip — the trust layer (Free · CC BY-NC-SA · format · author), each
   fact carrying a leading gold dot (mockup .factstrip). Colour uses
   --cw-muted, not --cw-text-muted: muted-blue (#607184) is 4.46:1 on cream
   and fails AA at this bold 14px size; --cw-muted (#5f6d7a) is a
   near-identical slate at 4.73:1. */
.cw-home-book__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin: clamp(2rem, 4.5vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--cw-fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cw-muted);
}
.cw-home-book__fact {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.cw-home-book__fact::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cw-gold);
}

/* Ladder note — points from the two free books to the forthcoming founding
   book (the free → free → print-2027 framing). Now visual: a small, muted,
   tagged real-cover thumbnail sits beside the quiet serif line, so all three
   books are visible on home (CC/HW large in the grid above, VW small+tagged
   here) rather than VW being text-only. */
.cw-home-book__ladder {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.4rem;
  max-width: 54ch;
}
.cw-home-book__ladder-text {
  margin: 0;
  font-family: var(--cw-font-heading);
  font-size: 1.05rem;
  font-style: italic;
  line-height: var(--cw-lh-heading);
  color: var(--cw-text-muted);
}
.cw-home-book__ladder-thumb {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: 2.6rem;
  line-height: 0;
}
.cw-home-book__ladder-thumb-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px 3px 3px 2px;
  box-shadow: 0 0 0 1px rgba(20, 40, 68, 0.14), 0 6px 12px -4px rgba(11, 29, 51, 0.24);
  filter: grayscale(0.55) opacity(0.82);
}
.cw-home-book__ladder-thumb-tag {
  position: absolute;
  left: 50%;
  bottom: -0.5rem;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 0.1rem 0.4rem;
  border-radius: var(--cw-radius-pill);
  background: var(--cw-navy);
  color: var(--cw-on-dark);
  font-family: var(--cw-font-sans);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cw-home-book__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

@media (min-width: 640px) {
  .cw-home-book__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* -------------------------------------------------------------
   THE IDEA (D3) — Why + What merged (plan §5.3 / mockup .s-idea)
   Cream-dark zone surface (from .cw-section--zone). The lens-ring
   motif is a pure-CSS rhyme with the hero globe; decorative.
------------------------------------------------------------- */
.cw-home-idea {
  overflow: hidden;
}
.cw-home-idea__inner {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.cw-home-idea__title {
  font-size: var(--cw-fs-h2);
  max-width: 18ch;
}
.cw-home-idea__accent {
  display: block;
  color: var(--cw-gold-deep);
  font-style: italic;
}
.cw-home-idea__body {
  margin-top: 1.4rem;
  max-width: 54ch;
  font-size: var(--cw-fs-body-lg);
  line-height: var(--cw-lh-body);
  color: var(--cw-text);
}
/* Pull quote — gold hairline top, serif statement. (Its own styles rather than
   reusing .cw-statement, which is still owned by book-discover.php.) */
.cw-home-idea__quote {
  margin: 2.2rem 0 0;
  padding-top: 1.8rem;
  border-top: 1px solid var(--cw-gold-border);
  max-width: 54ch;
}
.cw-home-idea__quote-text {
  margin: 0;
  font-family: var(--cw-font-heading);
  font-size: var(--cw-fs-h3);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 560;
  color: var(--cw-navy);
}
.cw-home-idea__quote-cite {
  display: block;
  margin-top: 0.8rem;
  font-size: var(--cw-fs-small);
  font-weight: 600;
  color: var(--cw-ink-soft);
}
/* Lens-ring motif — concentric gold rings + nodes + a small navy core. */
.cw-home-idea__lens {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
  aspect-ratio: 1;
}
.cw-home-idea__ring {
  position: absolute;
  border-radius: 50%;
}
.cw-home-idea__ring--outer {
  inset: 0;
  border: 1.5px solid var(--cw-gold-border);
  background: radial-gradient(
    70% 70% at 35% 30%,
    rgba(200, 162, 74, 0.1),
    transparent 65%
  );
}
.cw-home-idea__ring--mid {
  inset: 13%;
  border: 1px solid rgba(159, 123, 43, 0.45);
}
.cw-home-idea__ring--inner {
  inset: 30%;
  border: 1px dashed rgba(159, 123, 43, 0.5);
}
.cw-home-idea__node {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cw-gold);
}
.cw-home-idea__node--1 {
  top: 6%;
  left: 48%;
}
.cw-home-idea__node--2 {
  top: 46%;
  right: 2%;
}
.cw-home-idea__node--3 {
  bottom: 12%;
  left: 16%;
}
.cw-home-idea__core {
  position: absolute;
  inset: 42%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 32%,
    var(--cw-navy-soft),
    var(--cw-navy-deep)
  );
  box-shadow:
    0 0 40px rgba(20, 40, 68, 0.35),
    inset -6px -6px 14px rgba(2, 8, 16, 0.5);
}

@media (min-width: 1024px) {
  .cw-home-idea__inner {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  }
}

/* -------------------------------------------------------------
   S5 — NINE PILLARS PREVIEW (grid with descriptions)
------------------------------------------------------------- */
.cw-pillars-preview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.85rem, 2vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cw-pillars-preview__item {
  margin: 0;
}
.cw-pillars-preview__link {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon n"
    "icon name"
    "icon desc";
  column-gap: 1.1rem;
  row-gap: 0.35rem;
  height: 100%;
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  background: var(--cw-surface);
  border: 1px solid var(--cw-border-soft);
  border-radius: var(--cw-radius-md);
  text-decoration: none;
  color: var(--cw-text);
  transition: border-color var(--cw-dur) var(--cw-ease),
    transform var(--cw-dur) var(--cw-ease),
    box-shadow var(--cw-dur) var(--cw-ease);
}
.cw-pillars-preview__link:hover {
  text-decoration: none;
  transform: translateY(-3px);
  border-color: var(--cw-gold-border);
  box-shadow: var(--cw-shadow-card);
}
.cw-pillars-preview__icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--cw-radius-sm);
  background: rgba(20, 40, 68, 0.05);
  color: var(--cw-navy);
}
.cw-pillars-preview__n {
  grid-area: n;
  font-family: var(--cw-font-sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--cw-gold-deep);
}
.cw-pillars-preview__name {
  grid-area: name;
  font-family: var(--cw-font-heading);
  font-size: 1.18rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--cw-heading);
}
.cw-pillars-preview__desc {
  grid-area: desc;
  margin-top: 0.15rem;
  font-size: var(--cw-fs-small);
  line-height: 1.55;
  color: var(--cw-text-muted);
}
.cw-pillars-preview__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}

@media (min-width: 600px) {
  .cw-pillars-preview__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .cw-pillars-preview__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -------------------------------------------------------------
   S6 — WHAT BECOMES POSSIBLE (navy list)
------------------------------------------------------------- */
.cw-home-possible__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--cw-border-dark);
}
.cw-home-possible__item {
  margin: 0;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) 0 clamp(1.1rem, 2.4vw, 1.6rem) 1.6rem;
  position: relative;
  font-family: var(--cw-font-heading);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--cw-on-dark);
  border-bottom: 1px solid var(--cw-border-dark);
}
.cw-home-possible__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(clamp(1.1rem, 2.4vw, 1.6rem) + 0.55em);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--cw-gold);
}
.cw-home-possible__coda {
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* -------------------------------------------------------------
   S7 — JOIN THE COMMONS COMMUNITY (dual CTA)
------------------------------------------------------------- */
.cw-home-join__inner {
  text-align: center;
}
.cw-home-join__copy {
  margin-inline: auto;
}
.cw-home-join__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

/* -------------------------------------------------------------
   S8 — PATHWAYS (six cards)
------------------------------------------------------------- */
.cw-pathways__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.85rem, 2vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cw-pathways__item {
  margin: 0;
}
.cw-pathways__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--cw-surface);
  border: 1px solid var(--cw-border-soft);
  border-radius: var(--cw-radius-md);
  text-decoration: none;
  color: var(--cw-text);
  transition: border-color var(--cw-dur) var(--cw-ease),
    transform var(--cw-dur) var(--cw-ease),
    box-shadow var(--cw-dur) var(--cw-ease);
}
.cw-pathways__card:hover {
  text-decoration: none;
  transform: translateY(-3px);
  border-color: var(--cw-gold-border);
  box-shadow: var(--cw-shadow-card);
}
.cw-pathways__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-bottom: 1.1rem;
  border-radius: var(--cw-radius-sm);
  background: rgba(20, 40, 68, 0.05);
  color: var(--cw-navy);
}
.cw-pathways__title {
  font-size: 1.32rem;
  letter-spacing: -0.02em;
  color: var(--cw-heading);
}
.cw-pathways__blurb {
  margin-top: 0.6rem;
  font-size: var(--cw-fs-body);
  line-height: var(--cw-lh-body);
  color: var(--cw-text-muted);
}
.cw-pathways__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1.25rem;
  font-family: var(--cw-font-sans);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cw-gold-deep);
}
.cw-pathways__card:hover .cw-pathways__cta .cw-icon {
  transform: translateX(4px);
}
.cw-pathways__cta .cw-icon {
  transition: transform var(--cw-dur) var(--cw-ease);
}

@media (min-width: 600px) {
  .cw-pathways__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .cw-pathways__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -------------------------------------------------------------
   S9 — CLOSING STATEMENT (navy)
------------------------------------------------------------- */
.cw-home-closing__inner {
  text-align: center;
}
.cw-home-closing__title {
  font-size: var(--cw-fs-h2);
}
.cw-home-closing__copy {
  margin-inline: auto;
}
.cw-home-closing__cta {
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

/* -------------------------------------------------------------
   4K — VW EDITORIAL BAND (home §4): 2-col layout inside .cw-band--navy —
   the portrait cover on one side, eyebrow/title/lede/link on the other.
   Scoped wrapper (not reusing .cw-editorial — that component always
   crops its media with object-fit:cover via .cw-editorial__media, which
   would stretch/crop this cover; a book cover must render uncropped at
   its own portrait aspect, so this gets its own minimal media rule
   instead). Column order is deliberately cover-first (left) → text
   (right) at desktop width; the mobile stack below still leads with the
   cover per the same "image announces, text follows" rhythm as
   .cw-editorial.
------------------------------------------------------------- */
.cw-vw-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.cw-vw-band__cover {
  display: flex;
  justify-content: center;
}
/* Uncropped, natural aspect — NOT object-fit:cover. The cover is portrait
   (1133×1700); a modest max-width keeps it from dominating the band at
   desktop widths while height stays auto so nothing stretches or crops. */
.cw-vw-band__cover-img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  box-shadow:
    0 0 0 1px rgba(245, 240, 232, 0.08),
    0 24px 48px -16px rgba(2, 8, 16, 0.55);
}
.cw-vw-band__body {
  min-width: 0;
}
/* The sechead partial renders --left via $args['align']; on-dark colour
   inheritance already comes from .cw-band--navy (components.css). This
   just removes the sechead's own bottom margin so the trailing CTA line
   sits at the same rhythm as the rest of the 4E system. */
.cw-vw-band__body .cw-sechead {
  margin-bottom: 1.4rem;
}
.cw-vw-band__cta {
  margin: 0.5rem 0 0;
  text-align: left;
}

@media (min-width: 720px) {
  .cw-vw-band {
    grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr);
  }
  .cw-vw-band__cover {
    justify-content: flex-start;
  }
  .cw-vw-band__cover-img {
    max-width: 100%;
  }
}

/* -------------------------------------------------------------
   4K — PARTICIPATE BAND (home §8): 2-col editorial layout inside
   .cw-band--navy — the meeting photo beside the cta-band content (title/
   lede/button/benefits), replacing the retired full-bleed tinted-scrim
   background. Reuses the .cw-editorial__media crop rules are NOT reused
   here on purpose — this is a landscape editorial photo (not a portrait
   cover), so a plain cover-fit frame is built locally to match this
   band's own rhythm instead of importing editorial-row.php's markup.
------------------------------------------------------------- */
.cw-participate-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.cw-participate-band__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  min-height: 260px;
}
.cw-participate-band__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cw-participate-band__body {
  min-width: 0;
}
/* "Participate" eyebrow above the cta-band title — .cw-eyebrow already
   inherits the on-dark gold-soft colour from .cw-band--navy
   (components.css); only the bottom spacing needs a touch less than the
   base 22px so it reads as a tight tag-line, not a standalone eyebrow. */
.cw-participate-band__body .cw-eyebrow {
  margin-bottom: 14px;
}
/* .cw-cta-band is centred + max-width:auto by default (components.css) —
   right for a full-width band, wrong inside this editorial half-column.
   Left-align and let it fill the column instead. On-dark title/lede/
   benefit colours already come from the existing .cw-band--navy
   .cw-cta-band__* rules (components.css); only alignment changes here. */
.cw-participate-band__body .cw-cta-band {
  max-width: none;
  margin-inline: 0;
  text-align: left;
}
.cw-participate-band__body .cw-cta-band__actions {
  justify-content: flex-start;
}
/* .cw-cta-band__benefits is a CENTRED grid by default (margin: auto,
   text-align:center at >=640px) — override so the 3 benefit lines stack
   left-aligned under the button, matching the rest of the body copy
   instead of centring independently. Unscoped by width here because the
   max-width/margin reset (fill the column instead of auto-centring) is
   correct at every width this band renders; only the grid-columns +
   text-align pairing below is width-dependent (see the 880px query). */
.cw-participate-band__body .cw-cta-band__benefits {
  max-width: none;
  margin-inline: 0;
}

@media (min-width: 720px) {
  .cw-participate-band {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  }
  .cw-participate-band__media {
    min-height: 100%;
  }
}
@media (max-width: 879px) {
  /* Components.css switches .cw-cta-band__benefits to a 3-up grid + centred,
     stacked (icon-above-text) treatment at >=640px — keep it single-column
     and left-aligned here since below 880px the body column (0.58fr of the
     720px+ split, or full-width pre-720) is too narrow for 3 side-by-side
     benefits without cramping/wrapping. At >=880px both overrides below lift
     entirely and the shared 3-up default (components.css) takes over fully —
     grid AND centred/stacked text together — so "Read → Gather → Begin"
     reads as a tight 3-item sequence instead of a half-left/half-centred
     hybrid. */
  .cw-participate-band__body .cw-cta-band__benefits {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .cw-participate-band__body .cw-cta-band__benefit {
    text-align: left;
  }
}

@media (max-width: 719px) {
  .cw-participate-band__media {
    order: -1;
  }
}

/* -------------------------------------------------------------
   HERO SCROLL CUE (plan §5.1 — mockup .cw-hero__scrollcue)
   A decorative prompt to begin the night→day sunrise scrub.
   Shown ONLY in the immersive 3D state (.cw-hero[data-hero3d-active]):
   it is legible on the navy scene, and the scrub it points to exists
   only there. The cream poster fallback (reduced-motion / no-WebGL /
   mobile — where [data-hero3d-active] is never set) keeps it hidden,
   so a light cue never lands on the cream hero. This only READS the
   engine's attribute; it never touches the read-only hero3d engine.
------------------------------------------------------------- */
.cw-hero__scrollcue {
  display: none;
}
.cw-hero[data-hero3d-active] .cw-hero__scrollcue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--cw-on-dark-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  pointer-events: none;
}
.cw-hero__scrollcue-chevron {
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--cw-gold-soft);
  border-bottom: 2px solid var(--cw-gold-soft);
  transform: rotate(45deg);
  animation: cw-hero-scrollcue 1.8s var(--cw-ease) infinite;
}
@keyframes cw-hero-scrollcue {
  0%,
  100% {
    transform: rotate(45deg) translate(0, 0);
    opacity: 0.9;
  }
  50% {
    transform: rotate(45deg) translate(4px, 4px);
    opacity: 0.4;
  }
}

/* Reduced motion: static chevron, no loop. (The cue is already hidden under
   reduced-motion because the engine never boots, but this keeps the contract's
   reduced-motion guarantee explicit for any future code path.) */
@media (prefers-reduced-motion: reduce) {
  .cw-hero__scrollcue-chevron {
    animation: none;
  }
}

/* Defensive: hide on very small viewports if it would ever crowd (plan §5.1).
   The immersive state only occurs >=1024px, so this is belt-and-suspenders. */
@media (max-width: 480px) {
  .cw-hero[data-hero3d-active] .cw-hero__scrollcue {
    display: none;
  }
}

/* =============================================================
   PHASE 4 RE-BRIEF — home rebuild additions
   (hero free/subtext · W1 what-is · Q1 pull-quote · R1 doors · T1 trust)
============================================================= */

/* ---- Hero: "Free." line + author/date subtext (both hero states) ---- */
.cw-hero__free {
  margin-top: 14px;
  font-family: var(--cw-font-sans);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cw-gold-deep);
}
.cw-hero__subtext {
  margin-top: 18px;
  font-size: var(--cw-fs-small);
  color: var(--cw-ink-soft);
}
.cw-hero[data-hero3d-active] .cw-hero__free {
  color: var(--cw-gold-soft);
}
.cw-hero[data-hero3d-active] .cw-hero__subtext {
  color: var(--cw-on-dark-muted);
}

/* ---- 4E — hero ghost CTA ("Explore the Pillars"): read-only override of the
   G0 engine's boot state, same pattern as .cw-hero__free/__subtext above. This
   only reads [data-hero3d-active] to swap the ghost button's on-dark colours;
   it does not modify hero3d.css or any engine file. */
.cw-hero[data-hero3d-active] .cw-btn--ghost {
  --_fg: var(--cw-cream);
  --_bd: rgba(245, 240, 232, 0.32);
}
.cw-hero[data-hero3d-active] .cw-btn--ghost:hover {
  --_bg: rgba(245, 240, 232, 0.1);
  --_fg: var(--cw-cream);
  border-color: rgba(245, 240, 232, 0.5);
}

/* ---- W1 — What is Commons World ---- */
.cw-whatis__title {
  font-size: var(--cw-fs-h2);
  margin: 0 0 1.1rem;
}
.cw-whatis__lede,
.cw-whatis__definition {
  font-size: var(--cw-fs-body-lg);
  line-height: 1.7;
  color: var(--cw-ink);
  margin: 0 0 1.2rem;
}
.cw-whatis__negation {
  color: var(--cw-muted-blue);
}

/* ---- Q1 — Pull-quote band (dawn-arc rhymes the hero) ---- */
.cw-quote {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: calc(var(--cw-section-y-lg) + 22px) var(--cw-section-y-lg);
}
.cw-quote__arc {
  position: absolute;
  left: 50%;
  top: -340px;
  transform: translateX(-50%);
  width: 1400px;
  height: 420px;
  max-width: none;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(232, 196, 116, 0.3),
    rgba(232, 196, 116, 0.06) 58%,
    transparent 72%
  );
  pointer-events: none;
}
.cw-quote__arc::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 22px;
  transform: translateX(-50%);
  width: 1320px;
  height: 380px;
  border-radius: 50%;
  border-bottom: 1.5px solid rgba(216, 184, 95, 0.55);
}
.cw-quote .cw-container {
  position: relative;
  z-index: 1;
}
.cw-quote__text {
  font-family: var(--cw-font-serif);
  font-weight: 500;
  font-size: var(--cw-fs-quote);
  line-height: var(--cw-lh-quote);
  letter-spacing: -0.015em;
  max-width: 30ch;
  margin-inline: auto;
  color: var(--cw-on-dark);
}
.cw-quote__cite {
  display: block;
  margin-top: 1.6rem;
  font-family: var(--cw-font-sans);
  font-style: normal;
  font-size: var(--cw-fs-small);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cw-gold-soft);
}

/* ---- R1 — Three Doors ---- */
.cw-doors__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(2rem, 4.5vw, 3rem);
}
.cw-doors__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.2vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.cw-door {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--cw-surface);
  border: 1px solid var(--cw-border-soft);
  border-radius: var(--cw-radius-md);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  transition: transform var(--cw-dur) var(--cw-ease),
    border-color var(--cw-dur) var(--cw-ease),
    box-shadow var(--cw-dur) var(--cw-ease);
}
.cw-door:hover {
  transform: translateY(-3px);
  border-color: var(--cw-gold-border);
  box-shadow: var(--cw-shadow-card);
}
.cw-door--primary {
  border: 1.5px solid var(--cw-gold-border);
  box-shadow: var(--cw-shadow-gold);
}
.cw-door__start {
  position: absolute;
  top: -12px;
  left: clamp(1.6rem, 3vw, 2.2rem);
  background: var(--cw-gold);
  color: var(--cw-gold-ink);
  font-family: var(--cw-font-sans);
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--cw-radius-pill);
}
.cw-door__num {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--cw-gold-deep);
  margin: 0 0 1rem;
}
.cw-door__title {
  font-size: 1.45rem;
  margin: 0;
}
.cw-door__desc {
  margin-top: 0.7rem;
  color: var(--cw-text-muted);
  line-height: 1.7;
}
.cw-door__cta {
  margin-top: auto;
  padding-top: 1.4rem;
}
.cw-door__sub {
  margin-top: 0.9rem;
  font-size: var(--cw-fs-small);
}
.cw-door__sub a {
  color: var(--cw-text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--cw-border);
  font-weight: 600;
}
.cw-door__sub a:hover {
  color: var(--cw-navy-deep);
  border-bottom-color: var(--cw-gold);
}
.cw-door__sep {
  margin-inline: 0.5rem;
  color: var(--cw-gold-deep);
}
@media (min-width: 860px) {
  .cw-doors__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 859px) {
  .cw-door--primary {
    order: -1;
  }
}

/* ---- T1 — Trust band close (Phase 4C §3.6 — four markers, no legal entity) ---- */
.cw-trust {
  text-align: center;
}
.cw-trust__markers {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(2rem, 4vw, 2.75rem);
  padding: 0;
  list-style: none;
  text-align: left;
}
.cw-trust__marker {
  padding-top: 1.1rem;
  border-top: 1px solid var(--cw-gold-border);
}
.cw-trust__marker-title {
  display: block;
  font-family: var(--cw-font-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--cw-heading);
}
.cw-trust__marker-detail {
  display: block;
  margin-top: 0.45rem;
  font-size: var(--cw-fs-small);
  line-height: 1.6;
  color: var(--cw-text-muted);
}

@media (min-width: 700px) {
  .cw-trust__markers {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .cw-trust__markers {
    grid-template-columns: repeat(4, 1fr);
  }
  .cw-trust__marker {
    text-align: left;
  }
}