@font-face{font-family:'Feature Display';src:url('./assets/font/FeatureDisplay-Regular-Web.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:'Feature Display';src:url('./assets/font/FeatureDisplay-Medium-Web.ttf') format('truetype');font-weight:500 700;font-display:swap}@font-face{font-family:'Feature Deck';src:url('./assets/font/FeatureDeck-Regular-Web.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:'Feature Deck';src:url('./assets/font/FeatureDeck-Medium-Web.ttf') format('truetype');font-weight:500 700;font-display:swap}@font-face{font-family:'Noto Serif SC';src:url('./assets/font/NotoSerifSC-VariableFont_wght.ttf') format('truetype-variations');font-weight:200 900;font-display:swap} :root{--ink:#050505;--paper:#f7f7f5;--ease:cubic-bezier(.2,1,.2,1);--header:80px} *{box-sizing:border-box;margin:0;padding:0}html{font-size:10px;background:var(--paper);scroll-behavior:smooth}body{min-width:320px;color:var(--ink);font-family:'Feature Deck','Noto Serif SC','Songti SC',serif;background:var(--paper);overflow-x:hidden}a{color:inherit;text-decoration:none}button{border:0;background:none;color:inherit;font:inherit}img,video{display:block;width:100%;height:100%;object-fit:cover}.serif{font-family:'Feature Display','Noto Serif SC',serif}.filters{position:absolute;width:0;height:0}.loader{position:fixed;inset:0;display:grid;place-items:center;background:#fff;z-index:1000;transition:opacity .7s linear,visibility .7s}.loader.hide{opacity:0;visibility:hidden}.loader-mark{font-size:6rem;line-height:.75;writing-mode:vertical-rl;font-weight:400;transform:rotate(-8deg);animation:ink 1.3s var(--ease) both}.loader-mark span:last-child{transform:translateY(-.25em)}@keyframes ink{0%{opacity:0;filter:blur(10px);transform:scale(1.15) rotate(-8deg)}100%{opacity:1;filter:none;transform:scale(1) rotate(-8deg)}} .header{position:fixed;z-index:100;top:0;left:0;width:100%;height:var(--header);display:flex;align-items:center;justify-content:space-between;padding:0 3.6vw;pointer-events:none;color:var(--ink);background:rgba(246,245,241,.55);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);transition:background .45s ease,color .45s ease}.header-dark .header{color:#fff;background:rgba(10,10,10,.42)}.header svg{fill:currentColor}.brand,.header-actions,.ticker div{pointer-events:auto}.brand{width:170px;padding:20px 0;overflow:hidden}.brand svg{display:block;width:166px}.ticker{position:absolute;left:25%;right:25%;overflow:hidden;white-space:nowrap;font-size:1.35rem;text-align:center}.ticker div{display:inline-block}.header-actions{display:flex;align-items:center;gap:1.2rem}.project-link{font-family:'Feature Display','Noto Serif SC',serif;font-size:1.4rem;letter-spacing:.08em;padding:25px 14px}.roll{height:1.2em;display:block;overflow:hidden}.roll span{display:block;transition:transform 1s var(--ease)}.roll:hover span{transform:translateY(-100%)}.menu-trigger{position:relative;width:54px;height:80px;cursor:pointer}.menu-trigger i{position:absolute;left:14px;width:26px;height:1px;background:currentColor;transition:transform .9s var(--ease),opacity .5s}.menu-trigger i:nth-child(1){transform:translateY(-8px)}.menu-trigger i:nth-child(2){transform:translateY(-4px)}.menu-trigger i:nth-child(3){transform:translateY(0)}.menu-trigger i:nth-child(4){transform:translateY(4px);opacity:0}.menu-trigger i:nth-child(5){transform:translateY(8px);opacity:0}.menu-trigger:hover i:nth-child(1){transform:translateY(-16px);opacity:0}.menu-trigger:hover i:nth-child(2){transform:translateY(-12px);opacity:0}.menu-trigger:hover i:nth-child(3){transform:translateY(-8px)}.menu-trigger:hover i:nth-child(4){transform:translateY(-4px);opacity:1}.menu-trigger:hover i:nth-child(5){transform:translateY(0);opacity:1} .menu{position:fixed;inset:0;background:#050505;color:#fff;z-index:90;display:grid;grid-template-columns:57% 43%;padding-top:125px;opacity:0;visibility:hidden;transition:opacity .55s linear,visibility .55s}.menu.open{opacity:1;visibility:visible}.menu-info{padding:0 6.5vw 9vh;display:flex;flex-direction:column;justify-content:flex-end}.menu-info h2{display:flex;align-items:flex-end;gap:25px;margin-bottom:35px}.menu-info h2 b{font-size:3rem;letter-spacing:.15em;font-weight:300}.menu-info h2 em{font:normal 1.7rem 'Feature Display','Noto Serif SC',serif}.menu-info p{font-size:1.35rem;line-height:1.85;margin-bottom:14px}.menu-info .serif{font-size:1.7rem;line-height:1.25}.menu-info small{opacity:.5;margin-top:45px;font:1.1rem 'Feature Display','Noto Serif SC',serif}.menu-contact{padding:0 6.5vw 9vh;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start}.menu-contact h2{font-size:3rem;letter-spacing:.15em;margin-bottom:3rem;display:flex;align-items:baseline;gap:.15em;flex-wrap:wrap}.menu-contact h2 small{font-size:1.1rem;letter-spacing:.05em;font-weight:400;opacity:.5}.menu-contact p{font-size:1.4rem;line-height:2;margin-bottom:4.5rem;max-width:36em;opacity:.85}.menu-phone{display:flex;flex-direction:column;gap:12px}.menu-phone b{font-size:1.4rem;letter-spacing:.1em;font-weight:600}.menu-phone-number{font:2.6rem 'Feature Display','Noto Serif SC',serif;letter-spacing:.06em;color:#fff;text-decoration:none;line-height:1.2}.menu-phone-number:hover{opacity:.7}.menu-close{position:absolute;right:3.8vw;top:0;width:54px;height:80px;cursor:pointer}.menu-close i{position:absolute;left:14px;width:26px;height:1px;background:#fff}.menu-close i:first-child{transform:rotate(45deg)}.menu-close i:last-child{transform:rotate(-45deg)} #fx{position:fixed;inset:0;z-index:60;pointer-events:none;width:100%;height:100%}.cursor{position:fixed;z-index:800;pointer-events:none;left:0;top:0;width:100px;height:100px;margin:-50px;display:grid;place-items:center;color:#fff;opacity:0;transition:opacity .25s}.cursor.visible{opacity:1}.cursor-disc{position:absolute;inset:0;border-radius:50%;background:#050505;transform:scale(0);transition:transform .75s var(--ease),background .4s}.cursor.detail .cursor-disc{transform:scale(1)}.cursor span{position:relative;font-size:1.3rem;letter-spacing:.15em;writing-mode:vertical-rl;opacity:0;transition:opacity .35s}.cursor.detail span{opacity:1} .home{height:100svh;overflow:hidden}.slides{position:fixed;left:0;top:80px;display:flex;align-items:center;height:calc(100svh - 300px);gap:5px;will-change:transform;transition:transform 1.4s var(--ease)}.slide{position:relative;width:45.833vw;height:min(56vh,620px);flex:none;background:#ddd;overflow:hidden;cursor:none;clip-path:inset(0 0 0 0)}.slide-media{position:absolute;inset:-3%;width:106%;height:106%;filter:url(#wave);transition:transform 1.8s var(--ease),filter .4s}.slide:hover .slide-media{transform:scale(1.035)}.slide:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 55%,rgba(255,255,255,.08));opacity:0;transition:opacity .4s}.slide:hover:after{opacity:1}.home-bottom{position:fixed;left:0;right:0;bottom:0;height:220px;display:grid;grid-template-columns:5.6vw minmax(0,1fr) 22.4vw}.home-info{grid-column:2;padding-top:8px}.feature-head{display:flex;align-items:flex-end;border-bottom:1px solid rgba(0,0,0,.2);height:118px}.pager{font:1.4rem 'Feature Display','Noto Serif SC',serif;display:flex;align-items:center;min-width:115px}.pager i{display:block;width:1px;height:14px;background:#000;transform:rotate(30deg);margin:0 28px}.feature-title{white-space:nowrap;font:clamp(20px,2.6vw,32px)/1.15 'Feature Display','Noto Serif SC',serif;letter-spacing:-.02em}.feature-title span:first-of-type{margin-right:.45em}.slide-nav{margin-left:auto;align-self:center;display:flex;gap:16px}.slide-nav-btn{width:32px;height:32px;border-radius:50%;border:1px solid rgba(0,0,0,.25);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(17,17,17,.5);transition:color .35s,border-color .35s,transform .35s var(--ease)}.slide-nav-btn svg{width:13px;height:13px}.slide-nav-btn.next{color:#111}.slide-nav-btn:hover{border-color:rgba(0,0,0,.65);color:#111;transform:scale(1.05)}.slide-title .ja{writing-mode:vertical-rl}.slide-title .en{writing-mode:vertical-rl;font:2.2vw 'Feature Display','Noto Serif SC',serif;margin-left:8px;color:#666} .page{min-height:100svh;padding-top:var(--header)}.page-hero{min-height:74svh;display:flex;align-items:flex-end;padding:9vw 5.5vw 5vw;border-bottom:1px solid rgba(0,0,0,.2);overflow:hidden}.page-kicker{font:1.6rem 'Feature Display','Noto Serif SC',serif;color:#777;margin-bottom:2rem}.page-title{font-size:10vw;line-height:.85;letter-spacing:.02em}.page-title small{font:2rem 'Feature Display','Noto Serif SC',serif;margin-left:2rem}.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#bbb;border-bottom:1px solid #bbb}.project-card{position:relative;aspect-ratio:16/10;background:#111;overflow:hidden;cursor:none;color:#fff}.project-card img{transition:transform 1.6s var(--ease),filter 1s;filter:saturate(.75)}.project-card:hover img{transform:scale(1.07);filter:saturate(1)}.project-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.62))}.project-meta{position:absolute;z-index:2;left:32px;right:32px;bottom:25px;display:flex;justify-content:space-between;align-items:flex-end}.project-meta h3{font:4rem 'Feature Display','Noto Serif SC',serif}.project-meta span{font-size:1.3rem}.contact{min-height:100svh;background:#050505;color:#fff;display:flex;align-items:center;justify-content:flex-end;padding:100px 9vw 60px;position:relative;overflow:hidden}.contact:before{content:"";position:absolute;inset:-10%;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#292929 0,transparent 24%),repeating-radial-gradient(circle at 20% 40%,#111 0 2px,#050505 2px 10px);opacity:.85;transition:background-position .2s}.contact-jp{font-size:5vw;margin-right:4vw}.contact-content{width:32vw}.contact-content h1{font:4vw 'Feature Display','Noto Serif SC',serif;margin-bottom:3rem}.contact-content p{font-size:1.5rem;line-height:2;margin-bottom:5vw}.copy-button{position:relative;width:100%;height:80px;border:1px solid rgba(255,255,255,.35);color:#fff;font:2.4rem 'Feature Display','Noto Serif SC',serif;overflow:hidden}.copy-button:before{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}.copy-button:hover:before{transform:scaleX(1)}.copy-button span{position:relative;transition:color .4s}.copy-button:hover span{color:#000}.footer{height:100px;border-top:1px solid rgba(0,0,0,.2);display:flex;align-items:center;justify-content:space-between;padding:0 5.5vw;font:1.4rem 'Feature Display','Noto Serif SC',serif} .reveal{opacity:0;transform:translateY(70px);transition:opacity 1.1s,transform 1.4s var(--ease)}.reveal.in{opacity:1;transform:none} .category-page{background:#f7f7f5}.category-intro{position:relative;background:#050505;color:#fff}.category-intro-head{display:flex;padding-top:80px}.category-intro-copy{width:36.80556vw;min-height:calc(100svh - 40px);padding:0 1.5rem 40px 4.02778vw;display:flex;flex-direction:column;justify-content:space-between}.category-intro-copy h1{align-self:flex-end;margin-top:-.055em;font-size:9.3vw;line-height:1;letter-spacing:.02em;font-weight:400;writing-mode:vertical-rl}.category-intro-label{width:calc(100% - 20px);border-bottom:1px solid rgba(255,255,255,.22);font-family:'Feature Display','Noto Serif SC',serif}.category-intro-label>div{display:flex;align-items:flex-end;justify-content:space-between;line-height:.78}.category-intro-label>div:first-child{transform:translateY(.7vw)}.category-intro-label span:not(.category-count){font-size:5vw}.category-intro-label em{width:3px;height:3.5vw;background:#fff;transform:skew(-15deg);margin-right:.15em}.category-count{display:inline-flex;align-items:center;margin:4.5em 3.5vw 0 0;font-size:1.6rem!important}.category-count i{font-style:normal}.category-count b{width:19px;height:1px;background:#fff;margin:0 7px}.category-hero{position:relative;width:63.19444vw;height:calc(100svh - 120px);overflow:hidden}.category-hero picture{display:block;width:100%;height:100%}.category-hero img,.category-hero video{will-change:transform;transform:scale(1.04);transition:transform .1s linear}.category-scroll{position:absolute;right:7vw;bottom:.5vw;width:9.6vw;height:9.6vw;border:1px solid rgba(255,255,255,.65);border-radius:50%;color:#fff;display:grid;place-items:center;cursor:pointer;overflow:hidden;transition:background .8s var(--ease),color .8s var(--ease),transform .8s var(--ease)}.category-scroll:hover{background:#fff;color:#000;transform:rotate(8deg)}.category-scroll span{font-size:2.8rem;display:grid;place-items:center}.category-scroll i{position:absolute;font:normal .8rem 'Feature Display','Noto Serif SC',serif;letter-spacing:.22em;bottom:18%}.category-description{padding:10vw 22.3vw 13.7vw 32.77778vw}.category-description p{font-size:1.5rem;line-height:2.05;text-align:justify} .category-page[data-category="photograph"] .category-description p{font-size:1.8rem;line-height:2} .category-showcase{position:relative;background:#f7f7f5}.category-track{position:sticky;top:0;display:flex;width:max-content;height:100svh;padding:110px 4.02778vw 40px;will-change:transform}.category-list-head{position:relative;width:32.9vw;height:100%;padding-left:5.7vw;flex:none}.category-list-head p{font-size:1.4rem;letter-spacing:.12em;margin-bottom:2rem}.category-list-head h2{font:7.5vw/.78 'Feature Display','Noto Serif SC',serif;letter-spacing:-.035em}.category-list-head a{position:absolute;left:5.7vw;bottom:0;font:1.94444vw 'Feature Display','Noto Serif SC',serif;display:flex;align-items:center}.category-list-head a i{font-style:normal;margin-left:14px;transition:transform .9s var(--ease)}.category-list-head a:hover i{transform:translate(6px,-6px)}.category-projects{display:flex;flex:none}.category-project{position:relative;width:26.3vw;height:100%;padding-right:10px;border-left:1px solid rgba(0,0,0,.2);opacity:0;transform:translateY(45px);transition:opacity 1s linear var(--delay,0ms),transform 1.3s var(--ease) var(--delay,0ms)}.category-project:last-child{border-right:1px solid rgba(0,0,0,.2)}.category-project.in{opacity:1;transform:none}.category-card{position:relative;display:block;width:100%;height:100%;cursor:none}.category-card-head{position:absolute;top:0;right:10px;text-align:left}.category-card-head h3{font:1.94444vw/1.3 'Feature Display','Noto Serif SC',serif;margin:.175em 0 .7rem;overflow:hidden}.category-card-head figure{width:18.403vw;height:24.537vw;overflow:hidden;background:#ddd}.category-card-head img{filter:saturate(.82);transform:scale(1.03);transition:transform 10s cubic-bezier(.05,1,.2,1),filter 1s}.category-card:hover .category-card-head img{transform:scale(1.15);filter:saturate(1)}.category-card-foot{position:absolute;left:0;bottom:0;display:flex;align-items:flex-end}.category-card-foot b{font:13.889vw/.72 'Feature Display','Noto Serif SC',serif;letter-spacing:-.05em}.category-arrow{font:normal 3rem 'Feature Display','Noto Serif SC',serif;margin:0 0 .25em 12px;transition:transform .95s var(--ease)}.category-card:hover .category-arrow{transform:translate(8px,-8px)} .category-other{padding:3.47222vw 4.02778vw 25px;background:#f7f7f5}.category-other>header{border-top:1px solid rgba(0,0,0,.2);padding:110px 0 0 5.7vw;margin-bottom:3vw}.category-other>header p{font-size:1.4rem;letter-spacing:.1em;margin-bottom:1.5rem}.category-other>header h2{font:7.5vw/.8 'Feature Display','Noto Serif SC',serif;letter-spacing:-.035em}.category-other ul{display:flex;justify-content:flex-end}.category-other li{width:35.5vw;text-align:right}.other-card{position:relative;display:inline-block;cursor:none}.other-card picture{display:block;width:23.87vw;height:30vw;overflow:hidden}.other-card img{transform:scale(1.03);filter:saturate(.8);transition:transform 10s cubic-bezier(.05,1,.2,1),filter 1s}.other-card:hover img{transform:scale(1.16);filter:saturate(1)}.other-card>span{position:absolute;bottom:0;left:-1.2em;font-size:4.8vw;line-height:.9;text-align:left;writing-mode:vertical-rl;transition:transform 1.1s var(--ease)}.other-card:hover>span{transform:translateY(-14px)}.other-card small{display:block;font:1.3rem 'Feature Display','Noto Serif SC',serif;margin-top:12px;color:#555} @media(max-width:768px){:root{--header:64px}.header{height:64px;padding:0 18px}.brand{width:112px}.brand svg{width:110px}.ticker,.project-link{display:none}.menu-trigger{height:64px}.menu{padding-top:90px;grid-template-columns:1fr}.menu-info{display:none}.menu-contact{padding:0 22px 40px}.menu-close{height:64px;right:18px}.home{height:100svh}.slides{top:64px;height:calc(100svh - 250px);gap:4px}.slide{width:78vw;height:56vh}.home-bottom{height:186px;grid-template-columns:18px minmax(0,1fr) 94px}.feature-head{height:94px}.slide-nav{gap:8px}.slide-nav-btn{width:28px;height:28px}.slide-nav-btn svg{width:12px;height:12px}.pager{min-width:auto;margin-right:10px;font-size:12px}.pager i{margin:0 7px;height:12px}.slide-title{font-size:12vw;padding-right:14px}.slide-title .en{font-size:4vw}.cursor{display:none}.page-hero{min-height:55svh;padding:120px 22px 40px}.page-title{font-size:18vw}.projects-grid{grid-template-columns:1fr}.project-card{aspect-ratio:4/3}.project-meta{left:20px;right:20px}.project-meta h3{font-size:3rem}.contact{justify-content:center;padding:110px 22px 50px}.contact-jp{display:none}.contact-content{width:100%}.contact-content h1{font-size:13vw}.footer{padding:0 22px}.category-intro-head{padding-top:64px;display:block}.category-intro-copy{position:absolute;z-index:2;width:100%;min-height:calc(100svh - 64px);padding:24px 18px;color:#fff;pointer-events:none}.category-intro-copy h1{font-size:18vw;text-shadow:0 2px 25px rgba(0,0,0,.22)}.category-intro-label{width:100%}.category-intro-label span:not(.category-count){font-size:11.5vw}.category-count{font-size:1.2rem!important;margin-right:1.5rem}.category-hero{width:100%;height:calc(100svh - 64px)}.category-scroll{width:92px;height:92px;right:22px;bottom:24px}.category-description{padding:90px 24px 110px}.category-description p{font-size:1.35rem;line-height:2}.category-track{position:relative;display:block;width:100%;height:auto;padding:80px 18px}.category-list-head{width:100%;height:auto;padding:0;margin-bottom:70px}.category-list-head h2{font-size:18vw}.category-list-head a{position:static;font-size:2rem;margin-top:30px}.category-projects{display:block}.category-project{width:100%;height:auto;min-height:142vw;padding:0;border-left:0;border-top:1px solid rgba(0,0,0,.2)}.category-project:last-child{border-right:0;border-bottom:1px solid rgba(0,0,0,.2)}.category-card{height:142vw;padding-top:20px}.category-card-head{position:static}.category-card-head h3{font-size:2.8rem}.category-card-head figure{width:72vw;height:96vw;margin-left:auto}.category-card-foot b{font-size:32vw}.category-arrow{font-size:2.4rem}.category-other{padding:70px 18px 25px}.category-other>header{padding:70px 0 0;margin-bottom:60px}.category-other>header h2{font-size:16vw}.category-other ul{display:block}.category-other li{width:100%;margin-bottom:70px}.other-card picture{width:72vw;height:96vw}.other-card>span{font-size:14vw;left:-.4em}.other-card small{font-size:1.1rem}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}.slide-media{filter:none!important}} .brand{display:flex;align-items:center;gap:15px;font:2.8rem/1 'Feature Display','Noto Serif SC',serif;letter-spacing:.13em}.brand i{display:block;width:27px;height:27px;border:3px solid currentColor;border-radius:50%;position:relative;flex:none}.brand i:after{content:"";position:absolute;inset:3px -2px -2px 3px;border:1px solid currentColor;border-radius:50%;opacity:.55}@media(max-width:768px){.brand{width:125px;gap:10px;font-size:2.2rem}.brand i{width:19px;height:19px;border-width:2px}} .slide-gl{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity .25s}.slide.gl-ready .slide-gl{opacity:1}.slide.gl-ready .slide-media{opacity:0}.feature-title,.feature-title span,.slide-title{will-change:transform;transition:transform .95s var(--ease),letter-spacing .95s var(--ease)}.home .slide-title{transform:translate3d(calc(var(--wave,0)*-18px),calc(var(--wave,0)*-38px),0)}.slide.is-hovered{z-index:2}.slide.is-hovered:after{opacity:1}@media(prefers-reduced-motion:reduce){.slide-gl{display:none}.slide.gl-ready .slide-media{opacity:1}} .category-projects,.category-other ul{list-style:none} .route-transition-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:75;pointer-events:none;opacity:1;transition:opacity .38s linear}.route-transition-canvas.is-finished{opacity:0}.home.is-transitioning .home-bottom,.home.is-transitioning .slide:not(.is-hovered){opacity:0;transition:opacity .45s linear}.category-hero>video,.category-hero>picture{opacity:1;transition:opacity .42s linear}.category-page.is-arriving .category-hero>video,.category-page.is-arriving .category-hero>picture{opacity:0} .category-page.is-arriving{pointer-events:none} .menu{overflow:hidden}.menu-open .menu-trigger{pointer-events:none}.menu-open .menu-trigger i:nth-child(1),.menu-open .menu-trigger i:nth-child(2){opacity:0;transform:translateY(-18px)}.menu-open .menu-trigger i:nth-child(3){opacity:0;transform:translateY(-12px)}.menu-open .menu-trigger i:nth-child(4),.menu-open .menu-trigger i:nth-child(5){opacity:0}.menu.open .menu-close{pointer-events:auto}.menu-close{z-index:3}.roll{height:1em;line-height:1} .detail-page{padding-top:80px;background:#f7f7f5}.detail-head{position:relative;padding:5.75vw 4.02778vw .9vw 22.4vw;border-bottom:1px solid rgba(0,0,0,.2)}.detail-head>div small{display:block;color:rgba(0,0,0,.5);font:1.4rem 'Feature Display','Noto Serif SC',serif}.detail-head h1{font:5.55556vw/1.25 'Feature Display','Noto Serif SC',serif;margin-bottom:-.1em;white-space:nowrap}.detail-back{position:absolute;left:4.02778vw;bottom:-1.25vw;padding:1.6vw 0;font:1.8rem 'Feature Display','Noto Serif SC',serif;letter-spacing:.06em}.detail-back i,.detail-back-large i{display:inline-block;font-style:normal;margin-right:12px;transition:transform .9s var(--ease)}.detail-back:hover i,.detail-back-large:hover i{transform:translateX(-8px)}.detail-body{padding:4.6vw 4.02778vw 3.6vw 22.4vw;border-bottom:1px solid rgba(0,0,0,.2)}.detail-work-list{display:flex;flex-wrap:wrap;gap:2.08333vw;list-style:none}.detail-work{position:relative;width:100%;overflow:hidden}.detail-work.is-min{width:calc(50% - 1.04167vw)}.detail-work figure{width:100%;aspect-ratio:1024/682;overflow:hidden;background:#ddd}.detail-work.is-min figure{aspect-ratio:496/728}.detail-work img{transform:scale(1.08);transition:transform 2s var(--ease)}.detail-work.in img{transform:scale(1)}.detail-media-trigger{position:absolute;top:50%;left:50%;width:15.3vw;height:15.3vw;margin:-7.65vw;color:#fff;display:grid;place-items:center;cursor:pointer}.detail-work.is-min .detail-media-trigger{width:7.65vw;height:7.65vw;margin:-3.825vw}.detail-media-trigger span{position:relative;z-index:2;font:1.66667vw 'Feature Display','Noto Serif SC',serif}.detail-media-trigger svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:transform 1.1s var(--ease)}.detail-media-trigger circle{fill:rgba(0,0,0,.08);stroke:#fff;stroke-width:1;stroke-dasharray:597;stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--ease)}.detail-media-trigger:hover svg{transform:scale(.9) rotate(12deg)}.detail-media-trigger:hover circle{stroke-dashoffset:80}.detail-info{position:relative;padding:3.3vw 4.02778vw 9.1vw 22.4vw;display:grid;grid-template-columns:36.8vw 1fr;column-gap:32px}.detail-info h2{margin-bottom:20px;color:rgba(0,0,0,.5);font:1.5rem 'Feature Display','Noto Serif SC',serif}.detail-info p,.detail-info li{font-size:1.5rem;line-height:1.84}.detail-info p{max-width:30vw;text-align:justify}.detail-info ul{list-style:none}.detail-info section:not(:last-child){margin-bottom:50px}.detail-back-large{grid-column:1/-1;display:inline-block;justify-self:start;margin:5vw 0 -3.5vw -45px;padding:3.5vw 45px;font:4.4rem 'Feature Display','Noto Serif SC',serif}.detail-modal{position:fixed;inset:0;z-index:950;background:rgba(0,0,0,.88);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .35s}.detail-modal.open{opacity:1;visibility:visible}.modal-open{overflow:hidden}.detail-modal img{width:min(78vw,1180px);height:min(78vh,760px);object-fit:contain}.detail-modal-close,.detail-modal-prev,.detail-modal-next{position:absolute;color:#fff;z-index:2;cursor:pointer;font:3rem 'Feature Display','Noto Serif SC',serif}.detail-modal-close{right:35px;top:22px;font-size:3.4rem}.detail-modal-prev{left:30px;top:50%}.detail-modal-next{right:30px;top:50%} @media(max-width:768px){.detail-page{padding-top:64px}.detail-head h1{font-size:14vw}.detail-back{position:relative;left:auto;display:inline-block;padding:15px 0 45px}.detail-body{padding:55px 18px}.detail-work-list{display:block}.detail-work,.detail-work.is-min{width:100%;margin-bottom:22px}.detail-work figure,.detail-work.is-min figure{aspect-ratio:4/5}.detail-media-trigger,.detail-work.is-min .detail-media-trigger{width:112px;height:112px;margin:-56px}.detail-media-trigger span{font-size:1.6rem}.detail-info{padding:60px 22px 100px;display:block}.detail-info p{max-width:none}.detail-copy{margin-bottom:60px}.detail-back-large{margin:70px 0 0;padding:20px 0;font-size:3rem}.detail-modal img{width:90vw;height:75vh}.detail-modal-prev{left:12px}.detail-modal-next{right:12px}} .brand img{display:block;width:166px;height:auto;object-fit:contain;filter:invert(1)}@media(max-width:768px){.brand img{width:110px}} .header-roll{display:block;height:1em;line-height:1;overflow:hidden}.header-roll>span{display:block;transition:transform 1.1s var(--ease)}.project-link:hover .header-roll>span{transform:translateY(-100%)} button,a{outline:none} .detail-modal-stage{display:grid;place-items:center;width:100%;height:100%;pointer-events:none}.detail-modal-stage img,.detail-modal-stage video{width:min(78vw,1180px);height:min(78vh,760px);object-fit:contain;pointer-events:auto}.detail-modal-count{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);color:#fff;font:1.4rem 'Feature Display','Noto Serif SC',serif;letter-spacing:.12em} .detail-website{display:inline-block;margin-top:28px;padding-bottom:4px;border-bottom:1px solid currentColor;font:1.5rem 'Feature Display','Noto Serif SC',serif;letter-spacing:.04em} @media(max-width:768px){} .contact:before{inset:-4%;background:url('./assets/img/contact-bg.jpg') center/cover no-repeat;filter:grayscale(1) contrast(1.14);opacity:.36;transform:scale(1.04);transition:transform 2.2s var(--ease),opacity 1s}.contact:after{content:"";position:absolute;inset:-12%;background:radial-gradient(circle 18vw at var(--mx,50%) var(--my,50%),transparent 0,rgba(5,5,5,.22) 45%,#050505 76%);mix-blend-mode:multiply;pointer-events:none}.contact:hover:before{transform:scale(1.085)}.contact-jp,.contact-content{position:relative;z-index:1} .menu-open .header-actions{pointer-events:none} .slides{transition:none}.slide{touch-action:pan-y;user-select:none;-webkit-user-drag:none} .category-list-head h1{font:7.5vw/.78 'Feature Display','Noto Serif SC',serif;letter-spacing:-.035em}@media(max-width:768px){.category-list-head h1{font-size:18vw}} .header{mix-blend-mode:normal;color:var(--ink)} .ticker,.header-actions{mix-blend-mode:normal;color:var(--ink)} .museum-brand{width:190px;padding:8px 0;gap:11px;overflow:visible} .museum-brand img{width:auto;height:auto;object-fit:contain;filter:none;transition:filter .35s ease} .museum-brand .museum-mark{width:39px;flex:none} .museum-brand .museum-wordmark{width:116px;flex:none} .slide-title{position:relative;padding:0;font-size:9.3vw;line-height:1} .slide-title .ja,.slide-title .en{position:absolute;bottom:30px;height:2.2em;overflow:hidden;writing-mode:vertical-rl;margin:0} .slide-title .ja{right:5.41vw;font-size:9.3vw;letter-spacing:.02em} .slide-title .en{right:2.8vw;width:1.91vw;font:1.52778vw/1.2 'Feature Display','Noto Serif SC',serif;color:#666} @media(max-width:768px){.slide{width:100vw;height:67.76vh}.home-bottom{height:155px;align-items:end}.feature-head{height:90px}.slide-title{position:absolute;right:0;bottom:22px;width:94px;height:164px;padding:0}.slide-title .ja{right:20px;bottom:0;height:2.2em;font-size:74px}.slide-title .en{right:0;bottom:0;width:20px;height:2.2em;font-size:16px}} @media(max-width:768px){.museum-brand{width:151px;gap:8px;padding:7px 0}.museum-brand .museum-mark{width:31px}.museum-brand .museum-wordmark{width:96px}} .header-dark .museum-brand .museum-wordmark{filter:brightness(0) invert(1)} .header-dark .ticker,.header-dark .header-actions{color:#fff} .ticker-en{font:14px 'Feature Display','Noto Serif SC',serif}.ticker-zh{font-size:12px;font-weight:400}.ticker b{font-size:12px;font-weight:400} .ticker{opacity:1;transition:opacity .45s ease}.ticker.is-scrolled-away{opacity:0;pointer-events:none} /* Original home geometry: half-viewport cards and a 75% / 25% footer split. */ .slide{width:auto;aspect-ratio:3/2} .home-bottom{display:flex;justify-content:space-between} .home-info{width:calc(75vw - 10px);padding-right:5.6vw} .slide-title{width:25vw;height:100%;flex:none;order:-1} @media(max-width:768px){.slide{width:100vw}.home-info{width:calc(100% - 94px);padding-left:18px}.slide-title{width:94px}} /* Keep the five-line menu sweep on a shared centerline with fixed offsets. */ .menu-trigger i{top:50%} .menu-trigger i:nth-child(1){transform:translateY(-4px)} .menu-trigger i:nth-child(2){transform:translateY(0)} .menu-trigger i:nth-child(3){transform:translateY(4px)} .menu-trigger i:nth-child(4){transform:translateY(8px);opacity:0} .menu-trigger i:nth-child(5){transform:translateY(12px);opacity:0} .menu-trigger:hover i:nth-child(1){transform:translateY(-12px);opacity:0} .menu-trigger:hover i:nth-child(2){transform:translateY(-8px);opacity:0} .menu-trigger:hover i:nth-child(3){transform:translateY(-4px)} .menu-trigger:hover i:nth-child(4){transform:translateY(0);opacity:1} .menu-trigger:hover i:nth-child(5){transform:translateY(4px);opacity:1} .menu-close i{overflow:hidden;background:transparent} .menu-close i:before,.menu-close i:after{content:"";position:absolute;inset:0;background:#fff;transition:transform .9s var(--ease)} .menu-close i:first-child:after{transform:translateX(-100%)} .menu-close i:last-child:after{transform:translateX(100%)} .menu-close:hover i:first-child:before{transform:translateX(100%)} .menu-close:hover i:last-child:before{transform:translateX(-100%);transition-delay:.2s} .menu-close:hover i:first-child:after{transform:translateX(0);transition-delay:.15s} .menu-close:hover i:last-child:after{transform:translateX(0);transition-delay:.45s} /* Title and pagination move as duplicated horizontal strips. */ .pager-current{display:block;width:17px;height:1.15em;overflow:hidden} .pager-track{display:flex;width:max-content;will-change:transform} .pager-track>span{display:block;width:17px;flex:none;text-align:center;line-height:1.15} .slide-title-window{position:absolute;bottom:30px;height:20.46vw;overflow:hidden} .slide-title-main{left:calc(5.6vw + 80px);width:9.3vw;font-size:9.3vw;line-height:1} .slide-title-sub{left:calc(2.8vw + 80px);width:1.91vw;font:1.52778vw/1.2 'Feature Display','Noto Serif SC',serif;color:#666} .feature-detail-link{display:inline-flex;align-items:baseline;gap:8px;margin-left:auto;white-space:nowrap;font:1.4rem 'Feature Display','Noto Serif SC',serif;letter-spacing:.08em;opacity:0;transform:translateX(8px);transition:opacity .4s ease,transform .65s var(--ease);pointer-events:none} .feature-head:hover .feature-detail-link,.feature-detail-link:focus-visible{opacity:1;transform:none;pointer-events:auto} .feature-detail-link i{font-style:normal;display:inline-block;transition:transform .65s var(--ease)} .feature-detail-link:hover i{transform:translateX(5px)} .slide-title-track{display:flex;width:max-content;height:100%;white-space:nowrap;will-change:transform}.slide-title-item{overflow:hidden} .slide-title-main .slide-title-item{width:9.3vw;height:100%;flex:none;font-size:9.3vw;line-height:1;letter-spacing:.02em;writing-mode:vertical-rl} .slide-title-sub .slide-title-item{width:1.91vw;height:100%;flex:none;font:1.52778vw/1.2 'Feature Display','Noto Serif SC',serif;writing-mode:vertical-rl;display:flex;justify-content:flex-end} @media(max-width:768px){.slide-title-window{bottom:0;height:164px}.slide-title-main{left:auto;right:20px;width:74px;font-size:74px}.slide-title-sub{left:auto;right:0;width:20px;font-size:16px}.slide-title-main .slide-title-item{width:74px;font-size:74px}.slide-title-sub .slide-title-item{width:20px;font-size:16px}} .slide:not(.gl-ready) .slide-media{filter:none} .slide:not(.gl-ready).is-hovered .slide-media{filter:url(#wave)} @media(min-width:769px){.category-track{padding-top:var(--project-section-main-head,110px);padding-bottom:40px}.category-project{width:var(--project-section-main-card-width,26.3vw)}.category-card-head h3{font-size:var(--project-section-main-title-font-size,1.94444vw)}.category-card-head figure{width:var(--project-section-main-thumb-width,18.403vw);height:calc(var(--project-section-main-thumb-width,18.403vw)*1.333)}.category-card-foot b{font-size:var(--project-section-main-num-font-size,13.889vw)}} @media(min-width:769px){.menu-info{padding:0 6.59vw 9vh}.menu-info h2{margin-bottom:40px}.menu-info h2 b{font-size:2.08333vw}} @media(min-width:769px){:root{--home-foot-height:calc(9.72222vw + 70px)}.slides{top:80px;height:calc(100svh - 80px - var(--home-foot-height));align-items:flex-start}.slide{height:100%}.home-bottom{height:var(--home-foot-height)}.feature-head{height:auto;min-height:9.72222vw;padding:.4vw 0}} @media(max-width:768px){ :root{--header:60px} .header{height:60px} .museum-brand{width:135px} .museum-brand .museum-mark{width:28px} .museum-brand .museum-wordmark{width:89px} .project-link{display:block;margin-right:0;padding:20px 0;font-size:12px} .menu-trigger,.menu-close{width:60px;height:60px} .slides{top:60px;height:calc(100svh - 215px);align-items:flex-start;gap:0} .slide{height:100%} .menu{display:flex;flex-direction:column;padding-top:110px;overflow-y:auto} .menu-grid a:after{left:0;top:auto;bottom:-1px;width:100%;height:1px;transform:scaleX(0);transform-origin:right} .menu-grid a:hover:after,.menu-grid a.active:after{transform:scaleX(1);transform-origin:left} .vertical{position:static;display:flex;align-items:flex-end;writing-mode:horizontal-tb;font-size:37px;line-height:1} .vertical i{margin:0 0 2px 16px;font-size:14px;writing-mode:horizontal-tb} .menu-grid b{position:static;font-size:35px;line-height:.8} .menu-info{order:2;display:flex;width:100%;height:auto;padding:45px 4.7vw 30px;flex:none} .menu-info h2{gap:7px;margin-bottom:30px}.menu-info h2 b{font-size:26px}.menu-info h2 em{font-size:16px} .menu-info p{line-height:1.36;margin-bottom:7px}.menu-info .serif{line-height:1.17}.menu-info small{margin-top:35px} .category-intro-head{display:block;padding-top:80px} .category-intro-copy{position:relative;width:100%;height:105px;min-height:105px;padding:0;z-index:2} .category-intro-copy h1{position:absolute;top:0;right:3vw;margin:0;font-size:70px;line-height:1} .category-intro-label{position:absolute;top:calc(121.3vw - 76px);left:9vw;width:auto;border:0} .category-intro-label span:not(.category-count){font-size:34px} .category-intro-label>div:first-child{transform:none} .category-intro-label em{width:2px;height:24px} .category-count{margin:10px 13px 0 0;font-size:12px!important} .category-hero{width:100%;height:121.3vw;margin-top:-105px} .category-scroll{display:none} .category-description{padding:105px 4vw} .category-description p{font-size:12px;line-height:1.905} .category-page[data-category="photograph"] .category-description p{font-size:14px;line-height:1.9} .category-track{display:block;width:100%;height:auto;padding:90px 8.7vw 0} .category-list-head{position:relative;width:100%;height:auto;margin:0;padding:0 0 25px} .category-list-head p{font-size:12px;margin-bottom:10px} .category-list-head h1,.category-list-head h2{font-size:34px;line-height:.8} .category-list-head a{position:absolute;right:0;left:auto;bottom:18px;margin:0;font-size:21px} .category-projects{display:block;padding-bottom:55px} .category-project{width:100%;height:auto;min-height:0;padding:0;border-left:0;border-top:1px solid rgba(0,0,0,.2)} .category-card{height:auto;min-height:calc(46.3vw + 20px);padding:10px 0} .category-card-head{position:relative;top:auto;right:auto} .category-card-head h3{position:absolute;top:0;left:0;right:calc(33.3vw + 12px);margin:-3px 0 0;font-size:20px;line-height:1.3;z-index:1} .category-card-head figure{width:33.3vw;height:46.3vw;margin-left:auto} .category-card-foot{left:0;bottom:10px}.category-card-foot b{font-size:58px;line-height:.85}.category-arrow{font-size:22px;margin:0 0 .14em 4px} .category-other{padding:0 4vw 50px} .category-other>header{padding:70px 0 0;margin-bottom:20px} .category-other>header p{font-size:12px;margin-bottom:10px}.category-other>header h2{font-size:34px;line-height:.8} .category-other ul{display:block}.category-other li{width:100%;margin-bottom:15px} .other-card{display:block}.other-card picture{width:100%;height:53.8vw} .other-card>span{top:15px;right:15px;bottom:auto;left:auto;font-size:30px;color:#fff;z-index:2}.other-card small{font-size:12px;color:inherit} .detail-page{padding-top:60px}.detail-head{padding:80px 4vw 10px 70px}.detail-head h1{font-size:26px}.detail-head>div small{font-size:12px} .detail-back{position:absolute;top:auto;left:0;bottom:8px;padding:10px 15px 0;font-size:12px} .detail-body{padding:30px 4vw}.detail-work-list{gap:15px}.detail-work,.detail-work.is-min{margin-bottom:15px} .detail-work figure,.detail-work.is-min figure{height:95vw;aspect-ratio:auto} .detail-media-trigger,.detail-work.is-min .detail-media-trigger{width:140px;height:140px;margin:-70px}.detail-media-trigger span{font-size:20px} .detail-info{padding:40px 4vw 35px}.detail-info h2{font-size:12px}.detail-info p,.detail-info li{font-size:12px}.detail-back-large{margin-top:50px;font-size:30px} .footer{height:auto;min-height:0;padding:22px 4vw;font-size:12px} } /* Museum detail video placeholders use the media-card layout. */ .detail-media-frame{position:relative} .detail-work.is-contain figure{position:relative;isolation:isolate;background:#242424} .detail-work.is-contain figure:before{content:"";position:absolute;z-index:0;inset:-7%;background-color:#242424;background-image:var(--media-image);background-position:center;background-size:cover;filter:blur(30px) saturate(.78);opacity:.9;transform:scale(1.12);pointer-events:none} .detail-work.is-contain figure:after{content:"";position:absolute;z-index:0;inset:0;background:rgba(0,0,0,.08);pointer-events:none} .detail-work.is-contain figure>img:first-child{position:relative;z-index:1;object-fit:contain} .detail-work.is-ritual figure{position:relative;background:#141414} .detail-work.is-ritual figure>img{position:relative;z-index:1;opacity:1;transition:opacity .55s ease,transform 2s var(--ease)} .detail-ritual-video{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:contain;background:transparent;opacity:0;transition:opacity .55s ease} .detail-media-frame.is-ritual-active figure>img{opacity:0} .detail-media-frame.is-ritual-active .detail-ritual-video{opacity:1} .detail-work.is-fortune figure{position:relative;background:#141414} .detail-work.is-fortune figure>img{position:relative;z-index:1;opacity:1;transition:opacity .55s ease,transform 2s var(--ease)} .detail-media-frame.is-fortune-active figure>img{opacity:0} .detail-media-frame.is-fortune-active .detail-ritual-video{opacity:1} .detail-work.is-ritual{overflow:visible} .detail-ritual-trigger,.detail-work.is-min .detail-ritual-trigger{--ritual-progress:0;z-index:4;top:auto;bottom:3%;left:50%;width:7.2vw;height:7.2vw;margin:0 0 0 -3.6vw;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:50%;transition:transform .55s var(--ease),filter .4s ease} .detail-ritual-trigger:before{content:"";position:absolute;inset:10%;z-index:0;border-radius:50%;background:rgba(0,0,0,.56);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .45s ease,transform .55s var(--ease)} .detail-ritual-trigger .ritual-label{display:flex;flex-direction:column;align-items:center;gap:.55em;text-align:center;line-height:1.1;letter-spacing:.12em} .detail-ritual-trigger .ritual-label b{font:inherit;font-weight:400;white-space:nowrap} .detail-ritual-trigger .ritual-label small{font:500 clamp(9px,.76vw,12px)/1 sans-serif;letter-spacing:.16em;opacity:.72} .detail-ritual-trigger .ritual-label small:empty{display:none} .detail-ritual-trigger svg,.detail-ritual-trigger:hover svg{transform:rotate(-90deg)} .detail-ritual-trigger circle,.detail-ritual-trigger:hover circle{stroke-dashoffset:0;transition:none} .detail-ritual-trigger .ritual-base{fill:transparent;stroke:rgba(255,255,255,.38);stroke-width:1} .detail-ritual-trigger .ritual-progress{fill:transparent;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--ritual-progress));filter:drop-shadow(0 0 5px rgba(255,255,255,.65))} .detail-ritual-trigger.is-holding{filter:drop-shadow(0 0 22px rgba(255,255,255,.25));transform:scale(.96)} .detail-ritual-trigger.is-holding:before{background:rgba(0,0,0,.38);transform:scale(.95);animation:ritualPulse 1.5s ease-in-out infinite} .detail-ritual-trigger.is-complete .ritual-progress{stroke:#d10a35;filter:drop-shadow(0 0 10px rgba(209,10,53,.8))} .detail-work.is-ritual .detail-media-copy{padding-top:22px}.detail-introductions{margin-top:2.2vw;border-top:1px solid rgba(0,0,0,.18)}.detail-copy.is-introductions-only .detail-introductions{margin-top:0}.detail-introductions article{padding:1.35vw 0;border-bottom:1px solid rgba(0,0,0,.18)}.detail-introductions h3{margin-bottom:.65vw;font-size:1.1rem;font-weight:400;letter-spacing:.14em;color:rgba(0,0,0,.52)}.detail-info .detail-introductions p{max-width:34vw;font-size:1.25rem;line-height:1.8}.detail-introductions strong{font-weight:700} @keyframes ritualPulse{50%{box-shadow:0 0 0 12px rgba(255,255,255,.05),0 0 35px rgba(255,255,255,.18)}} @media(max-width:768px){.detail-ritual-trigger,.detail-work.is-min .detail-ritual-trigger{top:auto;bottom:18px;left:50%;width:88px;height:88px;margin:0 0 0 -44px}.detail-work.is-ritual .detail-media-copy{padding-top:16px}.detail-ritual-trigger .ritual-label{gap:7px;font-size:14px}.detail-ritual-trigger .ritual-label small{font-size:8px}.detail-introductions{margin-top:28px}.detail-introductions article{padding:20px 0}.detail-introductions h3{margin-bottom:10px;font-size:1rem}.detail-info .detail-introductions p{max-width:none;font-size:1.15rem;line-height:1.75}} .fortune-controls{--fortune-progress:0%;position:absolute;inset:0;z-index:5;pointer-events:none;color:#fff} .fortune-press{position:absolute;top:7%;bottom:7%;width:6.2vw;min-width:74px;display:flex;flex-direction:column;align-items:center;padding:1.35vw .65vw;border:1px solid rgba(255,255,255,.36);border-radius:999px;background:rgba(0,0,0,.38);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;cursor:s-resize;transition:background .45s ease,border-color .45s ease,transform .45s var(--ease)} .fortune-left{left:3.2vw}.fortune-right{right:3.2vw} .fortune-press strong{font:2.15vw/1 serif;font-weight:400}.fortune-value{margin:.45vw 0;font:1.05vw/1 'Feature Display','Noto Serif SC',serif;letter-spacing:.08em;font-variant-numeric:tabular-nums}.fortune-press>small{font:500 clamp(8px,.65vw,10px)/1 sans-serif;letter-spacing:.12em;writing-mode:vertical-rl} .fortune-rail{position:relative;display:block;width:1px;flex:1;margin:.8vw 0;background:linear-gradient(to bottom,rgba(255,255,255,.8),rgba(255,255,255,.12));font-style:normal} .fortune-rail:before{content:"";position:absolute;left:-1px;right:-1px;bottom:0;height:var(--fortune-progress);border-radius:999px;background:linear-gradient(to top,#d10a35 0%,#f0a36a 58%,#fff4c7 100%);box-shadow:0 0 12px rgba(255,218,159,.72);transition:height .09s linear} .fortune-rail:after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 -3.3vw 0 rgba(255,255,255,.35),0 3.3vw 0 rgba(255,255,255,.35)} .fortune-rail b{position:absolute;z-index:2;left:50%;top:auto;bottom:clamp(17px,var(--fortune-progress),calc(100% - 17px));width:34px;height:34px;border:1px solid #fff;border-radius:50%;background:#111;transform:translate(-50%,50%);transition:bottom .09s linear,background .35s ease;box-shadow:0 0 14px rgba(255,255,255,.16)} .fortune-rail b{display:grid;place-items:center}.fortune-rail b .ri{width:16px;height:16px} .fortune-result{position:absolute;left:50%;bottom:4.2%;transform:translateX(-50%);padding:11px 25px;border:1px solid rgba(255,255,255,.42);border-radius:999px;background:rgba(0,0,0,.48);backdrop-filter:blur(8px);font:1.15vw/1 'Feature Display','Noto Serif SC',serif;letter-spacing:.18em;white-space:nowrap;transition:background .45s ease,color .45s ease,transform .45s var(--ease)} .fortune-controls.is-pressing .fortune-press{background:rgba(0,0,0,.24);border-color:#fff}.fortune-controls.is-pressing .fortune-result{transform:translateX(-50%) scale(1.04)} .fortune-controls.is-complete .fortune-rail b,.fortune-controls.is-complete .fortune-result{background:#d10a35}.fortune-controls.is-complete .fortune-result{color:#fff;border-color:#d10a35} @media(max-width:768px){.fortune-press{top:5%;bottom:5%;width:58px;min-width:0;padding:12px 7px}.fortune-left{left:8px}.fortune-right{right:8px}.fortune-press strong{font-size:23px}.fortune-value{margin:5px 0;font-size:10px}.fortune-press>small{font-size:8px}.fortune-rail{margin:8px 0}.fortune-rail b{width:28px;height:28px;top:auto;bottom:clamp(14px,var(--fortune-progress),calc(100% - 14px))}.fortune-rail b .ri{width:14px;height:14px}.fortune-result{bottom:18px;padding:9px 16px;font-size:10px}} .detail-work.is-frame-scrub figure{position:relative;height:min(56vh,560px);aspect-ratio:auto;background:#eee7d7} .detail-work.is-frame-scrub figure>img:first-child{opacity:0} .detail-work.is-frame-scrub figure>.detail-frame-scrub-image{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:contain;opacity:1;transform:none!important;user-select:none;-webkit-user-drag:none;pointer-events:none} .detail-work .detail-video-scrub-video{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:contain;transform:none!important} .frame-scrubber{--scrub-progress:0%;padding:27px 3vw 25px;background:#f2f1ed;border:1px solid rgba(0,0,0,.16);border-top:0} .frame-scrubber-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:21px}.frame-scrubber-head>span{font:2.4rem/1 'Feature Display','Noto Serif SC',serif;letter-spacing:.04em}.frame-scrubber-head output{display:flex;align-items:baseline;gap:18px}.frame-scrubber-head output strong{font-size:1.4rem;font-weight:400;letter-spacing:.13em}.frame-scrubber-head output b{font:1.2rem/1 'Feature Display','Noto Serif SC',serif;font-weight:400;font-variant-numeric:tabular-nums;color:rgba(0,0,0,.55)} .frame-scrubber input{display:block;width:100%;height:32px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize;touch-action:none} .frame-scrubber input::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,#d10a35 0 var(--scrub-progress),rgba(0,0,0,.24) var(--scrub-progress) 100%)} .frame-scrubber input::-moz-range-track{height:2px;background:rgba(0,0,0,.24)}.frame-scrubber input::-moz-range-progress{height:2px;background:#d10a35} .frame-scrubber input::-webkit-slider-thumb{width:30px;height:30px;margin-top:-14px;border:1px solid #111;border-radius:50%;background:#111;box-shadow:0 0 0 7px rgba(209,10,53,.12);appearance:none;-webkit-appearance:none;transition:transform .22s var(--ease),box-shadow .22s ease} .frame-scrubber input::-moz-range-thumb{width:30px;height:30px;border:1px solid #111;border-radius:50%;background:#111;box-shadow:0 0 0 7px rgba(209,10,53,.12)} .frame-scrubber.is-scrubbing input::-webkit-slider-thumb{transform:scale(1.18);box-shadow:0 0 0 13px rgba(209,10,53,.16)} .frame-scrubber-marks{display:grid;grid-template-columns:repeat(4,1fr);margin-top:9px;font-size:1.05rem;letter-spacing:.14em;color:rgba(0,0,0,.52)}.frame-scrubber-marks span:nth-child(2),.frame-scrubber-marks span:nth-child(3){text-align:center}.frame-scrubber-marks span:last-child{text-align:right} @media(max-width:768px){.detail-work.is-frame-scrub figure{height:min(48svh,460px);aspect-ratio:auto}.frame-scrubber{padding:18px 16px 17px}.frame-scrubber-head{margin-bottom:13px}.frame-scrubber-head>span{font-size:1.8rem}.frame-scrubber-head output{gap:9px}.frame-scrubber-head output strong{font-size:1.1rem}.frame-scrubber-marks{font-size:.82rem;letter-spacing:.06em}} /* Shang Yang square measure is presented as two independent, stacked interactions. */ .detail-work.is-reveal figure{position:relative;height:min(64vh,680px);aspect-ratio:auto;background:#171717} .detail-work.is-reveal figure>img{position:relative;z-index:1;opacity:1;transition:opacity .55s ease} .detail-media-frame.is-reveal-active figure>img{opacity:0}.detail-media-frame.is-reveal-active .detail-ritual-video{opacity:1} .detail-reveal-trigger,.detail-reveal-trigger.is-active{z-index:3;top:50%;right:auto;left:3vw;width:11vw;height:11vw;margin:-5.5vw 0 0;opacity:.96;transition:opacity .4s ease,transform .6s var(--ease)}.detail-reveal-trigger.is-active span{font-size:1.25vw} .inline-inscription{display:grid;grid-template-rows:0fr;padding:0;background:transparent;color:#111;border-bottom:0 solid rgba(0,0,0,.2);opacity:0;transform:translateY(-12px);visibility:hidden;transition:grid-template-rows .65s var(--ease),opacity .45s ease,transform .65s var(--ease),visibility 0s linear .65s,border-width .2s ease} .inline-inscription>div{min-height:0;overflow:hidden}.detail-media-frame.is-reveal-active+.inline-inscription{grid-template-rows:1fr;border-bottom-width:1px;opacity:1;transform:none;visibility:visible;transition:grid-template-rows .65s var(--ease),opacity .45s .12s ease,transform .65s var(--ease),visibility 0s,border-width .2s ease} .inline-inscription-close{display:flex;align-items:center;gap:.7em;margin:1vw 0 0 auto;padding:.35em 0;border:0;background:transparent;color:rgba(0,0,0,.58);font:inherit;font-size:clamp(12px,.8vw,15px);letter-spacing:.12em;cursor:pointer;transition:color .25s ease,transform .35s var(--ease)}.inline-inscription-close i{font-style:normal}.inline-inscription-close:hover,.inline-inscription-close:focus-visible{color:#000;transform:translateY(-2px)} .inline-inscription p{display:grid;grid-template-columns:5em 1fr;gap:2vw;margin:0;padding:1.35vw 0;border-top:1px solid rgba(0,0,0,.2);font-size:clamp(15px,1.15vw,22px);line-height:1.75}.inline-inscription b{font-weight:400;letter-spacing:.12em;color:rgba(0,0,0,.52)}.inline-inscription span{display:block} .is-postcard-rubbing{margin-top:3.2vw;overflow:visible}.postcard-interaction{position:relative;width:min(100%,calc(min(64vh,680px)*4/3));margin:auto;perspective:1800px}.postcard-flip-scene{position:relative;width:100%;aspect-ratio:4/3}.postcard-flip-card{position:absolute;inset:0;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform 1.05s cubic-bezier(.67,0,.2,1)}.postcard-interaction.is-flipped .postcard-flip-card{transform:rotateY(-180deg)}.postcard-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#f8f4e9;box-shadow:0 22px 42px rgba(44,32,14,.12)}.postcard-front{z-index:2;transform:rotateY(0deg)}.postcard-back{z-index:1;display:grid;place-items:stretch;transform:rotateY(180deg);background:#25282c}.postcard-back>img{display:block;width:100%;height:100%;object-fit:cover}.postcard-back>div{position:absolute;right:3.2%;bottom:4%;display:flex;flex-direction:column;align-items:flex-end;gap:3px;padding:10px 14px;background:rgba(15,17,20,.68);color:#fff;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}.postcard-back small{font:9px/1.2 'Feature Display','Noto Serif SC',serif;letter-spacing:.16em;opacity:.62}.postcard-back b{font:400 18px/1.2 'Noto Serif SC',serif;letter-spacing:.08em}.postcard-back span{font-size:10px;letter-spacing:.12em;opacity:.72}.postcard-interaction canvas{display:block;width:100%;height:auto;aspect-ratio:4/3;background:#f8f4e9}.postcard-source,.postcard-audio{display:none!important} .postcard-address-field{position:absolute;z-index:3;left:68.1%;top:52%;width:25.7%;height:28%;cursor:text}.postcard-address-field>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.postcard-address{display:block;width:100%;height:100%;padding:5% 0 0;resize:none;overflow:hidden;border:0;border-radius:0;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:#171513;font:clamp(10px,1.05vw,18px)/2.25 "Songti SC",serif;outline:none}.postcard-address::placeholder{color:rgba(20,20,20,.38);-webkit-text-fill-color:rgba(20,20,20,.38);letter-spacing:.06em}.postcard-address:focus::placeholder{opacity:.25} .postcard-trigger{top:19%;left:-8vw;width:8vw;height:8vw;margin:-4vw}.postcard-trigger:before{content:"";position:absolute;inset:9%;z-index:0;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.postcard-trigger span{display:flex;flex-direction:column;align-items:center;gap:9px}.postcard-trigger span b{font:inherit;font-weight:400}.postcard-trigger span small{font:500 clamp(9px,.7vw,11px)/1 sans-serif;letter-spacing:.12em;opacity:.72}.postcard-interaction.is-complete .postcard-trigger{transform:scale(.78);opacity:.9}.postcard-status{position:absolute;left:4%;right:4%;bottom:4%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:12px 16px;background:rgba(248,244,233,.88);backdrop-filter:blur(5px);font-size:1.05rem;letter-spacing:.08em}.postcard-status i{height:1px;background:linear-gradient(to right,#a70b2d 0 var(--postcard-progress,0%),rgba(0,0,0,.2) var(--postcard-progress,0%));font-style:normal}.postcard-status b{font:1.1rem 'Feature Display','Noto Serif SC',serif;font-weight:400}.postcard-save{position:absolute;z-index:4;right:-12vw;top:4%;padding:12px 17px;background:#111;color:#fff;font-size:1.1rem;letter-spacing:.08em;cursor:pointer;transition:opacity .35s ease,background .35s ease}.postcard-save[aria-disabled="true"]{opacity:.25;cursor:not-allowed}.postcard-save[aria-disabled="false"]:hover{background:#a70b2d}.postcard-save i{margin-left:18px;font-style:normal} .postcard-flip-trigger{position:absolute;z-index:6;right:-12vw;top:50%;display:flex;align-items:center;gap:14px;padding:12px 0;border:0;border-bottom:1px solid rgba(0,0,0,.38);background:transparent;color:#111;font:400 clamp(12px,1vw,16px)/1 'Noto Serif SC',serif;letter-spacing:.12em;white-space:nowrap;cursor:pointer;transform:translateY(-50%);transition:color .3s ease,border-color .3s ease}.postcard-flip-trigger i{display:grid;place-items:center;width:26px;height:26px;transition:transform .65s cubic-bezier(.67,0,.2,1)}.postcard-flip-trigger .ri{width:16px;height:16px}.postcard-flip-trigger:hover,.postcard-flip-trigger:focus-visible{color:#a70b2d;border-color:#a70b2d}.postcard-interaction.is-flipped .postcard-flip-trigger i{transform:rotate(180deg)}.postcard-interaction.is-flipped .postcard-trigger,.postcard-interaction.is-flipped .postcard-save,.postcard-interaction.is-flipped .postcard-status{opacity:0;pointer-events:none}.postcard-trigger,.postcard-save,.postcard-status{transition:opacity .35s ease,transform .45s var(--ease),background .35s ease} @media(max-width:1100px) and (min-width:769px){.postcard-save{right:2.5%;top:3%}.postcard-flip-trigger{right:2.5%;top:50%;padding:9px 11px;background:rgba(248,244,233,.84);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}} @media(max-width:768px){.detail-work.is-reveal figure{height:min(54svh,470px);aspect-ratio:auto}.detail-reveal-trigger,.detail-reveal-trigger.is-active{top:50%;right:auto;left:14px;width:82px;height:82px;margin:-41px 0 0}.detail-reveal-trigger.is-active span{font-size:13px}.inline-inscription-close{margin-top:10px;font-size:12px}.inline-inscription p{grid-template-columns:3.5em 1fr;gap:12px;padding:16px 0;font-size:15px;line-height:1.65}.is-postcard-rubbing{margin-top:48px}.postcard-interaction{width:100%}.postcard-trigger{top:auto;bottom:13%;left:13%;width:72px;height:72px;margin:-36px}.postcard-trigger span{gap:5px}.postcard-trigger span small{font-size:7px}.postcard-status{left:3%;right:3%;bottom:3%;gap:8px;padding:8px;font-size:.8rem}.postcard-save{top:3%;right:3%;padding:8px 10px;font-size:.8rem}.postcard-save i{margin-left:7px}.postcard-address{font-size:clamp(7px,2.6vw,12px);line-height:2.15}.postcard-flip-trigger{top:auto;right:3%;bottom:13%;padding:8px 0;transform:none;font-size:10px;gap:7px}.postcard-flip-trigger i{width:20px;height:20px}.postcard-flip-trigger .ri{width:13px;height:13px}.postcard-back>div{right:3%;bottom:3%;padding:7px 9px}.postcard-back small{font-size:6px}.postcard-back b{font-size:12px}.postcard-back span{font-size:7px}} @media(prefers-reduced-motion:reduce){.postcard-flip-card{transition-duration:.01ms}} /* Shang Yang square measure: reading and 3:4 digital rubbing states. */ .detail-work.is-inscription figure{position:relative;background:#171717} .detail-work.is-inscription figure>img{position:relative;z-index:1;opacity:1;transition:opacity .55s ease} .detail-media-frame.is-inscription-active figure>img{opacity:0} .detail-media-frame.is-inscription-active .detail-ritual-video{opacity:1} .inscription-experience{margin-top:2px;background:#eee9df;border:1px solid rgba(0,0,0,.17)} .inscription-read-trigger,.inscription-rubbing-head{width:100%;display:grid;grid-template-columns:42px 1fr auto;align-items:end;gap:18px;padding:24px 28px;text-align:left;color:#111;border-bottom:1px solid rgba(0,0,0,.2)} .inscription-read-trigger{cursor:pointer;transition:background .35s ease,color .35s ease}.inscription-read-trigger:hover,.inscription-read-trigger.is-active{background:#111;color:#fff} .inscription-read-trigger span,.inscription-read-trigger small,.inscription-rubbing-head span,.inscription-rubbing-head small{font:1.1rem 'Feature Display','Noto Serif SC',serif;color:rgba(0,0,0,.5)} .inscription-read-trigger:hover span,.inscription-read-trigger:hover small,.inscription-read-trigger.is-active span,.inscription-read-trigger.is-active small{color:rgba(255,255,255,.65)} .inscription-read-trigger b,.inscription-rubbing-head b{font-size:2.6rem;font-weight:400;letter-spacing:.08em}.inscription-read-trigger small i{display:inline-block;font-style:normal;transition:transform .4s var(--ease)}.inscription-read-trigger:hover small i{transform:translateX(7px)} .inscription-rubbing-head{margin-top:2px;border-top:1px solid rgba(0,0,0,.2);background:#e2daca} .inscription-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid rgba(0,0,0,.2)} .inscription-tab{display:grid;grid-template-columns:40px 1fr auto;align-items:end;gap:18px;padding:22px 28px;text-align:left;cursor:pointer;color:#111;transition:background .35s ease,color .35s ease} .inscription-tab+ .inscription-tab{border-left:1px solid rgba(0,0,0,.2)} .inscription-tab span,.inscription-tab small{font:1.1rem 'Feature Display','Noto Serif SC',serif;color:rgba(0,0,0,.48)} .inscription-tab b{font-size:2.6rem;font-weight:400;letter-spacing:.08em} .inscription-tab.is-active{background:#111;color:#fff}.inscription-tab.is-active span,.inscription-tab.is-active small{color:rgba(255,255,255,.6)} .inscription-panel{display:none}.inscription-panel.is-active{display:grid;animation:inscriptionIn .55s var(--ease) both} .inscription-panel[data-inscription-panel="read"]{grid-template-columns:38% 1fr;min-height:370px;padding:4vw} .inscription-keyword{display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid rgba(0,0,0,.2)} .inscription-keyword small{font-size:1.2rem;letter-spacing:.18em;color:rgba(0,0,0,.55)} .inscription-keyword strong{font:11vw/.8 serif;font-weight:400;color:#b90d31} .inscription-reading{padding:0 1vw 0 4vw}.inscription-reading>p{max-width:39em;font-size:1.55rem;line-height:1.95} .inscription-reading details{margin-top:50px;border-top:1px solid rgba(0,0,0,.18)} .inscription-reading summary{padding:18px 0;font-size:1.25rem;letter-spacing:.1em;cursor:pointer} .inscription-reading details p{display:grid;grid-template-columns:34px 1fr;gap:15px;padding:15px 0;border-top:1px solid rgba(0,0,0,.1);font-size:1.18rem;line-height:1.75} .inscription-reading details i{font:1rem 'Feature Display','Noto Serif SC',serif;color:rgba(0,0,0,.45)} .inscription-rubbing{grid-template-columns:minmax(300px,43%) 1fr;gap:5vw;align-items:center;padding:4vw} .rubbing-stage{position:relative;width:min(100%,430px);margin:auto}.rubbing-stage canvas{display:block;width:100%;height:auto;aspect-ratio:3/4;background:#fbfaf5;box-shadow:0 22px 50px rgba(44,32,14,.14)} .rubbing-artifact-preview{position:absolute;left:6%;bottom:17%;z-index:2;width:43%;height:37%;object-fit:contain!important;background:#242424;border:4px solid #f7f2e4;transform:none!important;filter:grayscale(.12) contrast(1.05);opacity:.94;transition:opacity .7s ease!important} .rubbing-postmarks{position:absolute;inset:0;z-index:3;pointer-events:none;color:#a70b2d}.rubbing-postmarks>i{position:absolute;left:10%;top:12%;width:24%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid currentColor;border-radius:50%;font-style:normal;text-align:center;transform:rotate(-7deg);opacity:.82}.rubbing-postmarks>i:after{content:"";position:absolute;inset:7%;border:1px solid currentColor;border-radius:50%}.rubbing-postmarks>i b{font-size:clamp(8px,.65vw,11px);letter-spacing:.08em}.rubbing-postmarks>i span{font:clamp(6px,.48vw,8px) 'Feature Display','Noto Serif SC',serif;margin-top:3px}.rubbing-postmarks>em{position:absolute;left:9%;top:31%;padding:7px 12px;border:3px solid currentColor;font-size:clamp(10px,.8vw,14px);font-style:normal;font-weight:700;line-height:1.05;text-align:center;transform:rotate(-5deg);opacity:.83}.rubbing-postmarks>em small{font:clamp(6px,.5vw,8px) 'Feature Display','Noto Serif SC',serif;letter-spacing:.08em} .rubbing-progress{position:absolute;left:0;right:0;bottom:-38px;height:2px;background:rgba(0,0,0,.2)}.rubbing-progress i{display:block;width:0;height:2px;background:#b90d31;transition:width .08s linear}.rubbing-progress span{display:block;margin-top:9px;font-size:1rem;letter-spacing:.09em;color:rgba(0,0,0,.55)} .rubbing-actions{display:flex;flex-direction:column;align-items:flex-start;gap:0}.rubbing-copy{width:min(100%,430px);margin-bottom:35px;font-size:1.35rem;line-height:1.8;color:rgba(0,0,0,.68)}.rubbing-actions button{width:min(100%,430px);display:flex;justify-content:space-between;padding:22px 0;border-bottom:1px solid #111;font-size:2.6rem;cursor:pointer}.rubbing-actions button i{font-style:normal}.rubbing-actions button:disabled{opacity:.28;cursor:not-allowed}.rubbing-actions small{margin-top:25px;font-size:1.05rem;letter-spacing:.08em;color:rgba(0,0,0,.5)} .inscription-experience.is-rubbing-complete .rubbing-stage{filter:drop-shadow(0 16px 28px rgba(185,13,49,.12))} @keyframes inscriptionIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @media(max-width:768px){.inscription-read-trigger,.inscription-rubbing-head{grid-template-columns:26px 1fr;padding:17px 14px;gap:8px}.inscription-read-trigger small,.inscription-rubbing-head small{grid-column:2;margin-top:3px}.inscription-read-trigger b,.inscription-rubbing-head b{font-size:1.8rem}.inscription-panel[data-inscription-panel="read"]{grid-template-columns:1fr;min-height:0;padding:26px 18px}.inscription-keyword{min-height:160px;border-right:0;border-bottom:1px solid rgba(0,0,0,.2)}.inscription-keyword strong{font-size:28vw}.inscription-reading{padding:25px 0 0}.inscription-reading>p{font-size:1.25rem}.inscription-reading details{margin-top:28px}.inscription-rubbing{grid-template-columns:1fr;gap:65px;padding:26px 18px 38px}.rubbing-stage{width:min(82%,340px)}.rubbing-artifact-preview{border-width:2px}.rubbing-postmarks>i{border-width:2px}.rubbing-postmarks>em{border-width:2px;padding:5px 8px}.rubbing-actions button{width:100%;padding:17px 0;font-size:2rem}.rubbing-copy{width:100%;font-size:1.15rem}} .detail-media-copy{display:grid;grid-template-columns:minmax(180px,28%) minmax(0,1fr);column-gap:3vw;row-gap:8px;padding:22px 0 38px;border-bottom:1px solid rgba(0,0,0,.18)} .detail-work:last-child .detail-media-copy{border-bottom:0} .detail-next{position:absolute;right:4.02778vw;bottom:-1.25vw;padding:1.6vw 0;font:1.8rem 'Feature Display','Noto Serif SC',serif;letter-spacing:.06em} .detail-next i{display:inline-block;font-style:normal;margin-left:12px;transition:transform .9s var(--ease)} .detail-next:hover i{transform:translateX(8px)} @media(max-width:768px){.detail-next{right:20px;bottom:8px;padding:15px 0 0;font-size:12px}} .detail-media-copy small{font:1.2rem 'Feature Display','Noto Serif SC',serif;letter-spacing:.08em;color:rgba(0,0,0,.5)} .detail-media-copy h2{font:2.4rem/1.25 'Feature Display','Noto Serif SC',serif} .detail-media-copy p{grid-column:2;max-width:42em;font-size:1.4rem;line-height:1.8} .detail-video-preview{position:relative;width:min(78vw,1180px);height:min(78vh,760px);background:#181818;pointer-events:auto;overflow:hidden} .detail-video-preview>img{width:100%;height:100%;object-fit:contain;opacity:.76} .detail-video-preview>div{position:absolute;left:0;right:0;bottom:0;padding:70px 34px 28px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.88))} .detail-video-preview small{font:1.1rem 'Feature Display','Noto Serif SC',serif;letter-spacing:.12em;opacity:.68} .detail-video-preview h2{margin:8px 0 6px;font:3rem/1.1 'Feature Display','Noto Serif SC',serif} .detail-video-preview p{max-width:46em;font-size:1.3rem;line-height:1.6} @media(max-width:768px){ .detail-media-copy{display:block;padding:16px 0 30px} .detail-media-copy h2{margin:8px 0 10px;font-size:2.2rem} .detail-media-copy p{font-size:1.2rem;line-height:1.7} .detail-video-preview{width:90vw;height:75vh} .detail-video-preview>div{padding:70px 20px 22px} .detail-video-preview h2{font-size:2.3rem} } /* 英雄山「拆层书盒子」交互，移植自 Museum-AR，仅用于 hero-mountain 详情页 */ .detail-work.is-layer-book .layer-book{position:relative;overflow:hidden;background:#0b0d0f;cursor:ew-resize;touch-action:pan-y;-webkit-user-select:none;user-select:none} .layer-book canvas{display:block;margin-inline:auto;background:#d6cdb9;box-shadow:inset 0 0 0 1px rgba(74,63,47,.28)} .layer-book-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .7s;pointer-events:none} .layer-book-fs{position:absolute;right:10px;bottom:10px;z-index:6;font:1.25rem/1 -apple-system,"Helvetica Neue",Arial,sans-serif;letter-spacing:.05em;background:rgba(27,25,31,.72);border:1px solid rgba(232,225,210,.45);color:#e8e1d2;border-radius:999px;padding:8px 14px;cursor:pointer} body.lb-fs{overflow:hidden} body.lb-fs .layer-book{position:fixed;inset:0;z-index:1100;background:#0e0d10;box-shadow:none;height:auto!important} body.lb-fs .layer-book canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)} body.lb-fs .layer-book-fs{position:fixed;right:14px;top:calc(14px + env(safe-area-inset-top));bottom:auto;z-index:1101} .layer-book-scrub{--scrub-a:50%;--scrub-b:50%;padding:20px 3vw 18px;background:#f2f1ed;border:1px solid rgba(0,0,0,.16);border-top:0} .layer-book-scrub-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:15px} .layer-book-scrub-head>span{font:2rem/1 'Feature Display','Noto Serif SC',serif;letter-spacing:.04em} .layer-book-scrub-head output{display:flex;align-items:baseline;gap:14px} .layer-book-scrub-head output strong{font-size:1.3rem;font-weight:400;letter-spacing:.13em} .layer-book-scrub-head output b{font:1.2rem/1 'Feature Display','Noto Serif SC',serif;font-weight:400;font-variant-numeric:tabular-nums;color:rgba(0,0,0,.55);min-width:42px;text-align:right} .layer-book-scrub input{display:block;width:100%;height:32px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize;touch-action:none} .layer-book-scrub input::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,rgba(0,0,0,.24) 0 var(--scrub-a),#d10a35 var(--scrub-a) var(--scrub-b),rgba(0,0,0,.24) var(--scrub-b) 100%)} .layer-book-scrub input::-moz-range-track{height:2px;background:rgba(0,0,0,.24)} .layer-book-scrub input::-webkit-slider-thumb{width:26px;height:26px;margin-top:-12px;border:1px solid #111;border-radius:50%;background:#111;box-shadow:0 0 0 6px rgba(209,10,53,.12);appearance:none;-webkit-appearance:none;transition:transform .22s var(--ease),box-shadow .22s ease} .layer-book-scrub input::-moz-range-thumb{width:26px;height:26px;border:1px solid #111;border-radius:50%;background:#111;box-shadow:0 0 0 6px rgba(209,10,53,.12)} .layer-book-scrub.is-scrubbing input::-webkit-slider-thumb{transform:scale(1.15);box-shadow:0 0 0 11px rgba(209,10,53,.16)} .layer-book-scrub-marks{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:8px;font-size:1.05rem;letter-spacing:.14em;color:rgba(0,0,0,.52)} .layer-book-scrub-marks span:nth-child(2){text-align:center} .layer-book-scrub-marks span:last-child{text-align:right} body.lb-fs .layer-book-scrub{display:none} /* ── 执轴拓境：拖动下方圆点横轴，视频随轴播放 ─────────────────────────── */ .scroll-figure{position:relative;aspect-ratio:16/9;background:#0b0d0f;overflow:hidden} .scroll-figure video{display:block;width:100%;height:100%;object-fit:cover} .scroll-axis{--scrub-progress:0%;padding:27px 3vw 25px;background:#f2f1ed;border:1px solid rgba(0,0,0,.16);border-top:0} .scroll-axis-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:21px} .scroll-axis-head>span{font:2.4rem/1 'Feature Display','Noto Serif SC',serif;letter-spacing:.04em} .scroll-axis-head output{display:flex;align-items:baseline;gap:18px} .scroll-axis-head output strong{font-size:1.4rem;font-weight:400;letter-spacing:.13em} .scroll-axis-head output b{font:1.2rem/1 'Feature Display','Noto Serif SC',serif;font-weight:400;font-variant-numeric:tabular-nums;color:rgba(0,0,0,.55)} .scroll-axis input{display:block;width:100%;height:32px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize;touch-action:none} .scroll-axis input::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,#d10a35 0 var(--scrub-progress),rgba(0,0,0,.24) var(--scrub-progress) 100%)} .scroll-axis input::-moz-range-track{height:2px;background:rgba(0,0,0,.24)}.scroll-axis input::-moz-range-progress{height:2px;background:#d10a35} .scroll-axis input::-webkit-slider-thumb{width:30px;height:30px;margin-top:-14px;border:1px solid #111;border-radius:50%;background:#111;box-shadow:0 0 0 7px rgba(209,10,53,.12);appearance:none;-webkit-appearance:none;transition:transform .22s var(--ease),box-shadow .22s ease} .scroll-axis input::-moz-range-thumb{width:30px;height:30px;border:1px solid #111;border-radius:50%;background:#111;box-shadow:0 0 0 7px rgba(209,10,53,.12)} .scroll-axis.is-scrubbing input::-webkit-slider-thumb{transform:scale(1.18);box-shadow:0 0 0 13px rgba(209,10,53,.16)} .scroll-axis-marks{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:9px;font-size:1.05rem;letter-spacing:.14em;color:rgba(0,0,0,.52)} .scroll-axis-marks span:nth-child(2){text-align:center} .scroll-axis-marks span:last-child{text-align:right} @media(max-width:768px){.scroll-axis{padding:18px 16px 17px}.scroll-axis-head{margin-bottom:13px}.scroll-axis-head>span{font-size:1.8rem}.scroll-axis-head output{gap:9px}.scroll-axis-head output strong{font-size:1.1rem}.scroll-axis-marks{font-size:.82rem;letter-spacing:.06em}} /* ── 竖版立轴变体：竖轴贴在画右侧，由下向上拖拽 ── */ .scroll-arena{display:flex;align-items:stretch} .scroll-figure.is-portrait{flex:1;min-width:0;aspect-ratio:auto;height:min(78vh,820px)} .scroll-figure.is-portrait video{object-fit:contain} .scroll-axis-v{flex:none;width:118px;display:flex;flex-direction:column;padding:20px 12px 18px;border-top:1px solid rgba(0,0,0,.16);border-left:0} .scroll-axis-v .scroll-axis-head{flex-direction:column;align-items:center;gap:16px;margin-bottom:18px} .scroll-axis-v .scroll-axis-head>span{writing-mode:vertical-rl;font-size:2rem;letter-spacing:.16em} .scroll-axis-v .scroll-axis-head output{flex-direction:column;align-items:center;gap:7px} .scroll-axis-rail{flex:1;display:flex;justify-content:center;align-items:stretch;gap:10px;min-height:200px} .scroll-axis-v .scroll-axis-marks{display:flex;grid-template-columns:none;flex-direction:column;justify-content:space-between;align-items:flex-end;margin-top:0;padding:6px 0} .scroll-axis-v .scroll-axis-marks span:last-child{text-align:right} .scroll-axis-v input{writing-mode:vertical-lr;direction:rtl;width:32px;height:auto;cursor:ns-resize} .scroll-axis-v input::-webkit-slider-runnable-track{width:2px;height:100%;background:linear-gradient(to top,#d10a35 0 var(--scrub-progress),rgba(0,0,0,.24) var(--scrub-progress) 100%)} .scroll-axis-v input::-webkit-slider-thumb{margin-top:0;margin-left:-14px} .scroll-axis-v input::-moz-range-track{width:2px;height:100%;background:rgba(0,0,0,.24)} .scroll-axis-v input::-moz-range-progress{width:2px;background:#d10a35} @media(max-width:768px){.scroll-figure.is-portrait{height:min(60svh,540px)}.scroll-axis-v{width:84px;padding:12px 8px 12px}.scroll-axis-v .scroll-axis-head{gap:10px;margin-bottom:12px}.scroll-axis-v .scroll-axis-head>span{font-size:1.5rem}.scroll-axis-rail{gap:6px;min-height:150px}} /* Category (secondary) page detail polish */ .category-card-tag{display:block;margin:-.1rem 0 1.1rem;font:1.25rem/1 'Feature Display','Noto Serif SC',serif;letter-spacing:.16em;color:#777;transition:color .6s} .category-card:hover .category-card-tag{color:#0a0a0a} .category-list-head p,.category-other>header p{color:rgba(0,0,0,.55);font-family:'Feature Display','Noto Serif SC',serif} .footer nav a{transition:opacity .35s}.footer nav a:hover{opacity:.5} @media(max-width:768px){.category-card-tag{display:none}} .category-intro-label>div:last-child{justify-content:flex-end} .category-count{margin:1.5em 0 0} @media(max-width:768px){.category-count{margin:10px 0 0}} html,body{overflow-x:hidden;overflow-x:clip} .category-list-head h1,.category-list-head h2{writing-mode:vertical-rl;line-height:.9;letter-spacing:-.02em} @media(min-width:769px){.other-card>span{left:auto;right:100%;margin-right:32px}} @media(min-width:769px){.category-other>header h2{font-size:5.5vw}} .category-other>header h2{line-height:1.4} /* Remix Icon (line style) base — icons size to 1em of their context font */ .ri{width:1em;height:1em;display:inline-block;vertical-align:-.12em;fill:currentColor;flex:none} .menu-trigger{display:grid;place-items:center} .menu-trigger .ri{width:22px;height:22px;transition:opacity .4s ease} .menu-trigger:hover .ri{opacity:.55} .menu-open .menu-trigger .ri{opacity:0} /* 菜单打开时关掉顶栏毛玻璃：菜单和关闭按钮在 z-index 上位于顶栏之下，玻璃底会把白色 × 糊没 */ body.menu-open .header{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none} .menu-close{display:grid;place-items:center;color:#fff} .menu-close .ri{width:24px;height:24px;transition:transform .9s var(--ease)} .menu-close:hover .ri{transform:rotate(90deg)} /* 移动端触控 */ *{-webkit-tap-highlight-color:transparent}.detail-ritual-trigger,.fortune-press,.detail-media-trigger,.layer-book,.layer-book *,.detail-frame-scrub-image,.scroll-figure,.scroll-figure *,.slide,.slide *{-webkit-touch-callout:none}.frame-scrubber input,.layer-book-scrub input,.scroll-axis input{-webkit-touch-callout:none} /* 轮播切换按钮：图片下方空白带，右端与分隔线右端对齐 */ .feature-head{position:relative} .home .slide-nav{position:absolute;z-index:6;margin-left:0;right:0;top:10px} .category-intro-label{padding-bottom:12px} .category-intro-label>div{align-items:baseline} .category-intro-label>div:first-child{transform:none} .category-count{margin:0} @media(min-width:769px){.category-arrow{margin-bottom:-.4em}} @media(max-width:768px){.category-arrow{margin-bottom:-.15em}} @media(max-width:768px){.detail-back{top:auto;bottom:8px}.category-intro-copy h1{height:2.2em}.category-list-head h1,.category-list-head h2{writing-mode:horizontal-tb}} @media(min-width:769px){.category-intro-copy{min-height:calc(100svh - 120px);padding-bottom:0}} @media(min-width:769px){.category-intro-copy h1{margin-right:calc(40px - 1.5rem)}} @media(min-width:769px){.category-description{padding:28px 1.5rem 13.7vw 4.02778vw}.category-description p{max-width:calc(32.77778vw - 1.5rem - 20px)}} /* 手机端首页标题行一行放下 */ @media(max-width:768px){.feature-title{font-size:17px}.feature-detail-link{font-size:12px;gap:6px}} /* 路由转场（全端）：图飘动过程中分类页文字不出现，图落定后再淡入 */ .category-page.is-arriving .category-intro-copy,.category-page.is-arriving .category-scroll{opacity:0} .category-page:not(.is-arriving) .category-intro-copy,.category-page:not(.is-arriving) .category-scroll{transition:opacity .65s ease .18s} /* PC 端：标题行底线与右侧「层叠视界」竖排文字底部对齐（两者同为 bottom:30px） */ @media(min-width:769px){.home-info{display:flex;flex-direction:column;justify-content:flex-end;padding-top:0;padding-bottom:30px}} /* 手机端轮播按钮：图片下方左对齐 */ @media(max-width:768px){.home .slide-nav{right:auto;left:0}} /* 手机端「藏品一览」页：隐藏顶部件数与「返回首页」 */ @media(max-width:768px){.all-projects-page .category-list-head p,.all-projects-page .category-list-head a{display:none}} /* 手机端「藏品一览」页卡片：去掉箭头，序号在上、作品名在下 */ @media(max-width:768px){ .all-projects-page .category-arrow{display:none} .all-projects-page .category-card-foot{top:8px;bottom:auto;align-items:flex-start} .all-projects-page .category-card-head h3{top:auto;bottom:0;margin:0} } /* 手机端「藏品一览」页序号：字重 200（Feature Display 无 200 字重，改用 Noto Serif SC 变量字体） */ @media(max-width:768px){.all-projects-page .category-card-foot b{font-family:'Noto Serif SC',serif;font-weight:200}} /* 手机端「藏品一览」页：顶栏「探索全部」换成「返回首页」 */ .header-actions .project-link-home{display:none} @media(max-width:768px){body.route-projects-list .header-actions .project-link:not(.project-link-home){display:none}body.route-projects-list .header-actions .project-link-home{display:block}} /* 手机端「藏品一览」页卡片：作品名紧跟序号下方，间距 20px（序号 58px × 行高 .85 ≈ 49px，foot 距卡片顶 8px，head 距卡片顶 10px） */ @media(max-width:768px){.all-projects-page .category-card-head h3{top:calc(58px*.85 + 8px + 20px - 10px);bottom:auto}} /* 手机端「藏品一览」页卡片：序号右侧的分类标签（层叠视界 / 唤醒文物 / 延展画境），灰色小字；桌面端不显示 */ .category-card-cat{display:none} @media(max-width:768px){ .all-projects-page .category-card-foot{right:calc(33.3vw + 12px);justify-content:space-between} .all-projects-page .category-card-cat{display:block;margin-top:6px;font:12px/1 'Feature Display','Noto Serif SC',serif;letter-spacing:.12em;color:#777;white-space:nowrap} } /* 手机端作品页头部与顶栏的间距减半（80px → 40px） */ @media(max-width:768px){.detail-head{padding-top:40px}} /* 手机端作品页：「返回」与标题的间距 24px（返回文字右缘 64px + 24px） */ @media(max-width:768px){.detail-head{padding-left:88px}} /* 手机端作品页：媒体框与下方说明文字的间距增加 24px（16px → 40px） */ @media(max-width:768px){.detail-media-copy{padding-top:40px}} /* 手机端「方升邮笺」明信片：拓印按钮居中于左侧留白；保存 / 翻看两个按钮移到明信片下方一行（翻看在左、保存在右） */ @media(max-width:768px){ .postcard-trigger{top:50%;bottom:auto;left:32%;margin:-36px} .is-postcard-rubbing .postcard-interaction{margin-bottom:56px} .postcard-flip-trigger{top:calc(100% + 14px);bottom:auto;right:auto;left:0;transform:none;padding:8px 0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;font-size:12px} .postcard-save{top:calc(100% + 12px);bottom:auto;right:0;left:auto;padding:9px 12px;font-size:12px} } /* 作品页底部信息（返回全部作品 / 制作 / 版权所有）：数据里 hideDetailInfo 的作品仅在手机端显示 */ @media(min-width:769px){.detail-info.is-mobile-only{display:none}} /* 手机端说明小标题去掉「/ 01」这类子序号 */ @media(max-width:768px){.detail-media-copy small .eyebrow-sub{display:none}} /* PC 端「方升邮笺」：与手机端方案一致 —— 拓印按钮居中于左侧留白，保存 / 翻看两个按钮移到明信片下方一行（翻看在左、保存在右） */ @media(min-width:769px){ .postcard-trigger{top:50%;left:32%;margin:-4vw} .is-postcard-rubbing .postcard-interaction{margin-bottom:72px} .postcard-flip-trigger{top:calc(100% + 18px);bottom:auto;right:auto;left:0;transform:none;padding:10px 0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none} .postcard-save{top:calc(100% + 14px);bottom:auto;right:0;left:auto} }