:root {
    --font: 'Space Grotesk', -apple-system, sans-serif;
    --mono: 'Space Mono', monospace;
}

[data-theme="dark"] {
    --bg: #1a1a1a;
    --text: #d4d4d4;
    --text-2: #777;
    --link: #7eb8da;
    --link-h: #aed4ed;
    --hl: rgba(126,184,218,0.1);
    --hr: #2a2a2a;
    --avatar-border: #333;
}
[data-theme="light"] {
    --bg: #f7f6f3;
    --text: #222;
    --text-2: #888;
    --link: #1a6fa0;
    --link-h: #104b6e;
    --hl: rgba(26,111,160,0.08);
    --hr: #ddd;
    --avatar-border: #ccc;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    transition: background .3s, color .3s;
}

::selection { background: var(--link); color: var(--bg); }

a { color: var(--link); text-decoration:none; }
a:hover { color: var(--link-h); }
.hl { background: var(--hl); padding:1px 4px; border-radius:3px; }
strong { font-weight:600; }
.muted { color: var(--text-2); }

/* Layout */
.page {
    max-width: 620px;
    margin: 0 auto;
    padding: 0 24px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header */
.header {
    display:flex; justify-content:space-between; align-items:center;
    padding: 28px 0; flex-wrap:wrap; gap:8px;
}
.logo { font-weight:700; font-size:15px; color:var(--text); letter-spacing:-0.02em; }
.logo:hover { color:var(--link); }

.nav-links { display:flex; align-items:center; gap:18px; }
.nav-links a { font-size:14px; color:var(--text-2); }
.nav-links a:hover { color:var(--text); }

.theme-btn {
    width:18px; height:18px; border-radius:50%;
    border: 2px solid var(--text-2); background:none;
    cursor:pointer; transition: border-color .2s;
    padding:0; margin-left:4px;
}
.theme-btn:hover { border-color:var(--link); }
[data-theme="dark"] .theme-btn { background:none; }
[data-theme="light"] .theme-btn { background:var(--text-2); }

/* Intro */
.intro { display:flex; gap:20px; align-items:flex-start; margin:16px 0 0; }
.avatar {
    width:80px; height:80px; border-radius:50%; object-fit:cover; margin-top: -20px;
    object-position:center 25%; flex-shrink:0;
    border: 2px solid var(--avatar-border);
}

/* Content */
main p { margin-bottom:12px; }
main p:last-child { margin-bottom:0; }

h1 { font-size:28px; font-weight:700; letter-spacing:-0.02em; margin-bottom:8px; }
h2 { font-size:18px; font-weight:700; margin-bottom:14px; }
h3 { font-size:16px; font-weight:600; margin-bottom:8px; }

section { margin:0; }
hr { border:none; border-top:1px solid var(--hr); margin:28px 0; }

ul { list-style:disc; padding-left:20px; }
ul li { margin-bottom:10px; }
ul.flat { list-style:none; padding:0; display:flex; gap:18px; flex-wrap:wrap; }
ul.flat li { margin:0; }

/* Subpages */
.back { display:inline-block; font-size:14px; color:var(--text-2); margin-bottom:20px; }
.back:hover { color:var(--text); }

.post-meta { font-family:var(--mono); font-size:13px; color:var(--text-2); margin-bottom:24px; }

/* Content page favorites */
li.fav a { color:#e55; }
li.fav a:hover { color:#f77; }

.post-body h3 { margin-top:28px; }
.post-body p { margin-bottom:16px; }
.post-body blockquote {
    border-left:3px solid var(--hr);
    padding-left:16px;
    color:var(--text-2);
    margin:20px 0;
    font-style:italic;
}

/* CV */
.cv-section { margin-bottom:28px; }
.cv-section h3 {
    font-size:12px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.08em; color:var(--text-2);
    border-bottom:1px solid var(--hr); padding-bottom:6px; margin-bottom:14px;
}
.cv-entry { margin-bottom:18px; }
.cv-entry-top { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; }
.cv-entry h4 { font-size:15px; font-weight:600; }
.cv-date { font-family:var(--mono); font-size:12px; color:var(--text-2); }
.cv-role { font-size:14px; color:var(--text-2); }
.cv-desc { font-size:14px; color:var(--text-2); margin-top:4px; line-height:1.6; }

.cv-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.cv-tag { font-size:12px; padding:2px 8px; border:1px solid var(--hr); border-radius:3px; color:var(--text-2); }

/* Footer */
footer {
    margin-top:auto; padding:24px 0; font-size:12px; color:var(--text-2);
    border-top:1px solid var(--hr);
}

/* Responsive */
@media (max-width:600px) {
    .page { padding:0 16px; }
    .header { padding:16px 0; }
    .nav-links { gap:12px; }
    .nav-links a { font-size:13px; }

    .intro { flex-direction:column; gap:14px; align-items:flex-start; text-align:left; }
    .avatar { width:72px; height:72px; margin-top:0; align-self:flex-start; }

    h1 { font-size:24px; }
    h2 { font-size:16px; }
    body { font-size:15px; }

    ul { padding-left:16px; }
    ul.flat { flex-direction:column; gap:6px; }

    .cv-entry-top { flex-direction:column; gap:2px; }

    footer { text-align:center; }
}

@media (max-width:380px) {
    .nav-links { gap:8px; }
    .nav-links a { font-size:12px; }
    .page { padding:0 12px; }
}