/* 引號與撇號專用字體 ——
   英文的 ’ 在 Noto Sans TC 裡是全形寬度，夾在英文單字中間會變成
   「family’ s」那樣有一個空格的樣子（設計師 0828 第 7 點）。
   這裡只把引號、撇號這幾個碼位指定給拉丁字體，其餘文字完全不受影響。 */
@font-face {
  font-family: "AmadejiaQuotes";
  src: local("Helvetica Neue"), local("Helvetica"), local("Arial"), local("Segoe UI"), local("Roboto");
  unicode-range: U+0027, U+0022, U+2018-2019, U+201C-201D;
  font-display: swap;
}

/* ==========================================================================
   阿嬤的家 A Ma De Jia — 主樣式 v0.2
   數值全部走 _tokens.css，要調設計改那一支就好。
   目錄：01 基礎 / 02 素材插槽 / 03 Header / 04 選單 / 05 語言 / 06 Footer
        07 共用區塊 / 08 首頁 / 09 展覽 / 10 阿嬤的家 / 11 活動報導
        12 文章內頁 / 13 側欄 / 14 分頁 / 15 空狀態 / 16 響應式
   ========================================================================== */

/* ---------- 01 基礎 ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-zh);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }

/* 每個放圖的位置都有固定比例的框，上傳超大圖也不會把版面撐開。
   圖用 object-fit: cover 填滿，超出的部分裁掉而不是溢出。 */
.post-card__thumb,
.entry__thumb            { aspect-ratio: var(--ratio-card);    object-fit: cover; width: 100%; }
.about-image             { aspect-ratio: var(--ratio-about);   object-fit: cover; width: 100%; }
.founder__photo          { aspect-ratio: var(--ratio-founder); object-fit: cover; width: 100%; }
.venues__images img      { aspect-ratio: 1 / 1;   object-fit: cover; width: 100%; }
.curator__photo          { aspect-ratio: 1 / 1;   object-fit: cover; }
.exh-map img             { aspect-ratio: 1920/600; object-fit: cover; width: 100%; }
.site-logo img           { object-fit: contain; }

/* 文章內文的插圖：限制在內容欄寬，高度也給上限，避免直式大圖佔滿整個螢幕 */
.entry__content img,
.entry__content picture  { max-width: 100%; height: auto; }
.entry__content img      { max-height: 80vh; width: auto; margin-inline: auto; }
.entry__content figure   { margin: var(--sp-block) 0; }
.entry__content figcaption {
  font-size: var(--fs-meta); color: var(--c-ink-3);
  text-align: center; margin-top: 10px;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-brand); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 3px;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: var(--lh-title); }
p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

/* max-width 要把左右留白算進去，這樣在 1920 視窗時內容寬度才會等於設計稿的 1708 */
.container { width: 100%; max-width: calc(var(--w-page) + var(--pad-x) * 2); margin-inline: auto; padding-inline: var(--pad-x); }
.narrow    { width: 100%; max-width: var(--w-narrow); margin-inline: auto; }
.text-col  { width: 100%; max-width: var(--w-text);   margin-inline: auto; }

/* 內文段落兩端對齊 —— 設計師要求右側也要切齊（手機版同樣適用）。
   中文靠 justify 就會平均分散；英文加 hyphens 才不會出現大洞。
   置中的區塊（標題、標語、按鈕）不在這個清單裡，維持置中。 */
.exh-intro__body,
.exh-theme__body,
.curator__bio,
.venues__body,
.about-body,
.founder__bio,
.entry__content,
.post-card__excerpt,
.feature__body {
  text-align: justify;
  text-justify: inter-ideograph;   /* 中日韓：字元之間平均分散 */
}
/* 英文兩端對齊時，瀏覽器只能拉開字距 —— 就是客戶說的「一堆空格」。
   hyphens: auto 會改成在該斷的地方補一個「-」帶到下一行。
   注意：這條規則要生效，元素一定要有 lang="en"（見 inc/i18n.php），
   否則瀏覽器不知道要查哪一國的斷字字典，等於沒開。
   hyphenate-limit-chars: 6 3 3 = 只有 6 個字母以上的字才斷，
   斷點前至少留 3 個字母、後面也至少 3 個，避免出現 in-teresting 這種難看的切法。 */
.lang-en,
[data-lang="en"] .entry__content,
[data-lang="en"] .post-card__excerpt {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
}

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.section { padding-block: var(--sp-section); }
.section--tint { background: var(--c-tint); }

/* 區塊標題：CURATORS｜策展人 */
.label-head {
  display: flex; align-items: baseline; justify-content: center; gap: 14px;
  font-family: var(--f-en);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  color: var(--c-brand);
  margin-bottom: var(--sp-block);
  text-align: center;
  flex-wrap: wrap;
}
.label-head .zh { font-family: var(--f-zh); color: var(--c-ink); font-size: .62em; letter-spacing: .1em; }
.label-head .bar { color: var(--c-line); font-weight: 400; }
/* 設計稿裡「英文＋中文副標」的標題（CURATORS｜策展人）是橘色；
   單獨一行的英文標題（ABOUT US、THE FOUNDER）是黑色粗體。 */
.label-head--solo { color: var(--c-ink); font-weight: 700; letter-spacing: .06em; }

/* ---------- 02 素材插槽 ----------
   還沒放圖時顯示的虛線框，會標出檔名與建議尺寸。
   把檔案放進 assets/img/ 或從後台上傳，這個框就會被真圖取代。 */
.img-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center;
  background: repeating-linear-gradient(45deg, #FAFAFA 0 10px, #F2F2F2 10px 20px);
  border: 1.5px dashed var(--c-placeholder);
  color: #9A9A9E;
  font-family: var(--f-en);
  font-size: 12px; line-height: 1.6; letter-spacing: .06em;
  padding: 18px; min-height: 90px;
}
.img-slot__name { font-weight: 600; color: #76767A; word-break: break-all; }
.img-slot__size { font-size: 11px; opacity: .8; }
.img-slot--wide { aspect-ratio: 16 / 5; }
.img-slot--card { aspect-ratio: 16 / 7; }
.img-slot--square { aspect-ratio: 1 / 1; }
.img-slot--round { aspect-ratio: 1 / 1; border-radius: 50%; }
.img-slot--icon { width: 62px; height: 62px; min-height: 0; padding: 4px; font-size: 9px; }
.img-slot--logo { width: 220px; height: 46px; min-height: 0; padding: 4px; font-size: 10px; }

/* ---------- 03 Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--c-bg);
  height: var(--h-header);
  display: flex; align-items: center;
}
.site-header__inner {
  width: 100%; max-width: calc(var(--w-page) + var(--pad-l) + var(--pad-r)); margin-inline: auto;
  padding-left: var(--pad-l); padding-right: var(--pad-r);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  position: relative;
}
/* logo 與右上角工具要浮在手機版選單遮罩之上（遮罩在 header 的堆疊環境裡是 99），
   這樣選單打開時 logo 還是原本的橘、X 也點得到 —— 跟設計稿一致。 */
.site-logo, .header-tools { position: relative; z-index: 100; }
.site-logo img { height: clamp(26px, 2.86vw, 55px); width: auto; }   /* 實測 55px @1920 */
.site-logo__text { font-family: var(--f-en); font-weight: 700; font-size: 22px; color: var(--c-brand); }
.header-tools { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 30px); }

