/* =============================================================
   Commons World, calm editorial explainer
   /why-commons-world/
   ============================================================= */

.cw-why {
  --cw-why-body: #40536a;
  --cw-why-paper: #f8f3e9;
  --cw-why-paper-deep: #eee4d2;
  --cw-why-white: #fffdf8;
  --cw-why-rule: #d9ccb5;
  --cw-why-label-gold: #7d5e1e; /* AA-safe label gold — see the note at .cw-why-eyebrow */
  overflow: clip;
  background: var(--cw-why-paper);
  color: var(--cw-ink);
}

.cw-why-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: calc(var(--cw-z-header) + 1);
  height: 2px;
  pointer-events: none;
}

.cw-why-progress__bar {
  display: block;
  width: var(--cw-read, 0%);
  height: 100%;
  background: linear-gradient(90deg, var(--cw-gold-deep), var(--cw-gold-soft));
}

@media (prefers-reduced-motion: no-preference) {
  .cw-why-progress__bar { transition: width 90ms linear; }
}

.cw-why h1,
.cw-why h2,
.cw-why h3,
.cw-why p,
.cw-why blockquote,
.cw-why figure,
.cw-why ul,
.cw-why ol { margin: 0; }

/* Editorial prose should favour an even final line instead of leaving a
   single word hanging after a comma or at the end of a paragraph. */
.cw-why p,
.cw-why li { text-wrap: pretty; }

.cw-why ul,
.cw-why ol {
  padding: 0;
  list-style: none;
}

.cw-why-hero {
  padding-block: clamp(5rem, 7vw, 7rem) clamp(3rem, 4vw, 3.5rem);
  background: var(--cw-why-paper);
}

.cw-why-hero__copy { width: min(65rem, 100%); }

