@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --background: 0 0% 100%;
  --foreground: 0 0% 9%;
  --muted: 0 0% 95%;
  --muted-foreground: 0 0% 45%;
  --card: 0 0% 100%;
  --border: 0 0% 89%;
  --input: 0 0% 94%;
  --primary: 216 65% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 95%;
  --secondary-foreground: 0 0% 15%;
  --accent: 0 0% 95%;
  --destructive: 0 72% 51%;
  --success: 142 76% 36%;
  --ring: 216 65% 50%;
  --radius: 0.5rem;
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

[data-theme="dark"]{
  --background: 0 0% 4%;
  --foreground: 0 0% 98%;
  --muted: 0 0% 12%;
  --muted-foreground: 0 0% 62%;
  --card: 0 0% 7%;
  --border: 0 0% 16%;
  --input: 0 0% 12%;
  --primary: 216 70% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 14%;
  --secondary-foreground: 0 0% 96%;
  --accent: 0 0% 14%;
  --destructive: 0 72% 55%;
  --success: 142 70% 45%;
  --ring: 216 70% 58%;
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  font-family:var(--font-sans);
  font-size:15.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .2s ease, color .2s ease;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width:760px; margin:0 auto; padding:0 28px; }

.topbar{
  position:sticky; top:0; z-index:50;
  background:hsl(var(--background) / 0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid hsl(var(--border));
}
.topbar-inner{
  max-width:760px; margin:0 auto; padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ font-size:16px; font-weight:600; letter-spacing:-.1px; }
.nav-links{ display:flex; gap:24px; }
.nav-links a{ font-size:14px; color:hsl(var(--muted-foreground)); transition:color .2s ease; }
.nav-links a:hover, .nav-links a:focus-visible{ color:hsl(var(--foreground)); }

.theme-toggle{
  width:36px; height:36px; border-radius:var(--radius);
  border:1px solid hsl(var(--border)); background:hsl(var(--card));
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:hsl(var(--foreground));
  transition:background .15s ease, border-color .15s ease;
}
.theme-toggle:hover{ background:hsl(var(--accent)); }
.theme-toggle:active{ transform:scale(0.94); }
.theme-toggle svg{ width:16px; height:16px; }
.theme-toggle .sun{ display:none; }
[data-theme="dark"] .theme-toggle .moon{ display:none; }
[data-theme="dark"] .theme-toggle .sun{ display:block; }

.nav-toggle{
  display:none; width:36px; height:36px; align-items:center; justify-content:center;
  border:1px solid hsl(var(--border)); border-radius:var(--radius); background:hsl(var(--card)); cursor:pointer;
}
.nav-toggle svg{ width:17px; height:17px; }

.hero{ padding:56px 0 36px; }
.eyebrow-photo{
  width:80px; height:80px; border-radius:50%;
  object-fit:cover; border:1px solid hsl(var(--border)); margin-bottom:24px;
}
.hero h1{
  font-weight:700;
  font-size:clamp(30px, 5.5vw, 42px);
  line-height:1.12;
  margin:0 0 8px;
  letter-spacing:-0.5px;
}
.hero .role{ font-size:17px; color:hsl(var(--muted-foreground)); margin:0 0 18px; font-weight:500; }
.hero p.tagline{ font-size:16px; max-width:52ch; color:hsl(var(--foreground)); margin:0 0 22px; }
.meta-row{
  display:flex; flex-wrap:wrap; gap:16px; margin-bottom:24px;
  font-size:13.5px; color:hsl(var(--muted-foreground));
}
.meta-row span{ display:inline-flex; align-items:center; gap:7px; }
.meta-row svg{ width:14px; height:14px; flex-shrink:0; }

.hero-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 16px; height:38px; border-radius:var(--radius); font-size:13.5px; font-weight:500;
  border:1px solid transparent; cursor:pointer; transition:opacity .15s ease, background .15s ease;
}
.btn svg{ width:15px; height:15px; }
.btn:active{ transform:scale(0.98); }
.btn-solid{ background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); }
.btn-solid:hover{ opacity:.9; }
.btn-outline{ background:hsl(var(--card)); color:hsl(var(--foreground)); border-color:hsl(var(--border)); }
.btn-outline:hover{ background:hsl(var(--accent)); }

.social-row{ display:flex; gap:12px; margin-top:22px; }
.social-row a{
  width:34px; height:34px; border-radius:var(--radius); border:1px solid hsl(var(--border));
  display:flex; align-items:center; justify-content:center; color:hsl(var(--muted-foreground));
  transition:all .15s ease; background:hsl(var(--card));
}
.social-row a:hover{ color:hsl(var(--foreground)); background:hsl(var(--accent)); }
.social-row svg{ width:15px; height:15px; }

