/* 部落格前台：白底、無分隔線、以閱讀為主；中文不加字距。主色由網站設定帶入 --accent */
:root {
  --bg: #ffffff;
  --ink: #1a1a1a;
  --ink-2: #555555;
  --ink-3: #8e8e8e;
  --tint: #f4f3f0;
  --read: 680px;
  --wide: 1040px;
  --ui: "Google Sans Flex", "Noto Sans TC", "PingFang TC", sans-serif;
  --body: var(--ui);
  color-scheme: light;
}
html[data-font="serif"] { --body: "Google Sans Flex", "Noto Serif TC", "Songti TC", serif; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121212; --ink: #ececec; --ink-2: #b4b4b4; --ink-3: #7d7d7d; --tint: #1d1d1d;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] { --bg: #121212; --ink: #ececec; --ink-2: #b4b4b4; --ink-3: #7d7d7d; --tint: #1d1d1d; color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--ui); font-size: 16px; line-height: 1.6; letter-spacing: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
/* 文章少時頁尾也貼齊畫面底部 */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
main { padding: 0 16px; flex: 1 0 auto; }
body > * { width: 100%; }

.preview-bar { position: sticky; top: 0; z-index: 10; background: var(--accent); color: #fff; text-align: center; font-size: 13px; padding: 7px 16px; }

/* 頁首 */
.top { max-width: calc(var(--wide) + 32px); margin: 0 auto; padding: 22px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 16px; min-width: 0; }
.brand-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.top nav { display: flex; gap: 20px; font-size: 15px; flex: none; }
.top nav a { text-decoration: none; color: var(--ink-2); }
.top nav a:hover, .top nav a[aria-current] { color: var(--ink); }

/* 首頁開頭 */
.intro { max-width: var(--wide); margin: 0 auto; padding: 56px 0 40px; }
.intro-k { margin: 0 0 6px; color: var(--ink-3); font-size: 14px; }
.intro-t { margin: 0; font-family: var(--body); font-size: clamp(30px, 5vw, 46px); line-height: 1.3; font-weight: 700; }
.intro-d { margin: 14px 0 0; max-width: 36em; color: var(--ink-2); font-size: 17px; line-height: 1.8; }
.intro-d a { color: var(--accent); }
.hero { margin: 40px 0 0; max-width: 560px; aspect-ratio: 3 / 4; }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero.empty { display: none; }

/* 文章列表：清單 */
.list { max-width: var(--wide); margin: 0 auto; display: grid; gap: 8px; }
.item-link { display: grid; grid-template-columns: 1fr 200px; gap: 28px; align-items: center; padding: 22px 0; text-decoration: none; }
.item-cover { order: 2; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--tint); }
.item-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.item-cover.none { visibility: hidden; }
.item-link:hover .item-cover img { transform: scale(1.03); }
.item-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.item-date { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.item-meta { display: flex; gap: 12px; align-items: baseline; }
/* 發佈順序編號：預設不顯示，作者風格檔要用再打開 */
.item-layer, .post-layer { display: none; }
.item-title { font-family: var(--body); font-size: 23px; line-height: 1.45; font-weight: 700; }
.item-link:hover .item-title { color: var(--accent); }
.item-excerpt { color: var(--ink-2); font-size: 15px; line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.empty { color: var(--ink-3); padding: 40px 0; }
@media (max-width: 640px) {
  .item-link { grid-template-columns: 1fr 96px; gap: 16px; padding: 16px 0; align-items: start; }
  .item-title { font-size: 18px; }
  .item-excerpt { font-size: 14px; }
  .item:not(.has-cover) .item-link { grid-template-columns: 1fr; }
  .item:not(.has-cover) .item-cover { display: none; }
}

/* 文章列表：圖卡（藝術家作品用） */
html[data-layout="grid"] .list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 40px 28px; }
html[data-layout="grid"] .item-link { grid-template-columns: 1fr; gap: 14px; padding: 0; align-items: start; }
html[data-layout="grid"] .item-cover { order: 0; aspect-ratio: 4 / 5; }
html[data-layout="grid"] .item-cover.none { visibility: visible; }
html[data-layout="grid"] .item-title { font-size: 19px; }
html[data-layout="grid"] .item:not(.has-cover) .item-cover { display: block; }
@media (max-width: 640px) { html[data-layout="grid"] .list { grid-template-columns: 1fr 1fr; gap: 28px 14px; } html[data-layout="grid"] .item-title { font-size: 16px; } html[data-layout="grid"] .item-excerpt { display: none; } }

.pager { max-width: var(--wide); margin: 48px auto 0; display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.pager a { color: var(--accent); text-decoration: none; }
.pager-n { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* 文章頁 */
.post { max-width: var(--read); margin: 0 auto; padding-top: 48px; }
.post-head { margin-bottom: 36px; }
.post-title { margin: 0; font-family: var(--body); font-size: clamp(28px, 4.6vw, 40px); line-height: 1.4; font-weight: 700; }
.post-meta { margin: 16px 0 0; color: var(--ink-3); font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-variant-numeric: tabular-nums; }
.tags { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
.tags a { color: var(--accent); text-decoration: none; }
.post-cover, .content figure { width: min(var(--wide), 100vw - 32px); margin-left: 50%; transform: translateX(-50%); }
.post-cover { margin-top: 0; margin-bottom: 48px; }
.post-cover img, .content figure img { margin: 0 auto; border-radius: 4px; max-height: 88vh; width: auto; }

.content { font-family: var(--body); font-size: 17.5px; line-height: 2; overflow-wrap: anywhere; }
.content > :first-child { margin-top: 0; }
.content p { margin: 0 0 1.25em; }
.content h2 { font-size: 1.35em; line-height: 1.5; margin: 2.4em 0 .8em; }
.content h3 { font-size: 1.15em; line-height: 1.5; margin: 2em 0 .6em; }
.content h4 { font-size: 1em; margin: 1.8em 0 .5em; }
.content a { color: var(--accent); text-underline-offset: .2em; }
.content strong { font-weight: 700; }
.content blockquote { margin: 1.8em 0; padding: 0 0 0 1.6em; color: var(--ink-2); }
.content blockquote p:last-child { margin-bottom: 0; }
.content ul, .content ol { padding-left: 1.5em; margin: 0 0 1.25em; }
.content li + li { margin-top: .3em; }
.content hr { border: 0; height: auto; margin: 2.8em 0; text-align: center; }
.content hr::after { content: "＊　＊　＊"; color: var(--ink-3); font-size: 14px; }
.content code { font-family: ui-monospace, Menlo, monospace; font-size: .88em; background: var(--tint); padding: .1em .35em; border-radius: 3px; }
.content pre { background: var(--tint); padding: 16px; border-radius: 6px; overflow-x: auto; line-height: 1.6; }
.content pre code { background: none; padding: 0; }
.content table { width: 100%; border-collapse: collapse; font-size: .92em; margin: 0 0 1.5em; display: block; overflow-x: auto; }
.content th, .content td { padding: .5em .8em; text-align: left; vertical-align: top; }
.content thead th { background: var(--tint); }
.content tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--tint) 50%, transparent); }
.content > img { margin: 2em auto; border-radius: 4px; }
.content figure { margin-top: 2.4em; margin-bottom: 2.4em; }
.post-cover figcaption, .content figcaption { max-width: var(--read); margin: 12px auto 0; color: var(--ink-3); font-family: var(--ui); font-size: 13.5px; line-height: 1.7; text-align: center; }
.content figure.video { width: min(var(--read), 100vw - 32px); }
.content figure.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 4px; display: block; }
@media (max-width: 640px) { .content { font-size: 16.5px; line-height: 1.95; } .post { padding-top: 28px; } }

.about-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: 24px; }

