.reader-page { width:min(1050px,calc(100% - 32px)); }
.reader-page > .breadcrumb { margin-top:22px; }
.reader-layout {
    display:grid;
    grid-template-columns:minmax(0,690px) minmax(0,330px);
    gap:30px;
    margin-block:20px 36px;
}
.reader h1 { font-size:30px; line-height:1.3; margin:0 0 12px; overflow-wrap:anywhere; }
.reader-published { color:var(--muted); font-size:12px; margin:0 0 20px; }
.reader-meta {
    display:flex;
    flex-wrap:wrap;
    gap:10px 16px;
    list-style:none;
    padding:13px 0 0;
    margin:0 0 22px;
    border-block-start:1px solid var(--line);
    color:var(--muted);
    font-size:13px;
}
.reader-meta li { display:flex; align-items:center; gap:8px; }
.reader-meta img { object-fit:contain; border-radius:50%; }
.reader-cover {
    display:block;
    width:100%;
    max-width:690px;
    height:auto;
    aspect-ratio:690 / 450;
    object-fit:cover;
    border-radius:6px;
    background:#eaf0f8;
}
.reader-body { margin-block:24px; font-size:16px; line-height:1.95; overflow-wrap:anywhere; }
.reader-body p { margin:0 0 1.35em; white-space:pre-line; }
.reader-inline { display:block; width:auto; max-width:100%; height:auto; margin:20px auto; border-radius:6px; }
.reader-video { display:block; width:100%; aspect-ratio:16 / 9; border:0; margin:20px 0; }
.reader-x { min-height:340px; }
.reader-source { margin-block-end:20px; }
.reader-share { display:flex; align-items:center; flex-wrap:wrap; gap:8px; border-block:1px solid var(--line); padding:12px 0; font-size:.83rem; }
.reader-share a { padding:5px 9px; border:1px solid var(--line); border-radius:5px; }
.reader-sidebar h2,.reader-related h2 { font-size:16px; padding:9px 12px; margin:0 0 12px; border-block-end:2px solid var(--blue); }
.reader-sidebar > a:not(.reader-more),.reader-related > a {
    display:grid;
    grid-template-columns:100px minmax(0,1fr);
    align-items:center;
    gap:12px;
    padding-block:10px;
    border-block-end:1px solid var(--line);
    font-size:.9rem;
}
.reader-sidebar img,.reader-related img { display:block; width:100px; height:100px; max-width:100px; max-height:100px; object-fit:cover; border-radius:6px; }
.reader-sidebar small { display:block; margin-top:7px; color:var(--muted); }
.reader-more { display:inline-block; margin-top:12px; color:var(--blue); }
.reader-related { margin-block-start:24px; }
@media(max-width:767px) {
    .reader-page { width:calc(100% - 24px); }
    .reader-layout { grid-template-columns:minmax(0,1fr); gap:24px; margin-block-start:14px; }
    .reader h1 { font-size:24px; line-height:1.45; }
    .reader-meta { margin-bottom:16px; }
    .reader-body { font-size:16px; }
}
