:root{
  --bg:#19191c;
  --bg-1:#1f1f23;
  --bg-2:#26262b;
  --line:#2a2a30;
  --line-2:#34343b;
  --fg:#e8e4d8;
  --fg-dim:#9aa0a0;
  --fg-mute:#5a6266;
  --accent:#e8e4d8;
  --accent-2:#1ad1ff;
  --glow:#67d4ff;
  --glow-shadow: 0 0 8px rgba(103,212,255,0.16);
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--fg);
  font-family:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size:14px; line-height:1.55;
  font-feature-settings:"ss01","ss02","cv01","cv02";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}

/* ---------- App shell ---------- */
.shell{
  position:relative;
  max-width:920px; margin:0 auto;
  padding:18px 28px 80px;
  min-height:100vh;
}

/* ---------- Header ---------- */
.site-head{
  display:flex; flex-direction:column; gap:14px;
  padding-bottom:14px; margin-bottom:44px;
  border-bottom:1px solid var(--line);
  position:relative;
}
/* the wide breathing room is only meaningful on the post list */
.page-home .site-head{ margin-bottom:96px; }
.head-row{display:flex; justify-content:space-between; align-items:baseline; gap:18px; flex-wrap:wrap}

.name-block{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;}
.wordmark{
  display:inline-block; text-decoration:none;
  color:var(--fg-dim);
  font-family:"Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size:13.5px; line-height:1.2; letter-spacing:0;
  font-weight:400; margin:0;
  transition: color .12s;
}
.wordmark:hover{ color:var(--fg); }

/* ---------- Nav ---------- */
.nav{ display:flex; gap:18px; flex-wrap:wrap; align-items:center;}
.nav a{
  color:var(--fg-dim);
  font-family:"Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size:13.5px; font-weight:400;
  padding:2px 0; text-decoration:none;
  letter-spacing:0;
  transition: color .12s;
}
.nav a:hover{ color:var(--fg); }
.nav a[aria-current="true"]{ color:var(--fg); }

/* ---------- Links list (about page) ---------- */
.contacts{ display:flex; gap:14px; flex-wrap:wrap;}
.contacts a{
  color:var(--glow); text-shadow: var(--glow-shadow);
  text-decoration:none; font-size:11.5px;
  display:inline-flex; align-items:center; gap:6px;
  transition: opacity .15s ease;
}
.contacts a:hover{ opacity:.75; }
.contacts a .key{ color:var(--glow); text-transform:lowercase; font-size:11.5px;}

/* ---------- Post list ---------- */
.post-list{ display:flex; flex-direction:column; gap:0; margin-top:4px}

/* Staggered entrance — pure CSS, plays once on page load */
@keyframes reveal-rise{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}
.reveal{
  animation: reveal-rise .5s cubic-bezier(.2,.6,.2,1) both;
  animation-delay: calc(min(var(--i,0), 12) * 55ms);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ animation:none; }
}

/* Hero (latest post) */
.post-hero{
  display:grid; grid-template-columns: 320px 1fr;
  gap:32px; padding:8px 0 112px;
  border-bottom:1px solid var(--line);
  margin-bottom:0;
  align-items:start;
  text-align:left; text-decoration:none; color:inherit; width:100%;
}
.post-hero:hover .hero-title{
  text-decoration:underline; text-decoration-color:var(--fg-mute);
  text-underline-offset:5px;
}
.post-hero:hover .hero-thumb{ border-color:var(--fg-mute);}

.hero-thumb{
  width:100%; aspect-ratio: 16 / 10;
  background:var(--bg-2);
  border:1px solid var(--line);
  overflow:hidden; position:relative;
  transition: border-color .15s;
}
.hero-thumb img{ width:100%; height:100%; object-fit:cover; display:block;}

.hero-body{ padding-top:2px; display:flex; flex-direction:column;}
.hero-eyebrow{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--glow); text-shadow: var(--glow-shadow);
  margin-bottom: 16px;
}
.hero-title{
  font-family:"JetBrains Mono", monospace;
  font-size:24px; font-weight:400; color:var(--fg);
  margin:0 0 14px; line-height:1.25; letter-spacing:-0.01em;
}
.hero-excerpt{
  color:#c8c5b8; font-size:14px; line-height:1.7; margin:0 0 16px;
  max-width: 60ch;
}
.hero-meta{
  display:flex; gap:10px; align-items:center;
  font-size:10.5px; color:var(--fg-mute); letter-spacing:.06em;
  text-transform:uppercase; margin:0;
}

/* Compact post rows */
.post{
  display:grid; grid-template-columns: 96px 1fr;
  gap:22px; padding:18px 0;
  border-bottom:1px solid var(--line);
  align-items:start;
  text-align:left; text-decoration:none; color:inherit; width:100%;
  position:relative; overflow:hidden;
}
.post:first-child{border-top:0}
.post:last-child{border-bottom:0}
.post:hover .post-title{
  color:var(--accent);
  text-decoration:underline; text-decoration-color:var(--fg-mute);
  text-underline-offset:4px;
}
.post:hover .thumb{border-color:var(--fg-mute);}

