@layer framework,
components,
layout;

@import url('https://cdn.jsdelivr.net/npm/open-props@1.7.16/open-props.min.css') layer(framework.open-props);
@import url('https://cdn.jsdelivr.net/npm/open-props@1.7.16/gray-hsl.min.css') layer(framework.open-props);
@import url('https://cdn.jsdelivr.net/npm/open-props@1.7.16/borders.min.css') layer(framework.open-props);
@import url('https://cdn.jsdelivr.net/npm/open-props@1.7.16/normalize.light.min.css') layer(framework.open-props);
@import url('https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css') layer(components.leaflet);
@import url('https://cdn.jsdelivr.net/npm/unpoly@3.7.3/unpoly.min.css') layer(components.unpoly);
@import url('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css') layer(components.swiper);
@import url('https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,300;0,400;0,600;0,700;0,900;1,300&display=swap') layer(layout);

/* Control layer order based on screen size */
@media (min-width: 768px) {
	@layer mobile, desktop;
	/* On desktop, mobile comes first, then desktop overrides */
}

@media (max-width: 767px) {
	@layer desktop, mobile;
	/* On mobile, desktop comes first, then mobile overrides */
}

/* --------------------------------------------------------------------------
 * Tokens — brand on top of Open Props (see .claude/docs/travellog2.md)
 * -------------------------------------------------------------------------- */

:root {
	--color-ink: #14171a;
	--color-text: #2b3238;
	--color-muted: #5b6570;
	--color-faint: #8b949c;
	--color-line: #dfe3e6;
	--color-line-strong: #14171a;
	--color-surface: #f6f7f8;
	--color-surface-2: #eef1f3;
	--color-accent: #0f6e8c;

	--font-display: 'Overpass', var(--font-sans);
	--font-meta: var(--font-mono);
}

/**
 * Reset some stuff from open props that interferes with kint
 */
.kint-rich * {
	font-size: unset;
	max-inline-size: unset;
}

:where(svg:not([fill])) {
	fill: currentColor;
}


/* --------------------------------------------------------------------------
 * Base / typography
 * -------------------------------------------------------------------------- */

html {
	/* JS (travelLogMap) sets --places-scroll-chrome to sticky/fixed top chrome height */
	scroll-padding-top: var(--places-scroll-chrome, 6rem);
	scroll-behavior: smooth;
}

body {
	background: var(--color-surface);
	color: var(--color-text);
	font-family: var(--font-display);
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--color-ink);
	text-decoration: none;
}

a:hover {
	color: var(--color-accent);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	max-inline-size: unset;
	font-family: var(--font-display);
	color: var(--color-ink);
	font-weight: var(--font-weight-7);
}

h1 {
	font-size: clamp(var(--font-size-4), 6cqw, var(--font-size-5));
	font-weight: var(--font-weight-9);
	letter-spacing: -0.025em;
	line-height: 1;
}

h2 {
	font-size: clamp(var(--font-size-3), 4cqw, var(--font-size-4));
	color: var(--color-muted);
	font-weight: var(--font-weight-3);
	line-height: 1.35;
}

