/* Hope look for /reformation (The Protestant Reformation, Explored). Builds on
   hope-guides.css. The poster layout (hand-placed card coordinates) is kept;
   only colours, type and surfaces change. Each card now names its family in
   text next to the colour bar. Drawer + modal sit outside <main>, so they get
   the Hope font and heading overrides here. */

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

/* Hero */
body.hope-guide .rf-hero { background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: var(--hg-radius); box-shadow: var(--hg-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.hope-guide .rf-hero-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--hg-primary); }
body.hope-guide .rf-hero-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; text-shadow: none; }
body.hope-guide .rf-hero-sub { font-size: 17px; font-style: normal; line-height: 1.6; color: var(--hg-muted); }
body.hope-guide .rf-flourish { display: none; }
body.hope-guide .rf-search-wrap { margin-top: 20px; background: var(--hg-surface-2); border: 1px solid var(--hg-border-strong); border-radius: 12px; box-shadow: none; }
body.hope-guide .rf-search-wrap:focus-within { border-color: var(--hg-primary); box-shadow: 0 0 0 3px var(--hg-primary-soft); }
body.hope-guide .rf-search-wrap i, body.hope-guide .rf-search-wrap svg { color: var(--hg-faint); }
body.hope-guide .rf-search { font-size: 16px; color: var(--hg-text); min-height: 44px; }
body.hope-guide .rf-search::placeholder { color: var(--hg-faint); }
body.hope-guide .rf-search-clear { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; color: var(--hg-faint); }
body.hope-guide .rf-hint { font-size: 15px; color: var(--hg-muted); }
body.hope-guide .rf-hint b { color: var(--hg-text); }
body.hope-guide .rf-legend { font-size: 14px; font-weight: 600; color: var(--hg-text); background: var(--hg-surface-2); border: 1px solid var(--hg-border); box-shadow: none; }
body.hope-guide .rf-legend .dot { width: 16px; height: 6px; box-shadow: none; }
body.hope-guide .rf-methodology-btn { min-height: 44px; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--hg-primary); border: 0; border-radius: 10px; padding: 8px 14px; }
body.hope-guide .rf-methodology-btn:hover { background: var(--hg-primary-soft); color: var(--hg-primary-hover); }

