/*
 * Area page components.
 *
 * The signature of these pages is the provenance apparatus: every figure is set in
 * mono, carries a raised amber citation numeral, and sits above a hairline line
 * giving the observation date and method. Municipal figures (Layer B) carry a
 * green rule on the leading edge; MLS-derived figures (Layer A) do not. That rule
 * is the one piece of visual encoding on the page and it says something true —
 * this number came from a county record, that one came from the listing feed.
 *
 * Everything else stays quiet on purpose. Fifteen hand-built Elementor pages will
 * carry the brand personality; these pages carry authority.
 */

.mcs-area,
.mcs-archive {
	box-sizing: border-box;
	max-width: var(--mcs-width-page);
	margin-inline: auto;
	padding: var(--mcs-space-xl) var(--mcs-gutter) var(--mcs-space-2xl);
	color: var(--mcs-ink);
	font-family: var(--mcs-font-body);
	font-size: var(--mcs-step-0);
	line-height: var(--mcs-leading-body);
}

.mcs-area *,
.mcs-archive * {
	box-sizing: inherit;
}

/* --- Head ------------------------------------------------------------------ */

.mcs-area__head {
	max-width: var(--mcs-measure);
	margin-bottom: var(--mcs-space-l);
}

.mcs-area__eyebrow,
.mcs-card__eyebrow {
	margin: 0 0 var(--mcs-space-2xs);
	color: var(--mcs-accent-deep);
	font-family: var(--mcs-font-mono);
	font-size: var(--mcs-step--2);
	text-transform: uppercase;
	letter-spacing: var(--mcs-tracking-eyebrow);
}

.mcs-area__title {
	margin: 0;
	font-family: var(--mcs-font-display);
	font-size: var(--mcs-step-5);
	font-weight: var(--mcs-weight-display);
	line-height: var(--mcs-leading-tight);
	letter-spacing: var(--mcs-tracking-display);
	text-wrap: balance;
}

.mcs-area__subtitle {
	margin: var(--mcs-space-s) 0 0;
	color: var(--mcs-ink-soft);
	font-size: var(--mcs-step-1);
	line-height: var(--mcs-leading-snug);
}

.mcs-area__boundary {
	margin: var(--mcs-space-m) 0 0;
	padding-left: var(--mcs-space-s);
	border-left: 2px solid var(--mcs-line-strong);
	color: var(--mcs-muted);
	font-family: var(--mcs-font-mono);
	font-size: var(--mcs-step--2);
	line-height: 1.5;
}

/* --- Narrative ------------------------------------------------------------- */

.mcs-area__intro {
	max-width: var(--mcs-measure);
	margin-bottom: var(--mcs-space-xl);
	font-size: var(--mcs-step-1);
	line-height: 1.58;
}

.mcs-area__intro > p:first-child::first-line {
	font-variant-caps: small-caps;
	letter-spacing: 0.02em;
}

.mcs-section {
	max-width: var(--mcs-measure);
	margin-bottom: var(--mcs-space-xl);
}

.mcs-section__heading {
	margin: 0 0 var(--mcs-space-s);
	font-family: var(--mcs-font-display);
	font-size: var(--mcs-step-2);
	font-weight: var(--mcs-weight-display);
	line-height: var(--mcs-leading-snug);
	letter-spacing: var(--mcs-tracking-display);
	text-wrap: balance;
}

.mcs-section__body > p {
	margin: 0 0 var(--mcs-space-s);
}

.mcs-section__body > p:last-child {
	margin-bottom: 0;
}

/* Sections that came from a recorded conversation with the agents are marked as
   such. This is the part no competitor can copy, so it should not look identical
   to the synthesised sections. */
.mcs-section--agent {
	padding: var(--mcs-space-m) 0 var(--mcs-space-m) var(--mcs-space-m);
	border-left: 3px solid var(--mcs-accent);
	background: linear-gradient(to right, var(--mcs-accent-wash), transparent 60%);
}

.mcs-section__attribution {
	margin: 0 0 var(--mcs-space-xs);
	color: var(--mcs-accent-deep);
	font-family: var(--mcs-font-mono);
	font-size: var(--mcs-step--2);
	text-transform: uppercase;
	letter-spacing: var(--mcs-tracking-eyebrow);
}

/* --- Facts: the provenance apparatus -------------------------------------- */

.mcs-fact-rail {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1px;
	margin: var(--mcs-space-m) 0 0;
	padding: 0;
	background: var(--mcs-line);
	border: var(--mcs-rule);
	border-radius: var(--mcs-radius-md);
	overflow: hidden;
}

