/*
 * SkipBlog restyling on top of Broadside.
 * The broadsheet devices (tinted paper, halftone, double rules, drop cap,
 * justified columns, ghosted photos) made the site look older, not newer.
 * Here the sheet goes white, the mural opens the home page, and photos are
 * shown as photos.
 */

:root {
	--wp--preset--color--paper: #ffffff;
	--wp--preset--color--paper-shade: #f3f1ee;
	--skip-desk: #ffffff;
}

body,
html {
	background: #ffffff;
}

.wp-site-blocks::before {
	display: none;
}

.wp-site-blocks {
	overflow-x: clip;
}

.wp-site-blocks::before {
	background-image: none;
	box-shadow: none;
}

/* ---- Hero ------------------------------------------------------------- */

.skip-hero-wrap {
	margin-block-start: 0;
}

.skip-hero.wp-block-cover {
	min-height: 0;
	aspect-ratio: 2.4 / 1;
	padding: clamp(20px, 4vw, 56px);
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.skip-hero.wp-block-cover .wp-block-cover__background.has-background-dim {
	opacity: 1 !important;
	background-color: transparent !important;
	background-image: linear-gradient(to top, rgba(20, 12, 6, 0.72) 0%, rgba(20, 12, 6, 0.25) 38%, rgba(20, 12, 6, 0) 62%);
}

.skip-hero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3.2rem, 9vw, 8.5rem);
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -0.02em;
	color: #fff;
}

.skip-hero__title a {
	color: inherit;
	text-decoration: none;
}

.skip-hero__nav.digest-nav {
	padding-block: 18px;
	border-bottom: 1px solid var(--wp--preset--color--rule-faint, #e4e0da);
	border-top: 0;
}

.skip-hero__nav.digest-nav a {
	text-transform: none;
	letter-spacing: 0;
	font-size: 1rem;
}

@media (max-width: 760px) {
	.skip-hero.wp-block-cover {
		aspect-ratio: 4 / 5;
	}
}

/* ---- Lead story: the photo above the headline, not behind it ---------- */

.digest-lead__hero {
	padding: 0;
	margin: 0;
	text-align: left;
}

.digest-lead__hero .wp-block-post-featured-image {
	position: static;
	z-index: auto;
	margin: 0 0 22px;
	aspect-ratio: 3 / 2;
}

.digest-lead__hero .wp-block-post-featured-image img {
	opacity: 1;
	filter: none;
	-webkit-mask-image: none;
	mask-image: none;
}

.digest-lead__label {
	display: none;
}

.digest-lead__title {
	text-align: left;
	font-size: clamp(2.2rem, 4vw, 3.4rem);
	line-height: 1.02;
}

.digest-lead__deck {
	display: none;
}

.digest-lead__hero .digest-byline {
	justify-content: flex-start;
	border: 0;
}

.digest-columns {
	columns: 1;
	column-rule: 0;
}

.digest-columns > p {
	text-align: left;
	hyphens: manual;
	font-size: 1.05rem;
	line-height: 1.7;
}

.digest-dropcap::first-letter {
	float: none;
	font-size: inherit;
	line-height: inherit;
	padding: 0;
	color: inherit;
	font-family: inherit;
}

.digest-lead__more,
.digest-kicker,
.digest-rail__title {
	text-transform: none;
	letter-spacing: 0;
}

/* ---- Sections: an open grid, not a ruled box -------------------------- */

.digest-sections {
	border: 0;
	gap: 40px 48px;
}

.digest-section {
	padding: 0;
	border: 0;
}

.digest-lead__hero .digest-byline {
	margin-top: 10px;
}

/* ---- Second pass ------------------------------------------------------ */

.wp-site-blocks {
	background-color: #ffffff;
	padding-block-start: 0;
}

.skip-hero__nav.digest-nav {
	padding-block: 20px;
	margin-bottom: 0;
}

.skip-hero-wrap + * .digest-lead,
.digest-sheet__inner {
	border-top: 0;
}

.digest-lead {
	margin-top: 40px;
	gap: 0 44px;
}

.digest-lead > * {
	border: 0 !important;
	padding-inline: 0 !important;
}

.digest-rail__title {
	text-align: left;
	font-size: 1rem;
	border: 0;
}

.digest-section-head {
	text-transform: none;
	letter-spacing: 0;
	font-size: 1.6rem;
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--ink);
	text-align: left;
	border: 0;
	padding-top: 56px;
	margin-bottom: 24px;
}

.digest-section-head::before,
.digest-section-head::after {
	display: none;
}

.skip-hero__nav.digest-nav {
	border-bottom: 0;
}

/* ---- Article ---------------------------------------------------------- */

.digest-masthead--compact .digest-nav a,
.digest-nav a {
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.98rem;
}

.digest-article__header .wp-block-post-featured-image,
.digest-article__deck {
	display: none;
}

.digest-article__header {
	padding-top: 24px !important;
	padding-bottom: 8px !important;
}

