/* Reading pages in the light GIGW + SaaS style: blog articles, short
   testimonials, and the light skin over the beneficiary story pages
   (story.css). Tokens come from gov.css: brand #323f2f, gold #ffd700. */

body.lx, body.lx main { background: #f3f4f1; color: var(--lx-ink); font: 400 16px/1.65 var(--lx-body); letter-spacing: 0; }

/* ---------- shared reading card ---------- */
.lx-read__page { padding: 22px 20px 48px; }
.lx-read__card {
  position: relative; max-width: 920px; margin: 0 auto; padding: 52px 64px 48px; overflow: hidden;
  background: #fff; border: 1px solid var(--lx-line); border-radius: 24px;
  box-shadow: 0 1px 2px rgba(20, 30, 20, .04), 0 18px 40px -28px rgba(20, 30, 20, .28);
}
.lx-read__card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--lx-gold) 0 34%, var(--lx-brand) 34%); }
.lx-read__head { margin-bottom: 26px; }
.lx-read__back {
  display: inline-flex; align-items: center; gap: 8px; margin-right: 12px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--lx-gold); background: #fff; color: var(--lx-brand); font: 700 13px/1.2 var(--lx-head); text-decoration: none; letter-spacing: .04em;
}
a.lx-read__back::before { content: '\2190'; color: var(--lx-gold-deep); }
a.lx-read__back:hover { background: var(--lx-brand); color: #fff; border-color: var(--lx-brand); }
.lx-read__back--static::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--lx-gold); }
.lx-read__meta { font: 600 13px/1.2 var(--lx-head); letter-spacing: .1em; text-transform: uppercase; color: var(--lx-muted); }
.lx-read__title {
  position: relative; margin: 20px 0 0; padding-bottom: 18px; text-wrap: balance;
  font: 800 clamp(28px, 3.4vw, 44px)/1.15 var(--lx-head); letter-spacing: -0.025em; color: var(--lx-brand);
}
.lx-read__title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--lx-brand) 0 32%, var(--lx-gold) 32%); }
.lx-read__hero { margin: 0 0 34px; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 44px -28px rgba(20, 30, 20, .55); }
.lx-read__hero img { display: block; width: 100%; height: auto; }

/* ---------- prose (blog body + testimonial paragraphs) ---------- */
.lx-read .article, .lx-prose {
  padding: 0; border: 0; text-align: left; color: var(--lx-ink-2); font: 400 18px/1.85 var(--lx-body); letter-spacing: 0;
}
.lx-read .article > :first-child:has(.text-gold) { display: none; } /* the title, repeated at the top of every body */
.lx-prose p, .lx-prose div { margin: 0 0 16px; }
.lx-prose div:has(> br:only-child), .lx-prose p:empty { display: none; }
.lx-prose h2, .lx-prose h3 { margin: 38px 0 14px; font: 800 clamp(22px, 2.2vw, 28px)/1.25 var(--lx-head); letter-spacing: -0.015em; color: var(--lx-brand); }
.lx-prose h4 { margin: 28px 0 8px; font: 800 19px/1.35 var(--lx-head); color: var(--lx-brand); }
.lx-prose h4::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 3px; background: var(--lx-gold); vertical-align: 1px; }
.lx-prose h5 { margin: 24px 0 8px; font: 700 16px/1.4 var(--lx-head); color: var(--lx-brand); }
.lx-prose strong, .lx-prose b, .lx-prose .text-gold { color: var(--lx-brand); font-weight: 700; }
.lx-prose a { color: var(--lx-brand); font-weight: 600; text-decoration-color: var(--lx-gold); text-underline-offset: 3px; }
.lx-prose ul, .lx-prose ol { margin: 0 0 20px; padding-left: 0; list-style: none; }
.lx-prose li { position: relative; margin: 0 0 12px; padding-left: 26px; }
.lx-prose ul > li::before { content: ''; position: absolute; left: 4px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--lx-gold); box-shadow: 0 0 0 3px rgba(255, 215, 0, .25); }
.lx-prose ol { counter-reset: li; }
.lx-prose ol > li { counter-increment: li; }
.lx-prose ol > li::before { content: counter(li); position: absolute; left: 0; top: .15em; width: 19px; height: 19px; border-radius: 6px; background: var(--lx-brand); color: var(--lx-gold); font: 800 11px/19px var(--lx-head); text-align: center; }
.lx-prose figure { margin: 26px 0; }
.lx-prose figure img, .lx-prose img { border-radius: 14px; }
.lx-prose blockquote { margin: 24px 0; padding: 18px 22px; border-left: 4px solid var(--lx-gold); border-radius: 0 14px 14px 0; background: #fafaf6; }

/* share row */
.lx-read__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--lx-line); }
.lx-read__foot > span { font: 700 13px/1 var(--lx-head); letter-spacing: .12em; text-transform: uppercase; color: var(--lx-muted); }
.lx-read .share { margin: 0; gap: 10px; }
.lx-read .share li { margin: 0; }
.lx-read .share a { width: 42px; height: 42px; background: var(--lx-brand); color: var(--lx-gold); transition: background .2s, color .2s, translate .2s var(--lx-ease); }
.lx-read .share a:hover { background: var(--lx-gold); color: var(--lx-brand); translate: 0 -2px; }

