/* Content theme: Phantasia, in the palette and type of phantasia.se.
   Scope: only the page content (<main class="theme-phantasia">). Header and page background stay
   on the site theme. Use AFTER style.css. Font: Courier New (system font, as on phantasia.se). */
main.theme-phantasia {
  --ph-pink: rgb(242, 187, 201);
  --ph-pink-deep: rgb(242, 148, 182);
  --ph-rose: rgb(132, 47, 78);
  --ph-ink: rgb(89, 67, 71);
  --text: light-dark(var(--ph-ink), #f6dfe6);
  --muted: light-dark(rgba(89, 67, 71, .82), rgba(246, 223, 230, .78));
  --neon: light-dark(var(--ph-rose), var(--ph-pink-deep));
  --neon2: var(--neon);
  --line: rgba(242, 148, 182, .45);
  font-family: "Courier New", Courier, ui-monospace, monospace;
  color: var(--text);
}

main.theme-phantasia .page-hero { text-align: center; }
main.theme-phantasia h1 {
  font-family: "Courier New", Courier, ui-monospace, monospace; font-weight: 700;
  color: var(--neon); letter-spacing: .02em;
}

/* The poem in a soft pink card, like the boxes on phantasia.se */
main.theme-phantasia .hero-next.poem {
  max-width: 54ch; margin: 0 auto 28px; padding: 24px 20px;
  font-size: 1.05rem; color: var(--text);
  background: light-dark(var(--ph-pink), rgba(242, 148, 182, .14)); border: 1px solid rgba(244, 93, 229, .1); border-radius: 20px;
  box-shadow: 3px 3px 20px 0 rgba(242, 148, 182, .5);
}
main.theme-phantasia .poem b { color: var(--neon); font-style: italic; }

/* Pink gradient button; flips and turns the text white on hover */
main.theme-phantasia .btn {
  font-family: "Courier New", Courier, ui-monospace, monospace; font-weight: 700; letter-spacing: .02em;
  color: var(--ph-ink); border: 0; border-radius: 20px;
  background: linear-gradient(180deg, var(--ph-pink), var(--ph-pink-deep));
  box-shadow: 3px 3px 10px 1px rgba(242, 148, 182, .4);
}
main.theme-phantasia .btn:hover, main.theme-phantasia .btn:focus-visible {
  color: #fff; background: linear-gradient(0deg, var(--ph-pink), var(--ph-pink-deep));
}

main.theme-phantasia .hero-banner {
  border: 1px solid rgba(244, 93, 229, .1); border-radius: 20px;
  box-shadow: 3px 3px 20px 0 rgba(242, 148, 182, .5);
}
main.theme-phantasia .poster figcaption { font-style: italic; color: var(--muted); }

/* Links: wavy italic on hover, as on phantasia.se */
main.theme-phantasia a:not(.btn):hover { font-style: italic; text-decoration: 2px wavy underline; }

main.theme-phantasia .hero-actions { justify-content: center; }
/* Secondary button: outlined in rose */
main.theme-phantasia .btn.btn-alt {
  background: transparent; border: 2px solid var(--ph-pink-deep); box-shadow: none; color: var(--neon);
}
main.theme-phantasia .btn.btn-alt:hover, main.theme-phantasia .btn.btn-alt:focus-visible {
  color: #fff; background: linear-gradient(0deg, var(--ph-pink), var(--ph-pink-deep));
}