/* Editorial design: locally rendered type, archival portraits, navy and brass. */
:root {
 --bg-primary:#101c26; --bg-secondary:#14232f; --text-primary:#f3eee4;
 --text-secondary:#bac4c9; --text-muted:#a5b1b8; --accent-gold:#d7b67a;
 --surface-glass:#172733; --surface-glass-hover:#213643;
 --border-glass:rgba(220,231,237,.12); --border-glass-hover:rgba(215,182,122,.55);
 --gradient-text:linear-gradient(110deg,#e8cf9f,#c8a566); --gradient-primary:linear-gradient(110deg,#e8cf9f,#d2af70);
 --radius-lg:14px; --radius-base:8px;
}
body.light { --bg-primary:#f5f1e8; --bg-secondary:#eae5da; --text-primary:#192d39; --text-secondary:#485c67; --text-muted:#596770; --accent-gold:#795a27; --surface-glass:#fffcf6; --surface-glass-hover:#f0e9da; --border-glass:rgba(25,45,57,.16); --border-glass-hover:#957744; --gradient-text:linear-gradient(110deg,#90692b,#6b4d20); }
#bgCanvas { display:none; }
.navbar { border-radius:0; background:var(--bg-primary); border-width:0 0 1px; }
.nav-container { max-width:1240px; height:72px; }
.nav-brand { display:flex; align-items:center; gap:11px; }
.brand-icon { width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--accent-gold); border-radius:50%; color:var(--accent-gold); font-size:15px; }
.brand-icon.brand-flag { width:32px; height:20px; border-radius:3px; border:1px solid rgba(255,255,255,.2); overflow:hidden; padding:0; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.brand-icon.brand-flag img { width:100%; height:100%; display:block; object-fit:cover; }
body.light .brand-icon.brand-flag { border:1px solid rgba(0,0,0,.18); box-shadow:0 1px 3px rgba(0,0,0,.15); }
.badge-flag { display:inline-flex; align-items:center; vertical-align:middle; border-radius:1px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.3); flex-shrink:0; }
.badge-flag img { display:block; width:16px; height:10px; }
.brand-text { font-size:14px; letter-spacing:.16em; }
.brand-text .accent { color:inherit; }
.nav-links { gap:16px; }
.nav-link { display:block; padding:9px 14px; border-radius:5px; font-size:13px; }
.nav-link.active { color:var(--accent-gold); background:var(--surface-glass-hover); }
.theme-toggle { width:38px; height:38px; border-radius:50%; color:var(--text-primary); }
.hero { max-width:1288px; margin:auto; padding:110px 24px 42px; text-align:left; }
.hero-content { max-width:none; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); column-gap:64px; align-items:center; }
.hero-copy { min-width:0; }
.hero-badge { border:0; border-radius:0; background:none; padding:0; font-size:10px; letter-spacing:.12em; text-transform:uppercase; gap:10px; margin-bottom:20px; }
.badge-star { animation:none; font-size:10px; }
.hero-title { font-size:clamp(2.8rem,4.5vw,4.5rem); font-weight:400; letter-spacing:-.055em; line-height:1.03; margin-bottom:22px; }
.hero-title .gradient-text { display:block; font-style:italic; }
.hero-subtitle { max-width:510px; margin:0 0 24px; font-size:15px; line-height:1.75; }
.hero-cta { justify-content:flex-start; }
.btn { min-height:46px; padding:12px 18px; font-size:12px; border-radius:5px; }
.btn-primary { color:#172733; box-shadow:none; }
.btn-primary:hover { box-shadow:0 6px 20px #0002; }
.hero-stats { justify-content:flex-start; gap:24px; margin:24px 0 12px; padding-top:20px; border-top:1px solid var(--border-glass); }
.hero-stat { align-items:flex-start; }
.hero-stat .stat-value { font-weight:400; font-size:32px; background:none; -webkit-text-fill-color:var(--text-primary); }
.hero-stat .stat-label { font-size:8px; letter-spacing:.12em; }
.hero-stat-divider { font-size:24px; color:var(--border-glass-hover); }
.hero-count-note { font-size:10px; line-height:1.7; margin:0; max-width:480px; color:var(--text-muted); }
.hero-portraits { position:relative; margin:0; padding:24px 0 0; }
.portrait-row { display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:12px; align-items:center; }
.portrait-row img { display:block; width:100%; height:265px; object-fit:cover; object-position:50% 15%; border-radius:90px 90px 5px 5px; filter:sepia(.2) saturate(.65); border:1px solid var(--border-glass-hover); }
.portrait-row img:nth-child(2) { height:330px; }
.hero-portraits figcaption { margin-top:20px; display:flex; justify-content:space-between; border-top:1px solid var(--border-glass); padding-top:14px; color:var(--text-muted); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.section, .section.alt { max-width:1288px; padding:60px 24px; }
.section.alt { max-width:none; border-block:1px solid var(--border-glass); }
.section-header { max-width:1240px; text-align:left; margin:0 auto 26px; }
.section-label { padding:0; border:0; background:none; font-size:9px; letter-spacing:.18em; margin-bottom:12px; }
.section-title { font-size:clamp(1.8rem,3vw,2.6rem); font-weight:400; letter-spacing:-.035em; margin-bottom:10px; }
.section-subtitle { font-size:13px; max-width:650px; line-height:1.7; }
#timeline { padding-top:30px; border-top:1px solid var(--border-glass); }
.era-filters { justify-content:flex-start; border-radius:8px; padding:8px; gap:4px; margin-bottom:6px; }
.era-btn { padding:10px 12px; font-size:10px; border-radius:5px; }
.era-btn.active, .sort-btn.active { color:var(--text-primary); background:var(--surface-glass-hover); border-color:var(--border-glass-hover); }
.timeline-scroll { padding:38px 24px; }
.pres-node { margin:0 12px; }
.pres-node .node-circle { width:76px; height:76px; border-color:var(--border-glass-hover); }
.pres-node .node-name { font-size:11px; max-width:95px; color:var(--text-primary); }
.pres-node .node-years { font-size:9px; }
.pres-node .node-number { color:var(--accent-gold); border-color:var(--border-glass-hover); }
.timeline-controls { justify-content:flex-end; gap:12px; }
.timeline-controls .scroll-hint { margin-right:auto; font-size:10px; font-style:normal; }
.timeline-controls button { font-size:11px; min-height:40px; border-radius:5px; }
.view-controls, .gallery-grid { max-width:1240px; }
.view-controls { padding:12px; border-radius:8px; }
.gallery-filter-input { min-height:42px; background:var(--bg-primary); font-size:13px; }
.gallery-grid { padding:0; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.pres-card { padding:24px; border-radius:10px; gap:14px; min-height:235px; }
.pres-card .card-number { font-family:var(--font-display); font-size:36px; font-weight:400; opacity:.25; }
.pres-card .card-img { width:76px; height:90px; flex-shrink:0; border-radius:40px 40px 5px 5px; object-position:50% 15%; border:1px solid var(--border-glass-hover); box-shadow:none; }
.pres-card .card-name { font-weight:400; font-size:21px; letter-spacing:-.02em; padding-right:10px; }
.pres-card .card-party { font-size:9px; }
.pres-card .card-term { margin:0; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-gold); }
.pres-card .card-accomplishment { font-size:12px; line-height:1.75; }
.pres-card:hover { transform:translateY(-3px); box-shadow:0 12px 26px #0002; }
.compare-container { max-width:1240px; }
.compare-selector { border-radius:10px; }
.compare-select { background:var(--bg-primary); font-size:13px; min-height:48px; }
.compare-vs { font-size:13px; letter-spacing:.12em; color:var(--text-muted); }
.compare-placeholder { padding:48px 24px; }
.compare-results { min-height:240px; }
.compare-card h3 { font-weight:400; font-size:25px; margin-bottom:20px; }
.compare-card .detail-row { padding:10px 0; font-size:12px; }
.compare-vs-detail { text-align:left; padding:28px; }
.search-glass { background:var(--bg-secondary); box-shadow:0 24px 90px #0008; padding:12px; }
.search-close { font-size:12px; margin:4px 8px 8px; }
.modal { background:var(--bg-secondary)!important; border-radius:14px; box-shadow:0 30px 100px #0006; }
body.light .modal { background:var(--surface-glass)!important; }
.modal-header .modal-img { width:105px; height:130px; object-position:top; border-radius:55px 55px 6px 6px; border-width:1px; box-shadow:none; }
.modal-header-info h2 { font-weight:400; }
.modal-body h3 { font-size:12px; letter-spacing:.06em; }
.footer { padding:28px 24px; font-size:10px; letter-spacing:.1em; }
.footer-time { margin-top:8px; font-size:9px; letter-spacing:0; }
@media(max-width:1000px) {
 .hero-content { column-gap:30px; }
 .portrait-row { gap:8px; }
 .portrait-row img { height:215px; }
 .portrait-row img:nth-child(2) { height:275px; }
 .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
 .nav-container { height:auto; min-height:64px; }
 .nav-links { gap:12px; }
 .nav-link { font-size:11px; padding:6px 12px; }
 .brand-text { font-size:12px; }
 .hero { padding:126px 20px 30px; }
 .hero-content { display:block; }
 .hero-title { font-size:clamp(2.6rem,10vw,4rem); }
 .hero-badge { font-size:8px; letter-spacing:.06em; }
 .hero-subtitle { font-size:13px; }
 .hero-portraits { padding-top:28px; max-width:440px; margin:auto; }
 .portrait-row img { height:145px; }
 .portrait-row img:nth-child(2) { height:180px; }
 .hero-portraits figcaption { font-size:8px; margin-top:14px; padding-top:10px; }
 .hero-stats { gap:12px; }
 .hero-stat .stat-label { font-size:8px; }
 .hero-count-note { font-size:10px; }
 .section,.section.alt { padding:40px 20px; }
 .section-header { margin-bottom:22px; }
 .era-filters { gap:2px; }
 .era-btn { font-size:9px; padding:9px; }
 .timeline-controls { justify-content:space-between; }
 .timeline-controls .scroll-hint { margin:0; text-align:center; }
 .gallery-grid { grid-template-columns:minmax(0,1fr); }
 .pres-card { min-height:0; }
 .gallery-filter-input { min-width:0; width:100%; flex-basis:100%; }
 .view-sort { gap:2px; }
 .sort-btn { padding:8px; font-size:10px; }
 .compare-selector { padding:16px; }
 .compare-card { padding:20px; }
 .compare-card .detail-label { min-width:74px; }
 .modal { padding:24px; }
 .modal-header { align-items:flex-start; }
 .search-glass { margin:0 12px; }
}
.hero-count-note { font-size:11px; margin-bottom:16px; }
.pres-card .card-party.rep { color:#ffaaa3; background:#b9413526; }
.pres-card .card-party.dem { color:#9fc9f4; background:#3075b526; }
.pres-card .card-party.whig { color:#d9bafa; background:#925cb526; }
.pres-card .card-party.fed { color:#e8cf9f; background:#b18d4126; }
.pres-card .card-party.other { color:#9cd1b4; background:#49826126; }
body.light .pres-card .card-party.rep { color:#8d3029; }
body.light .pres-card .card-party.dem { color:#255887; }
body.light .pres-card .card-party.whig { color:#684184; }
body.light .pres-card .card-party.fed { color:#73531f; }
body.light .pres-card .card-party.other { color:#2b6749; }
body.light .divider-label { color:var(--accent-gold)!important; border-color:var(--border-glass-hover)!important; background:var(--surface-glass)!important; }

/* Search is a single, compact dialog with an integrated close control. */
.search-overlay { padding:clamp(90px,14vh,150px) 20px 24px; }
.search-glass { max-width:640px; margin:0 auto; padding:0; border-radius:14px; overflow:hidden; background:var(--surface-glass); border:1px solid var(--border-glass-hover); }
.search-field-row { display:flex; align-items:center; gap:12px; padding:16px 18px; }
.search-field-icon { width:22px; height:22px; flex-shrink:0; color:var(--accent-gold); }
#searchInput { flex:1; min-width:0; width:auto; padding:10px 0; font-size:17px; border-radius:3px; }
.search-close { display:grid; place-items:center; flex-shrink:0; width:40px; height:40px; margin:0; padding:9px; border:1px solid var(--border-glass); border-radius:8px; background:var(--bg-primary); color:var(--text-secondary); cursor:pointer; }
.search-close svg { width:20px; height:20px; }
.search-close:hover { color:var(--text-primary); border-color:var(--accent-gold); background:var(--surface-glass-hover); }
.search-help { margin:0; padding:0 18px 16px 52px; color:var(--text-muted); font-size:12px; line-height:1.5; }
.search-results { padding:8px; border-top:1px solid var(--border-glass); max-height:min(420px,50dvh); overflow-y:auto; }
.search-results:empty { display:none; }
.search-result-item { min-height:56px; padding:12px; border-radius:7px; gap:12px; }
.search-result-item .sr-name { font-size:14px; font-weight:500; }
.search-result-item .sr-meta { font-size:11px; }
.search-result-item .sr-number { font-size:12px; }
.search-backdrop { background:rgba(4,12,18,.7); backdrop-filter:blur(6px); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:700px) {
 .search-overlay { padding:104px 12px 16px; }
 .search-field-row { padding:12px; gap:10px; }
 #searchInput { font-size:16px; }
 .search-help { padding:0 12px 12px; font-size:11px; }
 .search-result-item .sr-meta { padding-left:42px; }
}
#searchInput:focus-visible { outline:none!important; box-shadow:inset 0 -2px 0 var(--accent-gold); border-radius:0; }

/* Source-linked historical profiles */
.fact-notes, .stat-definition { color: var(--text-secondary); font-size: .78rem; line-height: 1.65; }
.fact-notes { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color, rgba(160,160,160,.2)); }
.fact-notes p + p, .compare-vs-detail p + p { margin-top: 12px; }
.profile-sources { margin-top: 12px; }
.profile-sources summary { cursor: pointer; color: var(--accent-gold); padding: 8px 0; font-weight: 600; }
.profile-sources ul { padding-left: 18px; margin: 12px 0; }
.profile-sources li { margin: 8px 0; }
.profile-sources a { color: var(--accent-gold); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.profile-sources a:focus-visible, .profile-sources summary:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 4px; }
.profile-events-heading { margin: 24px 0 12px; color: var(--accent-gold); }
.compare-card .accomplishment-list li { font-size: .85rem; line-height: 1.6; }
.stat-definition { margin-top: 8px; }
.detail-value { overflow-wrap: anywhere; }

/* Locally stored, source-linked quotes and fun facts. */
.modal-body .profile-quote { border-left: 3px solid var(--accent-gold); }
.profile-fun-fact { margin: 16px 0 24px; padding: 16px 20px; border: 1px solid var(--border-glass); border-radius: var(--radius-sm); color: var(--text-secondary); line-height: 1.7; }
.profile-citation { margin-top: 12px; font-size: .75rem; line-height: 1.6; font-style: normal; }
.profile-citation a { color: var(--accent-gold); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.profile-citation a:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 4px; }