.home-section {
	padding-block: var(--qisubs-space-6);
}

.home-section--muted {
	background: var(--qisubs-surface-soft);
	border-block: 1px solid var(--qisubs-border);
}

.home-hero {
	padding-block: var(--qisubs-space-5) var(--qisubs-space-6);
}

.home-hero__inner {
	display: grid;
	align-items: center;
	gap: var(--qisubs-space-5);
}

.home-hero__eyebrow {
	margin-block-end: var(--qisubs-space-2);
	color: var(--qisubs-accent-strong);
	font-size: 0.85rem;
	font-weight: 800;
}

.home-hero h1 {
	max-inline-size: 14ch;
	margin-block-end: var(--qisubs-space-3);
	font-size: clamp(2.2rem, 8vw, 5.2rem);
	letter-spacing: -0.035em;
}

.home-hero__intro {
	max-inline-size: 39rem;
	margin-block-end: var(--qisubs-space-4);
	color: var(--qisubs-text-muted);
	font-size: clamp(1rem, 2vw, 1.15rem);
}

.home-hero__actions,
.episode-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--qisubs-space-2);
}

.home-hero__visual {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--qisubs-surface);
	border: 1px solid var(--qisubs-border);
	border-radius: var(--qisubs-radius-lg);
	box-shadow: var(--qisubs-shadow);
}

.home-hero__visual img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.home-hero__feature {
	position: absolute;
	inset-inline: var(--qisubs-space-3);
	inset-block-end: var(--qisubs-space-3);
	padding: var(--qisubs-space-3);
	background: rgb(21 24 29 / 88%);
	border: 1px solid var(--qisubs-border-strong);
	border-radius: var(--qisubs-radius-md);
	backdrop-filter: blur(12px);
}

.home-hero__feature p,
.home-hero__feature h2 {
	margin-block-end: 0;
}

.home-hero__feature p {
	color: var(--qisubs-text-muted);
	font-size: 0.78rem;
}

.home-hero__feature h2 {
	font-size: 1.05rem;
}

.home-about {
	display: grid;
	gap: var(--qisubs-space-5);
}

.home-about h2,
.home-community h2 {
	font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.home-about__copy,
.home-community p {
	max-inline-size: 42rem;
	color: var(--qisubs-text-muted);
}

.home-about__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--qisubs-space-3);
}

.home-about__stat {
	padding: var(--qisubs-space-4);
	background: var(--qisubs-surface);
	border: 1px solid var(--qisubs-border);
	border-radius: var(--qisubs-radius-md);
}

.home-about__stat strong,
.home-about__stat span {
	display: block;
}

.home-about__stat strong {
	font-size: 1.75rem;
}

.home-about__stat span {
	color: var(--qisubs-text-muted);
	font-size: 0.85rem;
}

.home-community {
	padding: var(--qisubs-space-5);
	background: var(--qisubs-surface);
	border: 1px solid var(--qisubs-border);
	border-radius: var(--qisubs-radius-lg);
}

.home-community .community-menu {
	margin-block-start: var(--qisubs-space-4);
}

.home-community .community-menu a {
	display: inline-flex;
	padding: 0.6rem 0.9rem;
	background: var(--qisubs-surface-raised);
	color: var(--qisubs-text);
	border: 1px solid var(--qisubs-border);
	border-radius: var(--qisubs-radius-sm);
}

.archive-heading {
	align-items: start;
	padding-block-end: var(--qisubs-space-4);
	margin-block-end: var(--qisubs-space-5);
	border-block-end: 1px solid var(--qisubs-border);
}

.archive-heading__description {
	max-inline-size: 35rem;
	margin-block-end: 0;
	color: var(--qisubs-text-muted);
}

.series-overview,
.episode-overview {
	display: grid;
	gap: var(--qisubs-space-5);
}

.series-overview__poster,
.episode-overview__media {
	overflow: hidden;
	background: var(--qisubs-surface);
	border: 1px solid var(--qisubs-border);
	border-radius: var(--qisubs-radius-lg);
}

.series-overview__poster {
	max-inline-size: 27rem;
	aspect-ratio: 2 / 3;
}

.episode-overview__media {
	aspect-ratio: 16 / 10;
}

.series-overview__poster img,
.episode-overview__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.series-overview__meta,
.episode-overview__content {
	align-self: center;
}

.series-overview__title,
.episode-overview__title {
	margin-block: var(--qisubs-space-2) 0.25rem;
	font-size: clamp(2rem, 5vw, 3.75rem);
	overflow-wrap: anywhere;
}

.series-overview__title-en,
.episode-overview__series,
.episode-overview__details {
	color: var(--qisubs-text-muted);
}

.series-overview__description {
	max-inline-size: var(--qisubs-reading);
	margin-block-start: var(--qisubs-space-4);
}

.series-overview__description--empty {
	color: var(--qisubs-text-muted);
}

.series-releases {
	padding-block-start: var(--qisubs-space-7);
}

.series-releases__heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: var(--qisubs-space-4);
	margin-block-end: var(--qisubs-space-4);
}

