/* ============================================================================
CA5 — Circuit History pages — stylesheet
Load this ONCE for your site (or in your CMS theme). Every rule is namespaced
under .ca5-history, so it cannot affect anything outside the history-page
markup. Pair it with the body fragments in brief-history.html and
legislative-history.html.
FONTS — these pages use the SAME typefaces as the rest of the site:
Source Serif 4 (headings) + Inter Tight (body). Those font FILES are loaded
by a in the page (see the note we gave you) — the same link
your other pages already use. This @import is a backup so the stylesheet also
works on its own; if your CMS ignores it, the head is what counts.
COLORS — this file ships NO colors of its own. It inherits the site's active
theme by mapping its internal variables onto the site design tokens
(--c-bg, --c-ink, --c-accent, …). When the site switches theme or dark mode,
these pages follow automatically. The var() fallbacks are only used if a
token is missing, so the page still renders safely on its own.
============================================================================ */
/* ───────── Map component vars → host site tokens (the only theming layer) ─── */
.ca5-history{
--bg: var(--c-bg, #f7f5ef);
--surface: var(--c-surface, var(--c-bg-elev, #fff));
--surface-alt: var(--c-bg-sunk, color-mix(in srgb, var(--c-ink, #1a1814) 6%, var(--c-bg, #fff)));
--ink: var(--c-ink, #1a1814);
--ink-soft: var(--c-ink-2, color-mix(in srgb, var(--c-ink, #1a1814) 80%, var(--c-bg, #fff)));
--ink-muted: var(--c-ink-3, color-mix(in srgb, var(--c-ink, #1a1814) 58%, var(--c-bg, #fff)));
--border: var(--c-line, color-mix(in srgb, var(--c-ink, #1a1814) 14%, transparent));
--border-soft: var(--c-line-soft, color-mix(in srgb, var(--c-ink, #1a1814) 8%, transparent));
--accent: var(--c-accent, #6b1f2a);
--accent-soft: var(--c-accent-soft, color-mix(in srgb, var(--c-accent, #6b1f2a) 14%, var(--c-bg, #fff)));
--accent-ink: var(--c-accent-ink, #fff);
--link: var(--c-link, var(--c-accent, #2b4a7a));
--focus: var(--c-focus, var(--c-accent, #1a6f8e));
--font-serif: var(--f-serif, 'Source Serif 4', Georgia, 'Times New Roman', serif);
--font-sans: var(--f-sans, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
--font-mono: var(--f-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
box-sizing:border-box; max-width:1180px; margin:0 auto;
padding:34px 40px 64px; background:var(--bg); color:var(--ink);
font-family:var(--font-sans); font-size:16px; line-height:1.55;
-webkit-font-smoothing:antialiased;
}
.ca5-history *{box-sizing:border-box;}
.ca5-history a{color:var(--link); text-decoration:none;}
.ca5-history a:hover{text-decoration:underline;}
.ca5-history :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:3px;}
.ca5-history svg.i{display:inline-block; width:11px; height:11px; fill:none; stroke:currentColor;
stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; opacity:.7;}
/* ───────── Breadcrumb ───────── */
.ca5-history__crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:9px;
font-size:13px; color:var(--ink-muted); margin-bottom:30px;}
.ca5-history__crumbs a{color:inherit;}
.ca5-history__crumbs [aria-current]{color:var(--ink);}
/* ───────── Title block ───────── */
.ca5-history__header{border-bottom:1px solid var(--border); padding-bottom:34px; max-width:900px;}
.ca5-history__eyebrow{font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
color:var(--accent); margin-bottom:16px;}
.ca5-history__title{font-family:var(--font-serif); font-weight:400; font-size:54px; line-height:1.04;
letter-spacing:-.015em; margin:0;}
.ca5-history__lead{font-family:var(--font-serif); font-weight:400; font-size:23px; line-height:1.5;
color:var(--ink-soft); margin:22px 0 0; max-width:720px;}
/* ───────── Body + sections ───────── */
.ca5-history__body{margin-top:48px;}
.ca5-history__section{padding-top:48px; margin-top:48px; border-top:1px solid var(--border-soft);}
.ca5-history__section:first-child{border-top:0; padding-top:38px; margin-top:0;}
.ca5-history__h2{font-family:var(--font-serif); font-weight:500; font-size:30px; line-height:1.15;
letter-spacing:-.01em; margin:0 0 8px; color:var(--ink);}
.ca5-history__body p{font-size:17px; line-height:1.72; color:var(--ink-soft); margin:0 0 20px; max-width:720px;}
.ca5-history__note{font-size:15px; line-height:1.6; color:var(--ink-muted); margin:0 0 30px; max-width:680px;}
.ca5-history__prose{max-width:720px;}
/* ───────── Succession roster (Brief History) ───────── */
.ca5-history__roster-label{font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
color:var(--ink-muted); margin:30px 0 4px;}
.ca5-history__roster{list-style:none; margin:8px 0 0; padding:0; max-width:720px; border-top:2px solid var(--ink);}
.ca5-history__roster li{display:flex; align-items:baseline; gap:18px; padding:13px 4px;
border-bottom:1px solid var(--border-soft);}
.ca5-history__roster .num{font-variant-numeric:tabular-nums; font-size:12px; font-weight:600;
color:var(--ink-muted); width:26px; flex:0 0 26px; padding-top:3px;}
.ca5-history__roster .name{font-family:var(--font-serif); font-size:19px; line-height:1.3; color:var(--ink); flex:1;}
.ca5-history__roster .years{font-variant-numeric:tabular-nums; font-size:15px; font-weight:500;
color:var(--ink-muted); white-space:nowrap; letter-spacing:.01em;}
.ca5-history__roster li.current{background:var(--accent-soft); margin:0 -16px; padding-left:20px;
padding-right:16px; border-radius:8px; border-bottom-color:transparent;}
.ca5-history__roster li.current .name,
.ca5-history__roster li.current .years,
.ca5-history__roster li.current .num{color:var(--accent);}
.ca5-history__roster li.current .name{font-weight:600;}
.ca5-history__pill{display:inline-flex; align-items:center; margin-left:12px; padding:2px 10px;
border-radius:999px; background:var(--accent); color:var(--accent-ink); font-size:11px; font-weight:600;
letter-spacing:.06em; text-transform:uppercase; vertical-align:middle;}
/* ───────── Timeline chronology (Legislative History) ───────── */
.ca5-history__tl{list-style:none; margin:0; padding:0; max-width:900px;}
.ca5-history__tl li{position:relative; padding-left:38px; padding-bottom:34px;}
.ca5-history__tl li:last-child{padding-bottom:0;}
.ca5-history__tl li::before{content:""; position:absolute; left:6px; top:9px; bottom:-9px; width:2px; background:var(--border);}
.ca5-history__tl li:last-child::before{display:none;}
.ca5-history__tl li::after{content:""; position:absolute; left:0; top:6px; width:14px; height:14px;
border-radius:50%; background:var(--bg); border:2px solid var(--accent);}
.ca5-history__tl li.key::after{background:var(--accent);}
.ca5-history__tl-row{display:grid; grid-template-columns:170px 1fr; gap:36px; align-items:start;}
.ca5-history__tl-when{padding-top:1px;}
.ca5-history__tl-date{font-family:var(--font-serif); font-weight:600; font-size:18px; line-height:1.25; color:var(--ink);}
.ca5-history__tl li.key .ca5-history__tl-date{color:var(--accent);}
.ca5-history__tl-cite{font-family:var(--font-mono); font-size:12.5px; letter-spacing:.01em; color:var(--ink-muted); margin-top:5px;}
.ca5-history__tl-tag{display:inline-block; margin-top:9px; padding:2px 9px; border-radius:999px;
background:var(--accent-soft); color:var(--accent); font-size:11px; font-weight:600;
letter-spacing:.05em; text-transform:uppercase;}
.ca5-history__tl-desc{font-size:16.5px; line-height:1.72; color:var(--ink-soft); margin:0;}
/* ───────── Judgeships bar chart (Legislative History) ───────── */
.ca5-history__chart{max-width:620px; margin-top:6px; border-top:2px solid var(--ink);}
.ca5-history__jrow{display:grid; grid-template-columns:58px 1fr 34px; gap:20px; align-items:center;
padding:10px 4px; border-bottom:1px solid var(--border-soft);}
.ca5-history__jrow .yr{font-variant-numeric:tabular-nums; font-size:15px; font-weight:500; color:var(--ink-soft);}
.ca5-history__jrow .track{height:13px; background:var(--surface-alt); border-radius:4px; overflow:hidden;}
.ca5-history__jrow .bar{display:block; height:100%; background:var(--accent); border-radius:4px; min-width:3px;}
.ca5-history__jrow.drop .bar{background:color-mix(in srgb, var(--accent) 45%, var(--ink-muted));}
.ca5-history__jrow .ct{font-variant-numeric:tabular-nums; font-size:15px; font-weight:600; text-align:right; color:var(--ink);}
.ca5-history__caption{font-size:13.5px; line-height:1.6; color:var(--ink-muted); margin:16px 0 0; max-width:560px;}
/* ───────── Responsive ───────── */
@media (max-width:880px){
.ca5-history{padding:24px 18px 48px;}
.ca5-history__title{font-size:36px;}
.ca5-history__lead{font-size:20px;}
.ca5-history__h2{font-size:25px;}
.ca5-history__body p,.ca5-history__tl-desc{font-size:16px;}
.ca5-history__tl-row{grid-template-columns:1fr; gap:8px;}
.ca5-history__tl-cite{margin-top:3px;}
.ca5-history__roster li.current{margin:0 -10px; padding-left:14px; padding-right:10px;}
}
@media (prefers-reduced-motion:reduce){
.ca5-history *{transition:none !important;}
}