/* The book uses the same illustrated portal as the four study doorways. */
nipyon-story-preview { display: block; }
.book--doorway .book-doorway__inner {
  width: min(76rem, 100%);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 1.25rem clamp(1.4rem, 3vw, 2.6rem);
}
.book--doorway .book-doorway__preview { padding: 0; align-self: center; }
.book-doorway__portal { aspect-ratio: 4 / 3; min-height: 0; }
.book-doorway__portal, .book-doorway__portal:hover, .book-doorway__portal:focus-visible { transform: none; }
.book-doorway__portal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nipyon-pastel-frame {
  --nipyon-border-angle: 0deg;
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border: 4px solid transparent; border-radius: inherit;
  background: conic-gradient(from var(--nipyon-border-angle), #cfe7f3, #e1dcf1, #f5dce0, #f8e8bd, #d8eee4, #cfe7f3);
  background-origin: border-box;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
  mask-composite: exclude;
}
.book-doorway__portal:focus-visible { outline: 3px solid #356962; outline-offset: 5px; }
.nipyon-scene {
  width: min(76rem, 100%);
  margin: clamp(2.4rem, 5vw, 4rem) auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid #cadbd7;
}
.nipyon-scene__heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.nipyon-scene h3 { margin: 0; font: 800 clamp(1.25rem, 2vw, 1.6rem)/1.35 "Nunito", "Noto Sans JP", sans-serif; color: #274f58; }
nipyon-story-preview [hidden] { display: none !important; }
.nipyon-scene__turns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; align-items: stretch; }
.nipyon-turn {
  --turn-color: #edf5f3;
  position: relative; min-width: 0; margin: 0; padding: .85rem 1rem;
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: .7rem; align-items: center;
  border: 1px solid #d6e3df; border-radius: 1.1rem; background: linear-gradient(150deg, #fff, var(--turn-color));
  box-shadow: 0 5px 16px rgb(38 75 79 / 4%);
}
.nipyon-turn--marina { --turn-color: #fff2f2; }
.nipyon-turn--selene { --turn-color: #f2f1fb; }
.nipyon-turn figcaption { display: flex; flex-direction: column; align-items: center; gap: .15rem; margin: 0; font: 800 .9rem/1.3 "Nunito", sans-serif; }
.nipyon-cast { display: block; flex-shrink: 0; width: 96px; height: 96px; background-image: var(--sprite-art); background-repeat: no-repeat; background-size: 310% 310%; }
.nipyon-cast--marina { --sprite-art: url("assets/mascots/nipyon/marina_poseology_v3.webp"); background-position: 0% 51.5%; }
.nipyon-cast--tsuki { --sprite-art: url("assets/mascots/nipyon/tsuki_poseology_v3.webp"); background-position: 50% 2%; }
.nipyon-cast--selene { --sprite-art: url("assets/mascots/nipyon/selene_poseology_v3.webp"); background-position: 100% 2%; }
.nipyon-cast.is-squishy-ready { background-image: none; }
.nipyon-cast canvas { display: block; width: 100%; height: 100%; }
.nipyon-turn blockquote { margin: 0; padding: 0; border: 0; font: 800 clamp(1.15rem, 1.7vw, 1.28rem)/1.45 "Nunito", "Noto Sans JP", sans-serif; color: #173243; overflow-wrap: anywhere; }
.nipyon-scene__source { display: inline-flex; align-items: center; gap: .8rem; min-height: 44px; margin-top: 1rem; color: #274f58; font: 700 .9rem/1.5 var(--sans); text-decoration: underline; text-underline-offset: .25em; }
.nipyon-scene__source:hover { color: #a82031; }
.nipyon-scene__source:focus-visible { outline: 3px solid #356962; outline-offset: 4px; border-radius: 3px; }
@media (max-width: 900px) {
  .nipyon-scene__turns { grid-template-columns: 1fr; gap: .8rem; }
  .nipyon-scene__turns { width: min(100%, 40rem); margin-inline: auto; }
}
@media (max-width: 760px) {
  .book--doorway .book-doorway__inner { grid-template-columns: 1fr; grid-template-areas: "intro" "preview" "details"; width: min(100%, 34rem); gap: 1.4rem; }
  .book-doorway__portal { min-height: 0; }
  .nipyon-scene { width: min(100%, 34rem); }
  .nipyon-scene__heading { align-items: flex-start; }
  .nipyon-scene h3 { max-width: 16ch; }
}
@media (max-width: 420px) {
  .nipyon-turn { grid-template-columns: 82px minmax(0, 1fr); gap: .65rem; padding: .8rem; }
  .nipyon-cast { width: 82px; height: 82px; }
  .nipyon-turn figcaption { font-size: .85rem; }
  .nipyon-turn blockquote { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .book-doorway__portal { transition: none; }
  .nipyon-cast.is-squishy-ready { background-image: var(--sprite-art); }
  .nipyon-cast canvas { visibility: hidden; }
}