.post-nav { max-width: var(--read); margin: 72px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pn { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 8px; background: var(--tint); text-decoration: none; }
.pn.prev { text-align: right; }
.pn-k { color: var(--ink-3); font-size: 13px; }
.pn-t { font-family: var(--body); font-weight: 700; line-height: 1.5; }
.pn:hover .pn-t { color: var(--accent); }
@media (max-width: 640px) { .post-nav { grid-template-columns: 1fr; } .pn.prev { text-align: left; } }

/* 頁尾 */
.foot { max-width: calc(var(--wide) + 32px); margin: 96px auto 0; padding: 32px 16px 48px; color: var(--ink-3); font-size: 14px; }
.foot .links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 14px; }
.foot .links a { color: var(--ink-2); text-decoration: none; }
.foot .links a:hover { color: var(--accent); }
.foot-note { margin: 0 0 10px; line-height: 1.8; max-width: 40em; white-space: pre-line; }
.copy { margin: 0; display: flex; gap: 16px; }
.copy a { text-decoration: none; }
.copy a:hover { color: var(--ink); }

/* 中英混排（src/typeset.js 產生）：沿用 SomeSum IG 產生器定案值
   --gap 中英間距（字寬）、--lts 歐文放大倍率、--ltb 歐文基線、--lt 歐文字型（沒指定就跟著段落）、--pq 標點擠壓量 */
:root { --gap: 0.27; --lts: 1; --ltb: 0; --pq: 0.25; }
/* text-spacing-trim: space-all＝關掉瀏覽器自己的標點擠壓（Chrome 預設會擠連續標點），擠壓只照 .p1～.p4，不然會擠兩次疊在一起 */
.content, .post-title, .item-title, .item-excerpt, .intro-d, .pn-t { line-break: strict; word-break: normal; hanging-punctuation: none; font-feature-settings: normal; text-spacing-trim: space-all; }
.content { --lts: 1.01; }
.lt { font-family: var(--lt, inherit); font-size: calc(var(--lts) * 1em); position: relative; top: calc(var(--ltb) * 1em); font-kerning: normal; }
/* 一般空格（行首行尾會自動消失）：思源黑體的空格寬 0.224 字寬，用 word-spacing 補到 --gap */
.gs { font-family: "Noto Sans TC", "PingFang TC", sans-serif; font-size: 1em; word-spacing: calc((var(--gap) - 0.224) * 1em); }
/* --pq 標點擠壓量（0＝不擠、1＝擠掉全部空白）：使用者 10-18 嫌 50% 太擠，改 25% */
.p1 { margin: 0 calc(var(--pq) * -0.25em); }
.p2 { margin-left: calc(var(--pq) * -0.5em); }
.p3 { margin-right: calc(var(--pq) * -0.5em); }
.p4 { margin-right: -0.5em; }
.p0 { margin-left: calc(var(--brk) * -1em); }