/* SkyOS — the frame every page shares, so moving between Dashboard, Memory
   and Connect nothing jumps: one container for the header and the content,
   one gap under the header, one heading size. Pages set what's inside. */

/* Room for the scrollbar on every page, scrolling or not: otherwise a long
   page (Memory) centres in a narrower window and sits 7px left of the rest. */
html { scrollbar-gutter: stable; }

/* Up to 1280px of content — the width the three-step Connect card needs —
   centred, with the gutter on the outside. Width 100% so it fills a flex row
   (the header) as well as a block (the page). */
.container {
  --gutter-x: 24px;
  width: 100%;
  max-width: calc(1280px + 2 * var(--gutter-x));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter-x);
  padding-right: var(--gutter-x);
}

/* The same distance from the header to every page's heading. */
.page { padding: 96px 0 72px; }

h1 {
  margin-top: 0;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

@media (max-width: 640px) {
  .container { --gutter-x: 16px; }
  .page { padding: 48px 0 72px; }
  h1 { font-size: 28px; }
}