diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index 49bab81..492a41f 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -54,6 +54,11 @@
+ {# Preload critical fonts — starts download before CSS is parsed #}
+
+
+
+
{# Critical CSS — inlined for fast first paint #}
{# Defer full stylesheet — loads after first paint #}
diff --git a/_includes/layouts/home.njk b/_includes/layouts/home.njk
index 1a90b60..f626251 100644
--- a/_includes/layouts/home.njk
+++ b/_includes/layouts/home.njk
@@ -15,8 +15,8 @@ withSidebar: true
diff --git a/css/critical.css b/css/critical.css
index f6261f9..c099de9 100644
--- a/css/critical.css
+++ b/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{display:grid;grid-template-columns:1fr;gap:1.5rem}
-@media(min-width:1024px){.layout-with-sidebar{grid-template-columns:2fr 1fr;gap:2rem}}
+/* Layout with sidebar — must match Tailwind's compiled output exactly to prevent CLS */
+.layout-with-sidebar{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1.5rem}
+@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}
diff --git a/css/tailwind.css b/css/tailwind.css
index 5607dcc..e4895cb 100644
--- a/css/tailwind.css
+++ b/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;