*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#222;background:white;font-family:var(--portfolio-font);font-weight:300}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:1px solid #333;outline-offset:7px}header{position:relative;z-index:5}.logo{position:absolute;top:7.8vh;left:5.5vw;width:12.7vw;max-width:250px;min-width:135px}.logo img{width:100%;display:block}nav{position:fixed;right:2.1vw;top:9.6vh;width:10vw;min-width:130px;display:flex;flex-direction:column;gap:5.1vh;font-size:clamp(20px,2.2vw,43px);line-height:1.3}nav a{width:fit-content;white-space:nowrap}nav a:hover,nav a.active{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}.nav-arrow{position:absolute;width:7vw;height:17vh;right:0;top:var(--arrow-y,30px);pointer-events:none;transition:top .4s}body.home nav{display:none}.home-stage{height:100svh;min-height:650px;position:relative}.plan-link{position:absolute;left:37.5%;top:18%;width:54%;transition:transform .7s}.plan-link:hover{transform:scale(1.015)}.plan-link img{width:100%;display:block}.enter{position:absolute;top:47%;left:6.5%;font-size:clamp(24px,2.3vw,46px);display:flex;align-items:center;gap:0}.enter:after{content:'';width:4.5vw;height:1px;background:#222}.home-arrow{position:absolute;top:50%;left:29%;width:12%;height:14%;pointer-events:none}.workspace-label{position:absolute;left:2%;top:58%;font-size:clamp(16px,1.5vw,29px)}.works-content{padding:200px 19% 120px 5.5%}.year{font-weight:400;font-size:20px;color:#545454;margin:0 0 30px}.year-section{margin-bottom:54px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 24px}.cover{aspect-ratio:1;overflow:hidden;background:#f3f3f3}.cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s,opacity .4s}.project:hover .cover img{transform:scale(1.035);opacity:.88}.caption{color:#8b8b8b;font-size:12px;line-height:1.7;padding-top:12px}.caption .title{margin:3px 0}.project:hover .title{color:#222}.info{padding:21.3vh 18% 100px 5.5%;display:grid;grid-template-columns:32% 1fr;column-gap:3.5vw;row-gap:7vh;font-size:clamp(14px,1.18vw,23px);line-height:1.4}.portrait{width:100%}.bio p{margin:0 0 28px}.bio .name{margin-bottom:30px}.dots{width:84%;align-self:start;margin:20px 0}.clients{white-space:pre-line}.contact-body{min-height:100vh}.contact-body .info{padding-top:21.3vh}.contact-text p{margin:0 0 30px}.contact-text a:hover{text-decoration:underline}.contact-body .dots{position:absolute;left:7.7%;bottom:10%;width:19%}.phone{display:grid;grid-template-columns:auto 1fr;gap:2px 5px}.phone .korea{grid-column:2}.top{position:fixed;right:3.5vw;bottom:4.5vh;width:50px;border:0;background:none;padding:0;cursor:pointer;z-index:8;opacity:.65}.top img{width:100%}.home .top{display:none}.detail-head{padding:220px 20% 75px 5.5%}.detail-head h1{font-size:clamp(22px,2vw,36px);font-weight:300;color:#666;margin:0 0 25px}.meta{display:flex;gap:40px;color:#888;font-size:16px}.detail-gallery{width:100%;background:#f4f4f4;display:flex;justify-content:center}.detail-gallery img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}.detail-description{padding:60px 30% 80px 5.5%;font-size:16px;line-height:1.65}.detail-description h2{font-size:16px;font-weight:300;margin-bottom:24px}.detail-description .dots{width:210px;margin:70px 0 30px}.detail-links{display:flex;justify-content:space-between;border-top:1px solid #ddd;padding:25px 0}.detail-links a:hover{text-decoration:underline}.reveal{animation:appear .5s ease both}@keyframes appear{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1700px){.works-content{padding-top:260px}.caption{font-size:16px}.year{font-size:26px}}@media(max-width:700px){.logo{top:30px;left:6%;width:140px}nav{position:absolute;top:110px;left:6%;right:auto;width:88%;flex-direction:row;justify-content:space-between;gap:12px;font-size:17px}.nav-arrow{display:none}.home-stage{min-height:660px}.plan-link{left:9%;top:31%;width:84%}.enter{left:8%;top:23%;font-size:26px}.home-arrow{left:23%;top:28%;height:70px;width:25%}.workspace-label{font-size:14px}.works-content{padding:185px 6% 70px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 15px}.caption{font-size:11px}.year{margin-bottom:20px}.info{padding:190px 6% 65px;grid-template-columns:1fr;gap:30px;font-size:16px}.portrait{width:80%}.info .dots{width:45%;grid-row:3}.clients{grid-row:4}.contact-body .info{padding-top:210px}.contact-body .dots{position:relative;left:6%;bottom:auto;margin-top:75px;width:43%}.contact-text{grid-column:1}.contact-body .empty{display:none}.detail-head{padding:195px 6% 45px}.detail-head h1{line-height:1.5}.detail-description{padding:35px 6% 60px}.top{width:39px;right:5%}.phone{font-size:15px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Typography is self-hosted so Windows / Android do not depend on an external font service. */
@font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/noto-sans-sc-light.woff2') format('woff2')}
@font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/noto-sans-sc-regular.woff2') format('woff2')}
:root{--portfolio-font:'PingFang SC','Noto Sans SC',sans-serif;--hand-cursor:url('assets/cursor.png') 73 37,auto;--cursor-width:76px;--cursor-height:53px;--cursor-offset-x:-73px;--cursor-offset-y:-37px}
body,button,input,textarea,select{font-family:var(--portfolio-font);font-weight:300;font-synthesis:none}
nav,.caption,.title,.meta,.tag,.detail-head h1,.detail-description h2{font-weight:300}
.year,.project-year{font-weight:400;color:#545454}
/* One shared viewport anchor on Works, About, Contact and every detail page. */
.logo{position:fixed;z-index:20}
body:not(.home) .logo:before{content:'';position:absolute;inset:-15px -17px;background:#fff;z-index:-1}
.home .logo{position:absolute}
.nav-arrow{object-fit:contain;transform:rotate(180deg)}
.home-arrow{height:auto;object-fit:contain}
.plan-link{transition:transform .22s ease}
.plan-link:hover{transform:scale(1.006)}
.workspace-hint{position:absolute;left:-14%;top:63%;display:flex;align-items:center;gap:12px;font-size:clamp(13px,1vw,19px);white-space:nowrap;opacity:0;transform:translateX(-4px);transition:opacity .18s ease,transform .18s ease;pointer-events:none}
.workspace-hint img{width:clamp(50px,5vw,95px);height:auto;transform:rotate(-32deg)}
.plan-link:hover .workspace-hint,.plan-link:focus-visible .workspace-hint{opacity:1;transform:translateX(0)}
.reveal{animation:page-in .24s ease both}
@keyframes page-in{from{opacity:0}to{opacity:1}}
.cover img{transition:transform .25s ease,opacity .2s ease}
.detail-gallery{flex-direction:column;align-items:center}
.detail-gallery video{display:block;width:100%;height:auto;max-height:90vh;background:#f4f4f4}
.project-description{white-space:pre-line}
.meta{flex-wrap:wrap;row-gap:12px}
.touch-cursor{display:none;position:fixed;width:var(--cursor-width);height:var(--cursor-height);object-fit:contain;transform:translate(var(--cursor-offset-x),var(--cursor-offset-y));pointer-events:none;z-index:2147483647;opacity:1}
.touch-cursor.is-visible{display:block}
.touch-cursor.is-fading{opacity:0;transition:opacity .4s ease}
@media(any-pointer:fine){html,body,body *{cursor:var(--hand-cursor)!important}}
@media(max-width:700px){
 .logo{position:fixed;top:30px;left:6%;width:140px}
 .home .logo{position:absolute}
 .workspace-hint{left:1%;top:100%;gap:8px;font-size:13px;opacity:1;transform:none}
 .workspace-hint img{width:53px;transform:rotate(-30deg)}
 .home-arrow{top:26%;left:30%;width:22%;height:auto}
 .contact-text{min-width:0}
 .contact-text a{overflow-wrap:anywhere}
}
@media(hover:none){.workspace-hint{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.reveal{animation:none}.touch-cursor.is-fading{transition:none}.plan-link,.workspace-hint,.cover img{transition:none}}
/* Keep the supplied arrow above the floor plan so its tip is never covered. */
.home-arrow{top:43%;z-index:1;pointer-events:none}
.workspace-hint{left:2%;top:100%;color:#222}
.workspace-hint span{background:#fff;padding:4px 6px}
@media(max-width:700px){.home-arrow{top:26%;z-index:1}.workspace-hint{left:1%;top:100%}}

.nav-arrow{height:auto}
a,button{touch-action:manipulation}

/* Home: only the studio label is a link; coordinates stay relative to the plan image. */
.plan-frame{position:absolute;left:37.5%;top:18%;width:54%}
.plan-image{display:block;width:100%;height:auto;aspect-ratio:2000 / 1510}
.workspace-link{position:absolute;display:block;min-height:44px;transform:translateY(-50%);border-radius:2px;-webkit-tap-highlight-color:transparent}
.workspace-link:after{content:'';position:absolute;left:2%;right:2%;top:78%;border-bottom:1px solid currentColor;opacity:0;transition:opacity .16s ease}
.workspace-link:hover:after,.workspace-link:focus-visible:after{opacity:.8}
.workspace-link:active:after{opacity:1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.enter{display:block;white-space:nowrap}
.enter:after{content:none}
.typewriter{display:inline-block;white-space:pre}
.type-character{display:inline-block;visibility:hidden}
.is-typing .type-character{animation:type-character 1ms step-end var(--character-delay) forwards}
@keyframes type-character{from{visibility:hidden}to{visibility:visible}}
@media(max-width:700px){.plan-frame{left:9%;top:31%;width:84%}.workspace-link:after{top:65%}}
@media(prefers-reduced-motion:reduce){.type-character{visibility:visible}.workspace-link:after{transition:none}}

/* Continuous white header keeps scrolling artwork clear of the fixed wordmark. */
body:not(.home) header:before{content:'';position:fixed;inset:0 0 auto;height:calc(7.8vh + clamp(37.6px,3.54vw,69.7px) + 22px);background:#fff;z-index:10;pointer-events:none}
body:not(.home) .logo:before{content:none}
header nav{z-index:21}
.top{width:auto;font-size:14px;font-weight:300;color:#545454;opacity:1;padding:8px 0;line-height:1.4}
.top:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){body:not(.home) header:before{height:91px}}

/* Primary images reserve their final ratio and start loading from the document head. */
.portrait{height:auto;aspect-ratio:1396 / 904}
.workspace-link{border:1px solid rgba(34,34,34,.45);background:rgba(0,0,0,.025);transition:border-color .16s ease,background .16s ease}
.workspace-link:hover,.workspace-link:focus-visible{border-color:#222;background:rgba(0,0,0,.065)}
.workspace-link:after{opacity:.55}
.workspace-link:hover:after,.workspace-link:focus-visible:after{opacity:1}
.workspace-cta{position:absolute;top:100%;left:0;margin-top:4px;padding:3px 6px;background:#fff;font-size:clamp(11px,.9vw,15px);line-height:1.5;white-space:nowrap;color:#545454;transition:color .16s ease}
.workspace-link:hover .workspace-cta,.workspace-link:focus-visible .workspace-cta{color:#111;text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){.workspace-link,.workspace-cta{transition:none}}
.workspace-cta{background:#222;color:#fff;border-radius:2px;padding:4px 7px}
.workspace-link:hover .workspace-cta,.workspace-link:focus-visible .workspace-cta{background:#545454;color:#fff}
.workspace-link:hover,.workspace-link:focus-visible{box-shadow:0 0 0 3px rgba(0,0,0,.08)}

/* Live text replaces the lettering embedded in the plan, so the label itself can grow. */
.plan-frame{container-type:inline-size}
.workspace-text{position:absolute;left:0;top:50%;display:block;width:100%;padding:1px 0;background:#fff;color:#222;text-align:center;font-size:2.5cqw;line-height:1.1;white-space:nowrap;transform:translateY(-50%) scale(1);transform-origin:center;transition:transform .18s ease;pointer-events:none}
.workspace-link:hover .workspace-text,.workspace-link:focus-visible .workspace-text,.workspace-link:active .workspace-text{transform:translateY(-50%) scale(1.2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.workspace-link{background:transparent;border:0;box-shadow:none}
.workspace-link:hover,.workspace-link:focus-visible{background:transparent;box-shadow:none;border:0}
.workspace-link:after{display:none}
@media(prefers-reduced-motion:reduce){.workspace-text{transition:none}}

/* Home2: enlarged studio label and invitation share one horizontal centerline. */
.home-stage .enter{left:7.1%;transform:translateY(-50%)}
.workspace-text{background:transparent;padding:0;font-size:6.3cqw;line-height:1.12;text-align:left;transform-origin:right center}
.workspace-link{min-height:44px}
@media(max-width:700px){
 .home-stage .enter{left:8%;top:23%;transform:none}
 .workspace-link{left:0!important;width:40%!important}
 .workspace-text{font-size:6.3cqw;transform-origin:left center}
}

/* Invitation and studio label share the same type scale and Light weight. */
.home-stage .enter,.workspace-text{font-family:var(--portfolio-font);font-size:clamp(24px,2.3vw,46px);font-weight:300;line-height:1.3;letter-spacing:0}
@media(max-width:700px){.home-stage .enter,.workspace-text{font-size:26px}}

/* Original project panels: native desktop width, original ratio, no added seams. */
.detail-gallery.original-gallery{display:block;width:var(--original-width);max-width:100%;margin:0 auto;padding:0;border:0;gap:0;line-height:0;font-size:0;background:transparent}
.original-gallery img{display:block;width:100%;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;object-fit:contain}

/* Motion project previews retain the existing square card geometry. */
.cover video{transform:scale(var(--video-zoom,1));display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .25s ease,opacity .2s ease;pointer-events:none}
.project:hover .cover video{transform:scale(calc(var(--video-zoom,1) * 1.035));opacity:.88}
.original-gallery video{display:block;width:100%;height:auto;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent}
@media(prefers-reduced-motion:reduce){.cover video{transition:none}}

/* A small white separation between Alipay project images. */
[data-project="26"] .detail-gallery + .detail-gallery { margin-top: 8px; }

/* Project 015: show the whole video inside its square Works preview. */
a.project[href="#work/15"] .cover{background:#000}
a.project[href="#work/15"] .cover video{object-fit:contain;background:#000;transform:none;opacity:1}

/* Clickable Instagram reference in project 015. */
[data-project="15"] .project-external-link{color:#3972a6;cursor:pointer!important;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
[data-project="15"] .project-external-link:hover,[data-project="15"] .project-external-link:focus-visible{color:#295d8c;text-decoration-color:currentColor}

/* Vertical project index: original Sun Ding artwork, centered work and focus color. */
body.home .logo{position:fixed;top:28px;left:28px;width:22vw;max-width:350px;min-width:180px}
body.home nav{display:flex;position:fixed;left:auto;right:28px;top:30px;width:auto;min-width:0;flex-direction:row;gap:24px;font-size:14px;line-height:1.3}
body.home nav a.active{text-underline-offset:4px}
body.home .top{display:block;bottom:22px;right:28px;font-size:12px}
.project-index{position:fixed;z-index:4;left:28px;top:190px;bottom:50px;width:24vw;max-width:365px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;overflow:auto;scrollbar-width:thin}
.project-index button{display:block;border:0;background:none;padding:0;text-align:left;color:#aaa;font:inherit;font-size:12px;line-height:1.45;cursor:pointer;transition:color .25s}
.project-index button:hover,.project-index button.is-current{color:#111}
.project-rail{padding:calc(50svh - 125px) 0;min-height:100svh}
.rail-item{position:relative;min-height:250px;display:grid;grid-template-columns:1fr 250px 1fr;align-items:center;gap:0;margin:0 0 10px}
.rail-image{display:block;grid-column:2;line-height:0;overflow:hidden;filter:grayscale(1);opacity:.43;transition:filter .5s,opacity .5s;}
.rail-image img,.rail-image video{display:block;width:100%;height:250px;object-fit:cover}
.rail-item.is-current .rail-image{filter:grayscale(0);opacity:1}
.rail-tag{font-size:12px;line-height:1.5;opacity:0;transition:opacity .3s;pointer-events:none}
.rail-item.is-current .rail-tag{opacity:1}
.rail-tag-left{grid-column:1;grid-row:1;text-align:right;padding:0 6vw 0 26vw}
.rail-tag-right{grid-column:3;grid-row:1;padding:0 28px 0 6vw;display:flex;justify-content:space-between;gap:15px}
.rail-number{color:#777}
@media(min-width:1700px){.rail-item{grid-template-columns:1fr 300px 1fr;min-height:300px}.rail-image img,.rail-image video{height:300px}.project-rail{padding:calc(50svh - 150px) 0}.project-index button,.rail-tag{font-size:14px}}
@media(max-width:700px){body.home .logo{left:18px;top:22px;width:150px;min-width:0}body.home nav{top:25px;right:18px;left:auto;gap:10px;font-size:11px}.project-index{left:18px;top:115px;width:28vw;bottom:55px;justify-content:flex-start;gap:6px}.project-index button{font-size:10px;line-height:1.4}.project-rail{padding:calc(50svh - 90px) 0}.rail-item{grid-template-columns:34vw 46vw 20vw;min-height:180px;margin-bottom:30px}.rail-image img,.rail-image video{height:180px}.rail-tag-left{position:absolute;top:100%;left:34vw;width:46vw;text-align:left;padding:5px 0;font-size:9px}.rail-tag-right{padding:0 8px;font-size:9px;flex-direction:column;gap:8px}.rail-number{display:none}}
@media(prefers-reduced-motion:reduce){.rail-image,.rail-tag,.project-index button{transition:none}}

.project-index{top:160px;justify-content:flex-start;gap:2px}.project-index button{font-size:11px;line-height:1.3;flex-shrink:0}
@media(max-width:700px){.project-index{top:115px;gap:5px}.project-index button{font-size:10px;line-height:1.4}}

/* Ten-row viewport; project navigation follows the centered cover. */
.project-index{top:50%;bottom:auto;height:220px;transform:translateY(-50%);display:block;overflow:hidden;gap:0;width:24vw}
.project-index-track{will-change:transform;transition:transform .4s ease}
.project-index button{height:22px;line-height:22px;font-size:12px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#c5c5c5}
.project-index button.is-current{color:#111}
@media(max-width:700px){.project-index{top:50%;bottom:auto;height:200px;width:28vw}.project-index button{height:20px;line-height:20px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.project-index-track{transition:none}}

/* Slightly smaller covers, sharing a single centered axis. */
.rail-item{grid-template-columns:minmax(0,1fr) 225px minmax(0,1fr);min-height:225px}
.rail-image{width:100%;justify-self:center}
.rail-image img,.rail-image video{height:225px;object-position:center}
.project-rail{padding:calc(50svh - 112.5px) 0}
@media(min-width:1700px){.rail-item{grid-template-columns:minmax(0,1fr) 270px minmax(0,1fr);min-height:270px}.rail-image img,.rail-image video{height:270px}.project-rail{padding:calc(50svh - 135px) 0}}
@media(max-width:700px){.rail-item{grid-template-columns:minmax(0,1fr) 42vw minmax(0,1fr);min-height:162px}.rail-image img,.rail-image video{height:162px}.project-rail{padding:calc(50svh - 81px) 0}.rail-tag-left{left:29vw;width:42vw}}

body.home{overflow-anchor:none}

/* Metadata stays on the viewport centerline while covers scroll past. */
body.home .rail-tag{visibility:hidden}
.project-index-track{transition:none}
.fixed-project-meta{position:fixed;inset:0;z-index:3;pointer-events:none;font-size:12px;line-height:1.5}
.fixed-project-meta>span{position:absolute;top:50%;transform:translateY(-50%)}
.fixed-tag{left:26vw;right:calc(50% + 112.5px + 6vw);text-align:right}
.fixed-year{left:calc(50% + 112.5px + 6vw);right:80px}
.fixed-number{right:28px;color:#777}
@media(min-width:1700px){.fixed-project-meta{font-size:14px}.fixed-tag{right:calc(50% + 135px + 6vw)}.fixed-year{left:calc(50% + 135px + 6vw)}}
@media(max-width:700px){.fixed-project-meta{font-size:9px}.fixed-tag{left:30vw;right:auto;width:40vw;top:calc(50% + 92px)!important;text-align:center}.fixed-year{left:73vw;right:8px}.fixed-number{display:none}}

/* Compact Home previews with a direct path to the full work archive. */
body.home .rail-item{grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr);min-height:180px}
body.home .rail-image img,body.home .rail-image video{height:180px}
body.home .project-rail{padding:calc(50svh - 90px) 0}
body.home .fixed-tag{right:calc(50% + 90px + 6vw)}
body.home .fixed-year{left:calc(50% + 90px + 6vw)}
.home-works-link{position:fixed;z-index:6;left:50%;bottom:28px;transform:translateX(-50%);font-size:13px;line-height:1.4;border-bottom:1px solid currentColor;padding:5px 0;background:#fff}
.home-works-link span{margin-left:18px}
@media(min-width:1700px){body.home .rail-item{grid-template-columns:minmax(0,1fr) 215px minmax(0,1fr);min-height:215px}body.home .rail-image img,body.home .rail-image video{height:215px}body.home .project-rail{padding:calc(50svh - 107.5px) 0}body.home .fixed-tag{right:calc(50% + 107.5px + 6vw)}body.home .fixed-year{left:calc(50% + 107.5px + 6vw)}}
@media(max-width:700px){body.home .rail-item{grid-template-columns:minmax(0,1fr) 34vw minmax(0,1fr);min-height:135px}body.home .rail-image img,body.home .rail-image video{height:135px}body.home .project-rail{padding:calc(50svh - 67.5px) 0}body.home .fixed-tag{left:33vw;right:auto;width:34vw;top:calc(50% + 78px)!important}body.home .fixed-year{left:70vw;right:8px}.home-works-link{bottom:22px;font-size:12px}}

/* Stationary parentheses frame the focused Home preview. */
.project-brackets{position:fixed;inset:0;pointer-events:none;z-index:4}
.project-brackets svg{position:absolute;top:50%;width:28px;height:112px;fill:#000}
.bracket-left{right:calc(50% + 104px);transform:translateY(-50%)}
.bracket-right{left:calc(50% + 104px);transform:translateY(-50%) scaleX(-1)}
@media(min-width:1700px){.project-brackets svg{width:32px;height:132px}.bracket-left{right:calc(50% + 122px)}.bracket-right{left:calc(50% + 122px)}}
@media(max-width:700px){.project-brackets svg{width:15px;height:82px}.bracket-left{right:calc(50% + 17vw + 7px)}.bracket-right{left:calc(50% + 17vw + 7px)}}