/* Minimal portfolio styles */
:root {
  --bg: #ffffff;
  --bg-alt:#f5f7fa;
  --text:#1a1f29;
  --text-dim:#5a6475;
  --accent:#2563eb;
  --border:#e2e8f0;
  --radius:6px;
  --shadow:0 1px 2px rgba(0,0,0,.06),0 4px 12px -2px rgba(0,0,0,.04);
  --font-stack: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
[data-theme="dark"] {
  --bg:#0f1115;
  --bg-alt:#1b1f26;
  --text:#f1f5f9;
  --text-dim:#94a3b8;
  --accent:#3b82f6;
  --border:#243042;
  --shadow:0 1px 2px rgba(0,0,0,.6),0 4px 16px -4px rgba(0,0,0,.4);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--font-stack); background:var(--bg); color:var(--text); -webkit-font-smoothing: antialiased; line-height:1.55; }

.no-js body .js-only { display:none; }
.skip-link { position:absolute;left:-999px; top:auto; width:1px;height:1px; overflow:hidden; }
.skip-link:focus { position:static; width:auto;height:auto; padding:.5rem 1rem; background:var(--accent); color:#fff; }

.site-header { position:sticky; top:0; -webkit-backdrop-filter:saturate(180%) blur(10px); backdrop-filter:saturate(180%) blur(10px); background:rgba(255,255,255,.8); border-bottom:1px solid var(--border); display:flex; align-items:center; z-index:20; }
[data-theme="dark"] .site-header { background:rgba(15,17,21,.8); }
.nav { max-width:1080px; margin:0 auto; width:100%; display:flex; align-items:center; justify-content:space-between; padding:.75rem 1.25rem; }
.nav-list { list-style:none; display:flex; gap:1rem; margin:0; padding:0; }
.nav-list a { text-decoration:none; color:var(--text-dim); padding:.35rem .6rem; border-radius:var(--radius); font-size:.9rem; }
.nav-list a:hover, .nav-list a:focus, .nav-list a.is-active { background:var(--bg-alt); color:var(--text); }
.theme-toggle { background:none; border:1px solid var(--border); border-radius:var(--radius); padding:.45rem .7rem; cursor:pointer; font-size:1rem; }
.theme-toggle:hover { background:var(--bg-alt); }

main { max-width:880px; margin:0 auto; padding:2.5rem 1.25rem 4rem; }
.hero { padding:3rem 0 2rem; }
.hero h1 { margin:0 0 1rem; font-size:clamp(2rem,5vw,3rem); line-height:1.1; font-weight:600; }
.accent { color:var(--accent); }
.lead { margin:.25rem 0 0; font-size:1.05rem; }
.lead.alt { color:var(--text-dim); }
.hero-actions { margin:1.75rem 0 0; display:flex; gap:.85rem; }
.btn { --btn-bg:var(--accent); --btn-color:#fff; --btn-bg-hover:#1d4ed8; background:var(--btn-bg); color:var(--btn-color); border:none; padding:.75rem 1.15rem; border-radius:var(--radius); font-size:.9rem; font-weight:500; text-decoration:none; display:inline-flex; align-items:center; gap:.35rem; box-shadow:var(--shadow); }
.btn:hover { background:var(--btn-bg-hover); }
.btn.ghost { --btn-bg:var(--bg-alt); --btn-color:var(--text); --btn-bg-hover:var(--border); box-shadow:none; }

.section { margin:3.5rem 0 0; }
.section-head { display:flex; justify-content:space-between; gap:1rem; align-items:center; flex-wrap:wrap; }
.section h2 { margin:0 0 1.25rem; font-size:1.55rem; font-weight:600; letter-spacing:.5px; }
.skill-list { list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; }
.skill-list li { background:var(--bg-alt); padding:.45rem .7rem; border-radius:var(--radius); font-size:.8rem; letter-spacing:.5px; }

.projects-grid { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); margin-top:1rem; }
.project-card { border:1px solid var(--border); padding:1rem 1rem 1rem; border-radius:var(--radius); background:var(--bg-alt); display:flex; flex-direction:column; position:relative; min-height:180px; }
.project-card:focus { outline:2px solid var(--accent); outline-offset:2px; }
.project-title { margin:.2rem 0 .4rem; font-size:1.05rem; font-weight:600; }
.project-desc { margin:0 0 .75rem; font-size:.85rem; color:var(--text-dim); }
.meta { list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:0 0 .65rem; font-size:.65rem; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim); }
.meta li { background:var(--bg); padding:.25rem .45rem; border-radius:var(--radius); border:1px solid var(--border); }
.project-card .links { margin:0; font-size:.75rem; }
.project-card .links a { color:var(--accent); text-decoration:none; }
.project-card .links a:hover { text-decoration:underline; }

