:root {
	--tabino-ink: #25313c;
	--tabino-muted: #66727d;
	--tabino-line: #e8e3df;
	--tabino-paper: #fffdf9;
	--tabino-pink: #ef7f91;
	--tabino-pink-soft: #fff0f3;
	--tabino-blue: #6ba9c8;
	--tabino-blue-soft: #edf8fc;
	--tabino-yellow: #f6d77c;
	--tabino-shadow: 0 14px 36px rgba(48, 58, 67, 0.08);
}

.tabino-archive {
	background:
		radial-gradient(circle at 10% 0%, rgba(239, 127, 145, 0.08), transparent 30%),
		radial-gradient(circle at 92% 12%, rgba(107, 169, 200, 0.10), transparent 28%),
		#fff;
	color: var(--tabino-ink);
	padding: 36px 16px 80px;
}

.tabino-archive *,
.tabino-archive *::before,
.tabino-archive *::after {
	box-sizing: border-box;
}

.tabino-archive__inner {
	width: min(1120px, 100%);
	margin: 0 auto;
}

.tabino-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
	gap: 34px;
	align-items: center;
	overflow: hidden;
	position: relative;
	padding: clamp(32px, 5vw, 64px);
	border: 1px solid var(--tabino-line);
	border-radius: 32px;
	background:
		linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,248,244,.94)),
		var(--tabino-paper);
	box-shadow: var(--tabino-shadow);
}

.tabino-kicker,
.tabino-section__eyebrow {
	margin: 0 0 10px;
	color: var(--tabino-pink);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.tabino-hero h1 {
	margin: 0;
	font-size: clamp(34px, 5.7vw, 64px);
	line-height: 1.13;
	letter-spacing: .01em;
}

.tabino-hero__lead {
	max-width: 720px;
	margin: 22px 0 0;
	color: var(--tabino-muted);
	font-size: clamp(15px, 1.7vw, 18px);
	line-height: 1.95;
}

.tabino-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.tabino-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 11px 20px;
	border-radius: 999px;
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 800;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.tabino-button:hover {
	transform: translateY(-2px);
}

.tabino-button--primary {
	background: var(--tabino-ink);
	color: #fff !important;
	box-shadow: 0 8px 22px rgba(37, 49, 60, .16);
}

.tabino-button--secondary {
	border: 1px solid var(--tabino-line);
	background: #fff;
	color: var(--tabino-ink) !important;
}

.tabino-hero__visual {
	overflow: hidden;
	position: relative;
	border-radius: 28px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(48, 58, 67, 0.06);
}

.tabino-hero__character {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 28px;
}

.tabino-section {
	margin-top: 72px;
}

.tabino-section__heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 24px;
}

.tabino-section__heading h2,
.tabino-guide h2 {
	margin: 0;
	font-size: clamp(25px, 3vw, 36px);
	line-height: 1.3;
}

.tabino-section__note {
	margin: 0;
	color: var(--tabino-muted);
	font-size: 13px;
}

.tabino-card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.tabino-card {
	overflow: hidden;
	border: 1px solid var(--tabino-line);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(48, 58, 67, .055);
	transition: transform .18s ease, box-shadow .18s ease;
}

.tabino-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(48, 58, 67, .10);
}

.tabino-card__link {
	display: block;
	height: 100%;
	color: inherit !important;
	text-decoration: none !important;
}

.tabino-card__image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	position: relative;
	background: #f6f4f2;
}

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

.tabino-card__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(145deg, var(--tabino-pink-soft), var(--tabino-blue-soft));
	color: var(--tabino-ink);
	font-size: 24px;
	font-weight: 800;
}

.tabino-card__episode {
	position: absolute;
	left: 12px;
	top: 12px;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(255,255,255,.94);
	color: var(--tabino-ink);
	font-size: 12px;
	font-weight: 800;
	box-shadow: 0 4px 14px rgba(37,49,60,.10);
}

.tabino-card__body {
	padding: 18px 18px 20px;
}

.tabino-card__series {
	margin: 0 0 7px;
	color: var(--tabino-pink);
	font-size: 12px;
	font-weight: 800;
}

.tabino-card__title {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
}

