/* ============================================================
   Masa’opo 文化藝術節｜共用樣式（Design Tokens + 元件）
   ------------------------------------------------------------
   所有頁面在自己的 <style> 之前引用：
     <link rel="stylesheet" href="共用樣式.css">

   規則
   1. 顏色只用 6 個品牌色 + #111111 的透明度階，不再出現雜色
   2. 按鈕一律膠囊（radius 99），hover 一律變磚紅底
   3. 「選取中」用墨黑填滿，與 hover 的磚紅明確區分
   ============================================================ */

:root{
  /* ---------- 品牌主色（6 色） ---------- */
  --red:#AE392D;      /* 磚紅：主色、hover、強調 */
  --beige:#E1DAC8;    /* 米色 */
  --gold:#D4AC5A;     /* 金 */
  --slate:#595757;    /* 深灰 */
  --orange:#CD683A;   /* 橘：行動色（報名／贊助） */
  --green:#417743;    /* 綠 */

  /* ---------- 中性：單一 #111111 疊透明度 ---------- */
  --ink:#111111;                    /* 標題、主文字 */
  --ink-88:rgba(17,17,17,.88);      /* 內文 */
  --ink-70:rgba(17,17,17,.70);      /* 次要文字 */
  --ink-52:rgba(17,17,17,.52);      /* 輔助文字、meta */
  --ink-38:rgba(17,17,17,.38);      /* 圖說、停用 */
  --ink-24:rgba(17,17,17,.24);      /* 外框線 */
  --ink-16:rgba(17,17,17,.16);      /* 分隔線 */
  --ink-08:rgba(17,17,17,.08);      /* 圖片底、極淡分隔 */

  /* ---------- 底色 ---------- */
  --cream:#F2F1ED;                  /* 頁面底 */
  --paper:#FFFEFC;                  /* 卡片／面板底 */
  --white:#FFFFFF;                  /* Header 底 */
  --dark:#111111;                   /* Footer／深色區塊 */

  /* ---------- 深色底上的文字 ---------- */
  --on-dark:#F2F1ED;
  --on-dark-64:rgba(242,241,237,.64);
  --on-dark-40:rgba(242,241,237,.40);
  --on-dark-18:rgba(242,241,237,.18);

  /* ---------- 版面 ---------- */
  --header-h:90px;
  --section-x:clamp(20px,8.3vw,120px);
  --wrap-w:1680px;                  /* 一般頁面內容欄（1920 下實際 1440） */
  --read-w:1160px;                  /* 文章閱讀欄 */

  /* ---------- 字級階層 ---------- */
  --fs-display:clamp(28px,3.2vw,44px);  /* 頁面主標 */
  --fs-h1:clamp(24px,2.2vw,34px);       /* 文章標題 */
  --fs-h2:21px;                          /* 區塊標題 */
  --fs-h3:19px;                          /* 文章段落標題 */
  --fs-lead:16px;                        /* 摘要 */
  --fs-body:16px;                        /* 內文 */
  --fs-sm:14px;                          /* meta、按鈕 */
  --fs-xs:12px;                          /* 圖說、徽章 */

  /* ---------- 按鈕尺寸 ---------- */
  --btn-lg:48px;
  --btn-md:40px;
  --btn-sm:34px;

  /* ---------- 頁面轉場幕 ---------- */
  --veil:var(--cream);                    /* 米白，與頁面底色一致 → 轉場像柔和的洗版而不是色塊閃現 */

  /* ---------- 圖標 ---------- */
  --ico:20px;                             /* 圖標字級（Phosphor Icons regular） */

  /* ---------- 圖騰紋樣（重點按鈕 hover 用） ----------
     改用等高線紋理：與麵包屑紅帶、報名彈窗頂帶同一個紋樣來源，
     全站的紋理語彙只剩一種。原檔 601×601、米色實心等高線。 */
  --totem:url("/assets/front/images/decor/contour.svg");
  --totem-size:180px 180px;               /* 按鈕高度內剛好切到 3～4 條等高線 */
  --totem-opacity:.9;                     /* 疊層是 multiply（見按鈕系統）：紋樣越濃、底色越深，
                                             文字對比只會往上，所以可以放到接近滿值，
                                             不像淺色疊層必須壓到個位數才不影響閱讀。 */

  /* ---------- 動態 ---------- */
  --ease:cubic-bezier(.33,.1,.25,1);
  --t-fast:.22s;
  --t-mid:.32s;
}

