/* Article content extends the shared BG Lab shell, typography and theme tokens. */
body.articles-page main#main-content{min-width:0;color:var(--ink);font-size:18px;line-height:1.65}
body.articles-page main#main-content :is(h1,h2,h3){font-family:inherit;overflow-wrap:break-word}
body.articles-page main#main-content h1{max-width:1050px;margin:18px 0 26px;font-size:clamp(42px,4.6vw,64px);font-weight:650;line-height:1.08;letter-spacing:-.047em}
body.articles-page main#main-content h2{margin:48px 0 22px;font-size:clamp(30px,3.2vw,40px);font-weight:600;line-height:1.13;letter-spacing:-.04em}
body.articles-page main#main-content h3{margin:32px 0 16px;font-size:25px;font-weight:550;line-height:1.24;letter-spacing:-.025em}
body.articles-page main#main-content p{margin:0 0 22px}
body.articles-page main#main-content :is(ul,ol){padding-left:26px}
body.articles-page main#main-content li{margin:10px 0}
body.articles-page main#main-content :is(strong,b){font-weight:600}
body.articles-page main#main-content img{max-width:100%;height:auto}
body.articles-page main#main-content a:not(.button){color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;overflow-wrap:anywhere}
body.articles-page main#main-content a:not(.button):hover{text-decoration-thickness:2px}

/* Shared breadcrumbs, with space for longer editorial titles. */
body.articles-page main#main-content .breadcrumbs{display:block;padding:30px 0 12px;font-size:14px;line-height:1.5;color:var(--muted)}
body.articles-page main#main-content .breadcrumbs ol{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0;padding:0;list-style:none}
body.articles-page main#main-content .breadcrumbs li{margin:0}
body.articles-page main#main-content .breadcrumbs li+li::before{content:"/";margin-right:10px;color:var(--muted)}
body.articles-page main#main-content .breadcrumbs a{color:var(--muted)}
body.articles-page main#main-content .breadcrumbs a:hover{color:var(--blue)}
body.articles-page main#main-content .article-heading{max-width:1050px;padding:16px 0 42px}
body.articles-page main#main-content .article-meta{display:flex;flex-wrap:wrap;gap:10px 24px;margin:0 0 24px;color:var(--muted);font-size:14px;line-height:1.5}
body.articles-page main#main-content .article-lead{max-width:850px;margin:0;color:var(--muted);font-size:21px;line-height:1.6}
body.articles-page main#main-content .article-layout{display:grid;grid-template-columns:minmax(210px,248px) minmax(0,800px);align-items:start;gap:clamp(32px,5vw,72px);padding:38px 0 64px;border-top:1px solid var(--line)}

/* Navigation stays below the sticky shared header. */
body.articles-page main#main-content .toc{position:sticky;top:calc(var(--motion-header-height,88px) + 24px);max-height:calc(100vh - var(--motion-header-height,88px) - 48px);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--muted) var(--paper);font-size:15px;line-height:1.5}
body.articles-page main#main-content .toc details{padding:0 14px 14px 0}
body.articles-page main#main-content .toc summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 0 15px;color:var(--ink);font-size:16px;font-weight:550;line-height:1.5}
body.articles-page main#main-content .toc summary::after{content:"+";flex-shrink:0;color:var(--blue);font-size:22px;line-height:1}
body.articles-page main#main-content .toc details[open]>summary::after{content:"−"}
body.articles-page main#main-content .toc ol{margin:0;padding:0;list-style:none}
body.articles-page main#main-content .toc li{margin:0}
body.articles-page main#main-content .toc a{display:block;padding:10px 0;border-top:1px solid var(--line);color:var(--muted);text-decoration:none;line-height:1.5}
body.articles-page main#main-content .toc a:hover{color:var(--blue);text-decoration:underline}
body.articles-page main#main-content .article-body{min-width:0;font-size:19px;line-height:1.72}
body.articles-page main#main-content .article-body>h2:first-child{margin-top:0}
body.articles-page main#main-content .article-body :is(p,li){overflow-wrap:break-word;line-height:inherit}
body.articles-page main#main-content .article-body :is(h2,h3){scroll-margin-top:24px}
body.articles-page main#main-content .article-body :is(ul,ol){margin:0 0 26px}
body.articles-page main#main-content .article-body blockquote{margin:28px 0;padding:24px 26px;border-left:3px solid var(--blue);border-radius:0 12px 12px 0;background:var(--soft)}
body.articles-page main#main-content .article-body blockquote p:last-child{margin-bottom:0}
body.articles-page main#main-content .article-body code{padding:2px 6px;border-radius:4px;background:var(--soft);font:inherit;font-size:.9em;overflow-wrap:anywhere}

