/* 首頁.html 的頁面樣式（自切版抽出，僅改素材路徑） */
/* ============ 基本設定 ============ */
:root{
  /* 舊變數名 → 新 token 的對照（避免大量改寫既有規則） */
  --gray:var(--slate);
  --gray-2:var(--ink-38);
  --brown:var(--slate);
  --beige-2:var(--beige);
  --cream-2:var(--cream);
  --line:var(--beige);
  --red-acc:var(--red);
  --body-size:var(--fs-body);
  --body-weight:500;
  --body-line:1.75;
  --body-track:.03em;
  --hero-bar-h:clamp(96px,13svh,150px);
  --title-size:clamp(26px,2.8vw,40px);
  --title-weight:600;
  --title-track:.15em;
}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
.en{text-transform:uppercase}
.sec-title{
  font-size:var(--title-size);
  font-weight:var(--title-weight);
  letter-spacing:var(--title-track);
  word-spacing:.35em;
  line-height:1.2;
  text-transform:uppercase;
  color:var(--ink);
}

/* ============ Hero ============ */
.hero{
  position:relative;overflow:hidden;background:var(--white);
  height:calc(100vh - var(--header-h));
  height:calc(100svh - var(--header-h));
  display:flex;flex-direction:column;
}
.hero-media{position:relative;flex:1 1 auto;min-height:0;aspect-ratio:auto}
.hero-media picture{position:absolute;inset:0;display:block}
.hero-media img.slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;will-change:opacity,transform}
.hero-media img.slide.active{opacity:1;animation:kenburns 7s ease-out both}
@keyframes kenburns{from{transform:scale(1.05)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hero-media img.slide.active{animation:none}}
.hero-bar{
  background:var(--white);border-top:3px solid var(--slate);
  display:flex;align-items:center;justify-content:space-between;
  flex:0 0 var(--hero-bar-h);min-height:88px;
  padding:0 clamp(20px,5.5vw,80px);
}
.hero-dots{
  position:relative;display:flex;gap:36px;--hero-dot-x:0px;--hero-dot-color:var(--gold);--hero-dot-glow:rgba(212,172,90,.12);
}
.hero-dots i{
  width:16px;height:16px;background:var(--ink-16);
  transition:opacity .32s cubic-bezier(.2,0,0,1),transform .32s cubic-bezier(.2,0,0,1);
}
.hero-dots i.on{opacity:.28;transform:scale(.78)}
.hero-dots::after{
  content:"";position:absolute;left:0;top:0;width:16px;height:16px;background:var(--hero-dot-color);
  transform:translateX(var(--hero-dot-x));will-change:transform;
  transition:transform .58s cubic-bezier(.2,0,0,1),background-color .42s cubic-bezier(.2,0,0,1),box-shadow .32s cubic-bezier(.2,0,0,1);
  box-shadow:0 0 0 0 transparent;
}
.hero-dots.is-moving::after{box-shadow:0 0 0 8px var(--hero-dot-glow)}
@media (prefers-reduced-motion:reduce){
  .hero-dots i,.hero-dots::after{transition:none}
  .hero-dots::after{display:none}
  .hero-dots i.on{opacity:1;transform:none;background:var(--hero-dot-color)}
}
.hero-pager{display:flex;align-items:center;gap:48px}
.hero-count{display:flex;align-items:center;gap:20px}
.hero-count b{font-size:18px;font-weight:700;letter-spacing:.05em;color:var(--gray);width:40px;text-align:center}
.hero-track{position:relative;width:96px;height:1px;background:var(--ink-24)}
.hero-track i{position:absolute;left:0;top:0;height:1px;width:36.5%;background:var(--red-acc)}
.hero-arrows{display:flex;gap:20px}
.hero-arrows img{width:24px;height:24px;cursor:pointer}

/* ============ 週曆 Gathering ============ */
.weekcal{background:var(--white)}
.weekcal-band{
  position:relative;height:280px;background:var(--red);overflow:hidden;isolation:isolate;
}
.weekcal-band::before{
  content:"";position:absolute;inset:-120px;z-index:0;pointer-events:none;
  background-image:url("/assets/front/images/decor/contour.svg");background-repeat:repeat;background-size:420px 420px;
  opacity:.46;transform:translate3d(var(--gather-pattern-x,0px),var(--gather-pattern-y,0px),0);
  will-change:transform;
}
.weekcal-band .band-word{
  position:absolute;left:24px;bottom:-10px;z-index:1;height:56%;width:auto;max-width:80%;object-fit:contain;object-position:left bottom;
}
.weekcal-days{
  display:grid;grid-template-columns:repeat(7,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:0 clamp(12px,5.5vw,80px);background:var(--paper);
}
.wc-day{
  height:60px;display:flex;align-items:center;gap:0;padding:18px 16px;
}
.wc-day .num{font-family:"Cactus Classical Serif",serif;font-size:24px;line-height:24px;color:var(--ink);padding-right:12px}
.wc-day .wd{font-size:16px;font-weight:500;color:var(--gray-2)}
.wc-day.today{background:rgba(212,172,90,.2);border-bottom:1px solid var(--orange)}
.wc-day.today .num,.wc-day.today .wd{color:var(--orange)}
.wc-day.month-head .num{font-size:24px}
.wc-day.month-head .wd{font-size:15px;font-weight:700;color:var(--ink-52)}
.weekcal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);
  padding:0 clamp(12px,5.5vw,80px);background:var(--paper);
  border-bottom:1px solid var(--line);
  height:420px;transition:opacity .22s cubic-bezier(.2,0,0,1);
}
.weekcal-scroll,.weekcal-days,.weekcal-grid{scrollbar-width:none;-ms-overflow-style:none}
.weekcal-scroll::-webkit-scrollbar,.weekcal-days::-webkit-scrollbar,.weekcal-grid::-webkit-scrollbar{display:none}
.weekcal-days{transition:opacity .22s cubic-bezier(.2,0,0,1)}
.weekcal.is-changing .weekcal-days,.weekcal.is-changing .weekcal-grid{opacity:0;transform:none}
@media (prefers-reduced-motion:reduce){.weekcal-days,.weekcal-grid{transition:none}.weekcal.is-changing .weekcal-days,.weekcal.is-changing .weekcal-grid{opacity:1;transform:none}.weekcal-band::before{transform:none}}
.wc-col{
  padding:24px 0 88px;height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;-ms-overflow-style:none;
}
.wc-col::-webkit-scrollbar{display:none}
.wc-col.today{background:rgba(212,172,90,.2)}
.wc-col.month-col{padding-bottom:40px}
.wc-col.month-col .wc-event{padding-bottom:20px}
.wc-empty{padding:0 16px;font-size:14px;font-weight:500;line-height:1.7;color:var(--ink-38)}
.wc-event{display:block;padding:0 16px 24px}
/* 週曆小標籤：與全站分類色塊同一語彙（實色方塊、無圓角） */
.wc-event .wc-tag{
  display:inline-flex;align-items:center;height:20px;padding:0 6px;margin-bottom:6px;
  background:var(--red);color:var(--white);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;white-space:nowrap;
}
.wc-event .wc-tag.is-gathering{background:var(--red)}
.wc-event .wc-tag.is-satellite{background:var(--green)}
.wc-event .name{font-size:15px;font-weight:500;color:var(--ink);margin-bottom:8px;line-height:1.45}
.wc-event .place{font-size:14px;color:var(--ink-38)}
.wc-event:hover .name{color:var(--orange)}
.weekcal.is-month .wc-day.today{background:rgba(212,172,90,.2);border-bottom:1px solid var(--orange)}
.weekcal-tools{
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(24px,3.6vw,52px) clamp(20px,8.3vw,120px);
  background:var(--on-dark-18);border-bottom:1px solid var(--line);
  flex-wrap:wrap;gap:16px;
}
.wc-tools-l,.wc-tools-r{display:flex;align-items:center;gap:16px}
.wc-tools-r{gap:32px}
.pill{
  display:flex;align-items:center;justify-content:center;gap:16px;
  height:48px;padding:0 32px;border-radius:99px;
  border:1px solid var(--ink-24);background:var(--white);cursor:pointer;
  transition:background-color var(--t-fast),border-color var(--t-fast);
}
.pill img{width:24px;height:24px}
.pill .txt{font-size:16px;font-weight:500;letter-spacing:.4em;color:var(--ink);white-space:nowrap}
#wcRangeLabel{position:relative;min-width:min(320px,100%)}
#wcRangeLabel.is-disabled{cursor:default}
#wcRangeLabel.is-disabled:hover{background:var(--white);border-color:var(--ink-24)}
#wcRangeLabel.is-disabled:hover .txt{color:var(--ink)}
#wcRangeText{display:inline-block;letter-spacing:.12em;text-indent:.12em}
#wcRangeLabel.is-disabled .range-chevron{display:none}
.wc-month-select{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
}
#wcRangeLabel.is-disabled .wc-month-select{display:none}
.pill.arrow{padding:0 60px}
/* hover 一律磚紅（與全站按鈕同語彙）；選取中用墨黑 */
.pill:hover{background:var(--red);border-color:var(--red)}
.pill:hover .txt{color:var(--cream)}
.pill:hover img{filter:brightness(0) invert(1)}
.pill:hover i[class*="ph-"]{color:var(--cream)}
.pill.is-active{background:var(--ink);border-color:var(--ink)}
.pill.is-active .txt{color:var(--cream)}
.pill.is-active img{filter:brightness(0) invert(1)}
.pill.is-active{border-color:rgba(205,104,58,.6);box-shadow:inset 0 0 0 1px rgba(205,104,58,.24)}

