/* Title, dates and menu stack on small screens, title and dates centered and
   the menu to the right; on wider ones they sit side by side at the right,
   as in the design. They stay at the top while the page scrolls, stuck in a
   row of their own so content starts below them, and with no ground: they
   stay above the page's content as it scrolls under them. On wide screens, Home's
   header floats over the pyonen instead */
.header {
  position: sticky;
  top: 0;
  /* Above the content (layout.css), which sits at 1 */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  /* Stays put between pages (see layout.css) */
  view-transition-name: header;
}

/* The design's size: 400px wide, never shrunk by the row */
.header .pyonen-title {
  flex: none;
  width: 100%;
  max-width: 400px;
}

.header__dates {
  margin: 0;
  font-size: var(--fs-header);
  font-weight: 700;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

.header .menu {
  align-self: flex-end;
}

@media (min-width: 900px) {
  .header {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 40px;
    padding: 19px 45px;
  }

  /* As wide as the row on other pages, so moving between them the header
     keeps its box and the view transition has nothing to stretch */
  .header--overlay {
    position: fixed;
    right: 0;
    left: 0;
  }

  .header .menu {
    align-self: auto;
  }
}