/*
 * Single blog posts: one centred reading column, headings and tables.
 * The how-long post's own classes use the "Moving day, drawn" layout.
 */

.single-post {
	--post-ink: #3d3935;
	--post-muted: #625b53;
	--post-brown: #64513d;
	--post-accent: #bd5a14;
	--post-link: #a14d11;
	--post-link-line: rgba(161, 77, 17, 0.4);
	--post-rule: #dfcdb9;
	--post-measure: 40rem;
}

/* Header: the title and byline start where the text starts. */
.single-post .article-header h1,
.single-post .article-header .byline {
	max-width: var(--post-measure);
	margin-left: auto;
	margin-right: auto;
}

.single-post .article-header h1 {
	font-size: 2.25rem;
	line-height: 1.05;
	margin-bottom: 0.5rem;
	text-wrap: balance;
}

.single-post .article-header .byline {
	color: var(--post-muted);
	font-size: 0.95rem;
	margin-bottom: 2rem;
}

/* The reading column. */
.single-post .entry-content {
	color: var(--post-ink);
}

.single-post .entry-content > p,
.single-post .entry-content > ul,
.single-post .entry-content > ol,
.single-post .entry-content > h2,
.single-post .entry-content > h3,
.single-post .entry-content > h4,
.single-post .entry-content > h5,
.single-post .entry-content > h6,
.single-post .entry-content > blockquote,
.single-post .entry-content > hr,
.single-post .entry-content > .step-cont {
	max-width: var(--post-measure);
	margin-left: auto;
	margin-right: auto;
}

.single-post .entry-content > p,
.single-post .entry-content > ul,
.single-post .entry-content > ol,
.single-post .entry-content > blockquote {
	font-size: 1.0625rem;
	line-height: 1.7;
}

.single-post .entry-content > p {
	margin-top: 0;
	margin-bottom: 1.1em;
	text-wrap: pretty;
}

/* Links: one style everywhere in a post, step cards included. The darker orange meets AA on the cardboard, and the
   light underline means colour is not the only cue. */
