.postacie-page {
  background: var(--color-night-navy);
  overflow: clip;
}

.postacie-page .eyebrow {
  width: fit-content;
}

.postacie-hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem);
  overflow: clip;
  background: var(--color-night-navy);
}

.postacie-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}

.postacie-hero__copy,
.postacie-hero__visual,
.postacie-rules__intro,
.postacie-gallery__intro,
.postacie-gallery__controls,
.postacie-unlock__intro,
.postacie-cards__copy,
.postacie-cards__visual,
.postacie-route__intro,
.postacie-context__intro,
.postacie-notes__content,
.postacie-faq__intro,
.postacie-next__content {
  min-width: 0;
}

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

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

.postacie-hero__copy h1 {
  font-size: clamp(2.25rem, 5.3vw, 4rem);
  line-height: 1.04;
}

.postacie-hero__lead {
  max-width: 34rem;
  font-size: var(--font-size-18);
  line-height: 1.5;
}

.postacie-hero__cta {
  min-height: 2.75rem;
  gap: var(--space-2);
}

.postacie-hero__note {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--space-3);
  max-width: 35rem;
  color: var(--color-muted-blue);
  font-size: var(--font-size-14);
  line-height: 1.5;
}

.postacie-hero__note span {
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border: 1px solid var(--color-pixel-turquoise);
  border-radius: var(--radius-pixel);
  color: var(--color-pixel-turquoise);
  font-family: var(--font-heading);
  font-weight: 800;
}

.postacie-hero__visual {
  position: relative;
  width: 100%;
  min-height: 15rem;
  overflow: hidden;
  border: var(--border-dark);
  border-radius: var(--radius-panel);
  background: var(--color-deep-navy);
  box-shadow: var(--shadow-block);
}

.postacie-hero__visual::after {
  position: absolute;
  inset: auto 8% 10% auto;
  width: 1rem;
  height: 1rem;
  background: var(--color-neon-lime);
  box-shadow: 1.25rem -1.5rem 0 var(--color-pixel-turquoise), -2rem -2.5rem 0 var(--color-coral-orange);
  content: "";
}

.postacie-hero__visual img {
  width: 100%;
  height: 100%;
  min-height: 15rem;
  object-fit: cover;
  object-position: 70% center;
}

.postacie-rules__intro,
.postacie-unlock__intro,
.postacie-route__intro,
.postacie-context__intro,
.postacie-faq__intro {
  max-width: 43.75rem;
}

.postacie-rules__grid,
.postacie-unlock__grid,
.postacie-route__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.postacie-rule-card,
.postacie-step-card,
.postacie-route-card,
.postacie-context-card {
  min-width: 0;
}

.postacie-rule-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-dark);
  border-radius: var(--radius-card);
  background: var(--color-ink-blue);
}

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

.postacie-rule-card__number {
  color: var(--color-neon-lime);
  font-family: var(--font-heading);
  font-size: var(--font-size-32);
  font-weight: 800;
  line-height: 1;
}

.postacie-rule-card--turquoise .postacie-rule-card__number { color: var(--color-pixel-turquoise); }
.postacie-rule-card--coral .postacie-rule-card__number { color: var(--color-coral-orange); }

.postacie-rule-card .tag {
  vertical-align: middle;
}

.postacie-gallery {
  position: relative;
  background: var(--color-night-navy);
}

.postacie-gallery__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: end;
}

.postacie-gallery__intro {
  max-width: 38.75rem;
}

.postacie-gallery__controls {
  width: 100%;
}

.postacie-filter {
  margin: 0;
  padding: 0;
  border: 0;
}

.postacie-filter legend {
  margin-bottom: var(--space-2);
  padding: 0;
  color: var(--color-muted-blue);
  font-size: var(--font-size-14);
}

.postacie-filter__buttons {
  display: flex;
  width: 100%;
  min-width: 0;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scrollbar-color: var(--color-pixel-line) transparent;
}

