/* dompajak.com/blog self-contained build-journal styles (light/dark). */
:root{
  --bg:#fafaf8; --ink:#14151a; --ink-soft:#5b6070; --line:#e6e6e2;
  --primary:#7233F7; --card:#fff; --code:#f4f2fb;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#15151a; --ink:#ececf0; --ink-soft:#9a9aa6; --line:#2a2a33;
    --primary:#a987ff; --card:#1d1d25; --code:#1d1b29; }
}
*{box-sizing:border-box}
body{
  font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); background:var(--bg); margin:0;
  -webkit-font-smoothing:antialiased;
}
.site{
  display:flex; gap:1.25rem; align-items:center;
  max-width:720px; margin:0 auto; padding:1.1rem 1.25rem;
  font-size:.9rem; border-bottom:1px solid var(--line);
}
.site a{color:var(--ink-soft); text-decoration:none}
.site a:hover{color:var(--primary)}
.site .home{font-weight:700; color:var(--ink); margin-right:auto}
footer.site{border-bottom:none; border-top:1px solid var(--line); margin-top:3rem; color:var(--ink-soft)}

main{max-width:720px; margin:0 auto; padding:2rem 1.25rem 0}
.meta{color:var(--ink-soft); font-size:.85rem; margin:0 0 .4rem}
h1{font-size:clamp(1.9rem,5vw,2.6rem); line-height:1.12; letter-spacing:-.02em; margin:.2rem 0 1.2rem}
h2{font-size:1.5rem; letter-spacing:-.01em; margin:2.4rem 0 .8rem}
h3{font-size:1.2rem; margin:1.8rem 0 .6rem}
h2 .anchor,h3 .anchor{
  text-decoration:none; color:var(--primary); opacity:0; margin-left:-1.1em;
  padding-right:.35em; float:left; font-weight:400;
}
h2:hover .anchor,h3:hover .anchor{opacity:.6}
p{margin:0 0 1.1rem}
a{color:var(--primary)}
img,video{max-width:100%; height:auto; border-radius:10px; display:block; margin:1.4rem 0}
video{max-height:80vh; margin-left:auto; margin-right:auto; background:#000}
figure{margin:1.6rem 0}
figure img,figure video{margin:0 auto}
figcaption{font-size:.85rem; color:var(--ink-soft); text-align:center; margin-top:.5rem}
ul,ol{margin:0 0 1.1rem; padding-left:1.3rem}
li{margin:.3rem 0}
blockquote{
  margin:1.4rem 0; padding:.4rem 0 .4rem 1.1rem;
  border-left:3px solid var(--primary); color:var(--ink-soft); font-style:italic;
}
code{background:var(--code); padding:.15em .4em; border-radius:5px; font-size:.88em}
pre{background:var(--code); padding:1rem 1.1rem; border-radius:10px; overflow:auto; margin:1.4rem 0}
pre code{background:none; padding:0}
hr{border:none; border-top:1px solid var(--line); margin:2.4rem 0}

.toc{
  border:1px solid var(--line); border-radius:12px; padding:1rem 1.2rem;
  margin:0 0 2rem; background:var(--card); font-size:.92rem;
}
.toc p{font-weight:700; margin:0 0 .5rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft)}
.toc ul{list-style:none; margin:0; padding:0}
.toc li.l3{padding-left:1rem}
.toc a{text-decoration:none; color:var(--ink-soft)}
.toc a:hover{color:var(--primary)}

.tags{margin:2.5rem 0 0; display:flex; flex-wrap:wrap; gap:.45rem}
.tag{font-size:.78rem; color:var(--primary); background:var(--code); padding:.2rem .6rem; border-radius:999px; text-decoration:none}
.tag:hover{background:var(--primary); color:#fff}

/* index — slightly wider than the 720px article measure so titles fit on one line */
.index{max-width:720px}
.index .lead{color:var(--ink-soft); font-size:1.1rem; margin-bottom:2rem}
.post-list{list-style:none; margin:0; padding:0}
.post-link{display:flex; gap:1.1rem; align-items:center; text-decoration:none; color:inherit; padding:1.2rem 0; border-top:1px solid var(--line)}
.post-link:hover .i-title{color:var(--primary)}
.i-thumb{width:168px; height:110px; object-fit:cover; border-radius:8px; flex:0 0 auto; background:var(--code)}
.i-thumb-blank{display:block}
.i-body{min-width:0}
.i-date{display:block; font-size:.8rem; color:var(--ink-soft)}
.i-title{display:block; font-size:1.25rem; font-weight:700; letter-spacing:-.01em; margin:.15rem 0 .3rem; text-wrap:pretty}
.i-desc{display:block; color:var(--ink-soft); font-size:.95rem}
@media (max-width:520px){ .i-thumb{width:120px; height:80px} }