/* ======================================================================================================
   File:     mamadex-contribute.css
   Path:     assets/css/mamadex/mamadex-contribute.css
   Author:   Buktika Webdesk (Binka)
   Owner:    Buktika — Binka
   Purpose:  Page-scoped styles for mamadex-contribute.html (MamaDEX Door 3 —
             "I want to help"). Loaded AFTER mamadex.css so this file's
             .page-mamadex-contribute rules win on tie specificity against
             mamadex.css's shared .page-mamadex rules (same technique every
             other MamaDEX page CSS file uses — see mamadex-join.css §1).
             Reuses existing mamadex.css/global.css components wherever
             possible (.sdx-card-section, .sdx-cta-band, .sdx-btn-primary,
             hero system, page-token set, the section-heading lockup
             pattern already locked for mamadex-join.html/mamadex-
             restoration-evidence.html) — only page-scoped additions below
             for the things this page needs that no existing component
             covers: the two-path "where are you starting" module and the
             six-row text-led contribution-category list.
   Type:     CSS
   License:  © Buktika, 2026. All rights reserved.
   Colour Map:    v3.9.0
   Design System: v4.0.0

   ChangeLog:
     v2.6.0 (2026-07-23): TWO WAYS TO CONTRIBUTE — owner instruction (visual
             defect pass: the funding-vs-goods/services distinction existed
             in wording only and was not visible to the visitor). Added
             .contribute-lanes-grid/.contribute-lane-card/.contribute-lane-
             boundary/.contribute-lane-examples for the new prominent
             "Two ways to contribute" section in mamadex-contribute.html —
             deliberately the SAME card geometry as .contribute-start-grid/
             .start-card below (border, radius, shadow, page-primary accent
             stripe), reused rather than redeclared with different values,
             so the two two-card sections on this page read as one family.
             Added the matching @media (max-width: 480px) padding tweak for
             .contribute-lane-card alongside the existing .start-card one.
             No existing selector's values changed.
     v2.5.0 (2026-07-18): MOBILE ROUTE DENSITY FIX. Once route rows stack,
             their copy no longer retains the desktop 18rem flex basis.
             Each row now collapses to its actual text and button height.
     v2.4.0 (2026-07-13): REJECTED-BUILD CORRECTION — owner instruction.
             The v2.3.0 pass below was rejected on render: the eyebrow-
             to-title gap had not visibly changed, and all four route
             buttons still rendered violet instead of their destination
             pillar colours. Two root-cause fixes, both explained in full
             at their own rule blocks:
             (a) Eyebrow/h2 spacing: the fix for this lives in mamadex.css
             v5.13.0, not in this file — this file's own eyebrow/h2 rules
             were already removed in v2.3.0 below and stay removed; the
             shared rule's SELECTOR needed higher specificity, which is a
             mamadex.css-only change. See that file's own changelog.
             (b) Route buttons (§9b, full rewrite): root cause was a
             specificity trap — .sdx-btn-primary's :link/:visited colour
             rule (0,2,0) beat this file's single-class .contribute-
             route-button--reporters/--mamadex modifiers (0,1,0), so the
             modifier backgrounds never won and every button kept
             rendering .sdx-btn-primary's own violet fill. Fixed by
             removing sdx-btn-primary from these buttons entirely and
             defining a page-scoped .btn-pillar/.btn-pillar-reporters/
             .btn-pillar-mamadex rule set instead (reusing the existing
             site-wide .btn-pillar pattern and its exact Reporters/
             MamaDEX gradient values from living-tower.css, expressed as
             tokens) — every one of these new selectors is 0,2,0+ with no
             competing pseudo-class rule to lose to. Viridians keeps its
             own dedicated .contribute-route-button--viridians modifier
             (no Living Tower MamaDEX-Viridians pillar button exists to
             reuse), values unchanged from v2.3.0. HTML class attributes
             updated to match — see mamadex-contribute.html v2.4.0.
     v2.3.0 (2026-07-13): LIVING TOWER VISUAL NORMALISATION — owner
             instruction (narrow visual normalisation pass, comparator:
             /living-tower/living-tower.html). Six changes:
             (a) §3 .mamadex-contribute-section .eyebrow and the h2
             margin-bottom:1.5rem rule REMOVED — both now redundant, set
             once in the shared mamadex.css §1b rule at Living
             Tower-matched values (see that file's v5.12.0 changelog).
             (b) §3 .mamadex-contribute-section > .intro broadened to a
             descendant selector (.mamadex-contribute-section .intro, no
             direct-child restriction) so it still matches the two intro
             paragraphs now nested inside .contribute-media-row (§2, §7) —
             this selector break was the root cause of §2's opening copy
             reading oversized (it was silently falling through to the
             generic .intro rule's --lead hero-intro sizing, 19-24px,
             instead of this page's own 1.0625rem value). Size/line-height
             also updated to match Living Tower's own .section-intro
             exactly: 1.125rem / 1.7 (was 1.0625rem / 1.6); max-width
             changed from 65ch to 52rem to match the canonical global.css
             .section-intro width.
             (c) §4b .contribute-media-row: align-items changed center →
             start (image no longer vertically centred beside a taller
             text column); image column resized from a capped 22rem to a
             true minmax(26rem,30rem) — "a real, meaningful size, not a
             thumbnail" per instruction. New .contribute-media-row--reverse
             variant (image column first) for §7. New text-align:start
             override on .contribute-media-row .intro/.mamadex-contribute-
             note (both default to center, wrong for prose beside an
             image). .contribute-figure--wide widened 44rem → 50rem with
             margin on both sides (was top-only) — it now sits between the
             section intro and the category list, not after the list.
             (d) §5 .category-row h3 font-size 1.0625rem → var(--h3)
             (1.25rem) — canonical card-title size, matching .start-card h3
             elsewhere on this same page.
             (e) NEW §9b: .contribute-route-button--reporters/--mamadex/
             --viridians — the four "Some offers follow another route"
             buttons are filled pillar-colour buttons now (HTML base class
             swapped sdx-btn-secondary → sdx-btn-primary), each reusing its
             destination's own canonical page gradient via existing
             global.css colour tokens (no hardcoded colours, no Reporters/
             Viridians stylesheet loaded). Selectors touching these buttons
             (§9 .contribute-elsewhere-list li a.*, the mobile full-width
             override) updated from .sdx-btn-secondary to
             .contribute-route-button to match the new HTML class.
             (f) HTML-side changes (mamadex-contribute.html v2.3.0, own
             changelog): skills-shared.webp moved from after the category
             list to between the section intro and the list; maintenance-
             aftercare.webp's paragraph changed from the grey
             .mamadex-contribute-note callout card to plain .intro prose
             (the note card made the enlarged image read as a secondary
             illustration); that section's markup order reversed
             (figure-then-paragraph) so mobile stacking shows image before
             prose, matching instruction, with no CSS order property
             needed.
     v2.2.0 (2026-07-13): SUPPORTING IMAGE LAYER — owner instruction. New
             §4b: .contribute-media-row (two-column copy/image row, mobile-
             first with the same min-width: 720px breakpoint convention
             already used by .contribute-start-grid) and .contribute-
             figure(--wide) (the reusable figure shell — canonical
             var(--radius)/var(--border), object-fit: cover, object-
             position: 50% 25% to keep people in frame under responsive
             cropping, NO coloured left accent, NO colour filter, NO dark
             overlay, NO gradient scrim, NO hover lift/animation).
             figcaption styled for reuse though none of the three current
             placements needs one — each image's meaning is carried by its
             section's own existing copy. §5's own comment updated to
             note the one .contribute-figure--wide sits below the category
             list, not inside it — categories remain text-led, confirmed
             by inspection (no rule in §5 references an image). §9 "Some
             offers follow another route" intentionally untouched — stays
             image-free per explicit instruction.
     v2.1.0 (2026-07-13): NARROW VISUAL CORRECTION — owner instruction,
             post-render review of v2.0.0. Two changes:
             (a) §9 "Some offers follow another route" rewritten: the four
             .contribute-elsewhere-list li a links are now real .sdx-btn-
             secondary buttons (class added in the HTML — see mamadex-
             contribute.html v2.1.0). Removed the naked-link colour/
             underline/hover styling entirely (.contribute-elsewhere-list
             li a, li a:hover — deleted). Row layout changed from
             align-items: baseline/flex-wrap to align-items: center/
             justify-content: space-between so the button is vertically
             centred against its row's copy; a new --elsewhere-btn-width
             (12rem) custom property gives all four buttons one shared
             fixed width so they align as a column regardless of copy
             length per row. Row separators (border-bottom) and the "no
             separator after the last row" rule are unchanged in spirit,
             now implemented via padding-block instead of padding-bottom
             so the removed gap-driven baseline spacing doesn't reappear.
             Mobile (§11, max-width:480px): row now stacks with
             align-items: stretch and the button forced to width:100%/
             flex-basis:auto, replacing the old align-items:flex-start
             stack that left the (now-larger) button awkwardly left-
             aligned and auto-width.
             (b) No local change needed for the eyebrow-to-title spacing
             correction — this file's .mamadex-contribute-section .eyebrow
             rule already carried no margin-bottom override, so it now
             automatically inherits the new shared .page-mamadex .eyebrow
             { margin-block-end: 1.5rem } value from mamadex.css v5.11.0
             instead of falling through to global.css's smaller 0.75rem
             default. See mamadex.css's own changelog for the full
             page-family rationale.
     v2.0.0 (2026-07-13): FULL DOOR 3 PAGE BUILD — owner instruction,
             following the accepted architecture audit. Replaces the
             v1.2.0 hero-only file (hero-image binding + crop-position
             adjustment, "smallest possible file" by owner instruction for
             the routing-shell pass) with the full page-scoped stylesheet.
             §1 (page token override) and §2 (hero copy placement/crop) are
             UNCHANGED from v1.2.0 — same locked hero image, same left-
             column placement technique, same background-position values;
             renumbered as §1/§2 below only for document structure, no
             property changed. Everything from §3 onward is new this pass:
             §3) Section-heading lockup — eyebrow logical start-alignment
             in dark MamaDEX violet, h2 rule->intro spacing — the exact
             same treatment locked for mamadex-join.css §2 (v1.7.0-1.9.0)
             and mamadex-restoration-evidence.css §6 (v1.1.0), carried here
             for cross-page consistency across the whole MamaDEX pillar.
             Underline is NOT overridden: this file has never set
             border-bottom-color on any h2, so it inherits global.css's
             canonical border-bottom:2px solid var(--page-primary) — the
             same lighter MamaDEX violet mamadex.html's own "What brings
             you to MamaDEX?" heading uses, confirmed by the same audit
             (no amber, no dark eyebrow-violet on any underline on this
             page).
             §4) Two-path "where are you starting" module — .contribute-
             start-grid/.start-card, deliberately reusing the SAME visual
             language mamadex-restoration-evidence.css's own .path-card
             already established (var(--card) surface, 4px left accent in
             var(--page-primary), var(--card-shadow), equal treatment on
             both cards so neither path reads as the default) — redeclared
             here rather than imported, because that class lives in a
             stylesheet this page does not load; no CTA button inside
             either card (both paths converge on the single final CTA
             band, not two separate application systems).
             §5) Six-row text-led contribution-category list — .contribute-
             categories/.category-row. Deliberately NOT the Door 2
             .capability-grid/.capability-card image-card structure
             (mamadex.css §"Capability cards", ~line 1845 onward): no
             photograph, no card-media aspect-ratio box, no implication of
             six vacant slots waiting to be filled — see the architecture
             audit §19 for the full false-equivalence rationale this
             deliberately avoids. Plain stacked rows with a quiet top
             border between them, matching the site's other "plain-prose
             list" register (mamadex-join.css §3's .join-list family) more
             than its card family.
             §6) Ordered step list — .contribute-steps, native <ol>,
             decimal numbering, no new counter/pseudo-element system.
             §7) Boundary/technical callouts — .mamadex-contribute-note/
             --emphasis, the same quiet-callout-plus-emphasis-variant
             pattern already established by mamadex-join.css §4's
             .mamadex-join-note/--emphasis (redeclared here at the same
             base values for cross-page visual consistency, not imported —
             that class lives in a stylesheet this page does not load).
             §8) Plain checkmarked list — .contribute-list, same technique
             as mamadex-join.css §3's .join-list (redeclared, not
             imported, same reasoning as above).
             §9) Inline "some offers follow another route" rows —
             .contribute-elsewhere-list, small text rows with an inline
             link each, explicitly NOT a second .door-grid/.door-card
             instance (that component is reserved for mamadex.html's own
             four visitor-intention doors).
             §10) Dark mode — only the new rgba()-based surfaces need an
             explicit override; var(--card)/var(--border)/var(--muted)/
             var(--fg)/var(--page-primary) already resolve correctly via
             global.css/themes.css.
             RTL: every new alignment rule in this file uses logical
             properties (text-align:start, margin-inline, padding-inline)
             rather than physical left/right, so no locale-specific
             selector is needed if a future RTL locale is added — matches
             the same requirement already implemented for mamadex-
             join.css's eyebrow rule.
     v1.2.0 (2026-07-12): HERO TYPOGRAPHY AUDIT — no property changed, see
             prior history in git/changelog archive. Confirmed this file
             carried, and still carries, zero .headline/.hero .intro rule
             — both inherit the identical global.css/mamadex.css cascade
             every other MamaDEX subpage uses.
     v1.1.0 (2026-07-12): HERO TEXT-PLACEMENT CORRECTION — left-column
             hero-body placement + recalculated crop-position, superseding
             v1.0.0's crop-only fix. See §2 below for the live values.
     v1.0.0 (2026-07-12): NEW FILE — hero-image binding + crop-position
             adjustment only ("smallest possible file" per owner
             instruction for the Door 3/4 hero-installation pass).
   ====================================================================================================== */

