:root{color-scheme:light;--ink:#292f29;--muted:#626858;--rule:#bcbeb0;--serif:Georgia,"Songti SC","STSong","SimSun",serif}*{box-sizing:border-box}body{margin:0;background:#eae8df;color:var(--ink);font:16px/1.7 "Microsoft YaHei",sans-serif}main,header{max-width:1160px;width:91%;margin:auto}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule);padding:23px 0 17px}header span,.shelf,.folio,.range,.note,.stamp{font-size:12px;letter-spacing:.12em}a{color:inherit;text-decoration:none}.brand{font:600 23px var(--serif);letter-spacing:.12em}nav,#tabs{display:flex;align-items:center;gap:10px}nav{margin:25px 0;flex-wrap:wrap}.shelf{margin-right:12px;color:var(--muted)}#tabs{flex-wrap:wrap}#tabs a{padding:6px 14px;border:1px solid #bcbcaf;border-radius:2px;font:15px Georgia,serif}#tabs a[aria-current=page]{color:white;background:#334c3e;border-color:#334c3e}article{background:#fffcf2;border:1px solid #cccabd;box-shadow:2px 6px 18px #393f3211;--accent:#925242;--wash:#edddc9}.spread{display:grid;grid-template-columns:1.18fr 1fr;padding:clamp(25px,4.8vw,68px);gap:5.5%;align-items:center;min-height:455px}.range{color:var(--accent);font-weight:bold}.writing h1{font:600 clamp(37px,4.5vw,66px)/1.22 var(--serif);letter-spacing:-.045em;margin:22px 0}.writing p{font:19px/1.95 var(--serif);margin:.65em 0}.writing p:first-child{font-weight:bold}.sign{text-align:right;font:italic 25px var(--serif);margin:12px 12px 0}.folio{display:flex;justify-content:space-between;margin:0 5%;padding:13px 0;border-top:1px solid #c8c7b7;color:var(--muted)}aside{position:relative;color:var(--accent);background:var(--wash);padding:clamp(20px,3vw,44px);min-height:300px;display:flex;flex-direction:column;justify-content:center}.stamp{display:block;margin:0 0 28px}.quote{margin:0;font:600 clamp(25px,3.4vw,44px)/1.65 var(--serif)}.note{margin-top:20px;color:var(--muted)}.letterpress{border:5px double var(--accent);transform:rotate(1deg)}.calendar{background:repeating-linear-gradient(transparent 0 38px,#31554415 38px 39px),var(--wash);border-top:7px solid var(--accent);transform:rotate(-1deg)}.numbers{font:56px/1 Georgia,serif;letter-spacing:-.05em}.date-row{display:flex;gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid #8fa89e}.clock{border-radius:47% 47% 2px 2px;text-align:center}.clock .numbers{font-size:clamp(50px,5vw,70px)}.photo{padding:14px 14px 9px;background:#faf8eb;transform:rotate(-2deg);border:1px solid #ccc8b8;box-shadow:0 4px 8px #3535221a}.photo button{background:none;padding:0;border:0;cursor:zoom-in}.photo img{width:100%;display:block;max-height:300px;object-fit:contain;background:#292e26}.photo .note{margin:10px 0 3px}.turn{display:flex;justify-content:space-between;gap:10px;padding:22px 0 45px}.turn a{color:#375044;font-size:15px;text-decoration:underline;text-underline-offset:5px}.turn a[hidden]{display:none}#next{margin-left:auto}dialog{border:0;max-width:90vw;background:#fffcf2}dialog img{display:block;width:min(65vw,430px)}dialog button{display:block;margin:0 0 12px auto}dialog::backdrop{background:#18221cce}a:focus-visible,button:focus-visible{outline:3px solid #947134}@media(max-width:700px){header{padding:15px 0}.brand{font-size:19px}.spread{grid-template-columns:1fr;gap:24px;padding:26px 24px}.writing h1{margin:15px 0}.writing p{font-size:17px}.sign{margin-top:4px}aside{min-height:0;padding:24px}.stamp{margin-bottom:12px}.clock{border-radius:44px 44px 2px 2px}.photo{margin:0 8px}.photo img{max-height:235px}nav{margin:16px 0;gap:6px}.shelf{width:100%}#tabs{gap:6px}#tabs a{padding:7px 9px}.turn a{font-size:13px}.folio{letter-spacing:0}.range{letter-spacing:.05em}}
.collection{margin-top:22px;font:600 19px var(--serif);letter-spacing:.12em}.collection span{font:14px Georgia,serif;letter-spacing:.08em;margin-left:12px;color:var(--muted)}.coverage{font-size:14px;color:var(--muted);padding-bottom:32px}.coverage summary{cursor:pointer;width:fit-content}.coverage p{max-width:660px}
.photo figure{margin:0}.photo figure+figure{margin-top:18px}.photo figure button{display:block;width:100%}.photo:has(figure+figure) img{max-height:210px}dialog img{max-height:72vh;object-fit:contain}
.photo:has(figure+figure){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:10px;min-height:0}
.photo figure+figure{margin:0}
.photo:has(figure+figure) img{height:auto;max-height:none}
.photo:has(figure+figure) .note{font-size:12px;letter-spacing:0}
dialog img{width:auto;max-width:min(85vw,900px);max-height:74vh}
#siblings{display:flex;flex-wrap:wrap;gap:5px 20px;margin:-4px 0 14px;font:15px/1.7 var(--serif);color:var(--muted)}
#siblings[hidden]{display:none}
#siblings a[aria-current]{color:#334c3e;text-decoration:underline;text-underline-offset:5px;font-weight:bold}
.photo:has(figure:nth-child(3)) figure:first-child{grid-column:1 / -1}
.photo:has(figure:nth-child(3)) img{height:130px;object-fit:contain;background:transparent}
.photo:has(figure:nth-child(3)) figure:first-child img{height:155px}
/* Comfortable touch targets on phones, including the photo viewer. */
#dismiss{min-height:44px;min-width:88px;font:inherit;padding:8px 14px;cursor:pointer}
#lightbox{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:16px}
#lightbox img{max-width:100%;max-height:68vh}
@media(max-width:700px){
  header{gap:12px;flex-wrap:wrap}
  #tabs a{min-height:44px;display:flex;align-items:center;justify-content:center}
  #siblings{gap:4px 16px}
  #siblings a{min-height:44px;display:flex;align-items:center}
  .turn a{min-height:44px;display:flex;align-items:center;max-width:48%;line-height:1.6}
  .coverage summary{min-height:44px;display:flex;align-items:center}
  .spread>*{min-width:0}
  .folio{gap:12px}
  #page{white-space:nowrap}
}