*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{font-family:"Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif;background:#f1eee6;color:#292d2a;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;cursor:pointer}button:focus-visible{outline:2px solid currentColor;outline-offset:5px}
#stage{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden;isolation:isolate}
.slide{--u:1;--paper:#f1eee6;--ink:#292d2a;--accent:#d95c45;--intro-ms:4600ms;--content-delay:3400ms;position:absolute;inset:0;overflow:hidden;background:var(--paper);color:var(--ink);visibility:hidden}
.slide.current,.slide.entering,.slide.leaving{visibility:visible}
.slide.entering{z-index:3;animation:pageIn 1.1s cubic-bezier(.76,0,.24,1) both}.slide.leaving{z-index:2;animation:pageOut 1.1s cubic-bezier(.76,0,.24,1) both}
.slide:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:7;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23888' filter='url(%23n)' opacity='.22' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}
.mandra{--paper:#1c302a;--ink:#f3f1e4;--accent:#dce39e}.shiro{--paper:#eaf0f2;--ink:#293e4c;--accent:#9c7337}
/* One complete brand lockup travels from the centre to the masthead. */
.brandmark{position:absolute;top:4.5%;left:7%;display:flex;align-items:center;gap:calc(15px * var(--u));z-index:14;transform-origin:0 50%;width:max-content}
.brand-symbol{display:block;object-fit:contain;width:calc(64px * var(--u));height:calc(72px * var(--u));flex:none}
.brand-words{display:flex;flex-direction:column;gap:calc(5px * var(--u))}.brand-name{font-size:calc(25px * var(--u));line-height:1.2;letter-spacing:calc(3px * var(--u));font-weight:750;white-space:nowrap}.brand-kicker{font-size:calc(8px * var(--u));letter-spacing:calc(2px * var(--u));opacity:.65;white-space:nowrap}
.brandmark.no-logo .brand-name{font-size:calc(30px * var(--u))}
.brand-veil{position:absolute;inset:0;background:var(--paper);z-index:12;pointer-events:none}
.intro-note{position:absolute;left:7%;right:7%;top:60%;text-align:center;z-index:13;pointer-events:none;letter-spacing:calc(5px * var(--u));font-size:calc(18px * var(--u));line-height:2;color:var(--ink)}
.intro-note b{display:inline-block;font-size:calc(24px * var(--u));font-weight:600;letter-spacing:calc(4px * var(--u));color:var(--accent)}
.current .brandmark,.entering .brandmark{animation:brandJourney var(--intro-ms) cubic-bezier(.6,0,.2,1) both}
.current .brand-veil,.entering .brand-veil{animation:veilOut var(--intro-ms) linear both}
.current .intro-note,.entering .intro-note{animation:introNote var(--intro-ms) ease both}
.edition{position:absolute;top:6.2%;right:7%;font-size:calc(10px * var(--u));letter-spacing:calc(2.5px * var(--u));z-index:5;opacity:.65}
.page-content{position:absolute;inset:0;opacity:0}
.current .page-content,.entering .page-content{animation:contentIn .9s ease both;animation-delay:var(--content-delay)}
.page-heading{position:absolute;top:15%;left:7%;right:11%;z-index:4}
.eyebrow{display:flex;align-items:center;gap:calc(12px * var(--u));font-size:calc(11px * var(--u));letter-spacing:calc(3px * var(--u));font-weight:500;opacity:.7}
.eyebrow:before{content:"";width:calc(24px * var(--u));height:1px;background:currentColor}
.page-heading h1{margin:calc(15px * var(--u)) 0 calc(12px * var(--u));font-size:calc(48px * var(--u));line-height:1.15;font-weight:750;letter-spacing:calc(-2px * var(--u))}
.page-heading h1 span{font-size:calc(29px * var(--u));font-weight:400;letter-spacing:0}
.page-heading p{margin:0;font-size:calc(15px * var(--u));line-height:1.6;letter-spacing:calc(3px * var(--u));opacity:.65}
.sale-banner{display:flex;align-items:center;gap:calc(15px * var(--u))}
.sale-banner strong{padding:calc(7px * var(--u)) calc(15px * var(--u));font-size:calc(29px * var(--u));line-height:1.15;font-weight:800;letter-spacing:calc(4px * var(--u));background:var(--accent);color:var(--paper);border-radius:calc(3px * var(--u))}
.sale-banner span{font-size:calc(11px * var(--u));letter-spacing:calc(3px * var(--u));opacity:.6}
.sale .page-heading{top:14%}.sale .page-heading h1{font-size:calc(64px * var(--u));margin-top:calc(12px * var(--u))}.sale .page-heading h1 em{color:var(--accent);font-style:normal}
/* Every paper frame preserves the original photograph's complete aspect ratio. */
.album-board{position:absolute;left:5.5%;right:10%;top:30.5%;bottom:15%;z-index:3;overflow:visible;--photo-pad:8px;--caption-height:24px}
.sale .album-board{bottom:20%}
.album-board:before{content:"";position:absolute;inset:9% 5%;border:1px solid currentColor;opacity:.055;border-radius:50%;transform:rotate(-15deg)}
.album-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(var(--angle,0deg)) scale(var(--scale,1));transform-origin:center;transition:left 1.35s cubic-bezier(.25,.7,.2,1),top 1.35s cubic-bezier(.25,.7,.2,1),transform 1.35s cubic-bezier(.25,.7,.2,1);will-change:transform;margin:0}
.card-arrival{width:100%;height:100%;animation:photoArrive 1.2s cubic-bezier(.2,.7,.25,1) both;animation-delay:calc(var(--content-delay) + var(--order) * 120ms)}
.photo-paper{height:100%;width:100%;position:relative;padding:var(--photo-pad);padding-bottom:calc(var(--photo-pad) + var(--caption-height));background:#fffdf8;box-shadow:0 calc(10px * var(--u)) calc(28px * var(--u)) #00000020;color:#4b4f48}
.album-card.is-main .photo-paper{box-shadow:0 calc(14px * var(--u)) calc(40px * var(--u)) #00000030}
.photo-paper img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#f8f7f3}
.photo-paper figcaption{position:absolute;left:var(--photo-pad);right:var(--photo-pad);bottom:calc(var(--photo-pad) * .6);height:var(--caption-height);display:flex;align-items:center;justify-content:space-between;font-size:calc(9px * var(--u));letter-spacing:calc(1.3px * var(--u));white-space:nowrap}
.photo-paper figcaption span:last-child{font-size:calc(8px * var(--u));opacity:.6}
.album-card.is-main figcaption b{color:#a85743}.sale .album-card.is-main figcaption b{color:#5e6d45}
.album-note{position:absolute;right:6.5%;top:37%;writing-mode:vertical-rl;letter-spacing:calc(4px * var(--u));font-size:calc(10px * var(--u));opacity:.5}
.listing-info{position:absolute;left:7%;right:10%;bottom:9%;display:flex;justify-content:space-between;align-items:center;gap:calc(12px * var(--u));z-index:4}
.listing-info .seller{display:flex;flex-direction:column;gap:calc(8px * var(--u))}.seller b{font-size:calc(20px * var(--u));font-weight:600;letter-spacing:calc(3px * var(--u))}.seller span{font-size:calc(12px * var(--u));letter-spacing:calc(2px * var(--u));opacity:.7}
.price{display:flex;gap:calc(5px * var(--u));align-items:baseline;color:var(--accent);white-space:nowrap}.price small{font-size:calc(25px * var(--u))}.price strong{font-family:Arial,sans-serif;font-size:calc(78px * var(--u));font-weight:400;line-height:1;letter-spacing:calc(-4px * var(--u))}.price em{font-size:calc(13px * var(--u));font-style:normal;letter-spacing:calc(2px * var(--u));margin-left:calc(5px * var(--u))}
.folio{position:absolute;left:7%;right:10%;bottom:4.6%;display:flex;justify-content:space-between;align-items:center;z-index:4}.fox .folio{bottom:6%}
.folio .caption{font-size:calc(12px * var(--u));letter-spacing:calc(3px * var(--u));opacity:.65}.folio .index{font-size:calc(33px * var(--u));font-family:Georgia,serif;letter-spacing:calc(-2px * var(--u))}.index em{font:400 calc(10px * var(--u)) Arial,sans-serif;letter-spacing:1px;opacity:.5;margin-left:8px}
.scene-nav{position:fixed;right:2%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:18px;z-index:20;mix-blend-mode:difference;color:white}
.scene-nav button{position:relative;display:grid;place-items:center;border:0;background:none;color:inherit;width:24px;height:26px;padding:0}.scene-nav i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.4;transition:transform .4s,opacity .4s}.scene-nav button.active i{transform:scale(1.4);opacity:1}.scene-nav button.active:before{content:"";position:absolute;inset:3px 2px;border:1px solid currentColor;border-radius:50%;opacity:.6}.scene-nav span{display:none}
.controls{position:fixed;right:4%;bottom:2%;display:flex;gap:8px;z-index:25;opacity:0;pointer-events:none;transition:opacity .4s}.controls.visible,.controls:focus-within{opacity:1;pointer-events:auto}.controls button{width:36px;height:36px;border:1px solid #ffffff55;border-radius:50%;background:#26322bd9;color:white;display:grid;place-items:center}.controls svg{width:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.timeline{position:fixed;bottom:0;left:0;right:0;height:3px;z-index:30;background:#ffffff18}#progress{height:100%;background:#d55e46;transform:scaleX(0);transform-origin:left}#progress.running{animation:progress var(--duration,30000ms) linear forwards}.paused #progress{animation-play-state:paused}
.loading{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;letter-spacing:3px}.loading img{width:140px;height:152px;object-fit:contain}.loading strong{font-size:32px}.loading span{font-size:14px;opacity:.6}.loading i{width:40px;height:2px;background:#d55e46;animation:loading 1s ease-in-out infinite}.loading button{font-size:16px;padding:12px 24px}
#notice{position:fixed;bottom:10%;left:50%;transform:translateX(-50%);z-index:40;padding:12px 22px;border-radius:30px;font-size:13px;white-space:nowrap;color:white;background:#172320dd;opacity:0;pointer-events:none;transition:opacity .3s}#notice.visible{opacity:1}
.image-error{opacity:.35;padding:15%}.image-fallback{position:absolute;left:10%;right:10%;top:45%;text-align:center;font-size:12px;opacity:.5}
@keyframes brandJourney{0%{opacity:0;transform:translate(var(--intro-x),calc(var(--intro-y) + 12px)) scale(var(--intro-scale))}10%,52%{opacity:1;transform:translate(var(--intro-x),var(--intro-y)) scale(var(--intro-scale))}96%,100%{opacity:1;transform:translate(0,0) scale(1)}}
@keyframes veilOut{0%,57%{opacity:1}88%,100%{opacity:0}}
@keyframes introNote{0%,9%{opacity:0;transform:translateY(12px)}20%,48%{opacity:.8;transform:translateY(0)}65%,100%{opacity:0;transform:translateY(-12px)}}
@keyframes contentIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes photoArrive{from{opacity:0;transform:translate(20px,45px) rotate(7deg) scale(.85)}to{opacity:1;transform:translate(0,0) rotate(0deg) scale(1)}}
@keyframes pageIn{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes pageOut{to{transform:translateY(-20%)}}@keyframes progress{to{transform:scaleX(1)}}@keyframes loading{50%{transform:scaleX(.3);opacity:.3}}
@media(min-aspect-ratio:4/5){.brandmark{left:5%;top:5%}.edition{right:5%;top:7%}.page-heading,.sale .page-heading{left:5%;right:65%;top:25%}.page-heading h1{font-size:calc(42px * var(--u));line-height:1.25}.page-heading h1 span{display:block;font-size:calc(26px * var(--u));margin-top:calc(9px * var(--u))}.sale .page-heading h1{font-size:calc(66px * var(--u))}.album-board,.sale .album-board{left:40%;right:7%;top:15%;bottom:12%}.listing-info{left:5%;right:65%;bottom:23%;align-items:flex-start;flex-direction:column;gap:calc(24px * var(--u))}.seller{order:2}.price strong{font-size:calc(76px * var(--u))}.seller span{font-size:calc(11px * var(--u))}.folio,.fox .folio{left:5%;right:65%;bottom:10%}.folio .caption{font-size:calc(10px * var(--u));letter-spacing:calc(1.5px * var(--u))}.album-note{right:3%;top:33%}.intro-note{top:65%}.sale-banner span{display:none}.fox .page-heading p{line-height:2}}
@media(min-aspect-ratio:4/5){.album-note{right:5%}}
@media(max-width:600px){.controls button{width:32px;height:32px}.scene-nav{right:1.6%;gap:12px}.scene-nav button{width:20px;height:24px}.scene-nav button.active:before{inset:3px 0}.photo-paper figcaption{letter-spacing:.7px}.loading img{width:100px;height:108px}.loading strong{font-size:25px}}
@media(prefers-reduced-motion:reduce){.slide.entering,.slide.leaving{animation-duration:.2s}.brandmark{animation:none!important;transform:translate(0,0)!important}.brand-veil,.intro-note{display:none}.page-content{animation:none!important;opacity:1}.card-arrival{animation:none}.album-card{transition-duration:.15s}}