/* ---------- testimonial quote card ---------- */

/* ---------- beneficiary story pages: light skin over story.css ---------- */
.lx-story-page .rw { background: #f3f4f1; color: var(--lx-ink); padding: 22px 20px 48px; }
.lx-story-page .rw-hero {
  border-radius: 24px; background: #fff; border: 1px solid var(--lx-line); box-shadow: 0 18px 40px -28px rgba(20, 30, 20, .28);
}
.lx-story-page .rw-hero::after { background: radial-gradient(ellipse at 80% 30%, rgba(255, 215, 0, .16) 0%, transparent 55%); }
.lx-story-page .rw-tag { border-color: var(--lx-gold); background: #fff; color: var(--lx-brand); }
.lx-story-page .rw-tag-dot { background: var(--lx-gold); }
.lx-story-page .rw-name { color: var(--lx-brand); }
.lx-story-page .rw-subtitle { color: var(--lx-muted); }
.lx-story-page .rw-quote-short { color: var(--lx-ink-2); border-left-color: var(--lx-gold); }
.lx-story-page .rw-stat { background: #fff; border: 1px solid var(--lx-line); border-top: 4px solid var(--lx-gold); box-shadow: 0 10px 22px -18px rgba(20, 30, 20, .45); }
.lx-story-page .rw-stat-n { color: var(--lx-brand); }
.lx-story-page .rw-stat-l { color: var(--lx-muted); }
.lx-story-page .rw-card-inner { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--lx-gold), 0 30px 50px -28px rgba(20, 30, 20, .6); }
.lx-story-page .rw-divider { height: 14px; background: transparent; }
.lx-story-page .rw-story-bg { border-radius: 24px; background: #fff; border: 1px solid var(--lx-line); box-shadow: 0 18px 40px -28px rgba(20, 30, 20, .28); }
.lx-story-page .rw-story-bg::before { color: rgba(255, 215, 0, .14); }
.lx-story-page .rw-label { color: var(--lx-gold-deep); }
.lx-story-page .rw-heading { color: var(--lx-brand); }
.lx-story-page .rw-bar { background: linear-gradient(90deg, var(--lx-brand) 0 32%, var(--lx-gold) 32%); }
.lx-story-page .rw-info-card { background: #fafaf8; border-color: var(--lx-line); }
.lx-story-page .rw-info-row { border-bottom-color: var(--lx-line); }
.lx-story-page .rw-info-k { color: var(--lx-muted); }
.lx-story-page .rw-info-v { color: var(--lx-brand); }
.lx-story-page .rw-scheme-pill { background: var(--lx-brand); }
.lx-story-page .rw-scheme-t { color: var(--lx-gold); }
.lx-story-page .rw-scheme-s { color: rgba(255, 255, 255, .8); }
.lx-story-page .rw-story-card { background: #fff; border-color: var(--lx-line); box-shadow: 0 18px 36px -26px rgba(20, 30, 20, .4); }
.lx-story-page .rw-story-card p { color: var(--lx-ink-2); }
.lx-story-page .rw-story-qmark { background: var(--lx-gold); color: var(--lx-brand); }
.lx-story-page .rw-story-footer { border-top-color: var(--lx-line); }
.lx-story-page .rw-story-avatar { background: var(--lx-brand); color: var(--lx-gold); }
.lx-story-page .rw-story-n { color: var(--lx-brand); }
.lx-story-page .rw-story-r { color: var(--lx-gold-deep); }
.lx-story-page .rw-card-avatar { background: linear-gradient(160deg, #f6f7f3, #eceee8); }
.lx-story-page .rw-card-avatar-name { color: var(--lx-brand); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .lx-read__card { padding: 36px 26px 32px; }
}
@media (max-width: 767px) {
  .lx-read__page, .lx-story-page .rw { padding: 10px 8px 28px; }
  .lx-read__card { padding: 30px 20px 26px; border-radius: 18px; }
  .lx-read .article, .lx-prose { font-size: 16.5px; }
  .lx-story-page .rw-hero, .lx-story-page .rw-story-bg { border-radius: 18px; }
}