css hidden entries still visible issue

style.css

@@ -8,8 +8,7 @@
     --font-size:22px;
     --font-size-s:calc(var(--font-size) / 1.5);
     --line-height:24px;
-    /* ↓ * 10 because the date is 10 chars long */
-    --date-width:calc(var(--font-size)/2.5 * 10);
+    --date-width:10ch;
     --gutter:0px;
     --padding:2px;
     --height:auto;
@@ -30,7 +29,7 @@
     font-style:italic;
 }
 * {
-    font-family: Junicode;
+    font-family: Junicode, serif;
     font-variant-numeric: lining-nums;
 }
 h1,h2,h3,h4,h5,p, a {
@@ -77,7 +76,6 @@ ol {
     display:flex;
     gap:var(--gutter);
     flex-direction:column-reverse;
-    padding-left: 34px;
 
 }
 body {
@@ -97,8 +95,8 @@ li {
     color:rgba(0,0,0,0);
     height:0;
     overflow:hidden
-
 }
+li * {opacity:0}
 .active:nth-of-type(2n){
     background:var(--background-2);
 
@@ -109,6 +107,7 @@ li,textarea, nav {
     border:none;
 
 }
+.active * {opacity:1}
 .active {
     border-bottom: 1px solid black;
     height:var(--height);
@@ -145,6 +144,7 @@ h5,h2,h3,h4 {
 
 h4 {
     width:var(--date-width);
+    width:fit-content;
     text-align: right;
 
     position:absolute;