fix: 🐛 incorrect nesting when run through lightningcss

eleventy.config.js

@@ -19,7 +19,7 @@ const IMAGE_TRANSFORM_OPTS = {
   }
 };
 
-const BASE = env.ELEVENTY_PRODUCTION ? 'https://ref.sebin-nyshkim.net' : 'http://localhost:8080';
+const BASE = env.ELEVENTY_PRODUCTION ? 'https://ref-beta.sebin-nyshkim.net' : 'http://localhost:8080';
 
 // source: https://notes.jays.net/blog/11ty/
 async function getImage(type, src, key) {

src/layouts/character.webc

@@ -96,28 +96,30 @@ layout: base.webc
     }
   }
 
-  footer p:first-child {
-    text-align: center;
-
-    @media (min-width: 35em) {
-      text-align: start;
-    }
-  }
-
   footer p {
+    --text-align: center;
+
     margin: 0;
-    text-align: center;
+    text-align: var(--text-align);
 
     @media (min-width: 35em) {
       margin: revert;
     }
   }
 
-  footer p:last-child {
+  footer p:first-child {
-    text-align: center;
+    text-align: var(--text-align);
 
     @media (min-width: 35em) {
-      text-align: end;
+      --text-align: start;
+    }
+  }
+
+  footer p:last-child {
+    text-align: var(--text-align);
+
+    @media (min-width: 35em) {
+      --text-align: end;
     }
   }
 </style>