/*
 * A story: the standfirst, the credit rail, the actions, the text and the
 * furniture that runs alongside it (§6.13).
 */

.story,
.page-body {
	padding-top: var(--seam-section);
	padding-bottom: var(--seam-section);
}

.story__from {
	margin: 0 0 1em;
	font-family: var(--serif);
	font-style: italic;
	font-size: 1rem;
	color: var(--ink-3);
}

/*
 * The caption for the opening photograph — §12.
 *
 * Set at label size in the furniture face, which is what a caption is
 * everywhere in this magazine, and given the measure of a caption rather than
 * of the copy: a sentence about a picture is not body text and does not read as
 * the beginning of the article.
 *
 * The credit is repeated from the plate's rail and shown only on the narrow
 * layout — see the note in lede-note.php. Above the spread the plate is the
 * left-hand page and its own rail is beside the photograph, which is where a
 * credit belongs; below it the plate is a strip above the headline and the
 * caption is the only place the credit can honestly sit.
 */
.lede-note {
	margin: 0 0 1.4em;
	font-family: var(--sans);
	font-size: var(--label-fine);
	line-height: 1.5;
	letter-spacing: .02em;
	color: var(--ink-3);
	max-width: 46ch;
}

.lede-note__caption {
	display: block;
	color: var(--ink-2);
}

.lede-note__credit,
.lede-note__courtesy {
	display: inline;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.lede-note__credit + .lede-note__courtesy::before {
	content: " · ";
}

.lede-note__caption + .lede-note__credit,
.lede-note__caption + .lede-note__courtesy {
	display: inline-block;
	margin-top: .5em;
}

/*
 * On the spread the plate's own rail carries the photographer, right beside the
 * photograph, so this one would be the second printing of the same fact on one
 * screen. The same query the whole spread is gated on — width AND the pointer
 * in use, because a wide touch device does not get the spread.
 */
@media (min-width: 1121px) and (pointer: fine) and (hover: hover) {
	.lede-note__credit {
		display: none;
	}

	.lede-note__caption + .lede-note__courtesy {
		display: inline-block;
	}
}

.story__standfirst {
	max-width: 34ch;
	margin: 0 0 1.2em;
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(1.15rem, 2.3cqi, 1.65rem);
	line-height: 1.32;
}

/* ---------- Actions ---------- */

.acts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin-bottom: var(--seam-block);
}

/*
 * 44px of hit area on every action. The label is 22px tall, so the padding does
 * the work; without it the four actions in this row measured 22px high with 9px
 * between them (10-ui-quality-report.md, targets).
 */
.acts__item {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 11px 0;
	color: var(--ink-2);
	/*
	 * Visible at rest, not only on hover. A control whose entire appearance
	 * arrives with the pointer is invisible to anyone reading the page and to
	 * everyone on a touchscreen — the same fault as the edition switch that was
	 * a transparent ring.
	 */
	border-bottom: 1px solid var(--rule);
	transition: color var(--move), border-color var(--move);
}

@media (hover: hover) and (pointer: fine) {
	.acts__item:hover {
		color: var(--ink);
		border-bottom-color: var(--rule-2);
	}
}

/* ---------- The text ---------- */

.story__copy {
	max-width: 58ch;
	font-size: calc(var(--base-size, 16) * 1px);
	line-height: calc(var(--base-leading, 182) / 100);
}

.story__copy > * {
	margin-block: 0 1.1em;
}

.story__copy > .alignwide,
.story__copy > .alignfull {
	max-width: none;
}