/* ---------- 04 漢堡選單 ---------- */
.nav-toggle {
  appearance: none; background: none; border: 0; padding: 6px;
  display: flex; flex-direction: column; gap: 5px; cursor: pointer;
  width: clamp(30px, 2.3vw, 44px);
}
.nav-toggle span {
  display: block; height: 2px; width: 100%; background: var(--c-ink);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer {
  position: absolute; right: var(--pad-r); top: calc(100% - 10px);
  min-width: 230px;
  background: var(--c-bg);
  box-shadow: 0 6px 28px rgba(0,0,0,.12);
  padding: 24px 28px;
  display: none;
  z-index: 99;
}
.nav-drawer[data-open="true"] { display: block; }
.nav-drawer__bg {
  position: absolute; inset: 0; opacity: .12; pointer-events: none;
  background-size: cover; background-position: center;
}
.nav-drawer__list { position: relative; list-style: none; margin: 0; padding: 0; text-align: center; }
.nav-drawer__list > li + li { border-top: 1px solid var(--c-line); }
.nav-drawer__list a,
.nav-drawer__list .lv1,
.nav-drawer__list .is-disabled {
  display: block; padding: 12px 4px;
  font-size: var(--fs-small); letter-spacing: .22em; text-indent: .22em;
  font-weight: 500;
}
.nav-drawer__list .lv1 { color: var(--c-brand); font-weight: 700; padding-bottom: 6px; }

/* 選單項目：中文版顯示中文、英文版顯示英文，跟著切換鈕走。
   （.nav-label__zh / __en 各自帶 .lang-zh / .lang-en，由上面的語言規則收放。） */
.nav-label { display: block; }
.nav-label__zh { display: block; }
.nav-label__en {
  display: block;
  font-family: var(--f-en);
  letter-spacing: .12em;
  text-indent: .12em;
}
.nav-drawer__years { list-style: none; margin: 0 0 8px; padding: 0; }
.nav-drawer__years a { color: var(--c-brand); font-family: var(--f-en); padding: 3px 0; letter-spacing: .16em; }
.nav-drawer__years .is-disabled { color: #A8A8AC; font-family: var(--f-en); padding: 3px 0; letter-spacing: .16em; cursor: default; }

/* ==========================================================================
   中英文切換（不用外掛）
   兩種語言的文字都印在頁面上，這裡決定顯示哪一個。
   只有一種語言的欄位不會帶 .lang-zh / .lang-en，所以兩邊都看得到。
   ========================================================================== */
html[data-lang="zh"] .lang-en { display: none; }
html[data-lang="en"] .lang-zh { display: none; }

/* ---------- 05 語言切換（國旗下拉） ----------
   照設計稿：收合只有「國旗 + 小箭頭」，展開時另一面國旗直接掉在下面，
   靠左跟上面那面對齊，沒有白底面板、沒有陰影、沒有文字。 */
.lang-switch { position: relative; }
.lang-switch[hidden] { display: none; }

.lang-switch__btn {
  appearance: none; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; gap: var(--gap-lang-caret);
  padding: 0;
}
.lang-switch__flag {
  display: block;
  width: var(--size-flag); height: auto; aspect-ratio: 26 / 18;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}
/* 按鈕上只顯示「目前語言」那一面 */
html[data-lang="en"] .lang-switch__now .lang-switch__flag--zh,
html[data-lang="zh"] .lang-switch__now .lang-switch__flag--en { display: none; }

/* 箭頭照設計稿一律朝下，展開時不翻轉。
   想要展開翻轉的話，把下面那行註解打開就好。 */
.lang-switch__caret {
  display: block; line-height: 0; color: var(--c-ink);
  transition: transform var(--dur-hover) var(--ease);
}
/* .lang-switch[data-open="true"] .lang-switch__caret { transform: rotate(180deg); } */

/* 清單：沒有底、沒有框，就是國旗掉下來 */
.lang-switch__list {
  position: absolute; left: 0; top: calc(100% + var(--gap-lang-stack));
  list-style: none; margin: 0; padding: 0;
  display: none; z-index: 101;
}
.lang-switch[data-open="true"] .lang-switch__list { display: block; }
.lang-switch__list li + li { margin-top: var(--gap-lang-stack); }

.lang-switch__list button {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  display: block; line-height: 0;
  transition: opacity var(--dur-hover) var(--ease);
}
.lang-switch__list button:hover { opacity: .7; }
.lang-switch__list button:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 3px; }
/* 目前語言那一面已經在按鈕上了，清單裡就不要再出現 */
html[data-lang="zh"] .lang-switch__list button[data-set-lang="zh"],
html[data-lang="en"] .lang-switch__list button[data-set-lang="en"] { display: none; }

/* ---------- 06 Footer ---------- */
/* 頁尾：尺寸全部照設計稿量的（1920 寬時 icon 37px、間距 15px、
   聯絡資訊 28px、版權 24px，兩行都是接近全黑）。 */
/* ---------- 回到最上方 ----------
   內頁往下捲一段之後淡入（門檻在 assets/js/to-top.js 的 THRESHOLD）。
   大小與位置改下面三個 token。 */
.to-top {
  position: fixed;
  right: var(--pos-to-top-x);
  bottom: var(--pos-to-top-y);
  z-index: 90;
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  width: var(--size-to-top); height: var(--size-to-top);
  line-height: 0;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--dur-hover) var(--ease),
              transform var(--dur-hover) var(--ease),
              visibility 0s linear var(--dur-hover);
}
.to-top[data-show="true"] {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s;
}
.to-top:hover { opacity: .8; }
.to-top:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 3px; }
.to-top img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* 沒有 back-to-top.png 時的替代：橘色圓形 + 箭頭 */
.to-top__fallback {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--c-brand); color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

