/* =============================================================
   Commons World — pages.css
   Page-specific section styling. Generic prose, then per-page
   blocks: 2055 · for-investors · get-involved · support ·
   human-threshold · about-the-author · book · contact.
   All classes cw- prefixed; tokens per BUILD-CONTRACT §2.
   ============================================================= */

/* -------------------------------------------------------------
   GENERIC PROSE — Gutenberg/page body, legal pages
------------------------------------------------------------- */
.cw-prose {
  font-size: var(--cw-fs-body-lg);
  line-height: var(--cw-lh-body);
  color: var(--cw-ink);
}
.cw-prose > * + * {
  margin-top: 1.5rem;
}
.cw-prose h2 {
  font-size: var(--cw-fs-h2);
  margin-top: 2.75rem;
  margin-bottom: 0.5rem;
}
.cw-prose h3 {
  font-size: var(--cw-fs-h3);
  margin-top: 2rem;
  margin-bottom: 0.25rem;
}
.cw-prose ul,
.cw-prose ol {
  padding-left: 1.5rem;
  display: grid;
  gap: 0.6rem;
}
.cw-prose 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-prose img {
  border-radius: var(--cw-radius-md);
  margin-block: 2rem;
}

/* Legal note banner ("Draft placeholder — legal review required") */
.cw-legal-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  font-size: var(--cw-fs-small);
  color: var(--cw-text-muted);
  background: var(--cw-surface-zone);
  border-radius: var(--cw-radius-md);
}
.cw-legal-note .cw-icon {
  color: var(--cw-gold-deep);
  width: 1.2em;
  height: 1.2em;
}

/* Status / confirmation banner (success & download-ready pages) */
.cw-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--cw-surface);
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius-md);
  color: var(--cw-ink);
}
.cw-banner p {
  margin: 0;
}
.cw-banner--ok {
  border-color: var(--cw-gold-soft);
}
.cw-banner .cw-icon {
  color: var(--cw-success);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

/* -------------------------------------------------------------
   /2055 — dark immersive editorial + pull-quote
------------------------------------------------------------- */
.cw-vision {
  background: var(--cw-surface-darker);
  color: var(--cw-on-dark);
}
.cw-vision__hero {
  padding-block: clamp(4rem, 8vw, 7rem) clamp(2.5rem, 5vw, 4rem);
  background: 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-vision__hero .cw-eyebrow {
  color: var(--cw-gold-soft);
}
.cw-vision__title {
  font-size: var(--cw-fs-hero);
  color: var(--cw-cream);
  margin: 0 0 1.5rem;
}
.cw-vision__standfirst {
  font-family: var(--cw-font-heading);
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.4;
  color: var(--cw-gold-soft);
  max-width: 40ch;
  margin: 0;
}
.cw-vision__body {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 7rem);
  color: rgba(245, 240, 232, 0.86);
}
.cw-vision__body p {
  margin: 0;
}
.cw-vision__body > * + * {
  margin-top: 1.5rem;
}
.cw-vision__body h2 {
  color: var(--cw-cream);
  font-size: var(--cw-fs-h3);
  margin-top: 2.5rem;
}
/* pull-quote */
.cw-vision__body blockquote,
.cw-pullquote {
  margin: 2.5rem 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-cream);
}
.cw-vision__mark {
  display: flex;
  justify-content: center;
  padding-block: 2rem;
  color: var(--cw-gold);
}
.cw-vision__close {
  color: var(--cw-cream);
}
.cw-vision__cta {
  padding-block: clamp(3rem, 6vw, 5rem);
  text-align: center;
  border-top: 1px solid var(--cw-border-dark);
}
.cw-vision__cta h2 {
  color: var(--cw-cream);
  margin: 0 0 1.5rem;
}
.cw-vision__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
@media (min-width: 620px) {
  .cw-vision__actions {
    flex-direction: row;
    justify-content: center;
  }
}

