/* 光影集 · v5 国风 — 字体、色彩、留白与细节；不做任何仿实物装饰。只用系统字体，无外部请求 */
:root{
  --bg:#f8f6f1;               /* 暖白 */
  --ink:29,29,27;
  --mark:#c0412f;             /* 朱砂：小印 / 当前导航 / 短线 */
  /* 中国传统色 — only hairlines, faint glow, active states */
  --dailan:#425066;   /* 黛蓝 · 山 */
  --yuebai:#d6ecf0;   /* 月白 · 水 */
  --zheshi:#845a33;   /* 赭石 · 径 */
  --canglv:#223e36;   /* 苍绿 · 林 */
  --qinghui:#2b333e;  /* 青灰 · 邑 */
  --hupo:#ca6924;     /* 琥珀 · 兽 */
  --tianqing:#6c9bca; /* 天青 · 禽 */
  --c:#8a8478;        /* current category colour (set by JS / data-cat) */
  --cl:color-mix(in srgb,var(--c) 62%,#1d1d1b 14%); /* hairline/active version, visible on 暖白 */
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(18px,4vw,56px);
  --hh:70px;
  --gap:clamp(12px,1.7vw,24px);
  --latin:"Times New Roman",Times,Georgia,"Songti SC","STSong","Noto Serif CJK SC",serif;
  --serif:"Songti SC","STSong","Noto Serif CJK SC","Noto Serif SC","Source Han Serif SC","SimSun",Georgia,serif;
  --sans:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
}
body[data-cat=shan]{--c:var(--dailan)}
body[data-cat=shui]{--c:var(--yuebai);--cl:color-mix(in srgb,var(--yuebai) 55%,#3d6c78 45%)}
body[data-cat=jing]{--c:var(--zheshi)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font:400 15px/1.8 var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden;color:rgb(var(--ink));
  background:var(--bg) radial-gradient(120% 90% at 100% 100%,rgba(236,226,208,.5),transparent 60%) fixed}
/* faint category glow (no texture): one soft light, top-right */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(60vmax 46vmax at 88% 6%,var(--c),transparent 70%);opacity:.075;transition:background 1.2s var(--ease)}
body[data-cat=shui]::before{opacity:.32}
main,.foot{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:rgba(var(--ink),.9);color:var(--bg)}
.t3{color:rgba(var(--ink),.45)}
.tbd{color:rgba(var(--ink),.42);border-bottom:1px dashed rgba(var(--ink),.22)}
.u{position:relative;display:inline-block}
.u::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .22s ease}
.u:hover::after{transform:scaleX(1);transform-origin:left}
.vt{writing-mode:vertical-rl;text-orientation:mixed}
body.lock{overflow:hidden}

/* ——— top bar ——— */
.top{position:fixed;top:0;left:0;right:0;height:var(--hh);z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,2.9vw,42px);
  background:rgba(248,246,241,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .5s var(--ease)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(var(--ink),.08),var(--cl) 70%,rgba(var(--ink),.08));opacity:.35;transition:background 1.2s var(--ease)}
.top.hide{transform:translateY(-101%)}
.logo{display:flex;align-items:center;gap:14px;white-space:nowrap}
.seal{width:20px;height:20px;border:1px solid var(--mark);color:var(--mark);display:grid;place-items:center;font:400 7px/1.05 var(--serif);text-align:center;padding-top:1px}
.logo b{font:400 15px/1 var(--latin);letter-spacing:.24em}
.logo small{font:400 13px/1 var(--serif);letter-spacing:.3em;color:rgba(var(--ink),.5)}
.nav{display:flex;align-items:center;gap:clamp(18px,2.3vw,34px);font:400 13px/1 var(--serif);letter-spacing:.3em;color:rgba(var(--ink),.7)}
.nav a{position:relative;padding:10px 0;transition:color .2s}
.nav a:hover{color:rgb(var(--ink))}
.nav a[aria-current]{color:var(--mark)}
.nav .sep{width:1px;height:12px;background:rgba(var(--ink),.15)}
.menu{display:none;font:400 13px/1 var(--serif);letter-spacing:.3em;padding:10px 0}
.menu-panel{position:fixed;inset:0;z-index:45;background:var(--bg);display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 var(--pad) 0 calc(var(--pad) + 12vw);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s .35s}
.menu-panel.on{opacity:1;visibility:visible;transition-delay:0s}
.menu-panel a{font:400 34px/1.7 var(--serif);letter-spacing:.24em}
.menu-panel a small{font:400 10px var(--latin);letter-spacing:.2em;opacity:.4;margin-left:14px}
.menu-panel a[aria-current]{color:var(--mark)}

/* ——— photo tile + masonry ——— */
.mas{display:flex;gap:var(--gap);align-items:flex-start}
.mas .col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:calc(var(--gap) * 1.35)}
.tile{cursor:pointer;opacity:0;filter:blur(6px);transition:opacity 1.1s var(--ease),filter 1.1s var(--ease)}
.tile.in{opacity:1;filter:none}
.tile .im{background:rgba(var(--ink),.05)}
.tile img{width:100%;transition:opacity .4s var(--ease)}
.tile:hover img,.tile:focus-visible img{opacity:.86}
.tile:focus-visible{outline:1px solid var(--mark);outline-offset:4px}
.tile figcaption{display:flex;gap:12px;align-items:baseline;margin-top:10px;font:400 11px/1.4 var(--serif);letter-spacing:.16em;color:rgba(var(--ink),.45)}
.tile figcaption b{font:400 13px/1.4 var(--serif);letter-spacing:.3em;color:rgba(var(--ink),.78)}