/* ============================================================
   Base
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
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;
}
img{display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit}

/* ---------- 反白（文字選取） ----------
   磚紅底 + 米白字，與全站的 hover 同一個顏色關係。
   ::selection 與 ::-moz-selection 必須分開寫：
   瀏覽器遇到不認得的偽元素會丟掉整條規則，寫在一起兩邊都會失效。 */
::selection{background:var(--red);color:var(--cream);text-shadow:none}
::-moz-selection{background:var(--red);color:var(--cream);text-shadow:none}
.wrap{max-width:var(--wrap-w);margin:0 auto;padding:0 var(--section-x)}
.col{max-width:calc(var(--read-w) + var(--section-x) * 2);margin:0 auto;padding:0 var(--section-x)}

/* ============================================================
   按鈕系統
   ------------------------------------------------------------
   .btn            膠囊底座（一律 radius 99）
     .btn--solid   墨黑填滿      → hover 磚紅
     .btn--accent  橘色填滿      → hover 磚紅（報名／贊助等行動）
     .btn--line    透明外框      → hover 磚紅填滿
     .btn--sm/lg   尺寸
   .icon-btn       圓形圖標鈕    → hover 磚紅填滿
   .chip           小膠囊（篩選）→ hover 磚紅；.is-on 墨黑（選取中）
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:var(--btn-md);padding:0 24px;border:1px solid transparent;border-radius:99px;
  font-family:inherit;font-size:var(--fs-sm);font-weight:700;letter-spacing:.14em;
  white-space:nowrap;cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.btn--lg{height:var(--btn-lg);padding:0 28px}
.btn--sm{height:var(--btn-sm);padding:0 19px;font-size:13px;letter-spacing:.1em}

.btn--solid{background-color:var(--ink);border-color:var(--ink);color:var(--cream)}
.btn--accent{background-color:var(--orange);border-color:var(--orange);color:var(--beige)}
.btn--line{background-color:transparent;border-color:var(--ink-24);color:var(--ink)}

.btn:hover,
.btn--solid:hover,
.btn--accent:hover,
.btn--line:hover{background-color:var(--red);border-color:var(--red);color:var(--cream)}

.btn:disabled,.btn[aria-disabled="true"]{opacity:.3;cursor:default}
.btn:disabled:hover{background-color:var(--ink);border-color:var(--ink);color:var(--cream)}
.btn--line:disabled:hover{background-color:transparent;border-color:var(--ink-24);color:var(--ink)}

/* ------------------------------------------------------------
   重點強調：橘色按鈕的圖騰顯現
   ------------------------------------------------------------
   hover 時米色波紋淡入（僅 4% 不透明度，只做質感暗示），同時底色轉磚紅。
   刻意不做上浮與陰影 — 全站按鈕都是平面的，只用顏色與紋理表達狀態。

   紋樣放在 ::after 疊層才能用 opacity 做淡入淡出。

   疊層用 mix-blend-mode:multiply → 等高線變成「比底色更深的暗紅」而不是淺米色，
   像壓印或雕刻。這樣紋理可以做得明顯，文字對比反而比純磚紅底更好
   （90% 濃度下最深處 #9C3224，米白文字對比 6.42；純磚紅底是 5.43）。
   父層加 isolation:isolate，讓 multiply 只作用在按鈕自己的底色上，不會透到頁面背景。
   ------------------------------------------------------------ */
.btn--accent,.btn-giving{
  position:relative;overflow:hidden;isolation:isolate;
  transition:
    background-color var(--t-fast),
    border-color var(--t-fast),
    color var(--t-fast);
}
.btn--accent::after,.btn-giving::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  background:var(--totem) repeat center / var(--totem-size);  /* 固定尺寸平鋪，不隨按鈕高度縮放 */
  mix-blend-mode:multiply;
  opacity:0;
  transition:opacity .45s var(--ease);
}
.btn--accent:hover::after,.btn-giving:hover::after,
.btn--accent:focus-visible::after,.btn-giving:focus-visible::after{opacity:var(--totem-opacity)}

