/* ---- Colors: change --accent to recolor the whole site ---- */
:root {
  --bg: #ffffff;
  --text: #111111;
  --muted: #6b6b6b;
  --line: #e6e6e6;
  --card: #fafafa;
  --accent: #e85d00;
  --max: 720px;
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Charter", Georgia, serif;
}
/* Dark mode: follows the system unless the toggle picked a theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#0e0e0e; --text:#ededed; --muted:#9a9a9a; --line:#262626; --card:#151515; --accent:#ff7a1a; }
}
:root[data-theme="dark"] { --bg:#0e0e0e; --text:#ededed; --muted:#9a9a9a; --line:#262626; --card:#151515; --accent:#ff7a1a; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.65 var(--font); }
a { color:inherit; text-decoration-color:var(--accent); text-underline-offset:3px; }
a:hover { color:var(--accent); }
img { max-width:100%; height:auto; }
.container { max-width:var(--max); margin:0 auto; padding:0 20px; }
main.container { padding-top:48px; padding-bottom:80px; min-height:70vh; }

/* Header */
.site-header { border-bottom:1px solid var(--line); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:14px; padding-bottom:14px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; letter-spacing:.01em; }
.brand .logo { width:34px; height:34px; }
.brand:hover { color:var(--text); }
.brand:hover .logo { color:var(--accent); }
.nav { display:flex; flex-wrap:wrap; gap:4px 18px; font-size:15px; }
.nav a { text-decoration:none; color:var(--muted); }
.nav a:hover, .nav a.active { color:var(--text); }
.nav a.active { box-shadow: inset 0 -2px 0 var(--accent); }

/* Theme toggle */
.header-right { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.theme-toggle { background:none; border:0; padding:4px; margin:0; cursor:pointer; color:var(--muted); display:inline-flex; line-height:0; }
.theme-toggle:hover { color:var(--accent); }
.theme-toggle .icon { width:18px; height:18px; }
.theme-toggle .moon { display:none; }
:root[data-theme="dark"] .theme-toggle .sun { display:none; }
:root[data-theme="dark"] .theme-toggle .moon { display:inline; }

/* Home */
.hero { text-align:center; padding:24px 0 40px; }
.hero-logo .logo { width:120px; height:120px; }
.hero h1 { font-size:2.4rem; margin:.3em 0 .2em; letter-spacing:-.02em; }
.hero .lead { color:var(--muted); font-size:1.15rem; max-width:560px; margin:0 auto; }
.hero .social { justify-content:center; margin-top:22px; }
.home-sections { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; margin:24px 0 56px; }

/* Social */
.social { display:flex; flex-wrap:wrap; gap:8px 18px; }
.social a { display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--muted); font-size:15px; }
.social a:hover { color:var(--accent); }
.icon { width:18px; height:18px; }
.social.small span { display:none; }

/* Cards */
.card { display:block; padding:18px 20px; border:1px solid var(--line); border-radius:10px; background:var(--card); text-decoration:none; transition:border-color .15s, transform .15s; }
.card:hover { border-color:var(--accent); color:inherit; transform:translateY(-1px); }
.card h3 { margin:0 0 4px; font-size:1.05rem; }
.card p { margin:0; color:var(--muted); font-size:15px; }
.card p.meta { margin-bottom:6px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:14px; }
.recipe-card img { border-radius:6px; margin-bottom:10px; aspect-ratio:4/3; object-fit:cover; width:100%; }
.project-list { display:grid; gap:14px; }
.project-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.badge { font-size:12px; text-transform:uppercase; letter-spacing:.06em; border:1px solid var(--accent); color:var(--accent); border-radius:99px; padding:1px 9px; white-space:nowrap; }

/* Pages */
.page-header { margin-bottom:28px; }
.page-header h1 { font-size:2rem; margin:0 0 .3em; letter-spacing:-.02em; }
.page-header .lead { color:var(--muted); font-size:1.08rem; }
.page-header .lead p { margin:.4em 0; }
.section-title { font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:600; margin:48px 0 16px; }
.meta { color:var(--muted); font-size:14px; }
.more { font-size:15px; }
.button { display:inline-block; padding:9px 18px; border:1px solid var(--text); border-radius:6px; text-decoration:none; font-weight:500; }
.button:hover { background:var(--text); color:var(--bg); }

/* Post list */
.post-list { list-style:none; padding:0; margin:0; }
.post-list li { padding:14px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr auto; gap:2px 16px; }
.post-list li > a { font-weight:500; text-decoration:none; }
.post-list li p { grid-column:1/-1; margin:0; color:var(--muted); font-size:15px; }

/* Article */
.prose h2 { margin-top:2em; font-size:1.35rem; }
.prose h3 { margin-top:1.6em; font-size:1.1rem; }
.prose blockquote { margin:1.5em 0; padding-left:16px; border-left:3px solid var(--accent); color:var(--muted); }
.prose code { font-size:.9em; background:var(--card); border:1px solid var(--line); border-radius:4px; padding:1px 5px; }
.prose pre { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px; overflow-x:auto; }
.prose pre code { border:0; padding:0; }
.prose table { border-collapse:collapse; width:100%; font-size:15px; }
.prose th, .prose td { border-bottom:1px solid var(--line); padding:6px 8px; text-align:left; }
.hero-image { border-radius:10px; margin-bottom:24px; }
.portrait { width:140px; height:140px; border-radius:50%; object-fit:cover; float:right; margin:0 0 16px 24px; filter:grayscale(1); }
.tags a { margin-right:12px; font-size:14px; color:var(--muted); text-decoration:none; }
.tags a:hover { color:var(--accent); }

/* Recipe meta */
.recipe-meta { display:flex; flex-wrap:wrap; gap:10px 32px; margin:12px 0 0; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.recipe-meta dt { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.recipe-meta dd { margin:0; font-weight:500; }

/* Timeline */
.timeline { list-style:none; padding:0; margin:0; border-left:2px solid var(--line); clear:both; }
.timeline li { position:relative; display:grid; grid-template-columns:110px 1fr; gap:16px; padding:0 0 26px 22px; }
.timeline li::before { content:""; position:absolute; left:-7px; top:7px; width:12px; height:12px; border-radius:50%; background:var(--bg); border:2px solid var(--text); }
.timeline li.current::before { background:var(--accent); border-color:var(--accent); }
.timeline .when { color:var(--muted); font-size:14px; padding-top:2px; font-variant-numeric:tabular-nums; }
.timeline h3 { margin:0; font-size:1rem; }
.timeline .org { font-weight:400; color:var(--muted); }
.timeline p { margin:4px 0 0; color:var(--muted); font-size:15px; }

/* CV lists (education, awards, ...) */
.cv-list { list-style:none; padding:0; margin:0; }
.cv-list li { display:grid; grid-template-columns:110px 1fr; gap:16px; padding:10px 0 10px 22px; border-bottom:1px solid var(--line); }
.cv-list li:last-child { border-bottom:0; }
.cv-list .when { color:var(--muted); font-size:14px; padding-top:2px; font-variant-numeric:tabular-nums; }
.cv-list h3 { margin:0; font-size:1rem; font-weight:500; }
.cv-list p { margin:2px 0 0; color:var(--muted); font-size:15px; }

/* Footer */
.site-footer { border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
.footer-inner { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:22px; padding-bottom:22px; flex-wrap:wrap; }

@media (max-width:560px) {
  body { font-size:16px; }
  .hero h1 { font-size:1.9rem; }
  .timeline li, .cv-list li { grid-template-columns:1fr; gap:2px; }
  .portrait { float:none; display:block; margin:0 0 16px; }
  .brand-name { display:none; }
}

/* Links inside CV entries */
.timeline h3 a, .cv-list a { text-decoration:underline; text-decoration-color:var(--muted); text-decoration-thickness:1px; }
.timeline h3 a:hover, .cv-list a:hover { text-decoration-color:var(--accent); }
.hero .lead strong { color:var(--text); font-weight:600; }