.site-brand-logo { display:block; max-width:180px; max-height:52px; object-fit:contain; }
body { isolation:isolate; }
.page-shell { width:100%; max-width:none; padding-top:24px; }
.content-layout { width:min(1480px,calc(100% - 32px)); margin:0 auto; }
.content-center { min-width:0; }
.site-pageskin { display:none; }
.has-pageskin .topbar { margin-top:0; }
.banner-stack { display:grid; gap:10px; width:100%; }
.banner-stack.is-top { margin-bottom:16px; }
.banner-stack.is-bottom { margin-top:16px; }
.banner-ad { display:grid; place-items:center; width:100%; }
.banner-ad>a { display:block; width:100%; line-height:0; }
.banner-ad img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
@media(min-width:1200px) {
  /* An opaque theme canvas sits UNDER all content, including card gaps.
     Only the outer advertising areas show the pageskin artwork. */
  .has-pageskin {
    position:relative;
    /* At 1920px: 300px left + 1320px content + 300px right.
       Scale by viewport WIDTH only; screen height must not shrink content. */
    --pageskin-canvas-width:68.75%;
  }
  .has-pageskin::before {
    content:""; position:absolute; z-index:1; top:0; bottom:0; left:50%;
    width:var(--pageskin-canvas-width); transform:translateX(-50%);
    border:1px solid var(--line); border-top:0; border-bottom:0;
    background:var(--bg); box-shadow:0 18px 60px rgba(0,0,0,.24);
  }
  .site-pageskin { display:block; position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--bg); }
  .site-pageskin-link { display:block; width:100%; height:100%; }
  .site-pageskin-image { display:block; width:100%; height:100%; object-fit:cover; object-position:center top; pointer-events:none; }
  .site-pageskin-link:focus-visible { outline:3px solid var(--accent); outline-offset:-6px; }
  .has-pageskin .topbar,.has-pageskin .page-shell,.has-pageskin .footer { position:relative; z-index:2; width:var(--pageskin-canvas-width); }
  .has-pageskin .topbar { margin-top:0; background:var(--surface); }
  .has-pageskin .page-shell { margin-inline:auto; }
  .has-pageskin .content-layout { width:100%; }
  .has-pageskin .footer { margin-bottom:16px; background:var(--surface); border:1px solid var(--line); border-radius:16px; }
}
@media(max-width:720px) {
  .content-layout { width:calc(100% - 20px); margin-top:12px; }
  .banner-stack { gap:6px; }
  .banner-stack.is-top { margin-bottom:10px; }
  .banner-stack.is-bottom { margin-top:10px; }
}