:root{
    --bs-font-sans-serif: 'Inter', system-ui, sans-serif;
    --heading-font: 'Space Grotesk', sans-serif;
    --bs-primary: #2f6f4e;
    --bs-primary-rgb: 47,111,78;
    --ink: #16211b;
    --paper: #f7f5ef;
    --line: #dcd7c9;
  }
  body{
    background-color: var(--paper);
    color: var(--ink);
  }
  h1,h2,h3,h4,.brand{
    font-family: var(--heading-font);
    letter-spacing: -0.01em;
  }
  .navbar{
    border-bottom: 1px solid var(--line);
    background-color: var(--paper) !important;
  }
  .btn-primary{
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #244f39;
    --bs-btn-hover-border-color: #244f39;
  }
  .btn-outline-dark{
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-bg: var(--ink);
  }
  .text-primary-emphasis{ color: var(--bs-primary) !important; }

  .hero-index{
    font-family: var(--heading-font);
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    line-height: 0.96;
    letter-spacing: -0.05em;
    color: var(--bs-primary);
    max-width: 12ch;
  }
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  section{ border-bottom: 1px solid var(--line); }
  section:last-of-type{ border-bottom: none; }

  .card-project{
    border: 1px solid var(--line);
    background: #fff;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .card-project:hover{
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(22,33,27,0.08);
  }
  .stack-pill{
    border: 1px solid var(--line);
    font-size: 0.8rem;
    padding: .25rem .65rem;
  }
  .timeline-item{ border-left: 2px solid var(--line); padding-left: 1.25rem; }
  .timeline-item:not(:last-child){ padding-bottom: 2rem; }
  .timeline-dot{
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--bs-primary);
    margin-left: -1.44rem;
  }
  footer{ background-color: var(--ink); color: var(--paper); }
  footer a{ color: var(--paper); }
  .link-quiet{ text-decoration: none; color: inherit; }
  .link-quiet:hover{ color: var(--bs-primary); }

  /* ===== Mobile Responsive Styles ===== */

  /* Small phones (max 575.98px) */
  @media (max-width: 575.98px) {
    .container {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    header {
      padding-top: 3rem !important;
      padding-bottom: 2rem !important;
    }

    .hero-index {
      font-size: clamp(2.4rem, 11vw, 3.2rem);
      line-height: 1.02;
      max-width: none;
    }

    .hero-index .hero-br {
      display: none;
    }

    header .btn-lg {
      width: 100%;
      padding: 0.75rem 1rem;
      font-size: 1rem;
    }

    header .d-flex.gap-3 {
      gap: 0.75rem !important;
      flex-direction: column;
    }

    .display-6 {
      font-size: 1.75rem;
    }

    .navbar {
      padding-top: 0.75rem !important;
      padding-bottom: 0.75rem !important;
    }

    .navbar-brand {
      font-size: 1rem !important;
    }

    .navbar-nav {
      gap: 0 !important;
      padding-top: 0.5rem;
    }

    .navbar-nav .nav-link {
      padding: 0.5rem 0;
    }

    footer .row .col-md-6 {
      text-align: center !important;
      margin-bottom: 1rem;
    }

    footer .row .col-md-6:last-child {
      margin-bottom: 0;
    }

    .timeline-dot {
      margin-left: -1.35rem;
    }

    .about-img-container,
    .ratio {
      max-width: 280px !important;
      margin: 0 auto;
    }

    .contact-section h2 {
      font-size: 1.25rem;
    }

    .contact-section h5 {
      font-size: 1rem;
      word-break: break-all;
    }
  }

  /* Tablets (576px - 767.98px) */
  @media (min-width: 576px) and (max-width: 767.98px) {
    .hero-index {
      font-size: clamp(3rem, 8vw, 4rem);
      line-height: 1.02;
      max-width: none;
    }

    .display-6 {
      font-size: 2rem;
    }

    .about-img-container,
    .ratio {
      max-width: 350px !important;
      margin: 0 auto;
    }
  }

  /* Medium screens (768px - 991.98px) */
  @media (min-width: 768px) and (max-width: 991.98px) {
    .hero-index {
      font-size: clamp(3.8rem, 6vw, 4.8rem);
    }
  }

  /* General responsive fixes */
  @media (max-width: 767.98px) {
    section {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }

    .timeline-item {
      padding-left: 1rem;
    }

    .hero-index .hero-br {
      display: none;
    }
  }

  /* Ensure images are responsive */
  .ratio img,
  .about-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Contact links touch-friendly */
  .contact-link {
    display: inline-block;
    padding: 0.5rem 0;
    color: inherit;
    text-decoration: none;
  }

  .contact-link:hover {
    color: var(--bs-primary);
  }