/* 莊競程支持者自發網站：「程風」視覺
   版面概念：競選飄帶與小旗——薄荷綠底、深綠超粗大字、橘色貼紙標籤、風線穿字、直排飄帶當段落標記 */
:root {
  --mint: #dcf1e4;        /* 頁面底色 */
  --mint-deep: #9fd6b6;   /* 旗面薄荷綠 */
  --forest: #17432f;      /* 深墨綠：大字、飄帶 */
  --green: #2b7651;       /* 連結、按鈕 */
  --paper: #f7fcf9;       /* 卡片底 */
  --ink: #102219;
  --muted: #45604f;
  --line: #b9dcc7;
  --orange: #f39a2b;      /* 貼紙標籤，只當點綴 */
  --lime: #d4e64a;        /* 官方主視覺的萊姆黃 */
  --radius: 6px;
  --wrap: 1120px;
  --font: "Noto Sans TC", "PingFang TC", "Heiti TC", system-ui, sans-serif;
  --num: "Anton", "Archivo Narrow", "Noto Sans TC", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* 篩選隱藏一定要蓋過卡片的 display */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--mint);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--green); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* 非官方聲明：橘色貼紙條 */
.notice-bar {
  background: var(--orange);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  padding: 7px 16px;
  line-height: 1.5;
}
.notice-bar a { color: var(--ink); }

