/* ============================================================
       首页 · 音乐艺术版（2026-09-27 重设计）
       设计语言：五线谱装饰线 / 音符列表符 / 黑胶唱片入口 / 漂浮音符通栏
       配色：源站红金（--red --gold 继承 site.css）
       ============================================================ */
    .home-container{max-width:1360px;margin:0 auto;padding:20px 20px 48px}

    /* ---- 乐段标题：音符 + 五线谱延长线 ---- */
    /* 2026-11-02 老人板板正正版：标题行不再贴面板顶边框——上方补 14px 留白（面板本身无 padding） */
    .h-sec{margin:0 0 14px;display:flex;align-items:flex-end;justify-content:space-between;padding:14px 16px 0}
    .h-sec .h-title{display:flex;align-items:center;gap:10px}
    .h-sec .h-title .clef{font-size:27px;color:var(--red);line-height:1;font-weight:400;transform:translateY(1px)}
    .h-sec .h-title h3{font-size:21px;letter-spacing:3px;color:var(--ink);font-weight:700}
    .h-sec .h-title .en{font-size:12px;color:var(--gold);letter-spacing:2.5px;font-family:Georgia,serif;transform:translateY(2px)}
    .h-sec .h-line{flex:1;height:26px;margin:0 14px 6px;background:repeating-linear-gradient(180deg,rgba(189,154,86,.45) 0 1px,transparent 1px 6px);border-radius:1px;opacity:.7}
    .h-sec .h-more{font-size:14px;color:var(--ink-soft);padding-bottom:7px;white-space:nowrap}
    .h-sec .h-more:hover{color:var(--red)}

    /* ---- 第一乐章：焦点图 + 新闻 ---- */
    .h-row1{display:grid;grid-template-columns:7fr 5fr;gap:20px;margin-bottom:26px}
    .home-photo{border-radius:10px;overflow:hidden;box-shadow:var(--shadow);position:relative;height:420px;background:#241212}
    .home-photo img{width:100%;height:100%;object-fit:cover}
    .home-photo .slide{position:absolute;left:0;top:0;right:0;bottom:0;opacity:0;transition:opacity .6s ease;z-index:1}
    .home-photo .slide.on{opacity:1;z-index:2}
    .home-photo .dots{position:absolute;right:14px;bottom:14px;z-index:5;display:flex;gap:7px}
    .home-photo .dots button{width:10px;height:10px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:background .2s,transform .2s}
    .home-photo .dots button:hover{background:rgba(255,255,255,.8)}
    .home-photo .dots button.on{background:#fff;transform:scale(1.15)}
    .home-photo .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;color:#fff;font-size:20px;font-weight:600;letter-spacing:1px;line-height:1.45;background:linear-gradient(transparent,rgba(0,0,0,.68))}

    .home-tabs{display:flex;gap:0;border-bottom:2px solid var(--line);align-items:center}
    .home-tabs button{background:none;border:none;padding:10px 18px;font-size:17.5px;font-family:inherit;color:var(--ink-soft);cursor:pointer;letter-spacing:1.5px;position:relative;font-weight:700}
    .home-tabs button.on{color:var(--red);font-weight:700}
    .home-tabs button.on::after{content:"";position:absolute;left:14px;right:14px;bottom:-2px;height:3px;background:var(--red);border-radius:2px}
    .home-tabs .more{margin-left:auto;padding-right:14px;font-size:14px;color:#555;background:#fff}

    /* ---- 音符列表：符头做条目符，hover 跳动 ---- */
    /* 2026-10-30 修复：flex:1（基准 0）在 grid 同行右栏较矮时被压到 96px，
       6 条只显示 3 条（后 3 条被 home-panel overflow:hidden 裁掉）。
       改 flex:1 1 auto —— 保持占满面板剩余空间，但内容高度参与 grid 行高计算，
       行高取两栏中较高者，列表不再被裁。 */
    .home-news-list{list-style:none;margin:0;padding:6px 16px 10px;flex:1 1 auto}
    .home-news-list li{display:flex;align-items:center;gap:10px;padding:8.5px 0;border-bottom:1px dashed var(--line)}
    .home-news-list li:last-child{border-bottom:none}
    .home-news-list .dot{flex:0 0 auto;width:9px;height:9px;border-radius:50% 50% 50% 0;background:var(--gold);transform:rotate(-45deg);position:relative;top:-1px}
    .home-news-list li:hover .dot{background:var(--red);animation:noteBeat .5s ease-in-out infinite alternate}
    @keyframes noteBeat{from{transform:rotate(-45deg) scale(1)}to{transform:rotate(-45deg) scale(1.3)}}
    .home-news-list .t{flex:1;min-width:0;font-size:16.5px;line-height:1.5}
    .home-news-list .t .tt{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    /* 2026-10-30 党建园地子栏目标签 */
    .home-news-list .t .news-tag{display:inline-block;font-size:13px;color:#fff;background:var(--red);border-radius:3px;padding:1px 6px;margin-right:6px;line-height:1.5;font-weight:500;letter-spacing:1px;vertical-align:1px}
    .home-news-list li:hover .t{color:var(--red)}
    .home-news-list .d{flex:0 0 auto;font-size:13px;color:var(--ink-soft);font-family:Georgia,serif}

    /* ---- 钢琴键侧栏：真琴竖键侧视 ----
       白键：全长（高 100%），暖白渐变+底部毛毡红线
       黑键：63% 长（真琴比例黑键≈白键 0.63），骑缝压在两白键交界 z-index 上层
       悬停：键体下压（translateY+阴影收紧），白键文字变红
       2026-10-23：白键改为 <span> 纯装饰（不做跳转），动效与键面文字保留 */
    .h-piano{position:relative;display:flex;gap:4px;margin:0 0 26px;height:110px}
    .h-piano .key{position:relative;transition:transform .12s,box-shadow .12s;cursor:default}
    .h-piano .key.wk{flex:1;background:linear-gradient(180deg,#fffdf6 0%,#f6efe0 70%,#e9ddc2 97%,#b8413c 97%,#a3332e 100%);border:1px solid #cbbb96;border-radius:3px 3px 5px 5px;box-shadow:0 4px 9px rgba(60,40,10,.16)}
    .h-piano .key.wk:hover{transform:translateY(3px);box-shadow:0 1px 4px rgba(60,40,10,.22)}
    /* 黑键：真琴比例 63% 长、约 60% 宽度视觉；骑缝 */
    .h-piano .key.bk{position:absolute;top:0;height:63%;width:3.2%;background:linear-gradient(180deg,#4d4238 0%,#2b231b 55%,#120e0a 100%);border-radius:2px 2px 3px 3px;box-shadow:0 4px 9px rgba(0,0,0,.45),inset 0 -2px 3px rgba(255,255,255,.06);z-index:2}
    /* 黑键悬停仅微下压（装饰键不响应文字） */
    .h-piano .key.bk:hover{transform:translateY(2px);box-shadow:0 3px 6px rgba(0,0,0,.4)}
    /* 黑键骑缝定位：8 白键 flex 均分（每键 12.5%），7 个白键交界全放黑键，黑键宽 3.2% → left = 交界 - 1.6% */
    .h-piano .key.k1{left:calc(12.5% - 1.6%)}
    .h-piano .key.k2{left:calc(25% - 1.6%)}
    .h-piano .key.k3{left:calc(37.5% - 1.6%)}
    .h-piano .key.k4{left:calc(50% - 1.6%)}
    .h-piano .key.k5{left:calc(62.5% - 1.6%)}
    .h-piano .key.k6{left:calc(75% - 1.6%)}
    .h-piano .key.k7{left:calc(87.5% - 1.6%)}

    /* ---- 第二乐章：三列（党建 / 社会新闻 / 入口） ---- */
    /* 2026-11-02 第三列 190→220px：字号+1 后「会员/考级/证书查询系统」6 字在 190px 里放不下换行 */
    .h-row2{display:grid;grid-template-columns:1fr 1fr 220px;gap:20px;margin-bottom:26px}
    .home-panel{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
    .home-panel .pad{padding:6px 4px 8px}

    /* ---- 黑胶唱片入口：hover 唱片旋转 ---- */
    .h-discs{display:flex;flex-direction:column;gap:14px}
    .h-disc{position:relative;display:flex;align-items:center;gap:12px;height:82px;border-radius:10px;padding:0 14px 0 12px;color:#fff;text-decoration:none;box-shadow:var(--shadow);overflow:hidden;transition:transform .25s}
    .h-disc:hover{transform:translateY(-3px)}
    .h-disc .vinyl{flex:0 0 auto;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#fff 0 5px,var(--gold) 5px 9px,#241c14 9px 58%,#0c0906 58% 100%);position:relative;box-shadow:0 2px 6px rgba(0,0,0,.4);transition:transform .7s linear}
    .h-disc .vinyl::before{content:"";position:absolute;inset:15% 15% 15% 55%;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 3px,rgba(255,255,255,.09) 3px 4px)}
    .h-disc:hover .vinyl{transform:rotate(150deg)}
    .h-disc .tx{min-width:0}
    .h-disc .tx b{display:block;font-size:15.5px;letter-spacing:1.5px;white-space:nowrap}
    .h-disc .tx span{font-size:11.5px;opacity:.82;letter-spacing:1px;font-family:Georgia,serif}
    .h-disc.d1{background:linear-gradient(135deg,#8c1f1c,var(--red))}
    .h-disc.d2{background:linear-gradient(135deg,#a35a12,#e08a2e)}
    .h-disc.d3{background:linear-gradient(135deg,#4a2f7a,#7d5bb5)}

    /* ---- 五线谱通栏：金线谱面 + 漂浮音符 ---- */
    .h-staff{position:relative;height:64px;margin:0 0 26px;border-radius:10px;background:linear-gradient(180deg,#faf6ee,#fff);border:1px solid rgba(189,154,86,.35);box-shadow:var(--shadow);overflow:hidden}
    .h-staff .lines{position:absolute;left:24px;right:24px;top:14px;bottom:14px;display:flex;flex-direction:column;justify-content:space-between}
    .h-staff .lines i{height:1px;background:rgba(189,154,86,.5)}
    .h-staff .notes b{position:absolute;font-size:20px;color:var(--red);font-weight:400;opacity:.85;animation:noteFloat 4.5s ease-in-out infinite alternate}
    .h-staff .notes b:nth-child(1){left:8%;top:22px;animation-delay:0s}
    .h-staff .notes b:nth-child(2){left:20%;top:34px;animation-delay:.6s;color:var(--gold)}
    .h-staff .notes b:nth-child(3){left:33%;top:18px;animation-delay:1.2s}
    .h-staff .notes b:nth-child(4){left:47%;top:30px;animation-delay:1.8s;color:var(--gold)}
    .h-staff .notes b:nth-child(5){left:61%;top:24px;animation-delay:2.4s}
    .h-staff .notes b:nth-child(6){left:74%;top:36px;animation-delay:3s;color:var(--gold)}
    .h-staff .notes b:nth-child(7){left:87%;top:20px;animation-delay:3.6s}
    @keyframes noteFloat{from{transform:translateY(0)}to{transform:translateY(-7px)}}

    /* ---- 第三乐章：行业资讯（旋律卡片） + 会员风采 + 活动专题 ---- */
    /* 2026-11-02 老大拍板：两栏宽度平均（会员风采内容少，不再给宽栏）；
       此前 0.673fr:1fr 的对行宽设计废弃 */
    .h-row3{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:26px}
    /* 第三乐章 tab 卡片头：会员风采 / 活动专题 */
    .h-tabs2{display:flex;gap:4px}
    .h-tabs2 button{background:none;border:none;padding:2px 10px 6px;font-size:17.5px;font-family:inherit;color:var(--ink-soft);cursor:pointer;letter-spacing:1.5px;position:relative;line-height:26px;font-weight:700}
    .h-tabs2 button+button{border-left:1px solid var(--line)}
    .h-tabs2 button.on{color:var(--red);font-weight:700}
    .h-tabs2 button.on::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:3px;background:var(--red);border-radius:2px}
    .h-tabs2 button:hover{color:var(--red)}
    .h-pane{display:none}
    .h-pane.on{display:block}
    .h-melody{padding:12px 14px;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:96px;gap:10px}
    /* 2026-10-30 修复：列表形态（无旋律卡片）时 .h-melody 退化为普通块容器——
       否则 96px 网格轨道 + 面板 overflow:hidden 会把 6 条列表裁到只剩 3 条。 */
    .h-melody.list-mode{display:block}
    .h-melody .mcard{position:relative;border-radius:9px;overflow:hidden;text-decoration:none;box-shadow:0 3px 9px rgba(60,40,10,.14)}
    .h-melody .mcard .img{position:absolute;inset:0}
    .h-melody .mcard img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
    .h-melody .mcard:hover img{transform:scale(1.07)}
    .h-melody .mcard .tt2{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;color:#fff;font-size:13.5px;line-height:1.4;font-weight:400;background:linear-gradient(transparent,rgba(0,0,0,.72));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    /* 强拍大卡：占两行两列，如小节重音 */
    .h-melody .mcard.strong{grid-column:span 2;grid-row:span 2}
    .h-melody .mcard.strong .tt2{font-size:15.5px}
    .h-melody .pad2{padding:6px 16px 10px}
    .home-m-carousel{position:relative;padding:12px 14px;min-height:150px}
    .h-events-pad{padding:12px 14px;min-height:150px;display:flex;flex-direction:column;justify-content:center}
    .home-m-page{display:none;grid-template-columns:repeat(3,1fr);gap:12px}
    .home-m-page.active{display:grid}
    .home-m-card{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;text-decoration:none;transition:border-color .2s,box-shadow .2s}
    .home-m-card:hover{border-color:var(--gold);box-shadow:0 4px 12px rgba(189,154,86,.25)}
    .home-m-card .m-logo{flex:0 0 auto;width:44px;height:44px;border-radius:50%;overflow:hidden;background:#f3ead8;display:flex;align-items:center;justify-content:center}
    .home-m-card .m-logo img{width:100%;height:100%;object-fit:cover}
    .home-m-card .m-logo .av{font-size:19px;color:var(--red);font-weight:700}
    .home-m-card .body b{font-size:14.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .home-m-dots{position:absolute;right:16px;top:-32px;display:flex;gap:6px}
    .home-m-dots button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(189,154,86,.4);cursor:pointer}
    .home-m-dots button.on{background:var(--red)}

    /* ---- 响应式 ---- */
    @media (max-width:960px){
      .h-piano{height:170px;gap:3px}
      .h-piano .key.wk b{font-size:13px;letter-spacing:1px}
      .h-piano .key.wk span{display:none}
      .h-piano .key.bk{height:63%;width:4.4%}
      .h-melody{grid-template-columns:1fr 1fr;grid-auto-rows:90px}
      .h-row1{grid-template-columns:1fr}
      .home-photo{height:240px}
      .h-row2{grid-template-columns:1fr}
      .h-discs{flex-direction:row}
      .h-disc{flex:1;min-width:0}
      .h-disc .tx b{font-size:13.5px}
      .h-disc .tx span{display:none}
      .h-row3{grid-template-columns:1fr}
      .home-m-page{grid-template-columns:1fr 1fr}
    }

    /* ---- 手机适配（2026-10-30）：640px 以下细化 ---- */
    @media (max-width:640px){
      .home-container{padding:12px 12px 32px}
      .h-row1{gap:12px}
      .home-photo{height:200px}
      .home-photo .cap{font-size:17px;font-weight:600;padding:12px 12px}
      .h-sec{padding:0 12px;margin-bottom:10px}
      .h-sec .h-title h3{font-size:19px;letter-spacing:2px}
      .h-sec .h-title .clef{font-size:23px}
      .h-sec .h-line{margin:0 10px 4px;height:20px}
      .h-sec .h-more{font-size:13px;padding-bottom:5px}
      /* 钢琴键装饰：手机缩小高度，避免占太多首屏 */
      .h-piano{height:120px;gap:2px;margin-bottom:18px}
      .h-piano .key.wk b{font-size:12px;letter-spacing:.5px}
      .h-piano .key.bk{width:4.4%}
      /* 黑胶入口：手机竖排，每条全宽 */
      .h-discs{flex-direction:column;gap:10px}
      .h-disc{height:60px;padding:0 12px}
      .h-disc .vinyl{width:42px;height:42px}
      .h-disc .tx b{font-size:14.5px;letter-spacing:1px}
      /* 五线谱通栏：缩小，隐藏后段音符避免拥挤 */
      .h-staff{height:46px;margin-bottom:18px}
      .h-staff .lines{left:16px;right:16px;top:10px;bottom:10px}
      .h-staff .notes b{font-size:16px}
      .h-staff .notes b:nth-child(n+5){display:none}
      /* 旋律卡片：3列 → 2列，行高收窄 */
      .h-melody{grid-template-columns:1fr 1fr;grid-auto-rows:78px;gap:8px;padding:10px 12px}
      .h-melody .mcard .tt2{font-size:12.5px;padding:16px 8px 6px}
      .h-melody .mcard.strong .tt2{font-size:13.5px}
      .h-melody .pad2{padding:6px 12px 8px}
      /* 会员风采轮播：3列 → 2列，卡片紧凑 */
      .home-m-page{grid-template-columns:1fr 1fr;gap:8px}
      .home-m-carousel{padding:10px 12px;min-height:120px}
      .home-m-card{padding:7px 8px;gap:8px}
      .home-m-card .m-logo{width:36px;height:36px}
      .home-m-card .body b{font-size:13.5px;line-height:1.4}
      .home-m-dots{top:-26px;right:12px}
      .h-events-pad{padding:10px 12px}
      /* 党员标签：手机端缩小 */
      .home-news-list .t .news-tag{font-size:12px;padding:1px 5px}
      /* 焦点图圆点缩小 */
      .home-photo .dots{right:10px;bottom:10px}
      .home-photo .dots button{width:8px;height:8px}
    }

    /* ---- 小手机（2026-10-30）：480px 以下再收紧 ---- */
    @media (max-width:480px){
      .home-photo{height:170px}
      .h-melody{grid-auto-rows:70px}
      .h-melody .mcard .tt2{font-size:12px}
      .home-m-page{grid-template-columns:1fr}
      .home-m-carousel{min-height:80px}
      .h-staff .notes b:nth-child(n+4){display:none}
      .h-piano{height:96px}
    }