/* ============================================================================
   Chloe — iOS 開發者作品集
   設計 token 都放在 :root，想微調配色改這裡就好。
   ============================================================================ */

:root {
  --bg:           #FAFBFD;   /* 頁面底色 */
  --surface:      #FFFFFF;   /* 白色區塊 */
  --tint:         #F2F5FA;   /* 淺灰藍區塊（作品集） */
  --ink:          #16202F;   /* 標題文字 */
  --ink-2:        #1B2739;
  --body:         #3E4E66;   /* 內文 */
  --body-2:       #5E6E86;   /* 次要內文 */
  --muted:        #55657E;   /* 導覽列文字 */
  --accent:       #3B6DB8;   /* 主色 */
  --accent-deep:  #2E5A9E;   /* 主色（按鈕） */
  --accent-soft:  rgba(59, 109, 184, .09);
  --line:         rgba(43, 54, 72, .10);
  --line-soft:    rgba(43, 54, 72, .08);

  --dark:         #16202F;   /* 頁尾底色 */
  --dark-title:   #F4F7FC;
  --dark-body:    #8FA0BC;
  --dark-link:    #C8D4E6;
  --dark-dim:     #5E7091;

  --sans:  "Noto Sans TC", "PingFang TC", system-ui, -apple-system, sans-serif;
  --serif: "Noto Serif TC", "Songti TC", Georgia, serif;
  /* Space Grotesk 不含中文，明確指定中文 fallback，避免混排時掉到不同字體 */
  --mono:  "Space Grotesk", "Noto Sans TC", "PingFang TC", ui-monospace, monospace;

  --gutter: clamp(24px, 6vw, 88px);
  --sectionY: clamp(56px, 9vh, 110px);
}

* { box-sizing: border-box; }

/* overflow-x 先寫 hidden 再寫 clip：clip 是 Safari 16+ 才支援，
   舊機型會忽略而讓 Hero 光暈撐寬頁面、整站被 Safari 縮小塞進螢幕 */
html { scroll-behavior: smooth; scroll-padding-top: 84px; background: var(--bg); overflow-x: hidden; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  font-family: var(--sans);
  color: #2B3648;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

a { color: var(--accent); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--accent-deep); }
::selection { background: #D6E4F7; color: var(--ink-2); }

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes drift  { 0% { transform: translate(0,0); } 50% { transform: translate(40px,-30px); } 100% { transform: translate(0,0); } }

/* ── 導覽列 ───────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px var(--gutter);
  background: rgba(250, 251, 253, .85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
/* 字體與作品集的作品標題（.work__title）一致，但字重放輕不要粗體 */
.nav__brand {
  font-family: var(--sans); font-size: 16px; font-weight: 500;
  color: var(--ink-2); letter-spacing: .02em;
}
.nav__brand:hover { color: var(--ink-2); }
.nav__links {
  display: flex; align-items: center; gap: clamp(14px, 2.6vw, 30px);
  font-size: 14px; font-weight: 500;
}
.nav__link {
  color: var(--muted); padding-bottom: 3px; border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav__link:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* 語言切換 */
.langtoggle {
  display: inline-flex; align-items: center; gap: 2px;
  height: 38px; padding: 0 6px;
  border-radius: 999px; border: 1px solid rgba(43, 54, 72, .18);
  background: #FFF; cursor: pointer;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
}
.langtoggle__pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 12px; border-radius: 999px;
  color: var(--muted); transition: background .2s ease, color .2s ease;
}
.langtoggle__pill.is-active { background: var(--ink); color: #FFF; }

/* 漢堡按鈕：只在手機出現 */
.nav__burger {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 40px; height: 38px; padding: 0 10px;
  border: 1px solid rgba(43, 54, 72, .18); border-radius: 10px;
  background: #FFF; cursor: pointer;
}
.nav__burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--ink); transition: transform .25s ease, opacity .2s ease;
}
/* 展開時三條線變成 ✕ */
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 手機版下拉選單（貼在導覽列下緣） */
.nav__menu {
  position: absolute; top: 100%; left: 0; right: 0;
  display: flex; flex-direction: column;
  padding: 8px var(--gutter) 16px;
  background: var(--bg);   /* 不透明實色，下方內容不會透出來 */
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 14px 24px -18px rgba(27, 39, 57, .25);
}
.nav__menulink {
  padding: 13px 2px; font-size: 15px; font-weight: 500; color: var(--body);
  border-bottom: 1px solid rgba(43, 54, 72, .07);
}
.nav__menulink:last-child { border-bottom: none; }

