/* Minimal Black — tokens taken from the supplied design */
:root{
  --bg:#141312; --s-lowest:#0f0e0d; --s-low:#1c1b1a; --s:#201f1e; --s-high:#2b2a29; --s-highest:#363433;
  --text:#e6e2df; --muted:#c7c8b4; --outline:#909280; --line:#464839;
  --accent:#bbd068; --accent-dim:#879a39; --on-accent-dim:#252e00; --blue:#98cbff; --beige:#cac6bc;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);
  font:400 17px/28px var(--serif);-webkit-font-smoothing:antialiased;overflow-x:clip;padding-bottom:5rem}
@media(min-width:768px){body{padding-bottom:0}}
::selection{background:var(--accent-dim);color:var(--on-accent-dim)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.wrap{width:100%;max-width:720px;margin-inline:auto;padding-inline:1.25rem}
@media(min-width:768px){.wrap{padding-inline:2.5rem}}
main.wrap{flex:1;padding-block:2rem}

/* header / nav */
.site-header{border-bottom:1px solid var(--s-highest)}
.site-header .wrap{display:flex;justify-content:space-between;align-items:center;padding-block:1.75rem}
.brand{font:500 14px/20px var(--mono);letter-spacing:.02em;transition:color .15s}
.brand b{font-weight:400;color:var(--accent)}
.brand:hover{color:var(--accent)}
.nav{display:none;gap:1rem;font:400 13px/18px var(--mono);letter-spacing:.01em}
@media(min-width:768px){.nav{display:flex}}
.nav a{color:var(--muted);padding-bottom:2px;border-bottom:1px solid transparent;transition:color .15s}
.nav a:hover,.nav a.is-current{color:var(--accent)}
.nav a.is-current{border-color:var(--accent)}
.m-nav{position:fixed;inset:auto 0 0 0;z-index:50;display:flex;justify-content:space-around;background:var(--bg);
  border-top:1px solid var(--s-highest);padding:.5rem 1rem calc(.5rem + env(safe-area-inset-bottom))}
.m-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);font:400 11px/16px var(--mono);letter-spacing:.04em}
.m-nav a.is-current{color:var(--accent)}
.m-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:768px){.m-nav{display:none}}

/* footer */
.site-footer{border-top:1px solid var(--s);margin-top:3rem}
.site-footer .wrap{display:flex;flex-direction:column;gap:.5rem;padding-block:1.75rem;font:400 11px/16px var(--mono);letter-spacing:.04em;color:var(--muted)}
@media(min-width:768px){.site-footer .wrap{flex-direction:row;justify-content:space-between;align-items:center}}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.foot-links a{transition:color .15s}
.foot-links a:hover{color:var(--text)}
.status{display:inline-flex;align-items:center;gap:.4rem}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* shared bits */
.meta-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-bottom:1px solid var(--line);
  padding-bottom:.75rem;margin-bottom:2rem;font:400 11px/16px var(--mono);letter-spacing:.04em;color:var(--muted)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:.5rem;vertical-align:middle}
.dot-sm{width:6px;height:6px}
.term{border:1px solid var(--line);background:var(--s);border-radius:4px;padding:.75rem 1.25rem;margin-bottom:2rem;font:400 12px/18px var(--mono);letter-spacing:.02em}
.term-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.25rem 1rem}
.term-row+.term-row{border-top:1px solid var(--s-highest);margin-top:.6rem;padding-top:.6rem;color:var(--muted)}
.term .cmd{color:var(--accent)}
.term a:hover{color:var(--accent)}
.display{margin:0 0 1rem;font:400 34px/42px var(--serif);letter-spacing:-.015em;overflow-wrap:break-word}
@media(min-width:768px){.display{font-size:48px;line-height:56px;letter-spacing:-.02em}}
.display em{font-style:italic;color:var(--beige)}
.lead{margin:0;font:400 20px/32px var(--serif);color:var(--muted)}
.plain-link:hover{color:var(--accent)}

.filter{display:flex;align-items:center;gap:.75rem;margin:1.5rem 0 1rem;padding:.65rem 1rem;border:1px solid var(--line);
  background:var(--s);border-radius:4px;font:400 13px/18px var(--mono)}
