.postacie-page {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 10%, rgb(78 217 232 / 7%), transparent 22rem),
    radial-gradient(circle at 16% 42%, rgb(56 35 68 / 20%), transparent 28rem),
    var(--color-cosmic-indigo);
}

.postacie-page::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .08;
  background-image: radial-gradient(var(--color-ivory-glow) .7px, transparent .8px);
  background-size: 42px 42px;
  content: "";
}

.postacie-page > section { position: relative; z-index: 1; }

.postacie-hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(4rem, 9vw, 8rem); }
.postacie-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.postacie-hero__copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.postacie-hero__copy > * { margin: 0; }
.postacie-breadcrumbs { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); letter-spacing: .04em; }
.postacie-breadcrumbs a { color: var(--color-text-muted); }
.postacie-breadcrumbs span[aria-hidden="true"] { color: var(--color-star-gold); }
.postacie-hero h1 { max-width: 21ch; font-size: clamp(3.1rem, 5.7vw, 5.5rem); }
.postacie-hero__lead { max-width: 60ch; color: var(--color-text-muted); font-size: var(--text-lead); line-height: 1.5; }
.postacie-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.postacie-hero__actions > * { min-width: 0; }
.postacie-hero__media { width: 100%; min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.postacie-hero__media img { width: 100%; height: clamp(28rem, 49vw, 40.5rem); object-fit: cover; object-position: 72% center; }

.postacie-reading__layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-7); align-items: start; }
.postacie-reading__intro { min-width: 0; }
.postacie-reading__intro p { max-width: 58ch; }
.postacie-reading__stations { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); min-width: 0; }
.postacie-reading__stations::before { position: absolute; top: 1.7rem; right: 2rem; left: 2rem; height: 1px; background: linear-gradient(90deg, var(--color-comet-cyan), var(--color-border), var(--color-nebula-magenta)); content: ""; }
.postacie-reading-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--surface-glass); box-shadow: var(--shadow-soft); backdrop-filter: blur(14px); }
.postacie-reading-card > * { margin: 0; }
.postacie-reading-card p { max-width: 46ch; }
.postacie-number { position: relative; z-index: 1; display: grid; width: 2.4rem; aspect-ratio: 1; place-items: center; border: 1px solid var(--color-star-gold); border-radius: 50%; background: var(--color-cosmic-indigo); color: var(--color-star-gold); font-size: var(--text-xs); font-weight: 700; }
.postacie-reading-card__note { padding-left: var(--space-3); border-left: 2px solid var(--color-nebula-magenta); color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--line-sm); }

.postacie-roles__header { max-width: 62ch; }
.postacie-roles__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.postacie-role-card { min-width: 0; min-height: 100%; padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: linear-gradient(135deg, rgb(27 33 69 / 88%), rgb(10 13 28 / 88%)); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.postacie-role-card:hover { border-color: rgb(78 217 232 / 62%); box-shadow: 0 18px 50px rgb(0 0 0 / 28%), inset 0 1px 0 rgb(78 217 232 / 34%); }
.postacie-role-card__label { display: block; margin-bottom: var(--space-4); color: var(--color-starlight-silver); font-size: var(--text-xs); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.postacie-role-card p { max-width: 34ch; }

.postacie-path { background: linear-gradient(90deg, transparent, rgb(56 35 68 / 20%), transparent); }
.postacie-path__layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.postacie-path__context, .postacie-path__blocks { min-width: 0; }
.postacie-path__context h2 { max-width: 20ch; }
.postacie-path__context .lead { max-width: 48ch; }
.postacie-path__blocks { position: relative; display: flex; flex-direction: column; gap: var(--space-5); padding-left: var(--space-6); }
.postacie-path__blocks::before { position: absolute; top: .5rem; bottom: .5rem; left: .2rem; width: 1px; background: var(--color-nebula-magenta); content: ""; }
.postacie-path-block { position: relative; min-width: 0; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: rgb(27 33 69 / 70%); }
.postacie-path-block::before { position: absolute; top: 1.8rem; left: calc(-1 * var(--space-6) - .22rem); width: .75rem; aspect-ratio: 1; border: 1px solid var(--color-comet-cyan); border-radius: 50%; background: var(--color-cosmic-indigo); content: ""; }
.postacie-path-block p { max-width: 52ch; }

.postacie-mechanics { text-align: center; }
.postacie-mechanics__header { max-width: 60ch; margin: 0 auto var(--space-7); }
.postacie-mechanics__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); text-align: left; }
.postacie-mechanic-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-polished-obsidian); box-shadow: var(--shadow-soft); }
.postacie-mechanic-card > * { margin: 0; }
.postacie-mechanic-card p { max-width: 42ch; }
.postacie-diagram { position: relative; width: 100%; height: 4.5rem; overflow: hidden; border-bottom: 1px solid var(--color-border); }
.postacie-diagram::before, .postacie-diagram::after, .postacie-diagram span { position: absolute; border: 1px solid var(--color-comet-cyan); border-radius: 50%; content: ""; }
.postacie-diagram::before { width: 4rem; aspect-ratio: 1; top: .45rem; left: 15%; }
.postacie-diagram::after { width: 2.35rem; aspect-ratio: 1; top: 1.25rem; right: 17%; border-color: var(--color-star-gold); }
.postacie-diagram span { width: .55rem; aspect-ratio: 1; top: .4rem; left: 50%; border: 0; background: var(--color-nebula-magenta); box-shadow: 0 0 1rem var(--color-nebula-magenta); }
.postacie-diagram--break::before { border-style: dashed; transform: rotate(18deg); }
.postacie-diagram--follow::after { border-width: 2px; }
.postacie-diagram--dot span { top: 2rem; left: 26%; box-shadow: 2.5rem -1.1rem 0 var(--color-nebula-magenta), 5rem .3rem 0 var(--color-nebula-magenta); }

