:root{
  --sky:#8ccaf5; --sky-2:#cfe9fc; --sky-3:#eef7ff;
  --royal:#1f4fb4; --royal-2:#1a3f93; --navy:#13306e; --ink:#1b2440;
  --red:#c8202a; --red-2:#a3151e; --white:#fff; --muted:#4b5876;
  --radius:20px; --shadow:0 14px 40px rgba(19,48,110,.16);
  --sans:"Noto Sans TC",system-ui,-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  --serif:"Noto Serif TC","Noto Sans TC",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--sky-3);line-height:1.8;font-size:17px}
img{max-width:100%;height:auto;display:block}
a{color:var(--royal)}
.wrap{width:min(1120px,100% - 36px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 14px;z-index:99}
.skip:focus{left:8px}
h1,h2,h3{line-height:1.3;margin:0}

/* number badge */
.badge5{--s:88px;display:inline-grid;place-items:center;width:var(--s);height:var(--s);flex:none;border-radius:50%;background:#fff;
  border:calc(var(--s)*.11) solid var(--red);color:var(--red);font:900 calc(var(--s)*.66)/1 "Arial Black",Arial,var(--sans);
  box-shadow:0 6px 18px rgba(163,21,30,.25)}
.badge5--sm{--s:34px;box-shadow:none}
.badge5--xl{--s:1.5em;vertical-align:-.28em;margin:0 .12em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.6em 1.3em;border-radius:999px;
  font-weight:700;text-decoration:none;font-size:1rem;transition:transform .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:1.3em;height:1.3em;fill:currentColor}
.btn--red{background:var(--red);color:#fff;box-shadow:0 8px 20px rgba(200,32,42,.3)}
.btn--fb{background:#1877f2;color:#fff;box-shadow:0 8px 20px rgba(24,119,242,.28)}
.btn--sm{min-height:36px;padding:.3em 1em;font-size:.9rem;box-shadow:none}
.btn--lg{font-size:1.1rem;min-height:56px;padding:.7em 1.6em}

/* topbar */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(31,79,180,.12)}
.topbar__in{display:flex;align-items:center;gap:14px;height:58px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--navy);margin-right:auto}
.brand__name{font:900 1.2rem var(--serif)}
.brand__sub{font-size:.8rem;color:var(--muted);display:none}
.nav{display:none;gap:22px}
.nav a{text-decoration:none;color:var(--navy);font-weight:700}
.nav a:hover{color:var(--red)}
@media (min-width:760px){.nav{display:flex}.brand__sub{display:inline}}

/* sky + clouds */
.sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;color:#fff}
.cloud{position:absolute;filter:drop-shadow(0 10px 18px rgba(31,79,180,.12))}
.c1{width:280px;left:-70px;top:58%;opacity:.95}
.c2{width:200px;right:6%;top:6%;opacity:.7}
.c3{width:130px;left:38%;top:9%;opacity:.55}
.c4{width:340px;right:-90px;bottom:14%;opacity:.9}
.c5{width:160px;left:12%;top:30%;opacity:.4}
@media (prefers-reduced-motion:no-preference){.cloud{animation:drift 16s ease-in-out infinite alternate}.c2,.c4{animation-duration:22s;animation-direction:alternate-reverse}}
@keyframes drift{to{transform:translateX(26px)}}

/* hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(120% 70% at 75% 10%,#bfe3ff 0%,transparent 60%),linear-gradient(180deg,#5aaeef 0%,#8ccaf5 55%,#cfe9fc 100%);padding-top:22px}
.hero__grid{position:relative;display:grid;grid-template-areas:"id" "meta" "stage" "pitch"}
.hero__id{grid-area:id;display:flex;align-items:center;gap:14px;position:relative;z-index:3}
.hero__badge{--s:84px}
.hero__role{margin:0;color:var(--navy);font-weight:900;font-size:1.1rem;letter-spacing:.06em}
.hero__name{font:900 clamp(3.2rem,16vw,6.4rem)/1.02 var(--serif);color:var(--navy);letter-spacing:.1em;text-shadow:0 3px 0 #fff,0 10px 24px rgba(19,48,110,.18)}
.hero__meta{grid-area:meta;position:relative;z-index:3}
.hero__district{margin:14px 0 6px}
.pill{display:inline-block;background:linear-gradient(180deg,#2d8de0,#1d63c2);color:#fff;font-weight:900;font-size:1.3rem;letter-spacing:.1em;padding:.12em .8em;border-radius:14px;border:3px solid #fff;box-shadow:0 4px 12px rgba(19,48,110,.25)}
.hero__villages{margin:0;font-weight:900;color:var(--navy);font-size:1.12rem;letter-spacing:.05em;line-height:1.6}
.hero__villages span{white-space:nowrap;display:block}
.hero__villages .sep{display:none}
@media (min-width:520px){.hero__villages span{display:inline}.hero__villages .sep{display:inline}}

.hero__stage{grid-area:stage;position:relative;margin:-24px -18px 0;z-index:1;aspect-ratio:1100/1000}
.hero__disc{position:absolute;width:84%;aspect-ratio:1;right:2%;top:6%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#3d7fe0 0%,#1f4fb4 55%,#163c8f 100%);box-shadow:0 30px 60px rgba(19,48,110,.3),inset 0 0 0 10px rgba(255,255,255,.18)}
.hero__disc::after{content:"";position:absolute;inset:-16px;border-radius:50%;border:3px dashed rgba(255,255,255,.55)}
.hero__five{position:absolute;left:-2%;top:10%;font:900 clamp(9rem,46vw,22rem)/1 "Arial Black",Arial,sans-serif;color:transparent;-webkit-text-stroke:3px rgba(200,32,42,.35)}
.hero__stage picture{position:absolute;inset:0;filter:drop-shadow(0 18px 28px rgba(19,48,110,.35))}
.hero__person{position:absolute;bottom:0;left:0;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 99%);mask-image:linear-gradient(180deg,#000 78%,transparent 99%)}
.hero__pitch{grid-area:pitch;position:relative;z-index:3;margin-top:-86px;padding:18px 18px 20px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:22px;box-shadow:0 16px 40px rgba(19,48,110,.18)}
.hero__slogan{display:inline-block;margin:0;background:var(--navy);color:#fff;font-weight:900;font-size:1.2rem;letter-spacing:.15em;padding:.25em .9em;border-radius:6px}
.hero__headline{margin:14px 0 0;font:900 clamp(1.4rem,6.4vw,2.5rem)/1.5 var(--serif);color:var(--ink)}
.hero__headline em{font-style:normal;color:var(--red)}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.hero__cta .btn{flex:1 1 auto}
.hero__wave{position:relative;display:block;width:100%;height:60px;margin-top:-10px;z-index:4}
@media (min-width:960px){
  .hero{padding-top:40px}
  .hero__grid{grid-template-columns:1fr 1fr;grid-template-areas:"id stage" "meta stage" "pitch stage";grid-template-rows:auto auto 1fr;column-gap:20px;min-height:620px}
  .hero__id{margin-top:36px}
  .hero__badge{--s:120px}
  .hero__stage{margin:0 calc((min(1120px, 100vw - 36px) - 100vw) / 2 - 24px) 0 0;align-self:end;aspect-ratio:auto;height:100%;min-height:620px}
  .hero__person{left:auto;right:0;height:calc(100% - 6px);width:auto;max-width:none}
  .hero__disc{width:500px;right:150px;top:70px}
  .hero__five{left:-40px;top:0;font-size:24rem}
  .hero__pitch{margin:26px 0 90px;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;padding:0;align-self:start}
  .hero__cta .btn{flex:0 0 auto}
  .hero__wave{height:90px;margin-top:-80px}
}

/* sections */
.section{padding:64px 0}
.eyebrow{margin:0 0 6px;color:var(--royal);font-weight:900;letter-spacing:.18em;font-size:.82rem}
.eyebrow--center,.h2--center{text-align:center}
.h2{font:900 clamp(1.8rem,6vw,2.6rem) var(--serif);color:var(--navy);margin-bottom:18px}
.h2--center{margin-bottom:34px}
.h3{font:900 1.3rem var(--serif);color:var(--navy);margin:26px 0 10px}
.lead{font-size:1.15rem;font-weight:700}
mark{background:linear-gradient(transparent 60%,#ffd9db 60%);color:inherit;padding:0 .1em}

/* about */
.about{background:#fff}
.about__in{display:grid;gap:28px}
/* about bust */
.bust{margin:0 auto;position:relative;width:min(84%,340px);container-type:inline-size;padding-top:4%}
.bust__frame{position:relative;border-radius:999px 999px 28px 28px;overflow:hidden;background:radial-gradient(circle at 40% 25%,#bfe3ff,#8ccaf5 55%,#5aaeef);box-shadow:var(--shadow)}
.bust__frame::before{content:"";position:absolute;left:-10%;right:-10%;bottom:-20%;height:55%;border-radius:50%;background:var(--royal);opacity:.9}
.bust__frame img{position:relative;width:100%;height:auto;display:block}
.bust__badge{position:absolute;left:60.6%;top:80.58%;width:36%;aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:#fff;border:3.9cqw solid var(--red);color:var(--red);font:900 24cqw/1 "Arial Black",Arial,sans-serif;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.bust figcaption{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);background:var(--navy);color:#fff;font:900 1.15rem var(--serif);padding:6px 22px;border-radius:999px;white-space:nowrap;letter-spacing:.2em}
.bust__disc{display:none}
.roles{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.roles li{display:flex;flex-direction:column;background:var(--sky-3);border-left:5px solid var(--royal);border-radius:10px;padding:10px 14px;line-height:1.5}
.roles strong{color:var(--navy)}
.roles span{color:var(--muted);font-size:.95rem}
@media (min-width:860px){.about__in{grid-template-columns:360px 1fr;gap:64px;align-items:start}.bust{width:100%;position:sticky;top:110px}}

/* quote */
.quote{background:linear-gradient(135deg,var(--navy),var(--royal));color:#fff;padding:56px 0}
.quote__in{display:grid;gap:26px;align-items:center}
.quote__img img{border-radius:var(--radius);aspect-ratio:1/1;object-fit:cover;object-position:50% 20%;width:100%;box-shadow:0 14px 40px rgba(0,0,0,.3)}
.quote blockquote{margin:0;font:900 clamp(1.6rem,6.5vw,2.5rem)/1.55 var(--serif);position:relative;padding-left:22px;border-left:6px solid var(--red)}
.quote blockquote p{margin:0}
.quote strong{color:#ffd23f}
.quote cite{display:block;font:500 1rem var(--sans);opacity:.8;margin-top:12px;font-style:normal}
@media (min-width:860px){.quote__in{grid-template-columns:.85fr 1.15fr;gap:56px}.quote__img img{aspect-ratio:3/4;max-height:520px}}

/* policy cards */
.policy{background:linear-gradient(180deg,var(--sky-3),var(--sky-2))}
.cards{display:grid;gap:22px}
.card{position:relative;background:#fff;border-radius:var(--radius);padding:30px 24px 26px;box-shadow:var(--shadow);border-top:8px solid var(--royal);overflow:hidden}
.card__num{display:inline-block;background:var(--red);color:#fff;font-weight:900;font-size:.9rem;letter-spacing:.15em;padding:2px 12px;border-radius:999px;margin-bottom:10px}
.card__title{font:900 1.45rem/1.4 var(--serif);color:var(--navy);margin-bottom:14px;position:relative}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:30px;line-height:1.6}
.ticks li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:50%;background:var(--royal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.card p{margin:0 0 10px;line-height:1.7}
.card__quote{font-weight:900;color:var(--red);font-size:1.1rem}
@media (min-width:900px){.cards{grid-template-columns:repeat(3,1fr)}}

/* pledge */
.pledge{background:var(--red);color:#fff;padding:60px 0;text-align:center;position:relative;overflow:hidden}
.pledge::before{content:"5";position:absolute;right:-30px;top:50%;transform:translateY(-50%);font:900 28rem/1 "Arial Black",Arial,sans-serif;color:rgba(255,255,255,.07)}
.pledge__in{position:relative}
.pledge__big{font:900 clamp(1.4rem,5.6vw,2.3rem)/1.7 var(--serif);margin:0 0 28px}
.pledge__list{list-style:none;margin:0 auto;padding:0;display:grid;gap:12px;max-width:820px}
.pledge__list li{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:14px;padding:14px;font-weight:900;font-size:1.2rem}
.pledge__list span{display:block;font-weight:500;font-size:.95rem;opacity:.9}
.pledge__sign{margin:22px 0 0;font:900 1.3rem var(--serif);letter-spacing:.2em}
@media (min-width:760px){.pledge__list{grid-template-columns:repeat(3,1fr)}}

/* district */
.district{background:#fff}
.villages{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:760px}
.villages li{flex:0 0 calc(25% - 8px);min-width:0;text-align:center;background:var(--sky-3);border:2px solid var(--royal);color:var(--navy);font-weight:900;font-size:1.2rem;padding:10px 4px;border-radius:14px;white-space:nowrap}
@media (min-width:760px){.villages li{flex:0 0 auto;min-width:96px;padding:10px 18px;font-size:1.3rem}}

/* gallery */
.gallery{background:var(--sky-3)}
.ggroup+.ggroup{margin-top:40px}
.ggroup__title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 14px;font:900 1.35rem var(--serif);color:var(--navy)}
.ggroup__title strong{position:relative;padding-left:16px}
.ggroup__title strong::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:6px;border-radius:3px;background:var(--red)}
.ggroup__title span{font:500 .95rem var(--sans);color:var(--muted)}
.g-safe .ggroup__title strong::before{background:var(--royal)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;grid-auto-flow:dense}
.ph{margin:0;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 6px 18px rgba(19,48,110,.1);display:flex;flex-direction:column}
.ph a{display:block;overflow:hidden}
.ph img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .4s}
.ph a:hover img{transform:scale(1.04)}
.ph figcaption{font-size:.85rem;padding:8px 12px 10px;color:var(--muted);line-height:1.5}
.ph--wide,.ph--wide-m{grid-column:1/-1}
.ph--wide-m img{aspect-ratio:4/3}
.ph.ph--wide img{aspect-ratio:850/315}
.gallery__more{text-align:center;margin:32px 0 0}
@media (min-width:760px){
  .grid{gap:18px}
  .g-safe .grid{grid-template-columns:repeat(4,1fr)}
  .g-street .grid{grid-template-columns:repeat(3,1fr)}
  .g-street .ph img{aspect-ratio:4/3}
  .ph--wide-m{grid-column:auto}
  .g-street .ph--wide{justify-self:center;width:min(100%,760px)}
  .ph.ph--wide img{aspect-ratio:850/315}
}
@media (prefers-reduced-motion:reduce){.ph img{transition:none}}
/* vote CTA */
.vote{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--sky-2),var(--sky) 70%,#6fb8ef);padding:48px 0 56px}
.vote__in{position:relative;display:grid;gap:10px;justify-items:center;text-align:center}
.vote__text{display:flex;flex-direction:column;align-items:center;position:relative;z-index:2}
.vote__ask{margin:0;font:900 clamp(1.3rem,5vw,1.8rem) var(--serif);color:var(--navy)}
.vote__big{margin:14px 0 6px;font:900 clamp(2.4rem,11vw,4rem)/1.3 var(--serif);color:var(--red)}
.vote__big strong{color:var(--navy);letter-spacing:.12em}
.vote__meta{margin:0;font-weight:700;color:var(--navy)}
.vote .hero__slogan{margin:14px 0 22px}
.vote__stage{position:relative;width:min(100%,440px);aspect-ratio:1100/1132;margin-bottom:-4px}
.vote__disc{position:absolute;left:6%;width:88%;top:15.24%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 30%,#fff,#e8f3fe);border:clamp(12px,4vw,20px) solid var(--red);box-shadow:0 20px 50px rgba(163,21,30,.25)}
.vote__stage::after{content:"";position:absolute;left:6%;width:88%;top:15.24%;aspect-ratio:1;border-radius:50%;border:clamp(12px,4vw,20px) solid var(--red);box-sizing:border-box;clip-path:inset(52% 0 0 0);z-index:2;pointer-events:none}
.vote__disc{box-sizing:border-box}
.vote__stage picture{position:absolute;inset:0;filter:drop-shadow(0 14px 22px rgba(19,48,110,.3))}
.vote__person{position:absolute;inset:0;width:100%;height:100%;
  -webkit-mask-image:radial-gradient(44% 42.76% at 50% 58%,#000 99.5%,transparent 100%),linear-gradient(180deg,#000 44%,transparent 44.2%);
  mask-image:radial-gradient(44% 42.76% at 50% 58%,#000 99.5%,transparent 100%),linear-gradient(180deg,#000 44%,transparent 44.2%)}
@media (min-width:860px){.vote{padding-top:40px}.vote__in{grid-template-columns:1fr 1fr;text-align:left;justify-items:start;align-items:center;gap:40px}.vote__text{align-items:flex-start;order:2}.vote__stage{order:1;justify-self:center}}

/* footer */
.footer{background:var(--navy);color:#dbe6fb;padding:28px 0 calc(100px + env(safe-area-inset-bottom));font-size:.92rem;text-align:center}
.footer p{margin:4px 0}
.footer__small{opacity:.75;font-size:.82rem}

/* mobile dock */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 -6px 20px rgba(19,48,110,.12)}
.dock__vote{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--red);color:#fff;font-weight:900;font-size:1.1rem;border-radius:999px;text-decoration:none;min-height:50px;letter-spacing:.05em}
.dock__vote .badge5{--s:30px;border-width:3px}
.dock__fb{width:50px;height:50px;border-radius:50%;background:#1877f2;display:grid;place-items:center}
.dock__fb svg{width:26px;height:26px;fill:#fff}
@media (min-width:960px){.dock{display:none}.footer{padding-bottom:28px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}