/* ── Hero ─────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: clamp(96px, 16vh, 180px) var(--gutter) clamp(88px, 14vh, 160px);
  /* 設計稿寫 1080px，但實測那樣文字會太靠中間；1250px 才對得上設計稿截圖的位置 */
  max-width: 1250px; margin: 0 auto;
}
.hero__blob { position: absolute; border-radius: 999px; pointer-events: none; }
.hero__blob--a {
  top: -120px; right: -160px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(120,160,220,.14), transparent 65%);
  animation: drift 14s ease-in-out infinite;
}
.hero__blob--b {
  bottom: -80px; left: -140px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(150,180,225,.12), transparent 65%);
  animation: drift 18s ease-in-out infinite reverse;
}
.hero__inner {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(40px, 5vw, 72px);
  animation: fadeUp .8s ease both;
}
/* 設計稿的文字欄 flex 基準是 540px（來自段落 max-width），加上人像照 300px
   與間距 72px 剛好會超過容器內寬 907px，差幾 px 就會整欄換行到照片下方。
   改成較小的基準寬度讓它可縮，才能穩定維持設計稿的「文字左、照片右」。 */
.hero__text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hero__title {
  margin: 0;
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(36px, 6vw, 64px); line-height: 1.2;
  color: var(--ink); letter-spacing: .01em; text-wrap: pretty;
}
.accent { color: var(--accent); }
.hero__desc {
  margin: 0; max-width: 540px;
  font-size: clamp(15px, 1.6vw, 17px); line-height: 1.9; color: var(--body-2);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }

.hero__portrait {
  position: relative; overflow: hidden; flex: 0 0 auto;
  width: clamp(200px, 24vw, 300px); aspect-ratio: 3 / 4;
  border-radius: 26px;
  background: linear-gradient(150deg, #EEF3FA, #E3EBF6);
  border: 1px solid var(--line);
  box-shadow: 0 24px 48px -28px rgba(27, 39, 57, .3);
}
.hero__portrait img { width: 100%; height: 100%; object-fit: cover; }

/* 圖片還沒放進來時顯示的佔位標籤 */
.ph {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; color: #8FA3C0;
  letter-spacing: .1em; text-align: center; line-height: 1.6;
  white-space: pre-line; pointer-events: none;
}
.is-empty .ph { display: flex; }
.is-empty img { visibility: hidden; }

/* ── 區塊共用 ─────────────────────────────────────────── */
.section--white { background: var(--surface); }
.section--plain { background: var(--surface); }
.section--tint  { background: var(--tint); }
.section--white,
.section--tint {
  border-top: 1px solid rgba(43, 54, 72, .12);
  box-shadow: inset 0 12px 24px -20px rgba(27, 39, 57, .18);
}
.section--tint { border-bottom: 1px solid rgba(43, 54, 72, .12); }

.section__inner {
  padding: var(--sectionY) var(--gutter);
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 40px;
}
/* 原本 900px（設計稿值）。內容加上條列後卡片太擠，且標題會比「作品集」多縮排
   150px 造成兩區沒對齊，所以統一成 1200px，改用卡片自身的 max-width 控制行長。 */
.section--narrow .section__inner { max-width: 1200px; gap: 44px; }

.section__head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }

