/* ============================================
   Planir Blog — Article Layout (Direction B)
   Two-column long-read with sticky TOC sidebar.
   Pair with article-shared.css + article-chrome.js.
   ============================================ */

.b-shell { max-width: 1320px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.b-feature { margin-top: 40px; }
.b-grid { display: grid; grid-template-columns: 232px 1fr; gap: 72px; padding: 64px 0 24px; }
.b-rail { position: sticky; top: 96px; align-self: start; }
.b-rail .toc-title { padding-bottom: 14px; border-bottom: 1px solid var(--color-grey); }
.b-rail [data-toc] { margin-top: 16px; display: block; }
.b-main { max-width: 720px; min-width: 0; margin: 0; }
.b-main.prose > h2:first-child,
.b-main.prose > p:first-child { margin-top: 0; }

/* ---- TOC toggled OFF (Tweaks control) ---- */
.toc-off .b-grid { grid-template-columns: 1fr; gap: 0; }
.toc-off .b-rail { display: none; }
.toc-off .b-main { max-width: 760px; margin: 0 auto; }

@media (max-width: 900px) {
  .b-grid { grid-template-columns: 1fr; gap: 32px; }
  .b-rail { position: static; height: auto; display: block; }
  .article-title { font-size: 36px; }
  .prose { font-size: 17px; }
}