/* ═══════════════════════════════════════════════════ BLOG — Reading Layout Updated March 2026 — stronger visual hierarchy, editorial elements, improved reading experience. ═══════════════════════════════════════════════════ */ /* ── Variables — inherit from tokens.css; no local overrides ── Drop cap uses --oxblood (per editorial system); body uses --ink/--dim. */ /* ── Reset ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif; font-weight: 400; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } p { text-align: justify; } strong { color: var(--text); font-weight: 600; } ::selection { background: rgba(0, 95, 115, 0.12); color: var(--text); } /* ═══════════════════════════════════════════════════ READING PROGRESS BAR Add

as first element inside , then add this JS before : const bar = document.getElementById('reading-progress'); window.addEventListener('scroll', () => { const total = document.body.scrollHeight - window.innerHeight; bar.style.width = Math.min((window.scrollY / total) * 100, 100) + '%'; }); ═══════════════════════════════════════════════════ */ .reading-progress { position: fixed; top: 0; left: 0; height: 10px; width: 0%; background: var(--teal); z-index: 999; pointer-events: none; transition: width 60ms linear; } /* ═══════════════════════════════════════════════════ NAV ═══════════════════════════════════════════════════ */ #nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 22px 0; transition: background 0.35s ease, border-color 0.35s ease, padding 0.35s ease; } #nav.scrolled { background: rgba(249, 248, 246, 0.96); border-bottom: 1px solid var(--border); padding: 14px 0; } .nav-inner { max-width: 1120px; margin: 0 auto; padding: 0 40px; display: flex; justify-content: space-between; align-items: center; } .nav-logo { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.5px; transition: color 0.3s; } .nav-logo span { color: var(--teal); } .nav-links { display: flex; gap: 26px; list-style: none; align-items: center; } .nav-links a { font-size: 13px; font-weight: 500; color: var(--dim); letter-spacing: 0.2px; transition: color 0.2s; } .nav-links a:hover { color: var(--text); } .nav-cta { background: var(--accent) !important; color: white !important; padding: 9px 20px !important; font-size: 13px !important; border: 1px solid var(--accent) !important; transition: background 0.2s, border-color 0.2s !important; } .nav-cta:hover { background: var(--teal) !important; border-color: var(--teal) !important; color: white !important; } /* Hamburger */ .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; z-index: 101; } .hamburger span { display: block; width: 24px; height: 1.5px; background: var(--text); } /* Mobile menu */ .mobile-menu { position: fixed; inset: 0; background: var(--accent); z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translateX(100%); transition: transform 0.42s cubic-bezier(0.77, 0, 0.175, 1); } .mobile-menu.open { transform: translateX(0); } .mobile-close { position: absolute; top: 28px; right: 32px; background: none; border: none; font-size: 24px; color: rgba(255, 255, 255, 0.6); cursor: pointer; transition: color 0.2s; } .mobile-close:hover { color: white; } .mobile-menu ul { list-style: none; text-align: center; } .mobile-menu ul li { margin-bottom: 28px; } .mobile-menu a { font-family: 'Fraunces', serif; font-size: 42px; font-weight: 700; color: rgba(255, 255, 255, 0.9); letter-spacing: -1px; transition: color 0.2s; } .mobile-menu a:hover { color: white; } /* ═══════════════════════════════════════════════════ BLOG READING LAYOUT ═══════════════════════════════════════════════════ */ .blog-page { min-height: 100vh; padding-top: 80px; background: var(--bg); } /* Reading column — 700px centered */ .blog-layout { max-width: 700px; margin: 0 auto; padding: 0 28px; } /* ── Back link ── */ .back-link { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--subtle); margin-top: 52px; margin-bottom: 44px; transition: color 0.2s; } .back-link:hover { color: var(--teal); } .back-link::before { content: '←'; font-size: 14px; } /* ── Post header block ── */ .blog-header { margin-bottom: 56px; padding-bottom: 40px; border-bottom: 1px solid var(--border); border-top: 3px solid var(--teal); padding-top: 28px; } /* Category badge — pill with teal tint */ .blog-category { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--teal); background: var(--teal-bg); border: 1px solid var(--teal-br); display: inline-block; padding: 5px 11px; margin-bottom: 22px; } .blog-title { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; font-size: clamp(34px, 5.5vw, 52px); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; color: var(--text); margin-bottom: 20px; } .blog-subtitle { font-size: 18.5px; line-height: 1.66; color: #5C5856; margin-bottom: 30px; max-width: 620px; } .blog-meta { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .blog-meta-item { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 1px; color: var(--subtle); text-transform: uppercase; } .blog-meta-divider { width: 3px; height: 3px; border-radius: 50%; background: var(--border2); flex-shrink: 0; } /* ── Article body ── */ .blog-body { padding-bottom: 100px; } /* First paragraph — larger lead text */ .blog-body > p:first-of-type { font-size: 19px; line-height: 1.82; color: #525050; } /* Drop cap on first letter — oxblood per editorial brand */ .blog-body > p:first-of-type::first-letter { font-family: 'Fraunces', Georgia, serif; font-size: 5.4em; font-weight: 400; font-style: italic; line-height: 0.78; float: left; margin: 0.04em 0.1em -0.05em 0; color: var(--oxblood); letter-spacing: -2px; } .blog-body p { font-size: 18px; line-height: 1.85; color: var(--dim); margin-bottom: 28px; } .blog-body p strong { color: var(--text); font-weight: 600; } /* In-article links */ .blog-body p a, .blog-body li a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--teal-br); transition: color 0.2s, text-decoration-color 0.2s; } .blog-body p a:hover, .blog-body li a:hover { color: var(--accent2); text-decoration-color: var(--accent2); } /* H2 — thin teal rule above */ .blog-body h2 { font-family: 'Fraunces', Georgia, serif; font-size: clamp(22px, 2.8vw, 28px); font-weight: 700; color: var(--text); line-height: 1.2; letter-spacing: -0.02em; margin-top: 64px; margin-bottom: 22px; padding-top: 22px; border-top: 1px solid var(--border); position: relative; } /* Short teal accent bar above H2 */ .blog-body h2::before { content: ''; position: absolute; top: -1px; left: 0; width: 44px; height: 2px; background: var(--teal); } .blog-body h3 { font-family: 'Fraunces', Georgia, serif; font-size: 19px; font-weight: 600; color: var(--text); line-height: 1.3; margin-top: 40px; margin-bottom: 14px; } .blog-body ul, .blog-body ol { padding-left: 24px; margin-bottom: 28px; } .blog-body li { font-size: 18px; line-height: 1.8; color: var(--dim); margin-bottom: 8px; } /* ── Pull quote — more impactful ── */ .blog-pullquote { position: relative; border-left: none; padding: 36px 44px 36px 44px; margin: 56px -28px; /* bleed past column */ background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; } /* Large decorative opening quotation mark */ .blog-pullquote::before { content: '\201C'; font-family: 'Fraunces', Georgia, serif; font-size: 200px; line-height: 1; color: var(--teal); opacity: 0.07; position: absolute; top: -20px; left: 16px; pointer-events: none; user-select: none; font-weight: 800; } .blog-pullquote p { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 22px; line-height: 1.52; color: var(--accent); margin-bottom: 0; position: relative; z-index: 1; max-width: 580px; margin-left: auto; margin-right: auto; } /* ── Data highlight box — more structured ── */ .blog-data-box { background: var(--bg2); border: 1px solid var(--border); border-top: 3px solid var(--teal); padding: 28px 32px; margin: 44px 0; } .blog-data-box strong { font-family: 'Fraunces', serif; font-size: 20px; color: var(--text); display: block; margin-bottom: 14px; letter-spacing: -0.4px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .blog-data-box p { font-size: 14.5px; margin-bottom: 0; line-height: 1.9; font-family: 'JetBrains Mono', monospace; color: var(--dim); letter-spacing: 0; } /* Coming soon variant — muted top border */ .blog-data-box.coming-soon-notice { border-top-color: var(--border2); } .blog-data-box.coming-soon-notice strong { color: var(--dim); font-size: 16px; } .blog-data-box.coming-soon-notice p { font-family: 'Inter', sans-serif; font-size: 15px; color: var(--subtle); } /* ── Post footer ── */ .blog-footer-bar { background: var(--bg2); border-top: 1px solid var(--border); padding: 36px 0; } .blog-footer-inner { max-width: 700px; margin: 0 auto; padding: 0 28px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .blog-footer-back { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--subtle); transition: color 0.2s; } .blog-footer-back:hover { color: var(--teal); } .blog-footer-back::before { content: '←'; font-size: 14px; } .blog-footer-sig { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--subtle); letter-spacing: 1px; } /* Site footer */ .site-footer { background: var(--dark); border-top: 1px solid rgba(255, 255, 255, 0.05); padding: 28px 0; } .site-footer-inner { max-width: 1120px; margin: 0 auto; padding: 0 40px; display: flex; justify-content: space-between; align-items: center; } .footer-name { font-family: 'Fraunces', serif; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.55); } .footer-mono { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255, 255, 255, 0.45); letter-spacing: 1px; } /* ═══════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════ */ @media (max-width: 768px) { .nav-inner { padding: 0 22px; } .nav-links { display: none; } .hamburger { display: flex; } .blog-layout { padding: 0 20px; } .blog-title { font-size: clamp(28px, 8vw, 40px); } .blog-body p { font-size: 17px; } .blog-body li { font-size: 17px; } .blog-footer-inner { flex-direction: column; align-items: flex-start; } .site-footer-inner { flex-direction: column; gap: 8px; text-align: center; } /* Constrain bleed on small screens */ .blog-pullquote { margin: 44px -20px; padding: 28px 24px; } .blog-pullquote p { font-size: 19px; } /* Drop cap on small screens */ .blog-body > p:first-of-type::first-letter { font-size: 4.2em; } } @media (max-width: 480px) { .back-link { margin-top: 36px; margin-bottom: 32px; } .blog-header { padding-top: 20px; } .blog-pullquote { margin: 36px -20px; padding: 24px 20px; } .blog-pullquote::before { font-size: 140px; opacity: 0.06; } .blog-pullquote p { font-size: 18px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .fade-up { opacity: 1; transform: none; } }