/* ── 長文（技術文章）版型 ────────────────────────────────────
   給 src/*.njk 裡 tags:["article"] 的頁面使用，需與 project.css 一起載入。

   結構照技術文章網站的通例:版頭維持全站原本的滿版氣勢（品牌辨識度在這裡），
   只有正文收成窄欄（讀者要待五分鐘的地方），程式碼與寬表格再破欄回來。

   為什麼一定要收:排版通則是一行 45–75 個拉丁字母（中文約 30–40 字），
   換算約 640–760px。全站 .wrap 是 1180px 且 project.css 的 .prose 沒有
   max-width，作品頁的段落只有兩三句所以看不出來，長文跑滿 1100px 讀不動。 */

/* ── 全站第一個「長文」版型 ──────────────────────────────
   結構照技術文章網站的通例:版頭維持全站原本的滿版氣勢（品牌辨識度在這裡），
   只有正文收成窄欄（讀者要待五分鐘的地方），程式碼與寬表格再破欄回來。

   為什麼一定要收:排版通則是一行 45–75 個拉丁字母（中文約 30–40 字），
   換算約 640–760px。全站 .wrap 是 1180px 且 .prose 沒有 max-width，
   作品頁的段落只有兩三句所以看不出來，長文跑滿 1100px 一行超過 40 字，讀不動。 */

/* 版頭:維持 160px 留白與滿版寬度，只把展示級字級收到長標題撐得住的尺寸
   （.page-title 原本是 clamp(3rem,9vw,7rem)，那是給「關於我」三個字用的）。
   引言沿用作品頁 .proj-lead 的斜體襯線＋左側強調色直線——那是全站辨識度最高的元素。 */
.page-hero{padding:160px 0 62px;}
.page-title{font-size:clamp(2.1rem,5.4vw,4rem);line-height:1.12;letter-spacing:-.01em;max-width:14em;}
.page-title.has-lead{margin-bottom:30px;}
/* 引言寬度對齊標題的 14em(約 896px)——右邊界對齊，留白才像刻意的而不像沒填滿 */
.page-lead{
  max-width:880px;font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(1.12rem,2.1vw,1.5rem);line-height:1.68;color:var(--ink-soft);
  padding-left:24px;border-left:2px solid var(--accent);
}

/* 正文:窄欄。用 padding 而非 max-width，讓子元素能用負邊界破欄。 */
.proj-section .wrap{max-width:1180px;}
.proj-section .wrap > *{max-width:760px;margin-left:auto;margin-right:auto;}
.page-hero + .proj-section{padding-top:54px;}

/* 破欄:程式碼與寬表格有自己的最小可讀寬度，硬塞進 760px 會一直換行。 */
.art-code,.pick-wrap{max-width:920px !important;}
@media (max-width:1000px){.art-code,.pick-wrap{max-width:100% !important;}}
/* project.css 的 .prose 只定義了 p / strong / code / em-q ——
   這篇是長文，清單、小標、定義列表都要自己補，否則會掉回瀏覽器預設值。 */