/* ============ 匯聚大事件 ============ */
.events{background:var(--paper);overflow:hidden}
.events-feature{
  position:relative;padding:clamp(40px,6.6vw,95px) clamp(20px,8.3vw,120px) 0;
  display:grid;grid-template-columns:minmax(0,614fr) minmax(0,560fr);
  gap:0;align-items:start;min-height:0;
  color:inherit;text-decoration:none;
}
/* hover：封面放大＋覆一層綠、標題banner 轉磚紅、閱讀更多箭頭前進 */
.ef-img{position:relative;width:100%;aspect-ratio:614/411;background:var(--ink-08);overflow:hidden}
.ef-img img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease);
}
.events-feature:hover .ef-img img{transform:scale(1.04)}
.ef-img::after{
  content:"";position:absolute;inset:0;background:var(--green);
  opacity:0;transition:opacity .45s var(--ease);mix-blend-mode:multiply;
}
.events-feature:hover .ef-img::after{opacity:.18}
.ef-right{position:relative;padding-top:clamp(40px,10.3vw,149px)}
.ef-banner{
  position:relative;margin-left:calc(-1 * clamp(24px,3.7vw,54px));
  background:var(--green);color:var(--beige);
  padding:20px 40px;
  font-size:clamp(20px,1.94vw,28px);font-weight:700;letter-spacing:.02em;line-height:1.5;
  max-width:540px;
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.events-feature:hover .ef-banner{background:var(--red);color:var(--cream)}
/* 讓「可以點」這件事在沒有 hover 時就看得見（樣式見共用的 .link-more） */
.ef-more{margin:26px 0 0 clamp(0px,3.75vw,54px)}
.ef-desc{
  margin:28px 0 0 clamp(0px,3.75vw,54px);max-width:454px;
  font-size:var(--body-size);font-weight:var(--body-weight);letter-spacing:var(--body-track);line-height:var(--body-line);color:var(--slate);
}
.ef-glyph{
  position:absolute;right:auto;left:clamp(300px,28vw,430px);top:clamp(62px,6vw,92px);
  width:clamp(48px,5.4vw,78px);aspect-ratio:945/1000;object-fit:contain;z-index:2;
}
.events-list-wrap{position:relative;padding:clamp(40px,8.3vw,120px)}
.events-head{
  display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:40px;
}
.events-list-wrap .sec-title{margin-bottom:0}
.event-carousel-cue{
  display:flex;align-items:center;justify-content:center;gap:6px;min-width:118px;height:48px;
  --cue-muted:var(--ink-24);--cue-active:var(--slate);
}
.event-carousel-cue i{
  display:block;width:2px;height:8px;background:var(--cue-muted);opacity:.9;
  transform-origin:center;transition:height .42s cubic-bezier(.2,0,0,1),background-color .42s cubic-bezier(.2,0,0,1),opacity .42s cubic-bezier(.2,0,0,1);
}
.event-carousel-cue i.is-active{height:20px;background:var(--cue-active);opacity:1}
.ev-scroller{
  display:flex;gap:40px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab;user-select:none;touch-action:pan-y;
  overscroll-behavior-x:contain;scroll-behavior:smooth;
}
.ev-scroller::-webkit-scrollbar{display:none}
.ev-scroller.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.ev-card{flex:0 0 auto;width:min(425px,82vw);scroll-snap-align:start}
.ev-card .img{position:relative;aspect-ratio:425/284;background:var(--ink-08);overflow:hidden}
.ev-card .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s;pointer-events:none;-webkit-user-drag:none}
.ev-card:hover .img img{transform:scale(1.04)}
.ev-card .meta{display:flex;align-items:center;justify-content:space-between;margin:16px 0 6px;padding-left:16px}
.ev-card .cat{color:var(--gold);font-size:15px;font-weight:600;letter-spacing:.04em}
.ev-card .date{color:var(--ink-38);font-size:15px;font-weight:500;letter-spacing:.02em;display:flex;align-items:center;gap:6px}
.ev-card .date i{display:block;width:8px;height:1px;background:var(--ink-38)}
.ev-card .title{
  padding-left:16px;font-size:22px;font-weight:700;letter-spacing:.02em;line-height:1.5;color:var(--brown);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.view-more{
  display:flex;align-items:center;justify-content:center;margin-top:38px;
}
.view-more .pill,.sat-more .pill{min-width:260px}
.view-more .pill .txt{font-size:18px;font-weight:600;letter-spacing:.4em;text-indent:.4em}
.deco-contour{position:absolute;pointer-events:none;opacity:.9}

/* ============ 共振計畫 ============ */
.satellite{position:relative;background:var(--cream);overflow:clip}
.satellite-inner{position:relative;z-index:1}
.satellite .sec-title{padding:clamp(40px,4.2vw,60px) clamp(20px,8.3vw,120px) 40px}
.sat-list{
  display:grid;grid-template-columns:minmax(0,736fr) minmax(0,424fr);
  gap:40px;padding:0 clamp(20px,8.3vw,120px) 80px;align-items:start;
}
.sat-col{display:flex;flex-direction:column;gap:32px}
.sat-card .img{position:relative;background:var(--ink-08);overflow:hidden}
.sat-card .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.sat-card:hover .img img{transform:scale(1.03)}
.sat-card.big{position:sticky;top:110px;align-self:start}
.sat-card.big .img{aspect-ratio:736/492}
.sat-card.small .img{aspect-ratio:424/284}
.sat-card h3{margin-top:20px;font-size:22px;font-weight:700;letter-spacing:.05em;color:var(--ink)}
.sat-card p{
  margin:5px 0 10px;font-size:var(--body-size);font-weight:var(--body-weight);letter-spacing:var(--body-track);line-height:var(--body-line);color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sat-card.big p{font-size:var(--body-size);-webkit-line-clamp:2}
.sat-card .hash{font-size:15px;font-weight:600;color:var(--green);opacity:.8}
.sat-more{display:flex;justify-content:center;padding:0 0 80px}
.sat-more .pill .txt{letter-spacing:.4em;font-size:18px;font-weight:600}
.sat-deco{position:absolute;pointer-events:none;z-index:0;opacity:.85}

/* ============ 互動入口 ============ */
.interact{display:flex;min-height:calc(100vh - 90px);min-height:calc(100svh - 90px);background:var(--red)}
.interact-rail{
  width:35%;flex:0 0 35%;background:var(--white);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:80px 32px 60px var(--section-x);
}
.rail-art{position:relative;display:flex;gap:22px}
.rail-title{
  writing-mode:vertical-rl;text-orientation:upright;
  font-size:var(--title-size);font-weight:var(--title-weight);letter-spacing:var(--title-track);
  color:var(--ink);line-height:1.2;
}
.rail-line{position:relative;width:1px;background:linear-gradient(180deg,var(--ink) 0%,var(--ink-16) 100%);height:364px;margin-top:100px}
.rail-line::before{
  content:"+";position:absolute;left:50%;top:44px;transform:translateX(-50%);
  color:var(--red);font-size:18px;background:var(--white);padding:4px 0;
}
.rail-en{
  writing-mode:vertical-rl;transform:rotate(0deg);
  font-size:clamp(17px,1.6vw,22px);font-weight:500;letter-spacing:.12em;
  color:var(--ink);text-transform:uppercase;margin-top:172px;height:313px;
  text-orientation:mixed;
}
.rail-note{font-size:var(--body-size);font-weight:var(--body-weight);letter-spacing:var(--body-track);line-height:var(--body-line);color:var(--ink)}
.interact-panels{flex:1;display:flex;flex-direction:column;min-width:0}
.ipanel{
  position:relative;flex:1;min-height:380px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.ipanel.red{background:var(--red)}
.ipanel.green{background:var(--green)}
.ipanel .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ipanel .caption{
  position:relative;z-index:2;display:flex;align-items:center;gap:40px;
  padding:0 24px;flex-wrap:wrap;justify-content:center;
}
.ipanel .caption p{
  color:var(--white);font-weight:900;font-size:clamp(20px,2.2vw,32px);letter-spacing:.2em;text-align:center;
}
.ipanel .go{
  display:flex;align-items:center;justify-content:center;height:48px;padding:0 60px;
  border-radius:99px;background:var(--white);border:1px solid rgba(0,0,0,.2);cursor:pointer;transition:transform .3s;
}
.ipanel .go img{width:24px;height:24px}
.ipanel:hover .go{transform:translateX(8px)}

#g-juju{left:490px;top:650px;z-index:1;--d:1.0s}
#g-rukou{left:718px;top:558px;z-index:2;--d:1.5s}
#g-jiaohui{left:820px;top:320px;z-index:1;--d:2.0s}
#g-bianjie{left:600px;top:145px;z-index:2;--d:2.5s}
#g-pengz{left:360px;top:290px;z-index:1;--d:3.0s}

/* ============ 故事 Stories ============ */
.stories{position:relative;background:var(--cream);padding:clamp(48px,5.4vw,78px) 0 clamp(48px,5.4vw,80px)}
.stories-head{
  width:100%;max-width:none;margin:0;padding:0 var(--section-x);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.stories-head .sec-title{letter-spacing:.4em}
.paren-note{font-size:16px;font-weight:700;letter-spacing:.1em}
.paren-note i{color:var(--red);font-style:normal}
.stories-cards{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,1.8vw,26px);
  width:100%;max-width:none;margin:56px 0 0;padding:0;
}
.story-card:nth-child(1){--story-hover:rgba(212,172,90,.72)}
.story-card:nth-child(2){--story-hover:rgba(174,57,45,.72)}
.story-card:nth-child(3){--story-hover:rgba(65,119,67,.72)}
.story-card:nth-child(4){--story-hover:rgba(205,104,58,.72)}
.story-card .visual{
  position:relative;aspect-ratio:340/420;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:32px 24px;
}
.story-card .visual > .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.story-card .visual::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(105,105,53,0) 0%,var(--dark) 100%);
}
.story-tag{
  position:relative;z-index:2;align-self:flex-start;
  display:flex;align-items:center;gap:5px;height:26px;padding:4px 9px;border-radius:80px;
  background:var(--on-dark);border:1px solid rgba(225,218,200,.4);
  font-size:12px;font-weight:600;color:var(--brown);
}
.story-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--red)}
.story-card .visual h3{
  position:relative;z-index:2;color:var(--white);font-size:18px;font-weight:700;letter-spacing:.11em;line-height:1.6;
}
.story-card .mask{
  position:absolute;inset:0;z-index:3;background:var(--story-hover,rgba(174,57,45,.72));backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .35s;
}
.story-card .mask img{width:34%;height:auto;object-fit:contain}
.story-card:hover .mask{opacity:1}
.story-card .desc{
  padding:24px 24px 0 32px;font-size:15px;font-weight:var(--body-weight);letter-spacing:var(--body-track);line-height:var(--body-line);color:var(--ink-88);
}
.stories-pills{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:center;
  max-width:1200px;margin:64px auto 0;padding:0 20px;
}
.stories-pills .sp{
  display:flex;align-items:center;gap:0;height:32px;padding:6px 12px;border-radius:99px;
  background:var(--ink-08);border:1px solid rgba(225,218,200,.4);
  font-size:14px;font-weight:600;color:var(--brown);cursor:pointer;overflow:hidden;
  transition:background .2s cubic-bezier(.2,0,0,1),border-color .2s cubic-bezier(.2,0,0,1);
}
.stories-pills .sp:hover,.stories-pills .sp:focus-visible{
  background:var(--ink-24);border-color:rgba(65,119,67,.22);
}
.stories-pills .sp img{
  width:24px;height:24px;margin-right:0;opacity:0;transform:translateX(-10px) scale(.94);
  max-width:0;transition:max-width .24s cubic-bezier(.2,0,0,1),margin-right .24s cubic-bezier(.2,0,0,1),opacity .18s ease,transform .24s cubic-bezier(.2,0,0,1);
}
.stories-pills .sp:hover img,.stories-pills .sp:focus-visible img{
  max-width:24px;margin-right:8px;opacity:1;transform:translateX(0) scale(1);
}

