/* P5T layout fixes (2026-10, static migration). Loaded last so it overrides the original CSS.
   The page puts rem-sized text inside fixed-size background images, so a larger browser
   default font (or a narrow phone) pushed text out of its boxes. */

/* 1. Render rem at the designed size regardless of the browser's default font setting.
      Browser zoom (Ctrl +/-) still scales the whole page. */
html { font-size: 16px; }

/* 2. Story box: size the text from the box width, not the viewport or rem. */
#story .storyContainer { container-type: inline-size; }
#story .storyText {
  width: 86%;
  height: 84%;
  font-size: clamp(11px, 1.6cqi, 17px);
  line-height: 2.6;
  gap: 1em;
}
@container (max-width: 760px) {
  #story .storyText { font-size: clamp(10px, 3.3cqi, 16px); line-height: 1.5; gap: 0.8em; }
}
@media screen and (max-width: 768px) {
  #story h2.storySubheader { font-size: clamp(1rem, 5.2vw, 2rem); line-height: 1.1; }
}

/* 3. Feature captions: size from the panel width; keep lines inside the slanted black area
      (about 15%-90% of the image height, narrower at the corners). */
.featuresText { container-type: inline-size; }
.slideTextContainer { padding: 0 14%; font-size: clamp(10px, 3.1cqi, 20px); gap: 0.3em; line-height: 1.25; }
.slideTextContainer .slideSubHeader { font-size: 1.15em; line-height: 1.1; }
.slideTextContainer .slideSubHeader,
.slideTextContainer .slideText { margin: 0; }