/* Local additions, loaded after Pico. Pico styles the semantic tags on its
   own; this file only covers what it cannot infer — the column width, and
   the portrait treatment in the header. */

body > main {
  max-width: 34rem;
  margin-inline: auto;
}

/* Photo beside the name on a wide screen, above it on a narrow one. The
   flex-basis on the hgroup is the wrap point: below roughly 24rem of
   available width there is no room for both, so the text drops under the
   portrait instead of wrapping around it. */

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: var(--pico-block-spacing-vertical);
}

header img {
  flex: none;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  object-fit: cover;
}

header hgroup {
  flex: 1 1 16rem;
  margin: 0;
}