h3 {
	font-size: var(--font-size-3);
	font-weight: var(--font-weight-7);
	color: var(--color-ink);
	letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
 * Type roles — reusable, layout-free
 * -------------------------------------------------------------------------- */

.text-display {
	font-family: var(--font-display);
	font-weight: var(--font-weight-9);
	text-transform: uppercase;
	letter-spacing: -0.025em;
	line-height: 1;
	color: var(--color-ink);
}

.text-kicker {
	font-family: var(--font-meta);
	font-size: var(--font-size-0);
	font-weight: var(--font-weight-6);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.text-lede {
	font-family: var(--font-display);
	font-weight: var(--font-weight-3);
	font-size: clamp(var(--font-size-2), 2.2vw, var(--font-size-3));
	line-height: 1.35;
	color: var(--color-muted);
	max-inline-size: 46ch;
}

.text-meta {
	font-family: var(--font-meta);
	font-size: var(--font-size-0);
	font-weight: var(--font-weight-4);
	letter-spacing: 0.04em;
	color: var(--color-faint);
}

iframe {
	max-width: 100%;
}

.hero {
	position: relative;
	z-index: 5;
}


@layer layout {

	/* Flow utilities for consistent spacing */
	.flow>*+* {
		margin-block-start: var(--space-flow, 1em);
	}

	.flow-tight {
		--space-flow: 0.5em;
	}

	.flow-loose {
		--space-flow: 1.5em;
	}

	.flow-relaxed {
		--space-flow: 2em;
	}
}






iconify-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
}

/* --------------------------------------------------------------------------
 * Page layout (shell — do not reshape without an explicit shell task)
 * Brand sits on the media panel; content page-bar comes later.
 * -------------------------------------------------------------------------- */

.page-header {
	position: absolute;
	inset: 0;
	z-index: 600;
	pointer-events: none;
}

.brand {
	pointer-events: auto;
	position: absolute;
	top: var(--size-5);
	left: var(--size-5);
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 12px;
	background: var(--color-ink);
	color: var(--color-surface);
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: var(--font-weight-9);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;

	&:hover {
		color: var(--color-surface);
		background: var(--color-accent);
	}

	svg {
		height: 22px;
		width: auto;
		display: block;
		fill: currentColor;
		flex-shrink: 0;
	}

	span {
		padding-top: 2px;
	}
}

.page-grid {
	padding: 0;
}

.main {
	display: grid;
	align-content: start;
	height: fit-content;
	container-type: inline-size;
	background: var(--color-surface);
	/* clear the fixed hero on narrow viewports */
	padding-block-start: calc(40vh + 0.5rem);
	/* JS (travelLogMap) tops this up so the last place can still scroll to the
	   top of the reading band and take the map with it */
	padding-block-end: var(--places-tail-space, 0px);
}

.main-body {
	--main-pad-inline: var(--size-5);
	--main-pad-block: var(--size-5);
	display: grid;
	gap: var(--size-5);
	min-width: 0;
	padding: var(--main-pad-block) var(--main-pad-inline) var(--size-10);
}

@media (min-width: 768px) {
	.main {
		position: relative;
		padding-block-start: 0;
	}

	.main-body {
		--main-pad-inline: var(--size-8);
		--main-pad-block: var(--size-8);
	}
}

.index .main-body {
	/* filter strip + list are one flush stack; space Friends via .links */
	gap: 0;
}

/* --------------------------------------------------------------------------
 * Page bar — sticky chrome in the content column
 * -------------------------------------------------------------------------- */

.page-bar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px var(--size-4);
	min-height: 56px;
	padding: 10px var(--size-5);
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-line-strong);
}

@media (min-width: 768px) {
	.page-bar {
		padding-inline: var(--size-8);
		flex-wrap: nowrap;
	}
}

.page-bar-title {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: var(--font-weight-7);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-ink);
	text-decoration: none;
	line-height: 1;

	&:hover {
		color: var(--color-accent);
	}
}

a.page-bar-title {
	letter-spacing: 0.16em;
	font-size: 12px;
}

.page-bar-end {
	display: flex;
	align-items: center;
	gap: var(--size-4);
	flex-shrink: 0;
	margin-inline-start: auto;
}

.page-bar-meta {
	text-align: right;
}

.view-switch {
	display: flex;
	gap: 1px;
	background: #c9d1d6;
	border: 1px solid #c9d1d6;
}

.view-switch-btn {
	appearance: none;
	border: none;
	margin: 0;
	cursor: pointer;
	font-family: var(--font-meta);
	font-size: 10px;
	font-weight: var(--font-weight-6);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
	padding: 9px 10px 8px;
	background: var(--color-surface);
	color: var(--color-muted);

	&.is-active {
		background: var(--color-ink);
		color: var(--color-surface);
	}

	&:hover:not(.is-active) {
		color: var(--color-accent);
	}
}

