/* Hope look for /witnesses (Jesus Outside the Bible). Builds on hope-guides.css.
   Category colour stays as an accent; every card and drawer names its category
   and stance in text. The drawer sits outside <main>, so it gets the Hope font
   and heading overrides here. Quote and data text are untouched. */

body.hope-guide .wit-page { color: var(--hg-text); font-family: var(--hg-font); }

/* Hero as one white card */
body.hope-guide .wit-hero { max-width: 1120px; margin: 0 auto; padding: var(--nav-clear) 20px 6px; text-align: left; }
body.hope-guide .wit-hero .gh-hero { max-width: none; background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: var(--hg-radius); box-shadow: var(--hg-shadow); padding: 28px 32px; }
body.hope-guide .wit-hero .gh-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hg-primary); }
body.hope-guide .wit-hero .gh-title { font-weight: 800; font-size: clamp(30px, 4.4vw, 42px); letter-spacing: -0.01em; line-height: 1.12; background: none; -webkit-text-fill-color: currentColor; color: var(--hg-text) !important; }
body.hope-guide .wit-hero .gh-lede { font-size: 18px; font-style: normal; font-weight: 600; color: var(--hg-body); }
body.hope-guide .wit-hero .gh-intro p { font-size: 16.5px; line-height: 1.65; color: var(--hg-muted); }
body.hope-guide .wit-hero .gh-stat { font-size: 14px; color: var(--hg-muted); letter-spacing: 0; text-transform: none; }
body.hope-guide .wit-hero .gh-stat b { color: var(--hg-text); }
body.hope-guide .wit-hero .gh-frame { border-radius: var(--hg-radius-sm); border-color: var(--hg-border); box-shadow: none; }
body.hope-guide .wit-hero .gh-frame::after { display: none; }
body.hope-guide .wit-hero .gh-art-cap { font-size: 13px; font-weight: 700; color: var(--hg-text); background: var(--hg-surface); border: 1px solid var(--hg-border); font-style: normal; letter-spacing: 0; text-transform: none; }