/* ======================================================================================================
   1) Page variable override — locked hero image only. Every other
   .page-mamadex token (colours, --page-bg/-primary/-secondary/-accent/
   -depth) is inherited unchanged from mamadex.css's .page-mamadex block;
   not redeclared here.
   ====================================================================================================== */

.page-mamadex-contribute {
  /* Locked hero image — owner instruction: United Kingdom; a community
     leader and a skilled contributor working together on a practical
     water system beside a community garden. Approved exactly as
     supplied — do not generate, redraw, edit, retouch, crop, replace, or
     recompress this file. Unchanged since v1.0.0. */
  --hero-image:         url("/assets/images/mamadex/mamadex-contribute-hero.webp");
  --hero-vignette-from: rgba(139, 92, 246, 0.20);  /* mama-violet, bottom only, max 0.25 — same value mamadex.css uses */
  --hero-vignette-to:   rgba(139, 92, 246, 0);
}

/* ======================================================================================================
   2) Hero copy placement — unchanged since v1.1.0. LOCKED VISUAL RULE:
   hero text occupies the left-hand field; the two people stay
   unobstructed on the right. Structural technique mirrors mamadex.html's
   own .page-mamadex .hero-body override, positioned at the opposite side
   because this image's principal subjects sit right-of-centre.
   ====================================================================================================== */

