/* ==========================================================================
   workfromanywhere.co — city guides (v1.1.0)
   Drop at: /wp-content/themes/wfa-theme/assets/css/wfa-city.css

   Loaded AFTER wfa-service.css and alongside it, never instead of it.
   The shared furniture — .wfa-svc-head, .wfa-svc-eyebrow, .wfa-svc-btn,
   .wfa-svc-band, the coworking space cards, .wfa-prose — comes from
   there, so a city page and a product page are recognisably the same
   site. This file is only the parts a city page has.

   Laid out after Outsite's location pages: photograph first, then key
   points somebody can take in without reading, prose only where prose
   is the right tool. v1.0 of this page was a stack of paragraphs.

   Everything is scoped under .wfa-city and uses the same --svc-*
   tokens, so it follows the site palette and dark mode automatically.
   ========================================================================== */

.wfa-city {
	--city-gap:  1.25rem;
	--city-pic:  4 / 3;
	--city-wide: 16 / 9;
}

.wfa-city-icon {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--svc-ink-3);
}


/* --------------------------------------------------------------------------
   Hero

   The picture is the page's face, so it runs the full width of the
   content column with the name and tags sitting on it. Without a
   featured image the same block falls back to type on paper, which is
   why the scrim and the text colours are set on the --image modifier
   rather than on the block itself.
   -------------------------------------------------------------------------- */

.wfa-city-hero {
	position: relative;
	margin: 0 0 var(--city-gap);
}

.wfa-city-hero--image {
	display: grid;
	/* A height, not a min-height: the photograph is cropped to this
	   rather than being allowed to set it. A wide original ran nearly
	   a thousand pixels tall and pushed everything below the fold. */
	height: clamp(320px, 42vw, 520px);
	isolation: isolate;
}

.wfa-city-hero--image > * {
	grid-area: 1 / 1;
}

.wfa-city-hero__media {
	overflow: hidden;
}

.wfa-city-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The scrim. Dark enough at the foot to hold white type at any
   contrast, clear at the top so the photograph is still a photograph. */
.wfa-city-hero--image .wfa-city-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 12, 14, 0.78) 0%, rgba(10, 12, 14, 0.45) 38%, rgba(10, 12, 14, 0.06) 72%, rgba(10, 12, 14, 0) 100%);
}

.wfa-city-hero__text {
	position: relative;
	z-index: 1;
	align-self: end;
	max-width: var(--svc-measure);
	padding: 2rem;
}

.wfa-city-hero--plain .wfa-city-hero__text {
	padding: 0;
}

.wfa-city-hero__kicker {
	margin: 0 0 0.75rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--svc-ink-3);
}

.wfa-city-hero__title {
	margin: 0;
	font-family: var(--svc-display, Georgia, serif);
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
	line-height: 1.02;
	letter-spacing: -0.024em;
	font-weight: 600;
	color: var(--svc-ink);
}

.wfa-city-hero--image .wfa-city-hero__kicker,
.wfa-city-hero--image .wfa-city-hero__title {
	color: #ffffff;
}

.wfa-city-hero--image .wfa-city-hero__kicker a {
	color: #ffffff;
	border-bottom-color: rgba(255, 255, 255, 0.45);
}

/* The tags. Two to four, three or four words each — the whole point is
   that somebody knows what this place is before reading a sentence. */
.wfa-city-hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.wfa-city-hero__tags li {
	margin: 0;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--svc-line);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--svc-ink-2);
}

.wfa-city-hero--image .wfa-city-hero__tags li {
	border-color: rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	backdrop-filter: blur(4px);
}

/* The breadcrumb link, styled here rather than left to the theme,
   whose default link colour has no business on this page. */
.wfa-city .wfa-city-hero__kicker a,
.wfa-city .wfa-svc-eyebrow a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--svc-line);
}

.wfa-city .wfa-city-hero__kicker a:hover,
.wfa-city .wfa-svc-eyebrow a:hover {
	color: var(--svc-accent);
	border-bottom-color: currentColor;
}


/* --------------------------------------------------------------------------
   The photograph strip

   Four across, the fourth carrying the count of whatever else there is.
   Fewer than four still fills the row, because auto-fit collapses the
   empty tracks rather than leaving gaps.
   -------------------------------------------------------------------------- */

