/*
 * BU1ST CABO VERDE ELECTIONS — Flag Edition
 * Editorial art direction: ivory white, scarlet, golden yellow, charcoal.
 * This theme lives ONLY on dev/cabo-verde-2026. Not published.
 * Inspired by Cabo Verde's flag without reproducing a generic blue theme.
 */
:root {
  --navy:#2b2021;
  --deep:#4d1322;
  --ink:#292224;
  --muted:#7d7370;
  --lime:#f4ca3c;
  --sea:#bf1738;
  --paper:#fffaf2;
  --line:#e7dbd0;
  --white:#ffffff;
  --cv-red:#bd1737;
  --cv-red-dark:#86142b;
  --cv-gold:#f4d044;
  --cv-cream:#fffaf2;
  --cv-warm:#f5ece0;
  --cv-charcoal:#292224;
}
html { background:#fffaf2; }
body { background:#fffaf2; color:var(--cv-charcoal); }
::selection { background:#f4d044; color:#2b2021; }
a:focus-visible,button:focus-visible,input:focus-visible { outline-color:#c0203e; }
.top-accent { height:7px; background:linear-gradient(90deg,#bd1737 0 33.3%,#ffffff 33.3% 66.6%,#f4d044 66.6% 100%); }
.development-notice {
 display:flex;align-items:center;justify-content:center;gap:9px;min-height:30px;
 padding:6px 12px;background:#f4d044;color:#3b2920;
 border-bottom:1px solid #d4a429;text-align:center;
 font:800 9px/1.5 var(--mono);letter-spacing:.08em;
}
/* Clean editorial header, not another midnight-blue election interface. */
.header {
 background:rgba(255,250,242,.98);
 color:#2b2222;
 border-bottom:1px solid #e3d0be;
 box-shadow:0 6px 24px rgba(76,35,34,.04);
}
.header-inner { min-height:79px; }
.brand-logo { color:#281f21;letter-spacing:-.1em; }
.brand-logo span { color:#bf1738; }
.brand-line { background:#d0bcb4; }
.brand-cat { color:#bf1738; }
.brand-cat small { color:#8f6d58; }
.nav a { color:#594943; }
.nav a:hover { color:#bc1737; }
.edition { color:#86706a; }
.language {
 min-width:53px;height:39px;background:#bc1737;color:white;
 border:1px solid #bc1737;font-size:12px;
 box-shadow:3px 3px 0 #f4d044;transition:transform .15s;
}
.language:hover { background:#90132d;transform:translate(-1px,-1px); }
.language:focus-visible { outline-color:#f4d044; }
/* Flag-derived typography + two-tone editorial cover. */
.hero {
 background:#fff7e8;
 color:#292022;
 border:1px solid #e4d6c3;
 border-radius:7px;
 box-shadow:0 18px 60px rgba(111,54,42,.055);
}
.hero-copy {
 position:relative;background:#fff7e8;
 border-left:8px solid #bc1737;
}
.hero-copy:before {
 content:"";position:absolute;top:0;right:0;width:106px;height:7px;
 background:linear-gradient(90deg,#f4d044 0 56%,#bc1737 56%);
}
.eyebrow { color:#9a2738;letter-spacing:.1em; }
.eyebrow-bar { background:#bc1737; }
.eyebrow .dot { background:#f2cb35; }
.hero h1 { color:#282020;letter-spacing:-.1em; }
.hero h1 em { color:#bc1737; }
.hero-sub { color:#5e514b; }
.cta { background:#bf1738;color:#fff;border-radius:2px;box-shadow:5px 5px 0 #f4d044; }
.cta:hover { background:#942139;color:#fff; }
.ghost-cta { color:#9b1a36; }
.ghost-cta:hover { color:#651124; }
.hero-bottom { color:#6c5d55;border-top:1px solid #ebdacd;padding-top:18px; }
.hero-bottom strong { color:#2b2423; }
.hero-bottom a { color:#b71736; }
.official-dot { background:#f3cb3b;box-shadow:0 0 0 3px #f7e7b8; }
.hero-visual {
 background:radial-gradient(circle at 63% 29%,#de3c54 0,#bc1737 43%,#821429 100%);
 border-left:1px solid #b3263c;
}
.hero-visual:before {
 content:"";pointer-events:none;position:absolute;inset:-20% -15%;
 background:repeating-radial-gradient(circle at 65% 36%,transparent 0 56px,rgba(255,255,255,.07) 57px 59px,transparent 60px 99px);
}
.hero-visual:after {
 content:"";pointer-events:none;position:absolute;inset:0;
 background:linear-gradient(110deg,rgba(47,12,22,.12),transparent 38%,rgba(47,12,22,.17));
}
.ocean-lines {
 opacity:.13;
 background:repeating-linear-gradient(0deg,transparent,transparent 33px,#fff6ca 34px,#fff6ca 35px),repeating-linear-gradient(90deg,transparent,transparent 42px,#fff6ca 43px,#fff6ca 44px);
}
.archipelago { filter:drop-shadow(0 10px 10px rgba(59,11,24,.25)); }
.archipelago #island stop:first-child { stop-color:#fffadc; }
.archipelago #island stop:last-child { stop-color:#ffd257; }
.archipelago g[stroke="#95b5bc"] { stroke:#ffeab8; }
.archipelago g[fill="url(#island)"] { stroke:#fff8db; }
.archipelago text { fill:#fffbe9; }
.visual-top span,.visual-overlay>span { color:#fffaf0; }
.visual-overlay { border-top-color:rgba(255,246,211,.45); }
.visual-overlay strong { color:#f4d044; }
.visual-overlay strong span { color:#ffe3a7; }
.visual-overlay small { color:#fff0d7; }
.flag { border:2px solid #fff9e6;box-shadow:0 9px 25px #4e101e99; }
.ticker { background:#f4d044;border-block:1px solid #e5b926; }
.ticker-cell { border-right:1px solid #d3a92b; }
.ticker-cell:nth-child(-n+2) { border-bottom-color:#d3a92b; }
.ticker-cell>span { color:#6f3a21; }
.ticker-cell strong { color:#372521; }
.ticker-cell>small { color:#775a36; }
.section-eyebrow { color:#be1838;letter-spacing:.1em; }
.section h2 { color:#312426; }
.section-lead { color:#756a64; }
.section-index { color:#ac9489; }
.text-link { color:#ad1835;border-bottom:2px solid #f4d044; }
.text-link:hover { color:#77152a; }
.results-primary { border-color:#e7d8cc;background:#fff; }
.results-meta { color:#7b5b56;border-bottom-color:#e9dad0; }
.state-pill { color:#7d3a2a;background:#fff2cf;border-color:#edda9b; }
.state-pill .blink { background:#e5af25; }
.results-figure h3 { color:#382a2b; }
.results-figure p { color:#84756d; }
.huge-dash { color:#e1c6bb; }
.results-rows { background:#fff8ef;border-block-color:#e8dcd0; }
.results-rows>div { border-right-color:#e8dcd0; }
.results-rows span { color:#8d776f; }
.results-rows strong { color:#4e2d2b; }
.result-foot>span { color:#81726c; }
.result-foot a { background:#bf1738;color:#fff; }
.result-foot a:hover { background:#831529; }
.results-side {
 background:linear-gradient(145deg,#97162f 0,#711227 100%);
 color:#fffaf1;border-radius:5px;
 box-shadow:inset 0 5px 0 #f4d044;
}
.side-top { color:#ffe8c6; }
.results-side h3 { color:#fff; }
.results-side>p { color:#fae8e3; }
.majority-track { background:#d66f7d; }
.majority-a { background:#f7cb51; }
.majority-marker { background:white;box-shadow:0 0 0 2px #842039; }
.majority-labels { color:#fff; }
.majority-labels strong { color:#fce08c; }
.scenario label { color:#fff2e7; }
.scenario input { accent-color:#f4d044; }
.sim-output span { color:#f4d044; }
.scenario>small { color:#f8d2d2; }
/* Candidate cards, more European editorial than dashboard dark mode. */
.candidates-section {
 background:#f7efe5;
 border-block-color:#ead9cf;
}
.candidate { border:1px solid #ead8cd;background:#fffdf9;box-shadow:0 4px 0 #f0dfd4; }
.candidate:hover { border-color:#c93a54;box-shadow:0 7px 0 #f4d044; }
.candidate-top>span:first-child { color:#bb1939; }
.candidate-top small { color:#b9a19a; }
.candidate-mark { background:#fbe6bb;color:#87283a; }
.candidate-mark.a { background:#f4d044;color:#6d2630; }
.candidate-mark.b { background:#f5ded5;color:#9d213c; }
.candidate-mark.c { background:#bd1737;color:#fff; }
.candidate-mark.d { background:#fff0ac;color:#8a293a; }
.candidate-mark.e { background:#f7bdad;color:#822033; }
.candidate-mark.f { background:#efd2d3;color:#9f1a39; }
.candidate-type { color:#a25950; }
.candidate h3 { color:#342628; }
.candidate p { color:#756961; }
.candidate-link { border-top-color:#efded4;color:#b51a37; }
.candidate-link:hover { color:#81253a; }
.candidate-note p { color:#81726a; }
.info-dot { border-color:#deb7aa;color:#a23346; }
.guide-card { background:#fffdf9;border-color:#e9ddd4;box-shadow:inset 0 3px 0 #f4d044; }
.guide-icon { color:#bc1737; }
.guide-num { color:#b59f95; }
.guide-card h3 { color:#402f31; }
.guide-card p { color:#72635d; }
.guide-bottom { background:#fff0cb;border-left:6px solid #bc1737; }
.guide-bottom>div:first-child>span { color:#9c273b; }
.guide-bottom p { color:#794f45; }
.guide-actions a { background:#bc1737;color:#fff; }
.guide-actions a:hover { background:#871329; }
/* The archipelago panel uses crimson rather than generic dark navy. */
.islands-section {
 background:radial-gradient(ellipse at 10% 0,#b9223d,#81142c 48%,#641225 100%);
 border-block-color:#a42741;
}
.islands-section h2 { color:#fff7ea; }
.islands-section .section-eyebrow { color:#ffe3a1; }
.islands-intro>p { color:#f6dddd; }
.islands-badge { border-top-color:#d26072; }
.islands-badge>span:first-child { color:#f4d044; }
.islands-badge>span:last-child { color:#f7d9cc; }
.islands-panel { background:#fffbf6;color:#3c272b; }
.panel-top { background:#fff1cc;color:#8a293a;border-bottom-color:#ead9bb; }
.island-buttons button { border-color:#e7d6c9;color:#744b47;background:#fffdf7; }
.island-buttons button:hover { border-color:#bc1737; }
.island-buttons button.is-active { background:#bc1737;border-color:#bc1737;color:#fff; }
.island-selected { background:#fff3df;border-color:#ead9c4; }
.island-selected>span:first-child { color:#b01b38; }
.island-selected h3 { color:#4b2830; }
.island-selected p { color:#805f55; }
.island-no-data { color:#8b675d; }
.no-data-dot { background:#d0a75b; }
.timeline-grid { border-color:#e5d6cc; }
.timeline-item { background:#fffdfa;border-right-color:#e8d9cc; }
.timeline-item:nth-child(-n+2) { border-bottom-color:#e8d9cc; }
.timeline-item.focus { background:#f4d044; }
.timeline-item time { color:#ab1a37; }
.timeline-item.focus time { color:#5c2832; }
.timeline-step { color:#bc9f92; }
.timeline-item.focus .timeline-step { color:#7c5a30; }
.timeline-item strong { color:#3d2d2e; }
.timeline-item p { color:#807269; }
.timeline-item.focus p { color:#674b2e; }
.sources-section { background:#f9f0e6;border-top-color:#eadace; }
.source-article { background:#fffdf8;border-color:#e9d7ca; }
.source-article h3 { color:#382a2b; }
.source-kicker { color:#9e5e5a; }
.source-article p { color:#89736c; }
.article-arrow { color:#bc1737; }
.featured-source { background:#bc1737;color:#fff;border-color:#bc1737; }
.featured-source h3 { color:#fff; }
.featured-source .source-kicker { color:#ffe4b2; }
.featured-source p { color:#fbe8e4; }
.featured-source .article-arrow { color:#f4d044; }
.source-directory { border-top-color:#e4d3c7; }
.source-directory>span { color:#947269; }
.source-directory a { color:#ad1938; }
.footer { background:#2b2021;color:#fff9ef;border-top:7px solid #bc1737; }
.footer-logo span { color:#f4d044; }
.footer-logo small { color:#f3c6bb; }
.footer-main p { color:#d5bcb6; }
.footer-links a,.footer-links button { color:#f8e5d6; }
.footer-links a:hover,.footer-links button:hover { color:#f4d044; }
.footer-bottom { border-top-color:#594045;color:#d0aaa3; }
.toast { background:#f4d044;color:#4e2830; }
/* Responsive styling remains in the base file; only editorial colour and accents change. */
@media(max-width:820px) {
 .nav { border-top-color:#e6d3c8; }
 .hero-visual { border-top:4px solid #f4d044;border-left:0; }
 .ticker-cell:nth-child(2) { border-right:0; }
 .timeline-item:nth-child(-n+2) { border-bottom-color:#e8d9cc; }
}
@media(max-width:540px) {
 .development-notice { font-size:8px;padding:5px 8px; }
 .header { border-bottom-color:#ead4c6; }
 .hero-copy { border-left-width:5px; }
 .hero-visual { min-height:319px; }
 .hero h1 { font-size:clamp(52px,13.6vw,77px); }
 .guide-card { border-color:#e9d8ce; }
}


/* CABO VERDE TYPOGRAPHY V3
 * Subtle newspaper-inspired typography: no black/bold display type.
 * Self-hosted Manrope Variable from google/fonts (SIL OFL).
 * Display 300; section headings 350; card headings 400; UI labels 500 maximum.
 */
@font-face {
  font-family:"BU1ST Manrope";
  src:url("./fonts/Manrope-VF.ttf") format("truetype");
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
}
:root {
  --body:"BU1ST Manrope","Helvetica Neue","Segoe UI Variable Text","Segoe UI",Arial,sans-serif;
  --display:"BU1ST Manrope","Helvetica Neue","Segoe UI Variable Display","Segoe UI",Arial,sans-serif;
  --mono:"BU1ST Manrope","Helvetica Neue","Segoe UI Variable Text","Segoe UI",Arial,sans-serif;
}
body {
  font-family:var(--body);
  font-weight:400;
  letter-spacing:-.015em;
  line-height:1.55;
  text-rendering:optimizeLegibility;
  font-synthesis:none;
}
button,input,a { font-family:var(--body); }
p,li,small {font-weight:400;}
/* Branding: controlled and crisp, never extra black. */
.brand-logo,.footer-logo {
  font-weight:400;
  letter-spacing:-.075em;
}
.brand-logo span,.footer-logo span {font-weight:500;}
.brand-cat,.brand-cat small {font-weight:500;letter-spacing:.06em;}
/* Professional masthead with contrast generated by scale and colour, not weight. */
.hero h1 {
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(60px,7.1vw,108px);
  line-height:1.01;
  letter-spacing:-.084em;
}
.hero h1 em {font-weight:300;letter-spacing:inherit;}
.hero-sub {font-weight:350;letter-spacing:-.018em;line-height:1.72;}
.eyebrow,.edition,.visual-top span,.visual-overlay>span,
.hero-bottom,.hero-bottom strong,.hero-bottom a,
.visual-overlay small {
  font-family:var(--body);
  font-weight:500;
  letter-spacing:.045em;
}
.nav a {font-weight:450;letter-spacing:-.012em;}
.language {font-weight:500;}
.cta,.ghost-cta {font-weight:500;letter-spacing:-.005em;}
.development-notice {font-weight:500;letter-spacing:.06em;}
.visual-overlay strong {
  font-weight:300;
  letter-spacing:-.065em;
}
/* Soft data typography with legible numberforms. */
.ticker-cell>span,.ticker-cell>small,
.section-eyebrow,.section-index,.text-link,
.state-pill,.results-meta,.result-foot a,.side-top,
.majority-labels,.scenario label,.sim-output span {
  font-family:var(--body);
  font-weight:500;
  letter-spacing:.035em;
}
.ticker-cell strong {
  font-weight:300;
  letter-spacing:-.06em;
  line-height:1.07;
}
.ticker-cell strong small {font-weight:400;}
.countdown-cell strong {
  font-weight:350;
  font-family:var(--body);
  letter-spacing:-.06em;
}
.section h2 {
  font-family:var(--display);
  font-weight:350;
  letter-spacing:-.064em;
  line-height:1.13;
}
.section-lead {font-weight:350;line-height:1.72;}
.results-figure h3,.results-side h3 {
  font-weight:350;
  letter-spacing:-.05em;
  line-height:1.24;
}
.huge-dash {
  font-weight:200;
  letter-spacing:0;
}
.results-rows span,.results-rows strong {
  font-family:var(--body);
  font-weight:400;
}
.results-rows strong {letter-spacing:-.035em;}
.sim-output strong {font-weight:300;letter-spacing:-.06em;}
.results-side p,.results-figure p,.result-foot>span {
  font-weight:350;
  line-height:1.72;
}
/* Candidate names read as an editorial register, not gaming cards. */
.candidate-top>span:first-child {font-family:var(--body);font-weight:400;}
.candidate-top small {font-weight:400;}
.candidate-mark {
  font-family:var(--body);
  font-weight:450;
  letter-spacing:-.045em;
}
.candidate-type {
  font-family:var(--body);
  font-size:10px;
  font-weight:500;
  letter-spacing:.045em;
}
.candidate h3 {
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(22px,2.05vw,28px);
  line-height:1.26;
  letter-spacing:-.055em;
}
.candidate p {font-weight:350;line-height:1.75;}
.candidate-link {font-family:var(--body);font-weight:500;letter-spacing:.015em;}
.candidate-note p,.info-dot {font-weight:400;}
.guide-icon,.guide-num {
  font-family:var(--body);
  font-weight:350;
}
.guide-card h3 {
  font-weight:450;
  letter-spacing:-.03em;
}
.guide-card p {font-weight:350;line-height:1.75;}
.guide-bottom>div:first-child>span,.guide-actions a {
  font-family:var(--body);
  font-weight:500;
}
.guide-bottom p {font-weight:350;}
/* Island navigator: all controls lightweight, not shouty. */
.islands-badge>span:first-child {font-weight:300;letter-spacing:-.085em;}
.islands-badge>span:last-child,.panel-top,.island-selected>span:first-child,
.island-no-data {
  font-family:var(--body);
  font-weight:500;
  letter-spacing:.035em;
}
.island-buttons button {font-weight:450;letter-spacing:-.01em;}
.island-selected h3 {
  font-family:var(--display);
  font-weight:350;
  letter-spacing:-.055em;
}
.island-selected p {font-weight:350;line-height:1.75;}
/* Timeline and source cards: no condensed black headlines. */
.timeline-item time {
  font-family:var(--display);
  font-weight:300;
  letter-spacing:-.07em;
}
.timeline-item time small,.timeline-step {font-family:var(--body);font-weight:500;}
.timeline-item strong,.timeline-item p {font-weight:400;}
.timeline-item p {line-height:1.7;}
.source-kicker,.source-directory>span,.source-directory a {
  font-family:var(--body);
  font-weight:500;
  letter-spacing:.028em;
}
.source-article h3 {
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-.055em;
  line-height:1.26;
}
.source-article p {font-weight:350;line-height:1.7;}
.footer-links a,.footer-links button {font-weight:450;}
.footer-main p,.footer-bottom {font-weight:350;}
.toast {font-weight:450;}
/* Restrict leftover semantic boldness to a professional medium weight. */
main strong,main b,.footer strong {font-weight:500;}
@media(max-width:820px) {
  .hero h1 {font-size:clamp(61px,10.7vw,92px);line-height:1.02;}
}
@media(max-width:540px) {
  .hero h1 {font-size:clamp(52px,13.3vw,75px);line-height:1.045;letter-spacing:-.078em;}
  .hero-sub {font-size:13px;line-height:1.65;}
  .section h2 {font-size:clamp(30px,8.3vw,42px);line-height:1.15;}
  .candidate h3 {font-size:25px;line-height:1.26;}
  .source-article h3 {font-size:24px;}
  .guide-card h3 {font-size:13px;line-height:1.4;}
  .guide-card p {line-height:1.65;}
  .ticker-cell strong {font-size:27px;}
}


/* COMPACT PAGE NAVIGATION V4
   Homepage is one concise cover, not six stacked pages. Each view is independent.
*/
.view-panel[hidden],.section[data-page][hidden]{display:none!important}
.view-navigation {
 position:sticky;top:79px;z-index:35;
 background:rgba(255,250,242,.98);
 border-bottom:1px solid #eadbd2;
 box-shadow:0 8px 18px rgba(62,34,27,.035);
 backdrop-filter:blur(12px);
}
.view-tabs {
 display:flex;align-items:stretch;gap:clamp(6px,2.2vw,23px);
 overflow-x:auto;overscroll-behavior-x:contain;
 scroll-snap-type:x proximity;scrollbar-width:none;
}
.view-tabs::-webkit-scrollbar{display:none}
.view-tab {
 appearance:none;flex:none;position:relative;display:inline-flex;
 min-height:49px;align-items:center;justify-content:center;
 border:0;border-bottom:2px solid transparent;background:transparent;
 padding:2px 8px;color:#84756c;
 font:450 12px/1.2 var(--body);letter-spacing:-.012em;
 scroll-snap-align:center;transition:color .15s,border-color .15s;
}
.view-tab:hover{color:#9a1937}
.view-tab.is-active,.view-tab[aria-selected="true"]{color:#ae1636;border-bottom-color:#bd1737;font-weight:500}
.view-tab:focus-visible{outline:2px solid #bd1737;outline-offset:-4px}
/* A short first screen: masthead, visual, four dates; no accidental page-long layout. */
.view-panel{min-height:0}
#overview .hero {min-height:0;margin-top:15px;margin-bottom:0}
#overview .hero-copy {padding:clamp(25px,3vw,42px) clamp(24px,3.5vw,46px) 21px;min-height:425px}
#overview .hero h1 {font-size:clamp(56px,6.35vw,89px);margin:29px 0 15px;line-height:1.02}
#overview .hero-sub {font-size:14px;line-height:1.65;margin:0 0 19px;max-width:440px}
#overview .hero-bottom {padding-top:14px}
#overview .hero-visual {min-height:425px}
#overview .archipelago {inset:11% 2% 11%;height:78%}
#overview .ticker {margin-top:13px;border:1px solid #e3ba3a}
#overview .ticker-inner{min-height:78px}
#overview .ticker-cell{padding-top:13px;padding-bottom:13px;gap:4px}
#overview .ticker-cell strong {font-size:28px}
#overview .countdown-cell strong {font-size:22px}
#overview .ticker-cell>span {font-size:9px}
/* Individual pages keep every feature but eliminate theatrical vertical padding. */
.section[data-page] {padding-top:35px;padding-bottom:40px;min-height:0}
.section[data-page] .section-head {margin-bottom:23px}
.section[data-page] h2 {font-size:clamp(31px,3.3vw,48px)}
.section[data-page] .section-lead {margin-top:9px;font-size:13px}
#candidates .candidate {min-height:245px;padding:19px 20px 15px}
#candidates .candidate-type{margin-top:14px}
#candidates .candidate h3{font-size:clamp(20px,1.85vw,25px);line-height:1.19}
#candidates .candidate p{font-size:11.5px;margin-bottom:10px;min-height:0}
#guide .guide-card{min-height:205px}
#guide .guide-card h3{margin-top:24px}
#timeline .timeline-item{min-height:190px}
#timeline .timeline-step{margin:16px 0 9px}
#sources .source-article {min-height:202px}
#sources .source-article h3 {margin-top:17px}
/* Footer is editorial credit, not another giant page. */
.footer{padding:20px 0 13px}
.footer-main{padding-bottom:17px}
.footer-logo {font-size:24px}
.footer-main p {margin:6px 0 0}
@media(max-width:820px){
 .view-navigation{top:66px}
 .view-tabs{gap:5px}
 .view-tab{min-height:45px;padding:3px 11px}
 #overview .hero-copy{min-height:320px}
 #overview .hero-visual{min-height:280px}
 #overview .hero h1{font-size:clamp(53px,8vw,74px);margin:23px 0 13px}
 #overview .hero-bottom{padding-top:10px}
 #overview .archipelago{inset:0 10% 4%;width:80%;height:96%}
}
@media(max-width:540px){
 .development-notice{min-height:22px;font-size:7.5px;letter-spacing:.035em}
 .header-inner{min-height:62px;padding-top:9px;padding-bottom:9px}
 .brand-logo{font-size:24px}
 .brand-cat{font-size:10px}
 .brand-cat small{font-size:8px}
 .view-navigation{top:62px}
 .view-tabs{width:calc(100% - 20px)}
 .view-tab{min-height:44px;padding:3px 10px;font-size:11.5px}
 #overview .hero{grid-template-columns:1fr;margin-top:8px}
 #overview .hero-copy{min-height:0;padding:23px 18px 19px}
 #overview .hero h1{font-size:clamp(48px,11.1vw,63px);margin:26px 0 12px;line-height:1}
 #overview .hero-sub{font-size:12.5px;line-height:1.52;margin-bottom:16px}
 #overview .hero-cta{gap:12px}
 #overview .hero-bottom{margin-top:22px;padding-top:10px}
 #overview .hero-visual{min-height:170px;max-height:185px}
 #overview .archipelago{inset:-6px 10% auto;height:205px;width:80%}
 #overview .visual-top{top:11px}
 #overview .visual-overlay{bottom:8px;padding-top:7px}
 #overview .visual-overlay strong{font-size:28px}
 #overview .ticker{margin-top:8px}
 #overview .ticker-inner{min-height:0;grid-template-columns:repeat(4,minmax(0,1fr))}
 #overview .ticker-cell{min-height:76px;padding:10px 6px;border-bottom:0;border-right:1px solid #d3a92b}
 #overview .ticker-cell:first-child{padding-left:4px}
 #overview .ticker-cell:last-child{border-right:0}
 #overview .ticker-cell>span{font-size:7.2px;line-height:1.4}
 #overview .ticker-cell strong{font-size:22px}
 #overview .ticker-cell strong small{font-size:9px}
 #overview .countdown-cell strong{font-size:13px;letter-spacing:-.07em}
 #overview .ticker-cell>small{font-size:7px}
 .section[data-page]{padding-top:24px;padding-bottom:24px}
 .section[data-page] .section-head{margin-bottom:18px}
 .section[data-page] h2{font-size:clamp(27px,7.3vw,37px)}
 #candidates .candidate-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #candidates .candidate{padding:14px 12px 12px;min-height:230px}
 #candidates .candidate-mark{width:35px;height:35px;font-size:12px}
 #candidates .candidate-top>span:first-child{font-size:12px}
 #candidates .candidate-type{font-size:8px;margin-top:13px;line-height:1.3}
 #candidates .candidate h3{font-size:17px;line-height:1.26;letter-spacing:-.045em;margin:8px 0}
 #candidates .candidate p{font-size:10px;line-height:1.45;margin-bottom:7px}
 #candidates .candidate-link{font-size:8px;padding-top:9px}
 #candidates .candidate-note p{font-size:10px}
 #guide .guide-card{min-height:188px}
 #guide .guide-card h3{margin-top:18px}
 #timeline .timeline-item{min-height:175px}
 #sources .source-article{min-height:175px}
 .footer-main{gap:12px}
 .footer-bottom{font-size:8px}
}
@media(max-width:355px){
 #candidates .candidate-grid{grid-template-columns:1fr}
 #candidates .candidate{min-height:0}
 #overview .ticker-inner{grid-template-columns:1fr 1fr}
 #overview .ticker-cell:nth-child(2){border-right:0}
 #overview .ticker-cell:nth-child(-n+2){border-bottom:1px solid #d3a92b}
}
@media(prefers-reduced-motion:reduce){.view-tab{transition:none}}
/* Keep the mobile illustration's caption legible without covering island markers. */
@media(max-width:540px){
 #overview .hero-visual .archipelago text{display:none}
 #overview .visual-overlay{background:rgba(87,13,33,.82);left:0;right:0;bottom:0;border-top:1px solid rgba(255,232,185,.5);padding:7px 12px;align-items:center}
 #overview .visual-overlay strong{font-size:27px;letter-spacing:-.05em}
 #overview .visual-overlay small{display:none}
}

/* V5: quiet election-day banner + clear language switch. */
.results-announcement {
 display:flex;align-items:center;justify-content:center;gap:12px;
 min-height:35px;padding:7px 16px;
 background:#fff1c6;border-bottom:1px solid #ead8a3;color:#613a35;
 font:450 10px/1.45 var(--body);letter-spacing:.035em;
}
.announcement-marker {display:block;width:7px;height:7px;border:1.5px solid #c12a46;border-radius:50%;flex:none}
.announcement-message {font-weight:450}
.announcement-action {color:#a31c38;font-weight:550;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.announcement-action:hover {color:#6e1629}
.language-picker {
 display:inline-flex;align-items:center;gap:3px;padding:3px;
 background:#fffaf5;border:1px solid #d9c7bf;border-radius:7px;
 box-shadow:0 1px 3px rgba(64,31,34,.06);
}
.language-choice {
 appearance:none;border:1px solid transparent;border-radius:4px;
 min-height:35px;padding:8px 13px;
 background:transparent;color:#805b56;
 font:500 12px/1.1 var(--body);letter-spacing:-.01em;
 white-space:nowrap;box-shadow:none;transition:background .16s,color .16s;
}
.language-choice.is-active {background:#bc1737;color:white;border-color:#bc1737}
.language-choice:not(.is-active):hover {background:#f8e9e1;color:#9d1735}
.language-choice:focus-visible {outline:2px solid #bc1737;outline-offset:2px}
@media(max-width:540px){
 .results-announcement {min-height:32px;gap:8px;padding:6px 9px;font-size:9px;letter-spacing:0}
 .announcement-action {font-size:9px}
 .header-inner {gap:8px}
 .language-picker {padding:2px;gap:0}
 .language-choice {min-height:35px;padding:7px 10px;font-size:11px}
 .header-controls {gap:4px}
}
@media(max-width:370px){
 .header .brand {gap:5px}
 .header .brand-logo {font-size:22px}
 .header .brand-cat {font-size:8px}
 .header .brand-cat small {font-size:7px}
 .language-choice {font-size:10px;padding:7px 8px}
 .results-announcement {flex-wrap:wrap;row-gap:2px}
}