/* Chrome and long-form styles for /blog and /blog/{slug}.

   Ported from the Astro site's src/styles/article.css. Every colour, font and
   space value comes from tokens.css, which is enqueued first. Nothing here
   introduces a new token except --measure-article: the design system's
   --measure-prose (56ch) is tuned for marketing sections, and a full article
   reads better a little wider.

   One section differs from the original, and it is marked below: post bodies
   are Gutenberg blocks now rather than Portable Text rendered by emdash/ui, so
   the table rules target `.wp-block-table` and the theme styles the handful of
   core blocks itself, since functions.php dequeues wp-block-library. */

/* comparedrawing.css set `body{background:var(--blue-800)}` for the story page
   and article.css overrode it. WordPress serves both from one stylesheet set,
   so the override is scoped to the class the article templates add rather than
   applied to every page. */

:root {
	--measure-article: 62ch;
}

/* tokens.css paints the body --blue-800 for the story page. The article pages
   end on the --blue-900 footer, so a short page showed a lighter band under it.
   Match the footer instead. */
body.cd-article {
	background: var(--blue-900);
}

/* --- section label ----------------------------------------------------- */

.label {
	display: flex;
	align-items: center;
	gap: var(--gap-icon-text);
	font: var(--type-label);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--redline-500);
	margin-bottom: var(--space-3);
}

/* --- breadcrumbs ------------------------------------------------------- */

/* Sits where the section kicker used to, at the top of the masthead. The
   separator is CSS-generated so it stays decorative: the <ol> already carries
   the structure for assistive tech. */
.crumbs {
	margin-bottom: var(--space-5);
}

.crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
	font: var(--type-caption);
	letter-spacing: var(--tracking-mono-wide);
	line-height: 1.5;
}

.crumbs li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
}

.crumbs li + li::before {
	content: "/";
	color: var(--paper-dim);
	opacity: 0.5;
}

.crumbs a {
	color: var(--paper-dim);
	border-bottom: var(--border-width) solid transparent;
}

.crumbs a:hover {
	color: var(--redline-500);
	border-bottom-color: var(--redline-500);
}

.crumbs [aria-current="page"] {
	color: var(--paper);
}

/* --- masthead (dark) --------------------------------------------------- */

.masthead {
	background: var(--blue-800);
	padding: var(--space-13) 0 var(--space-12);
}

/* Draft preview banner. The redline is the site's mark for "this is the thing
   that changed", and a page that is not the published one qualifies: it says
   the reader is looking at something the public cannot see. Sits above the
   breadcrumbs so it is the first thing read. */
.previewnotice {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-3) var(--space-5);
	margin-bottom: var(--space-7);
	padding: var(--space-4) var(--space-5);
	background: var(--fill-on-dark);
	border-left: 3px solid var(--redline-500);
}

.previewnotice strong {
	font: var(--type-label);
	letter-spacing: var(--tracking-mono-wide);
	text-transform: uppercase;
	color: var(--redline-500);
	flex: none;
}

.previewnotice span {
	font: var(--type-body);
	font-size: var(--text-meta);
	color: var(--paper-dim);
	max-width: var(--measure-narrow);
}

.masthead h1 {
	font: var(--type-display);
	letter-spacing: var(--tracking-display);
	color: var(--paper);
	max-width: 20ch;
	margin-bottom: var(--gap-stack);
}

/* Title and deck on the left, the featured image beside them. The
   illustrations are drawn on the masthead's own blue, so the sheet's corner
   marks are its only frame. */
.masthead-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-10);
	align-items: start;
}

.masthead-figure {
	display: block;
	width: 280px;
	height: auto;
}

.deck {
	font: var(--type-lede);
	color: var(--paper-dim);
	max-width: var(--measure-article);
}

.byline {
	font: var(--type-caption);
	letter-spacing: var(--tracking-mono-wide);
	color: var(--paper-dim);
	margin-top: var(--space-9);
	padding-top: var(--space-4);
	border-top: var(--border-hairline-dark);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
}

/* --- article body (paper) ---------------------------------------------- */

.prose {
	background: var(--paper-100);
	color: var(--text-body-light);
	padding: var(--space-14) 0;
	border-top: var(--border-hairline-light);
}

.prose :is(h2, h3, p, ul, ol, blockquote, pre) {
	max-width: var(--measure-article);
}

.prose h2 {
	font: var(--type-h2);
	letter-spacing: var(--tracking-display);
	color: var(--text-heading-light);
	max-width: 26ch;
	margin: var(--space-13) 0 var(--space-5);
}

.prose > :first-child {
	margin-top: 0;
}

.prose h3 {
	font: var(--type-h3);
	color: var(--text-heading-light);
	margin: var(--space-10) 0 var(--space-3);
}

.prose p {
	font: var(--type-body);
	margin-bottom: var(--space-6);
}

.prose :is(ul, ol) {
	margin: 0 0 var(--space-6) var(--space-6);
	font: var(--type-body);
}

.prose li {
	margin-bottom: var(--space-2);
}

.prose blockquote {
	border-left: 2px solid var(--redline-500);
	padding-left: var(--space-5);
	margin: var(--space-9) 0;
	color: var(--text-heading-light);
}

.prose :is(p, li) a {
	color: var(--redline-600);
	border-bottom: var(--border-width) solid rgba(198, 67, 31, 0.35);
}

.prose :is(p, li) a:hover {
	color: var(--blue-800);
	border-bottom-color: var(--line-on-light-strong);
}

