.vo-arclog {
	container-type: inline-size;
}

.vo-arclog__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-10);
	min-width: 0;
}

.vo-logcard {
	position: relative;
	display: grid;
	grid-template-columns: 40% minmax(0, 1fr);
	grid-template-areas:
		"media main"
		"media score";
	column-gap: var(--space-10);
	min-width: 0;
	padding: var(--space-6);
	border-radius: 20px;
	background-color: var(--color-card);
	transition: background-color var(--dur-3) var(--ease-out);
}

.vo-logcard__media {
	grid-area: media;
	position: relative;
	min-height: 100px;
	overflow: hidden;
	border-radius: 14px;
	background-color: #0D0C13;
}

.vo-logcard__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-4) var(--ease-out);
}

.vo-logcard__cat {
	--vo-logcard-tone: var(--color-sub-hover);
	position: absolute;
	left: var(--space-6);
	bottom: var(--space-6);
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	max-width: calc(100% - var(--space-12));
	height: 22px;
	padding: 0 var(--space-8);
	overflow: hidden;
	border-radius: var(--radius-full);
	background-color: rgba(16, 15, 24, 0.8);
	color: var(--color-foreground);
	font-size: 10px;
	font-weight: var(--font-weight-bold);
	line-height: 1;
	white-space: nowrap;
}

.vo-logcard__cat::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: var(--radius-full);
	background-color: var(--vo-logcard-tone);
}

.vo-logcard__cat--0 {
	--vo-logcard-tone: var(--color-primary);
}

.vo-logcard__cat--2 {
	--vo-logcard-tone: var(--color-positive);
}

.vo-logcard__cat--3 {
	--vo-logcard-tone: var(--color-destructive);
}

.vo-logcard__cat--4 {
	--vo-logcard-tone: var(--color-orange-500);
}

.vo-logcard__cat--5 {
	--vo-logcard-tone: #B6A4E3;
}

.vo-logcard__save {
	position: absolute;
	top: var(--space-6);
	right: var(--space-6);
	z-index: 2;
	display: flex;
}

.vo-logcard__main {
	grid-area: main;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
	padding: var(--space-4) var(--space-2) 0 0;
}

.vo-logcard__new {
	display: none;
	align-self: flex-start;
	align-items: center;
	height: 22px;
	padding: 0 var(--space-10);
	border-radius: var(--radius-full);
	background-color: var(--color-primary);
	color: var(--color-primary-foreground);
	font-size: 10px;
	font-weight: var(--font-weight-extrabold);
	line-height: 1;
	letter-spacing: 0.02em;
}

.vo-logcard__name {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--color-foreground);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-extrabold);
	line-height: 1.35;
	letter-spacing: var(--letter-spacing-heading);
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.vo-logcard__name a {
	transition: color var(--dur-1) var(--ease-out);
}

.vo-logcard__name a:focus-visible {
	outline: none;
}

.vo-logcard__name a:focus-visible::after {
	border-radius: 20px;
	outline: 2px solid var(--color-ring);
	outline-offset: 2px;
}

.vo-logcard__sum {
	display: none;
	margin: 0;
	color: var(--color-foreground);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	line-height: 1.7;
}

.vo-logcard__headline {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--color-muted-foreground);
	font-size: var(--font-size-3xs);
	line-height: 1.6;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.vo-logcard__by {
	display: none;
	align-items: center;
	gap: var(--space-8);
	min-width: 0;
	min-height: 24px;
	padding: var(--space-8) var(--space-10) 14px;
	color: var(--color-muted-foreground);
	font-size: var(--font-size-3xs);
	line-height: 1.4;
	white-space: nowrap;
}

.vo-logcard__avatar {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: var(--radius-full);
}

.vo-logcard__maker {
	min-width: 0;
	overflow: hidden;
	color: var(--color-foreground);
	font-weight: var(--font-weight-bold);
	text-overflow: ellipsis;
}

.vo-logcard__date {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
}

.vo-logcard__score {
	grid-area: score;
	align-self: end;
	display: flex;
	align-items: center;
	gap: var(--space-6);
	min-width: 0;
	margin-top: var(--space-6);
	padding: 7px var(--space-10);
	border-radius: var(--space-12);
	background-color: var(--color-surface-2);
	white-space: nowrap;
	transition: background-color var(--dur-3) var(--ease-out);
}