.h2 {
  margin: 0;
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(26px, 3.4vw, 38px); color: var(--ink);
}
.eyebrow {
  font-family: var(--mono); font-size: 13px; letter-spacing: .2em; color: var(--accent);
}
.eyebrow--muted { font-size: 12px; letter-spacing: .1em; color: #8494AB; }

/* ── 關於我 + 技能 ───────────────────────────────────── */
/* 上排：標題 + 開場主張（橫跨整區）；下排：內文 | 技能 兩欄 */
.about { display: flex; flex-direction: column; gap: clamp(36px, 5vw, 56px); }
.about__intro { display: flex; flex-direction: column; gap: 18px; }
.about__cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(40px, 5vw, 64px); align-items: start;
}
/* 開場主張：放大成整區的視覺焦點，左緣與標題、內文切齊 */
.about__quote {
  margin: 0; max-width: 860px;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(20px, 2.5vw, 29px); line-height: 1.6;
  color: var(--ink); letter-spacing: .01em; text-wrap: pretty;
}
.about__body { display: flex; flex-direction: column; gap: 22px; }
.about__group { display: flex; flex-direction: column; gap: 6px; }
.about__label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: #8494AB;
}
.about__p strong { font-weight: 700; color: var(--ink); }
.about__p {
  margin: 0; font-size: 15.5px; line-height: 1.95; color: var(--body-2); text-wrap: pretty;
}

.skills { display: flex; flex-direction: column; }
.skill {
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
/* 第一組去掉上邊距，讓它的頂端跟左欄第一段文字切齊 */
.skill:first-child { padding-top: 0; }
.skill__title { font-size: 16px; font-weight: 700; color: var(--ink); }

.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  font-size: 13.5px; color: var(--body);
  background: var(--accent-soft); border-radius: 999px; padding: 6px 15px;
}

/* ── 作品集 ───────────────────────────────────────────── */
/* 用 430px 當斷點：桌機排 2 欄（四個作品 2×2），窄螢幕自動變 1 欄。
   3 欄時卡片內容區只有 ~278px，App 全稱會被迫換行，所以改成 2 欄。
   最小值包 min(…, 100%)，否則手機上軌道撐在 430px 不肯縮，整排會溢出視窗。 */
