major scss to css refactor, removed pageTags and simplified per page css

src/layouts/BaseLayout.astro

@@ -9,20 +9,17 @@ import '@fontsource/iosevka/latin.css'
 
 import '@fontsource-variable/material-symbols-outlined/full.css'
 
-import '../styles/main.scss'
+import '@/styles/main.css'
 
 type Props = {
     title?: string
     description?: string
     thumbnail?: string
-
-    /** Tags for the page, used for styling */
-    pageTags?: string | string[]
 }
 
 import phcIcon from '../assets/icon.png'
 
-const { title, description, thumbnail, pageTags } = Astro.props
+const { title, description, thumbnail } = Astro.props
 ---
 
 <!doctype html>
@@ -75,9 +72,14 @@ const { title, description, thumbnail, pageTags } = Astro.props
             src="//analytics.phc.dm.unipi.it/count.js"
             data-goatcounter="https://analytics.phc.dm.unipi.it/count"></script>
 
+        <style is:inline>
+            /* Workaround Astro CSS loading order, this forces the layering upfront */
+            @layer base, typography, component, page, utility;
+        </style>
+
         <title>{title ?? 'PHC'}</title>
     </head>
-    <body class:list={typeof pageTags === 'string' ? [pageTags] : pageTags}>
+    <body>
         <slot />
     </body>
 </html>