/* 通玄音 · 内页共用样式（2026-11-02）
   曲目页 / 试听总览 / 授权页 / 记（博客）共用这一份。
   首页 index.html 仍用它自己的内联样式，不动。 */

:root{
  --ink0:#061613;--gold:#d8b872;--gold-d:#a87c36;--gold-l:#f2dcaa;
  --fg:#efe9db;--fg2:#b6b2a3;--fg3:#87837a;
  --line:rgba(216,184,114,.20);--line-s:rgba(216,184,114,.10);
  --serif:"Songti SC","STSong","Source Han Serif SC","Noto Serif SC","SimSun",serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  background:#123430;color:var(--fg);line-height:1.9;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 900px 700px at 50% -6%, #2e6c5f 0%, transparent 62%),
    radial-gradient(ellipse 760px 620px at 82% 72%, #1e5148 0%, transparent 60%),
    radial-gradient(ellipse 700px 560px at 12% 92%, #17493f 0%, transparent 62%),
    linear-gradient(178deg,#133631 0%,#174640 42%,#143831 74%,#0f2b27 100%);
}

/* ── 页头 ── */
header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;border-bottom:1px solid var(--line-s);
  background:rgba(12,38,34,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--gold)}
.brand img{width:20px;height:20px;display:block;opacity:.9}
.brand span{font-size:13.5px;letter-spacing:.28em;padding-left:.28em;color:#f4ecdc}
nav{display:flex;gap:22px}
nav a{
  font-size:12.5px;letter-spacing:.18em;text-decoration:none;
  color:var(--fg3);transition:color .3s;padding-left:.18em;
}
nav a:hover,nav a.on{color:var(--gold-l)}

/* ── 主体 ── */
.wrap{max-width:680px;margin:0 auto;padding:0 26px}

.hero{padding:64px 0 34px;text-align:center;border-bottom:1px solid var(--line-s)}
.kick{
  font-size:11px;letter-spacing:.4em;color:var(--gold-d);
  margin:0 0 20px;padding-left:.4em;
}
h1{
  font-family:var(--serif);font-weight:400;font-size:40px;line-height:1.3;
  letter-spacing:.18em;padding-left:.18em;color:var(--gold-l);margin:0 0 12px;
  text-shadow:0 0 34px rgba(216,184,114,.2);
}
.en{
  font-size:12px;letter-spacing:.22em;color:var(--fg3);text-transform:uppercase;
  margin:0 0 20px;padding-left:.22em;
}
.meta{font-size:12.5px;letter-spacing:.1em;color:var(--fg3)}
.meta b{font-weight:400;color:var(--fg2)}

/* 播放器 */
.pl{padding:30px 0 36px;border-bottom:1px solid var(--line-s)}
.pl audio{
  width:100%;height:40px;display:block;
  filter:invert(.9) hue-rotate(178deg) saturate(.62) contrast(.95);opacity:.84;
}
.pl .hint{
  margin:14px 0 0;text-align:center;font-size:11.5px;letter-spacing:.12em;color:rgba(135,131,122,.85);
}

/* 段落 */
section{padding:34px 0;border-bottom:1px solid var(--line-s)}
section:last-of-type{border-bottom:none}
h2{
  font-size:12px;font-weight:400;letter-spacing:.32em;color:var(--gold);
  margin:0 0 18px;padding-left:.32em;
}
h2::after{
  content:'';display:block;height:1px;margin-top:11px;
  background:linear-gradient(90deg,rgba(216,184,114,.34),transparent 72%);
}
p{font-size:14.5px;line-height:2.15;color:var(--fg2);letter-spacing:.03em;margin:0 0 14px}
p:last-child{margin-bottom:0}
p em{font-style:normal;color:var(--gold)}
strong{font-weight:600;color:var(--fg)}

blockquote{
  margin:0;padding:4px 0 4px 20px;border-left:1px solid rgba(216,184,114,.36);
}
blockquote q{
  display:block;font-family:var(--serif);font-size:17px;line-height:2;
  letter-spacing:.1em;color:var(--gold-l);quotes:none;
}
blockquote cite{
  display:block;margin-top:10px;font-style:normal;
  font-size:11.5px;letter-spacing:.18em;color:var(--fg3);
}

/* 相关曲目 */
.rel{display:flex;flex-direction:column;gap:0}
.rel a{
  display:block;text-decoration:none;color:var(--gold-l);
  font-size:14.5px;letter-spacing:.1em;padding:13px 0;
  border-bottom:1px solid rgba(216,184,114,.10);transition:color .3s,padding-left .3s;
}
.rel a:first-child{padding-top:2px}
.rel a:last-child{border-bottom:none;padding-bottom:2px}
.rel a:hover{color:#fff;padding-left:6px}
.rel a span{color:var(--fg3);font-size:11.5px;letter-spacing:.12em}

/* 试听总览：曲目行 */
.sub{font-size:12px;letter-spacing:.1em;color:var(--fg3);margin:-8px 0 18px}
.ti{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;
  gap:2px 16px;text-decoration:none;color:inherit;
  padding:17px 4px;border-bottom:1px solid rgba(216,184,114,.10);
  transition:background .3s,padding-left .3s;
}
.ti:hover{background:rgba(216,184,114,.045);padding-left:12px}
.ti-n{
  font-family:var(--serif);font-size:19px;letter-spacing:.14em;
  color:var(--gold-l);line-height:1.5;
}
.ti-e{
  grid-column:1;font-size:10.5px;letter-spacing:.16em;color:var(--fg3);
  text-transform:uppercase;line-height:1.6;
}
.ti-m{
  grid-column:1;font-size:11.5px;letter-spacing:.12em;color:var(--fg3);line-height:1.8;
}
.ti-x{
  grid-row:1 / span 3;grid-column:2;align-self:center;
  font-size:11.5px;letter-spacing:.16em;color:rgba(216,184,114,.72);
  transition:color .3s;
}
.ti:hover .ti-x{color:var(--gold-l)}

/* 表格（授权页、价格页用） */
table{width:100%;border-collapse:collapse;margin:4px 0 6px;font-size:13px}
th,td{
  text-align:left;padding:12px 10px;border-bottom:1px solid rgba(216,184,114,.12);
  vertical-align:top;line-height:1.75;
}
th{
  font-weight:400;font-size:11px;letter-spacing:.18em;color:var(--gold);
  border-bottom:1px solid rgba(216,184,114,.28);white-space:nowrap;
}
td{color:var(--fg2)}
td:last-child{white-space:nowrap;color:var(--gold-l)}

/* 卡片（授权档位） */
.card{
  border:1px solid rgba(216,184,114,.22);border-radius:2px;
  padding:22px 20px;margin:0 0 14px;background:rgba(255,255,255,.028);
}
.card h3{
  font-family:var(--serif);font-weight:400;font-size:19px;letter-spacing:.12em;
  color:var(--gold-l);margin:0 0 4px;
}
.card .price{
  font-size:26px;letter-spacing:.02em;color:var(--gold);margin:0 0 12px;
  font-variant-numeric:tabular-nums;
}
.card .price small{font-size:12px;letter-spacing:.1em;color:var(--fg3);margin-left:6px}
.card ul{list-style:none;margin:0}
.card li{
  font-size:13px;line-height:2;color:var(--fg2);padding-left:16px;position:relative;
}
.card li::before{
  content:'·';position:absolute;left:2px;color:rgba(216,184,114,.6);
}

/* 翻页 */
.pager{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:30px 0;border-bottom:1px solid var(--line-s);
}
.pager a{
  font-size:12.5px;letter-spacing:.1em;text-decoration:none;color:var(--fg3);
  transition:color .3s;max-width:44%;
}
.pager a:hover{color:var(--gold-l)}
.pager a.mid{color:var(--gold);letter-spacing:.2em;flex:0 0 auto}
.pager a.r{text-align:right}

/* 行动 */
.acts{display:flex;gap:12px;flex-wrap:wrap;padding:32px 0 10px}
.acts a{
  flex:1;min-width:150px;text-align:center;text-decoration:none;
  font-size:13px;letter-spacing:.16em;padding:14px 18px;border-radius:2px;
  transition:background .3s,border-color .3s,color .3s;
}
.acts a.solid{
  background:linear-gradient(180deg,rgba(216,184,114,.92),rgba(168,124,54,.92));
  color:#141d1a;font-weight:600;
}
.acts a.solid:hover{filter:brightness(1.07)}
.acts a.ghost{color:var(--gold);border:1px solid rgba(216,184,114,.34)}
.acts a.ghost:hover{background:rgba(216,184,114,.09);border-color:rgba(216,184,114,.7);color:var(--gold-l)}

/* 页脚 */
footer{
  margin-top:44px;padding:38px 26px 52px;text-align:center;
  background:rgba(9,30,27,.6);border-top:1px solid var(--line);
}
.soc{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 0 22px}
.soc a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:46px;height:34px;padding:0 13px;border-radius:2px;
  font-size:11px;letter-spacing:.14em;text-decoration:none;color:var(--fg3);
  border:1px solid rgba(216,184,114,.16);transition:all .3s;
}
.soc a:hover{color:var(--gold-l);border-color:rgba(216,184,114,.52);background:rgba(216,184,114,.07)}
footer .fn{font-size:11px;letter-spacing:.22em;color:var(--fg3);line-height:2.2}
footer .fn a{color:var(--fg3);text-decoration:none}
footer .fn a:hover{color:var(--gold)}

@media (max-width:640px){
  header{padding:14px 18px}
  .brand span{font-size:12.5px;letter-spacing:.2em}
  nav{gap:15px}
  nav a{font-size:11.5px;letter-spacing:.12em}
  .wrap{padding:0 20px}
  .hero{padding:46px 0 28px}
  h1{font-size:31px;letter-spacing:.14em;padding-left:.14em}
  .en{font-size:11px;letter-spacing:.16em}
  p{font-size:14px;line-height:2.05}
  .pager{flex-wrap:wrap;gap:14px}
  .pager a{max-width:100%}
  blockquote{padding-left:16px}
  blockquote q{font-size:16px}
  table{font-size:12.5px}
  th,td{padding:10px 6px}
  td:last-child{white-space:normal}
  .card{padding:18px 16px}
}
@media (max-width:400px){
  nav a.skip{display:none}
}