/* =============================================================================
   陈秋实 · 作品集 — 站点样式
   设计令牌来自设计稿 v1：深海底色 + 海草绿 / 珊瑚粉 / 深紫 / 水光蓝
   ============================================================================= */

:root{
  --bg:#0B1211;
  --sf:#131C1A;
  --sf2:#19241F;
  --sf3:#1F2C26;
  --fg:#EDF4F1;
  --mu:#94A9A2;
  --mu2:#6C7F79;
  --hr:rgba(255,255,255,.09);
  --hr2:rgba(255,255,255,.16);

  --a1:#7CE38B;   /* 海草绿 */
  --a2:#FF7A9C;   /* 珊瑚粉 */
  --a3:#A98BFF;   /* 深紫   */
  --a4:#5EC8E5;   /* 水光蓝 */
  /* 板块原色由 base.html 以内联 --raw 注入（暗色调性，深潜主题直接用）。
     --accent = 文字/线条安全版（日间下压深），--accent-fill = 原色块（深色文字坐在上面）。
     两者的分流定义在下方 body / 亮色主题两处 —— 必须挂在 body 上，
     内联 --raw 在 body 元素，挂 :root 的话 var(--raw) 解析不到它。 */
  --accent:var(--a1);

  --nav-h:72px;
  --wrap:1240px;
  --r:18px;
  --r-sm:12px;

  --ease:cubic-bezier(.22,.61,.36,1);

  /* 深海场景层（默认「深潜」= 无光层） */
  --sea-top:#14424E;
  --sea-mid:#0E2B34;
  --sea-low:#0A171C;
  --sea-bot:#05090C;
  --sea-ridge-far:#123039;
  --sea-ridge-mid:#0D2229;
  --sea-ridge-near:#08161B;
  --sea-ray:rgba(148,222,240,.16);
  --sea-flora:#2E7183;
  --sea-grain:.055;
  --sea-vignette:rgba(3,7,9,.62);
  --surface:rgba(11,18,17,.72);
  --surface-solid:rgba(9,15,14,.97);
  --scrim:rgba(11,18,17,.82);
}

/* 透光层（浅色）—— 「阳光浅海」：海水是透亮的蓝绿，光柱是实打实的白，
   海山是清晰的青色剪影。不是把暗色调淡，而是换一段水域。 */
:root[data-theme="light"]{
  --bg:#F2F8F6;
  --sf:#FFFFFF;
  --sf2:#EFF7F4;
  --sf3:#E3EFEB;
  --fg:#0C1D1B;
  --mu:#48645F;
  --mu2:#56736C;
  --hr:rgba(12,29,27,.12);
  --hr2:rgba(12,29,27,.24);

  --a1:#1F9E57;
  --a2:#E04E7E;
  --a3:#6E4FE0;
  --a4:#1D86AC;

  --sea-top:#8FD9DE;
  --sea-mid:#79CDD3;
  --sea-low:#BFEBE4;
  --sea-bot:#E9F4EF;
  --sea-ridge-far:#79BEC6;
  --sea-ridge-mid:#54A3B0;
  --sea-ridge-near:#2F7E8C;
  --sea-ray:rgba(255,255,255,.85);
  --sea-flora:#1F7D8C;
  --sea-grain:.035;
  --sea-vignette:rgba(30,98,106,.15);
  --surface:rgba(255,255,255,.78);
  --surface-solid:rgba(255,255,255,.98);
  --scrim:rgba(8,30,34,.55);
}
/* 日间模式的核心一招：板块原色（base.html 内联在 body 上的 --raw，暗色调性）
   压成「文字安全」版。in oklch 往黑里混只降明度与饱和、不偏色相 ——
   绿还是绿、粉还是粉，只是变深。70% 是量出来的平衡点：五个板块色
   对浅海底全部 ≥4.5:1（原先是 1.6:1 的隐形状态）。
   原色留给 --accent-fill，给按钮面/选区这些「深色文字坐在上面」的色块。
   ★ 这条必须挂在 body 上：内联 --raw 在 body 元素，挂 :root 解析不到它。 */
:root[data-theme="light"] body{
  --accent:color-mix(in oklch, var(--raw, var(--a1)) 70%, black);
  --accent-fill:var(--raw, var(--a1));
}
@media(prefers-color-scheme:light){
  :root:not([data-theme]){
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* 只用于锚点跳转（如「开始下潜」）。用户滚轮的滚动一律交还浏览器原生处理 ——
   fx.js 里曾用 wheel+preventDefault 做「假平滑」，与这条声明互相打断，
   表现为画面剧烈抖动且滚不动，2026-10-13 已移除。 */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",
              -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  display:flex;flex-direction:column;min-height:100vh;
  /* 板块原色（base.html 内联 --raw）在这里接管 --accent：深潜主题直接用原色，
     日间主题由下方 ：root[data-theme="light"] body 的压深版覆盖。 */
  --accent:var(--raw,var(--a1));
}
main{flex:1 0 auto;position:relative;z-index:1}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.15;letter-spacing:-.01em}
p{margin:0}
::selection{background:var(--accent-fill,var(--accent));color:#08120D}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.serif{font-family:Georgia,"Times New Roman",serif}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 44px}
@media(max-width:900px){.wrap{padding:0 22px}}

/* ---------------------------------------------------------------- 导航 */
.nv{
  position:sticky;top:0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;gap:26px;
  padding:0 44px;
  border-bottom:1px solid var(--hr);
  background:var(--surface);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
}
@media(max-width:900px){.nv{padding:0 22px;gap:14px}}
.nv .brand{display:flex;align-items:baseline;gap:9px;flex:0 0 auto}
.nv .brand b{font-size:19px;letter-spacing:.06em}
.nv .brand em{font-style:normal;font-size:10px;letter-spacing:.26em;color:var(--mu)}
@media(max-width:620px){.nv .brand em{display:none}}
.nv .mid{display:flex;gap:26px;font-size:15.5px;color:var(--mu);margin-left:22px}
@media(max-width:900px){.nv .mid{display:none}}
.nv .mid a{position:relative;transition:color .25s var(--ease)}
.nv .mid a:hover{color:var(--fg)}
.nv .mid a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-8px;height:2px;
  background:var(--accent);transition:right .3s var(--ease);
}
.nv .mid a.on{color:var(--fg);font-weight:600}
.nv .mid a.on::after,.nv .mid a:hover::after{right:0}
.nv .sp{flex:1}
.nv .ic{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--hr);
  display:grid;place-items:center;color:var(--mu);flex:0 0 auto;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.nv .ic:hover{border-color:var(--hr2);color:var(--fg)}

/* 移动端菜单 */
.mbtn{display:none;width:38px;height:38px;border:1px solid var(--hr);border-radius:10px;
  place-items:center;color:var(--fg)}
@media(max-width:900px){.mbtn{display:grid}}
.msheet{
  position:fixed;inset:var(--nav-h) 0 auto;z-index:59;
  background:var(--surface-solid);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--hr);
  padding:10px 22px 22px;
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.msheet.open{transform:none;opacity:1;pointer-events:auto}
.msheet a{display:block;padding:14px 4px;font-size:17px;border-bottom:1px solid var(--hr)}
.msheet a:last-child{border-bottom:0}

/* ---------------------------------------------------------------- Hero */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:min(calc(100svh - var(--nav-h)),880px)}
@supports not (height:100svh){.hero{min-height:min(calc(100vh - var(--nav-h)),880px)}}
/* 主视觉 —— 设计稿要求「主页主图」。但原图是五彩插画，直接铺会和深海调性打架，
   所以做两件事：① 用椭圆遮罩把四边化开，融进水层而不是贴在页面上；
   ② 用 color 混合把原图统一成青绿单色（保留明暗、洗掉五彩），
      再压暗一档 —— 于是它变成一幅「沉在海底的画」。 */
