/* ============================================================
   龙人古琴 · 板块落地页共享样式
   设计系统锚点（来自斫琴坊 brief，全站落地页遵守）：
   - 暗调摄影画卷：背景 #0C0A07 恒定，文字嵌在画里，不做卡片堆砌
   - 金 #CBA258 只用于题眉、CTA、分隔细线；正文米白 #E8E2D6，禁纯白
   - 标题瘦金体；正文 Noto Serif SC
   - 动效（2026-07 顶奢升级，对标 Patek/Apple 的克制与质感）：
     · 签名缓动 --e-out（expo-out），全站统一
     · 章节滚动显现：fade + 28px + 焦点微聚（blur settle），1.1s，一次
     · 同批入场元素 90ms stagger（site.js）
     · 展陈图 scale 1.03 → 1 缓落（仅无 hover-transform 的 figure）
     · 首屏 Ken Burns（10s/3%）；页面入场 0.6s 淡入
     · prefers-reduced-motion 一律直出
   - 全页仅尾声一个按钮级 CTA：金色细下划线，hover 自中心向两端延展
   ============================================================ */

@font-face{font-family:'ShouJin';src:url('../fonts/shoujin.woff2?v=20260810a') format('woff2');font-display:swap}
@font-face{font-family:'Noto Serif SC';src:url('../fonts/noto-serif-sc.woff2?v=20260810a') format('woff2');font-style:normal;font-weight:200;font-display:swap}
@font-face{font-family:'Noto Serif SC';src:url('../fonts/noto-serif-sc.woff2?v=20260810a') format('woff2');font-style:normal;font-weight:300;font-display:swap}
@font-face{font-family:'Noto Serif SC';src:url('../fonts/noto-serif-sc.woff2?v=20260810a') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Noto Serif SC';src:url('../fonts/noto-serif-sc.woff2?v=20260810a') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:'Marcellus';src:url('../fonts/marcellus.woff2?v=20260810a') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../fonts/eb-garamond.woff2?v=20260810a') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../fonts/eb-garamond.woff2?v=20260810a') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../fonts/eb-garamond-italic.woff2?v=20260810a') format('woff2');font-style:italic;font-weight:400;font-display:swap}

:root{
  --bg:#0C0A07;
  --gold:#CBA258;
  --gold-lit:#E7C878;
  --ink:#E8E2D6;          /* 正文米白 */
  --cream:#F4ECD8;        /* 标题米色 */
  --ink-60:rgba(232,226,214,.6);
  --ink-40:rgba(232,226,214,.4);   /* 仅限 ≥24px 大字或纯装饰（小字不达 WCAG AA） */
  --ink-55:rgba(232,226,214,.55);  /* 小字号次级文本（对比度 ≈4.96:1，达 AA） */
  --line:rgba(203,162,88,.22);
  --serif:'Noto Serif SC','Songti SC','STSong','SimSun',serif;
  --display:'ShouJin','Noto Serif SC','Songti SC','STSong','SimSun',serif;
  --latin:'Marcellus','Noto Serif SC','Songti SC','STSong','SimSun',serif;
  --italic:'EB Garamond','Noto Serif SC','Songti SC','STSong','SimSun',serif;
  /* 签名缓动：入场用 expo-out（快起缓落，奢侈品站的「稳」），交互用柔和 in-out */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-inout:cubic-bezier(.65,0,.35,1);
}

*{margin:0;padding:0;box-sizing:border-box}
a{text-decoration:none;color:inherit}
html{background:var(--bg)}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
body{background:var(--bg);color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}

/* ============================================================
   漏月 louyue —— 全站背景（唯一定义，勿在页面内联复制）
   取「疏棂漏月」：晶格本身不可见，有光透过来才显形。
   结构 <div class="sdots"><i.g1><i.g2><b.screen><span></b><b.sheen></div>

   五层，自下而上：
     .sdots      暖褐底图渐变
     .g1 / .g2   金 / 冷蓝辉光，200% 尺寸缓慢漂移（56s / 74s）
     .screen     穿孔幕（内层 span 承担晶格与滚动视差）
     .sheen      斜向扫光 + 抖动层

   ⚠ 参数耦合：幕布压暗画面的量恰好等于点阵凸显的量（同为 a·(底色−幕布色)），
   故 .sdots 的五个停点是按幕布参数反推的：new = (old − a·veil)/(1−a)，
   a=.35、veil=rgb(6,4,3)，合成后逐点回到设计原值 #140e08/#0f0a07/#0a0805/#0e0a06/#110b06。
   改 .screen span 的 fill / fill-opacity，必须按同一公式重算 .sdots 的停点，否则整页明度会偏。

   ⚠ 三条已修的坑，勿回退：
   1) 不要给 .screen 加椭圆晕影遮罩。原写法 mask:radial-gradient(74% 66% at 50% 34%,…)
      会让点阵在椭圆内出现、向外淡出；幕布色一旦亮于底图，椭圆即读成亮斑，
      其轮廓因居中而左右对称各现一道弧。这是纹理有无的边界，抖动层治不了。
   2) 幕布色须压在底图最暗停点之下。若落在底图明暗之间，点会在暗处呈暗斑、亮处呈亮孔，
      中间存在一条对比过零的「点阵消失带」。
   3) 辉光不要用 `色 → transparent X%` 两段式：X 处斜率突变会显出马赫带圆弧。
      一律多段近似高斯衰减。同理，α 低于 .05 的大面积 radial 跨不了几个色阶，
      只会产生百来像素一条的量化带，光感为零——不如不要。
   ============================================================ */
