/* YFD long-form article layout: desktop sticky-left TOC sidebar. Loaded only on posts explicitly opted in (currently post 4549) via a conditional wp_enqueue_style() in functions.php and a matching .has-sidebar-toc class added in single.php. The article shell/body is NEVER resized or repositioned by this file — .post-shell and .post-body keep their original width, padding and centered axis exactly as on every other article. The TOC is pulled left via a negative margin only, into the page's existing outer margin outside the 760px article column, using position:sticky so it never overlaps or shifts the article. Breakpoint is 1400px (not 1200px) because the article's own centered margin at 1200px (~220px/side) is narrower than the TOC needs (~288px) — activating any earlier would force the shell to widen or the TOC to overlap the article, which is exactly what this fix removes. Below 1400px the TOC stays in normal article flow — nothing here applies. */ @media (min-width: 1400px) { .has-sidebar-toc .post-body .yfd-toc { float: left !important; width: 240px !important; margin: 0 0 2em -288px !important; position: sticky !important; top: 96px !important; max-height: calc(100vh - 120px); overflow-y: auto; } .has-sidebar-toc .post-body .yfd-toc ol { columns: 1 !important; } .has-sidebar-toc .post-body .yfd-toc li { white-space: normal !important; overflow-wrap: break-word; } } /* Chapter bands — restrained background tint grouping consecutive H2 sections into reading "chapters." Applies at all widths (mobile through desktop), same as the rest of the article body — this is a reading-rhythm aid, not a desktop-only layout feature. Deliberately no border, no box-shadow, no width change: background-color only, fully inside the existing article column, so it cannot move/widen/narrow the article or interact with the sticky TOC in any way. Minimal padding (1px) exists only to stop the first/last child's own margin from collapsing through the band's edge — actual visual spacing still comes from each element's own existing margin, unchanged. */ .post-body .yfd-chapter { padding: 1px clamp(20px, 4vw, 28px); margin: 2em 0; border-radius: 12px; } .post-body .yfd-chapter-cream { background: var(--amber-soft); } .post-body .yfd-chapter-green { background: var(--forest-soft); } /* Reader-intent router — compact jump-link block right after 先讲结论. Same restrained treatment as the rest of the article: no width change, no card shadow, just a light bordered box using the existing palette. */ .post-body .yfd-router { background: var(--paper-card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; margin: 0 0 2em; display: grid; gap: 8px; } .post-body .yfd-router-title { grid-column: 1 / -1; margin: 0 0 2px; font-weight: 600; font-size: 0.92rem; color: var(--ink); } .post-body .yfd-router a { color: var(--forest); text-decoration: none; font-size: 0.95rem; line-height: 1.5; } .post-body .yfd-router a:hover { text-decoration: underline; color: var(--amber-deep); } @media (min-width: 640px) { .post-body .yfd-router { grid-template-columns: 1fr 1fr; } } /* Self-assessment ("退出前 1 分钟自测") — sits right after the router. Progressive enhancement: #yfd-quiz starts [hidden] in markup and is only revealed by yfd-long-form-toc.js; a no-JS visitor sees the