.prose ul,.prose ol{margin:0 0 20px;padding-left:1.35em;color:var(--ink-soft);}
.prose li{font-size:1.05rem;line-height:1.9;margin-bottom:8px;}
.prose li::marker{color:var(--ink-faint);}
.prose h3{font-family:var(--serif);font-weight:500;font-size:1.32rem;line-height:1.4;margin:0 0 14px;color:var(--ink);}
.prose > h2.sec-h{margin-top:0;}
.prose hr{border:0;border-top:1px solid var(--line);margin:54px 0;}
/* 方案之間的分隔線是 .prose 的兄弟而非子代，要獨立定義 */
.opt-sep{border:0;border-top:1px solid var(--line);margin:54px 0;}
/* 決策表:兩欄都是敘述句，不能用 .tech-table（它把第一欄鎖死在 130px 等寬大寫） */
.pick-wrap{overflow-x:auto;margin:26px 0 20px;}
.pick-table{width:100%;border-collapse:collapse;min-width:440px;}
.pick-table th{text-align:left;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:400;padding:0 0 14px;border-bottom:1px solid var(--line);}
.pick-table th:last-child,.pick-table td:last-child{width:120px;}
.pick-table td{padding:16px 0;border-bottom:1px solid var(--line);font-size:.98rem;line-height:1.7;color:var(--ink-soft);vertical-align:top;}
.pick-table td:first-child{padding-right:30px;}
.pick-table td:last-child{color:var(--ink);}
.art-toc{margin:0;padding:24px 28px;border:1px solid rgba(29,26,21,.12);border-radius:12px;background:rgba(29,26,21,.02);}
.art-toc h2{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px;color:var(--ink-faint);font-weight:400;}
.art-toc ol{margin:0;padding-left:1.25em;}
.art-toc li{margin:.4em 0;font-size:.98rem;line-height:1.7;}
.art-code{margin:26px 0;background:#1d1a15;border-radius:12px;overflow:hidden;border:1px solid rgba(246,241,231,.08);}
.art-code .cc-bar{display:flex;align-items:center;gap:6px;padding:10px 16px;background:#2b271f;border-bottom:1px solid rgba(246,241,231,.08);}
.art-code .cc-bar i{width:9px;height:9px;border-radius:50%;display:inline-block;}
.art-code .cc-bar i.r{background:#e0564a;}
.art-code .cc-bar i.y{background:#e0a23a;}
.art-code .cc-bar i.g{background:#7fae6b;}
.art-code .cc-bar .ti{font-family:var(--mono);font-size:.68rem;color:rgba(246,241,231,.58);margin-left:10px;letter-spacing:.04em;}
.art-code pre{margin:0;padding:20px 22px;overflow-x:auto;font-family:var(--mono);font-size:.78rem;line-height:1.75;color:#e8e2d5;}
.art-code .kw{color:#c9a8e8;}
.art-code .ty{color:#8fc7e8;}
.art-code .mt{color:#a8d98a;}
.art-code .st{color:#e8c07a;}
.art-code .cm{color:rgba(232,226,213,.42);}
.opt-head{display:flex;align-items:baseline;gap:14px;margin:0 0 6px;flex-wrap:wrap;}
.opt-head .tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;padding:3px 9px;border-radius:5px;background:rgba(29,26,21,.08);}
.verdict{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:18px 0 0;padding:18px 22px;border-left:3px solid rgba(29,26,21,.2);background:rgba(29,26,21,.025);border-radius:0 8px 8px 0;}
.verdict dt{font-weight:600;font-size:.82rem;white-space:nowrap;opacity:.75;}
.verdict dd{margin:0;font-size:.9rem;}
@media (max-width:640px){.verdict{grid-template-columns:1fr;gap:2px 0;}.verdict dd{margin-bottom:10px;}}

/* ── 長文專用頁尾 ────────────────────────────────────────────
   作品頁的頁尾大標是「對這個專案有興趣?」——品類文不能用那句，理由見
   _includes/footer-article.njk 的註解。這裡的版面重點是「作者是誰」與
   「利益揭露」，而不是聯絡 CTA。 */
.art-foot{background:var(--ink);color:var(--paper);padding:80px 0 34px;margin-top:90px;}
.art-foot .wrap{max-width:1000px;}
.af-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;}
.af-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,241,231,.5);margin-bottom:20px;}
.af-bio{font-size:1rem;line-height:1.85;color:rgba(246,241,231,.86);margin:0 0 22px;}
.af-bio strong{font-weight:500;color:var(--paper);}
.art-foot code{font-family:var(--mono);font-size:.86em;background:rgba(246,241,231,.12);padding:2px 7px;border-radius:4px;}
/* 利益揭露:視覺上要看得出是「聲明」而不是內文，但不要像警告框那樣刺眼 */
.af-disclose{font-size:.92rem;line-height:1.8;color:rgba(246,241,231,.66);margin:0 0 26px;padding-left:16px;border-left:2px solid var(--accent);}
.af-tag{display:inline-block;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-right:8px;}
.af-disclose a{color:rgba(246,241,231,.86);text-decoration:none;border-bottom:1px solid rgba(246,241,231,.24);white-space:nowrap;}
.af-disclose a:hover{border-bottom-color:var(--accent);}
.af-links{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--mono);font-size:.78rem;}
.af-links a{color:rgba(246,241,231,.6);text-decoration:none;transition:color .25s;}
.af-links a:hover{color:var(--paper);}
.af-more{list-style:none;margin:0;padding:0;}
.af-more li{border-top:1px solid rgba(246,241,231,.12);}
.af-more li:last-child{border-bottom:1px solid rgba(246,241,231,.12);}
.af-more a{display:block;padding:16px 0;text-decoration:none;transition:padding-left .25s;}
.af-more a:hover{padding-left:10px;}
.afm-eyebrow{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,241,231,.42);margin-bottom:5px;}
.afm-title{display:block;font-family:var(--serif);font-size:1.02rem;line-height:1.45;color:rgba(246,241,231,.9);}
.af-more a:hover .afm-title{color:var(--accent);}
.art-foot .foot-base{margin-top:56px;padding-top:22px;border-top:1px solid rgba(246,241,231,.12);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:.7rem;color:rgba(246,241,231,.45);}
@media (max-width:820px){
  .af-grid{grid-template-columns:1fr;gap:44px;}
  .art-foot{padding-top:60px;margin-top:64px;}
}

/* ── 先講結論 ──────────────────────────────────────────────
   長文的一句話總結原本只在文末。從搜尋進來、只想確認「我該選哪個」的讀者
   多半不會捲到底，所以在開頭先把答案給了；要看推導過程的人再往下讀。 */
.art-tldr{margin:0 0 30px;padding:24px 28px;border-radius:12px;background:var(--paper-2);border-left:3px solid var(--accent);}
.art-tldr .tl-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;}
.art-tldr p{font-size:1.02rem;line-height:1.85;color:var(--ink);margin:0;}
.art-tldr p + p{margin-top:12px;}

/* 利益揭露:放在「先講結論」之後、正文之前。
   原本只在頁尾與 §07,但讀者是在文章後段才發現作者做了其中一個工具——
   那一瞬間的「被埋伏感」會回頭污染前面每一句話，就算後面誠實寫了限制也救不回來。
   先講的代價是讀者一開始就知道你有立場，換到的是後面每句話都不必再被懷疑。 */
.art-tldr .tl-coi{margin-top:16px;padding-top:14px;border-top:1px solid rgba(29,26,21,.12);font-size:.9rem;line-height:1.75;color:var(--ink-soft);}
.art-tldr .tl-coi strong{color:var(--ink);font-weight:500;}