/* DDI editorial surfaces. Site chrome and design tokens live in styles.css. */
.blog-page { position: relative; isolation: isolate; }
.blog-atmosphere { position: absolute; inset: 0 0 auto; height: 92vh; overflow: hidden; pointer-events: none; z-index: 0; }
.blog-main, .blog-page > .footer { position: relative; z-index: 1; }
.blog-page [hidden] { display: none !important; }
.blog-main { padding-top: calc(var(--nav-height) + 3rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.blog-index-header { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-block: 1.5rem 3rem; }
.blog-section-label, .blog-feature-label { color: var(--flare); font-weight: 600; margin: 0 0 1rem; }
.blog-index-header h1, .blog-article-header h1 { margin: 0; text-wrap: balance; }
.blog-index-header h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); max-width: 16ch; }
.blog-index-header p:not(.blog-section-label) { color: var(--dust); font-size: 1.1rem; margin: 1.5rem 0 0; }
.blog-rss { flex-shrink: 0; padding-block: .5rem; }
.blog-browser { border-top: 1px solid var(--seam); }
.blog-browser-top { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; padding-top: 2rem; }
.blog-search { width: min(100%, 30rem); }
.blog-search label { display: block; font-weight: 500; margin-bottom: .5rem; }
.blog-search input { width: 100%; background: var(--vault); border: 1px solid var(--dust); border-radius: 4px; padding: .8rem 1rem; color: var(--paper); font: inherit; }
.blog-search input::placeholder { color: var(--dust); opacity: 1; }
#blog-results-count { color: var(--dust); margin: 0 0 .8rem; font-size: .9rem; flex-shrink: 0; }
.blog-filters { display: flex; flex-wrap: wrap; gap: .5rem; padding-block: 1.4rem 2rem; }
.blog-filters button, .blog-share, [data-copy-code] { font: inherit; cursor: pointer; color: var(--paper); background: var(--panel); border: 1px solid var(--seam); border-radius: 4px; min-height: 44px; padding: .5rem .9rem; }
.blog-filters button:hover, .blog-share:hover, [data-copy-code]:hover { border-color: var(--signal); }
.blog-filters button[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.blog-posts { display: grid; }
.blog-card { padding-block: 2.3rem; border-top: 1px solid var(--seam); }
.blog-card h2 { font-family: var(--font-display); font-weight: 650; letter-spacing: -.025em; line-height: 1.2; font-size: clamp(1.5rem, 3vw, 2rem); margin: .8rem 0; max-width: 35ch; text-wrap: balance; }
.blog-card h2 a { color: var(--paper); }
.blog-card h2 a:hover { color: var(--signal); }
.blog-card-deck { color: var(--dust); max-width: 65ch; margin: 1rem 0; }
.blog-meta { display: flex; gap: 1.25rem; flex-wrap: wrap; color: var(--dust); font-size: .9rem; }
.blog-tags { display: flex; flex-wrap: wrap; gap: .4rem 1rem; list-style: none; padding: 0; margin: 1rem 0; font-size: .9rem; }
.blog-tags a { color: var(--flare); text-decoration: underline; text-decoration-color: var(--seam); text-underline-offset: .3em; }
.blog-tags a:hover { text-decoration-color: currentColor; }
.blog-read-link { display: inline-flex; gap: .8rem; align-items: center; margin-top: .7rem; font-weight: 500; }
.blog-featured { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(15rem, 1fr); align-items: center; gap: 3rem; padding: clamp(1.5rem, 4vw, 3rem); background: var(--panel); border: 1px solid var(--seam); border-radius: 14px; margin-bottom: 1rem; }
.blog-featured h2 { font-size: clamp(1.8rem, 3.3vw, 2.6rem); }
.blog-feature-label { font-size: .9rem; }
.blog-target-map { padding: 1.5rem; border-left: 1px solid var(--seam); }
.blog-target-node { display: flex; flex-direction: column; gap: .3rem; padding: 1rem; border: 1px solid var(--seam); border-left: 3px solid var(--signal); background: var(--ink); }
.blog-target-node span { color: var(--dust); font-size: .85rem; }
.blog-target-node strong { font-family: var(--font-mono); font-weight: 500; font-size: .9rem; }
.blog-target-node-end { border-left-color: var(--flare); }
.blog-target-path { display: flex; align-items: center; gap: 1rem; padding: 1rem; color: var(--dust); font-size: .8rem; }
.blog-target-path i { display: block; height: 2.3rem; width: 1px; background: var(--signal); margin-left: auto; position: relative; }
.blog-target-path i::after { content: ''; position: absolute; bottom: 0; left: -3px; width: 7px; height: 7px; border-right: 1px solid var(--signal); border-bottom: 1px solid var(--signal); transform: rotate(45deg); }
.blog-target-map p { color: var(--dust); margin-bottom: 0; font-size: .95rem; }
.blog-empty { padding: 3rem 0; }
.blog-empty h2 { font-family: var(--font-display); }
.blog-empty p { color: var(--dust); }
.blog-empty button { font: inherit; color: var(--paper); background: var(--panel); border: 1px solid var(--seam); border-radius: 4px; padding: .6rem 1rem; cursor: pointer; }
.blog-card-author { margin: 0 0 .4rem; font-size: .9rem; }
.blog-card-author a, .blog-author a { color: var(--paper); text-decoration: underline; text-underline-offset: .2em; }
.blog-card-author a:hover, .blog-author a:hover { color: var(--signal); }
.blog-index-links { display: flex; align-items: center; gap: 1.5rem; flex-shrink: 0; }
.blog-page .footer-links { flex-wrap: wrap; }
.blog-page .footer-links a { white-space: nowrap; }
.blog-author-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; border-top: 1px solid var(--seam); }
.blog-author-card { display: flex; align-items: start; gap: 1.5rem; padding-block: 2rem; border-bottom: 1px solid var(--seam); }
.blog-author-card img { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; flex-shrink: 0; }
.blog-author-card h2 { margin: 0; font-family: var(--font-display); font-size: 1.4rem; line-height: 1.3; }
.blog-author-card h2 a { color: var(--paper); }
.blog-author-card p { color: var(--dust); margin: .6rem 0; }
.blog-author-count { font-size: .9rem; }
.blog-author-profile { max-width: 52rem; margin-inline: auto; }
.blog-author-header { display: flex; gap: 2rem; align-items: center; margin-bottom: 3rem; }
.blog-author-header > img { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; flex-shrink: 0; }
.blog-author-header h1 { font-size: clamp(2.3rem, 5vw, 3.5rem); margin: 0; }
.blog-author-header p { color: var(--dust); margin: .8rem 0; }
.blog-author-header .member-socials { justify-content: start; }
.blog-author-bio { max-width: none; }
.blog-author-articles { border-top: 1px solid var(--seam); margin-top: 3rem; padding-top: 2rem; }
.blog-author-articles > h2 { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.3; margin: 0 0 1.5rem; }
.blog-author-empty { color: var(--dust); }
@media (max-width: 760px) {
    .blog-author-directory { grid-template-columns: minmax(0, 1fr); }
    .blog-author-header { flex-direction: column; align-items: start; gap: 1.5rem; }
    .blog-author-card { gap: 1rem; }
    .blog-author-card img { width: 80px; height: 80px; }
    .blog-index-links { flex-wrap: wrap; }
}
.blog-page .nav-link[aria-current] { color: var(--signal); }
.image-open { overflow: hidden; }
.blog-breadcrumbs { margin-bottom: 2.5rem; font-size: .9rem; }
.blog-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; padding: 0; margin: 0; gap: .75rem; color: var(--dust); }
.blog-breadcrumbs li + li::before { content: '/'; color: var(--dust); margin-right: .75rem; }
.blog-article-header { max-width: 55rem; padding-bottom: 3rem; }
.blog-article-header .blog-tags { margin-top: 0; margin-bottom: 1.5rem; }
.blog-article-header h1 { font-size: clamp(2.25rem, 5vw, 4rem); max-width: 25ch; }
.blog-deck { font-size: clamp(1.15rem, 2vw, 1.35rem); color: var(--dust); max-width: 58ch; line-height: 1.65; margin-block: 1.5rem 2rem; }
.blog-byline { display: flex; gap: 1rem; align-items: center; }
.blog-byline img { border-radius: 50%; object-fit: cover; width: 48px; height: 48px; }
.blog-author { font-weight: 500; margin: 0 0 .25rem; }
.blog-article-layout { display: grid; grid-template-columns: minmax(0, 46rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); border-top: 1px solid var(--seam); padding-top: 2.5rem; align-items: start; }
.blog-prose { font-size: 1.1rem; line-height: 1.85; overflow-wrap: anywhere; max-width: 70ch; }
.blog-prose > :first-child { margin-top: 0; }
.blog-prose p, .blog-prose ul, .blog-prose ol { margin-block: 0 1.5rem; }
.blog-prose li { padding-left: .25rem; margin-block: .4rem; }
.blog-prose h2, .blog-prose h3, .blog-prose h4 { font-family: var(--font-display); line-height: 1.25; letter-spacing: -.02em; scroll-margin-top: calc(var(--nav-height) + 2rem); }
.blog-prose h2 { font-size: clamp(1.7rem, 3vw, 2.1rem); margin-block: 3rem 1.25rem; }
.blog-prose h3 { font-size: 1.4rem; margin-block: 2.25rem 1rem; }
.blog-prose h4 { font-size: 1.15rem; margin-block: 2rem .75rem; }
.blog-prose a { text-decoration: underline; text-underline-offset: .2em; }
.blog-prose hr { border: 0; border-top: 1px solid var(--seam); margin-block: 3rem; }
.blog-prose code { font-family: var(--font-mono); font-size: .85em; background: var(--panel); border-radius: 3px; padding: .1em .3em; color: var(--paper); }
.blog-prose pre { max-width: 100%; overflow-x: auto; background: var(--vault); border: 1px solid var(--seam); border-radius: 4px; padding: 1.3rem; font-size: .88rem; line-height: 1.7; tab-size: 4; }
.blog-prose pre code { background: none; padding: 0; font-size: inherit; border: 0; overflow-wrap: normal; }
.blog-code, .code-block { position: relative; margin-block: 2rem; }
.blog-code pre { margin-top: 0; border-top-left-radius: 0; }
[data-copy-code] { display: block; margin-left: auto; font-size: .85rem; border-bottom: 0; border-radius: 4px 4px 0 0; }
.blog-prose figure { margin: 2.5rem 0; }
.blog-prose figure img, .blog-prose > p > img { height: auto; border: 1px solid var(--seam); border-radius: 4px; }
.blog-prose figcaption { color: var(--dust); font-size: .9rem; line-height: 1.6; margin-top: .75rem; }
/* Native evidence figures use the site's semantic palette, so a future theme
   only needs to change tokens rather than regenerate images. */
