/* ============================================================
   BMT Blog — single article, scoped under .bmtpost / .bb-progress
   Shares tokens with blog.css; related cards reuse .bmtblog .bb-card
   ============================================================ */

.bmtpost,
.bb-progress{
	--bb-navy:#111a29;
	--bb-navy-2:#1A202C;
	--bb-blue:#0F79E2;
	--bb-blue-deep:#003174;
	--bb-blue-bright:#3296ff;
	--bb-teal:#08A09E;
	--bb-ink:#16202f;
	--bb-slate:#3d4a5c;
	--bb-muted:#718096;
	--bb-line:#e7ecf3;
	--bb-tint:#f5f8fd;
	--bb-tint-2:#e7edfc;
	--bb-white:#fff;
	--bb-wrap:1200px;
	--bb-display:'Jost','Inter',system-ui,sans-serif;
	--bb-body:'Inter',system-ui,-apple-system,sans-serif;
}
.bmtpost{ background:#fff; color:var(--bb-ink); font-family:var(--bb-body); overflow-x:clip; }
.bmtpost *,
.bmtpost *::before,
.bmtpost *::after{ box-sizing:border-box; }
.bmtpost [hidden]{ display:none !important; }
.bmtpost .bb-wrap{ width:100%; max-width:var(--bb-wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }

/* ---------- Reading progress ---------- */
.bb-progress{ position:fixed; inset:0 0 auto 0; height:3px; z-index:120; background:transparent; pointer-events:none; }
.bb-progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--bb-blue),var(--bb-teal)); transition:width .1s linear; }