.single-post .entry-content a:not(.button),
.single-post .article-header .byline a {
	color: var(--post-link);
	text-decoration: underline;
	text-decoration-color: var(--post-link-line);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.single-post .entry-content a:not(.button):is(:hover, :focus),
.single-post .article-header .byline a:is(:hover, :focus) {
	color: var(--post-link);
	text-decoration-color: currentColor;
}

/* Photos in paragraphs float left (theme rule ".single-post p img"). Headings clear them, so a heading never wraps
   beside one, and the photo gets room underneath so the heading or text below does not touch it. */
.single-post .entry-content > :is(h2, h3, h4) {
	clear: both;
}

.single-post .entry-content > p img {
	margin-bottom: 0.75rem;
}

/* H2: brown Kondolar in sentence case, well below the CheapPine title, with more space above than below. */
.single-post .entry-content > h2 {
	color: var(--post-brown);
	font-family: "Kondolar-Bold", "Kondolar-Bold Fallback", serif;
	font-size: 1.625rem;
	letter-spacing: 0;
	line-height: 1.15;
	margin-top: 2.75rem;
	margin-bottom: 0.6rem;
	text-transform: none;
	text-wrap: balance;
}

.single-post .entry-content > h2:first-child {
	margin-top: 0;
}

/* H3 and H4: bold Sofia in the text colour. They differ from H2 by typeface, so an older post's H3 lead sentence
   reads as a bold opening line, not as a second heading. */
.single-post .entry-content > h3,
.single-post .entry-content > h4 {
	color: var(--post-ink);
	font-family: "SofiaPro-Bold", "SofiaPro-Bold Fallback", sans-serif;
	letter-spacing: 0;
	line-height: 1.4;
	text-transform: none;
	text-wrap: pretty;
}

.single-post .entry-content > h3 {
	font-size: 1.1875rem;
	margin-top: 2rem;
	margin-bottom: 0.5rem;
}

.single-post .entry-content > h4 {
	font-size: 1.125rem;
	margin-top: 1.75rem;
	margin-bottom: 0.5rem;
}

.single-post .entry-content > h2 + :is(h3, h4) {
	margin-top: 0.25rem;
}

.single-post .entry-content > h4 span {
	text-decoration: none !important;
}

/* Lists: bullets on the column edge, space between items. */
.single-post .entry-content > ul,
.single-post .entry-content > ol {
	margin-top: 0;
	margin-bottom: 1.25rem;
	padding-left: 1.25rem;
}

.single-post .entry-content > ul > li,
.single-post .entry-content > ol > li {
	margin-bottom: 0.7rem;
	text-wrap: pretty;
}

.single-post .entry-content > ul > li::marker {
	color: var(--post-accent);
}

/* List numbers carry meaning, so they get the darker orange (AA on the cardboard). */
.single-post .entry-content > ol > li::marker {
	color: var(--post-link);
}

/* A lede paragraph, where a post has one: a step up from the body, wrapped like the body. */
.single-post .entry-content > .post-lede {
	font-size: 1.1875rem;
	line-height: 1.55;
	margin-bottom: 1.25rem;
}

/* Fine print readable, not tiny. */
.single-post .entry-content > p small {
	color: var(--post-muted);
	display: inline-block;
	max-width: 36rem;
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* Step cards (the kitchen packing and long-distance posts): the instruction reads in the body face, as a bold lead
   line, and the text under it matches the body. The felt-tip hand is for short labels, not sentences people read. */
.single-post .entry-content > .step-cont .step-title {
	color: var(--post-ink);
	font-family: "SofiaPro-Bold", "SofiaPro-Bold Fallback", sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
	margin-bottom: 0.6rem;
	text-wrap: pretty;
}

.single-post .entry-content > .step-cont .step-desc p {
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* ---------------------------------------------------------------------------------------------------------------
 * Tables: a ledger. As wide as their content and on the column's left edge, a brown Kondolar header over a 2px rule,
 * hairline rows, no fill and no stripes, numbers that line up.
 * --------------------------------------------------------------------------------------------------------------- */
.single-post .entry-content > table {
	border: 0;
	font-variant-numeric: tabular-nums;
	margin-top: 1rem;
	margin-bottom: 1.5rem;
	margin-left: max(0px, calc(50% - var(--post-measure) / 2));
	margin-right: auto;
	/* Never wider than the text column, so a table with longer cells wraps inside it instead of running past it. */
	max-width: min(100%, var(--post-measure));
	width: auto;
}

.single-post .entry-content > table :is(thead, tbody, tfoot),
.single-post .entry-content > table tr,
.single-post .entry-content > table tbody tr:nth-child(even) {
	background: transparent;
	border: 0;
}

.single-post .entry-content > table thead th {
	background: transparent;
	border: 0;
	border-bottom: 2px solid var(--post-brown);
	color: var(--post-brown);
	font-family: "Kondolar-Bold", "Kondolar-Bold Fallback", serif;
	font-size: 1rem;
	font-weight: normal;
	letter-spacing: 0;
	line-height: 1.25;
	padding: 0 2rem 0.45rem 0;
	text-align: left;
	text-transform: none;
	vertical-align: bottom;
	/* The theme's word-break: break-word would split "Typical" mid-word when text is enlarged; break between words. */
	word-break: normal;
}

/* The site-wide rule "table tbody tr :not(td:first-child)" makes everything in a row bold, uppercase and centred;
   undo that for whatever sits inside a cell, keeping real bold text bold. */
.single-post .entry-content > table tbody td * {
	font-size: inherit;
	font-weight: inherit;
	text-align: inherit;
	text-transform: none;
}

.single-post .entry-content > table tbody td :is(strong, b) {
	font-weight: 700;
}

.single-post .entry-content > table tbody td {
	border: 0;
	border-bottom: 1px solid var(--post-rule);
	color: var(--post-ink);
	font-family: "SofiaPro-Regular", "SofiaPro-Regular Fallback", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	padding: 0.6rem 2rem 0.6rem 0;
	text-align: left;
	text-transform: none;
	vertical-align: top;
}

.single-post .entry-content > table tbody td:first-child {
	font-family: "SofiaPro-Bold", "SofiaPro-Bold Fallback", sans-serif;
}

.single-post .entry-content > table :is(th, td):last-child {
	padding-right: 0;
}

/* The move-time ledger pairs its typical time with the range, keeping the values together at every width. */
.single-post .entry-content > .post-times {
	width: 100%;
}

.single-post .entry-content > .post-times tbody td:first-child {
	white-space: normal;
}

.single-post .entry-content > .post-times tbody td .post-times-middle {
	color: var(--post-muted);
	display: block;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.5;
	margin-top: 0.15rem;
	text-wrap: pretty;
}

/* ---------------------------------------------------------------------------------------------------------------
 * The theme's blocks keep their look and only move onto the column.
 * --------------------------------------------------------------------------------------------------------------- */

/* Cost tables (section.table-1): the scroll cell fills the column instead of 10/12 of the grid, so it fits on phones. */
.single-post .entry-content > .table-1 {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--post-measure);
}

.single-post .entry-content > .table-1 > .grid-container {
	padding-left: 0;
	padding-right: 0;
}

.single-post .entry-content > .table-1 .grid-x {
	margin-left: 0;
	margin-right: 0;
}

.single-post .entry-content > .table-1 .table-scroll-cell {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}

/* The closing text under a pros/cons pair comes back onto the column; the pair itself keeps the article width. */
.single-post .entry-content > #pros-cons-cont .grid-x > div:not(.pros-cons-cont-int) {
	flex: 1 1 100%;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--post-measure);
}

