:root {
  --page-edge-color: #b9a5d3;
  --page-glow-radius: min(850px, 50vw);
}
html {
  min-height: 100%;
  background: var(--page-edge-color);
}
body {
  min-height: 100vh;
  background-color: var(--page-edge-color);
  background-image: radial-gradient(
    ellipse var(--page-glow-radius) 70% at 50% 37%,
    #f1e8fc 0%, #d9c7ee 29%, #c8b4e2 58%, var(--page-edge-color) 100%
  );
  background-repeat: no-repeat;
}
.shell {
  background: transparent;
}

/* Keep the mobile navigation grouped centrally on every page. */
@media (max-width:800px) {
  header { flex-wrap:wrap; gap:8px; }
  header nav { order:1; width:100%; justify-content:center; gap:20px; }
}
@media (max-width:440px) {
  header nav { gap:16px; }
}

/* Make room for all four links on small phones. */
@media (max-width:440px) {
  header nav { gap:10px; }
  header nav a { gap:4px; }
  header nav .graphic-arrow { width:14px; height:14px; }
}

/* Equal side columns keep navigation independent of the player's width. */
@media (min-width:801px) {
  header { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; }
  header .menu-brand { justify-self:start; }
  header nav { justify-self:center; }
  header .status { justify-self:end; }
}
/* Give navigation its own centered row before expanded controls could overlap it. */
@media (min-width:801px) and (max-width:1100px) {
  header { grid-template-columns:1fr 1fr; row-gap:8px; }
  header .menu-brand { grid-column:1; grid-row:1; }
  header .status { grid-column:2; grid-row:1; }
  header nav { grid-column:1 / -1; grid-row:2; }
}

/* Keep the viewport center fixed as short and long pages swap. */
html { scrollbar-gutter:stable both-edges; }
@supports not (scrollbar-gutter:stable both-edges) {
  html { overflow-y:scroll; }
}
/* All page titles and rings share the same horizontal and vertical axis. */
.hero { padding-top:0; }
.hero h1 { margin:0; transform:none; padding-right:.04em; }
.hero .home-title { padding-right:.07em; }
.hero .orbit { left:50%; top:50%; transform:translate(-50%,-50%); }
.hero .orbit:nth-child(2) { transform:translate(-50%,-50%) rotate(-26deg) scaleX(.72); }
.hero .orbit:nth-child(3) { transform:translate(-50%,-50%) rotate(41deg) scaleX(.72); }