:root{--paper:#f5f0e6;--ink:#28241f;--red:#a74443;--line:#d7cbbd}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;color:var(--ink);background:var(--paper);font-family:Arial,'Microsoft YaHei',sans-serif}body:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:12;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}header{position:sticky;top:0;background:#f5f0e6ed;backdrop-filter:blur(16px);z-index:10;display:flex;align-items:center;justify-content:space-between;padding:22px 5%;border-bottom:1px solid var(--line);gap:20px}.logo{font-size:16px;font-weight:bold;letter-spacing:2px}.logo span{display:block;font-size:9px;letter-spacing:3px;margin-top:5px;font-weight:normal}nav{display:flex;gap:32px;font-size:12px}nav a{position:relative}nav a:after{content:'';position:absolute;bottom:-7px;left:0;width:0;height:1px;background:var(--red);transition:width .3s}nav a:hover:after{width:100%}#motion{border:1px solid var(--line);border-radius:30px;background:transparent;padding:8px 12px;font-size:10px}.progress{position:fixed;top:0;left:0;height:3px;background:var(--red);width:0;z-index:20}.hero{position:relative;padding:38px 7% 0;min-height:calc(100svh - 90px);overflow:hidden}.hero-meta,.hero-foot,.section-top{display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px}.hero h1{position:relative;z-index:2;font-size:clamp(68px,9.7vw,156px);font-weight:500;letter-spacing:-.075em;line-height:1.12;margin:8vh 0 35px}.line{display:block;overflow:hidden;padding-bottom:10px}.line>span{display:inline-block;animation:text-in 1.2s cubic-bezier(.2,.7,.2,1) both}.line:nth-child(2)>span{animation-delay:.16s}.red{color:var(--red)}.hero-bottom{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:3;margin-bottom:65px}.hero-bottom p{font-size:14px;line-height:1.9;color:#6d6258}.round-link{font-size:12px;display:inline-flex;align-items:center;gap:26px}.round-link>span{width:65px;height:65px;border:1px solid var(--red);border-radius:50%;display:grid;place-items:center;font-size:27px;transition:.35s}.round-link:hover>span{background:var(--red);color:var(--paper);transform:rotate(45deg)}.hero-foot{border-top:1px solid var(--line);padding:20px 0}.hero-art{position:absolute;right:5%;top:18%;width:44%;aspect-ratio:1}.orbit{position:absolute;width:100%;height:65%;border:1px solid #ab49445c;border-radius:50%;transform:rotate(-32deg);top:15%;animation:orbit 28s linear infinite}.orbit.second{width:65%;height:100%;top:0;left:18%;animation-direction:reverse}.symbol{position:absolute;width:26%;mix-blend-mode:multiply;animation:float 7s ease-in-out infinite}.face{right:8%;top:10%;transform:rotate(15deg)}.bird{left:20%;bottom:8%;width:25%;animation-delay:-3s}.dot{position:absolute;right:15%;bottom:20%;width:18px;height:18px;border-radius:50%;background:var(--red);box-shadow:0 8px 18px #a7444350;animation:float 6s ease-in-out infinite}.ticker{overflow:hidden;background:var(--red);color:var(--paper);padding:22px 0;font-size:21px;letter-spacing:5px}.ticker>div{white-space:nowrap;width:max-content;animation:ticker 40s linear infinite}.works,.about{padding:100px 7%}.section-top{border-bottom:1px solid var(--line);padding-bottom:20px}.works>h2{font-size:clamp(30px,4vw,58px);font-weight:400;line-height:1.5;letter-spacing:-2px;margin:55px 0 100px}.project{margin-bottom:125px}.project-title{display:grid;grid-template-columns:85px 1fr auto;align-items:start;margin-bottom:35px;gap:20px}.number{font-family:Georgia,serif;font-size:52px;color:var(--red);line-height:1}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--red)}h3{font-size:clamp(30px,3.6vw,52px);font-weight:400;letter-spacing:-1px;line-height:1.35;margin:18px 0} .project-title p{font-size:13px;color:#72665e}.project-open{border-bottom:1px solid var(--ink);padding:12px 0;font-size:12px;margin-top:65px}.visual{display:block;position:relative;overflow:hidden;background:#e8dfd0}.visual img{display:block;width:100%;height:auto;object-fit:contain;transition:transform 1s}.visual:hover img{transform:scale(1.025)}.image-label{position:absolute;bottom:18px;left:20px;font-size:10px;background:#f5f0e6ed;border-radius:30px;padding:12px 18px;letter-spacing:1px}.project-note{display:grid;grid-template-columns:1fr 1fr;gap:7%;padding:25px 0}.project-note p:first-child{font-size:20px}.project-note p:last-child{font-size:13px;line-height:2;color:#74685e}.project details{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}summary{cursor:pointer;padding:23px 0;font-size:12px;list-style:none;display:flex;justify-content:space-between}summary::-webkit-details-marker{display:none}summary span{font-size:20px}details[open] summary span{transform:rotate(45deg)}.case-body{padding-bottom:30px}.case-body h4{font-size:23px;font-weight:400}.case-body p{font-size:13px;line-height:2;max-width:700px;color:#74685e}.pages{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}.page-button{padding:0;border:0;background:none;cursor:zoom-in}.page-button img{display:block;width:100%;height:auto}.page-button:focus-visible{outline:3px solid var(--red)}.brand-stage{padding:7%;display:grid;grid-template-columns:1fr 1fr;background:#490509;color:#eee4d7;overflow:hidden;min-height:450px}.brand-copy>span{font-size:10px;letter-spacing:3px}.brand-copy p{font-family:Georgia,'SimSun',serif;font-size:clamp(30px,4vw,65px);line-height:1.5}.swatches{display:flex;gap:12px}.swatches i{width:22px;height:22px;border-radius:50%;background:#eee4d7}.swatches i:nth-child(2){background:#ebd9c8}.swatches i:nth-child(3){background:#a74443}.motif-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-content:center;transform:rotate(-12deg) scale(1.2)}.motif-grid img{width:100%;mix-blend-mode:screen;filter:grayscale(1) invert(1);opacity:.5;animation:float 8s ease-in-out infinite}.motif-grid img:nth-child(even){animation-delay:-4s}.wide{width:100%;height:auto;display:block;margin-bottom:32px}.about{background:#eae2d5}.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:10%;padding-top:65px}.about h2{font-size:clamp(38px,5.5vw,80px);font-weight:400;line-height:1.2;margin:0}.about em{font-family:Georgia,serif;font-weight:normal;color:var(--red)}.about-text{position:relative;padding-top:110px}.about-text p{font-size:14px;line-height:2}.about-symbol{position:absolute;top:0;right:0;width:80px;mix-blend-mode:multiply;animation:float 7s ease-in-out infinite}.skills{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}.skills span{font-size:11px;border:1px solid #c8bba9;padding:9px 13px;border-radius:25px}.ending{position:relative;padding:110px 7%;overflow:hidden}.ending h2{font-size:clamp(48px,8vw,115px);font-weight:400;line-height:1.25;margin:28px 0 45px}.ending em{font-style:normal;color:var(--red)}.end-bird{position:absolute;right:14%;top:25%;width:16%;mix-blend-mode:multiply;animation:float 9s ease-in-out infinite}footer{border-top:1px solid var(--line);padding:25px 7%;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px}.js .reveal{opacity:0;transform:translateY(35px);transition:opacity .85s,transform .85s cubic-bezier(.2,.7,.2,1)}.js .reveal.visible{opacity:1;transform:none}dialog{border:0;padding:70px 18px 18px;background:#201d1b;width:96vw;max-width:none;height:95vh;max-height:none}dialog::backdrop{background:#000c}dialog img{display:block;width:100%;min-width:1100px}.viewerbar{position:fixed;top:2.5vh;left:2vw;right:2vw;background:#201d1b;color:#fff;display:flex;justify-content:space-between;padding:18px;font-size:12px}.viewerbar button{color:white;background:none;border:1px solid #777;padding:6px 14px}body:has(dialog[open]){overflow:hidden}.paused *, .paused *:before,.paused *:after{animation-play-state:paused!important;scroll-behavior:auto!important}.paused .reveal{transition:none!important;opacity:1!important;transform:none!important}@keyframes text-in{from{transform:translateY(115%)}to{transform:translateY(0)}}@keyframes float{0%,100%{translate:0 0;rotate:-5deg}50%{translate:0 -18px;rotate:5deg}}@keyframes orbit{to{transform:rotate(328deg)}}@keyframes ticker{to{transform:translateX(-50%)}}@media(max-width:700px){header{padding:17px 5%;flex-wrap:wrap;gap:14px}.logo{font-size:13px}nav{gap:16px;font-size:11px}#motion{position:absolute;right:5%;top:16px;font-size:9px}nav{width:100%;justify-content:space-between}.hero{padding:25px 6% 0;min-height:770px}.hero-meta{font-size:8px;letter-spacing:1px}.hero h1{font-size:66px;margin-top:85px}.hero-art{width:60%;right:-6%;top:18%;opacity:.65}.hero-bottom{margin-top:70px;gap:20px;margin-bottom:50px;align-items:end}.hero-bottom p{font-size:12px}.round-link{gap:12px;font-size:11px}.round-link>span{width:48px;height:48px}.hero-foot{font-size:8px;letter-spacing:.6px}.ticker{font-size:15px;padding:17px 0}.works,.about{padding:65px 6%}.section-top{font-size:8px;letter-spacing:1px}.works>h2{margin-bottom:65px}.project-title{grid-template-columns:42px 1fr;gap:10px}.number{font-size:32px}.eyebrow{font-size:8px;letter-spacing:1px}h3{font-size:30px}.project-open{grid-column:2;justify-self:start;margin-top:0}.project{margin-bottom:80px}.project-note{grid-template-columns:1fr;gap:0}.project-note p:first-child{font-size:18px}.project-note p:last-child{margin-top:0}.image-label{font-size:8px;bottom:10px;left:10px;padding:8px}.brand-stage{min-height:320px;padding:9%;grid-template-columns:1fr 1fr;gap:25px}.brand-copy p{font-size:27px}.brand-copy>span{font-size:7px;letter-spacing:1px}.motif-grid{gap:8px;grid-template-columns:repeat(3,1fr)}.pages{grid-template-columns:1fr}.case-body h4{font-size:18px}.about-grid{grid-template-columns:1fr;gap:30px}.about-text{padding-top:40px}.about-symbol{width:60px;top:-65px}.ending{padding:80px 6%}.end-bird{right:2%;top:40%;width:25%}footer{gap:20px;font-size:8px}.project-title p{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}
.motif-grid img{filter:brightness(0) invert(1);mix-blend-mode:normal;opacity:.24}