/* =========================================================================
   usboycotts.org — the public face of URS Network's boycott & support
   campaigns.

   Deployed SEPARATELY from the app (this whole folder is its own static
   site). It shares the app's Supabase project but none of its code: no
   core.js, no core.css, no session. Every byte here is reachable by an
   anonymous visitor, and every data call goes through the `public_boycott*`
   RPCs, which are the only routines granted to the `anon` role.

   ── Palette note ───────────────────────────────────────────────────────
   Two colors carry meaning and appear together, so they are a real
   categorical encoding and were validated as one:

       boycott  #ef5d3f      support  #1f9ab4

   Against the card surface #14171f in dark mode they pass the lightness
   band, chroma floor, CVD separation (ΔE 16.6 protan / 34.1 tritan),
   normal-vision floor (ΔE 29.4) and contrast checks. They are never the
   sole carrier of meaning either — every stance is also spelled out in a
   text chip.

   The six PAGE THEMES below are a per-campaign brand accent, one at a time,
   never a series. They are still individually in-band, above the chroma
   floor, and ≥3:1 against the surface, and as a set they clear adjacent-pair
   separation so the theme picker in the app reads clearly.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* surfaces */
  --ink:#0b0d13;
  --ink-2:#0f121a;
  --surf:#14171f;
  --surf-2:#191c26;
  --surf-3:#1f2431;
  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.17);

  /* text tokens — text NEVER wears a series color */
  --tx:#f3f1ef;
  --tx-2:#aab0bd;
  --tx-3:#79808f;

  /* the validated categorical pair */
  --boycott:#ef5d3f;
  --support:#1f9ab4;

  /* per-page accent; overridden inline by the campaign's theme */
  --accent:#ef5d3f;
  --accent-soft:color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-line:color-mix(in srgb, var(--accent) 42%, transparent);

  --fdisplay:'Fraunces',Georgia,serif;
  --fbody:'Inter',system-ui,-apple-system,sans-serif;

  --r:14px; --r-lg:20px;
  --shadow:0 24px 60px -34px rgba(0,0,0,.9);
  --maxw:1180px;
}