.wfa-city-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0.5rem;
	margin: 0;
}

.wfa-city-strip__item {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: var(--city-pic);
	background: var(--svc-paper-2);
}

.wfa-city-strip__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.wfa-city-strip__item:hover img {
	transform: scale(1.03);
}

.wfa-city-strip__more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10, 12, 14, 0.55);
	color: #ffffff;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}


/* --------------------------------------------------------------------------
   Standfirst and the three cost tiles

   The tiles are the first three cost lines. Whoever writes the city
   decides which three by putting them at the top of that field, and
   the edit screen says so.
   -------------------------------------------------------------------------- */

.wfa-city-lede__cols {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.wfa-city-lede__standfirst {
	margin: 0 0 1.25rem;
	font-size: clamp(1.125rem, 1rem + 0.55vw, 1.4375rem);
	line-height: 1.5;
	color: var(--svc-ink);
}

.wfa-city-lede__updated {
	margin: 1.25rem 0 0;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--svc-ink-3);
}

.wfa-city-tiles {
	display: grid;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--svc-line);
	border: 1px solid var(--svc-line);
}

.wfa-city-tile {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0;
	padding: 1.25rem 1.5rem;
	background: var(--svc-paper);
}

.wfa-city-tile__value {
	font-family: var(--svc-display, Georgia, serif);
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
	line-height: 1.1;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--svc-ink);
}

.wfa-city-tile__label {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--svc-ink-3);
}


/* --------------------------------------------------------------------------
   The facts strip, with an icon each
   -------------------------------------------------------------------------- */

.wfa-city-facts {
	padding: 1.75rem;
	background: var(--svc-paper-2);
	border: 1px solid var(--svc-line);
}

.wfa-city-facts__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
	gap: 1.5rem var(--city-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wfa-city-fact {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 0.15rem 0.6rem;
	margin: 0;
}

.wfa-city-fact .wfa-city-icon {
	grid-row: 1 / 3;
	margin-top: 1px;
}

.wfa-city-fact__label,
.wfa-city-suits__label,
.wfa-city-note__label,
.wfa-city-hood__but-label {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--svc-ink-3);
}

.wfa-city-fact__value {
	font-size: 1.0625rem;
	line-height: 1.3;
	font-weight: 600;
	color: var(--svc-ink);
}

.wfa-city-fact__note {
	grid-column: 2;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--svc-ink-2);
}

.wfa-city-facts__english {
	max-width: 68ch;
	margin: 1.75rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--svc-line);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--svc-ink-2);
}

.wfa-city-facts__english .wfa-city-fact__label {
	display: block;
	margin: 0 0 0.35rem;
}

.wfa-city-facts__link {
	margin: 1rem 0 0;
	font-size: 0.875rem;
}

.wfa-city-facts__link a,
.wfa-city-more a {
	color: var(--svc-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--svc-line);
	padding-bottom: 2px;
}

.wfa-city-facts__link a:hover,
.wfa-city-more a:hover {
	color: var(--svc-accent);
	border-bottom-color: currentColor;
}


/* --------------------------------------------------------------------------
   Who it suits, and who it does not

   Two columns of equal weight. The second one is what makes the first
   believable, so it is not a footnote.
   -------------------------------------------------------------------------- */

.wfa-city-suits__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
}

.wfa-city-suits__col {
	padding: 1.5rem;
	background: var(--svc-paper-2);
	border-top: 2px solid var(--svc-ink);
}

.wfa-city-suits__col--not {
	border-top-color: var(--svc-line);
}

.wfa-city-suits__label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
}


/* --------------------------------------------------------------------------
   The two tables
   -------------------------------------------------------------------------- */

.wfa-city-table-wrap {
	max-width: 56rem;
	overflow-x: auto;
}

.wfa-city-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.wfa-city-table th,
.wfa-city-table td {
	padding: 0.9rem 1rem 0.9rem 0;
	text-align: left;
	vertical-align: top;
	line-height: 1.5;
	border-bottom: 1px solid var(--svc-line);
}

.wfa-city-table tbody tr:last-child th,
.wfa-city-table tbody tr:last-child td {
	border-bottom: 0;
}

