/* scoped by scripts/v4/sync-assets.mjs: articles */
/* pages_articles · blog / case studies / newsroom (page-specific additions only) */
:where(body[data-v4~="articles"]){--col:993px;--ncol:879px}
:where(body[data-v4~="articles"]) .back{display:inline-flex;font-size:15px;color:var(--muted);justify-self:start}
:where(body[data-v4~="articles"]) .back:hover{color:var(--orange)}
:where(body[data-v4~="articles"]) .article-head .in{max-width:var(--col);margin:0 auto}
:where(body[data-v4~="articles"]) .article-head.nw .in{max-width:var(--ncol)}
:where(body[data-v4~="articles"]) .art-h1{font-size:clamp(27px,3.2vw,45px);line-height:1.34}
:where(body[data-v4~="articles"]) .article-head .lead{max-width:none}
:where(body[data-v4~="articles"]) .article-cover{max-width:calc(var(--col) + 2*var(--gutter))}
:where(body[data-v4~="articles"]) .article-cover.nw{max-width:calc(var(--ncol) + 2*var(--gutter))}
:where(body[data-v4~="articles"]) .article-cover .photo{aspect-ratio:16/9}
:where(body[data-v4~="articles"]) .article-cover.nw .photo{aspect-ratio:3/2}
:where(body[data-v4~="articles"]) .art-wrap{max-width:calc(var(--col) + 2*var(--gutter))}
@media (min-width:1002px){:where(body[data-v4~="articles"]) .article{grid-template-columns:240px minmax(0,681px);justify-content:space-between;gap:48px}}
:where(body[data-v4~="articles"]) .toc a.sub{padding-left:27px;font-size:12px}
:where(body[data-v4~="articles"]) .toc{max-height:calc(100vh - 141px);overflow:auto}

/* service cards at the end of an article */
:where(body[data-v4~="articles"]) .svc{display:grid;gap:12px;margin-top:39px}
:where(body[data-v4~="articles"]) .svc .eyebrow{margin-bottom:6px}
:where(body[data-v4~="articles"]) .svc a{display:grid;grid-template-columns:45px minmax(0,1fr) 21px;gap:18px;align-items:center;padding:21px 21px;border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:border-color .25s,box-shadow .35s var(--ease)}
:where(body[data-v4~="articles"]) .svc a:hover{border-color:rgba(254,80,0,.35);box-shadow:0 12px 30px rgba(150,56,33,.08)}
:where(body[data-v4~="articles"]) .svc .ic{width:39px;height:39px;color:var(--orange)}
:where(body[data-v4~="articles"]) .svc .t{display:grid;gap:2px}
:where(body[data-v4~="articles"]) .svc .k{font:500 12px/1.4 var(--latin);letter-spacing:0;text-transform:uppercase;color:var(--muted)}
:where(body[data-v4~="articles"]) .svc h3{font-size:18px;line-height:1.45}
:where(body[data-v4~="articles"]) .svc p{font-size:15px;line-height:1.6}
:where(body[data-v4~="articles"]) .svc .go{color:var(--orange)} :where(body[data-v4~="articles"]) .svc .go svg{width:18px;height:18px}
:where(body[data-v4~="articles"]) .art-more{padding-block:72px var(--sec)}

/* featured card (blog, case studies, newsroom) */
:where(body[data-v4~="articles"]) .feat{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center;margin-bottom:63px;padding-bottom:63px;border-bottom:1px solid var(--line)}
:where(body[data-v4~="articles"]) .feat .photo{aspect-ratio:16/9}
:where(body[data-v4~="articles"]) .feat .photo img{transition:transform .8s var(--ease)}
:where(body[data-v4~="articles"]) .feat:hover .photo img{transform:scale(1.03)}
:where(body[data-v4~="articles"]) .feat .t{display:grid;gap:18px;align-content:center;justify-items:start}
:where(body[data-v4~="articles"]) .feat .m{display:flex;gap:9px;align-items:center;font-size:12px;color:var(--muted)}
:where(body[data-v4~="articles"]) .feat .m b{color:var(--orange-d);font-weight:500}
:where(body[data-v4~="articles"]) .feat h2{font-size:clamp(24px,2.1vw,30px);line-height:1.42}
:where(body[data-v4~="articles"]) .feat:hover h2{color:var(--orange)}
:where(body[data-v4~="articles"]) .feat p{font-size:15px}
:where(body[data-v4~="articles"]) .case-list .feat{margin-bottom:0;padding-bottom:0;border-bottom:0}
@media (max-width:861px){:where(body[data-v4~="articles"]) .feat{grid-template-columns:1fr;gap:21px;margin-bottom:48px;padding-bottom:48px}}