/* -------------------------------------------------------------
   /for-investors — formal grid + prospectus + form
------------------------------------------------------------- */
.cw-inv-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.cw-inv-point {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--cw-surface);
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius-lg);
}
.cw-inv-point h2 {
  font-size: var(--cw-fs-body-lg);
  color: var(--cw-gold-deep);
  margin: 0 0 0.75rem;
}
.cw-inv-point p {
  margin: 0;
  color: var(--cw-text-muted);
}
.cw-prospectus {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--cw-surface-darker);
  color: var(--cw-on-dark);
  border-radius: var(--cw-radius-lg);
}
.cw-prospectus h2 {
  color: var(--cw-cream);
  font-size: var(--cw-fs-h3);
  margin: 0 0 0.5rem;
}
.cw-prospectus p {
  margin: 0;
  color: var(--cw-on-dark-muted);
}
.cw-prospectus__cta {
  align-self: start;
}
/* empty-state link ("Available on request" → enquiry form) on the navy row */
.cw-prospectus .cw-link-arrow {
  color: var(--cw-cream);
}
.cw-prospectus .cw-link-arrow:hover {
  color: var(--cw-gold-soft);
}
@media (min-width: 760px) {
  .cw-inv-grid {
    grid-template-columns: 1fr 1fr;
  }
  .cw-prospectus {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
  }
}

/* -------------------------------------------------------------
   /get-involved — scannable card grid
------------------------------------------------------------- */
.cw-involve {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}
.cw-involve__card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.75rem, 3vw, 2.25rem) 1.75rem 1.75rem;
  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),
    transform var(--cw-dur) var(--cw-ease);
}
.cw-involve__card:hover {
  border-color: var(--cw-gold);
  transform: translateY(-2px);
}
.cw-involve__n {
  font-family: var(--cw-font-heading);
  font-size: var(--cw-fs-small);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cw-gold-deep);
}
.cw-involve__icon {
  display: flex;
  color: var(--cw-navy);
}
.cw-involve__who {
  font-size: var(--cw-fs-h3);
  margin: 0;
}
.cw-involve__step {
  margin: 0;
  color: var(--cw-text-muted);
  flex-grow: 1;
}
.cw-involve__cta {
  margin-top: 0.5rem;
  align-self: flex-start;
}
@media (min-width: 640px) {
  .cw-involve {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 980px) {
  .cw-involve {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -------------------------------------------------------------
   /support — "why give" list + closing line
------------------------------------------------------------- */
.cw-why h2 {
  margin-bottom: 1.5rem;
}
.cw-why__lead {
  font-size: var(--cw-fs-body-lg);
  color: var(--cw-text-muted);
  margin-bottom: 2rem;
}
.cw-why__list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  gap: 1.5rem;
}
.cw-why__list li {
  padding-left: 1.5rem;
  border-left: 2px solid var(--cw-gold);
  color: var(--cw-text-muted);
}
.cw-why__list strong {
  color: var(--cw-ink);
}
.cw-why__note {
  margin: 0;
  font-size: var(--cw-fs-small);
  color: var(--cw-text-muted);
}
.cw-support-close {
  text-align: center;
}
.cw-support-close__line {
  font-family: var(--cw-font-heading);
  font-style: italic;
  font-size: var(--cw-fs-h3);
  color: var(--cw-navy);
  margin: 0 0 1.5rem;
}

/* -------------------------------------------------------------
   /human-threshold — component cards w/ "current gap"
------------------------------------------------------------- */
.cw-threshold {
  display: grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
.cw-threshold__item {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--cw-surface);
  border: 1px solid var(--cw-border);
  border-left: 3px solid var(--cw-gold);
  border-radius: var(--cw-radius-md);
}
.cw-threshold__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.cw-threshold__n {
  font-family: var(--cw-font-heading);
  font-size: var(--cw-fs-h3);
  color: var(--cw-gold-deep);
}
.cw-threshold__icon {
  display: grid;
  place-items: center;
  color: var(--cw-navy);
}
.cw-threshold__icon .cw-icon {
  width: 1.6rem;
  height: 1.6rem;
}
.cw-threshold__name {
  font-size: var(--cw-fs-h3);
  margin: 0;
}
.cw-threshold__body {
  font-size: var(--cw-fs-body-lg);
  color: var(--cw-ink);
  margin: 0 0 1.5rem;
}
.cw-threshold__gap {
  margin: 0;
  color: var(--cw-text-muted);
  font-size: 0.98rem;
}
.cw-threshold__gap-label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--cw-font-body);
  font-size: var(--cw-fs-small);
  font-weight: 700;
  letter-spacing: var(--cw-track-eyebrow);
  text-transform: uppercase;
  color: var(--cw-text-muted);
}
@media (min-width: 760px) {
  .cw-threshold {
    grid-template-columns: 1fr 1fr;
  }
}

