/**
 * Individual Envisioning Volume Page
 *
 * Ported from pg-core-child/src/css/single-volume.css and the volume card CSS,
 * rescoped under .individual-envisioning, mapped to theme CSS variables, and
 * collapsed from the old duplicated desktop/mobile DOM into one responsive,
 * .is-open–driven accordion.
 */

.individual-envisioning {
	--env-grey: var(--c-gray-white, #ededed);
	--env-link: var(--c-blue-royal, #0257b8);
	--env-text: var(--c-gray-dark, #575757);
	font-family: var(--f-ibm-plex-sans);
	/* Match the legacy site, which antialiases globally. Without this the body text
	   renders with macOS subpixel smoothing and looks noticeably heavier than live. */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	/* Flex, for selection painting rather than for layout. WebKit fills the gaps
	   between the blocks a selection spans at the width of their nearest common
	   ancestor block, so a drag through this page's text painted a highlight the
	   full width of this wrapper rather than of the text column. WebKit skips gap
	   painting inside flex containers. Children stack with padding or horizontal-only
	   margins, so no margin collapsing is lost. See .individual-speech for the
	   measured case. */
	display: flex;
	flex-direction: column;
}

.individual-envisioning .volume-intro {
	display: flex;
	flex-direction: column;
	margin-bottom: 3rem;
}

/* ── Banner header ─────────────────────────────────────────────── */
.individual-envisioning .volume__header-wrapper {
	display: flex;
	justify-content: left;
	background-image: var(--banner-mobile-background);
	background-size: cover;
	background-position: center;
}

.individual-envisioning .volume__header {
	width: 100%;
	max-width: calc(1024px - 2rem);
	font-size: 32px;
	font-weight: 400;
	color: var(--c-white, #fff);
	padding: 2rem 3rem 0;
	margin: 0;
	z-index: 1;
}

/* ── Volume cross-links (responsive: row on desktop, accordion on mobile) ── */
.individual-envisioning .volumes__cross-links {
	background-color: var(--env-grey);
	color: var(--env-text);
	font-size: 0.6875rem;
	line-height: 13px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	padding: 0.625rem 0;
	display: flex;
	cursor: pointer;
}

.individual-envisioning .cross-links--container {
	width: calc(100% - 2rem);
	margin: 0 auto;
	display: flex;
	flex-flow: column;
	align-items: flex-start;
}

.individual-envisioning .cross-links__title--accordion {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0.6875rem 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	text-transform: uppercase;
	letter-spacing: -0.02rem;
	font-weight: 500;
	color: inherit;
}

.individual-envisioning .cross-links__title {
	padding-right: 0.8125rem;
}

.individual-envisioning .title__button--arrow {
	transition: transform 0.15s ease-in-out;
	width: 22px;
	height: 14px;
}

.individual-envisioning .title__button--arrow.rotate {
	transform: rotate(180deg);
}

.individual-envisioning .cross-links__dropdown {
	display: none;
	flex-flow: column;
	/* Bleed past the container's 1rem inset so links span the full screen width. */
	width: calc(100% + 2rem);
	margin: 0 -1rem;
}

.individual-envisioning .cross-links--container.is-open .cross-links__dropdown {
	display: flex;
}

.individual-envisioning .cross-links__individual {
	color: var(--env-link);
	text-decoration: none;
	/* Extra horizontal padding offsets the dropdown's -1rem bleed so text keeps
	   its current position; vertical padding absorbs the old 0.3rem margin so
	   removing the gap between links doesn't change the menu height. */
	padding: 0.7675rem calc(0.8125rem + 1rem);
	margin: 0;
	border-radius: 0;
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.individual-envisioning .cross-links__individual:hover {
	background-color: rgba(219, 219, 219, 0.5);
	transition: background-color 0.2s;
}

.individual-envisioning .cross-links__individual.current {
	background-color: #dbdbdb;
}

.individual-envisioning .cross-link__disabled {
	color: #acadaf;
	pointer-events: none;
}

.individual-envisioning .cross-links__separator {
	color: #6e6b6b;
	padding: 0.25rem;
	display: none;
}

/* Desktop inline PDF links are hidden on mobile (the current-volume PDF shows below). */
.individual-envisioning .cross-links__pdf {
	display: none;
}

.individual-envisioning .cross-links__pdf-icon {
	width: 20px;
	height: 20px;
}

.individual-envisioning .volume-pdf {
	margin-left: 8px;
	text-decoration: none;
	text-transform: uppercase;
}

.individual-envisioning .volume-pdf__mobile-wrapper {
	display: flex;
	color: var(--env-link);
	padding: 0.4675rem 2rem;
	align-items: center;
	font-size: 0.6875rem;
	text-transform: uppercase;
}

/* ── Volume details + table of contents ───────────────────────── */
.individual-envisioning .volume-details {
	box-sizing: border-box;
	color: #757679;
	padding: 0 2rem;
	margin-top: 2rem;
}

.individual-envisioning .volume-details__name {
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
}

.individual-envisioning .volume-details__title {
	margin: 0.25rem 0 0.85rem;
	font-weight: 700;
	font-size: 35px;
}

.individual-envisioning .volume-details__subsections {
	display: flex;
	flex-flow: column;
	color: var(--env-link);
	font-weight: 400;
	font-size: 16px;
}

.individual-envisioning .volume-details__subsection-link {
	padding: 0.4rem 0;
	font-weight: 500;
	color: var(--env-link);
	text-decoration: none;
}

.individual-envisioning .volume-details__separator {
	display: none;
}

/* ── Foreword / note + expandable ──────────────────────────────── */
.individual-envisioning .volume-description__container {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	/* Mobile: left-align children (keeping their preset widths) instead of
	   centering them. Reset to `start` (row layout) at 900px below. */
	align-items: flex-start;
	padding: 0 2rem;
	margin-top: 2rem;
}

.individual-envisioning .volume-description__note-foreword-container {
	display: flex;
	flex-flow: column nowrap;
}

.individual-envisioning .volume-description__preface-podcast-container {
	display: flex;
	flex-flow: column;
	/* Mobile: left-align the preface and podcast (at their preset widths) instead
	   of centering them. Re-centered at the 900px desktop breakpoint below. */
	align-items: flex-start;
	justify-content: center;
	/* Preset box width. width:100% keeps it viewport-bounded (the parent is
	   constrained to the viewport), so the fixed-width overflow bug that PR #1431
	   fixed does not return. Below 900px the cap is 410px; desktop keeps the
	   legacy 400px (restored in the 900px breakpoint below). */
	width: 100%;
	max-width: 410px;
}

/* Between 600px and 900px, also let the podcast card fill the box width (its
   wrapper otherwise shrinks to content width in the align-items:flex-start
   column). Below 600px the podcast keeps its content width; only the preface
   box takes the full 410px. */
@media (min-width: 600px) and (max-width: 899px) {

	.individual-envisioning .volume-description__podcast {
		width: 100%;
	}
}

.individual-envisioning .volume__note,
.individual-envisioning .volume__foreword {
	font-size: 16px;
	line-height: 1.5;
	font-family: var(--f-source-serif-pro);
}

.individual-envisioning .volume__note-title,
.individual-envisioning .volume-description__section {
	display: flex;
	flex-flow: column;
	font-size: 1.125em;
	margin-block: 1em;
	font-weight: bold;
}

.individual-envisioning .expandable {
	display: flex;
	flex-wrap: wrap;
}

.individual-envisioning .expandable__element {
	overflow: hidden;
	transition: height 0.3s ease;
}

.individual-envisioning .expandable__element--collapsed {
	height: 9.75rem;
}

.individual-envisioning .expandable__spacer {
	width: 1px;
	display: block;
	align-self: center;
	flex: 1 0 auto;
	border: 0;
	border-bottom: solid 1px #d3d2d2;
}

/* Set by individual-envisioning.js while it works out whether this block
   overflows enough to need a toggle. `visibility` rather than `display`
   keeps the button's space reserved, so revealing it is a visibility flip
   and nothing below it moves. */
.individual-envisioning .expandable__show-button--pending {
	visibility: hidden;
}

.individual-envisioning .expandable__button {
	font-weight: 500;
	letter-spacing: 1.69px;
	margin: 1rem;
	background: none;
	border: 0;
	cursor: pointer;
	text-transform: uppercase;
	color: var(--env-link);
	font-family: var(--f-ibm-plex-sans);
	font-size: 0.8125rem;
}

.individual-envisioning .hidden {
	display: none;
}

/* ── Preface + podcast cards ───────────────────────────────────── */
.individual-envisioning .volume-description__preface {
	min-width: 300px;
	width: 100%;
}

@media (max-width: 400px) {
	.individual-envisioning .volume-description__preface {
		min-width: 0;
	}
}

/* Preface card: legacy reorders to speaker → date → title → media-links (no image).
   Flex `order` is simpler than the legacy grid and gives the same result. */
.individual-envisioning .card--preface .card__speaker-name {
	order: 1;
	text-transform: uppercase;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--env-link);
	margin: 0;
}

.individual-envisioning .card--preface .card__speaker-name a {
	color: inherit;
}

/* Subsection cards: two-column layout — portrait on the left; speaker, date and
   title stacked to the right; media links span the full width below (legacy
   card--podcast grid). The .card.card--podcast selector outweighs the base
   .card { display: flex } rule that appears later in this file. */
.individual-envisioning .card.card--podcast {
	display: grid;
	grid-template-columns: 120px 1fr;
	grid-template-areas:
		"photo speaker"
		"photo date"
		"photo head"
		"media-links media-links";
	grid-template-rows: auto auto 1fr auto;
	column-gap: 1rem;
}

.individual-envisioning .card--podcast .card__image {
	grid-area: photo;
	align-self: start;
	width: 100%;
	margin: 0;
	object-fit: cover;
}

.individual-envisioning .card--podcast .card__speaker-name {
	grid-area: speaker;
	text-transform: uppercase;
	color: var(--env-link);
	margin: 0;
}

.individual-envisioning .card--podcast .card__speech-date {
	grid-area: date;
	font-style: italic;
	color: var(--env-text);
	margin: 0.35rem 0;
}

.individual-envisioning .card--podcast .card__header {
	grid-area: head;
	align-self: start;
	margin: 0 0 0.5rem;
}

.individual-envisioning .card--podcast .card__media-links {
	grid-area: media-links;
	margin-top: 1rem;
}

.individual-envisioning .card--preface .card__speech-date {
	order: 2;
	font-style: italic;
	font-weight: 700;
	font-size: 0.8125rem;
	color: var(--env-text);
	margin: 0.4rem 0 0.75rem;
}

.individual-envisioning .card--preface .card__header {
	order: 3;
}

.individual-envisioning .card--preface .card__media-links {
	order: 4;
}

/* ── Podcast card (ported from the collection part, scoped here) ── */
.individual-envisioning .volume-description__podcast .podcast-card {
	width: 100%;
	box-sizing: border-box;
	background-color: var(--env-grey);
	border-radius: 5px;
	padding: 14px;
	display: grid;
	grid-template-rows: auto 1.8rem auto;
	box-shadow: none;
	margin: 0;
}

.individual-envisioning .podcast-card__image {
	justify-self: left;
}

.individual-envisioning .podcast-card__image img {
	width: 200px;
	max-width: 100%;
	height: auto;
}

.individual-envisioning .podcast-card__subscribe {
	justify-self: left;
	font-size: 1.3125rem;
	font-weight: 600;
	font-family: var(--f-ibm-plex-sans);
	color: var(--env-text);
	display: flex;
	height: fit-content;
	margin-top: 10px;
}

.individual-envisioning .podcast-card__subscribe .subscribe__text {
	color: inherit;
	text-decoration: none;
}

.individual-envisioning .podcast-card__podcast-links {
	/* Mobile: platform pills stack below the "Subscribe" label; at 600px+ they
	   move beside the label in the desktop layout. */
	display: flex;
	flex-direction: column;
	height: fit-content;
	max-width: 300px;
	margin-top: 20px;
}

.individual-envisioning .podcast-page-card__follow-button__link {
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
	margin: 2px;
	border: 1px solid var(--c-gray-medium, #bbb);
	border-radius: 4px;
	height: fit-content;
	text-decoration: none;
}

.individual-envisioning .podcast-page-card__follow-button__link:hover {
	background-color: var(--c-gray-white, #ededed);
	box-shadow: 0 0 5px #ccc;
}

.individual-envisioning .podcast-page-card__link-image {
	height: 20px;
	width: 20px;
	margin-right: 0.1rem;
	margin-left: 0.5rem;
}

.individual-envisioning .podcast-page-card__link-text {
	font-family: var(--f-ibm-plex-sans);
	font-size: 12px;
	font-weight: 500;
	color: var(--env-text);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin: 5px;
}

@media (min-width: 600px) {

	.individual-envisioning .volume-description__podcast .podcast-card {
		grid-template-columns: 200px auto;
		grid-column-gap: 20px;
		grid-template-rows: auto 1fr;
	}

	.individual-envisioning .podcast-card__image {
		grid-column: 1;
		grid-row: 1 / 3;
	}

	.individual-envisioning .podcast-card__subscribe {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
		margin: 0;
	}

	.individual-envisioning .podcast-card__podcast-links {
		display: flex;
		grid-column: 2;
		grid-row: 2;
		align-self: end;
		margin-bottom: 8px;
		flex-direction: column;
		max-width: 300px;
		margin-top: 0;
	}
}

/* ── Subsections + accordion ───────────────────────────────────── */
/* Desktop: alternating wash — only odd sections (--grey) are tinted. */
.individual-envisioning .volume-section--grey {
	background-color: var(--env-grey);
}

.individual-envisioning .volume-subsection {
	max-width: calc(1024px - 2rem);
	margin: 0 auto;
}

.individual-envisioning .volume-subsection__title-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
}

.individual-envisioning .volume-subsection__title {
	font-size: 30px;
	padding: 2rem;
	margin: 0;
	font-weight: 500;
}

.individual-envisioning .section__button--container {
	margin-right: 2rem;
	min-width: 35px;
}

.individual-envisioning .section__button--plus,
.individual-envisioning .section__button--minus {
	width: 35px;
	cursor: pointer;
}

.individual-envisioning .section__button--minus {
	display: none;
}

.individual-envisioning .volume-section.is-open .section__button--plus {
	display: none;
}

.individual-envisioning .volume-section.is-open .section__button--minus {
	display: inline;
}

/* Mobile: details collapse with a height transition (same feel as the foreword
   show-more). Closed = height:0; JS animates to the content height and back,
   then pins height:auto while open so content can still reflow. */
.individual-envisioning .volume-subsection__details {
	height: 0;
	overflow: hidden;
	transition: height 0.3s ease;
}

.individual-envisioning .section-banner {
	background: rgba(0, 0, 0, 0.5);
	min-height: 300px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
	background-blend-mode: darken;
	color: var(--c-white, #fff);
	font-size: 35px;
}

.individual-envisioning .section-banner__header {
	padding: 2rem;
	text-align: center;
	margin-bottom: 0;
}

.individual-envisioning .section-banner__source {
	margin-top: 1rem;
}

.individual-envisioning .section-banner__source a {
	text-decoration-line: underline;
}

.individual-envisioning .volume-subsection__speeches {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 325px));
	grid-gap: 2rem;
	margin-top: 2rem;
	justify-content: center;
	padding-bottom: 5rem;
}

/* ── Speech cards ──────────────────────────────────────────────── */
.individual-envisioning .card {
	display: flex;
	flex-direction: column;
	background-color: var(--env-grey);
	border-radius: 5px;
	padding: 1rem;
	position: relative;
	cursor: pointer;
	transition: box-shadow 0.3s ease;
}

/* Whole-card lift on hover — matches the archive/topics speech cards. */
.individual-envisioning .card:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Transparent overlay makes the whole card clickable; real controls sit above it. */
.individual-envisioning .card__link-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	text-decoration: none;
}

.individual-envisioning .card--white {
	background-color: var(--c-white, #fff);
}

.individual-envisioning .card__header {
	font-size: var(--fs-card-title, 1.125rem);
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 0.5rem;
}

.individual-envisioning .card__header a {
	color: var(--c-navy, #002e5d);
	text-decoration: none;
}

.individual-envisioning .card__image {
	width: 140px;
	height: auto;
	margin-bottom: 0.75rem;
	border-radius: 3px;
}

.individual-envisioning .card__speaker-name {
	font-size: 0.875rem;
	font-weight: 500;
	margin: 0;
}

.individual-envisioning .card__speaker-name a {
	color: var(--env-link);
	text-decoration: none;
	position: relative;
	z-index: 2;
}

.individual-envisioning .card__speaker-name a:hover {
	text-decoration: underline;
}

.individual-envisioning .card__speech-date {
	font-size: 0.625rem;
	font-weight: 400;
	color: var(--c-gray-medium, #707070);
	margin: 0.25rem 0 0.75rem;
}

.individual-envisioning .card__media-links {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: auto;
	position: relative;
}

.individual-envisioning .card__intro-trigger {
	background: var(--c-blue-royal, #0257b8);
	border: 0;
	color: var(--c-white, #fff);
	border-radius: 3px;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.05rem;
	padding: 0.3rem 0.6rem;
	cursor: pointer;
	text-transform: uppercase;
	font-family: var(--f-ibm-plex-sans);
	position: relative;
	z-index: 2;
}

.individual-envisioning .media-links__icon {
	display: flex;
	justify-content: center;
	align-items: center;
	background: none;
	border: 0;
	padding: 0;
	border-radius: 21px;
	cursor: pointer;
	transition: background-color 0.2s;
	text-decoration: none;
	position: relative;
	z-index: 2;
}

.individual-envisioning .media-links__icon--unavailable {
	cursor: default;
}

.individual-envisioning .media-links__icon img {
	width: 21px;
	height: 21px;
	padding: 0.5625rem;
}

.individual-envisioning .media-links__icon--watch img {
	width: 25px;
	height: 25px;
	padding: 7px;
}

/* Grey hover circle behind the icon. No grow effect. The download trigger is
   covered by this too: it carries the same --available / --unavailable state
   modifier as the other icons, so a card with nothing to download gets no
   circle (and the default cursor), rather than looking clickable. */
.individual-envisioning .media-links__icon--available:hover {
	background-color: #e3e3e3;
	transition: background-color 0.2s;
}

.individual-envisioning .no_show {
	display: none;
}

/* Download dropdown */
.individual-envisioning .card__download {
	position: relative;
	z-index: 2;
}

.individual-envisioning .card__dropdown-menu {
	display: flex;
	align-items: center;
	position: absolute;
	bottom: calc(100% + 9px);
	/* Right-align the popup to the trigger (39px wide: a 21px icon plus
	   9px padding each side) so the tail lands over the download icon and
	   the links extend leftward — matching the legacy layout. */
	right: 0;
	background-color: var(--c-gray-white, #ededed);
	white-space: nowrap;
	/* Collapsed by default; JS slides the height open/closed (200ms) to mirror the
	   legacy jQuery slideToggle reveal. visibility:hidden keeps the links out of the
	   tab order while collapsed. */
	height: 0;
	overflow: hidden;
	visibility: hidden;

	/* Both transitions belong here, on the one rule every menu matches. The
	   background-color half only applies to the non-white-card override below,
	   but declaring it there too would be a second `transition` shorthand on the
	   same element — and the more specific one wins outright, dropping height and
	   leaving those menus to snap open instead of slide. */
	transition: height 0.2s linear, background-color 0.2s;
	z-index: 5;
}

/* Small downward tail near the right edge, aimed at the trigger below. Flat grey,
   no shadow — a compact tooltip matching the legacy site.

   It hangs on .card__download (the trigger wrapper), not on the menu: the menu is
   overflow:hidden while it slides — it has to be, since align-items:center makes
   the links overflow it symmetrically — which would clip the tail away on frame 1
   of the close. The menu is bottom-anchored, so its bottom edge doesn't move as it
   collapses and the tail's position here is identical. Fading it on a delay lets it
   survive until the slide is nearly done. */
.individual-envisioning .card__download::after {
	content: '';
	position: absolute;
	bottom: calc(100% - 1px);

	/* Centre on the icon. .card__download shrink-wraps the trigger, so its centre
	   is the icon's centre — right:50% puts the tail's right edge there and the
	   translate pushes it back by half the tail's 16px width. Stays centred if the
	   icon size changes, unlike a hard-coded offset. */
	right: 50%;
	transform: translateX(50%);
	border-style: solid;
	border-width: 10px 8px 0;
	border-color: var(--c-gray-white, #ededed) transparent transparent;
	pointer-events: none;
	opacity: 0;
	/* Gone at ~170ms of the 200ms close. `transition: none` when open (rather than
	   a zero delay) keeps the tail visible from frame 1 of the open, as before. */
	transition: opacity 0.05s linear 0.145s;
}

.individual-envisioning .card__download:has( .card__dropdown-trigger[aria-expanded='true'] )::after {
	opacity: 1;
	transition: none;
}

.individual-envisioning .card__dropdown-item {
	color: var(--env-link);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 400;
	width: 50px;
	text-align: center;
	padding: 0.25rem;
	transition: background-color 0.2s;
}

.individual-envisioning .card__dropdown-item--unavailable {
	color: var(--c-gray-light, #bbb);
	pointer-events: none;
}

/* Highlight the link under the cursor, as the speaker page's download
   options do. Unavailable links are excluded so they stay inert — they
   already set pointer-events:none, but the :not() keeps that from being
   the only thing holding the behaviour up. The menu has two backgrounds
   (see below), so the highlight is defined per background to keep the
   same step down from each. */
.individual-envisioning .card__dropdown-item:not(.card__dropdown-item--unavailable):hover {
	background-color: #e3e3e3;
	transition: background-color 0.2s;
}

/* The popup background contrasts its card so the flat (shadowless) tooltip stays
   visible: grey on white cards (above), white on the default grey cards. Mirrors
   the legacy preface override. */
.individual-envisioning .card:not(.card--white) .card__dropdown-menu {
	background-color: var(--c-white, #fff);
}

.individual-envisioning .card:not(.card--white) .card__download::after {
	border-top-color: var(--c-white, #fff);
}

/* Same darkening as above, measured from white instead of #ededed, so the
   highlight reads with equal weight on the lighter menu. */
.individual-envisioning .card:not(.card--white) .card__dropdown-item:not(.card__dropdown-item--unavailable):hover {
	background-color: #f5f5f5;
	transition: background-color 0.2s;
}

/* ── INTRO popup ───────────────────────────────────────────────── */
.individual-envisioning .cover_all {
	background-color: rgba(128, 128, 128, 0.5);
	width: 100%;
	height: 100%;
	display: none;
	position: fixed;
	z-index: 102;
	inset: 0;
	overflow: auto;
}

.individual-envisioning .cover_all--covered {
	display: flex;
	justify-content: center;
	align-items: center;
}

.individual-envisioning .pop_up_intro {
	transition: opacity 0.3s;
	opacity: 0;
	width: 80%;
	max-width: 936px;
	margin: 0;
	background-color: #fff;
	position: relative;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.individual-envisioning .pop_up_intro--pop {
	opacity: 1;
}

.individual-envisioning .pop_up__x-container {
	position: relative;
}

.individual-envisioning .pop_up__x {
	position: absolute;
	bottom: 14px;
	right: 14px;
	height: 30px;
	background: none;
	border: 0;
	cursor: pointer;
}

.individual-envisioning .pop_up__x img {
	height: 30px;
	width: 30px;
}

.individual-envisioning .pop_up_inner {
	width: 85%;
	margin: 36px auto;
}

.individual-envisioning .pop_up__header {
	border-bottom: solid 1px var(--c-gray-light, #bbb);
	padding-bottom: 12px;
}

.individual-envisioning .pop_up__speech-title {
	font-size: 20px;
	color: #000;
	font-weight: 400;
	margin-bottom: 12px;
	letter-spacing: -0.0375rem;
}

.individual-envisioning .pop_up__speech-details {
	display: flex;
	flex-direction: column;
	row-gap: 0.75rem;
}

.individual-envisioning .pop_up__speaker {
	font-size: 13px;
	line-height: 16px;
	margin: 0;
	text-transform: uppercase;
}

.individual-envisioning .pop_up__speech-date-type {
	color: #666;
	font-size: 15px;
	font-style: italic;
	margin: 0;
}

.individual-envisioning .pop_up__speech-date-type p {
	display: inline;
	margin: 0;
}

.individual-envisioning .pop_up__separator {
	font-style: initial;
	padding: 0 5px;
}

.individual-envisioning .pop_up__intro-title {
	margin-top: 3rem;
	font-size: 17px;
	font-weight: 500;
}

.individual-envisioning .pop_up__intro-text {
	max-height: 45vh;
	overflow-y: auto;
	font-size: 16px;
	line-height: 32px;
	font-family: var(--f-source-serif-pro);
}

/* ── Breakpoints ───────────────────────────────────────────────── */
@media (max-width: 700px) {
	/* Mobile: every section is a grey accordion bar. */
	.individual-envisioning .volume-section {
		background-color: var(--env-grey);
		margin-bottom: 3px;
	}
}

@media (min-width: 525px) {
	.individual-envisioning .volume__note-title {
		flex-flow: unset;
	}

	.individual-envisioning .volume__note-title div:last-child {
		padding-left: 4px;
	}
}

@media (min-width: 700px) {
	.individual-envisioning .section__button--container {
		display: none;
	}

	/* Desktop: every subsection is always expanded; the title is not a toggle. */
	.individual-envisioning .volume-subsection__details {
		height: auto;
		overflow: visible;
	}

	.individual-envisioning .volume-subsection__title-container {
		cursor: default;
	}

	.individual-envisioning .volume-subsection__speeches {
		grid-template-columns: repeat(2, minmax(0, 325px));
	}

	.individual-envisioning .volume__header {
		font-size: 39px;
		padding: 1.5rem 2rem;
	}

	.individual-envisioning .volume__header-wrapper {
		justify-content: center;
	}
}

@media (min-width: 800px) {
	.individual-envisioning .volume__header-wrapper {
		background-image: var(--banner-desktop-background);
	}

	.individual-envisioning .pop_up__speech-details {
		flex-flow: row wrap;
		align-items: center;
		justify-content: space-between;
		column-gap: 1rem;
	}

	/* The date never breaks, but the speech type is free-text and can be any
	   length, so it stays wrappable. Once the pair can't share a line the
	   type drops below the date instead of running past the popup edge. */
	.individual-envisioning .pop_up__date {
		white-space: nowrap;
	}
}

@media (min-width: 900px) {
	.individual-envisioning .volume-details__subsections {
		flex-flow: unset;
		align-items: center;
		font-size: 20px;
	}

	.individual-envisioning .volume-details__separator {
		display: initial;
		padding: 0 10px;
		color: #767676;
	}

	.individual-envisioning .volume-description__preface-podcast-container {
		margin-left: 3em;
		align-items: center;
		/* Desktop keeps the legacy 400px; the 410px cap only applies below 900px. */
		max-width: 400px;
	}

	.individual-envisioning .volume-description__container {
		flex-direction: row;
		align-items: start;
	}
}

@media (min-width: 1024px) {
	.individual-envisioning .volume-description__container,
	.individual-envisioning .volume-details {
		width: 100%;
		max-width: calc(1024px - 2rem);
		margin-inline: auto;
	}

	.individual-envisioning .volume-subsection__title {
		padding: 4rem 0 1rem;
	}

	.individual-envisioning .volume-subsection__speeches {
		grid-template-columns: repeat(3, minmax(0, 325px));
		grid-gap: 0.5rem;
	}
}

@media (max-width: 1023px) {
	.individual-envisioning .volumes__cross-links {
		margin-bottom: 5px;
	}

	.individual-envisioning .volumes__cross-links:has(.cross-links--container.is-open) {
		padding-bottom: 0;
	}
}

/* Desktop cross-links: inline row, dropdown always visible, no arrow/accordion. */
@media (min-width: 1081px) {
	.individual-envisioning .volumes__cross-links {
		cursor: default;
	}

	.individual-envisioning .volume-pdf__mobile-wrapper {
		display: none;
	}

	.individual-envisioning .cross-links--container {
		flex-flow: row;
		align-items: center;
		max-width: calc(1024px - 2rem);
	}

	.individual-envisioning .cross-links__title--accordion {
		width: auto;
		margin: 0;
		cursor: default;
	}

	.individual-envisioning .title__button--arrow {
		display: none;
	}

	.individual-envisioning .cross-links__dropdown {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		width: auto;
		margin: 0;
	}

	.individual-envisioning .cross-links__individual {
		margin: 0;
		padding: 0.4675rem 0.8125rem;
		border-radius: 5px;
	}

	.individual-envisioning .cross-links__separator {
		display: inline;
	}

	.individual-envisioning .cross-links__pdf {
		display: flex;
	}
}