/* 心声 · page layer on /sections/shell.css. Her words in Chinese, then their theme, the work and where they ran.
   A passage from the 2020 book shows its title and summary; the title opens the full text in the reader. */
.quote{grid-template-columns:100px minmax(0,1fr);padding:20px 0;scroll-margin-top:calc(var(--bar-h) + 24px)}
.quote>div{min-width:0;max-width:640px}
.quote blockquote{margin:0}
.quote blockquote p{margin:0;font-size:16px;line-height:1.75;text-wrap:pretty}
.passage .open{font-size:16px;line-height:1.6}
.passage .bk-sm{margin:6px 0 0}
.meta{margin:10px 0 0;color:var(--gray);font-size:12px;line-height:1.6}
.meta a{display:inline-flex;align-items:center;gap:4px;transition:color .15s}
.meta a:hover{color:var(--accent)}
.quote.is-target time{color:var(--accent)}

@media (max-width:760px){
 .quote{grid-template-columns:76px minmax(0,1fr);padding:16px 0;scroll-margin-top:calc(var(--bar-h) + 64px)}
 .quote blockquote p,.passage .open{font-size:15px}
}

/* 访谈 and 日记: a title (or the diary's number) over a machine-written summary. An interview's title
   opens its whole translation in the reader. */
.tabs .doc-first{margin-left:4px}
.tabs .doc-first::before{content:"";position:absolute;top:50%;left:-16px;width:1px;height:14px;background:var(--line-2);transform:translateY(-50%)}
.doc-note{max-width:640px;margin:28px 0 24px;color:var(--gray);font-size:13px;line-height:1.7}
.doc .open{font-size:16px;line-height:1.6}
.doc .bk-sm{margin:6px 0 0}
.dy-t{margin:0;font-size:15px;line-height:1.6}
.diary .bk-sm{margin:4px 0 0}

@media (max-width:760px){
 .tabs .doc-first::before{left:-12px}
 .doc .open{font-size:15px}
}