/* Centred closing quote band (shared by threshold/pillars) */
.cw-close-quote {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 1.5rem;
}
.cw-close-quote__text {
  font-family: var(--cw-font-heading);
  font-style: italic;
  font-size: var(--cw-fs-h3);
  line-height: 1.4;
  color: var(--cw-cream);
  max-width: 32ch;
  margin: 0;
}

/* -------------------------------------------------------------
   /author — ONE-SCREEN REBUILD (4F §F3.3, 3 Jul). The old multi-
   section editorial-letter page (.cw-author__profile/__body/__prose/
   __emphasis/__note/__quote/__connect, six H2 sections + a trust-card
   row + a closing cta-band) is RETIRED — superseded content lives in
   git history. The whole page is now one .cw-band--paper profile hero:
   portrait left, copy right. System type (var(--cw-fs-*)) throughout —
   this also fixes the old page's heading/body spacing bugs.
------------------------------------------------------------- */
.cw-author-hero__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 760px) {
  .cw-author-hero__grid {
    grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.25rem);
  }
}
.cw-author-hero__media {
  display: flex;
  justify-content: center;
}
@media (min-width: 760px) {
  .cw-author-hero__media {
    justify-content: flex-start;
  }
}
/* Empty (no featured image yet) renders a monogram square — kept modest so
   it never forces extra page height before a real portrait is uploaded;
   a real photo (has .cw-author-hero__portrait--has-img) is allowed the
   full 340px per the plan's 340–380px spec. */
.cw-author-hero__portrait {
  display: grid;
  place-items: center;
  width: min(60%, 200px);
  aspect-ratio: 1 / 1;
  border-radius: var(--cw-radius-lg);
  overflow: hidden;
  background: var(--cw-surface-zone);
  box-shadow: 0 20px 46px rgba(16, 33, 57, 0.2);
  font-family: var(--cw-font-heading);
  font-weight: 700;
  font-size: 3rem;
  color: var(--cw-gold-deep);
}
@media (min-width: 760px) {
  .cw-author-hero__portrait {
    width: 100%;
    max-width: 200px;
  }
}
.cw-author-hero__portrait--has-img {
  width: min(100%, 340px);
  font-size: 5rem;
}
@media (min-width: 760px) {
  .cw-author-hero__portrait--has-img {
    max-width: 340px;
  }
}
.cw-author-hero__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cw-author-hero__body {
  text-align: center;
}
@media (min-width: 760px) {
  .cw-author-hero__body {
    text-align: left;
  }
}
.cw-author-hero__body .cw-eyebrow {
  justify-content: center;
}
@media (min-width: 760px) {
  .cw-author-hero__body .cw-eyebrow {
    justify-content: flex-start;
  }
}
.cw-author-hero__name {
  margin: 0.5rem 0 0;
  font-family: var(--cw-font-heading);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--cw-heading);
}
.cw-author-hero__role {
  margin: 0.4rem 0 0;
  font-size: var(--cw-fs-body-lg);
  color: var(--cw-text-muted);
}
.cw-author-hero__prose {
  margin-top: clamp(1rem, 2vw, 1.4rem);
}
.cw-author-hero__prose p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--cw-text-muted);
}
/* p+p (0,1,2) must outweigh the p reset above (0,1,1) — a bare
   `> * + *` owl loses that fight and the paragraphs fuse. */
.cw-author-hero__prose p + p {
  margin-top: 0.9rem;
}
.cw-author-hero__quote {
  margin: clamp(1.1rem, 2vw, 1.5rem) 0 0;
  padding: 0.25em 0 0.25em 1.4rem;
  border-left: 3px solid var(--cw-gold);
}
@media (min-width: 760px) {
  .cw-author-hero__quote {
    margin-left: 0;
  }
}
.cw-author-hero__quote p {
  margin: 0;
  font-family: var(--cw-font-heading);
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.35;
  color: var(--cw-heading);
}
.cw-author-hero__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .cw-author-hero__chips {
    justify-content: flex-start;
  }
}
.cw-author-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.75rem;
  margin: 1.35rem 0 0;
}
@media (min-width: 760px) {
  .cw-author-hero__actions {
    justify-content: flex-start;
  }
}

