A print-magazine editorial layout, translated for the screen — 黑白為骨、髮線為界、一抹校訂紅點題的排版系統。
正文一律使用襯線字體，讓長篇閱讀保有印刷質感。連結是校訂紅，hover 出現實線底線，輔助資訊如圖說與標籤則切換為 Inter sans-serif，形成雜誌排版的經典對比。
在紙本雜誌的黃金年代，一篇專題報導的開場段落永遠有一個放大的首字母，引導讀者的視線落入版面。這套系統把這個印刷慣例原樣搬進網頁：用 ::first-letter 選取器讓正文第一個字放大至 4.2em，襯線字體、墨黑色、向左浮動，與其餘正文共享同一段落框——每個版面最多使用一次，用在文章真正的開場，而不是裝飾。
跨欄排版是雜誌內文的骨架，靠窄欄寬與細分隔線維持閱讀節奏，而不是靠色塊分區。這裡使用 CSS columns: 2 280px，欄間留一條與內文等高的髮線，模擬印刷排版裡「欄間線」的角色。
在手機寬度下，多欄會自動收回單欄——雜誌版面在小螢幕上不該被壓縮成密密麻麻的兩欄小字，而是回到最基本的單欄直讀。
字級與行高刻意維持與主文一致，讓讀者在跨欄段落與一般段落之間切換時，不會感覺到節奏被打斷。
這也是為什麼髮線分隔比色塊分隔更適合這套系統：線條只界定範圍，不佔據視覺重量。
好的版面不需要顏色說話，留白與線條本身就是一種聲音。
Hover 僅變色（轉校訂紅或引文米），不做位移或陰影放大——按鈕永遠是圖章感。
| 色彩 | Hex | 角色 |
|---|---|---|
| 極墨黑 | #15120E | 主文字、髮線、按鈕底色 |
| 報紙米白 | #F6F2E8 | 頁面背景 |
| 版面純白 | #FFFFFF | 卡片、specimen 表面 |
| 校樣灰 | #69645C | 圖說、次要文字、byline |
| 版線淺灰 | #D9D2C2 | 表格分隔、淺髮線 |
| 校訂紅 | #A31621 | 唯一強調色 — kicker、連結、hover |
| 引文米 | #ECE6D6 | Pull-quote 背景 |