/* Dongjing Meng Hua Lu — Entry 21 / Song-book aesthetics pilot */
.dj21-page{
  --dj21-paper:#efe8dc;--dj21-paper-warm:#e4dcca;--dj21-ink:#1a1814;--dj21-soft:#575143;
  --dj21-celadon:#bbae95;--dj21-celadon-deep:#8a7e65;--dj21-wood:#2e2a24;
  --dj21-cinnabar:#a23521;--dj21-rule:#d2c7b2;--dj21-muted:#81765f;--dj21-night:#171612;--dj21-night-paper:#23201b;
  background:var(--dj21-paper);color:var(--dj21-ink)
}
.dj21-page .dj-entry-title h1{font-size:clamp(4rem,8vw,8.5rem);line-height:.86;letter-spacing:.055em}
.dj21-page .dj-entry-title h2,.dj21-clock h2,.dj21-paper-field h2,.dj21-inventory h2,.dj21-scroll-witness h2,.dj21-thesis strong,.dj21-limit strong,.dj21-variants h3,.dj21-exit strong{
  font-family:var(--reading-display-latin,"Galok Bagnard","Galok Gambetta",Georgia,serif);font-weight:400;font-synthesis:none
}
.dj21-page .dj-entry-deck{max-width:62ch}
.dj21-hero{padding-bottom:clamp(70px,8vw,118px)}
.dj21-design-key{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:660px;margin-top:38px;border-top:1px solid var(--dj21-rule);border-bottom:1px solid var(--dj21-rule)}
.dj21-design-key span{display:grid;gap:5px;padding:14px 14px 13px;border-right:1px solid var(--dj21-rule)}
.dj21-design-key span:last-child{border-right:0}
.dj21-design-key b{font-family:var(--reading-modern-cjk);font-size:.86rem;font-weight:400}
.dj21-design-key small{color:var(--dj21-muted);font:700 .75rem/1.2 var(--dj-mono);letter-spacing:.1em}

