@font-face{font-family:"SUSU Editorial";src:url("assets/fonts/cormorant-garamond.ttf") format("truetype");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"SUSU Editorial";src:url("assets/fonts/cormorant-garamond-italic.ttf") format("truetype");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url("assets/fonts/dm-sans-latin.woff2") format("woff2");font-style:normal;font-weight:100 1000;font-display:swap}
:root{--font-display:"SUSU Editorial","Baskerville","Times New Roman",serif;--font-reading:"Songti SC","Noto Serif CJK SC","SimSun",serif;--font-ui:"DM Sans","PingFang SC","Microsoft YaHei",sans-serif;--ink:#262624;--ink-secondary:#595956;--ink-caption:#55534f}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#fafaf9;color:var(--ink);font-family:var(--font-ui)}header,footer{position:fixed;left:3.5vw;right:3.5vw;display:flex;align-items:center;justify-content:space-between;z-index:2000;pointer-events:none;font-size:14px}header{top:25px}header a{font-family:Arial,sans-serif;pointer-events:auto;color:inherit;text-decoration:none;font-size:25px;font-weight:700;letter-spacing:-1.5px}header>span{color:#737373}.edition{font-size:12px;letter-spacing:1.3px}footer{bottom:25px;color:#737373;font-size:12px;letter-spacing:1px}footer i{font-style:normal;margin:0 12px}#gallery{position:absolute;inset:0;touch-action:none;cursor:grab;user-select:none}#gallery.dragging{cursor:grabbing}#world,#cards{position:absolute;inset:0}.intro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;z-index:500;pointer-events:none;width:90%}h1{font-family:var(--font-display);font-size:clamp(60px,7.2vw,96px);font-weight:500;line-height:.92;letter-spacing:.025em;margin:0 0 26px;padding:0;font-synthesis:none}
.title-name,.title-kind{display:block}
.title-kind{margin-top:.12em;font-size:.46em;line-height:1.1;font-weight:400;font-style:italic;letter-spacing:.015em}
.intro p{font-family:var(--font-reading);font-size:14px;font-weight:400;line-height:2;letter-spacing:.035em;margin:0;color:var(--ink-secondary);text-wrap:balance}
.art{position:absolute;left:50%;top:50%;border:0;padding:0;background:#ececea;border-radius:13px;overflow:hidden;cursor:pointer;box-shadow:0 1px 2px #0000000a;will-change:transform,opacity;outline-offset:5px}.art img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}html[data-input="keyboard"] .art:focus-visible{outline:2px solid #1a1a1a}dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;padding:0;background:transparent;overflow:hidden;color:inherit}dialog::backdrop{background:transparent}.veil{position:absolute;inset:0;background:#fafaf980;backdrop-filter:blur(16px);opacity:0}figure{margin:0;position:fixed;inset:0;pointer-events:none}.viewer-image{position:fixed;object-fit:contain;border-radius:13px;box-shadow:0 10px 45px #0000000c;background:#f4f4f2}figcaption{position:fixed;font-family:var(--font-reading);font-size:14px;font-weight:400;line-height:1.7;letter-spacing:.035em;color:var(--ink-caption);text-wrap:balance;opacity:0}.close{position:absolute;right:3.5vw;top:25px;z-index:3;background:#fafaf9c9;border:1px solid #dededb;border-radius:30px;padding:10px 17px;font-size:14px;cursor:pointer;opacity:0}@media(max-width:600px){header{top:20px;left:6vw;right:6vw}.edition{display:none}footer{bottom:20px;left:6vw;right:6vw;font-size:11px;letter-spacing:0}footer>span:first-child{font-size:10px}.intro p{font-size:13px;letter-spacing:.02em}h1{margin-bottom:22px}.art{border-radius:9px}.close{right:6vw;top:17px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* Two views share the same artwork elements and detail viewer. */
.mode-switch{pointer-events:auto;display:flex;gap:2px;padding:2px;border:0;border-radius:10px;background:#f1f1f2}
.mode-switch button{display:grid;place-items:center;width:32px;height:34px;padding:0;border:0;background:transparent;color:#626260;border-radius:10px;font:inherit;cursor:pointer;transition:color .18s}
.mode-switch button[aria-pressed="true"]{color:#30302e}
html[data-input="keyboard"] .viewer-nav:focus-visible{outline:2px solid #777;outline-offset:3px}
.art{overflow:visible;background:transparent;box-shadow:none;color:inherit;font-family:inherit;transform-style:preserve-3d}
.art img{border-radius:inherit;background:#ececea;box-shadow:0 1px 2px #0000000a}

.art-label{position:absolute;left:0;top:100%;padding-top:9px;text-align:left;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;line-height:1.6;font-weight:400;letter-spacing:.04em}
.art-label small{display:block;font-size:.85em;color:#8b8b85;letter-spacing:.13em}
.exhibition-title{position:absolute;top:28px;left:50%;transform:translateX(-50%);text-align:center;font-size:30px;line-height:1;letter-spacing:-2px;font-weight:600;z-index:1200;opacity:0;visibility:hidden;pointer-events:none}
.exhibition-title span{display:block;margin-top:12px;font-size:12px;font-weight:400;letter-spacing:3px;color:#858580}
.exhibition-note{position:absolute;bottom:75px;left:50%;transform:translateX(-50%);text-align:center;z-index:1200;width:min(88%,480px);opacity:0;visibility:hidden;pointer-events:none}
.exhibition-note p{font-size:14px;line-height:1.9;color:#747470;letter-spacing:.5px;margin:0 0 16px}
body[data-mode="exhibition"] header>span{visibility:hidden}
@media(max-width:600px){header>span{display:none}.exhibition-title{top:94px;font-size:29px}.exhibition-title span{margin-top:9px}.exhibition-note{bottom:67px}.exhibition-note p{font-size:13px}}
@media(max-height:550px){.exhibition-note{bottom:44px}.exhibition-note p{display:none}.exhibition-title span{display:none}}

.conveyor{position:absolute;inset:0;width:100%;height:100%;z-index:650;opacity:0;visibility:hidden;touch-action:none;cursor:grab}

.mode-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2px;isolation:isolate}
.mode-indicator{position:absolute;left:2px;top:2px;bottom:2px;width:32px;border-radius:10px;background:#fff;box-shadow:0 2px 5px #0000000d,0 5px 12px #00000005;z-index:0;pointer-events:none;will-change:transform}
.mode-switch button[aria-pressed="true"]{background:transparent}
.conveyor{transform-origin:50% 42%;will-change:transform,opacity}

.mode-switch button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mode-switch button[data-mode="sphere"] rect{fill:#f1f1f2;transition:fill .18s}
.mode-switch button[data-mode="sphere"][aria-pressed="true"] rect{fill:#fff}


.viewer-nav{position:fixed;top:50%;transform:translateY(-50%);z-index:4;display:grid;place-items:center;width:48px;height:48px;border:1px solid #dededb;border-radius:50%;background:#fafaf9e6;color:#494943;cursor:pointer;opacity:0;transition:background .18s}
.viewer-previous{left:24px}.viewer-next{right:24px}
.viewer-nav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:600px){.viewer-nav{width:36px;height:36px}.viewer-previous{left:8px}.viewer-next{right:8px}.viewer-nav svg{width:20px;height:20px}}

.close{font-family:var(--font-ui);font-size:12px;font-weight:400;line-height:1.4;letter-spacing:.02em;white-space:nowrap;color:var(--ink-secondary)}

@media(max-width:600px){figcaption{font-size:12px;line-height:1.75}}
@media(max-height:550px){h1{font-size:clamp(44px,6vw,72px);margin-bottom:16px}.intro p{font-size:12px;line-height:1.8}}

/* First visit: the title anchors the page while decoded artwork joins the scene. */
.art{opacity:0}
.entry-indicator{position:absolute;left:50%;top:calc(100% + 18px);width:48px;height:2px;transform:translateX(-50%);background:#e4e4e1;overflow:hidden;opacity:0;animation:entry-hint .2s .6s forwards}
.entry-indicator::after{content:"";display:block;width:40%;height:100%;background:#878783;animation:entry-sweep 1.2s ease-in-out infinite}
.entry-ready .entry-indicator{display:none}
@keyframes entry-hint{to{opacity:1}}
@keyframes entry-sweep{0%,100%{transform:translateX(-100%)}50%{transform:translateX(250%)}}
@media(prefers-reduced-motion:no-preference){.title-name{animation:entry-type .42s ease-out both}.title-kind{animation:entry-type .42s .06s ease-out both}.intro p{animation:entry-type .42s .12s ease-out both}}
@keyframes entry-type{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.entry-indicator::after{animation:none}}

header .brand{display:inline-flex;align-items:center;gap:7px;line-height:1;white-space:nowrap}
.brand-mark{display:block;width:24px;height:24px;flex:none}
header .brand:focus-visible{outline:2px solid var(--ink-secondary);outline-offset:5px;border-radius:4px}

/* Detail controls match the quiet gallery chrome. */
.close{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;background:#fafaf9e6;transition:background .18s,color .18s}
.close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}

.close:focus{outline:none}
html[data-input="keyboard"] .close:focus-visible{outline:none;background:#fff;border-color:#8b8b83}

/* Keep the mobile gallery in one viewport; transformed artwork must not scroll the page. */
html{overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{position:fixed;inset:0;width:100%;height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}
body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#gallery{overflow:hidden;overflow:clip}
img{-webkit-user-drag:none}

/* Individual artwork placeholders remain visible while images decode. */
.art{background:rgba(243,241,236,.35)}
.art img{position:relative}

/* The display switch is the sole header element in both modes. */
header{justify-content:center}





/* Recovery stays with the loading line instead of a separate page message. */
.entry-reload{position:absolute;left:50%;top:calc(100% + 30px);transform:translateX(-50%);padding:8px 14px;border:0;background:transparent;font:400 12px/1.5 var(--font-ui);letter-spacing:.02em;color:var(--ink-secondary);cursor:pointer;pointer-events:auto;min-height:36px}
.entry-reload[hidden]{display:none}

html[data-input="keyboard"] .entry-reload:focus-visible{outline:1px solid #888;outline-offset:1px;border-radius:4px}
.load-retry-visible .entry-indicator{display:block;opacity:1}
.load-retry-visible .intro{z-index:1500!important}

/* Keep native touch highlighting out of the animated mode switch. */
.mode-switch,.mode-switch *{-webkit-tap-highlight-color:transparent}
.mode-switch button{position:relative;z-index:1;appearance:none;-webkit-appearance:none;touch-action:manipulation}
.mode-switch button:focus{outline:none}
html[data-input="keyboard"] .mode-switch button:focus-visible{box-shadow:inset 0 0 0 1px #8b8b83}


/* Shared interaction treatment: touch never paints a native flash or sticky hover. */
button,button *,a,a *{-webkit-tap-highlight-color:transparent}
button{appearance:none;-webkit-appearance:none}
button:focus{outline:none}
.close,.viewer-nav,.entry-reload{touch-action:manipulation}
@media(hover:hover) and (pointer:fine){
  .art:hover img{box-shadow:0 6px 24px #00000012}
  .mode-switch button:hover{color:#20201e}
  .viewer-nav:hover{background:#fff}
  .close:hover{background:#fff;color:var(--ink)}
  .entry-reload:hover{color:var(--ink)}
}

/* Detail controls share the same size, surface, and icon scale. */
.close{width:48px;height:48px;border:1px solid #dededb;border-radius:50%;background:#fafaf9e6;color:#494943}
.close svg{width:24px;height:24px;stroke-width:1.7}
@media(max-width:600px){.close{width:36px;height:36px}.close svg{width:20px;height:20px}}

 .viewer-image{transform-origin:0 0;backface-visibility:hidden}
#viewer[open] .viewer-image{will-change:transform}