/* The essay header scrolls; the matching circular close button stays pinned. */
#essay-dialog[open] { display:flex; flex-direction:column; height:var(--reading-height); max-height:var(--reading-height); padding:0; overflow:hidden; }
.reading-dialog { --reading-inset:30px; --reading-height:calc(100dvh - 44px); }
.reading-dialog>.close-dialog { position:absolute; top:24px; right:18px; z-index:2; }
.reading-dialog .dialog-heading { width:100%; min-width:0; font:16px/normal var(--serif); }
.reading-dialog .dialog-header h2 { font:700 clamp(14px,calc(9.4vw - 12.2px),28px)/1.4 TalkingBoard,Georgia,serif; letter-spacing:.07em; white-space:nowrap; }
.dialog-subtitle-row { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px; margin:10px 0 6px; }
.reading-dialog .dialog-subtitle-row .dialog-hint { flex:1 1 210px; min-width:0; margin:0; text-wrap:balance; }
.dialog-reading-nav { display:flex; flex:none; align-items:baseline; gap:8px; margin-left:auto; }
.reading-dialog .dialog-switch { flex:none; display:inline-flex; align-items:center; justify-content:center; padding:12px 21px; min-height:36px; border:0; border-radius:999px; background:rgb(12 8 5 / 25%); color:var(--muted); font:700 11px/1 TalkingBoard,Georgia,serif; letter-spacing:.1em; white-space:nowrap; text-transform:uppercase; transition:background .25s,color .25s; }
.reading-dialog .dialog-switch span { display:block; margin:0; line-height:1; transform:translateY(1px); }
@supports (text-box-trim:trim-both) { .reading-dialog .dialog-switch span { text-box-trim:trim-both; text-box-edge:cap alphabetic; transform:none; } }
.reading-dialog .dialog-switch:is(:hover,:focus-visible,[aria-current="page"]) { background:rgb(12 8 5 / 36%); color:var(--paper); }
/* Matching gutters keep the scrollable essay and fixed lyrics header aligned. */
#lyrics-dialog .dialog-header { padding-inline:var(--reading-inset); overflow:hidden; scrollbar-gutter:stable both-edges; }
#transcript { padding-inline:var(--reading-inset); scrollbar-gutter:stable both-edges; }
#essay-dialog .dialog-header { padding:0 0 12px; border-bottom:1px solid var(--line); }
#essay-dialog .dialog-hint { margin:0; text-wrap:balance; }
.essay-content { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-color:#806947 transparent; scrollbar-gutter:stable both-edges; padding:24px var(--reading-inset) 28px; scroll-padding-block:18px; font:17px/1.8 var(--serif); color:#cdbc9e; hanging-punctuation:first last; }
.essay-content:focus { outline:none; }
.essay-prose p { display:flow-root; margin:1.1em 0; }
.essay-prose>p:first-child { margin-top:24px; }
.essay-prose>p:not(:first-child) { text-indent:1.5em; }
.essay-prose>p:first-child::first-letter { float:left; font:700 3em/1.12 TalkingBoard,Georgia,serif; margin:calc(.02em - 1px) .18em 0 0; padding:0 .24em; background:var(--paper); color:#241b14; }
.essay-prose strong { color:var(--paper); }
.essay-refs { float:right; margin-left:.65em; position:relative; top:6px; font:11px var(--ui); line-height:inherit; white-space:nowrap; text-align:right; text-indent:0; color:var(--muted); }
.essay-refs a { display:inline-block; min-height:24px; padding:0 3px; color:var(--accent); text-decoration:none; border-radius:3px; transition:color .18s,background .18s; }
.essay-refs a:hover { color:#f2dfb7; background:#c5ae7d17; }
.essay-notes { margin-top:34px; padding-top:22px; border-top:1px solid var(--line); }
.essay-notes h3 { margin:0 0 16px; font:700 15px/1.5 TalkingBoard,Georgia,serif; letter-spacing:.05em; color:var(--paper); }
.essay-note { border-bottom:1px solid #c5ae7d21; scroll-margin-top:18px; }
.essay-note summary { min-height:50px; padding:12px 4px; display:grid; grid-template-columns:22px 1fr 14px; align-items:baseline; gap:8px; font:14px/1.5 var(--serif); color:var(--muted); list-style:none; cursor:pointer; transition:color .2s; }
.essay-note summary::-webkit-details-marker { display:none; }
.essay-note summary:hover,.essay-note[open] summary { color:var(--paper); }
.essay-note summary:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; border-radius:4px; }
.essay-note-number { font:11px/1.5 var(--ui); color:var(--accent); }
.essay-note-toggle { align-self:center; position:relative; width:10px; height:10px; }
.essay-note-toggle::before,.essay-note-toggle::after { content:""; position:absolute; top:50%; left:0; width:10px; height:1px; background:currentColor; }
.essay-note-toggle::after { transform:rotate(90deg); transition:transform .3s; }
.essay-note[open] .essay-note-toggle::after { transform:rotate(0); }
.essay-note-body { overflow:hidden; }
.essay-note-content { padding:0 4px 18px 34px; font-size:14px; line-height:1.7; }
.essay-note-content p { margin:0 0 12px; }
.essay-note-content a { text-decoration-color:#c5ae7d70; text-underline-offset:3px; transition:color .18s; overflow-wrap:anywhere; }
.essay-note-content a:hover { color:#f2dfb7; }
.essay-backlink { color:var(--accent); font-size:12px; }
@media(max-width:699px) and (orientation:portrait) {
 .reading-dialog { --reading-inset:24px; }
 .reading-dialog>.close-dialog { top:20px; }
 .reading-dialog .dialog-switch { padding-inline:12px; font-size:10px; }
 .essay-content { padding-block:20px 24px; font-size:16px; line-height:1.75; }
 .essay-note-content { padding-left:4px; }
}
@media(orientation:landscape) and (max-height:599px) {
 .reading-dialog { --reading-height:calc(100dvh - 20px); }
 .reading-dialog>.close-dialog { top:12px; }
 .essay-content { padding-top:12px; }
 #essay-dialog .dialog-header h2 { margin:2px 0; }
}
@media(prefers-reduced-motion:reduce) { .essay-note-toggle::after { transition:none; } }