:root {
  --bg:   #fbfbf9;
  --fg:   #16181c;
  --dim:  #6b7280;
  --link: #0b57d0;
  --rule: #d8d8d2;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#101215; --fg:#d6d9dd; --dim:#8b929c; --link:#7aa7f5; --rule:#2a2e34; }
}

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.65 ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  max-width: 42rem;
  margin: 0 auto;
  padding: 2rem 1.2rem 4rem;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

header { display: flex; justify-content: space-between; gap: 1rem;
         padding-bottom: .8rem; border-bottom: 1px solid var(--rule); margin-bottom: 2rem; }
header .site { color: var(--fg); font-weight: 700; }
header nav a { margin-left: 1rem; }

h1 { font-size: 1.35rem; line-height: 1.3; margin: 0 0 .4rem; }
h2 { font-size: 1.05rem; margin: 2rem 0 .6rem; color: var(--dim); font-weight: 700; }
h3 { font-size: 1rem; margin: 1.8rem 0 .4rem; }
.intro { color: var(--dim); margin: 0 0 1rem; }
.meta  { color: var(--dim); margin: 0 0 1.6rem; font-size: .85rem; }
.more  { margin-top: 2.5rem; }

/* post lists ------------------------------------------------------------- */
ul.posts { list-style: none; padding: 0; margin: 0; }
ul.posts li { display: flex; gap: .9rem; align-items: baseline; padding: .28rem 0; }
ul.posts time { color: var(--dim); font-size: .82rem; flex: none; }

/* language filter: pure CSS, no script ----------------------------------- */
.filter { margin: 1.2rem 0 0; }
.filter input { position: absolute; opacity: 0; pointer-events: none; }
.filter label { color: var(--dim); cursor: pointer; margin-right: .9rem; font-size: .85rem; }
.filter label:hover { color: var(--fg); }
.filter input:checked + label { color: var(--fg); text-decoration: underline; }
#f-en:checked ~ #post-list li:not([data-lang="en"]) { display: none; }
#f-fi:checked ~ #post-list li:not([data-lang="fi"]) { display: none; }

/* article content -------------------------------------------------------- */
article p { margin: 1.1rem 0; }
article img { max-width: 100%; height: auto; display: block; }
figure { margin: 1.8rem 0; }
figcaption { color: var(--dim); font-size: .82rem; margin-top: .4rem; }
blockquote { margin: 1.4rem 0; padding-left: 1rem;
             border-left: 2px solid var(--rule); color: var(--dim); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
td, th { border: 1px solid var(--rule); padding: .35rem .5rem; text-align: left; }
math { font-size: 1.05em; }
mjx-container, math[display="block"] { overflow-x: auto; max-width: 100%; }