/*
 * ---------- THE DROP CAP ----------
 *
 * `initial-letter` is honoured where it exists; where it is not, the float
 * fallback still produces a three-line cap rather than a giant paragraph opener.
 *
 * IT IS NOT `p:first-of-type` ANY MORE.
 *
 * That selector means "the first paragraph anywhere in the article", which is
 * right when a story opens with prose and wrong every other way. A story that
 * opens with a photograph, a pull quote and two headings got a claret
 * three-line initial eight blocks down the page, in the middle of the copy,
 * announcing nothing — and a story whose opening paragraph is one short line
 * got a letter with nothing beside it and the next block pushed down to clear
 * it.
 *
 * `Helpers\opens_with_prose()` decides, from the article's own blocks: the
 * opening paragraph is the first top-level block or the second where the first
 * is a heading, it carries at least 120 characters, and it begins with a
 * letter. It writes `story__copy--opener` when all three hold and nothing when
 * they do not. This only draws it. The rule is stated there in full.
 */
.story__copy--opener > p:first-of-type::first-letter {
	-webkit-initial-letter: 3;
	initial-letter: 3;
	float: left;
	margin-right: .1em;
	font-family: var(--serif);
	font-weight: 500;
	color: var(--acc);
	line-height: .82;
	font-size: 3.2em;
}

@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
	.story__copy--opener > p:first-of-type::first-letter {
		float: none;
		font-size: inherit;
		line-height: inherit;
	}
}

.no-drop-caps .story__copy--opener > p:first-of-type::first-letter {
	initial-letter: normal;
	-webkit-initial-letter: normal;
	float: none;
	margin-right: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	font-weight: inherit;
}

@media (max-width: 780px) {
	.story__copy--opener > p:first-of-type::first-letter {
		-webkit-initial-letter: 2;
		initial-letter: 2;
	}
}

/* ---------- Pull quote, margin note, bleed photograph ---------- */

/*
 * ---------- THE QUOTE ----------
 *
 * WHAT WAS WRONG, MEASURED
 *
 * The quote carried `margin-left: calc(-1 * var(--gut))` at every width, to hang
 * into the spread's margin. Measured on a published story:
 *
 *   390    copy at x=20, quote at x=0     — flush against the screen's edge
 *   820    copy at x=28, quote at x=0     — the same
 *   1440   copy at x=801, quote at x=720  — under the vertical issue rail, whose
 *                                           type ran through six lines of it
 *
 * Three defects from one declaration. Below the spread there is no facing page
 * to hang into, so the hang is simply the quote touching the glass while every
 * paragraph around it keeps a 20px margin. On the spread there IS a margin, and
 * something already lives in it.
 *
 * So the quote takes the copy's own column, at every width. Its weight comes
 * from scale, from the rules above and below, and from a claret segment on the
 * top rule — the same device as `.story__end` and `.plate__rule`, which is what
 * makes it read as this magazine's quote rather than a browser's.
 *
 * AND IT IS NOT EVERY `blockquote`.
 *
 * `.story__copy blockquote` also matched `blockquote.instagram-media` and
 * `blockquote.twitter-tweet` — the markup an oEmbed leaves behind before its
 * script replaces it, and all that is left when the script is blocked. Those
 * were being set in 40px serif italic with editorial rules around them.
 */
.story__copy > blockquote,
.story__copy > .wp-block-quote,
.story__copy > .wp-block-pullquote {
	position: relative;
	max-width: none;
	/*
	 * `margin-inline: 0` is not redundant. Removing the negative pull left the
	 * BROWSER'S OWN `blockquote { margin: 1em 40px }` in charge, and the quote
	 * moved from x=0 to x=60 in a column starting at x=20 — off the edge, then
	 * indented past the copy, neither of them the column.
	 */
	margin-inline: 0;
	margin-block: 1.9em;
	padding-block: 1.15em;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(1.3rem, 2.5cqi, 1.95rem);
	line-height: 1.3;
	text-wrap: pretty;
}

/*
 * The claret segment on the top rule. 44px, the width of the end mark's own
 * seal, so the two devices in a story are cut from one measurement.
 */
.story__copy > blockquote::before,
.story__copy > .wp-block-quote::before,
.story__copy > .wp-block-pullquote::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 44px;
	height: 1px;
	background: var(--acc);
}