.hero__art{position:absolute;inset:0;z-index:0;pointer-events:none;
  overflow:hidden;isolation:isolate}
.hero__art img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:63% 24%;
  opacity:.58;transform:scale(1.06);
  filter:saturate(.66) brightness(.58) contrast(1.06);
  -webkit-mask-image:radial-gradient(112% 76% at 78% 43%,#000 18%,rgba(0,0,0,.62) 44%,transparent 74%);
  mask-image:radial-gradient(112% 76% at 78% 43%,#000 18%,rgba(0,0,0,.62) 44%,transparent 74%)}
/* 深海调色层：色相取自水柱，明暗取自原图（上亮下暗＝光从水面下来） */
.hero__art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(181deg,
    #6FCFA0 0%,#38A6C0 26%,#14566B 58%,#071F27 84%,#040F14 100%);
  mix-blend-mode:color;opacity:.9;
  -webkit-mask-image:radial-gradient(112% 76% at 78% 43%,#000 18%,rgba(0,0,0,.62) 44%,transparent 74%);
  mask-image:radial-gradient(112% 76% at 78% 43%,#000 18%,rgba(0,0,0,.62) 44%,transparent 74%)}
/* 守卫文字：左上起手处压深，天地两端收边，让标题永远压在水里 */
.hero .veil{position:absolute;inset:0;z-index:1;background:
  radial-gradient(88% 120% at 6% 56%,
    color-mix(in srgb,var(--bg) 90%,transparent) 0%,
    color-mix(in srgb,var(--bg) 58%,transparent) 44%,
    transparent 74%),
  linear-gradient(180deg,
    color-mix(in srgb,var(--bg) 88%,transparent) 0%,
    transparent 26%,
    transparent 60%,
    color-mix(in srgb,var(--bg) 92%,transparent) 100%)}
.hero .inner{position:relative;z-index:5;width:100%;padding-top:20px;padding-bottom:120px}
/* 亮色下同一幅沉画：整幅退成「泡在水里的水印」——
   饱和度和存在感都往下压，让海水与文字当主角。之前 brightness .8 + opacity .64
   会把它糊成一大片灰绿，标题与正文全部泡在里面（2026-10-14 老板指认「丑」）。 */
:root[data-theme="light"] .hero__art img{opacity:.46;
  filter:saturate(.55) brightness(.9) contrast(.98)}
:root[data-theme="light"] .hero__art::after{
  background:linear-gradient(181deg,
    #86DBC9 0%,#54C4D6 26%,#2E96A8 58%,#1D7286 84%,#185D70 100%)}
/* 亮色护纱相应加厚：文字所在的前半场接近纸面，只给右半留画 */
:root[data-theme="light"] .hero .veil{background:
  radial-gradient(94% 132% at 8% 56%,
    color-mix(in srgb,var(--bg) 97%,transparent) 0%,
    color-mix(in srgb,var(--bg) 84%,transparent) 46%,
    transparent 76%),
  linear-gradient(180deg,
    color-mix(in srgb,var(--bg) 92%,transparent) 0%,
    transparent 30%,
    transparent 56%,
    color-mix(in srgb,var(--bg) 96%,transparent) 100%)}
.kicker{display:flex;align-items:center;gap:12px;font-size:11.5px;letter-spacing:.26em;
  color:var(--accent);text-transform:uppercase;font-weight:600}
.kicker s{display:block;width:44px;height:1px;background:var(--accent);flex:0 0 44px}
.hero h1{font-size:clamp(32px,5.4vw,62px);line-height:1.07;margin:20px 0 18px;max-width:15em}
.hero h1 u{text-decoration:none;color:var(--accent);
  background:linear-gradient(180deg,transparent 66%,color-mix(in srgb,var(--accent) 22%,transparent) 0)}
.hero .sub{font-size:clamp(14px,1.4vw,16px);color:var(--mu);max-width:36em;line-height:1.85}
.hero .cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;
  font-size:14px;font-weight:600;border:1px solid transparent;
  transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease)}
.btn.prim{background:var(--accent-fill,var(--accent));color:#08120D}
.btn.prim:hover{transform:translateY(-2px)}
.btn.gho{border-color:var(--hr2);color:var(--fg);background:rgba(255,255,255,.03)}
.btn.gho:hover{border-color:#ffffff44;background:rgba(255,255,255,.07)}
/* 日间下幽灵按钮的底与悬停边换回墨色系 —— 白色 3% 在浅底上等于没有 */
:root[data-theme="light"] .btn.gho{background:rgba(12,29,27,.04)}
:root[data-theme="light"] .btn.gho:hover{border-color:rgba(12,29,27,.4);background:rgba(12,29,27,.07)}

/* ---------------------------------------------------------------- 三入口 */
.entries{position:relative;z-index:10;margin-top:-92px;padding-bottom:80px}
.entry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1000px){.entry-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.entry-grid{grid-template-columns:1fr}}
.entry{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(25,36,31,.92),rgba(19,28,26,.96));
  border:1px solid var(--hr);border-radius:20px;padding:26px 24px 22px;
  backdrop-filter:blur(10px);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
  /* 卡面在两套主题里都是深色（透明底手绘插画只能浮在深卡上），
     卡内字色因此固定用深潜配色，不随主题翻转 —— 否则日间下深字压深卡 */
  --fg:#EDF4F1;--mu:#94A9A2;--mu2:#6C7F79;
  --hr:rgba(255,255,255,.09);--hr2:rgba(255,255,255,.16);
}
/* 卡片序号（01 = 关于我，其后各板块依次）。右上角，与右下的件数 .n 对角呼应 */
.entry .no{position:absolute;right:20px;top:14px;z-index:2;font-size:11px;letter-spacing:.18em;
  font-family:ui-monospace,Consolas,monospace;color:rgba(255,255,255,.55);
  font-variant-numeric:tabular-nums}
.entry::after{
  content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
  background:radial-gradient(90% 70% at 100% 0%,color-mix(in srgb,var(--e) 16%,transparent),transparent 62%);
  opacity:.9;transition:opacity .35s var(--ease);
}
.entry:hover{transform:translateY(-6px);border-color:var(--hr2);
  box-shadow:0 22px 48px -22px rgba(0,0,0,.9)}
.entry .glow{position:absolute;right:-50px;top:-50px;width:170px;height:170px;border-radius:50%;
  background:var(--e);filter:blur(52px);opacity:.32;transition:opacity .35s var(--ease)}
.entry:hover .glow{opacity:.5}
.entry .ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid var(--hr);margin-bottom:18px;position:relative;
  color:var(--e)}
.entry h3{font-size:21px;margin-bottom:5px;position:relative;
  /* color 是从 body 继承的**计算值**，卡上的 --fg token 覆盖对它无效，必须显式取 */
  color:var(--fg)}
.entry .en{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mu);
  margin-bottom:13px;position:relative}
.entry p{font-size:13.5px;line-height:1.75;color:var(--mu);position:relative}
.entry .go{margin-top:auto;padding-top:18px;font-size:12.5px;color:var(--e);display:flex;
  align-items:center;gap:7px;position:relative}
.entry .go span{transition:transform .3s var(--ease)}
.entry:hover .go span{transform:translateX(5px)}
.entry .n{position:absolute;right:22px;bottom:20px;font-size:11px;color:var(--mu2);
  letter-spacing:.1em;font-family:ui-monospace,Consolas,monospace}

/* 卡片插画：白纸底手绘已抠成透明 PNG，直接浮在深色卡面上 */
.entry .art{position:relative;z-index:1;height:150px;margin:-4px -6px 18px;
  display:grid;place-items:center}
.entry .art img{max-height:150px;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.5));
  transform:rotate(-2.2deg);transition:transform .6s var(--ease)}
.entry:hover .art img{transform:rotate(0deg) translateY(-6px) scale(1.035)}
/* 有插画的卡片：图标收小，给插画让位 */
.entry.has-art .ic{width:40px;height:40px;border-radius:12px;margin-bottom:12px}
.entry.has-art .ic svg{width:19px;height:19px}
@media(max-width:680px){.entry .art{height:128px}.entry .art img{max-height:128px}}

/* ---------------------------------------------------------------- 空板块
   新开的栏目先立块牌子，别让页面空着。 */
.empty{padding:64px 0 96px;display:grid;gap:14px;justify-items:center;text-align:center}
.empty-ic{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);margin-bottom:6px}
/* 板块图标本体是 24px 的，这里放大到 30px */
.empty-ic svg{width:30px;height:30px}
.empty b{font-size:19px;font-weight:600}
.empty p{font-size:14px;line-height:1.85;color:var(--mu);max-width:44ch}
.empty a{color:var(--accent);border-bottom:1px solid color-mix(in srgb,var(--accent) 42%,transparent)}
.empty a:hover{border-bottom-color:var(--accent)}