.filter:focus-within{border-color:var(--accent-dim)}
.filter>span{color:var(--accent)}
.filter input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:inherit}
.filter input::placeholder{color:var(--outline)}
.filter kbd{font:400 11px/14px var(--mono);color:var(--outline);max-width:5rem;text-align:left}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.chip{font:400 12px/16px var(--mono);border:1px solid var(--line);background:var(--s-low);color:var(--muted);
  padding:.3rem .65rem;border-radius:4px;text-transform:lowercase;cursor:pointer;transition:border-color .15s,color .15s}
.chip:hover{border-color:var(--blue);color:var(--text)}
.chip.is-active{border-color:var(--accent-dim);color:var(--accent)}
button.chip{font-family:var(--mono)}

.tags{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.tags a,.tags span{display:inline-block;font:400 11px/16px var(--mono);letter-spacing:.04em;border:1px solid var(--line);
  background:var(--s-low);color:var(--muted);padding:.1rem .5rem;border-radius:4px;transition:border-color .15s,color .15s}
.tags a:hover{border-color:var(--blue);color:var(--text)}

/* note list */
.entries{border-top:1px solid var(--line)}
.entry{display:grid;grid-template-columns:1fr auto;gap:.25rem 1rem;padding:1.25rem 0;border-bottom:1px solid var(--line)}
.entry-date{grid-column:1/-1;font:400 12px/18px var(--mono);letter-spacing:.04em;color:var(--muted)}
.entry-title{margin:0;font:400 20px/27px var(--serif)}
.entry-title a{transition:color .15s}
.entry-title a:hover{color:var(--accent)}
.entry .tags{margin-top:.6rem}
.entry-time{padding-top:.4rem;font:400 11px/16px var(--mono);letter-spacing:.04em;color:var(--muted);white-space:nowrap}
@media(min-width:640px){
  .entry{grid-template-columns:7.5rem 1fr auto}
  .entry-date{grid-column:auto;padding-top:.3rem}
}
.pager{display:flex;justify-content:space-between;padding-top:1.25rem;font:400 12px/18px var(--mono);letter-spacing:.04em;color:var(--muted)}
.pager a:hover{color:var(--accent)}

/* post */
.post-image{margin:0 0 2rem}
.post-image img{display:block;width:100%;border-radius:4px}
.post-image figcaption,.gh-content figcaption{margin-top:.5rem;font:400 11px/16px var(--mono);letter-spacing:.04em;color:var(--outline)}
.post-foot{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--line)}

.gh-content>*{margin:0 0 1rem}
.gh-content p{margin:0 0 1rem}
.gh-content h2{margin:2.5rem 0 1rem;font:400 26px/34px var(--serif);letter-spacing:-.01em}
.gh-content h3{margin:2rem 0 .75rem;font:500 21px/28px var(--serif)}
.gh-content h4{margin:1.5rem 0 .5rem;font:400 14px/20px var(--mono);color:var(--accent)}
.gh-content a{color:var(--accent);text-decoration:underline;text-decoration-color:var(--accent-dim);text-underline-offset:3px}
.gh-content a:hover{text-decoration-color:var(--accent)}
.gh-content strong{font-weight:600}
.gh-content ul,.gh-content ol{padding-left:1.4rem}
.gh-content li{margin-bottom:.4rem}
.gh-content hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
.gh-content img{border-radius:4px}
.gh-content :not(pre)>code{padding:.1rem .4rem;border:1px solid var(--s-highest);border-radius:4px;background:var(--s-high);
  font:400 .8em/1 var(--mono);color:var(--accent)}
.gh-content table{width:100%;border-collapse:collapse;font:400 13px/18px var(--mono)}
.gh-content th,.gh-content td{padding:.5rem .75rem;border:1px solid var(--line);text-align:left}
.gh-content th{background:var(--s);color:var(--muted);font-weight:500}
.gh-content blockquote{margin:1.5rem 0;padding:.1rem 0 .1rem 1rem;border-left:2px solid var(--accent-dim)}
.gh-content blockquote p{margin:0;font:italic 400 20px/28px var(--serif)}
.gh-content blockquote p+p{margin-top:.25rem;font:400 11px/16px var(--mono);font-style:normal;letter-spacing:.04em;color:var(--outline)}