@media (max-width: 768px) {
  .to-top { right: var(--pos-to-top-x-m); bottom: var(--pos-to-top-y-m); }
}
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity .01s; transform: none; }
}

.site-footer { padding: var(--pad-footer-top) 0 var(--pad-footer-bottom); text-align: center; background: var(--c-bg); }
.site-footer__social { display: flex; justify-content: center; align-items: center; gap: var(--gap-social); margin-bottom: var(--gap-social-below); color: var(--c-ink); }
.site-footer__social a,
.site-footer__social span { display: inline-flex; color: inherit; }
.site-footer__social a:hover { color: var(--c-brand); }
.site-footer__social .is-unset { opacity: .28; }   /* 還沒填網址的 icon */
.site-footer__social svg { width: var(--size-social); height: var(--size-social); display: block; }
.site-footer__contact { font-family: var(--f-en); font-size: var(--fs-footer); font-weight: 500; color: var(--c-ink); letter-spacing: .02em; margin-bottom: var(--gap-contact-below); }
.site-footer__contact a { color: inherit; }
.site-footer__contact a:hover { color: var(--c-brand); }
.site-footer__contact .sep { color: var(--c-ink); margin-inline: 10px; font-weight: 400; }
.site-footer__copy { font-family: var(--f-en); font-size: var(--fs-footer-copy); color: var(--c-ink); letter-spacing: .02em; }

/* ---------- 07 共用區塊 ---------- */
.page-hero {
  position: relative; min-height: var(--h-hero);
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
  background: var(--c-ink);
}
.page-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* <picture> 版本：外層負責定位，內層 img 負責填滿 */
picture.page-hero__img { display: block; }
picture.page-hero__img img { width: 100%; height: 100%; object-fit: cover; }
picture.pic { display: block; }
picture.pic img { width: 100%; height: auto; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.18); }
.page-hero__text { position: relative; z-index: 1; color: #fff; padding: 40px 20px; }
.page-hero__zh { font-size: var(--fs-hero-zh); letter-spacing: var(--ls-zh-title); text-indent: var(--ls-zh-title); font-weight: 500; }
.page-hero__en { font-family: var(--f-en); font-size: var(--fs-hero-en); letter-spacing: var(--ls-en-title); font-weight: 600; margin-top: 6px; }
.page-hero .img-slot { position: absolute; inset: 0; z-index: 0; }

.video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-inline: auto; max-width: var(--w-video); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Instagram：用 IG 的 /embed/ 頁面當 iframe。
   IG 只認 540px 這個寬度來算高度（不管我們設多寬，它回報的高度都一樣），
   所以 iframe 固定 540 寬，整塊再用 zoom 等比放大到想要的尺寸 ——
   這樣 IG 回報的高度永遠是對的，影片不會被裁、下面也不會留一大塊白。
   想改大小改 _tokens.css 的 --ig-zoom。 */
/* 外框 = 一個固定大小的「窗」，只露出影片；
   iframe 給足 900px 高讓 IG 把影片畫完，窗以外的（上面的頭像列、
   下面的按讚列）全部裁掉。高度完全由主題決定，不依賴 IG 回報的數字。 */
.ig-embed {
  /* --ig-pic-w = 影片畫面在「540 寬的 iframe」裡實際佔多寬。
     直式影片只有 380（左右是 IG 補的黑邊），放大倍率要用它算，
     多出來的左右再靠 overflow:hidden 裁掉 —— 畫面就會跟外框切齊。 */
  position: relative;
  --ig-pic-w: 540;
  --ig-fit: calc(var(--ig-width) / var(--ig-pic-w));
  width: calc(var(--ig-pic-w) * var(--ig-fit) * 1px);
  max-width: 100%;
  height: calc((var(--ig-h) - var(--ig-crop-top)) * var(--ig-fit) * 1px);
  margin-inline: auto;
  overflow: hidden;
  background: var(--c-field);
}
.ig-embed iframe {
  position: static; display: block;
  width: var(--w-ig); max-width: none; min-width: 0;
  /* 關鍵：iframe 自己就設成 --ig-h，不是先給一個大高度再用外框裁。
       想裁掉白條 → --ig-h 停在白條之前（例如 355），那條就不會被畫出來。
       想完整顯示 → --ig-h ＝ IG 回報的總高（.is-auto，由 ig.js 填），
                     crop 為 0，整則貼文原樣呈現。 */
  height: calc(var(--ig-h) * 1px);
  zoom: var(--ig-fit);
  margin-top: calc(var(--ig-crop-top) * -1px);
  /* 把左右多出來的黑邊往外推，讓畫面置中對齊外框（橫式時是 0，不影響） */
  margin-left: calc((var(--ig-pic-w) - 540) / 2 * 1px);
  border: 0; overflow: hidden;
  background: var(--c-field);
}

/* ---------- 影片封面（點了才播） ----------
   設定「影片預覽圖」之後才會出現：一進頁面看到的是預覽畫面而不是一片黑，
   按下去才載入 IG 的 iframe（設計師 0828 第 10 點）。 */
.ig-embed.has-cover { position: relative; }
.video-cover {
  position: absolute; inset: 0; z-index: 3;
  appearance: none; border: 0; padding: 0; margin: 0;
  background: var(--c-field);
  cursor: pointer; overflow: hidden;
  display: block; width: 100%; height: 100%;
}
.video-cover__img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.video-cover__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transition: transform var(--dur-hover) var(--ease);
}
.video-cover__play svg { width: clamp(48px, 5vw, 68px); height: auto; }
.video-cover:hover .video-cover__play { transform: scale(1.06); }
.video-cover:focus-visible { outline: 2px solid var(--c-brand); outline-offset: -2px; }
.ig-embed.is-playing .video-cover { display: none; }

@media (prefers-reduced-motion: reduce) {
  .video-cover__play { transition: none; }
  .video-cover:hover .video-cover__play { transform: none; }
}

/* 阿嬤的家的創辦人影片：寬度用 --ig-width-about */
.ig-embed.is-wide { --ig-fit: calc(var(--ig-width-about) / var(--ig-pic-w)); }
.video-embed.is-wide { max-width: calc(var(--ig-width-about) * 1px); }

/* 沒有 JS 時的保險：窄視窗直接把倍率壓到 1，不會溢出。
   有 JS 的時候 ig.js 會算出更精準的倍率（可以小於 1，跟著欄寬一起縮）。 */
@media (max-width: 620px) {
  .ig-embed, .ig-embed.is-wide { --ig-fit: 1; }
}

