/*
 * Riley Book
 *
 * The hero reuses the theme's own `pp-hero pp-hero--cover pp-torn` object --
 * the darkened cover treatment the homepage already uses, fed through the
 * existing --pp-hero-image variable. Only the internal layout is declared
 * here, so there is no second hero system to drift.
 *
 * Colour is inherited or taken from palette tokens, never a raw value, so
 * nothing here can become unreadable if a ground changes.
 */

.rb__inner {
	width: min(1080px, calc(100% - 40px));
	margin-inline: auto;
	padding: 78px 0 86px;
	display: grid;
	grid-template-columns: 230px 1fr;
	gap: 46px;
	align-items: center;
}

.rb-cover__img {
	width: 100%;
	height: auto;
	display: block;
	box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
}

/* Kicker. Same treatment as the theme's eyebrow, on a dark ground where
   brass is legible -- it is not, on paper. */
.rb-series {
	font-size: var(--wp--preset--font-size--eyebrow, .6875rem);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brass);
	font-weight: 600;
	margin: 0 0 8px;
}

.rb-title {
	font-family: var(--wp--preset--font-family--serif, serif);
	font-size: clamp(44px, 6vw, 72px);
	line-height: 1;
	font-weight: 600;
	margin: 0 0 16px;
	color: var(--wp--preset--color--cream);
}

.rb-status {
	font-family: var(--wp--preset--font-family--serif, serif);
	font-style: italic;
	font-size: 22px;
	max-width: 44ch;
	margin: 0;
	color: var(--wp--preset--color--mist);
}

/* ------------------------------------------------------------- the blurb */

/*
 * 66ch, the comp's prose measure. This is the reason the page exists, so it
 * gets a real reading measure rather than the full content width.
 */
.rb-blurb {
	max-width: 66ch;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50, 3.25rem) 20px;
}

.rb-blurb p {
	margin: 0 0 18px;
}

.rb-blurb p:last-child {
	margin-bottom: 0;
}

@media (max-width: 820px) {
	.rb__inner {
		grid-template-columns: 1fr;
		gap: 26px;
		padding: 48px 0 56px;
	}

	.rb-cover {
		max-width: 230px;
	}
}