.sdots{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:linear-gradient(158deg,#1c130b 0%,#140d09 26%,#0c0a06 48%,#120d08 74%,#170f08 100%)}
.sdots i{position:absolute;left:-50%;top:-50%;width:200%;height:200%;display:block}
.sdots .g1{background:radial-gradient(34% 30% at 38% 38%,rgba(203,162,88,.18) 0%,rgba(203,162,88,.14) 20%,rgba(203,162,88,.09) 35%,rgba(203,162,88,.047) 48%,rgba(203,162,88,.016) 58%,rgba(203,162,88,0) 68%),radial-gradient(20% 16% at 66% 20%,rgba(232,226,214,.07) 0%,rgba(232,226,214,.055) 21%,rgba(232,226,214,.035) 36%,rgba(232,226,214,.018) 49%,rgba(232,226,214,.006) 60%,rgba(232,226,214,0) 70%);animation:sdA 56s ease-in-out infinite alternate}
.sdots .g2{background:radial-gradient(30% 26% at 62% 66%,rgba(52,92,142,.1) 0%,rgba(52,92,142,.078) 21%,rgba(52,92,142,.05) 36%,rgba(52,92,142,.026) 49%,rgba(52,92,142,.009) 60%,rgba(52,92,142,0) 70%);animation:sdB 74s ease-in-out infinite alternate}
/* 穿孔幕：单层 SVG 六方晶格，整数拼贴 11×19（小数拼贴会累积出摩尔纹）。
   孔羽化 1.1→1.9px（原 1.3→1.4px 的 0.1px 过渡是亚像素级，必然锯齿）。
   .screen 只做定位与裁切，内层 span 承担晶格与视差，二者分离——
   若把 transform 加在 .screen 上，将来若再加遮罩会被一起平移。 */
.sdots .screen{position:absolute;inset:0;overflow:hidden}
.sdots .screen span{position:absolute;left:0;right:0;top:-96px;bottom:-96px;display:block;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='19'%20viewBox='0%200%2011%2019'%3E%3Cdefs%3E%3CradialGradient%20id='f'%3E%3Cstop%20offset='.58'%20stop-color='%23000'/%3E%3Cstop%20offset='1'%20stop-color='%23fff'/%3E%3C/radialGradient%3E%3Cmask%20id='h'%3E%3Crect%20width='11'%20height='19'%20fill='%23fff'/%3E%3Cg%20fill='url%28%23f%29'%3E%3Ccircle%20cx='5.5'%20cy='4.75'%20r='1.9'/%3E%3Ccircle%20cx='0'%20cy='14.25'%20r='1.9'/%3E%3Ccircle%20cx='11'%20cy='14.25'%20r='1.9'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Crect%20width='11'%20height='19'%20fill='%23060403'%20fill-opacity='.35'%20mask='url%28%23h%29'/%3E%3C/svg%3E");background-size:11px 19px}
/* 抖动层（dither）：峰值 2.8/255 阶、约 1px 粒度，唯一作用是打断 8bit 量化边界，使渐变带不成形。
   幅度低于纹理感知阈值——它不是质感层，调浓会变成噪点。范围 .008–.012，勿超 .014。
   置于 .sheen 背景栈首层（=最上层），故其下所有层及本层扫光皆被覆盖。 */
.sdots .sheen{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%3E%3Cfilter%20id='d'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%20color-interpolation-filters='sRGB'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.9'%20numOctaves='1'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%201%200%200%200%200%201%200%200%200%200%201%201%200%200%200%200'/%3E%3C/filter%3E%3Crect%20width='128'%20height='128'%20filter='url%28%23d%29'%20opacity='.011'/%3E%3C/svg%3E"),linear-gradient(112deg,rgba(231,200,120,0) 34%,rgba(231,200,120,.045) 48%,rgba(231,200,120,.012) 56%,rgba(231,200,120,0) 70%);background-size:128px 128px,auto}
@keyframes sdA{from{transform:translate3d(-7%,-5%,0)}to{transform:translate3d(6%,4%,0)}}
@keyframes sdB{from{transform:translate3d(5%,6%,0)}to{transform:translate3d(-6%,-4%,0)}}
/* 滚动视差：纯 CSS 滚动驱动，不支持的浏览器退化为静止，零风险。 */
@keyframes sdDrift{from{transform:translate3d(0,-54px,0)}to{transform:translate3d(0,54px,0)}}
@supports (animation-timeline:scroll()){
  .sdots .screen span{animation-name:sdDrift;animation-timing-function:linear;animation-duration:auto;animation-fill-mode:both;animation-timeline:scroll(root block)}
}
@media (prefers-reduced-motion:reduce){
  .sdots .g1,.sdots .g2{animation:none}
  .sdots .screen span{animation-name:none;animation-timeline:auto;transform:none}
}

/* ---------- 全站导航 ---------- */
.gnav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;padding:26px 56px;transition:background .5s ease,padding .5s ease,box-shadow .5s ease}
.gnav.solid{background:rgba(12,10,7,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:15px 56px;box-shadow:0 1px 0 rgba(203,162,88,.14)}
.gnav-logo{width:min(108px,34vw);height:auto;opacity:.85;flex:none}
.gnav-links{display:flex;align-items:center;gap:30px}
.gnav-links a{padding:12px 6px;margin:-12px -6px}
.gnav-link{font-size:13.5px;letter-spacing:.16em;color:rgba(232,226,214,.72);transition:color .45s var(--e-inout);position:relative}
.gnav-link:hover{color:var(--cream)}
.gnav-link::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:scaleX(0);transform-origin:50% 50%;transition:transform .55s var(--e-out)}
.gnav-link:hover::after{transform:scaleX(1)}
.gnav-link.on{color:var(--cream)}
.gnav-link.on::after{transform:scaleX(1)}
.gnav-sep{width:1px;height:12px;background:rgba(232,226,214,.26)}
.gnav-cta{font-size:12.5px;letter-spacing:.2em;color:var(--gold)}
.gnav-cta:hover{color:var(--gold-lit)}
.gnav-burger{display:none;appearance:none;background:none;border:0;width:44px;height:44px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:7px}
.gnav-burger i{display:block;width:22px;height:1px;background:var(--ink);transition:transform .4s ease,opacity .4s ease}
.gmenu{position:fixed;inset:0;z-index:79;background:rgba(10,8,5,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;gap:16px;box-sizing:border-box;padding:calc(76px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
.gmenu.open{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .45s ease}
.gmenu a{font-family:var(--display);font-size:32px;letter-spacing:.22em;color:var(--cream);padding:8px 0;min-height:44px;display:flex;align-items:center;opacity:.88}
.gmenu a:hover{color:var(--gold-lit)}
.gmenu .gmenu-cta{font-family:var(--latin);font-size:13px;letter-spacing:.3em;color:var(--gold);margin-top:20px}
.gmenu .gmenu-eng{font-family:var(--italic);font-style:italic;font-size:14px;color:var(--ink-55);margin-top:6px}
@media(max-height:650px){.gmenu{justify-content:flex-start;gap:12px}}
body.menu-open .gnav,body.menu-open .nav{pointer-events:none}
body.menu-open .nav{z-index:80}
body.menu-open .gnav-burger{position:relative;z-index:1;pointer-events:auto}
body.menu-open .nav>.fx{visibility:hidden;opacity:0}
@media(max-width:1100px){
  .gnav{padding:20px 24px}
  .gnav.solid{padding:12px 24px}
  .gnav-links{display:none}
  .gnav-burger{display:flex}
  body.menu-open{overflow:hidden}
  body.menu-open .gnav-burger i:nth-child(1){transform:translateY(8px) rotate(45deg)}
  body.menu-open .gnav-burger i:nth-child(2){opacity:0}
  body.menu-open .gnav-burger i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}

/* ---------- 首屏 · 开卷 ---------- */
.lhero{position:relative;height:100vh;height:100dvh;min-height:640px;overflow:hidden;display:flex;align-items:flex-end}
.lhero-media{position:absolute;inset:0;overflow:hidden}
.lhero-media img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos,50% 50%);filter:saturate(.92) brightness(.9)}
.kenburns .lhero-media img{animation:lkb 10s ease-out forwards}
@keyframes lkb{from{transform:scale(1.03)}to{transform:scale(1.0)}}
.lhero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,10,7,.55),rgba(12,10,7,.08) 30%,rgba(12,10,7,0) 55%,rgba(12,10,7,.4) 78%,#0C0A07 100%)}
.lhero-inner{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;padding:0 40px 13vh}
.lhero-kick{font-family:var(--latin);text-transform:uppercase;letter-spacing:.44em;font-size:12px;color:var(--gold);padding-left:.44em;margin-bottom:22px}
.lhero-title{font-family:var(--display);font-weight:400;font-size:clamp(58px,7vw,104px);line-height:1.05;letter-spacing:.16em;color:var(--cream);text-shadow:0 4px 40px rgba(0,0,0,.6)}
.lhero-sub{margin-top:24px;font-weight:300;font-size:16.5px;letter-spacing:.14em;color:var(--ink-60);max-width:34em}
.lhero-vt{position:absolute;right:6vw;top:16vh;z-index:2;writing-mode:vertical-rl;font-family:var(--display);font-weight:400;margin:0;font-size:clamp(50px,5vw,76px);letter-spacing:.3em;color:var(--cream);text-shadow:0 4px 40px rgba(0,0,0,.65)}
@media(max-width:760px){.lhero-vt{right:8vw;top:14vh;font-size:44px}.lhero-inner{padding:0 24px 11vh}}
/* ---------- 题记（纯文字一屏） ---------- */
.epigraph{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:62vh;padding:140px 32px;gap:30px}
.epigraph p{font-weight:200;font-size:clamp(20px,2vw,26px);line-height:2.2;letter-spacing:.12em;color:rgba(244,236,216,.92);max-width:26em}
.epigraph .ep-source{font-weight:300;font-size:13px;letter-spacing:.3em;color:var(--gold);opacity:.85}
.ep-rule{width:1px;height:56px;background:linear-gradient(rgba(203,162,88,.8),transparent)}

/* ---------- 章节公用 ---------- */
.lsec{position:relative;padding:0 0 160px}
.lsec-head{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;margin-bottom:64px;padding:0 28px}
.lnum{font-family:var(--latin);font-size:12px;letter-spacing:.5em;color:var(--gold);padding-left:.5em}
.ltitle{font-family:var(--display);font-weight:400;font-size:clamp(38px,3.6vw,54px);letter-spacing:.18em;color:var(--cream);line-height:1.15}
.lrule{width:72px;height:1px;background:linear-gradient(90deg,transparent,rgba(203,162,88,.9),transparent)}

/* 图主文辅：满屏大图 + 题跋 */
.plate{position:relative;height:92vh;min-height:560px;overflow:hidden}
.plate img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);filter:saturate(.9) brightness(.86)}
.plate-scrim{position:absolute;inset:0;background:linear-gradient(180deg,#0C0A07 0%,rgba(12,10,7,0) 18%,rgba(12,10,7,0) 62%,rgba(12,10,7,.78) 92%,#0C0A07 100%)}
.plate-caption{position:absolute;left:0;right:0;bottom:9vh;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:0 28px}
.plate-caption .pc-num{font-family:var(--latin);font-size:11px;letter-spacing:.5em;color:var(--gold);padding-left:.5em}
.plate-caption .pc-title{font-family:var(--display);font-size:clamp(30px,3vw,44px);letter-spacing:.2em;color:var(--cream)}
.plate-caption .pc-note{font-weight:300;font-size:15.5px;line-height:2;letter-spacing:.1em;color:var(--ink-60);max-width:30em}

/* —— 视差帧（全站可复用，配 assets/js/parallax.js）——
   用法：<span class="px" data-parallax="0.06"><img class="px-media" …></span>
   · data-parallax 值＝位移幅度（占帧高比例，0.04–0.10 宜）；.px 需自定高度/纵横比（本类只管裁切+定位上下文）
   · .px-media 上下各留 8% 余量，可覆盖幅度 ≤0.08；reduced-motion 时 JS 不启用、图静止亦成立 */
.px{position:relative;overflow:hidden;display:block}
.px-media{position:absolute;top:-8%;left:0;width:100%;height:116%;object-fit:cover}
/* 站内两种现成图框的视差 opt-in：给 .plate / .duet-fig 元素加 data-parallax 即生效（图自动转超尺寸、被帧裁切；
   object-fit/object-position/filter 沿用各自基类）。未加属性的实例完全不受影响。余量 8% 覆盖幅度 ≤0.08。 */
.plate[data-parallax] img,.duet-fig[data-parallax] img{position:absolute;top:-8%;left:0;width:100%;height:116%}
/* 视差帧豁免 .plate img 常驻 1.8s transform 过渡：视差须 1:1 跟手（常驻过渡会把逐帧位移拖成迟滞漂移，
   且行内 transform 本就压掉 scale-settle 入场——豁免后行为与 .duet-fig/.mount 视差帧一致） */
.plate[data-parallax] img{transition:none}

/* 图文并重：左图右文 */
.duet{max-width:1200px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(48px,6vw,88px);align-items:center}
.duet.rev{grid-template-columns:.95fr 1.05fr}
.duet.rev .duet-fig{order:2}
.duet-fig{position:relative;overflow:hidden;height:clamp(420px,62vh,640px);border-radius:10px}
/* soft corners + 1px gold hairline: each section photo reads as an intentional gold-mounted plate
   (wears the site's signature gold-line accent), not a pasted screenshot. Brightness-safe, no darkening. */
.duet-fig::after{content:'';position:absolute;inset:0;border:1px solid rgba(203,162,88,.30);border-radius:10px;pointer-events:none;z-index:3}
.duet-fig img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);filter:saturate(.9) brightness(.9)}
.duet-fig .fig-label{position:absolute;left:18px;bottom:16px;display:flex;align-items:center;gap:10px;font-family:var(--latin);font-size:11px;letter-spacing:.2em;color:rgba(244,236,216,.85);text-shadow:0 2px 12px rgba(0,0,0,.6)}
.duet-fig .fig-label::before{content:'';width:18px;height:1px;background:var(--gold)}
.duet-text{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.duet-text .dt-num{font-family:var(--latin);font-size:12px;letter-spacing:.5em;color:var(--gold);padding-left:.5em}
.duet-text .dt-title{font-family:var(--display);font-weight:400;font-size:clamp(34px,3.2vw,48px);letter-spacing:.18em;color:var(--cream);line-height:1.15}
.duet-text .dt-rule{width:56px;height:1px;background:linear-gradient(90deg,rgba(203,162,88,.9),transparent)}
.duet-text h4{font-weight:400;font-size:17px;letter-spacing:.2em;color:var(--cream);margin-top:8px}
.duet-text p{font-weight:300;font-size:16.5px;line-height:1.95;letter-spacing:.02em;color:var(--ink);max-width:30em}
.duet-text .dt-eng{font-family:var(--italic);font-style:italic;font-size:15px;color:var(--ink-55)}
@media(max-width:920px){
  .duet,.duet.rev{grid-template-columns:1fr;gap:30px;padding:0 24px}
  .duet.rev .duet-fig{order:0}
  .duet-fig{height:54vh;min-height:320px}
  .duet-text p{max-width:none}
  .lsec{padding-bottom:110px}
}

/* 行列小节（数则并排，用于纲目而非卡片） */
.tenets{max-width:1080px;margin:64px auto 0;padding:0 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:0 44px}
.tenet{padding:26px 4px;border-top:1px solid var(--line);text-align:center}
.tenet .t-num{font-family:var(--latin);font-size:12px;letter-spacing:.24em;color:var(--gold)}
.tenet .t-title{font-size:21px;font-weight:400;letter-spacing:.18em;color:var(--cream);margin:12px 0 10px}
.tenet .t-desc{font-weight:300;font-size:14.5px;line-height:1.9;color:var(--ink-60)}
@media(max-width:920px){.tenets{grid-template-columns:1fr;max-width:520px;gap:0;padding:0 24px}}

/* ---------- 尾声 CTA ---------- */
.coda{display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center;padding:140px 28px 120px}
.coda-text{font-weight:200;font-size:clamp(21px,2vw,26px);line-height:2.1;letter-spacing:.1em;color:rgba(244,236,216,.94);max-width:30em}
.coda-cta{font-family:var(--latin);font-size:14px;letter-spacing:.34em;padding:14px 10px;color:var(--gold);position:relative;transition:color .45s}
.coda-cta:hover{color:var(--gold-lit)}
.coda-cta::after{content:'';position:absolute;left:50%;right:50%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7;transition:left .55s cubic-bezier(.2,.7,.2,1),right .55s cubic-bezier(.2,.7,.2,1),opacity .55s}
.coda-cta:hover::after{left:0;right:0;opacity:1}
.coda-alt{display:flex;gap:34px;margin-top:6px}
.coda-alt a{font-weight:300;font-size:13px;letter-spacing:.2em;color:var(--ink-55);transition:color .4s}
.coda-alt a:hover{color:var(--ink-60)}

/* ---------- 全站页脚 ---------- */
.gfoot{position:relative;padding:72px 56px 42px;background:var(--bg)}
.gfoot::before{content:'';position:absolute;top:0;left:max(56px,calc((100% - 1200px)/2));right:max(56px,calc((100% - 1200px)/2));height:1px;background:rgba(203,162,88,.14)}
.gfoot-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(240px,4fr) minmax(520px,8fr);gap:clamp(54px,8vw,116px)}
.gfoot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.gfoot-logo{width:min(186px,52vw);height:auto;opacity:.9}
.gfoot-motto{font-weight:300;font-size:13px;letter-spacing:.24em;color:var(--ink-55)}
.gfoot-directory{display:grid;gap:23px}
.gfoot-visit{min-height:44px;padding-bottom:20px;border-bottom:1px solid rgba(203,162,88,.2);display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.gfoot-visit-label{font-family:var(--latin);text-transform:uppercase;font-size:10px;letter-spacing:.3em;color:var(--ink-55)}
.gfoot-visit strong{font-weight:400;font-size:14px;letter-spacing:.16em;color:var(--gold-lit)}
.gfoot-nav{display:grid;gap:6px}
.gfoot-row{display:grid;grid-template-columns:76px 1fr;gap:24px;min-height:42px;align-items:baseline}
.gfoot-h{font-weight:400;font-size:12px;letter-spacing:.22em;color:var(--gold)}
.gfoot-links{display:flex;flex-wrap:wrap;gap:8px 28px}
.gfoot-links a{position:relative;min-height:38px;display:inline-flex;align-items:flex-start;font-weight:300;font-size:14px;letter-spacing:.11em;color:var(--ink-60);transition:color .35s}
.gfoot-links a:hover{color:var(--cream)}
.gfoot-links a::after{content:'';position:absolute;left:0;right:0;bottom:7px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--e-out)}
.gfoot-links a:hover::after{transform:scaleX(1)}
.gfoot-base{max-width:1200px;margin:42px auto 0;padding-top:22px;border-top:1px solid rgba(203,162,88,.12);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:8px 20px}
.gfoot-base>span{font-weight:300;font-size:12.5px;letter-spacing:.14em;color:var(--ink-55)}
.gfoot-base>span:first-child{grid-column:1;grid-row:1}
.gfoot-base>span:last-child{grid-column:2;grid-row:1;text-align:right}
.gfoot-legal{grid-column:1/-1;grid-row:2;display:flex;align-items:center;justify-content:center;gap:8px 18px;flex-wrap:wrap}
.gfoot-legal a{min-height:32px;display:inline-flex;align-items:center;gap:6px;font-weight:300;font-size:12px;letter-spacing:.1em;color:var(--ink-55);transition:color .35s}
.gfoot-legal a:hover{color:var(--cream)}
.gfoot-legal img{width:16px;height:16px;flex:0 0 16px}
.gfoot-solo .gfoot-grid{grid-template-columns:1fr}
@media(min-width:921px){
  .gfoot-grid{grid-template-columns:280px minmax(0,1fr);gap:clamp(64px,5vw,72px)}
  .gfoot-brand{align-self:center;gap:12px;transform:translate(20px,12px)}
  .gfoot-logo{width:204px}
}
@media(max-width:920px){
  .gfoot{padding:52px 24px 34px}
  .gfoot::before{left:24px;right:24px}
  .gfoot-grid{grid-template-columns:1fr;gap:38px}
  .gfoot-brand{gap:15px}
  .gfoot-directory{gap:22px}
  .gfoot-visit{padding:15px 0;border-top:1px solid rgba(203,162,88,.2)}
  .gfoot-row{grid-template-columns:1fr;gap:10px;padding:14px 0;border-top:1px solid rgba(203,162,88,.1)}
  .gfoot-links{gap:0 28px}
  .gfoot-links a{min-height:44px;align-items:center}
  .gfoot-links a::after{bottom:4px}
  .gfoot-base{margin-top:28px;grid-template-columns:1fr;justify-items:center;gap:9px;text-align:center}
  .gfoot-base>span:first-child{grid-column:1;grid-row:1}
  .gfoot-legal{grid-column:1;grid-row:2}
  .gfoot-base>span:last-child{grid-column:1;grid-row:3;text-align:center}
  .gfoot-legal a{min-height:44px}
}

/* ---------- 滚动显现（动效预算之一） ---------- */
.has-js .rvl{opacity:0;transform:translateY(28px);filter:blur(5px);transition:opacity 1.1s var(--e-out),transform 1.1s var(--e-out),filter 1.1s var(--e-out);transition-delay:var(--rvl-d,0s)}
.rvl.in{opacity:1;transform:none;filter:none}
/* 移动端入场省去 blur（低端机 paint 压力），保留位移淡入——须置于 .rvl 定义之后方能覆盖 */
@media(max-width:820px){.has-js .rvl{filter:none}}
/* JS 保险丝：site.js 未启动（无 js-live）时 3s 后强制显现，防 .rvl 内容因脚本失败永久隐形 */
@keyframes rvlSafe{to{opacity:1;transform:none;filter:none}}
.has-js:not(.js-live) .rvl{animation:rvlSafe 0s 3s forwards}
/* 展陈图缓落（scale settle）：仅限无 hover-transform 的静态 figure */
.plate img,.cq-reg-fig img,.art-fig img{transition:transform 1.8s var(--e-out)}
.has-js .rvl:not(.in) .plate img,.has-js .plate.rvl:not(.in) img,.has-js .qcard.rvl:not(.in) .qcard-fig img,.has-js .cq-reg.rvl:not(.in) .cq-reg-fig img,.has-js .art-fig.rvl:not(.in) img{transform:scale(1.03)}
/* 页面入场淡入 */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
body{animation:pageIn .6s ease-out}
@media (prefers-reduced-motion: reduce){
  .rvl{opacity:1;transform:none;filter:none;transition:none}
  body{animation:none}
  .plate img,.qcard-fig img,.cq-reg-fig img,.art-fig img{transition:none;transform:none}
  .kenburns .lhero-media img{animation:none}
  .art>*,.nf>*{animation:none;opacity:1;transform:none}
  .art .art-fig img{animation:none}
  .tl-row::before,.nf-rule{animation:none;transform:none}
  .jr-fig img,.pr-ar,.av-arrow,.qcard-fig img{transition:none}
  .rvl,.has-js:not(.js-live) .rvl{animation:none}
}

/* ---------- 键盘焦点可见（可访问性，仅键盘导航显示金色细框） ---------- */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}

