:root {
  --ground: #f7f7f5;
  --ink: #242422;
  --muted: #898985;
}

* { box-sizing: border-box; }

html { background: var(--ground); }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

main {
  width: min(100% - 40px, 680px);
  min-height: 100svh;
  margin: 0 auto;
  padding: clamp(72px, 15vh, 160px) 0 64px;
}

.bio p {
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
}

.bio .social-intro { margin-top: 28px; }

.reason-line {
  display: inline-block;
  margin-top: 0.55em;
}

.bio a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--muted);
  text-underline-offset: 3px;
}

.bio a:hover,
.bio a:focus-visible {
  text-decoration-color: var(--ink);
  outline: none;
}

.inline-toggle {
  appearance: none;
  border: 0;
  border-bottom: 1px dashed var(--muted);
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

.inline-toggle:hover,
.inline-toggle:focus-visible {
  border-bottom-style: solid;
  outline: none;
}

@media (max-width: 720px) {
  main {
    width: min(100% - 32px, 680px);
    padding-top: 64px;
  }

  .bio p { font-size: 16px; }
}