.prose strong {
	font-weight: var(--weight-semibold);
	color: var(--text-heading-light);
}

.prose figure {
	margin: var(--space-10) 0;
}

.prose figcaption {
	font: var(--type-caption);
	line-height: 1.5;
	letter-spacing: var(--tracking-mono-wide);
	color: var(--text-meta-light);
	margin-top: var(--space-3);
}

.prose pre {
	background: var(--paper-200);
	border: var(--border-hairline-light);
	padding: var(--space-5);
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: var(--text-meta);
}

/* --- core blocks ------------------------------------------------------- */

/* functions.php dequeues wp-block-library, so these are the only rules the
   post bodies get. They are the same look the Portable Text renderer had on
   the Astro site: hairline rules, a mono label row, nothing clickable-looking.

   A table can be wider than the measure and still has to fit a phone, so the
   figure scrolls rather than the page. */
.prose .wp-block-table {
	max-width: var(--measure-article);
	margin: var(--space-9) 0;
	overflow-x: auto;
}

.prose .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font: var(--type-body);
	font-size: var(--text-meta);
}

.prose .wp-block-table :is(th, td) {
	border: var(--border-hairline-light);
	padding: var(--space-4);
	vertical-align: top;
	text-align: left;
}

.prose .wp-block-table th {
	background: none;
	font: var(--type-label);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--text-meta-light);
}

.prose .wp-block-table figcaption {
	margin-top: var(--space-3);
}

/* core/list and core/heading carry a class of their own; the rules above
   already match the bare element, so these only have to not fight them. */
.prose .wp-block-list {
	list-style: revert;
}

.prose .wp-block-image {
	margin: var(--space-10) 0;
	max-width: var(--measure-article);
}

.prose .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

.prose .wp-block-video {
	margin: var(--space-10) 0;
	max-width: var(--measure-article);
}

.prose .wp-block-video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: var(--border-hairline-light);
}

.prose .wp-block-quote {
	border-left: 2px solid var(--redline-500);
	padding-left: var(--space-5);
	margin: var(--space-9) 0;
	color: var(--text-heading-light);
	max-width: var(--measure-article);
}

.prose .lede {
	font: var(--type-lede);
	color: var(--text-heading-light);
}

/* --- post list --------------------------------------------------------- */

.postlist {
	border-top: var(--border-hairline-light);
}

.post {
	display: block;
	padding: var(--space-9) 0;
	border-bottom: var(--border-hairline-light);
	color: inherit;
}

.post:hover {
	color: inherit;
}

.post-date {
	display: block;
	font: var(--type-caption);
	letter-spacing: var(--tracking-mono-wide);
	color: var(--text-meta-light);
	margin-bottom: var(--space-3);
}

.post-title {
	font: var(--type-h3);
	color: var(--text-heading-light);
	margin-bottom: var(--space-3);
	max-width: 32ch;
}

.post:hover .post-title {
	color: var(--redline-600);
}

.post-deck {
	font: var(--type-body);
	color: var(--text-body-light);
	max-width: var(--measure-article);
	margin-bottom: var(--space-4);
}

.post-more {
	font: var(--type-caption);
	letter-spacing: var(--tracking-mono-wide);
	color: var(--redline-600);
}

.empty {
	font: var(--type-body);
	color: var(--text-meta-light);
	padding: var(--space-9) 0;
}

/* --- footer ------------------------------------------------------------ */

.foot {
	background: var(--blue-900);
	padding: var(--space-12) 0;
	border-top: var(--border-hairline-dark);
}

.foot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--space-11);
}

.foot-head {
	font:
		var(--weight-medium) var(--text-micro) / var(--leading-flat)
		var(--font-sans);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--paper-dim);
	margin-bottom: var(--space-4);
}

.foot-col {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	align-items: flex-start;
}

.foot address {
	font: var(--type-body);
	font-size: var(--text-meta);
	color: var(--paper-dim);
	line-height: 1.8;
	font-style: normal;
	margin-top: var(--space-5);
}

/* --- narrow ------------------------------------------------------------ */

@media (max-width: 760px) {
	.masthead-head {
		grid-template-columns: minmax(0, 1fr);
	}

	.masthead-figure {
		width: 200px;
	}
}

@media (max-width: 560px) {
	.masthead {
		padding: var(--space-11) 0 var(--space-10);
	}

	.prose {
		padding: var(--space-12) 0;
	}

	.prose h2 {
		margin-top: var(--space-11);
	}
}

/* --- not found ---------------------------------------------------------- */

/* The 404 is a masthead and nothing else: no paper band under it, because
   there is no article to put there. The actions sit below the deck with the
   same rhythm the byline has. */
.notfound-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-7);
	margin-top: var(--space-9);
}

/* --- pagination --------------------------------------------------------- */

/* One page of posts today. These rules exist so the second page, whenever it
   arrives, is not unstyled core markup on a finished design. */
.prose .pagination {
	margin-top: var(--space-11);
	padding-top: var(--space-6);
	border-top: var(--border-hairline-light);
}

.prose .pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.prose .pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	font: var(--type-caption);
	letter-spacing: var(--tracking-mono-wide);
}

.prose .pagination :is(a, span) {
	padding: var(--space-2) var(--space-4);
	border: var(--border-hairline-light);
	color: var(--text-body-light);
}

.prose .pagination a:hover {
	color: var(--redline-600);
	border-color: var(--redline-600);
}

.prose .pagination .current {
	color: var(--paper);
	background: var(--blue-800);
	border-color: var(--blue-800);
}