/* ==========================================================================
   Backstage Pass
   Black and white, like a printed gig listing. Stage gold is the only
   colour: the pass in the masthead, plus small accents (active section,
   link underlines, quotes, hover lines).
   Dark-mode colours are a second set of the same tokens, just below.
   Big Shoulders for headlines and interface; Newsreader for reading.
   ========================================================================== */

:root {
	color-scheme: light;

	--paper: #fff;
	--ink: #000;
	--on-ink: #fff;
	--text: #222;
	--muted: #6b6b6b;
	--rule: #dcdcdc;
	--fog: #f3f3f3;
	--hairline: rgba(0, 0, 0, 0.08);
	--hatch: rgba(0, 0, 0, 0.03);
	--placeholder-line: #c4c4c4;
	--placeholder-text: #444;
	--field-line: #b5b5b5;
	--gold: #e3b624;
	--gold-soft: #fbf0c4;

	/* Footer and app promo stay black in both modes. */
	--solid: #000;
	--solid-line: transparent;

	--font-display: "Big Shoulders", "Arial Narrow", "Helvetica Neue", sans-serif;
	--font-text: "Newsreader", Georgia, "Times New Roman", serif;

	--wrap: 1240px;
	--gutter: clamp(16px, 3.2vw, 32px);
	--sidebar: 300px;
	--rail: 140px;
	--rail-gap: 44px;
}

/* Dark mode: used when the reader's device is dark (unless the page is
   forced light), or when <html data-theme="dark">. Keep both lists in sync. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		--paper: #121212;
		--ink: #f2f2f2;
		--on-ink: #121212;
		--text: #d6d6d6;
		--muted: #9b9b9b;
		--rule: #303030;
		--fog: #1e1e1e;
		--hairline: rgba(255, 255, 255, 0.09);
		--hatch: rgba(255, 255, 255, 0.035);
		--placeholder-line: #474747;
		--placeholder-text: #bdbdbd;
		--field-line: #555;
		--gold-soft: rgba(227, 182, 36, 0.22);
		--solid-line: #2c2c2c;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;

	--paper: #121212;
	--ink: #f2f2f2;
	--on-ink: #121212;
	--text: #d6d6d6;
	--muted: #9b9b9b;
	--rule: #303030;
	--fog: #1e1e1e;
	--hairline: rgba(255, 255, 255, 0.09);
	--hatch: rgba(255, 255, 255, 0.035);
	--placeholder-line: #474747;
	--placeholder-text: #bdbdbd;
	--field-line: #555;
	--gold-soft: rgba(227, 182, 36, 0.22);
	--solid-line: #2c2c2c;
}

/* Base ------------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	font: 400 1.125rem/1.55 var(--font-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

img,
svg,
video,
iframe {
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

.footer :focus-visible,
.promo :focus-visible {
	outline-color: #fff;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--ink);
	color: var(--on-ink);
	font: 700 1.125rem/1 var(--font-display);
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
}

.wrap {
	width: 100%;
	max-width: calc(var(--wrap) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.site-main {
	padding-bottom: 8px;
}

/* Buttons --------------------------------------------------------------- */

.button,
.searchform__button,
.wp-block-button__link,
.comment-form .submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 44px;
	padding: 0.55em 1.15em;
	border: 2px solid var(--ink);
	border-radius: 2px;
	background: var(--ink);
	color: var(--on-ink);
	font: 700 1.0625rem/1.1 var(--font-display);
	letter-spacing: 0.03em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.button:hover,
.searchform__button:hover,
.wp-block-button__link:hover,
.comment-form .submit:hover {
	background: var(--paper);
	color: var(--ink);
}

.button--outline {
	background: transparent;
	color: var(--ink);
}

.button--outline:hover {
	background: var(--ink);
	color: var(--on-ink);
}

.button--light {
	border-color: #fff;
	background: #fff;
	color: #000;
}

.button--light:hover {
	border-color: var(--gold);
	background: var(--gold);
	color: #000;
}

/* Masthead -------------------------------------------------------------- */

.masthead {
	background: var(--paper);
}

.masthead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	padding-block: 24px 20px;
}

.brand {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 20px;
	min-width: 0;
}

.pass-wrap {
	margin: 0;
	font-size: clamp(1.875rem, 1.25rem + 2.1vw, 3.125rem);
	line-height: 1;
}

