New style initial

public/css/toc.css

@@ -1,11 +1,46 @@
-details.toc {
-	padding-bottom: var(--space-m);
-}
-
 .toc {
+	padding-bottom: var(--space-m);
+	& div.toc {
+		background-color: var(--contrast-color-tint);
+		border-radius: var(--large-rounded-radius);
+		border-top-left-radius: 0;
+		color: var(--contrast-color);
+		font-family: var(--font-family-ui);
+		font-variation-settings: "wght" 360;
+		margin-left: 0;
+		margin-right: 0;
+		padding: var(--space-s) var(--space-l) var(--space-m) var(--space-m);
+	}
 	& ol {
 		margin-bottom: 0;
 		margin-top: 0;
 		padding-left: var(--space-m);
+		& li {
+			font-size: var(--step--1);
+			& a {
+				text-decoration: none;
+			}
+		}
+	}
+	&[open] {
+		& summary::marker {
+			content: "✸ ";
+			font-size: var(--step--1);
+		}
+	}
+	& summary {
+		cursor: pointer;
+		font-family: var(--font-family-ui);
+		font-size: var(--step--2);
+		font-variation-settings: "wght" 700;
+		letter-spacing: var(--wide-letter-spacing);
+		margin-left: -1.5em;
+		text-transform: uppercase;
+		&::marker {
+			color: var(--contrast-color);
+			content: "✸ ";
+			font-size: var(--step--1);
+			padding-top: 1em;
+		}
 	}
 }