/* ---------------------------------------------------------------- 内页头 */
.phead{padding:56px 0 30px;border-bottom:1px solid var(--hr)}
/* 日间下板块页的标题区直接坐在中调水色上（描述段 ~3:1），垫一层纸面水洗——
   垂直渐隐 + 左右用 mask 化开，四边都不出硬边；暗色主题不加载，观感零变化 */
:root[data-theme="light"] .phead{position:relative}
:root[data-theme="light"] .phead::before{content:"";position:absolute;
  inset:-36px -44px -26px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb,var(--bg) 92%,transparent) 20%,
    color-mix(in srgb,var(--bg) 86%,transparent) 72%,
    transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
@media(max-width:900px){:root[data-theme="light"] .phead::before{inset:-24px -22px -20px}}
.crumb{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--mu);flex-wrap:wrap}
.crumb a:hover{color:var(--fg)}
.crumb b{color:var(--accent);font-weight:500}
.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);font-weight:600}
.phead h1{font-size:clamp(30px,4vw,46px);margin:14px 0 12px}
.lead{font-size:15.5px;line-height:1.8;color:var(--mu);max-width:62ch}

/* ------------------------------------------------- 板块横幅（可选） */
.sect-hero{position:relative;margin:0;height:clamp(210px,28vw,390px);overflow:hidden;
  border-bottom:1px solid var(--hr);background:var(--sf)}
.sect-hero img{width:100%;height:100%;display:block}
.sect-hero-fg{position:relative;z-index:1}
/* 横图：铺满并裁切 */
.sect-hero.is-cover .sect-hero-fg{object-fit:cover;transform:scale(1.02);
  filter:saturate(.9) contrast(1.02)}
/* 竖图：居中完整显示，两侧用同一张图的虚化放大版补底 */
.sect-hero.is-contain .sect-hero-bg{position:absolute;inset:0;z-index:0;object-fit:cover;
  filter:blur(28px) saturate(.78) brightness(.55);transform:scale(1.18)}
.sect-hero.is-contain .sect-hero-fg{object-fit:contain;
  filter:drop-shadow(0 18px 44px rgba(0,0,0,.5))}
/* 上沿压暗接住顶栏、下沿渐隐落进页面底色 —— 免得出现一道硬边 */
.sect-hero-veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--bg) 80%,transparent) 0%,
    color-mix(in srgb,var(--bg) 30%,transparent) 26%,
    color-mix(in srgb,var(--bg) 26%,transparent) 62%,
    var(--bg) 100%)}
.sect-hero-cap{position:absolute;right:20px;bottom:12px;z-index:3;max-width:min(64%,52ch);
  text-align:right;font-size:10.5px;line-height:1.6;color:var(--fg);
  padding:5px 10px;border-radius:9px;
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  border:1px solid var(--hr);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media(max-width:620px){
  .sect-hero{height:clamp(160px,44vw,240px)}
  .sect-hero-cap{right:12px;bottom:8px;font-size:9.5px;max-width:80%}
}
/* 板块页的站外跳转（合作方 / 外部站点） */
.sect-ext{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px}
.sect-ext-note{margin:0;font-size:12px;line-height:1.7;color:var(--mu2);max-width:54ch}

/* ---------------------------------------------------------------- 卡片 */
.grid{padding:34px 0 72px}
/* flex 居中而非 grid：5 张卡 3+2 排时末行两张居中（老板要的「对称」），
   grid 的 1fr 列只能左对齐收尾。每张卡的基准宽度仍等于原来 1fr 的宽 */
.grid.g3{display:flex;flex-wrap:wrap;gap:22px;justify-content:center}
.grid.g3 > .card{flex:0 0 calc((100% - 44px)/3)}
.grid.g2{display:flex;flex-wrap:wrap;gap:22px;justify-content:center}
.grid.g2 > .card{flex:0 0 calc((100% - 22px)/2)}
@media(max-width:1000px){.grid.g3 > .card,.grid.g2 > .card{flex-basis:calc((100% - 22px)/2)}}
@media(max-width:680px){.grid.g3 > .card,.grid.g2 > .card{flex-basis:100%}}

.card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--sf);border:1px solid var(--hr);border-radius:var(--r);
/* 栏目内序号（老板 2.6：每个栏目也要编号） */
.cno{position:absolute;right:12px;top:12px;z-index:3;font-size:11px;letter-spacing:.16em;
  font-family:ui-monospace,Consolas,monospace;color:#fff;
  background:rgba(6,10,9,.55);padding:3px 8px;border-radius:999px;
  font-variant-numeric:tabular-nums;pointer-events:none}
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
/* 整卡可点：铺一层透明链接，避免用嵌套 <a> 包住整块内容 */
.stretch{position:absolute;inset:0;z-index:4}
.card:hover{transform:translateY(-5px);border-color:var(--hr2);
  box-shadow:0 24px 50px -26px rgba(0,0,0,.95)}
.card .cov{position:relative;overflow:hidden;background:var(--sf2);aspect-ratio:4/3;flex:0 0 auto}
/* contain 而非 cover：卡片封面一律完整显示，竖幅/超宽都裁不到（留白即 --sf2 卡纸底）。
   旧写法 cover 会把 0.42~0.75 的竖幅裁掉 44%~58%。 */
.card .cov img{width:100%;height:100%;object-fit:contain;
  transition:transform .7s var(--ease)}