/* ============================================================
   琴话 · 杂志式列表与长文阅读
   ============================================================ */
.jn-head{max-width:1200px;margin:0 auto;padding:22vh 40px 60px}
.jn-head .lhero-kick{margin-bottom:18px}
.jn-head h1{font-family:var(--display);font-size:clamp(52px,6vw,88px);letter-spacing:.18em;color:var(--cream);line-height:1.1}
.jn-head p{margin-top:20px;font-weight:300;font-size:16px;letter-spacing:.1em;color:var(--ink-60);max-width:38em}
.jn-tabs{max-width:1200px;margin:0 auto;padding:0 40px;display:flex;gap:34px;border-bottom:1px solid var(--line)}
.jn-tab{appearance:none;background:none;border:0;cursor:pointer;font-family:var(--serif);font-weight:300;font-size:15px;letter-spacing:.2em;color:var(--ink-60);padding:14px 2px 16px;position:relative;transition:color .4s}
.jn-tab:hover{color:var(--cream)}
.jn-tab.on{color:var(--cream)}
.jn-tab.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold)}
.jn-feature{max-width:1200px;margin:64px auto 0;padding:0 40px}
.jn-feature a{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(36px,5vw,70px);align-items:center}
.jn-feature .jf-fig{overflow:hidden;height:clamp(320px,48vh,480px)}
.jn-feature .jf-fig img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.9);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.jn-feature a:hover .jf-fig img{transform:scale(1.03)}
.jf-meta{display:flex;align-items:center;gap:14px;font-family:var(--latin);font-size:11px;letter-spacing:.26em;color:var(--gold)}
.jf-meta .jf-date{color:var(--ink-55);letter-spacing:.18em}
.jf-title{font-family:var(--display);font-size:clamp(30px,3vw,42px);letter-spacing:.1em;line-height:1.35;color:var(--cream);margin:18px 0 16px;transition:color .4s}
.jn-feature a:hover .jf-title{color:var(--gold-lit)}
.jf-summary{font-weight:300;font-size:15.5px;line-height:2;color:var(--ink-60);max-width:30em}
.jn-list{max-width:1200px;margin:56px auto 0;padding:0 40px 40px}
.jn-row{display:grid;grid-template-columns:150px 1fr 340px;gap:36px;align-items:center;padding:34px 0;border-top:1px solid rgba(203,162,88,.14);transition:background .4s}
.jn-row:hover{background:rgba(203,162,88,.035)}
.jn-row .jr-meta{display:flex;flex-direction:column;gap:8px}
.jn-row .jr-cat{font-family:var(--latin);font-size:10.5px;letter-spacing:.26em;color:var(--gold)}
.jn-row .jr-date{font-weight:300;font-size:12.5px;letter-spacing:.14em;color:var(--ink-55)}
.jn-row .jr-title{font-weight:400;font-size:22px;letter-spacing:.08em;line-height:1.6;color:var(--cream);transition:color .4s}
.jn-row:hover .jr-title{color:var(--gold-lit)}
.jn-row .jr-summary{font-weight:300;font-size:14px;line-height:1.9;color:var(--ink-60);margin-top:10px;max-width:36em}
.jn-row .jr-fig{overflow:hidden;height:150px}
.jn-row .jr-fig img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) brightness(.88);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.jn-row:hover .jr-fig img{transform:scale(1.04)}
.jn-row.hide{display:none}
.jn-feature.hide{display:none}
@media(max-width:920px){
  .jn-head{padding:18vh 24px 40px}
  .jn-tabs{padding:0 24px;gap:22px}
  .jn-feature{padding:0 24px}
  .jn-feature a{grid-template-columns:1fr;gap:22px}
  .jn-list{padding:0 24px 24px}
  .jn-row{grid-template-columns:1fr;gap:14px;padding:28px 0}
  .jn-row .jr-fig{order:-1;height:52vw}
  .jn-row .jr-meta{flex-direction:row;align-items:baseline;gap:16px}
}

