/* LoudMemories - the city index (/cities). Page-only rules; the design
   system and chrome live in core/css/lm-base.css. Same hero shape as the
   artist index and the charts, so the three index pages read as one. */

:root { --h1: 2.375rem; }
@media (min-width: 480px)  { :root { --h1: 3rem; } }
@media (min-width: 768px)  { :root { --h1: 4rem; } }
@media (min-width: 1024px) { :root { --h1: 5rem; } }

/* ------------------------------------------------------------ the hero */

.ci-title {
	margin: 0;
	font-family: var(--lm-sans);
	font-size: var(--h1);
	font-weight: 700;
	line-height: .92;
	letter-spacing: -.01em;
	text-transform: uppercase;
}
.ci-lead {
	margin: 16px 0 0;
	max-width: 36rem;
	font-size: clamp(0.9375rem, 3.2vw, 1.0625rem);
	line-height: 1.6;
	color: var(--lm-muted);
}

/* One chip per country, jumping down the page. Seventy-odd of them, so
   they are the small mono chip and not the charts' period buttons. */
.ci-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: clamp(1.5rem, 4vw, 2.25rem) 0 0; }
.ci-jump a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 2rem;
	padding: 0 10px;
	font-family: var(--lm-mono);
	font-size: 0.6875rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	border-radius: 2px;
	border: 1px solid var(--lm-line-strong);
	color: var(--lm-muted);
	transition: border-color .16s, color .16s;
}
.ci-jump a:hover { border-color: var(--lm-green-lt); color: var(--lm-green-lt); }
.ci-jump .fi { font-size: 0.75rem; border-radius: 1px; }
/* The chips past LM_CITIES_JUMP, until the reveal - see .lm-rows > li.is-more
   in lm-base.css for the pattern; the display named here has to be the one
   the chip is drawn with. */
.ci-jump > a.is-more { display: none; }
.ci-jump.is-open > a.is-more { display: inline-flex; }
.ci-jump-more { margin: 12px 0 0; }

/* --------------------------------------------------------- a country */

/* Everything is on one page by design (one guide per town, nothing hidden
   behind a filter), which is 11,000 elements and 1.3s of style and layout
   on a phone before anything paints. content-visibility lets the browser
   skip the blocks below the fold until they scroll near; the fragment
   links in the jump list still land, navigation activates the target. The
   intrinsic size is only a placeholder height for the scrollbar until a
   block has been rendered once. */
.ci-country { content-visibility: auto; contain-intrinsic-size: auto 420px; }

.ci-country .lm-sechead h2 .fi { font-size: 0.7em; margin-right: 8px; vertical-align: -0.05em; border-radius: 2px; }

.ci-cities {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.ci-cities a {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	min-height: 2.5rem;
	padding: 8px 12px;
	border: 1px solid var(--lm-line);
	border-radius: 3px;
	color: inherit;
	font-size: 0.9375rem;
	line-height: 1.3;
	transition: border-color .16s, color .16s;
}
.ci-cities a:hover { border-color: var(--lm-green-lt); color: var(--lm-green-lt); }
.ci-cities b { font-family: var(--lm-mono); font-size: 0.6875rem; font-weight: 400; letter-spacing: .05em; color: var(--lm-muted); }