:root {
  --background-body: #f5f5f5; 
  --text-main: #252121; 
  --text-light: #747f80;
  --brand-orange: #f26822; 
  --white: #ffffff; 
  --menu-sand: #eaddd7;
  --font-headers: 'Montserrat', sans-serif; 
  --font-body: 'Source Serif Pro', serif;
}

* { box-sizing: border-box; }

body { 
  background-color: var(--background-body); 
  color: var(--text-main); 
  font-family: var(--font-body); 
  font-size: 1.15rem; 
  line-height: 1.65; 
  margin: 0; 
  padding: 0; 
}

.container { max-width: 960px; margin: 0 auto; padding: 0 1.5rem; }

/* Header & Nav */
header { background-color: var(--menu-sand); border-bottom: 1px solid var(--text-main); padding: 2rem 0; }
.nav-wrapper { display: flex; justify-content: space-between; align-items: center; }
.logo { font-family: var(--font-headers); font-weight: 800; font-size: 1.5rem; color: var(--text-main); text-decoration: none; text-transform: uppercase; letter-spacing: -1.5px; }
.nav-links a { font-family: var(--font-headers); color: var(--text-main); text-decoration: none; font-weight: 700; text-transform: uppercase; font-size: 0.85rem; margin-left: 1.75rem; transition: color 0.15s; }
.nav-links a:hover { color: var(--brand-orange); }

/* Hero Section */
.hero-wrapper { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 4rem; padding: 6rem 0; }
h1 { font-family: var(--font-headers); font-weight: 800; font-size: 3.75rem; margin: 0 0 1.5rem 0; }

.btn-dark { 
  display: inline-flex; justify-content: center; align-items: center; width: 220px;
  font-family: var(--font-headers); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; 
  color: var(--white); background-color: var(--text-main); text-decoration: none; padding: 0.95rem 1.5rem; 
  border-radius: 30px; margin-right: 1rem; transition: all 0.2s ease; text-align: center;
}
.btn-dark:hover { background-color: var(--brand-orange); }

/* Sections & Typography */
section { padding: 4rem 0; }
h2 { font-family: var(--font-headers); font-size: 2.25rem; font-weight: 800; text-transform: uppercase; margin: 0 0 0.25rem 0; }
.chapter-subtitle { font-style: italic; color: var(--text-light); margin: 0 0 2.5rem 0; font-size: 1.25rem; }
hr { border: none; border-top: 1px solid var(--text-main); margin: 0; }

/* About Page Specific Image */
.about-header { text-align: center; margin-top: 3rem; margin-bottom: 2rem; }
.about-img-rect {
  width: 100%;
  max-width: 960px;
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 2rem auto;
}

/* Toolshed / Project Cards */
.project-link { text-decoration: none; color: inherit; display: block; margin-bottom: 1rem; }
.project-card { padding: 1.5rem; border-radius: 8px; transition: all 0.2s ease; display: flex; gap: 3rem; }
.project-card:hover { background-color: rgba(0,0,0,0.03); }
.project-card:hover h3 { color: var(--brand-orange); }
.project-card:hover .skill-tag { background: var(--brand-orange); border-color: var(--brand-orange); color: var(--white); }

.project-card h3 { font-family: var(--font-headers); font-size: 1.4rem; margin: 0.5rem 0; transition: color 0.2s; }
.project-meta { color: var(--brand-orange); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; }
.impact { display: block; margin-top: 0.8rem; font-weight: 600; }
.project-date { font-family: var(--font-headers); font-size: 0.8rem; color: var(--text-light); min-width: 140px; padding-top: 0.5rem; font-weight: 700; }

.skill-tag { 
  background: transparent; border: 1px solid var(--text-main); color: var(--text-main); 
  padding: 0.3rem 1rem; border-radius: 20px; font-size: 0.75rem; font-family: var(--font-headers); 
  font-weight: 700; margin-right: 0.5rem; display: inline-block; margin-top: 0.8rem; transition: all 0.2s ease;
}

/* Footer */
footer { background-color: var(--text-main); color: var(--white); padding: 4rem 0 3rem 0; margin-top: 5rem; }
.social-icons a { color: var(--white); font-size: 1.5rem; margin-right: 1.5rem; transition: color 0.15s; }
.social-icons a:hover { color: var(--brand-orange); }
.legal-nav a { color: var(--white); text-decoration: none; font-family: var(--font-headers); font-size: 0.8rem; text-transform: uppercase; margin-left: 1.5rem; transition: color 0.15s; }
.legal-nav a:hover { color: var(--brand-orange); }

/* Responsive Adjustments */
@media (max-width: 768px) {
  .hero-wrapper { display: flex !important; flex-direction: column !important; text-align: center !important; padding: 3rem 0 !important; }
  .hero-profile { order: -1 !important; } 
  h1 { font-size: 2.5rem !important; }
  .hero-text { display: flex; flex-direction: column; align-items: center; }
  .btn-dark { margin: 0.5rem 0 !important; width: 220px; }
  .nav-wrapper { flex-direction: column; gap: 1rem; }
  footer .container > div { flex-direction: column !important; text-align: center; gap: 1.5rem; }
  .project-card { flex-direction: column; gap: 0.5rem; }
  .project-date { min-width: 100%; }
}