.btn--accent:disabled::after{opacity:0}

/* 鍵盤操作也看得到重點狀態 */
.btn--accent:focus-visible,.btn-giving:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  .btn--accent::after,.btn-giving::after{transition:none}
}

/* 按鈕內的箭頭圖標：深色底自動染白 */
.btn img{width:20px;height:20px;object-fit:contain;transition:filter var(--t-fast)}
.btn i[class*="ph-"]{font-size:16px;line-height:1}
.btn--solid img,.btn--accent img,.btn:hover img{filter:brightness(0) invert(1)}

/* ---------- 圓形圖標鈕 ---------- */
.icon-btn{
  width:var(--btn-md);height:var(--btn-md);flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--ink-24);border-radius:99px;background:transparent;cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast);
}
/* Phosphor Icons：字型圖標，直接吃 color，hover 換色最單純 */
.icon-btn i[class*="ph-"]{font-size:var(--ico);line-height:1;color:var(--slate);transition:color var(--t-fast)}
.icon-btn img{width:20px;height:20px;object-fit:contain;transition:filter var(--t-fast)}
.icon-btn:hover{background:var(--red);border-color:var(--red)}
.icon-btn:hover i[class*="ph-"]{color:var(--cream)}
.icon-btn:hover img{filter:brightness(0) invert(1)}
.icon-btn:disabled{opacity:.28;cursor:default}
.icon-btn:disabled:hover{background:transparent;border-color:var(--ink-24)}
/* 寬版（分頁、前往用 80×48） */
.icon-btn--wide{width:80px;height:var(--btn-lg);border-radius:99px}
/* 分享列 */
.share{display:flex;align-items:center;gap:8px}

/* 小版（分享用 34×34） */
.icon-btn--sm{width:var(--btn-sm);height:var(--btn-sm)}
.icon-btn--sm i[class*="ph-"]{font-size:16px}

/* ---------- 文字連結：閱讀更多 → ---------- */
.link-more{
  display:inline-flex;align-items:center;gap:12px;width:fit-content;
  padding-bottom:6px;border-bottom:1px solid var(--ink-24);
  font-size:var(--fs-sm);font-weight:700;letter-spacing:.14em;color:var(--ink);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.link-more img{width:20px;height:20px;object-fit:contain;transition:transform .3s var(--ease)}
.link-more:hover,
a:hover .link-more,
.is-hoverable:hover .link-more{color:var(--red);border-color:var(--red)}
.link-more:hover img,
a:hover .link-more img,
.is-hoverable:hover .link-more img{transform:translateX(6px)}

/* ---------- 篩選膠囊 ---------- */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  height:var(--btn-sm);padding:0 19px;border-radius:99px;
  border:1px solid var(--ink-24);background:transparent;color:var(--ink-70);
  font-family:inherit;font-size:var(--fs-sm);font-weight:600;letter-spacing:.06em;
  white-space:nowrap;cursor:pointer;transition:var(--t-fast);
}
.chip .n{font-size:var(--fs-xs);font-weight:500;color:var(--ink-38)}
.chip:hover{background:var(--red);border-color:var(--red);color:var(--cream)}
.chip:hover .n{color:var(--on-dark-64)}
.chip.is-on,.chip.on{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.chip.is-on .n,.chip.on .n{color:var(--on-dark-64)}

/* ---------- 標籤膠囊（帶小標籤圖標） ---------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  height:var(--btn-sm);padding:0 16px;border-radius:99px;
  border:1px solid var(--ink-24);background:transparent;color:var(--ink);
  font-size:13px;font-weight:600;letter-spacing:.06em;white-space:nowrap;
  transition:var(--t-fast);cursor:pointer;
}
.tag::before{
  content:"";width:16px;height:16px;flex:0 0 auto;
  background:url("/assets/front/images/icons/tag.svg") center/contain no-repeat;
  transition:filter var(--t-fast);
}
.tag:hover{background:var(--red);border-color:var(--red);color:var(--cream)}
.tag:hover::before{filter:brightness(0) invert(1)}
.tag--plain::before{display:none}

/* ---------- 分類色塊 ---------- */
.cat-badge{
  display:inline-flex;align-items:center;height:24px;padding:0 8px;
  font-size:13px;font-weight:600;letter-spacing:.06em;white-space:nowrap;
  background:var(--red);color:var(--white);
}
.cat-badge--sm{height:21px;font-size:var(--fs-xs);padding:0 8px}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:50;height:var(--header-h);background:var(--white);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--section-x);backdrop-filter:blur(30px);
  transition:transform .45s var(--ease),opacity .45s var(--ease);
}
.site-header.hide{transform:translateY(-100%);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.site-header{transition:none}}
.logo{display:flex;align-items:center;gap:9px;height:44px;flex-shrink:0}
.logo img.logo-full{width:133px;height:44px;object-fit:contain}
.main-nav{display:flex;align-items:center;gap:20px}
.nav-links{display:flex;align-items:center;gap:18px}
.nav-links a{
  font-size:18px;font-weight:600;letter-spacing:.05em;color:var(--slate);
  text-transform:uppercase;white-space:nowrap;transition:color var(--t-fast);
}
.nav-links a:hover,.nav-links a.on{color:var(--red)}
.nav-divider{width:1px;height:8px;background:var(--ink-24)}
.btn-giving{
  display:inline-flex;align-items:center;justify-content:center;
  height:36px;min-width:124px;padding:0 16px;border:1px solid var(--orange);border-radius:99px;
  background-color:var(--orange);color:var(--beige);
  font-size:18px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.btn-giving:hover{background-color:var(--red);border-color:var(--red);color:var(--cream)}
.icon-btns{display:flex;gap:8px}
.site-header .icon-btn{width:36px;height:36px;border-color:var(--ink-24)}
.site-header .icon-btn svg{width:20px;height:20px}
.menu-toggle{
  display:none;width:40px;height:40px;background:none;border:0;cursor:pointer;
  flex-direction:column;gap:6px;align-items:center;justify-content:center;
}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--slate)}
.mobile-nav{display:none}