/* Poster */
body.hope-guide .rf-canvas-sizer::before { background: var(--hg-surface); border: 1px solid var(--hg-border); box-shadow: var(--hg-shadow); }
body.hope-guide .rf-conn-glow { stroke: #fff; }
body.hope-guide .rf-band--tint { background: var(--hg-surface-2); }
body.hope-guide .rf-era-name { font-size: 14px; font-weight: 800; letter-spacing: 0; color: var(--hg-text); }
body.hope-guide .rf-era-range { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--hg-faint); }
body.hope-guide .rf-rail { background: var(--hg-border-strong); }
body.hope-guide .rf-rail-tick { background: #fff; border-color: var(--hg-border-strong); }
body.hope-guide .rf-rail-arrow { border-top-color: var(--hg-border-strong); }

body.hope-guide .rf-card,
body.hope-guide .rf-card--spark, body.hope-guide .rf-card--sola, body.hope-guide .rf-card--confession,
body.hope-guide .rf-card--event, body.hope-guide .rf-card--honest {
  background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: var(--hg-radius-sm);
  box-shadow: var(--hg-shadow-sm); padding: 16px 14px 24px;
}
body.hope-guide .rf-card--spark { background: #fffaf0; border-color: #ecd9a9; }
body.hope-guide .rf-card--honest { background: #f3f4f6; border-color: #dfe2e8; }
body.hope-guide .rf-card::after { display: none; }
body.hope-guide .rf-card:hover { transform: translateY(-2px); border-color: var(--hg-primary); box-shadow: 0 8px 22px rgba(58, 87, 232, 0.14); }
body.hope-guide .rf-card.lit { border-color: var(--hg-primary); box-shadow: 0 0 0 2px var(--hg-primary-soft), var(--hg-shadow-sm); }
body.hope-guide .rf-card.selected { border-color: var(--hg-primary); box-shadow: 0 0 0 3px var(--hg-primary), 0 10px 26px rgba(58, 87, 232, 0.18); }
body.hope-guide .rf-card-fam { height: 5px; background: var(--fc, var(--hg-primary)); border-top-left-radius: var(--hg-radius-sm); border-top-right-radius: var(--hg-radius-sm); }
body.hope-guide .rf-card-ord { font-size: 12px; color: var(--hg-faint); opacity: 1; }
body.hope-guide .rf-card-medallion, body.hope-guide .rf-card--spark .rf-card-medallion, body.hope-guide .rf-card--honest .rf-card-medallion { background: var(--hg-surface-2); box-shadow: inset 0 0 0 2px var(--fc, var(--hg-border-strong)); }
body.hope-guide .rf-card--honest .rf-card-medallion { color: var(--hg-drop); box-shadow: inset 0 0 0 2px var(--hg-border-strong); }
body.hope-guide .rf-card-name, body.hope-guide .rf-card--spark .rf-card-name, body.hope-guide .rf-card--sola .rf-card-name,
body.hope-guide .rf-card--event .rf-card-name, body.hope-guide .rf-card--honest .rf-card-name { font-size: 15.5px; font-weight: 800; line-height: 1.25; color: var(--hg-text); }
body.hope-guide .rf-card-date, body.hope-guide .rf-card--honest .rf-card-date { font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--hg-muted); }
body.hope-guide .rf-fam-name { font-weight: 600; color: var(--hg-muted); }
body.hope-guide .rf-card-desc { font-size: 14px; line-height: 1.45; color: var(--hg-body); }
body.hope-guide .rf-card-explore, body.hope-guide .rf-card--honest .rf-card-explore { font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--hg-primary); }
body.hope-guide .rf-card-tag,
body.hope-guide .rf-card--spark .rf-card-tag, body.hope-guide .rf-card--sola .rf-card-tag, body.hope-guide .rf-card--confession .rf-card-tag,
body.hope-guide .rf-card--event .rf-card-tag, body.hope-guide .rf-card--honest .rf-card-tag {
  font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--hg-muted);
  background: var(--hg-surface-2); border: 1px solid var(--hg-border); border-radius: 999px; padding: 2px 9px;
}
body.hope-guide .rf-divider .rule { border-top-color: var(--hg-border-strong); }
body.hope-guide .rf-divider p { font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--hg-text); background: var(--hg-surface); border-color: var(--hg-border-strong); }

/* Note */
body.hope-guide .rf-note { max-width: 560px; 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 .rf-note b { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hg-primary); }
body.hope-guide .rf-note p { font-size: 15.5px; line-height: 1.55; color: var(--hg-muted); }

/* Phone timeline */
body.hope-guide .rf-timeline::before { background: var(--hg-border-strong); }
body.hope-guide .rf-tl-dot { background: var(--hg-surface); box-shadow: inset 0 0 0 2px currentColor; }
body.hope-guide .rf-tl-card, body.hope-guide .rf-tl-card--honest { background: var(--hg-surface); border: 1px solid var(--hg-border); border-left: 4px solid var(--fc, var(--hg-primary)); border-radius: var(--hg-radius-sm); box-shadow: var(--hg-shadow-sm); padding: 14px 16px; }
body.hope-guide .rf-tl-card--honest { background: #f3f4f6; }
body.hope-guide .rf-tl-name, body.hope-guide .rf-tl-card--honest .rf-tl-name { font-size: 16.5px; font-weight: 800; color: var(--hg-text); }
body.hope-guide .rf-tl-date, body.hope-guide .rf-tl-card--honest .rf-tl-date { font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--hg-muted); }
body.hope-guide .rf-tl-desc { font-size: 15.5px; line-height: 1.5; color: var(--hg-body); }
body.hope-guide .rf-tl-era { border-bottom-color: var(--hg-border); }
body.hope-guide .rf-tl-era-name { font-size: 15px; font-weight: 800; letter-spacing: 0; color: var(--hg-text); }
body.hope-guide .rf-tl-era-range { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--hg-faint); }
body.hope-guide .rf-tl-divider .rule { border-top-color: var(--hg-border-strong); }
body.hope-guide .rf-tl-divider p { font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--hg-text); }

