Add lettered bullet nesting to policy list

index.html

@@ -36,13 +36,13 @@
 			<li><a href="https://emfcamp.org">EMF2022</a></li>
 		</ul>
 		<h2 id='policy'>Policy</h2>
-		<ol class="left-aligned">
+		<ol class="left-aligned nested parent">
 			<li>No one shall dissuade or stop anyone from making anything, especially if it's a bad idea.</li>
 			<li>"Fuck it, we'll do it live" is always acceptable.</li>
 			<li>Maybe policy should go on the website.</li>
 			<li>&gt; For policy proposals in chat.</li>
-			<li>Un defined, (but positive) number of ✅ are needed for policy approvals.</li>
-			<ol>
+			<ol class="nested">
+				<li>Un defined, (but positive) number of ✅ are needed for policy approvals.</li>
 				<li>Ticks must outweigh ❌ votes</li>
 			</ol>
 			<li>No hacker shall intentionally set another hacker on fire, or through inaction allow another hacker to be set on fire.</li>

style.css

@@ -74,6 +74,33 @@ ul.fisher-price-links>li>a {
 	animation: unicornMode 2s linear 0s infinite;
 }
 
+.nested li {
+	display: block;
+	position: relative;
+}
+
+.nested {
+	margin-bottom: 0;
+	counter-reset: number;
+}
+
+.parent .nested {
+	counter-reset: letter;
+}
+
+.parent .nested li::before {
+	content: counter(letter, lower-alpha) ".";
+	counter-increment: letter;
+}
+
+.nested li::before {
+	content: counter(number) ".";
+	counter-increment: number;
+	position: absolute;
+	margin-right: 100%;
+	right: 10px;
+}
+
 @keyframes unicornMode {
 	from {
 		color: #6666ff;