.tabino-card__excerpt {
	margin: 10px 0 0;
	color: var(--tabino-muted);
	font-size: 13px;
	line-height: 1.75;
}

.tabino-card__more,
.tabino-series-card__more {
	display: inline-block;
	margin-top: 15px;
	color: var(--tabino-blue);
	font-size: 13px;
	font-weight: 800;
}

.tabino-section--series {
	scroll-margin-top: 30px;
}

.tabino-series-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.tabino-series-card {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	overflow: hidden;
	border: 1px solid var(--tabino-line);
	border-radius: 22px;
	background: var(--tabino-paper);
	color: inherit !important;
	text-decoration: none !important;
	transition: transform .18s ease, box-shadow .18s ease;
}

.tabino-series-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--tabino-shadow);
}

.tabino-series-card__image {
	aspect-ratio: 1 / 1;
	background: linear-gradient(145deg, var(--tabino-pink-soft), var(--tabino-blue-soft));
}

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

.tabino-series-card__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--tabino-blue);
	font-size: 42px;
}

.tabino-series-card__body {
	padding: 18px 20px;
	align-self: center;
}

.tabino-series-card__code {
	display: inline-block;
	margin-bottom: 6px;
	color: var(--tabino-pink);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .08em;
}

.tabino-series-card h3 {
	margin: 0;
	font-size: 20px;
	line-height: 1.4;
}

.tabino-series-card p {
	margin: 7px 0 0;
	color: var(--tabino-muted);
	font-size: 13px;
}

.tabino-guide {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 26px;
	align-items: center;
	margin-top: 72px;
	padding: 30px;
	border-radius: 26px;
	background: var(--tabino-blue-soft);
}

.tabino-guide__icon {
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: #fff;
	font-size: 43px;
}

.tabino-guide p {
	margin: 13px 0 0;
	color: var(--tabino-muted);
	line-height: 1.9;
}

.tabino-text-link {
	display: inline-block;
	margin-top: 15px;
	color: var(--tabino-ink) !important;
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.tabino-site-link {
	margin-top: 34px;
	padding: 20px 24px;
	border: 1px dashed #d9d3cd;
	border-radius: 18px;
	text-align: center;
	background: #fff;
}

.tabino-site-link p {
	margin: 0 0 7px;
	color: var(--tabino-muted);
	font-size: 13px;
}

.tabino-site-link a {
	color: var(--tabino-ink);
	font-weight: 800;
}

.tabino-empty {
	margin-top: 50px;
	padding: 38px 24px;
	border: 1px dashed var(--tabino-line);
	border-radius: 20px;
	text-align: center;
	background: var(--tabino-paper);
}

.tabino-empty h2 {
	margin: 0 0 8px;
	font-size: 24px;
}

.tabino-empty p {
	margin: 0;
	color: var(--tabino-muted);
}

.tabino-empty--small {
	margin-top: 0;
	padding: 24px;
}

@media (max-width: 900px) {
	.tabino-hero {
		grid-template-columns: 1fr;
	}


	.tabino-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tabino-series-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 620px) {
	.tabino-archive {
		padding: 18px 12px 56px;
	}

	.tabino-hero {
		padding: 28px 20px;
		border-radius: 24px;
	}

	.tabino-hero h1 {
		font-size: 36px;
	}

	.tabino-hero__lead {
		line-height: 1.8;
	}

	.tabino-hero__actions {
		flex-direction: column;
	}

	.tabino-button {
		width: 100%;
	}

	.tabino-section {
		margin-top: 54px;
	}

	.tabino-section__heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 7px;
	}

	.tabino-card-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.tabino-card {
		border-radius: 18px;
	}

	.tabino-series-card {
		grid-template-columns: 112px minmax(0, 1fr);
	}

	.tabino-series-card__body {
		padding: 15px;
	}

	.tabino-series-card h3 {
		font-size: 17px;
	}

	.tabino-guide {
		grid-template-columns: 1fr;
		padding: 24px 20px;
	}

	.tabino-guide__icon {
		width: 74px;
		height: 74px;
		font-size: 34px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tabino-card,
	.tabino-series-card,
	.tabino-button {
		transition: none;
	}
}