/* Critical CSS — inlined in for first paint */ /* Covers: layout shell, header, dark mode toggle, font display, basic typography */ *,*::before,*::after{box-sizing:border-box} body{margin:0;font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased} /* Dark mode base — warm stone palette */ body{background-color:#faf8f5;color:#1c1b19} .dark body{background-color:#0f0e0d;color:#faf8f5} /* Container */ .container{max-width:64rem;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem} /* Header — sticky, visible immediately */ .site-header{background-color:#faf8f5;border-bottom:1px solid #e8e5df;padding-top:1rem;padding-bottom:1rem;position:sticky;top:0;z-index:50} .dark .site-header{background-color:#1c1b19;border-bottom-color:#3f3b35} .header-container{display:flex;align-items:center;justify-content:space-between} .site-title{font-size:1.25rem;font-weight:700;color:#1c1b19;text-decoration:none} .dark .site-title{color:#faf8f5} /* Header actions — hidden on mobile */ .header-actions{display:none} @media(min-width:768px){.header-actions{display:flex;align-items:center;gap:1rem}} /* Mobile menu toggle */ .menu-toggle{display:block;padding:0.5rem;border-radius:0.5rem;background:none;border:none;color:#5c5750;cursor:pointer} @media(min-width:768px){.menu-toggle{display:none}} .dark .menu-toggle{color:#a09a90} /* Hidden utility */ .hidden{display:none!important} [x-cloak]{display:none!important} /* Dark mode theme toggle icons */ .theme-toggle .sun-icon{display:none} .theme-toggle .moon-icon{display:block} .dark .theme-toggle .sun-icon{display:block} .dark .theme-toggle .moon-icon{display:none} /* Main content padding */ 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}} .main-content{min-width:0;overflow-x:hidden} /* 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} .dark a{color:#fbbf24} /* Prevent flash of unstyled content for nav */ .site-nav{display:flex;align-items:center;gap:1rem} .site-nav>a,.site-nav .nav-dropdown-trigger{color:#5c5750;text-decoration:none;padding-top:0.5rem;padding-bottom:0.5rem} .dark .site-nav>a,.dark .site-nav .nav-dropdown-trigger{color:#a09a90} /* Prevent FOUC — constrain images and SVG icons before Tailwind loads */ img{max-width:100%;height:auto} svg:not(:root):not([width]){width:1.25rem;height:1.25rem} /* Focus indicators — visible in critical CSS before Tailwind loads */ a:focus-visible{outline:2px solid #b45309;outline-offset:2px;border-radius:2px} .dark a:focus-visible{outline-color:#fbbf24} button:focus-visible,[type="button"]:focus-visible{outline:2px solid #b45309;outline-offset:2px;border-radius:4px} .dark button:focus-visible,.dark [type="button"]:focus-visible{outline-color:#fbbf24} /* Skip link */ .skip-link{position:absolute;top:-100%;left:0;z-index:100;background:#b45309;color:#fff;padding:0.5rem 1rem;font-weight:600;text-decoration:none} .skip-link:focus{top:0;outline:none} /* Skeleton loader — visible until Tailwind stylesheet loads */ html.loading main.container>.page-content{display:none} html:not(.loading) .page-skeleton{display:none} @keyframes skel-pulse{0%,100%{opacity:1}50%{opacity:.4}} .skel-bone{background:#e8e5df;border-radius:.5rem;animation:skel-pulse 1.5s ease-in-out infinite} .dark .skel-bone{background:#3f3b35} .skel-circle{border-radius:50%} /* Reduced motion — disable animations for users who prefer it */ @media(prefers-reduced-motion:reduce){.skel-bone{animation:none}*{transition-duration:0.01ms!important;animation-duration:0.01ms!important}}