.cw-why-eyebrow,
.cw-why-marker,
.cw-why-weakness__number,
.cw-why-book__kicker {
  font-family: var(--cw-font-sans);
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* WCAG AA fix (--cw-why-label-gold): NOT --cw-gold-deep (#9f7b2b). At the
   14px/650 label size shared by .cw-why-eyebrow, .cw-why-marker and
   .cw-why-weakness__number, gold-deep measures 3.55:1 on the hero's #f8f3e9,
   3.87:1 on the #fffdf8 sections and 3.12:1 on the #eee4d2 diagnosis band —
   all under the 4.5:1 floor, on the markers that carry this page's whole
   section-numbering spine. #7d5e1e is the vetted darker gold already used for
   the same failure in home.css, book.css and community.css; it measures
   5.44:1 / 5.92:1 / 4.77:1 on those three backgrounds. Deliberately NOT a
   change to --cw-gold-deep itself — that token also drives --cw-focus, borders
   and icon fills, which are non-text and already pass at 3:1 (base.css §kicker
   note explains why darkening the token globally is the wrong move). */
.cw-why-eyebrow { color: var(--cw-why-label-gold); }

.cw-why-title {
  max-width: 65rem;
  margin-top: 1.375rem !important;
  color: var(--cw-navy-deep);
  font-family: var(--cw-font-serif);
  font-size: clamp(3.25rem, 6.4vw, 5.5rem);
  font-weight: 400;
  line-height: 0.99;
  letter-spacing: -0.045em;
}

.cw-why-title__line { display: block; }
.cw-why-title__keep { white-space: nowrap; }
.cw-why-break { display: none; }

.cw-why-hero__meta {
  display: grid;
  gap: 1.125rem;
  width: min(48rem, 100%);
  margin-top: 2.5rem;
}

.cw-why-standfirst {
  color: var(--cw-why-body);
  font-family: var(--cw-font-serif);
  font-size: clamp(1.5625rem, 2.2vw, 2rem);
  line-height: 1.38;
}

.cw-why-photo {
  position: relative;
  overflow: hidden;
  background: var(--cw-navy);
}

.cw-why-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cw-why-photo__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.25rem;
  padding: 1.5rem;
  background:
    linear-gradient(180deg, rgba(11, 29, 51, 0.05), rgba(11, 29, 51, 0.58)),
    radial-gradient(circle at 72% 30%, rgba(216, 184, 95, 0.58), transparent 21%),
    linear-gradient(125deg, #70888d 0 27%, #b5ad8c 27% 49%, #617667 49% 70%, #18344c 70% 100%);
  color: var(--cw-cream-light);
  text-align: right;
}

.cw-why-photo__placeholder span {
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.cw-why-photo__placeholder small {
  color: rgba(255, 250, 241, 0.78);
  font-size: 0.8125rem;
}

.cw-why-photo--hero {
  width: 100%;
  height: clamp(22rem, 42vw, 37.5rem);
}

.cw-why-photo--hero img { object-position: center 68%; }

.cw-why-opening {
  padding-block: clamp(6rem, 10vw, 9.5rem);
  background: var(--cw-why-white);
}

.cw-why-opening__grid {
  display: grid;
  grid-template-columns: 11.25rem minmax(0, 45rem) minmax(7.5rem, 1fr);
  gap: clamp(2rem, 5vw, 4.75rem);
  align-items: start;
}

.cw-why-marker {
  display: flex;
  gap: 0.75rem;
  padding-top: 0.5625rem;
  color: var(--cw-why-label-gold);
  white-space: nowrap;
}

.cw-why-marker span:first-child { font-variant-numeric: tabular-nums; }

.cw-why-reading h2,
.cw-why-section-head h2,
.cw-why-change__copy h2,
.cw-why-publications__head h2 {
  color: var(--cw-navy-deep);
  font-family: var(--cw-font-serif);
  font-size: clamp(2.625rem, 4.6vw, 3.875rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

@media (min-width: 45.01rem) {
  .cw-why-break { display: initial; }
}

.cw-why-reading .cw-why-lead {
  margin-top: 2.125rem;
  color: var(--cw-ink);
  font-family: var(--cw-font-serif);
  font-size: 1.6875rem;
  line-height: 1.48;
}

.cw-why-reading > p:not(.cw-why-lead),
.cw-why-change__copy > p:not(.cw-why-marker):not(.cw-why-change__statement) {
  margin-top: 2rem;
  color: var(--cw-why-body);
  font-size: 1.1875rem;
  line-height: 1.75;
}

.cw-why-reading > p + p,
.cw-why-change__copy > p + p { margin-top: 1.5rem; }

.cw-why-pullquote {
  margin-top: 6.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--cw-gold);
  color: var(--cw-navy);
  font-family: var(--cw-font-serif);
  font-size: 1.5rem;
  line-height: 1.42;
}

.cw-why-photo--inset {
  grid-column: 2 / 4;
  height: clamp(18.75rem, 34vw, 31.25rem);
  margin-top: 4.5rem;
}

/* Padding raised from clamp(4rem, 6.5vw, 5.75rem): this was a compact band
   when the diagnosis was one bridge sentence and six labels. It now carries
   the mechanism, the three separations and the compounding argument, so it
   takes the same rhythm as the other full sections. */
.cw-why-domains {
  padding-block: clamp(6rem, 9vw, 8.5rem);
  background: var(--cw-why-paper-deep);
  scroll-margin-top: calc(var(--cw-header-height) + 1rem);
}

.cw-why-domains__intro {
  display: grid;
  grid-template-columns: 11.25rem minmax(0, 45rem) minmax(7.5rem, 1fr);
  gap: clamp(2rem, 5vw, 4.75rem);
  align-items: baseline;
  margin-bottom: 2rem;
}

.cw-why-domains__intro .cw-why-marker {
  flex: 0 0 auto;
  padding-top: 0;
}

.cw-why-domains__intro > p:last-child {
  grid-column: 2;
  color: var(--cw-why-body);
  font-family: var(--cw-font-serif);
  font-size: 1.375rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.cw-why-domain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-top: 3.25rem;
  border: 1px solid rgba(16, 41, 69, 0.19);
  border-radius: 0.625rem;
  background: rgba(16, 41, 69, 0.19);
}

.cw-why-domain-grid li {
  min-height: 7.25rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.375rem 1.5rem;
  background: rgba(255, 253, 248, 0.78);
  color: var(--cw-navy);
  font-size: 1.0625rem;
  line-height: 1.45;
}

.cw-why-domain-grid .cw-why-domain-grid__thesis {
  grid-column: 1 / -1;
  min-height: 0;
  justify-content: flex-start;
  padding: 1.375rem 1.5rem;
  background: var(--cw-gold-soft);
  color: var(--cw-gold-ink);
  font-family: var(--cw-font-serif);
  font-size: 1.625rem;
  line-height: 1.4;
  text-wrap: pretty;
}

.cw-why-domain-grid .cw-icon {
  flex: 0 0 1.5rem;
  color: var(--cw-gold-deep);
}

/* ── Restored argument: reading columns in the non-grid sections ───────────
   .cw-why-reading carries its own type scale (19px/1.75) but relies on a
   parent grid for width. The diagnosis, weaknesses and architecture sections
   are plain containers, so these give the restored prose the same measure the
   premise column already has, offset to sit under the section's content
   column rather than the marker gutter. */
.cw-why-domains__reading,
.cw-why-weaknesses__summary,
.cw-why-weaknesses__fourth,
.cw-why-architecture__reading,
.cw-why-limits__body {
  width: min(45rem, 100%);
  margin-left: calc(11.25rem + clamp(2rem, 5vw, 4.75rem));
}

.cw-why-domains__reading { margin-block: 2.25rem; }
.cw-why-weaknesses__summary { margin-top: 3.25rem; }
.cw-why-weaknesses__fourth { margin-top: 2rem; }
.cw-why-architecture__reading { margin-top: 2.5rem; }

/* Specificity must beat `.cw-why-reading > p:not(.cw-why-lead)` (0,2,1), which
   sets --cw-why-body — a light-background ink that measures only 2.15:1 on this
   navy band. Matching that selector's shape takes this to (0,3,1) so it wins
   regardless of source order. */
.cw-why-architecture .cw-why-reading > p:not(.cw-why-lead) {
  color: rgba(255, 253, 248, 0.78);
}

/* ── The three separations ─────────────────────────────────────────────────
   Mohan's three parallel examples of decision split from consequence. A
   triptych, not a card set: no fills, no shadows, just a gold rule per column
   so it reads as one thought in three parts. This is the concrete grounding
   the diagnosis was asserting without ever showing. */
.cw-why-separations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  overflow: hidden;
  margin-block: 3rem;
  border: 1px solid rgba(16, 41, 69, 0.18);
  border-radius: 0.625rem;
  background: rgba(255, 253, 248, 0.48);
}

.cw-why-separations li {
  position: relative;
  min-height: 12rem;
  padding: 2rem 1.875rem 2rem;
  color: var(--cw-navy);
  font-family: var(--cw-font-serif);
  font-size: 1.1875rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.cw-why-separations li + li { margin-top: 0; }

.cw-why-separations li + li { border-left: 1px solid rgba(16, 41, 69, 0.18); }

.cw-why-separations li::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: var(--cw-gold);
}

/* ── The nine Pillars, as a list ───────────────────────────────────────────
   Deliberately NOT the homepage's photographic card grid (the copy map forbids
   a duplicate Pillar catalogue). Roman numeral first, name as the only link,
   then one complete explanatory sentence for fast scanning. */
/* Centred in the section and capped: unconstrained it ran to 138 characters
   per line at 1440. Wider than body prose is right for a reference list you
   scan rather than read straight through, but the full container width was
   too long a sweep. Equal outer space makes the 3x3 one deliberate object. */
.cw-why-pillar-list {
  width: min(62rem, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-top: 3.5rem !important;
  margin-right: auto !important;
  margin-bottom: 0 !important;
  margin-left: auto !important;
  border: 1px solid rgba(229, 189, 96, 0.3);
  border-radius: 0.625rem;
  background: rgba(229, 189, 96, 0.3);
}

.cw-why-pillar-list li {
  display: block;
  min-height: 15rem;
  padding: 1.75rem;
  background: rgba(18, 43, 72, 0.92);
}

.cw-why-pillar-list li + li { margin-top: 0; }

.cw-why-pillar-list__num {
  display: block;
  margin-bottom: 1rem;
  color: var(--cw-gold-soft);
  font-family: var(--cw-font-sans);
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  line-height: 1.75;
}

.cw-why-pillar-list p {
  color: rgba(255, 253, 248, 0.78);
  font-size: 1.0625rem;
  line-height: 1.62;
  text-wrap: pretty;
}

.cw-why-pillar-list a {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--cw-why-white);
  font-family: var(--cw-font-serif);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
}

.cw-why-pillar-list a:hover,
.cw-why-pillar-list a:focus-visible { color: var(--cw-gold-soft); }

/* ── The three answers ─────────────────────────────────────────────────────
   Mirrors the three weakness rows in §03 one-to-one, so the architecture is
   seen to answer the problems the page just named. */
.cw-why-answers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  margin-top: 2.25rem !important;
}

.cw-why-answers li {
  padding-top: 1.125rem;
  border-top: 1px solid rgba(229, 189, 96, 0.48);
  color: rgba(255, 253, 248, 0.78);
  font-size: 1.0625rem;
  line-height: 1.62;
}

.cw-why-answers strong {
  color: var(--cw-why-white);
  font-weight: 600;
}

/* ── "What this is not" ────────────────────────────────────────────────────
   Mohan's own qualification. Sits on paper between the navy architecture band
   and the publications so the page's most modest claim gets its own air. */
.cw-why-limits {
  padding-block: clamp(4.5rem, 7vw, 6.5rem);
  background: var(--cw-why-paper);
}

/* ── Optional depth (native disclosure) ────────────────────────────────────
   <details>/<summary>: keyboard-operable and screen-reader-announced with no
   JavaScript, so there is nothing to fail under reduced motion. Styled as a
   quiet editorial rule, not an FAQ accordion. */
.cw-why-aside-block {
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
  background: var(--cw-why-white);
}

.cw-why-more {
  width: min(45rem, 100%);
  margin-left: calc(11.25rem + clamp(2rem, 5vw, 4.75rem));
  border-top: 1px solid var(--cw-why-rule);
  border-bottom: 1px solid var(--cw-why-rule);
}

.cw-why-limits .cw-why-more { margin-top: 2.75rem; }

.cw-why-more > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  min-height: 2.75rem; /* 44px pointer target */
  padding-block: 1.0625rem;
  cursor: pointer;
  list-style: none;
}

.cw-why-more > summary::-webkit-details-marker { display: none; }

.cw-why-more > summary:focus-visible {
  outline: 3px solid var(--cw-focus, #9f7b2b);
  outline-offset: 3px;
}

.cw-why-more__label {
  position: relative;
  padding-left: 1.5rem;
  color: var(--cw-navy);
  font-family: var(--cw-font-serif);
  font-size: 1.25rem;
  line-height: 1.35;
}

/* Chevron drawn in CSS so no icon dependency; rotates on open. */
.cw-why-more__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--cw-why-label-gold);
  border-bottom: 2px solid var(--cw-why-label-gold);
  transform: rotate(-45deg);
  transform-origin: 60% 60%;
}

