/* 每日打榜：沿用公共配色、组件与 motion.js，独立画层不承载文字。 */
.daily-page .daily-svg-defs { position:absolute; pointer-events:none }
.daily-page .icon-ink,.daily-icon,.timeline-icon svg { fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round }
.daily-icon { width:22px; height:22px; flex:none }
.daily-page main { position:relative; isolation:isolate }
.daily-page main::before { content:""; position:absolute; inset:280px 0 180px; z-index:-1; pointer-events:none; background:url('../img/art/daily/landscape-v2.webp') right top / auto 750px repeat-y; opacity:.25; mask-image:linear-gradient(90deg,#000,transparent 26%,transparent 74%,#000),repeating-linear-gradient(to bottom,transparent 0,#000 100px,#000 620px,transparent 750px); mask-composite:intersect }
.daily-page .sec { padding:24px 0 }
.daily-page .sec-head { margin-bottom:20px }
.daily-page .sec-head h2 { font-size:clamp(28px,3.2vw,40px) }
.daily-page .sec-head h2::before,.daily-page .sec-head h2::after { width:clamp(22px,7vw,100px) }
.daily-page main .card { border-radius:2px; box-shadow:0 3px 12px rgba(70,50,20,.035) }

/* 山水全幅铺开；云、水、薄雾各自运动，标题在独立前景。 */
.daily-hero { position:relative; overflow:hidden; isolation:isolate }
.hero__scene { position:absolute; inset:-12px 0 -38px; 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:62% 54% }
.hero__water { pointer-events:none; filter:url(#lj-water); mask-image:radial-gradient(26% 19% at 55% 81%,#000 45%,transparent 100%) }
.hero__water img { animation:daily-river-flow 3.2s ease-in-out -.6s infinite alternate; will-change:transform }
@keyframes daily-river-flow { from { transform:translate3d(-7px,-1px,0) scale(1.018) } to { transform:translate3d(7px,2px,0) scale(1.018) } }
.water-glimmer::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(178deg,transparent 0 12px,rgba(255,249,222,.85) 13px,rgba(69,88,97,.26) 15px,transparent 17px 26px); mask-image:radial-gradient(ellipse,#000 10%,transparent 68%); animation:daily-current 2.8s linear infinite }
@keyframes daily-current { from { transform:translate3d(-12px,-13px,0) } to { transform:translate3d(12px,13px,0) } }
.water-glimmer { position:absolute; left:48%; top:53%; width:25%; height:45%; pointer-events:none; background:repeating-linear-gradient(176deg,transparent 0 9px,rgba(255,241,204,.65) 10px,transparent 12px 18px); mask-image:radial-gradient(ellipse,#000,transparent 66%); mix-blend-mode:screen; animation:daily-water-light 7s ease-in-out infinite alternate }
@keyframes daily-water-light { from { opacity:.18; transform:translate3d(-8px,2px,0) scaleX(.85) } to { opacity:.65; transform:translate3d(8px,-3px,0) scaleX(1.12) } }
.hero__inner { position:relative; min-height:430px; padding-top:52px; padding-bottom:80px; display:flex; align-items:center }
.hero__text { position:relative; max-width:580px }
.hero__text::before { content:""; position:absolute; inset:-35px -65px; z-index:-1; background:radial-gradient(ellipse,rgba(251,247,238,.9) 10%,rgba(251,247,238,.55) 48%,transparent 74%) }
.hero__eyebrow { color:var(--gold); letter-spacing:.16em; margin-bottom:8px; font-size:19px }
.hero__text h1 { font:400 clamp(72px,8vw,112px)/1.12 var(--brush); letter-spacing:.02em }
.hero__desc { font-size:23px; letter-spacing:.08em; margin:14px 0 24px; color:var(--ink) }
.daily-cloud { position:absolute; top:-25%; right:-6%; width:72%; height:95%; z-index:-2; pointer-events:none; mask-image:linear-gradient(90deg,transparent,#000 16%,#000 92%,transparent) }
/* 整体只慢移；云纹内部舒展，避免整张画绕轴摆动。 */
.daily-cloud__art { width:100%; height:100%; animation:daily-cloud-drift 64s ease-in-out -22s infinite alternate }
.daily-cloud__art img { width:100%; height:100%; object-fit:contain; object-position:top right; filter:url(#lj-cloud) }
@keyframes daily-cloud-drift { from { transform:translate3d(-1.5%,-.5%,0) } to { transform:translate3d(1.5%,.5%,0) } }
.mist { position:absolute; left:-10%; width:120%; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 35% 50%,rgba(251,247,238,.75),transparent 62%); animation:daily-mist-drift 26s ease-in-out -9s infinite alternate }
.mist--far { top:30%; height:80px; opacity:.32 }
.mist--near { bottom:-25px; height:100px; opacity:.65; animation-duration:32s; animation-direction:alternate-reverse }
@keyframes daily-mist-drift { from { background-position:-100px 0; opacity:.25 } to { background-position:180px 0; opacity:.65 } }

/* 真实竹轴和宣纸底，给竹叶及轴头留白。 */
.current-sec { position:relative; z-index:1; margin-top:-40px }
.current-scroll.card { padding:60px 76px 66px 98px; background:transparent; border:0; box-shadow:none; isolation:isolate }
.current-scroll__frame { display:none }
.current-scroll::before,.current-scroll::after { display:none }
.current-scroll__art { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; z-index:-1; pointer-events:none }
.current-scroll .sec-head { margin-bottom:18px }
.current-scroll .sec-head h2 { font-size:38px }
.current-state { position:absolute; top:70px; right:76px; display:flex; justify-content:flex-end; align-items:center; gap:5px; color:var(--ink-3); font-size:16px; margin:0 }
.current-state svg { width:18px; height:18px; color:var(--gold) }
.event-facts { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--gold-line); background:rgba(251,247,238,.5); margin:0; padding:14px 4px }
.event-facts>div { display:grid; grid-template-columns:34px auto; gap:0 14px; justify-content:center; padding:0 10px }
.event-facts>div+div { border-left:1px solid var(--gold-line) }
.event-facts svg { grid-row:span 2; align-self:center; width:30px; height:30px }
.event-facts dt { font-size:18px; font-weight:700 }
.event-facts dd { margin:0; color:var(--ink-3); font-size:16px }
.event-timeline { list-style:none; padding:0; margin:22px 0 0; display:grid; grid-template-columns:repeat(4,1fr); background:linear-gradient(transparent,rgba(251,247,238,.65)) }
.event-timeline li { position:relative; text-align:center; padding:0 5px }
.event-timeline li:not(:last-child)::after { content:"→"; position:absolute; left:calc(50% + 36px); right:calc(-50% + 36px); top:23px; border-top:1px solid var(--gold-line); color:var(--gold); line-height:0; text-align:right }
.timeline-icon { display:grid; place-items:center; width:48px; height:48px; margin:0 auto 7px; border:1px solid var(--gold); border-radius:50%; color:var(--gold); background:rgba(251,247,238,.6) }
.timeline-icon svg { width:27px; height:27px }
.event-timeline h3 { font-size:18px }
.event-timeline p { font-size:16px; color:var(--ink-3); margin-top:4px }

/* 独立插画卡：透明书卷与山水留在正文之后。 */
.daily-steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px }
.daily-step { min-height:175px; isolation:isolate }
.daily-step:not(:last-child)::after { content:"›"; width:auto; height:auto; border:0; right:-18px; bottom:40%; font:30px/1 var(--serif); color:var(--gold); opacity:1 }
.daily-step__copy { position:relative; z-index:1; display:flex; gap:10px; padding:18px 17px 55px }
.daily-step__no { flex:none; color:var(--gold); font:400 30px/1.1 var(--brush) }
.daily-step h3 { font-size:19px }
.daily-step p { margin-top:5px; font-size:16px; color:var(--ink-2); line-height:1.65; max-width:12em }
.daily-step__art { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none }
.daily-step__art img { position:absolute; width:100%; height:100%; object-fit:cover; mask-image:linear-gradient(180deg,transparent 38%,rgba(0,0,0,.15) 57%,#000 95%) }
.daily-step__art--river img { object-position:68% 80% }
.daily-step__art--pavilion img { object-position:100% 70% }
.daily-step__art--books img,.daily-step__art--brush img { width:88%; height:100%; right:-9%; bottom:-22%; object-fit:contain; mask-image:linear-gradient(180deg,transparent,#000 45%) }
.daily-step__art--brush img { width:115%; right:-25%; bottom:-27% }
.daily-page .demo-sec { padding-top:8px }

/* 可操作的示例题独立于真实活动。 */
.daily-demo { display:grid; grid-template-columns:158px minmax(0,1.08fr) minmax(0,1fr); overflow:hidden; background:rgba(251,247,238,.93) }
.daily-demo::before,.daily-demo::after { display:none }
.demo-rail { background:var(--dai-deep); color:var(--paper-card); padding:25px 17px }
.demo-rail h3 { font-size:25px; margin-bottom:22px; white-space:nowrap }
.demo-rail p { display:flex; align-items:center; gap:8px; font-size:16px; margin-top:16px }
.demo-rail>span { display:block; border-top:1px solid rgba(216,195,160,.4); margin-top:28px; padding-top:14px; font-size:16px; color:var(--gold-soft) }
.demo-question { position:relative; isolation:isolate; padding:24px; border-right:1px solid var(--gold-line); overflow:hidden }
.demo-tag { display:inline-block; border:1px solid var(--gold-line); background:var(--paper-2); color:var(--gold); font-size:16px; padding:2px 12px }
.demo-question h3 { font-size:24px; line-height:1.5; margin:18px 0 8px }
.demo-question>p { font-size:16px; color:var(--ink-2) }
.year-sequence { display:flex; align-items:flex-start; justify-content:space-between; gap:4px; margin:24px 0 18px }
.year-sequence div { text-align:center }
.year-sequence strong { display:grid; place-items:center; width:56px; height:62px; background:rgba(251,247,238,.95); border:1px solid var(--gold-line); font-size:24px; white-space:nowrap; line-height:1.2 }
.year-sequence span { display:block; margin-top:6px; font-size:16px; color:var(--ink-3) }
.year-sequence i { margin-top:18px; color:var(--gold); font-style:normal }
.demo-hint { position:relative; z-index:1; padding-top:12px; border-top:1px dashed var(--gold-line) }
.demo-landscape { position:absolute; z-index:-1; bottom:0; left:0; width:100%; height:180px; object-fit:cover; object-position:70% center; opacity:.5; mask-image:linear-gradient(transparent,#000) }
.demo-answer { padding:20px 24px; min-width:0 }
.demo-answer fieldset { border:0; padding:0; margin:0; min-width:0 }
.demo-answer legend { width:100%; font-size:22px; font-weight:700; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; gap:8px }
.demo-answer legend>span { font-size:16px; font-weight:400; color:var(--gold) }
.demo-option { position:relative; display:flex; align-items:center; gap:12px; padding:5px 12px; min-height:38px; margin-bottom:6px; border:1px solid var(--gold-soft); background:var(--paper); border-radius:3px; cursor:pointer; transition:border-color .2s,background-color .2s }
.demo-option input { width:18px; height:18px; margin:0; accent-color:var(--cinnabar); cursor:pointer }
.demo-option:has(input:checked) { background:var(--paper-2); border-color:var(--cinnabar) }
.demo-option:has(input:focus-visible) { outline:3px solid var(--cinnabar); outline-offset:2px }
.demo-option:hover { border-color:var(--gold) }
.option-letter { color:var(--gold); font-size:16px }
.demo-answer .btn { width:100%; font-size:16px; min-height:42px; padding:0 14px }
.demo-check { margin-top:4px }
.demo-check:disabled { cursor:default; color:var(--ink-3); background:transparent; border-color:var(--gold-line); box-shadow:none }
.demo-result { margin:8px 0 10px; font-size:16px; color:var(--ink-2); line-height:1.65 }
.demo-result.is-checked { padding:8px 10px; background:var(--paper-2); border-left:3px solid var(--gold) }
.demo-answer .demo-disclaimer { font-size:16px; color:var(--ink-3); margin-top:8px }
.no-js .demo-check,.no-js #demo-result { display:none }

.daily-page .records-sec { padding-top:0; padding-bottom:16px }
.records-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px }
.record-card { display:flex; gap:16px; padding:22px 24px; overflow:hidden; isolation:isolate }
.record-card h2 { font:400 29px/1.3 var(--brush) }
.record-card__copy { position:relative; z-index:1; max-width:76% }
.record-card p { font-size:16px; color:var(--ink-2); max-width:23ch }
.record-card .record-subtitle { margin:4px 0 8px }
.record-card .btn { margin-top:12px; min-height:40px; font-size:16px; padding:0 18px }
.record-card__art { position:absolute; bottom:0; right:0; z-index:-1; pointer-events:none }
.record-card__art--books { width:51%; height:82%; object-fit:contain; object-position:right bottom; right:-5%; bottom:-8%; mask-image:linear-gradient(90deg,transparent,#000 48%) }
.record-card__art--pavilion { width:55%; height:100%; object-fit:cover; object-position:right center; mask-image:linear-gradient(90deg,transparent,#000 75%) }
.daily-page .notice-sec { padding-top:4px; padding-bottom:0 }
.notice-sec .sec-head { margin-bottom:12px }
.notice-list { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:20px 8px; margin:0; background:rgba(251,247,238,.88) }
.notice-list li { display:flex; gap:13px; padding:0 20px }
.notice-list li+li { border-left:1px solid var(--gold-line) }
.notice-list h3 { font-size:18px; line-height:1.5 }
.notice-list p { font-size:16px; color:var(--ink-3); margin-top:5px }
.notice-list .icon-ink { width:32px; height:32px }
.daily-page .end-band { padding:36px 16px 30px }
.daily-end-art { position:absolute; z-index:-2; inset:-30px 0 0; width:100%; height:calc(100% + 60px); object-fit:cover; object-position:center 72%; mask-image:linear-gradient(transparent,#000 24%) }
.daily-page .end-band::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at center,rgba(251,247,238,.96),rgba(251,247,238,.65) 38%,transparent 70%) }
.daily-page .end-band h2 { font-size:38px }
.daily-page .end-band p { margin-bottom:16px; color:var(--ink-2) }

@media (max-width:1100px) and (min-width:768px) {
 .current-scroll.card { padding-left:70px; padding-right:55px }
 .current-state { position:static; justify-content:center; margin:-6px 0 12px }
 .daily-step__copy { gap:7px; padding:16px 12px 65px }
 .daily-step__no { font-size:25px }
 .daily-demo { grid-template-columns:146px minmax(0,1fr) minmax(0,1fr) }
 .demo-rail { padding:24px 12px }
 .demo-rail p { gap:5px }
 .demo-rail .daily-icon { width:18px }
 .demo-question,.demo-answer { padding:20px 18px }
 .year-sequence strong { width:48px; font-size:22px }
 .notice-list li { padding:0 12px; gap:9px }
 .notice-list .icon-ink { width:26px; height:26px }
}
@media (max-width:899px) {
 .daily-demo { grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
 .demo-rail { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; padding:16px 22px }
 .demo-rail h3,.demo-rail p { margin:0 }
 .demo-rail>span { border:0; padding:0; margin:0 0 0 auto }
 .demo-rail>span br { display:none }
 .daily-steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px }
 .daily-step:nth-child(2)::after { display:none }
 .record-card { padding:20px 18px; gap:10px }
 .record-card>.icon-ink { width:30px }
}
@media (max-width:767px) {
 .daily-page main::before { opacity:.15 }
 .hero__inner { min-height:470px; padding-top:174px; padding-bottom:62px; align-items:flex-end }
 .hero__scene { inset:0 0 -24px }
 .hero__art img,.hero__water img { object-position:68% top }
 .hero__art { mask-image:linear-gradient(#000 50%,rgba(0,0,0,.4) 88%) }
 .hero__water { mask-image:radial-gradient(45% 18% at 48% 80%,#000 35%,transparent) }
 .water-glimmer { left:20%; top:66%; width:60%; height:26% }
 .daily-cloud { width:150%; height:63%; right:-30%; top:-12%; opacity:.95 }
 .hero__text::before { inset:-35px -30px; background:radial-gradient(ellipse,rgba(251,247,238,.96),rgba(251,247,238,.78) 46%,transparent 74%) }
 .hero__text h1 { font-size:clamp(64px,17vw,94px) }
 .hero__eyebrow { font-size:17px; margin-bottom:6px }
 .hero__desc { font-size:19px; letter-spacing:.03em; margin:12px 0 20px }
 .current-sec { margin-top:-23px }
 .current-sec .wrap { padding:0 6px }
 .current-scroll.card { padding:68px 32px 66px }
 .current-scroll__art { display:none }
 /* 九宫格只伸展轴身，中心用宣纸色，避免把竹叶纵向拉长。 */
 .current-scroll__frame { display:block; position:absolute; inset:0; z-index:-1; border:26px solid transparent; border-image:url('../img/art/daily/scroll-v2.webp') 150 100 150 100 / 62px 26px / 0 stretch; background:var(--paper-card); background-clip:padding-box; pointer-events:none }
 .current-scroll .sec-head h2 { font-size:32px }
 .current-scroll .sec-head p { max-width:16em; margin-left:auto; margin-right:auto }
 .current-state { position:static; justify-content:center; margin:0 0 14px }
 .event-facts { grid-template-columns:1fr; padding:0 12px; background:rgba(251,247,238,.86) }
 .event-facts>div { grid-template-columns:27px 1fr auto; align-items:center; justify-content:stretch; padding:12px 0; gap:9px }
 .event-facts>div+div { border-left:0; border-top:1px solid var(--gold-line) }
 .event-facts svg { grid-row:auto; width:25px; height:25px }
 .event-facts dt { font-size:17px }
 .event-timeline { grid-template-columns:repeat(2,1fr); gap:24px 12px; margin-top:22px }
 .event-timeline li:nth-child(2)::after { display:none }
 .event-timeline li { padding:0 }
 .event-timeline p { line-height:1.6 }
 .daily-page .sec { padding:24px 0 }
 .daily-page .sec-head h2 { gap:8px; font-size:28px; letter-spacing:.01em }
 .daily-page .sec-head h2::before,.daily-page .sec-head h2::after { width:18px }
 .daily-page .sec-head { margin-bottom:18px }
 .daily-step { min-height:216px }
 .daily-step__copy { flex-direction:column; gap:7px; padding:17px 16px 66px }
 .daily-step__art--books img,.daily-step__art--brush img { width:125%; height:76%; right:-20%; bottom:-14% }
 .daily-demo { grid-template-columns:minmax(0,1fr) }
 .demo-question { border-right:0; border-bottom:1px solid var(--gold-line) }
 .demo-question,.demo-answer { padding:24px 22px }
 .demo-landscape { opacity:.23 }
 .demo-rail { padding:16px 22px; gap:10px 18px }
 .demo-rail h3 { width:100%; font-size:26px }
 .demo-rail>span { width:100%; margin:0 }
 .year-sequence { display:grid; grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr); gap:4px }
 .year-sequence strong { width:100%; max-width:70px; margin:auto }
 .demo-option { min-height:44px }
 .demo-answer .btn { min-height:46px }
 .records-grid { grid-template-columns:minmax(0,1fr); gap:18px }
 .record-card { min-height:234px }
 .record-card__copy { max-width:85% }
 .record-card__art--books { opacity:.65 }
 .record-card__art--pavilion { mask-image:linear-gradient(90deg,transparent,#000); opacity:.7 }
 .notice-list { grid-template-columns:minmax(0,1fr); padding:4px 22px }
 .notice-list li { padding:20px 0; gap:16px }
 .notice-list li+li { border-left:0; border-top:1px solid var(--gold-line) }
 .notice-list h3 br { display:none }
 .daily-page .end-band { padding-top:34px; padding-bottom:36px }
 .daily-end-art { object-position:68% center; opacity:.6 }
 .daily-page .end-band h2 { font-size:32px }
 .daily-page .site-footer { padding-bottom:78px }
}
@media (max-width:420px) {
 .daily-steps { gap:14px }
 .daily-step:not(:last-child)::after { right:-12px; font-size:23px }
 .daily-step h3 { font-size:18px }
 .daily-step__copy { padding-left:13px; padding-right:13px }
 .event-facts>div { grid-template-columns:24px 1fr; gap:2px 10px }
 .event-facts svg { grid-row:span 2 }
 .event-facts dd { grid-column:2 }
 .current-scroll.card { padding-left:30px; padding-right:26px }
 .daily-page .sec-head h2 { font-size:26px }
 .record-card h2 { font-size:28px }
 .year-sequence strong { font-size:22px }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
 .daily-step,.record-card { transition:box-shadow .25s ease,transform .25s ease }
 .daily-step:hover,.record-card:hover { transform:translateY(-3px); box-shadow:0 8px 22px rgba(70,50,20,.12) }
}
@media (prefers-reduced-motion:reduce) { .daily-page .reveal,.daily-page .btn,.daily-page .demo-option { transition:none } }
html.motion-off .daily-page .btn,html.motion-off .daily-page .demo-option,html.motion-off .daily-page .card { transition:none }
html.motion-off .daily-page .card:hover { transform:none }
html.no-js .daily-page .mist,html.no-js .daily-page .daily-cloud__art,html.no-js .daily-page .water-glimmer { animation:none }
html.no-js .daily-page .water-glimmer::after { animation:none }
html.no-js .daily-cloud__art img { filter:none }
html.no-js .daily-page .hero__water,html.no-js .daily-page .motion-toggle { display:none }
