/* blog-article.css — redesigned article pages (/blog-new/<post>/). Needs blog-new.css (tokens, cards, buttons). */
.bn-article{background:#fff}
.bn-progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:9999;background:transparent;pointer-events:none}
.bn-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--bn-red),#FF7A59);border-radius:0 4px 4px 0;transition:width .1s linear}

/* ---------- Hero ---------- */
.bn-ahero{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,var(--bn-navy-3) 0%,var(--bn-navy-2) 40%,var(--bn-navy) 100%);padding:44px 0 170px}
.bn-ahero--noimg{padding-bottom:64px}
.bn-ahero__in{max-width:900px;text-align:center}
.bn-ahero .bn-crumbs{justify-content:center;flex-wrap:wrap}
.bn .bn-pill{display:inline-flex;align-items:center;border-radius:999px;padding:8px 14px;background:var(--bn-red);color:#fff;
  font:700 12px/1 var(--bn-head);letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;transition:background .2s}
.bn .bn-pill:hover{background:#C9232C}
.bn .bn-pill--light{background:var(--bn-ice);color:var(--bn-navy);margin:0;letter-spacing:.04em}
.bn .bn-pill--light:hover{background:var(--bn-navy);color:#fff}
.bn .bn-ahero__title{margin:0 auto 18px;max-width:880px;font:900 clamp(32px,4.4vw,52px)/1.12 var(--bn-head);color:#fff;letter-spacing:-.01em}
.bn-ahero__dek{margin:0 auto 28px;max-width:720px;font-size:19px;line-height:1.6;color:rgba(255,255,255,.82)}
.bn-byline{display:inline-flex;align-items:center;gap:14px;text-align:left;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  padding:10px 20px 10px 10px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.bn-byline__av{width:44px;height:44px;border-radius:50%;background:#fff;padding:4px;object-fit:contain}
.bn-byline__name{margin:0 0 3px;font:700 15px/1.2 var(--bn-head);color:#fff}
.bn-byline__meta{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.75)}
.bn-byline__meta>span{display:inline-flex;align-items:center;gap:5px}

/* ---------- Featured image ---------- */
.bn-afig{position:relative;z-index:2;max-width:1040px;margin:-130px auto 0;padding:0 24px}
.bn-afig img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:24px;box-shadow:0 30px 60px rgba(6,28,61,.28);background:var(--bn-sky)}

/* ---------- Layout ---------- */
.bn-alayout{display:grid;grid-template-columns:220px minmax(0,720px) 300px;gap:48px;justify-content:center;padding-top:56px;padding-bottom:40px;max-width:1400px}
.bn-alayout--notoc{grid-template-columns:minmax(0,760px) 300px}
.bn-alayout--notoc .bn-aside-l{display:none}
/* Sticky side columns. The site sets overflow-x:hidden on html/body, which turns <body> into a scroll container and
   silently disables position:sticky — use overflow-x:clip on article pages instead (same visual result, sticky works). */
html:has(body.blog-new-article),body.blog-new-article{overflow-x:clip!important;overflow-y:visible!important}
.bn-aside-l,.bn-aside-r{align-self:start;position:sticky;top:24px}
.bn-aside-l{display:flex;flex-direction:column;gap:24px;max-height:calc(100vh - 48px)}
.bn-aside-r{max-height:calc(100vh - 48px);display:flex;flex-direction:column}
.bn-aside-r__sticky{min-height:0;flex:1 1 auto}
.bn-aside-r .bn-book{flex:none}
.bn-aside-r .bn-rec{min-height:0;flex:0 1 auto;display:flex;flex-direction:column}
.bn-aside-r .bn-rec ul{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:4px}
@media (max-height:700px){.bn-book__img{display:none}.bn-book{padding:22px 20px}.bn-book__p{font-size:44px}}
.bn-toc{flex:0 1 auto;min-height:0;display:flex;flex-direction:column}
.bn-toc ol{min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:6px!important;scrollbar-width:thin}
.bn-toc__h{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:900 13px/1 var(--bn-head);letter-spacing:.12em;text-transform:uppercase;color:var(--bn-navy)}
.bn-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--bn-line)}
.bn-toc li{margin:0}
.bn .bn-toc a{display:block;padding:7px 0 7px 14px;margin-left:-2px;border-left:2px solid transparent;font:500 14px/1.4 var(--bn-body);color:var(--bn-muted);transition:color .2s,border-color .2s}
.bn .bn-toc a:hover{color:var(--bn-navy)}
.bn .bn-toc a.is-active{color:var(--bn-navy);border-left-color:var(--bn-red);font-weight:700}
.bn-aside-l__share{flex:none}
.bn-aside-r__sticky{display:flex;flex-direction:column;gap:24px}

/* mobile TOC */
.bn-toc-m{display:none;margin:0 0 28px;border:1px solid var(--bn-line);border-radius:16px;background:var(--bn-ice)}
.bn-toc-m summary{display:flex;align-items:center;gap:10px;padding:16px 18px;cursor:pointer;list-style:none;font:900 15px var(--bn-head);color:var(--bn-navy)}
.bn-toc-m summary::-webkit-details-marker{display:none}
.bn-toc-m summary span{margin-left:auto;font:500 13px var(--bn-body);color:var(--bn-muted)}
.bn-toc-m summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--bn-navy);border-bottom:2px solid var(--bn-navy);transform:rotate(45deg);margin-left:6px;transition:transform .2s}
.bn-toc-m[open] summary::after{transform:rotate(-135deg)}
.bn-toc-m ol{margin:0;padding:0 18px 16px 38px}
.bn-toc-m li{padding:5px 0}
.bn .bn-toc-m a{color:var(--bn-ink);font-size:15px}