[x-cloak] {
	display: none !important;
}

.header-container {
	position: fixed;
	height: 40vh;
	left: 0;
	bottom: 0;
	right: 0;
	top: 0;
	background: var(--gray-7);
	z-index: var(--z-index-1);

	@media (min-width: 768px) {
		position: sticky;
		height: 100vh;

		&::before {
			background: linear-gradient(90deg, hsl(var(--gray-0-hsl) / 0) 70%, hsl(var(--gray-0-hsl) / 20%) 100%);
			pointer-events: none;
		}
	}

	&::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		background: linear-gradient(90deg, hsl(var(--gray-0-hsl) / 0) 70%, hsl(var(--gray-0-hsl) / 20%) 100%);
		pointer-events: none;

		z-index: 2;
	}

	/* cover image */
	.cover {
		width: 100%;
		height: 100%;
	}

}

.header-container {
	&::before {
		background: radial-gradient(circle, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.2) 100%);
	}
}

.links {
	margin-block-start: var(--size-8);
	margin-inline-start: var(--size-5);
}

.links ol,
.links ul {
	list-style: none;
	padding-inline-start: 0;
	margin-inline-start: 0;

	&>li {
		margin-block-start: var(--size-3);
		padding-inline-start: 0;
	}
}

/* --------------------------------------------------------------------------
 * Detail — content column
 * -------------------------------------------------------------------------- */

.place-detail {
	display: grid;
	gap: var(--size-7);
	align-content: start;
}

.place-header {
	display: grid;
	gap: 12px;
}

.place-meta {
	display: grid;
	gap: 7px;
	margin: 0;
	padding: 16px 0;
	border-block: 1px solid var(--color-line);
	font-family: var(--font-meta);
	font-size: 13px;
	line-height: 1.6;
	color: var(--color-faint);
}

.place-meta-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: baseline;
}

.place-meta-row dt {
	margin: 0;
	flex-shrink: 0;
}

.place-meta-row dd {
	margin: 0;
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 8px;
	color: var(--color-ink);
	text-align: right;
}

.place-meta-coords {
	user-select: all;
}

.place-meta-copy {
	all: unset;
	display: inline-flex;
	color: var(--color-faint);
	cursor: pointer;
}

.place-meta-copy:hover {
	color: var(--color-accent);
}

.place-about {
	display: grid;
	gap: 1em;
	font-size: 16px;
	line-height: 1.65;
	color: var(--color-text);
	/* max-inline-size: 52ch; */

	>* {
		margin: 0;
	}

	img,
	iframe {
		max-width: 100%;
		height: auto;
	}

	iframe {
		aspect-ratio: 16 / 9;
		width: 100%;
		height: auto;
		background: var(--color-surface-2);
	}

	.footnotes a {
		overflow-wrap: break-word;
		word-break: break-all;
	}
}

.credits {
	color: var(--color-faint);
	font-size: 13px;
	font-family: var(--font-meta);
	line-height: 1.6;

	a {
		color: var(--color-accent);
	}
}

.place-section {
	display: grid;
	gap: 12px;
}

.place-section-title {
	margin: 0;
	font-family: var(--font-meta);
	font-size: 11px;
	font-weight: var(--font-weight-7);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-ink);
}

.place-videos {
	gap: 16px;
}

.place-video {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--color-surface-2);
	overflow: hidden;

	iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
}

.place-note {
	display: grid;
	gap: 12px;
	padding: 20px;
	background: var(--color-surface-2);
	color: var(--color-text);
	font-size: 15px;
	line-height: 1.6;
}