.card:hover .cov img{transform:scale(1.05)}
.card .cov.tall{aspect-ratio:1/1}
.card .cov .dtype{
  position:absolute;left:12px;top:12px;padding:5px 10px;border-radius:8px;
  background:rgba(11,18,17,.8);border:1px solid var(--hr);backdrop-filter:blur(6px);
  font-size:10px;letter-spacing:.12em;color:#DCEAE5;text-transform:uppercase}
.card:hover .cov .go{opacity:1;transform:none}
.card .cov .go{
  position:absolute;right:12px;bottom:12px;padding:7px 13px;border-radius:999px;
  background:rgba(11,18,17,.82);border:1px solid var(--hr2);font-size:11.5px;color:#EDF4F1;
  opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.card .bd{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:19px;margin-bottom:6px}
.card .en{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mu);
  margin-bottom:11px}
.card p{font-size:13px;line-height:1.72;color:var(--mu)}
.card .meta{margin-top:auto;padding-top:15px;display:flex;flex-wrap:wrap;gap:7px;align-items:center}

/* 文字型封面 */
.cov.typo{display:flex;flex-direction:column;justify-content:center;padding:26px 24px;
  background:radial-gradient(120% 120% at 12% 0%,var(--sf3) 0%,var(--sf) 62%)}
.cov.typo q{font-family:Georgia,serif;font-size:clamp(15px,1.5vw,19px);line-height:1.55;
  color:var(--fg);font-style:italic;quotes:none}
.cov.typo .au{font-size:10.5px;letter-spacing:.2em;color:var(--accent);margin-top:14px;
  text-transform:uppercase}
.cov.heart{display:grid;place-items:center;background:linear-gradient(160deg,var(--sf3),var(--sf))}

/* 横排卡片（完整世界观） */
.card.wide{flex-direction:row}
.card.wide .cov{flex:0 0 44%;aspect-ratio:auto;height:100%;min-height:230px}
@media(max-width:680px){
  .card.wide{flex-direction:column}
  .card.wide .cov{flex:0 0 auto;aspect-ratio:4/3;min-height:0;height:auto}
}
.card.wide .bd{padding:22px 24px}

/* ---------------------------------------------------------------- 标签 */
.tag{display:inline-block;padding:4px 11px;border-radius:999px;border:1px solid var(--hr);
  font-size:11.5px;color:var(--mu);background:rgba(255,255,255,.03);white-space:nowrap}
.tag.g{color:var(--a1);border-color:rgba(124,227,139,.34);background:rgba(124,227,139,.08)}
.tag.p{color:var(--a2);border-color:rgba(255,122,156,.34);background:rgba(255,122,156,.08)}
.tag.v{color:var(--a3);border-color:rgba(169,139,255,.34);background:rgba(169,139,255,.08)}
.tag.b{color:var(--a4);border-color:rgba(94,200,229,.34);background:rgba(94,200,229,.08)}
.tag.dim{color:var(--mu2)}

/* ---------------------------------------------------------------- 画作网格 */
.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:30px 0 72px}
@media(max-width:1100px){.gallery{grid-template-columns:repeat(4,1fr)}}
@media(max-width:820px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.gallery{grid-template-columns:repeat(2,1fr)}}
.sk{position:relative;overflow:hidden;border-radius:var(--r-sm);background:var(--sf);
  border:1px solid var(--hr);aspect-ratio:4/5;cursor:zoom-in;
  transition:transform .35s var(--ease),border-color .35s var(--ease)}
.sk:hover{transform:translateY(-4px);border-color:var(--hr2)}
/* 画廊格：统一 4/5 装裱框，图片 contain 完整居中（cover 曾把竖幅裁 47%、超宽裁 78%） */
.sk img{width:100%;height:100%;object-fit:contain;transition:transform .7s var(--ease)}
.sk:hover img{transform:scale(1.06)}
.sk .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 11px 9px;font-size:11px;
  color:#DCEAE5;background:linear-gradient(0deg,rgba(11,18,17,.94),transparent)}
.sk .num{position:absolute;left:10px;top:9px;font-size:10px;letter-spacing:.1em;color:#9db3ac;
  font-family:ui-monospace,Consolas,monospace;
  padding:3px 7px;border-radius:6px;background:rgba(11,18,17,.55)}

/* 板块内分栏小标题（书法板块：篆书 / 隶书 / 玩） */
.ggrp{font-size:12.5px;letter-spacing:.2em;color:var(--mu2);
  margin:30px 0 -8px;padding-bottom:8px;border-bottom:1px solid var(--hr)}
/* 日间下分组标签常落在浪头上，mu2 不够看：换墨青 + 左重右轻的纸面水洗
   （与 .phead 的护纱同一套语言，右端化进水色不出硬边） */
:root[data-theme="light"] .ggrp{color:#33524C;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--bg) 88%,transparent) 0%,
    color-mix(in srgb,var(--bg) 55%,transparent) 36%,
    transparent 64%)}
.ggrp:first-of-type{margin-top:4px}
/* 2.28：组序号 + 一句话故事描述 */
.ggrp .gno{display:inline-block;min-width:22px;color:var(--accent);
  font-family:ui-monospace,Consolas,monospace;letter-spacing:.08em}
.ggrp .gdesc{font-size:11.5px;letter-spacing:.02em;color:var(--mu2);
  font-weight:400;margin-left:10px;text-transform:none}
.ggrp + .gallery{padding-top:20px;padding-bottom:44px}

/* 从网格里抽出来单放的作品（30 分钟长视频）：左画面右文字，一整条 */
.bandcard{display:grid;grid-template-columns:1.5fr 1fr;margin:0 0 72px;
  border:1px solid var(--hr);border-radius:var(--r);overflow:hidden;background:var(--sf);
  transition:border-color .35s var(--ease)}
.bandcard:hover{border-color:var(--hr2)}
.bandcover{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--sf2)}
.bandcover img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.bandcard:hover .bandcover img{transform:scale(1.04)}
.bandplay{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;
  border-radius:50%;background:rgba(11,18,17,.6);border:1px solid rgba(220,234,229,.5)}
.bandplay::after{content:"";position:absolute;left:21px;top:16px;
  border-left:16px solid #DCEAE5;border-top:11px solid transparent;border-bottom:11px solid transparent}
.banddur{position:absolute;right:12px;top:12px;padding:3px 8px;border-radius:6px;
  font-family:ui-monospace,Consolas,monospace;font-size:11px;letter-spacing:.06em;
  color:#DCEAE5;background:rgba(11,18,17,.62)}
.bandmeta{padding:26px 30px;display:flex;flex-direction:column;gap:9px;justify-content:center}
.bandmeta .kicker{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.bandmeta h3{font-size:clamp(19px,2.1vw,26px)}
.bandmeta .en{font-size:11.5px;letter-spacing:.06em;color:var(--mu2)}
.bandmeta p{font-size:13.5px;line-height:1.72;color:var(--mu)}
.bandmeta .meta{display:flex;flex-wrap:wrap;gap:6px}
.banddtype{font-size:11.5px;color:var(--mu2)}
.bandmeta .btn{align-self:flex-start;margin-top:5px}
@media(max-width:900px){.bandcard{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- 详情页 */
.dhead{display:grid;grid-template-columns:1.02fr .98fr;gap:38px;padding:26px 0 0;align-items:start}
@media(max-width:1000px){.dhead{grid-template-columns:1fr;gap:26px}}
.dhead .cover{border-radius:var(--r);overflow:hidden;border:1px solid var(--hr);background:var(--sf2);
  aspect-ratio:4/3}
/* 详情页头图同样 contain：竖幅封面（0.42~0.75）原先被裁 65%~68% */
.dhead .cover img{width:100%;height:100%;object-fit:contain}
/* 无图作品的排版式首图 */
.dhead .cover .typo-hero{height:100%;min-height:100%;display:flex;flex-direction:column;
  justify-content:center;padding:40px 42px;
  background:radial-gradient(120% 120% at 14% 0%,var(--sf3) 0%,var(--sf) 64%)}
.dhead .cover .typo-hero q{font-family:Georgia,serif;font-style:italic;quotes:none;
  font-size:clamp(17px,1.9vw,25px);line-height:1.5;color:var(--fg)}
.dhead .cover .typo-hero .au{margin-top:18px;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent)}
.dhead h1{font-size:clamp(28px,3.6vw,42px);margin:14px 0 14px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0 16px}
@media(max-width:520px){.facts{grid-template-columns:1fr 1fr}}
.fact{background:var(--sf);border:1px solid var(--hr);border-radius:var(--r-sm);padding:12px 14px}
.fact em{font-style:normal;display:block;font-size:9.5px;letter-spacing:.16em;color:var(--mu2);
  text-transform:uppercase;margin-bottom:6px}
.fact b{font-size:14px;font-weight:600}
.dsec{padding:52px 0 0}
.dsec .sh{display:flex;align-items:baseline;gap:14px;margin-bottom:18px;
  padding-bottom:12px;border-bottom:1px solid var(--hr)}
.dsec .sh h2{font-size:20px}
.dsec .sh .cnt{font-size:11.5px;color:var(--mu2);font-family:ui-monospace,Consolas,monospace}

/* 作品图集 */
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.plates{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.plates{grid-template-columns:1fr}}
.plate{border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--hr);background:var(--sf);
  cursor:zoom-in;transition:transform .35s var(--ease),border-color .35s var(--ease)}
.plate:hover{transform:translateY(-4px);border-color:var(--hr2)}
/* 作品图：统一 4/3 框 + contain —— 图注写「全貌」就必须真是全貌（曾裁掉 79%） */
.plate img{width:100%;aspect-ratio:4/3;object-fit:contain;transition:transform .7s var(--ease)}
.plate:hover img{transform:scale(1.04)}
.plate .tx{padding:11px 13px;display:flex;align-items:center;gap:9px}
.plate .tx b{font-size:12.5px;font-weight:600}
.plate .tx span{font-size:11px;color:var(--mu2)}
.plate .tx .idx{font-family:ui-monospace,Consolas,monospace;font-size:10.5px;color:var(--mu2);
  margin-left:auto}
.plate.natural img{aspect-ratio:auto}

/* 长卷浏览（漫画页） */
.reader{padding:0 0 20px;position:relative}
/* 右缘渐隐，提示还有更多页可横向滚动 */
.reader::after{content:"";position:absolute;right:0;top:0;bottom:20px;width:64px;
  pointer-events:none;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--bg) 92%,transparent))}
