@font-face {
  font-family: 'GeistSans';
  src: url('fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'GeistPixelSquare';
  src: url('fonts/GeistPixel-Square.woff2') format('woff2');
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

:root {
  color-scheme: light dark;
  --color-bg: #ffffff;
  --color-text: #333333;
  --color-label: #666666;
  --color-link-underline: #cccccc;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #111111;
    --color-text: #d4d4d4;
    --color-label: #888888;
    --color-link-underline: #444444;
  }
}

body {
  font-family: 'GeistSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  padding: 4rem 2rem 4rem 3rem;
  max-width: 520px;
}

@media (max-width: 420px) {
  body {
    padding: 3rem 1.5rem;
  }
}

main {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

@keyframes fadeUp {
  from { opacity: 0; translate: 0 12px; }
  to   { opacity: 1; translate: 0 0; }
}

main > section {
  animation: fadeUp 600ms var(--ease-out) both;
}

main > section:nth-child(1) { animation-delay:   0ms; }
main > section:nth-child(2) { animation-delay:  80ms; }
main > section:nth-child(3) { animation-delay: 160ms; }
main > section:nth-child(4) { animation-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  main > section { animation: none; }
}

.name {
  font-family: 'GeistPixelSquare', monospace;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 1.2;
}

.role, .label {
  color: var(--color-label);
}

.label {
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.8em;
}

section :is(h1, p) + p {
  margin-top: 0.2rem;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-link-underline);
  text-underline-offset: 3px;
  transition: text-decoration-color 200ms var(--ease-out);
  text-transform: lowercase;
}

a::after {
  content: '↗';
  display: inline-block;
  font-size: 0.9em;
  margin-left: 0.4em;
  vertical-align: 0.05em;
  opacity: 0.4;
  transition: opacity 200ms var(--ease-out), translate 200ms var(--ease-out);
}

a:hover {
  text-decoration-color: currentColor;
}

a:hover::after {
  opacity: 1;
  translate: 2px -2px;
}

a:active {
  opacity: 0.75;
}

a:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
  border-radius: 2px;
}