/* Magazine article presentation. Typography and hero glass come from the
   shared 2027 styles; article tokens also support local reader preferences. */
body.article-design {
    --code-header-height-expanded: 76px;
    --code-header-height-compact: 56px;
    --code-logo-width-expanded: 150px;
    --code-menu-offset-expanded: 22px;
    --code-page-offset-desktop: 76px 0 0;
    --code-page-offset-mobile: 60px 0 0;
    --hero-header-color: #102747;
}
body.article-design #main { border: 0; padding: 0; background: transparent; }
body.article-design #header { background-color: #102747; }
body.article-design #header #menu > ul > li > a { color: #fff !important; }
body.article-design #header #logo > a > .headerImageNormal { display: none !important; }
body.article-design #header #logo > a > .headerImageWhite { display: block !important; }
body.article-design #header #mobileMenuIcon { color: #fff; }
body.article-design #partial-login-panel:not(.open) { display: none; }
body.article-design #partial-login-panel { width: min(380px, 100vw); box-sizing: border-box; overflow-y: auto; }
body.article-design #partial-login-panel :is(input:not([type="checkbox"]), .edit-form, fieldset) { min-width: 0; max-width: 100%; box-sizing: border-box; }
body.article-design.hero-header #header::before {
    background-color: #102747;
    background-color: rgb(16 39 71 / max(.58, var(--hero-header-opacity, 1)));
    backdrop-filter: blur(16px);
}
.article-header-search { position: absolute; top: 14px; right: 242px; width: 44px; height: 44px; display: grid; place-items: center; color: #fff !important; }
.article-header-search summary { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; list-style: none; }
.article-header-search summary::-webkit-details-marker { display: none; }
.article-header-search form { position: absolute; top: 48px; right: 0; width: min(320px, calc(100vw - 60px)); padding: 20px; background: #102747; border: 1px solid #627286; border-radius: 6px; display: grid; gap: 12px; font: 500 .875rem/1.5 var(--code-font-ui); }
.article-header-search input, .article-header-search button { font: inherit; min-height: 44px; padding: 8px; width: 100%; box-sizing: border-box; }
.article-header-search button { cursor: pointer; }
.article-header-search :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
body.article-design #header.headerSmall .article-header-search { top: 6px; right: 187px; }
body.article-design #header.headerLarge #menu { margin-right: 290px; }
body.article-design #header.headerSmall #menu { margin-right: 235px; }

.article-reader {
    --article-navy: #102747;
    --article-text: #253445;
    --article-muted: #53657a;
    --article-link: #2168a4;
    --article-surface: #fff;
    --article-muted-surface: #f5f7f9;
    --article-border: #dfe5ec;
    --article-accent-primary: #2b62a0;
    --article-accent-tint: color-mix(in srgb, var(--article-accent-primary) 5%, var(--article-surface));
    --article-scale: 1;
    --article-line-height: 1.68;
    --article-page-width: 1360px;
    --article-body-font: var(--code-font-editorial);
    --article-align: start;
    --article-gutter: clamp(20px, 4vw, 64px);
    color: var(--article-text);
    background: var(--article-surface);
    font-family: var(--code-font-ui);
    overflow-wrap: anywhere;
}
.article-reader[data-reading-theme="dark"] {
    color-scheme: dark;
    --article-navy: #e7ecf2;
    --article-text: #e7ecf2;
    --article-muted: #b1becc;
    --article-link: #8bc4f4;
    --article-surface: #101b29;
    --article-muted-surface: #192638;
    --article-border: #46576b;
}
.article-reader[data-reading-theme="sepia"] {
    color-scheme: light;
    --article-navy: #3e352d;
    --article-text: #3e352d;
    --article-muted: #6c6258;
    --article-link: #215e8e;
    --article-surface: #f7f0e3;
    --article-muted-surface: #eee5d5;
    --article-border: #cfc2af;
}
.article-reader, .article-reader * { box-sizing: border-box; }
.article-reader [hidden] { display: none !important; }
.article-reader :is(h1,h2,h3,h4,h5,h6) { color: var(--article-navy); font-weight: 650; padding: 0; }
.article-reader :is(a,a:visited,a:link) { color: var(--article-link); text-decoration: underline; text-underline-offset: .16em; }
.article-reader :focus-visible, .article-header-search:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.article-reader .article-body:focus { outline: none; }
.article-settings-form select:focus { outline: none; box-shadow: none; }
.article-settings-form select:focus-visible { background: var(--article-accent-tint, var(--article-muted-surface)); font-weight: 600; }
.article-reader :is(h1,h2,h3,h4,h5,h6,[id]) { scroll-margin-top: 90px; }
.article-skip { position: fixed; top: 8px; left: 8px; z-index: 201; transform: translateY(-200%); padding: 12px; background: var(--article-surface); }
.article-skip:focus { transform: none; }
.article-hero { display: block; width: 100%; }
.article-hero img { display: block; width: 100%; height: auto; }
.article-shell { max-width: var(--article-page-width); margin: auto; padding: 40px var(--article-gutter) 64px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 48px; align-items: start; }
.article-shell > * { min-width: 0; }
.article-opening { grid-column: 1; grid-row: 1; margin-bottom: 28px; }
.article-kicker { font: 600 .8125rem/1.5 var(--code-font-ui); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 10px; color: var(--article-muted); }
.article-kicker::before { content: ""; display: inline-block; width: 28px; height: 3px; background: var(--article-accent-primary); vertical-align: middle; margin-right: 10px; }
.article-reader .article-kicker :is(a,a:visited,a:link) { color: inherit; text-decoration: none; }
.article-reader .article-kicker a:is(:hover,:focus-visible) { text-decoration: underline; }
.article-reader .article-title { margin: 0 0 14px; font: 650 clamp(2.8rem, 4vw, 4.25rem)/1.08 var(--code-font-editorial); letter-spacing: -.025em; text-wrap: balance; }
.article-reader .article-deck { font: 400 1.25rem/1.5 var(--code-font-editorial); margin: 0 0 20px; color: var(--article-muted); }
.article-byline { display: flex; gap: 14px; align-items: center; font: 400 .875rem/1.6 var(--code-font-ui); }
.article-byline p { margin: 0; line-height: inherit; }
.article-byline-portrait { display: none; object-fit: contain; border-radius: 4px; }
.article-reader :is(.article-dates,.article-updated) { color: var(--article-muted); font-size: .8125rem; line-height: 1.5; margin: 4px 0; }
.article-notice { padding: 12px; background: var(--article-muted-surface); }
.article-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-top: 18px; font-size: .8125rem; }
.article-reader .article-share-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; }
.article-share-button svg, .article-code-tools svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.article-reader :is(button,select,summary) { font: 500 .875rem/1.5 var(--code-font-ui); }
.article-reader :is(button,select) { color: var(--article-text); background: var(--article-surface); border: 1px solid var(--article-border); border-radius: 4px; padding: 10px 12px; min-height: 44px; max-width: 100%; }
.article-reader select { min-width: 0; width: 100%; }
.article-reader button, .article-reader summary { cursor: pointer; }
.article-reader summary { min-height: 44px; padding: 10px 0; color: var(--article-navy); }
.article-settings summary span { font: 600 1.15rem var(--code-font-editorial); margin-right: 8px; }
.article-settings { flex: 1 1 210px; }
.article-settings-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; padding: 20px; border: 1px solid var(--article-border); background: var(--article-muted-surface); border-radius: 6px; }
.article-settings-form label { display: grid; gap: 5px; min-width: 0; }
.article-reader label { color: var(--article-text); font-weight: 500; }
.article-settings-form small { grid-column: 1/-1; color: var(--article-muted); line-height: 1.5; }
.article-status { flex-basis: 100%; }
.article-status:empty { display: none; }
.article-body { grid-column: 1; grid-row: 2; width: 100%; max-width: 100%; font: 400 calc(1.125rem * var(--article-scale))/var(--article-line-height) var(--article-body-font); text-align: var(--article-align); }
.article-body :is(p,li) { font: inherit; line-height: inherit; text-align: inherit; }
.article-body p { margin: 0 0 1.2em; }
.article-body > p:first-child::first-letter { float: left; font: 650 4.7em/.82 var(--code-font-editorial); padding: .08em .12em 0 0; color: var(--article-navy); }
.article-body :is(h1,h2) { font: 650 2rem/1.2 var(--code-font-editorial); margin: 2.2em 0 .65em; break-after: avoid; text-align: start; }
.article-body :is(h1,h2)::before { content: ""; display: block; width: 42px; height: 2px; background: var(--article-accent-primary); margin-bottom: 16px; }
.article-body h3 { font: 650 1.45rem/1.3 var(--code-font-editorial); margin: 1.6em 0 .5em; break-after: avoid; }
.article-body :is(ul,ol) { padding-left: 1.5em; margin: 0 0 1.2em; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin: .4em 0; }
.article-body :is(figure,.article-tables,.article-listings) { margin: 30px 0; max-width: 100%; }
.article-body img { max-width: 100%; height: auto; max-height: none; }
.article-body figure img { display: block; }
.article-reader :is(figcaption,.article-table-caption) { font: 400 .875rem/1.5 var(--code-font-ui); margin-top: 10px; color: var(--article-muted); break-before: avoid; }
.article-body :is(blockquote,.article-pullquote) { padding: 14px 24px; margin: 28px 0; border-left: 3px solid var(--article-accent-primary); background: var(--article-accent-tint, var(--article-muted-surface)); color: var(--article-navy); font: 400 1.35em/1.45 var(--code-font-editorial); }
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body :is(pre,code,kbd,samp) { font-family: var(--code-font-code); overflow-wrap: normal; text-align: start; }
.article-body pre { font-size: .875rem; line-height: 1.5; padding: 18px; margin: 20px 0 28px; overflow: auto; max-width: 100%; max-height: 400px; background: var(--article-muted-surface); color: var(--article-code-text, var(--article-text)); border: 1px solid var(--article-border); border-radius: 5px; white-space: pre; }
.article-body pre code { display: block; padding: 0; background: transparent; font-size: inherit; white-space: pre; }
.article-body :not(pre) > code { font-size: .85em; padding: .12em .2em; background: var(--article-muted-surface); white-space: break-spaces; overflow-wrap: anywhere; }
.article-code-block { min-width: 0; margin: 24px 0 28px; border: 1px solid var(--article-border); border-radius: 6px; background: var(--article-muted-surface); }
.article-code-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; padding: 6px 12px; border-bottom: 1px solid var(--article-border); }
.article-code-snippet .article-code-header { border-bottom: 0; padding: 4px 8px 0; }
.article-body .article-code-snippet pre { padding-top: 6px; }
.article-reader .article-code-caption { font: 600 .9375rem/1.45 var(--code-font-ui); color: var(--article-navy); letter-spacing: normal; margin: 20px 0 8px; padding: 0; text-align: start; }
.article-reader .article-code-caption::before { display: none; }
.article-reader .article-code-header .article-code-caption { flex: 1 1 180px; margin: 0; font-family: var(--code-font-ui); }
.article-body .article-code-block pre { margin: 0; border: 0; border-radius: 0 0 6px 6px; }
.article-code-block.is-expanded pre { max-height: none; }
.article-code-tools { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 4px; margin-left: auto; font-family: var(--code-font-ui); }
.article-reader .article-code-tools button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 3px; padding: 10px; }
.article-reader .article-code-tools button:hover { background: var(--article-border); }
.article-table-scroll { overflow: auto; margin: 24px 0; max-width: 100%; }
.article-body table { border-collapse: collapse; width: 100%; min-width: 420px; font: 400 .9em/1.5 var(--code-font-ui); margin: 0; }
.article-body :is(td,th) { padding: 12px 16px; border-bottom: 1px solid var(--article-border); text-align: start; }
.article-body th { background: var(--article-muted-surface); color: var(--article-navy); font-weight: 600; }
.article-body caption { text-align: start; padding: 10px 0; }
.article-body aside { margin: 24px 0; padding: 20px; background: var(--article-muted-surface); }
.article-body .article-sidebars { float: none; width: auto; margin: 24px 0; }
.article-rail { grid-column: 2; grid-row: 1 / span 2; font: 400 .875rem/1.55 var(--code-font-ui); }
.article-author-panel, .article-toc { background: var(--article-accent-tint, var(--article-muted-surface)); border-radius: 8px; padding: 20px; margin-bottom: 20px; }
.article-rail h2 { font: 650 1.25rem/1.3 var(--code-font-editorial); margin: 0 0 16px; }
.article-author-panel > h2 { border-left: 2px solid var(--article-accent-primary); padding-left: 10px; }
.article-author-portrait { display: block; width: 100%; max-height: 400px; object-fit: contain; border-radius: 4px; margin-bottom: 14px; }
.article-rail h3 { font: 650 1.6rem/1.2 var(--code-font-editorial); margin: 12px 0; }
.article-reader .article-rail h3 a { color: var(--article-navy); text-decoration: none; }
.article-author-bio { margin-bottom: 16px; }
.article-author-bio p { font: inherit; line-height: inherit; margin: 0 0 .8em; }
.article-author-bio:not(.expanded) { display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }
.article-author-more { display: inline-block; padding-block: 8px; }
.article-toc summary { font: 650 1.25rem/1.3 var(--code-font-editorial); }
.article-toc ol { margin: 10px 0 0 8px; padding: 0 0 0 18px; border-left: 1px solid var(--article-border); list-style: none; }
.article-toc li { position: relative; margin: 0; }
.article-toc li::before { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--article-border); top: 16px; left: -22px; }
.article-toc li:has(a[aria-current="location"])::before { background: var(--article-link); }
.article-toc a { display: block; padding-block: 6px; text-decoration: none; color: var(--article-muted); }
.article-toc a[aria-current="location"] { color: var(--article-link); text-decoration: underline; }
.article-ending { grid-column: 1; grid-row: 3; border-top: 1px solid var(--article-border); margin-top: 32px; padding: 24px 0 0; background: transparent; color: var(--article-text); font: 400 .9375rem/1.6 var(--code-font-ui); }
.article-ending h2 { font: 650 1.6rem/1.3 var(--code-font-editorial); margin: 0 0 14px; }
.article-ending section { margin-bottom: 28px; }
.article-ending p { line-height: inherit; }
.article-ending a:hover, .article-ending a:active { border: 0; text-decoration: underline; }
.article-ending ul { list-style: disc; padding-left: 20px; }
.article-ending li a { display: inline-block; padding-block: 8px; }
.article-issue { display: flex; gap: 24px; align-items: center; }
.article-issue img { width: 100px; height: auto; }
.article-topics { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.article-topics a { padding: 10px 14px; border: 1px solid var(--article-border); border-radius: 4px; }
.article-image-zoom { display: block; margin: 8px 0; }
.article-image-dialog { position: fixed; max-width: 96vw; max-height: 94dvh; padding: 20px; color: var(--article-text); background: var(--article-surface); border: 1px solid var(--article-border); border-radius: 6px; overflow: auto; }
.article-image-dialog::backdrop { background: rgb(0 0 0 / .8); }
.article-image-dialog form { position: sticky; top: 0; text-align: end; }
.article-image-dialog img { display: block; max-width: 100%; height: auto; margin-block: 16px; }
.article-image-dialog p { font: 400 .875rem/1.5 var(--code-font-ui); }
/* Keep the familiar light/dark syntax palette, scoped to article code so
   changing the reading theme does not affect other pages or controls. */
.article-reader {
    --article-code-text: #1f2937;
    --article-code-comment: #007000;
    --article-code-keyword: #0000bb;
    --article-code-string: #a31515;
    --article-code-type: #186481;
    --article-code-number: #8c4a00;
    --article-code-meta: #715b20;
}
.article-reader[data-reading-theme="dark"] {
    --article-code-text: #dcdcdc;
    --article-code-comment: #8dc47c;
    --article-code-keyword: #86b9ed;
    --article-code-string: #e4ad95;
    --article-code-type: #75d4bd;
    --article-code-number: #b8d7a3;
    --article-code-meta: #d7ba7d;
}
.article-reader :is(.hljs-comment,.hljs-quote,.hljs-doctag) { color: var(--article-code-comment); }
.article-reader :is(.hljs-keyword,.hljs-selector-tag,.hljs-built_in,.hljs-name,.hljs-tag,.hljs-literal) { color: var(--article-code-keyword); }
.article-reader :is(.hljs-string,.hljs-regexp,.hljs-template-tag,.hljs-template-variable,.hljs-addition) { color: var(--article-code-string); }
.article-reader :is(.hljs-type,.hljs-class .hljs-title,.hljs-attribute,.hljs-attr,.hljs-builtin-name) { color: var(--article-code-type); }
.article-reader :is(.hljs-number,.hljs-symbol,.hljs-bullet) { color: var(--article-code-number); }
.article-reader :is(.hljs-meta,.hljs-meta-keyword,.hljs-title,.hljs-section,.hljs-variable,.hljs-selector-attr,.hljs-selector-pseudo) { color: var(--article-code-meta); }
.article-reader .hljs-deletion { color: var(--article-code-string); text-decoration: line-through; }
.article-reader .hljs-emphasis { font-style: italic; }
.article-reader .hljs-strong { font-weight: 700; }
@media (max-width: 1199px) {
    .article-width-setting { display: none !important; }
    .article-shell { grid-template-columns: minmax(0,1fr); max-width: 900px; padding-top: 32px; }
    .article-opening, .article-body, .article-rail, .article-ending { grid-column: 1; grid-row: auto; }
    .article-body { justify-self: center; }
    .article-rail { margin-top: 32px; }
    .article-byline-portrait { display: block; }
    .article-author-portrait { width: 160px; max-width: 40%; float: left; margin: 0 20px 12px 0; }
    .article-author-panel { display: flow-root; }
    .article-author-more { clear: both; }
}
@media (max-width: 899px) {
    body.article-design #header { height: 60px; }
    /* Avoid transforms on the logo: its account panel uses fixed positioning. */
    body.article-design #header #logo { position: absolute; left: calc(50% - 60px); width: 120px; margin: 8px 0 0; }
    body.article-design #header #logo > a > img { width: 120px; margin-top: 0; }
    body.article-design #header #login-partial { position: fixed; right: 4px; top: 8px; width: 44px; }
    body.article-design #header #login-partial > div:first-child { display: grid; place-items: center; width: 44px; height: 44px; }
    body.article-design #header #login-partial > div:first-child .img-avatar { width: 28px !important; height: 28px; }
    body.article-design #header .article-header-search,
    body.article-design #header.headerSmall .article-header-search { top: 8px; right: 48px; }
    body.article-design #header #mobileMenuIcon { height: 60px; width: 48px; }
    body.article-design #header #mobileMenuIcon i { margin-top: 22px; }
}
@media (max-width: 599px) {
    .article-reader { --article-gutter: 18px; }
    .article-shell { padding: 24px var(--article-gutter) 40px; }
    .article-reader .article-title { font-size: clamp(2.1rem, 7vw, 2.8rem); line-height: 1.12; }
    .article-reader .article-deck { font-size: 1.1rem; }
    .article-body { font-size: calc(1.0625rem * var(--article-scale)); max-width: 100%; line-height: var(--article-line-height, 1.65); }
    .article-body :is(h1,h2) { font-size: 1.65rem; }
    .article-body h3 { font-size: 1.35rem; }
    .article-body pre { font-size: .8125rem; padding: 12px; }
    .article-width-setting { display: none !important; }
    .article-reader figcaption { font-size: .8125rem; }
    .article-author-panel, .article-toc { padding: 16px; }
    .article-rail h3 { font-size: 1.35rem; }
    .article-settings-form { padding: 12px; gap: 12px; }
    .article-actions { display: block; }
    .article-actions > button { margin-top: 10px; }
    .article-issue { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    body.article-design *, body.article-design #page { transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
    .article-reader :is(button,select,.article-author-panel,.article-toc) { border: 1px solid CanvasText; }
    body.article-design #header { background: Canvas !important; }
    body.article-design #header::before { background: Canvas !important; }
}
@media print {
    body.article-design #page { margin: 0 !important; }
    body.article-design :is(#header,#mobileMenu,.article-actions,.article-skip,.article-code-tools,.article-image-zoom,.article-toc,body > #cookieConsent) { display: none !important; }
    .article-reader { --article-text: #000 !important; --article-navy: #000 !important; --article-surface: #fff !important; --article-muted: #333 !important; }
    .article-shell { display: block; padding: 0; max-width: none; }
    .article-body { max-width: none; font-size: 11pt; }
    .article-body pre { white-space: pre-wrap; overflow: visible; max-height: none !important; }
    .article-body pre code { white-space: pre-wrap; }
    .article-author-bio { display: block !important; }
    .article-hero img { height: auto; }
    .article-table-scroll { overflow: visible; }
}