/* ============================================================
   麵包屑紅帶
   ============================================================ */
.crumb-wrap{position:relative;z-index:5}
.crumb-band{position:relative;background:var(--red);overflow:hidden;height:60px;display:flex;align-items:center}
.band-pattern{
  position:absolute;inset:-180px 0;z-index:0;pointer-events:none;
  background-image:url("/assets/front/images/decor/contour.svg");background-repeat:repeat;background-size:420px 420px;opacity:.42;
}
.crumb-band .wrap{position:relative;z-index:1;display:flex;align-items:center;width:100%}
.crumb{display:flex;align-items:center;gap:14px;min-width:0;padding-right:80px}
.crumb a,.crumb span{
  font-size:var(--fs-sm);font-weight:600;letter-spacing:.06em;
  color:var(--on-dark-64);white-space:nowrap;transition:color var(--t-fast);
}
.crumb a:hover{color:var(--on-dark)}
.crumb .sep{width:16px;height:16px;flex:0 0 auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.6}
.crumb .cur{color:var(--on-dark);overflow:hidden;text-overflow:ellipsis;min-width:0}
.band-glyph{
  position:absolute;right:clamp(20px,4.2vw,61px);top:clamp(22px,2.4vw,38px);z-index:2;
  width:clamp(34px,2.6vw,49px);height:auto;pointer-events:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.12));
}

/* ============================================================
   文章排版（Gathering 與 Stories 共用）
   ============================================================ */
.article-title{
  font-size:var(--fs-h1);font-weight:700;line-height:1.5;letter-spacing:.04em;color:var(--ink);
}
/* 發表時間｜日期 */
.pub{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-sm);letter-spacing:.06em}
.pub .lb{font-weight:600;color:var(--red)}
.pub b{font-weight:500;color:var(--ink-88);letter-spacing:.02em}
.pub i{display:block;width:1px;height:12px;background:var(--ink-24)}

/* 空狀態文字（「內容準備中」「這個分類還沒有文章」）。
   列表頁的 CSS 各自有一份加了 grid-column 的版本會覆蓋這條；
   這裡是給詳情頁等沒有自己定義的地方兜底，免得變成裸文字。 */
.empty{
  padding:56px 0;text-align:center;
  font-size:15px;font-weight:500;letter-spacing:.06em;color:var(--ink-38);
}