@media (min-width: 1024px) {
  .page-mamadex-contribute .hero-body {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: min(30rem, 38vw);
    max-width: 30rem;
    margin: 0;
    text-align: left;
  }
}

@media (max-width: 1023px) {
  .page-mamadex-contribute .hero {
    align-items: end;
  }

  .page-mamadex-contribute .hero-body {
    position: static;
    justify-self: start;
    text-align: left;
    max-width: min(42%, 18rem);
    margin: 0;
    padding-bottom: 0.5rem;
  }
}

.page-mamadex-contribute .hero-wrap {
  background-position: 68% 40%;
}

@media (max-width: 1023px) {
  .page-mamadex-contribute .hero-wrap {
    background-position: 61% 40%;
  }
}

/* ======================================================================================================
   3) Section-heading lockup — shared eyebrow/h2/intro rhythm for every
   .mamadex-contribute-section. Matches the canonical .sdx-card-section >
   h2 underline rule (global.css) — border-bottom-color is intentionally
   NOT overridden anywhere in this file, so it inherits
   border-bottom:2px solid var(--page-primary) (the lighter MamaDEX
   violet, same token mamadex.html's own "What brings you to MamaDEX?"
   heading resolves through). Eyebrow uses logical start-alignment (flips
   right under dir="rtl" with no separate selector) and the darker
   var(--page-secondary) MamaDEX violet, matching the lockup already
   locked for mamadex-join.html/mamadex-restoration-evidence.html.
   ====================================================================================================== */