/* -------------------------------------------------------------
   /book — intro + formats + alternate formats + giving prompt
------------------------------------------------------------- */
.cw-bookpage__top {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
.cw-bookpage__title {
  font-size: var(--cw-fs-h1);
  margin: 0 0 0.5rem;
}
.cw-bookpage__by {
  font-family: var(--cw-font-heading);
  font-style: italic;
  font-size: var(--cw-fs-body-lg);
  color: var(--cw-gold-deep);
  margin: 0 0 1.5rem;
}
.cw-bookpage__lead {
  font-size: var(--cw-fs-body-lg);
  color: var(--cw-ink);
  margin: 0 0 1.25rem;
}
.cw-bookpage__body {
  color: var(--cw-text-muted);
  margin: 0 0 1.5rem;
}
.cw-bookpage__formats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}
.cw-bookpage__formats li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--cw-text-muted);
}
.cw-bookpage__formats .cw-icon {
  color: var(--cw-sage);
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
}
.cw-bookpage__art {
  display: flex;
  justify-content: center;
  order: -1;
}
.cw-altformats {
  display: grid;
  gap: 0.75rem;
  margin-top: 2rem;
}
.cw-altformats__item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.5rem;
  background: var(--cw-surface);
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius-md);
  color: var(--cw-ink);
  text-decoration: none;
  transition: border-color var(--cw-dur) var(--cw-ease);
}
.cw-altformats__item:hover {
  text-decoration: none;
  border-color: var(--cw-gold);
}
.cw-altformats__item span {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  line-height: 1.4;
  font-size: var(--cw-fs-small);
  color: var(--cw-text-muted);
}
.cw-altformats__item strong {
  font-size: var(--cw-fs-body);
  color: var(--cw-ink);
  margin-bottom: 2px;
}
.cw-altformats__item > .cw-icon:first-child {
  color: var(--cw-navy);
}
.cw-altformats__item > .cw-icon:last-child {
  color: var(--cw-gold-deep);
}
.cw-giving-prompt {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 1.25rem;
}
.cw-giving-prompt h2 {
  font-family: var(--cw-font-heading);
  font-style: italic;
  font-size: var(--cw-fs-h3);
  color: var(--cw-cream);
  margin: 0;
}
.cw-giving-prompt p {
  color: var(--cw-on-dark-muted);
  max-width: 48ch;
  margin: 0;
}
@media (min-width: 920px) {
  .cw-bookpage__top {
    grid-template-columns: 1.1fr 0.9fr;
  }
  .cw-bookpage__art {
    order: 0;
  }
  .cw-altformats {
    grid-template-columns: 1fr 1fr;
  }
}

/* -------------------------------------------------------------
   /contact — "Send us a message" (#send), ONE-SCREEN restructure.
   Was: form + a text `.cw-contact__aside` (Email / Response time /
   social / a "Not a partnership enquiry?" CTA). Now: a reassurance
   PILL (.cw-contact__reassure, reuses the shared .cw-chip) sits
   between the lede and the grid; the aside is replaced by an
   editorial faces image (.cw-contact__media wraps the SHARED
   .cw-editorial__media class — see page-contact.php — so it rides
   the global lazy-fade for free); the email address survives as one
   compact caption line under the form (.cw-contact__email-line). The
   participation bridge CTA and the social row are retired outright —
   their classes (.cw-contact__aside, __detail, __social) had no other
   consumer in the theme and are removed with them.

   #send ALSO gets its own tighter padding-block + sechead margin
   override (base .cw-band ≈ clamp(3.5rem,7vw,5.5rem) + .cw-sechead's
   own clamp(2.25rem,4.5vw,3.5rem) is too tall to keep the submit
   button inside one 1440×900/375×812 viewport below the 82/102px
   sticky header) — see the section-scoped rules + field-spacing
   tightening + mobile image cutoff at the bottom of this block.
------------------------------------------------------------- */
#send.cw-band {
  /* Tighter than the shared --tight variant (clamp(2.25rem,4.5vw,3.5rem))
     — this section still has to clear a sechead + pill + full form on
     top of the band's own padding, so it gets its own smaller budget.
     Asymmetric: bottom trims further than top (top still needs to clear
     the sticky header visually; nothing sits below the form to justify
     matching bottom air) — the last few px of the one-screen budget. */
  padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(0.75rem, 1.5vw, 1.15rem);
}
#send .cw-sechead {
  margin-bottom: 0.75rem;
}
/* Title/lede also get a page-scoped trim: the shared clamp(1.8rem,
   3.4vw,2.6rem) title is sized for a section where the sechead is the
   ONLY thing above the fold; here it shares the screen with a pill +
   full form, so it shrinks one notch. The lede keeps the shared 60ch
   measure UNCHANGED — narrowing it (tried 46ch) pushed the sentence
   from 2 lines to 3, a net loss even after the smaller title. Only its
   top margin is trimmed. */
