/*
 * Clock Radio — editorial reading composition
 *
 * One source for typography, measure, featured artwork, contributor biography,
 * discussion and post navigation. Identity comes only from --cr-* look tokens.
 * No generated Bricks selectors, per-post rules, or specificity patches.
 */

.cr-reading {
	--cr-reading-width: 710px;
	min-height: 55vh;
	background: var(--cr-paper);
	color: var(--cr-ink);
	padding-block-end: clamp(54px, 8vw, 105px);
}

.cr-reading--visual {
	--cr-reading-width: 1060px;
}

.cr-reading__intro {
	background: var(--cr-paper);
	padding-block: clamp(30px, 3.6vw, 46px) 0;
}

.cr-reading__frame {
	box-sizing: border-box;
	width: min(calc(100% - 48px), var(--cr-reading-width));
	margin-inline: auto;
}

.cr-reading__footer-kicker {
	margin: 0;
	color: var(--cr-red);
	font: 700 11px/1.4 var(--cr-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
}

.cr-reading__title {
	max-width: 22ch;
	margin: 0;
	color: var(--cr-ink);
	font-family: var(--cr-display);
	font-size: clamp(43px, 5vw, 65px);
	font-weight: 600;
	letter-spacing: -.028em;
	line-height: 1.045;
	overflow-wrap: break-word;
	text-wrap: balance;
}

.cr-reading__author {
	margin: clamp(12px, 1.6vw, 18px) 0 0;
	color: var(--cr-ink);
	font: 600 clamp(18px, 1.75vw, 20px)/1.35 var(--cr-reading);
	letter-spacing: 0;
}

.cr-reading__author a,
.cr-reading__author-block h2 a {
	color: var(--cr-ink);
	text-decoration: none;
	text-underline-offset: .18em;
}

.cr-reading__author a:hover,
.cr-reading__author a:focus-visible,
.cr-reading__author-block h2 a:hover,
.cr-reading__author-block h2 a:focus-visible {
	color: var(--cr-red);
	text-decoration: underline;
}

.cr-reading__issue-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-block-start: 18px;
	font: 700 11px/1.6 var(--cr-sans);
	letter-spacing: .07em;
	text-transform: uppercase;
}

.cr-reading__issue-links a {
	color: var(--cr-red);
	text-decoration: underline;
	text-underline-offset: .25em;
}

.cr-reading__frame--content {
	padding-block-start: clamp(30px, 3.3vw, 40px);
}

.cr-reading__composition {
	display: grid;
	align-items: start;
	row-gap: clamp(30px, 5vw, 58px);
	min-width: 0;
}

.cr-reading__plate {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	min-width: 0;
	width: 100%;
	margin: 0;
}

.cr-reading__plate-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 660px;
	margin-inline: auto;
	object-fit: contain;
}

.cr-reading__body {
	min-width: 0;
	color: var(--cr-ink);
	font-family: var(--cr-reading);
	font-size: clamp(20px, 1.8vw, 23px);
	font-weight: 500;
	line-height: 1.57;
	overflow-wrap: break-word;
}

.cr-reading__body > :first-child {
	margin-block-start: 0;
}

.cr-reading__body > :last-child {
	margin-block-end: 0;
}

.cr-reading__body p {
	margin-block: 0 1.35em;
}

.cr-reading--poetry .cr-reading__body {
	font-size: clamp(21px, 1.85vw, 24px);
	line-height: 1.5;
	letter-spacing: .005em;
}

.cr-reading--poetry .cr-reading__body p {
	margin-block-end: 1.6em;
}

.cr-reading--prose .cr-reading__body {
	max-width: 68ch;
}

.cr-reading--prose .cr-reading__plate {
	justify-content: flex-start;
	margin-block-end: clamp(8px, 2vw, 20px);
}

.cr-reading--prose .cr-reading__plate-img {
	max-height: 470px;
	margin-inline: 0;
}

.cr-reading--visual .cr-reading__composition {
	justify-items: center;
}

.cr-reading--visual .cr-reading__plate-img {
	max-height: 78vh;
	max-width: min(100%, 850px);
}

.cr-reading--visual .cr-reading__body {
	width: min(100%, 850px);
}

.cr-reading__body img,
.cr-reading__body picture,
.cr-reading__body video,
.cr-reading__body iframe {
	max-width: 100%;
	height: auto;
}

.cr-reading__body figure {
	max-width: 100%;
	margin-inline: auto;
}

.cr-reading__body figcaption {
	margin-block-start: 10px;
	color: var(--cr-muted);
	font: 400 13px/1.5 var(--cr-sans);
	text-align: center;
}

.cr-reading__body a {
	color: var(--cr-red);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}

.cr-reading__body .xenword_discuss_container {
	margin: clamp(26px, 3vw, 36px) 0 0;
	padding: 0;
	border: 0;
	color: var(--cr-muted);
	font: 600 13px/1.5 var(--cr-sans);
}