.vo-logcard__rate {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
}

.vo-logcard__stars {
	flex: none;
	width: 71px;
	height: 13px;
	background-image: linear-gradient(90deg, var(--color-primary) var(--vo-logcard-fill, 0px), var(--color-switch-background) 0);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'/%3E%3C/svg%3E") 0 0 / 14.5px 13px repeat-x;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'/%3E%3C/svg%3E") 0 0 / 14.5px 13px repeat-x;
}

.vo-logcard__value {
	color: var(--color-foreground);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-extrabold);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.vo-logcard__chips {
	display: flex;
	gap: var(--space-4);
	margin-left: auto;
}

.vo-logcard__chip {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 var(--space-8);
	border-radius: var(--radius-full);
	background-color: var(--color-surface-3);
	color: var(--color-foreground);
	font-size: 10px;
	font-weight: var(--font-weight-bold);
	line-height: 1;
}

.vo-logcard__chip:not(.vo-logcard__chip--figs) {
	display: none;
}

.vo-logcard__chip--beginner {
	background-color: var(--color-positive-tint-18);
	color: var(--color-positive);
}

.vo-logcard__chip--intermediate {
	background-color: var(--color-sub-tint-28);
	color: var(--color-sub);
}

.vo-logcard__chip--advanced {
	background-color: var(--color-destructive-tint-18);
	color: var(--color-destructive);
}

.vo-logcard.is-lead {
	display: flex;
	flex-direction: column;
	padding: var(--space-8);
	border-radius: 22px;
}

.vo-logcard.is-lead .vo-logcard__media {
	flex: none;
	min-height: 0;
	border-radius: 15px;
	aspect-ratio: 16 / 9;
}

.vo-logcard.is-lead .vo-logcard__cat {
	top: var(--space-8);
	bottom: auto;
	left: var(--space-8);
	max-width: calc(100% - 110px);
	height: 26px;
	padding: 0 var(--space-10);
	font-size: var(--font-size-3xs);
}

.vo-logcard.is-lead .vo-logcard__save {
	top: var(--space-8);
	right: var(--space-8);
}

.vo-logcard.is-lead .bookmark-btn--save {
	height: 28px;
	padding: 0 var(--space-12) 0 var(--space-10);
	font-size: var(--font-size-3xs);
}

.vo-logcard.is-lead .vo-logcard__main {
	flex: 1 1 auto;
	gap: var(--space-6);
	padding: 14px var(--space-8) var(--space-2);
}

.vo-logcard.is-lead .vo-logcard__name {
	font-size: var(--font-size-lg);
}

.vo-logcard.is-lead .vo-logcard__headline {
	font-size: var(--font-size-2xs);
	line-height: 1.7;
}

.vo-logcard.is-lead .vo-logcard__by {
	display: flex;
	padding: var(--space-8) var(--space-8) var(--space-12);
}

.vo-logcard.is-lead .vo-logcard__score {
	align-self: stretch;
	gap: var(--space-8);
	margin-top: 0;
	padding: 10px var(--space-12);
	border-radius: 14px;
}

.vo-logcard.is-lead .vo-logcard__chip:not(.vo-logcard__chip--figs) {
	display: inline-flex;
}

@media (hover: hover) {
	.vo-logcard:hover {
		background-color: #211F31;
	}

	.vo-logcard:hover .vo-logcard__media img {
		transform: scale(1.05);
	}

	.vo-logcard:hover .vo-logcard__name a {
		color: var(--color-link-hover);
	}

	.vo-logcard:hover .vo-logcard__score {
		background-color: #2A2840;
	}
}