/* 直接上傳的影片檔：設計稿那個乾淨的 16:9 播放器，沒有任何外站介面 */
.video-embed--file { background: #000; }
.video-embed--file video { width: 100%; height: 100%; object-fit: contain; background: #000; }

/* 抓不到嵌入時的退路 */
.video-embed--fallback {
  aspect-ratio: auto; text-align: center; padding: 20px;
  border: 1.5px dashed var(--c-placeholder); font-size: var(--fs-small);
}
.video-embed--fallback a { color: var(--c-brand); }

[id] { scroll-margin-top: calc(var(--h-header) + 20px); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.cta-button {
  /* 文字不換行：「2026藝術博覽會」在 360px 的螢幕上會被拆成兩行，
     按鈕高度多出一截，首頁的標語就被往上頂、壓到線稿上。 */
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  border: 1.5px solid var(--c-brand); color: var(--c-brand);
  padding: clamp(12px, 1.1vw, 22px) clamp(24px, 2.4vw, 46px);
  font-size: var(--fs-small); letter-spacing: .08em;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.cta-button:hover { background: var(--c-brand); color: #fff; }

/* 展覽頁最下面那顆大按鈕：設計稿實測 543 × 137、圓角 36，
   裡面是橘色 ma 標誌 + 文字 + 小三角。 */
.cta-button--lg {
  border-radius: var(--radius-cta);
  min-width: clamp(240px, 28.3vw, 543px);
  min-height: clamp(52px, 7.14vw, 137px);
  gap: clamp(12px, 1.5vw, 29px);
  padding-inline: clamp(20px, 2.4vw, 46px);
  font-size: var(--fs-sub);
}
.cta-button__logo {
  height: clamp(28px, 2.86vw, 55px); width: auto; flex: none;
  transition: filter var(--dur-hover) var(--ease) calc(var(--dur-hover) * .4);
}
/* hover 變成橘底白字時，橘色的 ma 也要跟著轉白 */
.cta-button--lg:hover .cta-button__logo { filter: brightness(0) invert(1); }
.cta-button__arrow { font-size: .7em; line-height: 1; }

/* ma 輔助圖形：從左緣出血，壓在兩個區塊的交界線上。
   說明檔註明「此輔助圖形會做為動態」→ 這裡做成慢速上下浮動（浮標）。
   素材是 assets/img/deco-ma.svg，尺寸與幅度都在 _tokens.css 調。 */
.deco-ma { position: relative; height: 0; z-index: 2; }
.deco-ma img,
.deco-ma .img-slot {
  position: absolute; left: 0; top: 0;
  width: var(--size-deco-ma); height: auto;
  pointer-events: none;
  transform: translateY(var(--shift-deco-ma));
}
.deco-ma img {
  animation: ama-float var(--dur-deco-ma) ease-in-out infinite;
  will-change: transform;
}

@keyframes ama-float {
  0%, 100% { transform: translateY(var(--shift-deco-ma)) rotate(0deg); }
  50%      { transform: translateY(calc(var(--shift-deco-ma) - var(--float-deco-ma))) rotate(-1.1deg); }
}

/* ==========================================================================
   17 動態（客戶簡報「阿嬤的家 動態建議」）
   數值全部在 _tokens.css。整組都吃系統的「減少動態效果」設定 ——
   使用者開了那個設定，下面所有動畫都會停在最終狀態，不會有任何位移。
   ========================================================================== */

/* ---------- 17-1 開場：白底 + 中央 ma 標誌（首頁） ---------- */
.intro {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-bg);
  animation: intro-out var(--dur-intro) var(--ease)
             calc(var(--dur-intro) + var(--hold-intro)) forwards;
}
.intro__logo {
  width: var(--size-intro);
  height: auto;
  animation: intro-in var(--dur-intro) var(--ease) both;
}
/* 開場播放中鎖住捲動，播完 intro.js 會把 class 拿掉 */
html.is-intro, html.is-intro body { overflow: hidden; }

@keyframes intro-in {
  from { opacity: 0; transform: scale(.94) translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes intro-out {
  to { opacity: 0; visibility: hidden; }
}

/* ---------- 17-2 捲動漸出 ----------
   只有在 motion.js 判斷「要做動畫」時才會加 .has-reveal，
   所以沒有 JS、或使用者要求減少動態時，內容一開始就是正常顯示的
   （不會發生「JS 壞掉導致整頁空白」）。 */
html.has-reveal .reveal {
  opacity: 0;
  transform: translateY(var(--rise-reveal));
  transition: opacity var(--dur-reveal) var(--ease),
              transform var(--dur-reveal) var(--ease);
  will-change: opacity, transform;
}
html.has-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ⚠ 千萬不要把 .site-header 寫進任何重設 position / z-index 的規則 ——
   header 是 position:sticky; z-index:100，被改成 relative/1 就會掉到 main 底下，
   漢堡選單會被頁面內容蓋住（v0.8.0 出過這個包）。 */

/* 手機螢幕窄，邊緣的裝飾很容易壓到文字 —— 直接不顯示 */
@media (max-width: 860px) {
}

/* ---------- 17-4 可以點的東西：hover 動態（簡報第 2 項，橘色為主） ----------
   共用一條「橘色底線由左往右展開」的語彙，滑開時往回收。
   用 scaleX 做，不會像改 width 那樣造成重排。 */
.link-wipe,
.post-card__title a,
.sidebar__list a,
.sidebar__tags a,
.nav-drawer__list > li > a,
.about-anchors a,
.exh-map__link a {
  position: relative;
  display: inline-block;
  background-image: linear-gradient(var(--c-brand), var(--c-brand));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.link-wipe:hover,
.post-card__title a:hover,
.sidebar__list a:hover,
.sidebar__tags a:hover,
.nav-drawer__list > li > a:hover,
.about-anchors a:hover,
.exh-map__link a:hover,
.link-wipe:focus-visible,
.post-card__title a:focus-visible,
.sidebar__list a:focus-visible,
.nav-drawer__list > li > a:focus-visible {
  background-size: 100% 1.5px;
  color: var(--c-brand);
}
/* 這幾個原本就有自己的底線寫法，交給上面的動態處理就好 */
.about-anchors a { border-bottom: 0; padding-bottom: 6px; }
.about-anchors a.is-active { background-size: 100% 1.5px; }
.exh-map__link a { text-decoration: none; }

/* Read more：左邊那條橘色短棒長高、箭頭往右滑一點 */
.read-more { transition: gap var(--dur-hover) var(--ease); }
.read-more::before { transition: transform var(--dur-hover) var(--ease); transform-origin: center; }
.read-more:hover { gap: 16px; }
.read-more:hover::before { transform: scaleY(1.45); }

/* CTA 大按鈕：底色由左往右刷過去，ma 標誌與三角一起微動 */
.cta-button {
  position: relative; overflow: hidden; isolation: isolate;
  /* 延遲一點再變白字，等橘色底刷到文字位置才換，中間不會有一瞬間看不到字 */
  transition: color var(--dur-hover) var(--ease) calc(var(--dur-hover) * .4);
}
.cta-button::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--c-brand);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-hover) var(--ease);
}
.cta-button:hover::before,
.cta-button:focus-visible::before { transform: scaleX(1); }
.cta-button:hover { background: none; }   /* 交給上面的 ::before */
.cta-button__arrow { transition: transform var(--dur-hover) var(--ease); }
.cta-button:hover .cta-button__arrow { transform: translateX(5px); }

/* 展場 tab：底線從中間往兩邊展開 */
.venues__tab { position: relative; border-bottom-color: transparent; }
.venues__tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--c-brand);
  transform: scaleX(0); transition: transform var(--dur-hover) var(--ease);
}
.venues__tab:hover::after { transform: scaleX(.55); }
.venues__tab[aria-selected="true"]::after { transform: scaleX(1); }

/* Galleries 的 logo、策展人照片：滑過去輕輕浮起來 */
.galleries__item img,
.curator__photo {
  transition: transform var(--dur-hover) var(--ease), opacity var(--dur-hover) var(--ease);
}
.galleries__item a:hover img { transform: translateY(-4px) scale(1.04); }

/* 文章卡片：圖滑過去慢慢放大（外框固定，不會撐版）。
   只挑「直接包住縮圖的那個連結」，不要動到標題與 Read more。 */
.post-card > a { display: block; overflow: hidden; }
.post-card__thumb { transition: transform 1s var(--ease); }
.post-card > a:hover .post-card__thumb { transform: scale(1.035); }

/* 頁尾社群 icon */
.site-footer__social a { transition: transform var(--dur-hover) var(--ease); }
.site-footer__social a:hover { transform: translateY(-3px); }

/* 使用者開了「減少動態效果」：全部停用，內容直接就位 */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  html.has-reveal .reveal { opacity: 1; transform: none; transition: none; }
  .deco-ma img { animation: none; }
  .home-splash__slide { transition: none; }
  .post-card > a:hover .post-card__thumb,
  .galleries__item a:hover img { transform: none; }
}

/* ---------- 08 首頁 ---------- */
.home-splash {
  position: relative;
  background: var(--c-cream);
}

/* 兩張主視覺交叉淡入淡出（簡報第 4 項）。
   第一張是 static，負責撐出整塊高度；其餘絕對定位疊在上面。 */
.home-splash__slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-slide) var(--ease); }
.home-splash__slide.is-first { position: static; }
.home-splash__slide.is-active { opacity: 1; }
.home-splash__slide img,
.home-splash__slide picture { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.home-splash__slide.is-first img,
.home-splash__slide.is-first picture { height: auto; }

/* 主視覺：桌機與手機各一張（<picture> 換圖，不是輪播）。
   圖片以原始比例完整顯示——設計稿下方已經預留了放標語的空間，
   所以這裡不裁切，標語直接疊上去。 */
.home-splash__stage { position: relative; width: 100%; overflow: hidden; }
.home-splash__art { display: block; width: 100%; }
.home-splash__art img { width: 100%; height: auto; display: block; }

/* 進場：畫面慢慢推近，像走進老屋。
   只在首頁播一次，之後就停在放大後的狀態不再動。
   幅度與長度是 token：--zoom-home / --dur-zoom-home。 */
.home-splash__stage { transform-origin: 50% 62%; }
.home-splash__stage.is-zooming {
  animation: amadejia-walk-in var(--dur-zoom-home) var(--ease-zoom) both;
}
@keyframes amadejia-walk-in {
  from { transform: scale(1); }
  to   { transform: scale(var(--zoom-home)); }
}
@media (prefers-reduced-motion: reduce) {
  .home-splash__stage.is-zooming { animation: none; transform: none; }
}

/* 標語疊在圖片下緣預留的那條空間上 */
.home-splash__words {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--home-text-bottom);
  padding-inline: var(--pad-x);
  text-align: center;
  pointer-events: none;
}
.home-splash__words a { pointer-events: auto; }
.home-splash__slogan { width: min(600px, 62vw); height: auto; margin: 0 auto; }
.home-splash__quote { font-size: var(--fs-sub); letter-spacing: .1em; font-weight: 500; }
.home-splash__sub { font-size: var(--fs-small); color: var(--c-ink-2); letter-spacing: .08em; margin-top: 8px; }
.home-splash__rule { width: 46px; height: 1px; background: var(--c-ink); margin: 18px auto; }
.home-splash__en { font-family: var(--f-en); font-weight: 600; font-style: italic; font-size: var(--fs-small); line-height: 1.9; letter-spacing: .05em; }

