/* ============================================================
		   Crew Club Single Post — "Field Dispatches" reader
		   Tokens scoped to .bsp-page. No looping animations.
		   ============================================================ */
		@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

		.bsp-page {
			--bsp-coral-50:  #FFF1ED;
			--bsp-coral-100: #FFDDD2;
			--bsp-coral-400: #FF6D43;
			--bsp-coral-500: #FF5A36;
			--bsp-coral-600: #E84320;
			--bsp-coral-700: #B82F12;
			--bsp-navy-100:  #E5EAF3;
			--bsp-navy-200:  #C2CCDF;
			--bsp-navy-300:  #8E9DBE;
			--bsp-navy-400:  #4D6394;
			--bsp-navy-500:  #2A3F6B;
			--bsp-navy-600:  #1A2B53;
			--bsp-navy-700:  #111E40;
			--bsp-navy-800:  #0F1B3A;
			--bsp-navy-900:  #070D22;
			--bsp-sun-300:   #FFD23F;
			--bsp-cream-50:  #FFFCF7;
			--bsp-cream-100: #FFF8F0;
			--bsp-cream-200: #FAF0E2;
			--bsp-gray-100:  #EFF1F5;
			--bsp-gray-200:  #E0E3EB;
			--bsp-gray-300:  #C5CAD6;
			--bsp-gray-400:  #9099A8;
			--bsp-gray-500:  #6B7383;
			--bsp-gray-600:  #4A5160;

			--bsp-font-display: 'Sora', system-ui, -apple-system, sans-serif;
			--bsp-font-body:    'Inter Tight', system-ui, -apple-system, sans-serif;
			--bsp-font-mono:    'JetBrains Mono', ui-monospace, monospace;

			--bsp-shadow-sm: 0 2px 10px rgba(15,27,58,.06);
			--bsp-shadow-md: 0 8px 24px rgba(15,27,58,.10);
			--bsp-shadow-lg: 0 24px 56px rgba(15,27,58,.18);

			--bsp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

			background: var(--bsp-cream-100);
			color: var(--bsp-navy-800);
			font-family: var(--bsp-font-body);
			-webkit-font-smoothing: antialiased;
			overflow-x: clip;
		}
		.bsp-page * { box-sizing: border-box; }
		.bsp-page a { color: inherit; text-decoration: none; }

		.bsp-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

		/* ---------- Reading progress (scroll-tied, not a loop) ---------- */
		.bsp-progress {
			position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1200;
			background: transparent; pointer-events: none;
		}
		.bsp-progress__bar {
			height: 100%; width: 0%;
			background: linear-gradient(90deg, var(--bsp-coral-500), var(--bsp-sun-300));
			transform-origin: left center;
		}

		/* ---------- Eyebrow ---------- */
		.bsp-eyebrow {
			display: inline-flex; align-items: center; gap: 10px;
			font-family: var(--bsp-font-mono);
			font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
			color: var(--bsp-coral-600); margin: 0;
		}
		.bsp-eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--bsp-coral-500); }

		/* ===========================================================
		   HERO / MASTHEAD
		   =========================================================== */
		.bsp-hero {
			position: relative; background: #fff;
			border-bottom: 1px solid var(--bsp-gray-200);
			padding: clamp(32px, 5vw, 56px) 0 clamp(36px, 5vw, 60px);
			overflow: hidden; isolation: isolate;
		}
		.bsp-hero::before {
			content: ""; position: absolute; inset: 0; z-index: -1;
			background-image: radial-gradient(circle, rgba(255,90,54,.18) 1.4px, transparent 1.6px);
			background-size: 22px 22px;
			-webkit-mask-image: radial-gradient(ellipse 55% 75% at 110% -10%, #000 0%, transparent 60%);
			        mask-image: radial-gradient(ellipse 55% 75% at 110% -10%, #000 0%, transparent 60%);
		}

		/* Breadcrumb */
		.bsp-crumbs {
			display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
			font-family: var(--bsp-font-mono); font-size: 11.5px; font-weight: 500;
			letter-spacing: 0.06em; text-transform: uppercase; color: var(--bsp-gray-400);
			margin-bottom: 28px;
		}
		.bsp-crumbs a { color: var(--bsp-gray-500); transition: color 160ms var(--bsp-ease); }
		.bsp-crumbs a:hover { color: var(--bsp-coral-600); }
		.bsp-crumbs__sep { color: var(--bsp-gray-300); }
		.bsp-crumbs__current { color: var(--bsp-navy-700); max-width: 36ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

		.bsp-hero__cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
		.bsp-hero__cat {
			font-family: var(--bsp-font-mono); font-size: 11px; font-weight: 600;
			letter-spacing: 0.1em; text-transform: uppercase;
			padding: 7px 14px; border-radius: 999px;
			background: var(--bsp-coral-50); color: var(--bsp-coral-700);
			border: 1px solid var(--bsp-coral-100);
			transition: background-color 160ms var(--bsp-ease), color 160ms var(--bsp-ease);
		}
		.bsp-hero__cat:hover { background: var(--bsp-coral-500); color: #fff; border-color: var(--bsp-coral-500); }

		.bsp-hero__title {
			font-family: var(--bsp-font-display); font-weight: 800;
			font-size: clamp(2rem, 4.6vw, 3.5rem);
			line-height: 1.04; letter-spacing: -0.03em;
			margin: 0; max-width: 20ch; text-wrap: balance; color: var(--bsp-navy-800);
		}
		.bsp-hero__lead {
			font-size: clamp(1.0625rem, 1.4vw, 1.3125rem); line-height: 1.6;
			color: var(--bsp-gray-600); max-width: 64ch; margin: 22px 0 0;
		}

		/* Meta byline */
		.bsp-hero__meta {
			display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
			margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--bsp-gray-200);
		}
		.bsp-hero__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--bsp-gray-300); }
		.bsp-hero__metaitem {
			font-family: var(--bsp-font-mono); font-size: 12px; letter-spacing: 0.04em;
			color: var(--bsp-gray-500);
		}

		/* ---------- Featured image ---------- */
		.bsp-featured {
			max-width: 1180px; margin: clamp(-24px, -2vw, -16px) auto 0; padding: 0 24px;
			position: relative; z-index: 2;
		}
		.bsp-featured__frame {
			border-radius: 22px; overflow: hidden; box-shadow: var(--bsp-shadow-lg);
			border: 1px solid var(--bsp-gray-200); background: var(--bsp-navy-700);
			aspect-ratio: 21 / 9;
		}
		.bsp-featured__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

		/* ===========================================================
		   BODY — sticky TOC + prose
		   =========================================================== */
		.bsp-body { padding: clamp(44px, 6vw, 76px) 0 clamp(64px, 8vw, 104px); }
		.bsp-layout {
			display: grid;
			grid-template-columns: 248px minmax(0, 1fr);
			gap: clamp(36px, 5vw, 72px);
			align-items: start;
		}

		/* TOC */
		.bsp-toc {
			position: sticky; top: 96px; align-self: start;
		}
		.bsp-toc__inner {
			border-left: 2px solid var(--bsp-gray-200);
			padding-left: 20px;
		}
		.bsp-toc__label {
			font-family: var(--bsp-font-mono); font-size: 11px; font-weight: 600;
			letter-spacing: 0.16em; text-transform: uppercase; color: var(--bsp-gray-400);
			margin: 0 0 16px;
		}
		.bsp-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
		.bsp-toc__item a {
			display: block; padding: 6px 0; font-size: 13.5px; line-height: 1.4;
			color: var(--bsp-gray-500); transition: color 160ms var(--bsp-ease);
			border-left: 2px solid transparent; margin-left: -22px; padding-left: 20px;
		}
		.bsp-toc__item--sub a { padding-left: 36px; font-size: 12.5px; }
		.bsp-toc__item a:hover { color: var(--bsp-navy-800); }
		.bsp-toc__item a.is-active {
			color: var(--bsp-coral-600); font-weight: 600;
			border-left-color: var(--bsp-coral-500);
		}

		/* Mobile TOC (collapsible) */
		.bsp-toc-mobile { display: none; margin-bottom: 32px; }
		.bsp-toc-mobile details {
			border: 1px solid var(--bsp-gray-200); border-radius: 14px;
			background: #fff; box-shadow: var(--bsp-shadow-sm); overflow: hidden;
		}
		.bsp-toc-mobile summary {
			list-style: none; cursor: pointer; padding: 15px 18px;
			display: flex; align-items: center; justify-content: space-between; gap: 12px;
			font-family: var(--bsp-font-mono); font-size: 12px; font-weight: 600;
			letter-spacing: 0.1em; text-transform: uppercase; color: var(--bsp-navy-700);
		}
		.bsp-toc-mobile summary::-webkit-details-marker { display: none; }
		.bsp-toc-mobile summary .bsp-chev { transition: transform 220ms var(--bsp-ease); }
		.bsp-toc-mobile details[open] summary .bsp-chev { transform: rotate(180deg); }
		.bsp-toc-mobile ol { list-style: none; margin: 0; padding: 4px 18px 18px; }
		.bsp-toc-mobile li a { display: block; padding: 8px 0; font-size: 14px; color: var(--bsp-gray-600); border-top: 1px solid var(--bsp-gray-100); }
		.bsp-toc-mobile li:first-child a { border-top: 0; }
		.bsp-toc-mobile li.bsp-toc__item--sub a { padding-left: 16px; font-size: 13px; }

		/* ===========================================================
		   PROSE
		   =========================================================== */
		.bsp-prose { max-width: 720px; }
		.bsp-prose > * + * { margin-top: 1.45em; }
		.bsp-prose p {
			font-size: 1.125rem; line-height: 1.75; color: var(--bsp-navy-700); margin: 0;
		}
		.bsp-prose strong { color: var(--bsp-navy-900); font-weight: 700; }
		.bsp-prose a {
			color: var(--bsp-coral-600); font-weight: 600;
			text-decoration: underline; text-decoration-color: var(--bsp-coral-100);
			text-underline-offset: 3px; text-decoration-thickness: 2px;
			transition: text-decoration-color 160ms var(--bsp-ease), color 160ms var(--bsp-ease);
		}
		.bsp-prose a:hover { color: var(--bsp-coral-700); text-decoration-color: var(--bsp-coral-500); }

		.bsp-prose h2 {
			font-family: var(--bsp-font-display); font-weight: 800;
			font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -0.02em;
			color: var(--bsp-navy-800); margin: 2em 0 0; scroll-margin-top: 96px; text-wrap: balance;
			padding-top: 0.6em; position: relative;
		}
		.bsp-prose h2::before {
			content: ""; display: block; width: 48px; height: 4px; border-radius: 2px;
			background: var(--bsp-coral-500); margin-bottom: 0.7em;
		}
		.bsp-prose h3 {
			font-family: var(--bsp-font-display); font-weight: 700;
			font-size: clamp(1.2rem, 1.9vw, 1.4rem); line-height: 1.25; letter-spacing: -0.015em;
			color: var(--bsp-navy-800); margin: 1.8em 0 0; scroll-margin-top: 96px;
		}
		.bsp-prose h4 {
			font-family: var(--bsp-font-display); font-weight: 700; font-size: 1.075rem;
			color: var(--bsp-navy-800); margin: 1.6em 0 0;
		}

		.bsp-prose ul, .bsp-prose ol { margin: 0; padding-left: 0; list-style: none; }
		.bsp-prose li {
			position: relative; padding-left: 30px; margin-top: 0.7em;
			font-size: 1.0625rem; line-height: 1.7; color: var(--bsp-navy-700);
		}
		.bsp-prose ul li::before {
			content: ""; position: absolute; left: 4px; top: 0.7em;
			width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg);
			background: var(--bsp-coral-500);
		}
		.bsp-prose ol { counter-reset: bsp-ol; }
		.bsp-prose ol li { counter-increment: bsp-ol; }
		.bsp-prose ol li::before {
			content: counter(bsp-ol); position: absolute; left: 0; top: 0.05em;
			width: 22px; height: 22px; border-radius: 6px;
			background: var(--bsp-navy-800); color: #fff;
			font-family: var(--bsp-font-mono); font-size: 11px; font-weight: 600;
			display: flex; align-items: center; justify-content: center;
		}
		.bsp-prose li > ul, .bsp-prose li > ol { margin-top: 0.5em; }

		.bsp-prose blockquote {
			margin: 1.8em 0; padding: 4px 0 4px 26px;
			border-left: 4px solid var(--bsp-coral-500);
			font-family: var(--bsp-font-display); font-weight: 600;
			font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.4;
			color: var(--bsp-navy-800); font-style: normal;
		}
		.bsp-prose blockquote p { font-size: inherit; color: inherit; }
		.bsp-prose blockquote cite {
			display: block; margin-top: 0.6em; font-family: var(--bsp-font-mono);
			font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
			color: var(--bsp-gray-400); font-style: normal; font-weight: 500;
		}

		.bsp-prose figure, .bsp-prose .wp-block-image { margin: 1.8em 0; }
		.bsp-prose img {
			max-width: 100%; height: auto; display: block;
			border-radius: 14px; box-shadow: var(--bsp-shadow-md);
		}
		.bsp-prose figcaption {
			margin-top: 12px; font-family: var(--bsp-font-mono);
			font-size: 12px; letter-spacing: 0.03em; color: var(--bsp-gray-400); text-align: center;
		}
		.bsp-prose .wp-block-columns {
			display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
			gap: 16px; margin: 1.8em 0;
		}
		.bsp-prose .wp-block-columns .wp-block-column { min-width: 0; }
		.bsp-prose .wp-block-columns figure,
		.bsp-prose .wp-block-columns .wp-block-image { margin: 0; }
		.bsp-prose .wp-block-columns img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

		.bsp-prose hr {
			border: 0; height: 1px; background: var(--bsp-gray-200); margin: 2.4em 0;
		}
		.bsp-prose code {
			font-family: var(--bsp-font-mono); font-size: 0.875em;
			background: var(--bsp-navy-100); color: var(--bsp-navy-800);
			padding: 0.15em 0.45em; border-radius: 6px;
		}
		.bsp-prose pre {
			background: var(--bsp-navy-800); color: #fff; padding: 20px 22px;
			border-radius: 14px; overflow-x: auto; font-family: var(--bsp-font-mono); font-size: 13.5px;
		}
		.bsp-prose pre code { background: none; color: inherit; padding: 0; }
		.bsp-prose table {
			width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 1.8em 0;
		}
		.bsp-prose th, .bsp-prose td { padding: 12px 14px; border-bottom: 1px solid var(--bsp-gray-200); text-align: left; }
		.bsp-prose th { font-family: var(--bsp-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bsp-gray-500); }

		/* ===========================================================
		   ARTICLE FOOTER — tags + share
		   =========================================================== */
		.bsp-foot {
			max-width: 720px; margin-top: clamp(40px, 5vw, 64px);
			padding-top: 28px; border-top: 1px solid var(--bsp-gray-200);
			display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
		}
		.bsp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
		.bsp-tag {
			font-family: var(--bsp-font-mono); font-size: 11.5px; font-weight: 500;
			letter-spacing: 0.04em; color: var(--bsp-navy-600);
			padding: 6px 12px; border-radius: 999px; border: 1px solid var(--bsp-gray-200);
			background: #fff; transition: border-color 160ms var(--bsp-ease), color 160ms var(--bsp-ease);
		}
		.bsp-tag::before { content: "#"; color: var(--bsp-coral-500); margin-right: 1px; }
		.bsp-tag:hover { border-color: var(--bsp-navy-800); color: var(--bsp-navy-900); }

		.bsp-share { display: flex; align-items: center; gap: 8px; }
		.bsp-share__label {
			font-family: var(--bsp-font-mono); font-size: 11px; font-weight: 600;
			letter-spacing: 0.12em; text-transform: uppercase; color: var(--bsp-gray-400); margin-right: 4px;
		}
		.bsp-share a, .bsp-share button {
			display: inline-flex; align-items: center; justify-content: center;
			width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
			border: 1px solid var(--bsp-gray-200); background: #fff; color: var(--bsp-navy-700);
			transition: transform 140ms var(--bsp-ease), background-color 160ms var(--bsp-ease), color 160ms var(--bsp-ease), border-color 160ms var(--bsp-ease);
		}
		.bsp-share a:hover, .bsp-share button:hover {
			background: var(--bsp-navy-800); color: #fff; border-color: var(--bsp-navy-800); transform: translateY(-2px);
		}
		.bsp-share a:active, .bsp-share button:active { transform: scale(0.94); }
		.bsp-share svg { width: 17px; height: 17px; }
		.bsp-share__copied {
			font-family: var(--bsp-font-mono); font-size: 11px; letter-spacing: 0.06em;
			color: var(--bsp-coral-600); opacity: 0; transition: opacity 200ms var(--bsp-ease);
		}
		.bsp-share__copied.is-shown { opacity: 1; }

		/* ===========================================================
		   CTA BAND
		   =========================================================== */
		.bsp-cta { padding: clamp(56px, 8vw, 96px) 0; }
		.bsp-cta__card {
			position: relative; overflow: hidden; isolation: isolate;
			background: var(--bsp-navy-800); color: #fff;
			border-radius: 28px; padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 64px);
			text-align: center;
		}
		.bsp-cta__card::before {
			content: ""; position: absolute; inset: 0; z-index: -1;
			background-image: radial-gradient(circle, rgba(255,90,54,.30) 1.5px, transparent 1.7px);
			background-size: 24px 24px;
			-webkit-mask-image: radial-gradient(ellipse 60% 80% at 100% 0%, #000 0%, transparent 60%);
			        mask-image: radial-gradient(ellipse 60% 80% at 100% 0%, #000 0%, transparent 60%);
			opacity: .5;
		}
		.bsp-cta__eyebrow {
			font-family: var(--bsp-font-mono); font-size: 12px; font-weight: 600;
			letter-spacing: 0.16em; text-transform: uppercase; color: var(--bsp-sun-300); margin: 0 0 18px;
		}
		.bsp-cta__title {
			font-family: var(--bsp-font-display); font-weight: 800;
			font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.08; letter-spacing: -0.025em;
			margin: 0 auto 16px; max-width: 18ch; text-wrap: balance;
		}
		.bsp-cta__text { font-size: 1.0625rem; line-height: 1.6; color: var(--bsp-navy-100); max-width: 52ch; margin: 0 auto 30px; }
		.bsp-cta__btn {
			display: inline-flex; align-items: center; gap: 10px;
			font-family: var(--bsp-font-body); font-weight: 700; font-size: 16px;
			padding: 15px 30px; border-radius: 999px;
			background: var(--bsp-coral-500); color: #fff;
			transition: background-color 200ms var(--bsp-ease), transform 120ms var(--bsp-ease);
		}
		.bsp-cta__btn:hover { background: var(--bsp-coral-600); transform: translateY(-2px); }
		.bsp-cta__btn:active { transform: scale(0.98); }
		.bsp-cta__btn:hover .bsp-arrow { transform: translateX(4px); }
		.bsp-arrow { width: 18px; height: 18px; transition: transform 200ms var(--bsp-ease); }

		/* ===========================================================
		   RELATED POSTS
		   =========================================================== */
		.bsp-related { padding: 0 0 clamp(64px, 9vw, 110px); }
		.bsp-related__head {
			display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
			margin-bottom: 32px;
		}
		.bsp-related__title {
			font-family: var(--bsp-font-display); font-weight: 800;
			font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.02em; margin: 0; color: var(--bsp-navy-800);
		}
		.bsp-related__all {
			font-family: var(--bsp-font-body); font-weight: 700; font-size: 14px;
			color: var(--bsp-coral-600); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
		}
		.bsp-related__all svg { width: 15px; height: 15px; transition: transform 200ms var(--bsp-ease); }
		.bsp-related__all:hover svg { transform: translateX(4px); }
		.bsp-related__grid {
			display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
			gap: clamp(24px, 3vw, 36px);
		}
		.bsp-rcard {
			display: flex; flex-direction: column; background: #fff;
			border: 1px solid var(--bsp-gray-200); border-radius: 18px; overflow: hidden;
			transition: transform 220ms var(--bsp-ease), box-shadow 220ms var(--bsp-ease), border-color 220ms var(--bsp-ease);
		}
		.bsp-rcard:hover { transform: translateY(-4px); box-shadow: var(--bsp-shadow-md); border-color: var(--bsp-gray-300); }
		.bsp-rcard__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bsp-navy-700); }
		.bsp-rcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--bsp-ease); }
		.bsp-rcard:hover .bsp-rcard__media img { transform: scale(1.05); }
		.bsp-rcard__media--placeholder { background: radial-gradient(circle at 70% 28%, rgba(255,90,54,.32), transparent 56%), var(--bsp-navy-700); }
		.bsp-rcard__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 22px 22px 24px; }
		.bsp-rcard__cat {
			align-self: flex-start; font-family: var(--bsp-font-mono); font-size: 11px; font-weight: 600;
			letter-spacing: 0.12em; text-transform: uppercase; color: var(--bsp-coral-600); margin-bottom: 12px;
		}
		.bsp-rcard__title {
			font-family: var(--bsp-font-display); font-weight: 700; font-size: 1.25rem;
			line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 14px; color: var(--bsp-navy-800); text-wrap: balance;
		}
		.bsp-rcard:hover .bsp-rcard__title { color: var(--bsp-coral-600); }
		.bsp-rcard__meta {
			margin-top: auto; font-family: var(--bsp-font-mono); font-size: 11.5px; letter-spacing: 0.04em;
			color: var(--bsp-gray-400); display: flex; align-items: center; gap: 10px;
		}
		.bsp-rcard__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--bsp-gray-300); }
		.bsp-rcard__link::after { content: ""; position: absolute; inset: 0; }
		.bsp-rcard { position: relative; }

		/* ===========================================================
		   BACK TO TOP
		   =========================================================== */
		/* Literal colors — this button lives outside .bsp-page, so --bsp-* tokens
		   (scoped to .bsp-page) are not in scope here. */
		.bsp-totop {
			position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px);
			z-index: 1100; width: 50px; height: 50px; border-radius: 50%;
			display: inline-flex; align-items: center; justify-content: center;
			background: #0F1B3A; color: #fff; cursor: pointer;
			border: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 56px rgba(15,27,58,.28);
			opacity: 0; visibility: hidden; transform: translateY(12px);
			transition: opacity 220ms cubic-bezier(0.2,0.8,0.2,1), transform 220ms cubic-bezier(0.2,0.8,0.2,1), visibility 220ms cubic-bezier(0.2,0.8,0.2,1), background-color 180ms cubic-bezier(0.2,0.8,0.2,1);
		}
		.bsp-totop.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }
		.bsp-totop:hover { background: #FF5A36; transform: translateY(-3px); }
		.bsp-totop:active { transform: scale(0.94); }
		.bsp-totop svg { width: 20px; height: 20px; }
		@media (prefers-reduced-motion: reduce) { .bsp-totop { transition: opacity 220ms ease, visibility 220ms ease; } }

		/* ===========================================================
		   REVEAL
		   =========================================================== */
		.bsp-reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--bsp-ease), transform 600ms var(--bsp-ease); }
		.bsp-reveal.is-in { opacity: 1; transform: none; }
		@media (prefers-reduced-motion: reduce) {
			.bsp-reveal { opacity: 1; transform: none; transition: none; }
			.bsp-rcard__media img, .bsp-featured__frame img { transition: none; }
		}

		/* ===========================================================
		   RESPONSIVE
		   =========================================================== */
		@media (max-width: 980px) {
			.bsp-layout { grid-template-columns: 1fr; }
			.bsp-toc { display: none; }
			.bsp-toc-mobile { display: block; }
			.bsp-prose, .bsp-foot { max-width: none; }
		}
		@media (max-width: 600px) {
			.bsp-featured__frame { aspect-ratio: 3 / 2; }
			.bsp-foot { flex-direction: column; align-items: flex-start; }
		}