/* ============ FAQ ============ */
.faq{position:relative;background:var(--white);overflow:hidden}
.faq-band{
  position:relative;height:200px;background:var(--gold);overflow:hidden;isolation:isolate;
}
.faq-band::before{
  content:"";position:absolute;inset:-100px;z-index:0;pointer-events:none;
  background-image:url("/assets/front/images/decor/contour.svg");background-repeat:repeat;background-size:380px 380px;
  opacity:.52;transform:translate3d(var(--faq-pattern-x,0px),var(--faq-pattern-y,0px),0);
  will-change:transform;
}
.faq-title{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;
}
.faq-word{
  position:absolute;left:24px;bottom:-12px;z-index:1;height:78%;width:auto;max-width:82%;
  object-fit:contain;object-position:left bottom;
}
.faq-content{
  position:relative;background:var(--white);padding:clamp(52px,5vw,76px) clamp(20px,8.3vw,120px) clamp(64px,6vw,96px);
}
.faq-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(40px,7.6vw,110px);row-gap:40px;max-width:1200px;margin:0 auto;
}
.faq-item h4{
  position:relative;display:flex;align-items:center;gap:10px;
  font-size:17px;font-weight:700;color:var(--ink);padding:10px 0;
}
.faq-item h4::before{
  content:"";width:9px;height:9px;background:var(--red);flex:0 0 auto;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.faq-item p{
  font-size:15px;line-height:var(--body-line);letter-spacing:var(--body-track);font-weight:var(--body-weight);color:var(--ink-88);
  padding-bottom:22px;border-bottom:1px solid rgba(0,0,0,.12);
}
.faq-wave{position:absolute;right:clamp(16px,6vw,90px);top:calc(200px + 60px);width:100px;height:52px;color:var(--gold);opacity:.55;z-index:1}
.faq-wave-b{position:absolute;left:0;bottom:-18px;width:150px;height:60px;color:var(--ink);opacity:0}
@media (prefers-reduced-motion:reduce){.faq-band::before{transform:none}}

/* ============ 贊助 ============ */
.giving{position:relative;background:var(--dark);overflow:hidden;min-height:446px;color:var(--white);isolation:isolate}
.giving::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:rgba(174,57,45,.7);pointer-events:none;
}
.giving::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(105,105,53,0) 0%,var(--ink-24) 100%);
}
.giving-bg{position:absolute;inset:0;z-index:0;overflow:hidden;opacity:1}
.giving-track{
  position:absolute;left:0;top:50%;display:flex;align-items:center;gap:28px;width:max-content;
  height:min(78%,397px);transform:translateY(-50%);
  animation:givingMarquee 72s linear infinite;will-change:transform;
}
.giving-track img{
  flex:0 0 auto;width:auto;height:100%;aspect-ratio:623/397;
  object-fit:cover;object-position:center;filter:saturate(.88) contrast(.94);
}
@keyframes givingMarquee{to{transform:translate(-50%,-50%)}}
@media (prefers-reduced-motion:reduce){.giving-track{animation:none;transform:translate(-12%,-50%)}}
.giving-cols{
  position:relative;z-index:4;display:grid;grid-template-columns:repeat(3,1fr);
  max-width:1440px;margin:0 auto;padding:clamp(48px,4.2vw,60px) clamp(20px,4vw,60px);
  min-height:446px;align-items:center;
}
.gv-col{padding:0 clamp(16px,3vw,44px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:36px}
.gv-col + .gv-col{border-left:1px solid var(--on-dark-40)}
.gv-pill{
  display:inline-flex;align-items:center;justify-content:center;
  height:49px;padding:0 60px;border-radius:99px;background:var(--white);border:1px solid rgba(0,0,0,.2);
  color:var(--ink);font-size:18px;font-weight:600;letter-spacing:.4em;text-indent:.4em;white-space:nowrap;cursor:pointer;
}
.gv-pill:hover{background:var(--beige)}
.gv-col p{font-size:15px;font-weight:var(--body-weight);letter-spacing:var(--body-track);line-height:var(--body-line);max-width:288px}

/* ============ RWD ============ */
@media (max-width:1200px){
  .nav-links a{font-size:16px}
  .f-col{width:200px}
}
@media (max-width:1024px){
  :root{--header-h:72px;--hero-bar-h:clamp(78px,12svh,104px)}
  .site-header{height:72px}
  .nav-links,.main-nav .nav-divider{display:none}
  .menu-toggle{display:flex}
  .main-nav{gap:12px}
  .mobile-nav{
    position:fixed;top:72px;left:0;right:0;background:var(--white);z-index:49;
    flex-direction:column;padding:12px 24px 24px;box-shadow:0 12px 24px rgba(0,0,0,.08);
  }
  .mobile-nav.open{display:flex}
  .mobile-nav a{padding:14px 0;font-size:17px;font-weight:600;color:var(--gray);border-bottom:1px solid var(--ink-08);text-transform:uppercase}
  .events-feature{grid-template-columns:1fr;padding-bottom:0}
  .ef-right{padding-top:0;margin-top:-40px;z-index:1}
  .ef-banner{margin-left:clamp(16px,4vw,40px);max-width:88%}
  .ef-desc{margin-left:clamp(16px,4vw,40px)}
  .ef-glyph{display:none}
  .sat-list{grid-template-columns:1fr}
  .sat-card.big{position:static}
  .sat-card.small .img{aspect-ratio:736/492}
  .interact-rail{width:35%;flex-basis:35%;padding:56px 24px 40px var(--section-x)}
  .stories-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .weekcal-days,.weekcal-grid{display:flex;overflow-x:auto;padding:0}
  .weekcal-scroll{overflow-x:auto}
  .weekcal-scroll .weekcal-days,.weekcal-scroll .weekcal-grid{min-width:1000px;display:grid;grid-template-columns:repeat(7,1fr);padding:0 20px}
  /* WHY TAOYUAN 手機版：標題與文字改為一般排版，舞台只縮放圖形群 */
  .interact{flex-direction:column;min-height:calc(100svh - 72px)}
  .interact-rail{width:100%;flex-basis:auto;flex-direction:column;gap:20px;padding:32px var(--section-x) 24px}
  .rail-art{gap:16px}
  .rail-title{writing-mode:horizontal-tb;font-size:24px}
  .rail-line{display:none}
  .rail-en{writing-mode:horizontal-tb;margin-top:0;height:auto;font-size:15px}
  .rail-note{font-size:15px}
  .ipanel{min-height:220px}
  .faq-grid{grid-template-columns:1fr}
  .giving-cols{grid-template-columns:1fr;gap:48px;padding-top:64px;padding-bottom:64px}
  .gv-col + .gv-col{border-left:0;border-top:1px solid var(--on-dark-40);padding-top:48px}
  .footer-main{flex-direction:column}
  .f-links{gap:32px}
}
@media (max-width:600px){
  .site-header{padding:0 16px}
  .logo img{height:34px}
  .logo img.logo-full{width:103px;height:34px}
  .logo img.logo-text{height:13px}
  .icon-btns{display:none}
  .btn-giving{min-width:auto;height:32px;font-size:15px;padding:4px 14px}
  .hero{height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h))}
  .hero-media{aspect-ratio:auto;min-height:0}
  .hero-bar{min-height:76px;padding:0 20px}
  .hero-dots{display:none}
  .hero-pager{width:100%;justify-content:space-between}
  .stories-cards{grid-template-columns:1fr}
  .events-head{align-items:flex-start;flex-direction:column;gap:18px;margin-bottom:32px}
  .event-carousel-cue{align-self:flex-end;height:32px;min-width:96px;gap:5px}
  .event-carousel-cue i{height:7px}
  .event-carousel-cue i.is-active{height:16px}
  .ev-card{width:86vw}
  .view-more .pill,.sat-more .pill{min-width:min(260px,100%)}
  .pill{padding:0 20px}
  .pill.arrow{padding:0 32px}
  .faq-band{height:168px}
  .faq-band::before{background-size:300px 300px;inset:-86px}
  .faq-word{left:18px;bottom:-8px;height:68%}
  .faq-content{padding-top:44px}
  .weekcal-tools{
    justify-content:space-between;align-items:center;flex-wrap:nowrap;
    gap:6px;padding:14px 10px;
  }
  .weekcal-tools .wc-tools-l,.weekcal-tools .wc-tools-r{display:contents}
  .weekcal-tools .pill{
    height:42px;min-height:42px;padding:0;gap:6px;flex-shrink:0;
  }
  .weekcal-tools #wcViewToggle,.weekcal-tools .pill.arrow{width:42px;flex:0 0 42px}
  .weekcal-tools #wcRangeLabel{
    min-width:0;max-width:none;flex:1 1 auto;width:auto;padding:0 8px;
  }
  .weekcal-tools .pill img{width:18px;height:18px}
  .weekcal-tools #wcRangeText{
    min-width:0;overflow:hidden;text-overflow:ellipsis;
    font-size:12px;letter-spacing:.02em;text-indent:0;
  }
  .f-col{width:45%}
  .fb-div{margin:0 12px}
}

