/* Standalone page: browser-default serif, no webfont, no shared stylesheet.
   The block is centred by sitting at 40% of the viewport and being pulled back
   up by half its own height, so it rides slightly above true centre. */
html,
body {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
}

main {
  position: relative;
  /* Sits the block slightly above the viewport's true centre. */
  top: 40%;
  transform: translateY(-50%);
  text-align: center;
}

h1 {
  margin: 0;
  display: inline;
}

a,
a:visited {
  color: inherit;
  text-decoration: none;
}

/* :focus-visible rather than :focus — a mouse click leaves focus on the link,
   which with :focus kept the grey applied after returning from the new tab.
   :focus-visible only matches keyboard focus, so keyboard users keep an
   indicator and mouse users do not get a stuck colour. */
a:hover,
a:focus-visible {
  color: #666;
  text-decoration: underline;
}

/* Portrait pinned to the top left of the page, mirroring .social on the right.
   It sits outside <main> and out of the layout flow, so the centred block is
   unaffected by it. */
.portrait {
  position: absolute;
  top: 24px;
  left: 29px;
  line-height: 0;
}

.portrait img {
  display: block;
  width: 100px;
  height: 100px;
}

/* Social icons, pinned to the top right. Absolutely positioned, so they take
   no part in the layout flow and the centred block below is unaffected. */
.social {
  position: absolute;
  top: 24px;
  right: 29px;
  display: flex;
  align-items: center;
  gap: 25px;
}

.social a {
  display: block;
  color: inherit;
  line-height: 0;
}

/* Height is fixed so every glyph renders at the same size; width follows each
   mark's own proportions (the bird is wider than it is tall). */
.social svg {
  display: block;
  height: 20px;
  width: auto;
}

.social a:hover,
.social a:focus-visible {
  color: #666;
  text-decoration: none;
}


/* Set by assets/js/hover-fix.js while the window is unfocused, so a link that
   opened a new tab does not stay visibly hovered. Cleared on pointer movement. */
.no-hover a:hover {
  color: inherit;
  text-decoration: none;
}