.wfa-city-table th {
	width: 34%;
	font-weight: 600;
	color: var(--svc-ink);
}

.wfa-city-table td {
	color: var(--svc-ink-2);
}

.wfa-city-table__figure {
	width: 26%;
	font-weight: 600;
	color: var(--svc-ink);
	white-space: nowrap;
}

.wfa-city-table__note {
	font-size: 0.875rem;
}

.wfa-city-table--visa th {
	width: 32%;
}


/* --------------------------------------------------------------------------
   The visa

   The first line is the number people came for, so it gets a panel of
   its own and the caveat sits alongside rather than underneath, where
   it would be read after the decision instead of before it.
   -------------------------------------------------------------------------- */

.wfa-city-visa__cols {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.wfa-city-visa__lead {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 0.3rem 0.75rem;
	margin: 0 0 1.5rem;
	padding: 1.5rem;
	background: var(--svc-paper-2);
	border-left: 3px solid var(--svc-ink);
}

.wfa-city-visa__lead .wfa-city-icon {
	grid-row: 1 / 3;
	margin-top: 2px;
}

.wfa-city-visa__lead-label {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--svc-ink-3);
}

.wfa-city-visa__lead-value {
	grid-column: 2;
	font-family: var(--svc-display, Georgia, serif);
	font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
	line-height: 1.25;
	font-weight: 600;
	color: var(--svc-ink);
}

.wfa-city-note {
	padding: 1.5rem;
	border: 1px solid var(--svc-line);
}

.wfa-city-note__label {
	margin: 0 0 0.6rem;
}

.wfa-city-note .wfa-prose {
	font-size: 0.9375rem;
}


/* --------------------------------------------------------------------------
   Neighbourhoods, as photograph-and-text rows

   Alternating sides down the page, which is the Outsite pattern and
   the reason the section reads as a tour rather than a list. A row
   with no photograph falls back to a plain card, so a city can be
   published before its pictures are.
   -------------------------------------------------------------------------- */

.wfa-city-hoods__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wfa-city-hood {
	margin: 0 0 var(--city-gap);
}

.wfa-city-hood:last-child {
	margin-bottom: 0;
}

.wfa-city-hood--pic {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

/* Every second one flips, so the eye zig-zags rather than scanning a
   column of identical rows. */
.wfa-city-hood--pic:nth-child(even) .wfa-city-hood__media {
	order: 2;
}

.wfa-city-hood__media {
	overflow: hidden;
	/* Wide rather than 4:3. Beside two or three lines of text a tall
	   picture leaves a column of empty paper next to the words. */
	aspect-ratio: var(--city-wide);
	background: var(--svc-paper-2);
}

.wfa-city-hood__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wfa-city-hood--flat .wfa-city-hood__body {
	padding: 1.5rem;
	background: var(--svc-paper-2);
	border: 1px solid var(--svc-line);
}

.wfa-city-hood__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin: 0 0 0.75rem;
}

.wfa-city-hood__name {
	margin: 0;
	font-family: var(--svc-display, Georgia, serif);
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	line-height: 1.2;
	font-weight: 600;
	color: var(--svc-ink);
}

.wfa-city-hood__rent {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--svc-ink-2);
	white-space: nowrap;
}

.wfa-city-hood__why {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--svc-ink-2);
}

/* The downside. Set apart so it cannot be skimmed past, which is the
   entire reason it is on the page. */
.wfa-city-hood__but {
	margin: 1.25rem 0 0;
	padding: 0.9rem 0 0;
	border-top: 1px solid var(--svc-line);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--svc-ink-2);
}

.wfa-city-hood__but-label {
	display: block;
	margin: 0 0 0.25rem;
}


/* --------------------------------------------------------------------------
   The year strip

   Twelve chips instead of four paragraphs about weather. This is the
   block that earns the section, so it is the one with the most colour
   on the page — and the colour is the only saturated thing here, which
   is why it reads as information rather than decoration.
   -------------------------------------------------------------------------- */

.wfa-city-year__strip {
	display: grid;
	/* Six and six. Twelve across is too narrow for the notes, and
	   auto-fit orphaned December on a row of its own. Two rows also
	   read as first half of the year and second, which is how people
	   think about it. */
	grid-template-columns: repeat(6, 1fr);
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wfa-city-month {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0;
	padding: 0.85rem 0.75rem;
	border: 1px solid var(--svc-line);
	background: var(--svc-paper);
}

.wfa-city-month__name {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--svc-ink);
}

