/* Primary layout and typography */
/* Primary layout and typography */
:root{
  /* Earth-tone palette */
  --bg: #f6f2ea; /* warm cream background */
  --surface: #efe6da; /* slightly darker surface */
  --card: #e3d6c7; /* card background */
  --muted: #6b5b4a; /* muted brown text */
  --accent: #7a6a4f; /* warm earthy accent (brown/olive) */
  --accent-2: #8aa174; /* olive-green secondary accent */
  --glass: rgba(15,11,8,0.04);
  --text: #2b2b2b; /* main text color */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.site-header{
  background: #184e2b; /* dark green */
  padding: 1.25rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.container{max-width:1100px;margin:0 auto;padding:0 1rem}

.nav{display:flex;align-items:center;justify-content:space-between}
.nav .brand{font-weight:700;font-size:1.1rem;color:#dfeadc;text-decoration:none;display:inline-flex;align-items:center}
.brand-logo{width:28px;height:28px;flex:0 0 28px;border-radius:6px}
.nav .links a{color:rgba(223,234,220,0.95);text-decoration:none;margin-left:1rem}
.nav .links a:hover{color:#fff}

/* Active link underline and transition */
.nav .links a{position:relative}
.nav .links a::after{content:'';position:absolute;left:0;right:0;height:2px;background:var(--accent-2);bottom:-6px;transform:scaleX(0);transform-origin:left center;transition:transform .22s ease}
.nav .links a:hover::after{transform:scaleX(1)}
.nav .links a.active{font-weight:700;color:#fff}
.nav .links a.active::after{transform:scaleX(1)}

/* Mobile nav toggle */
.nav .menu-toggle{display:none;background:transparent;border:0;color:rgba(223,234,220,0.95);font-size:1.25rem}
.nav .links{display:flex;gap:1rem}

.hero{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:start;padding:3.25rem 0;position:relative;overflow:visible}
.hero .intro{max-width:720px}
.hero h1{margin:0;line-height:1.05;color:var(--text);font-family:'Playfair Display', serif}
.hero .welcome-line{display:block;font-size:2.75rem;font-weight:800;letter-spacing:-0.5px;margin-bottom:.5rem}
.hero .name-line{display:block;font-size:1.6rem;font-weight:600;margin-top:.25rem}

/* Restore original hero layout and spacing */
.hero{display:grid;grid-template-columns:1fr;gap:1.25rem;align-items:start;padding:3rem 0}
.hero .intro{max-width:640px}
.hero p.lead{color:var(--muted);margin-top:.6rem;font-size:1rem}
.cta{margin-top:1.25rem}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:.6rem .9rem;border-radius:8px;text-decoration:none;font-weight:600}
.btn.secondary{background:transparent;border:1px solid rgba(43,43,43,0.06);color:var(--muted);margin-left:.6rem}
.btn{box-shadow:0 8px 24px rgba(15,11,8,0.12);transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(15,11,8,0.12)}
.btn.secondary:hover{transform:translateY(-2px)}

@media(min-width:900px){
  .hero .welcome-line{font-size:3.2rem}
  .hero .name-line{font-size:1.8rem}
}
.hero p.lead{color:var(--muted);margin-top:.6rem;font-size:1.02rem;max-width:52ch}
.cta{margin-top:1.35rem;display:flex;gap:.6rem;align-items:center}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:.6rem .9rem;border-radius:8px;text-decoration:none;font-weight:600}
.btn.secondary{background:transparent;border:1px solid rgba(43,43,43,0.06);color:var(--muted);margin-left:.6rem}
.btn{box-shadow:0 6px 18px rgba(15,11,8,0.08);transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(15,11,8,0.12)}
.btn.secondary:hover{transform:translateY(-2px)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:2rem}
.card{background:var(--card);padding:1rem;border-radius:12px;border:1px solid rgba(43,43,43,0.06)}
.card h3{margin:0 0 .5rem 0}
.skill-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.chip{background:var(--surface);color:var(--muted);padding:.35rem .6rem;border-radius:999px;font-size:.85rem;display:inline-flex;align-items:center}
.chip svg{display:inline-block;vertical-align:middle}

/* Hero image styling */
.hero-image{box-shadow:0 8px 24px rgba(15,11,8,0.12);border:1px solid rgba(0,0,0,0.06)}

/* Improve hero image styling for a cleaner card look */
.hero > div img.hero-image{border-radius:12px;display:block;width:100%;height:auto;object-fit:cover}

/* Ensure there is no decorative underline under the welcome heading */
.hero .welcome-line{position:relative}
.hero .welcome-line::after{display:none !important}

/* geometric decorations removed per user request */

main{padding:2rem 0}

footer{padding:2rem 0;color:var(--muted);border-top:1px solid rgba(43,43,43,0.03)}

/* Responsive */
@media(min-width:900px){
  .hero{grid-template-columns: 1fr 360px}
  .hero h1{font-size:2.5rem}

  .hero .welcome-line{font-size:3.6rem}
  .hero .lead{font-size:1.1rem}

  /* Desktop: show menu as links */
  .nav .menu-toggle{display:none}
  .nav .links{display:flex}
}

/* Responsive nav for small screens */
@media(max-width:700px){
  .nav .menu-toggle{display:inline-block}
  .nav .links{display:none;flex-direction:column;background:rgba(24,78,43,0.95);position:absolute;right:1rem;top:64px;padding:0.75rem;border-radius:8px;z-index:1200;min-width:160px}
  /* When .open is added via JS, show the menu */
  .nav .links.open{display:flex}
  .nav .links a{display:block;padding:.35rem 0}
}

@media(max-width:480px){
  /* tighten hero padding and scale headings for small phones */
  .hero{padding:1.6rem 0}
  .hero .welcome-line{font-size:1.6rem}
  .hero .intro{max-width:100%}
  .hero-image{box-shadow:0 6px 18px rgba(15,11,8,0.10)}

  /* make page selector full width and easier to tap */
  .page-select{display:block;width:100%;margin:0.6rem 0;padding:.5rem;border-radius:8px}

  /* larger tap targets for chips and buttons */
  .chip{padding:.6rem .9rem;font-size:.95rem}
  .btn{padding:.9rem 1.1rem;font-size:1rem}
}

  /* Page selector styles */
  .page-select{margin-left:0.75rem;padding:.25rem .5rem;border-radius:6px;border:1px solid rgba(0,0,0,0.06);background:var(--surface);color:var(--text);font-size:.95rem}

  /* Utility: screen-reader-only */
  .sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Utility */
.muted{color:var(--muted)}
.center{text-align:center}

/* Small screen tweaks */
@media(max-width:420px){
  .hero{padding:2rem 0}
  /* hide brand logo on very narrow screens to save space */
  .brand-logo{display:none}
}

/* Accessibility focus */
a:focus{outline:2px solid rgba(122,106,79,0.28);outline-offset:2px}