/* ——— home: left vertical verse | right masonry ——— */
.split{display:grid;grid-template-columns:minmax(300px,36%) 1fr;padding-top:var(--hh)}
.side{position:sticky;top:var(--hh);height:calc(100vh - var(--hh));height:calc(100svh - var(--hh));display:flex;flex-direction:column;padding:clamp(26px,4vh,44px) clamp(24px,3vw,48px) clamp(22px,4vh,40px) var(--pad)}
.side .kick{font:400 12px/1.6 var(--serif);letter-spacing:.36em;color:rgba(var(--ink),.42)}
.side .kick em{font:400 10px var(--latin);font-style:normal;letter-spacing:.22em;margin-left:.8em;opacity:.8}
.verse{margin:clamp(30px,9vh,96px) 0 auto 18%;display:flex;flex-direction:column;align-items:flex-start;transition:opacity .7s var(--ease),filter .7s var(--ease)}
.verse.out{opacity:0;filter:blur(5px)}
.verse .vbox{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:clamp(18px,1.8vw,28px);max-height:calc(100vh - var(--hh) - 250px)}
.verse .vh{writing-mode:vertical-rl;font:400 15px/1 var(--serif);letter-spacing:.42em;color:rgba(var(--ink),.62);padding-left:clamp(10px,1vw,16px);border-left:1px solid var(--cl);transition:border-color 1.2s}
.verse .vh i{font-style:normal;color:var(--cl);margin:.4em 0}
.verse p{writing-mode:vertical-rl;font:300 clamp(23px,2.05vw,29px)/1.95 var(--serif);letter-spacing:.2em}
.verse .vs{writing-mode:vertical-rl;font:400 13px/1.6 var(--serif);letter-spacing:.32em;color:rgba(var(--ink),.5);margin-top:3.6em}
.verse .en{margin-top:22px;font:400 10px/1.6 var(--latin);letter-spacing:.26em;text-transform:uppercase;color:rgba(var(--ink),.38)}
.verse .go{display:inline-block;margin-top:14px;font:400 12px/1 var(--serif);letter-spacing:.24em;color:rgba(var(--ink),.6)}
.verse .go:hover{color:rgb(var(--ink))}
.hud{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;font:400 12px/1 var(--serif);letter-spacing:.2em;color:rgba(var(--ink),.55)}
.hud .num{min-width:6em}
.chap{display:flex;gap:18px;font:400 14px/1 var(--serif)}
.chap a{position:relative;opacity:.35;transition:opacity .3s,color .3s;padding:4px 0}
.chap a:hover{opacity:.7}.chap a.on{opacity:1;color:rgb(var(--ink))}
.chap a.on::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--cl)}
.auto{position:relative;font:400 13px/1.2 var(--serif);letter-spacing:.2em;padding:8px 0 .45em;overflow:hidden;color:rgb(var(--ink))}
.auto::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;animation:line 3s cubic-bezier(.73,0,0,1) infinite}
.auto.run::after{animation:none;opacity:.35}
@keyframes line{0%{transform:translateX(-101%)}50%{transform:translateX(0)}100%{transform:translateX(101%)}}
.flow{padding:clamp(26px,4vh,44px) clamp(40px,6vw,96px) 0 0}
.grp+.grp{margin-top:clamp(110px,18vh,180px)}
.gh{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;font:400 10px/1 var(--latin);letter-spacing:.24em;color:rgba(var(--ink),.38)}
.gh b{font:400 14px/1 var(--serif);letter-spacing:.4em;color:rgba(var(--ink),.72)}
.gh .m{display:none}
.gh .ln{flex:1;height:1px;background:var(--gc,rgba(var(--ink),.1));opacity:.5}
.gh .k2{font:400 12px var(--serif);letter-spacing:.24em}
.grp .more{display:inline-block;margin-top:24px;font:400 12px/1 var(--serif);letter-spacing:.24em;color:rgba(var(--ink),.55)}
.mhero{display:none}

