:root{
  --paper:#FDFDFB; --bar:#E7F0E3; --ink:#25302B; --muted:#5D6B63;
  --accent:#2447C9; --accent-ink:#FFFFFF; --rule:#C9D4C6; --stamp:#B03A2E;
  --card:#FFFFFF; --code-bg:#25302B; --code-ink:#DCE5DC;
  --hole:#F2F4EF; --hole-ring:#C9D4C6;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#171310; --bar:#1E1813; --ink:#E9DFCE; --muted:#A08F76;
    --accent:#E8A33D; --accent-ink:#171310; --rule:#3A322A; --stamp:#D9714E;
    --card:#1D1813; --code-bg:#100D0A; --code-ink:#D8C9A8;
    --hole:#211B15; --hole-ring:#3A322A;
  }
}
:root[data-theme="dark"]{
  --paper:#171310; --bar:#1E1813; --ink:#E9DFCE; --muted:#A08F76;
  --accent:#E8A33D; --accent-ink:#171310; --rule:#3A322A; --stamp:#D9714E;
  --card:#1D1813; --code-bg:#100D0A; --code-ink:#D8C9A8;
  --hole:#211B15; --hole-ring:#3A322A;
}
*,*::before,*::after{box-sizing:inherit}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  font-size:17px; line-height:1.65;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* header */
header{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:10;
  background:var(--paper); border-bottom:1px solid var(--rule);
}
.nav{
  max-width:880px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:baseline; gap:22px;
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:14px;
}
.nav .home{font-weight:700; color:var(--ink); text-decoration:none}
.nav a.tab{color:var(--muted); text-decoration:none}
.nav a.tab:hover,.nav a.tab[aria-current="page"]{color:var(--accent)}
.nav .spacer{flex:1}
#themeBtn{
  font-family:inherit; font-size:13px; cursor:pointer;
  background:none; border:1px solid var(--rule); color:var(--muted);
  padding:4px 10px; border-radius:2px;
}
#themeBtn:hover{color:var(--accent); border-color:var(--accent)}

/* green-bar tractor paper hero */
.tractor{
  position:relative;
  background:repeating-linear-gradient(to bottom, var(--paper) 0 34px, var(--bar) 34px 68px);
  border-bottom:1px solid var(--rule);
  padding:56px 0 48px;
}
.tractor::before,.tractor::after{
  content:""; position:absolute; top:0; bottom:0; width:34px;
  background-image:radial-gradient(circle 7px at 17px 17px, var(--hole) 6px, var(--hole-ring) 6.5px, transparent 8px);
  background-size:34px 34px; background-repeat:repeat-y;
  border-color:var(--rule);
}
.tractor::before{left:0; border-right:1px dashed var(--rule)}
.tractor::after{right:0; border-left:1px dashed var(--rule)}
.man{
  max-width:880px; margin:0 auto; padding:0 58px;
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
.man-head{
  display:flex; justify-content:space-between; font-size:13px; color:var(--muted);
  margin-bottom:34px;
}
.man h1{
  font-size:clamp(34px,6vw,58px); font-weight:700; letter-spacing:-0.02em;
  margin:0 0 6px; line-height:1.05;
}
.man .tag{font-size:15px; color:var(--muted); margin:0 0 30px}
.man .tag .cursor{
  display:inline-block; width:0.6em; height:1.05em; background:var(--accent);
  vertical-align:text-bottom; margin-left:2px; animation:blink 1.1s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce){.man .tag .cursor{animation:none}}
@keyframes blink{50%{opacity:0}}
.man h2{font-size:13px; font-weight:700; letter-spacing:0.08em; margin:26px 0 8px; color:var(--stamp)}
.man p,.man ul{font-size:14.5px; line-height:1.7; margin:0 0 4px; max-width:64ch}
.man .synopsis{color:var(--accent); overflow-wrap:break-word}
.man ul{list-style:none; padding-left:0}
.man li::before{content:"- "; color:var(--muted)}

/* man page options */
.opts{margin:2px 0 4px}
.opt{display:grid; grid-template-columns:220px 1fr; gap:14px; font-size:14px; line-height:1.6; padding:3px 0; max-width:76ch}
.opt .flag{color:var(--accent); font-weight:600; overflow-wrap:break-word}
@media (max-width:640px){.opt{grid-template-columns:1fr; gap:2px; padding:6px 0}}

/* strengths */
.strengths p{max-width:70ch; margin:0 0 14px; font-size:16px}
.strengths .k{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:14px; font-weight:700; color:var(--accent); margin-right:6px}

/* terminal input */
.term{display:flex; align-items:baseline; margin:0 0 6px; font-size:15px}
.term .prompt{color:var(--accent); font-weight:600; white-space:nowrap}
.term input{
  flex:1; min-width:0; background:none; border:none; border-bottom:1px dashed var(--rule);
  color:var(--ink); font:inherit; padding:2px 0; caret-color:var(--accent);
}
.term input:focus{outline:none; border-bottom-color:var(--accent)}
.term input::placeholder{color:var(--muted); opacity:0.7}
.termout{min-height:22px; font-size:13.5px; color:var(--muted); margin-bottom:24px}
button.flag{background:none; border:none; padding:0; cursor:pointer; text-align:left; font:inherit; font-weight:600; color:var(--accent)}
button.flag:hover{text-decoration:underline}
button.flag.inline{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:inherit}

/* resume */
.resume h1{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-weight:700; font-size:clamp(26px,4vw,34px)}
.resume .rrole{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:15px; font-weight:600; margin:0 0 14px}
.resume .rsub{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:13px; font-weight:700; color:var(--stamp); margin:20px 0 6px}
.rlist{margin:0 0 8px; padding-left:20px}
.rlist li{margin-bottom:7px; font-size:15.5px; line-height:1.55; max-width:74ch}
.rskills p{max-width:78ch; font-size:15px; margin:0 0 12px}
.rskills .k{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:13px; font-weight:700; color:var(--accent)}
@media print{
  header,footer,#printBtn,.crumb{display:none !important}
  :root{--paper:#fff; --ink:#111; --accent:#1a3aa8; --stamp:#8a2a20; --rule:#bbb; --muted:#555}
  body{font-size:12.5px}
  main{padding:0; max-width:100%}
  .rlist li{max-width:none}
}

/* main column */
main{max-width:880px; margin:0 auto; padding:40px 20px 70px}
.section-h{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:14px; font-weight:700; letter-spacing:0.06em; color:var(--stamp);
  border-bottom:1px solid var(--rule); padding-bottom:8px; margin:38px 0 20px;
}
.section-h .count{color:var(--muted); font-weight:400}

/* projects */
.proj{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.proj a{
  display:block; text-decoration:none; color:var(--ink);
  border:1px solid var(--rule); background:var(--card); padding:16px 18px;
}
.proj a:hover{border-color:var(--accent)}
.proj .pname{font-family:"IBM Plex Mono",monospace; font-weight:700; font-size:15px; color:var(--accent); margin:0 0 6px}
.proj p{margin:0; font-size:14.5px; color:var(--muted); line-height:1.5}

/* blog list */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px}
.filters button{
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; cursor:pointer;
  border:1px solid var(--rule); background:none; color:var(--muted); padding:4px 12px; border-radius:2px;
}
.filters button.on{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.postrow{
  display:flex; gap:18px; align-items:baseline; padding:11px 2px;
  border-bottom:1px dashed var(--rule); text-decoration:none; color:var(--ink);
}
.postrow:hover .pt{color:var(--accent)}
.postrow .pd{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--muted); white-space:nowrap; min-width:86px}
.postrow .pt{font-size:16.5px; flex:1; line-height:1.4}
.postrow .tagchip{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--muted); border:1px solid var(--rule); padding:1px 7px; white-space:nowrap}

/* post page */
article{max-width:720px}
.crumb{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--muted); margin-bottom:26px; display:block; text-decoration:none}
.crumb:hover{color:var(--accent)}
article h1{
  font-family:"IBM Plex Mono",monospace; font-weight:700;
  font-size:clamp(24px,4vw,32px); line-height:1.25; letter-spacing:-0.01em; margin:0 0 10px;
}
.pmeta{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--muted); margin-bottom:30px}
article p{margin:0 0 18px; max-width:68ch}
article .shot{margin:26px 0}
article .shot img{max-width:100%; height:auto; display:block; border:1px solid var(--rule)}
.pnav{display:flex; justify-content:space-between; gap:16px; margin-top:44px; padding-top:18px; border-top:1px solid var(--rule); font-family:"IBM Plex Mono",monospace; font-size:13.5px}
.pnav a{text-decoration:none; max-width:46%}