.series-releases__heading h2,
.viewing-info h2 {
	margin-block-end: 0;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
}

.series-releases__heading > p {
	margin-block-end: 0;
	color: var(--qisubs-text-muted);
	font-size: 0.875rem;
}

.release-folder-list {
	display: grid;
	gap: var(--qisubs-space-3);
}

.release-folder {
	--qisubs-release-accent: var(--qisubs-accent);

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--qisubs-space-4);
	min-block-size: 5.5rem;
	padding: 1rem 1.1rem;
	background: var(--qisubs-surface);
	color: var(--qisubs-text);
	border: 1px solid var(--qisubs-border);
	border-inline-start: 3px solid var(--qisubs-release-accent);
	border-radius: var(--qisubs-radius-md);
	text-decoration: none;
	transition: transform var(--qisubs-transition), background-color var(--qisubs-transition), border-color var(--qisubs-transition);
}

.release-folder--blue { --qisubs-release-accent: #6fa8ff; }
.release-folder--violet { --qisubs-release-accent: #a78bfa; }
.release-folder--amber { --qisubs-release-accent: #e8b45b; }

.release-folder:hover,
.release-folder:focus-visible {
	transform: translateY(-2px);
	background: var(--qisubs-surface-raised);
	color: var(--qisubs-text);
	border-color: color-mix(in srgb, var(--qisubs-release-accent) 35%, transparent);
}

.release-folder__content,
.release-folder__content > span {
	display: block;
}

.release-folder__content {
	min-inline-size: 0;
}

.release-folder__content strong {
	display: block;
	font-size: 1.05rem;
	overflow-wrap: anywhere;
}

.release-folder__content > span {
	margin-block-start: 0.15rem;
	color: var(--qisubs-text-muted);
	font-size: 0.84rem;
	overflow-wrap: anywhere;
}

.release-folder__meta {
	display: flex;
	align-items: center;
	gap: var(--qisubs-space-2);
	flex: none;
}

.release-folder__quality {
	padding: 0.35rem 0.7rem;
	background: color-mix(in srgb, var(--qisubs-release-accent) 13%, transparent);
	color: var(--qisubs-text);
	border: 1px solid color-mix(in srgb, var(--qisubs-release-accent) 28%, transparent);
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 850;
	white-space: nowrap;
}

.release-folder__external {
	display: grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	color: var(--qisubs-release-accent);
	border: 1px solid var(--qisubs-border-strong);
	border-radius: 50%;
	font-size: 1.05rem;
}

.viewing-info {
	display: grid;
	gap: var(--qisubs-space-4);
	padding: var(--qisubs-space-4);
	margin-block-start: var(--qisubs-space-5);
	background: var(--qisubs-surface-soft);
	border: 1px solid var(--qisubs-border);
	border-radius: var(--qisubs-radius-lg);
}

.viewing-info__heading {
	display: flex;
	align-items: center;
	gap: var(--qisubs-space-3);
}

.viewing-info__heading > span {
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	background: rgb(89 185 223 / 10%);
	color: var(--qisubs-accent-strong);
	border: 1px solid rgb(89 185 223 / 24%);
	border-radius: 50%;
	font-family: Georgia, serif;
	font-weight: 700;
}

.viewing-info__heading .section-heading__eyebrow {
	margin-block-end: 0.1rem;
}

.viewing-info__details {
	display: grid;
	gap: var(--qisubs-space-3);
	margin: 0;
}

.viewing-info__details > div {
	padding: var(--qisubs-space-3);
	background: var(--qisubs-surface);
	border: 1px solid var(--qisubs-border);
	border-radius: var(--qisubs-radius-sm);
}

.viewing-info__details dt {
	margin-block-end: 0.25rem;
	color: var(--qisubs-text-muted);
	font-size: 0.78rem;
	font-weight: 750;
}

.viewing-info__details dd {
	margin: 0;
	white-space: pre-line;
}

.series-episodes {
	padding-block-start: var(--qisubs-space-7);
}

.series-episodes__heading {
	margin-block-end: var(--qisubs-space-4);
}

.series-episodes__heading h2 {
	margin-block-end: 0.35rem;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
}

.series-episodes__heading p {
	color: var(--qisubs-text-muted);
}

.episode-overview__back {
	display: inline-flex;
	margin-block-end: var(--qisubs-space-4);
	color: var(--qisubs-text-muted);
	font-weight: 700;
	text-decoration: none;
}

.episode-overview__notes {
	max-inline-size: var(--qisubs-reading);
	padding: var(--qisubs-space-4);
	margin-block: var(--qisubs-space-4);
	background: var(--qisubs-surface-soft);
	border: 1px solid var(--qisubs-border);
	border-radius: var(--qisubs-radius-md);
}

.episode-overview__notes h2 {
	font-size: 1rem;
}

.episode-actions {
	margin-block-start: var(--qisubs-space-4);
}

.generic-grid {
	display: grid;
	gap: var(--qisubs-space-3);
}

.generic-card {
	padding: var(--qisubs-space-4);
	background: var(--qisubs-surface);
	border: 1px solid var(--qisubs-border);
	border-radius: var(--qisubs-radius-md);
}

.generic-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	margin: calc(var(--qisubs-space-4) * -1) calc(var(--qisubs-space-4) * -1) var(--qisubs-space-4);
	overflow: hidden;
	border-radius: var(--qisubs-radius-md) var(--qisubs-radius-md) 0 0;
}

.generic-card__media img,
.content-article__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.generic-card__excerpt {
	color: var(--qisubs-text-muted);
}

.generic-card__title a {
	color: var(--qisubs-text);
	text-decoration: none;
}

.generic-card__title,
.content-article__title {
	overflow-wrap: anywhere;
}

.generic-card__meta {
	color: var(--qisubs-text-muted);
	font-size: 0.8rem;
}

.content-article {
	max-inline-size: var(--qisubs-reading);
	margin-inline: auto;
}

.content-article__title {
	font-size: clamp(2rem, 5vw, 3.5rem);
}

.content-article__media {
	aspect-ratio: 16 / 9;
	margin-block: var(--qisubs-space-4);
	overflow: hidden;
	border-radius: var(--qisubs-radius-lg);
}

.not-found {
	max-inline-size: 38rem;
	margin-inline: auto;
	padding: var(--qisubs-space-6);
	background: var(--qisubs-surface);
	border: 1px solid var(--qisubs-border);
	border-radius: var(--qisubs-radius-lg);
	text-align: center;
}

.not-found p {
	color: var(--qisubs-text-muted);
}

.not-found .home-hero__actions {
	justify-content: center;
	margin-block: var(--qisubs-space-4);
}

.search-results__form {
	max-inline-size: 34rem;
	margin: var(--qisubs-space-4) auto 0;
}

.comments-area {
	padding-block-start: var(--qisubs-space-6);
	margin-block-start: var(--qisubs-space-6);
	border-block-start: 1px solid var(--qisubs-border);
}

.comments-title,
.comment-reply-title {
	font-size: 1.35rem;
}

.comment-list,
.comment-list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.comment-list .children {
	padding-inline-start: var(--qisubs-space-4);
}

.comment-body {
	padding: var(--qisubs-space-4);
	margin-block-end: var(--qisubs-space-3);
	background: var(--qisubs-surface);
	border: 1px solid var(--qisubs-border);
	border-radius: var(--qisubs-radius-md);
}

.comment-meta {
	color: var(--qisubs-text-muted);
	font-size: 0.82rem;
}

.comment-author {
	display: flex;
	align-items: center;
	gap: var(--qisubs-space-2);
}

.comment-author .avatar {
	border-radius: 50%;
}

.comment-form label {
	display: block;
	margin-block-end: 0.25rem;
	font-weight: 700;
}

.comment-form input:not([type="checkbox"]):not([type="submit"]),
.comment-form textarea {
	inline-size: 100%;
	padding: 0.75rem;
	background: var(--qisubs-surface-soft);
	color: var(--qisubs-text);
	border: 1px solid var(--qisubs-border-strong);
	border-radius: var(--qisubs-radius-sm);
}

.comment-form input[type="submit"] {
	padding: 0.7rem 1.1rem;
	background: var(--qisubs-accent);
	color: var(--qisubs-accent-ink);
	border: 0;
	border-radius: var(--qisubs-radius-sm);
	font-weight: 750;
	cursor: pointer;
}

@media (min-width: 48rem) {
	.home-hero { padding-block: var(--qisubs-space-7); }
	.home-hero__inner { grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr); }
	.home-about { grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr); align-items: center; }
	.series-overview { grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr); }
	.release-folder-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.viewing-info { grid-template-columns: minmax(15rem, 0.65fr) minmax(0, 1.35fr); align-items: center; }
	.viewing-info__details { grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1.65fr); }
	.episode-overview { grid-template-columns: minmax(20rem, 1.1fr) minmax(0, 0.9fr); }
	.generic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
	.home-section { padding-block: var(--qisubs-space-7); }
	.series-overview { grid-template-columns: 22rem minmax(0, 1fr); gap: var(--qisubs-space-7); }
	.episode-overview { gap: var(--qisubs-space-7); }
	.generic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 39.99rem) {
	.section-heading,
	.archive-heading,
	.series-releases__heading { align-items: start; flex-direction: column; }
	.home-hero__actions .qisubs-button,
	.episode-actions .qisubs-button { flex: 1 1 auto; }
	.home-community { padding: var(--qisubs-space-4); }
	.release-folder { align-items: flex-start; }
	.release-folder__meta { align-self: center; }
}

@media (max-width: 25rem) {
	.release-folder { align-items: stretch; flex-direction: column; gap: var(--qisubs-space-3); }
	.release-folder__meta { align-self: stretch; justify-content: space-between; }
}

@media (max-width: 22rem) {
	.episode-actions .qisubs-button { flex-basis: 100%; }
}