/* ——— page header: vertical 宋体 title, English small, vermilion rule ——— */
.ptitle{position:relative;padding:calc(var(--hh) + clamp(40px,7vh,70px)) var(--pad) clamp(46px,7vh,70px);display:grid;grid-template-columns:1fr auto 1fr;align-items:start}
.back{grid-column:1;justify-self:start;font:400 12px/1 var(--serif);letter-spacing:.3em;color:rgba(var(--ink),.5);padding-left:clamp(0px,6vw,90px)}
.back small{font:400 9px var(--latin);letter-spacing:.2em;margin-left:.6em;opacity:.8}
.tblock{grid-column:2;display:flex;flex-direction:row-reverse;align-items:flex-start;gap:clamp(18px,2vw,30px)}
.tblock h1{writing-mode:vertical-rl;font:400 clamp(44px,4.6vw,64px)/1 var(--serif);letter-spacing:.3em;padding-left:clamp(14px,1.4vw,22px);border-left:1px solid var(--cl)}
.tblock .kv{writing-mode:vertical-rl;font:400 13px/1.4 var(--serif);letter-spacing:.42em;color:rgba(var(--ink),.5)}
.tblock .st{writing-mode:vertical-rl;font:300 clamp(17px,1.5vw,20px)/2 var(--serif);letter-spacing:.24em;color:rgba(var(--ink),.72);margin-top:4.2em}
.pfoot{grid-column:1/-1;text-align:center;margin-top:clamp(30px,5vh,46px)}
.pfoot .en{font:400 clamp(12px,1vw,14px)/1 var(--latin);letter-spacing:.6em;padding-left:.6em;color:rgba(var(--ink),.55)}
.pfoot .rule{display:block;width:24px;height:1px;background:var(--mark);margin:18px auto 0;opacity:.75}
.pfoot .meta{margin-top:14px;font:400 12px/1.6 var(--serif);letter-spacing:.24em;color:rgba(var(--ink),.4)}
.cgrid{max-width:1060px;margin:0 clamp(18px,5vw,72px) 0 auto;padding:0 var(--pad) 0 clamp(18px,6vw,100px)}
@media (min-width:1500px){.cgrid{margin-right:calc((100vw - 1060px) / 2 - 60px)}}
.pnext{position:relative;display:flex;justify-content:flex-end;align-items:flex-end;gap:22px;margin:clamp(100px,15vh,160px) auto 0;padding:0 clamp(40px,12vw,200px) 0 var(--pad);font:400 12px/1 var(--serif);letter-spacing:.3em;color:rgba(var(--ink),.5)}
.pnext b{writing-mode:vertical-rl;font:400 clamp(40px,4vw,56px)/1 var(--serif);letter-spacing:.2em;color:rgb(var(--ink));transition:color .25s}
.pnext .en{font:400 10px var(--latin);letter-spacing:.24em}
.pnext:hover b{color:var(--mark)}

/* works filter */
.filter{display:flex;justify-content:center;gap:clamp(20px,3vw,44px);margin:0 auto clamp(40px,6vh,60px);padding:0 var(--pad);font:400 14px/1 var(--serif);letter-spacing:.3em}
.filter button{position:relative;padding:8px 0;color:rgba(var(--ink),.45);transition:color .25s}
.filter button small{font-size:11px;letter-spacing:.1em;margin-left:.3em;opacity:.7}
.filter button:hover{color:rgba(var(--ink),.8)}
.filter button[aria-pressed=true]{color:rgb(var(--ink))}
.filter button[aria-pressed=true]::after{content:"";position:absolute;left:0;right:.3em;bottom:0;height:1px;background:var(--fc,var(--mark))}
.empty{text-align:center;font:400 14px/2 var(--serif);color:rgba(var(--ink),.45)}

/* prose (about / contact) */
.prose{max-width:780px;margin:0 clamp(18px,8vw,140px) 0 auto;padding:0 var(--pad)}
.prose section{display:grid;grid-template-columns:8em 1fr;gap:28px;padding:30px 0;border-top:1px solid rgba(var(--ink),.08)}
.prose h2{font:400 15px/1.6 var(--serif);letter-spacing:.4em;color:rgba(var(--ink),.8)}
.prose h2 small{display:block;margin-top:6px;font:400 9px/1.6 var(--latin);letter-spacing:.24em;color:rgba(var(--ink),.38)}
.prose p,.prose li{font:400 16px/2 var(--serif);color:rgba(var(--ink),.78)}
.prose p+p{margin-top:.6em}
.prose ul{list-style:none}
.kvl{display:grid;grid-template-columns:6em 1fr;gap:10px 18px;font:400 15px/1.8 var(--serif)}
.kvl dt{color:rgba(var(--ink),.45);letter-spacing:.3em}
.note{font:400 12px/1.9 var(--serif);letter-spacing:.08em;color:rgba(var(--ink),.42);margin-top:14px}

/* 404 */
.nf{min-height:calc(100vh - 160px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--hh) + 40px) var(--pad) 40px;text-align:center}
.nf .vbox{display:flex;flex-direction:row-reverse;gap:26px;align-items:flex-start}
.nf h1{writing-mode:vertical-rl;font:400 clamp(40px,4vw,56px)/1 var(--serif);letter-spacing:.3em;padding-left:18px;border-left:1px solid rgba(var(--ink),.18)}
.nf p{writing-mode:vertical-rl;font:300 20px/2 var(--serif);letter-spacing:.24em;color:rgba(var(--ink),.7);margin-top:3.4em}
.nf .links{margin-top:40px;display:flex;gap:28px;font:400 13px/1 var(--serif);letter-spacing:.3em}

.foot{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-top:clamp(90px,14vh,150px);padding:28px clamp(18px,2.9vw,42px) 30px;font:400 12px/1.6 var(--serif);letter-spacing:.24em;color:rgba(var(--ink),.45)}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(var(--ink),.08),var(--cl) 30%,rgba(var(--ink),.08));opacity:.35}
.foot .logo b{font-size:13px}
.foot nav{display:flex;gap:24px;flex-wrap:wrap}
.foot nav a:hover{color:rgb(var(--ink))}
.foot .cp{font:400 10px var(--latin);letter-spacing:.2em}