/* ---------- Prose ---------- */
.bn-prose{font:400 18px/1.8 var(--bn-body);color:#2B3445;overflow-wrap:break-word}
.bn-prose>*:first-child,.bn-prose>.bn-callout:first-child{margin-top:0}
.bn .bn-prose p{margin:0 0 1.2em;font:inherit;color:inherit}
.bn .bn-prose h1,.bn .bn-prose h2{margin:2.1em 0 .7em;font:900 clamp(24px,2.6vw,30px)/1.25 var(--bn-head);color:var(--bn-ink);scroll-margin-top:24px;letter-spacing:-.005em}
.bn .bn-prose h3{margin:1.7em 0 .5em;font:900 21px/1.35 var(--bn-head);color:var(--bn-navy)}
.bn .bn-prose h4{margin:1.5em 0 .4em;font:700 18px/1.4 var(--bn-head);color:var(--bn-ink)}
.bn .bn-prose a{color:var(--bn-navy);font-weight:600;text-decoration:underline;text-decoration-color:rgba(18,63,126,.35);text-underline-offset:3px;text-decoration-thickness:2px;transition:text-decoration-color .2s,color .2s}
.bn .bn-prose a:hover{color:var(--bn-red);text-decoration-color:currentColor}
.bn .bn-prose strong,.bn .bn-prose b{color:var(--bn-ink);font-weight:700}
.bn .bn-prose ul,.bn .bn-prose ol{margin:0 0 1.4em;padding:0 0 0 0;list-style:none}
.bn .bn-prose li{position:relative;margin:0 0 .6em;padding-left:30px}
.bn .bn-prose ul>li::before{content:"";position:absolute;left:6px;top:.72em;width:9px;height:9px;border-radius:50%;background:#000;box-shadow:none}
.bn .bn-prose ol{counter-reset:bnol}
.bn .bn-prose ol>li{counter-increment:bnol}
.bn .bn-prose ol>li::before{content:counter(bnol);position:absolute;left:0;top:.2em;width:22px;height:22px;border-radius:50%;background:var(--bn-navy);color:#fff;
  font:700 12px/22px var(--bn-head);text-align:center}
.bn .bn-prose li>ul,.bn .bn-prose li>ol{margin:.6em 0 0}
.bn .bn-prose li p{margin:0}
.bn .bn-prose figure{margin:1.8em 0}
.bn .bn-prose img{max-width:100%;height:auto;border-radius:16px;display:block}
.bn .bn-prose figcaption{margin-top:8px;font-size:14px;color:var(--bn-muted);text-align:center}
.bn .bn-prose blockquote{margin:1.8em 0;padding:20px 24px;border-left:4px solid var(--bn-red);background:var(--bn-ice);border-radius:0 16px 16px 0;font-size:19px;color:var(--bn-ink)}
.bn .bn-prose blockquote p:last-child{margin:0}
/* tables */
.bn .bn-prose figure.wp-block-table{margin:1.8em 0}
.bn .bn-prose .bn-table{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--bn-line);border-radius:16px;margin:1.8em 0;box-shadow:var(--bn-shadow);background:#fff}
.bn .bn-prose figure.wp-block-table>.bn-table{margin:0}
.bn .bn-prose table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;min-width:520px;margin:0;background:#fff}
.bn .bn-prose th,.bn .bn-prose thead td{background:var(--bn-navy);color:#fff;font:700 14px/1.4 var(--bn-head);text-align:left;padding:14px 16px;border:0}
.bn .bn-prose td{padding:13px 16px;border:0;border-top:1px solid var(--bn-line);vertical-align:top;color:#2B3445}
.bn .bn-prose tbody tr:nth-child(even) td{background:#F8FAFE}
.bn .bn-prose table:not(:has(thead)) tr:first-child td{border-top:0}
/* callout (Summary / Quick Answer) */
.bn .bn-callout{position:relative;margin:0 0 2em;padding:26px 28px 10px;border-radius:20px;background:linear-gradient(135deg,#EEF4FF,#F7FAFF);border:1px solid #D7E4F7}
.bn .bn-callout::after{content:"";position:absolute;right:20px;top:18px;width:46px;height:46px;opacity:.12;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M20 6c-7 0-13 6-13 15 0 7 3 12 5 18 2 7 3 19 9 19 5 0 5-14 11-14s6 14 11 14c6 0 7-12 9-19 2-6 5-11 5-18 0-9-6-15-13-15-5 0-8 3-12 3S25 6 20 6z' fill='none' stroke='%23123F7E' stroke-width='4'/%3E%3C/svg%3E") no-repeat center/contain}
.bn .bn-callout h2{margin:0 0 .5em;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--bn-navy)}

/* ---------- Article footer ---------- */
.bn-afoot{margin-top:40px;padding-top:24px;border-top:1px solid var(--bn-line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 24px}
.bn-afoot__row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bn-afoot__l{font:700 13px var(--bn-head);letter-spacing:.08em;text-transform:uppercase;color:var(--bn-muted)}
.bn-share{display:flex;gap:10px;flex-wrap:wrap}
.bn .bn-share__btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--bn-line);background:#fff;color:var(--bn-navy);padding:0;transition:all .2s;position:relative}
.bn .bn-share__btn:hover{background:var(--bn-navy);border-color:var(--bn-navy);color:#fff;transform:translateY(-2px)}
.bn .bn-share__btn.is-copied{background:#1F8A5B;border-color:#1F8A5B;color:#fff}
.bn .bn-share__btn.is-copied::after{content:"Link copied";position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--bn-ink);color:#fff;font:600 12px var(--bn-body);padding:5px 9px;border-radius:6px}
.bn-author{display:flex;gap:20px;align-items:flex-start;margin-top:32px;padding:24px;border-radius:20px;background:var(--bn-ice)}
.bn-author img{flex:0 0 64px;width:64px;height:64px;border-radius:50%;background:#fff;padding:6px;box-shadow:var(--bn-shadow)}
.bn-author__k{margin:0 0 2px;font:700 12px var(--bn-head);letter-spacing:.1em;text-transform:uppercase;color:var(--bn-red)}
.bn-author__n{margin:0 0 6px;font:900 19px var(--bn-head);color:var(--bn-ink)}
.bn-author__d{margin:0 0 10px;font-size:15px;line-height:1.6;color:var(--bn-text)}
.bn .bn-author__a{display:inline-flex;align-items:center;gap:6px;font:700 14px var(--bn-head);color:var(--bn-navy)}

/* ---------- Right rail ---------- */
.bn-book{position:relative;overflow:hidden;text-align:center;padding:28px 24px;border-radius:24px;color:#fff;
  background:radial-gradient(120% 80% at 100% 0%,#2F6DB5 0%,transparent 60%),linear-gradient(160deg,var(--bn-navy) 0%,var(--bn-navy-3) 100%);box-shadow:0 20px 40px rgba(6,28,61,.25)}
.bn-book__img{width:110px;height:auto;margin:0 auto 6px}
.bn-book p{margin:0}
.bn-book__k{font:900 22px/1.2 var(--bn-head)}
.bn-book__s{font-size:15px;color:rgba(255,255,255,.75);margin-top:2px!important}
.bn-book__p{font:900 54px/1 var(--bn-head);color:#fff;margin:6px 0 18px!important;text-shadow:0 6px 20px rgba(0,0,0,.25)}
.bn .bn-book__btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px 16px;border-radius:999px;background:var(--bn-red);color:#fff;
  font:700 14px/1 var(--bn-head);letter-spacing:.06em;margin-bottom:10px;transition:background .2s,transform .2s}
.bn .bn-book__btn:hover{background:#C9232C;transform:translateY(-1px)}
.bn .bn-book__btn--ghost{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3)}
.bn .bn-book__btn--ghost:hover{background:#fff;color:var(--bn-navy)}
.bn-book__or{margin:8px 0!important;font:700 12px var(--bn-head);letter-spacing:.2em;color:rgba(255,255,255,.6)}
.bn-book__addr{font-size:14px;line-height:1.5;color:rgba(255,255,255,.85);margin-bottom:12px!important}
.bn .bn-book__dir{display:inline-flex;align-items:center;gap:6px;font:700 13px var(--bn-head);letter-spacing:.08em;color:#fff;text-decoration:underline;text-underline-offset:4px}
.bn-rec{padding:22px;border-radius:20px;border:1px solid var(--bn-line);background:#fff}
.bn-rec__h{margin:0 0 14px;font:900 13px var(--bn-head);letter-spacing:.12em;text-transform:uppercase;color:var(--bn-navy)}
.bn-rec ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.bn-rec li{display:grid;grid-template-columns:64px 1fr;column-gap:12px}
.bn .bn-rec a{display:contents;color:var(--bn-ink)}
.bn-rec__media{grid-row:span 2;width:64px;height:54px;border-radius:10px;overflow:hidden;background:var(--bn-sky)}
.bn-rec__media img,.bn-rec__media .bn-ph{width:100%;height:100%;object-fit:cover}
.bn-rec__media .bn-ph__label{display:none}.bn-rec__media .bn-ph__icon{width:26px;height:26px}
.bn-rec__t{font:700 14px/1.35 var(--bn-head);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bn .bn-rec a:hover .bn-rec__t{color:var(--bn-navy);text-decoration:underline}
.bn-rec time{font-size:12px;color:var(--bn-muted)}

/* ---------- Prev / next + related ---------- */
.bn-pns{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-top:24px;padding-bottom:24px;max-width:1240px}
.bn .bn-pn{display:flex;flex-direction:column;gap:6px;padding:22px 24px;border-radius:20px;border:1px solid var(--bn-line);background:#fff;transition:all .25s}
.bn .bn-pn:hover{border-color:var(--bn-navy);box-shadow:var(--bn-shadow-h);transform:translateY(-2px)}
.bn-pn--next{text-align:right}
.bn-pn__l{font:700 12px var(--bn-head);letter-spacing:.1em;text-transform:uppercase;color:var(--bn-red)}
.bn-pn__t{font:900 17px/1.35 var(--bn-head);color:var(--bn-ink)}
.bn-related{padding-top:40px;padding-bottom:24px}
.bn-article .bn-related{background:transparent}
.bn-article .bn-card{animation:none}
.bn-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bn a.bn-badge{text-decoration:none}
.bn a.bn-btn--outline{color:var(--bn-navy)}
.bn a.bn-btn--outline:hover{color:#fff}

/* ---------- Responsive ---------- */
@media (max-width:1279px){
  .bn-alayout,.bn-alayout--notoc{grid-template-columns:minmax(0,1fr) 300px;gap:40px;max-width:1100px}
  .bn-aside-l{display:none}
  .bn-toc-m{display:block}
}
@media (max-width:1023px){
  .bn-alayout,.bn-alayout--notoc{grid-template-columns:minmax(0,1fr);max-width:760px;padding-top:40px}
  .bn-aside-r{position:static;max-height:none}
  .bn-aside-r .bn-rec ul{overflow:visible}
  .bn-aside-r__sticky{display:grid;grid-template-columns:1fr 1fr;align-items:start}
  .bn-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bn-grid--3 .bn-card:nth-child(3){display:none}
}
@media (max-width:767px){
  .bn-ahero{padding:28px 0 110px}
  .bn-ahero--noimg{padding-bottom:48px}
  .bn-ahero__dek{display:none}
  .bn-byline{border-radius:18px;padding:10px 14px 10px 10px}
  .bn-afig{margin-top:-84px;padding:0 16px}
  .bn-afig img{border-radius:16px}
  .bn-prose{font-size:17px;line-height:1.75}
  .bn .bn-callout{padding:22px 20px 6px}
  .bn-aside-r__sticky{grid-template-columns:1fr}
  .bn-pns{grid-template-columns:1fr}
  .bn-pn--next{text-align:left}
  .bn-grid--3{grid-template-columns:1fr}
  .bn-grid--3 .bn-card:nth-child(3){display:flex}
  .bn-author{flex-direction:column;gap:14px}
  .bn-afoot{flex-direction:column}
}
@media print{.bn-progress,.bn-aside-r,.bn-aside-l,.bn-related,.bn-pns,.bn-share{display:none!important}.bn-ahero{background:none;color:#000}}
/* TOC list scrolls on its own now: draw the rail inside the box so the active marker isn't clipped */
.bn .bn-toc ol{border-left:0;box-shadow:inset 2px 0 0 var(--bn-line)}
.bn .bn-toc a{margin-left:0}