/* The laminate: a pass with a lanyard slot punched through it. */
.pass {
	--pass-bg: var(--gold);
	--pass-fg: #000;
	--pass-slot: var(--paper);

	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.15em 0.4em 0.1em 0.24em;
	border-radius: 0.14em;
	background: var(--pass-bg);
	color: var(--pass-fg);
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 1em;
	line-height: 0.92;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.pass__slot {
	flex: none;
	width: 0.15em;
	height: 0.6em;
	border-radius: 1em;
	background: var(--pass-slot);
}

.pass__logo {
	display: block;
	width: auto;
	height: 0.82em;
}

.brand__tagline {
	margin: 0;
	color: var(--muted);
	font: italic 400 1.1875rem/1.3 var(--font-text);
}

.masthead__links {
	display: flex;
	align-items: center;
	gap: 24px;
}

.utility {
	display: flex;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.utility a {
	color: var(--ink);
	font: 700 1.125rem/1 var(--font-display);
	text-decoration: none;
}

.utility a:hover {
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}

/* Section navigation ---------------------------------------------------- */

.sitenav {
	position: relative;
	z-index: 10;
	background: var(--paper);
	border-bottom: 3px solid var(--ink);
}

.sitenav__inner {
	display: flex;
	align-items: stretch;
	gap: 12px;
}

.sitenav__scroller {
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.sitenav__scroller::-webkit-scrollbar {
	display: none;
}

.sitenav__scroller.has-more {
	-webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
	mask-image: linear-gradient(to right, #000 82%, transparent);
}

.sitenav__menu {
	display: flex;
	gap: 0 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.sitenav__menu a {
	display: block;
	padding: 15px 0 11px;
	border-bottom: 4px solid transparent;
	color: var(--ink);
	font: 700 1.1875rem/1 var(--font-display);
	letter-spacing: 0.02em;
	text-decoration: none;
}

.sitenav__menu a:hover {
	border-bottom-color: var(--gold);
}

.sitenav__menu .current-menu-item > a,
.sitenav__menu .current-menu-ancestor > a,
.sitenav__menu .current-post-ancestor > a,
.sitenav__menu .current_page_item > a {
	border-bottom-color: var(--gold);
}

.scheme-toggle {
	display: grid;
	place-items: center;
	width: 44px;
	min-height: 48px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	cursor: pointer;
}

.scheme-toggle[hidden] {
	display: none;
}

.scheme-toggle .icon--sun {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .scheme-toggle .icon--sun {
		display: block;
	}

	:root:not([data-theme="light"]) .scheme-toggle .icon--moon {
		display: none;
	}
}

:root[data-theme="dark"] .scheme-toggle .icon--sun {
	display: block;
}

:root[data-theme="dark"] .scheme-toggle .icon--moon {
	display: none;
}

.search-toggle__button {
	display: grid;
	place-items: center;
	width: 44px;
	height: 100%;
	min-height: 48px;
	color: var(--ink);
	list-style: none;
	cursor: pointer;
}

.search-toggle__button::-webkit-details-marker {
	display: none;
}

.search-toggle[open] .search-toggle__button {
	background: var(--fog);
}

.search-toggle__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: 18px var(--gutter);
	background: var(--fog);
	border-bottom: 1px solid var(--rule);
}

.search-toggle__panel .searchform {
	max-width: 720px;
	margin-inline: auto;
}

.searchform {
	display: flex;
	gap: 8px;
}

.searchform__input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 14px;
	border: 2px solid var(--ink);
	border-radius: 2px;
	background: var(--paper);
	color: var(--text);
	font: 400 1.125rem var(--font-text);
}

.searchform__button {
	min-height: 48px;
}

/* Ads ------------------------------------------------------------------- */

.adband {
	padding-block: 16px;
	border-bottom: 1px solid var(--rule);
}

.adband .ad {
	margin: 0;
}

.adband--footer {
	margin-top: 64px;
	padding-block: 28px;
	border-top: 1px solid var(--rule);
	border-bottom: 0;
}

.ad {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-block: 32px;
}

.ad__label {
	color: var(--muted);
	font: 500 0.75rem/1 var(--font-display);
	letter-spacing: 0.08em;
}

.ad__unit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--ad-mh);
}

.ad__widget {
	max-width: 100%;
}

.ad.is-raptive .ad__unit {
	display: block;
}

.ad .monetization-placement {
	width: 100%;
	min-width: 0;
	text-align: center;
}

.ad__placeholder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	gap: 2px 10px;
	width: min(100%, var(--ad-mw));
	height: var(--ad-mh);
	padding: 4px 10px;
	border: 1px dashed var(--placeholder-line);
	background:
		repeating-linear-gradient(135deg, transparent 0 9px, var(--hatch) 9px 18px),
		var(--fog);
	color: var(--muted);
	font-family: var(--font-display);
	text-align: center;
}

