/* Keep the existing desktop theme; give the Steam banner and new article room. */
.steam-box { margin-top: 10px; }
.steam-widget { display: block; width: 100%; max-width: 646px; height: 190px; border: 0; margin: 10px auto; background: #1b2838; }
.steam-mobile-art { display: none; }
.steam-mobile-art img { display: block; width: 100%; height: auto; }
.post-article-image.wide { width: 100%; max-width: 800px; box-sizing: border-box; }
.post-panel.rich-post h3 { font-size: 16px; line-height: 1.5; margin: 22px 0 10px; }
#shell { box-sizing: border-box; }
#shell > .title-bar, #shell > .status-bar { flex-shrink: 0; }
.shell-body { flex: 1; height: auto; min-height: 0; grid-template-columns: 176px minmax(0, 1fr) 250px; grid-template-rows: minmax(0, 1fr); }
.panel.left, .panel.right { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.panel.right { align-self: stretch; min-height: 0; padding-right: 4px; scrollbar-gutter: stable; }
.panel.right:focus-visible { outline: 2px dotted #000080; outline-offset: 2px; }
.site-work-notes { padding: 10px; min-height: 160px; }
.site-work-notes ul { margin: 0; padding-left: 20px; line-height: 1.7; }
.site-work-notes li + li { margin-top: 4px; }
.panel, .blog-split > fieldset { min-width: 0; }
.blog-split { grid-template-columns: minmax(150px, 30%) minmax(0, 1fr); }
.tree-view a, .post-steam-link, #postTitle { overflow-wrap: anywhere; }
.steam-box a:focus-visible { outline: 2px dashed #000080; outline-offset: 2px; }
@media (max-width: 1100px) {
  .blog-split { grid-template-columns: 1fr; }
  .blog-left-stack { flex-direction: row; }
  .blog-left-stack > fieldset { flex: 1; }
}
@media (max-width: 980px) {
  .shell-body { flex: initial; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .panel.left, .panel.right { overflow: visible; }
  .panel.right { padding-right: 0; scrollbar-gutter: auto; }
}
@media (max-width: 550px) {
  .steam-widget { display: none; }
  .steam-mobile-art { display: block; margin-top: 10px; }
  .blog-left-stack { flex-direction: column; }
  .hero-copy { padding-right: 0; }
  .player-row select { min-width: 0; width: 100%; }
}