:root {
      --primary-red: #dc2626; --red-dark: #b91c1c; --red-light: #fef2f2;
      --black: #111111; --text: #1f2937; --muted: #9ca3af; --subtle: #6b7280;
      --off-white: #f7f5f2; --white: #ffffff; --border: #e8e6e1;
      --nav-h: 68px;
      --font-display: 'Playfair Display', Georgia, serif;
    }
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { font-family:'DM Sans',sans-serif; background:var(--off-white); color:var(--text); }

    .blog-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;  
      gap: 8px;                        
      margin-top: 48px;
    }

    .blog-grid-item {                  
      overflow: hidden;
      border-radius: 12px;
      aspect-ratio: 3/4;                
    }

    .blog-grid-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      transition: transform 0.6s ease;
      display: block;                  
    }

    .blog-grid-item:hover img {         
      transform: scale(1.05);
    }

    /* NAV */
    .navbar {
      position:fixed; top:0; left:0; right:0; height:var(--nav-h);
      background:var(--white); border-bottom:1px solid var(--border); z-index:100;
    }
    .nav-inner { max-width:1100px; margin:0 auto; height:100%; display:flex; align-items:center; justify-content:space-between; padding:0 2rem; }
    .nav-logo { font-family:var(--font-display); font-weight:900; font-size:1.4rem; color:var(--black); text-decoration:none; letter-spacing:-1px; }
    .nav-logo .i { color:#fbbf24; }
    .nav-back { display:inline-flex; align-items:center; gap:6px; font-size:0.85rem; font-weight:600; color:var(--subtle); text-decoration:none; transition:color .2s; }
    .nav-back:hover { color:var(--primary-red); }

    /* TOP META BAR */
    .meta-bar {
      margin-top:var(--nav-h);
      background:var(--white);
      border-bottom:1px solid var(--border);
      padding:16px 0;
    }
    .meta-bar-inner { max-width:760px; margin:0 auto; padding:0 2rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
    .breadcrumb { display:flex; align-items:center; gap:6px; font-size:0.78rem; color:var(--muted); }
    .breadcrumb a { color:var(--muted); text-decoration:none; transition:color .2s; }
    .breadcrumb a:hover { color:var(--primary-red); }
    .breadcrumb-sep { opacity:.4; }
    .breadcrumb-cur { color:var(--text); font-weight:500; }
    .meta-share { display:flex; gap:8px; }
    .share-dot {
      width:34px; height:34px; border-radius:50%;
      border:1.5px solid var(--border);
      display:flex; align-items:center; justify-content:center;
      color:var(--subtle); text-decoration:none; transition:all .2s; cursor:pointer; background:transparent;
    }
    .share-dot:hover { border-color:var(--primary-red); color:var(--primary-red); background:var(--red-light); }

    /* ARTICLE WRAPPER — centred narrow column */
    .article-wrap {
      max-width:760px; margin:0 auto;
      padding:48px 2rem 80px;
    }

    /* CATEGORY + TITLE BLOCK */
    .article-category {
      font-size:0.72rem; font-weight:700; letter-spacing:0.14em;
      text-transform:uppercase; color:var(--primary-red);
      display:inline-flex; align-items:center; gap:6px; margin-bottom:18px;
    }

    .article-title {
      font-family:var(--font-display);
      font-size:clamp(2rem, 5vw, 3.2rem);
      font-weight:900; line-height:1.1; letter-spacing:-0.02em;
      color:var(--black); margin-bottom:20px;
    }

    .article-subtitle {
      font-size:1.2rem; color:var(--subtle); line-height:1.6; font-weight:400;
      margin-bottom:32px; max-width:620px;
    }

    .article-highlight { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 24px 28px; margin: 32px 0; }
    .article-highlight-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary-red); margin-bottom: 10px; }
    .article-highlight ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
    .article-highlight li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; }
    .article-highlight li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-red); flex-shrink: 0; margin-top: 7px; }

    /* AUTHOR ROW */
    .author-row {
      display:flex; align-items:center; gap:12px;
      padding:20px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
      margin-bottom:40px;
    }
    .author-avatar { width:42px; height:42px; border-radius:50%; object-fit:cover; }
    .author-name { font-size:0.92rem; font-weight:600; color:var(--black); }
    .author-meta { font-size:0.78rem; color:var(--muted); margin-top:2px; }
    .author-meta span + span::before { content:'·'; margin:0 6px; opacity:.5; }
    .author-row-right { margin-left:auto; }
    .follow-btn {
      font-size:0.78rem; font-weight:700; padding:7px 16px;
      border-radius:8px; border:1.5px solid var(--border);
      background:transparent; cursor:pointer; color:var(--text);
      transition:all .2s;
    }
    .follow-btn:hover { border-color:var(--primary-red); color:var(--primary-red); }

    /* HERO IMAGE */
    .hero-img-wrap {
      margin:0 0 40px; overflow:hidden;
    }
    .hero-img-wrap img { width:100%; display:block; aspect-ratio:16/9; object-fit:cover; }
    .img-caption { font-size:0.78rem; color:var(--muted); padding:10px 0 0; font-style:italic; text-align:center; }

    /* BODY TYPOGRAPHY */
    .article-body { font-size:1.07rem; line-height:1.9; color:#374151; }
    .article-body p { margin-bottom:24px; }
    .article-body p:first-child::first-letter {
      font-family:var(--font-display); font-size:4.5rem; font-weight:900;
      color:var(--primary-red); float:left; line-height:0.75;
      margin:0.1em 0.1em 0 0; padding-top:0.08em;
    }

    .article-body h2 {
      font-family:var(--font-display); font-size:1.55rem; font-weight:800;
      color:var(--black); margin:48px 0 16px; line-height:1.2;
    }

    .article-body h3 {
      font-family:var(--font-display); font-size:1.1rem; font-weight:800;
      color:var(--black); margin:32px 0 10px;
    }

    /* KEY FACT boxes */
    .key-fact {
      margin:36px 0; background:var(--white);
      border-radius:16px; padding:28px 32px;
      border:1px solid var(--border);
      border-left:4px solid var(--primary-red);
      display:grid; grid-template-columns:64px 1fr; gap:20px; align-items:center;
    }
    
    .fact-text { font-size:1rem; color:var(--subtle); line-height:1.5; }
    .fact-text strong { color:var(--black); font-weight:700; }

    /* Pull quote */
    .pull-quote {
      margin:44px 0;
      padding:0 0 0 24px;
      border-left:3px solid var(--primary-red);
    }
    .pull-quote blockquote {
      font-family:var(--font-display); font-size:1.3rem; font-weight:700;
      color:var(--black); line-height:1.45; font-style:normal;
      margin-bottom:10px;
    }
    .pull-quote cite {
      font-size:0.8rem; color:var(--muted); font-style:normal;
      letter-spacing:0.04em; font-weight:600;
    }

    /* Inline image */
    .inline-img { margin:36px 0; border-radius:14px; overflow:hidden; }
    .inline-img img { width:100%; display:block; aspect-ratio:16/9; object-fit:cover; }

    
    /* DIVIDER */
    .article-divider { display:flex; align-items:center; gap:16px; margin:48px 0; }
    .article-divider::before, .article-divider::after { content:''; flex:1; height:1px; background:var(--border); }
    .divider-dot { width:6px; height:6px; border-radius:50%; background:var(--primary-red); flex-shrink:0; }

    /* BOTTOM ACTIONS */
    .article-bottom {
      padding:40px 0 0;
      border-top:1px solid var(--border);
      margin-top:48px;
    }
    .bottom-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:32px; }
    .bottom-label { font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin-bottom:12px; }
    
    .tag { font-size:0
      .78rem; font-weight:600; padding:6px 14px; border-radius:8px; background:var(--white); border:1.5px solid var(--border); color:var(--subtle); text-decoration:none; transition:all .2s; }
    .tag:hover { border-color:var(--primary-red); color:var(--primary-red); background:var(--red-light); }
    .reaction-row { display:flex; gap:8px; }
    .reaction-btn {
      display:inline-flex; align-items:center; gap:6px;
      font-size:0.82rem; font-weight:600; padding:8px 16px;
      border-radius:100px; border:1.5px solid var(--border);
      background:var(--white); cursor:pointer; color:var(--subtle);
      transition:all .2s;
    }
    .reaction-btn:hover { border-color:var(--primary-red); color:var(--primary-red); }
    .reaction-btn.liked { background:var(--red-light); border-color:var(--primary-red); color:var(--primary-red); }

    /* RELATED STORIES */
    .related-section {
      background:var(--white); border-radius:20px;
      border:1px solid var(--border); padding:32px;
      margin-top:0;
    }
    .related-section h3 { font-family:var(--font-display); font-size:0.85rem; font-weight:800; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin-bottom:24px; }
    .related-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
    .related-card { text-decoration:none; display:flex; gap:14px; align-items:flex-start; }
    .related-thumb { width:72px; height:72px; border-radius:10px; object-fit:cover; flex-shrink:0; }
    .related-cat { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--primary-red); margin-bottom:4px; }
    .related-title { font-size:0.9rem; font-weight:600; color:var(--black); line-height:1.4; transition:color .2s; }
    .related-card:hover .related-title { color:var(--primary-red); }
    .related-date { font-size:0.73rem; color:var(--muted); margin-top:4px; }

    @media (max-width:640px) {

      .key-fact { grid-template-columns:1fr; gap:8px; }
      .related-grid { grid-template-columns:1fr; }
      .article-title { font-size:2rem; }
      .bottom-row { flex-direction:column; align-items:flex-start; }

      .blog-grid {
        grid-template-columns: 1fr;     /* stack on phones */
        gap: 10px;
        margin-top: 28px;
      }

      .blog-grid-item {
        aspect-ratio: 3/4;            
      }
    }