/* Drawer + methodology modal (outside main) */
body.hope-guide .rf-drawer, body.hope-guide .rf-modal { font-family: var(--hg-font); color: var(--hg-text); }
body.hope-guide .rf-drawer *, body.hope-guide .rf-modal * { font-family: var(--hg-font) !important; }
body.hope-guide :is(.rf-drawer, .rf-modal) :focus-visible { outline: 3px solid var(--hg-primary) !important; outline-offset: 2px; }
body.hope-guide :is(.rf-drawer, .rf-modal) :is(h2, h3) { color: var(--hg-text) !important; letter-spacing: -0.01em; font-variant: normal; }
body.hope-guide .rf-scrim, body.hope-guide .rf-modal-scrim { background: rgba(17, 24, 39, 0.45); }
body.hope-guide .rf-drawer { background: var(--hg-surface); border-left: 0; box-shadow: -16px 0 46px rgba(17, 24, 39, 0.18); }
body.hope-guide .rf-drawer-head { background: none; border-bottom-color: var(--hg-border); }
body.hope-guide :is(.rf-drawer-close, .rf-modal-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 :is(.rf-drawer-close, .rf-modal-close):hover { color: var(--hg-text); background: var(--hg-surface-2); }
body.hope-guide .rf-drawer-medallion { color: var(--hg-primary); background: var(--hg-primary-soft); box-shadow: none; }
body.hope-guide .rf-drawer-name { font-size: 22px !important; font-weight: 800; line-height: 1.25; padding-right: 40px; }
body.hope-guide .rf-drawer-meta { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--hg-muted); }
body.hope-guide .rf-drawer-summary { font-size: 16.5px; line-height: 1.65; color: var(--hg-body); }
body.hope-guide .rf-drawer-row { font-size: 15px; color: var(--hg-body); border-top-color: var(--hg-border); }
body.hope-guide .rf-drawer-row .k { font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--hg-text); }
body.hope-guide .rf-drawer h3 { font-size: 13px !important; font-weight: 800; letter-spacing: 0.08em !important; text-transform: uppercase; color: var(--hg-primary) !important; }
body.hope-guide .rf-drawer li { font-size: 15.5px; line-height: 1.55; color: var(--hg-body); }
body.hope-guide .rf-callout { background: var(--hg-surface-2); border-left-color: var(--hg-border-strong); border-radius: 0 10px 10px 0; }
body.hope-guide .rf-callout .lbl { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--hg-text); }
body.hope-guide .rf-callout p { font-size: 15.5px; line-height: 1.55; color: var(--hg-body); }
body.hope-guide .rf-callout--myth { background: var(--hg-reaffirm-bg); border-left-color: var(--hg-reaffirm); }
body.hope-guide .rf-callout--myth .lbl { color: var(--hg-reaffirm); }
body.hope-guide .rf-callout--source { background: var(--hg-develop-bg); border-left-color: var(--hg-develop); }
body.hope-guide .rf-callout--source .lbl { color: var(--hg-develop); }
body.hope-guide .rf-drawer-link { min-height: 44px; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--hg-primary); background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: 10px; }
body.hope-guide .rf-drawer-link:hover { background: var(--hg-primary-soft); border-color: var(--hg-primary); color: var(--hg-primary); }
body.hope-guide .rf-drawer-link i, body.hope-guide .rf-drawer-link svg { color: var(--hg-primary); }
body.hope-guide .rf-drawer-trace { min-height: 44px; font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; background: var(--hg-primary); border-radius: 10px; }
body.hope-guide .rf-drawer-trace:hover { background: var(--hg-primary-hover); }
body.hope-guide .rf-modal { background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: var(--hg-radius); }
body.hope-guide .rf-modal h2 { font-size: 22px !important; font-weight: 800; }
body.hope-guide .rf-modal-body p, body.hope-guide .rf-modal-body li { font-size: 15.5px; line-height: 1.6; color: var(--hg-body); }
body.hope-guide .rf-modal-body strong { color: var(--hg-text); }

@media (max-width: 760px) {
  body.hope-guide .rf-hero { margin-left: 16px; margin-right: 16px; padding: 20px 18px 18px; text-align: left; }
  body.hope-guide .rf-hero-sub { font-size: 16px; }
  body.hope-guide .rf-search-wrap { max-width: none; }
  body.hope-guide .rf-hint { text-align: left; padding: 0; }
  body.hope-guide .rf-methodology-row { text-align: left; }
  body.hope-guide .rf-methodology-btn { padding-left: 0; }
  body.hope-guide .rf-note { margin-left: 16px; margin-right: 16px; }
}

body.hope-guide .rf-timeline { margin-top: 22px; }