.h4f-comics {
  --comics-text: #f7f2ff;
  --comics-muted: #cfc5db;
  --comics-accent: #ffdb84;
  --comics-border: #ffffff18;
  margin-block: 1.5rem 2rem;
  padding: clamp(.75rem, 1.6vw, 1.5rem);
  border: 1px solid var(--comics-border);
  border-radius: 1.5rem;
  background: #13121d;
  color: var(--comics-text);
}
.h4f-comics .h4f-comics__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1rem; margin-bottom: 1rem; }
.h4f-comics .h4f-comics__header h2, .h4f-comics > h2, .h4f-comics > h2 a { margin: 0; color: var(--comics-text); }
.h4f-comics > h2 { margin-bottom: 1rem; }
.h4f-comics__filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.h4f-comics__grid + .h4f-comics__filters { justify-content: center; margin-top: 1.2rem; }
.h4f-comics .h4f-comics__filters a { display: inline-flex; padding: .55rem .9rem; border: 1px solid var(--comics-border); border-radius: 999px; color: var(--comics-text); background: #ffffff0b; font-size: .9rem; font-weight: 700; }
.h4f-comics .h4f-comics__filters a:is([aria-current], :hover, :focus-visible) { color: var(--comics-accent); border-color: #ffdb8461; background: #ffdb8419; }
.h4f-comics .h4f-comics__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.55rem, 1vw, 1rem); }
.h4f-comics .h4f-genre-card { min-width: 0; }
.h4f-comics .h4f-genre-card__cover { aspect-ratio: 2 / 3; }
.h4f-comics .h4f-genre-card__badge { background: linear-gradient(115deg, #b63920, #a95119); color: #fff; }
.h4f-comics .h4f-genre-card__title a, .h4f-comics .h4f-comics__card h3 { color: var(--comics-text); }
.h4f-comics .h4f-genre-card__meta, .h4f-comics .h4f-genre-card__terms a { color: var(--comics-muted); }
.h4f-comics .h4f-genre-card__read, .h4f-comics .h4f-comics__read { color: var(--comics-accent); background: #d4893528; }
.h4f-comics__card { min-width: 0; overflow: hidden; border-radius: 1rem; border: 1px solid var(--comics-border); background: #191726; display: flex; flex-direction: column; }
.h4f-comics__cover { aspect-ratio: 2 / 3; background: #252238; overflow: hidden; }
.h4f-comics__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h4f-comics__card h3 { margin: 0; padding: .7rem .75rem; line-height: 1.35; font-size: .9rem; overflow-wrap: anywhere; }
.h4f-comics .h4f-comics__read { display: flex; justify-content: space-between; gap: .4rem; margin: auto .65rem .65rem; padding: .55rem; border-radius: .55rem; font-size: .8rem; font-weight: 700; }
@media (max-width: 1200px) { .h4f-comics .h4f-comics__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .h4f-comics .h4f-comics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.h4f-comics-page {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  padding-inline: clamp(.65rem, 1.55vw, 1.5rem);
  padding-block: 1.25rem 0;
}
.h4f-comics-page .h4f-comics-page__title {
  margin: 0 0 .8rem;
  color: #f7f2ff;
  font-size: clamp(1.6rem, 2.7vw, 2.35rem);
}
.h4f-comics--archive {
  width: 100%;
  box-sizing: border-box;
  margin-top: 0;
}
.h4f-comics--archive .h4f-comics__parodies a {
  flex: 0 0 auto;
  padding: .32rem .75rem;
  line-height: 1.25;
  font-size: .82rem;
  white-space: nowrap;
}
.h4f-comics--archive .h4f-comics__parodies a[aria-current] {
  box-shadow: inset 0 0 0 1px #ffdb8424;
}
@media (max-width: 700px) {
  .h4f-comics-page { padding-inline: .5rem; }
  .h4f-comics--archive { padding: .65rem; }
  .h4f-comics--archive .h4f-comics__header { display: block; }
  .h4f-comics--archive .h4f-comics__header h2 { margin-bottom: .6rem; }
  .h4f-comics--archive .h4f-comics__parodies {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: .15rem .1rem .35rem;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }
  .h4f-comics--archive .h4f-comics__parodies a { scroll-snap-align: start; }
}