/* 首页首屏：独立玄云、局部江面与稳定文字。公共设计变量和开关来自 base.css / motion.js。 */
/* 本次新增的标题字使用新版子集，避免预览窗口沿用旧字体缓存。 */
@font-face { font-family:"LJ Brush"; src:url('../fonts/brush.woff2?v=home-v2') format('woff2'); font-display:swap }
.home-page main { isolation:isolate }
.hero { position:relative; overflow:hidden; isolation:isolate; border-bottom:1px solid var(--gold-line); background:var(--paper) }
.hero__scene { position:absolute; inset:-12px 0 -35px; z-index:-3; will-change:transform }
.hero__art,.hero__water { position:absolute; inset:0 }
.hero__art img,.hero__water img { width:100%; height:100%; object-fit:cover; object-position:88% 52% }
.hero__art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(251,247,238,.5),rgba(251,247,238,.15) 38%,transparent 58%),linear-gradient(0deg,var(--paper) 0,transparent 10%) }
.hero__water { pointer-events:none; filter:url(#lj-water); mask-image:radial-gradient(18% 24% at 62% 79%,#000 42%,transparent 100%) }
.hero__water img { animation:home-river 3.6s ease-in-out -.7s infinite alternate; will-change:transform }
@keyframes home-river { from { transform:translate3d(-7px,-1px,0) scale(1.015) } to { transform:translate3d(7px,2px,0) scale(1.015) } }
.home-glimmer { position:absolute; left:53%; top:64%; width:17%; height:32%; pointer-events:none; opacity:.4; mask-image:radial-gradient(ellipse,#000 15%,transparent 70%); mix-blend-mode:soft-light; overflow:hidden }
.home-glimmer::after { content:""; position:absolute; inset:-20px; background:repeating-linear-gradient(177deg,transparent 0 10px,rgba(255,250,219,.9) 11px,rgba(83,99,107,.45) 13px,transparent 14px 23px); animation:home-reflections 3s linear infinite }
@keyframes home-reflections { from { transform:translate3d(-12px,-12px,0) } to { transform:translate3d(12px,11px,0) } }
.home-cloud { position:absolute; width:64%; height:360px; top:-165px; right:-5%; z-index:-2; pointer-events:none; opacity:.82; mask-image:linear-gradient(90deg,transparent,#000 18%,#000 88%,transparent) }
.home-cloud__drift { width:100%; height:100%; animation:home-cloud-drift 58s ease-in-out -20s infinite alternate }
.home-cloud img { width:100%; height:100%; object-fit:contain; filter:url(#home-cloud); object-position:right bottom }
@keyframes home-cloud-drift { from { transform:translate3d(-1.5%,-2%,0) } to { transform:translate3d(1.5%,2%,0) } }
.home-mist { position:absolute; pointer-events:none; left:-15%; width:130%; z-index:-1; background:radial-gradient(ellipse,rgba(251,247,238,.8),transparent 67%); animation:home-mist 28s ease-in-out -8s infinite alternate }
.home-mist--far { top:39%; height:140px; opacity:.28 }
.home-mist--near { bottom:-90px; height:180px; opacity:.5; animation-duration:36s; animation-direction:alternate-reverse }
@keyframes home-mist { from { transform:translateX(-3%); opacity:.16 } to { transform:translateX(4%); opacity:.48 } }
.hero__inner { min-height:620px; display:flex; align-items:center; position:relative; padding-top:55px; padding-bottom:75px }
.hero__text { max-width:555px; position:relative }
.hero__eyebrow { font-size:18px; color:var(--gold); letter-spacing:.16em; margin-bottom:21px }
.hero h1 { display:flex; align-items:center; gap:18px; font:400 clamp(92px,8.8vw,126px)/1.08 var(--brush); letter-spacing:.04em }
.hero h1 .seal { align-self:flex-end; margin-bottom:14px }
.hero__slogan { font-size:34px; margin-top:24px; line-height:1.4; letter-spacing:.06em }
.hero__desc { color:var(--ink-2); font-size:19px; line-height:1.9; margin-top:18px }
.hero__actions { display:flex; flex-wrap:wrap; gap:15px; margin-top:30px }
.hero__actions .btn { min-height:50px }
.hero__caption { position:absolute; right:max(32px,calc((100% - 1116px)/2)); bottom:30px; display:flex; align-items:center; gap:14px; color:var(--ink-2); font-size:16px; letter-spacing:.15em }
.hero__caption i { width:45px; height:1px; background:var(--gold) }
@media (max-width:1000px) and (min-width:768px) { .hero__inner { min-height:580px } .hero__text { max-width:480px } .hero__text::before { content:""; position:absolute; inset:-35px; background:radial-gradient(ellipse,rgba(251,247,238,.88),transparent 75%); z-index:-1 } .hero__slogan { font-size:31px } }
@media (max-width:767px) {
 .hero__inner { min-height:640px; align-items:flex-end; padding-top:245px; padding-bottom:45px }
 .hero__scene { inset:0 0 auto; height:445px }
 .hero__art img,.hero__water img { object-position:88% center }
 .hero__art::after { background:linear-gradient(0deg,var(--paper) 0,rgba(245,239,227,.92) 12%,transparent 58%) }
 .hero__water { mask-image:radial-gradient(34% 20% at 34% 76%,#000 30%,transparent) }
 .home-glimmer { left:9%; top:68%; width:42%; height:25% }
 .home-cloud { width:640px; height:220px; right:-145px; top:-52px; opacity:.72 }
 .home-mist--far { top:205px; height:130px }
 .home-mist--near { display:none }
 .hero__text { width:100%; max-width:480px }
 .hero__text::before { content:""; position:absolute; inset:-20px -30px; background:radial-gradient(ellipse,rgba(245,239,227,.86) 25%,transparent 75%); z-index:-1 }
 .hero__eyebrow { font-size:16px; margin-bottom:14px }
 .hero h1 { font-size:clamp(78px,21vw,108px); gap:12px }
 .hero h1 .seal { width:21px; height:31px; font-size:10px; margin-bottom:7px }
 .hero__slogan { font-size:29px; margin-top:17px }
 .hero__desc { font-size:17px; margin-top:14px; line-height:1.9 }
 .hero__actions { gap:10px; margin-top:23px }
 .hero__actions .btn { padding:0 19px; font-size:16px }
 .hero__caption { display:none }
}
@media (max-width:360px) { .hero__actions .btn { padding:0 13px; gap:7px } .hero__slogan { font-size:26px } }
html.no-js .hero__water,html.no-js .home-page .motion-toggle { display:none }
html.no-js .home-cloud img { filter:none }
html.no-js .home-page *,html.no-js .home-page *::after { animation:none!important }
html.motion-off .hero__text { opacity:1; transform:none }
@media (prefers-reduced-motion:reduce) { .home-page *, .home-page *::before,.home-page *::after { transition:none } }


/* 宣纸留白与横向山水贯穿首页；功能信息保持清楚可读。 */
.home-page .sec { padding:62px 0 }
.home-page .sec-head { margin-bottom:32px }
.home-page .sec-head h2 { font-size:39px }
.home-page .sec-head p { font-size:18px; color:var(--ink-2); margin-top:12px }
.home-page main>.sec { position:relative }
.home-page .card { border-radius:2px; box-shadow:0 2px 16px rgba(70,50,20,.035) }
.home-ways { background:linear-gradient(var(--paper),rgba(251,247,238,.65)) }
.features { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px }
.feature { position:relative; display:flex; align-items:center; min-height:300px; overflow:hidden; isolation:isolate; text-decoration:none; transition:transform .3s,box-shadow .3s }
.feature:hover { transform:translateY(-4px); box-shadow:0 12px 24px rgba(70,50,20,.1) }
.feature__body { padding:32px; width:72%; position:relative; z-index:1 }
.feature__label { display:block; color:var(--gold); font-size:16px; letter-spacing:.12em; margin-bottom:9px }
.feature h3 { font-size:43px; margin-bottom:15px }
.feature p { color:var(--ink-2); font-size:17px; line-height:1.9 }
.feature__more { display:inline-flex; align-items:center; gap:24px; font-size:17px; color:var(--cinnabar-dark); font-weight:600; margin-top:22px }
.feature__more span { transition:transform .25s }
.feature:hover .feature__more span { transform:translateX(5px) }
.feature__art { position:absolute; right:0; bottom:0; width:70%; height:100%; object-fit:cover; object-position:88% center; z-index:-2; mask-image:linear-gradient(90deg,transparent,#000 65%); opacity:.85; transition:transform .8s ease }
.feature::before { content:""; position:absolute; inset:0; border:0; width:auto; height:auto; background:linear-gradient(90deg,var(--paper-card) 8%,rgba(251,247,238,.85) 37%,transparent 87%); z-index:-1 }
.feature:hover .feature__art { transform:scale(1.035) }
.feature--daily .feature__art { object-position:95% center }
.feature--compact { min-height:240px }
.feature--compact h3 { font-size:36px; margin-bottom:12px }
.feature--compact .feature__body { padding-top:25px; padding-bottom:25px }
.feature--compact .feature__art { width:58%; opacity:.65 }
.home-page #guoxue { background:linear-gradient(rgba(251,247,238,.65),var(--paper)); border-top:1px solid rgba(216,195,160,.5) }
.gx-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.55fr); gap:24px }
.gx-card { padding:28px; position:relative; overflow:hidden }
.gx-label { font:400 29px/1.4 var(--brush); margin-bottom:18px; display:flex; gap:12px; align-items:center }
.gx-label::before { content:""; width:4px; height:21px; background:var(--cinnabar); flex:none }
.gx-solar { color:var(--ink-2); font-size:17px; margin-top:26px }
.pillars { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:25px 0; margin:20px 0; border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line) }
.pillar { text-align:center }
.pillar+.pillar { border-left:1px solid var(--gold-line) }
.pillar b { display:block; font:400 46px/1.4 var(--brush); color:var(--ink) }
.pillar span { display:block; font-size:16px; color:var(--gold); margin-top:7px }
.gx-meta { font-size:17px; color:var(--ink-2) }
.gx-meta strong { color:var(--cinnabar-dark) }
.term-body { display:grid; grid-template-columns:minmax(230px,1.2fr) minmax(0,1fr); gap:20px; align-items:center }
.wheel { display:block; width:100%; max-width:330px; margin:auto; overflow:visible }
.wheel text { font:14px var(--serif); fill:var(--ink-2) }
.wheel .dot { r:15px; fill:var(--paper-card); stroke:var(--gold-line) }
.wheel .on .dot { r:18px; fill:var(--cinnabar); stroke:var(--cinnabar) }
.wheel .on text { fill:var(--paper-card); font-weight:700 }
.wheel .past .dot { fill:var(--paper-2) }
.wheel .ring { fill:none; stroke:var(--gold-line); stroke-dasharray:2 4 }
.wheel .center { font:34px var(--brush); fill:var(--ink) }
.wheel .center-sub { font:16px var(--serif); fill:var(--ink-3) }
.term-name { font:400 43px/1.2 var(--brush); color:var(--cinnabar-dark); margin-bottom:12px }
.term-date { color:var(--ink-3); font-size:16px; margin-bottom:12px }
#term-desc,.term-next { font-size:17px; color:var(--ink-2) }
.term-next { padding-top:14px; margin-top:14px; border-top:1px solid var(--gold-line) }
.quote { position:relative; isolation:isolate; margin-top:24px; padding:36px 28px; text-align:center; overflow:hidden; background:var(--dai-deep); color:var(--paper-card) }
.quote::before { content:""; position:absolute; inset:0; width:auto; height:auto; border:0; background:url('../img/art/home/hero-v2.webp') center 66% / cover; opacity:.08; z-index:-1 }
.quote p { font:400 36px/1.65 var(--brush); letter-spacing:.035em }
.quote footer { color:var(--gold-soft); font-size:16px; margin-top:12px }
.gx-more { margin-top:20px }
.gx-more summary { cursor:pointer; list-style:none; padding:14px; text-align:center; font-size:17px; color:var(--gold); font-weight:600 }
.gx-more summary::-webkit-details-marker { display:none }
.gx-more summary::after { content:" +"; margin-left:12px }
.gx-more[open] summary::after { content:" −" }
.gx-more .gx-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:12px }
.chips,.shichen { list-style:none; padding:0; margin:0; display:grid; gap:8px }
.chips { grid-template-columns:repeat(5,minmax(0,1fr)) }
.shichen { grid-template-columns:repeat(4,minmax(0,1fr)) }
.chips li,.shichen li { background:var(--paper); border:1px solid var(--gold-soft); border-radius:3px; text-align:center; padding:10px 2px; line-height:1.5 }
.chips b,.shichen b { display:block; font:400 28px/1.4 var(--brush) }
.chips span,.shichen span { display:block; font-size:16px; color:var(--ink-3) }
.chips li.on,.shichen li.on { background:var(--cinnabar); border-color:var(--cinnabar); color:var(--paper-card) }
.chips li.on span,.shichen li.on span { color:var(--paper-card) }
.gx-note { color:var(--ink-3); font-size:16px; margin-top:16px }
/* 榜单读取既有真实接口，空态保持紧凑。 */
.rank-sec { background:linear-gradient(rgba(251,247,238,.25),rgba(251,247,238,.8),var(--paper)); border-top:1px solid var(--gold-line) }
.tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; max-width:760px; margin:0 auto 14px }
.tab { min-height:47px; border:1px solid var(--gold-line); border-radius:3px; background:var(--paper-card); font:600 17px/1.3 var(--serif); color:var(--ink-2); cursor:pointer; transition:background-color .25s,color .25s }
.tab:hover { color:var(--cinnabar) }
.tab.is-active { background:var(--cinnabar); border-color:var(--cinnabar); color:var(--paper-card) }
.board-note { font-size:16px; color:var(--ink-3); text-align:center; margin-bottom:34px }
.board-note span:not(:empty)::after { content:" · " }
#ranking-panel { max-width:960px; margin:auto }
.podium { list-style:none; padding:0; margin:0 auto; max-width:820px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:end }
.podium:empty { display:none }
.podium li { text-align:center; padding:34px 12px 22px; min-width:0; background:var(--paper-card) url('../img/art/home/hero-v2.webp') right bottom / auto 100%; background-blend-mode:soft-light }
.podium .p1 { order:2; padding-top:54px }.podium .p2 { order:1 }.podium .p3 { order:3 }
.medal { position:absolute; top:-21px; left:50%; transform:translateX(-50%); width:44px; height:44px; display:grid; place-items:center; border-radius:50%; color:var(--paper-card); font:700 25px/1 var(--serif); box-shadow:inset 0 0 0 3px rgba(255,255,255,.4),0 3px 10px rgba(70,50,20,.12) }
.p1 .medal { width:54px; height:54px; top:-27px; background:radial-gradient(circle at 35% 25%,#eccc82,#a87a32) }.p2 .medal { background:radial-gradient(circle at 35% 25%,#dfe3e5,#7b858c) }.p3 .medal { background:radial-gradient(circle at 35% 25%,#e8b78c,#9d5f3e) }
.avatar { display:grid; place-items:center; border-radius:50%; overflow:hidden; background:var(--dai-deep); color:var(--paper-card); flex:none }
.avatar img { width:100%; height:100%; object-fit:cover }
.podium .avatar { width:70px; height:70px; margin:0 auto 12px; font-size:26px; box-shadow:0 0 0 3px var(--paper-card),0 0 0 4px var(--gold-line) }
.podium .p1 .avatar { width:82px; height:82px }
.podium .name { font-size:19px; font-weight:700; overflow-wrap:anywhere }
.podium .metric { font-size:25px; color:var(--cinnabar); font-weight:700; margin-top:6px }
.podium .sub { color:var(--ink-3); font-size:16px }
.ranktable { max-width:880px; margin:18px auto 0; overflow:hidden }
.ranktable:has(ol:empty) { display:none }
.ranktable ol { list-style:none; margin:0; padding:6px 0 }
.ranktable li { display:grid; grid-template-columns:40px 40px minmax(0,1fr) auto; gap:16px; align-items:center; padding:13px 22px }
.ranktable li:nth-child(odd) { background:var(--paper-2) }
.ranktable .no { text-align:center; color:var(--gold); font-size:18px }
.ranktable .avatar { width:40px; height:40px }
.ranktable .name { font-size:17px; font-weight:600; overflow-wrap:anywhere }
.ranktable .sub,.ranktable .metric small { display:block; font-size:16px; color:var(--ink-3) }
.ranktable .metric { text-align:right; font-size:18px; white-space:nowrap }
.board-state { text-align:center; color:var(--ink-2); font-size:18px; padding:38px 22px; border:1px solid var(--gold-line); background:rgba(251,247,238,.75) }
.board-state:empty { display:none }
.rank-more { text-align:center; margin-top:28px }
.demo-badge { display:inline-block; font-size:16px; margin-left:8px; color:var(--gold) }
/* 扫码邀请与联系信息。 */
.home-page #join { padding-top:40px }
.join { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:36px; align-items:center; border:1px solid var(--gold-line); background:rgba(251,247,238,.8); padding:36px }
.steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px }
.join .step.card { padding:0; background:none; border:0; box-shadow:none }
.step::before,.step::after { display:none }
.step__no { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--gold); border-radius:50%; color:var(--gold); font-size:19px; margin-bottom:16px }
.step h3 { font-size:21px; margin-bottom:10px }
.step p { color:var(--ink-2); font-size:17px; line-height:1.8 }
.qr-card { padding:18px; text-align:center; width:max-content; max-width:100%; margin:0 auto }
.qr-card img,.qr-empty { width:210px; height:210px; object-fit:contain; background:#fff; margin:auto }
.qr-card figcaption { font-size:16px; color:var(--ink-2); margin-top:12px }
.qr-empty { display:grid; place-content:center; gap:6px; border:1px dashed var(--gold); color:var(--gold) }
.qr-empty b { font:400 26px/1.4 var(--brush) }.qr-empty span { font-size:16px; color:var(--ink-3) }
.contact { display:grid; grid-template-columns:auto minmax(0,1fr); gap:36px; align-items:center; padding:30px 36px; position:relative; isolation:isolate; overflow:hidden }
.contact::before { content:""; inset:0; position:absolute; width:auto; height:auto; border:0; background:url('../img/art/archive/hero.webp') right center / cover; opacity:.09; z-index:-1 }
.contact .qr-card { padding:0; box-shadow:none }
.contact .qr-card img,.contact .qr-empty { width:175px; height:175px }
.contact h3 { font:400 35px/1.3 var(--brush); margin-bottom:12px }
.contact p { font-size:17px; color:var(--ink-2) }
.wxid { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:18px; width:max-content; max-width:100%; padding:12px 18px; background:rgba(239,230,212,.6); border:1px solid var(--gold-soft) }
.wxid span { color:var(--ink-3); font-size:16px }.wxid strong { font-size:21px; word-break:break-all }
.contact .contact__note { font-size:16px; color:var(--ink-3); margin-top:12px }
.home-page .end-band { padding:65px 16px 60px }
.home-end-art { position:absolute; inset:-35px 0; width:100%; height:calc(100% + 70px); object-fit:cover; object-position:center 78%; z-index:-2 }
.home-page .end-band::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse,rgba(251,247,238,.96),rgba(251,247,238,.7) 35%,transparent 78%) }
.home-page .end-band h2 { font-size:42px }
.home-page .end-band p { color:var(--ink-2); font-size:18px }
.home-page .no-script { text-align:center; color:var(--ink-2); font-size:17px; padding:18px }
html.no-js .home-page .tabs,html.no-js .home-page .board-state { display:none }
html.motion-off .home-page *,html.motion-off .home-page *::after { transition:none }
@media (max-width:1050px) {
 .feature__body { padding:27px; width:80% }
 .feature h3 { font-size:37px }
 .gx-grid { grid-template-columns:minmax(0,1fr) }
 .gx-grid>.gx-card:first-child { display:grid; grid-template-columns:1fr 1.2fr; gap:0 30px }
 .gx-grid>.gx-card:first-child .pillars { grid-column:2; grid-row:1/4; margin:0; align-items:center }
 .gx-solar { margin-top:0 }.gx-meta { margin-top:8px }
 .term-body { grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
 .gx-more .gx-grid { grid-template-columns:minmax(0,1fr) }
 .gx-more .gx-card:first-child { display:block }
 .join { gap:25px; padding:27px }.steps { gap:16px }.step h3 { font-size:20px }
}
@media (max-width:767px) {
 .home-page .sec { padding:38px 0 }
 .home-page .sec-head { margin-bottom:25px }
 .home-page .sec-head h2 { font-size:29px; gap:8px; letter-spacing:.02em }
 .home-page .sec-head h2::before,.home-page .sec-head h2::after { width:23px }
 .home-page .sec-head p { font-size:17px; max-width:24em; margin:12px auto 0 }
 .features { grid-template-columns:minmax(0,1fr); gap:18px }
 .feature { min-height:265px }.feature--compact { min-height:215px }
 .feature__body { padding:24px; width:94% }
 .feature h3 { font-size:37px; margin-bottom:13px }
 .feature p { font-size:17px; max-width:17em }
 .feature__art { width:72%; opacity:.7 }
 .feature--compact .feature__art { width:65% }
 .feature__more { margin-top:18px; font-size:17px }
 .gx-card { padding:24px 20px }
 .gx-grid { gap:18px }
 .gx-grid>.gx-card:first-child { display:block }
 .gx-grid>.gx-card:first-child .pillars { margin:21px 0 }
 .gx-label { font-size:28px }.gx-solar { margin-top:14px }
 .term-body { grid-template-columns:minmax(0,1fr); gap:22px }
 .wheel { max-width:320px }
 .term-body>div { padding-top:17px; border-top:1px solid var(--gold-line) }
 .term-name { font-size:38px }
 .quote { padding:28px 22px; margin-top:18px }
 .quote p { font-size:29px; line-height:1.75 }
 .shichen { grid-template-columns:repeat(3,minmax(0,1fr)) }
 .chips { gap:5px }
 .chips span { font-size:16px }
 .tabs { gap:6px }.tab { font-size:16px }
 .board-note { font-size:16px; line-height:1.8; margin-bottom:30px }
 .board-state { font-size:17px; padding:28px 20px }
 .podium { gap:8px }.podium li { padding:30px 6px 20px }.podium .p1 { padding-top:48px }
 .podium .avatar { width:52px; height:52px }.podium .p1 .avatar { width:62px; height:62px }
 .podium .name { font-size:17px }.podium .metric { font-size:22px }
 .ranktable li { grid-template-columns:25px 30px minmax(0,1fr) auto; gap:8px; padding:12px 10px }
 .ranktable .avatar { width:30px; height:30px }.ranktable .metric { font-size:17px }
 .home-page #join { padding-top:30px }
 .join { grid-template-columns:minmax(0,1fr); gap:28px; padding:26px 20px }
 .steps { grid-template-columns:minmax(0,1fr); gap:22px }
 .join .step { display:grid; grid-template-columns:36px minmax(0,1fr); gap:0 15px }
 .step__no { grid-row:span 2; margin:0; margin-top:4px }
 .step h3 { font-size:21px; margin-bottom:5px }.step p { font-size:17px }
 .join>.qr-card { width:100%; padding:22px 16px; background:var(--paper-card) }
 .contact { grid-template-columns:minmax(0,1fr); padding:27px 22px; gap:27px }
 .contact>.qr-card { grid-row:2 }.contact h3 { font-size:31px }
 .contact .qr-card img,.contact .qr-empty { width:190px; height:190px }
 .wxid { padding:12px; gap:8px 12px }.wxid strong { font-size:18px }
 .home-page .end-band { padding:43px 16px }
 .home-page .end-band h2 { font-size:31px; letter-spacing:.03em }
 .home-page .end-band p { font-size:17px }
 .home-page .site-footer { padding-bottom:78px }
}