/* =========================================================
   TOKENS
========================================================= */
:root{
  --white:#ffffff;
  --gray-50:#f7f7f6;
  --gray-100:#efefed;
  --gray-200:#e2e2df;
  --gray-300:#cfcfcb;
  --gray-400:#a6a6a1;
  --gray-500:#83837e;
  --gray-600:#63635f;
  --gray-700:#484846;
  --gray-800:#302f2d;
  --ink:#181816;

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --radius:10px;
  --radius-sm:6px;
  --ease:cubic-bezier(.4,0,.2,1);
  --max:1160px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

/* subtle paper grain overlay, very low opacity */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   TYPOGRAPHY HELPERS
========================================================= */
.eyebrow{
  display:flex; align-items:center; gap:.5em;
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.02em;
  color:var(--gray-600);
  margin:0 0 1rem;
}
.eyebrow__dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--gray-800);
  display:inline-block;
}
.section__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.8rem, 3.2vw, 2.6rem);
  letter-spacing:-0.01em;
  margin:0 0 2.6rem;
  color:var(--ink);
}
.dim{color:var(--gray-400);}

/* =========================================================
   BUTTONS
========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.85rem 1.6rem;
  font-family:var(--font-mono);
  font-size:.85rem;
  font-weight:500;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  white-space:nowrap;
}
.btn--solid{ background:var(--ink); color:var(--white); }
.btn--solid:hover{ background:var(--gray-700); transform:translateY(-2px); }
.btn--outline{ border-color:var(--gray-300); color:var(--ink); }
.btn--outline:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn--ghost{ color:var(--gray-700); border-color:var(--gray-200); padding:.6rem 1.2rem; }
.btn--ghost:hover{ border-color:var(--ink); color:var(--ink); }

/* =========================================================
   NAV
========================================================= */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--gray-200);
}
.nav__inner{
  max-width:var(--max); margin:0 auto; padding:1rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.nav__logo{
  display:flex; align-items:center;
  color:var(--ink); letter-spacing:.02em;
}
.nav__logo img{
  display:block; max-height:6rem; width:auto;
}
.nav__logo-bracket{ color:var(--gray-400); }
.nav__links{
  display:flex; gap:2rem; margin-left:auto;
  font-size:.92rem; color:var(--gray-700);
}
.nav__links a{ position:relative; padding:.2rem 0; transition:color .2s var(--ease); }
.nav__links a:hover{ color:var(--ink); }
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:-2px; height:1px; width:0%;
  background:var(--ink); transition:width .25s var(--ease);
}
.nav__links a:hover::after{ width:100%; }
.nav__cta{ margin-left:1rem; }
.nav__toggle{
  display:none; flex-direction:column; gap:4px; background:none; border:none; padding:6px;
}
.nav__toggle span{ width:20px; height:2px; background:var(--ink); transition:transform .25s var(--ease), opacity .25s var(--ease); }

@media (max-width:860px){
  .nav__cta{ display:none; }
  .nav__toggle{ display:flex; }
  .nav__links{
    position:fixed; top:64px; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--white); border-bottom:1px solid var(--gray-200);
    max-height:0; overflow:hidden; margin:0;
    transition:max-height .3s var(--ease);
  }
  .nav__links.is-open{ max-height:300px; }
  .nav__links a{ padding:1rem 1.5rem; border-top:1px solid var(--gray-100); }
  .nav__toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav__toggle.is-open span:nth-child(2){ opacity:0; }
  .nav__toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
}

/* =========================================================
   HERO
========================================================= */
.hero{
  position:relative;
  padding:5.5rem 1.5rem 5rem;
  overflow:hidden;
}
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--gray-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--gray-100) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 90%);
  opacity:.7;
}
.hero__inner{
  position:relative; z-index:2;
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:1.15fr .85fr; gap:3.5rem;
  align-items:center;
}
.hero__title{
  font-family:var(--font-display);
  font-size:clamp(2.6rem, 6vw, 4.2rem);
  font-weight:700; letter-spacing:-0.02em;
  margin:0 0 .6rem;
  line-height:1.02;
}
.cursor{
  display:inline-block; color:var(--gray-400);
  animation:blink 1.1s step-end infinite;
}
@keyframes blink{ 50%{ opacity:0; } }
.hero__role{
  font-family:var(--font-mono);
  font-size:1rem; color:var(--gray-600);
  margin:0 0 1.4rem;
}
.hero__desc{
  max-width:46ch; color:var(--gray-700);
  margin:0 0 2rem;
}
.hero__actions{ display:flex; gap:1rem; margin-bottom:2.6rem; flex-wrap:wrap; }
.hero__meta{
  display:flex; gap:2.2rem; flex-wrap:wrap;
  border-top:1px solid var(--gray-200); padding-top:1.4rem;
}
.hero__meta-item{
  display:flex; flex-direction:column; gap:.15rem;
  font-size:.8rem; color:var(--gray-500);
}
.hero__meta-item span{
  font-family:var(--font-display); font-weight:700; font-size:1.25rem; color:var(--ink);
}

/* window / code card chrome, used across hero, skills, projects, contact */
.window-card{
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 20px 45px -25px rgba(24,24,22,.18);
}
.window-chrome{
  display:flex; align-items:center; gap:6px;
  padding:.7rem .9rem;
  background:var(--gray-50);
  border-bottom:1px solid var(--gray-200);
}
.window-chrome span{
  width:9px; height:9px; border-radius:50%;
  background:var(--gray-300);
}
.window-chrome__title{
  margin-left:.6rem;
  font-family:var(--font-mono); font-size:.75rem; color:var(--gray-500);
}

