/* ---------------------------------------------------------------------------
   Article reading experience.

   Loaded on single posts and city profiles only. Everything here serves one
   goal: a long, data-heavy piece should be comfortable to read to the end on
   a phone.

   The decisions that matter:

   • Measure is capped near 68 characters. Longer lines cost the reader the
     return sweep; shorter ones break the rhythm of a data sentence.
   • Body copy is set slightly larger than the site default, because articles
     are the one place people actually read rather than scan.
   • Vertical rhythm comes from the paragraph, not from margins on everything.
     Headings get a large space above and a small one below, which visually
     binds a heading to the text it introduces.
   • Numbers everywhere use tabular figures so columns of money line up.
   --------------------------------------------------------------------------- */

.housing-cheap-article,
.housing-cheap-city {
	--hc-measure: 34rem;
	--hc-read-size: clamp(1.075rem, 0.98rem + 0.42vw, 1.2rem);
	--hc-read-leading: 1.72;
}

/* --- Header -------------------------------------------------------------- */

.article-header { padding-bottom: clamp(1.25rem, 3vw, 1.75rem); }

.article-header h1 {
	max-width: 20ch;
	font-size: clamp(2rem, 1.35rem + 2.9vw, 3.4rem);
	letter-spacing: -0.038em;
	line-height: 1.04;
	text-wrap: balance;
}

.article-header__dek {
	max-width: 40rem;
	font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
	font-weight: 400;
	line-height: 1.48;
	color: var(--hc-ink-2);
	text-wrap: pretty;
}

/* --- Body ---------------------------------------------------------------- */

.article-content {
	font-size: var(--hc-read-size, 1.1rem);
	line-height: var(--hc-read-leading, 1.72);
	letter-spacing: -0.003em;
	font-variant-numeric: tabular-nums lining-nums;
	hanging-punctuation: first last;
}

/* Cap the measure without capping full-bleed children. */
.article-content > p,
.article-content > ul,
.article-content > ol,
.article-content > blockquote,
.article-content > h2,
.article-content > h3,
.article-content > h4,
.article-content > .takeaways,
.article-content > .sources-box,
.article-content > .article-disclaimer {
	max-width: var(--hc-measure, 34rem);
}

.article-content > p { margin: 0 0 1.35em; text-wrap: pretty; }

/* The opening paragraph carries a little more weight — it is doing the job
   the dek does not. No drop cap: they break badly on narrow screens and
   confuse screen readers. */
.article-content > p:first-of-type {
	font-size: 1.07em;
	line-height: 1.62;
	color: var(--hc-ink);
}

.article-content h2,
.article-content h3 {
	/* Bound to the text below, separated from the text above. */
	margin-top: 2.4em;
	margin-bottom: 0.55em;
	letter-spacing: -0.028em;
	text-wrap: balance;
}
.article-content h2 { font-size: clamp(1.45rem, 1.2rem + 1.1vw, 1.9rem); line-height: 1.16; }
.article-content h3 { font-size: clamp(1.18rem, 1.05rem + 0.6vw, 1.4rem); line-height: 1.24; }
.article-content h2 + h3 { margin-top: 1.4em; }
.article-content > :first-child { margin-top: 0; }

