.container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.25rem 4rem 1.25rem;
  position: relative;
  z-index: 2;
}

.site-header {
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 1.25rem 1.5rem 1.25rem;
  text-align: left;
  position: relative;
  z-index: 2;
}

.brand {
  display: inline-block;
  border: none;
  text-decoration: none;
}
.brand:hover { border: none; }

.tagline {
  margin: 0.3rem 0 0.8rem 0;
  color: var(--fg-dim);
  font-size: 1rem;
  letter-spacing: 0.05em;
}

.site-nav {
  font-size: 0.95rem;
  margin-top: 0.4rem;
  color: var(--fg-dim);
}
.site-nav a {
  border-bottom: none;
  color: var(--fg-dim);
  padding: 0 0.15rem;
}
.site-nav a:hover {
  color: var(--cool);
  text-shadow: 0 0 6px rgba(var(--cool-rgb), 0.45);
}
.site-nav .sep {
  color: var(--fg-faint);
  padding: 0 0.35rem;
  user-select: none;
}

.site-footer {
  max-width: 760px;
  margin: 3rem auto 1.5rem auto;
  padding: 1.25rem 1.25rem 0 1.25rem;
  border-top: 1px dashed var(--border);
  font-size: 0.85rem;
  color: var(--fg-dim);
  text-align: center;
  position: relative;
  z-index: 2;
}
.site-footer .sep {
  padding: 0 0.4rem;
  color: var(--fg-faint);
}
.site-footer .counter {
  font-family: var(--font-display);
  color: var(--hot);
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  text-shadow: 0 0 6px rgba(var(--hot-rgb), 0.45);
  background: #000;
  padding: 0 0.35em;
  border: 1px solid var(--border-hot);
}

.feed {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.pager {
  margin-top: 2rem;
  text-align: center;
}
.end-marker {
  margin-top: 1.5rem;
  color: var(--fg-faint);
  font-size: 0.9rem;
  letter-spacing: 0.15em;
}

@media (max-width: 600px) {
  .site-header { padding-top: 2rem; }
  .container, .site-header, .site-footer { padding-left: 1rem; padding-right: 1rem; }
}

/* === Feed page two-column layout (feed + chat sidebar) ===
   Only enabled on `body.page-feed` so post.html / admin.html keep their
   single-column 760px shell exactly as before. The feed column stays at
   its original width so post bodies, YouTube embeds and image galleries
   render identically; the chat panel docks as a sticky sidebar on the
   right. Below 1024px we fall back to the default flow (chat stacks
   above the feed, same as it does today on phones), which keeps the
   mobile reading experience unchanged. */
@media (min-width: 1024px) {
  body.page-feed .container {
    max-width: 1140px;
    display: grid;
    grid-template-columns: minmax(0, 760px) 340px;
    grid-template-areas:
      "compose chat"
      "feed    chat"
      "pager   chat";
    column-gap: 2.2rem;
    row-gap: 0;
    align-items: start;
  }
  body.page-feed .site-header,
  body.page-feed .site-footer {
    /* Match the wider container so the brand and footer aren't
       awkwardly off-centre relative to the feed column underneath. */
    max-width: 1140px;
  }
  body.page-feed #feed-compose { grid-area: compose; min-width: 0; }
  body.page-feed #feed         { grid-area: feed; min-width: 0; }
  body.page-feed .pager        { grid-area: pager; }
  /* The grid rule below sets `display: flex`, which would otherwise
     beat the user-agent's `[hidden] { display: none }` and leak the
     chat UI to anonymous (tokenless) visitors. Pin the hidden state
     explicitly so chat.js can keep using `panel.hidden = true`. */
  body.page-feed #chat-panel[hidden] {
    display: none;
  }
  /* When chat is hidden (anon visitors, or the brief moment before
     chat.js runs for token holders), the two-column grid would leave
     the feed in the left half of a 1140px shell with empty space on
     the right. Collapse back to the single-column 760px layout the
     rest of the site uses so the page reads as centred. */
  body.page-feed:has(#chat-panel[hidden]) .container {
    max-width: 760px;
    display: block;
  }
  body.page-feed:has(#chat-panel[hidden]) .site-header,
  body.page-feed:has(#chat-panel[hidden]) .site-footer {
    max-width: 760px;
  }
  body.page-feed #chat-panel {
    grid-area: chat;
    align-self: start;
    position: sticky;
    /* Below the (non-sticky) header so the panel hugs the top of the
       viewport once you've scrolled past the brand. */
    top: 1.5rem;
    /* Cap the panel to one viewport so a tall scrollback can't push the
       send-form below the fold. The internal `.chat-log` already
       scrolls; we just bound the outer card. */
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
  }
  body.page-feed #chat-panel .chat-body {
    flex: 1;
    min-height: 0;
  }
  body.page-feed #chat-panel .chat-log {
    flex: 1;
    min-height: 0;
    height: auto;
  }
}