/*
 * 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 :is(.entry-content, .drawn-average) > 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 :is(.entry-content, .drawn-average) > table :is(thead, tbody, tfoot),
.single-post :is(.entry-content, .drawn-average) > table tr,
.single-post :is(.entry-content, .drawn-average) > table tbody tr:nth-child(even) {
	background: transparent;
	border: 0;
}

.single-post :is(.entry-content, .drawn-average) > 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 :is(.entry-content, .drawn-average) > table tbody td * {
	font-size: inherit;
	font-weight: inherit;
	text-align: inherit;
	text-transform: none;
}

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

.single-post :is(.entry-content, .drawn-average) > 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 :is(.entry-content, .drawn-average) > table tbody td:first-child {
	font-family: "SofiaPro-Bold", "SofiaPro-Bold Fallback", sans-serif;
}

.single-post :is(.entry-content, .drawn-average) > 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 :is(.entry-content, .drawn-average) > table tbody td:first-child {
		white-space: nowrap;
	}
}

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

	.single-post :is(.entry-content, .drawn-average) > table thead th {
		font-size: 0.9375rem;
	}
}

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

	.single-post :is(.entry-content, .drawn-average) > 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 :is(.entry-content, .drawn-average) > table thead th,
	.single-post :is(.entry-content, .drawn-average) > 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 :is(.entry-content, .drawn-average) > table thead th,
	.single-post :is(.entry-content, .drawn-average) > table tbody td {
		padding-right: 0.8rem;
	}

	.single-post :is(.entry-content, .drawn-average) > 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 :is(.entry-content, .drawn-average) > 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-formula), so the other posts keep the styles above.
 * The post's own text keeps its order. The drawings sit beside it: the formula's four terms drawn under the
 * formula, the finished move beside the times, and the crew leader beside the estimate.
 * =============================================================================================================== */

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

body.single-post:has(.entry-content .drawn-formula) .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;
	margin-bottom: 0;
	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 formula: the post's own line in the heading face, then its four terms drawn underneath. */
.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: 1.1rem;
	text-wrap: balance;
}

.single-post .entry-content > .drawn-terms {
	display: grid;
	gap: 1.25rem 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0 auto 2.25rem;
	max-width: var(--post-measure);
	padding: 0;
}

.single-post .drawn-terms > li {
	container-type: inline-size;
	margin: 0;
	position: relative;
	text-align: center;
}

/* One crop for all four, so the labels line up; each drawing's own content sits inside its middle 8:5. */
.single-post .drawn-terms > li > img {
	aspect-ratio: 8 / 5;
	display: block;
	float: none;
	height: auto;
	margin: 0 0 0.45rem;
	max-width: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	width: 100%;
}

.single-post .drawn-terms > li > span {
	color: var(--post-ink);
	display: block;
	font-family: "SofiaPro-Bold", "SofiaPro-Bold Fallback", sans-serif;
	font-size: 0.9375rem;
	line-height: 1.3;
	text-wrap: balance;
}

/* 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-average {
	margin: 0.5rem auto 2rem;
	max-width: var(--post-measure);
}

.single-post .drawn-average > .drawn-times {
	margin: 0 0 0.85rem;
	width: 100%;
}

.single-post .drawn-average > .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 .drawn-average > .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 .drawn-average > .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 .drawn-average > .drawn-fineprint {
	color: var(--post-muted);
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 0;
	text-wrap: pretty;
}

.single-post .drawn-average > .drawn-fineprint small {
	font-size: inherit;
}

/* Phones: the finished move closes the times, under the fine print. */
.single-post .drawn-average > img {
	aspect-ratio: 800 / 470;
	display: block;
	float: none;
	height: auto;
	margin: 1.25rem auto 0;
	max-width: 100%;
	object-fit: cover;
	width: min(72%, 20rem);
}

/* The estimate: the crew leader at the door, then the text. */
.single-post .entry-content > .drawn-estimate {
	margin: 0 auto;
	max-width: var(--post-measure);
}

/* A tall crop: the crew leader and the door stand upright, so the drawing is not lost in empty paper. */
.single-post .drawn-estimate > img {
	aspect-ratio: 3 / 4;
	display: block;
	float: none;
	height: auto;
	margin: 0.25rem auto 1rem;
	max-width: 100%;
	object-fit: cover;
	width: min(56%, 14rem);
}

.single-post .drawn-estimate .drawn-copy p {
	font-size: 1.0625rem;
	line-height: 1.7;
	margin: 0 0 1.1em;
	text-wrap: pretty;
}

.single-post .drawn-estimate .drawn-copy > :last-child {
	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-formula) > 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, and the terms stack one to a row. */
@media screen and (max-width: 19.99875em) {
	.single-post .drawn-average > .drawn-times tbody td:last-child {
		white-space: normal;
	}

	.single-post .entry-content > .drawn-terms {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Tablets and up: the four terms in one row joined by plus signs, the finished move beside the times, the crew
   leader beside the estimate. */
@media print, screen and (min-width: 40em) {
	body.single-post:has(.entry-content .drawn-formula) .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;
	}

	.single-post .entry-content > .drawn-terms {
		gap: 0 1.75rem;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* The plus sits in the gap, level with the middle of the drawings (an 8:5 picture is 5/16 of its width tall at
	   its middle). */
	.single-post .drawn-terms > li + li::before {
		color: var(--post-accent);
		content: "+";
		content: "+" / "";
		font-family: "CheapPine-Sans", "CheapPine-Sans Fallback", sans-serif;
		font-size: 2.25rem;
		left: -0.875rem;
		line-height: 1;
		position: absolute;
		top: calc(100cqw * 5 / 16);
		transform: translate(-50%, -50%);
	}

	.single-post .entry-content > .drawn-average {
		align-items: center;
		display: grid;
		gap: 0 2.5rem;
		grid-template-columns: auto minmax(0, 1fr);
	}

	.single-post .drawn-average > .drawn-times {
		grid-column: 1;
		grid-row: 1;
		width: auto;
	}

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

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

	.single-post .drawn-average > .drawn-fineprint {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.single-post .drawn-average > img {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
		width: 100%;
	}

	.single-post .entry-content > .drawn-estimate {
		align-items: center;
		display: grid;
		gap: 0 2rem;
		grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
	}

	.single-post .drawn-estimate > img {
		margin: 0;
		width: 100%;
	}
}

/* Desktop: the four terms spread a little past the text column, centred on it, so the drawings read at a glance. */
@media print, screen and (min-width: 56.25em) {
	.single-post .entry-content > .drawn-terms {
		gap: 0 2.25rem;
		max-width: min(100%, 52rem);
	}

	.single-post .drawn-terms > li + li::before {
		font-size: 2.75rem;
		left: -1.125rem;
	}

	.single-post .drawn-terms > li > span {
		font-size: 1rem;
	}
}

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