.place-note-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.place-note-body {
	display: grid;
	gap: 0.9em;

	>* {
		margin: 0;
	}

	img,
	iframe {
		max-width: 100%;
	}

	iframe {
		aspect-ratio: 16 / 9;
		width: 100%;
		height: auto;
		background: var(--color-ink);
	}
}

.place-note-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 6px;
	font-family: var(--font-meta);
	font-size: 13px;

	a {
		color: var(--color-accent);
	}
}

.place-note-images {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 8px;

	img {
		width: 100%;
		height: 110px;
		object-fit: cover;
		display: block;
		background: var(--color-surface-2);
	}
}

.wiki-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.wiki-chip {
	font-family: var(--font-meta);
	font-size: 11px;
	font-weight: var(--font-weight-5);
	letter-spacing: 0.06em;
	color: var(--color-muted);
	border: 1px solid var(--color-line);
	padding: 9px 11px 8px;
	background: transparent;
	text-decoration: none;
}

a.wiki-chip:hover {
	color: var(--color-accent);
	border-color: var(--color-accent);
}

.wiki-more {
	display: contents;
}

.wiki-more>summary {
	list-style: none;
	cursor: pointer;
}

.wiki-more>summary::-webkit-details-marker {
	display: none;
}

.wiki-more[open]>summary {
	display: none;
}

.wiki-more .wiki-chips {
	display: contents;
}

.metabox {
	margin-block-start: var(--size-4);
	font-family: var(--font-meta);
	font-size: var(--font-size-0);
	color: var(--color-faint);
}

.content-gallery {
	display: flex;
	width: max-content;
	flex-wrap: nowrap;
	gap: var(--size-2);

	img {
		height: 350px;
		width: auto;
	}
}

.content-gallery-wrapper {
	overflow-x: auto;
	border-radius: var(--radius-4);

	margin-block: var(--size-8);

	width: 100%;

	/* scroll-snap-type: x mandatory;
	scroll-behavior: smooth; */

	user-select: none !important;

	cursor: grab;

	&.active {
		cursor: grabbing;
	}

	img {
		-webkit-user-drag: none;
		display: block;
		background: var(--gray-2);
	}
}

.story {
	xscroll-snap-align: center;
}

.minimap {
	width: 100px;
	position: absolute;
	right: 20px;
	bottom: 20px;

	display: flex;
	z-index: 6;

	border: var(--border-size-2) solid white;
	border-radius: var(--radius-2);
	box-shadow: var(--shadow-5);
	overflow: hidden;
	aspect-ratio: 4/3;
	background-color: var(--gray-2);

	@media (min-width: 768px) {
		width: 200px;
	}

	img {
		width: 100%;
		height: auto;
	}

	.image-stack {
		position: relative;
		display: inline-block;
		transform: scale(1.4);
	}

	.image-stack img {
		display: block;
		max-width: 100%;
		height: auto;
	}

	.image-stack .top-image {
		position: absolute;
		top: 0;
		left: 0;
		transition: opacity 0.3s ease-in-out;
	}

	.image-stack:hover .top-image {
		opacity: 0;
	}

}

@media (min-width: 768px) {

	:root {
		--layout-grid-column-end: 38vw;
	}

	.page.page-grid {

		display: grid;
		-ms-grid-columns: 1fr var(--layout-grid-column-end, 38vw);
		grid-template-columns: 1fr var(--layout-grid-column-end, 38vw);
	}

	[data-observer-intercept] {
		position: absolute;
		top: 40px;
	}

}

/**
 * Map
 */

.map {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
	z-index: -1;
}

body:not(.index) .map {
	visibility: hidden;
}

.map.active {
	z-index: 1;
	visibility: visible !important;
}

/* Custom divIcons — SVG carries fill; kill Leaflet's default white box */
.leaflet-data-marker {
	background: transparent;
	border: none;
}