/* Tables keep their natural information density and scroll within the article. */
body.articles-page main#main-content .table-wrap{max-width:100%;margin:28px 0 36px;overflow-x:auto;overscroll-behavior-inline:contain;border:1px solid var(--line);border-radius:12px;background:var(--paper);scrollbar-color:var(--muted) var(--paper)}
body.articles-page main#main-content .table-wrap table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.6}
body.articles-page main#main-content .table-wrap :is(th,td){min-width:145px;padding:18px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
body.articles-page main#main-content .table-wrap th{background:var(--soft);font-weight:600}
body.articles-page main#main-content .table-wrap tr:last-child td{border-bottom:0}
body.articles-page main#main-content .table-hint{display:none;margin:0;padding:10px 16px;border-bottom:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1.5}
body.articles-page main#main-content .table-wrap.can-scroll .table-hint{display:block}
body.articles-page main#main-content .article-cta{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
body.articles-page main#main-content .article-cta a{font-weight:550}
body.articles-page main#main-content .next-step{margin-top:40px;padding:30px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
body.articles-page main#main-content .next-step h2{margin:0 0 16px;font-size:30px}
body.articles-page main#main-content .next-step p{margin-bottom:22px;font-size:18px}
body.articles-page main#main-content .next-links{display:flex;align-items:center;flex-wrap:wrap;gap:18px 26px;font-size:16px}
body.articles-page main#main-content .next-links .button{max-width:100%;white-space:normal}
body.articles-page main#main-content .related{padding:12px 0 72px;border-top:1px solid var(--line)}
body.articles-page main#main-content .related h2{margin:30px 0 26px}
body.articles-page main#main-content .related-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
body.articles-page main#main-content .related-list li{margin:0;padding:0 0 0 20px;border-left:2px solid var(--line)}
body.articles-page main#main-content .related-list a{font-size:18px;font-weight:550;line-height:1.5;text-decoration:none}
body.articles-page main#main-content .related-list a:hover{text-decoration:underline}

/* Hub controls reuse the paper, line and cobalt theme tokens. */
body.articles-page main#main-content .hub-heading{max-width:1040px;padding:16px 0 36px}
body.articles-page main#main-content .hub-heading p{max-width:850px;margin-bottom:0;color:var(--muted);font-size:20px;line-height:1.65}
body.articles-page main#main-content .hub-tools{padding:26px 0 30px;border-block:1px solid var(--line)}
body.articles-page main#main-content .search-label{display:block;max-width:760px;font-size:17px;font-weight:550}
body.articles-page main#main-content .search-line{display:flex;max-width:760px;gap:12px;margin-top:12px}
body.articles-page main#main-content .search-line input{width:100%;min-width:0;min-height:56px;padding:15px 17px;border:1px solid var(--muted);border-radius:8px;background:var(--paper);color:var(--ink);font-size:16px;line-height:1.5}
body.articles-page main#main-content .search-line input::placeholder{color:var(--muted);opacity:1}
body.articles-page main#main-content :is(.search-line button,.reset){min-height:48px;padding:12px 18px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font-size:15px;line-height:1.5}
body.articles-page main#main-content :is(.search-line button,.reset):hover{background:var(--soft)}
body.articles-page main#main-content .filter-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
body.articles-page main#main-content .filter-row button{min-height:46px;padding:10px 16px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--muted);font-size:15px;line-height:1.5}
body.articles-page main#main-content .filter-row button:hover{color:var(--ink);border-color:var(--blue)}
body.articles-page main#main-content .filter-row button[aria-pressed=true]{border-color:var(--blue);background:var(--soft);color:var(--blue);font-weight:550}
body.articles-page main#main-content .results-count{margin:24px 0;color:var(--muted);font-size:14px}
body.articles-page main#main-content .articles-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-bottom:54px}
body.articles-page main#main-content .article-card{--article-card-accent:var(--soft);display:flex;min-width:0;flex-direction:column;align-items:flex-start;padding:30px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
body.articles-page main#main-content .article-card[data-category=security]{--article-card-accent:var(--lavender)}
body.articles-page main#main-content .article-card[data-category=choice]{--article-card-accent:var(--lime)}
body.articles-page main#main-content .article-card[data-category=process]{--article-card-accent:var(--peach)}
body.articles-page main#main-content .article-card:focus-within{border-color:var(--blue)}
body.articles-page main#main-content .article-card small{display:inline-flex;padding:6px 10px;border-radius:6px;background:var(--article-card-accent);color:var(--ink);font-size:12px;line-height:1.5}
body.articles-page main#main-content .article-card h3{margin:22px 0 16px;font-size:28px}
body.articles-page main#main-content .article-card h3 a{color:var(--ink);text-decoration:none}
body.articles-page main#main-content .article-card h3 a:hover{text-decoration:underline}
body.articles-page main#main-content .article-card p{margin-bottom:26px;color:var(--muted);font-size:17px}
body.articles-page main#main-content .article-card .read-link{margin-top:auto;font-size:15px;font-weight:550}
body.articles-page main#main-content .empty-state{margin:24px 0 48px;padding:32px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
body.articles-page main#main-content .empty-state h3{margin-top:0}
body.articles-page main#main-content .hub-bottom{margin:0 0 72px;padding:40px 0 0;border-top:1px solid var(--line)}
body.articles-page main#main-content .hub-bottom h2{margin-top:0}
body.articles-page main#main-content .hub-bottom p{max-width:760px}
body.articles-page main#main-content .hub-bottom .next-links{margin-top:28px}

