:root{
  --night:#1b2340; --dusk:#44507a; --horizon:#e2bd78; --stone:#7d7468;
  --pearl:#f3f4f6; --ink:#1b2340; --muted:#5a6078; --rule:#d9dce4;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--pearl);color:var(--ink);
  font-family:"Literata","Noto Serif TC",Georgia,"Times New Roman",serif;font-size:1.125rem;line-height:1.7}
:lang(zh) body, body:lang(zh){font-family:"Noto Serif TC","Literata",serif;line-height:1.9}
a{color:var(--dusk);text-decoration-color:var(--horizon);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--night)}
a:focus-visible,button:focus-visible{outline:3px solid var(--horizon);outline-offset:3px}

/* the dusk band: the Remembrance cover's sky, used as the site's signature */
.sky{background:linear-gradient(180deg,var(--night) 0%,var(--dusk) 55%,#9c8f86 80%,var(--horizon) 100%);color:#f6f2ea}
.sky .wrap{padding:3.5rem 1.25rem 3rem}
.sky a{color:#f6f2ea}
.wrap{max-width:46rem;margin:0 auto;padding:0 1.25rem}
nav.top{display:flex;justify-content:space-between;gap:1rem;font-size:.95rem;padding-top:1rem}
nav.top a{text-decoration:none;opacity:.9}
h1{font-weight:500;font-size:clamp(2rem,6vw,3.2rem);line-height:1.15;margin:.6em 0 .3em;letter-spacing:.01em}
.lede{font-style:italic;font-size:1.2rem;max-width:34rem;margin:0}
h2{font-weight:500;font-size:1.6rem;line-height:1.3;margin:2.5rem 0 .5rem}
h3{font-weight:500;font-size:1.25rem;margin:0}

.book{display:grid;grid-template-columns:7.5rem 1fr;gap:1.25rem;align-items:start;margin:2rem 0}
.book img{width:100%;height:auto;box-shadow:0 2px 10px rgba(27,35,64,.25)}
.book p{margin:.4rem 0}

ul.works{list-style:none;padding:0;margin:0}
ul.works li{padding:.8rem 0;border-top:1px solid var(--rule)}
ul.works .fmt{color:var(--muted);font-size:.95rem}

/* songs */
.song{padding:2rem 0;border-top:1px solid var(--rule);scroll-margin-top:1rem}
.song .sub{color:var(--muted);font-style:italic;margin:.2rem 0 1rem}
.player{margin:.6rem 0 1.2rem}
.player .label{font-size:.95rem;color:var(--muted);display:block;margin-bottom:.2rem}
audio{width:100%;max-width:28rem}
.soon{display:none;font-size:.95rem;color:var(--stone);font-style:italic}
.player.missing audio{display:none}
.player.missing .soon{display:block}
.lyrics{white-space:pre-line;margin:0}
.lyrics .part{display:block;margin-top:1rem;font-size:.9rem;color:var(--stone);font-style:italic}
.lyrics .chorus{display:block;padding-left:1rem;border-left:3px solid var(--horizon)}
.version{margin-top:1.5rem;font-weight:600}
.toc{columns:2;column-gap:2rem;padding-left:1.2rem}
.toc li{break-inside:avoid}
footer{margin-top:3rem;padding:2rem 0 3rem;border-top:1px solid var(--rule);color:var(--muted);font-size:.95rem}
@media (max-width:34rem){.book{grid-template-columns:5.5rem 1fr}.toc{columns:1}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
html{scroll-behavior:smooth}
.player{scroll-margin-top:7rem}