/*
 * Core blocks inside the content column (Post.dc.html article styles).
 * Loaded on the front end and in the editor. Phase 6 extends this for posts.
 */

.entry-content > * {
	margin-block: 0;
}

.entry-content > * + * {
	margin-top: 26px;
}

.entry-content a {
	border-bottom: 1px solid var(--accent);
}

.entry-content strong {
	font-weight: 600;
	color: var(--ink);
}

.entry-content :is(h2, h3, h4) {
	color: var(--ink);
}

.entry-content h2 {
	margin-top: 44px;
	font-size: clamp(28px, calc(28px + 6 * (100vw - 390px) / 890), 34px);
	line-height: 1.15;
}

.entry-content h3 {
	margin-top: 36px;
	font-size: clamp(22px, calc(22px + 4 * (100vw - 390px) / 890), 26px);
	line-height: 1.2;
}

.entry-content :is(h2, h3, h4) + * {
	margin-top: 16px;
}

.entry-content :is(ul, ol) {
	padding-left: 24px;
}

.entry-content li + li {
	margin-top: 8px;
}

.entry-content blockquote,
.entry-content .wp-block-quote {
	margin-block: 36px;
	padding: 0 0 0 28px;
	border-left: 1px solid var(--rule);
}

.entry-content blockquote p {
	font-family: var(--font-serif);
	font-size: clamp(24px, calc(24px + 6 * (100vw - 390px) / 890), 30px);
	line-height: 1.4;
	color: var(--ink);
}

.entry-content blockquote cite {
	display: block;
	margin-top: 14px;
	font-family: var(--font-mono);
	font-size: var(--fs-label-sm);
	font-style: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-5);
}

.entry-content .wp-block-pullquote {
	padding: 0;
	border: 0;
	text-align: left;
}

.entry-content hr,
.entry-content .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--rule-soft);
	margin-block: 44px;
}

.entry-content figure {
	margin-inline: 0;
}

.entry-content :is(.wp-block-image, .wp-block-gallery, .wp-block-embed, .wp-block-video) {
	margin-block: 40px;
}

.entry-content figcaption,
.entry-content .wp-element-caption {
	margin-top: 10px;
	text-align: left;
}

/*
 * Galleries (core Gallery block), front end and editor alike.
 *
 * Grid (default style): the block's Columns setting (1–8) applies from 600px up; "default" (no setting) is
 * 2-up, per the mockups. Masonry style: uncropped frames flowing down the same number of columns.
 * Below 600px every gallery stacks to one column. Core keeps 2-up on phones, so the phone rules repeat
 * a class to outrank core's column rules.
 */
.wp-block-gallery.has-nested-images {
	--wp--style--unstable-gallery-gap: 16px;
	gap: 16px;
}

/*
 * Grid widths are set here rather than left to core: core prints its gallery CSS twice on classic
 * themes, and the second copy's 2-up base rule lands after its column rules, so a "3 columns"
 * setting rendered 2-up. Width = (100% − gaps) / columns.
 */
@media (min-width: 600px) {
	.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image),
	.wp-block-gallery.has-nested-images.columns-2 figure.wp-block-image:not(#individual-image) {
		width: calc((100% - 16px) / 2);
	}

	.wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) {
		width: 100%;
	}

	.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) {
		width: calc((100% - 2 * 16px) / 3);
	}

	.wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) {
		width: calc((100% - 3 * 16px) / 4);
	}

	.wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image) {
		width: calc((100% - 4 * 16px) / 5);
	}

	.wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image) {
		width: calc((100% - 5 * 16px) / 6);
	}

	.wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image) {
		width: calc((100% - 6 * 16px) / 7);
	}

	.wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image) {
		width: calc((100% - 7 * 16px) / 8);
	}
}

.wp-block-gallery.is-style-masonry.has-nested-images {
	display: block;
	columns: 2;
	column-gap: 16px;
}

