/* Section 5 is one continuous photo-and-message composition. */
.page {
 --story-photo-height:calc(224 * var(--u));
 --story-message-height:max(calc(320 * var(--u)),calc(75svh + 40 * var(--u)));
 --story-photo-extra:calc(var(--story-photo-height) - 188 * var(--u));
 --story-extra:calc(var(--story-photo-extra) + var(--story-message-height) - 131 * var(--u));
 height:calc(2048 * var(--u) + var(--firstview-extra) + var(--philosophy-extra) + var(--preschool-extra) + var(--english-extra) + var(--story-extra));
}
.stage3-content { height:calc(589 * var(--u) + var(--english-extra) + var(--story-extra)); }
.learning-story { position:relative; }
.learning-story > .photo-story { height:var(--story-photo-height); }
.learning-story > .values { height:var(--story-message-height); }
/* The photograph and its handwriting keep every original coordinate and size. */
.learning-story .values > .paper {
 top:calc(-32 * var(--u) - var(--story-photo-extra));
 clip-path:inset(0 0 calc(109 * var(--u)) 0);
}
.story-message-paper {
 position:absolute; left:0; top:calc(28 * var(--u) - var(--story-photo-extra));
 width:100%; height:calc(100% - 8 * var(--u) + var(--story-photo-extra));
 z-index:1; pointer-events:none;
}
.story-message-paper > span {
 position:absolute; left:0; width:100%;
 background-image:url('assets/paper/story-message-texture.png');
 background-size:calc(682 * var(--u)) calc(160 * var(--u));
 background-repeat:repeat-y;
}
.story-message-paper .middle-paper { top:0; height:calc(100% - 40 * var(--u)); }
.story-message-paper .lower-paper {
 bottom:0; height:calc(40 * var(--u));
 background-position:0 calc(-1 * (var(--story-message-height) - 12 * var(--u)));
 mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2ODIgNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzPjxmaWx0ZXIgaWQ9ImVkZ2UiIHg9Ii0zJSIgeT0iLTI1JSIgd2lkdGg9IjEwNiUiIGhlaWdodD0iMTUwJSI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9Ii4yMyAuMzIiIG51bU9jdGF2ZXM9IjMiIHNlZWQ9IjIzIiByZXN1bHQ9ImdyYWluIi8+PGZlRGlzcGxhY2VtZW50TWFwIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9ImdyYWluIiBzY2FsZT0iMS4xIiB4Q2hhbm5lbFNlbGVjdG9yPSJSIiB5Q2hhbm5lbFNlbGVjdG9yPSJHIi8+PC9maWx0ZXI+PC9kZWZzPjxwYXRoIGZpbHRlcj0idXJsKCNlZGdlKSIgZmlsbD0id2hpdGUiIGQ9Ik0tNCAtMTAgSDY4NiBWMjkuNTg0IEw2ODIgMjkuNTg0IEM2NzQuNjY3IDI5LjczNiA2NjcuMzMzIDI5Ljg4OSA2NjAuMDAwIDMwLjIyMiBDNjUwLjAwMCAzMC42NzYgNjQwLjAwMCAzMS40NjcgNjMwLjAwMCAzMi4xNTAgQzYyMC4wMDAgMzIuODMyIDYxMC4wMDAgMzMuNDA2IDYwMC4wMDAgMzMuODg0IEM1OTAuMDAwIDM0LjM2MiA1ODAuMDAwIDM0Ljc0NCA1NzAuMDAwIDM0Ljg1OSBDNTYwLjAwMCAzNC45NzUgNTUwLjAwMCAzNC44MjMgNTQwLjAwMCAzNC41MDYgQzUzMC4wMDAgMzQuMTg4IDUyMC4wMDAgMzMuNzA1IDUxMC4wMDAgMzMuMzU5IEM1MDAuMDAwIDMzLjAxMyA0OTAuMDAwIDMyLjgwNSA0ODAuMDAwIDMyLjYxMyBDNDcwLjAwMCAzMi40MjAgNDYwLjAwMCAzMi4yNDQgNDUwLjAwMCAzMi4wMTMgQzQ0MC4wMDAgMzEuNzgyIDQzMC4wMDAgMzEuNDk2IDQyMC4wMDAgMzEuMjY1IEM0MTAuMDAwIDMxLjAzMyA0MDAuMDAwIDMwLjg1NiAzOTAuMDAwIDMwLjc2NyBDMzgwLjAwMCAzMC42NzcgMzcwLjAwMCAzMC42NzUgMzYwLjAwMCAzMC44MTAgQzM1MC4wMDAgMzAuOTQ0IDM0MC4wMDAgMzEuMjE1IDMzMC4wMDAgMzEuNDIyIEMzMjAuMDAwIDMxLjYyOSAzMTAuMDAwIDMxLjc3MyAzMDAuMDAwIDMxLjcxNSBDMjkwLjAwMCAzMS42NTggMjgwLjAwMCAzMS4zOTkgMjcwLjAwMCAzMS4xMjkgQzI2MC4wMDAgMzAuODU5IDI1MC4wMDAgMzAuNTc4IDI0MC4wMDAgMzAuMjEzIEMyMzAuMDAwIDI5Ljg0OCAyMjAuMDAwIDI5LjM5OCAyMTAuMDAwIDI4Ljk4NCBDMjAwLjAwMCAyOC41NzEgMTkwLjAwMCAyOC4xOTMgMTgwLjAwMCAyNy45MjAgQzE3MC4wMDAgMjcuNjQ4IDE2MC4wMDAgMjcuNDgyIDE1MC4wMDAgMjcuNDU5IEMxNDAuMDAwIDI3LjQzNyAxMzAuMDAwIDI3LjU1OCAxMjAuMDAwIDI3Ljg4MSBDMTEwLjAwMCAyOC4yMDMgMTAwLjAwMCAyOC43MjcgOTAuMDAwIDI5LjA1MiBDODAuMDAwIDI5LjM3NyA3MC4wMDAgMjkuNTA1IDYwLjAwMCAyOS41MTQgQzUwLjAwMCAyOS41MjMgNDAuMDAwIDI5LjQxNCAzMC4wMDAgMjkuMzY1IEMyMC4wMDAgMjkuMzE1IDEwLjAwMCAyOS4zMjUgMC4wMDAgMjkuMzM0IEwtNCAyOS4zMzQgWiIvPjwvc3ZnPg=="); -webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2ODIgNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzPjxmaWx0ZXIgaWQ9ImVkZ2UiIHg9Ii0zJSIgeT0iLTI1JSIgd2lkdGg9IjEwNiUiIGhlaWdodD0iMTUwJSI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9Ii4yMyAuMzIiIG51bU9jdGF2ZXM9IjMiIHNlZWQ9IjIzIiByZXN1bHQ9ImdyYWluIi8+PGZlRGlzcGxhY2VtZW50TWFwIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9ImdyYWluIiBzY2FsZT0iMS4xIiB4Q2hhbm5lbFNlbGVjdG9yPSJSIiB5Q2hhbm5lbFNlbGVjdG9yPSJHIi8+PC9maWx0ZXI+PC9kZWZzPjxwYXRoIGZpbHRlcj0idXJsKCNlZGdlKSIgZmlsbD0id2hpdGUiIGQ9Ik0tNCAtMTAgSDY4NiBWMjkuNTg0IEw2ODIgMjkuNTg0IEM2NzQuNjY3IDI5LjczNiA2NjcuMzMzIDI5Ljg4OSA2NjAuMDAwIDMwLjIyMiBDNjUwLjAwMCAzMC42NzYgNjQwLjAwMCAzMS40NjcgNjMwLjAwMCAzMi4xNTAgQzYyMC4wMDAgMzIuODMyIDYxMC4wMDAgMzMuNDA2IDYwMC4wMDAgMzMuODg0IEM1OTAuMDAwIDM0LjM2MiA1ODAuMDAwIDM0Ljc0NCA1NzAuMDAwIDM0Ljg1OSBDNTYwLjAwMCAzNC45NzUgNTUwLjAwMCAzNC44MjMgNTQwLjAwMCAzNC41MDYgQzUzMC4wMDAgMzQuMTg4IDUyMC4wMDAgMzMuNzA1IDUxMC4wMDAgMzMuMzU5IEM1MDAuMDAwIDMzLjAxMyA0OTAuMDAwIDMyLjgwNSA0ODAuMDAwIDMyLjYxMyBDNDcwLjAwMCAzMi40MjAgNDYwLjAwMCAzMi4yNDQgNDUwLjAwMCAzMi4wMTMgQzQ0MC4wMDAgMzEuNzgyIDQzMC4wMDAgMzEuNDk2IDQyMC4wMDAgMzEuMjY1IEM0MTAuMDAwIDMxLjAzMyA0MDAuMDAwIDMwLjg1NiAzOTAuMDAwIDMwLjc2NyBDMzgwLjAwMCAzMC42NzcgMzcwLjAwMCAzMC42NzUgMzYwLjAwMCAzMC44MTAgQzM1MC4wMDAgMzAuOTQ0IDM0MC4wMDAgMzEuMjE1IDMzMC4wMDAgMzEuNDIyIEMzMjAuMDAwIDMxLjYyOSAzMTAuMDAwIDMxLjc3MyAzMDAuMDAwIDMxLjcxNSBDMjkwLjAwMCAzMS42NTggMjgwLjAwMCAzMS4zOTkgMjcwLjAwMCAzMS4xMjkgQzI2MC4wMDAgMzAuODU5IDI1MC4wMDAgMzAuNTc4IDI0MC4wMDAgMzAuMjEzIEMyMzAuMDAwIDI5Ljg0OCAyMjAuMDAwIDI5LjM5OCAyMTAuMDAwIDI4Ljk4NCBDMjAwLjAwMCAyOC41NzEgMTkwLjAwMCAyOC4xOTMgMTgwLjAwMCAyNy45MjAgQzE3MC4wMDAgMjcuNjQ4IDE2MC4wMDAgMjcuNDgyIDE1MC4wMDAgMjcuNDU5IEMxNDAuMDAwIDI3LjQzNyAxMzAuMDAwIDI3LjU1OCAxMjAuMDAwIDI3Ljg4MSBDMTEwLjAwMCAyOC4yMDMgMTAwLjAwMCAyOC43MjcgOTAuMDAwIDI5LjA1MiBDODAuMDAwIDI5LjM3NyA3MC4wMDAgMjkuNTA1IDYwLjAwMCAyOS41MTQgQzUwLjAwMCAyOS41MjMgNDAuMDAwIDI5LjQxNCAzMC4wMDAgMjkuMzY1IEMyMC4wMDAgMjkuMzE1IDEwLjAwMCAyOS4zMjUgMC4wMDAgMjkuMzM0IEwtNCAyOS4zMzQgWiIvPjwvc3ZnPg==");
 mask-size:100% 100%; -webkit-mask-size:100% 100%; mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat;
}
.learning-story .values > .body { top:24%; }
.learning-story .values > #values-title { top:22%; }
.learning-story .values > .values-words { top:28%; }