/* ---------------------------------------------------------------------------------------------------------------
 * Phones.
 * --------------------------------------------------------------------------------------------------------------- */
/* The theme grid supplies 10px; another 10px on the article gives every post part 20px gutters. */
@media screen and (max-width: 39.99875em) {
	.single-post article {
		padding-left: 10px;
		padding-right: 10px;
	}

	.single-post .entry-content > h2 {
		font-size: 1.5625rem;
	}

	.single-post .entry-content > .post-times tbody td {
		font-size: 1.0625rem;
	}
}

/* em queries follow the browser's default font size: enlarged text can wrap the label and use smaller gaps. */
@media screen and (min-width: 20em) {
	.single-post .entry-content > table tbody td:first-child {
		white-space: nowrap;
	}
}

@media screen and (min-width: 20em) and (max-width: 39.99875em) {
	.single-post .entry-content > table thead th,
	.single-post .entry-content > table tbody td {
		padding-right: 1.25rem;
	}

	.single-post .entry-content > table thead th {
		font-size: 0.9375rem;
	}
}

@media screen and (max-width: 19.99875em) {
	.single-post .entry-content > table thead th,
	.single-post .entry-content > table tbody td {
		padding-right: 0.5rem;
	}

	.single-post .entry-content > table thead th {
		font-size: 0.9375rem;
	}
}

/* At roughly ten default-font ems (320px with 32px text), leave room for the longest unbroken words. */
@media screen and (max-width: 11.99875em) {
	.single-post .entry-content > table thead th,
	.single-post .entry-content > table tbody td {
		padding-right: 0.0625rem;
	}
}

/* The narrowest phones: smaller cells and gaps so each table row keeps its line; the header may wrap. */
@media screen and (min-width: 20em) and (max-width: 22.49875em) {
	.single-post .entry-content > table thead th,
	.single-post .entry-content > table tbody td {
		padding-right: 0.8rem;
	}

	.single-post .entry-content > table tbody td {
		font-size: 0.9375rem;
	}
}

/* ---------------------------------------------------------------------------------------------------------------
 * Tablets and up.
 * --------------------------------------------------------------------------------------------------------------- */
