/*
 * Craft Timeline ("Philadelphia Resurgent") section.
 * Loaded only on the Craft Timeline page templates; every rule is scoped under .ct.
 */

/* Design tokens. Colors sampled from _reference/timeline-homepage-mockup-10-23-26.pdf.
   TODO: replace with exact hex values and fonts from the book file. */
.ct {
	--ct-slate: #5a81a0;       /* title band; white text only at large sizes (4.1:1) */
	--ct-slate-deep: #4d7190;  /* subnav and buttons; white text passes AA at body size (5.1:1) */
	--ct-cream: #f9f8f4;       /* credit block */
	--ct-brown: #513716;       /* credit block text */
	--ct-ink: #111;
	/* Cover section-link colors (10-23 design). White text is large and bold, so 3:1 applies. */
	--ct-c-foreword: #a8843a;     /* design is #c19d53 (2.6:1 with white); darkened to 3.5:1 */
	--ct-c-introduction: #ba7357; /* 3.7:1 */
	--ct-c-timeline: #9e546f;     /* 5.3:1 */
	--ct-c-artists: #766d9a;      /* 4.9:1 */
	--ct-c-map: #5a81a0;          /* 4.1:1 */
	--ct-donate: #87a35b;      /* Donate button; client's choice, 2.8:1 with white */
	--ct-donate-deep: #65803f; /* Donate hover/focus (4.5:1 with white) */
	--ct-white: #fff;
	--ct-muted: #5a5f66;
	--ct-rule: #d9dee3;
	--ct-focus: #111;          /* focus ring on light surfaces (18:1 on white) */
	--ct-focus-on-dark: #fff;  /* on the slate subnav and colored cover tiles (3.5:1 or more) */
	/* TODO: book fonts. Until then, inherit Divi's site fonts. */
	--ct-font-display: inherit;
	--ct-font-body: inherit;
	--ct-measure: 70ch;
	--ct-max: 1280px;
	--ct-gutter: clamp(16px, 4vw, 40px);
	--ct-embed-ratio: 16 / 9;
	/* What's fixed above the sticky subnav. craft-timeline.js measures it (the admin
	   bar and, if Divi's fixed navigation is on, the header); these are the fallbacks. */
	--ct-sticky-top: 0px;
	--ct-subnav-h: 48px;

	background: var(--ct-white);
	color: var(--ct-ink);
	font-family: var(--ct-font-body);
}

.ct *,
.ct *::before,
.ct *::after {
	box-sizing: border-box;
}

/* Site-wide heading styles (Divi customizer, Easy Google Fonts) set a white
   background, Playfair Display and a tall line-height on h1–h6. Reset them here. */
.ct h1,
.ct h2,
.ct h3,
.ct h4 {
	background: none;
	color: inherit;
	font-family: var(--ct-font-display);
	font-style: normal;
	line-height: 1.2;
	text-transform: none;
}

/* Easy Google Fonts sets a gray color, size and line-height on p, and a fixed
   size and font on strong/b. */