/* 选琴指南题图 */
.guide-media{position:relative;z-index:1;width:min(1140px,calc(100% - 48px));margin:-8px auto 92px;overflow:hidden}
.guide-media img{display:block;width:100%;height:min(641px,calc((100vw - 48px) * .5625));object-fit:cover;filter:saturate(.88) brightness(.88);transition:transform 1.8s var(--e-out)}
.guide-media figcaption{padding:14px 20px 0;text-align:center;font-size:12.5px;font-weight:300;letter-spacing:.14em;color:var(--ink-55)}
.has-js .guide-media.rvl:not(.in) img{transform:scale(1.03)}
@media(max-width:720px){
  .guide-media{width:calc(100% - 36px);margin:-12px auto 64px}
  .guide-media img{height:calc((100vw - 36px) * .75)}
}
@media(prefers-reduced-motion:reduce){
  .guide-media img{transition:none;transform:none}
}

/* 文章详情 */
.art{max-width:720px;margin:0 auto;padding:21vh 28px 0}
.art-meta{display:flex;align-items:center;gap:16px;font-family:var(--latin);font-size:11px;letter-spacing:.26em;color:var(--gold);margin-bottom:26px}
.art-meta .a-date{color:var(--ink-55);letter-spacing:.16em}
.art h1{font-family:var(--display);font-size:clamp(34px,4.4vw,54px);letter-spacing:.1em;line-height:1.4;color:var(--cream)}
.art-lead{margin-top:26px;font-weight:300;font-size:17px;line-height:2.05;color:var(--ink-60)}
.art-rule{width:72px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);margin:44px 0}
.art-fig{margin:52px calc(50% - min(50vw,570px)) 0;max-width:min(100vw,1140px);overflow:hidden}
.art-fig img{width:100%;max-height:66vh;object-fit:cover;filter:saturate(.9) brightness(.9)}
.art-fig figcaption{padding:14px 24px 0;font-weight:300;font-size:12.5px;letter-spacing:.16em;color:var(--ink-55);text-align:center}
.art-body{padding:10px 0 60px}
.art-body p{font-weight:300;font-size:17px;line-height:2.15;letter-spacing:.02em;color:var(--ink);margin:0 0 2em}
.art-body h2{font-weight:400;font-size:23px;letter-spacing:.14em;color:var(--cream);margin:3em 0 1.4em}
.art-body h2::before{content:'';display:block;width:34px;height:1px;background:var(--gold);margin-bottom:18px;opacity:.7}
.art-body blockquote{border-left:2px solid rgba(203,162,88,.5);padding-left:22px;margin:2.4em 0;font-weight:300;font-size:18px;line-height:2.05;letter-spacing:.05em;color:rgba(244,236,216,.9)}
.art-body blockquote cite{display:block;margin-top:12px;font-style:normal;font-family:var(--italic);font-size:14px;color:var(--ink-55)}
.art-body em{font-style:normal;color:var(--gold-lit)}
.art-next{max-width:720px;margin:0 auto;padding:44px 28px 110px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px}
.art-next .an-label{font-family:var(--latin);font-size:10.5px;letter-spacing:.3em;color:var(--gold);display:block;margin-bottom:12px}
.art-next a{font-weight:300;font-size:16px;letter-spacing:.08em;color:var(--ink-60);transition:color .4s}
.art-next a:hover{color:var(--cream)}