/* Compact basemap switcher (detail + listing) — mirrors .view-switch */
.map-basemap-control {
	display: flex;
	gap: 1px;
	background: #c9d1d6;
	border: 1px solid #c9d1d6;
	box-shadow: var(--shadow-2);
	margin: 0 0 12px 12px !important;

	@media (max-width: 767px) {
		margin: 0 0 8px 8px !important;
	}
}

.map-basemap-btn {
	appearance: none;
	border: none;
	margin: 0;
	cursor: pointer;
	font-family: var(--font-meta);
	font-size: 10px;
	font-weight: var(--font-weight-6);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
	padding: 9px 10px 8px;
	background: var(--color-surface);
	color: var(--color-muted);

	&.is-active {
		background: var(--color-ink);
		color: var(--color-surface);
	}

	&:hover:not(.is-active) {
		color: var(--color-accent);
	}

	@media (max-width: 767px) {
		font-size: 9px;
		letter-spacing: 0.05em;
		padding: 7px 6px 6px;
	}
}


/**
 * Swiper — cover gallery + filmstrip chrome
 */
@layer components {
	.cover-swiper {
		--swiper-theme-color: var(--gray-0);
		--swiper-navigation-size: 28px;

		width: 100%;
		height: 100%;
		position: absolute;
		inset: 0;
		z-index: 0;
	}

	@layer mobile {
		.cover-swiper {
			--swiper-navigation-size: 22px;
		}
	}

	.cover-swiper .swiper-slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.cover-contain .cover-swiper .swiper-slide img {
		object-fit: contain;
	}

	.cover-chrome {
		--cover-thumb-w: 56px;
		--cover-thumb-h: 42px;
		--cover-thumbs-n: 2;
		--cover-chrome-max: calc(100% - 120px);

		position: absolute;
		left: 16px;
		bottom: 16px;
		z-index: 6;
		display: flex;
		align-items: flex-end;
		gap: 8px;
		flex-wrap: nowrap;
		max-width: var(--cover-chrome-max);
		pointer-events: none;

		>* {
			pointer-events: auto;
		}
	}

	@media (min-width: 768px) {
		.cover-chrome {
			--cover-thumb-w: 72px;
			--cover-thumb-h: 54px;
			--cover-thumbs-n: 3;
			--cover-chrome-max: calc(100% - 240px);
			left: 24px;
			bottom: 24px;
		}
	}

	.cover-fraction.swiper-pagination {
		position: static;
		width: auto;
		display: inline-flex;
		align-items: center;
		font-family: var(--font-meta);
		font-size: 11px;
		font-weight: var(--font-weight-5);
		letter-spacing: 0.12em;
		color: var(--color-ink);
		background: var(--color-surface);
		padding: 9px 11px 8px;
		line-height: 1;
	}

	.cover-thumbs {
		width: calc(var(--cover-thumb-w) * var(--cover-thumbs-n) + 8px * (var(--cover-thumbs-n) - 1));
		height: var(--cover-thumb-h);
		margin: 0;
		overflow: hidden;
	}

	.cover-thumbs .swiper-slide {
		width: var(--cover-thumb-w);
		height: var(--cover-thumb-h);
		opacity: 0.8;
		cursor: pointer;
	}

	.cover-thumbs .swiper-slide-thumb-active {
		opacity: 1;
		outline: 2px solid var(--color-surface);
		outline-offset: -2px;
	}

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

	.cover-more {
		all: unset;
		font-family: var(--font-meta);
		font-size: 11px;
		font-weight: var(--font-weight-5);
		letter-spacing: 0.12em;
		color: var(--color-surface);
		text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
		padding-bottom: 4px;
		cursor: pointer;
	}

	.cover-more:hover {
		color: #fff;
	}

	.swiper-slide img {
		object-fit: cover;
	}

	.cover-contain .swiper-slide img {
		object-fit: contain;
	}
}


/* --------------------------------------------------------------------------
 * Components — index log/photos, embeds / pagination
 * -------------------------------------------------------------------------- */

