/* Portrait edition: the original artwork stays complete, controls gain room. */
.mobile-only{display:none}
#detail-view{border:0;padding:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:#eae6fe;color:#19106b}
#detail-view::backdrop{background:#17112bcc}
#detail-scroll{position:absolute;inset:76px 0 0;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom}
#detail-scroll img{display:block;width:180%;max-width:none;height:auto;margin:0;user-select:none}
.detail-bar{position:absolute;inset:0 0 auto;min-height:70px;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#f4f0ff;z-index:2}
.detail-bar span{font-size:12px;line-height:1.6}.detail-bar button{min-width:64px;min-height:44px;background:#211077;color:white;border:0;border-radius:22px}
@media(max-width:700px) and (orientation:portrait){
 html{overflow-x:hidden;background:#dfdcfb}body{height:600svh}
 .mobile-only{display:block}
 #fixed-ui{height:100svh;--intro-edge:22px}
 #fixed-ui header{padding:max(24px,env(safe-area-inset-top)) 22px 0}
 #fixed-ui .intro-name strong{font-size:13px;font-weight:500}#fixed-ui .intro-name>span{font-size:11px;margin-top:2px}
 #fixed-ui #skip{font-size:12px;min-height:44px;padding:10px 14px;background:#22180e55}
 #fixed-ui::after{background:linear-gradient(#19120b66,transparent 24%,transparent 65%,#17110cc9)}
 #fixed-ui .intro-copy{font-size:21px;line-height:1.4;left:40px;right:40px;bottom:150px}
 #fixed-ui .intro-disciplines{bottom:119px;font-size:12px;color:#e7ded3}
 #fixed-ui footer{bottom:max(32px,env(safe-area-inset-bottom));gap:10px}
 .intro-scroll-mark{height:24px;width:14px;border:0;border-radius:0;background:linear-gradient(#fff,#fff) center top/1px 19px no-repeat}
 .intro-scroll-mark::after{width:7px;height:7px;left:3px;top:12px;border-right:1px solid white;border-bottom:1px solid white;background:none;transform:rotate(45deg)}
 #portal-directory{overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;background:#dfdcfb}
 #portal-directory .directory-scene{height:auto;min-height:100%;display:flex;flex-direction:column;justify-content:center;padding:90px 0 92px;gap:16px}
 #portal-directory .index-artboard{width:100%;max-height:none;flex:none}
 .mobile-directory-heading{position:absolute;top:max(25px,env(safe-area-inset-top));left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;color:#251286;font-size:12px;letter-spacing:.03em}
 .mobile-directory-heading span:last-child{font:12px Consolas,monospace;color:#6758a0}
 .mobile-directory-note{margin:0 24px;color:#6b5b99;font-size:12px;align-self:flex-start}
 #portal-directory .index-mobile{position:static;display:flex;flex-direction:column;gap:0;align-self:stretch;margin:0 24px;border-top:1px solid #ada0de;pointer-events:auto}
 #portal-directory .index-mobile button{display:grid;grid-template-columns:36px 1fr 24px;align-items:center;gap:8px;min-height:74px;margin:0;padding:14px 0;text-align:left;border:0;border-bottom:1px solid #bdb2df;border-radius:0;background:none;color:#251286;box-shadow:none;touch-action:manipulation}
 .index-mobile .entry-number{font:14px Consolas,monospace;color:#7164a5}
 .index-mobile strong{font-size:19px;line-height:1.5;font-weight:600;letter-spacing:.03em}
 .index-mobile small{display:block;font:11px/1.6 Consolas,monospace;color:#7869a7;letter-spacing:.03em}
 .index-mobile .entry-arrow{font-size:23px;font-weight:300}
 #portal-directory .index-mobile button:active{background:#ffffff40;transform:translateY(2px)}
 #portal-tools{bottom:max(20px,env(safe-area-inset-bottom));padding:0;background:none;box-shadow:none}
 #portal-tools button{color:#574886;border:1px solid #b4a5d7;background:#eeebfc;min-height:44px;padding:9px 19px;border-radius:24px}
 #reader{display:flex;flex-direction:column;justify-content:flex-start;height:100dvh;touch-action:pan-y}
 #reader .mobile-reader-header{position:relative;flex:none;display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;max-width:none;margin:0;padding:max(22px,env(safe-area-inset-top)) 22px 16px;color:#281777}
 .mobile-reader-header span{font:11px Consolas,monospace;letter-spacing:.06em;color:#7765a1}
 .mobile-reader-header button{min-height:44px;border:1px solid #b8a9df;border-radius:24px;padding:8px 14px;background:#f6f2ff88;color:#392381;font-size:12px}
 #reader #reader-sheet{position:relative;flex:none;width:100%;height:auto;aspect-ratio:var(--page-ratio,1.785);margin-top:clamp(16px,5svh,48px);will-change:transform,opacity}
 #reader-image{object-fit:contain}#art-actions{max-width:100%}
 .mobile-reader-description{width:100%;padding:26px 26px 14px;flex:1;min-height:0;overflow:auto;color:#241375}
 .mobile-reader-description .mobile-chapter{margin:0 0 10px;font:11px Consolas,monospace;color:#7a69a6;letter-spacing:.09em}
 .mobile-reader-description h1{font-size:28px;line-height:1.3;letter-spacing:.02em;font-weight:600;margin:0 0 13px}
 .mobile-reader-description p{margin:0;font-size:14px;line-height:1.8;color:#6a5c8e;max-width:32em}
 .mobile-reader-description a{display:block;color:#392381;font-size:17px;line-height:2;text-decoration:none}
 .mobile-reader-description .mobile-zoom{margin-top:20px;padding:0 0 5px;min-height:44px;background:none;border:0;border-bottom:1px solid #a291ce;border-radius:0;font-size:13px;color:#392381}
 #reader #reader-tools{position:relative;left:auto;bottom:auto;transform:none;flex:none;margin:0 95px max(22px,env(safe-area-inset-bottom)) 22px;width:calc(100% - 117px);padding:5px 0;justify-content:space-between;border:0;border-top:1px solid #b8a9d8;border-radius:0;box-shadow:none;background:none;gap:2px}
 #reader-tools button{min-width:44px;min-height:48px;font-size:20px;padding:8px}
 #reader-count{min-width:57px;font-size:12px}
 #reader #reader-tools #reader-motion{position:absolute;bottom:70px;left:0;font-size:12px;min-height:36px;padding:6px 10px;background:#f6f3ff;border:1px solid #c8bde5;border-radius:18px}
 #reader .reader-guide{right:20px;bottom:max(18px,env(safe-area-inset-bottom));--guide-size:50px}
 .reader-guide-bubble{font-size:11px;padding:9px 11px;bottom:45px}
 #reader-message{top:80px;width:max-content;max-width:90%;font-size:12px;z-index:10}
 #reader button:focus-visible,.index-mobile button:focus-visible{outline:2px solid #4932bf;outline-offset:3px}
 @media(max-height:740px){#portal-directory .directory-scene{padding-top:75px;gap:10px}#portal-directory .index-mobile button{min-height:64px;padding:8px 0}#reader #reader-sheet{margin-top:5px}.mobile-reader-description{padding-top:16px}.mobile-reader-description h1{font-size:24px}.mobile-reader-description .mobile-zoom{margin-top:8px}}
}
@media(orientation:landscape) and (max-height:550px){#reader-tools{bottom:5px;padding:2px 4px}#reader-tools button{min-height:32px}#reader .reader-guide{--guide-size:40px;bottom:6px}#fixed-ui .intro-copy,#fixed-ui .intro-disciplines{display:none}#fixed-ui header{padding:14px 22px}#fixed-ui footer{bottom:12px}#reader-guide-bubble{display:none}}

/* Restore webpage chrome; remove only the printed footer strip from mobile artwork. */
.detail-art-crop{position:relative;width:180%;aspect-ratio:var(--clean-ratio,1.91);overflow:hidden}
#detail-scroll .detail-art-crop img{position:absolute;inset:0;width:100%;height:calc(100% / .935);object-fit:fill}
@media(max-width:700px) and (orientation:portrait){
 #reader{--mobile-edge:24px;overflow-y:auto;padding:0 0 max(16px,env(safe-area-inset-bottom));}
 #reader .mobile-reader-header{padding:max(22px,env(safe-area-inset-top)) var(--mobile-edge) 14px;}
 .mobile-reader-header span{font:13px/1.5 Consolas,monospace;font-weight:400;letter-spacing:.02em}
 .mobile-reader-header button{font-size:13px;min-height:44px}
 #reader #reader-sheet{aspect-ratio:var(--clean-ratio,1.91);overflow:hidden;margin-top:clamp(20px,5svh,44px)}
 #reader #reader-image{width:100%;height:calc(100% / .935);object-fit:fill}
 .mobile-reader-description{padding:28px var(--mobile-edge) 20px;flex:1;overflow:auto}
 .mobile-reader-description .mobile-chapter{display:none}
 .mobile-reader-description h1{font-size:26px;line-height:1.35;margin:0 0 12px;letter-spacing:0;text-wrap:balance}
 .mobile-reader-description p{font-size:16px;line-height:1.6;text-wrap:pretty}
 .mobile-reader-description .mobile-zoom{font-size:14px;margin-top:18px;min-height:44px}
 .mobile-contact{margin-top:16px}.mobile-reader-description a{font-size:16px;min-height:44px;overflow-wrap:anywhere}
 .mobile-reader-footer{position:relative;display:flex;flex-direction:column;flex:none;width:100%;padding:14px 94px 0 var(--mobile-edge);gap:10px;isolation:isolate}
 .mobile-reader-footer::before{content:'';position:absolute;top:0;left:var(--mobile-edge);right:var(--mobile-edge);height:1px;background:#b8a9d877}
 .mobile-footer-label{font-size:13px;line-height:1.5;color:#756695}
 #reader .mobile-reader-footer #reader-tools{position:static;transform:none;width:100%;margin:0;padding:0;display:flex;justify-content:space-between;border:0;box-shadow:none;background:none;gap:8px}
 #reader-tools button{min-height:44px;min-width:44px;font-size:20px}
 #reader-count{font:13px/1.5 Consolas,monospace;font-variant-numeric:tabular-nums}
 #reader .mobile-reader-footer #reader-motion{position:absolute;bottom:112px;left:var(--mobile-edge);font-size:13px;min-height:40px}
 #reader .reader-guide{right:20px;bottom:max(22px,env(safe-area-inset-bottom));--guide-size:50px}
 .reader-guide-bubble{font-size:13px;line-height:1.5}
 .mobile-directory-heading{font-size:13px}.mobile-directory-heading span:last-child{font-size:13px}
 .mobile-directory-note{font-size:13px}.index-mobile small{font-size:13px}
 @media(max-height:740px){#reader #reader-sheet{margin-top:10px}.mobile-reader-description{padding-top:20px}.mobile-reader-description h1{font-size:24px}.mobile-reader-description .mobile-zoom{margin-top:12px}}
}
@media(max-width:700px) and (orientation:portrait){.mobile-reader-footer{text-align:left;align-items:stretch}}

.detail-movie{position:absolute;inset:0;width:100%;height:calc(100% / .935);object-fit:contain;background:transparent}
@media(max-width:700px) and (orientation:portrait){
 #reader .mobile-reader-footer #reader-tools{display:grid;grid-template-columns:44px 1fr 44px;align-items:center}
 #reader .mobile-reader-footer #reader-tools #reader-motion{position:static;grid-column:1 / -1;grid-row:1;justify-self:start;min-height:36px;font-size:12px}
 #reader .mobile-reader-footer #reader-prev{grid-column:1;grid-row:2}
 #reader .mobile-reader-footer #reader-count{grid-column:2;grid-row:2;text-align:center}
 #reader .mobile-reader-footer #reader-next{grid-column:3;grid-row:2}
}