/* ——— viewer ——— */
.viewer{position:fixed;inset:0;z-index:150;background:rgba(248,246,241,.985);display:grid;grid-template-columns:1fr 300px;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.viewer.on{opacity:1;visibility:visible;transition-delay:0s}
.v-stage{display:flex;align-items:center;justify-content:center;padding:clamp(56px,7vh,84px) clamp(20px,4vw,64px);min-height:0}
.v-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:opacity .32s linear,filter .32s linear;box-shadow:0 24px 50px -34px rgba(0,0,0,.35)}
.v-stage img.swap{opacity:0;filter:blur(6px)}
.v-info{padding:84px 32px 32px;display:flex;flex-direction:column;gap:20px;overflow:auto;border-left:1px solid rgba(var(--ink),.08)}
.v-info .no{font:400 13px/1 var(--serif);letter-spacing:.3em;color:rgba(var(--ink),.5)}
.v-info h2{font:300 32px/1.2 var(--serif);letter-spacing:.3em}
.v-info h2 small{display:block;font:400 10px/1.6 var(--latin);letter-spacing:.22em;text-transform:uppercase;color:rgba(var(--ink),.4);margin-top:10px}
.v-info .rule{width:24px;height:1px;background:var(--mark);opacity:.75}
.v-info dl{display:grid;grid-template-columns:4em 1fr;gap:9px 14px;font:400 13px/1.6 var(--serif);letter-spacing:.08em}
.v-info dt{color:rgba(var(--ink),.4);letter-spacing:.3em}
.v-info .note{margin:0}
.v-nav{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font:400 12px/1 var(--serif);letter-spacing:.2em}
.v-close{position:absolute;top:24px;right:24px;z-index:2;font:400 12px var(--serif);letter-spacing:.3em}

/* signature transition: a faint wash of ink spreading, then clearing */
.fade{position:fixed;inset:0;z-index:180;pointer-events:none;opacity:1;
  background:radial-gradient(70vmax 55vmax at 50% 52%,rgba(52,56,54,.13),rgba(52,56,54,.05) 45%,var(--bg) 78%),var(--bg);
  transform:scale(1);transition:opacity .75s var(--ease),transform 1.2s var(--ease)}
.fade.off{opacity:0;transform:scale(1.25)}
.fade.go{opacity:1;transform:scale(1);transition:opacity .42s ease-in,transform .42s ease-in}