/* the six campaign page themes */
[data-theme="ember"]  { --accent:#ef5d3f; }
[data-theme="crimson"]{ --accent:#c94f9e; }
[data-theme="indigo"] { --accent:#6f7bf0; }
[data-theme="forest"] { --accent:#22a06b; }
[data-theme="slate"]  { --accent:#5586c6; }
[data-theme="gold"]   { --accent:#b58a12; }

*{box-sizing:border-box;}
/* [hidden] is a UA rule and loses to any class selector that sets display —
   .grid{display:grid} would otherwise keep the list visible in map view. */
[hidden]{display:none!important;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--ink); color:var(--tx);
  font-family:var(--fbody); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ============================ chrome ============================ */
.topbar{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
  transition:padding .25s ease, background .25s ease;
}
.topbar.tight{background:color-mix(in srgb, var(--ink) 94%, transparent);}
.topbar .in{max-width:var(--maxw);margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:16px;}
.topbar.tight .in{padding:9px 22px;}
.brand{display:flex;align-items:center;gap:10px;color:var(--tx);text-decoration:none;flex:none;}
.brand:hover{text-decoration:none;}
.brand .glyph{
  width:30px;height:30px;border-radius:9px;flex:none;position:relative;
  background:linear-gradient(140deg,var(--boycott),var(--support));
}
.brand .glyph::after{
  content:"";position:absolute;inset:6px;border-radius:4px;background:var(--ink);
}
.brand b{font-family:var(--fdisplay);font-weight:600;font-size:17px;letter-spacing:-.01em;}
.brand span{color:var(--tx-3);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;display:block;line-height:1;margin-top:2px;}
.topnav{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.topnav a{color:var(--tx-2);font-size:13.5px;font-weight:600;padding:8px 12px;border-radius:9px;}
.topnav a:hover{color:var(--tx);background:var(--surf-2);text-decoration:none;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:#0a0c11;border:none;border-radius:11px;
  padding:11px 18px;font-size:14px;font-weight:700;letter-spacing:-.005em;
  transition:transform .16s cubic-bezier(.2,.8,.3,1), filter .16s ease, box-shadow .16s ease;
  box-shadow:0 6px 18px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08);text-decoration:none;box-shadow:0 12px 26px -10px color-mix(in srgb, var(--accent) 80%, transparent);}
.btn:active{transform:translateY(0);}
.btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none;}
.btn.ghost{background:transparent;color:var(--tx);border:1px solid var(--line-2);box-shadow:none;}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);box-shadow:none;}
.btn.sm{padding:8px 13px;font-size:13px;border-radius:9px;}
.btn.wide{width:100%;}

/* ============================ hero ============================ */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);}
/* Scrim over the aurora. Without it the lede sits on a saturated teal field
   and drops under 4.5:1 — the drifting colour has to stay behind the words. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(11,13,19,.55) 0%, rgba(11,13,19,.30) 38%, var(--ink) 100%);
}
.aurora{position:absolute;inset:-25% -10% auto -10%;height:150%;pointer-events:none;z-index:0;filter:blur(90px);opacity:.34;}
.aurora i{position:absolute;display:block;border-radius:50%;}
.aurora i:nth-child(1){width:46vw;height:46vw;left:2%;top:2%;background:var(--boycott);animation:drift1 26s ease-in-out infinite;}
.aurora i:nth-child(2){width:40vw;height:40vw;right:4%;top:14%;background:var(--support);animation:drift2 31s ease-in-out infinite;}
.aurora i:nth-child(3){width:34vw;height:34vw;left:38%;top:36%;background:#6f7bf0;opacity:.7;animation:drift3 37s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(9vw,5vh,0) scale(1.14);}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1.06);}50%{transform:translate3d(-8vw,8vh,0) scale(.9);}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(.95);}50%{transform:translate3d(5vw,-7vh,0) scale(1.2);}}

.hero .in{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:74px 22px 46px;}
.kicker{
  display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tx-2);
  border:1px solid var(--line-2);border-radius:100px;padding:6px 14px;background:rgba(255,255,255,.03);
}
.kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--boycott);animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 color-mix(in srgb,var(--boycott) 60%,transparent);}
                 50%{opacity:.75;transform:scale(.86);box-shadow:0 0 0 7px transparent;}}
h1.big{
  font-family:var(--fdisplay);font-weight:600;letter-spacing:-.025em;line-height:1.02;
  font-size:clamp(38px,6.4vw,76px);margin:20px 0 0;max-width:16ch;
}
h1.big .g{
  background:linear-gradient(105deg,var(--boycott) 8%,#f0a24a 44%,var(--support) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%;animation:sweep 11s ease-in-out infinite;
}
@keyframes sweep{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
.lede{font-size:clamp(16px,1.6vw,19px);color:var(--tx-2);max-width:60ch;margin:22px 0 0;line-height:1.62;}
.herobtns{display:flex;gap:11px;flex-wrap:wrap;margin-top:30px;}

/* stat row — hero numbers, not a chart */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;margin-top:44px;}
.stat{
  background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  padding:17px 18px;position:relative;overflow:hidden;
}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);opacity:.55;}
.stat b{
  display:block;font-family:var(--fdisplay);font-weight:600;font-size:34px;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--tx);
}
.stat span{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--tx-3);margin-top:8px;}
.stat.boycott::before{background:var(--boycott);}
.stat.support::before{background:var(--support);}

/* ============================ toolbar ============================ */
/* --topbar-h is measured in JS: the bar's height changes with the nav's
   wrapping, and a hard-coded offset hid the search field behind it on phones. */
