/* An inner title leaf: a large question, short main text, and one upright marginal note. */
.opening-note{--soul-ink:#384934;--soul-soft:#758064}
.opening-note .prologue-imprint{margin:0 0 10px 14px;gap:24px;font:9px/1.5 var(--song);letter-spacing:.1em;color:#8c8165}
.opening-note .prologue-imprint time{font-size:8px;letter-spacing:.15em}
.opening-note h2.prologue-title{position:relative;display:block;width:min(100%,calc(var(--leaf-h)*.47));max-width:360px;margin:0 0 15px;font-size:0;line-height:0;text-shadow:none}
.soul-lettering{display:block;width:100%;height:auto;filter:drop-shadow(.2px .55px .15px #fff9e645);user-select:none}
.foreword-setting{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 24px;column-gap:21px;margin:0 18px 0 18px;max-width:306px}
.foreword-premise{grid-column:1;grid-row:1;font:clamp(16px,1.28vw,21px)/1.95 var(--song);letter-spacing:.065em;color:var(--soul-ink);margin:0}
.premise-initial{float:left;font:400 2.8em/1.15 var(--song);margin:.03em .13em 0 -.055em;color:#516046}
.foreword-margin{grid-column:2;grid-row:1/3;writing-mode:vertical-rl;justify-self:end;padding:6px 0 0 0;font:12px/1.8 var(--song);letter-spacing:.2em;color:#8a7f60;position:relative}
.foreword-margin:after{content:'';position:absolute;top:9px;bottom:14px;left:-12px;width:1px;background:linear-gradient(#a298714d,#b4aa7e08)}
.foreword-correspondence{grid-column:1;grid-row:2;margin-top:24px;padding-top:14px;border-top:1px solid #a1a48c45}
.foreword-names{display:flex;align-items:baseline;gap:12px;margin:0 0 10px;white-space:nowrap;color:#546148;font:italic clamp(19px,1.55vw,26px)/1.2 var(--display)}
.foreword-names i{font:10px var(--song);color:#9a8a65}
.foreword-prose{font:clamp(12px,.91vw,15px)/2 var(--song);letter-spacing:.045em;color:#575d49;margin:0}
.opening-note .prologue-turn{margin:15px 0 0 18px;gap:20px;min-height:35px;font:11px var(--song);letter-spacing:.18em;color:#7d7456}
.opening-note .prologue-turn svg{width:64px;height:24px}
.at-opening .foreword-setting{animation:october-words 1.2s .12s ease-out both}

/* The masthead's player is a punched paper score held between two small rails. */
.listening-room{gap:11px}
.listen-toggle{position:relative;display:grid;place-items:center;align-self:center;width:61px;height:55px;min-width:61px;min-height:55px;padding:0;color:#647353;isolation:isolate;perspective:350px}
.score-bookmark{display:block;width:59px;height:46px;overflow:visible;filter:drop-shadow(0 1px 1px #6b6f4d18);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.score-feed{animation:score-feed 12s linear infinite;animation-play-state:paused}
.background-playing .score-feed{animation-play-state:running}
@keyframes score-feed{to{transform:translateY(-28px)}}
.listen-toggle:hover .score-bookmark{transform:translateY(-1px) rotateY(-7deg)}
.score-action{position:absolute;bottom:-7px;left:0;width:100%;text-align:center;font:9px/1.2 var(--song);letter-spacing:.16em;color:#7d8065}
.listen-toggle:focus-visible{outline:1px solid #788564;outline-offset:5px}
.listen-toggle:active .score-bookmark{transform:translateY(.7px)}

@media(max-width:1200px){.opening-note h2.prologue-title{margin-bottom:13px}.foreword-setting{margin-left:10px;margin-right:8px;column-gap:15px}.foreword-premise{font-size:16px;letter-spacing:.025em}.foreword-names{font-size:20px;gap:9px}.foreword-prose{font-size:12px;line-height:1.95}.foreword-margin{font-size:10px}.foreword-correspondence{margin-top:18px;padding-top:12px}.opening-note .prologue-imprint{margin-left:10px;font-size:8px;gap:12px}.opening-note .prologue-turn{margin-left:10px}}
@media(max-width:1050px) and (min-width:801px){.foreword-setting{margin-left:4px;margin-right:0;column-gap:11px;grid-template-columns:minmax(0,1fr) 17px}.foreword-premise{font-size:14px}.premise-initial{font-size:2.5em}.foreword-names{font-size:17px;gap:5px}.foreword-prose{font-size:11px;letter-spacing:0}.foreword-margin{font-size:9px}.foreword-margin:after{left:-5px}.foreword-correspondence{margin-top:15px}.opening-note .prologue-imprint time{display:none}}
@media(max-height:750px){.opening-note h2.prologue-title{width:min(100%,calc(var(--leaf-h)*.46));margin-bottom:10px}.foreword-premise{font-size:16px}.foreword-names{font-size:21px;margin-bottom:8px}.foreword-prose{font-size:12px;line-height:1.9}.foreword-margin{font-size:10px}.foreword-correspondence{margin-top:15px;padding-top:10px}.opening-note .prologue-turn{margin-top:11px}.opening-note .prologue-imprint{margin-bottom:7px}}
@media(max-height:570px){.opening-note h2.prologue-title{width:min(100%,calc(var(--leaf-h)*.44));margin-bottom:7px}.foreword-setting{margin-left:10px}.foreword-premise{font-size:13px;line-height:1.85}.foreword-margin{font-size:9px}.foreword-names{font-size:17px;margin-bottom:6px}.foreword-prose{font-size:10px;line-height:1.8}.foreword-correspondence{margin-top:10px;padding-top:8px}.opening-note .prologue-turn{font-size:10px;margin-top:8px;min-height:28px}.opening-note .prologue-imprint{font-size:8px;margin-bottom:3px}.listen-toggle{height:44px;min-height:44px}.score-bookmark{height:37px}.score-action{bottom:-5px}}
@media(max-width:800px){.listening-room{gap:0}.listen-toggle{width:37px;min-width:37px;height:40px;min-height:40px}.score-bookmark{width:39px;height:34px}.score-action{font-size:8px;bottom:-5px;letter-spacing:0}}
@media(prefers-reduced-motion:reduce){.score-feed,.at-opening .foreword-setting{animation:none}.score-bookmark{transition:none}}