.wfa-city-month__note {
	font-size: 0.75rem;
	line-height: 1.35;
	color: var(--svc-ink-2);
}

.wfa-city-month--best {
	background: var(--svc-ink);
	border-color: var(--svc-ink);
}

.wfa-city-month--best .wfa-city-month__name {
	color: var(--svc-paper);
}

.wfa-city-month--best .wfa-city-month__note {
	color: rgba(255, 255, 255, 0.72);
}

.wfa-city-month--avoid {
	background: var(--svc-paper-2);
	border-style: dashed;
}

.wfa-city-month--avoid .wfa-city-month__name {
	color: var(--svc-ink-3);
}

/* The key. Same three treatments at chip size, so nobody has to guess
   what the dark ones and the dashed ones mean. */
.wfa-city-year__key {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 1rem 0 0;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--svc-ink-3);
}

.wfa-city-key {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.wfa-city-key::before {
	content: "";
	width: 14px;
	height: 14px;
	border: 1px solid var(--svc-line);
}

.wfa-city-key--best::before {
	background: var(--svc-ink);
	border-color: var(--svc-ink);
}

.wfa-city-key--avoid::before {
	background: var(--svc-paper-2);
	border-style: dashed;
}

.wfa-city-year__note {
	max-width: var(--svc-measure);
	margin: 2rem 0 0;
}


/* --------------------------------------------------------------------------
   The internet — one big figure and two sentences
   -------------------------------------------------------------------------- */

.wfa-city-wifi__cols {
	display: grid;
	grid-template-columns: minmax(200px, 0.55fr) minmax(0, 1.45fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
}

.wfa-city-wifi__figure {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 1.75rem;
	background: var(--svc-paper-2);
	border: 1px solid var(--svc-line);
}

.wfa-city-wifi__value {
	font-family: var(--svc-display, Georgia, serif);
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	line-height: 1.05;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--svc-ink);
}

.wfa-city-wifi__label {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--svc-ink-3);
}

.wfa-city-wifi__text .wfa-svc-head__title {
	margin: 0 0 1rem;
}


/* --------------------------------------------------------------------------
   The jobs list

   Deliberately quieter than the cards on the board. This is a pointer
   to the board, not a second board.
   -------------------------------------------------------------------------- */

.wfa-city-jobs__note {
	max-width: 60ch;
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--svc-ink-3);
}

.wfa-city-joblist {
	max-width: 56rem;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--svc-line);
}

.wfa-city-job {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 1rem 0;
	border-bottom: 1px solid var(--svc-line);
}

.wfa-city-job__link {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	text-decoration: none;
	color: inherit;
}

.wfa-city-job__title {
	font-size: 1.0625rem;
	line-height: 1.35;
	font-weight: 600;
	color: var(--svc-ink);
}

.wfa-city-job__link:hover .wfa-city-job__title {
	color: var(--svc-accent);
}

.wfa-city-job__company {
	font-size: 0.875rem;
	color: var(--svc-ink-3);
}

.wfa-city-job__salary {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--svc-ink-2);
	white-space: nowrap;
}

.wfa-city-more {
	margin: 1.5rem 0 0;
	font-size: 0.9375rem;
}


/* --------------------------------------------------------------------------
   Food and activities — one card, used twice
   -------------------------------------------------------------------------- */

.wfa-city-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: var(--city-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wfa-city-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	background: var(--svc-paper-2);
	border: 1px solid var(--svc-line);
}

.wfa-city-card__media {
	overflow: hidden;
	aspect-ratio: var(--city-wide);
	background: var(--svc-line);
}

.wfa-city-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.wfa-city-card:hover .wfa-city-card__media img {
	transform: scale(1.03);
}

.wfa-city-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.25rem;
}

.wfa-city-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.4rem 0.75rem;
	margin: 0 0 0.5rem;
}

.wfa-city-card__name {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.3;
	font-weight: 600;
	color: var(--svc-ink);
}

.wfa-city-card__price {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--svc-ink-2);
	white-space: nowrap;
}