.story__copy > blockquote > :last-child,
.story__copy > .wp-block-quote > :last-child,
.story__copy > .wp-block-pullquote > :last-child {
	margin-bottom: 0;
}

/*
 * An embed's leftover markup is a container, not a quotation. It keeps the
 * body's own type and none of the editorial furniture.
 */
.story__copy blockquote.instagram-media,
.story__copy blockquote.twitter-tweet,
.story__copy blockquote.tiktok-embed,
.story__copy .wp-block-embed blockquote {
	margin-inline: 0;
	padding: 0;
	border: 0;
	font-family: inherit;
	font-style: inherit;
	font-size: inherit;
	line-height: inherit;
}

.story__copy blockquote.instagram-media::before,
.story__copy blockquote.twitter-tweet::before,
.story__copy blockquote.tiktok-embed::before,
.story__copy .wp-block-embed blockquote::before {
	content: none;
}

/*
 * A PULL QUOTE IS NOT A BLOCK QUOTE.
 *
 * WordPress gives the editor both, and they say different things: a block quote
 * is somebody's words, a pull quote is a line lifted out of the story and set
 * large to pull the eye down the page. Given one treatment they were the same
 * thing twice.
 */
.story__copy > .wp-block-pullquote {
	padding-block: 1.5em;
	font-size: clamp(1.55rem, 3.4cqi, 2.6rem);
	line-height: 1.16;
	text-align: center;
	text-wrap: balance;
	color: var(--ink);
}

.story__copy > .wp-block-pullquote::before {
	left: 50%;
	width: 64px;
	transform: translateX(-50%);
}

/*
 * A pull quote is a `figure` with a `blockquote` inside it, and the browser's
 * own `blockquote { margin: 1em 40px }` applies to the inner one — so the
 * centred lines were set in a column 80px narrower than the figure they sit in,
 * off the copy's measure on both sides.
 */
.story__copy > .wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.story__copy > .wp-block-pullquote p {
	margin-bottom: 0;
}

/*
 * The citation. `cite` is the attribution and it is set as a label, not as more
 * of the quotation — the em rule in front of it is the printed convention and
 * is drawn rather than typed, so it cannot be doubled by an editor who types
 * their own.
 */
.story__copy > blockquote cite,
.story__copy > .wp-block-quote cite,
.story__copy > .wp-block-pullquote cite {
	display: block;
	margin-top: .85em;
	font-family: var(--sans);
	font-style: normal;
	font-size: var(--label);
	font-weight: 500;
	letter-spacing: .16em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--ink-3);
}

.story__copy > blockquote cite::before,
.story__copy > .wp-block-quote cite::before,
.story__copy > .wp-block-pullquote cite::before {
	content: "— ";
}

/*
 * A LONG QUOTATION IS NOT A BIGGER SHORT ONE.
 *
 * `clamp(1.3rem, 2.5cqi, 1.95rem)` knows the column's width and nothing about
 * how much is in the quote. A 393-character quotation set at 40px over 1.14
 * leading is eleven lines of italic display type, which is a wall rather than a
 * quotation — measured on a published story at 1440.
 *
 * `Prominent\Blocks\quote_length()` counts the characters and marks the
 * block, so the type comes down and the leading opens for a quotation that has
 * to be READ rather than glanced at. Nothing else about it changes.
 */
.story__copy > .is-quote-long {
	font-size: clamp(1.15rem, 1.9cqi, 1.5rem);
	line-height: 1.44;
	text-wrap: pretty;
}

.story__copy > .wp-block-pullquote.is-quote-long {
	font-size: clamp(1.25rem, 2.2cqi, 1.7rem);
	line-height: 1.3;
}

.story__copy figure.alignfull,
.story__copy .wp-block-image.alignfull {
	margin-left: calc(-1 * var(--gut));
	margin-right: calc(-1 * var(--pad));
	max-width: none;
}