.article-body{margin-top:40px}
.article-body p{
  font-size:var(--fs-body);font-weight:400;line-height:1.9;letter-spacing:.04em;color:var(--ink-88);
}
.article-body p + p{margin-top:24px}
/* 內文粗體：磚紅色 + 700。
   內文本身是 88% 墨黑，只加粗在中文裡辨識度很低（沒有 serif/sans 的對比），
   換成磚紅之後掃視就找得到重點；顏色仍是全站主色，不會多一種強調色。 */
.article-body strong,.article-body b,.article-body li strong,.article-body li b{
  font-weight:700;color:var(--red);
}
.article-body h2{
  margin:44px 0 18px;
  font-size:var(--fs-h3);font-weight:700;letter-spacing:.1em;line-height:1.6;color:var(--ink);
}
.article-body h2:first-child{margin-top:0}
.article-body blockquote{
  margin:48px 0;padding:24px 28px;
  background:rgba(225,218,200,.5);border-left:4px solid var(--gold);
}
.article-body blockquote p{font-size:17px;font-weight:600;line-height:1.75;letter-spacing:.04em;color:var(--ink)}
.article-body blockquote cite{
  display:block;margin-top:12px;font-style:normal;
  font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--ink-52);
}
.article-body ul{margin:20px 0 0;display:flex;flex-direction:column;gap:12px}
.article-body li{
  position:relative;padding-left:20px;
  font-size:15px;font-weight:400;line-height:1.7;letter-spacing:.04em;color:var(--ink-88);
}
.article-body li::before{
  content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
  background:var(--gold);transform:rotate(45deg);
}
.article-body .fig{margin:40px 0}
.article-body .fig .ph{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--ink-08)}
.article-body .fig .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.article-body .fig figcaption,
figcaption{margin-top:10px;font-size:var(--fs-xs);font-weight:500;letter-spacing:.04em;line-height:1.8;color:var(--ink-38)}