.places-filter {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	min-height: 46px;
	margin-inline: calc(-1 * var(--main-pad-inline));
	margin-block-start: calc(-1 * var(--main-pad-block));
	margin-block-end: 0;
	padding: 8px var(--main-pad-inline);
	background: var(--color-surface-2);
	border-bottom: 1px solid var(--color-line);
}

.places-filter-search {
	flex: 1;
	min-width: 120px;
	font-size: 13px;
}

.places-sort {
	display: flex;
	gap: 12px;
	align-items: center;
}

.places-sort-btn {
	appearance: none;
	border: none;
	background: transparent;
	margin: 0;
	padding: 0 0 3px;
	cursor: pointer;
	font-family: var(--font-meta);
	font-size: 11px;
	font-weight: var(--font-weight-6);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--color-faint);
	border-bottom: 2px solid transparent;

	&.is-active {
		color: var(--color-accent);
		border-bottom-color: var(--color-accent);
	}

	&:hover {
		color: var(--color-accent);
	}
}

.places-views.photo {
	/* full-bleed photo cards against the content column */
	margin-inline: calc(-1 * var(--main-pad-inline));
}

.place-year {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-inline: calc(-1 * var(--main-pad-inline));
	padding: 11px var(--main-pad-inline) 10px;
	background: var(--color-surface-2);
	border-bottom: 1px solid var(--color-line);
}

.place-year-label {
	font-family: var(--font-meta);
	font-size: 12px;
	font-weight: var(--font-weight-7);
	letter-spacing: 0.16em;
	color: var(--color-ink);
}

.place-log {
	display: grid;
}

.place-row {
	display: grid;
	grid-template-columns: 52px 1fr auto;
	gap: 15px;
	align-items: center;
	padding: 11px 0;
	border-bottom: 1px solid #e7eaed;
	color: inherit;
	text-decoration: none;
	min-width: 0;
	scroll-margin-block-start: var(--places-scroll-chrome, 4rem);

	&:hover .place-row-title {
		color: var(--color-accent);
	}
}

.place-row-thumb {
	width: 52px;
	height: 52px;
	object-fit: cover;
	display: block;
	background: #e6eaec;
}

