:root{
  --bg: #ffffff;
  --fg: #111111;
  --muted: #666666;
  --link: #0b57d0;
  --border: #e5e7eb;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0c0f;
    --fg: #e6e6e6;
    --muted: #a3a3a3;
    --link: #86b7ff;
    --border: #1f2937;
  }
}

/* Manual override via [data-theme] */
[data-theme="light"]{
  --bg: #ffffff;
  --fg: #111111;
  --muted: #666666;
  --link: #0b57d0;
  --border: #e5e7eb;
}
[data-theme="dark"]{
  --bg: #0b0c0f;
  --fg: #e6e6e6;
  --muted: #a3a3a3;
  --link: #86b7ff;
  --border: #1f2937;
}

/* Base typography: monospace system stack */
html{font-size:16px}
body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Ubuntu Mono", "Courier New", monospace;
  line-height:1.6;
  text-rendering: optimizeLegibility;
}

/* Layout */
.container{max-width: 46rem; margin: 0 auto; padding: 1rem}
img, video{max-width:100%; height:auto}
/* Center standalone images in content */
.page-content p > img:only-child,
.page-content p > a:only-child > img{ display:block; margin:1rem auto; }

/* Header */
.site-header{border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:10}
.site-header .container{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap }
.site-header .site-title{font-weight:700; text-decoration:none; color:var(--fg); margin-right:1rem}
.site-nav{ margin-left:auto }
.site-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:.5rem; flex-wrap:wrap}
/* Nicer delimiters: subtle divider using border, accessible and styleable */
.site-nav li{ display:inline-flex; align-items:center; padding-inline:.5rem }
/* Divider with symmetric spacing: rely on equal left/right padding only */
.site-nav li + li{ border-inline-start:1px solid var(--border) }
.site-nav a{color:var(--link); text-decoration:none}
.site-nav a:focus, .site-nav a:hover{ text-decoration: underline; }
/* Theme toggle */
.theme-toggle{ margin-left:auto; background:none; border:1px solid var(--border); color:var(--fg); border-radius:.5rem; padding:.25rem .5rem; cursor:pointer }
.theme-toggle:hover,.theme-toggle:focus-visible{ border-color: var(--muted) }

/* Main */
.page-title{margin-top:0; font-size:1.75rem}
.page-date{color:var(--muted)}
.post-list{list-style:none; margin:0; padding:0}
.post-list li{padding:.75rem 0; border-bottom:1px solid var(--border)}
.post-list .post-link{font-weight:600}
.post-list .post-date{color:var(--muted); margin-left:.5rem; font-size:.9rem}
.post-excerpt{margin:.25rem 0 0 0; color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid var(--border); margin-top:2rem}
.site-footer p{margin:0; color:var(--muted)}
/* Footer layout: one line left/right */
.site-footer .container{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap }
/* Footer theme toggle position */
.site-footer{ position: relative; }
.site-footer .theme-toggle{ position: fixed; right: 1rem; bottom: 1rem; }
/* Footer links */
.footer-links ul{list-style:none; margin:0; padding:0; display:flex; gap:.75rem; flex-wrap:wrap}
.footer-links a{ color: var(--link); text-decoration: none }
.footer-links a:hover, .footer-links a:focus{ text-decoration: underline }

/* Responsive tweaks */
@media (max-width: 640px){
  .container{ padding: .75rem }
  .page-title{ font-size: 1.5rem }
  .site-nav{ width:100%; margin-left:0 }
  .site-nav ul{ gap:.5rem }
  /* On small screens, drop dividers for a cleaner wrap */
  .site-nav li{ padding-inline:.25rem }
  .site-nav li + li{ border-inline-start:none; margin-inline-start:0 }
  .site-footer .container{ flex-direction: column; align-items: flex-start; gap:.5rem }
  .site-footer .theme-toggle{ position: static; margin-top:.25rem }
}

