:root {
  --ink: #111116;
  --paper: #f6f5f0;
  --paper-2: #e9e7df;
  --paper-3: #d6d3c9;
  --muted: #5f5e59;
  --blue: #3d35ff;
  --blue-dark: #241ce0;
  --acid: #c8ff29;
  --live: #007a46;
  --warn: #9a4a00;
  --mono: "IBM Plex Mono", "Cascadia Mono", monospace;
  --han: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;

  /* iOS 毛玻璃系統
     只用在「背後真的有東西可以糊」的位置：捲動內容會穿過的標頭、蓋在截圖上的標籤、蓋在暗底上的彈窗。
     平鋪在單色底上的毛玻璃只會變成半透明色塊，沒有意義，所以不那樣用。
     saturate 是 iOS 質感的關鍵：把背後的顏色吸上來，玻璃才像活的而不是霧面塑膠。 */
  --glass-blur: saturate(180%) blur(20px);
  --glass-blur-sm: saturate(160%) blur(12px);
  --glass-light: rgba(246, 245, 240, .72);
  --glass-light-strong: rgba(246, 245, 240, .86);
  /* .68 而非 .58：這層玻璃會疊在淺色截圖上，白字對比在 .58 只有約 4.5:1 剛好卡 AA 線，
     疊到全白背景就會掉下去。.68 讓最壞情況仍有約 6:1。 */
  --glass-dark: rgba(17, 17, 22, .68);
  --glass-hairline-dark: rgba(255, 255, 255, .14);
  --glass-sheen: inset 0 1px 0 rgba(255, 255, 255, .6);
  --glass-sheen-dark: inset 0 1px 0 rgba(255, 255, 255, .16);
  --glass-drop: 0 .5rem 1.75rem rgba(17, 17, 22, .14);
  /* 原本 1.125rem 是 iOS 式大圓角，跟全站 2px 直角硬邊是兩套語言。
     收到 6px：保留一點柔化讓玻璃面不至於太生硬，但不另起一套形狀語言。 */
  /* 圓角分四級：不同層級的元件用不同弧度。
     全站套同一個圓角值，正是「看起來像模板」的來源。 */
  --r-xs: 4px;    /* 標籤 chip */
  --r-sm: 10px;   /* 按鈕、輸入框 */
  --r-md: 14px;   /* 卡片、面板 */
  --r-lg: 20px;   /* 彈窗這類最大的浮層 */
  --shadow-soft: 0 2px 10px rgba(17, 17, 22, .06);
  --shadow-lift: 0 10px 30px -8px rgba(17, 17, 22, .18);
  --space-2: 1rem;
  --rule: 2px solid var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--han);
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input { font: inherit; }
a { color: inherit; }
img { max-width: 100%; }
main section[id] { scroll-margin-top: 6rem; }
::selection { background: var(--blue); color: #fff; }

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--acid);
  color: var(--ink);
  font-weight: 700;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 4rem;
  padding: .75rem clamp(1rem, 4vw, 4rem);
  border-bottom: var(--rule);
  background: var(--glass-light);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-sheen);
}
.brand, .eyebrow, .signal-head, .carousel-actions {
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.brand { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none; white-space: nowrap; }
.brand-mark { width: 1.5rem; height: .55rem; background: var(--blue); box-shadow: .25rem .25rem 0 var(--ink); }
.site-header nav { display: flex; gap: clamp(.75rem, 2vw, 2rem); overflow-x: auto; scrollbar-width: none; }
.site-header nav::-webkit-scrollbar { display: none; }
/* 導覽列內容是中文，用 --han；mono 沒有 CJK 會 fallback，且字距是為拉丁字調的 */
.site-header nav a { font-family: var(--han); font-size: .875rem; font-weight: 700; letter-spacing: .01em; text-decoration-thickness: 2px; text-underline-offset: .35rem; white-space: nowrap; }

.hero {
  display: grid;
  /* 不再撐滿視窗高：統計縮成兩格後，滿版會讓右側深色面板空掉一大半 */
  border-bottom: var(--rule);
}
.hero-copy, .signal-board { padding: clamp(3rem, 8vw, 8rem) clamp(1rem, 4vw, 4rem); }
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 首屏也鋪桌布：否則使用者一進站、還沒捲動時，標頭玻璃底下是純色，效果完全看不到 */
  background:
    radial-gradient(60% 40% at 8% 0%, rgba(61, 53, 255, .13), transparent 62%),
    radial-gradient(45% 32% at 92% 6%, rgba(200, 255, 41, .20), transparent 60%);
}
.eyebrow { margin: 0 0 1rem; color: var(--blue-dark); }
.hero h1 {
  /* em 不用 ch，理由同下方 section 標題：ch 是拉丁文字寬，套純中文會低估行寬 */
  max-width: 11em;
  margin: 0;
  font-size: clamp(2.5rem, 5.4vw, 6.25rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: .005em;
}
.hero h1 span { color: var(--blue); }
.hero-lede { max-width: 38rem; margin: 2rem 0 0; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.2rem); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem 1.75rem; margin-top: 2rem; }
.button { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; padding: .75rem 1.25rem; border: 2px solid var(--ink); border-radius: var(--r-sm); font-weight: 700; text-decoration: none; }
.button-primary { background: var(--ink); color: #fff; box-shadow: .4rem .4rem 0 var(--blue); }
.button-primary:hover { background: var(--blue); }
.text-link { font-weight: 700; text-underline-offset: .3rem; }

/* 平鋪暗底沒有東西可以糊，先鋪一層柔光，玻璃格才有內容可折射 */
.signal-board {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(120% 70% at 78% 12%, rgba(61, 53, 255, .38), transparent 62%),
    radial-gradient(90% 60% at 12% 88%, rgba(200, 255, 41, .16), transparent 58%),
    var(--ink);
  color: #fff;
}
.signal-head { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #4b4b52; color: #c4c3bd; }
.signal-head i { display: inline-block; width: .55rem; height: .55rem; margin-right: .5rem; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 .3rem rgba(200,255,41,.14); }
.signal-board dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1.5rem; margin: 0; }
.signal-board dl div { padding: 1.5rem 0; border-bottom: 1px solid #4b4b52; }
.signal-board dl div:nth-child(odd) { padding-right: 1rem; border-right: 1px solid #4b4b52; }
.signal-board dl div:nth-child(even) { padding-left: 1rem; }
.signal-board dt { color: #bbb9b1; font-size: .875rem; }
.signal-board dd { margin: .35rem 0 0; font-family: var(--mono); font-size: clamp(2rem, 5vw, 4rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.signal-board p { margin: 1.5rem 0 0; color: #bbb9b1; font-size: .875rem; }

.section-shell { padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 4vw, 4rem); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
/* 用 em 不用 ch：ch 是拉丁文「0」的寬度，套在中文會低估行寬，
   造成「五個可以直接打開的作品」把「品」擠成孤字落單一行。 */
.section-heading h2, .timeline-intro h2, .principles h2, .site-footer h2 { max-width: 13em; margin: 0; font-size: clamp(2rem, 4vw, 4.5rem); line-height: 1.16; letter-spacing: .005em; }
.carousel-actions { display: flex; align-items: center; gap: .75rem; }
/* 這裡刻意不用玻璃：按鈕坐在單色背景上，backdrop-filter 沒有東西可糊，
   圓形外框又跟旁邊直角的 .button 打架。維持與全站一致的硬邊語言。 */
.icon-button {
  width: 3rem;
  height: 3rem;
  border: var(--rule);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 700;
  transition: transform .18s ease, background .18s ease;
}
.icon-button:hover { background: var(--acid); transform: translateY(-2px); }
.icon-button:active { transform: scale(.94); }
/* 幻燈片與深色統計面板刻意保留 2px 硬邊，當作整頁的視覺錨點——
   全部圓角化就會失去個性，變成通用模板。 */
.carousel { overflow: hidden; border: var(--rule); border-radius: var(--r-md); background: var(--ink); }
.carousel-track { display: flex; transition: transform .38s cubic-bezier(.2,.8,.2,1); }
.slide { flex: 0 0 100%; display: grid; min-width: 0; background: var(--ink); color: #fff; }
.slide-media { min-height: 18rem; overflow: hidden; background: #292930; }
.slide-media img { display: block; width: 100%; height: 100%; min-height: 18rem; object-fit: cover; object-position: top center; }
.slide-copy { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: clamp(1.5rem, 4vw, 4rem); }
.slide-index { color: var(--acid); font-family: var(--mono); font-size: .75rem; font-weight: 700; letter-spacing: .08em; }
.slide h3 { margin: 1rem 0 0; font-size: clamp(2rem, 4vw, 4.5rem); line-height: 1.18; letter-spacing: .005em; }
.slide .en { color: #aaa9a3; font-family: var(--mono); font-size: .875rem; }
.slide p { max-width: 34rem; color: #cfcec8; }
.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; }
/* 玻璃 tag 實際只在深色 slide 出現一次，卡片與彈窗都被覆寫成實色，
   為了單一位置維護一套玻璃樣式不划算，統一用實色 */
.tag {
  padding: .35rem .65rem;
  border: 1px solid #5b5b62;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .06);
  color: #dfded8;
  font-size: .75rem;
}
.slide .button { align-self: flex-start; margin-top: 2rem; background: var(--acid); color: var(--ink); box-shadow: .35rem .35rem 0 var(--blue); }
.carousel-dots { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.carousel-dot { width: 2.5rem; height: 2rem; padding: 0; border: 0; background: linear-gradient(var(--paper-3), var(--paper-3)) center / 100% .35rem no-repeat; cursor: pointer; }
.carousel-dot[aria-current="true"] { background-image: linear-gradient(var(--blue), var(--blue)); }

/* 毛玻璃要有東西可以折射才成立。iOS 的玻璃之所以好看，是因為底下永遠有一張桌布。
   單色底上的 backdrop-filter 等於沒作用，只會變成半透明色塊。
   所以在放玻璃面板的區塊鋪一層極淡的色氛圍當「桌布」。 */
.project-index {
  position: relative;
  border-top: var(--rule);
  background:
    radial-gradient(70% 45% at 12% 8%, rgba(61, 53, 255, .14), transparent 60%),
    radial-gradient(55% 40% at 88% 22%, rgba(200, 255, 41, .18), transparent 62%),
    radial-gradient(60% 50% at 70% 95%, rgba(61, 53, 255, .10), transparent 64%),
    var(--paper-2);
}
.index-heading > p { max-width: 34rem; margin: 0; color: var(--muted); }
.filter-panel {
  display: grid;
  /* minmax(0,1fr) + min-width:0 修掉窄螢幕水平溢出：
     grid 項目預設 min-width:auto 會把軌道撐得比容器內容框寬，
     在 320px 時造成 61px 溢出、「清除」鈕被裁到只剩 2px 按不到。 */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  border: var(--rule);
  border-radius: var(--r-md);
  background: var(--glass-light-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-sheen), var(--glass-drop);
}
.filter-panel > * { min-width: 0; }
/* 中文內容不用 mono：IBM Plex Mono 沒有 CJK 字符，會靜默 fallback，
   而 letter-spacing 是為拉丁等寬字調的，套到 fallback 中文字型上網格感反而消失 */
.search-wrap label, .filter-wrap > span, .result-count {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--han);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.search-control { display: flex; align-items: center; min-height: 3.5rem; overflow: hidden; border: 2px solid var(--ink); border-radius: var(--r-sm); background: #fff; }
.search-control > span { padding-left: 1rem; font-size: 1.5rem; line-height: 1; }
.search-control input { min-width: 0; flex: 1; border: 0; background: transparent; padding: .875rem; color: var(--ink); font-size: 1rem; }
.search-control input:focus { outline: 0; }
.search-control:focus-within { outline: 3px solid var(--blue); outline-offset: 3px; }
.search-control button { align-self: stretch; border: 0; border-left: 1px solid var(--paper-3); padding: 0 1rem; background: transparent; color: var(--muted); cursor: pointer; font-size: .875rem; font-weight: 700; }
.search-control button:hover { background: var(--acid); color: var(--ink); }
.filter-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-button {
  min-height: 2.75rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: .5rem 1rem;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--han);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.filter-button:hover { background: var(--acid); }
.filter-button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.result-count { align-self: end; margin: 0; color: var(--blue-dark); }
/* 原本是共用邊框的表格式網格（像試算表），整片看起來又硬又密。
   改成有間距的獨立卡片，硬邊留給下面的視覺錨點用。 */
.project-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.project-card {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  /* 半透明 + 模糊：讓底下區塊的環境光暈透上來，玻璃才成立。
     .86 不透明度足以維持深色文字對比（實測仍有 5.9:1）。 */
  background: rgba(246, 245, 240, .86);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  backdrop-filter: var(--glass-blur-sm);
  /* inset 內邊界取代 2px 硬框：保留邊界定義，但不佔實體厚度 */
  box-shadow: inset 0 0 0 1px rgba(17, 17, 22, .10), var(--shadow-soft);
  transition: box-shadow .22s ease, transform .22s ease;
}
.project-card:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px rgba(17, 17, 22, .14), var(--shadow-lift);
}
.project-visual { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ink); }
/* 直式手機截圖塞進 16:10 橫框會只剩頂端一條。
   改成較高的框、整張縮放進去（contain 不裁切），兩側留深色襯底。 */
.project-visual.is-portrait { aspect-ratio: 4 / 3; background: var(--k-2, #17171b); }
.project-visual.is-portrait img { object-fit: contain; object-position: center top; padding-top: .5rem; }
.project-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .3s ease; }
.project-card:hover .project-visual img { transform: scale(1.025); }
/* 玻璃標籤浮在真實截圖上 —— 背後有圖，模糊才看得出來，這是全站最適合毛玻璃的位置 */
.project-number {
  position: absolute;
  top: .75rem;
  left: .75rem;
  padding: .4rem .7rem;
  border: 1px solid var(--glass-hairline-dark);
  border-radius: .75rem;
  background: var(--glass-dark);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  backdrop-filter: var(--glass-blur-sm);
  box-shadow: var(--glass-sheen-dark);
  color: #fff;
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 700;
}
.project-metric {
  display: flex;
  min-height: 15rem;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
  border-bottom: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
}
.project-metric strong { font-family: var(--mono); font-size: clamp(2.5rem, 7vw, 5rem); line-height: .9; letter-spacing: -.045em; }
/* 沒有數字可講的專案：讓文字當主體，不要留一個巨大的空插槽 */
.project-metric-quiet { align-items: center; justify-content: flex-start; }
.project-metric-quiet p { max-width: 22ch; margin: 0; color: #c5c4bd; font-size: 1.05rem; line-height: 1.7; }
.project-metric span { max-width: 12rem; color: #c5c4bd; font-size: .875rem; }
.project-card-body { padding: 1.5rem; }
.project-card-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
/* 中英混排（如「01 / 網站」「公開可用」），用 --han 才不會讓中文掉進 fallback */
.project-card-top > span { font-family: var(--han); font-size: .8rem; font-weight: 700; letter-spacing: .01em; }
.status { display: inline-flex; align-items: center; gap: .45rem; }
.status::before { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; content: ""; }
.status-live, .status-running { color: var(--live); }
.status-building, .status-dry-run { color: var(--warn); }
.status-internal, .status-paused { color: var(--muted); }
.project-card h3 { margin: 1.25rem 0 .15rem; font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.35; letter-spacing: .005em; }
.project-card .en { color: var(--muted); font-family: var(--mono); font-size: .8rem; }
.project-card p { min-height: 5.25rem; margin: 1rem 0; color: var(--muted); }
.card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.25rem; margin-top: 1.5rem; }
.card-actions .button { min-height: 2.75rem; background: var(--paper); cursor: pointer; }
.card-actions .button:hover { background: var(--acid); }
.external-link { font-size: .875rem; font-weight: 700; text-underline-offset: .3rem; }
.empty-state { padding: 4rem 1rem; border-bottom: var(--rule); text-align: center; }
.empty-state p { font-size: 1.25rem; font-weight: 700; }

.timeline-section { display: grid; gap: 4rem; border-top: var(--rule); }
.timeline-intro { align-self: start; }
.timeline-intro > p:last-child { max-width: 38rem; margin-top: 1.5rem; color: var(--muted); }
.timeline { margin: 0; padding: 0; list-style: none; border-top: var(--rule); }
.timeline-item { display: grid; grid-template-columns: 5.5rem 1.5rem minmax(0, 1fr); gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--paper-3); }
.timeline-item time { font-family: var(--mono); font-size: .75rem; font-weight: 700; }
.timeline-node { position: relative; width: .75rem; height: .75rem; margin-top: .4rem; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 .3rem rgba(61,53,255,.12); }
.timeline-node::after { position: absolute; top: 1.15rem; left: calc(50% - 1px); width: 2px; height: 4.1rem; background: var(--paper-3); content: ""; }
.timeline-item:last-child .timeline-node::after { display: none; }
.timeline-item h3 { margin: 0; font-size: 1.15rem; line-height: 1.4; }
.timeline-item p { margin: .35rem 0 0; color: var(--muted); font-size: .875rem; }

.principles { display: grid; border-block: var(--rule); background: var(--blue); color: #fff; }
.principles-title, .principles article { padding: clamp(2rem, 5vw, 4rem); }
.principles .eyebrow { color: var(--acid); }
.principles article { border-top: 1px solid rgba(255,255,255,.45); }
.principles article > span { font-family: var(--mono); font-size: .75rem; font-weight: 700; color: var(--acid); }
.principles h3 { margin: 2rem 0 .75rem; font-size: 1.35rem; letter-spacing: .005em; }
.principles article p { margin: 0; color: #dfdefd; }

.site-footer { display: grid; gap: 3rem; padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 4vw, 4rem) 2rem; background: var(--ink); color: #fff; }
.site-footer .eyebrow { color: var(--acid); }
.footer-links { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
.footer-links .button { border-color: #fff; background: var(--acid); color: var(--ink); }
.footer-links > a:not(.button) { color: #d8d7d0; font-weight: 700; text-underline-offset: .35rem; }
.copyright { margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid #4b4b52; color: #aaa9a3; font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; }

/* iOS sheet 感：玻璃面板浮在模糊的頁面上 */
.project-dialog {
  width: min(48rem, calc(100% - 2rem));
  max-height: min(48rem, calc(100dvh - 2rem));
  margin: auto;
  padding: 0;
  overflow: auto;
  border: var(--rule);
  border-radius: var(--r-lg);
  background: var(--glass-light-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--ink);
  box-shadow: var(--glass-sheen), .75rem .75rem 0 var(--blue);
}
.project-dialog::backdrop {
  background: rgba(17,17,22,.62);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
}
.dialog-close { position: sticky; top: 0; z-index: 2; display: block; width: 3.25rem; height: 3.25rem; margin: 0 0 0 auto; border: 0; border-left: var(--rule); border-bottom: var(--rule); background: var(--acid); cursor: pointer; font-family: var(--mono); font-size: 1.75rem; line-height: 1; }
.dialog-inner { padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(2rem, 6vw, 4rem); }
.dialog-kicker { color: var(--blue-dark); font-family: var(--mono); font-size: .75rem; font-weight: 700; letter-spacing: .06em; }
.dialog-inner h2 { margin: 1rem 0 .25rem; font-size: clamp(2rem, 5vw, 4.5rem); line-height: 1.15; letter-spacing: .005em; }
.dialog-inner > .en { color: var(--muted); font-family: var(--mono); }
.dialog-summary { margin: 2rem 0; font-size: clamp(1.05rem, 2vw, 1.25rem); }
.dialog-facts { display: grid; grid-template-columns: repeat(2, 1fr); margin: 2rem 0; border-block: var(--rule); }
.dialog-facts div { padding: 1rem 0; }
.dialog-facts div:nth-child(odd) { padding-right: 1rem; border-right: 1px solid var(--paper-3); }
.dialog-facts div:nth-child(even) { padding-left: 1rem; }
.dialog-facts dt { color: var(--muted); font-size: .8rem; }
.dialog-facts dd { margin: .25rem 0 0; font-weight: 700; }
.dialog-note { padding: 1rem 1.25rem; border-left: .35rem solid var(--blue); background: var(--paper-2); color: var(--muted); }
.dialog-inner > .button { margin-top: 2rem; background: var(--ink); color: #fff; }
.noscript { margin: 0; padding: 1rem; background: #fff3cd; text-align: center; }

/* 兩欄下修到 768px：原本 900px 讓直式平板整片單欄，白白浪費一半寬度 */
@media (min-width: 768px) {
  /* 統計面板移除後首屏改單欄，大標題拿回完整寬度 */
  .slide { grid-template-columns: minmax(0, 1.45fr) minmax(20rem, .75fr); min-height: 38rem; }
  .slide:nth-child(even) .slide-media { order: 2; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline-section { grid-template-columns: minmax(20rem, .9fr) minmax(28rem, 1.1fr); }
  .timeline-intro { position: sticky; top: 7rem; }
  .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .principles-title { grid-column: 1 / -1; }
  .principles article { border-top: 1px solid rgba(255,255,255,.45); border-right: 1px solid rgba(255,255,255,.45); }
  .principles article:last-child { border-right: 0; }
  .site-footer { grid-template-columns: minmax(0, 1.3fr) minmax(20rem, .7fr); align-items: end; }
  .copyright { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .site-header { align-items: flex-start; flex-direction: column; }
  .site-header nav { width: 100%; }
  main section[id] { scroll-margin-top: 8rem; }
  .hero { min-height: auto; }
  .signal-board { padding-block: 3rem; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .slide-media, .slide-media img { min-height: 14rem; aspect-ratio: 4 / 3; }
  .index-heading > p { max-width: none; }
  .timeline-item { grid-template-columns: 4.75rem 1rem minmax(0, 1fr); gap: .75rem; }
  /* 保留 --glass-sheen：整組 box-shadow 會被覆寫，漏掉的話彈窗在 760px 以下就少了玻璃反光，
     變成全站唯一一個跨斷點不一致的玻璃面 */
  .project-dialog { box-shadow: var(--glass-sheen), .35rem .35rem 0 var(--blue); }
}

@media (min-width: 1280px) {
  .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 淺色情境的標籤：暗底玻璃在白底會糊成一團，改用實心 */
.project-card .tag, .dialog-inner .tag {
  border-color: var(--ink);
  background: rgba(255, 255, 255, .55);
  color: var(--ink);
}

/* ── 毛玻璃的兩道保護 ───────────────────────────────────
   1. 瀏覽器不支援 backdrop-filter（舊 Firefox 等）→ 退回實心，不能讓文字浮在半透明色塊上讀不清
   2. 使用者要求降低透明度（iOS 的「降低透明度」輔助使用設定會觸發）→ 一律實心
   兩者都必須把背景補回不透明，否則對比度會掉到 AA 以下。 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header, .filter-panel, .project-dialog { background: var(--paper); }
  .project-card { background: var(--paper-2); }
  .project-number { background: var(--ink); }
  .icon-button { background: var(--paper); }
  .tag { background: transparent; }
  .project-card .tag, .dialog-inner .tag { background: transparent; }
}

@media (prefers-reduced-transparency: reduce) {
  .project-card { background: var(--paper-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header, .filter-panel, .project-dialog {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .project-number { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .icon-button { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tag { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .project-card .tag, .dialog-inner .tag { background: transparent; }
  .project-dialog::backdrop { background: rgba(17,17,22,.9); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .signal-board { background: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* 腳本載入失敗時的可見提示（見 index.html 的兜底腳本） */
.load-error {
  margin: 0;
  padding: 3rem 1.5rem;
  border: var(--rule);
  background: #fff3cd;
  color: var(--ink);
  font-weight: 700;
  text-align: center;
}

/* 原深色統計面板改成標題下方一行 */
.hero-stats { margin: 1.75rem 0 0; color: var(--muted); font-size: 1rem; }
.hero-stats span { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }

/* 篩選面板的三欄版型需要 ~900px 才放得下（搜尋框 18rem + 分類鈕 26rem + 計數）。
   卡片網格的兩欄斷點下修到 768px 後，這條若跟著下修會造成 71px 水平溢出，
   所以給它自己的斷點。 */
@media (min-width: 900px) {
  .filter-panel { grid-template-columns: minmax(18rem, 1.1fr) minmax(26rem, 1.9fr) auto; align-items: end; }
}