/* 首頁下方的展覽按鈕（客戶 0929 需求）。
   沿用展覽頁那顆 .cta-button--lg，同一個元件不另外做一顆。
   標語區塊是 bottom 定位的，所以把按鈕放在最後面，整塊會自己往上長；
   --home-text-bottom-cta 控制的是「按鈕下緣」離主視覺底部多遠。 */
.home-splash__words--cta { bottom: var(--home-text-bottom-cta); }
.home-cta { margin-top: var(--gap-home-cta); }
/* 有按鈕時標語改成跟著螢幕縮。
   原本是 min(600px, 62vw) —— 在 968px 以上就固定 600px 不再變，可是主視覺
   留給文字的空白是跟著高度等比例縮的（約佔 46%）。所以在 1024〜1700 這一段
   「標語不縮、空白變小、又多了一顆按鈕」，整塊就會頂到線稿上。
   1920 時 31vw ≈ 595px，跟原本的 600px 幾乎一樣，看不出差別。 */
.home-splash__words--cta .home-splash__slogan { width: min(600px, 31vw); }

/* 手機版一樣疊字，只是把標語放寬一點、離底部近一點。
   要微調位置改 _tokens.css 的 --home-text-bottom / --home-text-bottom-m。 */
@media (max-width: 768px) {
  .home-splash__words { bottom: var(--home-text-bottom-m); }
  .home-splash__words--cta { bottom: var(--home-text-bottom-cta-m); }
  .home-cta { margin-top: var(--gap-home-cta-m); }
  .home-splash__slogan { width: min(600px, 78vw); }
  /* 有按鈕時標語縮一點 —— 手機的主視覺只留約 48% 的空白給文字，
     標語 + 按鈕疊起來會頂到線稿下緣（實測 360px 時會壓到盆栽）。 */
  .home-splash__words--cta .home-splash__slogan { width: min(600px, 68vw); }
}

