/* ----- Article typography (no @apply; pure CSS) ----- */

/* Base paragraph */
.prose p {
    font-size: 1rem;            /* 16px */
    line-height: 1.75;          /* relaxed */
    color: #374151;             /* gray-700 */
    margin: 1rem 0;             /* 16px vertical rhythm */
}

/* Headings hierarchy */
.prose h2 {
    font-size: 1.875rem;        /* 30px */
    line-height: 1.3;
    font-weight: 700;
    color: #111827;             /* gray-900 */
    margin-top: 2.5rem;         /* 40px */
    margin-bottom: 1rem;        /* 16px */
    padding-bottom: .5rem;      /* 8px */
    border-bottom: 1px solid #e5e7eb; /* gray-200 */
}

.prose h3 {
    font-size: 1.5rem;          /* 24px */
    line-height: 1.35;
    font-weight: 600;
    color: #1f2937;             /* gray-800 */
    margin-top: 2rem;           /* 32px */
    margin-bottom: .75rem;      /* 12px */
}

.prose h4 {
    font-size: 1.25rem;         /* 20px */
    line-height: 1.4;
    font-weight: 600;
    color: #374151;             /* gray-700 */
    margin-top: 1.5rem;         /* 24px */
    margin-bottom: .5rem;       /* 8px */
}

/* Ensure headings are block-level and not collapsed by resets */
.prose h2, .prose h3, .prose h4 {
    display: block;
}

/* Lists */
.prose ul,
.prose ol {
    margin: 1rem 0 1.25rem 0;
    padding-left: 1.25rem;      /* 20px */
    color: #374151;
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: .35rem 0; }

/* Blockquotes */
.prose blockquote {
    margin: 1.5rem 0;
    padding-left: 1rem;
    border-left: 4px solid #6366f1; /* indigo-500 */
    color: #4b5563;                 /* gray-600 */
    font-style: italic;
}

/* Code */
.prose pre {
    background: #111827;       /* gray-900 */
    color: #f9fafb;            /* gray-50 */
    padding: 1rem;
    border-radius: .5rem;
    overflow-x: auto;
    margin: 1.25rem 0;
}
.prose code {
    background: #f3f4f6;       /* gray-100 */
    color: #4f46e5;            /* indigo-600 */
    padding: 0 .25rem;
    border-radius: .25rem;
    font-size: .95em;
}

/* Links */
.prose a {
    color: #4f46e5;            /* indigo-600 */
    font-weight: 500;
    text-decoration: none;
}
.prose a:hover { text-decoration: underline; }

/* Images */
.prose img {
    border-radius: .5rem;
    margin: 1rem 0;
    max-width: 100%;
    height: auto;
}

/* Tables */
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: .95rem;
}
.prose th, .prose td {
    border: 1px solid #e5e7eb; /* gray-200 */
    padding: .5rem .75rem;
}
.prose th {
    background: #f9fafb;       /* gray-50 */
    text-align: left;
    font-weight: 600;
    color: #111827;
}

/* Make sure article spacing breathes inside the card */
article.prose {
    margin: 0;
}