.wfa-city-card__why {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--svc-ink-2);
}

.wfa-city-card__book {
	margin: auto 0 0;
	padding-top: 1rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wfa-city-card__book a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--svc-accent);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.wfa-city-card__book a:hover {
	color: var(--svc-ink);
}

.wfa-city-card__book .wfa-city-icon {
	width: 16px;
	height: 16px;
	color: currentColor;
}

.wfa-city-doing .wfa-disclosure {
	max-width: var(--svc-measure);
	margin-top: 2rem;
}


/* --------------------------------------------------------------------------
   Things the other guides leave out

   A grid of short notes rather than a table: each one is a separate
   fact somebody might photograph, not a row to compare against others.
   -------------------------------------------------------------------------- */

.wfa-city-notes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem var(--city-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wfa-city-notes__item {
	margin: 0;
	padding: 1.25rem 0 0;
	border-top: 2px solid var(--svc-ink);
}

.wfa-city-notes__label {
	margin: 0 0 0.4rem;
	font-size: 0.9375rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--svc-ink);
}

.wfa-city-notes__detail {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--svc-ink-2);
}


/* --------------------------------------------------------------------------
   The closing band and the footer line
   -------------------------------------------------------------------------- */

/* The band carries a bottom margin but no top one, which is fine on a
   service page because the section above it is a .wfa-svc-block with
   its own padding. Here the section above can be a panel in the band's
   own background colour, so without this the two merge into one slab.
   Scoped to .wfa-city; the service pages are untouched. */
.wfa-city .wfa-svc-band {
	margin-top: var(--svc-block, 4rem);
	margin-bottom: 2.5rem;
}

.wfa-city-foot {
	max-width: var(--svc-measure);
	margin: 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--svc-line);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--svc-ink-3);
}


/* --------------------------------------------------------------------------
   Tablets
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {

	.wfa-city-lede__cols,
	.wfa-city-visa__cols,
	.wfa-city-wifi__cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.wfa-city-tiles {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}

	/* A photograph and a paragraph side by side stop working well
	   before the phone breakpoint, so they stack here. */
	.wfa-city-hood--pic {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
	}

	.wfa-city-hood--pic:nth-child(even) .wfa-city-hood__media {
		order: 0;
	}

	.wfa-city-year__strip {
		grid-template-columns: repeat(4, 1fr);
	}

	.wfa-city-hood {
		margin-bottom: 2.5rem;
	}
}


/* --------------------------------------------------------------------------
   Phones
   -------------------------------------------------------------------------- */

@media (max-width: 599px) {

	.wfa-city-hero--image {
		min-height: 300px;
	}

	.wfa-city-hero__text {
		padding: 1.25rem;
	}

	.wfa-city-strip {
		grid-template-columns: repeat(2, 1fr);
	}

	.wfa-city-facts {
		padding: 1.25rem;
	}

	.wfa-city-facts__list {
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
		gap: 1.25rem 1rem;
	}

	.wfa-city-suits__col {
		padding: 1.25rem;
	}

	/* Six across a 390px screen would be fifty pixels wide, so the
	   strip becomes three columns of four. */
	.wfa-city-year__strip {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Three columns of table on a 390px screen is unreadable, so the
	   cost rows stack: label, then figure, then note. */
	.wfa-city-table,
	.wfa-city-table tbody,
	.wfa-city-table tr,
	.wfa-city-table th,
	.wfa-city-table td {
		display: block;
		width: auto;
	}

	.wfa-city-table tr {
		padding: 0.9rem 0;
		border-bottom: 1px solid var(--svc-line);
	}

	.wfa-city-table tbody tr:last-child {
		border-bottom: 0;
	}

	.wfa-city-table th,
	.wfa-city-table td {
		padding: 0;
		border-bottom: 0;
	}

	.wfa-city-table th {
		font-size: 0.7rem;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--svc-ink-3);
		margin-bottom: 0.3rem;
	}

	.wfa-city-table__figure {
		white-space: normal;
		font-size: 1rem;
	}

	.wfa-city-table__note:empty {
		display: none;
	}

	.wfa-city-table__note {
		margin-top: 0.2rem;
	}

	.wfa-city-job {
		flex-direction: column;
		align-items: flex-start;
	}
}