/* 上／下一篇 */
.pn{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  background:var(--dark);color:var(--on-dark);overflow:hidden;
}
.pn::after{content:"";position:absolute;left:50%;top:16px;bottom:16px;width:1px;background:var(--on-dark-18)}
.pn a{display:flex;align-items:center;gap:16px;padding:0 24px;min-height:120px;transition:background var(--t-fast)}
/* 沒有上／下一篇時的佔位格：只維持欄寬，不畫任何東西 */
.pn .dis{display:block;min-height:120px}
.pn a:hover{background:var(--red)}
.pn a.next{flex-direction:row-reverse;text-align:right}
.pn .ar{flex:0 0 auto;width:24px;height:24px;object-fit:contain;filter:brightness(0) invert(1)}
.pn .tx{min-width:0;padding:0 16px}
.pn .lb{display:block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.22em;color:var(--on-dark-40);margin-bottom:8px}
.pn .tt{
  font-size:var(--fs-sm);font-weight:600;line-height:1.7;letter-spacing:.04em;color:var(--on-dark);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* 複製連結提示 */
.copied{
  position:fixed;left:50%;bottom:40px;transform:translateX(-50%) translateY(12px);
  background:var(--ink);color:var(--cream);padding:10px 20px;border-radius:99px;
  font-size:13px;letter-spacing:.06em;opacity:0;pointer-events:none;transition:.3s;z-index:80;
}
.copied.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================
   分頁
   ============================================================ */
.pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:clamp(64px,6.5vw,96px)}
.pg-num{
  min-width:124px;height:var(--btn-lg);padding:0 18px;border-radius:99px;border:1px solid var(--ink-24);
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:var(--fs-sm);letter-spacing:.06em;color:var(--ink-52);
}
.pg-num b{font-weight:700;color:var(--ink)}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:var(--dark);color:var(--on-dark);padding:80px 0 24px}
.footer-main{max-width:1320px;margin:0 auto;padding:0 32px;display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
.f-brand{max-width:435px;padding:0 12px;display:flex;flex-direction:column;gap:20px}
.f-logo{display:flex;align-items:center;gap:10px;height:66px}
.f-logo img{height:52px;width:auto;object-fit:contain;filter:brightness(0) invert(1)}
.f-brand p{
  font-size:var(--fs-body);font-weight:500;line-height:1.75;letter-spacing:.03em;
  color:var(--on-dark-64);max-width:290px;padding:16px 0;
}
.f-social{display:flex;align-items:center;gap:16px}
.f-social a{
  width:var(--btn-md);height:var(--btn-md);border-radius:99px;border:1.5px solid var(--on-dark-18);
  display:flex;align-items:center;justify-content:center;transition:var(--t-fast);
}
.f-social a i[class*="ph-"]{font-size:18px;line-height:1;color:var(--on-dark-64);transition:color var(--t-fast)}
.f-social a:hover{background:var(--red);border-color:var(--red)}
.f-social a:hover i[class*="ph-"]{color:var(--on-dark)}
/* AA 無障礙標章：與社群圓鈕同一列，高度對齊圓鈕直徑 */
.aa{display:inline-flex;align-items:center;margin-left:4px}
.aa img{height:34px;width:auto;object-fit:contain}
.f-links{display:flex;flex-wrap:wrap}
.f-col{width:240px;display:flex;flex-direction:column;gap:16px}
.f-col h5{
  display:flex;align-items:center;gap:6px;
  font-size:var(--fs-body);font-weight:500;letter-spacing:.05em;color:var(--on-dark-40);
}
.f-col h5 img{width:20px;height:20px;object-fit:contain;filter:brightness(0) invert(1);opacity:.55}
.f-col ul{display:flex;flex-direction:column;gap:12px}
.f-col ul a{font-size:var(--fs-sm);font-weight:500;letter-spacing:.05em;color:var(--on-dark);transition:color var(--t-fast)}
.f-col ul a:hover{color:var(--gold)}
.footer-hr{height:1px;background:var(--on-dark-18);margin:24px 0 0}
.footer-bottom{display:flex;align-items:center;justify-content:center;padding:24px 16px 0;flex-wrap:wrap}
.footer-bottom img{height:24px;width:124px;object-fit:contain}
.fb-div{width:1px;height:23px;background:var(--on-dark-18);margin:0 24px}
.footer-bottom a,.footer-bottom span{font-size:var(--fs-sm);color:var(--on-dark-64);letter-spacing:.02em;transition:color var(--t-fast)}
.footer-bottom a:hover{color:var(--on-dark)}

/* ============================================================
   滾動淡入
   ------------------------------------------------------------
   由 動效.js 自動掛上 .reveal，進入視口時加 .in。
   同群組用 --rd 做交錯延遲。
   ============================================================ */
.reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  transition-delay:var(--rd,0s);
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .reveal{transition:none;opacity:1;transform:none}
}

/* ============================================================
   頁面轉場：米白幕
   ------------------------------------------------------------
   進場：html::before 一載入就是不透明米白，隨即淡出
         （寫在 CSS 而不是 JS，才不會有內容先閃一下）
   離場：動效.js 加上 .is-leaving，米白幕淡入後才跳頁

   幕色用 --veil（預設米白 #F2F1ED，與頁面底色相同），
   所以轉場讀起來是內容的柔和交替，不是滿屏色塊閃過。
   ============================================================ */
html::before{
  content:"";position:fixed;inset:0;z-index:9999;
  background:var(--veil);pointer-events:none;
  animation:veil-out .58s var(--ease) forwards;
}
@keyframes veil-out{
  from{opacity:1;visibility:visible}
  99%{opacity:0;visibility:visible}
  to{opacity:0;visibility:hidden}
}
html.is-leaving::before{animation:veil-in .38s var(--ease) forwards}
@keyframes veil-in{
  from{opacity:0;visibility:visible}
  to{opacity:1;visibility:visible}
}
@media (prefers-reduced-motion:reduce){
  html::before{animation:none;opacity:0;visibility:hidden}
  html.is-leaving::before{animation:none}
}


/* ============================================================
   報名：按鈕區、彈窗、表單、成功畫面
   ============================================================ */