.mcs-area__headline {
	max-width: none;
	margin-bottom: var(--mcs-space-xl);
}

.mcs-area__headline .mcs-fact-rail {
	margin-top: var(--mcs-space-m);
}

.mcs-fact {
	display: flex;
	flex-direction: column;
	gap: var(--mcs-space-3xs);
	padding: var(--mcs-space-s) var(--mcs-space-s) var(--mcs-space-xs);
	background: var(--mcs-paper-raised);
}

.mcs-fact--layer-b {
	box-shadow: inset 3px 0 0 var(--mcs-accent);
}

.mcs-fact__label {
	margin: 0;
	color: var(--mcs-muted);
	font-family: var(--mcs-font-mono);
	font-size: var(--mcs-step--2);
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.mcs-fact__value {
	display: flex;
	align-items: flex-start;
	gap: 0.15em;
	margin: 0;
}

.mcs-fact__number {
	font-family: var(--mcs-font-mono);
	font-size: var(--mcs-step-2);
	font-weight: var(--mcs-weight-medium);
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.mcs-fact--headline .mcs-fact__number {
	font-size: var(--mcs-step-3);
}

/* The citation numeral. Amber, raised, and the only interactive thing inside a
   fact block. If a figure has no marker, the template dropped it — that is
   intentional, not a rendering bug. */
.mcs-fact__cite {
	flex: 0 0 auto;
	color: var(--mcs-signal);
	font-family: var(--mcs-font-mono);
	font-size: var(--mcs-step--2);
	font-weight: var(--mcs-weight-medium);
	line-height: 1;
	text-decoration: none;
	vertical-align: super;
	transition: color var(--mcs-duration) var(--mcs-ease);
}

.mcs-fact__cite::before {
	content: "[";
}

.mcs-fact__cite::after {
	content: "]";
}

.mcs-fact__cite:hover,
.mcs-fact__cite:focus-visible {
	color: var(--mcs-ink);
	background: var(--mcs-signal-wash);
}

.mcs-fact__provenance {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--mcs-space-2xs);
	margin: var(--mcs-space-3xs) 0 0;
	padding-top: var(--mcs-space-3xs);
	border-top: var(--mcs-rule-hair);
	color: var(--mcs-muted);
	font-family: var(--mcs-font-mono);
	font-size: var(--mcs-step--2);
	line-height: 1.45;
}

.mcs-fact__provenance time {
	color: var(--mcs-signal);
}

.mcs-fact__method {
	flex: 1 1 100%;
	color: var(--mcs-muted);
}

/* --- Photography ---------------------------------------------------------- */

.mcs-media {
	margin-bottom: var(--mcs-space-xl);
}

.mcs-media__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: var(--mcs-space-m);
	margin: var(--mcs-space-m) 0 0;
	padding: 0;
	list-style: none;
}

.mcs-media__item figure {
	margin: 0;
}

.mcs-media__item img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--mcs-radius-md);
	background: var(--mcs-paper-sunk);
}

.mcs-media__item figcaption {
	margin-top: var(--mcs-space-2xs);
	color: var(--mcs-muted);
	font-family: var(--mcs-font-mono);
	font-size: var(--mcs-step--2);
	line-height: 1.45;
}

.mcs-media__date,
.mcs-media__credit {
	display: block;
	color: var(--mcs-signal);
}

/* --- FAQ ------------------------------------------------------------------ */

.mcs-faq {
	max-width: var(--mcs-measure);
	margin-bottom: var(--mcs-space-xl);
}

.mcs-faq__list {
	margin: 0;
}

.mcs-faq__item {
	padding: var(--mcs-space-m) 0;
	border-top: var(--mcs-rule);
}

.mcs-faq__q {
	margin: 0 0 var(--mcs-space-2xs);
	font-family: var(--mcs-font-display);
	font-size: var(--mcs-step-1);
	font-weight: var(--mcs-weight-display);
	line-height: var(--mcs-leading-snug);
}

.mcs-faq__a {
	margin: 0;
}

.mcs-faq__a > p {
	margin: 0 0 var(--mcs-space-2xs);
}

/* --- CTA ------------------------------------------------------------------ */

.mcs-cta {
	max-width: var(--mcs-measure);
	margin-bottom: var(--mcs-space-xl);
	padding: var(--mcs-space-l);
	border: var(--mcs-rule);
	border-radius: var(--mcs-radius-md);
	background: var(--mcs-paper-raised);
}

.mcs-cta > p {
	margin: 0 0 var(--mcs-space-m);
	color: var(--mcs-ink-soft);
}

