/* Legacy Submarkets — district page styling.
 *
 * Every rule is scoped to .lsm. A site-wide color rule once made the dark
 * green sections of this site unreadable, and the standing instruction since
 * then is that shared stylesheets set typeface only. This one sets color, so
 * it must never escape its container.
 *
 * Tokens match the guides exactly rather than approximately, so a reader
 * moving from the districts guide to a district page sees one design and not
 * two. #4A9456 is deliberately absent: it was retired from the palette for
 * failing contrast on light grounds.
 */

.lsm {
	--paper: #F2EDE3;
	--surface: #F8F6F1;
	--ink: #1A1A1A;
	--ink-2: #4A4841;
	--muted: #6A6A6A;
	--rule: #D8D3C8;
	--green: #1D7A3F;      /* 5.0:1 on --paper */
	--green-deep: #162D1A;
	--green-soft: #DCEBDE;
	--brass: #7E6322;

	--display: "Zilla Slab", Georgia, serif;
	--body: "Karla", "Helvetica Neue", Arial, sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

	background: var(--paper);
	color: var(--ink);
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	padding: 52px clamp(18px, 5vw, 64px) 64px;
}

.lsm * { box-sizing: border-box; }

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

.lsm .lsm-kicker {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--brass);
	margin: 0 0 14px;
}

.lsm .lsm-title {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0;
	max-width: 20ch;
	text-wrap: balance;
}

.lsm .lsm-lede {
	font-size: clamp(18px, 2.1vw, 21px);
	color: var(--ink-2);
	max-width: 58ch;
	margin: 18px 0 0;
}

/* The fact strip. Grid rather than flex so the columns line up down the
   page instead of each one sizing to its own content. */
.lsm .lsm-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 20px 28px;
	margin: 34px 0 0;
	padding: 20px 0 0;
	border-top: 2px solid var(--ink);
}

.lsm .lsm-facts > div { margin: 0; }

.lsm .lsm-facts dt {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 5px;
}

.lsm .lsm-facts dd {
	margin: 0;
	font-size: 15.5px;
	color: var(--ink);
	line-height: 1.4;
}

/* ---- sections ------------------------------------------------------ */

.lsm .lsm-sec { margin-top: 52px; max-width: 68ch; }

.lsm .lsm-sec h2 {
	font-family: var(--display);
	font-size: clamp(21px, 2.4vw, 26px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0 0 14px;
	text-wrap: balance;
}

.lsm .lsm-sec p { margin: 0 0 14px; color: var(--ink-2); }
.lsm .lsm-sec p:last-child { margin-bottom: 0; }
.lsm .lsm-sec b { color: var(--ink); }

.lsm .lsm-aside {
	border-left: 2px solid var(--rule);
	padding-left: 16px;
	font-size: 15px;
	color: var(--muted) !important;
}

/* The one section whose answer differs by district gets a ground of its
   own, because "we do not manage here" is the sentence most worth not
   burying. */
.lsm .lsm-presence {
	background: var(--surface);
	border-left: 3px solid var(--green);
	padding: 24px 26px;
	max-width: 72ch;
}

.lsm .lsm-siblings { font-size: 15px; }

/* ---- links --------------------------------------------------------- */

.lsm a {
	color: var(--green);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(29, 122, 63, .45);
}

.lsm a:hover { text-decoration-color: var(--green); }

.lsm a:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}

/* ---- call to action ------------------------------------------------ */

.lsm .lsm-cta {
	margin-top: 58px;
	padding: 30px 32px;
	background: var(--green-soft);
	max-width: 72ch;
}

.lsm .lsm-cta h2 {
	font-family: var(--display);
	font-size: clamp(20px, 2.3vw, 25px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--green-deep);
	margin: 0 0 10px;
	text-wrap: balance;
}

.lsm .lsm-cta p { margin: 0 0 18px; color: var(--ink-2); }

.lsm .lsm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.lsm .lsm-btn {
	display: inline-block;
	font-family: var(--body);
	font-weight: 600;
	font-size: 16px;
	padding: 13px 24px;
	border: 2px solid var(--green);
	background: var(--green);
	color: #FFFFFF;             /* 4.8:1 on #1D7A3F */
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}

