:root {
  font-size: 100%;

  @media (min-width: 1024px) {
    font-size: 125%;
  }
}

body {
  max-width: 80ch;
  margin: 0 auto;
}

hgroup {
  margin-bottom: 3rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);

  h1 {
    font-size: 2rem;
    font-weight: normal;
  }

  p {
    font-size: 1rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
  }
}

.artifact {
  display: flex;
  align-items: start;
  gap: 1rem;

  padding: 1rem 0;

  transition: background 0.2s ease;

  &:not(:last-child) {
    border-bottom: 1px solid var(--divider);
  }

  &:hover .number {
    color: var(--accent);
  }
}

.number {
  font-size: 2rem;
  text-box-trim: trim-both;
  color: color-mix(in oklab, var(--text-muted), transparent 70%);
  color: var(--text-faded);
  transition: color 0.2s ease;
}

.info {
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 1rem;
}

.date {
  font-size: 0.75rem;
  color: var(--text-muted);
}