.page {
  width: min(460px, 90vw);
  margin-inline: auto;
  padding: clamp(2.5rem, 9vw, 4.5rem) 0 clamp(2rem, 6vw, 3rem);
  display: grid;
  gap: clamp(1.75rem, 5vw, 2.5rem);
}

.identity {
  display: grid;
  justify-items: center;
  gap: .5rem;
  text-align: center;
}

.identity .name {
  font-size: clamp(1.85rem, 7vw, 2.35rem);
}

.identity .role {
  color: var(--muted);
  font-size: 1rem;
}

.identity .place {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .15rem;
  color: var(--muted);
  font-size: .85rem;
}

.identity .place svg {
  width: 14px;
  height: 14px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}

.stack {
  display: grid;
  gap: .7rem;
}

.rail {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
}

.tools {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
}

.colophon {
  display: grid;
  justify-items: center;
  gap: .35rem;
  padding-top: .5rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  text-align: center;
}

.colophon a {
  border-bottom: 1px solid var(--rule-strong);
}

.colophon a:hover {
  border-bottom-color: var(--pine);
  color: var(--pine);
}