try to fix mobile cls

Author: otuva

_data/style.yml

@@ -10,7 +10,7 @@ brochures-icon: fas fa-info-circle fa-2x #default: fas fa-plus fa-3x
 
 # Add custom fonts
 fonts_urls:
-    - "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Droid+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+    - "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Droid+Serif:ital,wght@0,400;0,700;1,400;1,700&display=optional"
 
 # Set custom fonts
 fonts:

_includes/layout/head.html

@@ -42,6 +42,25 @@
        causing the 0.538 CLS. Keeping it absolute from the start prevents that shift. */
     #meshNetwork { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
     @media (min-width: 768px) { #meshNetwork { display: block; } }
+    /* Font metric overrides: make Arial/Georgia match Montserrat/DroidSerif metrics so
+       fallback→web-font swap causes no visible layout shift (CLS). Values from fontpie/
+       @next/font calculations for Montserrat Regular vs Arial. */
+    @font-face {
+      font-family: "MontserratFallback";
+      src: local("Arial"), local("Helvetica Neue");
+      size-adjust: 113.48%;
+      ascent-override: 84.56%;
+      descent-override: 21.99%;
+      line-gap-override: 0%;
+    }
+    @font-face {
+      font-family: "DroidSerifFallback";
+      src: local("Georgia"), local("Times New Roman");
+      size-adjust: 97.3%;
+      ascent-override: 106.9%;
+      descent-override: 29.3%;
+      line-gap-override: 0%;
+    }
   </style>
 
   {% if site.analytics.google %}

_sass/base/_mixins.scss

@@ -1,14 +1,14 @@
 // Font Mixins
 @mixin serif-font {
-  font-family: "Droid Serif", $font-fallback;
+  font-family: "Droid Serif", "DroidSerifFallback", $font-fallback;
 }
 
 @mixin body-font {
   font-family: $font-fallback;
 }
 
 @mixin heading-font {
-  font-family: "Montserrat", $font-fallback;
+  font-family: "Montserrat", "MontserratFallback", $font-fallback;
 }
 
 // Layout & section mixins

_sass/layout/_references.scss

@@ -107,6 +107,7 @@
   img {
     max-height: 80px;
     width: auto;
+    aspect-ratio: 4 / 1;
     transition: filter 0.35s ease, transform 0.35s ease;
     filter: grayscale(15%) brightness(1.05);
   }