/* ============================================================
   布局
   ============================================================ */

/* —— 主体三栏：sidebar 留位置，main 居中 —— */
body {
  display: grid;
  grid-template-columns: 1fr min(880px, 92vw) 280px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "masthead  masthead  masthead"
    ".         stage     sidebar"
    "colophon  colophon  colophon";
  gap: 0 36px;
  padding: 32px 24px 0;
}

.masthead  { grid-area: masthead; }
.stage     { grid-area: stage; padding: 28px 0 80px; }
.sidebar   { grid-area: sidebar; padding-top: 28px; position: sticky; top: 0; align-self: start; max-height: 100vh; }
.colophon  { grid-area: colophon; }

@media (max-width: 1100px) {
  body {
    grid-template-columns: 1fr min(720px, 92vw);
    grid-template-areas:
      "masthead  masthead"
      "stage     stage"
      "sidebar   sidebar"
      "colophon  colophon";
    padding: 20px 16px 0;
    gap: 0 16px;
  }
  .sidebar { position: static; max-height: none; padding-top: 0; }
}
@media (max-width: 600px) {
  body { padding: 14px 12px 0; }
}