/* PropFlagger — blog & article styles */

.pf-article__header { background: linear-gradient(180deg, var(--pf-tint), #fff); padding: 28px 0 28px; border-bottom: 1px solid var(--pf-line); }
.pf-article__cat { margin: 0 0 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pf-article__title { font-size: clamp(1.9rem, 4.6vw, 2.8rem); line-height: 1.15; margin-bottom: 0.4em; }
.pf-article__dek { font-size: 1.22rem; color: var(--pf-muted); max-width: 60ch; }

.pf-byline { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.pf-byline__text { display: flex; flex-direction: column; font-size: 0.92rem; color: var(--pf-muted); line-height: 1.4; }
.pf-byline__author { color: var(--pf-ink); font-weight: 600; }
.pf-byline__dates { display: flex; flex-wrap: wrap; gap: 0 6px; }

.pf-article__image { margin-top: 32px; margin-bottom: 8px; }
.pf-article__image img { width: 100%; border-radius: var(--pf-radius); }
.pf-article__image figcaption { font-size: 0.88rem; color: var(--pf-muted); margin-top: 8px; text-align: center; }
.pf-article .pf-prose { padding-top: 32px; }
.pf-tags { margin: 8px 0 24px; font-size: 0.92rem; }
.pf-tags a { display: inline-block; margin: 0 4px 4px 0; padding: 2px 10px; border: 1px solid var(--pf-line); border-radius: 999px; text-decoration: none; color: var(--pf-muted); background: #fff; }
.pf-tags a:hover { background: var(--pf-blue-soft); color: var(--pf-blue-dark); }

.pf-connect { margin: 28px 0; padding: 16px 20px; border: 1px solid var(--pf-line); border-left: 4px solid var(--pf-blue); background: #fff; border-radius: 8px; }
.pf-connect__title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pf-muted); margin-bottom: 6px; }
.pf-connect p { margin-bottom: 4px; }

.pf-related { margin: 48px 0 16px; }
.pf-related .pf-section-title { margin-bottom: 18px; }

/* Author box */
.pf-author-box { display: flex; gap: 20px; align-items: flex-start; margin: 40px 0 0; padding: 24px; border: 1px solid var(--pf-line); border-radius: var(--pf-radius); background: #fff; box-shadow: var(--pf-shadow); }
.pf-author-box__photo { flex: none; }
.pf-avatar--lg { width: 88px; height: 88px; }
.pf-author-box__name { font-size: 1.3rem; margin-bottom: 2px; }
.pf-author-box__title { color: var(--pf-blue-dark); font-weight: 600; font-size: 0.95rem; margin-bottom: 10px; }
.pf-author-box .pf-eyebrow { margin-bottom: 2px; }
@media (max-width: 560px) { .pf-author-box { flex-direction: column; } }

/* Author page */
.pf-author-hero { background: linear-gradient(160deg, var(--pf-navy), var(--pf-navy-2)); color: #fff; padding: 28px 0 48px; }
.pf-author-hero .pf-page-title { color: #fff; }
.pf-author-hero .pf-page-intro { color: #cddcec; }
.pf-author-hero .pf-eyebrow { color: #8fb7e3; }
.pf-author-hero .pf-breadcrumbs, .pf-author-hero .pf-breadcrumbs a { color: #aac4e0; }
.pf-author-hero .pf-social a { color: #dbe7f4; }
.pf-author-hero__grid { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; }
.pf-avatar--xl { width: 168px; height: 168px; border: 4px solid rgba(255, 255, 255, 0.25); }
.pf-avatar--xl.pf-avatar--initial { font-size: 3.5rem; }
.pf-author-section { margin-bottom: 40px; }
@media (max-width: 640px) { .pf-author-hero__grid { grid-template-columns: 1fr; text-align: left; } .pf-avatar--xl { width: 120px; height: 120px; } }

.pf-page .pf-prose { padding-top: 0; }
.pf-form-wrap { margin-top: 40px; padding: 24px; border: 1px solid var(--pf-line); border-radius: var(--pf-radius); background: var(--pf-tint); }

/* Comments */
.pf-comments { margin-top: 56px; }
.pf-comment-list { list-style: none; padding: 0; margin: 0 0 32px; }
.pf-comment-list .comment-body { border: 1px solid var(--pf-line); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; background: #fff; }
.pf-comment-list .children { list-style: none; padding-left: 20px; }
.pf-comment-list .avatar { border-radius: 50%; float: left; margin-right: 12px; }
.comment-meta { font-size: 0.88rem; color: var(--pf-muted); margin-bottom: 8px; }
.comment-form p { margin-bottom: 16px; }
.comment-form label { display: block; font-weight: 600; margin-bottom: 4px; }
.comment-reply-title { font-size: 1.3rem; }