.mcs-cta__button {
	display: inline-block;
	padding: 0.7em 1.4em;
	border-radius: var(--mcs-radius-sm);
	background: var(--mcs-accent-deep);
	color: #fff;
	font-family: var(--mcs-font-mono);
	font-size: var(--mcs-step--1);
	text-decoration: none;
	letter-spacing: 0.01em;
	transition: background var(--mcs-duration) var(--mcs-ease);
}

.mcs-cta__button:hover,
.mcs-cta__button:focus-visible {
	background: var(--mcs-ink);
	color: #fff;
}

/* --- Adjacent areas ------------------------------------------------------- */

.mcs-adjacent {
	max-width: var(--mcs-measure);
	margin-bottom: var(--mcs-space-xl);
}

.mcs-adjacent__heading {
	margin: 0 0 var(--mcs-space-xs);
	font-family: var(--mcs-font-mono);
	font-size: var(--mcs-step--2);
	font-weight: var(--mcs-weight-medium);
	text-transform: uppercase;
	letter-spacing: var(--mcs-tracking-eyebrow);
	color: var(--mcs-muted);
}

.mcs-adjacent__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mcs-space-2xs) var(--mcs-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mcs-adjacent__list a {
	color: var(--mcs-accent-deep);
	font-family: var(--mcs-font-display);
	text-underline-offset: 3px;
}

/* --- Source register ------------------------------------------------------ */

.mcs-sources {
	padding-top: var(--mcs-space-l);
	border-top: 2px solid var(--mcs-ink);
}

.mcs-sources__heading {
	margin: 0 0 var(--mcs-space-2xs);
	font-family: var(--mcs-font-mono);
	font-size: var(--mcs-step--1);
	font-weight: var(--mcs-weight-medium);
	text-transform: uppercase;
	letter-spacing: var(--mcs-tracking-eyebrow);
}

.mcs-sources__note {
	max-width: var(--mcs-measure);
	margin: 0 0 var(--mcs-space-m);
	color: var(--mcs-muted);
	font-size: var(--mcs-step--1);
}

.mcs-sources__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mcs-source;
	columns: 2;
	column-gap: var(--mcs-space-xl);
}

.mcs-sources__item {
	position: relative;
	margin: 0 0 var(--mcs-space-s);
	padding-left: 2.25rem;
	break-inside: avoid;
	font-family: var(--mcs-font-mono);
	font-size: var(--mcs-step--2);
	line-height: 1.5;
	counter-increment: mcs-source;
}

.mcs-sources__item::before {
	content: "[" counter(mcs-source) "]";
	position: absolute;
	left: 0;
	color: var(--mcs-signal);
	font-weight: var(--mcs-weight-medium);
}

.mcs-sources__item:target {
	background: var(--mcs-signal-wash);
}

.mcs-sources__name a {
	color: var(--mcs-ink);
}

.mcs-sources__publisher,
.mcs-sources__retrieved,
.mcs-sources__access {
	display: block;
	color: var(--mcs-muted);
}

/* --- Archive -------------------------------------------------------------- */

.mcs-archive__head {
	max-width: var(--mcs-measure);
	margin-bottom: var(--mcs-space-xl);
}

.mcs-archive__title {
	margin: 0 0 var(--mcs-space-s);
	font-family: var(--mcs-font-display);
	font-size: var(--mcs-step-4);
	font-weight: var(--mcs-weight-display);
	line-height: var(--mcs-leading-tight);
	letter-spacing: var(--mcs-tracking-display);
}

.mcs-archive__intro {
	margin: 0;
	color: var(--mcs-ink-soft);
	font-size: var(--mcs-step-1);
	line-height: var(--mcs-leading-snug);
}

.mcs-archive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: var(--mcs-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mcs-card__link {
	display: block;
	height: 100%;
	padding: var(--mcs-space-m);
	border: var(--mcs-rule);
	border-radius: var(--mcs-radius-md);
	background: var(--mcs-paper-raised);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--mcs-duration) var(--mcs-ease),
		box-shadow var(--mcs-duration) var(--mcs-ease);
}

.mcs-card__link:hover,
.mcs-card__link:focus-visible {
	border-color: var(--mcs-accent);
	box-shadow: var(--mcs-shadow-raised);
}

.mcs-card__title {
	margin: 0 0 var(--mcs-space-2xs);
	font-family: var(--mcs-font-display);
	font-size: var(--mcs-step-1);
	font-weight: var(--mcs-weight-display);
	line-height: var(--mcs-leading-snug);
}

.mcs-card__subtitle {
	margin: 0 0 var(--mcs-space-s);
	color: var(--mcs-ink-soft);
	font-size: var(--mcs-step--1);
	line-height: 1.5;
}