.reader .track{display:flex;gap:16px;overflow-x:auto;padding:4px 0 18px;
  scroll-snap-type:x mandatory;scrollbar-width:thin}
.reader .pg{flex:0 0 auto;width:clamp(230px,26vw,320px);scroll-snap-align:start;
  border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--hr);background:var(--sf2);
  cursor:zoom-in;transition:border-color .3s var(--ease)}
/* 横板页图（16:9 的 PDF 提案页）比漫画竖页给得更宽，缩略状态才读得清版面 */
.reader--wide .pg{width:clamp(300px,34vw,440px)}
.reader .pg:hover{border-color:var(--hr2)}
.reader .pg img{width:100%;height:auto;display:block}
.reader .pg .tx{padding:8px 11px;font-size:11px;color:var(--mu2)}
.reader .hint{font-size:11.5px;color:var(--mu2);display:flex;align-items:center;gap:8px}

/* ---------------------------------------------------------- 册页翻阅（翻页书）
   页元素由**模板**输出，脚本只负责升级：没有 JS（或 JS 没跑起来）时 .book 就是
   一格一格的图集，内容一字不少；库接管后会给容器加上 .stf__parent，网格规则自动让位。

   衬底为什么不用 --sf2：书页是白纸，深浅两套主题里都需要一块比卡片更沉的「桌面」
   才衬得出纸的边界。用 --bg 兑黑，深色主题近乎全黑、浅色主题落在中灰，两边都成立。 */
