/*
	Toronto shelter occupancy — site styles.
	Tokens sampled from Homeless in Toronto (bane.one, 2026-10-16); see docs/DESIGN.md.
	Chart colours validated with the dataviz palette checks (docs/DESIGN.md §3).
*/

@font-face {
	font-family: "Oswald";
	src: url("../vendor/oswald-5.3.0/oswald-latin-wght-normal.woff2") format("woff2");
	font-weight: 200 700;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------- tokens: dark (default, as bane.one) */
:root {
	color-scheme: dark;
	--bg: #08090a;
	--surface: #101113;
	--surface-2: #191a1d;
	--hair: #2b2d31;
	--hair-soft: rgba(214, 206, 190, 0.14);
	--text: #ece7dc;
	--text-2: #d9d3c6;
	--muted: #a19d95;
	--key: #e0a44f;
	--key-text: #e0a44f;
	--cold: #8fb0c4;
	--on-key: #08090a;

	--c-people: #bd7f24;
	--c-refugee: #4a8fd0;
	--c-temporary: #36a87d;
	--c-beds: #d9604a;
	--c-rooms: #9479cf;
	--t-beds: #3a2420;
	--t-rooms: #2a2540;
	--y1: #6d5532;
	--y2: #8a6b3a;
	--y3: #a78342;
	--y4: #c49b4a;
	--y5: #e0b352;
	--y6: #f6cd6a;
	--grid: #222428;
	--axis: #a19d95;

	--scrim: rgba(8, 9, 10, 0.78);
	--map-filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.35);

	--display: "Oswald", "Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow", system-ui, sans-serif;
	--body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

	--pad: 16px;
	--max: 74rem;
	--ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ---------------------------------------------------------------- tokens: light (bane.one about page) */
:root[data-theme="light"] {
	color-scheme: light;
	--bg: #f3efe6;
	--surface: #faf7f0;
	--surface-2: #e9e3d6;
	--hair: #cdc6b6;
	--hair-soft: rgba(27, 26, 24, 0.12);
	--text: #1b1a18;
	--text-2: #33312c;
	--muted: #625f58;
	--key: #b7791f;
	--key-text: #85540c;
	--cold: #2f6f99;
	--on-key: #faf7f0;

	--c-people: #b7791f;
	--c-refugee: #2f7dbb;
	--c-temporary: #2a9a6c;
	--c-beds: #d0573f;
	--c-rooms: #7b5ea7;
	--t-beds: #f2d8cf;
	--t-rooms: #e3dbee;
	--y1: #cfa66a;
	--y2: #bf9047;
	--y3: #ab792c;
	--y4: #93631b;
	--y5: #784d10;
	--y6: #5a3707;
	--grid: #e6e0d3;
	--axis: #625f58;

	--map-filter: saturate(0.3) sepia(0.12) brightness(1.02);
}

@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		color-scheme: light;
		--bg: #f3efe6;
		--surface: #faf7f0;
		--surface-2: #e9e3d6;
		--hair: #cdc6b6;
		--hair-soft: rgba(27, 26, 24, 0.12);
		--text: #1b1a18;
		--text-2: #33312c;
		--muted: #625f58;
		--key: #b7791f;
		--key-text: #85540c;
		--cold: #2f6f99;
		--on-key: #faf7f0;

		--c-people: #b7791f;
		--c-refugee: #2f7dbb;
		--c-temporary: #2a9a6c;
		--c-beds: #d0573f;
		--c-rooms: #7b5ea7;
		--t-beds: #f2d8cf;
		--t-rooms: #e3dbee;
		--y1: #cfa66a;
		--y2: #bf9047;
		--y3: #ab792c;
		--y4: #93631b;
		--y5: #784d10;
		--y6: #5a3707;
		--grid: #e6e0d3;
		--axis: #625f58;

		--map-filter: saturate(0.3) sepia(0.12) brightness(1.02);
	}
}

@media (min-width: 46rem) {
	:root { --pad: 28px; }
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4rem; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text-2);
	font: 400 1rem/1.6 var(--body);
	overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--key-text); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--key); outline-offset: 2px; }

