/* Vanilla CSS approximating the original Tailwind styles */
:root {
  --gray-50: #f9fafb;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-900: #111827;
}

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

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: #ffffff;
  color: var(--gray-900);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.main {
  min-height: 100vh;
  background: #ffffff;
  color: var(--gray-900);
}

.container {
  max-width: 36rem; /* Tailwind max-w-xl */
  margin: 0 auto;
  padding: 5rem 2rem; /* py-20 px-8 */
}

.photo {
  margin-bottom: 4rem; /* mb-16 */
  text-align: center;
}

.photo img {
  width: 160px;  /* w-40 */
  height: 160px; /* h-40 */
  border-radius: 9999px; /* rounded-full */
  object-fit: cover; /* object-cover */
  display: block;
  margin: 0 auto;
  border: 2px solid var(--gray-200);
}

.about {
  margin-bottom: 4rem; /* mb-16 */
}

.about h1 {
  font-size: 1.875rem; /* text-3xl */
  line-height: 2.25rem;
  font-weight: 300; /* font-light */
  margin: 0 0 2rem 0; /* mb-8 */
  color: var(--gray-900);
  letter-spacing: 0.05em; /* tracking-wide-ish */
}


.about-text {
  color: var(--gray-700);
  line-height: 2; /* leading-loose */
  text-align: justify;
  text-justify: inter-word;
}

.about-text p {
  margin: 0;
}

.about-text p + p {
  margin-top: 1.5rem; /* space-y-6 */
}

.links .link-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem; /* space-y-6 effect */
}

.links .label {
  color: var(--gray-900);
  font-weight: 600; /* font-medium-ish */
  width: 5rem; /* w-20 */
  flex: 0 0 5rem;
}

.links a {
  color: var(--gray-600);
  text-decoration: none;
  border-bottom: 1px solid var(--gray-300);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.links a:hover,
.links a:focus {
  color: var(--gray-900);
  border-color: var(--gray-900);
  outline: none;
}

.footer {
  margin-top: 5rem; /* mt-20 */
  padding-top: 2rem; /* pt-8 */
  border-top: 1px solid var(--gray-200);
}

.footer p {
  margin: 0;
  font-size: 0.875rem; /* text-sm */
  color: var(--gray-500);
  text-align: center;
}

/* Small screens already look good; add minor enhancements on larger screens */
@media (min-width: 640px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}