/* ====== tokens ====== */
:root{
  --accent:#1e6bb8;      /* brand blue for H2, links, buttons */
  --accent-900:#155a99;  /* darker blue for hover */
  --text:#222;           /* body text */
  --h3:#1f2937;          /* charcoal for H3 subheaders */
  --muted:#6b7280;       /* sidebar/meta */
  --border:#eaeaea;      /* dividers */
  --bg:#ffffff;
}

/* ====== base ====== */
*{box-sizing:border-box;}
html{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:18px;}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.75;}

a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:2px;
  text-decoration-color:rgba(30,107,184,.35);
}
a:hover{color:var(--accent-900);text-decoration-color:currentColor;}

h1,h2,h3{margin:0 0 .4rem;letter-spacing:.2px;}
/* (no top H1 in the layout, but keep base style available) */
h1{font-size:2rem;line-height:1.2;color:#2b2b2b;}
/* H2 = main section headers (blue) */
h2{
  font-size:1.7rem;
  color:var(--accent);
  margin:2rem 0 .75rem;
  padding-bottom:.4rem;
  border-bottom:1px solid var(--border);
}
/* H3 = subheaders/project titles (charcoal) */
h3{
  font-size:1.3rem;
  color:var(--h3);
  font-weight:700;
  margin:1.4rem 0 .25rem;
}

p{margin:0 0 .8rem;}
.lead{font-size:1.08rem;color:#2e2e2e;margin-top:.25rem;}

/* ====== layout ====== */
.site{
  max-width:1000px;
  margin:0 auto;
  padding:24px 20px 60px;
  display:grid;
  grid-template-columns:320px 1fr; /* widened sidebar for larger photo */
  gap:40px;
}
@media (max-width:900px){
  .site{grid-template-columns:1fr;gap:24px;padding:20px 16px 48px;}
}

/* ====== sidebar ====== */
.sidebar{position:relative;}
.avatar{
  width:288px;  /* large photo */
  height:288px;
  display:block;
  border-radius:8px;
  object-fit:cover;
  box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(30,107,184,.25);
}
.name{font-size:1.4rem;margin:.6rem 0 .2rem;}
/* tagline intentionally omitted */

/* contact list: text snaps flush left with name/photo; icons hang in gutter */
.contact{list-style:none;padding:0;margin:1rem 0 0;}
.contact li{
  position:relative;
  margin:.45rem 0;
  color:#444;
}
.contact i{
  position:absolute;
  left:-26px;             /* hangs icon into the gutter */
  top:.2rem;
  width:18px;
  text-align:center;
  color:#68707a;
}
.contact a{text-decoration:none;border-bottom:1px dotted rgba(30,107,184,.45);}
.contact a:hover{border-bottom-color:currentColor;text-decoration:none;}

/* scale photo down a bit on small screens */
@media (max-width:900px){
  .avatar{width:180px;height:180px;}
  .contact i{left:-22px;}
}

/* ====== content ====== */
.content{min-width:0;}
.project + .project{margin-top:1.2rem;}
.links{margin:.4rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem;}
.btn{
  display:inline-block; padding:.45rem .7rem; border-radius:8px;
  border:1px solid var(--accent); color:#fff; background:var(--accent);
  text-decoration:none; font-weight:600; font-size:.9rem;
}
.btn:hover{background:var(--accent-900);border-color:var(--accent-900);}
.btn--light{background:#f7fbff;color:var(--accent);border-color:rgba(30,107,184,.45);}
.btn--light:hover{background:#eef6ff;color:var(--accent-900);border-color:var(--accent-900);}

/* ====== footer ====== */
.footer{margin-top:2rem;color:#8a8f98;font-size:.9rem;}