@media print, screen and (min-width: 40em) {
	.single-post .article-header h1 {
		font-size: 3.25rem;
		text-wrap: pretty;
	}

	.single-post .entry-content > p,
	.single-post .entry-content > ul,
	.single-post .entry-content > ol,
	.single-post .entry-content > blockquote {
		font-size: 1.125rem;
	}

	.single-post .entry-content > h2 {
		font-size: 1.875rem;
		margin-top: 3.25rem;
	}

	.single-post .entry-content > .post-lede {
		font-size: 1.3125rem;
	}

	.single-post .entry-content > h3 {
		font-size: 1.25rem;
	}

	.single-post .entry-content > h4 {
		font-size: 1.1875rem;
	}

	.single-post .entry-content > table tbody td {
		font-size: 1.0625rem;
	}
}

/* Desktop: a wider column and larger body text, so a post fills the page like the rest of the site rather than
   keeping the phone layout. About 80 characters a line. Tablets and phones keep the narrower column. */
@media print, screen and (min-width: 64em) {
	.single-post {
		--post-measure: 48rem;
	}

	.single-post .entry-content > p,
	.single-post .entry-content > ul,
	.single-post .entry-content > ol,
	.single-post .entry-content > blockquote,
	.single-post .entry-content > .step-cont .step-title,
	.single-post .entry-content > .step-cont .step-desc p {
		font-size: 1.1875rem;
	}
}

/* ===============================================================================================================
 * Moving day, drawn (how-long post only). Every rule below targets classes that only that post uses, or the post
 * header through body:has(.entry-content .drawn-day), so the other posts keep the styles above.
 * The post's own text stays word for word: the answer and the times come first for skimmers; then the day, drawn
 * scenes joined by one dashed route, with each of the post's factors in the scene where it happens. Each factor
 * keeps its number from the post's "in order of impact" list.
 * The route is drawn in CSS (no SVG markup in the post), so the post stays plain HTML.
 * =============================================================================================================== */

/* Header: no photo and no category line; the drawings carry the page. */
body.single-post:has(.entry-content .drawn-day) .article-header > img,
body.single-post:has(.entry-content .drawn-day) .article-header .byline {
	display: none;
}

body.single-post:has(.entry-content .drawn-day) .article-header h1 {
	font-size: 2.875rem;
	line-height: 0.98;
	margin-bottom: 1.1rem;
}

/* The answer, right under the post's question: one calm sentence, the range underlined once with a felt-tip stroke. */
.single-post .entry-content > .drawn-answer {
	font-size: 1.375rem;
	line-height: 1.45;
	text-wrap: pretty;
}

.single-post .drawn-answer strong {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8.6C40 5.6 92 3.9 140 4.7S188 7.3 197 5.5' fill='none' stroke='%23CB6015' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 100% / 100% 0.45em no-repeat;
	font-family: "SofiaPro-Bold", "SofiaPro-Bold Fallback", sans-serif;
	font-weight: normal;
	padding-bottom: 0.14em;
	white-space: nowrap;
}

/* The times: the post's own rows. Square feet and crew size drop under each value in the muted colour, so every row
   reads as home on the left, time on the right. */
.single-post .entry-content > .drawn-times {
	margin-bottom: 0.85rem;
	width: 100%;
}

.single-post .entry-content > .drawn-times thead th {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.8C80 2.4 170 4.3 260 3.1S360 2.7 399 3.5' fill='none' stroke='%2364513D' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 100% / 100% 6px no-repeat;
	border-bottom: 0;
	padding-bottom: 0.6rem;
}

.single-post .entry-content > .drawn-times tbody td:last-child {
	color: var(--post-brown);
	font-family: "Kondolar-Bold", "Kondolar-Bold Fallback", serif;
	font-size: 1.1875rem;
	line-height: 1.25;
	white-space: nowrap;
}

