/* Base / tokens */
:root{
    --bg:#ffffff; --fg:#0f172a; --muted:#475569; --card:#f8fafc; --accent:#2563eb; --border:#e2e8f0;
    --radius:16px; --space:clamp(16px,2vw,24px); --max:960px;
    color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
    :root{ --bg:#0b1220; --fg:#e5e7eb; --muted:#9ca3af; --card:#101828; --accent:#60a5fa; --border:#1f2937; }
}
/* Manual dark-mode override (used by theme toggle) */
:root[data-theme="dark"]{
    --bg:#0b1220; --fg:#e5e7eb; --muted:#9ca3af; --card:#101828; --accent:#60a5fa; --border:#1f2937;
}

/* Reset-ish */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{ background:var(--bg); color:var(--fg); font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; }
h1,h2,h3,h4,p{ margin:0 0 8px; }
ul{ margin:0 0 8px; padding-left:1.25rem; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

/* Layout */
main{ max-width:var(--max); margin:0 auto; padding:calc(var(--space)*1.25) var(--space); }
.site-header{ position:sticky; top:0; background:var(--bg); border-bottom:1px solid var(--border); z-index:10; }
.site-nav{ max-width:var(--max); margin:0 auto; display:flex; align-items:center; gap:16px; padding:8px var(--space); }
.site-nav ul{ display:flex; gap:16px; list-style:none; margin-left:auto; padding:0; }
.theme-toggle{ border:1px solid var(--border); background:var(--card); padding:6px 10px; border-radius:12px; cursor:pointer; }

/* Hero (original layout) */
.hero{ display:grid; grid-template-columns:120px 1fr; gap:24px; align-items:center; margin-block:24px; }
.hero__media img{ width:120px; height:120px; border-radius:24px; object-fit:cover; border:1px solid var(--border); }
.subtitle{ color:var(--muted); margin-top:-4px; }
.hero__actions{ margin-top:8px; }

/* Mobile collapse */
@media (max-width: 640px){
    .hero{ grid-template-columns:1fr; align-items:start; }
    .hero__media{ order:-1; }
}

/* Buttons */
.btn{ display:inline-block; background:var(--accent); color:#fff; padding:10px 14px; border-radius:12px; }
@media (prefers-reduced-motion: no-preference){
    .btn{ transition:transform .15s ease; }
    .btn:hover{ transform:translateY(-1px); }
}

/* Sections */
.cards,.timeline,.skill-groups{ display:grid; gap:16px; }
.cards{ grid-template-columns:1fr; }
@media (min-width: 720px){ .cards{ grid-template-columns:repeat(2,1fr); } }
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.timeline .item{ border-left:2px solid var(--accent); padding-left:12px; }
.timeline .item ul{ margin:8px 0 0; padding-left:1.1rem; }

/* Contact list */
.contact-list{ display:flex; gap:16px; flex-wrap:wrap; list-style:none; padding:0; margin:0; }

/* Footer */
.site-footer{ max-width:var(--max); margin:0 auto; padding:24px var(--space); border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }

/* Accessibility */
.skip-link{ position:absolute; left:-9999px; top:auto; }
.skip-link:focus{ left:8px; top:8px; background:var(--accent); color:#fff; padding:8px; border-radius:8px; }