/* Leaders Directory: calm civic look, big readable type, big tap targets.
   Designed for everyday use on budget phones and slow data. No JavaScript, no web fonts. */
:root{
  --forest:#0a3d27; --deep:#006b40; --green:#008751; --green-tint:#e1f3e8; --green-soft:#f2faf5;
  --gold:#f2b705; --gold-deep:#8a5f00; --gold-tint:#fff6d6;
  --ink:#14201a; --muted:#4a5a52; --canvas:#ffffff; --panel:#ffffff; --line:#d9e3dc;
  --red:#a32020; --red-soft:#fbe5e3;
  --indigo:#22307a; --indigo-tint:#e5e8f7; --clay:#b4451f; --clay-tint:#fbe6dc;
  --serif:Georgia,"Iowan Old Style","Noto Serif","Times New Roman",serif;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:14px; --tap:52px; --wa:#25d366; --wa-ink:#063d22; --adire:#1f2a6b;
  /* zone colours: used on the home tile map, the zone cards, and the map key */
  --z-nw:#f6d98a; --z-ne:#f3b98f; --z-nc:#e4edc0; --z-sw:#a9e0bf; --z-se:#bccaf3; --z-ss:#9fdcd6;
  /* adire eleko-style resist-dye motif (white lines; tint it with opacity) */
  --adire-pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Ccircle cx='16' cy='16' r='9'/%3E%3Ccircle cx='16' cy='16' r='4'/%3E%3Cpath d='M44 6l9 9-9 9-9-9z'/%3E%3Cpath d='M0 40c4-4 12-4 16 0s12 4 16 0 12-4 16 0 12 4 16 0'/%3E%3Cpath d='M6 52h20M6 58h20'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='44' cy='15' r='2'/%3E%3Ccircle cx='42' cy='54' r='2'/%3E%3Ccircle cx='50' cy='54' r='2'/%3E%3Ccircle cx='58' cy='54' r='2'/%3E%3C/g%3E%3C/svg%3E");
  /* aso-oke strip-woven band: green, gold, indigo, white */
  --asooke:repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,#008751 0 26px,#f2b705 26px 30px,#1f2a6b 30px 40px,#fff 40px 44px,#006b40 44px 70px,#f2b705 70px 74px,#fff 74px 78px,#1f2a6b 78px 82px);
  --ankara:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Ccircle cx='36' cy='36' r='30'/%3E%3Ccircle cx='36' cy='36' r='20'/%3E%3Ccircle cx='36' cy='36' r='10'/%3E%3Cpath d='M36 0L72 36L36 72L0 36Z'/%3E%3C/g%3E%3Ccircle cx='36' cy='36' r='4' fill='%23f2b705'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font:1.0625rem/1.65 var(--sans);overflow-x:hidden;position:relative;-webkit-tap-highlight-color:transparent}
a,button,.btn,.chip,.tile,.states a,.list>a.li{touch-action:manipulation}
/* Coat of arms watermark: every public page. Fixed, centred, sits behind the content. */
body:not(.admin-body)::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.10;
  background:url("coat-of-arms-green.png") center 62% / min(92vw,680px) auto no-repeat;
  background-image:image-set(url("coat-of-arms-green.webp") type("image/webp"),url("coat-of-arms-green.png") type("image/png"))}