.ad__size {
	color: var(--placeholder-text);
	font-weight: 700;
	font-size: 1.0625rem;
}

.ad__name {
	font-weight: 500;
	font-size: 0.875rem;
}

.ad__size--desktop {
	display: none;
}

.ad.is-desktop-only {
	display: none;
}

@media (min-width: 768px) {
	.ad__unit {
		min-height: var(--ad-h);
	}

	.ad__placeholder {
		flex-direction: column;
		width: min(100%, var(--ad-w));
		height: var(--ad-h);
	}

	.ad__size--desktop {
		display: block;
	}

	.ad__size--mobile {
		display: none;
	}
}

@media (min-width: 1024px) {
	.ad.is-desktop-only {
		display: flex;
	}
}

/* Shared story bits ----------------------------------------------------- */

.kicker {
	display: inline-block;
	color: var(--ink);
	font: 700 1rem/1.1 var(--font-display);
	letter-spacing: 0.03em;
	text-decoration: none;
}

.kicker:hover {
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-decoration-thickness: 3px;
	text-underline-offset: 3px;
}

.meta {
	margin: 0;
	color: var(--muted);
	font: 500 0.9375rem/1.2 var(--font-display);
	letter-spacing: 0.03em;
}

.lead__title a,
.card__title a,
.row__title a,
.mini__title a {
	color: inherit;
	text-decoration: none;
	background: linear-gradient(var(--gold), var(--gold)) 0 96% / 0 0.12em no-repeat;
	transition: background-size 0.3s ease;
}

.lead__title a:hover,
.card__title a:hover,
.row__title a:hover,
.mini__title a:hover,
.lead__title a:focus-visible,
.card__title a:focus-visible,
.row__title a:focus-visible,
.mini__title a:focus-visible {
	background-size: 100% 0.12em;
}

.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-top: 10px;
	border-top: 3px solid var(--ink);
}

.section-title {
	margin: 0;
	color: var(--ink);
	font: 800 2.125rem/1 var(--font-display);
	letter-spacing: 0.005em;
}

.section-title--small {
	margin-bottom: 4px;
	padding-top: 8px;
	border-top: 3px solid var(--ink);
	font-size: 1.5rem;
}

.section-head__more {
	color: var(--ink);
	font: 700 1.0625rem var(--font-display);
	text-decoration-color: var(--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Framed images. Images that don’t match the frame are shown whole on a
   mat in their own edge colour (set inline as --mat), so text in
   screenshots is never cropped. */

.media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--ratio, 16 / 10);
	background: var(--fog);
}

.media--lead {
	--ratio: 16 / 10;
}

@media (min-width: 700px) {
	.media--lead {
		--ratio: 4 / 3;
	}
}

.media--mini {
	--ratio: 1;
}

.media__img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.media.is-fit {
	background: var(--mat, var(--fog));
}

.media.is-fit .media__img {
	object-fit: contain;
}

/* A hairline keeps light screenshots from dissolving into the white page. */
.media::after,
.feature__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 1px var(--hairline);
	pointer-events: none;
}

/* Lead story ------------------------------------------------------------ */

.lead {
	display: grid;
	gap: 20px;
	padding-block: 24px 28px;
}

.lead .media {
	order: -1;
}

.lead__title {
	margin: 0.14em 0 0.28em;
	color: var(--ink);
	font: 800 clamp(2.375rem, 1.3rem + 3.3vw, 4.375rem)/0.94 var(--font-display);
	letter-spacing: -0.005em;
	text-wrap: balance;
}

.lead.is-long .lead__title {
	font-size: clamp(2.125rem, 1.3rem + 2.6vw, 3.625rem);
}

.lead__dek {
	max-width: 34em;
	margin: 0 0 16px;
	font-size: clamp(1.1875rem, 1.05rem + 0.4vw, 1.3125rem);
	line-height: 1.45;
}

.lead .meta {
	font-size: 1rem;
}

