.postacie-page {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.postacie-page::before {
  position: absolute;
  z-index: -1;
  top: 12rem;
  right: -18rem;
  width: 38rem;
  height: 38rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(102, 199, 242, 0.08), transparent 68%);
  content: "";
  pointer-events: none;
}

.postacie-page .section {
  position: relative;
}

.postacie-hero {
  padding-top: var(--space-8);
}

.postacie-hero__panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(var(--space-6), 5vw, var(--space-9));
  align-items: center;
  min-height: 30rem;
  padding: clamp(var(--space-6), 5vw, var(--space-8));
  border-radius: var(--radius-2xl);
}

.postacie-hero__copy,
.postacie-hero__media,
.postacie-section-intro,
.postacie-scope__card,
.postacie-legend__heading,
.postacie-legend__intro,
.postacie-legend__item,
.postacie-filters__intro,
.postacie-filter-form__search,
.postacie-filter-form__film,
.postacie-filter-form__choices,
.postacie-featured__lead,
.postacie-featured__support,
.postacie-featured__small,
.postacie-category,
.postacie-profile-card,
.postacie-essay__copy,
.postacie-essay__space,
.postacie-path,
.postacie-context__copy {
  min-width: 0;
}

.postacie-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.postacie-hero__copy .eyebrow,
.postacie-hero__copy h1,
.postacie-hero__copy p,
.postacie-hero__copy a {
  margin: 0;
}

.postacie-hero__copy .lead {
  max-width: 35rem;
}

.postacie-hero__method {
  max-width: 39rem;
}

.postacie-hero__anchor,
.postacie-card-link,
.postacie-category span {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  font-weight: 600;
}

.postacie-hero__media {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--color-deep-ocean-900);
}

.postacie-hero__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 70% center;
  filter: saturate(0.82) brightness(0.82);
}

.postacie-hero__media figcaption {
  margin: 0;
  padding: var(--space-3) var(--space-4);
}

.postacie-section-intro {
  max-width: 42rem;
  margin-bottom: var(--space-6);
}

.postacie-section-intro--wide {
  max-width: 48rem;
}

.postacie-section-intro .eyebrow,
.postacie-section-intro h2,
.postacie-section-intro p {
  margin-top: 0;
}

.postacie-section-intro > :last-child {
  margin-bottom: 0;
}

.postacie-scope__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.postacie-scope__card {
  width: 100%;
  height: 100%;
}

.postacie-scope__card .card__body {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.postacie-scope__card .card__body > * {
  margin: 0;
}

.postacie-scope__label {
  color: var(--color-ice-blue);
  font-size: var(--font-size-label);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.postacie-legend__panel {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: var(--space-6) var(--space-7);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
}

.postacie-legend__heading h2,
.postacie-legend__heading .eyebrow,
.postacie-legend__intro {
  margin: 0;
}

.postacie-legend__intro {
  max-width: 42rem;
  align-self: end;
}

.postacie-legend__items {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 6fr);
  gap: var(--space-5);
}

.postacie-legend__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4);
  border-inline-start: 1px solid var(--color-border-glass);
}

.postacie-legend__item h3,
.postacie-legend__item p,
.postacie-legend__item .meta-list {
  margin: 0;
}

.postacie-filters__panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-6);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
}

.postacie-filters__intro {
  max-width: 39rem;
}

.postacie-filters__intro .eyebrow,
.postacie-filters__intro h2,
.postacie-filters__intro p {
  margin-top: 0;
}

.postacie-filters__intro > :last-child {
  margin-bottom: 0;
}

.postacie-filter-form {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: var(--space-5);
  align-items: start;
}

.postacie-filter-form__search,
.postacie-filter-form__film,
.postacie-filter-form__choices {
  width: 100%;
}

.postacie-filter-form__search-row {
  display: flex;
  gap: var(--space-3);
  align-items: end;
}

.postacie-filter-form__search-row input {
  min-width: 0;
  flex: 1 1 auto;
}

.postacie-filter-form__search-row button {
  flex: 0 0 auto;
}

.postacie-filter-form__search small {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

.postacie-filter-form__choices {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4);
}

.postacie-filter-form__choices legend {
  margin-bottom: var(--space-2);
}

.postacie-filter-form__category-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.postacie-filter-form__category-list label,
.postacie-filter-form__spoiler {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-md);
  background: rgba(9, 20, 41, 0.48);
  font-size: var(--font-size-meta);
  font-weight: 500;
}

