#schoolStory {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #06090e;
  color: #fff;
  overflow: hidden;
}

#schoolStory[open] { display: grid; place-items: center; }

.school-story-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: min(56.25vw, 100dvh);
  isolation: isolate;
  background: #10151f;
}

#schoolStoryImage, .school-story-frame::before, #schoolStoryAdvance {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#schoolStoryImage { object-fit: cover; }
#schoolStoryImage.school-story-map { object-position: center 64%; }
.school-story-frame::before { content: ''; z-index: 1; background: rgb(6 10 17 / 31%); }

.school-story-copy {
  position: relative;
  z-index: 2;
  max-width: 87%;
  text-align: center;
  font: 650 clamp(12px, min(3.5vw, 5.4dvh), 34px)/1.65 system-ui, "PingFang HK", "Microsoft JhengHei", sans-serif;
  letter-spacing: .055em;
  text-shadow: 0 2px 5px #000, 0 0 15px #070a11;
}

.school-story-frame:has(.school-story-map) .school-story-copy {
  align-self: start;
  margin-top: clamp(8px, 3dvh, 26px);
}
.school-story-frame:has(.school-story-map)::before {
  background: linear-gradient(rgb(6 10 17 / 55%), transparent 48%);
}

#schoolStoryCaption { margin: 0; white-space: pre-wrap; }

.school-story-copy span {
  position: absolute;
  left: 100%;
  bottom: -.14em;
  margin-left: .3em;
  color: #93e4ff;
  text-shadow: 0 0 11px #1497e9;
}

#schoolStoryAdvance {
  z-index: 3;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

@supports selector(.school-story-frame:has(#schoolStoryAdvance:focus-visible)) {
  #schoolStoryAdvance:focus { outline: none; }
  .school-story-frame:has(#schoolStoryAdvance:focus-visible) .school-story-copy span {
    color: #fff;
    text-shadow: 0 0 8px #70d9ff, 0 0 16px #1497e9;
  }
}

#nextChapterStage[hidden] { display: none; }

html[lang="en"] .school-story-copy {
  max-width: min(78%, 44ch);
  font-size: clamp(12px, min(2.4vw, 4.8dvh), 28px);
  letter-spacing: .015em;
}