.postacie-filter__button {
  flex: 0 0 auto;
  min-height: 2.75rem;
  border-color: var(--color-pixel-line);
  background: var(--color-ink-blue);
  color: var(--color-paper-light);
  letter-spacing: 0.04em;
}

.postacie-filter__button:hover,
.postacie-filter__button.is-active {
  border-color: var(--color-neon-lime);
  background: var(--color-neon-lime);
  color: var(--color-night-navy);
}

.postacie-gallery__count {
  margin: var(--space-3) 0 0;
  color: var(--color-muted-blue);
  font-size: var(--font-size-14);
}

.postacie-gallery__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.postacie-character-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: var(--border-dark);
  border-radius: var(--radius-card);
  background: var(--color-ink-blue);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}

.postacie-character-card:hover {
  box-shadow: var(--shadow-block);
  transform: translateY(-2px);
}

.postacie-character-card[hidden] {
  display: none;
}

.postacie-character-card__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: var(--border-dark);
  background: var(--color-deep-navy);
}

.postacie-character-card__media img {
  width: 400%;
  max-width: none;
  height: 200%;
  object-fit: cover;
}

.postacie-character-card__media--one img { transform: translate(0, 0); }
.postacie-character-card__media--two img { transform: translate(-25%, 0); }
.postacie-character-card__media--three img { transform: translate(-50%, 0); }
.postacie-character-card__media--four img { transform: translate(-75%, 0); }
.postacie-character-card__media--five img { transform: translate(0, -50%); }
.postacie-character-card__media--six img { transform: translate(-25%, -50%); }
.postacie-character-card__media--seven img { transform: translate(-50%, -50%); }
.postacie-character-card__media--eight img { transform: translate(-75%, -50%); }

.postacie-character-card__body {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
}

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

.postacie-character-card__body h3 {
  font-size: var(--font-size-24);
}

.postacie-character-card__body a {
  margin-top: auto;
  font-weight: 700;
}

.postacie-gallery__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: var(--border-dark);
  border-radius: var(--radius-card);
  background: var(--color-ink-blue);
}

.postacie-gallery__empty p { margin: 0; }

.postacie-step-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-dark);
  border-top-width: 4px;
  border-radius: var(--radius-card);
  background: var(--color-ink-blue);
}

.postacie-step-card > * { margin: 0; }
.postacie-step-card--turquoise { border-top-color: var(--color-pixel-turquoise); }
.postacie-step-card--lime { border-top-color: var(--color-neon-lime); }
.postacie-step-card--coral { border-top-color: var(--color-coral-orange); }

.postacie-cards__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-5);
  border: var(--border-light);
  border-radius: var(--radius-panel);
  background: var(--color-paper-light);
  color: var(--color-night-navy);
}

.postacie-cards__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 32.5rem;
}

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

.postacie-cards__visual {
  width: 100%;
  overflow: hidden;
  border: var(--border-light);
  border-radius: var(--radius-control);
  background: var(--color-deep-navy);
}

.postacie-cards__visual img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: right center;
}

.postacie-cards__tips {
  display: grid;
  grid-column: 1;
  gap: var(--space-4);
  max-width: 43.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.postacie-cards__tips li {
  position: relative;
  min-width: 0;
  padding-left: var(--space-5);
}

.postacie-cards__tips li::before {
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--color-pixel-turquoise);
  content: "";
}

.postacie-cards__tips li:nth-child(2)::before { background: var(--color-neon-lime); }
.postacie-cards__tips li:nth-child(3)::before { background: var(--color-coral-orange); }

.postacie-route__grid {
  position: relative;
}

.postacie-route-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border-left: 4px solid var(--color-pixel-turquoise);
  background: var(--color-deep-navy);
}

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

.postacie-route-card:nth-child(2) { border-left-color: var(--color-neon-lime); }
.postacie-route-card:nth-child(3) { border-left-color: var(--color-lavender-purple); }