/* 導覽列 */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--forest);
  color: #fff;
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.brand { font-weight: 900; font-size: 22px; color: #fff; text-decoration: none; letter-spacing: .06em; white-space: nowrap; display: flex; align-items: baseline; gap: 10px; }
.brand small { font-family: var(--num); font-weight: 400; font-size: 13px; letter-spacing: .12em; color: var(--lime); }
.nav-links { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: block; padding: 8px 12px;
  color: #e4f3ea; text-decoration: none; font-size: 15px; font-weight: 700;
  border-bottom: 3px solid transparent;
}
.nav-links a:hover { color: #fff; border-bottom-color: var(--mint-deep); }
.nav-links a[aria-current="page"] { color: #fff; border-bottom-color: var(--lime); }
.nav-links .nav-cta { background: var(--lime); color: var(--forest); border-radius: 999px; border-bottom: 0; padding: 8px 18px; margin-left: 6px; }
.nav-links .nav-cta:hover, .nav-links .nav-cta[aria-current="page"] { background: #fff; color: var(--forest); }
.menu-btn { display: none; background: none; border: 2px solid var(--mint-deep); border-radius: 999px; padding: 4px 14px; font-size: 15px; font-weight: 700; font-family: inherit; color: #fff; }

@media (max-width: 900px) {
  .menu-btn { display: block; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 64px;
    flex-direction: column; background: var(--forest); padding: 8px 20px 20px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 4px; border-bottom: 1px solid rgba(255,255,255,.12); }
  .nav-links .nav-cta { margin: 12px 0 0; text-align: center; }
}

/* 按鈕 */
.btn {
  display: inline-block; padding: 13px 26px; border-radius: 999px;
  font-weight: 900; text-decoration: none; font-size: 17px; letter-spacing: .04em;
  border: 3px solid var(--forest);
}
.btn-primary { background: var(--forest); color: #fff; }
.btn-primary:hover { background: var(--green); border-color: var(--green); }
.btn-sun { background: var(--lime); color: var(--forest); }
.btn-sun:hover { background: #fff; }
.btn-ghost { background: transparent; color: var(--forest); }
.btn-ghost:hover { background: var(--paper); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* 區塊與直排飄帶標題 */
section { padding: 72px 0; }
.section-alt { background: var(--paper); }
h1, h2, h3 { line-height: 1.3; margin: 0 0 12px; text-wrap: balance; }
h1 { font-size: clamp(36px, 7vw, 72px); font-weight: 900; color: var(--forest); letter-spacing: -.01em; }
h2 { font-size: clamp(28px, 4.4vw, 44px); font-weight: 900; color: var(--forest); letter-spacing: -.01em; }
h3 { font-size: 20px; font-weight: 900; color: var(--forest); }
.lead { font-size: 18px; color: var(--muted); max-width: 40em; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 32px; }
.section-head > div { display: flex; align-items: flex-end; gap: 18px; min-width: 0; }
.section-head h2 { margin: 0 0 6px; }
.more { align-self: flex-end; margin-bottom: 10px; font-weight: 900; text-decoration: none; color: var(--forest); border-bottom: 3px solid var(--orange); padding-bottom: 2px; white-space: nowrap; }
.more::after { content: " →"; }

.eyebrow {
  margin: 0; writing-mode: vertical-rl; text-orientation: upright;
  background: var(--forest); color: #fff;
  font-weight: 900; font-size: 18px; letter-spacing: .2em;
  padding: 14px 8px 10px; display: flex; align-items: center; gap: 10px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 10px), 0 100%);
}
.eyebrow small {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--num); font-weight: 400; font-size: 11px; letter-spacing: .08em; color: var(--mint-deep);
  padding-bottom: 8px;
}
.section-alt .eyebrow { background: var(--green); }
@media (max-width: 640px) {
  .eyebrow { font-size: 15px; }
}

/* 頁首主視覺 */
.hero { padding: 48px 0 56px; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: center; position: relative; }
.kicker { margin: 0 0 18px; }
.mega { font-size: clamp(56px, 11vw, 132px); line-height: 1.02; margin: 0 0 20px; position: relative; letter-spacing: -.03em; }
.mega span { display: block; position: relative; z-index: 1; }
.mega span + span { color: var(--green); }
.wind { position: absolute; left: -4%; top: 8%; width: 108%; height: 84%; z-index: 2; pointer-events: none; overflow: visible; }
.wind path { fill: none; stroke: var(--lime); stroke-width: 7; stroke-linecap: round; opacity: .9; }
.wind path + path { stroke: #fff; stroke-width: 4; opacity: .85; }
.hero .slogan { font-size: clamp(20px, 2.6vw, 26px); font-weight: 900; color: var(--forest); margin: 0 0 10px; }
.hero .lead { margin: 0; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 28px; padding: 0; list-style: none; }
.hero-tags li { background: var(--forest); color: #fff; padding: 4px 14px; font-weight: 700; font-size: 15px; border-radius: 3px; }
.hero-side { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: stretch; }
.ribbons { display: flex; gap: 8px; }
.ribbon {
  writing-mode: vertical-rl; text-orientation: upright;
  font-weight: 900; font-size: 22px; letter-spacing: .14em;
  padding: 16px 8px 30px; color: #fff; background: var(--forest);
  display: flex; justify-content: space-between; align-items: center;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 14px), 0 100%);
}
.ribbon small { font-family: var(--num); font-weight: 400; font-size: 11px; letter-spacing: .06em; text-orientation: mixed; color: var(--lime); }
.ribbon.mint { background: var(--mint-deep); color: var(--forest); }
.ribbon.mint small { color: var(--forest); }
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-side { grid-template-columns: 1fr auto; }
  .hero .photo-slot { aspect-ratio: 4 / 3; }
  .ribbon { font-size: 18px; }
}

/* 橘色貼紙長條 */
.tape { display: inline-block; background: var(--orange); color: var(--ink); font-weight: 900; font-size: 14px; padding: 3px 12px; letter-spacing: .06em; }
.tape-strip { background: var(--orange); color: var(--ink); overflow: hidden; white-space: nowrap; border-block: 3px solid var(--forest); }
.tape-strip div { display: inline-flex; gap: 36px; padding: 10px 0; font-weight: 900; letter-spacing: .08em; animation: tape 40s linear infinite; }
.tape-strip b { font-family: var(--num); font-weight: 400; font-size: 20px; letter-spacing: .04em; color: var(--forest); }
@keyframes tape { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tape-strip div { animation: none; } }

/* 照片佔位：等競總授權 */
.photo-slot {
  aspect-ratio: 4 / 5; background: var(--mint-deep);
  display: grid; place-items: center; text-align: center;
  color: var(--forest); font-size: 15px; font-weight: 700; padding: 20px;
  border: 3px solid var(--forest);
  background-image: repeating-linear-gradient(-30deg, transparent 0 22px, rgba(255,255,255,.35) 22px 26px);
}
.photo-slot.wide { aspect-ratio: 16 / 9; }

/* 卡片 */
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card {
  background: var(--paper); border: 3px solid var(--forest); border-radius: var(--radius);
  padding: 22px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.section-alt .card { background: #fff; }
.card p { margin: 0; color: var(--muted); }
a.card { text-decoration: none; color: inherit; transition: transform .15s; }
a.card:hover { transform: translateY(-3px); }
.tag { align-self: flex-start; font-size: 13px; font-weight: 900; color: var(--ink); background: var(--orange); padding: 2px 10px; letter-spacing: .06em; }
.tag.sun { background: var(--lime); }
.src { font-size: 13px; color: var(--muted); margin-top: auto; padding-top: 10px; }
.src a { color: var(--muted); }

/* 政見卡：上方做成像官方圖卡的大字區 */
.policy-card { padding: 0; overflow: hidden; }
.policy-card .poster {
  background: var(--mint-deep); color: var(--forest); padding: 18px 20px 22px; position: relative;
  background-image: radial-gradient(circle at 110% -20%, rgba(255,255,255,.55) 0 38%, transparent 39%);
  border-bottom: 3px solid var(--forest); min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
}
.policy-card .poster strong { font-size: 26px; line-height: 1.2; font-weight: 900; letter-spacing: -.01em; }
.policy-card .poster .tag { position: static; }
.policy-card .body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.policy-card:nth-child(3n+2) .poster { background-color: var(--forest); color: #fff; }
.policy-card:nth-child(3n+3) .poster { background-color: var(--lime); }

/* 政見篩選 */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filters button {
  font-family: inherit; font-size: 16px; font-weight: 900; cursor: pointer;
  border: 3px solid var(--forest); background: var(--paper); color: var(--forest);
  border-radius: 999px; padding: 6px 18px;
}
.filters button[aria-pressed="true"] { background: var(--forest); color: #fff; }

/* 政見詳細 */
.policy { scroll-margin-top: 90px; }
.policy dl { margin: 4px 0 0; display: grid; gap: 10px; }
.policy dt { font-weight: 900; color: var(--forest); font-size: 15px; }
.policy dt::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--orange); margin-right: 8px; }
.policy dd { margin: 0; color: var(--ink); }
.policy .who { font-size: 15px; color: var(--forest); font-weight: 700; }

/* 行程 */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.timeline li {
  display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: start;
  background: var(--paper); border: 3px solid var(--forest); border-radius: var(--radius); padding: 14px 20px;
}
.timeline .date { font-family: var(--num); font-size: 30px; color: var(--forest); line-height: 1.05; }
.timeline .date small { display: block; font-family: var(--font); font-weight: 700; color: var(--muted); font-size: 13px; margin-top: 4px; }
.timeline h3 { font-size: 18px; margin: 0 0 2px; }
.timeline p { margin: 0; color: var(--muted); font-size: 15px; }
.timeline li.past { opacity: .55; border-style: dashed; }

/* 闢謠 */
.fact .claim { font-weight: 900; color: var(--ink); font-size: 18px; }
.fact .claim::before { content: "網傳"; background: var(--ink); color: #fff; font-size: 13px; padding: 1px 8px; margin-right: 8px; vertical-align: 2px; }
.fact .truth { color: var(--ink) !important; }
.fact .truth::before { content: "事實"; background: var(--green); color: #fff; font-size: 13px; font-weight: 900; padding: 1px 8px; margin-right: 8px; vertical-align: 2px; }

/* 支持區塊 */
.support-band { background: var(--forest); color: #fff; position: relative; overflow: hidden; }
.support-band h2 { color: #fff; font-size: clamp(32px, 5.6vw, 60px); }
.support-band .eyebrow { background: var(--lime); color: var(--forest); }
.support-band .lead { color: #cfe9da; }
.support-band .card { background: rgba(255,255,255,.06); border-color: var(--mint-deep); color: #fff; }

.callout { background: #fff4dc; border: 3px solid var(--orange); padding: 16px 20px; font-size: 15px; }

/* 倒數 */
.countdown { display: inline-flex; align-items: baseline; gap: 8px; background: var(--forest); color: #fff; padding: 6px 18px; font-weight: 700; }
.countdown b { font-family: var(--num); font-weight: 400; font-size: 30px; color: var(--lime); letter-spacing: .02em; }

/* 內頁標頭 */
.page-head { padding-top: 56px; padding-bottom: 28px; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.page-head .eyebrow { grid-row: span 3; }
.page-head h1 { font-size: clamp(44px, 8vw, 88px); margin: 0; line-height: 1.05; }
.page-head .lead { margin: 8px 0 0; }
.prose { max-width: 720px; }
.prose p { margin: 0 0 1em; }
.facts-list { list-style: none; padding: 0; margin: 0; display: grid; }
.facts-list li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; border-bottom: 2px solid var(--line); }
.facts-list b { color: var(--forest); font-weight: 900; }
.todo { color: var(--ink); background: var(--lime); padding: 0 6px; font-size: .92em; font-weight: 700; }

/* 公督盟評鑑表 */
.ccw-table { width: 100%; min-width: 520px; border-collapse: collapse; font-variant-numeric: tabular-nums; background: #fff; border: 3px solid var(--forest); }
.ccw-table th, .ccw-table td { padding: 12px 16px; text-align: left; border-bottom: 2px solid var(--line); }
.ccw-table th { font-size: 14px; color: #fff; background: var(--forest); font-weight: 900; }
.ccw-table .good { color: var(--ink); background: var(--lime); padding: 2px 8px; }

/* 頁尾 */
.site-footer { background: var(--forest); color: #cfe9da; padding: 48px 0 0; font-size: 14px; overflow: hidden; }
.site-footer a { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 32px; }
.site-footer .disclaimer { border: 2px solid var(--mint-deep); padding: 14px 16px; margin-top: 12px; }
.footer-date { font-family: var(--num); font-size: clamp(72px, 19vw, 240px); line-height: .8; color: transparent; -webkit-text-stroke: 2px var(--mint-deep); letter-spacing: .02em; margin: 36px 0 -0.06em; white-space: nowrap; text-align: center; }
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; }
  section { padding: 52px 0; }
  .facts-list li { grid-template-columns: 1fr; gap: 2px; }
  .timeline li { grid-template-columns: 1fr; gap: 6px; }
  .page-head { grid-template-columns: 1fr; }
  .page-head .eyebrow { writing-mode: horizontal-tb; clip-path: none; justify-self: start; padding: 4px 12px; grid-row: auto; }
  .page-head .eyebrow small { writing-mode: horizontal-tb; padding: 0; }
}
.policy-card:nth-child(3n+2) .poster { background-image: radial-gradient(circle at 110% -20%, rgba(159,214,182,.22) 0 38%, transparent 39%); }

/* 官方政治獻金專戶 */
.donate-card { background: #fff; border: 3px solid var(--forest); padding: 28px; display: grid; gap: 14px; max-width: 760px; }
.donate-card .tape { justify-self: start; margin: 0; }
.donate-card h2 { margin: 0; }
.donate-card dl { display: grid; grid-template-columns: 70px 1fr; gap: 10px 16px; margin: 0; }
.donate-card dt { font-weight: 900; color: var(--forest); }
.donate-card dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.donate-card ul { margin: 0; padding-left: 1.2em; color: var(--muted); }
.acct { font-family: var(--num); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.acct.big { font-size: 30px; color: var(--forest); }
.copy { font-family: inherit; font-weight: 900; font-size: 14px; border: 2px solid var(--forest); background: var(--lime); color: var(--forest); border-radius: 999px; padding: 4px 14px; cursor: pointer; vertical-align: 6px; }
.site-footer .acct { color: #fff; font-size: 18px; }

/* 數字一眼看懂 */
.num-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
#numbers { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) { #numbers { grid-template-columns: repeat(2, 1fr); } }
.num-card { background: var(--paper); border: 3px solid var(--forest); padding: 18px 18px 20px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.num-card:hover { background: #fff; }
.num-card .num { color: var(--green); font-weight: 900; font-size: 18px; line-height: 1; }
.num-card .num b { font-family: var(--num); font-weight: 400; font-size: 76px; color: var(--forest); margin-right: 4px; letter-spacing: -.01em; }
.num-card strong { font-size: 20px; font-weight: 900; color: var(--forest); }
.num-card .sub { font-size: 14px; color: var(--muted); line-height: 1.6; }
.num-src { grid-column: 1 / -1; }

/* 許願池 */
.wish-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.wish-list li { background: var(--paper); border: 3px solid var(--forest); padding: 14px 18px; display: grid; gap: 6px; }
.wish-bar { height: 12px; background: var(--mint); }
.wish-bar span { display: block; height: 100%; background: var(--forest); }
.wish-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.wish-row strong { font-size: 19px; color: var(--forest); font-weight: 900; }
.wish-n { font-family: var(--num); font-size: 24px; color: var(--green); }
.wish-list a { font-weight: 700; color: var(--green); text-decoration: none; }
.wish-list a:hover { text-decoration: underline; }

/* 問政成績入口 */
.record-band { background: var(--forest); }
.record-band h2, .record-band .src, .record-band .src a { color: #fff; }
.record-band .eyebrow { background: var(--lime); color: var(--forest); }
.record-band .eyebrow small { color: var(--forest); }
.record-band .more { color: #fff; }
.record-band .num-card { background: var(--forest); border-color: var(--mint-deep); color: #fff; }
.record-band .num-card:hover { background: #1f5640; }
.record-band .num-card .num, .record-band .num-card strong { color: #fff; }
.record-band .num-card .num b { color: var(--lime); }
.record-band .num-card .sub { color: #cfe9da; }

/* 活動預告 */
.ev-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px !important; }
.ev-acts a { font-size: 14px; font-weight: 900; text-decoration: none; color: var(--forest); border: 2px solid var(--forest); border-radius: 999px; padding: 2px 12px; background: var(--lime); }
.ev-acts a + a { background: transparent; }

/* 首頁：專戶＋競總並排 */
.join-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; }
.office-card { background: var(--forest); color: #fff; border: 3px solid var(--forest); padding: 28px; display: grid; gap: 16px; }
.office-card h2 { color: #fff; margin: 0; }
.office-card .tape { justify-self: start; margin: 0; }
.office { border-top: 2px solid rgba(255,255,255,.2); padding-top: 14px; display: grid; gap: 4px; justify-items: start; }
.office strong { color: var(--lime); font-size: 15px; }
.office p { margin: 0; font-size: 22px; font-weight: 900; }
.office .btn { margin-top: 8px; padding: 6px 18px; font-size: 15px; background: var(--lime); color: var(--forest); border-color: var(--lime); }
.office-social { margin: 0; font-size: 14px; color: #cfe9da; }
.office-social a { color: #fff; }
@media (max-width: 860px) { .join-grid { grid-template-columns: 1fr; } }

/* 頁尾四欄 */
.f-col h3 { color: var(--lime); font-size: 15px; letter-spacing: .08em; margin: 0 0 12px; }
.f-col p { margin: 0 0 12px; }
.f-col b { color: #fff; }
.f-col small { color: #a9cdb8; }
.f-title { color: #fff; font-size: 20px; margin: 0 0 10px; }
.f-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }
.card .btn { padding: 9px 18px; font-size: 15px; white-space: nowrap; }

/* 新竹隊 */
.team-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.team-group { background: #fff; border: 3px solid var(--forest); padding: 16px 18px; }
.team-group h3 { font-size: 15px; margin: 0 0 10px; color: #fff; background: var(--forest); display: inline-block; padding: 2px 10px; }
.team-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.team-group a, .team-group .no-link { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; text-decoration: none; padding: 6px 0; border-bottom: 2px solid var(--line); }
.team-group strong { font-size: 20px; font-weight: 900; color: var(--forest); }
.team-group a span { font-size: 13px; font-weight: 700; color: var(--green); }
.team-group a:hover strong { color: var(--green); }
.team-group .no-link span { font-size: 13px; color: var(--muted); }
.team-src { grid-column: 1 / -1; }

/* 主視覺橫幅（官方封面照，示意用） */
.hero-banner { margin: 0 0 36px; }
.hero-banner img { width: 100%; height: auto; border: 3px solid var(--forest); background: #fff; }
.hero-banner figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; text-align: right; }
.hero-grid { grid-template-columns: 1fr auto; }
.hero-side { grid-template-columns: auto; justify-items: end; }
.hero-side .ribbon { min-height: 340px; }
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-side { display: none; }
}

/* 認識莊競程 */
.about-open { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: start; }
.big-quote { margin: 0; background: var(--forest); color: #fff; padding: 28px 30px; position: relative; }
.big-quote p { margin: 0 0 14px; font-size: clamp(22px, 2.8vw, 30px); font-weight: 900; line-height: 1.5; }
.big-quote footer { font-size: 14px; color: #cfe9da; }
.big-quote footer a { color: var(--lime); }
.big-quote.small p { font-size: clamp(19px, 2.2vw, 24px); }
.about-note { background: #fff; border: 3px solid var(--forest); padding: 20px 22px; display: grid; gap: 8px; }
.about-note .tape { justify-self: start; margin: 0; }
.about-note p { margin: 0; }
.journey { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-left: 6px solid var(--forest); }
.journey li { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 18px 0 18px 24px; position: relative; border-bottom: 2px dashed var(--line); }
.journey li::before { content: ""; position: absolute; left: -15px; top: 26px; width: 24px; height: 24px; background: var(--lime); border: 4px solid var(--forest); border-radius: 50%; }
.journey .when { font-family: var(--num); font-size: 30px; color: var(--forest); line-height: 1.1; }
.journey h3 { margin: 0 0 4px; }
.journey p { margin: 0 0 4px; color: var(--muted); }
.quote-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.quote-grid blockquote { margin: 0; border: 3px solid var(--mint-deep); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.quote-grid p { margin: 0; color: #fff; font-size: 20px; font-weight: 900; line-height: 1.55; }
.quote-grid footer { font-size: 13px; }
.quote-grid footer a { color: var(--lime); }
.family { max-width: 820px; }
.family .big-quote { margin: 20px 0 12px; }
.next-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.next-steps .num b { font-family: var(--font); font-weight: 900; font-size: 44px; }
@media (max-width: 760px) {
  .about-open, .next-steps { grid-template-columns: 1fr; }
  .journey li { grid-template-columns: 1fr; gap: 4px; }
}

/* 現場直擊：直式影片 */
.reel-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 18px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.reel { margin: 0; scroll-snap-align: start; display: grid; gap: 8px; min-width: 0; }
.reel-frame { aspect-ratio: 9 / 16; max-width: 100%; background: var(--forest); border: 3px solid var(--forest); overflow: hidden; }
.reel-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.reel figcaption { font-weight: 700; color: var(--forest); font-size: 15px; line-height: 1.5; }
.reel .tag { margin-right: 4px; }
@media (max-width: 760px) { .reel-row { grid-auto-columns: 72%; } }

.family-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.family-photo { margin: 0; }
.family-photo img { width: 100%; height: auto; border: 3px solid var(--forest); }
.family-photo figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.6; }
@media (max-width: 860px) { .family-grid { grid-template-columns: 1fr; } }

/* 官方圖卡（IG 嵌入） */
.ig-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap: 18px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.ig-card { margin: 0; scroll-snap-align: start; display: grid; gap: 8px; min-width: 0; }
.ig-frame { background: #fff; border: 3px solid var(--forest); overflow: hidden; height: 560px; }
.ig-frame iframe { width: 100%; height: 640px; border: 0; display: block; }
.ig-card figcaption { font-weight: 700; color: var(--forest); font-size: 15px; line-height: 1.6; }
.ig-card figcaption a { display: block; font-weight: 900; color: var(--green); text-decoration: none; }
@media (max-width: 760px) { .ig-row { grid-auto-columns: 85%; } }

.policy-video { margin-top: 12px; display: grid; gap: 6px; }
.policy-video .ig-frame { height: 600px; }
.policy-video .ig-frame iframe { height: 700px; }

.filter-label { font-size: 14px; font-weight: 900; color: var(--muted); align-self: center; margin-right: 4px; }
.filter-break { flex-basis: 100%; height: 0; }
.tag.area { background: var(--forest); color: #fff; margin-left: 6px; }
.policy-card .poster .tag + .tag.area { margin-left: 0; }
.policy-card .poster > div { display: flex; gap: 6px; }
#area-note { margin: -8px 0 20px; }
.timeline li.divider { display: block; background: none; border: 0; padding: 18px 0 4px; }
.timeline li.divider span { font-weight: 900; color: var(--muted); font-size: 15px; border-bottom: 3px solid var(--line); padding-bottom: 4px; }
.reel-frame.ig { background: #fff; }
.reel-frame.ig iframe { height: 120%; }
.policy-card .poster .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.policy-card .poster .tags .tag.area { margin-left: 0; }
.filter-count { font-weight: 900; color: var(--forest); margin: -12px 0 18px; }
.num-card .num.long b { font-size: 56px; }
.hero-tags a { color: inherit; text-decoration: none; display: block; }
.hero-tags li:hover { background: var(--green); }
/* 手機：首頁精選政見改成左右滑動，縮短首頁長度 */
@media (max-width: 760px) {
  #policy-featured, #video-list, #fact-latest { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  #policy-featured > *, #video-list > *, #fact-latest > * { scroll-snap-align: start; }
}
.family-grid > *, .about-open > *, .join-grid > * { min-width: 0; }
.family-photo figcaption, .src { overflow-wrap: anywhere; }

/* 官方臉書照片嵌入 */
.fb-embed { margin: 0 0 36px; display: grid; gap: 6px; justify-items: center; }
.fb-embed iframe { width: 100%; max-width: 750px; aspect-ratio: 1708 / 760; border: 3px solid var(--forest); background: #fff; }
.fb-embed figcaption { font-size: 12px; color: var(--muted); }
.family-grid.solo { grid-template-columns: 1fr; max-width: 820px; }

/* 現場直擊：貼文摘錄 */
.reel-quote { display: block; margin-top: 8px; padding: 10px 12px; background: var(--paper); border-left: 4px solid var(--orange); font-weight: 500; font-size: 14px; line-height: 1.7; color: var(--ink); quotes: "「" "」"; }
.reel-quote::before { content: open-quote; } .reel-quote::after { content: close-quote; }

/* 首頁活動預告：橫向活動卡 */
.ev-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(306px, 1fr); gap: 18px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; align-items: start; }
.ev-card { scroll-snap-align: start; background: #fff; border: 3px solid var(--forest); display: flex; flex-direction: column; min-width: 0; }
.ev-media { height: 380px; overflow: hidden; background: #fff; border-bottom: 3px solid var(--forest); }
.ev-media iframe { width: 100%; height: 520px; border: 0; display: block; }
.ev-date-only { background: var(--forest); color: #fff; display: grid; place-content: center; text-align: center; }
.ev-date-only b { font-family: var(--num); font-weight: 400; font-size: 96px; line-height: 1; color: var(--lime); }
.ev-date-only span { font-weight: 900; font-size: 20px; }
.ev-body { padding: 14px 16px 16px; display: grid; gap: 4px; }
.ev-body h3 { font-size: 18px; margin: 0; }
.ev-body p { margin: 0; color: var(--muted); font-size: 14px; }
.ev-when { font-family: var(--num); color: var(--forest) !important; font-size: 18px !important; letter-spacing: .02em; }
.ev-note { font-size: 13px !important; }
@media (max-width: 760px) { .ev-row { grid-auto-columns: 82%; } .ev-media { height: 320px; } }
.ev-media iframe.fb { width: 300px; margin: 0 auto; }