:root {
      /* Colors */
      --bg-primary: #ffffff;
      --bg-secondary: #f5f3f0;
      --text-primary: #1a1f2e;
      --text-secondary: #4a5c6a;
      --copper: #b87855;
      --sage: #738c7e;
      --charcoal: #1a1f2e;
      --slate: #4a5c6a;

      /* Spacing */
      --spacing-sm: 16px;
      --spacing-md: 24px;
      --spacing-lg: 32px;
      --spacing-xl: 48px;
      --spacing-2xl: 64px;
      --spacing-3xl: 96px;

      /* Design tokens */
      --radius: 12px;
      --max-width: 900px;
    }

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

    body {
      margin: 0;
      padding: 0;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 16px;
      line-height: 1.6;
      color: var(--text-primary);
      background: var(--bg-secondary);
    }

    h1, h2, h3 {
      font-family: Georgia, 'Times New Roman', serif;
      font-weight: 500;
      line-height: 1.2;
      margin: 0;
      color: var(--charcoal);
    }

    h1 {
      font-size: clamp(32px, 5vw, 48px);
      margin-bottom: 16px;
    }

    h2 {
      font-size: clamp(24px, 4vw, 32px);
      margin-bottom: 12px;
    }

    h3 {
      font-size: clamp(18px, 3vw, 24px);
      margin-bottom: 8px;
    }

    p {
      margin: 0 0 16px 0;
    }

    a {
      color: var(--copper);
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    .container {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 var(--spacing-md);
    }

    /* Hero Section */
    .hero {
      background: linear-gradient(135deg, var(--charcoal) 0%, var(--slate) 100%);
      color: white;
      padding: var(--spacing-3xl) 0 var(--spacing-2xl);
      text-align: center;
    }

    .hero h1 {
      color: white;
      margin-bottom: 8px;
    }

    .hero .tagline {
      font-size: clamp(18px, 2.5vw, 24px);
      color: var(--copper);
      margin-bottom: 8px;
      font-weight: 500;
    }

    .hero .affiliation {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 24px;
      font-weight: 400;
    }

    .hero .affiliation a {
      color: white;
      border-bottom: 1px solid rgba(184, 120, 85, 0.6);
      padding-bottom: 1px;
    }

    .hero .affiliation a:hover {
      color: var(--copper);
      border-bottom-color: var(--copper);
      text-decoration: none;
    }

    .hero .intro {
      font-size: 18px;
      line-height: 1.7;
      max-width: 700px;
      margin: 0 auto 32px;
      color: rgba(255, 255, 255, 0.9);
    }

    .hero-headshot {
      width: 220px;
      height: 300px;
      border-radius: 50%;
      object-fit: cover;
      object-position: center 30%;
      margin: 0 auto 24px;
      display: block;
      border: 4px solid rgba(184, 120, 85, 0.3);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    }

    .contact-links {
      display: flex;
      gap: 24px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 24px;
    }

    .contact-links a {
      color: white;
      font-weight: 500;
      padding: 12px 24px;
      background: rgba(184, 120, 85, 0.2);
      border: 1px solid var(--copper);
      border-radius: var(--radius);
      transition: all 0.2s;
    }

    .contact-links a:hover {
      background: var(--copper);
      text-decoration: none;
    }

    /* Content Sections */
    section {
      padding: var(--spacing-2xl) 0;
      background: white;
    }

    section:nth-child(even) {
      background: var(--bg-secondary);
    }

    .section-title {
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--copper);
      margin-bottom: 16px;
    }

    /* Experience & Education */
    .timeline-item {
      margin-bottom: 32px;
      padding-bottom: 32px;
      border-bottom: 1px solid rgba(26, 31, 46, 0.1);
    }

    .timeline-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .timeline-item h3 {
      color: var(--charcoal);
      margin-bottom: 4px;
    }

    .timeline-item .meta {
      color: var(--slate);
      font-size: 14px;
      margin-bottom: 12px;
      font-weight: 500;
    }

    .timeline-item .description {
      color: var(--text-secondary);
      line-height: 1.7;
    }

    /* Skills */
    .skills-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 16px;
    }

    .skill-tag {
      padding: 8px 16px;
      background: var(--bg-secondary);
      border: 1px solid var(--copper);
      border-radius: 24px;
      font-size: 14px;
      font-weight: 500;
      color: var(--charcoal);
    }

    /* Footer */
    footer {
      background: var(--charcoal);
      color: white;
      padding: var(--spacing-lg) 0;
      text-align: center;
    }

    footer p {
      margin: 8px 0;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
    }

    /* Responsive */
    @media (max-width: 768px) {
      .contact-links {
        flex-direction: column;
        align-items: stretch;
      }

      .contact-links a {
        text-align: center;
      }
    }