/* ============ 互動入口 / WHY TAOYUAN 新版覆蓋 ============ */
.interact{
  position:relative;display:grid;grid-template-columns:35% 65%;
  min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h));
  background:var(--white);overflow:hidden;
}
.interact-rail{
  position:relative;width:auto;flex-basis:auto;background:var(--white);overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(72px,8vw,128px) clamp(28px,6vw,96px) clamp(48px,6vw,88px) var(--section-x);
}
.interact-rail::before{
  content:"";position:absolute;left:0;bottom:-8%;width:min(56vw,371px);aspect-ratio:371/421;
  background:url("/assets/front/images/home/interact-bg.png") left bottom/contain no-repeat;
  opacity:.08;pointer-events:none;
}
.rail-art{position:relative;display:flex;flex-direction:column;gap:14px;z-index:1}
.rail-title{
  writing-mode:horizontal-tb;text-orientation:mixed;
  font-size:var(--title-size);font-weight:var(--title-weight);letter-spacing:var(--title-track);line-height:1.2;color:var(--ink);
}
.rail-line{position:relative;width:min(320px,90%);height:1px;background:var(--ink);margin:8px 0 0}
.rail-line::before{
  content:"+";position:absolute;left:17%;top:50%;transform:translate(-50%,-50%);
  color:var(--red);font-size:18px;line-height:1;background:var(--white);padding:0 10px;
}
.rail-en{
  writing-mode:horizontal-tb;text-orientation:mixed;transform:none;height:auto;margin:0;
  font-size:clamp(18px,1.55vw,22px);font-weight:var(--title-weight);letter-spacing:var(--title-track);color:var(--ink);text-transform:uppercase;
}
.rail-note{position:relative;z-index:1;max-width:270px;font-size:var(--body-size);font-weight:var(--body-weight);line-height:var(--body-line);letter-spacing:var(--body-track);color:var(--ink-52)}
.interact-panels{display:flex;flex-direction:column;min-width:0}
.ipanel{min-height:50%;align-items:center;justify-content:center}
.ipanel .bg{filter:saturate(.96)}
.ipanel .caption{width:100%;justify-content:flex-end;padding:0 clamp(32px,6vw,100px);gap:34px}
.ipanel .caption p{font-size:clamp(24px,2.25vw,36px);letter-spacing:.18em;text-align:left}
.ipanel .go{height:48px;min-width:144px}