@container (min-width: 600px) {
	.vo-arclog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-16);
	}

	.vo-logcard,
	.vo-logcard.is-lead {
		display: flex;
		flex-direction: column;
		padding: var(--space-8);
		border-radius: 24px;
	}

	.vo-logcard__media,
	.vo-logcard.is-lead .vo-logcard__media {
		flex: none;
		min-height: 0;
		border-radius: var(--space-16);
		aspect-ratio: 16 / 9;
	}

	.vo-logcard__cat,
	.vo-logcard.is-lead .vo-logcard__cat {
		top: var(--space-10);
		bottom: auto;
		left: var(--space-10);
		max-width: calc(100% - 120px);
		height: 28px;
		padding: 0 11px;
		font-size: var(--font-size-3xs);
	}

	.vo-logcard__cat::before {
		width: 7px;
		height: 7px;
	}

	.vo-logcard__save,
	.vo-logcard.is-lead .vo-logcard__save {
		top: var(--space-10);
		right: var(--space-10);
	}

	.vo-logcard__main,
	.vo-logcard.is-lead .vo-logcard__main {
		flex: 1 1 auto;
		gap: var(--space-8);
		padding: var(--space-16) var(--space-10) var(--space-4);
	}

	.vo-logcard__name,
	.vo-logcard.is-lead .vo-logcard__name {
		min-height: 2.7em;
		font-size: 1.125rem;
	}

	.vo-logcard__headline,
	.vo-logcard.is-lead .vo-logcard__headline {
		min-height: 3.4em;
		font-size: var(--font-size-2xs);
		line-height: 1.7;
	}

	.vo-logcard__by,
	.vo-logcard.is-lead .vo-logcard__by {
		display: flex;
		padding: var(--space-8) var(--space-10) 14px;
	}

	.vo-logcard__score,
	.vo-logcard.is-lead .vo-logcard__score {
		align-self: stretch;
		gap: var(--space-8);
		margin-top: 0;
		padding: 11px var(--space-12);
		border-radius: var(--space-16);
	}

	.vo-logcard__value {
		font-size: var(--font-size-md);
	}

	.vo-logcard__chip:not(.vo-logcard__chip--figs) {
		display: inline-flex;
	}

	.vo-logcard__chip {
		height: 24px;
		padding: 0 9px;
		font-size: var(--font-size-3xs);
	}
}

@container (min-width: 600px) and (max-width: 959.98px) {
	.vo-logcard.is-span {
		grid-column: span 2;
		display: grid;
		grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
		grid-template-rows: 1fr auto auto;
		grid-template-areas:
			"media main"
			"media by"
			"media score";
		column-gap: var(--space-8);
	}

	.vo-logcard.is-span .vo-logcard__media {
		height: 100%;
		min-height: 260px;
		aspect-ratio: auto;
	}

	.vo-logcard.is-span .vo-logcard__main {
		padding: 18px 14px var(--space-4);
	}

	.vo-logcard.is-span .vo-logcard__name {
		min-height: 0;
		font-size: 1.375rem;
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}

	.vo-logcard.is-span .vo-logcard__sum {
		display: block;
	}

	.vo-logcard.is-span .vo-logcard__headline {
		min-height: 0;
	}

	.vo-logcard.is-span .vo-logcard__by {
		padding-right: 14px;
		padding-left: 14px;
	}

	.vo-logcard.is-span .vo-logcard__new {
		display: inline-flex;
	}
}

@container (min-width: 960px) {
	.vo-logcard.is-wide {
		grid-column: span 2;
		display: grid;
		grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
		grid-template-rows: 1fr auto auto;
		grid-template-areas:
			"media main"
			"media by"
			"media score";
		column-gap: var(--space-8);
	}

	.vo-logcard.is-wide .vo-logcard__media {
		height: 100%;
		min-height: 300px;
		aspect-ratio: auto;
	}

	.vo-logcard.is-wide .vo-logcard__main {
		gap: var(--space-10);
		padding: 18px 14px var(--space-4);
	}

	.vo-logcard.is-wide .vo-logcard__name {
		min-height: 0;
		font-size: 1.5rem;
		line-height: 1.3;
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}

	.vo-logcard.is-wide .vo-logcard__sum {
		display: block;
	}

	.vo-logcard.is-wide .vo-logcard__headline {
		min-height: 0;
	}

	.vo-logcard.is-wide .vo-logcard__by {
		padding-right: 14px;
		padding-left: 14px;
	}

	.vo-logcard.is-wide .vo-logcard__new {
		display: inline-flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vo-logcard,
	.vo-logcard__media img,
	.vo-logcard__name a,
	.vo-logcard__score {
		transition: none;
	}

	.vo-logcard:hover .vo-logcard__media img {
		transform: none;
	}
}