/* One masthead size for the home, solo, party and account menus. */
:root { --menu-top: 16px; --menu-side: 24px; }
:root .welcome, :root #page, :root .record-page {
  width: 100%; max-width: 1440px;
  padding-top: var(--menu-top); padding-inline: var(--menu-side);
}
:root .party-top {
  padding-top: var(--menu-top);
  padding-inline: max(var(--menu-side), calc((100vw - 1440px) / 2 + var(--menu-side)));
}
:root .welcome-top, :root .party-top, :root .record-nav { align-items: flex-start; }
.brand h1 { display: flex; }
.menu-date { font: 10px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); align-self: center; }
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  text-transform: uppercase;
  font: 800 30px/1.1 var(--display);
  letter-spacing: -.03em;
  white-space: nowrap;
}
.site-brand::before { content: '◎'; font-weight: 500; }
.site-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
@media (max-width: 640px) {
  :root { --menu-top: 10px; --menu-side: 12px; }
  .site-brand { font-size: 21px; }
  .welcome-top { flex-wrap: wrap; }
}