.signup{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.signup-note{font-size:var(--fs-xs);line-height:1.7;letter-spacing:.03em;color:var(--ink-52)}
/* 不需要動作的狀態：字級／字重／行高與詳情頁「時間／地點」的說明文字一致 */
.signup-off{
  display:block;font-size:14px;font-weight:500;letter-spacing:.04em;line-height:1.9;color:var(--slate);
}


/* ============================================================
   共用 RWD
   ============================================================ */
@media (max-width:1200px){
  .nav-links a{font-size:16px}
  .f-col{width:200px}
}
@media (max-width:1024px){
  :root{--header-h: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(--slate);
    border-bottom:1px solid var(--ink-08);text-transform:uppercase;
  }
}
@media (max-width:820px){
  .footer-main{flex-direction:column}
  .f-links{gap:32px}
  .pn{grid-template-columns:1fr}
  .pn::after{left:0;right:0;top:50%;bottom:auto;width:auto;height:1px}
  .pn a{min-height:100px}
}
@media (max-width:600px){
  .site-header{padding:0 16px}
  .logo img.logo-full{width:103px;height:34px}
  .icon-btns{display:none}
  .btn-giving{min-width:auto;height:32px;font-size:15px;padding:0 14px}
  .crumb-band{height:52px}
  .crumb a,.crumb span{font-size:12px;letter-spacing:.04em}
  /* 中間層與它前面的分隔要一起收，只留 Home » 目前頁。
     少了 .sep-md 會剩一個沒有下文的箭頭。 */
  .crumb .sep-md,.crumb .mid{display:none}
  .band-glyph{display:none}
  .f-col{width:100%}
  .article-body p{font-size:15px}
  .article-body blockquote{padding:20px 18px}
}

/* ---- 錯誤頁 ---- */
.error-page{display:grid;place-items:center;min-height:60vh;padding:clamp(80px,12vw,160px) var(--section-x)}
.error-inner{text-align:center;max-width:52ch}
.error-code{font-family:var(--font-en,serif);font-size:clamp(56px,10vw,96px);line-height:1;color:var(--red);letter-spacing:.06em}
.error-title{margin-top:18px;font-size:clamp(20px,3vw,26px);font-weight:700;letter-spacing:.08em;color:var(--ink)}
.error-desc{margin-top:12px;font-size:15px;line-height:1.9;color:var(--ink-52)}
.error-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px}

/* ============================================================
   報名彈窗
   ------------------------------------------------------------
   骨架：磚紅頂帶 → 標題 → 資訊 → 表單／結果
   桌機置中最大寬 660、手機滿版全屏
   ============================================================ */
body.mo-locked{overflow:hidden}
.mo{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px}
.mo[hidden]{display:none}
.mo-mask{position:absolute;inset:0;background:rgba(17,17,17,.52);backdrop-filter:blur(3px)}
.mo-panel{position:relative;width:100%;max-width:660px;max-height:calc(100vh - 48px);
    display:flex;flex-direction:column;background:var(--white);overflow:hidden}
.mo-panel--sm{max-width:520px}
.mo-band{height:8px;flex:0 0 8px;background:var(--red);
    background-image:url("/assets/front/images/decor/contour.svg");background-size:180px 180px;
    mix-blend-mode:normal}
.mo-x{position:absolute;top:22px;right:20px;width:32px;height:32px;border:0;background:none;
    font-size:18px;color:var(--ink-52);cursor:pointer;line-height:1;transition:color .2s}
.mo-x:hover{color:var(--red)}
.mo-body{padding:32px 40px 36px;overflow-y:auto;scrollbar-width:thin}
.mo-body::-webkit-scrollbar{width:10px}
.mo-body::-webkit-scrollbar-thumb{background:var(--ink-16);border:3px solid var(--white);border-radius:99px}
.mo-title{font-size:19px;font-weight:700;line-height:1.6;letter-spacing:.04em;color:var(--ink);padding-right:32px}

/* 時間與地點各自一行不橫排——場地名稱長度不可預期 */
.mo-info{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.mo-info>div{display:flex;gap:14px;font-size:14px;line-height:1.9}
.mo-info dt{flex:0 0 64px;font-weight:700;letter-spacing:.14em;color:var(--ink)}
.mo-info dd{color:var(--slate);font-weight:500;letter-spacing:.04em;word-break:break-all}

.mo-form{margin-top:26px;display:flex;flex-direction:column;gap:16px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld label{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--ink)}
.fld input,.fld select{height:44px;padding:0 14px;border:1px solid var(--ink-24);background:var(--white);
    font-size:15px;font-family:inherit;color:var(--ink);transition:border-color .2s}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--ink)}
