body {
  gap: calc(var(--basic-vertical-margin) * 4);
}

header, main, footer {
  max-width: 28ch;
}

footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

footer p {
  margin: 0;
}

footer button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
  touch-action: manipulation;
}

footer button:disabled {
  opacity: 0.4;
  cursor: default;
}

@media (hover: hover) {
  footer button:not(:disabled):hover {
    text-decoration: underline;
  }
}

h1 {
  text-transform: lowercase;
  letter-spacing: 0.03em;
}

p.caption {
  text-align: end;
  font-style: italic;
  min-height: calc(2 * var(--line-height-multiplier) * 1em);
}