/* Minimal, fast, accessible portfolio styles
   System UI font stack, light theme, subtle cyan/blue accent
*/
:root{
  --accent: #0ea5e9; /* cyan-500 vibe */
  --text: #0a0a0a;
  --muted: #4b5563;
  --bg: #ffffff;
  --card: #f8fafc;
  --border: #e5e7eb;
  --radius: 14px;
  --shadow: 0 4px 18px rgba(2, 6, 23, 0.08);
  --maxw: 1000px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font:16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent); text-decoration-thickness: .08em; text-underline-offset: .18em}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; border-radius:calc(var(--radius) - 4px)}
button, .btn, .link-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; border:0; cursor:pointer;
  padding:.72rem 1rem; border-radius:calc(var(--radius) - 4px);
  background:var(--accent); color:#fff; font-weight:600; text-decoration:none;
  transition:transform .06s ease, filter .2s ease, opacity .2s ease;
}
button:active, .btn:active{transform:translateY(1px)}
.btn.secondary{
  background:transparent; color:var(--accent); border:1px solid var(--accent)
}
:focus-visible{
  outline:3px solid color-mix(in srgb, var(--accent) 60%, white);
  outline-offset:2px;
}

/* Layout */
.container{max-width:var(--maxw); margin-inline:auto; padding:1rem 1.25rem}
header.site-header{padding:2.5rem 0 1rem}
header .topbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.lang-switch{
  display:flex; gap:.6rem; align-items:center; font-size:.95rem; color:var(--muted)
}
.lang-switch a{color:inherit; text-decoration:none; padding:.25rem .4rem; border-radius:8px}
.lang-switch a[aria-current="page"]{font-weight:700; text-decoration:underline}
.branding{margin-top:1.25rem}
.name{font-size:clamp(1.6rem, 3.2vw, 2rem); line-height:1.25; margin:0}
.headline{font-size:clamp(1.1rem, 2.6vw, 1.35rem); color:var(--muted); margin:.4rem 0 0}
.location{color:var(--muted); margin:.25rem 0 0}
.cta-row{display:flex; gap:.6rem; align-items:center; margin-top:1rem; flex-wrap:wrap}

section{padding:2rem 0; border-top:1px solid var(--border)}
section:first-of-type{border-top:0}

.lead{font-size:1.05rem}
.mono{font-variant-ligatures:none}

/* Grids */
.grid{
  display:grid; gap:1rem;
}
.grid.two{
  grid-template-columns:1fr;
}
@media (min-width: 880px){
  .grid.two{grid-template-columns:1fr 1fr}
}

/* Cards */
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow);
}
.card h3{margin:.1rem 0 .25rem; font-size:1.05rem}
.meta{color:var(--muted); font-size:.95rem}

/* Project cards */
.project{display:grid; gap:.8rem}
.project .thumb{overflow:hidden}
.tags{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.4rem}
.tag{
  font-size:.85rem; padding:.25rem .5rem; border:1px solid var(--border);
  border-radius:999px; background:#fff;
}

/* Footer */
footer.site-footer{padding:2.5rem 0 3rem; color:var(--muted)}

/* Contact form */
.contact-form{
  display:grid; gap:.6rem; max-width:720px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  width:100%; padding:.8rem .9rem; border:1px solid var(--border);
  border-radius:10px; background:#fff; color:var(--text); font:inherit;
}
.contact-form textarea{min-height:160px; resize:vertical}
.contact-form button{justify-self:start}

/* Utilities */
.visually-hidden{
  position:absolute !important; width:1px; height:1px;
  margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden;
}


.branding{margin-top:1.25rem}

/* NEW: header layout with photo */
.header-grid{
  display:grid; gap:1.25rem;
  grid-template-columns:auto 1fr;
}
@media (max-width: 560px){
  .header-grid{ grid-template-columns: 1fr; }
}

/* NEW: avatar styles */
.avatar{
  width:150px; height:150px;
  border:2px solid var(--border); box-shadow:var(--shadow);
  object-fit:cover; object-position:center;
  background:#fff;
}