.filters { display:flex; gap:.5rem; }
.filter-btn { background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius); padding:.45rem .75rem; cursor:pointer; font-size:.7rem; letter-spacing:.5px; font-weight:500; }
.filter-btn.is-active, .filter-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }

.timeline { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.25rem; }
.timeline li { display:grid; grid-template-columns:110px 1fr; gap:1rem; }
.time-range { font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim); padding-top:.2rem; }
.item-body h3 { margin:.1rem 0 .25rem; font-size:1rem; font-weight:600; }
.item-body p { margin:0; font-size:.85rem; color:var(--text-dim); }

.contact-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; font-size:.85rem; }
.contact-list a { color:var(--accent); text-decoration:none; }
.contact-list a:hover { text-decoration:underline; }

.site-footer { border-top:1px solid var(--border); padding:2rem 1.25rem; text-align:center; font-size:.75rem; color:var(--text-dim); background:var(--bg-alt); }

@media (max-width:640px){
  .timeline li { grid-template-columns:1fr; }
  .time-range { padding:0; }
  .nav-list { flex-wrap:wrap; }
}

.hero-grid { display:grid; gap:2.5rem; align-items:center; }
@media (min-width:840px){
  .hero-grid { grid-template-columns:1fr 360px; }
}
.hero-portrait { margin:0; position:relative; }
.hero-portrait picture, .hero-portrait img { display:block; width:100%; max-width:360px; margin:0 auto; }
.hero-portrait img { border-radius:18px; border:1px solid var(--border); box-shadow:0 4px 16px -4px rgba(0,0,0,.15); background:linear-gradient(135deg,var(--bg-alt),var(--bg)); object-fit:cover; }
[data-theme="dark"] .hero-portrait img { box-shadow:0 4px 22px -6px rgba(0,0,0,.6); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; white-space:nowrap; }

/* Dark mode animation */
html { transition:background .4s ease, color .4s ease; }
body, .project-card, .skill-list li, .filter-btn, .btn, .btn.ghost { transition:background .3s ease, color .3s ease, border-color .3s ease; }

/* Print minimal */
@media print {
  .site-header, .hero-actions, .filters, #themeToggle { display:none !important; }
  body { background:#fff; color:#000; }
  a { color:#000; }
}

/* Modal styles */
.modal{position:fixed;inset:0;display:none;z-index:120;font-family:var(--font-stack);} 
.modal.is-open{display:block;} 
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);} 
.modal__dialog{position:relative;margin:6vh auto 4vh;max-width:520px;background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:1.6rem 1.6rem 2rem;box-shadow:0 18px 48px -12px rgba(0,0,0,.35);} 
[data-theme="dark"] .modal__dialog{background:var(--bg-alt);} 
.modal__close{position:absolute;top:.6rem;right:.6rem;width:38px;height:38px;border:1px solid var(--border);background:var(--bg-alt);border-radius:50%;cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;} 
.modal__close:hover{background:var(--accent);color:#fff;} 
.modal__desc{margin:.75rem 0 1.1rem;font-size:.9rem;color:var(--text-dim);} 
.modal__meta{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.45rem;font-size:.75rem;} 
.modal__meta li{background:var(--bg-alt);padding:.5rem .6rem;border-radius:8px;display:flex;gap:.4rem;align-items:center;} 
.modal__link{color:var(--accent);text-decoration:none;font-size:.85rem;font-weight:500;} 
.modal__link:hover{text-decoration:underline;} 
@media (max-width:560px){.modal__dialog{margin:4vh 1rem;}}