/* ===== 2026-11 黑白極簡主題（參考 maurten.com 的配色與排版） =====
   參考網站實測的樣式（2026-11-04 以瀏覽器讀取 computed style）：
   - 文字近黑 #050505、底色 #FAFAFA／#FFFFFF、次要文字 #666 / #767676、分隔線與底欄 #E6E6E6
   - 字重一律 400，大標 24–32px、略收字距；按鈕不填色，用「文字＋1px 底線＋→」
   - 直角、細線分隔，少量等寬字體點綴
   首頁頂端：滿版黑白輪播（影片＋照片，放在 /assets/hero/），左側大標＋底線連結，底部四格進度條，同參考網站。
   跑馬燈、時鐘、天氣已移除。 */

:root {
  --ink: #050505;
  --ink-2: #666666;
  --ink-3: #767676;
  --paper: #fafafa;
  --line: #e6e6e6;
  --card: rgba(255, 255, 255, .86);
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

body { background: var(--paper); color: var(--ink); font-size: 15px; letter-spacing: 0; }
a { color: var(--ink); }
.muted, .meta, .note-sub { color: var(--ink-2); }

/* 頁首與側欄：細字、不加粗 */
.brand { font-size: 15px; font-weight: 400; letter-spacing: -.01em; }
.side { font-size: 14px; }
.side a:hover, .ig:hover span { text-decoration: none; }
.side nav a, .ig span { border-bottom: 1px solid transparent; }
.side nav a:hover, .ig:hover span { border-bottom-color: var(--ink); }
.avatar { border-radius: 0; background: var(--line); }
.search input { border-radius: 0; background: rgba(255, 255, 255, .7); border: 0; border-bottom: 1px solid var(--line); padding-left: 0; padding-right: 0; }
.search input:focus { background: transparent; border-bottom-color: var(--ink); }

/* 分類：文字頁籤＋細底線，細項改成直角小方塊 */
.tabs { gap: 0 28px; margin-top: 40px; border-bottom: 1px solid var(--line); }
.tab { font-size: 14px; color: var(--ink-3); border-bottom: 1px solid transparent; margin-bottom: -1px; }
.tab:hover, .tab[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.subtabs { margin-top: 12px; }
.subtab { border-radius: 0; background: transparent; border: 1px solid var(--line); color: var(--ink-2); }
.subtab:hover { background: rgba(255, 255, 255, .8); color: var(--ink); border-color: #cccccc; }
.subtab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #ffffff; }

/* 貼文卡：直角、半透明白底、細框；標題細字大一點 */
.grid { gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.tile { border-radius: 0; }
.imgpost, .notepost { background: var(--card); border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.imgpost:hover, .notepost:hover { background: #ffffff; border-color: var(--line); }
.imgpost img { filter: grayscale(1); }
.meta { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; text-transform: uppercase; }
.note-title { font-size: 22px; font-weight: 400; line-height: 1.35; letter-spacing: -.01em; }
.note-sub { font-size: 14px; }
.note-more { align-self: flex-start; padding-bottom: 1px; border-bottom: 1px solid var(--ink); }
.notepost .note-more { padding-top: 0; margin-top: auto; }
.notepost:hover .note-more { color: var(--ink-2); border-bottom-color: var(--ink-2); }

/* 關於 */
.about { border-top: 1px solid var(--line); }
.about h2 { font-size: 24px; font-weight: 400; letter-spacing: -.01em; }
.about strong { font-weight: 500; }
.m-foot { border-top-color: var(--line); }

/* 跳出的完整貼文 */
.post-dialog { border-radius: 0; color: var(--ink); }
.post-dialog .pd-close { border-radius: 0; background: rgba(255, 255, 255, .95); }

.subtab { animation: none; }
.tab .caret { transition: none; }
.tabs { margin-top: 0; }

/* ===== 頂端導覽（疊在輪播上，白字） ===== */
.topnav { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 48px; font-size: 14px; color: #ffffff; }
.topnav a { color: inherit; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 1px solid transparent; }
.topnav a:hover { opacity: .75; }
.topnav a:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.tn-mid { display: flex; gap: 20px; }
.tn-end { display: flex; gap: 20px; justify-self: end; }

/* ===== 首頁大圖輪播 ===== */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; max-height: 1100px; overflow: hidden; background: #1a1a1a; color: #ffffff; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.slide.is-on { opacity: 1; visibility: visible; transition: opacity .8s ease; }
.hm { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.12) 55%, rgba(0,0,0,0) 100%), linear-gradient(0deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%); }
.hc { position: absolute; z-index: 2; left: 48px; right: 48px; top: 22%; max-width: 30em; }
.hc h2 { margin: 0 0 14px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 400; line-height: 1.25; letter-spacing: -.01em; }
.hc a { color: #ffffff; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; min-height: 44px; }
.hc a:hover { opacity: .75; }
.hnav { position: absolute; z-index: 3; left: 48px; right: 48px; bottom: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; }
.hn { font: inherit; font-size: 12px; text-align: left; color: rgba(255,255,255,.6); background: none; border: 0; padding: 12px 0 6px; min-height: 44px; cursor: pointer; position: relative; }
.hn i { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.35); overflow: hidden; }
.hn i::after { content: ""; position: absolute; inset: 0; background: #ffffff; transform: scaleX(0); transform-origin: 0 50%; }
.hn[aria-selected="true"] { color: #ffffff; }
.hn[aria-selected="true"] i::after { transform: scaleX(1); }
.hn.run i::after { transform: scaleX(0); animation: hn-fill var(--dur, 7000ms) linear forwards; }
@keyframes hn-fill { to { transform: scaleX(1); } }
.hn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.hn span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-skip { position: absolute; z-index: 4; right: 48px; min-height: 44px; display: inline-flex; align-items: center; color: #fff; font: inherit; font-size: 14px; }
.hero-skip { bottom: 76px; text-underline-offset: 5px; }
.hero-skip:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.wrap { padding-top: 56px; }
@media (prefers-reduced-motion: reduce) { .slide, .slide.is-on { transition: none; } .hn.run i::after { animation: none; transform: scaleX(1); } }
@media (max-width: 900px) {
  .topnav { padding: 8px 24px; }
  .hc, .hnav { left: 24px; right: 24px; }
  .hero-skip { right: 24px; }
}

/* 首頁「關於」：只留一句簡介，自我介紹收進「看孔哥的自我介紹」，不搶文章版面 */
.about { margin-top: 56px; padding-top: 20px; max-width: 40em; }
.about h2 { font-size: 15px; margin-bottom: 8px; }
.about p.about-lead { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin: 0 0 6px; }
.about-more { font-size: 14px; }
.about-more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); border-bottom: 1px solid transparent; }
.about-more summary::-webkit-details-marker { display: none; }
.about-more summary::after { content: "+"; font-family: var(--mono); color: var(--ink-3); }
.about-more[open] summary::after { content: "−"; }
.about-more summary:hover { color: var(--ink-2); }
.about-more summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.about-more p, .about-more li { font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.about p.about-link { font-size: 14px; margin: 4px 0 0; }
.about-link a { border-bottom: 1px solid var(--ink); padding-bottom: 1px; }