.flagbar,.topbar,.strip,.hero,.pagehead,main,.callout,footer{position:relative;z-index:1}
.finder-wrap{position:relative;z-index:2}
img,svg{max-width:100%;height:auto}
a{color:var(--deep);text-underline-offset:3px}
a:hover{color:var(--deep);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:6px;box-shadow:0 0 0 4px rgba(0,135,81,.22)}
h1,h2,h3{font-weight:800;line-height:1.2;margin:0 0 .5rem;color:var(--forest);letter-spacing:-.01em}
h1{font-size:clamp(1.85rem,5.2vw,2.75rem)} h2{font-size:1.5rem} h3{font-size:1.1rem}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.1rem}
.muted{color:var(--muted)} .small{font-size:.9rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- top of every page ---------- */
.flagbar{height:6px;background:linear-gradient(90deg,var(--green) 0 33.34%,#fff 33.34% 66.67%,var(--green) 66.67%)}
.topbar{background:var(--panel);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:.7rem;padding-bottom:.7rem}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:800;font-size:1.25rem;color:var(--forest);text-decoration:none;margin-right:auto;letter-spacing:-.01em}
.flagmark{display:inline-block;width:32px;height:22px;border-radius:4px;border:1px solid var(--line);background:linear-gradient(90deg,var(--green) 0 33.34%,#fff 33.34% 66.67%,var(--green) 66.67%)}
.admin-topnav{display:flex;gap:.25rem;flex-wrap:wrap}
.admin-topnav a{color:var(--forest);text-decoration:none;font-weight:600;padding:.6rem .95rem;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
.admin-topnav a:hover{background:var(--green-tint)}
.strip{background:var(--green-tint);color:var(--ink);font-size:.88rem;padding:.5rem 0;border-bottom:1px solid #bfe0cd}
.strip a{color:var(--ink);font-weight:700}

/* ---------- shared finder form (search page) ---------- */
.finder{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:1.4rem;box-shadow:0 14px 40px rgba(0,80,45,.20)}
.finder h2{font-size:1.2rem;margin:0 0 .5rem;display:flex;align-items:center;gap:.5rem}
.finder h2 svg{width:20px;height:20px;color:var(--deep);flex:none}
.finder .bar{display:flex;gap:.6rem;flex-wrap:wrap}
.finder .bar .field{position:relative;flex:1 1 260px;display:flex}
.finder .bar .field svg{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--muted);pointer-events:none}
.finder .bar .field input{padding-left:2.6rem}
.finder .bar input,.finder .bar select{flex:1 1 260px;font-size:1.1rem;width:100%}
.finder .bar button{flex:0 0 auto}
.finder .divide{display:flex;align-items:center;gap:.8rem;margin:1.2rem 0;color:var(--muted);font-weight:600}
.finder .divide::before,.finder .divide::after{content:"";height:1px;background:var(--line);flex:1}
.try{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;margin-top:.8rem;font-size:.95rem;color:var(--muted)}
.finder-note{margin:1rem 0 0;font-size:.9rem;color:var(--muted);display:flex;align-items:center;gap:.4rem}
.finder-note svg{width:16px;height:16px;color:var(--deep);flex:none}

/* ---------- inner page header ---------- */
.pagehead{background:var(--green);color:#fff;padding:1.4rem 0 1.7rem}
.pagehead h1{color:#fff;margin:0 0 .25rem;font-size:clamp(1.65rem,4.6vw,2.4rem)}
.pagehead p{color:#eafaf1;margin:0}
.pagehead .crumbs,.pagehead .crumbs a{color:#cbe6d8}
.crumbs{font-size:.92rem;color:var(--muted);margin-bottom:.8rem}
.crumbs a{color:var(--muted)}
.jump{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:1rem}
.jump a{background:rgba(255,255,255,.12);color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;padding:.5rem .9rem;border-radius:999px;min-height:40px;display:inline-flex;align-items:center}
.jump a:hover{background:rgba(255,255,255,.22);color:#fff}

main{padding:1.6rem 0 3rem}
.section{margin-top:2.4rem}
.section > h2{margin-bottom:.35rem}
.section > .lead{color:var(--muted);margin:0 0 1rem;max-width:60ch}

/* ---------- forms and buttons ---------- */
input,select,textarea{font:inherit;color:var(--ink);background:#fff;border:2px solid #b9c9be;border-radius:12px;padding:.6rem .85rem;min-height:var(--tap);max-width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--green);outline:3px solid rgba(0,135,81,.25);outline-offset:0}
textarea{width:100%;min-height:140px}
label{display:block;font-size:1rem;margin:.9rem 0 .25rem;font-weight:700;color:var(--forest)}
.btn,button{justify-content:center;font:inherit;font-weight:700;background:var(--green);color:#fff;border:2px solid var(--green);border-radius:12px;padding:.6rem 1.3rem;min-height:var(--tap);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.45rem;transition:background .15s,border-color .15s,box-shadow .15s}
.btn:hover,button:hover{background:var(--deep);border-color:var(--deep);color:#fff;box-shadow:0 6px 18px rgba(0,135,81,.35)}
.btn.gold,button.gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn.ghost,button.ghost{background:#fff;color:var(--deep);border-color:var(--green)}
.btn.ghost:hover,button.ghost:hover{background:var(--green-tint);color:var(--deep)}
.btn.danger,button.danger{background:var(--red);border-color:var(--red);color:#fff}
.check{display:flex;gap:.6rem;align-items:center;font-weight:400;margin:.6rem 0}
.check input{min-height:auto;width:22px;height:22px}
.searchbox{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:.8rem;display:flex;gap:.6rem;flex-wrap:wrap}
.searchbox input[type=search]{flex:1 1 260px}
.form{max-width:640px}
.form input,.form select{width:100%}
.form .row{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.inline{display:inline}

/* ---------- chips ---------- */
.chips{display:flex;gap:.45rem;flex-wrap:wrap}
.chip{border:1.5px solid #b9d3c3;background:#fff;border-radius:999px;padding:.4rem .95rem;font-size:.95rem;font-weight:600;color:var(--deep);text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.chip:hover{background:var(--green-tint)}
.chip.on{background:var(--green);border-color:var(--green);color:#fff}

/* ---------- state buttons ---------- */
.states{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem}
.states a{display:flex;align-items:center;min-height:var(--tap);padding:.55rem .9rem;background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--forest);font-weight:700;text-decoration:none;transition:background .15s,border-color .15s,box-shadow .15s,transform .15s}
.states a:hover{background:var(--green-tint);border-color:var(--green);box-shadow:0 6px 16px rgba(11,58,41,.08);transform:translateY(-1px)}
.states a.fct{background:var(--green-tint);border-color:#b9d3c3}

/* ---------- lists: one tappable row per thing ---------- */
.list{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.list > .li,.list > a.li{display:flex;align-items:center;gap:.9rem;padding:.95rem 1.1rem;min-height:68px;color:var(--ink);text-decoration:none;border-top:1px solid var(--line);position:relative}
.list > :first-child{border-top:0}
.list > a.li{padding-right:2.6rem}
.list > a.li::after{content:"";position:absolute;right:1.15rem;top:50%;width:9px;height:9px;border-top:2.5px solid #7b9587;border-right:2.5px solid #7b9587;transform:translateY(-50%) rotate(45deg)}
.list > a.li:hover{background:var(--green-soft)}
.list > a.li:hover::after{border-color:var(--green)}
.li .txt{display:block;min-width:0}
.li .txt strong{display:block;font-weight:700;color:var(--forest);overflow-wrap:anywhere}
.li .txt small{display:block;color:var(--muted);font-size:.93rem}
.li .txt em{display:block;font-style:normal;color:var(--muted);font-size:.9rem;margin-top:.1rem}
.li .none{color:var(--muted)}
.cols{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:start}
.cols > .list{height:100%}

/* topic and quick-link tiles */
.tiles{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tile{display:flex;align-items:center;gap:.8rem;min-height:64px;padding:.7rem 1rem;background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--forest);text-decoration:none;font-weight:700;transition:background .15s,border-color .15s,box-shadow .15s,transform .15s}
.tile:hover{background:var(--green-tint);border-color:var(--green);box-shadow:0 8px 20px rgba(11,58,41,.1);transform:translateY(-1px)}
.tile .ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--green-tint);color:var(--deep);flex:none}
.tile .ico svg{width:20px;height:20px}
.tile.t1 .ico{background:var(--gold-tint);color:var(--gold-deep)}
.tile.t2 .ico{background:var(--indigo-tint);color:var(--indigo)}
.tile.t3 .ico{background:var(--clay-tint);color:var(--clay)}

/* ---------- people ---------- */
.avatar{--s:48px;width:var(--s);height:var(--s);flex:none;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:calc(var(--s)*.36);overflow:hidden;object-fit:cover;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line)}
.avatar.h0{background:var(--green-tint);color:var(--deep)}.avatar.h1{background:var(--indigo-tint);color:var(--indigo)}
.avatar.h2{background:var(--gold-tint);color:var(--gold-deep)}.avatar.h3{background:var(--clay-tint);color:var(--clay)}
.avatar.h4{background:#e3f3f6;color:#0b5560}
.person{display:flex;gap:.75rem;align-items:center;color:var(--ink);text-decoration:none}
.person small{display:block;color:var(--muted)}
.person strong{font-weight:700}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.25rem}
.grid{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.grid.wide{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.item{display:block;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;color:var(--ink);text-decoration:none}
.item:hover{background:var(--green-soft)}

/* badges */
.badge{display:inline-flex;align-items:center;font-size:.85rem;font-weight:700;padding:.2rem .7rem;border-radius:999px;background:var(--green-tint);color:var(--deep);border:1px solid #b9d3c3}
.badge.warn{background:var(--gold-tint);color:var(--gold-deep);border-color:#ecd98b}
.badge.plain{background:#fff;color:var(--muted);border-color:var(--line)}

/* ---------- profile ---------- */
.profile{background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.profile .top{display:flex;gap:1.2rem;align-items:center;padding:1.5rem 1.4rem;background:linear-gradient(180deg,var(--green-soft),#fff)}
.profile .top .avatar{--s:104px;border-width:4px;box-shadow:0 0 0 2px var(--line)}
.profile .top h1,.profile .top h2{margin:0 0 .15rem;font-size:clamp(1.55rem,4.4vw,2.1rem)}
.profile .top h2 a{color:inherit;text-decoration:none}
.profile .top .role{color:var(--muted);font-size:1.1rem}
.profile .top .chips{margin-top:.6rem}
.profile .inner{padding:0 1.4rem 1.4rem}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.7rem;margin:1.1rem 0}
.facts div{background:var(--green-soft);border:1px solid var(--line);border-radius:12px;padding:.65rem .9rem;font-weight:700;color:var(--forest)}
.facts span{display:block;font-size:.82rem;color:var(--muted);font-weight:600}
.profile h3.sub{margin:1.4rem 0 .6rem;font-size:1.2rem}
.contacts{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.contact{border:1.5px solid var(--line);border-radius:14px;padding:.85rem 1rem;background:#fff;display:flex;flex-direction:column;gap:.15rem}
.contact > span{font-size:.88rem;color:var(--muted);font-weight:600}
.contact b{font-weight:700;overflow-wrap:anywhere;font-size:1.08rem;color:var(--forest)}
.contact b.muted{color:var(--muted);font-weight:600}
.contact .go{margin-top:.5rem;align-self:flex-start}
.contact .go .btn{min-height:46px;padding:.4rem 1.1rem}
.contact.locked{border-style:dashed;background:var(--canvas)}
.contact.locked .small a{font-weight:600}
.contact.shared{background:var(--green-soft);border-color:var(--green)}
.contact .note{font-size:.85rem;color:var(--muted);margin-top:.35rem}
.footnote{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:1.4rem;padding-top:.9rem;font-size:.92rem;color:var(--muted)}
.sample{background:var(--gold-tint);border:1px solid #ecd98b;color:var(--ink);border-radius:10px;padding:.6rem .9rem;font-size:.92rem;margin-bottom:1rem}
.officedetails{display:grid;gap:.5rem}
.officedetails div{display:flex;gap:.75rem;flex-wrap:wrap}
.officedetails b{min-width:6.5rem;color:var(--forest)}

/* ---------- notices ---------- */
.notice{background:#fff;border:1px solid var(--line);border-left:8px solid var(--green);border-radius:var(--r);padding:1.2rem 1.4rem}
.notice h2{font-size:1.3rem;margin-bottom:.6rem}
.notice ul{margin:0;padding-left:1.2rem;display:grid;gap:.5rem}
.notice a{font-weight:700;color:var(--forest)}
.empty{background:#fff;border:1px dashed #b9c9be;border-radius:var(--r);padding:1.3rem;color:var(--muted)}
.empty strong{color:var(--forest);display:block;margin-bottom:.2rem}
.flash{border-radius:12px;padding:.8rem 1rem;margin:0 0 1rem;font-weight:600}
.flash.ok{background:var(--green-tint);color:var(--forest);border:1px solid var(--green)}
.flash.error{background:var(--red-soft);color:var(--red);border:1px solid var(--red)}
.callout{background:var(--green-tint);border-top:1px solid #b9d3c3;padding:1.6rem 0}
.callout .wrap{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.callout p{margin:0;max-width:56ch}
.callout strong{color:var(--forest);font-size:1.15rem;display:block}

/* filters that hide until asked for */
details.more{margin-top:.8rem}
details.more summary{cursor:pointer;font-weight:700;color:var(--deep);min-height:44px;display:flex;align-items:center}
details.more .fields{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:.4rem}
details.more select{width:100%}
.results-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin:1.4rem 0 .7rem}
.results-head h2{margin:0}

/* tables (admin, former holders) */
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.82rem;color:var(--muted);font-weight:700}
.tablewrap{overflow-x:auto}
.legal h2{margin-top:1.6rem}
.legal p,.legal li{max-width:68ch}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;margin:1.25rem 0}
.stat{background:var(--panel);border:1px solid var(--line);border-top:5px solid var(--green);border-radius:12px;padding:.7rem .9rem}
.stat:nth-child(2){border-top-color:var(--gold)}
.stat:nth-child(3){border-top-color:var(--indigo)}
.stat:nth-child(4){border-top-color:var(--clay)}
.stat b{display:block;font-size:1.8rem;color:var(--forest)}
.stat span{color:var(--muted);font-size:.88rem}

/* ---------- footer ---------- */
footer{background:var(--deep);color:#e6f6ed;padding:1.8rem 0 2.2rem;font-size:.95rem}
footer .wrap > p{max-width:70ch;margin-top:0}
footer a{color:#b8f0d0}
footer nav{display:flex;gap:.4rem 1.4rem;flex-wrap:wrap;margin-top:.9rem}
footer nav a{min-height:40px;display:inline-flex;align-items:center}

@media (prefers-reduced-motion:no-preference){
  .states a,.tile,.list > a.li,.btn,button,.chip{transition:background .15s,border-color .15s}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- phones ---------- */
@media (max-width:760px){
  body{font-size:1.05rem}
  .wrap{padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}
  .topbar .wrap{gap:.4rem}
  .brand{font-size:1.15rem}
  .finder{padding:1.1rem;border-radius:18px}
  .finder .bar{flex-direction:column}
  .finder .bar .field,
  .finder .bar input,.finder .bar select,.finder .bar button{width:100%;flex:none}
  .searchbox{flex-direction:column}
  .searchbox input[type=search],.searchbox select,.searchbox button{width:100%;flex:none}
  .states{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
  .profile .top{flex-direction:column;align-items:flex-start;padding:1.2rem 1.1rem}
  .profile .top .avatar{--s:88px}
  .profile .inner{padding:0 1.1rem 1.2rem}
  .contacts{grid-template-columns:1fr}
  .contact .go .btn{width:100%}
  .contact .go{align-self:stretch}
  .facts{grid-template-columns:repeat(2,1fr)}
  .footnote{flex-direction:column}
  .callout .wrap .btn{width:100%}
  .grid,.grid.wide{grid-template-columns:1fr}
  .form{max-width:none}
  .jump{gap:.35rem}
  .jump a{font-size:.88rem;padding:.45rem .75rem}
  table{font-size:.88rem}
  th,td{padding:.5rem .5rem}
}

/* ---------- small phones ---------- */
@media (max-width:380px){
  .states{grid-template-columns:1fr}
  h1{font-size:1.6rem}
}
@media print{body::before{display:none}.topbar,.strip,.callout,.jump{display:none}}

/* ---------- "send new information" form ---------- */
fieldset.steps{border:0;padding:0;margin:0 0 1.6rem;min-width:0}
fieldset.steps legend{font-size:1.2rem;font-weight:800;color:var(--forest);padding:0;margin-bottom:.3rem}
.choices{display:grid;gap:.5rem;margin-top:.5rem}
.choice{display:flex;align-items:center;gap:.8rem;margin:0;min-height:var(--tap);padding:.7rem 1rem;background:#fff;border:2px solid var(--line);border-radius:12px;font-weight:600;color:var(--ink);cursor:pointer}
.choice input{width:22px;height:22px;min-height:auto;flex:none;accent-color:var(--green)}
.choice:has(input:checked){border-color:var(--green);background:var(--green-soft)}
.choice:hover{border-color:#8fb9a2}
.officedetails span,.officedetails a{flex:1 1 12rem;min-width:0}


/* =====================================================================
   Header, mega menus, mobile tab bar, footer
   ===================================================================== */
.topbar{position:relative;z-index:30}
.topbar .wrap{position:relative;padding-top:0;padding-bottom:0;min-height:68px;flex-wrap:nowrap}
.crest{width:auto;height:31px;flex:none}
.brand{white-space:nowrap}
.mainnav{display:flex;align-items:stretch;gap:.1rem;align-self:stretch}
.mainnav > a,.mainnav .dd > a{display:inline-flex;align-items:center;gap:.45rem;padding:0 .9rem;font-weight:600;color:var(--forest);text-decoration:none;position:relative;border-radius:0;min-height:0;background:none}
.mainnav > a:hover,.mainnav .dd:hover > a,.mainnav .dd:focus-within > a{background:var(--green-soft);color:var(--deep)}
.mainnav a.on::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:0;height:4px;border-radius:4px 4px 0 0;background:var(--green)}
.mainnav .ico-svg{width:19px;height:19px;color:var(--green)}
.mainnav .cta{align-self:center;margin-left:.6rem;padding:.6rem 1.1rem;min-height:44px;background:var(--green);color:#fff;border-radius:999px}
.mainnav .cta:hover{background:var(--deep);color:#fff}
.dd{display:flex;align-items:stretch}
.panel{display:none;position:absolute;left:0;right:0;top:100%;z-index:40}
.dd:hover .panel,.dd:focus-within .panel{display:block}
.panel-in{background:#fff;border:1px solid var(--line);border-top:3px solid var(--green);border-radius:0 0 18px 18px;box-shadow:0 24px 48px rgba(0,60,35,.20);padding:1.2rem 1.4rem 1.4rem}
.panel-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.9rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.panel-top strong{font-family:var(--serif);font-size:1.15rem;color:var(--forest)}
.panel-top a{font-weight:700;font-size:.95rem}
.mega-zones{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.mega-zones h3{font-size:.95rem;margin:0 0 .4rem;color:var(--deep)}
.mega-zones ul,.mega-links,.mega-topics{list-style:none;margin:0;padding:0}
.mega-zones a{display:block;padding:.28rem .5rem;margin:0 -.5rem;border-radius:8px;color:var(--ink);text-decoration:none;font-size:.96rem}
.mega-zones a:hover{background:var(--green-tint);color:var(--deep)}
.mega-links{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.mega-links a{display:flex;gap:.75rem;align-items:center;padding:.65rem .7rem;border-radius:12px;text-decoration:none;color:var(--ink)}
.mega-links a:hover,.mega-topics a:hover{background:var(--green-tint)}
.mega-links b{display:block;color:var(--forest)}
.mega-links small{display:block;color:var(--muted);font-size:.88rem;line-height:1.35}
.mega-topics{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem}
.mega-topics a{display:flex;gap:.7rem;align-items:center;padding:.55rem .7rem;border-radius:12px;text-decoration:none;color:var(--forest);font-weight:600}
.mi{width:38px;height:38px;border-radius:11px;background:var(--green-tint);color:var(--deep);display:grid;place-items:center;flex:none}
.mi .ico-svg{width:21px;height:21px}
.mainnav .mi .ico-svg{color:var(--deep)}

.tabbar{display:none}
@media (max-width:900px){
  .mainnav{display:none}
  .topbar .wrap{min-height:58px}
  body:not(.admin-body){padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,60,35,.10);padding:.3rem .3rem calc(.3rem + env(safe-area-inset-bottom))}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;min-height:54px;border-radius:12px;text-decoration:none;color:var(--muted);font-size:.74rem;font-weight:700}
  .tabbar .ico-svg{width:24px;height:24px}
  .tabbar a.on{color:var(--deep);background:var(--green-tint)}
}

footer{background:var(--forest);color:#dcefe4;padding:2.4rem 0 2.4rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;padding-bottom:1.6rem;margin-bottom:1.4rem;border-bottom:1px solid rgba(255,255,255,.18)}
.foot-brand .brand{color:#fff;margin-bottom:.5rem}
.foot-brand p{margin:0;color:#c5e2d2;max-width:28ch}
.foot-grid nav{display:flex;flex-direction:column;gap:.1rem;margin:0}
.foot-grid h3{color:#fff;font-size:1rem;margin:0 0 .5rem}
.foot-grid a{color:#b8f0d0;text-decoration:none;min-height:40px;display:inline-flex;align-items:center;font-weight:500}
.foot-grid a:hover{color:#fff;text-decoration:underline}
.foot-disc{margin:0;max-width:78ch;font-size:.9rem;color:#c5e2d2}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* =====================================================================
   Homepage
   ===================================================================== */
body.home::before{opacity:.09}
.hero{position:relative;background:linear-gradient(160deg,#00a25f 0%,var(--green) 42%,#005a37 100%);color:#fff;padding:2.2rem 0 7.4rem;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;background:var(--adire-pat) 0 0/64px 64px}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-family:var(--serif);font-weight:700;color:#fff;font-size:clamp(2.1rem,5.6vw,3.6rem);line-height:1.06;letter-spacing:-.015em;max-width:19ch;margin:0 0 .8rem}
.hero .sub{color:#eafaf1;font-size:1.15rem;max-width:42ch;margin:0}
.herosearch{display:flex;gap:.5rem;align-items:center;background:#fff;border-radius:18px;padding:.45rem;margin-top:1.4rem;max-width:720px;box-shadow:0 14px 34px rgba(0,50,28,.30)}
.herosearch .field{position:relative;flex:1;min-width:0}
.herosearch .field .ico-svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:22px;height:22px;color:var(--muted);pointer-events:none}
.herosearch input{width:100%;border:0;border-radius:12px;min-height:56px;padding-left:3rem;font-size:1.05rem;background:transparent;text-overflow:ellipsis}
.herosearch input:focus{outline:3px solid rgba(0,135,81,.35);outline-offset:0}
.herosearch button{min-height:56px;padding:0 1.6rem;font-size:1.05rem;border-radius:13px}
.hero .try{margin-top:.9rem;color:#eafaf1}
.hero .chip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);color:#fff}
.hero .chip:hover{background:rgba(255,255,255,.28)}
.statejump{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:1.1rem}
.statejump label{margin:0;color:#fff;font-weight:600;flex:0 0 100%}
.statejump select{flex:1 1 240px;max-width:340px;border-color:transparent;background:#fff}
.statejump button.light{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.statejump button.light:hover{background:#fff;color:var(--deep);border-color:#fff;box-shadow:none}
.herostats{display:flex;flex-wrap:wrap;gap:.3rem 0;list-style:none;margin:1.4rem 0 0;padding:0;color:#eafaf1;font-size:.98rem}
.herostats li{padding-right:1.1rem;margin-right:1.1rem;border-right:1px solid rgba(255,255,255,.4)}
.herostats li:last-child{border:0;margin:0;padding:0}
.herostats b{font-family:var(--serif);font-size:1.6rem;color:#fff;margin-right:.25rem}

/* navigation hub overlapping the hero */
.hub{position:relative;z-index:2;margin-top:-5.6rem}
.hub-primary{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:.9rem}
.door{display:flex;align-items:center;gap:.95rem;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:16px;padding:.9rem 1rem;min-height:var(--tap);transition:background .15s,border-color .15s,box-shadow .15s}
.door:hover{background:var(--green-soft);border-color:var(--green);box-shadow:0 8px 22px rgba(0,80,45,.14)}
.door-ico{width:46px;height:46px;border-radius:13px;background:var(--green-tint);color:var(--deep);display:grid;place-items:center;flex:none}
.door-ico .ico-svg{width:25px;height:25px}
.door-txt{flex:1;min-width:0}
.door-txt b{display:block;color:var(--forest);font-size:1.05rem;line-height:1.25}
.door-txt small{display:block;color:var(--muted);font-size:.9rem;line-height:1.4;margin-top:.15rem}
.door-meta{display:flex;align-items:center;gap:.5rem;color:var(--deep);flex:none}
.door-meta em{font-style:normal;font-weight:800;font-size:.9rem;background:var(--green-tint);border-radius:999px;padding:.15rem .65rem}
.door-meta .ico-svg{width:20px;height:20px}
.door.big{background:var(--forest);border-color:var(--forest);color:#fff;padding:1.2rem 1.3rem;gap:1.1rem;box-shadow:0 16px 34px rgba(0,50,28,.30)}
.door.big:hover{background:#0d4b31;border-color:#0d4b31}
.door.big .door-ico{width:60px;height:60px;border-radius:16px;background:rgba(255,255,255,.14);color:#fff}
.door.big .door-ico .ico-svg{width:32px;height:32px}
.door.big .door-txt b{font-family:var(--serif);font-size:1.5rem;color:#fff}
.door.big .door-txt small{color:#cfe8da;font-size:.95rem}
.door.big .door-meta{flex-direction:column;align-items:flex-end;gap:.6rem;color:#fff}
.door.big .door-meta em{background:rgba(255,255,255,.16);color:#fff;white-space:nowrap}
.door.big .door-meta .ico-svg{width:24px;height:24px}

/* sections */
.home main{padding-top:.5rem}
.home .section{margin-top:3.2rem}
.sec-head{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:.3rem 1.5rem;margin-bottom:1rem}
.sec-head h2{font-family:var(--serif);font-size:clamp(1.55rem,3.6vw,2.05rem);margin:0;color:var(--forest)}
.sec-head .lead{grid-column:1/-1;margin:0;color:var(--muted);max-width:62ch}
.more-link{font-weight:700}

.zonejump{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.1rem}
.zonejump .chip small{margin-left:.45rem;background:var(--green-tint);border-radius:999px;padding:0 .5rem;font-weight:800}
.zones{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.zone{background:#fff;border:1px solid var(--line);border-top:4px solid var(--green);border-radius:16px;padding:1rem 1rem 1.1rem;scroll-margin-top:1rem}
.zone h3{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--serif);font-size:1.25rem;margin:0 0 .7rem;color:var(--forest)}
.zone h3 span{font-family:var(--sans);font-size:.85rem;font-weight:600;color:var(--muted)}
.zstates{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.zstates a{position:relative;display:block;padding:.55rem .7rem .65rem;border-radius:11px;background:var(--green-soft);border:1px solid transparent;text-decoration:none;min-height:54px;overflow:hidden}
.zstates a:hover{background:var(--green-tint);border-color:var(--green)}
.zstates b{display:block;color:var(--forest);font-size:.98rem;line-height:1.25}
.zstates small{display:block;color:var(--muted);font-size:.8rem}
.cov{position:absolute;left:0;bottom:0;height:3px;width:var(--p);background:var(--green)}
.lga-bar{display:block;height:6px;border-radius:4px;background:var(--green-tint);overflow:hidden;margin-top:.4rem;max-width:240px}
.lga-bar i{display:block;height:100%;width:var(--p);background:var(--green);border-radius:4px}
.lga-bar-hero{max-width:280px;background:rgba(255,255,255,.3)}
.lga-bar-hero i{background:#fff}
.lga-row{flex-wrap:wrap;row-gap:.6rem}
.lga-row .txt{display:block;min-width:0;flex:1 1 220px;color:inherit;text-decoration:none}
.lga-row .txt:hover strong{color:var(--green)}
.lga-cta{flex:none;padding:.5rem 1rem;font-size:.85rem;white-space:nowrap}

.topics{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
.topic{display:flex;align-items:center;gap:.8rem;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.75rem .85rem;min-height:66px;transition:background .15s,border-color .15s}
.topic:hover{background:var(--green-soft);border-color:var(--green)}
.topic b{display:block;color:var(--forest);line-height:1.25}
.topic small{color:var(--muted);font-size:.85rem}

.helpgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.helpgrid .door{align-items:flex-start;padding:1.1rem}
.helpgrid .door-meta{align-self:center}
.home .notice{border-left-color:var(--green)}

@media (max-width:1000px){
  .zones{grid-template-columns:repeat(2,1fr)}
  .topics{grid-template-columns:repeat(3,1fr)}
  .hub-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .hero{padding:1.8rem 0 7rem}
  .hero .sub{font-size:1.05rem}
  .herosearch{flex-direction:column;align-items:stretch;padding:.5rem}
  .herosearch button{width:100%}
  .statejump select{max-width:none;flex:1 1 100%}
  .statejump button{width:100%}
  .herostats{font-size:.9rem}
  .herostats li{padding-right:.8rem;margin-right:.8rem}
  .herostats b{font-size:1.35rem}
  .hub{margin-top:-4.8rem}
  .hub-primary,.hub-grid,.helpgrid{grid-template-columns:1fr}
  .door.big{padding:1rem 1.05rem}
  .door.big .door-ico{width:52px;height:52px}
  .door.big .door-txt b{font-size:1.3rem}
  .door.big .door-meta em{display:none}
  .zones{grid-template-columns:1fr}
  .topics{grid-template-columns:repeat(2,1fr)}
  .topic{flex-direction:column;align-items:flex-start;gap:.5rem}
  .home .section{margin-top:2.6rem}
}
@media (max-width:380px){.topics{grid-template-columns:1fr}.topic{flex-direction:row;align-items:center}}
@media print{.hero::before,.tabbar,.mainnav{display:none}}
.admin-body .topbar .wrap{flex-wrap:wrap;padding-top:.7rem;padding-bottom:.7rem;min-height:0}

.home .avatar.h1,.home .avatar.h2,.home .avatar.h3,.home .avatar.h4{background:var(--green-tint);color:var(--deep)}
.topic small.none{color:var(--muted)}
@media (max-width:760px){.statejump{display:none}.hero .try{margin-top:.8rem}.hero{padding-bottom:6.6rem}}

/* ---------- social media links (X / Twitter, Facebook) ---------- */
.socials-label{margin:.9rem 0 .4rem}
.socials{display:flex;flex-wrap:wrap;gap:.6rem}
.social{display:inline-flex;align-items:center;gap:.7rem;min-height:var(--tap);max-width:100%;padding:.5rem 1.1rem .5rem .8rem;
  background:#fff;border:1.5px solid var(--line);border-radius:14px;color:var(--forest);text-decoration:none;
  transition:background .15s,border-color .15s}
.social:hover{background:var(--green-soft);border-color:var(--green);color:var(--deep);text-decoration:none}
.social svg{width:22px;height:22px;flex:none}
.social span{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.social small{font-size:.8rem;font-weight:600;color:var(--muted)}
.social b{font-weight:700;overflow-wrap:anywhere}
@media (max-width:760px){.socials .social{flex:1 1 100%}}

/* ---------- previous / next person on a profile ---------- */
.pnav{display:grid;grid-template-columns:1fr auto 1fr;gap:.7rem;align-items:stretch;margin:0 0 1rem}
.profile + .pnav{margin:1rem 0 0}
.pnav .pos{align-self:center;text-align:center;font-size:.9rem;font-weight:600;color:var(--muted);max-width:16rem}
.pn{display:flex;flex-direction:column;gap:.1rem;min-width:0;min-height:var(--tap);padding:.65rem 1rem;background:#fff;
  border:1.5px solid var(--line);border-radius:14px;color:var(--forest);text-decoration:none;transition:background .15s,border-color .15s}
.pn.ph{visibility:hidden;border:0;padding:0}
a.pn:hover{background:var(--green-soft);border-color:var(--green);color:var(--deep);text-decoration:none}
.pn .dir{display:flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--deep)}
.pn .dir .ico-svg{width:18px;height:18px}
.pn.prev .dir{flex-direction:row-reverse;justify-content:flex-end}
.pn.prev .dir .ico-svg{transform:scaleX(-1)}
.pn.next{text-align:right;align-items:flex-end;border-color:var(--green)}
.pn.next .dir{justify-content:flex-end}
.pn b{font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.pn small{font-size:.85rem;color:var(--muted);line-height:1.3;overflow-wrap:anywhere}
@media (max-width:760px){
  .pnav{grid-template-columns:1fr 1fr}
  .pnav .pos{grid-column:1/-1;order:-1;max-width:none}
  .pnav .pn.ph{display:none}
  .pnav.only-next .pn.next,.pnav.only-prev .pn.prev{grid-column:1/-1}
}

/* ---------- personal contacts sub-heading on a profile ---------- */
.contacts-sub{margin:1.3rem 0 .6rem;font-size:1.02rem;font-weight:800;color:var(--forest)}

/* ---------- local governments ---------- */
.lgasearch{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:1.1rem}
.lgasearch label{flex:0 0 100%;margin:0;font-weight:700;color:var(--forest)}
.lgasearch input[type=search]{flex:1 1 260px;max-width:420px}
.lga-summary{margin:.2rem 0 .9rem}
.lga-grid{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.lga{display:flex;flex-direction:column;gap:.15rem;padding:.75rem .95rem;min-height:64px;background:var(--panel);border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none;touch-action:manipulation;transition:background .15s,border-color .15s}
.lga:hover{background:var(--green-soft);border-color:#b9d3c3}
.lga strong{font-size:1rem;line-height:1.25}
.lga small{color:var(--muted);font-size:.88rem;line-height:1.3}
.lga.led{border-left:4px solid var(--green)}
.lga.led small{color:var(--deep);font-weight:600}
@media (max-width:520px){
  .lga-grid{grid-template-columns:repeat(2,1fr);gap:.5rem}
  .lga{padding:.65rem .75rem}
  .lgasearch input[type=search],.lgasearch button{width:100%;max-width:none;flex:none}
}

/* ---------- Find my leaders ---------- */
/* Home hero box. Unlike the old state jump this stays on small screens, because picking a
   local government is the main thing people come here to do. */
.findbox{background:#fff;border-radius:18px;padding:1.1rem 1.15rem 1.25rem;margin-top:1.3rem;max-width:720px;
  box-shadow:0 14px 34px rgba(0,50,28,.30);color:var(--ink)}
.findbox h2{font-size:1.15rem;margin:0 0 .3rem;display:flex;align-items:center;gap:.55rem;color:var(--forest)}
.findbox-ico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;
  border-radius:10px;background:var(--green-tint);color:var(--deep)}
.findbox-ico svg{width:20px;height:20px}
.findbox p{margin:0 0 .85rem;color:var(--muted);font-size:.95rem;line-height:1.5}
.findbox-row{display:flex;gap:.5rem;flex-wrap:wrap}
.findbox-row select{flex:1 1 220px;min-width:0}
.findbox-row button{flex:0 0 auto}
.hero .findbox a{color:var(--deep)}

/* The finder page uses the shared .finder card, widened and left-aligned. */
.finder.findbox{max-width:640px;box-shadow:0 10px 30px rgba(0,80,45,.14);border:1px solid var(--line);padding:1.4rem}
.finder.findbox .bar select{flex:1 1 260px}

.leaders{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));margin-top:1.4rem}
.leader{background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--green);
  border-radius:var(--r);padding:1rem 1.15rem}
.leader.empty{border-left-color:#c9d6ce;background:var(--green-soft)}
.leader-head h2{font-size:1.05rem;margin:0}
.leader-head p{margin:.1rem 0 .7rem}
.leader-person{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:var(--ink);
  padding:.55rem;margin:0 -.55rem;border-radius:12px}
.leader-person:hover{background:var(--green-soft)}
.leader-person .txt{display:block;min-width:0}
.leader-person .txt strong{display:block;font-size:1.12rem;color:var(--forest);line-height:1.25;overflow-wrap:anywhere}
.leader-person .txt small{display:block;color:var(--muted)}
.leader-person .txt em{display:block;font-style:normal;color:var(--muted);font-size:.88rem;overflow-wrap:anywhere}
.leader-person .txt i{display:inline-block;font-style:normal;font-size:.8rem;font-weight:700;margin-top:.3rem;
  padding:.1rem .5rem;border-radius:999px}
.leader-person .txt i.ok{background:var(--green-tint);color:var(--deep)}
.leader-person .txt i.warn{background:var(--gold-tint);color:var(--gold-deep)}
.leader-acts{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.7rem}
.leader-acts .btn{min-height:44px;padding:.4rem .9rem;font-size:.92rem}
.leader-none p{margin:.2rem 0 .5rem;font-size:.95rem;line-height:1.55}
.leader-none strong{color:var(--forest)}
.leader-office{margin:.8rem 0 0;padding-top:.7rem;border-top:1px solid var(--line)}
.findagain{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.5rem 0 0}
.findagain .btn{min-height:46px}
@media (max-width:560px){
  .leaders{grid-template-columns:1fr}
  .findbox-row select,.findbox-row button{flex:1 1 100%}
  .findagain .btn{width:100%}
}

/* =====================================================================
   Nigerian identity layer: tile map, aso-oke bands, adire patterns,
   action buttons, civic tools. Motion: one orchestrated moment (the map
   assembling on the home page); everything else answers a tap or hover.
   ===================================================================== */

/* ---------- aso-oke band under page headers and above the footer ---------- */
.pagehead{position:relative;overflow:hidden;background:linear-gradient(160deg,#00965a 0%,var(--green) 45%,#005a37 100%);padding-bottom:2.1rem}
.pagehead::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.08;background:var(--adire-pat) 0 0/64px 64px}
.pagehead::after,footer::before{content:"";position:absolute;left:0;right:0;height:10px;background:var(--asooke)}
.pagehead::after{bottom:0}
footer::before{top:0}
.pagehead .wrap{position:relative;z-index:1}

/* emergency link in the top strip */
.strip .wrap{display:flex;justify-content:space-between;align-items:center;gap:.4rem 1rem;flex-wrap:wrap}
.strip .sos{display:inline-flex;align-items:center;gap:.35rem;color:var(--red);font-weight:800;text-decoration:none;white-space:nowrap}
.strip .sos:hover{text-decoration:underline;color:var(--red)}
.strip .sos .ico-svg{width:17px;height:17px}

/* ---------- home hero: two columns, map on the right ---------- */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(290px,1fr);gap:2.4rem;align-items:start}
.hero-main{min-width:0}
.naija-map{margin:0;background:rgba(0,40,22,.28);border:1px solid rgba(255,255,255,.2);border-radius:22px;padding:1rem 1rem 1.1rem}
.naija-map figcaption{font-family:var(--serif);font-size:1.25rem;font-weight:700;color:#fff;margin:0 0 .7rem}
.tiles-map{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:5px;aspect-ratio:1/1}
.st{position:relative;display:grid;place-items:center;border-radius:9px;text-decoration:none;color:#0a2f1f;
  background:var(--zc,#fff);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12);
  transition:transform .18s cubic-bezier(.2,.9,.3,1.3),box-shadow .18s}
.st b{font-weight:800;font-size:clamp(.72rem,2.4vw,.98rem);letter-spacing:.02em}
.st small{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%,4px);white-space:nowrap;
  background:var(--forest);color:#fff;font-size:.8rem;font-weight:700;padding:.2rem .55rem;border-radius:7px;
  opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:3}
.st:hover,.st:focus-visible{transform:scale(1.14);z-index:2;box-shadow:0 0 0 3px var(--gold),0 8px 18px rgba(0,0,0,.3);color:#0a2f1f}
.st:hover small,.st:focus-visible small{opacity:1;transform:translate(-50%,0)}
.st.fct{background:#fff;box-shadow:inset 0 0 0 3px var(--gold)}
.z-north-west{--zc:var(--z-nw)} .z-north-east{--zc:var(--z-ne)} .z-north-central{--zc:var(--z-nc)}
.z-south-west{--zc:var(--z-sw)} .z-south-east{--zc:var(--z-se)} .z-south-south{--zc:var(--z-ss)}
.map-key{list-style:none;margin:.85rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem .9rem;font-size:.85rem}
.map-key li{display:flex;align-items:center}
.map-key li::before{content:"";display:inline-block;width:11px;height:11px;border-radius:3px;background:var(--zc);margin-right:.4rem}
.map-key a{color:#eafaf1;text-decoration:none;min-height:30px;display:inline-flex;align-items:center}
.map-key a:hover{color:#fff;text-decoration:underline}

/* zone cards pick up the same colours as the map */
.zone{border-top:6px solid var(--zc,var(--green))}

@media (prefers-reduced-motion:no-preference){
  .tiles-map .st{animation:tileIn .55s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:calc(var(--i) * 60ms + 150ms)}
  .naija-map figcaption,.map-key{animation:fadeIn .5s ease-out both;animation-delay:.9s}
}
@keyframes tileIn{from{opacity:0;transform:translateY(-18px) scale(.55) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:1.6rem}
  .naija-map{max-width:440px}
}
@media (max-width:760px){
  .naija-map{max-width:none;padding:.8rem}
  .tiles-map{gap:4px}
  .st{border-radius:7px}
}

/* ---------- action buttons: call, email, WhatsApp ---------- */
.btn.act{border-radius:999px;padding:.55rem 1.25rem .55rem 1rem;gap:.55rem;font-weight:800}
.btn.act svg{width:20px;height:20px;flex:none}
.btn.act.call{background:var(--green);border-color:var(--green);color:#fff}
.btn.act.call:hover{background:var(--deep);border-color:var(--deep)}
.btn.act.mail{background:var(--adire);border-color:var(--adire);color:#fff}
.btn.act.mail:hover{background:#151e52;border-color:#151e52;box-shadow:0 6px 18px rgba(31,42,107,.35)}
.btn.act.wa{background:var(--wa);border-color:var(--wa);color:var(--wa-ink)}
.btn.act.wa:hover{background:#1ebe5b;border-color:#1ebe5b;color:var(--wa-ink);box-shadow:0 6px 18px rgba(37,211,102,.35)}
.btn.act:active{transform:translateY(1px)}
.contact .go .btn{min-height:48px}
@media (max-width:760px){.contact .go .btn{width:100%}}

/* ---------- profile ---------- */
.profile .top{position:relative;overflow:hidden}
.profile .top > *{position:relative}
.profile .top .avatar{box-shadow:0 0 0 4px #fff,0 0 0 7px var(--green);margin:7px}
.profile .bio{max-width:65ch}
.civic-acts{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin:1.2rem 0 .2rem}
.cact{display:flex;align-items:center;gap:.75rem;min-height:var(--tap);padding:.65rem .9rem;background:#fff;
  border:1.5px solid var(--line);border-radius:14px;text-decoration:none;color:var(--forest);
  transition:border-color .15s,background .15s,transform .15s}
.cact svg{width:24px;height:24px;flex:none;color:var(--deep)}
.cact.wa svg{color:#1aa851}
.cact b{display:block;line-height:1.25}
.cact small{display:block;color:var(--muted);font-size:.85rem;line-height:1.3}
.cact:hover{border-color:var(--green);background:var(--green-soft);color:var(--forest);transform:translateY(-2px)}

/* ---------- Find my leaders: the five cards arrive one after another ---------- */
@media (prefers-reduced-motion:no-preference){
  .leaders .leader{animation:rise .45s cubic-bezier(.2,.8,.3,1) both}
  .leaders .leader:nth-child(2){animation-delay:.07s}
  .leaders .leader:nth-child(3){animation-delay:.14s}
  .leaders .leader:nth-child(4){animation-delay:.21s}
  .leaders .leader:nth-child(5){animation-delay:.28s}
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.findagain .btn.act{min-height:46px}

/* ---------- home: which office handles my problem ---------- */
.ww-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.ww{display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.05rem 1.1rem;background:#fff;border:1px solid var(--line);
  border-radius:16px;text-decoration:none;color:var(--ink);transition:border-color .15s,background .15s}
.ww:hover{border-color:var(--green);background:var(--green-soft);color:var(--ink)}
.ww-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--green-tint);color:var(--deep);margin-bottom:.3rem}
.ww:nth-child(2) .ww-ico{background:var(--indigo-tint);color:var(--adire)}
.ww:nth-child(3) .ww-ico{background:var(--gold-tint);color:var(--gold-deep)}
.ww:nth-child(4) .ww-ico{background:var(--clay-tint);color:var(--clay)}
.ww-ico svg{width:23px;height:23px}
.ww b{color:var(--forest);line-height:1.3}
.ww small{color:var(--muted);font-size:.9rem}
.more-line{margin:1rem 0 0}
.more-line .btn svg{width:20px;height:20px}
@media (max-width:1000px){.ww-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ww-cards{grid-template-columns:1fr}}

/* ---------- citizen's guide page ---------- */
.guide-note{max-width:72ch;color:var(--muted);margin:0 0 1.4rem}
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:stretch}
.level{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;scroll-margin-top:1rem}
.level header{display:flex;gap:.8rem;align-items:center;padding:1rem 1.1rem;background:var(--lv-tint);border-bottom:4px solid var(--lv)}
.level h2{font-family:var(--serif);font-size:1.3rem;margin:0}
.level header p{margin:.1rem 0 0;font-size:.9rem;color:var(--muted)}
.lv-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--lv);color:#fff;flex:none}
.lv-ico svg{width:25px;height:25px}
.level ul{list-style:none;margin:0;padding:.9rem 1.1rem;display:grid;gap:.5rem;flex:1;align-content:start}
.level li{position:relative;padding-left:1.3rem;line-height:1.45}
.level li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:2px;background:var(--lv);transform:rotate(45deg)}
.lv-go{margin:0;padding:0 1.1rem 1.1rem}
.lv-go .btn{background:var(--lv);border-color:var(--lv)}
.lv-local{--lv:#8a5f00;--lv-tint:var(--gold-tint)}
.lv-state{--lv:var(--deep);--lv-tint:var(--green-tint)}
.lv-federal{--lv:var(--adire);--lv-tint:var(--indigo-tint)}
.steps-list{counter-reset:step;list-style:none;margin:0;padding:0;display:grid;gap:.7rem;max-width:760px}
.steps-list li{counter-increment:step;position:relative;padding:.8rem 1rem .8rem 3.6rem;background:#fff;border:1px solid var(--line);border-radius:14px}
.steps-list li::before{content:counter(step);position:absolute;left:.9rem;top:.75rem;width:2rem;height:2rem;border-radius:50%;
  display:grid;place-items:center;background:var(--green);color:#fff;font-weight:800}
.steps-list b{color:var(--forest)}
.tick{padding-left:1.1rem;display:grid;gap:.45rem}
.letter{font-family:var(--serif);font-size:.98rem;line-height:1.55;white-space:pre-wrap;background:#fffdf5;border:1px solid #eadfb8;
  border-left:6px solid var(--green);border-radius:12px;padding:1rem 1.2rem;margin:0;overflow-x:auto}
.foi .cols{align-items:start}
.notice.emergency{border-left-color:var(--red);margin-top:2.4rem}
.notice.emergency h2{display:flex;align-items:center;gap:.5rem;color:var(--red)}
.notice.emergency h2 svg{width:26px;height:26px}
.notice.emergency p{margin:0;max-width:70ch}
@media (max-width:1000px){.levels{grid-template-columns:1fr}}

@media print{.pagehead::after,footer::before,.civic-acts{display:none}}
@media (prefers-reduced-motion:reduce){.st,.cact,.btn.act{transition:none}.st:hover,.cact:hover{transform:none}}

/* =====================================================================
   Elections, accountability tools, languages
   ===================================================================== */
:root{
  --s-planned:#22307a; --s-progress:#8a5f00; --s-done:#006b40; --s-stalled:#b4451f; --s-bad:#a32020; --s-unknown:#5b6b63;
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- top strip: disclaimer, languages, 112 ---------- */
.strip-right{display:flex;align-items:center;gap:.4rem 1.1rem;flex-wrap:wrap}
.langs{display:flex;flex-wrap:wrap;gap:.15rem}
.langs a{display:inline-flex;align-items:center;min-height:32px;padding:0 .55rem;border-radius:999px;color:var(--forest);text-decoration:none;font-weight:600;font-size:.86rem}
.langs a:hover{background:#fff;color:var(--deep)}
.langs a.on{background:var(--forest);color:#fff}
.foot-langs{margin-top:.9rem}
.foot-langs a{color:#cfe8da}
.foot-langs a:hover{background:rgba(255,255,255,.12);color:#fff}
.foot-langs a.on{background:#fff;color:var(--forest)}
.menu-langs a{min-height:44px;padding:0 1rem;border:1.5px solid var(--line);font-size:1rem}
@media (max-width:760px){
  .strip-disc{font-size:.82rem}
  .strip .wrap{gap:.3rem}
  .strip-right{width:100%;justify-content:space-between}
}

/* ---------- election countdown bar (every public page) ---------- */
.votebar{display:block;position:relative;z-index:1;background:var(--adire);color:#fff;text-decoration:none;overflow:hidden}
.votebar::before{content:"";position:absolute;inset:0;opacity:.07;background:var(--adire-pat) 0 0/48px 48px;pointer-events:none}
.votebar .wrap{position:relative;display:flex;align-items:center;gap:.9rem;padding-top:.55rem;padding-bottom:.55rem}
.vb-count{display:flex;align-items:baseline;gap:.35rem;flex:none;color:#ffe7a0;font-weight:700;font-size:.85rem}
.vb-count b{font-family:var(--serif);font-size:1.7rem;line-height:1;color:var(--gold)}
.vb-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.vb-text strong{font-size:.98rem}
.vb-text small{color:#d4daf7;font-size:.84rem}
.vb-go{display:inline-flex;align-items:center;gap:.35rem;flex:none;font-weight:800;font-size:.9rem;background:var(--gold);color:var(--ink);padding:.4rem .9rem;border-radius:999px}
.vb-go .ico-svg{width:18px;height:18px}
.votebar:hover{color:#fff}
.votebar:hover .vb-go{background:#ffd23f}
@media (max-width:760px){
  .vb-go{display:none}
  .vb-text small{display:none}
  .vb-count b{font-size:1.45rem}
}

/* nav: Elections stands out a little */
.mainnav .vote-link .ico-svg{color:var(--gold-deep)}
.mainnav .vote-link{font-weight:800}
.tabbar a.vote .ico-svg{color:var(--gold-deep)}
.tabbar a.vote.on{background:var(--gold-tint);color:var(--gold-deep)}

/* ---------- elections page ---------- */
.votehead{background:linear-gradient(160deg,#26368a 0%,var(--adire) 50%,#121a47 100%)}
.votehead-grid{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center}
.votehead p{max-width:52ch}
.countdown{display:grid;justify-items:center;text-align:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:1rem 1.4rem;min-width:220px}
.cd-num{font-family:var(--serif);font-weight:700;font-size:clamp(3.2rem,9vw,4.6rem);line-height:1;color:var(--gold)}
.cd-unit{font-weight:800;color:#fff;margin-top:.2rem}
.cd-what{color:#d4daf7;font-size:.9rem;margin-top:.5rem;max-width:22ch}
.cd-when{color:#fff;font-weight:700;font-size:.95rem}
@media (prefers-reduced-motion:no-preference){
  .cd-num{animation:countIn .7s cubic-bezier(.2,.9,.3,1.2) both .15s}
}
@keyframes countIn{from{opacity:0;transform:translateY(10px) scale(.85)}to{opacity:1;transform:none}}
@media (max-width:760px){.votehead-grid{grid-template-columns:1fr}.countdown{justify-self:start;min-width:0;width:100%}}
.vote-share{display:flex;align-items:center;gap:.6rem 1rem;flex-wrap:wrap}

.timeline{list-style:none;margin:0;padding:0;position:relative;max-width:780px}
.timeline::before{content:"";position:absolute;left:7.6rem;top:.6rem;bottom:.6rem;width:3px;background:var(--line);border-radius:3px}
.timeline li{position:relative;display:grid;grid-template-columns:6.6rem 1fr;gap:2rem;padding:.65rem 0}
.timeline li::before{content:"";position:absolute;left:calc(7.6rem - 6px);top:1.05rem;width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid var(--green)}
.timeline time{text-align:right;color:var(--muted);font-size:.9rem;line-height:1.3;padding-top:.15rem}
.timeline time b{display:block;color:var(--forest);font-size:1rem}
.timeline strong{display:block;color:var(--forest);font-size:1.05rem}
.timeline p{margin:.2rem 0 .2rem;color:var(--ink);max-width:60ch}
.tl-meta{font-size:.85rem;color:var(--muted)}
.timeline .tl-election::before{background:var(--gold);border-color:var(--gold-deep);width:19px;height:19px;left:calc(7.6rem - 8px)}
.timeline .tl-election strong{font-size:1.2rem}
.timeline .tl-deadline::before{border-color:var(--red)}
.timeline .past{opacity:.6}
.timeline .past::before{background:var(--line);border-color:#a9b8ae}
.timeline .next > div{background:var(--gold-tint);border:1px solid #ecd98b;border-radius:14px;padding:.6rem .9rem;margin:-.5rem 0}
@media (max-width:560px){
  .timeline::before{left:.45rem}
  .timeline li{grid-template-columns:1fr;gap:.2rem;padding-left:1.8rem}
  .timeline li::before,.timeline .tl-election::before{left:0}
  .timeline time{text-align:left}
}

.ready{list-style:none;margin:0;padding:0;display:grid;gap:.8rem;grid-template-columns:repeat(2,1fr)}
.ready li{display:flex;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.1rem 1.15rem}
.ready-ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--indigo-tint);color:var(--adire);flex:none}
.ready-ico svg{width:26px;height:26px}
.ready h3{margin:.1rem 0 .3rem;font-size:1.15rem}
.ready p{margin:0 0 .8rem;max-width:60ch}
.ready .btn{margin:0 .3rem .4rem 0;min-height:46px}
@media (max-width:860px){.ready{grid-template-columns:1fr}}
@media (max-width:480px){.ready li{flex-direction:column}.ready .btn{width:100%}}

.ballot-day{background:var(--indigo-tint);border-color:#c7cdee}
.ballots{margin:0}
.ballots dt{font-weight:800;color:var(--adire);margin-top:.7rem}
.ballots dd{margin:.15rem 0 0}
.rules{display:grid;gap:.75rem;grid-template-columns:repeat(3,1fr)}
.rule{background:#fff;border:1px solid var(--line);border-top:5px solid var(--green);border-radius:16px;padding:.9rem 1.05rem}
.rule.no{border-top-color:var(--red)}
.rule h3{margin:0 0 .3rem;font-size:1.05rem}
.rule p{margin:0}
@media (max-width:1000px){.rules{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.rules{grid-template-columns:1fr}}
.factcheck{max-width:70ch}
.inec-first h2{display:flex;align-items:center;gap:.5rem}
.inec-first h2 svg{width:26px;height:26px;color:var(--green)}
.inec-first .btn{margin:.2rem .3rem .2rem 0}

/* filters bar used across the new pages */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end;background:#fff;border:1px solid var(--line);border-radius:16px;padding:.8rem 1rem;margin-bottom:1rem}
.filters > div{flex:1 1 200px;min-width:0}
.filters label{margin:0 0 .25rem;font-size:.9rem}
.filters select{width:100%}
@media (max-width:560px){.filters button{width:100%}}

/* candidates and results */
.race{margin-top:1.8rem}
.race h2{font-size:1.25rem;display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:baseline}
.race h2 span{font-family:var(--sans);font-size:.95rem;color:var(--muted);font-weight:600}
.cand-grid{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.cand{display:flex;flex-direction:column;gap:.15rem;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.75rem .9rem}
.cand strong{color:var(--forest);line-height:1.3}
.cand small{color:var(--muted)}
.party{display:inline-block;align-self:flex-start;font-weight:800;font-size:.8rem;letter-spacing:.03em;background:var(--forest);color:#fff;border-radius:6px;padding:.1rem .45rem;margin-bottom:.2rem}
.race-src{margin:.5rem 0 0}
.results-table{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.results-table .num,.budget-table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.bar-col{width:32%;min-width:140px}
.bar-col small{font-weight:700;color:var(--forest);margin-left:.4rem}
.vbar{display:inline-block;vertical-align:middle;width:calc(100% - 3.6rem);height:10px;border-radius:6px;background:var(--green-tint);overflow:hidden}
.vbar i{display:block;height:100%;width:var(--p);background:var(--green);border-radius:6px}
.vbar.low i{background:var(--clay)}
.results-table tr.won td{background:var(--green-soft);font-weight:700}
@media (prefers-reduced-motion:no-preference){
  .vbar i{animation:growBar .8s cubic-bezier(.2,.8,.3,1) both .1s}
}
@keyframes growBar{from{width:0}}

/* ---------- accountability ---------- */
.acc-grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.acc{display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 1.15rem;background:#fff;border:1px solid var(--line);border-radius:18px;text-decoration:none;color:var(--ink);transition:border-color .15s,background .15s}
.acc:hover{border-color:var(--green);background:var(--green-soft);color:var(--ink)}
.acc b{color:var(--forest);font-size:1.1rem}
.acc small{color:var(--muted);line-height:1.45}
.acc em{font-style:normal;font-weight:800;color:var(--deep);font-size:.9rem;margin-top:auto;padding-top:.3rem}

.tally{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.tally li{display:inline-flex;align-items:baseline;gap:.35rem;background:#fff;border:1px solid var(--line);border-left:5px solid var(--c,var(--s-unknown));border-radius:10px;padding:.35rem .75rem;font-size:.92rem}
.tally b{font-size:1.1rem;color:var(--forest)}
.tally-money{--c:var(--gold)}
.st-planned{--c:var(--s-planned)} .st-in_progress{--c:var(--s-progress)} .st-completed{--c:var(--s-done)}
.st-stalled{--c:var(--s-stalled)} .st-abandoned{--c:var(--s-bad)} .st-unknown{--c:var(--s-unknown)}
.pr-not_started{--c:var(--s-unknown)} .pr-in_progress{--c:var(--s-progress)} .pr-kept{--c:var(--s-done)}
.pr-partly_kept{--c:#0b7a75} .pr-broken{--c:var(--s-bad)} .pr-unclear{--c:#93a39a}
.status-dot{width:14px;height:14px;border-radius:50%;flex:none;background:var(--c)}
.badge[class*="st-"]{background:#fff;color:var(--c);border-color:var(--c)}
.list > a.li.proj{padding-right:1.1rem}
.list > a.li.proj::after{display:none}
.list > a.li.proj .txt{flex:1}
.proj-ico{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:var(--c);color:#fff;flex:none}
.proj-ico svg{width:34px;height:34px}
.proj-card .footnote{align-items:center}
.site-report{background:#fff;border:1px solid var(--line);border-radius:14px;padding:.8rem 1rem;margin-bottom:.6rem}
.site-report p{margin:.4rem 0}

.meter{display:flex;height:16px;border-radius:9px;overflow:hidden;margin:0 0 .7rem;background:var(--line);gap:2px}
.meter i{background:var(--c)}
.promiser{margin-top:1.6rem;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.promiser-head{display:flex;align-items:center;gap:.8rem;padding:.9rem 1.1rem;background:var(--green-soft);text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
.promiser-head strong{display:block;color:var(--forest);font-size:1.1rem}
.promiser-head small{color:var(--muted)}
.promise-list{list-style:none;margin:0;padding:0}
.promise-list li{display:grid;grid-template-columns:9.5rem 1fr;gap:1rem;padding:.85rem 1.1rem;border-top:1px solid var(--line)}
.promiser .promise-list li:first-child{border-top:0}
.section > .promise-list{background:#fff;border:1px solid var(--line);border-radius:16px}
.section > .promise-list li:first-child{border-top:0}
.pstat{align-self:start;display:inline-block;text-align:center;font-weight:800;font-size:.85rem;color:#fff;background:var(--c);border-radius:8px;padding:.3rem .5rem}
.ptext{margin:0;font-weight:700;color:var(--forest)}
.pnote{margin:.25rem 0;color:var(--ink)}
@media (max-width:560px){.promise-list li{grid-template-columns:1fr;gap:.4rem}.pstat{justify-self:start}}

.budget-total{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1rem}
.budget-total div{flex:1 1 180px;background:#fff;border:1px solid var(--line);border-top:5px solid var(--green);border-radius:14px;padding:.7rem 1rem}
.budget-total div:nth-child(2){border-top-color:var(--gold)}
.budget-total div:nth-child(3){border-top-color:var(--adire)}
.budget-total span{display:block;color:var(--muted);font-size:.88rem;font-weight:600}
.budget-total b{font-family:var(--serif);font-size:1.8rem;color:var(--forest)}

.event{display:flex;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:18px;padding:1rem 1.1rem;margin-bottom:.7rem}
.event time{flex:none;width:76px;display:grid;justify-items:center;align-content:start;background:var(--green);color:#fff;border-radius:14px;padding:.5rem .3rem;text-align:center;line-height:1.15}
.event time b{font-family:var(--serif);font-size:1.8rem}
.event time span{font-size:.8rem;font-weight:700}
.event time small{font-size:.8rem;opacity:.9;margin-top:.15rem}
.event h3{margin:0 0 .2rem}
.event p{margin:.2rem 0}
.event.past{opacity:.75}
.event.past time{background:var(--muted)}
.event-acts{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.6rem!important}
.event-acts .btn svg{width:20px;height:20px}

.data-grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.dataset{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1rem 1.1rem;display:flex;flex-direction:column}
.dataset h2{font-size:1.15rem;margin:0 0 .3rem}
.dataset p{margin:0 0 .4rem}
.dataset .dl{margin-top:auto;display:flex;gap:.5rem}
.dataset .btn svg{width:20px;height:20px}

.menu-groups section{margin-top:1.4rem}
.menu-groups h2{font-size:1.1rem;margin-bottom:.5rem}

/* ---------- profile: report card and office reply rate ---------- */
.rc-period{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1rem 1.1rem;margin-bottom:.8rem}
.rc-period h3{margin:0 0 .6rem}
.rc-stats{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.rc-stat{background:var(--green-soft);border-radius:12px;padding:.7rem .9rem;display:flex;flex-direction:column;gap:.2rem}
.rc-stat span:first-child{font-size:.85rem;color:var(--muted);font-weight:600}
.rc-stat b{font-family:var(--serif);font-size:1.9rem;color:var(--forest);line-height:1.1}
.rc-stat .vbar{width:100%}
.rc-stat small{color:var(--muted)}
.bill-list{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.bill-list li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.55rem .85rem}
.reply{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.1rem 1.2rem}
.reply h2{font-size:1.25rem}
.reply-figs{display:flex;flex-wrap:wrap;gap:1.4rem}
.reply-figs div{display:flex;align-items:baseline;gap:.5rem}
.reply-figs b{font-family:var(--serif);font-size:2.2rem;color:var(--forest)}
.reply-figs span{color:var(--muted);max-width:18ch;line-height:1.3}
.reply-form{max-width:none}

/* ---------- find my leaders: ballot ---------- */
.ballot-here .sec-head h2{display:flex;align-items:center;gap:.5rem}
.ballot-here .sec-head h2 svg{width:28px;height:28px;color:var(--adire)}
.ballot-grid{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin-bottom:1rem}
.ballot-race{background:#fff;border:1px solid var(--line);border-top:4px solid var(--adire);border-radius:14px;padding:.8rem 1rem}
.ballot-race h3{font-size:1rem;margin:0 0 .5rem}
.ballot-race h3 small{display:block;color:var(--muted);font-weight:600}
.ballot-race ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.ballot-race li{display:flex;align-items:center;gap:.5rem}
.ballot-race .party{margin:0;min-width:3.2rem;text-align:center}

/* ---------- home: election callout ---------- */
.vote-home-in{position:relative;overflow:hidden;display:flex;gap:1.6rem;align-items:center;background:var(--adire);color:#fff;border-radius:22px;padding:1.4rem 1.6rem}
.vote-home-in::before{content:"";position:absolute;inset:0;opacity:.08;background:var(--adire-pat) 0 0/64px 64px;pointer-events:none}
.vote-home-in > *{position:relative}
.vh-count{flex:none;display:grid;justify-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);border-radius:18px;padding:.8rem 1.2rem}
.vh-count b{font-family:var(--serif);font-size:3.4rem;line-height:1;color:var(--gold)}
.vh-count span{font-weight:800;font-size:.9rem}
.vh-text h2{color:#fff;font-family:var(--serif);font-size:clamp(1.4rem,3.4vw,1.9rem);margin:0 0 .3rem}
.vh-text p{margin:0;color:#dfe3fb;max-width:60ch}
.vh-acts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem!important}
.vh-acts .btn svg{width:20px;height:20px}
.btn.ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn.ghost-light:hover{background:#fff;color:var(--adire);border-color:#fff;box-shadow:none}
.btn.gold:hover{background:#ffd23f;border-color:#ffd23f;color:var(--ink)}
@media (max-width:640px){.vote-home-in{flex-direction:column;align-items:flex-start;padding:1.2rem}.vh-acts .btn{width:100%}}

@media print{.votebar,.langs{display:none}}

/* =====================================================================
   Component layer (first written for the "No dull" sticker theme, since converted to
   hairlines and square corners). Tokens are set by the Flag theme at the end of this file.
   ===================================================================== */
:root{
  --ink:#0d1a12; --bg:#f2f5ec; --paper:#fff;
  --green:#00a85a; --deep:#007a43; --forest:#0d1a12; --green-tint:#dcf7e5; --green-soft:#eefaf1;
  --lime:#b8f34a; --yellow:#ffd60a; --gold:#ffd60a; --gold-deep:#7a5a00; --gold-tint:#fff3b8;
  --pink:#ff5fa2; --pink-tint:#ffe1ee; --blue:#3d6bff; --indigo:#2a3fa8; --indigo-tint:#e2e8ff; --adire:#2a3fa8;
  --orange:#ff7a1a; --clay:#c2410c; --clay-tint:#ffe6d6; --red:#d61f45; --red-soft:#ffe0e6;
  --muted:#4a5a50; --line:#cfdbcf; --canvas:var(--bg); --panel:#fff;
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --sans:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif; --serif:var(--display);
  --r:20px; --pop:4px 4px 0 var(--ink); --pop-sm:3px 3px 0 var(--ink); --bd:1px solid var(--line);
  --z-nw:#ffd60a; --z-ne:#ffa36b; --z-nc:#fff; --z-sw:#b8f34a; --z-se:#b9c8ff; --z-ss:#7fe3d6;
}
body:not(.admin-body)::before{display:none}
h1,h2,h3{font-family:var(--display);color:var(--ink);letter-spacing:-.03em}
h1{font-weight:500;line-height:1}
h2{font-weight:600}
h3{font-weight:700;letter-spacing:-.01em}
a{color:var(--deep)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;box-shadow:none}
.muted,.small.muted{color:var(--muted)}

/* ---------- shared sticker surfaces ---------- */
.card,.list,.profile,.zone,.notice,.empty,.leader,.contact,.cact,.door,.ww,.acc,.topic,.lga,.pn,.social,.filters,.finder,
.event,.dataset,.cand,.race .results-table,.ready li,.rule,.level,.steps-list li,.promiser,.rc-period,.reply,.site-report,
.ballot-race,.budget-total div,.qcard,.vibe,.story,.rc-stat,.searchbox,.choice,.facts div,.bill-list li,.dataset,.officedetails{
  background:var(--paper);border:var(--bd);border-radius:var(--r);box-shadow:var(--pop)}
.facts div,.rc-stat{box-shadow:var(--pop-sm)}
.list{overflow:hidden}
.list > .li,.list > a.li{border-top:1px solid var(--line)}
.list > :first-child{border-top:0}
.list > a.li:hover,.door:hover,.ww:hover,.acc:hover,.topic:hover,.lga:hover,a.pn:hover,.social:hover,.cact:hover{background:var(--lime)}
.door,.ww,.acc,.topic,.lga,.pn,.social,.cact,.zstates a,.btn,button,.chip,.st,.story{transition:transform .15s,box-shadow .15s,background .15s}
.door:hover,.ww:hover,.acc:hover,.topic:hover,.lga:hover,a.pn:hover,.social:hover,.cact:hover,.story:hover{transform:none;box-shadow:none}
.door:active,.ww:active,.acc:active,.topic:active,.lga:active,.cact:active,.btn:active,button:active,.story:active{transform:none;box-shadow:none}

/* ---------- buttons, chips, badges, inputs ---------- */
.btn,button{font-family:var(--sans);font-weight:600;border:var(--bd);border-radius:2px;box-shadow:var(--pop-sm);background:var(--green);color:#fff}
.btn:hover,button:hover{background:var(--deep);border-color:var(--ink);color:#fff;transform:none;box-shadow:none}
.btn.ghost,button.ghost{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover,button.ghost:hover{background:var(--lime);color:var(--ink)}
.btn.gold,.btn.y{background:var(--yellow);color:var(--ink)}
.btn.gold:hover,.btn.y:hover{background:#ffe14d;color:var(--ink)}
.btn.ghost-light{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn.danger,button.danger{background:var(--red)}
.btn.act.call{background:var(--green);color:#fff}
.btn.act.mail{background:var(--blue);color:#fff}
.btn.act.wa{background:#25d366;color:var(--ink)}
.btn.act{border-color:var(--ink)}
.chip{border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:700}
.chip:hover{background:var(--lime)}
.chip.on{background:var(--ink);color:var(--lime);border-color:var(--ink)}
.badge{border:1px solid var(--line);background:var(--lime);color:var(--ink);font-weight:600}
.badge.warn{background:var(--yellow);color:var(--ink);border-color:var(--ink)}
.badge.plain{background:#fff;color:var(--ink);border-color:var(--ink)}
input,select,textarea{border:var(--bd);border-radius:2px;background:#fff;font-family:var(--sans)}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:3px solid var(--lime);outline-offset:0}
label{color:var(--ink);font-weight:600}
.choice{box-shadow:var(--pop-sm)}
.choice:has(input:checked){background:var(--lime);border-color:var(--ink)}

/* ---------- top of every page ---------- */
.flagbar{height:8px;background:linear-gradient(90deg,var(--green) 0 33.3%,#fff 33.3% 66.6%,var(--green) 66.6%);border-bottom:1px solid var(--line)}
.topbar{background:rgba(242,245,236,.92);backdrop-filter:blur(10px);border-bottom:var(--bd);position:sticky;top:0}
.brand{font-family:var(--display);font-weight:500;font-size:1.1rem;letter-spacing:-.03em;color:var(--ink)}
.brand .crest{display:none}
.brand::before{content:"NG";display:grid;place-items:center;width:38px;height:38px;border-radius:2px;background:var(--green);color:#fff;
  border:var(--bd);box-shadow:none;transform:none;font-size:.8rem}
.mainnav > a,.mainnav .dd > a{font-weight:600;color:var(--ink)}
.mainnav > a:hover,.mainnav .dd:hover > a,.mainnav .dd:focus-within > a{background:var(--lime);color:var(--ink)}
.mainnav a.on::after{height:5px;background:var(--pink);border-radius:5px 5px 0 0}
.mainnav .ico-svg{color:var(--ink)}
.mainnav .vote-link{align-self:center;background:var(--yellow);border:var(--bd);border-radius:999px;box-shadow:var(--pop-sm);padding:.45rem .9rem;margin:0 .3rem}
.mainnav .vote-link:hover{background:#ffe14d}
.mainnav .vote-link.on::after{display:none}
.panel-in{border:var(--bd);border-top:var(--bd);border-radius:0 0 22px 22px;box-shadow:none}
.panel-top strong{font-family:var(--display);font-weight:600}
.mi{background:var(--lime);color:var(--ink);border:1px solid var(--line)}
.mega-links a:hover,.mega-topics a:hover,.mega-zones a:hover{background:var(--yellow)}
.strip{background:var(--ink);color:#eaf3ec;border-bottom:0}
.strip a{color:var(--lime)}
.strip .sos{color:#ff8fb6}
.langs a{color:#eaf3ec}
.langs a:hover{background:rgba(255,255,255,.12);color:#fff}
.langs a.on{background:var(--lime);color:var(--ink)}
.votebar{background:var(--pink);color:var(--ink);border-bottom:var(--bd)}
.votebar::before{display:none}
.vb-count{color:var(--ink)}
.vb-count b{font-family:var(--display);font-weight:500;color:var(--ink);font-size:1.8rem}
.vb-text small{color:#3b1a28}
.vb-go{background:var(--yellow);border:1px solid var(--line);box-shadow:none}
.votebar:hover{color:var(--ink)}

/* ---------- inner page headers ---------- */
.pagehead{background:var(--green) radial-gradient(rgba(255,255,255,.18) 1.4px,transparent 1.4px) 0 0/18px 18px;color:#fff;border-bottom:var(--bd);padding:2rem 0 2.2rem}
.pagehead::before,.pagehead::after{display:none}
.pagehead h1{color:#fff;font-size:clamp(2rem,6vw,3.6rem);}
.pagehead p{color:#fff;font-weight:600;font-size:1.1rem}
.pagehead .crumbs,.pagehead .crumbs a{color:#eafff1}
.jump a{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:var(--pop-sm);font-weight:600}
.jump a:hover{background:var(--yellow);color:var(--ink)}
.votehead{background:var(--yellow) radial-gradient(rgba(13,26,18,.12) 1.4px,transparent 1.4px) 0 0/18px 18px;color:var(--ink)}
.votehead h1{color:var(--ink);}
.votehead p,.votehead .crumbs,.votehead .crumbs a{color:var(--ink)}
.countdown{background:#fff;border:var(--bd);box-shadow:none;transform:none}
.cd-num{font-family:var(--display);font-weight:500;color:var(--pink);}
.cd-unit,.cd-when{color:var(--ink)}
.cd-what{color:var(--muted)}
.sec-head h2,.section > h2,section h2{font-family:var(--display);font-weight:500;letter-spacing:-.03em}
.sec-head h2{font-size:clamp(1.7rem,4.6vw,2.8rem)}
.sec-head .lead,.section > .lead{font-weight:600}

/* ---------- people and profiles ---------- */
.avatar{border:1px solid var(--line);box-shadow:none}
.avatar.h0{background:var(--lime);color:var(--ink)}.avatar.h1{background:var(--yellow);color:var(--ink)}
.avatar.h2{background:var(--pink);color:var(--ink)}.avatar.h3{background:#b9c8ff;color:var(--ink)}.avatar.h4{background:#7fe3d6;color:var(--ink)}
.profile{overflow:hidden}
.profile .top{background:var(--lime);border-bottom:var(--bd)}
.profile .top::before{display:none}
.profile .top .avatar{box-shadow:none;margin:0;transform:none}
.profile .top h1{font-size:clamp(1.6rem,4.4vw,2.4rem)}
.profile .top .role{color:var(--ink);font-weight:600}
.facts div{background:#fff;color:var(--ink)}
.facts span{color:var(--muted)}
.contact.locked{background:#f6f8f3;border-style:dashed;box-shadow:none}
.contact.shared{background:var(--green-soft)}
.contacts-sub,.profile h3.sub{font-family:var(--display);font-weight:600}
.cact svg{color:var(--ink)}
.cact.wa svg{color:#128c4b}
.leader{border-left:var(--bd)}
.leader.empty{background:#f6f8f3;border-style:dashed;box-shadow:none}
.leader-head h2{font-size:1.1rem}
.leader-person:hover{background:var(--lime)}
.leader-person .txt i.ok{background:var(--lime);color:var(--ink);border:1px solid var(--line)}
.leader-person .txt i.warn{background:var(--yellow);color:var(--ink);border:1px solid var(--line)}
.findbox,.finder.findbox{border:var(--bd);box-shadow:var(--pop);border-radius:2px}
.findbox h2{font-family:var(--display);font-weight:600}
.findbox-ico{background:var(--lime);color:var(--ink);border:1px solid var(--line)}

/* ---------- lists of places ---------- */
.zone{border-top:var(--bd);border-top-width:8px;border-top-color:var(--zc,var(--green))}
.zstates a{background:#f6f8f3;border:1px solid var(--line)}
.zstates a:hover{background:var(--zc,var(--lime));border-color:var(--ink)}
.lga.led{border-left:8px solid var(--green)}
.cov{background:var(--pink);height:4px}

/* ---------- notices, flashes, empties ---------- */
.notice{border-left:var(--bd);border-left-width:10px;border-left-color:var(--yellow)}
.notice.emergency{border-left-color:var(--red)}
.empty{border-style:dashed;box-shadow:none;background:#fff}
.flash{border:var(--bd);box-shadow:var(--pop-sm)}
.flash.ok{background:var(--lime);color:var(--ink)}
.flash.error{background:#ffd3dc;color:var(--ink)}
.sample{background:var(--yellow);border:var(--bd);color:var(--ink);font-weight:700}
.callout{background:var(--yellow);border-top:var(--bd);border-bottom:var(--bd)}
.callout strong{font-family:var(--display);font-weight:500;color:var(--ink)}

/* ---------- footer and phone tab bar ---------- */
footer{background:var(--ink);color:#d5e3d9}
footer::before{display:none}
.foot-grid{border-bottom-color:rgba(255,255,255,.18)}
.foot-grid h3{font-family:var(--display);color:var(--lime);font-size:.9rem;letter-spacing:.02em}
.foot-grid a{color:#eaf3ec}
.foot-grid a:hover{color:var(--yellow)}
.foot-brand .brand{color:#fff}
.foot-brand p,.foot-disc{color:#b7c8bc}
@media (max-width:900px){
  .tabbar{background:#fff;border-top:var(--bd);box-shadow:none}
  .tabbar a{color:var(--ink);font-weight:600}
  .tabbar a.on{background:var(--lime);color:var(--ink);border:1px solid var(--line)}
  .tabbar a.vote{background:var(--yellow);border:1px solid var(--line);box-shadow:none}
  .tabbar a.vote .ico-svg{color:var(--ink)}
}

/* ---------- accountability and elections pieces ---------- */
.party{background:var(--ink);color:var(--lime)}
.timeline::before{background:var(--ink);width:3px}
.timeline li::before{background:#fff;border:1px solid var(--line)}
.timeline .tl-election::before{background:var(--pink);border-color:var(--ink)}
.timeline .tl-deadline::before{background:var(--yellow);border-color:var(--ink)}
.timeline .next > div{background:var(--yellow);border:var(--bd);box-shadow:var(--pop-sm)}
.timeline strong,.timeline time b{color:var(--ink)}
.ready-ico,.ww-ico,.lv-ico,.door-ico{background:var(--lime) !important;color:var(--ink) !important;border:1px solid var(--line)}
.ww:nth-child(2) .ww-ico{background:var(--yellow) !important}
.ww:nth-child(3) .ww-ico{background:var(--pink) !important}
.ww:nth-child(4) .ww-ico{background:#b9c8ff !important}
.rule{border-top:8px solid var(--green)}
.rule.no{border-top-color:var(--pink)}
.ballot-day{background:var(--yellow)}
.vbar{background:#e8efe4;border:1px solid var(--line);height:14px}
.vbar i{background:var(--green)}
.vbar.low i{background:var(--pink)}
.pstat{border:1px solid var(--line);color:var(--ink)}
.pr-kept{--c:var(--lime)}.pr-in_progress{--c:var(--yellow)}.pr-partly_kept{--c:#7fe3d6}.pr-broken{--c:var(--pink)}.pr-not_started{--c:#e4e9e1}.pr-unclear{--c:#e4e9e1}
.st-planned{--c:#b9c8ff}.st-in_progress{--c:var(--yellow)}.st-completed{--c:var(--lime)}.st-stalled{--c:var(--orange)}.st-abandoned{--c:var(--pink)}.st-unknown{--c:#e4e9e1}
.badge[class*="st-"]{background:var(--c);color:var(--ink);border-color:var(--ink)}
.status-dot{border:1px solid var(--line)}
.meter{border:var(--bd);height:20px;background:#fff}
.tally li{border:1px solid var(--line);border-left:10px solid var(--c,#e4e9e1)}
.event time{background:var(--pink);color:var(--ink);border:1px solid var(--line)}
.event time b{font-family:var(--display)}
.proj-ico{border:var(--bd);color:var(--ink)}
.promiser-head{background:var(--lime);border-bottom:var(--bd)}
.level header{border-bottom:var(--bd)}
.lv-local{--lv:var(--yellow);--lv-tint:var(--gold-tint)}
.lv-state{--lv:var(--lime);--lv-tint:var(--green-soft)}
.lv-federal{--lv:#b9c8ff;--lv-tint:var(--indigo-tint)}
.lv-go .btn{color:var(--ink)}
.level li::before{background:var(--ink)}
.steps-list li::before{background:var(--pink);color:var(--ink);border:1px solid var(--line);font-family:var(--display)}
.letter{background:#fffbe6;border:var(--bd);border-left:10px solid var(--green)}
.budget-total b,.reply-figs b,.rc-stat b{font-family:var(--display);font-weight:500}
.vote-share{margin-top:1.4rem}

@media (max-width:760px){.strip-disc{display:none}.strip .wrap{padding-top:.35rem;padding-bottom:.35rem}}
.pn.next{border-color:var(--ink)}.pn .dir{color:var(--ink)}

/* ---------- Peter Obi campaign pieces ---------- */
.obi-tag{display:inline-block;font:500 .78rem var(--display);letter-spacing:.02em;background:var(--pink);color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:.3rem .75rem;box-shadow:none;transform:none}
.obi-card{position:relative;overflow:hidden;background:var(--ink);color:#fff;border:var(--bd);border-radius:2px;box-shadow:6px 6px 0 var(--green);padding:2rem}
.obi-card::after{content:"";position:absolute;right:-50px;bottom:-50px;width:200px;height:200px;border-radius:50%;
  background:linear-gradient(90deg,var(--green) 33%,#fff 33% 66%,var(--green) 66%);border:var(--bd);opacity:.95}
.obi-card > *{position:relative;z-index:1}
.obi-card h2{color:var(--lime);font:500 clamp(2.4rem,7vw,4.6rem)/.95 var(--display);letter-spacing:-.04em;margin:.8rem 0 .6rem}
.obi-ticket{font-size:1.1rem;margin:0 0 .9rem}
.obi-ticket b{color:var(--yellow)}
.obi-facts{list-style:none;margin:0 0 1.2rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;max-width:44rem}
.obi-facts li{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.5);border-radius:999px;padding:.35rem .8rem;font-weight:700;font-size:.92rem}
.obi-src{color:#c9d8ce;margin:1rem 0 0;max-width:40rem}
.obi-src a{color:var(--lime)}
.mainnav .obi-link{align-self:center;background:var(--ink);color:var(--lime);border:var(--bd);border-radius:999px;padding:.45rem .9rem;margin-left:.3rem;font-weight:500}
.mainnav .obi-link:hover{background:var(--green);color:#fff}
.mainnav .obi-link.on::after{display:none}
.obihead{background:var(--ink) radial-gradient(rgba(184,243,74,.18) 1.4px,transparent 1.4px) 0 0/18px 18px}
.obihead h1{color:var(--lime);margin-top:.8rem}
.obihead b{color:var(--yellow)}
.obihead-date{font-family:var(--display);font-weight:600;margin-top:.5rem !important}
.obi-record{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:.8rem}
.rec{background:#fff;border:var(--bd);border-radius:2px;box-shadow:var(--pop);padding:1.1rem}
.rec b{display:block;font:500 2rem/1 var(--display);color:var(--green);margin-bottom:.4rem}
.rec span{font-weight:600}
.rec:nth-child(2) b{color:var(--blue)}.rec:nth-child(3) b{color:var(--pink)}.rec:nth-child(4) b{color:var(--orange)}
.pick{display:inline-block;align-self:flex-start;margin-top:.4rem;font:500 .72rem var(--display);text-decoration:none;
  background:var(--pink);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:.2rem .5rem;transform:none}
@media (max-width:900px){.obi-record{grid-template-columns:1fr 1fr}.obi-card{padding:1.4rem}}
@media (max-width:520px){.obi-record{grid-template-columns:1fr}}

/* =====================================================================
   "Flag" theme. The page is the flag: night green, white, green.
   Serif display (Fraunces), one accent (gold), hairline rules, square corners.
   The layer above was converted to these tokens; this adds what is new.
   ===================================================================== */
@font-face{font-family:"Fraunces";src:url("fonts/fraunces.woff2") format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-ext.woff2") format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-viet.woff2") format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Fraunces";font-style:italic;src:url("fonts/fraunces-italic.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/instrument-sans.woff2") format("woff2");font-weight:400 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";src:url("fonts/instrument-sans-ext.woff2") format("woff2");font-weight:400 700;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono.woff2") format("woff2");font-weight:400 600;font-display:swap}
:root{
  --night:#04241A; --ink:#0B1A13; --bg:#FBFAF4; --paper:#fff; --canvas:var(--bg); --panel:#fff;
  --green:#008751; --deep:#006B40; --forest:#04241A; --green-tint:#E4F2EA; --green-soft:#F1F7F3;
  --gold:#E3B341; --yellow:#E3B341; --gold-deep:#7A5A00; --gold-tint:#F7EFD6;
  --lime:#F1F7F3; --pink:#E3B341; --pink-tint:#F7EFD6; --blue:#0E5A8A; --indigo:#22307a; --indigo-tint:#E7EAF4; --adire:#04241A;
  --orange:#B4451F; --clay:#B4451F; --clay-tint:#F6E6DD; --red:#A32020; --red-soft:#F9E4E2;
  --muted:#4A5A52; --line:#D5DDD6; --mist:#A9C4B6;
  --display:"Fraunces",Georgia,"Times New Roman",serif; --serif:var(--display);
  --sans:"Instrument Sans","Segoe UI",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --r:2px; --pop:none; --pop-sm:none; --bd:1px solid var(--line);
  --z-nw:#F7EFD6; --z-ne:#F6E6DD; --z-nc:#F1F7F3; --z-sw:#E4F2EA; --z-se:#E7EAF4; --z-ss:#E3F1F0;
}
body{background:var(--bg);font-family:var(--sans);color:var(--ink)}
::selection{background:var(--gold);color:var(--ink)}
h1,h2,h3,.sec-head h2,.section > h2,section h2{font-family:var(--display);font-weight:400;text-transform:none;letter-spacing:-.03em;font-variation-settings:"opsz" 144;text-wrap:balance}
h1{line-height:.98}
h3{font-weight:500;letter-spacing:-.015em;font-variation-settings:"opsz" 40}
.sec-head h2{font-size:clamp(1.8rem,4.4vw,3.2rem)}
.mono{font:500 .78rem/1.35 var(--mono);letter-spacing:.02em}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.progress{position:fixed;inset:0 0 auto 0;height:4px;z-index:70;pointer-events:none}
.progress i{display:block;height:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--green) 0 33.3%,#fff 33.3% 66.6%,var(--green) 66.6%)}

/* buttons, chips, inputs */
.btn,button{border-radius:0;border:1px solid var(--ink);background:var(--ink);color:#fff;font-weight:600;box-shadow:none;transition:background .3s,color .3s,border-color .3s}
.btn:hover,button:hover{background:var(--green);border-color:var(--green);color:#fff;transform:none;box-shadow:none}
.btn:active,button:active{transform:none;box-shadow:none}
.btn.ghost,button.ghost,.btn.ghost-light{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover,button.ghost:hover,.btn.ghost-light:hover{background:var(--ink);color:#fff}
.btn.gold,.btn.y{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn.gold:hover,.btn.y:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.light{background:#fff;border-color:#fff;color:var(--ink)}
.btn.light:hover{background:var(--night);border-color:var(--night);color:#fff}
.btn.line{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.btn.line:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn.act.call{background:var(--green);border-color:var(--green)}
.btn.act.mail{background:var(--ink);border-color:var(--ink)}
.btn.act.wa{background:#fff;border-color:var(--ink);color:var(--ink)}
.chip{border-radius:999px;background:transparent}
.chip:hover{background:var(--green-soft)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.badge{border-radius:999px;background:var(--green-tint);border-color:transparent;font-weight:600}
.badge.warn{background:var(--gold-tint);border-color:transparent}
input,select,textarea{border:1px solid #9FB0A5;border-radius:0}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:2px solid var(--gold);outline-offset:0}
label{font-weight:600}
.list > .li,.list > a.li{border-top:1px solid var(--line)}

/* top of every page */
.flagbar{height:4px;border:0}
.topbar{background:var(--night);border-bottom:1px solid rgba(255,255,255,.12);backdrop-filter:none}
.brand{font-family:var(--display);font-weight:500;font-size:1.2rem;letter-spacing:-.02em;color:#fff}
.brand:hover{color:#fff}
.brand::before{display:none}
.brand .crest{display:block}
.mainnav > a,.mainnav .dd > a{font-weight:500;color:#E9F2EC}
.mainnav > a:hover,.mainnav .dd:hover > a,.mainnav .dd:focus-within > a{background:rgba(255,255,255,.08);color:#fff}
.mainnav a.on::after{height:2px;background:var(--gold);border-radius:0}
.mainnav .ico-svg{color:var(--mist)}
.mainnav .vote-link{background:transparent;border:1px solid var(--gold);color:var(--gold);border-radius:0}
.mainnav .vote-link .ico-svg{color:var(--gold)}
.mainnav .vote-link:hover{background:var(--gold);color:var(--ink)}
.mainnav .vote-link:hover .ico-svg{color:var(--ink)}
.panel-in{border:1px solid var(--line);border-radius:0;box-shadow:0 30px 60px rgba(4,36,26,.18)}
.panel-in a{color:var(--ink)}
.panel-top strong{font-weight:500}
.mi{background:var(--green-tint);border:0;border-radius:0}
.mega-links a:hover,.mega-topics a:hover,.mega-zones a:hover{background:var(--green-soft)}
.strip{background:#021810;color:var(--mist)}
.strip a{color:#fff}
.strip .sos{color:var(--gold)}
.langs a{color:var(--mist);border-radius:0}
.langs a.on{background:var(--gold);color:var(--ink)}
.votebar{background:var(--green);color:#fff;border:0}
.votebar:hover{color:#fff}
.vb-count{color:#DDF3E7}
.vb-count b{color:#fff;font-weight:300;font-size:2rem}
.vb-text small{color:#DDF3E7}
.vb-go{background:#fff;color:var(--ink);border:0;border-radius:0}

/* inner page headers: night green, large serif */
.pagehead{background:radial-gradient(120% 140% at 85% 0,#0B4A32 0,var(--night) 60%);color:#fff;border:0;padding:clamp(2.5rem,7vw,5rem) 0 clamp(2rem,5vw,3.5rem)}
.pagehead h1{color:#fff;font-size:clamp(2.3rem,7vw,5.2rem);text-shadow:none;letter-spacing:-.04em}
.pagehead p{color:var(--mist);font-weight:400;max-width:42rem}
.pagehead .crumbs,.pagehead .crumbs a{color:var(--mist);font:500 .78rem var(--mono)}
.jump a{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:0;font-weight:500}
.jump a:hover{background:#fff;color:var(--ink)}
.votehead{background:var(--green)}
.votehead h1{color:#fff;text-shadow:none}
.votehead p,.votehead .crumbs,.votehead .crumbs a{color:#DDF3E7}
.countdown{background:transparent;border:1px solid rgba(255,255,255,.45);transform:none;box-shadow:none;color:#fff}
.cd-num{color:#fff;font-weight:300;-webkit-text-stroke:0}
.cd-unit,.cd-when{color:#fff}
.cd-what{color:#DDF3E7}

/* people */
.avatar{border:0;font-family:var(--display);font-weight:500}
.avatar.h0{background:#E4F2EA}.avatar.h1{background:#F7EFD6}.avatar.h2{background:#E8ECE9}.avatar.h3{background:#E7EAF4}.avatar.h4{background:#F6E6DD}
.profile .top{background:var(--green-soft);border-bottom:1px solid var(--line)}
.profile .top .avatar{transform:none;box-shadow:none}
.leader-person:hover,.list > a.li:hover,.door:hover,.ww:hover,.acc:hover,.topic:hover,.lga:hover,a.pn:hover,.social:hover,.cact:hover{background:var(--green-soft);transform:none;box-shadow:none}
.zone{border-top:3px solid var(--green)}
.zstates a{background:transparent}
.zstates a:hover{background:var(--green);color:#fff;border-color:var(--green)}
.notice{border-left:3px solid var(--gold)}
.notice.emergency{border-left-color:var(--red)}
.flash.ok{background:var(--green-tint)}
.flash.error{background:var(--red-soft)}
.sample{background:var(--gold-tint);font-weight:500}
.callout{background:var(--gold-tint);border:0}
.callout strong{font-weight:500;text-transform:none;font-size:1.3rem}
.ready-ico,.ww-ico,.lv-ico,.door-ico,.findbox-ico{background:var(--green-tint) !important;border:0;border-radius:0}
.ww:nth-child(2) .ww-ico,.ww:nth-child(3) .ww-ico,.ww:nth-child(4) .ww-ico{background:var(--green-tint) !important}
.party{background:var(--ink);color:#fff;border-radius:0}
.js .reveal{opacity:0;transition:opacity .9s}
.js .reveal.in{opacity:1}

/* footer and phone tab bar */
footer{background:var(--night);color:var(--mist)}
.foot-grid h3{font:500 .78rem var(--mono);color:var(--gold);text-transform:none;letter-spacing:.02em}
.foot-grid a{color:#E9F2EC}
.foot-grid a:hover{color:var(--gold)}
.foot-brand p,.foot-disc{color:var(--mist)}
@media (max-width:900px){
  .tabbar{background:var(--paper);border-top:1px solid var(--line);box-shadow:none}
  .tabbar a{color:var(--muted);font-weight:600;border-radius:0}
  .tabbar a.on{background:transparent;color:var(--green);border:0;box-shadow:inset 0 2px 0 var(--green)}
  .tabbar a.vote{background:var(--gold-tint);border:0;box-shadow:none;color:var(--ink)}
}

/* =================== home page: three chapters =================== */
.home main{padding:0}
.home main > .wrap:empty{display:none}
.home .topbar{border-bottom-color:transparent}
.fl-hero{--pad:clamp(1.25rem,5vw,5rem);position:relative;z-index:1;min-height:calc(100svh - 110px);padding:clamp(2.5rem,7vh,5rem) var(--pad) clamp(1.5rem,4vh,3rem);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;gap:2rem;overflow:hidden;color:#fff;
  background:radial-gradient(120% 90% at 78% 38%,#0B4A32 0,var(--night) 62%)}
.fl-grain{position:absolute;inset:0;opacity:.18;pointer-events:none;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.fl-hero-text{position:relative}
.fl-kicker{display:flex;align-items:center;gap:.8rem;color:var(--gold);margin:0 0 1.6rem}
.fl-kicker b{font:500 clamp(2.4rem,6vw,4.2rem)/.8 var(--display);font-variation-settings:"opsz" 144;letter-spacing:-.04em}
.fl-kicker span{max-width:13rem;color:var(--mist)}
.fl-hero h1{margin:0;color:#fff;font-size:clamp(3.1rem,10.5vw,9.6rem);line-height:.9;letter-spacing:-.045em}
.fl-hero h1 em{font-style:italic;font-weight:300;color:var(--gold)}
.fl-hero h1 .ln{display:block;overflow:hidden;padding-bottom:.08em}
.js .fl-hero h1 .ln > span{display:block;transform:translateY(110%);animation:fl-rise 1s cubic-bezier(.16,1,.3,1) forwards}
.js .fl-hero h1 .ln:nth-child(2) > span{animation-delay:.12s}
@keyframes fl-rise{to{transform:none}}
.fl-lede{max-width:34rem;margin:1.8rem 0 0;color:var(--mist);font-size:clamp(1rem,1.5vw,1.2rem)}
.fl-find{margin-top:2.2rem;display:grid;grid-template-columns:1fr auto;max-width:34rem;border-bottom:1px solid rgba(255,255,255,.45)}
.fl-find label{grid-column:1/-1;color:var(--mist);margin-bottom:.3rem}
.fl-find select{appearance:none;-webkit-appearance:none;background:none;border:0;color:#fff;font:400 clamp(1.4rem,3vw,2rem)/1.3 var(--display);padding:.45rem 0;min-height:56px;cursor:pointer;min-width:0}
.fl-find select:focus{outline:2px solid var(--gold);outline-offset:2px}
.fl-find select option{color:var(--ink);font-family:var(--sans);font-size:1rem}
.fl-find button{background:none;border:0;color:var(--gold);font:600 1rem var(--sans);padding:0 0 0 1.2rem;min-height:56px;cursor:pointer;position:relative}
.fl-find button:hover{background:none;color:#fff}
.fl-find button::after{content:"";position:absolute;left:1.2rem;right:0;bottom:14px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.77,0,.175,1)}
.fl-find button:hover::after{transform:scaleX(1);transform-origin:left}
.fl-crest{position:relative;align-self:center;justify-self:center;width:min(100%,560px);perspective:1100px}
.fl-crest .halo{position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(circle,rgba(227,179,65,.22) 0,transparent 62%)}
.fl-crest img{position:relative;width:100%;filter:drop-shadow(0 40px 50px rgba(0,0,0,.5));
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px)) scale(var(--sc,1));transition:transform .5s cubic-bezier(.16,1,.3,1)}
.fl-hero-foot{grid-column:1/-1;display:flex;justify-content:space-between;gap:.6rem 1.5rem;flex-wrap:wrap;color:var(--mist);border-top:1px solid rgba(255,255,255,.16);padding-top:1rem;margin-top:clamp(1.5rem,5vh,3.5rem)}
.fl-hero-foot a{color:var(--gold)}

.fl-white,.fl-green{--pad:clamp(1.25rem,5vw,5rem);position:relative;z-index:1}
.fl-white{background:var(--bg);color:var(--ink)}
.fl-gate{padding:clamp(4rem,12vh,9rem) var(--pad) clamp(2rem,5vh,3.5rem);display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,4vw,4rem);align-items:end}
.fl-gate .num{font:300 clamp(4rem,13vw,11rem)/.8 var(--display);font-variation-settings:"opsz" 144;letter-spacing:-.05em;color:var(--green)}
.fl-gate h2{margin:0;font-size:clamp(1.9rem,4.6vw,4rem);line-height:1;max-width:18ch}
.fl-gate p{margin:1rem 0 0;max-width:38rem;color:var(--muted)}
.fl-after{padding:0 var(--pad);margin:2rem 0 0;display:flex;gap:.6rem;flex-wrap:wrap}
.fl-register .fl-after{padding:0}

.fl-five{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,5vw,6rem);padding:0 var(--pad)}
.fl-five .stay{position:sticky;top:22vh;align-self:start;height:max-content}
.fl-five .big{font:300 clamp(7rem,22vw,19rem)/.78 var(--display);font-variation-settings:"opsz" 144;letter-spacing:-.06em;display:flex;align-items:flex-start}
.fl-five .big sup{font:500 .8rem var(--mono);letter-spacing:.02em;color:var(--muted);margin:.9rem 0 0 .6rem}
.fl-five .now{margin:1.2rem 0 0;font:400 clamp(1.4rem,2.6vw,2.1rem)/1.15 var(--display);letter-spacing:-.02em}
.fl-five .does{margin:.5rem 0 0;color:var(--muted);max-width:24rem}
.fl-five ol{list-style:none;margin:0;padding:0}
.fl-five li{min-height:56vh;display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--line);padding:2rem 0;transition:opacity .5s}
.js .fl-five li{opacity:.28}
.js .fl-five li.on{opacity:1}
.fl-five li .role{color:var(--green)}
.fl-five li .name{font:400 clamp(2rem,5.4vw,4.6rem)/.98 var(--display);font-variation-settings:"opsz" 144;letter-spacing:-.035em;margin:.5rem 0 .6rem}
.fl-five li .name.none{font-style:italic;font-weight:300;color:#7B8A82}
.fl-five li .seat{color:var(--muted)}
.fl-five li a{align-self:flex-start;margin-top:1rem;font-weight:600;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px;min-height:32px}
.fl-five li a:hover{color:var(--green);border-color:var(--green)}

.fl-register{padding:0 var(--pad) clamp(4rem,10vh,8rem)}
.fl-register .head,.fl-register .row{display:grid;grid-template-columns:3rem 1.1fr .9fr 1fr 1.6fr 4rem;gap:1rem;align-items:baseline}
.fl-register .head{color:var(--muted);border-bottom:1px solid var(--ink);padding:.7rem 0;position:sticky;top:var(--top,60px);background:var(--bg);z-index:2}
.fl-register .row{position:relative;z-index:0;text-decoration:none;color:var(--ink);padding:1.05rem 0;border-bottom:1px solid var(--line);transition:padding .45s cubic-bezier(.16,1,.3,1),color .3s}
.fl-register .row::before{content:"";position:absolute;inset:0 calc(var(--pad) * -1);background:var(--green);transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.77,0,.175,1);z-index:-1}
.fl-register .row:hover,.fl-register .row:focus-visible{color:#fff;padding-left:.8rem}
.fl-register .row:hover::before,.fl-register .row:focus-visible::before{transform:scaleY(1)}
.fl-register .no,.fl-register .cap,.fl-register .zn{font:400 .8rem var(--mono);color:var(--muted)}
.fl-register .st-name{font:400 clamp(1.3rem,2.4vw,1.9rem)/1.1 var(--display);letter-spacing:-.02em}
.fl-register .who{font-weight:500}
.fl-register .who small{display:block;font:400 .72rem var(--mono);color:var(--muted)}
.fl-register .row:hover .no,.fl-register .row:hover .cap,.fl-register .row:hover .zn,.fl-register .row:hover .who small,
.fl-register .row:focus-visible .no,.fl-register .row:focus-visible .cap,.fl-register .row:focus-visible .zn,.fl-register .row:focus-visible .who small{color:rgba(255,255,255,.78)}
.fl-register .go{font:500 .8rem var(--mono);text-align:right;opacity:0;transform:translateX(-8px);transition:.3s}
.fl-register .row:hover .go,.fl-register .row:focus-visible .go{opacity:1;transform:none}

.fl-green{background:var(--green);color:#fff;overflow:hidden;padding-bottom:clamp(2.5rem,7vh,5rem)}
.fl-green .fl-gate .num,.fl-green h2{color:#fff}
.fl-count{padding:0 var(--pad);display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,4vw,4rem);align-items:end}
.fl-count .d{font:300 clamp(9rem,34vw,30rem)/.74 var(--display);font-variation-settings:"opsz" 144;letter-spacing:-.07em;margin-left:-.06em}
.fl-count dl{margin:0 0 2.2rem;display:grid;gap:1.1rem}
.fl-count dt{color:#BFE6D2}
.fl-count dd{margin:.15rem 0 0;font:400 clamp(1.2rem,2.4vw,1.8rem)/1.15 var(--display);letter-spacing:-.02em}
.fl-count .acts,.fl-pick .acts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.4rem}
.fl-pick{margin:clamp(3.5rem,9vh,7rem) var(--pad) 0;padding:clamp(1.6rem,5vw,4rem);background:var(--night);display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end}
.fl-pick .gold{color:var(--gold)}
.fl-pick h3{margin:.6rem 0 0;color:#fff;font:400 clamp(2rem,5vw,4.4rem)/.95 var(--display);font-variation-settings:"opsz" 144;letter-spacing:-.035em;max-width:14ch}
.fl-pick h3 em{color:var(--gold);font-weight:300}
.fl-pick p{color:var(--mist);max-width:36rem;margin:1.2rem 0 0}
.fl-pick p b{color:#fff;font-weight:600}
.fl-pick .src,.fl-pick .src a{color:var(--mist)}
.fl-motto{margin:clamp(3rem,8vh,6rem) var(--pad) 0;font:italic 300 clamp(1.4rem,3.2vw,2.6rem)/1.1 var(--display);max-width:18ch}
.home footer{border-top:1px solid rgba(255,255,255,.14)}

.js .wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.77,0,.175,1)}
.js .wipe.in{clip-path:inset(0)}

@media (max-width:900px){
  .fl-hero{grid-template-columns:1fr;align-items:start;min-height:0}
  .fl-crest{order:-1;width:min(56vw,280px);justify-self:start;margin-bottom:.5rem}
  .fl-five{grid-template-columns:1fr}
  .fl-five .stay{top:var(--top,60px);z-index:2;background:var(--bg);padding:.6rem 0;display:flex;align-items:baseline;gap:1rem;border-bottom:1px solid var(--line);width:100%}
  .fl-five .big{font-size:3.4rem}
  .fl-five .big sup,.fl-five .does{display:none}
  .fl-five .now{margin:0;font-size:1.25rem}
  .fl-five li{min-height:44vh}
  .fl-register .head{display:none}
  .fl-register .row{grid-template-columns:2.2rem 1fr;row-gap:.15rem}
  .fl-register .cap,.fl-register .zn,.fl-register .go{display:none}
  .fl-register .who{grid-column:2}
  .fl-count,.fl-pick{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .js .fl-hero h1 .ln > span{transform:none;animation:none}
  .js .wipe{clip-path:none}
  .js .fl-five li{opacity:1}
  .fl-crest img,.fl-register .row,.fl-register .row::before{transition:none}
}
.mainnav .obi-link{background:var(--gold);color:var(--ink);border:1px solid var(--gold);border-radius:0;font-weight:600}
.mainnav .obi-link:hover{background:#fff;border-color:#fff;color:var(--ink)}

/* ---------- Find my leaders: the picker lives in the header, the five are a numbered register ---------- */
.fl-finder .fl-find{margin-top:1.8rem}
.fl-note{color:var(--mist);margin:1rem 0 0;max-width:36rem}
.fl-links{display:flex;gap:.6rem;flex-wrap:wrap;margin:2rem 0}
.fl-leaders{list-style:none;margin:clamp(1rem,4vw,3rem) 0 0;padding:0;border-top:1px solid var(--ink)}
.fl-leaders > li{display:grid;grid-template-columns:clamp(3.5rem,9vw,8rem) minmax(0,.8fr) minmax(0,1.5fr);gap:clamp(1rem,3vw,3rem);align-items:start;
  padding:clamp(1.5rem,4vw,3rem) 0;border-bottom:1px solid var(--line)}
.fl-leaders .n{font:300 clamp(3.4rem,9vw,7.5rem)/.8 var(--display);font-variation-settings:"opsz" 144;letter-spacing:-.05em;color:var(--green)}
.fl-leaders > li.none .n{color:#B9C5BD}
.fl-leaders .role{margin:.2rem 0 .5rem;color:var(--green);font:500 .78rem/1.35 var(--mono);letter-spacing:.02em}
.fl-leaders .what p{margin:0;color:var(--muted);font-size:.95rem;max-width:20rem}
.fl-leaders .office{display:inline-block;margin-top:.7rem;font-size:.9rem;color:var(--muted)}
.fl-leaders .person + .person{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--line)}
.fl-leaders .name{display:block;margin:0;font:400 clamp(1.9rem,4.6vw,3.8rem)/1 var(--display);font-variation-settings:"opsz" 144;letter-spacing:-.035em;color:var(--ink);text-decoration:none}
.fl-leaders a.name:hover{color:var(--green)}
.fl-leaders > li.none .name{font-style:italic;font-weight:300;color:#7B8A82}
.fl-leaders .seat{display:block;margin:.6rem 0 0;color:var(--muted);max-width:36rem}
.fl-leaders .chk{display:inline-block;margin-top:.7rem;color:var(--gold-deep)}
.fl-leaders .chk.ok{color:var(--deep)}
.fl-leaders .acts{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:1rem}
.fl-leaders .acts a{font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding:.35rem 0 2px;min-height:32px}
.fl-leaders .acts a:hover{color:var(--green);border-color:var(--green)}
@media (max-width:760px){
  .fl-leaders > li{grid-template-columns:3.2rem 1fr;row-gap:1rem}
  .fl-leaders .who{grid-column:1/-1}
  .fl-leaders .what p{max-width:none}
}

/* ---------- state page: who is in charge, set large; figures in the header ---------- */
.fl-figs{display:flex;flex-wrap:wrap;gap:1.2rem 3rem;margin:1.8rem 0 0;padding:1.2rem 0 0;border-top:1px solid rgba(255,255,255,.16)}
.fl-figs div{display:flex;flex-direction:column}
.fl-figs dt{order:2;color:var(--mist);font:500 .78rem/1.35 var(--mono)}
.fl-figs dd{margin:0;color:#fff;font:400 clamp(1.5rem,3.4vw,2.4rem)/1.05 var(--display);letter-spacing:-.03em}
.fl-charge{border-top:1px solid var(--ink);margin:0 0 clamp(2rem,6vw,4rem)}
.fl-charge a{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr) auto;gap:1rem 2rem;align-items:baseline;padding:clamp(1.2rem,3vw,2.2rem) 0;border-bottom:1px solid var(--line);
  color:var(--ink);text-decoration:none;transition:padding .45s cubic-bezier(.16,1,.3,1),background .3s}
.fl-charge a:hover{background:var(--green-soft);padding-left:.8rem}
.fl-charge .t{color:var(--green);font:500 .78rem/1.35 var(--mono)}
.fl-charge .nm{font:400 clamp(1.7rem,4.4vw,3.6rem)/1 var(--display);font-variation-settings:"opsz" 144;letter-spacing:-.035em}
.fl-charge a:not(:first-child) .nm{font-size:clamp(1.3rem,2.8vw,2.1rem)}
.fl-charge .go{font:500 .8rem var(--mono);color:var(--muted)}
@media (max-width:760px){.fl-charge a{grid-template-columns:1fr}.fl-charge .go{display:none}}

/* ---------- lists everywhere read as a ledger: rules, not boxes ---------- */
.list{background:transparent;border:0;border-top:1px solid var(--ink);border-radius:0}
.list > .li,.list > a.li{border-top:0;border-bottom:1px solid var(--line)}
.lga{border-radius:0}
.lga.led{border-left:3px solid var(--green)}
.fl-office{margin:0 0 .8rem;font:500 .78rem/1.35 var(--mono);letter-spacing:.02em;font-variation-settings:normal}
.fl-office a{color:var(--muted);text-decoration:none}
.fl-leaders .person{display:block;padding:0;border:0;background:none;gap:0}
.fl-leaders .person + .person{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--line)}

/* ---------- official profile: the name is the header ---------- */
.fl-person-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end}
.fl-role{color:var(--gold);margin:0 0 .8rem}
.fl-person h1{font-size:clamp(2.6rem,8.4vw,6.8rem);line-height:.92}
.fl-person p a{color:#fff}
.fl-photo .avatar{width:clamp(96px,16vw,160px);height:clamp(96px,16vw,160px);border:1px solid rgba(255,255,255,.3);border-radius:0}
.fl-profile{background:transparent;border:0;border-radius:0;overflow:visible}
.fl-profile .inner{padding:0}
.fl-profile h3.sub,.contacts-sub{font:400 clamp(1.4rem,3vw,2rem)/1.1 var(--display);letter-spacing:-.025em;margin:2.4rem 0 1rem;padding-top:1.2rem;border-top:1px solid var(--ink)}
.fl-profile .bio{font:400 clamp(1.15rem,2.2vw,1.5rem)/1.45 var(--display);font-variation-settings:"opsz" 30;max-width:46rem;margin:1.5rem 0}
.fl-profile .footnote{border-top:1px solid var(--line);margin-top:2rem;padding-top:1rem}
.contact,.cact,.social,.pn{border-radius:0}
@media (max-width:760px){.fl-person-grid{grid-template-columns:1fr}.fl-photo{order:-1}}

/* ---------- Why Obi ---------- */
.obihead{background:radial-gradient(120% 140% at 85% 0,#0B4A32 0,var(--night) 60%)}
.obi-tag{background:none;border:0;padding:0;color:var(--gold);font:500 .78rem/1.35 var(--mono);letter-spacing:.02em}
.obihead h1{font-size:clamp(3rem,11vw,9.5rem);line-height:.88;margin:.6rem 0 1.2rem}
.obihead p b{color:#fff;font-weight:600}
.obihead-date{font:italic 300 clamp(1.3rem,3vw,2.2rem)/1.15 var(--display);color:var(--gold) !important;margin-top:1.4rem}
.obi-record{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink);margin-bottom:1rem}
.obi-record .rec{background:none;border:0;border-right:1px solid var(--line);border-radius:0;box-shadow:none;padding:1.4rem 1.4rem 1.4rem 0;margin-right:1.4rem}
.obi-record .rec:last-child{border-right:0;margin-right:0}
.obi-record .rec b{display:block;font:300 clamp(2.2rem,5vw,4rem)/.9 var(--display);font-variation-settings:"opsz" 144;letter-spacing:-.04em;color:var(--green);margin-bottom:.7rem}
.obi-record .rec span{color:var(--muted)}
.obi-plans{background:transparent;border:0;border-top:1px solid var(--ink);border-radius:0;padding:1.5rem 0 0;max-width:46rem}
.obi-card{border:0;border-radius:0}
.obi-card::after{display:none}
.obi-card h2{color:#fff}
.obi-ticket b{color:var(--gold)}
.obi-facts li{border:1px solid rgba(255,255,255,.35);border-radius:0;background:none}
.obi-src a{color:var(--gold)}
@media (max-width:900px){.obi-record{grid-template-columns:1fr 1fr}.obi-record .rec:nth-child(2){border-right:0;margin-right:0}}
@media (max-width:560px){.obi-record{grid-template-columns:1fr}.obi-record .rec{border-right:0;margin-right:0;border-bottom:1px solid var(--line)}}

/* ---------- steps and elections ---------- */
.steps-list{list-style:none;counter-reset:step;margin:0;padding:0;border-top:1px solid var(--ink)}
.steps-list li{counter-increment:step;position:relative;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;
  padding:1.3rem 0 1.3rem clamp(3.6rem,8vw,6rem);margin:0;min-height:4.6rem}
.steps-list li::before{content:counter(step);position:absolute;left:0;top:.9rem;width:auto;height:auto;background:none;border:0;border-radius:0;
  font:300 clamp(2.4rem,5vw,3.6rem)/1 var(--display);font-variation-settings:"opsz" 144;letter-spacing:-.04em;color:var(--green)}
.steps-list li b{font-weight:600}
.votehead h1{font-size:clamp(2.6rem,8vw,6.4rem);line-height:.92}
.countdown{padding:1.4rem 1.6rem;text-align:left;border-radius:0}
.cd-num{display:block;font:300 clamp(5rem,12vw,9rem)/.8 var(--display);font-variation-settings:"opsz" 144;letter-spacing:-.06em}
.cd-unit{font:500 .78rem/1.35 var(--mono);display:block;margin:.6rem 0 .8rem}
.cd-what{display:block}
.cd-when{display:block;font:400 1.2rem/1.2 var(--display)}
.timeline .next > div{background:var(--gold-tint);border:0;border-left:3px solid var(--gold);border-radius:0}
.timeline::before{background:var(--line);width:1px}
.timeline li::before{border:1px solid var(--ink);background:var(--bg)}
.timeline .tl-election::before{background:var(--green);border-color:var(--green)}
.timeline .tl-deadline::before{background:var(--gold);border-color:var(--gold)}
.rule{border-top:3px solid var(--green);border-radius:0}
.rule.no{border-top-color:var(--red)}
.ballot-race,.cand,.event,.dataset,.card,.empty,.notice,.zone,.leader,.findbox,.finder.findbox{border-radius:0}
.vote-share{margin-top:1.6rem}

/* ---------- search: the box is the header ---------- */
.fl-searchhead .fl-find{max-width:44rem}
.fl-search input[type=search]{appearance:none;-webkit-appearance:none;background:none;border:0;border-radius:0;color:#fff;min-width:0;width:100%;
  font:400 clamp(1.4rem,3vw,2rem)/1.3 var(--display);padding:.45rem 0;min-height:56px}
.fl-search input[type=search]::placeholder{color:rgba(255,255,255,.4)}
.fl-search input[type=search]:focus{outline:2px solid var(--gold);outline-offset:2px;border:0}
.fl-search details{margin-top:1.2rem;color:var(--mist)}
.fl-search summary{cursor:pointer;font:500 .78rem/1.35 var(--mono);min-height:32px;display:inline-flex;align-items:center}
.fl-search .fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:.8rem;max-width:44rem}
.fl-search .fields label{color:var(--mist);font:500 .78rem/1.35 var(--mono);display:block;margin-bottom:.3rem}
.fl-search .fields select{width:100%;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);min-height:48px}
.fl-search .fields select option{color:var(--ink)}
@media (max-width:640px){.fl-search .fields{grid-template-columns:1fr}}
.results-head{margin:2.4rem 0 .8rem}
.results-head h2{font-size:clamp(1.5rem,3.4vw,2.2rem);margin:0}

/* ---------- institution ---------- */
.fl-inst h1{font-size:clamp(2.2rem,6.6vw,5.2rem);line-height:.95}
.fl-figs dd a{color:#fff}
.fl-head-card .top{background:transparent;border:0;border-top:1px solid var(--ink);padding:1.4rem 0 .4rem;display:block}
.fl-head-card .top .avatar{display:none}
.fl-head-card .top img.avatar{display:block;border-radius:0;margin-bottom:1rem}
.fl-head-card .top h2{font-size:clamp(1.9rem,4.6vw,3.6rem);margin:0;line-height:1}
.fl-head-card .top h2 a{color:var(--ink);text-decoration:none}
.fl-head-card .top h2 a:hover{color:var(--green)}
.fl-head-card .top .role{color:var(--green);font:500 .78rem/1.35 var(--mono);margin:.6rem 0}

/* ---------- ledger rows: the name leads, in the serif; monograms go square and quiet ---------- */
.list > .li,.list > a.li{padding:1.05rem 2.4rem 1.05rem 0;gap:1.1rem;transition:padding .45s cubic-bezier(.16,1,.3,1),background .3s}
.list > a.li:hover{padding-left:.8rem}
.li .txt strong{font:400 clamp(1.15rem,2.2vw,1.5rem)/1.15 var(--display);letter-spacing:-.02em;color:var(--ink)}
.li .txt small{margin-top:.2rem}
.li .txt em{font:400 .78rem/1.35 var(--mono);color:var(--muted);margin-top:.3rem}
.list > a.li::after{right:.6rem;width:8px;height:8px;border-top:1px solid var(--ink);border-right:1px solid var(--ink)}
.avatar{border-radius:0;font-weight:400}
span.avatar{background:transparent !important;border:1px solid var(--line);color:var(--muted)}

/* ---------- tiles, doors and tool cards: ruled, not boxed ---------- */
.tile,.door,.acc,.ww,.topic{background:transparent;border:0;border-top:1px solid var(--ink);border-radius:0;box-shadow:none;padding-left:0;padding-right:0;transition:padding .45s cubic-bezier(.16,1,.3,1),background .3s}
.tile:hover,.door:hover,.acc:hover,.ww:hover,.topic:hover{background:var(--green-soft);border-color:var(--ink);box-shadow:none;transform:none;padding-left:.8rem}
.tile{font:400 1.3rem/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)}
.door h3,.acc h3,.ww h3,.topic h3{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-top:.6rem}
.card,.empty,.notice{background:transparent}
.empty{border:0;border-top:1px dashed #9FB0A5;padding-left:0;padding-right:0;text-align:left}
.empty strong{display:block;font:400 1.3rem/1.2 var(--display);letter-spacing:-.02em;margin-bottom:.3rem}

/* ---------- pages with no dark header: the title still leads ---------- */
main > .wrap > h1{font-size:clamp(2.2rem,6vw,4.4rem);line-height:.98;margin:clamp(1rem,3vw,2rem) 0 1rem;padding-bottom:1.2rem;border-bottom:1px solid var(--ink)}
main > .wrap > .crumbs,main > .wrap > nav.crumbs{font:500 .78rem/1.35 var(--mono);margin-top:1rem}
.section{margin-top:clamp(2.5rem,6vw,4.5rem)}
.sec-head .lead,.section > .lead,p.lead{font-weight:400;color:var(--muted);max-width:44rem}
table{border-collapse:collapse}
.results-table,.race .results-table{border:0;border-radius:0;box-shadow:none;background:transparent}
.results-table th{font:500 .78rem/1.35 var(--mono);text-align:left;border-bottom:1px solid var(--ink);color:var(--muted)}
.results-table td{border-bottom:1px solid var(--line)}
.cand{border:0;border-top:1px solid var(--line);background:transparent;padding-left:0;padding-right:0}
.filters{background:transparent;border:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);border-radius:0;padding-left:0;padding-right:0}
.fl-search summary{color:var(--mist)}
.fl-search summary:hover{color:#fff}
.door h3,.acc h3,.ww h3,.topic h3,.door strong,.acc strong,.ww strong,.topic strong{font-family:var(--display);font-weight:400;letter-spacing:-.02em}

/* ---------- desktop polish (from a pass at 1440px) ---------- */
/* the menu stays on one line */
.mainnav > a,.mainnav .dd > a{white-space:nowrap;padding:0 .7rem;font-size:.95rem;gap:.35rem}
.mainnav .obi-link,.mainnav .vote-link{padding:.4rem .75rem}
.wrap{max-width:1240px}
@media (max-width:1180px){.mainnav .ico-svg{display:none}.mainnav > a,.mainnav .dd > a{padding:0 .55rem}}

/* home: chapters line up with the menu and the inner pages, and the first one never grows past a screen */
.fl-hero,.fl-white,.fl-green{--pad:max(1.1rem,calc((100vw - 1240px) / 2 + 1.1rem))}
.fl-hero{min-height:min(calc(100svh - 110px),860px)}
.fl-pick{margin-left:var(--pad);margin-right:var(--pad)}

/* section headings carry the same weight on every page */
main section > h2,main .wrap > section > h2,.notice h2,.reply h2,.card > h2,.card > h3,.site-report h2{font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.08;margin:0 0 .9rem}
.ballot-here .sec-head h2 .ico-svg{display:none}
.pagehead h1{margin-bottom:.35em}
.pagehead p{margin-top:0}

/* rows: no initials box beside an office or a person; a photo still shows */
.list span.avatar{display:none}
.list > .li,.list > a.li{min-height:0}

/* footer languages sit in a row */
.foot-langs{display:flex;flex-wrap:wrap;gap:.2rem}
.foot-langs a{min-height:36px}
.foot-langs a.on{background:var(--gold);color:var(--ink)}

/* tool cards and candidates: serif names */
.acc b{font:400 clamp(1.2rem,2vw,1.5rem)/1.15 var(--display);letter-spacing:-.02em;color:var(--ink);margin-top:.5rem}
.acc em{font-weight:600}
.cand strong{font:400 1.2rem/1.15 var(--display);letter-spacing:-.02em;color:var(--ink);margin-top:.35rem}
.cand{padding-top:.9rem;padding-bottom:.9rem}
.cand-grid{gap:0 1.6rem}

/* ballot on the results page: a ruled list, wide enough to read */
.ballot-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.6rem 2.4rem}
.ballot-race{background:transparent;border:0;border-top:1px solid var(--ink);padding:1rem 0 0}
.ballot-race h3{font-size:1.4rem;margin:0 0 .6rem}
.ballot-race h3 small{font:500 .78rem/1.35 var(--mono);margin-top:.2rem}
.ballot-race ul{gap:0}
.ballot-race li{padding:.5rem 0;border-bottom:1px solid var(--line);gap:.8rem}
.ballot-race:only-child ul{display:block;columns:3 240px;column-gap:2.4rem}
.ballot-race:only-child li{break-inside:avoid}
.party{font:500 .72rem/1 var(--mono);padding:.35rem .4rem}

/* Why Obi: the years stay on one line */
.obi-record .rec b{font-size:clamp(1.9rem,3.4vw,3rem);white-space:nowrap}
.fl-five li{min-height:min(56vh,520px)}
@media (max-width:900px){.fl-five li{min-height:min(44vh,420px)}}
.foot-grid .foot-langs{display:flex;flex-direction:row;flex-wrap:wrap;gap:.2rem}
.foot-grid .foot-langs a{display:inline-flex;align-items:center;width:auto;padding:0 .6rem}
@media (min-width:1100px){.acc-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ---------- animated home screen ---------- */
/* a very large flag moving slowly behind the first chapter, with gold dust rising through it */
.fl-flag{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0,#000 45%,#000 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0,#000 45%,#000 100%)}
.fl-hero-text,.fl-crest,.fl-hero-foot{position:relative;z-index:1}

/* the coat of arms breathes: it floats, and rays turn slowly behind it */
.fl-crest .rays{position:absolute;inset:-22%;border-radius:50%;opacity:.4;
  background:repeating-conic-gradient(from 0deg,rgba(227,179,65,.5) 0 2.5deg,transparent 2.5deg 10deg);
  -webkit-mask:radial-gradient(circle,transparent 46%,#000 47%,transparent 70%);mask:radial-gradient(circle,transparent 46%,#000 47%,transparent 70%);
  animation:fl-turn 80s linear infinite}
.fl-crest .halo{animation:fl-glow 6s ease-in-out infinite}
.js .fl-crest{animation:fl-float 7s ease-in-out infinite}
@keyframes fl-turn{to{transform:rotate(360deg)}}
@keyframes fl-glow{50%{opacity:.55;transform:scale(1.06)}}
@keyframes fl-float{50%{transform:translateY(-10px)}}

/* the second line of the headline changes: your area, then one state after another */
#fl-rot{display:inline-block;transition:transform .55s cubic-bezier(.77,0,.175,1),opacity .4s}
#fl-rot.out{transform:translateY(-105%);opacity:0}
#fl-rot.in{transform:translateY(105%);opacity:0;transition:none}

/* who is in charge, state by state, moving past */
.fl-ticker{position:relative;z-index:1;background:var(--night);color:#fff;overflow:hidden;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.fl-ticker .track{display:flex;width:max-content;padding:.95rem 0}
.fl-ticker .track.run{animation:fl-tick 90s linear infinite}
.fl-ticker:hover .track.run{animation-play-state:paused}
.fl-ticker span{display:inline-flex;align-items:baseline;gap:.6rem;padding:0 1.6rem;white-space:nowrap;
  font:400 1.25rem/1 var(--display);letter-spacing:-.02em;border-right:1px solid rgba(255,255,255,.16)}
.fl-ticker i{font:500 .72rem/1 var(--mono);font-style:normal;letter-spacing:.02em;color:var(--gold)}
@keyframes fl-tick{to{transform:translateX(-50%)}}

/* register rows arrive one after another as the list comes into view */
.js .fl-register .row{opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s cubic-bezier(.16,1,.3,1),padding .45s cubic-bezier(.16,1,.3,1),color .3s}
.js .fl-register .row.seen{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .fl-crest .rays,.fl-crest .halo,.js .fl-crest,.fl-ticker .track.run{animation:none}
  .fl-ticker{overflow-x:auto}
  .js .fl-register .row{opacity:1;transform:none}
}

/* ---------- Info-Nigeria logo ---------- */
.brand picture{display:block;line-height:0}
.brand .wordmark{display:block;height:46px;width:auto;max-width:none}
.topbar .wrap{min-height:64px}
.foot-brand .brand .wordmark{height:54px;margin-left:-8px}
@media (max-width:900px){.brand .wordmark{height:40px;margin-left:-6px}}

/* =====================================================================
   "Neon" theme, taken from the Info-Nigeria logo: black, neon green, loud italic.
   Built for people who give a page two seconds: one idea per screen, a few words,
   one big button where the thumb is. This layer sets the tokens and overrides
   what the layers above hard-code.
   ===================================================================== */
@font-face{font-family:"Anton";src:url("fonts/anton.woff2") format("woff2");font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Anton";src:url("fonts/anton-ext.woff2") format("woff2");font-weight:400;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Anton";src:url("fonts/anton-viet.woff2") format("woff2");font-weight:400;font-display:swap;
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Epilogue";src:url("fonts/epilogue.woff2") format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Epilogue";src:url("fonts/epilogue-ext.woff2") format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Epilogue";src:url("fonts/epilogue-viet.woff2") format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+1EA0-1EF9,U+20AB}
:root{
  --night:#050807; --bg:#050807; --canvas:#050807; --paper:#0D1411; --panel:#0D1411; --panel-2:#141E19;
  --ink:#F2FFF5; --forest:#F2FFF5; --muted:#9FB5A8; --mist:#9FB5A8; --line:#1F2E27;
  --green:#22E05A; --deep:#22E05A; --neon:#22E05A; --green-tint:#0E2B19; --green-soft:#0B1F13;
  --gold:#FFD21F; --yellow:#FFD21F; --gold-deep:#FFD21F; --gold-tint:#2A2408;
  --lime:#0B1F13; --pink:#FFD21F; --pink-tint:#2A2408; --blue:#6FB7FF; --indigo:#9DB0FF; --indigo-tint:#141A33; --adire:#0D1411;
  --orange:#FF8A3D; --clay:#FF8A3D; --clay-tint:#2B1810; --red:#FF5470; --red-soft:#2E1117;
  --display:"Anton","Impact","Arial Narrow Bold",sans-serif; --serif:var(--display);
  --sans:"Epilogue","Segoe UI",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --r:18px; --pop:none; --pop-sm:none; --bd:1px solid var(--line);
  --z-nw:#141E19; --z-ne:#141E19; --z-nc:#141E19; --z-sw:#141E19; --z-se:#141E19; --z-ss:#141E19;
  --glow:0 0 0 1px rgba(34,224,90,.5),0 0 28px rgba(34,224,90,.28);
  color-scheme:dark;
}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--sans)}
::selection{background:var(--neon);color:#031006}
a{color:var(--neon)}
a:hover{color:#fff}
h1,h2,h3,.sec-head h2,.section > h2,section h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;font-variation-settings:normal;line-height:1;color:var(--ink);text-wrap:balance}
h3{letter-spacing:.01em;line-height:1.05}
.mono{font:500 .78rem/1.35 var(--mono)}
:focus-visible{outline:3px solid var(--neon);outline-offset:3px}
.muted,.small.muted,.sec-head .lead,.section > .lead,p.lead{color:var(--muted)}
.progress{display:none}

/* buttons: big, round, in reach of the thumb */
.btn,button{border-radius:999px;border:0;background:var(--neon);color:#031006;font:800 1rem/1 var(--sans);min-height:52px;padding:0 1.5rem;box-shadow:none;transition:transform .15s,box-shadow .2s,background .2s}
.btn:hover,button:hover{background:#fff;color:#031006;transform:translateY(-2px);box-shadow:0 10px 30px rgba(34,224,90,.35)}
.btn:active,button:active{transform:scale(.97)}
.btn.ghost,button.ghost,.btn.ghost-light,.btn.line{background:transparent;color:var(--ink);border:1.5px solid #3A4E44}
.btn.ghost:hover,button.ghost:hover,.btn.ghost-light:hover,.btn.line:hover{background:var(--ink);color:#031006;border-color:var(--ink)}
.btn.gold,.btn.y{background:var(--gold);color:#1A1500;border:0}
.btn.gold:hover,.btn.y:hover{background:#fff;color:#1A1500}
.btn.light{background:#fff;color:#031006}
.btn.act.call{background:var(--neon);color:#031006}
.btn.act.mail{background:var(--panel-2);color:var(--ink);border:1.5px solid #3A4E44}
.btn.act.wa{background:#25D366;color:#031006;border:0}
.btn.danger,button.danger{background:var(--red);color:#1A0006}
.chip{border-radius:999px;border:1.5px solid #3A4E44;background:transparent;color:var(--ink);font-weight:700}
.chip:hover{background:var(--panel-2);color:#fff}
.chip.on{background:var(--neon);color:#031006;border-color:var(--neon)}
.badge{border-radius:999px;background:var(--green-tint);color:var(--neon);border:0;font-weight:700}
.badge.warn{background:var(--gold-tint);color:var(--gold)}
.badge.plain{background:var(--panel-2);color:var(--ink);border:0}
input,select,textarea{background:var(--panel);color:var(--ink);border:1.5px solid #3A4E44;border-radius:14px;font-family:var(--sans)}
input::placeholder,textarea::placeholder{color:#6F8478}
input:focus,select:focus,textarea:focus{border-color:var(--neon);outline:3px solid rgba(34,224,90,.35);outline-offset:0}
select option{background:#0D1411;color:var(--ink)}
label{color:var(--ink);font-weight:700}

/* top of every page */
.flagbar{height:3px;border:0;background:linear-gradient(90deg,var(--neon) 0 33.3%,#fff 33.3% 66.6%,var(--neon) 66.6%)}
.topbar{background:rgba(5,8,7,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.mainnav > a,.mainnav .dd > a{color:var(--ink);font-weight:700}
.mainnav > a:hover,.mainnav .dd:hover > a,.mainnav .dd:focus-within > a{background:var(--panel-2);color:var(--neon)}
.mainnav a.on::after{height:3px;background:var(--neon)}
.mainnav .ico-svg{color:var(--neon)}
.mainnav .vote-link{border:1.5px solid var(--neon);color:var(--neon);border-radius:999px;background:transparent}
.mainnav .vote-link .ico-svg{color:var(--neon)}
.mainnav .vote-link:hover{background:var(--neon);color:#031006}
.mainnav .vote-link:hover .ico-svg{color:#031006}
.mainnav .obi-link{background:var(--gold);color:#1A1500;border:0;border-radius:999px;font-weight:800}
.mainnav .obi-link:hover{background:#fff;color:#1A1500}
.panel-in{background:var(--panel);border:1px solid var(--line);border-radius:0 0 22px 22px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.panel-in a{color:var(--ink)}
.panel-top strong{font-family:var(--display);text-transform:uppercase;font-weight:400;letter-spacing:.01em}
.mi{background:var(--green-tint);color:var(--neon);border-radius:12px}
.mega-links a:hover,.mega-topics a:hover,.mega-zones a:hover{background:var(--panel-2);color:var(--neon)}
.mega-zones h3{color:var(--muted)}
.strip{background:#030504;color:var(--muted);border-bottom:1px solid var(--line)}
.strip a{color:var(--ink)}
.strip .sos{color:var(--gold)}
.langs a{color:var(--muted);border-radius:999px}
.langs a:hover{background:var(--panel-2);color:#fff}
.langs a.on{background:var(--neon);color:#031006}
.votebar{background:var(--neon);color:#031006;border:0}
.votebar:hover{color:#031006}
.vb-count{color:#031006}
.vb-count b{font-family:var(--display);font-weight:400;color:#031006;font-size:2.1rem}
.vb-text strong{color:#031006}
.vb-text small{color:#0A3A1A}
.vb-go{background:#031006;color:#fff;border:0;border-radius:999px}

/* inner page headers: black, with a green light behind the title */
.pagehead,.obihead{background:radial-gradient(90% 120% at 85% -10%,rgba(34,224,90,.28) 0,transparent 55%),var(--bg);color:var(--ink);border-bottom:1px solid var(--line);padding:clamp(2rem,6vw,4rem) 0 clamp(1.6rem,4vw,3rem)}
.pagehead h1,.fl-person h1,.fl-inst h1,.obihead h1,.votehead h1{color:var(--ink);font-size:clamp(2.6rem,9vw,6.2rem);line-height:.98;letter-spacing:.005em;text-shadow:none;margin:.2em 0 .25em}
.pagehead p{color:var(--muted);font-weight:400}
.pagehead .crumbs,.pagehead .crumbs a{color:var(--muted)}
.jump a{background:transparent;color:var(--ink);border:1.5px solid #3A4E44;border-radius:999px;font-weight:700}
.jump a:hover{background:var(--neon);color:#031006;border-color:var(--neon)}
.votehead{background:radial-gradient(90% 120% at 85% -10%,rgba(34,224,90,.4) 0,transparent 60%),var(--bg)}
.votehead p,.votehead .crumbs,.votehead .crumbs a{color:var(--muted)}
.countdown{background:var(--panel);border:1px solid var(--line);border-radius:22px;color:var(--ink);box-shadow:var(--glow)}
.cd-num{font-family:var(--display);font-weight:400;color:var(--neon);letter-spacing:0}
.cd-unit,.cd-when{color:var(--ink)}
.cd-when{font-family:var(--sans);font-weight:700}
.cd-what{color:var(--muted)}
.fl-role{color:var(--neon)}
.fl-person p a,.fl-figs dd a{color:var(--ink)}
.fl-figs{border-top:1px solid var(--line)}
.fl-figs dt{color:var(--muted)}
.fl-figs dd{color:var(--ink);font:400 clamp(1.5rem,3.6vw,2.4rem)/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.fl-find{border-bottom:2px solid #3A4E44}
.fl-find select,.fl-search input[type=search]{font:400 clamp(1.5rem,4vw,2.2rem)/1.2 var(--display);text-transform:uppercase;color:var(--ink);background:none;border:0;border-radius:0}
.fl-find button{color:var(--neon);background:none;font-weight:800;min-height:56px;border-radius:0}
.fl-find button:hover{background:none;color:#fff;transform:none;box-shadow:none}
.fl-note,.fl-find label{color:var(--muted)}
.fl-search summary{color:var(--muted)}
.fl-search .fields select{background:var(--panel);border:1.5px solid #3A4E44;color:var(--ink)}

/* surfaces: dark cards with soft corners; rows that light up */
.card,.profile,.zone,.notice,.leader,.contact,.cact,.social,.pn,.filters,.finder,.event,.dataset,.rule,.level,.promiser,.rc-period,.reply,.site-report,
.budget-total div,.rc-stat,.searchbox,.choice,.facts div,.bill-list li,.officedetails,.ready li,.steps-list li,.lga,.results-table,.race .results-table{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:none;color:var(--ink)}
.fl-profile,.fl-profile .inner{background:transparent;border:0}
.contact.locked{background:transparent;border-style:dashed}
.contact.shared{background:var(--green-soft)}
.list{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0}
.list > .li,.list > a.li{border-bottom:1px solid var(--line);color:var(--ink);padding:1.05rem 2.4rem 1.05rem .2rem;border-radius:0}
.list > a.li:hover{background:var(--panel);padding-left:.9rem}
.list > a.li::after{border-color:var(--neon)}
.li .txt strong{font:400 clamp(1.25rem,2.6vw,1.6rem)/1.1 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}
.li .txt small{color:var(--muted)}
.li .txt em{color:#7C9186}
.tile,.door,.acc,.ww,.topic{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;color:var(--ink)}
.tile:hover,.door:hover,.acc:hover,.ww:hover,.topic:hover,.lga:hover,a.pn:hover,.social:hover,.cact:hover,.leader-person:hover{background:var(--panel-2);border-color:var(--neon);box-shadow:var(--glow);padding-left:1.2rem;transform:translateY(-2px);color:#fff}
.tile{font:400 1.4rem/1.1 var(--display);text-transform:uppercase}
.acc b,.door h3,.acc h3,.ww h3,.topic h3,.door strong,.ww strong,.topic strong{font:400 clamp(1.3rem,2.2vw,1.6rem)/1.05 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}
.acc small,.acc span{color:var(--muted)}
.acc em{color:var(--neon)}
.ready-ico,.ww-ico,.lv-ico,.door-ico,.findbox-ico{background:var(--green-tint) !important;color:var(--neon) !important;border:0;border-radius:14px}
.ww:nth-child(2) .ww-ico,.ww:nth-child(3) .ww-ico,.ww:nth-child(4) .ww-ico{background:var(--green-tint) !important}
.empty{background:transparent;border:0;border-top:1px dashed #3A4E44;border-radius:0;color:var(--muted)}
.empty strong{font:400 1.4rem/1.1 var(--display);text-transform:uppercase;color:var(--ink)}
.notice{border-left:4px solid var(--gold)}
.notice.emergency{border-left-color:var(--red)}
.flash{border-radius:14px;border:0}
.flash.ok{background:var(--green-tint);color:var(--neon)}
.flash.error{background:var(--red-soft);color:var(--red)}
.sample{background:var(--gold-tint);color:var(--gold);border:0;border-radius:14px}
.callout{background:var(--panel);border-top:1px solid var(--line);border-bottom:0}
.callout strong{font:400 1.5rem/1.05 var(--display);text-transform:uppercase;color:var(--ink)}
.callout p{color:var(--muted)}
.zone{border-top:3px solid var(--neon)}
.zstates a{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);border-radius:12px}
.zstates a:hover{background:var(--neon);color:#031006;border-color:var(--neon)}
.lga.led{border-left:3px solid var(--neon)}
.lga strong{color:var(--ink)}
.lga small{color:var(--muted)}
.party{background:var(--neon);color:#031006;border-radius:6px;font:700 .72rem/1 var(--mono)}
.avatar{border-radius:14px}
table{color:var(--ink)}
.results-table th{color:var(--muted);border-bottom:1px solid #3A4E44}
.results-table td{border-bottom:1px solid var(--line)}
.vbar{background:var(--panel-2);border:0}
.vbar i{background:var(--neon)}
.meter{background:var(--panel-2);border:0}
.letter{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--neon);color:var(--ink)}
.footnote{color:var(--muted);border-top:1px solid var(--line)}
.crumbs,.crumbs a,main > .wrap > .crumbs,main > .wrap > nav.crumbs{color:var(--muted)}
main > .wrap > h1{border-bottom:1px solid var(--line);font-size:clamp(2.4rem,7vw,4.6rem)}
main section > h2,main .wrap > section > h2,.notice h2,.reply h2,.card > h2,.card > h3,.site-report h2,.results-head h2{font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1}
.sec-head h2{font-size:clamp(2rem,5.4vw,3.6rem)}
.fl-profile h3.sub,.contacts-sub{font:400 clamp(1.5rem,3.2vw,2.1rem)/1 var(--display);text-transform:uppercase;border-top:1px solid var(--line)}
.fl-profile .bio{font:400 1.15rem/1.55 var(--sans);color:var(--ink)}

/* Find my leaders: five big rows */
.fl-leaders{border-top:0;display:grid;gap:.8rem}
.fl-leaders > li{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:clamp(1.1rem,3vw,2rem);grid-template-columns:clamp(3rem,7vw,5.5rem) minmax(0,.7fr) minmax(0,1.5fr)}
.fl-leaders > li:not(.none){border-color:#2C4A39}
.fl-leaders .n{font:400 clamp(3rem,8vw,6rem)/.85 var(--display);color:var(--neon);letter-spacing:0}
.fl-leaders > li.none .n{color:#3A4E44}
.fl-leaders .role{color:var(--neon);font:700 .8rem/1.3 var(--sans);text-transform:uppercase;letter-spacing:.06em}
.fl-leaders .what p,.fl-leaders .seat,.fl-leaders .office{color:var(--muted)}
.fl-leaders .name{font:400 clamp(1.9rem,5vw,3.4rem)/1 var(--display);text-transform:uppercase;letter-spacing:.005em;color:var(--ink)}
.fl-leaders a.name:hover{color:var(--neon)}
.fl-leaders > li.none .name{font-style:normal;color:#6F8478}
.fl-leaders .chk{color:var(--gold)}
.fl-leaders .chk.ok{color:var(--neon)}
.fl-leaders .acts a{color:#031006;background:var(--neon);border:0;border-radius:999px;padding:.7rem 1.1rem;font-weight:800;min-height:44px;display:inline-flex;align-items:center}
.fl-leaders .acts a + a{background:transparent;color:var(--ink);border:1.5px solid #3A4E44}
.fl-leaders .acts a:hover{background:#fff;color:#031006;border-color:#fff}
.fl-leaders .person + .person{border-top:1px solid var(--line)}
.fl-charge{border-top:1px solid var(--line)}
.fl-charge a{color:var(--ink);border-bottom:1px solid var(--line)}
.fl-charge a:hover{background:var(--panel)}
.fl-charge .t{color:var(--neon)}
.fl-charge .nm{font:400 clamp(1.9rem,5vw,3.6rem)/1 var(--display);text-transform:uppercase;letter-spacing:.005em}
.fl-charge a:not(:first-child) .nm{font-size:clamp(1.4rem,3vw,2.2rem)}
.fl-charge .go,.fl-office a{color:var(--muted)}
.fl-head-card .top{border-top:1px solid var(--line)}
.fl-head-card .top h2 a{color:var(--ink)}
.fl-head-card .top h2 a:hover{color:var(--neon)}
.fl-head-card .top .role{color:var(--neon)}

/* elections, Why Obi, steps */
.steps-list{border-top:0;display:grid;gap:.6rem}
.steps-list li{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:1.2rem 1.2rem 1.2rem clamp(4rem,9vw,5.5rem);color:var(--ink)}
.steps-list li::before{left:1.1rem;top:.85rem;font:400 clamp(2.4rem,5vw,3.2rem)/1 var(--display);color:var(--neon);letter-spacing:0}
.timeline::before{background:var(--line)}
.timeline li::before{background:var(--bg);border:2px solid #3A4E44}
.timeline .tl-election::before{background:var(--neon);border-color:var(--neon);box-shadow:0 0 14px rgba(34,224,90,.8)}
.timeline .tl-deadline::before{background:var(--gold);border-color:var(--gold)}
.timeline .next > div{background:var(--green-tint);border:0;border-left:4px solid var(--neon);border-radius:14px}
.timeline strong,.timeline time b{color:var(--ink)}
.timeline time,.timeline small,.timeline p{color:var(--muted)}
.rule{border-top:3px solid var(--neon)}
.rule.no{border-top-color:var(--red)}
.ballot-race{border:0;border-top:1px solid #3A4E44;background:transparent;border-radius:0}
.ballot-race li{border-bottom:1px solid var(--line)}
.cand{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1rem}
.cand strong{font:400 1.3rem/1.05 var(--display);text-transform:uppercase;color:var(--ink)}
.cand small{color:var(--muted)}
.cand-grid{gap:.7rem}
.obi-tag{color:var(--gold);font:700 .8rem/1.3 var(--sans);text-transform:uppercase;letter-spacing:.06em}
.obihead h1{font-size:clamp(3.4rem,13vw,9rem)}
.obihead p b{color:var(--ink)}
.obihead-date{font:400 clamp(1.4rem,3.6vw,2.2rem)/1.1 var(--display);font-style:normal;text-transform:uppercase;color:var(--gold) !important}
.obi-record{border-top:0;gap:.7rem}
.obi-record .rec{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:1.2rem;margin:0}
.obi-record .rec:last-child{border-right:1px solid var(--line)}
.obi-record .rec b{font:400 clamp(2rem,4vw,3rem)/1 var(--display);color:var(--neon);letter-spacing:0}
.obi-record .rec span{color:var(--muted)}
.obi-plans{border-top:1px solid var(--line);color:var(--ink)}
.legal,.legal p,.legal li{color:var(--ink)}

/* footer and the phone tab bar */
footer{background:#030504;color:var(--muted);border-top:1px solid var(--line)}
.foot-grid{border-bottom-color:var(--line)}
.foot-grid h3{font:700 .8rem/1.3 var(--sans);color:var(--neon);text-transform:uppercase;letter-spacing:.06em}
.foot-grid a{color:var(--ink)}
.foot-grid a:hover{color:var(--neon)}
.foot-brand p,.foot-disc{color:var(--muted)}
.foot-langs a.on{background:var(--neon);color:#031006}
@media (max-width:900px){
  .tabbar{background:rgba(5,8,7,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);box-shadow:none}
  .tabbar a{color:var(--muted);font-weight:700;border-radius:14px}
  .tabbar a.on{background:transparent;color:var(--neon);border:0;box-shadow:none}
  .tabbar a.vote{background:var(--neon);color:#031006;border:0;box-shadow:0 0 22px rgba(34,224,90,.45)}
  .tabbar a.vote .ico-svg{color:#031006}
}

/* =================== home: full-screen shots =================== */
.home{scroll-snap-type:y proximity}
html:has(body.home){scroll-snap-type:y proximity;scroll-padding-top:var(--top,64px)}
.home main{padding:0}
body.home{overflow-x:clip}
.home main > .wrap:empty{display:none}
.nx-bars{position:fixed;left:0;right:0;top:0;z-index:80;display:flex;gap:4px;padding:6px 10px 0;pointer-events:none}
.nx-bars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden}
.nx-bars i::after{content:"";display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .5s}
.nx-bars i.done::after,.nx-bars i.on::after{transform:scaleX(1)}
.nx-bars i.on::after{background:var(--neon)}
.home .flagbar{display:none}
.nx-shot{--pad:max(1.1rem,calc((100vw - 1240px) / 2 + 1.1rem));position:relative;z-index:1;min-height:min(calc(100svh - var(--top,64px)),920px);display:flex;align-items:flex-end;overflow:hidden;
  padding:5rem var(--pad) clamp(1.6rem,5vh,3.5rem);scroll-snap-align:start;border-bottom:1px solid var(--line);background:var(--bg)}
.nx-in{position:relative;z-index:2;width:100%}
.nx-tag{display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1rem;padding:.45rem .85rem;border-radius:999px;background:rgba(13,20,17,.8);border:1px solid var(--line);
  color:var(--ink);font:700 .8rem/1.2 var(--sans);text-transform:uppercase;letter-spacing:.06em}
.nx-tag i{width:8px;height:8px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--neon);animation:nx-blink 1.6s ease-in-out infinite}
.nx-tag.gold i{background:var(--gold);box-shadow:0 0 10px var(--gold)}
.nx-shot h1,.nx-shot h2{margin:0;font-size:clamp(3.6rem,15.5vw,11.5rem);line-height:.92;letter-spacing:0;color:#fff}
.nx-shot h1 em,.nx-shot h2 em{font-style:italic;color:var(--neon);text-shadow:0 0 34px rgba(34,224,90,.55)}
.nx-pick h2 em{color:var(--gold);text-shadow:0 0 34px rgba(255,210,31,.5)}
.nx-shot .ln{display:block;overflow:hidden;padding:.06em .08em .04em 0}
.js .nx-shot .ln > span{display:block;transform:translateY(112%) skewY(4deg);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.js .nx-shot .ln:nth-child(2) > span{transition-delay:.09s}
.js .nx-shot.live .ln > span{transform:none}
.js .nx-shot .nx-tag,.js .nx-shot .nx-find,.js .nx-shot .nx-cta,.js .nx-shot .nx-sub,.js .nx-shot .nx-cards,.js .nx-shot .nx-chips,.js .nx-shot .nx-tools,.js .nx-shot .nx-days,.js .nx-shot .nx-row{opacity:0;transform:translateY(22px);transition:opacity .6s .25s,transform .7s .25s cubic-bezier(.16,1,.3,1)}
.js .nx-shot.live .nx-tag,.js .nx-shot.live .nx-find,.js .nx-shot.live .nx-cta,.js .nx-shot.live .nx-sub,.js .nx-shot.live .nx-cards,.js .nx-shot.live .nx-chips,.js .nx-shot.live .nx-tools,.js .nx-shot.live .nx-days,.js .nx-shot.live .nx-row{opacity:1;transform:none}
.nx-sub{max-width:38rem;margin:1.1rem 0 0;color:var(--muted);font-size:1.05rem}
.nx-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.nx-cta{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 1.8rem;margin-top:1.4rem;border-radius:999px;background:var(--neon);color:#031006;
  font:800 1.1rem/1 var(--sans);text-decoration:none;box-shadow:0 0 0 0 rgba(34,224,90,.6);animation:nx-pulse 2.4s ease-out infinite;transition:transform .15s,background .2s}
.nx-row .nx-cta{margin-top:0}
.nx-cta:hover{background:#fff;color:#031006;transform:translateY(-2px)}
.nx-cta:active{transform:scale(.97)}
.nx-cta.ghost{background:transparent;color:#fff;border:1.5px solid #4A6055;animation:none}
.nx-cta.ghost:hover{background:#fff;color:#031006;border-color:#fff}
.nx-cta.gold{background:var(--gold);color:#1A1500;animation-name:nx-pulse-gold}
@keyframes nx-pulse{0%{box-shadow:0 0 0 0 rgba(34,224,90,.55)}70%,100%{box-shadow:0 0 0 18px rgba(34,224,90,0)}}
@keyframes nx-pulse-gold{0%{box-shadow:0 0 0 0 rgba(255,210,31,.55)}70%,100%{box-shadow:0 0 0 18px rgba(255,210,31,0)}}
@keyframes nx-blink{50%{opacity:.35}}

.nx-open{scroll-snap-align:none}
/* shot 1: the banner plays like a film title above the question; on wide screens it sits to the right */
.nx-bg{position:absolute;left:0;right:0;top:0;aspect-ratio:16/10;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
.nx-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;max-width:none;animation:nx-film 22s ease-in-out infinite alternate;filter:saturate(1.15) contrast(1.05)}
.nx-bg::after{content:"";position:absolute;inset:-20% -60%;z-index:2;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.2) 50%,transparent 58%);animation:nx-sweep 7s ease-in-out infinite}
.nx-net{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen}
@media (min-width:901px){
  .nx-open{align-items:center}
  .nx-open .nx-in{max-width:min(46%,600px)}
  .nx-open h1{font-size:clamp(4rem,7.6vw,7.4rem)}
  .nx-open .nx-next{display:none}
  .nx-bg{left:auto;right:var(--pad);top:50%;width:min(50%,640px);aspect-ratio:16/9;border-radius:28px;transform:translateY(-50%) rotate(2deg);
    -webkit-mask-image:none;mask-image:none;border:1px solid rgba(34,224,90,.45);box-shadow:0 0 0 1px rgba(34,224,90,.2),0 0 90px rgba(34,224,90,.35),0 40px 90px rgba(0,0,0,.7)}
  .nx-bg img{object-position:50% 50%}
}
@keyframes nx-film{from{transform:scale(1)}to{transform:scale(1.09) translate(0,-1.5%)}}
@keyframes nx-sweep{0%,35%{transform:translateX(-45%)}75%,100%{transform:translateX(45%)}}
#nx-rot{display:inline-block;transition:transform .5s cubic-bezier(.77,0,.175,1),opacity .35s}
#nx-rot.out{transform:translateY(-105%);opacity:0}
#nx-rot.in{transform:translateY(105%);opacity:0;transition:none}
.nx-find{display:flex;gap:.5rem;margin-top:1.4rem;max-width:36rem;padding:.4rem;border-radius:999px;background:rgba(13,20,17,.88);border:1.5px solid #3A4E44;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nx-find select{flex:1;min-width:0;min-height:54px;border:0;background:transparent;color:#fff;font:700 1.1rem var(--sans);padding:0 1rem;border-radius:999px}
.nx-find select:focus{outline:none}
.nx-find:focus-within{border-color:var(--neon);box-shadow:var(--glow)}
.nx-find button{min-height:54px;padding:0 1.6rem;animation:nx-pulse 2.4s ease-out infinite}
.nx-next{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.3rem;color:var(--muted);font:700 .8rem/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;min-height:44px}
.nx-next::before{content:"";width:10px;height:10px;border-left:2px solid var(--neon);border-top:2px solid var(--neon);transform:rotate(45deg);animation:nx-up 1.4s ease-in-out infinite}
@keyframes nx-up{0%,100%{transform:translateY(3px) rotate(45deg)}50%{transform:translateY(-4px) rotate(45deg)}}

/* ticker */
.nx-ticker{position:relative;z-index:1;background:var(--neon);color:#031006;overflow:hidden;transform:rotate(-1.2deg) scale(1.03);margin:-.6rem 0}
.nx-ticker .track{display:flex;width:max-content;padding:.7rem 0}
.nx-ticker .track.run{animation:fl-tick 70s linear infinite}
.nx-ticker span{display:inline-flex;align-items:baseline;gap:.5rem;padding:0 1.3rem;white-space:nowrap;font:400 1.3rem/1 var(--display);text-transform:uppercase}
.nx-ticker i{font:800 .7rem/1 var(--sans);font-style:normal;letter-spacing:.06em;opacity:.7}

/* shot 2: five cards you swipe sideways */
.nx-five{background:radial-gradient(80% 60% at 100% 0,rgba(34,224,90,.2) 0,transparent 60%),var(--bg)}
.nx-cards{list-style:none;margin:1.4rem calc(var(--pad) * -1) 0;padding:0 var(--pad) .6rem;display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.nx-cards::-webkit-scrollbar{display:none}
.nx-cards li{position:relative;flex:0 0 min(78vw,300px);scroll-snap-align:start;scroll-margin-left:var(--pad);min-height:230px;padding:1.1rem 1.2rem 1.2rem;border-radius:24px;background:var(--panel);border:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .3s}
.nx-cards li:hover,.nx-cards li:focus-within{border-color:var(--neon);box-shadow:var(--glow);transform:translateY(-4px)}
.nx-cards .n{position:absolute;right:.6rem;top:-.6rem;font:400 9rem/1 var(--display);color:rgba(34,224,90,.16)}
.nx-cards .role{color:var(--neon);font:700 .78rem/1.3 var(--sans);text-transform:uppercase;letter-spacing:.06em}
.nx-cards .name{margin:.35rem 0 .5rem;font:400 clamp(1.7rem,6vw,2.3rem)/1 var(--display);text-transform:uppercase;color:#fff;text-decoration:none}
.nx-cards .name::after{content:"";position:absolute;inset:0}
.nx-cards .name.none{color:#6F8478}
.nx-cards .does{color:var(--muted);font-size:.92rem;line-height:1.4}

/* shot 3: the countdown */
.nx-count{background:var(--bg)}
.nx-rings{position:absolute;right:-18vmin;top:50%;width:110vmin;height:110vmin;transform:translateY(-50%);pointer-events:none}
.nx-rings i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(34,224,90,.5);animation:nx-ring 4.5s ease-out infinite}
.nx-rings i:nth-child(2){animation-delay:1.5s}.nx-rings i:nth-child(3){animation-delay:3s}
@keyframes nx-ring{from{transform:scale(.25);opacity:.9}to{transform:scale(1);opacity:0}}
.nx-days{margin:0 0 .4rem;display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.nx-days b{font:400 clamp(8rem,38vw,26rem)/.8 var(--display);color:var(--neon);text-shadow:0 0 60px rgba(34,224,90,.5)}
.nx-days span{font:800 clamp(1rem,3vw,1.5rem)/1 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:#fff}
.nx-count h2{font-size:clamp(2.6rem,9vw,6rem)}

/* shot 4: our pick */
.nx-pick{background:radial-gradient(80% 70% at 0 100%,rgba(255,210,31,.2) 0,transparent 60%),var(--bg)}

/* shot 5: states as fast chips */
.nx-states{align-items:flex-start;min-height:0;padding-top:clamp(3.5rem,9vh,6rem)}
.nx-states h2,.nx-hold h2{font-size:clamp(3rem,11vw,8rem)}
.nx-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.55rem;margin-top:1.5rem}
.nx-chips a{display:flex;flex-direction:column;justify-content:center;min-height:62px;padding:.6rem .95rem;border-radius:16px;background:var(--panel);border:1px solid var(--line);color:#fff;text-decoration:none;transition:.2s}
.nx-chips b{font:400 1.25rem/1.05 var(--display);text-transform:uppercase;letter-spacing:.01em}
.nx-chips small{color:var(--muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-chips a:hover,.nx-chips a:focus-visible{background:var(--neon);color:#031006;border-color:var(--neon);transform:translateY(-3px);box-shadow:0 10px 30px rgba(34,224,90,.35)}
.nx-chips a:hover small,.nx-chips a:focus-visible small{color:#0A3A1A}

/* shot 6: tools */
.nx-hold{align-items:flex-start;min-height:0;padding-top:clamp(3.5rem,9vh,6rem);border-bottom:0}
.nx-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.7rem;margin-top:1.5rem}
.nx-tools a{display:flex;flex-direction:column;gap:.4rem;justify-content:flex-end;min-height:150px;padding:1.2rem;border-radius:22px;background:var(--panel);border:1px solid var(--line);color:#fff;text-decoration:none;transition:.25s}
.nx-tools b{font:400 clamp(1.5rem,3vw,2rem)/1 var(--display);text-transform:uppercase}
.nx-tools span{color:var(--muted);font-size:.95rem}
.nx-tools a:hover,.nx-tools a:focus-visible{border-color:var(--neon);box-shadow:var(--glow);transform:translateY(-4px)}
.nx-tools a:hover b{color:var(--neon)}

@media (max-width:900px){
  .nx-shot{padding-bottom:calc(5.4rem + env(safe-area-inset-bottom,0px))}
  .nx-tag{font-size:.7rem;padding:.4rem .7rem}
  .nx-next{margin-top:.7rem}
  .nx-cta,.nx-row .nx-cta{width:100%}
  .nx-chips{grid-template-columns:1fr 1fr}
  .nx-rings{right:-40vmin;width:150vmin;height:150vmin}
}
@media (prefers-reduced-motion:reduce){
  .nx-bg img,.nx-bg::after,.nx-tag i,.nx-cta,.nx-find button,.nx-next::before,.nx-rings i,.nx-ticker .track.run{animation:none}
  .js .nx-shot .ln > span,.js .nx-shot .nx-tag,.js .nx-shot .nx-find,.js .nx-shot .nx-cta,.js .nx-shot .nx-sub,.js .nx-shot .nx-cards,.js .nx-shot .nx-chips,.js .nx-shot .nx-tools,.js .nx-shot .nx-days,.js .nx-shot .nx-row{opacity:1;transform:none;transition:none}
  .nx-ticker{overflow-x:auto;transform:none;margin:0}
  html:has(body.home){scroll-snap-type:none}
}