@media (min-width: 700px) {
	.lead {
		padding-block: 40px 36px;
	}

	.lead.has-media {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: center;
		gap: clamp(28px, 4vw, 56px);
	}

	.lead .media {
		order: 0;
	}

	.lead.no-media .lead__text {
		max-width: 900px;
	}
}

@media (min-width: 1100px) {
	.lead {
		padding-block: 48px 44px;
	}
}

/* Top stories ------------------------------------------------------------ */

.topstories {
	display: grid;
	gap: 0;
	padding-block: 8px 24px;
	border-top: 1px solid var(--rule);
}

.card {
	display: grid;
	grid-template-columns: 116px minmax(0, 1fr);
	grid-template-areas:
		"media kicker"
		"media title"
		"media meta";
	grid-template-rows: auto auto 1fr;
	gap: 4px 16px;
	align-content: start;
	min-width: 0;
	padding-block: 18px;
}

.card + .card {
	border-top: 1px solid var(--rule);
}

.card:not(:has(.media)) {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "kicker" "title" "meta";
}

.card .media {
	grid-area: media;
	align-self: start;
}

.card .kicker {
	grid-area: kicker;
	justify-self: start;
}

.card__title {
	grid-area: title;
	margin: 0 0 6px;
	color: var(--ink);
	font: 700 1.375rem/1.04 var(--font-display);
	text-wrap: balance;
}

.card .meta {
	grid-area: meta;
}

@media (min-width: 760px) {
	.topstories {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 36px;
		padding-block: 32px 44px;
	}

	.card,
	.card:not(:has(.media)) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"media"
			"kicker"
			"title"
			"meta";
		grid-template-rows: none;
		gap: 8px;
		padding-block: 0;
	}

	.card + .card {
		border-top: 0;
	}

	.card .media {
		margin-bottom: 8px;
	}

	.card__title {
		font-size: clamp(1.4375rem, 1.1rem + 0.6vw, 1.6875rem);
	}
}

/* Two-column layout ----------------------------------------------------- */

.layout {
	display: grid;
	gap: 48px;
	padding-top: 16px;
}

@media (min-width: 1024px) {
	.layout {
		grid-template-columns: minmax(0, 1fr) var(--sidebar);
		gap: 56px;
	}
}

/* Latest list ----------------------------------------------------------- */

.river {
	min-width: 0;
}

.pagehead + .layout .river {
	border-top: 3px solid var(--ink);
}

.row {
	display: grid;
	gap: 14px;
	padding-block: 22px;
	border-bottom: 1px solid var(--rule);
}

.row.has-media {
	grid-template-columns: 116px minmax(0, 1fr);
	align-items: start;
	gap: 16px;
}

@media (min-width: 640px) {
	.row.has-media {
		grid-template-columns: clamp(160px, 24vw, 240px) minmax(0, 1fr);
		gap: 16px 26px;
	}
}

.row__title {
	margin: 4px 0 8px;
	color: var(--ink);
	font: 700 clamp(1.375rem, 1.1rem + 0.8vw, 1.8125rem)/1.04 var(--font-display);
	text-wrap: balance;
}

.row__dek {
	max-width: 40em;
	margin: 0 0 10px;
	font-size: 1.0625rem;
	line-height: 1.5;
}

.river .ad {
	margin-block: 0;
	padding-block: 26px;
	border-bottom: 1px solid var(--rule);
}

.river__empty {
	margin: 24px 0 0;
	color: var(--muted);
	font-style: italic;
}

@media (max-width: 559px) {
	.row__dek {
		display: none;
	}
}

/* Pagination ------------------------------------------------------------ */

.pager .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 32px;
}

.pager .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--ink);
	border-radius: 2px;
	color: var(--ink);
	font: 700 1.0625rem/1 var(--font-display);
	letter-spacing: 0.03em;
	text-decoration: none;
}

.pager .page-numbers.current {
	background: var(--ink);
	color: var(--on-ink);
}

.pager a.page-numbers:hover {
	background: var(--fog);
}

.pager .page-numbers.dots {
	border-color: transparent;
}

/* Sidebar --------------------------------------------------------------- */

.sidebar {
	display: grid;
	gap: 36px;
	align-content: start;
	min-width: 0;
}

.sidebar .ad {
	margin: 0;
}

.sidebar__sticky {
	position: sticky;
	top: 24px;
}

@media (min-width: 640px) and (max-width: 1023px) {
	.sidebar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}