.cw-why-more[open] .cw-why-more__label::before { transform: rotate(45deg); }

.cw-why-more__hint {
  color: var(--cw-why-body);
  font-family: var(--cw-font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.cw-why-more__body { padding-bottom: 2.25rem; }

.cw-why-more__body > p {
  color: var(--cw-why-body);
  font-size: 1.125rem;
  line-height: 1.72;
}

.cw-why-more__body > p + p { margin-top: 1.375rem; }

.cw-why-more__turn {
  color: var(--cw-navy) !important;
  font-family: var(--cw-font-serif);
  font-size: 1.3125rem !important;
  line-height: 1.45 !important;
}

@media (prefers-reduced-motion: no-preference) {
  .cw-why-more__label::before { transition: transform 180ms ease; }
}

.cw-why-weaknesses {
  padding-block: clamp(6.5rem, 10vw, 9.5rem);
  background: var(--cw-why-white);
  scroll-margin-top: calc(var(--cw-header-height) + 1rem);
}

.cw-why-section-head {
  display: grid;
  grid-template-columns: 11.25rem minmax(0, 47.5rem) minmax(7.5rem, 1fr);
  gap: clamp(2rem, 5vw, 4.75rem);
  align-items: start;
}

.cw-why-section-head > div { grid-column: 2; }

.cw-why-section-head > div > p {
  margin-top: 1.875rem;
  color: var(--cw-why-body);
  font-size: 1.25rem;
  line-height: 1.7;
}

.cw-why-weakness-list {
  margin-top: 4.75rem;
  border-top: 1px solid var(--cw-why-rule);
}

.cw-why-weakness {
  display: grid;
  grid-template-columns: 4.5rem minmax(16.25rem, 22.5rem) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.875rem);
  padding-block: 2.75rem 3rem;
  border-bottom: 1px solid var(--cw-why-rule);
}

.cw-why-weakness__number { color: var(--cw-why-label-gold); }

.cw-why-weakness h3 {
  color: var(--cw-navy);
  font-family: var(--cw-font-serif);
  font-size: 1.8125rem;
  font-weight: 400;
  line-height: 1.22;
  text-wrap: balance;
}

.cw-why-weakness > p:last-child {
  color: var(--cw-why-body);
  font-size: 1.125rem;
  line-height: 1.72;
}

.cw-why-weaknesses__conclusion {
  width: min(56.25rem, 100%);
  margin: 4rem 0 0 auto !important;
  padding-left: 1.875rem;
  border-left: 3px solid var(--cw-gold);
  color: var(--cw-navy);
  font-family: var(--cw-font-serif);
  font-size: clamp(1.8125rem, 3vw, 2.5rem);
  line-height: 1.33;
}

.cw-why-architecture {
  padding-block: clamp(6.5rem, 10vw, 9.25rem);
  background: var(--cw-navy-deep);
  color: var(--cw-why-white);
  scroll-margin-top: calc(var(--cw-header-height) + 1rem);
}

.cw-why-architecture .cw-why-marker { color: var(--cw-gold-soft); }
.cw-why-architecture .cw-why-section-head h2 { color: var(--cw-why-white); }

.cw-why-architecture .cw-why-section-head > div > p {
  color: rgba(255, 253, 248, 0.76);
}

.cw-why-loop {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  margin-top: 5.25rem !important;
}

.cw-why-loop::before {
  content: "";
  position: absolute;
  top: 0.8125rem;
  left: 0.8125rem;
  right: 0.8125rem;
  height: 1px;
  background: rgba(229, 189, 96, 0.48);
}

.cw-why-loop li {
  position: relative;
  padding-top: 3.25rem;
}

.cw-why-loop li::before {
  content: "";
  position: absolute;
  top: 0.4375rem;
  left: 0.375rem;
  width: 0.8125rem;
  height: 0.8125rem;
  border: 1px solid var(--cw-gold-soft);
  border-radius: 50%;
  background: var(--cw-navy-deep);
}

.cw-why-loop h3 {
  color: var(--cw-why-white);
  font-family: var(--cw-font-serif);
  font-size: 1.5625rem;
  font-weight: 400;
  line-height: 1.2;
}

.cw-why-loop p {
  margin-top: 0.8125rem;
  color: rgba(255, 253, 248, 0.72);
  font-size: 1rem;
  line-height: 1.55;
}

.cw-why-loop__return {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: min(62rem, 100%);
  margin: 4.5rem auto 0 !important;
  color: var(--cw-gold-soft);
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.cw-why-loop__return::before,
.cw-why-loop__return::after {
  content: "";
  flex: 1 1 5rem;
  max-width: 7rem;
  height: 1px;
  background: var(--cw-gold-soft);
}

.cw-why-link {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  gap: 0.8125rem;
  margin-top: 2.625rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
}

.cw-why-link:hover { color: var(--cw-gold-deep); }
.cw-why-link:focus-visible { outline: 3px solid var(--cw-gold-soft); outline-offset: 4px; }
.cw-why-link--dark { color: var(--cw-gold-soft); }
.cw-why-link--dark:hover { color: var(--cw-cream-light); }

/*
 * Primary and secondary on one row. The secondary keeps .cw-why-link, whose
 * 2.625rem top margin would otherwise drop it below the button's baseline.
 */
.cw-why-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.75rem;
  width: min(62rem, 100%);
  margin: 2.625rem auto 0;
}

.cw-why-actions__intro {
  width: min(62rem, 100%);
  margin: 2.625rem auto -1.25rem;
  color: rgba(247, 241, 231, 0.78);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-align: center;
}

.cw-why-actions .cw-why-link {
  margin-top: 0;
}

.cw-why-actions .cw-link-arrow {
  flex: 0 0 auto;
}

/* Hero instance sits under the standfirst, clear of the meta block. */
.cw-why-hero__cta {
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  margin-top: 2rem;
}

.cw-why-change {
  padding-block: clamp(6.5rem, 10vw, 9.5rem);
  background: var(--cw-why-white);
  scroll-margin-top: calc(var(--cw-header-height) + 1rem);
}

.cw-why-change__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(23.75rem, 0.92fr);
  gap: clamp(3.5rem, 7vw, 6.5rem);
  align-items: center;
}