.digest-article__header .wp-block-post-title {
	font-size: clamp(2.6rem, 6vw, 4.6rem);
	line-height: 1;
	letter-spacing: -0.015em;
}

.digest-eyebrow {
	text-transform: none;
	letter-spacing: 0;
	font-size: 1rem;
}

.digest-single .wp-block-post-content > p {
	margin-block: 0.2em;
}

@media (max-width: 1024px) {
	.digest-lead__main {
		order: -1;
	}
}

/* On a phone the hero is portrait: centre the two figures' faces. */
@media (max-width: 781px) {
	.skip-hero .wp-block-cover__image-background {
		object-position: 30% 50% !important;
	}
}

/* ---- Type and colour: one display face, one text face ----------------- *
 * Libre Caslon Display is drawn for large sizes only; at 16-27px it turned
 * spindly next to Source Serif and the two read as a clash. Caslon now sets
 * only the big moments (hero, lead, article title, section heads); every
 * smaller title, the nav and the meta are Source Serif. Accent red is kept
 * for category labels and hovers, titles go back to ink so the mural's sepia
 * is the only warm colour on the page.
 */

.digest-brief__head,
.digest-brief__head a,
.digest-lead__aside .wp-block-post-title,
.digest-lead__aside .wp-block-post-title a,
.digest-section__name,
.digest-section__name a,
.digest-section__link,
.digest-related .wp-block-post-title,
.digest-related .wp-block-post-title a,
.digest-nameplate--compact,
.digest-nameplate--compact a {
	font-family: var(--wp--preset--font-family--body) !important;
	color: var(--wp--preset--color--ink) !important;
	letter-spacing: 0 !important;
}

.digest-brief__head {
	font-size: 1.08rem !important;
	font-weight: 600;
	line-height: 1.3;
}

.digest-lead__aside .wp-block-post-title {
	font-size: 1.4rem !important;
	font-weight: 600;
	line-height: 1.25 !important;
}

.digest-section__name {
	font-size: 1.15rem !important;
	font-weight: 600;
}

.digest-nameplate--compact a {
	font-weight: 600;
	font-size: 1.25rem;
}

.digest-brief__head a:hover,
.digest-section__link:hover,
.digest-lead__aside .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent) !important;
}

.digest-kicker,
.digest-kicker a,
.digest-rail__title,
.digest-eyebrow,
.digest-eyebrow a {
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 0.85rem !important;
	font-weight: 400;
	color: var(--wp--preset--color--accent) !important;
}

.digest-byline,
.digest-byline a,
.digest-lead__more {
	font-family: var(--wp--preset--font-family--body) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 0.9rem !important;
}

.digest-section-head,
.digest-lead__title,
.digest-lead__title a,
.digest-article__header .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display) !important;
	color: var(--wp--preset--color--ink) !important;
}

/* Links Maria coloured by hand in the old editor (orange, blue) follow the theme. */
.wp-block-post-content a[style*="color"],
.wp-block-post-content a span[style*="color"] {
	color: var(--wp--preset--color--accent) !important;
}

/* ---- Front page: three levels, one title size each -------------------- */

.skip-front {
	padding-top: clamp(40px, 5vw, 72px);
}

.skip-front > * + * {
	margin-top: clamp(48px, 6vw, 88px) !important;
	padding-top: clamp(40px, 5vw, 64px);
	border-top: 1px solid var(--wp--preset--color--rule);
}

.skip-front__lead-row {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}

.skip-front__lead-row > * {
	margin: 0 !important;
}

.skip-front__lead-title {
	font-family: var(--wp--preset--font-family--display) !important;
	font-size: clamp(2.4rem, 4.2vw, 3.6rem) !important;
	line-height: 1.02;
	margin: 0.2em 0 0.4em !important;
}

.skip-front__lead-title a,
.skip-front__card-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.skip-front__lead-excerpt {
	font-size: 1.1rem;
	line-height: 1.65;
}

.skip-front__lead-excerpt .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 0.5em;
	color: var(--wp--preset--color--accent);
}

.skip-front__date {
	margin-top: 0.6em;
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink-ghost);
}

.skip-front__three .wp-block-post-template {
	gap: 40px 36px;
}

.skip-front__three .wp-block-post-featured-image {
	margin-bottom: 14px;
}

.skip-front__card-title {
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 1.35rem !important;
	font-weight: 600;
	line-height: 1.25;
	margin: 0.25em 0 0 !important;
}

/* Sections: same body face, small titles, no ruled heads. */
.skip-front .digest-section-head {
	padding-top: 0;
}

.skip-front .digest-section__name {
	border-bottom: 0 !important;
	padding-bottom: 0;
	margin-bottom: 8px;
}

.skip-front .digest-section__link {
	font-size: 0.98rem;
	border: 0 !important;
}

@media (max-width: 781px) {
	.skip-front__lead-row {
		grid-template-columns: 1fr;
	}

	.skip-front__three .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}
}