.book-shell{position:relative;border-radius:var(--r);border:1px solid var(--hr);
  padding:18px 18px 12px;overflow:hidden;
  background:radial-gradient(130% 120% at 50% 0%,
    color-mix(in srgb,var(--bg) 58%,#000 42%), color-mix(in srgb,var(--bg) 78%,#000 22%))}
.book-shell.is-live{border-color:color-mix(in srgb,var(--accent) 26%,var(--hr))}
.book-shell:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 62%,transparent);
  outline-offset:3px}

/* 兜底网格（库接管后不再命中） */
.book:not(.stf__parent){display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.book:not(.stf__parent) .bp{border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--hr);background:var(--sf)}
.book:not(.stf__parent) .bp img{display:block;width:100%;height:auto}

/* 纸页。库给 .stf__item 定 display/尺寸，这里只让图铺满 ——
   用 contain 不用 cover：书法的边角宁可留一丝白，也不能被裁掉一笔。 */
.book.is-live .bp{background:#fff}
.book.is-live .bp img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}

.book-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--hr)}
.book-bar[hidden]{display:none}
.bbtn{flex:0 0 auto;min-width:40px;height:38px;padding:0 12px;border-radius:999px;
  font-size:15px;line-height:1;color:var(--mu);cursor:pointer;font-family:inherit;
  border:1px solid var(--hr2);background:rgba(255,255,255,.04);
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
.bbtn:hover:not(:disabled){color:var(--fg);border-color:var(--mu);background:rgba(255,255,255,.09)}
.bbtn:disabled{opacity:.34;cursor:default}
.bbtn-wide{font-size:12.5px;font-weight:600;padding:0 16px}
.bnum{font-size:12.5px;font-weight:600;color:var(--fg);min-width:9ch;
  font-variant-numeric:tabular-nums}
.bhint{font-size:11.5px;color:var(--mu2)}
.bsp{flex:1;min-width:8px}

/* 全屏翻阅。宿主 #bookfull 在 body 层级 —— main 带 z-index:1，自成层叠上下文，
   固定定位在它里面的元素永远被 z-index:60 的顶栏压住，所以全屏时由 JS 把
   整个 .book-shell 搬进宿主，退出再搬回原位。

   宽度上限按视口高度反推，而不是给容器写死高度：库在 autoSize 下用
   padding-bottom 百分比把高度撑出来（对开时 = 宽 × 1393/1800 ≈ .774），
   所以「限宽」就等于「限高」。竖排单页时比例反过来（1393/900 ≈ 1.548）。 */
.bookfull{position:fixed;inset:0;z-index:150;display:grid;place-items:center;
  padding:16px;overflow:auto;background:rgba(3,7,9,.95)}
.bookfull[hidden]{display:none}
.bookfull .book-shell{width:100%;padding:14px 14px 8px;
  max-width:min(96vw,calc((100vh - 152px) / .774))}
@media(max-width:700px){
  .bookfull .book-shell{max-width:min(96vw,calc((100vh - 152px) / 1.548))}
}
html.book-lock{overflow:hidden}
@media(max-width:700px){
  .book-shell{padding:12px 12px 8px;border-radius:var(--r-sm)}
  .bhint{display:none}
}

/* 附件 / 原文 */
.files{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:680px){.files{grid-template-columns:1fr}}
.file{display:flex;align-items:center;gap:14px;padding:15px 17px;border-radius:var(--r-sm);
  background:var(--sf);border:1px solid var(--hr);transition:border-color .3s var(--ease),
  background .3s var(--ease)}
.file:hover{border-color:var(--hr2);background:var(--sf2)}
.file .fi{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:0 0 38px;
  background:rgba(255,255,255,.05);border:1px solid var(--hr);font-size:10px;font-weight:700;
  letter-spacing:.04em;color:var(--mu)}
.file .ft b{display:block;font-size:13.5px;font-weight:600}
.file .ft span{font-size:11.5px;color:var(--mu2)}
.file .ar{margin-left:auto;color:var(--mu2);font-size:13px}

/* 视频 */
.vids{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.vids--one{grid-template-columns:1fr}
@media(max-width:820px){.vids{grid-template-columns:1fr}}
/* figure 自带 margin:1em 40px，网格/弹性布局里那 80px 会让卡片撑出容器
   （轮播模式下会被 .vport 的 overflow 悄悄裁掉，最难发现），所以在这里归零。 */
.vid{margin:0;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--hr);background:var(--sf)}

/* 封面垫底。把封面自身放大虚化铺满整帧 —— 竖构图的影像（列表里好几段是 9:16）
   两侧就不再是纯黑边，而是封面的延伸。同一张图已在缓存里，不额外发请求。
   帧仍是 16:9（与站内其它媒体一致），封面也按 16:9 出图，所以封面恰好铺满、不出黑边。 */
.vid .frame{position:relative;aspect-ratio:16/9;background:#050a09;overflow:hidden}
.vid .frame .vbg{position:absolute;left:-8%;top:-8%;width:116%;height:116%;
  object-fit:cover;filter:blur(30px) saturate(1.15) brightness(.52)}
.vid .frame iframe,.vid .frame video{position:absolute;inset:0;width:100%;height:100%;border:0;
  object-fit:contain;z-index:1}
.vid .frame .pendimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.vid .ph{position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center;padding:20px}
.vid .ph b{display:block;font-size:14px;margin-bottom:6px}
.vid .ph span{font-size:12px;color:var(--mu)}
.vid .badge{position:absolute;left:12px;top:12px;z-index:3;padding:4px 10px;border-radius:999px;
  background:rgba(11,18,17,.82);border:1px solid var(--hr2);font-size:10.5px;letter-spacing:.1em;
  color:#DCEAE5;pointer-events:none}
/* 时长牌放右上：底图右下角有「AI生成」显式标识（法定，不能盖），而且单段时还要给原生控制条让位 */
.vid .dur{position:absolute;right:12px;top:12px;z-index:3;padding:4px 10px;border-radius:8px;
  background:rgba(11,18,17,.82);border:1px solid var(--hr);font-size:11px;
  font-family:ui-monospace,Consolas,monospace;color:#DCEAE5;pointer-events:none}
.vid .tx{padding:13px 15px}
.vid .tx b{font-size:13.5px;display:block;margin-bottom:3px}
.vid .tx span{font-size:11.5px;color:var(--mu2)}

/* 播放浮标。只在有 JS 时出现 —— 没 JS 它就是个按不动的死按钮，不如不给。
   只占正中一块，不压住底部的原生控制条。 */
.vplay{display:none;position:absolute;left:50%;top:50%;z-index:4;
  transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;padding:0;
  border:1px solid rgba(255,255,255,.44);background:rgba(9,16,15,.46);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#F2FBF8;
  place-items:center;cursor:pointer;
  transition:transform .25s var(--ease),background .25s var(--ease)}
.js .vplay{display:grid}
.vplay svg{width:22px;height:22px;fill:currentColor;margin-left:3px}
.vplay:hover{background:rgba(9,16,15,.74);transform:translate(-50%,-50%) scale(1.08)}
.vplay:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.vid .frame.is-playing .vplay{display:none}

/* 轮播。.is-car 由 vids.js 添加；没有它，上面那套网格就是最终形态（无 JS 时全部影像可见）。
   touch-action:pan-y 是刻意留的：纵向滚动仍归浏览器，我们只拿横向手势。 */
.vport.is-car{overflow:hidden;touch-action:pan-y}
.vport.is-car .vids{display:flex;gap:0;transition:transform .55s var(--ease);will-change:transform}
.vport.is-car .vid{flex:0 0 100%;min-width:0}
.vctrl{margin-top:14px;display:none;align-items:center;gap:10px}
.vbox.is-car .vctrl{display:flex}
/* 页签化的圆点：序号 + 产品名（模板直出，JS 零改动）。一眼看出一共几段影像/几种产品 */
.vdots{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.vdot{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:999px;
  border:1px solid var(--hr2);background:var(--sf);color:var(--mu2);cursor:pointer;
  font:inherit;font-size:12px;line-height:1;white-space:nowrap;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}
.vdot .vdot-n{font-size:10.5px;font-family:ui-monospace,Consolas,monospace;opacity:.68;
  font-variant-numeric:tabular-nums}
.vdot:hover{border-color:var(--accent);color:var(--fg)}
.vdot.is-on{border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
.vdot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vnum{margin-left:auto;font-size:11.5px;color:var(--mu2);
  font-family:ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}
.vbtn{width:32px;height:32px;border-radius:50%;border:1px solid var(--hr2);background:var(--sf);
  color:var(--fg);display:grid;place-items:center;cursor:pointer;padding:0;
  transition:border-color .2s var(--ease),color .2s var(--ease)}
.vbtn svg{width:16px;height:16px}
.vbtn:hover{border-color:var(--accent);color:var(--accent)}
.vbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 2.9 正文流插图（呼啸山庄）：流水模式下由 flow.js 绝对定位在左缘「落岛」，
   正文绕行；无 JS / 窄屏时就是普通文档流，排在正文之后（内容完整） */
.efig{margin:26px auto;max-width:420px}
.efig img{width:100%;height:auto;display:block;border-radius:var(--r-sm);border:1px solid var(--hr)}
.efig figcaption{padding:8px 11px;font-size:11px;color:var(--mu2);text-align:left}
.excerpt.is-flow .efig{position:absolute;left:0;margin:0}

/* 作品正文（原「原文节选」）。
   2026-10-14 起这一区整篇展示：去掉了原先 30em 的淡出截断与底部那句「节选至此」
   —— 那是给「节选」用的，现在这里就是作品本身，不能把正文截掉。 */
.excerpt{background:var(--sf);border:1px solid var(--hr);border-radius:var(--r);padding:28px 30px;
  position:relative;overflow:hidden}
.excerpt::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
  opacity:.75}
.excerpt .et{font-family:Georgia,serif;font-size:15px;line-height:1.95;color:var(--fg);
  opacity:.9;
  white-space:pre-wrap;position:relative}

/* 作品正文 · 流水排版：正文绕开右侧圆形的「水窗」流动，脚本见 /static/js/flow.js。
   圆窗默认 opacity:0 —— 只有脚本成功展开流水时才由 .is-flow 点亮，
   于是无 JS / 窄屏 / 排版失败时它都不会露出来。 */
.excerpt-art{position:absolute;top:28px;right:30px;width:clamp(206px,25%,304px);aspect-ratio:1;
  border-radius:50%;overflow:hidden;pointer-events:none;color:var(--accent);
  opacity:0;transform:scale(.9);transform-origin:50% 50%;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent),
             0 22px 46px -24px rgba(0,0,0,.78);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
.excerpt.is-flow .excerpt-art{opacity:1;transform:none}
.excerpt-art img{display:block;width:100%;height:100%;object-fit:cover;
  filter:saturate(.74) brightness(.8) contrast(1.05);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 60%,rgba(0,0,0,.5) 100%);
  mask-image:radial-gradient(circle at 50% 50%,#000 60%,rgba(0,0,0,.5) 100%)}
.excerpt-art svg{display:block;width:100%;height:100%}

/* 逐行排布：宽度已由脚本算好，这里只负责定位与「不许自动换行」 */
.excerpt .fl{position:absolute;left:0;white-space:pre}
.excerpt.is-flow .et{white-space:normal}
@media(max-width:680px){.excerpt{padding:22px 20px}}
.note{font-size:12.5px;color:var(--mu2);line-height:1.8;padding:14px 16px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.035);border:1px dashed var(--hr2)}

/* 同板块其它作品 */
.siblings{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.siblings{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.siblings{grid-template-columns:1fr}}
.sib{display:flex;gap:14px;padding:13px;border-radius:var(--r-sm);background:var(--sf);
  border:1px solid var(--hr);align-items:center;transition:border-color .3s var(--ease),
  transform .3s var(--ease)}
.sib:hover{border-color:var(--hr2);transform:translateY(-3px)}
.sib .th{width:66px;height:66px;border-radius:9px;overflow:hidden;flex:0 0 66px;background:var(--sf2)}
.sib .th img{width:100%;height:100%;object-fit:contain}
/* 无封面图的同板块作品：用英文名做小字占位，避免一个空灰块 */
.sib .th-txt{display:grid;place-items:center;padding:6px;
  background:radial-gradient(120% 120% at 30% 0%,var(--sf3),var(--sf))}
.sib .th-txt span{font-size:8px;line-height:1.3;letter-spacing:.06em;color:var(--mu);
  text-align:center;text-transform:uppercase;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.sib b{font-size:13.5px;display:block;margin-bottom:3px}
.sib span{font-size:11px;color:var(--mu2);display:block;line-height:1.5}

/* ---------------------------------------------------------------- 页脚 */
.sfoot{margin-top:auto;border-top:1px solid var(--hr);padding:30px 0;flex:0 0 auto;
  position:relative;z-index:1}
.sfoot .brand{display:flex;align-items:baseline;gap:8px}
.sfoot .row{display:flex;align-items:center;gap:16px;font-size:12px;color:var(--mu2);flex-wrap:wrap}
.sfoot .sp{flex:1;min-width:20px}
.sfoot a:hover{color:var(--fg)}

/* ---------------------------------------------------------------- 灯箱 */
.lb{position:fixed;inset:0;z-index:200;display:none;place-items:center;
  background:rgba(6,10,9,.94);backdrop-filter:blur(8px);padding:40px 20px}
.lb.open{display:grid}
.lb img{max-width:min(94vw,1500px);max-height:86vh;width:auto;height:auto;
  border-radius:10px;box-shadow:0 30px 80px -20px #000;
  animation:lbIn .32s var(--ease)}
@keyframes lbIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.lb .cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-size:12.5px;
  color:var(--mu);padding:0 20px}
.lb .x{position:absolute;right:22px;top:20px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--hr2);display:grid;place-items:center;font-size:17px;color:#DCEAE5;
  background:rgba(11,18,17,.6)}
.lb .x:hover{background:rgba(11,18,17,.9)}
.lb .nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  border:1px solid var(--hr2);display:grid;place-items:center;font-size:18px;color:#DCEAE5;
  background:rgba(11,18,17,.6)}
.lb .nav:hover{background:rgba(11,18,17,.9)}
.lb .prev{left:20px}.lb .next{right:20px}
@media(max-width:680px){.lb .nav{display:none}.lb{padding:20px 10px}}

/* ---------------------------------------------------------------- 入场动画 */
/* 只有 JS 可用时才隐藏待入场元素 —— 否则 JS 被禁用/未执行时整页会变成空白，
   这是「渐进增强」的底线：无 JS 也要能看到全部内容。 */
.js .rv{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.is-in{opacity:1;transform:none}

/* 顶部阅读进度 */
.prog{position:fixed;left:0;top:0;height:2px;background:var(--accent);z-index:100;width:0;
  transition:width .1s linear}

/* =============================================================================
   深海氛围层（scene）
   参照 portfolio-rs 的水墨长卷，转译为海底：水层 → 光柱 → 海山（三层视差）
   → 海草 → 粒子 → 水纹 → 暗角。全部 aria-hidden + pointer-events:none，
   纯装饰，读屏与键盘都感知不到，禁 JS 时也照常显示。
   ============================================================================= */

.scene{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,var(--sea-top) 0%,var(--sea-mid) 24%,
             var(--sea-low) 62%,var(--sea-bot) 100%);
}
/* 水面透下来的顶光：越浅的水层越亮 */
.scene__sky{position:absolute;inset:0;transition:opacity .9s var(--ease);opacity:.36;
  background:radial-gradient(105% 68% at 50% -14%,rgba(148,222,240,.34),transparent 62%)}
/* 深处的黑：越深的水层越沉 */
.scene__depth{position:absolute;inset:0;opacity:.6;transition:opacity .9s var(--ease);
  background:linear-gradient(180deg,transparent 30%,var(--sea-bot) 100%)}

html[data-sky="sunlit"] .scene__sky{opacity:1}
html[data-sky="surface"] .scene__sky{opacity:.74}
html[data-sky="twilight"] .scene__sky{opacity:.30}
html[data-sky="abyss"] .scene__sky{opacity:.10}
html[data-sky="sunlit"] .scene__depth{opacity:.32}
html[data-sky="surface"] .scene__depth{opacity:.46}
html[data-sky="twilight"] .scene__depth{opacity:.76}
html[data-sky="abyss"] .scene__depth{opacity:1}

/* ---- 氛围对场景层的一点偏置：每种状态有自己的「天气」----
   只动光柱 / 颗粒 / 暗角这三样装饰层，不碰内容可读性。
   放在 data-sky 规则之后，同样特异性下后者生效 —— 这是刻意的：
   氛围是用户明确手选的，优先于时段推出来的水层。 */
html[data-mood="current"] .scene__rays{opacity:.95}
html[data-mood="bubble"] .scene__rays{opacity:.72}
html[data-mood="plankton"] .scene__rays{opacity:.85}
html[data-mood="glow"]{--sea-vignette:rgba(2,7,12,.74)}
html[data-mood="snow"]{--sea-grain:.075}
html[data-mood="snow"] .scene::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(226,242,244,.10),rgba(226,242,244,.03) 55%,rgba(226,242,244,.09))}
:root[data-theme="light"][data-mood="glow"]{--sea-vignette:rgba(30,98,106,.24)}
:root[data-theme="light"][data-mood="snow"] .scene::after{
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 55%,rgba(255,255,255,.14))}

/* ---- 光柱：从水面斜射下来的一束束光 ----
   角度统一给到 100°~112°（水面在左上，光向右下斜），
   束宽彼此不一，避免六条等宽竖线读成栅栏。 */
.scene__rays{position:absolute;left:-25%;right:-25%;top:-40%;height:170%;
  background:
    linear-gradient(104deg,transparent 8%,var(--sea-ray) 9.6%,transparent 12.6%),
    linear-gradient(99deg,transparent 22%,var(--sea-ray) 23.1%,transparent 24.6%),
    linear-gradient(110deg,transparent 35%,var(--sea-ray) 37.0%,transparent 40.4%),
    linear-gradient(101deg,transparent 49%,var(--sea-ray) 50.0%,transparent 51.4%),
    linear-gradient(106deg,transparent 61%,var(--sea-ray) 62.8%,transparent 66.0%),
    linear-gradient(97deg,transparent 75%,var(--sea-ray) 76.1%,transparent 77.6%),
    linear-gradient(108deg,transparent 88%,var(--sea-ray) 89.4%,transparent 92.0%);
  filter:blur(10px);transform-origin:50% 0;
  animation:rayDrift 30s ease-in-out infinite alternate}
@keyframes rayDrift{
  from{transform:translateX(-2.5%) rotate(-1.1deg) scaleY(1)}
  to{transform:translateX(2.5%) rotate(1.1deg) scaleY(1.05)}
}

/* ---- 海山 / 海床 ----
   三层各自显式给高度：SVG 走 preserveAspectRatio="none"，
   高度若由 viewBox 宽高比决定，窄屏下会被压成一条线。
   滚动时以不同速率平移，--par 由 motion.js 写。 */
.seamounts{position:absolute;left:0;right:0;bottom:0;height:80vh;pointer-events:none;z-index:0}
.seamount{position:absolute;left:-3%;width:106%;display:block;
  transform:translate3d(0,calc(var(--par,0) * 120px),0);will-change:transform}
/* bottom 一律给 0：SVG 自己是一块矩形，底边若悬空就会在水里留下一条
   水平接缝（远山的底边会露出来）。山脊的高低改由「高度 + 路径 y」控制。 */
.seamount--far{height:74vh;bottom:0;fill:var(--sea-ridge-far);opacity:.4}
.seamount--mid{height:62vh;bottom:0;fill:var(--sea-ridge-mid);opacity:.72}
.seabed{position:absolute;left:0;right:0;bottom:0;height:20vh;pointer-events:none;z-index:2}
.seabed .seamount{position:absolute;left:-3%;width:106%;height:100%;bottom:0;
  fill:var(--sea-ridge-near);opacity:1;
  transform:translate3d(0,calc(var(--par,0) * 56px),0)}

/* ---- 海草：贴着海底轻轻摆的水草剪影 ----
   画在「中海山之后、近海床之前」，于是根部被海床挡住，
   读起来是从海床背后长出来的一丛，而不是贴在画面上的一条。 */
.scene__flora{position:absolute;left:0;right:0;bottom:0;height:26vh;overflow:hidden;
  color:var(--sea-flora);pointer-events:none;z-index:1}
.scene__flora svg{position:absolute;inset:0;width:100%;height:100%}
.scene__flora .blades--far{opacity:.26;filter:blur(.9px)}
.scene__flora .blades--near{opacity:.52}
.scene__flora .blade{
  transform-origin:50% 100%;transform-box:fill-box;
  animation:sway 7s ease-in-out infinite alternate}
.scene__flora .blades--far .blade{animation-duration:11s}
.scene__flora .blade:nth-child(2n){animation-duration:9s;animation-delay:-1.6s}
.scene__flora .blade:nth-child(3n){animation-duration:12.5s;animation-delay:-3.1s}
.scene__flora .blade:nth-child(5n){animation-duration:8s;animation-delay:-4.4s}
.scene__flora .blade:nth-child(7n){animation-duration:14s;animation-delay:-6.2s}
@keyframes sway{
  from{transform:rotate(-2.1deg) scaleY(1)}
  to{transform:rotate(2.6deg) scaleY(1.035)}
}

/* ---- 粒子：canvas 由 climate.js 驱动 ---- */
.scene__weather{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:3}

/* ---- 水纹颗粒：一层极淡的噪点，让平涂的颜色有水的呼吸 ---- */
.scene__grain{position:absolute;inset:0;z-index:4;opacity:var(--sea-grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px}

/* ---- 暗角：把视线收进画面中央 ---- */
.scene__vignette{position:absolute;inset:0;z-index:5;
  background:radial-gradient(125% 100% at 50% 38%,transparent 40%,var(--sea-vignette))}

/* =============================================================================
   氛围切换器（洋流 / 气泡 / 荧光 / 浮游 / 海雪）
   ============================================================================= */

.mood-picker{position:relative;flex:0 0 auto}
.mood-picker summary{list-style:none;cursor:pointer}
.mood-picker summary::-webkit-details-marker{display:none}
.mood-picker summary::marker{content:""}
.mood-menu{
  position:absolute;right:0;top:calc(100% + 10px);z-index:70;
  min-width:190px;padding:7px;border-radius:14px;
  background:var(--surface);border:1px solid var(--hr2);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 22px 50px -22px rgba(0,0,0,.85);
  display:flex;flex-direction:column;gap:2px;
  animation:menuIn .2s var(--ease)}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mood-opt{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:9px;
  text-align:left;font-size:13.5px;color:var(--mu);transition:background .2s var(--ease),color .2s var(--ease)}
.mood-opt span{flex:1}
.mood-opt small{font-size:10.5px;color:var(--mu2);letter-spacing:.04em}
.mood-opt:hover{background:rgba(255,255,255,.06);color:var(--fg)}
:root[data-theme="light"] .mood-opt:hover{background:rgba(11,26,25,.06)}
.mood-opt[aria-pressed="true"]{color:var(--fg);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.mood-opt[aria-pressed="true"] small{color:var(--accent)}
.mood-opt::before{content:"";width:6px;height:6px;border-radius:50%;flex:0 0 6px;
  background:currentColor;opacity:.35}
.mood-opt[aria-pressed="true"]::before{background:var(--accent);opacity:1;
  box-shadow:0 0 10px var(--accent)}

/* =============================================================================
   回到顶部
   ============================================================================= */

.totop{position:fixed;right:24px;bottom:24px;z-index:80;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--hr2);background:var(--surface);backdrop-filter:blur(12px);
  display:grid;place-items:center;color:var(--fg);opacity:0;transform:translateY(12px);
  pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease),
  border-color .3s var(--ease)}
.totop.is-visible{opacity:1;transform:none;pointer-events:auto}
.totop:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:620px){.totop{right:14px;bottom:14px;width:40px;height:40px}}