/* v2.3.0 UPDATE — LIVING TOWER TYPOGRAPHY NORMALISATION, owner instruction.
   .mamadex-contribute-section .eyebrow and .mamadex-contribute-section h2
   (margin-bottom only) are REMOVED here — both are now redundant. The
   exact Living Tower-computed eyebrow typography and the matching h2
   font-size/margin are set ONCE in the shared mamadex.css §1b
   (.page-mamadex .eyebrow / .page-mamadex .sdx-card-section h2) and apply
   here automatically via the .page-mamadex body class. See mamadex.css's
   own changelog (v5.12.0) for the exact values and Living Tower reference.

   .intro selector broadened from a direct-child combinator (>) to a
   descendant combinator so it still matches the two intro paragraphs now
   nested inside .contribute-media-row (§2 and §7 — see that section's own
   comment). font-size/line-height/max-width updated to match Living
   Tower's own .section-intro exactly (1.125rem / 1.7 / matching the
   canonical global.css .section-intro width) — the previous 1.0625rem/
   1.6/65ch values were a page-local approximation that no longer needs to
   exist now that the eyebrow/h2 rhythm above it is correctly sized. */
.mamadex-contribute-section .intro {
  font-size: 1.125rem;
  line-height: 1.7;
  text-align: center;
  max-width: 52rem;
  margin: 0 auto 1.5rem;
  color: var(--muted);
}