@media (max-width: 1023px) {
	.sidebar__sticky {
		display: none;
	}
}

/* Concert Archives logo and app links (sidebar promo and footer). Both
   sit on black in light and dark mode. */
.ca-logo {
	display: block;
	width: fit-content;
}

.ca-logo img {
	display: block;
	width: auto;
	height: 45px;
}

/* Badges share one row at the same height: each grows in proportion to
   its image's width-to-height ratio, up to 44px tall. */
.app-badges {
	display: flex;
	gap: 8px;
}

.app-badge {
	flex: 2.99 1 0;
	min-width: 0;
	max-width: 132px;
}

.app-badge--android {
	flex-grow: 3.36;
	max-width: 148px;
}

.app-badge img {
	display: block;
	width: 100%;
	height: auto;
}

.app-web {
	display: inline-block;
	margin-top: 16px;
	color: #fff;
	font: 600 1rem/1.2 var(--font-display);
	letter-spacing: 0.03em;
	text-decoration-color: var(--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* App promo: a black ticket. The store badges sit on the tear-off stub,
   with page-coloured notches at each end of the tear line. */
.promo {
	--promo-pad: 24px;
	--notch: 10px;

	padding: var(--promo-pad);
	border: 1px solid var(--solid-line);
	border-radius: 16px;
	background: var(--solid);
	color: #fff;
}

.promo__logo {
	margin-bottom: 18px;
}

.promo__title {
	margin: 0 0 10px;
	color: #fff;
	font: 800 1.75rem/1 var(--font-display);
	text-wrap: balance;
}

.promo__text {
	margin: 0;
	color: #c9c9c9;
	font-size: 1.0625rem;
	line-height: 1.45;
}

.promo__stub {
	position: relative;
	margin: 22px calc(-1 * var(--promo-pad)) 0;
	padding: 22px var(--promo-pad) 0;
}

/* The tear line, stopping short of the notches. */
.promo__stub::before {
	content: "";
	position: absolute;
	top: -1px;
	left: calc(var(--notch) + 6px);
	right: calc(var(--notch) + 6px);
	height: 2px;
	background: linear-gradient(90deg, #0000 2.5px, #4d4d4d 2.5px 8.5px, #0000 8.5px) 0 0 / 11px 2px space no-repeat;
}

/* The notches. They cover the box's edge, so each draws its own sliver
   of border (only visible in dark mode). */
.promo__stub::after {
	content: "";
	position: absolute;
	top: calc(-1 * var(--notch));
	left: -1px;
	right: -1px;
	height: calc(2 * var(--notch));
	background:
		radial-gradient(circle at 0 50%, var(--paper) calc(var(--notch) - 1.5px), var(--solid-line) calc(var(--notch) - 1px) calc(var(--notch) - 0.5px), #0000 var(--notch)),
		radial-gradient(circle at 100% 50%, var(--paper) calc(var(--notch) - 1.5px), var(--solid-line) calc(var(--notch) - 1px) calc(var(--notch) - 0.5px), #0000 var(--notch));
	pointer-events: none;
}

.minilist ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.minilist li + li {
	border-top: 1px solid var(--rule);
}

.mini {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	align-items: start;
	gap: 14px;
	padding-block: 14px;
}

.mini:not(:has(.media)) {
	grid-template-columns: minmax(0, 1fr);
}

.mini__title {
	margin: 0 0 6px;
	color: var(--ink);
	font: 700 1.1875rem/1.06 var(--font-display);
}

.widget {
	min-width: 0;
}

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

.layout--article {
	padding-top: 36px;
}

.article {
	min-width: 0;
}

.article__header {
	margin-bottom: 28px;
}

.article__title {
	margin: 0.12em 0 0.26em;
	color: var(--ink);
	font: 800 clamp(2.375rem, 1.25rem + 3.8vw, 4.625rem)/0.94 var(--font-display);
	letter-spacing: -0.005em;
	text-wrap: balance;
}

.article.is-long .article__title {
	font-size: clamp(2.125rem, 1.25rem + 2.9vw, 3.75rem);
}

.article__dek {
	max-width: 32em;
	margin: 0 0 22px;
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.4375rem);
	line-height: 1.4;
}

.article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 20px;
	padding-top: 14px;
	border-top: 1px solid var(--rule);
}

.byline {
	margin: 0;
	color: var(--ink);
	font: 700 1.0625rem/1.3 var(--font-display);
	letter-spacing: 0.02em;
}

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

.byline a:hover {
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-decoration-thickness: 2px;
}

.dateline {
	margin: 0;
	color: var(--muted);
	font: 500 1.0625rem/1.3 var(--font-display);
	letter-spacing: 0.02em;
}

.feature {
	margin: 0 0 32px;
}

.feature__frame {
	position: relative;
	display: flex;
	justify-content: center;
	overflow: hidden;
	background: var(--fog);
}

.feature__img {
	display: block;
	width: 100%;
}

.feature.is-tall .feature__frame {
	background: var(--mat, var(--fog));
}

.feature.is-tall .feature__img {
	width: auto;
	max-height: min(78vh, 680px);
}

.feature figcaption {
	margin-top: 10px;
	color: var(--muted);
	font: italic 400 1rem/1.4 var(--font-text);
}

.article__body {
	display: grid;
	gap: 20px;
}

.article__rail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--rule);
}

.article__readtime {
	margin: 0;
	color: var(--muted);
	font: 600 1rem/1.2 var(--font-display);
	letter-spacing: 0.03em;
}

.share {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.share li {
	position: relative;
}

.share__link {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--ink);
	border-radius: 50%;
	background: var(--paper);
	color: var(--ink);
	cursor: pointer;
}

.share__link:hover,
.share__copy.is-copied {
	background: var(--ink);
	color: var(--on-ink);
}

.share__status:not(:empty) {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	padding: 6px 10px;
	background: var(--ink);
	color: var(--on-ink);
	font: 600 0.875rem/1 var(--font-display);
	letter-spacing: 0.03em;
	white-space: nowrap;
	transform: translateX(-50%);
	pointer-events: none;
}

/* Posts put reading time and share buttons in a left rail on wide screens.
   Pages have no rail, so they keep one column. */
@media (min-width: 1200px) {
	.article--rail .article__body {
		grid-template-columns: var(--rail) minmax(0, 680px);
		gap: 0 var(--rail-gap);
	}

	.article__rail {
		position: sticky;
		top: 24px;
		flex-direction: column;
		align-items: flex-start;
		align-self: start;
		justify-content: flex-start;
		padding: 4px 0 0;
		border: 0;
	}

	.article__rail .share {
		display: grid;
		grid-template-columns: repeat(3, 40px);
	}

	.article--rail .article__footer,
	.article--rail .comments {
		margin-left: calc(var(--rail) + var(--rail-gap));
	}
}

.article__footer,
.article--page .entry-content {
	max-width: 680px;
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
}

.tags a {
	display: inline-block;
	padding: 7px 12px 6px;
	border: 1px solid var(--rule);
	border-radius: 2px;
	color: var(--ink);
	font: 600 1rem/1 var(--font-display);
	letter-spacing: 0.03em;
	text-decoration: none;
}

.tags a:hover {
	border-color: var(--ink);
}

.article__share-end {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	margin-top: 28px;
	padding-block: 18px;
	border-block: 1px solid var(--rule);
}

.article__share-label {
	color: var(--ink);
	font: 700 1.1875rem/1 var(--font-display);
}

/* Post content ---------------------------------------------------------- */

.entry-content {
	min-width: 0;
	color: var(--text);
	font-size: 1.25rem;
	line-height: 1.62;
	overflow-wrap: break-word;
}

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

.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 800;
	text-wrap: balance;
}

