/* Shared page components.
   Used across most pages, so they live here rather than being copied
   into each one. The 2026-08-14 build repeated these nine times and
   they drifted apart. Pages add their own page-specific CSS on top and
   must not redefine anything in this file. */

/* --------------------------------- rhythm --------------------------------- */
.sec{padding:84px 0}
.sec-tight{padding:56px 0}
.sec h1,.sec h2,.sec h3,.sec h4{margin:0;line-height:1.14;letter-spacing:-.02em}
.sec p{margin:0}
.eyebrow{font:var(--w-mid) var(--xs)/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft)}
.lede{font-size:var(--d4);line-height:1.65;color:var(--ink-mid)}
.sec-head{margin-bottom:44px}
@media(max-width:899px){.sec-head{max-width:64ch}}

.sec-head .lede{margin-top:16px}
.tint-band{background:var(--tint);border-block:1px solid var(--rule)}
.green-band{background:var(--green-tint);border-block:1px solid var(--green-line)}
.dark-band{background:var(--navy-deep);color:#fff}
.dark-band h2,.dark-band h3{color:#fff}
.dark-band p{color:#B9CBE4}

/* --------------------------------- buttons -------------------------------- */
.btn{display:inline-flex;align-items:center;gap:9px;font:var(--w-mid) var(--tx)/1 var(--sans);padding:16px 26px;border-radius:11px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-dark)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-dark)}
.btn-ghost{background:#fff;color:var(--blue);border-color:#CFE0F6}
.btn-ghost:hover{border-color:var(--blue)}
.dark-band .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.dark-band .btn-ghost:hover{border-color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* ------------------------------- stat cards ------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.stat{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:26px 24px;box-shadow:var(--shadow)}
.stat .n{font:var(--w-hi) var(--d3)/1 var(--sans);color:var(--navy);letter-spacing:-.02em}
.stat .l{margin-top:11px;font-size:var(--sm);line-height:1.5;color:var(--ink-mid)}

/* ------------------------- source citation trigger ------------------------ */
.cite{border:0;background:none;padding:0 0 0 3px;font:inherit;color:inherit;cursor:pointer;border-bottom:1px dotted var(--ink-soft)}
.cite:hover{color:var(--blue);border-bottom-color:var(--blue)}
.cite sup{font-size:.68em;color:var(--blue);font-weight:var(--w-mid);margin-left:2px}

/* -------------------------- source citation modal ------------------------- */




.srcx{position:absolute;top:16px;right:16px;background:none;border:0;cursor:pointer;color:var(--ink-soft);padding:6px;border-radius:6px;line-height:0}
.srcx:hover{color:var(--ink);background:var(--tint)}
.srcfig{font:var(--w-hi) var(--d3)/1.15 var(--sans);color:var(--ink);margin:0 40px 0 0;letter-spacing:-.02em}
.srclbl{font-size:var(--tx);line-height:1.55;color:var(--ink-mid);margin:10px 0 0}
.srcmeta{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--rule)}
.srcmeta div{margin:0}
.srcmeta dt{font:var(--w-mid) var(--xs)/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.srcmeta dd{margin:7px 0 0;font-size:var(--tx);color:var(--ink);line-height:1.45}
.srcmodal blockquote{margin:22px 0 0;padding:16px 18px;background:var(--tint);border-left:3px solid var(--rule);border-radius:0 8px 8px 0;font-size:var(--tx);line-height:1.62;color:var(--ink-mid)}
.srcstance{display:inline-block;margin-top:18px;font:var(--w-mid) var(--sm)/1.4 var(--sans);padding:9px 13px;border-radius:8px}
.srcstance.against{background:var(--amber-tint);border:1px solid var(--amber-line);color:var(--amber)}
.srcstance.context{background:var(--tint);border:1px solid var(--rule);color:var(--ink-mid)}
.srcout{display:inline-flex;align-items:center;gap:7px;margin-top:20px;font:var(--w-mid) var(--tx)/1 var(--sans);color:var(--blue);text-decoration:none}
.srcout:hover{text-decoration:underline}
.srcpending{margin-top:18px;font-size:var(--sm);line-height:1.55;color:var(--ink-soft);font-style:italic}

@media(max-width:1000px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.sec{padding:60px 0}}
@media(max-width:620px){.stats{grid-template-columns:1fr}.btn{width:100%;justify-content:center}}

/* Source popover. Anchored, not modal: see parts/source-modal.php. */
.srccard{position:fixed;z-index:900;width:min(392px,calc(100vw - 32px));background:#fff;border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow-lift);padding:22px 24px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1),visibility .5s}
.srccard.on{opacity:1;visibility:visible;transform:none}
.srccard[hidden]{display:none}
.srcfig{font:var(--w-hi) var(--d3)/1.15 var(--sans);color:var(--ink);letter-spacing:-.02em;margin:0}
.srclbl{font-size:var(--sm);line-height:1.5;color:var(--ink-mid);margin:7px 0 0}
.srcmeta{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--rule);font-size:var(--xs);color:var(--ink-soft);line-height:1.5}
.srccard blockquote{margin:12px 0 0;padding:13px 15px;background:var(--tint);border-left:3px solid var(--rule);border-radius:0 6px 6px 0;font-size:var(--sm);line-height:1.6;color:var(--ink-mid)}
.srcpending{margin:13px 0 0;font-size:var(--xs);color:var(--ink-soft);font-style:italic;line-height:1.5}
.cite{position:relative;display:inline;border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer}
@media(prefers-reduced-motion:reduce){.srccard{transition-duration:.01ms}}

/* ------------------------------------------------------------- intake forms
 * Rendered by the [hxhr_form] shortcode. Deliberately plain: this sits inside
 * pages that already carry their own card treatment, so the form should read
 * as part of the page rather than as a widget dropped into it. */
.hxform{margin-top:26px}
.hxform-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hxform-fld.wide{grid-column:1 / -1}
.hxform-fld label{display:block;font-size:var(--sm);font-weight:var(--w-mid);margin-bottom:7px;color:var(--ink)}
.hxform-fld label .opt{font-weight:var(--w-body);color:var(--ink-soft)}
.hxform-fld input,.hxform-fld textarea{width:100%;border:1.5px solid var(--rule);border-radius:9px;padding:13px;font:var(--w-body) var(--tx)/1.4 var(--sans);color:var(--ink);background:#fff}
.hxform-fld input:focus,.hxform-fld textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(11,102,243,.14)}
.hxform-fld textarea{resize:vertical;min-height:104px}
.hxform-body button{margin-top:20px}
.hxform-note{margin-top:16px;font-size:var(--xs);color:var(--ink-soft);line-height:1.6}
.hxform-ok{padding:18px 20px;background:var(--green-tint);border:1px solid var(--green-line);border-radius:10px;color:var(--green-dark);font-size:var(--sm);line-height:1.6;margin-bottom:20px}
.hxform-err{padding:18px 20px;background:var(--amber-tint);border:1px solid var(--amber-line);border-radius:10px;color:var(--amber);font-size:var(--sm);line-height:1.6;margin-bottom:20px}
/* Honeypot. Must stay reachable to a bot and invisible to a person, so it is
   moved off-screen rather than display:none, which some bots detect. */
.hxform-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:620px){.hxform-grid{grid-template-columns:1fr}}