.toolbar{
  position:sticky;top:var(--topbar-h,59px);z-index:50;background:color-mix(in srgb,var(--ink) 90%, transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.toolbar .in{max-width:var(--maxw);margin:0 auto;padding:13px 22px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.search{flex:1 1 240px;min-width:190px;position:relative;}
.search input{
  width:100%;background:var(--surf);border:1px solid var(--line-2);border-radius:11px;
  padding:11px 14px 11px 38px;color:var(--tx);font-family:inherit;font-size:14px;
  transition:border-color .18s ease, background .18s ease;
}
.search input::placeholder{color:var(--tx-3);}
.search input:focus{outline:none;border-color:var(--accent);background:var(--surf-2);}
.search .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--tx-3);font-size:14px;pointer-events:none;}

.seg{display:flex;gap:3px;background:var(--surf);border:1px solid var(--line);border-radius:11px;padding:3px;flex:none;}
.seg button{
  border:none;background:none;color:var(--tx-3);border-radius:8px;padding:8px 14px;
  font-size:13px;font-weight:600;transition:color .16s ease, background .16s ease;white-space:nowrap;
}
.seg button:hover{color:var(--tx);}
.seg button.on{background:var(--surf-3);color:var(--tx);}
.seg button.on[data-stance="boycott"]{color:var(--boycott);}
.seg button.on[data-stance="support"]{color:var(--support);}
select.sel{
  background:var(--surf);border:1px solid var(--line);border-radius:11px;color:var(--tx-2);
  padding:10px 12px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
}
select.sel:focus{outline:none;border-color:var(--accent);}

/* ============================ list ============================ */
main{max-width:var(--maxw);margin:0 auto;padding:34px 22px 90px;}
.resultline{color:var(--tx-3);font-size:13px;margin:0 0 18px;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;}

.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--surf);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 22px 18px;color:inherit;text-decoration:none;overflow:hidden;
  opacity:0;transform:translateY(22px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1),
             border-color .2s ease, background .2s ease;
}
.card.in{opacity:1;transform:none;}
.card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--cAccent,var(--accent)),transparent 78%);
  transform:scaleX(.28);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.3,1);
}
.card:hover{
  text-decoration:none;border-color:var(--cAccent,var(--accent));background:var(--surf-2);
  transform:translateY(-5px);
  box-shadow:0 26px 50px -30px color-mix(in srgb,var(--cAccent,var(--accent)) 55%, transparent);
}
.card:hover::before{transform:scaleX(1);}
.card .chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:13px;}
.chip{
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  border-radius:6px;padding:3px 9px;background:var(--surf-3);color:var(--tx-2);white-space:nowrap;
}
.chip.boycott{background:color-mix(in srgb,var(--boycott) 20%,transparent);color:var(--boycott);}
.chip.support{background:color-mix(in srgb,var(--support) 22%,transparent);color:var(--support);}
.chip.resolved{background:rgba(34,160,107,.18);color:#3fc98c;}
.chip.verified{background:rgba(255,255,255,.07);color:var(--tx-2);}
.chip.responded{background:rgba(181,138,18,.2);color:#dcae3c;}

.card h2{
  font-family:var(--fdisplay);font-weight:600;font-size:21px;line-height:1.22;
  margin:0 0 8px;letter-spacing:-.012em;
}
/* one flowing line, not a two-column flex — a long business name used to
   stack against the address instead of wrapping with it */
.card .target{font-size:12.5px;color:var(--tx-3);margin:0 0 12px;line-height:1.5;}
.card .target b{color:var(--tx-2);font-weight:600;}
.card .target span{color:var(--tx-3);}
.card p.sum{font-size:14px;color:var(--tx-2);margin:0 0 18px;line-height:1.58;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.card .foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);}
.card .nrow{display:flex;align-items:baseline;gap:8px;}
.card .n{font-family:var(--fdisplay);font-weight:600;font-size:26px;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--tx);}
.card .nlbl{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-3);}
.card .go{margin-left:auto;font-size:13px;font-weight:700;color:var(--cAccent,var(--accent));
  transition:transform .2s ease;display:inline-block;}
.card:hover .go{transform:translateX(4px);}

