/* Hallmark v2.0.0 · system: Tidewater (docs/DESIGN.md, locked) · job: subscribe/enquire · signature: today's price table */
/* Self-critique: the page is quiet by design; its one visual idea is the shared price axis, and if the band does not read on a phone the table still carries every figure. */
/* Waivers (sloplint, editorial, 2026-11-13):
   48  hex literals on lines 30-39: these ARE the token block; the order asks for the
       --cse-* tokens with the live defaults as fallbacks, and a fallback is a literal.
   34  overflow-x: clip on html/body: a plugin stylesheet does not own html/body; the
       theme does (see the report: the live site should clip both).
   72  .cse-area__figures "crowds the edge": by design. The band's content sits on the
       page edge and only its limestone bleeds, painted by border-image (no layout).
   24b button padding-inline 22px: DESIGN.md's button spec, kept as written. */
/* ==========================================================================
   Area pages: "Property for sale in <town>" (.cse-area) and the hub
   (.cse-area-hub). Port 1:1 into Costa Estates (assets/css/area.css).

   Sits inside Astra's full-width .ast-container, which has no gutter, so the
   root sets the page edge itself (20px gutters, centred 1200px column).
   The limestone band bleeds to the screen edge with the same border-image
   trick as the alerts bar (no 100vw, no layout shift); like that bar it
   relies on the theme clipping sideways overflow (#page / body), which the
   live site already does.

   Fonts: the @font-face rules live in costa-estates.css, which every page
   with the alerts bar already loads, so this file declares none.

   Every colour, face, size, space and corner below comes from the tokens in
   the first block. Breakpoints cannot be custom properties inside @media, so
   they are written out and listed here:
     40em (640px)  table restacks below this
     56.25em (900px) header photo moves beside the text
     48em (768px)  budget rows go two-column
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */

.cse-area,
.cse-area-hub {
	/* Palette: the live --cse-* tokens, with the live defaults as fallbacks. */
	--area-ink: var(--cse-ink, #12201F);
	--area-text: var(--cse-text, #44504E);
	--area-muted: var(--cse-muted, #5E6967);
	--area-line: var(--cse-line, #DDD6CA);
	--area-paper: var(--cse-surface, #FFFFFF);
	--area-stone: var(--cse-surface-alt, #F4F0E8);
	--area-sea: var(--cse-primary, #0F5563);
	--area-sea-deep: var(--cse-primary-hover, #0A4350);
	--area-on-sea: var(--cse-accent-ink, #FFFFFF);
	--area-clay: var(--cse-clay, #A8431F);
	/* The range band: sea at a strength that still clears 3:1 on limestone. */
	--area-band: color-mix(in srgb, var(--area-sea) 70%, var(--area-stone));
	--area-track: var(--area-line);

	/* Faces. */
	--area-font: var(--cse-font, 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
	--area-display: var(--cse-font-display, 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif);

	/* Type scale (px floors: Astra shrinks the root font on small phones). */
	--area-t-display: clamp(40px, 5vw, 64px);
	--area-t-h2: clamp(30px, 3.2vw, 40px);
	--area-t-h3: 24px;
	--area-t-figure: 20px;
	--area-t-lead: 19px;
	--area-t-body: 16px;
	--area-t-small: 14px;
	--area-t-meta: 13px;

	/* Space: the 4px scale from DESIGN.md. */
	--area-s1: 4px;
	--area-s2: 8px;
	--area-s3: 12px;
	--area-s4: 16px;
	--area-s5: 24px;
	--area-s6: 32px;
	--area-s7: 48px;
	--area-s8: 64px;
	--area-s9: 96px;
	--area-section: clamp(48px, 7vw, 96px);

	/* Shape and motion. */
	--area-r: var(--cse-radius, 6px);
	--area-hairline: 1px solid var(--area-line);
	--area-tap: 44px;
	--area-ease: var(--cse-ease, cubic-bezier(.2, .7, .2, 1));
	--area-fast: 180ms;
	--area-measure: 33em;
	--area-max: var(--cse-page-max, 1200px);

	box-sizing: border-box;
	max-width: var(--area-max);
	margin-inline: auto;
	/* The area pages use Astra's full-width layout, which drops the theme's
	   gutter, so the page edge (DESIGN.md: 20px) is set here. */
	padding-inline: var(--cse-page-gutter, 20px);
	color: var(--area-text);
	font-family: var(--area-font);
	font-size: max(var(--area-t-body), 1rem);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.cse-area *,
.cse-area *::before,
.cse-area *::after,
.cse-area-hub *,
.cse-area-hub *::before,
.cse-area-hub *::after {
	box-sizing: inherit;
}

/* --------------------------------------------------------- theme defence */
/* Astra styles every heading, paragraph, list and content link; these beat it. */

.cse-area :is(h1, h2, h3, p, ul, ol, li, figure, table),
.cse-area-hub :is(h1, h2, h3, p, ul, ol, li, figure, table) {
	margin: 0;
	padding: 0;
}

.cse-area :is(ul, ol),
.cse-area-hub :is(ul, ol) {
	list-style: none;
}

.cse-area a,
.cse-area-hub a {
	color: var(--area-sea);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--area-fast) var(--area-ease), text-decoration-color var(--area-fast) var(--area-ease), background-color var(--area-fast) var(--area-ease);
}

.cse-area a:hover,
.cse-area-hub a:hover {
	color: var(--area-sea-deep);
	text-decoration-thickness: 2px;
}

.cse-area :focus-visible,
.cse-area-hub :focus-visible {
	outline: 2px solid var(--area-sea);
	outline-offset: 2px;
	border-radius: 2px;
}

.cse-area .cse-area__sr,
.cse-area-hub .cse-area__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Headings: Fraunces, sentence case, long words break rather than overflow. */
.cse-area .cse-area__title,
.cse-area .cse-area__h2,
.cse-area-hub .cse-area__title,
.cse-area-hub .cse-area__h2 {
	min-width: 0;
	color: var(--area-ink);
	font-family: var(--area-display);
	font-optical-sizing: auto;
	font-weight: 400;
	text-transform: none;
	overflow-wrap: break-word;
	hyphens: manual;
	text-wrap: balance;
}

.cse-area .cse-area__title,
.cse-area-hub .cse-area__title {
	font-size: var(--area-t-display);
	line-height: 1.04;
	letter-spacing: -0.02em;
}

.cse-area .cse-area__h2,
.cse-area-hub .cse-area__h2 {
	font-size: var(--area-t-h2);
	line-height: 1.1;
	letter-spacing: -0.015em;
}

/* ------------------------------------------------------------- breadcrumb */

.cse-area .cse-area__crumbs ol,
.cse-area-hub .cse-area__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--area-s2);
	font-size: var(--area-t-small);
	color: var(--area-muted);
}

.cse-area .cse-area__crumbs li,
.cse-area-hub .cse-area__crumbs li {
	display: flex;
	align-items: center;
	gap: var(--area-s2);
}

/* The separator is drawn, so a screen reader reads three places, not two slashes. */
.cse-area .cse-area__crumbs li + li::before,
.cse-area-hub .cse-area__crumbs li + li::before {
	content: "/";
	color: var(--area-line);
}

.cse-area .cse-area__crumbs a,
.cse-area-hub .cse-area__crumbs a {
	display: inline-flex;
	align-items: center;
	min-height: var(--area-tap);
	color: var(--area-muted);
}

.cse-area .cse-area__crumbs [aria-current],
.cse-area-hub .cse-area__crumbs [aria-current] {
	color: var(--area-ink);
}

/* ------------------------------------------------------------------ 1 head */

.cse-area .cse-area__head {
	display: grid;
	gap: var(--area-s6);
	padding-block: var(--area-s5) var(--area-s7);
}

.cse-area .cse-area__intro {
	display: grid;
	align-content: center;
	gap: var(--area-s5);
	min-width: 0;
}

.cse-area .cse-area__intro .cse-area__crumbs {
	margin-block-end: calc(var(--area-s3) * -1);
}

.cse-area .cse-area__count {
	max-width: 34em;
	color: var(--area-ink);
	font-size: var(--area-t-lead);
	line-height: 1.5;
}

.cse-area .cse-area__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--area-s3) var(--area-s5);
}

.cse-area .cse-area__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding-inline: 22px;
	border: 1px solid var(--area-sea);
	border-radius: var(--area-r);
	background: var(--area-sea);
	color: var(--area-on-sea);
	font: 600 15px/1.2 var(--area-font);
	text-align: center;
	text-decoration: none;
}

.cse-area .cse-area__btn:hover {
	border-color: var(--area-sea-deep);
	background: var(--area-sea-deep);
	color: var(--area-on-sea);
}

.cse-area .cse-area__jump {
	display: inline-flex;
	align-items: center;
	min-height: var(--area-tap);
	font-weight: 500;
}

.cse-area .cse-area__photo {
	display: grid;
	gap: var(--area-s2);
	min-width: 0;
}

.cse-area .cse-area__photo img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	max-height: 60vh;
	max-height: 60svh;
	object-fit: cover;
	object-position: 50% 50%;
	border-radius: var(--area-r);
}

.cse-area .cse-area__photo figcaption {
	color: var(--area-muted);
	font-size: var(--area-t-meta);
	line-height: 1.5;
}

.cse-area .cse-area__photo figcaption a {
	color: var(--area-muted);
}

@media (max-width: 40em) {
	.cse-area .cse-area__btn {
		flex: 1 1 100%;
	}
}

@media (min-width: 56.25em) {
	.cse-area .cse-area__head {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: var(--area-s7);
		padding-block: var(--area-s6) var(--area-s8);
	}

	.cse-area .cse-area__photo img {
		max-height: min(600px, 72vh);
	}
}

/* ------------------------------------------------- the numbers: limestone */

/* One limestone band for both figure sections, bled to the screen edge. */
.cse-area .cse-area__figures {
	padding-block: var(--area-section);
	border-image: linear-gradient(var(--area-stone), var(--area-stone)) fill 0 / 0 / 0 100vmax;
	background: var(--area-stone);
}

.cse-area .cse-area__section {
	display: grid;
	gap: var(--area-s5);
	min-width: 0;
}

.cse-area .cse-area__section + .cse-area__section {
	margin-block-start: var(--area-s8);
	padding-block-start: var(--area-s8);
	border-block-start: var(--area-hairline);
}

.cse-area .cse-area__lede {
	max-width: var(--area-measure);
	font-size: var(--area-t-body);
}

.cse-area .cse-area__note {
	max-width: var(--area-measure);
	color: var(--area-muted);
	font-size: var(--area-t-small);
}

.cse-area .cse-area__note strong {
	color: var(--area-ink);
	font-weight: 600;
}

/* ------------------------------------------------- 2 prices (signature) */

.cse-area .cse-area__prices {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	font-variant-numeric: lining-nums tabular-nums;
}

.cse-area .cse-area__prices :is(th, td) {
	padding: var(--area-s3) var(--area-s4);
	border: 0;
	border-block-end: var(--area-hairline);
	background: none;
	vertical-align: middle;
	text-align: start;
}

.cse-area .cse-area__prices :is(th, td):first-child {
	padding-inline-start: 0;
}

.cse-area .cse-area__prices :is(th, td):last-child {
	padding-inline-end: 0;
}

.cse-area .cse-area__prices thead :is(th, td) {
	padding-block: var(--area-s2);
	border-block-end-color: var(--area-muted);
	color: var(--area-muted);
	font: 500 var(--area-t-small)/1.3 var(--area-font);
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
}

.cse-area .cse-area__prices .cse-area__num {
	text-align: end;
	white-space: nowrap;
}

.cse-area .cse-area__prices tbody th {
	color: var(--area-ink);
	font: 500 var(--area-t-figure)/1.25 var(--area-display);
}

.cse-area .cse-area__prices tbody td {
	color: var(--area-text);
	font: 400 var(--area-t-figure)/1.25 var(--area-display);
}

.cse-area .cse-area__prices tbody .cse-area__median {
	color: var(--area-ink);
	font-weight: 500;
}

.cse-area .cse-area__homes a {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	min-width: var(--area-tap);
	min-height: var(--area-tap);
	font: 600 var(--area-t-body)/1 var(--area-font);
}

/* The label each cell carries for the stacked phone layout; the table head says it on wide screens. */
.cse-area .cse-area__cell-label {
	display: none;
}

/* Range band: one shared price axis for every row. --lo, --med and --hi are
   0–1 fractions of that axis, set inline on each row by the template. */
.cse-area .cse-area__band {
	width: 32%;
}

.cse-area .cse-area__track {
	position: relative;
	display: block;
	height: 24px;
}

.cse-area .cse-area__track::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 50%;
	height: 1px;
	background: var(--area-track);
}

.cse-area .cse-area__range {
	position: absolute;
	inset-block-start: calc(50% - 4px);
	inset-inline-start: calc(var(--lo) * 100%);
	width: calc((var(--hi) - var(--lo)) * 100%);
	min-width: 4px;
	height: 8px;
	border-radius: 1px;
	background: var(--area-band);
}

.cse-area .cse-area__tick {
	position: absolute;
	inset-block: 2px;
	inset-inline-start: calc(var(--med) * 100% - 1.5px);
	width: 3px;
	background: var(--area-clay);
}

.cse-area .cse-area__axis {
	display: flex;
	justify-content: space-between;
	gap: var(--area-s2);
	color: var(--area-muted);
	font: 400 var(--area-t-meta)/1.3 var(--area-font);
	white-space: nowrap;
}

/* "€1.5 million" stays in one reading order inside a right-to-left page. */
.cse-area .cse-area__axis span {
	unicode-bidi: plaintext;
}

/* The axis is printed in the table head on wide screens and under the table on phones. */
.cse-area .cse-area__axis--phone {
	display: none;
}

.cse-area .cse-area__key {
	display: flex;
	flex-wrap: wrap;
	gap: var(--area-s1) var(--area-s5);
	color: var(--area-muted);
	font-size: var(--area-t-small);
}

.cse-area .cse-area__key span {
	display: inline-flex;
	align-items: center;
	gap: var(--area-s2);
}

.cse-area .cse-area__key span::before {
	content: "";
	flex: none;
	width: 20px;
	height: 8px;
	background: var(--area-band);
}

.cse-area .cse-area__key .cse-area__key-med::before {
	width: 3px;
	height: 16px;
	background: var(--area-clay);
}

/* Phones: each type becomes a block. The table keeps its roles (set in the
   markup, since display:block drops them in some browsers) and its head stays
   in the accessibility tree, hidden only from sight. */
@media (max-width: 40em) {
	.cse-area .cse-area__prices,
	.cse-area .cse-area__prices :is(tbody, tfoot, tr, th, td) {
		display: block;
		width: auto;
	}

	.cse-area .cse-area__prices thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.cse-area .cse-area__prices tbody tr {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--area-s3) var(--area-s4);
		padding-block: var(--area-s5);
		border-block-end: var(--area-hairline);
	}

	.cse-area .cse-area__prices tbody tr:first-child {
		border-block-start: 1px solid var(--area-muted);
	}

	.cse-area .cse-area__prices tbody :is(th, td),
	.cse-area .cse-area__prices .cse-area__num {
		padding: 0;
		border: 0;
		text-align: start;
	}

	.cse-area .cse-area__prices tbody th {
		grid-column: 1 / -1;
		font-size: var(--area-t-h3);
	}

	.cse-area .cse-area__prices tbody .cse-area__band {
		grid-column: 1 / -1;
		width: auto;
	}

	.cse-area .cse-area__cell-label {
		display: block;
		margin-block-end: var(--area-s1);
		color: var(--area-muted);
		font: 500 var(--area-t-meta)/1.3 var(--area-font);
	}

	.cse-area .cse-area__homes a {
		justify-content: flex-start;
		min-height: 0;
		padding-block: 0;
	}

	/* The count link keeps a 44px target without making the row taller. */
	.cse-area .cse-area__homes a {
		position: relative;
	}

	.cse-area .cse-area__homes a::after {
		content: "";
		position: absolute;
		inset: -14px -12px;
	}

	.cse-area .cse-area__axis--phone {
		display: flex;
		margin-block-start: calc(var(--area-s4) * -1);
	}
}

/* ---------------------------------------------------------- 3 budget bands */

.cse-area .cse-area__budgets {
	max-width: 860px;
	border-block-start: 1px solid var(--area-muted);
}

.cse-area .cse-area__budgets li {
	border-block-end: var(--area-hairline);
}

.cse-area .cse-area__budget {
	display: grid;
	gap: var(--area-s1);
	min-height: var(--area-tap);
	padding-block: var(--area-s4);
	text-decoration: none;
}

.cse-area a.cse-area__budget {
	text-decoration-line: none;
}

.cse-area .cse-area__budget-range {
	color: var(--area-sea);
	font: 400 var(--area-t-figure)/1.3 var(--area-display);
	font-variant-numeric: lining-nums tabular-nums;
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

.cse-area .cse-area__budget-what {
	color: var(--area-text);
}

.cse-area .cse-area__budget:hover .cse-area__budget-range {
	color: var(--area-sea-deep);
	text-decoration-thickness: 2px;
}

@media (min-width: 48em) {
	.cse-area .cse-area__budget {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		align-items: baseline;
		column-gap: var(--area-s6);
	}
}

/* ---------------------------------------------------------- 4 the place */

.cse-area .cse-area__place {
	display: grid;
	gap: var(--area-s5);
	padding-block: var(--area-section) var(--area-s7);
}

.cse-area .cse-area__prose {
	display: grid;
	gap: var(--area-s4);
	max-width: var(--area-measure);
	font-size: 17px;
	line-height: 1.7;
	text-wrap: pretty;
}

/* ------------------------------------------ 5 + 6 the existing components */
/* Spacing around them only; their own look is the plugin's. */

.cse-area .cse-alerts {
	margin-block: var(--area-s5) 0;
	scroll-margin-block-start: var(--area-s5);
}

.cse-area .cse-hunt {
	padding-block-start: var(--area-section);
}

/* The plugin parks both honeypots at left:-9999px, which on a right-to-left
   (Arabic) page is 10,000px of sideways scroll. Here they are hidden in place,
   as the Sell page does. The real fix belongs in costa-estates.css (.cse-hp,
   .cse-hunt__hp); this guard can go when that lands. */
.cse-area :is(.cse-hp, .cse-hunt__hp) {
	left: auto !important;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------------- 7 nearby */

.cse-area .cse-area__nearby {
	display: grid;
	gap: var(--area-s5);
	padding-block: var(--area-s7);
	border-block-start: var(--area-hairline);
}

.cse-area .cse-area__towns {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
	column-gap: var(--area-s6);
}

.cse-area .cse-area__towns li {
	border-block-end: var(--area-hairline);
}

.cse-area .cse-area__towns a {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	column-gap: var(--area-s3);
	min-height: var(--area-tap);
	padding-block: var(--area-s3);
	text-decoration-line: none;
}

.cse-area .cse-area__town {
	color: var(--area-sea);
	font: 400 var(--area-t-figure)/1.3 var(--area-display);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

.cse-area .cse-area__towns a:hover .cse-area__town {
	text-decoration-thickness: 2px;
}

.cse-area .cse-area__town-count {
	color: var(--area-text);
	font-size: var(--area-t-small);
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- 8 sources */

.cse-area .cse-area__sources,
.cse-area-hub .cse-area__sources {
	padding-block: var(--area-s5) var(--area-s7);
	border-block-start: var(--area-hairline);
	color: var(--area-muted);
	font-size: var(--area-t-meta);
	line-height: 1.6;
}

.cse-area .cse-area__sources a,
.cse-area-hub .cse-area__sources a {
	color: var(--area-muted);
}

/* ---------------------------------------------------------------- the hub */

.cse-area-hub .cse-area__head {
	display: grid;
	gap: var(--area-s5);
	max-width: 900px;
	padding-block: var(--area-s5) var(--area-s7);
}

.cse-area-hub .cse-area__head .cse-area__crumbs {
	margin-block-end: calc(var(--area-s3) * -1);
}

.cse-area-hub .cse-area__count {
	max-width: var(--area-measure);
	color: var(--area-ink);
	font-size: var(--area-t-lead);
	line-height: 1.5;
}

.cse-area-hub .cse-area__group {
	display: grid;
	gap: var(--area-s4);
	padding-block: var(--area-s7) 0;
	border-block-start: var(--area-hairline);
}

.cse-area-hub .cse-area__group + .cse-area__group {
	margin-block-start: var(--area-s7);
}

.cse-area-hub .cse-area__group:last-of-type {
	padding-block-end: var(--area-s8);
}

.cse-area-hub .cse-area__places {
	width: 100%;
	max-width: 760px;
	border: 0;
	border-collapse: collapse;
	font-variant-numeric: lining-nums tabular-nums;
}

.cse-area-hub .cse-area__places :is(th, td) {
	padding: var(--area-s2) var(--area-s4);
	border: 0;
	border-block-end: var(--area-hairline);
	background: none;
	text-align: start;
	vertical-align: middle;
}

.cse-area-hub .cse-area__places :is(th, td):first-child {
	padding-inline-start: 0;
}

.cse-area-hub .cse-area__places :is(th, td):last-child {
	padding-inline-end: 0;
}

.cse-area-hub .cse-area__places thead th {
	border-block-end-color: var(--area-muted);
	color: var(--area-muted);
	font: 500 var(--area-t-small)/1.3 var(--area-font);
	text-transform: none;
}

.cse-area-hub .cse-area__places .cse-area__num {
	text-align: end;
	white-space: nowrap;
}

.cse-area-hub .cse-area__places tbody th {
	font-weight: 400;
}

.cse-area-hub .cse-area__places tbody th a {
	display: inline-flex;
	align-items: center;
	min-height: var(--area-tap);
	font: 400 var(--area-t-figure)/1.25 var(--area-display);
}

.cse-area-hub .cse-area__places tbody td {
	color: var(--area-ink);
	font: 400 var(--area-t-figure)/1.25 var(--area-display);
}

@media (max-width: 40em) {
	.cse-area-hub .cse-area__places :is(th, td) {
		padding-inline: var(--area-s2);
	}

	.cse-area-hub .cse-area__places tbody :is(th a, td) {
		font-size: 18px;
	}

	/* Long column heads (German: "Immobilien zum Verkauf") wrap rather than squeeze the town names. */
	.cse-area-hub .cse-area__places thead .cse-area__num {
		white-space: normal;
		hyphens: auto;
	}

	/* A town name stays on one line on ordinary phones. */
	.cse-area-hub .cse-area__places tbody th a {
		white-space: nowrap;
	}
}

/* 320-359px: names may wrap again and the figures step down, so the table fits. */
@media (max-width: 22.49em) {
	.cse-area-hub .cse-area__places :is(th, td) {
		padding-inline: var(--area-s1);
	}

	.cse-area-hub .cse-area__places tbody th a {
		white-space: normal;
	}

	.cse-area-hub .cse-area__places tbody :is(th a, td) {
		font-size: var(--area-t-body);
	}
}

/* ------------------------------------------------------------------ motion */

@media (prefers-reduced-motion: reduce) {
	.cse-area *,
	.cse-area-hub * {
		transition: none;
	}
}

/*
 * Astra underlines every link inside .entry-content with a selector of
 * specificity 0,2,1, which outranked .cse-area .cse-area__btn (0,2,0) and put
 * a line under "See all 12 homes". Owner, 2026-11-13. This one outranks it.
 */
.cse-area .cse-area__actions a.cse-area__btn,
.cse-area .cse-area__actions a.cse-area__btn:hover,
.cse-area .cse-area__actions a.cse-area__btn:visited,
.cse-area .cse-area__actions a.cse-area__btn:focus {
	text-decoration: none;
}