/*
Single story (Figma 1185:6282). Loaded on single posts only.
Opening: 24px top / 48px bottom, 40px between breadcrumb, heading block
and lead photo; heading items 24px apart. Body: 40px between blocks,
24px inside sections, 96px bottom.
*/
/* Salient treats single posts as data-bg-header pages: its !important
   .container-wrap top padding and the 35px .main-content padding go. */
/* Exceeds body.single-post.material[data-bg-header="true"] .container-wrap (0,4,2) !important. */
body.single-post.material[data-bg-header] .container-wrap.tob-story-page {
	padding-top: 0 !important;
	padding-bottom: 0;
}
body.single-post[data-bg-header] .container-wrap.tob-story-page > .main-content {
	padding-top: 0;
}
.tob-story-article {
	width: 100%;
}
.tob-story-opening {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 24px 0 48px 0;
}
.tob-story-opening .tob-breadcrumb {
	margin-bottom: 0;
}
.tob-story-heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}
.tob-story-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: 0.07px;
	color: #006767;
}
.tob-story-back img {
	width: 18px;
	height: 18px;
}
.tob-story-heading .tob-story__chip {
	padding: 4px 10px;
	font-size: 10px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: 0.05px;
	color: #FFFAF5;
	border-radius: 99999px;
}
.tob-story-heading .tob-story__chip--news {
	background-color: #4CBDBD;
}
.tob-story-heading .tob-story__chip--report {
	background-color: #FEBC00;
}
/* Heading/H2 (48/52); beats Salient's h1 sizing. */
body .tob-story-heading h1.tob-story-title {
	margin: 0;
	padding: 0;
	font-size: 48px;
	line-height: 52px;
	font-weight: 700;
	letter-spacing: 0;
}
.tob-story-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding-bottom: 0;
	font-size: 14px;
	line-height: 20px;
	color: #6B7280;
}
.tob-story-meta__author {
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: 0.08px;
	color: #000000;
}
.tob-story-lead {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}
.tob-story-lead img.tob-story-lead__image {
	width: 100%;
	height: 583px;
	object-fit: cover;
	object-position: center 28%; /* Figma crop */
	border-radius: 32px;
}
/* Figma clips the lead caption (585px frame): kept for screen readers only. */
.tob-story-lead figcaption {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.tob-story-lead {
	position: relative;
}
.tob-story-content figcaption {
	font-family: 'Work Sans', sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	letter-spacing: 0.06px;
	color: #40514F;
}

.tob-story-body {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding-bottom: 96px;
}
.tob-story-short {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px;
	background-color: #F5FAF9;
	border-radius: 24px;
}
body .tob-story-short :is(h2, h4) {
	margin: 0;
	padding: 0;
}
.tob-story-short p {
	padding-bottom: 0;
}
.tob-story-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}
.tob-story-share__label {
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: 0.07px;
	color: #000000;
}
.tob-story-share__action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: 0.07px;
	color: #006767;
	background: transparent;
	border: 1px solid #E3E8E6;
	border-radius: 99999px;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.tob-story-share__action:hover,
.tob-story-share__action:focus-visible {
	color: #006767;
	border-color: #006767;
}
.tob-story-share__action img {
	width: 16px;
	height: 16px;
}

/* Post content: 24px between paragraphs, sections 40px apart. */
.tob-story-content > * {
	margin-top: 0;
	margin-bottom: 24px;
}
.tob-story-content > *:last-child {
	margin-bottom: 0;
}
.tob-story-content p {
	padding-bottom: 0;
}
.tob-story-content > p:first-child {
	font-weight: 600;
}
body .tob-story-content h2 {
	margin: 16px 0 24px 0; /* 24px paragraph gap + 16px = 40px before a section */
	padding: 0;
	font-size: 36px;
	line-height: 40px;
	font-weight: 700;
	letter-spacing: 0.18px;
}
/* Subheadings in imported stories: H4 size. */
body .tob-story-content h3 {
	margin: 8px 0 16px 0;
	padding: 0;
	font-size: 22px;
	line-height: 28px;
	font-weight: 700;
	letter-spacing: 0.011px;
}
body .tob-story-content h4,
body .tob-story-content h5,
body .tob-story-content h6 {
	margin: 0 0 16px 0;
	padding: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
}
.tob-story-content ul,
.tob-story-content ol {
	margin-left: 24px;
	padding: 0;
}
.tob-story-content li {
	margin-bottom: 8px;
	padding: 0;
}
/* Photos keep their own proportions (imported stories hold screenshots and graphics). */
.tob-story-content figure,
.tob-story-content .wp-block-image {
	margin: 16px 0 40px 0;
}
.tob-story-content img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 32px;
}
.tob-story-content p > img,
.tob-story-content a > img {
	margin: 0;
}
/* "In short" box inside the story (imported TL;DR). */
.tob-story-content .tob-story-short {
	margin: 0 0 40px 0;
}
.tob-story-content .tob-story-short ul {
	margin-bottom: 0;
}
.tob-story-content .tob-story-short li:last-child {
	margin-bottom: 0;
}
/* Editorial reflection (Figma 1185:6369): pull quote with a caption label. */
.tob-story-content blockquote,
.tob-story-content .wp-block-quote {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 16px 0 40px 0;
	padding: 32px 32px 32px 60px;
	background-color: #F7F3EB;
	border: 0;
	border-radius: 24px;
}
.tob-story-content blockquote::before {
	content: "";
	position: absolute;
	top: 32px;
	bottom: 32px;
	left: 32px;
	width: 4px;
	height: auto; /* Salient's blockquote::before sets height:100% */
	border-left: 0; /* ...and a 4px border-left */
	background-color: #E3D8C3;
}
.tob-story-content blockquote p {
	padding-bottom: 0;
	font-size: 24px;
	line-height: 32px;
	font-weight: 600;
	letter-spacing: 0;
	color: #000000;
}
/* Label above the quote, per Figma (wpautop wraps the cite in a <p>). */
.tob-story-content blockquote > cite,
.tob-story-content blockquote > p:has(> cite) {
	order: -1;
	margin-bottom: 16px;
	line-height: 16px;
}
/* Quote attribution (imported pull quotes). */
.tob-story-content blockquote p.tob-quote-author {
	margin-top: 16px;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	letter-spacing: 0.08px;
	color: #40514F;
}
.tob-story-content blockquote cite {
	display: block;
	font-family: 'Work Sans', sans-serif;
	font-style: normal;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.06px;
	text-transform: uppercase;
	color: #40514F;
}

@media only screen and (max-width: 999px) {
	body .tob-story-heading h1.tob-story-title {
		font-size: 32px;
		line-height: 38px;
	}
	.tob-story-lead img.tob-story-lead__image {
		height: auto;
		aspect-ratio: 3 / 2;
	}
	body .tob-story-content h2 {
		font-size: 26px;
		line-height: 32px;
	}
	.tob-story-content img {
		border-radius: 16px;
	}
	.tob-story-content blockquote p {
		font-size: 20px;
		line-height: 28px;
	}
}