.cw-why-photo--change {
  min-height: 38.125rem;
  aspect-ratio: 4 / 5;
}

.cw-why-change__copy .cw-why-marker {
  margin-bottom: 1.625rem;
  padding-top: 0;
}

.cw-why-change__statement {
  margin-top: 2.375rem !important;
  padding-top: 1.75rem;
  border-top: 2px solid var(--cw-gold);
  color: var(--cw-navy);
  font-family: var(--cw-font-serif);
  font-size: 1.75rem;
  line-height: 1.4;
}

.cw-why-publications {
  padding-block: clamp(6rem, 9vw, 8.5rem);
  background: var(--cw-why-paper-deep);
  scroll-margin-top: calc(var(--cw-header-height) + 1rem);
}

.cw-why-publications__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22.5rem, 35rem);
  gap: 4rem;
  align-items: end;
}

.cw-why-publications__head p {
  color: var(--cw-why-body);
  font-size: 1.1875rem;
  line-height: 1.65;
}

.cw-why-book-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 3.625rem;
}

.cw-why-book {
  display: grid;
  grid-template-columns: 11.25rem minmax(0, 1fr);
  gap: 2.125rem;
  min-height: 21.25rem;
  padding: 2.125rem;
  border-radius: var(--cw-radius-md);
  background: var(--cw-navy);
  color: var(--cw-why-white);
}

