/* Blog keeps the portfolio palette and typeface, with an uncluttered reading view. */
.blog-row { display:flex; align-items:flex-start; gap:28px; padding:24px 0; border-bottom:1px solid var(--jet); color:var(--white-2); }
.blog-row:first-child { padding-top:8px; }
.blog-row > div { flex:1; min-width:0; }
.blog-row h3 { font-size:19px; line-height:1.5; font-weight:500; }
.blog-row p { margin-top:8px; color:var(--light-gray-70); font-size:14px; line-height:1.8; }
.blog-row time { flex:none; padding-top:5px; color:var(--light-gray-70); font-size:12px; white-space:nowrap; }
.blog-row:hover h3 { color:var(--orange-yellow-crayola); }
.blog-empty { color:var(--light-gray-70); padding:12px 0; }
.blog-reading { color:var(--light-gray); font-weight:400; }
.reading-wrap { max-width:880px; padding:0 32px; margin:0 auto; }
.reading-nav { display:flex; justify-content:space-between; gap:20px; padding:32px 0; border-bottom:1px solid var(--jet); font-size:14px; }
.reading-nav a, .reading-footer a { color:var(--light-gray-70); }
.reading-nav a:hover, .reading-footer a:hover { color:var(--orange-yellow-crayola); }
.blog-reading .reading-main { display:block; margin:0; padding:0; width:100%; min-width:0; }
.reading-header { padding:48px 0 36px; }
.reading-meta { font-size:13px; line-height:1.6; color:var(--light-gray-70); margin:16px 0 0; }
.reading-meta time { display:inline; }
.reading-header h1 { color:var(--white-1); font-size:clamp(29px,4vw,40px); font-weight:600; line-height:1.35; letter-spacing:-.8px; }
.blog-reading .reading-content { display:block; border:0; border-radius:0; box-shadow:none; background:none; padding:0; width:100%; font-size:16px; line-height:1.95; }
.reading-content p { margin:0 0 22px; }
.reading-content h2 { color:var(--white-2); font-size:24px; line-height:1.45; font-weight:500; margin:46px 0 18px; }
.reading-content h3 { color:var(--white-2); font-size:19px; margin:30px 0 14px; }
.reading-content a { display:inline; color:var(--orange-yellow-crayola); text-decoration:underline; text-underline-offset:3px; }
.reading-content strong { color:var(--white-2); font-weight:500; }
.reading-content figure { margin:30px 0; }
.reading-content img { max-width:100%; height:auto; border-radius:8px; margin:0 auto; }
.reading-content ul, .reading-content ol { padding-left:24px; margin:20px 0; }
.reading-content ul li { list-style:disc; }
.reading-content ol li { list-style:decimal; }
.reading-content li { margin-bottom:8px; }
.table-scroll { width:100%; overflow:auto; margin:24px 0 30px; border:1px solid var(--jet); border-radius:8px; }
.reading-content table { border-collapse:collapse; width:100%; font-size:14px; line-height:1.75; }
.reading-content th, .reading-content td { text-align:left; vertical-align:top; padding:15px 17px; border-bottom:1px solid var(--jet); min-width:120px; }
.reading-content th { color:var(--white-2); background:var(--eerie-black-1); font-weight:500; }
.reading-content tr:last-child td { border-bottom:0; }
.reading-content blockquote { border-left:3px solid var(--vegas-gold); padding-left:20px; margin:24px 0; }
.reading-content pre { overflow:auto; background:var(--eerie-black-1); padding:18px; border-radius:8px; margin:24px 0; }
.reading-content code { font-size:.9em; }
.reading-footer { border-top:1px solid var(--jet); margin-top:48px; padding:28px 0 56px; font-size:14px; }
@media(max-width:600px) {
 .blog-row { flex-direction:column; gap:8px; }
 .reading-wrap { padding:0 20px; }
 .reading-nav { padding:24px 0; }
 .reading-header { padding:36px 0 28px; }
 .reading-content th, .reading-content td { min-width:155px; padding:12px; }
 .blog-reading .reading-content { font-size:15px; line-height:1.9; }
}

.reading-content h4, .reading-content h5, .reading-content h6 { color:var(--white-2); font-size:17px; line-height:1.6; font-weight:500; margin:24px 0 12px; }
.reading-content hr { border:0; border-top:1px solid var(--jet); margin:28px 0; }

/* Keep the paired maintenance loops horizontal and readable on narrow screens. */
@media(max-width:600px) {
 .reading-content figure:has(img[src$="maintenance-en.svg"]) { overflow-x:auto; }
 .reading-content img[src$="maintenance-en.svg"] { min-width:760px; margin:0; }
}

@media(max-width:600px) {
 .reading-content figure:has(img[src$="workflow-comparison.svg"]) { overflow-x:auto; }
 .reading-content img[src$="workflow-comparison.svg"] { min-width:1000px; margin:0; }
}

@media(max-width:600px) {
 .reading-content figure:has(img[src$="architecture-en.svg"]) { overflow-x:auto; }
 .reading-content img[src$="architecture-en.svg"] { min-width:900px; margin:0; }
}

/* Explicit editorial review state, separate from draft/published status. */
.blog-row-title { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 12px; }
.blog-review-status { flex:none; color:var(--orange-yellow-crayola); font-size:11px; font-weight:400; line-height:1.5; white-space:nowrap; }

/* Preserve the paired sidebar and thread view on narrow screens. */
@media(max-width:600px) {
 .reading-content figure:has(img[src$="role-sidebar.svg"]) { overflow-x:auto; }
 .reading-content img[src$="role-sidebar.svg"] { min-width:1000px; margin:0; }
}

/* Keep both input paths readable on narrow screens. */
@media(max-width:600px) {
 .reading-content figure:has(img[src$="input-paths.svg"]) { overflow-x:auto; }
 .reading-content img[src$="input-paths.svg"] { min-width:950px; margin:0; }
}

/* Cite the book title within an article heading or list title. */
.reading-header h1 cite, .blog-row h3 cite { display:inline; font-style:italic; font-weight:inherit; color:inherit; }

/* Keep translations beside their primary article without nested links. */
.blog-title-link { min-width:0; }
.blog-title-link, .blog-title-link:visited, .blog-title-link h3 { color:var(--white-2); }
.blog-language-link { display:inline-flex; flex:none; align-items:center; color:var(--orange-yellow-crayola); font-size:13px; line-height:1.6; white-space:nowrap; }
.blog-language-link:hover { text-decoration:underline; text-underline-offset:3px; }
.blog-row-with-language:hover h3 { color:var(--white-2); }
.blog-row-with-language .blog-title-link:hover h3 { color:var(--orange-yellow-crayola); }
.blog-title-link:focus-visible, .blog-language-link:focus-visible, .blog-summary-link:focus-visible { outline:2px solid var(--orange-yellow-crayola); outline-offset:4px; border-radius:3px; }