:root{
  --primary:#1e3a8a;
  --ink:#222;
  --muted:#667085;
  --bg:#f7f9fc;
  --card:#fff;
  --ring:#d9e1ff;
  --radius:12px;
  --shadow:0 6px 20px rgba(0,0,0,.08);

  --bg-0:#ffffff;
  --bg-1:#f6f8ff;
  --bg-2:#eef2ff;
}

*{box-sizing:border-box;margin:0;padding:0}
html{ color-scheme: light dark; }

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

a{color:inherit;text-decoration:none}
.container{width:min(1100px,92%);margin-inline:auto}

/* NAVBAR */
.navbar{ background:var(--primary); color:#fff }
.navbar nav{ display:flex; justify-content:center; gap:1.5rem; padding:1rem }
.navbar a{ color:#eaf0ff; font-weight:600 }
.navbar a:hover{ text-decoration:underline }
.navbar a.current{
  text-decoration:underline;
  text-underline-offset:3px;
}

/* SECTIONS */
.section{ padding:3.5rem 1rem }
.bg-0{ background:var(--bg-0) }
.bg-1{ background:var(--bg-1) }
.bg-2{ background:var(--bg-2) }
.section + .section{ border-top:1px solid #e8ecff }
h2{ text-align:center; margin-bottom:2rem; font-size:2rem }

/* HERO */
.hero{ background:linear-gradient(180deg,var(--bg-0),var(--bg-1)) }
.hero-content{
  display:flex; flex-wrap:wrap; gap:2rem; align-items:center; justify-content:center;
}
.profile-img{
  width:120px; height:120px; border-radius:50%; object-fit:cover;
  box-shadow:var(--shadow); border:3px solid var(--card);
}
.hero-content h1{ font-size:2.2rem; margin-bottom:.6rem }
.hero-content h1 span{ color:var(--primary) }
.hero-content p{ max-width:640px; color:var(--muted) }
.actions{ margin-top:1rem; display:flex; gap:.75rem; flex-wrap:wrap }
.btn{
  display:inline-block; background:var(--primary); color:#fff;
  padding:.75rem 1.1rem; border-radius:var(--radius);
  transition:filter .2s ease;
}
.btn:hover{ filter:brightness(.95) }
.muted{ color: var(--muted); }
.error{ color: #b91c1c; }

/* GRID / CARDS */
.grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.2rem;
}
#profile-stats{margin-top:1rem; }
.grid-stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:.5rem 1rem;
  margin-top:.5rem;
}
.grid-stats dt{font-weight:700; }
.grid-stats dd{margin:0; }
.card img{
  width:100%;
  height:auto;
  display:block;
  border-radius:.5rem;
  margin:.5rem 0 1rem;
}
.card p{ margin:.35rem 0 .5rem; }
.card ul{ margin:.5rem 0 1rem 1.2rem; }
.card li{ margin:.25rem 0; }
.card{
  background:var(--card); padding:1.25rem; border-radius:var(--radius);
  box-shadow:var(--shadow); border:1px solid #eef2ff;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-4px) }

/* CONTACT FORM */
.contact-form{
  margin-top:2rem; display:flex; flex-direction:column;
  gap:1rem; max-width:500px; margin-inline:auto; text-align:left;
}
.contact-form input,.contact-form textarea{
  width:100%; padding:.75rem; border-radius:var(--radius);
  border:1px solid #d8e0ff; background:#f9fbff;
  font-family:inherit; font-size:1rem;
}
.contact-form button{ align-self:flex-start }

/* ======================= PROJECTS ======================= */
.projects{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:2rem;
  justify-content:center;
  justify-items:center;
  align-items:start;
  margin-block:2rem;
  padding:1rem;
}

/* --- Project content layout --- */
.projects article {
  background: var(--card);
  border: 1px solid #eef2ff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  text-align: left;     
  gap: 0.5rem;
}

.projects article h3 {
  text-align: center;      
  align-self: center;   
  margin-bottom: 1rem;
  line-height: 1.25;
}

/* Bullet lists */
.projects article ul {
  margin: 0.25rem 0 0.5rem 1.25rem;
  padding: 0;
  list-style: disc;
}

.projects article li {
  margin-bottom: 0.4rem;
  line-height: 1.5;
}

.projects article strong {
  font-weight: 700;
  color: var(--ink);
}

/* Title */
.projects h1,
.projects h2,
.projects h3{
  font-size:clamp(1.15rem, 0.9rem + 1vw, 1.55rem);
  font-weight:800;
  line-height:1.22;
  margin:.2rem 0 .6rem;
  /* — prevent UGLY mid-word breaks — */
  word-break:keep-all;
  overflow-wrap:normal;
  hyphens:auto;
  letter-spacing:0;
}

/* Use “balanced” wrapping when available */
@supports (text-wrap: balance){
  .projects h1,
  .projects h2,
  .projects h3{ text-wrap:balance; }
}

/* Link affordance on hover/focus */
.projects a{ text-decoration:none; }
.projects a:hover h1,
.projects a:hover h2,
.projects a:hover h3,
.projects a:focus h1,
.projects a:focus h2,
.projects a:focus h3{
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:.08em;
}

.projects-title{
  text-align:center;
  font-size:2.25rem;
  margin-bottom:1.25rem;
}

.tech-stack{
  font-weight:500;
  font-size:0.95rem;
  margin-top:0.75rem;
  color:var(--muted);
}
:root[data-theme="dark"] .tech-stack,
:root:not([data-theme="light"]) .tech-stack{
  color:#cbd5e1;
}

/* FOOTER */
footer{
  background:var(--primary);
  color:#cbd5ff;
  padding:1.2rem 0;
}
footer .row{
  display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:.75rem;
}
footer a{ color:#fff }

/* CV LAYOUT */
.cv2{ padding:0 }
.cv2-wrap{
  width:min(1100px,95%); margin:2rem auto;
  display:grid; grid-template-columns:320px 1fr; gap:0;
  border-radius:16px; overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.08);
  background:var(--card);
}
.cv2-side{
  background:#121a33; color:#e9edff;
  padding:28px 24px 36px;
  display:flex; flex-direction:column; gap:22px;
}
.cv2-headshot img{
  width:120px; height:120px; border-radius:50%;
  object-fit:cover; border:3px solid var(--card); box-shadow:var(--shadow);
}
.cv2-name h1{ line-height:1.15; font-size:1.6rem; margin:6px 0 2px }
.cv2-name .role{ color:#9fb2ff; font-weight:600 }
.cv2-block h3{
  text-transform:uppercase; letter-spacing:.8px;
  font-size:.9rem; color:#cdd7ff; margin-bottom:8px;
}
.cv2-list{
  list-style:none; display:flex; flex-direction:column;
  gap:6px; font-size:.95rem;
}
.cv2-list a{ color:#cfe0ff }
.cv2-download{ margin-top:auto }
.cv2-main{ padding:30px 34px 40px; background:var(--card) }
.cv2-section + .cv2-section{ margin-top:26px }
.cv2-section h2{
  font-size:1.2rem; text-transform:uppercase; letter-spacing:.8px;
  margin:0 0 12px; color:var(--primary);
  border-bottom:2px solid var(--ring); padding-bottom:6px;
}
.cv2-item{ margin:14px 0 }
.cv2-item-head{
  display:flex; justify-content:space-between;
  gap:12px; align-items:baseline;
}
.cv2-item-head h3{ margin:0; font-size:1.05rem }
.cv2-dates{ color:#667; font-size:.95rem; white-space:nowrap }
.cv2-links a{ color:var(--primary); font-weight:600 }
.cv2-item ul{ margin:.4rem 0 0 1.1rem }
.cv2-item p{ margin:.3rem 0 0 }

/* ================= DARK MODE ================= */
nav{ --border-color: oklch(50% 10% 200 / 40%); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary:#4c6ef5;
    --ink:#e9ecef;
    --muted:#adb5bd;
    --bg:#1a1b1e;
    --card:#25262b;
    --ring:#373A40;
    --bg-0:#1a1b1e;
    --bg-1:#25262b;
    --bg-2:#2c2e33;
  }

  :root:not([data-theme="light"]) .color-scheme{
    background:#25262b; color:#e9edff; border-color:#373A40;
  }
  :root:not([data-theme="light"]) .color-scheme select{
    background:#2c2e33; border-color:#373A40; color:#e9edff;
  }
  :root:not([data-theme="light"]) .btn{ background:var(--primary); color:white }
  :root:not([data-theme="light"]) .profile-img{ border-color:#373A40 }
  :root:not([data-theme="light"]) .card{ border:1px solid #373A40 }
  :root:not([data-theme="light"]) h3,
  :root:not([data-theme="light"]) .card h3{ color:#7c9dff }
}

:root[data-theme="dark"]{
  --primary:#4c6ef5;
  --ink:#e9ecef;
  --muted:#adb5bd;
  --bg:#1a1b1e;
  --card:#25262b;
  --ring:#373A40;
  --bg-0:#1a1b1e;
  --bg-1:#25262b;
  --bg-2:#2c2e33;
}
:root[data-theme="dark"] .color-scheme{
  background:#25262b; color:#e9edff; border-color:#373A40;
}
:root[data-theme="dark"] .color-scheme select{
  background:#2c2e33; border-color:#373A40; color:#e9edff;
}
:root[data-theme="dark"] .btn{ background:var(--primary); color:white }
:root[data-theme="dark"] .profile-img{ border-color:#373A40 }
:root[data-theme="dark"] .card{ border:1px solid #373A40 }
:root[data-theme="dark"] h3,
:root[data-theme="dark"] .card h3{ color:#7c9dff }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .projects article{
  border:2px solid #4a4d57!important;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .projects article{
    border:2px solid #4a4d57!important;
    box-shadow:0 4px 12px rgba(0,0,0,.3);
  }
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .error{ color:#ff6b6b; }
}
:root[data-theme="dark"] .error{ color:#ff6b6b; }

/* ===== THEME SWITCHER (VERTICAL DROPDOWN) ===== */
.color-scheme{
  position:fixed;
  top:4.5rem;
  right:1rem;
  font-size:0.85rem;
  font-family:inherit;

  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0.35rem;

  z-index:1000;
  background:var(--card);
  padding:0.6rem 0.75rem;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid #eef2ff;
  min-width:12rem;
}

.color-scheme select{
  width:100%;
  font-family:inherit;
  font-size:0.95rem;
  padding:0.35rem 0.5rem;
  border-radius:6px;
  border:1px solid #d8e0ff;
  background:#f9fbff;
  cursor:pointer;
  color:var(--ink);
}

.color-scheme select:focus{
  outline:2px solid var(--primary);
  outline-offset:2px;
}

/* PRINT MODE */
@media print{
  .navbar, footer, .color-scheme{ display:none }
  .cv2-wrap{ box-shadow:none; border:none }
  .cv2-side{ color:#000; background:#f2f4ff }
}

/* RESPONSIVE */
@media (max-width:900px){
  .cv2-wrap{ grid-template-columns:1fr }
  .cv2-side{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:14px }
  .cv2-download{ width:100% }
}
@media (max-width:700px){
  .hero-content{ flex-direction:column; text-align:center }
  .color-scheme{
    top:auto;
    bottom:1rem;
    right:1rem;
    font-size:0.8rem;
    min-width:10rem;
  }
}