.postacie-route-card__marker {
  color: var(--color-pixel-turquoise);
  font-family: var(--font-heading);
  font-weight: 800;
}

.postacie-context__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.postacie-context-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-height: 100%;
  padding: var(--space-5);
  border: var(--border-dark);
  border-radius: var(--radius-card);
  background: var(--color-ink-blue);
}

.postacie-context-card > * { margin: 0; }
.postacie-context-card--challenge { border-top: 4px solid var(--color-coral-orange); }
.postacie-context-card--multi { border-top: 4px solid var(--color-lavender-purple); }
.postacie-context-card a { margin-top: auto; font-weight: 700; }

.postacie-notes__layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.postacie-notes__content {
  position: relative;
  z-index: 1;
  max-width: 40rem;
}

.postacie-notes__lead { max-width: 40rem; }

.postacie-checklist {
  display: grid;
  gap: var(--space-5);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.postacie-checklist > li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-4);
  min-width: 0;
  padding-bottom: var(--space-5);
  border-bottom: var(--border-dark);
}

.postacie-checklist > li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.postacie-checklist h3 { margin-bottom: var(--space-2); }
.postacie-checklist p { max-width: 37.5rem; margin-bottom: 0; }

.postacie-checklist__number {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid var(--color-neon-lime);
  border-radius: var(--radius-pixel);
  color: var(--color-neon-lime);
  font-family: var(--font-heading);
  font-weight: 800;
}

.postacie-checklist__number--coral { border-color: var(--color-coral-orange); color: var(--color-coral-orange); }
.postacie-checklist__number--turquoise { border-color: var(--color-pixel-turquoise); color: var(--color-pixel-turquoise); }

.postacie-notes__decoration {
  display: none;
}

.postacie-faq__list {
  display: grid;
  gap: var(--space-3);
  max-width: 51.25rem;
  margin-top: var(--space-6);
}

.postacie-faq__list details {
  min-width: 0;
  border: var(--border-dark);
  border-radius: var(--radius-control);
  background: var(--color-ink-blue);
}

.postacie-faq__list summary {
  display: flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  color: var(--color-paper-light);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  list-style: none;
}

.postacie-faq__list summary::-webkit-details-marker { display: none; }
.postacie-faq__list summary::after { color: var(--color-neon-lime); content: "+"; font-size: 1.5rem; line-height: 1; }
.postacie-faq__list details[open] summary::after { content: "−"; }
.postacie-faq__list details[open] summary { border-bottom: var(--border-dark); }

.postacie-faq__answer {
  padding: 0 var(--space-4) var(--space-5);
}

.postacie-faq__answer p { margin: var(--space-4) 0 0; }

.postacie-next {
  padding-top: var(--space-7);
}

.postacie-next__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  overflow: hidden;
  padding: var(--space-6);
  border: var(--border-dark);
  border-radius: var(--radius-panel);
  background: var(--color-deep-navy);
}

.postacie-next__content {
  display: flex;
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  max-width: 35rem;
}

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