.why3{
  position:relative;background:var(--cream);overflow:hidden;
  padding:clamp(68px,7.8vw,112px) var(--section-x) clamp(76px,8vw,116px);
}
.why3::after{
  content:"";position:absolute;right:-7vw;bottom:-16vw;width:min(64vw,884px);aspect-ratio:884/931;
  background:url("/assets/front/images/home/why-bg.png") right bottom/contain no-repeat;
  opacity:.075;pointer-events:none;
}
.why3-inner{position:relative;z-index:1;width:100%;max-width:none;margin:0}
.why3-head{
  position:relative;
  display:grid;grid-template-columns:minmax(330px,.78fr) minmax(0,1fr);
  gap:clamp(44px,8vw,160px);align-items:end;border-bottom:1px solid var(--ink-70);
  padding-bottom:28px;
}
.why3-title{
  appearance:none;border:0;background:transparent;padding:0 0 4px;text-align:left;cursor:pointer;
  font-family:inherit;
  font-size:var(--title-size);font-weight:var(--title-weight);line-height:1.2;letter-spacing:.4em;word-spacing:0;color:var(--ink);
  text-transform:uppercase;
  white-space:nowrap;
  transition:color .22s cubic-bezier(.2,0,0,1);
}
.why3-title:hover,.why3-title:focus-visible{color:var(--red);outline:0}
.why3-title.is-active{color:var(--ink)}
.why3-tabs{
  display:flex;align-items:center;justify-content:flex-end;gap:0;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.why3-tabs::-webkit-scrollbar{display:none}
.why3-tab{
  appearance:none;border:0;background:transparent;color:var(--ink-38);cursor:pointer;
  padding:6px 16px;font-size:16px;font-weight:700;letter-spacing:.06em;white-space:nowrap;
  transition:color .22s cubic-bezier(.2,0,0,1);
}
.why3-tab + .why3-tab{
  border-left:0;
  background-image:url("/assets/front/images/why/divider.svg");
  background-repeat:no-repeat;background-position:left center;background-size:auto 16px;
}
.why3-tab.is-active{color:var(--ink)}
.why3-tab:hover,.why3-tab:focus-visible{color:var(--red);outline:0}
.why3-indicator{
  position:absolute;left:0;bottom:-2px;z-index:2;width:var(--why-indicator-w,0px);height:4px;
  background:var(--red);transform:translateX(var(--why-indicator-x,0px));
  transition:transform .48s cubic-bezier(.2,0,0,1),width .48s cubic-bezier(.2,0,0,1),opacity .18s ease;
  pointer-events:none;
}
.why3-body{
  display:grid;grid-template-columns:minmax(360px,1fr) minmax(360px,.92fr);
  width:min(1120px,100%);margin:0 auto;
  gap:clamp(44px,7vw,104px);align-items:center;justify-content:center;padding-top:clamp(52px,5.8vw,84px);
}
.why3-map{
  position:relative;min-height:clamp(500px,43vw,640px);
  display:flex;align-items:center;justify-content:center;
  transform:translateY(18px);opacity:0;transition:opacity .7s cubic-bezier(.2,0,0,1),transform .7s cubic-bezier(.2,0,0,1);
}
.why3.is-visible .why3-map{opacity:1;transform:translateY(0)}
.why3-flower{width:min(100%,551px);height:auto;object-fit:contain;filter:drop-shadow(0 16px 32px rgba(0,0,0,.08))}
.why3-map.is-demo .why3-control{display:none}
.why3-node.why3-control,.why3-overview.why3-control{font:inherit}
.why3-node{
  position:absolute;width:clamp(150px,14.3vw,220px);aspect-ratio:1;border:0;background:transparent;padding:0;
  cursor:pointer;filter:drop-shadow(0 8px 20px rgba(0,0,0,.06));
  transition:transform .34s cubic-bezier(.2,0,0,1),filter .34s cubic-bezier(.2,0,0,1),opacity .24s ease;
}
.why3-node:hover,.why3-node:focus-visible,.why3-node.is-active{
  transform:translateY(-7px) scale(1.025);filter:drop-shadow(0 18px 36px rgba(0,0,0,.14));outline:0;
}
.why3-node img{width:100%;height:100%;object-fit:contain}
.why3-node-label{
  position:absolute;z-index:2;color:var(--ink);font-size:18px;font-weight:800;letter-spacing:.08em;white-space:nowrap;
}
.why3-node-label::after{
  content:"";display:block;width:68px;height:1px;background:var(--ink);margin-top:10px;
}
.why3-node.is-active .why3-node-label,.why3-node:hover .why3-node-label{color:var(--red)}
.why3-node.is-active .why3-node-label::after,.why3-node:hover .why3-node-label::after{background:var(--red)}
.why3-overview{
  position:absolute;left:45%;top:39%;z-index:5;appearance:none;border:1px solid rgba(174,57,45,.36);
  background:rgba(255,254,252,.88);padding:10px 18px;border-radius:999px;color:var(--red);
  font-size:14px;font-weight:800;letter-spacing:.08em;cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.08);transition:transform .24s cubic-bezier(.2,0,0,1),background .24s;
}
.why3-overview:hover,.why3-overview:focus-visible,.why3-overview.is-active{
  transform:translateY(-3px);background:var(--white);outline:0;
}
.why3-node-collision{left:0;top:26%}
.why3-node-collision .why3-node-label{left:0;top:-36px}
.why3-node-boundary{left:28%;top:0}
.why3-node-boundary .why3-node-label{left:-48px;top:8px}
.why3-node-meeting{right:0;top:30%}
.why3-node-meeting .why3-node-label{right:-8px;top:-36px}
.why3-node-urban{left:15%;bottom:0}
.why3-node-urban .why3-node-label{left:-52px;top:8px}
.why3-node-gateway{left:48%;bottom:12%}
.why3-node-gateway .why3-node-label{right:10px;bottom:-38px}
.why3-copy{
  max-width:520px;transform:translateY(18px);opacity:0;
  transition:opacity .7s cubic-bezier(.2,0,0,1) .08s,transform .7s cubic-bezier(.2,0,0,1) .08s;
}
.why3.is-visible .why3-copy{opacity:1;transform:translateY(0)}
.why3-copy.is-switching{opacity:0;transform:translateY(10px);transition-duration:.18s;transition-delay:0s}
.why3-eyebrow{margin-bottom:12px;color:var(--red);font-size:15px;font-weight:600;letter-spacing:var(--body-track)}
.why3-copy h3{font-size:clamp(22px,1.9vw,28px);font-weight:700;line-height:1.45;letter-spacing:var(--body-track);color:var(--ink);margin-bottom:28px}
.why3-copy-body{display:flex;flex-direction:column;gap:22px}
.why3-copy-body p{font-size:var(--body-size);font-weight:var(--body-weight);line-height:var(--body-line);letter-spacing:var(--body-track);color:var(--ink-88)}
.why3-copy-body p:last-child{font-weight:600}