.skip {
	position: absolute; left: -999px; top: 0; z-index: 100;
	background: var(--key); color: var(--on-key); padding: 0.6rem 1rem; font-weight: 700;
}
.skip:focus { left: var(--pad); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

.visually-hidden {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

h1, h2, h3 {
	font-family: var(--display);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--text);
	margin: 0;
	letter-spacing: 0.02em;
}

.kicker {
	font: 600 0.72rem/1.4 var(--mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 0.6rem;
}
.kicker b { color: var(--key-text); font-weight: 600; }

.source {
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--muted);
	margin: 1rem 0 0;
}
.source a { color: inherit; }

.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- masthead */
.masthead {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--bg) 86%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--hair-soft);
}
.masthead .wrap { display: flex; align-items: center; gap: 1rem; min-height: 3.25rem; }
.wordmark {
	font: 600 0.78rem/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--text); text-decoration: none; white-space: nowrap;
}
.wordmark span { color: var(--key-text); }
.nav { display: none; gap: 1.25rem; margin-left: auto; }
.nav a {
	font: 500 0.72rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--muted); text-decoration: none; padding: 0.5rem 0;
}
.nav a:hover { color: var(--text); }
.theme-toggle {
	margin-left: auto; flex: none;
	display: inline-flex; align-items: center; gap: 0.45rem;
	background: none; border: 1px solid var(--hair); color: var(--text-2);
	font: 500 0.7rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
	padding: 0.55rem 0.7rem; cursor: pointer; min-height: 2.25rem;
}
.theme-toggle:hover { border-color: var(--muted); color: var(--text); }
.theme-toggle svg { width: 14px; height: 14px; }
@media (min-width: 60rem) {
	.nav { display: flex; }
	.theme-toggle { margin-left: 0; }
}