.place-row-body {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.place-row-title {
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: var(--font-weight-6);
	line-height: 1.15;
	color: var(--color-ink);
}

.place-row-lede {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: var(--font-weight-3);
	font-style: italic;
	line-height: 1.3;
	color: var(--color-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.place-row-chevron {
	font-family: var(--font-meta);
	font-size: 13px;
	color: #c9d1d6;
}

.place-photos {
	display: grid;
}

.place-photo {
	display: grid;
	border-bottom: 1px solid var(--color-line);
	scroll-margin-block-start: var(--places-scroll-chrome, 4rem);
}

/* Active list item — set by marker click or by scrolling it into the reading band */
.place-row.is-map-target,
.place-photo.is-map-target,
.component-link.is-map-target {
	background-color: color-mix(in srgb, var(--color-accent) 14%, transparent);
}

.place-photo-media {
	display: block;
	height: min(38vh, 300px);
	overflow: hidden;
	background: #e6eaec;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
}

.place-photo-body {
	display: grid;
	gap: 7px;
	padding: 13px var(--size-5) 16px;
}

@media (min-width: 768px) {
	.place-photo-body {
		padding-inline: var(--size-8);
	}
}

.place-photo-meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.place-photo-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(24px, 3.4vw, 30px);
	font-weight: var(--font-weight-9);
	letter-spacing: -0.02em;
	line-height: 1.02;
	text-transform: uppercase;
	color: var(--color-ink);

	a {
		color: inherit;
		text-decoration: none;
	}

	a:hover {
		color: var(--color-accent);
	}
}

.card-title {
	font-family: var(--font-display);
	font-weight: var(--font-weight-7);
	color: var(--color-ink);
	line-height: 1.15;
}

.card-title a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.card-title a:hover {
	color: var(--color-accent);
}

.external-content-wrapper {

	.content-intro {
		overflow: hidden;
		height: -webkit-max-content;
		height: -moz-max-content;
		height: max-content;
		max-height: 10rem;
		position: relative;

		&:after {
			content: "";
			bottom: 0;
			right: 0;
			left: 0;
			top: 30%;
			position: absolute;
			display: block;
			background: linear-gradient(180deg, hsl(var(--gray-0-hsl) / 0) 4%, hsl(var(--gray-0-hsl) / 100) 87%);
			z-index: 100;
			width: 100%;
			pointer-events: none;
		}

		.content-intro-text {
			position: relative;
			z-index: 1;
		}

	}

	.expand-link {
		background: var(--color-surface);
		padding: 0.5rem 1rem;
		border: none;
		cursor: pointer;
		z-index: 101;
		color: var(--color-faint);
		text-decoration: underline;
		font-size: 0.9rem;
		margin: 0;
		padding: 0;
		-moz-appearance: none;
		appearance: none;
		-webkit-appearance: none;

		&:hover {
			color: var(--color-accent);
		}
	}

	.content-intro-meta {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-top: 1rem;
		margin-bottom: 1.5rem;
		font-size: 0.8rem;
	}
}

.external-content-wrapper.expanded {
	.content-intro {
		max-height: none;
	}

	.content-intro:after {
		display: none;
	}
}

/**
 * Component Embed
 */

@layer components {

	.component-links {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
	}

	.component-link {
		display: flex;
		align-items: center;
		gap: 12px;
		padding-block: 9px;
		border-top: 1px solid var(--color-line);
		text-decoration: none;
		color: var(--color-ink);
		min-width: 0;
		scroll-margin-block-start: var(--places-scroll-chrome, 4rem);
	}

	.component-link:last-child {
		border-bottom: 1px solid var(--color-line);
	}

	.component-link:hover {
		color: var(--color-accent);
	}

	.component-link figure {
		flex-shrink: 0;
		width: 44px;
		height: 44px;
		margin: 0;
		overflow: hidden;
		background: var(--color-surface-2);
	}

	.component-link img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.component-link img[src=""] {
		display: none;
	}

	.component-link-body {
		display: grid;
		gap: 3px;
		min-width: 0;
	}

	.component-link-title {
		font-size: 15px;
		font-weight: var(--font-weight-6);
		line-height: 1.2;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.component-link-meta {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.pagination {

		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		justify-content: center;
		align-items: center;
		margin: 2rem 0;
		padding: 0;
		list-style: none;
	}

	.pagination .btn {
		min-width: 1.5rem;
		height: 1.5rem;
		padding: 0 0.5rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--radius-2);
		text-decoration: none;
		transition: background-color 0.2s ease, color 0.2s ease;
		font-family: var(--font-meta);
		font-size: 0.7rem;
		color: var(--color-ink);
	}

	.pagination .btn:not(.disabled):not(.active):hover {
		background-color: var(--color-surface-2);
		color: var(--color-accent);
	}

	.pagination .btn.active {
		background-color: var(--color-ink);
		color: var(--color-surface);
		cursor: default;
	}

	.pagination .btn.disabled {
		opacity: 0.5;
		cursor: not-allowed;
		pointer-events: none;
	}

	.pagination .btn[aria-label="Previous"],
	.pagination .btn[aria-label="Next"] {
		padding: 0 1rem;
	}

	@media (max-width: 768px) {
		.pagination {
			gap: 0.25rem;
		}

		.pagination .btn {
			min-width: 2rem;
			height: 2rem;
			font-size: 0.7rem;
		}
	}
}

.placelist {
	--spacing: 1rem;

	display: grid;
	-ms-grid-columns: (minmax(380px, 1fr))[auto-fill];
	grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
	gap: var(--spacing);
	/* max-width: 1400px; */
	margin: 0 auto;
}