/* Accessible focus ring */
:focus-visible{outline: 2px solid #ffbf47; outline-offset: 2px}

/* Code blocks and preformatted */
code, pre{font-family: inherit}
pre{background: color-mix(in srgb, var(--border) 60%, transparent); padding: .75rem; overflow:auto}

/* ==========================
   CV layout and components
   ========================== */
.cv{ margin-top: 1rem }
.cv-header{ display:grid; grid-template-columns: 1fr 120px; gap: 1rem; align-items: center; }
.cv-name{ font-size: 2rem; margin: 0 }
.cv-headline{ margin:.25rem 0; color: var(--muted) }
.cv-contact{ margin:.25rem 0 }
.cv-avatar{ width:120px; height:auto; border-radius: 50%; border:1px solid var(--border) }

/* Section blocks */
.cv-block{ background: color-mix(in srgb, var(--border) 20%, transparent); border:1px solid var(--border); border-radius:.75rem; padding:1rem; margin-top:1rem }
.cv-block > h2{ margin-top:0; font-size:1.25rem; padding-left:.5rem; border-left:4px solid var(--link) }

/* Two-column sections */
.cv-columns{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top:1rem }
.cv-columns .cv-block{ margin-top:0 }

/* Lists inside CV */
.cv-list{ list-style:none; padding:0; margin:0 }
.cv-list li{ padding:.75rem 0; border-bottom:1px solid var(--border) }
.cv-list li:last-child{ border-bottom:none }
.cv-row-main strong{ font-weight:700 }
.cv-meta{ color: var(--muted); font-size:.95rem; margin:.25rem 0 }
.cv-summary{ margin-top:.25rem }

/* Skills and tags */
.cv-skill-groups{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns: 1fr 1fr; gap:.5rem 1rem }
.cv-skill-groups > li{ padding:.5rem 0; border-bottom:1px dashed var(--border) }
.cv-skill-groups > li:last-child{ border-bottom:none }
.cv-tags{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.25rem }
.tag{ display:inline-block; padding:.15rem .5rem; border:1px solid var(--border); border-radius:999px; background: color-mix(in srgb, var(--border) 25%, transparent); font-size:.85rem }
.cv-tags-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem }

/* Responsive CV tweaks */
@media (max-width: 800px){
  .cv-header{ grid-template-columns: 1fr; text-align:left }
  .cv-avatar{ width:96px }
  .cv-columns{ grid-template-columns: 1fr }
  .cv-skill-groups{ grid-template-columns: 1fr }
}

/* Images */
img{max-width:100%; height:auto}

/* Banner */
.site-banner{ position:sticky; top:0; z-index:999; background: #ffefc1; color:#3b2f00; border-bottom: 1px solid #e5cf84; padding:.5rem 1rem; text-align:center; font-weight:700 }
@media (prefers-color-scheme: dark){
  .site-banner{ background: #3b2f00; color:#ffefc1; border-bottom-color:#705b11 }
}
[data-theme="dark"] .site-banner{ background: #3b2f00; color:#ffefc1; border-bottom-color:#705b11 }

/* CV */
.cv{display:block}
.cv-header{display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--border); padding-bottom:1rem; margin-bottom:1rem}
.cv-name{margin:0; font-size:1.5rem}
.cv-headline{margin:.25rem 0; color:var(--muted)}
.cv-contact{margin:.25rem 0}
.cv-avatar{width:96px; height:96px; object-fit:cover; border-radius:.5rem}
.cv-block{margin:1.25rem 0}
.cv-block h2{margin:.25rem 0 .5rem 0; font-size:1.1rem}
.cv-list{list-style:none; padding:0; margin:0}
.cv-list li{padding:.5rem 0; border-bottom:1px solid var(--border)}
.cv-row{display:flex; gap:1rem}
.cv-row-main{flex:1}
.cv-meta{color:var(--muted); font-size:.9rem}
.cv-summary p{margin:.25rem 0 0 0}
.cv-tags{display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.25rem}
.cv-tags .tag{background: color-mix(in srgb, var(--border) 85%, transparent); border:1px solid var(--border); padding:.1rem .4rem; border-radius:.25rem; font-size:.85rem}
.cv-columns{display:grid; grid-template-columns: 1fr; gap:1rem}
@media(min-width: 800px){ .cv-columns{ grid-template-columns: 1fr 1fr; } }