/* =============================================================================
   hero 标题逐字上升（span.char 由 motion.js 生成）
   ============================================================================= */

.hero h1 .char{display:inline-block;will-change:transform,opacity}
.js .hero h1[data-split] .char{
  opacity:0;transform:translateY(.5em);
  animation:charRise .72s var(--ease) forwards;
  animation-delay:calc(var(--i) * 24ms)}
@keyframes charRise{to{opacity:1;transform:none}}

/* =============================================================================
   卡片光晕：跟着指针走的一小团光
   ============================================================================= */

.card::before,.entry::before,.sk::before,.plate::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.10),transparent 62%);
  opacity:0;transition:opacity .35s var(--ease)}
:root[data-theme="light"] .card::before,
:root[data-theme="light"] .entry::before{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.75),transparent 62%)}
.card:hover::before,.entry:hover::before,.sk:hover::before,.plate:hover::before{opacity:1}

/* =============================================================================
   站点统计
   ============================================================================= */

.stats{display:flex;gap:clamp(24px,4vw,52px);flex-wrap:wrap;padding:30px 0 4px}
.stat{display:flex;flex-direction:column;gap:1px}
.stat-num{font-size:clamp(26px,3.2vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.1;
  font-variant-numeric:tabular-nums;color:var(--fg)}
.stat-num--word{font-size:clamp(18px,2vw,24px);letter-spacing:0}
.stat-label{font-size:11px;color:var(--mu2);letter-spacing:.18em;text-transform:uppercase}

/* =============================================================================
   气泡拖尾 / 标题光带
   ============================================================================= */

.bubble-trail{position:fixed;inset:0;z-index:55;pointer-events:none}
.glow-line{display:block;color:var(--accent);overflow:visible;margin-top:3px}

/* =============================================================================
   页面转场（View Transitions API；不支持的浏览器静默退回普通跳转）
   ============================================================================= */

@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}
::view-transition-old(root){animation-name:vtOut}
::view-transition-new(root){animation-name:vtIn}
@keyframes vtOut{to{opacity:0;filter:blur(2px)}}
@keyframes vtIn{from{opacity:0;filter:blur(2px)}}

