/* AI4EPC Blog "Letters" style Inspired by Dan Koe's minimal newsletter layout. Applied only when includes: .ai4epc-letters */ /* --- Page base --- */ body.ai4epc-letters{ background:#ffffff !important; color:#0f172a; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Hide decorative theme layer used on other pages */ body.ai4epc-letters .ai4epc-layer{display:none !important;} /* Narrower, letter-like column */ body.ai4epc-letters main .max-w-6xl, body.ai4epc-letters footer .max-w-6xl{ max-width:46rem !important; } /* Typography: serif for content, sans for UI */ body.ai4epc-letters main, body.ai4epc-letters main article, body.ai4epc-letters .prose{ font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } body.ai4epc-letters header, body.ai4epc-letters nav, body.ai4epc-letters footer{ font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; } /* Header: calmer, less "app" */ body.ai4epc-letters header{ position:static !important; background:transparent !important; backdrop-filter:none !important; border-bottom:0 !important; } /* Footer: reduce glass look */ body.ai4epc-letters footer{ background:transparent !important; border-top:1px solid rgba(15,23,42,0.08) !important; } /* --- Index page (list) --- */ body.ai4epc-letters .letters-index header p{ letter-spacing:0.22em !important; } body.ai4epc-letters .letters-index h1{ font-size:2.25rem !important; line-height:1.12 !important; letter-spacing:-0.02em !important; } body.ai4epc-letters .letters-index section{ background:transparent !important; box-shadow:none !important; border-radius:0 !important; backdrop-filter:none !important; } body.ai4epc-letters .letters-index article{ padding:1.25rem 0 !important; } body.ai4epc-letters .letters-index article:hover{ background:transparent !important; } body.ai4epc-letters .letters-index h2{ font-size:1.35rem !important; line-height:1.25 !important; letter-spacing:-0.01em !important; } body.ai4epc-letters .letters-index a{ text-decoration:none; } body.ai4epc-letters .letters-index a:hover h2{ text-decoration:underline; text-underline-offset:4px; } /* --- Post page --- */ body.ai4epc-letters .letters-post{ max-width:46rem !important; } body.ai4epc-letters .letters-post h1{ font-size:2.55rem !important; line-height:1.12 !important; letter-spacing:-0.03em !important; } body.ai4epc-letters .letters-post .prose{ max-width:none; font-size:1.125rem; line-height:1.85; color:#0f172a; } body.ai4epc-letters .letters-post .prose p{ margin-top:1.05em; margin-bottom:1.05em; } body.ai4epc-letters .letters-post .prose h2{ margin-top:2.2em; margin-bottom:0.7em; font-size:1.55em; line-height:1.25; letter-spacing:-0.015em; } body.ai4epc-letters .letters-post .prose h3{ margin-top:1.8em; margin-bottom:0.55em; font-size:1.22em; line-height:1.3; } body.ai4epc-letters .letters-post .prose a{ color:inherit; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; } body.ai4epc-letters .letters-post .prose a:hover{ text-decoration-thickness:2px; } body.ai4epc-letters .letters-post figure{ border:0 !important; box-shadow:none !important; background:transparent !important; } body.ai4epc-letters .letters-post img{ border-radius:18px; } body.ai4epc-letters .letters-post figcaption{ padding-left:0 !important; padding-right:0 !important; color:rgba(15,23,42,0.6) !important; } body.ai4epc-letters .letters-post .prose blockquote{ border-left:3px solid rgba(15,23,42,0.18); padding-left:1em; font-style:italic; color:rgba(15,23,42,0.78); } body.ai4epc-letters .letters-post .prose hr{ border:0; border-top:1px solid rgba(15,23,42,0.12); margin:2.2em 0; } body.ai4epc-letters .letters-post .prose table{ width:100%; border-collapse:collapse; font-size:0.98em; } body.ai4epc-letters .letters-post .prose th, body.ai4epc-letters .letters-post .prose td{ border:1px solid rgba(15,23,42,0.12); padding:0.65em 0.75em; vertical-align:top; } body.ai4epc-letters .letters-post .prose th{ background:rgba(15,23,42,0.04); font-weight:600; } /* Small screens */ @media (max-width: 640px){ body.ai4epc-letters .letters-index h1{font-size:1.95rem !important;} body.ai4epc-letters .letters-post h1{font-size:2.05rem !important;} body.ai4epc-letters .letters-post .prose{font-size:1.05rem;} }