:root{
  --bg: #0b0d11;
  --bg-soft: #11141a;
  --text: #e8eef6;
  --muted: #9fb0c9;
  --brand: #60a5fa;
  --card: #0f1218;
  --border: #1d2431;
  --radius: 18px;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --maxw: 1000px;
}

/* Light theme */
.light{ --bg:#f7f9fc; --bg-soft:#fdfdfe; --text:#0d1421; --muted:#5b6b82; --card:#ffffff; --border:#dfe6f1; --shadow:0 8px 24px rgba(14, 24, 44, .08); }

*{ box-sizing:border-box; }
html, body{ height:100%; background-color: var(--bg); }
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1000px 1000px at 10% -20%, rgba(96,165,250,.12), transparent 60%),
              linear-gradient(180deg, var(--bg), var(--bg));
  color: var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{ color: var(--brand); text-decoration: none; }
a:hover{ text-decoration: underline; }
header .brand:hover { text-decoration: none; }

/* Layout */
header{ position: sticky; top:0; z-index: 10; backdrop-filter: blur(10px); background: color-mix(in oklab, var(--bg) 86%, transparent); border-bottom: 1px solid var(--border); box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:var(--bg-soft); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); }
.container{ width: min(100% - 2rem, var(--maxw)); margin-inline:auto; }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.85rem 0; position:relative; }
.brand{ display:flex; align-items:center; gap:.75rem; font-weight:800; letter-spacing:.2px; color:inherit; text-decoration:none; }
nav ul{ list-style:none; display:flex; gap:.25rem; padding:0; margin:0; align-items:center; }
nav a{ display:block; padding:.55rem .85rem; border:1px solid transparent; border-radius:12px; font-weight:600; color:var(--text); transition: background .18s ease, border-color .18s ease, transform .18s ease; }
nav a[aria-current="page"], nav a:hover{ border-color: var(--border); background: var(--bg-soft); transform: translateY(-1px); }
.theme-toggle{ border-radius:12px; border:1px solid var(--border); background:var(--bg-soft); color:var(--text); padding:.5rem .8rem; cursor:pointer; }

/* Mobile nav toggle button */
.nav-toggle { background:none; border:none; font-size:1.6rem; color:var(--text); cursor:pointer; display:none; }
@media (max-width: 768px){
  .nav-toggle{ display:block; }
  nav ul{ flex-direction:column; gap:.5rem; background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; position:absolute; right:0; top:56px; box-shadow: var(--shadow); display:none; min-width: 210px; }
  nav ul.open{ display:flex; }
}

main{ min-height:60vh; }
section{ padding: 2rem 0; }

/* Cards / grids */
.grid{ display:grid; gap:1rem; }
.cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card{ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem; }
.muted{ color: var(--muted); }
.pill{ font: inherit; font-weight:700; letter-spacing:.3px; padding:.2rem .5rem; border-radius:999px; border:1px solid var(--border); }
.list{ display:grid; gap:.8rem; }
.item{ padding: .9rem; border:1px dashed var(--border); border-radius: 14px; background: var(--bg-soft); display:grid; gap:.1rem; }

/* Center content vertically in skill cards */
#skills .item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Hero/About */
.hero .inner{ display:grid; gap:1.2rem; grid-template-columns: 1fr; padding: 3rem 0 2rem; }
.profile{ display:grid; grid-template-columns: 1fr 320px; gap:1rem; align-items:center; }
.portrait { width:100%; aspect-ratio:1/1; border-radius: var(--radius); border:1px solid var(--border); background:var(--bg-soft) center/cover no-repeat; display:grid; place-items:center; color:var(--muted); font-weight:700; }
.portrait.circle{ border-radius:50% !important; }
.title{ font-size: clamp(1.7rem, 3vw + 1rem, 3.1rem); line-height:1.15; margin:0; }
.subtitle{ color: var(--muted); font-size: 1.05rem; }
.tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top: .6rem; }
.tag{ padding:.4rem .55rem; border:1px solid var(--border); background:var(--bg-soft); border-radius:999px; font-size:.85rem; color:var(--muted); }

/* Timeline */
.timeline{ position:relative; padding-left: 1.25rem; }
.timeline:before{ content:""; position:absolute; left:.15rem; top:.3rem; bottom:.3rem; width:2px; background:linear-gradient(var(--brand), #f59e0b); border-radius:1px; }
.t-item{ position:relative; margin: 0 0 1rem 0; padding-left: .9rem; }
.t-item:before{ content:""; position:absolute; left:-.25rem; top:.3rem; width:.6rem; height:.6rem; background: var(--bg); border:2px solid var(--brand); border-radius:50%; box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 25%, transparent); }

footer{ padding: 2.5rem 0 3.5rem; color: var(--muted); text-align:center; }

@media (max-width: 900px){
  .cols-2{ grid-template-columns:1fr; }
  .profile{ grid-template-columns: 1fr; }
  .hero .inner{ padding-top: 1.5rem; }
}

/* Accessibility niceties */
summary{ cursor: pointer; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* polish & accessibility */
:where(a, button):focus-visible{ outline: 3px solid color-mix(in oklab, var(--brand) 55%, transparent); outline-offset: 2px; border-radius: 12px; }
a{ text-underline-offset: 2px; text-decoration-thickness: .08em; }

/* Headings & rhythm */
h1,h2,h3{ line-height:1.2; }
h2{ margin: 0 0 .35rem; font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem); }
h3{ margin: 0 0 1rem; font-size: 1.05rem; }

/* Media placeholder for images (16:9 by default) */
.media{ width:100%; aspect-ratio:16 / 9; border-radius: var(--radius); border: 1px dashed var(--border); background: var(--bg-soft) center/cover no-repeat; display:grid; place-items:center; color:var(--muted); font-weight:700; letter-spacing:.2px; }
.media.filled{ border-style: solid; box-shadow: var(--shadow); }

/* Slightly denser cards on large screens */
@media (min-width: 900px){ .card{ padding: 1.2rem 1.25rem; } }

/* Utilities */
.span-2{ grid-column: 1 / -1; }
.visually-hidden{ position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px, 1px, 1px, 1px); white-space:nowrap; }

/* Contact card layout */
.contact-card { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:110px; padding-right:1.5rem; }
.contact-info p { margin:0; }
.contact-icons { display:flex; align-items:center; gap:1.2rem; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:999px; border:1px solid var(--border); background:var(--bg-soft); color:var(--text); text-decoration:none; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.icon-btn:hover { transform: translateY(-2px) scale(1.08); }
.icon-btn svg { width:36px; height:36px; display:block; }
@media (max-width: 900px){
  .contact-card{ flex-direction:column; align-items:flex-start; padding-right:0; }
  .contact-icons{ margin-top:.5rem; }
}