/* Filters + hint */
body.hope-guide .wit-filters { justify-content: flex-start; max-width: none; }
body.hope-guide .wit-filter { min-height: 44px; font-size: 14.5px; font-weight: 600; letter-spacing: 0; border: 1px solid var(--hg-border-strong); background: var(--hg-surface); color: var(--hg-text); padding: 8px 16px; }
body.hope-guide .wit-filter:hover { border-color: var(--hg-primary); }
body.hope-guide .wit-filter.is-active { background: var(--hg-primary); border-color: var(--hg-primary); color: #fff; }
body.hope-guide .wit-filter .wit-filter-dot { width: 10px; height: 10px; }
body.hope-guide .wit-filter.is-active .wit-filter-dot { background: #fff; }
body.hope-guide .wit-hint { text-align: left; font-size: 15px; color: var(--hg-muted); padding: 0; }
body.hope-guide .wit-clear { font-size: 14.5px; font-weight: 700; letter-spacing: 0; color: var(--hg-primary); border-bottom-color: currentColor; min-height: 0; }

/* Synthesis panel */
body.hope-guide .wit-synthesis { max-width: 1120px; }
body.hope-guide .wit-synth-inner { background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: var(--hg-radius); box-shadow: var(--hg-shadow); text-align: left; padding: 24px 28px; }
body.hope-guide .wit-synth-title { font-size: clamp(20px, 2.6vw, 24px) !important; font-weight: 800; }
body.hope-guide .wit-synth-intro { font-size: 16px; font-style: normal; color: var(--hg-muted); margin-left: 0; }
body.hope-guide .wit-fact { min-height: 44px; background: var(--hg-surface-2); border: 1px solid var(--hg-border); border-radius: 10px; color: var(--hg-text); }
body.hope-guide .wit-fact:hover { border-color: var(--hg-primary); }
body.hope-guide .wit-fact.is-active { background: var(--hg-primary); border-color: var(--hg-primary); color: #fff; }
body.hope-guide .wit-fact-check { background: var(--hg-develop); color: #fff; }
body.hope-guide .wit-fact.is-active .wit-fact-check { background: #fff; color: var(--hg-primary); }
body.hope-guide .wit-fact-label { font-size: 15.5px; font-weight: 600; }
body.hope-guide .wit-fact-count { font-size: 13px; font-weight: 700; background: var(--hg-surface); color: var(--hg-text); border-color: var(--hg-border-strong); }
body.hope-guide .wit-fact.is-active .wit-fact-count { color: #fff; }

/* Cards */
body.hope-guide .wit-card { background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: var(--hg-radius-sm); box-shadow: var(--hg-shadow-sm); }
body.hope-guide .wit-card:hover { transform: translateY(-2px); border-color: var(--hg-primary); box-shadow: 0 8px 22px rgba(58, 87, 232, 0.12); }
body.hope-guide .wit-card.is-dim { opacity: 0.4; }
body.hope-guide .wit-card-figure { border-bottom-width: 4px; background: var(--hg-surface-2); background: color-mix(in srgb, var(--pc, #3a57e8) 10%, #fff); }
body.hope-guide .wit-fig-mono { font-weight: 800; color: color-mix(in srgb, var(--pc, #3a57e8) 70%, #232d42); }
body.hope-guide .wit-card-body { padding: 16px 20px 18px; }
body.hope-guide .wit-card-cat, body.hope-guide .wit-drawer-cat { font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--hg-text); background: var(--hg-surface-2); border: 1px solid var(--hg-border); display: inline-flex; align-items: center; gap: 7px; }
body.hope-guide .wit-card-cat::before, body.hope-guide .wit-drawer-cat::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--pc, var(--hg-primary)); flex: 0 0 auto; }
body.hope-guide .wit-card-stance, body.hope-guide .wit-drawer-stance { font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none; background: var(--hg-surface); color: var(--hg-text); border-color: var(--sc, var(--hg-border-strong)); }
body.hope-guide .wit-card-author { font-size: 20px !important; font-weight: 800; line-height: 1.2; }
body.hope-guide .wit-card-work { font-size: 14.5px; font-weight: 600; letter-spacing: 0; color: var(--hg-body); }
body.hope-guide .wit-card-era { font-size: 14px; font-style: normal; color: var(--hg-faint); }
body.hope-guide .wit-card-summary { font-size: 15.5px; line-height: 1.55; color: var(--hg-body); }
body.hope-guide .wit-card-more { font-size: 14.5px; font-weight: 700; letter-spacing: 0; color: var(--hg-primary); }

/* Closing note */
body.hope-guide .wit-note { max-width: 1080px; text-align: left; background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: var(--hg-radius-sm); box-shadow: var(--hg-shadow-sm); padding: 16px 20px; }
body.hope-guide .wit-note b { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hg-primary); }
body.hope-guide .wit-note p { font-size: 16px; color: var(--hg-muted); }

/* Drawer (outside main) */
body.hope-guide .wit-scrim { background: rgba(17, 24, 39, 0.45); }
body.hope-guide .wit-drawer { background: var(--hg-surface); border-left: 0; box-shadow: -16px 0 46px rgba(17, 24, 39, 0.18); font-family: var(--hg-font); color: var(--hg-text); }
body.hope-guide .wit-drawer * { font-family: var(--hg-font) !important; }
body.hope-guide .wit-drawer :focus-visible { outline: 3px solid var(--hg-primary) !important; outline-offset: 2px; }
body.hope-guide .wit-drawer :is(h2, h3, h4) { font-variant: normal; letter-spacing: 0; }
body.hope-guide .wit-drawer-head { background: none; padding: 22px 26px 18px; }
body.hope-guide .wit-drawer-close { min-width: 44px; min-height: 44px; display: grid; place-items: center; top: 10px; right: 10px; border-radius: 10px; color: var(--hg-faint); }
body.hope-guide .wit-drawer-close:hover { color: var(--hg-text); background: var(--hg-surface-2); }
body.hope-guide .wit-drawer-name { font-size: 22px !important; font-weight: 800; color: var(--hg-text) !important; line-height: 1.25; letter-spacing: -0.01em; text-transform: none; padding-right: 40px; }
body.hope-guide .wit-drawer-work { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--hg-body); }
body.hope-guide .wit-drawer-meta { font-size: 14px; font-style: normal; color: var(--hg-faint); }
body.hope-guide .wit-drawer-figure { border-color: var(--hg-border); border-radius: var(--hg-radius-sm); box-shadow: none; }
body.hope-guide .wit-quote { background: var(--hg-surface-2); border: 1px solid var(--hg-border); border-left: 3px solid var(--hg-primary); border-radius: var(--hg-radius-sm); padding: 18px 20px 14px; }
body.hope-guide .wit-quote::before { display: none; }
body.hope-guide .wit-quote p { font-size: 17px; line-height: 1.65; color: var(--hg-text); }
body.hope-guide .wit-quote cite { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--hg-muted); }
body.hope-guide .wit-attest-lbl, body.hope-guide .wit-callout .lbl { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--hg-primary); }
body.hope-guide .wit-attest { min-height: 40px; font-size: 14.5px; color: var(--hg-text); background: var(--hg-surface); border: 1px solid var(--hg-border-strong); border-radius: 10px; padding: 8px 12px; }
body.hope-guide .wit-attest:hover { border-color: var(--hg-primary); background: var(--hg-primary-soft); }
body.hope-guide .wit-drawer-lead { font-size: 16.5px; line-height: 1.65; color: var(--hg-body); }
body.hope-guide .wit-drawer-p { font-size: 16px; line-height: 1.65; color: var(--hg-body); }
body.hope-guide .wit-drawer h3 { font-size: 14px !important; font-weight: 800; letter-spacing: 0.06em !important; text-transform: uppercase; color: var(--hg-text) !important; }
body.hope-guide .wit-callout { border-left-color: var(--hg-primary); background: var(--hg-primary-soft); border-radius: 0 10px 10px 0; }
body.hope-guide .wit-callout p { font-size: 16px; color: var(--hg-body); }
body.hope-guide .wit-drawer-row { font-size: 15px; color: var(--hg-body); border-top-color: var(--hg-border); }
body.hope-guide .wit-drawer-row .k { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--hg-text); }
body.hope-guide .wit-drawer-link { min-height: 44px; font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--hg-primary); background: var(--hg-primary-soft); border: 0; border-radius: 10px; }
body.hope-guide .wit-drawer-link:hover { background: #e2e7fc; color: var(--hg-primary-hover); }
body.hope-guide .wit-drawer-link i { color: var(--hg-primary); }

@media (max-width: 720px) {
  body.hope-guide .wit-hero { padding-left: 16px; padding-right: 16px; }
  body.hope-guide .wit-hero .gh-hero { padding: 20px 18px; }
  body.hope-guide .wit-hero .gh-art { display: none; }
  body.hope-guide .wit-synthesis, body.hope-guide .wit-grid { padding: 0 16px; }
  body.hope-guide .wit-grid { grid-template-columns: 1fr; }
  body.hope-guide .wit-synth-inner { padding: 20px 18px; }
  body.hope-guide .wit-note { margin-left: 16px; margin-right: 16px; }
  body.hope-guide .wit-drawer-row { flex-direction: column; gap: 2px; }
}