/* Colours sampled from joeljohnson.com.au; fonts match (EB Garamond + Lato) */
:root{
  --bg:#ececec; --paper:#f7f7f6; --ink:#2f2e33; --head:#5e5c61; --muted:#6c6c6c; --accent:#d77f3f; --link:#b4621f; --line:#d6d6d6;
  --yes:#86ad8b; --no:#d4897e; --unk:#e6c470; --vacant:#d9d9d9;
  --yes-d:#4f7d5c; --no-d:#a9473f; --unk-d:#9a7418;
  --serif:'EB Garamond',Georgia,'Times New Roman',serif; --sans:'Lato',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--sans)}
a{color:var(--link)} h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.2;margin:0;color:var(--head)}
h2{font-size:1.9rem;margin-bottom:.8rem} h2 small{display:block;font:400 .85rem var(--sans);color:var(--muted);margin-top:.2rem}
h3{font-size:1.35rem;margin:1.6rem 0 .4rem}
.wrap{max-width:1040px;margin:0 auto;padding:2rem 1.1rem}
.muted{color:var(--muted)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.banner{position:relative;min-height:38vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--head)}
.banner.tall{min-height:56vh} .banner.compact{min-height:0;height:60px}
.banner-img{position:absolute;inset:0;background-size:cover;background-position:center;animation:drift 22s ease-out both}
.banner-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(30,28,33,.7),rgba(30,28,33,.1) 60%,rgba(30,28,33,.4))}
.banner-bar{position:absolute;top:0;left:0;right:0;padding:.9rem 1.1rem;z-index:2}
.brand{color:#fff;text-decoration:none;font:400 1.1rem var(--serif);letter-spacing:.06em;text-transform:uppercase}
.banner-text{position:relative;z-index:1;width:100%;max-width:1040px;margin:0 auto;padding:4rem 1.1rem 2.2rem;animation:rise .9s .15s ease-out both}
.banner-text h1{font-size:clamp(2.2rem,6.5vw,3.8rem);color:#fff} .banner-text p{margin:.6rem 0 0;max-width:36rem;opacity:.92}

.home-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:620px){.home-grid{grid-template-columns:1.7fr 1fr;align-items:start}}
#states-map svg,#fed-map svg{width:100%;height:auto;display:block}
#fed-map{max-width:240px}
.region{fill:var(--head);stroke:var(--bg);stroke-width:2;stroke-linejoin:round;transition:fill .25s}
a:hover .region,a:focus-visible .region{fill:var(--accent)}
.region-fed path{fill:var(--head);stroke:none;transition:fill .25s} a:hover .region-fed path{fill:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.chips a{border:1px solid var(--line);background:var(--paper);padding:.35rem .8rem;border-radius:2rem;text-decoration:none;font-size:.85rem;min-height:36px;display:inline-flex;align-items:center;color:var(--head)}
.chips a:hover{border-color:var(--accent)}

.intro{display:flex;gap:1.2rem;align-items:center;padding-bottom:.5rem}
.icon{width:88px;height:88px;flex:none} .icon path{fill:none;stroke:var(--head);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.chamber{background:var(--paper);border:1px solid var(--line);margin-top:1.5rem;border-radius:4px}
.chart-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.chart-scroll.wide .chart{min-width:640px}
.chart{width:100%;height:auto;display:block;margin:0 auto}
.seat{stroke-linejoin:round;transform-box:fill-box;transform-origin:center;transition:transform .15s;cursor:pointer}
.seat.yes{fill:var(--yes)} .seat.no{fill:var(--no)} .seat.unk{fill:var(--unk)} .seat.vacant{fill:var(--vacant);cursor:default}
.seatlink:hover .seat,.seatlink:focus .seat{transform:scale(1.25)} .seatlink:focus{outline:none}
.chart:not(.in) .seat{opacity:0}
.chart.in .seat{animation:pop .5s ease-out backwards;animation-delay:var(--d)}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.82rem;color:var(--muted);margin:.4rem 0 0}
.legend span{display:inline-flex;align-items:center;gap:.35rem}
.dot{width:.7rem;height:.7rem;border-radius:50%;display:inline-block;flex:none}
.dot.yes{background:var(--yes)} .dot.no{background:var(--no)} .dot.unk{background:var(--unk)}
.ring{width:.8rem;height:.8rem;border-radius:50%;border:3px solid;display:inline-block;background:var(--paper)}
.hint{display:none;margin:.2rem 0 0;font-size:.78rem;color:var(--muted)}
@media(max-width:700px){.hint{display:block}}
.tally{margin:1.2rem 0 0;font-size:.85rem;color:var(--muted)}
.pill{display:inline-block;font-size:.78rem;color:#fff;border-radius:2rem;padding:.1rem .65rem}
.pill.yes{background:var(--yes-d)} .pill.no{background:var(--no-d)} .pill.unk{background:var(--unk-d)}
.find{width:100%;max-width:22rem;padding:.6rem .8rem;border:1px solid var(--line);border-radius:4px;font:inherit;background:var(--paper)}
.names{list-style:none;margin:0;padding:0;columns:2 14rem;column-gap:2rem}
.names li{break-inside:avoid;border-bottom:1px solid var(--line)}
.names a{display:flex;align-items:center;gap:.5rem;padding:.55rem 0;text-decoration:none;color:var(--ink)} .names a:hover{color:var(--link)}
.names small{margin-left:auto;color:var(--muted)}

.tip{position:fixed;z-index:50;display:flex;gap:.7rem;width:250px;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:.7rem;box-shadow:0 8px 24px rgba(30,28,33,.16);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s,transform .15s,visibility .15s;pointer-events:none;font-size:.9rem}
.tip.on{opacity:1;visibility:visible;transform:none}
.tip>div{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem} .tip span:not(.pill){color:var(--muted);font-size:.82rem}
.tip-go{display:none;font-size:.82rem}
@media(hover:none){.tip.on{pointer-events:auto}.tip-go{display:inline-block;padding:.3rem 0}}
.av{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--head);color:#fff;font-size:.85rem;overflow:hidden}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.av.lg{width:54px;height:54px} .av.xl{width:112px;height:112px;border-radius:6px;font-size:1.6rem}

.back{text-decoration:none;font-size:.9rem}
.who{display:flex;gap:1.2rem;align-items:center;margin:1rem 0}
.who h1{font-size:clamp(2rem,5.5vw,2.8rem)}
.facts{display:grid;gap:.6rem 2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:0 0 1rem}
.facts dt{font-size:.8rem;color:var(--muted)} .facts dd{margin:0}
.stance{font:400 clamp(2.6rem,9vw,4.2rem)/1.1 var(--serif);margin:1rem 0}
.stance.yes{color:var(--yes-d)} .stance.no{color:var(--no-d)} .stance.unk{color:var(--unk-d)}
.votes{list-style:none;margin:0;padding:0}
.votes li{padding:1rem 0;border-bottom:1px solid var(--line)} .vh{display:flex;justify-content:space-between;gap:1rem}
.votes li strong{display:block;font-weight:700} .votes .why{margin:.35rem 0 0;font-size:.92rem;color:var(--ink)}
.vote{align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;font-weight:700;white-space:nowrap}
.mark{width:20px;height:20px;flex:none} .mark path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mark.ok circle{fill:var(--yes-d)} .mark.bad circle{fill:var(--no-d)}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes drift{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.chart:not(.in) .seat{opacity:1}}
footer{padding:2rem 1.1rem;text-align:center;color:var(--muted);font-size:.85rem}

.elname{font-size:clamp(2rem,6vw,3rem);margin:1rem 0}
.member{padding:1.2rem 0;border-top:1px solid var(--line);scroll-margin-top:1rem}
.member:target{animation:flash 2.4s ease-out}
.member h2{font-size:1.7rem;margin:0}
.stance.sm{font-size:clamp(1.8rem,7vw,2.4rem);margin:.4rem 0 .8rem}
summary{cursor:pointer;font-weight:700;padding:.4rem 0}
@keyframes flash{from{background:rgba(215,127,63,.22)}to{background:transparent}}

/* Left-vs-right majority bar */
.bars{width:100%;max-width:460px;height:auto;display:block;margin:1rem auto 0;overflow:visible}
.seg{stroke:var(--paper);stroke-width:1.5;transform-box:fill-box;transition:transform .7s ease-out}
.seg.yes{fill:var(--yes);transform-origin:left} .seg.no{fill:var(--no);transform-origin:right}
.seg.unk{fill:var(--unk);transform-origin:left} .seg.none{fill:var(--vacant);transform-origin:center}
.bars:not(.in) .seg{transform:scaleX(0)}
.bv{font:700 14px var(--sans);fill:var(--ink)} .bl{font:12px var(--sans);fill:var(--muted)}
.maj{stroke:var(--link);stroke-width:2;stroke-dasharray:1 4;stroke-linecap:round}
.ml{font:700 12px var(--sans);fill:var(--link);paint-order:stroke;stroke:var(--paper);stroke-width:4px}

/* More orange */
.banner{border-bottom:5px solid var(--accent)}
.banner-text h1::after{content:'';display:block;width:3.2rem;height:4px;background:var(--accent);margin-top:.7rem;border-radius:2px}
h2::after{content:'';display:block;width:2.4rem;height:3px;background:var(--accent);margin-top:.45rem;border-radius:2px}
.who h2::after,.tip h2::after{display:none}
.chamber{border-top:4px solid var(--accent)}
.region{fill:var(--accent)} a:hover .region,a:focus-visible .region{fill:var(--head)}
.region-fed path{fill:var(--accent)} a:hover .region-fed path,a:focus-visible .region-fed path{fill:var(--head)}
.chips a{border-color:var(--accent);color:var(--link);background:transparent;font-weight:700}
.chips a:hover,.chips a:focus-visible{background:var(--accent);color:#fff}
.icon path{stroke:var(--accent);stroke-width:2.5}
.names a:hover small,.names a:hover{color:var(--link)}
.names li{border-bottom-color:rgba(215,127,63,.35)}
.find:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(215,127,63,.25)}
.elname{border-left:5px solid var(--accent);padding-left:.8rem}
.member{border-top:3px solid rgba(215,127,63,.45)}
.votes li{border-bottom-color:rgba(215,127,63,.35)}
.back{font-weight:700}
footer{border-top:3px solid var(--accent);margin-top:2rem;background:rgba(215,127,63,.08)}
.legend .ring{background:var(--paper)}
@media(prefers-reduced-motion:reduce){.bars:not(.in) .seg{transform:none}}