.fld input.is-invalid,.fld select.is-invalid{border-color:var(--red)}
.fld .err{font-size:13px;color:var(--red);min-height:0}
.fld .err:empty{display:none}

/* 名單提供告知：金色左線而非磚紅——這是「請先讀一下」不是錯誤 */
.mo-share{border-left:3px solid var(--gold);background:var(--ink-08);
    padding:12px 16px;font-size:13.5px;line-height:1.9;color:var(--ink-70)}

.mo-agree{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.8;color:var(--ink-70)}
.mo-agree input{margin-top:4px;accent-color:var(--red)}
.mo-agree a{color:var(--red)}
.mo-actions{display:flex;gap:12px;margin-top:12px}

.mo-result-head{display:flex;align-items:center;gap:14px}
.mo-ico{flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
    background:var(--ink-08)}
.mo-ico.is-ok{background:var(--green)}
.mo-ico.is-review{background:var(--gold)}
.mo-ico.is-fail{background:var(--red)}
.mo-ico::after{content:"";width:16px;height:16px;border-radius:50%;background:var(--white)}
.mo-result-desc{margin-top:14px;font-size:14.5px;line-height:1.9;color:var(--ink-70)}

@media (max-width:600px){
    .mo{padding:0}
    .mo-panel{max-width:none;height:100vh;max-height:none}
    .mo-body{padding:24px 20px 32px}
    .mo-actions{flex-direction:column}
    .mo-actions .btn{width:100%}
}

/* ============================================================
   搜尋面板
   ============================================================ */
body.search-locked{overflow:hidden}
.search-panel{position:fixed;inset:0;z-index:190;display:none}
.search-panel.is-open{display:block}
.sb-mask{position:absolute;inset:0;background:rgba(17,17,17,.42)}
.sb-inner{position:relative;background:var(--white);max-height:80vh;display:flex;flex-direction:column}
.sb-bar{display:flex;gap:10px;align-items:center;padding:20px var(--section-x);border-bottom:1px solid var(--ink-08)}
.sb-input{flex:1;height:46px;padding:0 14px;border:1px solid var(--ink-24);font-size:16px;font-family:inherit}
.sb-input:focus{outline:none;border-color:var(--ink)}
.sb-input::-webkit-search-cancel-button{display:none}
.sb-clear{border:0;background:none;font:inherit;font-size:13px;color:var(--ink-52);cursor:pointer;text-decoration:underline}
.search-panel.is-armed .sb-submit{background:var(--red);border-color:var(--red);color:var(--white)}
.search-panel.is-armed .sb-bar::after{content:"再按一次 Enter 前往搜尋結果";
    position:absolute;left:var(--section-x);bottom:2px;font-size:12px;color:var(--red)}
.sb-body{padding:24px var(--section-x) 36px;overflow-y:auto}
.sb-group+.sb-group{margin-top:24px}
.sb-group h4{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--ink-52)}
.sb-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sb-chips button{border:1px solid var(--ink-16);border-radius:99px;padding:5px 14px;background:none;
    font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;transition:.2s}
.sb-chips button:hover{background:var(--red);border-color:var(--red);color:var(--white)}
.sb-chips button i{margin-left:6px;font-style:normal;font-size:11px;color:var(--ink-38)}
.sb-chips button:hover i{color:var(--white)}
.sb-item{display:flex;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--ink-08);
    text-decoration:none;color:inherit}
.sb-item .th{flex:0 0 72px;height:48px;overflow:hidden;background:var(--ink-08)}
.sb-item .th img{width:100%;height:100%;object-fit:cover}
.sb-item .tt{display:block;font-size:14.5px;font-weight:600;line-height:1.6;color:var(--ink)}
.sb-item:hover .tt{color:var(--red)}
.sb-item .mt{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-52)}
.sb-all{margin-top:18px;border:1px solid var(--ink-16);border-radius:99px;padding:8px 20px;background:none;
    font:inherit;font-size:13.5px;cursor:pointer}
.sb-none{font-size:14px;color:var(--ink-52)}

/* ============================================================
   Toast（複製連結等提示）
   ============================================================ */
.toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,12px);z-index:300;
    background:var(--ink);color:var(--white);padding:11px 22px;border-radius:99px;font-size:14px;
    opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){.toast{transition:none}}