/* My Credo — LIGHT TOUCH adapter for the Gravitas site system.
   The owner-approved design stays as it is: Libre Caslon display type, the course's reading font, GSAP scrollytelling,
   layout, the hero, the Chapter Six night stage, the dark bands and the finale.
   This page deliberately does NOT carry body.gx (that class switches on the shared reading type, which would replace
   the approved fonts). It loads site-system.css for its tokens and fonts only, and this file brings in:
   small labels/eyebrows, buttons below the hero, the footer, and the shared raise/inset on plain light-ground cards. */

/* ---------- light-ground content cards take the shared relief (dark bands keep their own) ---------- */
body.gx-my-credo .story.card,
body.gx-my-credo .bookopen .chap-card,
body.gx-my-credo .chap:not(.band-dark) .chap-card,
body.gx-my-credo .nextbook {
  --raised: var(--gx-raise); --raised-s: var(--gx-raise-sm); --inset: var(--gx-inset); --r: var(--gx-r);
}
/* the dark chapters inside the origin story re-declare their own relief (credo-neu.css) and are untouched */

/* ---------- small labels and eyebrows: gold Montserrat capitals ---------- */
body.gx-my-credo main :is(.eyebrow, .chapter-num, .scene-kicker, .callout-label, .mlab, .nb-eyebrow) {
  font-family: var(--gx-sans); font-weight: 700; font-size: .75rem; line-height: 1.6; letter-spacing: .14em; text-transform: uppercase;
}
/* colours stay the page's own gold (var(--accent-t)), which also reads correctly inside the dark bands */
body.gx-my-credo main .why-k { font-family: var(--gx-sans); font-weight: 700; font-size: .625rem; letter-spacing: .12em; }

/* ---------- buttons below the hero: shared raised pills (hero buttons and the dark bands are left alone) ---------- */
body.gx-my-credo main :is(.heroes, .invite, .chap:not(.band-dark), .bookopen) .credo-button {
  min-height: 46px; padding: 13px 24px; border-radius: var(--gx-r);
  font: 600 .8125rem/1.4 var(--gx-sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--gx-ink); background: var(--gx-ground); border: 1px solid var(--gx-border); box-shadow: var(--gx-raise-sm);
}
body.gx-my-credo main :is(.heroes, .invite, .chap:not(.band-dark), .bookopen) .credo-button.primary { color: var(--gx-gold-deep); }
body.gx-my-credo main :is(.heroes, .invite, .chap:not(.band-dark), .bookopen) .credo-button:hover { color: var(--gx-gold-deep); }
body.gx-my-credo main :is(.heroes, .invite, .chap:not(.band-dark), .bookopen) .credo-button:active,
body.gx-my-credo main :is(.heroes, .invite, .chap:not(.band-dark), .bookopen) .credo-button[aria-pressed="true"] { transform: none; box-shadow: var(--gx-inset); }
/* the "next book" buy button keeps its approved gold fill; only its lettering joins the shared buttons */
body.gx-my-credo main .nb-buy { font: 600 .8125rem/1.4 var(--gx-sans); letter-spacing: .06em; text-transform: uppercase; }

/* ---------- footer: shared Montserrat capitals ---------- */
body.gx-my-credo .credo-footer.wrap { font: 600 .75rem/1.5 var(--gx-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gx-slate); border-top-color: var(--gx-border); }
body.gx-my-credo .credo-footer p { font: inherit; letter-spacing: inherit; color: inherit; }
body.gx-my-credo .credo-footer nav a { justify-self: start; width: fit-content; color: var(--gx-ink); text-decoration: none; border-bottom: 1px solid var(--gx-gold); padding-bottom: 2px; }
body.gx-my-credo .credo-footer nav a:hover { color: var(--gx-gold-deep); }

/* correction (Oct 16): the three hero buttons match the shared raised pills */
body.gx-my-credo .credo-hero .subnav .credo-button {
  min-height: 46px; padding: 13px 24px; border-radius: var(--gx-r);
  font: 600 .8125rem/1.4 var(--gx-sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--gx-ink); background: var(--gx-ground); border: 1px solid var(--gx-border); box-shadow: var(--gx-raise-sm);
}
body.gx-my-credo .credo-hero .subnav .credo-button.primary, body.gx-my-credo .credo-hero .subnav .credo-button:hover { color: var(--gx-gold-deep); }
body.gx-my-credo .credo-hero .subnav .credo-button:active { transform: none; box-shadow: var(--gx-inset); }

/* Oct 17 copy: name, definition and the "write it plainly" line above the buttons; credit below */
body.gx-my-credo .credo-hero .credo-name { margin: 0 0 clamp(8px, 1.2vw, 14px); font-family: var(--f-display); font-weight: 500; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); line-height: 1.1; }
body.gx-my-credo .credo-hero .plainly { margin: 0; font-family: var(--f-display); font-style: italic; font-size: clamp(1.05rem, .95rem + .6vw, 1.3rem); line-height: 1.45; }
body.gx-my-credo .credo-hero .hero-credit { margin-top: clamp(18px, 2.6vw, 30px); }