.story__copy figcaption,
.wp-block-image figcaption {
	margin-top: .6em;
	font-family: var(--serif);
	font-style: italic;
	font-size: var(--copy-small);
	line-height: 1.44;
	max-width: 44ch;
	color: var(--ink-2);
}

/* ---------- End mark ---------- */

.story__end {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: var(--seam-block) 0 0;
}

.story__end::before,
.story__end::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--rule);
}

/*
 * The seal carries --acc-ink, not a fixed near-black. Claret with #0C0B0B on it
 * measures 1.86:1 — a solid red chip with no glyph in it, where the house
 * initial should be. 09-art-direction-review.md, C5.
 */
.story__end span {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	background: var(--acc);
	color: var(--acc-ink);
	font-family: var(--serif);
	font-style: italic;
}

/* ---------- Author, also, next ---------- */

.author {
	display: grid;
	grid-template-columns: 104px 1fr;
	gap: 22px;
	align-items: start;
	margin-top: var(--seam-quiet);
	padding-top: var(--seam-quiet);
	border-top: 1px solid var(--rule);
}

/*
 * The house byline has no portrait, so it has no portrait column.
 *
 * Without this the body lands in the 104px track and sets six words to a line
 * down a quarter of the page — the layout that gave `.plate__foot` its own
 * entry in the project notes. A grid whose first track exists for an element
 * that is not rendered is not a two-column layout, it is a broken one.
 */
.author--house {
	grid-template-columns: 1fr;
}

.author__img {
	width: 104px;
	height: 130px;
	object-fit: cover;
}

.author__name {
	margin: 0 0 .4em;
	font-size: 1.2rem;
}

.author__name a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.author__bio {
	max-width: 52ch;
	margin: 0;
	color: var(--ink-2);
}

/*
 * The line that is always there.
 *
 * Most bylines on this magazine carry no biography, and the block used to end
 * at the heading — a name over nothing, and a dead end for a reader who wanted
 * more from that writer. This is the true thing that is always available.
 */
.author__more {
	margin: .5em 0 0;
	font-size: var(--label);
	letter-spacing: .04em;
}

.author__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--ink-2);
	text-decoration-thickness: 1px;
	text-underline-offset: .28em;
}

.author__link:hover,
.author__link:focus-visible {
	color: var(--ink);
}

.also {
	margin-top: var(--seam-quiet);
	padding-top: var(--seam-quiet);
	border-top: 1px solid var(--rule);
}

.also__title {
	margin-bottom: 1em;
	font-size: 1.4rem;
}

.next {
	display: grid;
	grid-template-columns: 1fr 140px;
	gap: 22px;
	align-items: center;
	margin-top: var(--seam-quiet);
	padding-top: 18px;
	border-top: 1px solid var(--ink);
}