.blog-prose .evidence { border: 1px solid var(--seam); border-radius: 14px; background: var(--vault); padding: clamp(1rem, 3vw, 1.5rem); }
.evidence-heading { margin-bottom: 1.5rem; }
.blog-prose .evidence-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 650; line-height: 1.35; margin-bottom: .5rem; }
.evidence-heading > p:not(.evidence-title) { color: var(--dust); font-size: .9rem; margin: 0; }
.evidence dl { margin: 0; }
.evidence dt { color: var(--dust); font-size: .8rem; margin-bottom: .3rem; }
.evidence dd { margin: 0; min-width: 0; }
.blog-prose .evidence code { color: var(--paper); padding: 0; background: none; border-radius: 0; overflow-wrap: anywhere; font-size: .8rem; }
.evidence-context { margin-bottom: 1.5rem; }
.evidence-context dl > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .5rem; margin-bottom: .5rem; }
.evidence-comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.evidence-item { min-width: 0; padding: 1.2rem; border: 1px solid var(--seam); border-top: 3px solid var(--signal); border-radius: 6px; background: var(--panel); }
.evidence-item:nth-child(even) { border-top-color: var(--flare); }
.blog-prose .evidence-item h3 { font-family: var(--font-body); font-size: 1.1rem; line-height: 1.35; letter-spacing: normal; margin: 0 0 .4rem; }
.blog-prose .evidence-item header p { color: var(--dust); font-size: .85rem; margin-bottom: 1.2rem; }
.evidence-item dl > div + div { margin-top: 1rem; }
.evidence-table-scroll { overflow-x: auto; }
.blog-prose .evidence table { display: table; width: 100%; margin: 0; table-layout: fixed; font-size: .9rem; }
.blog-prose .evidence thead th { color: var(--paper); background: var(--panel); font-weight: 500; }
.blog-prose .evidence th:first-child { width: 44%; }
.blog-prose .evidence tbody th { font-weight: 400; background: none; }
.blog-prose .evidence td { text-align: center; font-family: var(--font-mono); font-size: 1.15rem; font-variant-numeric: tabular-nums; color: var(--paper); }
.blog-prose .evidence thead th:not(:first-child) { text-align: center; }
.blog-prose .evidence tbody tr:nth-child(even) { background: var(--panel); }
.blog-prose .evidence figcaption { margin-top: 1.25rem; }
.blog-prose .evidence-note { color: var(--paper); font-size: .85rem; margin: .6rem 0 0; }
@media (max-width: 640px) {
    .evidence-comparison-grid { grid-template-columns: minmax(0, 1fr); }
    .evidence-context dl > div { display: block; margin-bottom: .8rem; }
    .blog-prose .evidence th, .blog-prose .evidence td { padding: .65rem .4rem; }
    .blog-prose .evidence table { font-size: .8rem; }
}
@media print {
    .evidence { --paper: #000; --dust: #444; --ink: #fff; --vault: #fff; --panel: #f4f4f4; --seam: #aaa; --signal: #111; --flare: #333; }
    .evidence-table-scroll { overflow: visible; }
}
.blog-prose table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.6; margin-block: 2rem; }
.blog-prose th, .blog-prose td { padding: .8rem; border: 1px solid var(--seam); text-align: left; vertical-align: top; }
.blog-prose th { background: var(--panel); font-weight: 600; }
.blog-prose caption { text-align: left; font-weight: 500; margin-bottom: .75rem; }
.blog-table, .table-wrap, .table-scroll { overflow-x: auto; max-width: 100%; }
.table-scroll table { min-width: 32rem; }
.blog-prose blockquote, .blog-prose .callout, .blog-prose .admonition, .blog-prose .markdown-alert { border-left: 3px solid var(--flare); background: var(--vault); padding: 1.25rem 1.5rem; margin: 2rem 0; }
.blog-prose blockquote > :last-child, .blog-prose .callout > :last-child, .blog-prose .admonition > :last-child, .blog-prose .markdown-alert > :last-child { margin-bottom: 0; }
.blog-prose .callout-warning, .blog-prose .admonition-warning, .blog-prose .markdown-alert-warning { border-left-color: var(--paper); }
.blog-prose .callout-note, .blog-prose .admonition-note, .blog-prose .markdown-alert-note { border-left-color: var(--signal); }
.blog-prose .admonition-title, .blog-prose .markdown-alert-title, .blog-prose .callout-title { font-weight: 600; margin-bottom: .5rem; }
.blog-toc { position: sticky; top: calc(var(--nav-height) + 2rem); max-height: calc(100vh - var(--nav-height) - 4rem); overflow-y: auto; border-left: 1px solid var(--seam); padding-left: 1.3rem; font-size: .9rem; }
.blog-toc h2 { font-family: var(--font-body); font-weight: 600; font-size: 1rem; margin: 0 0 1rem; }
.blog-toc ol, .blog-mobile-toc ol { list-style: none; padding: 0; margin: 0; }
.blog-toc li, .blog-mobile-toc li { margin-block: .7rem; line-height: 1.5; }
.blog-toc a { color: var(--dust); display: block; }
.blog-toc a:hover, .blog-toc a[aria-current="location"], .blog-toc a.active { color: var(--signal); }
.blog-toc-level-3 { padding-left: 1rem; font-size: .85rem; }
.blog-toc-return { margin-top: 2rem; }
.blog-mobile-toc { display: none; }
.blog-article-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; border-top: 1px solid var(--seam); margin-top: 3rem; padding-top: 2rem; }
.blog-article-footer p { margin: 0 0 .7rem; }
.blog-share-status { color: var(--dust); font-size: .9rem; margin-top: .7rem !important; min-height: 1.5em; }
.blog-progress { position: fixed; top: var(--nav-height); left: 0; right: 0; height: 3px; z-index: 99; pointer-events: none; }
#reading-progress { width: 100%; transform: scaleX(0); height: 100%; background: var(--signal); transform-origin: left; }
@media (max-width: 960px) {
    .blog-article-layout { grid-template-columns: minmax(0, 1fr); }
    .blog-prose { margin-inline: auto; }
    .blog-toc { display: none; }
    .blog-mobile-toc { display: block; border-block: 1px solid var(--seam); padding-block: 1rem; margin-bottom: 1.5rem; }
    .blog-mobile-toc summary { cursor: pointer; font-weight: 500; min-height: 44px; display: list-item; padding-block: .5rem; }
    .blog-mobile-toc nav { padding: .5rem 1rem; }
    .blog-featured { gap: 1.5rem; grid-template-columns: minmax(0, 1.5fr) minmax(12rem, 1fr); }
    .blog-target-map { padding: 1rem; }
}
@media (max-width: 640px) {
    .blog-index-header h1 { font-size: clamp(1.8rem, 8vw, 3rem); overflow-wrap: anywhere; }
    .blog-main { width: min(100% - 2rem, 68rem); padding-top: calc(var(--nav-height) + 2rem); }
    .blog-index-header { align-items: start; flex-direction: column; gap: 1rem; }
    .blog-browser-top { flex-direction: column; align-items: start; gap: .8rem; }
    #blog-results-count { margin: 0; }
    .blog-featured { grid-template-columns: minmax(0, 1fr); }
    .blog-target-map { border-left: 0; border-top: 1px solid var(--seam); padding: 1.5rem 0 0; }
    .blog-target-map p { display: none; }
    .blog-article-header { padding-bottom: 2rem; }
    .blog-prose { font-size: 1.025rem; line-height: 1.8; }
    .blog-prose pre { padding: 1rem; font-size: .8rem; }
    .blog-prose table { display: block; overflow-x: auto; }
    .blog-meta { gap: .5rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .blog-page { scroll-behavior: auto; }
    html:has(.blog-page) { scroll-behavior: auto; }
    .blog-page *, .blog-page *::before, .blog-page *::after { animation: none !important; transition: none !important; }
}
@media print {
    .blog-atmosphere { display: none; }
    .blog-prose pre, .blog-prose pre code, .blog-prose pre code span { color: #000 !important; background: #fff !important; }
    .blog-page { background: #fff; color: #000; font-size: 11pt; }
    .blog-page #mainNav, .blog-page .skip-link, .blog-page > .footer, .blog-progress, .blog-toc, .blog-mobile-toc, .blog-article-footer, [data-copy-code], .blog-browser-top, .blog-filters, .blog-rss, .blog-target-map { display: none !important; }
    .blog-main { width: 100%; padding: 0; }
    .blog-article-layout { display: block; border: 0; padding: 0; }
    .blog-prose { max-width: none; font-size: 11pt; }
    .blog-page a, .blog-deck, .blog-meta, .blog-card-deck, .blog-tags a { color: #000; }
    .blog-prose pre, .blog-prose code, .blog-prose th, .blog-prose blockquote, .blog-prose .callout, .blog-prose .admonition, .blog-prose .markdown-alert, .blog-featured { color: #000; background: #fff; border-color: #aaa; }
    .blog-prose pre { white-space: pre-wrap; overflow-wrap: anywhere; }
    .blog-prose h2, .blog-prose h3, .blog-prose h4 { break-after: avoid; }
    .blog-prose figure, .blog-prose tr { break-inside: avoid; }
    .blog-article-header h1 { font-size: 28pt; }
    .blog-featured { display: block; }
}
/* Enhanced controls are revealed by blog.js; reading works without JavaScript. */
.blog-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
html.blog-enhanced .blog-page .blog-search[hidden] { display: block !important; }
html.blog-enhanced .blog-page .blog-filters[hidden] { display: flex !important; }
html.blog-enhanced .blog-page [data-copy-code][hidden], html.blog-enhanced .blog-page [data-share][hidden] { display: block !important; }
.figure-zoom { display: block; background: transparent; padding: 0; border: 0; width: 100%; cursor: zoom-in; border-radius: 4px; }
.figure-zoom img { width: 100%; height: auto; }
.image-dialog { width: min(96vw, 90rem); max-height: 94dvh; overflow: auto; background: var(--ink); color: var(--paper); border: 1px solid var(--seam); border-radius: 6px; padding: 3.5rem 1rem 1rem; }
.image-dialog::backdrop { background: rgb(13 11 28 / 90%); }
.image-dialog img { max-width: 100%; max-height: 78dvh; object-fit: contain; width: auto; height: auto; margin-inline: auto; }
.image-dialog figcaption, .image-dialog p { color: var(--dust); font-size: .95rem; max-width: 70ch; margin: 1rem auto 0; }
.image-dialog-close { position: absolute; top: .5rem; right: .75rem; min-height: 44px; padding: .5rem 1rem; border: 1px solid var(--seam); border-radius: 4px; color: var(--paper); background: var(--panel); font: inherit; cursor: pointer; }
.image-dialog-close:hover { border-color: var(--signal); }
@media print {
    html.blog-enhanced .blog-page [data-copy-code][hidden], html.blog-enhanced .blog-page [data-share][hidden], .image-dialog { display: none !important; }
}
.blog-prose .code-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding-left: 1rem; background: var(--panel); border: 1px solid var(--seam); border-bottom: 0; border-radius: 4px 4px 0 0; color: var(--dust); font-size: .85rem; }
.blog-prose .code-toolbar [data-copy-code] { border-top: 0; border-right: 0; border-radius: 0 4px 0 0; }
.blog-prose .code-block > pre { margin-top: 0; }
.blog-prose .heading-anchor { color: var(--dust); font-size: .7em; font-family: var(--font-body); font-weight: 400; }
.blog-prose .heading-anchor:hover { color: var(--signal); }
.blog-prose details { border: 1px solid var(--seam); border-radius: 4px; padding: 1rem 1.25rem; margin-block: 2rem; }
.blog-prose details summary { cursor: pointer; font-weight: 500; min-height: 44px; }
.blog-prose details[open] summary { margin-bottom: 1rem; }
@media print {
    .blog-prose .code-toolbar, .blog-prose .heading-anchor { display: none; }
    .blog-prose .table-scroll { overflow: visible; }
}