.mamadex-contribute-section .intro:last-child {
  margin-bottom: 0;
}

/* ======================================================================================================
   3b) Two ways to contribute — v2.6.0 owner instruction (visual defect
   pass: the funding-vs-goods/services distinction existed in wording only
   and was not visible). Deliberately the SAME card geometry/edge treatment
   as .contribute-start-grid/.start-card directly below (border, radius,
   shadow, page-primary accent stripe) so the two prominent two-card
   sections on this page read as one visual family, not two different
   systems. .contribute-lane-boundary is a distinct, quieter line beneath
   each card's descriptive body so the "does not grant..." boundary
   statement is never mistaken for ordinary body copy. .contribute-lane-
   examples nests the existing .contribute-categories/.category-row rows
   (unchanged, redeclared nowhere) directly inside the card.
   ====================================================================================================== */

.contribute-lanes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 1.5rem auto 0;
}

@media (min-width: 720px) {
  .contribute-lanes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contribute-lane-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 1.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--page-primary);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}

.contribute-lane-card h3 {
  font-family: var(--headline-font);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
}

.contribute-lane-card > p {
  margin: 0;
  font-size: var(--body);
  line-height: 1.55;
  color: var(--muted);
}

.contribute-lane-boundary {
  margin: 0;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.5;
}

.contribute-lane-examples {
  width: 100%;
  margin-top: 0.5rem;
  max-width: none;
}

/* ======================================================================================================
   4) Where are you starting? — two equal, parallel path cards. Same
   visual language as mamadex-restoration-evidence.css's own .path-card
   (redeclared, not imported — see file header). No button inside either
   card: both paths converge on the single final CTA band.
   ====================================================================================================== */

.contribute-start-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 720px) {
  .contribute-start-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.start-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 1.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--page-primary);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}

.start-card-kicker {
  display: block;
  font-family: var(--text-font);
  font-size: var(--small);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--page-primary);
}

.start-card h3 {
  font-family: var(--headline-font);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
}

.start-card p {
  margin: 0;
  font-size: var(--body);
  line-height: 1.55;
  color: var(--muted);
}

/* ======================================================================================================
   4b) Supporting image layer — v2.2.0 owner instruction, RESIZED v2.3.0
   (narrow visual normalisation pass). Exactly three restrained documentary
   photographs, reusing ONE figure treatment across all three placements so
   nothing here reads as decorative or promotional. Deliberately restrained:
   canonical card radius/border only, no coloured accent border (unlike
   .start-card's border-inline-start above — that 4px page-primary accent
   is intentionally NOT reused here), no colour filter, no dark overlay, no
   gradient scrim, no hover lift/animation of any kind (these are not
   interactive elements). The source images are already exactly 4:3
   (1448×1086) and the figure box is sized to render at 4:3 too, so
   object-fit: cover performs no actual cropping — both people and, where
   present, the water system stay fully in frame at every viewport width.

   .contribute-media-row: the two-column "copy ~55% / image ~45%" layout
   used at §2 Local leadership first. align-items: start (was: center) —
   v2.3.0 correction: the image must not be vertically centred beside a
   taller text column, its top must align with the start of the body copy.
   The image column is a capped minmax(26rem,30rem) — a real, meaningful
   size, not a small thumbnail — while the copy column takes the remaining
   space. Mobile-first: single column below 720px (copy first in the
   markup, image follows at full width, matching this file's own
   established breakpoint convention — see .contribute-start-grid above).

   .contribute-media-row--reverse: §7 Technical help continues after
   installation. Same column sizing, mirrored — image column first
   (~44-46% / capped minmax(26rem,30rem), same visual weight as §2's
   image), copy column second, flexible. The HTML markup order for this
   section is figure-then-paragraph (opposite of §2's paragraph-then-
   figure), so on mobile (single column, natural DOM order) the image
   correctly appears directly after the heading and before the prose —
   no CSS order property needed, see that section's own HTML comment.

   .contribute-media-row .intro/.mamadex-contribute-note: reset to
   text-align:start (both are text-align:center by default, correct for
   full-width single-column intros under a centred h2, but wrong for prose
   running beside an image in a two-column row) and margin:0 (the
   standalone spacing rules on .intro/.mamadex-contribute-note assume a
   full-width single-column context).

   .contribute-figure(--wide): the reusable figure shell itself.
   --wide is the single full-width-but-capped documentary figure placed
   at §4, between the section introduction and the category list (not one
   image per category, not a card grid — see that section's own comment).

   figcaption is styled here for completeness/reuse even though none of
   the three current placements uses one — each image's meaning is
   already carried by its section's own copy, so no caption text was
   added (captions only where they contribute meaning, per instruction).
   ====================================================================================================== */