@media(max-width:1000px){
  body.articles-page main#main-content .article-layout{grid-template-columns:210px minmax(0,1fr);gap:32px}
  body.articles-page main#main-content .article-lead{font-size:20px}
  body.articles-page main#main-content .article-card{padding:25px}
}
@media(max-width:767px){
  body.articles-page main#main-content .breadcrumbs{padding-top:24px;font-size:13px}
  body.articles-page main#main-content h1{margin:14px 0 22px;font-size:clamp(34px,8.5vw,42px);line-height:1.1;letter-spacing:-.043em}
  body.articles-page main#main-content h2{margin-top:38px;font-size:30px;letter-spacing:-.037em}
  body.articles-page main#main-content h3{margin-top:28px;font-size:23px}
  body.articles-page main#main-content .article-heading{padding:10px 0 30px}
  body.articles-page main#main-content .article-meta{margin-bottom:22px;gap:8px 18px;font-size:13px}
  body.articles-page main#main-content .article-lead{font-size:19px;line-height:1.6}
  body.articles-page main#main-content .article-layout{display:flex;flex-direction:column;gap:30px;padding:0 0 44px}
  body.articles-page main#main-content .toc{position:static;width:100%;max-height:none;overflow:visible;border-bottom:1px solid var(--line);font-size:16px}
  body.articles-page main#main-content .toc details{padding:16px 0}
  body.articles-page main#main-content .toc summary{min-height:44px;padding:8px 0}
  body.articles-page main#main-content .toc a{padding:11px 0}
  body.articles-page main#main-content .article-body{width:100%;font-size:18px;line-height:1.7}
  body.articles-page main#main-content .article-body blockquote{padding:20px}
  body.articles-page main#main-content .table-wrap :is(th,td){min-width:150px;padding:14px 12px}
  body.articles-page main#main-content .table-wrap table{font-size:16px}
  body.articles-page main#main-content .next-step{padding:24px 20px}
  body.articles-page main#main-content .next-step h2{font-size:28px}
  body.articles-page main#main-content .next-links{align-items:flex-start;gap:20px}
  body.articles-page main#main-content .related-list{grid-template-columns:1fr;gap:24px}
  body.articles-page main#main-content .related{padding-bottom:48px}
  body.articles-page main#main-content .related h2{font-size:30px}
  body.articles-page main#main-content .hub-heading{padding-top:10px;padding-bottom:26px}
  body.articles-page main#main-content .hub-heading p{font-size:18px}
  body.articles-page main#main-content .articles-grid{grid-template-columns:1fr;gap:18px;margin-bottom:40px}
  body.articles-page main#main-content .article-card{padding:24px 22px}
  body.articles-page main#main-content .article-card h3{font-size:25px}
  body.articles-page main#main-content .filter-row{gap:8px}
  body.articles-page main#main-content .filter-row button{padding:10px 12px;font-size:14px}
  body.articles-page main#main-content .search-line{flex-wrap:wrap}
  body.articles-page main#main-content .search-line input{flex:1 1 100%}
  body.articles-page main#main-content .search-line button{width:auto}
  body.articles-page main#main-content .hub-bottom{margin-bottom:52px;padding-top:32px}
}
@media print{
  body.articles-page main#main-content{color:#000;background:#fff}
  body.articles-page main#main-content :is(.toc,.related,.next-step,.hub-tools,.article-cta){display:none}
  body.articles-page main#main-content .article-layout{display:block;border:0}
  body.articles-page main#main-content .article-heading{padding:0}
  body.articles-page main#main-content .article-body{font-size:11pt}
  body.articles-page main#main-content .article-lead{font-size:12pt}
  body.articles-page main#main-content .table-wrap{overflow:visible}
  body.articles-page main#main-content .table-wrap :is(th,td){min-width:0;padding:7px}
  body.articles-page main#main-content .table-wrap table{font-size:9pt}
  body.articles-page main#main-content h1{font-size:24pt}
  body.articles-page main#main-content :is(h2,h3){break-after:avoid}
  body.articles-page main#main-content a:not(.button){color:inherit}
  body.articles-page main#main-content .article-body h2{font-size:17pt}
  body.articles-page main#main-content .article-body h3{font-size:14pt}
}