.skip-front .wp-block-broadside-section-grid {
	padding-top: 40px;
}

.skip-front .digest-section-head {
	margin-top: 0 !important;
	padding-top: 0 !important;
	font-size: 1.9rem;
}

.digest-footer,
.digest-footer * {
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* ---- Reading measure ------------------------------------------------------ *
 * Standard blog measure: about 66 characters per line (45-75 is the accepted
 * range), body text 20px on desktop and 18px on phones, 20px side gutters on
 * phones. The demo column (760px) gave 80-90+ characters per line.
 */
.single .wp-block-post-content {
	--wp--style--global--content-size: 620px;
	max-width: 620px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	font-size: 1.25rem !important;
	line-height: 1.65;
}

.single .wp-block-post-content p {
	font-size: inherit !important;
	max-width: none !important;
}

.digest-article__header,
.digest-single .digest-article__header > * {
	--wp--style--global--content-size: 620px;
	max-width: 620px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

@media (max-width: 781px) {
	.single .wp-block-post-content {
		font-size: 1.125rem !important;
		padding-inline: 0 !important;
	}
}

@media (max-width: 781px) {
	body {
		--wp--style--root--padding-left: 20px !important;
		--wp--style--root--padding-right: 20px !important;
	}
}

.digest-article__header {
	padding-inline: 0 !important;
}

@media (max-width: 781px) {
	.wp-site-blocks {
		--digest-desk-gutter: 0px;
		--digest-sheet-margin: 20px;
	}
}

/*
 * Full-bleed rules under the masthead and above the footer. On the old grey
 * desk the rule stopped at the edge of the paper; on a white page it stopped in
 * mid air and read as an empty frame either side. The type stays on the
 * content width, only the line runs edge to edge.
 */
.digest-masthead--compact,
.digest-footer {
	position: relative;
}

.digest-masthead--compact {
	border-bottom: 0;
}

.digest-footer {
	border-top: 0;
}

.digest-masthead--compact::after,
.digest-footer::before {
	content: "";
	position: absolute;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	border-top: 1px solid var(--wp--preset--color--ink);
}

.digest-masthead--compact::after {
	bottom: 0;
}

.digest-footer::before {
	top: 0;
}

/* SkipBlog: old posts mix portrait, landscape and no featured image, so related
   cards with photos never line up. Related cards are text only. */
.digest-related__item .digest-snip__media {
	display: none;
}

/* SkipBlog: archive and search lists sat in a 680px prose column under a masthead
   about 950px wide. Use the wide measure so the three card columns breathe. */
:is(.archive, .search) main :is(.wp-block-query, .wp-block-group:has(> .wp-block-query-title)) {
	max-width: var(--digest-measure-wide, 960px);
	margin-inline: auto !important;
}

:is(.archive, .search) main .wp-block-group:has(> .wp-block-query-title) {
	padding-inline: 0;
}

:is(.archive, .search) main .wp-block-group:has(> .wp-block-query-title) > .wp-block-query-title {
	max-width: none;
	margin-inline: 0 !important;
}

/* SkipBlog: comments. The blog has 1,500+ of them, so they need a quiet,
   readable thread: one rule per comment, replies indented behind a thin line. */
.skip-comments {
	margin-top: 64px;
}

.skip-comments .wp-block-comments-title {
	margin-bottom: 8px;
}

.skip-comments .wp-block-comment-template {
	list-style: none;
	margin: 0;
	padding: 0;
}

.skip-comments .wp-block-comment-template li {
	margin: 0;
}

.skip-comments .wp-block-comment-template ol {
	list-style: none;
	margin: 0 0 0 20px;
	padding: 0 0 0 20px;
	border-left: 1px solid var(--wp--preset--color--rule);
}

.skip-comment {
	padding-block: 20px;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.skip-comment .wp-block-comment-author-name {
	font-weight: 600;
	margin: 0;
}

.skip-comment .wp-block-comment-author-name a,
.skip-comment .wp-block-comment-date a {
	text-decoration: none;
	color: inherit;
}

.skip-comment .wp-block-comment-date {
	font-size: 13px;
	color: var(--wp--preset--color--ink-faded);
	margin: 0 0 10px;
}

.skip-comment .wp-block-comment-content p {
	margin: 0 0 10px;
}

.skip-comment .wp-block-comment-reply-link {
	font-size: 13px;
	margin: 0;
}

.skip-comment .wp-block-comment-reply-link a {
	text-decoration: none;
}

.skip-comments .comment-respond {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--rule);
}

/* Legal links under the colophon (Iubenda privacy and cookie policy). */
.skip-legal {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin: 0;
	padding: 4px 0 28px;
	font-size: var(--wp--preset--font-size--utility);
	line-height: 1.4;
}

.skip-legal a {
	color: var(--wp--preset--color--ink-ghost);
	text-decoration: underline;
}

.skip-legal a:hover {
	color: var(--wp--preset--color--ink);
}