.entry-content h2 {
	margin: 1.7em 0 0.45em;
	font-size: 2.125rem;
	line-height: 1.02;
}

.entry-content h3 {
	margin: 1.5em 0 0.4em;
	font-size: 1.6875rem;
	line-height: 1.06;
}

.entry-content h4 {
	margin: 1.4em 0 0.35em;
	font-size: 1.3125rem;
	line-height: 1.12;
}

.entry-content h2 strong,
.entry-content h3 strong {
	font-weight: inherit;
}

.entry-content a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.entry-content a:hover {
	background: var(--gold-soft);
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.25em;
}

.entry-content ul {
	list-style: square;
}

.entry-content li {
	margin-bottom: 0.4em;
	padding-left: 0.2em;
}

.entry-content li::marker {
	color: var(--ink);
}

.entry-content ol li::marker {
	font-family: var(--font-display);
	font-weight: 700;
}

.entry-content blockquote,
.entry-content .wp-block-quote {
	margin: 1.6em 0;
	padding: 2px 0 2px 24px;
	border-left: 4px solid var(--gold);
	font-size: 1.375rem;
	font-style: italic;
	line-height: 1.45;
}

.entry-content blockquote p:last-of-type {
	margin-bottom: 0;
}

.entry-content blockquote cite,
.entry-content .wp-block-quote cite {
	display: block;
	margin-top: 10px;
	color: var(--muted);
	font: normal 600 1rem/1.2 var(--font-display);
	letter-spacing: 0.03em;
}