#send .cw-sechead__title {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
}
#send .cw-sechead__lede {
  margin-top: 0.6rem;
}
/* Reassurance pill — on .cw-chip--gold (transparent/gold-outline, the
   calmer of the two chip skins) so it reads as a badge, not a CTA.
   Sits above the grid, under the lede. */
.cw-contact__reassure {
  margin: 0.25rem 0 1.75rem;
  gap: 0.55rem;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  background: rgba(201, 168, 76, 0.08);
}
.cw-contact__reassure .cw-icon {
  width: 0.9em;
  height: 0.9em;
  flex-shrink: 0;
}

.cw-contact__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}
/* Compact single-line email caption under the form (was the aside's
   "Email" detail card). Sits inside the form's grid column, directly
   under contact-form.php's card. */
.cw-contact__email-line {
  margin: 0.85rem 0 0;
  font-size: var(--cw-fs-small);
  color: var(--cw-text-muted);
}
/* Editorial faces image — right column. Fixed aspect-ratio (not the
   component default's min-height:360px) so the image never dictates a
   row height taller than the form beside it; object-fit:cover (base
   .cw-editorial__media img rule) crops to fill it either way. */
.cw-contact__media {
  aspect-ratio: 4 / 5;
  min-height: 0;
  height: 100%;
  align-self: stretch;
}
@media (min-width: 860px) {
  .cw-contact__grid {
    grid-template-columns: 1.4fr 1fr;
  }
  /* The grid has three children (form, email caption, image). Pin the image
     to the right column spanning both rows, and keep the email caption in the
     left column under the form — otherwise the caption lands in column 2 and
     pushes the image down beneath the form. */
  .cw-contact__media {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .cw-contact__email-line {
    grid-column: 1;
  }
}

/* One-screen field rhythm — applies at EVERY width (not just mobile):
   the shared .cw-field (1.25rem margin-bottom), .cw-field__input
   (0.85rem 1rem padding) and the 9rem-tall textarea are sized for a
   long-form page where the form is the only thing on the section; here
   the submit button has to clear the viewport alongside a sechead +
   pill + (at ≥860px) a full-height image, so #send gets its own
   smaller rhythm at every breakpoint. Still comfortably tappable/
   readable — nothing here goes below the shared design system's other
   compact contexts (e.g. .cw-capture's 60px inputs, components.css
   ~274-276). */
#send .cw-contact-form {
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
}
#send .cw-field {
  margin-bottom: 0.85rem;
}
#send .cw-field__label {
  margin-bottom: 0.3rem;
}
#send .cw-field__input {
  padding: 0.6rem 0.85rem;
}
/* `height` (not `min-height`) — contact-form.php's <textarea rows="6">
   sets an intrinsic content-box height that a `min-height` floor cannot
   shrink below; `height` overrides it outright. `resize: vertical`
   (base rule, components.css ~218) still lets a visitor drag it taller
   if they have more to say. */
#send textarea.cw-field__input {
  height: 4.5rem;
  min-height: 0;
}
#send .cw-contact-form__hint,
#send .cw-form-note {
  margin-top: 0.5rem;
}