.cw-why-book__cover {
  width: 100%;
  align-self: center;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid rgba(229, 189, 96, 0.62);
  box-shadow: 0 1rem 2.125rem rgba(0, 0, 0, 0.2);
}

.cw-why-book__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.cw-why-book__kicker { color: var(--cw-gold-soft); }

.cw-why-book h3 {
  margin-top: 1rem;
  color: var(--cw-why-white);
  font-family: var(--cw-font-serif);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.16;
}

.cw-why-book__copy > p:not(.cw-why-book__kicker) {
  margin-top: 1rem;
  color: rgba(255, 253, 248, 0.75);
  font-size: 1rem;
  line-height: 1.6;
}

/*
 * The published sub-title, set as part of the title rather than as body copy:
 * italic serif, tight under the h3, so "Commons Community / A Field Guide to
 * Commons World" reads as one naming unit and the description below stays
 * clearly separate. Specificity (0,3,1) has to beat the (0,2,1) rule above,
 * which would otherwise impose its 1rem top margin and body colour.
 */
.cw-why-book__copy > p.cw-why-book__subtitle {
  margin-top: 0.375rem;
  color: rgba(255, 253, 248, 0.85);
  font-family: var(--cw-font-serif);
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.35;
}

.cw-why-link--book {
  margin-top: 1.5rem;
  color: var(--cw-gold-soft);
}

