/* =====================================================================================================================
   BRUTALIST: this project's own look, laid over the shared components. Stark black on white, one loud yellow, heavy
   uppercase type, 3 px black borders, hard offset shadows, square corners, black panels. The markup and logic are the
   same as the main site's; only how it looks changes. Loaded after style.css.
   ===================================================================================================================== */
:root {
  --bg: #ffffff; --cream: #f1f1ea; --cream2: #e0e0d6; --ink: #000000; --text: #0b0b0b; --muted: #333333; --faint: #555555;
  --line: #000000; --line2: #000000; --green: #000000; --green-ink: #000000; --green2: #000000; --red-ink: #d81d00; --teal: #ffe500; --deep: #000000; --amber: #000000;
  --yes: #00b862; --no: #ff3b1f; --abs: #8f8f8f; --seat: #d8d8ce;
  --acc: #ffe500; --bw: 3px; --sh: 6px 6px 0 #000; --sh-sm: 4px 4px 0 #000;
  --grad: linear-gradient(var(--acc), var(--acc));
  --sans: "Archivo", "Arial Black", Impact, system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
html, body { font: 500 15px/1.5 var(--sans); background: var(--bg); color: var(--text); }
::selection { background: var(--acc); color: #000; }
a { color: #000; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { background: var(--acc); }
h1, h2, h3 { font-family: var(--sans); font-weight: 900; text-transform: uppercase; letter-spacing: -.025em; line-height: .92; color: #000; }
h4 { font-family: var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
code, .mono { font-family: var(--mono); }
.grad { background: var(--acc); -webkit-background-clip: border-box; background-clip: border-box; color: #000; padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lead { color: #111; font-weight: 500; }
.muted { color: var(--muted); } .dim { color: var(--faint) !important; }
hr { border-top: var(--bw) solid #000; }
label, .lbl { font: 700 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: #000; }

/* inputs */
input, textarea, select { border: var(--bw) solid #000; border-radius: 0; background: #fff; font-weight: 500; padding: 11px 13px; box-shadow: none; }
input:focus, textarea:focus, select:focus { border-color: #000; box-shadow: var(--sh-sm); background: #fffbd1; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; border-color: #000; }
.btn:focus-visible, .wallet:focus-visible, .coin:focus-visible, .prop:focus-visible, .feed-item:focus-visible, .kind:focus-visible, .tabs button:focus-visible, .nav a:focus-visible, .brand:focus-visible { outline: 3px solid #000; outline-offset: 3px; box-shadow: 0 0 0 6px var(--acc); }

/* the bar at the top and the foot */
.top, .top.scrolled { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: var(--bw) solid #000; }
.brand { font: 900 24px/1 var(--sans); letter-spacing: -.03em; text-transform: uppercase; text-decoration: none; }
.brand:hover { background: none; }
.brand b { font-weight: 900; }
.mark { background: var(--acc); border: var(--bw) solid #000; padding: 2px; width: 44px; height: 44px; box-shadow: var(--sh-sm); }
.brand:hover .mark { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; }
.nav { gap: 6px; }
.nav a { font: 800 13px/1 var(--sans); text-transform: uppercase; letter-spacing: .04em; color: #000; text-decoration: none; padding: 10px 12px; border: var(--bw) solid transparent; }
.nav a:hover { opacity: 1; background: var(--acc); border-color: #000; }
.nav a.on { background: #000; color: var(--acc); border-color: #000; }
.clock { font: 700 11px/1 var(--mono); text-transform: uppercase; color: #000; }
.clock::before { border-radius: 0; background: #000; }
.clock.ok::before { background: var(--yes); box-shadow: none; outline: 2px solid #000; }
.wallet { background: var(--acc); color: #000; border: var(--bw) solid #000; border-radius: 0; font: 800 13px/1 var(--sans); text-transform: uppercase; letter-spacing: .03em; padding: 11px 16px; box-shadow: var(--sh-sm); }
.wallet:hover { background: var(--acc); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; }
.wallet.on { background: #fff; color: #000; border: var(--bw) solid #000; }
.banner, .banner.mock { background: var(--acc); color: #000; border-bottom: var(--bw) solid #000; font: 700 13px/1.4 var(--mono); }
.foot { background: #000; border-top: var(--bw) solid #000; }
.foot-in { color: #d8d8d8; }
.foot-in a { color: var(--acc); }
.foot-in a:hover { background: none; }
.foot-in .brand { color: #fff; }
.foot-in .mark { box-shadow: 4px 4px 0 var(--acc); border-color: var(--acc); }

/* buttons */
.btn { border: var(--bw) solid #000; border-radius: 0; background: #fff; color: #000; font: 800 14px/1.1 var(--sans); text-transform: uppercase; letter-spacing: .03em; padding: 13px 20px; box-shadow: var(--sh-sm); text-decoration: none; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; border-color: #000; background: #fff; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.btn.gold, .btn.dark { background: var(--acc); color: #000; border-color: #000; }
.btn.gold:hover, .btn.dark:hover { background: var(--acc); box-shadow: 6px 6px 0 #000; }
.btn.mint { background: #000; color: var(--acc); border-color: #000; }
.btn.mint:hover { background: #000; }
.btn.yes { background: var(--yes); color: #000; border-color: #000; } .btn.no { background: var(--no); color: #000; border-color: #000; } .btn.abs { background: #d9d9d9; color: #000; border-color: #000; }
.btn.yes:hover, .btn.no:hover, .btn.abs:hover { color: #000; border-color: #000; }
.btn.yes:hover { background: var(--yes); } .btn.no:hover { background: var(--no); } .btn.abs:hover { background: #d9d9d9; }
.btn.sm { padding: 7px 11px; font-size: 12px; box-shadow: 3px 3px 0 #000; }
.btn:disabled { box-shadow: none; }

/* boxes */
.panel { border: var(--bw) solid #000; box-shadow: var(--sh); background: #fff; }
.panel.cream { background: var(--cream); border-color: #000; }
.panel h3 { font-size: 22px; }
.panel.deep { background: #000; border-color: #000; color: #f2f2f2; box-shadow: 6px 6px 0 var(--acc); }
.panel.deep h3, .panel.deep .big { color: #fff; }
.panel.deep a { color: var(--acc); }
.eyebrow { border: var(--bw) solid #000; border-radius: 0; background: var(--acc); color: #000; font: 700 11.5px/1 var(--mono); letter-spacing: .08em; padding: 7px 11px; box-shadow: 3px 3px 0 #000; }
.chip { border-radius: 0; border: 2px solid #000; background: #fff; color: #000; font: 700 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px; }
.chip.k-burn { background: #ff3b1f; color: #000; border-color: #000; } .chip.k-buy { background: #3d7bff; color: #fff; border-color: #000; } .chip.k-sell { background: #b98cff; color: #000; border-color: #000; }
.chip.k-airdrop { background: var(--yes); color: #000; border-color: #000; } .chip.k-grant { background: var(--acc); color: #000; border-color: #000; } .chip.k-donate { background: #ff8ac2; color: #000; border-color: #000; }
.state { border-radius: 0; border: 2px solid #000; font: 700 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px; }
.st-voting { background: var(--acc); color: #000; border-color: #000; } .st-queued, .st-executing { background: #fff; color: #000; }
.st-executed, .st-passed { background: var(--yes); color: #000; } .st-rejected, .st-failed, .st-noquorum, .st-lapsed, .st-cancelled { background: #000; color: #fff; }
.kv { font-weight: 500; } .kv > :nth-child(odd) { color: #333; font: 700 12px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .03em; }
.panel.deep .kv > :nth-child(odd) { color: #bdbdbd; }
.big { font-weight: 900; letter-spacing: -.03em; }
.empty { border: var(--bw) dashed #000; background: #fff; color: #000; font-weight: 700; }
.note { border: var(--bw) solid #000; background: var(--cream); color: #111; }
.check { border: var(--bw) solid #000; box-shadow: var(--sh-sm); }
.brk { display: none; }
.toast { background: #000; color: var(--acc); border: var(--bw) solid var(--acc); border-radius: 0; font: 700 14px/1.4 var(--mono); box-shadow: 6px 6px 0 var(--acc); }
.demo { border: var(--bw) solid #000; border-radius: 0; box-shadow: var(--sh); }
.demo h4 { color: #000; font: 800 12px/1 var(--mono); text-transform: uppercase; }
.demo select { border-radius: 0; }

/* the home page */
.hero { background: #fff; border-bottom: var(--bw) solid #000; }
.hero-mesh { display: none; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(0,0,0,.06) 2px, transparent 2px), linear-gradient(90deg, rgba(0,0,0,.06) 2px, transparent 2px); background-size: 48px 48px; }
.hero h1 { font-weight: 900; letter-spacing: -.045em; line-height: .86; text-transform: uppercase; }
.hero h1::before { display: none; }
.hero-desc { color: #111; font-weight: 500; font-size: 17px; }
.feat i { border-radius: 0; background: var(--acc); border: var(--bw) solid #000; box-shadow: var(--sh-sm); color: #000; }
.feat b { font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.feat span { color: #222; }
.cream-band { background: var(--acc); border-top: var(--bw) solid #000; border-bottom: var(--bw) solid #000; }
.fcard { background: #fff; border: var(--bw) solid #000; box-shadow: 8px 8px 0 #000; }
.fcard .glow { display: none; }
.fcard p { color: #000; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; font-size: 28px; line-height: 1; }
.how-wrap { background: linear-gradient(180deg, var(--acc) 50%, #fff 50%); }
.how-left, .how-right { border: var(--bw) solid #000; box-shadow: 8px 8px 0 #000; }
.how-left { background: #000; }
.how-left .eb { color: var(--acc); font-weight: 800; text-transform: uppercase; }
.how-left h2 { color: #fff; font-weight: 900; }
.how-left h2 span { color: var(--acc); }
.how-left .go { color: var(--acc); border-bottom: var(--bw) solid var(--acc); text-decoration: none; font-weight: 800; text-transform: uppercase; }
.how-left .go:hover { background: var(--acc); color: #000; }
.how-right { background: #fff; color: #000; --yes: #00b862; --no: #ff3b1f; --abs: #bdbdbd; --seat: #ececec; }
.how-right h3 { color: #000; font-weight: 900; }
.how-right .hemi text { fill: #000 !important; }
.how-right .live { color: #000; }
.how-right .btn { background: var(--acc); color: #000; border: var(--bw) solid #000; font-weight: 800; }
.section-h h2 { font-weight: 900; }
.section-h h2 span { background: var(--acc); color: #000; padding: 0 .08em; }
.section-h .eb { font: 700 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #000; }
.stats { border-top: var(--bw) solid #000; border-bottom: var(--bw) solid #000; }
.stat { border-left: var(--bw) solid #000; }
.stat b { font-weight: 900; }
.stat span { font: 700 12px/1.3 var(--mono); text-transform: uppercase; color: #222; }
.coin { border: var(--bw) solid #000; box-shadow: var(--sh-sm); text-decoration: none; }
.coin:hover { border-color: #000; transform: translate(-3px, -3px); box-shadow: 8px 8px 0 #000; background: #fff; }
.coin img, .pic { border-radius: 0; border: 2px solid #000; }
.coin .name { font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.coin .vault b { font-weight: 900; }
.feed { border-top: var(--bw) solid #000; }
.feed-item { border-bottom: 2px solid #000; text-decoration: none; }
.feed-item:hover { background: var(--acc); }
.feed-item b { font-weight: 800; }
.infra { background: #000; border-top: var(--bw) solid #000; }
.infra .eb, .infra h2 span { color: var(--acc); }
.infra h2 { font-weight: 900; color: #fff; }
.infra-grid { background: var(--acc); border: var(--bw) solid var(--acc); gap: 3px; }
.infra-grid div { background: #000; }
.infra-grid h4 { color: var(--acc); }
.kinds-grid { background: #000; border: var(--bw) solid #000; gap: 3px; box-shadow: var(--sh); }
.kinds-grid b { font-weight: 900; text-transform: uppercase; }
.kinds-grid .n { font-weight: 700; color: #000; background: var(--acc); padding: 2px 6px; border: 2px solid #000; }
.cta { background: var(--acc); border-top: var(--bw) solid #000; }
.cta h2 { font-weight: 900; letter-spacing: -.045em; }

/* a coin, a proposal */
.coinhead { border-bottom: var(--bw) solid #000; }
.coinhead .pic { border-radius: 0; border: var(--bw) solid #000; box-shadow: var(--sh-sm); }
.coinhead h1 { font-weight: 900; }
.coinhead .ticker { font: 700 15px/1 var(--mono); background: var(--acc); color: #000; padding: 4px 8px; border: 2px solid #000; }
.tabs { background: #fff; border: var(--bw) solid #000; border-radius: 0; padding: 0; gap: 0; box-shadow: var(--sh-sm); }
.tabs button { border-radius: 0; color: #000; font: 800 13px/1 var(--sans); text-transform: uppercase; padding: 10px 14px; }
.tabs button.on { background: #000; color: var(--acc); box-shadow: none; }
.prop { border: var(--bw) solid #000; box-shadow: var(--sh-sm); text-decoration: none; }
.prop:hover { border-color: #000; transform: translate(-3px, -3px); box-shadow: 8px 8px 0 #000; background: #fff; }
.prop .t { font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.bar { border-radius: 0; height: 12px; background: #eee; border: 2px solid #000; }
.bar i:first-child { border-radius: 0; }
.bar .q { background: #000; width: 3px; border-radius: 0; }
.legend .qm::before { border-radius: 0; }
.kind { border: var(--bw) solid #000; box-shadow: var(--sh-sm); }
.kind:hover { border-color: #000; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; }
.kind b { font-weight: 900; text-transform: uppercase; }
.kind.on { background: var(--acc); border-color: #000; box-shadow: 6px 6px 0 #000; }
.page-h h1 { font-weight: 900; }
.page-h h1 span { background: var(--acc); color: #000; padding: 0 .08em; }
.phead h1 { font-weight: 900; }
.votes th { font: 700 11px/1.2 var(--mono); text-transform: uppercase; color: #000; border-bottom: var(--bw) solid #000; }
.votes td { border-bottom: 2px solid #000; }
.drop { border: var(--bw) dashed #000; background: #fff; }
.timeline div { border-top-width: 5px; }

/* the senate floor, teams and meters */
/* no hall, no columns, no horizon: one flat dotted floor, edge to edge */
.arena { border: var(--bw) solid #000; border-radius: 0; box-shadow: 8px 8px 0 #000; background: #f4f4ee radial-gradient(rgba(0,0,0,.2) 1.6px, transparent 2px) 0 0 / 26px 26px; }
.floor::before { content: none; }
.live { border: 2px solid #000; border-radius: 0; background: #fff; color: #000; font-family: var(--mono); }
.live i { border-radius: 0; }
.live.on { color: #000; background: var(--acc); } .live.on i { background: #000; }
.timer { border: 2px solid #000; border-radius: 0; background: #fff; font-family: var(--mono); }
.stamp { border-radius: 0; border-width: 5px; font-family: var(--sans); font-weight: 900; background: #fff; box-shadow: 5px 5px 0 #000; }
.stamp.ok { color: #000; border-color: #000; background: var(--yes); } .stamp.bad { color: #fff; border-color: #000; background: var(--no); }
.pad span { font-family: var(--sans); font-weight: 900; color: #000 !important; opacity: .85; }
.team, .meter { border: var(--bw) solid #000; border-radius: 0; box-shadow: var(--sh-sm); }
.team b { font: 900 13px/1 var(--sans); color: #000 !important; }
.team .n { font-weight: 900; }
.tbar, .mbar, .tug { border-radius: 0; border: 2px solid #000; background: #eee; }
.tbar i, .mbar i, .tug i, .tug .f, .tug .a { border-radius: 0 !important; }
.t-yes .tbar i, .tug .f { background: var(--yes); } .t-no .tbar i, .tug .a { background: var(--no); } .t-abs .tbar i { background: #9e9e9e; } .mbar i { background: #000; }
.flag { border-radius: 0; }
.badge { border-radius: 0; border: 2px solid #000; background: #fff; color: #000; font-family: var(--mono); }
.badge.ok { background: var(--yes); color: #000; }
.pick { border-radius: 0; border: var(--bw) solid #000 !important; box-shadow: var(--sh-sm); font-weight: 900; color: #000 !important; }
.pick:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; }
.pick:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.p-yes { background: var(--yes); } .p-no { background: var(--no); } .p-abs { background: #d9d9d9; }
.quest i { border-radius: 0; border-color: #000; }
.quest div::before { background: #d8d8ce; }
.quest .done i { background: #000; border-color: #000; } .quest .done::before, .quest .now::before { background: #000; }
.quest .now i { background: var(--acc); border-color: #000; box-shadow: none; }
.quest b { font-weight: 800; text-transform: uppercase; font-size: 11px; }
.bill { border: var(--bw) solid #000; border-radius: 0; box-shadow: var(--sh); background: #fff; }
.bill-t { font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.phase { border-radius: 0; border: 2px solid #000; font-family: var(--mono); }
.ph-voting { background: var(--acc); color: #000; } .ph-counting { background: #fff; color: #000; } .ph-passed { background: var(--yes); color: #000; } .ph-rejected { background: var(--no); color: #000; }
.vote-bubble { border-radius: 0; border: 2px solid #000; color: #000; font-weight: 900; }
.vb-yes { background: var(--yes); } .vb-no { background: var(--no); } .vb-abs { background: #d9d9d9; }
.vote-bubble::after { display: none; }
.sen .rank { border-radius: 0; background: #000; }
.sen.me::before { border-radius: 0; background: var(--acc); border: 2px solid #000; }
.confetti { border-radius: 0; }
.dgg-row, .dgg-pick { border: var(--bw) solid #000; border-radius: 0; background: #fff; }
.dgg-row:hover, .dgg-row:focus-visible { background: var(--acc); border-color: #000; }
.dgg-row img, .dgg-pick img, .dgg-dot { border-radius: 0; border: 2px solid #000; }
.dgg-badge { border-radius: 0; border: 2px solid #000; font-family: var(--mono); }
.dgg-badge.ok { background: var(--yes); color: #000; } .dgg-badge.wait { background: #fff; color: #000; }

/* the voters are glossy white orbs (public/orbs): the side shows in the
   face (FOR smiles, AGAINST frowns, ABSTAIN is flat) and in the coloured glow under each one */
.sen .ball { filter: drop-shadow(0 3px 5px rgba(0,0,0,.16)); }
.sen .sen-shadow { left: 8%; right: 8%; bottom: -6%; height: 16%; background: radial-gradient(closest-side, rgba(0,0,0,.26), transparent); }
.sen.o-for .sen-shadow { background: radial-gradient(closest-side, rgba(0,184,98,.85), rgba(0,184,98,0)); }
.sen.o-against .sen-shadow { background: radial-gradient(closest-side, rgba(255,59,31,.85), rgba(255,59,31,0)); }
.sen.o-abstain .sen-shadow { background: radial-gradient(closest-side, rgba(110,110,110,.6), rgba(110,110,110,0)); }
.sen.me .ball { filter: drop-shadow(0 0 0 #000) drop-shadow(0 0 6px var(--acc)) drop-shadow(0 0 2px #000); }
.mark { background: var(--acc); object-fit: contain; }

/* long values (a rule, a reason) wrap instead of pushing their column off the screen */
.kv > :nth-child(even) { white-space: normal; overflow-wrap: anywhere; }
.grid2 > *, .stack > * { min-width: 0; }
@media (max-width: 760px) {
  .nav { gap: 2px; } .nav a { white-space: nowrap; font-size: 12px; padding: 8px 9px; }
  .wallet { padding: 9px 12px; font-size: 12px; } .brand { font-size: 21px; } .mark { width: 38px; height: 38px; }
}