.postacie-route__header { max-width: 52ch; }
.postacie-route__map { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) clamp(3rem, 10vw, 10rem); margin-top: var(--space-7); padding: var(--space-5) 8%; }
.postacie-route__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(var(--color-comet-cyan), var(--color-starlight-silver), var(--color-nebula-magenta)); transform: translateX(-50%); transform-origin: top; }
.postacie-route-stop { position: relative; min-width: 0; max-width: 42ch; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: rgb(10 13 28 / 78%); }
.postacie-route-stop > span { position: absolute; top: 1.5rem; display: grid; width: 2rem; aspect-ratio: 1; place-items: center; border: 1px solid var(--color-comet-cyan); border-radius: 50%; background: var(--color-cosmic-indigo); color: var(--color-comet-cyan); font-size: var(--text-xs); font-weight: 700; }
.postacie-route-stop--one, .postacie-route-stop--three { justify-self: end; }
.postacie-route-stop--two, .postacie-route-stop--four { justify-self: start; }
.postacie-route-stop--one > span, .postacie-route-stop--three > span { right: calc(-1 * clamp(3rem, 5vw, 5rem)); }
.postacie-route-stop--two > span, .postacie-route-stop--four > span { left: calc(-1 * clamp(3rem, 5vw, 5rem)); }
.postacie-route__aside { width: min(100%, 56ch); margin: var(--space-7) auto 0; padding: var(--space-5); border-left: 2px solid var(--color-star-gold); background: rgb(27 33 69 / 68%); }
.postacie-route__aside > :last-child { margin-bottom: 0; }

.postacie-universe__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.postacie-universe__copy, .postacie-universe__media { min-width: 0; }
.postacie-universe__copy .lead, .postacie-universe__copy > p:not(.lead) { max-width: 54ch; }
.postacie-universe__media { margin: 0; }
.postacie-universe__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 72% center; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); }
.postacie-universe__media figcaption { max-width: 46ch; }
.postacie-universe__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-7); }
.postacie-universe-link { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--surface-glass); text-decoration: none; }
.postacie-universe-link > * { margin: 0; }
.postacie-universe-link span, .postacie-universe-link strong { color: var(--color-comet-cyan); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; }
.postacie-universe-link p { max-width: 36ch; color: var(--color-text-muted); }

.postacie-legend h2 { max-width: 28ch; }
.postacie-legend__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.postacie-legend-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: rgb(10 13 28 / 78%); }
.postacie-legend-card > * { margin: 0; }
.postacie-legend-card p { max-width: 54ch; }
.postacie-legend-card--editorial .technical-label::before { background: var(--color-comet-cyan); }
.postacie-legend__statement { width: min(100%, 62ch); margin: var(--space-6) auto 0; padding: var(--space-4) 0 var(--space-4) var(--space-5); border-left: 2px solid var(--color-nebula-magenta); color: var(--color-text-muted); }

.postacie-next__header { max-width: 32ch; }
.postacie-next__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.postacie-next-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border-top: 2px solid var(--color-comet-cyan); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); border-left: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-polished-obsidian); text-decoration: none; }
.postacie-next-card > * { margin: 0; }
.postacie-next-card span { color: var(--color-starlight-silver); font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.postacie-next-card p { max-width: 34ch; color: var(--color-text-muted); }
.postacie-next__cta { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-5); margin-top: var(--space-6); padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: linear-gradient(110deg, var(--color-deep-nebula), rgb(56 35 68 / 54%)); }
.postacie-next__cta > * { min-width: 0; }
.postacie-next__cta h3, .postacie-next__cta p { margin: 0; }
.postacie-next__cta p { max-width: 52ch; color: var(--color-text-muted); }
.postacie-next__cta .button { flex: 0 0 auto; }

