.osf-feed,
.osf-feed * {
	box-sizing: border-box;
}

.osf-feed {
	position: relative;
	width: 100%;
	max-width: var(--osf-max-width, 1400px);
	margin: var(--osf-margin-top, 0) auto var(--osf-margin-bottom, 0);
	padding: var(--osf-padding, 42px);
	border: var(--osf-container-border-width, 0) solid var(--osf-container-border-color, #2271b1);
	border-radius: var(--osf-container-radius, 12px);
	background: var(--osf-background, #ffffff);
	box-shadow: var(--osf-shadow, none);
	color: var(--osf-text, #1d2327);
	font-family: var(--osf-font-family, inherit);
}

.osf-feed__header {
	display: flex;
	gap: var(--osf-header-gap, 24px);
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--osf-header-spacing, 38px);
}

.osf-feed__follow-only {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: var(--osf-follow-justify, flex-end);
	margin-bottom: 18px;
}

.osf-source-buttons {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: var(--osf-follow-justify, flex-end);
}

.osf-profile {
	display: flex;
	gap: 16px;
	align-items: center;
	min-width: 0;
}

.osf-profile__avatar {
	display: block;
	flex: 0 0 var(--osf-avatar-size, 72px);
	width: var(--osf-avatar-size, 72px);
	height: var(--osf-avatar-size, 72px);
	overflow: hidden;
	border: var(--osf-avatar-border-width, 2px) solid var(--osf-avatar-border-color, #2271b1);
	border-radius: var(--osf-avatar-radius, 50%);
	background: var(--osf-image-background, #f0f0f1);
}

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

.osf-profile__copy {
	min-width: 0;
}

.osf-profile__name {
	margin: 0 0 2px;
	color: var(--osf-heading-color, #1d2327);
	font-family: inherit;
	font-size: var(--osf-heading-size, 28px);
	font-weight: var(--osf-heading-weight, 500);
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.osf-profile__username {
	color: var(--osf-username-color, #1d2327);
	font-size: var(--osf-username-size, 15px);
	font-weight: 700;
	text-decoration: none;
}

.osf-profile__username:hover,
.osf-profile__username:focus-visible {
	color: var(--osf-accent, #2271b1);
}

.osf-profile__bio {
	max-width: 68ch;
	margin: 7px 0 0;
	color: var(--osf-bio-color, #1d2327);
	font-size: var(--osf-bio-size, 15px);
	line-height: 1.55;
}

.osf-profile__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 7px 0 0;
	color: var(--osf-stats-color, #1d2327);
	font-size: var(--osf-stats-size, 13px);
}

.osf-profile__stats strong {
	font-weight: 800;
}

.osf-follow {
	display: inline-flex;
	min-height: var(--osf-button-min-height, 46px);
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	padding: var(--osf-button-padding-y, 11px) var(--osf-button-padding-x, 18px);
	border: var(--osf-button-border-width, 2px) solid var(--osf-button-border, #1d2327);
	border-radius: var(--osf-button-radius, 4px);
	background: var(--osf-button, #1d2327);
	color: var(--osf-button-text, #ffffff);
	font-family: inherit;
	font-size: var(--osf-button-font-size, 13px);
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}

.osf-follow:hover,
.osf-follow:focus-visible {
	border-color: var(--osf-button-hover-border, #1d2327);
	background: var(--osf-button-hover, #ffffff);
	color: var(--osf-button-hover-text, #1d2327);
}

.osf-follow:active {
	transform: translateY(1px);
}

.osf-feed__items {
	display: grid;
	grid-template-columns: repeat(var(--osf-columns, 4), minmax(0, 1fr));
	gap: var(--osf-gap, 16px);
}

.osf-post {
	min-width: 0;
	margin: 0;
	padding: var(--osf-post-padding, 0);
	border: var(--osf-post-border-width, 0) solid var(--osf-post-border-color, #2271b1);
	border-radius: var(--osf-post-radius, 12px);
	background: var(--osf-post-background, #ffffff);
}

.osf-post__link {
	appearance: none;
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: inherit;
	text-decoration: none;
	cursor: pointer;
}

.osf-post__media {
	position: relative;
	display: block;
	overflow: hidden;
	border: var(--osf-image-border-width, 0) solid var(--osf-image-border-color, #2271b1);
	border-radius: var(--osf-image-radius, 12px);
	background: var(--osf-image-background, #f0f0f1);
}

.osf-feed--ratio-square .osf-post__media {
	aspect-ratio: 1;
}

.osf-feed--ratio-portrait .osf-post__media {
	aspect-ratio: 4 / 5;
}

.osf-feed--ratio-landscape .osf-post__media {
	aspect-ratio: 4 / 3;
}

.osf-post__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.osf-feed--ratio-original .osf-post__media img {
	height: auto;
}

.osf-post__link:hover .osf-post__media img,
.osf-post__link:focus-visible .osf-post__media img {
	transform: scale(var(--osf-image-zoom, 1.025));
}

.osf-post__link:focus-visible,
.osf-profile__avatar:focus-visible,
.osf-profile__username:focus-visible,
.osf-follow:focus-visible,
.osf-slider__button:focus-visible,
.osf-slider__dot:focus-visible,
.osf-lightbox__close:focus-visible {
	outline: 3px solid var(--osf-focus, #2271b1);
	outline-offset: 3px;
}

.osf-post__type {
	position: absolute;
	top: var(--osf-badge-top, 10px);
	right: var(--osf-badge-right, 10px);
	padding: 5px 8px;
	border-radius: var(--osf-badge-radius, 3px);
	background: var(--osf-badge-background, #1d2327);
	color: var(--osf-badge-text, #ffffff);
	font-size: var(--osf-badge-size, 11px);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.osf-post__caption {
	display: -webkit-box;
	overflow: hidden;
	margin: var(--osf-caption-spacing, 10px) 1px 0;
	color: var(--osf-caption-color, #1d2327);
	font-size: var(--osf-caption-size, 14px);
	line-height: var(--osf-caption-line-height, 150%);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--osf-caption-lines, 3);
}

.osf-feed--slider .osf-feed__viewport {
	overflow: hidden;
}

.osf-feed--slider .osf-feed__items {
	display: flex;
	overflow-x: auto;
	gap: var(--osf-gap, 16px);
	padding: 3px;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.osf-feed--slider .osf-feed__items::-webkit-scrollbar {
	display: none;
}

.osf-feed--slider .osf-post {
	flex: 0 0 calc((100% - (var(--osf-gap, 16px) * (var(--osf-columns, 4) - 1))) / var(--osf-columns, 4));
	scroll-snap-align: start;
}

.osf-slider__navigation {
	display: flex;
	gap: var(--osf-arrow-gap, 9px);
	justify-content: var(--osf-arrow-justify, flex-end);
	margin-top: var(--osf-arrow-spacing, 18px);
}

.osf-slider__button {
	display: inline-flex;
	width: var(--osf-arrow-size, 46px);
	height: var(--osf-arrow-size, 46px);
	align-items: center;
	justify-content: center;
	padding: 0;
	border: var(--osf-arrow-border-width, 1px) solid var(--osf-arrow-border, #1d2327);
	border-radius: var(--osf-arrow-radius, 50%);
	background: var(--osf-arrow-background, #ffffff);
	color: var(--osf-arrow-text, #1d2327);
	cursor: pointer;
	font: inherit;
	transition: transform 160ms ease, background-color 160ms ease, color 160ms ease;
}

.osf-slider__button span {
	font-size: var(--osf-arrow-icon-size, 32px);
	font-weight: 300;
	line-height: 1;
	transform: translateY(-1px);
}

.osf-slider__button:hover {
	border-color: var(--osf-arrow-hover-border, #1d2327);
	background: var(--osf-arrow-hover-background, #1d2327);
	color: var(--osf-arrow-hover-text, #ffffff);
}

.osf-slider__button:active {
	transform: scale(0.97);
}

.osf-slider__dots {
	display: flex;
	gap: var(--osf-dot-gap, 8px);
	justify-content: center;
	min-height: 12px;
	margin-top: var(--osf-dot-spacing, 14px);
}

.osf-slider__dot {
	width: var(--osf-dot-size, 9px);
	height: var(--osf-dot-size, 9px);
	padding: 0;
	border: var(--osf-dot-border-width, 1px) solid var(--osf-dot-inactive-border, #1d2327);
	border-radius: var(--osf-dot-radius, 50%);
	background: var(--osf-dot-inactive, #ffffff);
	cursor: pointer;
}

.osf-slider__dot[aria-current="true"] {
	border-color: var(--osf-dot-active-border, #1d2327);
	background: var(--osf-dot-active, #1d2327);
}

html.osf-lightbox-open,
html.osf-lightbox-open body {
	overflow: hidden;
}

.osf-lightbox {
	width: calc(100% - 32px);
	max-width: var(--osf-lightbox-max-width, 900px);
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--osf-lightbox-text, #1d2327);
	overflow: hidden;
}

.osf-lightbox::backdrop {
	background: var(--osf-lightbox-overlay, rgba(1, 56, 57, 0.88));
}

.osf-lightbox__panel {
	display: flex;
	max-height: calc(100dvh - 32px);
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--osf-lightbox-radius, 12px);
	background: var(--osf-lightbox-background, #ffffff);
	box-shadow: 0 22px 70px rgba(1, 56, 57, 0.32);
}

.osf-lightbox__toolbar {
	display: flex;
	flex: 0 0 auto;
	justify-content: flex-end;
	padding: 12px;
	background: var(--osf-lightbox-background, #ffffff);
}

.osf-lightbox__close {
	appearance: none;
	display: inline-flex;
	height: auto;
	min-height: var(--osf-lightbox-close-size, 44px);
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	border: 0;
	border-radius: 4px;
	background: var(--osf-lightbox-close, #ffffff);
	box-shadow: 0 3px 14px rgba(1, 56, 57, 0.18);
	color: var(--osf-lightbox-close-text, #1d2327);
	cursor: pointer;
	font: inherit;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
}

.osf-lightbox__close:active {
	transform: translateY(1px);
}

.osf-lightbox__media {
	display: grid;
	min-height: min(280px, 42dvh);
	flex: 1 1 auto;
	overflow: hidden;
	place-items: center;
	background: var(--osf-lightbox-media-background, #101313);
}

.osf-lightbox__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: min(68dvh, 720px);
	object-fit: contain;
}

.osf-lightbox__embed {
	display: block;
	width: 100%;
	height: min(68dvh, 720px);
	max-height: 100%;
	border: 0;
	background: #ffffff;
}

.osf-lightbox__image[hidden],
.osf-lightbox__embed[hidden] {
	display: none;
}

.osf-lightbox__loading {
	margin: 0;
	padding: 80px 24px;
	color: #ffffff;
	font-size: 15px;
	text-align: center;
}

.osf-lightbox__footer {
	display: grid;
	max-height: 36dvh;
	flex: 0 1 auto;
	gap: 18px;
	justify-items: start;
	overflow: auto;
	padding: var(--osf-lightbox-padding, 24px);
}

.osf-lightbox__footer[hidden] {
	display: none;
}

.osf-lightbox__caption {
	width: 100%;
	max-height: 7.5em;
	margin: 0;
	overflow: auto;
	color: var(--osf-lightbox-text, #1d2327);
	font-size: 15px;
	line-height: 1.5;
}

.osf-feed--message {
	padding: 18px 22px;
	border-left: 4px solid #2271b1;
}

.osf-feed--message p {
	margin: 0;
}

@media (max-width: 900px) {
	.osf-feed {
		padding: var(--osf-tablet-padding, 27px);
	}

	.osf-feed__items {
		grid-template-columns: repeat(var(--osf-tablet-columns, 3), minmax(0, 1fr));
	}

	.osf-feed--slider .osf-post {
		flex-basis: calc((100% - (var(--osf-gap, 16px) * (var(--osf-tablet-columns, 3) - 1))) / var(--osf-tablet-columns, 3));
	}
}

@media (max-width: 620px) {
	.osf-feed {
		padding: var(--osf-mobile-padding, 20px);
	}

	.osf-feed__header {
		align-items: var(--osf-mobile-header-align, flex-start);
		flex-direction: var(--osf-mobile-header-direction, column);
		gap: 16px;
	}

	.osf-profile__avatar {
		flex-basis: var(--osf-avatar-mobile-size, 58px);
		width: var(--osf-avatar-mobile-size, 58px);
		height: var(--osf-avatar-mobile-size, 58px);
	}

	.osf-follow {
		width: var(--osf-mobile-button-width, 100%);
	}

	.osf-source-buttons {
		width: 100%;
	}

	.osf-feed__items {
		grid-template-columns: repeat(var(--osf-mobile-columns, 2), minmax(0, 1fr));
	}

	.osf-feed--slider .osf-post {
		flex-basis: calc((100% - (var(--osf-gap, 16px) * (var(--osf-mobile-columns, 2) - 1))) / var(--osf-mobile-columns, 2));
	}

	.osf-lightbox {
		width: calc(100% - 16px);
		max-height: calc(100dvh - 16px);
	}

	.osf-lightbox__panel {
		max-height: calc(100dvh - 16px);
	}

	.osf-lightbox__toolbar {
		padding: 8px;
	}

	.osf-lightbox__embed {
		height: 68dvh;
	}

	.osf-lightbox__footer {
		gap: 14px;
		padding: min(var(--osf-lightbox-padding, 24px), 18px);
	}

}

@media (prefers-reduced-motion: reduce) {
	.osf-feed *,
	.osf-feed *::before,
	.osf-feed *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}