:root{
    color-scheme: light;
    /* Paper base with black used as an accent, not as the field. Black is still
       the campaign's colour — it is spent on the pieces that must hit hardest
       (the contrast panel, the posters) so it keeps its force. Flag red carries
       the data and the calls to action. */
    --surface:#f7f6f3; --surface-2:#eceae5; --card:#ffffff;
    --ink:#14140f; --ink-2:#55554d; --ink-3:#84847a; --line:#dedbd3;
    --land:#e6e3db;
    --accent:#cc142b;      /* exact flag red — data marks, emphasis */
    --navy:#00247d;        /* exact flag navy — decorative only; too dark to encode data,
                              and kept off large areas: it reads as a party colour */
    --cta:#14140f;         /* black button, silver type */
    --cta-ink:#ffffff;
    --glow:#f2b134;        /* amber map marks — lights on a dark field; map only */
    --glow-core:#ffd479;
    --accent-soft:#fceaec;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--surface);color:var(--ink);
    background-image:
      radial-gradient(1200px 680px at 50% -6%, rgba(204,20,43,.10), transparent 64%),
      radial-gradient(900px 560px at 90% 26%, rgba(20,20,15,.05), transparent 62%),
      radial-gradient(760px 620px at 6% 76%, rgba(0,36,125,.05), transparent 64%);
    background-attachment:fixed;
    font-family:"Inter","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",
    "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
    font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
  .wrap{max-width:760px;margin:0 auto;padding:0 22px}
  @media(min-width:1280px){.wrap{max-width:1000px}}
  a{color:var(--accent)}

  /* flag band: navy / white / red, as a 4px rule — the flag's colours without
     letting navy take over a page that must not look like a party or a ministry */
  .flagband{height:4px;display:flex}
  .flagband i{flex:1;display:block}
  .flagband i:nth-child(1){background:var(--navy)}
  .flagband i:nth-child(2){background:#ffffff}
  .flagband i:nth-child(3){background:var(--accent)}

  header{border-bottom:1px solid var(--line);background:var(--surface)}
  header .wrap{display:flex;align-items:center;gap:14px;padding-top:16px;padding-bottom:16px}
  .mark{font-weight:800;letter-spacing:-.02em;font-size:15px;text-decoration:none;color:var(--ink);
    display:inline-flex;align-items:center;gap:9px}
  .mark .flag{width:30px;height:15px;display:block;border-radius:2px;flex:none;
    box-shadow:0 0 0 1px var(--line)}
  .flag.big{width:88px;height:44px;border-radius:3px}
  header nav{margin-left:auto;display:flex;gap:18px;font-size:14px}
  header nav a{color:var(--ink-2);text-decoration:none}
  header nav a:hover{color:var(--accent)}
  .lang{font-size:13px;border:1px solid var(--accent);border-radius:99px;padding:3px 12px;
    color:var(--accent);text-decoration:none;font-weight:600;flex:none}
  .lang:hover{background:var(--accent);color:#fff}
  /* three-language switcher: one pill, current language filled */
  .langs{display:inline-flex;border:1px solid var(--accent);border-radius:99px;overflow:hidden;flex:none}
  .langs a{font-size:12.5px;font-weight:600;padding:3px 10px;color:var(--accent);text-decoration:none;
    border-right:1px solid var(--accent);line-height:1.5}
  .langs a:last-child{border-right:0}
  .langs a:hover{background:var(--accent-soft)}
  .langs a.on{background:var(--accent);color:#fff}
  .langs a.on:hover{background:var(--accent)}
  @media(max-width:640px){
    header .wrap{flex-wrap:wrap;row-gap:8px}
    header nav{margin-left:0;flex-basis:100%;gap:14px}
  }


  h2{font-size:25px;line-height:1.25;letter-spacing:-.02em;margin:52px 0 14px;text-wrap:balance}
  h3{font-size:17px;margin:26px 0 7px}
  p{margin:0 0 15px}
  .src{font-size:14px;color:var(--ink-3)}


  /* the central contrast */
  .contrast{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0}
  .contrast>div{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--card)}
  .contrast .h{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:9px}
  /* black on the school side (the settled, unremarkable standard),
     red on the House side (where it failed) */
  .contrast .school .h{color:var(--ink)}
  .contrast .house .h{color:var(--accent)}
  .contrast .house{border-color:var(--accent)}
  .contrast p{font-size:15.5px;color:var(--ink-2);margin:0}
  .contrast strong{color:var(--ink)}
  @media(max-width:620px){.contrast{grid-template-columns:1fr}}

  blockquote.said{margin:22px 0;padding:18px 22px;border-left:3px solid var(--cta);
    background:var(--surface-2);border-radius:0 12px 12px 0}
  blockquote.said p{font-size:17.5px;line-height:1.6;margin:0 0 9px}
  blockquote.said.quiet{border-left-color:var(--line)}
  blockquote.said.quiet p{font-size:16px;color:var(--ink-2)}
  blockquote.said cite{font-style:normal;font-size:13.5px;color:var(--ink-3)}

  .pull{font-size:22px;line-height:1.42;font-weight:650;letter-spacing:-.015em;
    margin:30px 0;padding-left:20px;border-left:3px solid var(--cta);text-wrap:balance}

  /* asks */
  ol.asks{list-style:none;counter-reset:a;margin:22px 0;padding:0}
  ol.asks li{counter-increment:a;position:relative;padding:16px 20px 16px 56px;margin-bottom:10px;
    border:1px solid var(--line);border-radius:13px;background:var(--card);font-size:16px}
  ol.asks li::before{content:counter(a);position:absolute;left:19px;top:16px;width:24px;height:24px;
    border-radius:50%;background:var(--accent-soft);color:var(--accent);
    font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
  ol.asks b{display:block;margin-bottom:2px}
  ol.asks span{color:var(--ink-2);font-size:15px}

  /* side-note cards (zh strategy section) */
  .para{border-left:3px solid var(--line);padding:2px 0 2px 18px;margin:16px 0}
  .para p{margin:0;color:var(--ink-2);font-size:16px}
  .para strong{color:var(--ink)}

  /* timeline with sourced citations */
  .tl{list-style:none;margin:26px 0;padding:0;position:relative}
  .tl::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:var(--line)}
  .tl>li{position:relative;padding:0 0 22px 34px}
  .tl>li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;
    background:var(--surface);border:3px solid var(--line);box-sizing:border-box}
  .tl>li.key::before{border-color:var(--cta);background:var(--cta)}
  .tl>li.now::before{border-color:var(--navy);background:var(--navy)}
  .tl .when{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
  .tl .what{margin:3px 0 0;font-size:16px}
  .tl .what strong{font-weight:650}
  .tl .cites{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px}
  .tl .cites li{margin:0}
  .tl .cites a{display:inline-block;font-size:12.5px;line-height:1.35;padding:5px 11px;border:1px solid var(--line);
    border-radius:99px;color:var(--ink-2);text-decoration:none;background:var(--card);max-width:100%}
  .tl .cites a:hover{border-color:var(--accent);color:var(--accent)}
  .tl .cites .out{color:var(--ink-3);font-weight:700;letter-spacing:.03em}

  /* stat tiles — the suburb count leads, deliberately */
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:8px 0 22px}
  .tile{border:1px solid var(--line);border-radius:14px;padding:19px 21px;background:var(--card)}
  .tile b{display:block;font-size:40px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
  .tile span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:7px}
  .tile.lead b{color:var(--accent)}

  /* small motif beside section headings — varied, so it never reads as one repeated stamp */
  h2 .sectmark{display:inline-block;margin-right:13px;color:var(--accent);opacity:1}
  h2 .sectmark.fern{width:19px;height:40px;vertical-align:-7px}
  h2 .sectmark.fidd{width:25px;height:35px;vertical-align:-9px}
  /* southern-cross mark: red like the stars on the flag, sized to read clearly */
  h2 .sectmark.cross{width:38px;height:40px;vertical-align:-9px;color:var(--accent)}
  h2 .sectmark.bloom2{width:38px;height:34px;vertical-align:-9px}

  /* values */
  .valuehead{display:flex;align-items:center;gap:16px;margin:52px 0 14px}
  .valuehead h2{margin:0}
  @media(max-width:560px){.valuehead{flex-direction:column;align-items:flex-start;gap:10px}}
  .values{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:22px 0}
  @media(max-width:620px){.values{grid-template-columns:1fr}}
  .values>div{border:1px solid var(--line);border-radius:13px;padding:17px 19px;background:var(--card)}
  .values b{display:block;font-size:15.5px;margin-bottom:5px}
  .values span{color:var(--ink-2);font-size:15px;line-height:1.6}
  .values .vcite{display:block;font-style:normal;font-size:12.5px;line-height:1.55;
    color:var(--ink-3);margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
  .values .vcite a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
  .values .vcite a:hover{color:var(--accent)}

  /* map — dark field so the amber marks read as lights in the night */
  .mapwrap{border:1px solid #2e2e28;border-radius:16px;background:#1c1c19;padding:18px;position:relative;
    display:grid;grid-template-columns:1fr 200px;gap:14px;align-items:center}
  .mapwrap svg{display:block;width:100%;max-width:420px;height:auto;margin:0 auto}
  .toplist h3{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:#8a867a;
    font-weight:700;margin:0 0 10px}
  .toplist ol{list-style:none;margin:0;padding:0;counter-reset:t}
  .toplist li{display:flex;align-items:baseline;gap:9px;font-size:14.5px;padding:5px 0;
    border-bottom:1px solid #33332c}
  .toplist li:last-child{border-bottom:0}
  .toplist .nm{color:#d8d5cb;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .toplist .ct{font-variant-numeric:tabular-nums;font-weight:700;color:#fff}
  .toplist .bul{width:9px;height:9px;border-radius:50%;background:var(--glow);opacity:.9;flex:none;
    box-shadow:0 0 7px rgba(242,177,52,.55)}
  .toplist .rest{font-size:13px;color:#8a867a;margin:11px 0 0;line-height:1.5}
  @media(max-width:640px){
    .mapwrap{grid-template-columns:1fr;gap:6px}
    .toplist{border-top:1px solid #33332c;padding-top:14px}
  }
  .dot{cursor:pointer;transition:opacity .12s}
  .dot:hover{opacity:.82}
  .maphint{font-size:13px;color:var(--ink-3);margin:10px 2px 0;text-align:center}
  #tip{position:absolute;pointer-events:none;opacity:0;transition:opacity .12s;
    background:var(--ink);color:var(--surface);font-size:13px;line-height:1.5;
    padding:7px 11px;border-radius:8px;white-space:nowrap;transform:translate(-50%,-140%);z-index:5}
  #tip b{font-size:13.5px}
  details.tableview{margin:14px 0 0}
  details.tableview summary{font-size:13.5px;color:var(--ink-2);cursor:pointer}
  table{border-collapse:collapse;width:100%;font-size:14px;margin-top:11px}
  th,td{padding:7px 10px;text-align:left;border-bottom:1px solid var(--line)}
  th{font-size:12.5px;color:var(--ink-3);font-weight:600}
  td.n{text-align:right;font-variant-numeric:tabular-nums}

  /* shareable slogan cards */
  .posters{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:24px 0}
  @media(max-width:620px){.posters{grid-template-columns:1fr}}
  .poster{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
  .poster svg{display:block;width:100%;height:auto}
  .poster .bar{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--line)}
  .poster .bar span{font-size:12.5px;color:var(--ink-3);flex:1}
  .poster .bar button{font:inherit;font-size:12.5px;padding:5px 12px;border:1px solid var(--line);
    border-radius:99px;background:var(--surface);color:var(--ink-2);cursor:pointer}
  .poster .bar button:hover{border-color:var(--accent);color:var(--accent)}

  /* form */
  .signbox{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:26px;margin:22px 0}
  .field{margin-bottom:15px}
  .field label{display:block;font-size:14px;font-weight:600;margin-bottom:5px}
  .field .hint{font-size:13px;color:var(--ink-3);font-weight:400;margin-left:6px}
  .field input{width:100%;font:inherit;font-size:16px;padding:11px 13px;border:1px solid var(--line);
    border-radius:10px;background:var(--surface);color:var(--ink)}
  .field textarea{width:100%;font:inherit;font-size:16px;padding:11px 13px;border:1px solid var(--line);
    border-radius:10px;background:var(--surface);color:var(--ink);resize:vertical;min-height:76px;
    line-height:1.6;font-family:inherit}
  .field input:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
  .field .fieldnote{font-size:13px;color:var(--ink-3);margin:7px 0 0;line-height:1.55}
  .field .fieldnote strong{color:var(--ink-2)}
  .field .count{font-size:12px;color:var(--ink-3);text-align:right;margin-top:4px;font-variant-numeric:tabular-nums}
  button.submit{width:100%;font:inherit;font-size:16.5px;font-weight:700;padding:14px;border:0;
    border-radius:11px;background:var(--cta);color:var(--cta-ink);cursor:pointer}
  button.submit:disabled{opacity:.55;cursor:default}
  .privacy{font-size:13px;color:var(--ink-3);margin-top:13px;line-height:1.6}
  #msg{margin-top:13px;font-size:15px;min-height:22px}
  #msg.ok{color:var(--accent);font-weight:600}
  #msg.err{color:var(--cta)}

  .share{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0 0}
  .share a,.share button{font:inherit;font-size:14px;padding:9px 15px;border:1px solid var(--line);
    border-radius:99px;background:var(--card);color:var(--ink-2);text-decoration:none;cursor:pointer}
  .share a:hover,.share button:hover{border-color:var(--accent);color:var(--accent)}

  footer{margin-top:60px;border-top:1px solid var(--line);padding:26px 0 50px;
    font-size:13.5px;color:var(--ink-3);line-height:1.85}
  footer a{color:var(--ink-2)}

  /* silver fern — the shared national mark, and unlike koru not a Māori taonga */

  .ferndiv{display:flex;align-items:center;gap:16px;margin:30px 0 0}
  .ferndiv span{flex:1;height:1px;background:linear-gradient(to right,transparent,var(--line),transparent)}
  /* divider fern: laid horizontal and larger, so it reads as a fern frond */
  .ferndiv svg{width:34px;height:72px;color:var(--ink-2);opacity:.75;flex:none;
    transform:rotate(90deg);margin:-22px 18px}

  footer .fernfoot{width:16px;height:34px;color:var(--ink-3);opacity:.6;
    display:block;margin:0 0 12px}

  /* flowing contour lines — the "waves" layer that keeps the page off flat black */
  body::before{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:url("/motifs.svg") center/cover no-repeat;
    opacity:.085;
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.35) 55%, rgba(0,0,0,.7));
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.35) 55%, rgba(0,0,0,.7));
  }

  /* ============ hero banner: full-bleed black, the page's one loud moment ============ */
  .hero{position:relative;overflow:hidden;background:#0b0b0a;color:#fff;
    padding:66px 0 60px;margin-bottom:34px;
    background-image:
      radial-gradient(1000px 620px at 16% 8%, rgba(204,20,43,.42), transparent 62%),
      radial-gradient(880px 560px at 92% 92%, rgba(0,36,125,.40), transparent 60%),
      radial-gradient(680px 480px at 78% 6%, rgba(204,20,43,.20), transparent 62%);}
  .hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background:linear-gradient(180deg, rgba(11,11,10,.10), rgba(11,11,10,.72));}
  .hero>.wrap{position:relative;z-index:2}
  /* fern on the right, bloom on the left — anchored to the same edge so they read
     as a pair rather than two unrelated decorations */
  /* sized and offset so the fern's visible height matches the bloom's and both
     tops sit on the same line — otherwise they read as unrelated, not as a pair */
  .fernwash{position:absolute;right:14px;bottom:-182px;width:186px;height:394px;
    color:#ffffff;opacity:.58;pointer-events:none;transform:rotate(6deg);z-index:2}
  @media(max-width:900px){.fernwash{right:2px;bottom:-156px;width:158px;height:335px;opacity:.54}}
  @media(max-width:520px){.fernwash{right:-6px;bottom:-136px;width:132px;height:280px;opacity:.50}}
  .bloom{position:absolute;left:-40px;bottom:-72px;width:286px;height:252px;
    color:#e8324a;opacity:.62;pointer-events:none;z-index:2}
  @media(max-width:900px){.bloom{left:-72px;bottom:-70px;width:250px;height:220px;opacity:.58}}
  @media(max-width:520px){.bloom{left:-64px;bottom:-62px;width:214px;height:188px}}

  .hero .eyebrow{font-size:14px;letter-spacing:.19em;text-transform:uppercase;
    color:#ff5a4a;font-weight:800;margin-bottom:4px}
  .hero h1{font-size:clamp(34px,6.0vw,60px);line-height:1.16;letter-spacing:-.032em;
    margin:14px 0 22px;text-wrap:balance;color:#fff;font-weight:800}
  .hero h1 em{font-style:normal;color:#ff5a4a}
  .hero h1 .punch{color:#fff;background:var(--accent);padding:.04em .16em .10em;
    display:inline-block;margin-top:.22em;
    border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone;
    /* the padded background needs room, or it collides with the line above */
    line-height:1.42;-webkit-box-decoration-break:clone}
  .intro .lede{font-size:18.5px;color:var(--ink-2);margin:0 0 14px;max-width:38em;line-height:1.62}
  .intro .lede strong{color:var(--ink);font-weight:650}

  .hero-cta{margin-top:22px}
  .hero-cta a.primary{background:var(--accent);border-color:var(--accent);color:#fff;
    font-weight:700;padding:12px 22px}
  .hero-cta a.primary:hover{background:#b31025;border-color:#b31025;color:#fff}

  /* the contrast panel, now HTML so it scales and stays selectable */
  .split{margin:34px 0 0;padding:28px 30px 24px;border-radius:16px;
    background:#0b0b0a;border:1px solid #23231f}
  .split-head{font-size:12.5px;letter-spacing:.30em;font-weight:800;color:#ff5a4a}
  .split-quote{font-size:clamp(20px,3.0vw,29px);font-weight:700;letter-spacing:-.018em;
    margin:11px 0 24px;color:#fff}
  .split-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
  .split-cols>div+div{border-left:1px solid rgba(255,255,255,.15);padding-left:26px}
  .sh{font-size:12.5px;letter-spacing:.20em;font-weight:700;color:#9b9a92;text-transform:uppercase}
  .sv{font-size:clamp(34px,5.4vw,58px);font-weight:800;letter-spacing:-.035em;
    line-height:1.05;margin:9px 0 8px;color:#fff}
  .sv.red{color:#ff4436}
  .ss{font-size:14.5px;color:#a3a29a;line-height:1.5}
  .split-cap{font-size:13.5px;color:#8f8e86;margin:20px 0 0}
  .intro{margin-bottom:8px}
  .split.cjk .sh,.split.cjk .split-head{letter-spacing:.14em}
  .split.cjk .sv{letter-spacing:0}
  @media(max-width:620px){
    .split{padding:22px 20px 18px}
    .split-cols{grid-template-columns:1fr;gap:20px}
    .split-cols>div+div{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.15);padding-top:20px}
  }

  /* share row */
  .sharegrid{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
  .sharegrid .sh-btn{font:inherit;font-size:14px;padding:9px 16px;border:1px solid var(--line);
    border-radius:99px;background:var(--card);color:var(--ink-2);text-decoration:none;cursor:pointer;
    white-space:nowrap}
  .sharegrid .sh-btn:hover{border-color:var(--accent);color:var(--accent)}
  .sharehint{font-size:13.5px;color:var(--ink-3);margin:12px 0 0;line-height:1.6;max-width:44em}
  .sharehint strong{color:var(--ink-2)}

  /* growth chart — replaces the table as the primary view; the table stays
     underneath as the accessible alternative, capped so it cannot run away */
  .growth{border:1px solid var(--line);border-radius:16px;background:var(--card);
    padding:20px 22px 14px;margin:16px 0 0}
  .growth-head{display:flex;align-items:baseline;gap:12px;margin:0 0 6px}
  .growth-head h3{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--ink-3);font-weight:700;margin:0}
  .growth-head span{font-size:13px;color:var(--ink-3);margin-left:auto}
  .chartwrap{position:relative}
  .chartwrap svg{display:block;width:100%;height:auto}
  #gTip{position:absolute;pointer-events:none;opacity:0;transition:opacity .12s;
    background:var(--ink);color:var(--surface);font-size:13px;line-height:1.5;
    padding:7px 11px;border-radius:8px;white-space:nowrap;transform:translate(-50%,-135%);z-index:5}
  .gdot{cursor:pointer}
  .gempty{font-size:14px;fill:var(--ink-3)}
  details.tableview table{display:block;max-height:280px;overflow-y:auto}

  /* formal action channels */
  .channels{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}
  @media(max-width:720px){.channels{grid-template-columns:1fr}}
  .channels>div{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--card);
    display:flex;flex-direction:column}
  .ch-tag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
    color:var(--accent);margin-bottom:8px}
  .channels h3{font-size:17.5px;margin:0 0 8px}
  .channels p{font-size:15px;color:var(--ink-2);margin:0 0 10px}
  .ch-go{margin-top:auto;align-self:flex-start;font-size:14px;font-weight:650;
    text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px}
  details.tmpl{margin:4px 0 12px;border:1px solid var(--line);border-radius:10px;
    padding:10px 13px;background:var(--surface-2)}
  details.tmpl summary{font-size:13.5px;color:var(--ink-2);cursor:pointer}
  details.tmpl p{font-size:14px;margin:9px 0 0;color:var(--ink-2);line-height:1.6}

  /* volunteer opt-in */
  .namecheck{display:flex;gap:9px;align-items:flex-start;cursor:pointer;margin:8px 0 0;
    font-size:13px;font-weight:400;color:var(--ink-2);line-height:1.5}
  .namecheck input{width:16px;height:16px;margin:1px 0 0;flex:none;accent-color:var(--accent)}
  .namecheck small{color:var(--ink-3)}

  /* message wall */
  .wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:13px;margin:22px 0 0}
  .wall .w{background:var(--card);border:1px solid var(--line);border-radius:13px;
    padding:16px 18px 14px;display:flex;flex-direction:column;gap:10px}
  .wall .w .txt{flex:1}
  .wall .w .txt p{margin:0 0 7px;font-size:15px}
  .wall .w .txt p:last-child{margin-bottom:0}
  .wall .w footer{font-size:13px;color:var(--ink-3);border-top:1px solid var(--line);
    margin:0;padding:9px 0 0}
  .wall .w footer b{color:var(--ink-2);font-weight:600}
  .wallempty{color:var(--ink-3);border:1px dashed var(--line);border-radius:13px;
    padding:26px 22px;margin:22px 0 0}

  /* elapsed-time clock in the hero — same scale as the h1, punch-style blocks */
  .clock{margin-top:32px;border-top:1px solid rgba(255,255,255,.14);padding-top:24px}
  .clock-title{font-size:15px;letter-spacing:.03em;color:#d8d8d2;margin-bottom:14px}
  .clock-digits{display:flex;gap:14px;flex-wrap:wrap}
  .clock-digits div{display:flex;flex-direction:column;align-items:center}
  .clock-digits b{font-size:clamp(34px,6.0vw,60px);font-weight:800;color:#fff;
    background:var(--accent);padding:.04em .18em .08em;border-radius:9px;
    font-variant-numeric:tabular-nums;line-height:1.15;letter-spacing:-.01em;min-width:1.6em;text-align:center}
  .clock-digits span{font-size:13px;letter-spacing:.12em;color:#b5b5af;margin-top:7px}
  .clock-note{font-size:11.5px;color:#8a8a82;margin-top:12px}
  @media(max-width:520px){.clock-digits{gap:9px}.clock-digits b{border-radius:7px}}

  /* vote guide */
  .deadline{background:var(--ink);color:var(--surface);border-radius:14px;
    padding:18px 22px;margin:22px 0;display:flex;flex-direction:column;gap:5px}
  .deadline b{font-size:17px}
  .deadline span{font-size:13.5px;color:#b5b5af}
  .qa{background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:20px 22px 16px;margin:0 0 14px}
  .qa h3{margin:0 0 9px;font-size:16.5px}
  .qa h3::before{content:"问";color:#fff;background:var(--accent);border-radius:6px;
    font-size:12.5px;padding:2px 6px;margin-right:8px;vertical-align:2px}
  .qa ul{margin:0 0 12px;padding-left:20px}
  .qa li{margin-bottom:6px}
  .qa .warn{border-left:3px solid var(--accent);padding:2px 0 2px 12px;color:var(--ink-2)}
  .qa .hero-cta{margin:14px 0 10px}
  .neutral{border:1px solid var(--line);border-radius:13px;background:var(--surface-2);
    padding:16px 20px;font-size:14px;color:var(--ink-2);margin:26px 0 50px}
  .walllink{font-size:14px;margin:14px 0 0}

  .joinbox{border:1px solid var(--line);border-radius:12px;background:var(--surface-2);
    padding:14px 16px;margin:4px 0 16px}
  .joincheck{display:flex;gap:11px;align-items:flex-start;cursor:pointer;margin:0}
  .joincheck input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--accent)}
  .joincheck b{font-size:15px;font-weight:650}
  .joincheck small{font-size:13px;color:var(--ink-3);line-height:1.5}
  .joinmore{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line)}
  .joinq{font-size:14px;font-weight:600;margin:0 0 9px}
  .chips{display:flex;flex-wrap:wrap;gap:7px}
  .chips label{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;
    border:1px solid var(--line);border-radius:99px;padding:6px 13px;cursor:pointer;
    background:var(--card);color:var(--ink-2)}
  .chips label:hover{border-color:var(--accent)}
  .chips input{width:14px;height:14px;margin:0;accent-color:var(--accent)}
  .chips input:checked+span{color:var(--accent);font-weight:600}
  .joinnote{font-size:13px;color:var(--cta);margin:11px 0 0;display:none}
  .joinnote.show{display:block;color:#b31025;font-weight:600}

  /* Chinese headline needs more leading than the English one — same size, taller glyph box */
  html[lang^="zh"] .hero .eyebrow{font-size:14.5px;letter-spacing:.12em}
  html[lang^="zh"] .hero h1{line-height:1.42;letter-spacing:-.01em}
  html[lang^="zh"] .hero h1 .punch{line-height:1.62;padding:.06em .18em .12em}
  /* Chromium's text-wrap:balance mis-measures CJK lines with kinsoku + <br>,
     letting glyphs overflow the viewport on small screens — plain wrapping for zh */
  html[lang^="zh"] .hero h1{text-wrap:wrap}
  html[lang^="zh"] .hero .lede,html[lang^="zh"] .intro .lede{line-height:1.85}

  html[lang^="zh"] .split .sv{font-size:clamp(30px,4.7vw,50px);white-space:nowrap}
  @media(max-width:620px){html[lang^="zh"] .split .sv{font-size:clamp(28px,8vw,42px)}}


  /* collapsible depth — the page stays short, the detail stays available */
  details.more{margin:16px 0 0;border:1px solid var(--line);border-radius:13px;background:var(--card)}
  details.more>summary{list-style:none;cursor:pointer;padding:14px 18px;font-size:14.5px;
    font-weight:650;color:var(--accent);display:flex;align-items:center;gap:9px}
  details.more>summary::-webkit-details-marker{display:none}
  details.more>summary::before{content:"+";font-size:17px;font-weight:700;line-height:1;
    width:20px;height:20px;border:1px solid var(--accent);border-radius:50%;
    display:flex;align-items:center;justify-content:center;flex:none}
  details.more[open]>summary::before{content:"–"}
  details.more[open]>summary{border-bottom:1px solid var(--line)}
  details.more>*:not(summary){padding-left:18px;padding-right:18px}
  details.more>.tl{padding-top:18px;padding-bottom:4px}
  details.more>p:last-child{padding-bottom:16px}