/* ---------------------------------------------------------------- hero */
.hero {
	position: relative;
	isolation: isolate;
	min-height: min(88vh, 46rem);
	display: flex; align-items: flex-end;
	color: #ece7dc;
	overflow: hidden;
	background: #08090a;
}
.hero-art, .hero-art img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: 50% 62%;
	z-index: -2;
}
.hero-art img { animation: drift 40s var(--ease) both; transform-origin: 50% 60%; }
/* Never drawn wider than the source (1664 px, the narrower hero): wider screens get soft dark edges. */
@media (min-width: 104rem) {
	.hero-art { left: 50%; right: auto; width: 1664px; transform: translateX(-50%);
		mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
}
@keyframes drift { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg, rgba(8, 9, 10, 0.42) 0%, rgba(8, 9, 10, 0.12) 24%, rgba(8, 9, 10, 0.66) 50%, #08090a 100%),
		linear-gradient(90deg, rgba(8, 9, 10, 0.8) 0%, rgba(8, 9, 10, 0.5) 42%, rgba(8, 9, 10, 0.08) 75%);
}
.hero::after {	/* film grain, as on bane.one */
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.09; pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .hero::before {
	background:
		linear-gradient(180deg, rgba(8, 9, 10, 0.32) 0%, rgba(8, 9, 10, 0.06) 26%, rgba(8, 9, 10, 0.42) 58%, #08090a 100%),
		linear-gradient(90deg, rgba(8, 9, 10, 0.9) 0%, rgba(8, 9, 10, 0.72) 36%, rgba(8, 9, 10, 0.12) 64%, transparent 80%);
}
@media (prefers-color-scheme: light) {	/* same, before the script sets data-theme */
	:root:not([data-theme="dark"]) .hero::before {
		background:
			linear-gradient(180deg, rgba(8, 9, 10, 0.32) 0%, rgba(8, 9, 10, 0.06) 26%, rgba(8, 9, 10, 0.42) 58%, #08090a 100%),
			linear-gradient(90deg, rgba(8, 9, 10, 0.9) 0%, rgba(8, 9, 10, 0.72) 36%, rgba(8, 9, 10, 0.12) 64%, transparent 80%);
	}
}
@media (max-width: 37.5rem) {	/* the portrait plate puts bright sky behind the text column */
	.hero::before, :root[data-theme="light"] .hero::before, :root:not([data-theme="dark"]) .hero::before {
		background: linear-gradient(180deg, rgba(8, 9, 10, 0.3) 0%, rgba(8, 9, 10, 0.82) 34%, rgba(8, 9, 10, 0.9) 60%, #08090a 100%);
	}
}
.hero-inner { padding-top: 5rem; padding-bottom: 2.5rem; width: 100%; }
.hero .kicker { color: #d9d3c6; }
.hero .kicker b { color: #e0a44f; }
.hero h1 {
	color: #ece7dc;
	font-size: clamp(1.05rem, 3.4vw, 1.4rem);
	letter-spacing: 0.08em;
	font-weight: 500;
	margin-bottom: 1.5rem;
	max-width: 40rem;
}
.lastnight {
	font: 600 0.8rem/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
	color: #e0a44f; margin: 0 0 0.4rem;
}
.hero-figure {
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(5.2rem, 22vw, 12.5rem);
	line-height: 0.86;
	letter-spacing: -0.01em;
	color: #ece7dc;
	margin: 0;
	text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
}
.hero-label {
	font-family: var(--display); font-weight: 500; text-transform: uppercase;
	font-size: clamp(1.15rem, 4vw, 1.75rem); letter-spacing: 0.06em; line-height: 1.2;
	color: #ece7dc; margin: 0.9rem 0 0.4rem; max-width: 36rem;
}
.hero-note { color: #d9d3c6; font-size: 0.95rem; max-width: 36rem; margin: 0; }
.hero-note a { color: #e0a44f; }

.reveal { animation: rise 0.9s var(--ease) both; }
.reveal-2 { animation-delay: 0.12s; }
.reveal-3 { animation-delay: 0.24s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- beds / rooms blocks */
.blocks {
	position: relative; z-index: 2;
	display: grid; gap: 1px;
	grid-template-columns: 1fr;
	background: var(--hair);
	border: 1px solid var(--hair);
	margin-top: -1.25rem;
}
@media (min-width: 46rem) { .blocks { grid-template-columns: 1fr 1fr; } }
.block {
	position: relative; overflow: hidden; isolation: isolate;
	background: var(--surface);
	padding: 1.4rem 1.25rem 1.3rem;
}
.block-art {
	position: absolute; right: 0; top: 0; bottom: 0; width: 44%; z-index: -1;
	opacity: 0.2; mask-image: linear-gradient(90deg, transparent 10%, #000 85%);
	-webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 85%);
}
.block-art img { width: 100%; height: 100%; object-fit: cover; }
:root[data-theme="light"] .block-art { opacity: 0.1; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.block h2 { font-size: 1.05rem; letter-spacing: 0.14em; }
.block h2 i {
	display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.55rem;
	vertical-align: 0.05em; border-radius: 2px;
}
.block-rate {
	font-family: var(--display); font-weight: 600; color: var(--text);
	font-size: clamp(3rem, 9vw, 4.4rem); line-height: 1; margin: 0.6rem 0 0.1rem;
}
.block-rate small { font-size: 0.42em; font-weight: 500; letter-spacing: 0.04em; color: var(--text-2); margin-left: 0.25rem; }
.meter {
	position: relative; height: 10px; margin: 0.9rem 0 1rem;
	border-radius: 0 4px 4px 0;
}
.meter > span {
	position: absolute; left: 0; top: 0; bottom: 0;
	border-radius: 0 4px 4px 0;
	transform-origin: left center;
	animation: fill 1.2s var(--ease) 0.3s both;
}
@keyframes fill { from { transform: scaleX(0); } }
.meter.beds { background: var(--t-beds); }
.meter.beds > span { background: var(--c-beds); }
.meter.rooms { background: var(--t-rooms); }
.meter.rooms > span { background: var(--c-rooms); }
.facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0.3rem 1.6rem; margin: 0; }
.facts div { min-width: 0; }
.facts dt { font: 500 0.66rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0.15rem 0 0; font: 600 1.25rem/1.2 var(--display); color: var(--text); letter-spacing: 0.02em; }
.block-foot { font-size: 0.82rem; color: var(--muted); margin: 0.9rem 0 0; }

.summary {
	display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-top: 0;
	grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .summary { grid-template-columns: 1.1fr 2fr; } }
.summary > div { background: var(--surface); padding: 1.1rem 1.25rem; }
.summary .big { font: 600 2.2rem/1 var(--display); color: var(--text); }
.summary .big > span { font-size: 0.55em; color: var(--text-2); font-weight: 500; }
.summary p { margin: 0.35rem 0 0; font-size: 0.9rem; }
.citywide { font-size: 0.92rem; }
.citywide strong { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------------- sections */
.section { padding: 4.5rem 0 0; }
.section-head { margin-bottom: 1.6rem; max-width: 48rem; }
.section-head h2 { font-size: clamp(1.7rem, 5.5vw, 2.6rem); line-height: 1.05; }
.section-head p { margin: 0.7rem 0 0; }
.idx { color: var(--key-text); }

.card {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--hair);
	padding: 1.3rem 1.25rem 1.2rem;
}
.card h3 { font-size: 1.05rem; letter-spacing: 0.1em; }
.card .sub { margin: 0.35rem 0 0; font-size: 0.88rem; color: var(--muted); }

.grid-2 { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 60rem) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* separate panels: Temporary Programs and Temporary Refugee Response */
.panel-refugee { border-top: 3px solid var(--c-refugee); }
.panel-temporary { border-top: 3px solid var(--c-temporary); }
.panel-refugee, .panel-temporary { overflow: hidden; isolation: isolate; }
.panel-refugee .panel-bg, .panel-temporary .panel-bg {
	position: absolute; inset: 0 0 auto; height: min(100%, 720px); z-index: -1; opacity: 0.14;	/* ≤ the 1280×720 source, so never upscaled */
	mask-image: linear-gradient(180deg, #000, transparent 75%);
	-webkit-mask-image: linear-gradient(180deg, #000, transparent 75%);
}
.panel-refugee .panel-bg img, .panel-temporary .panel-bg img { width: 100%; height: 100%; object-fit: cover; }
:root[data-theme="light"] .panel-refugee .panel-bg, :root[data-theme="light"] .panel-temporary .panel-bg { opacity: 0.07; }
.panel-figure { font: 600 clamp(3.2rem, 11vw, 4.6rem)/1 var(--display); color: var(--text); margin: 0.9rem 0 0.2rem; }
.panel-figure small { font-size: 0.34em; font-weight: 500; color: var(--text-2); letter-spacing: 0.06em; text-transform: uppercase; margin-left: 0.4rem; }
.mini-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.mini-blocks h4 { margin: 0; font: 600 0.7rem/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.mini-blocks h4 i { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 2px; margin-right: 0.4rem; }
.mini-rate { font: 600 2rem/1.1 var(--display); color: var(--text); margin: 0.3rem 0 0.1rem; }
.mini-blocks p { margin: 0; font-size: 0.85rem; }
.mini-sectors { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.5rem 1rem; font-size: 0.85rem; }
.mini-sectors li { border-top: 1px solid var(--hair); padding-top: 0.4rem; }
.mini-sectors b { display: block; font: 600 1.3rem/1.2 var(--display); color: var(--text); }
.mini-blocks .meter { height: 6px; margin: 0.5rem 0 0.5rem; }
blockquote.city, .panel-note {
	margin: 1rem 0 0; padding: 0.7rem 0.9rem; font-size: 0.88rem;
	border-left: 3px solid var(--hair); background: var(--surface-2); color: var(--text-2);
}

/* turn-aways */
.panel-turnaways { border-top: 3px solid var(--key); }
.panel-turnaways > p, .panel-turnaways > blockquote { max-width: 48rem; }	/* full-width card: keep the text measure readable */
.ta-figure { font: 600 clamp(3.2rem, 11vw, 4.6rem)/1 var(--display); color: var(--text); margin: 0.9rem 0 0.2rem; }
.ta-figure small { font-size: 0.34em; font-weight: 500; color: var(--text-2); letter-spacing: 0.06em; text-transform: uppercase; margin-left: 0.4rem; }
.ta-split { margin: 0.3rem 0 0; font-size: 0.88rem; }
.spark { margin-top: 1rem; }

/* ---------------------------------------------------------------- charts */
.controls {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem;
	margin: 0 0 1.25rem;
}
.controls .label { font: 500 0.68rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--hair); }
.seg button {
	background: none; border: 0; border-right: 1px solid var(--hair); color: var(--text-2);
	font: 500 0.72rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
	padding: 0.6rem 0.8rem; cursor: pointer; min-height: 2.25rem;
}
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.seg button:hover:not([aria-pressed="true"]) { color: var(--text); background: var(--surface-2); }

.chart-card { padding-bottom: 1rem; }
.chart { position: relative; margin-top: 1rem; min-height: 16rem; }
.chart.short { min-height: 9rem; }
.legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0.8rem 0 0; padding: 0; list-style: none; font-size: 0.82rem; color: var(--text-2); }
.legend li { display: inline-flex; align-items: center; gap: 0.45rem; }
.legend .key-rect { width: 0.8rem; height: 0.8rem; border-radius: 2px; }
.legend .key-line { width: 1rem; height: 2px; border-radius: 1px; }

.uplot, .uplot * { font-family: var(--body); }
.u-legend { display: none; }
.u-select { background: var(--hair-soft); }

.tip {
	position: absolute; z-index: 5; pointer-events: none;
	background: var(--surface-2); border: 1px solid var(--hair);
	padding: 0.55rem 0.7rem; font-size: 0.8rem; line-height: 1.45; min-width: 9rem;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
	display: none;
}
.tip .t-date { font: 500 0.66rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.25rem; }
.tip .t-row { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.tip .t-row b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; min-width: 3.4rem; }
.tip .t-row span { color: var(--muted); }
.tip .t-key { width: 0.9rem; height: 2px; border-radius: 1px; flex: none; }

.band {
	position: relative; isolation: isolate; overflow: hidden;
	min-height: 14rem; display: flex; align-items: flex-end;
	margin: 0 0 -1px; border: 1px solid var(--hair); border-bottom: 0;
	color: #ece7dc;
}
.band picture, .band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 9, 10, 0.2) 0%, rgba(8, 9, 10, 0.78) 45%, rgba(8, 9, 10, 0.92) 100%), linear-gradient(90deg, rgba(8, 9, 10, 0.5), transparent 70%); }
.band .band-text { padding: 1.3rem 1.25rem; }
.band h3 { color: #ece7dc; font-size: clamp(1.4rem, 4.5vw, 2rem); letter-spacing: 0.06em; }
.band p { margin: 0.4rem 0 0; color: #d9d3c6; max-width: 40rem; font-size: 0.95rem; }

/* sector rows */
.sectors { display: grid; gap: 0; margin-top: 1rem; }
.sector {
	display: grid; gap: 0.35rem 1.25rem; align-items: center;
	grid-template-columns: 1fr;
	padding: 0.85rem 0; border-top: 1px solid var(--hair);
}
@media (min-width: 46rem) { .sector { grid-template-columns: 8rem 1.2fr 1fr 1fr; } }
.sector-name { font: 600 1rem/1.2 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.sector-cell { display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.sector-cell .v { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.sector-cell .v small { color: var(--muted); font-weight: 400; display: block; font-size: 0.72rem; letter-spacing: 0.04em; }
.hbar { position: relative; height: 10px; }
.hbar > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; transform-origin: left center; animation: fill 1s var(--ease) both; }
.hbar.people > span { background: var(--c-people); }
.hbar.beds { background: var(--t-beds); border-radius: 0 4px 4px 0; }
.hbar.beds > span { background: var(--c-beds); }
.hbar.rooms { background: var(--t-rooms); border-radius: 0 4px 4px 0; }
.hbar.rooms > span { background: var(--c-rooms); }
.sector-cell.na { color: var(--muted); font-size: 0.8rem; }
.sector-head { display: none; }
@media (min-width: 46rem) {
	.sector-head { display: grid; border-top: 0; padding-bottom: 0.4rem; }
	.sector-head span { font: 500 0.66rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
}

details.data-table { margin-top: 1rem; font-size: 0.85rem; }
details.data-table summary {
	cursor: pointer; font: 500 0.7rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--muted); padding: 0.4rem 0;
}
details.data-table summary:hover { color: var(--text); }
.table-scroll { max-height: 22rem; overflow: auto; border: 1px solid var(--hair); margin-top: 0.5rem; }

/* ---------------------------------------------------------------- programs: filters, map, table */
.filters {
	display: grid; gap: 0.75rem; grid-template-columns: 1fr 1fr;
	padding: 1rem; background: var(--surface); border: 1px solid var(--hair); margin-bottom: 1.25rem;
	position: sticky; top: 3.25rem; z-index: 20;
}
@media (min-width: 60rem) { .filters { grid-template-columns: 2fr 1fr 1.4fr 1fr auto; align-items: end; } }
.filters label { display: grid; gap: 0.3rem; font: 500 0.64rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.filters .search { grid-column: 1 / -1; }
@media (min-width: 60rem) { .filters .search { grid-column: auto; } }
.filters input, .filters select {
	width: 100%; min-height: 2.5rem; padding: 0.45rem 0.6rem;
	background: var(--bg); color: var(--text); border: 1px solid var(--hair); border-radius: 0;
	font: 400 0.92rem/1.2 var(--body);
}
.filters .count { grid-column: 1 / -1; font-size: 0.82rem; color: var(--text-2); align-self: center; }
@media (min-width: 60rem) { .filters .count { grid-column: auto; text-align: right; } }
.filters button.reset {
	background: none; border: 1px solid var(--hair); color: var(--text-2); cursor: pointer;
	font: 500 0.68rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; padding: 0.5rem 0.7rem; min-height: 2.5rem;
}

.notice {
	display: flex; gap: 0.8rem; align-items: flex-start;
	border: 1px solid var(--key); background: color-mix(in srgb, var(--key) 9%, var(--surface));
	padding: 0.9rem 1rem; margin-bottom: 1rem; font-size: 0.92rem; color: var(--text);
}
.notice svg { flex: none; width: 20px; height: 20px; margin-top: 0.1rem; color: var(--key-text); }
.notice strong { color: var(--text); }
.notice a { color: var(--key-text); font-weight: 600; }

.map-wrap { position: relative; border: 1px solid var(--hair); }
.skip-map { z-index: 1001; }	/* above Leaflet's panes and controls; each pin is a tab stop, so keyboard users can jump past them */
.skip-map:focus { top: 0.5rem; left: 0.5rem; }
#map { height: min(70vh, 34rem); min-height: 22rem; background: var(--surface-2); }
.leaflet-tile-pane { filter: var(--map-filter); }
.leaflet-container { font-family: var(--body); background: var(--surface-2); }
.leaflet-control-attribution { font-size: 0.7rem; background: color-mix(in srgb, var(--surface) 88%, transparent) !important; color: var(--text-2) !important; }
.leaflet-control-attribution a { color: var(--key-text) !important; }
.leaflet-bar a { background: var(--surface) !important; color: var(--text) !important; border-color: var(--hair) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface-2); color: var(--text-2); border-radius: 0; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); }
.leaflet-popup-content { margin: 0.8rem 0.9rem; font-size: 0.82rem; line-height: 1.45; min-width: 14rem; }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
.pop-addr { font: 500 0.64rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
.pop-prog { padding: 0.45rem 0; border-top: 1px solid var(--hair); }
.pop-prog:first-of-type { border-top: 0; padding-top: 0; }
.pop-prog strong { color: var(--text); display: block; }
.pop-prog .pop-occ { color: var(--text); font-weight: 600; }
.map-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.8rem; padding: 0.6rem 0.9rem; border-top: 1px solid var(--hair); background: var(--surface); }
.map-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.map-legend i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--hair); }
.unplaced { margin-top: 1rem; font-size: 0.88rem; }
.unplaced ul { margin: 0.4rem 0 0; padding-left: 1.1rem; columns: 2 18rem; }

.table-wrap { overflow: auto; max-height: 42rem; border: 1px solid var(--hair); margin-top: 1.25rem; background: var(--surface); }
.table-note { font-size: 0.8rem; color: var(--muted); margin: 0.5rem 0 0; }
table.programs { width: 100%; border-collapse: collapse; font-size: 0.86rem; min-width: 52rem; }
table.programs th, table.programs td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
table.programs th { position: sticky; top: 0; background: var(--surface-2); z-index: 1; }
table.programs th button {
	all: unset; cursor: pointer; display: inline-flex; gap: 0.3rem; align-items: center;
	font: 600 0.66rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text);
}
table.programs th button:focus-visible { outline: 2px solid var(--key); outline-offset: 2px; }
table.programs th[aria-sort] button::after { content: "↕"; color: var(--muted); font-size: 0.8rem; }
table.programs th[aria-sort="ascending"] button::after { content: "↑"; color: var(--key-text); }
table.programs th[aria-sort="descending"] button::after { content: "↓"; color: var(--key-text); }
table.programs td.r, table.programs th.r { text-align: right; }
table.programs td.r { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.programs th.r button { white-space: nowrap; }
table.programs tbody tr:hover { background: var(--surface-2); }
table.programs .p-name { color: var(--text); font-weight: 600; }
table.programs .p-org { color: var(--muted); font-size: 0.78rem; }
.type-tag { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.type-tag i { width: 0.55rem; height: 0.55rem; border-radius: 2px; }
.full-tag { display: inline-block; font: 600 0.6rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.3rem; border: 1px solid var(--hair); color: var(--text-2); margin-left: 0.35rem; vertical-align: 0.1em; }

table.simple { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
table.simple th, table.simple td { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--hair); text-align: right; font-variant-numeric: tabular-nums; }
table.simple th:first-child, table.simple td:first-child { text-align: left; }
table.simple th { position: sticky; top: 0; background: var(--surface-2); color: var(--text); font: 600 0.64rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------------------------------------------------------------- context */
.context { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 60rem) { .context { grid-template-columns: 1.15fr 1fr; align-items: start; } }
.context h3 { font-size: 1.2rem; letter-spacing: 0.08em; margin-top: 1.6rem; }
.context h3:first-child { margin-top: 0; }
.context ul { padding-left: 1.1rem; }
.context li { margin-bottom: 0.45rem; }
.context figure { margin: 0; border: 1px solid var(--hair); }
.context figure img { width: 100%; height: auto; }
.context figure.doorway { margin-top: 1.25rem; }
.context figure.doorway img { display: block; }
.context figcaption { font-size: 0.75rem; color: var(--muted); padding: 0.5rem 0.7rem; background: var(--surface); }
blockquote.limitation {
	margin: 1rem 0; padding: 1rem 1.2rem; background: var(--surface);
	border-left: 3px solid var(--key); color: var(--text); font-size: 0.98rem;
}
blockquote.limitation p { margin: 0; }
blockquote.limitation cite { display: block; margin-top: 0.5rem; font-style: normal; font-size: 0.8rem; color: var(--muted); }
.spots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin-top: 1.25rem; }
.spots img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.hit {
	display: flex; gap: 1rem; align-items: center; margin-top: 1.4rem;
	padding: 1rem 1.1rem; border: 1px solid var(--hair); background: var(--surface); text-decoration: none; color: var(--text-2);
}
.hit strong { display: block; font: 600 1.15rem/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); }
.hit span { font-size: 0.88rem; }
.hit:hover { border-color: var(--key); }
.hit .arrow { margin-left: auto; font: 600 1.4rem/1 var(--display); color: var(--key-text); }

/* ---------------------------------------------------------------- footer */
.footer { margin-top: 5rem; position: relative; isolation: isolate; overflow: hidden; color: #d9d3c6; background: #08090a; }
/* The art keeps its source's 3:2 shape and is never wider than its 1248 px source, so it is never upscaled. */
.footer-art { position: absolute; top: 0; left: 50%; width: min(100%, 1248px); aspect-ratio: 3 / 2; transform: translateX(-50%); z-index: -2; }
.footer-art img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 78rem) {
	.footer-art { mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
}
.footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--bg) 0, rgba(8, 9, 10, 0.9) 4.5rem, rgba(8, 9, 10, 0.94) 100%); }
.footer .wrap { padding-top: 6rem; padding-bottom: 2.5rem; }
.footer h2 { color: #ece7dc; font-size: 1.1rem; letter-spacing: 0.14em; }
.footer a { color: #e0a44f; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-top: 1rem; font-size: 0.88rem; }
@media (min-width: 60rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer ul { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.footer li { margin-bottom: 0.5rem; }
.footer .legal { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid #2b2d31; font-size: 0.78rem; color: #a19d95; }
.helpline { border: 1px solid #e0a44f; padding: 0.9rem 1rem; color: #ece7dc; align-self: start; }
.helpline strong { display: block; font: 600 0.95rem/1.3 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: #e0a44f; }

.error-banner { background: var(--c-beds); color: #fff; padding: 0.8rem var(--pad); font-weight: 600; }

/* ---------------------------------------------------------------- motion & contrast preferences */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
	:root { --muted: #c4c0b8; --hair: #4a4d52; }
	:root[data-theme="light"] { --muted: #45433e; --hair: #8f8878; }
}
@media (forced-colors: active) {
	.meter > span, .hbar > span { forced-color-adjust: none; }
}
@media print {
	.masthead, .theme-toggle, .filters, #map, .hero-art, .footer-art { display: none !important; }
	.hero { min-height: 0; color: #000; background: none; }
}