:where(body[data-v4~="articles"]) .posts.blog .photo,:where(body[data-v4~="articles"]) .art-more .photo,:where(body[data-v4~="articles"]) .sec.warm .posts .photo{aspect-ratio:16/9}
:where(body[data-v4~="articles"]) .posts.blog .post p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
:where(body[data-v4~="articles"]) .posts [hidden],:where(body[data-v4~="articles"]) .feat[hidden]{display:none}
:where(body[data-v4~="articles"]) .blog-list .filters{margin-bottom:39px}

/* newsroom */
:where(body[data-v4~="articles"]) .hero-page+.wrap .press{border-top:0}
:where(body[data-v4~="articles"]) .news-body{max-width:var(--ncol);margin:0 auto;padding-block:48px 9px;font-size:18px;line-height:1.9}
:where(body[data-v4~="articles"]) .news-body .source-card{margin-top:27px}
:where(body[data-v4~="articles"]) .news-body .source-card h3{line-height:1.5}
:where(body[data-v4~="articles"]) .news-body .source-card .fine{margin-top:6px}
:where(body[data-v4~="articles"]) .news-rel .card h3{font-size:18px;line-height:1.55}
:where(body[data-v4~="articles"]) .news-rel .card .k{line-height:1.5;letter-spacing:0;text-transform:none}
@media (max-width:759px){:where(body[data-v4~="articles"]) .press{gap:9px 21px;font-size:15px}:where(body[data-v4~="articles"]) .news-body{padding-top:33px;font-size:15px}:where(body[data-v4~="articles"]) .source-card .btn{justify-self:start}}
:where(body[data-v4~="articles"]) .sh.row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:21px 39px}
:where(body[data-v4~="articles"]) .sh.row .d{justify-items:end}
:where(body[data-v4~="articles"]) .article>div{min-width:0}
@media (max-width:999px){:where(body[data-v4~="articles"]) .article{grid-template-columns:minmax(0,1fr)}}
:where(body[data-v4~="articles"]) .article-head .in>*{min-width:0;max-width:100%}
:where(body[data-v4~="articles"]) .art-h1,:where(body[data-v4~="articles"]) .feat h2,:where(body[data-v4~="articles"]) .post h3,:where(body[data-v4~="articles"]) .source-card h3,:where(body[data-v4~="articles"]) .prose h2,:where(body[data-v4~="articles"]) .prose h3,:where(body[data-v4~="articles"]) .svc h3,:where(body[data-v4~="articles"]) .news-rel h3{overflow-wrap:break-word}
@media (max-width:759px){:where(body[data-v4~="articles"]) .art-h1,:where(body[data-v4~="articles"]) .feat h2,:where(body[data-v4~="articles"]) .post h3,:where(body[data-v4~="articles"]) .source-card h3,:where(body[data-v4~="articles"]) .prose h2,:where(body[data-v4~="articles"]) .prose h3,:where(body[data-v4~="articles"]) .svc h3,:where(body[data-v4~="articles"]) .news-rel h3{overflow-wrap:anywhere}}
@media (max-width:759px){:where(body[data-v4~="articles"]) .prose .tbl table{min-width:639px}:where(body[data-v4~="articles"]) .prose .tbl th:first-child,:where(body[data-v4~="articles"]) .prose .tbl td:first-child{min-width:96px}}









:where(body[data-v4~="articles"]) *,:where(body[data-v4~="articles"]) *::before,:where(body[data-v4~="articles"]) *::after{letter-spacing:0!important}

/* end-of-article spacing (2026-09-28): the source card / service cards get a full section of air before the next block.
   News: the grey MORE NEWS band starts var(--sec) below the last card. Blog / case study: KEEP READING sits below a
   hairline, with generous space on both sides of it. */