.works {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr)); gap: 22px;
}
.work {
  display: flex; flex-direction: column; text-align: left;
  /* 外框從 .09 提到 .14：圖示區的漸層起點(#EEF3FA)與區塊背景(#F2F5FA)
     亮度只差 0.5%，太淡的框撐不住卡片上緣，會融進背景。 */
  border: 1px solid rgba(43, 54, 72, .14); border-radius: 22px;
  background: var(--surface); overflow: hidden; cursor: pointer;
  font: inherit; color: inherit; padding: 0;
  box-shadow: 0 4px 14px -8px rgba(27, 39, 57, .16);
  transition: transform .3s ease, box-shadow .3s ease;
}
.work:hover { transform: translateY(-5px); box-shadow: 0 16px 32px -18px rgba(27, 39, 57, .2); }
.work:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.work__cover {
  position: relative;
  height: 150px; flex: none;
  background: linear-gradient(150deg, #EEF3FA, #E3EBF6);
  display: flex; align-items: center; justify-content: center;
}
/* 滿版封面圖：有 images/{key}-cover(-{lang}) 檔案的作品才會出現 */
.work__coverbg { position: absolute; inset: 0; }
.work__coverbg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.work__coverbg.is-empty { display: none; }
.work.has-cover .work__icon { display: none; }        /* 封面出現時，置中圖示讓位 */

/* 標題列：封面模式下小圖示排在標題前 */
.work__titlerow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.work__mark {
  display: none; flex: none; width: 28px; height: 28px;
  border-radius: 7px; overflow: hidden;
  box-shadow: 0 2px 6px -2px rgba(27, 39, 57, .3);
}
.work__mark img { width: 100%; height: 100%; object-fit: cover; }
.work.has-cover .work__mark { display: block; }
.work__icon {
  position: relative; overflow: hidden;
  width: 92px; height: 92px; border-radius: 22px;
  box-shadow: 0 10px 22px -10px rgba(27, 39, 57, .3);
  background: #FFF;
}
.work__icon img { width: 100%; height: 100%; object-fit: cover; }
.work__icon .ph { font-size: 11px; letter-spacing: .04em; }
.work__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
/* 小螢幕時字級跟著視窗縮（390px 時約 16.5px），避免長標題被裁切；
   overflow-wrap 保底，極窄螢幕也能在任意處斷行 */
.work__title {
  font-size: clamp(15.5px, 4.3vw, 19px); font-weight: 900; color: var(--ink);
  overflow-wrap: break-word;
}
.work__desc { margin: 0; font-size: 14px; line-height: 1.75; color: var(--body-2); }
.work__more { font-size: 13px; font-weight: 700; color: var(--accent); }


/* ── 經歷時間軸 ───────────────────────────────────────── */
.journey { display: flex; flex-direction: column; }
/* 年份欄從設計稿的 110px 加寬到 150px：實際內容是「2024/07 — 2025/06」，110px 放不下 */
.jrow { display: grid; grid-template-columns: 150px 30px 1fr; gap: 0 8px; }
.jrow__year {
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  color: var(--accent); padding-top: 2px; text-align: right;
}
.jrow__rail { display: flex; flex-direction: column; align-items: center; }
.jrow__dot {
  width: 11px; height: 11px; border-radius: 999px;
  background: var(--accent); border: 2px solid #C6D9F2; flex: none; margin-top: 4px;
}
.jrow__line {
  width: 1px; flex: 1;
  background: linear-gradient(180deg, rgba(59,109,184,.3), rgba(59,109,184,.05));
}
.jrow:last-child .jrow__line { background: none; }
.jrow__body { padding: 0 0 28px 10px; }

/* 工作經歷卡片：時間軸區塊是白底，所以卡片用比白稍暗的 --bg 加細框才看得出來 */
.jcard {
  max-width: 780px;                 /* 控制條列的行長，太長不好讀 */
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 24px;
  background: var(--bg);
  border: 1px solid rgba(43, 54, 72, .12);
  border-radius: 18px;
}
.jcard__title { font-size: 18px; font-weight: 700; color: var(--ink); }
.jcard__company { font-size: 14.5px; line-height: 1.6; color: var(--body); }

.jcard__points { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.jcard__points li {
  position: relative; padding-left: 20px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 14.5px; line-height: 1.8; color: var(--body-2); text-wrap: pretty;
}
.jpoint__title { font-size: 15px; font-weight: 700; color: var(--ink); }
.jpoint__body { font-size: 14.5px; line-height: 1.85; color: var(--body-2); }
/* 自訂項目符號：小圓點，對齊第一行文字的視覺中線 */
.jcard__points li::before {
  content: ""; position: absolute; left: 4px; top: .72em;
  width: 6px; height: 6px; border-radius: 999px; background: var(--accent);
}

/* ── 頁尾 ─────────────────────────────────────────────── */
.footer { background: var(--dark); }
.footer__inner {
  max-width: 1200px; margin: 0 auto;
  padding: clamp(56px, 9vh, 96px) var(--gutter) 40px;
  display: flex; flex-direction: column; gap: 44px;
}
/* 聯絡區塊靠左，外部連結靠右，與下方的版權列／導覽列同一種左右分佈 */
.footer__main {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: flex-end; gap: 32px;
}
.footer__contact { display: flex; flex-direction: column; gap: 16px; }
.footer__title {
  margin: 0; font-family: var(--serif); font-weight: 900;
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1.3;
  color: var(--dark-title); text-wrap: pretty;
}
.footer__desc {
  margin: 0; max-width: 540px; font-size: 15px; line-height: 1.85; color: var(--dark-body);
}
.footer__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
/* 外部連結：比按鈕輕，避免跟「寄信給我」搶注意力 */
.footer__social { display: flex; flex-wrap: wrap; gap: 22px; font-size: 14px; }
.footer__social a { color: var(--dark-link); }
.footer__social a:hover { color: #FFF; }
.footer__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-top: 24px; border-top: 1px solid rgba(244, 247, 252, .1);
}
/* 與導覽列的品牌名同字體，避免同一個名字出現兩種樣子 */
.footer__copy { font-family: var(--sans); font-size: 12px; color: var(--dark-dim); }
.footer__nav { display: flex; gap: 20px; font-size: 13px; }
.footer__nav a { color: var(--dark-link); }
.footer__nav a:hover { color: #FFF; }

/* ── 按鈕 ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 50px; padding: 0 30px; border-radius: 999px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn--primary { background: var(--accent-deep); color: #FFF; }
.btn--primary:hover { background: var(--accent); color: #FFF; }
.btn--cta { height: 48px; padding: 0 28px; background: var(--accent); color: #FFF; }
.btn--cta:hover { background: #4E86D8; color: #FFF; }
.btn--outline {
  height: 48px; padding: 0 28px;
  background: transparent; color: var(--dark-link);
  border-color: rgba(244, 247, 252, .25); font-weight: 500;
}
.btn--outline:hover { border-color: rgba(244, 247, 252, .5); color: #FFF; }
.btn--back {
  height: 40px; padding: 0 20px; background: #FFF;
  border-color: rgba(43, 54, 72, .18); color: var(--body); font-size: 14px;
}
.btn--back:hover { background: var(--tint); }

/* ── 作品詳情頁 ───────────────────────────────────────── */
.detail {
  position: fixed; inset: 0; z-index: 50;
  background: var(--bg); overflow-y: auto;
  animation: fadeUp .3s ease both;
}
.detail__nav { position: sticky; top: 0; }
.detail__inner {
  max-width: 1200px; margin: 0 auto;
  padding: clamp(32px, 6vh, 64px) clamp(20px, 4vw, 48px) 80px;
  display: flex; flex-direction: column; gap: 28px;
}
.detail__head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.detail__icon {
  position: relative; overflow: hidden; flex: none;
  width: 72px; height: 72px; border-radius: 17px; background: #FFF;
  box-shadow: 0 8px 18px -8px rgba(27, 39, 57, .3);
}
.detail__icon img { width: 100%; height: 100%; object-fit: cover; }
.detail__icon .ph { font-size: 10px; letter-spacing: .04em; }
.detail__titles { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.detail__title {
  margin: 0; font-family: var(--serif); font-weight: 900;
  font-size: clamp(30px, 4.4vw, 46px); color: var(--ink);
}
.detail__intro {
  margin: 0; max-width: 900px;
  font-size: 16.5px; line-height: 1.95; color: var(--body); text-wrap: pretty;
}
.detail__link { align-self: flex-start; }
/* 簡介與徽章同一列：文字佔滿左側，徽章靠右、頂部與第二行文字切齊 */
.detail__lead {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 20px clamp(24px, 4vw, 56px);
}
.detail__lead .detail__intro { flex: 1 1 480px; min-width: 0; }
.detail__links {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  /* 頂部往下推一個行框(16.5px × 1.95 ≈ 32px)＋行距(≈7px)，
     讓徽章頂端對齊第二行文字的字頂 */
  margin-top: 39px;
}
/* App Store 官方徽章：Apple 規範最小高度 40px，這裡用 52px */
.appbadge { display: inline-flex; }
.appbadge img { height: 52px; width: auto; display: block; }
.detail__links .btn { height: 44px; padding: 0 24px; font-size: 14px; }

/* ── 內頁：文字區塊 ───────────────────────────────────── */
.dsec { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.dsec__title {
  margin: 0; font-family: var(--serif); font-weight: 900;
  font-size: clamp(21px, 2.4vw, 26px); color: var(--ink);
}
.dsec__body {
  margin: 0; max-width: 900px;
  font-size: 15.5px; line-height: 1.95; color: var(--body-2); text-wrap: pretty;
}


/* ── 內頁：功能條列（與工作經歷的條列同一套樣式）─────────── */
.features { display: flex; flex-direction: column; gap: 18px; max-width: 900px; }
.feature {
  position: relative; padding-left: 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.feature::before {
  content: ""; position: absolute; left: 4px; top: .68em;
  width: 6px; height: 6px; border-radius: 999px; background: var(--accent);
}
.feature__title { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.feature__body { font-size: 15px; line-height: 1.85; color: var(--body-2); text-wrap: pretty; }

#detail-tech .pill { font-size: 14px; padding: 8px 17px; }

/* ── 內頁：成果數據 ───────────────────────────────────── */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 16px; max-width: 900px;
}
.stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 22px; border-radius: 16px;
  background: var(--surface); border: 1px solid rgba(43, 54, 72, .12);
}
.stat__num {
  font-family: var(--mono); font-size: 28px; font-weight: 700; color: var(--accent);
}
.stat__label { font-size: 13.5px; color: var(--body-2); }

.detail__shots { display: flex; flex-direction: column; gap: 12px; }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 14px; }
.shot {
  position: relative; overflow: hidden;
  aspect-ratio: 9 / 19.5; border-radius: 22px;
  background: linear-gradient(150deg, #EEF3FA, #E3EBF6);
  box-shadow: 0 10px 24px -14px rgba(27, 39, 57, .25);
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
/* 有載入到圖片的截圖才可以點開放大 */
.shot:not(.is-empty) { cursor: zoom-in; transition: transform .25s ease, box-shadow .25s ease; }
.shot:not(.is-empty):hover { transform: translateY(-4px); box-shadow: 0 18px 34px -16px rgba(27, 39, 57, .35); }

/* ── 截圖放大檢視 ─────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(8px, 2vw, 28px);
  background: rgba(11, 17, 26, .92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fadeIn .2s ease both;
  cursor: zoom-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox__img {
  max-height: 88vh; max-width: min(92vw, 460px);
  border-radius: 22px; cursor: default;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
}
.lightbox__nav, .lightbox__close {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid rgba(244, 247, 252, .22);
  background: rgba(244, 247, 252, .08); color: #F4F7FC;
  cursor: pointer; font-family: inherit; flex: none;
  transition: background .2s ease, border-color .2s ease;
}
.lightbox__nav { width: 52px; height: 52px; font-size: 30px; line-height: 1; padding-bottom: 4px; }
.lightbox__close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; font-size: 17px; }
.lightbox__nav:hover, .lightbox__close:hover {
  background: rgba(244, 247, 252, .18); border-color: rgba(244, 247, 252, .45);
}
.lightbox__count {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 13px; letter-spacing: .14em; color: #8FA0BC;
}
html.lightbox-open, body.lightbox-open { overflow: hidden; }

@media (max-width: 720px) {
  .lightbox__nav { width: 42px; height: 42px; font-size: 24px; }
  .lightbox__img { max-width: 74vw; }
}

/* 詳情頁開啟時鎖住背後的頁面捲動。
   注意：因為 html 有 overflow-x: clip（擋 Hero 光暈溢出），body 的 overflow
   不會再傳遞給視窗，所以 html 也必須一起鎖，否則會出現兩條捲軸。 */
html.detail-open, body.detail-open { overflow: hidden; }

/* ── 手機版 ───────────────────────────────────────────── */
/* 設計稿沒有寫任何 media query（在桌機畫布上製作），
   這一段只補上導覽列在窄螢幕的換行，避免手機上擠成一團。
   其餘版面沿用設計稿原本的 clamp() 與 flex-wrap 自然縮放。 */
@media (max-width: 720px) {
  /* 手機導覽列維持單行：品牌名在左，中英切換＋漢堡在右；四個連結收進下拉選單 */
  .nav { padding: 12px var(--gutter); }
  .nav__links { gap: 10px; }
  .nav__links .nav__link { display: none; }
  .nav__burger { display: flex; }
  /* 徽章換行到文字下方時，不需要對齊第二行的位移 */
  .detail__links { margin-top: 0; }
  /* 畫面預覽改成橫向滑動：截圖固定寬度排成一列，可左右滑、逐張吸附，
     露出下一張的邊緣提示還能繼續滑 */
  .shots {
    display: flex; gap: 12px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    /* 出血到內頁左右邊界，滑動時圖能貼齊螢幕邊緣 */
    margin: 0 calc(-1 * clamp(20px, 4vw, 48px));
    padding: 0 clamp(20px, 4vw, 48px) 8px;
  }
  .shot { flex: 0 0 min(230px, 66%); scroll-snap-align: start; }
  /* 手機上左右分欄會把卡片擠到一行只剩幾個字，改成上下堆疊：
     年份在上、卡片在下，時間軸的直線與圓點收起來 */
  .jrow { grid-template-columns: 1fr; gap: 8px; }
  .jrow__rail { display: none; }
  .jrow__year { text-align: left; font-size: 13px; padding-top: 0; }
  .jrow__body { padding: 0 0 32px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}