.cw-why-link--book:hover { color: var(--cw-cream-light); }

@media (max-width: 61.25rem) {
  .cw-why-opening__grid,
  .cw-why-section-head {
    grid-template-columns: 7.5rem minmax(0, 43.75rem);
  }

  .cw-why-domains__intro {
    grid-template-columns: 7.5rem minmax(0, 43.75rem);
  }

  .cw-why-pullquote {
    grid-column: 2;
    margin-top: 1rem;
  }

  .cw-why-photo--inset { grid-column: 2; }

  .cw-why-book {
    grid-template-columns: 8.75rem minmax(0, 1fr);
    gap: 1.625rem;
  }

  /* Restored-argument blocks follow the narrowed marker gutter. */
  .cw-why-domains__reading,
  .cw-why-weaknesses__summary,
  .cw-why-weaknesses__fourth,
  .cw-why-architecture__reading,
  .cw-why-limits__body,
  .cw-why-more {
    margin-left: calc(7.5rem + clamp(2rem, 5vw, 4.75rem)) !important;
  }

  .cw-why-pillar-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 45rem) {
  /* One reading column: drop the marker offset and unstack the triads. */
  .cw-why-domains__reading,
  .cw-why-weaknesses__summary,
  .cw-why-weaknesses__fourth,
  .cw-why-architecture__reading,
  .cw-why-limits__body,
  .cw-why-more {
    width: 100%;
    margin-left: 0 !important;
  }

  .cw-why-separations,
  .cw-why-answers {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .cw-why-separations { gap: 0; }

  .cw-why-separations li {
    min-height: 0;
    padding: 1.625rem 1.5rem;
    font-size: 1.125rem;
  }

  .cw-why-separations li + li {
    border-top: 1px solid rgba(16, 41, 69, 0.18);
    border-left: 0;
  }

  .cw-why-pillar-list { grid-template-columns: minmax(0, 1fr); }
  .cw-why-pillar-list li { min-height: 0; padding: 1.5rem; }

  .cw-why-more__label { font-size: 1.125rem; }
  .cw-why-more__body > p { font-size: 1.125rem; }
  .cw-why-more__turn { font-size: 1.1875rem !important; }

  .cw-why-hero {
    padding-block: 4rem 2.5rem;
  }

  .cw-why-title {
    margin-top: 1.125rem !important;
    font-size: clamp(2.625rem, 13.5vw, 3.625rem);
    line-height: 1.01;
  }

  .cw-why-hero__meta {
    gap: 1.125rem;
    margin-top: 2rem;
  }

  .cw-why-standfirst {
    font-size: 1.5rem;
    line-height: 1.42;
  }

  .cw-why-photo--hero { height: 22.5rem; }

  .cw-why-opening,
  .cw-why-weaknesses,
  .cw-why-architecture,
  .cw-why-change,
  .cw-why-publications {
    padding-block: 5rem;
  }

  .cw-why-domains { padding-block: 3.5rem; }

  .cw-why-opening__grid,
  .cw-why-section-head,
  .cw-why-domains__intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.125rem;
  }

  .cw-why-section-head > div { grid-column: 1; }

  .cw-why-marker {
    padding-top: 0;
    font-size: 0.875rem;
  }

  .cw-why-reading h2,
  .cw-why-section-head h2,
  .cw-why-change__copy h2,
  .cw-why-publications__head h2 {
    font-size: 2.375rem;
  }

  .cw-why-reading .cw-why-lead {
    margin-top: 1.75rem;
    font-size: 1.5rem;
  }

  .cw-why-reading > p:not(.cw-why-lead),
  .cw-why-change__copy > p:not(.cw-why-marker):not(.cw-why-change__statement) {
    font-size: 1.125rem;
    line-height: 1.72;
  }

  .cw-why-pullquote {
    grid-column: 1;
    margin-top: 1.125rem;
    font-size: 1.4375rem;
  }

  .cw-why-photo--inset {
    grid-column: 1;
    height: 19.375rem;
    margin-top: 3rem;
  }

  .cw-why-domains__intro { margin-bottom: 1.5rem; }

  .cw-why-domains__intro > p:last-child {
    grid-column: 1;
    margin-top: 0.5rem;
    font-size: 1.25rem;
  }

  .cw-why-domain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 2.5rem;
  }

  .cw-why-domain-grid .cw-why-domain-grid__thesis {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 8rem;
    padding: 1.5rem;
    font-size: 1.4375rem;
  }

  .cw-why-domain-grid li {
    min-height: 7rem;
    align-items: flex-start;
    padding: 1.125rem;
    font-size: 1rem;
  }

  .cw-why-section-head > div > p {
    margin-top: 1.5rem;
    font-size: 1.1875rem;
  }

  .cw-why-weakness-list { margin-top: 3.375rem; }

  .cw-why-weakness {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem 1.125rem;
    padding-block: 2.125rem 2.375rem;
  }

  .cw-why-weakness__number {
    grid-column: 1;
    grid-row: 1;
  }

  .cw-why-weakness h3 {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.6875rem;
  }

  .cw-why-weakness > p:last-child {
    grid-column: 2;
    grid-row: 2;
    font-size: 1.125rem;
  }

  .cw-why-weaknesses__conclusion {
    margin-top: 3.125rem !important;
    padding-left: 1.375rem;
    font-size: 1.8125rem;
  }

  .cw-why-loop {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 3.625rem !important;
  }

  .cw-why-loop::before {
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0.5rem;
    right: auto;
    width: 1px;
    height: auto;
  }

  .cw-why-loop li {
    min-height: 7.5rem;
    padding: 0 0 2.125rem 3rem;
  }

  .cw-why-loop li::before {
    top: 0.125rem;
    left: 0.0625rem;
  }

  .cw-why-loop h3 { font-size: 1.5rem; }

  .cw-why-loop__return {
    gap: 0.875rem;
    margin-top: 2.5rem !important;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
  }

  .cw-why-loop__return::before,
  .cw-why-loop__return::after {
    flex-basis: 1.5rem;
    max-width: 2.625rem;
  }

  .cw-why-change__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }

  .cw-why-photo--change { min-height: 26.25rem; }
  .cw-why-change__statement { font-size: 1.625rem; }

  .cw-why-publications__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .cw-why-publications__head p { font-size: 1.125rem; }

  .cw-why-book-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.125rem;
    margin-top: 2.75rem;
  }

  .cw-why-book {
    grid-template-columns: 8.125rem minmax(0, 1fr);
    min-height: 0;
    padding: 1.625rem;
  }

  .cw-why-book h3 { font-size: 1.8125rem; }
}

@media (max-width: 27.5rem) {
  .cw-why-title { font-size: clamp(2.4375rem, 12.5vw, 3.25rem); }

  .cw-why-domain-grid .cw-why-domain-grid__thesis {
    min-height: 8.875rem;
    padding: 1.4375rem;
  }

  .cw-why-domain-grid li {
    min-height: 5.875rem;
    font-size: 0.875rem;
  }

  .cw-why-book { grid-template-columns: minmax(0, 1fr); }
  .cw-why-book__cover { width: 8.625rem; }
}

@media print {
  .cw-why-progress,
  .cw-why-photo__placeholder { display: none; }

  .cw-why-photo.is-placeholder { display: none; }
  .cw-why-architecture { background: #fff; color: #000; }
  .cw-why-architecture .cw-why-section-head h2,
  .cw-why-architecture .cw-why-loop h3 { color: #000; }
}