/* ============================================================================
   SHARED BLOG STYLES

   Every page under this directory used to carry its own inline <style> block:
   32 copies of the same CSS, drifting independently. This file holds the rules
   that were byte-identical on all of them.

   It is linked BEFORE each page's remaining inline block, so a page can still
   override anything here — but if two pages need the same rule, it belongs in
   this file, not pasted into both.
   ========================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
      --pink: #E91F63; --pink-dark: #C2185B; --pink-light: #FFF0F5;
      --blue: #4085F5; --purple: #8B5CF6;
      --bg: #FAFBFF; --text: #0F172A; --text-secondary: #64748B;
      --white: #FFFFFF; --card-shadow: 0 4px 24px rgba(0,0,0,0.06);
      --radius-lg: 24px;
    }

html { scroll-behavior: smooth; font-size: 16px; }

body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }

.nav {
      position: sticky; top: 0; z-index: 100;
      background: rgba(255,255,255,0.85); backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border-bottom: 1px solid rgba(0,0,0,0.04);
    }

.nav-logo {
      display: flex; align-items: center; gap: 10px;
      font-weight: 800; font-size: 1.15rem; color: var(--text);
      text-decoration: none; letter-spacing: -0.02em;
    }

.nav-logo img { width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

.nav-back { color: var(--pink-dark); text-decoration: none; font-weight: 600; font-size: 0.9rem; }

.footer-links a:hover { color: var(--white); }

footer p { font-size: 0.78rem; }