.single-post .entry-content > .drawn-times tbody td small {
	color: var(--post-muted);
	display: block;
	font-family: "SofiaPro-Regular", "SofiaPro-Regular Fallback", sans-serif;
	font-size: 0.9375rem;
	line-height: 1.45;
	margin-top: 0.1rem;
}

.single-post .entry-content > .drawn-fineprint small {
	max-width: none;
}

/* The formula opens the day: the post's own line in the heading face. */
.single-post .entry-content > h3 + .drawn-formula {
	color: var(--post-brown);
	font-family: "Kondolar-Bold", "Kondolar-Bold Fallback", serif;
	font-size: 1.375rem;
	font-weight: normal;
	line-height: 1.3;
	margin-top: 0.35rem;
	margin-bottom: 1rem;
	text-wrap: balance;
}

/* ---------------------------------------------------------------------------------------------------------------
 * The day. Phones: picture, heading, text, then the route runs on to the next picture.
 * --------------------------------------------------------------------------------------------------------------- */
.single-post .entry-content > .drawn-day {
	margin: 0 auto;
	max-width: var(--post-measure);
}

/* Where the route starts: a dot under the intro's first words, then the line swings to the first picture. */
.single-post .entry-content > .drawn-day::before {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 350 80' preserveAspectRatio='none'%3E%3Ccircle cx='12' cy='7' r='4' fill='%2364513D'/%3E%3Cpath d='M12 17C13 38 44 42 92 52S173 60 175 80' fill='none' stroke='%2364513D' stroke-width='2' stroke-dasharray='8 7' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	content: "";
	display: block;
	height: 4.25rem;
	margin: 0.25rem 0 0;
	max-height: 76px;
}

/* The route between scenes on phones: it leaves under the text's left edge and swings to the next picture. */
.single-post .drawn-day > .drawn-scene::after {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 350 96' preserveAspectRatio='none'%3E%3Cpath d='M12 2C13 30 44 38 92 50S173 64 175 95' fill='none' stroke='%2364513D' stroke-width='2' stroke-dasharray='8 7' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	content: "";
	display: block;
	height: 4.25rem;
	margin: 0.75rem 0 0;
	max-height: 76px;
}

@media screen and (max-width: 56.24875em) {
	.single-post .drawn-day > .drawn-scene:nth-child(even)::after {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 350 96' preserveAspectRatio='none'%3E%3Cpath d='M12 2C10 24 28 32 68 37C122 44 104 63 142 71S176 80 175 95' fill='none' stroke='%2364513D' stroke-width='2' stroke-dasharray='8 7' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
	}
}

.single-post .drawn-day > .drawn-scene:last-child::after {
	content: none;
}

/* Pictures: transparent drawings cropped to their content, never wider than the text column at any text size.
   Each scene has its own crop so the route lands on the drawing, not on empty paper. */
.single-post .drawn-day > .drawn-scene > img {
	display: block;
	float: none;
	height: auto;
	margin: 0 auto 0.9rem;
	max-width: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	width: min(100%, 30rem);
}

/* Phones and tablets: packing and loading are drawn largest; the short steps (the drive, unloading) and the closing
   truck get smaller pictures, so short steps take short scrolls and the route reaches them sooner. */
@media screen and (max-width: 56.24875em) {
	.single-post .drawn-day > .drawn-scene:nth-child(2) > img,
	.single-post .drawn-day > .drawn-scene:nth-child(6) > img {
		width: min(84%, 25rem);
	}

	.single-post .drawn-day > .drawn-scene:nth-child(4) > img {
		width: min(74%, 22rem);
	}

	.single-post .drawn-day > .drawn-scene:nth-child(5) > img {
		width: min(64%, 19rem);
	}
}