:where(body[data-v4~="articles"]) .news-body{padding-bottom:var(--sec)}
:where(body[data-v4~="articles"]) .art-more{position:relative;margin-top:72px;padding-block:96px var(--sec)}
@media (max-width:759px){:where(body[data-v4~="articles"]) .art-more{margin-top:48px;padding-top:72px}}
:where(body[data-v4~="articles"]) .art-more::before{content:"";position:absolute;top:0;left:max(var(--gutter),calc((100vw - 1440px)/2 + var(--gutter)));right:max(var(--gutter),calc((100vw - 1440px)/2 + var(--gutter)));height:1px;background:var(--line)}

/* article typesetting (2026-09-29, STYLE-GUIDE 2.2): reading measure, CJK line-break rules, card system for the end-of-article blocks */
:where(body[data-v4~="articles"]) .prose{max-width:38em}                                   /* 18px x 38em = 684px: 36 to 38 CJK characters per line, also when the TOC column drops out */
:where(body[data-v4~="articles"]) .prose :is(p,li,td,th,blockquote,figcaption),:where(body[data-v4~="articles"]) .article-head .lead,:where(body[data-v4~="articles"]) .news-body p{text-wrap:pretty;line-break:strict;word-break:normal;overflow-wrap:break-word;hanging-punctuation:none}
@media (max-width:759px){:where(body[data-v4~="articles"]) .prose :is(p,li,blockquote,figcaption),:where(body[data-v4~="articles"]) .article-head .lead,:where(body[data-v4~="articles"]) .news-body p{overflow-wrap:anywhere}}
:where(body[data-v4~="articles"]) .prose p+p{margin-top:1.1em}
:where(body[data-v4~="articles"]) .prose li>p{margin:0}
:where(body[data-v4~="articles"]) .prose .tbl th,:where(body[data-v4~="articles"]) .prose .tbl td{text-wrap:pretty}
:where(body[data-v4~="articles"]) .prose .tbl :is(th,td):first-child{min-width:6.6em}
:where(body[data-v4~="articles"]) .prose h2+*,:where(body[data-v4~="articles"]) .prose h3+*{margin-top:.8em}
:where(body[data-v4~="articles"]) .toc a{text-wrap:balance;line-break:strict}
/* end-of-article service links: no wrapping panel, each link is one neutral card (no border), like every other card on the site */
:where(body[data-v4~="articles"]) main .article .svc,:where(body[data-v4~="articles"]) main .news-body .svc{gap:12px;background:none!important;border-radius:0!important;padding:0!important;min-height:0!important;margin-top:var(--line-gap)}
:where(body[data-v4~="articles"]) main .article .svc a,:where(body[data-v4~="articles"]) main .news-body .svc a{border:0;background:#F6F5F2;border-radius:21px;padding:27px 30px;box-shadow:none}
:where(body[data-v4~="articles"]) main .article .svc a:hover,:where(body[data-v4~="articles"]) main .news-body .svc a:hover{background:#EFEDE9;box-shadow:none}
@media (max-width:759px){:where(body[data-v4~="articles"]) main .article .svc a,:where(body[data-v4~="articles"]) main .news-body .svc a{padding:24px 21px;grid-template-columns:39px minmax(0,1fr) 18px;gap:15px}}
/* 2026-09-29 · tables: fixed layout so no column collapses; first column a readable label width */
:where(body[data-v4~="articles"]) .prose .tbl table{table-layout:fixed;width:100%}
:where(body[data-v4~="articles"]) .prose .tbl :is(th,td):first-child{width:22%;min-width:0}
:where(body[data-v4~="articles"]) .prose .tbl :is(th,td){word-break:normal;overflow-wrap:break-word;line-break:strict;vertical-align:top}
@media (max-width:759px){:where(body[data-v4~="articles"]) .prose .tbl table{min-width:639px}:where(body[data-v4~="articles"]) .prose .tbl :is(th,td):first-child{width:117px}}
@media (max-width:759px){:where(body[data-v4~="articles"]) .prose .tbl table:not(:has(tr > :nth-child(4))){min-width:0!important}:where(body[data-v4~="articles"]) .prose .tbl table:not(:has(tr > :nth-child(3))) :is(th,td):first-child{width:36%}}