section.block{ padding:40px 0; border-top:1px solid hsl(var(--border)); scroll-margin-top:76px; }
.block-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:24px; }
.block-head h2{ font-weight:600; font-size:20px; margin:0; letter-spacing:-.2px; }
.block-head .count{ font-size:12.5px; color:hsl(var(--muted-foreground)); }

.about-text{ font-size:15px; color:hsl(var(--foreground)); max-width:64ch; }
.about-text p + p{ margin-top:14px; }

.skills-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px 28px; }
.skill-top{ display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:7px; }
.skill-top .cat{ color:hsl(var(--muted-foreground)); font-size:11.5px; }
.skill-bar{ height:6px; background:hsl(var(--muted)); border-radius:99px; overflow:hidden; }
.skill-bar span{ display:block; height:100%; background:hsl(var(--primary)); border-radius:99px; transition:width .6s ease; }

.timeline-item{ position:relative; padding-left:24px; margin-bottom:28px; }
.timeline-item:last-child{ margin-bottom:0; }
.timeline-item::before{
  content:''; position:absolute; left:0; top:6px; width:8px; height:8px;
  border-radius:50%; background:hsl(var(--primary));
}
.timeline-item::after{
  content:''; position:absolute; left:3.5px; top:16px; bottom:-28px; width:1px; background:hsl(var(--border));
}
.timeline-item:last-child::after{ display:none; }
.timeline-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; margin-bottom:4px; }
.timeline-top h3{ font-size:15px; font-weight:600; margin:0; }
.timeline-top .dates{ font-size:12.5px; color:hsl(var(--muted-foreground)); white-space:nowrap; }
.timeline-sub{ font-size:13.5px; color:hsl(var(--muted-foreground)); margin-bottom:8px; }
.timeline-desc{ font-size:14px; color:hsl(var(--foreground)); max-width:60ch; }

.projects-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.project-card{
  border:1px solid hsl(var(--border)); border-radius:var(--radius); padding:18px; background:hsl(var(--card));
  transition:border-color .15s ease;
}
.project-card:hover{ border-color:hsl(var(--primary)); }
.project-card h3{ font-size:15px; margin:0 0 8px; font-weight:600; }
.project-card p{ font-size:13.5px; color:hsl(var(--muted-foreground)); margin:0 0 14px; }
.project-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.project-tags span{
  font-size:11px; padding:3px 9px; border-radius:99px; background:hsl(var(--accent)); color:hsl(var(--muted-foreground));
}
.project-links{ display:flex; gap:14px; }
.project-links a{ font-size:12.5px; display:inline-flex; align-items:center; gap:5px; color:hsl(var(--foreground)); }
.project-links svg{ width:13px; height:13px; }

.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:32px; }
.contact-info-item{ display:flex; gap:11px; margin-bottom:14px; font-size:14px; }
.contact-info-item svg{ width:16px; height:16px; margin-top:2px; color:hsl(var(--muted-foreground)); flex-shrink:0; }
.form-row{ margin-bottom:12px; }
.form-row label{ display:block; font-size:12.5px; color:hsl(var(--muted-foreground)); margin-bottom:6px; }
.form-row input, .form-row textarea{
  width:100%; padding:10px 12px; border-radius:var(--radius); border:1px solid hsl(var(--border));
  background:hsl(var(--card)); color:hsl(var(--foreground)); font-family:var(--font-sans); font-size:14px;
  transition:border-color .15s ease;
}
.form-row input:focus, .form-row textarea:focus{ outline:none; border-color:hsl(var(--primary)); box-shadow:0 0 0 3px hsl(var(--primary) / 0.15); }
.form-row textarea{ resize:vertical; min-height:104px; }
.form-note{ font-size:12.5px; margin-top:10px; }
.form-note.success{ color:hsl(var(--success)); }
.form-note.error{ color:hsl(var(--destructive)); }

footer{ padding:32px 0 56px; text-align:center; color:hsl(var(--muted-foreground)); font-size:12.5px; }

.error-page{
  min-height:calc(100vh - 130px); display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:60px 28px;
}
.error-code{
  font-size:clamp(64px, 14vw, 120px); font-weight:700; line-height:1; letter-spacing:-2px;
  color:hsl(var(--primary)); margin-bottom:8px;
}
.error-page h1{ font-size:22px; font-weight:600; margin:0 0 10px; letter-spacing:-.2px; }
.error-page p{ font-size:15px; color:hsl(var(--muted-foreground)); max-width:44ch; margin:0 0 28px; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid hsl(var(--ring)); outline-offset:2px;
}

@media (max-width:640px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-links.open{
    display:flex; flex-direction:column; position:absolute; top:60px; left:0; right:0;
    background:hsl(var(--background)); border-bottom:1px solid hsl(var(--border)); padding:16px 28px; gap:16px;
  }
  .skills-grid, .projects-grid, .contact-grid{ grid-template-columns:1fr; }
  .hero{ padding-top:40px; }
}