/* ==========================================================================
   1. ROOT & CORE STYLES
   ========================================================================== */
:root { 
    --aj-red: #CC0000; 
    --text-main: #242424; 
    --text-title: #080808;
    --muted: #6B6B6B; 
    --border: #F2F2F2; 
    --tw-blue: #1D9BF0;
    --bg-light: #FAFAFA;
}

body { 
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    color: var(--text-main); 
    background: #fff; 
    line-height: 1.6;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

.story-container { 
    max-width: 740px; /* Optimal reading width like Medium */
    margin: 0 auto; 
    padding: 5px 20px; 
}

/* ==========================================================================
   2. TYPOGRAPHY & HEADLINES
   ========================================================================== */
.breadcrumb { 
    font-size: 15px; 
    font-weight: 500;
    text-transform: none; 
    color: var(--muted); 
    margin-bottom: 25px; 
    display: flex;
    gap: 8px;
    align-items: center;
}
.breadcrumb a { color: var(--muted); text-decoration: none; transition: 0.2s; }
.breadcrumb a:hover { color: var(--text-main); }
.breadcrumb span { color: var(--text-main); }

.headline { 
    font-family: 'Playfair Display', serif; 
    font-size: 48px; 
    line-height: 1.15; 
    margin-bottom: 30px; 
    font-weight: 900; 
    color: var(--text-title);
    letter-spacing: -0.02em;
}

/* ==========================================================================
   3. ARTICLE BODY CONTENT (THE READING ROW)
   ========================================================================== */
.article-content { 
    font-family: 'Lora', Georgia, serif; 
    font-size: 20px; 
    line-height: 1.75; 
    color: var(--text-main); 
    margin-bottom: 60px; 
}

.article-content p { margin-bottom: 32px; }

#main-text { max-width: 100% !important; width: 100%; margin: 0 auto; }

#main-text p, #main-text p.isSelectedEnd { 
    max-width: 100% !important; 
    width: 100% !important; 
    display: block !important; 
    box-sizing: border-box !important; 
}

#main-text img { 
    width: 100% !important; 
    height: auto !important; 
    border-radius: 4px;
    margin: 40px 0 !important; 
    display: block !important;
}

#main-text blockquote {
   font-family: 'Lora', serif;
    font-style: italic;
    font-size: 24px;
    line-height: 1.5;
    color: #000000;
    margin: 40px 0;
    padding: 10px 0 10px 25px;
    border-left: 3px solid #cc0000;
    background: #cc00000d;
}

#main-text ul, #main-text ol { margin: 20px 0 32px 25px; }
#main-text li { margin-bottom: 12px; color: var(--text-main); }
#main-text strong, #main-text b { color: var(--text-title); font-weight: 700; }

/* ==========================================================================
   4. SHARE GRID & UTILITIES
   ========================================================================== */
.share-grid { 
    display: flex; 
    gap: 12px; 
    margin: 30px 0; 
    padding: 15px 0; 
    border-top: 1px solid var(--border); 
    border-bottom: 1px solid var(--border); 
    overflow-x: auto; 
    scrollbar-width: none; 
}
.share-grid::-webkit-scrollbar { display: none; }

.s-link { 
    width: 38px; height: 38px; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    color: #fff !important; text-decoration: none; font-size: 16px; 
    transition: 0.2s ease; background: black;
}
.s-link:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

.s-fb { background: #1877f2; }
.s-x  { background: #000000; } 
.s-li { background: #0077b5; }
.s-wa { background: #25D366; } 
.s-tg { background: #0088cc; } 
.s-cp { background: #6B7280; cursor: pointer; }

/* ==========================================================================
   5. DISCUSSION & RELATED (LIST ROWS)
   ========================================================================== */
.comment-card { 
    background: #fff; 
    padding: 24px 0; 
    border-bottom: 1px solid var(--border); 
}
.reply-card { 
    margin-left: 40px; 
    padding-left: 20px; 
    border-left: 2px solid var(--border); 
    margin-top: 15px; 
}
.reply-link { 
    color: var(--muted); 
    font-size: 13px; 
    font-weight: 500; 
    cursor: pointer; 
    text-decoration: none;
}
.reply-link:hover { color: var(--text-main); }

.list-view { margin-top: 80px; }
.list-item { 
    display: flex; 
    gap: 25px; 
    margin-bottom: 30px; 
    text-decoration: none; 
    color: inherit; 
    align-items: center; 
}
.list-img { width: 160px; height: 100px; border-radius: 4px; object-fit: cover; background: var(--bg-light); }
.list-title { 
    font-weight: 800; 
    font-size: 18px; 
    line-height: 1.3; 
    font-family: 'Inter', sans-serif;
    color: var(--text-title);
}

.verified-badge svg { 
    width: 18px; height: 18px; 
    fill: var(--tw-blue); 
    vertical-align: middle; 
}

/* ==========================================================================
   6. RESPONSIVE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 768px) {
    .headline { font-size: 32px; }
    .list-img { width: 100px; height: 70px; }
    .list-title { font-size: 16px; }
}