/* Sydney Sie 的配色與字型（參考 sydney-sie.com）
   列表頁：材質灰（灰底＋細顆粒）黑字；文章頁：白底黑字；連結與色塊用正紅、桃紅只留在滑過與選取
   文章標題（列表與文章頁）：思源宋體；英文：TeX Gyre Heros（首頁大標，不拉長）、TeX Gyre Heros Condensed（其他文字）、Junicode Condensed（上一篇／下一篇）；中文配思源黑體／思源宋體
   字型檔只含拉丁字母，中文自動落到 Noto；英文字距 0.04em 只加在純英文的小字上（中文不加字距） */

@font-face { font-family: "Heros Cn"; src: url(/site/fonts/heros-cn-regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Heros Cn"; src: url(/site/fonts/heros-cn-bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Heros Cn"; src: url(/site/fonts/heros-cn-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
/* 大標用一般寬度（不拉長），小字維持窄體 */
@font-face { font-family: "Heros"; src: url(/site/fonts/heros-regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Junicode Cn"; src: url(/site/fonts/junicode-cond.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Junicode Cn"; src: url(/site/fonts/junicode-cond-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* 固定品牌色，不跟系統深色模式切換；選擇器權重要蓋過 site.css 的深色模式與頁面內的 --accent */
:root[data-kind] {
  --magenta: #ff23f0;
  --red: #ff0000;
  --bg: #c8c8c6;
  --ink: #000000;
  --ink-2: rgba(0, 0, 0, 0.72);
  --ink-3: rgba(0, 0, 0, 0.5);
  --tint: rgba(0, 0, 0, 0.08);
  --accent: var(--red);
  --ui: "Heros Cn", "Noto Sans TC", "PingFang TC", sans-serif;
  --body: "Heros Cn", "Noto Sans TC", "PingFang TC", sans-serif;
  --display: "Junicode Cn", "Noto Serif TC", "Songti TC", serif;
  --headline: "Heros", "Noto Sans TC", "PingFang TC", sans-serif;
  /* 文章標題：明體（思源宋體連英文一起用，不混窄體） */
  --title: "Noto Serif TC", "Songti TC", serif;
  color-scheme: light;
}
:root[data-kind][data-font="serif"] { --body: "Junicode Cn", "Noto Serif TC", "Songti TC", serif; }
:root[data-kind="post"] {
  --bg: #ffffff;
  --ink-3: rgba(0, 0, 0, 0.45);
  --tint: #f1f1f1;
}

/* 材質灰：用雜訊濾鏡疊一層細顆粒（不用圖片檔） */
:root:not([data-kind="post"]) body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
::selection { background: var(--magenta); color: #000000; }

/* 中英混排：中文段落以思源黑體為底，歐文（.lt）換成 Heros 窄體——
   破折號、刪節號、彎引號這類兩邊共用的符號才會依前後文用對字型 */
.content, .item-excerpt, .intro-d { font-family: "Noto Sans TC", "PingFang TC", sans-serif; --lt: "Heros Cn", "Noto Sans TC", sans-serif; }
:root[data-font="serif"] .content { font-family: "Noto Serif TC", "Songti TC", serif; --lt: "Junicode Cn", "Noto Serif TC", serif; }

/* 頁首：首頁不要（大標就是站名）；文章頁只留散排的三段站名（小一號），點了回首頁 */
:root[data-kind="home"] .top { display: none; }
.top nav { display: none; }
.brand { flex: 1; font-family: var(--headline); font-weight: 400; color: var(--ink); }
.brand .avatar { display: none; }
.brand-t { flex: 1; display: flex; justify-content: space-between; gap: 12px; text-transform: lowercase; font-size: clamp(16px, 1.8vw, 22px); overflow: visible; }
.brand-t .intro-w { white-space: nowrap; }
/* 首圖：3:4、置中（對齊中間的 space），左右留邊；目前一律灰底叉字框 */
.hero, .hero.empty {
  display: block;
  width: min(560px, 100%);
  margin: 48px auto 0;
  background:
    linear-gradient(to top right, transparent calc(50% - 0.6px), rgba(0, 0, 0, 0.55) 50%, transparent calc(50% + 0.6px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.6px), rgba(0, 0, 0, 0.55) 50%, transparent calc(50% + 0.6px)),
    #a3a3a1;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.hero img { visibility: hidden; }
@media (max-width: 640px) { .hero, .hero.empty { margin-top: 28px; } }
.brand-t .intro-c { display: none; }
.brand:hover { color: var(--red); }

/* 首頁標題：照《seconds space sydney sie》書封的英文標籤——小寫、三段散在同一排（左／中／右），手機也一樣 */
.intro { padding-top: 40px; }
@media (max-width: 640px) { .intro { padding-top: 20px; } }
.intro-t { font-family: var(--headline); font-weight: 400; font-size: clamp(20px, 3.2vw, 40px); line-height: 1.1; text-transform: lowercase; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.intro-w { white-space: nowrap; }
/* 首圖：3:4、置中（對齊中間的 space），左右留邊；目前一律灰底叉字框 */
.hero, .hero.empty {
  display: block;
  width: min(560px, 100%);
  margin: 48px auto 0;
  background:
    linear-gradient(to top right, transparent calc(50% - 0.6px), rgba(0, 0, 0, 0.55) 50%, transparent calc(50% + 0.6px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.6px), rgba(0, 0, 0, 0.55) 50%, transparent calc(50% + 0.6px)),
    #a3a3a1;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.hero img { visibility: hidden; }
@media (max-width: 640px) { .hero, .hero.empty { margin-top: 28px; } }
.intro-c { display: none; }
.intro-d { color: var(--ink); margin-top: 64px; }
.item-title { font-family: var(--title); font-weight: 600; font-size: 27px; line-height: 1.45; }
.item-link:hover .item-title { color: var(--red); }
.item-excerpt { color: rgba(0, 0, 0, 0.7); }
@media (max-width: 640px) { .item-title { font-size: 21px; } }
.item-date, .post-meta time, .pager-n { letter-spacing: 0.04em; }
/* 系列：黑字小字，放在 Layer 與日期之間 */
.item-series, .post-series { color: var(--ink); font-size: 13.5px; }
.post-series:hover { color: var(--red); }
.series-t { font-family: var(--title); font-weight: 600; }
.intro-series .intro-k { color: var(--red); }
.intro-series .intro-d { margin-top: 20px; }
/* Layer：發佈順序編號，紅字窄體，放在日期前 */
.item-layer, .post-layer { display: inline; color: var(--red); font-size: 15px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
/* 列表封面：一律用灰底叉字框（排版空圖框）代替照片，沒有封面的文章也一樣有框 */
.item-cover, .item-cover.none, html[data-layout="grid"] .item-cover.none {
  visibility: visible;
  display: block;
  border-radius: 0;
  background:
    linear-gradient(to top right, transparent calc(50% - 0.6px), rgba(0, 0, 0, 0.55) 50%, transparent calc(50% + 0.6px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.6px), rgba(0, 0, 0, 0.55) 50%, transparent calc(50% + 0.6px)),
    #a3a3a1;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.item-cover img { display: none; }
/* 左圖右文 */
.item-link { grid-template-columns: 200px 1fr; }
.item-cover { order: 0; }
@media (max-width: 640px) {
  .item-link, .item:not(.has-cover) .item-link { grid-template-columns: 96px 1fr; }
  .item:not(.has-cover) .item-cover { display: block; }
}

/* 文章頁的照片（封面、內文圖）也先換成灰底叉字框：保留原圖比例，把圖推出框外、露出底下的叉線背景 */
.post-cover img, .content figure img, .content > img {
  object-position: -99999px 0;
  background:
    linear-gradient(to top right, transparent calc(50% - 0.6px), rgba(0, 0, 0, 0.55) 50%, transparent calc(50% + 0.6px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.6px), rgba(0, 0, 0, 0.55) 50%, transparent calc(50% + 0.6px)),
    #a3a3a1;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}

/* 文章頁：白底 */
.post-title { font-family: var(--title); font-weight: 600; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.3; text-wrap: balance; }
.intro-t, .item-title, .pn-t { text-wrap: balance; }
.post-cover img, .content figure img, .content > img { border-radius: 0; }
.content h2, .content h3 { font-weight: 700; }
.content blockquote { font-family: var(--display); font-size: 1.15em; line-height: 1.75; color: var(--ink); }
.content hr::after { color: var(--red); }

/* 上一篇／下一篇：Junicode 大字紅色連結（她網站的社群連結用法） */
.pn { background: none; padding: 18px 0; border-radius: 0; }
.pn-t { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.3; color: var(--red); }
.pn:hover .pn-t { color: var(--magenta); }
.pager a { font-family: var(--display); font-size: 22px; color: var(--red); }

/* 頁尾：正紅色塊黑字（她網站的選單列） */
.foot { max-width: none; margin-top: 120px; background: var(--red); color: #000000; padding: 28px max(16px, calc((100vw - var(--wide)) / 2)) 36px; }
.foot .links a, .copy, .copy a { color: #000000; letter-spacing: 0.04em; }
.foot .links a:hover, .copy a:hover { color: var(--magenta); }