/*
Theme Name: arch-studio
Theme URI: https://zoomindesigntw.com
Author: ZOOM IN DESIGN
Description: Portfolio theme for ZOOM IN DESIGN — inspired by Cargo Template 4
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: arch-studio
*/

/* ── Reset & Base ─────────────────────────────────────── */
/* 字型完全使用 Noto Sans TC（functions.php 從 Google Fonts 載入），
   舊有 FFMetaPro / MSYaHei / FZLTCXHJW 的 @font-face 已於 2026-05-09 清除（死樣式） */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 12px;
  /* 永遠保留 vertical scrollbar 位置，避免內容短時 scrollbar 消失導致 viewport 寬度變化、
     讓 .site-wrapper::before 70% 分隔線位置跑掉（gallery view ↔ default view 切換 layout shift） */
  scrollbar-gutter: stable;
}

body {
  font-family: 'Noto Sans TC', sans-serif;
  background-color: #ffffff;
  color: #898989;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

/* 標題統一使用思源黑體 300（細體） */
h1, h2, h3, h4, h5, h6,
.nav-logo,
.page-section-title,
.project-title,
.project-single-title,
.info-panel .studio-name,
.info-panel .designer-name,
.information-section h2 {
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 300;
  color: #000000;
}

a {
  color: inherit;
  text-decoration: none;
}

strong, b {
  font-weight: 400;
}

a:hover {
  text-decoration: underline;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ── Layout — Two Column ──────────────────────────────── */
/* 整頁共用 body 主滾動條（位於視窗最右側）；右欄用 sticky 跟隨 */
.site-wrapper {
  display: flex;
  align-items: flex-start;
  padding: 0;
  gap: 0;
  position: relative;
}

/* 中間分隔線：跨整個 site-wrapper 高度（頁面滿高），頂部與底部各留 10px 白邊 */
.site-wrapper::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 70%;
  width: 1px;
  background-color: #898989;
  pointer-events: none;
  z-index: 1;
}

/* (中間分隔線改為 .site-wrapper::before 跨整個頁面高度) */

/* Left: 70% 寬，自然撐高（隨頁面滾動）；頂部文字往下 2px */
.col-left {
  flex: 0 0 70%;
  padding: 11px 13px 13px;
  min-width: 0;
}

/* Right: 30% 寬，sticky 固定於視窗頂部；
   高度永遠等於 100vh（讓 info-panel 的 flex margin-top:auto 能把 copyright 推到底）；
   內容過長時（CV 模式）內部捲動；頂部文字往下 2px */
.col-right {
  flex: 0 0 30%;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  /* padding-bottom 移到 .info-panel，避免 overflow scroll 容器底部留白消失（瀏覽器已知行為） */
  padding: 11px 13px 0;
  /* 隱藏內部 scrollbar（保留滾動功能：滑鼠滾輪／觸控板仍可使用） */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE / Edge legacy */
}
/* Chrome / Safari / Edge：隱藏 scrollbar */
.col-right::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* 頁面切換動畫（只動右欄、左欄保持不動）：
   - Information 頁面 → 右欄從右側滑入
   - Research 頁面 → 右欄從右側滑入（2026-05-20 加：移除 SPA 後用 page-load animation 模擬 slide-in）
   - 主頁（home）→ 右欄從左側滑入
   兩者方向相反、形成往返切換的視覺感受 */
body.page-template-page-information .col-right,
body.page-template-page-research .col-right,
body.page-id-4 .col-right {
  animation: archSlideInRight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}


/* 主頁初始載入不播動畫（避免使用者點左欄 SELECTED WORKS reload 進主頁時看到滑入動畫）；
   SPA swap 進主頁時用 .col-right.spa-enter-left 控制動畫，跟此 rule 無關 */

@keyframes archSlideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes archSlideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* SPA 模式右欄重播動畫：JS 透過加上 .spa-enter-right / .spa-enter-left 觸發；
   !important 用來覆蓋 body.home / body.page-template-page-information 上的初始載入動畫，
   因為 SPA swap 不會更新 body class（避免畫面閃爍與其他副作用） */
.col-right.spa-enter-right {
  animation: archSlideInRight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}
.col-right.spa-enter-left {
  animation: archSlideInLeft 0.8s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

/* 2026-05-20 Marco 偏好：/research/ 頁面點 01 Essay / 02 Media **切換分類時**不要 slide-in 動畫，
   但**進入 /research/ 時要保留** slide-in 動畫。
   精準做法：main.js 在 toc click 時給 .col-right 加 .toc-clicked class；
            CSS 只在 .toc-clicked 存在時禁動畫；進入時 col-right 無此 class，動畫正常。
   範圍：全 viewport（手機 + iPad + 桌面三尺寸都禁，Marco 2026-05-20 補要求桌面也禁） */
.col-right.toc-clicked,
.col-right.toc-clicked.spa-enter-right,
.col-right.toc-clicked.spa-enter-left {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  view-transition-name: none !important;
}

/* CV 模式下：最後一個 section（Certifications）與 ← Close 間距 40px
   （margin collapse 取較大值，所以這裡直接設 40px） */
.info-cv .cv-link {
  margin-top: 40px;
}

/* ── Research 模式右欄（多篇文章串接） ──────────────── */
/* Section label 「Research」與目錄緊貼（margin-bottom 1px），讓目錄上緣對齊主頁 zoomindesigntw 上緣 */
.info-research > .profile-label {
  margin-bottom: 1px;
}

/* Research label 是 <a> 但預設要看起來像純文字（非連結）；只在 JS 加 .is-clickable 時才有可點視覺 */
.info-research a.research-reset {
  color: #000000;
  text-decoration: none;
  cursor: default;
  display: block;
}
.info-research a.research-reset.is-clickable {
  cursor: pointer;
}
.info-research a.research-reset.is-clickable:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 分類標籤目錄：橫排，預設灰色、hover 變黑、當前選中（active）黑色 */
.research-toc {
  font-size: 12px;
  letter-spacing: 0.10em;
  line-height: 1.5;
  margin-bottom: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.research-toc a {
  color: #898989;
  text-decoration: none;
  cursor: pointer;
}
/* hover：參照 ← CLOSE 的 .cv-link a:hover，黑色 + 下底線 */
.research-toc a:hover {
  color: #000000;
  text-decoration: underline;
}
/* 點選後 active 狀態：只變黑、不要底線（讓使用者知道當前篩選但保持安靜視覺） */
.research-toc a.active {
  color: #000000;
}

/* 文章與文章之間用空白間距分隔（已移除分隔線，只靠空白）；總間距 30px */
.info-research .research-article {
  margin-bottom: 30px;
  /* 從目錄錨點捲動到此 article 時，頂部預留 20px 不貼齊 viewport 邊緣 */
  scroll-margin-top: 20px;
}
/* 最後一篇可見的 article 不要 border-bottom（避免 ← CLOSE 上方出現多餘橫線） */
/* :last-child 不可靠（cv-link 才是真正 last-child），改用 JS 加的 .is-last-visible */
.info-research .research-article.is-last-visible {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* 文章標題：黑底白字「inline 標籤」效果。h2 保持 block 控制間距，內層 span 用 inline + background */
.research-title {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.10em;
  line-height: 1.4;
  margin: 0 0 6px 0;
}
/* 內層 span：多行時 box-decoration-break: clone 讓每行邊緣 padding 都正確顯示（不會只第一/最後一行有 padding） */
.research-title span {
  background-color: #000000;
  color: #ffffff;
  padding: 2px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* meta 行（日期 — 地點）：灰色細字，跟左欄 .project-meta 灰階風格一致 */
/* padding-left 6px 對齊 .research-title span 的 padding-left（讓「May」M 與「Material」M 對齊） */
/* margin-bottom 10px：日期下緣與下方 image 上緣距離 10px */
/* flex 排版：meta-text 靠左、meta-subtitle 靠右 */
.research-meta {
  font-size: 12px;
  letter-spacing: 0.10em;
  line-height: 1.4;
  color: #898989;
  margin: 0 0 10px 0;
  padding-left: 6px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.research-meta .meta-subtitle {
  text-align: right;
  color: #FF5F43;
}

/* 文章配圖區塊：與內文同寬、16:9 比例 */
/* 預設灰色 placeholder；有真實圖片時黑色（承載非 16:9 原圖的留白） */
/* margin-bottom 10px：image 下緣與下方內文上緣距離 10px */
.research-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #d0d0d0;
  margin: 0 0 10px 0;
  overflow: hidden;
}

/* 有真實圖片時：黑底（讓非 16:9 比例的圖片上下/左右留黑邊） */
.research-image:has(img) {
  background-color: #000000;
}

/* 圖片：完整顯示在 16:9 容器內、置中對齊；非 16:9 比例會自動 letterbox（黑邊） */
.research-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* 影片模式：iframe 填滿整個 16:9 區塊；取消灰底（embed 自帶縮圖） */
.research-image.has-video {
  background-color: transparent;
}
.research-image iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* 多張圖片時：hover 圖片區塊用「白底黑框圓 + 黑十字」cursor，與 Selected Works .project-thumbnail 一致 */
.research-image.has-multiple-images {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="12.5" fill="white" stroke="black" stroke-width="1.2"/><line x1="11.5" y1="16" x2="20.5" y2="16" stroke="black" stroke-width="1.2"/><line x1="16" y1="11.5" x2="16" y2="20.5" stroke="black" stroke-width="1.2"/></svg>') 16 16, pointer;
}

/* 文章末尾 hashtag 標籤：橘紅色點綴（specificity 提高才能蓋過 .research-body p 的黑色） */
.research-body .research-tag {
  color: #FF5F43;
}

/* YouTube 影片連結段落：favicon 左緣對齊 article 邊緣（即 image 左緣），URL 接在 favicon 右邊 */
/* 取消首行縮排 + flex 排版 */
.research-body .research-video-link {
  text-indent: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.research-body .research-video-link .yt-favicon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-block;
}

/* 文章內文段落：字級行距與 information bio 一致；首行縮排 2em 維持閱讀節奏 */
.research-body p {
  font-size: 12px;
  letter-spacing: 0.10em;
  line-height: 1.5;
  color: #898989;
  margin: 0 0 8px 0;
  text-indent: 2em;
}
.research-body p:last-child {
  margin-bottom: 0;
}

/* ← CLOSE 與最後一篇文章距離 40px，與 .info-cv .cv-link 一致 */
.info-research .cv-link {
  margin-top: 40px;
}

/* ── Site Header / Nav ────────────────────────────────── */
.site-header {
  margin-bottom: 10px;
}

/* padding-bottom 加大讓橫線下移 2px；site-header margin-bottom 同步減 2px 讓下方內容不動 */
.site-nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px solid #898989;
}

.nav-section-title {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #000000;
  text-decoration: none;
}

a.nav-section-title:hover {
  text-decoration: underline;
}

.nav-arrows {
  font-size: 12px;
  color: #000000;
  -webkit-text-fill-color: #000000;
}

/* ── Page Title ───────────────────────────────────────── */
.page-section-title {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 13px;
  color: #898989;
}

/* ── Project List (Home) ──────────────────────────────── */
/* 各精選作品之間以橫線分隔（寬度與頂部橫線同寬） */
.project-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.project-item {
  padding: 10px 0;
  border-bottom: 1px solid #898989;
}
.project-item:first-child {
  padding-top: 0;
}
.project-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.project-item {
  display: grid;
  grid-template-columns: 650px 1fr;
  gap: 13px;
  /* 不設 align-items 讓 grid items 預設 stretch，
     project-info 內部用 flex 把 title 推到頂、meta 推到底 */
}

/* iPad 範圍（769-1399px）覆寫：涵蓋 iPad 直屏 + 橫屏（含 iPad Pro 12.9 = 1366，加 buffer 防 scrollbar 偏差）
   桌面寫死的 650px 縮圖在此範圍下會溢出 / dots 撞右欄，所以這個 @media 統一處理
   iPad 的版面比例。手機（≤768px）與真正桌面（≥1400px）兩端完全不動。
   2026-05-20：上限從 1023 擴大到 1399，讓 iPad 橫屏邏輯完全參照直屏 */
@media (max-width: 1399px) and (min-width: 769px) {
  /* 2026-05-20 修正：col-right 固定 300px 跟直屏一致；col-left 改用 1 1 auto 撐滿剩餘
     - iPad 直屏 820 → col-left = 520 / col-right = 300（跟原本一樣）
     - iPad 橫屏 1080 → col-left = 780 / col-right = 300（左欄變寬、圖片變大）
     - iPad 橫屏 1194 → col-left = 894 / col-right = 300
     - iPad 橫屏 1366 → col-left = 1066 / col-right = 300
     不要居中、不要 max-width，剩餘寬度全給左欄（圖片自然變寬）
     .site-wrapper::before 中間分隔線 left 從 70% 改成 calc(100% - 300px)，跟 col-left 右緣對齊 */
  /* 2026-05-20 終極方案 — position: fixed 把 col-right 永遠釘在 viewport 右側 300px。
     之前嘗試 flex / grid / scrollbar-gutter / .info-panel inner scroll 都被 iPad Safari quirk 影響。
     fixed 從 viewport 直接算，絕對不受 layout / scrollbar / 任何 child element 影響。
     col-left 用 padding-right: 300px 避免被 fixed col-right 蓋住內容。 */
  .site-wrapper {
    display: block;
    position: relative;
  }
  .col-left {
    width: 100% !important;
    /* padding-right = 300（給 fixed col-right 留位置）+ 13（跟左邊白邊對稱：col-left 預設 padding-left 13）= 313 */
    padding-right: 313px !important;
    flex: none !important;
    box-sizing: border-box;
  }
  .col-right,
  body .col-right,
  body.home .col-right,
  body.page-template-page-information .col-right,
  body.page-template-page-research .col-right {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 300px !important;
    height: 100vh !important;
    flex: none !important;
    min-width: 0 !important;
    max-width: none !important;
    z-index: 50;
  }
  /* 分隔線：fixed 在 viewport 右側 300px 位置，跟 col-right 左緣對齊 */
  .site-wrapper::before {
    position: fixed !important;
    top: 10px !important;
    bottom: 10px !important;
    left: auto !important;
    right: 300px !important;
    width: 1px !important;
    background-color: #898989 !important;
  }

  /* .project-item 改用單欄垂直 stack：
     - row 1: 縮圖（滿 col-left 內容區寬度，比例放大、放好）
     - row 2: dots（緊接圖片下方、左對齊）
     - row 3: 標題 + meta（滿欄寬度，文字不擠不斷詞）

     為什麼不沿用桌面雙欄：iPad col-left 500px 扣 padding/gap 後內容區 461px，
     雙欄拆 2fr 1fr 後 col 2 只剩 154px，標題（19 字 × 12px × 1.10 letter-spacing
     ≈ 250px）會被擠成多行支離破碎。改單欄就解掉這數學矛盾。

     用 display: contents 把 .project-info 從 grid 結構拿掉，讓內部子元素
     直接成為 .project-item 的 grid child，再用 grid-template-areas 指派位置。

     所有與桌面同名的規則一律用 .project-item 雙 class selector 提升
     specificity 到 (0,2,0)，跨越位置順序覆蓋桌面相同 selector 規則
     （桌面 .project-info / .project-image-index 規則都晚於本 @media，
     CSS cascade 同 specificity 後寫勝出，單 class 寫法會被蓋）*/
  .project-item {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "thumb"
      "dots"
      "info";
    position: relative;  /* 給 .project-index-deco 與 .top-link absolute 定位 reference */
  }
  .project-item .project-info {
    display: contents;  /* 讓內部 children 直接成為 .project-item 的 grid child */
  }
  .project-item .project-thumbnail {
    grid-area: thumb;
  }
  .project-item .project-info-top {
    grid-area: info;
  }
  .project-item .project-image-index {
    grid-area: dots;
    justify-content: flex-start;  /* 第一個 dot 在最左，左外緣對齊縮圖 */
    align-items: flex-start;
    margin-top: 0;                /* row gap 13px 已提供間距 */
    transform: none;              /* 取消桌面 -1px 微調 */
  }

  /* Gallery view 底部 ← BACK + 文章標題排版：iPad 改成垂直 stack（標題在上、← BACK 在下），
     兩元素間距 30px。
     用 flex-direction: column-reverse 反轉視覺順序：DOM 順序是 BACK → title（main.js
     line 621-624 的 innerHTML 寫死，改不動 DOM 也不影響桌面），column-reverse 讓視覺上
     title 在上、BACK 在下。
     桌面 .gallery-back-bottom (0,1,0) 在 line 1574，這裡用 .view-gallery .gallery-back-bottom (0,2,0)
     雙 class selector，跨位置順序覆蓋桌面規則 */
  .view-gallery .gallery-back-bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 30px;
  }

  /* ← BACK 文字保持單行不斷詞（垂直 stack 下不會被擠，這條當保險） */
  .view-gallery .js-gallery-back {
    white-space: nowrap;
  }

  /* ALL WORKS 頁底部 ↑TOP 連結：iPad 從桌面的「left: 0 對齊圖片左外緣」改成
     「right: 0 對齊圖片右外緣」，P 字母右外緣自然落在 .project-item 最右邊 = 圖片右邊。
     桌面 .top-link (0,1,0) 在 line 524（left: 0），這裡用 .project-item .top-link (0,2,0)
     雙 class selector 跨越位置順序覆蓋 */
  .project-item .top-link {
    left: auto;
    right: 0;
  }

  /* Research 文章內頁 meta（日期-地點 + tag）排版：
     桌面是 flex row + space-between（meta-text 左、meta-subtitle 右）+ baseline 對齊；
     iPad col-right 寬度只有 ~255px，row 排會把兩個 span 各擠成兩行（總共 4 行視覺擠）。
     改 column stack + 左對齊：第一行日期-地點（單行）、第二行 tag（仍可能 wrap，但獨佔一行寬度），
     總計 2-3 行更清爽。
     gap: 2px 讓兩行視覺接近、屬同一 meta block 不被誤認為兩個獨立區塊 */
  .research-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .research-meta .meta-subtitle {
    text-align: left;
  }

  /* 縮圖點擊放大倍數從桌面 1.7822 改成 1.5789：
     iPad viewport 820，縮圖 layout 寬 494（col-left 520 - padding 26），
     transform-origin: top left 從縮圖左上角放大；
     scale 1.5789 → 視覺寬 494 × 1.5789 = 779.97 ≈ 780 px，正好等於頂部兩條
     橫線跨幅（SELECTED WORKS 橫線左外緣 → ZOOM IN DESIGN 橫線右外緣 = 780 px），
     視覺對齊主頁頂部水平節奏；
     桌面用 1.7822 是因 viewport 1440 + 縮圖 650 → 視覺寬 1158 完全放得下。
     specificity (0,3,0) > 桌面 .project-thumbnail.expanded (0,2,0)，跨位置順序覆蓋 */
  .project-item .project-thumbnail.expanded {
    transform: scale(1.5789);
  }

  /* 羅馬數字水印從桌面 60px 縮到 20px，配合 iPad 較窄的 col-left 視覺比例。
     位置從原本「.project-info 右上角 absolute（top: -6px / right: 0）」改成
     「圖片右下角（疊在 thumb area 上、底部對齊）」：
     - 用 grid-area: thumb 把它放進 row 1 col 1 同一格（與 thumbnail 重疊）
     - position: static 取消 absolute，改用 grid alignment
     - align-self: end + justify-self: end → 對齊 thumb 區的右下角
     - 數字底部外緣即對齊圖片底部外緣
     - z-index: 2 蓋在 thumbnail (z-index:1) 之上
     - margin 給 4px 讓數字不貼死右邊與底邊

     用 .project-item .project-index-deco 雙 class selector 提高 specificity 到 (0,2,0)，
     跨越位置順序覆蓋桌面 line 547 的 .project-index-deco (0,1,0)（CSS cascade 規則：
     相同 specificity 時後寫勝出，桌面那條晚於本 @media，所以單 class 寫法會被蓋）*/
  .project-item .project-index-deco {
    grid-area: thumb;
    position: static;
    top: auto;
    right: auto;
    align-self: end;
    justify-self: end;
    font-size: 20px;
    margin: 0 4px 4px 0;
    z-index: 2;
  }
}

.project-thumbnail {
  aspect-ratio: 16/9;
  overflow: hidden;
  /* 黑底：非 16:9 比例的原圖會在下方（或左右）露出黑色填補，確保所有圖片顯示框尺寸一致 */
  background-color: #000;
  position: relative;
  z-index: 1;
  /* 自訂游標（未放大）：白底黑框圓圈直徑 25px，中間「+」符號 */
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="12.5" fill="white" stroke="black" stroke-width="1.2"/><line x1="11.5" y1="16" x2="20.5" y2="16" stroke="black" stroke-width="1.2"/><line x1="16" y1="11.5" x2="16" y2="20.5" stroke="black" stroke-width="1.2"/></svg>') 16 16, pointer;
  transform-origin: top left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 點擊放大：寬度 1158.4px、保持 16:9；左上角對齊原圖左上角（transform-origin: top left）。
   1158.4 / 650 = 1.7822 倍，layout box 不變，只用 transform 視覺放大覆蓋其他內容 */
.project-thumbnail.expanded {
  transform: scale(1.7822);
  z-index: 100;
  /* 自訂游標（已放大）：白底黑框圓圈直徑 25px，中間「−」符號（提示再點一次收起） */
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="12.5" fill="white" stroke="black" stroke-width="1.2"/><line x1="11.5" y1="16" x2="20.5" y2="16" stroke="black" stroke-width="1.2"/></svg>') 16 16, pointer;
}

/* 列表中最後一個項目：放大時從左下角擴張（底部對齊原圖底部、向上 / 向右展開），
   避免放大圖溢出頁面下緣 */
.project-list .project-item:last-child .project-thumbnail {
  transform-origin: bottom left;
}

.project-thumbnail img {
  width: 100%;
  height: 100%;
  /* contain：原圖完整顯示不裁切；center center：圖片置中於 16:9 黑底中央，
     非 16:9 的圖會在上下（寬圖）或左右（高圖）露出對稱黑邊 */
  object-fit: contain;
  object-position: center center;
  transition: opacity 0.3s ease;
}

.project-thumbnail img:hover {
  opacity: 0.85;
}

/* 已放大且游標在左 / 右 1/3（顯示 ← 或 → 箭頭）時，取消 hover 變淡，
   讓使用者切換上一張 / 下一張時看到清晰原圖（不被 0.85 透明度干擾） */
.project-thumbnail.expanded[data-zone="left"] img:hover,
.project-thumbnail.expanded[data-zone="right"] img:hover {
  opacity: 1;
}

/* Placeholder when no image */
.project-thumbnail.no-image {
  background-color: #DCDDDD;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 資訊區用 flex column + space-between：
   title 對齊圖片頂端、meta 對齊圖片底端，中間留白；
   position: relative 提供給內部 .top-link 絕對定位的參考座標 */
.project-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

/* ↑ TOP：出現於 ALL WORKS（兩端裝置）與首頁 SELECTED WORKS（手機限定）
   - 桌面：左下角（與標題 PROJECT TITLE 字母 P 左外緣對齊）
   - 手機：右下角（與項目圖右外緣對齊，由 @media 內覆寫）
   - 預設透明、不可點；JS 偵測捲到底後加 .visible 才顯示 */
.top-link {
  position: absolute;
  left: 0;
  bottom: 0;
  margin-bottom: 0;
  transform: translateY(-1px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* 主頁（home / blog body class）的 TOP↑ 桌面隱藏
   原本 ALL WORKS 才有，是 Marco 的手機版需求才開放到首頁；桌面恢復為「無」 */
body.home .top-link,
body.blog .top-link {
  display: none;
}
.top-link.visible {
  opacity: 1;
  pointer-events: auto;
}

/* 編號裝飾：項目右上角的大數字（取編號後 2 碼，例 001→01）
   絕對定位，不影響其他內容的排序與位置；空心字（黑色細外框 + 透明填色）
   字母頂端對齊標題字母頂端：60px 字的 line-box 頂端會比 12px 標題的 cap-top
   高約 6px（ascender 差），用 top:-6px 補償 */
.project-index-deco {
  position: absolute;
  top: -6px;
  right: 0;
  font-family: Arial, sans-serif;
  font-size: 60px;
  font-weight: 400;
  line-height: 1;
  color: #ececec;
  letter-spacing: 0;
  pointer-events: none;
  user-select: none;
}

/* meta：與 PROJECT TITLE 左側對齊；4 行 spec（Location / Area / Design Time / Project Status） */
.project-meta {
  font-size: 12px;
  letter-spacing: 0.10em;
  color: #898989;
  line-height: 1.6;
  text-align: left;
  margin-top: 8px;
  margin-bottom: 0;
}
/* 只有 location 的 value 部分套大寫（其他 spec 維持 mixed case） */
.project-meta .meta-upper {
  text-transform: uppercase;
}

/* title：line-height 1 讓字母頂端外緣對齊圖片頂端 */
.project-title {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.10em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}

/* 圖例容器：放在 .project-info 底部（與圖片底端對齊），靠右排列；整體上移 1px 微調與圖片底端的視覺對齊
   margin-top: auto 強制釘在 flex 容器最下方，不會被其他子元素（如 .top-link）影響分配 */
.project-image-index {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: flex-end;
  transform: translateY(-1px);
  margin-top: auto;
}

/* 單一圖例按鈕：黑框黑底白字，點擊後變黑框白底黑字
   嚴格垂直 / 水平居中：
   - appearance: none、margin: 0 → 重置 button 預設 padding / margin / 框
   - font-variant-numeric: tabular-nums → 數字等寬，讓「1」與其他數字同等對齊
   - line-height 等於容器高度，flex 居中時數字 line-box 對齊圓心 */
.project-image-index .dot {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  /* padding-bottom 2px：圓圈外框與外型保持 24×24 不動（border-box），
     但 flex 內容區域往上收 2px → 文字垂直中心相對於圓圈中心上移 1px */
  padding: 0 0 2px 0;
  margin: 0;
  border: 1px solid #000;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 24px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.project-image-index .dot.active {
  background: #fff;
  color: #000;
}

.project-title a:hover {
  text-decoration: underline;
}

.project-excerpt {
  font-size: 12px;
  color: #898989;
  line-height: 1.5;
  margin-bottom: 10px;
}

.read-more {
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: underline;
}

/* ── Right Column — Info Panel ────────────────────────── */
.info-panel {
  font-size: 12px;
  line-height: 1.4;
}

.info-panel .studio-name {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  /* margin-bottom 縮 2px 讓下方 Profile 區塊整體上移 2px */
  margin-bottom: 11px;
  border-bottom: 1px solid #898989;
  /* padding-bottom 加大讓橫線下移 2px */
  padding-bottom: 10px;
  color: #000000;
  /* 文字靠左、LogoMark 靠右；LogoMark 右側外緣自然對齊到容器右邊界（即 border-bottom 右側外緣） */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.info-panel .studio-name a {
  color: #000000;
}

/* 右欄 LogoMark：高度設 1em（= 12px，與 ZOOM IN DESIGN 字體大小相同），不超出文字頂端 */
.studio-logo-mark {
  display: block;
  height: 1em;
  width: auto;
  flex-shrink: 0;
}

.profile-block {
  font-size: 12px;
}

.profile-label {
  font-size: 12px;
  letter-spacing: 0.10em;
  color: #000000;
  margin-bottom: 1px;
}

.contact-item {
  font-size: 12px;
  letter-spacing: 0.10em;
  color: #898989;
  margin-bottom: 1px;
}

.contact-item a {
  color: #898989;
}

.contact-item a:hover {
  text-decoration: underline;
}

.bio-text {
  font-size: 12px;
  letter-spacing: 0.10em;
  color: #898989;
  line-height: 1.5;
  /* 取消上方分隔橫線，但保留 margin-top + padding-top 共 26px 的間距 */
  margin-top: 13px;
  padding-top: 13px;
  /* Bio 與 CV → 之間留 26px 空白 */
  margin-bottom: 26px;
}

/* Studio 內文段落間距 5px；首行縮排 2 個字母寬 */
.bio-text p {
  margin-bottom: 5px;
  text-indent: 2em;
}
.bio-text p:last-child {
  margin-bottom: 0;
}

.cv-link {
  font-size: 12px;
  letter-spacing: 0.10em;
  color: #000000;
  margin-bottom: 1px;
}
.cv-link:last-child {
  margin-bottom: 0;
}

.cv-link a {
  color: #000000;
}

.cv-link a:hover {
  text-decoration: underline;
}

/* ← CLOSE 中的左箭頭：與 CLOSE 之間 8px（與 CV → 對稱） */
.cv-arrow-before {
  margin-right: 8px;
}

.cv-arrow {
  margin-left: 8px;
}

/* ── Single Project Page ──────────────────────────────── */
.project-single {
  max-width: 900px;
}

.project-single-header {
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid #898989;
}

.project-single-title {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.project-specs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px 24px;
  font-size: 12px;
}

.project-spec-label {
  color: #898989;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}

.project-spec-value {
  font-weight: 400;
}

.project-single-images {
  margin-bottom: 40px;
}

.project-single-images img {
  width: 100%;
  margin-bottom: 12px;
}

.project-single-description {
  font-size: 12px;
  line-height: 1.7;
  max-width: 640px;
  margin-bottom: 48px;
}

/* ── Single Research 獨立頁面 ──────────────────────────────
   Marco 偏好：點 Research 列表的封面或標題進來後，Gallery 不顯示已被點過的封面（兩個 viewport 都遵循） */
.research-single {
  max-width: 900px;
}
.research-single-title {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.research-single-meta {
  font-size: 12px;
  letter-spacing: 0.10em;
  color: #898989;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid #898989;
}
.research-single-meta .meta-subtitle {
  display: inline-block;
  margin-left: 12px;
  color: #FF5F43;
}
.research-single-gallery {
  margin-bottom: 40px;
}
.research-single-gallery img {
  display: block;
  width: 100%;
  height: auto;            /* 保留原始比例不裁切 */
  margin-bottom: 12px;
}
.research-single-gallery img:last-child {
  margin-bottom: 0;
}
.research-single-body {
  font-size: 12px;
  line-height: 1.7;
  max-width: 640px;
  margin-bottom: 48px;
}
.research-single-body p {
  margin-bottom: 1em;
}

/* Single Project 頁底部導覽容器
   桌面：display:block（恢復原本只有 back-link 的單獨列表現），↑TOP 整個藏起
   手機：display:flex 兩端對齊，↑TOP 出現（@media 內覆寫） */
.project-single-footer {
  display: block;
  margin-top: 24px;
}
/* 桌面藏整個 ↑ TOP wrapper（cv-link-top 用 .cv-link 結構，與 ALL WORKS 頁一致） */
.project-single-footer .cv-link-top {
  display: none;
}

.back-link {
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  /* 桌面預設有底線（恢復原本行為）；手機版會在 @media 內改為「hover 才出現」 */
  text-decoration: underline;
}

/* ALL WORKS 頁面手機限定底部導覽（← BACK / ↑ TOP）；桌面/iPad 完全藏起，
   手機 @media 內改為 display:flex（樣式比照 single-project 底部） */
.all-works-mobile-footer {
  display: none;
}

/* ── Information Page ─────────────────────────────────── */
.information-page {
  max-width: 680px;
}

/* 各 section 之間距 26px（Profile→Education / Education→Experience / ...→Close） */
.information-section {
  margin-bottom: 26px;
}

.information-section h2 {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.10em;
  color: #000000;
  margin-bottom: 1px;
}

/* Profile section 中名字行：行高與字距比照主頁 contact-item，
   讓位置與主頁的 zoomindesigntw@gmail.com 對應 */
.information-section .cv-name {
  font-size: 12px;
  letter-spacing: 0.10em;
  line-height: 1.4;
  color: #898989;
  margin-bottom: 1px;
}

/* Profile section 中職稱行：行高比照主頁 contact-item，
   位置對應主頁的 Instagram；與下方 Bio 第一段保持 26px */
.information-section .cv-title {
  font-size: 12px;
  letter-spacing: 0.10em;
  line-height: 1.4;
  color: #898989;
  margin-bottom: 26px;
}

/* 個人介紹 Bio 段落間距 5px；行距與主頁 .bio-text 一致（1.5） */
.information-section p {
  font-size: 12px;
  letter-spacing: 0.10em;
  line-height: 1.5;
  color: #898989;
  margin-bottom: 5px;
}

/* Bio 段落首行縮排 2 個字母寬（不影響 cv-name / cv-title / cv-entry 內的 p） */
.information-section > p:not(.cv-name):not(.cv-title) {
  text-indent: 2em;
}

/* Bio 最後一段不需要再加 margin-bottom（由 .information-section margin-bottom 控制 section 間距） */
.information-section p:last-child {
  margin-bottom: 0;
}

/* CV 條目（Education / Experience / Exhibitions / Certifications）：
   每個條目用 .cv-entry，內含若干 <p>（內文行 + 年份行），之間順著行高自然顯示，
   不同條目之間用 .cv-entry margin-bottom 分隔 */
.cv-entry {
  margin-bottom: 3px;
}
.cv-entry:last-child {
  margin-bottom: 0;
}
.information-section .cv-entry p {
  font-size: 12px;
  letter-spacing: 0.10em;
  line-height: 1.4;
  color: #898989;
  margin-bottom: 0;
}

.cv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  letter-spacing: 0.10em;
}

/* 各列之間不再加底線（保留 td 的 padding 提供間隔） */
.cv-table tr {
  border-bottom: none;
}

.cv-table td {
  padding: 8px 0;
  vertical-align: top;
}

.cv-table td:first-child {
  color: #898989;
  width: 80px;
  padding-right: 16px;
}

/* ── Copyright — 右欄最底部 ──────────────────────────── */
.profile-block {
  flex: 1;
}

.site-copyright {
  margin-top: auto;
  padding-top: 13px;
  /* padding-bottom 10px 確保 copyright 下方一定有 10px 留白（兩頁通用） */
  padding-bottom: 10px;
  font-size: 12px;
  color: #898989;
  letter-spacing: 0.10em;
}

/* 手機版圖片畫廊：桌面隱藏（具體手機顯示規則寫在下方 @media 內，
   必須放在 @media 之前，CSS 後者勝原則才能讓 @media 內的 display:block 生效） */
.project-mobile-gallery {
  display: none;
}

/* 手機版 Single Project 底部 meta：桌面隱藏（手機版的規則在下方 @media 內） */
.project-mobile-meta {
  display: none;
}

/* 手機版專用標題（在 mobile-meta 上方）：桌面隱藏 */
.project-single-title-mobile {
  display: none;
}

/* Back-link 文字版本切換：桌面顯示完整字、手機顯示縮寫
   .back-text-desktop 預設顯示，.back-text-mobile 預設藏，@media 內反向 */
.back-text-mobile {
  display: none;
}

/* 2026-05-12：原本 .studio-name-desktop / .studio-name-mobile 的 dual-span 切換規則已移除。
   理由：Information / Research 三個版本都統一顯示「INFO」/「RESEARCH」純文字，PHP 直接渲染單一文字，
   不再需要 viewport-based 切換。CSS 規則隨 PHP 雙 span 一併清除，避免 dead code。 */

/* Single Research header 文字版本切換：桌面顯示「Selected Works」、手機顯示「Research」 */
.nav-title-mobile {
  display: none;
}

/* 手機版專用 © Copyright：桌面藏（桌面用 .col-right 內的 .site-copyright），
   手機在每一頁底部顯示 */
.mobile-copyright {
  display: none;
}

/* ── Mobile ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .site-wrapper {
    flex-direction: column;
    height: auto;
    overflow: visible;
    /* top: 14px（Marco 偏好的緊湊頂部）/ 左右: 16px（兩側舒適邊界）
       上下不對稱是刻意的：頂部更緊讓內容靠近 status bar，左右保持呼吸感 */
    padding: 14px 16px 16px;
  }

  /* 手機版單欄佈局，不需要垂直分隔線 */
  .site-wrapper::before {
    display: none;
  }

  /* width: 100% + min-width: 0 是防止內部寬內容反向把 col-left 推到比 viewport 寬，
     造成右邊「被裁切」的橫向 overflow */
  .col-left {
    flex: none;
    width: 100%;
    min-width: 0;
    height: auto;
    overflow-y: visible;
    padding: 0;
    /* order 不設 — 讓它用預設 0，搭配 col-right 的 order: -1，使 Studio 排在前面 */
  }

  /* Studio 區塊（col-right）排到最頂部 — 訪客先看到「我們是誰」，
     再往下捲動看作品列表。Marco 偏好的品牌優先式 IA
     不加 border-top — 會在頁面最頂部產生一條多餘的橫線干擾視覺
     padding: 0 — 頂部間距完全交給 .site-wrapper 的 16px 提供，
                  符合 Apple/Google 行動裝置主流的 16px 安全邊距
     margin-bottom: 50px — Studio 區與下方 Selected Works 之間的呼吸距離，
                           讓「我們是誰」與「我們做什麼」視覺上分區清楚 */
  .col-right {
    flex: none;
    width: 100%;
    min-width: 0;
    height: auto;
    max-height: none;
    overflow-y: visible;
    position: static;
    order: -1;                              /* 排到 col-left 前面（最頂部） */
    padding: 0;
    margin-bottom: 50px;
  }

  /* 作品改成「圖滿版在上、文字在下」的單欄佈局，並用 grid-template-areas
     讓羅馬數字能疊到縮圖右下角（與 iPad 範圍相同手法）。
     - row 1: thumb 縮圖（羅馬數字 .project-index-deco 也同格疊上去，align/justify-self: end）
     - row 2: info 標題+meta */
  .project-item {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "thumb"
      "info";
    gap: 12px;
    position: relative;  /* 給 .top-link absolute 定位 reference */
  }

  /* 用 display: contents 把 .project-info 從 grid 結構拿掉，讓內部
     .project-info-top / .project-image-index / .project-index-deco / .top-link
     直接成為 .project-item 的 grid child，再個別指派 grid-area。
     雙 class selector .project-item .project-info (0,2,0) 跨位置順序覆蓋
     桌面 .project-info (0,1,0) 的 display: flex */
  .project-item .project-info {
    display: contents;
  }
  .project-item .project-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    grid-area: thumb;
  }
  .project-item .project-info-top {
    grid-area: info;
  }
  .project-thumbnail img {
    width: 100%;
    height: 100%;
    /* 2026-05-20 改 cover → contain（Marco 反饋）：
       非 16:9 原圖（如 001 LinkouAplus 1920×1280 = 3:2）不要被裁切，
       完整顯示原圖、上下露出黑底 letterbox（與桌面/iPad 全域規則一致）。
       cover 會把 3:2 原圖裁掉上下部分讓它填滿 16:9 框，雖然不變形但裁掉內容；
       contain 保持原比例完整顯示、容器底色（已設黑）填補多出的空間。 */
    object-fit: contain;
    background-color: #000000;
  }

  /* .site-nav 不覆寫 — 繼承桌面預設的 flex + justify-content: space-between，
     讓 SELECTED WORKS 與 ⇅ 在手機版仍維持「左右對齊同一行」 */

  /* 縮圖切換器 dots 在手機版藏掉 — 13 個圓圈擠在窄螢幕無法一排排好，
     使用者習慣「點圖進單頁看更多」，列表頁不需要切換縮圖功能 */
  .project-image-index {
    display: none;
  }

  /* 羅馬數字裝飾從原本「手機藏掉」改成「疊在縮圖右下角」
     （Marco 2026-05-10 要求參照 iPad 樣式恢復顯示）：
     - grid-area: thumb 跟縮圖同格疊上去
     - position: static 取消桌面 absolute（top: -6px / right: 0）
     - align-self: end + justify-self: end → 對齊縮圖右下角內側
     - margin: 0 4px 4px 0 不貼死圖邊
     - z-index: 2 蓋在 thumbnail (z-index: 1) 之上
     - font-size: 20px（桌面 60px，手機縮圖 ~453 寬比 iPad 494 略小，沿用 20px 視覺一致）
     用 .project-item .project-index-deco (0,2,0) 跨位置順序覆蓋桌面 (0,1,0) */
  .project-item .project-index-deco {
    display: block;
    grid-area: thumb;
    position: static;
    top: auto;
    right: auto;
    align-self: end;
    justify-self: end;
    font-size: 20px;
    margin: 0 4px 4px 0;
    z-index: 2;
  }

  /* ── Single Project 頁的手機版圖片畫廊 ─────────────────────────
     桌面版的 .project-single-images（精選圖片硬裁 16:9）在手機版藏掉，
     改顯示 .project-mobile-gallery：所有圖片垂直堆疊、滿版寬度、保留原始比例
     圖片來源：檔案系統 assets/images/projects/[order]/*.webp（與首頁同源） */
  .project-single-images {
    display: none;
  }

  .project-mobile-gallery {
    display: block;
    margin: 10px 0 0;         /* top: 10px — 第一張圖上緣到頂部橫線間距（Marco 偏好的緊湊感） */
  }
  /* Marco 全域規則：所有手機版圖片外框 16:9，非 16:9 原圖用黑底 letterbox 襯
     object-fit: contain 讓原圖完整顯示（不裁切）但放在 16:9 框內
     background: #000 填補 letterbox 空白 */
  .project-mobile-gallery img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background-color: #000000;
    margin-bottom: 8px;
  }
  .project-mobile-gallery img:last-child {
    margin-bottom: 0;
  }

  /* ── Single Project 手機版重排：圖→標題→資料 ─────────────
     整個 .project-single-header（含原本的 h1 標題、meta、specs）全部藏掉
     讓使用者進來先看圖（情緒），再看標題＋資料（理性） */
  .project-single-header {
    display: none;
  }

  /* 手機版專用標題顯示出來（位置：圖之後、Location meta 之前）
     間距比照 SELECTED WORKS 列表：
     - 圖→標題 12px（對應 .project-item grid gap 12px）
     - 標題→meta 8px（對應 .project-meta margin-top 8px） */
  .project-single-title-mobile {
    display: block;
    margin: 12px 0 8px;
  }

  /* 手機版底部 meta（樣式參考首頁列表的 .project-meta）
     margin-top: 0 — 與標題的間距交給 .project-single-title-mobile margin-bottom 8px 控制 */
  .project-mobile-meta {
    display: block;
    margin: 0 0 24px;
    font-size: 12px;
    letter-spacing: 0.10em;
    color: #898989;
    line-height: 1.6;
    text-align: left;
  }
  .project-mobile-meta .meta-upper {
    text-transform: uppercase;
  }

  /* 手機版：拿掉 .project-single-header 的 border-bottom，
     避免標題下方出現多餘橫線（桌面保留原本的橫線分隔） */
  .project-single-header {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 16px;
  }

  /* 手機版底部導覽：左右兩端對齊、顯示 ↑ TOP */
  .project-single-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /* 手機版顯示 ↑ TOP wrapper；neutralise margin 避免跟 back-link baseline 偏移 */
  .project-single-footer .cv-link-top {
    display: block;
    margin: 0;
  }

  /* 手機版 .back-link 與 ↑ TOP：樣式對齊 CV→
     - 黑字、無底線、hover 才出現底線
     - 移除 text-transform: uppercase（CV→ 沒有強制大寫，文字本來就是 "CV"）
       讓底線繪製的字型 metrics 與 CV→ 一致，視覺上「形」相同
     桌面仍維持有底線、uppercase 的原樣 */
  .back-link {
    text-decoration: none;
    color: #000000;            /* 與 .cv-link a 一致 */
    text-transform: none;      /* 解除桌面版的 uppercase */
  }
  .back-link:hover {
    text-decoration: underline; /* 與 .cv-link a:hover 一致，不加 underline-offset */
  }

  /* 手機版：back-link 顯示「← BACK」、隱藏完整版「← Back to Selected Work」
     同時套用於 Information / Research 的 ← CLOSE → ← BACK 切換（共用 .back-text-* 工具 class） */
  .back-text-desktop {
    display: none;
  }
  .back-text-mobile {
    display: inline;
  }

  /* ALL WORKS 頁面手機底部導覽：左 ← BACK / 右 ↑ TOP，位置關係比照 .project-single-footer */
  .all-works-mobile-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
  }
  /* .cv-link-top 內含 ↑ TOP；neutralise margin 與 .project-single-footer 同步處理 */
  .all-works-mobile-footer .cv-link-top {
    margin: 0;
  }
  /* /all-works/ 手機版藏掉每個項目原有的浮動 ↑ TOP，避免和底部新 footer 的 ↑ TOP 重複 */
  body.page-template-page-all-works .top-link {
    display: none;
  }

  /* Single Research header：手機顯示「Research」、藏「Selected Works」 */
  .nav-title-desktop {
    display: none;
  }
  .nav-title-mobile {
    display: inline;
  }

  /* 手機版每頁底部 © Copyright（位於跑馬燈之上）
     order: 999 確保在 flex column 中排到最後（col-left order: 0、col-right order: -1） */
  .mobile-copyright {
    display: block;
    order: 999;
    font-size: 12px;
    letter-spacing: 0.10em;
    color: #898989;
    text-align: left;
    margin: 32px 0 16px;
  }

  /* 手機版 .top-link：右下角對齊（桌面仍維持左下角原樣） */
  .top-link {
    left: auto;
    right: 0;
  }

  /* 手機版主頁的 TOP↑ 顯示出來（桌面 body.home 已先藏） */
  body.home .top-link,
  body.blog .top-link {
    display: block;
  }

  /* 手機版 Single Project 與 Single Research 頁一律藏掉頂部 Studio (col-right)
     不管使用者從首頁、All Works、Information、bookmark 進來，都讓使用者專注在「作品/文章本身」
     桌面版完全不受影響（規則只在 max-width: 768px 內生效） */
  body.single-project .col-right,
  body.single-research .col-right {
    display: none;
  }

  /* Single Research 手機版調整：
     - .research-single-title 對齊桌面 Gallery view 底部 .gallery-back-title 灰色純文字樣式
       （12px / 0.10em / line-height 1.4 / #898989 / 不要 uppercase、不要黑底）
     - .research-single-meta 取消頂部橫線（與標題下方留白讓視覺更乾淨）
     - .research-single-gallery 圖之間 margin 縮小到 8px（與單頁手機版 gallery 一致） */
  .research-single-title {
    color: #898989;
    line-height: 1.4;
    text-transform: none;
    margin: 0 0 12px 0;
  }
  .research-single-meta {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 10px;
    /* flex 排版：meta-text 靠左、meta-subtitle (#tag) 靠右，右邊緣與下方圖片對齊 */
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
  }
  /* 覆寫桌面 inline-block + margin-left 12px，避免 flex 下產生額外位移 */
  .research-single-meta .meta-subtitle {
    margin-left: 0;
    text-align: right;
  }
  /* gallery 下緣到 body 第一行字上緣間距：10px */
  .research-single-gallery {
    margin-bottom: 10px;
  }
  /* 同 .project-mobile-gallery 邏輯：手機版 16:9 框 + 黑底 letterbox */
  .research-single-gallery img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background-color: #000000;
    margin-bottom: 8px;
  }

  /* body 樣式對齊 Research 頁列表的 .research-body p（12px / 0.10em / 1.5 / #898989 / 首行縮排 2em） */
  .research-single-body {
    margin-top: 0;        /* 避免 p:first-child 加上 margin-top 破壞 10px 間距 */
    margin-bottom: 24px;
    max-width: none;       /* 桌面用 max-width:640px，手機要滿版 */
  }
  .research-single-body p {
    font-size: 12px;
    letter-spacing: 0.10em;
    line-height: 1.5;
    color: #898989;
    margin: 0 0 8px 0;
    text-indent: 2em;
  }
  .research-single-body p:last-child {
    margin-bottom: 0;
  }

  /* ── Single Research 手機版 Lightbox ───────────────────────
     點 gallery 圖片 → 全螢幕單張瀏覽
     左/右白底黑邊圓圈箭頭、右上角白底黑邊圓圈 × 關閉
     豎屏/橫屏皆滿版單一張瀏覽（max-width:100vw + max-height:100vh + object-fit:contain） */
  .research-lightbox {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .research-lightbox[hidden] {
    display: none;
  }
  .research-lightbox .lightbox-img {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }
  /* 三個控制鈕共用樣式：對齊 .project-thumbnail hover「+」游標
     視覺直徑 25px、邊框 1.2px、SVG stroke 1.2px（細線一致風格） */
  .research-lightbox .lightbox-close,
  .research-lightbox .lightbox-prev,
  .research-lightbox .lightbox-next {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.2px solid #000000;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
  }
  .research-lightbox .lightbox-close,
  .research-lightbox .lightbox-prev,
  .research-lightbox .lightbox-next {
    /* SVG 設為 block 消除 inline baseline 微小空隙 */
  }
  .research-lightbox .lightbox-close svg,
  .research-lightbox .lightbox-prev svg,
  .research-lightbox .lightbox-next svg {
    display: block;
  }
  /* 右上角 X：固定位置 */
  .research-lightbox .lightbox-close {
    top: 16px;
    right: 16px;
  }
  /* 左右切換鈕：垂直居中、貼邊 12px；藏起時用 hidden 屬性（display:none） */
  .research-lightbox .lightbox-prev,
  .research-lightbox .lightbox-next {
    top: 50%;
    transform: translateY(-50%);
  }
  .research-lightbox .lightbox-prev[hidden],
  .research-lightbox .lightbox-next[hidden] {
    display: none;
  }
  .research-lightbox .lightbox-prev { left: 12px; }
  .research-lightbox .lightbox-next { right: 12px; }

  /* lightbox 開啟時鎖背景捲動，避免雙層滾動 */
  body.lightbox-open {
    overflow: hidden;
  }


  /* ── 手機版隱藏：Copyright ─────
     CV→ / RESEARCH→ / ALL WORKS→ 三個導覽連結全部保留顯示 */
  .site-copyright {
    display: none;
  }

  /* ── 內頁手機版藏哪個欄位 ────────────────────────────
     Information / Research：藏 col-left（SELECTED WORKS），讓使用者集中在 CV / 文章內容
     All Works：藏 col-right（Studio），讓使用者集中在完整作品列表
       理由：All Works 頁主內容在 col-left（全部作品），所以反過來藏 col-right */

  /* 用 :has() 偵測 col-right 內容（同時涵蓋初始載入與 SPA swap 兩種情境）：
     當 col-right 含 .info-cv (CV 模式) 或 .info-research (Research 模式) 時，藏掉 col-left。
     不能用 body.page-template-page-information / page-template-page-research 偵測 — 因為
     SPA swap 不更新 body class，會導致從 CV/Research 回首頁後 col-left 仍被藏，
     看不到 .col-left.spa-enter-left 滑入動畫，造成上下欄動畫不一致 */
  body:has(.col-right .info-cv) .col-left,
  body:has(.col-right .info-research) .col-left {
    display: none;
  }

  body.page-template-page-all-works .col-right {
    display: none;
  }

  /* 手機版 /all-works/ 進場動畫：col-left 從右側滑入（仿 CV→ 進場動感）
     沿用既有的 archSlideInRight keyframes + 同樣 0.8s cubic-bezier timing，
     讓使用者從首頁點 ALL WORKS→ 進入時，視覺節奏與點 CV→ 一致 */
  body.page-template-page-all-works .col-left {
    animation: archSlideInRight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* 手機版首頁進場動畫：col-right (Studio 在頂) 與 col-left (Selected Works 在下) 同步從右滑入。
     對稱 /all-works/ 進場 — 使用者在 ALL WORKS 點 SELECTED WORKS 回首頁時，
     頂部 Studio 與下方作品列表動感一致，避免「下欄動上欄不動」的不協調感。
     第一次載入首頁時 splash overlay (z-index 9999) 蓋住整個畫面，
     0.8s 動畫在 splash 期間跑完，使用者看不到，所以不會干擾首次進站體驗 */
  body.home .col-left,
  body.home .col-right {
    animation: archSlideInRight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* SPA swap 模式下 col-left 重播動畫（JS 加上 spa-enter-* class 觸發）：
     用途：從 /research/ 或 /information/ 點 ZOOM IN DESIGN logo 回首頁時，
     col-right 走 SPA swap 已有滑入動畫；col-left（Selected Works）原本被藏，
     :has() 偵測 col-right 內容變化解除藏起，但無動畫 →
     JS 加 class 後配合此 CSS 讓 col-left 跟 col-right 同方向滑入，上下欄一致。

     !important 不可省：上方 body.home .col-left 規則 specificity (0,2,1) 高於
     .col-left.spa-enter-* (0,2,0)，會把 animation-name 鎖死成 archSlideInRight，
     導致 SPA swap 不播動畫。col-right 的 .col-right.spa-enter-* 規則也用 !important
     是同樣理由（line 159-164） */
  .col-left.spa-enter-right {
    animation: archSlideInRight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  }
  .col-left.spa-enter-left {
    animation: archSlideInLeft 0.8s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  }
}

/* ── Splash Overlay（首頁 Zoom In 開場動畫，方案 A）─────────────────────
   進站時 LOGO 從 scale 0.3 放大到 1.0、停 0.5s、淡出顯示首頁；
   只在第一次進首頁播放（由 JS 用 sessionStorage 控制是否渲染 .is-active）；
   使用者點擊 / 按鍵可中途跳過（JS 加 .skip 強制隱藏） */
#splash-overlay {
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: none;
}

#splash-overlay.is-active {
  display: flex;
  pointer-events: auto;
  animation: splashFadeOut 0.8s ease-out 2s forwards;
}

#splash-overlay .splash-logo {
  /* 80vmin 自適應大小螢幕（取視窗較短邊的 80%），最大不超過 1200px */
  width: 80vmin;
  max-width: 1200px;
  height: auto;
  display: block;
  animation: splashZoomIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#splash-overlay.skip,
#splash-overlay.skip .splash-logo {
  animation: none !important;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

@keyframes splashZoomIn {
  from { transform: scale(0.3); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

@keyframes splashFadeOut {
  from { opacity: 1; visibility: visible; }
  to   { opacity: 0; visibility: hidden; }
}


/* ── Research 文章圖片畫廊（左欄切換模式）─────────────── */
/* 點 Research 文章封面 → 左欄從 Selected Works 切換成此模式 */
.view-gallery {
  /* 沿用 .site-main 的 padding */
}
.gallery-back {
  font-size: 12px;
  letter-spacing: 0.10em;
  margin-bottom: 30px;
}
.gallery-back-bottom {
  margin-top: 10px;
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
/* ← BACK 右側顯示文章標題：純灰色文字、無底色（與 01 Essay 同色系） */
.gallery-back-title {
  color: #898989;
  font-size: 12px;
  letter-spacing: 0.10em;
  line-height: 1.4;
}
.gallery-back a {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.gallery-back a:hover {
  text-decoration: underline;
}
.gallery-header {
  margin-bottom: 30px;
}
.gallery-title {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.10em;
  line-height: 1.4;
  margin: 0 0 6px 0;
}
.gallery-title span {
  background-color: #000;
  color: #fff;
  padding: 2px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.gallery-meta {
  font-size: 12px;
  letter-spacing: 0.10em;
  line-height: 1.4;
  color: #898989;
  margin: 0;
  padding-left: 6px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.gallery-meta .gallery-subtitle {
  color: #FF5F43;
  text-align: right;
}
/* 主大圖：16:9 黑底容器、原圖 contain 居中 */
.gallery-main {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  overflow: hidden;
  margin-bottom: 8px;
}
.gallery-main-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* 縮圖橫排：一列 10 張寬，超出時水平捲動；隱藏原生 scrollbar，由下方自訂進度條 + 箭頭控制 */
.gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gallery-thumbs::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* ← / → 控制 + 進度條：一行三欄佈局 */
.thumbs-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.thumbs-nav {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border: 1px solid #000;
  border-radius: 50%;
  background: #fff;
  color: #000;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.thumbs-nav:hover {
  background: #000;
  color: #fff;
}
.thumbs-progress {
  flex: 1;
  height: 2px;
  background: #d0d0d0;
  position: relative;
}
.thumbs-progress-bar {
  position: absolute;
  top: 0;
  height: 100%;
  background: #000;
  transition: left 0.15s ease, width 0.15s ease;
}
.gallery-thumb {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: #000;
  /* 寬度固定為「容器寬度 / 10 - 間距分擔」，第一列剛好 10 張、超出水平捲動 */
  flex: 0 0 calc((100% - 72px) / 10);
  aspect-ratio: 16 / 9;
  cursor: pointer;
  overflow: hidden;
  outline: 1px solid transparent;
  outline-offset: -1px;
  transition: outline-color 0.15s ease;
}
.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.gallery-thumb:hover {
  outline-color: rgba(0, 0, 0, 0.4);
}
/* active：縮圖整張變 #FF5F43 色塊（蓋住原圖），提示「這是當前大圖顯示中的那張」 */
.gallery-thumb.is-active {
  background: #FF5F43;
}
.gallery-thumb.is-active img {
  visibility: hidden;
}

/* ── 首頁底部 Slogan 跑馬燈 ─────────────────────────────────
   位置：fixed bottom，由 footer.php 渲染，JS 透過 .is-home-view class 控制顯示
   背景：#1A1A1A 深灰，文字：白色，字型 Noto Sans TC
   速度：60 秒一輪，linear infinite
   無縫原理：HTML 內重複 4 組（每組 = 品牌名 + em-dash + Slogan + / 分隔），
            動畫從 translateX(0) 跑到 translateX(-50%)
            因為前 2 組與後 2 組完全相同，循環時看不出接縫
   互動：滑鼠移上跑馬燈時暫停動畫 */
.slogan-ticker {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  /* 跑馬燈總高 35px，文字垂直置中（line-height 同步） */
  height: 35px;
  background-color: #1A1A1A;
  color: #FFFFFF;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 35px;
  overflow: hidden;
  white-space: nowrap;
  z-index: 9999;
  /* 預設藏在畫面下方（向下偏移自身高度 100%），等 splash LOGO 漸大動畫結束後，
     body 會獲得 .splash-done class，跑馬燈從下方快速滑入畫面。
     使用 transform 而非 bottom 屬性，效能較好（不觸發 reflow）；
     ease-out 讓插入時呈現「快進緩停」的俐落感，像被推上來輕輕停住 */
  transform: translateY(100%);
  transition: transform 0.35s ease-out 0.1s;
}
/* 必須同時滿足兩個條件，跑馬燈才會滑入：
   1. .splash-done — splash 動畫結束後才會出現
   2. .is-home-view — URL 是首頁，代表「左欄 Selected Works + 右欄主頁 Studio Profile」同時成立
   進到 CV 或 Research（SPA 切換）時，is-home-view 會被移除 → 跑馬燈滑下去隱藏 */
body.splash-done.is-home-view .slogan-ticker {
  transform: translateY(0);
}
.slogan-ticker-track {
  display: inline-flex;
  align-items: center;
  animation: slogan-marquee 60s linear infinite;
  will-change: transform;
}
/* 滑鼠 hover 跑馬燈區塊時，暫停動畫，讓使用者可以從容點擊連結 */
.slogan-ticker:hover .slogan-ticker-track {
  animation-play-state: paused;
}
/* 品牌名 — 作為 Slogan 的「說話者」前綴，字距略寬給編輯感 */
.slogan-ticker-brand {
  padding: 0 0.5em 0 1.5em;
  letter-spacing: 0.05em;
  font-weight: 500;
}
/* em-dash 連接品牌名與 Slogan，視覺上稍弱一點，當作「歸屬符號」 */
.slogan-ticker-emdash {
  padding: 0 0.4em;
  opacity: 0.7;
}
.slogan-ticker-item {
  padding: 0 1.5em 0 0.5em;
  letter-spacing: 0.02em;
}
.slogan-ticker-sep {
  padding: 0 0.5em;
  opacity: 0.55;
}

@keyframes slogan-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 跑馬燈總高 35px，body 對應留出空間避免遮住內容
   改用 .is-home-view（由 JS 動態切換）而非 .home，這樣 SPA 切換進 CV/Research
   時跑馬燈消失，body 也跟著收回 padding，不會有空蕩底部 */
body.is-home-view {
  padding-bottom: 35px;
}

/* ── 手機版隱藏底部跑馬燈黑邊（nuclear 保險）─────────
   2026-05-20：Marco 反映手機版 /information/ 與 /research/ 底部仍出現跑馬燈黑邊。
   原本 .slogan-ticker 靠 transform: translateY(100%) 在非首頁退場，
   但 iOS Safari 的 fixed + transform 組合會殘留邊緣像素（viewport quirk）。
   策略：在手機版所有「非首頁」(body 沒有 .is-home-view) 都 hard-hide。
   不影響桌面 / iPad（包在 @media (max-width: 768px) 內），
   不影響首頁手機版（body.is-home-view 時保留跑馬燈正常顯示）。
   All Works 頁本來就看不到跑馬燈，加上這條也不會造成可感差異。 */
@media (max-width: 768px) {
  body:not(.is-home-view) .slogan-ticker {
    display: none !important;
  }
}

/* ── iPad 範圍（橫屏 + 直屏）：主頁跑馬燈不遮 copyright ─────────
   2026-05-20 下午：Marco 反映 iPad 橫屏 + 直屏主頁的 © Copyright 都被跑馬燈蓋住。
   背景：col-right 在 iPad 範圍是 fixed top:0; height:100vh，copyright 在 col-right 內部底部，
   跑馬燈 fixed bottom:0; height:35px; z-index:9999 蓋住 col-right 底部 35px → copyright 被遮。
   解法：把 col-right 高度縮短 35px、分隔線底部也跟著縮，
   copyright 自然往上 35px 跟跑馬燈頂部對齊。
   只在 body.is-home-view 套用（跑馬燈只在主頁顯示，內頁 col-right 維持滿版）。
   橫屏 + 直屏一起套（兩個 orientation 都會遮）。 */
@media (max-width: 1399px) and (min-width: 769px) {
  body.is-home-view .col-right {
    height: calc(100vh - 35px) !important;
  }
  body.is-home-view .site-wrapper::before {
    bottom: 45px !important;  /* 35 跑馬燈 + 10 原本底部留白 */
  }
}

/* ── iPad 橫屏：右欄底部按鍵與 copyright 距離加大 ─────────
   2026-05-20 下午：Marco 反映 iPad 橫屏主頁 ALL WORKS → 與 © Copyright
   之間 13px 距離太緊；/all-works/ 的 SELECTED WORKS → 與 © Copyright 同樣太緊。
   解法：把 .site-copyright 的 padding-top 從 13px 改成 53px（多 40px）。
   40px 沿用 .info-cv .cv-link 與 .info-research .cv-link 的 margin-top: 40px 既有 rhythm
   （CV / Research 模式中「按鍵與內容分開」用的同一個基準值，視覺一致）。
   只動橫屏（直屏 viewport 高、本來就比較鬆，Marco 沒反映直屏太緊）。
   主頁與 /all-works/ 兩處同時套用（兩處的 .site-copyright 都來自 footer.php 同一個 div）。 */
@media (max-width: 1399px) and (min-width: 769px) and (orientation: landscape) {
  body.home .site-copyright,
  body.is-home-view .site-copyright,
  body.page-template-page-all-works .site-copyright {
    padding-top: 53px !important;
  }
}