.thumb{
  width:96px; height:64px; background:var(--bg-2);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
  transition: border-color .15s;
}
.thumb img{width:100%; height:100%; object-fit:cover; display:block;}

.post-body{position:relative}
.post-meta-row{
  display:flex; gap:10px; align-items:center;
  font-size:10.5px; color:var(--fg-mute);
  letter-spacing:.06em; margin-bottom:6px; text-transform:uppercase;
}
.post-title{
  font-size:17px; font-weight:400; color:var(--fg); margin:0 0 5px 0;
  letter-spacing:-0.005em; line-height:1.35;
  transition:color .15s;
}
.post-excerpt{
  color:var(--fg-mute); font-size:12.5px; line-height:1.55; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ---------- Article reading ---------- */
.article-head{display:flex; flex-direction:column; gap:8px; margin-bottom:24px}
.article-head h1{
  font-family:"JetBrains Mono", monospace;
  font-size:32px; line-height:1.15; letter-spacing:-0.015em;
  font-weight:400; margin:0; color:var(--fg);
}
.article-head .meta{
  display:flex; gap:18px; font-size:11px; color:var(--fg-mute);
  letter-spacing:.06em; text-transform:uppercase; flex-wrap:wrap;
}
.article-head .meta b{color:var(--fg-dim); font-weight:500}

.article-body{ max-width:100%; }
.article-body p{
  margin:0 0 22px;
  color:var(--fg-dim);
  font-family:"Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size:15.5px; line-height:1.78; font-weight:400;
  letter-spacing:0;
}
.article-body a{ color:var(--fg); text-decoration:underline; text-decoration-color:var(--fg-mute); text-underline-offset:3px;}
.article-body a:hover{ text-decoration-color:var(--fg);}
.article-body h2{
  font-family:"JetBrains Mono", monospace;
  font-size:22px; font-weight:400; color:var(--fg);
  text-transform:none; letter-spacing:-0.01em;
  margin:56px 0 20px; line-height:1.3;
}
.article-body h3{
  font-family:"JetBrains Mono", monospace;
  font-size:17px; font-weight:400; color:var(--fg);
  margin:40px 0 16px; line-height:1.3;
}
.article-body code{
  background:var(--bg-2); border:1px solid var(--line);
  padding:1px 6px; font-size:13px;
  color:var(--fg);
  font-family:"JetBrains Mono", monospace;
}
.article-body pre{
  background:var(--bg-1); border:1px solid var(--line);
  padding:18px 20px; overflow:auto;
  font-family:"JetBrains Mono", monospace;
  font-size:12.5px; line-height:1.7;
  margin:24px 0; color:#bdbab0;
  position:relative;
}
.article-body pre code{
  background:transparent; border:0; padding:0; font-size:inherit; color:inherit;
}
.article-body pre[data-lang]::before{
  content:attr(data-lang); position:absolute; top:-8px; right:10px;
  background:var(--bg); padding:0 6px; font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-mute);
}

.article-body blockquote{
  margin:24px 0; padding:6px 22px;
  border-left:1px solid var(--line-2);
  color:var(--fg-dim); font-style:italic;
  background:transparent;
}
.article-body blockquote p{
  font-family:"Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size:15.5px; line-height:1.78; margin:0;
}
.article-body ul, .article-body ol{
  padding-left:26px; color:var(--fg-dim);
  font-family:"Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size:15.5px; line-height:1.78;
  margin:0 0 22px;
}
.article-body ul{ list-style: disc outside; }
.article-body ol{ list-style: decimal outside; }
.article-body ul ul{ list-style: circle outside; }
.article-body ul ul, .article-body ul ol,
.article-body ol ul, .article-body ol ol{ margin:6px 0 6px; }
.article-body li{ margin-bottom:8px; padding-left:4px; }
.article-body li::marker{ color:var(--fg-mute); }

/* Figures — images & GIFs render here */
.figure{
  margin:32px 0; border:1px solid var(--line); padding:6px;
  background:var(--bg-1); text-align:center;
}
/* never upscale small images — show them at native size, centered.
   very tall images are capped to ~one screen, aspect ratio preserved. */
.figure img{
  display:block; max-width:100%; width:auto; height:auto;
  max-height:80vh;
  margin:0 auto;
  border:1px solid var(--line); background:var(--bg-2);
}
.figure figcaption{
  font-size:11px; color:var(--fg-mute); padding:10px 6px 4px;
  letter-spacing:.04em; display:flex; gap:10px;
}
.figure figcaption .lbl{color:var(--fg-dim); text-transform:uppercase; white-space:nowrap;}

.article-foot{
  margin-top:24px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; color:var(--fg-mute); text-transform:uppercase; letter-spacing:.08em;
}
.article-foot a{ color:var(--fg-mute); text-decoration:none;}
.article-foot a:hover{ color:var(--fg);}