.postacie-note { padding: 0 0 clamp(4rem, 8vw, 8rem); }
.postacie-note__panel { width: min(100%, 51.7rem); margin: 0 auto; padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-polished-obsidian); }
.postacie-note__panel h2 { max-width: 30ch; }
.postacie-note__panel p { max-width: 68ch; margin-bottom: 0; }

@media (max-width: 1050px) {
  .postacie-reading__layout, .postacie-path__layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .postacie-reading__intro { max-width: 58ch; }
  .postacie-hero__grid { grid-template-columns: 1fr; }
  .postacie-hero__media img { height: auto; aspect-ratio: 16 / 9; }
}

@media (max-width: 1000px) {
  .postacie-universe__top { grid-template-columns: 1fr; }
  .postacie-universe__copy { max-width: 54ch; }
  .postacie-path__context h2 { max-width: 26ch; }
}

@media (max-width: 960px) {
  .postacie-mechanics__grid { grid-template-columns: 1fr; }
  .postacie-mechanic-card { width: 100%; }
  .postacie-mechanic-card p { max-width: 60ch; }
}

@media (max-width: 900px) {
  .postacie-roles__grid, .postacie-next__grid { grid-template-columns: 1fr; }
  .postacie-role-card p, .postacie-next-card p { max-width: 60ch; }
  .postacie-route__map { grid-template-columns: 1fr; gap: var(--space-5); padding: 0 0 0 var(--space-7); }
  .postacie-route__line { left: .7rem; transform: none; }
  .postacie-route-stop, .postacie-route-stop--one, .postacie-route-stop--two, .postacie-route-stop--three, .postacie-route-stop--four { width: 100%; max-width: none; justify-self: stretch; }
  .postacie-route-stop > span, .postacie-route-stop--one > span, .postacie-route-stop--two > span, .postacie-route-stop--three > span, .postacie-route-stop--four > span { left: calc(-1 * var(--space-7) + .05rem); right: auto; }
}

@media (max-width: 850px) {
  .postacie-universe__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .postacie-universe-link:last-child { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .postacie-legend__grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .postacie-hero { padding-top: var(--space-7); }
  .postacie-hero__grid { gap: var(--space-6); }
  .postacie-hero__copy { gap: var(--space-4); }
  .postacie-hero h1 { max-width: 18ch; font-size: clamp(2.625rem, 10vw, 3.375rem); }
  .postacie-hero__lead { font-size: 1.125rem; line-height: 1.5; }
  .postacie-hero__media img { aspect-ratio: 4 / 5; object-position: 76% center; }
  .postacie-reading__stations { grid-template-columns: 1fr; padding-left: var(--space-5); }
  .postacie-reading__stations::before { top: 1rem; bottom: 1rem; left: .7rem; right: auto; width: 1px; height: auto; }
  .postacie-reading-card { padding: var(--space-4); }
  .postacie-reading-card p { max-width: none; }
  .postacie-number { position: absolute; left: calc(-1 * var(--space-5) + .08rem); top: var(--space-4); width: 1.35rem; font-size: .6rem; }
  .postacie-path__blocks { padding-left: var(--space-5); }
  .postacie-path-block { padding: var(--space-4); }
  .postacie-path-block::before { left: calc(-1 * var(--space-5) - .2rem); }
  .postacie-route__map { padding-left: var(--space-6); }
  .postacie-route-stop { padding: var(--space-4); }
  .postacie-route-stop > span, .postacie-route-stop--one > span, .postacie-route-stop--two > span, .postacie-route-stop--three > span, .postacie-route-stop--four > span { left: calc(-1 * var(--space-6) + .04rem); }
  .postacie-universe__media img { aspect-ratio: 4 / 5; object-position: 70% center; }
  .postacie-universe__links { grid-template-columns: 1fr; }
  .postacie-universe-link:last-child { grid-column: auto; }
  .postacie-legend-card { padding: var(--space-5); }
  .postacie-next__cta { flex-direction: column; align-items: flex-start; }
  .postacie-note__panel { padding: var(--space-5); }
}

@media (prefers-reduced-motion: no-preference) {
  .postacie-hero__actions .button-primary, .postacie-next__cta .button-primary { background-image: linear-gradient(105deg, transparent 28%, rgb(244 238 223 / 38%) 50%, transparent 72%); background-size: 250% 100%; animation: postacie-sweep 12s ease-in-out infinite; }
  .postacie-route__map:not(.is-revealed) .postacie-route__line { transform: scaleY(0); }
  .postacie-route__map.is-revealed .postacie-route__line { animation: postacie-draw 1.1s ease-out forwards; }
}

@keyframes postacie-sweep { 0%, 62%, 100% { background-position: 130% 0; } 78% { background-position: -35% 0; } }
@keyframes postacie-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }