/* 版面與元件。只用語意 token;材質(板、按鍵、凹槽、頭像)在 slab.css。 */
html { font-size: 16px; }
body {
  margin: 0; background: var(--desk); color: var(--ink);
  font-family: var(--font-ui); font-size: var(--t-md); line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
/* iOS 把日期區間(2021/10 – 2024/4)偵測成行事曆連結;format-detection 只關得掉電話 */
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit !important; pointer-events: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; line-height: 1.35; }
.page-title { font-family: var(--font-display); font-weight: 600; }
img { max-width: 100%; }
/* 元件常設 display: flex / inline-flex,會蓋掉 hidden 屬性 */
[hidden]:not([data-reserve]) { display: none !important; }
/* 等 JS 才顯示的控制項(data-reserve):有 JS 時先看不見但佔好位置,JS 拿掉 hidden 時版面不動;沒有 JS 時照樣整個隱藏 */
html:not(.js) [data-reserve][hidden] { display: none !important; }
html.js [data-reserve][hidden] { visibility: hidden; }
/* 整段內容的中英兩份:依 <html data-lang> 只顯示一份(沒有 JS 時預設中文) */
html:not([data-lang="en"]) .lang-en, html[data-lang="en"] .lang-zh { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.main { max-width: 68rem; margin: 0 auto; padding: 2.25rem 16px 6rem; }
@media (max-width: 600px) { .main { padding-top: 1.25rem; } }

/* ── 導覽列:頁面在頂端時融入桌面;捲動後底下浮出一條細陰影,跟內容分開 ──
   底色一直是不透明的桌面色:半透明加模糊(backdrop-filter)每一格都要重算底下的內容,
   書架有上千個 3D 面,iPhone 上捲動會卡 */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--desk);
  transition: box-shadow 250ms;
}
.nav.glass { box-shadow: inset 0 1px 0 var(--spec), 0 1px 0 var(--line), 0 10px 24px -18px var(--drop-far); }
.nav-inner { max-width: 68rem; margin: 0 auto; padding: 0.7rem 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.75rem; }
/* 站名是簽名(只下載用到的字母);字型載不到時退回一般字體。又大又重,右邊多留 1rem 才不會跟頁籤擠在一起 */
.nav-name { font-family: var(--font-sign), var(--font-ui); font-size: 2.1rem; line-height: 1; padding-top: 0.2rem; margin-right: 1rem; color: var(--ink); text-decoration: none; }
.nav-links { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; font-size: 1.06rem; }
.nav-links a { position: relative; color: var(--ink-2); text-decoration: none; padding: 0.2rem 0; }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 500; }
/* 目前頁:底下一片很薄的琥珀板 */
.nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; border-radius: 3px; background: var(--edge); }
.nav-tools { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
/* 手機:固定兩行,不靠自動換行(否則每頁的換行位置不同)。
   第一行名字 + 按鍵,第二行三個連結平均分配;連結的可點範圍往上下撐開到 44px,版面高度不變 */
@media (max-width: 600px) {
  .nav-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.35rem 1rem; padding: 0.55rem 16px 0.3rem; }
  .nav-name { font-size: 1.75rem; margin-right: 0; justify-self: start; }
  .nav-inner > nav { grid-column: 1 / -1; grid-row: 2; }
  .nav-links { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; text-align: center; }
  .nav-links a { display: inline-block; padding: 0.6rem 0.5rem; margin: -0.6rem 0; }
  .nav-links a[aria-current="page"]::after { left: 0.5rem; right: 0.5rem; bottom: calc(0.6rem - 0.2rem - 3px); }
}

/* ── 共用小元件 ── */
.linkbtn { font: inherit; background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
/* 卡片上的 tag:只有細輪廓,不搶內容 */
.tag { font-size: 0.72rem; color: var(--ink-2); padding: 0.02rem 0.55rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.empty { color: var(--ink-2); font-size: var(--t-sm); }

/* ── 一般頁(404) ── */
.page { max-width: 46rem; }
.page.wide { max-width: none; }
.page-title { font-size: var(--t-2xl); letter-spacing: -0.01em; margin: 0 0 1.5rem; }
.page-body p, .page-body li { color: var(--ink-2); }
.page-body strong { color: var(--ink); font-weight: 500; }

/* ── footer ── */
.footer-inner { max-width: 68rem; margin: 0 auto; padding: 1.5rem 16px 2.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: var(--t-sm); color: var(--ink-3); }
.footer-inner a { color: var(--ink-3); padding: 0.6rem 0; margin: -0.6rem 0; }

/* ── share 卡 ── */
/* 一般卡是固定形狀的磁磚:縮圖 1.91:1 + 兩行標題 + 一行來源,同一排一樣高,任何寬度都不會忽空忽密。
   心得 / 摘要、日期、tag 在滑鼠停留時從縮圖下緣浮出;精選卡橫放,是唯一直接顯示這些的卡。 */
.shelf { display: grid; gap: 2.2rem; }
.share { min-width: 0; }
/* 精選卡被篩選掉時,不要留下一格空白 */
.shelf-feature:has(> .share[hidden]) { display: none; }
.share-card { display: grid; grid-template-rows: auto 1fr; height: 100%; }

/* 縮圖是一扇窗:卡片傾斜時,裡面的圖往反方向移一點(--px / --py 由 slab.js 設定) */
.share-card .shot { position: relative; aspect-ratio: 1.91 / 1; overflow: hidden; background: var(--desk-2); }
.share-card .thumb { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08) translate(var(--px, 0px), var(--py, 0px)); transition: transform 450ms cubic-bezier(.2,.7,.2,1); }
.share-card.tracking .thumb { transition: transform 90ms linear; }
/* 沒有縮圖(或載入失敗)時,窗裡顯示來源網域 */
.shot-ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; font-size: var(--t-sm); font-weight: 500;
  color: var(--ink-3); text-align: center; overflow-wrap: anywhere; }

