.wpd-blog-single { background: var(--paper); }
.wpd-blog-single-hero { padding: clamp(100px, 12vw, 140px) 0 clamp(40px, 5vw, 64px); position: relative; overflow: hidden; background: var(--paper); background-image: radial-gradient(ellipse at top left, rgba(14, 62, 43, 0.04) 0%, transparent 60%), radial-gradient(ellipse at bottom right, rgba(14, 62, 43, 0.04) 0%, transparent 60%); }
.wpd-blog-single-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, var(--rule-strong) 1px, transparent 1.5px); background-size: 32px 32px; mask-image: radial-gradient(ellipse at top left, #000 10%, transparent 70%), radial-gradient(ellipse at bottom right, #000 10%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at top left, #000 10%, transparent 70%), radial-gradient(ellipse at bottom right, #000 10%, transparent 70%); opacity: .6; }
.wpd-blog-single-hero > .wrap { position: relative; z-index: 1; }
[data-theme="dark"] .wpd-blog-single-hero { background-image: radial-gradient(ellipse at top left, rgba(198, 242, 78, 0.06) 0%, transparent 60%), radial-gradient(ellipse at bottom right, rgba(198, 242, 78, 0.04) 0%, transparent 60%); }
[data-theme="dark"] .wpd-blog-single-hero::before { background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1.5px); opacity: 1; }
.wpd-blog-single-hero-inner { max-width: 800px; }
.wpd-blog-single-breadcrumb { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; overflow: hidden; color: var(--ink-3); font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.wpd-blog-single-breadcrumb a { flex: 0 0 auto; color: inherit; font-size: 13px !important; text-decoration: none; }
.wpd-blog-single-breadcrumb a:hover { color: var(--forest); }
.wpd-blog-single-breadcrumb .wpd-single-breadcrumb-title { overflow: hidden; flex: 1; color: var(--ink-3); font-family: var(--font-mono); font-size: 13px; font-weight: 400; letter-spacing: .1em; line-height: 1.4; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.wpd-blog-single-category { margin-bottom: 16px; }
.wpd-blog-single-category span { display: inline-block; padding: 4px 10px; border-radius: 99px; background: var(--always-dark); color: var(--always-light); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.wpd-blog-single h1 { max-width: 800px; margin: 14px 0 28px; color: var(--forest); font-family: var(--font-display); font-size: clamp(34px, 5vw, 50px); font-weight: 400; line-height: .96; }
.wpd-blog-single-byline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wpd-blog-single-byline .author { color: var(--forest); font-size: 13px; font-weight: 500; }
.wpd-blog-single-byline .date { color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.wpd-blog-share { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wpd-blog-share--compact { margin-top: 28px; }
.wpd-blog-share--full { max-width: 720px; margin: 48px auto 0; padding-top: 20px; border-top: 1px solid var(--rule); }
.wpd-blog-share-label { color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.wpd-blog-share a, .wpd-blog-share button { padding: 0; border: 0; background: transparent; color: var(--forest); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wpd-blog-share a:hover, .wpd-blog-share button:hover { color: var(--forest-3); }
.wpd-blog-single-content { padding-bottom: 100px; }
.wpd-blog-single-cover { max-width: 800px; aspect-ratio: 16 / 9; margin: 48px auto 64px; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; background: var(--paper-2); }
.wpd-blog-single-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wpd-blog-single .entry-content { max-width: 720px; margin: 0 auto; color: var(--ink-2); font-size: 17px; line-height: 1.75; }
.wpd-blog-single .entry-content h2, .wpd-blog-single .entry-content h3 { color: var(--forest); font-family: var(--font-display); font-weight: 400; line-height: 1.1; }
.wpd-blog-single .entry-content h2 { margin-top: 1em; font-size: 36px; }
.wpd-blog-single .entry-content h3 { margin-top: 1.8em; font-size: 28px; }
.wpd-blog-single .entry-content img { max-width: 100%; height: auto; }
#blog-post-content .entry-content code { padding: .16em .38em; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper-2); color: var(--forest); font-family: var(--font-mono); font-size: .82em; }
#blog-post-content .entry-content pre, #blog-post-content .entry-content pre[class*="language-"] { position: relative; max-width: 100%; margin: 2em 0; padding: 20px 22px; overflow-x: auto; border: 1px solid rgba(244, 241, 232, .14); border-radius: 6px; background: var(--always-dark); color: rgba(244, 241, 232, .9); font-family: var(--font-mono); font-size: 13px; line-height: 1.65; tab-size: 2; white-space: pre; -webkit-overflow-scrolling: touch; }
#blog-post-content .entry-content pre code, #blog-post-content .entry-content pre[class*="language-"] code { display: block; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font-size: inherit; line-height: inherit; white-space: inherit; }
#blog-post-content .entry-content pre[class*="language-"]::before { display: block; margin-bottom: 10px; color: var(--lime); font-size: 10px; letter-spacing: .12em; line-height: 1; text-transform: uppercase; }
#blog-post-content .entry-content pre.language-php::before, #blog-post-content .entry-content pre:has(code.language-php)::before { content: "PHP"; }
#blog-post-content .entry-content pre.language-javascript::before, #blog-post-content .entry-content pre.language-js::before, #blog-post-content .entry-content pre:has(code.language-javascript)::before, #blog-post-content .entry-content pre:has(code.language-js)::before { content: "JavaScript"; }
#blog-post-content .entry-content pre.language-typescript::before, #blog-post-content .entry-content pre.language-ts::before, #blog-post-content .entry-content pre:has(code.language-typescript)::before, #blog-post-content .entry-content pre:has(code.language-ts)::before { content: "TypeScript"; }
#blog-post-content .entry-content pre.language-bash::before, #blog-post-content .entry-content pre.language-shell::before, #blog-post-content .entry-content pre:has(code.language-bash)::before, #blog-post-content .entry-content pre:has(code.language-shell)::before { content: "Terminal"; }
#blog-post-content .entry-content pre.language-json::before, #blog-post-content .entry-content pre:has(code.language-json)::before { content: "JSON"; }
#blog-post-content .entry-content a { color: var(--forest); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
#blog-post-content .entry-content a:hover { color: var(--forest-3); text-decoration-color: var(--forest-3); }
#blog-post-content .entry-content blockquote { margin: 2.4em 0; padding: 20px 24px; border-left: 3px solid var(--lime); background: var(--paper-2); color: var(--forest); font-family: var(--font-display); font-size: 24px; font-style: italic; line-height: 1.35; }
#blog-post-content .entry-content ul { margin: 1.4em 0; padding-left: 1.5em; list-style: none; }
#blog-post-content .entry-content ul li { position: relative; margin: .65em 0; padding-left: .7em; }
#blog-post-content .entry-content ul li::before { content: ""; position: absolute; top: .75em; left: -.75em; width: 6px; height: 6px; background: var(--lime); border-radius: 50%; }
#blog-post-content .entry-content ol { margin: 1.4em 0; padding-left: 2.2em; counter-reset: blog-step; list-style: none; }
#blog-post-content .entry-content ol li { position: relative; margin: .8em 0; padding-left: .6em; counter-increment: blog-step; }
#blog-post-content .entry-content ol li::before { content: counter(blog-step, decimal-leading-zero); position: absolute; top: .1em; left: -2.2em; width: 1.7em; color: var(--forest); font-family: var(--font-mono); font-size: .72em; letter-spacing: .08em; }
.wpd-blog-single-footer { max-width: 720px; margin: 56px auto 0; padding-top: 20px; border-top: 1px solid var(--rule); color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.wpd-related-posts { max-width: 1040px; margin: 96px auto 0; padding-top: 40px; border-top: 1px solid var(--rule); }
.wpd-related-posts h2 { margin: 0 0 28px; color: var(--forest); font-family: var(--font-display); font-size: 36px; font-weight: 400; }
.wpd-related-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.wpd-related-post { min-width: 0; }
.wpd-related-post-image { display: block; aspect-ratio: 4 / 3; margin-bottom: 18px; overflow: hidden; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper-2); }
.wpd-related-post-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.wpd-related-post-image:hover img { transform: scale(1.03); }
.wpd-related-post-meta { color: var(--ink-3); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.wpd-related-post h3 { margin: 9px 0; color: var(--forest); font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.1; }
.wpd-related-post h3 a { color: inherit; text-decoration: none; }
.wpd-related-post h3 a:hover { color: var(--forest-3); }
.wpd-related-post p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
@media (max-width: 820px) { .wpd-related-posts-grid { grid-template-columns: 1fr; gap: 40px; } }