.single-post .drawn-day > .drawn-scene:nth-child(1) > img { aspect-ratio: 800 / 440; }
.single-post .drawn-day > .drawn-scene:nth-child(2) > img { aspect-ratio: 800 / 540; }
.single-post .drawn-day > .drawn-scene:nth-child(3) > img { aspect-ratio: 800 / 480; }
.single-post .drawn-day > .drawn-scene:nth-child(4) > img { aspect-ratio: 800 / 380; }
.single-post .drawn-day > .drawn-scene:nth-child(5) > img { aspect-ratio: 800 / 500; }
.single-post .drawn-day > .drawn-scene:nth-child(6) > img { aspect-ratio: 800 / 470; }

/* Scene headings: a short Kondolar heading, then the formula term the scene stands for in the felt-tip hand. */
.single-post .drawn-copy h3 {
	color: var(--post-brown);
	font-family: "Kondolar-Bold", "Kondolar-Bold Fallback", serif;
	font-size: 1.5rem;
	font-weight: normal;
	letter-spacing: 0;
	line-height: 1.15;
	margin: 0 0 0.2rem;
	text-transform: none;
}

.single-post .drawn-copy .drawn-term {
	color: var(--post-accent);
	font-family: "FeltTipRoman", "FeltTipRoman Fallback", sans-serif;
	font-size: 1.3125rem;
	line-height: 1.2;
	margin: 0 0 0.7rem;
}

.single-post .drawn-copy p,
.single-post .drawn-copy ol {
	color: var(--post-ink);
	font-family: "SofiaPro-Regular", "SofiaPro-Regular Fallback", sans-serif;
	font-size: 1.125rem;
	line-height: 1.65;
	margin: 0 0 1rem;
	text-wrap: pretty;
}