/* ============================================================
   全站动效签名（2026-07 · 同一缓动家族 --e-out，每页型一款签名）
   壹 文章页＝载入级联 · 贰 404＝静默浮现 · 叁 年表＝金线拉开
   肆 百琴堂＝琴照浮起 · 伍 琴话列表＝缩略缓推 · 陆 媒体页＝日期金化
   柒 名录行＝箭头前行 · 捌 档案页＝问号点亮 · 玖 表单＝落笔金光
   ============================================================ */

/* 壹 · 文章页载入级联（.art 直接子块依次浮现；无需 IO，14 页零改动） */
.art>*{opacity:0;transform:translateY(16px);animation:artIn .95s var(--e-out) forwards}
.art>*:nth-child(1){animation-delay:.04s}
.art>*:nth-child(2){animation-delay:.14s}
.art>*:nth-child(3){animation-delay:.24s}
.art>*:nth-child(4){animation-delay:.32s}
.art>*:nth-child(5){animation-delay:.40s}
.art>*:nth-child(n+6){animation-delay:.52s}
@keyframes artIn{to{opacity:1;transform:none}}
.art .art-fig img{animation:artImg 1.7s var(--e-out) .35s both}
@keyframes artImg{from{transform:scale(1.03)}to{transform:none}}
.art-next a:hover{color:var(--gold-lit)}