/* ---------- 09 展覽 ---------- */
.exh-intro { text-align: center; }
.exh-intro__zh { font-size: var(--fs-h2); font-weight: 500; letter-spacing: .14em; }
.exh-intro__en { font-family: var(--f-en); font-size: var(--fs-h2); letter-spacing: var(--ls-en-title); font-weight: 500; margin-top: 4px; }
.exh-intro__sub { font-family: var(--f-en); font-size: var(--fs-sub); letter-spacing: .1em; font-weight: 600; margin-top: var(--sp-block); }
.exh-intro__status { font-family: var(--f-en); font-size: var(--fs-sub); letter-spacing: .1em; font-weight: 600; color: var(--c-brand); margin-top: 6px; }
.exh-intro__body { margin-top: var(--sp-block); text-align: justify; color: var(--c-ink-2); }

.exh-theme { text-align: center; }
.exh-theme__title { font-size: var(--fs-h2); letter-spacing: .08em; margin-bottom: var(--sp-block); font-weight: 500; }
.exh-theme__title em { font-style: normal; color: var(--c-brand); }
.exh-theme__body { text-align: justify; color: var(--c-ink-2); margin-bottom: var(--sp-block); }

.curator { text-align: center; margin-bottom: var(--sp-card); }
.curator:last-child { margin-bottom: 0; }
.curator__photo,
.curator .img-slot--round { width: clamp(120px, 14.6vw, 280px); height: clamp(120px, 14.6vw, 280px); border-radius: 50%; object-fit: cover; margin: 0 auto 20px; }
.curator__name { font-size: var(--fs-h3); font-weight: 500; margin-bottom: 6px; }
.curator__tagline { font-size: var(--fs-small); color: var(--c-ink-2); margin-bottom: var(--sp-block); }
.curator__bio { text-align: justify; color: var(--c-ink-2); }

.exh-map { display: block; }
.exh-map img { width: 100%; }

/* 真的 Google 地圖：比例跟原本的靜態地圖一致，換過去版面不會跳。
   黑白處理用 CSS filter，**不會擋住觸控與拖曳**（filter 只影響畫面，不吃事件），
   所以地圖照樣可以拉、可以放大。想調濃淡改 _tokens.css 的 --filter-map。
   滑鼠移上去 / 鍵盤 focus 會恢復彩色，方便真的要看路的時候。 */
.exh-map--live iframe {
  display: block; width: 100%; border: 0;
  aspect-ratio: var(--ratio-map);
  background: var(--c-field);
  filter: var(--filter-map);
  transition: filter var(--dur-map-color) var(--ease);
}
.exh-map--live:hover iframe,
.exh-map--live:focus-within iframe { filter: none; }

/* 靜態地圖截圖（沒填嵌入地圖時的備案）也一起黑白 */
.exh-map img { filter: var(--filter-map); transition: filter var(--dur-map-color) var(--ease); }
.exh-map:hover img { filter: none; }

@media (prefers-reduced-motion: reduce) {
  .exh-map--live iframe, .exh-map img { transition: none; }
}
.exh-map__link {
  text-align: center; margin: 14px 0 0;
  font-family: var(--f-en); font-size: var(--fs-meta);
  letter-spacing: .06em;
}
.exh-map__link a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 768px) {
  /* 手機上 1920/600 太扁，地圖會小到看不到東西 */
  .exh-map--live iframe { aspect-ratio: var(--ratio-map-m); }
}

.venues__tabs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(10px, 1vw, 20px) clamp(20px, 3vw, 58px);
  margin-bottom: var(--sp-block); padding: 0;
}
.venues__tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--f-zh); font-size: var(--fs-sub); color: var(--c-brand);
  padding: 4px 2px; border-bottom: 2px solid transparent; letter-spacing: .04em;
}
.venues__tab[aria-selected="true"] { border-bottom-color: var(--c-brand); font-weight: 700; }
.venues__panel[hidden] { display: none; }
.venues__images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.venues__images img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
/* 整張圖版本：不裁切、不套比例，客戶做好的合成圖原樣呈現 */
.venues__full { width: 100%; max-width: var(--w-narrow); height: auto; margin-inline: auto; display: block; }
.venues__panel .img-slot--wide { max-width: var(--w-narrow); margin-inline: auto; }
.venues__caption {
  background: var(--c-brand); color: #fff; text-align: center;
  min-height: var(--h-caption);
  display: flex; align-items: center; justify-content: center;
  padding: 8px 16px; font-size: var(--fs-small); font-weight: 500;
}
.venues__body { margin-top: var(--sp-block); color: var(--c-ink-2); }

/* Galleries logo 牆

   用 flex 不用等寬的 grid：設計稿上五個 logo 的**間距**是一樣的，
   每個 logo 就是它自己的大小 —— 等寬格子會讓比較窄的 ROSSI ROSSI
   左右各空一塊，看起來跟旁邊的疏密不一致（客戶反映「旁邊空空的」）。

   justify-content 用 center 而不是 space-between：只有一兩家畫廊的時候，
   space-between 會把它們推到左右兩端，很怪。center + 固定間距在任何數量
   下都正常，數量多到排不下就自己換行。 */
.galleries__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: var(--gap-gallery);
  row-gap: clamp(24px, 3.6vw, 70px);
}
/* flex: 0 0 auto —— 每個 logo 就是它自己的大小，不被拉伸也不被壓縮。
   （試過用 flex-shrink 自動縮：flex 是照「宣告的上限寬」而不是「實際算出來
   的寬」去分配縮放量，結果被高度擋住的那幾個會被多縮，間距就變得不平均。
   正確的解法是讓尺寸本來就排得下 —— 見 _tokens.css 的上限值。） */
.galleries__item {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  min-height: var(--h-gallery-logo);
}
/* 有填外部連結的 logo 會被包一層 <a>。那個 <a> 是 flex item，寬度會先照圖片的
   原始寬度算，超過欄寬就被壓成滿欄寬；裡面的 <img> 被 max-width 限制之後比它窄，
   又因為 img 是 display:block，就靠在 <a> 的左邊 —— 結果只有「原圖很寬」的那個
   logo（PTT SPACE）沒有置中，其他三個因為原圖比欄窄所以看起來正常。
   把 <a> 也變成置中的盒子就一致了。 */