/* The note under the post's list sentence: why the numbers run out of order. */
.single-post .entry-content > .drawn-intro-note {
	color: var(--post-muted);
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* The post's factors: each keeps its place in the post's "in order of impact" list as a CheapPine number. */
.single-post .drawn-copy .drawn-factors {
	list-style: decimal;
	margin-left: 0;
	padding-left: 2.1rem;
}

.single-post .drawn-copy .drawn-factors > li {
	margin: 0 0 0.45rem;
	padding-left: 0.25rem;
}

.single-post .drawn-copy .drawn-factors > li::marker {
	color: var(--post-link);
	font-family: "CheapPine-Sans", "CheapPine-Sans Fallback", sans-serif;
	font-size: 1.375em;
}

.single-post .drawn-copy > :last-child {
	margin-bottom: 0;
}

/* The closing truck: the route ends on it, with nothing left to read. */
.single-post .drawn-day > .drawn-done > img {
	margin-bottom: 0;
}

/* Phones: section headings a step smaller, so the first screen reaches the answer. */
@media screen and (max-width: 39.99875em) {
	.single-post .entry-content:has(> .drawn-day) > h2 {
		font-size: 1.5rem;
	}
}

/* Enlarged text (under 20 default-font ems): the times may wrap between words, so the table never runs past the
   column. */
@media screen and (max-width: 19.99875em) {
	.single-post .entry-content > .drawn-times tbody td:last-child {
		white-space: normal;
	}
}

/* Tablets: the same single column, pictures held to a comfortable size. */
@media print, screen and (min-width: 40em) {
	body.single-post:has(.entry-content .drawn-day) .article-header h1 {
		font-size: 3.75rem;
		margin-bottom: 1.5rem;
	}

	.single-post .entry-content > .drawn-answer {
		font-size: 1.5rem;
	}

	.single-post .entry-content > h3 + .drawn-formula {
		font-size: 1.5rem;
	}

	/* A compact ledger: the time sits close to its home, so the eye does not travel across empty paper. */
	.single-post .entry-content > .drawn-times {
		width: auto;
	}

	.single-post .entry-content > .drawn-times :is(thead th, tbody td) {
		padding-right: 3rem;
	}

	.single-post .entry-content > .drawn-times :is(th, td):last-child {
		padding-right: 0;
	}
}

/* ---------------------------------------------------------------------------------------------------------------
 * Desktop: the day spreads to the article width. Pictures alternate sides; the route leaves the bottom of each
 * picture, runs down beside longer text, and swings across to the top of the next picture.
 * Grid rows: 1 = picture, 2 = the rest of the text's height (the route runs down it), 3 = the swing across.
 * --------------------------------------------------------------------------------------------------------------- */
@media print, screen and (min-width: 56.25em) {
	.single-post .entry-content > .drawn-day {
		margin-top: 0;
		max-width: none;
	}

	.single-post .entry-content > .drawn-day::before {
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 72'%3E%3Ccircle cx='30' cy='7' r='4' fill='%2364513D'/%3E%3Cpath d='M30 17C26 32 36 44 31 56C29.5 62 30 67 30 71' fill='none' stroke='%2364513D' stroke-width='2' stroke-dasharray='8 7' stroke-linecap='round'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
		height: 4.5rem;
		margin: 0.5rem 0 0 calc(21% - 1.875rem);
		width: 3.75rem;
	}

	.single-post .drawn-day > .drawn-scene {
		display: grid;
		grid-template-columns: 42% 6% 52%;
		grid-template-rows: auto 1fr 7.5rem;
	}

	.single-post .drawn-day > .drawn-scene:nth-child(even) {
		grid-template-columns: 52% 6% 42%;
	}

	.single-post .drawn-day > .drawn-scene > img {
		align-self: start;
		grid-column: 1;
		grid-row: 1;
		margin: 0;
		max-width: none;
		width: 100%;
	}

	.single-post .drawn-day > .drawn-scene > .drawn-copy {
		align-self: center;
		grid-column: 3;
		grid-row: 1 / 3;
	}

	.single-post .drawn-day > .drawn-scene:nth-child(even) > img,
	.single-post .drawn-day > .drawn-scene:nth-child(even)::before {
		grid-column: 3;
	}

	.single-post .drawn-day > .drawn-scene:nth-child(even) > .drawn-copy {
		grid-column: 1;
	}

	/* Down beside longer text. */
	.single-post .drawn-day > .drawn-scene::before {
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 160'%3E%3Cpath d='M20 0C16 26 24 54 20 80S16 134 20 160' fill='none' stroke='%2364513D' stroke-width='2' stroke-dasharray='8 7' stroke-linecap='round'/%3E%3C/svg%3E") center top / 2.5rem 10rem repeat-y;
		content: "";
		grid-column: 1;
		grid-row: 2;
	}

	/* Across to the next picture: 21% is the centre of a picture on the left, 79% of one on the right. */
	.single-post .drawn-day > .drawn-scene::after {
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 120' preserveAspectRatio='none'%3E%3Cpath d='M210 2C207 50 318 70 492 61S786 52 790 118' fill='none' stroke='%2364513D' stroke-width='2' stroke-dasharray='8 7' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
		grid-column: 1 / -1;
		grid-row: 3;
		height: auto;
		margin: 0;
		max-height: none;
		width: auto;
	}

	.single-post .drawn-day > .drawn-scene:nth-child(even)::after {
		transform: scaleX(-1);
	}

	.single-post .drawn-day > .drawn-scene:is(:nth-child(3), :nth-child(4))::after {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 120' preserveAspectRatio='none'%3E%3Cpath d='M210 2C214 46 262 76 430 70C598 64 700 42 762 68C785 79 791 99 790 118' fill='none' stroke='%2364513D' stroke-width='2' stroke-dasharray='8 7' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
	}

	.single-post .drawn-day > .drawn-scene:last-child {
		grid-template-rows: auto;
	}

	.single-post .drawn-day > .drawn-scene:last-child::before {
		content: none;
	}

	.single-post .drawn-copy h3 {
		font-size: 1.75rem;
	}
}

/* Wide desktops: the scenes' text keeps the body size of the column around it. */
@media print, screen and (min-width: 64em) {
	.single-post .drawn-copy p,
	.single-post .drawn-copy ol {
		font-size: 1.1875rem;
	}
}