@font-face{font-family:Maple;src:url('./assets/artwork/mobile-20261026-v2-silhouette/fonts/Maplestory-Light.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Maple;src:url('./assets/artwork/mobile-20261026-v2-silhouette/fonts/Maplestory-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{font-family:Maple,'Apple SD Gothic Neo',sans-serif;color:#f5ecda;background:#10171a;color-scheme:dark;--rail:320px;--art-reserve:288px;--point-clearance:48px;--gold:#d8b17e;--muted:#939b9a;--line:#e9d3aa25}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit}button:disabled{opacity:.25;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #f1c58a;outline-offset:5px}button{border:0;background:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link{position:fixed;z-index:50;top:-100px;left:24px;padding:12px 18px;background:#10171a}.skip-link:focus{top:16px}
.gallery{position:absolute;inset:0 var(--rail) 0 0;isolation:isolate;overflow:hidden;background:#182024}
.art-viewport{position:absolute;inset:92px 0 196px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior:contain;touch-action:pan-x;cursor:grab}.art-viewport::-webkit-scrollbar{display:none}.art-viewport.is-dragging{cursor:grabbing}.art-viewport:focus-visible{outline-offset:-4px}
.art-world{position:relative;display:block;height:100%;width:calc((100svh - var(--art-reserve))*4);margin-inline:auto;aspect-ratio:4/1}.panorama{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none;user-select:none}
.gallery-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#10181b70 0,transparent 18%,transparent 74%,#0b141a90 86%,#0b141af2 100%);z-index:2}
.gallery-header{position:absolute;z-index:4;top:34px;left:38px;right:38px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.wordmark{font-size:19px;font-weight:700;letter-spacing:.16em;text-decoration:none;pointer-events:auto;text-shadow:0 2px 15px #0006}.wordmark span{color:var(--gold)}
.scene-points{position:absolute;inset:0}.scene-point{position:absolute;width:34px;height:34px;transform:translate(-50%,-50%);border:1px solid #e0c99b9c;border-radius:50%;background:#162127cf;color:#f8e4bf;font-size:12px;box-shadow:0 3px 16px #0006;display:grid;place-items:center;transition:background .2s,border-color .2s,box-shadow .2s}.scene-point:hover,.scene-point[aria-current=true]{background:#dfbd87;color:#192126;border-color:#fff1d0;box-shadow:0 0 0 5px #d7ad6740,0 3px 16px #0006}.point-name{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%);font-size:12px;white-space:nowrap;padding:7px 10px;background:#111b20eb;border:1px solid var(--line);color:#faedd4;opacity:0;pointer-events:none;transition:opacity .18s}.scene-point:hover .point-name,.scene-point:focus-visible .point-name{opacity:1}
.gallery-bottom{position:absolute;z-index:4;left:38px;right:38px;bottom:28px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;pointer-events:none}.current-story{max-width:100%}.current-heading{display:flex;align-items:center;gap:18px;font-size:11px;letter-spacing:.15em;color:#dfc59b}.short-rule{height:1px;width:46px;background:var(--gold)}.current-story h1{font-size:clamp(26px,2.75vw,44px);line-height:1.25;letter-spacing:-.035em;margin:17px 0 18px;word-break:keep-all;text-wrap:balance;text-shadow:0 3px 22px #0008}.story-link{pointer-events:auto;font-size:14px;padding:0 0 8px;border-bottom:1px solid #e6d1aa6b;display:flex;align-items:center;gap:36px}.story-link span{font-size:21px;color:var(--gold)}.story-link:hover{color:#fff; border-color:var(--gold)}

.sidebar{position:fixed;z-index:8;right:0;top:0;bottom:0;width:var(--rail);padding:40px 30px 22px;background:#11191c;border-left:1px solid #e3c79721;display:flex;flex-direction:column;box-shadow:-18px 0 70px #08121532}.eyebrow{font-size:10px;letter-spacing:.16em;color:#a3a698;margin:0 0 17px}.sidebar-heading h2{font-size:25px;letter-spacing:-.035em;font-weight:400;margin:0}.heading-line{display:block;width:30px;height:2px;background:var(--gold);margin-top:24px}.work-navigation{margin:25px -12px 20px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#b99a6a44 transparent;min-height:0;flex:1}.work-navigation button{display:grid;grid-template-columns:22px 1fr 10px;gap:13px;align-items:center;text-align:left;width:100%;padding:13px 12px;position:relative;line-height:1.45;color:#a3a6a4;font-size:16px;transition:color .18s,background .18s;flex:none}.work-navigation .work-number{font-size:10px;color:#ab9674;align-self:start;padding-top:5px;letter-spacing:.04em}.work-navigation .work-name{word-break:keep-all}.nav-dot{width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:0}.work-navigation button[aria-current=true]{color:#fbe9c7;background:linear-gradient(90deg,#d2ab6b11,transparent);font-weight:700}.work-navigation button[aria-current=true] .nav-dot{opacity:1}.work-navigation button:hover{color:#fff1d6;background:#dfc7980a}
.sidebar-footer{border-top:1px solid var(--line);padding-top:21px;flex:none}.department-links{display:flex;gap:18px;margin-bottom:19px}.department-links button{padding:0;font-size:11px;color:#a5aeac;display:flex;gap:7px}.department-links button:hover{color:#f1d3a2}.department-links span{font-size:12px;color:#b59a73}.vertical-link{display:flex;align-items:center;justify-content:space-between;text-decoration:none;font-size:11px;color:#c2c3b9}.vertical-link:hover{color:#f8dfb6}
.work-dialog{position:fixed;padding:0;margin:auto;width:min(860px,calc(100vw - 96px));max-width:none;max-height:calc(100svh - 64px);overflow:auto;border:1px solid #d9c49e40;border-radius:3px;color:#fff2dd;background:#111b20;box-shadow:0 30px 120px #000b}
.work-dialog::backdrop{background:#071116aa}
.work-dialog[open]{animation:detail-in .24s cubic-bezier(.2,.75,.2,1)}
@keyframes detail-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.detail-frame{position:relative;min-height:340px;background:#111b20}
.detail-top{display:flex;align-items:center;gap:18px;padding:24px 32px 0;font-size:11px;letter-spacing:.14em;color:#d1b88e}
.detail-kicker{color:#718087;font-size:10px;letter-spacing:.16em}
.close-detail{margin-left:auto;width:38px;height:38px;border:1px solid #f4dfb52e;font-size:27px;font-weight:400;line-height:1;display:grid;place-items:center;color:#dac8ac}
.close-detail:hover{background:#253239;color:#fff2d9}
.detail-copy{padding:24px 56px 54px;color:#fff5df}
.detail-rule{display:block;width:32px;height:2px;margin-bottom:20px;background:var(--accent,#d8b17e)}
.detail-copy h2{font-size:clamp(29px,3.4vw,44px);font-weight:700;line-height:1.3;letter-spacing:-.035em;word-break:keep-all;margin:0}
.detail-description{font-size:16px;line-height:1.9;min-height:140px;margin:28px 0 0;word-break:keep-all;white-space:pre-line;color:#c2ccc9}
.detail-footer{display:flex;justify-content:space-between;align-items:center;min-height:64px;padding:0 42px;border-top:1px solid #d2bb922b;background:#0e181d}
.detail-footer button{min-height:44px;min-width:72px;padding:8px 10px;font-size:13px;color:#dac6a7}
.detail-footer button:hover:enabled{color:#fff1cf}
@media(max-width:1150px){:root{--rail:282px}.sidebar{padding:32px 24px 20px}.sidebar-heading h2{font-size:23px}.work-navigation button{font-size:14px;padding-top:11px;padding-bottom:11px;gap:10px}.gallery-header{left:27px;right:27px}.gallery-bottom{left:27px;right:27px;bottom:24px}.current-story{max-width:100%}.department-links{gap:12px}}
@media(max-height:680px){:root{--point-clearance:40px;--art-reserve:234px}.sidebar{padding-top:24px}.eyebrow{margin-bottom:10px}.heading-line{margin-top:17px}.work-navigation{margin-top:15px;margin-bottom:12px;gap:0}.work-navigation button{padding-top:9px;padding-bottom:9px}.sidebar-footer{padding-top:14px}.department-links{margin-bottom:15px}.gallery-header{top:25px}.current-story h1{font-size:29px;margin:10px 0 12px}.gallery-bottom{bottom:20px}.art-viewport{inset:74px 0 160px}.detail-frame{min-height:260px}.detail-copy{padding:16px 40px 28px}.detail-copy h2{font-size:30px}.detail-description{min-height:90px;font-size:14px;margin-top:20px}}
@media(max-width:700px){:root{--rail:0px}.sidebar{display:none}.gallery-bottom{left:24px;right:24px}.current-story{max-width:100%}.work-dialog{width:calc(100vw - 32px)}.detail-copy{padding:20px 28px 32px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.detail-footer[hidden]{display:none}

.work-external-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 15px;border:1px solid #d7bb8373;border-radius:2px;background:#111a21d9;color:#f7dfac;font-size:15px;line-height:1.5;text-decoration:none;pointer-events:auto;white-space:normal;box-shadow:0 4px 14px #0002}
.work-external-link:hover{background:#283136;color:#fff0cd;border-color:#e6c895}
.work-external-link:active{background:#364044}