.hero__media{ display:flex; justify-content:center; }
.photo-card{ width:100%; max-width:340px; }
.photo-frame{
  aspect-ratio:4/5;
  background:
    radial-gradient(circle at 30% 20%, var(--gray-100), var(--gray-50) 60%);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
}
.photo-frame::after{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(var(--gray-200) 1px, transparent 1px), linear-gradient(90deg, var(--gray-200) 1px, transparent 1px);
  background-size:20px 20px;
  opacity:.4;
  pointer-events:none;
}
.photo-frame img{
  position:relative; z-index:1;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* =========================================================
   SECTIONS (shared)
========================================================= */
.section{ padding:6rem 1.5rem; }
.section--alt{ background:var(--gray-50); border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200); }
.section__inner{ max-width:var(--max); margin:0 auto; }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* =========================================================
   ABOUT
========================================================= */
.about__grid{
  display:grid; grid-template-columns:1.5fr 1fr; gap:3rem; align-items:start;
}
.about__text{ color:var(--gray-700); font-size:1.05rem; max-width:60ch; }
.about__stats{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.2rem; }
.stat{
  border:1px solid var(--gray-200); border-radius:var(--radius);
  padding:1.2rem; text-align:left;
  background:var(--white);
}
.stat__number{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:1.8rem; margin-bottom:.4rem;
}
.stat__label{ font-size:.78rem; color:var(--gray-500); line-height:1.3; }

/* =========================================================
   SKILLS
========================================================= */
.skills__layout{
  display:grid; grid-template-columns:1.1fr .9fr; gap:2.5rem; align-items:start;
}
.code-card{ }
.code-block{
  margin:0; padding:1.4rem 1.5rem;
  font-family:var(--font-mono); font-size:.86rem; line-height:1.7;
  color:var(--gray-700); overflow-x:auto;
}
.code__kw{ color:var(--gray-500); font-weight:500; }
.code__var{ color:var(--ink); font-weight:600; }
.code__key{ color:var(--gray-800); }
.code__str{ color:var(--gray-500); }

.skills__categories{ display:flex; flex-direction:column; gap:1.6rem; }
.skill-cat__title{
  font-family:var(--font-mono); font-size:.85rem; font-weight:500;
  color:var(--gray-600); margin:0 0 .7rem; text-transform:uppercase; letter-spacing:.04em;
}
.tag-row{ display:flex; flex-wrap:wrap; gap:.55rem; }
.tag{
  font-size:.82rem; padding:.4rem .85rem;
  border:1px solid var(--gray-200); border-radius:999px;
  color:var(--gray-700); background:var(--white);
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.tag:hover{ border-color:var(--ink); color:var(--ink); }
.tag--mono{ font-family:var(--font-mono); border-radius:var(--radius-sm); }

/* =========================================================
   PROJECTS
========================================================= */
.projects__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;
}
.project-card{
  border:1px solid var(--gray-200); border-radius:var(--radius);
  background:var(--white); overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  display:flex; flex-direction:column;
}
.project-card:hover{
  transform:translateY(-6px);
  box-shadow:0 25px 45px -25px rgba(24,24,22,.25);
}
.project-card__thumb{
  height:170px; display:flex; align-items:center; justify-content:center;
  color:var(--gray-400);
  background:
    repeating-linear-gradient(135deg, var(--gray-50), var(--gray-50) 10px, var(--gray-100) 10px, var(--gray-100) 20px);
  border-bottom:1px solid var(--gray-200);
  overflow:hidden;
}
.project-card__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.project-card__body{ padding:1.2rem 1.4rem 1.6rem; display:flex; flex-direction:column; gap:.75rem; flex:1; }
.project-card__body h3{
  font-family:var(--font-display); font-size:1.1rem; margin:0.2rem 0 0; letter-spacing:-.01em;
}
.project-card__body p{ font-size:.92rem; color:var(--gray-600); margin:0; flex:1; }

/* =========================================================
   CONTACT
========================================================= */
.contact__intro{ color:var(--gray-600); max-width:56ch; margin:-1.6rem 0 2.4rem; }
.terminal-card{ max-width:640px; }
.terminal-form{ padding:1.6rem 1.6rem 1.8rem; display:flex; flex-direction:column; gap:1rem; }
.terminal-line{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--font-mono); font-size:.92rem;
  border-bottom:1px solid var(--gray-200); padding-bottom:.6rem;
}
.terminal-line--area{ align-items:flex-start; }
.terminal-prompt{ color:var(--gray-400); }
.terminal-line input, .terminal-line textarea{
  flex:1; border:none; outline:none; background:transparent;
  font-family:var(--font-mono); font-size:.92rem; color:var(--ink);
  resize:vertical; padding:.2rem 0;
}
.terminal-line input::placeholder, .terminal-line textarea::placeholder{ color:var(--gray-400); }
.terminal-submit{ align-self:flex-start; margin-top:.4rem; }
.form-status{
  font-family:var(--font-mono); font-size:.8rem; color:var(--gray-500); min-height:1.2em; margin:0;
}
.form-status.is-success{ color:var(--gray-800); }

/* =========================================================
   FOOTER
========================================================= */
.footer{ border-top:1px solid var(--gray-200); padding:2.4rem 1.5rem; }
.footer__inner{
  max-width:var(--max); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
}
.footer__text{ font-size:.85rem; color:var(--gray-500); margin:0; }
.footer__top{ font-family:var(--font-mono); font-size:.8rem; color:var(--gray-600); }
.footer__top:hover{ color:var(--ink); }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:960px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__media{ order:-1; max-width:280px; margin:0 auto 1rem; }
  .about__grid{ grid-template-columns:1fr; }
  .skills__layout{ grid-template-columns:1fr; }
  .projects__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .projects__grid{ grid-template-columns:1fr; }
  .about__stats{ grid-template-columns:1fr 1fr; }
  .hero__meta{ gap:1.4rem; }
}