.wip-view{overflow-x:clip}
.editorial-page.wip-page{padding-top:calc(var(--brand-top) + var(--brand-width) * .35068493 + 12px)}
.wip-heading{max-width:calc(var(--logo-start) - var(--brand-start) - 24px);margin:0 0 32px}
.wip-format{margin:0;color:#e2e8e8;font-size:1.0625rem;font-weight:400;line-height:1.7;word-break:keep-all}
/* Matching image frames with a closer gap. */
.wip-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.5vw,24px);align-items:stretch;position:relative;isolation:isolate}
.zoom-tile{margin:0;min-width:0;position:relative;z-index:1;outline-offset:5px;display:flex;flex-direction:column}
.tile-media{position:relative;aspect-ratio:1264/843;background:#fff;filter:brightness(1) saturate(1);transition:filter .2s ease;container-type:inline-size}
.tile-media img{display:block;width:100%;height:100%;object-fit:contain}
.image-click-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:rgba(104,203,182,.9);font-family:Inter,sans-serif;font-size:13cqw;font-weight:600;line-height:1;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s ease}
.zoom-tile:focus-visible .image-click-label{opacity:1}
@media(hover:hover){.zoom-tile .tile-media:hover .image-click-label{opacity:1}}
.zoom-tile figcaption{margin-top:11px;font-size:.8125rem;line-height:1.65;color:#b4c3ca;word-break:keep-all}
.zoom-tile:focus-visible{outline:2px solid #a9c9c3}
.zoom-tile:focus-visible .tile-media{filter:brightness(.96) saturate(1.12)}
@media(hover:hover){.zoom-tile:hover .tile-media{filter:brightness(.96) saturate(1.12)}}
@media(max-width:760px){.wip-format{font-size:1rem}.wip-layout{display:flex;flex-direction:column;gap:20px}.zoom-tile{width:85%}}
@media(prefers-reduced-motion:reduce){.tile-media,.image-click-label{transition:none}}

.project-summary{display:none;font-size:10pt;line-height:1.85;text-align:left;color:#e2e8e8;word-break:keep-all;overflow-wrap:anywhere}
.project-summary h2{margin:0 0 8px;font-size:inherit;font-weight:700;line-height:1.6}
.project-summary p{margin:0 0 12px}
.project-summary p:last-child{margin-bottom:0}
.project-summary h2:not(:first-child){margin-top:20px}
.wip-layout:has(.fly-art .tile-media:hover,.fly-art:focus-visible) .teacher-art .tile-media{aspect-ratio:auto;background:transparent;filter:none}
.wip-layout:has(.fly-art .tile-media:hover,.fly-art:focus-visible) .teacher-art .tile-media > img,
.wip-layout:has(.fly-art .tile-media:hover,.fly-art:focus-visible) .teacher-art figcaption{display:none}
.wip-layout:has(.fly-art .tile-media:hover,.fly-art:focus-visible) .teacher-art .project-overview{display:block}
@media(hover:none){.wip-layout:has(.fly-art:focus-within) .teacher-art .tile-media{aspect-ratio:auto;background:transparent;filter:none}.wip-layout:has(.fly-art:focus-within) .teacher-art .tile-media > img,.wip-layout:has(.fly-art:focus-within) .teacher-art figcaption{display:none}.wip-layout:has(.fly-art:focus-within) .teacher-art .project-overview{display:block}}

.project-overview{display:none;font-size:10pt;line-height:1.85;text-align:right;color:#e2e8e8;word-break:keep-all;overflow-wrap:anywhere}
.project-overview h2{margin:0 0 16px;font-size:inherit;font-weight:700;line-height:1.6}
.project-overview h2:not(:first-child){margin-top:24px}
.project-overview p{margin:0 0 10px}
.project-overview p:last-child{margin-bottom:0}
.wip-layout:has(.teacher-art .tile-media:hover,.teacher-art:focus-visible) .fly-art .tile-media{aspect-ratio:auto;background:transparent;filter:none}
.wip-layout:has(.teacher-art .tile-media:hover,.teacher-art:focus-visible) .fly-art img,
.wip-layout:has(.teacher-art .tile-media:hover,.teacher-art:focus-visible) .fly-art figcaption{display:none}
.wip-layout:has(.teacher-art .tile-media:hover,.teacher-art:focus-visible) .fly-art .project-summary{display:block}
@media(hover:none){.wip-layout:has(.teacher-art:focus-within) .fly-art .tile-media{aspect-ratio:auto;background:transparent;filter:none}.wip-layout:has(.teacher-art:focus-within) .fly-art img,.wip-layout:has(.teacher-art:focus-within) .fly-art figcaption{display:none}.wip-layout:has(.teacher-art:focus-within) .fly-art .project-summary{display:block}}

.fly-art .project-summary{text-align:right}
.teacher-art .project-overview{text-align:left}
.project-overview p{margin-bottom:6px}
.project-overview p:last-of-type{margin-bottom:0}
.overview-art-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,.8vw,12px);margin-top:18px}
.overview-art-frame{position:relative;aspect-ratio:4/3;overflow:hidden;background:#f2eee3;min-width:0;border:4px solid #eae2d2;box-shadow:0 2px 5px rgba(0,0,0,.16)}
.overview-art-frame img{display:block;width:100%;height:100%;object-fit:contain;filter:sepia(.18) saturate(.78) contrast(.96)}
.overview-art-frame.tetsuzo-bust img{position:absolute;top:0;left:50%;transform:translateX(-50%);width:auto;height:208.571429%;max-width:none;object-fit:contain}
@media(min-width:761px){
  .wip-layout:has(.fly-art .tile-media:hover,.fly-art:focus-visible) .tile-media{flex:1}
  .wip-layout:has(.fly-art .tile-media:hover,.fly-art:focus-visible) .teacher-art .tile-media{display:flex;flex-direction:column}
  .wip-layout:has(.fly-art .tile-media:hover,.fly-art:focus-visible) .teacher-art .project-overview{display:flex;flex-direction:column;flex:1}
  .wip-layout:has(.fly-art .tile-media:hover,.fly-art:focus-visible) .teacher-art figcaption{display:block;visibility:hidden}
  .wip-layout:has(.fly-art .tile-media:hover,.fly-art:focus-visible) .overview-art-grid{margin-top:auto;padding-top:18px}
}
@media(min-width:761px) and (hover:none){
  .wip-layout:has(.fly-art:focus-within) .tile-media{flex:1}
  .wip-layout:has(.fly-art:focus-within) .teacher-art .tile-media{display:flex;flex-direction:column}
  .wip-layout:has(.fly-art:focus-within) .teacher-art .project-overview{display:flex;flex-direction:column;flex:1}
  .wip-layout:has(.fly-art:focus-within) .teacher-art figcaption{display:block;visibility:hidden}
  .wip-layout:has(.fly-art:focus-within) .overview-art-grid{margin-top:auto;padding-top:18px}
}
.wip-layout:has(.fly-art .tile-media:hover,.fly-art:focus-visible) .teacher-art .image-click-label,
.wip-layout:has(.teacher-art .tile-media:hover,.teacher-art:focus-visible) .fly-art .image-click-label{display:none}
@media(hover:none){.wip-layout:has(.fly-art:focus-within) .teacher-art .image-click-label,.wip-layout:has(.teacher-art:focus-within) .fly-art .image-click-label{display:none}}

/* Equal side-by-side drawings; the village's printed black border stays clipped. */
.wip-extra-art{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.5vw,24px);width:100%;margin-top:clamp(12px,1.5vw,24px)}
.extra-art-frame{position:relative;aspect-ratio:16/9;overflow:hidden;margin:0;min-width:0;border:0;background:#fff}
.extra-art-frame img{display:block;width:100%;height:100%;object-fit:cover}
.village-image img{position:absolute;width:118.51851852%;height:116.66666667%;max-width:none;left:-9.25925926%;top:-8.84773663%}
@media(max-width:760px){.wip-extra-art{gap:12px;margin-top:20px}}

.source-credit{margin-top:18px!important}
.bath-art{align-self:start;outline-offset:5px}
.bath-art .tile-media{aspect-ratio:16/9}
.bath-art .tile-media img{object-fit:cover}
.bath-art:focus-visible{outline:2px solid #a9c9c3}
.bath-art:focus-visible .image-click-label{opacity:1}
@media(hover:hover){.bath-art .tile-media:hover .image-click-label{opacity:1}.bath-art .tile-media:hover{filter:brightness(.96) saturate(1.12)}}
.village-image{position:absolute;inset:0;overflow:hidden}
.bath-synopsis{display:none;width:100%;box-sizing:border-box;margin:0;padding:0;align-self:start;font-size:10pt;line-height:1.85;text-align:left;color:#e2e8e8;word-break:keep-all;overflow-wrap:anywhere}
.bath-synopsis h2{width:100%;text-align:left;margin:0 0 8px;font-size:inherit;font-weight:700;line-height:1.6}
.bath-synopsis p{width:100%;text-align:left;margin:0 0 12px}
.bath-synopsis p:last-child{margin-bottom:0}

/* Hovering the lower-right background reveals the director profile on its left. */
.village-art-frame{align-self:start;outline-offset:5px;container-type:inline-size}
.village-art-frame:focus-visible{outline:2px solid #a9c9c3}
.village-art-frame:focus-visible .image-click-label{opacity:1}
@media(hover:hover){.village-image:hover .image-click-label{opacity:1}}
.director-profile{display:none;font-size:10pt;line-height:1.85;text-align:right;color:#e2e8e8;word-break:keep-all;overflow-wrap:anywhere}
.director-profile h2{margin:0 0 16px;font-size:inherit;font-weight:700;line-height:1.6}
.director-profile h3{margin:18px 0 8px;font-size:inherit;font-weight:700}
.director-profile p{margin:0 0 10px}
.director-profile-heading{display:grid;grid-template-columns:86px minmax(0,1fr);gap:16px;align-items:start}
.director-filmography{padding:0;margin:0;list-style:none}
.director-filmography li{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:8px;align-items:baseline;margin:0 0 5px}
.director-filmography li>span:first-child{color:#a9c9c3}
.director-filmography li>span:last-child{color:#b4c3ca}
.director-art-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px;align-items:start}
.director-image-crop{position:relative;overflow:hidden;background:#fff;min-width:0}
.director-image-crop img{position:absolute;display:block;width:var(--crop-width);height:var(--crop-height);left:var(--crop-left);top:var(--crop-top);max-width:none;object-fit:fill}
@media(max-width:560px){.director-profile-heading{grid-template-columns:1fr}.director-portrait{width:74px;margin-left:auto}.director-filmography li{grid-template-columns:1fr;gap:0;margin-bottom:12px}.director-art-grid{grid-template-columns:1fr}}

.bgm-toggle{position:fixed;right:24px;bottom:24px;z-index:20;padding:9px 14px;border:1px solid rgba(169,201,195,.45);border-radius:3px;background:rgba(20,35,49,.94);color:#e2e8e8;font:inherit;font-size:.875rem;line-height:1.5;cursor:pointer}
.bgm-toggle:hover{background:#243746}
.bgm-toggle:focus-visible{outline:2px solid #a9c9c3;outline-offset:3px}
.bgm-credit{margin:24px 0 56px;font-size:.8125rem;line-height:1.8;color:#b4c3ca}
.bgm-credit a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media(max-width:560px){.bgm-toggle{right:14px;bottom:14px}}

.director-profile-heading{margin-bottom:14px}
.director-profile>p{margin-bottom:14px}

/* Match the director panel to the lower-right drawing's exact frame. */
.wip-extra-art[data-panel="director"] .bath-art{aspect-ratio:16/9;background:transparent;overflow:hidden}
.wip-extra-art[data-panel="director"] .bath-art .tile-media{display:none}
.wip-extra-art[data-panel="director"] .director-profile{display:flex}
.director-profile{position:absolute;inset:0;min-height:0;flex-direction:column;gap:10px;text-align:left;font-size:10pt;line-height:1.6}
.director-profile-heading{display:grid;grid-template-columns:clamp(48px,5vw,74px) minmax(0,1fr);gap:12px;align-items:start;flex:1;min-height:0;margin:0}
.director-portrait{width:100%;margin:0}
.director-prose{min-width:0;min-height:0;height:100%;overflow:auto;scrollbar-width:thin;scrollbar-color:#a9c9c3 transparent;overscroll-behavior:contain;padding-right:3px}
.director-prose:focus-visible{outline:1px solid #a9c9c3;outline-offset:-1px}
.director-profile h2{margin:0 0 7px;font-size:inherit;line-height:1.6}
.director-profile .director-prose p{margin:0 0 8px}
.director-profile .director-prose p:last-child{margin-bottom:0}
.director-art-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;flex:none;margin:0;align-items:end}
@media(max-width:560px){.director-profile-heading{grid-template-columns:40px minmax(0,1fr);gap:8px}.director-art-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}.director-profile{gap:6px}.director-portrait{width:100%;margin:0}}

/* Switch from either full frame, including when its picture is replaced by text. */
.wip-extra-art[data-panel="synopsis"] .bath-art{aspect-ratio:16/9;background:#fff;overflow:hidden}
.wip-extra-art[data-panel="synopsis"] .bath-art .tile-media{display:block}
.wip-extra-art[data-panel="synopsis"] .director-profile{display:none}
.wip-extra-art[data-panel="synopsis"] .village-art-frame{aspect-ratio:auto;background:transparent;overflow:visible}
.wip-extra-art[data-panel="synopsis"] .village-image{display:none}
.wip-extra-art[data-panel="synopsis"] .bath-synopsis{display:block}

/* Enlarged portrait; prose wraps beside it and uses the space below it. */
.director-profile-heading{display:block;min-width:0}
.director-prose .director-portrait{float:left;width:clamp(81.12px,8.45vw,125.06px);margin:0 12px 8px 0}
@media(max-width:560px){.director-prose .director-portrait{width:67.6px;margin-right:8px}}

.director-art-grid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.director-art-cell{aspect-ratio:16/9;display:flex;align-items:center;overflow:hidden;background:#fff;min-width:0}
.director-art-cell .director-image-crop{width:100%;flex:none}

/* Scroll from Korean to Japanese, then British English. */
.wip-language-section + .wip-language-section{border-top:1px solid rgba(169,201,195,.35);margin-top:64px;padding-top:40px}
.wip-language-heading{margin:0 0 32px}
.wip-language-label{margin:0 0 10px;color:#a9c9c3;font-size:.8125rem;line-height:1.5;letter-spacing:.06em}
.wip-language-section:lang(ja){font-family:'Yu Gothic','Hiragino Kaku Gothic ProN',Meiryo,sans-serif}
.wip-language-section:lang(ja) .project-summary,.wip-language-section:lang(ja) .project-overview,.wip-language-section:lang(ja) .bath-synopsis,.wip-language-section:lang(ja) .director-profile{word-break:normal;line-break:strict;overflow-wrap:break-word}
.wip-language-section:lang(en) .project-summary,.wip-language-section:lang(en) .project-overview,.wip-language-section:lang(en) .bath-synopsis,.wip-language-section:lang(en) .director-profile{word-break:normal;overflow-wrap:break-word}
@media(max-width:760px){.wip-language-section + .wip-language-section{margin-top:40px;padding-top:28px}}

/* Original editions beside the character drawing, with the copy to their right. */
.overview-intro{display:grid;grid-template-columns:clamp(64px,8vw,116px) minmax(0,1fr);gap:clamp(12px,1.5vw,24px);flex:1;min-width:0}
.overview-book-stack{display:flex;flex-direction:column;gap:12px;align-self:start;min-width:0}
.overview-book-stack img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:contain;background:transparent;filter:none}
.overview-content{display:flex;flex-direction:column;min-width:0}
.overview-content .overview-art-grid{margin-top:auto;padding-top:18px}
@media(max-width:760px){.overview-intro{grid-template-columns:clamp(56px,18vw,92px) minmax(0,1fr);gap:12px}.overview-book-stack{gap:10px}}

/* Let the portrait and biography share the space without an inner scroll area. */
.wip-extra-art[data-panel="director"] .bath-art{aspect-ratio:auto;overflow:visible}
.director-profile{position:relative;inset:auto;width:100%;box-sizing:border-box}
.director-profile-heading{flex:none;min-height:auto}
.director-prose{display:flow-root;height:auto;max-height:none;overflow:visible;padding-right:0;overscroll-behavior:auto}
.director-profile .director-prose p{margin-bottom:8px}
.director-art-grid{margin-top:4px}