@media (max-width:980px){.split{grid-template-columns:minmax(260px,40%) 1fr}.verse{margin-left:8%}}
@media (max-width:820px){
  :root{--hh:56px;--gap:10px}
  .nav{display:none}.menu{display:block}
  .logo{gap:10px}.logo small{display:none}.logo b{font-size:14px;letter-spacing:.2em}
  .split{display:block}
  .side{display:none}
  .mhero{display:flex;flex-direction:row-reverse;justify-content:flex-start;align-items:flex-start;gap:18px;padding:34px var(--pad) 10px}
  .mhero h1{writing-mode:vertical-rl;font:300 34px/1 var(--serif);letter-spacing:.3em;padding-left:14px;border-left:1px solid rgba(var(--ink),.16)}
  .mhero p{writing-mode:vertical-rl;font:400 13px/1.9 var(--serif);letter-spacing:.3em;color:rgba(var(--ink),.55);margin-top:2.6em}
  .mhero .chap{margin-right:auto;align-self:flex-end;gap:22px;font-size:16px}.mhero .chap a{opacity:.7}
  .flow{padding:30px var(--pad) 0}
  .grp+.grp{margin-top:84px}
  .gh{display:block;margin-bottom:22px}
  .gh .ln,.gh>b,.gh>span.k,.gh>span.k2{display:none}
  .gh .m{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:14px;align-items:flex-start}
  .gh .m .vh{writing-mode:vertical-rl;font:400 13px/1 var(--serif);letter-spacing:.4em;color:rgba(var(--ink),.6);padding-left:10px;border-left:1px solid var(--gc,rgba(var(--ink),.2))}
  .gh .m .vh i{font-style:normal;margin:.3em 0;color:var(--gc)}
  .gh .m p{writing-mode:vertical-rl;font:300 19px/1.9 var(--serif);letter-spacing:.18em;color:rgb(var(--ink));max-height:300px}
  .gh .m .vs{writing-mode:vertical-rl;font:400 11px/1.6 var(--serif);letter-spacing:.3em;color:rgba(var(--ink),.5);margin-top:3em}
  .gh .m .en{display:none}
  .mbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;display:flex;justify-content:space-between;align-items:center;padding:6px 16px;background:rgba(248,246,241,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(var(--ink),.08);font:400 12px/1 var(--serif);letter-spacing:.2em;color:rgba(var(--ink),.6)}
  .tile figcaption{margin-top:6px;gap:8px;font-size:10px;letter-spacing:.08em}.tile figcaption b{font-size:12px;letter-spacing:.14em}
  .ptitle{grid-template-columns:1fr auto;padding-top:calc(var(--hh) + 28px)}
  .back{grid-column:1;padding-left:0}
  .tblock{grid-column:2}
  .tblock h1{font-size:40px}
  .tblock .st{font-size:15px;max-height:280px}
  .pfoot .en{letter-spacing:.4em}
  .cgrid{margin:0;padding:0 var(--pad)}
  .pnext{justify-content:center;padding:0 var(--pad)}
  .filter{gap:20px;font-size:13px;letter-spacing:.2em}
  .prose{margin:0}
  .prose section{grid-template-columns:1fr;gap:8px}
  .kvl{grid-template-columns:5em 1fr;font-size:14px}
  .viewer{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .v-stage{padding:60px 12px 12px}
  .v-info{border-left:0;border-top:1px solid rgba(var(--ink),.08);padding:16px 20px 20px;gap:10px;max-height:44vh}
  .v-info h2{font-size:22px}.v-info .rule,.v-info .note{display:none}
  .v-info dl{grid-template-columns:3.4em 1fr 3.4em 1fr;font-size:12px}
  .foot{margin-bottom:64px}
  body[data-page=home] .foot{margin-bottom:76px}
}
@media (min-width:821px){.mbar{display:none}}
@media (prefers-reduced-motion:reduce){.tile{opacity:1;filter:none;transition:none}.auto::after{animation:none}.verse{transition:none}.fade{transition:opacity .2s}}
.grp[data-c=shan]{--gc:var(--dailan)}.grp[data-c=shui]{--gc:#9cc4cb}.grp[data-c=jing]{--gc:var(--zheshi)}
@media (max-width:820px){.gh .m{display:block}.gh .m .vbox{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:flex-start;gap:14px}}
/* v5 refinements */
.tblock .st{margin-top:2.8em;letter-spacing:.18em}
.nf .pf{margin-top:34px;text-align:center}
.nf .pf .en{font:400 11px/1 var(--latin);letter-spacing:.5em;padding-left:.5em;color:rgba(var(--ink),.5)}
.nf .pf .rule{display:block;width:24px;height:1px;background:var(--mark);margin:16px auto 0;opacity:.75}
@media (max-width:820px){
  .mhero{padding:26px var(--pad) 0}
  .mhero h1{font-size:30px}
  .mhero p{letter-spacing:.2em;font-size:12px}
  .gh .m .vbox{justify-content:flex-start;padding-right:9vw}
  .gh .m p{letter-spacing:.1em;font-size:18px}
  .gh .m .vs{margin-top:2.4em}
  .flow{padding-top:22px}
}

/* ——— 七类：岳 川 陌 林 兽 禽 邑（shan shui jing forest animals birds city） ——— */
body[data-cat=forest]{--c:var(--canglv)}
body[data-cat=animals]{--c:var(--hupo)}
body[data-cat=birds]{--c:var(--tianqing)}
body[data-cat=city]{--c:var(--qinghui)}
body[data-cat=animals]::before{opacity:.06}
.grp[data-c=forest]{--gc:#3f6357}.grp[data-c=animals]{--gc:var(--hupo)}.grp[data-c=birds]{--gc:var(--tianqing)}.grp[data-c=city]{--gc:#56606c}
[data-c=shan]{--k:var(--dailan)}[data-c=shui]{--k:#9cc4cb}[data-c=jing]{--k:var(--zheshi)}[data-c=forest]{--k:#3f6357}[data-c=animals]{--k:var(--hupo)}[data-c=birds]{--k:var(--tianqing)}[data-c=city]{--k:#56606c}

/* top nav: categories inline & compact; ≤1120px they fold into a 作品 dropdown */
.nav .cats{display:flex;gap:clamp(12px,1.3vw,20px);letter-spacing:.14em}
.nav .cats a::after,.nav .dd a::after{content:"";position:absolute;left:0;right:.14em;bottom:4px;height:1px;background:var(--k);opacity:0;transition:opacity .25s}
.nav .cats a:hover::after,.nav .cats a[aria-current]::after{opacity:.8}
.nwk{position:relative;display:flex}
.nwk .dd{position:absolute;top:100%;left:50%;transform:translate(-50%,6px);min-width:180px;padding:14px 22px;background:rgba(248,246,241,.97);border:1px solid rgba(var(--ink),.08);
  display:none;flex-direction:column;gap:0;letter-spacing:.2em;box-shadow:0 18px 40px -24px rgba(var(--ink),.25)}
.nwk .dd a{display:flex;align-items:baseline;gap:10px;padding:8px 0}
.nwk .dd a i{font-style:normal;font-size:11px;color:rgba(var(--ink),.4);width:1.4em}
.nwk .dd a small{margin-left:auto;font:400 9px var(--latin);letter-spacing:.2em;opacity:.45}
.nwk .dd a::after{bottom:3px;left:2.1em}
.nwk .dd a:hover::after{opacity:.8}
@media (max-width:1120px){
  .nav .cats,.nav .cats+.sep{display:none}
  .nwk:hover .dd,.nwk:focus-within .dd{display:flex}
  .nwk>a::before{content:"";position:absolute;left:-.1em;right:.2em;top:100%;height:14px} /* hover bridge */
}

/* placeholders — soft warm grey, clearly “待补照片”, not clickable */
.tile.ph{cursor:default}
.tile.ph .im{position:relative;background:#e8e4dc;box-shadow:inset 0 0 0 1px rgba(var(--ink),.05)}
.tile.ph .im::after{content:"";position:absolute;left:0;top:0;width:28px;height:1px;background:var(--gc,var(--k,rgba(var(--ink),.2)));opacity:.55}
.tile.ph .im span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:400 12px/1 var(--serif);letter-spacing:.4em;padding-left:.4em;color:rgba(var(--ink),.38)}
.tile.ph .im small{font:400 9px var(--latin);letter-spacing:.3em;opacity:.7}
.tile.ph figcaption b{color:rgba(var(--ink),.4)}
.tile.ph:hover img{opacity:1}
.cgrid .tile.ph{--gc:var(--cl)}
.tbdn{display:block;margin-top:8px;font-size:11px;letter-spacing:.24em;color:rgba(var(--ink),.45)}

/* home: seven chapters get their own row above the counter */
.hud{flex-wrap:wrap;row-gap:22px}
.hud .chap{order:-1;flex:1 0 100%;gap:clamp(12px,1.4vw,20px);flex-wrap:wrap;letter-spacing:.12em}
.hud .num{min-width:7em}

/* filter: wrap gracefully */
.filter{flex-wrap:wrap;row-gap:10px}

/* footer category row */
.foot .fcats{flex:1 1 auto;justify-content:center;gap:18px;letter-spacing:.14em}
.foot .fcats a{opacity:.8}

/* prev / next category */
.pnav{display:flex;justify-content:space-between;align-items:flex-end;margin:clamp(100px,15vh,160px) clamp(40px,12vw,200px) 0 var(--pad)}
.pnav .pnext{margin:0;padding:0}
.pprev{display:flex;align-items:flex-end;gap:22px;font:400 12px/1 var(--serif);letter-spacing:.3em;color:rgba(var(--ink),.5)}
.pprev b{writing-mode:vertical-rl;font:400 clamp(28px,2.6vw,38px)/1 var(--serif);letter-spacing:.2em;color:rgba(var(--ink),.7);transition:color .25s}
.pprev .en{font:400 10px var(--latin);letter-spacing:.24em}
.pprev:hover b{color:var(--mark)}

@media (max-width:820px){
  .mhero{flex-wrap:wrap}
  .mhero .chap{order:9;flex:1 0 100%;margin:22px 0 0;justify-content:space-between;gap:0;font-size:15px;letter-spacing:.06em}
  .menu-panel{gap:0;padding-left:calc(var(--pad) + 8vw)}
  .menu-panel>a{font-size:30px;line-height:1.6}
  .menu-panel .mcats{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;margin:6px 0 14px;padding-left:16px;border-left:1px solid rgba(var(--ink),.12)}
  .menu-panel .mcats a{font:400 19px/1.9 var(--serif);letter-spacing:.16em}
  .menu-panel .mcats a small{margin-left:8px;font-size:8px}
  .pnav{margin:90px var(--pad) 0}
  .pnav b{font-size:34px}
  .foot .fcats{order:3;flex-basis:100%;justify-content:flex-start;gap:16px}
  .filter{gap:8px 18px;max-width:340px}
}
@media (min-width:821px){.menu-panel .mcats{display:contents}}

/* ——— v6：照片位置占位 ——— */
.tile.ph .im{background:color-mix(in srgb,#e8e4dc 92%,var(--k,#e8e4dc))}
[data-c=shui].tile.ph .im{background:color-mix(in srgb,#e8e4dc 85%,#cfe4e8)}
.tile.ph .im span{gap:7px;letter-spacing:.2em;padding:8px}
.tile.ph .im em{font:400 12px/1 var(--serif);font-style:normal;letter-spacing:.4em;padding-left:.4em;color:rgba(var(--ink),.42)}
.tile.ph .im small{font:400 10px/1 var(--latin);letter-spacing:.12em;opacity:1;color:rgba(var(--ink),.36)}
.tile.ph .im small.fn{letter-spacing:.08em;color:rgba(var(--ink),.5)}
.tile.ph .im small:last-child{font-family:var(--serif);letter-spacing:.2em}
.prose .who{display:flex;gap:clamp(20px,3vw,36px);align-items:flex-start}
.portrait{flex:0 0 clamp(150px,16vw,210px)}
.portrait img{width:100%;height:auto}
.portrait.ph .im{position:relative;background:#e6e2da}
.portrait.ph .im span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}
.portrait.ph em{font:400 12px/1 var(--serif);font-style:normal;letter-spacing:.3em;color:rgba(var(--ink),.45)}
.portrait.ph small{font:400 10px/1 var(--latin);letter-spacing:.1em;color:rgba(var(--ink),.4)}
@media (max-width:820px){
  .tile.ph .im span{gap:5px;padding:4px}
  .tile.ph .im em{font-size:11px;letter-spacing:.24em}
  .tile.ph .im small{font-size:9px;letter-spacing:.04em}
  .prose .who{gap:18px}.portrait{flex-basis:118px}
}

/* ——— v7 home: 类别选择页 — seven single-character entries, one screen on desktop; no waterfall ——— */
.idx{display:grid;grid-template-columns:minmax(170px,15%) 1fr;gap:clamp(20px,3vw,56px);height:100vh;min-height:620px;padding:calc(var(--hh) + clamp(28px,6vh,64px)) var(--pad) clamp(28px,6vh,60px)}
.ih{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:flex-start;gap:16px;position:relative}
.ih h1{writing-mode:vertical-rl;font:300 clamp(34px,3vw,46px)/1 var(--serif);letter-spacing:.32em;padding-left:16px;border-left:1px solid rgba(var(--ink),.16)}
.ih p{writing-mode:vertical-rl;font:400 13px/1.9 var(--serif);letter-spacing:.32em;color:rgba(var(--ink),.55);margin-top:2.4em}
.ih .ik{position:absolute;left:0;bottom:0;font:400 12px/1.9 var(--serif);letter-spacing:.3em;color:rgba(var(--ink),.5)}
.ih .ik em{display:block;font:400 9px var(--latin);font-style:normal;letter-spacing:.24em;opacity:.8}
.ents{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));height:100%;border-left:1px solid rgba(var(--ink),.08)}
.ents li{border-right:1px solid rgba(var(--ink),.08);min-width:0}
.ent{position:relative;display:flex;flex-direction:column;align-items:center;height:100%;padding:0 clamp(8px,1vw,16px) 6px;transition:background .5s var(--ease)}
.ent::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--gc);transform:scaleX(.18);opacity:.6;transition:transform .5s var(--ease),opacity .5s}
.ent .cv{display:block;width:100%;aspect-ratio:3/4;max-height:40vh;margin-top:clamp(18px,3vh,30px);overflow:hidden;background:color-mix(in srgb,var(--gc) 9%,#ece8e0)}
.ent .cv img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.42;transition:filter .7s var(--ease),opacity .7s var(--ease)}
.ent .cv.ph{display:grid;place-items:center;transition:background .6s var(--ease)}
.ent .cv.ph em{font:400 11px/1 var(--serif);font-style:normal;letter-spacing:.4em;color:rgba(var(--ink),.32)}
.ent .no{margin-top:clamp(18px,3.4vh,34px);font:400 11px/1 var(--serif);letter-spacing:.2em;color:rgba(var(--ink),.4)}
.ent .ch{margin-top:12px;font:400 clamp(40px,3.8vw,62px)/1 var(--serif);color:rgba(var(--ink),.86);transition:color .4s}
.ent .py{margin-top:14px;font:italic 400 13px/1 var(--latin);letter-spacing:.08em;color:rgba(var(--ink),.5)}
.ent .en{margin-top:8px;font:400 9px/1 var(--latin);letter-spacing:.22em;color:rgba(var(--ink),.4)}
.ent .ct{margin-top:auto;font:400 12px/1 var(--serif);letter-spacing:.3em;color:rgba(var(--ink),.6)}
.ent .ct.tbd0{color:rgba(var(--ink),.36)}
.ent:hover,.ent:focus-visible{background:color-mix(in srgb,var(--gc) 6%,transparent);outline:0}
.ent:hover::before,.ent:focus-visible::before{transform:scaleX(1);opacity:1}
.ent:hover .cv img,.ent:focus-visible .cv img{filter:none;opacity:1}
.ent:hover .cv.ph,.ent:focus-visible .cv.ph{background:color-mix(in srgb,var(--gc) 26%,#ece8e0)}
.ent:hover .ch,.ent:focus-visible .ch{color:color-mix(in srgb,var(--gc) 80%,#1d1d1b)}
.ent[data-c=shui]:hover .ch,.ent[data-c=shui]:focus-visible .ch{color:#5d8f99}
body[data-page=home] .foot{margin-top:0}
@media (max-height:700px) and (min-width:821px){.ent .cv{max-height:34vh}.ent .no{margin-top:14px}}
/* category page: quick 上一类 / 下一类 under the title, 返回首页 between prev/next at the bottom */
.qnav{display:flex;justify-content:space-between;margin:-24px auto 34px;padding:0 var(--pad);max-width:1180px;font:400 12px/1 var(--serif);letter-spacing:.3em;color:rgba(var(--ink),.5)}
.qnav a:hover{color:rgb(var(--ink))}
.pnav{align-items:flex-end}
.phome{align-self:flex-end;font:400 12px/1 var(--serif);letter-spacing:.3em;color:rgba(var(--ink),.6);margin-bottom:4px}
.phome small{font:400 9px var(--latin);letter-spacing:.2em;margin-left:.6em;opacity:.7}
@media (max-width:820px){
  .idx{display:block;height:auto;min-height:0;padding:calc(var(--hh) + 26px) var(--pad) 0}
  .ih{flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:22px}
  .ih h1,.ih p{writing-mode:horizontal-tb}
  .ih h1{font-size:30px;border-left:0;padding-left:0;letter-spacing:.3em}
  .ih p{margin-top:0;font-size:12px;letter-spacing:.24em}
  .ih .ik{position:static;font-size:11px}.ih .ik em{display:inline;margin-left:10px}
  .ents{display:block;height:auto;border-left:0;border-top:1px solid rgba(var(--ink),.08)}
  .ents li{border-right:0;border-bottom:1px solid rgba(var(--ink),.08)}
  .ent{display:grid;grid-template-columns:76px 46px 1fr auto;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:10px 2px}
  .ent::before{display:none}
  .ent .cv{grid-row:1/3;margin:0;aspect-ratio:4/3;max-height:none;width:76px}
  .ent .cv img{filter:none;opacity:1}
  .ent .cv.ph em{font-size:9px;letter-spacing:.3em}
  .ent .no{display:none}
  .ent .ch{grid-row:1/3;grid-column:2;margin:0;font-size:34px;text-align:center}
  .ent .py{grid-column:3;margin:0;align-self:end}
  .ent .en{grid-column:3;margin:0;align-self:start;padding-top:6px}
  .ent .ct{grid-row:1/3;grid-column:4;margin:0;font-size:12px}
  .ent .cv{border-left:2px solid var(--gc)}
  body[data-page=home] .foot{margin-top:40px;margin-bottom:0}
  .qnav{margin:-18px 0 24px}
  .pnav{flex-wrap:wrap;row-gap:30px}.phome{order:3;flex-basis:100%;text-align:center}
}
/* desktop: covers become tall quiet strips filling the column; text sits beneath */
@media (min-width:821px){
  .ent .cv{flex:1 1 0;min-height:110px;aspect-ratio:auto;max-height:none}
  .ent .no{margin-top:clamp(16px,2.6vh,26px)}
  .ent .ct{margin-top:clamp(14px,2.4vh,24px)}
}

/* ——— v7b home: title group lowered to the middle of the seven columns; extra verse beside it ——— */
.ih{flex-direction:column;justify-content:center;align-items:flex-start}
.ihg{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:16px;transform:translateY(clamp(10px,4vh,40px));margin-bottom:60px}
.ih .hv{writing-mode:vertical-rl;font:400 13px/1.9 var(--serif);letter-spacing:.32em;color:rgba(var(--ink),.55);margin-top:2.4em}
.ih .hv small{display:block;margin-top:1.2em;font-size:11px;letter-spacing:.2em;color:rgba(var(--ink),.3)}
@media (max-width:820px){
  .ih{justify-content:flex-start}
  .ihg{transform:none;margin-bottom:6px;flex-direction:column;gap:6px}
  .ih .hv{writing-mode:horizontal-tb;margin-top:0;font-size:12px;letter-spacing:.24em}
  .ih .hv small{display:inline;margin:0 0 0 .8em;font-size:10px}
}

/* ——— v7b category page: v6 home-chapter layout — sticky left column | right masonry (this category only) ——— */
.csplit{grid-template-columns:minmax(300px,30%) 1fr}
.csplit .stop{display:flex;flex-direction:column;gap:14px}
.csplit .back{padding:0;font:400 12px/1 var(--serif);letter-spacing:.3em;color:rgba(var(--ink),.55)}
.csplit .back:hover{color:rgb(var(--ink))}
.csplit .verse{margin:clamp(24px,6vh,70px) 0 auto 14%}
.csplit .verse .vbox{max-height:calc(100vh - var(--hh) - 260px)}
.csplit .vt1{writing-mode:vertical-rl;font:400 clamp(44px,4.2vw,64px)/1 var(--serif);letter-spacing:.1em;color:rgb(var(--ink));margin-left:clamp(4px,.6vw,10px)}
.csplit .verse .vh{border-left-color:var(--cl)}
.csplit .cmeta{margin-top:8px;font:400 11px/1.6 var(--serif);letter-spacing:.24em;color:rgba(var(--ink),.45)}
.cnav{flex-direction:column;align-items:flex-start;row-gap:18px}
.cnav .chap{order:0;flex:none}
.cnav .chap a.on{color:var(--cl)}
.cnav .pn{display:flex;gap:28px;font:400 12px/1 var(--serif);letter-spacing:.24em;color:rgba(var(--ink),.55)}
.cnav .pn a:hover{color:rgb(var(--ink))}
.csplit .flow{padding-top:clamp(26px,4vh,44px)}
.mpn{display:none}
@media (max-width:980px){.csplit{grid-template-columns:minmax(260px,34%) 1fr}}
@media (max-width:820px){
  .csplit .side{display:flex;position:static;height:auto;padding:24px var(--pad) 0}
  .csplit .stop{flex-direction:row;justify-content:space-between;align-items:baseline}
  .csplit .kick{font-size:11px}.csplit .kick em{display:none}
  .csplit .verse{margin:22px 0 0;align-items:flex-end;width:100%}
  .csplit .verse .vbox{max-height:none;gap:14px}
  .csplit .vt1{font-size:42px}
  .csplit .verse .vh{font-size:13px}
  .csplit .verse p{font-size:18px;letter-spacing:.12em;max-height:260px}
  .csplit .verse .vs{font-size:11px;margin-top:2.4em}
  .csplit .verse .en{margin-top:14px}
  .cnav{margin-top:22px;width:100%;row-gap:14px}
  .cnav .chap{width:100%;justify-content:space-between;gap:0;font-size:15px}
  .cnav .pn{display:none}
  .csplit .flow{padding:22px var(--pad) 0}
  .mpn{display:flex;justify-content:space-between;margin-top:60px;font:400 12px/1 var(--serif);letter-spacing:.14em;color:rgba(var(--ink),.6)}
}
.cnav .chap{flex:0 0 auto!important;order:0}
.cnav .chap a{opacity:.5}.cnav .chap a:hover{opacity:.85}.cnav .chap a.on{opacity:1}
.cnav .pn a{display:inline-block;margin:0;padding:0;white-space:nowrap;writing-mode:horizontal-tb;font:inherit;letter-spacing:inherit;color:inherit}