.galleries__item > a {
  display: flex; align-items: center; justify-content: center;
  max-width: 100%;
}
/* 高度與寬度都要有上限。只限高度的話，很扁的字標（PTT SPACE 約 13:1）
   會撐到整個欄寬、左右貼邊；只限寬度的話，接近方形的（ROSSI ROSSI）又會過大。
   兩個一起限，每個 logo 才會落在同一個視覺框裡。 */
.galleries__item img {
  max-height: var(--h-gallery-logo);
  max-width: var(--w-gallery-logo);
  width: auto; height: auto;
  object-fit: contain;
}
.galleries__placeholder {
  font-family: var(--f-en); font-size: clamp(20px, 2.3vw, 44px); font-weight: 600;
  color: var(--c-placeholder); letter-spacing: .04em;
}
.exh-cta { text-align: center; padding-bottom: var(--sp-section); }

/* ---------- 10 阿嬤的家 ---------- */
.about-anchors { display: flex; justify-content: center; gap: var(--gap-anchors); padding: var(--sp-section) 0; }
.about-anchors a {
  color: var(--c-brand); font-size: var(--fs-anchor); letter-spacing: .06em;
  border-bottom: 1.5px solid transparent; padding-bottom: 4px;
}
.about-anchors a:hover, .about-anchors a.is-active { border-bottom-color: var(--c-brand); }

.about-image { margin: 0 auto var(--sp-block); max-width: var(--w-narrow); width: 100%; }
.about-body { color: var(--c-ink-2); }

/* 三個特色：設計稿實測整排寬 1214（≈ 主欄寬），不是置中文字欄的 1055 */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.4vw, 66px); margin-top: var(--sp-card); max-width: var(--w-narrow); margin-inline: auto; }
.feature { text-align: center; }
.feature__icon { height: var(--size-feature-icon); width: auto; margin: 0 auto var(--gap-feature-icon); }
.feature .img-slot--icon { width: var(--size-feature-icon); height: var(--size-feature-icon); margin: 0 auto var(--gap-feature-icon); }
.feature__title { color: var(--c-brand); font-size: var(--fs-small); margin-bottom: 10px; letter-spacing: .06em; }
/* 文字靠左，但整塊置中且比欄位窄一點——設計稿是這樣排的 */
.feature__body { font-size: var(--fs-meta); color: var(--c-ink-2); line-height: 1.9; text-align: justify; max-width: 20em; margin-inline: auto; }

.founder__photo { max-width: var(--w-narrow); width: 100%; margin: 0 auto var(--sp-block); }
.founder__name { text-align: center; font-size: var(--fs-h3); font-weight: 500; margin-bottom: 20px; }
.founder__bio { color: var(--c-ink-2); margin-bottom: var(--sp-block); }

/* ---------- 11 活動報導列表 ---------- */
.events-layout {
  display: grid; grid-template-columns: var(--w-sidebar) minmax(0, 1fr);
  gap: var(--gap-sidebar); padding-block: var(--sp-section);
}
.post-card { margin-bottom: var(--sp-card); }
.post-card:last-child { margin-bottom: 0; }
.post-card__date {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--f-en); font-size: var(--fs-meta); color: var(--c-ink-3);
  margin-bottom: 12px; letter-spacing: .04em;
}
.post-card__thumb { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; margin-bottom: 20px; }
.post-card__title { font-size: var(--fs-h1); font-weight: 500; margin-bottom: 14px; letter-spacing: .01em; }  /* 設計稿是中等字重，不是粗體 */
.post-card__excerpt { color: var(--c-ink-2); margin-bottom: 24px; }
.post-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.read-more {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--c-brand); font-family: var(--f-en); font-weight: 600;
  font-size: var(--fs-small); letter-spacing: .04em;
}
.read-more::before { content: ""; width: 4px; height: 1.05em; background: var(--c-brand); display: block; }
.post-card__tags { font-size: var(--fs-meta); color: var(--c-ink-3); }

/* ---------- 12 文章內頁 ---------- */
.breadcrumb { background: var(--c-brand); color: #fff; }
.breadcrumb__inner {
  max-width: calc(var(--w-page) + var(--pad-x) * 2); margin-inline: auto; padding-inline: var(--pad-x);
  min-height: var(--h-breadcrumb); display: flex; align-items: center;
  font-family: var(--f-en); font-size: var(--fs-sub); letter-spacing: .03em;
}
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb .sep { margin-inline: 10px; opacity: .8; }

.entry__thumb { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; margin-bottom: 24px; }
.entry__title { font-size: var(--fs-h1); font-weight: 500; margin-bottom: 24px; }
.entry__content { color: var(--c-ink-2); }
.entry__content img { margin: var(--sp-block) auto; }
.entry__content h2 { font-size: var(--fs-h3); color: var(--c-ink); margin: var(--sp-block) 0 12px; }
.entry__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  flex-wrap: wrap; margin-top: var(--sp-card);
  font-size: var(--fs-meta); color: var(--c-ink-3);
}
.entry__date { display: flex; align-items: center; gap: 7px; font-family: var(--f-en); }

/* ---------- 13 側欄 ---------- */
.sidebar { font-size: var(--fs-small); }
.sidebar__search { position: relative; margin-bottom: var(--sp-block); }
.sidebar__search input[type="search"] {
  width: 100%; background: var(--c-field); border: 0;
  padding: clamp(10px, .95vw, 18px) 44px clamp(10px, .95vw, 18px) clamp(12px, 1vw, 20px);
  font-family: var(--f-en); font-size: var(--fs-small); letter-spacing: .1em; color: var(--c-ink);
}
.sidebar__search button {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: 4px; color: var(--c-ink-2);
}
.sidebar__slogan { font-size: var(--fs-h3); font-weight: 700; line-height: 1.9; margin-bottom: var(--sp-card); color: var(--c-ink); }  /* 實測 23px */
.sidebar__block { margin-bottom: var(--sp-card); }
.sidebar__title { color: var(--c-brand); font-size: var(--fs-sidebar-t); font-weight: 700; margin-bottom: 14px; }
.sidebar__list { list-style: none; margin: 0; padding: 0; }
.sidebar__list li { margin-bottom: 8px; color: var(--c-ink-2); line-height: 1.7; }
.sidebar__tags { display: flex; flex-direction: column; gap: 6px; color: var(--c-ink-2); }

/* ---------- 14 分頁 ---------- */
.pagination { display: flex; justify-content: center; gap: clamp(10px, 1vw, 20px); margin-top: var(--sp-card); }
.pagination .page-numbers {
  font-family: var(--f-en); font-size: var(--fs-sub); color: var(--c-ink-3);
  padding: 4px 6px; letter-spacing: .04em;
}
.pagination .page-numbers.current { color: var(--c-ink); font-weight: 600; }
.pagination .page-numbers:hover { color: var(--c-brand); }

