/* 潮州工事誌 — 文章頁共用樣式（2026-09-25 由 106 篇文章的內嵌 <style> 抽出）。
 * 每條規則以零特異度的 :where(html:not([data-skip~="token"])) 包住：
 *   文章若在 <html data-skip="token ..."> 列出 token，該條共用規則在該頁即不生效，
 *   由該頁 head 內保留的 <style> 變體全權負責（行為與抽出前完全一致）。
 * 各文章仍保留的 <style> 是頁面專屬規則、與此檔不同的變體，或為維持層疊順序而保留的同款規則。
 * 改動本檔後請同步更新各文章 <link> 的 ?v= 版本號（nginx 對 .css 設 7 天 immutable 快取）。 */

/* root */
:root:where(:not([data-skip~="root"])) { --paper:#f5f1e8; --paper-deep:#ebe5d4; --ink:#1a1814; --ink-soft:#3d3933; --ink-mute:#6b6359; --rule:#c9bfa8; --rule-soft:#ddd4be; --accent:#8b3a2f; --accent-soft:#b85a4a; --serif:'Songti TC','PMingLiU','Noto Serif TC',sans-serif; --sans:'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif; --display:'Cormorant Garamond','Noto Serif TC','Songti TC',Georgia,serif; }
/* all */
:where(html:not([data-skip~="all"])), :where(html:not([data-skip~="all"])) * { box-sizing:border-box; margin:0; padding:0; }
/* html */
html:where(:not([data-skip~="html"])) { scroll-behavior:smooth; }
/* body */
:where(html:not([data-skip~="body"])) body { background:var(--paper); color:var(--ink); font-family:var(--sans); font-weight:400; line-height:1.9; font-size:17px; letter-spacing:.02em; -webkit-font-smoothing:antialiased; background-image:radial-gradient(ellipse at top, rgba(139,58,47,.04), transparent 55%); }
/* a */
:where(html:not([data-skip~="a"])) a { color:inherit; text-decoration:none; }
/* article */
:where(html:not([data-skip~="article"])) .article { max-width:720px; margin:0 auto; padding:0 32px 120px; }
/* category */
:where(html:not([data-skip~="category"])) .category { display:inline-flex; align-items:center; gap:14px; margin-bottom:32px; margin-top:72px; font-family:var(--display); font-style:italic; font-size:16px; color:var(--accent); letter-spacing:.08em; }
/* category-before */
:where(html:not([data-skip~="category-before"])) .category::before { content:""; width:28px; height:1px; background:var(--accent); flex-shrink:0; }
/* h1 */
:where(html:not([data-skip~="h1"])) h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 4.5vw, 42px); line-height: 1.28; letter-spacing: -0.005em; color: var(--ink); margin-bottom: 36px; }
/* byline */
:where(html:not([data-skip~="byline"])) .byline { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 20px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 56px; font-size: 14px; color: var(--ink-mute); }
/* byline-author */
:where(html:not([data-skip~="byline-author"])) .byline-author { color:var(--ink); font-weight:500; }
/* byline-dot */
:where(html:not([data-skip~="byline-dot"])) .byline-dot { width:4px; height:4px; border-radius:50%; background:var(--rule); flex-shrink:0; }
/* tldr */
:where(html:not([data-skip~="tldr"])) .tldr { margin:32px 0 28px; padding:20px 24px; background:var(--paper-deep); border-left:3px solid var(--accent); }
/* tldr-label */
:where(html:not([data-skip~="tldr-label"])) .tldr-label { font-family:var(--display); font-style:italic; font-size:13px; color:var(--accent); letter-spacing:.12em; margin-bottom:6px; text-transform:uppercase; }
/* tldr-p */
:where(html:not([data-skip~="tldr-p"])) .tldr p { font-family:var(--serif); font-size:16px; line-height:1.75; color:var(--ink); margin:0; font-weight:500; }
/* tldr-p-strong */
:where(html:not([data-skip~="tldr-p-strong"])) .tldr p strong { color:var(--accent); font-weight:600; }
/* lede */
:where(html:not([data-skip~="lede"])) .lede { font-family:var(--serif); font-size:20px; line-height:1.8; color:var(--ink-soft); margin-bottom:36px; }
/* lede-strong */
:where(html:not([data-skip~="lede-strong"])) .lede strong { color:var(--ink); font-weight:600; }
/* article-p */
:where(html:not([data-skip~="article-p"])) .article p { margin-bottom:26px; font-size:17px; line-height:1.95; color:var(--ink-soft); }
/* article-p-strong */
:where(html:not([data-skip~="article-p-strong"])) .article p strong { color:var(--ink); font-weight:600; }
/* section-mark */
:where(html:not([data-skip~="section-mark"])) .section-mark { text-align:center; margin:80px 0 56px; font-family:var(--display); color:var(--rule); font-size:22px; letter-spacing:1em; padding-left:1em; }
/* h2 */
:where(html:not([data-skip~="h2"])) h2 { font-weight:700; font-size:27px; line-height:1.4; color:var(--ink); margin:64px 0 28px; }
/* ch-num */
:where(html:not([data-skip~="ch-num"])) .ch-num { display:block; font-family:var(--display); font-style:italic; font-weight:400; font-size:15px; color:var(--accent); letter-spacing:.12em; margin-bottom:10px; }
/* related */
:where(html:not([data-skip~="related"])) .related { margin-top: 96px; padding-top: 48px; border-top: 1px solid var(--rule); }
/* related-label */
:where(html:not([data-skip~="related-label"])) .related-label { font-family: var(--display); font-style: italic; font-size: 15px; color: var(--ink-mute); letter-spacing: 0.1em; margin-bottom: 28px; }
/* author-cta-row */
:where(html:not([data-skip~="author-cta-row"])) .author-cta-row { margin-top:16px; display:flex; gap:12px; flex-wrap:wrap; }
/* author-cta-btn */
:where(html:not([data-skip~="author-cta-btn"])) .author-cta-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 18px; font-family:var(--serif); font-size:14px; font-weight:600; letter-spacing:.04em; transition:background .22s,color .22s; cursor:pointer; text-decoration:none; }
/* author-cta-btn-primary */
:where(html:not([data-skip~="author-cta-btn-primary"])) .author-cta-btn.primary { background:var(--accent); color:var(--paper); border:1px solid var(--accent); }
/* author-cta-btn-primary-hover */
:where(html:not([data-skip~="author-cta-btn-primary-hover"])) .author-cta-btn.primary:hover { background:#6e2e25; border-color:#6e2e25; }
/* author-cta-btn-secondary */
:where(html:not([data-skip~="author-cta-btn-secondary"])) .author-cta-btn.secondary { background:transparent; color:var(--accent); border:1px solid var(--accent); }
/* author-cta-btn-secondary-hover */
:where(html:not([data-skip~="author-cta-btn-secondary-hover"])) .author-cta-btn.secondary:hover { background:var(--accent); color:var(--paper); }
/* footer-footer */
:where(html:not([data-skip~="footer-footer"])) footer.footer {
    background: var(--ink);
    color: var(--paper);
    padding: 60px 0 40px;
  }
/* footer-inner */
:where(html:not([data-skip~="footer-inner"])) .footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 32px; }
/* footer-brand */
:where(html:not([data-skip~="footer-brand"])) .footer-brand { font-family: var(--serif); font-weight: 700; font-size: 17px; letter-spacing: 0.1em; color: var(--paper); margin-bottom: 12px; }
/* footer-tagline */
:where(html:not([data-skip~="footer-tagline"])) .footer-tagline { font-size: 13px; color: rgba(245,241,232,0.6); letter-spacing: 0.05em; margin-bottom: 24px; }
/* footer-info */
:where(html:not([data-skip~="footer-info"])) .footer-info { font-size: 13px; color: rgba(245,241,232,0.7); line-height: 1.85; }
/* footer-col-h4 */
:where(html:not([data-skip~="footer-col-h4"])) .footer-col h4 { font-family: var(--serif); font-size: 13px; letter-spacing: 0.12em; color: var(--paper); font-weight: 600; margin: 0 0 16px; }
/* footer-col-ul */
:where(html:not([data-skip~="footer-col-ul"])) .footer-col ul { list-style:none; padding:0; margin:0; }
/* footer-col-li */
:where(html:not([data-skip~="footer-col-li"])) .footer-col li { padding:4px 0; }
/* footer-col-li-a */
:where(html:not([data-skip~="footer-col-li-a"])) .footer-col li a { font-size: 14px; color: rgba(245,241,232,0.7); transition: color 0.25s; }
/* footer-col-li-a-hover */
:where(html:not([data-skip~="footer-col-li-a-hover"])) .footer-col li a:hover { color: var(--accent); }
/* footer-bottom */
:where(html:not([data-skip~="footer-bottom"])) .footer-bottom { max-width: 1200px; margin: 0 auto; padding: 20px 40px 0; border-top: 1px solid rgba(245,241,232,0.15); display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: rgba(245,241,232,0.5); }
/* back-to-top */
:where(html:not([data-skip~="back-to-top"])) #back-to-top {
    position: fixed;
    bottom: 88px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: var(--ink);
    color: var(--paper);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
    z-index: 9998;
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.2));
  }