.wp-block-gallery.is-style-masonry.columns-1 { columns: 1; }
.wp-block-gallery.is-style-masonry.columns-3 { columns: 3; }
.wp-block-gallery.is-style-masonry.columns-4 { columns: 4; }
.wp-block-gallery.is-style-masonry.columns-5 { columns: 5; }
.wp-block-gallery.is-style-masonry.columns-6 { columns: 6; }
.wp-block-gallery.is-style-masonry.columns-7 { columns: 7; }
.wp-block-gallery.is-style-masonry.columns-8 { columns: 8; }

.wp-block-gallery.is-style-masonry.has-nested-images figure.wp-block-image:not(#individual-image) {
	display: block;
	width: 100%;
	margin: 0 0 16px;
	break-inside: avoid;
}

.wp-block-gallery.is-style-masonry.has-nested-images figure.wp-block-image:not(#individual-image) img {
	height: auto;
	object-fit: initial;
}

@media (max-width: 599.98px) {
	.wp-block-gallery.has-nested-images.has-nested-images figure.wp-block-image:not(#individual-image) {
		width: 100%;
	}

	.wp-block-gallery.is-style-masonry.is-style-masonry.has-nested-images {
		columns: 1;
	}
}

/*
 * Nothing goes wider than its column unless the editor sets it: Wide width (up to 1200px) or
 * Full width (edge to edge) in the block's alignment toolbar. Mitch's rule; supersedes §5's
 * "photographs go edge to edge on mobile".
 */
.entry-content .alignwide {
	width: min(1200px, 100vw - 2 * var(--gutter));
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}

.entry-content .alignfull {
	width: 100vw;
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}


.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-small);
}

.entry-content :is(th, td) {
	padding: 10px 12px 10px 0;
	border-bottom: 1px solid var(--rule-soft);
	text-align: left;
	vertical-align: top;
}

.entry-content th {
	font-family: var(--font-mono);
	font-size: var(--fs-label-sm);
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-4);
}

.entry-content .wp-block-button__link {
	padding: 15px 24px;
	background: var(--ink);
	color: var(--ink-inverse);
	border: 1px solid var(--ink);
	border-radius: 0;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.entry-content .wp-block-button__link:hover {
	background: var(--accent);
	border-color: var(--accent);
}

/*
 * Tribute (Group block style): a passage in someone else's words, set apart from the page.
 * Serif at reading size, a quiet opening mark, hairline rules, the author's name beneath.
 * Italics inside are set upright: the whole passage is already set apart.
 */
.wp-block-group.is-style-tribute {
	position: relative;
	margin-block: 8px 56px;
	padding: 64px 0 56px;
	border-block: 1px solid var(--rule);
	font-family: var(--font-serif);
	font-size: clamp(21px, calc(21px + 5 * (100vw - 390px) / 890), 26px);
	line-height: 1.5;
	color: var(--ink);
}

.wp-block-group.is-style-tribute::before {
	content: "\201C";
	position: absolute;
	top: 18px;
	left: -4px;
	font-family: var(--font-serif);
	font-size: 96px;
	line-height: 1;
	color: var(--rule-input);
}

.wp-block-group.is-style-tribute p {
	margin: 0;
	text-wrap: pretty;
}

.wp-block-group.is-style-tribute p + p {
	margin-top: 0.9em;
}

.wp-block-group.is-style-tribute em,
.wp-block-group.is-style-tribute i {
	font-style: normal;
}

/* The opening line reads as the start of an essay. */
.wp-block-group.is-style-tribute > p:first-of-type {
	margin-bottom: 0.4em;
	font-size: 1.55em;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.wp-block-group.is-style-tribute .tribute__by {
	margin-top: 40px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--tracking-eyebrow);
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--text-4);
}

.wp-block-group.is-style-tribute .tribute__by::before {
	content: "\2014\00a0";
}

@media (max-width: 599.98px) {
	.wp-block-group.is-style-tribute {
		padding-block: 52px 44px;
	}

	.wp-block-group.is-style-tribute::before {
		top: 12px;
		font-size: 72px;
	}
}