/* momentum meter — a share-of-largest bar, 4px rounded end, baseline anchored */
.meter{height:5px;border-radius:4px;background:rgba(255,255,255,.07);margin-top:11px;overflow:hidden;}
.meter i{display:block;height:100%;border-radius:4px;background:var(--cAccent,var(--accent));
  width:0;transition:width .9s cubic-bezier(.2,.8,.3,1);}
.card.in .meter i{width:var(--w,0%);}

.empty{
  text-align:center;padding:70px 20px;color:var(--tx-3);
  border:1px dashed var(--line-2);border-radius:var(--r-lg);
}
.empty b{display:block;font-family:var(--fdisplay);font-size:20px;color:var(--tx-2);margin-bottom:8px;font-weight:600;}

/* ============================ map ============================ */
#map{height:min(70vh,640px);border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden;background:var(--surf);}
.leaflet-container{background:#0d1017;font-family:var(--fbody);}
.leaflet-popup-content-wrapper{background:var(--surf-2);color:var(--tx);border-radius:12px;border:1px solid var(--line-2);box-shadow:var(--shadow);}
.leaflet-popup-tip{background:var(--surf-2);border:1px solid var(--line-2);}
.leaflet-popup-content{margin:13px 15px;font-size:13.5px;line-height:1.5;}
.leaflet-popup-content b{font-family:var(--fdisplay);font-size:15px;display:block;margin-bottom:3px;font-weight:600;}
.leaflet-popup-content a{font-weight:700;}
.leaflet-popup-close-button{color:var(--tx-3)!important;}
.leaflet-control-zoom a{background:var(--surf-2)!important;color:var(--tx)!important;border-color:var(--line-2)!important;}
.leaflet-control-attribution{background:rgba(11,13,19,.8)!important;color:var(--tx-3)!important;}
.leaflet-control-attribution a{color:var(--tx-2)!important;}
.pin{border-radius:50%;border:2px solid rgba(11,13,19,.85);box-shadow:0 0 0 3px color-mix(in srgb,currentColor 26%,transparent);}

/* ============================ campaign page ============================ */
.progress{position:fixed;left:0;top:0;height:2px;background:var(--accent);z-index:100;width:0;transition:width .1s linear;}

.chero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);}
.chero .wash{position:absolute;inset:0;z-index:0;
  background:radial-gradient(90% 120% at 12% -20%, color-mix(in srgb,var(--accent) 34%, transparent), transparent 62%);}
.chero .in{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:46px 22px 40px;}
.crumb{font-size:13px;font-weight:600;color:var(--tx-3);margin-bottom:20px;display:inline-block;}
.crumb:hover{color:var(--accent);text-decoration:none;}
h1.ctitle{font-family:var(--fdisplay);font-weight:600;font-size:clamp(30px,4.6vw,50px);
  line-height:1.06;letter-spacing:-.022em;margin:14px 0 0;}
.csum{font-size:clamp(16px,1.5vw,18.5px);color:var(--tx-2);line-height:1.62;margin:20px 0 0;max-width:62ch;}
.byline{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--tx-3);margin-top:22px;}
.byline b{color:var(--tx-2);font-weight:600;}
.byline .sep{opacity:.4;}

.tcard{
  display:flex;gap:14px;align-items:flex-start;background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 18px;margin-top:26px;
}
.tcard .ic{width:40px;height:40px;flex:none;border-radius:11px;background:var(--accent-soft);
  color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:18px;}
.tcard .tw{min-width:0;flex:1;}
.tcard .tw b{display:block;font-size:15.5px;font-weight:600;line-height:1.35;}
.tcard .tw span{display:block;font-size:13px;color:var(--tx-3);margin-top:2px;}

.cbody{max-width:900px;margin:0 auto;padding:0 22px 100px;}
.cgrid{display:grid;grid-template-columns:1fr 320px;gap:34px;align-items:start;margin-top:36px;}
.rail{position:sticky;top:82px;display:flex;flex-direction:column;gap:16px;}