/* Pair Name+Organisation and Email+Category onto 2-up rows — the
   single biggest remaining lever for the one-screen budget (stacking
   all 5 short fields vertically was ~380-440px; side by side it's
   roughly half that). contact-form.php's 5 fields are DIRECT,
   same-order children of #cw-contact-page-form (name, organization,
   email, category, message — verified live), so :nth-of-type on the
   shared .cw-field class reaches each one without touching the form's
   own markup. Message/submit/note/status (siblings 5-9) are left out
   of the selector so they still span the full form width below.

   Applies from ~360px up (a narrower 0.6rem gap below 860px keeps
   ~145-160px per column at a 375px CSS viewport — tight for
   "you@example.com" but the 375×812 one-screen requirement takes
   priority; the alternative, stacking single-column, measured ~100px
   taller and pushed the submit button below the fold). 360, not 375 —
   a 375px OUTER viewport renders a few px narrower as the document's
   actual content width (scrollbar-gutter/subpixel layout), so a
   360px floor gives headroom rather than sitting exactly on the
   boundary it needs to catch. Column widths stay 1fr/1fr — no
   separate narrow-viewport override needed. */
@media (min-width: 360px) {
  #cw-contact-page-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.6rem;
  }
  #cw-contact-page-form .cw-field:nth-of-type(1),
  #cw-contact-page-form .cw-field:nth-of-type(3) {
    grid-column: 1;
  }
  #cw-contact-page-form .cw-field:nth-of-type(2),
  #cw-contact-page-form .cw-field:nth-of-type(4) {
    grid-column: 2;
  }
  #cw-contact-page-form .cw-field:nth-of-type(1),
  #cw-contact-page-form .cw-field:nth-of-type(2) {
    grid-row: 1;
  }
  #cw-contact-page-form .cw-field:nth-of-type(3),
  #cw-contact-page-form .cw-field:nth-of-type(4) {
    grid-row: 2;
  }
  /* Message field + honeypot + submit + note + status all span both
     columns and fall in visual/DOM order after the 2-up rows. */
  #cw-contact-page-form .cw-field:nth-of-type(5),
  #cw-contact-page-form .cw-contact-form__hp,
  #cw-contact-page-form [data-submit],
  #cw-contact-page-form .cw-form-note,
  #cw-contact-page-form .cw-form-status {
    grid-column: 1 / -1;
  }
}
@media (min-width: 860px) {
  #cw-contact-page-form {
    column-gap: 1rem;
  }
}

/* Mobile: the FORM is the priority. Below the editorial row's own
   720px collapse point, drop the image entirely rather than stack it
   above/below the form — a full-width photo would push the submit
   button off the first screen (THE RULE would normally keep image+
   heading adjacent, but there is no heading paired to this image, so
   omitting it entirely is the one-screen-safe choice here). Below this
   width the 5 fields also can't pair 2-up (too narrow for two inputs
   side by side), so mobile needs its OWN extra tightening pass on top
   of the ≥720px rhythm above — the taller 102px mobile header
   (components.css ~411-413) leaves less budget too. */
@media (max-width: 719px) {
  .cw-contact__media {
    display: none;
  }
  /* Textarea drops one step further than the ≥720px rhythm above —
     still comfortably multi-line, just not a half-screen-tall box. */
  #send textarea.cw-field__input {
    height: 3.75rem;
  }
  #send.cw-band {
    padding-block: 1rem 0.75rem;
  }
  #send .cw-sechead {
    margin-bottom: 0.6rem;
  }
  #send .cw-sechead .cw-eyebrow {
    margin-bottom: 10px;
  }
  #send .cw-sechead__lede {
    margin-top: 0.4rem;
  }
  .cw-contact__reassure {
    margin-bottom: 0.75rem;
  }
  #send .cw-contact-form {
    padding: 1rem;
  }
  #send .cw-field {
    margin-bottom: 0.6rem;
  }
}

/* The shared contact / investor-enquiry form card
   (template-parts/components/contact-form.php + assets/js/contact.js).
   Field internals reuse the base .cw-field / .cw-form-* components. */
