:root {
	--fbs-ink: #102b3a;
	--fbs-ink-deep: #091925;
	--fbs-gold: #c69a53;
	--fbs-ivory: #fffaf2;
	--fbs-mohan: #79648d;
	--fbs-rose: #c96f8b;
}

.fbs-series-feature,
.fbs-series-compact,
.fbs-series-full {
	box-sizing: border-box;
	font-family: inherit;
}

.fbs-series-feature *,
.fbs-series-compact *,
.fbs-series-full * { box-sizing: border-box; }

.fbs-series-feature {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(19rem, .95fr);
	gap: clamp(1.5rem, 4vw, 4.5rem);
	align-items: center;
	width: min(100% - 2rem, 92rem);
	margin: clamp(3rem, 7vw, 6rem) auto;
	padding: clamp(2rem, 5vw, 5.5rem);
	overflow: hidden;
	color: #fff8eb;
	background:
		radial-gradient(circle at 83% 18%, rgba(201, 111, 139, .28), transparent 26rem),
		linear-gradient(132deg, var(--fbs-ink-deep), #12344a 55%, #30233f);
	border: 1px solid rgba(198, 154, 83, .58);
	border-radius: clamp(1.5rem, 3vw, 3.25rem);
	box-shadow: 0 2rem 4rem rgba(9, 25, 37, .2);
}

.fbs-series-feature h2,
.fbs-series-compact h2,
.fbs-series-full h1,
.fbs-series-season h2,
.fbs-series-card h2 {
	font-family: Georgia, "Noto Serif TC", serif;
	text-wrap: balance;
}

.fbs-series-feature h2 {
	margin: .35rem 0 1rem;
	color: #fff8e9;
	font-size: clamp(2.4rem, 6vw, 5.6rem);
	line-height: 1.05;
}

.fbs-series-feature__copy > p:not(.fbs-series-kicker):not(.fbs-series-progress__label) {
	max-width: 42rem;
	color: #eadfdc;
	font-size: clamp(1rem, 1.35vw, 1.25rem);
	line-height: 1.85;
}

.fbs-series-kicker {
	margin: 0;
	color: #edc77f;
	font-size: .76rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.fbs-series-progress {
	width: min(100%, 34rem);
	height: .55rem;
	margin-top: 1.7rem;
	overflow: hidden;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
}

.fbs-series-progress span {
	display: block;
	width: var(--fbs-progress);
	height: 100%;
	background: linear-gradient(90deg, var(--fbs-gold), #f4d39b, var(--fbs-rose));
	box-shadow: 0 0 1rem rgba(244, 211, 155, .45);
}

.fbs-series-progress__label {
	margin: .65rem 0 1.4rem;
	color: #f5ddb6;
	font-size: .9rem;
	font-weight: 700;
}

.fbs-series-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.2rem;
	padding: .75rem 1.35rem;
	color: #fffaf2 !important;
	font-weight: 800;
	text-decoration: none !important;
	background: linear-gradient(135deg, #a95070, #3e416f);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 999px;
	box-shadow: 0 .7rem 1.5rem rgba(7, 16, 28, .2);
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.fbs-series-button:hover,
.fbs-series-button:focus-visible {
	filter: brightness(1.08);
	transform: translateY(-2px);
	box-shadow: 0 1rem 2rem rgba(7, 16, 28, .28);
}

.fbs-series-button:active { transform: translateY(1px) scale(.99); }

.fbs-series-feature__latest {
	display: grid;
	overflow: hidden;
	color: #fff !important;
	text-decoration: none !important;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .23);
	border-radius: 1.65rem;
	box-shadow: 0 1.5rem 3rem rgba(3, 12, 22, .35);
	transition: transform .25s ease, border-color .25s ease;
}

.fbs-series-feature__latest:hover,
.fbs-series-feature__latest:focus-visible {
	transform: translateY(-5px);
	border-color: rgba(237, 199, 127, .85);
}

.fbs-series-feature__latest img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.fbs-series-feature__latest span,
.fbs-series-feature__latest strong { margin-inline: 1.3rem; }
.fbs-series-feature__latest span { margin-top: 1.15rem; color: #edc77f; font-size: .78rem; font-weight: 800; letter-spacing: .08em; }
.fbs-series-feature__latest strong { margin-block: .45rem 1.35rem; font-size: clamp(1rem, 1.7vw, 1.35rem); line-height: 1.45; }

.fbs-series-feature__locked {
	display: grid;
	min-height: 23rem;
	place-content: center;
	text-align: center;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 1.65rem;
}
.fbs-series-feature__locked span { color: rgba(255, 255, 255, .12); font: 800 clamp(6rem, 16vw, 12rem)/.8 Georgia, serif; }
.fbs-series-feature__locked strong { margin-top: 1.5rem; color: #ead8d0; }

.fbs-series-feature.is-complete {
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin-block: clamp(2.5rem, 5vw, 4rem);
	padding: clamp(1.5rem, 3vw, 2.75rem);
}
.fbs-series-feature.is-complete h2 { font-size: clamp(2rem, 4vw, 3.6rem); }
.fbs-series-feature__archive-mark {
	display: grid;
	width: clamp(4.5rem, 9vw, 7rem);
	aspect-ratio: 1;
	place-items: center;
	color: #f6d99f;
	background: radial-gradient(circle, rgba(198,154,83,.26), transparent 65%);
	border: 1px solid rgba(237,199,127,.55);
	border-radius: 50%;
	box-shadow: inset 0 0 0 .45rem rgba(255,255,255,.05);
}
.fbs-series-feature__archive-mark span { font: 700 clamp(1.5rem, 4vw, 2.75rem) Georgia, serif; }

.fbs-series-compact {
	display: flex;
	gap: 2rem;
	align-items: center;
	justify-content: space-between;
	width: min(100% - 2rem, 84rem);
	margin: 4rem auto 1rem;
	padding: clamp(1.6rem, 4vw, 3rem);
	color: #2e365f;
	background: linear-gradient(135deg, #fffaf2, #f6f1fb 58%, #edf6fa);
	border: 1px solid rgba(121, 100, 141, .25);
	border-radius: 1.75rem;
	box-shadow: 0 1.25rem 3rem rgba(46, 54, 95, .1);
}
.fbs-series-compact h2 { margin: .35rem 0 .5rem; color: #293853; font-size: clamp(1.7rem, 4vw, 2.75rem); }
.fbs-series-compact p:not(.fbs-series-kicker) { margin: 0; color: #555e70; line-height: 1.7; }

.fbs-series-full {
	width: min(100% - 2rem, 92rem);
	margin: 2rem auto 5rem;
}
.fbs-series-full__header {
	position: relative;
	min-height: clamp(32rem, 55vw, 52rem);
	overflow: hidden;
	color: #fff8e9;
	background: #091925;
	border-radius: clamp(1.5rem, 4vw, 3.5rem);
	box-shadow: 0 2rem 5rem rgba(9, 25, 37, .2);
}
.fbs-series-full__hero { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% center; }
.fbs-series-full__header::after { position: absolute; inset: 0; content: ""; pointer-events: none; background: linear-gradient(90deg, rgba(5,15,25,.94) 0%, rgba(5,15,25,.78) 34%, rgba(5,15,25,.1) 64%, transparent 78%); }
.fbs-series-full__hero-copy { position: relative; z-index: 1; display: flex; width: min(47%, 42rem); min-height: inherit; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 5.25rem); }
.fbs-series-full__hero-copy h1 { margin: .55rem 0 1rem; color: inherit; font-size: clamp(2.4rem, 5.5vw, 5rem); line-height: 1.08; }
.fbs-series-full__hero-copy > p:not(.fbs-series-kicker) { margin: 0; color: #eadfdc; font-size: clamp(.98rem, 1.4vw, 1.16rem); line-height: 1.8; }

.fbs-series-season { max-width: 72rem; margin: clamp(2.5rem, 6vw, 5rem) auto 0; text-align: center; }
.fbs-series-season h2 { margin: .55rem 0 .75rem; color: #18364d; font-size: clamp(2.1rem, 5vw, 4.2rem); line-height: 1.1; }
.fbs-series-season > p:not(.fbs-series-kicker) { color: #56606c; font-size: clamp(1rem, 1.8vw, 1.2rem); line-height: 1.8; }
.fbs-series-season > strong { color: #9b536d; letter-spacing: .08em; }

.fbs-series-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.6rem);
	margin-top: clamp(2rem, 5vw, 4rem);
}
.fbs-series-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(16, 43, 58, .12);
	border-radius: 1.4rem;
	box-shadow: 0 1rem 2.5rem rgba(16, 43, 58, .08);
}
.fbs-series-card__image { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.fbs-series-card__seal { display: grid; aspect-ratio: 3 / 2; place-items: center; background: radial-gradient(circle, rgba(198,154,83,.16), transparent 42%), linear-gradient(145deg, #e7edf1, #f7f1f8); }
.fbs-series-card__seal span { display: grid; width: 6rem; aspect-ratio: 1; place-items: center; color: #8a748e; font: 700 2rem Georgia, serif; border: 1px solid rgba(121,100,141,.38); border-radius: 50%; box-shadow: inset 0 0 0 .45rem rgba(255,255,255,.55); }
.fbs-series-card__body { display: flex; height: 100%; flex-direction: column; padding: 1.35rem; }
.fbs-series-card__meta { margin: 0; color: #9b536d; font-size: .76rem; font-weight: 800; letter-spacing: .06em; }
.fbs-series-card h2 { margin: .6rem 0 .75rem; color: #18364d; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.45; }
.fbs-series-card__body > p:not(.fbs-series-card__meta) { color: #56606c; line-height: 1.7; }
.fbs-series-card__body a { margin-top: auto; color: #8c3f60 !important; font-weight: 800; text-decoration: none !important; }
.fbs-series-card__locked-label { margin-top: auto; color: #7b6570; font-size: .85rem; font-weight: 700; }
.fbs-series-full__note { max-width: 62rem; margin: 3rem auto 0; padding: 1.25rem 1.5rem; color: #555e70; text-align: center; background: #f7f2f7; border-radius: 1rem; }

@media (max-width: 960px) {
	.fbs-series-feature { grid-template-columns: 1fr; }
	.fbs-series-feature.is-complete { grid-template-columns: auto 1fr; }
	.fbs-series-feature.is-complete .fbs-series-button { grid-column: 1 / -1; justify-self: start; }
	.fbs-series-feature__latest { width: min(100%, 42rem); }
	.fbs-series-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fbs-series-full__hero-copy { width: 58%; }
}

@media (max-width: 640px) {
	.fbs-series-feature,
	.fbs-series-full { width: min(100% - 1rem, 92rem); }
	.fbs-series-feature { gap: 1.5rem; margin-block: 2rem; padding: 1.35rem; border-radius: 1.4rem; }
	.fbs-series-feature h2 { font-size: clamp(2.25rem, 15vw, 3.5rem); }
	.fbs-series-feature.is-complete { grid-template-columns: 1fr; text-align: center; }
	.fbs-series-feature.is-complete .fbs-series-feature__archive-mark,
	.fbs-series-feature.is-complete .fbs-series-button { justify-self: center; }
	.fbs-series-feature__latest span,
	.fbs-series-feature__latest strong { margin-inline: 1rem; }
	.fbs-series-compact { width: min(100% - 1rem, 84rem); flex-direction: column; align-items: stretch; padding: 1.35rem; }
	.fbs-series-compact .fbs-series-button { width: 100%; }
	.fbs-series-full__header { display: flex; min-height: auto; flex-direction: column; background: #091925; }
	.fbs-series-full__hero { position: relative; height: auto; aspect-ratio: 4 / 5; object-position: 68% center; }
	.fbs-series-full__header::after { display: none; }
	.fbs-series-full__hero-copy { width: 100%; min-height: auto; padding: 1.75rem 1.35rem 2rem; text-align: center; }
	.fbs-series-full__hero-copy h1 { font-size: clamp(2.1rem, 11vw, 3.25rem); }
	.fbs-series-season { padding-inline: .75rem; }
	.fbs-series-grid { grid-template-columns: 1fr; }
	.fbs-series-card__body { padding: 1.2rem; }
}

@media (max-height: 520px) and (orientation: landscape) {
	.fbs-series-feature { grid-template-columns: 1.05fr .95fr; padding: 1.5rem; }
	.fbs-series-feature h2 { font-size: clamp(2rem, 7vw, 3.5rem); }
	.fbs-series-feature__copy > p:not(.fbs-series-kicker):not(.fbs-series-progress__label) { line-height: 1.55; }
	.fbs-series-feature__latest img { aspect-ratio: 16 / 9; }
	.fbs-series-full__header { min-height: 34rem; }
	.fbs-series-full__hero { position: absolute; height: 100%; aspect-ratio: auto; object-position: 58% center; }
	.fbs-series-full__header::after { display: block; }
	.fbs-series-full__hero-copy { width: 52%; min-height: inherit; padding: 2rem; text-align: left; }
	.fbs-series-full__hero-copy h1 { font-size: clamp(2rem, 6vw, 3.25rem); }
}

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