.postacie-filter-form__category-list label:has(input:checked),
.postacie-filter-form__spoiler:has(input:checked) {
  border-color: rgba(102, 199, 242, 0.64);
  background: var(--color-glass-navy-strong);
  color: var(--color-text-primary);
}

.postacie-filter-status {
  max-width: 60rem;
  margin: 0;
  color: var(--color-text-secondary);
}

.postacie-featured__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-5);
  align-items: stretch;
}

.postacie-featured__lead {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  color: var(--color-text-primary);
  text-decoration: none;
}

.postacie-featured__lead-media {
  width: 100%;
  overflow: hidden;
  background: var(--color-deep-ocean-900);
}

.postacie-featured__lead-media img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.82);
}

.postacie-featured__lead-body,
.postacie-featured__small .card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.postacie-featured__lead-body {
  padding: var(--space-5);
}

.postacie-featured__lead-body > *,
.postacie-featured__small .card__body > * {
  margin: 0;
}

.postacie-featured__support {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  width: 100%;
}

.postacie-featured__small {
  display: flex;
  width: 100%;
  flex-direction: column;
  color: var(--color-text-primary);
  text-decoration: none;
}

.postacie-featured__small .card__body {
  flex: 1 1 auto;
}

.postacie-card-link {
  color: var(--color-ice-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.postacie-categories__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.postacie-category {
  display: flex;
  width: 100%;
  color: var(--color-text-primary);
  text-decoration: none;
}

.postacie-category .card__body {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.postacie-category .card__body > * {
  margin: 0;
}

.postacie-category .card__body > span {
  margin-top: auto;
  color: var(--color-ice-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.postacie-catalog__heading {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--space-6);
  align-items: end;
  margin-bottom: var(--space-6);
}

.postacie-catalog__heading > div,
.postacie-catalog__heading > p {
  min-width: 0;
}

.postacie-catalog__heading .eyebrow,
.postacie-catalog__heading h2,
.postacie-catalog__heading p {
  margin: 0;
}

.postacie-catalog__heading p {
  max-width: 42rem;
}

.postacie-catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.postacie-profile-card {
  display: flex;
  width: 100%;
  flex-direction: column;
  color: var(--color-text-primary);
  text-decoration: none;
}

.postacie-profile-card__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-deep-ocean-900);
  background-position: center;
  background-size: cover;
  filter: saturate(0.78) brightness(0.78);
}

.postacie-profile-card__media--one { background-image: linear-gradient(135deg, rgba(5, 11, 24, 0.15), rgba(102, 199, 242, 0.14)), url('/public/media/profile-featured-character.webp'); }
.postacie-profile-card__media--two { background-image: linear-gradient(135deg, rgba(5, 11, 24, 0.2), rgba(139, 124, 255, 0.14)), url('/public/media/profile-rival-character.webp'); }
.postacie-profile-card__media--three { background-image: linear-gradient(135deg, rgba(5, 11, 24, 0.16), rgba(102, 199, 242, 0.12)), url('/public/media/profile-observer-character.webp'); }
.postacie-profile-card__media--four { background-image: linear-gradient(135deg, rgba(5, 11, 24, 0.12), rgba(139, 124, 255, 0.14)), url('/public/media/profiles-hero-tense-table.webp'); }
.postacie-profile-card__media--five { background-image: linear-gradient(135deg, rgba(5, 11, 24, 0.18), rgba(102, 199, 242, 0.12)), url('/public/media/profile-rival-character.webp'); }
.postacie-profile-card__media--six { background-image: linear-gradient(135deg, rgba(5, 11, 24, 0.18), rgba(139, 124, 255, 0.13)), url('/public/media/profile-observer-character.webp'); }

.postacie-profile-card .card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.postacie-profile-card .card__body > * {
  margin: 0;
}

.postacie-profile-card__film {
  color: var(--color-signal-lilac);
  font-size: var(--font-size-meta);
  font-weight: 600;
}

.postacie-catalog__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.postacie-catalog__more p {
  min-height: 1.625rem;
  margin: 0;
  text-align: center;
}

.postacie-catalog__empty {
  max-width: 48rem;
  margin-bottom: var(--space-5);
  padding: var(--space-6);
}

.postacie-catalog__empty h3,
.postacie-catalog__empty p {
  margin-top: 0;
}

.postacie-catalog__empty > :last-child {
  margin-bottom: 0;
}

.postacie-essay__layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 8fr) minmax(0, 2fr);
}