.cw-contact-form {
  position: relative;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  background: var(--cw-surface);
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius-lg);
  box-shadow: var(--cw-shadow-card);
}
/* honeypot — visually hidden (mirrors .cw-capture__hp) */
.cw-contact-form__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
/* per-field inline error (revealed by contact.js) */
.cw-contact-form__error {
  margin: 0.5rem 0 0;
  font-size: var(--cw-fs-small);
  font-weight: 700;
  color: var(--cw-error);
}
.cw-contact-form .cw-field[data-state='error'] .cw-field__input {
  border-color: var(--cw-error);
}
.cw-contact-form__footnote {
  margin: 0.9rem 0 0;
  font-size: var(--cw-fs-small);
  color: var(--cw-text-muted);
}
/* helper line under the message textarea (P12 "be specific…") */
.cw-contact-form__hint {
  margin: 0.5rem 0 0;
  font-size: var(--cw-fs-small);
  color: var(--cw-text-muted);
}
/* success state — form hidden, server message shown */
.cw-contact-form__done {
  display: grid;
  justify-items: start;
  gap: 1rem;
}
/* Stay hidden until contact.js reveals it. The display:grid above beats the
   UA [hidden] rule, so without this the success checkmark shows on load. */
.cw-contact-form__done[hidden] {
  display: none;
}
.cw-contact-form__check {
  display: grid;
  place-items: center;
  color: var(--cw-success);
}
.cw-contact-form__done-text {
  margin: 0;
  font-size: var(--cw-fs-body-lg);
  color: var(--cw-ink);
}
.cw-contact-form__done-text:focus {
  outline: none;
}

/* -------------------------------------------------------------
   /contact S4 — what we're looking for / what partnership offers
   4-faces update: the section now opens with a full-width .cw-editorial
   row (community-gathering.webp beside the heading/intro/lede — see
   page-contact.php's #partnership), so .cw-offer wraps TWO containers:
   the editorial row's plain .cw-container (still .cw-offer, for the
   __lede/p color rules below) and the narrower reading column holding
   "What partnership offers" (.cw-offer--below-editorial, its own top
   space since it's no longer the section's first child).
------------------------------------------------------------- */
.cw-offer > h2 {
  margin-top: 0;
}
.cw-offer > h2 ~ h2 {
  margin-top: clamp(2rem, 5vw, 3rem);
}
.cw-offer--below-editorial > h2 {
  margin-top: clamp(2rem, 5vw, 3rem);
}
.cw-offer p {
  color: var(--cw-text-muted);
}
/* "not sponsorship / co-development" key idea — set off with a gold rule */
.cw-offer p.cw-offer__lede {
  margin: clamp(1.5rem, 4vw, 2.25rem) 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--cw-gold);
  font-family: var(--cw-font-heading);
  font-size: var(--cw-fs-body-lg);
  line-height: var(--cw-lh-body);
  color: var(--cw-ink);
}
.cw-offer__list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 1.25rem;
}
.cw-offer__list li {
  padding-left: 1.5rem;
  border-left: 2px solid var(--cw-gold);
  color: var(--cw-text-muted);
}

/* -------------------------------------------------------------
   /contact S5 — foundation details (trust + GEO payload).
   W6e1: the dl of 4 facts is retired (→ 4 .cw-card--icon in
   .cw-cards--4, page-contact.php) — only the closing pull-quote
   below is still page-specific CSS; the trust markers themselves
   now reuse .cw-card--icon from components.css.
------------------------------------------------------------- */
/* closing pull-quote (centred, gold rules) — mirrors the /about pullquote */
.cw-foundation__quote {
  max-width: 46ch;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding: 1.4em 0;
  border-top: 1px solid var(--cw-gold);
  border-bottom: 1px solid var(--cw-gold);
  text-align: center;
}
.cw-foundation__quote p {
  margin: 0;
  font-family: var(--cw-font-heading);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.4;
  color: var(--cw-heading);
}
.cw-foundation__quote cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-size: var(--cw-fs-small);
  letter-spacing: var(--cw-track-eyebrow);
  text-transform: uppercase;
  color: var(--cw-text-muted);
}