@media (max-width:1024px){
  .interact{grid-template-columns:1fr}
  .interact-rail{min-height:360px;padding:48px var(--section-x)}
  .interact-panels{min-height:640px}
  .why3-head{grid-template-columns:1fr;align-items:start;gap:28px}
  .why3-tabs{justify-content:flex-start;margin:0 calc(-1 * var(--section-x));padding:0 var(--section-x)}
  .why3-body{grid-template-columns:1fr;gap:36px}
  .why3-copy{max-width:720px}
}
@media (max-width:820px){
  .interact-rail{min-height:320px}
  .rail-note{margin-top:80px}
  .ipanel{min-height:300px}
  .ipanel .caption{justify-content:center;padding:0 24px}
  .ipanel .caption p{text-align:center}
  .why3{padding-top:56px}
  .why3-map{min-height:520px;transform-origin:center top}
  .why3-node{width:clamp(128px,32vw,172px)}
  .why3-node-boundary{left:28%;top:4%}
  .why3-node-collision{left:0;top:27%}
  .why3-node-meeting{right:0;top:32%}
  .why3-node-urban{left:8%;bottom:4%}
  .why3-node-gateway{left:48%;bottom:12%}
  .why3-node-label{font-size:15px}
  .why3-overview{left:40%;top:43%;font-size:13px}
}
@media (max-width:600px){
  .interact-rail{min-height:300px;padding:40px 24px}
  .rail-title{font-size:var(--title-size)}
  .rail-line{width:100%}
  .rail-note{font-size:15px;margin-top:56px}
  .interact-panels{min-height:560px}
  .ipanel .caption{gap:18px}
  .ipanel .caption p{font-size:22px;letter-spacing:.1em}
  .ipanel .go{min-width:108px;padding:0 34px}
  .why3{padding-left:24px;padding-right:24px}
  .why3-title{font-size:clamp(30px,9.6vw,42px);letter-spacing:.1em}
  .why3-tabs{margin:0 -24px;padding:0 24px}
  .why3-tab{font-size:14px;padding:6px 12px}
  .why3-map{min-height:470px;margin:0 -8px}
  .why3-copy-body p{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .why3-map,.why3-copy,.why3-node,.why3-overview,.why3-tab,.why3-indicator{transition:none}
  .why3-map,.why3-copy{opacity:1;transform:none}
}