.entry-content .wp-block-pullquote {
	margin: 1.8em 0;
	padding: 24px 0;
	border-block: 3px solid var(--ink);
	text-align: left;
}

.entry-content .wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--ink);
	font: 800 2.125rem/1.05 var(--font-display);
	font-style: normal;
}

.entry-content figure {
	margin: 1.6em 0;
}

.entry-content figcaption,
.entry-content .wp-element-caption {
	margin-top: 8px;
	color: var(--muted);
	font: italic 400 1rem/1.4 var(--font-text);
	text-align: left;
}

.entry-content .wp-block-image img {
	display: block;
}

.entry-content .aligncenter {
	margin-inline: auto;
	text-align: center;
}

.entry-content .aligncenter img {
	margin-inline: auto;
}

.entry-content .alignleft {
	float: left;
	margin: 0.3em 1.4em 1em 0;
	max-width: 50%;
}

.entry-content .alignright {
	float: right;
	margin: 0.3em 0 1em 1.4em;
	max-width: 50%;
}

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

.entry-content .wp-block-buttons {
	margin-block: 1.4em;
}

.entry-content .wp-block-button__link {
	padding: 0.75em 1.35em;
	font-size: 1.125rem;
	color: var(--on-ink);
	text-decoration: none;
}

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

.entry-content .wp-block-embed__wrapper {
	overflow-wrap: anywhere;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.0625rem;
}

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

.entry-content th {
	font-family: var(--font-display);
	font-weight: 700;
}

.entry-content code {
	padding: 0.1em 0.3em;
	background: var(--fog);
	font-size: 0.85em;
}

.entry-content .ad {
	clear: both;
	margin-block: 1.8em;
	padding-block: 18px;
	border-block: 1px solid var(--rule);
}

@media (min-width: 1200px) {
	.article--rail .entry-content .alignwide,
	.article--rail .entry-content .alignfull {
		width: calc(100% + var(--rail) + var(--rail-gap));
		max-width: none;
		margin-left: calc(-1 * (var(--rail) + var(--rail-gap)));
	}
}

.page-links {
	margin-top: 24px;
	font: 700 1.0625rem var(--font-display);
}

/* Related --------------------------------------------------------------- */

.related {
	padding-top: 64px;
}

.related__grid {
	display: grid;
	margin-top: 18px;
}

@media (min-width: 760px) {
	.related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px;
	}
}

@media (min-width: 1024px) {
	.related__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.related .card__title {
		font-size: 1.4375rem;
	}
}

/* Archive, search and 404 headers -------------------------------------- */

.pagehead {
	padding-block: 40px 20px;
}

.pagehead__context {
	margin: 0 0 4px;
	color: var(--muted);
	font: 600 1.0625rem/1.2 var(--font-display);
	letter-spacing: 0.03em;
}

.pagehead__title {
	margin: 0;
	color: var(--ink);
	font: 800 clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem)/0.94 var(--font-display);
	text-wrap: balance;
}

.pagehead__desc {
	max-width: 38em;
	margin: 16px 0 0;
	font-size: 1.1875rem;
	line-height: 1.5;
}

.pagehead__desc p {
	margin: 0;
}

.pagehead__count {
	margin: 12px 0 0;
	color: var(--muted);
	font: 500 1.0625rem var(--font-display);
	letter-spacing: 0.03em;
}

.pagehead__search {
	max-width: 560px;
	margin-top: 22px;
}

.empty {
	padding-block: 24px;
}

.empty__text {
	font-size: 1.25rem;
}

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

.comments {
	max-width: 680px;
	margin-top: 48px;
}

.comments__list,
.comments__list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.comments__list {
	margin-bottom: 36px;
}

.comments__list .children {
	padding-left: 28px;
	border-left: 2px solid var(--rule);
}

.comment-body {
	position: relative;
	padding: 18px 0 16px 54px;
	border-bottom: 1px solid var(--rule);
}