.mcs-card__meta {
	margin: 0;
	color: var(--mcs-muted);
	font-family: var(--mcs-font-mono);
	font-size: var(--mcs-step--2);
}

.mcs-archive__empty {
	max-width: var(--mcs-measure);
	color: var(--mcs-muted);
}

/* --- Quality floor -------------------------------------------------------- */

.mcs-area :focus-visible,
.mcs-archive :focus-visible {
	outline: 2px solid var(--mcs-focus);
	outline-offset: 2px;
}

@media (max-width: 48rem) {
	.mcs-sources__list {
		columns: 1;
	}

	.mcs-section--agent {
		padding-left: var(--mcs-space-s);
	}
}

/* --- Inline interpolated figures ------------------------------------------ */

/* A {{fact:...}} token resolved inside prose. Same value, same formatting, and
   the same citation marker as the rail — a narrated figure and a tabulated one
   are the same object, so they cannot drift apart. */
.mcs-inline-fact {
	white-space: nowrap;
}

.mcs-inline-fact__value {
	font-family: var(--mcs-font-mono);
	font-size: 0.94em;
	font-variant-numeric: tabular-nums;
	font-weight: var(--mcs-weight-medium);
	letter-spacing: -0.01em;
}

/* --- Local colour --------------------------------------------------------- */

/* Retrieved items — landmarks, people, events. Each carries its own citation,
   deliberately visible: these are the parts of the page most likely to be read
   sceptically by someone who actually lives here, so the source sits next to the
   claim rather than in a register at the foot. */

.mcs-local {
	max-width: var(--mcs-measure);
	margin-bottom: var(--mcs-space-xl);
}

.mcs-local__list {
	margin: var(--mcs-space-s) 0 0;
	padding: 0;
	list-style: none;
	border-top: var(--mcs-rule);
}

.mcs-local__item {
	padding: var(--mcs-space-s) 0;
	border-bottom: var(--mcs-rule-hair);
}

.mcs-local__name {
	font-family: var(--mcs-font-display);
	font-weight: var(--mcs-weight-display);
}

.mcs-local__summary {
	display: block;
	margin-top: var(--mcs-space-3xs);
	color: var(--mcs-ink-soft);
	font-size: var(--mcs-step--1);
	line-height: 1.5;
}

.mcs-local__cite {
	display: inline-block;
	margin-top: var(--mcs-space-3xs);
	color: var(--mcs-signal);
	font-family: var(--mcs-font-mono);
	font-size: var(--mcs-step--2);
	text-decoration: none;
}

.mcs-local__cite:hover,
.mcs-local__cite:focus-visible {
	text-decoration: underline;
}

/* --- Local colour images -------------------------------------------------- */

/* The credit line is part of the image, not an afterthought below it: CC BY
   requires attribution the reader can actually see, so it sits attached to the
   figure and is never styled down to invisibility. */

.mcs-local__item--imaged {
	display: grid;
	grid-template-columns: minmax(0, 12rem) 1fr;
	gap: var(--mcs-space-m);
	align-items: start;
}

.mcs-local__figure {
	margin: 0;
	grid-row: span 3;
}

.mcs-local__figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--mcs-radius-md);
	background: var(--mcs-paper-sunk);
}

.mcs-local__credit {
	margin-top: var(--mcs-space-3xs);
	color: var(--mcs-muted);
	font-family: var(--mcs-font-mono);
	font-size: var(--mcs-step--2);
	line-height: 1.4;
}

.mcs-local__credit a {
	color: var(--mcs-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mcs-local__credit a:hover,
.mcs-local__credit a:focus-visible {
	color: var(--mcs-ink);
}

@media (max-width: 34rem) {
	.mcs-local__item--imaged {
		grid-template-columns: 1fr;
	}

	.mcs-local__figure {
		grid-row: auto;
		max-width: 16rem;
	}
}

/* --- Area gallery --------------------------------------------------------- */

.mcs-gallery {
	margin-bottom: var(--mcs-space-xl);
}

.mcs-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: var(--mcs-space-m);
	margin: var(--mcs-space-m) 0 0;
	padding: 0;
	list-style: none;
}

.mcs-gallery__item figure {
	margin: 0;
}

.mcs-gallery__item img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--mcs-radius-md);
	background: var(--mcs-paper-sunk);
}

.mcs-gallery__caption {
	display: block;
	color: var(--mcs-ink-soft);
	font-family: var(--mcs-font-body);
	font-size: var(--mcs-step--1);
	line-height: 1.45;
}

/* --- Contextual IDX links ------------------------------------------------- */