/* ---------- 15 空狀態 ---------- */
.state { text-align: center; padding-block: clamp(80px, 14vw, 240px); }
.state__title { font-size: var(--fs-h2); margin-bottom: 16px; letter-spacing: .06em; }
.state__body { color: var(--c-ink-2); margin-bottom: var(--sp-block); }

/* ---------- 16 響應式 ---------- */
@media (max-width: 1024px) {
  /* 這裡原本固定壓成 3 欄，5 家畫廊就會變成 3 + 2 兩排。
     現在寬度是跟著 vw 走的，本來就排得下一排，不用特別處理欄數。 */
}

@media (max-width: 860px) {
  .events-layout { grid-template-columns: 1fr; gap: 0; }
  .sidebar { order: 2; margin-top: var(--sp-card); border-top: 1px solid var(--c-line); padding-top: var(--sp-block); }
  .events-main { order: 1; }
  .features { grid-template-columns: 1fr; gap: 40px; max-width: 420px; margin-inline: auto; }
  .feature__body { text-align: justify; }
  .sidebar__slogan, .sidebar__block { margin-bottom: var(--sp-block); }
}

@media (max-width: 768px) {
  /* 手機版漢堡選單 —— 整片偏白的半透明遮罩蓋住整個網頁，選項上下左右置中。
     header 的 z-index 是 100、遮罩是 99，所以 logo 跟關閉的 X 會浮在遮罩上面，
     隨時點得到。遮罩濃度改 --scrim-nav。 */
  .nav-drawer {
    position: fixed;
    inset: 0;
    min-width: 0;
    padding: var(--h-header) 24px 40px;   /* 上方留出 header 的高度，字不會被壓到 */
    background: var(--scrim-nav);
    box-shadow: none;
    overflow-y: auto;                     /* 螢幕很矮（橫拿）時選項還是滑得到 */
  }
  /* display:block 會讓置中失效，打開時要改成 flex */
  .nav-drawer[data-open="true"] {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nav-drawer__list { width: 100%; }

  /* 手機版遮罩後面就是乾淨的白，不放線稿（客戶指定）。
     透過遮罩隱約看到下面的頁面是可以接受的。 */
  .nav-drawer__bg { display: none; }

  /* 分隔線改成置中的短線 */
  .nav-drawer__list > li + li { border-top: 0; }
  .nav-drawer__list > li + li::before {
    content: ""; display: block;
    width: 106px; height: 1px; margin: 0 auto;
    background: var(--c-line);
  }
  .nav-drawer__list a,
  .nav-drawer__list .is-disabled { padding: 14px 4px; }
  .nav-drawer__list > li > a,
  .nav-drawer__list > li > .is-disabled {
    font-size: 19px; letter-spacing: .34em; text-indent: .34em; font-weight: 500;
  }
  .nav-drawer__list .lv1 {
    font-size: 19px; letter-spacing: .24em; text-indent: .24em; padding: 14px 4px 8px;
  }
  .nav-drawer__years a,
  .nav-drawer__years .is-disabled { font-size: 17px; padding: 5px 0; letter-spacing: .14em; text-indent: .14em; }
  .nav-drawer__years { margin-bottom: 14px; }

  .venues__images { grid-template-columns: 1fr; }
  .venues__tabs {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    gap: 22px; padding-bottom: 10px; -webkit-overflow-scrolling: touch;
  }
  .venues__tab { white-space: nowrap; }

  /* ── 手機版展覽場地：自動輪播 ────────────────────────────────
     桌機是「點標題換下面的內容」，手機改成一站一站自動滑過去，
     手指也可以自己左右滑。

     做法是把 track 變成橫向的捲動容器、每個面板剛好一個螢幕寬，
     再用 scroll-snap 讓它一定停在整張的位置 —— 滑動與慣性都交給
     瀏覽器原生處理，比自己寫 transform 順，iOS 上也不會卡。

     高度由 JS 設成「目前這一站」的高度（各站文字長短不一，不設的話
     矮的那幾站底下會空一大塊），所以這裡要 overflow-y: hidden，
     避免高度變化的瞬間冒出直向捲軸。

     ⚠ .venues__panel[hidden] 的 display:none 在輪播模式下會擋住整個
     面板，所以 hidden 屬性是由 JS 進出輪播時加上／拿掉的，不在 CSS
     裡硬蓋 —— 這樣沒有 JS 的情況下仍然是原本能用的 tab。 */
  .venues__track[data-carousel] {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transition: height var(--dur-venues-slide) var(--ease);
  }
  .venues__track[data-carousel]::-webkit-scrollbar { display: none; }
  .venues__track[data-carousel] > .venues__panel {
    flex: 0 0 100%;
    max-width: 100%;
    scroll-snap-align: start;
  }

  /* 目前在第幾站：標題底線之外再給一個明顯一點的狀態，
     因為手機上標題列要橫向捲動，使用者不一定看得到底線。 */
  .venues__tabs[data-carousel-tabs] .venues__tab[aria-selected="true"] { opacity: 1; }
  .venues__tabs[data-carousel-tabs] .venues__tab { opacity: .55; transition: opacity var(--dur-hover) var(--ease); }
  /* 手機版 Galleries：一排一個（設計稿）。

     並排時每個 logo 只剩不到 165px 寬，像 ROSSI ROSSI 這種接近方形的會被
     壓得很小；各家長寬比差很多，並排起來左右高低不齊。

     logo 的上限在這裡改成固定值 —— 桌機用的 vw 換算到 390px 只剩 60px，
     太小；設計稿上手機的 logo 大約 180px 寬。
     min-height 吃的是同一個 --h-gallery-logo，所以四排的節奏會一致。 */
  .galleries__grid {
    flex-direction: column;
    row-gap: clamp(44px, 14vw, 72px);
  }
  .galleries__item {
    width: 100%;
    --w-gallery-logo: 180px;
    --h-gallery-logo: 48px;
  }

  /* 下面那顆「更多活動報導」在設計稿上幾乎是滿版的，
     桌機的 min-width 換算到手機只剩 240px，偏窄。 */
  .cta-button--lg { min-width: min(86%, 420px); }

  .post-card__foot, .entry__foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .about-anchors { gap: 40px; }
}

@media (max-width: 480px) {
  .site-footer__contact { display: flex; flex-direction: column; gap: 3px; }
  .site-footer__contact .sep { display: none; }
}