.ct p {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.ct strong,
.ct b {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

.ct img {
	display: block;
	max-width: 100%;
	height: auto;
}

.ct a:focus-visible {
	outline: 3px solid var(--ct-focus);
	outline-offset: 2px;
}

.ct .ct-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ct .ct-wrap {
	max-width: var(--ct-max);
	margin: 0 auto;
	padding: 0 var(--ct-gutter);
}

.ct .ct-todo {
	margin: 1.5em 0;
	padding: 1.25em 1.5em;
	border: 2px dashed #c0392b;
	background: #fff6f4;
	color: #7a1f14;
	font-weight: 700;
}

/* Editor notes (.ct-todo, .ct-todo-inline) are only for people who can edit
   pages; the body class comes from inc/craft-timeline.php. */
body:not(.ct-show-todos) .ct .ct-todo,
body:not(.ct-show-todos) .ct .ct-todo-inline {
	display: none;
}

/* ---------- Subnav ---------- */

/* Divi's overflow: hidden here would stop the subnav from sticking; clip still clips. */
body.ct-page #page-container {
	overflow: clip;
}

.admin-bar .ct {
	--ct-sticky-top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .ct { --ct-sticky-top: 46px; }
}

/* WordPress scrolls the admin bar away on phones. */
@media (max-width: 600px) {
	.admin-bar .ct { --ct-sticky-top: 0px; }
}

.ct .ct-subnav {
	position: sticky;
	top: var(--ct-sticky-top);
	z-index: 100; /* below Divi's header, its mobile menu and the admin bar */
	background: var(--ct-slate-deep);
}

/* One row at every width: centered when it fits, scrolls sideways when it doesn't. */
.ct .ct-subnav__list {
	display: flex;
	gap: 0 .25rem;
	max-width: var(--ct-max);
	margin: 0 auto;
	padding: 0 var(--ct-gutter);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.ct .ct-subnav__list::-webkit-scrollbar {
	display: none;
}

/* Fade the edge that has more links (classes set by craft-timeline.js). */
.ct .ct-subnav__list.has-more-start {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 32px);
	mask-image: linear-gradient(to right, transparent, #000 32px);
}

.ct .ct-subnav__list.has-more-end {
	-webkit-mask-image: linear-gradient(to left, transparent, #000 32px);
	mask-image: linear-gradient(to left, transparent, #000 32px);
}

.ct .ct-subnav__list.has-more-start.has-more-end {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
	mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

.ct .ct-subnav__item {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

/* Auto margins center the row without cutting off its start when it overflows. */
.ct .ct-subnav__item:first-child { margin-left: auto; }
.ct .ct-subnav__item:last-child { margin-right: auto; }

.ct .ct-subnav__link {
	display: block;
	padding: .75rem .85rem;
	color: var(--ct-white);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
}

@media (max-width: 1023px) {
	.ct .ct-subnav__link {
		padding: .7rem .6rem;
		font-size: 14px;
		letter-spacing: .04em;
	}
}

.ct .ct-subnav__link:hover {
	border-bottom-color: rgba(255, 255, 255, .6);
}

.ct .ct-subnav__link[aria-current="page"] {
	border-bottom-color: var(--ct-white);
	font-weight: 800;
}

.ct .ct-subnav__link:focus-visible {
	outline-color: var(--ct-focus-on-dark);
	outline-offset: -3px;
}

/* ---------- Back to top ---------- */

.ct .ct-to-top {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: max(16px, env(safe-area-inset-bottom));
	z-index: 100;
	display: inline-flex;
	align-items: center;
	gap: .4em;
	min-height: 44px;
	padding: .55em 1.1em;
	border-radius: 999px;
	background: var(--ct-slate-deep);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
	color: var(--ct-white);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: opacity .2s, visibility .2s;
}

.ct .ct-to-top:hover {
	background: var(--ct-ink);
	color: var(--ct-white);
}

/* Dark ring with a white halo: the link floats over light pages and the dark footer. */
.ct .ct-to-top:focus-visible {
	outline: 3px solid var(--ct-focus);
	outline-offset: 0;
	box-shadow: 0 0 0 6px var(--ct-white);
}

/* Hidden near the top of the page (craft-timeline.js); visibility also takes it out of the tab order. */
.ct .ct-to-top.is-hidden {
	opacity: 0;
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.ct .ct-to-top { transition: none; }
}

/* ---------- Page header (inner pages) ---------- */

.ct .ct-page-header {
	background: var(--ct-slate);
	color: var(--ct-white);
	padding: clamp(28px, 5vw, 56px) 0;
}

.ct .ct-page-header h1 {
	margin: 0;
	padding: 0;
	color: var(--ct-white);
	font-family: var(--ct-font-display);
	font-size: clamp(30px, 5vw, 52px);
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
}

.ct .ct-page-header p {
	margin: .5em 0 0;
	padding: 0;
	color: var(--ct-white);
	font-size: clamp(18px, 2.2vw, 24px);
	line-height: 1.3;
}

.ct .ct-section {
	padding: clamp(32px, 6vw, 72px) 0;
}

/* ---------- Landing graphic ---------- */

.ct .ct-cover__title {
	background: var(--ct-slate);
	color: var(--ct-white);
	padding: clamp(24px, 4vw, 48px) var(--ct-gutter);
}

.ct .ct-cover__title h1 {
	margin: 0;
	padding: 0;
	color: var(--ct-white);
	font-family: var(--ct-font-display);
	font-size: clamp(32px, 6vw, 72px);
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}

.ct .ct-cover__subtitle {
	display: block;
	margin-top: .6em;
	font-size: clamp(19px, 2.4vw, 34px);
	font-weight: 500;
	line-height: 1.2;
	text-transform: none;
}

.ct .ct-cover__subtitle strong {
	font-weight: 800;
	text-transform: uppercase;
}

/* Section links: one color per section, as on the cover. Large bold text keeps
   white-on-color at or above the 3:1 large-text contrast threshold. */
.ct .ct-cover__nav ul {
	display: grid;
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct .ct-cover__nav li {
	margin: 0;
	padding: 0;
}

.ct .ct-cover__nav-foreword { background: var(--ct-c-foreword); }
.ct .ct-cover__nav-introduction { background: var(--ct-c-introduction); }
.ct .ct-cover__nav-timeline { background: var(--ct-c-timeline); }
.ct .ct-cover__nav-artists { background: var(--ct-c-artists); }
.ct .ct-cover__nav-map { background: var(--ct-c-map); }

.ct .ct-cover__nav a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: .6rem 1rem;
	color: var(--ct-white);
	font-family: var(--ct-font-display);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: .03em;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
}

.ct .ct-cover__nav a:hover {
	background: rgba(0, 0, 0, .14);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ct .ct-cover__nav a:focus-visible {
	outline-color: var(--ct-focus-on-dark);
	outline-offset: -4px;
}

.ct .ct-cover__info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding: clamp(20px, 3vw, 40px) var(--ct-gutter);
	background: var(--ct-cream);
	border-bottom: clamp(6px, .55vw, 10px) solid var(--ct-slate);
	color: var(--ct-brown);
}

.ct .ct-cover__credit {
	flex: 1 1 18rem;
	margin: 0;
	padding: 0;
	font-size: clamp(17px, 1.55vw, 23px);
	line-height: 1.4;
}

.ct .ct-cover__credit p {
	margin: 0;
	padding: 0;
}

.ct .ct-cover__credit strong {
	font-weight: 800;
}

.ct .ct-cover__publisher {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .4rem;
	margin: 0;
	padding: 0;
	font-weight: 800;
	font-size: clamp(15px, 1.3vw, 19px);
	line-height: 1.2;
	text-align: center;
}

.ct .ct-cover__publisher img {
	width: clamp(110px, 12vw, 170px);
	height: auto;
}

.ct .ct-tile {
	margin: 0;
	overflow: hidden;
	background: var(--ct-rule);
}

.ct .ct-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Keep the subject in frame when a tile crops its photo. */
.ct .ct-tile--hero img { object-position: 72% 50%; }
.ct .ct-tile--drutt img { object-position: 50% 10%; }

/* Mobile: title, then a 2-column photo grid, credit last. The colored section
   links are hidden here; the subnav above the cover links to the same pages. */
.ct .ct-cover {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"title    title"
		"hero     hero"
		"interior glass"
		"vessel   museum"
		"textile  boxes"
		"textile  drutt"
		"info     info";
}

.ct .ct-cover__title { grid-area: title; }
.ct .ct-cover__nav { grid-area: nav; display: none; }
.ct .ct-cover__info { grid-area: info; }
.ct .ct-tile--hero { grid-area: hero; aspect-ratio: 4 / 3; }
.ct .ct-tile--interior { grid-area: interior; }
.ct .ct-tile--glass { grid-area: glass; }
.ct .ct-tile--textile { grid-area: textile; }
.ct .ct-tile--vessel { grid-area: vessel; }
.ct .ct-tile--museum { grid-area: museum; }
.ct .ct-tile--boxes { grid-area: boxes; }
.ct .ct-tile--drutt { grid-area: drutt; }
.ct .ct-tile--interior,
.ct .ct-tile--glass,
.ct .ct-tile--vessel,
.ct .ct-tile--museum,
.ct .ct-tile--boxes,
.ct .ct-tile--drutt { aspect-ratio: 1.28 / 1; }

/* Tablet and up: the cover layout, on a 5-column grid. */
@media (min-width: 768px) {
	.ct .ct-cover {
		grid-template-columns: repeat(5, 1fr);
		grid-template-areas:
			"title title title    title  title"
			"hero  hero  interior glass  textile"
			"hero  hero  vessel   museum textile"
			"nav   nav   nav      nav    nav"
			"boxes drutt info     info   info";
	}

	.ct .ct-cover__title {
		display: flex;
		align-items: center;
		gap: .5em 1.25em;
		flex-wrap: wrap;
	}

	.ct .ct-cover__title h1 {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: .2em .5em;
	}

	.ct .ct-cover__subtitle {
		margin-top: 0;
		font-size: clamp(17px, 2vw, 34px);
	}

	.ct .ct-tile--hero { aspect-ratio: auto; }

	.ct .ct-cover__nav {
		display: block;
		grid-column: 1 / -1;
	}

	.ct .ct-cover__nav ul {
		grid-template-columns: repeat(5, 1fr);
	}

	.ct .ct-cover__nav a {
		min-height: 64px;
		padding: .5rem;
		font-size: clamp(19px, 1.85vw, 26px);
	}
}

/* Desktop: subtitle sits beside the title as three lines, as on the cover. */
@media (min-width: 1024px) {
	.ct .ct-cover__title h1 {
		flex-wrap: nowrap;
		gap: .6em;
		font-size: min(3.9vw, 70px);
	}

	.ct .ct-cover__title h1 > span:first-child {
		white-space: nowrap;
	}

	.ct .ct-cover__subtitle {
		font-size: min(1.85vw, 33px);
	}

	.ct .ct-cover__subtitle > * {
		display: block;
		white-space: nowrap;
	}
}

/* ---------- Donate box (above the Foreword heading) ---------- */

.ct .ct-donate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	margin: 0 0 2.5rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--ct-rule);
	border-left: 4px solid var(--ct-slate);
	border-radius: 4px;
	background: var(--ct-white);
}

.ct .ct-donate__body {
	flex: 1 1 20rem;
}

.ct .ct-donate .ct-donate__title {
	margin: 0 0 .25em;
	padding: 0;
	font-family: var(--ct-font-display);
	font-size: 1.1em;
	font-weight: 800;
	line-height: 1.3;
}

.ct .ct-donate .ct-donate__text {
	margin: 0;
	padding: 0;
	color: var(--ct-muted);
	font-size: .95em;
	line-height: 1.5;
}

/* Client's green with white text (2.8:1, their choice); a heavier label helps it read. */
.ct .ct-donate .ct-donate__button {
	flex: 0 0 auto;
	background: var(--ct-donate);
	color: var(--ct-white); /* beats the prose link color */
	font-weight: 800;
	text-decoration: none;
}

/* Darker green on hover and focus; the .ct a:focus-visible ring still applies. */
.ct .ct-donate .ct-donate__button:hover,
.ct .ct-donate .ct-donate__button:focus-visible {
	background: var(--ct-donate-deep);
	color: var(--ct-white);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Foreword ---------- */

/* In-page targets (Foreword, endnotes) land below the sticky subnav. */
.ct [id] {
	scroll-margin-top: calc(var(--ct-sticky-top) + var(--ct-subnav-h) + 16px);
}

.ct #foreword:focus {
	outline: none;
}

/* ---------- Long-form reading (Foreword + Introduction) ---------- */

.ct .ct-prose {
	max-width: var(--ct-measure);
	margin: 0 auto;
	font-size: clamp(17px, 1.3vw, 19px);
	line-height: 1.7;
}

.ct .ct-prose h2 {
	margin: 0 0 .6em;
	padding: 0;
	font-family: var(--ct-font-display);
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 800;
	line-height: 1.2;
}

.ct .ct-prose h3 {
	margin: 1.6em 0 .5em;
	padding: 0;
	font-size: 1.25em;
	line-height: 1.3;
}

.ct .ct-prose p {
	margin: 0 0 1.2em;
	padding: 0;
}

.ct .ct-prose a {
	color: var(--ct-slate-deep);
	text-decoration: underline;
}

.ct .ct-prose figure {
	margin: 2em 0;
}

/* Sized by the width attribute, capped at the column: small photos aren't upscaled. */
.ct .ct-prose figure img {
	max-width: 100%;
	margin: 0 auto;
}

/* Don't upscale small photos; placeholders still fill the column. */
.ct .ct-prose figure img[src$="ct-placeholder.svg"] {
	width: 100%;
}

.ct .ct-prose figcaption {
	margin-top: .6em;
	color: var(--ct-muted);
	font-size: .85em;
	line-height: 1.45;
}

/* Introduction: centered at the image's own width (never upscaled), captions
   wrap to that width; half the column from tablets up. With width: auto the
   image shows at the sizes value from the wp_calculate_image_sizes filter in
   inc/craft-timeline.php (360px from 768px up), so change the 50% and that
   value together. */
.ct--introduction .ct-prose figure:not(.ct-figure--wide):not(.alignwide) {
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.ct--introduction .ct-prose figure:not(.ct-figure--wide):not(.alignwide) img {
	width: auto;
	max-width: 100%;
}

.ct--introduction .ct-prose figure:not(.ct-figure--wide):not(.alignwide) figcaption {
	contain: inline-size; /* a long caption doesn't widen the figure */
}

@media (min-width: 768px) {
	.ct--introduction .ct-prose figure:not(.ct-figure--wide):not(.alignwide) {
		max-width: 50%;
	}
}

/* Images that break out of the text column on wide screens. */
@media (min-width: 1024px) {
	.ct .ct-prose .ct-figure--wide,
	.ct .ct-prose .alignwide {
		width: min(100vw - 2 * var(--ct-gutter), 1100px);
		max-width: none;
		margin-left: 50%;
		transform: translateX(-50%);
	}
}

.ct .ct-prose ul {
	margin: 0 0 1.2em 1.25em;
	padding: 0;
	list-style: disc;
}

.ct .ct-prose li {
	margin: 0 0 .4em;
	padding: 0;
}

.ct .ct-prose sup {
	font-size: .7em;
	line-height: 0;
	vertical-align: super;
}

.ct .ct-prose sup a {
	padding: 0 .1em;
	text-decoration: none;
}

.ct .ct-prose .ct-notes {
	margin: 0 0 1.2em 1.5em;
	padding: 0;
	list-style: decimal;
	font-size: .85em;
	line-height: 1.55;
}

.ct .ct-prose .ct-notes li {
	margin-bottom: .75em;
}

.ct .ct-prose .ct-notes li:target {
	background: #fff6d8;
}

.ct .ct-signature {
	font-style: italic;
}

.ct .ct-bio {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	margin-top: 2em;
	padding-top: 1.25em;
	border-top: 1px solid var(--ct-rule);
	color: var(--ct-muted);
	font-size: .9em;
}

.ct .ct-bio .ct-bio__photo {
	flex: 0 0 auto;
	width: 120px;
	height: auto;
	margin: 0;
}

.ct .ct-bio p {
	margin: 0;
	font-style: italic;
}

/* wpautop wraps the photo in a <p>; keep that from shrinking to nothing. */
.ct .ct-bio > p:has(> .ct-bio__photo) {
	flex: 0 0 auto;
}

@media (max-width: 479px) {
	.ct .ct-bio {
		flex-direction: column;
	}
}

/* Titles read as roman inside the italic bio. */
.ct .ct-bio em {
	font-style: normal;
}

.ct .ct-credit {
	display: block;
	margin-top: .2em;
	font-size: .9em;
	font-style: italic;
}

.ct .ct-todo-inline {
	color: #b03a2e;
	font-weight: 700;
}

.ct .ct-byline {
	font-size: clamp(18px, 2vw, 22px);
}

/* ---------- Image credits (Timeline page content; landing, below the Foreword) ---------- */

.ct .ct-credits-wrap {
	padding-bottom: clamp(32px, 6vw, 72px);
}

.ct .ct-credits {
	border-top: 1px solid var(--ct-rule);
	border-bottom: 1px solid var(--ct-rule);
	font-size: clamp(16px, 1.2vw, 17px);
	line-height: 1.6;
}

.ct .ct-credits > summary {
	display: flex;
	align-items: center;
	gap: .6em;
	min-height: 48px;
	padding: .5em 0;
	color: var(--ct-slate-deep);
	font-size: clamp(17px, 1.3vw, 19px);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.ct .ct-credits > summary::-webkit-details-marker {
	display: none;
}

/* Chevron: points right when closed, down when open. */
.ct .ct-credits > summary::before {
	content: "";
	flex: 0 0 auto;
	width: .5em;
	height: .5em;
	margin: 0 .15em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform .15s ease;
}

.ct .ct-credits[open] > summary::before {
	transform: rotate(45deg);
}

.ct .ct-credits > summary:hover {
	color: var(--ct-ink);
	text-decoration: underline;
	text-underline-offset: .2em;
}

.ct .ct-credits > summary:focus-visible {
	outline: 3px solid var(--ct-focus);
	outline-offset: 2px;
}

.ct .ct-credits[open] {
	padding-bottom: 1em;
}

.ct .ct-prose .ct-credits h3,
.ct .ct-prose .ct-credits h4 {
	padding: 0;
	color: var(--ct-ink);
	font-weight: 700;
	line-height: 1.3;
}

.ct .ct-prose .ct-credits h3 {
	margin: 1.4em 0 .4em;
	font-size: 1.15em;
}

.ct .ct-prose .ct-credits h4 {
	margin: 1.1em 0 .2em;
	font-size: 1em;
}

.ct .ct-prose .ct-credits p {
	margin: 0 0 .8em;
}

.ct .ct-prose .ct-credits ul {
	margin: 0 0 .8em 1.25em;
}

.ct .ct-prose .ct-credits .ct-credits__abbr {
	margin-left: 0;
	list-style: none;
}

.ct .ct-prose .ct-credits li {
	margin-bottom: .25em;
}

@media (prefers-reduced-motion: reduce) {
	.ct .ct-credits > summary::before { transition: none; }
}

/* ---------- Timeline embed ---------- */

.ct .ct-embed {
	position: relative;
	width: 100%;
	aspect-ratio: var(--ct-embed-ratio);
	min-height: 420px;
	background: var(--ct-cream);
}

.ct .ct-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Page viewer for the InDesign HTML5 export (ct-timeline.php). The stage keeps the
   export's pixel size and craft-timeline.js scales it to the box, which is capped
   so a whole spread fits in the viewport. Two iframes take turns: the next page
   loads in the hidden one, then fades or flips in, so there's no blank flash. A
   flip also uses two "twin" iframes for the second copy of each page. Zoomed in,
   the stage is scaled past the box and the scroller scrolls; the sizer gives it
   the scaled stage's size, which a transform alone doesn't. */
.ct .ct-embed--stage {
	max-width: min(100%, calc((100svh - 200px) * var(--ct-embed-ratio)));
	min-height: 0;
	margin-inline: auto;
	overflow: hidden;
	background: var(--ct-white);
}

.ct .ct-book__scroller {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.ct .ct-book.is-zoomed .ct-book__scroller {
	overflow: auto;
	overscroll-behavior: contain;
}

.ct .ct-book__scroller:focus-visible {
	outline: 3px solid var(--ct-focus);
	outline-offset: -3px;
}

.ct .ct-book__sizer {
	position: relative;
	width: calc(var(--ct-stage-w) * var(--ct-stage-scale, 1) * 1px);
	aspect-ratio: var(--ct-embed-ratio);
}

.ct .ct-book__stage {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(var(--ct-stage-w) * 1px);
	aspect-ratio: var(--ct-embed-ratio);
	transform: scale(var(--ct-stage-scale, 1));
	transform-origin: 0 0;
	overflow: hidden; /* a page lifting toward the viewer grows past the stage */
}

.ct .ct-embed .ct-book__page {
	inset: 0 auto auto 0; /* left, width and height come from the markup */
	max-width: none;      /* Divi caps iframes at 100% */
	background: var(--ct-white);
	opacity: 0;
	pointer-events: none;
}

.ct .ct-embed .ct-book__page.is-current {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}

/* Turning a page: the new one fades in on top of the old, which stays opaque
   underneath until the fade ends, so nothing behind them shows through. */
.ct .ct-embed .ct-book__page.is-entering {
	z-index: 2;
	transition: opacity .35s ease-out;
	will-change: opacity;
}

/* Flipping a page (craft-timeline.js). Each frame sits in a fold wrapper; at rest
   the wrapper just covers the stage. During a flip the script makes the wrappers
   large and moves their edge onto the fold line, so they clip the pages along
   it. The frames and shades taking part are shown but can't be clicked. */
.ct .ct-book__fold {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
}

.ct .ct-embed .ct-book__page.is-turning,
.ct .ct-book__shade.is-turning {
	opacity: 1;
	pointer-events: none;
}

.ct .ct-book__shade {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	pointer-events: none;
}

.ct .ct-book__shade.is-turning {
	display: block;
}

/* The turning page's back: darker in the crease, with a soft highlight just
   past it, as on a page bending over. */
.ct .ct-book__shade--crease {
	z-index: 2;
	background: linear-gradient(to left, rgb(0 0 0 / .22), rgb(0 0 0 / .06) 12%, rgb(255 255 255 / .12) 30%, rgb(255 255 255 / 0) 60%);
}

/* Shade along the spine (craft-timeline.js sets where and how). Over the page
   but never in the way of clicks; fades while the cover opens or closes. */
.ct .ct-book__gutter {
	position: absolute;
	top: 0;
	z-index: 2;
	height: 100%;
	pointer-events: none;
	transition: opacity .2s;
}

.ct .ct-book__gutter.is-hidden {
	opacity: 0;
}

/* The turning page's shadow on the pages under it. */
.ct .ct-book__shade--drop {
	box-shadow: 0 0 28px rgb(0 0 0 / .3);
}

.ct .ct-book__turn {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / .85);
	color: var(--ct-ink);
	font-size: 22px;
	line-height: 1;
	box-shadow: 0 1px 4px rgb(0 0 0 / .25);
	cursor: pointer;
}

.ct .ct-book__turn--prev { left: 8px; }
.ct .ct-book__turn--next { right: 8px; }

.ct .ct-book__turn:hover { background: var(--ct-white); }

.ct .ct-book__turn:focus-visible {
	outline: 3px solid var(--ct-focus);
	outline-offset: 2px;
}

.ct .ct-book__turn:disabled {
	visibility: hidden;
}

.ct .ct-book__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5rem 1rem;
	margin-top: .75rem;
}

.ct .ct-book__status {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 15px;
	color: var(--ct-ink);
}

.ct .ct-book__full {
	min-height: 44px;
	padding: .5em 1em;
	border: 0;
	border-radius: 2px;
	background: var(--ct-slate-deep);
	color: var(--ct-white);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.ct .ct-book__full:hover { background: var(--ct-ink); }

.ct .ct-book__full:focus-visible {
	outline: 3px solid var(--ct-focus);
	outline-offset: 2px;
}

.ct .ct-book__full[hidden] { display: none; }

.ct .ct-book__zoom {
	display: flex;
	align-items: center;
	gap: 4px;
}

.ct .ct-book__zoom[hidden] { display: none; }

.ct .ct-book__zoom-button,
.ct .ct-book__sound {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--ct-slate-deep);
	border-radius: 2px;
	background: var(--ct-white);
	color: var(--ct-slate-deep);
	line-height: 0;
	cursor: pointer;
}

/* SVG icons rather than − and + characters, which sit off center in most fonts. */
.ct .ct-book__zoom-button svg,
.ct .ct-book__sound svg {
	display: block;
}

.ct .ct-book__zoom-button:hover:not(:disabled),
.ct .ct-book__sound:hover {
	background: var(--ct-slate-deep);
	color: var(--ct-white);
}

.ct .ct-book__zoom-button:focus-visible,
.ct .ct-book__sound:focus-visible {
	outline: 3px solid var(--ct-focus);
	outline-offset: 2px;
}

/* Dimmed rather than hidden, so the controls don't shift. */
.ct .ct-book__zoom-button:disabled {
	opacity: .4;
	cursor: default;
}

/* Page-turn sound on/off (craft-timeline.js): the icon shows the current state. */
.ct .ct-book__sound[hidden] { display: none; }
.ct .ct-book__sound .ct-book__sound-off,
.ct .ct-book__sound.is-muted .ct-book__sound-on { display: none; }
.ct .ct-book__sound.is-muted .ct-book__sound-off { display: block; }

.ct .ct-book__zoom-level {
	min-width: 3.5em;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: var(--ct-ink);
}

/* Full screen (craft-timeline.js): the viewer fills the screen, through the
   Fullscreen API or, where that's missing (iPhone Safari), fixed over the window
   ("is-filling"). The page box is as wide as fits both the width and the height
   left over by the bar; the stage scales to it as usual. Keyed to the actual
   state, not "is-full", so nothing changes while a request is still pending. */
.ct .ct-book:is(.is-filling, :fullscreen, :-webkit-full-screen) {
	--ct-full-pad: 8px;
	--ct-full-bar: 52px; /* the bar plus the gap above it; craft-timeline.js measures it */
	container-type: size;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	/* No side padding: on narrow screens a spread is limited by the width. */
	padding:
		max(var(--ct-full-pad), env(safe-area-inset-top))
		env(safe-area-inset-right)
		max(var(--ct-full-pad), env(safe-area-inset-bottom))
		env(safe-area-inset-left);
	background: var(--ct-white);
}

.ct .ct-book:is(.is-filling, :fullscreen, :-webkit-full-screen) .ct-embed--stage {
	flex: none;
	max-width: min(100%, calc((100dvh - 2 * var(--ct-full-pad) - var(--ct-full-bar)) * var(--ct-embed-ratio)));
	max-width: min(100%, calc((100cqh - var(--ct-full-bar)) * var(--ct-embed-ratio)));
}

.ct .ct-book:is(.is-filling, :fullscreen, :-webkit-full-screen) .ct-book__bar {
	flex: none;
	margin-top: 8px;
}

.ct .ct-book.is-filling {
	position: fixed;
	inset: 0;
	z-index: 2147483000; /* over Divi's header and the admin bar */
	height: 100vh;
	height: 100dvh;
}

/* While the viewer is full screen: lock the page's scroll and hide what's fixed
   over it, in case a stacking context lets any of it show through. */
html.ct-book-open,
html.ct-book-open body {
	overflow: hidden;
	overscroll-behavior: none;
}

html.ct-book-open #wpadminbar,
html.ct-book-open #top-header,
html.ct-book-open #main-header,
html.ct-book-open .ct .ct-subnav,
html.ct-book-open .ct .ct-to-top {
	visibility: hidden;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.ct .ct-embed .ct-book__page.is-entering { transition: none; }
	.ct .ct-book__shade { display: none !important; } /* craft-timeline.js doesn't flip then */
	.ct .ct-book__gutter { transition: none; }
}

.ct .ct-button {
	display: inline-block;
	padding: .75em 1.25em;
	background: var(--ct-slate-deep);
	color: var(--ct-white);
	font-weight: 700;
	text-decoration: none;
	border-radius: 2px;
}

.ct .ct-button:hover {
	background: var(--ct-ink);
}

/* ---------- Artists ---------- */

.ct .ct-artists__intro {
	margin: 0 0 2rem;
	max-width: var(--ct-measure);
}

.ct .ct-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem 1.5rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.ct .ct-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.ct .ct-cards { grid-template-columns: repeat(4, 1fr); }
}

.ct .ct-card {
	margin: 0;
	padding: 0;
}

.ct .ct-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	margin-bottom: .75rem;
	overflow: hidden;
	background: var(--ct-cream);
}

.ct .ct-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ct .ct-card__initials {
	color: var(--ct-slate);
	font-family: var(--ct-font-display);
	font-size: clamp(36px, 5vw, 56px);
	font-weight: 800;
	letter-spacing: .04em;
}

.ct .ct-card__name {
	margin: 0 0 .25em;
	padding: 0;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
}

.ct .ct-card__name a {
	color: var(--ct-ink);
	text-decoration: underline;
	text-decoration-color: var(--ct-slate);
	text-underline-offset: 3px;
}

.ct .ct-card__name a:hover {
	color: var(--ct-slate-deep);
}

.ct .ct-card__meta,
.ct .ct-card__award {
	margin: 0;
	padding: 0;
	color: var(--ct-muted);
	font-size: 16px;
	line-height: 1.45;
}

/* ---------- Map ---------- */

.ct .ct-map__key {
	margin: 0 0 .75rem;
}

.ct .ct-map__key-title {
	margin: 0 0 .4rem;
	padding: 0;
	font-size: 16px;
	font-weight: 700;
}

.ct .ct-map__key-list {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct .ct-map__key-item {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.4;
}

/* Matches the pin. */
.ct .ct-map__swatch {
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--ct-swatch);
	print-color-adjust: exact;
	-webkit-print-color-adjust: exact;
}

.ct .ct-map__hint {
	max-width: var(--ct-measure);
	margin: 0 0 1.25rem;
	padding: 0;
	font-size: clamp(17px, 1.3vw, 19px);
	line-height: 1.5;
}

/* Keep the key and hint short on phones so the map shows in the first screen. */
@media (max-width: 600px) {
	.ct .ct-map__key-title,
	.ct .ct-map__key-item,
	.ct .ct-map__hint {
		font-size: 15px;
	}

	.ct .ct-map__key-list {
		gap: .3rem 1rem;
	}
}

.ct .ct-map {
	min-height: 300px;
}

/* Storepoint pins its map (and a detail panel's header) to the top of the viewport
   on phones, with !important; keep them below the sticky subnav. */
.ct .ct-map .storepoint-map,
.ct .ct-map .storepoint-location-detail-panel-header {
	top: calc(var(--ct-sticky-top) + var(--ct-subnav-h)) !important;
}

.ct .ct-artists__heading {
	margin: 0 0 .75em;
	padding: 0;
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 800;
}

.ct .ct-cards + .ct-artists__heading {
	margin-top: 3rem;
}