/* =============================================================================
   深海层的响应式与降级
   ============================================================================= */

@media(max-width:900px){
  .scene__flora{height:23vh}
  .seabed{height:18vh}
  .scene__rays{opacity:.6}
  /* 窄屏没有「左文右图」的余地：主图居中退到后面，压得更暗，
     靠顶部 veil 把标题那一段让出来 */
  .hero__art img{object-position:52% 36%;opacity:.5;filter:saturate(.6) brightness(.52) contrast(1.05);
    -webkit-mask-image:radial-gradient(126% 92% at 52% 44%,#000 18%,rgba(0,0,0,.66) 48%,transparent 82%);
    mask-image:radial-gradient(126% 92% at 52% 44%,#000 18%,rgba(0,0,0,.66) 48%,transparent 82%)}
  .hero__art::after{
    -webkit-mask-image:radial-gradient(126% 92% at 52% 44%,#000 18%,rgba(0,0,0,.66) 48%,transparent 82%);
    mask-image:radial-gradient(126% 92% at 52% 44%,#000 18%,rgba(0,0,0,.66) 48%,transparent 82%)}
  .hero .veil{background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--bg) 84%,transparent) 0%,
      color-mix(in srgb,var(--bg) 60%,transparent) 34%,
      color-mix(in srgb,var(--bg) 22%,transparent) 62%,
      color-mix(in srgb,var(--bg) 86%,transparent) 100%)}
}
@media(max-width:620px){
  .scene__rays{display:none}
  /* 窄屏文字区块相对更高，把远景压淡一档，别和标题抢 */
  .seamount--far{opacity:.28}
  .seamount--mid{opacity:.54}
  .scene__flora{height:21vh}
  .seabed{height:16vh}
}
@media(prefers-reduced-motion:reduce){
  .scene__rays{animation:none}
  .scene__flora .blade{animation:none}
  .hero h1 .char{opacity:1!important;transform:none!important;animation:none!important}
  .js .rv{opacity:1;transform:none}
}
/* 关掉动效偏好时，粒子 canvas 也藏掉（静态水层与海山仍在） */
@media(prefers-reduced-motion:reduce){
  .scene__weather{display:none}
  .bubble-trail{display:none}
}