footer{
  border-top:1px solid var(--rule); padding:22px 20px 34px; text-align:center;
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--muted);
}
.wide{overflow-x:auto}
@media (max-width:640px){
  .man{padding:0 44px}
  .postrow .tagchip{display:none}
}

/* ---- static build additions ---- */
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-ink);
  padding:8px 14px;z-index:20;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:13px}
.skip:focus{left:8px;top:8px}
.postrow[hidden]{display:none}
.filters button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
article .shot img{background:var(--code-bg)}
article .shot figcaption{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:12px;color:var(--muted);margin-top:7px}
.pnav a{display:inline-block}
.pnav .pnav-label{display:block;color:var(--muted);font-size:11.5px;letter-spacing:0.06em}
.notfound{max-width:880px;margin:0 auto;padding:0 58px}
@media (max-width:640px){.notfound{padding:0 44px}}

/* one-page print resume */
@media print{
  .tractor{background:none;padding:0}
  .tractor::before,.tractor::after{display:none}
  main{padding:0}
  .resume h1{font-size:19px;margin:0 0 1px}
  .resume .pmeta{font-size:9.5px;margin-bottom:6px}
  .resume>p{font-size:10px;line-height:1.35;margin:0 0 6px;max-width:none}
  .resume .section-h{font-size:9.5px;letter-spacing:0.05em;margin:8px 0 4px;padding-bottom:2px}
  .resume .rrole{font-size:10.5px;margin:0 0 4px}
  .resume .rsub{font-size:9.5px;margin:6px 0 2px}
  .rlist{padding-left:13px;margin:0 0 3px}
  .rlist li{font-size:9.5px;line-height:1.32;margin-bottom:2px;max-width:none}
  .rskills p{font-size:9.5px;line-height:1.35;margin:0 0 4px;max-width:none}
  .rskills .k{font-size:9.5px}
  .resume a{text-decoration:none;color:#1a3aa8}
  @page{margin:11mm 12mm}
}

/* ---- post body: section headings and the light-theme diagram ---- */
article h2{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:15px; font-weight:700; letter-spacing:0.04em; color:var(--stamp);
  margin:34px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--rule);
}
article strong{font-weight:600}
article p a{overflow-wrap:break-word}
/* the diagram ships light-theme on a transparent background, so in amber
   phosphor it sits on a cream card instead of being restyled */
article .shot.diagram img{
  background:#FDFDFB; border-color:#C9D4C6;
  padding:18px; width:100%; height:auto;
}