@@ -212,15 +212,67 @@
 	}
 
 	local stylesets = {
 		header = [[
-			h1 { font-size: 200%; border-bottom-style: double !important; border-bottom-width: 3px !important; }
-			h2 { font-size: 130%; }
-			h3 { font-size: 110%; }
-			h4 { font-size: 100%; font-weight: normal; }
+			h1,h2,h3,h4,h5,h6 { border-bottom: 1px solid @tone(0.7); }
+			h1 { font-size: 200%; border-bottom-style: double !important; border-bottom-width: 3px !important; margin: 0em -1em; }
+			h2 { font-size: 130%; margin: 0em -0.7em; }
+			h3 { font-size: 110%; margin: 0em -0.5em; }
+			h4 { font-size: 100%; font-weight: normal; margin: 0em -0.2em; }
 			h5 { font-size: 90%; font-weight: normal; }
 			h6 { font-size: 80%; font-weight: normal; }
 			h3, h4, h5, h6 { border-bottom-style: dotted !important; }
+			h1,h2,h3,h4,h5,h6 { 
+				margin-top: 0;
+				margin-bottom: 0;
+			}
+			:is(h1,h2,h3,h4,h5,h6) + p {
+				margin-top: 0.4em;
+			}
+
+		]];
+		headingAnchors = [[
+			:is(h1,h2,h3,h4,h5,h6) > a[href].anchor {
+				text-decoration: none;
+				font-size: 1.2em;
+				padding: 0.3em;
+				opacity: 0%;
+				transition: 0.3s;
+				font-weight: 100;
+			}
+			:is(h1,h2,h3,h4,h5,h6):hover > a[href].anchor {
+				opacity: 50%;
+			}
+			:is(h1,h2,h3,h4,h5,h6) > a[href].anchor:hover {
+				opacity: 100%;
+			}
+
+			]] .. -- this is necessary to avoid the sections jumping around
+			      -- when focus changes from one to another
+			[[ section {
+				border: 1px solid transparent;
+			}
+
+			section:target {
+				margin-left: -2em;
+				margin-right: -2em;
+				padding: 0 2em;
+				background: @tone(0.04);
+				border: 1px dotted @tone(0.3);
+			}
+
+			section:target > :is(h1,h2,h3,h4,h5,h6) {
+
+			}
+		]];
+		paragraph = [[
+			p {
+				margin: 0.7em 0;
+			}
+			section {
+				margin: 1.2em 0;
+			}
+			section:first-child { margin-top: 0; }
 		]];
 		accent = [[
 			body { background: @bg; color: @fg }
 			a[href] {
@@ -230,9 +282,8 @@
 			a[href]:hover {
 				color: @tone(0.9 30);
 				text-decoration-color: @tone/0.7(0.7 30);
 			}
-			h1,h2,h3,h4,h5,h6 { border-bottom: 1px solid @tone(0.7); }
 			h1 { color: @tone(2); }
 			h2 { color: @tone(1.5); }
 			h3 { color: @tone(1.2); }
 			h4 { color: @tone(1); }
@@ -445,8 +496,9 @@
 		end
 
 		local block_renderers = {
 			paragraph = function(b,s)
+				stylesNeeded.paragraph = true;
 				return tag('p', nil, sr.htmlSpan(b.spans, b, s), b)
 			end;
 			directive = function(b,s)
 				-- deal with renderer directives
@@ -547,9 +599,20 @@
 				irs = {tag='section',attrs={id = getSafeID(sec)},nodes={}}
 
 				for i, block in ipairs(sec.blocks) do
 					local rd = irBlockRdrs[block.kind](block,sec)
-					if rd then table.insert(irs.nodes, rd) end
+					if rd then
+						if opts['heading-anchors'] and block == sec.heading_node then
+							stylesNeeded.headingAnchors = true
+							table.insert(rd.nodes, ' ')
+							table.insert(rd.nodes, {
+								tag = 'a';
+								attrs = {href = '#' .. irs.attrs.id, class='anchor'};
+								nodes = {type(opts['heading-anchors'])=='string' and opts['heading-anchors'] or '§'};
+							})
+						end
+						table.insert(irs.nodes, rd)
+					end
 				end
 			end
 		elseif sec.kind == 'blockquote' then
 		elseif sec.kind == 'listing' then