/* XenWord renders the comment link as a decorative speech bubble.
 * Normalize its presentation in the reading template without altering its URL. */
.cr-reading__body .xenword_discuss_container .xenword_speech_bubble,
.cr-reading__body .xenword_discuss_container .xenword_speech_bubble.count {
	display: inline;
	position: static;
	float: none;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.cr-reading__body .xenword_discuss_container .xenword_speech_bubble::before,
.cr-reading__body .xenword_discuss_container .xenword_speech_bubble::after {
	content: none;
	display: none;
}

.cr-reading__body .xenword_discuss_container a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--cr-red);
	font: inherit;
	text-decoration: none;
}

.cr-reading__body .xenword_discuss_container a::after {
	content: ' →';
}

.cr-reading__body .xenword_discuss_container a:hover,
.cr-reading__body .xenword_discuss_container a:focus-visible {
	text-decoration: underline;
}

.cr-reading__byline {
	max-width: 100%;
	margin: clamp(44px, 5vw, 62px) auto 0;
	padding-block-start: clamp(22px, 2.5vw, 28px);
	border-block-start: 1px solid var(--cr-line);
}

.cr-reading__author-block {
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr);
	gap: clamp(15px, 2vw, 24px);
	align-items: start;
}

.cr-reading__author-block > img,
.cr-reading__author-block .avatar,
.cr-reading__avatar {
	display: block;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	object-fit: cover;
}

.cr-reading__footer-kicker {
	margin-block: 0 8px;
}

.cr-reading__author-block h2 {
	margin: 0 0 10px;
	color: var(--cr-ink);
	font-family: var(--cr-display);
	font-size: clamp(27px, 2.7vw, 34px);
	font-weight: 600;
	line-height: 1.15;
}

.cr-reading__bio {
	color: var(--cr-bio-ink);
	font: 500 19px/1.55 var(--cr-reading);
}

.cr-reading__bio p {
	margin-block: 0 1em;
}

.cr-reading__byline .cr-more-author {
	margin-block-start: clamp(30px, 4vw, 42px);
	padding-block-start: clamp(24px, 3vw, 32px);
	border-block-start: 1px solid var(--cr-line);
}

.cr-reading__byline .cr-more-author__kicker {
	color: var(--cr-red);
	font: 700 11px/1.4 var(--cr-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.cr-reading__byline .cr-more-author__name {
	margin-block: 7px 16px;
	font: 600 clamp(23px, 2.8vw, 30px)/1.2 var(--cr-display);
}

.cr-reading__byline .cr-more-author__name a {
	color: var(--cr-ink);
	text-decoration: none;
}

.cr-reading__byline .cr-more-author__works {
	display: grid;
	gap: 11px;
}

.cr-reading__byline .cr-more-author__works a {
	color: var(--cr-ink);
	font: 400 19px/1.4 var(--cr-reading);
	text-decoration-thickness: 1px;
	text-decoration-color: var(--cr-line);
	text-underline-offset: .2em;
}

.cr-reading__byline .post-navigation {
	margin-block-start: 34px;
	padding-block-start: 22px;
	border-block-start: 1px solid var(--cr-line);
}

.cr-reading__byline .post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 14px 26px;
}

.cr-reading__byline .post-navigation a {
	color: var(--cr-ink);
	font: 600 13px/1.55 var(--cr-sans);
	text-decoration: none;
}

.cr-reading__byline a:hover {
	color: var(--cr-red);
}

.cr-reading__pages {
	margin-block-start: 25px;
	font: 600 13px/1.5 var(--cr-sans);
}

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

@media (max-width: 620px) {
	.cr-reading__frame {
		width: calc(100% - 36px);
	}

	.cr-reading__title {
		font-size: clamp(41px, 10.4vw, 54px);
	}

	.cr-reading__intro {
		padding-block: 30px 0;
	}

	.cr-reading__frame--content {
		padding-block-start: 30px;
	}

	.cr-reading--poetry .cr-reading__body {
		font-size: 21px;
		line-height: 1.52;
	}

	.cr-reading__author-block {
		grid-template-columns: 54px minmax(0, 1fr);
	}

	.cr-reading__author-block > img,
	.cr-reading__author-block .avatar,
	.cr-reading__avatar {
		width: 54px;
		height: 54px;
	}

	.cr-reading__byline .post-navigation .nav-links {
		flex-direction: column;
	}
}

@media print {
	.cr-reading {
		min-height: 0;
		padding-block-end: 0;
	}

	.cr-reading__intro {
		padding-block: 16pt 0;
	}

	.cr-reading__frame,
	.cr-reading__byline {
		width: 100%;
	}

	.cr-reading__composition {
		break-inside: auto;
	}

	.cr-reading__plate {
		break-inside: avoid;
	}

	.cr-reading__body {
		font-size: 12pt;
	}
}