@font-face{font-family:'Manga Brush';src:url('./fonts/yuji-boku-ui-v131.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
/* v148: small upper-page cuts. The frame inclines; lettering stays upright. */
#stage .story-cut{position:absolute;z-index:30;isolation:isolate;pointer-events:none;overflow:hidden;background:var(--paper-white);border:0;box-sizing:border-box;color:#111;box-shadow:none;transform:none}
#stage .story-cut[hidden],#stage .story-cut [hidden]{display:none!important}
.screen:has(>.story-cut[data-placement="upper"]:not([hidden]))>.manga-masthead{visibility:hidden}
.story-grid{position:absolute;inset:0;background:var(--paper-white)}
.story-frame{position:absolute;top:0;bottom:0;left:0;width:66%;min-width:0;min-height:0;overflow:hidden;background:#171717}
.story-main{clip-path:polygon(0 0,100% 0,82% 100%,0 100%)}
.story-art{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 48%;filter:none;mix-blend-mode:normal;opacity:.94}
.story-frame[data-art="eye"] .story-art{object-position:42% 50%}
.story-frame[data-art="face"] .story-art{object-position:36% 36%}
.story-frame[data-art="profile"] .story-art{object-position:64% 42%}
.story-frame[data-art="mouth"] .story-art{object-position:62% 45%}
.story-detail{display:none}
.story-main:after,.story-detail:after{content:'';position:absolute;inset:0;pointer-events:none;background:var(--paper-white);mix-blend-mode:multiply}
.story-edge{position:absolute;inset:0;width:100%;height:100%;z-index:2;fill:none;stroke:#171717;stroke-width:1.3px;pointer-events:none}
.story-note{position:absolute;z-index:3;box-sizing:border-box;right:6%;top:17%;width:44%;height:66%;border:1px solid #262626;background:var(--paper-white);display:grid;place-items:center}
.story-lettering{position:absolute;inset:7px 6px;display:flex;align-items:center;justify-content:center}
.story-copy{display:flex;flex:none;gap:0;align-items:center;justify-content:center;margin:0;padding:0;font-family:'Manga Serif','Hiragino Mincho ProN',serif;font-weight:500;font-size:22px;line-height:1.55;letter-spacing:.035em;text-shadow:none;white-space:nowrap}
.story-copy[data-flow="vertical"]{flex-direction:row-reverse}
.story-copy[data-flow="vertical"] .story-line{writing-mode:vertical-rl;text-orientation:mixed}
.story-copy[data-flow="horizontal"]{flex-direction:column}
.story-copy[data-flow="horizontal"] .story-line{writing-mode:horizontal-tb}
.story-action-panel{position:absolute;left:62%;right:5%;top:16%;bottom:16%;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;background:transparent;overflow:visible}
.story-action-word{display:block;flex:none;padding:0;margin:0;white-space:nowrap;font-family:'Manga Brush','Manga Serif',serif;font-size:90px;font-weight:400;line-height:1.05;letter-spacing:-.07em;text-shadow:none;-webkit-text-stroke:0;color:#080808;font-synthesis:none}
.story-action-word[data-flow="vertical"]{writing-mode:vertical-rl;text-orientation:upright;letter-spacing:-.12em}
.story-cut[data-major="true"] .story-note{left:8%;right:auto;top:25%;width:18%;height:50%}
.story-cut[data-major="true"] .story-lettering{inset:5px}
.story-speaker{position:absolute;z-index:4;top:18%;left:8%;padding:2px 4px;background:var(--paper-white);font-family:'Manga Serif',serif;font-size:11px;line-height:1.1;letter-spacing:.12em;color:#111}
/* An upward sweep changes both the silhouette and the direction of the gaze. */
.story-cut[data-shape="rising"] .story-main{left:39%;width:61%;clip-path:polygon(16% 0,100% 0,100% 100%,0 100%)}
.story-cut[data-shape="rising"] .story-note{left:6%;right:auto}
.story-cut[data-shape="rising"] .story-action-panel{left:6%;right:58%}
.story-cut[data-major="true"][data-shape="rising"] .story-note{left:auto;right:8%}
.story-cut[data-major="true"][data-shape="rising"] .story-speaker{left:auto;right:8%}
/* Two unequal closeups, with a paper gutter that opens toward the river. */
.story-cut[data-shape="split"] .story-main{width:40%;clip-path:polygon(0 0,100% 0,78% 100%,0 100%)}
.story-cut[data-shape="split"] .story-detail{display:block;left:33%;width:33%;top:10%;clip-path:polygon(25% 0,100% 0,79% 100%,0 100%)}
.story-cut[data-shape="split"] .story-note{right:6%;width:44%}
.story-cut[data-shape="split"] .story-frame[data-art="eye"] .story-art{object-position:24% 50%}
/* Three converging fragments are reserved for decisive declarations. */
.story-cut[data-shape="fan"] .story-main{width:35%;clip-path:polygon(0 0,100% 0,83% 100%,0 100%)}
.story-cut[data-shape="fan"] .story-detail{display:block;left:31%;width:33%;clip-path:polygon(20% 0,100% 0,100% 100%,0 100%)}
.story-cut[data-shape="fan"] .story-note{right:6%;width:44%}
.story-cut[data-major="true"][data-shape="fan"] .story-note{left:36%;right:auto;top:27%;width:20%;height:48%}
.story-cut[data-shape="fan"] .story-action-panel{left:66%;right:6%}
.story-cut[data-shape="fan"] .story-frame[data-art="eye"] .story-art{object-position:23% 50%}
/* Room and quieter thought scenes breathe inside a shallow trapezoid. */
.story-cut[data-shape="quiet"] .story-main{width:65%;clip-path:polygon(0 0,96% 0,100% 100%,0 100%)}
.story-cut[data-shape="quiet"] .story-note{right:7%;width:48%}
.story-cut[data-major="true"][data-shape="quiet"] .story-main{width:57%;clip-path:polygon(0 0,100% 0,89% 100%,0 100%)}
.story-cut[data-major="true"][data-shape="quiet"] .story-action-panel{left:56%;right:6%}
/* In landscape the river starts high: read across a thin, wide strip. */
.story-cut[data-compact="true"] .story-note{width:43%;top:16%;height:68%;border:0}
.story-cut[data-compact="true"] .story-lettering{inset:1px 4px}
.story-cut[data-compact="true"] .story-main{width:55%}
.story-cut[data-compact="true"][data-shape="rising"] .story-main{left:45%;width:55%}
.story-cut[data-compact="true"][data-shape="split"] .story-main{width:31%}
.story-cut[data-compact="true"][data-shape="split"] .story-detail{left:26%;width:28%}
.story-cut[data-compact="true"][data-shape="fan"] .story-main{width:29%}
.story-cut[data-compact="true"][data-shape="fan"] .story-detail{left:26%;width:28%}
.story-cut[data-major="true"][data-compact="true"] .story-note{left:8%;right:auto;top:28%;width:20%;height:44%}
.story-cut[data-major="true"][data-compact="true"][data-shape="rising"] .story-note{left:auto;right:8%}
.story-cut[data-major="true"][data-compact="true"][data-shape="fan"] .story-note{left:28%;width:20%}
@media(prefers-reduced-motion:reduce){.story-cut,.story-art{animation:none!important}}

.story-cut[data-compact="true"] .story-copy{line-height:1.4}
.story-cut[data-major="true"][data-farwin="true"] .story-note{left:8%;right:auto;top:62%;width:28%;height:22%}
.story-cut[data-major="true"][data-farwin="true"] .story-lettering{inset:2px 4px}
.story-cut[data-major="true"][data-farwin="true"][data-compact="true"] .story-note{top:29%;height:42%;width:24%}