.contribute-media-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: start;
  margin-top: 1.5rem;
}

@media (min-width: 720px) {
  .contribute-media-row {
    grid-template-columns: minmax(0, 1fr) minmax(26rem, 30rem);
  }

  .contribute-media-row--reverse {
    grid-template-columns: minmax(26rem, 30rem) minmax(0, 1fr);
  }
}

.contribute-media-row .intro,
.contribute-media-row .mamadex-contribute-note {
  text-align: start;
  margin: 0;
}

.contribute-figure {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.contribute-figure img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 25%;
}

.contribute-figure figcaption {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--small);
  line-height: 1.5;
  text-align: start;
}

.contribute-figure--wide {
  max-width: 50rem;
  margin: 2rem auto;
}

/* ======================================================================================================
   5) Ways useful help may join the work — six text-led rows. Deliberately
   NOT mamadex.css's .capability-grid/.capability-card image-card family
   (no photograph, no card-media box) — see file header for the
   false-equivalence rationale. Plain stacked rows, quiet divider between
   them, matching the site's other plain-prose list register more than
   its photographic card family. v2.2.0: ONE .contribute-figure--wide
   (§4b above) sits below this list in the markup — categories themselves
   remain fully text-led, no rule in this block references an image.
   ====================================================================================================== */

.contribute-categories {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.category-row {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}

.category-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.category-row:first-child {
  padding-top: 0;
}

.category-row h3 {
  font-family: var(--headline-font);
  font-size: var(--h3); /* v2.3.0: canonical card/component title size (1.25rem) — was 1.0625rem, a page-local value smaller than every other card heading on this page (.start-card h3 already used var(--h3)'s literal 1.25rem) */
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 0.375rem;
}

.category-row p {
  margin: 0;
  font-size: var(--body);
  line-height: 1.6;
  color: var(--muted);
}

/* "I am not sure where it fits" — first-class option, not a buried
   fallback, so it is visually distinguished only as gently as the other
   five (a quiet tint), never smaller or greyed out. */
.category-row-unsure {
  background: rgba(139, 92, 246, 0.05);
  border-radius: var(--radius);
  padding-inline: 1.25rem;
  margin-top: 0.5rem;
  border-bottom: none;
}

.category-row-unsure:first-child {
  padding-top: 1.25rem;
}

/* ======================================================================================================
   6) How matching works — native <ol>, decimal numbering, no new
   counter/pseudo-element system.
   ====================================================================================================== */

.contribute-steps {
  max-width: 60ch;
  margin: 0 auto;
  padding-inline-start: 1.5rem;
  list-style: decimal;
}

.contribute-steps li {
  color: var(--muted);
  font-size: var(--body);
  line-height: 1.6;
  margin-bottom: 0.65rem;
}

.contribute-steps li:last-child {
  margin-bottom: 0;
}

/* ======================================================================================================
   7) Quiet callout notes (boundary statement, technical-continuation
   note). Same treatment as mamadex-join.css's .mamadex-join-note/
   --emphasis (redeclared here at the same base values — that class lives
   in a stylesheet this page does not load).
   ====================================================================================================== */

.mamadex-contribute-note {
  margin: 0 auto 1.5rem;
  max-width: 56rem;
  padding: 1rem 1.25rem;
  background: rgba(120, 113, 108, 0.08);
  border: 1px solid rgba(120, 113, 108, 0.18);
  border-radius: var(--radius);
  text-align: center;
  color: var(--muted);
  font-size: var(--body);
  line-height: 1.6;
}

.mamadex-contribute-note:last-child {
  margin-bottom: 0;
}

/* Emphasis variant — the locked governing boundary statement. Mama-violet
   accent (same "pay attention, not alarming" tone already used across
   the MamaDEX pillar) — no red/coral warning colour, this is a boundary
   statement, not an error. */
.mamadex-contribute-note--emphasis {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.30);
  color: var(--fg);
  font-weight: 600;
}