/* Several links rather than one button: an area page holds a location and a
   radius, and a single "search listings" button throws that away. */

.mcs-cta__list {
	margin: var(--mcs-space-m) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--mcs-space-s);
}

.mcs-cta__list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--mcs-space-s);
}

.mcs-cta__note {
	color: var(--mcs-ink-soft);
	font-size: var(--mcs-step--1);
}

/* --- Up-link to the county pillar ----------------------------------------- */

.mcs-pillar-link {
	max-width: var(--mcs-measure);
	margin-bottom: var(--mcs-space-xl);
	padding: var(--mcs-space-m);
	border-left: 3px solid var(--mcs-accent);
	background: var(--mcs-paper-sunk);
}

.mcs-pillar-link a {
	font-family: var(--mcs-font-display);
	font-weight: var(--mcs-weight-display);
	color: var(--mcs-accent-deep);
}

.mcs-pillar-link span {
	display: block;
	margin-top: var(--mcs-space-3xs);
	color: var(--mcs-ink-soft);
	font-size: var(--mcs-step--1);
}

.mcs-county__note {
	max-width: var(--mcs-measure);
	color: var(--mcs-ink-soft);
}

/* --- Language switcher ---------------------------------------------------- */

/* Each link is labelled in the language it leads to, so a reader recognises
   their own language rather than having to read the one they are leaving. */

.mcs-langswitch {
	display: flex;
	align-items: baseline;
	gap: var(--mcs-space-s);
	margin-bottom: var(--mcs-space-m);
}

.mcs-langswitch__link {
	color: var(--mcs-accent-deep);
	font-family: var(--mcs-font-mono);
	font-size: var(--mcs-step--1);
	letter-spacing: 0.02em;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}

.mcs-langswitch__link:hover,
.mcs-langswitch__link:focus-visible {
	color: var(--mcs-ink);
}

.mcs-langswitch__draft {
	color: var(--mcs-signal);
	font-family: var(--mcs-font-mono);
	font-size: var(--mcs-step--2);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* --- Area grid ------------------------------------------------------------ */

/* Two card shapes. With an image, the picture leads and the label sits over a
   gradient. Without one, a typographic card carrying what the page actually
   knows — the county, and how many sourced figures are behind it. The second is
   deliberately not a placeholder: a card reading "Dawson County · 9 sourced
   figures" says more than a stock photograph of a living room in another state. */

.mcs-grid {
	margin: var(--mcs-space-xl) 0;
}

.mcs-grid__heading {
	font-family: var(--mcs-font-display);
	font-weight: var(--mcs-weight-display);
	font-size: var(--mcs-step-3);
	margin: 0 0 var(--mcs-space-m);
}

.mcs-grid__list {
	display: grid;
	grid-template-columns: repeat(var(--mcs-grid-columns, 3), minmax(0, 1fr));
	gap: var(--mcs-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mcs-grid__link {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	border-radius: var(--mcs-radius-md);
	text-decoration: none;
	background: var(--mcs-ink);
	color: var(--mcs-paper);
}

.mcs-grid__media {
	display: block;
	aspect-ratio: 3 / 2;
}

.mcs-grid__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.mcs-grid__link:hover .mcs-grid__img,
.mcs-grid__link:focus-visible .mcs-grid__img {
	transform: scale(1.03);
}

.mcs-grid__item--imaged .mcs-grid__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: var(--mcs-space-m);
	background: linear-gradient(to top, rgb(22 33 29 / 0.85), rgb(22 33 29 / 0));
}

.mcs-grid__item--plain .mcs-grid__link {
	display: flex;
	align-items: flex-end;
	aspect-ratio: 3 / 2;
	/* The survey-green rule that marks municipal data elsewhere on the site. */
	border-left: 4px solid var(--mcs-accent);
}

.mcs-grid__item--plain .mcs-grid__body {
	padding: var(--mcs-space-m);
}

.mcs-grid__eyebrow {
	display: block;
	font-family: var(--mcs-font-mono);
	font-size: var(--mcs-step--2);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.75;
}

.mcs-grid__title {
	display: block;
	margin-top: var(--mcs-space-3xs);
	font-family: var(--mcs-font-display);
	font-weight: var(--mcs-weight-display);
	font-size: var(--mcs-step-2);
	line-height: 1.1;
}

.mcs-grid__meta {
	display: block;
	margin-top: var(--mcs-space-2xs);
	font-family: var(--mcs-font-mono);
	font-size: var(--mcs-step--2);
	color: var(--mcs-signal);
}

@media (max-width: 62rem) {
	.mcs-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 34rem) {
	.mcs-grid__list { grid-template-columns: 1fr; }
}