.dj21-source{position:relative}
.dj21-paper{position:relative;min-height:520px;overflow:hidden;background:
  linear-gradient(rgba(26,24,20,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(26,24,20,.025) 1px,transparent 1px),
  var(--dj21-paper-warm);background-size:100% 28px,28px 100%,auto;border:1px solid #bfb39a}
.dj21-paper::before,.dj21-paper::after{content:"";position:absolute;top:7%;bottom:7%;width:1px;background:rgba(26,24,20,.18)}
.dj21-paper::before{left:10%}.dj21-paper::after{right:10%}
.dj21-paper .dj-columns{height:500px;padding:46px 14% 44px;gap:clamp(15px,2vw,28px);justify-content:flex-end}
.dj21-paper .dj-columns span{font-size:clamp(1rem,1.4vw,1.32rem);letter-spacing:.08em}
.dj21-title-slip{position:absolute;right:4.5%;top:10%;z-index:2;writing-mode:vertical-rl;padding:12px 8px;border:1px solid rgba(26,24,20,.44);background:rgba(239,232,220,.78);font-family:var(--reading-modern-cjk);font-size:.88rem;line-height:1.8;letter-spacing:.08em}
.dj21-seal{position:absolute;left:5%;bottom:8%;display:grid;place-items:center;width:34px;aspect-ratio:1;border:1px solid var(--dj21-cinnabar);color:var(--dj21-cinnabar);font-family:var(--reading-modern-cjk);font-size:.75rem}
.dj21-source.is-loaded .dj21-paper{opacity:.18;transition:opacity 220ms ease}
.dj21-source img{filter:saturate(.6) contrast(.94)}

.dj21-clock{position:relative;margin-left:calc((100vw - 100%) / -2);margin-right:calc((100vw - 100%) / -2);display:grid;grid-template-columns:minmax(150px,240px) minmax(0,1fr);gap:clamp(34px,6vw,100px);padding:clamp(82px,8vw,130px) max(32px,calc((100vw - min(1480px,calc(100vw - 64px))) / 2));background:var(--dj21-night);color:#e9e1d2;border-top:1px solid #39342c;border-bottom:1px solid #39342c}
.dj21-banxin{position:sticky;top:92px;align-self:start;min-height:530px;display:flex;flex-direction:column;align-items:center;gap:18px;padding:22px 12px;border-left:1px solid #4c463b;border-right:1px solid #4c463b;color:#d7cdb8}
.dj21-banxin-book{writing-mode:vertical-rl;font-family:var(--reading-modern-cjk);font-size:1rem;letter-spacing:.18em}
.dj21-fishtail{margin:10px 0;color:var(--dj21-celadon);font-size:1.3rem}
.dj21-banxin strong{writing-mode:vertical-rl;font-family:var(--reading-modern-cjk);font-size:.86rem;font-weight:400;letter-spacing:.13em}
.dj21-banxin-time{margin-top:auto;color:#dad0bb;font-family:var(--reading-modern-cjk);font-size:1.4rem}
.dj21-banxin small{color:#95876c;font:700 .75rem/1 var(--dj-mono);letter-spacing:.12em}
.dj21-clock-content{min-width:0}
.dj21-clock .dj-v3-section-head{border-color:#4a4439}
.dj21-clock .dj-v3-section-head small{color:#cbbfa8}
.dj21-clock .dj-v3-section-head p{color:#b0a288}
.dj21-phases{margin-top:34px;border-top:1px solid #4b463a}
.dj21-phase{display:grid;grid-template-columns:62px minmax(0,1fr);gap:22px;min-height:180px;padding:28px 0;border-bottom:1px solid #39342c;opacity:.48;transition:opacity 180ms ease,transform 180ms ease}
.dj21-phase.is-active{opacity:1;transform:translateX(4px)}
.dj21-phase>span{color:#92856a;font:700 .75rem/1.2 var(--dj-mono)}
.dj21-phase small{display:block;color:#b4a78e;font:700 .75rem/1.2 var(--dj-mono);letter-spacing:.1em}
.dj21-phase strong{display:block;max-width:30ch;margin:20px 0 10px;color:#ede7d9;font-family:var(--reading-modern-cjk);font-size:clamp(1.35rem,2.5vw,2.7rem);font-weight:400;line-height:1.32;letter-spacing:.04em}
.dj21-phase p{max-width:62ch;margin:0;color:#b0a288;font-family:var(--dj-serif);font-size:.93rem;line-height:1.58}
.dj21-phase p span{font-family:var(--reading-modern-cjk)}
.dj21-phase.is-reset strong{font-family:var(--reading-display-latin);font-size:clamp(1.7rem,3vw,3.3rem);line-height:.95;letter-spacing:-.03em;color:#cbbfa8}

.dj21-paper-field{margin-left:calc((100vw - 100%) / -2);margin-right:calc((100vw - 100%) / -2);padding:clamp(90px,9vw,150px) max(32px,calc((100vw - min(1480px,calc(100vw - 64px))) / 2));background:var(--dj21-paper);border-bottom:1px solid var(--dj21-rule)}
.dj21-prepared-layout{display:grid;grid-template-columns:minmax(220px,.6fr) minmax(0,1fr);gap:clamp(40px,8vw,130px);align-items:start;margin-top:58px}
.dj21-vertical-quote{min-height:510px;display:flex;flex-direction:row-reverse;justify-content:center;gap:clamp(18px,2.8vw,46px);margin:0;padding:48px clamp(24px,4vw,64px);border:1px solid var(--dj21-rule);background:var(--dj21-paper-warm)}
.dj21-vertical-quote span{writing-mode:vertical-rl;font-family:var(--reading-modern-cjk);font-size:clamp(1.2rem,2.1vw,2.2rem);font-weight:400;line-height:1.7;letter-spacing:.12em}
.dj21-thesis{padding-top:10px}
.dj21-thesis>small{color:var(--dj21-cinnabar);font:760 .75rem/1.2 var(--dj-mono);letter-spacing:.12em}
.dj21-thesis strong{display:block;margin:38px 0 28px;font-size:clamp(3.3rem,6.8vw,8rem);line-height:.79;letter-spacing:-.055em}
.dj21-thesis strong em{color:var(--dj21-celadon-deep);font-style:normal}
.dj21-thesis p{max-width:62ch;margin:0;color:var(--dj21-soft);font-family:var(--dj-serif);font-size:1rem;line-height:1.7}
.dj21-thesis p b{font-family:var(--reading-modern-cjk);font-weight:400;color:var(--dj21-ink)}
.dj21-specialists{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:72px;border-top:1px solid var(--dj21-ink);border-bottom:1px solid var(--dj21-rule)}
.dj21-specialist-head{grid-column:1/-1;display:grid;grid-template-columns:3fr 2fr;border-bottom:1px solid var(--dj21-rule)}
.dj21-specialist-head span{padding:12px 14px;color:var(--dj21-muted);font:700 .75rem/1.3 var(--dj-mono);letter-spacing:.09em}
.dj21-specialist-head span+span{border-left:1px solid var(--dj21-rule)}
.dj21-specialists article{min-height:165px;padding:20px 16px;border-right:1px solid var(--dj21-rule)}
.dj21-specialists article:last-child{border-right:0}
.dj21-specialists small{color:var(--dj21-cinnabar);font:700 .75rem/1.2 var(--dj-mono);letter-spacing:.08em}
.dj21-specialists b{display:block;margin:34px 0 12px;font-family:var(--reading-modern-cjk);font-size:clamp(1.1rem,1.8vw,1.75rem);font-weight:400;line-height:1.2}
.dj21-specialists article>span{color:var(--dj21-muted);font-family:var(--dj-serif);font-size:.78rem;line-height:1.4}

.dj21-inventory{padding:clamp(92px,9vw,150px) 0}
.dj21-night-sheets{display:grid;grid-template-columns:1fr 1fr;margin-top:48px;border-top:1px solid var(--dj21-ink);border-bottom:1px solid var(--dj21-ink)}
.dj21-night-sheets article{min-height:420px;padding:28px 30px 26px;background:var(--dj21-paper-warm)}
.dj21-night-sheets article+article{border-left:1px solid var(--dj21-ink)}
.dj21-night-sheets header{display:flex;justify-content:space-between;gap:18px;padding-bottom:18px;border-bottom:1px solid var(--dj21-rule)}
.dj21-night-sheets header span{font-family:var(--reading-modern-cjk);font-size:1.1rem}
.dj21-night-sheets header small{color:var(--dj21-muted);font:700 .75rem/1.3 var(--dj-mono);letter-spacing:.08em;text-align:right}
.dj21-night-sheets p{max-width:22ch;margin:58px 0!important;font-family:var(--reading-modern-cjk)!important;font-size:clamp(1.45rem,2.5vw,2.9rem)!important;line-height:1.55!important;letter-spacing:.055em}
.dj21-night-sheets footer{margin-top:auto;padding-top:18px;border-top:1px solid var(--dj21-rule);color:var(--dj21-muted);font-family:var(--dj-serif);font-size:.82rem;line-height:1.5}

.dj21-scroll-witness{margin-left:calc((100vw - 100%) / -2);margin-right:calc((100vw - 100%) / -2);display:grid;grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);background:#e8e1d1;border-top:1px solid var(--dj21-ink);border-bottom:1px solid var(--dj21-ink)}
.dj21-scroll-copy{padding:clamp(52px,6vw,92px) clamp(28px,5vw,80px)}
.dj21-scroll-copy>small{color:var(--dj21-cinnabar);font:760 .75rem/1.2 var(--dj-mono);letter-spacing:.1em}
.dj21-scroll-copy h2{margin:46px 0 24px;font-size:clamp(2.8rem,5.2vw,6.4rem);line-height:.85;letter-spacing:-.05em}
.dj21-scroll-copy p{max-width:55ch;color:#645c4d;font-family:var(--dj-serif);line-height:1.68}
.dj21-scroll-copy div{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.dj21-scroll-copy a{padding:10px 12px;border:1px solid #9e9175;color:var(--dj21-ink);font-size:.75rem;text-decoration:none}
.dj21-scroll-witness figure{position:relative;min-height:580px;margin:0;overflow:hidden;background:var(--dj21-night)}
.dj21-scroll-witness img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.45) sepia(.12) contrast(.9);opacity:0}
.dj21-scroll-witness figure.is-loaded img{opacity:.88;transition:opacity 220ms ease}
.dj21-scroll-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:18px;background:linear-gradient(135deg,#2d2a23,#171612)}
.dj21-scroll-fallback span{display:grid;place-items:center;width:72px;aspect-ratio:1;border:1px solid #706755;color:#ccc0a9;font-family:var(--reading-modern-cjk);font-size:1.4rem}
.dj21-scroll-witness figcaption{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;padding-top:10px;border-top:1px solid rgba(239,232,220,.45);color:#efe8dc;font:650 .75rem/1.3 var(--dj-mono);letter-spacing:.07em}

.dj21-page .dj-entry-body{padding-top:clamp(90px,9vw,148px)}
.dj21-limit{margin:38px 0 66px;padding:32px;border-top:5px solid var(--dj21-celadon-deep);border-bottom:1px solid var(--dj21-rule);background:#eae2d4}
.dj21-limit small{color:var(--dj21-cinnabar);font:760 .75rem/1.2 var(--dj-mono);letter-spacing:.1em}
.dj21-limit strong{display:block;margin:38px 0 17px;font-size:clamp(2.8rem,5.4vw,6rem);line-height:.84;letter-spacing:-.045em}
.dj21-limit p{max-width:70ch!important;margin:0!important;color:var(--dj21-soft);font-family:var(--dj-serif)!important;line-height:1.66!important}
.dj21-limit p span{font-family:var(--reading-modern-cjk)}
.dj21-variants{margin:42px 0 42px;border-top:5px solid var(--dj21-wood)}
.dj21-variants>header{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:end;padding:26px 0;border-bottom:1px solid var(--dj21-rule)}
.dj21-variants>header small{color:var(--dj21-cinnabar);font:760 .75rem/1.2 var(--dj-mono);letter-spacing:.1em}
.dj21-variants h3{margin:0;font-size:clamp(2.1rem,4.1vw,4.8rem);line-height:.9;letter-spacing:-.04em}
.dj21-variant-grid{display:grid;grid-template-columns:1fr 48px 1fr}
.dj21-variant-grid>div,.dj21-variant-grid>i{border-bottom:1px solid var(--dj21-rule)}
.dj21-variant-grid>div{padding:22px 18px}
.dj21-variant-grid>i{display:grid;place-items:center;border-left:1px solid var(--dj21-rule);border-right:1px solid var(--dj21-rule);color:var(--dj21-cinnabar);font-style:normal}
.dj21-variant-grid small{display:block;color:var(--dj21-muted);font:700 .75rem/1.2 var(--dj-mono);letter-spacing:.08em}
.dj21-variant-grid b{display:block;margin-top:14px;font-family:var(--reading-modern-cjk);font-size:clamp(1.2rem,2.2vw,2.3rem);font-weight:400}
.dj21-variants>p{max-width:70ch;margin:22px 0 26px!important;color:var(--dj21-soft);font-family:var(--dj-serif)!important;line-height:1.62!important}
.dj21-variants footer{display:flex;gap:8px;flex-wrap:wrap}
.dj21-variants footer a{padding:9px 11px;border:1px solid var(--dj21-rule);font-size:.75rem;text-decoration:none}

.dj21-exit{margin-left:calc((100vw - 100%) / -2);margin-right:calc((100vw - 100%) / -2);padding:clamp(90px,10vw,160px) max(32px,calc((100vw - min(1480px,calc(100vw - 64px))) / 2));background:var(--dj21-wood);color:#efe8dc;border-top:1px solid #171612;border-bottom:1px solid #171612}
.dj21-exit>small{color:#cbc0a8;font:760 .75rem/1.2 var(--dj-mono);letter-spacing:.1em}
.dj21-exit>strong{display:block;max-width:11ch;margin:48px 0 26px;font-size:clamp(3.4rem,7vw,8rem);line-height:.8;letter-spacing:-.055em}
.dj21-exit>p{max-width:60ch;color:#c2b69d;font-family:var(--dj-serif);line-height:1.62}
.dj21-exit>div{display:flex;justify-content:space-between;gap:28px;align-items:end;margin-top:52px;padding-top:18px;border-top:1px solid #716755}
.dj21-exit>div span{font-family:var(--reading-display-mixed);font-size:clamp(1.3rem,2.2vw,2.5rem)}
.dj21-exit>div b{font-weight:400}
.dj21-exit>div em{color:#aea086;font-family:var(--dj-serif);font-size:.9rem;font-style:normal}

@media(max-width:1050px){
  .dj21-clock{grid-template-columns:110px minmax(0,1fr);gap:38px}
  .dj21-banxin{min-height:450px}
  .dj21-prepared-layout{grid-template-columns:.72fr 1.28fr;gap:42px}
  .dj21-specialists{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dj21-specialist-head{display:none}
  .dj21-specialists article:nth-child(even){border-right:0}
  .dj21-scroll-witness{grid-template-columns:1fr}
  .dj21-scroll-witness figure{min-height:460px}
}
@media(max-width:760px){
  .dj21-page .dj-entry-title h1{font-size:clamp(3.05rem,14vw,5rem)}
  .dj21-design-key{grid-template-columns:1fr}
  .dj21-design-key span{border-right:0;border-bottom:1px solid var(--dj21-rule)}
  .dj21-design-key span:last-child{border-bottom:0}
  .dj21-paper{min-height:420px}
  .dj21-paper .dj-columns{height:400px;padding-left:12%;padding-right:18%}
  .dj21-title-slip{right:3%;top:8%}
  .dj21-clock{grid-template-columns:1fr;padding-left:20px;padding-right:20px}
  .dj21-banxin{position:relative;top:auto;min-height:0;display:grid;grid-template-columns:auto 28px 1fr auto auto;align-items:center;padding:14px 12px;border:1px solid #4c463b}
  .dj21-banxin-book,.dj21-banxin strong{writing-mode:horizontal-tb}
  .dj21-banxin-time{margin:0;font-size:1rem}
  .dj21-fishtail{margin:0}
  .dj21-phase{grid-template-columns:40px 1fr;min-height:150px}
  .dj21-prepared-layout{grid-template-columns:1fr}
  .dj21-vertical-quote{min-height:380px}
  .dj21-thesis strong{font-size:clamp(3rem,15vw,5.2rem)}
  .dj21-specialists{grid-template-columns:1fr}
  .dj21-specialists article{border-right:0}
  .dj21-night-sheets{grid-template-columns:1fr}
  .dj21-night-sheets article+article{border-left:0;border-top:1px solid var(--dj21-ink)}
  .dj21-night-sheets article{min-height:340px;padding:24px 20px}
  .dj21-night-sheets p{margin:42px 0!important;font-size:clamp(1.25rem,6vw,2rem)!important}
  .dj21-scroll-copy{padding-left:20px;padding-right:20px}
  .dj21-scroll-witness figure{min-height:350px}
  .dj21-limit{padding:25px 20px}
  .dj21-variants>header{grid-template-columns:1fr}
  .dj21-variant-grid{grid-template-columns:1fr 34px 1fr}
  .dj21-variant-grid>div{padding:16px 9px}
  .dj21-variant-grid b{font-size:clamp(1rem,5vw,1.6rem)}
  .dj21-exit{padding-left:20px;padding-right:20px}
  .dj21-exit>div{display:grid;grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .dj21-page *{scroll-behavior:auto!important}
  .dj21-phase{transition:none!important;transform:none!important;opacity:1}
  .dj21-source.is-loaded .dj21-paper,.dj21-scroll-witness figure.is-loaded img{transition:none}
}