/* 滑鼠停留:心得 / 摘要從縮圖下緣浮上來。縮圖顏色不定,所以固定深底淺字;觸控裝置沒有停留,不顯示 */
.reveal { display: none; }
@media (hover: hover) {
  .reveal { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 0.35rem; padding: 2.2rem 1rem 0.85rem;
    background: linear-gradient(to top, oklch(0.14 0.01 70 / 0.88) 55%, transparent); color: oklch(0.97 0.01 85);
    transform: translateY(101%); transition: transform 320ms cubic-bezier(.2,.7,.2,1); pointer-events: none; }
  .share-card:hover .reveal, .share-card:focus-visible .reveal { transform: none; }
}
.reveal p { margin: 0; font-size: 0.84rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.reveal .is-note { padding-left: 0.65rem; box-shadow: inset 2px 0 0 var(--edge); }
.reveal .rv-meta { font-size: 0.72rem; color: oklch(0.86 0.015 85); -webkit-line-clamp: 1; font-variant-numeric: tabular-nums; }

/* 卡片文字的基本樣式(project 卡背面也用) */
.share-body { display: grid; gap: 0.5rem; padding: 1rem 1.15rem 1.2rem; min-width: 0; }
.share-title { margin: 0; font-size: 1.08rem; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; color: var(--ink); }
.share-desc { margin: 0; font-size: var(--t-sm); line-height: 1.7; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* share 卡的文字:兩行標題(只有一行也佔兩行)+ 一行來源 */
.share-card .share-body { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0.55rem; padding: 0.85rem 1.1rem 1rem; }
.share-card .share-title { font-size: 1.02rem; min-height: calc(1.02rem * 1.45 * 2); text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.share-src { display: flex; align-items: center; gap: 0.45rem; min-width: 0; font-size: var(--t-xs); color: var(--ink-3); }
.share-src .dom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-src .ext { flex: none; font-size: 0.85em; }
.share-src time { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; }
.share-src .seen-mark, .share-src .archive-mark { flex: none; white-space: nowrap; }
.mono { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 6px; display: grid; place-items: center; font-size: 0.66rem; font-weight: 700;
  color: var(--ink-2); background: var(--desk-2); box-shadow: inset 0 0 0 1px var(--line); }

/* 精選:最厚、表面與側面都是琥珀;橫放,直接顯示心得 / 摘要、日期與 tag */
.share-card.feature {
  --th: var(--th-feature); --r: 20px; --face-c: var(--face-sig); --side: var(--edge); --side-2: var(--edge-deep);
  grid-template-rows: none; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
.share-card.feature .shot { aspect-ratio: auto; min-height: 17rem; }
.share-card.feature .share-body { padding: 1.6rem 1.75rem; align-content: center; gap: 0.8rem; }
.share-card.feature .share-title { font-size: var(--t-xl); line-height: 1.35; min-height: 0; -webkit-line-clamp: 3; text-wrap: balance; }
.share-lead { margin: 0; font-size: var(--t-md); line-height: 1.75; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.share-lead.is-note { color: var(--ink); padding-left: 0.8rem; box-shadow: inset 2px 0 0 var(--edge); }
.share-card.feature .share-src { font-size: var(--t-sm); }
.share-card .tags { position: relative; z-index: 4; }
.share-card .tag { cursor: pointer; }
.share-card .tag:hover, .share-card .tag[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge); }
@media (max-width: 720px) {
  .share-card.feature { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .share-card.feature .shot { aspect-ratio: 1.91 / 1; min-height: 0; }
  .share-card.feature .share-body { padding: 1rem 1.15rem 1.15rem; gap: 0.6rem; }
  .share-card.feature .share-title { font-size: var(--t-lg); }
  .share-lead { font-size: var(--t-sm); -webkit-line-clamp: 2; }
}

/* 手機:卡片上的小字放大一點(tag 12px、來源 13px) */
@media (max-width: 600px) {
  .tag { font-size: 0.75rem; }
  .share-src { font-size: 0.8125rem; }
}

/* 格狀:卡寬至少 320px,放得下幾欄就幾欄(桌面 3、平板 2、手機 1) */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 2.1rem 1.5rem; }
@media (max-width: 600px) { .grid { gap: 1.6rem; } }

/* ── 頁首(書架):只有排法鍵,靠右 ── */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.75rem 1rem; margin-bottom: 2rem; }
.page-head p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .nav { view-transition-name: site-nav; }
  ::view-transition-old(root) { animation: 160ms ease-in both vt-out; }
  ::view-transition-new(root) { animation: 320ms cubic-bezier(.2,.7,.2,1) 60ms both vt-in; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

  @supports (animation-timeline: view()) {
    .shelf .share {
      animation: slab-place linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 85%;
    }
    @keyframes slab-place { from { opacity: 0; transform: translateY(2.5rem) scale(1.04); } }
  }
}