/* One width per purpose. The body owns the only horizontal page gutter. */
:root { --site-width: 72rem; --auth-width: 36rem; --site-gutter: clamp(1rem, 2.5vw, 2rem); }
html { scrollbar-gutter: stable; background: var(--color-bg); }
body.max-width { box-sizing: border-box; width: 100%; max-width: var(--site-width); padding-inline: var(--site-gutter); }
/* Collapse before staff-only links force the navigation onto another line. */
@media (min-width: 769px) and (max-width: 1100px) {
  #header #title { display: table; margin-right: 5rem; min-height: 50px; }
  #header #title .h1 { display: table-cell; vertical-align: middle; }
  #header #nav ul li { display: none; border-right: 0; }
  #header #nav ul li.icon { position: absolute; top: 4rem; right: 0; display: inline-block; }
  #header #nav ul.responsive li { display: block; }
  #header #nav li:not(:first-child) { padding-top: 1rem; padding-left: 70px; font-size: 1rem; }
  #header #nav ul.responsive a { display: flex; align-items: center; min-height: 44px; }
}
.account-center, .reader-circle, .public-profile { box-sizing: border-box; width: 100%; max-width: none; padding-inline: 0; }
.auth-shell { width: 100%; max-width: var(--auth-width); padding-inline: 0; }
/* The centered site shell is also the reading shell, including comments.
   Do not reserve an empty sidebar by narrowing or shifting the article. */
#header-post + .content.index.py4 { box-sizing: border-box; width: 100%; max-width: none; margin-inline: 0; }
#header-post { right: 2rem; max-width: calc(100% - 4rem); }
/* The site header owns the gap; pages must not add another top inset. */
#main-content { display: flow-root; margin-top: 0; padding-top: 0; }
#main-content > :first-child, #main-content #posts > h2:first-of-type,
#main-content .home-search-section #search > h2, #main-content > .content > #search > h2 { margin-top: 0; }
#main-content .home-grid-layout { margin-top: 0; }
.home-top-content { display: flow-root; margin-bottom: 1.5rem; }
.home-top-content > :first-child { margin-top: 0; }
.comment-navigation { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: .75rem 0 1rem; }
.comment-navigation a { display: inline-flex; align-items: center; min-height: 32px; font-size: .8rem; }
#reply-list .comment-entry { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px; }
#reply-list .comment-entry .gravatar { float: none; margin-right: 0; }
#reply-list .comment-entry .gravatar img { aspect-ratio: 1; }
.comment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin-top: .25rem; }
.comment-actions :is(.comment-reply-btn, .comment-thread-link) { display: inline-flex; align-items: center; min-height: 28px; margin: 0; padding: 0; border: 0; background: none; color: var(--color-text); font: inherit; font-size: .8rem; line-height: 1.5; text-decoration: none; }
.comment-actions :is(.comment-reply-btn, .comment-thread-link):hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.comment-actions :is(.comment-reply-btn, .comment-thread-link):focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
@media (pointer: coarse), (max-width: 500px) { .comment-actions :is(.comment-reply-btn, .comment-thread-link) { min-height: 44px; } }
@media (max-width: 500px) { #reply-list .child-node { margin-left: 1rem; border-left: 1px solid var(--color-muted); padding-left: .5rem; } }