/* back-to-top-visible */
:where(html:not([data-skip~="back-to-top-visible"])) #back-to-top.visible {
    opacity: 1;
    visibility: visible;
  }
/* back-to-top-hover */
:where(html:not([data-skip~="back-to-top-hover"])) #back-to-top:hover { transform: scale(1.1); }
/* related-grid */
:where(html:not([data-skip~="related-grid"])) .related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
/* related-card */
:where(html:not([data-skip~="related-card"])) .related-card { padding: 20px; border: 1px solid var(--rule-soft); background: var(--paper-deep); transition: border-color 0.25s; display: block; }
/* related-card-hover */
:where(html:not([data-skip~="related-card-hover"])) .related-card:hover { border-color: var(--accent); }
/* related-card-cat */
:where(html:not([data-skip~="related-card-cat"])) .related-card-cat { font-size: 12px; color: var(--accent); letter-spacing: 0.1em; margin-bottom: 8px; font-family: var(--display); font-style: italic; }
/* related-card-title */
:where(html:not([data-skip~="related-card-title"])) .related-card-title { font-family: var(--serif); font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink); }
/* author-box */
:where(html:not([data-skip~="author-box"])) .author-box { margin-top: 80px; padding: 32px; border: 1px solid var(--rule); display: flex; gap: 24px; align-items: flex-start; }
/* author-avatar */
:where(html:not([data-skip~="author-avatar"])) .author-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--paper-deep); border: 1px solid var(--rule); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 700; font-size: 20px; color: var(--ink-mute); }
/* author-name */
:where(html:not([data-skip~="author-name"])) .author-name { font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 6px; }
/* author-bio */
:where(html:not([data-skip~="author-bio"])) .author-bio { font-size: 14px; color: var(--ink-mute); line-height: 1.8; }
/* author-contact */
:where(html:not([data-skip~="author-contact"])) .author-contact { margin-top: 12px; font-size: 14px; color: var(--accent); font-family: var(--serif); }