.next__label {
	display: block;
	margin-bottom: .4em;
	font-family: var(--sans);
	font-size: var(--label-lead);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.next__title {
	font-family: var(--serif);
	font-size: 1.4rem;
	line-height: 1.1;
}

/* ---------- Comments ---------- */

/*
 * The comment area sat in the reading measure with the section spacing above
 * and below it, which on a story with two comments was more rule and air than
 * thread. Tighter, and the form no longer floats in the middle of nothing.
 */
.comments {
	margin-top: var(--sp-70, 70px);
	padding-top: var(--sp-50, 34px);
	border-top: 1px solid var(--rule);
	max-width: 62ch;
}

.comments__title {
	font-size: 1.3rem;
}

.comments__list {
	margin: 0 0 var(--seam-block);
	padding: 0;
	list-style: none;
}

/*
 * The comment list, as WordPress's default walker emits it.
 *
 * The theme styled the form and left the list to core's markup, which on a live
 * site meant an unstyled thread under every story — and, measured, an author
 * link, a date permalink and a reply link all 23px high against the theme's own
 * 44px floor. Comments are open on 289 of the 290 articles in this archive, so
 * this is not an edge.
 */

.comments__list .comment,
.comments__list .pingback {
	margin: 0 0 var(--sp-50, 34px);
	padding: 0;
	list-style: none;
}

.comments__list .children {
	margin: var(--sp-40, 22px) 0 0;
	padding-left: var(--sp-40, 22px);
	border-left: 1px solid var(--rule);
	list-style: none;
}

/*
 * The avatar column collapses when there is no avatar. Fixed at 44px it left a
 * blank gutter down every thread — and with avatars switched off in Discussion,
 * down every thread on the site.
 */
.comments__list .comment-body {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 4px var(--sp-30, 14px);
	align-items: start;
}

.comments__list .comment-body:not(:has(img.avatar)) {
	grid-template-columns: minmax(0, 1fr);
}

.comments__list .comment-body:not(:has(img.avatar)) .comment-author .fn,
.comments__list .comment-body:not(:has(img.avatar)) .comment-metadata,
.comments__list .comment-body:not(:has(img.avatar)) .comment-content,
.comments__list .comment-body:not(:has(img.avatar)) .reply,
.comments__list .comment-body:not(:has(img.avatar)) .comment-awaiting-moderation {
	grid-column: 1;
}

.comments__list .comment-author {
	display: contents;
}

.comments__list .comment-author img.avatar {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 44px;
	height: 44px;
	object-fit: cover;
}

.comments__list .comment-author .fn {
	grid-column: 2;
	font-family: var(--sans);
	font-size: var(--label);
	font-weight: 500;
	font-style: normal;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.comments__list .says {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.comments__list .comment-metadata {
	grid-column: 2;
	font-family: var(--sans);
	font-size: var(--copy-small);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.comments__list .comment-content {
	grid-column: 2;
	margin-top: .5em;
}

.comments__list .comment-content p {
	margin: 0 0 .8em;
}

.comments__list .reply {
	grid-column: 2;
	min-width: 0;
}

/*
 * On a phone the thread's own indent plus the avatar column pushed the reply
 * link past the right edge. The indent goes at the narrow end; nesting is still
 * legible from the rule.
 */
@media (max-width: 480px) {
	.comments__list .children {
		padding-left: 12px;
	}

	.comments__list .comment-body {
		grid-template-columns: minmax(0, 1fr);
	}

	.comments__list .comment-author img.avatar {
		width: 34px;
		height: 34px;
		grid-row: auto;
	}

	.comments__list .comment-author .fn,
	.comments__list .comment-metadata,
	.comments__list .comment-content,
	.comments__list .reply {
		grid-column: 1;
	}
}

/*
 * The three standalone controls in a thread. Inline links inside the body of a
 * comment are part of a sentence and stay as they are; these are targets.
 */
.comments__list .comment-author .url,
.comments__list .comment-metadata a,
.comments__list .comment-reply-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.comments__list .comment-reply-link {
	font-family: var(--sans);
	font-size: var(--label);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--acc);
}

@media (hover: hover) and (pointer: fine) {
	.comments__list .comment-author .url:hover,
	.comments__list .comment-metadata a:hover,
	.comments__list .comment-reply-link:hover {
		border-bottom-color: currentColor;
	}
}

.comments__list .comment-awaiting-moderation {
	display: block;
	grid-column: 2;
	margin-top: .4em;
	font-family: var(--sans);
	font-size: var(--copy-small);
	font-style: normal;
	color: var(--ink-3);
}

.comments__note {
	color: var(--ink-3);
	font-size: var(--copy-small);
}

.comment-form label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--sans);
	font-size: var(--label);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.comment-form input:not([type="submit"]),
.comment-form textarea {
	width: 100%;
	min-height: 44px;
	margin-bottom: 18px;
	padding: 10px 0;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--rule-2);
}

.turnstile {
	margin: 18px 0;
	min-height: 66px;
}

/* ---------- A page ---------- */

.page-body__title {
	max-width: 24ch;
	margin: 0 0 .6em;
	font-size: clamp(2rem, 4.4cqi, 3.6rem);
	line-height: 1.03;
}