:root{
  --bg:#0b0c10; --fg:#e8e8e8; --muted:#bdbdbd; --accent:#00adb5; --card:#1a1e25;
}
*{box-sizing:border-box; margin:0; padding:0}
body{
  background:var(--bg); color:var(--fg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.6; padding:0 1rem;
}
.wrap{max-width:1000px; margin:0 auto}
header{display:flex; justify-content:space-between; align-items:center; padding:2rem 0 1.5rem}
header h1{font-size:1.5rem}
nav a{color:var(--fg); margin-left:1rem; text-decoration:none; font-weight:600}
nav a:hover{color:var(--accent)}
nav a.active{color:var(--accent); text-decoration:underline}
.hero{padding:2rem 0}
.hero h2{font-size:2.2rem; margin-bottom:.5rem}
.hero p{color:var(--muted); font-size:1.1rem; max-width:650px}
.btn{display:inline-block; margin-top:1.25rem; padding:.75rem 1.25rem; background:var(--accent); color:#000; border-radius:8px; font-weight:700; text-decoration:none}
.btn:hover{opacity:.9}
section{margin:2.5rem 0}
h3{font-size:1.6rem; margin-bottom:1rem}
.projects{display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{background:var(--card); border-radius:12px; padding:1rem; transition:transform .2s ease}
.card:hover{transform:translateY(-4px)}
.card h4{margin-bottom:.4rem}
.card p{color:var(--muted); font-size:.95rem}
footer{color:var(--muted); border-top:1px solid #222; padding:1.25rem 0; margin:2.5rem 0 1rem; text-align:center; font-size:.9rem}
.post-list{display:grid; gap:1rem}
.post{background:var(--card); border-radius:12px; padding:1rem}
.post a{color:var(--accent); font-weight:700}
.content p{color:var(--muted); max-width:70ch}
.form{display:grid; gap:.75rem; max-width:520px}
input,textarea{width:100%; padding:10px; border-radius:10px; border:1px solid #2a2f36; background:#0f1115; color:var(--fg)}
label{font-size:.9rem; color:var(--muted)}


/* Generic safeguard so normal images never squish */
img { max-width: 100%; height: auto; display: block; }


.hero-banner {
  position: relative;
  width: 100%;
  height: clamp(280px, 60vh, 720px); /* real height → object-fit works */
  overflow: hidden;
  line-height: 0;
}


.hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;  /* center the image */
  display: block;
}

.banner-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 1rem;
  background: rgba(0,0,0,0.35);
}

.banner-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  margin: 0;           /* remove extra margin */
}

.banner-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  margin-top: 0.5rem;  /* small space after title */
  color: #e0e0e0;
  max-width: 80%;
}

/* Base: never squish normal images */
img { max-width: 100%; height: auto; display: block; }

/* About photo — desktop capped, mobile full width */
.about-photo {
  /* Works whether it's on <img> or on a wrapper <figure> */
  width: 100%;
  max-width: 512px;            /* cap size on large screens (adjust to taste) */
  /*margin: 1.25rem auto 2rem;   /* center horizontally */
  border-radius: 12px;
  overflow: hidden;            /* keeps rounded corners if figure wraps the img */
  box-shadow: 0 10px 24px rgba(0,0,0,0.25); /* optional polish */
}

/* If you used the figure wrapper, ensure inner img fills it naturally */
.about-photo img {
  width: 100%;
  height: auto;   /* keep aspect ratio */
}

.about-section2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;            /* stack vertically on small screens */
  max-width: 1000px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.about-text2 {
  flex: 1 1 55%;              /* text takes about half */
  min-width: 280px;
}

.about-photo2 {
  flex: 1 1 40%;              /* image takes about the other half */
  max-width: 400px;
  border-radius: 12px;
  overflow: hidden;
}

.about-photo2 img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* Stack vertically on mobile */
@media (max-width: 768px) {
  .about-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .about-photo {
    max-width: 100%;
    border-radius: 0;
  }
}



/* Mobile: let it go edge-to-edge for readability, reduce radius */
@media (max-width: 768px) {
  .about-photo {
    max-width: 100%;
    margin: 0 0 1.25rem 0;
    border-radius: 0;
  }
}