.sec{margin-top:40px;}
.sec:first-child{margin-top:0;}
.sec h2{font-family:var(--fdisplay);font-weight:600;font-size:23px;letter-spacing:-.014em;
  margin:0 0 6px;padding-bottom:9px;border-bottom:1px solid var(--line);}
.sec .note{font-size:12.5px;color:var(--tx-3);margin:0 0 16px;}
.prose{font-size:16px;line-height:1.72;color:var(--tx-2);white-space:pre-wrap;}
.prose.lead{color:var(--tx);font-size:17px;}

.askbox{
  background:var(--surf);border:1px solid var(--accent-line);border-left:3px solid var(--accent);
  border-radius:var(--r);padding:20px 22px;
}
.askbox .k{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:9px;}
.askbox p{margin:0;font-size:16.5px;line-height:1.66;color:var(--tx);white-space:pre-wrap;}

/* the business's reply — same weight as the claim, by design */
.reply{background:var(--surf-2);border:1px solid var(--line-2);border-radius:var(--r);padding:20px 22px;margin-bottom:12px;}
.reply .rh{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
.reply .rh .badge{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.08);color:var(--tx-2);border-radius:6px;padding:3px 9px;}
.reply .rh time{font-size:12.5px;color:var(--tx-3);margin-left:auto;}
.reply p{margin:0;font-size:15.5px;line-height:1.68;color:var(--tx);white-space:pre-wrap;}

/* timeline */
.tl{position:relative;padding-left:26px;}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 10%,transparent));}
.tl .ev{position:relative;padding-bottom:26px;}
.tl .ev:last-child{padding-bottom:0;}
.tl .ev::before{content:"";position:absolute;left:-26px;top:6px;width:12px;height:12px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px var(--ink);}
.tl .ev time{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-3);}
.tl .ev b{display:block;font-size:16px;font-weight:600;margin:4px 0 5px;line-height:1.4;}
.tl .ev p{margin:0;font-size:14.5px;color:var(--tx-2);line-height:1.65;white-space:pre-wrap;}

/* evidence links */
.links{display:flex;flex-direction:column;gap:9px;}
.lnk{display:flex;align-items:center;gap:13px;background:var(--surf);border:1px solid var(--line);
  border-radius:12px;padding:13px 15px;color:inherit;text-decoration:none;transition:border-color .18s ease,transform .18s ease,background .18s ease;}
