/* =========================================================
Chao Visuals — 主樣式
暗色沉浸攝影作品集主題
========================================================= */
:root{
--bg:#0b0b0d; /* 近黑主背景 */
--bg-soft:#141418; /* 卡片 / 區塊 */
--ink:#f4f4f2; /* 主要文字 */
--muted:#8a8a92; /* 次要文字 */
/* ---- 1.67.0 內文灰 ----
色票原本只命名了 --ink 與 --muted 兩級，但實際的內文（關於頁、服務頁、
商店頁、跨頁式說明、規格表）用的既不是白也不是 --muted，而是散在檔案裡的
五個沒有名字的值：#d8d8d5 / #d4d4d1 / #cfcfcc / #c7c7cd / #c3c3c0。
它們最亮與最暗只差 2.6:1，肉眼幾乎分不出來——沒有人會刻意挑五個。
更麻煩的是其中四個是暖中性、一個是冷調，而全站底色（#0b0b0d）、
陰影（#06060a）與 --muted 都是冷調，暖灰壓在冷底上會微微發黃。
收成兩級，都跟著色盤走冷： */
--ink-2:#d6d6db; /* 內文：在 --bg 上 13.6:1 */
--ink-3:#c6c6cd; /* 次級內文、圖說、方案條列：11.6:1 */
--line:rgba(255,255,255,.08);
/* 金色是全站唯一的強調色，而且只用在「可以互動或代表狀態」的地方：
主要按鈕、目前所在頁面、價格、啟用中的篩選、連結 hover、
skip-link 與 focus ring、載入進度條、logo。
純裝飾性的小標、日期、分類字樣一律用 --muted / --ink，
否則金色到處都是，真正該被看見的那一個就不再顯眼。 */
--accent:#c9a35b; /* 沉穩金點綴 */
/* 金底上的字。全站有 25 個地方要在金色底上放字（主要按鈕、選取中的篩選、
目前頁碼、skip-link⋯），原本每一處各自硬寫 #111。它其實是 --accent 的
配對色：日後金色一動，這一個值就得跟著重算對比，所以它必須有名字。
#111 在 #c9a35b 上是 7.98:1，過 AA 也過 AAA。 */
--on-accent:#111;
--ease:cubic-bezier(.22,.61,.36,1);
/* ---- 1.67.0 z-index 階梯 ----
這裡原本散著 40/60/90/95/97/99/100/101/110/200/1000/9999/99998/100000/100001，
十五個數字沒有一個寫著它為什麼是那個數字。同一份檔案裡卻認真替圓角和
斷點寫了階梯——z-index 是唯一漏掉的那一組。
只收錄「position:fixed、跨越整頁」的那幾層。元件內部的 0~6
（英雄區的四層濾鏡、作品頁的視差底圖）是各自的區域堆疊脈絡，
跟這一組無關，維持原樣。
最上面三個值刻意不是整數：WordPress 管理列固定在 99999，
轉場效果要在它之下、自訂游標要在它之上，所以繞著 99999 排。
這是有理由的魔術數字，把理由寫下來它就不再是魔術數字。 */
--z-peek:40; /* 跨頁式的翻頁提示 */
--z-rail:60; /* 側欄按鈕列、閱讀進度條、跨頁式頁碼 */
--z-nav-backdrop:90; /* 展開導覽的遮罩 */
--z-panel:95; /* 手機版浮動側欄 */
--z-panel-btn:97; /* 側欄開關：面板打開時仍要按得到 */
--z-grain:99; /* 全站顆粒：蓋住內容，但在頁首之下 */
--z-header:100; /* 固定頁首 */
--z-sticky:101; /* 吸頂的作品篩選列：捲動時取代頁首 */
--z-nav-close:110; /* 導覽的 X：要在自己的遮罩(90)之上 */
--z-skip:200; /* skip-link：鍵盤一 Tab 就必須看得到 */
--z-lightbox:1000; /* 燈箱 */
--z-preload:1100; /* 載入畫面 */
--z-fx:99998; /* 轉場效果：管理列(99999)之下 */
--z-cursor:100000; /* 自訂游標：管理列之上 */
--z-fx-over:100001; /* 燈箱開著時的轉場：游標之上 */
--pad:5vw;
/* ---- 1.23.0 字體與版面 token ----
字體堆疊集中成兩個變數，日後換字只要改這裡。
Jost 只自帶拉丁字母（每個 @font-face 都有 unicode-range），
中文永遠會自動落到 PingFang TC / Noto Sans TC，所以把 Jost 放在
顯示字體的第一順位不會影響任何一個中文字。
自架的 Jost 只有 300/400/500 三個字重，因此全站不再要求 600
——瀏覽器合成的假粗體在細襯線的 Jost 上會糊掉。 */
--font-display:"Jost","Helvetica Neue","PingFang TC","Noto Sans TC",system-ui,sans-serif;
--font-body:"Helvetica Neue","PingFang TC","Noto Sans TC",system-ui,sans-serif;
/* 內容最大寬度：超寬螢幕（21:9、雙 4K）上不讓格線一路拉到螢幕邊 */
--maxw:1440px;
/* 文章側欄欄寬。改這個值時，inc/sidebar.php 的 CHAOVISUAL_SIDE_W 要一起改。 */
--side-w:260px;
/* 陰影帶背景的冷調黑（#06060a），不用純黑；純黑陰影疊在 #0b0b0d 上會發灰 */
--shadow-1:0 2px 10px rgba(6,6,10,.5);
--shadow-2:0 18px 44px -18px rgba(6,6,10,.9),0 2px 8px rgba(6,6,10,.45);
/* ---- 1.33.0 圓角 token ----
原本站上散著 2/3/4/6/8px 五種圓角，而且同一張照片在燈箱裡是 3px、
在跨頁式裡是 4px——讀者其實看得出來，只是說不上來哪裡不對。
收斂成三個，各自對應一種東西：
--r-img 照片。所有的照片都是這一個值，不管它在哪裡出現。
--r-card 卡片、輸入框、方案盒——有邊框、裝內容的東西。
--r-pill 膠囊：篩選鈕、標籤。
圓形（頭像、圓點、關閉鈕）仍然直接寫 50%：那不是圓角，是形狀。
新增樣式時請從這三個裡挑一個；真的都不合適時，先想想是不是
那個元件本來就該長得像既有的某一類。 */
--r-img:4px;
--r-card:6px;
--r-pill:100px;
/* ---- 1.33.0 斷點 ----
媒體查詢不能用 var()，所以這一組沒辦法變成真的變數，
只能靠約定。這裡把它寫下來，新增媒體查詢時請從這六個裡挑：
480 小手機：單行資訊開始換行堆疊
640 手機／平板分界：兩欄一律變一欄
760 導覽列變漢堡、文章側欄變浮動面板（結構性的分界）
900 平板橫向：三欄變兩欄
1024 跨頁式指示器收起（與 max-height:560px 合用）
1200 桌機：文章側欄與內文並排
原本有 420／560／600／720／820／1000 六個額外的值，
而且同一種決策（多欄收單欄）就用掉了其中五個——
在 580px 寬的螢幕上會同時看到三種節奏。1.33.0 全部併進上面這一組。 */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--bg);color:var(--ink);
font-family:var(--font-body);
line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* height:auto 不是可有可無的補充。WordPress 會把 width/height 屬性寫進 ![]()
，
瀏覽器把它們當成 height 的樣式提示；只夾 max-width 而不放掉高度，
圖在窄畫面就會被寬度夾住、高度卻停在原始像素——直式的空框、橫式的照片被拉長。
桌機看不出來是因為寬度幾乎沒被夾到，這個錯只在手機上現形。 */
img{display:block;max-width:100%;height:auto}
/* 開了 Modern Image Formats 的 picture 元素之後，WordPress 會把 ![]()
包進
一層 。這一層預設是 inline 而且沒有尺寸，會踩到兩件事：
一是 .hero-photo img、.tile img 這種 height:100% 的百分比要對照父層算，
父層突然變成那個沒有高度的 picture；二是所有寫成直接子選擇器的規則會失聯。
display:contents 讓 picture 從版面盒子樹裡消失，img 的父層維持原本那一個，
於是站上每一條為裸 ![]()
寫的規則都不必改。 */
picture{display:contents}
a{color:inherit;text-decoration:none}
/* 標題一律走顯示字體（Jost 拉丁 + PingFang TC 中文）。
text-wrap:balance 讓多行標題自動平均分行，不會留下最後一行只有一個字的孤字；
不支援的瀏覽器就照舊斷行，沒有副作用。 */
h1,h2,h3{font-family:var(--font-display);font-weight:300;letter-spacing:-.01em;margin:0;
text-wrap:balance}
/* 內文段落用 pretty：只修掉孤字，不重排整段，長文比 balance 划算 */
p,li,figcaption{text-wrap:pretty}
b{font-weight:500}
/* ---------- 顆粒層（1.23.0） ----------
純平面的暗色背景在大面積漸層（hero 暗角、卡片遮罩）上會出現色帶（banding），
在便宜的螢幕上尤其明顯。疊一層極淡的雜訊可以把色階打散，順便讓整個站
從「數位平面」變成接近底片的質地——這是攝影作品集該有的觸感。
實作用內聯 SVG feTurbulence，不需要任何圖檔、零額外請求。
z-index:99 剛好在頁首（100）之下：顆粒蓋住所有頁面內容，
但導覽列、燈箱（1000）、開場遮罩（9999）、自訂游標（100000）保持乾淨。
pointer-events:none 確保它完全不影響點擊。 */
body::before{content:"";position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;
opacity:.04;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:160px 160px}
/* 印表與高對比模式下不需要顆粒 */
@media print{body::before{display:none}}
@media (hover:hover) and (pointer:fine){
/* 前綴是 cv-cursor，不是 js（1.36.1）。這個差別是這一整段的重點。
─────────────────────────────────────────────────────────────
把原生游標關掉的是這裡，把自訂游標畫出來的是 chaovisual.js。
兩件事必須綁在一起，否則讀者會落入「原生游標被關掉、自訂游標又沒生出來」
的狀態：整個網站沒有任何指標，等於完全不能操作。
原本綁的是 html.js——那個 class 只代表「行內腳本跑了」，
不代表自訂游標真的活著。中間還隔著「主腳本要載到」「不能中途出錯」
「這台裝置要有滑鼠」三道，任何一道沒過，游標就會憑空消失一段時間，
直到 2.6 秒的看門狗才補救。
cv-cursor 由 chaovisual.js 在自訂游標**確實接好事件之後**才加上，
所以它代表的是「替代品已經在畫面上了」。原生游標只在這個前提下才藏，
那個空窗期就不存在了——不是縮短，是消失。 */
html.cv-cursor body,html.cv-cursor a,html.cv-cursor button,
html.cv-cursor .tile{cursor:none}
/* 安全網：主腳本沒到位時，把原生游標還給讀者。
:not(.cv-cursor) 是 1.36.1 補的，而且是這次「圓點不見了」的真正原因。
─────────────────────────────────────────────────────────────
cv-bail 由 header.php 的看門狗加上，而它會被**頁面上任何一支腳本**的
錯誤觸發——包含 WooCommerce、金流、統計碼這些跟本主題無關的腳本。
原本的規則一看到 cv-bail 就把圓點 display:none 掉，於是：
主題的游標好端端地在跑，某支第三方腳本丟了一個無害的例外，
圓點就永久消失了。裝了商店之後頁面上的腳本變多，這件事就從
「理論上會發生」變成「每天都在發生」。
所以安全網只在**自訂游標真的沒起來**的時候才動手。
游標活著就不關它的事——它要救的是「沒有游標」，不是「有游標但別處出錯」。 */
html.cv-bail:not(.cv-cursor),
html.cv-bail:not(.cv-cursor) *{cursor:auto!important}
html.cv-bail:not(.cv-cursor) a,html.cv-bail:not(.cv-cursor) button,
html.cv-bail:not(.cv-cursor) summary,html.cv-bail:not(.cv-cursor) [role="button"],
html.cv-bail:not(.cv-cursor) .tile{cursor:pointer!important}
html.cv-bail:not(.cv-cursor) .cursor-dot,
html.cv-bail:not(.cv-cursor) .cursor-ring{display:none!important}
/* 外掛（燈箱／曲面滾動／章節／篩選列）的元件自己帶了 cursor:pointer 或
cursor:zoom-in，專一性比上面那一行的 body/button 高，會把原生箭頭叫回來，
結果同一個畫面同時出現「原生箭頭 + 自訂游標」兩個游標。
這裡把它們一併交還給自訂游標。前面刻意加 html，是為了讓專一性穩穩高過
外掛端的單一類別選擇器，不必去賭兩支 CSS 檔案的載入順序。 */
html.cv-cursor .cg-lightbox *,html.cv-cursor .cg-flow *,
html.cv-cursor .cchap-lb *,html.cv-cursor .cg-f,html.cv-cursor .cg-nav button,
html.cv-cursor .kg-f,html.cv-cursor .cchap-zoom{cursor:none}
/* WooCommerce 的按鈕與連結同樣自己帶 cursor:pointer（1.36.1）。
商品頁、購物車、結帳都會出現，不接回來的話商店那幾頁會變成
「原生箭頭 + 圓點」兩個游標一起跑。 */
html.cv-cursor .woocommerce a,html.cv-cursor .woocommerce button,
html.cv-cursor .woocommerce .button,html.cv-cursor a.button,
html.cv-cursor .wc-block-components-button{cursor:none}
/* 照片牆的項目自己帶了 cursor:pointer（觸控裝置需要它來表示可點），
而那條規則寫在檔案後面、專一性又跟 body 那行一樣，會贏過上面的 cursor:none，
結果桌機上同時出現原生箭頭和自訂游標。加 html 前綴把專一性拉高一級收回來。 */
html.cv-cursor .pw-item,html.cv-cursor .pw-item *{cursor:none}
}
/* ---------- 自訂游標 ----------
z-index 必須高過站上所有的覆蓋層，否則會發生「燈箱裡完全沒有游標」：
body 的 cursor:none 是繼承屬性，早就把原生游標關掉了，而自訂游標若被
燈箱蓋住，使用者就什麼都看不到。目前最高的覆蓋層是外掛燈箱與曲面滾動
（99999）、章節燈箱（99990），所以這裡取 100000。
日後新增覆蓋層時，請保持在 100000 以下。 */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:var(--z-cursor);
border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:difference}
.cursor-dot{width:6px;height:6px;background:#fff}
.cursor-ring{width:38px;height:38px;border:1px solid rgba(255,255,255,.6);
transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease)}
.cursor-ring.hover{width:64px;height:64px;background:rgba(255,255,255,.12);border-color:transparent}
@media (hover:none){.cursor-dot,.cursor-ring{display:none}}
/* ---------- 燈箱開啟時的游標 ----------
目標有兩個：游標要壓在照片最上面，而且在照片外圍那圈接近純黑的空白區
要是白的（反白），黑色的在那裡等於沒有。
為什麼不直接用 mix-blend-mode:difference 來「反白」：
difference 是「跟背後的顏色相減」。背後是純黑時算出白色、純白時算出黑色，
看起來很聰明——但照片裡大量出現的中灰（約 #808080）減白色之後還是中灰，
結果就是游標在照片的中間調區域整個消失。這不是理論，是這類游標最常見的
災情，而攝影作品集裡中灰佔的面積偏偏最大。
所以改成「不靠背景計算、自己帶對比」：白色實心 + 一圈深色描邊。
純黑底上看到的是白色（就是要的反白），亮部或中灰上白色本身夠亮，
真的撞到很亮的天空時還有深色描邊撐著，任何底色都不會消失。
顏色固定也少一次合成運算，不必再賭瀏覽器怎麼處理混色根。 */
/* cursor-media 由 chaovisual.js 在游標壓到任何照片表面時加上。
燈箱之外的照片（照片牆、作品格線、系列卡片、單篇 hero）同樣會讓
difference 混色失效，用的是同一帖藥，所以直接併進同一組選擇器。 */
html.overlay-open .cursor-dot,html.cchap-lb-open .cursor-dot,html.cursor-media .cursor-dot{
mix-blend-mode:normal;background:#fff;width:8px;height:8px;
box-shadow:0 0 0 1.5px rgba(0,0,0,.6),0 1px 6px rgba(0,0,0,.5)}
html.overlay-open .cursor-ring,html.cchap-lb-open .cursor-ring,html.cursor-media .cursor-ring{
mix-blend-mode:normal;border-color:rgba(255,255,255,.92);
box-shadow:0 0 0 1px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.45)}
/* 停在照片或按鈕上時圈會放大。原本會把邊框設成透明、只留半透明填色，
在亮部上就整個看不見了；這裡保留邊框，只把填色加上去。 */
html.overlay-open .cursor-ring.hover,html.cchap-lb-open .cursor-ring.hover,html.cursor-media .cursor-ring.hover{
background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.95)}
/* ---------- 導覽列 ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:var(--z-header);
padding:22px var(--pad);display:flex;justify-content:space-between;align-items:center;
transition:background .4s var(--ease),padding .4s var(--ease),backdrop-filter .4s}
/* 頂部漸層 scrim：讓導覽列文字在「淺色 hero 圖」上也永遠清楚可讀；捲動出現實心底時淡出 */
.site-header::before{content:"";position:absolute;left:0;right:0;top:0;height:130px;z-index:-1;
pointer-events:none;background:linear-gradient(180deg,rgba(6,6,8,.62),rgba(6,6,8,0));
opacity:1;transition:opacity .4s var(--ease)}
.site-header.scrolled::before{opacity:0}
.site-header.scrolled{background:rgba(11,11,13,.72);backdrop-filter:blur(14px);
padding:14px var(--pad);border-bottom:1px solid var(--line)}
.logo{font-family:var(--font-display);font-weight:500;letter-spacing:.2em;font-size:15px;color:var(--ink);
text-shadow:0 1px 14px rgba(0,0,0,.5)}
.logo span{color:var(--accent)}
.nav-list{display:flex;gap:34px;list-style:none;margin:0;padding:0;
font-family:var(--font-display);font-weight:400;font-size:13px;letter-spacing:.14em}
.nav-list a{color:rgba(244,244,242,.86);position:relative;transition:color .3s;
text-shadow:0 1px 12px rgba(0,0,0,.45)}
.nav-list a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;
background:var(--accent);transition:width .35s var(--ease)}
.nav-list a:hover{color:var(--ink)}
.nav-list a:hover::after{width:100%}
/* 目前所在頁面的指示（1.23.0）
使用者要看得出自己在哪一頁。WordPress 選單會自動加上 current-menu-item 等
類別；header.php 的預設導覽（還沒建立選單時）則由 PHP 補上 aria-current。
兩條路徑都收在同一組選擇器裡。 */
.nav-list .current-menu-item > a,
.nav-list .current_page_item > a,
.nav-list .current-menu-ancestor > a,
.nav-list .current-menu-parent > a,
.nav-list a[aria-current]{color:var(--ink)}
.nav-list .current-menu-item > a::after,
.nav-list .current_page_item > a::after,
.nav-list .current-menu-ancestor > a::after,
.nav-list .current-menu-parent > a::after,
.nav-list a[aria-current]::after{width:100%;background:var(--accent);opacity:.75}
/* 命中框至少 44×44（1.32.0）。原本是 padding:6px + 兩條 1.5px 的線 + 5px 間距
＝ 36×20，連 WCAG 2.2 最低的 24×24 都不到，而這是手機上最重要的一顆按鈕。
同一份檔案裡 .footer-social a 是 44×44、.cv-fab-btn 是 46×46，
所以 44 是本站既有的標準，不是新訂的數字。
用 min-width/min-height + 置中撐開命中框，兩條線的外觀完全不變。 */
.nav-toggle{display:none;background:none;border:none;
flex-direction:column;align-items:center;justify-content:center;gap:5px;
min-width:44px;min-height:44px;padding:6px;margin-right:-6px;
position:relative;z-index:var(--z-nav-close)}
.nav-toggle span{width:24px;height:1.5px;background:var(--ink);transition:.3s}
/* 選單展開時，頁首本身不可以有 backdrop-filter：
任何非 none 的 filter／backdrop-filter／transform 都會讓子元素的 position:fixed
改以「頁首」為定位基準，行動版全螢幕遮罩就會縮成頁首那一條、選項往下溢出。
（這正是捲動後才出現、在頁面頂端時正常的原因——.scrolled 才加上模糊。） */
.site-header.nav-open,
.site-header.scrolled.nav-open{
background:rgba(11,11,13,.96);
backdrop-filter:none;-webkit-backdrop-filter:none;
filter:none}
.site-header.nav-open::before{opacity:0}
/* 選單展開時鎖住背景捲動（由 chaovisual.js 加在 上） */
html.nav-lock,html.nav-lock body{overflow:hidden;overscroll-behavior:none}
@media(max-width:760px){
.nav-toggle{display:flex}
.primary-nav{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;
height:100vh;height:100dvh; /* dvh：避開 IG／LINE 內建瀏覽器的浮動網址列 */
background:rgba(11,11,13,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;visibility:hidden;
transition:opacity .4s var(--ease),visibility .4s;z-index:var(--z-nav-backdrop);
overflow-y:auto;-webkit-overflow-scrolling:touch;padding:80px var(--pad)}
.nav-open .primary-nav{opacity:1;pointer-events:auto;visibility:visible}
.nav-list{flex-direction:column;gap:28px;text-align:center;font-size:20px;width:100%}
.nav-list a{display:inline-block;padding:6px 10px} /* 手機加大點擊範圍 */
.nav-open .nav-toggle span:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav-open .nav-toggle span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
}
/* ---------- Hero ----------
圖層由下往上（z-index）：
0 .hero-photo 背景照片（可選）
1 .hero::before 光暈漸層
2 .hero-grain 顆粒
3 .hero-scrim 文字底襯
4 .hero-bg Canvas 動畫 ／ .hero-fx 游標軌跡
5 .hero::after 暗角
6 .hero-inner 文字 ／ .scroll-cue
底襯刻意排在動畫「下面」：要壓暗的是背景，不是動畫。
壓在上面的話，粒子與水波會跟著一起被洗掉，而那正是要給人看的東西。
下面每一個 var() 都有 fallback。fallback 不是為了美觀，是為了讓
這份 CSS 單獨存在時也能正確渲染——自訂器的值由 inc/hero.php 以
inline style 補上，若那段因故沒輸出（外掛把 inline style 拆掉、
快取拿到舊版），有 fallback 才不會整個封面變透明。 */
.hero{height:100vh;height:100svh;position:relative;
overflow:hidden;text-align:center;background:var(--hero-bg,var(--bg))}
/* 背景照片。視差留在這一層（它是實拍，上下多出來的 8% 有東西可看），
Canvas 那一層不再做視差——動畫的座標系必須跟視窗對齊，
粒子從底部升起、水波從中段往下排，畫布一旦超出視窗，
「底部」就跑到看不見的地方去了。 */
.hero-photo{position:absolute;inset:-8% 0;z-index:0;display:none;
opacity:var(--hero-fade,1);will-change:transform}
.hero[data-hero-bg="photo"] .hero-photo,
.hero[data-hero-bg="both"] .hero-photo{display:block}
.hero-photo img{width:100%;height:100%;object-fit:cover;
object-position:var(--hero-photo-pos,50% 50%);filter:blur(var(--hero-photo-blur,0px))}
.hero-photo::after{content:"";position:absolute;inset:0;background:#06060a;
opacity:var(--hero-photo-dim,.42)}
/* 光暈：從底部升起的那道光。圓心刻意推到 100% 以外，
看起來才像光源在畫面之外、只有邊緣透進來。 */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
opacity:var(--hero-fade,1);
background:radial-gradient(var(--hero-glow-w,120%) var(--hero-glow-h,82%) at 50% var(--hero-glow-y,112%),
var(--hero-c-hi,#f2c88a) 0%,
color-mix(in srgb, var(--hero-c-hi,#f2c88a) 55%, var(--hero-c-mid,#a9793a)) 14%,
var(--hero-c-mid,#a9793a) 26%,
color-mix(in srgb, var(--hero-c-mid,#a9793a) 50%, var(--hero-c-low,#191410)) 40%,
var(--hero-c-low,#191410) 55%,
color-mix(in srgb, var(--hero-c-low,#191410) 45%, var(--hero-bg,var(--bg))) 70%,
var(--hero-bg,var(--bg)) 88%)}
.hero[data-hero-bg="photo"]::before{display:none}
.hero[data-hero-bg="both"]::before{mix-blend-mode:soft-light;opacity:calc(.92 * var(--hero-fade,1))}
/* 顆粒。尺寸固定 128px 不用百分比——用百分比的話每個視窗寬度都會把
同一張雜訊拉伸成不同粗細，同一個站在筆電和手機上看起來會是兩種材質。
它同時是防色帶的抖動層：大面積漸層在暗處會出現一圈一圈的色階，
顆粒打散了那些邊界。 */
.hero-grain{position:absolute;inset:0;z-index:2;pointer-events:none;
opacity:calc(var(--hero-grain,.16) * var(--hero-fade,1));
mix-blend-mode:overlay;background-repeat:repeat;background-size:128px 128px;
background-image:url("data:image/svg+xml;utf8,")}
/* 文字底襯：橢圓，只壓標題後面那一塊。
--hero-scrim-k 在背景是照片時加重。理由是可量的：同一個底襯設定下，
純漸層背景的標題對比是 4.9:1（過 AA），換成苔蘚那張逆光照只剩 3.93:1，
因為照片在文字那一帶有高光細節，漸層沒有。
照片背景本來就需要更多的壓暗，這一條把它寫成規則，
而不是要求使用者每次換圖都自己想起來去拉那根滑桿。 */
.hero-scrim{position:absolute;inset:0;z-index:3;pointer-events:none;
opacity:var(--hero-fade,1);
background:radial-gradient(118% 26% at 50% calc(var(--hero-text-y,64%) + 7%),
rgba(6,6,10,calc(var(--hero-scrim,.42) * var(--hero-scrim-k,1))) 0%,
rgba(6,6,10,calc(var(--hero-scrim,.42) * var(--hero-scrim-k,1) * .62)) 46%,
rgba(6,6,10,0) 80%)}
.hero[data-hero-bg="photo"],
.hero[data-hero-bg="both"]{--hero-scrim-k:1.5}
.hero-bg{position:absolute;inset:0;z-index:4;opacity:var(--hero-fade,1)}
.hero-canvas{width:100%;height:100%;display:block}
/* 滑鼠拖行軌跡與點擊光暈的畫布。跟動畫同層，pointer-events:none 才不會擋住標題。 */
.hero-fx{position:absolute;inset:0;z-index:4;width:100%;height:100%;display:block;
pointer-events:none;opacity:var(--hero-fade,1)}
.hero::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
background:radial-gradient(125% 95% at 50% 42%,transparent 42%,
rgba(6,6,10,var(--hero-vig,.55)) 100%)}
/* 標題落在動畫下方，位置由 --hero-text-y 控制（自訂器可調）。
min() 是溢出保險。380px 這個數字是量出來的，不是估的：
文字區塊（兩行大標＋中文一句＋按鈕）最高約 256px，
底下的 SCROLL 提示連同它的下緣留白約佔 108px，再留 16px 不讓兩者貼著。
矮視窗（橫放的手機、分割視窗、小筆電）把 64% 換算出來的位置
會讓按鈕直接壓在 SCROLL 上面，這一段保證兩者永遠排得下。
視窗夠高時 380px 完全不會生效，位置仍然是自訂器裡設的那個百分比。 */
.hero-inner{position:absolute;left:0;right:0;
top:min(var(--hero-text-y,64%), calc(100% - 380px));
z-index:6;padding:0 6vw;text-align:center;opacity:var(--hero-fade,1)}
@media(max-width:640px){
.hero-inner{padding:0 8vw}
.hero-inner .eyebrow{margin-bottom:10px;font-size:11px;letter-spacing:.32em}
.hero-inner h1{line-height:1.08}
.hero-inner p{font-size:14px;margin-top:10px;max-width:86vw}
.scroll-cue::after{height:26px}
}
.eyebrow{font-family:var(--font-display);font-weight:400;
font-size:12px;letter-spacing:.4em;color:var(--muted);text-transform:uppercase}
/* 頁首的眉標現在是中文（關於／服務／聯絡／作品／山岳）。
.4em 是為拉丁字母調的——套在兩個中文字上會變成「關 於」，
看起來像排版壞掉。中文本來就有字身框撐開間距，.18em 就夠了。 */
.page-hero .eyebrow{letter-spacing:.18em;font-size:13px}
.hero-inner .eyebrow{margin-bottom:26px;display:block;opacity:0;transform:translateY(20px)}
/* 封面大標是英文，維持 Jost 的 300 與寬字距——那是這個站的臉。 */
.hero-inner h1{font-family:var(--font-display);
font-size:clamp(1.9rem,4.6vw,3.5rem);font-weight:300;letter-spacing:.05em;line-height:1.14;
opacity:0;transform:translateY(28px)}
/* 強調字改成同一套字體的加粗，不用斜體（1.34.0）。
主標從英文換成中文之後，italic 會變成瀏覽器合成的假斜體——
中文字沒有真正的斜體字型，機器把每個字往右推一個角度，
筆畫粗細會歪掉，在大字級上特別明顯。
同字體加粗是中文排版裡正確的強調方式。 */
.hero-inner h1 b{font-style:normal;font-weight:500}
.hero-inner p{margin:24px auto 0;color:var(--muted);max-width:460px;font-size:15px;
opacity:0;transform:translateY(20px)}
/* 中文輔句：跟在英文大標後面。字級小一階但不縮太小——
它負責「他到底在做什麼」，讀者真正要讀懂的是這一行。
字距用 .1em：中文不像拉丁字母靠字距撐氣質，放太寬只會變鬆散。 */
.hero-inner .hero-zh{margin-top:18px;color:var(--ink);
font-size:clamp(15px,1.5vw,17px);letter-spacing:.1em;line-height:1.7;
max-width:none;opacity:0;transform:translateY(20px)}
.hero-inner .hero-cta{margin-top:30px;opacity:0;transform:translateY(20px)}
/* 封面的兩顆按鈕（1.65.6）。
.hero-cta 留在外層容器上，進場動畫與兩組安全網的選擇器都不必動。
這裡只負責排成一列：hero-inner 本來就 text-align:center，
但 flex 容器不吃 text-align，所以要自己寫 justify-content。
換行交給 flex-wrap——兩顆中英並列的按鈕在 390px 的手機上
本來就放不下，硬擠只會把字距壓掉。 */
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
/* 第二顆是實心的。這是全站唯一一顆「主要動作」按鈕，
金色在這裡是狀態（可按、而且是最該按的那一顆），不是裝飾。
文字用 var(--on-accent) 而不是 var(--bg)：對比 7.98:1，過 AA 也過 AAA。 */
.hero-ctas .hero-cta-go{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.hero-ctas .hero-cta-go:hover{background:#d8b673;border-color:#d8b673;color:var(--on-accent)}
/* 兩顆按鈕在窄螢幕會折成兩行，比原本高約 50px。
上面的 top:min(…, calc(100% - 380px)) 是為一行按鈕算的，
不放寬的話文字整組會被推到畫面外。
用 :has() 只在「真的有兩顆」時才生效，不支援 :has() 的瀏覽器
維持原本的 380px，也就是回到 1.65.5 的行為。 */
.hero-inner:has(.hero-ctas a + a){top:min(var(--hero-text-y,64%), calc(100% - 440px))}
.scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:6;
font-size:11px;letter-spacing:.3em;color:var(--muted);display:flex;flex-direction:column;
align-items:center;gap:10px;opacity:var(--hero-fade,1)}
.scroll-cue::after{content:"";width:1px;height:46px;background:linear-gradient(rgba(255,255,255,.5),transparent);
animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero.in .eyebrow{opacity:1;transform:none;transition:.9s var(--ease) .1s}
.hero.in h1{opacity:1;transform:none;transition:1s var(--ease) .25s}
.hero.in p{opacity:1;transform:none;transition:.9s var(--ease) .5s}
.hero.in .hero-zh{opacity:1;transform:none;transition:.9s var(--ease) .42s}
.hero.in .hero-cta{opacity:1;transform:none;transition:.9s var(--ease) .7s}
/* ---------- 首頁 INTRO 與 PHILOSOPHY（1.34.0） ----------
兩段都是純文字。刻意不放照片、不放卡片：
讀者剛看完滿版的 hero，這裡需要的是一個安靜下來的地方。
寬度比一般散文再窄一點（680px）。這兩段是「宣言」不是「說明」，
一行不該讀太久；短行會讓人自動放慢速度。 */
.intro,.philos{padding:14vh var(--pad)}
.intro-inner,.philos-inner{max-width:680px;margin:0 auto}
/* 不指定 --font-display：Jost 沒有中文字符，這兩句本來就會落到 PingFang TC，
寫上去只會讓人以為那是設計選擇。字重改 400——PingFang 的 300 在暗底上太細。 */
.intro-title,.philos-title{font-weight:400;
font-size:clamp(1.5rem,3.2vw,2.2rem);letter-spacing:.02em;line-height:1.5;
margin:0 0 18px;text-wrap:balance}
/* 同 hero：中文沒有真正的斜體，強調一律用同字體加粗。 */
.intro-title b,.philos-title b{font-style:normal;font-weight:500}
.intro-en,.philos-en{margin:0 0 30px;color:var(--muted);
font-family:var(--font-display);font-size:13px;letter-spacing:.2em;line-height:2}
.intro-inner p,.philos-inner p{margin:0 0 16px;font-size:16px;line-height:1.9;color:var(--ink-2)}
.intro-inner p:last-of-type,.philos-inner p:last-of-type{margin-bottom:0}
.intro-inner .ghost-btn{margin-top:30px}
/* PHILOSOPHY 置中：它是整站唯一一段「不做事、只表態」的文字，
置中把它跟前後那些要你去點的區塊分開。 */
.philos{text-align:center;background:var(--bg-soft);
border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:640px){
.intro,.philos{padding:10vh var(--pad)}
.intro-en,.philos-en{letter-spacing:.14em;font-size:12px}
}
/* 首頁對照區塊（1.65.7）：同一個空間的上午與黃昏。
─────────────────────────────────────────────────────────
兩半共用同一個 aspect-ratio。這一區要比的是光，
兩張裁切比例不一樣的話，讀者第一眼比到的會是構圖。
4/3 是刻意的：直式並排在桌機上會變成兩根柱子，
而空間照片的訊息多半在水平方向。
寬度用 min(1100px, 100%) 而不是 var(--maxw)：
這一區只有兩張圖，撐到 1440 會讓它比上面的作品網格還大聲，
但它不是作品，它是那句話的證據。 */
.philos-split{display:grid;grid-template-columns:1fr 1fr;gap:2px;
width:min(1100px,100%);margin:44px auto 0}
.philos-split figure{position:relative;margin:0;overflow:hidden;border-radius:var(--r-img)}
.philos-split img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
/* 時間壓在圖上而不是放在圖下：兩個時間要能被一眼並排比較，
中間隔著圖片邊界跟一行留白就不是比較，是兩張各自的說明。 */
.philos-split figcaption{position:absolute;left:0;right:0;bottom:0;
padding:18px 20px;display:flex;flex-direction:column;gap:4px;text-align:left;
background:linear-gradient(transparent,rgba(0,0,0,.62))}
.ps-time{font-family:var(--font-display);font-weight:400;
font-size:clamp(20px,2.4vw,30px);letter-spacing:.08em;color:var(--ink);
font-variant-numeric:tabular-nums}
.ps-note{font-size:12px;letter-spacing:.12em;color:var(--ink-2)}
.philos-link{margin-top:26px}
@media(max-width:760px){
/* 窄螢幕改上下排。並排時每半只剩不到 190px，
那個尺寸下兩張照片的差別會被縮圖本身吃掉。 */
.philos-split{grid-template-columns:1fr;width:100%}
.philos-split figcaption{padding:14px 16px}
}
/* 首頁的札記區塊沿用列表頁的卡片。
1.34.2：原本 padding-top:0，緊貼在上一段（PHILOSOPHY）的分隔線下方，
看起來像同一個區塊的延伸。補回上緣留白，讓它自己成為一段。 */
.home-journal{padding-top:12vh}
@media(max-width:640px){.home-journal{padding-top:9vh}}
/* ---------- 區塊通用 ---------- */
/* 上下留白刻意不對稱：視覺上「區塊結束」需要比開頭更多的呼吸空間，
數學上等寬看起來反而會像下面被切掉一截。 */
section{padding:12vh var(--pad) 13.5vh}
/* 內容最大寬度（1.23.0）
原本頂層區塊沒有任何寬度上限，在超寬螢幕上格線會一路拉到左右螢幕邊，
照片被壓成一長條、標題與說明也離得太遠。這裡不動 HTML，直接約束
區塊底下的內容容器，其餘頁面（作品頁、關於頁）本來就有自己的寬度。 */
section > .sec-head,
section > .series-grid,
section > .grid,
section > .filters,
section > .journal-list,
section > .journal-layout,
section > .pager,
section > .navigation,
section > .empty-hint{max-width:var(--maxw);margin-left:auto;margin-right:auto}
/* 註（1.34.2）：這一段以下的文字寬度一律用 px，不用 ch。
ch 是「數字 0 的寬度」，約 0.5em；中文字是 1em，所以 52ch 只裝得下
約 29 個中文字——看起來像被硬折成一條窄柱。中文排版只能用長度單位。
區塊標題群（1.34.2 改成兩欄格線）。
原本是 flex + space-between，三個子元素（標題、說明、按鈕）會被平均推開，
說明剛好落在正中間——那個位置不屬於任何一邊，讀起來像漂在半空中。
現在說明直接接在標題底下（同一欄、同一條左邊界），按鈕靠右下角。 */
.sec-head{display:grid;grid-template-columns:1fr auto;
align-items:end;column-gap:44px;row-gap:14px;margin-bottom:48px}
/* 區塊大標：中文為主、英文為輔（1.34.1）。
letter-spacing 改成 0：-.02em 是為拉丁字母收緊字間而設的，
套在中文上會讓相鄰的字擠在一起，筆畫多的字尤其明顯。 */
.sec-head h2{grid-column:1;grid-row:1;margin:0;
font-size:clamp(1.7rem,3.6vw,2.6rem);letter-spacing:0;line-height:1.35}
.sec-head h2 span{display:block;margin-top:10px;
font-family:var(--font-display);font-weight:300;
font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.sec-head p{grid-column:1;grid-row:2;margin:0;
color:var(--muted);font-size:14px;line-height:1.9;max-width:620px}
/* 按鈕跨兩列、貼齊右下角：它對齊的是整個標題群，不是其中某一行。 */
.sec-head .ghost-btn{grid-column:2;grid-row:1 / span 2;align-self:end;justify-self:end}
@media(max-width:760px){
/* 手機收成單欄：按鈕排到說明底下，靠左與標題同一條邊界。 */
.sec-head{grid-template-columns:1fr;row-gap:16px}
.sec-head .ghost-btn{grid-column:1;grid-row:auto;justify-self:start}
}
/* 與