perf: fix desktop CLS (0.57) — grid match, font-display optional, avatar sizing

Three root causes identified via PageSpeed layout shift culprits:

1. Grid mismatch (CLS 0.495): Critical CSS used `2fr 1fr` but Tailwind
   compiles to `repeat(3, minmax(0, 1fr))` with `grid-column: span 2`.
   Updated critical CSS to match Tailwind's exact output.

2. Font swap FOUT (CLS 0.074): @font-face declarations were only in the
   deferred stylesheet. Moved to critical CSS with font-display:optional
   and added <link rel="preload"> for weights 400/600/700. Changed all
   font-display from swap to optional in tailwind.css source.

3. Avatar resize: HTML width/height was 96x96 but CSS sets sm:w-32/h-32
   (128px) on desktop. Updated attributes to 128x128.

Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88

_includes/layouts/base.njk

@@ -54,6 +54,11 @@
   <link rel="icon" type="image/svg+xml" href="/images/favicon.svg">
   <link rel="icon" type="image/x-icon" href="/favicon.ico">
 
+  {# Preload critical fonts — starts download before CSS is parsed #}
+  <link rel="preload" href="/fonts/inter-latin-400-normal.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="/fonts/inter-latin-600-normal.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="/fonts/inter-latin-700-normal.woff2" as="font" type="font/woff2" crossorigin>
+
   {# Critical CSS — inlined for fast first paint #}
   <style>{{ "css/critical.css" | inlineFile | safe }}</style>
   {# Defer full stylesheet — loads after first paint #}

_includes/layouts/home.njk

@@ -15,8 +15,8 @@ withSidebar: true
     <img
       src="{{ site.author.avatar }}"
       alt="{{ site.author.name }}"
-      width="96"
+      width="128"
-      height="96"
+      height="128"
       class="w-24 h-24 sm:w-32 sm:h-32 rounded-full object-cover shadow-lg flex-shrink-0"
       loading="eager"
     >

css/critical.css

@@ -41,13 +41,21 @@ body{background-color:#faf8f5;color:#1c1b19}
 main.container{padding-top:1.5rem;padding-bottom:1.5rem}
 @media(min-width:768px){main.container{padding-top:2rem;padding-bottom:2rem}}
 
-/* Layout with sidebar */
+/* Layout with sidebar — must match Tailwind's compiled output exactly to prevent CLS */
-.layout-with-sidebar{display:grid;grid-template-columns:1fr;gap:1.5rem}
+.layout-with-sidebar{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1.5rem}
-@media(min-width:1024px){.layout-with-sidebar{grid-template-columns:2fr 1fr;gap:2rem}}
+@media(min-width:768px){.layout-with-sidebar{gap:2rem}}
+@media(min-width:1024px){.layout-with-sidebar{grid-template-columns:repeat(3,minmax(0,1fr))}}
 .main-content{min-width:0;overflow-x:hidden}
+@media(min-width:1024px){.main-content{grid-column:span 2/span 2}}
 /* Reserve sidebar space on desktop to prevent CLS when Alpine.js hydrates collapsible widgets */
 @media(min-width:1024px){.sidebar{min-height:600px}}
 
+/* Font faces — in critical CSS so fonts begin downloading immediately.
+   font-display:optional prevents FOUT/CLS: font either loads in time or fallback is kept. */
+@font-face{font-family:'Inter';font-style:normal;font-display:optional;font-weight:400;src:url(/fonts/inter-latin-400-normal.woff2) format('woff2')}
+@font-face{font-family:'Inter';font-style:normal;font-display:optional;font-weight:600;src:url(/fonts/inter-latin-600-normal.woff2) format('woff2')}
+@font-face{font-family:'Inter';font-style:normal;font-display:optional;font-weight:700;src:url(/fonts/inter-latin-700-normal.woff2) format('woff2')}
+
 /* Basic typography — prevent FOUT */
 h1,h2,h3,h4{margin:0;line-height:1.25}
 a{color:#b45309}

css/tailwind.css

@@ -2,7 +2,7 @@
 @font-face {
   font-family: 'Inter';
   font-style: normal;
-  font-display: swap;
+  font-display: optional;
   font-weight: 400;
   src: url(/fonts/inter-latin-ext-400-normal.woff2) format('woff2');
   unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
@@ -10,7 +10,7 @@
 @font-face {
   font-family: 'Inter';
   font-style: normal;
-  font-display: swap;
+  font-display: optional;
   font-weight: 400;
   src: url(/fonts/inter-latin-400-normal.woff2) format('woff2');
   unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
@@ -18,7 +18,7 @@
 @font-face {
   font-family: 'Inter';
   font-style: normal;
-  font-display: swap;
+  font-display: optional;
   font-weight: 500;
   src: url(/fonts/inter-latin-ext-500-normal.woff2) format('woff2');
   unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
@@ -26,7 +26,7 @@
 @font-face {
   font-family: 'Inter';
   font-style: normal;
-  font-display: swap;
+  font-display: optional;
   font-weight: 500;
   src: url(/fonts/inter-latin-500-normal.woff2) format('woff2');
   unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
@@ -34,7 +34,7 @@
 @font-face {
   font-family: 'Inter';
   font-style: normal;
-  font-display: swap;
+  font-display: optional;
   font-weight: 600;
   src: url(/fonts/inter-latin-ext-600-normal.woff2) format('woff2');
   unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
@@ -42,7 +42,7 @@
 @font-face {
   font-family: 'Inter';
   font-style: normal;
-  font-display: swap;
+  font-display: optional;
   font-weight: 600;
   src: url(/fonts/inter-latin-600-normal.woff2) format('woff2');
   unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
@@ -50,7 +50,7 @@
 @font-face {
   font-family: 'Inter';
   font-style: normal;
-  font-display: swap;
+  font-display: optional;
   font-weight: 700;
   src: url(/fonts/inter-latin-ext-700-normal.woff2) format('woff2');
   unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
@@ -58,7 +58,7 @@
 @font-face {
   font-family: 'Inter';
   font-style: normal;
-  font-display: swap;
+  font-display: optional;
   font-weight: 700;
   src: url(/fonts/inter-latin-700-normal.woff2) format('woff2');
   unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;