.lsm .lsm-btn:hover {
	background: var(--green-deep);
	border-color: var(--green-deep);
	text-decoration: none;
}

.lsm .lsm-btn-ghost {
	background: transparent;
	color: var(--green);
}

.lsm .lsm-btn-ghost:hover {
	background: #FFFFFF;
	border-color: var(--green-deep);
	color: var(--green-deep);
}

/* ---- foot ---------------------------------------------------------- */

.lsm .lsm-foot {
	margin-top: 52px;
	padding-top: 18px;
	border-top: 1px solid var(--rule);
	font-family: var(--mono);
	font-size: 11px;
	line-height: 1.8;
	color: var(--muted);
	max-width: 76ch;
}

@media (prefers-reduced-motion: reduce) {
	.lsm .lsm-btn { transition: none; }
}

@media (max-width: 640px) {
	.lsm { padding: 36px 18px 48px; font-size: 16.5px; }
	.lsm .lsm-sec { margin-top: 40px; }
	.lsm .lsm-presence,
	.lsm .lsm-cta { padding: 20px 18px; }
	.lsm .lsm-actions .lsm-btn { flex: 1 1 100%; text-align: center; }
}

/* ---- theme overrides ----------------------------------------------- */

/* Bridge sets text-transform:uppercase on headings theme-wide. On a page of
   full sentences that turns every section heading into shouting, and it
   breaks the ligatures and the descender rhythm that are the reason for
   choosing Zilla Slab in the first place. Reset it here only.
   Also reset the theme's own font-family and colour on our headings, since
   Bridge's h1/h2 rules are more specific than a bare element selector. */
.lsm h1,
.lsm h2 {
	text-transform: none !important;
	font-family: var(--display) !important;
	letter-spacing: -0.01em;
}

.lsm .lsm-title { color: var(--ink) !important; }
.lsm .lsm-sec h2 { color: var(--ink) !important; }
.lsm .lsm-cta h2 { color: var(--green-deep) !important; }

/* Bridge also applies its own line-height and margins to headings inside
   post content, which leaves the display face too airy at these sizes. */
.lsm .lsm-title { line-height: 1.08 !important; }
.lsm .lsm-sec h2,
.lsm .lsm-cta h2 { line-height: 1.2 !important; }

/* ---- boundary map --------------------------------------------------- */

/* Leaflet needs an explicit height or it renders nothing. The aspect ratio
   is set with a height rather than aspect-ratio so older Safari behaves. */
.lsm .lsm-map-wrap { margin: 34px 0 0; max-width: 72ch; }

.lsm .lsm-map {
	height: 380px;
	width: 100%;
	border: 1px solid var(--rule);
	background: var(--surface);
}

.lsm .lsm-map-note {
	margin: 10px 0 0;
	font-family: var(--mono);
	font-size: 11px;
	line-height: 1.7;
	color: var(--muted) !important;
}

/* Leaflet ships its own popup and control styling. These few rules pull it
   onto the page's type and palette without fighting the library. */
.lsm .leaflet-container {
	font-family: var(--body);
	font-size: 14px;
	background: var(--surface);
}

.lsm .leaflet-popup-content { margin: 12px 14px; line-height: 1.5; }
.lsm .leaflet-popup-content a { color: var(--green); }
.lsm .leaflet-popup-content-wrapper { border-radius: 0; }
.lsm .leaflet-container a.leaflet-popup-close-button { color: var(--muted); }

.lsm .leaflet-control-attribution {
	font-family: var(--mono);
	font-size: 9.5px;
	background: rgba(248, 246, 241, .85);
}

.lsm .leaflet-bar a {
	color: var(--ink);
	border-radius: 0;
}

@media (max-width: 640px) {
	.lsm .lsm-map { height: 300px; }
}

/* A note about what neighborhood a district is actually in.
 *
 * Two of the eight carry one: Country Club Park, which the city files under
 * the Wilshire plan rather than West Adams, and La Fayette Square, where the
 * two names genuinely overlap. Set apart from the body text because it answers
 * a different question from the rest of the section -- not what the district is
 * like, but what to call it. */
.lsm .lsm-context {
	border-left: 2px solid var(--brass);
	padding-left: 16px;
	font-size: 15.5px;
	color: var(--ink-2) !important;
}

.lsm .lsm-context strong { color: var(--ink); }