.postacie-next__links {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

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

.postacie-next__goal {
  display: none;
}

@media (min-width: 43.75rem) {
  .postacie-hero__visual { min-height: 18rem; }
  .postacie-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .postacie-context__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .postacie-next__links { flex-direction: row; flex-wrap: wrap; }
  .postacie-next__links a + a { padding-left: var(--space-4); border-left: var(--border-dark); }
}

@media (min-width: 48rem) {
  .postacie-hero__grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .postacie-hero__copy { grid-column: span 4; }
  .postacie-hero__visual { grid-column: span 4; min-height: 24rem; }

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

  .postacie-rules__grid > :nth-child(3),
  .postacie-unlock__grid > :nth-child(3),
  .postacie-route__grid > :nth-child(3) {
    grid-column: span 1;
  }

  .postacie-gallery__top {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .postacie-gallery__intro { grid-column: span 8; }
  .postacie-gallery__controls { grid-column: span 8; }

  .postacie-cards__panel {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    padding: var(--space-6);
  }

  .postacie-cards__copy { grid-column: span 5; }
  .postacie-cards__visual { grid-column: span 3; }
  .postacie-cards__tips { grid-column: span 8; }

  .postacie-notes__layout { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .postacie-notes__content { grid-column: span 8; }
  .postacie-next__panel { padding: var(--space-7); }
}

@media (min-width: 56.25rem) {
  .postacie-rules__grid,
  .postacie-unlock__grid,
  .postacie-route__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .postacie-context__intro { max-width: 50rem; }
}

@media (min-width: 61.25rem) {
  .postacie-hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-5);
    min-height: 35rem;
  }

  .postacie-hero__copy { grid-column: span 5; }
  .postacie-hero__visual { grid-column: 7 / span 6; min-height: 35rem; }

  .postacie-gallery__top { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); }
  .postacie-gallery__intro { grid-column: span 7; }
  .postacie-gallery__controls { grid-column: span 5; }
  .postacie-gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }

  .postacie-cards__panel { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .postacie-cards__copy { grid-column: span 6; }
  .postacie-cards__visual { grid-column: 9 / span 4; }
  .postacie-cards__tips { grid-column: span 7; }

  .postacie-notes__layout { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .postacie-notes__content { grid-column: span 7; }
  .postacie-notes__decoration {
    display: grid;
    grid-column: 9 / span 4;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 5rem);
    align-self: center;
    gap: var(--space-3);
    min-width: 0;
    opacity: 0.85;
  }

  .postacie-notes__decoration span {
    min-width: 0;
    border: var(--border-dark);
    background: var(--color-ink-blue);
  }

  .postacie-notes__decoration span:nth-child(1) { background: var(--color-pixel-turquoise); }
  .postacie-notes__decoration span:nth-child(2) { background: var(--color-lavender-purple); transform: translateY(1rem); }
  .postacie-notes__decoration span:nth-child(3) { background: var(--color-neon-lime); transform: translateX(1rem); }
  .postacie-notes__decoration span:nth-child(4) { background: var(--color-coral-orange); }

  .postacie-next__panel { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .postacie-next__content { grid-column: span 6; }
  .postacie-next__goal {
    display: block;
    position: relative;
    grid-column: 8 / span 5;
    min-width: 0;
    min-height: 15rem;
  }

  .postacie-next__goal::before,
  .postacie-next__goal::after,
  .postacie-next__goal span,
  .postacie-next__goal i,
  .postacie-next__goal b {
    position: absolute;
    display: block;
    content: "";
  }

  .postacie-next__goal::before { right: 10%; bottom: 20%; width: 60%; height: 2rem; background: var(--color-ink-blue); transform: skewY(-18deg); }
  .postacie-next__goal::after { right: 5%; bottom: 35%; width: 2rem; height: 2rem; background: var(--color-neon-lime); box-shadow: 0 0 0 0.5rem var(--color-night-navy), 0 0 0 0.7rem var(--color-neon-lime); }
  .postacie-next__goal span { right: 40%; bottom: 47%; width: 1rem; height: 1rem; background: var(--color-pixel-turquoise); }
  .postacie-next__goal i { right: 62%; bottom: 28%; width: 1.5rem; height: 1.5rem; background: var(--color-coral-orange); }
  .postacie-next__goal b { right: 22%; bottom: 62%; width: 1rem; height: 1rem; background: var(--color-lavender-purple); }
}

@media (max-width: 29.99rem) {
  .postacie-hero__visual { min-height: 15rem; }
  .postacie-hero__visual img { min-height: 15rem; }
  .postacie-next__panel { padding: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .postacie-character-card { transition: none; }
  .postacie-character-card:hover { transform: none; }
}