.article-content a {
	color: var(--hc-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
	text-decoration-color: color-mix(in srgb, var(--hc-link) 40%, transparent);
	transition: text-decoration-color 0.14s var(--hc-ease);
}
.article-content a:hover { text-decoration-color: currentColor; }

.article-content ul,
.article-content ol { padding-left: 1.35em; margin-bottom: 1.35em; }
.article-content li { margin-bottom: 0.5em; }
.article-content li::marker { color: var(--hc-ink-3); }
.article-content li > ul,
.article-content li > ol { margin-top: 0.5em; margin-bottom: 0.5em; }

.article-content strong { font-weight: 680; color: var(--hc-heading); }

/* --- Quotes -------------------------------------------------------------- */

.article-content blockquote {
	margin: 2.25em 0;
	padding: 0 0 0 1.35rem;
	border-left: 3px solid var(--hc-accent);
	font-size: 1.14em;
	line-height: 1.5;
	color: var(--hc-heading);
}
.article-content blockquote p:last-child { margin-bottom: 0; }
.article-content blockquote cite,
.article-content blockquote footer {
	display: block;
	margin-top: 0.65rem;
	color: var(--hc-ink-3);
	font-size: 0.8rem;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.article-content .wp-block-pullquote {
	max-width: var(--hc-measure, 34rem);
	margin: 2.5em 0;
	padding: 1.4rem 0;
	border-top: 2px solid var(--hc-heading);
	border-bottom: 1px solid var(--hc-line);
	text-align: left;
}
.article-content .wp-block-pullquote p {
	margin: 0;
	font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.24;
	color: var(--hc-heading);
}

/* --- Figures and tables -------------------------------------------------- */

.article-content figure { margin: 2.25em 0; }
.article-content figure img { width: 100%; border-radius: var(--hc-radius); }
.article-content figcaption {
	max-width: var(--hc-measure, 34rem);
	margin-top: 0.6rem;
	color: var(--hc-ink-3);
	font-size: 0.82rem;
	line-height: 1.5;
}

/* Wide tables scroll inside their own box instead of pushing the page. */
.article-content .wp-block-table,
.article-content > table { max-width: none; }
.article-content .wp-block-table { overflow-x: auto; }
.article-content table {
	font-size: 0.92rem;
	font-variant-numeric: tabular-nums;
}
.article-content thead th {
	position: sticky;
	top: 0;
	background: var(--hc-surface);
	font-size: 0.76rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.article-content tbody tr:nth-child(even) { background: var(--hc-surface-2); }

/* --- Table of contents --------------------------------------------------- */

.article-toc { max-height: calc(100vh - var(--hc-header-h) - 3rem); overflow-y: auto; }
.article-toc a {
	display: block;
	padding: 0.15rem 0;
	border-left: 2px solid transparent;
	padding-left: 0.6rem;
	margin-left: -0.6rem;
	transition: border-color 0.14s var(--hc-ease), color 0.14s var(--hc-ease);
}
.article-toc a.is-current {
	border-left-color: var(--hc-accent);
	color: var(--hc-accent-text);
}

/* --- Ending -------------------------------------------------------------- */

/* A visible end-of-story mark. Readers should not have to guess whether the
   next block is more article or more site. */
.article-content > .article-disclaimer::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2px;
	margin-bottom: 1rem;
	background: var(--hc-accent);
}

.article-footer-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 1rem;
	max-width: var(--hc-measure, 34rem);
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--hc-line);
}
.article-footer-nav a {
	display: block;
	padding: 0.9rem 1rem;
	border: 1px solid var(--hc-line);
	border-radius: var(--hc-radius);
	text-decoration: none;
	transition: border-color 0.16s var(--hc-ease), background 0.16s var(--hc-ease);
}
.article-footer-nav a:hover { border-color: var(--hc-line-2); background: var(--hc-surface-2); }
.article-footer-nav small {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--hc-ink-3);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}
.article-footer-nav span { color: var(--hc-heading); font-weight: 650; line-height: 1.3; }
.article-footer-nav .is-next { text-align: right; }

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 640px) {
	.housing-cheap-article,
	.housing-cheap-city { --hc-read-leading: 1.68; }

	.article-content > p { margin-bottom: 1.25em; }
	.article-content h2 { margin-top: 2em; }

	/* Edge-to-edge media reads better than a boxed image on a small screen. */
	.article-content figure img,
	.article-content .wp-block-image img { border-radius: 6px; }

	.article-toc {
		max-height: none;
		border: 1px solid var(--hc-line);
	}
}

/* Long-form on a large screen benefits from a touch more air. */
@media (min-width: 1200px) {
	.housing-cheap-article { --hc-measure: 35rem; }
}

@media print {
	.article-rail,
	.share-menu,
	.ad-unit,
	.related-section,
	.newsletter-section,
	.site-header,
	.site-footer { display: none !important; }

	.article-layout { display: block; }
	.article-content { font-size: 11pt; }
	.article-content a::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}