.site-home {
  --paper: #f8f6ef;
  --letter: #27261f;
  --rule: #c2bbab;
  --cinnabar: #984433;
  --song: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", SimSun, serif;
  background: var(--paper);
  color: var(--letter);
}
.site-home .site-header {
  margin: 0 5.5%; padding: 18px 0; height: auto;
  border-bottom: 3px double #706d60;
}
.site-header .site-brand { font: bold clamp(27px, 2.8vw, 42px)/1.15 var(--song); letter-spacing: -.035em; }
.site-header .brand-seal { letter-spacing: 0; }
.snow-issue { padding: 0 5.5% clamp(32px, 4vw, 66px); }
.snow-heading { display: flex; gap: 24px; align-items: end; justify-content: space-between; padding: clamp(25px,3.2vw,51px) 0 22px; }
.issue-byline, .snow-reading h2 { font: 13px/1.6 var(--song); letter-spacing: .10em; margin: 0; }
.issue-byline { color: #85402f; }
.snow-heading h1 { font: 600 clamp(53px,6.8vw,114px)/1.22 var(--song); letter-spacing: -.06em; margin: 7px 0 0 -.035em; }
.snow-opening { font: 18px/1.7 var(--song); border-left: 1px solid #a55a44; padding: 0 0 0 18px; margin: 0 .4em 7px 0; }
.snow-scroll { margin: 0; }
.painting-window { height: clamp(225px,23vw,380px); overflow: hidden; touch-action: pan-y; cursor: grab; background: #d8cebf; }
.painting-window:active { cursor: grabbing; }
.painting-window img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--view, 71%) center; user-select: none; }
.snow-scroll figcaption { display: flex; gap: 14px; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); color: #625d50; font: 12px/1.6 var(--song); }
.snow-scroll figcaption a:hover,.read-original:hover { color: var(--cinnabar); text-decoration: underline; }
.snow-scroll label { display: flex; gap: 12px; align-items: center; }
#scroll-position { width: clamp(68px,10vw,150px); height: 26px; cursor: ew-resize; accent-color: #765141; }
.snow-reading { display: grid; grid-template-columns: 1.5fr 1fr; gap: 8%; padding-top: clamp(26px,3vw,50px); }
.snow-reading h2 { color: #6c6657; }
.snow-line { max-width: 23em; margin: .55em 0 .7em; font: 400 clamp(20px,2vw,32px)/1.85 var(--song); letter-spacing: .02em; }
#du-word { background: transparent; font: inherit; padding: 0 .08em; border: 0; border-bottom: 1px dotted var(--cinnabar); color: var(--cinnabar); }
#du-note:not([hidden]) { display: flex; align-items: start; gap: 15px; border-left: 2px solid #ac684c; padding: 6px 0 6px 15px; margin: 8px 0 18px; }
#du-note>b { font: 36px/1.2 var(--song); color: var(--cinnabar); }
#du-note strong { font: bold 16px/1.5 var(--song); }
#du-note p { margin: 5px 0 0; font: 15px/1.8 var(--song); }
.read-original { font: 13px/1.6 var(--song); color: #823c2e; }
.other-pages { border-left: 1px solid var(--rule); padding-left: 8%; }
.other-pages h2 { padding-bottom: 6px; }
.other-pages button { width: 100%; display: flex; align-items: baseline; gap: 12px; padding: 9px 0; text-align: left; background: transparent; border: 0; border-bottom: 1px solid #d7d1c4; font: 18px/1.5 var(--song); }
.other-pages button:hover { color: var(--cinnabar); }
.other-pages small { color: #756c60; font: 12px var(--song); }
.other-pages button span { margin-left: auto; }
#yi-reading { max-width: 900px; width: 92vw; }
#yi-reading .cover-story h2 { font: 38px/1.3 var(--song); margin: .35em 0; }
@media(max-width: 650px) {
  .site-home .site-header { padding: 16px 0; gap: 12px; }
  .site-header nav { gap: 14px; }
  .snow-heading { flex-wrap: wrap; gap: 8px; padding: 24px 0 16px; }
  .snow-opening { border: 0; padding: 0; margin: 0; font-size: 15px; }
  .snow-opening br { display: none; }
  .snow-heading>div { width: 100%; }
  .painting-window { height: clamp(164px,42vw,245px); }
  .snow-scroll figcaption { font-size: 11px; gap: 5px; }
  .snow-scroll label { gap: 3px; }
  .snow-reading { grid-template-columns: 1fr; gap: 26px; }
  .other-pages { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--rule); }
}