::selection {
      background: var(--gray-60);
      color: var(--white);
    }

    ::-moz-selection {
      background: var(--gray-60);
      color: var(--white);
    }

    body {
      font-family: 'Frank Ruhl Libre', serif;
      background: var(--white);
      color: var(--gray-20);
    }

    ::-webkit-scrollbar {
      width: 8px;
    }
    ::-webkit-scrollbar-thumb {
      background: var(--gray-60);
      border-radius: 9999px;
    }
    ::-webkit-scrollbar-track {
      background: var(--gray-95);
    }

    .fade-in {
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.8s ease-out forwards;
    }

    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .mobile-nav {
      position: fixed;
      bottom: 1.5rem;
      right: 1.5rem;
      z-index: 50;
    }

    .mobile-menu-panel {
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(10px);
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: scale(0.95); }
      to { opacity: 1; transform: scale(1); }
    }
    
    .animate-fade-in {
      animation: fadeIn 0.3s ease-out forwards;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    
    .animate-float {
      animation: float 1.2s ease-in-out infinite;
    }
    
    .article-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }
    
    .article-card {
      transition: all 0.3s ease;
      background: var(--white);
      border: 1px solid var(--gray-90);
    }
    
    .gradient-text {
      color: var(--black);
      font-weight: 700;
    }
    
    .prose {
      max-width: 65ch;
      line-height: 1.6;
      color: var(--gray-40);
    }
    
    .prose h2 {
      font-size: 1.5rem;
      font-weight: 700;
      margin-top: 2rem;
      margin-bottom: 1rem;
      color: var(--black);
    }
    
    .prose p {
      margin-bottom: 1.25rem;
      color: var(--gray-40);
    }

    /* Custom styles to replace Tailwind */
    .flex { display: flex; }
    .flex-col { flex-direction: column; }
    .justify-between { justify-content: space-between; }
    .items-center { align-items: center; }
    .hidden { display: none; }
    .fixed { position: fixed; }
    .relative { position: relative; }
    .absolute { position: absolute; }
    .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
    .z-40 { z-index: 40; }
    .z-50 { z-index: 50; }
    .w-full { width: 100%; }
    .min-h-screen { min-height: 100vh; }
    .mx-auto { margin-left: auto; margin-right: auto; }
    .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
    .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .py-16 { padding-top: 4rem; padding-bottom: 4rem; }
    .py-20 { padding-top: 5rem; padding-bottom: 5rem; }
    .py-32 { padding-top: 8rem; padding-bottom: 8rem; }
    .pt-32 { padding-top: 8rem; }
    .pb-20 { padding-bottom: 5rem; }
    .gap-4 { gap: 1rem; }
    .gap-6 { gap: 1.5rem; }
    .gap-8 { gap: 2rem; }
    .text-center { text-align: center; }
    .text-left { text-align: left; }
    .text-2xl { font-size: 1.5rem; }
    .text-3xl { font-size: 1.875rem; }
    .text-4xl { font-size: 2.25rem; }
    .text-sm { font-size: 0.875rem; }
    .text-xl { font-size: 1.25rem; }
    .font-bold { font-weight: 700; }
    .font-semibold { font-weight: 600; }
    .font-medium { font-weight: 500; }
    .font-extrabold { font-weight: 800; }
    .rounded-lg { border-radius: 0.5rem; }
    .rounded-xl { border-radius: 0.75rem; }
    .rounded-full { border-radius: 9999px; }
    .border { border-width: 1px; }
    .border-b { border-bottom-width: 1px; }
    .border-t { border-top-width: 1px; }
    .border-l-4 { border-left-width: 4px; }
    .bg-white { background-color: var(--white); }
    .bg-gray-50 { background-color: var(--gray-95); }
    .bg-gray-200 { background-color: var(--gray-90); }
    .text-gray-500 { color: var(--gray-60); }
    .text-gray-600 { color: var(--gray-50); }
    .text-gray-700 { color: var(--gray-40); }
    .text-gray-900 { color: var(--black); }
    .hover\:text-\[\#2563eb\]:hover { color: var(--black); }
    .border-gray-200 { border-color: var(--gray-90); }
    .grid { display: grid; }
    .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .max-w-6xl { max-width: 72rem; }
    .max-w-4xl { max-width: 56rem; }
    .transition { transition-property: all; transition-duration: 150ms; }
    .transition-colors { transition-property: color, background-color, border-color; transition-duration: 150ms; }
    .group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }
    .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
    .mb-2 { margin-bottom: 0.5rem; }
    .mb-3 { margin-bottom: 0.75rem; }
    .mb-4 { margin-bottom: 1rem; }
    .mb-6 { margin-bottom: 1.5rem; }
    .mb-8 { margin-bottom: 2rem; }
    .mb-10 { margin-bottom: 2.5rem; }
    .mb-12 { margin-bottom: 3rem; }
    .mt-4 { margin-top: 1rem; }
    .ml-2 { margin-left: 0.5rem; }
    .mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
    .block { display: block; }
    .inline-block { display: inline-block; }
    .inline { display: inline; }
    .select-none { user-select: none; }
    .select-text { user-select: text; }
    .flex-grow { flex-grow: 1; }
    .line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
    .backdrop-blur-md { backdrop-filter: blur(12px); }
    .bg-white\/90 { background-color: rgba(255, 255, 255, 0.9); }
    .bg-white\/95 { background-color: rgba(255, 255, 255, 0.95); }
    .h-4 { height: 1rem; }
    .h-5 { height: 1.25rem; }
    .h-8 { height: 2rem; }
    .h-48 { height: 12rem; }
    .h-auto { height: auto; }
    .w-1\/4 { width: 25%; }
    .w-1\/2 { width: 50%; }
    .w-2\/3 { width: 66.666667%; }
    .w-3\/4 { width: 75%; }
    .w-4\/5 { width: 80%; }
    .w-5\/6 { width: 83.333333%; }
    .w-20 { width: 5rem; }
    .w-24 { width: 6rem; }
    .w-full { width: 100%; }
    .object-cover { object-fit: cover; }
    .overflow-hidden { overflow: hidden; }
    .space-y-4 > * + * { margin-top: 1rem; }
    .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }

    /* HOCS specific overrides */
    .text-\[\#2563eb\] { color: var(--black); }
    .border-\[\#2563eb\] { border-color: var(--black); }
    .bg-\[\#2563eb\]\/10 { background-color: var(--gray-95); }
    .hover\:text-\[\#1d4ed8\]:hover { color: var(--gray-10); }
    .bg-\[\#2563eb\] { background-color: var(--black); }
    .hover\:bg-\[\#1d4ed8\]:hover { background-color: var(--gray-10); }
    .border-l-4.border-\[\#2563eb\] { border-color: var(--black); }
    .bg-\[\#2563eb\]\/5 { background-color: var(--gray-95); }
    
    /* Blog Listing Styles */
    .blog-listing {
      padding: 2rem 0;
    }
    
    .blog-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
      gap: 2rem;
      margin-top: 2rem;
    }
    
    .blog-card {
      background: var(--white);
      border: 1px solid var(--gray-90);
      border-radius: 8px;
      overflow: hidden;
      transition: all 0.3s ease;
      text-decoration: none;
      display: block;
      height: 100%;
    }
    
    .blog-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
      border-color: var(--gray-80);
      text-decoration: none;
    }
    
    .blog-card-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    
    .blog-card-content {
      padding: 1.5rem;
    }
    
    .blog-card-category {
      display: inline-block;
      padding: 0.25rem 0.75rem;
      background-color: var(--gray-95);
      color: var(--gray-40);
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.025em;
      margin-bottom: 1rem;
    }
    
    .blog-card-title {
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.3;
      color: var(--black);
      margin-bottom: 0.75rem;
    }
    
    .blog-card-excerpt {
      color: var(--gray-40);
      font-size: 0.9375rem;
      line-height: 1.5;
      margin-bottom: 1rem;
    }
    
    .blog-card-meta {
      display: flex;
      align-items: center;
      color: var(--gray-60);
      font-size: 0.8125rem;
    }
    
    .blog-header {
      text-align: center;
      padding: 3rem 0 1rem;
    }
    
    .blog-title {
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--black);
      margin-bottom: 1rem;
    }
    
    .blog-subtitle {
      font-size: 1.125rem;
      color: var(--gray-40);
      max-width: 600px;
      margin: 0 auto;
    }
    
    @media (max-width: 768px) {
      .blog-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }
      
      .blog-title {
        font-size: 2rem;
      }
      
      .blog-header {
        padding: 2rem 0 1rem;
      }
    }
    
    /* Related Posts Section Fixes */
    .related-posts-section {
      background-color: var(--gray-95);
      padding: 4rem 0;
    }
    
    .related-posts-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 2rem;
    }
    
    .related-post-card {
      background: var(--white);
      border: 1px solid var(--gray-90);
      border-radius: 6px;
      padding: 1.5rem;
      transition: all 0.3s ease;
      text-decoration: none;
      display: block;
      height: 100%;
    }
    
    .related-post-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
      border-color: var(--gray-80);
      text-decoration: none;
    }
    
    .related-post-category {
      display: inline-block;
      padding: 0.25rem 0.75rem;
      background-color: var(--gray-95);
      color: var(--gray-40);
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.025em;
      margin-bottom: 1rem;
    }
    
    .related-post-title {
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.3;
      color: var(--black);
      margin-bottom: 0.75rem;
    }
    
    .related-post-excerpt {
      color: var(--gray-40);
      font-size: 0.875rem;
      line-height: 1.5;
      margin-bottom: 1rem;
    }
    
    .related-post-meta {
      display: flex;
      align-items: center;
      color: var(--gray-60);
      font-size: 0.75rem;
    }
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2.5rem;
    }
    
    .section-title {
      font-size: 1.875rem;
      font-weight: 700;
      color: var(--black);
      margin: 0;
    }
    
    .view-all-link {
      color: var(--gray-40);
      font-size: 0.9375rem;
      font-weight: 500;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
    }
    
    .view-all-link:hover {
      color: var(--black);
      text-decoration: none;
    }
    
    .view-all-link svg {
      margin-left: 0.5rem;
      transition: transform 0.3s ease;
    }
    
    .view-all-link:hover svg {
      transform: translateX(4px);
    }
    
    @media (min-width: 768px) {
      .md\:flex { display: flex; }
      .md\:hidden { display: none; }
      .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .md\:text-left { text-align: left; }
      .md\:text-4xl { font-size: 2.25rem; }
      .md\:flex-row { flex-direction: row; }
    }
    
    @media (min-width: 1024px) {
      .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .lg\:block { display: block; }
    }
    
    @media (max-width: 768px) {
      .related-posts-section {
        padding: 3rem 0;
      }
      
      .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 2rem;
      }
      
      .section-title {
        font-size: 1.5rem;
      }
      
      .related-posts-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }
    }