/*
 * BJC Reading Sections v0.10.1
 * Compact long-form reading sections designed to flow one after another.
 */
.bjc-cs-reading {
	--bjc-reading-accent: var(--e-global-color-accent, #6750a4);
	--bjc-reading-media-width: 34%;
	--bjc-reading-media-gap: 20px;
	--bjc-reading-media-offset: 0px;
	--bjc-reading-line-color: var(--bjc-reading-accent);
	--bjc-reading-line-width: 3px;
	--bjc-reading-line-inset: 8%;
	--bjc-reading-line-offset: 10px;
	--bjc-reading-line-radius: 8px;
	position:relative;
	width:100%;
	max-width:none;
	margin:0 0 clamp(.45rem,.8vw,.8rem);
	padding:0;
	color:var(--e-global-color-text,#333);
	background:transparent;
	overflow:hidden;
	box-sizing:border-box;
}
.bjc-cs-reading *,
.bjc-cs-reading *::before,
.bjc-cs-reading *::after { box-sizing:border-box; }

.bjc-cs-reading-inner {
	position:relative;
	z-index:1;
	width:min(100%,1280px);
	margin:0 auto;
	padding:16px 20px;
}

.bjc-cs-reading-copy {
	position:relative;
	z-index:3;
	display:flow-root;
	width:100%;
	min-width:0;
	padding:8px 10px;
}

.bjc-cs-reading-eyebrow {
	margin:0 0 .45rem;
	font-size:.74rem;
	font-weight:800;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--bjc-reading-accent);
}

.bjc-cs-reading-heading {
	margin:0 0 .65rem;
	font-size:clamp(1.65rem,3vw,2.7rem);
	line-height:1.08;
	color:inherit;
}

.bjc-cs-reading-body {
	font-size:1rem;
	line-height:1.68;
	color:inherit;
}
.bjc-cs-reading-body > :first-child { margin-top:0; }
.bjc-cs-reading-body > :last-child { margin-bottom:0; }
.bjc-cs-reading-body p { margin-top:0; margin-bottom:.85em; }
.bjc-cs-reading-body h2,
.bjc-cs-reading-body h3,
.bjc-cs-reading-body h4,
.bjc-cs-reading-body h5,
.bjc-cs-reading-body h6 {
	margin-top:1em;
	margin-bottom:.45em;
	line-height:1.15;
	color:inherit;
}
.bjc-cs-reading-body a {
	color:var(--bjc-reading-accent);
	text-underline-offset:3px;
}
.bjc-cs-reading-body blockquote {
	margin:1em 0;
	padding:.45em 0 .45em 1em;
	border-left:3px solid var(--bjc-reading-accent);
}
.bjc-cs-reading-body ul,
.bjc-cs-reading-body ol { padding-left:1.4em; }

/* Media placement: wrap positions truly behave like editorial floats. */
.bjc-cs-reading-media-shell {
	position:relative;
	z-index:4;
	width:var(--bjc-reading-media-width);
	max-width:100%;
	margin:0;
	padding:0;
	overflow:hidden;
	background:transparent;
}
.bjc-cs-reading-media-left-wrap .bjc-cs-reading-copy > .bjc-cs-reading-media-shell {
	float:left;
	margin:0 var(--bjc-reading-media-gap) .55rem 0;
}
.bjc-cs-reading-media-right-wrap .bjc-cs-reading-copy > .bjc-cs-reading-media-shell {
	float:right;
	margin:0 0 .55rem var(--bjc-reading-media-gap);
}
.bjc-cs-reading-media-top .bjc-cs-reading-media-shell,
.bjc-cs-reading-media-bottom .bjc-cs-reading-media-shell {
	width:min(var(--bjc-reading-media-width),100%);
	margin-inline:auto;
}
.bjc-cs-reading-media-top .bjc-cs-reading-media-shell { margin-bottom:var(--bjc-reading-media-gap); }
.bjc-cs-reading-media-bottom .bjc-cs-reading-media-shell { margin-top:var(--bjc-reading-media-gap); }


/* Wrapped media can start further down a long passage instead of always sitting at the top. */
.bjc-cs-reading-media-left-wrap.bjc-cs-reading-media-v-quarter .bjc-cs-reading-copy > .bjc-cs-reading-media-shell,
.bjc-cs-reading-media-right-wrap.bjc-cs-reading-media-v-quarter .bjc-cs-reading-copy > .bjc-cs-reading-media-shell {
	margin-top:calc(clamp(28px,6vw,90px) + var(--bjc-reading-media-offset));
}
.bjc-cs-reading-media-left-wrap.bjc-cs-reading-media-v-middle .bjc-cs-reading-copy > .bjc-cs-reading-media-shell,
.bjc-cs-reading-media-right-wrap.bjc-cs-reading-media-v-middle .bjc-cs-reading-copy > .bjc-cs-reading-media-shell {
	margin-top:calc(clamp(60px,12vw,180px) + var(--bjc-reading-media-offset));
}
.bjc-cs-reading-media-left-wrap.bjc-cs-reading-media-v-top .bjc-cs-reading-copy > .bjc-cs-reading-media-shell,
.bjc-cs-reading-media-right-wrap.bjc-cs-reading-media-v-top .bjc-cs-reading-copy > .bjc-cs-reading-media-shell {
	margin-top:var(--bjc-reading-media-offset);
}

/* Shared media contract: direct BJC media only, never broad nested shortcode images. */
.bjc-cs-reading-media-shell > .bjc-cs-media {
	display:block;
	width:100%;
	max-width:none;
	margin:0;
	padding:0;
}
.bjc-cs-reading-media-shell > .bjc-cs-media:not(.bjc-cs-embed) > img,
.bjc-cs-reading-media-shell > .bjc-cs-self-video > video,
.bjc-cs-reading-media-shell > .bjc-cs-embed > iframe,
.bjc-cs-reading-media-shell > .bjc-cs-embed > video {
	display:block;
	width:100%;
	max-width:100%;
	height:auto;
	margin:0;
	padding:0;
	border:0;
}
.bjc-cs-reading-media-shell > .bjc-cs-embed {
	width:100%;
	max-width:none;
	overflow:visible;
}
.bjc-cs-reading-media-shell > .bjc-cs-embed > iframe,
.bjc-cs-reading-media-shell > .bjc-cs-embed > video {
	aspect-ratio:16/9;
}

/* Media shapes. */
.bjc-cs-reading-shape-natural .bjc-cs-reading-media-shell {
	border-radius:0;
	overflow:visible;
}
.bjc-cs-reading-shape-rounded .bjc-cs-reading-media-shell {
	border-radius:16px;
}
.bjc-cs-reading-shape-square .bjc-cs-reading-media-shell,
.bjc-cs-reading-shape-circle .bjc-cs-reading-media-shell,
.bjc-cs-reading-shape-hexagon .bjc-cs-reading-media-shell,
.bjc-cs-reading-shape-triangle .bjc-cs-reading-media-shell,
.bjc-cs-reading-shape-pentagon .bjc-cs-reading-media-shell,
.bjc-cs-reading-shape-question-mark .bjc-cs-reading-media-shell {
	aspect-ratio:1;
}
.bjc-cs-reading-shape-square .bjc-cs-reading-media-shell,
.bjc-cs-reading-shape-circle .bjc-cs-reading-media-shell,
.bjc-cs-reading-shape-hexagon .bjc-cs-reading-media-shell,
.bjc-cs-reading-shape-triangle .bjc-cs-reading-media-shell,
.bjc-cs-reading-shape-pentagon .bjc-cs-reading-media-shell,
.bjc-cs-reading-shape-question-mark .bjc-cs-reading-media-shell,
.bjc-cs-reading-shape-crooked-left .bjc-cs-reading-media-shell,
.bjc-cs-reading-shape-crooked-right .bjc-cs-reading-media-shell {
	overflow:hidden;
}
.bjc-cs-reading-shape-circle .bjc-cs-reading-media-shell { border-radius:50%; }
.bjc-cs-reading-shape-hexagon .bjc-cs-reading-media-shell {
	clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%);
}
.bjc-cs-reading-shape-triangle .bjc-cs-reading-media-shell {
	clip-path:none;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M50 4 Q53 4 55 9 L96 88 Q99 95 91 96 L9 96 Q1 95 4 88 L45 9 Q47 4 50 4 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M50 4 Q53 4 55 9 L96 88 Q99 95 91 96 L9 96 Q1 95 4 88 L45 9 Q47 4 50 4 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.bjc-cs-reading-shape-pentagon .bjc-cs-reading-media-shell {
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M50 3 L97 38 L82 96 L18 96 L3 38 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M50 3 L97 38 L82 96 L18 96 L3 38 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.bjc-cs-reading-shape-question-mark .bjc-cs-reading-media-shell {
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' d='M22 28C22 10 36 2 53 2c19 0 32 10 32 27 0 14-8 21-18 27-8 5-11 8-11 17H38c0-17 7-23 17-29 8-5 12-8 12-15 0-7-5-12-14-12-10 0-15 6-15 15H22V28zm14 58c0-7 5-12 12-12s12 5 12 12-5 12-12 12-12-5-12-12z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' d='M22 28C22 10 36 2 53 2c19 0 32 10 32 27 0 14-8 21-18 27-8 5-11 8-11 17H38c0-17 7-23 17-29 8-5 12-8 12-15 0-7-5-12-14-12-10 0-15 6-15 15H22V28zm14 58c0-7 5-12 12-12s12 5 12 12-5 12-12 12-12-5-12-12z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.bjc-cs-reading-shape-crooked-left .bjc-cs-reading-media-shell {
	clip-path:polygon(5% 0,100% 4%,95% 100%,0 93%);
}
.bjc-cs-reading-shape-crooked-right .bjc-cs-reading-media-shell {
	clip-path:polygon(0 4%,95% 0,100% 93%,5% 100%);
}

/* For geometric media, direct visual media fills the shape. */
.bjc-cs-reading-shape-square .bjc-cs-reading-media-shell > .bjc-cs-media:not(.bjc-cs-embed),
.bjc-cs-reading-shape-circle .bjc-cs-reading-media-shell > .bjc-cs-media:not(.bjc-cs-embed),
.bjc-cs-reading-shape-hexagon .bjc-cs-reading-media-shell > .bjc-cs-media:not(.bjc-cs-embed),
.bjc-cs-reading-shape-triangle .bjc-cs-reading-media-shell > .bjc-cs-media:not(.bjc-cs-embed) {
	height:100%;
}
.bjc-cs-reading-shape-square .bjc-cs-reading-media-shell > .bjc-cs-media:not(.bjc-cs-embed) > img,
.bjc-cs-reading-shape-circle .bjc-cs-reading-media-shell > .bjc-cs-media:not(.bjc-cs-embed) > img,
.bjc-cs-reading-shape-hexagon .bjc-cs-reading-media-shell > .bjc-cs-media:not(.bjc-cs-embed) > img,
.bjc-cs-reading-shape-triangle .bjc-cs-reading-media-shell > .bjc-cs-media:not(.bjc-cs-embed) > img,
.bjc-cs-reading-shape-square .bjc-cs-reading-media-shell > .bjc-cs-self-video > video,
.bjc-cs-reading-shape-circle .bjc-cs-reading-media-shell > .bjc-cs-self-video > video,
.bjc-cs-reading-shape-hexagon .bjc-cs-reading-media-shell > .bjc-cs-self-video > video,
.bjc-cs-reading-shape-triangle .bjc-cs-reading-media-shell > .bjc-cs-self-video > video {
	width:100%;
	height:100%;
	object-fit:cover;
}


/* Geometric video containers fill the chosen silhouette rather than leaving a widescreen strip inside it. */
.bjc-cs-reading-shape-square .bjc-cs-reading-media-shell > .bjc-cs-embed,
.bjc-cs-reading-shape-circle .bjc-cs-reading-media-shell > .bjc-cs-embed,
.bjc-cs-reading-shape-hexagon .bjc-cs-reading-media-shell > .bjc-cs-embed,
.bjc-cs-reading-shape-triangle .bjc-cs-reading-media-shell > .bjc-cs-embed,
.bjc-cs-reading-shape-square .bjc-cs-reading-media-shell > .bjc-cs-self-video,
.bjc-cs-reading-shape-circle .bjc-cs-reading-media-shell > .bjc-cs-self-video,
.bjc-cs-reading-shape-hexagon .bjc-cs-reading-media-shell > .bjc-cs-self-video,
.bjc-cs-reading-shape-triangle .bjc-cs-reading-media-shell > .bjc-cs-self-video {
	width:100%;
	height:100%;
}
.bjc-cs-reading-shape-square .bjc-cs-reading-media-shell > .bjc-cs-embed > iframe,
.bjc-cs-reading-shape-circle .bjc-cs-reading-media-shell > .bjc-cs-embed > iframe,
.bjc-cs-reading-shape-hexagon .bjc-cs-reading-media-shell > .bjc-cs-embed > iframe,
.bjc-cs-reading-shape-triangle .bjc-cs-reading-media-shell > .bjc-cs-embed > iframe,
.bjc-cs-reading-shape-square .bjc-cs-reading-media-shell > .bjc-cs-embed > video,
.bjc-cs-reading-shape-circle .bjc-cs-reading-media-shell > .bjc-cs-embed > video,
.bjc-cs-reading-shape-hexagon .bjc-cs-reading-media-shell > .bjc-cs-embed > video,
.bjc-cs-reading-shape-triangle .bjc-cs-reading-media-shell > .bjc-cs-embed > video {
	width:100%;
	height:100%;
	aspect-ratio:auto;
}


/* v0.10.1 additional geometric shapes use the same direct-media fill contract. */
.bjc-cs-reading-shape-pentagon .bjc-cs-reading-media-shell > .bjc-cs-media:not(.bjc-cs-embed),
.bjc-cs-reading-shape-question-mark .bjc-cs-reading-media-shell > .bjc-cs-media:not(.bjc-cs-embed),
.bjc-cs-reading-shape-pentagon .bjc-cs-reading-media-shell > .bjc-cs-embed,
.bjc-cs-reading-shape-question-mark .bjc-cs-reading-media-shell > .bjc-cs-embed,
.bjc-cs-reading-shape-pentagon .bjc-cs-reading-media-shell > .bjc-cs-self-video,
.bjc-cs-reading-shape-question-mark .bjc-cs-reading-media-shell > .bjc-cs-self-video {
	width:100%;
	height:100%;
}
.bjc-cs-reading-shape-pentagon .bjc-cs-reading-media-shell > .bjc-cs-media:not(.bjc-cs-embed) > img,
.bjc-cs-reading-shape-question-mark .bjc-cs-reading-media-shell > .bjc-cs-media:not(.bjc-cs-embed) > img,
.bjc-cs-reading-shape-pentagon .bjc-cs-reading-media-shell > .bjc-cs-self-video > video,
.bjc-cs-reading-shape-question-mark .bjc-cs-reading-media-shell > .bjc-cs-self-video > video,
.bjc-cs-reading-shape-pentagon .bjc-cs-reading-media-shell > .bjc-cs-embed > iframe,
.bjc-cs-reading-shape-question-mark .bjc-cs-reading-media-shell > .bjc-cs-embed > iframe,
.bjc-cs-reading-shape-pentagon .bjc-cs-reading-media-shell > .bjc-cs-embed > video,
.bjc-cs-reading-shape-question-mark .bjc-cs-reading-media-shell > .bjc-cs-embed > video {
	width:100%;
	height:100%;
	object-fit:cover;
	aspect-ratio:auto;
}

/* 1. Clean Reading */
.bjc-cs-reading-clean-reading {
	background:transparent;
}
.bjc-cs-reading-clean-reading .bjc-cs-reading-inner {
	border-top:1px solid color-mix(in srgb,var(--bjc-reading-accent) 22%,transparent);
}

/* 2. Editorial Note */
.bjc-cs-reading-editorial-note {
	background:color-mix(in srgb,var(--bjc-reading-accent) 4%,transparent);
}
.bjc-cs-reading-editorial-note .bjc-cs-reading-copy {
	border-left:3px solid var(--bjc-reading-accent);
	padding-left:clamp(14px,2vw,26px);
}

/* 3. Colour Wash */
.bjc-cs-reading-colour-wash {
	background:
		radial-gradient(circle at 8% 12%,color-mix(in srgb,var(--bjc-reading-accent) 20%,transparent),transparent 34%),
		linear-gradient(120deg,color-mix(in srgb,var(--bjc-reading-accent) 9%,transparent),transparent 62%);
}

/* 4. Margin Rule */
.bjc-cs-reading-margin-rule .bjc-cs-reading-inner::before {
	content:"";
	position:absolute;
	left:8px;
	top:12%;
	bottom:12%;
	width:3px;
	background:var(--bjc-reading-accent);
	opacity:.72;
}
.bjc-cs-reading-margin-rule .bjc-cs-reading-inner { padding-left:clamp(24px,3vw,42px); }

/* 5. Soft Journal */
.bjc-cs-reading-soft-journal {
	background:color-mix(in srgb,var(--bjc-reading-accent) 7%,#fff);
	border-radius:18px;
	box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.bjc-cs-reading-soft-journal .bjc-cs-reading-copy {
	background:rgba(255,255,255,.38);
	border-radius:12px;
}

/* 6. Angled Story */
.bjc-cs-reading-angled-story::before {
	content:"";
	position:absolute;
	inset:0;
	background:color-mix(in srgb,var(--bjc-reading-accent) 9%,transparent);
	clip-path:polygon(0 0,96% 0,100% 100%,4% 100%);
	pointer-events:none;
}
.bjc-cs-reading-angled-story .bjc-cs-reading-inner {
	padding-inline:clamp(24px,4vw,54px);
}

/* 7. Highlight Band */
.bjc-cs-reading-highlight-band::before {
	content:"";
	position:absolute;
	left:-2%;
	right:-2%;
	top:34%;
	height:36%;
	background:color-mix(in srgb,var(--bjc-reading-accent) 12%,transparent);
	transform:rotate(-1deg);
	pointer-events:none;
}

/* 8. Paper Panel */
.bjc-cs-reading-paper-panel {
	background:
		linear-gradient(90deg,color-mix(in srgb,var(--bjc-reading-accent) 5%,#fff),#fff 22%,#fff 78%,color-mix(in srgb,var(--bjc-reading-accent) 5%,#fff));
	border:1px solid color-mix(in srgb,var(--bjc-reading-accent) 18%,#ddd);
	box-shadow:0 5px 18px rgba(0,0,0,.055);
}
.bjc-cs-reading-paper-panel .bjc-cs-reading-inner::after {
	content:"";
	position:absolute;
	left:22px;
	right:22px;
	bottom:5px;
	height:1px;
	background:linear-gradient(90deg,transparent,var(--bjc-reading-accent),transparent);
	opacity:.24;
}


/* 9. Dark Feature — intentionally bold, high-contrast editorial interruption. */
.bjc-cs-reading-dark-feature {
	background:#17191d;
	color:#f7f3eb;
	border-radius:18px;
}
.bjc-cs-reading-dark-feature .bjc-cs-reading-copy {
	background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
	border:1px solid rgba(255,255,255,.12);
	border-radius:14px;
}
.bjc-cs-reading-dark-feature .bjc-cs-reading-eyebrow,
.bjc-cs-reading-dark-feature .bjc-cs-reading-body a { color:var(--bjc-reading-accent); }

/* 10. Split Colour — strong coloured slab cutting through the reading panel. */
.bjc-cs-reading-split-colour {
	background:
		linear-gradient(90deg,color-mix(in srgb,var(--bjc-reading-accent) 28%,#fff) 0 27%,#fff 27% 100%);
	border-radius:10px;
}
.bjc-cs-reading-split-colour .bjc-cs-reading-copy {
	background:rgba(255,255,255,.76);
	box-shadow:0 8px 24px rgba(0,0,0,.07);
	border-radius:8px;
}

/* 11. Poster Story — oversized graphic top/bottom bars, deliberately less conventional. */
.bjc-cs-reading-poster-story {
	background:color-mix(in srgb,var(--bjc-reading-accent) 10%,#111);
	color:#fff;
	border-top:clamp(10px,1.8vw,24px) solid var(--bjc-reading-accent);
	border-bottom:clamp(4px,.8vw,10px) solid var(--bjc-reading-accent);
}
.bjc-cs-reading-poster-story .bjc-cs-reading-heading {
	font-size:clamp(2rem,4.5vw,4.8rem);
	line-height:.96;
	letter-spacing:-.035em;
}
.bjc-cs-reading-poster-story .bjc-cs-reading-copy {
	border-left:1px solid rgba(255,255,255,.24);
}

/* 12. Floating Paper — separate paper sheet with visible offset accent layer. */
.bjc-cs-reading-floating-paper {
	overflow:visible;
	background:transparent;
	padding:7px 9px 10px 6px;
}
.bjc-cs-reading-floating-paper::before {
	content:"";
	position:absolute;
	inset:10px 3px 3px 12px;
	background:var(--bjc-reading-accent);
	opacity:.22;
	transform:rotate(.7deg);
	border-radius:8px;
	z-index:0;
}
.bjc-cs-reading-floating-paper .bjc-cs-reading-inner {
	background:#fff;
	border:1px solid rgba(0,0,0,.12);
	box-shadow:0 12px 28px rgba(0,0,0,.10);
	transform:rotate(-.25deg);
}

/* Configurable independent vertical line decoration. */
.bjc-cs-reading-vertical-line {
	position:absolute;
	z-index:6;
	top:var(--bjc-reading-line-inset);
	bottom:var(--bjc-reading-line-inset);
	width:var(--bjc-reading-line-width);
	border-radius:var(--bjc-reading-line-radius);
	pointer-events:none;
}
.bjc-cs-reading-line-side-left .bjc-cs-reading-vertical-line { left:var(--bjc-reading-line-offset); }
.bjc-cs-reading-line-side-right .bjc-cs-reading-vertical-line { right:var(--bjc-reading-line-offset); }
.bjc-cs-reading-line-solid .bjc-cs-reading-vertical-line { background:var(--bjc-reading-line-color); }
.bjc-cs-reading-line-double .bjc-cs-reading-vertical-line {
	width:calc(var(--bjc-reading-line-width) * 3);
	border-left:var(--bjc-reading-line-width) solid var(--bjc-reading-line-color);
	border-right:var(--bjc-reading-line-width) solid var(--bjc-reading-line-color);
}
.bjc-cs-reading-line-dashed .bjc-cs-reading-vertical-line {
	background:repeating-linear-gradient(to bottom,var(--bjc-reading-line-color) 0 14px,transparent 14px 24px);
}
.bjc-cs-reading-line-dotted .bjc-cs-reading-vertical-line {
	background:repeating-radial-gradient(circle at 50% calc(var(--bjc-reading-line-width) / 2),var(--bjc-reading-line-color) 0 calc(var(--bjc-reading-line-width) / 2),transparent calc(var(--bjc-reading-line-width) / 2 + 1px) calc(var(--bjc-reading-line-width) * 2.4));
}
.bjc-cs-reading-line-tapered .bjc-cs-reading-vertical-line {
	background:linear-gradient(to bottom,transparent,var(--bjc-reading-line-color) 16%,var(--bjc-reading-line-color) 84%,transparent);
}

/* Standard Reading action/link. */
.bjc-cs-reading-action {
	clear:both;
	margin-top:1rem;
}
.bjc-cs-reading-action-left { text-align:left; }
.bjc-cs-reading-action-center { text-align:center; }
.bjc-cs-reading-action-right { text-align:right; }
.bjc-cs-reading-action-link {
	display:inline-block;
	color:var(--bjc-reading-accent);
	font-weight:700;
	text-decoration:none;
}
.bjc-cs-reading-button {
	display:inline-block;
	padding:.72em 1.25em;
	border:2px solid var(--bjc-reading-accent);
	font-weight:700;
	line-height:1.2;
	text-decoration:none;
	transition:transform .15s ease,opacity .15s ease;
}
.bjc-cs-reading-button:hover { transform:translateY(-1px); }
.bjc-cs-reading-button-filled {
	background:var(--bjc-reading-accent);
	color:#fff;
}
.bjc-cs-reading-button-outline {
	background:transparent;
	color:var(--bjc-reading-accent);
}
.bjc-cs-reading-button-soft {
	background:color-mix(in srgb,var(--bjc-reading-accent) 13%,transparent);
	color:var(--bjc-reading-accent);
	border-color:transparent;
}
.bjc-cs-reading-button-pill {
	background:var(--bjc-reading-accent);
	color:#fff;
	border-radius:999px;
}

/* Optional decorations independent of the base style. */
.bjc-cs-reading-decoration {
	position:absolute;
	z-index:0;
	inset:0;
	pointer-events:none;
	overflow:hidden;
}
.bjc-cs-reading-decor-none .bjc-cs-reading-decoration { display:none; }

.bjc-cs-reading-decor-corner-lines .bjc-cs-reading-decoration::before,
.bjc-cs-reading-decor-corner-lines .bjc-cs-reading-decoration::after {
	content:"";
	position:absolute;
	width:54px;
	height:54px;
	opacity:.5;
}
.bjc-cs-reading-decor-corner-lines .bjc-cs-reading-decoration::before {
	left:8px; top:8px;
	border-left:2px solid var(--bjc-reading-accent);
	border-top:2px solid var(--bjc-reading-accent);
}
.bjc-cs-reading-decor-corner-lines .bjc-cs-reading-decoration::after {
	right:8px; bottom:8px;
	border-right:2px solid var(--bjc-reading-accent);
	border-bottom:2px solid var(--bjc-reading-accent);
}

.bjc-cs-reading-decor-dots .bjc-cs-reading-decoration {
	background-image:radial-gradient(circle,var(--bjc-reading-accent) 1.4px,transparent 1.6px);
	background-size:18px 18px;
	opacity:.13;
}

.bjc-cs-reading-decor-stripe .bjc-cs-reading-decoration::before {
	content:"";
	position:absolute;
	left:0; top:0; bottom:0;
	width:7px;
	background:var(--bjc-reading-accent);
	opacity:.8;
}

.bjc-cs-reading-decor-orbit .bjc-cs-reading-decoration::before,
.bjc-cs-reading-decor-orbit .bjc-cs-reading-decoration::after {
	content:"";
	position:absolute;
	border:1px solid var(--bjc-reading-accent);
	border-radius:50%;
	opacity:.18;
}
.bjc-cs-reading-decor-orbit .bjc-cs-reading-decoration::before {
	width:220px;height:220px;right:-90px;top:-110px;
}
.bjc-cs-reading-decor-orbit .bjc-cs-reading-decoration::after {
	width:110px;height:110px;right:-20px;top:-45px;
}


/* =========================================================
   v0.11.0 additional saleable media silhouettes.
   These are true media masks, with matching shape-outside
   where practical so wrapped text follows the silhouette.
   ========================================================= */

.bjc-cs-reading-shape-arrow-left .bjc-cs-reading-media-shell,
.bjc-cs-reading-shape-arrow-right .bjc-cs-reading-media-shell {
	aspect-ratio:1.35 / 1;
	overflow:hidden;
}
.bjc-cs-reading-shape-arrow-right .bjc-cs-reading-media-shell {
	clip-path:polygon(0 23%,58% 23%,58% 4%,100% 50%,58% 96%,58% 77%,0 77%);
}
.bjc-cs-reading-shape-arrow-left .bjc-cs-reading-media-shell {
	clip-path:polygon(100% 23%,42% 23%,42% 4%,0 50%,42% 96%,42% 77%,100% 77%);
}

.bjc-cs-reading-shape-diamond .bjc-cs-reading-media-shell {
	aspect-ratio:1;
	overflow:hidden;
	clip-path:polygon(50% 1%,99% 50%,50% 99%,1% 50%);
}

.bjc-cs-reading-shape-oval .bjc-cs-reading-media-shell {
	aspect-ratio:1.35 / 1;
	overflow:hidden;
	border-radius:50%;
}

.bjc-cs-reading-shape-arch .bjc-cs-reading-media-shell {
	aspect-ratio:4 / 5;
	overflow:hidden;
	border-radius:50% 50% 9% 9% / 38% 38% 9% 9%;
}

.bjc-cs-reading-shape-shield .bjc-cs-reading-media-shell {
	aspect-ratio:1;
	overflow:hidden;
	clip-path:polygon(50% 2%,94% 17%,89% 67%,50% 98%,11% 67%,6% 17%);
}

/* Direct media fills every new silhouette without touching nested shortcode/plugin images. */
.bjc-cs-reading-shape-arrow-left .bjc-cs-reading-media-shell > .bjc-cs-media,
.bjc-cs-reading-shape-arrow-right .bjc-cs-reading-media-shell > .bjc-cs-media,
.bjc-cs-reading-shape-diamond .bjc-cs-reading-media-shell > .bjc-cs-media,
.bjc-cs-reading-shape-oval .bjc-cs-reading-media-shell > .bjc-cs-media,
.bjc-cs-reading-shape-arch .bjc-cs-reading-media-shell > .bjc-cs-media,
.bjc-cs-reading-shape-shield .bjc-cs-reading-media-shell > .bjc-cs-media {
	width:100%;
	height:100%;
}
.bjc-cs-reading-shape-arrow-left .bjc-cs-reading-media-shell > .bjc-cs-media:not(.bjc-cs-embed) > img,
.bjc-cs-reading-shape-arrow-right .bjc-cs-reading-media-shell > .bjc-cs-media:not(.bjc-cs-embed) > img,
.bjc-cs-reading-shape-diamond .bjc-cs-reading-media-shell > .bjc-cs-media:not(.bjc-cs-embed) > img,
.bjc-cs-reading-shape-oval .bjc-cs-reading-media-shell > .bjc-cs-media:not(.bjc-cs-embed) > img,
.bjc-cs-reading-shape-arch .bjc-cs-reading-media-shell > .bjc-cs-media:not(.bjc-cs-embed) > img,
.bjc-cs-reading-shape-shield .bjc-cs-reading-media-shell > .bjc-cs-media:not(.bjc-cs-embed) > img,
.bjc-cs-reading-shape-arrow-left .bjc-cs-reading-media-shell > .bjc-cs-self-video > video,
.bjc-cs-reading-shape-arrow-right .bjc-cs-reading-media-shell > .bjc-cs-self-video > video,
.bjc-cs-reading-shape-diamond .bjc-cs-reading-media-shell > .bjc-cs-self-video > video,
.bjc-cs-reading-shape-oval .bjc-cs-reading-media-shell > .bjc-cs-self-video > video,
.bjc-cs-reading-shape-arch .bjc-cs-reading-media-shell > .bjc-cs-self-video > video,
.bjc-cs-reading-shape-shield .bjc-cs-reading-media-shell > .bjc-cs-self-video > video {
	width:100%;
	height:100%;
	object-fit:cover;
}
.bjc-cs-reading-shape-arrow-left .bjc-cs-reading-media-shell > .bjc-cs-embed,
.bjc-cs-reading-shape-arrow-right .bjc-cs-reading-media-shell > .bjc-cs-embed,
.bjc-cs-reading-shape-diamond .bjc-cs-reading-media-shell > .bjc-cs-embed,
.bjc-cs-reading-shape-oval .bjc-cs-reading-media-shell > .bjc-cs-embed,
.bjc-cs-reading-shape-arch .bjc-cs-reading-media-shell > .bjc-cs-embed,
.bjc-cs-reading-shape-shield .bjc-cs-reading-media-shell > .bjc-cs-embed,
.bjc-cs-reading-shape-arrow-left .bjc-cs-reading-media-shell > .bjc-cs-self-video,
.bjc-cs-reading-shape-arrow-right .bjc-cs-reading-media-shell > .bjc-cs-self-video,
.bjc-cs-reading-shape-diamond .bjc-cs-reading-media-shell > .bjc-cs-self-video,
.bjc-cs-reading-shape-oval .bjc-cs-reading-media-shell > .bjc-cs-self-video,
.bjc-cs-reading-shape-arch .bjc-cs-reading-media-shell > .bjc-cs-self-video,
.bjc-cs-reading-shape-shield .bjc-cs-reading-media-shell > .bjc-cs-self-video {
	height:100%;
}
.bjc-cs-reading-shape-arrow-left .bjc-cs-reading-media-shell > .bjc-cs-embed > iframe,
.bjc-cs-reading-shape-arrow-right .bjc-cs-reading-media-shell > .bjc-cs-embed > iframe,
.bjc-cs-reading-shape-diamond .bjc-cs-reading-media-shell > .bjc-cs-embed > iframe,
.bjc-cs-reading-shape-oval .bjc-cs-reading-media-shell > .bjc-cs-embed > iframe,
.bjc-cs-reading-shape-arch .bjc-cs-reading-media-shell > .bjc-cs-embed > iframe,
.bjc-cs-reading-shape-shield .bjc-cs-reading-media-shell > .bjc-cs-embed > iframe,
.bjc-cs-reading-shape-arrow-left .bjc-cs-reading-media-shell > .bjc-cs-embed > video,
.bjc-cs-reading-shape-arrow-right .bjc-cs-reading-media-shell > .bjc-cs-embed > video,
.bjc-cs-reading-shape-diamond .bjc-cs-reading-media-shell > .bjc-cs-embed > video,
.bjc-cs-reading-shape-oval .bjc-cs-reading-media-shell > .bjc-cs-embed > video,
.bjc-cs-reading-shape-arch .bjc-cs-reading-media-shell > .bjc-cs-embed > video,
.bjc-cs-reading-shape-shield .bjc-cs-reading-media-shell > .bjc-cs-embed > video {
	width:100%;
	height:100%;
	aspect-ratio:auto;
}

/* Editorial contour wrapping: text follows the useful outer silhouette, not merely its rectangular box. */
.bjc-cs-reading-media-left-wrap.bjc-cs-reading-shape-circle .bjc-cs-reading-media-shell,
.bjc-cs-reading-media-right-wrap.bjc-cs-reading-shape-circle .bjc-cs-reading-media-shell {
	shape-outside:circle(50%);
	shape-margin:8px;
}
.bjc-cs-reading-media-left-wrap.bjc-cs-reading-shape-oval .bjc-cs-reading-media-shell,
.bjc-cs-reading-media-right-wrap.bjc-cs-reading-shape-oval .bjc-cs-reading-media-shell {
	shape-outside:ellipse(50% 50%);
	shape-margin:8px;
}
.bjc-cs-reading-media-left-wrap.bjc-cs-reading-shape-hexagon .bjc-cs-reading-media-shell,
.bjc-cs-reading-media-right-wrap.bjc-cs-reading-shape-hexagon .bjc-cs-reading-media-shell {
	shape-outside:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%);
	shape-margin:8px;
}
.bjc-cs-reading-media-left-wrap.bjc-cs-reading-shape-triangle .bjc-cs-reading-media-shell,
.bjc-cs-reading-media-right-wrap.bjc-cs-reading-shape-triangle .bjc-cs-reading-media-shell {
	shape-outside:polygon(50% 3%,98% 96%,2% 96%);
	shape-margin:8px;
}
.bjc-cs-reading-media-left-wrap.bjc-cs-reading-shape-pentagon .bjc-cs-reading-media-shell,
.bjc-cs-reading-media-right-wrap.bjc-cs-reading-shape-pentagon .bjc-cs-reading-media-shell {
	shape-outside:polygon(50% 3%,97% 38%,82% 96%,18% 96%,3% 38%);
	shape-margin:8px;
}
.bjc-cs-reading-media-left-wrap.bjc-cs-reading-shape-arrow-right .bjc-cs-reading-media-shell,
.bjc-cs-reading-media-right-wrap.bjc-cs-reading-shape-arrow-right .bjc-cs-reading-media-shell {
	shape-outside:polygon(0 23%,58% 23%,58% 4%,100% 50%,58% 96%,58% 77%,0 77%);
	shape-margin:8px;
}
.bjc-cs-reading-media-left-wrap.bjc-cs-reading-shape-arrow-left .bjc-cs-reading-media-shell,
.bjc-cs-reading-media-right-wrap.bjc-cs-reading-shape-arrow-left .bjc-cs-reading-media-shell {
	shape-outside:polygon(100% 23%,42% 23%,42% 4%,0 50%,42% 96%,42% 77%,100% 77%);
	shape-margin:8px;
}
.bjc-cs-reading-media-left-wrap.bjc-cs-reading-shape-diamond .bjc-cs-reading-media-shell,
.bjc-cs-reading-media-right-wrap.bjc-cs-reading-shape-diamond .bjc-cs-reading-media-shell {
	shape-outside:polygon(50% 1%,99% 50%,50% 99%,1% 50%);
	shape-margin:8px;
}
.bjc-cs-reading-media-left-wrap.bjc-cs-reading-shape-shield .bjc-cs-reading-media-shell,
.bjc-cs-reading-media-right-wrap.bjc-cs-reading-shape-shield .bjc-cs-reading-media-shell {
	shape-outside:polygon(50% 2%,94% 17%,89% 67%,50% 98%,11% 67%,6% 17%);
	shape-margin:8px;
}

@media (max-width:767px) {
	.bjc-cs-reading {
		--bjc-reading-media-width:100%;
		--bjc-reading-media-gap:12px;
		margin-bottom:.45rem;
	}
	.bjc-cs-reading-inner { padding:12px 14px; }
	.bjc-cs-reading-copy { padding:6px 7px; }
	.bjc-cs-reading-media-left-wrap .bjc-cs-reading-copy > .bjc-cs-reading-media-shell,
	.bjc-cs-reading-media-right-wrap .bjc-cs-reading-copy > .bjc-cs-reading-media-shell {
		float:none;
		width:100%;
		margin:0 0 var(--bjc-reading-media-gap);
	}
	.bjc-cs-reading-shape-circle .bjc-cs-reading-media-shell,
	.bjc-cs-reading-shape-hexagon .bjc-cs-reading-media-shell,
	.bjc-cs-reading-shape-triangle .bjc-cs-reading-media-shell,
	.bjc-cs-reading-shape-pentagon .bjc-cs-reading-media-shell,
	.bjc-cs-reading-shape-question-mark .bjc-cs-reading-media-shell,
	.bjc-cs-reading-shape-arrow-left .bjc-cs-reading-media-shell,
	.bjc-cs-reading-shape-arrow-right .bjc-cs-reading-media-shell,
	.bjc-cs-reading-shape-diamond .bjc-cs-reading-media-shell,
	.bjc-cs-reading-shape-oval .bjc-cs-reading-media-shell,
	.bjc-cs-reading-shape-arch .bjc-cs-reading-media-shell,
	.bjc-cs-reading-shape-shield .bjc-cs-reading-media-shell,
	.bjc-cs-reading-shape-square .bjc-cs-reading-media-shell {
		width:min(100%,420px);
		margin-inline:auto;
	}
}