/* 贰 · 404 静默浮现 + 金线自中而开 */
.nf>*{opacity:0;transform:translateY(14px);animation:artIn .9s var(--e-out) forwards}
.nf>*:nth-child(1){animation-delay:.05s}
.nf>*:nth-child(2){animation-delay:.15s}
.nf>*:nth-child(3){animation-delay:.25s}
.nf>*:nth-child(4){animation-delay:.35s}
.nf>*:nth-child(n+5){animation-delay:.45s}
.nf-rule{opacity:0;transform:scaleX(0);animation:nfRule 1.2s var(--e-out) .35s forwards}
@keyframes nfRule{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}

/* 叁 · 年表行（about 资质编年 / ensemble 演出足迹）：显现时金线自左拉开 */
.tl-row{position:relative}
.tl-row::before{content:'';position:absolute;top:-1px;left:0;width:100%;height:1px;
  background:linear-gradient(90deg,rgba(203,162,88,.55),rgba(203,162,88,0) 70%);
  transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--e-out) .15s}
.tl-row.in::before{transform:scaleX(1)}

/* 肆 · 百琴堂琴照 hover 浮起（影随身动） */
.qcard-fig img{transition:transform 1.8s var(--e-out),filter 1s var(--e-out)}
.qcard:hover .qcard-fig img{transform:translateY(-7px);filter:drop-shadow(0 34px 44px rgba(0,0,0,.72))}

/* 伍 · 琴话列表缩略图缓推 */
.jr-fig{overflow:hidden}
.jr-fig img{transition:transform 1.5s var(--e-out)}
.jn-row:hover .jr-fig img{transform:scale(1.045)}

/* 陆 · 媒体页：hover 日期金化、外链箭头前行 */
.pr-date{transition:color .45s}
.pr-row:hover .pr-date{color:var(--gold)}
.pr-ar{display:inline-block;transition:transform .55s var(--e-out)}
.pr-row:hover .pr-ar{transform:translateX(5px)}

/* 柒 · 名录行（about 村中五处等）：箭头前行 */
.av-arrow{display:inline-block;transition:transform .55s var(--e-out),color .4s}
.av-row:hover .av-arrow{transform:translateX(6px);color:var(--gold-lit)}

/* 捌 · 档案页问答：hover 问号点亮 */
.fx-qnum{transition:color .45s}
.fx-qa:hover .fx-qnum{color:var(--gold-lit)}

/* 玖 · 预约表单：落笔处标签映金 */
.ct-field label{transition:color .4s}
.ct-field:focus-within label{color:var(--gold-lit)}