.lnk:hover{border-color:var(--accent);background:var(--surf-2);transform:translateX(3px);text-decoration:none;}
.lnk .ic{width:34px;height:34px;flex:none;border-radius:9px;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:15px;}
.lnk .lw{min-width:0;flex:1;}
.lnk .lw b{display:block;font-size:14px;font-weight:600;line-height:1.35;}
.lnk .lw span{display:block;font-size:12px;color:var(--tx-3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lnk .go{color:var(--tx-3);flex:none;font-size:13px;}

/* the sign panel */
.panel{background:var(--surf);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;}
.panel h3{font-family:var(--fdisplay);font-weight:600;font-size:18px;margin:0 0 4px;letter-spacing:-.01em;}
.panel .psub{font-size:12.5px;color:var(--tx-3);line-height:1.55;margin:0 0 16px;}
.bignum{display:flex;align-items:baseline;gap:9px;margin-bottom:4px;}
.bignum b{font-family:var(--fdisplay);font-weight:600;font-size:44px;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;}
.bignum span{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-3);}
.split{font-size:12.5px;color:var(--tx-3);margin:0 0 16px;}

.f{margin-bottom:11px;}
.f label{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);margin-bottom:6px;}
.f input[type=text],.f input[type=email]{
  width:100%;background:var(--ink-2);border:1px solid var(--line-2);border-radius:10px;
  padding:11px 13px;color:var(--tx);font-family:inherit;font-size:14px;
}
.f input:focus{outline:none;border-color:var(--accent);background:var(--surf-2);}
.frow{display:flex;gap:9px;}
.frow > div{flex:1;min-width:0;}
.chk{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--tx-2);line-height:1.5;cursor:pointer;margin-bottom:9px;}
.chk input{accent-color:var(--accent);width:15px;height:15px;flex:none;margin-top:2px;}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;}
.fmsg{font-size:12.5px;line-height:1.5;margin-top:10px;min-height:1em;}
.fmsg.err{color:#f2836b;}
.fine{font-size:11.5px;color:var(--tx-3);line-height:1.5;margin:12px 0 0;}

.done{text-align:center;padding:12px 4px;}
.done .tick{width:52px;height:52px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px;
  animation:pop .45s cubic-bezier(.2,1.4,.4,1);}
@keyframes pop{0%{transform:scale(.5);opacity:0;}100%{transform:scale(1);opacity:1;}}
.done b{display:block;font-family:var(--fdisplay);font-size:19px;font-weight:600;margin-bottom:6px;}
.done p{font-size:13px;color:var(--tx-2);margin:0;line-height:1.6;}

.sigs{display:flex;flex-wrap:wrap;gap:6px;}
.sig{background:var(--surf-2);border:1px solid var(--line);border-radius:100px;padding:4px 12px;font-size:12.5px;color:var(--tx-2);}

.sharerow{display:flex;gap:8px;flex-wrap:wrap;}

#cmap{height:240px;border-radius:12px;overflow:hidden;border:1px solid var(--line);}

/* ============================ footer ============================ */
footer.site{border-top:1px solid var(--line);background:var(--ink-2);}
footer.site .in{max-width:var(--maxw);margin:0 auto;padding:44px 22px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;}
footer.site h4{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);margin:0 0 12px;}
footer.site p{font-size:13.5px;color:var(--tx-2);line-height:1.65;margin:0;max-width:44ch;}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
footer.site a{color:var(--tx-2);font-size:13.5px;}
footer.site a:hover{color:var(--accent);}
.legal{border-top:1px solid var(--line);padding:18px 22px;text-align:center;font-size:12px;color:var(--tx-3);}

/* ---- mobile action bar (campaign page) ----
   On a phone the rail stacks below the whole story, which buries the one
   thing a reader came to do. This keeps the count and the sign button within
   thumb reach the entire way down, and gets out of the way once the real
   panel is on screen. */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  align-items:center;gap:12px;padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--ink) 93%, transparent);
  backdrop-filter:blur(16px);border-top:1px solid var(--line-2);
  transform:translateY(110%);transition:transform .28s cubic-bezier(.2,.8,.3,1);
}
.actionbar.show{transform:none;}
.actionbar .ab-n{font-family:var(--fdisplay);font-weight:600;font-size:20px;line-height:1;
  font-variant-numeric:tabular-nums;}
.actionbar .ab-l{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tx-3);display:block;margin-top:3px;}
.actionbar .btn{margin-left:auto;flex:none;}

/* ============================ responsive ============================ */
@media(max-width:900px){
  .cgrid{grid-template-columns:1fr;gap:26px;}
  .rail{position:static;}
  footer.site .in{grid-template-columns:1fr;gap:26px;}
  .actionbar{display:flex;}
  body.has-actionbar{padding-bottom:78px;}
}
@media(max-width:640px){
  .hero .in{padding:52px 20px 36px;}
  .grid{grid-template-columns:1fr;}
  .stat b{font-size:28px;}
  /* the nav used to wrap to three lines and shove the wordmark off-centre */
  .topbar .in{padding:11px 16px;gap:10px;}
  .brand b{font-size:15.5px;}
  .brand span span{display:none;}
  .topnav{gap:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .topnav::-webkit-scrollbar{display:none;}
  .topnav a{padding:6px 8px;font-size:12.5px;white-space:nowrap;}
  .toolbar .in{padding:11px 16px;gap:8px;}
  main{padding:26px 16px 90px;}
  .chero .in,.cbody{padding-left:16px;padding-right:16px;}
}

/* ============================ reduced motion ============================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .card{opacity:1;transform:none;}
  .card.in .meter i{width:var(--w,0%);}
  .aurora{opacity:.34;}
}