.postacie-essay__copy {
  display: flex;
  grid-column: 2;
  max-width: 45rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding-inline-start: var(--space-5);
  border-inline-start: 1px solid rgba(102, 199, 242, 0.5);
}

.postacie-essay__copy > * {
  margin: 0;
}

.postacie-essay__module {
  width: 100%;
}

.postacie-essay__module h3,
.postacie-essay__module p {
  margin-top: 0;
}

.postacie-essay__module > :last-child {
  margin-bottom: 0;
}

.postacie-paths__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.postacie-path {
  width: 100%;
}

.postacie-path .card__body {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.postacie-path .card__body > * {
  margin: 0;
}

.postacie-path__links {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.postacie-path__links a,
.postacie-path .card__body > a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
}

.postacie-context__panel {
  padding: clamp(var(--space-5), 4vw, var(--space-7));
}

.postacie-context__copy {
  display: flex;
  max-width: 47.5rem;
  margin-inline: auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.postacie-context__copy > * {
  margin: 0;
}

.postacie-context__copy a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .postacie-featured__lead:hover,
  .postacie-featured__small:hover,
  .postacie-category:hover,
  .postacie-profile-card:hover {
    border-color: rgba(102, 199, 242, 0.44);
  }

  .postacie-featured__lead:hover .postacie-featured__lead-media img {
    transform: scale(1.015);
  }
}

.postacie-featured__lead-media img {
  transition: transform var(--transition-base);
}

@media (max-width: 61.24rem) {
  .postacie-hero__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    min-height: 0;
  }

  .postacie-hero__copy .lead,
  .postacie-hero__method {
    max-width: 42rem;
  }

  .postacie-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .postacie-filter-form__search {
    grid-column: 1 / -1;
  }

  .postacie-filter-form__choices {
    grid-column: 1 / -1;
  }

  .postacie-featured__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .postacie-featured__lead {
    grid-template-columns: minmax(0, 1fr);
  }

  .postacie-featured__lead-media img {
    height: auto;
    aspect-ratio: 16 / 9;
  }

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

@media (max-width: 57.49rem) {
  .postacie-scope__grid,
  .postacie-catalog__grid,
  .postacie-paths__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .postacie-scope__card:nth-child(3),
  .postacie-path:nth-child(3) {
    grid-column: 1 / -1;
  }

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

  .postacie-legend__panel {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .postacie-legend__item--wide {
    grid-column: 1 / -1;
  }

  .postacie-catalog__heading {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}

@media (max-width: 47.49rem) {
  .postacie-hero {
    padding-top: var(--space-6);
  }

  .postacie-hero__panel {
    padding: var(--space-5);
  }

  .postacie-hero__copy {
    gap: var(--space-4);
  }

  .postacie-hero__copy .display-title {
    font-size: clamp(2.25rem, 10vw, 3rem);
  }

  .postacie-scope__grid,
  .postacie-categories__grid,
  .postacie-catalog__grid,
  .postacie-paths__grid,
  .postacie-featured__support,
  .postacie-legend__items,
  .postacie-filter-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .postacie-scope__card:nth-child(3),
  .postacie-path:nth-child(3),
  .postacie-legend__item--wide {
    grid-column: auto;
  }

  .postacie-legend__panel,
  .postacie-filters__panel {
    padding: var(--space-5);
  }

  .postacie-legend__item {
    padding: var(--space-4) 0;
    border-inline-start: 0;
    border-top: 1px solid var(--color-border-glass);
  }

  .postacie-filter-form__search-row {
    flex-direction: column;
    align-items: stretch;
  }

  .postacie-filter-form__search-row button {
    width: 100%;
  }

  .postacie-filter-form__film,
  .postacie-filter-form__choices,
  .postacie-filter-form__search {
    grid-column: auto;
  }

  .postacie-filter-form__category-list {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .postacie-filter-form__category-list label,
  .postacie-filter-form__spoiler {
    width: 100%;
  }

  .postacie-featured__lead-body {
    padding: var(--space-4);
  }

  .postacie-essay__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .postacie-essay__copy {
    grid-column: auto;
    max-width: none;
    padding-inline-start: 0;
    padding-top: var(--space-5);
    border-inline-start: 0;
    border-top: 1px solid rgba(102, 199, 242, 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .postacie-featured__lead-media img {
    transition: none;
  }
}