.gh-content pre,.code-block{border:1px solid var(--line);background:var(--s-low);border-radius:4px;overflow:hidden}
.gh-content pre{padding:1rem;overflow-x:auto;font:400 13.5px/22px var(--mono);color:var(--text)}
.gh-content pre code{font:inherit;color:inherit;background:none;border:0;padding:0}
.code-block{margin:0 0 1rem}
.code-block pre{margin:0;border:0;border-radius:0;background:none}
.code-head{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;background:var(--s);
  border-bottom:1px solid var(--line);font:400 11px/16px var(--mono);letter-spacing:.04em;color:var(--muted)}
.code-copy{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.code-copy:hover{color:var(--accent)}
.t-flag{color:var(--blue)}

.kg-width-wide{position:relative;left:50%;width:min(960px,calc(100vw - 2.5rem));transform:translateX(-50%)}
.kg-width-full{position:relative;left:50%;width:100vw;transform:translateX(-50%)}
.kg-width-full img{border-radius:0}

/* archive index (post footer) */
.idx{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.idx-head{display:flex;justify-content:space-between;margin-bottom:1rem;font:400 12px/18px var(--mono);letter-spacing:.04em;color:var(--muted)}
.idx-head i{margin-right:.35rem;color:var(--accent);font-style:normal}
.idx-head b{font-weight:400;color:var(--text)}
.idx ol{display:grid;gap:.75rem;margin:0;padding:0;list-style:none}
.idx-item{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;border:1px solid var(--line);background:var(--s);border-radius:4px;transition:border-color .15s}
.idx-item:hover{border-color:var(--blue)}
.idx-item[aria-current="page"]{border-color:var(--outline)}
.idx-dot{flex:none;width:6px;height:6px;border:1px solid var(--outline);border-radius:50%}
.idx-item[aria-current="page"] .idx-dot{background:var(--accent);border-color:var(--accent)}
.idx-title{flex:1;min-width:0;font:400 17px/24px var(--serif)}
.idx-item time{font:400 11px/16px var(--mono);letter-spacing:.04em;color:var(--muted);white-space:nowrap}

/* tags page */
.tax-grid{display:grid;gap:1rem;margin-bottom:2.5rem}
@media(min-width:640px){.tax-grid{grid-template-columns:1fr 1fr}}
.tax{display:flex;flex-direction:column;gap:.9rem;padding:1rem;border:1px solid var(--line);background:var(--s);border-radius:4px}
.tax:not(:has(.tag-chip)){display:none}
.tax-head{display:flex;justify-content:space-between;gap:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--s-highest);font:400 11px/16px var(--mono);color:var(--muted)}
.tax-head b{font:500 13px/18px var(--mono);letter-spacing:.01em;color:var(--text)}
.tax .tags a{color:var(--accent)}
.tag-chip em{font-style:normal;color:var(--muted)}
.tax-foot{display:flex;justify-content:space-between;gap:.75rem;margin-top:auto;padding-top:.75rem;border-top:1px solid var(--s-highest);font:400 11px/16px var(--mono);color:var(--muted)}
.tax-foot span:last-child{color:var(--accent)}
.log{margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--line)}
.log-head{display:flex;justify-content:space-between;margin-bottom:.5rem;font:400 12px/18px var(--mono);letter-spacing:.04em;color:var(--accent)}
.log-head span:last-child{font-size:11px;color:var(--muted)}
.log-item{display:grid;gap:.2rem 1.25rem;padding:1rem 0;border-bottom:1px solid var(--s-highest)}
@media(min-width:640px){.log-item{grid-template-columns:7.5rem 1fr}}
.log-item time{padding-top:.3rem;font:400 11px/16px var(--mono);letter-spacing:.04em;color:var(--muted)}
.log-title{margin:0;font:400 19px/26px var(--serif)}
.log-title a:hover{color:var(--accent)}
.log-tags{margin:.2rem 0 0;font:400 11px/16px var(--mono);letter-spacing:.04em;color:var(--outline)}