.comment-author {
	color: var(--ink);
	font: 700 1.125rem/1.2 var(--font-display);
	letter-spacing: 0.02em;
}

.comment-author .fn a {
	color: inherit;
}

.comment-author .says {
	display: none;
}

.comment-author .avatar {
	position: absolute;
	top: 18px;
	left: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--fog);
}

.comment-metadata {
	margin-top: 2px;
	font: 500 0.9375rem/1.2 var(--font-display);
	letter-spacing: 0.03em;
}

.comment-metadata a {
	color: var(--muted);
	text-decoration: none;
}

.comment-content {
	margin-top: 8px;
	font-size: 1.125rem;
	line-height: 1.55;
}

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

.reply a,
.comment-reply-link {
	color: var(--ink);
	font: 700 0.9375rem/1 var(--font-display);
	letter-spacing: 0.03em;
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.comments__closed,
.comment-notes,
.logged-in-as {
	color: var(--muted);
	font-size: 1rem;
}

.comment-respond {
	margin-top: 8px;
}

.comment-form p {
	margin: 0 0 16px;
}

.comment-form label {
	display: block;
	margin-bottom: 4px;
	color: var(--ink);
	font: 700 1rem var(--font-display);
	letter-spacing: 0.02em;
}

.comment-form .comment-form-cookies-consent label {
	display: inline;
	font: 400 1rem var(--font-text);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--field-line);
	border-radius: 2px;
	background: var(--paper);
	color: var(--text);
	font: 400 1.0625rem/1.5 var(--font-text);
}

.comment-form textarea {
	height: 160px;
}

.comment-form input:focus,
.comment-form textarea:focus {
	border-color: var(--ink);
	outline: 1px solid var(--ink);
	outline-offset: 0;
}

/* Footer ---------------------------------------------------------------- */

.footer {
	padding-top: 48px;
	border-top: 1px solid var(--solid-line);
	background: var(--solid);
	color: #bdbdbd;
}

.site-main + .footer {
	margin-top: 64px;
}

.footer__inner {
	display: grid;
	gap: 36px;
}

@media (min-width: 900px) {
	.footer__inner {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		gap: 72px;
	}
}

.pass-wrap--small {
	font-size: 2rem;
}

.footer .pass {
	--pass-bg: #fff;
	--pass-fg: #000;
	--pass-slot: var(--solid);
}

.footer__about p:not(.pass-wrap) {
	max-width: 32em;
	margin: 18px 0 0;
	font-size: 1.0625rem;
	line-height: 1.5;
}

.footer__logo {
	margin-bottom: 14px;
}

.footer__app-title {
	max-width: 15em;
	margin: 0 0 18px;
	color: #fff;
	font: 800 1.5rem/1.05 var(--font-display);
	text-wrap: balance;
}

.social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.social a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid #555;
	border-radius: 50%;
	color: #fff;
}

.social a:hover {
	border-color: #fff;
}

.footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px 32px;
	margin-top: 44px;
	padding-block: 18px 22px;
	border-top: 1px solid #333;
	font: 500 0.9375rem/1.2 var(--font-display);
	letter-spacing: 0.03em;
}

.footer__copy {
	margin: 0;
}

/* Optional "Footer links" menu, beside the copyright. */
.footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer__links a {
	color: #fff;
	text-decoration: none;
}

.footer__links a:hover {
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* WordPress classes ------------------------------------------------------ */

.alignnone {
	margin-inline: 0;
}

.wp-caption,
.gallery-caption {
	max-width: 100%;
	color: var(--muted);
	font: italic 400 1rem/1.4 var(--font-text);
}

/* Small screens --------------------------------------------------------- */

@media (max-width: 699px) {
	.masthead__inner {
		padding-block: 16px 14px;
	}

	.masthead__links {
		display: none;
	}

	.brand__tagline {
		font-size: 1.0625rem;
	}

	.sitenav__menu {
		gap: 0 22px;
	}

	.sitenav__menu a {
		padding: 13px 0 9px;
		font-size: 1.125rem;
	}

	.search-toggle__button {
		min-height: 46px;
	}

	.section-title {
		font-size: 1.875rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}

@media print {
	.masthead__links,
	.sitenav,
	.adband,
	.ad,
	.sidebar,
	.article__rail,
	.article__share-end,
	.related,
	.footer {
		display: none !important;
	}
}