/*
 * GENERATED — do not hand-edit. scripts/extract-blog-css.mjs writes this.
 *
 * Enqueued from functions.php on is_singular( 'post' ) ONLY, because these
 * selectors belong to the single-post hero and body — which are built from CORE
 * blocks wearing the design's classes, not from custom blocks. A per-block
 * style.css would therefore never load: that is exactly the bug this file exists
 * to fix, shipped on 2026-08-05 and reported as "no sidebar, and the post page is
 * ugly". See STANDALONE in the script.
 */

/*
 * article-hero — extracted from design-reference by scripts/extract-blog-css.mjs.
 * Do not hand-edit: re-run the script. The selector-to-bucket map lives in it.
 *
 * 19 rules, shipped in assets/css/single-post.css.
 *
 * Layer 2 chrome (.page-hero, .crumbs, .sec, .container, .reveal, .btn) is USED
 * here and lives in global.css — never redeclared. CLAUDE.md rule 3.
 */

@media (hover:hover){.art-byline .share a:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px)}}

@media (hover:hover){.toc .share-row a:hover{background:var(--brand);color:var(--brand-ink)}}

.art-hero {padding:48px 0 30px;background:
    radial-gradient(50% 60% at 88% 0%, rgba(18,212,136,.10), transparent 60%);}

.art-hd {max-width:780px}

.art-cat {font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-2)}

.art-hero h1 {font-size:clamp(34px,3.3vw,42px);line-height:1.08;letter-spacing:-.03em;font-weight:700;margin:14px 0 16px}

.art-dek {font-size:18px;line-height:1.6;color:var(--muted);max-width:680px}

.art-byline {display:flex;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap}

.art-byline .av {width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--accent-2));display:grid;place-items:center;color:#fff;font-weight:700;font-family:var(--display);font-size:16px}

.art-byline .who b {display:block;font-size:14px;color:var(--ink);font-weight:700}

.art-byline .who span {font-size:13px;color:var(--muted)}

.art-byline .share {margin-left:auto;display:flex;gap:8px}

.art-byline .share a {width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2);transition:all .2s}

.art-byline .share svg {width:16px;height:16px;fill:currentColor}

.art-cover {margin:8px 0 0}

.art-cover image-slot,.art-cover img {display:block;width:100%;height:clamp(280px,42vw,520px);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);object-fit:cover}

.toc .share-row {display:flex;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}

.toc .share-row a {width:34px;height:34px;border-radius:9px;background:var(--soft);display:grid;place-items:center;color:var(--ink-2);transition:all .2s}

.toc .share-row svg {width:15px;height:15px;fill:currentColor}


/*
 * article-body — extracted from design-reference by scripts/extract-blog-css.mjs.
 * Do not hand-edit: re-run the script. The selector-to-bucket map lives in it.
 *
 * 28 rules, shipped in assets/css/single-post.css.
 *
 * Layer 2 chrome (.page-hero, .crumbs, .sec, .container, .reveal, .btn) is USED
 * here and lives in global.css — never redeclared. CLAUDE.md rule 3.
 */

@media (hover:hover){.prose a:hover{text-decoration-color:var(--brand-2)}}

@media (hover:hover){.art-tags a:hover{border-color:var(--ink-2)}}

.art-wrap {display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}