/* Article prev/next + list pagination navigation */
.article-nav{
  margin-top:64px; padding-top:32px;
  border-top:1px solid var(--line);
  display:grid; grid-template-columns: 1fr 1fr; gap:48px;
}
.page-nav{ margin-top:40px; }
.article-nav .nav-cell{ min-height:1px; }
.article-nav .nav-older{ text-align:right;}
.article-nav a{
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:8px;
  text-align:inherit; width:100%;
}
.article-nav .nav-older a{ align-items:flex-end;}
.article-nav a:hover .nav-title{
  text-decoration:underline; text-decoration-color:var(--fg-mute);
  text-underline-offset:4px;
}
.article-nav .nav-label{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--glow); text-shadow: var(--glow-shadow);
}
.article-nav .nav-title{
  font-family:"JetBrains Mono", monospace;
  font-size:14px; line-height:1.45; color:var(--fg);
  letter-spacing:-0.005em;
}

/* ---------- About page ---------- */
/* Two columns: left intentionally empty, links sit on the right. */
.about-cols{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }

/* ---------- Shared utilities ---------- */
.small{font-size:10.5px; color:var(--fg-mute); letter-spacing:.08em; text-transform:uppercase}
.section-glow{
  color:var(--glow) !important;
  text-shadow: var(--glow-shadow);
}
.hr{ border-top:1px dashed var(--line); margin:18px 0;}

/* ---------- Responsive ---------- */
@media (max-width:720px){
  .shell{padding:18px 16px}
  .site-head{margin-bottom:26px}
  .page-home .site-head{margin-bottom:56px}
  .post-hero{grid-template-columns: 1fr; gap:18px; padding-bottom:72px; margin-bottom:0;}
  .hero-thumb{aspect-ratio:16/9}
  .hero-title{font-size:20px}
  .post{grid-template-columns: 80px 1fr; gap:16px}
  .thumb{width:80px; height:54px}
  .article-nav{ grid-template-columns:1fr; gap:24px;}
  .article-nav .nav-older{ text-align:left;}
  .article-nav .nav-older a{ align-items:flex-start;}
  .about-cols{ grid-template-columns:1fr; gap:48px;}
  .embed--video{ margin:22px 0; }
}

/* ---------- Video embeds (Vimeo / YouTube) ---------- */
.embed{ margin:28px 0; }
.embed--video{
  position:relative; width:100%; aspect-ratio:16/9;
  background:#000; border:1px solid var(--line);
}
.embed--video iframe{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; display:block;
}

/* ---------- Code highlighting (Pygments, dark) ---------- */
.article-body pre.codeblock{ tab-size:4; -moz-tab-size:4; }
.article-body pre code .hll{ background:rgba(103,212,255,.08); display:block; }
.article-body pre code .c,
.article-body pre code .c1,
.article-body pre code .cm,
.article-body pre code .cs{ color:var(--fg-mute); font-style:italic; }
.article-body pre code .cp,
.article-body pre code .cpf{ color:#c39ac9; }            /* preprocessor */
.article-body pre code .k,
.article-body pre code .kc,
.article-body pre code .kn,
.article-body pre code .kr,
.article-body pre code .kd{ color:var(--glow); }          /* keywords */
.article-body pre code .kt{ color:var(--accent-2); }      /* types */
.article-body pre code .s,
.article-body pre code .s1,
.article-body pre code .s2,
.article-body pre code .sb,
.article-body pre code .sc,
.article-body pre code .sd,
.article-body pre code .se,
.article-body pre code .sh,
.article-body pre code .si,
.article-body pre code .sr,
.article-body pre code .ss,
.article-body pre code .sx{ color:#a7c080; }              /* strings */
.article-body pre code .m,
.article-body pre code .mi,
.article-body pre code .mf,
.article-body pre code .mh,
.article-body pre code .mo,
.article-body pre code .il{ color:#d8a657; }              /* numbers */
.article-body pre code .nf,
.article-body pre code .fm{ color:var(--fg); }            /* function names */
.article-body pre code .nc,
.article-body pre code .nn,
.article-body pre code .nd,
.article-body pre code .ne{ color:#7fd6c2; }              /* classes/decorators */
.article-body pre code .nb,
.article-body pre code .bp{ color:var(--accent-2); }      /* builtins */
.article-body pre code .o,
.article-body pre code .ow,
.article-body pre code .p{ color:var(--fg-dim); }         /* operators/punct */
.article-body pre code .err{ color:#ff6b6b; }

/* ---------- Cross-browser / device hardening ---------- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
img{ max-width:100%; }
a{ -webkit-tap-highlight-color: rgba(103,212,255,.18); }
.shell{ min-height:100svh; }
.article-body{ overflow-wrap:break-word; word-wrap:break-word; }
.article-body pre{ -webkit-overflow-scrolling:touch; max-width:100%; }
.article-body :not(pre) > code{ overflow-wrap:anywhere; word-break:break-word; }

/* aspect-ratio fallback for older Safari / iOS < 15 */
@supports not (aspect-ratio: 1 / 1){
  .embed--video{ height:0; padding-bottom:56.25%; }
  .hero-thumb{ height:0; padding-bottom:62.5%; }
  .hero-thumb img{ position:absolute; inset:0; }
}