/* ======================================================================================================
   8) Plain checkmarked list — same technique as mamadex-join.css's
   .join-list (redeclared, not imported).
   ====================================================================================================== */

.contribute-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 60ch;
  text-align: start;
}

.contribute-list li {
  position: relative;
  padding-inline-start: 1.5rem;
  margin-bottom: 0.65rem;
  color: var(--muted);
  line-height: 1.6;
  font-size: var(--body);
}

.contribute-list li::before {
  content: "\2713";
  position: absolute;
  inset-inline-start: 0;
  color: var(--page-primary);
  font-weight: 700;
}

.contribute-list li:last-child {
  margin-bottom: 0;
}

/* ======================================================================================================
   9) Some offers follow another route — short inline rows, each a line of
   text plus one real canonical secondary button (global.css .sdx-btn-
   secondary, reused verbatim — no new button component). v2.1.0 owner
   correction: the four actions previously rendered as naked violet text
   links, which read as inline prose links rather than actionable routes.
   Explicitly still NOT a second .door-grid/.door-card instance — four
   text rows are retained, not large cards, per explicit owner instruction.
   Desktop: copy left, button right, all four buttons share one fixed
   width/alignment axis (--elsewhere-btn-width) so they line up as a
   column regardless of each row's copy length, vertically centred against
   the row's copy, with a clear gap and a subtle separator under every row
   except the last. Mobile: button drops full-width beneath its row's
   copy; each row's boundary stays visible via padding+border so the four
   destinations remain visually distinct rows, not one running list.
   ====================================================================================================== */

.contribute-elsewhere-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem auto 0;
  max-width: 60ch;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.contribute-elsewhere-list li {
  --elsewhere-btn-width: 12rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--border);
}

.contribute-elsewhere-list li:first-child {
  padding-top: 0;
}

.contribute-elsewhere-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.contribute-elsewhere-list li span {
  flex: 1 1 18rem;
  color: var(--muted);
  font-size: var(--body);
  line-height: 1.5;
}

.contribute-elsewhere-list li a.contribute-route-button {
  flex: 0 0 var(--elsewhere-btn-width);
  width: var(--elsewhere-btn-width);
  text-align: center;
  white-space: nowrap;
}