.prose {max-width:720px;font-size:17px;line-height:1.75;color:#384155}

.prose>p {margin:0 0 22px}

.prose h2 {font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:44px 0 16px;scroll-margin-top:92px}

.prose h3 {font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin:32px 0 12px;scroll-margin-top:92px}

.prose strong {color:var(--ink);font-weight:700}

.prose a {color:var(--brand-2);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(18,92,212,.3)}

.prose ul,.prose ol {margin:0 0 22px;padding-left:22px;display:flex;flex-direction:column;gap:9px}

.prose li {padding-left:4px}

.prose li::marker {color:var(--brand-2)}

.prose .lead {font-size:19px;line-height:1.7;color:var(--ink-2)}

.prose figure {margin:30px 0}

.prose figure image-slot {display:block;width:100%;height:clamp(220px,32vw,360px);border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}

.prose figcaption {font-size:13px;color:var(--muted-2);text-align:center;margin-top:10px}

.prose blockquote {margin:30px 0;padding:6px 0 6px 26px;border-left:3px solid var(--brand);font-family:var(--display);font-size:22px;line-height:1.4;font-weight:600;color:var(--ink);letter-spacing:-.01em}

.callout {display:flex;gap:16px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin:30px 0}

.callout .ci {width:40px;height:40px;border-radius:11px;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font-size:19px;flex:0 0 auto}

.callout .ct b {display:block;font-family:var(--display);font-size:15px;color:var(--ink);margin-bottom:4px;font-weight:700}

.callout .ct p {margin:0;font-size:14px;line-height:1.6;color:var(--muted)}

.art-tags {display:flex;gap:9px;flex-wrap:wrap;margin:40px 0 0}

.art-tags a {font-size:13px;font-weight:600;color:var(--ink-2);background:var(--soft);border:1px solid var(--line);padding:7px 14px;border-radius:999px}

.author-bio {display:flex;gap:20px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:28px;margin-top:34px}

.author-bio .av {width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--accent-2));display:grid;place-items:center;color:#fff;font-weight:700;font-family:var(--display);font-size:22px;flex:0 0 auto}

.author-bio h4 {font-size:17px;font-weight:700;margin-bottom:3px}

.author-bio .role {font-size:13px;color:var(--brand-2);font-weight:600;font-family:'JetBrains Mono',monospace;letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px}

.author-bio p {font-size:14px;line-height:1.6}

.single.single-post .wp-block-post-featured-image{ max-width: 780px; height: 376px; }

.single.single-post .wp-block-post-featured-image img{ object-fit: contain; height: 376px; }

.single.single-post .wp-block-group.sec{ padding-top: 0; }
.single.single-post .bkp-tldr-tab{ background: rgba(245, 174, 65, 0.08); border: 1px solid #F5AE41; border-radius: 8px; padding: 16px; }
.single.single-post .schema-faq .schema-faq-section { background-color: #F8FBFF; border: 1px solid #CED6E5; box-shadow: 1px 4px 12px rgba(184, 193, 211, 0.12); border-radius: 10px; padding: 24px; margin-bottom: 28px; }
.single.single-post div.wp-block-spacer{ height: 0 !important; }
.single.single-post .prose p { margin: 0 0 22px; }
.single.single-post .prose ul, .single.single-post .prose ol{ margin-bottom: 9px; }
.single.single-post .prose ul + p{ margin-top: 18px; }
.single.single-post .prose p:has(+ ul){ margin-bottom: 18px; }
.single.single-post .prose .wp-block-table{ margin: 22px 0 30px 0; }

@media (max-width: 1040px) {
    .art-wrap { grid-template-columns: 1fr; gap: 0; }
	.single.single-post .prose{ max-width: 100%; }
}
@media (max-width: 850px) {
	.single.single-post  .rel-card .rc-media{ aspect-ratio: 21 / 10; }
	.single.single-post  .rel-card .rc-media img{ width: 100%; }
	.single.single-post  .rel-grid{ grid-template-columns: repeat(1, 1fr); }
	.single.single-post .prose .wp-block-table:has(td:nth-child(4)){ overflow: overflow: scroll; }
	.single.single-post .prose table:has(tr td:nth-child(4)) { width: 150%; }
}
@media (max-width: 719px) {
	.single.single-post .wp-block-post-featured-image img{ object-fit: fill !important; }
}
@media (max-width: 576px) {
	.single.single-post .prose p { margin: 0 0 18px; }
	.single.single-post .prose table:has(tr td:nth-child(4)) { width: 200%; }
}
@media (max-width: 425px) {
	.single.single-post .prose table:has(tr td:nth-child(4)) { width: 300%; }
}