/* about / CV (styles the HTML card in sample-about-card.html) */
.cv-tagline{margin:0 0 2rem;font:400 13px/18px var(--mono);letter-spacing:.01em;color:var(--accent)}
.cv .cv-intro{margin:0 0 2rem;padding-left:1rem;border-left:1px solid var(--line)}
.cv .cv-intro p{margin:0 0 1rem;line-height:1.6}
.cv .cv-skills{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 3rem}
.cv .cv-skills span{padding:.1rem .5rem;border:1px solid var(--line);background:var(--s-low);border-radius:4px;font:400 11px/16px var(--mono);letter-spacing:.04em;color:var(--muted)}
.cv .cv-section{margin:0 0 3rem}
.gh-content .cv-section>h2{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:0 0 2rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--line);font:400 13px/18px var(--mono);letter-spacing:.01em;color:var(--accent)}
.cv-section>h2::after{content:attr(data-meta);font-size:11px;letter-spacing:.04em;color:var(--muted)}
.cv-role{display:grid;gap:.75rem;margin:0 0 2rem}
.cv-role>header,.cv-edu>header{display:flex;flex-direction:column;gap:.25rem}
@media(min-width:768px){.cv-role>header,.cv-edu>header{flex-direction:row;justify-content:space-between;align-items:baseline}}
.gh-content .cv-role h3,.gh-content .cv-edu h3{margin:0;font:500 21px/28px var(--serif)}
.cv-role h3 span,.cv-edu h3 span{font-weight:400;color:var(--muted)}
.cv-date{font:400 11px/16px var(--mono);letter-spacing:.04em;color:var(--muted);font-variant-numeric:tabular-nums}
.cv .cv-sub{margin:0;font:400 13px/18px var(--mono);color:var(--blue)}
.cv .cv-role p,.cv .cv-edu p{margin:0}
.cv .cv-arrows{display:grid;gap:.4rem;margin:0;padding:0 0 0 .25rem;list-style:none}
.cv .cv-arrows li{display:flex;gap:.5rem;margin:0}
.cv-arrows li::before{content:"->";flex:none;font:400 13px/28px var(--mono);color:var(--accent)}
.cv .cv-stack{font:400 11px/16px var(--mono);letter-spacing:.04em;color:var(--outline)}
.cv .cv-thesis{padding-top:.25rem;font:400 11px/16px var(--mono);color:var(--accent)}
.cv-projects{display:grid;gap:1rem}
.cv-project{padding:1rem;border:1px solid var(--line);background:var(--s);border-radius:4px;transition:border-color .15s}
.cv-project:hover{border-color:var(--blue)}
.cv-project>header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.cv-project b{font:500 13px/18px var(--mono)}
.cv-project .lang{margin-left:.75rem;padding:.1rem .4rem;border:1px solid var(--line);background:var(--s-low);border-radius:4px;font:400 11px/16px var(--mono);color:var(--muted)}
.cv-project .ver{font:400 11px/16px var(--mono);color:var(--outline)}
.cv .cv-project p{margin:0 0 .75rem}
.gh-content .cv-cmd{display:inline-block;padding:.375rem .75rem;border:1px solid rgba(70,72,57,.5);border-radius:4px;background:var(--s-lowest);font:400 13.5px/22px var(--mono);color:var(--muted)}
.cv-grid{display:grid;gap:1rem}
@media(min-width:768px){.cv-grid{grid-template-columns:1fr 1fr}}
.cv-panel{padding:1rem;border:1px solid var(--line);background:var(--s-low);border-radius:4px}
.cv-panel b{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;font:500 13px/18px var(--mono)}
.cv-panel b::before{content:"\25CF";font-size:8px;color:var(--accent)}
.cv .cv-panel p{margin:0;font:400 11px/1.6 var(--mono);color:var(--muted)}
.cv-table{border:1px solid var(--line);background:var(--s-low);border-radius:4px}
.cv-row{display:flex;flex-direction:column;gap:.25rem;padding:.75rem 1rem}
.cv-row+.cv-row{border-top:1px solid rgba(70,72,57,.6)}
@media(min-width:640px){.cv-row{flex-direction:row;justify-content:space-between;align-items:center}}
.cv-row>span{font:400 13px/18px var(--mono);color:var(--muted)}
.gh-content .cv-row a{font:400 13px/18px var(--mono);color:var(--text);text-decoration:none}
.gh-content .cv-row a:hover{color:var(--accent)}
.gh-content .cv-row a.key{color:var(--accent)}
.gh-content .cv-row code{padding:.25rem .5rem;border:1px solid rgba(70,72,57,.6);background:var(--s-highest);font:400 13px/18px var(--mono);color:var(--text);white-space:nowrap}