/* ======================================================================================================
   9b) Destination-pillar route-button colours — v2.4.0 owner instruction
   (rejected-build correction; supersedes the v2.3.0 attempt below).

   v2.3.0 used class="sdx-btn-primary contribute-route-button--*" and
   background overrides on the single-class modifiers. REJECTED on render
   — all four buttons stayed violet. Root cause, confirmed by inspecting
   global.css: the .sdx-btn-primary colour rule is written as
   ".sdx-btn-primary, .sdx-btn-primary:link, .sdx-btn-primary:visited"
   — the :link/:visited pseudo-classes give it specificity 0,2,0, which
   beat a single-class modifier like .contribute-route-button--reporters
   (0,1,0) outright. The modifier's background declaration never won the
   cascade; every anchor kept rendering .sdx-btn-primary's own
   var(--page-primary) (mama-violet) fill regardless of the modifier
   class present alongside it.

   v2.4.0 fix: sdx-btn-primary is no longer used on these four links at
   all — avoiding the specificity trap rather than trying to out-rank it.
   Instead this page defines its own scoped copy of the EXISTING
   .btn-pillar / .btn-pillar-* pattern already used elsewhere on the site
   (assets/css/living-tower/living-tower.css's .page-living-tower
   .btn-pillar / .btn-pillar-reporters / .btn-pillar-mamadex; the same
   pattern is also independently implemented under .page-404 in 404.css).
   There is no unscoped, global .btn-pillar in global.css to import
   directly — every page that uses this pattern defines its own
   page-scoped copy, so .page-mamadex-contribute .btn-pillar is that same
   convention, not a new one. Base geometry and the Reporters/MamaDEX
   gradient values below are reused VERBATIM from living-tower.css's own
   rule (colours expressed as existing global.css tokens rather than
   living-tower.css's hardcoded hex, since this page prefers tokens where
   available — same rendered result).

   .btn-pillar (base, geometry + white text only, NO colour):
     reused verbatim from living-tower.css's .page-living-tower .btn-pillar.
   .btn-pillar-reporters: linear-gradient(145deg, mama-amber → reporters-
     orange) — identical to living-tower.css's own .btn-pillar-reporters
     (there expressed as hardcoded #f5b014/#d94328; here as tokens).
   .btn-pillar-mamadex: linear-gradient(135deg, mama-violet → mama-depth)
     — identical to living-tower.css's own .btn-pillar-mamadex, and to
     this page's own .sdx-cta-band .sdx-btn-primary gradient (mamadex.css)
     — used for BOTH the Opportunity and Join buttons, per instruction.
   .contribute-route-button--viridians: NOT part of the .btn-pillar-*
     family (Living Tower has no MamaDEX-scoped Viridians pillar button to
     reuse) — a local destination modifier, exact values and selector per
     owner instruction: linear-gradient(145deg, purple-deep → teal-deep),
     matching Viridians' own canonical .page-viridians .sdx-btn-primary
     gradient (viridians.css).
   contribute-route-button (unchanged from v2.3.0, see §9 above) still
   supplies geometry only (fixed width, centring) — it never carried
   colour and required no fix.
   ====================================================================================================== */

.page-mamadex-contribute .btn-pillar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  font-family: var(--text-font);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: #ffffff; /* every gradient below has a dark stop — white required, DOC-03 §8.3.1 */
  transition: filter 0.22s ease, transform 0.22s ease;
}

.page-mamadex-contribute .btn-pillar:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.page-mamadex-contribute .btn-pillar-reporters {
  background: linear-gradient(145deg, var(--sdx-color-mama-amber) 0%, var(--sdx-color-reporters-orange) 100%);
}

.page-mamadex-contribute .btn-pillar-mamadex {
  background: linear-gradient(135deg, var(--sdx-color-mama-violet) 0%, var(--sdx-color-mama-depth) 100%);
}

.page-mamadex-contribute .contribute-route-button--viridians {
  background: linear-gradient(
    145deg,
    var(--sdx-color-purple-deep) 0%,
    var(--sdx-color-teal-deep) 100%
  );
  color: #ffffff;
  border-color: transparent;
  box-shadow:
    0 4px 14px
    color-mix(in srgb, var(--sdx-color-purple-deep) 28%, transparent);
}

.page-mamadex-contribute .contribute-route-button--viridians:hover {
  color: #ffffff;
  filter: brightness(1.08);
  transform: none;
}

/* ======================================================================================================
   10) Dark theme — only the values above that use fixed rgba() rather
   than existing tokens need an explicit override; var(--card)/
   var(--border)/var(--muted)/var(--fg)/var(--page-primary) already
   resolve correctly in dark mode via global.css/themes.css.
   ====================================================================================================== */

[data-theme="dark"] .mamadex-contribute-note {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .mamadex-contribute-note--emphasis {
  background: rgba(139, 92, 246, 0.16);
  border-color: rgba(139, 92, 246, 0.40);
}

[data-theme="dark"] .category-row-unsure {
  background: rgba(139, 92, 246, 0.14);
}

[data-theme="dark"] .page-mamadex-contribute .start-card-kicker {
  color: var(--sdx-color-mama-violet-light);
}

/* ======================================================================================================
   11) Mobile density — tighten the two-path grid and category rows at
   narrow widths, matching the density conventions already used across
   the MamaDEX pillar (mamadex-join.css §8).
   ====================================================================================================== */

@media (max-width: 480px) {
  .contribute-lane-card {
    padding: 1.5rem;
  }

  .start-card {
    padding: 1.5rem;
  }

  .contribute-elsewhere-list li {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .contribute-elsewhere-list li span {
    flex: 0 1 auto;
  }

  .contribute-elsewhere-list li a.contribute-route-button {
    width: 100%;
    flex-basis: auto;
  }
}