/* Local supernatural atmosphere; approved trilogy structure and tokens are shared. */
.supernatural-page .trilogy-composition {
  isolation:isolate;
  background:radial-gradient(ellipse at 35% 70%,#647bb12b,transparent 60%),radial-gradient(ellipse at 75% 45%,#78519c24,transparent 68%);
}
.supernatural-page .trilogy-composition::before {
  content:'';
  position:absolute;
  inset:10% 3% 6%;
  border:1px solid #879ab522;
  transform:rotate(-1.5deg);
  z-index:-1;
  pointer-events:none;
}
.supernatural-page .trilogy-cover-left { transform:rotate(-4deg); top:68px; }
.supernatural-page .trilogy-cover-right { transform:rotate(4deg); top:53px; }
.supernatural-page .progression { background:#1a1b21; }
.supernatural-page .progression-steps li { border-top-color:#9389b655; }
.supernatural-page .character-pair { grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.supernatural-page .character-pair-four { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:32px; }
.supernatural-page .character-pair h3 { font-size:38px; }
.supernatural-page .trilogy-statement {
  background:radial-gradient(ellipse at 50% 55%,#70508b12,transparent 70%);
}
.supernatural-page .trilogy-statement h2 { font-size:clamp(32px,3.8vw,55px); }
@media(max-width:1023px) {
  .supernatural-page .character-pair { gap:26px; }
  .supernatural-page .character-pair h3 { font-size:34px; }
}
@media(max-width:767px) {
  .supernatural-page .trilogy-composition {
    background:radial-gradient(ellipse at 50% 65%,#7274a51c,transparent 70%);
  }
  .supernatural-page .trilogy-composition::before { border-color:#879ab516; transform:none; }
  .supernatural-page .trilogy-cover-left { top:39px; }
  .supernatural-page .trilogy-cover-right { top:30px; }
  .supernatural-page .character-pair { grid-template-columns:1fr; gap:32px; }
  .supernatural-page .character-pair-four { grid-template-columns:1fr; }
  .supernatural-page .character-pair h3 { font-size:36px; }
  .supernatural-page .trilogy-statement h2 { font-size:31px; }
}
@media(max-width:374px) {
  .supernatural-page .trilogy-statement h2 { font-size:27px; }
}