/* kalli-family.de — "birch and amber": calm northern light, warm accent. System fonts only, no third-party requests. */
:root {
  --bg: #faf8f4;          /* birch paper */
  --ink: #1f2933;         /* deep slate */
  --muted: #5b6672;
  --line: #e4ded4;
  --accent: #b8702a;      /* amber */
  --accent-ink: #7a4614;
  --pine: #2f4f4f;        /* dark pine for headings */
  --sky: #eef3f6;
  --max: 46rem;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#16191d; --ink:#e8e4dc; --muted:#a4adb6; --line:#2c323a; --accent:#d9944a; --accent-ink:#f0c28f; --pine:#cfe0dc; --sky:#1e252c; }
}
* { box-sizing: border-box; }
html { color-scheme: light dark; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--serif); font-size:1.0625rem; line-height:1.6; }
a { color:var(--accent-ink); text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent); text-underline-offset:.15em; }
a:hover { color:var(--accent); }

.site-header { max-width:var(--max); margin:0 auto; padding:1.5rem 1.25rem 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:.75rem 1.5rem; font-family:var(--sans); }
.brand { font-family:var(--serif); font-size:1.35rem; font-weight:600; letter-spacing:.01em; color:var(--pine); text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; margin-right:auto; }
.brand-mark { width:.8em; height:.8em; border-radius:50%; background:var(--accent); box-shadow: -0.55em 0.3em 0 -0.15em var(--pine); }
.site-nav { display:flex; flex-wrap:wrap; gap:1rem; font-size:.95rem; }
.site-nav a { color:var(--muted); text-decoration:none; padding-bottom:.15rem; border-bottom:2px solid transparent; }
.site-nav a[aria-current="page"] { color:var(--ink); border-bottom-color:var(--accent); }
.site-nav a:hover { color:var(--ink); }
.site-nav a.priv { color:var(--accent-ink); }
.lang-switch { font-size:.8rem; }
.lang-switch a { color:var(--muted); text-decoration:none; margin-left:.75rem; }
.lang-switch a:hover { color:var(--ink); }

.page { max-width:var(--max); margin:0 auto; padding:2.5rem 1.25rem 4rem; }
h1 { font-family:var(--serif); font-weight:600; font-size:2.25rem; line-height:1.15; color:var(--pine); margin:0 0 1rem; letter-spacing:-.01em; }
h2 { font-family:var(--serif); font-weight:600; font-size:1.45rem; color:var(--pine); margin:2.25rem 0 .6rem; }
h3 { font-family:var(--sans); font-weight:600; font-size:1.05rem; margin:1.75rem 0 .4rem; color:var(--ink); }
.meta { font-family:var(--sans); color:var(--muted); font-size:.85rem; margin:-.5rem 0 1.5rem; }
.prose p { margin:0 0 1.1rem; }
.prose p.lead { font-size:1.2rem; line-height:1.5; color:var(--ink); }
.prose blockquote { margin:1.5rem 0; padding:.25rem 0 .25rem 1.25rem; border-left:3px solid var(--accent); color:var(--muted); font-style:italic; }
.prose img { max-width:100%; height:auto; border-radius:4px; }
.prose figure { margin:1.75rem 0; }
.prose figcaption { font-family:var(--sans); font-size:.8rem; color:var(--muted); margin-top:.4rem; }
.prose hr { border:0; border-top:1px solid var(--line); margin:2.5rem 0; }
.prose table { border-collapse:collapse; width:100%; font-family:var(--sans); font-size:.9rem; margin:1.25rem 0; }
.prose th, .prose td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
.prose th { color:var(--muted); font-weight:600; }
.prose ul, .prose ol { padding-left:1.4rem; }
.prose li { margin-bottom:.35rem; }
.prose .cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(13rem,1fr)); gap:1rem; margin:1.5rem 0; padding:0; list-style:none; }
.prose .cards li { background:var(--sky); border:1px solid var(--line); border-radius:8px; padding:1rem 1.1rem; margin:0; font-family:var(--sans); font-size:.95rem; }
.prose .cards li strong { display:block; font-family:var(--serif); font-size:1.1rem; color:var(--pine); margin-bottom:.25rem; }
.prose .cards li a { text-decoration:none; }
.prose .timeline { list-style:none; padding:0; margin:1.5rem 0; border-left:2px solid var(--line); }
.prose .timeline li { position:relative; padding:0 0 1.1rem 1.5rem; margin:0; }
.prose .timeline li::before { content:""; position:absolute; left:-.45rem; top:.5rem; width:.75rem; height:.75rem; border-radius:50%; background:var(--accent); border:2px solid var(--bg); }
.prose .timeline time { font-family:var(--sans); font-size:.8rem; color:var(--muted); display:block; }
.prose .note { background:var(--sky); border-left:3px solid var(--pine); padding:.75rem 1rem; border-radius:0 6px 6px 0; font-family:var(--sans); font-size:.92rem; }
.private-badge { display:inline-block; font-family:var(--sans); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); border:1px solid var(--accent); border-radius:999px; padding:.15rem .7rem; margin-bottom:1rem; }
body.private .site-header { border-bottom:2px solid var(--accent); padding-bottom:1rem; }

.site-footer { max-width:var(--max); margin:0 auto; padding:1.5rem 1.25rem 2.5rem; border-top:1px solid var(--line); font-family:var(--sans); font-size:.8rem; color:var(--muted); }
.site-footer a { color:var(--muted); }

body.chooser main { min-height:100vh; display:grid; place-content:center; text-align:center; }
body.chooser .brand { font-size:2rem; display:block; margin:0 0 1rem; }
.langlist { list-style:none; padding:0; margin:0; display:flex; gap:2rem; justify-content:center; font-family:var(--sans); font-size:1.1rem; }

@media (max-width: 40rem) {
  .site-header { padding-top:1rem; }
  h1 { font-size:1.8rem; }
  .page { padding-top:1.75rem; }
}

/* work-in-progress banner */
.wip { background:#fff3dc; color:#5a3a10; border-bottom:2px solid var(--accent); font-family:var(--sans); font-size:.9rem; padding:.6rem 1.25rem; text-align:center; }
.wip strong { text-transform:uppercase; letter-spacing:.06em; font-size:.75rem; margin-right:.5rem; }
@media (prefers-color-scheme: dark) { .wip { background:#3a2a12; color:#f3dcb4; } }

/* blog */
.postlist { list-style:none; padding:0; margin:0 0 1.5rem; }
.postlist li { display:grid; grid-template-columns:7rem 1fr; gap:.75rem; padding:.35rem 0; border-bottom:1px solid var(--line); margin:0; }
.postlist time { font-family:var(--sans); font-size:.85rem; color:var(--muted); }
.post img { display:block; margin:1rem auto; max-height:70vh; width:auto; }
.postnav { display:flex; justify-content:space-between; gap:1rem; margin-top:3rem; padding-top:1rem; border-top:1px solid var(--line); font-family:var(--sans); font-size:.9rem; }
.postnav .next { margin-left:auto; text-align:right; }