/* E2 article detail. Final B19 composition on the existing PHP article route.
   All selectors are scoped to this template; rendered body/services stay original. */
html .p23-e2-article .p23-article { min-width: 0; }
html .p23-e2-article .p23-article-header {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 22px 32px;
    align-items: start;
    margin: 0 0 30px;
}
html .p23-e2-article .p23-article-cover {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 100%;
    aspect-ratio: 1;
    margin: 0;
    border: 0;
    border-radius: 6px;
    background: var(--p23-bg);
    overflow: hidden;
}
html .p23-e2-article .p23-article-cover picture { display: block; width: 100%; height: 100%; }
html .p23-e2-article .p23-article-cover img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; }
html .p23-e2-article .p23-e2-article-heading { grid-column: 1; grid-row: 1; min-width: 0; margin-top: 6px; }
html .p23-e2-article .p23-article-header h1 { font-size: 46px; line-height: 1.18; margin: 0; text-transform: uppercase; letter-spacing: -.035em; font-weight: 700; }
html .p23-e2-article .p23-e2-article-part { display: inline-flex; align-items: center; max-width: 100%; min-height: 44px; padding: 8px 12px; margin: 0 0 12px; border: 1px solid var(--p23-line); border-radius: 6px; background: var(--p23-panel); font-size: 13px; line-height: 1.5; text-transform: none; letter-spacing: normal; color: var(--p23-text); text-decoration: none; overflow-wrap: anywhere; }
html .p23-e2-article .p23-e2-article-intro { grid-column: 1; grid-row: 2; min-width: 0; }
html .p23-e2-article .p23-e2-article-tags { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 16px; }
html .p23-e2-article .p23-e2-article-type { display: inline-flex; align-items: center; min-height: 44px; padding: 5px 9px; border: 1px solid var(--p23-border); border-radius: 3px; color: var(--p23-text); font-size: 12px; text-decoration: none; }
html .p23-e2-article .p23-e2-article-section { display: inline-flex; align-items: center; min-height: 44px; padding: 7px 10px; border-radius: 3px; background: #624735; color: #fff; font-size: 13px; line-height: 1.4; text-decoration: none; }
html .p23-e2-article .p23-e2-article-section--ochre { background: #74531f; }
html .p23-e2-article .p23-e2-article-section--slate { background: #3c5355; }
html .p23-e2-article .p23-e2-article-section--olive { background: #41533a; }
html .p23-e2-article .p23-e2-article-section:hover { color: #fff; filter: brightness(1.12); }
html .p23-e2-article .p23-e2-article-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--p23-muted); font-size: 12px; line-height: 1.7; }
html .p23-e2-article .p23-e2-series-overview { display: inline-flex; align-items: center; max-width: 100%; min-height: 44px; margin-top: 12px; padding: 8px 12px; border: 1px solid var(--p23-line); border-radius: 6px; background: var(--p23-panel); color: var(--p23-text); font-size: 14px; line-height: 1.5; text-decoration: none; }
html .p23-e2-article .p23-e2-article-metadata { margin-top: 12px; font-size: 14px; }
html .p23-e2-article summary { cursor: pointer; line-height: 1.5; }
html .p23-e2-article .p23-e2-article-metadata summary { min-height: 44px; padding: 10px 0; color: var(--p23-muted); }
html .p23-e2-article .p23-e2-metadata-groups { display: grid; gap: 16px; margin: 12px 0 20px; }
html .p23-e2-article .p23-e2-metadata-groups>div { display: grid; gap: 8px; }
html .p23-e2-article .p23-e2-metadata-groups strong { font-size: 13px; }
html .p23-e2-article .p23-e2-metadata-groups>div>div { display: flex; flex-wrap: wrap; gap: 8px; }
html .p23-e2-article .p23-e2-metadata-groups a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; max-width: 100%; border: 1px solid var(--p23-line); border-radius: 12px; background: var(--p23-panel); line-height: 1.5; color: var(--p23-text); text-decoration: none; overflow-wrap: anywhere; }
html .p23-e2-article :is(.p23-e2-article-part,.p23-e2-series-overview,.p23-e2-metadata-groups a):is(:hover,:focus-visible) { border-color: var(--p23-accent); text-decoration: underline; text-underline-offset: 3px; }
html .p23-e2-article .p23-tldr-switch { display: block; background: var(--p23-panel); padding: 18px; margin: 20px 0 0; border: 1px solid var(--p23-line); border-left: 3px solid #ff0000; border-radius: 6px; }
html .p23-e2-article .p23-tldr-switch__copy { display: block; }
html .p23-e2-article .p23-tldr-switch__copy strong { display: block; font-size: 16px; line-height: 1.5; font-weight: 700; }
html .p23-e2-article .p23-tldr-switch__copy span { display: block; font-size: 14px; line-height: 1.7; color: var(--p23-muted); margin-top: 8px; max-width: 56ch; }
html .p23-e2-article .p23-tldr-switch__button { margin-top: 16px; width: auto; }
html .p23-e2-article .p23-e2-read-link { margin-top: 12px; }
html .p23-e2-article .p23-article-header--no-cover { display: block; max-width: 740px; }
html .p23-e2-article .p23-article-header--no-cover .p23-e2-article-intro { margin-top: 24px; }
/* Keep the original TOC and heading anchors; position only the rendered TOC. */
html .p23-e2-article .p23-e2-reading { display: grid; grid-template-columns: 230px minmax(0,740px); gap: 50px; align-items: start; }
html .p23-e2-article .p23-e2-reading-rail { min-width: 0; position: sticky; top: calc(var(--p23-header-height, 99px) + 24px); margin-top: 14px; }
html .p23-e2-article .p23-e2-reading-toc { border: 1px solid var(--p23-line); border-radius: 5px; padding: 18px; }
html .p23-e2-article .p23-e2-reading-toc>summary { font-size: 14px; font-weight: 700; }
html .p23-e2-article .p23-toc { padding: 0; border: 0; border-radius: 0; margin: 16px 0 0; background: none; }
html .p23-e2-article .p23-toc__title { display: none; }
html .p23-e2-article .p23-toc__list { gap: 8px; }
html .p23-e2-article .p23-toc a { display: block; font-size: 13px; line-height: 1.65; color: var(--p23-muted); text-decoration: underline; text-underline-offset: 4px; }
html .p23-e2-article .p23-toc a:hover { color: var(--p23-text); }
html .p23-e2-article .p23-e2-reading--no-toc { display: block; max-width: 740px; margin-inline: auto; }
html .p23-e2-article .p23-article-content { min-width: 0; margin: 10px 0 0; color: var(--p23-ink-soft); font-weight: 400; }
html .p23-e2-article .p23-article-content:focus { outline: none; }
html .p23-e2-article :is(.p23-article-content,.p23-article-tldr__content) p:not(.p23-card p) { font-size: 17px; line-height: 1.85; margin: 0 0 22px; }
html .p23-e2-article .p23-article-content>p:first-child { font-size: 19px; }
html .p23-e2-article .p23-article-content :is(h2,h3,h4):not(.p23-card *) { color: var(--p23-text); padding: 0; margin: 38px 0 18px; line-height: 1.25; }
html .p23-e2-article .p23-article-content h2 { font-size: 29px; font-weight: 700; text-transform: uppercase; letter-spacing: -.035em; }
html .p23-e2-article .p23-article-content h3:not(.p23-card h3) { font-size: 22px; }
html .p23-e2-article .p23-article-content li { font-size: 17px; line-height: 1.85; margin-bottom: 8px; }
html .p23-e2-article :is(.p23-article-content,.p23-article-tldr__content) a:not(.p23-button):not(.p23-card a):not(.p23-article-card a) { color: #ff0000; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
html[data-p23-theme="light"] .p23-e2-article :is(.p23-article-content,.p23-article-tldr__content) a:not(.p23-button):not(.p23-card a):not(.p23-article-card a) { color: #b00000; }
html .p23-e2-article :is(.p23-article-content,.p23-article-tldr__content) a:not(.p23-button):not(.p23-card a):not(.p23-article-card a):hover { color: var(--p23-text); text-decoration-thickness: 3px; }
html .p23-e2-article .p23-article-tldr { max-width: 740px; margin: 24px auto 32px; padding: 28px; background: var(--p23-panel); border: 1px solid #ff0000; }
/* FAQ shortcodes retain their visible question and answer, presented as messages. */
html .p23-e2-article .p23-faq-inline--bubbles { border: 0; border-radius: 0; padding: 0; margin: 32px 0 40px; max-width: 100%; background: none; display: grid; gap: 16px; }
html .p23-e2-article .p23-faq-inline--bubbles :is(.p23-faq-q,.p23-faq-a) { margin: 0; display: flex; text-align: left; }
html .p23-e2-article .p23-faq-inline--bubbles .p23-faq-a { justify-content: end; }
html .p23-e2-article .p23-faq-bubble { display: block; position: relative; max-width: 90%; padding: 16px 20px; border-radius: 18px; font-size: 16px; line-height: 1.7; box-shadow: none; overflow-wrap: anywhere; }
html .p23-e2-article .p23-faq-bubble--q { background: var(--p23-bg-alt); color: var(--p23-text); border-bottom-left-radius: 4px; font-weight: 600; }
html .p23-e2-article .p23-faq-bubble--a { background: #790000; color: #fff; border-bottom-right-radius: 4px; font-weight: 400; }
html[data-p23-theme="light"] .p23-e2-article .p23-faq-bubble--a { background: #a00000; }
html .p23-e2-article .p23-faq-bubble::after { content: ""; position: absolute; bottom: 0; width: 12px; height: 12px; background: inherit; }
html .p23-e2-article .p23-faq-bubble--q::after { left: -6px; clip-path: polygon(100% 0,100% 100%,0 100%); }
html .p23-e2-article .p23-faq-bubble--a::after { right: -6px; clip-path: polygon(0 0,100% 100%,0 100%); }
html .p23-e2-article .p23-article-content .p23-faq-bubble--a a { color: #fff; text-decoration-color: currentColor; }
/* Existing support/amount API/share/media keep their original hooks. */
html .p23-e2-article :is(.p23-support,.p23-series-nav,.p23-shop-box,.p23-audience-cta) { max-width: 740px; margin-left: auto; }
html .p23-e2-article .p23-support { margin-top: 40px; margin-bottom: 40px; padding: 0; }
html .p23-e2-article .p23-support__inner { display: block; padding: 28px; background: var(--p23-panel); border: 0; border-block: 1px solid var(--p23-border); border-radius: 6px; box-shadow: 0 10px 28px #ff000014; }
html .p23-e2-article .p23-support__lead { font-size: 18px; font-weight: 700; color: var(--p23-text); margin: 0 0 14px; }
html .p23-e2-article .p23-support__note { font-size: 15px; line-height: 1.75; color: var(--p23-ink-soft); }
html .p23-e2-article .p23-support__actions { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 22px; align-items: center; }
html .p23-e2-article .p23-support__amounts { display: flex; flex-wrap: wrap; gap: 12px; width: auto; }
html .p23-e2-article .p23-support__amounts .p23-button { width: auto; min-width: 72px; min-height: 44px; }
html .p23-e2-article .p23-support-inline { margin: 40px 0; padding: 22px 0; border: 0; border-block: 1px solid var(--p23-line); background: none; border-radius: 0; box-shadow: none; }
html .p23-e2-article .p23-series-nav { margin-top: 32px; padding: 0; }
html .p23-e2-article .p23-series-nav__grid { gap: 16px; }
html .p23-e2-article .p23-series-nav__card { height: 100%; padding: 18px; background: none; border: 1px solid var(--p23-line); box-shadow: none; }
html .p23-e2-article .p23-series-nav__label { font-size: 12px; line-height: 1.6; color: var(--p23-muted); }
html .p23-e2-article .p23-series-nav__title { margin-top: 8px; font-size: 16px; line-height: 1.5; text-decoration: underline; text-underline-offset: 4px; }
html .p23-e2-article .p23-shop-box__inner { background: var(--p23-panel); border: 1px solid var(--p23-line); padding: 24px; box-shadow: none; }
html .p23-e2-article .p23-shop-box h2 { font-size: 25px; }
html .p23-e2-article .p23-series { margin-top: 40px; }
html .p23-e2-article .p23-series-list { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
html .p23-e2-article .p23-series .p23-article-card--small { display: grid; grid-template-columns: 100px minmax(0,1fr); align-items: start; gap: 18px; margin: 0; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--p23-line); border-radius: 0; background: none; }
html .p23-e2-article .p23-series .p23-article-card__media { width: 100%; }
html .p23-e2-article .p23-series .p23-article-card__media img { width: 100%; height: auto; object-fit: contain; }
html .p23-e2-article .p23-series .p23-article-card__body { padding: 0; min-width: 0; gap: 10px; }
html .p23-e2-article .p23-series .p23-article-card__title { font-size: 21px; line-height: 1.3; text-transform: none; }
html .p23-e2-article .p23-series .p23-article-card__pill { display: inline-block; min-height: 0; padding: 0; border: 0; background: none; font-size: 11px; color: var(--p23-muted); }
html .p23-e2-article .p23-series .p23-article-card__desc { font-size: 13px; line-height: 1.7; }
html .p23-e2-article .p23-series-heading { margin: 12px 0 22px; }
html .p23-e2-article .p23-series-heading-link { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--p23-line); border-radius: 6px; background: var(--p23-panel); color: var(--p23-text); font-size: 14px; line-height: 1.5; text-decoration: none; }
html .p23-e2-article .p23-series-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
html .p23-e2-article .p23-series .p23-series-card-meta .p23-article-card__pill { align-self: auto; font-size: 12px; line-height: 1.4; }
html .p23-e2-article .p23-series .p23-series-card-meta a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 8px; border: 1px solid var(--p23-line); border-radius: 6px; background: var(--p23-panel); color: var(--p23-text); }
html .p23-e2-article .p23-series-card-position { font-weight: 600; }
html .p23-e2-article :is(.p23-series-heading-link,.p23-series-card-meta a):is(:hover,:focus-visible) { border-color: var(--p23-accent); text-decoration: underline; text-underline-offset: 3px; }
html .p23-e2-article .p23-series .p23-series-card:not(:has(.p23-series-card-media)) { grid-template-columns: 1fr; }
@media (max-width:1100px) {
    html .p23-e2-article .p23-article-header h1 { font-size: 34px; }
    html .p23-e2-article .p23-e2-reading { grid-template-columns: 190px minmax(0,1fr); gap: 30px; }
    html .p23-e2-article :is(.p23-support,.p23-series-nav,.p23-shop-box,.p23-audience-cta) { max-width: calc(100% - 220px); }
}
@media (max-width:860px) {
    html .p23-e2-article .p23-article-header { display: flex; flex-direction: column; gap: 0; margin-bottom: 28px; }
    html .p23-e2-article .p23-e2-article-heading { order: 0; margin: 0 0 18px; }
    html .p23-e2-article .p23-article-header h1 { font-size: 32px; }
    html .p23-e2-article .p23-e2-article-intro { order: 1; width: 100%; }
    html .p23-e2-article .p23-article-cover { order: 2; margin-top: 22px; width: 100%; aspect-ratio: auto; }
    html .p23-e2-article .p23-article-cover img { aspect-ratio: 16/9; height: auto; }
    html .p23-e2-article .p23-e2-reading { display: block; }
    html .p23-e2-article .p23-e2-reading-rail { position: static; margin: 0 0 24px; }
    html .p23-e2-article .p23-article-content { margin-top: 28px; }
    html .p23-e2-article :is(.p23-support,.p23-series-nav,.p23-shop-box,.p23-audience-cta) { max-width: 740px; margin-inline: auto; }
    html .p23-e2-article .p23-series-list { grid-template-columns: 1fr; }
}
@media (max-width:600px) {
    html .p23-e2-article .p23-article-header h1 { font-size: 32px; }
    html .p23-e2-article .p23-e2-article-meta { font-size: 12px; gap: 6px 14px; }
    html .p23-e2-article .p23-tldr-switch__button { font-size: 14px; padding: 10px 14px; }
    html .p23-e2-article .p23-e2-read-link { font-size: 12px; padding: 9px 12px; }
    html .p23-e2-article :is(.p23-article-content,.p23-article-tldr__content) p:not(.p23-card p) { font-size: 16px; line-height: 1.85; }
    html .p23-e2-article .p23-article-content>p:first-child { font-size: 17px; }
    html .p23-e2-article .p23-article-content h2 { font-size: 25px; margin-top: 34px; }
    html .p23-e2-article .p23-article-content h3:not(.p23-card h3) { font-size: 21px; }
    html .p23-e2-article .p23-article-content li { font-size: 16px; }
    html .p23-e2-article .p23-article-tldr { padding: 20px; }
    html .p23-e2-article .p23-faq-inline--bubbles { margin: 28px 0 36px; }
    html .p23-e2-article .p23-faq-bubble { max-width: calc(100% - 12px); padding: 16px; }
    html .p23-e2-article .p23-support__inner { padding: 22px 20px; }
    html .p23-e2-article .p23-support__actions { flex-direction: column; align-items: start; gap: 12px; margin-top: 20px; }
    html .p23-e2-article .p23-series-nav__grid { grid-template-columns: 1fr; }
    html .p23-e2-article .p23-series-nav__placeholder { display: none; }
    html .p23-e2-article .p23-series .p23-article-card--small { grid-template-columns: 90px minmax(0,1fr); gap: 14px; }
    html .p23-e2-article .p23-series .p23-article-card__title { font-size: 20px; }
}

html .p23-e2-article .p23-e2-reader-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
html .p23-e2-article .p23-e2-reader-controls :is(.p23-tldr-switch__button,.p23-e2-read-link) { margin: 0; }