/* -------------------------------------------------------------
   /contact S5 — closing doors. W6e1: the heading/lead/cta wrapper
   classes are retired (→ cta-band.php); only the onward links row
   below cta-band.php is still page-specific. CRO restructure reverted
   this band from --image back to plain --navy (headline photo bands
   → clean solid navy), so the page-specific --image on-dark
   .cw-link-arrow override 4J added here is dead: .cw-band--navy
   already supplies it (components.css:2694–2697) and no override is
   needed.
------------------------------------------------------------- */
.cw-contact-doors__links {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem 2rem;
  /* The template puts real whitespace (a newline + indent) between each
     <li> and its <a> — normally invisible, but that whitespace is still an
     inline text node, so it injects a font-metric baseline strut into the
     flex row. The strut lands on the FIRST flex item only (an artifact of
     how the anonymous inline box is generated), making the first <li>
     ~42.2px tall against ~35.4px for the rest — which visibly lifts just
     that link ~6.8px above its siblings. Same bug as .cw-share__row
     (book.css) / .cw-share__list (news.css, essays.css), but these links
     are TEXT (not icon-only), so font-size:0 must be paired with an
     explicit restore on .cw-link-arrow — otherwise it would collapse the
     visible label. Verified live: 0.00px top-spread across all <li>, link
     text still renders at its authored 0.83rem (base.css .cw-link-arrow).
     Do NOT remove this — it silently reappears if "cleaned up". */
  font-size: 0;
}
.cw-contact-doors__links .cw-link-arrow {
  /* Restore the row's font-size:0 back to .cw-link-arrow's own authored
     size (base.css) — the link's icon is sized in `em` off this, so
     restoring here (not some arbitrary value) keeps icon + label at their
     normal proportions instead of collapsing to 0×0. */
  font-size: 0.83rem;
}

/* -------------------------------------------------------------
   ERROR / 404 + search results
------------------------------------------------------------- */
.cw-notfound {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 1.5rem;
}
.cw-notfound__code {
  font-family: var(--cw-font-heading);
  font-size: var(--cw-fs-hero);
  line-height: 1;
  color: var(--cw-gold);
}

/* No-results panel (search) + 404 body — friendly, on-brand */
.cw-search__no-results,
.cw-404__body {
  font-size: var(--cw-fs-body-lg);
  color: var(--cw-text-muted);
}
.cw-search__no-results > p,
.cw-404__body > p {
  margin: 0 0 1.5rem;
}

/* Helpful-links navs */
.cw-search__helpful-links,
.cw-404__links {
  margin-top: 1.5rem;
}

/* Shared link list — stacked .cw-link-arrow items (reset UA list styling) */
.cw-search__link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  justify-items: start;
}
.cw-search__link-list li {
  margin: 0;
}

/* =============================================================
   4C-stubs — coming-soon.php mini-page uplift (Phase 4C W3a)
   Used on /participate, /aura, /commons-bank, /education.
   Additive only: status pill, key-facts wrapper (cards reuse the
   existing .cw-involve__card family), architecture link-arrow
   spacing, closing two-book band.
   ============================================================= */

/* Status pill — "In development", sits between the eyebrow and H1. */
.cw-status-pill {
  display: inline-flex;
  align-items: center;
  margin: 0.75rem 0 0.5rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--cw-gold);
  border-radius: var(--cw-radius-pill);
  background: var(--cw-surface);
  font-family: var(--cw-font-heading);
  font-size: var(--cw-fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cw-gold-deep);
}

/* Key-facts row — thin wrapper around .cw-involve so this section can carry
   its own top spacing without a full .cw-section__head; cards themselves
   are unstyled here (inherit .cw-involve__card as-is). */
.cw-stub-facts {
  margin-top: 0;
}

/* "Read the architecture" — spacing below the facts grid. */
.cw-stub-arch {
  margin: 2rem 0 0;
  text-align: center;
}

/* Closing two-book band — small covers + copy + CTA. */
.cw-stub-books {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  text-align: left;
}
.cw-stub-books__covers {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}
.cw-stub-books__cover {
  width: clamp(72px, 12vw, 100px);
  height: auto;
  aspect-ratio: 7 / 10;
  object-fit: cover;
  border-radius: var(--cw-radius-sm);
  border: 1px solid var(--cw-border);
  box-shadow: 0 6px 18px rgba(16, 33, 58, 0.12);
}
.cw-stub-books__body {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
}
.cw-stub-books__lead {
  margin: 0;
  font-family: var(--cw-font-heading);
  font-size: var(--cw-fs-h3);
  color: var(--cw-navy);
}
.cw-stub-books__sub {
  margin: 0 0 0.5rem;
  color: var(--cw-text-muted);
  max-width: 52ch;
}
@media (max-width: 640px) {
  .cw-stub-books {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .cw-stub-books__body {
    justify-items: center;
  }
}