/* ---------- Hero ---------- */
.bmtpost .bp-hero{
	position:relative; isolation:isolate; overflow:hidden; color:#fff;
	background:
		radial-gradient(120% 150% at 84% -20%, rgba(50,150,255,.42) 0%, rgba(50,150,255,0) 55%),
		linear-gradient(158deg,#0b1626 0%,var(--bb-navy) 44%,#0a2a5e 100%);
	padding-block:clamp(50px,7vw,86px) clamp(74px,10vw,120px);
}
.bmtpost .bp-hero__glow{ position:absolute; inset:auto -10% -70% 45%; height:130%; z-index:-1;
	background:radial-gradient(closest-side,rgba(8,160,158,.28),transparent 70%); }
.bmtpost .bp-hero::after{ content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
	background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
	background-size:46px 46px; -webkit-mask-image:linear-gradient(to bottom,#000,transparent 82%); mask-image:linear-gradient(to bottom,#000,transparent 82%); }
.bmtpost .bp-hero__inner{ position:relative; max-width:860px; }

.bmtpost .bp-crumbs{ font-size:.82rem; color:rgba(233,240,251,.6); margin-bottom:20px; display:flex; gap:8px; align-items:center; }
.bmtpost .bp-crumbs a{ color:rgba(233,240,251,.82); text-decoration:none; }
.bmtpost .bp-crumbs a:hover{ color:#fff; text-decoration:underline; }

.bmtpost .bp-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.bmtpost .bp-chip{
	font-size:.76rem; font-weight:600; letter-spacing:.02em; color:#cfe4ff; text-decoration:none;
	padding:5px 12px; border-radius:100px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
	transition:background .16s,color .16s;
}
.bmtpost .bp-chip:hover{ background:rgba(255,255,255,.16); color:#fff; }

.bmtpost .bp-hero__title{
	font-family:var(--bb-display); font-weight:800; line-height:1.08; letter-spacing:-.02em;
	font-size:clamp(2rem,4.4vw,3.35rem); margin:0 0 26px; color:#fff; max-width:20ch;
}
.bmtpost .bp-byline{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; font-size:.9rem; color:rgba(233,240,251,.78); }
.bmtpost .bp-avatar{
	width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
	font-family:var(--bb-display); font-weight:700; font-size:.95rem; color:#fff;
	background:linear-gradient(135deg,var(--bb-blue),var(--bb-teal)); box-shadow:0 4px 12px -4px rgba(8,160,158,.7);
}
.bmtpost .bp-byline__name{ color:#fff; font-weight:600; }
.bmtpost .bp-byline__dot{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.5; }

/* ---------- Featured image (overlaps hero) ---------- */
.bmtpost .bp-featured{ margin-top:clamp(-64px,-6vw,-44px); position:relative; z-index:2; }
.bmtpost .bp-featured__img{
	width:100%; height:auto; aspect-ratio:16/8; object-fit:cover; display:block;
	border-radius:20px; box-shadow:0 30px 60px -28px rgba(11,22,38,.55); border:1px solid rgba(255,255,255,.5);
}

/* ---------- Layout ---------- */
.bmtpost .bp-layout{
	display:grid; grid-template-columns:minmax(0,248px) minmax(0,720px); gap:clamp(28px,5vw,64px);
	justify-content:center; padding-block:clamp(40px,5vw,64px) clamp(50px,7vw,88px);
}
.bmtpost .bp-layout--notoc{ grid-template-columns:minmax(0,760px); }

.bmtpost .bp-aside{ position:relative; }
.bmtpost .bp-layout--notoc .bp-aside{ display:none; }
.bmtpost .bp-aside__sticky{ position:sticky; top:92px; display:flex; flex-direction:column; gap:26px; }

.bmtpost .bp-toc{ border-left:2px solid var(--bb-line); padding-left:18px; }
.bmtpost .bp-toc__label{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--bb-muted); margin:0 0 12px; }
.bmtpost .bp-toc ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.bmtpost .bp-toc a{
	display:block; font-size:.88rem; line-height:1.4; color:var(--bb-muted); text-decoration:none;
	padding:6px 0 6px 2px; border-left:2px solid transparent; margin-left:-20px; padding-left:18px;
	transition:color .16s,border-color .16s;
}
.bmtpost .bp-toc a:hover{ color:var(--bb-ink); }
.bmtpost .bp-toc a.is-active{ color:var(--bb-blue-deep); font-weight:600; border-left-color:var(--bb-blue); }

.bmtpost .bp-share{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bmtpost .bp-share__label{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--bb-muted); width:100%; margin-bottom:2px; }
.bmtpost .bp-share__btn{
	width:38px; height:38px; display:grid; place-items:center; cursor:pointer;
	color:var(--bb-slate); background:#fff; border:1px solid var(--bb-line); border-radius:11px;
	transition:color .16s,border-color .16s,background .16s,transform .12s;
}
.bmtpost .bp-share__btn:hover{ color:var(--bb-blue); border-color:#c7d7ee; background:var(--bb-tint); transform:translateY(-2px); }
.bmtpost .bp-share__btn.is-copied{ color:#fff; background:var(--bb-teal); border-color:transparent; }
.bmtpost .bp-share__btn:focus-visible{ outline:2px solid var(--bb-blue); outline-offset:2px; }

/* ---------- Article content ---------- */
.bmtpost .bp-content{ font-size:1.11rem; line-height:1.78; color:var(--bb-slate); }
.bmtpost .bp-content > *:first-child{ margin-top:0; }
.bmtpost .bp-content p{ margin:0 0 1.4em; }
.bmtpost .bp-content > p:first-of-type{ font-size:1.24rem; line-height:1.66; color:var(--bb-ink); }
.bmtpost .bp-content h2{
	font-family:var(--bb-display); font-weight:700; letter-spacing:-.01em; color:var(--bb-ink);
	font-size:clamp(1.5rem,2.4vw,1.9rem); line-height:1.25; margin:2.1em 0 .7em; scroll-margin-top:96px;
	padding-top:.2em;
}
.bmtpost .bp-content h2::before{
	content:""; display:block; width:44px; height:3px; border-radius:3px; margin-bottom:.55em;
	background:linear-gradient(90deg,var(--bb-blue),var(--bb-teal));
}
.bmtpost .bp-content h3{ font-family:var(--bb-display); font-weight:700; color:var(--bb-ink); font-size:1.3rem; line-height:1.3; margin:1.7em 0 .5em; scroll-margin-top:96px; }
.bmtpost .bp-content a{ color:var(--bb-blue); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1.5px; transition:color .15s; }
.bmtpost .bp-content a:hover{ color:var(--bb-blue-deep); }
.bmtpost .bp-content ul,
.bmtpost .bp-content ol{ margin:0 0 1.4em; padding-left:0; list-style:none; }
.bmtpost .bp-content ul li,
.bmtpost .bp-content ol li{ position:relative; padding-left:30px; margin-bottom:.6em; }
.bmtpost .bp-content ul li::before{
	content:""; position:absolute; left:6px; top:.62em; width:8px; height:8px; border-radius:2px;
	background:var(--bb-blue); transform:rotate(45deg);
}
.bmtpost .bp-content ol{ counter-reset:bp; }
.bmtpost .bp-content ol li{ counter-increment:bp; }
.bmtpost .bp-content ol li::before{
	content:counter(bp); position:absolute; left:0; top:.05em; width:22px; height:22px; border-radius:6px;
	display:grid; place-items:center; font-size:.75rem; font-weight:700; color:var(--bb-blue-deep); background:var(--bb-tint-2);
}
.bmtpost .bp-content blockquote{
	margin:1.6em 0; padding:6px 0 6px 24px; border-left:3px solid var(--bb-blue);
	font-size:1.24rem; line-height:1.5; font-style:italic; color:var(--bb-ink);
}
.bmtpost .bp-content img,
.bmtpost .bp-content figure{ max-width:100%; height:auto; border-radius:14px; margin:1.6em 0; }
.bmtpost .bp-content figure img{ margin:0; }
.bmtpost .bp-content figcaption{ font-size:.85rem; color:var(--bb-muted); text-align:center; margin-top:.6em; }
.bmtpost .bp-content strong{ color:var(--bb-ink); font-weight:700; }
.bmtpost .bp-content hr{ border:0; border-top:1px solid var(--bb-line); margin:2.2em 0; }

/* ---------- CTA ---------- */
.bmtpost .bp-cta{
	margin-top:3em; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
	padding:clamp(24px,3vw,36px); border-radius:20px; color:#fff;
	background:radial-gradient(120% 160% at 90% 0%,rgba(50,150,255,.5),transparent 55%),linear-gradient(150deg,var(--bb-navy),#0a2a5e);
}
.bmtpost .bp-cta__text h2{ font-family:var(--bb-display); font-weight:700; font-size:1.4rem; margin:0 0 6px; color:#fff; }
.bmtpost .bp-cta__text p{ margin:0; color:rgba(233,240,251,.82); font-size:.98rem; max-width:46ch; }
.bmtpost .bp-cta__btn{
	flex:none; display:inline-flex; align-items:center; gap:8px; text-decoration:none;
	font-weight:600; font-size:.98rem; color:var(--bb-blue-deep); background:#fff;
	padding:13px 24px; border-radius:100px; transition:transform .14s,box-shadow .2s;
}
.bmtpost .bp-cta__btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(0,0,0,.5); }
.bmtpost .bp-cta__btn svg{ transition:transform .18s; }
.bmtpost .bp-cta__btn:hover svg{ transform:translateX(3px); }

.bmtpost .bp-back{
	display:inline-flex; align-items:center; gap:8px; margin-top:2.4em;
	font-weight:600; font-size:.95rem; color:var(--bb-blue); text-decoration:none;
}
.bmtpost .bp-back:hover{ color:var(--bb-blue-deep); }
.bmtpost .bp-back svg{ transition:transform .18s; }
.bmtpost .bp-back:hover svg{ transform:translateX(-3px); }

/* ---------- Related ---------- */
.bmtpost .bp-related{ background:var(--bb-tint); border-top:1px solid var(--bb-line); padding-block:clamp(48px,6vw,80px); }
.bmtpost .bp-related__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:28px; }
.bmtpost .bp-related__head h2{ font-family:var(--bb-display); font-weight:800; letter-spacing:-.01em; font-size:clamp(1.5rem,3vw,2rem); margin:0; color:var(--bb-ink); }
.bmtpost .bp-related__head a{ font-weight:600; font-size:.92rem; color:var(--bb-blue); text-decoration:none; white-space:nowrap; }
.bmtpost .bp-related__head a:hover{ color:var(--bb-blue-deep); text-decoration:underline; }
.bmtpost .bp-related__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
	.bmtpost .bp-layout{ grid-template-columns:minmax(0,720px); }
	.bmtpost .bp-aside{ order:-1; }
	.bmtpost .bp-aside__sticky{ position:static; flex-direction:column; gap:18px; }
	.bmtpost .bp-toc{ background:var(--bb-tint); border-left:0; border-radius:14px; padding:16px 18px; }
	.bmtpost .bp-related__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px){
	.bmtpost .bp-hero{ padding-top:clamp(150px,36vw,172px); }
	.bmtpost .bp-featured{ margin-top:-40px; }
	.bmtpost .bp-featured__img{ border-radius:14px; aspect-ratio:16/10; }
	.bmtpost .bp-cta{ flex-direction:column; align-items:flex-start; }
	.bmtpost .bp-related__grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
	.bmtpost *{ transition-duration:.001ms !important; }
	.bb-progress span{ transition:none; }
}
